﻿/* dht */
/*====导航====*/
.center { position: static; position: relative; }
#nav { }
#nav ul { text-align: center; font-size: 0; margin-bottom: 0; }
#nav li { display: inline-block; margin: 0 5%; }
#nav li:first-child { background: none; }
#nav li:after { content: ""; width: 0; height: 3px; transform: translateX(-50%); background: #ca260b; position: absolute; bottom: 0px; left: 50%; z-index: 3; transition: all 0.5s; }
#nav li:hover:after { width: 100%; }
#nav li.on:after { bottom: 0px }
#nav li .a { display: block; text-align: center; position: relative; height: 70px; line-height: 70px; }
.a:hover { color: #1c94d3; }
#nav li .a p { line-height: 70px; height: 70px; font-size: 18px; color: #333; text-align: center; display: block; position: relative; z-index: 2; margin: 0; text-transform: uppercase; position: relative; }
#nav li .a p:after { content: ""; position: absolute; top: 34px; right: -16px; width: 10px; height: 5px; background: url(../images/sanjiao.png) no-repeat; }
#nav li .a strong { font-size: 12px; line-height: 14px; text-transform: uppercase; display: block; color: #bdc0c2; text-align: center; position: relative; z-index: 1 }
#nav li .a span { position: absolute; bottom: 20%; left: 50%; margin-left: -1.875rem; text-align: center; }
#nav li .a i { margin: 0 auto; text-align: center; z-index: 1; height: 3px; width: 0; background: #e3212a; overflow: hidden; display: none; }
#nav li.on .a p { color: #ca260b; margin: 0; }
#nav li.on .a p:after { content: ""; position: absolute; top: 34px; right: -16px; width: 10px; height: 5px; background: url(../images/sanjiao1.png) no-repeat; }
#nav li.on i { width: 100%; }
/*#nav li.on .a span{width: 3.75rem;height: 2px;background: #0054a3; color:#0054a3;}*/

#nav li .a:hover { color: #ca260b; }
#nav li .a:hover i { width: 100%;}
#nav li .a:hover p { color: #ca260b; }
#nav li .a:hover p:after { content: ""; position: absolute; top: 34px; right: -16px; width: 10px; height: 5px; background: url(../images/sanjiao1.png) no-repeat; }
#nav li.on .a:hover i { transform: rotateX(0); -webkit-transform: rotateX(0); -moz-transform: rotateX(0); color: #ca260b; }
#nav.title { position: relative }
/*#nav .list{width:20%;left: 20%;margin-left: -90px;max-height:0;position:absolute;top: 80px; border-top:2px solid #3B9766;z-index:0;-moz-transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease;opacity: 0;filter:alpha(opacity=0);-moz-transform:scale(0);-o-moz-transform:scale(0);-o-moz-transform:scale(0);-webkit-moz-transform:scale(0);transform: scale(0);}

#nav .list::before{ display: block; position:absolute;top:-10px;right:50%; overflow:hidden;width:0;height:0;border:10px solid #6CBB5A;border-color:#6CBB5A transparent;border-top:0; margin-right: -9px; content: "";}

#nav .list a{width: 100%;height:36px;line-height:36px;text-align:center;color:#222;display:block;font-size:14px;text-decoration:none;opacity:1;background-color:#fff;border-bottom:#e9ecf1 1px solid;-webkit-transition:opacity .4s,-webkit-transform .5s;-moz-transition:opacity .4s,-moz-transform .5s;-ms-transition:opacity .4s,-ms-transform .5s;transition:opacity .4s,transform .5s;}

#nav .list a:hover{color:#6CBB5A;}*/

#nav li:focus .list, #nav li:hover .list { max-height: 2000px; z-index: 10; opacity: 1; filter: alpha(opacity=100); -moz-transform: scale(1); -o-moz-transform: scale(1); -o-moz-transform: scale(1); -webkit-moz-transform: scale(1); transform: scale(1); }
#nav .l_chanpin .col-xs-12 { width: 200px; margin: 0 auto; }
#nav .l_chanpin:nth-of-type(2) .col-xs-12 { margin: 0 auto; }
#nav .l_chanpin:nth-of-type(3) .col-xs-12 { width: 640px; margin: 0 auto; margin-left: 39%; }
#nav .l_chanpin:nth-of-type(4) .col-xs-12 { width: 420px; margin: 0 auto; margin-left: 48%; }
#nav .l_chanpin:nth-of-type(5) .col-xs-12 { width: 640px; margin: 0 auto; margin-left: 50%; }
#nav .l_chanpin:nth-of-type(6) .col-xs-12 { width: 900px; margin: 0 auto; margin-left: 50%; }
#nav .l_chanpin:nth-of-type(8) .col-xs-12s { width: 420px; margin: 0 auto; margin-left: 50%; }
#nav .l_chanpin .dui-dropdown-menu { background: #f5f6f8; position: absolute; top: 100%; left: 0; height: 0; z-index: 10; -moz-transition: all 0.36s ease-in-out; -webkit-transition: all 0.36s ease-in-out; -o-transition: all 0.36s ease-in-out; -ms-transition: all 0.36s ease-in-out; transition: all 0.36s ease-in-out; border-radius: 0 0 12px 12px }
#header.fiexd #nav .l_chanpin .dui-dropdown-menu { top: 100%; }
#nav .l_chanpin .dui-dropdown-menu .list01 { width: 100%; position: relative; display: block; opacity: 1; filter: alpha(opacity=100); -moz-transform: scale(1); -o-moz-transform: scale(1); -o-moz-transform: scale(1); -webkit-moz-transform: scale(1); transform: scale(1); text-align: center; display: none; float: left; overflow: hidden; }
#nav .l_chanpin { }
#nav .l_chanpin .dui-dropdown-menu .list01 a { line-height: 35px; text-align: center; color: #222; display: block; font-size: 14px; text-decoration: none; opacity: 1; -webkit-transition: opacity .4s, -webkit-transform .5s; -moz-transition: opacity .4s, -moz-transform .5s; -ms-transition: opacity .4s, -ms-transform .5s; transition: opacity .4s, transform .5s; }
#nav .l_chanpin .dui-dropdown-menu .list01 a:hover { color: #1c94d3; }
#nav .l_chanpin .dui-dropdown-menu .list01 .protp { width: 100%; height: 0; overflow: hidden; padding-bottom: 70%; }
#nav .l_chanpin .dui-dropdown-menu .list01 .protp img { width: 100%; overflow-x: hidden; overflow-y: hidden; position: relative; z-index: 1; transition-delay: 0s; transition-duration: 1s; transition-property: all; transition-timing-function: ease; }
#nav .l_chanpin .dui-dropdown-menu .list01:hover .protp img { transform: scale(1.05, 1.05); }
#nav .l_chanpin:hover .dui-dropdown-menu { height: auto; padding: 10px 0; }
#nav .l_chanpin:hover .dui-dropdown-menu .list01 { display: block }
.language { float: right; display: inline-block; vertical-align: middle; font-size: 16px; color: #333; text-transform: uppercase; line-height: 70px; padding-left: 25px; background: url(../images/icon_language.png) no-repeat left center/18px auto; position: relative; }
.language .t { display: block; padding-right: 10px; background: url(../images/jt1.png) no-repeat right center; }
.language .aBox { border: 1px solid #dfdfdf; text-align: center; background: #fff; opacity: 0; margin-top: 0px; position: absolute; right: 0; top: 100%; background: #fff; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transition: opacity .3s, margin .3s; -webkit-transition: opacity .3s, margin .3s; -ms-transition: opacity .3s, margin .3s; -moz-transition: opacity .3s, margin .3s; -o-transition: opacity .3s, margin .3s; }
.language .aBox::before { position: absolute; left: 0; bottom: 100%; content: ""; width: 100%; height: 5px; background: url(../images/jt4.png) no-repeat center; }
.language:hover .aBox { margin-top: 0; opacity: 1; z-index: 2; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); }
.language .aBox a { display: block; font-size: 14px; line-height: 20px; color: #888888; padding: 7px 44px; box-sizing: border-box; }
.language .aBox a+a { border-top: 1px solid #eeeeee; }
.language .aBox a:hover { color: #1c94d3; background: #eef1f6; }
#nav li:hover .erji { transition: all 0.5s; display: block; }
.erji { padding-top: 0; display: none; position: absolute; top: 100%; left: 0; z-index: 2; width: 100%; padding: 1% 5%; box-sizing: border-box; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,0.2); }
.erji dl { overflow: hidden; position: relative; }
.erji dl dd { font-size:16px; line-height:46px; text-align: center; transition:all 0.5s; border-right:1px solid #e2e2e2; padding:0 5%; display:inline-block; }
.erji dl dd a { display:inline-block; color:#444; }
.erji dl dd:hover a { color: #ca260b; }
.erji dl dd:last-child { border-right:0px solid #e2e2e2;}


.banner .swiper-slide { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.banner .info { width: 45%; }
.banner .subtitl { display: inline-block; padding: 0 2em; font-size: 16px; line-height: 2.5em; font-weight: bold; color: #333; background: #02b0ca; border-radius: 2em; }
.banner .img { width: 45%; }
.banner .img img { width: 100%; border-radius: 5%; overflow: hidden; }
/*按钮定制化*/
.banner .banner-btn { display: flex; justify-content: center; align-items: center; position:absolute; bottom:0; right:33%;}
.banner .banner-btn .swiper-button-prev,  .banner .banner-btn .swiper-button-next,  .banner .banner-btn .swiper-pagination { position: static; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 10px; border: 1px solid #ebebeb; margin: 0 !important; box-sizing: content-box; transition: all 0.4s; background:#fff; }
.banner .banner-btn .swiper-button-prev:hover,  .banner .banner-btn .swiper-button-next:hover { color: red; }
.banner .banner-btn .swiper-button-prev:after,  .banner .banner-btn .swiper-button-next:after { display: none; }
.banner .banner-btn .swiper-button-prev svg,  .banner .banner-btn .swiper-button-next svg { width: 16px; height: 16px; fill: #333; transition: all 0.4s; }
.banner .banner-btn .swiper-button-prev:hover svg,  .banner .banner-btn .swiper-button-next:hover svg { fill: red;}
