/*테마 공용 css*/
/*프리텐다드*/
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
/*Lexend Deca */
.lexend{
    font-family: 'Lexend Deca';
}


/*var*/
:root{
    --color-white: #ffffff; /*화이트*/
    --color-black: #000000;

    --color-2: #D9D9D9; /* 서브용 회색 */
    --color-3: #8E8E8E; /* 서브용 진 회색 */

    --font-1 : 'Pretendard';
    --font-2 : '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-40: 2.5rem; /*40*/
}

::selection{
    background-color: var(--color-2);
    color: var(--color-black);
}
::-webkit-scrollbar{
    width: 6px;
}
::-webkit-scrollbar-thumb {
    background-color: var(--color-1);
    border-radius: 100px;
    border: 1px solid var(--color-2);
}
::-webkit-scrollbar-track{
    padding: 3px;
    background-color: var(--color-2);
}

html{
    font-size: 16px;
}
body{
    font-family: var(--font-1);
}
@media(width < 1400px){
}
@media(width < 1024px){
    html{
        font-size: 14px;
    }
}
@media(width < 768px){
    html{
    }
}
@media(width < 576px){
}
/* s: commons*/
.layout1{
    max-width: 1920px;
    margin-inline: auto;
}
.wrap{
    padding-inline: clamp(20px,4.5vw,82px);
}
.section-sub{
    color: var(--color-2);
    font-family: var(--font-2);
    font-size: clamp(12px,2vw,24px);
    font-weight: 300;
}
.section-title{
    color: var(--color-black);
    font-family: var(--font-2);
    font-size: clamp(12px,5vw,60px);
    font-weight: 500;
}
.page{
    position: absolute; z-index: 10;
    bottom: clamp(40px, 3.5vw ,60px);  left: 0;
    display: flex; gap: clamp(10px,2vw,30px); align-items: center; font-weight: 300;
    .current{
        width: var(--f-size-20);
    }
    .deco-bar{
        width: 109px ;
        height: 1px;
        background-color: var(--color-white);
    }
    .length{ }
}
@media(width > 1023px){
    .wrap2{
        padding-inline: clamp(0px,12.5vw,231px);
    }
    .wrap3{
        padding-inline: clamp(0px,10.5vw,200px);
    }
    .wrap4{
        padding-inline: clamp(0px,8.5vw,155px);
    }
}
@media(width < 1024px){
    .layout1{
        max-width: 100%;
        margin-inline: 0;
    }
}
@media(width < 768px){
}
@media(width < 400px) {
    .wrap {
        padding-inline: 5vw;
    }

}
/*pc에서만*/
@media(width > 1023px){
    .m-box{
        display: none !important;
    }
    .sm-box{
        display: none !important;
    }
}
/*모바일에서만*/
@media(width < 1024px){
    .p-box{
        display: none !important;
    }
}
@media(width > 399px){
    .sm-box{
        display: none !important;
    }
}

