@charset "utf-8";

.mainBnSwip .swiper-slide.s1{ background: url(../img/sub1/image1.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s2{ background: url(../img/sub1/image2.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s3{ background: url(../img/sub1/image3.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s4{ background: url(../img/sub1/image4.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s5{ background: url(../img/sub1/image5.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s6{ background: url(../img/sub1/image6.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s7{ background: url(../img/sub1/image7.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s8{ background: url(../img/sub1/image8.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s9{ background: url(../img/sub1/image9.jpg) no-repeat center/cover;}

.introImgWrap .introImg{ width: 1440px;}
.introImgWrap .introImg{ background: url(../img/sub1/image5.jpg) no-repeat center/cover;}
.introDeco{ display: none;}
.viewBtn{ border-bottom: none; margin: 60px auto;}

/* storyDet */
#storyDet{ margin: 0 auto; padding: 0 60px; }
#storyDet .detailLst{ position: relative; margin: 0 auto 80px;}
.detailDeco .detDecoBox{ position: absolute; top: 0; right: 0; width: 200px; aspect-ratio: 1; background: #ede1d1;}
.detDecoBox h3{ font-family: 'iceHimchan'; font-size: 16px; color: #A77C52; margin: 30px;  }
.detailDeco2 .detDecoBox{ position: absolute; top: 0; left: 0; width: 200px; aspect-ratio: 1; background: #ede1d1;}
/* .detDecoBox2 h3{ font-family: 'iceHimchan'; font-size: 14px; color: #A77C52; margin: 30px;  } */
.detailLst .detImgLst{ display: flex; justify-content: space-between; padding-top: 5%; gap: 0 30px; margin-right: 5%; position: relative; z-index: 9;}
.detailLst .detImgLst:last-child{ margin-left: 5%; margin-right: 0; }
.detImgLst .detImg{ width: 50%; aspect-ratio: 4/3;}
.detImgLst .detImg.dti1{ background: url(../img/sub1/image2.jpg) no-repeat center/cover; }
.detImgLst .detImg.dti2{ background: url(../img/sub1/image6.jpg) no-repeat center/cover; }
.detImgLst .detImg.dti3{ background: url(../img/sub1/image7.jpg) no-repeat center/cover; }
.detImgLst .detImg.dti4{ background: url(../img/sub1/image8.jpg) no-repeat center/cover; }


/* banner */
#banner{ height: 450px; background: url(../img/sub1/image3.jpg) no-repeat center/cover fixed; }
#banner .bannerIn{ align-items: center; justify-content: center;}
.bannerIn .banTitWrap{ justify-content: center; align-items: center;}
.banTitWrap h2{ font-family: 'NanumDongHwaDdoBag'; font-size: 48px; margin-bottom: 30px;}
.banTitWrap .resBtn2{ border-bottom: 0;}
.resBtn2:hover{ border-radius: 40px;}

/* location */
#location{ padding: 0 60px; margin: 120px auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 0 30px;}
#location .mapSec{ width: 70%; } 
#location .mapTxtWrap{ width: 30%; margin-bottom: 30px;}
.mapTxtWrap h3{  font-family: 'iceHimchan'; font-size: 24px; color: #A77C52;}
.mapTxtWrap p{  font-size: 14px; color: #A77C52;}

#daumRoughmapContainer1774858791258{ width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.root_daum_roughmap .cont .section.lst{ display: none;}


/* 반응형 */
@media all and (max-width: 1440px){
    .introImgWrap .introImg{ width: 85%;}
}

@media all and (max-width: 1024px) {
    .introImgWrap .introImg{ width: 100%;}
    #introSec{ padding: 0 30px;}
    #introSec .introTxtWrap{ left: 30px; aspect-ratio: 16/5; width: 60%;}
    #introSec .introImgWrap{ margin-top: 180px;}
    .introImgWrap .introImg{ width: 100%;}
    .introTit h2{ font-size: 30px;}
    .introTxt p{ font-size: 13px;}
    .introDeco{ display: none;}
    .viewBtn{ margin: 30px auto;}

    #storyDet{ padding: 0 30px;}
    .detailLst .detImgLst{ padding-top: 8%;}

    #location{ padding: 0 30px; margin: 80px auto;}
}
@media all and (max-width: 768px){
    .mainBnCon h2 {  font-size: 36px;}
    #introSec{ flex-direction: column; padding: 0;}
    #introSec .introTxtWrap{ position: relative; left: 0; width: 100%;}
    #introSec .introImgWrap{ margin-top: 0;}

    #storyDet .detailLst{ margin: 0 auto;}
    .detailLst .detImgLst{ padding: 10% 0;}
    
    #banner{ height: 360px;}
    .bannerIn .banTitWrap{ flex-direction: column;}
    .banTitWrap h2{ text-align: center; font-size: 30px;}

    #location{  gap: 20px 0; flex-direction: column; align-items: flex-start; }
    #location .mapSec{ width: 100%;}
    #location .mapTxtWrap{ width: 100%;}
}

@media all and (max-width: 520px){
    .mainBnCon h2{ font-size: 20px;}

    #storyDet{ padding: 0 20px;}
    .detailLst .detImgLst{ padding: 20% 0; gap: 20px 0; margin-right: 0%;}
    .detailLst .detImgLst:last-child{ margin-left: 0%;}
    .detImgLst .detImg{ width: 100%; aspect-ratio: 16/9;}
    

    #banner{ height: 300px;}
    .banTitWrap h2{ font-size: 24px;}
    .detailLst .detImgLst{ flex-direction: column;}

    #location{ padding: 0 20px;}

}