@charset "utf-8";
@import url('https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css');

html, body {position:relative; margin: 0 auto; min-width: 1290px; width: 100%; height: 100%; color: #000; line-height: 1.5; font-size: 16px; font-family: 'Spoqa Han Sans Neo', sans-serif; -webkit-font-smoothing:antialiased; -webkit-overflow-scrolling: touch; }
body { color: #777; word-wrap: break-word; word-break: keep-all; -webkit-text-size-adjust: none; }
body * { box-sizing: border-box;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td, p, button { margin:0; padding:0; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display:block;}
audio, canvas, video { display:inline-block;}
ol, ul, li {list-style:none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content:none;}
table { table-layout: fixed; width:100%; border-collapse:collapse; border-spacing:0}
fieldset, img, abbr, acronym {border:0}
img { max-width: 100%; vertical-align:top;}
i, em, address {font-style:normal;}
a {color:#222; text-decoration:none; word-break:break-all;}
caption, legend {width:0; height:0; text-indent:-9999em; overflow:hidden; font-size:0;} 
label, button {cursor:pointer; vertical-align:middle;}
input, textarea, select, button {margin:0; padding:0; color:#222; font-weight: 400; font-family: sans-serif; vertical-align:middle; outline: none; font-family: 'Spoqa Han Sans Neo', sans-serif; box-shadow: none;}
input:-webkit-autofill{-webkit-box-shadow:0 0 0px 1000px white inset;}
input::-webkit-input-placeholder{color:#888; font-weight: 400;}
input::-moz-input-placeholder{color:#888; font-weight: 400;}
input:-ms-input-placeholder{color:#888; font-weight: 400;}
select::-webkit-input-placeholder{color:#888; font-weight: 400;}
textarea {border: 1px solid #666; resize:none; overflow-y:auto;}
textarea::-webkit-input-placeholder{color:#888; line-height: 1.063rem; font-size: 0.688rem; font-weight: 400;}
button {overflow:visible; border:0 none; background:none; vertical-align:top; cursor:pointer;}
button::-moz-focus-inner,input::-moz-focus-inner {border: 0; padding: 0;}
input[type="text"] { appearance: none; -webkit-appearance: none; -moz-appearance: none;}
input[type="date"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #fff; }
::-webkit-calendar-picker-indicator{ margin-left: -20px;}
::-ms-calendar-picker-indicator{ margin-left: -20px;}
input[type="date"]::-webkit-calendar-picker-indicator { background: none;}
select {appearance: none; -webkit-appearance: none; -moz-appearance: none;}
input:disabled { color: #000; border: 1px solid #ccc !important; background-color: #f5f5f5; opacity:1; -webkit-text-fill-color: inherit; }

/* layout */
#wrap { position: relative; width: 100%; height: 100%; letter-spacing: -0.5px; }
.myvideo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
#header { position: absolute; top: 0; left: 0; width: 100%; height: 105px; border-bottom: 1px solid rgba(0,0,0,0.6); background-color: rgba(0,0,0,0.8); z-index: 10; box-shadow: 9px 0 21px rgba(0,0,0,0.28);}
#header .inner { position: relative; margin: 0 auto; width: 1280px; height: 104px; }
#header .logo { position: absolute; top: 0; left: 0;}
#header .logo a { display: block; padding: 28px 0;;}
.hd_right { position: absolute; top: 0; right: 0; padding: 15px 81px 0 0; height: 104px; text-align: right; background: url('../img/bg_arrow.png') no-repeat 100% 50%; }
.hd_right .top_txt { margin-bottom: 6px; padding-right: 3px; color: rgba(255,255,255,0.7); line-height: 18px; font-size: 16px; font-weight: 500; }
.hd_right .mid_txt { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; margin-bottom: 5px; }
.waviy { display: inline-block; position: relative; margin-left: 5px; padding: 0 0 5px 5px; line-height: 0; font-size: 0; position: relative; /* -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2)); */ letter-spacing: 1px; }
.waviy::before { display: block; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 22px; background-color: #000; }
.waviy span { display: inline-block; position: relative; color: #ffa874; line-height: 32px; font-size: 30px; font-weight: 700; animation: waviy 1.5s infinite; animation-delay: calc(.1s * var(--i)); }
@keyframes waviy {
 0% {
 transform: translateY(0)
 }
 20% {
 transform: translateY(-6px)
 }
 40% {
 transform: translateY(0px)
 }
 60% {
 transform: translateY(0px)
 }
 100% {
 transform: translateY(0px)
 }
}
.hd_right .btm_txt { padding-right: 3px; color: rgba(255,255,255,0.4); line-height: 16px; font-size: 14px; }
.btn_group { position: absolute; bottom: 40px; left: 0; width: 100%; height: 84px; z-index: 10; text-align: center; }
.btn_group .center { line-height: 0; font-size: 0; text-align: center; }
.btn_group .center .btn_round { position: relative; min-width: 342px; font-size: 28px; text-align: left; }
.btn_group .right { position: absolute; top: 0; right: 30px; }
.btn_round { display: inline-block; overflow: hidden; margin-left: 20px; padding: 0 35px; min-width: 245px; height: 84px; color: #150240; line-height: 84px; font-size: 20px; letter-spacing: -0.5px; text-align: center; border-radius: 50px; background: rgba(255,255,255,0.9); box-shadow: 9px 0 40px rgba(0,0,0,0.2); vertical-align: top; }
.btn_round:first-child { margin-left: 0; } 
.btn_round:hover .ic_arrow { right: 20px; } 
.ic_pc { display: inline-block; margin-right: 6px; width: 25px; height: 84px; background: url('../img/ic_pc.png') no-repeat 50% 50%; vertical-align: top;}
.ic_mobile { display: inline-block; margin-right: 6px; width: 19px; height: 84px; background: url('../img/ic_mobile.png') no-repeat 50% 50%; vertical-align: top;}
.ic_arrow { display: inline-block; position: absolute; top: 0; right: 35px; width: 33px; height: 84px; background: url('../img/ic_arrow.png') no-repeat 50% 50%; vertical-align: top; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;}
.ic_youtube { display: inline-block; margin-right: 10px; width: 41px; height: 84px; background: url('../img/ic_youtube.png') no-repeat 50% 50%; vertical-align: top;}
.img_txt { margin-top: -10px; }

.btn_sound { position: absolute; top: 140px; right: 40px; width: 84px; height: 84px; overflow: hidden; border-radius: 50%; box-shadow: 9px 0 40px rgba(0,0,0,0.2); background: url('../img/sound_off.png') no-repeat 50% 50%; line-height: 0; font-size: 0; text-indent: -9999px;  }
.btn_sound.on { background-image: url('../img/sound_on.png'); }


@media screen and (max-width: 1280px) {
#header .inner { width: 100%; }
#header .logo { left: 30px; }
.hd_right { right: 30px; }
.btn_group .center { margin-left: -30px; }
}