header{
    --hd-primary: var(--color-white);
    --hd-secondary: var(--color-black);
    position: fixed; top: 0; left: 0;
    width: 100%;
    z-index: 100;
    color: var(---hd-primary);
    font-family: var(--font-2);
    padding-top: clamp(32px,7vw,81px);
    transition: .5s;
    .logo1 img, .logo2 img{
        transition: .4s;
    }
    .logo2{
        display: none;
        filter: invert(1);
    }
    .wrap{
        display: flex; position: relative;
        justify-content: space-between;
    }

    /*로고*/
    .logo{
        position: relative; z-index: 10;
        display: flex; justify-content: start; align-items: center; align-self: start;
    }
    .logo a{
        position: relative; z-index: 1;
    }
    .logo img{
        width: 100%;
        max-height: clamp(50px, 8vw ,100px);
        object-fit: contain;
    }
    .logo svg{
        fill: var(--hd-primary);
    }

    .family-site{
        position: absolute; left: 15px; top: 130%;
        color: var(--hd-primary); white-space: nowrap;  transition: .5s;
        a{
            display: block; padding-block: 4px; position: relative; transition: .5s;
            /*&::after{*/
            /*    content: ''; position: absolute;*/
            /*    bottom:2px; left: 0;*/
            /*    width: 0; height: 2px;*/
            /*    background-color: var(--color-white);*/
            /*    transition: width .3s;*/
            /*}*/
            /*&:hover::after{*/
            /*    width: 100%;*/
            /*}*/
            &:hover{
                transform: translateX(6px);
            }
            &:active{
                animation: flash 2s infinite;
            }
        }
    }
    @keyframes flash {
        0% {opacity: 1;}
        50% {opacity: 0.5;}
    }

    .logo:not(.active) .family-site{
        opacity: 0; pointer-events: none; transform: translateY(-10px);
        a{
            margin-bottom: 5px;
        }
    }
    .logo.active .family-site{


    }



    #family-arrow svg{ width: 24px; height: 24px;}
    #family-arrow-down{
        visibility: hidden;
    }

    /*gnb*/
    .gnb{
        position: relative; width: 100%; color: var(--hd-primary);
        .gnb-1d-ul{
            position: absolute; left:50%; top: 50%; transform: translateX(-50%) translateY(-50%);
            display: flex; gap: clamp(30px,5vw,70px);
            .gnb-1d-li{
                transition: .4s;
            }
            .gnb-1d-wrap{
                display: flex;
                justify-content: space-between;
            }
            .gnb-1d-a{
                font-size: 16px;
                position: relative;
                z-index: 1;
                text-transform: uppercase;
                &::before{
                    content: '';
                    top: -10px; left: -10px;
                    right: -10px; bottom: -10px;
                    position: absolute;
                }
                &::after{
                    content: ''; position: absolute;
                    top: 50%; left: 0; transform: translateY(-50%);
                    width: 0; height: 2px;
                    background-color: var(--hd-primary);
                    transition: width .3s;
                }
            }
        }
        .gnb-2d-ul{
            position: absolute;
            transition: .4s;
            opacity: 0;
            pointer-events: none;
            font-size: 16px;
            padding-top: 0.6rem;
            .gnb-2d-li{
                font-family: var(--font-1); width: auto; white-space: nowrap; transition: .6s;
                padding-bottom: 6px;
                margin-block: 4px;
            }
        }
        /*호버*/
        .gnb-1d-ul .gnb-1d-li.active{
            .gnb-1d-a::after{
                width: 100%;
            }
            .gnb-2d-ul{
                opacity: 1;
                pointer-events: auto;
                .gnb-2d-li{
                    margin: 0;
                }
            }
        }
    }
    .reservation{
        font-family: var(--font-1); display: flex; align-items: center; color: var(--hd-primary);
        a{
            white-space: nowrap; border: 1px solid var(--hd-primary); outline: 2px solid transparent;
            display: flex; justify-content: center; align-items: center; gap: 4px;
            padding: clamp(8px, 1.5vw, 19px)  clamp(17px,2vw, 31px);
            transition: all .1s;
            i{
                font-size: 0.6em;
            }
        }
        a:hover{
            background-color: var(--hd-primary);
            color: var(--hd-secondary);
            outline: 2px solid var(--hd-primary);
            outline-offset: 4px;
        }
        a:active{
            outline: 2px solid transparent;
            outline-offset: 10px;
        }
    }
    .btn-wrap{
        color: var(--hd-primary);
    }

    &.down{
        padding-block: 12px;
    }
    &.black{
        --hd-primary: var(--color-black);
        --hd-secondary: var(--color-white);
        img.logo1{
            display: none;
        }
        img.logo2{
            display: block;
        }
        svg{
        }
        .gnb{
            .gnb-1d-a::after{
            }
        }
        .reservation a{
            &:hover{
            }
            &:active{
            }
        }
        .btn-wrap{
        }
    }

    &.down.black{
        &::before{
            transition: all 1s;
            content: ''; position: absolute; top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: var(--hd-secondary); transition: all .5s;

        }
        &:has(.active){
            &::before{
                height: 420px;
            }
        }
    }

}

.side{
    opacity: 0; pointer-events: none; transition: .5s;
    position: fixed; z-index: 100;
    bottom: 50px; right: 50px;
    button{
        background-color: var(--color-white);
        border-radius: 50%; padding: clamp(8px,5vw,8px);
        width: 60px; height: 60px;
        border: 1px solid var(--color-1);
        outline: 1px solid var(--color-white);
        aspect-ratio: 1/1; transition: .4s;
    }
    button:hover{
        background-color: var(--color-1);
        color: var(--color-white);
    }
    &.down{
        opacity: 1; pointer-events: auto;
    }
}

