/* ==========================================================================
   Index Page
   ========================================================================== */
/*首页banner大图样式*/
.slider-container { position: relative; width: 100%; height: 100vh; overflow: hidden; cursor: pointer;}
.slider-main { position: relative; width: 100%; height: 100%; overflow: hidden;   transform: translateZ(0); backface-visibility: hidden;}
.current-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.current-image,.next-image,.split-left img,.split-right img { image-rendering: -webkit-optimize-contrast;  /* WebKit优化对比度 */ image-rendering: crisp-edges;  /* 清晰边缘 */ image-rendering: pixelated;  /* 像素化（保持清晰） */  transform: translateZ(0);  backface-visibility: hidden; -webkit-backface-visibility: hidden;}
.split-left, .split-right { position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; z-index: 3; transition: transform 0.5s ease-out; }
.split-left { left: 0; transform: translateX(0); }
.split-right { right: 0; transform: translateX(0); }
.split-left img, .split-right img { position: absolute; top: 0; width: 200%; height: 100%; object-fit: cover; }
.split-left img { left: 0; }
.split-right img { right: 0; }
.split-left.animate { transform: translateX(-100%); }
.split-right.animate { transform: translateX(100%); }
.next-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

.indicators { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 20; background: rgba(0, 0, 0, 0.15); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1);  border-radius: 16px; padding: 6px 10px; align-items: center;}
.indicator { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.3s; }
.indicator.active { background: rgb(0, 68, 254); width: 25px; border-radius: 5px; }

/* 两边的按钮变小样式 */
.indicator.side-small { 
    width: 8px; 
    height: 8px; 
    background: rgba(255,255,255,0.3);
}

/* 悬停效果 */
.indicator:hover { 
    background: rgba(255,255,255,0.8); 
    transform: scale(1.2);
}

.indicator.side-small:hover {
    width: 10px;
    height: 10px;
}

