.about{
    .section15{
        .logo-line{
            display: flex;
            gap: clamp(0px, 5.3vw, 100px);
            align-items: center;
            padding-top: clamp(58px, 9.4vw, 180px);
            padding-bottom: clamp(62px, 5.3vw, 100px);
        }
        .line{
            height: 1px;
            width: 100%;
            background-color: var(--color-1);
        }
        .logo{
            max-width: 120px;
            max-height: 120px;
        }
    }
    .section20{
        .day,.night{
            padding-bottom: clamp(60px, 10vw, 180px);
        }
        .text{
            padding-left: clamp(13px,3.2vw,60px);
        }
        .title{
            padding-top: clamp(30px,8vw,40px);
            padding-bottom: clamp(30px,8vw,40px);
        }
        .img{
            max-height: 65vh;
        }
    }
    .section30{
        padding-bottom: clamp(120px, 6vw, 200px);
        .wrap{
            display: flex;
            justify-content: space-between;
            gap: 30px;
        }
        .title{
            align-self: center;
        }
        .title h2{
            font-size: var(--f-size-24);
        }
        .title a{
            display: inline-block;
            position: relative;
            padding: 10%;
            text-align: center;
            z-index: 5;
        }
        .title a:after{
            content: "";
            display: block;
            position: absolute;
            top:50%;
            left: 0;
            transform: translateY(-50%);
            width: 100%;
            height: 60%;
            padding-top: 10px;
            padding-bottom: 10px;
            border-top: 1px solid var(--color-1);
            border-bottom: 1px solid var(--color-1);
            transition: .5s;
        }
        .title a:before{
            content: "";
            display: block;
            position: absolute;
            top:0;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 100%;
            border-left: 1px solid var(--color-1);
            border-right: 1px solid var(--color-1);
            transition: all .5s;
        }
        .title p{
            padding-top: 20px;
            padding-bottom: 30px;
        }
        .content{
            height: clamp( 200px,31vw,600px);
            width: clamp( 0px,55vw,1000px);
        }
        .content iframe{
            border: none;
            width: 100%;
            height: 100%;
        }
    }
}
@media(width < 1400px){
}
@media(width < 1024px){
    .about{
        .section15{
        }
        .section20{
        }
        .section30{
            padding-top: 60px;
            .wrap{
                flex-direction: column-reverse;
            }
            .content{
                width: 100%;
            }
            .title{
                align-self: start;
                padding-left: 13px ;
            }
            .title a{
                padding: 7%
            }
        }
    }
}
@media(width < 768px){
}
@media(width < 400px){
}

