/*테마 공용 css*/
/*프리텐다드*/
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
/*  font-family: "Italiana", sans-serif;*/
/*font-family: "Figtree", sans-serif;*/


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

    --color-1: #4D4638; /* 타이틀타이포 컬러 */
    --color-2: #FAF8F0; /*하단섹션 배경*/
    --color-3: #B49986; /*푸터 배경*/
    --color-4: #D7D3D0; /*푸터 보더*/
    --color-5: #FAFAFA; /*푸터  카피라이트 줄 글자*/
    --color-6: #FAFAFA; /*푸터  카피라이트 줄 글자*/
    --color-7: #79716B; /*푸터 모바일 카피라이트 줄 글자*/

    --font-1 : 'Pretendard';
    --font-2 : 'Italiana';
    --font-3 : 'Figtree';


    --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-3);
    color: var(--color-2);
}
::-webkit-scrollbar{
    width: 6px;
}
::-webkit-scrollbar-thumb {
    background-color: var(--color-1);
    border-radius: 100px;
}
::-webkit-scrollbar-track{
    padding: 3px;
    background-color: var(--color-7);
}

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.8vw,96px);
}
.splide__slide{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.splide__slide.is-prev{
    transition-delay: .2s !important;
}
.section-title{
    font-size: clamp(36px, 3.8vw, 72px);
    font-family: var(--font-2);
    color: var(--color-1);
    line-height: 1;
}
.section-sub{
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
}
@media(width < 1400px){
}
@media(width < 1024px){
    .layout1{
        max-width: 100%;
        margin-inline: 0;
    }
    .section-sub{
        font-size: 14px;
    }
}
@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{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    color: var(--color-white);
    font-family: var(--font-2);
    padding-top: clamp(61px,4vw,72px);
    padding-bottom: calc(clamp(61px,4vw,72px)/3);
    transition: .8s;
    &.down{
        .logo{
            img{
                max-height: 45px;
            }
        }
        background-color: var(--color-3);
        padding-top: clamp(15px,1.6vw,25px);
        padding-bottom: calc( clamp(15px,1.6vw,25px) / 4);
    }
    .wrap{
        display: flex;
        justify-content: space-between;
    }
    /*gnb*/
    .gnb{
        .gnb-1d-ul{
            display: flex;
            gap: clamp(0px,70vw,130px);
            .gnb-1d-li{
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: auto 0fr;
                transition: .4s;
            }
            .gnb-1d-li.active{
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: auto 1fr;
            }
            .gnb-1d-wrap{
                display: flex;
                justify-content: space-between;
            }
            .gnb-1d-a{
                font-size: 16px;
                position: relative;
                z-index: 1;
                &::before{
                    content: '';
                    top: -10px; left: -10px;
                    right: -10px; bottom: -10px;
                    position: absolute;
                }
            }
        }
        .gnb-2d-ul{
            width: 0; max-height: 0;
            transition: .8s;
            opacity: 0;
            pointer-events: none;
            font-size: 16px;
            margin-top: 0.6rem;
            .gnb-2d-li{
                margin-bottom: 4px;
                white-space: nowrap;
                width: max-content;
            }
        }
        .gnb-1d-li.active .gnb-2d-ul{
            max-height: 200px;
            opacity: 1;
            overflow: visible;
            pointer-events: auto;
        }
    }

}


/*로고*/
.logo{
    position: relative;
    margin-right: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    z-index: 10;
    align-self: start;
}
.logo a{
    position: relative;
    z-index: 1;
    &::before{
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
    }
}
.logo img{
    width: 100%;
    max-height: 55px;
    object-fit: contain;
    object-position: left top;
    transform: translateY(-20%);
}




/*스크롤탑*/

@keyframes reserve-clicked {
    0%{
        outline: 2px solid  #FFEEB100;
        outline-offset: 0;
    }
    60%{
        outline: 2px solid  #FFEEB1ff;
        outline-offset: 6px;
    }
    100%{
        outline: 2px solid  #FFEEB100;
        outline-offset: 0;
    }
}
.side{
    position: fixed;
    right: 0;
    bottom: clamp(0px, 3.8vw, 73px);
    z-index: 100;
    .go-reserve{
        display: block;
        background-color: #FFEEB1;
        border-radius: 50%;
        overflow: hidden;
        width: clamp(68px,8.4vw,160px);
        aspect-ratio: 1/1;
        padding: 6%;
        position: relative;
        transition: .3s;
        &:hover{
            animation: reserve-clicked 1s infinite;
        }
        img{
            width: 100%;
            height: 100%;
            animation: rotating 18s linear infinite;
        }
        .arrow{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 1.2rem;
        }
    }
}

@media(width < 1400px){
}
@media(width < 1024px){
    header{
        .gnb{
            position: fixed;
            top: 0; left: 0; z-index: 1000;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            opacity: 0;
            transition: opacity .3s, background-color .3s;

            .gnb-1d-ul {
                background-color: var(--color-3);
                padding-top: 149px;
                padding-inline: 5vw;
                flex-direction: column;
                gap: 16px;
                width: 60%;
                height: 100%;
                transition: .5s transform;
                transform: translateX(-100%);

                .gnb-1d-li {
                    display: grid;
                    grid-template-columns: 100%;
                    grid-template-rows: 1fr 0fr;
                    transition: .4s;
                    cursor: pointer;

                    .gnb-1d-a {
                        font-size: 1.8rem;
                        width: 100%;
                        display: flex;
                        align-self: center;
                        pointer-events: none;

                        .m-box {
                            display: inline-block;
                            margin-left: auto;
                            font-size: 0.8em;

                            i {
                                display: inline-block;
                                transition: .3s;
                            }
                        }
                    }
                    .gnb-2d-ul {
                        overflow: hidden;
                    }
                    &.clicked {
                        grid-template-rows: auto 1fr;

                        .gnb-1d-a {
                            pointer-events: auto;
                        }

                        .m-box i {
                            transform: rotateZ(90deg);
                        }

                        .gnb-2d-ul {
                            opacity: 1;
                            pointer-events: auto;
                            width: max-content;
                            font-size: 18px;
                            padding-left: 10px;
                            height: auto;
                            max-height: 200px;
                        }
                    }
                }

                .social {
                    margin-top: 2.5rem;
                    display: flex;
                    gap: 1.5rem;
                    align-items: center;

                    a {
                        svg {
                            width: 1rem;
                            aspect-ratio: 1/1;
                        }
                    }
                }
            }
            .close {
                position: absolute;
                top: 0;
                right: 0;
                padding: 20px 30px;
                font-size: 2em;
                cursor: pointer;
            }

            &.open {
                background-color: #00000088;
                pointer-events: auto;
                opacity: 1;
                .gnb-1d-ul {
                    transform: translateX(0);
                }
                .gnb-1d-li:first-child {
                    grid-template-rows: auto 0fr !important;
                    a {
                        pointer-events: auto !important;
                    }
                }
            }
        }
        .logo{
            width: 64px;
            margin-inline: auto;
            transform: translateX(16%);
        }
        .btn-wrap{
            font-size: 20px;
            button{
                position: relative;
            }
            button::before{
                content: '';
                position: absolute;
                top: -10px; left: -10px;
                right: -10px; bottom: -10px;
            }
        }
    }
    .side .go-reserve .arrow{ font-size: 1.5rem;}
}
@media(width < 768px){
    header .gnb .gnb-1d-ul{ width: 80% !important;}
}
@media(width < 400px){
}

@media(width > 1023px){
}


/*e:header*/

/**/
@keyframes down {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(10px);
        opacity: 0.5;
    }
}
.hero-slider{
    color: var(--color-white); font-family: var(--font-3); position: relative;
    .splide__slide{
        height: 100dvh;
    }
    .page{
        z-index: 10;
        position: absolute;
        bottom: clamp(40px, 3.5vw ,60px);  left: 0;
        display: flex; gap: 0.8rem;
        align-items: center;
        .current{
            width: 0.8rem;
        }
        .deco-bar{
            width: 72px ;
            height: 1px;
            background-color: var(--color-white);
        }
        .length{ }
    }
    .typo{
        z-index: 10;
        position: absolute;
        text-align: center;
        width: 100%;
        height: 100%;
        top: 35%; left: 0;
        pointer-events: none;
        .deco-bar{
            /*96px*/
            height: 6rem;
            background-color: var(--color-white);
            width: 1px;
            margin-inline: auto;
            margin-top: 64px;
            margin-bottom: 32px;
        }
        .ps-name{
            font-size: 1.2rem;
            letter-spacing: 2.2px;
        }
        .title{
            margin-top: 1.5rem;
            height: 7.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            h2{
                color: var(--color-white);
                font-family: var(--font-2);
                font-size: 3.75rem;
            }
        }
        .deco-down{
            margin-top: 0.5rem;
            margin-inline: auto;
            animation: down 1s infinite;
        }
    }
}
@media(width > 1023px){
    /*가로형에서만*/
}
@media(width < 1400px){
}
@media(width < 1024px){
    .hero-slider{
        .splide__slide{}
        .page{
            left: 50%;
            transform: translateX(-50%);
        }
        .typo{
            .title{
                height: unset;
                h2{
                    font-size: 2.6rem;
                    line-height: 1;
                }
            }
            .deco-bar{
                height: 62px;
            }

        }
    }
}
@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{
    background-color: var(--color-3);
    color: var(--color-white);
    font-size: var(--f-size-2);
    font-weight: 300; line-height: 1.5; display: grid;
    position: relative; z-index: 3;

    a{
        transition: 0.4s;
        &:hover{
            color: var(--color-1);
        }
    }

    .ft1{ grid-area: ft1; border-bottom: 1px solid var(--color-4); }
    .ft2{ grid-area: ft2; }
    .ft3{
        grid-area: ft3;
        padding-top: clamp(44px,4vw,64px); padding-bottom: clamp(60px,4.4vw,88px); padding-left: clamp(31px,4.2vw,80px);
        border-left: 1px solid var(--color-4);
        .ft-gnb-title{
            font-family: var(--font-3);
            margin-bottom: clamp(30px,2.1vw,39px);
        }
        .ft-gnb-ul{
            font-size: 3.5rem;
            font-family: var(--font-2);
            line-height: 1.15;
            display: flex; flex-direction: column; gap: 1.2rem
        }

    }
    /*업체정보*/
    .ft4{
        grid-area: ft4;
        padding-top: clamp(44px,4vw,64px); padding-left: clamp(31px,4.2vw,80px);
        border-left: 1px solid var(--color-4);
        .ft-contact-title{
            font-family: var(--font-3);
            margin-bottom: clamp(30px,2.5vw,48px);
        }
    }

    /*아랫줄, 카피라이트*/
    .ft5{
        color: var(--color-6);
        font-size: 12px;
        grid-area: ft5; padding-block: clamp(24px,2.6vw,48px);  padding-inline: clamp(96px,4.8vw,20px);
        border-top: 1px solid var(--color-4);
        .copyright{
            a:not(:last-child)::after{
                content: '|';
                margin-left: 0.5rem;
            }
        }
    }
    .ft6{
        color: var(--color-6);
        font-size: 12px;
        grid-area: ft6;
        padding-block: clamp(24px,2.6vw,48px); padding-left: clamp(31px,4.2vw,80px);
        border-top: 1px solid var(--color-4); border-left: 1px solid var(--color-4);
        .reserve{ display: flex; gap: 3rem;  }
    }
    .ft7{
        color: var(--color-6);
        font-size: 12px;
        grid-area: ft7;
        padding-block: clamp(24px,2.6vw,48px); padding-left: clamp(0px,4.5vw,85px);
        border-top: 1px solid var(--color-4); border-left: 1px solid var(--color-4);
        .sns{ display: flex; gap: 3rem; }
    }
}

