@charset "utf-8";

/* mainBn */
#mainBn{ height: calc(100vh - 100px); display: flex; border-bottom: 1px solid #6a2f2b;}
#mainBn .subMainBnSwip{ width: 100%; margin: 0; display: flex; margin: 30px 60px;}
.subMainBnSwip .swiper-slide{ background: #6a2f2b; width: 50%;}
.swiper-button-next:after, .swiper-button-prev:after{ font-size: 36px !important;}
/* .subMainBnSwip .swiper-slide:nth-child(3n){ background: #6a2f2b; width: 70%;} */
.subMainBnSwip .swiper-slide.mb1{ background: url(../img/sub3/1/image1.jpg) no-repeat center/cover;}
.subMainBnSwip .swiper-slide.mb2{ background: url(../img/sub3/1/image2.jpg) no-repeat center/cover;}
.subMainBnSwip .swiper-slide.mb3{ background: url(../img/sub3/1/image3.jpg) no-repeat center/cover;}
.subMainBnSwip .swiper-slide.mb4{ background: url(../img/sub3/1/image4.jpg) no-repeat center/cover;}
.subMainBnSwip .swiper-slide.mb5{ background: url(../img/sub3/1/image5.jpg) no-repeat center/cover;}
.subMainBnSwip .swiper-slide.mb6{ background: url(../img/sub3/1/image6.jpg) no-repeat center/cover;}
.subMainBnSwip .mainBnPage{ color: #fff;;}
.swiper-pagination-current, .swiper-pagination-total{color: #fff;}
.swiper-button-prev:after, .swiper-button-next:after{ color: #fff;}

/* joyInfoWrap */
#joyInfoWrap{ display: flex; justify-content: space-between; height: 100%;}
#joyInfoWrap .joyCon{ width: 50%;  display: flex; justify-content: space-between; align-items: center; flex-direction: column;}
#joyInfoWrap .joyCon:last-child{ padding-right: 60px;}
.joyCon .joyConImg{ width: 100%; aspect-ratio: 1; background: url(../img/sub3/1/image5.jpg) no-repeat center/cover;}
.joyCon .joyBTIt{ width: 100%; border-top: 1px solid #6a2f2b; padding: 20px 60px;}
.joyBTIt h2{ font-family: "Bodoni Moda", serif; font-size: 18px; color: #6a2f2b;text-align: center;}
.joyCon .joyTxt{ width: 100%; padding: 0 60px; height: 100%; position: relative;}
.joyTxt .txtAbsolute{ width: 70%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.joyTxt .txtAbsolute h3{ font-family: "Bodoni Moda", serif; font-size: 36px; color: #212529; margin-bottom: 30px;}
.joyTxt .txtAbsolute p span{ display: block; font-size: 14px; }

/* enjoyImgWrap */
#enjoyImgWrap{ padding: 80px 0; position: relative; border-top: 1px solid #6a2f2b;}
#enjoyImgWrap .enjoyLine{ width: 100%; height: 2px; background-color: #6a2f2b; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 1;}
#enjoyImgWrap .enjoyImgList{ padding: 0 60px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2;}
.enjoyImgList .enjoyImg{  width: 32%; aspect-ratio: 1; background-color: #212529;}
.enjoyImgList .enjoyImg:nth-child(2){  aspect-ratio: 3/4;}
.enjoyImgList .enjoyImg.joyimg1{ background: url(../img/sub3/1/image2.jpg) no-repeat center/cover;}
.enjoyImgList .enjoyImg.joyimg2{ background: url(../img/sub3/1/image4.jpg) no-repeat center/cover;}
.enjoyImgList .enjoyImg.joyimg3{ background: url(../img/sub3/1/image6.jpg) no-repeat center/cover;}

/* othEnjoyWrap */
#othEnjoyWrap{ width: 100%; position: relative;}
#othEnjoyWrap .othJoyBg{ width: 100%; height: 25vw; background-color: #6a2f2b;position: absolute; top: 0px; left: 0px; z-index: 1;}
#othEnjoyWrap .othJoyConWrap{ width: 100%; padding: 70px 60px; position: relative; z-index: 9;}
.othJoyConWrap .othJoyTit h2{ font-family: "Bodoni Moda", serif; font-size: 36px; font-weight: 600; color: #F5E0CB;}
.othJoyConWrap .othJoyList{ display: flex; justify-content: space-between; align-items: center;}
.othJoyList .othJoy{ width: 33.333%; padding: 50px 0px; }
.othJoy .othJoyImg{ width: 100%; aspect-ratio: 533/400; margin-bottom: 20px; padding: 0 20px; }
.othJoy .othJoyImg a{ display: block; width: 100%; height: 100%;}
.othJoy .othJoyImg .joy1{ width: 100%; height: 100%;  background: url(../img/sub3/1/image2.jpg) no-repeat center/cover;}
.othJoy .othJoyImg .joy2{ width: 100%; height: 100%;  background: url(../img/sub3/2/image2.jpg) no-repeat center/cover;}
.othJoy .othJoyImg .joy3{ width: 100%; height: 100%;  background: url(../img/sub3/3/image1.jpg) no-repeat center/cover;}
.othJoy .othJoyTxt{ display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #6a2f2b; padding: 20px 20px;}
.othJoyTxt h3{ font-weight: 500; font-size: 18px; color: #212529;}
.othJoyTxt p span{ text-align: right; display: block; font-size: 14px;}

/* 반응형 */
@media all and ( max-width: 1440px ){
    /* #joyInfoWrap .joyCon:last-child{ margin-right: 35px;} */
    /* #othEnjoyWrap{ aspect-ratio: 16/8;} */
    .othJoyTxt{ flex-direction: column;}
    .othJoyTxt p{margin-top: 10px;}
    .othJoyTxt p span{ text-align: center;}
}
@media all and ( max-width: 1024px){
    #mainBn .subMainBnSwip{ margin: 30px;}

    #joyInfoWrap .joyCon:last-child{ padding-right: 30px;}
    .joyTxt .txtAbsolute{ width: 66%;}
    .joyTxt .txtAbsolute h3{ font-size: 24px;}
    .joyCon .joyTxt{padding: 0;}
    
    #enjoyImgWrap .enjoyImgList{ padding: 0 30px;}
    #othEnjoyWrap .othJoyConWrap{ padding:  70px 30px;}
    /* #othEnjoyWrap{ aspect-ratio: 16 / 10;} */
    .othJoyTxt p span{ font-size: 12px;}
    #othEnjoyWrap .othJoyBg{ height: 30vw;}
}
@media all and ( max-width: 768px){
    #mainBn .subMainBnSwip{ margin: 30px  20px;}

    #joyInfoWrap{ flex-direction: column;}
    .joyTxt .txtAbsolute{ width: 80%; position: relative; top: 0; left: 50%; transform: translateX(-50%); padding: 30px 0;}

    #joyInfoWrap .joyCon{ width: 100%;}
    #joyInfoWrap .joyCon:last-child{ padding-right: 0;}

    #enjoyImgWrap .enjoyImgList{ padding: 0 20px;}

    .othJoyConWrap .othJoyList{ flex-direction: column;}
    #othEnjoyWrap .othJoyBg{ height: 60vw;}
    .othJoyList .othJoy{ width: 100%; padding: 20px 0;}
    .othJoy .othJoyImg{ aspect-ratio: 16/9;}
    .joyCon .joyBTIt{ border-bottom: 1px solid #6a2f2b;}
}

@media all and ( max-width: 520px){
    #mainBn{ height: 60vh;}
    #mainBn .subMainBnSwip{ margin: 0px;}

    #enjoyImgWrap{ padding: 50px 0;}
    #enjoyImgWrap .enjoyLine{ width: 2px; height: 100%; top: 0; left: 50%; transform: translateX(-50%);}
    #enjoyImgWrap .enjoyImgList{ flex-direction: column;}
    .enjoyImgList .enjoyImg{ width: 100%; aspect-ratio: 16/9; margin-bottom: 20px;}
    .enjoyImgList .enjoyImg:nth-child(2){ aspect-ratio: 4/3;}

    #othEnjoyWrap .othJoyConWrap{ padding: 30px 0px;}
    .othJoyConWrap .othJoyTit h2{ padding-left: 20px;}
}