@charset "utf-8";

.br{ display: none;}
.more-btn.center{ display: none;}

/* con-scroll */
.con-scroll{ width: 100%; margin-top: 180px; margin-bottom: 150px; }
.con-scroll .scroll-in{ width: 1600px; margin: 0 auto; }

.scroll-in .design-txt{ margin-bottom: 90px;}
.scroll-in .design-txt h1{ font-size: 30px; font-weight: 400; color: rgba(25, 25, 25, 0.2); text-align: center;  }

.scroll-lst{ display: flex; justify-content: space-between; position: relative;}
.scroll-lst .scroll-left{ width: 50%; }
.scroll-left .left-img{ width: 100%;  aspect-ratio: 16 / 9; background-color: #ccc; margin-bottom: 20px;}
.left-img.img1{ background: url(../img/sub1/image1.jpg) no-repeat center/cover;}
.left-img.img2{ background: url(../img/sub1/image2.jpg) no-repeat center/cover;}
.left-img.img3{ background: url(../img/sub1/image3.jpg) no-repeat center/cover;}
.left-img.img4{ background: url(../img/sub1/image4.jpg) no-repeat center/cover;}
.left-img.img5{ background: url(../img/sub1/image5.jpg) no-repeat center/cover;}
.left-img.img6{ background: url(../img/sub1/image6.jpg) no-repeat center/cover;}
.left-img.img7{ background: url(../img/sub1/image7.jpg) no-repeat center/cover;}
.left-img.img8{ background: url(../img/sub1/image8.jpg) no-repeat center/cover;}
.left-img.img9{ background: url(../img/sub1/image9.jpg) no-repeat center/cover;}
.left-img.img10{ background: url(../img/sub1/image10.jpg) no-repeat center/cover;}
.left-img.img11{ background: url(../img/sub1/image11.jpg) no-repeat center/cover;}
.left-img.img12{ background: url(../img/sub1/image12.jpg) no-repeat center/cover;}
.left-img.img13{ background: url(../img/sub1/image13.jpg) no-repeat center/cover;}
.left-img.img14{ background: url(../img/sub1/image14.jpg) no-repeat center/cover;}
.left-img.img15{ background: url(../img/sub1/image15.jpg) no-repeat center/cover;}
.left-img.img16{ background: url(../img/sub1/image16.jpg) no-repeat center/cover;}

.scroll-right{ width:calc(50% - 60px); height: 450px; position: sticky; top: 150px;}
.scroll-right .right-in .right-tit{  margin-top: 30px;}
.scroll-right .right-in .right-tit h2{ font-size: 24px; color: #191919; font-weight: 400;  }
.scroll-right .right-in .right-txt{ margin-top: 30px;}
.scroll-right .right-in .right-txt p{ font-weight: 400; line-height: 1.5em;}

.scroll-right .right-in{ position: relative; height: 100%;}
.scroll-right .right-in .more-btn{ width:116px; position: absolute; bottom: 0; right: 20px;}
.scroll-right .right-in .more-btn a{ display: block; padding-bottom: 10px; color: #9ba4aa; text-align: center; width: auto;}
.scroll-right .right-in .more-btn a:hover{ color: #000; }
.scroll-right .right-in .more-btn a::after{ content: ''; position: absolute; left: 0; bottom:0px; width: 0; height: 1.5px; margin: 5px 0 0; transition: all 0.3s ease-in-out; opacity: 0; background-color: #9ba4aa;}
.scroll-right .right-in .more-btn a:hover::after{ content:''; width:100%; opacity: 1; }

/* banner */
.banner{ background: url(../img/sub1/image12.jpg)no-repeat center/cover;}
.banner .black-box{ background-color: rgba(0, 0, 0, 0.35);}

/* design-img */
.design-img{ width: 100%; margin-bottom: 150px; }
.design-img .design-in{ width: 1600px; margin: 0 auto;}
.design-tit h2{ font-size: 24px; color: #191919; font-weight: 400;}

.design-img-lst{ display: flex; justify-content: space-between; align-items: center; margin-top: 50px; }
.design-img-lst .lst-left{ width: 50%; }
.design-img-lst .lst-left .left-img{ width: 100%; aspect-ratio:1; background: url(../img/sub1/image3.jpg) no-repeat 75% 50%/cover;}

.lst-right{ width: 50%; margin-left: 20px; }
.lst-right .right-top{ display: flex; justify-content: space-between; margin-bottom: 20px;}
.lst-right .right-top .rt-img{ width: 50%; aspect-ratio: 1; background: url(../img/sub1/image4.jpg) no-repeat 45%/cover;}
.lst-right .right-top .rt-txt{ width: 50%; margin-top: 20px; margin-right: 20px;}
.lst-right .right-top .rt-txt p{ text-align: right; font-size: 12px; font-weight: 400; line-height: 1.5em; color: #c7cdd1;}

.lst-right .right-bottom{ display: flex; justify-content: space-between; margin-bottom: 20px; align-items: flex-end;}
.lst-right .right-bottom:last-child{ margin-bottom: 0;}
.lst-right .right-bottom .rb-img{ width: 50%; aspect-ratio: 1; background: url(../img/sub1/image7.jpg) no-repeat 66%/cover;}
.lst-right .right-bottom .rb-txt{ width: 50%; margin-bottom: 20px; margin-left: 20px;}
.lst-right .right-bottom .rb-txt p{ text-align: left; font-size: 12px; font-weight: 400; line-height: 1.5em; color: #c7cdd1;}

/* --------------------------------------------------- 반응형웹 ------------------------------------------------------------ */
@media all and (max-width: 1600px){
    .con-scroll .scroll-in, .design-img .design-in{ width: 95%;}
}

@media all and (max-width: 1024px){
    .con-scroll{ margin-top: 130px;}
    .scroll-in .design-txt{ margin-bottom: 50px;}
    .br{ display: block;}
    .scroll-right{ width: calc(50% - 30px); height: 350px;}
    .scroll-right .right-in .right-txt p{ font-size: 12px;}
    .scroll-right .right-in .right-tit{ margin-top: 10px;}
    .design-img-lst{ flex-direction: column-reverse;}
    .design-img-lst .lst-left{width: 100%;}
    .lst-right{ width: 100%; margin-left: 0; margin-bottom: 20px;}
    .design-img-lst .lst-left .left-img{ aspect-ratio: 16/9;}
}

@media all and (max-width: 768px){
    .scroll-right{ height: auto;}
    .con-scroll .scroll-in{ position: relative;}
    .scroll-lst{ flex-direction: column-reverse;}
    .scroll-lst .scroll-left{ width: 100%;}
    .scroll-right{ position: static; width: 100%; height: auto; margin-bottom: 50px;}
    .scroll-in .design-txt{ display: none;}

    .more-btn.center{ display: block; position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%);}
    .more-btn.center{ width:116px;}
    .more-btn.center a{ display: block; color: #868f96; text-align: center; width: auto; text-align: center;}
    .more-btn.center a::after{ content: ''; display: block; width: auto; height: 1px; background-color: #9ba4aa; margin: 10px auto 0;}
}

@media all and (max-width: 500px){
    .scroll-right{ height: auto;}
    .scroll-right .right-in .more-btn{ display: none;}
    .lst-right .right-top .rt-txt{ margin-right: 0;}
    .lst-right .right-bottom .rb-txt{ margin-left: 0; margin-bottom: 10px;}
    .lst-right .right-top .rt-txt p{ font-size: 10px;}
    .lst-right .right-bottom .rb-txt p{ font-size: 10px;}
    .lst-right .right-top{ margin-bottom: 0;}
}