@media(width < 1400px){
}
@media(width < 1024px){
    footer{
        .ft1{}
        .ft2{ border-left: 1px solid var(--color-4); border-top: 1px solid var(--color-4); }
        /*메뉴*/
        .ft3{
            padding-top: 124px;
            .ft-gnb-ul{font-size: 12px;}
        }
        .ft4{
            .logo{
                img{
                    width: 70px;
                }
                margin-bottom: 40px;
            }
            .ft-contact-title{ margin-bottom: 30px; }
            padding-top: 44px ;
            padding-bottom: 60px;
            border-left: none;
            padding-right: 4vw;
        }
        /*아래줄*/
        .ft5{
            .m-reserve{ font-size: 12px; margin-bottom: 0.5rem; display: flex; gap: 1rem; }
            .copyright{font-size: 10px;}
            padding-inline: 5vw; color: var(--color-7); white-space: nowrap; font-weight: 400;
        }
    }
}
@media(width < 768px){
}
@media(width < 440px){
    footer .ft2{ border-left: none; }
}
@media(width > 1023px){
    /*가로형에서만*/
    footer{
        grid-template-columns: minmax(0px,1fr) minmax(0px,1fr) minmax(0px,1fr) minmax(0px,1fr);
        grid-template-rows: clamp(50px, 5vw ,90px) auto auto;
        grid-template-areas:
        "ft1 ft1 ft1 ft1"
        "ft2 ft2 ft3 ft4"
        "ft5 ft5 ft6 ft7"
        ;
    }
}
@media(width < 1024px){
    /*모바일에서만*/
    footer{
        grid-template-columns: minmax(0px,1fr) minmax(0px,1fr) minmax(0px,1fr);
        grid-template-rows: 50px auto auto;
        grid-template-areas:
        "ft1 ft1 ft1"
        "ft4 ft4 ft3"
        "ft5 ft5 ft2" /*ft6 ft7*/ ;
        .fr6{display: none}
        .fr7{display: none}
    }
}

