@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/sub2/1/image1.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s2{ background: url(../img/sub2/1/image2.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s3{ background: url(../img/sub2/1/image3.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s4{ background: url(../img/sub2/1/image4.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s5{ background: url(../img/sub2/1/image5.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s6{ background: url(../img/sub2/1/image6.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s7{ background: url(../img/sub2/1/image7.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s8{ background: url(../img/sub2/1/image8.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s9{ background: url(../img/sub2/1/image9.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s10{ background: url(../img/sub2/1/image10.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s11{ background: url(../img/sub2/1/image11.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s12{ background: url(../img/sub2/1/image12.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s13{ background: url(../img/sub2/1/image13.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s14{ background: url(../img/sub2/1/image14.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s15{ background: url(../img/sub2/1/image15.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s16{ background: url(../img/sub2/1/image16.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s17{ background: url(../img/sub2/1/image17.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s18{ background: url(../img/sub2/1/image18.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s19{ background: url(../img/sub2/1/image19.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s20{ background: url(../img/sub2/1/image20.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s21{ background: url(../img/sub2/1/image21.jpg) no-repeat center/cover;}


/* sec2 */
#sec2{ margin: 70px auto 70px;}
#sec2 .secCon{margin-bottom: 30px; justify-content: center; flex-direction: column; position: relative;}
.secCon .secR{ width: 75%; 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{ font-family: 'MapoFlowerIsland'; font-size: 18px; color: #000; text-align: center;}
.secTit h2{ font-family: 'MapoFlowerIsland'; font-size: 30px; color: #000; text-align: center;}

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

#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 80px 0 0; }
.secLeft .secTxt p{ font-size: 14px; color: #545454; margin-bottom: 20px;  }
.secLeft .secTxt p:last-child{  margin-top: 0px; margin-bottom: 0;  }
/* .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;}

@keyframes line{
    from{ width: 0%;}
    to{ width: 100%;}
}

/* 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;}

/* banner */
#banner{ width: 100%; height: 66vh; background: url(../img/sub2/1/image3.jpg) no-repeat 0% 80%/cover; position: relative; z-index: 1;}
#banner .bannerBlack{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.25); z-index: 2;}
#banner .banCon{ height: 100%; padding: 90px 0 60px 0; display: flex; justify-content: space-between; flex-direction: column; position: relative; z-index: 3;}
#banner .banCon h2{ font-family: 'MapoFlowerIsland'; font-size: 24px; color: #fff;}
#banner .banCon .bannerTxt{ text-align: right;  }
#banner .banCon .bannerTxt span{ display: block; font-size: 14px; color: #fff;  }


/* 반응형 */
@media all and (max-width: 1024px){
    .mainBnCenter{width: 100%;}
    .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 .centerImgLst{ width: 100%; height: 100%;}
    .mainBnCenter .centerTxt{ margin: 0px 0px 30px;}
    

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

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

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