@charset "utf-8";
@import url("../fonts/font.css");
/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, textarea, button,
article, aside, canvas, details, embed, figure, figcaption, footer, header, menu,
nav, output, ruby, section, summary, time, mark, audio, video
{ margin:0;padding:0;border:0;}
article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block;}
html {height:auto;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none; }
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content:none;}
table {border-collapse:collapse;border-spacing:0;}
a {text-decoration:none;color:inherit;}
a:hover {text-decoration:none;}
legend, caption, hr {display:none;}
em, i{font-style:normal;}
img {vertical-align:top;max-width: 100%;}
input {vertical-align:middle;}
p,h3,h2,h1{letter-spacing: normal;}
input,textarea,button,select{ font-family: sans-serif; }
section{width:100%;text-align: center;}
body{ font-family:'NotoSans';width: 100%;height: 100%; color:#282828;background-color: #ffffff;}
button{cursor: pointer}
button,select{ font-family:'NotoSans';-webkit-appearance: none;border: 0;background: transparent;}
video{object-fit: cover;}
ol, ul,li { list-style: none; }
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input[type=number] {
    -moz-appearance: textfield;
}
/* IE 에서 Select box 화살표 제거 */
select::-ms-expand {
    display: none;
}



#skipTo {width: 100%; overflow: hidden; position: relative; z-index: 1000;}
#skipTo a {margin: 0px -1px -1px 0px; width: 1px; height: 1px; text-align: center; line-height: 0; overflow: hidden; font-size: 0px; display: block;}
#skipTo a:focus {background: rgb(32, 38, 44); margin: 0px; padding: 8px 0px 0px 15px; width: auto; height: 20px; color:#ffffff; line-height: 1; font-size: 12px; font-weight: 700;}
#skipTo a:hover {background: rgb(32, 38, 44); margin: 0px; padding: 8px 0px 0px 15px; width: auto; height: 20px; color:#ffffff; line-height: 1; font-size: 12px; font-weight: 700;}
#skipTo a:active {background: rgb(32, 38, 44); margin: 0px; padding: 8px 0px 0px 15px; width: auto; height: 20px; color:#ffffff; line-height: 1; font-size: 12px; font-weight: 700;}

#wrap{position: relative;}

#header{position: fixed; width:100%; min-width:580px; z-index:999;}
#header .top_util_container{display:block;position: relative;height:40px;width:100%;line-height:40px;background-color: #000000;color:#ffffff;font-size:11px;}
#header .top_util_container .top_util{float:right; height:40px;}
#header .top_util_container .top_util .weather{display: inline-block;}
#header .top_util_container .top_util .weather span {display: inline-block; margin-left:19px;}
#header .top_util_container .top_util .weather span:last-child {margin-right:26px;}
#header .top_util_container .top_util .login{position:relative;display: inline-block;width:80px; height:40px; text-align: center; vertical-align: top; letter-spacing: 1px;}
#header .top_util_container .top_util .login a {position:relative; width:100%; height:100%; display: block;z-index:1;}
#header .top_util_container .top_util .login span {position:absolute; top:0; left:0; width:100%; height:100%; display: block; transition:all 0.3s;}
#header .top_util_container .top_util .login span.close_str {visibility: hidden; opacity:0;}
#header .top_util_container .top_util .login span img {vertical-align: middle; position:relative; top:-1px; margin-right:9px;}
#header .top_util_container .top_util .login:before{content: '';position:absolute; top:0; left:0;display: inline-block;width:1px;height:40px;background-color: rgba(255,255,255,0.2);}
#header .top_util_container .top_util .login:after{content: '';position:absolute; top:0; right:0;display: inline-block;width:1px;height:40px;background-color: rgba(255,255,255,0.2); z-index:0;}
#header .top_util_container .top_util .login a.active {background-color:#251232;}
#header .top_util_container .top_util .login a.active span.login_str {visibility: hidden; opacity: 0;}
#header .top_util_container .top_util .login a.active span.close_str {visibility: visible; opacity: 1;}
#header .top_util_container .top_util .join:before {content:none;}

#header .top_util_container .top_util .lang{display: inline-block;width:103px;position: relative; vertical-align: top;}
#header .top_util_container .top_util .lang .lang_select a{margin-left:17px;letter-spacing: 1px}
#header .top_util_container .top_util .lang .lang_select a:after{content:'';position:relative;top:9px;left:10px;width: 0;height: 0;border-left: 4px solid transparent;border-right: 4px solid transparent;border-top: 4px solid #ffffff;}
#header .top_util_container .top_util .lang .lang_dropdown{height:0;position: absolute;z-index: 6;background-color: #1d1d1d;width: calc(100% + 2px);left: -2px;overflow: hidden;letter-spacing: 1px}
#header .top_util_container .top_util .lang .lang_dropdown ul li a{display: block;padding-left: 18px}
#header .top_util_container .top_util .lang .lang_dropdown ul li:hover{background: #2b2b2b}
#header .top_util_container .top_util .lang.active .lang_select a:after{top:-9px;border-top: 0;border-bottom: 4px solid #ffffff;}

#gnb{position:relative; width:100%; background-color: #ffffff;}

#gnb .depth1_box {position:relative; background-color:#fff; width:100%; height:67px; color:#000;}
#gnb .depth1_box:after {content:""; width:100%; height:1px; position:absolute; bottom:0; left:0; background-color:rgba(0,0,0,0.08);}

#gnb .depth1_box .logo{display:inline-block;width:340px;height:67px;text-align: center;vertical-align: top}
#gnb .depth1_box .logo a{display: block;padding:5px 0 11px;box-sizing: border-box;}
#gnb .depth1_box ul{display: inline-block; height:100%;}
#gnb .depth1_box ul li{position:relative; float:left;font-size:14px; line-height:67px; padding:0 22px; font-weight: 900;}
#gnb .depth1_box ul li:first-child {padding-left:0;}
/*#gnb .depth1_box ul li:after{content: '';position:relative;display: inline-block;width:1px;height:12px;background-color:#d1d1d1;margin:0 25px;}*/
#gnb .depth1_box ul li.line {position:relative;top:50%; display: inline-block;width:1px;height:12px;background-color:#d1d1d1;margin:-6px 0 0; padding:0;}
#gnb .depth1_box ul li:last-child:after{content: none;}
#gnb .depth1_box ul li .depth2 {position:absolute; top:62px; left:22px; display:table; opacity:0; visibility: hidden; transition:all 0.3s;}
/*#gnb .depth1_box ul li .depth2 {position:absolute; top:62px; left:0; display:table;  transition:all 0.3s;}*/
#gnb .depth1_box ul li .depth2 div {display: table-cell;}
#gnb .depth1_box ul li .depth2 a {display:block; position:relative; font-size:14px; color:#cc0000; margin-right:25px; white-space: nowrap; margin-top:3px; text-transform:capitalize;}
#gnb .depth1_box ul li .depth2 a:after {content:""; position:absolute; bottom:19px; left:50%; width:0; height:1px; background-color:rgba(122,100,151,0.5); transition:all 0.3s;}
#gnb .depth1_box ul li .depth2 a:hover {color:#cc0000;}
#gnb .depth1_box ul li .depth2 a:hover:after {left:0; width:100%;}
#gnb .depth1_box ul li:first-child .depth2 {left:0;}
#gnb .depth1_box ul li:hover .depth2 {visibility: visible; opacity:1; }
#gnb .depth1_box ul li.over .depth2 {visibility: visible; opacity:1; }
#gnb .depth1_box ul li > a {transition:all 0.3s;text-transform:uppercase;}
#gnb .depth1_box ul li > a:hover {color:#5b2f7a;}
#gnb .depth1_box ul li.depth1_8 .depth2 {left:-228px;}

#gnb .depth1_box .reservation{position: relative;float:right;height:100%;}
#gnb .depth1_box .reservation a{display: block;width:267px;height:100%;background-color: #3c1650;line-height: 67px;color:#ffffff;padding-left:72px;box-sizing: border-box;transition:background-color 0.3s; letter-spacing: 2px; font-size: 15px;}
#gnb .depth1_box .reservation a:hover {background-color:#4b285e;}
#gnb .depth1_box .reservation a:before{content: '';display:inline-block;position:absolute;right:64px;top:24px;width:27px;height:19px;background: url('../images/common/ico_reservation.png') no-repeat right top;  }

#gnb .depth1_box .depth2_bg {position:absolute; top:67px; width:100%; height:62px; background-color:#a7b8f9; border-bottom:1px solid rgba(0,0,0,0.08);visibility: hidden;opacity:0; transition:all 0.3s;}
#gnb .depth1_box .depth2_bg.active {visibility:visible;opacity:1;}

#gnb .depth1_box ul li.active > a {color:#5b2f7a;}
/*#gnb .depth1_box ul li.active .depth2 {visibility: visible; opacity:1; }*/
#gnb .depth1_box ul li .depth2 div.active a {color:#cc0000;}
#gnb .depth1_box ul li .depth2 div.active a:after {left:0; width:100%;}
/*#gnb .depth1_box.active .depth2_bg {visibility:visible;opacity:1;}*/




@keyframes inmotion_mask {
    0% {left:0; width:0;}
    35% {left:0; width:100%;}
    /*50% {left:0; width:100%;}*/
    100% {left:100%; width:0;}
}

@keyframes inmotion_mask2 {
    0% {right:100%; width:0;}
    35% {right:0; width:100%;}
    /*50% {right:0; width:100%;}*/
    100% {right:0; width:238px;}
}

@keyframes wrong-motion {
    0% {opacity:1;}
    20% {opacity:0.3;}
    40% {opacity:1;}
    60% {opacity:0.3;}
    80% {opacity:1;}
    100% {opacity:1;}
}