@charset "utf-8";

.mainBnSlide .s1{background-image:url(../img/sub3/2/image1.jpg);}
.mainBnSlide .s2{background-image:url(../img/sub3/2/image2.jpg);}
.mainBnSlide .s3{background-image:url(../img/sub3/2/image3.jpg);}
.mainBnSlide .s4{background-image:url(../img/sub3/2/image4.jpg);}
.mainBnTit p{ writing-mode: vertical-rl;}

/* facIntro */

.facIntro .facIntroR .facIntroImgL{ background: url(../img/sub3/2/image1.jpg) no-repeat center/cover;}
.facIntro .facIntroR .facIntroImgS{ background: url(../img/sub3/2/image2.jpg) no-repeat center/cover;}

/* facImgList */

.facImgList .imgList .listL .facListImg{ background: url(../img/sub3/2/image1.jpg) no-repeat center/cover;}
.facImgList .imgList .listC .facListImg{ background: url(../img/sub3/2/image2.jpg) no-repeat center/cover;}
.facImgList .imgList .listR .facListImg{ background: url(../img/sub3/2/image3.jpg) no-repeat center/cover;}

/* banner */
.bannerIn .bgImg{background: url(../img/sub3/2/image2.jpg) no-repeat center/cover;}


/* --------------------------------------------------- 반응형  --------------------------------------------------- */

/* @media all and (max-width: 1400px){
    .mainBnSlide .mainBnCon{width: 95%;}
    .secContainer .secWrap{ width: 95%;}
    .facIntro{ width: 95%;}
    .facImgList{ width: 95%;}
    .bannerIn{width: 95%;}
    .secContainer .enjoyWrap{ width: 95%;}
}

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

    
    .facIntro .facIntroL{ width: 40%;}
    .facIntro .facIntroR{ padding: 20px;}
    .facIntro .facIntroR .facIntroImgL{ width: 90%;}
    .facIntro .facIntroR .facIntroImgS{ bottom: 20px; right: 20px;}

    
    .facImgList .imgListTit h3{ display: inline-block;}
    .facImgList .imgListTit h2{ display: inline-block;}

    
    .bannerIn .bannerTxt p{ font-size: 90px;}
    .bannerResBtn{ left: 50px; bottom: 100px;}

   
    .enjoyConWrap .enjoyR .rightConTxt{ padding: 20px 0 0 20px;}
    .enjoyConWrap .enjoyR .enjoyBtn{ margin: 0 20px 20px 0;}
}

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

    
    .facIntro{ flex-direction: column; margin: 80px auto 120px;}
    .facIntro .facIntroL{ width: 100%; aspect-ratio: auto; margin-bottom: 50px;}
    .facIntro .facIntroL .facTit{ margin-bottom: 30px;}
    .facIntro .facIntroL .facTit h3{ font-size: 18px;}
    .facIntro .facIntroL .facTit h2{ font-size: 36px;}
    .facIntro .facIntroL .facTxt p{ font-size: 13px;}
    .facIntro .facIntroR{ width: 100%; aspect-ratio: auto; padding: 0;}
    .facIntro .facIntroR .facIntroImgL{aspect-ratio: 4/3; rotate: 0deg;}
    .facIntro .facIntroR .facIntroImgS{ rotate: 0deg; bottom: -20px; right: 0; width: 30%;}

    
    .facImgList .imgListTit h3{ font-size: 72px;}
    .facImgList .imgListTit h2{ font-size: 72px;}
    .facImgList .imgList .listR .designTxt p{ font-size: 12px;}

   
    .bannerIn .bgImg{ width: 200px;}
    .bannerIn .bannerTxt p{ font-size: 60px;}
    .bannerResBtn{ left: 70px; bottom: 60px;}

    
    .enjoyWrap .enjoyTit h2{ font-size: 36px; margin-bottom: 20px;}
    .enjoyWrap .enjoyTit h3{ font-size: 18px; margin-bottom: 10px;}
    .enjoyConWrap .enjoyR .rightConTxt .conTit{ margin-bottom: 30px;}
    .enjoyConWrap .enjoyR .enjoyBtn{ margin: 0;}
    .enjoyConWrap .enjoyR .rightConTxt{ padding: 0px 0px 0px 10px;}
    
}

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

   
    .facImgList{ padding-top: 100px; margin: 50px auto 0;}
    .facImgList .imgListTit h3{ font-size: 48px;}
    .facImgList .imgListTit h2{ font-size: 48px;}
    .facImgList .imgList .listR .designTxt p{ display: none; font-size: 12px;}
    .facImgList .imgList .listL{padding-right: 5px;}
    .facImgList .imgList .listC{ padding: 0 5px;}
    .facImgList .imgList .listR{ padding-left: 5px;}

    .bannerIn .bgImg{ width: 150px;}
    .bannerIn .bannerTxt p{ font-size: 36px; color: #000;}
    .bannerResBtn{ left: 20px; bottom: 0px; display: none;}

    
    .enjoyWrap .tabMenu{ justify-content: space-evenly;}
    .tabMenu .listCon{ margin: 0;}
    .tabMenu .listCon .enjoy{ width: 60px;}
    .tabMenu .listCon span{ display: none;}
    .tabMenu .listCon.open span{ bottom: -50px; display: none;}

    .tabCon{ margin-top: 30px;}
    .enjoyWrap .enjoyTit{ margin-bottom: 30px;}
    .enjoyWrap .enjoyTit h2{ font-size: 24px;}
    .enjoyWrap .enjoyTit h3{ font-size: 14px;}
    .enjoyConWrap{ flex-direction: column-reverse;}
    .enjoyConWrap .enjoyL{ width: 100%;}
    .enjoyConWrap .enjoyR{ width: 100%; aspect-ratio: 16 / 9;}
    .enjoyConWrap .enjoyR .enjoyBtn{ margin: 0 10px 30px 0; }
    .enjoyConWrap .enjoyR .enjoyBtn a{ font-size: 14px;}
} */