.about-main{
    .section10{
        text-align: center;
        /*padding-top: clamp(81px, 12vw, 200px);*/
        .title-wrap{
            margin-bottom: clamp(20px, 4vw, 40px);
        }
        .content{
            .content-wrap{
                padding-block: clamp(108px, 4vw, 160px);
                padding-inline: 20px;
                background-color: rgba(0,0,0,0.6);
                color: var(--color-white);
            }
        }
    }
    .section20{
        padding-top: clamp(100px, 12vw, 180px);
        .content{
            padding-top: clamp(30px, 6vw, 80px);
            /*padding-bottom: clamp(121px, 20vw, 220px);*/
            display: flex; align-items: center;
            .info{
                font-size: 16px; flex-grow: 1;
                .title{ font-size: clamp(20px,4vw,24px); font-weight: 500; margin-bottom: 30px;}
                .row{
                    display: grid;
                    grid-template-columns: max-content 1fr;
                    column-gap: 50px;
                    row-gap: clamp(8px,2vw,20px);
                }
                .label{ font-weight: 400; font-family: var(--font-2); text-transform: uppercase;}
                .desc{ font-weight: 300; }
            }
            .map{
                width: 50%; aspect-ratio: 714/700;
                iframe{
                    width: 100%; height: 100%;
                }
            }
        }
    }
}
@media(width < 1024px){
    .about-main{
        .section20{
            .content{
                flex-direction: column-reverse; align-items: start; gap: 30px;
                .info{}
                .map{ width: 100%;}
            }
        }
    }
}
.room-preview-main{
    .section10{
        .type-wrap{
            display: flex; justify-content: center; gap: clamp(20px, 4.5vw, 80px);
            padding-top: clamp(30px, 5vw, 80px); padding-bottom: 60px;
            font-size: clamp(16px,3vw,24px);
            .type{
                padding-block: clamp(5px, 0.9vw, 15px);
                cursor: pointer;
                transition: .4s;
                span{
                    border-bottom: 1px solid transparent;
                    transition: .4s;
                }
            }
            .type:hover{
                span{ border-bottom: 1px solid var(--color-black); }
            }
            .type.active{
                padding-inline: clamp(22px,6vw,54px) ;
                background-color: var(--color-1);
                color: var(--color-white);
                border-radius: 150px;
                span{
                    border-bottom: 1px solid var(--color-white);
                }
            }
        }
        .content-wrap{
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap:30px; row-gap: clamp(80px, 100vw, 102px);
            a{
                display: block;
                width: 100%;
                .img-wrap {
                    aspect-ratio: 714/500; overflow: hidden;
                    img {
                        width: 100%; height: 100%;
                        object-fit: cover; object-position: center;
                        transition: 1s;
                    }
                }
                .text-wrap{
                    .type{
                        padding-top: 30px; padding-bottom: 10px;
                        font-weight: 300; color: var(--color-3); font-size: var(--f-size-20);
                    }
                    .content{
                        display: flex; justify-content: space-between; align-items: center;
                        .name{
                            font-weight: 500; font-size: clamp(26px, 5vw, 40px);
                            transition: .4s;
                        }
                        &>div:last-child{
                            font-weight: 300; color: var(--color-3); font-size: var(--f-size-20);
                            transition: .4s;
                        }
                    }
                }
            }
            a:hover{
                .img-wrap{
                    img{
                        transform: scale(1.05);
                    }
                }
                .text-wrap{
                    .content>div:last-child{
                        letter-spacing: 2px;
                    }
                }
            }
        }
    }
}
@media(width > 1023px){
}
@media(width < 1400px){
}
@media(width < 1024px){
    .room-preview-main{
        .section10{
            .type-wrap{
                gap: clamp(0px, 6vw, 80px);
            }
            .content-wrap{
                grid-template-columns: 1fr;
                a .text-wrap .name{ padding-bottom: 5px; }
            }
        }
    }
}
@media(width < 768px){
}
@media(width < 400px){
}


