.about-main {
    .section10 {
        .section-sub {
            /*15~30px*/
            margin-top: clamp(15px, 1.5vw, 30px);
        }

        .wrap {
            display: flex;
            flex-direction: column;
            gap: clamp(80px, 13vw, 240px);
        }

        .day, .night {
            display: flex;
            gap: 30px;
            justify-content: space-between;
        }

        .night{
            position: relative;   text-align: right;
            .deco{
                position: absolute;
                top: 0; left: 0; z-index: -1;
                width: 100%; height: 100%;
                img{
                    margin-left: auto;
                    margin-right: calc(0px - 3vw);
                    width: clamp( 210px, 28vw,530px);
                }
            }
        }
    }

    .section20 {
        padding-block: clamp(80px, 13vw, 240px);

        .wrap {
            display: flex;
            align-items: center;
            gap: clamp(10px, 7.7vw, 146px);

            .map {
                width: 100%; position: relative;
                .deco{
                    position: absolute;
                    top: 0; left: 0; z-index: -1;
                    width: 100%; height: 100%;
                    img {
                        width: clamp(21px, 6.25vw, 120px);
                        transform: translate(-50%, -50%);
                    }
                }

                iframe {
                    width: 100%;
                    height: 100%;
                }
            }

            .info {
                .info-item {
                    padding-block: clamp(30px, 13vw, 22px);
                    display: flex;
                    border-bottom: 1px solid #EDEDED;
                    white-space: nowrap;
                    position: relative;
                    overflow: hidden;
                    .label {
                        width: 72px;
                        font-family: var(--font-2);
                        position: relative; z-index: 2;
                    }
                    .content {
                        font-weight: 300;
                        position: relative; z-index: 2;
                    }
                    &:hover::before{
                        content: '';
                        position: absolute;
                        right: 0; bottom: 0;
                        width: 1px; aspect-ratio: 1/1;
                        border-radius: 50%;
                        animation: ani01 0.4s ease-in-out forwards;
                        background-color: var(--color-2);
                    }
                    &:hover::after{
                        content: '';
                        position: absolute;
                        right: 0; bottom: 0;
                        z-index: 1;
                        width: 1px; aspect-ratio: 1/1;
                        border-radius: 50%;
                        animation: ani01 0.4s ease-in-out forwards;
                        animation-delay: .4s;
                        background-color: #fff;
                    }
                }
            }
        }
        &>.deco{
            position: absolute; z-index: -1;
            bottom: calc(0px - clamp(0px, 4.7vw, 90px)); right: 0;
            width: 100%; height: 100%;
            img:first-child{
                position: absolute;
                right: 0; bottom: 0;
                width: 29vw;
            }
            img:nth-child(2){
                position: absolute;
                left: 0; bottom: -4vw;
                transform: rotateX(180deg);
                rotate: 65deg;
                width: 20vw;
            }
        }
    }
}

@media (width > 1023px) {
    .about-main {
        .section10 {
            .wrap {
                .day {
                    flex-direction: row;
                }

                .night {
                    flex-direction: row-reverse;
                }

                .day, .night {
                    .img img{
                        width: clamp(0px, 60vw, 1142px);
                        aspect-ratio: 1142/550;
                    }
                }
            }
        }

        .section20 {
            .wrap {
                padding-inline: clamp(0px, 15vw, 293px);
                .map {
                    aspect-ratio: 700/520;
                }
            }
        }
    }
}

@media (width < 1400px) {
}

@media (width < 1024px) {
    .about-main {
        .section10 {
            .wrap {
                .day, .night {
                    flex-direction: column;
                    :not(.deco) {
                        img {
                            aspect-ratio: 392/188;
                        }
                    }
                }
            }
        }
        .section20 {
            .wrap {
                flex-direction: column;
                .map {
                    aspect-ratio: 700/520;
                    .deco{
                        img{
                            width: clamp(0px, 5vw, 120px);
                        }
                    }
                }
                .info {
                    width: 100%;
                    .info-item {
                        width: 100%;
                        .label {
                        }
                    }
                }
            }
        }
    }
}

@media (width < 768px) {
}

@media (width < 400px) {
}

