@charset "utf-8";

#mainBn{ width: 100%; height: 100vh; position: relative;}
#mainBn .mainBnSwip{ width: 100%; height: 100%;}
.mainBnSwip .swiper-slide.s1{ background: url(../img/sub3/3/image1.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s2{ background: url(../img/sub3/3/image2.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s3{ background: url(../img/sub3/3/image3.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s4{ background: url(../img/sub3/3/image4.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s5{ background: url(../img/sub3/3/image5.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s6{ background: url(../img/sub3/3/image6.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s7{ background: url(../img/sub3/3/image7.jpg) no-repeat center/cover;}
.mainBnCon h3{ font-family: 'iceHimchan'; font-size: 24px; color: #FAF9F4; }
.mainBnCon h2{ font-family: 'NanumDongHwaDdoBag'; font-size: 36px; color: #FAF9F4; }

#joyIntroSec{ width: 100%; padding: 0 60px; margin-top: 120px; display: flex; position: relative;}
#joyIntroSec .introHalf{ width: 50%; padding: 0 15px 0 0;}
.introHalf .joyIntroImg1{ width: 100%; margin-bottom: 30px; aspect-ratio: 1/1.25; background: url(../img/sub3/3/image1.jpg) no-repeat center/cover;}
.introHalf .joyIntroImg2{ width: 100%;  aspect-ratio: 1.25/1; background: url(../img/sub3/3/image5.jpg) no-repeat center/cover;}


/* #introSec .introHalf:last-child{ align-items: flex-start;} */
#joyIntroSec .introHalf:last-child{ padding: 0 0 0 15px; display: flex;}
.introHalf .joyIntroTxt { width: 100%; display: flex; justify-content: space-between; align-items: center; flex-direction: column;}
.joyIntroTxt .joyTxtContainer{ margin: 210px auto 0px;}
.joyTxtContainer .joyTit{ margin-bottom: 16px;}
.joyTxtContainer p{ font-size: 14px; color: #a77c52;}
.joyTit h3{ font-family: 'iceHimchan'; font-size: 14px; color: #a77c52; }
.joyTit h2{ font-size: 42px;}
.joyIcon{ width: 75px; aspect-ratio: 75/150; border-radius: 60px; background: url(../img/sub3/3/image2.jpg) no-repeat 80% 50%/cover; position: absolute; top: 0; right: 60px;}
.joyTxtBac{width: 55%; aspect-ratio: 16/9; position: absolute; top: 75px; right: 0; background: #EDE1D1; z-index: -1;}

.introHalf .joyIntroImg3{ width: 100%; aspect-ratio: 1/1.25; background: url(../img/sub3/3/image7.jpg) no-repeat 50% 50%/cover;}

#banner{ height: 450px; background: url(../img/sub3/3/image2.jpg) no-repeat center/cover fixed; margin: 120px auto;}
#banner .bannerIn{ align-items: center; justify-content: center;}
.bannerIn .banTitWrap{ justify-content: center; align-items: center;}
.banTitWrap h2{  font-size: 30px; text-align: center;}
.banTitWrap .resBtn2{ border-bottom: 0; margin-top: 10px;}

/* #joySec{ margin: 120px auto;} */

/* 반응형 */
@media all and (max-width: 1440px){
    .joyIntroTxt .joyTxtContainer{ margin: 160px auto 0;}
    
}

@media all and (max-width: 1024px) {
    .mainBnCon h2{ font-size: 72px;}
    .mainBnCon h3{ font-size: 18px;}
    #joyIntroSec{ padding: 0 30px;}
    .joyIntroTxt .joyTxtContainer{ margin: 80px auto 0;}
    .joyIcon{ aspect-ratio: 3/4;}
    .joyTxtBac{ top: 50px;}
}
@media all and (max-width: 768px){
    .mainBnCon h2{ font-size: 60px; text-align: center;}
    .mainBnCon h3{ font-size: 16px; text-align: center;}
    #joyIntroSec{ flex-direction: column-reverse; margin-top: 50px;}
    #joyIntroSec .introHalf{ width: 100%; padding: 0;}
    #joyIntroSec .introHalf:last-child{ margin-bottom: 30px; padding: 0;}
    .introHalf .joyIntroTxt{ align-items: flex-start;}
    .joyIntroTxt .joyTxtContainer{ margin: 0 0 30px;}
    .joyTxtBac{ width: 100%; top: 100px;}
    .joyIcon{ width: 60px; aspect-ratio: 1; right: 30px;}
    .joyTxtContainer .joyTit{ margin-bottom: 45px;}

    .introHalf .joyIntroImg1{ aspect-ratio: 16/9;}
    .introHalf .joyIntroImg2{ aspect-ratio: 16/9;}
    .introHalf .joyIntroImg3{ aspect-ratio: 16/9;}

    .bannerIn .banTitWrap{ flex-direction: column;}
    .banTitWrap h2{ font-size: 24px;}
}

@media all and (max-width: 520px){
    #mainBn{ height: 100vw;}
    #joyIntroSec{ padding: 0 20px;}
    .joyTxtBac{ aspect-ratio: 4/3; top: 90px;}
    .joyIcon{ right: 20px;}
    #joyIntroSec .introHalf:last-child{ margin-bottom: 10px;}
    .introHalf .joyIntroImg1{ margin-bottom: 10px;}

    #banner{ height: 300px; margin: 80px auto;}
    .banTitWrap h2{ font-size: 18px; line-height: 1.5em;}
    .banTitWrap .resBtn2 { margin-top: 15px;}
    .resBtn2 a{ font-size: 12px; padding: 5px 10px;}
    /* .resBtn2 a{ display: none;} */

    .joyTit h2{ font-size: 30px;}
    .mainBnCon h2{ font-size: 36px;}
}

@media all and (max-width: 320px){
    .joyTxtBac{ top:95px;}
    .joyTxtContainer .joyTit{ margin-bottom: 36px;}
    .joyIntroTxt .joyTxtContainer{ margin: 0 0 40px;}
}