/*테마 공용 css*/
/*프리텐다드*/
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
/*고운바탕, noticia*/
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Noticia+Text:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/*miracle*/
@import url('https://fonts.cdnfonts.com/css/miracle-2');
.gowun-batang-regular {
    font-family: "Gowun Batang", serif;
    font-weight: 400;
    font-style: normal;
}
.gowun-batang-bold {
    font-family: "Gowun Batang", serif;
    font-weight: 700;
    font-style: normal;
}
.noticia-text-regular {
    font-family: "Noticia Text", serif;
    font-weight: 400;
    font-style: normal;
}

.noticia-text-bold {
    font-family: "Noticia Text", serif;
    font-weight: 700;
    font-style: normal;
}

.noticia-text-regular-italic {
    font-family: "Noticia Text", serif;
    font-weight: 400;
    font-style: italic;
}

.noticia-text-bold-italic {
    font-family: "Noticia Text", serif;
    font-weight: 700;
    font-style: italic;
}


/*var*/
:root{
    --color-1: #F5F5F5; /*서브네비 배경*/
    --color-2: #6c523d; /*네비글자 #A4AE9C;*/
    --color-3: #777; /*페이지 내 링크*/
    --color-4: #C1C1C1; /*라인, 푸터글자*/
    --color-5: #FCFAF6; /*바디*/


    --e-main-font-1 : 'Noticia Text';

    --k-main-font-1 : 'Pretenard';
    --k-main-font-2 : 'Gowun Batang';


    --f-size-1 : 1rem; /*16*/
    --f-size-2 : 0.88rem; /*14*/
    --f-size-3 : 0.75rem; /*12*/
    --f-size-4 : 0.63rem; /*10*/

}

/*드래그*/
::selection{
    background-color: var(--color-1);
    color: var(--color-3);
}

/*스크롤바*/
::-webkit-scrollbar{
    width: 10px;
}
    /*바*/
::-webkit-scrollbar-thumb {
    background-color: var(--color-4);
    border-radius: 100px;
}
    /*배경*/
::-webkit-scrollbar-track{
    padding: 3px;
    background-color: var(--color-1);
}

html{
    font-size: 16px;
}
body{
}
@media(width < 1400px){
}
@media(width < 1024px){
    html{
        font-size: 14px;
    }
}
@media(width < 768px){
    html{
        font-size: 14px;
    }
}
@media(width < 576px){
}
/*s: gnb*/
/*헤더전체*/
.header {
    position:fixed;
    display: flex;
    z-index: 99999;
    width: 100%;
    font-family: var( --k-main-font-2);
    text-transform: uppercase;
    font-weight: 400;
    transition: all 0.5s;
    padding-top: clamp(0px, 2.5vw, 20px);
    padding-bottom: clamp(0px, 2.5vw, 20px);
    background-color: #fff;
    border-bottom: 1px solid var(--color-2);
}
.header > .wrap {
    width: 100%;
    display: flex;
    padding-left: clamp(40px, 10vw, 150px);
    padding-right: clamp(40px, 10vw, 150px);
}
/*로고*/
.logo{
    position: relative;
    margin-right: auto;
    padding: 10px;
    z-index: 10;
    max-width: 120px;
    max-height: 70px;
    padding-left: 0;
}
.logo a{
    display: inline-block;
    width: 100%;
    height: 100%;
}
.logo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
}
/*gnb*/
.gnb{
    position: relative;
}

.gnb-1d-ul{
    height: 100%;
    display: flex;
    column-gap: clamp(20px, 4vw, 55px);
    justify-content: center;
    align-items: start;
}
.gnb-1d-li{
}
.gnb-1d-a{
    color: var(--color-2);
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    text-transform: uppercase;
    white-space: nowrap;
    height: 60px;
    font-weight: 700;
}
.gnb-1d-li.active>a {
    color: #443824;
    pointer-events: none;
}
.sub-nav-wrap{
    display: grid;
    /*grid-template-columns: 1fr 1fr;*/
    align-items: center;
}


/*메뉴버튼*/
.menu-btn{
    display: flex;
    align-items: start;
    margin-left: clamp(0px, 7vw, 110px);
    width: 40px;
    padding-top: 10px;
    max-width: 100%;
}
.menu-btn .menu-btn-wrap{
    /*버튼스타일죽이기*/
    border:unset;
    padding: unset;
    background: unset;
    /**/
    position: relative;
    transition: color 0.5s;
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: 100%;
    height: max-content;
}
.menu-btn .menu-btn-line{
    display: block;
    background-color: #fff;
    height: 1px;
    width: 100%;
    transition: all 0.5s;
}
.leaf{
    width: 100%;
    object-fit: contain;
    object-position: center;
    position: relative;
    z-index: 5;
}
.leaf-typo{
    color: var(--color-2);
    font-size: 0.5rem;
    display: inline-block;
    text-align: center;
    transform: translateY(-100%);
    opacity: 0;
    position: relative;
    z-index: 1;
    transition: .5s;
}
.header:hover .leaf-typo{
    opacity: 1;
    transform: translateY(0);
}

