.about .section10{
    position: relative;
    padding-block : clamp(50px,10vw,150px);
    background-color: var(--color-1);
}
.about .section10 .wrap{
    height: 100%;
    display: flex;
    gap: clamp(0px, 2vw, 37px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 2;
}
.about .section10 .logo{
    text-align: center;
    margin: 0 auto;
    max-width: clamp(0px,20vw,250px);
    max-height: 200px;
    padding: 0;
}
.about .section10 .back{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0.3;
    filter: blur(1px);
}
.about .section10 .back img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}
.about .section20{
    background-color: var(--color-5);
    padding-top: clamp(123px, 15vw, 130px);
    padding-bottom: 130px
}
.about .section20 .wrap {
    display: flex;
    justify-content: space-between;
}
.about .section20 .title{
    font-family: var(--k-main-font-2);
    font-weight: 400;
    padding-top: clamp(0px, 11vw, 200px);
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: clamp(40px,10.5vw,200px);
}
.about .section20 .title h3{
    font-size: 2rem;
    font-weight: inherit;
    margin-bottom: clamp(0px, 3vw, 54px);
}
.about .section20 .title p{
    font-size: var(--f-size-2);
    font-weight: inherit;
}
.about .section20 .title a{
    font-family: var(--k-main-font-1);
    display: block;
    padding: clamp(5px,.5vw,12px) clamp(11px,1vw,30px);
    background-color: var(--color-2);
    border: 1px solid var(--color-2);
    color: #fff;
    font-size: 1rem;
    transition: all .3s;
}
.about .section20 .title a:hover{
    background-color: transparent;
    color: #1E2E45;
}
.about .section20 .content{
    grid-area: content;
    width: clamp(0px, 53vw, 1000px);
    aspect-ratio: 100/85;
}
.about .section20 .content iframe{
    width: 100%;
    height: 100%;
    border: none;
}
@media(width < 1400px){
}
@media(width < 1024px){
    .about .section20{
        padding-bottom: 160px;
    }
    .about .section20 .wrap {
        flex-direction: column;
        padding-left: 0 ;
        padding-right: 0 ;
    }
    .about .section20 .title{
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        padding-left: 30px;
        padding-right: 30px;
        margin-bottom: 30px;
    }
    .about .section20 .title h3{
        margin-bottom: 0;
    }
    .about .section20 .title a{
        height: max-content;
    }
    .about .section20 .content{
        width: 100%;
        aspect-ratio: 41/30;
    }
    .about .section10 .back{
        opacity: 0.2;
        filter: blur(4px);
    }
}
@media(width < 768px){
}
@media(width < 576px){
}
/***********************************************/
.room-preview .section10 h3{
    padding-top: clamp(97px, 11vw, 195px);
    padding-bottom: clamp(30px, 1.6vw, 35px);
    color: var(--color-3);
    font-size: 1.875rem;
}
.room-preview .section10{
    padding-bottom: clamp(87px, 11vw, 210px);
}
.room-preview .section10 .article{
    display: flex;
    gap: clamp(30px, 3.7vw, 70px);
    padding-bottom: clamp(30px, 1.6vw, 40px);
}
.room-preview .section10 .article img{
    width: 30vw;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
    cursor: pointer;
    opacity: 0.5;
    transition: all .5s;
}
.room-preview .section10 .article img:hover{
    opacity: 1;
}
.room-preview .section10 .article .link{
    padding-top: clamp(0px,2.7vw,50px);
}
.room-preview .section10 .article a{
    font-size: 1.25rem;
    font-weight: 400;
    font-family: var(--k-main-font-2);
    color: var(--color-2);
}
.room-preview .section10 .article a:after{
    content: "";
    width: 0%;
    height: 1px;
    background-color: var(--color-2);
    display: block;
    transition: all .3s;
}
.room-preview .section10 .article a:hover:after{
    width: 100%;
}
@media(width < 1400px){
}
@media(width < 1024px){
    .room-preview .section10 .article{
        flex-direction: column;
    }
    .room-preview .section10 .article img{
        width: 100%;
        opacity: 1;
    }
    .room-preview .section10 .article .link{
        padding-top: 0;
        text-align: right;
    }
    .room-preview .section10 .article a{
        color: #000;
    }
    .room-preview .section10 .article a:hover:after{
        width: 0%;
    }


}
@media(width < 768px){
}
@media(width < 576px){
}
/*************************************************/
/************************************************/
.room img{
    width: 100%;
}
.room .section10 .wrap{
    display: grid;
    grid-template-columns: 1fr max-content;
    grid-template-areas: "subject wr2" "wr-content wr2";
    padding-top:  clamp(97px,11vw,200px);
    padding-bottom: clamp(30px,7vw,116px);
}
.room .section10 .subject{
    grid-area: subject;
    font-family: var(--k-main-font-2);
    font-weight: 400;
    font-size: 1.875rem;
}
.room .section10 .wr-content{
    grid-area: wr-content;
    font-family: var(--k-main-font-2);
    font-weight: 400;
    font-size: 1.875rem;
    display: flex;
    height: 100%;
    align-items: end;
}
.room .wr2{
    grid-area: wr2;
    font-family: var(--k-main-font-2);
    font-weight: 400;
    font-size: 1rem;
    color: var(--color-2);
    line-height: 2;
}
.room .wr2 i{
    font-size: 1.25rem;
    font-weight: 700;
    font-style: unset;
    color: transparent;
    -webkit-text-stroke: 1px var(--color-2);
}

