.main-about {
    padding-bottom: clamp(64px,15vw,120px);
    .section10 {
        margin-bottom: clamp(56px, 13vw, 120px);
        .wrap{
            &::after{
                display: block; height: 1px;
                background-color: var(--color-gray-2);
                content: "";
            }
        }
        .section10-container {
            position: relative;
            max-width: 1480px;
            margin: 0 auto;
        }
        .img {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .article1 {
            .img {
            }
            margin-bottom: 30px;
        }
        .article2 {
            .content-wrap {
                .title {
                    font-family: var(--font-2);
                    font-size: clamp(26px, 5vw, 36px);
                    font-weight: 400;
                    margin-bottom: clamp(10px, 2vw, 30px);
                }

                .content {
                    font-weight: 400;
                    font-size: 18px;
                    line-height: 1.7;
                    margin-bottom: 30px;
                    word-break: auto-phrase;
                }
            }
        }
        .article3 {
            padding-bottom: clamp(56px, 13vw, 120px);

            .img {

            }
        }
    }
}
    @media(width > 1023px){
        .main-about{
            .section10{
                .section10-container{
                    /*padding-inline: clamp(0px,9vw, 149px);*/
                    display: flex; gap: 80px;
                    .article1{
                        .img{
                            width: 476px;
                            aspect-ratio: 476/634;
                        }
                        margin-bottom: clamp(0px, 21vw, 392px);
                    }
                    .article2{}
                    .article3{
                        /*padding-right: clamp(0px,9vw, 149px);*/
                        position: absolute; bottom: 0; right: 0;
                        .img{
                            width: clamp(0px,40vw,679px);
                            aspect-ratio: 679/350;
                        }
                    }
                }
            }
        }
    }
    @media (width < 1024px) {
        .main-about .section10{
            .section10-container{
            }
            .article1{
                .img{
                    width: 81vw;
                    aspect-ratio: 337/418;
                }
            }
            .article2{
                .content-wrap{
                    .title{}
                    .content{
                        font-size: 15px;
                    }
                }
            }
            .article3{
                .img{
                    aspect-ratio: 380/196;
                }
            }
        }
    }
    @media (width < 768px) {
    }
    @media (width < 576px) {
    }

/*************************************************/
.main-roompreview {
    .section10{
        .layout2{
            display: flex; gap: clamp(30px, 8vw, 146px);
            padding-block: clamp(56px, 9vw, 160px) clamp(64px, 8vw, 120px);
            .nav{
                width: 300px;
                .title{
                    padding-bottom:20px;
                    margin-bottom: clamp(10px, 2vw, 28px);
                    font-family: var(--font-2);
                    font-size: clamp(26px, 5vw, 32px);
                    font-weight: 400;
                    &::after{
                        content: '';
                        display: block;
                        width: 114px; height: 1px;
                        background: #E3E3E3;
                        margin-top: 8px;
                    }
                }
                .room-nav-box{
                    .room-nav-ul{
                        .room-nav-li{
                            a{
                                position: relative;
                                padding-block: 10px;
                                font-size: 20px;
                                font-weight: 300;
                                transition: .4s;
                                width: max-content;
                                display: flex;
                                &>div:first-child{
                                    width: 140px;
                                    &>span{
                                        position: relative;
                                        &::after {
                                            content: '';
                                            position: absolute;
                                            bottom: 0;
                                            left: 0;
                                            width: 0%;
                                            height: 1px;
                                            background-color: var(--color-black);
                                            transition: .4s;
                                        }
                                    }
                                }
                                &>span:last-child{
                                    transition: .4s;
                                }
                            }
                            a:hover {
                                &>div{
                                    &>span::after {
                                        width: 100%;
                                    }
                                }
                                &>span:last-child{
                                    opacity: 0 !important;
                                    width: 0;
                                }
                            }
                        }
                    }
                }
                .m-room-nav-li{
                    width: max-content;
                    font-size: 20px;
                    font-family: var(--font-2);
                    font-weight: 400;
                }
            }
            .slide{
                width: clamp(12vw,55vw,1032px);
                position: relative;
                .swiper{
                    position: relative;
                    height: 400px;
                    margin-bottom: 10px;
                    .swiper-typo{
                        position: absolute; z-index: 10;
                        left: clamp(12px,2.8vw,34px); bottom: clamp(16px,3vw,48px);
                        cursor: pointer; transition: .4s;
                        &>div:first-child{
                            background-color: var(--color-white);
                            padding: clamp(2px, 0.2vw, 4px) clamp(12px, 4.8vw, 34px);
                            line-height: 2;
                            font-weight: 400;
                            border-radius: 1000px;
                            color: #391400;
                            width: max-content;
                        }
                        &>div:last-child{
                            font-family: var(--font-2);
                            color: var(--color-white);
                            font-size: clamp(16px, 3vw, 30px);
                            font-weight: 700;
                            line-height: 1.8;
                            transition: .4s;
                        }
                        &:hover>div:last-child{
                            letter-spacing: 3px;
                        }
                    }
                }
                /*&::after{*/
                /*    content: ''; display: block;*/
                /*    height: 100%;*/
                /*    position: absolute; z-index: 5;*/
                /*    top: 0; bottom: 0; right: 0;*/
                /*    width: 10vw;*/
                /*    background: linear-gradient(to left,rgb(255,255,255), rgba(255,255,255,0) );*/
                /*}*/
            }
        }
    }
}
@media(width > 1023px){
    .main-roompreview {
        .section10{
            .layout2{
                .nav{
                }
            }
        }
    }
}
@media(width < 1400px){
}
@media(width < 1024px){
    .main-roompreview {
        .section10{
            .wrap .layout2{
                flex-direction: column;
                .nav{
                }
                .slide{
                    width: 100%;
                    .swiper{
                        height: clamp(153px, 40vw, 400px);
                        .swiper-typo div:first-child{
                            line-height: 1.4;
                        }
                    }
                }
            }
        }
    }
}
@media(width < 768px){
}
@media(width < 400px){
}

/*************************************************/
.main-room-special {
    .title-wrap{
        font-family: var(--font-2);
        font-size: 12px;
        font-weight: 400;
        &>div{
            letter-spacing: 4px;
        }
    }
    .content-title-wrap{
        font-family: var(--font-2);
        .title-large{
            font-size: clamp(26px,5vw,45px);
            font-weight: 400;
        }
        .title-secondary{
            font-weight: 300;
            font-size: 16px;
        }
    }
    .img{
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .section10{
        padding-top: clamp(56px,13vw,153px);
        .wrap{
            position: relative;
            .title-wrap{
                padding-bottom: 30px;
            }
            .content-wrap{
                .sub-nav-wrap{
                    color: var(--color-gray-2);
                    .sub-nav-ul{
                        width: max-content;
                        display: flex;
                        border: 1px solid var(--color-gray-2);
                        border-radius: 5px;
                        .sub-nav-li{
                            &:not(:last-child) a{
                                border-right: 1px solid var(--color-gray-2);
                            }
                            .sub-nav-a{
                                display: inline-block;
                                padding: clamp(0px,2.4vw,12px) clamp(0px,2.4vw,20px) ;
                                transition: .4s;
                                &.active{
                                    pointer-events: none;
                                }
                                &.active, &:hover{
                                    background-color: var(--color-gray-2);
                                    color: var(--color-white);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .section20{
        margin-top: clamp(40px,6.5vw,120px);
        .wrap{
            .section20-container{
                padding-top: clamp(40px,7vw,75px);
                padding-bottom: clamp(36px,8.7vw,120px);
                .layout2{
                    display: flex;
                    .article{
                        .title{
                            font-family: var(--font-1);
                            font-size: 15px;
                            font-weight: 700;
                            margin-bottom: 16px;
                        }
                        .content{
                            font-weight: 400;
                            font-size: 16px;
                            line-height: 2;
                        }
                    }
                }
            }
        }

    }
    .section30{
        padding-top: clamp(70px,13vw,180px);
        padding-bottom: clamp(64px,13vw,120px);
        position: relative;
        .wrap{
            width: 100%;
            .slide-title{
                font-family: var(--font-2);
                font-size: clamp(26px,6.3vw,32px);
                font-weight: 400;
                margin-bottom: clamp(30px,7vw,80px);
                width: max-content;
                padding-right: clamp(0px,6vw,105px);
                padding-bottom: 20px;
                position: relative;
                &::after{
                    content: '';
                    display: block;
                    width: 114px; height: 1px;
                    background: #E3E3E3;
                    position: absolute; bottom: 0; left: 0;
                }
            }
        }
        .swiper{
            .swiper-slide{
                transition: .4s;
                .img{
                    border-radius: 6px;
                    position: relative;
                    height: 100%;
                    .title{
                        position: absolute;
                        left:0; bottom: 0;
                        padding-bottom: clamp(16px,2vw,23px);
                        padding-left: clamp(16px,2vw,23px);
                        .floor{
                            background-color: var(--color-white);
                            padding: clamp(0px,0.1vw,8px) clamp(16px,6.3vw,35px);
                            width: max-content;
                            border-radius: 19px;
                        }
                        .room-name{
                            color: var(--color-white);
                            font-family: var(--font-2);
                            font-size: clamp(16px,3.8vw,32px);
                            font-weight: 700;
                            transition: .4s;
                        }
                    }
                }
                &:hover .img .title .room-name{
                    letter-spacing: 3px;
                }
            }
        }
    }
}
.main-special{
    .section10{
        .img-wrap{
            .img{
                border-top-left-radius: clamp(200px,40vw,400px);
            }

        }
        .content-wrap{
            .content-text-wrap{
                .content-text-title{
                    padding-top: clamp(30px,7vw,62px);
                    padding-bottom: 16px;
                    font-size: 18px;
                    font-weight: 700;
                }
                .content-text-subscript{
                    font-size: 18px;
                    font-weight: 400;
                    line-height: 1.7;
                }
            }
        }
    }
}
@media (width > 1023px) {
    .main-room-special {
        .section10{
            .wrap{
                height: 500px;
                display: flex; flex-direction: row-reverse;
                .title-wrap{
                    padding-bottom: clamp(0px,5vw,74px);
                }
                .content-title-wrap{
                    .title-secondary{
                        padding-left: 19px;
                        color: var(--color-gray-2);
                    }
                }
                .content-wrap{
                    padding-left: clamp(0px,9vw,149px);
                    width: 100%; height: 100%;
                    display: flex;
                    flex-direction: column;
                    .sub-nav-wrap{
                        margin-top: auto;
                    }
                }
                .img-wrap{
                    width: 100%;
                    .img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        .section20{
            .wrap{
                .section20-container{
                    border-top: 1px solid var(--color-gray-2);
                    border-bottom: 1px solid var(--color-gray-2);
                    .layout2{
                        gap: clamp(30px,7vw,165px);
                    }
                }
            }

        }
        .section30{
            .wrap{
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                .layout2{
                    /*padding-left: clamp(0px,9vw,149px);*/
                }
            }
            .room-preview{
                padding-left: calc( clamp(16px, 3.8vw, 75px) + 596px + (100vw - 1920px) / 2 );
                .swiper-slide{
                    height: 300px;
                    .img{
                        height: 100%;
                    }
                }
            }
        }
    }
    .main-special{
        .section10{
            .wrap{
                height: 609px;
                justify-content: space-between;
                .content-wrap{
                    width: 40vw;
                }
                .img-wrap{
                    width: 45vw;
                }
            }

        }

    }
}
@media (width < 1024px) {
    .main-room-special {
        .section10{
            .wrap{
                .img-wrap{
                    aspect-ratio: 378/418;
                    .img{
                        width: 100%;height: 100%;
                    }
                }
                .content-wrap{
                    .content-title-wrap{
                        padding-bottom: 20px;
                        .title-large {
                            padding-top: 20px;
                            padding-bottom: 10px;
                        }
                    }
                    .sub-nav-wrap{
                        .sub-nav-ul{
                            width: 100%;
                            text-align: center;
                            .sub-nav-li{
                                flex-grow: 1;
                                .sub-nav-a{
                                    width: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
        .section20{
            .wrap{
                .section20-container{
                    border-top: 1px solid var(--color-gray-2);
                    .layout2{
                        flex-direction: column;
                        .article{
                            border-bottom: 1px solid var(--color-gray-2);
                            padding-bottom: 40px;
                            margin-bottom: 40px;
                        }
                    }
                }
            }
        }
        .section30{
            padding-block: 0 64px;
            .room-preview{
                padding-left: clamp(16px, 3.8vw, 72px);
            }
            .room-preview .swiper .swiper-slide{
                aspect-ratio: 254/170;
            }
            .swiper {
                .swiper-slide {
                    .img {
                        .title {
                            .floor{
                                line-height: 1.6;
                                padding-inline: 16px !important;
                            }
                        }
                    }
                }
            }
        }
    }
    .main-special{
        & .section20 {
            & .wrap {
                & .section20-container {
                    & .layout2 {
                        & .article {
                            .title {
                                font-size: 20px !important;
                                word-break: auto-phrase;
                                width: 80%;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media (width < 768px) {
}
@media (width < 576px) {
}

/************************************************/
.special {
    .section-special {
        padding-top: clamp(149px, 16vw, 292px);
        li a.active{
            text-decoration: none;
        }
        li a.active:before{
            content: '· ';
        }
    }

    .section-special-content {
        margin-top: clamp(30px, 8vw, 180px);
        padding-bottom: clamp(141px, 12vw, 220px);

        .content {
            border-top: 1px solid var(--color-black);
            padding-top: 83px;
            font-size: 20px;
            line-height: 1.7;
            font-weight: 300;

            & > div:last-child {
                padding-top: 40px;
                padding-bottom: clamp(30px, 8vw, 140px);
                font-size: 14px;
            }
        }

        .img-wrap {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 40px;
            padding-left: 390px;

            .img {
                width: 100%;
                aspect-ratio: 450/500;
            }
        }
    }

    @media (width < 1400px) {
    }
    @media (width < 1024px) {
        .section-special {
        }

        .section-special-content {
            .content {
                font-size: 14px;

                & > div:last-child {
                    padding-top: 30px;
                }
            }

            .img-wrap {
                padding-left: 0;
                grid-template-columns: 1fr;
                gap: 12px;
                .img{
                    aspect-ratio: unset;
                }
            }
        }
    }
    @media (width < 768px) {
    }
    @media (width < 576px) {
    }
}

/************************************************/
.reserve-info {
    header {
        & .main-gnb {
            & .logo {
                & a span{
                    opacity: 1 !important;
                }
            }
        }
    }
                    main {
        overflow: hidden;
        .section20, .section30{
            .title {
                color: #D0D0D0;
                font-size: var(--f-size-30);
            }

            .content {
                padding-top: clamp(30px, 2.5vw, 43px);
                padding-bottom: clamp(30px, 2vw, 40px);
                border-bottom: 1px solid #C1C1C1;
            }

            .content:last-child {
                border: none;
            }

            .content p {
                line-height: 2;
                font-family: var(--font-1);
                font-size: 14px;
            }

            :where(.info, .notice) .content p:first-child {
                font-size: 16px;
                padding-bottom: 10px;
                font-weight: 700;
            }

            .refund{
                td p {
                    font-size: var(--f-size-14);
                }
            }
        }
        .section20 {
            .wrap .layout2{
                padding-block: clamp(56px, 16vw, 123px);
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;

                & > div {
                    width: 100%;
                }
            }
        }
        .section-include-hero{
            height: auto;
            .hero-menu-right{
                height: 42vh;
            }
            .swiper{
                display: none;
            }
        }
        .section-include-map{
            padding-bottom: clamp(64px, 7vw, 160px);
            .title{
                display: none;
            }
        }



    }
}

.reserve-info .section30 .wrap .layout2{
    padding-bottom: clamp(64px, 7vw, 160px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(0px, 4vw, 58px);
    row-gap: clamp(0px, 7vw, 120px);
    grid-template-areas:
            "info notice"
            "refund refund";
}

.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);
}

.reserve-info .section30 .refund td p {
    padding-bottom: 0;
}

.reserve-info .section30 .refund tr:nth-child(1) td {
    background-color: var(--color-1);
    border-right: white 1px solid;
    color: var(--color-white);
}

.reserve-info .section30 .refund tr:nth-child(2) td {
    border-right: 1px solid var(--color-1);
}

.reserve-info .section30 .refund tr:nth-child(2) td:last-child {
    border-right: none;
}

@media (width < 1400px) {
}

@media (width < 1024px) {
    .reserve-info .section-include-hero{
        .hero-menu-right{
            height: 220px !important;
        }
    }
    .reserve-info .section30 .wrap .layout2 {
        display: block;
    }

    .reserve-info .notice,
    .reserve-info .refund {
        padding-top: 64px;
    }

    .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;
    }
}