@charset "utf-8";

.mo {display: none;}

.swiper-wrapper {transition-timing-function: linear;}

/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 100dvh; position: relative; }
.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 video {width: 100%; height: 100%; object-fit: cover;}
/* .m-visual .visual .swiper-wrapper .slide01 .backdrop {background-image: url(../images/main/m-visual01.jpg);}
.m-visual .visual .swiper-wrapper .slide02 .backdrop {background-image: url(../images/main/m-visual02.jpg);}
.m-visual .visual .swiper-wrapper .slide03 .backdrop {background-image: url(../images/main/m-visual03.jpg);}
.m-visual .visual .swiper-wrapper .swiper-slide-active .backdrop {transform: scale(1.1);}  */
.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: 300px; left: 15px; font-size:60px; line-height: 1.33; color: #fff; font-weight: 300;  width: 100%; opacity: 0; transition: all 1.2s ease .3s; font-family: 'Poppins'; text-align: center; letter-spacing: -1.8px;}
.m-visual .visual .swiper-wrapper .swiper-slide .container h3 > strong {display: block; text-align: center; font-weight: 700; font-family: 'PyeojinGothic'; margin-top: 16px;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 340px; opacity: 1;}

.controls {position: absolute; width: 100%; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 5;}
.controls .visual-pagination {width: 100%;}
.controls .swiper-pagination-bullets {align-items: center; display: flex;}
.controls .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 !important;}
.controls .swiper-pagination-bullet {position: relative; width: 33.3333%; height: 8px; background-color: rgba(255, 255, 255, 0.60); opacity: 1; margin: 0; border-radius: 0;}
.controls .swiper-pagination-bullet::after {position: absolute; content: ''; width: 0%; height: 100%; top: 0; left: 0; background-color: #003592; }
.controls .swiper-pagination-bullet.swiper-pagination-bullet-active::after {animation: bar 6s ease-out forwards;}
@keyframes bar {
	0% {width: 0%;}
	100% {width: 100%;}
}

.scroll {position: absolute; z-index: 1; bottom: 79px; right: 73px; width: 12px; height: 123px; background: url(../images/main/scroll.png) 50% 50% no-repeat;background-size: auto; animation: bounce 1.3s ease infinite;}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

/* sec2 */
.sec2 .industrial {width: 100%; display: flex;}
.sec2 .industrial .txt {width: 50%; padding: 120px 105px 130px 130px;}
.sec2 .industrial .txt .tit h4 {font-family: 'Poppins'; font-size: 50px; font-weight: 600; line-height: 1.24; letter-spacing: -1.5px; color: #111;}
.sec2 .industrial .txt .tit p {font-size: 22px; color: #666; letter-spacing: -.66px; margin-top: 40px; line-height: 1.63; font-weight: 400;}
.sec2 .industrial .txt .tit p ~ p {margin-top: 35px;}
.sec2 .industrial .img {width: 50%;}
.sec2 .industrial .img img {display: block; max-width: 100%; margin: 0 auto; height: 100%;}

.sec2 .tab {margin-top: 230px; display: flex; gap: 40px;}
.sec2 .tab a {display: block; position: relative; padding: 18px 2px 14px; font-size: 24px; line-height: 1.58; font-weight: 600; color: #cfcfcf; letter-spacing: -.72px;}
.sec2 .tab a::before {position: absolute; content: ''; width: 8px; height: 8px; border-radius: 50%; background-color: #003592; top: 0; left: 4px; opacity: 0;}
.sec2 .tab a::after {position: absolute; content: ''; width: 100%; height: 2px; background-color: #cfcfcf; bottom: 0; left: 0;}
.sec2 .tab a.active {color: #333;}
.sec2 .tab a.active::before {opacity: 1;}
.sec2 .tab a.active::after {background-color: #333;}

/* sec3 */
.sec3 .item {display: block; width: 100%; height: 194px; transition: all .3s linear; background-repeat: no-repeat; background-size: auto; background-color: rgba(0, 53, 146, 0.05);}
.sec3 .item ~ .item {border-top: 1px solid #ddd;}
.sec3 .item:nth-of-type(1) {background-image: url(../images/main/ico_sec301.png); background-position: -53px 4px;}
.sec3 .item:nth-of-type(2) {background-image: url(../images/main/ico_sec302.png); background-position: -66px -22px;}
.sec3 .item:nth-of-type(3) {background-image: url(../images/main/ico_sec303.png); background-position: -51px 19px;}
.sec3 .item .container {width: 100%; height: 100%; display: flex;  align-items: center; justify-content: space-between; gap: 20px;}
.sec3 .item .txt {width: 1%; flex: 1 1 auto;}
.sec3 .item .txt h5 {font-size: 44px; font-weight: 600; color: #111; line-height: .86; letter-spacing: -1.32px; transition: all .2s linear;}
.sec3 .item .txt p {padding-top: 20px; font-size: 22px; color: #666; line-height: 1.63; letter-spacing: -.66px; font-weight: 400; transition: all .2s linear;}
.sec3 .item span {display: block; max-width: 36px; width: 100%;}
.sec3 .item span img {display: block; transition: all .2s linear;}
.sec3 .item:hover {background-color: #003592; padding: 5px 0; border-color: #003592;}
.sec3 .item:hover .txt h5 {color: #fff;}
.sec3 .item:hover .txt p {padding-top: 0; height: 0; opacity: 0;}
.sec3 .item:hover span img {filter: brightness(100);}

/* sec4 */
.sec4 {width: 100%; display: flex;}
.sec4 .item {width: 33.3333%; height: 560px; display: flex; align-items: center; justify-content: center; background:url() 50% 50% no-repeat; background-size: cover; transition: all .2s linear;}
.sec4 .item:nth-of-type(1) {background-image: url(../images/main/img_sec401.jpg);}
.sec4 .item:nth-of-type(2) {background-image: url(../images/main/img_sec402.jpg);}
.sec4 .item:nth-of-type(3) {background-image: url(../images/main/img_sec403.jpg);}
.sec4 .item:hover {background-image: url(../images/main/img_on.jpg);}
.sec4 .item .txt h5 {font-size: 54px; font-weight: 600; line-height: 1.14; letter-spacing: -1.62px; color: #fff; text-align: center;}
.sec4 .item .txt p {margin-top: 30px; font-size: 22px; color: #fff; line-height: 1.63; letter-spacing: -.66px; text-align: center;}
.sec4 .item .txt a {display: block; margin: 50px auto 0; max-width: 154px; line-height: 58px; border: 1px solid #fff; border-radius: 100px; font-size: 18px; color: #fff; font-weight: 600; letter-spacing: -.54px; padding: 0 48px 0 30px; background:url(../images/main/ico_plus_s.png) calc(100% - 24px) 50% no-repeat; background-size: auto;}