@charset "utf-8";

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

.secCon .secR{ width: 65%;}
.secR .rightImg{ width: 100%; aspect-ratio: 4/2.5; background: url(../img/sub1/image4.jpg) no-repeat center/cover;}

/* sec3 */
#sec3{ margin: 0 auto 70px; width: 100%; height: auto; position: relative;}
#sec3 .backColor{ position: absolute; top: 0; left: 0; width: 100%; height: 47%; background-color: #2c3c39; z-index: 1; }
#sec3 .sec3In{ padding-top: 120px; position: relative; z-index: 2;}
/* .sec3In .sec3Tit{ margin-top: 60px;} */
.sec3In .sec3Tit h2{ font-family: 'MapoFlowerIsland'; font-size: 36px; color: #fff; text-align: center;}

.conContainer{ width: 100%; margin-top: 60px; }
.conContainer .conWrap{ display: flex; justify-content: space-between; margin: 0 auto;}
.conWrap .roomImg{ width: 50%; aspect-ratio: 16/8;}
.conWrap .roomImg a{ display: block; width: 100%; height: 100%;}
.conWrap .roomImg.r1{background: url(../img/sub2/2/image3.jpg) no-repeat center/cover;}
.conWrap .roomImg.r2{background: url(../img/sub2/3/image2.jpg) no-repeat center/cover;}
.conWrap .roomImg.r3{background: url(../img/sub2/4/image2.jpg) no-repeat center/cover;}
.conWrap .roomImg.r4{background: url(../img/sub2/5/image2.jpg) no-repeat center/cover;}
.conWrap .roomImg.r5{background: url(../img/sub2/6/image2.jpg) no-repeat center/cover;}
.conWrap .roomTxtWrap{ margin: 50px 0px 0; position: relative; width: 50%; padding-left: 40px;}
.conWrap .roomTxtWrap h3{ font-family: 'MaruBuri'; margin-bottom: 20px; font-size: 20px; color: #fff; }
.conWrap .roomTxtWrap p span{ display: block; font-size: 14px; color: #fff;}
.conWrap .roomTxtWrap p span:nth-of-type(1){ margin-bottom: 10px;}
.roomTxtWrap .viewBtn{ position: absolute; bottom:20px; right: 0px; width: 100px;}
.wbtn a{ display: block;}
.wbtn a span{ display: block; font-family: 'MapoFlowerIsland'; font-size: 16px; color: #fff; text-align: center; padding: 5px 0;}
.wbtn a .btnLine{ height: 1px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0%;}
.wbtn a:hover::after{ width: 100%; animation: line 0.5s; transition: ease-in-out 0.3s; background-color: #fff;}

.conContainer .conWrap:nth-child(even){ flex-direction: row-reverse;  }
.conWrap:nth-child(even) .roomTxtWrap{ margin: 60px 0px 0px;}
.conWrap:nth-child(even) .roomTxtWrap .viewBtn{ right: 30px;}

.roomCenter{ display: flex; justify-content: center; align-items: center; transform: translateX(-10%);}
.roomCenter .centerImg{ width: 20%; aspect-ratio: 1; background: url(../img/main/image4.jpg) no-repeat center/cover;}

.conWrap.bCon .roomTxtWrap h3{ font-family: 'MaruBuri'; margin-bottom: 20px; font-size: 20px; color: #000; }
.conWrap.bCon .roomTxtWrap p span{ display: block; font-size: 14px; color: #545454;}
.conWrap.bCon .roomTxtWrap p span:nth-of-type(1){ margin-bottom: 10px;}

/* banner */
#banner{ width: 100%; height: 66vh; background: url(../img/main/image1.jpg) no-repeat 50% 50%/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;  }

/* sec4 */
#sec4{ margin:120px auto;}
#sec4 h2{ font-family: 'MapoFlowerIsland'; font-size: 36px; color: #000; text-align: center;  }
#sec4 .sec4Con{ margin-top: 80px; display: flex; justify-content: space-between;}
.sec4Con .enjoyCon{ width: 33.333%; padding: 0 10px; display: flex; justify-content: center; flex-direction: column;}
.enjoyCon .enjoyImg{ width: 100%; aspect-ratio: 3/4; margin-bottom: 30px;}
.enjoyCon .enjoyImg a{ display: block; width: 100%; height: 100%;}
.enjoyCon .enjoyImg.e1{ background: url(../img/sub3/1/image3.jpg) no-repeat center/cover; }
.enjoyCon .enjoyImg.e2{ background: url(../img/sub3/2/image1.jpg) no-repeat center/cover; }
.enjoyCon .enjoyImg.e3{ background: url(../img/sub3/5/image1.jpg) no-repeat center/cover; }
.enjoyCon .enjoyImg.e4{ background: url(../img/sub3/3/image4.jpg) no-repeat center/cover; }
.enjoyCon .enjoyImg.e5{ background: url(../img/sub3/4/image1.jpg) no-repeat center/cover; }
.enjoyCon .enjoyImg.e6{ background: url(../img/sub3/6/image1.jpg) no-repeat center/cover; }
.enjoyCon .enjoyImg.e7{ background: url(../img/sub3/7/image2.jpg) no-repeat center/cover; }
.enjoyCon .enjoyImg.e8{ background: url(../img/sub3/8/image1.jpg) no-repeat center/cover; }
.enjoyCon .enjoyImg.e9{ background: url(../img/sub3/9/image1.jpg) no-repeat center/cover; }
.enjoyCon .enjoyImg.e10{ background: url(../img/sub3/10/image3.jpg) no-repeat center/cover; }
.enjoyCon .enjoyTxt h3{ font-size: 18px; color: #000; margin-bottom: 20px; }
.enjoyCon .enjoyTxt p span{ display: block; font-size: 14px;}
.sec4Con .enjoyCon.joyL{ padding-left: 0;}
.sec4Con .enjoyCon.joyC{ flex-direction: column-reverse;}
.enjoyCon.joyC .enjoyTxt{ margin: 25px 0 30px;}
.enjoyCon.joyC h3{ text-align: center;}
.enjoyCon.joyC p span{ text-align: center; }
.sec4Con .enjoyCon.joyR{ padding-right: 0;}

/* 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.imgLS5{ background: url(../img/sub7/6/image5.jpg) no-repeat center/cover;}
#otherRoom .othRoomCon .othLeft .roomImgL.imgLS6{ background: url(../img/sub7/6/image6.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; cursor: pointer;}
.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;}

.othRight .imgListWrap .imgCon.rimgS13{ background: url(../img/sub7/6/image10.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS14{ background: url(../img/sub7/6/image6.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS15{ background: url(../img/sub7/6/image9.jpg) no-repeat center/cover;}

.othRight .imgListWrap .imgCon.rimgS16{ background: url(../img/sub7/6/image10.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS17{ background: url(../img/sub7/6/image8.jpg) no-repeat center/cover;}
.othRight .imgListWrap .imgCon.rimgS18{ background: url(../img/sub7/6/image9.jpg) no-repeat center/cover;}


@media all and (max-width: 1024px){
    .secCon .secLeft{ width: 42%; margin-right: 20px;}
    .secR .rightImg{ aspect-ratio: 4/3;}
    #sec3 .backColor{ height: 50%;}
}

@media all and (max-width: 768px){
    .secTit h3{ font-size: 18px;}
    .secTit h2{ font-size: 30px;}
    #sec2 .secCon{ flex-direction: column-reverse; margin-top: 30px;}
    .secCon .secLeft{ width: 100%; margin-top: 20px; padding-right: 0;}
    .secLeft .secTxt p{ margin-bottom: 10px;}
    .secLeft .secTxt p:last-child{ margin-top: 10px;}
    .secCon .secR{ width: 100%;}
    .secLeft .viewBtn{ margin-top: 30px;}

    .conContainer{ margin-top: 30px;}
    .conContainer .conWrap{ flex-direction: column; margin-bottom: 30px;}
    .conContainer .conWrap:nth-child(even){ flex-direction: column;}
    .conWrap .roomImg{ width: 100%;}
    .conWrap .roomTxtWrap{ width: 100%; padding-left: 0; margin: 30px 0 0 0;}
    .conWrap:nth-child(even) .roomTxtWrap{ margin:  30px 0 0 0;}
    .roomTxtWrap .viewBtn{ top: 0;}
    .roomCenter .centerImg{ display: none;}
    #sec3 .backColor{ height: 50%;}
    .conWrap:nth-child(even) .roomTxtWrap .viewBtn{ right: 0;}
    #sec3 .sec3In{ padding-top: 80px;}

    #sec4 .sec4Con{ margin-top: 30px;}
    #sec4 h2{ font-size: 30px;}
    .enjoyCon .enjoyTxt h3{ font-size: 18px;}
    .enjoyCon .enjoyImg{ aspect-ratio: 1;}
    .sec4Con .enjoyCon.joyC{ flex-direction: column;}
    .enjoyCon.joyC h3{ text-align: left;}
    .enjoyCon.joyC p span{ text-align: left;}
    .enjoyCon .enjoyTxt p span{ font-size: 13px; display: inline;}
    .sec4Con .enjoyCon{ padding: 0 30px 0 0;}
    .sec4Con .enjoyCon.joyL{ padding-left: 0px;}
    .sec4Con .enjoyCon.joyC{ padding-left: 0;}
    .sec4Con .enjoyCon.joyR{ padding-right: 30px; padding-left: 0;}
    .enjoyCon.joyC .enjoyTxt{ margin: 0;}

    /* B-ZONE SPACE */
    #otherRoom .othRoomCon{ flex-direction: column;}
    #otherRoom .othRoomCon .othLeft{ width: 100%; padding-right: 0;}
    #otherRoom .othRoomCon .othLeft .roomImgL{ aspect-ratio: 16/9;}
    #otherRoom .othRoomCon .othRight{ width: 100%;}
    .othRight .othTxtWrap .othTit{ padding-top: 20px;}
    .othRight .othTxtWrap .roomBtnArea{ margin: 20px auto;}
}

@media all and (max-width: 520px){
    #sec4 h2{ font-size: 24px;}
    .secTit h3{ font-size: 14px;}
    .secTit h2{ font-size: 24px;}
     #sec3 .backColor{ height: 50%;}
     .sec3In .sec3Tit h2{ font-size: 24px;}
     #sec4{ margin: 70px auto;}

     #banner .banCon{ padding: 60px 0;}
     .otherTit h2{ font-size: 28px;}
}

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

    .conWrap.bCon .roomTxtWrap h3{ font-size: 18px;}
    .conWrap .roomTxtWrap h3{ font-size: 18px;}

     #sec3 .backColor{ height: 52%;}
     #sec4{ margin: 45px auto}
     .enjoyCon .enjoyTxt h3{ font-size: 16px;}
     #sec4 h2{ font-size: 22px;}
     .sec4Con .enjoyCon{ padding: 0 20px 0 0;}
     .sec4Con .enjoyCon.joyR{ padding-right: 20px; padding-left: 0;}
}