/*e:footer*/



.about-section {
    position: relative;
    .section10-top {
        padding-top: clamp(80px, 12vw, 220px);
        display: flex;

        h3 {
            position: relative;
            margin-right: clamp(0px, 13vw, 229px);

            p:first-child {
                font-size: 0.85em;
            }

            .deco {
                position: absolute;
                right: 0;
                top: 0.5em;
                width: 4rem;
                height: 1px;
                background-color: var(--color-1);
                z-index: -1;
            }
        }

        .star {
            margin-left: auto;
            img{
                animation: rotating-reverse 10s linear infinite;
            }
        }
    }

    .section10-bottom {
        margin-top: clamp(60px, 9.8vw, 186px);
        padding-bottom: clamp(60px, 13vw, 240px);

        #scroll-img-about-wrap{
            width: 100%;
            &.ani{
                animation: ani-intro-show .5s linear forwards;
            }
        }
        img {
            width: 100%;
            aspect-ratio: 1728/800;
            clip-path: ellipse(50% 100% at 50% 100%);
            transition: .3s;
        }
    }

    & > .deco {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: -1;
        width: 100%;
        height: 100%;

        img {
            position: absolute;
            object-fit: contain;
        }

        img:first-child {
            width: clamp(26px, 5.7vw, 110px);
            left: clamp(31px, 7.1vw, 135px);
            bottom: clamp(165px, 39vw, 738px);
            animation: floating 2s ease-in-out infinite;
        }

        img:nth-child(2) {
            width: clamp(100px, 26vw, 500px);
            right: 0;
            bottom: clamp(116px, 28vw, 500px);
        }

        img:last-child {
            object-position: bottom;
            width: clamp(219px, 50vw, 956px);
            left: 0;
            bottom: calc( 0px - clamp(100px, 19vw, 370px));
        }
    }
}

