.product{padding:100px 0 0;}
.product .container{background:#f5f8fa; margin-top:40px; padding:60px 0 100px 0;}
.product .tabs{display:block;}
.product .tabs ul{text-align:center; font-size:0;}
.product .tabs ul>li{display:inline-block; font-size:16px; width:180px;}
.product .tabs ul>li>span{display:block; cursor:pointer;}
.product .tabs ul>li>span>i{display:block; margin:0 auto; width:80px; height:80px; line-height:80px; font-size:30px; border-radius:50%; background:#ecf0f4;}
.product .tabs ul>li>span>b{display:block; margin-top:10px; font-weight:normal;}
.product .tabs ul>li.on>span>i{background:#fff;}
.product .tabs ul>li.on>span>b{color:#004098;}
.product .content{margin-top:60px; position: relative;}
.product .content aside{visibility:hidden; position: absolute; top:0; left: 0; opacity:0; background:#fff; padding:40px;}
.product .content aside.on{visibility:visible; position: relative; opacity:1;}
.product .content aside>h2{display:block; font-size:22px; margin-bottom:5px;}
.product .content aside>dl{display:block; font-size:15px; color:#686868;}
.product .content aside>span{display:block; margin-top:20px;}
.product .content aside>span>a{padding:5px 20px; font-size:15px;}
.product .content aside>span>a>b{font-weight:normal;}
.product .content aside>div{display:block; overflow:hidden; margin-top:60px; position: relative;}
.product .content aside>div>ul{width:10000%;}
.product .content aside>div>ul>li{float:left; width:.2%;}
.product .content aside>div>ul>li>a{display:block;}
.product .content aside>div>ul>li>a>img{display:block;}
.product .content aside>div>ul>li>a>h3{display:block; font-size:14px; margin-top:10px; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.product .content aside>div>dl{position: absolute; top:50%; left: 0; right: 0; z-index: 88; display: none;}
.product .content aside>div:hover>dl{display: block;}
.product .content aside>div>dl>*{width:30px; height:30px; margin-top: -15px; line-height:30px; text-align: center; cursor:pointer; border-radius: 50%; font-size: 20px; color:#fff; background: #004098;}
.product .content aside>div>dl>*:hover{background: #2b85ff;}
.product .content aside>div>dl>dt{float: left;}
.product .content aside>div>dl>dd{float: right;}
@media(max-width:1199px){
.product{padding:60px 0 0;}
.product .tabs ul>li{width:120px; font-size:14px;}
.product .tabs ul>li>span>i{width:60px; height:60px; line-height:60px; font-size:25px;}
.product .tabs ul>li>span>b{margin-top:5px;}
.product .container{margin-top:20px; padding:40px 0 60px 0;}
.product .content{margin-top:30px;}
.product .content aside{padding:20px;}
.product .content aside>div{margin-top:30px;}
.product .content aside>div>ul>li{width:.25%;}
.product .content aside>h2{font-size:20px;}
.product .content aside>dl{font-size:14px;}
.product .content aside>span>a{padding:2px 15px; font-size:14px;}
}
@media(max-width:991px){
.product .content aside>div>ul>li{width:.333%;}
}
@media(max-width:767px){
.product{padding:30px 0 0;}
.product .tabs ul{text-align:left;}
.product .tabs ul>li{width:auto; margin:0 5px;}
.product .tabs ul>li>span>i{width:18px; height:18px; line-height:18px; font-size:14px; text-align:center; display:inline-block;}
.product .tabs ul>li>span>b{display:inline-block;}
.product .container{margin-top:10px; padding:20px 0 30px 0;}
.product .content{margin-top:15px;}
.product .content aside{padding:10px;}
.product .content aside>div>ul>li{width:.5%;}
}

.solution{padding:100px 0;}
.solution .container{margin-top:40px;}
.solution .container:after{display: block; content: ''; clear: both;}
.solution .container ul,
.solution .container ol{margin:0 -5px; height:380px; overflow: hidden;}
.solution .container ol{margin-top: 10px;}
.solution .container li{float:left; padding:0 5px; transition:.18s;}
.solution .container ul>li{width:33.33333%;}
.solution .container ol>li{width:25%;}
.solution .container li a{display:block; overflow:hidden; position:relative;}
.solution .container li a>img{height:380px; width:100%; display:block; object-fit:cover; transition:.3s;}
.solution .container li a>span{display:flex; flex-direction:column; padding:20px; position:absolute; left:0; top:0; right:0; bottom:0; z-index:1; 
background:linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0));}
.solution .container li a>span>h3{display:block; color:#fff; font-size:26px; transition: .3s;}
.solution .container li a>span>p{display:block; color:#eee; font-size:16px; margin-top: 5px;}
.solution .container li:hover a>img{transform:scale(1.05);}
.solution .container li:hover a>span{justify-content: center; align-items: center;}
.solution .container li:hover a>span{background:linear-gradient(to bottom,rgba(0,0,0,0.8),rgba(0,0,0,0.2));}
.solution .container li:hover a>span>h3{font-size:36px;}
.solution .container li:hover a>span>p{display: none;}
@media(min-width:768px){
.solution .container ul>li:nth-child(1){width:37%;}
.solution .container ul>li:nth-child(2){width:30%;}
.solution .container ul>li:nth-child(3){width:33%;}
.solution .container ul:hover>li{width:28%;}
.solution .container ul:hover>li:hover{width:44%;}
.solution .container ol>li:nth-child(1){width:22%;}
.solution .container ol>li:nth-child(2){width:30%;}
.solution .container ol>li:nth-child(3){width:26%;}
.solution .container ol>li:nth-child(4){width:22%;}
.solution .container ol:hover>li{width:21%;}
.solution .container ol:hover>li:hover{width:37%;}
}
@media(max-width:1199px){
.solution{padding:60px 0;}
.solution .container{margin-top:30px;}
.solution .container ol{margin-top:6px;}
.solution .container li{padding:0 3px;}
}
@media(max-width:991px){
.solution .container li a>span{padding: 15px;}
}
@media(max-width:767px){
.solution{padding:30px 0;}
.solution .container{margin-top:15px;}
.solution .container ul,
.solution .container ol{height: auto; margin-top: 0;}
.solution .container ul>li,
.solution .container ol>li{width: 100%; margin-top:6px;}
.solution .container li a>img{height: 100px;}
.solution .container li a>span>h3{font-size:22px;}
.solution .container li a>span>p{font-size:14px;}
}

.introduce{position:relative;  background:#f5f8fa;}
.introduce-image{position:absolute; width:50%; height:100%; right:0; top:0;}
.introduce-image>img{display:block; width:100%; height:100%; object-fit:cover;}
.introduce-box{width:45%; padding:100px 0;} 
.introduce-box>aside{margin:40px 0; font-size:15px; color:#686868;}
.introduce-title{text-align: left;}
.introduce-button{margin-top:40px;}
.introduce-button>a{display:inline-block; padding:6px 24px; font-size:16px;}
.introduce-button>a:before{float:right;}
.introduce-play{position:absolute; z-index:8; top:50%; left:50%; transform:translate(-50%,-50%);}
.introduce-play>i{width:80px; height:80px; line-height:68px; border-radius:50%; font-size:46px; cursor:pointer; text-align:center; color:#fff; 
transition:.3s; animation:pulse 1s infinite; border:6px solid #004098; background:#004098;}
.introduce-play>i:before{position:relative; left:3px;}
.introduce-play>i:hover{background:#fff; font-size:40px; color:#004098;}
@keyframes pulse{
0% {box-shadow:0 0 0 0 #00409888;}
70% {box-shadow:0 0 0 16px transparent;}
100% {box-shadow:0 0 0 0 transparent;}
}
.introduce-video{position:fixed; padding:2%; top:0; right:0; bottom:0; left:0; z-index:88888888; background:rgba(0,0,0,.8); backdrop-filter:blur(4px);
display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-o-box; display:box; 
-webkit-box-pack:center; -moz-box-pack:center; -ms-flex-pack:center; -o-box-pack:center; box-pack:center; 
-webkit-box-align:center; -moz-box-align:center; -ms-flex-align:center; -o-box-align:center; box-align:center;}
.introduce-video>aside{position:relative; max-width:100%; max-height:100%; background:#000;
display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-o-box; display:box; 
-webkit-box-pack:center; -moz-box-pack:center; -ms-flex-pack:center; -o-box-pack:center; box-pack:center; 
-webkit-box-align:center; -moz-box-align:center; -ms-flex-align:center; -o-box-align:center; box-align:center;}
.introduce-video>aside>i{position:absolute; color:#fff; top:-30px; right:0; font-size:22px; cursor:pointer;}
.introduce-video>aside>video{display:block; max-width:100%; max-height:100%; max-height:calc(90vh);}
@media(max-width:1200px){
.introduce-box{width:50%; padding:60px 20px 60px 0;}
.introduce-box>aside{font-size:15px; margin:30px 0;}
.introduce-button{margin-top:30px;}
.introduce-button>a{padding:5px 15px; font-size:14px;}
}
@media(max-width:992px){
.introduce-box{width:100%; padding-right: 0;}
.introduce-title{text-align:center;} 
.introduce>article{position:relative;}
.introduce-image{position:relative; width:100%;}
}
@media(max-width:767px){
.introduce-box{padding:20px 0;}
.introduce-box>aside{font-size:14px; margin:15px 0;}
.introduce-title>span>b{font-size:18px;}
.introduce-title>span>h2{font-size:24px;}
.introduce-button{margin-top:20px;} 
.introduce-button>a{padding:2px 10px;} 
.introduce-play>i{width:50px; height:50px; line-height:46px; font-size:32px; border-width:2px;}
.introduce-play:hover>i{font-size:28px;}
}

.news{padding:100px 0; } 
.news-box{ padding-top:60px}
.news-box:after{display:block; content:''; clear:both;}
.news-list{padding-left:60px; width:60%; float:left;}
.news-exhibit{background:#f5f8fa; width:40%; float:left; margin-top:8px; padding:28px; border-radius:4px;}
.news-exhibit>aside{position:relative; display:block;}
.news-exhibit>aside>img{display:block; width:100%;}
.news-exhibit>aside>a{position:absolute; left:0; bottom:0; right:0; background:rgba(0,0,0,.6); color:#fff; padding:8px 18px; z-index:2; font-size:20px; font-weight:bold;}
.news-exhibit>ul{ display:block; padding-top:5px;}
.news-exhibit>ul li{margin:25px 0 0;}
.news-exhibit>ul li:after{display:block; content:''; clear:both;}
.news-exhibit>ul li i{float:left; font-style:normal; text-align: center; line-height:1; font-size: 12px; padding:8px; border-radius:3px; margin-right:15px; color:#fff; background: #004098;}
.news-exhibit>ul li i b{font-size:28px; display: block;}
.news-exhibit>ul li h3{font-weight:bold; font-size:16px; position:relative; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} 
.news-exhibit>ul li p{margin-top:4px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#686868;}
.news-tabs{margin-bottom:18px;}
.news-tabs:after{display:block; content:''; clear:both;}
.news-tabs h2{font-size:24px; font-weight:bold; cursor:pointer; display:inline-block; margin-left:38px;}
.news-tabs h2:first-child{margin:0;}
.news-tabs h2.on{color:#004098;}
.news-cut{display: block;}
.news-cut ul{display:none;}
.news-cut ul.on{display:block;}
.news-cut ul li{padding:20px 0; border-bottom:1px solid #eee;}
.news-cut ul li:first-child{margin-top:0;}
.news-cut ul li:after{display:block; content:''; clear:both;}
.news-cut ul li h3{font-weight:bold; font-size:18px; position:relative; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} 
.news-cut ul li i{float:right; font-style:normal; color:#888; padding-top:0;}
.news-cut ul li p{margin-top:8px; height:52px; line-height:26px; font-size: 15px; overflow:hidden; color:#686868;}
.news-cut div{margin-top:30px;} 
.news-cut div>a{padding:5px 20px; font-size:15px;}
.news-cut div>a:before{float:right; position:relative; right:-4px; } 
@media(max-width:1200px){
.news{padding:60px 0; }
.news-list{padding-left:28px;}
.news-box{padding-top: 30px;}
.news-tabs h2{font-size: 20px; margin-left: 28px;}
.news-exhibit{padding:18px;} 
.news-cut ul li{padding:10px 0;}
.news-cut ul li h3{font-size: 15px;}
.news-cut ul li p{margin-top: 5px;}
.news-cut div>a{padding: 5px 15px;}
}
@media(max-width:992px){
.news-list{padding:30px 0 0; width:100%;}
.news-exhibit{padding:18px; width:100%; margin-top: 0;}
}
@media(max-width:767px){
.news{padding:30px 0; }
.news-exhibit{padding:8px;}
.news-exhibit>aside>a{font-size:16px; padding:2px 10px;}
.news-exhibit>ul li{margin-top: 5px;}
.news-exhibit>ul li i{margin-right: 8px;}
.news-tabs{margin-bottom:10px;}
.news-tabs h2{font-size:16px; margin-left: 8px;}
.news-box{padding-top: 15px;}
.news-list{padding-top: 20px;}
.news-cut div{margin-top: 15px;}
.news-cut div>a{padding:2px 10px; font-size:14px;}
.news-cut ul li{padding:5px 0;}
.news-cut ul li p{margin-top: 0;}
}