@charset "utf-8";



#mainBn{ height: calc(100vh - 100px); display: flex; border-bottom: 1px solid #6a2f2b;}
#mainBn .mainBnSwip{ width: 85.45%; margin: 0; background-color: #6a2f2b; }
.mainBnSwip .swiper-slide{ background: #6a2f2b;}
.mainBnSwip .swiper-slide.mb1{ background: url(../img/main/image1.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb2{ background: url(../img/main/image2.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb3{ background: url(../img/main/image3.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb4{ background: url(../img/main/image4.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb5{ background: url(../img/main/image5.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb6{ background: url(../img/main/image6.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb7{ background: url(../img/main/image7.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb8{ background: url(../img/main/image8.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb9{ background: url(../img/main/image9.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb10{ background: url(../img/main/image10.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb11{ background: url(../img/main/image11.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb12{ background: url(../img/main/image12.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb13{ background: url(../img/main/image13.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb14{ background: url(../img/main/image14.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb15{ background: url(../img/main/image15.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb16{ background: url(../img/main/image16.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb17{ background: url(../img/main/image17.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb18{ background: url(../img/main/image18.jpg) no-repeat center/cover;}
.mainBnSwip .mainBnPage{ color: #fff;;}
.swiper-pagination-current, .swiper-pagination-total{color: #fff;}
.swiper-button-prev:after, .swiper-button-next:after{ color: #fff;}

.mainBnTxt{ width: 14.5%; padding: 0 10px; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 30px; border-left: 1px solid #6a2f2b;}
.mainBnTxt h3{ text-align: right; font-size: 14px;}
.mainBnTxt h2{ font-family: "Bodoni Moda", serif; font-size: 36px; font-weight: 600; text-align: right; margin-bottom: 20px; color: #212529;}
.mainBnTxt p{ text-align: right;}
.mainBnTxt p span{ display: block; font-size: 14px;}

/* story Wrap */
#storyWrap{ padding: 0 0px; display: flex; justify-content: space-between;}
#storyWrap .storyTitL{ display: flex; justify-content: center; align-items: center; border-left: 1px solid #6a2f2b; border-right: 1px solid #6a2f2b; padding: 0 20px;}
.storyTitL p{ writing-mode: vertical-lr; font-family: "Bodoni Moda", serif; font-size: 14px;}
#storyWrap .storyConWrap { display: flex; justify-content: space-between; width: 100%;}
#storyWrap .storyConWrap .storyCon{ width: 100%; display: flex; justify-content: space-between; flex-direction: column; border-right: 1px solid #6a2f2b; padding: 50px 30px;}
#storyWrap .storyConWrap .storyCon:last-child{ border-right: none;}
.storyCon .simgLarge{ width: 100%; aspect-ratio: 1 / 1.25; background: url(../img/main/image12.jpg) no-repeat center/cover;}
/* .storyCon .storyTopImg{ width: 100%; aspect-ratio: 16 / 9; background: url(../img/sub1/image1.jpg) no-repeat center/cover;} */
/* .storyCon .storyTxt{ margin-bottom: 60px;} */
.storyTxt p{ margin-bottom: 20px;}
.storyTxt p span{ display: block; font-size: 14px;}

.viewBtn{ width: 160px; height: 50px; margin-top: 40px; border-bottom: 1px solid #DD793B; transition: all 0.3s ease-in-out;}
.viewBtn a{ display: block; line-height: 50px; text-align: center; font-size: 16px;}
.viewBtn:hover{ background-color: #DD793B;}
.viewBtn:hover a{ color: #F5E0CB;}

.storyCon .storyTopImg { width:100%; aspect-ratio: 16/9; overflow: hidden; }
.storyCon .storyTopImg .vid_box{ position:relative; left:50%; top:50%; transform: translate3d(-50%, -50%, 0); object-fit: cover; min-width: 100%; min-height: 100%; overflow-x: hidden; background: url(../img/vidBg.jpg) no-repeat center/cover;}
.storyCon .storyTopImg .vid_box .vid_frame{ width: 100%; height: 100%; display: block; background:#000; background-repeat:no-repeat; background-position: 50% 50%; background-size: cover; overflow: hidden; filter:brightness(1.05);}

/* ROOMS */
#roomsWrap{ background-color: #6a2f2b; padding: 0 60px; }
.roomsSwip .swiper-slide{ border-left: 1px solid #F5E0CB; padding: 50px; margin: 0; }
/* .roomsSwip .swiper-slide:nth-child(even){ margin-left: 30px;} */
.roomsSwip .swiper-slide .roomImg{ width: 100%; aspect-ratio: 16/9; background-color: #DD793B;}
.roomsSwip .swiper-slide .roomImg a{ display: block; width: 100%; height: 100%;}
.roomsSwip .swiper-slide .roomImg.rimg1{ background: url(http://emfd.cdn3.cafe24.com/sub2/1/image5.jpg) no-repeat center/cover;}
.roomsSwip .swiper-slide .roomImg.rimg2{ background: url(http://emfd.cdn3.cafe24.com/sub2/2/image6.jpg) no-repeat center/cover;}
.roomsSwip .swiper-slide .roomImg.rimg3{ background: url(http://emfd.cdn3.cafe24.com/sub2/3/image6.jpg) no-repeat center/cover;}
.roomsSwip .swiper-slide .roomImg.rimg4{ background: url(http://emfd.cdn3.cafe24.com/sub2/4/image5.jpg) no-repeat center/cover;}
.roomsSwip .swiper-slide .roomImg.rimg5{ background: url(http://emfd.cdn3.cafe24.com/sub2/5/image3.jpg) no-repeat center/cover;}
/* .mainBnNext.swiper-button-next{margin-right: 30px;} */
.mainBnNext.swiper-button-next:after{ font-size: 36px; color: #fff;  }
.roomTxtWrap { margin-top: 30px;}
.roomTxtWrap .roomTit{ margin-bottom: 10px;}
.roomTit h2{ font-family: "Bodoni Moda", serif; font-weight: 600; font-size: 18px; color: #F5E0CB;  }
.roomTxtWrap .txtCon{ display: flex; justify-content: space-between; align-items: center; }
.txtCon p span{ display: block; color: #F5E0CB; font-size: 14px; letter-spacing: 1px;}
.txtCon .roomBtn{ position: relative; padding: 0 10px;}
.txtCon .roomBtn::before{ content:''; display: block; width: 0%; height: 1px; background-color: #F5E0CB; position: absolute; top: 50%; left: 0; transition: all 0.3s ease-in-out;}
.txtCon .roomBtn:hover::before{ content:''; display: block; width: 100%; height: 1px; background-color: #F5E0CB; position: absolute; top: 50%; left: 0; }
.txtCon .roomBtn a{ display: block; font-size: 16px;  color: #F5E0CB;}


/* Enjoy */
#enjoyWrap{ padding: 0 0px 0 0px ; display: flex; justify-content: space-between;}
#enjoyWrap .enjoyTit{ padding: 0 20px; display: flex; justify-content: center; align-items: center; border-left: 1px solid #6a2f2b; border-right: 1px solid #6a2f2b;}
#enjoyWrap .enjoyTit h2{ writing-mode: vertical-lr; font-family: "Bodoni Moda", serif; font-size: 14px; color: #DD793B; }
#enjoyWrap .tabWrap{ width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 70px 0px 70px 0;}
.tabWrap .tabCon{ width: 60%;  }
.tabWrap .tabCon .joyImgCon{ width: 100%; aspect-ratio: 4/3; background: #6a2f2b;}
.tabWrap .tabCon .joyImgCon a{ display: block; width: 100%; height: 100%;}
.tabWrap .tabCon .joyImgCon.enjoy1{ background: url(../img/sub3/1/image4.jpg) no-repeat center/cover;}
.tabWrap .tabCon .joyImgCon.enjoy2{ background: url(../img/sub3/2/image1.jpg) no-repeat center/cover;}
.tabWrap .tabNav{ width: 40%; display: flex; flex-direction: column;}
.tabNav li{ border-bottom: 1px solid #6a2f2b; padding: 50px 60px 50px 70px;}
.tabNav li:last-child{ border-bottom: none;}

.tabNav > li > a > h2{ font-family: "Bodoni Moda", serif; font-size: 24px; color: #212529; margin-bottom: 30px;}
.tabNav > li > a > h2::before{content: ''; display: none; opacity: 0;}
.tabNav > li > a > p > span{ display: block; font-size: 14px;}
.tabNav>li>a.active > h2{ position: relative;}
/* .tabNav>li>a.active>h2::before{ content: ''; display: block; opacity: 1; width:70px; height: 1px; background-color: #6a2f2b; position: absolute; top: 50%; left: -70px;} */
/* .tabNav>li>a>h2::before{ content: ''; display: none; opacity: 0; width:70px; height: 1px; background-color: #6a2f2b; position: absolute; top: 50%; left: -70px; } */

/* 반응형 */
@media all and (max-width: 1440px){
    /* .tabWrap .tabCon .joyImgCon{ aspect-ratio: 1;} */
    .tabNav li{ padding: 50px 30px 50px 40px; }
}
@media all and (max-width: 1024px){
    #mainBn .mainBnSwip{ width: 78.6%;}
    .mainBnTxt{ width: 21.2%;}
    #storyWrap{ padding: 0;}
    .viewBtn{ margin-top: 20px;}
    
    #roomsWrap{ padding: 0;}
    .roomsSwip .swiper-slide{ padding: 50px 30px 50px;}
    .roomTxtWrap .txtCon{ flex-direction: column; justify-content: flex-start; align-items: flex-start;}
    .txtCon p{ width: 100%;}
    .txtCon .roomBtn{ padding: 0; margin-top: 30px;}
    /* .txtCon .roomBtn a{ padding: 0 5px 0 0;} */

    #enjoyWrap{ padding: 0;}
    #enjoyWrap .tabWrap{ flex-direction: column-reverse;}
    .tabWrap .tabCon{ width: 100%;}
    .tabWrap .tabNav{ width: 100%; display: flex; flex-direction: row;}
    .tabNav>li>a.active{ display: block;}
    .tabNav li{ width: 50%; padding: 0px 30px 30px 40px;}
    .tabNav li:last-child{ border-bottom: 1px solid #6a2f2b;}
    .tabWrap .tabCon .joyImgCon{ aspect-ratio: 4/3;}
    #enjoyWrap .tabWrap{ padding: 70px 0 0px 0;}
    .mainBnNext.swiper-button-next:after{ font-size: 24px; margin-left: 20px;}
    .roomsSwip .swiper-slide.swiper-slide-active{border-left: 0;}

    /* .roomsSwip .swiper-slide{ border-right: 1px solid #F5E0CB;} */
    /* .roomsSwip .swiper-slide:nth-child{ } */
}
@media all and (max-width: 768px){
    #mainBn{ flex-direction: column; border-bottom: 0;}
    #mainBn .mainBnSwip{ width: 100%;  height: 100vh;}
    .mainBnTxt{ width: 100%; align-items: flex-start; border-left: none; border-top: 1px solid #6a2f2b; padding-top: 30px;}
    .mainBnTxt h3, .mainBnTxt h2, .mainBnTxt p{ text-align: left;}

    #storyWrap{ flex-direction: column;}
    #storyWrap .storyTitL{ border-left: none; border-right: none; padding: 10px 0;}
    .storyTitL p{ writing-mode: horizontal-tb; display: none; }
    #storyWrap .storyConWrap{ flex-direction: column;}
    #storyWrap .storyConWrap .storyCon{ border-right: none; border-bottom: 1px solid #6a2f2b; padding: 0px 15px 30px; }
    #storyWrap .storyConWrap .storyCon:last-child{ padding: 30px 15px;}
    .storyTxt{ margin-top: 40px;}
    .storyCon .simgLarge{ aspect-ratio: 4/3;}
    .viewBtn{ width: 120px;}
    .viewBtn a{ font-size: 14px;}

    .roomsSwip .swiper-slide{border-left: none;}
    .roomsSwip .swiper-slide .roomImg{ aspect-ratio: 4/3;}
    /* .mainBnNext.swiper-button-next:after{ margin-left: 0;} */
    .mainBnNext.swiper-button-next:after{ margin-left: 0;}
    .roomsSwip .swiper-slide{ padding: 50px;}

    #enjoyWrap .tabWrap{ padding: 0px 0 0px;}
    .tabWrap .tabNav{ padding: 0 ;}
    .tabNav li{ padding: 30px 20px 30px 20px; border-right: 1px solid #6a2f2b;}
    #enjoyWrap{ flex-direction: column;}
    #enjoyWrap .enjoyTit{ border-left: none; border-right: none; border-top: 1px solid #6a2f2b; border-bottom: 1px solid #6a2f2b;}
    #enjoyWrap .enjoyTit h2{ writing-mode: horizontal-tb; padding: 20px 0;}
    
}

@media all and (max-width: 520px){
    .tabNav > li > a > h2{ font-size: 18px;}
    .tabNav>li>a.active > h2{font-size: 18px;}
    .tabNav > li > a > p > span{ font-size: 12px;}
    .tabNav > li > a > p > span:nth-child(2), .tabNav > li > a > p > span:nth-child(3){ display: none;}

    .roomsSwip .swiper-slide{ padding: 50px 40px;}
}