/* 인트로 */
.intro_wrap {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #353F49;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 100%, 100% 100%, 100% 0%);
    transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.logo_box {
    position: relative;
    width: 100%;
    max-width: 120px;
    height: 100%;
    max-height: 122px;
}

/* .logo_box>div::after { content: ''; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; z-index: 1; background-color: #2b3c49; transform: scale(100) rotate(360deg); } */
.logo_box>img:first-child {
    opacity: 0;
}

.intro_logo {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    opacity: 0;
}

.intro_logo.logo01 {
    transform: translateY(-2rem);
}

.intro_logo.logo02 {
    transform: translateX(2rem);
}

.intro_logo.logo03 {
    transform: translateX(-2rem);
}

.intro_logo.logo05 {
    transform: translateX(2rem);
}

.intro_logo.logo06 {
    transform: translateX(-2rem);
}

.intro_logo.logo07 {
    transform: translateY(2rem);
}

.intro_logo.logo08 {
    transform: translateX(2rem);
}

.logo_box span {
    position: absolute;
    z-index: 9;
    background-color: #fff;
}

.intro_line01 {
    width: 0%;
    height: 3px;
    right: 0;
    top: 0;
}

.intro_line02 {
    width: 0%;
    height: 3px;
    left: 0;
    bottom: 0;
}

.intro_line03 {
    width: 3px;
    height: 0%;
    right: 0;
    top: 0;
}

.intro_line04 {
    width: 3px;
    height: 0%;
    left: 0;
    bottom: 0;
}

.intro_wrap.intro .intro_logo.logo01 {
    opacity: 1;
    transform: translate(0);
    transition: 1.3s 0.0s;
}

.intro_wrap.intro .intro_logo.logo02 {
    opacity: 1;
    transform: translate(0);
    transition: 1.3s 0.60s;
}

.intro_wrap.intro .intro_logo.logo03 {
    opacity: 1;
    transform: translate(0);
    transition: 1.3s 0.30s;
}

.intro_wrap.intro .intro_logo.logo04 {
    opacity: 1;
    transform: translate(0);
    transition: 1.3s 1.05s;
}

.intro_wrap.intro .intro_logo.logo05 {
    opacity: 1;
    transform: translate(0);
    transition: 1.3s 1.35s;
}

.intro_wrap.intro .intro_logo.logo06 {
    opacity: 1;
    transform: translate(0);
    transition: 1.3s 0.15s;
}

.intro_wrap.intro .intro_logo.logo07 {
    opacity: 1;
    transform: translate(0);
    transition: 1.3s 0.75s;
}

.intro_wrap.intro .intro_logo.logo08 {
    opacity: 1;
    transform: translate(0);
    transition: 1.3s 0.90s;
}

.intro_wrap.intro .intro_line01 {
    width: 100%;
    transition: 1.3s 1.5s;
}

.intro_wrap.intro .intro_line02 {
    width: 100%;
    transition: 1.3s 1.5s;
}

.intro_wrap.intro .intro_line03 {
    height: 100%;
    transition: 1.3s 1.5s;
}

.intro_wrap.intro .intro_line04 {
    height: 100%;
    transition: 1.3s 1.5s;
}

.intro_wrap.intro_end1 {
    clip-path: polygon(0% 0%, 0% 100%, calc(50% - 65px) 100%, calc(50% - 65px) calc(50% - 65px), calc(50% + 65px) calc(50% - 65px), calc(50% + 65px) calc(50% + 65px), calc(50% - 65px) calc(50% + 65px), 25% 100%, 100% 100%, 100% 0%);
}

.intro_wrap.intro_end2 {
    clip-path: polygon(0% 0%, 0% 100%, calc(50% - 65px) 100%, calc(50% - 65px) 10%, calc(50% + 65px) 10%, calc(50% + 65px) 90%, calc(50% - 65px) 90%, 25% 100%, 100% 100%, 100% 0%);
}

.intro_wrap.intro_end3 {
    clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%, 100% 100%, 100% 0%);
}

