@charset "utf-8";

#banner{width:100%; height: 550px; background: #111;}


#space{height: 150px;}

@media (max-width:1279px){ /*mp*/
  #mp-head{background: #1f53be; height: 80px;}
  #space{height: 10px;}
}


/* 浜у搧鏍忕洰鑿滃崟 */
#child{background: #f6f7fb;}
#child .wrap>a{width: 33.333333%;}


/* 浜у搧棣栭〉鍒楄〃 */
#product{padding: 0 0 70px 0; background: #f6f7fb;}
#product .wrap{display: flex; flex-wrap: wrap; width: calc(100% + 35px);}
#product .wrap a{display: block; width: calc((100% - 75px)/4); height: 0; padding-bottom: calc((100% - 75px)/4); border: 1px solid #ededed; box-sizing: border-box; background: #fff; margin: 0 25px 25px 0; overflow: hidden; transition: all .35s;}
#product .wrap a:hover{box-shadow: 0 0 25px rgba(0,0,0, .08);}
#product .wrap a .info{padding: 30px; text-align: center;}
#product .wrap a .info .name{color: #2e2d3c; font-size: 2rem; line-height: 1.3; transition: all .25s; font-weight: bold;}
#product .wrap a:hover .info .name{color: #5f8cec;}
#product .wrap a .info .series{margin-top: 8px; font-size: 1.4rem; color: #999; font-weight: 300;}
#product .wrap a .img{width: 100%; height: 0; padding-bottom: calc(100% - 135px); position: relative; transition: all .35s;}
#product .wrap a .img img{position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; max-height: 100%;}
#product .wrap a:hover .img{margin-top: 15px; transform: scale(.95);}

#product .wrap a:first-child{width: calc((((100% - 75px)/4)*2) + 25px);}
#product .wrap a:first-child .img{width: 45%; float: left; padding-bottom: 50%; box-sizing: border-box; transform: scale(.9);}
#product .wrap a:hover:first-child .img{margin-top: unset; transform: scale(.9);}
#product .wrap a:first-child .info{width: 55%; float: right; box-sizing: border-box; text-align: left; padding-left: 10px; padding-top: 80px;}
#product .wrap a:first-child .info .name{font-size: 3.2rem;}
#product .wrap a:first-child .info .series{font-size: 1.6rem;}
#product .wrap a:nth-of-type(4n+3){margin-right: 0;}


