/*-------------------------------------------------------------------
    파일정의 : 레이아웃
    속성순서 : 레이아웃, 사이징, 박스모양, 글자모양, 문단모양, 기타모양
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
    @header
-------------------------------------------------------------------*/

#header{ position: fixed; width: 100%; top: 0; left: 0; height: 70px; z-index: 97; transition: all 0.3s; }
#header.on{ background: #FFFFFF; border-bottom: 1px solid #EDEDED; }

#header .container{ height: 100%; display: flex; justify-content: space-between; align-items: center; }
#header .container::after{ display: none; }

.logo{ width: 119px; height: 34px; background: url('../img/common/logo.png') no-repeat center; background-size: 100%; }
.logo a{ display: block; width: 100%; height: 100%; text-indent: -9999px; }

.lang{ background-color: rgba(255, 255, 255, 0.1); background-image: url('../img/ic_lang.png'), url('../img/ic_arr_select_lang.png'); background-size: 16px, 14px; background-position: 14px center, right 14px center; background-repeat:no-repeat; border: 1px solid rgba(255, 255, 255, 0.1); box-sizing: border-box; border-radius: 40px; min-width: 107px; height: 36px; padding: 0 34px; font-size: 13px; line-height: 1.48; color: #ffffff; }
.lang option{ color: #000000; }

#header .gnb {flex: 1 0; margin-right: 40px;}
#header .gnb ul {display: flex; align-items: center; justify-content: flex-end; column-gap: 40px;}
#header .gnb ul li a {font-size: 15px; color: #ffffff;}

#header .btn-menu {position: relative; width: 38px; height: 32px; cursor: pointer;}
#header .btn-menu > span {position:absolute; top:0; left:0; width:38px; height:3px; background-color:#fff;}
#header .btn-menu > span:nth-child(2) {top: 40%; transition: visibility 0s .15s;}
#header .btn-menu.active > span:nth-child(2) {visibility: hidden; transition: visibility 0s;}
#header .btn-menu > span:nth-child(3) {top:80%;}
#header .btn-menu > span:nth-child(1), 
#header .btn-menu > span:nth-child(3) {transition:top .15s .15s, transform .15s;}
#header .btn-menu.active > span:nth-child(1), 
#header .btn-menu.active > span:nth-child(3) {top:40%; transform:rotate(45deg); transition:top .15s, transform .15s .15s;}
#header .btn-menu.active > span:nth-child(3) {transform:rotate(-45deg);}

#header.on .logo{ background: url('../img/common/logo_o.png') no-repeat center; background-size: 100%; }

#header.on .lang{ background-color: #FFFFFF; background-image: url('../img/ic_lang_bk.png'), url('../img/ic_arr_select_lang_bk.png'); border: 1px solid #EDEDED; color: #555555; }

#header.on .gnb ul li a {color: #121212;}

#header.on .btn-menu > span {background-color: #121212;}
 
/*-------------------------------------------------------------------
    @footer
-------------------------------------------------------------------*/
#footer{ padding-top: 30px; padding-bottom: 30px; background: #DDDDDD; text-align: left; font-size: 13px; line-height: 1.48; color: #888888; }

.txt-socal .ic-insta{ margin-right: 6px; vertical-align: -4px; }

.company{ display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; color: #888888 }
.company span{ position: relative; margin: 0 8px; }
.company span:first-child {margin-left: 0;}
.company span + span::before{ content: ""; width: 1px; height: 10px; background: #BBBBBB; position: absolute; left: -8px; top: 5px; }

.copyright {margin-top: 6px; color: #555555;}
.copyright strong{ font-weight: 700; }

.terms{ display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin-top: 20px; color: #555555; }
.terms a{ position: relative; margin: 0 8px; }
.terms a:first-child {margin-left: 0;}
.terms a + a::before{ content: ""; width: 1px; height: 10px; background: #BBBBBB; position: absolute; left: -8px; top: 5px; }
 
/*-------------------------------------------------------------------
    @content
-------------------------------------------------------------------*/
#content{}

.container{ margin-left: auto; margin-right: auto; position: relative; max-width: 1040px; padding-left: 40px; padding-right: 40px; width: 100%; }
.container::after{ display: block; clear: both; content: ""; }

.has-padding{}

/*-------------------------------------------------------------------
    @floating
-------------------------------------------------------------------*/
 
/*-------------------------------------------------------------------
    @popup
-------------------------------------------------------------------*/
.dim{ position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; z-index: 98; background: #000000; opacity: 0.5; }

.popup{ position: fixed; display: none; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #FFFFFF; border-radius: 16px; z-index: 99; }
.popup.on{ display: block; }

.popup .pop-head{}

.popup .pop-cont{}

.popup .pop-footer{}

.tost{ position: fixed; left: 30px; bottom: 30px; color: #ffffff; min-width: 200px; padding: 12px 20px; background: #000000; }

/* 사전등록완료 */
#popWaitlist{ padding: 54px 50px; color: #121212; width: calc(100% - 160px); max-width: 800px; overflow: auto; }
#popWaitlist .btn.ic-close{ position: absolute; right: 20px; top: 24px; }
#popWaitlist p strong{ color: #FD6955; }
#popWaitlist .txt01{ font-weight: 900; font-size: 24px; line-height: 1.5; }
#popWaitlist .txt02{ font-size: 16px; line-height: 1.4375; margin-top: 12px; }
#popWaitlist .txt03{ font-weight: 700; font-size: 24px; line-height: 1.45; margin-top: 40px; }
#popWaitlist .more-event{ margin-top: 50px; background: #F9F9F9; border-radius: 12px; padding: 20px 25px; }
#popWaitlist .txt04{ font-size: 16px; line-height: 1.5; color: #999999; }
#popWaitlist .txt04 .arr{ display: inline-block; border-top: 4px solid transparent; border-left: 6px solid #C4C4C4; border-bottom: 4px solid transparent; margin: 0 8px; }
#popWaitlist .copy-wrap{ margin-top: 20px;font-size: 15px; line-height: 1.46; }
#popWaitlist .copy-wrap a{ color: #48B2FF; text-decoration: underline; }
#popWaitlist .copy-wrap button{ font-size: 15px; line-height: 1.466; text-decoration: underline; }
#popWaitlist .copy-wrap button:first-of-type{ margin-left: 20px; }
#popWaitlist .copy-wrap button + button{ margin-left: 12px; }
#popWaitlist .copy-wrap button i{ margin-right: 6px; vertical-align: -5px; }
#popWaitlist .txt05{ font-weight: 700; font-size: 24px; line-height: 1.458; }
#popWaitlist .txt06{ font-size: 16px; line-height: 1.5; margin-top: 20px; }
#popWaitlist .txt07{ font-size: 16px; line-height: 1.5; color: #999999; margin-top: 10px; }
#popWaitlist .txt08{ font-weight: 700; font-size: 16px; line-height: 1.5; color: #999999; margin-top: 30px; }
#popWaitlist .txt09{ font-size: 16px; line-height: 1.5; color: #999999; margin-top: 10px; }

#mask { width: calc(100% - 160px); padding: 54px 50px; color: #121212; overflow: auto; max-width: 800px;}
#mask p { color: #FD6955; height: 100%; text-align: center; vertical-align: center; }

@media all and (max-width: 1040px) {
    /*-------------------------------------------------------------------
        @header
    -------------------------------------------------------------------*/
    #header{ height: 120px; z-index: 99; }

    .logo{ width: 236px; height: 68px; }

    /* #header .gnb {display: none;} */
    #header .gnb {width: 100%; background-color: #ffffff; height: auto; position: fixed; left: 0; top: 120px; padding-bottom: 40px; display: none;}
    #header .gnb .btn-wrap {padding: 20px 40px; overflow: hidden;}
    #header .gnb .btn-wrap button {width: calc(50% - 10px); float: left; height: 92px; line-height: 92px; border-radius: 12px; background: #F9F9F9; color: #121212; text-align: center; font-weight: 700; font-size: 28px;}
    #header .gnb .btn-wrap button i {vertical-align: -10px; margin-right: 10px}
    #header .gnb .btn-wrap button + button {margin-left: 20px;}
    #header .gnb ul {flex-direction: column; column-gap: 0; align-items: flex-start; justify-content: flex-start;}
    #header .gnb ul li a {height: 114px; line-height: 114px; padding: 0 40px; color: #121212; font-size: 34px; text-align: left; font-weight: 700;}
    #header .gnb .lang {margin-top: 60px; padding: 0 40px; color: #BBBBBB; overflow: hidden; height: auto; border: none; background: none; border-radius: 0;}
    #header .gnb .lang a {float: left; position: relative; font-size: 30px; line-height: 1.3333;}
    #header .gnb .lang a.on {color: #121212}
    #header .gnb .lang a + a {margin-left: 56px;}
    #header .gnb .lang a + a::before {content: ""; position: absolute; width: 1px; height: 28px; background:#EEEEEE; left: -30px; top: 6px;}
    
    /*-------------------------------------------------------------------
        @footer
    -------------------------------------------------------------------*/
    #footer{ padding-top: 60px; padding-bottom: 60px; font-size: 22px; }

    .txt-socal .ic-insta{ margin-right: 6px; vertical-align: -4px; }

    .company span{ margin: 0 11px; }
    .company span + span::before{ content: ""; width: 2px; height: 16px; left: -13px; top: 10px; }
    .company span:nth-child(3),
    .company span:last-child{ width: 100%; margin: 0; }
    .company span:nth-child(3)::before,
    .company span:last-child::before{ display: none; }

    .copyright {margin-top: 10px;}

    .terms{ margin-top: 40px; }
    .terms a{ margin: 0 11px; }
    .terms a:last-child { width: 100%; margin: 0; }
    .terms a + a::before{ content: ""; width: 2px; height: 16px; left: -13px; top: 10px; }
    .terms a:last-child::before{ display: none; }

    .tost{ left: 0; bottom: 0; width: 100%; padding: 24px 40px; font-size: 28px; }

    /* 사전등록완료 */
    #popWaitlist{ padding: 80px 40px; width: calc(100% - 160px); max-width: none; max-height: calc(100vh - 270px) }
    #popWaitlist .btn.ic-close{ right: 28px; top: 32px; }
    #popWaitlist .txt01{ font-size: 34px; }
    #popWaitlist .txt02{ font-size: 26px; margin-top: 20px; }
    #popWaitlist .txt03{ font-size: 34px; margin-top: 48px; }
    #popWaitlist .txt04{ font-size: 26px; }
    #popWaitlist .txt04 .arr{ border-top: 6px solid transparent; border-left: 9px solid #C4C4C4; border-bottom: 6px solid transparent; margin: 0 12px; }
    #popWaitlist .more-event{ margin-top: 26px; border-radius: 24px; padding: 32px; }
    #popWaitlist .txt05{ font-size: 34px; }
    #popWaitlist .copy-wrap{ margin-top: 24px; }
    #popWaitlist .copy-wrap a{ font-size: 24px; display: block; width: 100%; margin-bottom: 28px; }
    #popWaitlist .copy-wrap button{ font-size: 26px; }
    #popWaitlist .copy-wrap button:first-of-type{ margin-left: 0; }
    #popWaitlist .copy-wrap button + button{ margin-left: 28px; }
    #popWaitlist .copy-wrap button i{ margin-right: 14px; vertical-align: -8px; }
    #popWaitlist .txt06{ font-size: 26px; margin-top: 60px; }
    #popWaitlist .txt07{ font-size: 26px; margin-top: 16px; }
    #popWaitlist .txt08{ font-size: 26px; margin-top: 60px; }
    #popWaitlist .txt09{ font-size: 26px; margin-top: 24px; }
}

@media all and (max-width: 750px) {
    /*-------------------------------------------------------------------
        @header
    -------------------------------------------------------------------*/
    #header{ height: 60px;  }

    .logo{ width: 118px; height: 34px; }

    .lang{ background-size: 16px, 14px; background-position: 10px center, right 10px center; min-width: 93px; height: 28px; padding: 0 30px; font-size: 11px; }

    #header .btn-menu {width: 19px; height: 16px;}
    #header .btn-menu > span {width:19px; height:1.5px;}

    /* #header .gnb {display: none;} */
    #header .gnb { top: 60px; padding-bottom: 20px;}
    #header .gnb .btn-wrap {padding: 10px 20px; }
    #header .gnb .btn-wrap button {width: calc(50% - 5px); height: 46px; line-height: 46px; border-radius: 6px; font-size: 14px;}
    #header .gnb .btn-wrap button i {vertical-align: -5px; margin-right: 5px}
    #header .gnb .btn-wrap button + button {margin-left: 10px;}
    #header .gnb ul li a {height: 57px; line-height: 57px; padding: 0 20px; font-size: 17px;}
    #header .gnb .lang {margin-top: 30px; padding: 0 20px;}
    #header .gnb .lang a {font-size: 15px;}
    #header .gnb .lang a + a {margin-left: 28px;}
    #header .gnb .lang a + a::before {height: 14px; left: -15px; top: 3px;}
    
    /*-------------------------------------------------------------------
        @footer
    -------------------------------------------------------------------*/
    #footer{ padding-top: 30px; padding-bottom: 30px; font-size: 11px; }

    .txt-socal .ic-insta{ margin-right: 3px; vertical-align: -2px; }

    .company span{ margin: 0 6px; }
    .company span + span::before{ content: ""; width: 1px; height: 8px; left: -6px; top: 5px; }

    .copyright {margin-top: 5px;}

    .terms{ margin-top: 20px; }
    .terms a{ margin: 0 6px; }
    .terms a + a::before{ content: ""; width: 1px; height: 8px; left: -6px; top: 5px; }
 
    /*-------------------------------------------------------------------
        @content
    -------------------------------------------------------------------*/
    .container{ padding-left: 20px; padding-right: 20px; }

    .tost{ padding: 12px 20px; font-size: 14px; }

    /* 사전등록완료 */
    #popWaitlist{ padding: 40px 20px; width: calc(100% - 80px); max-height: calc(100vh - 135px) }
    #popWaitlist .btn.ic-close{ right: 14px; top: 16px; }
    #popWaitlist .txt01{ font-size: 17px; }
    #popWaitlist .txt02{ font-size: 13px; margin-top: 10px; }
    #popWaitlist .txt03{ font-size: 17px; margin-top: 24px; }
    #popWaitlist .txt04{ font-size: 13px; }
    #popWaitlist .txt04 .arr{ border-top: 3px solid transparent; border-left: 4px solid #C4C4C4; border-bottom: 3px solid transparent; margin: 0 6px; }
    #popWaitlist .more-event{ margin-top: 13px; border-radius: 12px; padding: 16px; }
    #popWaitlist .txt05{ font-size: 17px; }
    #popWaitlist .copy-wrap{ margin-top: 12px; }
    #popWaitlist .copy-wrap a{ font-size: 12px; margin-bottom: 14px; }
    #popWaitlist .copy-wrap button{ font-size: 13px; }
    #popWaitlist .copy-wrap button + button{ margin-left: 14px; }
    #popWaitlist .copy-wrap button i{ margin-right: 7px; vertical-align: -4px; }
    #popWaitlist .txt06{ font-size: 13px; margin-top: 30px; }
    #popWaitlist .txt07{ font-size: 13px; margin-top: 8px; }
    #popWaitlist .txt08{ font-size: 13px; margin-top: 30px; }
    #popWaitlist .txt09{ font-size: 13px; margin-top: 12px; }
}