.room{
    .section20 .wrap{
        height: auto;
        padding-top: clamp(30px, 14vw, 150px);
        padding-bottom: clamp(30px, 14vw, 120px);
        .img-wrap{
            height: clamp(300px,40vw,780px);
            overflow: hidden;
        }
        .text{
            padding-top: clamp(30px,4.2vw,80px);
            display: grid;
            grid-template-columns: 50% 50%;
            font-size: var(--f-size-16);
        }
        .title{
            font-size: var(--f-size-20);
            padding-bottom: 30px;
            display: flex;
            flex-direction: column;
        }
        .title span{
            width: max-content;
            font-weight: 700;
            margin-bottom: 10px;
        }
        .title a{
            width: max-content;
            margin-bottom: 10px;
            color: var(--color-3);
            transition: .5s;
        }
        .title a:hover{
            color: var(--color-black);
        }
        .content div:first-child{
            font-weight: 700;
            margin-bottom: clamp(30px, 2vw, 40px);
        }
    }
    .section30 .wrap{
        padding-top: clamp(60px,9.5vw,180px);
        padding-bottom: clamp(60px,9.5vw,120px);
        display: grid;
        grid-template-columns: 50% 50%;
        gap: 37px;
    }
}
@media(width < 1400px){
}
@media(width < 1024px){
    .room{
        .section20 .wrap{
            .img-wrap{
                aspect-ratio: 33/30;
            }
            .text{
                display: block;
            }
            .title{
                flex-direction: row;
                justify-content: space-between;
            }
            .content div:first-child{
                font-weight: 700;
            }
        }
        .content b{
            font-weight: 700;
        }
        .content p{
            margin-bottom: .5rem;
        }
        .section30 .wrap{
            grid-template-columns: 100%;
            gap: 20px;
        }
    }
}
@media(width < 768px){
}
@media(width < 576px){
}
/************************************************/
.special .section20{
    .swiper{
        padding-top: clamp(60px,9.5vw,180px);
        padding-bottom: clamp(30px, 3vw, 60px);
        #special-preview-swiper-pagination{
            text-align: center;
            padding-bottom: 35px;
            font-size: var(--f-size-20);
        }
        .swiper-slide{
            position: relative;
            aspect-ratio: 960/800;
            overflow: hidden;
        }
        .slide-name{
            position: absolute;
            right: 0;
            bottom: 0;
            font-size: var(--f-size-20);
            padding: clamp(15px, 1.5vw, 30px);
            font-weight: 700;
            color: var(--color-white);
            transform: translateY(300%);
            transition: all .5s;
        }
        .slide-back{
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-color: var(--color-1);
            opacity: 0;
            transition: all .5s;
        }
        .swiper-slide:hover .slide-name{
            transform: translateY(0);
        }
        .swiper-slide:hover .slide-back{
            opacity: .3;
        }
    }
    .wrap .title{
        border-top: 1px solid var(--color-1);
        padding-top: clamp(30px,4.2vw,80px);
        padding-bottom: clamp(30px,3vw,50px);
    }
    .wrap .title{
        font-size: var(--f-size-20);
    }
    .wrap .title span:first-child{
        font-weight: 700;
    }
    .content{
        line-height: 2;
    }
    .wrap{
        text-align: center;
    }
    padding-bottom: clamp(120px,11vw,200px);

}
@media(width < 1400px){
}
@media(width < 1024px){
}
@media(width < 768px){
}
@media(width < 576px){
}
 /************************************************/
.reserve-info{
    .wrap{
        padding-top: clamp(50px, 9vw, 172px);
        padding-bottom: clamp(50px, 9vw, 172px);
    }
    .title, .content{
        padding-left: clamp(0px, 2.5vw, 46px);
        padding-right: clamp(0px, 2.5vw, 46px);
    }
    .title{
        top: 150px;
        padding-top: clamp(0px, 1.6vw, 30px);
        padding-bottom: clamp(0px, 1.6vw, 30px);
        width: 100%;
        border-top: 1px solid var(--color-1);
        border-bottom: 1px solid var(--color-1);
        font-size: var(--f-size-30);
    }
    .content{
        padding-top: clamp(30px, 3.5vw, 65px);
        font-family: var(--k-main-font-1);
    }
    .content i{
        font-size: var(--f-size-16);
        font-style: normal;
    }
    .content table{
        text-align: center;
    }
    .content tr td{
        background-color: var(--color-white);
        border-left: 1px solid var(--color-3);
        border-right: 1px solid var(--color-3);
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .content tr td p{
        word-break: auto-phrase;
    }
    .content tr:first-child td{
        background-color: var(--color-3);
        border-left: 1px solid var(--color-white);
        border-right: 1px solid var(--color-white);
    }
    .content tr td:first-child{
        border-left: none;
    }
    .content tr td:last-child{
        border-right: none;
    }
}
@media(width < 1400px){
}
@media(width < 1024px){
    .reserve-info{
        .title, .content{
            /*padding-left: 0;*/
            /*padding-right: 0;*/
        }
        .title{
            /*padding-top: 0;*/
            /*padding-bottom: 0;*/
            /*border-top: none;*/
            /*border-bottom: none;*/
            /*color: var(--color-3);*/
            font-size: 16px;
        }
        .content{
            font-size: var(--f-size-16);
        }
    }
}
@media(width < 768px){
}
@media(width < 400px){
    .rsv_cal_t{
        display: grid;
        grid-template-areas: "tit tit" "prv next";
    }
    .prv{
        grid-area: prv;
    }
    .next{
        grid-area: next;
        margin-left: auto;
    }
    #tit{
        grid-area: tit;
        font-size: 10px !important;
    }
}