@media(width > 1023px){
    header{
        .gnb{
            background-image: none !important;
        }
        .logo::before{
            content: ''; position: fixed; top: 0; left: 0; z-index: -1; width: 30vw; height: 100vh; background: linear-gradient(to right, var(--hd-secondary), transparent);
            opacity: 0; pointer-events: none;  transition: all 1s;
        }
        .logo.active::before{
            opacity: 0.5;
        }
        &.black{
            .logo {
                &.active::before {
                    opacity: 0;
                }
            }
        }
    }
    .side{
    }
}
@media(width < 1024px){
    header{
        z-index: 110;
        .wrap{
            justify-content: space-between;
        }
        .close{
            color: var(--color-white);
        }
        .gnb{
            position: fixed; top: -100%; left: 0; z-index: 1000; width: 100vw; height: 100vh;
            background-size: cover; background-position: center; background-repeat: no-repeat;
            pointer-events: none; opacity: 0; transition: .8s;
            .gnb-1d-ul {
                top: 0; left: 0; width: 100%;  height: 100%; padding-top: 21vh;
                flex-direction: column; align-items: center; gap: 30px;
                background-color: rgba(0, 0, 0, 0.50); opacity: 0; transform: translate(0);
                transition: .8s;
                .gnb-1d-li {
                    width: max-content; text-align: center;
                    .gnb-1d-a {
                        font-size: 1.8rem; color: var(--color-white);
                        &::after{
                            background-color: var(--color-white);
                        }
                    }
                    .gnb-2d-ul {
                        display: none;
                        pointer-events: none;
                        overflow: hidden;
                    }
                }
                .social {
                    margin-top: 50px;
                    display: flex;
                    gap: 20px;
                    align-items: center;
                    a {
                        width:  clamp(30px, 5vw, 40px); aspect-ratio: 1/1; border-radius: 50%;
                        background-color: var(--color-white); color: var(--color-black); border: 1px solid var(--color-white);
                        display: flex; justify-content: center; align-items: center; transition: all .4s;
                        svg {
                            width: 1rem;
                            aspect-ratio: 1/1;
                        }
                        &:hover{
                            transform: translateY(-2px);
                        }
                    }
                }
            }
            .close {
                position: absolute;
                top: 0;
                right: 0;
                padding: 20px 30px;
                font-size: 2em;
                cursor: pointer;
            }
            &.open {
                pointer-events: auto; opacity: 1; top: 0;
                .gnb-1d-ul {
                    opacity: 1;
                }
            }
        }
        .reservation{
            a{
                border: none !important;
                outline: none !important;
                background-color: transparent !important;
                color: var(--hd-primary) !important;
                padding-inline: 0 !important;
                font-size: 40px;
                margin-top: 2px;
                flex-direction: column;
                gap: 0;
                p{
                    font-size: 0.8rem;
                    display: none;
                }
            }
        }
        .logo{
            margin-inline: auto;
            position: absolute; top: 0;
            left: 50%; transform: translateX(-50%);
            img{
                max-height: 55px;
            }
            #family-arrow{
                position: absolute; left: 100%; top: 20px;
                svg{
                    width: 18px;
                }
            }
            .family-site{
                left: 0;
            }
        }
        .btn-wrap{
            font-size: 30px;
            button{
                position: relative;
            }
            button::before{
                content: '';
                position: absolute;
                top: -10px; left: -10px;
                right: -10px; bottom: -10px;
            }
        }
    }
    .side{
        bottom: 30px; right: 30px;
        button{
            width: 40px; height: 40px;
        }
    }
}