@media (width > 1023px) {
    /*가로형에서만*/
}

@media (width < 1400px) {
}

@media (width < 1024px) {
    .about-section {
        .section10-top {
            flex-direction: column;

            h3 {
                width: max-content;

                .deco {
                    width: 2rem;

                }

                margin-bottom: 20px;
            }
        }

        .section10-bottom {
        }
    }
}

@media (width < 768px) {
}

@media (width < 400px) {
}


@keyframes reserve-book {
    0%{
        outline: 2px solid  #ffffff00;
        outline-offset: 0;
    }
    70%{
        outline: 2px solid  #ffffffff;
        background-color: #ffffffff;
        outline-offset: 6px;
    }
    75%{
        outline: 2px solid  #ffffffcc;
        outline-offset: 6px;
    }
    100%{
        outline: 2px solid  #ffffff00;
        outline-offset: 10px;
    }
}
.reserve_section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    .cover {
        padding-block: clamp(48px, 5.5vw, 105px);
        background-color: #ffffffcc;
    }

    .section-title {
        text-align: center;
    }

    .select-box {
        display: flex;
        justify-content: center;
        gap: clamp(7px, 1.2vw, 20px);
        padding-block: clamp(15px, 3.2vw, 60px) clamp(20px, 3vw, 50px);
        font-family: var(--font-3);

        select, select:focus, select:active,
        input, input:focus {
            border: none !important;
            outline: none;
            box-shadow: none;
            font-weight: 500;
            font-size: clamp(14px, 1vw, 20px);
            max-width: 100%;
        }

        .select-room {
            display: flex;
            flex-direction: column;
            border-radius: 5px;
            border: 1px solid rgba(0, 0, 0, 0.30);
            background: rgba(0, 0, 0, 0.10);
            outline: 1px solid rgba(0, 0, 0, 0);
            outline-offset: 0;
            transition: .1s !important;
            padding: 20px 30px;
            width: clamp(145px, 19vw, 350px);

            label {
                font-weight: 300;
            }

            &:has(select:focus) {
                outline: 2px solid rgba(0, 0, 0, 0.30);
                outline-offset: 2px;
            }
        }

        .select-date {
            display: flex;
            flex-direction: column;
            border-radius: 5px;
            border: 1px solid rgba(0, 0, 0, 0.30);
            background: rgba(0, 0, 0, 0.10);
            outline: 1px solid rgba(0, 0, 0, 0);
            outline-offset: 0;
            transition: .1s !important;
            padding: 20px 30px;
            width: clamp(145px, 19vw, 350px);

            label {
                font-weight: 300;
            }

            &:has(input:focus), &:has(input:active), &:has(input:target), &:has(input:disabled) {
                outline: 2px solid rgba(0, 0, 0, 0.30);
                outline-offset: 2px;
                color: #000;
            }
        }
    }

    .reserve-link {
        text-align: center;
        font-family: var(--font-3);

        a {
            display: inline-block;
            background-color: #ffffffcc;
            color: #906E31;
            border-radius: 999px;
            padding: 16px 24px;
            i {
                margin-left: 1rem;
            }
            &:hover{
                animation: reserve-book  .4s ease-in-out;
            }
        }
    }
}


