@charset "utf-8";

img {max-width: 100%}

/* .mainBn{ height: auto;} */
.mainBnCenter{ width: 90%; aspect-ratio: 4 / 3; display: flex; justify-content: space-between; margin: 20px auto; }
.mainBnCenter .centerTxt { margin-top: 20px;}
.mainBnCenter .centerTxt h2{font-family: 'MapoFlowerIsland'; font-size: 20px;}
.mainBnCenter .centerTxt h2 span{font-family: 'MapoFlowerIsland';  font-size: 30px;}
.mainBnCenter .centerImgLst{ width: 80%;}
.mainBnCenter .mainBnSwip{ width: 100%; height: 100%; }
.mainBnCenter .mainBnSwip .swiper-slide.s1{ background: url(../img/sub7/1/image1.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s2{ background: url(../img/sub7/1/image2.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s3{ background: url(../img/sub7/1/image3.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s4{ background: url(../img/sub7/1/image4.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s5{ background: url(../img/sub7/1/image5.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s6{ background: url(../img/sub7/1/image6.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s7{ background: url(../img/sub7/1/image7.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s8{ background: url(../img/sub7/1/image8.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s9{ background: url(../img/sub7/1/image9.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s10{ background: url(../img/sub7/1/image10.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s11{ background: url(../img/sub7/1/image11.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s12{ background: url(../img/sub7/1/image12.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s13{ background: url(../img/sub7/1/image13.jpg) no-repeat center/cover;}


/* .mainBn{ height: auto;}
.mainBnCenter{ width: 80%; aspect-ratio: 4 / 3; background: url(../img/main/image11.jpg) no-repeat center/cover;}
.mainBnTxt h2{ font-size: 21px;} */

/* sec2 */
#sec2{ margin: 70px auto;}
#sec2 .secCon{margin-bottom: 30px; justify-content: center; flex-direction: column; position: relative;}
.secCon .secR{ width: 80%; margin: 0 auto;}
.secR .rightImg{ aspect-ratio: 16/9; background: url(../img/layout2.jpg) no-repeat; background-size: 100%;}
.secCon .secLeft{ margin-right: 20px;}
.secLeft .secTxt p:last-child{ margin-top: 0;}

.secTit h3{ text-align: center; font-size: 18px;}
.secTit h2{ text-align: center; font-size: 30px;}


#sec2 .viewBtn{ margin : 50px auto 0; }
#sec2 .viewBtn a{ text-align: center;}

/* 떠나요 */
.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::after{ content:'\00a0/\00a0'}
.room_data li .data p:last-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;}

#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/image1.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 p{ font-family: 'MapoFlowerIsland'; font-size: 8.2rem; text-align: center; color: rgba(44, 60, 57, 0.2); }
.gallList:nth-child(2) .gallConS.g1{background: url(../img/sub2/2/image3.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/image6.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 */
.otherTit{ margin-bottom: 50px;}
.otherTit h2{ font-family: 'MapoFlowerIsland'; font-size: 36px; text-align: center;}
#otherRoom{ width: 100%; background-color: rgba(183, 223, 217, 0.45); padding: 120px 0;}
#otherRoom .othRoomCon{ display: flex; justify-content: space-between;}
#otherRoom .othRoomCon .othLeft{width: 50%; padding-right: 30px;}
#otherRoom .othRoomCon .othLeft .roomImgL{ width: 100%; aspect-ratio: 1; background: #2c3c39;}
#otherRoom .othRoomCon .othLeft .roomImgL.imgLS1{ background: url(../img/sub7/2/image1.jpg) no-repeat center/cover;}
#otherRoom .othRoomCon .othLeft .roomImgL.imgLS2{ background: url(../img/sub7/3/image7.jpg) no-repeat center/cover;}
#otherRoom .othRoomCon .othLeft .roomImgL.imgLS3{ background: url(../img/sub7/4/image1.jpg) no-repeat center/cover;}
#otherRoom .othRoomCon .othLeft .roomImgL.imgLS4{ background: url(../img/sub7/5/image1.jpg) no-repeat center/cover;}
#otherRoom .othRoomCon .othLeft .roomImgL a{ display: block; width: 100%; height: 100%;}
#otherRoom .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/sub7/2/image9.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS2{ background: url(../img/sub7/2/image10.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS3{ background: url(../img/sub7/2/image12.jpg) no-repeat 0% 50%/cover;}

.othRight .imgListWrap .imgCon.rimgS4{ background: url(../img/sub7/3/image6.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS5{ background: url(../img/sub7/3/image8.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS6{ background: url(../img/sub7/3/image9.jpg) no-repeat center/cover;}

.othRight .imgListWrap .imgCon.rimgS7{ background: url(../img/sub7/4/image4.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS8{ background: url(../img/sub7/4/image5.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS9{ background: url(../img/sub7/4/image9.jpg) no-repeat center/cover;}

.othRight .imgListWrap .imgCon.rimgS10{ background: url(../img/sub7/5/image4.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS11{ background: url(../img/sub7/5/image5.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS12{ background: url(../img/sub7/5/image9.jpg) no-repeat center/cover;}



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

@media all and (max-width: 768px){
    .mainBnCenter{ flex-direction: column; aspect-ratio: 9/16;} 
    .mainBnCenter .centerTxt{ margin: 0px 0 30px;}
    .mainBnCenter .centerImgLst{width:100%; height: 100%;}
    .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;}
    
    .secCon .secR{ width: 100%;}

    #otherRoom .othRoomCon .othLeft{width: 100%; padding-right: 0;}
    #otherRoom .othRoomCon .othRight{ width: 100%;}
}

@media all and (max-width: 520px){

    .secCon .secR{ width: 100%;}
    

    /* .gallList:nth-child(2) .gallConS.gallTxt{ display: none;} */
    .gallTxt p{ font-size: 2.6rem;}
    .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;}

    #otherRoom{ padding: 70px 0;}
    .otherTit h2{ font-size: 30px;}
    .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: 9/16;}
    .scrollD p{ margin-right: 0;}
    
}