@charset "utf-8";

.mobileBn{ display: none;}
.introLogo a img{ width: 150px;}

#sub2sec1{ height: 100vh; position: relative; display: flex; flex-direction: column;}
#sub2sec1 .sub2MainBnSwip{ width: 100%; height: 100%;}
.sub2MainBnSwip .swiper-slide{ width: 100%; height: 100%; background-color: #222;}
.sub2MainBnSwip .swiper-slide.rmi1{ background: url( ../img/sub2/image1.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi2{ background: url( ../img/sub2/image2.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi3{ background: url( ../img/sub2/image3.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi4{ background: url( ../img/sub2/image4.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi5{ background: url( ../img/sub2/image5.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi6{ background: url( ../img/sub2/image6.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi7{ background: url( ../img/sub2/image7.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi8{ background: url( ../img/sub2/image8.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi9{ background: url( ../img/sub2/image9.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi10{ background: url( ../img/sub2/image10.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi11{ background: url( ../img/sub2/image11.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi12{ background: url( ../img/sub2/image12.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi13{ background: url( ../img/sub2/image13.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi14{ background: url( ../img/sub2/image14.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi15{ background: url( ../img/sub2/image15.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi16{ background: url( ../img/sub2/image16.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi17{ background: url( ../img/sub2/image17.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi18{ background: url( ../img/sub2/image18.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi19{ background: url( ../img/sub2/image19.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi20{ background: url( ../img/sub2/image20.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi21{ background: url( ../img/sub2/image21.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi22{ background: url( ../img/sub2/image22.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi23{ background: url( ../img/sub2/image23.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi24{ background: url( ../img/sub2/image24.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi25{ background: url( ../img/sub2/image25.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi26{ background: url( ../img/sub2/image26.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi27{ background: url( ../img/sub2/image27.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi28{ background: url( ../img/sub2/image28.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi29{ background: url( ../img/sub2/image29.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi30{ background: url( ../img/sub2/image30.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi31{ background: url( ../img/sub2/image31.jpg) no-repeat center/cover;}
.sub2MainBnSwip .swiper-slide.rmi32{ background: url( ../img/sub2/image32.jpg) no-repeat center/cover;}

#sub2sec1 .introTop{position: absolute; top: 20px; left: 60px; z-index: 9;}
#sub2sec1 .mainBnBottom{ width: 100%; height: 10vh; padding: 0 60px; display: flex; justify-content: space-between; align-items: center;}
.mainBnBottom h2{ font-family: "Cormorant Garamond", serif; font-size: 36px; font-weight: 500;}
.mainBnBottom .mainBnBtn{ display: flex; justify-content: center; align-items: center;}
.mainBnBtn .pauseBtn{ padding: 0 50px;}
.mainBnBtn i{ font-size: 24px; color: #64635e;}
.pauseBtn p{ font-family: "Nunito", sans-serif; font-size: 16px; text-align: center; cursor: pointer; background-color: inherit; transition: all 0.3s ease-in-out;}
.pauseBtn p:last-child{ display: none;}
/* .pauseBtn p.on{ opacity: 1; display: block; } */
.pauseBtn p:first-child.on{ display: none; opacity: 0;  }
.pauseBtn p:last-child.on{ display: block; opacity: 1;  }

/* roomInfo */
#roomInfo{ padding: 0 60px; display: flex; justify-content: space-between;}
#roomInfo .roomHalf{ width: 50%; margin:140px 100px; display: flex; justify-content: space-between; flex-direction: column;}
.roomHalf .roomInfoTxt{ margin-bottom: 110px;}
.roomHalf .roomInfoTxt:last-child{ margin-bottom: 0;}
.roomHalf .roomInfoTxt h3{ font-family: "Nunito", sans-serif; font-size: 18px; font-weight: 500; color: #24211c; margin-bottom: 30px;}
.roomInfoTxt .decoTxt p{ font-family: 'SUIT Variable', sans-serif; font-size: 14px; font-weight: 400; color: #797873; }

/* 떠나요 연동 */
.room_tit{ display: none;}
.room_data{ padding-left: 0;}
.room_data li{ display: flex; align-items: center; justify-content: flex-start; margin-bottom: 10px;}
.room_data li .person_limit table{ display: none;}
.room_data li .tit{padding:0; width: 11%; font-family: 'SUIT Variable', sans-serif; font-size: 15px; font-weight: 500; color: #64635e;}
.room_data li:nth-child(3) .tit{ width: 20%; margin:0 14px 0 0; }
.room_data li .data{ padding: 0; display: flex; justify-content: flex-start; line-height: 1.5em; font-family: 'SUIT Variable', sans-serif; font-size: 14px; font-weight: 400; color: #797873;}
.room_data li .data p{ font-family: 'SUIT Variable', sans-serif; font-size: 14px; font-weight: 400; color: #797873; }
.room_data li .data p::after{ content:"\00a0/\00a0"; }
.room_data li .data p:last-child::after{ content:"\00a0"}
.week_date p{ font-size: 14px;}
.room_rprice{ padding: 0;}

/* infoConTxt */
.infoConTxt{ margin-top: 30px;}
.infoConTxt p{ display: flex; justify-content: flex-start; flex-direction: column; line-height: 1.5em; font-family: 'SUIT Variable', sans-serif; font-size: 14px; font-weight: 400; color: #797873; margin-bottom: 10px;}
.infoConTxt p span{ display: block; font-family: 'SUIT Variable', sans-serif; font-size: 15px; font-weight: 500; color: #64635e; }

/* viewMoreBtn */
.mresMore{display: none;}
.resMore { margin-top: 50px; }
.resMore a{ display: inline-block; background-color: #886d5a; color: #edede5; padding: 15px 20px;}
/* .viewMore2 a:hover{ animation: all 0.3s ; } */

/* layout */
.roomHalf .roomLayout{ margin-bottom: 50px;}
.roomHalf .roomLayout img{ width: 100%; object-fit: cover;}
.roomHalf .roomLayout span{ display: block; font-family: "Nunito", sans-serif; font-size: 16px; font-weight: 300; margin: 20px auto 10px;  text-align: center; color: #886d5a;}
.roomHalf .roomLayout span:first-child{ margin-top: 0;}

/* roomDetail */
#roomDetail{ width: 100%; padding: 135px 60px; background: #886d5a;}
.detailWrap .detailTit{ display: flex; justify-content: space-between; margin-bottom: 130px;}
.detailTit h2{ font-family: "Cormorant Garamond", serif; font-size: 36px; font-weight: 500; color: #edede5;}
.detailTit .detailTxt p{ font-size: 14px; font-weight: 400; line-height: 1.5em; color:#edede5;}

.detailWrap .detailLst{ display: flex; justify-content: space-between;}
.detailLst .detailCon{ width: 25%; margin: 0 20px 0 0;}
.detailLst .detailCon:last-child{ margin: 0 0px 0 0;}
.detailLst .detailCon h3{ font-family: "Nunito", sans-serif; font-size: 16px; font-weight: 400; color: #edede5; margin-bottom: 10px; letter-spacing: 1px;}
.detailCon .detailImg{ aspect-ratio: 3/4; background-color: #24211c;}
.detailCon .detailImg.detail1{ background: url(../img/sub2/image3.jpg) no-repeat center/cover;}
.detailCon .detailImg.detail2{ background: url(../img/sub2/image16.jpg) no-repeat center/cover;}
.detailCon .detailImg.detail3{ background: url(../img/sub2/image22.jpg) no-repeat center/cover;}
.detailCon .detailImg.detail4{ background: url(../img/sub2/image31.jpg) no-repeat center/cover;}

/* otherRoom */
#otherRoom{ padding: 120px 60px;}
#otherRoom .otherTit{ margin-bottom: 30px;}
.otherTit h2{  font-family: "Cormorant Garamond", serif; font-size: 36px; font-weight: 500; color:#24211c;}
.otherTit h3{ font-size: 14px; color: #24211c;}

#otherRoom .otherWrap{ display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: nowrap;}
.otherWrap .otherHalf{ width: 50%; display: flex; justify-content: space-between;}
.otherHalf .otherTxt p{ font-size: 14px; line-height: 1.5em; color: #797873; }
.otherHalf .otherCon{ width: 50%; margin-right: 30px;}
.otherHalf .otherCon:last-child{ margin-right: 0;}
.otherCon .othRoomImg{ aspect-ratio: 3/4; margin-bottom: 20px;}
.otherCon .othRoomImg.oth1{background: url(../img/sub2/1/image8.jpg) no-repeat center/cover;}
.otherCon .othRoomImg.oth2{background: url(../img/sub2/2/image1.jpg) no-repeat center/cover;}
.otherCon .othConTxt h4{ font-family: "Nunito", sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 1px; color: #24211c;}
.otherCon .othConTxt p{ font-family: 'SUIT Variable', sans-serif; font-size: 14px; color: #797873;}

/* 반응형 */
@media all and (max-width: 1440px){
    #roomInfo .roomHalf{ margin: 80px 0;}
    #roomInfo .roomHalf:first-child{ padding-right: 50px;}
    .room_data li:nth-child(3) .tit{ width: 22%;}

    #roomDetail{ padding: 100px 60px;}
    .detailWrap .detailTit{ margin-bottom: 80px;}

    .otherWrap .otherHalf:first-child{ width: 47%;}
}
@media all and (max-width: 1024px){
    #sub2sec1 .introTop{ left: 30px;}
    #sub2sec1 .mainBnBottom{ padding: 0 30px;}
    .mainBnBottom h2{ font-size: 24px;}
    .mainBnBtn .pauseBtn{ padding: 0 30px;}
  
    #roomInfo{ padding: 0 30px;}

    /* 떠나요 연동 */
    .room_data li{ align-items: flex-start; flex-direction: column;}
    .room_data li .tit{ width: auto;}
    .room_data li .data{ flex-wrap: wrap;}

    .infoConTxt p{ flex-direction: column; margin-bottom: 10px;}

    /* roomDetail */
    #roomDetail{ padding: 100px 30px;}

    .otherWrap .otherHalf:first-child{ width: 43%;}
}

@media all and (max-width: 768px){
    .introLogo a img{ width: 110px; display: none;}

    #roomInfo{ flex-direction: column; margin-bottom: 80px; padding: 0 20px; }
    #roomInfo .roomHalf{ width: 100%; margin: 20px 0; flex-direction: column-reverse;}
    #roomInfo .roomHalf:first-child{ padding-right: 0; flex-direction: column;}
    .roomHalf .roomInfoTxt{ margin-bottom: 30px;}
    .roomHalf .roomInfoTxt h3{ margin-bottom: 10px;}
    .roomHalf .roomInfoTxt h3::after{ content: ""; display: block; width: 100%; height: 1px; background-color: #b7b5ab; margin-top: 10px;}
    .roomHalf .roomLayout{ margin-bottom: 0; margin-top: 50px;}
    .roomHalf .roomLayout span{ margin: 40px auto 10px;}

    /* #sub2sec1 */
    #sub2sec1{flex-direction: column-reverse; height: 60vh;}
    #sub2sec1 .sub2MainBnSwip{ height: 100%;}
    .mobileBn{ display: block; width: 100%; position: relative;}
    .mobileBn .mobiBnImg{ width: 100%; height: 100vh; background: url(../img/sub2/image22.jpg)no-repeat center/cover;}
    .mobileBn .introLogo2{ position: absolute; top: 20px; left: 20px;}
    .mobileBn .introLogo2 a img{ display: block; width: 110px;}
    .mobileBn .scrollDown{ position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); color: #edede5;}
    .mobileBn .scrollDown::after{ content:""; display: block; width: 2px; height: 10px; background-color: rgba(237, 237, 229, 0.5); margin: 0 auto; animation: scrollD 2s ease-in-out Infinite Alternate;}

    @keyframes scrollD{
    from{ height: 50px; }
    to{ height: 10px; }

}
    .infoConTxt{ margin-top: 0;}

    .resMore{ display: none;}
    .mresMore { display: block; margin-top: 40px; text-align: center; }
    .mresMore a{ display: inline-block; background-color: #886d5a; color: #edede5; padding: 15px 20px;}

    /* roomDetail */
    .detailWrap .detailTit{ flex-direction: column;}


    #otherRoom .otherWrap{ flex-direction: column; align-items: flex-start;}
    .otherWrap .otherHalf{ width: 100%;}
    .otherWrap .otherHalf:first-child{ width: 100%; margin-bottom: 40px;}
}

@media all and (max-width: 520px){
    #sub2sec1 .introTop{ left: 20px;}
    #sub2sec1 .mainBnBottom{ padding: 0 15px;}
    .mainBnBottom h2{ font-size: 1.125rem; margin-right: 10px;}
    .mainBnBtn .pauseBtn{ padding: 0 7px;}

    

    /* roomDetail */
    #roomDetail{ padding: 80px 20px;}
    .detailWrap .detailTit{ flex-direction: column; margin-bottom: 50px;}
    .detailTit h2{ margin-bottom: 20px;}
    .detailWrap .detailLst{ flex-direction: column;}
    .detailLst .detailCon { width: 100%; margin-bottom: 30px;}
    .detailCon .detailImg{ aspect-ratio: 4/3;}

    #otherRoom{ padding: 80px 20px;}
    .otherWrap .otherHalf{ flex-direction: column;}
    .otherHalf .otherCon{ width: 100%; margin-bottom: 30px;}
    .otherCon .othRoomImg{ aspect-ratio: 4/3;}

}

@media all and (max-width: 320px){
    .week_date p{ font-size: 12px; padding: 0;}
}