@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/sub1/image1.jpg);}
.mainBnSlide .s2{background-image:url(../img/sub1/image2.jpg);}
.mainBnSlide .s3{background-image:url(../img/sub1/image3.jpg);}
.mainBnSlide .s4{background-image:url(../img/sub1/image4.jpg);}
.mainBnSlide .s5{background-image:url(../img/sub1/image5.jpg);}
.mainBnSlide .s6{background-image:url(../img/sub1/image6.jpg);}
.mainBnSlide .s7{background-image:url(../img/sub1/image7.jpg);}
.mainBnSlide .s8{background-image:url(../img/sub1/image8.jpg);}
.mainBnSlide .s9{background-image:url(../img/sub1/image9.jpg);}
.mainBnSlide .s10{background-image:url(../img/sub1/image10.jpg);}
.mainBnSlide .s11{background-image:url(../img/sub1/image11.jpg);}
.mainBnSlide .s12{background-image:url(../img/sub1/image12.jpg);}
.mainBnSlide .s13{background-image:url(../img/sub1/image13.jpg);}
.mainBnSlide .s14{background-image:url(../img/sub1/image14.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-rl;}

.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);
    }
}

/* sec1 */
.secContainer{ width: 100%; }
.secContainer .secWrap{ width: 1400px; margin: 120px auto; display: flex; justify-content: center;}
.textContainer{ width: 60%;}
.textContainer .secOneTit{ margin-bottom: 50px;}
.textContainer .secOneTit h3{font-family: 'Paperlogy4'; font-size: 24px; font-weight: 400; color: #44484c; margin-bottom: 20px;}
.textContainer .secOneTit h2{ font-family: 'GyeonggiR'; font-size: 48px; font-weight: 600; }
.textContainer .secOneTxt{ margin-bottom: 80px;}
.textContainer .secOneTxt p{ font-family: 'GyeonggiR'; font-size: 14px; font-weight: 400; color:#646a70; line-height: 1.5em; }

.imgContainer{ width: 40%; height: 100%; position: relative;}
.imgContainer .imgIn{width: 100%; }
.imgContainer .imgIn .bigImg{ aspect-ratio: 3/3.5; background: url(../img/sub1/image4.jpg) no-repeat center/cover;}
.imgContainer .imgIn .smallImg{ position: absolute; bottom: 50px; left: -35%; width: 45%;aspect-ratio: 3/3.5; background: url(../img/sub1/image7.jpg) no-repeat 20% 50%/cover;}
.viewMore{ width: 160px; height: 40px; border: 1px solid #a6a49f; border-radius:10px; }
.viewMore a{ display: block; font-family: 'Paperlogy4'; font-size: 16px; color:#a6a49f; text-align: center; line-height: 40px; transition: all 0.3s ease-in-out;  }
.viewMore a:hover{ background-color: #a6a49f; color: #fff; border-radius: 10px; border: none; }

/* design */
.designIn{ width: 1400px; margin: 120px auto; display: flex; justify-content: space-between;}
.designIn .ImgLstL{ width: 50%; aspect-ratio: 1; background-color: #030303; margin-right: 10px;}
.designIn .ImgLstL .designImg{ height:100%;background: url(../img/sub1/image2.jpg) no-repeat center/cover;}
.designIn .ImgLstR{ width: 50%; aspect-ratio: 1/0.5; margin-left: 10px; display: flex; justify-content: space-between; flex-direction: column;}
.designIn .ImgLstR .listTop{ width: 100%; height: 50%; display: flex; justify-content: space-between; padding-bottom: 10px;}
.designIn .ImgLstR .listTop .designTxt{ width: 50%; padding-right: 10px;}
.designIn .ImgLstR .listTop .designTxt p{ font-family: 'GyeonggiR'; font-size: 13px; color: #646a70; }
.designIn .ImgLstR .listTop .desingImgR{ width: 50%; aspect-ratio: 1; background: url(../img/sub1/image13.jpg) no-repeat 0% 50%/cover;}
.designIn .ImgLstR .listBottom{ width: 100%; height: 50%; display: flex; justify-content: space-between; flex-direction: row-reverse; align-items: flex-end; padding-top: 10px;}
.designIn .ImgLstR .listBottom .desingImgL{ width: 50%; aspect-ratio: 1; background: url(../img/sub1/image6.jpg) no-repeat center/cover;}
.designIn .ImgLstR .listBottom .designTxt{ width: 50%; padding-left: 10px;}
.designIn .ImgLstR .listBottom .designTxt p{ font-family: 'GyeonggiR'; font-size: 13px; text-align: right; color: #646a70;}


/* banner */
.bannerIn{ width: 1400px; margin: 120px auto 0; display: flex; justify-content: center; align-items: center; position: relative; }
.bannerIn .bgImg{ width: 100%; aspect-ratio: 16/5; background: url(../img/sub1/image14.jpg) no-repeat 50% 45%/cover; position: relative; z-index: -1;}
.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-family: 'GabiaCheongyeon'; font-size: 110px; font-weight: 500; text-align: center; color: #fff; }

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


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

@media all and (max-width: 1400px){
    .mainBnSlide .mainBnCon{width: 95%;}
    .secContainer .secWrap{ width: 95%;}
    .bannerIn{width: 95%;}
    .designIn{ width: 95%;}
}

@media all and (max-width: 1024px){
    .imgContainer .smallImg{ left: -20%;}

    /* banner */
    .bannerIn .bannerTxt p{ font-size: 82px;}
    .bannerResBtn{ left: 50px; bottom: 80px;}
    .introIn .introImgList{ margin-top: 50px;}
    .introImgList .imgListL{ padding-right: 5px;}
    .introImgList .imgListC{ padding: 0 5px;}
    .introImgList .imgListR{ padding-left: 5px;}



}

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

    .mainBnTit .mainBnLogo img{ width: 140px;}
    .secContainer .secWrap{ flex-direction: column; position: relative; margin: 80px auto;}
    .textContainer { width: 100%; margin-bottom: 60px;}
    .textContainer .secOneTxt{ margin-bottom: 30px;}
    .textContainer .secOneTit{ margin-bottom: 30px;}
    .textContainer .secOneTit h3{ font-size: 18px; margin-bottom: 0;}
    .textContainer .secOneTit h2{ font-size: 36px;}

    .imgContainer{ width: 100%; display: flex; justify-content: flex-end;}
    .imgContainer .imgIn{ width: 70%;  aspect-ratio: 3/3.5; display: flex; justify-content: flex-end; }
    .imgContainer .imgIn .smallImg{ left: 0;}

    /* design */
    .designIn{flex-direction: column-reverse; margin-bottom: 30px;}
    .designIn .ImgLstL{ width: 100%;}
    .designIn .ImgLstR{ width: 100%; padding-bottom: 20px; margin-left: 0;}
    .designIn .ImgLstR .listTop .designTxt p{ font-size: 11px;}
    .designIn .ImgLstR .listBottom .designTxt p{font-size: 11px;}

    /* banner */
    /* .bannerIn .bgImg{ width: 200px;} */
    .bannerIn{ margin-top: 30px;}
    .bannerIn .bannerTxt p{ font-size: 60px;}
    .bannerResBtn{ left: 70px; bottom: 60px;}


}

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

    .designIn{margin: 80px auto;}
    .bannerIn{ margin: 10px auto;}
    .bannerIn .bgImg{ aspect-ratio: 16/7; background: url(../img/sub1/image12.jpg) no-repeat 50% 32% / cover;}
    .bannerIn .bannerTxt p{ font-size: 32px; color: #fff;}
    .bannerResBtn{ left: 50px; bottom: 45px; display: none;}

}

@media all and (max-width: 375px){
    .bannerIn .bannerTxt p { font-size: 24px;}
}