.room-main,.facility-main{
    .section10{
        .wrap{
            display: flex;
            .content{
                flex-grow: 1;
                .title-wrap{
                    .sub-title,.section-title{
                        text-align: left;
                    }
                }
                .feature{
                    padding-top: clamp(10px, 2vw, 22px);
                    padding-bottom: clamp(30px, 7vw, 40px);
                    font-weight: 600; font-size: clamp(12px,4vw,20px);
                    display: flex; gap: clamp(6px,2vw,40px);
                    flex-wrap: wrap;
                }
                .description{
                    font-weight: 300; font-size: 20px;
                }
                .details{
                    padding-top: clamp(50px, 12vw, 60px);
                    font-weight: 300; font-size: clamp(16px,3.5vw,24px);
                    p{
                        margin-bottom: 0.4em;
                    }
                    i{
                        font-style: normal;
                        font-weight: 600;
                    }
                    i::after{
                        content: '|';
                        font-weight: 300;
                        margin-inline: clamp(2px,.4vw,10px);
                    }
                }
                .reservation{
                    a{
                        display: inline-block;
                        border: 1px solid var(--color-black);
                        padding: clamp(11px,2vw,19px) clamp(44px,10vw,90px);
                        font-size: clamp(14px,3vw,20px);
                        transition: .4s;
                    }
                    a:hover {
                        background-color: var(--color-black);
                        color: var(--color-white);
                    }
                }
            }
            .img-wrap{
                overflow: hidden;
                img{
                    width: 100%; height: 100%;
                    object-fit: cover; object-position: center;
                }
            }
        }
    }
    .section20{
        padding-top: clamp(120px, 25vw, 180px);
        padding-bottom: clamp(120px, 25vw, 240px);

        .article-title{
            font-family: var(--font-2);
            font-weight: 500;
            font-size: clamp(26px,6vw,48px);
            border-bottom: 1px solid var(--color-black);
            padding-bottom: 15px;
        }
        article{
            font-size: var(--f-size-24);
            font-weight: 300;
        }
        article:first-child{
            padding-bottom: clamp(80px, 15vw, 120px);
            .article-title{
                margin-bottom: clamp(40px,9vw,60px);
            }
            p{
                line-height: 2;
            }
        }
        article:nth-child(2){
            .article-title{
                margin-bottom: clamp(30px,7vw,30px);
            }
            p{
                line-height: 2;
            }
        }
    }
    .section30{
        .preview-title{
            font-family: var(--font-2);
            font-weight: 500;
            font-size: clamp(30px,7vw,80px);
            margin-bottom: clamp(33px,8vw,60px);
        }
        .preview-sub-title{
            font-family: var(--font-2);
            font-weight: 300;
            color: var(--color-2);
        }
        .swiper{
            user-select: none;
            -webkit-user-drag: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            .swiper-slide{
                .img-box{
                    aspect-ratio: 45/55; overflow: hidden;
                    img{
                        width: 100%; height: 100%;
                        object-fit: cover; object-position: center;
                        transition: 1s;
                    }
                }
                .text-box{
                    .type{
                        padding-top: clamp(10px, 2vw, 30px);
                        padding-bottom: clamp(5px, 1vw, 10px);
                        color: var(--color-3); font-size: clamp(12px,2vw,20px); font-weight: 300;
                    }
                    .title{
                        font-size: clamp(16px,3vw,24px); font-weight: 500;
                    }
                }
            }
        }
    }
}
.room-main{
    .section10{
        .wrap{
            flex-direction: row;
            .img-wrap{
                aspect-ratio: 774/700;
            }
            .content{
                .details{
                    padding-bottom: clamp(50px, 12vw, 70px);
                }
            }
        }
    }
    .section20{
        article:last-child{
            .article-title{
                margin-bottom: clamp(30px,7vw,30px);
            }
            table{
                width: 100%;
                margin-top: clamp(11px,2vw,30px);
                margin-bottom: 30px; text-align: center;
                border-right: none !important;
                p{ margin: 0; }
                td{
                    padding-block: 15px;
                }
            }
            table td:first-child{ border-left: none !important; }
        }
    }
}
.facility-main{
    .section10{
        .wrap{
            flex-direction: column;
            .content {
                .description{
                    margin-top: clamp(30px,7vw,60px);
                }
            }
        }
    }
}
@media(width > 1023px){
    .room-main,.facility-main{
        .section30{
            .wrap{
                max-width: unset;
                padding-left: calc(((100vw - 1920px) / 2) + clamp(0px,10.5vw,200px));
                padding-right: 0;
                .preview{
                    position: relative;
                }
                .btn-wrap{
                    height: 100%; display: flex; align-items: center; justify-content: center;
                    position: absolute; left: 0; top: 0;
                    padding-right: clamp(0px,5.5vw,99px);
                    transform: translateX(-100%);
                    font-size: 30px;
                }
            }
        }
    }
    .room-main{
        .section10{
            .wrap{
                gap: clamp(0px, 5vw, 100px);
                .img-wrap{
                    width: 50%;
                }
            }
        }
        .section20{
            .article:last-child{
                p{
                    margin-left: 1.5rem;
                }
            }
        }
    }
    .facility-main{
        .section10{
            .wrap{
                .content{
                    position: relative;
                    margin-bottom: clamp(50px,12vw,100px);
                    .details{
                        white-space: nowrap;
                        display: flex;
                        flex-wrap: wrap;
                        column-gap: 50px;
                        width: 70%;
                    }
                    .reservation{
                        position: absolute;
                        right: 0; bottom: 0;
                    }
                }
                .img-wrap{
                    display: grid; gap:32px;
                    grid-template-columns: 7fr 3fr;
                    img:first-child{
                        aspect-ratio: 977/600;
                        height: max-content;
                    }
                    img:last-child{
                        aspect-ratio: 477/452;
                        height: max-content;
                    }
                }
            }
        }
    }
}
@media(width < 1400px){
}
@media(width < 1024px){
    .room-main,.facility-main{
        .section10{
            .wrap{
                flex-direction: column-reverse;  gap:50px;
            }
        }
        .section30{
            .preview-title{
                text-align: center;
            }
            .swiper .swiper-slide{
                .img-box{
                    aspect-ratio: 182/140;
                }
                .text-box .title {
                    display: flex; justify-content: space-between; align-items: center;
                    white-space: nowrap;
                    .m-box{
                        color: var(--color-3 ); font-size: 2.9vw;
                        padding-left: 4px;
                        padding-right: 4px;
                        font-weight: 300;
                        overflow-x: hidden;
                    }
                }
            }
        }
    }
    .facility-main{
        .section10{
            .wrap{
                .content{
                    .details{
                        margin-bottom: 50px;
                    }
                }
            }
        }
    }
}
@media(width < 768px){
}
@media(width < 400px){
}

