@font-face {
    font-family: 'NotoSansBold';
    src: url('./font/NotoSansKR-Bold.otf');
}
@font-face {
    font-family: 'NotoSansRegular';
    src: url('./font/NotoSansKR-Regular.otf');
}

/* 수정해야해 */
.spec-btn {
    /* display: none !important; */
}

:root {
    --c-000: #000;
    --c-fff: #fff;
    --NotoBold: 'NotoSansBold';
    --NotoReg: 'NotoSansRegular';
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

ol,
ul {
    list-style: none;
}

img {
    width: 100%;
}

.pc {
    display: block;
}
.mo {
    display: none;
}

body {
    /* background: var(--c-fff); */
    overflow-x: hidden;
}
body.h {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

.cont-bottom {
    width: 1000px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#wrap {
    width: 2000px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.inner {
    width: 100%;
}

/* .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid red;

} */
.test-btn {
    background: none;
    border: none;
    font-size: 60px;
    margin-top: 40px;
    display: block;
}

.section {
    width: 100%;
    background: var(--c-fff);
    position: relative;
    overflow-x: hidden;
}

.section .swiper {
    width: 100%;
}

.section .title img {
    /* width: auto;
    height: 75%;
    opacity: 0;
    display: none;
    transform: translateY(50%); */
}

/* .section .title img.active {
    display: block;
    animation: imgShow 0.5s ease-out forwards;
} */

@keyframes imgShow {
    0% {
        opacity: 0;
        transform: translateY(20%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}
.section .contents-wrap {
    /* padding-top: 60px; */
    /* padding-left: 120px; */
}
.section.section1 .cont-top {
    position: relative;
}

.section.section1 .video-wrap {
    position: absolute;
    position: absolute;
    top: 700px;
    left: 550px;
    width: 900px;
    height: 507px;
    z-index: 200;
}

.section.section1 .video-wrap video {
    width: 100%;
    height: 100%;
}

.section .swiper {
    width: 100%;
}
.section .swiper .swiper-wrapper {
    height: auto;
    padding-bottom: 20px;
}
.section .swiper .swiper-button-prev::after,
.section .swiper .swiper-button-next::after {
    display: none;
}
.section .swiper .swiper-button-next {
    background: url('./img/common/next-btn_2.png') no-repeat center/cover;
    right: 73px;
    top: 223px;
}
.section .swiper .swiper-button-prev {
    background: url('./img/common/prev-btn_2.png') no-repeat center/cover;
    left: 223px;
    top: 223px;
}
.section .swiper-pagination-bullet-active {
    background: #000;
}

.section .swiper .swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    text-align: right;
    padding-right: 100px;
}

.section.section3 .swiper .swiper-button-next {
    top: 180px;
}
.section.section3 .swiper .swiper-button-prev {
    top: 180px;
}

.view-wrap {
    width: 100%;
    text-align: right;
}

.view-wrap img {
    pointer-events: none;
}
#main {
    overflow: hidden;
}

#main .bg {
    clip-path: polygon(51.2% 14.1%, 58.4% 14.1%, 47% 93%, 39.8% 93%);
    background: #ff015b;
}
#main .inside {
    width: 100%;
    /* clip-path: polygon(66.3% 14.4%, 72.5% 14.4%, 57.3% 92.7%, 51.1% 92.7%); */

    clip-path: polygon(54.5% 14.4%, 54.5% 14.4%, 43.3% 92.7%, 43.3% 92.7%);
}

#main .polygon {
    width: 22%;
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%) scale(100);
    pointer-events: none;
}

#main .logo {
    width: 188px;
    position: absolute;
    bottom: 56px;
    right: 500px;
    opacity: 0;
}

#wrap.active #main .bg {
    animation: boxMove 1s 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}
#wrap.active #main .inside {
    animation: box 0.5s 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) forwards, boxMove2 1s 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}
#wrap.active #main .polygon {
    animation: lineAni 0.3s 2s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}
#wrap.active #main .logo {
    animation: show 1s 2.5s forwards;
}
#wrap.active .quick-nav-wrap {
    animation: show 1s 3s forwards;
}

