/*테마 공용 css*/
/*프리텐다드*/
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
/*고운바탕, italiana*/
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang&family=Italiana&display=swap');

/*var*/
:root {
    --color-white: #fff;
    --color-black: #000;

    --color-1: #337BA3; /*파랑*/
    --color-2: #D9D9D9; /*룸프리뷰 보더*/
    --color-3: #AAA49A; /*reserve*/
    --color-4: #A1A1A1; /*푸터카피라이트*/


    --font-1: "pretendard";
    --font-2: 'Gowun Batang';
    --font-3: 'Italiana';

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

    --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-40: 2.5rem; /*40*/
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-2);
}

@media (width < 1400px) {
}

@media (width < 1024px) {
    html {
        font-size: 14px;
    }
}

@media (width < 768px) {
    html {
        font-size: 12px;
    }
}

@media (width < 576px) {
}

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

/*스크롤바 전체*/
::-webkit-scrollbar {
    width: 10px;
}

/*바*/
::-webkit-scrollbar-thumb {
    background-color: var(--color-1);
    border-radius: 100px;
    border: 1px solid var(--color-2)
}

/*배경*/
::-webkit-scrollbar-track {
    background-color: var(--color-2);
}


/*s: 공통부분 ---------------------------------------------------------------------------------------*/
/*헤더전체*/
.header {
    font-family: var(--font-3), var(--font-2), var(--font-1);
    position: fixed;
    display: flex;
    z-index: 100;
    width: 100%;
    padding-top: clamp(20px, 2.6vw, 52px); /*72-10-10*/
    padding-bottom: clamp(20px, 2.6vw, 52px); /*72-10-10*/
    transition: .3s all;
}

.header.down,
.header.m-open{
    padding-top: clamp(0px, 1.1vw, 20px);
    padding-bottom: clamp(0px, 1.1vw, 20px);
}

.header .wrap {
    display: flex;
    width: 100%;
}

.logo,
.gnb-1d-a,
.menu-btn {
    height: 60px; /*헤더 기본높이*/
}

/*로고*/
.logo {
    position: relative;
    margin-right: auto;
    padding: 10px;
    padding-left: 0;
    z-index: 10;
    max-width: 170px;
    max-height: 45px;
}

.logo a {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    margin: 0 auto;
}

/*gnb*/
.gnb {
    position: relative;
}

.gnb-1d-ul {
    height: 100%;
    display: flex;
    column-gap: clamp(0px, 6vw, 120px); /*128-8*/
    font-size: var(--f-size-16);
}

.gnb-1d-li {
}

.gnb-1d-a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 8px;
}

.gnb-2d-ul {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: .8s all;
    font-size: var(--f-size-14);
}

.gnb-2d-a {
    display: inline-block;
    padding: 0 8px;
    margin-bottom: 4px;
    transition: .5s all;
}

.gnb-2d-a:hover {
    color: var(--color-2);
}

/*메뉴버튼*/
.menu-btn {
    display: flex;
    margin-left: clamp(0px, 4.6vw, 87px);
    width: 60px;
    max-width: 100%;
}

