.main-visual .video{width:100%; height:100vh;display:block;position: relative;}
.main-visual .video + .inner {z-index: 2;}
.main-visual .video::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
}
.main-visual .video video{width:100%; height:100%; object-fit:cover;}
.main-visual .background{width:100%; height:100vh; transform: scale(1.2); transition: transform 5s cubic-bezier(0.35, 0.72, 0.49, 1);}
.main-visual .swiper-slide .inner{position:absolute; top:50%; transform: translateY(-50%); left:0; right:0;}
.main-visual .visual-txt{color:#fff;}
.main-visual .visual-txt p{font-size:24px; font-weight: 600; margin-bottom:30px; animation-duration: 1s; animation-delay: .3s; opacity: 0; animation-fill-mode: forwards;}
.main-visual .visual-txt h2{font-size:72px; line-height: 1.2; margin-bottom: 40px; animation-duration: 1s; animation-delay: .3s; opacity: 0; animation-fill-mode: forwards;}
.main-visual .visual-txt span{font-size:20px; animation-duration: 1s; animation-delay: .6s; opacity: 0; animation-fill-mode: forwards;}
.main-visual .swiper-slide-active .visual-txt p{animation-name:titSlide01}
.main-visual .swiper-slide-active .visual-txt h2{animation-name:titSlide01}
.main-visual .swiper-slide-active .visual-txt span{animation-name:titSlide02}
.main-visual .swiper-slide-active .background{transform: scale(1);}

.main-visual .controls{position: absolute; left:0; right:0; bottom:18%; z-index: 2;}
.main-visual .controls .flex-box{display: flex; align-items: center; column-gap: 8px;}
.main-visual .swiper-pagination{width:auto; position: static; text-align: left; color:#fff; font-size:14px; font-weight: 500;}
.main-visual .swiper-pagination span{margin:0 3px;}
.main-visual .controls .toggle{display: block; position: relative; margin-right: 30px; width: 40px; height: 40px; background-color: transparent;}
.main-visual .controls .toggle::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 16px; height: 16px; background: url(/images/main-start.png) no-repeat center / auto 10px; pointer-events: none;}
.main-visual .controls .toggle[data-state="pause"]::before{background: url(/images/main-stop.png) no-repeat center / auto 10px;;}
.main-visual .section-main--visual .control .toggle[data-state="pause"]::before {background-image: url(/images/main-stop.png);}
.main-visual .scroll_iconAnimation { position: absolute; left: 0; right: 0; bottom: 50px; z-index: 10; text-align: center; color:#fff; font-weight: 200; font-size:14px;}
.main-visual .swiper-bar{display: flex; column-gap: 5px;}
.main-visual .swiper-bar .bar{width:90px; height:6px; background-color: rgb(255,255,255, .5); transition: all ease .35s; position: relative;}
.main-visual .swiper-bar .bar::after{content:''; width:0%; height: 100%; background-color: #fff; position: absolute; top:0; left:0;}
.main-visual .swiper-bar .bar.on{width: 180px;}
.main-visual .swiper-bar .bar.on::after{width: 100%; transition: all ease 11s;}
/* .main-visual .swiper-bar .bar.on::after{width: 100%; transition: all ease 2s;} */

.main-solution{padding:180px 0;}
.main-solution .title-wrap{text-align: center; margin-bottom: 100px;}
.main-solution .title-wrap h2{font-size:60px;}
.main-solution .title-wrap p{font-size:20px; margin-top: 10px;}
.main-solution .rolling{display:flex;}
/* .main-solution .rolling-wrapper{  position: relative; width: 100vw; max-width: 100%;} */
/* .main-solution .rolling { position: absolute; white-space: nowrap; will-change: transform; animation: marquee 35s linear infinite;} */
.main-solution .rolling li{text-align: center; width:160px; margin:0 20px;}
.main-solution .rolling li p{margin-top: 20px;}
.main-solution .js-marquee-wrapper{display: flex;}
.main-solution .js-marquee{display: flex;}
/* @keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
} */

.main-business{position: relative;width:100%; height:500vh; z-index:1;background-color:#fff ; position: relative;}
.main-business .sticky{position: sticky;top: 0;left: 0;width: 100%;height: 100vh;}
.main-business .swiper{height: 100%;}
.main-business .flex-box{height: 100%; display: flex; align-items: center; flex-wrap: wrap;}
.main-business .flex-box.reverse{flex-direction: row-reverse;}
/* .main-business .flex-box.on{opacity: 1;} */
.main-business .flex-box .left{width:50%; height: 100%; padding-left:11%; padding-right:6%; display: flex; flex-direction: column; justify-content: center; position: relative;}
/* .main-business .flex-box .left::after{display: block; position: absolute; top: -1px; left: 0px; width: 100%; height: 100%; content: ""; background-color: #fff; transform: translate3d(0, 0, 0) rotate(0.0001deg); transition: all 1.5s cubic-bezier(0.23, 1, 0.38, 1) .2s; z-index: 999;} */
.main-business .flex-box .right{position: relative;width:50%; height: 100%; padding-bottom: 49%;}
/* .main-business .flex-box .right img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}  
.main-business .flex-box .right iframe{position: absolute; top:0; left:0; width:100%; height: 100%;}*/

.youtube-wr { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.youtube {
	background-color: #000; 
	overflow: hidden;
	cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.youtube img {
	width: 100%;
	top: 0;
	left: 0;
	opacity: 0.7;
	width:100%; 
	height:100%;
	object-fit:cover;
}
.youtube .play-button {
	width: 70px;
	height: 70px;
	background-color: rgb(18 58 142 / 70%); 
	z-index: 1; 
	border-radius: 70px;
}
.youtube .play-button:before {
	content: "";
	border-style: solid;
	border-width: 10px 0 10px 15px;
	border-color: transparent transparent transparent #fff;
	margin-left:2px;
}
.youtube img,
.youtube .play-button {
	cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
	position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
	top: 50%;
	left: 50%;
	transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}

.main-business .title-wrap{ animation-duration: 1s; animation-delay: .3s; opacity: 0; animation-fill-mode: forwards;}
.main-business .title-wrap h2{font-size:48px; padding-bottom:30px; border-bottom:1px solid #D9D9D9; margin-bottom:40px}
.main-business .title-wrap h2 em{font-size:24px; color:#123A8E; display: block;}
.main-business .txt-wrap{margin-bottom: 60px;}
.main-business .txt-wrap p{font-size:20px; color:#333; margin-bottom: 30px;}
.main-business .txt-wrap ul li{position: relative; font-size:16px; color:#555; padding-left: 14px; font-weight:300;}
.main-business .txt-wrap ul li::after{content: ''; width:4px; height:4px; border-radius: 50%; background-color: #555; position: absolute; top:9px; left:0;}
.main-business .view-more{animation-duration: 1s; animation-delay: .6s; opacity: 0; animation-fill-mode: forwards;}
.main-business .view-more a{position: relative; width:225px; height:55px; display: block; line-height: 55px; border-radius: 30px; padding-left: 30px; border:1px solid #E7E7E7; font-weight: 600; color:#111;}
.main-business .view-more .btn{width:55px; height:55px; background-color:rgb(18, 58, 142, .1); position: absolute; right:0; top:0; border-radius: 50%;}
.main-business .view-more .btn .btn-inner{width:44px; height:44px; border-radius: 50%; position: absolute; top:0; left:0; right:-1px; bottom:0; margin:auto; background: url(/images/view-more.png) no-repeat center / 14px; background-color: #123A8E;}
.main-business .img-box{margin:-100px 0 0px;}
.main-business .tab-wrap {width:100%; display: flex; column-gap: 20px; margin-top: 30px;}
.main-business .tab-wrap .tab{font-size:14px; color:#ccc; padding:0 40px 5px 0; font-weight: 300; border-bottom:1px solid #ccc;}
.main-business .tab-wrap .tab.on{color:#123A8E;}
.main-business .swiper-slide{height:100vh}
.main-business .swiper-pagination{width:auto; position: absolute; bottom:10%; left:11%; z-index:-1;}
.main-business .swiper-pagination span{width:auto; height: auto; background-color: transparent; font-size:14px; color:#333; padding:0 40px 5px 0; margin:0; margin-right: 20px !important; border-radius: 0; font-weight: 500; border-bottom:1px solid #123A8E;}
.main-business .swiper-pagination .swiper-pagination-bullet-active{color:#123A8E}
.main-business .swiper-pagination.reverse{right:7%; left:auto;}
.main-business .swiper-slide-active .title-wrap{animation-name:titSlide01}
.main-business .swiper-slide-active .view-more{animation-name:titSlide02}
#sec1{position: absolute;top: 0%;left: 0;margin-top:10px;}
#sec2{position: absolute;top: 25%;left: 0;margin-top:10px;}
#sec3{position: absolute;top: 50%;left: 0;margin-top:10px;}
#sec4{position: absolute;top: 75%;left: 0;margin-top:10px;}

@keyframes titSlide01{
    from{
        transform:translateY(30px);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}
@keyframes titSlide02{
    from{
        transform:translateY(30px);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}
.main-news{padding:370px 0 220px; background-color: #F9FBFC;}
.main-news .inner{position: relative;}
.main-news .inner::after{content:'News&Exhibition'; font-size:128px; color:#EAEDF2; font-weight: 700; position: absolute; top:-230px; right:0;}
.main-news .tab-wrap{position:absolute; left:0; top:0; z-index: 2;}
.main-news .tab-wrap .tab{background-color: #fff; color:#111; font-weight: 600; border:1px solid #E7E7E7; padding:11px 39px; border-radius: 30px; text-align: center; margin-bottom: 16px; cursor: pointer;}
.main-news .tab-wrap .tab.on{background-color:#123A8E; color:#fff;}
.main-news .news-container{display: none;}
.main-news .news-container.on{display: block;}
.main-news .flex-box{display: flex; flex-wrap:wrap; padding-left:256px;}
.main-news .flex-box .left{width:67%; padding-right:100px;}
.main-news .flex-box .left .view-more2 a{font-size:16px; font-weight: 600; position: relative; display: inline-flex; align-items: center; column-gap: 12px; margin:40px 0 0;}
.main-news .flex-box .left .view-more2 a::after{content:''; width:8px; height: 12px; background: url(/images/view-more2.png) no-repeat center / auto 100%; display: block;}
.main-news .left ul li{position: relative; padding:30px 0; border-bottom:1px solid #E7E7E7; padding-right: 70px;}
.main-news .left ul li .date{font-size:16px; color:#555; font-weight: 700; margin-bottom:10px;}
.main-news .left ul li h2{font-size:20px; margin-bottom: 20px;}
.main-news .left ul li p{font-size:14px; display: none; font-weight:300;}
.main-news .left ul li .view-more{width:30px; height:19px; background: url(/images/news-arrow.png) no-repeat center / auto 100%; position: absolute; right:20px; top:68px;   transition: 1s;}
.main-news .left ul li:hover .view-more{content: url(/images/news-arrow2.png);}
.main-news .flex-box .right{width:33%;}
.main-news .flex-box .right .img-box{position: relative; z-index: 2;}
.main-news .inner::before{content: ''; width:22.7vw; height:25vw; background-color: #EAEDF2; position: absolute; top:130px; left: 84%;}
.main-news .flex-box .right .img-box img{position: absolute; top:0; left:0; opacity: 0; visibility: hidden; transition: all ease .3s;}
.main-news .flex-box .right .img-box img.on{opacity: 1; visibility: visible;}

.main-contact .background{position: relative; width:100%; background: url(/images/contact-bg.png); padding:180px 0;}
.main-contact .title-wrap{text-align: center; color:#fff;}
.main-contact .title-wrap h2{font-size:60px; line-height:1.2;}
.main-contact .title-wrap p{font-size:20px; font-weight: 300; margin-top: 20px;}
.main-contact .view-more{text-align: center; margin:60px 0 0;}
.main-contact .view-more a{position: relative; color:#fff; padding: 18px 30px; border-radius: 30px; border:1px solid #fff; display: inline-flex; align-items: center; column-gap: 86px;}
.main-contact .view-more a::after{content: ''; width:14px; height:10px; background: url(/images/contact-arrow.png) no-repeat center / auto 100%; display: block;}

@media screen and (max-width: 1024px) {
    .main-visual .visual-txt p{font-size:20px;}
    .main-visual .visual-txt h2{font-size:44px;}
    .main-visual .visual-txt span{font-size:18px;}

    .main-solution{padding:100px 0;}
    .main-solution .title-wrap h2{font-size:32px;}

    .main-news{padding:150px 0 100px;}
    .main-news .tab-wrap{position: unset; display: flex; justify-content: space-between;}
    .main-news .tab-wrap .tab{width: 49%;}
    .main-news .flex-box{padding-left:0;}
    .main-news .flex-box .left{padding-left:0px; padding-right: 20px;}

    .main-contact .title-wrap h2{font-size:44px;}
    .main-contact .title-wrap p{font-size: 18px;}

	
	.main-business .flex-box .left{ padding: 0 5%;}
	.main-business .swiper-pagination{left:5%; bottom:20px; display:none;}
	.main-business .swiper-pagination span{padding-right: 20px;}
	.main-business .txt-wrap{margin-bottom: 30px;}
    
}

@media screen and (max-width: 768px) {
    .main-visual .visual-txt p{font-size:18px; }
    .main-visual .visual-txt h2{font-size:36px; }
    .main-visual .visual-txt h2 br{display:none;}
    .main-visual .visual-txt span{font-size:16px;}
	.main-visual .swiper-bar .bar{height:2px;}
	
	.main-business{padding-bottom:80px;}
	.main-business .swiper-slide{height:auto;}
    .main-business .swiper-pagination{top:0; bottom:auto; left:0; right: 0; display: flex;  justify-content: center; text-align:left;} 
	.main-business .swiper-pagination{z-index:1; width:100%; padding:0 5%;}
	.main-business .swiper-pagination span{margin-right:0 !important; margin-left:0 !important; padding-bottom:10px; padding: 10px 0;}
	.main-business .swiper-pagination span em{ line-height:1.3;}
	.main-business .swiper-pagination span + span{margin-left:15px !important;}
	.main-business .img-box{display:none;}
	.main-business .title-wrap{padding-top: 50px;}
	.main-business .swiper-pagination .swiper-pagination-bullet-active{color: #fff;  padding: 10px 15px;
    background: #123A8E;  
    border-radius: 5px;}


    .main-solution{padding:80px 0;} 
	.main-solution .title-wrap{margin-bottom: 50px;}
    .main-solution .title-wrap p{font-size: 16px;}
    .main-solution .rolling li{    width: 100px;} 
	.main-solution .rolling li p{font-size: 14px; margin-top: 10px;}
	.main-solution .rolling li img{max-width:36px;}
    
    .main-news{padding:80px 0;}
    .main-news .flex-box .right{display: none;}
    .main-news .inner::after{display: none;}
    .main-news .inner::before{display: none;}
    .main-news .flex-box .left{width:100%; padding-right:0; display: flex; flex-direction: column-reverse;}
    .main-news .flex-box .left .view-more2{text-align: right;}
    .main-news .flex-box .left .view-more2 a{margin:20px 0 0;}

    .main-news .left ul li p{display: block;}
    .main-news .left ul li h2{margin-bottom:10px;}
    .main-news .left ul li .view-more{content: url(/images/news-arrow2.png); right:0;}

    .main-contact .background{padding:80px 15px;}
    .main-contact .title-wrap h2{font-size: 28px;}
    .main-contact .title-wrap p{font-size:16px;}
    .main-contact .view-more{margin:30px 0 0;}
    .main-contact .view-more a{padding:12px 20px; column-gap: 20px; }

    .main-business { height: auto; }
    .main-business .sticky{height: auto;}
    .main-business .flex-box{flex-direction: column-reverse !important; padding-top:21%;}
    .main-business .flex-box .left{width: 100%;}
    .main-business .flex-box .right{width:100%;}
    .main-business .title-wrap h2{ font-size:28px; padding-bottom: 20px; margin-bottom: 20px;}
    .main-business .title-wrap h2 em{font-size:18px;}
    .main-business .txt-wrap{margin-bottom: 20px;}
    .main-business .txt-wrap p{ font-size:17px; margin-bottom: 15px;}
    .main-business .txt-wrap ul li{ margin-bottom: 10px;}
    .main-business .txt-wrap ul li::after{}
    .main-business .flex-box .left{padding:5%; padding-top:0px;}
    .main-business .flex-box .right{display:; height: 56vw;}
    .main-business .flex-box .right img{} 
}