@charset "utf-8";

.main-visual {position: relative; margin-top: 110px;}
.main-visual .container {max-width: 1750px;}
.main-visual .item {height: calc(100vh - 110px);}
.main-visual .img-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; transform: scale(1.12); z-index: -1;}
.main-visual .slick-active .img-box {transform: scale(1); transition: all 3s;}
.main-visual .text-box {display: flex; justify-content: center; align-items: center; height: 100%; max-width: 1470px; width: 100%; padding: 0 15px 135px; margin: 0 auto;}
.main-visual .text-box h2 {font-size: 90px; font-weight: 700; line-height: 1.22em; letter-spacing : -2.7px; color: #fff; text-align: center;}
.main-visual .slick-active .text-box h2 {animation: text-up 1.4s both 0.3s;}
.main-visual .controler-wrap {position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); width: 100%; padding: 0 15px;}
.main-visual .slick-dots {display: flex; justify-content: center; gap: 20px;}
.main-visual .slick-dots button {position: relative; width: 150px; font-size: 18px; line-height: 1em; color: #fff; padding: 18px 10px; text-align: left; background: transparent; border: 0;}
.main-visual .slick-dots button:before {position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 3px; background: rgba(255,255,255,0.2);}
.main-visual .slick-dots button:after {position: absolute; bottom: 0; left: 0; content: ''; width: 0; height: 3px; background: #fff;}
.main-visual .slick-dots .slick-active button:after {width: 100%; transition: all 4s;}
.btn-scroll-down {position: absolute; bottom: 80px; right: 100px; display: inline-block; font-family: "Poppins", sans-serif; font-size: 14px; line-height: 34px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); border-radius: 18px; color: #fff; padding: 0 35px 0 20px; transition: all 0.5s;}
.btn-scroll-down:hover {background: rgba(255,255,255,0.2);}
.btn-scroll-down:after {position: absolute; top: 50%; right: 14px; margin-top: -6px; content: ''; width: 10px; height: 12px; background: url('../img/main/btn_scroll_down.png') center top; transition: all 0.4s;}
.btn-scroll-down:hover:after {background-position: center bottom -12px;}
@keyframes text-up {
    0% {
        filter: blur(10px);
		transform: scale(1.2);
        opacity: 0;
    }

    100% {
        filter: blur(0);
        opacity: 1;
		transform: scale(1);
    }
}

.section-title {position: relative;}
.section-title h3 {display: inline-block; font-family: "Poppins", sans-serif; font-size: 74px; font-weight: 700; line-height: 1.1em; letter-spacing: -0.6px; color: #fff;}
.section-title span {display: inline-block; width: 10px; height: 10px; background: #3abbda; margin-left: 14px;}
.section-title p {font-family: "Poppins", sans-serif; font-size: 24px; font-weight: 500; line-height: 1.2em; color: #fff;}

.m-section01 {position: relative; background: #07143a; overflow: hidden;}
.m-section01:before {position: absolute; bottom: 0; left: 0; width: 50%; height: 135px; content: ''; background: url('../img/main/section01_deco_text.png') no-repeat right bottom/contain;}
#main .m-section01 .container {max-width: 1630px;}
.m-section01 .wrap {width: 50%;}
.m-section01 .section-title {margin-bottom: 56px; padding-left: 80px;}
.m-section01 .text-box {padding: 145px 0 270px;}
.m-section01 .text-box li:not(:last-child) {margin-bottom: 24px;}
.m-section01 .text-box a {position: relative; display: flex; justify-content: space-between; align-items: center; width: calc(100% + 40px); padding: 20px 0 22px 80px; z-index: 10; overflow: hidden;}
.m-section01 .text-box a:before {opacity: 0; position: absolute; top: 0; left: 0; content: ''; width: calc(100% - 20px); height: 100%; background: #3abbda; border-radius: 20px; z-index: 5; transition: all 0.5s; overflow: hidden;}
.m-section01 .text-box a:hover:before {opacity: 1; left: 20px;}
.m-section01 .text-box .active a:before {opacity: 1; left: 20px;}
.m-section01 .text-box .text {position: relative; z-index: 20; width: 1%; flex: 1 1 auto;}
.m-section01 .text-box h4 {font-family: "Poppins", sans-serif; font-size: 36px; font-weight: 600; line-height: 1.1em; color: #fff; margin-bottom: 20px;}
.m-section01 .text-box .details-wrap {display: flex; flex-wrap: wrap; margin: 0 -8px;}
.m-section01 .text-box p {position: relative; padding: 0 8px; font-size: 18px; line-height: 1.55em; color: rgba(255,255,255,0.6);}
.m-section01 .text-box p:after {position: absolute; top: 50%; right: 0; margin-top: -8px; content: ''; width: 1px; height: 16px; background: rgba(255,255,255,0.6);}
.m-section01 .text-box p:last-child:after {display: none;}
.m-section01 .text-box .btn {opacity: 0; position: relative; max-width: 165px; width: 100%; height: 168px; background: url('../img/main/btn_more_white.png') no-repeat center center; z-index: 20; margin-right: -18px;}
.m-section01 .text-box .btn:before {opacity: 0; position: absolute; top: 0; left: 0; content: ''; display: block; width: 165px; height: 168px; background: url('../img/main/section01_btn_bg.png') no-repeat center center; animation: spin 5s linear infinite; overflow: hidden;}
.m-section01 .text-box .active .btn {opacity: 1; transition: all 0.5s 0.3s;}
.m-section01 .text-box a:hover .btn {opacity: 1; transition: all 0.5s 0.3s;}
.m-section01 .text-box .active .btn:before {opacity: 1; transition: all 0.5s 0.3s;}
.m-section01 .text-box a:hover .btn:before {opacity: 1; transition: all 0.5s 0.3s;}
.m-section01 .img-box {position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: 1;}
.m-section01 .img-box ul {height: 100%;}
.m-section01 .img-box li {opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: 1; transition: all 0.5s;}
.m-section01 .img-box li:nth-child(1) {background-image: url('../img/main/section01_img01.jpg');}
.m-section01 .img-box li:nth-child(2) {background-image: url('../img/main/section01_img02.jpg');}
.m-section01 .img-box li.active {opacity: 1; z-index: 5;}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.m-section02 {position: relative; height: 100vh; overflow: hidden;}
.m-section02 .text-box {height: 100%;}
.m-section02 ul {display: flex; height: 100%;}
.m-section02 ul li {flex: 1;}
.m-section02 ul li a {position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; padding-bottom: 33px; transition: all 0.5s;}
.m-section02 ul li a:hover {backdrop-filter:blur(10px);}
.m-section02 ul li a:before {position: absolute; top: 0; right: 0; content: ''; width: 1px; height: 100%; background: rgba(255,255,255,0.2);}
.m-section02 ul li:last-child a:before {display: none;}
.m-section02 ul li a:after {opacity: 0; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 0; background: linear-gradient(180deg,rgba(31, 162, 166, 1) 0%, rgba(81, 185, 206, 1) 20%, rgba(40, 101, 150, 1) 80%, rgba(27, 75, 133, 1) 100%); transition: all 0.6s; z-index: 5;}
.m-section02 ul li a:hover:after {opacity: 0.8; height: 100%;}
.m-section02 ul li .wrap {position: relative; z-index: 10; transition: all 0.8s;}
.m-section02 ul li a:hover .wrap {transform: translateY(-255px);}
.m-section02 ul li .icon {margin-bottom: 30px;}
.m-section02 ul li h4 {font-family: "Poppins", sans-serif; font-size: 45px; font-weight: 600; line-height: 1.1em; color: #fff; margin-bottom: 50px;}
.m-section02 ul li .btn {opacity: 0; display: inline-block; width: 60px; height: 60px; background: url('../img/main/btn_more_blue.png') no-repeat center center; margin: 0 auto;}
.m-section02 ul li a:hover .btn {opacity: 1; transform: rotate(270deg); transition: all 0.5s 0.5s;}
.m-section02 .backdrop {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../img/main/section02_bg01.jpg') no-repeat center center/cover; z-index: -1; transition: background-image 0.4s ease, opacity 0.4s ease;}

.m-section03 {background: url('../img/main/section03_bg.jpg') no-repeat center center/cover;}
.m-section03-tech {padding: 350px 0;}
.m-section03-tech .text-box {text-align: center;}
.m-section03-tech .section-title h3 {margin-bottom: 40px;}
.m-section03-tech .section-title p {margin-bottom: 54px;}
.btn-view-more {position: relative; display: inline-block; width: 180px; font-family: "Poppins", sans-serif; font-size: 18px; line-height: 56px;  border: 2px solid #fff; border-radius: 30px; color: #fff; text-align: left; padding: 0 30px; transition: all 0.5s;}
.btn-view-more:after {position: absolute; top: 50%; right: 27px; margin-top: -5px; content: ''; width: 11px; height: 11px; background: url('../img/main/btn_more.png') no-repeat center center; transition: all 0.5s;}
.btn-view-more:hover:after {transform: rotate(270deg);}
.btn-view-more:hover {background: #3abbda; border: 2px solid #3abbda;}

.m-section03-support {padding-bottom: 300px;}
.m-section03-support .wrap {position: relative; display: flex; align-items: flex-start; gap: 170px;}
.m-section03-support .text-box {position: sticky; top: 200px; max-width: 410px; width: 100%;}
.m-section03-support .section-title {margin-bottom: 65px;}
.m-section03-support .tab-menu-wrap {margin-bottom: 80px;}
.m-section03-support .tab-menu-wrap li:not(:last-child) {margin-bottom: 10px;}
.m-section03-support .tab-menu-wrap a {position: relative; display: flex; justify-content: space-between; align-items: center; width: 210px; line-height: 60px; padding: 0 28px 0 40px; /* border: 2px solid rgba(255,255,255,0.2);  */ border-radius: 30px; font-family: "Poppins", sans-serif; font-size: 20px; color: #fff; transition: all 0.5s; overflow: hidden;}
.m-section03-support .tab-menu-wrap a:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid rgba(255,255,255,0.2); border-radius: 30px;}
.m-section03-support .tab-menu-wrap a:after {opacity: 0; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: -moz-linear-gradient( -2deg, rgb(6,177,147) 0%, rgb(32,182,183) 34%, rgb(58,187,218) 100%); background-image: -webkit-linear-gradient( -2deg, rgb(6,177,147) 0%, rgb(32,182,183) 34%, rgb(58,187,218) 100%); background-image: -ms-linear-gradient( -2deg, rgb(6,177,147) 0%, rgb(32,182,183) 34%, rgb(58,187,218) 100%); transition: all 0.5s;}
.m-section03-support .tab-menu-wrap a.active:after {opacity: 1;}
.m-section03-support .tab-menu-wrap a span,
.m-section03-support .tab-menu-wrap a img {position: relative; z-index: 5;}

.m-section03-support .tab-cont-wrap {width: 1%; flex: 1 1 auto; margin-top: 14px;}
.m-section03-support .tab-cont > ul {display: flex; flex-wrap: wrap; gap: 60px;}
.m-section03-support .tab-cont > ul > li {width: calc(50% - 30px);}
.m-section03-support .tab-cont > ul > li:nth-child(odd) {transform: translateY(135px);}
.m-section03-support .tab-cont a {position: relative; background: #112851; padding: 55px 50px 64px 50px; border-radius: 20px; transition: all 0.5s;}
.m-section03-support .tab-cont a:hover {background: #36afce; box-shadow: 10px 10px 100px 40px rgba(54,174,205,0.25);}
.m-section03-support .tab-cont .title {padding-bottom: 32px; margin-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,0.2);}
.m-section03-support .tab-cont .title h4 {font-size: 28px; font-weight: 600; line-height: 1.42em; letter-spacing: -0.3px; color: #fff; height:calc(1.42em * 1 * 2); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;} 
.m-section03-support .tab-cont .details {font-size: 20px; line-height: 1.5em; letter-spacing: -0.7px; color: rgba(255,255,255,0.6); height:calc(1.5em * 1 * 6); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical;}
.m-section03-support .tab-cont .date {font-size: 18px; line-height: 1.5em; color: rgba(255,255,255,0.6); margin-top: 48px;}
.m-section03-support .tab-cont .icon {opacity: 0; position: absolute; bottom: 40px; right: 40px;}
.m-section03-support .tab-cont a:hover .icon {opacity: 1; transform: rotate(270deg); transition: all 0.5s 0.2s;}

.m-section04 {height: 562px; background: url('../img/main/section04_bg.jpg') no-repeat center center/cover; overflow: hidden;}
.m-section04 .wrap {display: flex; justify-content: space-between; align-items: center; height: 100%;}
.m-section04 .circle-box {position: relative; max-width: 241px; width: 100%; height: 241px; }
.m-section04 .circle-box a {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.m-section04 .circle-box a:hover {animation: circleHover 0.7s both;}
.m-section04 .circle-box a:before {position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background: url('../img/main/section04_btn_more.png') no-repeat center center; animation: spin 8s linear infinite;}
.m-section04 .circle-box img {position: relative; z-index: 5;}
@keyframes circleHover {
	0% {
		transform:scale(1); 
	}
	50% {
		transform:scale(1.15); 
	}
	100% {
		transform:scale(1); 
	}
}