/*테마 공용 css*/
/*프리텐다드*/
/*@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");*/
/* Philosopher,  Lexend Deca*/
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@font-face {
    font-family: 'GyeonggiMillenniumBackground';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Batang_Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'GyeonggiMillenniumBackground';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Batang_Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    src: url('/pretendard/Pretendard-Thin.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    src: url('/pretendard/Pretendard-ExtraLight.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    src: url('/pretendard/Pretendard-Light.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    src: url('/pretendard/Pretendard-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    src: url('/pretendard/Pretendard-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    src: url('/pretendard/Pretendard-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    src: url('/pretendard/Pretendard-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    src: url('/pretendard/Pretendard-ExtraBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    src: url('/pretendard/Pretendard-Black.woff2') format('woff2');
}



/*var*/
:root{
    --color-1: #0278BD;
    --color-gray-1: #EFEFEF;
    --color-gray-2: #D9D9D9;
    --color-gray-3: rgba(239, 239, 239, 0.8);
    --color-gray-3: #F4F4F4;
    --color-gray-4: #2d2d2d;

    --color-white: #fff;
    /*--color-black: #000;*/
    --color-black: #1B313D;

    --font-1 : "pretendard";
    --font-2 : "Philosopher";
    --font-3 : "Lexend Deca";

    --f-size-10: 0.63rem; /*10*/
    --f-size-12: 0.75rem; /*12*/
    --f-size-14: 0.88rem; /*14*/
    --f-size-16: 1rem; /*16*/
    --f-size-18: 1.125rem; /*18*/
    --f-size-20: 1.25rem; /*20*/
    --f-size-24: 1.5rem; /*24*/
    --f-size-26: 1.625rem; /*26*/
    --f-size-28: 1.75rem; /*28*/
    --f-size-30: 1.875rem; /*30*/
    --f-size-35: 2.2rem; /*35*/
    --f-size-40: 2.5rem; /*40*/
}

::selection{
    background-color: var(--color-1);
    color: var(--color-white);
}

::-webkit-scrollbar{
}
::-webkit-scrollbar-thumb {
    background-color: var(--color-1);
    border-radius: 10px;
}
::-webkit-scrollbar-track{
    background-color: var(--color-gray-1);
}

@view-transition{
    navigation: auto;
}
::view-transition-group(root){
    animation: 1s;
}

html{
    font-size: 18px;
    font-family: var(--font-1);
}
body{
    color: var(--color-black);
    overflow: hidden;
}
@media(width < 1400px){
}
@media(width < 1024px){
    html{
        font-size: 14px;
    }
}
@media(width < 768px){
    html{
        font-size: 12px;
    }
}
@media(width < 576px){
}

/*s:my default*****************************/
img{
    width: 100%;
    object-fit: cover;
    object-position: center;
}
/*e:my default*****************************/

/*s:헤더***********************************/
.menu-right{
    color: var(--color-1);
    display: flex; justify-content: end; align-items: center;
    gap: clamp(15px, 3.5vw, 40px);
    font-family: var(--font-1);
    .gnb-social {
        display: flex;
        gap: clamp(15px, 3.5vw, 20px);
        font-size: 28px;
        align-items: center;
    }
    .menu-toggle{
        cursor: pointer;
        width: 45px;
        text-align: end;
    }
}
.header{
    .main-gnb{
        background-color: #F4F4F4;
    }
}

.header{
    .main-gnb{
        opacity: 0;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        width: 100%;
        padding-block: clamp(8px,3.5vw,24px);
        transition: 0.5s;
        font-family: var(--font-2), var(--font-3);
        color: var(--color-1);
        .wrap{
            display: flex;
        }
        .logo{
            &.start{
                width: 100%;
                .logo-r-typo{
                    margin-right: 0;
                    margin-left: auto;
                    margin-bottom: -8px;
                }
            }
            transition: .4s;
            position: relative;
            height: 60px;
            display: flex;
            gap: 2rem;
            align-items: end;
            justify-content: space-between;
            a{
                position: relative;
                height: 100%;
                display: flex;
                align-items: center;
                gap: 1rem;
                font-size: clamp(0px,5vw,50px);
                font-weight: 700;
                white-space: nowrap;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
                span{
                    transition: .4s;
                }
            }
            .logo-r-typo{
                position: relative;
                white-space: nowrap;
                font-weight: 400;
                margin-bottom: 6px;
            }
        }
        .menu-right{
            margin-left: auto;
            transition: .4s;
            &.start{
                width: 0;
                opacity: 0;
                overflow: hidden;
                margin-left: 0;
            }
            .gnb-social{
                display: flex; gap: clamp(15px,3.5vw,20px);
            }
            .menu-toggle{
                cursor: pointer; width: 45px;
                text-align: end;
            }
        }
    }
    /*서브네비*/
    .sub-gnb{
        &.gnb-container{
            transition: .4s;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: 100000;
            pointer-events: none;
            background-color: #00000000;
            text-transform: uppercase;
            font-family: var(--font-2);
            display: flex;
            justify-content: space-between;
        }
        .gnb{
            color: var(--color-1);
            transition: .4s;
            position: relative;
            top: -100vh;
            width: 34vw;
            min-width: 400px;
            background-color: var(--color-white);
            padding : 28vh 72px 0 72px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .gnb-1d-ul{
                .gnb-1d-li{
                    margin-bottom: 25px;
                }
                a{
                    font-size: clamp(26px,6.3vw,38px);
                    transition: .4s;
                    display: inline-block;
                    position: relative;
                    &::after{
                        content: "";
                        display: block;
                        width: 0;
                        height: 1px;
                        background-color: var(--color-1);
                        transition: .4s;
                        position: absolute;
                        bottom: 0.3em;
                    }
                    &:hover{
                        font-weight: 700;
                        &::after{
                            width: 100%;
                        }
                    }
                }
            }
            .gnb-typo{
                padding-inline: 13px ;
                text-align: center;
                border-top: 1px solid var(--color-1);
                padding-top: 20px;
                padding-bottom: 75px;
                font-size: 20px;
                font-weight: 400;
            }
        }
        .wrap{
            font-family: var(--font-2);
            color: var(--color-white);
            transition: .4s;
            height: 110px;
            padding-block: 25px;
            position: absolute;
            z-index: 1;
            top: 0; left: 0; right: 0;
            opacity: 0;
            display: flex;
            justify-content: end;
            .menu-right{
                color: var(--color-white);
            }
        }
    }

    &.open{
        .main-gnb{
            .menu-right{
                opacity: 0;
            }
        }
        .sub-gnb{
            &.gnb-container{
                pointer-events: auto;
                background-color: #00000088;
                path{
                    stroke: var(--color-white);
                }
            }
            .gnb{
                transition: .4s;
                top: 0;
            }
            .wrap{
                transition: .4s;
                opacity: 1;
            }
        }
    }
}

#wrap:not(.index) .header{
    .logo{
        text-transform: capitalize;
    }
}

.side{
        position: fixed;
        z-index: 99999999;
        background-color: coral;
        border : 3px solid blue;
        right: 30px;
        bottom: 30px;
        pointer-events: none;

        button{
            pointer-events: auto;
            border: var(--color-text) 1px solid;
            background-color: var(--color-main);
            color: var(--color-text);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            transition: 0.5s;
        }
        button:hover{
            border: var(--color-main) 1px solid;
            color: var(--color-main);
            background-color: var(--color-text);
        }

    }
@media(width < 1400px){
}
@media(width < 1024px){
    .menu-right{
        font-size:14px !important;
        .gnb-social{
            font-size:20px !important;
            svg{
                width: 20px !important;
                height: 20px !important;
            }
        }
    }
    .header{
        .main-gnb{
            .logo{
                align-items: center;
                .logo-r-typo{
                    margin-bottom: 0;
                    display: none;
                }
            }
            .logo:not(.start){
                a span{
                    /*opacity: 0;*/
                }
            }
            .menu-right{
                align-items: center;
                font-size:14px;
                .gnb-social{
                    font-size:20px;
                }

            }
        }
        .sub-gnb{
            .gnb{
                min-width: unset;
                width: 100vw;
                height: 85vh;
                padding-top: 26%;
                justify-content: start;
                li{
                    text-align: center;
                }
                .gnb-social{
                    font-size:20px;
                    padding-top: 20px;
                    border-top: 1px solid var(--color-1);
                    font-size: 20px;
                    width: max-content;
                    margin: 0 auto;
                    display: flex;
                    gap: 15px;
                    padding-inline: 13px;
                }
            }
            .wrap{
                .gnb-social{
                    display: none !important;
                }
                .menu-toggle {
                    color: var(--color-1);
                }
            }
        }
    }
    &.open{
        .sub-gnb{
            .gnb{

            }
        }
    }
}
@media(width < 768px){
}
@media(width < 400px){
}
/*e:헤더***********************************/
/*s:푸터***********************************/
.footer{
    background-color: var(--color-1);
    .footer-info-wrap{
        padding: clamp(120px,17vw,118px) 0 clamp(120px,19vw,131px);
        .footer-info-row{
            display: flex;
            justify-content: center;
            .footer-info-col:nth-child(1){
                font-size: 29px;
                .footer-info-ps-name{
                    font-weight: 300;
                }
                .footer-info-ps-address{
                    font-weight: 500;

                }
            }
            .footer-info-col:nth-child(2){
                &>div{
                    font-weight: 300;
                }
                &>div:not(:last-child){
                    margin-bottom: clamp(10px,2vw,15px);
                }
                &>div>span{
                    font-weight: 400;
                    display: inline-block;
                    width: 110px;
                    position: relative;
                    margin-right: 1rem;
                    &::after{
                        content: "|";
                        font-weight: 300;
                        position: absolute;
                        right: 0;
                    }
                }
            }
            .footer-info-col:last-child{
                display: flex;
                font-family: var(--font-3);
                font-weight: 300;
                flex-wrap: wrap-reverse;
                .footer-info-social{
                    font-size: var(--f-size-40);
                    font-weight: 300;
                    a{
                        padding-block: 15px;
                    }
                    svg{
                        color: var(--color-white);
                        width: 35px; height: 35px;
                        path{
                            stroke: var(--color-white);
                        }
                    }
                }
                a.footer-gnb-a{
                    display: inline-block;
                    padding: 10px 7px;
                }
            }
        }
    }
    .footer-typo-wrap{
        font-family: var(--font-2);
        line-height: 1;
        &>div:first-child{
            font-size: clamp(30px,7.2vw,120px);
            font-weight: 700;
            margin-bottom: -0.15em;
            &>div{
                font-weight: 400;
                font-size: 26px;
            }
        }
        &>div:last-child{
            font-size: clamp(26px,6.3vw,54px);
            font-weight: 400;
            margin-bottom: -0.15em;
        }
    }
}
@media(width > 1023px){
    .footer{
        .footer-info-wrap{
            .footer-info-row{
                .footer-info-col{
                }
                .footer-info-col:first-child{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding-inline: 100px;
                    border-right: 1px solid var(--color-white);
                }
                .footer-info-col:nth-child(2){
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding-block: 20px;
                    padding-inline: 100px 60px;
                    border-right: 1px solid var(--color-white);
                }
                .footer-info-col:nth-child(3){
                    .footer-info-social{
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        padding-inline: 30px;
                        border-right: 1px solid var(--color-white);

                    }
                    .footer-gnb-ul{
                        padding-left: 60px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                    }
                }
            }
        }
        .footer-typo-wrap{
            max-width: 1422px;
            margin: 0 auto;
        }
    }
}
@media(width < 1400px){
}
@media(width < 1024px){
    .footer{
        .footer-info-wrap{
            .footer-info-row{
                flex-direction: column;
                gap: 40px;
                .footer-info-ps-name,
                .footer-info-ps-address{
                    font-size: 18px !important;
                }
                .footer-info-col{
                    align-items: center;
                    font-size: 14px !important;
                    .footer-info-label{
                        width: 76px !important;
                        padding-left: 4px;
                    }
                    .footer-info-social{
                        /*display: flex;*/
                        font-size: 20px !important;
                        margin-right: 18px;
                        a{
                            margin-right: 12px;
                        }
                        svg{
                            width: 20px !important; height: 20px !important;
                        }
                    }
                    .footer-gnb-ul{
                        display: flex;
                    }
                    .footer-gnb-a{
                        padding-left: 0 !important;
                    }
                }
            }
        }
    }
}
@media(width < 768px){
}
@media(width < 400px){
    .footer{
        .footer-info-wrap{
            .footer-info-row{
                flex-direction: column;
                .footer-info-col{
                    .footer-gnb-ul{
                        display: flex;
                    }
                }
            }
        }
    }
}
/*e:푸터***********************************/
/*s:인클루드********************************/
.section-include-hero {
    height: 130dvh;
    display: flex;
    flex-direction: column;
    justify-content: end;
    background: #F4F4F4;
    .hero-menu-right{
        height: 42dvh;
        display: flex; justify-content: end; align-items: end;
        .wrap{
            width: 100%;
            padding-bottom: 40px;
        }
    }
    #hero-swiper {
        width: 100%;
        flex-grow: 1;
        margin-top: auto;
        position: relative;
        .swiper-nav {
            position: absolute;
            z-index: 10;
            bottom: clamp(39px,9vw,104px);
            right: 0;
            font-family: var(--font-2), var(--font-3);
            color: var(--color-white);
            font-size: var(--f-size-20);
            font-weight: 300;
        }
        .swiper-nav .wrap {
            gap: 2rem;
            display: flex;
        }
        .swiper-nav button {
            cursor: pointer;
        }
    }
}

.section-include-introduce{
    padding-top: clamp(56px, 13vw, 120px);
    padding-bottom: clamp(56px, 13vw, 120px);
    position: relative;
    .wrap{
        position: relative;
        &::before{
            display: block; height: 1px;
            background-color: var(--color-gray-2);
            content: "";
        }
        &::after{
            display: block; height: 1px;
            background-color: var(--color-gray-2);
            content: "";
        }
        .introduce-container{
            padding-top: clamp(40px,12vw,120px);
            padding-bottom: 120px;
            display: flex;
            .article-top{
                .title{
                    padding-bottom: clamp(20px,6vw,48px);
                    font-family: var(--font-2);
                    font-size: clamp(26px,7vw,60px);
                    white-space: nowrap; text-align: right;
                    background-color: var(--color-white);
                    .ps-name{
                        text-transform: uppercase;
                        font-weight: 700;
                    }
                    .typo{
                        color: var(--color-1);
                        font-weight: 400;
                    }
                }
                .content-wrap{
                    font-size: 15px;
                    .img{
                        background-size: cover;
                        background-position: center;
                        background-repeat: no-repeat;
                        aspect-ratio: 734/380;
                        min-height: 198px;
                    }
.                    .content{
                        padding-top: 30px;
                        color: var(--color-gray-4);
                        font-family: var(--font-3);
                        font-weight: 400;
                        background-color: var(--color-white);
                    }
                    .sub-typo{
                        padding-top: clamp(28px,5vw,40px);
                        font-weight: 500;
                        text-transform: capitalize;
                        background-color: var(--color-white);
                    }
                }
            }
            .article-bottom{
                flex-grow: 1;
                div{
                    width: 100%;
                    aspect-ratio: 585/300;
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                }
            }
        }

    }
    .deco{
        position: absolute; top: 0; left:0; z-index: -1;
        pointer-events: none;
        width: 100%; height: 100%;
        .deco-typo{
            position: absolute;
            left: -30px;
            color: #efefef;
            font-family: var(--font-2);
            font-weight: 400;
            font-size: clamp(60px,15vw,200px);
            letter-spacing: 5px;
            top: 221px;
            line-height: 1;
            margin-block: 0.2em;
            background-color: var(--color-white);
        }
        .deco-box{
            position: absolute;
            z-index: -1;
            top: calc(clamp(40px, 12vw, 120px) + clamp(20px,4vw,40px) );
            left: clamp(100px, 30vw, 268px);
            border: 2px dotted var(--color-gray-2);
            width: clamp(100px, 50vw, 600px);
            aspect-ratio: 616/486;
            .deco-box-inner{
                position: absolute;
                top: -10%; right: -16%;
                width: clamp(100px, 50vw, 180px);
                aspect-ratio: 184/100;
                background-color: var(--color-white);
                .deco-circle{
                    background-color: var(--color-1);
                    border-radius: 50%;
                    width: 5px; height: 5px;
                    margin-top: 24%;
                }
            }
        }
    }
}

.section-include-map{
    .wrap{
        max-width: 1200px;
        &>.title{
            color: var(--color-1);
            display: flex; gap: 10px; align-items: center;
            font-size: clamp(26px,6vw,32px);
            font-weight: 700;
        }
        .map-container{
            width: 100%;
            padding-block: 16px;
            iframe{
                width: 100%;
                aspect-ratio: 1200/420;
            }
        }
        .map-content{
            width: 100%;
            display: flex;
            &>div{
                flex-grow: 1;
                padding: clamp(16px,3.5vw,32px) clamp(16px,3.5vw,49px);
            }
            .title{
                display: flex; gap: clamp(10px,2.5vw,24px); align-items: center;
                .btn{
                    width: clamp(19px,4vw,64px);
                    height: clamp(19px,4vw,64px);
                    border-radius: 50%;
                    background-color: var(--color-1);
                    color: var(--color-white);
                    display: flex; align-items: center; justify-content: center;
                    font-size: clamp(10px,2vw,24px);
                }
                .desc{
                    color: var(--color-1);
                    font-weight: 300;
                    font-family: var(--font-1);
                    letter-spacing: 3px;
                }
            }

        }
    }
}

@media(width > 1023px){
    /*가로형에서만*/
    .section-include-introduce{
        .wrap {
            .introduce-container {
                /*padding-inline: clamp(0px,9vw, 149px);*/
                max-width: 1480px;
                margin: 0 auto;
                display: flex; flex-direction: row-reverse; align-items: end;
                gap: clamp(0px,12vw,159px);
                .article-top{
                    width: 50%;
                    display: flex;
                    flex-direction: column;
                    align-items: end;
                    line-height: 1.7;
                    .content-wrap{
                        width: 100%;
                        .content{
                            padding-top: 30px;
                            font-size: 18px;
                            line-height: 1.7;
                        }
                    }
                }
            }
        }
    }
    .section-include-map{
        .wrap{
            .map-content{
                border: 1px solid var(--color-1);
                border-radius: 6px;
                &>div:not(:last-child){
                  border-right: 1px solid var(--color-1);
                }
                .title{
                    margin-bottom: 26px;
                }
            }
        }
    }

}
@media(width < 1400px){
}
@media(width < 1024px){
    .section-include-hero {
        height: 100vh;
        .hero-menu-right{
            height: 220px;
        }
        #hero-swiper {
            height: calc(100dvh - 220px);
        }
    }
    .section-include-introduce{
        .wrap{
            .introduce-container{
                flex-direction: column;
                padding-bottom: clamp(0px,40vw,350px);
                .article-top{
                    .title{
                        align-self: center;
                        .ps-name{
                        }
                        .typo{
                        }
                    }
                    .content-wrap{
                        .img{
                        }
                        .content{
                            line-height: 1.7;
                            padding-top: 30px;
                        }
                        .sub-typo{
                        }
                    }
                }
                .article-bottom{
                    padding-right: 20vw;
                    padding-top: 41px;
                    div{
                        aspect-ratio: 297/150;
                        position: relative;
                    }
                }
            }
        }
        .deco{
            .deco-typo{
                left: 20px;
                bottom: 70px;
                top: unset;
            }
            .deco-box{
                top: unset;
                left: unset;
                right: 20px;
                bottom: 40px;
                width: 75vw;
                height: clamp(0px,57vw,550px);
                .deco-box-inner{
                    background-color: transparent;
                    top: 0;right: 0;
                    .deco-circle{
                        margin-top: -5px;
                        margin-left: auto;
                        margin-right: 17.5vw;
                        width: 10px; height: 10px;

                    }
                }
            }
        }
    }

    .section-include-map{
        .wrap{
            &>.title{
                color: var(--color-1);
            }
            .map-container{
                width: 100%;
                padding-block: 30px 20px;
                iframe{
                    width: 100%;
                    aspect-ratio: 380/196;
                }
            }
            .map-content{
                flex-direction: column;
                gap: 10px;
                &>div{
                    border: var(--color-1) 1px solid;
                    border-radius: 6px;
                    font-size: 16px;
                    &>.content{
                    }
                }
                .title{
                    margin-bottom: 6px;

                }
                .desc{
                    color: var(--color-1);
                }

            }
        }
    }
}
@media(width < 768px){
    .section-include-introduce{
        .wrap{
            .introduce-container{
                .article-top{
                    .title{
                        letter-spacing: -1px;
                        text-align: left;
                        line-height: 1.7;
                        .ps-name{
                        }
                        .typo{
                            display: block;
                            margin-top: -10px;
                        }
                    }
                    .content-wrap{
                        .img{
                        }
                        .content{
                        }
                        .sub-typo{
                        }
                    }
                }
            }

        }
        .deco{
            .deco-typo{
            }
            .deco-box{
                .deco-box-inner{
                    .deco-circle{
                    }
                }
            }
        }
    }
}
@media(width < 400px){
}
/*e:인클루드********************************/
/*s:그외공통********************************/
.header .wrap,
.footer .wrap,
main>.wrap,
.section .wrap{
    padding-inline: clamp(16px, 3.8vw, 72px);
}
.title{
    font-family: var(--font-2), var(--font-3);
}
.section-title{
    overflow: hidden;
    font-family: var(--font-2), var(--font-3);
    font-size: 14px;
    text-decoration: underline !important;
    transition: 0.5s;
}
.section-title a,
.section-title span{
    text-decoration: underline !important;
}
.section-content{
    font-family: var(--font-2), var(--font-3);
    font-size: 14px;
    line-height: 1.5;
}
@media(width < 1400px){
}
@media(width < 1024px){
    .section .wrap{
    }
}
@media(width < 768px){
}
@media(width < 576px){
}
/*e:그외공통********************************/