.sub-nav{
    display: none;
}
.gnb-2d-ul{
    overflow-y: hidden;
    transition: all .3s;
}
.open.header{
    width: 100vw;
    height: 100dvh;
    background-color: var(--color-1);
    .logo{
        position: absolute;
        top: 50%;
        left: 25%;
        transform: translateY(calc(-50% - 50px));
    }
    .sub-nav-wrap{
        grid-template-columns: 50% 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 100%;
        height: 100%;
        margin: 0 auto;
        padding: clamp(0px,6vw,100px) clamp(60px,8vw,150px);
    }
    .sub-nav{
        display: block;
        height: 100%;
    }
    .sub-nav .swiper{
        height: 100%;
    }
    .sub-nav .swiper-slide{
        height: 100%;
    }
    .gnb{
        padding-top: clamp(40px,15vw,50px);
    }
    .gnb-1d-a {
        color: var(--color-2);
    }
    .menu-btn{
        display: none;
    }
    .gnb-2d-ul{
        display: none;
    }

}

.gnb-1d-li{
    display: grid;
    grid-template-rows: 60px 0fr;
    overflow: hidden;
    transition: all .5s;
}
.gnb-2d-a{
    display: inline-block;
    padding: 4px 12px;
    padding-right: 0;
    font-size: var(--f-size-2);
    color: var(--color-2);
}

.header:not(.open):hover{
    .gnb-1d-li{
        grid-template-rows: 60px 1fr;
    }
}
.header:not(.open) .gnb-1d-li:nth-child(4){
    margin-left: -20px;
}
.header:not(.open) .mouse-down{
    display: none;
}
.mouse-down{
    position: absolute;
    left: 25.5%;
    top: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 2.2rem;
    color: var(--color-2);
    pointer-events: none;
}
.mouse-down i{
    pointer-events: auto;
    cursor: pointer;
}
.header.open.intro{
    .logo{
        filter: brightness(0) invert(1);
    }
    .sub-nav-wrap{
        background-color: var(--color-2);
    }
    .gnb-1d-a {
        color: var(--color-1);
    }
    .mouse-down{
        color: var(--color-1);
    }
}


/*스크롤탑*/
.side{
    position: fixed;
    right: 15px;
    bottom: 25px;
    z-index: 95;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.go-top{
    width: 50px;
    height: 50px;
    border: 1px solid var(--color-1);
    border-radius: 50%;
    background-color: var(--color-2);
    color: var(--color-1);
    font-size: 1rem;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .5s;
}
.go-top:hover{
    background-color: var(--color-1);
    color: var(--color-2);
}
/*e:header*/

/*s:footer*/
.footer-banner{
    width: 100%;
    height: clamp(130px,18vw,340px);
}
.footer-banner-link {
    overflow: hidden;
}
.footer-banner-link a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: .7s;
}
.footer-banner-link a:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    transition: .5s;
}
.footer-banner-link a span{
    position: relative;
    z-index: 100;
    display: block;
    font-size: 1.75rem;
    color: var(--color-1);
    font-family: var(--k-main-font-2);
    opacity: 0;
    transition: .5s;
}
.footer-banner-link:hover a{
    scale: 1.05;
}
.footer-banner-link:hover a:after{
    opacity: 0.2;
}
.footer-banner-link:hover a span{
    opacity: 1;
}
.footer{
    background-color: var(--color-1);
    color: var(--color-2);
}
.footer .wrap{
    padding-top: clamp(97px, 5.7vw, 109px);
    padding-bottom: clamp(63px, 5vw, 91px);
    display: flex;
    justify-content: space-between;
}
.footer-logo{
    max-width: 150px;
    max-height: 100px;
    margin-bottom: 160px;
}
.footer-logo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.footer-title{
    font-family: var(--k-main-font-2);
    font-size: 1.25rem;
    font-weight: 400;
    padding-bottom: 26px;
}
.footer-info{
    font-family: var(--k-main-font-1);
    font-size: var(--f-size-3);
    line-height: 2.5;
}
.footer-info li:first-child{
    overflow-x: visible;
    width: 150%;
}