.room-preview-main .section10 {
    padding-block: clamp(80px, 11vw, 200px) clamp(80px, 13vw, 240px);
    position: relative;
    .wrap {
        display: flex; gap: 60px; justify-content: space-between;
        .section-title{
            line-height: 1.5;
            margin-bottom: clamp(15px, 1.5vw, 30px);
        }
        .room-preview-content {
            position: relative; display: flex; gap: 30px;
            .deco-top{
                position: absolute; z-index: 1; top: 0; left: 0; width: 100%; mix-blend-mode: multiply;
                img {
                    position: absolute;
                }
                /*꽃*/
                img:first-child {
                    width: clamp(24px, 3.7vw, 70px);
                    /*left: calc(0px - clamp(8px, 1.85vw, 45px));*/
                    /*top: calc(0px - clamp(8px, 1.85vw, 45px));*/
                    left: 0; top: 0;
                    transform: translate(-50%, -50%);
                    animation: rotating-flower 6s infinite linear;
                }
                /*작은잎*/
                img:nth-child(2) {
                    width: clamp(9px, 2.3vw, 24px);
                    left: clamp(10px, 2vw, 44px);
                    bottom: calc(100% + clamp(5px, .7vw, 12px));
                }
                /*큰잎*/
                img:last-child {
                    width: clamp(23px, 3.5vw, 68px);
                    left: clamp(26px, 3.9vw, 74px);
                    bottom: calc(100% + clamp(5px, .6vw, 11px));
                }
            }

            .odd, .even {
                display: flex;
                flex-direction: column;
                gap: 30px;
                width: 50%;
            }

            .room-item {
                width: 100%;
                aspect-ratio: 1/1;
                transition: .4s;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;

                .room-item-wrap {
                    background: rgba(255, 255, 255, 0.65);
                    width: 100%; height: 100%;
                    padding: clamp(5px, 4vw, 75px) clamp(12px, 19vw, 36px);
                    display: flex; flex-direction: column; justify-content: end;
                    opacity: 0; transition: .4s;
                    &>div{
                        color: var(--color-1);
                        p:first-child {
                            font-family: var(--font-2);
                            width: 60%; border-bottom: 1px solid var(--color-1);
                            font-size: clamp(16px, 1.9vw, 36px);
                            padding-bottom: clamp(5px, 1.3vw, 25px);
                            margin-bottom: clamp(5px, .7vw, 12px);
                        }
                        p:last-child {
                            font-family: var(--font-3);
                        }
                    }
                }
                &:hover {
                    aspect-ratio: 1/1.2;
                    .room-item-wrap {
                        opacity: 1;
                    }
                }
            }
        }
    }
    .deco-bottom{
        position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: -1;
        img {
            position: absolute;
        }
        /*선*/
        img:first-child {
            width: clamp(0px, 18vw, 346px);
            left: clamp(0px, 24vw, 10000px);
            bottom: clamp(0px, 36.2vw, 10000px);
        }
        /*물방울*/
        img:nth-child(2) {
            width: clamp(40px, 5.8vw, 110px);
            left:  clamp(20px,4.8vw,96px);
            bottom: clamp(0px,27vw,520px);
            rotate: -180deg;
            animation: floating 3s infinite ease-in-out;
            animation-delay: .2s;
        }
        /*원*/
        img:nth-child(3) {
            width: clamp(9px, 1.7vw, 32px);
            left: clamp(0px, 28vw, 10000px);
            bottom: clamp(0px, 20vw, 10000px);
            animation: floating 3s infinite ease-in-out;
        }
        /*물결*/
        img:last-child {
            width: clamp(269px, 50vw, 10000px);
            left: 0; bottom: 0;
            transform: translateY(50%);
        }
    }
}

@media (width > 1023px) {
    .room-preview-main .section10 {
        .wrap {
            display: flex; gap: 60px; justify-content: space-between;
            height: 1200px;
            .typo {
                position: sticky; left: 0; top: 10vw; height: max-content;
            }
            .room-preview-content {
                width: clamp(0px, 60vw, 1152px);
            }
        }
    }
}

@media (width < 1400px) {
}