@keyframes box {
    0% {
        clip-path: polygon(54.5% 14.4%, 54.5% 14.4%, 43.3% 92.7%, 43.3% 92.7%);
    }
    100% {
        clip-path: polygon(51.5% 14.4%, 58.1% 14.4%, 46.8% 92.7%, 40.1% 92.7%);
    }
}
@keyframes show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes lineAni {
    0% {
        transform: translate(-50%, -50%) scale(100);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes boxMove {
    0% {
        clip-path: polygon(51.2% 14.1%, 58.4% 14.1%, 47% 93%, 39.8% 93%);
    }
    50% {
        clip-path: polygon(0% 9.5%, 100% 9.5%, 100% 90.3%, 0% 90.3%);
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}
@keyframes boxMove2 {
    0% {
        clip-path: polygon(51.5% 14.4%, 58.1% 14.4%, 46.8% 92.7%, 40.1% 92.7%);
    }
    50% {
        clip-path: polygon(0% 9.5%, 100% 9.5%, 100% 90.3%, 0% 90.3%);
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}
/* quick nav */
.quick-nav-wrap {
    height: 0;
    position: sticky;
    top: -164px;
    left: 80px;
    padding-left: 25.5%;
    z-index: 100;
    opacity: 0;
}

.quick-nav-wrap .nav-list {
    display: flex;
    transform: rotate(90deg) translateY(-50%);
    transform-origin: left center;
    /* margin-top: -5px; */
}

.quick-nav-wrap .name {
    display: inline-block;
    font-family: var(--NotoReg);
    font-size: 20px;
    color: #fff;
    padding-top: 75px;
    padding-left: 2px;
    transition: color 0.5s;
}

.quick-nav-wrap li {
    font-family: var(--NotoReg);
    font-size: 18px;
    color: #fff;
    margin-right: 2.5%;
    transition: color 0.5s;
    cursor: pointer;
    position: relative;
}
.quick-nav-wrap li::after {
    content: '';
    display: block;
    width: 1px;
    height: 45%;
    background: #fff;
    right: -13%;
    top: 50%;
    transform: translateY(-35%);
    position: absolute;
    transform-origin: center;
}

.quick-nav-wrap li:last-of-type::after {
    content: none;
}
.quick-nav-wrap.active li::after {
    background: var(--c-000);
}

.quick-nav-wrap li span {
    pointer-events: none;
    font-family: var(--NotoBold);
}

.quick-nav-wrap.active li {
    color: #999;
    /* filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, 0.3)); */
}
.quick-nav-wrap.active li.active {
    color: var(--c-000);
    /* filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, 0.3)); */
}
.quick-nav-wrap.active .name {
    color: var(--c-000);
}

/* section1 */
.section.section1 {
    /* padding-left: 120px; */
}
.section.section1 .title {
}

/* section2 */
.section.section2 {
    /* padding-left: 120px; */
}

/* section3 */
.section.section3 {
    /* padding-left: 120px; */
}
.section.section3 .contents-wrap {
}
.section.section3 .cont-bottom1 {
    margin-bottom: 40px;
}

/* section4 */
.section.section4 {
    /* padding-left: 120px; */
}

.section.section4 .cont-top {
    position: relative;
}
.section.section4 .spec-btn {
    width: 201px;
    height: 52px;
    position: absolute;
    top: 1428px;
    left: 50%;
    transform: translateX(-50%);
}

.section.section4 .btn-wrap {
    width: 41%;
    height: 79px;
    position: absolute;
    top: 1568px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0;
    text-align: center;
}

.section.section4 .btn-wrap button {
    height: 100%;
    width: 50%;
    /* border: 1px solid blue; */
}

.section.section4 .btn-wrap button:first-of-type {
    /* margin-right: 30px; */
}

/* footer */
.footer {
    /* padding: 40px 0 40px; */
    margin: 40px auto;
    /* padding-left: 100px; */
}

.footer .bg {
    width: 100%;
    position: relative;
}

.footer .footnote-wrap {
    width: 1000px;
    padding: 20px 100px 20px 100px;
    margin: 0 auto;
}
.footer .footnote-wrap h3 {
    font-size: 18px;
    font-family: var(--NotoBold);
    margin-bottom: 20px;
}
.footer .footnote-wrap h3 span {
    font-size: 14px;
    color: #999;
    font-family: var(--NotoReg);
}
.footer .footnote-wrap button {
    font-family: var(--NotoReg);

    font-size: 15px;
    color: #666;
    padding: 3px 0;
}
.footer .footnote-wrap button:not(:last-of-type) {
    margin-right: 5px;
}

.popup-wrap {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-wrap .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
}

.popup-wrap .contents-wrap {
    width: 870px;
    height: 800px;
    /* border: 1px solid red; */
    /* background: #fff; */
    overflow-y: auto;
}

.title-wrap {
    width: 1000px;
    position: absolute;
    top: 1%;
    left: 50%;
    transform: translateX(-50%);
}

.title-wrap > div {
    position: absolute;
    top: 0;
    left: 21%;
    overflow: hidden;
}
.title-wrap > div.title {
    top: 80px;
}
.title-wrap > div.img {
    left: auto;
    right: 7%;
}
.title-wrap > div.title img {
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 0.5s ease-in-out, opacity 0.5s 0.3s ease-out;
}
.title-wrap > div.img img {
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.5s 0.2s ease-in-out, opacity 0.5s 0.6s ease-out;
}

.section.active .title-wrap > div.title img,
.section.active .title-wrap > div.img img {
    transform: translateX(0);
    opacity: 1;
}
/* .footer .bg::before,
.footer .bg::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: var(--c-000);
    position: absolute;
    right: 0;
} */
/* .footer .bg::before {
    top: -40px;
}
.footer .bg::after {
    bottom: -40px;
} */

/* 박스 위치 */
.box {
    width: 100%;
    position: absolute;
}
/* 보러가기 버튼 */
.view-btn {
    position: absolute;
    bottom: 0;
    width: 285px;
    height: 60px;
}

/* section1 box */
.section1 .box0 {
    height: 680px;
    top: 1360px;
}

.section1 .box1 {
    height: 520px;
    top: 2070px;
}

.section1 .box2 {
    height: 714px;
    top: 2645px;
}

.section1 .box3 {
    height: 517px;
    top: 3398px;
}
.section1 .box4 {
    height: 737px;
    top: 3970px;
}
.section1 .box5 {
    height: 525px;
    top: 4738px;
}

.section1 .box0 .view-btn,
.section1 .box2 .view-btn,
.section1 .box4 .view-btn {
    left: 635px;
}
.section1 .box1 .view-btn,
.section1 .box3 .view-btn,
.section1 .box5 .view-btn {
    left: 518px;
}

/* section2 box */
.section2 .box0 {
    height: 359px;
    top: 684px;
}
.section2 .box1 {
    height: 603px;
    top: 1073px;
}
.section2 .box2 {
    height: 348px;
    top: 1715px;
}
.section2 .box3 {
    height: 597px;
    top: 2106px;
}
.section2 .box4 {
    height: 341px;
    top: 2750px;
}
.section2 .box5 {
    height: 603px;
    top: 3131px;
}
.section2 .box0 .view-btn,
.section2 .box1 .view-btn,
.section2 .box3 .view-btn,
.section2 .box5 .view-btn {
    left: 650px;
}

.section2 .box2 .view-btn {
    left: 526px;
}
.section2 .box4 .view-btn {
    left: 504px;
}

/* section3 box */
.section3 .box0 {
    height: 563px;
    top: 761px;
}
.section3 .box1 {
    height: 599px;
    top: 1356px;
}
.section3 .box2 {
    height: 576px;
    top: 2126px;
}
.section3 .box3 {
    height: 638px;
    top: 2725px;
}

.section3 .box .view-btn {
    left: 605px;
}

@media screen and (max-width: 1020px) {
    .pc {
        display: none;
    }

    .mo {
        display: block;
    }
    body {
        width: 100%;
    }

    .cont-bottom {
        /* padding-left: 13vw; */
        padding-left: 0;
    }
    #wrap {
        width: 100%;
    }

    #main .bg {
        clip-path: polygon(59.7% 20.1%, 76.9% 20.1%, 41.9% 79.3%, 24.3% 79.3%);
    }

    #main .inside {
        /* clip-path: polygon(63.5% 14.4%, 83.5% 14.4%, 34.3% 84.7%, 13.3% 84.7%); */
        clip-path: polygon(68.5% 20.4%, 68.5% 20.4%, 34.3% 78.7%, 34.3% 78.7%);
    }

    #main .polygon {
        /* width: auto;
        height: 80%;
        top: 5%;
        left: 10%; */
        width: auto;
        height: 89.5%;
        top: 5%;
        left: 11.1%;
        transform: scale(100);
    }
    #main .polygon img {
        height: 100%;
    }

    #wrap.active #main .bg {
        animation: boxMove 1s 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
    }
    #wrap.active #main .inside {
        animation: box 0.5s 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) forwards, boxMove2 1s 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
    }

    @keyframes lineAni {
        0% {
            transform: scale(100);
        }
        100% {
            transform: scale(0.66);
        }
    }
    @keyframes box {
        0% {
            clip-path: polygon(68.5% 20.4%, 68.5% 20.4%, 34.3% 78.7%, 34.3% 78.7%);
        }
        100% {
            clip-path: polygon(60.5% 20.4%, 76.5% 20.4%, 41.3% 78.7%, 25.3% 78.7%);
        }
    }
    @keyframes boxMove {
        0% {
            clip-path: polygon(59.7% 20.1%, 76.9% 20.1%, 41.9% 79.3%, 24.3% 79.3%);
        }
        50% {
            clip-path: polygon(0% 14.1%, 100% 14.1%, 100% 85.3%, 0% 85.3%);
        }
        100% {
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        }
    }
    @keyframes boxMove2 {
        0% {
            clip-path: polygon(62.8% 14.3%, 83.2% 14.3%, 33.4% 85.3%, 11.8% 85.3%);
        }
        50% {
            clip-path: polygon(0% 14.3%, 100% 14.3%, 100% 85.3%, 0% 85.3%);
        }
        100% {
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        }
    }

    #main .logo {
        width: 40%;
        bottom: 10%;
        right: 5%;
    }

    .section .swiper .swiper-button-next {
        top: 37vw;
        /* top: auto; */
        /* bottom: 0; */
        right: 0;
        width: 7vw;
        height: 11vw;
    }
    .section .swiper .swiper-button-prev {
        top: 37vw;
        /* top: auto; */
        /* bottom: 0; */
        left: 19%;
        width: 7vw;
        height: 11vw;
    }
    .section.section3 .swiper .swiper-button-prev {
        top: 38vw;
        /* top: auto; */
        /* bottom: 0; */
        width: 7vw;
        height: 11vw;
    }
    .section.section3 .swiper .swiper-button-next {
        top: 38vw;
        /* top: auto; */
        /* bottom: 0; */
        width: 7vw;
        height: 11vw;
    }
    .section {
        width: 100%;
    }

    .section .title {
        height: auto;
        /* padding-left: 12vw; */
    }
    .section.section1 .video-wrap {
        top: 15%;
        left: 10vw;
        width: 87.3%;
        height: 6.4%;
    }

    .section.section1 .video-wrap video {
        width: 100%;
        height: 100%;
    }

    .section .swiper {
        width: 100%;
    }

    .section .swiper-horizontal > .swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        left: calc(50% + 6vw);
        bottom: 3.4%;
        transform: translateX(-50%);
        padding-right: 0;
        text-align: center;
    }

    .section .title img {
        width: 100%;
        height: auto;
    }

    .section .contents-wrap {
    }

    .section .swiper {
        width: 100%;
        padding-bottom: 5%;
    }

    .section.section4 .spec-btn {
        width: 33.6%;
        height: 2.5%;
        top: 56.2%;
        left: calc(50% + 3vw);
    }

    .section.section4 .btn-wrap {
        /* height: 6.8%;
        top: 55.3%; */
        height: 7.8%;
        top: 62.5%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        left: calc(50% + 3.6vw);
        width: 76%;
        transform: translateX(-50%);
    }

    .section.section4 .btn-wrap button {
        display: block;
        /* width: 68.8vw;
        height: 12.7vw; */
        width: 100%;
        height: 49%;
    }

    .section.section4 .btn-wrap button:first-of-type {
        margin-right: 0;
        /* margin-bottom: 5%; */
    }

    .view-wrap {
        /* padding: 5vw 0; */
        /* padding-right: 5%; */
    }
    /* quick nav */
    .quick-nav-wrap {
        /* width: 100vh; */
        top: -33.5vw;
        padding-left: 2vw;
    }

    .quick-nav-wrap .name {
        font-size: 3.8vw;
        padding-top: 16vw;
        padding-left: 0;
    }

    .quick-nav-wrap li {
        font-size: 3vw;
        margin-right: 6vw;
        white-space: nowrap;
    }

    .quick-nav-wrap li span {
        font-family: var(--NotoBold);
    }
    /* 
    .quick-nav-wrap.active li {
        color: var(--c-000);
    }
    .quick-nav-wrap.active .name {
        color: var(--c-000);
    } */

    .quick-nav-wrap li::after {
        right: -3vw;
    }

    /* section1 */
    .section.section1 {
        /* padding-left: 13vw; */
    }
    .section.section1 .title {
    }

    /* section2 */
    .section.section2 {
        /* padding-left: 13vw; */
    }

    /* section3 */
    .section.section3 {
        /* padding-left: 13vw; */
    }
    .section.section3 .contents-wrap {
        /* background: url(./img/common/pc/diagonal.png) no-repeat top center/100% 48vw; */
    }
    /* section4 */
    .section.section4 {
        /* padding-left: 13vw; */
    }

    /* footer */
    .footer {
        padding-left: 0;
        margin: 0;
        /* margin: 40px auto; */
        /* padding: 13vw 0vw 5vw 13vw; */
    }

    .footer .bg {
        width: 100%;
        position: relative;
        /* padding-right: 5%; */
    }
    .footer .footnote-wrap h3 {
        font-size: 2vw;
        margin-bottom: 1vw;
    }
    .footer .footnote-wrap h3 span {
        font-size: 2vw;
    }

    .footer .footnote-wrap {
        width: 100%;
        padding: 5vw 0 5vw 12.1vw;
    }
    .footer .footnote-wrap button {
        font-size: 2.4vw;
        padding: 1px 0;
    }
    /* 
    .footer .bg::before,
    .footer .bg::after {
        content: '';
        display: block;
        width: 100%;
        height: 2px;
        background: var(--c-000);
        position: absolute;
        right: 0;
    } */
    /* .footer .bg::before {
        top: -40px;
    }
    .footer .bg::after {
        bottom: -40px;
    } */

    .popup-wrap .contents-wrap {
        width: 90%;
        height: 80%;
        /* border: 1px solid red; */
        /* background: #fff; */
        overflow-y: auto;
    }

    .popup-wrap .close-btn {
        width: 20px;
    }
    .title-wrap {
        width: 90%;
        left: auto;
        right: 0;
        transform: none;
    }
    .title-wrap > div.title {
        top: 0;
        left: 0;
        width: 50%;
    }
    .title-wrap > div.title img {
    }
    .title-wrap > div.img {
        right: 0;
        left: auto;
        width: 90%;
    }

    .view-btn {
        width: 43%;
        height: 8vw;
    }
    /* section1 box */
    .section1 .box0 {
        height: 13.2%;
        top: 24.7%;
    }

    .section1 .box1 {
        height: 9.2%;
        top: 38.6%;
    }

    .section1 .box2 {
        height: 13.1%;
        top: 48.7%;
    }

    .section1 .box3 {
        height: 9.1%;
        top: 62.7%;
    }
    .section1 .box4 {
        height: 13.3%;
        top: 72.8%;
    }
    .section1 .box5 {
        height: 9.8%;
        top: 86.8%;
    }

    .section1 .box0 .view-btn,
    .section1 .box2 .view-btn,
    .section1 .box4 .view-btn {
        left: auto;
        right: 0;
    }
    .section1 .box1 .view-btn,
    .section1 .box3 .view-btn,
    .section1 .box5 .view-btn {
        left: auto;
        right: 0;
    }

    /* section2 box */
    .section2 .box0 {
        height: 9.8%;
        top: 18%;
    }
    .section2 .box1 {
        height: 16.8%;
        top: 28.8%;
    }
    .section2 .box2 {
        height: 7.8%;
        top: 46.6%;
    }
    .section2 .box3 {
        height: 16.3%;
        top: 55.3%;
    }
    .section2 .box4 {
        height: 9.2%;
        top: 72.7%;
    }
    .section2 .box5 {
        height: 14.3%;
        top: 81.4%;
    }
    .section2 .box0 .view-btn,
    .section2 .box1 .view-btn,
    .section2 .box3 .view-btn,
    .section2 .box5 .view-btn {
        left: auto;
        right: 0;
    }

    .section2 .box2 .view-btn {
        left: auto;
        right: 0;
    }
    .section2 .box4 .view-btn {
        left: auto;
        right: 0;
    }

    /* section3 box */
    .section3 .box0 {
        height: 15.6%;
        top: 24.3%;
    }
    .section3 .box1 {
        height: 16.4%;
        top: 41.3%;
    }
    .section3 .box2 {
        height: 15.6%;
        top: 62.2%;
    }
    .section3 .box3 {
        height: 17.3%;
        top: 79.1%;
    }

    .section3 .box .view-btn {
        left: auto;
        right: 0;
    }
}