@charset "utf-8";

.mo {display: none;}

/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 910px; position: relative; }
.m-visual .visual .swiper-wrapper {transition-timing-function: linear;}
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1;}
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop::after {position: absolute; content: ''; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(11, 14, 22, 0.59) 0%, rgba(102, 102, 102, 0.00) 19.72%), linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%); top: 0; left: 0;}
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop video {width: 100%; height: 100%; object-fit: cover;}
.m-visual .visual .swiper-wrapper .swiper-slide .container {width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {position: absolute; top: 320px; left: 98px; font-size: 80px; line-height: normal; letter-spacing: -1.6px; color: #fff; font-weight: 100; width: 100%; opacity: 0; transition: all 1.2s ease .1s;}
.m-visual .visual .swiper-wrapper .swiper-slide .container h3 > strong {font-weight: 500;}
.m-visual .visual .swiper-wrapper .swiper-slide .container p {position: absolute; top: 440px; left: 98px; font-size: 22px; line-height: 1.46; letter-spacing: -.44px; text-shadow:0 0 7.4px #03040A;; color: #fff; font-weight: 600; width: 100%; opacity: 0; transition: all 1.2s ease .5s;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 360px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 480px; opacity: 1;}

.controls {position: absolute; top: 580px; left: 50%; transform: translateX(-50%); max-width: 1470px; padding: 0 15px; width: 100%; height: 27px; z-index: 5;}
.controls .btn-area {width: 300px; display: flex; gap:18px; align-items: center; height: 100%; margin-left: 83px;}
.swiper-pagination-fraction.visual-paging {width: 65px; font-size: 0; color: #fff; height: 100%; position: relative; display: flex; align-items: center; bottom: 0; top: 0; opacity: 1;}
.swiper-pagination-fraction.visual-paging::after {position: absolute; content: ''; width: 1px; height: 9px; background-color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.swiper-pagination-fraction.visual-paging span {width: 22px; font-size: 18px; display: inline-block; position: relative; padding-left: 12px; font-family: 'Poppins';}
.swiper-pagination-fraction.visual-paging span ~ span {margin-left: 20px;}
.swiper-pagination-fraction.visual-paging span::before {position: absolute; content: '0'; font-size: 18px; color: #fff; top:50%; left: 0; transform: translateY(-50%);}
.swiper-pagination-fraction.visual-paging span.swiper-pagination-current {color: #0067FF;}
.swiper-pagination-fraction.visual-paging span.swiper-pagination-current::before {color: #0067FF;}
.m-visual .visual .controls .progress-box {position: relative; width: 100%; height: auto; max-width: 167px;}
.m-visual .visual .controls .progress-box .autoplay-progress {position: absolute; left: 0; top: 0; width: 100%;  height: 3px; background-color: rgba(255,255,255, .5); border-radius: 3px;}
.m-visual .visual .controls .progress-box .autoplay-progress svg {--progress:0; position: absolute; left: 0; top: 0; width: 100%; stroke-width: 3.5px; stroke: #0157D6; fill: none; stroke-dashoffset: calc(100 * (1 - var(--progress))); stroke-dasharray: 100;}
.controls .btn-area .btn-controls {width: 11px; height: 13px; background: url(../images/main/ico_pause.png) 50% 50% no-repeat; background-size: auto; display: block;}
.controls .btn-area .btn-controls.play {background-image: url(../images/main/ico_play.png);}

.section-header h4 {position: relative; padding-top: 37px; font-family: 'Poppins'; font-weight: 700; font-size: 52px; color: #222; line-height: normal;}
.section-header h4::before {position: absolute; content: ''; top: 0; left: 0; width: 44px; height: 7px; background: url(../images/main/ico_bar.jpg) 50% 50% no-repeat; background-size: auto;}
.section-header p {font-size: 18px; font-weight: 500; line-height: 1.79; letter-spacing: -.36px; color: #767676;}

/* sec2 */
.sec2 {padding-top: 135px;}
.sec2 .tit {text-align: center; margin-bottom: 275px;}
.sec2 .tit h4 {position: relative; padding-top: 43px; font-size: 44px; font-weight: 700; line-height: 1.61; color: #0157D6;}
.sec2 .tit h4::before {position: absolute; content: ''; width: 44px; height: 7px; top: 0; left: 50%; transform: translateX(-50%); background: url(../images/main/ico_bar.jpg) 50% 50% no-repeat; background-size: auto;}
.sec2 .tit h5 {font-size: 40px; color: #222; font-weight: 300; line-height: 1.77; margin-top: 25px;}
.sec2 .tit h5 > strong {display: block; margin-top: 4px; font-size: 68px; font-weight: 300; line-height: 1.04;}
.sec2 .tit p {margin-top: 30px; color: #767676; font-size: 18px; font-weight: 500; line-height: 1.79; letter-spacing: -.36px;} 
.sec2 .product {position: relative; padding: 400px 0 180px;}
.sec2 .product .container {position: static;}
.sec2 .product::before {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/main/bg_sec2.jpg) 50% 50% no-repeat; background-size: cover; z-index: -1;}
.sec2 figure {position: absolute; width: 100%; top: -177px; left: 50%; transform: translateX(-50%);}
.sec2 figure img {display: block; max-width: 100%; margin: 0 auto;}
.sec2 .inner {width: 100%; display: flex; gap: 65px; padding: 0 120px 0 27px;}
.sec2 .inner .pd-slide {max-width: 477px; width: 100%; position: relative;}
.sec2 .inner .pd-slide .swiper-slide {opacity: 0; transition: all .3s linear;}
.sec2 .inner .pd-slide .swiper-slide-active {opacity: 1;}
.sec2 .inner .txt-box {width: 1%; flex: 1 1 auto; position: relative;}
.sec2 .inner .txt-box::after {position: absolute; content: ''; width: 1px; height: calc(100% - 30px); top: 15px; right:0; background-color: #0157D6;}
.sec2 .inner .txt-box .txt-slide {padding-top: 50px; height: 340px; margin-top: 50px; overflow: hidden; }
.sec2 .inner .txt-box .txt {opacity: 0; transition: all .5s linear;}
.sec2 .inner .txt-box .txt.swiper-slide-active {opacity: 1;}
.sec2 .inner .txt-box .txt h5 {position: relative; padding-left: 40px; font-size: 26px; color: #222; font-weight: 700; line-height: normal;}
.sec2 .inner .txt-box .txt h5::before {position: absolute; content: ''; width:  6px; height: 6px; border-radius: 50%; background-color: #222; top: 15px; left: 15px;}
.sec2 .inner .txt-box .txt p {margin-top: 18px; font-size: 18px; font-weight: 500; color: #767676; line-height: 1.79; letter-spacing: -.36px; padding-left: 40px;}
.sec2 .inner .txt-box .txt .more {margin: 37px 0 0 40px;}
.sec2 .inner .txt-box .txt .more a {display: block; max-width: 153px; line-height: 40px; text-align: center; border-radius: 33px; border: 1px solid #0157D6; font-size: 14px; color: #0157D6; font-weight: 500; letter-spacing: -.28px; background-color: transparent; transition: all .2s linear;}
.sec2 .inner .txt-box .txt .more a:hover {color: #fff; background-color: #0157D6;}

.pd-control {position: absolute; width: 100%; bottom: 0 !important; left: 50% !important; transform: translateX(-50%); z-index: 2;} 
.pd-paging {width: 100%;  display: flex; gap: 33px; align-items: center; justify-content: center; opacity: 1;}
.pd-paging .swiper-pagination-bullet {position: relative; width: 23px; height: 27px; margin: 0 !important; border-radius: 0; background: none; opacity: 1; font-family: 'Poppins';}
.pd-paging .swiper-pagination-bullet::before {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: 500; color: #999; line-height: normal; letter-spacing: -.36px; transition: all .2s linear;}
.pd-paging .swiper-pagination-bullet:nth-of-type(1)::before {content: '01';}
.pd-paging .swiper-pagination-bullet:nth-of-type(2)::before {content: '02';}
.pd-paging .swiper-pagination-bullet:nth-of-type(3)::before {content: '03';}
.pd-paging .swiper-pagination-bullet:nth-of-type(4)::before {content: '04';}
.pd-paging .swiper-pagination-bullet::after {position: absolute; content: ''; width: 100%; height: 1px; bottom: 0; left: 0; background-color: #0157D6; opacity: 0; transition: all .2s linear;}
.pd-paging .swiper-pagination-bullet-active::before {color: #0157D6; font-weight: 600;}
.pd-paging .swiper-pagination-bullet-active::after {opacity: 1;}

.txt-control {position: absolute; width: 21px; height: calc(100% - 30px); top: 15px; right: -10px; z-index: 2;}
.txt-control::before {position: absolute; content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: #0157D6; top: 0; left: 50%; transform: translateX(-50%);}
.txt-control::after {position: absolute; content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: #0157D6; bottom: 0; left: 50%; transform: translateX(-50%);}
.txt-control .txt-paging {width: 100%; opacity: 1; position: absolute; top: 50%; left: 50% !important; transform: translate(-50%, -50%) !important; right: 0 !important;}
.txt-control .txt-paging .swiper-pagination-bullet {width: 15px; height: 15px; border-radius: 50%; border: 1px solid #0157D6; background: #f4f4f4; margin-left: auto !important; margin-right: auto !important; transition: all .2s linear; opacity: 1;}
.txt-control .txt-paging .swiper-pagination-bullet ~ .swiper-pagination-bullet {margin: 18px auto 0;}
.txt-control .txt-paging .swiper-pagination-bullet-active {width: 21px; height: 21px; background: #0157D6;}

.sec3 {padding: 145px 0 200px; background: url(../images/main/bg_sec3.jpg) 50% 50% no-repeat; background-size: cover; overflow: hidden;}
.sec3 .section-header p {color: #222;}
.sec3 .certi-box {margin-top: 105px; width: 100%; white-space: nowrap;}
.sec3 .certi-box .certi {display: flex; animation: scroll-left 40s linear infinite; width: max-content;}
.sec3 .certi-box .certi figure {box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25); display: inline-block; margin: 0 26px; max-width: 266px; width: 100%; white-space:nowrap;}
.sec3 .certi-box .certi figure img {display: block; max-width: 100%; margin: 0 auto;}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.sec4 {padding: 136px 0 164px; position: relative;}
.sec4::before {position: absolute; content: ''; width: 100%; height: 701px; background: url(../images/main/bg_sec4.jpg) 50% 50% no-repeat; background-size: cover; bottom: 0; left: 0; z-index: -1;}
.sec4::after {position: absolute; content: ''; top: 46px; right: 13px; width: 1187px; height: 95px; background: url(../images/main/img_txt.png) 50% 50% no-repeat; background-size: auto;}
.sec4 h5 {margin-top: 35px; display: flex; align-items: center; gap: 8px; font-size: 18px; color: #222; font-weight: 500; line-height: 1.79; letter-spacing: -.36px;}
.sec4 h5 img {display: block; max-width: 100%;}
.sec4 .container > .map {width: 100%; height: 498px; border-radius: 20px; overflow: hidden; box-shadow:  0 6px 4px 0 rgba(0, 0, 0, 0.25); margin-top: 35px;}
.root_daum_roughmap {width: 100% !important; height: 100% !important;} 
.root_daum_roughmap .wrap_map {height: 100% !important;}

.banner {margin-top: 108px; display: flex; gap: 24px; align-items: center;}
.banner .contact {width: 1%; flex: 1 1 auto; background: url(../images/main/bg_contact.jpg) 50% 50% no-repeat; background-size: cover; border-radius: 10px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);}
.banner .contact a {position: relative; display: flex; align-items: center; justify-content: space-between; gap: 100px; width: 100%; padding: 55px 85px 72px 76px;}
.banner .contact a > span {position: absolute; width: 28px; height: 23px; top:  12px; right: 19px; display: block;}
.banner .contact a img {display: block; max-width: 100%;}
.banner .contact a dl {width: 1%; flex: 1 1 auto;}
.banner .contact a dl dt {font-size: 34px; font-family: 'Poppins'; font-weight: 600; line-height: normal; letter-spacing: -.68px; color: #fff;}
.banner .contact a dl dd {margin-top: 17px; font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: -.32px; color: #fff;}
.banner .contact a figure {max-width: 123px; width: 100%; transition: all .3s linear;}
.banner .contact a:hover figure {transform: translateY(-10px);}
.banner .board-box {max-width: 588px; width: 100%;}
.banner .board-box a {position: relative; display: flex; gap: 58px; align-items: center; border-radius: 10px; background: rgba(255, 255, 255, 0.40); box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); padding: 26px 63px 26px 46px; min-height: 120px;}
.banner .board-box a ~ a {margin-top: 7px;}
.banner .board-box a > span {position: absolute; width: 28px; height: 23px; top:  13px; right:16px; display: block;}
.banner .board-box a dl {width: 1%; flex: 1 1 auto;}
.banner .board-box a dl dt {font-size: 24px; color: #fff; font-weight: 600; line-height: 1.34; letter-spacing: -.48px;}
.banner .board-box a dl dd {margin-top: 10px; font-size: 16px; color: #fff; font-weight: 600; line-height: 1.5; letter-spacing: -.32px;}
.banner .board-box a figure {max-width: 62px; width: 100%; transition: all .3s linear;}
.banner .board-box a figure img {max-width: 100%; display: block;}
.banner .board-box a:hover figure {transform: translateY(-10px);}