.wrap{ width: 95%; margin: 0 auto; }
.wrap[max="1620"]{ max-width: 1620px; }
.wrap[max="1600"]{ max-width: 1600px; }
.wrap[max="1440"]{ max-width: 1440px; }
.wrap[max="1200"]{ max-width: 1200px; }

@media screen and (max-width: 820px){
    .wrap{ width: 90%; }
}

/* intro */
._intro{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; box-sizing: border-box; z-index: 991; transition-duration: 1s; overflow: hidden; display: none; }
._intro.hide{ transform: translateY(-100%); opacity: 0; pointer-events: none; }
._intro .loading{ width: 100%; height: 100%; left: 0; top: 0; position: absolute; background-color: #000; z-index: 992; display: flex; align-items: center; justify-content: center; flex-direction: column; }
._intro .loading .logo{ width: 100px; filter: invert(1); margin-top: 20px; }
._intro .loading .number_wrapper{ text-align: center;font-size: 50px; font-weight: 700; color: #444; display: flex; align-items: baseline; letter-spacing: -0.025em; }
._intro .loading .loadbar{ width: 90%; max-width: 300px; margin: 0 auto; position: relative; margin-top: 20px; background-color: #333; height: 6px; border-radius: 10px; overflow: hidden; }
._intro .loading .loadbar span{ display: block; width: 0%; background-color: rgba(255,255,255,0.4); height: 100%; }

._intro .vid{ width: 100%; height: 100dvh; position: relative; background-color: #000; }
/* ._intro .vid iframe{ width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; } */
._intro .vid iframe{ position: absolute; top: 0; left: 0; width: 100%; object-fit: cover; }
._intro .vid #intromob{ display: none; }

@media screen and (max-width: 820px){
    ._intro{ height: 100dvh; min-height: 100vh; }
    ._intro .vid #intromob{ display: block; }
    ._intro .vid #intros{ display: none; }
}

@media screen and (max-width: 820px){
    ._intro{ height: 110vh; }
    ._intro .loading .logo{ width: 80px; }
}



/* header */
.header{ width: 100%; position: fixed; top: 0; left: 0; z-index: 990; opacity: 0; }
.header .wrap{ display: flex; justify-content: space-between; }
.header .logo{ display: flex; box-sizing: border-box; align-items: center; justify-content: center; padding: 40px 0; width: 100px; transition-duration: 0.2s; }

body.on header{ opacity: 1; }
body.on .centerbar{ opacity: 1; }

.header .hamWrap{ width: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.header .hamWrap .hambtn{ width: 100%; height: 26px; position: relative; }
.header .hamWrap .hambtn span{ width: 100%; height: 2px; background-color: #fff; position: absolute; left: 0; transition-duration: 0.4s; transform-origin: 50% 50%; display: block; }
.header .hamWrap .hambtn span:nth-of-type(1){ top: 0; }
.header .hamWrap .hambtn span:nth-of-type(2){ top: 50%; width: 50%; }
.header .hamWrap .hambtn span:nth-of-type(3){ top: 100%; }


@media screen and (min-width: 821px){
    .header .hamWrap:hover .hambtn span:nth-of-type(1){ width: 50%; }
    .header .hamWrap:hover .hambtn span:nth-of-type(2){ width: 100%; }
    .header .hamWrap:hover .hambtn span:nth-of-type(3){ width: 50%; }
}

.centerbar{ position: fixed; left: 50%; top: 35px; transform: translateX(-50%); color: #fff; z-index: 990; opacity: 0; }
.centerbar .inn{ display: flex; justify-content: center; align-items: center; border: 1px solid #fff; padding: 10px; border-radius: 22px; }
.centerbar .circ{ width: 20px; height: 20px; border: 6px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.centerbar p{ margin: 0 22px; box-sizing: border-box; font-size: 17px; letter-spacing: -0.04em; font-family: 'Mona Sans', sans-serif; overflow: hidden; text-align: center; white-space: nowrap; }

.centerbar.mix{ mix-blend-mode: difference; }
.header.mix{ mix-blend-mode: difference; }
.header.mix .logo{ filter: invert(1); }

.header.ham .hamWrap .hambtn span:nth-of-type(1){ top: 50%; width: 100%; transform: translateX(0%) rotate(-135deg); }
.header.ham .hamWrap .hambtn span:nth-of-type(2){ width: 0; transform: translateX(-100%); }
.header.ham .hamWrap .hambtn span:nth-of-type(3){ top: 50%; width: 100%; transform: translateX(0%) rotate(135deg); }

.header.ham ~ .centerbar ~ .total{ opacity: 1; transform: translateY(0); }

@media screen and (max-width: 1280px){
    .header .logo{ padding: 20px 0; }
    .centerbar{ padding: 7px; top: 11px; }
    .centerbar p{ font-size: 14px; }
    .header .hamWrap{ width: 30px; }
    .header .hamWrap .hambtn{ height: 18px; }
}

@media screen and (max-width: 820px){
    .header .logo{ padding: 15px 0; width: 85px; }
    .centerbar{ top: 6px; }
    .centerbar p{ font-size: 12px; margin: 0 10px; }
    .centerbar .circ{ width: 15px; height: 15px; border-width: 4px; }
}

@media screen and (max-width: 500px){
    .centerbar{ display: none; }
    .header .logo{ width: 75px; padding: 10px 0; }

    .header .hamWrap{ width: 22px; }
    .header .hamWrap .hambtn{ height: 14px; }
}



/* footer */
.footer{ width: 100%; padding: 35px 0; box-sizing: border-box; background-color: #000; color: #fff; overflow: hidden; margin-top: -1px; }
.footer .workarea{ display: flex; justify-content: space-between; align-items: center; }
.footer .workarea > strong{ display: block; font-size: 75px; letter-spacing: -0.04em; font-weight: 600; font-family: 'Mona Sans', sans-serif; }
.mainarrow{ width: 260px; display: block; }
.mainarrow svg > g{ animation: opacity 1.8s linear infinite; }
.mainarrow svg > g:nth-of-type(2){ animation-delay: 0.05s; }
.mainarrow svg > g:nth-of-type(3){ animation-delay: 0.1s; }
.mainarrow svg > g:nth-of-type(4){ animation-delay: 0.15s; }
.mainarrow svg > g:nth-of-type(5){ animation-delay: 0.2s; }
.mainarrow svg > g:nth-of-type(6){ animation-delay: 0.25s; }
.mainarrow svg > g:nth-of-type(7){ animation-delay: 0.3s; }
.mainarrow svg > g:nth-of-type(8){ animation-delay: 0.35s; }
.mainarrow svg > g:nth-of-type(9){ animation-delay: 0.4s; }
.mainarrow svg > g:nth-of-type(10){ animation-delay: 0.45s; }
.mainarrow svg > g:nth-of-type(11){ animation-delay: 0.5s; }
.mainarrow svg > g:nth-of-type(12){ animation-delay: 0.55s; }
.mainarrow svg > g:nth-of-type(13){ animation-delay: 0.6s; }
.mainarrow svg > g:nth-of-type(14){ animation-delay: 0.65s; }
.mainarrow svg > g:nth-of-type(15){ animation-delay: 0.7s; }
.mainarrow svg > g:nth-of-type(16){ animation-delay: 0.75s; }
.mainarrow svg > g:nth-of-type(17){ animation-delay: 0.8s; }
.mainarrow svg > g:nth-of-type(18){ animation-delay: 0.85s; }

@keyframes opacity {
    0%, 100% {
        opacity: 0.2;
    }
    50% {
        opacity: 1;
    }
}

.footer nav{ display: flex; justify-content: flex-start; width: 100%; }
.footer nav .sitemap{ width: 100%; display: flex; border-bottom: 1px solid rgba(255,255,255,0.11); }
.footer nav .sitemap li > a{ display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px 50px; box-sizing: border-box; font-size: 24px; font-weight: 500; letter-spacing: -0.04em; font-family: 'Mona Sans', sans-serif; }
.footer nav .sitemap li:first-of-type > a{ padding-left: 0; }
.footer .botbx{ margin-top: 35px; }
.footer .botbx .info{ display: flex; }
.footer .botbx .info li{ margin-right: 155px; font-size: 17px; letter-spacing: -0.04em; font-weight: 300; line-height: 1.5; font-family: 'Mona Sans', 'Pretendard'; }
.footer .botbx .info li dl dt{ color: #7e7e7e; }
.footer .botbx .info li dl dd{ margin-top: 4px; }
.footer .botbx .info li:last-of-type{ margin-right: 0; }

.footer .botbx .sns{ display: flex; justify-content: flex-end; }
.footer .botbx .sns li{ margin-left: 10px; }
.footer .botbx .sns li > a{ width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #2c2c2c; color: #979797; font-size: 18px; }
.footer .botbx .copy{ font-size: 14px; letter-spacing: -0.05em; color: #6c6c6c; text-align: right; margin-top: 13px; }



@media screen and (max-width: 1440px){
    .footer .botbx .sns{ margin-top: 15px; }
}

@media screen and (max-width: 1280px){
    .footer .workarea > strong{ font-size: 50px; }
    .footer nav .sitemap li > a{ padding: 15px 30px; font-size: 20px; }
    .footer .botbx .info li{ font-size: 15px; margin-right: 70px; }
    .mainarrow{ width: 200px; }
}

@media screen and (max-width: 820px){
    .footer .workarea > strong{ font-size: 35px; }
    .footer nav .sitemap li > a{ padding: 10px 15px; font-size: 16px; }
    .footer .botbx{ margin-top: 20px; }
    .footer .botbx .info li{ font-size: 14px; margin-right: 20px; }
    .mainarrow{ width: 120px; }
}

@media screen and (max-width: 500px){
    .footer .workarea > strong{ font-size: 26px; }
    .footer nav{ margin-top: 10px; }
    .footer nav .sitemap li > a{ padding: 10px 5px; font-size: 14px; }
    .footer .botbx .info{ display: block; }
    .footer .botbx .info li{ margin-right: 0; margin-bottom: 20px; }
    .footer .botbx .info li dl dd{ margin-top: 0; }
    .footer .botbx .info li:last-of-type{ margin-bottom: 0; }
    .footer .botbx .sns li > a{ width: 33px; height: 33px; font-size: 16px; }
    .footer .botbx .copy{ font-size: 12px; }
    .mainarrow{ width: 70px; }
}


/* total menu */
.total{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; box-sizing: border-box; background-color: #000; z-index: 989; color: #fff; transition-duration: 0.6s; opacity: 0; transform: translateY(-100%); }
.total .wrap{ min-height: 100%; box-sizing: border-box; padding: 120px 5%; display: flex; justify-content: space-between; }
.total .wrap nav{ width: 42%; }
.total .wrap nav .menu{ height: 100%; display: flex; justify-content: space-between; flex-direction: column; align-items: flex-start; }
.total .wrap nav .menu li{ display: flex; align-items: center; }
.total .wrap nav .menu li > a{ display: flex; align-items: flex-end; font-size: 7vw; font-weight: 500; font-family: 'Mona Sans', sans-serif; }
.total .wrap nav .menu li > a em{ display: block; width: 20px; height: 20px; display: flex; border-radius: 50%; border: 6px solid #fff; box-sizing: border-box; margin-bottom: 0.1em; margin-left: 0.1em; transform: translateX(-20px); opacity: 0; transition-duration: 0.2s; }

.total .wrap .infos{ width: 58%; }
.total .wrap .infos .list{ height: 100%; display: flex; justify-content: space-between; }
.total .wrap .infos .list li{ position: relative; font-size: 18px; letter-spacing: -0.04em; line-height: 1.4; display: flex; flex-direction: column; justify-content: flex-end; }
.total .wrap .infos .list li:last-of-type{ margin-bottom: 0; }
.total .wrap .infos .list li dl{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.total .wrap .infos .list li dl dt{ color: rgba(255,255,255,0.4); }
.total .wrap .infos .list li dl dd{ position: relative; cursor: pointer; }
.total .wrap .infos .list li dl dd:first-of-type{ margin-top: 10px; }
.total .wrap .infos .list li dl dd em{ display: block; position: absolute; left: 0; top: 100%; height: 1px; width: 100%; background-color: #fff; transform: scaleX(0); transition-duration: 0.4s; transform-origin: 0 0; }
.total .wrap .infos .list li dl dd:nth-of-type(2) em{ transition-delay: 0.2s; }
.total .wrap .infos .list li dl dd:nth-of-type(3) em{ transition-delay: 0.4s; }

@media screen and (min-width: 821px){
    .total .wrap nav .menu li > a:hover em{ transform: translateX(0); opacity: 1; }
    .total .wrap .infos .list li dl:hover dd em{ transform: scaleX(1); }
}

@media screen and (max-width: 1440px){
    .total .wrap{ padding: 120px 1%; }
    .total .wrap nav{ width: 35%; }
    .total .wrap .infos{ width: 65%; }
}

@media screen and (max-width: 1280px){
    .total .wrap nav{ width: 50%; }
    .total .wrap .infos{ width: 50%; }
    .total .wrap .infos .list{ flex-direction: column; justify-content: flex-end; }
    .total .wrap .infos .list li{ margin-bottom: 30px; }
}

@media screen and (max-width: 820px){
    .total{ overflow: auto; }
    .total .wrap{ flex-direction: column; justify-content: space-between; padding: 80px 0; }
    .total .wrap nav{ width: 100%; }
    .total .wrap nav .menu li > a{ font-size: 11vw; padding: 0.2em 0; }
    .total .wrap .infos{ width: 100%; margin-top: 30px; }
    .total .wrap .infos .list li{ font-size: 16px; }
    .total .wrap .infos .list li dl dd:first-of-type{ margin-top: 5px; }
}

@media screen and (max-width: 500px){
    .total .wrap .infos .list li{ font-size: 14px; }
}



._s{ background-color: #000; color: #fff; }

.search{ width: 50%; max-width: 360px; display: flex; border: 1px solid #777777; box-sizing: border-box; border-radius: 25px; padding: 0 10px; margin-left: auto; align-items: center; }
.search input{ height: 50px; padding: 0 12px; box-sizing: border-box; background: none; border: none; font-size: 16px; letter-spacing: -0.04em; color: #fff; width: 100%; }
.search input::placeholder{ color: rgba(255,255,255,0.2); }
.search .sch{ width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; background-color: #fff; cursor: pointer; flex-shrink: 0; color: #000; }

@media screen and (max-width: 1280px){
    .search{ padding: 0 5px; }
    .search input{ height: 40px; }
}

@media screen and (max-width: 820px){
    .search{ width: 100%; margin-top: 20px; }
    .search input{ font-size: 14px; }
}


._s .morebtn{ display: flex; justify-content: center; margin-top: 105px; }
._s .morebtn > a{ display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #fff; box-sizing: border-box; position: relative; padding: 10px 0; }
._s .morebtn > a::after{ content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: -1px; left: 0; background-color: #1462d9; transition: transform .4s cubic-bezier(.45,.46,.05,.96); transform: scaleX(0); transform-origin: 100% 0; }
._s .morebtn > a span{ font-size: 30px; letter-spacing: -0.04em; font-weight: 500; font-family: 'Mona Sans', sans-serif; margin-right: 30px; }
._s .morebtn > a i{ font-size: 20px; }

._s .nomore{ text-align: center; margin-top: 105px; font-size: 20px; color: rgba(255,255,255,0.6); font-weight: 500; line-height: 1.4; }


@media screen and (min-width: 821px){
    ._s .morebtn > a:hover::after{ transform: scaleX(100%); transform-origin: 0 0; }
}

@media screen and (max-width: 1280px){
    ._s .morebtn{ margin-top: 50px; }
    ._s .morebtn > a span{ font-size: 20px; }
    ._s .morebtn > a i{ font-size: 16px; }
}

@media screen and (max-width: 820px){
    ._s .morebtn{ margin-top: 30px; }
    ._s .morebtn > a span{ font-size: 18px; }
    ._s .morebtn > a i{ font-size: 16px; }
    ._s .nomore{ margin-top: 30px; font-size: 16px; }
}


._s{ width: 100%; overflow: hidden; }
.subtop .txtwrap{ display: flex; align-items: flex-end; }
.subtop .txtwrap strong{ font-size: 120px; letter-spacing: -0.04em; font-weight: 800; font-family: 'Mona Sans', sans-serif; display: block; overflow: hidden; }
.subtop .txtwrap .dotwrap{ position: relative; width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box; border: 1px solid #fff; margin-left: 15px; margin-bottom: 10px; flex-shrink: 0; }
.subtop .txtwrap .dotwrap span{ width: calc(100% + 2px); height: calc(100% + 2px); border-radius: 50%; background-color: #1462d9; border: 1px solid #1462d9; box-sizing: border-box; position: absolute; left: 6px; top: 0; display: block; }

@media screen and (max-width: 1280px){
    .subtop .txtwrap strong{ font-size: 80px; }
}

@media screen and (max-width: 820px){
    .subtop .txtwrap strong{ font-size: 60px; }
}

@media screen and (max-width: 500px){
    .subtop .txtwrap strong{ font-size: 40px; }
}


/*footer 개인정보처리방침 팝업*/
.privPop{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 99999;  transition: opacity .4s, visibility .4s; opacity: 0; visibility: hidden; }
.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: 24px; }
.privPop .inn .cont .p{ height: 100%; line-height: 1.3; overflow: auto; font-size: 16px; letter-spacing: -0.04em; }
.privPop .inn .cont .p strong{ font-weight: 700; }
.privPop .inn .cont .p::-webkit-scrollbar{ width: 8px; }
.privPop .inn .cont .p::-webkit-scrollbar-thumb{ border-radius: 10px; background-color: #333; }

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

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