@charset "utf-8";

/* #main{padding-top: 100px;} */
/* section1 */
#sec1{ padding: 0px 60px;}
#sec1 .introTop{ padding: 20px 0 0;}
#sec1 .introConWrap{ display: flex; justify-content: space-between; align-items: flex-end;}
.introConWrap .introCon{ width: 50%;}
.introCon .introTxt{ padding: 0 60px;}
.introTxt h3{ font-family: "Nunito", sans-serif; font-size: 18px; font-weight: 500; color: #24211c; }
.introTxt p{ margin-top: 30px;}
.introTxt p span{ display: block; font-size: 14px; color: #797873; }
.introCon:last-child{ display: flex; justify-content: flex-end;}
.introCon:last-child .imgContainer{ width: 31.3vw; aspect-ratio: 3 / 4; background: #24211c;}
.introCon:last-child .imgContainer.introImg{ background: url(../img/main/image17.jpg) no-repeat 45% 50%/cover;}
.viewMore { margin-top: 30px;}
.viewMore a{ display: inline-block; padding: 20px 0px; background-color: transparent; transition: all 0.3s ease-in-out;}
.viewMore a:hover{ background-color: #886d5a; color: #edede5; padding: 20px 40px;}

/* section2 */
#section2{ padding: 120px 60px; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column;}
#section2 .sec2Tit{ margin-bottom: 60px; } 
.sec2Tit h2{ font-family: "Cormorant Garamond", serif; font-size: 48px; font-weight: 500; color: #24211c; margin-bottom: 15px; }
.sec2Tit h3{ font-size: 14px; color: #24211c; }

.introLogo a img{ width: 150px;}

#section2 .mainImgSwip{ width: 62.5vw; aspect-ratio: 16/9;}
.mainImgSwip .swiper-slide{ width: 100%; height: 100%;  }
.mainImgSwip .swiper-slide.mainI1{ background: url(../img/main/image1.jpg) no-repeat center/cover;}
.mainImgSwip .swiper-slide.mainI2{ background: url(../img/main/image2.jpg) no-repeat center/cover;}
.mainImgSwip .swiper-slide.mainI3{ background: url(../img/main/image3.jpg) no-repeat center/cover;}
.mainImgSwip .swiper-slide.mainI4{ background: url(../img/main/image4.jpg) no-repeat center/cover;}
.mainImgSwip .swiper-slide.mainI5{ background: url(../img/main/image5.jpg) no-repeat center/cover;}
.mainImgSwip .swiper-slide.mainI6{ background: url(../img/main/image6.jpg) no-repeat center/cover;}
.mainImgSwip .swiper-slide.mainI7{ background: url(../img/main/image7.jpg) no-repeat center/cover;}
.mainImgSwip .swiper-slide.mainI8{ background: url(../img/main/image8.jpg) no-repeat center/cover;}
.mainImgSwip .swiper-slide.mainI9{ background: url(../img/main/image9.jpg) no-repeat center/cover;}
.mainImgSwip .swiper-slide.mainI10{ background: url(../img/main/image10.jpg) no-repeat center/cover;}
.mainImgSwip .swiper-slide.mainI11{ background: url(../img/main/image11.jpg) no-repeat center/cover;}
.mainImgSwip .swiper-slide.mainI12{ background: url(../img/main/image12.jpg) no-repeat center/cover;}
.mainImgSwip .swiper-slide.mainI13{ background: url(../img/main/image13.jpg) no-repeat center/cover;}
.mainImgSwip .swiper-slide.mainI14{ background: url(../img/main/image14.jpg) no-repeat center/cover;}
.mainImgSwip .swiper-slide.mainI15{ background: url(../img/main/image15.jpg) no-repeat center/cover;}
.mainImgSwip .swiper-slide.mainI16{ background: url(../img/main/image16.jpg) no-repeat center/cover;}
.mainImgSwip .swiper-slide.mainI17{ background: url(../img/main/image17.jpg) no-repeat center/cover;}
.mainImgSwip .swiper-slide.mainI18{ background: url(../img/main/image18.jpg) no-repeat center/cover;}
.mainImgSwip .swiper-slide.mainI19{ background: url(../img/main/image19.jpg) no-repeat center/cover;}

#section2 .swipBtn{ width: 62.5vw; margin: 20px auto; display: flex; justify-content: space-evenly;}
.swipBtn div{ cursor: pointer; transition: all 0.3s ease-in-out;}
.swipBtn div:hover{ font-weight: 600; color: #24211c;}

#section2 .mainTxt{ width: 100%; display: flex; justify-content: space-between; align-items: flex-end;}
.mainTxt p{ margin-top: 60px;}
.mainTxt p span{ display: block; font-size: 14px; color: #797873;}
.mainTxt h4{ font-family: "Nunito", sans-serif; font-size: 14px; font-weight: 500; color: #797873;}

/* banner */
#banner{ width: 100%; height: 33vh; display: flex; justify-content: center; align-items: center; background: url(../img/main/image15.jpg) no-repeat 50% 52%/cover;}
#banner p{ font-family: 'singlong'; font-size: 2.25rem; color: #f9f0df; }

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

#section3 .sec3Container{ display: flex; justify-content: space-between; flex-direction: column; align-items: center;}
.sec3Container .overConWrap{ width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 100px; }
.overConWrap .overConTxt{ width: 50vw;  display: flex; justify-content: space-between; flex-direction: column; }
.overConTxt h3{ font-family: "Nunito", sans-serif; font-weight: 500; font-size: 18px; color: #24211c;}
.overConTxt p{ margin: 30px 0 60px;}
.overConTxt p span{ display: block; font-size: 14px;}

.viewMore2 { margin-top: 30px; }
.viewMore2 a{ display: inline-block; padding: 15px 20px; background-color: transparent; transition: all 0.3s ease-in-out; border-bottom: 2px solid #886d5a;}
.viewMore2 a:hover{ background-color: #886d5a; color: #edede5; padding: 15px 20px;}

.mobileViewMore{ display: none;}

.overConWrap .overViewImg{ width:  50vw; display: flex; justify-content: center; align-items: center;}
.overViewImg .viewImgCon{ width: 100%; aspect-ratio: 16/9; background-color: #24211c;}
.overViewImg .viewImgCon.ov1{ background: url(../img/floor1.png) no-repeat center/100%;}
.overViewImg .viewImgCon.ov2{ background: url(../img/floor2.png) no-repeat center/100%;}

/* section4 */
#section4{ display: flex; justify-content: space-between; align-items: center; padding: 0px 60px; background: #886d5a;}
#section4 .sec4Left{  padding: 50px 0; width: 50%; height: 100vh; border-right: 1px solid #b59f91; display: flex; justify-content: space-between; flex-direction: column;}
/* .sec4Left .sec4Tit{ margin-top: 50px;} */
.sec4Left .sec4Tit h2{ font-family: "Cormorant Garamond", serif; font-size: 48px; font-weight: 500; color: #f2f4e6; }
#section4 .sec4Right{ width: 50%; display: flex; align-items: center; flex-direction: column;}
.sec4Left .previewTxtSwip{ width: 100%; margin: auto;}
.previewTxtSwip .swiper-slide { display: flex; align-items: flex-start; justify-content: space-around; }
.preTxtCon{ display: flex; justify-content: space-between; flex-direction: column; width: 30%;}
.preTxtCon:last-child{ padding: 0px 50px; width: 70%;}
.preTxtCon h3{ font-family: "Nunito", sans-serif; font-size: 24px; font-weight: 500; color: #f2f4e6; }
.preTxtCon .typeTxtCon{ display: flex; justify-content: space-between; align-items: center;}
.preTxtCon .typeTxtCon:nth-child(2){  margin: 80px 0px;}
.preTxtCon .typeTxtCon h4{ width: 30%;}
.preTxtCon .typeTxtCon h4 span{ display: block; font-family: "Nunito", sans-serif; font-size: 16px; font-weight: 400; color: #f2f4e6;}
.preTxtCon .typeTxtCon p{ font-size: 14px; color: #f2f4e6; width: 70%;}
.sec4Right .previewImgSwip{ width: 62.5%;}
.previewImgSwip .swiper-slide{ width: 62.5vw; aspect-ratio: 3/4; background: #f9f0df;}
.previewImgSwip .swiper-slide.roomType1{ background: url(../img/sub2/image25.jpg) no-repeat 70% 50%/cover;}
.previewImgSwip .swiper-slide.roomType2{ background: url(../img/sub2/image7.jpg) no-repeat 60% 50%/cover;}

#section4 .roomSwipBtn{ width: 62.5%; margin: 20px 0; display: flex; justify-content: space-between}
.roomSwipBtn div{ cursor: pointer; transition: all 0.3s ease-in-out; color: #ccbaae;}
.roomSwipBtn div:hover{ font-weight: 600; color: #f2f4e6;}

/* section5 */
#section5{ padding: 120px 60px; display: flex; justify-content: space-between; align-items: center;}
#section5 .sec5Container{ width: 50%; height: 58vw; display: flex; justify-content: space-between; align-items: center;  flex-direction: column; padding: 0 80px; position: relative;}
.sec5Container .enjoyConTxt{ display: flex; flex-direction: column; justify-content: space-between; position: sticky; top: 120px; left: 50%; transform: translateX(-50%);}
.enjoyConTxt h3{ font-family: "Nunito", sans-serif; font-size: 24px; font-weight: 600; color: #24211c; margin-bottom: 30px; }
.enjoyConTxt p{ margin-bottom: 20px;}
.enjoyConTxt p span{ display: block; font-size: 14px; }

.sec5Container .joyConWrap{ width: 100%; display: flex; justify-content: space-between; margin-bottom: 50px;}
.joyConWrap .joyCon{ width: 45%; }
.joyCon .joyConImg{ width: 100%; aspect-ratio: 4/3; background-color: #24211c; margin-bottom: 15px;}
.joyCon .joyConImg a{ display: block; width: 100%; height: 100%;}
.joyCon .joyConImg.j1{ background: url(../img/sub3/1/image1.jpg) no-repeat center/cover;}
.joyCon .joyConImg.j2{ background: url(../img/sub3/2/image4.jpg) no-repeat center/cover;}
.joyCon .joyConImg.j3{ background: url(../img/sub3/3/image1.jpg) no-repeat center/cover;}
.joyCon .joyConImg.j4{ background: url(../img/sub3/4/image1.jpg) no-repeat center/cover;}
.joyCon .joyConImg.j5{ background: url(../img/sub3/5/image1.jpg) no-repeat center/cover;}
.joyCon .joyConTxt h4{ font-family: "Nunito", sans-serif; font-size: 18px; font-weight: 400; color: #24211c; }
.joyCon .joyConTxt p{ font-size: 14px; color: #64635e; }

/* 반응형 */
@media all and (max-width: 1440px){
    /* .previewTxtSwip .swiper-slide{ flex-direction: column;} */
    .preTxtCon h3{ font-size: 20px;}
    .preTxtCon .txtConTit{ margin-bottom: 30px;}
    .sec4Right .previewImgSwip{ width: 74%;}
    .sec5Container .enjoyConTxt{ left: 0; transform: none;}
    #section5 .sec5Container{ padding: 0 30px; height: 80vw;}
    #section5 .sec5Container:first-child{ width: 30%; padding: 0;}
    #section5 .sec5Container:last-child{ width: 65%;}
 }
@media all and (max-width: 1024px){
    #sec1{ padding: 0 30px;}
    .introCon .introTxt{ padding: 0 30px;}
    .introCon:last-child .imgContainer{ width: 45vw;}

    #section2{ padding: 60px 30px;}
    #section3{ padding: 60px 30px;}
    .sec2Tit h2{ font-size: 36px;}
    #section2 .mainImgSwip{ width: 80vw;}
    #section2 .swipBtn{ width: 80vw}
    .previewTxtSwip .swiper-slide{ margin: 0px auto 80px; flex-direction: column;}
    .preTxtCon:last-child{ width: 100%;}

    #banner p{ font-size: 1.875rem;}

    #section4{ padding: 0 0 0 30px;}
    .preTxtCon:last-child{ padding: 0 70px 0 0;}
    .sec4Left .sec4Tit h2{ font-size: 36px;}
    .preTxtCon h3{ font-size: 18px;}
    #section4 .sec4Left{ justify-content: flex-end;}
    .sec4Left .previewTxtSwip{ margin:100px auto;}
    #section4 .sec4Left{ padding-bottom: 0; height: 100vh;}
    #section4 .sec4Right{ padding: 180px 0 50px;}

    #section5{ padding: 60px 30px;}
    #section5 .sec5Container{ height: 93vw; padding: 0 0 0 30px;}
    #section5 .sec5Container:first-child{ width: 37%;}
    .joyConWrap .joyCon{ width: 48%;}
}

@media all and (max-width: 768px){
    #sec1{ padding: 0 30px;}
    .introLogo a img{ width: 110px;}
    .introCon .introTxt{ padding: 0 30px 0 0px;}
    .introTxt p span{ font-size: 13px;}
    .viewMore{ margin-top: 15px;}
    .viewMore a{ padding: 10px 0px;}
    .viewMore a:hover{ padding: 10px 20px;}

    #banner{ height: 18vh;}
    #banner p{ font-size: 1.5rem;}

    
    .sec3Container .overConWrap{ flex-direction: column; margin-bottom: 0;}
    .overConWrap .overConTxt{ width: 100%;}
    .overConWrap .overViewImg{ width: 100%; margin-top: 30px;}
    .overConTxt h3{ text-align: center; font-size: 22px;}
    .overConTxt p{ margin: 15px 30px;}
    .overConTxt p span{ text-align: center; display: inline;}
    .viewMore2{ margin: 0 auto;}
    .viewMore2 a{ font-size: 15px; padding: 10px 15px;}

    #section4{ flex-direction: column; padding: 0 30px;}
    #section4 .sec4Left{ width: 100%; height: auto; border-right: none; border-bottom: 1px solid #ccbaae; justify-content: space-evenly;}
    .preTxtCon:last-child{padding: 0;}
    .sec4Left .previewTxtSwip{ margin: 0;}
    .previewTxtSwip .swiper-slide{ margin-top: 40px;}
    #section4 .sec4Right{ padding: 50px 0; flex-direction: column-reverse;}
    .sec4Right .previewImgSwip{ width: 100%; aspect-ratio: 16/9;}
    #section4 .sec4Right{ width: 100%;}
    .preTxtCon .typeTxtCon:nth-child(2){ margin: 40px 0;}

    #section5{ flex-direction: column;}
    .sec5Container .enjoyConTxt{ position: static; margin-bottom: 30px; width: 100%;}
    #section5 .sec5Container{ width: 100%; height: auto; padding: 0;}
    #section5 .sec5Container:first-child{ width: 100%;}
    #section5 .sec5Container:last-child{ width: 100%;}
}
@media all and (max-width: 520px){
    #sec1{ padding: 0 20px;}
    #sec1 .introConWrap{ flex-direction: column; align-items: flex-start;}
    .introConWrap .introCon{ width: 100%;}
    .introCon .introTxt{ padding: 30px 0;}
    .introTxt p{ margin-top: 15px;}
    .introCon:last-child .imgContainer{ width: 100vw; aspect-ratio: 4/5;}

    #section2{ padding: 60px 20px; align-items: center;}
    #section2 .sec2Tit{ margin-bottom: 30px;}
    .sec2Tit h2{ font-size: 30px;}
    #section2 .mainImgSwip{ width: 88vw;}
    #section2 .swipBtn{ width: 88vw; margin: 15px auto 0;}
    .mainTxt p{ margin-top: 20px;}
    .mainTxt h4{ display: none;}

    .overConTxt p{ margin: 0px 10px;}
    .sec3Container .overConWrap{ margin-bottom: 30px;}

    .preTxtCon{ width: 100%;}


    #banner{ height: 15vh;}
    #banner p{ font-size: 1.125rem;}

    #section3{ padding: 60px 20px; align-items: center;}
    .sec3Tit h2{ font-size: 30px;}
    .viewMore2{ display: none;}
    .mobileViewMore { display: block; margin-top: 30px; }
    .mobileViewMore a{ display: inline-block; padding: 15px 20px; background-color: transparent; transition: all 0.3s ease-in-out; border-bottom: 2px solid #886d5a;}
    .mobileViewMore a:hover{ background-color: #886d5a; color: #edede5; padding: 15px 20px;}
    
    #section4{ padding: 0 20px;}
    #section4 .sec4Right { padding: 20px 0 50px; }

    #section5{ padding: 60px 20px;}
    .sec5Container .joyConWrap{ flex-direction: column; margin-bottom: 0px;}
    .joyConWrap .joyCon{ width: 100%; margin-bottom: 30px;}
}