@charset "utf-8";

.mainBnCenter{ width: 80%; aspect-ratio: 4 / 3;}
.mainBnTxt h2{ font-size: 21px;}

/* mainBn */
.mainBnCenter .mainBnSwip .swiper-slide.s1{ background: url(../img/sub3/1/image1.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s2{ background: url(../img/sub3/1/image2.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s3{ background: url(../img/sub3/1/image3.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s4{ background: url(../img/sub3/1/image4.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s5{ background: url(../img/sub3/1/image5.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s6{ background: url(../img/sub3/1/image6.jpg) no-repeat center/cover;}
.mainBnCenter .mainBnSwip .swiper-slide.s7{ background: url(../img/sub3/1/image7.jpg) no-repeat center/cover;}

/* secEnjoy */
#secEnjoy { margin: 60px auto;}
#secEnjoy .enjoyTxtWrap{ display: flex; justify-content: space-between; margin-bottom: 60px;}
.enjoyTxtWrap h2{ font-family: 'MapoFlowerIsland'; font-size: 24px; color: #2c3c39; }
.enjoyTxtWrap .enjoySubTxt p{ font-size: 14px; text-align: left;}
.enjoyTxtWrap .enjoySubTxt p:last-child{ margin-top: 10px;}
.enjoyTxtWrap .enjoySubTxt p:first-child{ margin-top: 0;}
.enjoyTxtWrap .enjoySubTxt p span{ display: block;}

.enjoyImgList{ display: flex; justify-content: space-between;}
.enjoyImgList .imgListWrap{ display: flex; justify-content: space-between; flex-direction: column; width: 25%; margin: 0 10px;}
.enjoyImgList .imgListWrap.line1{ width: 50%; margin-left: 0; display: flex; align-items: center;}
.enjoyImgList .imgListWrap.line1 .enjoyimgCon{width: 100%; height: 33.333%;}
.enjoyImgList .imgListWrap.line1 .enjoyimgCon.fac1{ background: url(../img/sub3/1/image2.jpg) no-repeat center/cover; }
.enjoyImgList .imgListWrap.line1 .enjoyimgCon.fac2{ background: url(../img/sub3/1/image1.jpg) no-repeat center/cover; }
.enjoyImgList .imgListWrap.line1 .enjoyTxtCon{width: 100%; height: 33.333%; margin: 20px 0; position: relative;}
.enjoyImgList .imgListWrap.line1 .enjoyTxtCon p{font-family: 'MaruBuri'; font-size: 5.4rem; color: #b4dad4; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.enjoyImgList .imgListWrap.line2 .enjoyimgCon{width: 100%; height: 33.333vh;}
.enjoyImgList .imgListWrap.line2 .enjoyimgCon.fac3{background: url(../img/sub3/1/image3.jpg) no-repeat center/cover;}
.enjoyImgList .imgListWrap.line2 .enjoyimgCon.fac4{ margin: 20px 0; background: url(../img/sub3/1/image4.jpg) no-repeat center/cover;}
.enjoyImgList .imgListWrap.line2 .enjoyimgCon.fac5{background: url(../img/sub3/1/image6.jpg) no-repeat center/cover;}
.enjoyImgList .imgListWrap.line3{ margin-right: 0; }
.enjoyImgList .imgListWrap.line3 .enjoyimgCon{width: 100%; height: 33.333vh;}
.enjoyImgList .imgListWrap.line3 .enjoyimgCon.fac6{  background: url(../img/sub3/1/image5.jpg) no-repeat center/cover;}
.enjoyImgList .imgListWrap.line3 .enjoyimgCon:last-child{height: 69vh;}
.enjoyImgList .imgListWrap.line3 .enjoyimgCon.fac7{ margin-top: 20px; background: url(../img/sub3/1/image7.jpg) no-repeat center/cover;}

/* 반응형 */
@media all and (max-width: 1440px){
    .enjoyImgList .imgListWrap.line1 .enjoyTxtCon p{ font-size: 4.4rem;}
}
@media all and (max-width: 1024px){
    .enjoyImgList .imgListWrap.line1 .enjoyTxtCon p{ font-size: 3.4rem;}
}
@media all and (max-width: 768px){
    .mainBnCenter{ aspect-ratio: 9/16; margin-bottom: 30px;}
    .enjoyImgList{ flex-direction: column;}
    .enjoyImgList .imgListWrap.line1{ width: 100%;}
    .enjoyImgList .imgListWrap.line1 .enjoyimgCon{ height: auto; aspect-ratio: 16/9;}
    .enjoyImgList .imgListWrap.line1 .enjoyTxtCon p{ font-size: 2.4rem; text-align: center; position: static; transform: none;}
    .enjoyImgList .imgListWrap{ width: 100%; margin: 10px 0;}
    .enjoyImgList .imgListWrap.line2 .enjoyimgCon{ height: auto; aspect-ratio: 16/9;}
    .enjoyImgList .imgListWrap.line3{ margin:0;}
    .enjoyImgList .imgListWrap.line3 .enjoyimgCon:last-child{ height: auto; aspect-ratio: 16/9;}
}

@media (max-width: 520px) {
    .mainBnCenter{ width: 100%; aspect-ratio: 9/16;}
    .scrollD p { writing-mode: horizontal-tb; margin-right: 0px; }
    #secEnjoy .enjoyTxtWrap{ flex-direction: column; margin-bottom: 30px;}
    .enjoyTxtWrap .enjoySubTxt { margin-top: 15px;}
    .enjoyTxtWrap .enjoySubTxt p{ font-size: 13px; text-align: left;}
    .enjoyImgList .imgListWrap.line1 .enjoyTxtCon p{ font-size: 2rem;}
}