/*e:header*/
.splide__slide.is-prev{
    transition-delay: .2s !important;
}
.hero-slider{
    color: var(--color-white); font-family: var(--font-2); position: relative;
    .splide__slide{
        height: 100dvh;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .typo{
        position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        text-align: center;
        pointer-events: none;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
        .title{
            margin-top: 1.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            h2{
                color: var(--color-white);
                font-family: var(--font-2);
                font-size: 4.5rem;
                pointer-events: auto;
                line-height: 1;
            }
        }
        #hero-title3{
            pointer-events: auto !important;
        }
        .deco-down{
            margin-top: var(--f-size-20);
            margin-inline: auto;
            pointer-events: auto;
            animation: down 1s infinite;
        }
    }
    .go-reserve{
        position: absolute; z-index: 10; bottom: 0;
        left: 50%; transform: translateX(-50%);
        display: grid; grid-template-columns: max-content max-content;
        font-weight: 500; background-color: rgba(255, 255, 255, 0.80); color: var(--color-black);
        .select-box{
            display: flex; justify-content: center; align-items: center;
            padding-block: clamp(28px, 4vw, 45px)  clamp(20px, 6vw, 38px);
            &>div{
                border-right: 1px solid var(--color-black);
                padding-inline: clamp(20px,4.5vw,40px);
                label{
                    width: clamp(80px, 20vw, 270px);
                    display: block; padding-left: 16px;
                    padding-bottom: clamp(5px,1.2vw,14px); border-bottom: 1px solid var(--color-black);  font-weight: 400;
                }
                input, select{
                    width: clamp(80px, 20vw, 270px);
                    padding: 10px 16px; outline: 1px solid transparent; border: 1px solid transparent;
                }
            }
        }
        .go-reserve-submit-wrap{
            padding-block: clamp(25px,6vw,32px) 26px;
            padding-inline: 54px;
            width: 100%; height: 100%;
            button{
                font-size: 20px; font-weight: 500; line-height: 1;
                height: 100%; aspect-ratio: 1/1; border-radius: 50%; border: 1px solid var(--color-black);
                transition: .5s;
            }
            button:hover{
                background-color: var(--color-black);
                color: var(--color-white);
            }
        }
    }
}
@media(width > 1023px){
    /*가로형에서만*/
}
@media(width < 1400px){
}
@media(width < 1024px){
    .hero-slider{
        .page{
            bottom: clamp(160px,40vw,210px);
            left: 50%;
            transform: translateX(-50%);
            .deco-bar {
                width: 41px;
            }
        }
        .typo{
            .title{
                height: unset;
                h2{
                    margin-bottom: 1.5rem;
                    font-size: 2.6rem;
                    line-height: 1;
                }
            }
            #hero-title3{
                font-size: 0.8em;
            }
        }
        .go-reserve{
            width: 100%; grid-template-columns: auto auto;
            .select-box{
                &>div{
                    label{
                        padding-left: 0;
                    }
                    input, select{
                        padding: 10px 0; overflow: hidden; text-overflow: ellipsis;
                    }
                }
            }
            .go-reserve-submit-wrap{
                padding-inline: 10px; text-align: center;
                button{
                    font-size: 12px;
                }
            }
        }
    }
}
@media(width < 768px){
}
@media(width < 400px){
    .hero-slider{
        .splide__slide{}
        .page{
        }
        .typo{
            .title{
                h2{
                    font-size: 2.4rem;
                }
            }
            .deco-bar{
                height: 62px;
            }
        }
    }
}


