@charset "utf-8";

/* scrolla animate */
@keyframes text-up {
	0% {transform: translateY(-50px); opacity: 0;}
	100% {transform: translateY(0px); opacity: 1;}
}

@keyframes text-down {
	0% {transform: translateY(50px); opacity: 0;}
	100% {transform: translateY(0px); opacity: 1;}
}

@keyframes text-right {
	0% {transform: translateX(-50px); opacity: 0;}
	100% {transform: translateX(0px); opacity: 1;}
}

@keyframes text-right2 {
	0% {transform: translateX(-80px); opacity: 0;}
	100% {transform: translateX(0px); opacity: 1;}
}

@keyframes text-left {
	0% {transform: translateX(50px); opacity: 0;}
	100% {transform: translateX(0px); opacity: 1;}
}


.mo {display: none;}

/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 940px; position: relative; }
.m-visual .visual .swiper-wrapper {transition-timing-function: linear;}
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop {width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: all 2s ease .3s;}
.m-visual .visual .swiper-wrapper .slide01 .backdrop {background-image: url(../images/main/m-visual01.png);}
.m-visual .visual .swiper-wrapper .slide02 .backdrop {background-image: url(../images/main/m-visual02.png);}
.m-visual .visual .swiper-wrapper .slide03 .backdrop {background-image: url(../images/main/m-visual03.png);} 
.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 .visual-txt {position: absolute;  left: 15px; transition: all 1s linear .5s; opacity: 0;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide01 .container .visual-txt {top: 320px;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide02 .container .visual-txt {top: 200px;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide03 .container .visual-txt {top: 280px;}
.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {font-size: 56px; line-height: 1.25; color: #fff; font-weight: 500;  width: 100%; transition: all 1.2s linear .5s; font-family: 'Poppins';}
.m-visual .visual .swiper-wrapper .swiper-slide .container p {font-size: 28px; line-height: 1.45; color: #fff; font-weight: 600; width: 100%; transition: all 1.2s linear .9s; margin-top: 40px;}
.m-visual .visual .swiper-wrapper .swiper-slide-active.slide01 .container .visual-txt {top: 360px; opacity:1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active.slide02 .container .visual-txt {top: 248px; opacity:1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active.slide03 .container .visual-txt {top: 320px; opacity:1;}
/* .m-visual .visual .swiper-wrapper .swiper-slide-active .container h2 {opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {opacity: 1;} */

.controls {position: absolute; max-width: 1470px; width: 100%; padding: 0 15px; bottom: 153px; left: 50%; transform: translateX(-50%); z-index: 5;}
.controls .visual-pagination {width: 75px; display: flex; gap: 8px; align-items: center;}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 !important;}
.controls .swiper-pagination-bullet {width: 7px; height: 7px; border-radius: 50%; background-color: #fff; opacity: 1; margin: 0; transition: all .2s linear;}
.controls .swiper-pagination-bullet.swiper-pagination-bullet-active {width: 45px; height: 7px; border-radius: 5px;}

.sec2 {padding: 160px 0 328px;}
.sec2 h3 {font-size: 44px; font-weight: 200; line-height: normal; letter-spacing: -.88px; text-align: center; color: #fff;}
.sec2 .inner {margin-top: 110px; width: 100%; display: flex; align-items: center; gap: 70px;}
.sec2 .inner a {width: 100%; max-width: 640px; display: block;}
.sec2 .inner a img {max-width: 100%; display: block; margin: 0 auto;}
.sec2 .inner .txt {width: 1%; flex: 1 1 auto;}
.sec2 .inner .txt p {font-size: 24px; font-weight: 400; line-height: 1.5; letter-spacing: -.48px; color: #fff;}
.sec2 .inner .txt p ~ p {margin-top: 52px;}

.sec2 .container.animated h3 {animation:text-down 1.2s both .5s;}

.section-header h4 {font-size: 64px; font-weight: 700; line-height: normal; color: #fff; font-family: 'Poppins';}
.section-header p {font-size: 24px; font-weight: 400; line-height: 1.5; color: #fff; letter-spacing: -.48px; margin-top: 20px;}

.sec3 .inner {margin-top: 60px; width: 100%; display: flex; gap: 30px;}
.sec3 .inner .img-box {position: relative; width: 1%; flex: 1 1 auto; height: 511px; background: url() 50% 50% no-repeat; background-size: auto; display: block;}
.sec3 .inner .img-box:nth-of-type(1) {background-image: url(../images/main/img_sec301.jpg);}
.sec3 .inner .img-box:nth-of-type(2) {background-image: url(../images/main/img_sec302.jpg);}
.sec3 .inner .img-box .txt {position: absolute; bottom: 29px; left: 50%; transform: translateX(-50%); width: 100%;}
.sec3 .inner .img-box .txt h5 {font-size: 28px; font-weight: 600; line-height: 1.45; text-align: center; color: #fff; letter-spacing: -.56px;}
.sec3 .inner .img-box .txt p {font-size: 22px; font-weight: 400; line-height: 1.5; color: #fff; text-align: center; letter-spacing: -1px; margin-top: 28px; padding: 0 10px;}

.sec4 {padding-top: 260px;}
.sec4 .inner {width: 100%; margin-top: 70px; gap: 30px; display: flex; align-items: flex-start;}
.sec4 .inner .left {max-width: 580px; width: 100%;}
.sec4 .inner .left .tab {padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255, .3);}
.sec4 .inner .left .tab > a {display: block; max-width: 330px; width: 100%; border-radius: 46px; border: 1px solid #fff; height: 75px; line-height: 73px; text-align: center; font-size: 24px; color: #fff; font-weight: 600; letter-spacing: -.56px; background: transparent;}
.sec4 .inner .left .tab > a ~ a {margin-top: 27px;}
.sec4 .inner .left .tab > a.on {background:linear-gradient(to right, #00A29A 0%, #00487F 100%); border: 0;}
.sec4 .inner .left .txt {padding-top: 60px;}
.sec4 .inner .left .txt h5 {font-size: 30px; font-weight: 600; line-height: 1.36; letter-spacing: -.6px; color: #fff;}
.sec4 .inner .left .txt p {font-size: 24px; font-weight: 400; line-height: 1.5; letter-spacing: -.48px; color: #fff; margin-top: 14px; /* word-break: break-all; */}

.sec4 .inner .right {width: 1%; flex:  1 1 auto;}
.sec4 .inner .right a {width: 100%; border-radius: 0 70px 0 70px; overflow: hidden; display: block;}
.sec4 .inner .right a img {max-width: 100%; display: block; margin: 0 auto; height: 100%;}

.sec5 {padding: 260px 0 250px;}
.sec5 .section-header {text-align: center;}
.sec5 .inner {width: 100%; margin-top: 60px;}
.sec5 .inner ul {width: 100%; display: flex; gap: 30px;}
.sec5 .inner ul li {width: 25%; /* flex: 1 1 calc(25% - 15px); */ min-height: 338px;}
.sec5 .inner ul li a {display: block; width: 100%; height: 100%; padding: 29.5px 36px 20.5px 56px; background-color: rgba(255, 255, 255, 0.15); backdrop-filter: blur(2px);}
.sec5 .inner ul li a span {display: block; position: relative; width: 100%; height: 30px;}
.sec5 .inner ul li a span::after {position: absolute; top: 0; left: 0; font-size: 20px; font-weight: 700; line-height: normal; color: #0BA49C; font-family: 'Poppins';}
.sec5 .inner ul li.notice a span::after {content: 'Notice';}
.sec5 .inner ul li.news a span::after {content: 'News';}
.sec5 .inner ul li a h5 {margin-top: 22px; font-size: 24px; font-weight: 600; line-height: 1.53; letter-spacing: -.48px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space:nowrap;} 
.sec5 .inner ul li a p {font-size: 24px; font-weight: 400; line-height: 1.5; letter-spacing: -.48px; color: #fff; margin-top: 14px; display: -webkit-box; word-wrap:break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; /* word-break: break-all; */ padding-right: 20px; min-height: 108px;}
.sec5 .inner ul li a .btn {margin-top: 10px; width: 100%; display: flex; gap: 60px; align-items: center; justify-content: space-between;}
.sec5 .inner ul li a .btn small {display: block; font-size: 14px; font-weight: 700; line-height: 2.1; letter-spacing: -.28px; color: #fff; width: 1%; flex: 1 1 auto; font-family: 'Play';}
.sec5 .inner ul li a .btn i {position: relative; display: flex; max-width: 65px; width: 100%; height: 65px; border-radius: 50%; border: 1px solid rgba(255,255,255, .5); align-items: center; justify-content: center; z-index: 2;}
.sec5 .inner ul li a .btn i::before {position: absolute; content: ''; width: calc(100% + 4px); height: calc(100% + 4px); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; background: linear-gradient(to right, #00A29A 0%, #00487F 100%); border: 0; transition: all .2s linear;  z-index: 0;}
.sec5 .inner ul li a .btn i img {position: relative; max-width: 100%; display: block; margin: 0 auto; z-index: 2;}
.sec5 .inner ul li a:hover .btn i::before {opacity: 1;}