@charset "utf-8";
@import url('');
* {
  outline: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%
}
body {
  padding: 0;
  margin: 0 auto;
  font-size: 14px;
  color: #666;
  background: #fff;
  font-family: arial, sans-serif;
  -webkit-text-size-adjust: none;
  /*取出点击出现半透明的灰色背景*/
  -webkit-tap-highlight: rgba(0, 0, 0, 0);
  /*控制内容的可选择性*/
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
input[type="button"], input[type="submit"], input[type="reset"] {
  -webkit-appearance: none;
}
ul, li, form, dl, dt, dd, div, ol, figure, article, nav, menu, aside, pre {
  padding: 0;
  margin: 0;
}
.ul,.ol, .ul li ,.ol li{
  list-style: none;
}
table, table td {
  border-collapse: collapse;
}
table {
  border-spacing: 0;
}
table td, select, input, textarea {
  font-size: 14px;
}
select, input, textarea {
  border-radius: 0;
  -webkit-border-radius: 0;
}
select, input, textarea, pre {
  font-family: arial, sans-serif;
}
img {
  border: none;
  max-width: 100%;
  vertical-align: middle;
}
a {
  color: #333;
  text-decoration: none;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 去掉链接触摸高亮 */
}
a:hover {
  color: var(--blue);
  text-decoration: none;
}
a:focus {
  color: #333;
  outline: none;
  -moz-outline: none;
}
a:active {
  color: #333;
}
pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  text-align: justify;
  text-justify: inter-ideograph;
}
.clear {
  clear: both;
  height: 0px;
  overflow: hidden;
  zoom: 0;
}
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
}
.dot {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.dot2, .dot3, .dot4, .dot5, .dot6 {
  display: -webkit-box;
  display: box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-box-orient: vertical;
}
.dot2 {
  -webkit-line-clamp: 2;
}
.dot3 {
  -webkit-line-clamp: 3;
}
.dot4 {
  -webkit-line-clamp: 4;
}
.dot5 {
  -webkit-line-clamp: 5;
}
.dot6 {
  -webkit-line-clamp: 6;
}
.ytable {
  display: table;
  width: 100%;
}
.ytable-fixed {
  table-layout: fixed;
}
.ytable-cell {
  display: table-cell;
  vertical-align: middle;
}
@media (max-width:1024px) {
  .ytable.xy,
  .ytable.xy > .ytable-cell{display: block;}
}
@media (min-width:768px) and (max-width:1024px){
  .ytable-cell {
    display: table-cell;
    vertical-align: top;
  }
}
@media (max-width:768px){
  .ytable-cell {
    vertical-align: middle;
  }
}
.Ispic {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
:after, :before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}
.nM {
  margin: 0;
}
.nP {
  padding: 0;
}
select.select-css {
	border: solid 1px #000;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
    background-repeat:  no-repeat;
    background-position:  98% center;
    background-color:  transparent;
	padding-right: 20px;
    padding-left: 10px;
}

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select.select-css::-ms-expand {
display: none;
}
/**初始 End**/
.w22, .w75 {
  padding-bottom: 4%;
}
@media(min-width:1025px) {
  .fl {
    float: left;
  }
  .fr {
    float: right;
  }
  .w22 {
    width: 22%;
  }
  .w75 {
    width: 75%;
  }
}
.img-block{
    display: block; 
    width: 100%;
}
/*↑↑↑如修改栏目左右结构宽度比例 请不要修改这里的  在style.css 加上修改*/
/*用于图片变黑白*/
.grayscale{filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale");-webkit-filter:grayscale(1);filter:grayscale(1);filter:gray}.grayscale.grayscale-fade{transition:filter .5s;}@media screen and (-webkit-min-device-pixel-ratio:0){.grayscale.grayscale-fade{-webkit-transition:-webkit-filter .5s;transition:-webkit-filter .5s;}}.grayscale.grayscale-fade:hover,.grayscale.grayscale-off{-webkit-filter:grayscale(0);filter:grayscale(0)}.grayscale.grayscale-replaced{-webkit-filter:none;filter:none}.grayscale.grayscale-replaced>svg{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:0}.flipInY .grayscale.grayscale-replaced>svg {opacity:1;}.grayscale.grayscale-replaced.grayscale-fade:hover>svg,.grayscale.grayscale-replaced.grayscale-off>svg{opacity:0}
/**页面框架 End**/
.auto {
  margin: 0 auto;
}
.w_96{width: 96%;}
.w_86{width: 94%;}
@media (min-width:1025px) {
.w_86{width: 86%;} 
}
.auto_1680 { max-width: 1680px; width: 90%;}
.auto_1440 { max-width: 1440px; width: 90%;}
.auto_1280 { max-width: 1280px; width: 90%;}
.auto_1200 { max-width: 1200px; width: 90%;}
.auto_1180 { max-width: 1180px; width: 90%;}
.auto_1150 { max-width: 1150px; width: 90%;}
.auto_1100 { max-width: 1100px; width: 90%;}
.auto_1050 { max-width: 1050px; width: 90%;}
.auto_1000 { max-width: 1000px; width: 90%;}
.auto_950 { max-width: 950px; width: 90%;}
/*by 20201020*/

/*******************************
open-search
********************************/
.open-search{cursor: pointer;}
.open-search[rel="absolute"]{position: absolute; top: 50%;}
.open-search[rel="relative"]{position: relative;}
.open-search.on{background: none!important;}
.open-search.on:before,
.open-search.on:after{position: absolute; content: ''; width: 100%; left:0; height:2px; top: 50%; margin-top: -1.5px;background: #fff;transform: rotate(45deg);-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);}
.open-search.on:after{transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);}

.top-search{position: relative;display: none;padding-right: 50px;}
.top-search[rel="absolute"]{position: absolute; top: 100%; right: 0; z-index: 100; width: 100%;max-width: 320px;}
.top-search .text{width: 100%; height: 44px; line-height: 44px; border: 0;background: #fff; padding: 0 10px;color: #999;}
.top-search .text.focus{color: #333;}
.top-search .btn{position: absolute; right: 0; top: 0; height: 100%; width: 50px;background-repeat: no-repeat;background-position: center center;}

/*******************************
open-menu
********************************/
@media(max-width:1024px){
body.menu-show{overflow: hidden;}

.open-menu{z-index: 10; width: 40px; height: 40px;}
.open-menu[rel="relative"]{position: relative;}
.open-menu[rel="absolute"]{position: absolute; top: 50%; transform: translateY(-50%);}
.open-menu i{position: absolute; width: 100%; height: 3px; background:#003399; left: 0; top:0; bottom: 0;margin: auto; transition: 0.3s;}
.open-menu.on i:nth-child(2){opacity: 0;}
.open-menu.on i:nth-child(1){transform: rotate(-45deg);}
.open-menu.on i:nth-child(3){transform: rotate(45deg);}
}

/*************************************
whir_menu.2.0
**************************************/
@media(min-width:1025px){
.top-sub{position: absolute; top:99%; z-index: 100;}
}
@media(max-width:1024px){
.has-multi aside,
.has-sub > span{position: relative;padding-right: 40px; overflow: hidden;}
.has-multi aside .op-multi,
.has-sub span .op{position: absolute; width: 40px; height: 100%; height: 100%; transition: 0.3s; right: 0; top: 0;}
.has-multi aside .op-multi.click,
.has-sub span .op.click{transform: rotate(45deg);}
.has-multi aside .op-multi:before,
.has-multi aside .op-multi:after,
.has-sub span .op:before,
.has-sub span .op:after{position: absolute; content: ''; width: 12px; height: 2px;background: #fff; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.has-multi aside .op-multi:after,
.has-sub span .op:after{ width: 2px; height: 12px;}
.has-multi aside .op-multi:before,
.has-multi aside .op-multi:after{background-color: #666;}
}

[rel="li-relative"] li{position: relative; z-index: 100;}
[type="Vertical"] .sub{display: none;}
/* [type="Vertical"] .sub dl{padding: 10px;}
[type="Vertical"] .sub dt{line-height: 24px; padding: 5px 0; text-align: center;} */
@media(min-width:1025px){
[type="Vertical"] .sub dl{background: rgba(255,255,255,0.85);}
[rel="li-relative"] .sub{left: 50%; width: 140px; margin-left: -70px;}
}

[type="Vertical-hierarchy"] .hierarchy{display: none;}
@media(min-width:1025px){
[type="Vertical-hierarchy"] .has-multi{position: relative;}
[type="Vertical-hierarchy"] .hierarchy{ position: absolute; left: 100%;top: 0;z-index: 20; width: 100%;background-color: rgba(0,0,0,0.7); padding: 10px 0;}
[type="Vertical-hierarchy"] .hierarchy[data-num="2"]{background-color: rgba(0,0,0,0.5);}
}

/*滚屏快捷动画*/
.whir-fade-left{transform: translate(-30px,0); }
.whir-fade-right{transform: translate(30px,0);}
.whir-fade-up{transform: translate(0,30px);}
.whir-fade-down{transform: translate(0,-30px);}
.whir-zoom-in{transform: scale(0);}
[class*=whir-]{opacity: 0;transition-property: all;transition-duration: 1.2s;}
.active [class*=whir-]{opacity: 1;}
.active [class*=whir-fade]{transform: translate(0,0);}
.active [class*=whir-zoom]{transform: scale(1);}

/*局部根元素大小*/
.root-100{font-size: 100px;}
.root-sz-16{font-size: 0.16em;}
.root-w-1040 .auto{max-width: 1040px;}
.root-w-1040 .auto{max-width: 1080px;}
.root-w-1280 .auto{max-width: 1280px;}
.root-w-1400 .auto{max-width: 1400px;}
.root-w-1440 .auto{max-width: 1440px;}
.root-w-1600 .auto{max-width: 1600px;}
.root-w-1560 .auto{max-width: 1560px;}
.root-w-1500 .auto{max-width: 1500px;}
@media (min-width:1025px) and (max-width:1600px) {
.root-w-1600{font-size: 6.25vw;}
}
@media (min-width:1025px) and (max-width:1560px) {
.root-w-1560{font-size: 5.624vw;}
}
@media (min-width:1025px) and (max-width:1500px) {
.root-w-1500{font-size: 5.5vw;}
}
@media (min-width:1025px) and (max-width:1440px) {
.root-w-1440{font-size: 7.14285vw;}
}
@media (min-width:1025px) and (max-width:1400px) {
.root-w-1400{font-size: 7.14285vw;}
}
@media (min-width:1025px) and (max-width:1280px) {
.root-w-1280{font-size: 7.8125vw;}
}


/* @media (min-width: 1025px) and (max-width: 1280px) {
.root-sz-16{font-size: calc(16/16 * 1em);}
} */
/* @media (max-width:1024px) {
.root-sz-16{font-size: 3.5vw;}
} */



.mt-10 {  margin-top: 10px;}
.mt-20 {  margin-top: 20px;}
.mt-100 {  margin-top: 100px;}

.bg-cover,
.bg-contain {    background-position: center center;    background-repeat: no-repeat;}
.bg-cover {    background-size: cover;}


:root{
--blue: #0033a0;
--c000: #000000;
--white:#ffffff;
--black-opacity-50:rgba(0,0,0,0.5);
--ww:1920*100vw
}
@media(min-width:2120px){
:root{
--ww:2200*100vw
}
}

@media(min-width:2400px){
:root{
--ww:2800*100vw
}
}
@media(min-width:2600px){
:root{
--ww:3800*100vw
}
}
@media(max-width:1024px){
:root{
--ww:1300*100vw
}
}
@media(max-width:768px){
:root{
--ww:768*100vw
}
}

.fz-12 {  font-size: 12px;}
.fz-14 {  font-size: 14px;}
.fz-15 {  font-size: 15px;}
.fz-16 {  font-size: 16px;}
.fz-18 {  font-size: 18px;}
.fz-20 {  font-size: 20px;}
.fz-24 {  font-size: 24px;}
.fz-30 {  font-size: calc(30/var(--ww));}
.fz-32 {  font-size: calc(32/var(--ww));}
.fz-36 {  font-size: calc(36/var(--ww))}
.fz-38 {  font-size: calc(38/var(--ww))}
.fz-40 {  font-size: calc(40/var(--ww))}
.fz-42 {  font-size: calc(40/var(--ww))}
.fz-50 {  font-size: calc(50/var(--ww))}
@media(max-width:1200px){
.fz-20 {  font-size: 18px;}
.fz-24 {  font-size: 20px;}
.fz-24 {  font-size: 20px;}
}
@media(max-width:768px){
html{font-size: calc(100vw * 10 / 390);}
.fz-24 {  font-size: 18px;}
.fz-42{ font-size:3.2rem}
.fz-40{ font-size:3.2rem}
.fz-50 { font-size:3.2rem}
}

.black {  color: #000;}
.white {  color: #fff;}
.gray {  color: #8c8c8c;}
.blue {  color: #0039c8;}
.black40 {  color: #474747;}
.col-100 {  width: 100%;}
.fw-400 {  font-weight: 400;}
.fw-500 {  font-weight: 500;}

.c-blue,
.c-blue a{color: var(--blue)}
.c-black{color: var(--c000)}

.display-ib {  display: inline-block;  vertical-align: top;}

li.item h4,
li.item p{padding: 0; margin: 0;}
li.item h4{font-weight: 400}

/*视频弹窗*/
.video-box{position: fixed; left: 0;top: 0;z-index: 200;width: 100%;height: 100%;background-color: var(--black-opacity-50);}
.video-box .inner{width: 90%;max-width: 1000px;}
.video-box .inner video{display: block;width: 100%;}
.video-box iframe{width: 100%;height: 45vw}
div.close{ cursor:pointer; width:40px; height:40px; position:absolute; z-index:4; right:0.2rem; top:0.2rem;}
div.close::before,
div.close::after{ position:absolute; content:''; width:80%; left:10%; height:3px; top:50%; margin-top:-1.5px; background:var(--white); transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);}
div.close::before{ transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);}


.play-icon{position: absolute; width: 100%; height: 100%; top: 0; cursor: pointer; display: flex; justify-content: center; align-items: center}
.play-icon i{display:block; width: 60px;height:60px; background: url("../images/play.svg") no-repeat center center; border-radius: 100%; z-index: 2;position: absolute}
.play-icon i::before,
.play-icon i::after {width: 100%;height: 100%;position: absolute;left: 50%;top: 50%;content: '';border-radius: 50%;-webkit-animation: scale 2s linear infinite;margin: -50% 0 0 -50%; background:var(--white); opacity:0.3;}
.play-icon i::after {-webkit-animation-delay: .5s;}

@-webkit-keyframes scale {
  0% {-webkit-transform: scale(1); opacity: 0;}
  50% {-webkit-transform: scale(1.3); opacity: 0.2;}
  100% {-webkit-transform: scale(1.6);opacity: 0;}
}

/* flex布局 */
[class*=flex-]{display: flex;flex-wrap: wrap;flex-direction: row;}
[class*=-aic]{align-items: center;}
[class*=-aife]{align-items: flex-end;}
[class*=-aifs]{align-items: flex-start;}
[class*=-ais]{align-items: stretch;}
[class*=-jcc]{justify-content: center;}
[class*=-jcsb]{justify-content: space-between;}
[class*=-jcfe]{justify-content: flex-end;}
[class*=-jcfs]{justify-content: flex-start;}
[class*=-acsb]{align-content: space-between}
/*[class*=-row]{flex-wrap: wrap;flex-direction: row;}*/

[class*=img-] figure{position: relative; overflow: hidden}
[class*=-mid] figure{ padding-bottom: 100%; }
[class*=-mid] figure img{position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%; object-fit: cover; -o-object-fit: cover}
[class*=-zoom] figure img{
-webkit-transition: -webkit-transform 1.2s ease;
transition: -webkit-transform 1.2s ease;
transition: transform 1.2s ease;
transition: transform 1.2s ease,-webkit-transform 1.2s ease;
}
[class*=-zoom] .item:hover figure img{ -webkit-transform:scale(1.2);transform:scale(1.2)}