@media (width < 1024px) {
    .room-preview-main .section10 {
        .wrap {
            flex-direction: column;

            .fixed-wrap {
                .typo {
                }
            }

            .room-preview-content {
            }
            .room-preview-content .room-item .room-item-wrap {
                padding: clamp(5px, 4vw, 75px) clamp(12px, 2vw, 36px);
            }
        }
    }
}

@media (width < 768px) {
}

@media (width < 400px) {
}
.room-main, .special-main{
    .section10{
        .section-title{
            margin-bottom: clamp(15px, 3.1vw, 60px);
            line-height: 1.5;

        }
    }
    .section20{
        padding-bottom: clamp(80px, 13.3vw, 254px);
        .bar{
            display: flex;
            margin-top: clamp(60px, 12.5vw, 240px);
            padding-bottom: clamp(40px, 7.3vw, 140px);
            div:nth-child(1){
                width: clamp(20px, 4.8vw, 96px);
            }
            div:nth-child(2){
                border-top: 1px solid var(--color-4);
                max-width: 1920px;
                width: calc(100vw - (clamp(20px, 4.8vw, 96px) * 2));
            }
            div:nth-child(3){
                border-top: 1px solid var(--color-4);
                width: clamp(20px, 4.8vw, 96px);
                flex-grow: 1;
            }
        }
        .content{
            .section-title{
                margin-bottom: clamp(15px, 1.7vw, 30px);
                line-height: 1.5;
                scale: 0.8;
                transform-origin: top left;
            }
            margin-bottom: 30px;
        }
        .swiper{
            .swiper-slide{
                aspect-ratio: 555/560;
                .item-wrap{
                    padding: clamp(12px, 2vw, 40px) clamp(12px, 3vw, 60px);
                    background: rgba(255, 255, 255, 0.65); height: 100%;
                    display: flex; flex-direction: column; justify-content: end;
                    transition: .4s; opacity: 0;
                    p:first-child {
                        font-family: var(--font-2);
                        font-size: clamp(16px, 1.25vw, 24px);
                    }
                    p:last-child {
                        margin-top: clamp(5px, 1vw ,20px) ;
                        padding-top: clamp(5px, .6vw, 10px);
                        font-family: var(--font-3);
                        border-top: 1px solid var(--color-1);
                        width: 60%;
                    }
                }
                &:hover{
                    .item-wrap{
                        opacity: 1;
                    }
                }
            }
        }
    }
}
.room-main{
    position: relative;
    .section10{
        padding-block: clamp(80px, 11vw, 200px) clamp(80px, 13vw, 240px);
        .wrap{
            display: flex; gap:60px; justify-content: space-between;
                position: relative;
            .img{
                display: grid; gap: clamp(7px, 1.7vw, 32px);
                grid-template-columns: repeat(2, minmax(0px, 1fr));
                grid-template-rows: repeat(2, minmax(0px, 1fr));
                img{
                    object-fit: cover; object-position: center;
                    width: 100%; height: clamp(205px, 34vw, 650px);
                }
                img:nth-child(1){
                    grid-column: span 2;
                }
            }
            .deco-01{
                position: absolute;
                top: 0; height: 100%; z-index: -1;
                max-width: 1920px; width: 100%; left: 50%; transform: translateX(-50%);
                padding-inline:  clamp(20px,4.8vw,96px);
                div{
                    width: 100%; height: 100%;
                    position: relative;
                }
                /*초록면*/
                img:first-child {
                    position: absolute;
                    left: 0; bottom: 0;
                    width: clamp(35px, 8.2vw, 156px);
                }
                img:nth-child(2) {
                    position: absolute;
                    top: clamp(0px, 26vw, 490px);
                    left: clamp(0px,10.4vw,200px);
                    rotate: 105deg;
                    width: clamp(180px, 28vw, 580px);
                }
                /*별*/
                img:nth-child(3) {
                    position: absolute;
                    right: 0;
                    bottom: calc(0px - clamp(0px, 6vw, 115px));
                    width: clamp(16px, 2.5vw, 48px);

                    animation: rotating-reverse 6s linear infinite;
                }
            }
        }
    }
    .deco-02{
        position: absolute;
        bottom: 0; left: 0; width: 100%; height: 100%; z-index: -1;
        img:first-child {
            position: absolute;
            bottom: 0; z-index: -1;
            width: clamp(0px,57vw, 10000px);
        }
        img:nth-child(2) {
            position: absolute;
            left: 17vw; bottom: 8.5vw;
            width: clamp(0px, 18vw, 346px);
        }
    }
}