.footer-gnb{
    font-family: var(--k-main-font-2);
    color: var(--color-4);
    display: flex;
    padding-right: 20px;
}
.footer-gnb .footer-gnb-ul{
    display: flex;
    gap: clamp(17px,4vw,74px);
}
.footer-gnb .footer-gnb-a{
    padding: 10px;
    text-transform: uppercase;
    white-space: nowrap;
}

.footer-copyright{
    font-family: var(--k-main-font-1);
}
.footer-copyright{
    border-top: 1px var(--color-4) solid;
    text-align: center;
    padding-top: clamp(35px,10vw,49px);
    padding-bottom: clamp(43px,15vw,67px);
    font-size: var(--f-size-3);
}


@media(width < 1400px){
}
@media(width < 1024px){
    .header:not(.open){
        padding: 0;
    }
    .header:not(.open) .gnb{
        display: none;
    }
    .header .logo{
        max-width: 80px;
        max-height: 50px;
        width: max-content;
        height: max-content;
    }
    .header.open{
        padding-block: 4vw;
    }

    .header.open .wrap{
       .logo{
           top: unset;
           bottom: 135px;
           left: 50%;
           transform: translateX(-50%);
           padding: 0;
        }
        .gnb{
            grid-area: gnb;
            padding-top: 0;
        }
        .gnb-1d-li{
            grid-template-rows: auto;
        }
        .gnb-1d-a{
            padding: 5px 12px;
            height: 30px;
            transform: scaleX(0.9);
        }
        .sub-nav{
            width: 100%;
            height: 100%;
            grid-area: sub-nav;
        }
         .sub-nav-wrap {
            height: 100%;
            place-content: center;
            grid-template-columns: 100%;
            grid-template-rows: 1fr max-content;
            grid-template-areas: "sub-nav" "gnb";
            padding-inline:  clamp(0px,10vw,150px);
            padding-block: clamp(70px,6vh,100px);
            gap: 100px;
        }

    }
    .header .menu-btn{
        width: 25px;
        padding-top: 0;
    }
    .header .menu-btn .menu-btn-wrap{
        /*gap: 2px;*/
    }
    .header.open.intro{
        .gnb-1d-ul{
            justify-content: center;
        }
        .gnb-1d-ul li:nth-child(1){
            display: none;
        }
        .gnb-1d-ul li:nth-child(4){
            display: none;
        }
        .gnb-1d-a{
            transform: unset;
        }
    }

    .menu-btn {
        align-items: center;
    }
    .leaf-typo{
        display: none;
    }
    .footer-logo{
        display: none;
    }
    .footer .wrap{
        flex-direction: column;
    }
    .footer-gnb{
        padding-top: 35px;
    }
    .footer-gnb .footer-gnb-a{
        padding: 5px;
    }
    .footer-gnb .footer-gnb-a:last-child{
        padding-right: 0;
    }
    .footer-gnb-li:first-child a{
        padding-left: 0;
    }
    .footer-copyright{
        color: #000;
    }
    .footer-info li:first-child{
        overflow-x: hidden;
        width: auto;
    }
}
@media(width < 768px){
}
@media(width < 400px){
    .footer-gnb .footer-gnb-ul{
        gap: clamp(0px, 43vw, 1px);
        justify-content: space-between;
    }
    .gnb-1d-ul{
        column-gap: 0;
    }
}

/*include*/
.hero-swiper{
    height: 100vh;
}
.hero-swiper .swiper-slide{
    background-position: center;
}
.swiper-pagination{
    color: #fff;
    font-size: 1.5rem;
    font-family: var(--e-main-font-1);
    padding-bottom: 30px;
    transform: skewX(-25deg);
}

@media(width < 1400px){
}
@media(width < 1024px){
    .hero-swiper{
        height: 80vh;
    }
    .swiper-pagination {
        font-size: 1rem;
    }
}
@media(width < 768px){
}
@media(width < 576px){
}

/*common*/
.footer .wrap,
.section .wrap{
    padding-left: clamp(40px, 8vw, 150px);
    padding-right: clamp(40px, 8vw, 150px);
    font-family: var(--k-main-font-2);
}
@media(width < 1400px){
}
@media(width < 1024px){
    .mouse-down{
        display: none !important;
    }
    .footer .wrap,
    .section .wrap{
        padding-left: clamp(0px, 7vw, 100px);
        padding-right: clamp(0px, 7vw, 100px);
        }
}
@media(width < 768px){
}
@media(width < 576px){
}