@charset "utf-8";
/* CSS Document */
@import url(Flex.css);/*外链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; }/*字体抗锯齿渲染*/
body { font: normal 16px/1.5 'Arial', 'Tahoma', 'Microsoft YaHei', 'sans-serif'; color: #333; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
html, body, 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-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 { background:none; border: none; outline: none; text-decoration: none; resize: none; }
input, input[type="text"], input[type="button"], input[type="submit"], input[type="reset"], button, textarea { -webkit-appearance: none !important;} /*去除input默认样式*/ 
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: #fff; -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: #fff;  -webkit-transition: background-color 43200s ease-in-out 0s; transition: background-color 43200s ease-in-out 0s;}/*去除自动填充后默认背景色*/
a {color: inherit; outline: none; text-decoration: none; cursor:pointer;}
a:hover { color: #0051a8; }
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{ min-width:1200px;}
.w-auto{ width:100%; max-width:1200px; margin:0 auto; position: relative; z-index:2; box-sizing:border-box;}

/********* header css *********/
header { height: 80px; width: 100%; position:relative; z-index:999; box-sizing:border-box;}
header::before { content: ""; position:absolute; top:0; left:0; height:100%; width: calc(50% - 500px); background: #0051a8; }
header.scoll{ position: fixed; top:0; -webkit-box-shadow: 0px 0px 8px rgb(0 0 0 / 25%); box-shadow: 0px 0px 8px rgb(0 0 0 / 25%); -webkit-animation: 700ms 350ms; animation: 700ms 350ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: fadedown; animation-name: fadedown; background-color: #fff; border-bottom: 2px solid #263c8f; }
@-webkit-keyframes fadedown {
    from { -webkit-transform: translateY(-100%); opacity: 0; }
    to { -webkit-transform: translateY(0); opacity: 1; }
}
@keyframes fadedown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
header .w-auto,.logo,.logo a{ height:100%; }
.logo{-webkit-clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%); background: #0051a8; position:relative; z-index:3; padding-right:6em; }
.logo img{ width:auto; height:72%;}
.menuBtn{ display:none;}

/*** nav css ***/
.nav{ 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; 
-webkit-box-pack: flex-end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end;
 height:100%; background:rgb(255,255,255,1);} 
.nav > li{ height:100%; position:relative; z-index:9; }
.nav > li > 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; height:100%; padding:0 1.4em; position:relative; box-sizing:border-box; }
.nav > li > .has{ position:absolute; bottom:0; left:50%; -webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0); }
.nav > li > .has::before{content: "\f107"; font:300 125% "Awesome5"; }
.nav li .ulClass{ display:none; position:absolute; top:calc(100% - 2px); left:0; z-index:99; width:auto; height:auto; padding:8px 12px; background:#fff; border:solid 2px #ddd;}
.nav li .ulClass li{ position:relative; padding:.5em 0; white-space:nowrap; font-size:87.5%;}
.nav > li a:hover,.nav > li:hover > .has::before { color:#094;}
.nav > li.on > a,.nav > li.on > .has::before{ color:#094; font-weight:bold; }

/*** 语言 ***/
.Language {margin-left:.4em; }
.Language a { width:30px; height:30px; margin-left:.4em;}
/*** 搜索 ***/
.S-L .showBtn{ display:block; margin-left:16px; position:relative; }
.S-L .showBtn::after {content: "\f002"; font:400 140% "Awesome5"; color:#000; }
.S-L .s-Box{ position:fixed; top:0; right:0; left:0; bottom:0; width:100vw; height:100vh; visibility:hidden;}
.S-L .s-Box.show{ visibility: visible; }
.S-L .Ent{ width:96%; max-width:640px; background:#fff; padding:64px; margin:0 auto; position:relative; top:50%; z-index:-10; -webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%); border:solid 2px #263c8f; box-sizing:border-box;}
.S-L .Ent span{ display:block; font-size:30px; text-align:center; width:100%; margin-bottom:32px;}
.S-L .Ent input[type="text"]{ width: calc(100% - 40px); height: 40px; line-height: 40px; border-bottom: 1px solid #3f3f3f; }
.S-L .Ent button[type="submit"]::after {content: "\f002"; display:block; font:400 125%/40px "Awesome5"; color:#000; cursor: pointer; width:40px; height: 40px; border-bottom: 1px solid #3f3f3f;}
.close { display:block; position: absolute; top: -12px; right: -12px; width: 24px; height: 24px; background:#263c8f; border:solid 2px #263c8f; cursor:pointer;-webkit-border-radius: 100%;-moz-border-radius: 100%;-ms-border-radius: 100%;-o-border-radius: 100%;border-radius: 100%;}
.close::before, .close::after { content: ''; position: absolute; top:10px; width: 14px; height: 3px; background-color: #fff; }
.close::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); left:5px;}
.close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); right: 5px;}

/********* footer css *********/
footer { min-width:1200px; background:#1a2436; color:rgba(255,255,255,.75); font-size:87.5%; line-height:2;padding:4em 0;  box-sizing:border-box}
footer .f-link { width:25%;}
footer .f-cla  { width:30%; }
footer .f-con{ color:rgba(255,255,255,.5); width:35%}
footer .f-link li{ width:50%; color:rgba(255,255,255,.5);text-transform:Capitalize }
footer .f-cla li { width:50%; color:rgba(255,255,255,.5);text-transform:Capitalize }
footer strong{ font-size:114.258715%; color:rgba(255,255,255,.9); margin-bottom:1em; display:block;text-transform:Capitalize }
.copyright{ width:100%; min-width:1200px; background:#141d2e; font-size:87.5%; color:rgba(255,255,255,.5); padding:1em 0; }

/* 返回顶部 */
#goTop{ background:#0051a8; color:#fff; position: fixed; z-index:99; right:32px; bottom:32px; display:none; width:32px; height:32px; line-height:34px; -webkit-border-radius:2px; border-radius:2px; cursor:pointer; text-align:center;}
#goTop::before{content: "\f106"; font:400 125% "Awesome5";}
#goTop:hover{ background:#000;}

@media (min-width: 1921px) {
body{ font-size:.833333333vw; }
header { height: 4.16666667vw; }
.w-auto{ width:100%; max-width: 62.5vw;}
header:before { width: calc(50% - 31.25vw);}
.Language a { width:1.5625vw; height:1.5625vw; }
#goTop{ right:1.66666vw; bottom:1.66666vw; width:1.66666vw; height:1.66666vw; line-height:1.66666vw;  }
}

@media (max-width: 1200px) {
.w-auto{ padding:0 16px;}
.logo { padding-right:3em;}
.nav > li > a{padding: 0 1em;}
}


/********* index css *********/
.button-prev,.button-next{ 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; 
cursor: pointer; outline:none;}
.button-prev::before{content: "\f104"; font:100 100% "Awesome5";}
.button-next::before{content: "\f105"; font:100 100% "Awesome5";}

.banner { width:100%; position:relative; }
.banner .swiper-wrapper,.banner .swiper-slide { width:100%; position:relative; background:#fff;}
.banner .swiper-slide::after { content: ""; display: block; padding-bottom: 36.45833333%;}
.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 .button-prev,.banner .button-next{ position: absolute; top:45%; z-index:3; color:#fff;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%); padding:.35em .6em; border:solid 1px #fff; -webkit-border-radius: 50%; border-radius: 50%; font-size:200%}
.banner .button-prev{ left:1vw; }
.banner .button-next{ right:1vw; }
.banner .button-prev:hover,.banner .button-next:hover{ background:#0051a8;border:solid 1px #0051a8;}
.banner .swiper-pagination-bullet{ height: 2px; width: 80px; background-color: rgb(255,255,255,.75); border-radius: 0; }
.banner .swiper-pagination-bullet::after { content: ""; display:block; height: 2px; width: 0; }
.banner .swiper-pagination-bullet-active::after {content: ""; width: 100%; background-color: #0051a8; -webkit-animation: progressbar linear 4.5s 1 forwards; animation: progressbar linear 4.5s 1 forwards; -webkit-transition: width 4.5s ease-out; transition: width 4.5s ease-out;}
@keyframes progressbar {
from { width: 0; }
to { width: 100%; }
}

/*** index public css ***/ 
.section{ padding:4em 0; position:relative; box-sizing:border-box;}
.sec-tit{ width:100%; text-align: center; margin-bottom:32px; position:relative; overflow: hidden; }
.sec-tit h2{ font:bold 300% "Times New Roman", Times, serif; color:#0051a8; position:relative; padding:.75em 0 .4em 0;text-transform:Uppercase; display:inline-block;}
.sec-tit h2::after {content:''; width:1em; height:4px; background:#0051a8; position:absolute; bottom:0; left:calc(50% - .5em);}
.sec-tit em{  color: rgb(0,0,0,.15); position: absolute; top:0; left:50%; z-index:-1; text-transform:Uppercase;-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0); }
.more { position: relative; margin-top:2em; text-align:center; text-transform: uppercase; }
.more a{ display:inline-block; font-size:87.5%; position: relative; background: #0051a8; color:#fff; padding: .5em 2em; -webkit-border-radius: 2px; border-radius: 2px; }
.more a span{ position: relative; z-index:2;}
.more a::after {content:""; position:absolute; top: 0; right:0; width: 0; height:100%; position: absolute; background:#094; box-sizing: border-box;-webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -webkit-border-radius: 2px; border-radius: 2px;}
.more a:hover::after { width: 100%; left: 0;  }

/*** sec1 产品 ***/
.iPro-lit { width:100%; position:relative; margin-top:-32px; } 
.iPro-lit li { width: calc(25% - 24px); margin:32px 32px 0 0; position:relative; background:#f0f0f0; border:solid 1px #f0f0f0; text-align:center; overflow:hidden; box-sizing:border-box;-webkit-border-radius: 4px;border-radius: 4px;} 
.iPro-lit li:nth-child(4n) { margin-right:0}
.iPro-lit li .pic { width:100%; position:relative;} 
.iPro-lit li .pic::after { content: ""; display: block; padding-bottom: 100%; }
.iPro-lit li .pic img { position: absolute; top: 0;bottom: 0;left: 0;right: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; padding:.25em; box-sizing:border-box; overflow:hidden;}
.iPro-lit li .tit { font-size:87.5%; line-height:2.5; margin-top:-.25em; position:relative; z-index:3; text-transform:Capitalize; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1;line-clamp: 1; -webkit-box-orient:vertical; }
.iPro-lit li:hover { background:#0051a8; border:solid 1px #0051a8; }
.iPro-lit li:hover .pic{ -webkit-transform:scale(1.05,1.05);-ms-transform:scale(1.05,1.05);-o-transform:scale(1.05,1.05);transform:scale(1.05,1.05);-webkit-transition:all 1s;-o-transition:all 1s;transition:all 1s;}
.iPro-lit li:hover .tit{ background:#0051a8; color:#fff; -webkit-transition: .5s all; -o-transition: .5s all; -moz-transition: 1s all; -ms-transition: .5s all; transition: .5s all; }

/*** sec2 简介 ***/
.sec2::after{ content: ""; position:absolute; top:0; right:0; bottom:0; width:100%; height:100%; background:url(../images/bg2.jpg) no-repeat center center fixed; background-size: cover; }
.sec2 .L{ width:45%; position:relative; z-index:2; box-sizing:border-box; }
.sec2 .R{ width:50%; position:relative; z-index:2; box-sizing:border-box; background: rgb(0,81,168,.5); padding:3em; -webkit-border-radius: 4px;border-radius: 4px;}
.sec2 .L h2{ font-size:162.5%; font-weight:bold; color:#fff;text-transform:Uppercase}
.sec2 .L li{ width:45%; margin:1em 0; padding: 1em .5em; text-align:center; background: rgb(0,0,0,.25); color:#fff; -webkit-border-radius: 4px;border-radius: 4px; box-sizing:border-box;}
.sec2 .L li i{ display:block; font-size:300%; margin-bottom:.25em;}
.sec2 .R h2{ font-size:162.5%; font-weight:bold; color:#fff; position:relative; display:block; margin-bottom:1.5em; text-transform:Capitalize}
.sec2 .R h2::after { content: ""; display:block; width:4em; height:4px; background:#0051a8; margin-top:.5em; }
.sec2 .R .txt{ font-size:87.5%; line-height:2; color:#fff; position:relative; z-index:2; }
.sec2 .more { text-align:left;}

/*** sec3 新闻 ***/
.sec3 { background:url('../images/bg4.jpg') no-repeat center bottom; background-size: cover;}
.sec3 .button-prev,.sec3 .button-next{ position: absolute; top:50%; z-index:3; color:#0051a8; -webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%); background:#fff; border:solid 1px #0051a8; font-size:200%; }
.sec3 .button-prev{ left:0; padding:.25em .2em .25em 0; -webkit-border-radius: 0 400px 400px 0; border-radius: 0 400px 400px 0; border-left: 0; -webkit-box-shadow: 4px 0 2px rgb(0 0 0 / 50%); box-shadow: 4px 0 2px rgb(0 0 0 / 50%); }
.sec3 .button-next{ right:0; padding:.25em 0 .25em .2em; -webkit-border-radius: 400px 0 0 400px; border-radius: 400px 0 0 400px; border-right: 0;-webkit-box-shadow:  -4px 0 2px rgb(0 0 0 / 50%); box-shadow: -4px 0 2px rgb(0 0 0 / 50%); }
.sec3 .button-prev:hover,.sec3 .button-next:hover{ background:#0051a8; color:#fff; border:solid 1px #0051a8;}
.sec3 li { height:auto; position:relative; background:#fff; box-sizing:border-box;}
.sec3 li .pic { width:100%; position:relative}
.sec3 li .pic::after {content: ""; display: block; padding-bottom: 66.66666%;}
.sec3 li .pic img { position:absolute; top: 0;bottom: 0;left: 0;right: 0;width: 100%; height: 100%; object-fit: cover; object-position: center;}
.sec3 li .txtbox{ color:#666; padding: 2em; box-sizing:border-box; }
.sec3 li .tit{ color:#000; margin:.5em 0 1em 0; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1; -webkit-box-orient: vertical;}
.sec3 li .txt{ border-top:solid 1px #ddd; padding-top:1em; font-size:87.5%; line-height:1.8; height:4.2vw; min-height:76px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;}
.sec3 li .time{ font:87.5%  Arial, Helvetica, sans-serif; color:#999; position:relative; margin-top:1em;}
.sec3 li .time span{ position:absolute; right:0; color:#0051a8;}
.sec3 li .time span:hover{ color:#28a7e1;}


/********* page css *********/
/*** page public css ***/
.mainBox{ width:100%; background:url('../images/bar1.jpg') no-repeat center top; background-size:100%; position:relative; }
.mainBox.a2{ background-image:url('../images/bar2.jpg'); }
.mainBox.a3{ background-image:url('../images/bar3.jpg'); }
.mainBox.a4{ background-image:url('../images/bar4.jpg'); background-position: center -120px; }
.mainBox.a5{ background-image:url('../images/bar5.jpg'); }
.bar::after { content: ""; display: block; padding-bottom: 15%;}
.main{ width:100%; max-width:calc(1200px + 4em); background:#fff;margin:0 auto; padding:4em; padding-top:0; -webkit-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; box-sizing: border-box;}
.bar::after { content: ""; display: block; padding-bottom: 15%;}
.bar .text{  color:#fff; line-height:1.2; text-align:center; }
.bar .text .en{ font-size:400%; font-weight:bold; font-family: "Times New Roman", Times, serif; text-transform:Uppercase}
.bar .text .cn{ font-size:300%; font-weight:bold;}
.crumbs{ border-bottom:1px solid #f3f3f3; padding:1em 0; margin-bottom:3em; position:relative; font-size:87.5%; color:#808080;text-transform:Capitalize}
.crumbs::before{content: "\f015"; font:125% "FontAwesome"; color:#0051a8; vertical-align:-1px; margin-right:.5em;}
.Class{ background:#f0f0f0; padding:.75em; margin-bottom:2em; -webkit-border-radius: 4px; border-radius: 4px; box-sizing:border-box;}
.Class a{ display:block; padding:.25em .5em; margin:0 .5em; position:relative; z-index:2;text-transform:Capitalize; -webkit-border-radius: 2px; border-radius:2px; -webkit-transition: 0.5s ease 0s; transition: 0.5s ease 0s; }
.Class a::after {content:""; position:absolute; top: 0; right:0; width: 0; height:100%; position: absolute; z-index:-2; background:#0051a8; box-sizing: border-box; -webkit-transition: 0.5s ease 0s; transition: 0.5s ease 0s; -webkit-border-radius: 2px; border-radius:2px;}
.Class a:hover::after, .Class a.on::after { width: 100%; left: 0;}
.Class a.on,.Class a:hover{ color:#fff;}
.detail{ line-height:2; text-indent: 2em;}
.detail p{ padding:.5em 0;}
/*分页*/
.pagination { padding:1em 0; margin-top:1em; text-align: center; width: 100%; font-size: 87.5%; }
.pagination a { display: inline-block; margin-right: .666em; padding:.25em .75em; border: 1px #cccccc solid; color: #808080; line-height: normal; }
.pagination a:hover { color: #0051a8; border: 1px #0051a8 solid; }
.pagination .cur { border: none; background: #094; color: #fff; border: 1px solid #0051a8; }
.pagination p { display: inline-block; padding:.25em .4em; color: #bbb; border: 1px #ccc solid; background: #fcfcfc; margin-right: 8px; cursor:pointer; line-height: normal;}

/*** about css ***/
.about .text{ line-height:2; text-indent: 2em;}
.about .text p{ padding:1em 0;}

/*** products css ***/
.Pro-lit { width:100%; position:relative; margin-top:-32px; } 
.Pro-lit li { width: calc(25% - 24px); margin:32px 32px 0 0; position:relative; background:#f0f0f0; border:solid 1px #f0f0f0; text-align:center; overflow:hidden; box-sizing:border-box;-webkit-border-radius: 4px;border-radius: 4px;} 
.Pro-lit li:nth-child(4n) { margin-right:0}
.Pro-lit li .pic { width:100%; position:relative;} 
.Pro-lit li .pic::after { content: ""; display: block; padding-bottom: 100%; }
.Pro-lit li .pic img { position: absolute; top: 0;bottom: 0;left: 0;right: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; padding:.25em; box-sizing:border-box; overflow:hidden;}
.Pro-lit li .tit { font-size:87.5%; line-height:2.5; margin-top:-.25em; position:relative; z-index:3; text-transform:Capitalize; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1;line-clamp: 1; -webkit-box-orient:vertical; }
.Pro-lit li:hover { background:#0051a8; border:solid 1px #0051a8; }
.Pro-lit li:hover .pic{ -webkit-transform:scale(1.05,1.05);-ms-transform:scale(1.05,1.05);-o-transform:scale(1.05,1.05);transform:scale(1.05,1.05);-webkit-transition:all 1s;-o-transition:all 1s;transition:all 1s;}
.Pro-lit li:hover .tit{ background:#0051a8; color:#fff; -webkit-transition: .5s all; -o-transition: .5s all; -moz-transition: 1s all; -ms-transition: .5s all; transition: .5s all; }

/*** proShow css ***/
.proShow h1{ text-align:center; border-bottom:dashed 1px #888; padding-bottom:1em; margin-bottom:1em}
.upper { width:50%; margin:0 auto; }
.upper .gallery-top { width: 80%; }
.upper .gallery-thumbs { width: 20%; height: 454px; }
.gallery-thumbs .swiper-slide { width: 100%; position:relative; background:#000; cursor: pointer; border:solid 1px #eee; box-sizing: border-box; overflow:hidden;}
.upper .swiper-slide::after { content: ""; display: block; padding-bottom: 100%; }
.upper .swiper-slide img { position: absolute; top: 0;bottom: 0;left: 0;right: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; box-sizing:border-box; overflow:hidden;}
.gallery-thumbs .swiper-slide img{ opacity: .5; }
.gallery-thumbs .swiper-slide-thumb-active img{ opacity: 1; }
.gallery-thumbs .swiper-slide-thumb-active { border: solid 2px #0051a8; }
.gallery-top .button-prev,.gallery-top .button-next{ position: absolute; top:50%; z-index:3; color:#0051a8; -webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%); background:rgb(255,255,255,.75); border:solid 1px #0051a8; font-size:200%; }
.gallery-top .button-prev{ left:0; padding:.2em .2em .2em 0; -webkit-border-radius: 0 400px 400px 0; border-radius: 0 400px 400px 0; border-left: 0; -webkit-box-shadow: 4px 0 2px rgb(0 0 0 / 50%); box-shadow: 4px 0 2px rgb(0 0 0 / 50%); }
.gallery-top .button-next{ right:0; padding:.2em 0 .2em .2em; -webkit-border-radius: 400px 0 0 400px; border-radius: 400px 0 0 400px; border-right: 0;-webkit-box-shadow:  -4px 0 2px rgb(0 0 0 / 50%); box-shadow: -4px 0 2px rgb(0 0 0 / 50%); }
.gallery-thumbs .button-prev::before{content: "\f106"; font:100 100%/.65 "Awesome5";}
.gallery-thumbs .button-next::before{content: "\f107"; font:100 100%/.65 "Awesome5";}
.gallery-thumbs .button-prev,.gallery-thumbs .button-next{ position: absolute; left:50%; z-index:3; color:#0051a8; -webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0); background: rgb(255,255,255,.5); border:solid 1px #0051a8; font-size:200%; padding:0 .3em;}
.gallery-thumbs .button-prev{ top:0; -webkit-border-radius: 0 0 400px 400px; border-radius: 0 0 400px 400px; border-top: 0; -webkit-box-shadow: 0 2px 2px rgb(0 0 0 / 50%); box-shadow: 0 2px 2px rgb(0 0 0 / 50%); }
.gallery-thumbs .button-next{ bottom:0; -webkit-border-radius: 400px 400px 0 0; border-radius: 400px 400px 0 0; border-bottom: 0; -webkit-box-shadow: 0 -2px 2px rgb(0 0 0 / 50%); box-shadow: 0 -2px 2px rgb(0 0 0 / 50%); }
.upper .button-prev:hover,.upper .button-next:hover{ background:#0051a8; color:#fff; border:solid 1px #0051a8;}
.pro-detail { margin-top:2em;}
.pro-detail .det-tit{ background:#e5e5e5; margin:2em 0; border-bottom:solid 1px #0051a8;}
.pro-detail .det-tit span{ display:inline-block; padding:.5em 1.5em;  background:#0051a8; color:#fff; font-weight: bold;text-transform:Capitalize;}
.pro-detail table { border:2px solid #9c9c9c; border-top:1px solid #9c9c9c; border-right:1px solid #9c9c9c; font-size:87.5%;}
.pro-detail table th,.pro-detail table td{ border:1px solid #9c9c9c; border-left:none; border-bottom:none; text-align:center; padding:4px;}

/*** 指向 ***/
.guide{ width:100%; font-size:87.5%; margin-top:2em; padding:1em; background:#f7f7f7; box-sizing:border-box; }
.guide span{ width:calc((100% - 6em) / 2); color:#666;text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1; -webkit-box-orient: vertical;}
.guide span:nth-child(2) { width:6em; text-align:center; }
.guide span:last-child { text-align:right; }
.guide span a{ color:#333}
.guide span a:hover{ color:#094; }

/*** 相关 ***/
.related{ width:100%; margin-top:2em; padding:1em; background:#f7f7f7; box-sizing:border-box; }
.related .rel-tit{ font-size:112.5%;text-transform:Capitalize;}
.related .Rlist li{ width:calc(50% - 1em); margin-top:1em; padding-bottom:.75em; border-bottom:1px solid #dbdbdb;}
.related .Rlist li .tit{ font-size:87.5%; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1; -webkit-box-orient: vertical; box-sizing:border-box; }
.related .Rlist2 li{ width: calc(25% - .75em); margin:1em 1em 0 0; position:relative; border:solid 1px #d2d2d2; text-align:center; box-sizing:border-box;} 
.related .Rlist2 li:nth-child(4n) { margin-right:0}
.related .Rlist2 li .pic {width:100%; position:relative;} 
.related .Rlist2 li .pic:after { content: ""; display: block; padding-bottom: 100%;}
.related .Rlist2 li .pic img { position: absolute; top: 0;bottom: 0;left: 0;right: 0;width: 100%; height: 100%; object-fit: cover; object-position: center;}
.related .Rlist2 li .txt{ font-size:87.5%; margin:.5em 0; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient:vertical;}
.related .Rlist2 li:hover{border:solid 2px #0051a8; }

/*** news css ***/
.News-list, .News-list li{ width:100%;}
.News-list li{ border-bottom:solid 1px #ddd; padding:1em 0;}
.News-list li a{ 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; 
-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; } 
.News-list li .pic { width:20%; position:relative}
.News-list li .pic::after {content: ""; display: block; padding-bottom: 66.66666%;}
.News-list li .pic img { position:absolute; top: 0;bottom: 0;left: 0;right: 0;width: 100%; height: 100%; object-fit: cover; object-position: center;}
.News-list li .text{ width:60%; color:#666; box-sizing:border-box; }
.News-list li .tit{ color:#000; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;}
.News-list li .txt{ font-size:87.5%; line-height:1.8; height:4.2vw; min-height:76px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;}
.News-list li .time{ font:87.5%  Arial, Helvetica, sans-serif; color:#999; position:relative; border:solid 1px #dbdbdb; padding:.5em .75em;}
.News-list li .time b{ display:block; font-size:300%;}
.News-list li a:hover .text,.News-list li a:hover .tit{ color:#094; }

/*** newShow css ***/
.newShow h1{ text-align:center; border-bottom:dashed 1px #888; padding-bottom:1em; }
.newShow .tag{ font-size:87.5%; color:#888; text-align:center; margin-top:.5em;}
.newShow .tag span{ margin:0 1em;}
.newShow .detail { margin-top:2em;}

/*** message css ***/
.message .form span{ display:block; font-size:87.5%; color:#888}
.message .form form{ width:75%; margin:0 auto; }
.message .form input[type="text"]{ width: 100%; font-size:100%; color: #888; margin-top:1em; padding:1em .5em; border: 1px solid #ddd; box-sizing:border-box; }
.message .form textarea{ width: 100%; margin-top:1em;  border: 1px solid #ddd; resize: vertical; padding:.5em; font: normal 100% 'PingFang SC', 'Microsoft YaHei', 'Tahoma', 'Arial', 'sans-serif'; color: #888; box-sizing:border-box; }
.message .form input[type="submit"]{ font-size:100%; padding: 1em 2em; margin-top:1em; background: #094; color: #fff; border: none; transition: 0.5s all; cursor:pointer;}

/*** contact css  ***/
.contact .text{ position:relative; z-index:2; padding:0 1em; box-sizing:border-box;}
.contact .text p{ width: 48%; background: #fff; padding:2em; margin-bottom:1em; border: 1px solid #eee; font-size:112.5%; color:#000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; -webkit-box-shadow: 0 0 10px #ccc; -moz-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc;}
.contact .text p:nth-child(1){ width:100%}
.contact .text p::before{content: "\f3c5"; font:300 150% "Awesome5"; color:#094; margin-right:.5em; vertical-align:middle}
.contact .text p:nth-child(1)::before{content: "\f3c5"; }
.contact .text p:nth-child(2)::before{content: "\f3cd"; }
.contact .text p:nth-child(3)::before{content: "\f007"; }
.contact #allmap{ position:relative; margin-top:2em;}
.contact #allmap img{ width:auto; max-width:inherit;}

@media (min-width: 1921px){
.main { width: 100%; max-width: calc(62.5vw + 4em);}
.upper .gallery-thumbs { height: 23.645833333vw; }
}

@media (max-width: 1280px) {
.main{ max-width:1200px;}
}

@media (max-width: 1200px) {
.main{ max-width:1168px;}
}