.room .section20 .deco{
    position: absolute;
    top: -111px;
    right: 0px;
    color: var(--color-4);
    font-family: var(--e-deco-font-1);
    font-size: 7.5rem;
    font-weight: 700;
}
.room .section20 .img{
    position: relative;
    aspect-ratio: 154/90;
}
.room .section20 img{
    width: 100%;
    height: 100%;
}
.room .section-wrap{
    display: flex;
}
.room .section30 .wrap{
    padding-top: clamp(38px, 12.5vw, 239px);
    position: relative;
}
.room .section30 .img{
    position: relative;
    aspect-ratio: 1/1;
    padding-bottom: clamp(0px, 12vw ,60px );
}
.room .section30 img{
    width: 100%;
    height: 100%;
}
.room .section30 .title{
    font-family: var(--k-main-font-2);
    font-size: 1.875rem;
    font-weight: 400;
    margin-bottom: clamp(0px, 5vw,70px);
}
.room .section40,
.room .section30 .content{
    font-family: var(--k-main-font-2);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-3);
}
.room .section30 .deco{
    position: absolute;
    top: -93px;
    right: -106px;
}
.room .section30 .deco text{
    font-size: 1rem;
    font-family: var(--k-main-font-1);
}
.room .section30 .deco .flower{
    position: absolute;
    top: -20px;
    right: -6px;
}
.room .section40{
    padding-bottom: 0;
}
.room .section40 .wrap{
    padding-top: clamp(38px, 12.5vw, 239px);
    padding-left: clamp(40px, 9vw, 172px);
}
.room .section40 img{
    aspect-ratio: 3/4;
    padding-bottom: 70px;
}
.room .reserve-btn{
    display: inline-block;
    padding: 15px 60px;
    border-radius: 50px;
    border: 1px rgb(0,0,0,0.2) solid;
    margin-top: clamp(30px, 8vw,150px);
    font-size: var(--f-size-2);
    transition: all .3s;
}
.room .reserve-btn:hover{
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.room .section-wrap{
    padding-bottom: clamp(60px, 15vw, 277px);
}
.room .section50 .wrap{
    padding-bottom: clamp(160px, 11vw, 240px);
}
.room .section50 .title{
    color: var(--color-2);
    font-size: 1.875rem;
    font-weight: 400;
    margin-bottom: clamp(30px, 2vw,35px);
}
.room .section50 .swiper{
    height: clamp(180px, 25vw, 477px) ;
}
.room .section50 .swiper-slide{
    /*width: clamp(180px, 25vw, 477px) !important;*/
    /*margin-right: clamp(12px, 2vw,35px) !important;*/
    position: relative;
}
.room .section50 .swiper-slide::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all .3s;
}
.room .section50 .swiper-slide span{
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 1.125rem;
    padding: 15px;
    opacity: 0;
    transition: all .3s;
}
.room .section50 .swiper-slide:hover{
}
.room .section50 .swiper-slide:hover span{
    opacity: 1;
}
.room .section50 .swiper-slide:hover:after{
    background-color: rgba(255,255,255,0.5);
}
@media(width < 1400px){
}
@media(width < 1024px){
    .special .section60 .title,
    .room .section50 .title{
        font-size: 1.5rem;
    }
    .room .section10 .wrap{
        gap: 0;
        row-gap: 128px;
        grid-template-columns: 1fr;
    }
    .room .section-wrap{
        flex-direction: column;
    }
    .room .section40 .wrap{
        padding-left: 135px;
    }
    .room .section20 img{
        width: 100%;
        aspect-ratio: 1/1;
        height: auto;
        object-fit: cover;
        object-position: center;
    }
    .room .section30 .img{
        padding-right: clamp(75px,17vw,170px);
    }
    .room .section40 .img{
        padding-left: clamp(95px,22vw,230px);
    }
    .room .section40 img{
        padding-bottom: 0px;
    }
}
@media(width < 768px){
}
@media(width < 400px){
    .room .section30 .img{
        padding-right: clamp(0px,17vw,75px);
    }
    .room .section40 .wrap{
        padding-left: calc(40px + clamp(0px,17vw,75px) );
    }

}
/************************************************/
.special .section10{
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .wrap{
        padding-top: clamp(97px,11vw,200px);
        display: grid;
        gap: clamp(30px, 1.6vw, 40px);
        grid-template-columns: auto 22% 25%;
        overflow: hidden;
    }
    .img-inner{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: clamp(30px, 1.6vw, 40px);
    }
    .img-inner img{
        aspect-ratio: 1/1
    }
    .content{
        color: var(--color-2);
    }
    .title{
        font-size: 1.875rem;
        padding-top: clamp(0px, 3.4vw, 64px);
        padding-bottom: clamp(0px, 2vw, 40px);
    }
    .text{
        color: #000;
    }
}
.special .section60 .wrap{
    padding-bottom: clamp(160px, 11vw, 240px);
}
.special .section60 .title{
    padding-top: clamp(120px, 13vw, 235px);
    padding-bottom: clamp(0px, 2vw, 30px);
    color: var(--color-2);
    font-size: 1.875rem;
    font-weight: 400;
}
.special .section60 .swiper{
    height: clamp(180px, 25vw, 477px) ;
}
.special .section60 .swiper-slide{
    position: relative;
}
.special .section60 .swiper-slide::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all .3s;
}
.special .section60 .swiper-slide span{
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 1.125rem;
    padding: 15px;
    opacity: 0;
    transition: all .3s;
}
.special .section60 .swiper-slide:hover:after{
    background-color: rgba(255,255,255,0.5);
}
.special .section60 .swiper-slide:hover span{
    opacity: 1;
}
.special .section60 .swiper-slide img{
    width: 100%;
    height: 100%;
}

