@charset "utf-8";

#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/sub1/image1.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb2{ background: url(../img/sub1/image2.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb3{ background: url(../img/sub1/image3.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb4{ background: url(../img/sub1/image4.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb5{ background: url(../img/sub1/image5.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb6{ background: url(../img/sub1/image6.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb7{ background: url(../img/sub1/image7.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb8{ background: url(../img/sub1/image8.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb9{ background: url(../img/sub1/image9.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb10{ background: url(../img/sub1/image10.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb11{ background: url(../img/sub1/image11.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb12{ background: url(../img/sub1/image12.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb13{ background: url(../img/sub1/image13.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb14{ background: url(../img/sub1/image14.jpg) no-repeat center/cover;}

#mainBn #mainWrap{ position: absolute; left: 30px; bottom: 10px; z-index: 999;}
#mainWrap h2{ font-family: "Vollkorn", serif; font-size: 3.5rem; 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; }


/* exterior */
#exterior{ margin: 100px 0; padding: 0 30px; }
#exterior .afterWrap{ display: flex; justify-content: space-between; flex-direction: column; gap: 80px 0;}
.afterWrap .afterFirst{ display: flex; justify-content: flex-start; gap: 0 20px; align-items: flex-end;}
.afterFirst .afterImg{ width: 25%; aspect-ratio: 3/4; }
.afterFirst .afterImg.ai1{background: url(../img/sub1/image3.jpg) no-repeat center/cover;}
.afterFirst .afterImg.ai2{background: url(../img/sub1/image8.jpg) no-repeat center/cover;}
.afterWrap .afterCenter{ display: flex; justify-content: center; align-items: center;}
.afterCenter h3{ font-family: "Vollkorn", serif; font-size: 2.625rem; }
.afterWrap .afterEnd{ display: flex; justify-content: flex-end; gap: 0 20px; align-items: flex-end;}
.afterEnd .nightImg{ width: 25%; aspect-ratio: 3/4; }
.afterEnd .nightImg.ni1{background: url(../img/sub1/image11.jpg) no-repeat center/cover;}
.afterEnd .nightImg.ni2{background: url(../img/sub1/image14.jpg) no-repeat center/cover;}
.decoTxt{ font-size: 1.125rem;}

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

/* pensionLayout */
#pensionLayout{ margin: 100px 0; padding: 0 30px;}
#pensionLayout .layoutPoto{ margin: 0; padding: 0; width: 100%;}
.layoutPoto img{ width: 100%;}
.layoutPoto .layoutTit{ margin-bottom: 30px;}
.layoutTit h2{ font-family: "Vollkorn", serif; font-size: 2.625rem; }
.layoutTit h3{ font-size: 0.875rem; }

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

    #exterior .afterWrap{ gap: 60px 0;}
    
}

@media all and (max-width: 768px){
    #exterior .afterWrap{ gap: 30px 0;}
    .decoTxt{ font-size: 0.875rem;}
    
}

@media all and ( max-width: 520px){
    #mainBn{ width: calc( 100% - 60px); height: 65vh; padding: 0 0 60px 0px;}
    #mainBn #mainWrap{ left: 10px; bottom: 15px;}
    #mainWrap h2{ font-size: 1.875rem; line-height: 1.5em;}

    #mainStory{ padding: 330px 0;}
    .mainStoryTxtWrap h2{ font-size: 1.125rem;}
    .mainStoryTxt p{ font-size: 11px;}

    #exterior .afterWrap{ gap: 20px 0;}
    .afterWrap .afterFirst{ gap: 0 10px;}
    .afterWrap .afterEnd{ gap: 0 10px;}
    .afterCenter h3{ font-size: 1.5rem;}

    #exterior{ margin: 50px 0; padding: 0 10px;}
    #pensionLayout{ margin: 50px 0; padding: 0 10px;}
    .layoutTit h2{ font-size: 1.5rem;}
}

@media all and (max-width: 320px){ 
    .decoTxt{ font-size: 10px;}
}