@charset "utf-8";

.mainBnCenter{ width: 80%; aspect-ratio: 4 / 3; margin: 20px auto;}
.mainBnTxt h2{ font-size: 21px;}

/* mainBn */
.mainBnCenter .mainBnSwip .swiper-slide.s1{ background: url(../img/sub2/2/image1.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s2{ background: url(../img/sub2/2/image2.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s3{ background: url(../img/sub2/2/image3.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s4{ background: url(../img/sub2/2/image4.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s5{ background: url(../img/sub2/2/image5.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s6{ background: url(../img/sub2/2/image6.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s7{ background: url(../img/sub2/2/image7.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s8{ background: url(../img/sub2/2/image8.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s9{ background: url(../img/sub2/2/image9.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s10{ background: url(../img/sub2/2/image10.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s11{ background: url(../img/sub2/2/image11.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s12{ background: url(../img/sub2/2/image12.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s13{ background: url(../img/sub2/2/image13.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s14{ background: url(../img/sub2/2/image14.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s15{ background: url(../img/sub2/2/image15.jpg) no-repeat center/cover;}

/* sec2 */
#sec2{ margin: 70px auto 120px;}
.secTit h3{ font-family: 'MapoFlowerIsland'; font-size: 24px; color: #000; }
.secTit h2{ font-family: 'MapoFlowerIsland'; font-size: 36px; color: #000; }

#sec2 .secCon{ display: flex; justify-content: space-between; margin-top: 45px; }
.secCon .secLeft{width: 35%; display: flex; justify-content: space-between;  flex-direction: column; padding: 0 60px 0 0; }
.secLeft .secTxt p{ font-size: 14px; color: #545454; margin-bottom: 20px;  }
.secLeft .secTxt p:last-child{  margin-top: 0px; margin-bottom: 0;  }

.secCon .secR{ width: 65%;}
.secR .rightImg{ width: 100%; aspect-ratio: 4/3; background: url(../img/sub2/2/image7.jpg) no-repeat center/cover;}

/* .secLeft .viewBtn{ display: inline-block; width: auto;} */
.viewBtn a{ display: inline-block;  position: relative;}
.viewBtn a span{ display: block; font-family: 'MapoFlowerIsland'; font-size: 16px; text-align: center; padding: 5px 0;}
.viewBtn a::after{ content: ''; display: block; height: 1px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0%;}
.viewBtn a:hover::after{ content:''; width: 100%; animation: line 0.5s; transition: ease-in-out 0.3s; background-color: #000;}

/* 떠나요 */
.room_tit{ display: none;}
.room_data li{ margin-bottom: 10px;}
.room_data li .tit{ padding-top: 0; display: inline-block; padding-bottom: 5px;}
.room_data li .data p{ display: inline-block; font-family: 'Paperlogy4'; font-size: 13px; color: #989798;}
.room_data li .data p:nth-of-type(2){ display: none;}
.room_data li .data p::after{ content:'\00a0/\00a0'}
.room_data li .data p:last-child:after{ content:'\00a0'}
.room_data li .data p:first-child:after{ content:'\00a0'}
.room_data li .data{ padding: 0; font-family: 'Paperlogy4'; font-size: 13px; color: #989798;}
.room_data li .person_limit table{ display: none;}

.roomInfoTxt p { font-family: 'Paperlogy4'; font-size: 13px !important; color: #989798 !important; text-indent: 10px;}
.roomInfoTxt p span{ display: block; font-weight: bold; color: #000; font-size: 14px; text-indent: -10px;}

#room_daily_price2{ margin-top: 60px;}


/* 객실 갤러리 */
#gallery{ margin-bottom: 60px;}
.gallTit h2{ font-family: 'MapoFlowerIsland'; font-size: 24px; color: #000; text-align: center;}
.gallTit h2::after{ content: ''; display: block; width: 50px; height: 1px; background-color: #2c3c39; margin: 20px auto 0;}

.galleryWrap{ display: flex; justify-content: space-between; flex-direction: column; margin-top: 30px;}
.galleryWrap .gallList{ display: flex; justify-content: space-between; align-items: center; padding: 10px 0;}
.gallList .gallConL{ width: 75%; min-height: 43.36vh; margin-right: 10px; background: url(../img/sub2/2/image3.jpg) no-repeat center/cover;}
.gallList .gallConS{ width: 25%; min-height: 43.36vh; margin-left: 10px;}
.gallList .gallConM{ width: 50%; min-height: 43.36vh; margin-left: 10px;}
.gallList:nth-child(1) .gallConS{ background: url(../img/sub2/2/image2.jpg) no-repeat center/cover;}
.gallList:nth-child(2) .gallConS.gallTxt{ margin-left: 0px;}
.gallTxt{ display: flex; justify-content: center; align-items: center; flex-direction: column;}
.gallTxt p{ font-family: 'MapoFlowerIsland'; font-size: 5.2rem; text-align: left; color: rgba(44, 60, 57, 0.2); }
.gallList:nth-child(2) .gallConS.g1{background: url(../img/sub2/2/image14.jpg) no-repeat center/cover; margin-right: 10px;}
.gallList:nth-child(2) .gallConM.g2{ background: url(../img/sub2/2/image5.jpg) no-repeat center/cover;}
.gallList:nth-child(3) .gallConS.g1{ background: url(../img/sub2/2/image4.jpg) no-repeat center/cover; margin-left: 0; margin-right: 10px;}
.gallList:nth-child(3) .gallConM.g2{ background: url(../img/sub2/2/image8.jpg) no-repeat center/cover; margin: 0 10px;}
.gallList:nth-child(3) .gallConS.g3{ background: url(../img/sub2/2/image9.jpg) no-repeat center/cover;}

/* otherRoom */
#otherRoom{ width: 100%; background-color: rgba(183, 223, 217, 0.45); padding: 60px 0;}
.othRoomCon{ display: flex; justify-content: space-between;}
.othRoomCon .othLeft{width: 50%; padding-right: 30px;}
.othRoomCon .othLeft .roomImgL{ width: 100%; aspect-ratio: 1; background: #2c3c39;}
.othRoomCon .othLeft .roomImgL.imgLS1{ background: url(../img/sub2/6/image2.jpg) no-repeat center/cover;}
.othRoomCon .othLeft .roomImgL.imgLS2{ background: url(../img/sub2/2/image2.jpg) no-repeat center/cover;}
.othRoomCon .othLeft .roomImgL.imgLS3{ background: url(../img/sub2/3/image1.jpg) no-repeat center/cover;}
.othRoomCon .othLeft .roomImgL.imgLS4{ background: url(../img/sub2/4/image1.jpg) no-repeat center/cover;}
.othRoomCon .othLeft .roomImgL.imgLS5{ background: url(../img/sub2/5/image1.jpg) no-repeat center/cover;}
.othRoomCon .othLeft .roomImgL a{ display: block; width: 100%; height: 100%;}
.othRoomCon .othRight{ width: 50%; display: flex; justify-content: space-between; flex-direction: column;}
.othRight .othTxtWrap{ display: flex; height: 100%; justify-content: space-between; flex-direction: column; align-items: flex-start;}
.othRight .othTxtWrap .othTit{ padding-top: 40px;}
.othRight .othTxtWrap .othTit h3{ font-family: 'MapoFlowerIsland'; font-size: 18px; color: #2c3c39;}
.othRight .othTxtWrap .othTit h2{ font-family: 'MapoFlowerIsland'; font-size: 30px; color: #2c3c39;}
.othRight .othTxtWrap .othTxt p{ font-size: 14px; color: #2c3c39; }
.othRight .othTxtWrap .othTxt p:first-child{ margin-bottom: 10px;}
.othRight .othTxtWrap .roomBtnArea{ width: 100%; display: flex; justify-content: space-between; align-items: center; position:relative; margin-bottom: 30px;}
.othRight .othTxtWrap .roomBtnArea .arrowBtn{ display: flex; justify-content: center; align-items: center;}
.othRight .othTxtWrap .roomBtnArea .arrowBtn i{ font-size: 24px; color: #668a83; margin-left: 20px;}
.othRight .othTxtWrap .roomBtnArea .arrowBtn .othRoomPrev i{ font-size: 24px; color: rgba(102, 138, 131, 0.5); margin-left: 20px;}
.othRight .imgListWrap{ display: flex; justify-content: space-between;}
.othRight .imgListWrap .imgCon{ width: 33.333%; aspect-ratio: 1; margin: 0 10px;}
.othRight .imgListWrap .imgCon:first-child{margin-left: 0;}
.othRight .imgListWrap .imgCon:last-child{margin-right: 0;}
.othRight .imgListWrap .imgCon.rimgS1{ background: url(../img/sub2/6/image5.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS2{ background: url(../img/sub2/6/image12.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS3{ background: url(../img/sub2/6/image13.jpg) no-repeat center/cover;}

.othRight .imgListWrap .imgCon.rimgS4{ background: url(../img/sub2/2/image4.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS5{ background: url(../img/sub2/2/image7.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS6{ background: url(../img/sub2/2/image15.jpg) no-repeat center/cover;}

.othRight .imgListWrap .imgCon.rimgS7{ background: url(../img/sub2/3/image10.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS8{ background: url(../img/sub2/3/image5.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS9{ background: url(../img/sub2/3/image13.jpg) no-repeat center/cover;}

.othRight .imgListWrap .imgCon.rimgS10{ background: url(../img/sub2/4/image3.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS11{ background: url(../img/sub2/4/image8.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS12{ background: url(../img/sub2/4/image9.jpg) no-repeat center/cover;}

.othRight .imgListWrap .imgCon.rimgS13{ background: url(../img/sub2/5/image3.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS14{ background: url(../img/sub2/5/image8.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS15{ background: url(../img/sub2/5/image9.jpg) no-repeat center/cover;}

.viewBtn{ display: flex; justify-content: center; align-items: center; margin-top: 30px;}

/* 반응형 */
@media all and (max-width: 1024px){
    .gallTxt p{ font-size: 3.8rem;}
    .gallList .gallConL{ min-height: 30vh;}
    .gallList .gallConS{ min-height: 30vh;}
    .gallList .gallConM{ min-height: 30vh;}
}

@media all and (max-width: 768px){
    .othRoomCon{ flex-direction: column;}
    .othRoomCon .othLeft{ width: 100%; padding-right: 0;}
    .othRoomCon .othLeft .roomImgL{ aspect-ratio: 16/9;}
    .othRoomCon .othRight{ width: 100%;}
    .othRight .othTxtWrap .othTit{ padding-top: 20px;}
    .othRight .othTxtWrap .roomBtnArea{ margin: 20px auto;}

    #sec2 .secCon{ flex-direction: column-reverse;}
    .secCon .secR{ width: 100%;}
    .secCon .secLeft{ padding: 0; width: 100%; margin-top: 30px;}
    .room_data{ padding-left: 0;}

    
}

@media all and (max-width: 520px){
    #sec2{ margin: 70px auto;}
    .secTit h3{ font-size: 16px;}
    .secTit h2{font-size: 24px;}
    .gallTit h2{ font-size: 20px;}
    
    .viewBtn{ margin-top: 20px;}
    /* .viewBtn{position: relative; margin-bottom: 70px;}
    .viewBtn a{ display:inline-block; margin: 10px auto 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border: 1px solid #000; padding: 10px 20px;}
    .viewBtn a:hover::after{ display: none;} */

    .week_date p{ font-size: 13px; padding: 0 3px;}
    #room_daily_price2{ margin-top: 30px;}

    /* .gallList:nth-child(2) .gallConS.gallTxt{ display: none;} */
    .gallList .gallConS{ width: 50%;}
    .gallTxt{ display: none;}
    .gallTxt p{ font-size: 2rem; display: none;}
    .gallList .gallConL{ min-height: 15vh; margin: 0 5px 0 0;}
    .gallList .gallConS{ min-height: 15vh; margin: 0 5px;}
    .gallList:nth-child(1) .gallConS{ margin-right: 0;}
    .gallList:nth-child(2) .gallConS.g1{ margin: 0 5px 0 0;}
    .gallList .gallConM{ min-height: 15vh;}
    .gallList:nth-child(2) .gallConM.g2{ margin: 0 0 0 5px;}
    .gallList:nth-child(3) .gallConS.g1{ margin: 0 5px 0 0;}
    .gallList:nth-child(3) .gallConS.g3{ margin: 0 0px 0 5px;}
    .gallList:nth-child(3) .gallConM.g2{ margin: 0 5px;}

    .othRight .othTxtWrap .othTit h3{ font-size: 18px;}
    .othRight .othTxtWrap .othTit h2{ font-size: 24px;}
    .othRight .othTxtWrap .othTit{ margin-bottom: 20px;}
    .mainBnCenter{ width: 100%; aspect-ratio: 3/4;}
    .scrollD p{ margin-right: 0;}

}