.special-main{
    position: relative;
    .section10{
        position: relative;
        padding-block: clamp(80px, 11vw, 200px) clamp(20px, 5vw, 96px);
        .section-sub{
            margin-top: clamp(15px, 3.2vw, 60px);
            margin-bottom: clamp(60px, 6.8vw, 130px);
        }
        .img{
            display: grid; row-gap: clamp(25px, 4.2vw, 80px); column-gap: clamp(56px, 9.5vw, 182px);
            grid-template-columns: repeat(2, minmax(0px, 1fr));
            grid-template-rows: auto auto;
            img{object-fit: cover; object-position: center;}
            .img-wrap:nth-child(1){
                grid-column: span 2;
                position: relative;
                &>img{ aspect-ratio: 1142/550; }
                .deco{
                    position: absolute;
                    right: 0; top:0; transform: translate(50%, -50%);
                    width: clamp(20px, 2.5vw, 49px);
                    img{
                        animation: rotating-reverse 8s linear infinite;
                    }
                }
            }
            .img-wrap:nth-child(2){
                display: flex; flex-direction: column; gap: clamp(30px, 7.4vw, 142px);
                font-family: var(--font-2); color: #8e8e8e;
                /*노란별*/
                img{
                    aspect-ratio: 1/1;
                }
            }
            .img-wrap:nth-child(3){
                img{ aspect-ratio: 48/62; }
            }
        }
        .deco-wrap{
            position: absolute;
            width: 100%; height: 100%; top: 0; left: 0;
            padding-inline: clamp(20px,4.8vw,96px);
            .deco-01{
                position: relative;
                width: 100%; height: 100%;
                top: 0; left: 0; z-index: -1;
                img:nth-child(1){
                    position: absolute;
                    right:0; top: clamp(360px,37.5vw,722px);
                    width: clamp(0px, 20vw, 390px);
                }
                img:nth-child(2){
                    position: absolute;
                    left:0; top: clamp(490px,70vw,1300px);
                    width: clamp(120px, 20vw, 390px);
                    rotate: -20deg;
                }
                img:nth-child(3){
                    position: absolute;
                    left: 0; bottom: clamp(20px, 5vw, 96px);
                    width: clamp(29px, 4vw, 76px);
                    rotate: 180deg;
                    animation: floating 3s ease-in-out infinite;
                }
                img:nth-child(4){
                    position: absolute;
                    right: 0; bottom: -7%;
                    width: clamp(35px, 8.2vw, 156px);
                    animation: floating 3s ease-in-out infinite;
                }
            }
        }
    }
    .deco-02{
        img:first-child {
            position: absolute;
            left: 0; bottom: 0; z-index: -1;
            width: 42.5vw;
        }
        img:nth-child(2) {
            position: absolute;
            left: 5vw; bottom: 12.8vw;
            width: clamp(16px, 2vw, 37px);
        }
    }
}

