@charset "utf-8";
/* CSS Document */

body{ margin:0px; padding:0px; border:0px; font-family:"Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei"; color:#333; font-size:var(--f14); width:100%; background:#f2f2f2;font-family: myFirstFont;}
a{ margin:0px; padding:0px; border:0px; text-decoration:none; color:inherit; font-size:inherit;}
a:hover{ text-decoration:none;}
*{ padding:0px; margin:0px; border:0px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-family: myFirstFont;}
/* background:rgba(0,0,0,0);filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);*/
li{ list-style:none;}
.clear{ clear:both !important; height:0px !important; width:0px !important; float:none !important; margin:0px !important; padding:0px !important; border:0px !important; line-height:0 !important; position:relative !important; }
input:focus{ outline: none;}/*去除按钮选中的高亮标签*/
textarea:focus{ outline: none;}/*去除文本框选中的高亮标签*/
button:focus{ outline: none;}/*去除按钮选中的高亮标签*/
select:focus{ outline: none;}/*去除下拉框选中的高亮标签*/
img{ max-width:100% !important; vertical-align: middle;}
div,p,table,td,ul,li,span,a,ol,input,label{ padding:0px; margin:0px; border:0px;}
textarea{ font-family:"Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei"; color:#333; font-size:var(--f14);}
input::-ms-input-placeholder{ /* Internet Explorer 10+ */ color:#4d4d4d; font-size:12px;}
input::-webkit-input-placeholder{ /* WebKit browsers */ color:#4d4d4d; font-size:12px;}
input::-moz-placeholder{ /* Mozilla Firefox 4 to 18 */  color:#4d4d4d; font-size:12px;}
input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:#4d4d4d; font-size:12px;}
.fl{ float:left;}
.fr{ float:right;}

@font-face
{
font-family: myFirstFont;
src: url('../fonts/Poppins-Regular.ttf');
}

/*黑白照片*/
.gray { 
-webkit-filter: grayscale(100%); 
   -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
     -o-filter: grayscale(100%); 
        filter: grayscale(100%); 
        filter: gray; 
}

.gray:hover { 
-webkit-filter: grayscale(0%); 
   -moz-filter: grayscale(0%); 
    -ms-filter: grayscale(0%); 
     -o-filter: grayscale(0%); 
        filter: grayscale(0%); 
        filter: gray; 
}
/*圆角5px*/
.radius5{ 
-webkit-border-radius:5px; 
   -moz-border-radius:5px; 
    -ms-border-radius:5px; 
     -o-border-radius:5px; 
        border-radius:5px; 
}
/*圆角10px*/
.radius10{ 
-webkit-border-radius:10px; 
   -moz-border-radius:10px; 
    -ms-border-radius:10px; 
     -o-border-radius:10px; 
        border-radius:10px; 
}
/*图片变大*/
.tra .imgs{
-webkit-transform: scale(1);
   -moz-transform: scale(1);
    -ms-transform: scale(1);
     -o-transform: scale(1);
           filter: scale(1);
           filter: transform;
       transition: all 0.5s ease 0s;
-webkit-transform: all 0.5s ease 0s; 
}
.tra:hover .imgs{
-webkit-transform: scale(1.15);
   -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
     -o-transform: scale(1.15);
           filter: scale(1.15);
           filter: transform;
       transition: all 0.5s ease 0s;
-webkit-transform: all 0.5s ease 0s; 
}
/*透明度50%*/
.opacity5{ filter:alpha(opacity=50);-moz-opacity:0.5; -khtml-opacity:0.5;opacity: 0.5;}

.shadow5{ 
-webkit-box-shadow:rgba(0,0,0,0.13) 5px 5px 5px; 
   -moz-box-shadow:rgba(0,0,0,0.13) 5px 5px 5px; 
    -ms-box-shadow:rgba(0,0,0,0.13) 5px 5px 5px; 
     -o-box-shadow:rgba(0,0,0,0.13) 5px 5px 5px; 
        box-shadow:rgba(0,0,0,0.13) 5px 5px 5px; 
}

.shadow10{ 
-webkit-box-shadow:rgba(0,0,0,0.13) 5px 5px 10px; 
   -moz-box-shadow:rgba(0,0,0,0.13) 5px 5px 10px; 
    -ms-box-shadow:rgba(0,0,0,0.13) 5px 5px 10px; 
     -o-box-shadow:rgba(0,0,0,0.13) 5px 5px 10px; 
        box-shadow:rgba(0,0,0,0.13) 5px 5px 10px; 
}


.moTop{ width:100%; padding:0 30px; height:60px; display:flex; align-items:center; justify-content:space-between; background:#FFFFFF; box-shadow:rgba(0,0,0,0.5) 0 0 10px;}
.moTop .moLogo{height: 45%;}
.moTop .moMenuOpen{ height: 40%;}

.moMenuBox{ width:100%; display:none; background:rgba(209, 13, 34,0.1); height:100vh; position: fixed; z-index: 999999999; top: 0;}
.moMenu{ width:60%; background:#ffffff; padding:0 20px; display:flex; flex-direction:column; align-items:center; height:100vh; position:fixed; z-index:999999; top:0; left:-60%;}

.moDropLogo{ display:inline-block; margin:30px 0;}
.moDropLogo img{ height:30px;}

#closeMoMenu{ height:20px;}

.moDrop{ width:100%; display:flex; flex-direction:column;}
.moDrop .yiji{ width:100%;}
.moDrop .yiji .yijiTitle{ width:100%; display:flex; justify-content:center; position:relative; border-bottom:var(--c2) solid 1px;}
.moDrop .yiji .yijiTitle .yijiTitleText{ display:flex; line-height:3em; text-align:center; font-size:18px; color:var(--c2);}
.moDrop .yiji .yijiTitle .yijiTitleIcon{ position:absolute; right:0px; top:50%; height:0; display:flex; align-items:center; justify-content:flex-end;}
.moDrop .yiji .yijiTitle .yijiTitleIcon img{ cursor:pointer; height:10px;}
.moDrop .yiji .yijiTitle .yijiTitleIcon img:nth-child(2){ display:none;}
.moDrop .yiji.on{}
.moDrop .yiji.on .yijiTitle .yijiTitleIcon img:nth-child(1){ display:none;}
.moDrop .yiji.on .yijiTitle .yijiTitleIcon img:nth-child(2){ display:block;}

/*.moDrop .yiji.on .erjiDrop{ display:block;} */
.erjiDrop{ width:100%; display:none;}
.moDrop .yiji.on .erjiDrop{ border-bottom:rgba(255,255,255,0.50) solid 1px;}
.erjiDrop .erji{ width:100%;}
.erjiDrop .erji .erjiTitle{ width:100%; position:relative; display:flex; align-items:center; justify-content:center;}
.erjiDrop .erji .erjiTitle .erjiTitleText{ line-height:2em; font-size:16px; color:var(--c2); display:block;}
.erjiDrop .erji .erjiTitle .erjiTitleIcon{ position:absolute; right:25px; top:50%; height:0; display:flex; align-items:center; justify-content:flex-end;}
.erjiDrop .erji .erjiTitle .erjiTitleIcon img{ cursor:pointer; width:15px;}
.erjiDrop .erji .erjiTitle .erjiTitleIcon img:nth-child(2){ display:none;}
.erjiDrop .erji.on .erjiTitle .erjiTitleIcon{}
.erjiDrop .erji.on .erjiTitle .erjiTitleIcon img:nth-child(1){ display:none;}
.erjiDrop .erji.on .erjiTitle .erjiTitleIcon img:nth-child(2){ display:block;}

/*.erji.on .sanjiDrop{ display:block;}*/
.sanjiDrop{ width:100%; display:none; border-bottom:rgba(256,256,256,0.5) solid 1px;}
.sanjiDrop a{ display:inline-block; font-size:14px; width:100%; line-height:3em; text-align:center; width:100%; background:url(../images/icon28.png) no-repeat calc(100% - 45px) 50%;}

/*#closeMoMenu{ position:absolute; width:30px; right:-40px; top:30px;}*/

.moMenuBottom{ width:100%; display:flex; justify-content:center; align-items:center;}
.moMenuBottom img{ margin:25px 10px;}

.otherBox{ width: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 21474836475; display:none; justify-content: center; align-items: center; height: 100%;}

.other{ width:80%; display:none;}

.moSearch{ align-items:center; justify-content:space-between; padding:20px 0; margin:230px auto 0 auto; background:#FFFFFF;}
.moSearch input[type='text']{ height:60px; width:100%; padding:0 15px; background:none; border-bottom:#FFFFFF solid 1px;}
.moSearch input[type='submit']{ background:url(../images/icon20.png) no-repeat 50%/60% 60%; height:60px; width:60px; flex-shrink:0;}

.moLeng{ justify-content:center; align-items:center; flex-direction: column; margin: 0 auto;}
.moLeng a{ font-size:18px; color:#FFFFFF; margin:25px 15px;}
.moLeng a.on{ color:#eb7404;}

#main{ width:100vw;}

.w1{ width:90%; margin:0 auto; max-width:var(--f1600);}

.imgs{ width:100%; height:100%; position: absolute; left:0; top:0; object-fit:cover;}

:root{
   --c1:#d0a133;
   --c2:#083458;
}

body{ padding-top:var(--f90);}

.pcTop{ width: 100%; background: url(../images/t3.png) no-repeat 50% 100%/ 100% var(--f4),#fff; padding: 0 var(--f40); display: flex; align-items: center; justify-content: space-between;    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;}

.topLeft{ display: flex; align-items: center;}

.topLogo{ display: block; margin-right: var(--f50);}
.topLogo img{ height: var(--f40);}

.topLeng{ height: var(--f90); display: flex; align-items: center; position: relative; cursor: pointer;}
.topLeng .topLengIcon{ display:flex; align-items:center; font-size:var(--f16); color:var(--c2);}
.topLeng .topLengIcon span{ margin-left:var(--f5);}
.topLeng .topLengIcon img{ width:var(--f20);}
.topLeng .topLengDown{ position: absolute; left: 50%; transform: translateX(-50%); top: 100%; display: none; box-shadow: rgba(0,0,0,0.15) 0 0 20px; z-index:999;}
.topLeng .topLengDown a{ padding: 0 var(--f35); font-size: var(--f16); line-height: var(--f50); text-align: center; width: 100%; display: block; background: #fff;}
.topLeng .topLengDown a:hover{ background: var(--c1); color: #fff;}

.topLeng:hover .topLengDown{ display: block;}

.topRight{ display: flex; align-items: center;}

.topMenu{ display: flex;}
.topMenu .topMenuItem{ margin: 0 var(--f45); display: flex; align-items: center; height: var(--f90); position: relative;}
.topMenu .topMenuItem .topMenuTitle{ font-size: var(--f16); color: #666666; line-height: 2em; position: relative; white-space:pre;}
.topMenu .topMenuItem .topMenuTitle::before{ width: 0; height: var(--f2); background: var(--c1); content: ''; display: block; transition: all ease 0.75s; position: absolute; left: 0; bottom: 0;}
.topMenu .topMenuItem.on .topMenuTitle::before{ width: 100%; }
.topMenu .topMenuItem:hover .topMenuTitle::before{ width: 100%; }

.topMenuDown1{ position: absolute; left: 50%; transform: translateX(-50%); top: 100%; display: none; box-shadow: rgba(0,0,0,0.15) 0 0 20px; z-index:999;}
.topMenuDown1 a{ padding: 0 var(--f35); font-size: var(--f16); line-height: var(--f50); text-align: center; width: 100%; display: block; background: #fff;}
.topMenuDown1 a:hover{ background: var(--c1); color: #fff;}

.topMenuItem:hover .topMenuDown1{ display: block;}

.topMenuDown2{ position: absolute; left: 50%; transform: translateX(-50%); top: 100%; display: none; box-shadow: rgba(0,0,0,0.15) 0 0 20px; align-items: stretch; z-index:999;}
.topMenuDown2 .menuDownLeft{ display: flex; flex-direction: column; background: #f2f2f2; height: auto;}
.topMenuDown2 .menuDownLeft .menuDownLeftTitle{ min-width: var(--f200); padding: 0 var(--f30); height: var(--f50); display: flex; align-items: center; justify-content: center; width: 100%;}
.topMenuDown2 .menuDownLeft .menuDownLeftTitle a{ display: block; color: #666666; font-size: var(--f16); white-space:pre;}
.topMenuDown2 .menuDownLeft .menuDownLeftTitle.on{ background: var(--c1);}
.topMenuDown2 .menuDownLeft .menuDownLeftTitle:hover{ background: var(--c1);}
.topMenuDown2 .menuDownLeft .menuDownLeftTitle.on a{ color: #fff;}
.topMenuDown2 .menuDownLeft .menuDownLeftTitle:hover a{  color: #fff;}

.menuDownRight{ background: rgba(255,255,255,0.95); min-width:var(--f920);}

.downRightItem{padding: var(--f20) var(--f30) var(--f45) var(--f30); display: none;}
.downRightItem .downRightBox{ display: flex; }
.downRightItem .downRightBox .rightItemItem{ margin: 0 var(--f30); display: flex; flex-direction: column; align-items: flex-start;}
.downRightItem .downRightBox .rightItemItem .rightItemTop{ font-size: var(--f16); color: #333; margin-bottom: 10px;}
.downRightItem .downRightBox .rightItemItem a{ color: #777777; font-size: var(--f14); line-height: 2em; display: inline-block; position: relative; white-space: pre;}
.downRightItem .downRightBox .rightItemItem a:hover{ color: var(--c1);}
.downRightItem .downRightBox .rightItemItem a::before{ width: 0; height: var(--f2); background: var(--c1); content: ''; display: block; transition: all ease 0.75s; position: absolute; left: 0; bottom: 0;}
.downRightItem .downRightBox .rightItemItem a:hover::before{ width: 100%;}

.topMenuItem:hover .topMenuDown2{ display: flex;}

.topPs{ background: var(--c1); padding: 0 var(--f25); height: var(--f45); display: flex; align-items: center; font-size: var(--f16);}
.topPs .topPsIcon{ width: var(--f20); margin-right: var(--f10);}
.topPs .topPsIcon img{ width: var(--f20);}
.topPs .topPsText{ color: #fff; white-space:pre;}


.footer{ background: #fff; padding-top: var(--f70); border-top:#e5e5e5 solid var(--f1);}

.footerNei{}

.fo1{ display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--f30);}
.fo1 .foLeft1{}
.fo1 .foLeft1 img{ width: var(--f396);}

.fo1Right{}

.fo1RightTop{ display: flex; align-items: center; justify-content: flex-end;}
.fo1RightTop a{ display: block; margin-left: var(--f30);}
.fo1RightTop a img{ width: var(--f50);}

.fo1RightBot{ margin-top: var(--f25); display: flex; align-items: center; justify-content: flex-end;}
.fo1RightBot a{ font-size: var(--f16); color: #666666; margin-left: var(--f90);}

.fo2{ border-top:#e5e5e5 solid var(--f1); padding: var(--f25) 0;}
.fo2 a{ color: #999999; font-size: var(--f12);}


.sd{ padding: var(--f45) 0; display: flex; align-items: center;}
.sd a{ display: block; margin-right: var(--f30); line-height: 45px; text-align: center; border:var(--c1) solid 1px; border-radius: var(--f5); color: #999999; font-size: var(--f16); padding: 0 var(--f30); min-width: var(--f250);}
.sd a:hover{ background: var(--c1); color: #fff;}
.sd a.on{ background: var(--c1); color: #fff;}

.sdNeirong{ padding: var(--f30); background: #fff; margin-bottom: var(--f120);}

.sdTitle{ font-size: var(--f40); padding-bottom: var(--f20); border-bottom: #efefef solid var(--f1);}

.sdContent{ padding-top: var(--f30); font-size: var(--f16); line-height: 2em;}
.sdContent b{color: var(--c1); font-size: var(--f18);}


.psSelect{ margin: var(--f45) auto; padding: var(--f30); background: #fff;}

.psSelectTop{ display: flex; align-items: center; justify-content: space-between;}

.sdTitle2{ font-size: var(--f40); padding-bottom: var(--f15); position: relative;}
.sdTitle2::before{ width: var(--f50); height: var(--f2); background: var(--c1); position: absolute; left: 0; bottom: 0; content: ''; display: block;}

.psSelectReset{ cursor: pointer;}
.psSelectReset img{ width: var(--f28);}

.psSelectBox{ padding-top: var(--f15);}

.psSelectItem{ display: flex; padding: var(--f15) 0;}

.psSelectTitle{ display: flex; align-items: center; flex-shrink: 0; margin-right: var(--f40); height: var(--f45);}
.psSelectTitle img{ width: var(--f23); margin-right: var(--f10);}
.psSelectTitle span{ font-size: var(--f16); color: #999999;}

.psSelectItemBox{ display: flex; flex-wrap: wrap;}
.psSelectItemBox a{ display: block; margin-right: var(--f20); line-height: 45px; text-align: center; border:var(--c1) solid 1px; border-radius: var(--f5); color: #999999; font-size: var(--f16); padding: 0 var(--f20); margin-right: var(--f20);}
.psSelectItemBox a:hover{ background: var(--c1); color: #fff;}
.psSelectItemBox a.on{ background: var(--c1); color: #fff;}
.psSelectItemBox a.hui{ background: #666; color: #666; pointer-events: none;}

.psSelectItemBox span{ display: block; margin-right: var(--f20); line-height: 45px; text-align: center; border:var(--c1) solid 1px; border-radius: var(--f5); color: #999999; font-size: var(--f16); padding: 0 var(--f20); margin-right: var(--f20); cursor:pointer;}
.psSelectItemBox span:hover{ background: var(--c1); color: #fff;}
.psSelectItemBox span.on{ background: var(--c1); color: #fff;}
.psSelectItemBox span.hui{ border:#666 solid 1px; color: #666; pointer-events: none;}

.proListBox{ margin-bottom: var(--f120);}

.proList{ display: grid; grid-gap: var(--f30);}

.col4{ grid-template-columns: repeat(4,1fr);}

.proItem{ position: relative; background: #fff; display: block;}

.proBg{ padding: var(--f20) var(--f30); width: 100%;}
.proBg .proTitle{ margin-bottom: var(--f20); font-size: var(--f20);}
.proBg .proImg{ width: 100%; position: relative; overflow: hidden;}
.proBg .proImg::before{ content: ''; display: block; padding-top: calc( 100% * 277 / 317);}

.proMask{ position: absolute; left: 0; top:0; background: rgba(255,255,255,0.7); padding: var(--f20) var(--f30); width: 100%; height: 100%; opacity: 0; transition: all ease 0.75s;}
.proMask .proTop{ display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--f20); border-bottom: #efefef solid var(--f1);}
.proMask .proTop .proTitle{ margin-bottom: var(--f20); font-size: var(--f20); margin-bottom: 0;}
.proMask .proTop .proArrow{}
.proMask .proTop .proArrow img{ width: var(--f20);}
.proMask .proMess{ padding: var(--f20) 0; color: #777; font-size: var(--f16); line-height: 2em; height: 13em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden;}

.proItem:hover .proMask{ opacity: 1;}


.neiBanner{ width: 100%; position: relative;}

.neiBannerZhan{}
.neiBannerZhan::before{ content: ''; display: block; padding-top: calc( 100% * 600 / 1600);}

.sus1{ margin: var(--f120) auto;}

.susBox1{ width: calc( 100% + var(--f30)); transform: translateX(calc( 0px - var(--f15))); margin-bottom: 0 !important;}

.susItem1{ margin: 0 var(--f15); position: relative; overflow: hidden;}
.susItem1 .susImg1{ width: 100%; position: relative; z-index: 1;}
.susItem1 .susImg1:before{ content: ''; display: block; padding-top: calc( 100% * 420 / 377);}
.susItem1 .susTitle1{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 10; display: flex; align-items: flex-end; padding: var(--f25); font-size: var(--f20); color: #fff; transition: all ease 0.75s;background: linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, rgba(8, 52, 88, 0.7));}
.susItem1 .susMask1{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(8,52,88,0.8); padding: var(--f20); z-index: 100; transition: all ease 0.75s; opacity: 0;}
.susItem1 .susMask1 .susMaskTitle1{ font-size: var(--f20); color: #fff; margin-bottom: var(--f20);}
.susItem1 .susMask1 .susMaskSmall1{ font-size: var(--f16); color: #dddddd; line-height: 2em;}

.susItem1:hover .susTitle1{ opacity: 0;}
.susItem1:hover .susMask1{ opacity: 1;}

.sus2{ padding: var(--f120) 0; background: #f2f2f2;}

.esg{ margin-top: var(--f25);}

.esgBox{ width: calc( 100% + var(--f30)); transform: translateX(calc( 0px - var(--f15))); margin-bottom: 0 !important;}

.esgItem{ margin: 0 var(--f15); padding: var(--f25) var(--f30); background: #fff; position: relative; cursor: pointer;    height: auto !important;}
.esgItem::before{ content: ''; display: block; width: 0; height: var(--f5); background: var(--c1); position: absolute; left: 0; bottom: 0; transition: all ease 0.75s;}
.esgItem .esgTitle{ font-size: var(--f20); margin-bottom: var(--f20);}
.esgItem .esgSmall{ font-size: var(--f16); min-height: var(--f160); line-height: 2em;}
.esgItem .esgIcon{ display: flex; flex-direction: row-reverse;}
.esgItem .esgIcon img{ width: var(--f105);}
.esgItem .esgIcon img:nth-child(1){ display: none;}

.esgItem:hover{ background: #dfdfdf;}
.esgItem:hover::before{ width: 100%;}
.esgItem:hover .esgIcon img:nth-child(2){ display: none;}
.esgItem:hover .esgIcon img:nth-child(1){ display: block;}

.sus3{ padding: var(--f120) 0;}

.sus3Top{ display: flex; justify-content: space-between; align-items: center;}

.select{ position: relative; cursor: pointer;}
.select .selectTitle{ min-width: var(--f240); height: var(--f54); border:var(--c1) solid var(--f1); padding: 0 var(--f50) 0 var(--f20); background: url(../images/pr8.svg) no-repeat calc( 100% - var(--f20)) 50%/var(--f18) auto; font-size: var(--f16); line-height: var(--f52); color: var(--c1);}
.select .selectDown{ width: 100%; position: absolute; left: 0; top: 100%; display: none; flex-direction: column; border:var(--c1) solid var(--f1); z-index: 999; max-height: var(--f200); overflow-y: auto;}
.select .selectDown::-webkit-scrollbar { /*滚动条整体样式*/ width:4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px;}
.select .selectDown::-webkit-scrollbar-thumb { border-radius: 40px; background: var(--c1);}
.select .selectDown::-webkit-scrollbar-track { border-radius: 40px; background: #fff;}
.select .selectDown li{ width: 100%;}
.select .selectDown li:hover{ width: 100%; background: var(--c1); color: #fff;}
.select .selectDown li a{ width: 100%; height: 100%; display: block; text-align: center; line-height: var(--f50); color: var(--c1); font-size: var(--f16); background: #fff;}
.select .selectDown li a:hover{ background: var(--c1); color: #fff;}
.select .selectDown li div{ width: 100%; height: 100%; display: block; line-height: var(--f50); font-size: var(--f16); background: #fff; display:flex; align-items:center;}
.select .selectDown li div span{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; width:85%; margin-left:5px; }

.select:hover .selectTitle{ background: url(../images/pr9.svg) no-repeat calc( 100% - var(--f20)) 50%/var(--f18) auto,var(--c1); color: #fff;}
.select:hover .selectDown{ display: flex;}

.SpecificationsSelect .Specifications{ height: 0; position:relative;  opacity:0; pointer-events:none; display: flex; overflow: visible;}
.SpecificationsSelect .Specifications .SpecificationsBox{box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px;
    max-height: var(--f242);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;}
.SpecificationsSelect .Specifications .SpecificationsBox::-webkit-scrollbar { /*滚动条整体样式*/ width:4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px;}
.SpecificationsSelect .Specifications .SpecificationsBox::-webkit-scrollbar-thumb { border-radius: 40px; background: var(--c1);}
.SpecificationsSelect .Specifications .SpecificationsBox::-webkit-scrollbar-track { border-radius: 40px; background: #fff;}
.SpecificationsSelect:hover .Specifications{ opacity:1; pointer-events:all;}
.SpecificationsSelect .Specifications li{ flex-shrink:0; font-size:var(--f16); padding-right:var(--f50) !important;}

.related{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap:var(--f30); margin-top: var(--f30); margin-bottom: var(--f50);}

.relatedItem{ display: block; position: relative; overflow: hidden;}
.relatedItem .relatedImg{ width: 100%; position: relative; overflow: hidden;}
.relatedItem .relatedImg::before{ content: ''; display: block; padding-top: calc( 100% * 470 / 377);}
.relatedItem .relatedText{ position: absolute; left: 0; width: calc( 100% * 320 / 375); padding:var(--f20); background: rgba(255,255,255,0.90); bottom: var(--f60);}
.relatedItem .relatedText .relatedTitle{ font-size: var(--f20);}
.relatedItem .relatedText .relatedSmall{ font-size: var(--f16);}

.pages{ display: flex; align-items: center; justify-content: center;}
.pages li{ margin: 0 var(--f10);}
.pages li a{ min-width: var(--f50); line-height: var(--f50); height: var(--f50); text-align: center; border:var(--c1) solid var(--f1); font-size: var(--f16); color: var(--c1); padding: 0 var(--f15); display: flex; justify-content: center; align-items: center;}
.pages li.on a{ background: var(--c1); color: #fff;}
.pages li:hover a{ background: var(--c1); color: #fff;}

.pages li img{ width: var(--f12);}
.pages li img:nth-child(2){ display: none;}
.pages li.on img:nth-child(1){ display: none;}
.pages li.on img:nth-child(2){ display: block;}
.pages li:hover img:nth-child(1){ display: none;}
.pages li:hover img:nth-child(2){ display: block;}

.sus3 .select .selectDown li{ background:#fff; padding:0 var(--f15); line-height:2em;}
.sus3 .select .selectDown li:hover{ background:var(--c1);}

.tec1{ padding: var(--f120) 0; background: #fff; z-index: 9; position: relative;}

.tec11{ display: flex; margin-bottom: var(--f60); align-items: flex-start;}
.tec11 .sdTitle2{ width: calc( 100% * 570 / 1600); flex-shrink: 0;}
.tec11 .tec111{ line-height: 2em; color: #777777;}

.tec12{}

.tecBox12{ width: calc( 100% + var(--f30)); transform: translateX(calc( 0px - var(--f15))); margin-bottom: 0 !important;}

.tecItem12{ margin: 0 var(--f15); position: relative; overflow: hidden;}
.tecItem12 .tecImg12{ width: 100%; position: relative; z-index: 1;}
.tecItem12 .tecImg12:before{ content: ''; display: block; padding-top: calc( 100% * 306 / 513);}
.tecItem12 .tecTitle12{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; /*background: url(../images/te1.png) no-repeat 50%/cover;*/ background:linear-gradient(180deg, rgba(255,255,255 ,0) 60%, rgba(8,52,88,0.7)); z-index: 10; display: flex; align-items: flex-end; padding: var(--f25); font-size: var(--f20); color: #fff; transition: all ease 0.75s;}
.tecItem12 .tecMask12{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(8,52,88,0.8); padding: var(--f20); z-index: 100; transition: all ease 0.75s; opacity: 0;}
.tecItem12 .tecMask12 .tecMaskTitle12{ font-size: var(--f20); color: #fff; margin-bottom: var(--f20); padding-bottom: 20px; border-bottom: #fff solid var(--f1); margin-bottom: var(--f15);}
.tecItem12 .tecMask12 .tecMaskSmall12{ color: #dddddd; line-height: 2em;}
.tecItem12 .tecMask12 .tecMaskMore12{ display: flex; align-items: center; justify-content: flex-end; position: absolute; right: var(--f20); bottom: var(--f20);}
.tecItem12 .tecMask12 .tecMaskMore12 span{ margin-right: var(--f30); font-size: var(--f20); color: var(--c1);}
.tecItem12 .tecMask12 .tecMaskMore12 img{ width: var(--f12);}

.tecItem12:hover .tecTitle12{ opacity: 0;}
.tecItem12:hover .tecMask12{ opacity: 1;}

.tec3{ height: var(--f5); background: #f2f2f2; border-radius: 50px; overflow: hidden; margin-top: var(--f30);}
.tec3 div{ height: 100%; background: var(--c1); transition: all ease 0.75s;}

.tec4{ min-height: var(--f600); padding: var(--f120) 0;}

.tecBox4{}
.tecBox4 .sdTitle2{ color: #fff;}
.tecBox4 .tecText4{ color: #eee; line-height: 2em; max-width: 45%; margin-top: var(--f30);}

.tec5{ display: flex; justify-content: space-between; align-items: center;}

.arrow{ cursor: pointer; display: flex; align-items: center;}
.arrow div{ margin-left: var(--f30);}
.arrow div img{ width: var(--f50);}
.arrow div img:nth-child(2){ display: none;}
.arrow div:hover img:nth-child(1){ display: none;}
.arrow div:hover img:nth-child(2){ display: block;}


.tec51{ margin-top: var(--f30);}

.tecBox51{ width: calc( 100% + var(--f30)); transform: translateX(calc( 0px - var(--f15))); margin-bottom: 0 !important;}

.tecItem51{ margin: 0 var(--f15); position: relative; overflow: hidden;}
.tecItem51 .tecImg51{ width: 100%; position: relative; z-index: 1;}
.tecItem51 .tecImg51:before{ content: ''; display: block; padding-top: calc( 100% * 400 / 513);}
.tecItem51 .tecTitle51{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; /*background: url(../images/te6.png) no-repeat 50%/cover;*/  background:linear-gradient(180deg, rgba(255,255,255 ,0) 60%, rgba(8,52,88,0.7)); z-index: 10; display: flex; align-items: flex-end; padding: var(--f25); font-size: var(--f20); color: #fff; transition: all ease 0.75s;}
.tecItem51 .tecMask51{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(8,52,88,0.8); padding: var(--f20); z-index: 100; transition: all ease 0.75s; opacity: 0;}
.tecItem51 .tecMask51 .tecMaskTitle51{ font-size: var(--f20); color: #fff; margin-bottom: var(--f20); padding-bottom: 20px; border-bottom: #fff solid var(--f1); margin-bottom: var(--f15);}
.tecItem51 .tecMask51 .tecMaskSmall51{ color: #dddddd; line-height: 2em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;}
.tecItem51 .tecMask51 .tecMaskMore51{ display: flex; align-items: center; justify-content: flex-end; position: absolute; right: var(--f20); bottom: var(--f20);}
.tecItem51 .tecMask51 .tecMaskMore51 span{ margin-right: var(--f30); font-size: var(--f20); color: var(--c1);}
.tecItem51 .tecMask51 .tecMaskMore51 img{ width: var(--f20);}

.tecItem51:hover .tecTitle51{ opacity: 0;}
.tecItem51:hover .tecMask51{ opacity: 1;}

.tec6{ padding: var(--f120) 0;}

.faq{ margin-top: var(--f30);}

.faqItem{ margin-bottom: 20px; padding: 0 var(--f30); background: #fff; position: relative; cursor: pointer;}
.faqItem::before{ content: ''; display: block; height: 0; width: 100%; background: var(--c1); position: absolute; left: 0; bottom: 0; transition: all ease 0.75s;}
.faqItem.on::before{ height: var(--f5);}

.faqTop{ padding: var(--f20) 0; display: flex; align-items: center; justify-content: space-between;}
.faqTop .faqTopLeft{ display: flex; align-items: center;}
.faqTop .faqTopLeft .faqTopColor{ font-size: var(--f24); color: var(--c1); width: var(--f40); flex-shrink: 0;}
.faqTop .faqTopLeft .faqTopTitle{ font-size: var(--f18); color: #777777;}
.faqTop .faqTopRight{}
.faqTop .faqTopRight img{ width: var(--f25);}
.faqTop .faqTopRight img:nth-child(1){ display: none;}


.faqItem.on .faqTop .faqTopRight img:nth-child(2){ display: none;}
.faqItem.on .faqTop .faqTopRight img:nth-child(1){ display: block;}

.faqBot{ display: none;}

.faqBotNei{ padding: var(--f30) 0; border-top: #dddddd solid var(--f1); display: flex;}
.faqBotNei .faqBotColor{ font-size: var(--f24); color: var(--c1); width: var(--f40); flex-shrink: 0;}
.faqBotNei .faqBotText{ line-height: 2em; color: #777777;}


.baiBg{ background: #fff; overflow: hidden;}

.nav{ display: flex; align-items: center; height: var(--f80);}
.nav img{ width: var(--f22); margin-right: var(--f10);}
.nav a{ color: #666; margin-right: var(--f10);}
.nav i{ color: #666; margin-right: var(--f10);}
.nav span{ color: var(--c1);}

.pro1{ padding-bottom: var(--f120); display: flex; justify-content: space-between;}

.proLeft{ width: calc( 100% * 650 / 1600); position: relative;}

.proDesc{ display: flex; align-items: center; justify-content: flex-end; height: 0; padding-right: var(--f30); bottom: var(--f35); left: 0; width: 100%; cursor: pointer; z-index: 10; position: absolute;}
.proDesc li{ width: var(--f10); height: var(--f10); border-radius: 100px; margin-left: var(--f10); background: var(--c2);}
.proDesc li:hover{ background: var(--c1);}
.proDesc li.on{ background: var(--c1);}

.proImgBox{ width: 100%; height: 100%; margin-bottom: 0 !important; position: relative; z-index: 1;}
.proImgBox .proImgItem{ position: relative;}
.proImgBox .proImgItem::before{ content: ''; display: block; padding-top: calc( 100% * 450 / 650);}

.proRight{ width: calc( 100% * 900 / 1600);}

.proRight1{ color: #777; line-height: 2em; margin: var(--f20) 0 var(--f40) 0;}

.proRight2{ display: flex; align-items: center;}
.proRight2 .select{ margin-right: var(--f30);}
.proRight2 .select .selectDown li{ padding: 0 var(--f20); height: var(--f40); display: flex; align-items: center; justify-content: space-between; color: #777; background: #fff; overflow: hidden; flex-shrink: 0; }
.proRight2 .select .selectDown li span{ font-size:var(--f12)}
.proRight2 .select .selectDown li img{ width: var(--f14);}
.proRight2 .select .selectDown li img:nth-child(3){ display: none;}

.proRight2 .select .selectDown li:hover{ color: var(--c1);}
.proRight2 .select .selectDown li:hover img:nth-child(2){ display: none;}
.proRight2 .select .selectDown li:hover img:nth-child(3){ display: block;}

#tooltip{ position:absolute; z-index:999; background:var(--c1); color:#fff; font-size:var(--f12); padding:var(--f5); white-space:pre;}

.tc{ width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; z-index: 9999;}

.tcFormBox{ background: url(../images/pr2.png) no-repeat 100% 100%/cover; position: relative; transform: translateY(-2vh); opacity: 0.5; transition: all ease 0.75s;}
.tc.on .tcFormBox{ transform: translateY(0); opacity: 1;}

.tc.tc1 .tcFormBox{ max-width: var(--f730); padding: var(--f50);}
.tc.tc2 .tcFormBox{ max-width: var(--f590); padding: var(--f80);}
.tc.tc3 .tcFormBox{ max-width: var(--f590); padding: var(--f80);}

.closeTc{ position: absolute; right: var(--f30); top: var(--f30); cursor: pointer; width: var(--f30);}

.sdTitle3{ font-size: var(--f20); padding-bottom: var(--f15); position: relative;}
.sdTitle3::before{ width: var(--f50); height: var(--f2); background: var(--c1); position: absolute; left: 0; bottom: 0; content: ''; display: block;}

.tcFormBox .downForm{ width: 100%; margin-top: var(--f30);}

.downForm1{ width: 100%; margin-bottom: var(--f30); background: rgba(255,255,255,0.50); border: #bfbfbf solid var(--f1); padding: 0 var(--f30);}
.downForm1 input{ width: 100%; line-height: var(--f70); color:#999; font-size:var(--f20); background: none;}

.downForm1 input::-ms-input-placeholder{ /* Internet Explorer 10+ */ color:#999; font-size:var(--f20);font-family: myFirstFont;}
.downForm1 input::-webkit-input-placeholder{ /* WebKit browsers */ color:#999; font-size:var(--f20);font-family: myFirstFont;}
.downForm1 input::-moz-placeholder{ /* Mozilla Firefox 4 to 18 */  color:#999; font-size:var(--f20);font-family: myFirstFont;}
.downForm1 input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:#999; font-size:var(--f20);font-family: myFirstFont;}

.downForm2{ margin-top: var(--f30); text-align: center;}
.sub1{ width: var(--f160); line-height: var(--f55); font-size: var(--f18); text-align: center; background: var(--c1); cursor: pointer; color: #fff; display: block;}

.downForm2 .sub1{ margin:0 auto ;}

#Specifications{ min-width:fit-content !important;}
.select.SpecificationsSelect.on .selectTitle{ padding: 0 var(--f20) 0 var(--f20); background:none;}
.select.SpecificationsSelect.on:hover .selectTitle{ background:var(--c1); color: #fff;}
.select.SpecificationsSelect.on:hover .selectDown{ display: none;}

.ser4{ padding: var(--f120) 0; background: url(../images/cs1.jpg) no-repeat 50% 100%/cover;}

.formBox{ margin-top: var(--f30); display: flex; flex-wrap: wrap; justify-content: space-between;}
.formBox .downForm1{ width: calc( 100% / 3 - var(--f20));}

.downForm1{ display: flex; align-items: center;} 
.downForm1 .select1{ height: var(--f70); color: var(--c1); background: none; cursor: pointer; width: var(--f60); flex-shrink: 0;}
.downForm1 .select1{
  -webkit-appearance: none; /* 移除默认样式 */
  -moz-appearance: none;
  appearance: none;
  background: url('../images/pr8.png') no-repeat ; /* 设置背景图片 */
  background-repeat: no-repeat;
  background-position: right center; /* 图片位置 */
  padding-right: 20px; /* 确保有足够的空间显示图片 */
}

.downForm1 .select2{ width: 100%; line-height: var(--f70); height: var(--f70); color:#999; font-size:var(--f20); background: none; cursor: pointer;}
.downForm1 .select2{
  -webkit-appearance: none; /* 移除默认样式 */
  -moz-appearance: none;
  appearance: none;
  background: url('../images/pr8.png') no-repeat ; /* 设置背景图片 */
  background-repeat: no-repeat;
  background-position: right center; /* 图片位置 */
  padding-right: 20px; /* 确保有足够的空间显示图片 */
}
.downForm1 span{ color: var(--c1);}
.downForm1 .select2 option{ line-height: 2em;}

.downForm3{ width: 100%; margin-bottom: var(--f40); background: rgba(255,255,255,0.50); border: #bfbfbf solid var(--f1); padding: var(--f10) var(--f30);}
.downForm3 textarea{ width: 100%; height: var(--f230); color:#999; font-size:var(--f20); line-height: 2em; background: none;font-family: myFirstFont;}


.downForm3 textarea::-ms-input-placeholder{ /* Internet Explorer 10+ */ color:#999; font-size:var(--f20);font-family: myFirstFont;}
.downForm3 textarea::-webkit-input-placeholder{ /* WebKit browsers */ color:#999; font-size:var(--f20);font-family: myFirstFont;}
.downForm3 textarea::-moz-placeholder{ /* Mozilla Firefox 4 to 18 */  color:#999; font-size:var(--f20);font-family: myFirstFont;}
.downForm3 textarea::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:#999; font-size:var(--f20);font-family: myFirstFont;}

.tcFormBox1{ margin: var(--f20) auto 0; text-align: center;}
.tcFormBox1 img{ width: var(--f110);}

.tcFormBox2{ text-align: center; margin: var(--f30) auto var(--f45); font-size: var(--f20);}

.pro2{ padding: var(--f120) 0;}

.proTop2{ display: flex; align-items: center; justify-content: space-between;}

.proTop2 .select .selectDown li{ padding: 0 var(--f20); height: var(--f40); display: flex; align-items: center; justify-content: space-between; color: #777; background: #fff;}
.proTop2 .select .selectDown li:hover{ color: var(--c1);}
.proTop2 .select .selectDown li span{ white-space:pre;}

.proContent2{ width: 100%; margin-top: var(--f30);}

.proContentItem2{ width: calc(100% + var(--f20)); overflow-x: auto; transform: translateX(calc(0px - var(--f10))); padding:var(--f10);}

.proContentItemBox2{ min-width:var(--f1200); }

.proContentItem2 table{ width: 100% !important; background: #f2f2f2; line-height: 1.8em; color: #777; box-shadow: rgba(0,0,0,0.1) 0 0 10px; border-spacing: 1px;    border-collapse: separate;    border: none !important;}
.proContentItem2 table th{ padding: var(--f15) var(--f30) ; min-height: var(--f85); background: var(--c2); font-size: var(--f16); color: #fff; font-weight: normal; width: 12.5% !important;}
.proContentItem2 table tr:nth-child(1) td{ padding: var(--f15) var(--f30) ; min-height: var(--f85); background: var(--c2) !important; font-size: var(--f16); color: #fff; font-weight: normal; width: 12.5% !important; }
.proContentItem2 table td{ padding: var(--f15) var(--f30) ; min-height: var(--f65); font-size:var(--f16); width: 12.5% !important;}
.proContentItem2 table tr:nth-child(odd) td{ background: #fff;}

.advantage{ padding: var(--f120) 0;}

.adv{ margin-top: var(--f25);}

.advBox{ width: calc( 100% + var(--f30)); transform: translateX(calc( 0px - var(--f15))); margin-bottom: 0 !important;}
.advBox .slick-track{ display:flex !important;}
.advItem{ margin: 0 var(--f15); padding: var(--f25) var(--f30); background: #f2f2f2; position: relative; cursor: pointer;    height: auto !important;}
.advItem::before{ content: ''; display: block; width: 0; height: var(--f5); background: var(--c1); position: absolute; left: 0; bottom: 0; transition: all ease 0.75s;}
.advItem .advTitle{ font-size: var(--f20); margin-bottom: var(--f20);}
.advItem .advSmall{ font-size: var(--f16); min-height: var(--f160); line-height: 2em;}
.advItem .advIcon{ display: flex; flex-direction: row-reverse;}
.advItem .advIcon img{ width: var(--f105);}
.advItem .advIcon img:nth-child(2){ display: none;}

.advItem:hover{ background: #dfdfdf;}
.advItem:hover::before{ width: 100%;}
.advItem:hover .advIcon img:nth-child(1){ display: none;}
.advItem:hover .advIcon img:nth-child(2){ display: block;}



.neibannerText{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.neibannerText .neibannerText1{ font-size: var(--f50); color: #fff;}

.product{ padding-top: var(--f120);}

.productTop{ display: flex; align-items: center; justify-content: space-between;}

.colAuto{ width: calc( 100% + var(--f30)); transform: translateX(calc( 0px - var(--f15))); margin-bottom: 0 !important;}
.colAuto .proItem{ margin: 0 var(--f15);}

.proListBoxs{ margin-top: var(--f20);}

.product2{ padding: var(--f120) 0;}

.prod51{ margin-top: var(--f30);}

.prodBox51{ width: calc( 100% + var(--f30)); transform: translateX(calc( 0px - var(--f15))); margin-bottom: 0 !important;}

.prodItem51{ margin: 0 var(--f15); position: relative; overflow: hidden;}
.prodItem51 .prodImg51{ width: 100%; position: relative; z-index: 1;}
.prodItem51 .prodImg51:before{ content: ''; display: block; padding-top: calc( 100% * 500 / 785);}
.prodItem51 .prodTitle51{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; /*background: url(../images/te6.png) no-repeat 50%/cover;*/ background:linear-gradient(180deg, rgba(255,255,255 ,0) 60%, rgba(8,52,88,0.7)); z-index: 10; display: flex; align-items: flex-end; padding: var(--f25); font-size: var(--f20); color: #fff; transition: all ease 0.75s;}
.prodItem51 .prodMask51{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(8,52,88,0.8); padding: var(--f20); z-index: 100; transition: all ease 0.75s; opacity: 0;}
.prodItem51 .prodMask51 .prodMaskTitle51{ font-size: var(--f20); color: #fff; margin-bottom: var(--f20); padding-bottom: 20px; border-bottom: #fff solid var(--f1); margin-bottom: var(--f15);}
.prodItem51 .prodMask51 .prodMaskSmall51{ color: #dddddd; line-height: 2em;}



.serviceNav{ display: flex; align-items: flex-end; width: 100%; height: 0; position: relative; z-index: 99;}
.serviceNav a{ display: block; flex:1; font-size: var(--f20); line-height: 3em; text-align: center; color: #fff; background: rgba(8,52,88,0.7);}
.serviceNav a:hover{ background: var(--c1);}
.serviceNav a.on{ background: var(--c1);}

.serLeft{ width: calc( 100% * 650 / 1600); position: relative;}

.serDesc{ display: flex; align-items: center; justify-content: flex-end; height: 0; padding-right: var(--f30); bottom: var(--f35); left: 0; width: 100%; cursor: pointer; z-index: 10; position: absolute;}
.serDesc li{ width: var(--f10); height: var(--f10); border-radius: 100px; margin-left: var(--f10); background: #fff;}
.serDesc li:hover{ background: var(--c1);}
.serDesc li.on{ background: var(--c1);}

.serImgBox{ width: 100%; height: 100%; margin-bottom: 0 !important; position: relative; z-index: 1;}
.serImgBox .serImgItem{ position: relative;}
.serImgBox .serImgItem::before{ content: ''; display: block; padding-top: calc( 100% * 550 / 900);}

.ser1{ padding: var(--f120) 0; display: flex; justify-content: space-between;}

.serLeft1{ width: calc( 100% * 520 / 1600);}
.serLeft11{ color: #777; line-height: 2em; margin: var(--f20) 0 var(--f30);}
.serLeft12{}

.serRight1{ width: calc( 100% * 900 / 1600); position: relative;}

.ser2{ padding-bottom: var(--f70);}

.ser3{ padding: var(--f120) 0 0;}
.ser3 .proList{ margin-top: var(--f30);}


.con{ margin: var(--f120) auto; background: #f2f2f2; display: flex;}

.conLeft{ width: calc( 100% * 900 / 1600);}

.conTop{ display: flex; justify-content: space-between; align-items: center; padding-right: var(--f50); padding-bottom: var(--f30); background: #fff;}

.conTop .select .selectDown li{ width: 100%;}
.conTop .select .selectDown li:hover{ background: var(--c1);}
.conTop .select .selectDown li span{ width: 100%; height: 100%; display: block; text-align: center; line-height: var(--f50); color: var(--c1); font-size: var(--f16); background: #fff;}
.conTop .select .selectDown li span:hover{ background: var(--c1); color: #fff;}

.conTop .select .selectTitle{ background: url(../images/pr9.svg) no-repeat calc( 100% - var(--f20)) 50%/var(--f18) auto,var(--c1); color: #fff;}
.conTop .select:hover .selectDown{ display: flex;}

.Specifications li:hover{ background:var(--c1) !important;}
.Specifications li:hover span{ background:var(--c1); color:#fff;}


.conRight{ width: calc( 100% * 700 / 1600);}
.conRight .conRightItem{ position: relative; display: none;}
.conRight .conRightItem::before{ content: ''; display: block; padding-top: calc( 100% * 645 / 700);}

.conMessBox{}

.conMessItem{ padding: var(--f35) var(--f45) var(--f90); display: none;}
.conMessItem .conMessTitle{ padding-bottom: var(--f25); font-size: var(--f20); color: var(--c1); border-bottom: var(--f3) solid #dddddd;}
.conMessItem .conMess{ margin: var(--f25) 0 var(--f35);}
.conMessItem .conMess .conConMess{ display: flex; align-items: center; margin: var(--f20) 0; font-size: var(--f18); line-height: 1.5em; color: #777;}
.conMessItem .conMess .conConMess img{ width: var(--f30); margin-right: var(--f15); flex-shrink: 0;}
.conMessItem .conMa{ display: flex; align-items: center;}
.conMessItem .conMa .conMaItem{ margin-right: var(--f30); position: relative; cursor: pointer;}
.conMessItem .conMa .conMaItem .conMaIcon{}
.conMessItem .conMa .conMaItem .conMaIcon img{ width: var(--f50);}
.conMessItem .conMa .conMaItem .conMaIcon img:nth-child(2){ display: none;}
.conMessItem .conMa .conMaItem:hover .conMaIcon img:nth-child(1){ display: none;}
.conMessItem .conMa .conMaItem:hover .conMaIcon img:nth-child(2){ display: block;}
.conMessItem .conMa .conMaItem .conMaEr{ position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width:var(--f180); padding-top: var(--f20); display: none; }
.conMessItem .conMa .conMaItem .conMaEr div{ background: #fff; border-bottom: var(--f3) solid var(--c1); box-shadow: rgba(0,0,0,0.1) 0 0 10px;}
.conMessItem .conMa .conMaItem .conMaEr img{ width: 100%;}
.conMessItem .conMa .conMaItem:hover .conMaEr{ display: block;}


.join{ display: flex;}

.joinLeft{ width: 100%;}
.joinLeft .sdTitle{ font-size: var(--f20);}
.joinLeft .sdTitle{ width: 100%;}

.joinRight{ margin-left: var(--f30); width: calc( 100% * 390 / 1600); flex-shrink: 0;}
.joinRight .joinRightBox{ display: table; padding: var(--f30); background: #fff;}
.joinRight .joinRightBox .joinRightItem{ display: table-row; font-size: var(--f16); line-height: var(--f40);}
.joinRight .joinRightBox .joinRightItem .joinRightItem1{ padding-right: var(--f15); display: table-cell;}
.joinRight .joinRightBox .joinRightItem .joinRightItem2{ color: var(--c1); display: table-cell;}


.join2{ padding: var(--f120) 0; display: flex; justify-content: space-between;    align-items: center;}
.join2 .joinLeft2{ width: calc( 100% * 555 / 1600);}
.join2 .joinLeft2 .joinSmall2{ line-height: 2em; color: #777; margin-top: var(--f20);}
.join2 .joinRight2{ width: calc( 100% * 920 / 1600);}



.join5{ display: flex; justify-content: space-between; align-items: center;}

.join51{ margin-top: var(--f30);}

.joinBox51{ width: calc( 100% + var(--f30)); transform: translateX(calc( 0px - var(--f15))); margin-bottom: 0 !important;}

.joinItem51{ margin: 0 var(--f15); position: relative; overflow: hidden;}
.joinItem51 .joinImg51{ width: 100%; position: relative; z-index: 1;}
.joinItem51 .joinImg51:before{ content: ''; display: block; padding-top: calc( 100% * 400 / 513);}
.joinItem51 .joinTitle51{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; /*background: url(../images/te6.png) no-repeat 50%/cover;*/ background:linear-gradient(180deg, rgba(255,255,255 ,0) 60%, rgba(8,52,88,0.7)); z-index: 10; display: flex; align-items: flex-end; padding: var(--f25); font-size: var(--f20); color: #fff; transition: all ease 0.75s;}





.join1{ padding: var(--f120) 0;}

.join3{ padding: var(--f120) 0;}

.joinList{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: var(--f30); margin: var(--f30) auto var(--f50);}

.joinItem{ background: url(../images/jo10.png) no-repeat 100%/cover; padding: var(--f30); position: relative; display: block;}
.joinItem:before{ width: 0; height: var(--f5); background: var(--c1); position: absolute; left: 0; bottom: 0; transition: all ease 0.75s; content: ''; display: block;}
.joinItem .joinItemArr{ width: var(--f14); position: absolute; right: var(--f30); top: var(--f45);}
.joinItem .joinItemTitle{ font-size: var(--f20);}
.joinItem .joinItemFtitle{ color: #777; line-height: 2.5em;}
.joinItem .joinItemAdd{ display: flex; align-items: center; color: #777;}
.joinItem .joinItemAdd img{ width: var(--f20); margin-right: var(--f10); flex-shrink: 0;}
.joinItem .joinItemSmall{ padding-top: var(--f25); color: #777; line-height: 2em; border-top: #ddd solid var(--f1); margin-top: var(--f25); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;}

.joinItem:hover:before{ width: 100%;}
.joinItem:hover .joinItemTitle{ color: var(--c1);}
.joinItem:hover .joinItemFtitle{ color: var(--c1);}

.t4{ font-weight:bolder; font-size:var(--f22); margin-bottom:var(--f10); color:#333;}

.res{}

.res1{ display: flex; justify-content: space-between; align-items: center;}

.resLeft1{ width: 50%; flex-shrink: 0;}
.resLeft1 img{ width: 100%;}

.resRight1{ width: calc( 100% * 720 / 1600); flex-shrink: 0;}
.resRight1 .res11{ width: 100%; font-size: var(--f16); text-align: center; color: var(--c1);}
.resRight1 .res12{ width: 100%; font-size: var(--f30); text-align: center; line-height: 1.5em;}
.resRight1 .res13{ width: 100%; font-size: var(--f16); display: flex; justify-content:center; align-items: center;}
.resRight1 .res13 .res131{ display: flex; align-items: center; margin:var(--f15); }
.resRight1 .res13 .res131 img{ width: var(--f21); margin-right: var(--f10);}
.resRight1 .res14{ width: 100%; font-size: var(--f16); color: #777; text-align: center;}

.res2{ padding: var(--f30) 0 var(--f120); display: flex;}

.resLeft2{ width: var(--f400); margin-right: var(--f95); flex-shrink: 0; position:relative;}

.resLeftBox2{ display: flex; flex-direction: column;}
.resLeftBox2.on{ position:fixed; width:100%; height:0; top:0;}
.resLeftBox2.on2{ position:absolute; bottom:0; left:0;}
.resLeftBox2 li{ width: var(--f400); line-height: 3em; position: relative; transition: all ease 0.75s; cursor: pointer; border-right:#ddd solid var(--f1); font-size:var(--f14) !important; padding-right: var(--f15);}
.resLeftBox2 li span{ font-size:var(--f14) !important;}
.resLeftBox2 li::before{ width: 0; height: var(--f1); background: var(--c1); position: absolute; top: 1.5em; left: 0; content: ''; display: block; transition: all ease 0.75s;}

.resLeftBox2 li:hover{ padding-left: 1.5em; color: var(--c1);}
.resLeftBox2 li:hover::before{ width: 1em;}
.resLeftBox2 li.on{ padding-left: 1.5em; color: var(--c1);}
.resLeftBox2 li.on::before{ width: 1em;}

.resLeftBox2 a{ line-height: 3em; position: relative; transition: all ease 0.75s; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; cursor: pointer;}
.resLeftBox2 a::before{ width: var(--f14); height: var(--f1); background: var(--c1); position: absolute; top: 1.5em; left: 0; content: ''; display: block; transition: all ease 0.75s;}

.resLeftBox2 a:hover{ padding-left: 1.5em; color: var(--c1);}
.resLeftBox2 a:hover::before{ width: 1em;}
.resLeftBox2 a.on{ padding-left: 1.5em; color: var(--c1);}
.resLeftBox2 a.on::before{ width: 1em;}


.resRight2{ font-size: var(--f16); line-height: 2em; color: #666666;}



.news{ padding: var(--f120) 0;}

.newsTop{ display: flex; justify-content: space-between; align-items: center;}

.newsList{ margin-bottom: var(--f50);}

.newsItem{ display: flex; padding: var(--f50); align-items: center; padding-left: 0; transition: all ease 0.75s; border-bottom: #ccc solid var(--f1);}
.newsItem .newsImg{ width: calc( 100% * 510 / 1600); margin-right: var(--f50); flex-shrink: 0; position: relative; overflow: hidden;}
.newsItem .newsImg::before{ content: ''; display: block; padding-top: calc( 100% * 300 / 510);}
.newsItem .newsText{ font-size: var(--f16); }
.newsItem .newsText .newsData{ color: var(--c1);}
.newsItem .newsText .newsTitle{ font-size: var(--f20); margin: var(--f10) 0;}
.newsItem .newsText .newsSmall{line-height: 2em; height: 4em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin: var(--f15) 0 var(--f35);}
.newsItem .newsText .newsMore{ display: flex; align-items: center;}
.newsItem .newsText .newsMore span{ margin-right: var(--f25);}
.newsItem .newsText .newsMore img{ width: var(--f12);}
.newsItem .newsText .newsMore img:nth-child(3){ display: none;}

.newsItem:hover{ padding-left: var(--f50); background: #fff;}
.newsItem:hover .newsText .newsMore img:nth-child(2){ display: none;}
.newsItem:hover .newsText .newsMore img:nth-child(3){ display: block;}


.com1{ padding:var(--f160) 0 var(--f160); background: url(../images/c1.jpg) no-repeat 50% 100%,#fff;}

.comBox1{ display: flex; align-items: flex-start;}
.comBox1 .sdTitle2{ width: calc( 100% * 450 / 1600); flex-shrink: 0;}
.comBox1 .comRight1{ line-height: 2em; color: #777;}

.com2{ padding: var(--f120) 0 ; min-height: var(--f880);}

.comBox2{ color: #fff;}

.comBox21{ font-size: var(--f40); margin-bottom: var(--f20);}

.comBox22{ display: flex; align-items: center; margin: var(--f15) 0 var(--f30);}
.comBox22 .comBoxItem22{ font-size: var(--f20); margin-right: var(--f20); transition: all ease 0.75s; position: relative; line-height: 2em; cursor: pointer;}
.comBox22 .comBoxItem22::before{ width: 0; height: var(--f1); background: var(--c1); content: ''; display: block; position: absolute; left: 0; top:1em; transition: all ease 0.75s;}
.comBox22 .comBoxItem22.on{ padding-left: 1.5em; color: var(--c1);}
.comBox22 .comBoxItem22.on::before{ width: 1em;}

.comBox23{}
.comBox23 .comBoxItem23{ display: none;}
.comBox23 .comBoxItem23 .comBoxTitle23{ font-size: var(--f20); margin-bottom: var(--f10);}
.comBox23 .comBoxItem23 .comBoxSmall23{ font-size: var(--f14); max-width: 45%;}

.com5{ display: flex; align-items: center; justify-content: space-between; padding-top: var(--f120);}

.com51{ margin-top: var(--f30); padding-bottom: var(--f120);}

.comBox51{ width: calc( 100% + var(--f30)); transform: translateX(calc( 0px - var(--f15))); margin-bottom: 0 !important;}

.comItem51{ margin: 0 var(--f15); position: relative; overflow: hidden;}

.comItem51 .comImg51{ width: 100%; position: relative; z-index: 1;}
.comItem51 .comImg51:before{ content: ''; display: block; padding-top: calc( 100% * 480 / 785);}

.comItem51 .comTitle51{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; /*background: url(../images/te6.png) no-repeat 50%/cover;*/background:linear-gradient(180deg, rgba(255,255,255 ,0) 60%, rgba(8,52,88,0.7)); z-index: 10; display: flex; justify-content: flex-end; flex-direction: column; padding: var(--f30); transition: all ease 0.75s;}
.comItem51 .comTitle51 .comTitle511{ font-size: var(--f20); color: #fff; margin-bottom: var(--f10);}
.comItem51 .comTitle51 .comTitle512{ color: #dddddd; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;}

.comItem51 .comMask51{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(8,52,88,0.8); display: flex; justify-content: flex-end; flex-direction: column; padding: var(--f30); z-index: 100; transition: all ease 0.75s; opacity: 0;}
.comItem51 .comMask51 .comMaskTitle51{ font-size: var(--f20); color: #fff; margin-bottom: var(--f10);}
.comItem51 .comMask51 .comMaskSmall51{ color: #dddddd; line-height: 2em; margin-bottom: var(--f30);}
.comItem51 .comMask51 .comMaskMore51{ display: flex; align-items: center;}
.comItem51 .comMask51 .comMaskMore51 span{ margin-right: var(--f30); font-size: var(--f16); color: var(--c1);}
.comItem51 .comMask51 .comMaskMore51 img{ width: var(--f12);}

.comItem51:hover .comTitle51{ opacity: 0;}
.comItem51:hover .comMask51{ opacity: 1;}



.fenye{ }

.pages{ display: flex; align-items: center; justify-content: center;}
.pages li{ margin: 0 var(--f10);}
.pages li a{ display: block; width: var(--f50); line-height: var(--f50); text-align: center;}
.pages li.num{ color: var(--c1); border: var(--c1) solid var(--f1);}
.pages li a img{ width: var(--f50);}
.pages li a img:nth-child(2){ display: none;}
.pages li span{ display: block; text-align: center; line-height: var(--f50); color: var(--c1); margin: 0 var(--f10);}

.pages li.on a{ color: #fff; background: var(--c1);}

.pages li:hover a{ color: #fff; background: var(--c1);}
.pages li:hover a img:nth-child(1){ display: none;}
.pages li:hover a img:nth-child(2){ display: block;}

.layui-box{ display: flex; align-items: center; justify-content: center;}
.layui-box a{ margin: 0 var(--f10); display: block; width: var(--f50); line-height: var(--f50); text-align: center; border: #bfbfbf solid var(--f1);}
.layui-box span{ margin: 0 var(--f10); display: block; width: var(--f50); line-height: var(--f50); text-align: center; border: #bfbfbf solid var(--f1);}
.pages span:hover{ color: #fff; background: var(--c1);}
.pages span.layui-laypage-curr{ color: #fff; background: var(--c1); border:var(--c1) solid var(--f1);}
.pages a:hover{ color: #fff; background: var(--c1); border:var(--c1) solid var(--f1);}

.layui-laypage-count{ display: none !important;}



.sus2{ padding: var(--f120) 0; background: #f2f2f2;}

.qua{ margin-top: var(--f25);}

.quaBox{ width: calc( 100% + var(--f30)); transform: translateX(calc( 0px - var(--f15))); margin-bottom: 0 !important;}

.quaItem{ margin: 0 var(--f15); padding:var(--f25) var(--f30) var(--f75); background: #fff; position: relative; cursor: pointer; height: auto !important;}
.quaItem::before{ content: ''; display: block; width: 0; height: var(--f5); background: var(--c1); position: absolute; left: 0; bottom: 0; transition: all ease 0.75s;}
.quaItem .quaTitle{ font-size: var(--f20); margin-bottom: var(--f20);}
.quaItem .quaSmall{ font-size: var(--f16); line-height: 2em; color: #888888;}
.quaItem .quaIcon{ display: flex; flex-direction: row-reverse; right: var(--f30); bottom: var(--f30); position:absolute;}
.quaItem .quaIcon img{ width: var(--f52);}
.quaItem .quaIcon img:nth-child(2){ display: none;}

.quaItem:hover{ background: #dfdfdf;}
.quaItem:hover .quaSmall{ color: #333;}
.quaItem:hover::before{ width: 100%;}
.quaItem:hover .quaIcon img:nth-child(1){ display: none;}
.quaItem:hover .quaIcon img:nth-child(2){ display: block;}

.quaBox .slick-track{ display: flex !important;}
.esgBox .slick-track{ display: flex !important;}


/* 响应式banner */
.img_gallery{position:relative;}
.main_img{ overflow:hidden;position:relative; height:100%;}
.main_img .zhanwei{ width:90% !important; }
.main_img .zhanwei:before{ padding-top:calc(100% * ( 910 / 1600)); content:''; display:block;}
.main_img ul{width:9999px; overflow:hidden; height:100%;position:absolute;top:0;left:0}
.main_img li{float:left;width:100%; height:100%; }
.img_font{position:absolute; bottom:30px; left:30%; color:#f00; width:100%; padding:10px;}
.img_font span{display:none; }

div.point{ position:absolute;bottom:50px;left:0;z-index:999;width:100%;height:0px; text-align:center;}
div.point .point_box{ margin:0 auto; display:inline-block;}
div.point a{ display: block; width:var(--f8); height:var(--f8); font-size:0; background:#FFFFFF; float: left; cursor: pointer; margin:0 var(--f25); position: relative; border-radius: var(--f10);}
div.point a.on{}

.img_gallery .arrow{ display: none;} 

#btn_prev{}
#btn_next{}

.bannerText{}
.bannerText a{ display:flex; color:#FFFFFF; justify-content:center; flex-direction:column; width:90%; height:100%; max-width:; margin:0 auto;}

.img_gallery .p1{ font-size:var(--f60); opacity:0.5; transform:translateY(30px); transition:all ease-in 0.75s 0.5s;}
.img_gallery .bannerText.on .p1{ transform:translateY(0); opacity:1;}
.img_gallery .p2{ font-size:var(--f40); opacity:0.5; transform:translateY(30px); transition:all ease-in 0.75s 0.5s;}
.img_gallery .bannerText.on .p2{ transform:translateY(0); opacity:1;}

.img_gallery .jdt{ width: 20px; height: 20px; position: relative;}
.img_gallery  svg{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)  rotate(-90deg); transform-origin:center center; opacity:0;}
/*.img_gallery  svg .jdt2{ transform: rotate(-90deg); transform-origin:center center; }*/
.img_gallery .point a.on{ background:#FFFFFF00;}
.img_gallery .point a.on svg{ opacity:1; transition:ease all 0.75s;}
.img_gallery .point a.on svg .jdt2{ animation: jtd2 infinite 10s linear; }

@keyframes jtd2{
    0%{ stroke-dasharray:0 190; stroke-dashoffset: 0;}
    100%{ stroke-dasharray:190 0; stroke-dashoffset: 0;}
}

/* 响应式banner */

.index1{ margin: var(--f60) auto; width: calc( 100% - var(--f120)); background:#00487b; display: flex;}

.indexLeft1{ position: relative; overflow: hidden; width: 100%; background: RGB(242, 242, 242);}
.indexLeft1::before{ content: ''; display: block; padding-top: calc( 100% * 650 / 1240);}

.indexRight1{ width: calc( 100% * 560 / 1800); flex-shrink: 0; padding: var(--f50);}
.indexRight1 .indexTitle1{ font-size: var(--f24); line-height: 1.5em; color: #FFFFFF;}
.indexRight1 .indexLine1{ width: var(--f50); height: var(--f1); background: #FFFFFF; margin: var(--f35) 0;}
.indexRight1 .indexSmall1{ font-size: var(--f16); color: #FFFFFF; line-height: 2em; margin-bottom: var(--f90);}
.indexRight1 .indexMore1{}
.indexRight1 .indexMore1 a{ display: flex; align-items: center; height: var(--f50); padding: 0 var(--f20); background: var(--c1); width: fit-content; color: #FFFFFF;}
.indexRight1 .indexMore1 a img{ width: var(--f13); margin-left: var(--f15);}


.ind1{ margin: var(--f60) auto; width: calc( 100% - var(--f120)); margin-bottom: var(--f60);}

.indBox1{ width: calc( 100% + var(--f60)); transform: translateX(calc( 0px - var(--f30))); margin-bottom: 0 !important;}

.indItem1{ margin: 0 var(--f30); position: relative; overflow: hidden;}
.indItem1 .indImg1{ width: 100%; position: relative; z-index: 1;}
.indItem1 .indImg1:before{ content: ''; display: block; padding-top: calc( 100% * 450 / 560);}
.indItem1 .indTitle1{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; /*background: url(../images/s1.png) no-repeat 50%/cover; background:linear-gradient(180deg, rgba(255,255,255 ,0) 60%, rgba(8,52,88,0.7));*/ z-index: 10; display: flex; align-items: flex-end; padding: var(--f25); font-size: var(--f20); color: #fff; transition: all ease 0.75s;}

.index2{ width: 100%; position: relative;}

.indexZhan2{ position: relative;}
.indexZhan2:before{ content: ''; display: block; padding-top: calc( 100% * 800 / 1600);}

.indexBg2{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;}
.indexBg2 li{ width: 100%; height: 100%;}

.indexMask2{ padding:var(--f120) 0 0; position: absolute; z-index: 10; top: 0; left: 50%; transform: translateX(-50%); color: #FFFFFF; z-index:200;}
.indexMask2 .indexMaskTitle2{ font-size: var(--f40); margin-bottom: var(--f15);}
.indexMask2 .indexMaskSmall2{}
.indexMask2 .indexMaskLine2{ width: var(--f50); height: var(--f1); background: var(--c1); margin: var(--f10) 0 var(--f20);}

.indexMess2{}
.indexMess2 .indexMessItem2{}
.indexMess2 .indexMessItem2 .indexMessTitle2{ font-size: var(--f28); margin-bottom: var(--f10);}
.indexMess2 .indexMessItem2 .indexMessSmall2{ max-width: var(--f525); line-height: 2em;}

.indexText2{ width: 100%; height: 100%; display: flex; position: absolute; bottom: 0; left: 0; z-index: 100;background:linear-gradient(180deg, rgba(255,255,255 ,0) 60%, rgba(8,52,88,0.7));}
.indexText2 .indexItem2{ width: 20%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: var(--f40); background: url(../images/i7-1.png) no-repeat 100% 100%; cursor: pointer;}
.indexText2 .indexItem2 .indexcon{ text-align: center;}
.indexText2 .indexItem2 .indexcon img{ width: var(--f48);}
.indexText2 .indexItem2 .indexcon img:nth-child(1){ display: none;}
.indexText2 .indexItem2 .indexTitle2{ font-size: var(--f16); text-align: center; color: #FFFFFF; margin-top: var(--f10);}

.indexText2 .indexItem2:hover{ background: url(../images/i7.png) no-repeat 50% 100%/cover;}
.indexText2 .indexItem2:hover .indexcon img:nth-child(2){ display: none;}
.indexText2 .indexItem2:hover .indexcon img:nth-child(1){ display: block;}
.indexText2 .indexItem2:hover .indexTitle2{ color: var(--c1);}

.indexText2 .indexItem2.on{ background: url(../images/i7.png) no-repeat 50% 100%/cover;}
.indexText2 .indexItem2.on .indexcon img:nth-child(2){ display: none;}
.indexText2 .indexItem2.on .indexcon img:nth-child(1){ display: block;}
.indexText2 .indexItem2.on .indexTitle2{ color: var(--c1);}

.index3{ padding: var(--f120) 0; display: flex;}

.indexLeft3{ width:calc( 100% * 520 / 1600);}
.indexLeft3 .sdTitle2{ color: var(--c2);}

.messBox{ margin-top: var(--f30);}

.messItem{}
.messItem .messItemTitle{ font-size: var(--f20); margin: var(--f20) 0;}
.messItem .messItemItem{ display: flex; align-items: center; margin:0 2px; margin-bottom: var(--f30);}
.messItem .messItemItem .messItemIcon{ width: var(--f30); margin-right: var(--f20); flex-shrink: 0;}
.messItem .messItemItem .messItemText{ font-size: var(--f16); line-height: 1.2em;}

.indexLeft3 .arrow div{ margin-left: 0; margin-right: var(--f30);}

.indexRight3{ position: relative; width:100%;}
.indexRight3 .indexMap{ position: relative; z-index: 1;}
.indexRight3 .indexMapBox{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 10;}
.indexRight3 .indexMapBox .indexMapItem{ width: 0; height: 0; position: absolute; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.indexRight3 .indexMapBox .indexMapItem img:nth-child(1){ width: var(--f15); height:var(--f15); animation:  infinite 2s linear; max-width: none !important;}
.indexRight3 .indexMapBox .indexMapItem img:nth-child(2){ width: var(--f22); position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: none; max-width: none !important;}

.indexRight3 .indexMapBox .indexMapItem.on img:nth-child(1){ display: none;}
.indexRight3 .indexMapBox .indexMapItem.on img:nth-child(2){ display: block;}

@keyframes op{
    0%{ opacity: 0.1;}
    50%{ opacity: 1;}
    100%{ opacity: 0.1;}
}


.qc{ display: grid; grid-gap:var(--f30); grid-template-columns: repeat(4,1fr); padding-top: var(--f30);}

.qcItem{ display: block; position: relative;}
.qcItem .qcImg{ width: 100%; overflow: hidden; position: relative;}
.qcItem .qcImg:before{ content: ''; display: block; padding-top: calc( 100% * 480 / 360);}
.qcItem .qcTitle{ width: 100%; height: 100%; background: url(../images/q1.png) no-repeat 50%/cover; display: flex; align-items: flex-end; position: absolute; left: 0; top: 0;}
.qcItem .qcTitle div{ padding: var(--f20) var(--f30); font-size: var(--f20); color: #fff;}


@media screen and (min-width:1200px){
	
.moTop{ display:none !important;}
.moMenuBox{ display:none !important;}


}
@media screen and (max-width:1600px){

body{ font-size:14px;}

.topPs{ font-size:15px;}

.topMenu .topMenuItem .topMenuTitle{ font-size:15px;}
.topMenu .topMenuItem {
        margin: 0 15px;
        height: 70px;
    }
.topLogo img {
    height: 40px;
}

.indexRight1 .indexTitle1
 {
    font-size: 24px;
}
.indexRight1 .indexLine1 {
    width: 50px;
    height: 1px;
    background: #FFFFFF;
    margin: 15px 0;
}
.indexRight1 .indexSmall1 {
    font-size: 16px;
    line-height: 2em;
    margin-bottom: 50px;
}

.indexRight1 .indexMore1 a {
    height: 45px;
    padding: 0 15px;
}

.img_gallery .p1{ font-size:45px;}

.neibannerText .neibannerText1{
    font-size: 40px;
    color: #fff;
}

.sdTitle2
 {
    font-size: 36px;
    padding-bottom: 15px;
    position: relative;
}

.com2 {
    padding: 90px 0;
    min-height: 600px;
}

.comBox21 {
    font-size: 36px;
    margin-bottom: 20px;
}

.comBox22 {
    margin: 15px 0 30px;
}
.comBox22 .comBoxItem22{
    font-size: 20px;
    margin-right: 20px;
}

.comBox22 .comBoxItem22::before{ height:1px;}
.comBox23 .comBoxItem23 .comBoxTitle23 {
    font-size: 20px;
    margin-bottom: 10px;
}
.comBox23 .comBoxItem23 .comBoxSmall23 {
    font-size: 14px;
    max-width: 45%;
}

.comItem51 .comTitle51{ padding:30px;}
.comItem51 .comTitle51 .comTitle511 {
    font-size: 20px;
    color: #fff;
    margin-bottom: 10px;
}
.comItem51 .comMask51 .comMaskTitle51 {
    font-size: 20px;
    color: #fff;
    margin-bottom: 10px;
}
.comItem51 .comMask51 .comMaskSmall51 {
    margin-bottom: 30px;
}
.comItem51 .comMask51 .comMaskMore51 span {
    margin-right: 30px;
    font-size: 16px;
}

.arrow div {
    margin-left: 30px;
}

.arrow div img {
    width:50px;
}

.qua {
    margin-top: 30px;
}

.quaItem {
    margin: 0 15px;
    padding: 30px 30px 75px;
}

.quaItem .quaTitle {
    font-size: 20px;
    margin-bottom: 15px;
}

.quaItem .quaSmall {
    font-size: 16px;
}

.quaItem .quaIcon {
    right: 30px;
    bottom: 30px;
}
.quaItem .quaIcon img {
    width: 50px;
}

.news {
    padding: 90px 0;
}

.newsItem .newsImg {
    width: calc(100% * 400 / 1300);
    margin-right: 30px;
}
.newsItem .newsText .newsTitle {
    font-size: 18px;
    margin: 10px 0;
}

.newsItem{ padding:45px; padding-left:0;}
.newsItem:hover{ padding-left:45px;}
.newsItem .newsText .newsSmall{ margin: 10px 0 25px;}
.newsItem .newsText .newsMore span {
    margin-right: 25px;
}
.sd a {
    margin-right: 30px;
    line-height: 45px;
    border: var(--c1) solid 1px;
    border-radius: 5px;
    font-size: 14px;
    padding: 0 20px;
    min-width: 200px;
}

.joinItem{ padding:30px;}
.joinItem .joinItemTitle {
    font-size: 16px;
}

.joinItem .joinItemSmall {
    padding-top: 20px;
    margin-top: 20px;
    -webkit-line-clamp: 3;
}

.joinList {
    grid-gap: 30px;
    margin: 30px auto 50px;
}

.tec11 .sdTitle2 {
    width: calc(100% * 570 / 1300);
    flex-shrink: 0;
}

.tecItem12 .tecMask12 .tecMaskTitle12 {
    font-size: 18px;
    margin-bottom: 15px;
}

.faqTop .faqTopLeft .faqTopTitle{
    font-size: 18px;
}
.susItem1 .susMask1 .susMaskTitle1 {
    font-size: 18px;
    color: #fff;
    margin-bottom: 15px;
}

.susItem1 .susMask1 .susMaskSmall1 {
    font-size: 14px;
}

.esgItem .esgTitle {
    font-size: 18px;
    margin-bottom: 15px;
}
.esgItem .esgSmall {
    font-size: 14px;
}

.relatedItem .relatedText .relatedTitle {
    font-size: 18px;
}
.relatedItem .relatedText .relatedSmall {
    font-size: 14px;
}

.relatedItem .relatedText {
    width: 80%;
    padding: 20px;
    bottom: 20%;
}
.select .selectTitle
特定性:(0,2,0)
 {
    width: 220px;
    height: 50px;
    padding: 0 20px;
    background: url(../images/pr8.svg) no-repeat calc(100% - var(--f20)) 50% / 18px auto;
    font-size: 14px;
    line-height: 50px;
    color: var(--c1);
}

.conMessItem .conMessTitle {
    padding-bottom: 20px;
    font-size: 18px;
}

.conMessItem .conMess .conConMess {
    margin: 20px 0;
    font-size: 16px;
}
.tecItem51 .tecMask51 .tecMaskTitle51 {
    font-size: 18px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.proList {
    grid-gap: 30px;
}
.conTop .select .selectDown li span {
    line-height: 50px;
    font-size: 14px;
}

.downForm1 input::-ms-input-placeholder{ /* Internet Explorer 10+ */ color:#999; font-size:20px;}
.downForm1 input::-webkit-input-placeholder{ /* WebKit browsers */ color:#999; font-size:20px;}
.downForm1 input::-moz-placeholder{ /* Mozilla Firefox 4 to 18 */  color:#999; font-size:20px;}
.downForm1 input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:#999; font-size:20px;}

.downForm3 textarea::-ms-input-placeholder{ /* Internet Explorer 10+ */ color:#999; font-size:20px;}
.downForm3 textarea::-webkit-input-placeholder{ /* WebKit browsers */ color:#999; font-size:20px;}
.downForm3 textarea::-moz-placeholder{ /* Mozilla Firefox 4 to 18 */  color:#999; font-size:20px;}
.downForm3 textarea::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:#999; font-size:20px;}

.downForm1 input {
    width: 100%;
    line-height: 3em;
    color: #999;
    font-size: 20px;
    background: none;
}

.downForm3 textarea {
    width: 100%;
    height: 200px;
    color: #999;
    font-size: 20px;
    line-height: 2em;
    background: none;
}
.sub1 {
    width: 160px;
    line-height: 45px;
    font-size: 14px;
}

.faqBotNei .faqBotColor {
    font-size: 20px;
    width: 30px;
}

.faqTop .faqTopLeft .faqTopColor{
    font-size: 20px;
    width: 30px;
}



}
@media screen and (max-width:1200px){
.pc{ display:block;}
.mo{ display:none;}
.disable_text_highlighting,body {
	/*去除选中高亮*/
-webkit-touch-callout: none;
-webkit-user-select: none;    /* Webkit */
-moz-user-select: none;      /* Firefox */
-ms-user-select: none;        /* IE 10  */
        /* Opera 目前不支持在Opera，但将很快 */
-o-user-select: none;
user-select: none;
}

body{ padding-top:0;}

.pcTop{ display:none;}
.moTop{ display:flex;}

.com2 {
    padding: 90px 0;
    min-height: 500px;
}
.comBox22 .comBoxItem22 {
    font-size: 16px;
    margin-right: 11px;
}

.comBox23 .comBoxItem23 .comBoxTitle23 {
    font-size: 16px;
    margin-bottom: 10px;
}
.comBox23 .comBoxItem23 .comBoxSmall23 {
    font-size: 14px;
    max-width: 85%;
}

.bannerText a{ width:90%;}

.newsTop {
    align-items: flex-start;
    flex-direction: column;
}

.neibannerText .neibannerText1 {
    font-size: 28px;
    color: #fff;
}

.join2 .joinLeft2 {
    width: 48%;
}

.join2 .joinRight2{
    width: 48%;
}

.sdTitle2 {
    font-size: 24px;
    padding-bottom: 10px;
    position: relative;
}

.arrow div {
    margin-left: 10px;
}
.arrow div img {
    width: 25px;
}


.related
 {
    display: grid
;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
    margin-top: 30px;
    padding-bottom: 45px;
}

.select .selectTitle
 {
    width: 250px;
    height: 50px;
    padding: 0 20px;
    background: url(../images/pr8.svg) no-repeat calc(100% - var(--f20)) 50% / 18px auto;
    font-size: 14px;
    line-height: 50px;
}
.col4
 {
    grid-template-columns: repeat(3, 1fr);
}

.qc
 {
    grid-gap: 30px;
    grid-template-columns: repeat(3, 1fr);
    padding-top: 30px;
}

.sdTitle {
    font-size: 24px;
    padding-bottom: 20px;
    border-bottom: #efefef solid var(--f1);
}

.sdContent {
    padding-top: 20px;
    font-size: 14px;
    line-height: 2em;
}
.sdContent b{
    font-size: 18px;
}

.qcItem .qcTitle div {
    padding: 20px 30px;
    font-size: 16px;
    color: #fff;
}

.psSelectTitle img {
    width: 15px;
    margin-right: 10px;
}
.psSelectTitle span {
    font-size: 16px;
    color: #999999;
}

.psSelectItemBox a {
    margin-bottom: 20px;
    line-height: 30px;
    border: var(--c1) solid 1px;
    border-radius: 5px;
    font-size: 14px;
    padding: 0 20px;
    margin-right: 20px;
}
.psSelectItem {
    padding: 15px 0;
}

.psSelectReset img {
    width: 20px;
}

.proMask .proTop .proTitle {
    font-size: 18px;
}

.proMask .proTop .proArrow img {
    width: 14px;
}
.proMask .proMess {
    padding: 20px 0;
    font-size: 14px;
    line-height: 2em;
}

.proBg .proTitle {
    margin-bottom: 20px;
    font-size: 18px;
}

.con {
    margin: 90px auto;
;
}

.indexMess2 .indexMessItem2 .indexMessTitle2 {
    font-size: 16px;
    margin-bottom: 10px;
}
.indexMess2 .indexMessItem2 .indexMessSmall2 {
    max-width: 80%;
    line-height: 2em;
}
.indexZhan2:before {
    content: '';
    display: block;
    padding-top: 500px;
}

.pro1{ flex-direction:column;}

.proLeft{ width:100%;}
.proRight {
    width: 100%;
    margin-top: 30px;
}

.proRight2 {
    justify-content: space-between;
    flex-wrap: wrap;
}

.proRight2 .select {
    margin-right: 0;
    margin-bottom: 20px;
    width: 48%;
}
.proRight2 .select .selectTitle{  width:100%;}
.proRight2 .select .selectDown li span{ font-size:14px;}
.proRight2 .select .selectDown li{ height:40px;}

.proRight2 .select .selectDown li img {
    width: 12px;
}
.proTop2 .select .selectDown li {
    padding: 0 20px;
    height: 40px;
}
.SpecificationsSelect .Specifications li {
    font-size: 16px;
    padding-right: 50px !important;
}
.proContentItemBox2 {
    min-width: 1200px;
}

.proContentItem2 table td{ font-size:14px;}
.proContentItem2 table th{ font-size:16px;}

.advItem {
    margin: 0 15px;
    padding: 30px;
}

.advItem .advTitle {
    font-size: 18px;
    margin-bottom: 10px;
}
.advItem .advSmall {
    font-size: 14px;
    line-height: 2em;
}

.resLeft2{ display:none;}
.resRight2 {
    font-size: 16px;
}
.t4 {
    font-weight: bolder;
    font-size: 20px;
    margin-bottom: 10px;
    color: #333;
}

.res1{ flex-direction:column;}
.resLeft1 {
    width: 100%;
    flex-shrink: 0;
}
.resRight1 {
    width: 100%;
    flex-shrink: 0;
    margin-top: 30px;
}
.resRight1 .res11 {
    font-size: 16px;
}
.resRight1 .res12 {
    font-size: 24px;
}
.resRight1 .res13 {
    font-size: 16px;
}

.tecItem51 .tecTitle51 {
    padding: 20px;
    font-size: 16px;
}
.joinItem51 .joinTitle51 {
    padding: 20px;
    font-size: 16px;
}
.indexLeft3 {
    width: 100%;
}
.messItem .messItemItem .messItemText {
    font-size: 16px;
    line-height: 1.2em;
}
.messItem .messItemItem .messItemIcon {
    width: 20px;
    margin-right: 10px;
    flex-shrink: 0;
}
.messItem .messItemTitle {
    font-size: 20px;
    margin: 20px 0;
}
.messItem .messItemItem {
    margin: 0 2px;
    margin-bottom: 20px;
}
.indexRight3{ display:none;}
.indexMask2 .indexMaskTitle2 {
    font-size: 30px;
    margin-bottom: 15px;
}

.indItem1 .indTitle1 {
    padding: 20px;
    font-size: 20px;
}
.main_img .zhanwei{ height:400px;}
.img_gallery .p2 {
    font-size: 16px;}
    
.tec11{ flex-direction:column; align-items:flex-start;} 
.tec11 .sdTitle2 {
    width: 100%;
    flex-shrink: 0;
}

.susItem1 .susTitle1{
    padding: 20px;
    font-size: 16px;
}

.psSelectItemBox span {
    margin-right: 15px;
    line-height: 45px;
    font-size: 16px;
    padding: 0 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}
.psSelectItem {
    padding: 0 0 0;
    flex-direction: column;
}
.psSelectTitle{ margin-bottom:10px;}
   
 .fo1RightBot{ display:none;}  
    .fo2 a {
    color: #999999;
    font-size: 12px;
}
}
@media screen and (max-width:770px){

.comBox1{ flex-direction:column;}
.comBox1 .sdTitle2{ width: 100%;}
.comBox1 .comRight1{ margin-top:20px;}

.sd a {
    margin-right: 15px;
    line-height: 45px;
    border: var(--c1) solid 1px;
    border-radius: 5px;
    font-size: 13px;
    padding: 0 10px;
    min-width: auto;
}

.formBox .downForm1 {
    width: 100%;
}	 

.qc
 {
    grid-template-columns: repeat(2, 1fr);
}

.psSelectItem {
    padding: 15px 0;
    flex-direction: column;
}

.psSelectItemBox a {
    line-height: 30px;
    font-size: 14px;
    padding: 0 20px;
    margin: 10px 10px 10px 0;
}

.col4 {
    grid-template-columns: repeat(2, 1fr);
}

.con { flex-direction:column;}

.conLeft {
    width: 100%;
}
.conRight{
    width: 100%;
}

    .related {
    grid-template-columns: repeat(2, 1fr); padding-bottom: 0;
    }

.tec11{ flex-direction:column; align-items:flex-start;}
.tec11 .tec111{ margin:30px auto;}
.tec11 .sdTitle2 {
    width: 100%;
    flex-shrink: 0;
}

.tecBox4 .tecText4{ max-width:100%; margin-top:30px;}
.newsItem .newsImg {
    width: 100%;
    margin-right: 0;
}
.newsItem .newsText {
    margin: 30px 0;
    font-size: 16px;
}

.indexRight1 {
    width: 35%;
    flex-shrink: 0;
    padding: 30px;
}
.indexRight1 .indexTitle1 {
    font-size: 16px;
}
.indexRight1 .indexSmall1 {
    font-size: 14px;
    line-height: 2em;
    margin-bottom: 15px;
}

.newsItem {
    padding: 30px !important;
    flex-direction: column;
}

.join2 {
    padding: 90px 0;
    flex-direction: column;
}
.join2 .joinLeft2 {
    width: 100%;
}
.join2 .joinRight2 {
    margin-top:30px;
    width: 100%;
}

.joinList{    grid-template-columns: repeat(1, 1fr);}
.neiBannerZhan {
    height: 330px;
}
.neibannerText .neibannerText1 {
    font-size: 20px;
}

.fo1RightBot a { width: 50%; margin-left: 0;
    font-size: 12px;}
.fo1 {
    flex-direction: column;
    display: flex;
    align-items: flex-start;
    padding-bottom: 30px;
}
.fo1RightBot {
    flex-wrap: wrap;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.fo2 a {
    color: #999999;
    font-size: 12px;
}
.sdTitle2 {
    font-size: 24px;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.proBg {
    padding: 5%;
    width: 100%;
}

.proMask{ padding:5%;}

}
@media screen and (max-width:640px){

.indexLeft1{ display:none;}
.indexRight1{ width:100%;}



}
@media screen and (max-width:420px){




}