@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/sub3/1/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; padding-right: 60px;}
.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;}
/* .mainConTit .mainTitTxt p:last-child{ margin-right: 150px;} */
.mainConWrap .mainCenterSwip{ width: 100%; aspect-ratio: 16/8.5;  margin-bottom: 30px; overflow: hidden; position: relative;}
.mainCenterSwip .swiper-slide{ width: 100%; height: 100%;  }
.mainCenterSwip .swiper-slide.centImg1{ background: url(../img/sub3/1/image1.jpg) no-repeat center/cover; }
.mainCenterSwip .swiper-slide.centImg2{ background: url(../img/sub3/1/image2.jpg) no-repeat center/cover; }
.mainCenterSwip .swiper-slide.centImg3{ background: url(../img/sub3/1/image3.jpg) no-repeat center/cover; }
.mainCenterSwip .swiper-slide.centImg4{ background: url(../img/sub3/1/image4.jpg) no-repeat center/cover; }
.mainCenterPage.swiper-pagination-fraction{ position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 9; text-align: center; color: #fff; font-family: "Nunito", sans-serif;}
.swiper-pagination-current, .swiper-pagination-total{ font-family: "Nunito", sans-serif; font-size: 14px; margin: 0 10px; color: #fff;}
.swiper-button-prev.mainCenterPrev{ position: absolute; top: auto; bottom: 5px; left: 44%; transform: translateX(-50%);}
.swiper-button-next.mainCenterNext{ position: absolute; top: auto; bottom: 5px; right: 40%; transform: translateX(-50%);}
.swiper-button-prev:after, .swiper-button-next:after{ color:#fff; font-weight: 100; font-size: 14px;}

.mainTxtwrap{ display: flex; justify-content: space-between; margin: 0; align-items: center; padding-right: 120px;}
.mainTxtwrap h3{ font-family: "Cormorant Garamond", serif; font-size: 18px; font-weight: 400; color: #64635e; }
.mainTxtwrap p{ font-family: 'SUIT Variable', sans-serif;  font-size: 14px; font-weight: 400; line-height: 1.5em; color: #64635e;}

/* enjoyDetail */
#enjoyDetail {margin: 120px auto; padding: 0 60px;}
#enjoyDetail .joyDetailContainer{ width: 1100px; margin: 0 auto; display: flex; justify-content: space-between;}
.joyDetailContainer .joyDetailWrap{ width: 33.333%; padding: 0 0px 0px; display: flex; justify-content: space-between; align-items: center; flex-direction: column;}
.joyDetailContainer .joyDetailWrap:nth-child(1){ margin: 0 30px 0 0; }
.joyDetailContainer .joyDetailWrap:last-child{ margin: 0 0px 0 30px; }
.joyDetailWrap .joyDetailCon{ width: 100%; aspect-ratio: 3/4; position: relative;}
.joyDetailWrap .joyDetailCon:last-child{ margin-top: 30px;}
.joyDetailCon .joyDetailImg{ width: 100%; height: 100%;}
.joyDetailCon .joyDetailImg.joy1{ background: url(../img/sub3/1/image1.jpg) no-repeat center/cover;}
.joyDetailCon .joyDetailImg.joy2{ background: url(../img/sub3/1/image2.jpg) no-repeat center/cover;}
.joyDetailCon .joyDetailImg.joy3{ background: url(../img/sub3/1/image3.jpg) no-repeat center/cover;}
.joyDetailCon .joyDetailImg.joy4{ background: url(../img/sub3/1/image4.jpg) no-repeat center/cover;}
.joyDetailCon .joyDetailTxt{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.joyDetailCon .joyDetailTxt h4{ font-family: "Cormorant Garamond", serif; font-size: 24px; line-height: 1.5em; color:#886d5a; text-align: center;}
.joyDetailCon .joyDetailTxt p{font-family: "Nunito", sans-serif; font-weight: 400; font-size: 14px; color: #886d5a; text-align: center; margin-top: 10px; }


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

/* section5 */
#section5{ padding: 120px 60px; display: flex; justify-content: space-between; align-items: center;}
#section5 .sec5Container{ width: 50%; height: 58vw; display: flex; justify-content: space-between; align-items: center;  flex-direction: column; padding: 0 80px; position: relative;}
.sec5Container .enjoyConTxt{ display: flex; flex-direction: column; justify-content: space-between; position: sticky; top: 120px; left: 50%; transform: translateX(-50%);}
.enjoyConTxt h3{ font-family: "Nunito", sans-serif; font-size: 24px; font-weight: 600; color: #24211c; margin-bottom: 30px; }
.enjoyConTxt p{ margin-bottom: 20px;}
.enjoyConTxt p span{ display: block; font-size: 14px; }

.sec5Container .joyConWrap{ width: 100%; display: flex; justify-content: space-between; margin-bottom: 50px;}
.joyConWrap .joyCon{ width: 45%; }
.joyCon .joyConImg{ width: 100%; aspect-ratio: 4/3; background-color: #24211c; margin-bottom: 15px;}
.joyCon .joyConImg a{ display: block; width: 100%; height: 100%;}
.joyCon .joyConImg.j1{ background: url(../img/sub3/1/image1.jpg) no-repeat center/cover;}
.joyCon .joyConImg.j2{ background: url(../img/sub3/2/image1.jpg) no-repeat center/cover;}
.joyCon .joyConImg.j3{ background: url(../img/sub3/3/image1.jpg) no-repeat center/cover;}
.joyCon .joyConImg.j4{ background: url(../img/sub3/4/image1.jpg) no-repeat center/cover;}
.joyCon .joyConImg.j5{ background: url(../img/sub3/5/image1.jpg) no-repeat center/cover;}
.joyCon .joyConImg.j6{ background: url(../img/sub3/6/image1.jpg) no-repeat center/cover;}
.joyCon .joyConTxt h4{ font-family: "Nunito", sans-serif; font-size: 18px; font-weight: 400; color: #24211c; }
.joyCon .joyConTxt p{ font-size: 14px; color: #64635e; }

/* 반응형 */
@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;}

    

    .sec5Container .enjoyConTxt{ left: 0; transform: none;}
    #section5 .sec5Container{ padding: 0 30px; height: 80vw;}
    #section5 .sec5Container:first-child{ width: 30%; padding: 0;}
    #section5 .sec5Container:last-child{ width: 65%;}
 }
@media all and (max-width: 1024px){

    #sub3sec1{ padding: 0 30px;}
    #sub3sec1 .sub3mainWrap{ flex-direction: column;}
    .sub3mainWrap .mainHalf{ width: 100%;}
    .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;}

    #enjoyDetail{ padding: 0 30px;  margin: 30px auto 80px;}
    #enjoyDetail .joyDetailContainer{ width: 100%;}
    

    #banner p{ font-size: 1.875rem;}

    #section5{ padding: 60px 30px;}
    #section5 .sec5Container{ height: 93vw;}

    .enjoyConTxt p span{ display: inline;}
    
}

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

    .introLogo a img{ width: 110px;}

    #banner{ height: 18vh;}
    #banner p{ font-size: 1.5rem;}

    #section5{ flex-direction: column;}
    .sec5Container .enjoyConTxt{ position: static; margin-bottom: 30px; width: 100%;}
    #section5 .sec5Container{ width: 100%; height: auto; padding: 0;}
    #section5 .sec5Container:first-child{ width: 100%;}
    #section5 .sec5Container:last-child{ width: 100%;}

    .enjoyConTxt p span{ display: block;}
}
@media all and (max-width: 520px){
    

    .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{ flex-direction: column; padding-right: 0;}
    .mainConWrap .mainConTit h2{ font-size: 30px;}
    .mainTxtwrap h3{ display: none;}
    .mainTxtwrap{ padding-right: 0; flex-direction: column; align-items: flex-start;}
    .mainTxtwrap p:first-child{ margin-bottom: 10px;}
    .swiper-button-prev.mainCenterPrev{ left: 35.5%;}
    .swiper-button-next.mainCenterNext{ right: 28%;}
    .sub3mainWrap .mainHalf:last-child{ margin-bottom: 0;}

    #enjoyDetail{ padding: 0 20px; margin: 60px auto;}
    .joyDetailContainer .joyDetailWrap:nth-child(1){ margin: 0 20px 0 0;}
    .joyDetailContainer .joyDetailWrap:last-child{ display: none;}
    .joyDetailContainer .joyDetailWrap{ width: 50%;}
    .joyDetailWrap .joyDetailCon:last-child{ margin-top: 20px;}
    .joyDetailCon .joyDetailTxt h4{ font-size: 18px;}
    .joyDetailCon .joyDetailTxt p{ font-size: 12px;}

    #banner{ height: 15vh;}
    #banner p{ font-size: 1.125rem;}

    #section5{ padding: 60px 20px;}
    .sec5Container .joyConWrap{ flex-direction: column; margin-bottom: 0px;}
    .joyConWrap .joyCon{ width: 100%; margin-bottom: 30px;}
}