@charset "utf-8";

.nonbr{ display: block;}

#sub3sec1{ position: relative;  padding: 0px 60px 0px;}
#sub3sec1 .introTop{ padding: 30px 0; display: inline-block;}

#sub3sec1 .sub3mainWrap{ display: flex; justify-content: space-between;}
.sub3mainWrap .mainHalf{ width: 50%; padding: 0;}
.mainHalf .mainBnCon{ width: 86%; aspect-ratio: 1; background: url(../img/sub1/image1.jpg) no-repeat center/cover; display: flex; align-items: flex-end;}
.mainBnCon .mainBnConIn{ width: 100%; height: auto; padding: 0px 0 60px 40px;}
.mainBnConIn h2{ font-family: "Cormorant Garamond", serif; font-size: 42px; font-weight: 500; color: #f2f4e6; line-height: 1.25em; margin-bottom: 50px; text-shadow: 2px 3px 2px rgba(10, 10, 10, 0.7);}
/* .mainBnConIn .moreScroll{ margin-top: ;} */
.mainBnConIn .moreScroll span{ display: inline-block; color: #f2f4e6; padding-bottom: 10px; font-family: "Nunito", sans-serif; font-size: 16px; font-weight: 400; }
.mainBnConIn .moreScroll::after{ content: ""; display: block; width: 240px; height: 2px; background: #f2f4e6; transition: all ease-in-out; animation: moreScroll 2s ease-in-out Infinite Alternate;}

@keyframes moreScroll{
    from{ width: 0px; }
    to{ width: 20%; }

}

.introLogo a img{ width: 150px;}

/* mainHalf 오른쪽 */
.mainConWrap{ width: 100%; height: 100%; display: flex; justify-content: space-between; flex-direction: column;}
.mainConWrap .mainConTit{ padding-right: 60px;}
.mainConWrap .mainConTit h2{ font-family: "Cormorant Garamond", serif; font-size: 36px; font-weight: 400; line-height: 1.5em; color: #24211c; } 
.mainConTit .mainTitTxt{ display: flex; justify-content: space-between; margin: 30px 0;}
.mainConTit .mainTitTxt p{ font-family: 'SUIT Variable', sans-serif;  font-size: 14px; font-weight: 400; line-height: 1.5em; color: #64635e; margin-right: 10px;}
.mainConTit .mainTitTxt p:last-child{ margin-right: 0;}
.mainConWrap .mainImgList{ width: 100%; display: flex; justify-content: space-between;}
.mainImgList .mainImgCon{ width: 50%; aspect-ratio: 4/3; margin-right: 20px; background-color: #24211c;}
.mainImgList .mainImgCon.lstImg1{ background: url(../img/sub1/image11.jpg) no-repeat center/cover;}
.mainImgList .mainImgCon.lstImg2{ background: url(../img/sub1/image6.jpg) no-repeat center/cover; margin-right: 0;}

/* location */
#location{ position: relative; padding: 0 60px; margin: 120px auto; display: flex; justify-content: space-between;}
#location .locHalf{ width: 50%;}
#location .locHalf:first-child{ width: 43%;}
.locHalf .locTit{ padding-bottom:  20px; border-bottom: 1px solid #64635e; margin-bottom: 50px;}
.locTit h2{ font-family: "Cormorant Garamond", serif; font-size: 36px; font-weight: 400; color: #24211c; }
.locTit h3{ font-weight: 400; font-size: 14px; color: #64635e;}
.locTxt p{ font-weight: 400; color: #64635e; font-size: 14px; }
.locTxt p span{ font-weight: 500; font-size: 15px; color: #24211c; display: block;}

/* 카카오지도 */
.root_daum_roughmap .cont{ display: none;}

/* sub1ImgLst */
#sub1ImgLst{ width: 100%;  margin: 120px auto;}
.subBnSwip .swiper-slide{  width: 100%; height: 100%; aspect-ratio: 16/7; }
.subBnSwip .swiper-slide.subBnImg1{ background: url(../img/sub1/image1.jpg) no-repeat center/cover;}
.subBnSwip .swiper-slide.subBnImg2{ background: url(../img/sub1/image2.jpg) no-repeat center/cover;}
.subBnSwip .swiper-slide.subBnImg3{ background: url(../img/sub1/image3.jpg) no-repeat center/cover;}
.subBnSwip .swiper-slide.subBnImg4{ background: url(../img/sub1/image4.jpg) no-repeat center/cover;}
.subBnSwip .swiper-slide.subBnImg5{ background: url(../img/sub1/image5.jpg) no-repeat center/cover;}
.subBnSwip .swiper-slide.subBnImg6{ background: url(../img/sub1/image6.jpg) no-repeat center/cover;}
.subBnSwip .swiper-slide.subBnImg7{ background: url(../img/sub1/image7.jpg) no-repeat center/cover;}
.subBnSwip .swiper-slide.subBnImg8{ background: url(../img/sub1/image8.jpg) no-repeat center/cover;}
.subBnSwip .swiper-slide.subBnImg9{ background: url(../img/sub1/image9.jpg) no-repeat center/cover;}
.subBnSwip .swiper-slide.subBnImg10{ background: url(../img/sub1/image10.jpg) no-repeat center/cover;}
.subBnSwip .swiper-slide.subBnImg11{ background: url(../img/sub1/image11.jpg) no-repeat center/cover;}

.swiper-pagination-fraction{ bottom:15px; color: #fff;}
.swiper-pagination-fraction .swiper-pagination-current,
.swiper-pagination-fraction .swiper-pagination-total{ font-family: "Nunito", sans-serif; font-size: 16px; color: #fff; font-weight: 400; }

.swiper-button-next.subBnNext,
.swiper-button-prev.subBnPrev{ padding: 0 60px;}
.swiper-button-next:after, .swiper-button-prev:after{ color: #fff; font-size: 24px;}


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

/* 반응형 */
@media all and (max-width: 1440px){

    /* #sub3sec1{ padding: 0 60px 60px;} */
    .sub3mainWrap .mainHalf{ width: 49%;}
    .mainConWrap .mainConTit{ padding-right: 0;}
    .mainHalf .mainBnCon{width: 100%;}
    .mainBnCon .mainBnConIn{ padding: 0 0 30px 20px;}
    .mainBnConIn h2{ margin-bottom: 40px; font-size: 30px;}
    .mainConTit .mainTitTxt{ padding-right: 0px; margin: 15px 0;}
    .mainConWrap .mainCenterSwip{ aspect-ratio: 16/9; margin-bottom: 15px;}
    .mainTxtwrap{ padding-right: 0px;}
    .mainConTit .mainTitTxt p{ font-size: 13px;}
    .mainTxtwrap p{ font-size: 13px;}

    .mainConWrap .mainConTit h2{font-size: 24px;}
    .locTit h2{ font-size: 24px;}

    /* .swiper-button-next.subBnNext{ right: 42%;} */
 }
@media all and (max-width: 1024px){

    #sub3sec1{ padding: 0 30px;}
    #sub3sec1 .sub3mainWrap{ flex-direction: column;}
    .sub3mainWrap .mainHalf{ width: 100%;}
    .sub3mainWrap .mainHalf:first-child{ margin-bottom: 30px;}
    .mainHalf .mainBnCon{ aspect-ratio: 16/5; }
    .mainBnConIn h2{ margin-bottom: 20px;}
    .sub3mainWrap .mainHalf{ margin-bottom: 50px;}
    .mainConTit .mainTitTxt{ padding-right: 30px;}
    .mainTxtwrap{ padding-right: 30px;}
    .sub3mainWrap .mainHalf:last-child{ margin-bottom: 0;}
    .swiper-button-next.subBnNext,
    .swiper-button-prev.subBnPrev { padding: 0 30px;}

    #sub1ImgLst{ margin: 80px auto;}


    #location{ padding: 0 30px; margin: 0 auto 80px;}
    #location .locHalf:first-child{ width: 35%;}
    #location .locHalf:last-child{ width: 55%;}
    
}

@media all and (max-width: 768px){

    .introLogo a img{ width: 110px;}
    .mainConWrap .mainConTit h2{ font-size: 30px;}

    #location{ flex-direction: column;}
    #location .locHalf:first-child{ width: 100%;}
    #location .locHalf:last-child{ width: 100%;}

    .locHalf .locTit{ margin-bottom: 30px;}
    .locHalf .locTxt{ margin-bottom: 50px;}

    .subBnSwip .swiper-slide{ aspect-ratio: 16/9;}
    .swiper-button-next.subBnNext,
    .swiper-button-prev.subBnPrev { padding: 0 20px;}
    .swiper-pagination-fraction .swiper-pagination-current,
.swiper-pagination-fraction .swiper-pagination-total{ font-size: 14px;}
}
@media all and (max-width: 520px){
    
    #sub3sec1{ padding:  0 20px;}

    .nonbr{ display: none;}
    .mainHalf .mainBnCon{ aspect-ratio: 16/7;}
    .mainBnConIn h2{ margin-bottom: 0; font-size: 24px;}
    .mainBnCon .mainBnConIn{ padding: 0 0 30px 10px;}
    .mainConTit .mainTitTxt{ padding-right: 0;}

    #location{ padding:  0 20px;}
    .mainConWrap .mainConTit h2{ font-size: 24px;}
}