.main_wrap {
    position: relative;
    height: 100%;
    /* overflow: hidden; */

}


.pc-only {
    display: block;
}

.m-only {
    display: none;
}

.main_container {
    width: 100%;
    height: 100vh;
    transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    position: fixed;
    z-index: 2;
    overflow: hidden;
    top: 0;
}

.nav-open .main_container {
    transform: translateX(462px) scale(var(--navScale));
    border-bottom-left-radius: 40px;
    border-top-left-radius: 40px;
    height: 80vh;
    top: 182px;
}

.scroll_wrap {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.nav-open .scroll_wrap {
    overflow-y: scroll;
}

@media screen and (max-height: 990px) {
    .nav-open .main_container {
        height: 65vh;
    }
}

section {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    z-index: 90;
}

section .main_bg {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    transition: all 1s;
    display: flex;
    justify-content: center;
}

/* section .main_bg.main_bg_1 {background-image: url('/resources/img/main/main_bg1.jpg'); transition: all 1s;}
section .main_bg.main_bg_2 {background-image: url('/resources/img/main/main_bg2.jpg'); transition: all 1s;}
section .main_bg.main_bg_3 {background-image: url('/resources/img/main/main_bg3.jpg'); transition: all 1s;}
section .main_bg.main_bg_4 {background-image: url('/resources/img/main/main_bg4.jpg'); transition: all 1s;} */

.main_bg_swiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.main_bg_swiper .swiper-slide {
    width: 100%;
    height: 100%;
}

.main_bg_swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}






.main_contents_wrap {
    width: 76%;
    height: 60%;
    position: relative;
    top: 13rem;
    z-index: 10;
}

.main_txt {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0;
    display: flex;
}

.main_txt p {
    font-size: min(1vw, 36px);
    color: #fff;
    font-family: 'Noto Sans CJK KR';
    letter-spacing: 10px;
    position: absolute;
    font-weight: bold;
}

.main_txt_1 {
    animation: moveLeft 2s cubic-bezier(0, 0, 0.58, 1) forwards 0.5s;
    left: 50%;
    transform: translateX(-95%);
    opacity: 0;
}

.main_txt_2 {
    animation: moveRight 2s cubic-bezier(0, 0, 0.58, 1) forwards 0.5s;
    right: 50%;
    transform: translateX(120%);
    opacity: 0;
}