.menu-btn .menu-btn-wrap {
    /*버튼스타일죽이기*/
    border: unset;
    padding: unset;
    background: unset;
    /**/
    padding: 10px 0;
    position: relative;
    transition: color 0.5s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.menu-btn .menu-btn-line {
    display: block;
    background-color: var(--color-black);
    height: 1px;
    width: 100%;
    transition: all 0.5s;
}

.header:hover {
    background-color: var(--color-white);
}

.header:hover .gnb-2d-ul {
    opacity: 1;
    pointer-events: auto;
    max-height: 300px;
}

.header:hover .menu-btn .menu-btn-line:first-child {
    transform: rotateZ(-18deg) translateY(5px);
}

.header:hover .menu-btn .menu-btn-line:last-child {
    transform: rotateZ(18deg) translateY(-5px);
}

/*스크롤탑*/
.side {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 95;
}

.go-top {
    width: 50px;
    height: 50px;
    border: 1px solid var(--color-1);
    border-radius: 50%;
    background-color: var(--color-1);
    color: var(--color-2);
    font-size: 1rem;
    padding: 15px;
    transition: .5s all;
}

.go-top:hover {
    background-color: var(--color-white);
    color: var(--color-1);
}

/*e:header---------------------------------------------------------*/

/*s:footer---------------------------------------------------------*/
.footer {
    font-family: var(--font-1);
}

.footer .wrap {
    padding-top: clamp(54px, 6.7vw, 127px);
    padding-bottom: clamp(54px, 6.7vw, 127px);
    display: flex;
    flex-direction: column;
    gap: var(--f-size-20);
    align-items: end;
    text-align: end;
}

.footer-title {
    font-size: var(--f-size-24);
}

.footer-info ul,
.footer-copyright {
    display: flex;
    flex-direction: row;
    font-size: var(--f-size-16);
    font-weight: 300;
}
.footer-copyright {
    color: var(--color-4);
}

.footer-info ul li:before,
.footer-copyright li:before {
    content: "|";
    margin-left: 8px;
    margin-right: 8px;
}

.footer-info ul li:first-child:before,
.footer-copyright li:first-child:before {
    content: "";
    margin-right: unset;
}


@media (width < 1400px) {
}

@media (width < 1024px) {
    .header{
        background-color: unset;
        .gnb{
            .gnb-1d-ul{
                display: none;
            }
            .gnb-2d-ul {
                opacity: unset;
                pointer-events: unset;
                max-height: unset;
            }
        }
        .menu-btn{
            width: 14px;
            .menu-btn-wrap{
                gap: 4px;
            }
        }
    }
    .header:hover{
        background-color: unset;
        .gnb-2d-ul {
            opacity: unset;
            pointer-events: unset;
            max-height: unset;
        }
        .menu-btn{
            .menu-btn-line:first-child{
                transform: unset;
            }
            .menu-btn-line:last-child{
                transform: unset;
            }
        }
    }
    .header.m-open{
        height: 100dvh;
        background-color: var(--color-white);
        overflow-y: auto;
        .gnb{
            .gnb-1d-ul{
                height: auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 28px;
            }
            .gnb-1d-a{
                height: auto;
                font-size: var(--f-size-30);
            }
            .gnb-2d-ul{
                display: flex;
                flex-wrap: wrap;
                font-size: var(--f-size-20);
                column-gap: 10px;
                row-gap: 5px;
            }
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding-block: 0;
            padding-inline: 50px;
            display: flex;
            align-items: center;
        }
        .menu-btn{
            .menu-btn-line:first-child{
                transform: rotateZ(-18deg) translateY(2.5px);
            }
            .menu-btn-line:last-child{
                transform: rotateZ(18deg) translateY(-2.5px);
            }
        }
    }
    .footer{
        .footer-info ul{
            flex-wrap: wrap;
            justify-content: end;
        }
        .footer-info li:nth-child(2)::before{
            display: none;
        }
    }

}
@media (width < 768px) {
}

@media (width < 400px) {
    .footer{
        .footer-info ul,
        .footer-copyright {
            font-size: var(--f-size-14);
        }
        .footer-info li:before,
        .footer-copyright li:before{
            margin-left: 2px;
            margin-right: 2px;
        }
        .footer-info li:nth-child(4)::before{
            display: none;
        }
    }

}

/*include-----------------------------------------------------------------------*/
.hero-slider .hero-swiper::after {
    content: "";
    position: absolute;
    z-index: 10;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20vh; /* 그라데이션 높이 조절 */
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 255));
    pointer-events: none; /* 클릭 방해 방지 */
}
.hero-slider {
    position: relative;
    .hero-swiper {
        height: 100vh;
    }
    .hero-typo {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }
    .hero-typo .wrap{
        position: relative;
        width: 100%;
        height: 100%;
    }
    .hero-typo .wrap div{
        position: absolute;
        bottom: clamp(0px, 7.6vw, 145px);
    }
}

@media (width < 1400px) {
}

@media (width < 1024px) {
    .hero-slider{
        .hero-swiper {
            height: 70dvh;
        }
    }
}

@media (width < 768px) {
}

@media (width < 576px) {
}

/*common------------------------------------------------------------------------*/

.header .wrap,
.footer .wrap,
.section .wrap,
.main-hero-typo .wrap{
    padding-left: clamp(0px, 9.7vw, 186px);
    padding-right: clamp(0px, 9.7vw, 186px);
}

.fp-scroller{
    transition: linear .2s transform !important;
}


@media (width < 1400px) {
}

@media (width < 1024px) {
    .hero-typo{
        display: none;
    }

}

@media (width < 768px) {
}

@media (width < 400px) {
    .header .wrap,
    .footer .wrap,
    .section .wrap,
    .main-hero-typo .wrap{
        padding-inline: 6vw;
    }
}