@charset "utf-8";
html, body{ overflow-x: hidden;}

#mainBn{ width: calc( 100% - 80px); height: 100vh; position: relative; margin-left: auto; padding: 0 0 60px 110px;}
#mainBn .mainBnSwip{ width: 100%; height: 100%; z-index: 9;}
.mainBnSwip .swiper-slide{ width: 100%; height: 100%;}
.mainBnSwip .swiper-slide.mb1{ background: url(../img/sub2/1/image1.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb2{ background: url(../img/sub2/1/image2.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb3{ background: url(../img/sub2/1/image3.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb4{ background: url(../img/sub2/1/image4.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb5{ background: url(../img/sub2/1/image5.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb6{ background: url(../img/sub2/1/image6.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb7{ background: url(../img/sub2/1/image7.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb8{ background: url(../img/sub2/1/image8.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb9{ background: url(../img/sub2/1/image9.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb10{ background: url(../img/sub2/1/image10.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb11{ background: url(../img/sub2/1/image11.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb12{ background: url(../img/sub2/1/image12.jpg) no-repeat center/cover;}

#mainBn #mainWrap{ position: absolute; left: 30px; bottom: 10px; z-index: 999;}
#mainWrap h2{ font-family: "Vollkorn", serif; font-size: 56px; line-height: 1em; }
#mainWrap .mainBnPage{ display: flex; align-items: center;}
.mainBnPage .mainBnLine{ width:10%; height: 1px; background: #2E3A3E; margin: 0 10px;}
.mainBnPage div{ font-family: "Vollkorn", serif; cursor: pointer; }

/* subDeco */
#subDeco{ display: flex; justify-content: flex-end; margin-bottom: 40px; padding: 0 30px;} 
#subDeco img{ width: 13.75rem;}

/* subRoomInfo */
#subRoomInfo{ display: flex; justify-content: space-between; margin-bottom: 90px; padding: 0 30px;}
#subRoomInfo .subHalfCon{ width: 50%; }
.subHalfCon .subInfoImg{ width: 100%; aspect-ratio: 1.618/1; background: url(../img/sub2/1/image2.jpg) no-repeat center/cover; }
.subHalfCon .subTxtWrap{ height: 100%; display: flex; justify-content: space-between; flex-direction: column; align-items: flex-end; margin-left: 30px;}
.subTxtWrap .subInfoTit{ display: flex; justify-content: flex-end; flex-direction: column;}
.subInfoTit h2{  font-family: 'BareunBold'; font-size: 42px; text-align: right;}
.subInfoTit p{ margin-top: 20px;}
.subInfoTit p span{ display: block; text-align: right;}

/* ddnayo */
#room_daily_price1{ width: 100%;}
.room_tit{ display: none;}
.room_data{ padding: 0;}
.room_data li .person_limit table{ display: none;}
.room_data li{ display: flex; align-items: center; flex-direction: row-reverse;}
.room_data li .tit{ font-size: 13px;}
.room_data li .data{ display: flex; padding: 0; font-size: 14px;}
.room_data li .data p{ font-size: 14px; display: inline;}
.room_data li .data p::after{ content: '\00a0/\00a0'; }
.room_data li .data p:last-child::after{ content: '\00a0'; }
.room_data li .tit{ color: #2E3A3E; padding: 0 0px 0 10px;}

/* roomNoti */
#roomNoti{ margin: 100px 0; padding: 0 30px;}
#roomNoti .notiImgLst{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
.notiImgLst .notiImgM{ width: 50%; aspect-ratio: 1.618/1;}
.notiImgLst .notiImgM.rn1{ background: url(../img/sub2/1/image2.jpg) no-repeat center/cover; margin-right: 10px;}
.notiImgLst .notiImgM.rn2{ background: url(../img/sub2/1/image3.jpg) no-repeat center/cover; margin-left: 10px;}
.notiImgLst .notiImgM.rn3{ background: url(../img/sub2/1/image8.jpg) no-repeat center/cover; margin-left: 10px;}
.notiImgLst .notiImgM.rn4{ background: url(../img/sub2/1/image9.jpg) no-repeat center/cover; margin-right: 10px;}
.notiImgLst .notiImgM.rn5{ background: url(../img/sub2/1/image10.jpg) no-repeat center/cover; margin-left: 10px;}
.notiImgLst .notiImgL{width: 100%; aspect-ratio: 16/9; background: url(../img/sub2/1/image4.jpg) no-repeat center/cover;}
.notiImgLst .notiImgTxt{ width: 50%; margin-right: 10px;}
.notiImgTxt p{ padding-bottom: 10px; color: #63666A;}
.notiImgTxt p span{ display: block; color: #63666A;}
#roomNoti .notiTxt{ margin:60px 0; display: flex; justify-content: space-around; gap: 20px;}
.notiTxt p{ padding-bottom: 10px;}
.notiTxt p span{ display: block; color: #63666A;}

/* banner */
#bannerCon{ background: url(../img/sub2/1/image11.jpg) no-repeat center/cover;}

/* othRoom */
#othRoom{ margin: 100px 0; padding: 0 30px;}
#othRoom .othRoomTop{ margin-bottom: 30px; display: flex; justify-content: space-between;}
.othRoomTop h2{ font-family: "Vollkorn", serif; font-size: 42px;}
.othRoomTop .othRoomPage{ display: flex; justify-content: center; align-items: center;}
.othRoomPage div{ font-family: "Vollkorn", serif; cursor: pointer;}
.othRoomPage .othRoomLine{ width: 30px; height: 1px; background: #2E3A3E; margin: 0 10px;}
.othRoomSwip .swiper-slide{ display: flex; justify-content: space-between; align-items: center;}
.othRoomSwip .swiper-slide .othSpaceImg{ width: 60%; aspect-ratio: 1.618/1;}
.othRoomSwip .swiper-slide .othSpaceImg a{ display: block; width: 100%; height: 100%;}
.othRoomSwip .swiper-slide .othSpaceImg.oth1{ background: url(../img/sub2/1/image2.jpg) no-repeat center/cover;}
.othRoomSwip .swiper-slide .othSpaceImg.oth2{ background: url(../img/sub2/2/image2.jpg) no-repeat center/cover;}
.othRoomSwip .swiper-slide .othSpaceImg.oth3{ background: url(../img/sub2/3/image2.jpg) no-repeat center/cover;}
.othRoomSwip .swiper-slide .othSpaceImg.oth4{ background: url(../img/sub2/4/image1.jpg) no-repeat center/cover;}
.othRoomSwip .swiper-slide .othSpaceImg.oth5{ background: url(../img/sub2/5/image1.jpg) no-repeat center/cover;}
.othRoomSwip .swiper-slide .othSpaceImg.oth6{ background: url(../img/sub2/6/image1.jpg) no-repeat center/cover;}
.othRoomSwip .swiper-slide .othSpaceImg.oth7{ background: url(../img/sub2/7/image1.jpg) no-repeat center/cover;}
.othRoomSwip .swiper-slide .othSpaceImg.oth8{ background: url(../img/sub2/8/image1.jpg) no-repeat center/cover;}
.othRoomSwip .swiper-slide .othSpaceImg.oth9{ background: url(../img/sub2/9/image1.jpg) no-repeat center/cover;}
.othRoomSwip .othSpaceTxt{ width: 35%; display: flex; justify-content: center; flex-direction: column; align-items: center;}
.othSpaceTxt h3{ font-family: 'BareunBold'; font-size: 24px; margin-bottom: 10px; }

/* 반응형 */
@media all and ( max-width: 1024px){
    #mainBn{ padding: 0 0 60px 70px;}
    #mainWrap h2{ font-size: 48px; line-height: 1.25em;}

    #subRoomInfo{ margin-bottom: 60px;}
    .subHalfCon .subInfoImg{ aspect-ratio: 1;}
    
    .room_data li{ flex-direction: column; justify-content: flex-end; align-items: flex-end; margin-bottom: 10px;}
    .room_data li .data{ flex-direction: column; text-align: right;}
    .room_data li .data p::after{content: '\00a0';}

    .notiTxt p span{ display: inline; font-size: 12px;}
    .notiImgTxt p{ font-size: 12px;}
    .notiImgTxt p span{ font-size: 0.75rem; display: inline;}
}

@media all and (max-width: 768px){
    #subDeco img{ width: 9.75rem;}

    #subRoomInfo{ flex-direction: column; gap: 30px 0;}
    #subRoomInfo .subHalfCon{ width: 100%;}
    .subHalfCon .subTxtWrap{ margin-left: 0; align-items: flex-start;}
    .subInfoTit h2{ text-align: left;}
    .subHalfCon .subInfoImg{ aspect-ratio: 4/3;}
    .subInfoTit p{ margin-top: 0; text-align: left;}
    .subInfoTit p span{ display: inline; text-align: left;}
    .room_data li{ justify-content: flex-start; align-items: flex-start; margin-bottom: 10px;}
    .room_data li .data{ text-align: left;}
    .room_data li .data p::after{content: '\00a0';}
    .room_data li .tit{ padding: 0;}
    .room_data{ margin-top: 30px;}
    
    #roomNoti .notiTxt{ margin: 30px 0;}
    .notiImgTxt p:last-child{ display: none; }

    .othRoomSwip .swiper-slide .othSpaceImg{ aspect-ratio: 1;}
    
}

@media all and ( max-width: 520px){
    #mainBn{ width: calc( 100% - 60px); height: 65vh; padding: 0 0 60px 0px;}
    #mainBn #mainWrap{ left: 10px;}
    #mainWrap h2{ font-size: 36px; line-height: 1.5em;}
    #subRoomInfo{ flex-direction: column; padding: 0 10px;}
    .subHalfCon .subTxtWrap{ margin-left: 0;}
    #subRoomInfo .subHalfCon{ width: 100%;}
    .subInfoTit h2{ text-align: left; font-size: 30px;}

    #subDeco{ justify-content: center;}
    #subDeco img{ width: 4.75rem;}

    #subRoomInfo{ margin-bottom: 30px;}
    .subHalfCon .subInfoImg{ aspect-ratio: 4/3; margin-bottom: 20px;}
    .subInfoTit p{ margin-top: 0; text-align: left;}
    .subInfoTit p span{ display: inline; text-align: left;}

    /* 떠나요 */
    #room_des{ margin-top: 30px;}
    .week_date p{ font-size: 12px;}
    .room_data li{ align-items: flex-start;}
    .room_data li .data{ text-align: left;}
    .room_data li .tit{ padding: 0;}

    #roomNoti{ margin: 60px 0; padding: 0 10px;}
    .notiTxt p:last-child{ display: none;}
    .notiImgLst .notiImgM.rn1, .notiImgLst .notiImgM.rn4{ margin-right: 5px; }
    .notiImgLst .notiImgM.rn2, .notiImgLst .notiImgM.rn5{ margin-left: 5px; }
    #roomNoti .notiImgLst:nth-of-type(4){ flex-direction: column; }
    #roomNoti .notiImgLst:nth-of-type(4) .notiImgTxt{ width: 100%; margin-right: 0; margin-bottom: 15px;}
    .notiImgLst .notiImgM.rn3{ width: 100%; margin: 0; }
    #roomNoti .notiImgLst{ margin-bottom: 10px;}
    #roomNoti .notiTxt{ margin: 15px 0;}
    .notiTxt p{ padding-bottom: 0; font-size: 12px;}
    .notiImgTxt p{ padding-bottom: 0;}
    

    #othRoom{ margin: 60px 0; padding: 0 10px;}
    .othRoomTop h2{ font-size: 30px;}
    .othRoomPage .othRoomLine{ width: 15px; margin: 0 5px;}
    .othRoomSwip .swiper-slide{ flex-direction: column;}
    .othRoomSwip .swiper-slide .othSpaceImg{ width: 100%;}
    .othRoomSwip .othSpaceTxt{ width: 100%; margin-top: 30px;}
    .othSpaceTxt h3{ font-size: 18px;}
    .othSpaceTxt p{ font-size: 12px;}
    .othSpaceTxt .btnType{ display: none;}
}

@media all and (max-width: 320px){ 
    .othRoomTop h2{ font-size: 24px;}
}