.text-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 15; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;  padding-left: 10%; }
.typewriter-line { text-align: left; color: #fff;  width: 100%; }
.text-overlay .line-text { display: inline-block; white-space: nowrap; overflow: hidden; text-align: left; font-family: inherit; }
.text-overlay .line1 { font-size: 3.2rem; letter-spacing: 3px; }
.text-overlay .line2 { font-size: 3.2rem; letter-spacing: 3px;}
.text-overlay .line3 { font-size: 4.4rem; letter-spacing: 3px; color: #0044fe;  font-family: 'AlimamaDongFangDaKai-Regular'; }

@keyframes typing11 { 0% { width: 0; } 100% { width: 4em; } }
@keyframes typing22 { 0% { width: 0; } 100% { width: 8em; } }
@keyframes typing33 { 0% { width: 0; } 100% { width: 19em; } }

.text-overlay .line1 .line-text { animation: typing11 0.3s steps(3, end) forwards; overflow: hidden; white-space: nowrap; animation-play-state: paused;}
.text-overlay .line2 .line-text { animation: typing22 0.4s steps(5, end) forwards; overflow: hidden; white-space: nowrap; width: 0; animation-delay: 0.4s; animation-fill-mode: forwards; animation-play-state: paused;}
.text-overlay .line3 .line-text { animation: typing33 1.2s steps(19, end) forwards; overflow: hidden; white-space: nowrap; width: 0; animation-delay: 1s; animation-fill-mode: forwards; animation-play-state: paused;}
.text-overlay .underline { width: 0; height: 4px; background: #0044fe; margin: 0;  animation: underlineShow 0.6s ease forwards; animation-delay: 2.4s; animation-play-state: paused;}
@keyframes underlineShow { 0% { width: 0; } 100% { width: 12rem; } }

/* 第一屏启动动画类 */
.text-overlay.start .line1 .line-text {
    animation-play-state: running;
}
.text-overlay.start .line2 .line-text {
    animation-play-state: running;
}
.text-overlay.start .line3 .line-text {
    animation-play-state: running;
}
.text-overlay.start .underline {
    animation-play-state: running;
}

.ibanner video{ width: 100vw; height: 100vh; object-fit: cover;}



.typewriter-flex{display: flex;  justify-content: space-around; align-items: baseline; align-content: flex-end; position: relative; height: 6rem;}
.typewriter-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 15; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-left: 10%; opacity: 1;  transition: opacity 0.3s ease;}
.typewriter-container .typewriter-line { text-align: left; color: #fff; width: 100%; }
.typewriter-container .line-text { display: inline-block; white-space: nowrap; overflow: hidden; text-align: left; width: 0; }
.typewriter-container .line1 { font-size: 4.4rem; letter-spacing: 3px; color: #0044fe; font-family: 'AlimamaDongFangDaKai-Regular'; position: absolute; left: 4.2em; bottom: -1rem; line-height: 1.5; }
.typewriter-container .line2 { font-size: 3.2rem; letter-spacing: 3px; line-height: 1.5;}
.typewriter-container .line3 { font-size: 4.4rem; letter-spacing: 3px; color: #0044fe; font-family: 'AlimamaDongFangDaKai-Regular';  line-height: 1.5;}
.typewriter-container .line4 { font-size: 3.2rem; letter-spacing: 3px;  position: absolute; left: 0; line-height: 1.5;}
.nn1{left: 5.6em !important;}
.nn2{left: 14em !important;}
.nn3{    left: 1.2em !important; }
.typewriter-container .line5 { font-size: 3.2rem; letter-spacing: 3px;  position: absolute; left: 12em; line-height: 1.5;}
.typewriter-container .line7 { font-size: 3.2rem; letter-spacing: 3px; line-height: 1.5;}
.typewriter-container .line8{ font-size: 3.2rem; letter-spacing: 3px; line-height: 1.5;}
.typewriter-container .underline { width: 0; height: 4px; background: #0044fe; margin: 0; margin-top: 10px; }
.typewriter-container .line6 { font-size: 3rem; letter-spacing: 3px; color: #0044fe; margin-top: 20px; }
.typewriter-container .line6 .line-text i { font-size: 3rem; }
	@keyframes typing1 {
	    0% {
	        width: 0;
	    }
	    100% {
	        width: 15em;
	    }
	}
	@keyframes typing2 {
	    0% {
	        width: 0;
	    }
	    100% {
	        width: 16em;
	    }
	}
	@keyframes typing3 {
	    0% {
	        width: 0;
	    }
	    100% {
	        width: 15em;
	    }
	}
	@keyframes typing4 {
	    0% {
	        width: 0;
	    }
	    100% {
	        width: 8em;
	    }
	}
	
	@keyframes typing5 {
	    0% {
	        width: 0;
	    }
	    100% {
	        width: 15em;
	    }
	}
	
	@keyframes typing6 {
	    0% {
	        width: 0;
	    }
	    100% {
	        width: 5em;
	    }
	}
	
	@keyframes typing7 {
	    0% {
	        width: 0;
	    }
	    100% {
	        width: 15em;
	    }
	}
	
	@keyframes underlineShow {
	    0% {
	        width: 0;
	    }
	    100% {
	        width: 12rem;
	    }
	}
/* 所有元素从一开始就固定在最终位置（可见占位），但文字宽度为0 */

.typewriter-container .line1 .line-text, .typewriter-container .line2 .line-text, .typewriter-container .line3 .line-text, .typewriter-container .line4 .line-text, .typewriter-container .line5 .line-text, .typewriter-container .line6 .line-text,.typewriter-container .line7 .line-text { width: 0; animation-play-state: paused;}

.typewriter-container.start .line1 .line-text {
    animation: typing1 0.4s steps(4, end) forwards;
    animation-play-state: running;
}
.typewriter-container.start .line2 .line-text {
    animation: typing2 0.7s steps(12, end) forwards;
    animation-delay: 0.6s;
    animation-play-state: running;
}
.typewriter-container.start .line3 .line-text {
    animation: typing3 0.3s steps(4, end) forwards;
    animation-delay: 1.4s;
    animation-play-state: running;
}

.typewriter-container.start .line8 .line-text {
    animation: typing3 0.3s steps(4, end) forwards;
    animation-delay: 1.4s;
    animation-play-state: running;
}
.typewriter-container.start .line4 .line-text {
    animation: typing4 0.35s steps(5, end) forwards;
    animation-delay: 1.9s;
    animation-play-state: running;
}
.typewriter-container.start .line5 .line-text {
    animation: typing5 0.4s steps(6, end) forwards;
    animation-delay: 2.4s;
    animation-play-state: running;
}
.typewriter-container.start .line7 .line-text {
    animation: typing7 0.4s steps(5, end) forwards;
    animation-delay: 3.0s;
    animation-play-state: running;
}
.typewriter-container.start .underline {
    animation: underlineShow 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
    animation-delay: 3.5s;
    animation-play-state: running;
}
.typewriter-container.start .line6 .line-text {
    animation: typing6 0.4s steps(5, end) forwards;
    animation-delay: 3.9s;
    animation-play-state: running;
}
/* 移除之前默认运行的动画 */
.typewriter-container .line1 .line-text,
.typewriter-container .line2 .line-text,
.typewriter-container .line3 .line-text,
.typewriter-container .line4 .line-text,
.typewriter-container .line5 .line-text,
.typewriter-container .line6 .line-text,
.typewriter-container .underline {
    animation: none;
}

.ibanner{ position:relative; height:100vh; width: 100%; overflow: hidden;}
.ibanner .swiper-container {width: 100%;height: 100%;}
.ibanner .swiper-slide { background-repeat:no-repeat; background-position:center center; background-size:cover;text-align: center;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center; position:relative; background-color: #000; transform: scale(1.1);}

.ibanner .swiper-pagination{ left: auto; right: 3%; bottom: 35%;  position: absolute; text-align: left; max-width: 50px;display: flex; justify-content: center; flex-direction: column; align-items: center;}
.ibanner .swiper-pagination:before{ width: 1px; height: 110%; background: #ffffff; opacity: 0.2; content: ""; position: absolute;}

.ibanner .swiper-pagination-bullet{ border: 1px solid #ffffff; opacity: 0.5; position: relative; width: 12px; height: 12px; border-radius: 100%; display: block; margin: 10px 0 !important; cursor: pointer; background: none; position: relative;}
.ibanner .swiper-pagination-bullet:before{ width: 4px; content: ""; height: 4px; background: #ffffff; opacity: 0.5; position: absolute; left: 0; right: 0; margin: 0 auto; top: 4px; border-radius: 100%;}
.ibanner .swiper-pagination-bullet-active{ opacity: 1; position: relative;}

.ibanner .swiper-pagination span{ font-size: 18px;color: #fff;}
.ibanner .pagination-numbers{ text-align: center; margin-top: 10rem; position: relative;}
.ibanner .pagination-numbers:before{ width: 1px; height: 8rem; content: ""; display: block; background: rgba(255,255,255,.2); position: absolute; left: 0; right: 0; margin: 1rem auto; bottom: 3rem;}
.ibanner .swiper-pagination-current{ font-size: 2.8rem !important;}
.ibanner .swiper-slide:last-child{ height: auto;}
.ibanner .swiper-slide{ height: 100vh;}

::-webkit-scrollbar{ display: none;}

a.more1{  max-width: 210px; width: 100%; display: flex; justify-content: center; align-items: center;  font-size: 16px; color: #565656;  text-align: center; border-radius: 10px;  background: #ececec; height: 52px; line-height: 52px; transition: all 0.3s; margin-left: auto;}
a.more1 i{ margin-left: 15px;}
a.more1:hover{ background: #0044fe; color: #ffffff;}

a.more3{  max-width: 140px; width: 100%;  font-size: 16px; color: #ffffff;  text-align: center; margin-left: auto; margin-top: 30px;  border-radius: 5px; display: block;  background: #0FB2E8; height: 44px; line-height: 44px; transition: all 0.3s;}
a.more3:hover{ background: #1255B0;}


/*关于我们*/
.sect_k1{ padding:10rem 0 4rem; background: #ffffff;}
.tit_i2{ text-align: left;  position: relative;}
.tit_i2 span{ font-size: 4rem; line-height: 1; color: #181818; font-weight: bold;}
.tit_i2 p{  color:#888888;  line-height: 2; font-size: 18px; margin: 2rem 0 0;}

.sect_k2{ position: relative;}
.sect_k2 .wrap{ position: relative;}
.tit_i1{ text-align: left;  position: relative; font-size: 4.2rem; color: #ffffff; }

.sect_k2 .swiper-container:before{ width: 120%; height: 0px; content: ""; display: block; background: rgba(255,255,255,0.4); left: 0; right: 0; margin:0 auto; position: absolute; bottom: 16%; z-index: 5;}
.dropdown{ position: absolute; max-width: 270px; margin-left: auto; border: 1px solid rgba(255, 255, 255, 1); border-radius: 30px; right: 2rem;  top: 1rem;background: transparent;  display: inline-block; transition: border-color 0.25s ease, box-shadow 0.2s; }
.dropdown:hover {box-shadow: 0 8px 20px rgba(0, 68, 254, 0.2); background: #ffffff; color: #000000;}    
.dropdown:hover .dropdown-label i{ color: #000000;}
.dropdown:hover .dropdown-label span{ color: #000000;}
.dropdown-label { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 1.9rem; color: #000000; padding: 10px 24px; cursor: default; background: transparent; transition: all 0.2s; letter-spacing: 0.5px; white-space: nowrap; }
.dropdown-label span { display: inline-block; color: #ffffff; }
.dropdown-label i { transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1); color: #ffffff; font-style: normal; display: inline-block; }
.dropdown:hover .dropdown-label i { transform: rotate(90deg); }
.dropdown-label i{ color: #ffffff; }
.tabs { position: relative; left: auto; right: auto; border-radius: 0 0 28px 28px; margin-top: 0; margin-bottom: 0; overflow: hidden; max-height: 0; opacity: 0; visibility: hidden; transition: max-height 0.4s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.25s ease, visibility 0.2s, margin 0.2s; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); border-top: none; transform-origin: top center; }
.dropdown:hover .tabs { max-height: 240px; opacity: 1; visibility: visible; margin-top: 8px; }
.dropdown:not(:hover) .tabs { transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, visibility 0.2s, margin 0.2s; max-height: 0; opacity: 0; visibility: hidden; margin-top: 0; border-top: none; }
.tablist { position: relative;}
.tablist .tlist{ display:none; position: relative;  text-align: center;   margin: 0;}
.tablist .active{ display:block;}

/*.tabs{ display:none; z-index: 10; position: absolute;  text-align: center; left: 0; right: 0; background: #000000; }*/
.tabs a{ font-size: 16px; line-height: 1.5; padding: 10px;  color: #000000; position: relative; display: block;}
.tabs a:hover{ background: #ffffff; color: #000000;}

.tab_news{  z-index: 10; display: flex; justify-content: flex-end; }
.tab_news a{ font-size: 2.2rem; line-height: 1.5; padding: 0 3rem 1rem;  color: #595959; position: relative; display: block;}
.tab_news a:after{ width: 0; height: 4px; background: #0044fe; content: ""; display: block; position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 0;}
.tab_news a:hover{ color: #0044fe;}
.tab_news a:hover::after{ width: 80%;}
.tab_news a.active{ color: #0044fe;}
.tab_news a.active:after{ width: 80%; height: 4px; background: #0044fe; content: ""; display: block; position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 0;}

.tablist_news{ margin: 4rem 0 0;}

.sect_k2 .swiper-slide{ opacity: 0.5; background: #000000;}
.sect_k2 .swiper-slide-active{ opacity: 1;}
.box_i1{  padding-bottom: 1rem; width: 100%; position: absolute; left: 0; z-index: 10;     top: 8rem;}
.box_i1:before{ width: 100%; height: 0px; background: rgba(255,255,255,0.4); left: 0; right: 0; bottom: 0; content: ""; position: absolute;}
.tablist .swiper-container{ max-width: 100%; margin-left: 0; overflow: visible; z-index:auto;}

.pro-box{ position: relative; margin-bottom: 0; }
.pro-box .zbg{ width: 100%; height: 100%; background: rgba(0,0,0,0.2); position: absolute; left: 0; right: 0; z-index: 2; top: 0;     margin: 0 auto;}
.pro-box a{}
.pro-box a:hover .icon img{ transform: scale(1);}
.pro-box .icon img{ width: 100%; height: 100%; object-fit: cover;}
.pro-box .icon{ z-index: 1; position: relative;}
.pro-box .ntit{ text-align: left; position: absolute; font-size: 16px; line-height: 1.6;  left: 10%; top: 40%; z-index: 3;}
.pro-box .ntit span{ text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; color: #ffffff; font-size: 4.4rem; font-weight: bold; overflow: hidden;}
.pro-box .ntit p{ font-size: 18px; line-height: 1.8; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  margin: 2rem 0; overflow: hidden; width:50%;}
.pro-box .ntit b{ background: #0044fe; display: flex; max-width: 190px; height: 52px; line-height: 52px; color: #ffffff; border-radius: 35px; justify-content: center; align-items: center;}
.pro-box .ntit b i{ width: 35px; height: 35px; border-radius: 100%; background: #ffffff; line-height: 35px; color: #0044fe; text-align: center; margin-left: 15px; }
.sect_k2 .i-next1{ left: 10%;   top: 84%; background: #ffffff;  width: 50px; height: 50px; border-radius: 100%; text-align: center; line-height: 50px; transform: rotate(272deg);}
.sect_k2 .i-next1 i{ color: #0044fe; font-size: 2rem; font-weight:lighter;}
.sect_k2 .i-prev1{right: 10%;   top: 84%; background: #1251fe;  width: 50px; height: 50px; border-radius: 100%; text-align: center; line-height: 50px; transform: rotate(90deg);}
.sect_k2 .i-prev1 i{ color: #ffffff; font-size: 2rem; font-weight:lighter;}
 
 
.sect_k5{ padding: 8rem 0; position: relative; clear: both; overflow: hidden; background: #ffffff;}
.new-box{ position: relative; margin-bottom: 0; border-radius: 3rem;  overflow: hidden;}
.new-box a{}
.new-box .icon{ overflow: hidden; width: 100% !important; height: 100% !important;}
.new-box .icon img{ width: 100%; height: 100%; object-fit: cover;}
.new-box .ntit{ background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)); text-align: left; position: absolute; font-size: 16px; line-height: 1.6;  left: 0; right: 0; margin: 0 auto; bottom: 0; padding: 3rem; width: 100%;box-sizing: border-box;}
.new-box .ntit span{ text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; color: #ffffff; font-size: 2.6rem; font-weight: bold;}
.new-box .ntit p{ font-size: 16px; line-height: 1.8; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 1rem 0;  }
.new-box .new_m{ background: url(../img/bg_i1.png) no-repeat top center; display: block;  width: 14rem; height: 12.5rem; display: block; position: absolute; right: -1px; bottom: -1px;  }
.new-box .new_m i{ background: #0044fe; width: 5.6rem; height: 5.6rem; border-radius: 100%; line-height: 5.6rem; display: block; font-size: 4rem;    margin: 5rem;}

.list_i1{ list-style: none;}
.list_i1 li{ width: calc(( 100% - 4rem)/2); margin-bottom: 3rem; margin-right: 4rem; float: left;}
.list_i1 li:nth-child(2){ margin-right: 0;}

.new-box1{ position: relative; margin-bottom: 0; }
.new-box1 a{}
.new-box1 .icon{border-radius: 3rem;  overflow: hidden; width: 100% !important; height: 100% !important;}
.new-box1 .icon img{ width: 100%; height: 100%; object-fit: cover;}
.new-box1 .ntit{ text-align: left;  font-size: 16px; line-height: 1.6; margin: 0 auto; bottom: 0; padding: 3rem 0; width: 100%; }
.new-box1 .ntit span{ text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #1a1a1a; font-size: 2.2rem; font-weight: bold; overflow:hidden;}
.new-box1 .ntit p{ font-size: 16px; color: #9c9c9c; line-height: 1.8; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin: 1rem 0;  }
.new-box1 .ntit b{ font-size: 2rem; color: #c5010d; margin-bottom: 2rem; display: block;}

.list_i2{ list-style: none;     margin-top: 5rem;}
.list_i2 li{ width: calc(( 100% - 4rem)/2); border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4;  margin-right: 4rem; float: left; padding: 2rem 0; background: #f1f1f1; transition: all 0.3s;}
.list_i2 li:hover{ background: #0044fe;  transition: all 0.3s;}
.list_i2 li:hover b{ width: 0;  transition: all 0.3s;}
.list_i2 li:hover span{ width: 90%;  transition: all 0.3s; color: #ffffff;}
.list_i2 li:hover em{ color: #ffffff;}
.list_i2 li:nth-child(3):hover,.list_i2 li:nth-child(4):hover{ background: #0044fe;}

.list_i2 li:nth-child(2n){ margin-right: 0;}
.list_i2 li:nth-child(3){ background: #ffffff;}
.list_i2 li:nth-child(4){ margin-right: 0; background: #ffffff;}
.list_i2 li span{ color: #1a1a1a; font-size: 2rem; width: 80%; text-align: left; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-height: 2; overflow: hidden;}
.list_i2 li em{ color: #adadad; font-size: 16px; font-style: normal;}
.list_i2 li b{ width: 10%;  }
.list_i2 li a{  display: flex; justify-content: flex-start; align-items: center;  padding: 0 2rem;}