@keyframes moveLeft {
    0% {
        left: 50%;
        transform: translateX(-95%);
        opacity: 0;
    }

    20% {
        left: 50%;
        transform: translateX(-95%);
        opacity: 1;
    }

    50% {
        left: 50%;
        transform: translateX(-95%);
        opacity: 1;
        animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
    }

    100% {
        left: 0;
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes moveRight {
    0% {
        right: 50%;
        transform: translateX(120%);
        opacity: 0;
    }

    20% {
        right: 50%;
        transform: translateX(120%);
        opacity: 1;
    }

    50% {
        right: 50%;
        transform: translateX(120%);
        opacity: 1;
        animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
    }

    100% {
        right: 0;
        transform: translateX(0);
        opacity: 1;
    }
}

.letter_box {
    opacity: 0;
    width: 45%;
    height: 100%;
    position: absolute;
    left: 50%;
    bottom: -5%;
    transform: translateX(-50%);
    animation: letter_box 1s forwards 3s;
}

@keyframes letter_box {
    0% {
        opacity: 0;
        bottom: -5%;
    }

    100% {
        opacity: 1;
        bottom: 0;
    }
}

.letter_box .form {
    z-index: 2;
    width: 72%;
    height: auto;
    aspect-ratio: 502 / 384;
    background-color: #fff;
    position: absolute;
    bottom: 22%;
    right: 50%;
    transform: translateX(50%);
    box-shadow: -5px 10px 15px rgba(0, 0, 0, 0.1), -7px 10px 10px rgba(0, 0, 0, 0.1);
    background: url('/resources/img/main/main_form2.png') center center/contain no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* animation: letter_box_form 1s forwards 6s; */
}

/* @keyframes letter_box_form {
    0% {
    background: url('/resources/img/main/main_form.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    }
    100% {
    background: url('/resources/img/main/main_form_open.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    }
} */
.letter_box .form .txt1 {
    font-size: min(1vw, 36px);
    color: #000;
    font-family: 'SUIT';
    font-weight: 200;
    line-height: normal;
    letter-spacing: 1.4px;
    text-align: center;
    padding-top: 0;
    margin-bottom: min(1vw, 28px);
    opacity: 0;
    transition: all 1s;
}

.letter_box .form .txt2 {
    text-align: center;
    margin-bottom: min(1vw, 30px);
    width: 100%;
    max-width: min(16vw, 400px);
    ;
    transform: translateY(-30%);
    transition: all 1s;
}

.letter_box .form .txt2 img {
    width: 100%;
}

.letter_box .form .txt3 a {
    padding: 5px 41px;
    background: #69a9c5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 150px;
    color: #FFF;
    font-family: Outfit;
    font-size: min(1vw, 36px);
    font-weight: 400;
    line-height: normal;
    opacity: 0;
    transition: all 1s;
}
.letter_box .form .txt3 a:hover{box-shadow: 0px 10px 20px rgba(0,0,0,0.3);}

.letter_box .form.letter_ani .txt1 {
    opacity: 1;
}

.letter_box .form.letter_ani .txt2 {
    transform: translateY(0%);
}

.letter_box .form.letter_ani .txt3 a {
    opacity: 1;
}

.letter_box .before {
    position: absolute;
    top: 0;
    left: 0px;
    background: url('/resources/img/main/letter_before.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.letter_box .after {
    position: absolute;
    bottom: 0;
    left: 0;
    background: url('/resources/img/main/letter_after.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.letter_box .form {
    z-index: 2;
    bottom: 20%;
    transition: bottom 1.2s ease-in-out;
}

.letter_box .before {
    z-index: 3;
    transition: none;
}

.letter_box .form.moving-up {
    bottom: 82%;
    transition: bottom 1.2s ease-in-out;
}

.letter_box .form.letter_read {
    z-index: 3;
}

.letter_box .before.letter_before {
    z-index: 2;
}





/*** main_btn ***/
.main_btn {
    width: 13%;
    height: auto;
    position: absolute;
    bottom: 30%;
    right: 11%;
    display: flex;
    flex-direction: column;
    z-index: 20;
    opacity: 0;
    animation: main_btn 1s forwards 6s;
}

@keyframes main_btn {
    0% {
        opacity: 0;
        right: 11%;
    }

    100% {
        opacity: 1;
        right: 12%;
    }
}

.main_btn a {
    padding: 8% 28%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background-color: #353F49;
    display: flex;
    align-items: center;
    position: relative;
}

.main_btn a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: #fff;
    transition: all 0.5s;
    z-index: 0;
}

.main_btn a:hover::after {
    width: 100%;
}

.main_btn a:first-child {
    margin-bottom: 2%;
}

.main_btn a img {
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 1;
    transition: all 0.5s;
}

.main_btn a:hover img {
    filter: brightness(0) saturate(100%) invert(21%) sepia(13%) saturate(1034%) hue-rotate(158deg) brightness(95%) contrast(89%);
}

.main_btn a p {
    font-size: clamp(15px, 0.9vw, 25px);
    color: #fff;
    font-family: 'Pretendard';
    font-weight: 400;
    margin-left: 14%;
    position: relative;
    width: 100%;
    transition: all 0.5s;
    z-index: 1;
}

.main_btn a:hover p {
    color: #353F49;
}

/* .main_btn a p::after {
    content: "";
    width: 5px;
    height: 9px;
    display: block;
    position: absolute;
    bottom: 23%;
    right: 8%;
    background-image: url("/resources/img/main/arrow.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.5s;
} */

.main_btn a:hover p::after {
    filter: brightness(0) saturate(100%) invert(21%) sepia(13%) saturate(1034%) hue-rotate(158deg) brightness(95%) contrast(89%);
}



.main_location_img_wrap {
    width: clamp(125px, 16vw, 400px);
    height: auto;
    position: absolute;
    top: 58%;
    right: -2.1%;
    display: flex;
    flex-direction: column;
    z-index: 20;
    opacity: 0;
    animation: main_location 1s forwards 6s;
}

@keyframes main_location {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@media screen and (max-width: 2030px) {
    .main_location_img_wrap {
        right: -1.5%;
    }
}
@media screen and (max-width: 1630px) {
    .main_location_img_wrap {
        right: -1%;
    }
}
@media screen and (max-width: 1350px) {
    .main_location_img_wrap {
        right: -0.2%;
    }
}
@media screen and (max-width: 1220px) {
    .letter_box .form {
        bottom: 30%;
    }
    .main_location_img_wrap {
        right: 0.7%;
    }
}
@media screen and (max-width: 1024px) {
    .main_location_img_wrap {
        right: 2%;
    }
}
@media screen and (max-width: 900px) {
    .main_contents_wrap {
        width: 65%;
        height: 60vw;
        top: 17%;
    }

    .main_txt {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
    }

    .main_txt p {
        font-size: min(2vw, 20px);
    }

    .main_txt_1 {
        top: 45%;
        left: 0;
        transform: translateX(0);
        animation: moveLeft 2s cubic-bezier(0, 0, 0.58, 1) forwards 0.5s;
    }

    .main_txt_2 {
        top: 52%;
        right: 0;
        transform: translateX(0);
        animation: moveRight 2s cubic-bezier(0, 0, 0.58, 1) forwards 0.5s;
    }

    @keyframes moveLeft {
        0% {
            left: 0;
            transform: translateX(0);
            opacity: 0;
            top: 45%;
        }

        20% {
            left: 0;
            transform: translateX(0);
            opacity: 1;
            top: 45%;
        }

        50% {
            left: 0;
            transform: translateX(0);
            opacity: 1;
            top: 45%;
            animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
        }

        100% {
            left: 0;
            transform: translateX(0);
            opacity: 1;
            top: 0;
        }
    }

    @keyframes moveRight {
        0% {
            right: 0;
            transform: translateX(0);
            opacity: 0;
            top: 52%;
        }

        20% {
            right: 0;
            transform: translateX(0);
            opacity: 1;
            top: 52%;
        }

        50% {
            right: 0;
            transform: translateX(0);
            opacity: 1;
            top: 52%;
            animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
        }

        100% {
            right: 0;
            transform: translateX(0);
            opacity: 1;
            top: 95%;
        }
    }

    .letter_box {
        opacity: 0;
        width: 90%;
        height: 90%;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        animation: letter_box 1s forwards 3s;
    }
    @keyframes letter_box {
        0% {
            opacity: 0;
            bottom: 0;
        }
        100% {
            opacity: 1;
            bottom: 5%;
        }
    }
    .letter_ani_end.main_contents_wrap {
        height: 60vw;
        transition: height 0.7s ease-in-out;
    }
    .letter_box .form {
        bottom: 20%;
    }
    .letter_box .form .txt1 {
        font-size: min(2vw, 20px);
        margin-bottom: min(2vw, 28px);
    }
    .letter_box .form .txt2 {
        max-width: min(30vw, 290px);
        margin-bottom: min(2vw, 30px);
    }
    .letter_box .form .txt3 a {
        font-size: min(2vw, 22px);
    }
    .main_btn {
        width: 65%;
        bottom: 0;
        right: 50%;
        transform: translateX(50%);
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    @keyframes main_btn {
        0% {
            opacity: 0;
            right: 50%;
            bottom: 0;
        }
        100% {
            opacity: 1;
            right: 50%;
            bottom: 8%;
        }
    }
    .main_btn a {
        width: 90%;
        padding: 4% 33%;
    }
    .main_btn a:first-child {
        margin-bottom: 0;
    }
    .main_btn a p {
        font-size: clamp(16px, 2.5vw, 22px);
    }
    .main_btn a::after {
        display: none;
    }
    .main_btn a:hover p {
        color: #fff;
    }
    .main_btn a:hover img {
        filter: none;
    }
    .main_btn a:hover p::after {
        filter: none;
    }
    .main_btn a p::after {
        right: 0;
    }

    .main_location_img_wrap {
        width: 55%;
        height: auto;
        bottom: -55%;
        top: auto;
        right: 50%;
        transform: translateX(50%);
        opacity: 0;
        animation: main_location 1s forwards 6.5s;
    }
    @keyframes main_location {
        0% {
            opacity: 0;
            right: 50%;
            transform: translateX(50%);
        }

        100% {
            opacity: 1;
            right: 50%;
            transform: translateX(50%);
        }
    }
}

@media screen and (max-width: 640px) {
    .letter_ani_end.main_contents_wrap {
        height: 85vw;
        transition: height 0.7s ease-in-out;
    }
    .main_contents_wrap {
        width: 85%;
        height: 80vw;
        top: 17%;
    }
    .main_txt p {
        font-size: min(3vw, 20px);
    }
    .letter_box {
        height: 87%;
    }
    .main_btn {
        width: 90%;
    }
    .letter_box .form .txt2 {
        max-width: min(30vw, 290px);
    }
    .main_location_img_wrap {
        width: 70%;
        bottom: -60%;
    }
}

@media screen and (max-width: 460px) {
    .main_contents_wrap {
        height: 110vw;
        top: 15%;
    }
    .main_txt p {
        font-size: min(4vw, 20px);
    }
    .letter_box {
        height: 87%;
        width: 100%;
    }
    .main_btn a {
        padding: 6% 5%;
    }
    .letter_box .form .txt1 {
        font-size: min(3vw, 10px);
        margin-bottom: min(3vw, 14px);
    }
    .letter_box .form .txt2 {
        max-width: min(40vw, 290px);
        margin-bottom: min(3vw, 16px);
    }
    .letter_box .form .txt3 a {
        font-size: min(3vw, 12px);
    }
    .main_location_img_wrap {
        width: 29vh;
        bottom: -30.5vh;
    }
}

@media screen and (max-width: 375px) {
    .main_contents_wrap {
        height: 104vw;
        top: 15%;
    }
    .main_txt p {
        font-size: min(4vw, 20px);
    }
    .letter_box {
        height: 75%;
        width: 100%;
    }
    @keyframes letter_box {
        0% {
            opacity: 0;
            bottom: 0;
        }
        100% {
            opacity: 1;
            bottom: 8%;
        }
    }
    .main_location_img_wrap {
        width: 27vh;
        bottom: -27vh;
    }
}



    .layerPopup {
        width: 100%; 
        height:100%; 
        background-color: rgba(0, 0, 0, 0.3);
        align-items: center;
        justify-content: center;
    }
    .layerPopup .layerPopup_in {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 40%;
        max-width: 896px;
    }
    .layerPopup .layerPopup_in .closeLayer {
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
    .layerPopup .layerPopup_in .closeLayer a {
        padding: 0;
        position: relative;
        right: 0;
        top: 0.9rem;
        width: auto;
    }
    .layerPopup .layerPopup_in .layer_body {
        position: relative;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        margin: 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 685/540;
    }
    .layerPopup .layerPopup_in .layer_body img {
        width: 100%;
    }

@media screen and (max-width: 900px) {
    .layerPopup .layerPopup_in {
        width: 90%;
    }
    .layerPopup .layerPopup_in .closeLayer a {
        width: 86px;
        top: 1rem;
    }
    .layerPopup .layerPopup_in .closeLayer a img {
        width: 100%;
    }
}