:root {--header-height: 130px;}
@media screen and (max-width: 820px) {
    :root {--header-height: 90px;}
}
@media screen and (max-width: 500px) {
    :root {--header-height: 70px;}
}

.header {position: fixed; left: 0; top: 0; width: 100%; z-index: 110; height: var(--header-height);}
.header .wrap {height: 100%;}
.header .headerWrap {position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%;}
.header .headerWrap .btnWrap {width: 28px; height: 28px; position: relative; z-index: 100;}
.header .headerWrap .btnWrap .hamburger {cursor: pointer; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 100;}
.header .headerWrap .btnWrap .hamburger span {display: block; width: 100%; height: 3px; background-color: #fff; position: absolute; left: 0; top: 50%; transform: translateY(-50%); transition: all .3s ease-in-out;}
.header .headerWrap .btnWrap .hamburger span:nth-child(1) {transform: translateY(calc(-50% + 9px));}
.header .headerWrap .btnWrap .hamburger span:nth-child(3) {transform: translateY(calc(-50% - 9px));}

.header .headerWrap .logo {max-width: 169px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.header .headerWrap .logo svg {width: 100%;}
.header .headerWrap .logo svg.pc {display: block;}
.header .headerWrap .logo svg.mo {display: none;}
.header .headerWrap .bookBtn {transition: all .3s ease-in-out; font-size: 24px; font-family: 'disol_headline'; font-weight: 500; letter-spacing: -0.02em; color: #fff; padding: calc(15/24*1em) calc(15/24*1em) calc(11/24*1em); box-sizing: border-box; border: 1px solid #fff; border-radius: calc(8/24*1em);}
.header .headerWrap .bookBtn:hover {background-color: #fff; color: #000;}

.header .lang{ position: absolute; top: 53px; right: 0;font-size: 22px; letter-spacing: -0.02em; color: #fff; font-family: 'Futura Std Book'; z-index: 10; opacity: 0; pointer-events: none; transition-duration: 0.3s; }
.header .lang p a{ color: #7c7c7c; }
.header .lang p a.on{ color: #fff; }

.header.ham .headerWrap .btnWrap .hamburger span:nth-child(1) {transform: translateY(-50%) rotate(45deg);}
.header.ham .headerWrap .btnWrap .hamburger span:nth-child(2) {transform: translateY(-50%) rotate(-45deg);}
.header.ham .headerWrap .btnWrap .hamburger span:nth-child(3) {opacity: 0;}
.header.ham .headerWrap .bookBtn{ opacity: 0; pointer-events: none; }
.header.ham ~ .total{ transform: translateY(0); opacity: 1; }
.header.ham .lang{ opacity: 1; pointer-events: unset; }

.total{ width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding-top: 130px; position: fixed; top: 0; left: 0; z-index: 101; color: #fff; background-color: rgba(0,0,0,0.9); opacity: 0; transform: translateY(-100%); transition-duration: 0.8s; }
.total > .wrap{ position: relative; }

.total .menu{ width: 100%; position: relative; display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,0.2); }
.total .menu li{ height: 11.4vh; box-sizing: border-box; display: flex; align-items: center; position: relative;  box-sizing: border-box; width: 100%; }
.total .menu > li{ border-bottom: 1px solid rgba(255,255,255,0.2); padding: 0 calc(290 / 1920 * 100%); box-sizing: border-box; padding-top: 0.7vh; }
/* .total .menu > li > a{ width: 50%; } */
.total .menu li > a{ position: relative; display: flex; align-items: center; font-size: 3.5417vw; font-family: 'disol_roman';  height: 100%; transform: translateX(-50%); left: 50%; transition-duration: 0.6s;  box-sizing: border-box; }
.total .menu li > i{ position: absolute; top: 50%; left: 50.8%; transform: translate(-80%, -50%); font-size: 30px; display: block; opacity: 0; transition-duration: 0.4s; color: #7c7c7c; }
.total .menu li > a > em{ position: absolute; left: 0; top: 50%; transform: translate(0, -50%); display: block; clip-path: polygon(0 0, 100% 0%, 100% 43.5%, 0 43.5%); transition-duration: 0.2s; color: #7c7c7c; }
.total .menu li > a > span{ display: block; clip-path: polygon(0 43%, 100% 43%, 100% 100%, 0 100%); transition-duration: 0.2s; color: #7c7c7c; }
.total .menu li .depth{ position: absolute; top: 0; left: 50%; padding: 0 85px; box-sizing: border-box; opacity: 0; transform: translateX(-50%); pointer-events: none; transition-duration: 0.6s; z-index: 5; width: 50%; }
.total .menu li .depth > li{ width: 100%; }
.total .menu li .depth > li > a{ width: 100%; }
.total .book__btn{ margin-top: 20px;  font-size: 2.0833vw; border: 1px solid rgba(255,255,255,0.6); box-sizing: border-box; border-radius: 8px; font-family: 'disol_roman'; transition-duration: 0.2s; }
.total .book__btn > a{ display: flex; align-items: center; justify-content: center; padding: calc(18 / 40 * 1em) calc(100 / 40 * 1em); padding-top: calc(23 / 40 * 1em); }
.total .loginWrap{ font-size: 0.91664vw; letter-spacing: -0.02em; font-family: 'Futura Std Book'; margin-top: 20px; }
.total .loginWrap p.mob{ display: none; }

.total .menu li.upper .depth{ transform: translate(-50%, -11.4vh); }
.total .menu li.upper.on .depth{ transform: translate(0, -11.4vh); }
.total .menu li.left > a{ transform: translateX(0); left: 0; }
.total .menu li.on > i{ opacity: 1; transform: translate(-50%, -50%); }
.total .menu li.on .depth{ opacity: 1; transform: translateX(0); pointer-events: unset; }


@media screen and (min-width: 821px){
    /* .total .menu li > a:hover{ color: #fff; } */
    .total .menu li:hover > a > em{ transform: translate(2.5px, -50%); color: #fff; }
    .total .menu li:hover > a > span{ transform: translateX(-2.5px); color: #fff; }

    .total .book__btn:hover{ background-color: rgba(255,255,255,0.6); }
}

@media screen and (max-width: 1440px){
    .total .menu > li{ padding: 0 calc(200 / 1920 * 100%); padding-top: 0.7vh; }
    .total .book__btn{ font-size: 1.6833vw; border-radius: 5px; margin-top: 10px; }
    .total .book__btn > a{ padding: calc(15 / 40 * 1em) calc(80 / 40 * 1em); padding-top: calc(20 / 40* 1em); }
    .total .loginWrap{ margin-top: 10px; }
}

@media screen and (max-width: 1280px){
    .total .menu > li{ padding: 0 calc(150 / 1920 * 100%); padding-top: 0.7vh; }
    .total .book__btn{ font-size: 16px; border-radius: 5px; margin-top: 10px; }
    .total .loginWrap{ font-size: 14px; }
    .total .menu li .depth{ padding: 0 45px; }
    .total .menu li > i{ font-size: 24px; }
}

@media screen and (max-width: 820px){
    .header .headerWrap .bookBtn{ display: none; }
    .header .headerWrap{ flex-direction: row-reverse; }
    .header .headerWrap .logo{ position: static; top: 0; left: 0; transform: translate(0, 0); width: 65px; }
    .header .headerWrap .logo svg.pc {display: none;}
    .header .headerWrap .logo svg.mo {display: block;}

    .header .lang{ display: none; }

    .total{ padding: 85px 0; overflow: auto; }
    .total .menu li{ height: auto; }
    .total .menu li > i{ display: none; }
    .total .menu > li{ padding: 0; text-align: center; display: block; padding-top: 1.2%; }
    .total .menu li > a{ font-size: min(9.5833vw, 46px); transform: translateX(0); left: 0; justify-content: center; height: auto; }
    .total .menu > li > a{ padding: calc(35 / 46 * 1em) 0; }
    .total .menu li > a > em{ left: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
    .total .menu li .depth{ position: static; left: 0; transform: translateX(0); opacity: 1; pointer-events: unset; width: 100%; padding: 0; display: none; transition-duration: unset; padding-bottom: 35px; }
    .total .menu li.upper .depth{ transform: translate(0, 0); }
    .total .menu li.upper.on .depth{ transform: translate(0, 0); }
    .total .menu li .depth li > a{ padding: 25px 0; font-size: min(7.5vw, 36px); }
    .total .menu li .depth li > a > span{ color: #fff; }
    .total .menu li .depth li > a > em{ color: #fff; }

    .total .loginWrap{ display: flex; justify-content: space-between; width: 90%; margin: 0 auto; margin-top: 35px; font-size: 22px; }
    .total .loginWrap > p{ display: flex; width: 50%; align-items: center; justify-content: center; position: relative; }
    .total .loginWrap > p::after{ content: ''; display: block; width: 2px; height: 80%; background-color: #7c7c7c; position: absolute; right: 0; top: 10%; }
    .total .loginWrap p.mob{ display: flex; color: #7c7c7c; }
    .total .loginWrap p.mob::after{ display: none; }
    .total .loginWrap p.mob > a.on{ color: #fff; }

    .total .book__btn{ width: 90%; margin: 0 auto; margin-top: 40px; }
    .total .book__btn > a{ font-size: 28px; padding: 1em 0; box-sizing: border-box; width: 100%; text-align: center; padding-bottom: 0.9em; }

    .total .menu li.on > a > em{ transform: translate(-49.5%, -50%); color: #fff; }
    .total .menu li.on > a > span{ transform: translateX(-1.5px); color: #fff; }
}

@media screen and (max-width: 500px){
    .total .menu > li > a{ padding: calc(25 / 46 * 1em) 0; font-size: 7.78vw; }
    .total .menu li .depth{ padding-bottom: calc(25 / 46 * 1em); }
    .total .menu li .depth li > a{ padding: 15px 0; }
    .total .book__btn{ margin-top: auto; }
    .total .book__btn > a{ padding: 0.7em 0; font-size: 22px; }
    .total .loginWrap{ font-size: 14px; margin-top: 15px; }
}



.footer { background: #000; position: relative; z-index: 100;}
.footer .inner {position: relative; padding: 30px 0; border-top: 1px solid #333; display: flex; flex-direction: column; align-items: center;}
.footer .inner .flx {display: flex; justify-content: center; width: 100%; position: relative;}
.footer .inner .infoWrap {display: flex; flex-direction: column; align-items: center;}
.footer .inner .infoWrap .logo {width: 100%; max-width: 181px;}
.footer .inner .infoWrap .logo svg {width: 100%;}
.footer .inner .infoWrap .info {padding-top: 30px; font-size: 14px; line-height: calc(26/14*1em); max-width: 600px;}
.footer .inner .infoWrap .info dl {display: flex; align-items: center; justify-content: center; gap: 5px;}
.footer .inner .infoWrap .info dl dt {font-weight: 500; letter-spacing: -0.01em; color: #fff;}
.footer .inner .infoWrap .info dl dd {font-weight: 300; letter-spacing: -0.01em; color: #777;}
.footer .inner .menu {max-width: 1100px; width: 100%;}
.footer .inner .menu ul {display: flex; justify-content: space-between;}
.footer .inner .menu ul li { display: flex; flex-direction: column; gap: 10px;}
.footer .inner .menu > ul > li > a {font-size: 22px; font-weight: 500; font-family: 'Roboto'; letter-spacing: -0.02em; color: #fff; transition: all .3s ease-in-out;}
.footer .inner .menu > ul > li > a:hover {color: #f6ad3c;}
.footer .inner .menu > ul > li > .subDept {display: flex; flex-direction: column; gap: 10px;}
.footer .inner .menu > ul > li > .subDept a {font-size: 18px; font-weight: 500; font-family: 'Roboto'; letter-spacing: -0.01em; color: #777777; transition: all .3s ease-in-out;}
.footer .inner .menu > ul > li > .subDept a:hover {color: #f6ad3c;}
/* .footer .inner .bottom {position: absolute; right: 0; bottom: 30px;} */
.footer .inner .bottom {position: static}
.footer .inner .bottom .sns {display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 24px; padding-top: calc(25/24*1em);}
.footer .inner .bottom .sns a { color: #fff; transition: all .3s ease-in-out;}
.footer .inner .bottom .sns a:hover {color: #f6ad3c;}
.footer .inner .bottom .copy {padding-top: calc(20/12*1em); text-align: right; font-size: 12px; color: #333333;}

.teaser .footer .inner {padding: 25px 0;}
.teaser .footer .inner .menu {display: none;}
.teaser .footer .inner .infoWrap .info dl:not(:first-child) {display: none;}
.footer .inner .infoWrap .info {padding-top: 15px; color: #fff; text-align: center; word-break: keep-all; opacity: .8;}
/* 공통 */
.footer .inner .bottom .sns .youtube {display: none;}
.teaser .footer .inner .flx {justify-content: center;}
.teaser .footer .inner .infoWrap {align-items: center;}

.footer .inner .policy{text-align: center;color: #777777; font-size: 14px;padding-top: 15px;}

@media screen and (max-width: 1440px) {
    .footer .inner .menu > ul > li > a {font-size: clamp(18px, 22/1440*100vw, 22px);}
}
@media screen and (max-width: 1280px) {
    .footer .inner .menu > ul > li > a {font-size: clamp(16px, 18/1280*100vw, 18px);}
    .footer .inner .menu > ul > li > .subDept a {font-size: clamp(14px, 16/1280*100vw, 16px);}
}
@media screen and (max-width: 1024px) {
    .footer .inner {flex-direction: column;}
    .footer .inner .menu {max-width: 45%;}
    .footer .inner .menu ul {flex-wrap: wrap; gap: 20px; justify-content: flex-end;}
    .footer .inner .menu ul li {width: calc(100% / 3 - (20px * 2 / 3)); flex-shrink: 0;}
    .footer .inner .bottom {position: static;}
}
@media screen and (max-width: 820px) {
    .footer .inner {padding-bottom: 0;}
    .teaser .footer .inner {padding: 15px 0;}
    .footer .inner .infoWrap .logo {width: 160px;}
    .footer .inner .menu {display: none;}
    .footer .inner .infoWrap {width: 100%; align-items: center;}
    .footer .inner .infoWrap .info {padding-top: calc(20/14*1em); font-size: clamp(11px, 14/820*100vw, 14px);}
    .footer .inner .infoWrap .info dl {justify-content: center;}
    .teaser .footer .inner .infoWrap .info dl{flex-direction: row; gap: 5px;}
    .footer .inner .bottom .sns {justify-content: center; padding-top: calc(40/32*1em); padding-bottom: calc(30/32*1em); border-bottom: 1px solid #333;}
    .footer .inner .bottom .copy {text-align: center; padding: calc(15/14*1em) 0; font-size: clamp(11px, 14/820*100vw, 14px);}
}
@media screen and (max-width: 460px) {
    .footer .inner .infoWrap .info dl {flex-direction: column; gap: 0px; text-align: center;}
    .teaser .footer .inner .infoWrap .info dl {flex-direction: column; gap: 0px;}
    .footer .inner .infoWrap .info dl + dl {padding-top: calc(10/14*1em);}
}

.topBtn.hide {opacity: 0; pointer-events: none;}
.topBtn {position: fixed; right: 5%; bottom: 5vh; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 16px; font-weight: 500; color: #fff; border-radius: 5px; cursor: pointer;}
.topBtn span {display: block; font-size: calc(24/16*1em); color: #f6ad3c;}
.topBtn b {display: block; font-size: 1em; color: #fff;}

@media screen and (max-width: 820px) {
    .topBtn {font-size: 14px;}
}

.footer .topBtn {opacity: 0; visibility: hidden; position: absolute; right: 5%; bottom: 110%;}
.footer .topBtn.hide {pointer-events: all;}



/* footer 개인정보처리방침 팝업 */
.privPop{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 99999;  transition: opacity .4s, visibility .4s; opacity: 0; visibility: hidden; line-height: 1.4; }
.privPop .eleBg{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); }
.privPop .inn{ width: 95%; max-width: 1280px; height: 60vh; margin: 0 auto; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 15px; box-sizing: border-box; padding: 20px; }
.privPop .inn .cont{ width: 100%; height: 100%; position: relative; }
.privPop .inn .cont .close{ position: absolute; bottom: calc(100% + 40px); left: 50%; transform: translateX(-50%); z-index: 99999; cursor: pointer; color: #fff; font-size: 26px; }
.privPop .inn .cont .p{ height: 100%; line-height: 1.3; overflow: auto; }

.privPop.on {
    opacity: 1; visibility: visible;
}

.privacy{padding: 20px 10px;word-break: keep-all;}
.privacy .tit{
    display: flex;align-items: center;justify-items: center;
    flex-direction: column;
}
.privacy .tit h2{
    font-size: 30px;
    font-weight: 700;
}
.privacy .tit p{
    font-size: 18px;
    line-height: 1.3;
    padding-top: 20px;
}

.privacy .list > li{
    padding-top: 40px;
}
.privacy .list h4{
    font-size: 18px;
    font-weight: 700;
}

.privacy .list .depth1 > p{font-size: 18px;line-height: 1.3;padding-top: 10px;}
.privacy .list .depth2, .privacy .list .depth3, .privacy .list .depth4{padding-left: 20px;}

.privacy .list .depth2 li {font-size: 18px;line-height: 1.3;padding-top: 5px;}
.privacy .list .depth2 li p{font-size: 18px;line-height: 1.3;padding-top: 5px;}

.privacy .list .depth3.tbrow{padding-left: 0 !important;}
.privacy .list table{max-width: 500px;width: 100%;border-collapse: collapse;border-spacing: 0;border-top: 1px solid #000;margin-top: 10px;vertical-align: middle;text-align: center;}
.privacy .list table th, .privacy .list .depth3 table td{border: 1px solid #000;padding: 10px;}
.privacy .list table th{background-color: #f0f0f0;}
.privacy .list table td{background-color: #fff;}
.privacy .list table td:first-child{background-color: #f0f0f0;}
.privacy .list table td:first-child{background-color: #f0f0f0;}


.privacy .lastTxt {padding-top: 20px;}
.privacy .lastTxt h4{font-size: 18px;font-weight: 700;}
.privacy .lastTxt p{font-size: 18px;line-height: 1.3;padding-top: 10px;}

@media screen and (max-width: 1024px) {
    .privacy .tit h2{font-size: 26px;}
}
@media screen and (max-width: 820px) {
    .privacy .tit p {font-size: 16px;}
    .privacy .list h4 {font-size: 16px;}
    .privacy .list .depth1 > p {font-size: 16px;}
    .privacy .list .depth2 li p {font-size: 16px;}
    .privacy .list .depth2 li {font-size: 16px;}
    .privacy .lastTxt h4{font-size: 16px;}
    .privacy .lastTxt p{font-size: 16px;}

    .privacy .list .depth2, .privacy .list .depth3, .privacy .list .depth4{padding-left: 10px;}
}
@media screen and (max-width: 500px) {}
@media screen and (max-width: 360px) {}

@media screen and (max-width: 450px){
    .privPop .inn .cont .p h1{ font-size: 16px; }
    .privPop{font-size: 14px;}
    .inn{ padding-right: 0; }
}