@media(width < 1400px){
}
@media(width < 1024px) {
    .special .section9 .wrap{
        padding-top: 97px;
        padding-bottom: 30px;
        color: var(--color-2);
        font-size: 1.4rem;
    }
    .special .section10 {
        .wrap {
            display: flex;
            flex-direction: column;
            padding-top: 0;
            padding-left: 0;
            padding-right: 0;
        }

        .img-inner {
            width: 100%;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr;
        }
    }
    .special .section20 .wrap{
        padding-top: 60px;
        color: var(--color-2);
        line-height: 1.7;
    }
}
@media(width < 768px){
}
@media(width < 400px){
    .special .section10 {
        .wrap,
        .img-inner{
            gap:10vw
        }
    }
    .special .section60 .wrap{
        padding-left: 0;
        padding-right: 0;
    }
    .special .section60 .title{
        padding-left: 40px;
        padding-right: 40px;
    }
}
 /************************************************/
/*야놀자*/
.yapen-priceTbl-content td{
    background-color: #fff;
}
/*더나요*/
.rsv_cal_b{
    background-color: #fff;
}
#rsv_cal_b,#rsv_cal_h{
    cursor: pointer !important;
}
.reserve-head .main-sub{
    background-color: var(--color-5);
}
.reserve-head .header:not(.open):not(.down) {
    .leaf-typo,
    .gnb-1d-a{
        color: var(--color-2);
    }
    .logo img,
    .leaf {
        filter: unset;
    }
}
.reserve-info .section20 .wrap{
    padding-top: clamp(194px,17vw,310px) ;
}
.reserve-info .section30 .wrap{
    padding-top: clamp(120px,10vw,195px) ;
    padding-bottom: clamp(160px,12vw,200px) ;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(0px, 6.5vw, 124px);
    row-gap: clamp(0px, 10vw, 186px);
    grid-template-areas:
            "info notice"
            "refund refund";
}
.reserve-info .section30 .title{
    font-family: var(--k-main-font-2);
    color: var(--color-2);
    font-size: 1.8rem;
    font-weight: 400;
    padding-bottom: 2px
}
.reserve-info .section30 .content p{
    line-height: 2;
    font-family: var(--k-main-font-1) ;
}
.reserve-info .section30 .content>p:nth-child(1){
    font-family: var(--k-main-font-2);
    font-size: 1rem;
    padding-bottom: clamp(0px, 1.5vw, 21px);
}
.reserve-info .section30 .content{
    font-size: var(--f-size-2);
    font-weight: 400;
    padding-top: clamp(30px, 2.5vw, 43px);
    padding-bottom: clamp(30px, 2vw, 40px);
    border-bottom: 1px solid #C1C1C1;
}
.reserve-info .section30 .content:last-child{
    border-bottom: none;
}
.reserve-info .section30 .info{
    grid-area: info;
}
.reserve-info .section30 .notice{
    grid-area: notice;
}
.reserve-info .section30 .refund{
    grid-area: refund;
}
.reserve-info .section30 .refund table{
    width: 100%;
}
.reserve-info .section30 .refund td{
    text-align: center;
    padding-top: clamp(0px, 1.5vw, 29px);
    padding-bottom: clamp(0px, 1.5vw, 29px);
    background-color: #fff;
}
.reserve-info .section30 .refund td p{
    padding-bottom: 0;
}
.reserve-info .section30 .refund tr:nth-child(1) td{
    background-color: var(--color-2);
    border-right: white 1px solid;
}
.reserve-info .section30 .refund tr:nth-child(n+2) td{
    border-right: 1px solid var(--color-2);
    border-bottom: 1px solid var(--color-2);
}
.reserve-info .section30 .refund tr:nth-child(n+2) td:last-child{
    border-right: none;
}
.reserve-info .section30 .refund tr:last-child td{
    border-bottom: none;
}
@media(width < 1400px){
}
@media(width < 1024px){
    .reserve-head .header .logo img{
        filter : none;
    }
    .reserve-head .menu-btn span{
        background-color: #000;
    }
    .reserve-head .header{
        background-color: unset;
    }
    .reserve-head .header.top{
        background-color: unset;
    }
    .reserve-head .header.down{
        background-color: #fff;
    }
    .reserve-info .section10 .img{
        aspect-ratio: 1/1;
    }
    .reserve-info .section20 .wrap {
    }
    .reserve-info .section30 .wrap{
        display: block;
    }
    .reserve-info .notice,
    .reserve-info .refund{
        padding-top: 100px;
    }
    .reserve-info .section30 .content{
        font-weight: 400;
    }
    .reserve-info .section30 .refund table{
        width: calc(100% + 60px);
        transform: translateX(-30px);
    }
}
@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;
    }
}