@charset "utf-8";

.mainBnIn{ width: 100%; height: 100vh; background-color: #d9d9d9; position: relative;}
.mainBnSlide{ width: 100%; height: 100%; }
.mainBnSlide .swiper-slide{width: 100%; height: 100%; background-size: cover; background-position: center;}
.mainBnSlide .s1{background-image:url(../img/sub3/1/image1.jpg);}
.mainBnSlide .s2{background-image:url(../img/sub3/1/image2.jpg);}
.mainBnSlide .s3{background-image:url(../img/sub3/1/image3.jpg);}
.mainBnSlide .s4{background-image:url(../img/sub3/1/image4.jpg);}
.mainBnSlide .s5{background-image:url(../img/sub3/1/image5.jpg);}
.mainBnSlide .s6{background-image:url(../img/sub3/1/image6.jpg);}
.mainBnSlide .s7{background-image:url(../img/sub3/1/image7.jpg);}

.mainBnConIn{ position: relative; height: 100%;}

.mainBnSlide .mainBnCon{ pointer-events: none; width: 1400px; height: 100%; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; display: flex; justify-content: center; flex-direction: column; margin: 0 auto;}
.mainBnConIn .conCenter{ width: 100%; display: flex;  justify-content: space-between; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.mainBnTit .mainBnLogo{ display: block; text-align: center; margin-bottom: 50px; }
.mainBnTit .mainBnLogo img{ width: 200px;}
.mainBnTit p{ font-family: 'GyeonggiR'; font-size: 14px; font-weight: 400; text-align: center; line-height: 1.5em; color: #fff; text-shadow: 1px 2px 1px #030303; writing-mode: vertical-lr;}

.mainBnBottom{ pointer-events: all; display: flex; flex-direction: column;  position: absolute; bottom: 3%; left: 50%;transform: translateX(-50%); }
.mainpage { display: flex; align-items: center; flex-direction: column;}
.rightPage{ position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.rightPage .mainpage .mainPage{ text-align: center; color: #fff !important; font-family: 'Paperlogy4'; font-size: 14px; vertical-align: middle; writing-mode: vertical-lr; display: flex; align-items: center; position: relative;}
.swiper-pagination-current, .swiper-pagination-total{ writing-mode: horizontal-tb;}
.mainpage .pageArrow{ display: flex; pointer-events: visible; }
.mainpage .pageArrow .mainSwipPrev{ margin-right: 20px;}
.swiper-pagination-current, .swiper-pagination-total{color: #fff;}
.mainSwipNext i, .mainSwipPrev i{ color: #fff;}

.mainBnBottom .scrollDown{ margin-bottom: 20px; }
.scrollDown{ position: relative;}
.scrollDown a{ display: block; padding-top: 55px;}
.scrollTxt{ display: block; width: 100%; text-align: center; color: #fff; font-family: 'Paperlogy1'; font-style: italic }
.scrollDown a span{ position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -webkit-animation: scroll 2s infinite; animation: scroll 2s infinite; box-sizing: border-box;}
@-webkit-keyframes scroll{
    0%{
        -webkit-transform: rotate(-45deg) translate(0, 0);
    }
    20%{
        -webkit-transform: rotate(-45deg) translate(-10px, 10px);
    }
    40%{
        -webkit-transform: rotate(-45deg) translate(0, 0);
    }
}

@keyframes scroll{
    0%{
        -webkit-transform: rotate(-45deg) translate(0, 0);
    }
    20%{
        -webkit-transform: rotate(-45deg) translate(-10px, 10px);
    }
    40%{
        -webkit-transform: rotate(-45deg) translate(0, 0);
    }
}

/* facIntro */
.facIntro{ width: 1400px; margin: 120px auto; display: flex; justify-content: space-between; align-items: center;}
.facIntro .facIntroL{ width: 50%; aspect-ratio: 1;}
.facIntro .facIntroL .facTit{ margin-bottom: 50px;}
.facIntro .facIntroL .facTit h3{ font-family: 'Paperlogy4'; font-size: 24px; color: #44484c; }
.facIntro .facIntroL .facTit h2{ font-family: 'GyeonggiB'; font-size: 36px; }
.facIntro .facIntroL .facTxt p{ font-family: 'Paperlogy4'; font-size: 14px; color: #646a70; padding-top: 15px;}
.facIntro .facIntroL .facTxt p:first-child{ padding-top: 0; }
.facIntro .facIntroR{ width: 50%; aspect-ratio: 1; position: relative; padding: 40px;}
.facIntro .facIntroR .facIntroImgL{ width: 78.3%; aspect-ratio: 1; background: url(../img/sub3/1/image1.jpg) no-repeat center/cover; rotate: -15deg;}
.facIntro .facIntroR .facIntroImgS{ width: 40%; aspect-ratio: 1; background: url(../img/sub3/1/image2.jpg) no-repeat center/cover ; position: absolute; bottom: 40px; right: 40px; rotate: 15deg; }

/* facImgList */
.facImgList{ width: 1400px; margin: 120px auto; position: relative; padding-top: 174px;}
.facImgList .imgListTit{ position: absolute; top: 20px; left: 0;}
.facImgList .imgListTit h3{ font-family: 'Paperlogy1'; font-size: 120px; color: #646a70; }
.facImgList .imgListTit h2{ font-family: 'Paperlogy5'; font-size: 120px; color: #646a70; }
.facImgList .imgList{ display: flex; justify-content: flex-start; align-items: flex-end; position: relative;}
.facImgList .imgList .listL{ width: 33.333%; padding-right: 10px;}
.facImgList .imgList .listL .facListImg{ width: 100%; aspect-ratio: 1; background: url(../img/sub3/1/image1.jpg) no-repeat center/cover;}
.facImgList .imgList .listC{ width: 33.333%; padding: 0 10px;}
.facImgList .imgList .listC .facListImg{ width: 100%; aspect-ratio: 1/1.7; background: url(../img/sub3/1/image2.jpg) no-repeat center/cover;}
.facImgList .imgList .listR{ width: 33.333%; height: 100%; padding-left: 10px; position: absolute; top: 0; right: 0; display: flex; justify-content: space-between; flex-direction: column;}
.facImgList .imgList .listR .facListImg{ width: 100%; aspect-ratio: 1; background: url(../img/sub3/1/image3.jpg) no-repeat center/cover;}
.facImgList .imgList .listR .designTxt p{font-family: 'GyeonggiR'; font-size: 14px; color: #646a70; text-align: right; }

/* banner */
.bannerIn{ width: 1400px; margin: 120px auto; display: flex; justify-content: center; align-items: center; position: relative; }
.bannerIn .bgImg{ width: 315px; aspect-ratio: 3/4; background: url(../img/sub3/1/image3.jpg) no-repeat 20% 50%/cover;}
.bannerIn .bannerTxt{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9; /*mix-blend-mode: exclusion;*/}
.bannerIn .bannerTxt p{font-family: 'Paperlogy5'; font-size: 120px; font-weight: 500; text-align: center; color: #263238; }

.bannerResBtn{ display: inline-block; position: absolute; bottom: 80px; left: 24%;  margin-left: 10px;}
.bannerResBtn a{ display: inline-block;font-family: 'Paperlogy4'; font-size: 14px; font-weight: 400; color: #191919; letter-spacing: 1px;}
.bannerResBtn a::before{ content: ''; display: block; width: 15px; height: 15px; border-radius: 50%; background-color: #cccac4; position: absolute; top:-4px; left: -8px; z-index: -1;}

/* Enjoy */
.secContainer .enjoyWrap{ width: 1400px; margin: 120px auto; display: flex; justify-content: center; flex-direction: column;}
.enjoyWrap .enjoyTit{ display: flex; flex-direction: column; justify-content: center; margin-bottom: 50px;}
.enjoyWrap .enjoyTit h3{ font-family: 'Paperlogy4'; font-size: 24px; font-weight: 400; color: #44484c; margin-bottom: 20px; text-align: center;}
.enjoyWrap .enjoyTit h2{ font-family: 'GyeonggiR'; font-size: 48px; font-weight: 600; text-align: center; margin-bottom: 50px;}
.enjoyWrap .enjoyTit p{  font-family: 'GyeonggiR'; font-size: 14px; font-weight: 400; color: #646a70; text-align: center; letter-spacing: 0; }
.enjoyWrap .tabMenu{ display: flex; justify-content: center; align-items: center;}
.tabMenu .listCon{ display: flex; justify-content: center; align-items: stretch;  flex-direction: column; margin: 0 15px;position: relative;}
.tabMenu .listCon span{ display: none; margin-top: 10px; font-family: 'Paperlogy4'; font-size: 14px; font-weight: 400; color: #646a70; text-align: center; position: absolute; bottom: 0; left: 50%; }
.tabMenu .listCon:hover span{ display: block; width: 100%; position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%);}
.tabMenu .listCon.open span{ display: block; width: 100%; position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%);}
.tabMenu .listCon .enjoy{ width: 90px; aspect-ratio:1; background-color: #969696; border-radius: 10px;}
.tabMenu .listCon .enjoy.img1{ background: url(../img/sub3/1/image1.jpg)no-repeat center/cover;}
.tabMenu .listCon .enjoy.img2{ background: url(../img/sub3/2/image1.jpg)no-repeat center/cover;}
.tabMenu .listCon .enjoy.img3{ background: url(../img/sub3/3/image1.jpg)no-repeat center/cover;}
.tabMenu .listCon .enjoy.img4{ background: url(../img/sub3/4/image1.jpg)no-repeat center/cover;}
.tabMenu .listCon .enjoy.img5{ background: url(../img/sub3/5/image2.jpg)no-repeat center/cover;}

.tabCon{ margin-top: 80px;}
.tabCon .enjoyCon{ display: none;}
.tabCon .enjoyCon.open{display: block;}
.enjoyConWrap{ display: flex; justify-content: space-between; }
.enjoyConWrap .enjoyL{ width: 50%; aspect-ratio: 1; background-color: #030303; margin-right: 10px;}
.enjoyConWrap .enjoyL .leftImg{ width: 100%; height: 100%;}
.enjoyConWrap .enjoyL .leftImg a{ display: block; width: 100%; height: 100%;}
.enjoyConWrap .enjoyL .leftImg.enjoyImg1{ background: url(../img/sub3/1/image1.jpg) no-repeat center/cover;}
.enjoyConWrap .enjoyL .leftImg.enjoyImg2{ background: url(../img/sub3/2/image1.jpg) no-repeat center/cover;}
.enjoyConWrap .enjoyL .leftImg.enjoyImg3{ background: url(../img/sub3/3/image1.jpg) no-repeat center/cover;}
.enjoyConWrap .enjoyL .leftImg.enjoyImg4{ background: url(../img/sub3/4/image1.jpg) no-repeat center/cover;}
.enjoyConWrap .enjoyL .leftImg.enjoyImg5{ background: url(../img/sub3/5/image2.jpg) no-repeat center/cover;}

.enjoyConWrap .enjoyR{ width: 50%; aspect-ratio: 1; display: flex; justify-content: space-between; align-items: flex-end; flex-direction: column;}
.enjoyConWrap .enjoyR .rightConTxt{ padding: 40px 0 0 40px; width: 100%;}
.enjoyConWrap .enjoyR .rightConTxt .conTit{ margin-bottom: 50px;}
.enjoyConWrap .enjoyR .rightConTxt .conTit h3{ font-family: 'Paperlogy3'; font-size: 16px; color: #646a70; margin-bottom: 10px; }
.enjoyConWrap .enjoyR .rightConTxt .conTit h2{ font-family: 'GyeonggiR'; font-size: 30px; color: #191919;}
.enjoyConWrap .enjoyR .rightConTxt .conTxt p{ font-family: 'GyeonggiR'; font-size: 14px; color: #646a70; line-height: 1.5em; }

.enjoyConWrap .enjoyR .enjoyBtn{ margin: 0 40px 40px 0; }
.enjoyConWrap .enjoyR .enjoyBtn a{ display: block; font-family: 'Paperlogy4'; font-size: 16px; color: #191919; position: relative; z-index: 2;}
.enjoyConWrap .enjoyR .enjoyBtn a::after{content: ''; display: block; width: 15px; aspect-ratio: 1; background-color: #cccac4; border-radius: 50%; position: absolute; top: -3px; right: -5px; z-index: -1;}

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

@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 */
    .facIntro .facIntroL{ width: 40%;}
    .facIntro .facIntroR{ padding: 20px;}
    .facIntro .facIntroR .facIntroImgL{ width: 90%;}
    .facIntro .facIntroR .facIntroImgS{ bottom: 20px; right: 20px;}
    .facImgList .imgListTit h3{ font-size: 82px;}
    .facImgList .imgListTit h2{ font-size: 82px;}

    /* banner */
    .bannerIn .bannerTxt p{ font-size: 90px;}
    .bannerResBtn{left: 20%; bottom: 100px;}

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

@media all and (max-width: 768px){
    .enjoyConWrap .enjoyR .rightConTxt .conTxt p{ font-size: 13px;}

    /* facIntro */
    .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 */
    .facImgList .imgListTit h3{ font-size: 66px;}
    .facImgList .imgListTit h2{ font-size: 66px;}
    .facImgList .imgList .listR .designTxt p{ font-size: 12px; display: none;}

    /* banner */
    .bannerIn .bgImg{ width: 200px;}
    .bannerIn .bannerTxt p{ font-size: 60px;}
    .bannerResBtn{ left: 30%; bottom: 60px; display: none;}

    /* enjoy */
    .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){

    .facIntro .facIntroL .facTxt p{ font-size: 12px; letter-spacing: 0;}
    .enjoyConWrap .enjoyR .rightConTxt .conTxt p{ font-size: 14px;}

    /* facImgList */
    .facImgList{ padding-top: 90px; margin: 50px auto 0;}
    .facImgList .imgListTit h3{ font-size: 42px;}
    .facImgList .imgListTit h2{ font-size: 42px;}
    .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{ margin: 80px auto;}
    .bannerIn .bgImg{ width: 150px;}
    .bannerIn .bannerTxt p{ font-size: 36px;}
    .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: 30px 10px 30px 0; }
    .enjoyConWrap .enjoyR .enjoyBtn a{ font-size: 14px;}
    .enjoyConWrap .enjoyR .rightConTxt .conTit{ margin-bottom: 20px;}
    .enjoyConWrap .enjoyR .rightConTxt .conTit h3{ margin-bottom: 0;}
}

@media all and (max-width: 375px){
    .facImgList{ padding-top: 45px; margin: 50px auto 0;}
    .facImgList .imgListTit{  top: 0px;}
    .facImgList .imgListTit h3{ font-size: 28px;}
    .facImgList .imgListTit h2{ font-size: 28px;}


}

@media all and (max-width: 320px){
    .tabMenu { flex-wrap: wrap; width: 70%; margin: 0 auto; justify-content: center;}
    .tabMenu .listCon{ margin: 5px 5px;}
    .enjoyWrap .enjoyTit p .mbr{ display: none;}
}