@charset "utf-8";
/* CSS Document */
@import url(Flex.css);
* { -webkit-text-size-adjust: auto !important; -ms-text-size-adjust: auto !important; }/*Chrome默认字体最小为12px，*/
html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; padding: 0;}/*字体抗锯齿渲染*/
body { font: normal 100%/1.5 'Arial', 'Tahoma', 'PingFang SC', 'Microsoft YaHei', 'sans-serif'; color: #222; overflow-x: hidden; overflow-y: auto; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
div, h1, h2, h3, h4, h5, h6, b, em, i, span, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, input, textarea, button { font-size:100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; }
table { cellspacing:0; cellpadding:0; border-spacing:0 }
ul, ol, dl, li, dt, dd { list-style: none; }
input, textarea, button, select { background:none; border: none; outline: none; text-decoration: none; resize: none; font: normal 100% 'Arial', 'Microsoft YaHei', 'Helvetica', 'sans-serif';}
input, button, textarea { -moz-appearance:none; -webkit-appearance: none !important; appearance:none; } /*去除input默认样式*/ 
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: #222; -webkit-transition: background-color 43200s ease-in-out 0s; transition: background-color 43200s ease-in-out 0s; }/*去除自动填充后默认背景色*/
input:autofill, input:autofill:hover, input:autofill:focus { -webkit-text-fill-color: #222; -webkit-transition: background-color 43200s ease-in-out 0s; transition: background-color 43200s ease-in-out 0s; }/*去除自动填充后默认背景色*/
input,textarea,select  { border:solid 1px #ccc; -webkit-border-radius: 2px; border-radius: 2px; box-sizing:border-box; }/*自定义边框*/
input:focus, input:hover, textarea:focus, textarea:hover, select:focus, select:hover{border: 1px solid #093391;}/*选中后及鼠标上移*/
a { color: inherit; outline: none; text-decoration: none; cursor:pointer;}
a:hover { color: #093391; }
a:focus, botton:focus, input:focus, textarea:focus  { outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }/*去掉高光样式：*/
a:hover img { border: none; }
img, video {display:block; max-width: 100%; height: auto; border: none; outline: none; }
.clearfix { clear: both; zoom: 1; *zoom:1;}
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; }
/*::-webkit-scrollbar{width:8px;height: auto} 滚动条整体样式
::-webkit-scrollbar-track{background-color:#eee;}滚动条里面小方块
::-webkit-scrollbar-thumb{background-color:#03a349;}滚动条里面轨道
::-webkit-scrollbar-thumb:hover {background-color:#4eab90;}
::-webkit-scrollbar-thumb:active {background-color:#4eab90;}*/
/********* public css *********/
body{ width: 100%; min-width:320px; box-sizing: border-box; }
/*** top ***/
.top{  width: 100%; padding: 1em 3.333vw; box-shadow: 0 0 6px rgb(0,0,0,.35); box-sizing:border-box;}
.top .logo{ width: 16vw; }
.ibody .top{ position: absolute; top: 2.5em; z-index: 9; padding: 0 3.3333vw; box-shadow:none; }
/*** 语言 ***/
.ibody .language { position:relative; color: #fff; }
.language a.on{ color: #093391; }
.language a::after { content: ""; display: inline-block; width: 2px; height: 1em; background-color: #333; vertical-align:-2px; margin:0 .5em; }
.language a:last-child::after { display: none;}
.ibody .language a::after { background-color: #fff;}
.language::before { content: "\f0ac"; font:300 112.5% "Awesome5"; margin-right:.5em; }
.ibody .language::before { color: #fff; }
/*** footer css ***/ 
.copyright { background:#1c1e20;  width:100%; font-size:87.5%; color: rgb( 255,255,255,.75); text-align: center; padding: 1em 0; }
@media (min-width: 1920px) {
body{ font-size: .833333vw;}
}
@media (max-width: 800px) {
body{ padding-right: 0; padding-top: 60px;}
.top{ position: fixed; top: 0; z-index: 9; width: 100%; height: 60px; padding: 0 16px; background: #fff;}
.ibody .top{ position: fixed; top: 0; padding: 0 16px; box-shadow: 0 0 6px rgb(0,0,0,.35); }
.top .logo,.top .logo a{display: box; display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex; display: flex;-webkit-box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; width: auto; height: 100%; }
.top .logo img{ height: 56.666%;}
.language{ color: #222;}
.language::before{ display: none; color: #222; margin-right:.25em;}
.ibody .language a::after { background-color: #888;}
.language span{display: none;}
.language a{ color: #888}
.language a::after{ background-color: #888;margin:0 .25em;}
}
/*** .banner css ***/ 
.banner { width:100%; position:relative;}
.banner .swiper-wrapper, .banner .swiper-slide { width:100%; height: 100%; position:relative; overflow: hidden; }
.banner .swiper-pagination-bullet { width: 16px; height: 16px; background: transparent; position: relative; z-index: 0; -webkit-border-radius: 50%; border-radius: 50%; opacity: 1; outline: none;}
.banner .swiper-pagination-bullet::before { content: ''; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; background: rgb( 255,255,255,1); border-radius: 50%; outline: none; }
.banner .swiper-pagination-bullet-active{ border: 1px solid rgb( 255,255,255,.75); position: relative; z-index: 0; border-radius: 50%; opacity: 1;}
.banner .swiper-pagination-bullet-active::before{ background: rgb( 255,255,255,.75);}
.banner .swiper-slide img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: cover; object-position:center;  }
.banner .swiper-slide video { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height:100%; object-fit: cover; object-position:center; }
.banner .img1 .inner{ position: absolute; top:45%; left:50%; z-index: 3; padding: .75em 1.5em; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }
.banner .img1 .inner span{ display: block; font-size:3vw; font-weight:bold; text-align: center; color:rgb(9,51,145,.9); box-sizing:border-box; text-shadow: #fff 2px 0 0, #fff 0 2px 0, #fff -2px 0 0, #fff 0 -2px 0; -webkit-transition: 1s linear; transition: 1s linear;}
.banner .img1 .inner span:nth-child(1){ margin-left: -10%; opacity: 0; }
.banner .img1.swiper-slide-active .inner span:nth-child(1){ margin-left: 0; opacity: 1; }
.banner .img1 .inner span:nth-child(2){ margin-right: -10%; opacity: 0; -webkit-transition: 1s linear 1.5s; transition: 1s linear 1.5s;}
.banner .img1.swiper-slide-active .inner span:nth-child(2){ margin-right: 0; opacity: 1; }
.banner .img2 .marker{ position: absolute; top:25%; left:37.3%; z-index: 3; color:#093391; text-align: center; line-height: normal; opacity: 0; -webkit-transition: 1s linear; transition: 1s linear; }
.banner .img2 .marker::before{ content: "\f3c5"; font:300 200% "Awesome5";  display: block; text-align: center; }
.banner .img2 .btn{ position: absolute; top:45%; left:55%; z-index: 3; background-color: #093391; color: #fff; font: 150% "Arial Black", "sans-serif"; padding: .25em .75em; opacity: 0; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); -webkit-animation: ud 1.5s ease-in-out 1s infinite; animation: ud 1.5s ease-in-out 1s infinite; -webkit-transition: .5s linear 1s; transition: .5s linear 1s;}
.banner .img2 .btn::before{ content: "\f0a6"; font:900 100% "Awesome5"; color: #d92727; position: absolute; bottom:-.45em; right: -.25em; }
.banner .img2.swiper-slide-active .marker{ top:35%; opacity: 1;}
.banner .img2.swiper-slide-active .btn{ left:50%; opacity: 1;}
@-webkit-keyframes ud { 
	0%, 100% {transform:translateY(0);}
	50% {transform:translateY(-5px);}
}
@keyframes ud { 
	0%, 100% {transform:translateY(0);}
	50% {transform:translateY(-5px);}
}
@media (max-width: 1200px) {
.banner .img1 .inner span{ text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;}
}
@media (min-width: 1025px) {
.banner { height: 100vh; }
}
@media (max-width: 1024px) {
.banner {height: 56.667vw; }
.banner .img2 .marker{ left:35%; }
.banner .img2.swiper-slide-active .marker{ top:34%; }
 }
@media (max-width: 800px) {
.banner .img2 .marker{ font-size: 75%; left:35.5%;  }
.banner .img2.swiper-slide-active .marker{ top:34.5%; }
.banner .img2 .btn{ font-size: 125%; padding: .25em .5em; top:45%; left:60%; }
.banner .img2.swiper-slide-active .btn{ top:55%; left:60%;}
}
@media (max-width: 720px) {
.banner .img2 .marker{ left:33.5%;}
.banner .img2.swiper-slide-active .marker{ top:32.5%; }
}
@media (max-width: 640px) {
.banner .img2 .marker{ left:33%;}
.banner .img2.swiper-slide-active .marker{ top:31.5%; }
}
@media (max-width: 480px) {
.banner .img2 .marker{ left:31%;}
.banner .img2.swiper-slide-active .marker{ top:30.5%; }
}
/*** index public css ***/ 
.section{ padding: 3.333vw; position:relative; box-sizing:border-box;}
/***  ad index css ***/ 
.ad{ text-align: center; padding-bottom: 0; -webkit-animation: ud 2s ease 0s infinite; animation: ud 2s ease 0s infinite;}
.ad span{ display: block; font:4.5vw/normal Impact, "Arial Black", "sans-serif"; color: #093391;}
/***  产品 index css ***/ 
.iPro .Flex{-webkit-flex-flow: row nowrap; -moz-flex-flow: row nowrap; -ms-flex-flow: row nowrap; -o-flex-flow: row nowrap; flex-flow: row nowrap;}
.iPro li{position:relative; width:calc(20% - .375em); border: solid 1px #093391; margin-right:.5em; text-align: center; overflow: hidden; -webkit-border-radius: 50%; border-radius: 50%; box-sizing: border-box;}
.iPro li:nth-child(5n) { margin-right:0; }
.iPro li .pic { width: 100%; position: relative; box-sizing:border-box; overflow:hidden; -webkit-border-radius: 50%; border-radius: 50%;}
.iPro li .pic:after { content: ""; display: block; padding-bottom: 100%;}
.iPro li .pic img { position: absolute; top:0; right: 0; bottom: 0; left:0; width: 100%; height: 100%; object-fit: cover; object-position: center; -webkit-border-radius: 50%; border-radius: 50%; -webkit-animation: ani2 8s ease-in-out 4s infinite; animation: ani2 8s ease-in-out 4s infinite;}
.iPro li .txt { font-size: 2.5vw; width: 100%; position: absolute; line-height: normal; word-wrap:break-word; padding: 0 2px; box-sizing: border-box; -webkit-animation: ani 8s ease-in-out 4s infinite; animation: ani 8s ease-in-out 4s infinite; }
@-webkit-keyframes ani{
	0%{ position: absolute; top: -150%; }
	55%{ position: absolute; top: 50%; transform:translate(0,-50%); }
	100%{ position: absolute; top: 150%; }
}
@keyframes ani{
	0%{ position: absolute; top: -150%; }
	55%{ position: absolute; top: 50%; transform:translate(0,-50%); }
	100%{ position: absolute; top: 150%; }
}
@-webkit-keyframes ani2{
	0%{ position: absolute; top:0;}
	50%{ position: absolute; top:150%;}
	100%{ position: absolute; top:200%;}
}
@keyframes ani2{
	0%{ position: absolute; top:0;}
	50%{ position: absolute; top:150%;}
	100%{ position: absolute; top:200%;}
}
/***  二维码 index css ***/ 
.iCode{ background: url('../images/bg1.jpg') no-repeat center center fixed; background-size: cover;}
.iCode .Flex{-webkit-flex-flow: row nowrap; -moz-flex-flow: row nowrap; -ms-flex-flow: row nowrap; -o-flex-flow: row nowrap; flex-flow: row nowrap;}
.iCode li { width: 30%; text-align: center; color: #fff;}
.iCode li img{ margin: 0 auto;}
.iCode li .txt{ font-size: 125%; margin-top: .25em; }
/***  应用 index css ***/ 
.iApp { text-align: center; position: relative; box-sizing: border-box;}
.iApp::before{ content: "\f0a6"; font:900 300% "Awesome5"; color: #d92727; position: absolute; bottom:2vw; right: 2.7vw; z-index: 2; -webkit-animation: ud 1.5s ease-in-out 1s infinite; animation: ud 1.5s ease-in-out 1s infinite; }
.iApp a{  font:3.9vw/normal Impact, "Arial Black", "sans-serif"; color: #093391; -webkit-animation: rollIn 1.5s ease-in-out 2s infinite; animation: rollIn 1.5s ease-in-out 2s infinite; }
@-webkit-keyframes rollIn {
	0% {opacity:.25;}
	100% {opacity:1;}
}
@keyframes rollIn {
	0% {opacity:.1;}
	100% {opacity:1;}
}
/***地图 index css ***/ 
.imap #map{ position:relative; width: 100%; height: 65vh;}
.imap #map img{ width:auto; max-width:inherit;}
.imap #map label.BMapLabel{ display:none;}
.imap .BMap_bubble_content h4{ font-weight: bold; font-size:112.5%; line-height: normal; margin-bottom: .25em;}
@media (min-width: 801px) {
.imap .BMap_bubble_content p{ white-space:nowrap;}
}
@media (max-width: 800px) {
.section{ padding: 1.5em 16px; }
.ad{ padding-bottom: 0;}
.iCode li .txt{ font-size: 100%; line-height: normal; margin-top: .5em; }
.iApp::before{ font:900 125% "Awesome5"; bottom:.5em; right: .5em; }
.imap .BMap_bubble_content{ font-size:87.5%;}
}
/****** page css ******/ 
.h-tit{ font-size:150%; font-weight: bold; margin-bottom: .75em;text-transform:Capitalize}
.back::before {content: "\f122"; font:900 100% "Awesome5"; color: #093391; margin-right:.5em; }
/***技巧及使用案例 page css ***/ 
.News { min-height: calc(100vh - 4.44vw - 2.55vw);}
.News li{ width: 100%; padding: .5em; border-bottom: dotted 1px #bbb;}
.News li::before {content: "·"; font-weight: bold; margin-right: .25em; }
@media (min-width: 801px) {
.News li{ width: calc(50% - 2em); margin-right: 2em;}
.News li:nth-child(2n){ margin-right: 0}
}
@media (max-width: 800px) {
.h-tit{ font-size:112.5%;}
.News { min-height: inherit;}
}
/*** 产品 page css ***/ 
.Pro li {display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; 
-webkit-box-pack: space-between; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;
width: 100%; margin: .5em 0; padding-bottom: .5em; border-bottom: solid 1px #ddd; box-sizing:border-box; overflow:hidden;}
.Pro li a{display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; 
-webkit-box-pack: space-between; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;}
.Pro li .pic { display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; 
-webkit-box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center;
-webkit-box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;
width: calc(50% - .25em); position: relative; border: solid 1px #ddd; box-sizing:border-box; overflow:hidden; }
.Pro li .pic::after { content: ""; display: block; padding-bottom: 100%;}
.Pro li .txt { width: calc(50% - .25em); }
.Pro li .pic .more{ font:87.5% Arial, "sans-serif"; position: absolute;  top: 2px; right: 2px;color: #fff; background: #093391; padding:0 .25em; -webkit-border-radius: .25em; border-radius: .25em; }
.Pro li .pic .more::after {content: "\f061"; font:900 75% "Awesome5"; display: inline-block; margin-left: .25em; -webkit-animation: ud2 1.5s ease-in-out 0s infinite; animation: ud2 1.5s ease-in-out 0s infinite; }
@-webkit-keyframes ud2 { 
	0%, 100% {transform:translateX(0);}
	50% {transform:translateX(-5px);}
}
@keyframes ud2 { 
	0%, 100% {transform:translateX(0);}
	50% {transform:translateX(-5px);}
}
@media (min-width: 801px) {
.Pro ul{display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; 
-webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; -o-flex-flow: row wrap; flex-flow: row wrap; width: 100%; }
.Pro li { width: calc(50% - 1em); height: auto; margin: 1em 0; margin-right: 2em; padding-bottom: 1em;}
.Pro li:nth-child(2n) { margin-right:0; }
}
@media (min-width: 1200px) {
.Pro li { width: calc(50% - 1.5em); margin-right:3em;}
}
@media (min-width: 1600px) {
.Pro li { width: calc(33.3333% - 2em); }
.Pro li:nth-child(2n) { margin-right:3em; }
.Pro li:nth-child(3n) { margin-right:0; }
}
.details p{ padding: .5em 0;}
/*** 历程 page css ***/ 
.His .txt p{ line-height: normal; padding: .5em 0; box-sizing: border-box; }