@charset "utf-8";
/*banner*/
.banner{position: relative;height: calc(100vh - 100px);overflow: hidden;}
.banner .swiper-slide .pic{display: block;height: 100%;background-position: center;background-size: cover;background-repeat: no-repeat;}
.banner .swiper-slide .video{position: relative;padding-top: 32%;}
.banner .swiper-slide .video video{position: absolute;left: 0;top: 0;width: 100%;height: 100%;object-fit: cover;}
.banner .swiper-pagination{z-index: 1;left: auto;left: 5.2%;bottom: 6rem;width: auto;line-height: 1rem;color: #fff;}
.banner .btns-wrap{z-index: 1;position: absolute;left: 5.2%;bottom: 3rem;display: flex;justify-content: space-between;align-items: center;width: 260px;font-size: 16px;line-height: 20px;color: #fff;}
.banner .btns-wrap::after{content: '';position: absolute;left: 50%;top: 0.1rem;bottom: 0.1rem;width: 1px;background-color: currentColor;opacity: .6;}
.banner .btns-wrap .btn{display: flex;align-items: center;cursor: pointer;transition: .3s;}
.banner .btns-wrap .prev-btn::before{content: '';width: .4em;height: .4em;margin-right: .4em;border-left: 1px solid currentColor;border-bottom: 1px solid currentColor;transform: rotate(45deg);}
.banner .btns-wrap .next-btn::after{content: '';width: .4em;height: .4em;margin-left: .4em;border-right: 1px solid currentColor;border-bottom: 1px solid currentColor;transform: rotate(-45deg);}
.banner .progress-bar{z-index: 1;position: absolute;left: 5.2%;bottom: 5rem;width: 13rem;height: 0.1rem;background-color: rgba(255,255,255,.5);}
.banner .progress-bar::after{content: '';position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: #fff;transform-origin: 0 50%;transform: scaleX(0);}
.banner .progress-bar.on::after{transform: scaleX(1);transition: 5s linear;}

/******首页******/
.index-container{min-height: 25rem;overflow: hidden;}
/*标题*/
.index-title{display: flex;justify-content: space-between;align-items: center;margin-bottom: 2.5rem;}
.index-title .name{line-height: 1;font-weight: bold;font-family:'Candara';}
/*更多按钮*/
.index-more-btn{display: inline-flex;justify-content: center;align-items: center;padding: 0 2em;border: 1px solid #999;border-radius: 1.4em;line-height: 2.8;font-weight: bold;transition: .3s;}
.index-more-btn .arrow{content: '';width: 1.2em;height: 1.2em;margin-left: 1em;background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iNSIgdmlld0JveD0iMCAwIDIwIDUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE3LjUgNUgyMGwtMi0xLjlMMTQuOSAwbC0xLjIgMS4yIDEuOSAxLjlILjk4OFY1eiIgZmlsbD0iIzA0NjRCMiIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9zdmc+');background-size: 100% 100%;filter: brightness(0);}
.index-more-btn:hover .arrow{filter: brightness(0) invert(1);transition: .5s ease-in;}
.index-more-btn.white{background-color: rgba(255,255,255,.15);border-color: rgba(255,255,255,.66);color: #fff;}
.index-more-btn.white .arrow{filter: brightness(0) invert(1);}
.index-more-btn2{display: inline-flex;align-items: center;border-bottom: 1px solid #999;line-height: 2.5;font-weight: bold;transition: .3s;}
.index-more-btn2::after{content: '';width: 1.2em;height: 1.2em;margin-left: 1.75em;background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iNSIgdmlld0JveD0iMCAwIDIwIDUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE3LjUgNUgyMGwtMi0xLjlMMTQuOSAwbC0xLjIgMS4yIDEuOSAxLjlILjk4OFY1eiIgZmlsbD0iIzA0NjRCMiIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9zdmc+');background-size: 100% 100%;filter: brightness(0);transition: .3s;}
.index-more-btn2:hover{color: #0464B2;}
.index-more-btn2:hover::after{filter: none;transform: translateX(.3em);}
/*布局*/
.index-container .brief{line-height: 2;}
.index-container .part1{padding: 5rem 0;}
.index-container .part2{padding: 5rem 0 0;background: url(/uiFramework/commonResource/zip/ztkgEN/images/index_part_bg1.jpg) center top no-repeat;background-size: 100% auto;}
.index-container .part2 .w1700{display: flex;justify-content: space-between;flex-wrap: wrap;}
.index-container .part2 .w1700 > .con-l{width: 50%;}
.index-container .part2 .w1700 > .con-r{width: 45%;}
.index-container .part3{padding: 5rem 0 2rem;}

/*产品&服务，选项卡*/
.product-service-tab-box{display: flex;justify-content: space-between;align-items: flex-start;flex-wrap: wrap;}
.product-service-tab-box .tabs{flex: 0 0 25rem;margin-right: 5%;}
.product-service-tab-box .tabs .item{position: relative;margin-top: 3em;cursor: pointer;transition: color .3s,padding .3s .1s;}
.product-service-tab-box .tabs .item::before{content: '';position: absolute;left: 0;top: 0;bottom: 0;width: 0.2rem;background-color: #0464B2;transform: scaleX(0);transform-origin: 0 50%;}
.product-service-tab-box .tabs .item:first-child{margin-top: 0;}
.product-service-tab-box .tabs .item .tit{display: flex;align-items: center;font-weight: bold;}
.product-service-tab-box .tabs .item .tit .icon{width: 1.5em;height: 1.5em;margin-right: 1em;filter: brightness(0);}
.product-service-tab-box .tabs .item .txt{max-height: 0;line-height: 1.5;color: #666;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;transition: .3s;}
.product-service-tab-box .tabs .item.on{padding-left: 1.8em;color: #0464B2;}
.product-service-tab-box .tabs .item.on::before{transform: scaleX(1);transition: .3s .3s;}
.product-service-tab-box .tabs .item.on .tit .icon{filter: none;}
.product-service-tab-box .tabs .item.on .txt{max-height: 4em;margin-top: 1em;}
.product-service-tab-box .tab-content{flex: 1;overflow: hidden;margin-top: -5rem;}
.product-service-tab-box .tab-content .swiper-slide .pic{overflow: hidden;}
.product-service-tab-box .tab-content .swiper-slide .pic em{display: block;padding-top: 61%;background-position: center;background-size: cover;background-repeat: no-repeat;transition: .5s;}
.product-service-tab-box .tab-content .swiper-slide .info{position: absolute;left: 0;right: 0;bottom: 0;display: flex;justify-content: space-between;align-items: center;padding: 50px 60px;background-image: linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6));font-weight: bold;color: #fff;}
.product-service-tab-box .tab-content .swiper-slide .info .tit{flex: 1;display: inline-flex;align-items: center;}
.product-service-tab-box .tab-content .swiper-slide .info .tit .icon{width: 1.5em;height: 1.5em;margin-right: 1em;filter: brightness(0) invert(1);}

/*视频区*/
.video-box{z-index: 1;position: relative;cursor: pointer;}
.video-box::before{content: '';z-index: -1;position: absolute;right: 0;top: 0;width: 6.2rem;height: 6.2rem;background-image: url(/uiFramework/commonResource/zip/ztkgEN/images/dot_elem_bg.png);background-size: 100% 100%;transform: translate(-5px,-50%);}
.video-box .pic{overflow: hidden;}
.video-box .pic em{display: block;padding-top: 54%;background-position: center;background-size: cover;background-repeat: no-repeat;transition: .5s;}
.video-box .play-btn{z-index: 1;position: absolute;inset: 0;width: 3rem;height: 3rem;margin: auto;}
.video-box .play-btn:before{content: "";z-index: -1;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: #fff;border-radius: 50%;opacity: .8;animation: scaleBtn 2s linear infinite;}
.video-box .play-btn:after{content: "";z-index: -1;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: #fff;border-radius: 50%;opacity: .8;animation: scaleBtn 2s 1s linear infinite;}
.video-box .play-btn .icon{position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;margin: auto;}
@keyframes scaleBtn{
	to{transform: scale(1.6);opacity: 0;}
}
/*关于我们*/
.about-box > .tit{margin-bottom: 1em;line-height: 1.6;font-weight: bold;}
.about-box > .txt{line-height: 1.8;color: #666;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;overflow: hidden;}
.about-box .index-more-btn2{margin-top: 4.5rem;}
/*数据展示区*/
.data-show-wrap{display: flex;flex-wrap: wrap;margin-top: 2rem;}
.data-show-wrap .item{width: 30%;margin-right: 10%;}
.data-show-wrap .item .num{display: flex;height: 2.4rem;}
.data-show-wrap .item .num span{display: inline-flex;line-height: 1;font-weight: bold;color: #0464B2;}
.data-show-wrap .item .num sup{display: inline-flex;align-items: flex-start;font-weight: bold;color: #0464B2;transform: translateY(-.5em);}
.data-show-wrap .item .num em{display: inline-flex;align-items: flex-end;}
.data-show-wrap .item .txt{padding-top: 1em;margin-top: 1em;border-top: 1px solid #DADADA;line-height: 1;color: #666;}

/*首页新闻列表*/
.index-news-list{display: flex;justify-content: space-between;flex-wrap: wrap;}
.index-news-list li{width: 47%;border-bottom: 1px solid #e7e7e7; margin-bottom: 3%;padding-bottom: 3%;}
.index-news-list li a{display: block;}
.index-news-list li .date{margin-bottom: 1.2em;color: #0464B2;}
.index-news-list li .info{display: flex;align-items: flex-start;}
.index-news-list li .info .tit{flex: 1;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.index-news-list li .info .tit span{background: linear-gradient(90deg,#0464B2,#0464B2) right bottom no-repeat;background-size: 0 0.1rem;transition: background-size 1s;}
.index-news-list li .info .index-more-btn{height: 2.5em;margin-left: 5em;}
.index-news-list li .info .index-more-btn .arrow{margin-left: 0;}
.index-news-list li a:hover .info .tit span{background-position: left bottom;background-size: 100% 0.1rem;}


/*笔记本1920*1080显示放大比例为125%，实际分辨率为1920/1.25=1536*/
@media screen and (max-width: 1550px){
	/*banner*/
	.banner{height: auto;}
	.banner .swiper-slide .pic{padding-top: 45%;}
	header{height: 80px;}
	header .logo img{max-height: 45px;}
	header .nav-box .nav-1st{height: 55px;}
	header .nav-box .nav-1st > li > a{line-height: 55px;}
}

/*中屏PC，分辨率1366*/
@media screen and (max-width: 1440px){
	
}

/*小屏PC，分辨率1280*/
@media screen and (max-width: 1300px){
	
}

/*pad横屏，分辨率1024*/
@media screen and (max-width: 1024px){
	/*banner*/
	.banner{height: auto;}
	.banner .swiper-slide .pic{padding-top: 45%;background-position: center;background-size: cover;background-repeat: no-repeat;}
	.banner .swiper-slide .video{padding-top: 45%;}
	.banner .swiper-pagination{bottom: 0.5rem;}
	.banner .swiper-pagination .swiper-pagination-bullet{width: 0.6rem;height: 0.15rem;margin: 0 0.15rem;}
	.banner .btns-wrap{display: none;}
	.banner .progress-bar{left: auto;left: calc(5.2% + 2.5rem);bottom: 0.9rem;width: 5rem;}

	/******首页******/
	.index-container{min-height: 15rem;}
	/*标题*/
	.index-title{margin-bottom: 1.5rem;}
	/*更多按钮*/
	.index-more-btn{padding: 0 1em;line-height: 2;}
	.index-more-btn.white .arrow{margin-left: .5em;}
	/*布局*/
	.index-container .part1{padding: 2rem 0;}
	.index-container .part2{padding: 2rem 0;}
	.index-container .part2 .w1700 > .con-l{width: 100%;}
	.index-container .part2 .w1700 > .con-r{width: 100%;margin-top: 1rem;}
	.index-container .part3{padding: 2rem 0;}

	/*产品&服务，选项卡*/
	.product-service-tab-box .tabs{flex: 0 0 100%;margin-right: 0;}
	.product-service-tab-box .tabs .item{margin-top: 1.5em;}
	.product-service-tab-box .tabs .item .txt{display: none;}
	.product-service-tab-box .tab-content{flex: 0 0 100%;margin-top: 1rem;}
	.product-service-tab-box .tab-content .swiper-slide .info{padding: 1em;}
	.product-service-tab-box .tab-content .swiper-slide .info .tit .icon{margin-right: .5em;}

	/*视频区*/
	.video-box .play-btn{width: 2.5rem;height: 2.5rem;}
	/*关于我们*/
	.about-box > .tit{margin-bottom: .8em;}
	.about-box .index-more-btn2{margin-top: 2rem;}
	/*数据展示区*/
	.data-show-wrap{margin-top: 1.5rem;}
	.data-show-wrap .item .num{height: 1.8rem;}
	.data-show-wrap .item .num span{font-size: 1.8rem;}
	.data-show-wrap .item .txt{padding-top: .5em;margin-top: .5em;}

	/*首页新闻列表*/
	.index-news-list li{width: 100%;margin-bottom: 1.5rem;}
	.index-news-list li .date{margin-bottom: .5em;}
	.index-news-list li .info .index-more-btn{height: 2em;padding: 0 1.5em;margin-left: 2em;}
}

/*phone和pad竖屏，分辨率820*/
@media screen and (max-width: 820px){
	header {height: 50px;}
	/*产品&服务，选项卡*/
	.product-service-tab-box .tabs{display: none;}
	.product-service-tab-box .tab-content{margin-top: 0;}
	.index-title .name{font-size: 1.2rem;font-family:'PingFang SC','Microsoft YaHei';}
	
	.about-box > .txt{line-height: 1.5;text-align:left;}
	.data-show-wrap .item .num span{font-size: 1.2rem;}
}