@media (width > 1023px) {
    /*가로형에서만*/
}

@media (width < 1400px) {
}

@media (width < 1024px) {
    .reserve_section {
        .select-box {
            .select-room, .select-date {
                padding: 9px 12px;
            }
        }

        .reserve-link a {
            padding: 6px 20px;
            font-size: 14px;
        }
    }
}

@media (width < 768px) {
}

@media (width < 400px) {
}


@keyframes rotating {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotating-flower {
    0% {
        transform: translate(-50%,-50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}
@keyframes rotating-reverse {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes floating {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes ani01 {
    0% {
        width: 1px;
    }
    100% {
        width: 250%;
        transform: translate(50%,50%);
    }
}
@keyframes ani-intro {
    0% {
        clip-path: polygon(50% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);
    }
    25% {
        clip-path: polygon(50% 100%, 0% 50%, 0% 0%, 100% 0%, 100% 50%);
    }
    50% {
        clip-path: polygon(50% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);
    }
    75% {
        clip-path: polygon(50% 100%, 25% 0%, 25% 0%, 75% 0%, 75% 0%);
    }
    100% {
        clip-path: polygon(50% 100%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
    }
}
@keyframes ani-intro-show {
    0% {
        clip-path: polygon(50% 100%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
        opacity: 0;
    }
    25% {
        clip-path: polygon(50% 100%, 25% 0%, 25% 0%, 75% 0%, 75% 0%);
    }
    50% {
        clip-path: polygon(50% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);
    }
    75% {
        clip-path: polygon(50% 100%, 0% 50%, 0% 0%, 100% 0%, 100% 50%);
    }
    100% {
        clip-path: polygon(50% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);
        opacity: 1;
    }
}