.offer-preview-main{
    .section10{
        .title-wrap{
            margin-bottom: clamp(30px,7vw,120px);
        }
        .content-wrap{
            display: grid;
            grid-template-columns:1fr 1fr 1fr;
            column-gap: 30px;
            row-gap: clamp(60px,14vw,120px);
            .img-box{
                aspect-ratio: 1/1; overflow: hidden;
                img{
                    width: 100%; height: 100%;
                    object-fit: cover; object-position: center;
                    transition: 1s;
                }
            }
            .text-box{
                padding-top: clamp(20px,4vw,41px);
                border-bottom: 1px solid var(--color-black);
                .title-en{
                    font-family: var(--font-2);
                    font-size: clamp(26px,6vw,32px); font-weight: 500;
                }
                .title-desc{
                    font-size: var(--f-size-20); font-weight: 400;
                    padding-top: 10px;
                    padding-bottom: clamp(20px,4vw,30px);
                }
            }
            .date{
                color: var(--color-3);  font-weight: 300; padding-top: 20px;
            }
        }
    }
}
.offer-main{
    .section10{
        .title-wrap{
            margin-bottom: clamp(30px,7vw,80px);
            .end-date{
                color: var(--color-2); padding-top: clamp(10px,2vw,30px);
                font-size: clamp(26px,6vw,32px); font-weight: 300;
            }
        }
        .content-wrap{
            .img{
                display: flex; flex-direction: column; align-items: center; gap: 20px;
                img{
                    width: max-content;
                }
            }
            .txt{
                padding-top: clamp(50px,12vw,120px);
                font-size: var(--f-size-24); font-weight: 300;
                line-height: 1.8;
            }
            margin-bottom: clamp(120px,29vw,234px);
        }
    }
    .section20{
        .title-wrap{
            margin-bottom: clamp(30px,7vw,80px);
        }
        .swiper{
            a{
                .img{
                    aspect-ratio: 465/300; overflow: hidden;
                    img{
                        width: 100%; height: 100%;
                        object-fit: cover; object-position: center;
                        transition: 1s;
                    }
                }
                .txt{
                    padding-top:  clamp(10px,2vw,30px);
                    .title{
                        font-size: clamp(14px,4vw,32px); font-weight: 700; font-family: var(--font-2);
                    }
                    .sub-title{
                        font-size: clamp(16px,3vw,20px); font-weight: 400;
                        padding-bottom: clamp(8px,2vw,30px);
                        border-bottom: 1px solid var(--color-black);
                    }
                    .date{
                        color: var(--color-3); font-weight: 300; padding-top: clamp(8px,2vw,30px);
                    }
                }
            }
            .swiper-navigation{
                .swiper-button-prev, .swiper-button-next{
                    color: var(--color-black);
                    top: 35%;
                }
            }
        }

    }

}
@media(width > 1023px){
    .offer-main{
        .section10{
            .title-wrap{
                text-align: left;
            }
            .content-wrap{
                .txt{
                    padding-bottom: 100px;
                    border-bottom: 1px solid var(--color-black);
                }
            }
        }
        .section20{
            .swiper{
                padding-inline: 80px;
            }
        }

    }
}
@media(width < 1400px){
}
@media(width < 1024px){
}
@media(width < 768px){
}
@media(width < 400px){
}