@charset "utf-8";
html, body{ overflow-x: hidden;}

#mainBn{ width: calc( 100% - 80px); height: 100vh; position: relative; margin-left: auto; padding: 0 0 60px 110px;}
#mainBn .mainBnSwip{ width: 100%; height: 100%; z-index: 9;}
.mainBnSwip .swiper-slide{ width: 100%; height: 100%;}
.mainBnSwip .swiper-slide.mb1{ background: url(../img/sub3/1/image1.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb2{ background: url(../img/sub3/1/image2.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb3{ background: url(../img/sub3/1/image3.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb4{ background: url(../img/sub3/1/image4.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb5{ background: url(../img/sub3/1/image5.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb6{ background: url(../img/sub3/1/image6.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb7{ background: url(../img/sub3/1/image7.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb8{ background: url(../img/sub3/1/image8.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.mb9{ background: url(../img/sub3/1/image9.jpg) no-repeat center/cover;}

#mainBn #mainWrap{ position: absolute; left: 30px; bottom: 10px; z-index: 9;}
#mainWrap h2{ font-family: "Vollkorn", serif; font-size: 56px; line-height: 1em; }
#mainWrap .mainBnPage{ display: flex; align-items: center;}
.mainBnPage .mainBnLine{ width:10%; height: 1px; background: #2E3A3E; margin: 0 10px;}
.mainBnPage div{ font-family: "Vollkorn", serif; cursor: pointer;}

/* joyInfo */
#joyInfo{ margin: 100px auto; display: flex; align-items: center; flex-direction: column;}
#joyInfo .joyInfoImg{ width: 48.572rem; aspect-ratio: 1.618/1; background: url(../img/sub3/1/image4.jpg) no-repeat center/cover;}
#joyInfo .joyInfoTxtWrap{ margin-top: 42px; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.joyInfoTxtWrap h2{ font-family: "Vollkorn", serif; font-size: 42px;}
.joyInfoTxtWrap .joyInfoTxt{ margin-top: 20px;}
.joyInfoTxt p{ margin-bottom: 10px;}

/* joyDetail */
#joyDetail{ margin: 100px 0; padding: 0 30px;}
#joyDetail .detailTop{ position: relative;}
.detailTop .detailTopImg{ width: 100%; aspect-ratio: 16/4; background: fixed url(../img/sub3/1/image5.jpg) no-repeat center/cover;}
.detailTop h2{ position: absolute; left: 50%; bottom: -17%; transform: translate(-50%, -50%); font-family: "Vollkorn", serif; font-size: 76px; color: #9FC7D4; width: 100%; text-align: center; line-height: 1em; }
#joyDetail .detailBot{ display: flex; justify-content: space-between;  margin-top: 40px;}
.detailBot .detBotHalf{ width: 50%;}
.detBotHalf .detBotL{  aspect-ratio: 3/4; background: url(../img/sub3/1/image3.jpg) no-repeat center/cover; margin-right: 10px;}
.detailBot .detBotHalf.detR{ margin-left: 10px; display: flex; justify-content: space-between; flex-direction: column;}
.detBotHalf .detBotML{ display: flex; justify-content: flex-start;}
.detBotHalf .detBotML .detImg1{ width: 70%;  aspect-ratio: 4/3; background: url(../img/sub3/1/image2.jpg) no-repeat center/cover;}
.detBotHalf .detBotMR{ display: flex; justify-content: flex-end;}
.detBotHalf .detBotMR .detImg2{ width: 70%; aspect-ratio: 4/3; justify-content: flex-end; background: url(../img/sub3/1/image7.jpg) no-repeat center/cover;}
.detBotHalf .detBotTxt p{  text-align: center; }

/* banner */
#bannerCon{ background: url(../img/sub3/1/image6.jpg) no-repeat center/cover;}

/* 반응형 */
@media all and ( max-width: 1440px){
    .detailTop h2{ bottom: -24%;}
}
@media all and ( max-width: 1024px){
    #mainBn{ padding: 0 0 60px 70px;}
    #mainWrap h2{ font-size: 48px; }
    .detailTop h2{ font-size: 60px; bottom: -26%;}

    .detBotHalf .detBotTxt p{ font-size: 11px;}
}

@media all and (max-width: 768px){
   #joyInfo .joyInfoImg{ width: 42rem;}
    .joyInfoTxtWrap h2{ font-size: 36px;}
    .detailTop h2{ font-size: 42px; bottom: -25%;}

    /* [data-aos="fade-left"], [data-aos="fade-right"]{transform: translate3d(0,40px,0);opacity:0;}
    [data-aos="fade-left"].aos-animate, [data-aos="fade-right"].aos-animate{transform: translate3d(0,0,0);opacity:1;} */
}

@media all and ( max-width: 520px){
    #mainBn{ width: calc( 100% - 60px); height: 65vh; padding: 0 0 60px 0px;}
    #mainBn #mainWrap{ left: 10px;}
    #mainWrap h2{ font-size: 30px; line-height: 1.75em;}

    #joyInfo{ margin: 60px auto; padding: 0 10px; flex-direction: column;}
    #joyInfo .joyInfoImg{ width: 100%;}
    #joyInfo .joyInfoTxtWrap{ margin-top: 20px;}
    .joyInfoTxtWrap h2{ font-size: 24px;}
    .joyInfoTxt p{ font-size: 12px;}

    #joyDetail{padding: 0 10px; margin:60px 0}
    .detailTop .detailTopImg{ aspect-ratio: 16/7; }
    .detailTop h2{ font-size: 24px; bottom: -15.5%;}

    #joyDetail .detailBot{flex-direction: column; margin-top: 10px;}
    .detailBot .detBotHalf{ width: 100%;}
    .detBotHalf .detBotL{ display: none; width: 100%;  aspect-ratio: 16/9; margin-bottom: 10px; margin-right: 0;}
    .detBotHalf .detBotTxt p{ margin: 20px auto;}
    .detailBot .detBotHalf.detR{ margin-left: 0;}
    .detBotHalf .detBotML .detImg1{ width: 100%; aspect-ratio: 16/9;}
    .detBotHalf .detBotMR .detImg2{ width: 100%; aspect-ratio: 16/9;}
}
@media all and (max-width: 375px){
    .detailTop h2{ bottom: -17.5%;}
}
@media all and (max-width: 320px){
    .detailTop h2{ font-size: 20px; bottom: -18.5%;}
}