/* 浜у搧鐩綍鍒楄〃椤 */
#category{padding: 0 0 100px 0; background: #f6f7fb;}
#category .wrap{display: flex; justify-content: space-between;}
.catalog{width: 317px; font-family: 'Microsoft YaHei';}
.catalog>.title{font-size: 1.6rem; color: #2b2b2b;}
.catalog>.mp-title{display: none; font-size: 1.6rem; color: #2b2b2b;}
.catalog .box{margin-top: 20px; border: 1px solid #e6e7e7; background: #fff;}
.catalog .box>.title{font-size: 1.5rem; color: #2b2b2b; font-weight: bold; padding: 16px 20px; border-bottom: 1px solid #eee; position: relative;}
.catalog .box>.title::after{display: block; content: '\e615'; font-family: 'iconfont'; margin-right: 8px; font-size: 1.4rem; position: absolute; right: 16px; top: 17px; color: #bbb; transform: rotate(90deg); margin: auto; transition: all .3s;}
.catalog .box>.title.active::after{transform: rotate(-90deg);}
.catalog .box>.list{padding: 15px 0 20px 0;}

.catalog ul>li{margin: 5px 0; position: relative;}
.catalog ul>li.active>a{z-index: 1; position: relative;}
.catalog ul>li.active>a::before{position: absolute; width: 3px; height: 33px; background: #5f8cec; content: ''; left: -1px; top: 0;}
.catalog ul>li li>a::before{display: none;}
.catalog ul>li>a{display: block; padding: 0 20px; color: #2b2b2b; font-size: 1.5rem; line-height: 33px;}
.catalog ul>li ul{display: none; padding-left: 15px;}
.catalog ul>li.active>a{color: #5f8cec; font-weight: bold;}
.catalog ul>li.active>ul{display: block;}

.catalog ul>li .plus{position: absolute; width: 24px; height: 24px; right: 10px; top: 0; margin-top:5px; cursor: pointer; z-index: 2;}
.catalog ul>li .plus:before{width:12px; height:2px; background:#cdcdcd; content:''; display: block; position:absolute; left:50%; top:50%; margin:-1px auto auto -7px;}
.catalog ul>li .plus:hover:before{background: #999;}
.catalog ul>li .plus:after{width:2px; height:12px; background:#cdcdcd; content:''; display: block; position:absolute; left:50%; top:50%; margin:-6px auto auto -2px;}
.catalog ul>li .plus:hover:after{background: #999;}
.catalog ul>li .less{position:absolute; width:24px; height:24px; right: 10px; top:0; margin-top:5px; cursor:pointer; z-index: 2;}
.catalog ul>li .less:before{width:12px; height:2px; background:#cdcdcd; content:''; display: block; position:absolute; left:50%; top:50%; margin:-1px auto auto -7px;}
.catalog ul>li .less:hover:before{background: #999;}


@media (max-width:1679px){ /*1440*/
  .catalog{width: 300px;}
}
@media (max-width:1439px){ /*1366*/
  .catalog{width: 300px;}
  #product .wrap a .info .name{font-size: 1.8rem;}
  #product .wrap a .info .series{font-size: 1.4rem;}
  #product .wrap a:first-child .info .name{font-size: 3rem;}
  #product .wrap a:first-child .info .series{font-size: 1.5rem;}
}
@media (max-width:1365px){ /*1280*/
  .catalog{width: 280px;}
  .catalog ul>li>a{font-size: 1.4rem; line-height: 31px;}
  #product .wrap a .info .name{font-size: 1.8rem;}
  #product .wrap a .info .series{font-size: 1.3rem;}
  #product .wrap a:first-child .info .name{font-size: 2.6rem;}
  #product .wrap a:first-child .info .series{font-size: 1.4rem;}
}

.product-list{width: 1230px; font-family: 'Microsoft YaHei';}
.product-list .title{text-align: right;}
.product-list .title>a{display: inline-block; font-size: 1.4rem; color: #999;}
.product-list .title>a.grid{margin-right: 12px;}
.product-list .title>a.grid::before{content: '\e81c'; font-family: 'iconfont'; font-size: 1.6rem; margin-right: 6px;}
.product-list .title>a.list::before{content: '\e74d'; font-family: 'iconfont'; font-size: 1.5rem; margin-right: 6px;}
.product-list .title>a.active{color: #5f8cec;}

@media (max-width:1679px){ /*1440*/
  .product-list{width: 1020px;}
}
@media (max-width:1439px){ /*1366*/
  .product-list{width: 950px;}
}
@media (max-width:1365px){ /*1280*/
  .product-list{width: 890px;}
}
@media (max-width:1279px){ /*mp*/
  #product{padding-bottom: 50px;}
  #product .wrap{width: calc(100% + 15px); padding-left: 15px; padding-right: 15px; box-sizing: border-box;}
  #product .wrap a{width: calc((100% - 15px)/2); padding-bottom: calc((100% - 15px)/2); margin: 0 15px 15px 0;}

  #product .wrap a .info{padding: 20px 15px;}
  #product .wrap a .info .name{font-size: 1.6rem;}
  #product .wrap a .img{padding-bottom: calc((100% - 15px)/2);}
  #product .wrap a .img img{max-height: 90%;}

  #product .wrap a:first-child{width: calc(100% + 15px);}
  #product .wrap a:first-child .info{padding-top: 60px;}
  #product .wrap a:first-child .info .name{font-size: 2.7rem;}
  #product .wrap a:first-child .info .series{font-size: 1.5rem;}
  #product .wrap a:nth-of-type(2n+1){margin-right: 0;}


  #category{padding: 0 15px 60px 15px; margin-top: -25px;}
  #category .wrap{display: block;}
  .catalog{width: 100%;}
  .catalog>.title{display: none;}
  .catalog>.mp-title{display: block;}
  .catalog>.mp-title>span{display: inline-block; background: #ffff00; padding: 5px; color: #111; position: relative; top: -1px;}
  .catalog .box>.title::after{transform: rotate(-90deg);}
  .catalog .box>.title.active::after{transform: rotate(90deg);}
  .catalog .box>.list{display: none;}

  .product-list{width: 100%;}
  .product-list .title{text-align: left; margin-top: 30px;}
}

.product-list .related{display: flex; flex-wrap: wrap; margin-top: 20px;}
.product-list .related>.item{width: calc(25% + 1px); box-sizing: border-box; border: 1px solid #e6e7e7; padding: 20px 20px 72px 20px; background: #fff; margin-right: -1px; margin-bottom: -1px; position: relative; transition: box-shadow .2s;}
.product-list .related>.item:hover{box-shadow: 0 8px 16px rgba(0,0,0, .1); position: relative; z-index: 1;}
.product-list .related>.item::after{content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0, 0); z-index: 1; transition: background .35s; visibility: hidden;}
.product-list .related>.item.dark::after{background: rgba(0,0,0, .3); visibility: visible;}

@media (max-width:1439px){ /*1366*/
  .product-list .related>.item{width: calc(33.33333% + 1px);}
}

.product-list .related>.item>a{display: block; position: relative;}
.product-list .related>.item>a .img{margin: 0 10px; height: 0; padding-bottom: 100%; overflow: hidden;}
.product-list .related>.item>a .img>img{transition: transform .35s;}
.product-list .related>.item:hover>a .img>img{transform: scale(.94);}

.product-list .related>.item .pname{display: block;}
.product-list .related>.item .pname .model{color: #2b2b2b; font-size: 1.8rem; font-weight: bold;}
.product-list .related>.item .pname .name{font-size: 1.5rem; margin-top: 8px;}
.product-list .related>.item .pname:hover .name{color: #5f8cec;}

.product-list .related>.item .view{display: block; line-height: 38px; height: 40px; background: #5f8cec; color: #fff; text-align: center; font-size: 1.6rem; margin-top: 15px;}
.product-list .related>.item .view:hover{background: linear-gradient(#85a8f1, #5f8cec);}

@media (max-width:1679px){ /*1440*/
  .product-list .related>.item .pname .model{font-size: 1.7rem;}
  .product-list .related>.item .view{font-size: 1.5rem;}
}

.product-list .related .doc-container{position: absolute; left: 0; bottom: 0; width: 100%; background: #fff; padding-bottom: 10px; z-index: 2; transition: border-radius .3s;}
.product-list .related .doc-container.active{border-radius: 10px 10px 0 0;}
.product-list .related .doc-container>.tit{display: block; font-size: 1.5rem; text-align: center; line-height: 46px; height: 46px;}
.product-list .related .doc-container>.tit::before{content: '\e626'; font-family: 'iconfont'; color: #bbb; margin-right: 8px;}
.product-list .related .doc-container>.tit::after{content: '\e624'; font-family: 'iconfont'; color: #999; margin-left: 9px; transform: rotate(90deg) scale(.6); display: inline-block;}
.product-list .doc-container .doc-list{display: none;}
.product-list .doc-container .doc-list>a{display: block; padding: 13px 20px; font-size: 1.4rem; transition: background .25s;}
.product-list .doc-container .doc-list>a:hover{background: #eee;}
.product-list .doc-container .doc-list>a svg{position: relative; top: -1px; margin-right: 5px;}
.product-list .doc-container .doc-list>a.all{padding-left: 44px; font-size: 1.3rem; color: #5f8cec;}
.product-list .doc-container .doc-list>a.all::after{content: '\e615'; font-family: 'iconfont'; margin-left: 5px;}
.product-list .doc-container .doc-list>a.all:hover{background: none;}

.product-list>.list{display: block;}
.product-list>.list>.item{width: 100%; height: 250px; display: flex;}
.product-list>.list>.item::after{display: none;}
.product-list>.list>.item>a .img{margin: 0 20px; width: 210px; height: 210px; padding-bottom: 0; overflow: hidden;}
.product-list>.list>.item>a .img>img{max-height: 210px; max-width: 210px;}

.product-list>.list>.item>div{padding-top: 20px; padding-left: 10px;}
.product-list>.list>.item .view{display: block; width: 150px; margin-top: 40px;}

.product-list>.list .doc-container{position: relative; width: 150px; margin-top: 12px;}
.product-list>.list .doc-container .tit{border: 1px solid #e6e7e7; height: 38px; line-height: 38px; margin-bottom: -1px;}
.product-list>.list .doc-container .tit:hover{border: 1px solid #bbb;}
.product-list>.list .doc-container>.tit::after{transform: rotate(-90deg) scale(.6);}
.product-list>.list .doc-container .doc-list{width: 350px; background: #fff; border: 1px solid #e6e7e7; box-shadow: 0 5px 10px rgba(0,0,0, .06);}

@media (max-width:1279px){ /*mp*/
  .product-list .related>.item{width: calc(50% + 1px);}
  .product-list .related>.item .pname .model{font-size: 1.5rem;}
  .product-list .related>.item .pname .name{font-size: 1.3rem;}

  .product-list .related>.item .view{font-size: 1.4rem;}

  .product-list .related .doc-container>.tit{font-size: 1.4rem;}
  .product-list .doc-container .doc-list>a{font-size: 1.3rem; padding: 10px 15px;}
  .product-list .doc-container .doc-list>a svg{margin-right: 2px;}
  .product-list .doc-container .doc-list>a.all{padding-left: 34px;}

  .product-list>.list>.item{width: 100%; padding: 15px; height: auto;}
  .product-list>.list>.item>a{width: 40%;}
  .product-list>.list>.item>a>.img{margin: 0; width: 100%; height: 0; padding-bottom: 100%; position: relative;}
  .product-list>.list>.item>a>.img>img{max-height: 100%; max-width: 100%; position: absolute; left: 0; top: 0;}

  .product-list>.list>.item>div{width: 55%;}
  .product-list>.list>.item .view{width: 130px; margin-top: 20px;}
  .product-list>.list .doc-container{width: 130px; margin-top: 12px;}
  .product-list>.list .doc-container .doc-list{width: 190px; position: absolute; box-sizing: border-box;}
}


/* 浜у搧璇︽儏椤 */
#main{background: #fff; padding: 30px 0 60px 0;}
#main>.wrap{display: flex; justify-content: space-between;}

#main .info{max-width: 55%;}
#main h1{font-size: 4rem; color: #2b2b2b; margin-bottom: 0;}
#main h2{font-weight: normal; font-size: 2.6rem; color: #2b2b2b; margin-top: 18px;}
#main .info .cls{font-size: 1.4rem; margin-top: 40px; color: #bbb; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei';}
#main .info .cls a{color: #bbb; text-decoration: underline;}
#main .info .cls a:hover{color: #19439a;}
#main .info .desc, #main .info .desc p, #main .info .desc div{font-size: 1.7rem; margin-top: 20px; line-height: 1.6; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei';}

#main .do{margin-top: 30px;}
#main .do .buy{display: inline-block; background: #5f8cec; color: #fff; padding: 12px 20px 13px 20px; font-size: 1.6rem;}
#main .do .buy:hover{background: linear-gradient(#85a8f1, #5f8cec);}
#main .do .buy::before{content: '\e611'; font-family: 'iconfont'; font-size: 1.7rem; margin-right: 10px;}
#main .do .tech{display: inline-block; border: 1px solid #5f8cec; color: #5f8cec; padding: 11px 19px 12px 46px; font-size: 1.6rem; margin-left: 17px; position: relative;}
#main .do .tech:hover{border: 2px solid #5f8cec; padding: 10px 18px 11px 45px;}
#main .do .tech::before{content: '\e60f'; font-family: 'iconfont'; font-size: 1.9rem; margin-right: 10px; position: absolute; left: 19px; margin-top: -1px;}
#main .do .tech:hover::before{left: 18px;}

#main .focus{max-width: 500px; margin-bottom: -30px; position: relative;}
#main .focus .swiper-slide{text-align: center;}
#main .focus .swiper-slide img{max-width: 500px; max-height: 400px;}
#main .focus .swiper-pagination{width: 100%;}
#main .focus .swiper-pagination-bullet{margin:0 4px 0 5px; width: 8px ; height: 8px;}
#main .focus .swiper-pagination-bullet-active{}

@media (max-width:1679px){ /*1440*/
  #main h1{font-size: 3.8rem;}
  #main h2{font-size: 2.4rem;}
  #main .info .desc, #main .info .desc p, #main .info .desc div{font-size: 1.6rem;}

  #main .do .buy{font-size: 1.5rem;}
  #main .do .tech{font-size: 1.5rem;}
}
@media (max-width:1439px){ /*1366*/
  #main .info .desc, #main .info .desc p, #main .info .desc div{font-size: 1.5rem;}
}
@media (max-width:1365px){ /*1280*/
  #main h1{font-size: 3.8rem;}
  #main h2{font-size: 2.4rem;}
  #main .info .cls{font-size: 1.3rem;}

  #main .focus{max-width: 400px;}
  #main .focus .swiper-slide img{max-width: 400px; max-height: 380px;}
}
@media (max-width:1279px){ /*mp*/
  #main{padding: 85px 15px 60px 15px;}
  #main>.wrap{display: block;}
  #main .info{max-width: 100%;}
  #main .focus{width: 100%; max-width: unset; margin: auto; margin-bottom: 0;}
  #main .focus .swiper-slide img{max-width: unset; max-height: 350px;}
}


#tag{display: flex;}
#tag>a{font-size: 1.6rem; padding: 16px 19px 17px 19px; border: 1px solid #e6e7e7; margin-right: -1px; border-bottom: 0px none; margin-bottom: -1px;}
#tag>a:hover{color: #5f8cec;}
#tag>a.active{background: #f6f7fb; color: #5f8cec; position: relative;}
#tag>a.active::before{content: ''; display: block; width: calc(100% + 2px); height: 2px; background: #5f8cec; position: absolute; left: -1px; top: -1px;}

@media (max-width:1365px){ /*1280*/
  #tag>a{font-size: 1.5rem;}
}
@media (max-width:1279px){ /*mp*/
  #tag{padding: 0 15px;}
  #tag>a:last-child{display: none;}
}

#content{background: #f6f7fb; border-top: 1px solid #e6e7e7; padding: 50px 0 100px 0; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei';}
#content .intro, #content .document, #content .certificate, #content .product{display: none;}
#content .intro dl{margin-bottom: 20px; margin-top: 40px; border-bottom: 1px dashed #ccc; padding: 0 20px 30px 0;}
#content .intro dl:first-child{margin-top: 0;}
#content .intro dl>dt{font-size: 3.2rem; color: #5f8cec; font-weight: bold;}
#content .intro dl>dd{font-size: 1.6rem; margin-top: 20px; line-height: 1.8;}
#content .intro dl>dd p, #content .intro dl>dd div{font-size: 1.6rem; line-height: 1.8; margin-bottom: 20px;}
#content .intro dl>dd p{max-width: 1200px;}
#content .intro dl>dd ul{padding-left: 20px; max-width: 1400px; box-sizing: border-box;}
#content .intro dl>dd ul li{list-style: disc; line-height: 1.4; margin-bottom: 10px;}

#content .document .title{color: #464646; font-size: 2.4rem;}
#content .document .list{border-top: 1px solid #eee; margin-top: 20px;}
#content .document .list>.item{border-bottom: 1px solid #eee; padding: 20px 0; font-size: 1.5rem;}
#content .document .list>.item a, #content .document .list>.item span{display: inline-block; padding-left: 2px;}
#content .document .list>.item .loading{display: inline-block; margin-left: 20px; vertical-align: middle; height: 16px;}
#content .document .list>.item a span{display: inline-block; margin-left: 2px;}
#content .document .list>.item a:hover span{text-decoration: underline; color: #5f8cec;}
#content .document .list>.item>span{margin-left: 20px; color: #bbb; font-family: 'Montserrat'; font-size: 1.35rem; letter-spacing: .04rem;}

#content .certificate .title{color: #464646; font-size: 2.4rem;}
#content .certificate .list{border-top: 1px solid #eee; margin-top: 20px;}
#content .certificate .list>a{border-bottom: 1px solid #eee; padding: 20px; width: 33.33333%; float: left; display: flex; box-sizing: border-box; align-items: center; position: relative;}
#content .certificate .list>a::after{content: ''; display: block; width: 0; height: 2px; background: #5f8cec; left: 0; bottom: -1px; position: absolute; transition: all .5s;}
#content .certificate .list>a:hover::after{width: 100%;}
#content .certificate .list>a img{max-width: 100px; height: 80px;}
#content .certificate .list>a span{display: inline-block; margin-left: 20px; font-size: 1.5rem;}
#content .certificate .list>a:hover span{color: #5f8cec;}


#content .product .wrap{display: flex; justify-content: space-between;}

@media (max-width:1679px){ /*1440*/

}
@media (max-width:1439px){ /*1366*/
  #content .intro dl>dt{font-size: 3rem;}
  #content .intro dl>dd{font-size: 1.5rem;}
  #content .intro dl>dd p, #content .intro dl>dd div{font-size: 1.5rem;}
}
@media (max-width:1365px){ /*1280*/
  #content .intro dl>dt{font-size: 2.8rem;}
  #content .intro dl>dd{font-size: 1.4rem;}
  #content .intro dl>dd p, #content .intro dl>dd div{font-size: 1.4rem;}
}
@media (max-width:1279px){ /*mp*/
  #content{padding: 50px 15px 50px 15px;}

  #content .document .list>.item>span{font-size: 1.3rem;}

  #content .certificate .list>a{padding: 15px; width: 100%; float: none;}
}


.fs{background: #f6f7fb; padding-bottom: 100px;}
.fs .wrap{display: flex;}
.fs .wrap>a{display: block; width: calc(20% - 2px); height: 0; padding-bottom: 10%; background: #5f8cec; margin-right: 2px; position: relative; overflow: hidden;}
.fs .wrap>a:last-child{margin-right: 0;}
.fs .wrap>a .img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #eee no-repeat center/cover;}
.fs .wrap>a::before{position: absolute; content: ''; display: block; width: 100%; height: 100%; background: rgba(0,0,0, .6); z-index: 1; transition: all .45s;}
.fs .wrap>a::after{position: absolute; content: ''; display: block; width: 100%; height: 100%; background: linear-gradient(#fb5483, #112a96); z-index: 2; transition: all .25s; opacity: 0;}
.fs .wrap>a:hover::before{opacity: 0;}
.fs .wrap>a:hover::after{opacity: .8;}
.fs .wrap>a>div{position: absolute; width: 100%; height: 100%; z-index: 3; left: 0; top: 0; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.fs .wrap>a .iconfont{color: #fff; font-size: 5.2rem; display: block; margin-top: -2px; position: relative; transition: all .25s;}
.fs .wrap>a:hover .iconfont{transform: scale(1.2); margin-top: 5px;}
.fs .wrap>a .icon-shimuchuguianzhuang{transform: scale(.96); top: 2px;}
.fs .wrap>a .icon-buildings_factory{transform: scale(.94); top: 1px;}
.fs .wrap>a .icon-taiyangnengdianchi{transform: scale(.95); top: 2px;}
.fs .wrap>a .icon-ditie{transform: scale(.93); top: 2px;}
.fs .wrap>a .tit{color: #fff; font-size: 1.5rem; display: block; margin-top: 10px; transition: all .25s; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei';}
.fs .wrap>a:hover .tit{margin-top: 30px;}

@media (max-width:1679px){ /*1440*/
  .fs .wrap>a .iconfont{font-size: 4.8rem;}
}
@media (max-width:1439px){ /*1366*/
  .fs .wrap>a .iconfont{font-size: 4.6rem;}
  .fs .wrap>a .tit{font-size: 1.4rem;}
}
@media (max-width:1365px){ /*1280*/
  .fs .wrap>a .iconfont{font-size: 4.2rem;}
  .fs .wrap>a .tit{font-size: 1.4rem;}
}
@media (max-width:1279px){ /*mp*/
  .fs .wrap{display: block; padding: 0 15px;}
  .fs .wrap>a{width: 100%; height: 0; padding-bottom: 50%; margin-right: 0; margin-bottom: 5px;}
  .fs .wrap>a .iconfont{font-size: 5.6rem;}
  .fs .wrap>a .tit{font-size: 1.6rem; margin-top: 15px; font-weight: 300;}
}