@charset "utf-8";
/* CSS Document */
body{ background-color:#FFF; }

aside{width: 100%;height: 0px;background: rgba(0,0,0,0.8);position: fixed;top: 0;z-index: 9999; transition:all .6s;overflow: hidden;text-align: left;}
aside .return{color: white;text-align: right;margin-top: 20px;width: 100%;overflow: hidden;}
aside .return span{cursor: pointer;float: right;margin-right: 30px;font-size: 25px;color: white;}
aside ul{}
aside ul li a{color: white;font-size: 20px;}
aside ul li{line-height: 40px;border-bottom: 1px solid white;box-sizing: border-box;width: 100%;padding-left: 15%;}
aside ul li p{margin: 0 0 10px;}


.header{ width:100%; height:auto; box-sizing:border-box;/* background-image:url(../images/header_bg.jpg); */ position:fixed; left:0; top:0;  z-index:100;  transition:all 0.3s linear;-webkit-transition:all 0.3s linear;}
.hd-con{display: flex;flex-direction: row;flex-wrap: nowrap;justify-content:space-between;align-items:stretch;padding-top: 18px;padding-bottom: 17px;}
.logo{display:block;width: 481px;}
.logo img{ width:100%;}
.phone{ flex:1; display: flex; flex-direction: column; justify-content: center; flex-wrap: nowrap; align-items: center; }
.phone p{width: 100%;font-weight: normal;font-size: 16px;color: #333333;text-align: right;}
.phone p span{font-size: 25px;color: #e78e40;}
.nav{width:100%;height:auto;box-sizing:border-box;background-color:rgba(232,232,232,1);border-top: 1px solid #0b1a36;}
.nav-list > ul > li{width: 12.5%;float: left;text-align: center;}
.nav-list > ul > li > a{width:100%;display: block;text-align: center;font-size: 18px;line-height:50px;height: 50px;color: #333333;transition: all 0.5s linear;-webkit-transition: all 0.5s linear;}
.nav-list > ul > li > a.on,.nav-list > ul > li > a:hover{background-color: #2652a8;color: #fff  !important;}

.menu{ width:30px; height:30px; cursor:pointer; display:none; align-self: center;}
.menu > h3{ width:30px; height:30px; font-weight:normal; text-align:center; line-height:20px; color: #dab968; }
.menu > h3 > i{ font-size:18px;}
.header-blank{background-color:transparent;height: 86px;}


/*滚动后导航*/
.scrolltop{ background-color:rgba(245,245,245,1); border-bottom:1px solid rgba(245,245,245,1);  animation: fadeInDown 0.5s ease-in-out; -webkit-animation: fadeInDown 0.5s ease-in-out; z-index:510;}
.scrolltop > h3.tx{ color:#333;}
/*主体*/
.main{   height:auto;   }
/*底部*/
.server{ width: 100%; min-width: 320px; background-image: url(../images/footer.jpg);}
.servMain{ box-sizing: border-box; padding-top: 2%; padding-bottom: 2%;display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; }
.servContact{ width: 100%; color: rgba(255,255,255,0.6); display: flex; flex-direction: row; flex-wrap: nowrap;  justify-content: flex-end; align-items: stretch;}
.servContact > p{width: 70%;display: flex;flex-direction: column;flex-wrap: nowrap;align-items: center;}
.servContact > p > img{ width:100%; }
.servContact > div{ width: 100%; font-size: 14px; box-sizing: border-box; padding-left:4%; }
.servContact > div > h3,.servContact > div > p{ width: 100%; font-weight: normal; font-size: 16px;line-height: 2;}
.servContact > div > p{ line-height: 2.143; font-size: 14px; }
.QZcode{ width: 120px; flex-shrink: 0; }
.QZcode > p{ width: 100%; overflow: hidden; }
.QZcode > p > img{ width: 100%; }
.QZcode > h3{ width: 100%; font-size: 14px; color: rgba(255,255,255,0.6); line-height: 3; }

.foot-blank{ height:auto; width:100%; }
.footer{box-sizing:border-box;background-color: #1b1b21;height: auto;/* padding-top: 3%; padding-bottom:3%;*/}
.footer > .c-con{padding-top: 1%; padding-bottom: 1%;}
.copyright{ width: 100%; font-size: 14px; line-height: 1.6; text-align: center; color: rgba(255,255,255,0.6); }
.copyright a{color: rgba(255,255,255,0.6);}





/*首页*/
/*焦点图*/
.flash{ width:100%; position: relative; }
.swiper1 .swiper-pagination {right:0; display:inline-block;  padding-top:2%; padding-bottom:1.5%; bottom:0; left:auto; text-align:center; padding-right:10px; box-sizing:border-box; display:none;}
.swiper1 .swiper-pagination-bullet{opacity:1; margin:0 5px!important;width:50px; height:4px; border-radius:0%; box-sizing:border-box; /*border:1px solid #FFF;*/ background-color: #3d5c9d; }
.swiper1 .swiper-pagination-bullet-active{background-color:#fcd500;}
.swiper1 .swiper-slide{ position:relative;}
.swiper1 .swiper-slide img{ width:100%;}
.swiper1 .swiper-button-next,.swiper1 .swiper-button-prev{ color:rgba(255,255,255,0.2); /*background-color:rgba(0,0,0,0.7); */border-radius:0%; height:128px; width:33px;/* line-height:40px;*/ text-align:center; background-image:url(none); cursor:pointer; margin-top:-64px; box-sizing:border-box;  } 
.swiper1 .swiper-button-next{ right:10px; }
/*.swiper1 .swiper-button-next:hover,.swiper1 .swiper-button-prev:hover{ color:rgba(237,31,36,1) !important; } */
/*.swiper1 .swiper-button-next i,.swiper1 .swiper-button-prev i{ font-size:1.0rem; } */
.swiper1 .swiper-button-next img,.swiper1 .swiper-button-prev img{ width:100%;  }

.product{ box-sizing: border-box; padding-top: 5%; padding-bottom:5%;}
.product > header{ width: 100%; margin-bottom:4%; }
.product > header > h3,.product > header > p{ width:100%; font-weight: normal; text-align: center; line-height: 2; font-size: 22px;}
.product > header > h3{ font-size: 60px; line-height: 1.1; font-family: constantia; }
.prodList{width: 100%;}
.prodList > ul > li{width: 23%;float: left;position: relative;overflow: hidden;cursor: pointer;height: 235px;margin-right:2%;margin-bottom:2%;}
.prodList > ul > li:nth-of-type(4n){ margin-right:0; }
.prodList > ul > li > .pl-img{overflow: hidden;border: 1px solid #dcdcdc;}
.prodList > ul > li > .pl-img img{width: 100%;transition: all 0.5s linear;-webkit-transition: all 0.5s linear;}
.prodList > ul > li > .pl-about{width: 100%;}
.prodList > ul > li > .pl-about > a{width: 100%;height: 37px;line-height: 37px;box-sizing: border-box;color: #333333;display: flex;flex-direction: column;justify-content: center;flex-wrap: nowrap;align-items: center;}
.prodList > ul > li > .pl-about > a > h3{width:100%;font-size:16px;text-align: center;font-weight: normal;transition: all 0.5s linear;-webkit-transition: all 0.5s linear;}
.prodList > ul > li > .pl-about > a > p{  display: inline-block; padding-bottom:10px; font-size: 14px; text-transform: uppercase; position: absolute; left:10%; bottom:10%; color: #FFF !important; opacity: 0;transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.prodList > ul > li:hover > .pl-img img{ opacity: 0.8; transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); }
.prodList > ul > li:hover > .pl-about > a{background-color: #2652a8;color: #FFF;}
.prodList > ul > li:hover > .pl-about > a:hover{color: #FFF!important;}
.topBanner,.centerBanner,.btmBanner{ width: 100%; position: relative; overflow: hidden; }
.topBanner img,.centerBanner img,.btmBanner img{ width: 100%; }
.topBanner > section{ width:100%; height: 100%; position:absolute; left:0; top:0; display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: center; align-items: center; }
.topBanner > section > h3,.topBanner > section > p{ width: 100%; line-height: 1.8; font-size: 22px; color: #FFF; text-align: center; font-weight: normal; text-transform: uppercase; box-sizing: border-box; padding-left:10%; padding-right: 10%; }
.topBanner > section > h3 a,.topBanner > section > p a,.topBanner > section > h3 a:hover,.topBanner > section > p a:hover{ color: #FFF !important; }

.centerBanner > section{ width:100%; height: 100%; position:absolute; left:0; top:0; display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: center; align-items: center; }
.centerBanner > section > h3,.centerBanner > section > p{ width: 100%; line-height: 1.8; font-size: 22px; color: #FFF; text-align: center; font-weight: normal; text-transform: uppercase; box-sizing: border-box; padding-left:10%; padding-right: 10%; }
.centerBanner > section > h3{ font-size: 40px; }
.centerBanner > section > h3 a,.centerBanner > section > p a,.centerBanner > section > h3 a:hover,.centerBanner > section > p a:hover{ color: #FFF !important; }

.about{ box-sizing: border-box; padding-top: 4%; padding-bottom:6%; background-image: linear-gradient(to right,#ecebeb, #CCC)}
.about > header{ margin-bottom:1%; }
.about > header > h3,.about > header > p{ width:100%; font-weight: normal; text-align: center; line-height: 2; font-size: 22px;}
.about > header > h3{font-size: 60px;line-height: 1.1;text-align: left;font-family: constantia;text-transform: uppercase;}
.aboutContent{ display: flex; flex-direction: row-reverse; flex-wrap: nowrap; justify-content: flex-start; align-items:stretch; }
.ac-content{ flex: 1; box-sizing: border-box; padding-right:3%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start;}
.ac-content > h3{ display: inline-block; line-height: 2; font-weight: normal; font-size: 22px; position: relative; }
.ac-content > h3::after{content: ' '; width: 100%; height: 2px; background-color: #dab968; position: absolute; left:0; bottom:0;}
.ac-content > div{ line-height: 2; font-size: 16px;text-indent: 2em; }
.ac-content > a{  display: block; width: 28.5%; overflow: hidden; }
.ac-content > a img{ width: 100%; }
.ac-img{ width: 50%; overflow: hidden; }
.ac-img img{ width: 100%; }

.btmBanner > section{ width:100%; height: 100%; position:absolute; left:0; top:0; display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: center; align-items: center; }
.btmBanner > section > h3,.btmBanner > section > p{ width: 100%; line-height: 1.4; font-size: 14px; color: #FFF; text-align: center; font-weight: normal; text-transform: uppercase; box-sizing: border-box; padding-left:10%; padding-right: 10%; }
.btmBanner > section > h3{ font-size: 36px; }
.btmBanner > section > h3 a,.btmBanner > section > p a,.btmBanner > section > h3 a:hover,.btmBanner > section > p a:hover{ color: #dab968 !important; }


.cases,.news{width: 100%;background-color: #f6f6f6;}
.cases > .c-con,.news > .c-con{box-sizing: border-box;padding-top: 5%;padding-bottom: 5%;}
.cases > .c-con > header,.news > .c-con > header{ width: 100%; margin-bottom:4%; }
.cases > .c-con > header > h3,.cases > .c-con > header > p,.news > .c-con > header > h3,.news > .c-con > header > p{ width:100%; font-weight: normal; text-align: center; line-height: 2; font-size: 22px;}
.cases > .c-con > header > h3,.news > .c-con > header > h3{ font-size: 60px; line-height: 1.1; font-family: constantia; text-transform: uppercase; }
.news{ background-image: url(../images/news.png); background-position: center top; background-repeat: no-repeat; background-size: cover; background-color: #f1f1f1; }
.news > .c-con > header{ background-image: url(../images/news-header.png); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; margin-bottom:4%; padding-bottom:4%; }

.caseList{ width: 100%; }
.swiper2 > .swiper-wrapper > .swiper-slide img{width:100%;
    height:auto;
    transition:all .4s;
    -moz-transition:all .4s;
    -o-transition:all .4s;
    -webkit-transition:all .4s;}

.swiper2 .swiper-pagination2{display:none}
.caseList > ul > li{ width: 23.8%; float: left; margin-right:1.6%;position: relative; overflow: hidden; }
.caseList > ul > li:nth-of-type(4n){ margin-right:0; }
.caseList > ul > li > a{ width: 100%; display: block; background-color: #FFF; overflow: hidden; transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.caseList > ul > li > a > p{ width: 100%; height: 100%; overflow: hidden; }
.caseList > ul > li > a > p img{ width: 100%; transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.caseList > ul > li > a > h3{ width: 100%; height: 50px; line-height: 50px; overflow: hidden; text-align: center; font-weight: normal; font-size: 18px; white-space: nowrap; text-overflow: ellipsis; position: relative; }
.caseList > ul > li > a > h3::after{ content: ' '; width:0; height: 2px; background-color: #dab96a; position: absolute; left:0; bottom:0; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; }
.caseList > ul > li:hover > a{background-color: #6a656b; color: #FFF !important;}
.caseList > ul > li:hover > a > p img{ opacity: 0.8; transform: scale(1.06,1.06); -webkit-transform: scale(1.06,1.06); }
.caseList > ul > li:hover > a > h3::after{ width:100%; }

.newsMain{ width: 100%; display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: nowrap; align-items: stretch; }
.news-hot{ width: 48%; display: block; overflow: hidden; position: relative; }
.news-hot > img{ width: 100%; transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.news-hot > h3{ width:100%; background-color: rgb(0,0,0,0.5); box-sizing: border-box; height: 40px; line-height: 40px; padding:0 10px; font-weight: normal; font-size: 14px; transform: translateY(50px); -webkit-transform: translateY(50px); opacity: 0; position: absolute; left:0; bottom:0; text-align: left; color: #FFF !important; transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.news-hot:hover > img{ transform: scale(1.02,1.02); -webkit-transform: scale(1.02,1.02); opacity: 0.8; }
.news-hot:hover > h3{ opacity: 1; transform: translateY(0); -webkit-transform: translateY(0);}
.news-list{ flex:1; box-sizing: border-box; padding-left:2%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; }
.news-list > .nl-item{ width:100%; box-sizing: border-box; background-color: #FFF; padding:10px 10px 10px 0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content:flex-start; align-items: center; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; cursor: pointer;}
.news-list > .nl-item > h3{ width: 100px; position: relative; transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.news-list > .nl-item > h3::after{ content: ' '; width: 1px; height: 30px; background-color: #999; position: absolute; right:0; top:50%; margin-top: -15px; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; }
.news-list > .nl-item > h3 > p{ width:100%; text-align: center; font-weight: normal; font-size: 14px; line-height: 20px; height: 20px; overflow: hidden; }
.news-list > .nl-item > h3 > p:nth-of-type(1){ font-weight: bold; line-height: 25px; height: 25px;}
.news-list > .nl-item > a{ flex:1; font-size: 16px; height: 24px; line-height: 24px; overflow: hidden; display: block; box-sizing: border-box; padding-left:3%; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; }

.news-list > .nl-item:hover{ background-color: #e70012; }
.news-list > .nl-item:hover > h3{ color: #FFF; }
.news-list > .nl-item:hover > h3::after{ background-color: #FFF;}
.news-list > .nl-item:hover > a{ color: #FFF !important }