/*s:footer*/
.footer{
    color: var(--color-white);
    .ft-social{
        padding-bottom: clamp(20px, 4vw, 60px);
        .wrap>div{
            display: flex; gap: clamp(20px, 4vw, 40px); justify-content: end;
            a{
                background-color: var(--color-1);
                border-radius: 50%; width: 70px; aspect-ratio: 1/1;
                display: flex; justify-content: center; align-items: center;
                transition: all .4s;
                svg{
                    width: 30px; height: 30px;
                    fill: var(--color-white);
                }
            }
            a:hover{
                transform: translateY(-6px);
                box-shadow: 0 10px 6px 0 rgba(0, 0, 0, 0.2);
            }
        }
    }
    .ft-main{
        background-color: var(--color-1); padding-block: clamp(100px,20vw,120px) 94px;
        .wrap{
            .logo{grid-area: logo;}
            .family{grid-area: family;}
            .gnb{grid-area: gnb;}
            .tel{ grid-area: tel;}
            .info{grid-area: info;}
            .copyright{grid-area: copyright;}
            display: grid;
            grid-template-columns: auto max-content;
            grid-template-areas: "logo family"
                                 "tel gnb"
                                "info gnb"
                                "copyright copyright";
            .logo{
                a{
                    display: inline-block; width: max-content;
                    img{ height: 150px; }
                }
            }
            .family{
                align-self: end; font-size: 20px;
                position: relative;
                .family-btn{
                    border-bottom: 1px solid var(--color-white); padding: 9px 14px;
                    display: flex; gap: clamp(18px, 7vw, 119px);
                    width: max-content; cursor: pointer;
                    i{
                        transition: .4s;
                    }
                }
                ul{
                    display: none;
                    a{
                        display: inline-block;
                        width: 100%; height: 100%;
                    }
                }
                &.active .family-btn i{
                    transform: rotateZ(180deg);
                }
                &.active ul{
                    display: block;
                    position: absolute; z-index: 10;
                    background-color: #000000cc;
                    bottom: 100%; left: 0; width: 100%;
                    text-align: center;
                    color: var(--color-white);
                    font-size: 0.8em; font-weight: 400;
                    transition: .4s;
                    li{
                        padding-block: 8px;
                        transition: .4s;
                        &:not(:last-child){
                            border-bottom: 1px solid #00000022;
                        }
                    }
                    li:hover{
                        background-color: #eeeeee66;
                    }
                }
            }
            .tel{
                font-family: var(--font-2); font-weight: 500; font-size: 32px;
                margin-top: clamp(60px, 10vw,75px);
            }
            .gnb{
                align-self: end; font-weight: 600; font-family: var(--font-2);
                ul{
                    padding-top: 30px;
                    margin-top: auto;
                    display: flex; flex-direction: column; gap: 30px;
                }
                a{
                    position: relative;
                }
                a::after{
                    content: ''; position: absolute; top:50%; left:0; transform:translateY(-50%);
                    width: 0; height: 2px; background-color: var(--color-white);
                    transition: width .3s;
                }
                a:hover::after{
                    width: 100%;
                }
            }
            .info{
                font-weight: 300; font-size: 20px; line-height: 1.7; margin-top: clamp(40px, 6vw, 60px);
                .title{
                    font-weight: 600; font-size: 24px; margin-bottom: clamp(20px, 4vw, 30px);
                }
                .info-mid{
                    display: flex; gap: clamp(8px, 0.6vw, 40px); white-space: nowrap;
                }
            }
            .copyright{
                font-weight: 300; font-size: 12px; display: flex; gap: 0.4em;
                margin-top: clamp(30px,5vw,50px);
                a:not(:last-child):after{
                    content: ' | '; margin-left: 0.4em;
                }
            }
        }
    }
}
@media(width > 1023px){
    .footer{
        .ft-main{
            .wrap{
            }
        }
    }
}
@media (width < 1200px) {
    .footer{
        .ft-main {
            .wrap {
                grid-template-columns: 1fr max-content;
                grid-template-areas: "logo gnb"
                                     "tel family"
                                     "info info"
                                     "copyright copyright";
            }
        }
    }

}
@media(width < 1024px){
    .footer{
        .ft-social{
            .wrap>div{
                a{
                    width: 30px;
                    svg{
                        width: 10px; height: 10px;
                    }
                }
            }
        }
        .ft-main {
            .wrap{
                grid-template-columns: 1fr max-content;
                grid-template-areas: "logo logo"
                                     "gnb gnb"
                                     "tel family"
                                     "info info"
                                     "copyright copyright";
                .logo{
                    /*text-align: center;*/
                    a img{
                        max-height: 80px;
                    }
                }
                .gnb ul{
                    flex-direction: row; gap:unset; justify-content: space-around; margin-top: 40px;
                    font-size: 12px;
                }
                .tel{
                    font-size: 20px;
                }
                .family{
                    font-size: 12px;

                }
                .info{
                    line-height: 2; font-size: 12px;
                    .title{
                        font-size: 20px;
                    }
                    .content .info-mid{
                        gap: 0; flex-wrap: wrap; justify-content: flex-start;
                        /*padding-block: 10px;*/
                        &>div{
                            margin-right: 20px;
                        }
                        &>div:last-child{
                            flex-basis:100%;
                        }
                        &>.account{
                            order: 1;
                            width: 100%;
                        }
                        &>.name{
                            order: 3;
                        }
                        &>.number{
                            order: 4;
                        }
                        &>.mail {
                            order: 5;
                        }
                    }
                }
            }
        }
    }
}
@media(width < 768px){
}
@media(width < 400px){
    .footer{
        .ft-main {
            .wrap{
                /*grid-template-areas: "logo logo"*/
                /*                     "gnb gnb"*/
                /*                     "tel tel"*/
                /*                     "info info"*/
                /*                     "family family"*/
                /*                     "copyright copyright";*/
                .family{
                    width: 100%;
                    .family-btn{
                        margin-top: 30px;
                        width: 100%;
                        justify-content: space-between;
                        padding-inline: 10px 4px;
                        gap: 12px;
                    }
                }
            }
        }
    }
}

/*e:footer*/
/*s:include*/
.title-wrap{
    text-align: center; font-family: var(--font-2);
    .sub-title{
        text-transform: uppercase;
        color: var(--color-2); font-size: clamp(12px, 2.5vw,24px); font-weight: 300;
    }
    .section-title{
        font-size: clamp(30px, 3vw, 60px); font-weight: 500;
        p{
            word-break: auto-phrase;
        }
    }
}
main{
    .hero-slider{
        margin-bottom: clamp(84px, 15vw, 200px);
    }
    padding-bottom: clamp(120px, 17vw, 220px);
}