@charset "utf-8";
/* 6/11 동찬 미지의 선을 체크중
header {display: none;}
.multipleDiv  {display: none;}
.multipleDiv.section1 {display: block;}
footer {display: none;}
*/

.scroll-indicator {position: absolute;bottom:50px;left:100px;display: flex;align-items: center;color: white;z-index: 10;}
.scroll-indicator .icon {display: flex; align-items: center; flex-direction: column;}
.scroll-indicator .arrow {width: 0;height: 0;border-left: 4px solid transparent;border-right: 4px solid transparent;margin: 5px 0;}
.scroll-indicator .arrow.up {border-bottom: 4px solid white;}
.scroll-indicator .arrow.down {border-top: 4px solid white;}
.scroll-indicator .circle {width: 20px;height: 20px;border: 1px solid white;border-radius: 50%;}
.scroll-indicator .scroll-text {font-size: 15px;white-space: nowrap; font-family: 'SUITE Light'; margin-right: 20px;}
@media screen and (max-width:1800px) {
    .scroll-indicator {left:20px;}
}
@media screen and (max-width:1200px) {
    .scroll-indicator  {display: none;}
}

.section1 {position: relative;background:#ECF5FF;}
.section1::before {content:'performance'; text-transform: uppercase; color:#DCEAFB; font-family: 'SUITE Heavy'; font-size: 100px; line-height: 75px; max-width:1720px; margin:0 auto; width:100%; text-align:right; position: absolute; top:0; left:50%; transform: translateX(-50%);}
.section2 {position: relative; background: #F8F8F8; overflow:hidden;}    
.section2::before {content:'4 major projects'; text-transform: uppercase; color:#EBEBEB; font-family: 'SUITE Heavy'; font-size: 100px; line-height: 75px; max-width:1720px; margin:0 auto; width:100%; text-align:right; position: absolute; top:0; left:50%; transform: translateX(-50%);}
.section3 {position: relative;}
.section3::before {content:'glocal news'; text-transform: uppercase; color:#F2F2F2; font-family: 'SUITE Heavy'; font-size: 100px; line-height: 75px; max-width:1720px; margin:0 auto; width:100%; text-align:right; position: absolute; top:0; left:50%; transform: translateX(-50%);}
.section4 {position: relative;}
.section4 > div {display: flex;}
@media screen and (max-width:1200px) {
    .section1::before,
    .section2::before,
    .section3::before {font-size: 70px; line-height: 55px; width:unset; left:unset; right:40px; transform:unset;}
}
@media screen and (max-width:768px) {
    .section1::before,
    .section2::before,
    .section3::before {font-size: 40px; line-height: 30px; right:20px;}
    .section4 > div {flex-direction: column;}
}


/* 추진성과 */
.wrap-card {overflow:hidden;padding:105px 0 120px 0; position: relative; z-index: 1;}
.wrap-card::before {content:''; width:100%; height:100%; position: absolute; left:0; top:0; background: url('../../images/main/card/card-obj1.png') no-repeat left top;}
.wrap-card::after {content:''; width:100%; height:100%; position: absolute; left:0; top:0; background: url('../../images/main/card/card-obj2.png') no-repeat right bottom; z-index: -1;}
.wrap-card .frmae {position: relative; z-index: 2;}
.wrap-card .title {text-align: center; margin-bottom: 42px;}
.wrap-card .title strong {font-family: 'SUITE ExtraBold'; font-size: 50px; line-height: 80px; color:#000;}
.wrap-card .title strong span {color:#00B6AD;}

.wrap-card .slider > ul > li {border-radius:10px; width:530px; overflow:hidden; position: relative; margin:0 -30px;}
.wrap-card .text-box {background:#0E51A1; color:#fff; padding :45px 0 10px 0; min-height:530px; text-align: center; position: relative; z-index: 1; display: flex; flex-direction: column; z-index: 2;}
.wrap-card .text-box > strong {font-size: 32px; font-family: 'SUITE Bold'; line-height: 45px; display: block; text-align: center; margin-bottom: 30px;}
.wrap-card .text-box > ul {padding:0 65px 0 95px; display: flex; flex-direction: column; flex:1;}
.wrap-card .img-box {position: absolute; top:0; left:0; width:100%; height:100%; background:#fff;}
.wrap-card .img-box img {width: 100%; height: 100%; object-fit: cover; opacity:0.7;}
.wrap-card .img-box p {position: absolute; bottom:0; left:0; z-index: 1; color:#fff; font-size: 22px; line-height: 32px; font-family: 'SUITE Medium'; padding:45px 60px; transform: scale(1.1);}
.wrap-card .row {display: flex; align-items: center; margin-bottom: 30px;}
.wrap-card .row:last-child {margin-bottom: 0;}

.wrap-card .icon {margin-right:30px; flex-shrink: 0;}
.wrap-card .text { text-align:left;background:#0E51A1;}
.wrap-card .text > strong {font-size: 26px;}
.wrap-card .text .num {font-family: 'SUITE Heavy'; font-size: 38px; line-height: 1;}
.wrap-card .text p {font-size: 20px; font-family: 'SUITE Light'; line-height: 30px;}

.wrap-card .swiper-slide:has(~ .swiper-slide-active) {transform-origin:left center;  transform: perspective(500px) rotateY(10deg) scale(0.9);}
.wrap-card .swiper-slide {transform-origin:right center; transform: perspective(500px) rotateY(-10deg) scale(0.9); }
.wrap-card .swiper-slide .text-box {visibility: hidden; opacity:0; transition:.35s;}
.wrap-card .swiper-slide-active {box-shadow: 0 0 32px rgba(0,0,0,0.3); transform:rotateY(0deg) scale(1); transition: transform .75s;}
.wrap-card .swiper-slide-active .text-box {visibility: visible; opacity:1;}

.wrap-card .control {position: relative; text-align: center;  display:block; margin-top:-24px; z-index: 3;}
.wrap-card .control .control-inner {display: flex; align-items: center; justify-content: space-around; padding:0 25px; height:45px; width: 200px; background:#fff; border:1px solid #ddd; border-radius:10px; margin: 0 auto; }
.wrap-card .control .prevnext {position: relative; font-size: 0;}
.wrap-card .control .prevnext::before {content:''; width:1px; height:15px; background:#999; position: absolute; left:50%; top:0;}
.wrap-card .control .prevnext button {width:30px; height:15px; text-indent: -9999px;  background-repeat: no-repeat;}
.wrap-card .control .prev {background-position:left center;background-image:url('../../images/main/card/card-arrow-prev.png');}
.wrap-card .control .next {background-position:right center;background-image:url('../../images/main/card/card-arrow-next.png');}
.wrap-card .control .playstop button {text-indent: -9999px; width:30px; height:15px; display: none;}
.wrap-card .control .playstop button.on {display: block;}
.wrap-card .control .play {background:url('../../images/main/card/card-play.png') no-repeat center;}
.wrap-card .control .stop {background:url('../../images/main/card/card-stop.png') no-repeat center;}
.wrap-card .number span {display: inline-block; font-size: 18px; color:#888; font-family: 'SUITE Medium';}
.wrap-card .number span.sl {color:#aaa;}
.wrap-card .number span.current {color:#00B6AD; font-family: 'SUITE Bold';}

@media screen and (max-width:1200px) {
    .wrap-card {padding:65px 0 80px 0}
    .wrap-card::before {background-position: left -230px top !important;}
    .wrap-card::after {background-position: right bottom -160px !important;}

    .wrap-card .title {margin-bottom: 28px;}
    .wrap-card .title strong {font-size: 40px;}

    .wrap-card .slider > ul > li {margin: 0 -33px; width:500px}
    .wrap-card .text-box {min-height:500px;}
    .wrap-card .text-box > strong {font-size: 30px; line-height: 40px;}
    .wrap-card .text > strong {font-size: 22px;}
    .wrap-card .text .num {font-size: 34px;}
    .wrap-card .text p {font-size: 18px; line-height: 1.5;}
}
@media screen and (max-width:768px) {
    .wrap-card {padding:43px 0 50px 0;}
    .wrap-card::before {display: none;}
    .wrap-card::after {background-position: right -80px bottom 0 !important; background-size:50%;}
    .wrap-card .frame {padding:0 20px;}
    .wrap-card .title {margin-bottom: 20px;}
    .wrap-card .title strong {font-size: 30px; line-height: 1.5;}
    .wrap-card .slider > ul > li {margin:unset;}
    .wrap-card .text-box {min-height:460px;}
    .wrap-card .slider > ul > li {width:100%;}
    .wrap-card .swiper-slide {transform-origin:unset; transform:unset;}
    .wrap-card .swiper-slide:has(~ .swiper-slide-active) {transform-origin:unset; transform:unset;}
    .wrap-card .swiper-slide-active {box-shadow: unset; transform:unset; transition: unset;}
    .wrap-card .text-box {padding:35px 0 10px 0;}
    .wrap-card .text-box > ul {padding: 0 55px 0 65px;}
    .wrap-card .text-box > strong {font-size: 26px; margin-bottom: 23px; line-height: 35px;}
    .wrap-card .text .num {font-size: 30px;}
    .wrap-card .row { transform: translateZ(0); will-change: transform; backface-visibility: hidden;margin-bottom: 20px;}
}

/* 추진과제 */
.wrap-promotion {position: relative; padding:105px 0 120px 0;}
.wrap-promotion .frame { max-width:1720px; width:100%; margin:0 auto;}
.wrap-promotion .frame-inner {position: relative;}
.wrap-promotion .title {text-align: center; margin-bottom: 42px;}
.wrap-promotion .title strong {font-family: 'SUITE ExtraBold'; font-size: 50px; line-height: 80px; color:#000;}
.wrap-promotion .title strong span {color:#00B6AD;}
.wrap-promotion .slider-wrap {display: flex; width:calc(100% - 130px); position: relative;}
.wrap-promotion .main-slider {position: relative; margin-right:110px;}
.wrap-promotion .slider1 {width:750px; height:550px; overflow:hidden; border-radius:10px; float:left; box-shadow: 0 0 32px rgba(0,0,0,0.3); position: relative;}
.wrap-promotion .slider1 li {display: flex; align-items: center; justify-content: center;} 
.wrap-promotion .slider1 li .tablet{ display: none;}
.wrap-promotion .slider1 li .mobile{ display: none;}
.wrap-promotion .slide1 {background:url('../../images/main/major/slide1-bg.png') no-repeat center / cover;}
.wrap-promotion .slide2 {background:url('../../images/main/major/slide2-bg.png') no-repeat center / cover;}
.wrap-promotion .slide3 {background:url('../../images/main/major/slide3-bg.png') no-repeat center / cover;}
.wrap-promotion .slide4 {background:url('../../images/main/major/slide4-bg.png') no-repeat center / cover;}

.wrap-promotion .slider2 {float:left; width:calc(100% - 750px - 130px); padding-left: 14px; align-self: center; min-height:550px;}
.wrap-promotion .slider-tab {display: flex; gap:0 25px; margin-bottom: 55px;}
.wrap-promotion .slider-tab button {font-size: 18px; color:#a0a0a0; font-family: 'SUITE SemiBold'; transition: color .3s; position: relative;}
.wrap-promotion .slider-tab button:hover {color:#000;}
.wrap-promotion .slider-tab button.on {font-size: 24px; color:#000;}
.wrap-promotion .slider-tab button.on::before {content:''; width:20px; height:20px; background:#005BFE; opacity:0.5; position: absolute; right:-11px; top:-3px; border-radius:50%;}
.wrap-promotion .slide-content-box li {font-size: 20px; line-height: 1.5; margin-bottom: 12px; font-family: 'SUITE Regular'; color:#333;}
.wrap-promotion .bold {font-family: 'SUITE Bold';}
.wrap-promotion .box > strong {font-size: 34px; font-family: 'SUITE Bold'; color:#000; display: block; margin-bottom: 25px;}
.wrap-promotion .box > strong span {color:#fff; padding:0 5px; border-radius:5px; display: inline-block;}
.wrap-promotion .box li {padding-left:19px; position: relative;}
.wrap-promotion .box li::before {content:''; width:8px; height:8px; border-radius:50%; position: absolute; left:0; top:11px;}

.wrap-promotion .box.color1 > strong span {background:#005BAC;}
.wrap-promotion .box.color1 .bold {color:#005BAC;}
.wrap-promotion .box.color1 li::before {background:#005BAC;}

.wrap-promotion .box.color2 > strong span {background:#8E569F;}
.wrap-promotion .box.color2 .bold {color:#8E569F;}
.wrap-promotion .box.color2 li::before {background:#8E569F;}

.wrap-promotion .box.color3 > strong span {background:#26B294;}
.wrap-promotion .box.color3 .bold {color:#26B294;}
.wrap-promotion .box.color3 li::before {background:#26B294;}

.wrap-promotion .box.color4 > strong span {background:#898A89;}
.wrap-promotion .box.color4 .bold {color:#898A89;}
.wrap-promotion .box.color4 li::before {background:#898A89;}

.wrap-promotion .control {width:145px; height:145px; background:#333; position: absolute; top:50%; right:calc(-145px / 2); z-index: 1; border-radius:50%; margin-top:calc(-145px / 2); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 32px rgba(0,0,0,0.3);}
.wrap-promotion .control-inner {position: relative; padding:0 35px; font-size: 0;}
.wrap-promotion .prevnext {}
.wrap-promotion .prevnext button {width:13px; height:23px; background:url('../../images/main/major/slide-arrow.png') no-repeat center; opacity:0.35; transition: opacity .35s; text-indent: -9999px; position: absolute;}
.wrap-promotion .prevnext button:hover {opacity:1;}
.wrap-promotion .prevnext .prev {left:0; transform: rotate(180deg);}
.wrap-promotion .prevnext .next {right:0;}
.wrap-promotion .playstop {}
.wrap-promotion .playstop button {width:13px; height:23px; display: none; text-indent: -9999px;}
.wrap-promotion .playstop button.on {display: inline-block;}
.wrap-promotion .playstop .play {background: url('../../images/main/major/slide-play.png') no-repeat center;}
.wrap-promotion .playstop .stop {background: url('../../images/main/major/slide-stop.png') no-repeat center;}

.wrap-promotion .number {position: absolute; bottom:-5px; left:-5px; z-index: 10; display: flex; align-items:end;}
.wrap-promotion .number .current {font-size: 110px; font-family: 'SUITE Heavy'; color:#fff; line-height: 0.8; text-align: center; display: block; opacity:0.4;}
.wrap-promotion .number .total,
.wrap-promotion .number .sl {font-size: 30px; font-family: 'SUITE Bold'; color:#fff; line-height: 1; opacity:0.2}
.wrap-promotion .number .sl {margin:0 10px 0 23px;}

.wrap-promotion .next-slider {width:750px; height:550px; overflow:hidden; border-radius:10px; position: absolute; top:0; left:calc(100% - 130px);}
.wrap-promotion .next-slider li {display: flex; align-items: center; justify-content: center;}
.wrap-promotion .next-slider li .tablet {display: none;}
.wrap-promotion .next-slider li .mobile {display: none;}

@media screen and (max-width:1800px) {
    .wrap-promotion .frame {padding:0 20px;}
    .wrap-promotion .slider-wrap {width:100%;}
    .wrap-promotion .main-slider {margin-right: 30px;}
    .wrap-promotion .slider2 {width:calc(100% - 750px - 20px); padding-left: 65px;}
    .wrap-promotion .next-slider {left:calc(100% - 0px)}
}
@media screen and (max-width:1500px) {
    .wrap-promotion .slider1 {width:650px; height:450px;}
    .wrap-promotion .next-slider {height:450px; width:650px;}
    .wrap-promotion .slider2 {width:calc(100% - 650px - 30px); min-height:450px;}
    .wrap-promotion .slider2 li {padding-right:40px;}
    .wrap-promotion .slider-tab {margin-bottom: 20px;}
    .wrap-promotion .box > strong {font-size: 28px;}
    .wrap-promotion .control {top:150px; margin-top: 0;}
}
@media screen and (max-width:1300px) {
    .wrap-promotion {padding:65px 0 60px 0}
    .wrap-promotion .frame {padding:0 40px;}
    .wrap-promotion .title {margin-bottom: 28px;}
    .wrap-promotion .title strong {font-size: 40px;}
    .wrap-promotion .slider-wrap {flex-direction: column;}
    .wrap-promotion .main-slider {width:650px;}
    .wrap-promotion .next-slider {left:calc(100% - 0px); width:650px; height:450px;}
    .wrap-promotion .slider1 li .tablet{ display: block;}
    .wrap-promotion .slider1 li .pc{ display: none;}
    .wrap-promotion .slider2 {width:100%; padding-left: 0; margin-top:35px; min-height:unset;}
    .wrap-promotion .slider-tab {gap:40px 0; position: absolute; top:0; right:0; margin-top: 30px; flex-direction: column; align-items: start; width:calc(100% - 650px); padding-left: 60px;}
    .wrap-promotion .slide-content-box {display: flex;}
    .wrap-promotion .slide-content-box > ul:first-child {padding-right: 70px;}
    .wrap-promotion .control {top:unset; bottom:30px;}
    .wrap-promotion .box > strong {text-align: center;}
    .wrap-promotion .next-slider li .tablet {display: block;} 
    .wrap-promotion .next-slider li .pc {display: none;}

    .wrap-promotion .number .current {font-size: 90px;}
    .wrap-promotion .number .sl,
    .wrap-promotion .number .total {font-size: 30px;}
}
@media screen and (max-width:1024px) {
    .wrap-promotion .main-slider {width:70%;}
    .wrap-promotion .slider1 {width:100%;}
    .wrap-promotion .slider-tab {width:30%; padding-left: 20px;}
}
@media screen and (max-width:768px) {
    .wrap-promotion {padding:43px 0 50px 0;}
    .wrap-promotion .frame {padding:0 20px;}
    .wrap-promotion .title {margin-bottom: 20px;}
    .wrap-promotion .title strong {font-size: 30px; line-height: 1.5;}
    .wrap-promotion .next-slider {display: none;}
    .wrap-promotion .slider-tab {display: none;}
    .wrap-promotion .main-slider {width:100%;}
    .wrap-promotion .slider1 {box-shadow: unset; height: 300px;}
    .wrap-promotion .slider1 li .tablet {display:none;}
    .wrap-promotion .slider1 li .mobile {display:block;}
    .wrap-promotion .control {width:auto; height:auto; border-radius:10px; right:0; bottom:0; padding:12px 20px; box-shadow: unset;}
    .wrap-promotion .control-inner {padding:0 32px;}
    .wrap-promotion .slider2 {margin-top: 22px;}
    .wrap-promotion .slider2 li {padding-right:0;}
    .wrap-promotion .box > strong {font-size: 24px; margin-bottom: 17px;}
    .wrap-promotion .box > strong span {display: inline-block; line-height: 1.2;}
    .wrap-promotion .slide-content-box {flex-direction: column;}
    .wrap-promotion .box li {font-size: 17px; }
    .wrap-promotion .box li::before {top:9px;}
    .wrap-promotion .slide-content-box > ul:first-child {padding-right: 0;}

    .wrap-promotion .next-slider li .tablet {display: none;} 
    .wrap-promotion .next-slider li .mobile {display: block;} 

    .wrap-promotion .number .current {font-size: 50px;}
    .wrap-promotion .number .sl,
    .wrap-promotion .number .total {font-size: 24px;}
}




/* tween */
header {top:-220px;}
.wrap-visual .control {opacity:0;}
.wrap-visual .item {opacity:0;}

.wrap-card .title {opacity:0; top:100px; position: relative;}
.wrap-card .slider {position: relative; top:100px; opacity:0;}

.wrap-promotion .title {position: relative; top:100px; opacity:0;}
.wrap-promotion .slider1 {left:-100px; opacity:0;}
.wrap-promotion .control {opacity:0;}
.wrap-promotion .slider2 {top:100px; opacity:0;}
.wrap-promotion .next-slider {opacity:0;}

.wrap-news .title {position: relative; top:100px; opacity:0;}
.wrap-news .row {position: relative; top:100px; opacity:0;}
.wrap-news .control {opacity:0; top:100px;}

.wrap-schedule .frame {position: relative; left:-100px; opacity:0;}
.wrap-notice .frame {position: relative; right:-100px; opacity:0;}

.wrap-smart .frame {position: relative; top:100px; opacity:0;}