@media(width > 1023px){
    .room-main{
        .section10{
            .typo{
                position: sticky; left: 0; top: 5vw; height: max-content;
            }
            .img{
                width: clamp(0px, 60vw, 1152px);
            }
        }
    }
    .special-main {
        .section10 {
            .img {
                padding-inline: clamp(0px, 15.3vw, 293px);
            }
        }
    }
    .room-main, .special-main{
        .section20{
            .room-preview{
                position: relative;
                .wrap{
                    position: absolute;
                    top: 0; left: 0;
                }
            }
            .slide{
                padding-left: calc( clamp(0px, 23vw, 440px) + clamp(20px,4.8vw,96px) );
            }
        }
    }
}
@media(width < 1400px){
}
@media(width < 1024px){
    .room-main{
        .section10 .wrap{
            flex-direction: column;
            .deco-01{
                img:first-child {
                    transform: translateY(150%);
                }
                img:nth-child(2) {
                    left: unset;
                    top: 15vw;
                    right: 0;
                }
                img:nth-child(3) {
                    bottom: unset;
                    top: calc(clamp(36px, 3.8vw, 72px) / 2 );
                }
            }
        }
        .section20{
            .slide{
                padding-left: clamp(20px,4.8vw,96px) ;
            }
        }
        .deco-02 {
            img:first-child {
                width: 75vw;
            }
        }
    }
    .special-main {
        overflow: hidden;
        .section10 {
            .img-wrap:nth-child(2) {
                font-size: 10px;
            }
            .deco-wrap{
                .deco-01{
                    img:nth-child(1){
                        right:calc(0px - 8vw);
                    }
                    img:nth-child(2){
                        left: calc(0px - 8vw);
                    }
                    img:nth-child(3){
                        bottom: calc(0px - 10.5vw);
                    }
                    img:nth-child(4){
                        bottom: 1%;
                    }
                }
            }
        }
        .section20{
            position: relative;
            .slide{
                padding-left: clamp(20px,4.8vw,96px);
            }
        }
        .deco-02{
            img:first-child {
                width: 75vw;
            }
            img:nth-child(2) {
                left: unset; right: clamp(20px, 4.8vw, 96px);
                bottom: unset; top: clamp(60px, 7.3vw, 140px);
            }
        }
    }
}
@media(width < 768px){
}
@media(width < 400px){
    .special-main {
        .section10 {
            .img{
                column-gap: 12vw;
            }
            .img-wrap:nth-child(2) {
                gap:7vw;
                line-height: 1;
                font-size: 8px;
            }
        }
    }
}


.reserve-info-main{
    &>.wrap{
        padding-block: clamp(80px, 10.5vw, 200px) clamp(100px, 12.5vw, 235px);
        display: flex; flex-direction: column;   gap: clamp(100px, 12.5vw, 240px);
        .item{
            display: flex; gap:40px; justify-content: space-between;
            .title{
                color: var(--color-1);
                font-size: clamp(30px, 3.1vw, 60px);
                transform-origin: top left;
                scale: 0.8;
            }
            .content{
                display: grid;
                grid-template-columns: repeat(2, minmax(0px, 1fr));
                grid-auto-rows: auto;
                .content-row{
                    padding-bottom: clamp(30px, 3.1vw, 60px);
                    border-bottom: 1px solid var(--color-black);
                    margin-bottom: clamp(30px, 3.1vw, 60px);
                    &:last-child{
                        border-bottom: none;
                        margin-bottom: 0; padding-bottom: 0;
                    }
                    p{
                        font-weight: 300;
                        font-size: 14px;
                        line-height: 2;
                    }
                    p:first-child{
                        font-weight: 400;
                        font-size: 16px;
                        margin-bottom: 0.5rem;
                    }
                }
                &:has(.content-row-one){
                    grid-template-columns: 1fr;
                    .content-row-one{
                        td{
                            padding: 10px;
                            text-align: center;
                        }
                        table tr:first-child td{
                            background-color: var(--color-3) !important;
                            /*color: var(--color-white) !important;*/
                        }
                        p{
                            font-weight: 300;
                            word-break: auto-phrase;
                        }
                    }
                }
            }
        }
    }
}
@media(width > 1023px){
    .reserve-info-main{
        .wrap{
            .item{
                .title{}
                .content{
                    width: clamp(0px, 67vw, 1288px);
                    .content-row{
                        p:not(:first-child){
                            padding-left: clamp(0px, 13.5vw, 26px);
                        }
                    }
                    .content-row-one{
                        &>p{
                            padding-left: clamp(0px, 13.5vw, 26px);
                        }
                    }
                    .p-border-none{
                        border: none !important;
                        padding-bottom: 0!important;
                        margin-bottom: 0!important;
                    }
                }
            }
        }
    }
}
@media(width < 1400px){
}
@media(width < 1024px){
    .reserve-info-main{
        .wrap{
            .item{
                flex-direction: column;
                .content{
                    grid-template-columns: 1fr;
                }
            }
        }
    }
}
@media(width < 768px){
}
@media(width < 400px){
}