@charset "utf-8";

@font-face{
   font-family:'num'; 
   src: url('../fonts/num.ttf');
}
@font-face{
   font-family:'title'; 
   src: url('../fonts/title.ttf');
}
main{-webkit-transition:-webkit-transform 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s;transition:transform 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s;overflow: hidden;}
body.active main{transition-delay:0.1s;-webkit-transform: translate3d(100vw, 0px, 0px);transform: translate3d(100vw, 0px, 0px)}
header{ position: fixed; z-index: 9; left: 0; top: 0; width: 100%; height: 190px; background: #fff; transition: 0.5s;}
header.active{height: 120px; }
.headbox{width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 100%;}
.logo{ width: 280px; transition: 0.5s;}
.logo img{display: block; width: 100%; }
header.active .logo{width: 220px;}
.head_r{display: flex;height: 100%; align-items: center;}

.menuBox{display: flex;align-items: center; flex-wrap: wrap;}
.menuBox a{display: block;  font-size: 18px; color: #888; margin-left: 50px; position: relative; overflow: hidden;height: 30px; transition: 0.3s;}
.menuBox a i{display: block; width: 100%; text-align: center;transition: 0.3s; height: 30px; line-height: 30px;}
.menuBox a:hover i:nth-child(1){transform: translateY(-30px);}
.menuBox a:hover i:nth-child(2){transform: translateY(-30px);}
.menuBox a:hover{ color: #bb1b21;}
.menuBox a.on{color: #bb1b21;}
.menuBox a.on i:nth-child(1){transform: translateY(-30px);}
.menuBox a.on i:nth-child(2){transform: translateY(-30px);}




.mBtn{ width: 30px;  display: flex; justify-content: center; align-items: center; cursor: pointer;  transition: 0.5s; display: none;}
.mBtn span{ display: block;  width: 26px;}
.mBtn span i{width: 100%; height: 2px; background: #606060; display: block; margin: 0 auto; margin-top: 6px; transition: 0.5s;}
.mBtn span i:first-child{margin-top: 0;}
.mBtn.active span i:nth-child(1){transform: rotate(45deg) translateY(5px) translateX(5px);}
.mBtn.active span i:nth-child(2){transform: rotate(-45deg) translateY(-1px) translateX(1px);}
.mBtn.active span i:nth-child(3){ width: 4px;}
.m_menu{width: 100vw; height: 100vh; position: fixed; z-index: 999999; left: -100vw; top: 0; background: #000b34; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out;  display: flex; justify-content: center; flex-wrap: wrap; align-items: center;}
.m_menu.active{left: 0; }



.index_banner{width: 100%; overflow: hidden; position: relative; margin-top: 190px; --swiper-navigation-size: 0;}
.banner_swiper{width: 100%; }
.banner_swiper .swiper-slide{overflow: hidden;width: 100%;}
.banner_swiper .swiper-slide img{display: block; width: 100%;}

.banner_swiper .swiper-button-prev{width: 100px!important; height: 73px!important;  cursor: pointer;  display: flex; align-items: center; transform: translateY(-50%);  left: 0; }
.banner_swiper .swiper-button-prev em{display: block; transition: 0.3s; }
.banner_swiper .swiper-button-prev em img{display: block; width: 37px; height: 73px;}
.banner_swiper .swiper-button-prev i{display: block; width: 0; height: 1px; background: #fff;transition: 0.5s;}
.banner_swiper .swiper-button-prev:hover i{width: 30px;}
.banner_swiper .swiper-button-next{width: 100px!important; height: 73px!important;  cursor: pointer; transition: 0.3s; display: flex; align-items: center; transform: translateY(-50%);right: 0;}
.banner_swiper .swiper-button-next em{display: block; transition: 0.3s;  }
.banner_swiper .swiper-button-next em img{display: block; width: 37px; height: 73px;}
.banner_swiper .swiper-button-next i{display: block; width: 0; height: 1px; background: #fff;transition: 0.5s;}
.banner_swiper .swiper-button-next:hover i{width: 30px;}


.about_banner{width: 1400px; margin: 0 auto; background: url(../img/aboutbg.jpg) no-repeat center; background-size: cover; margin-top: 60px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; box-sizing: border-box; padding: 50px;}
.about_banner h1{font-size: 24px; color: rgba(255,255,255,.6); text-transform: uppercase;font-family: 'title';}
.about_banner h2{color: #fff; font-size: 30px;}

.home_box{width: 1400px; margin: 0 auto; margin-top: 80px;}

.home_title h1{color: #aaa; font-size: 68px; font-family: 'title'; line-height: 1; text-transform: uppercase; }
.home_title span{ display: flex; align-items: center; justify-content: space-between;}
.home_title span p{font-size: 24px;}
.home_title span a{display: flex; align-items: center; }
.home_title span a span{ width: 42px; height: 9px; display: flex; align-items: center; position: relative;transition: 0.3s;}
.home_title span a span i{ width: 100%;height: 1px; background: #000;transition: 0.3s;}
.home_title span a span b{display: block; width: 1px; height: 9px; background: #bb1b21; position: absolute; right: 5px; top: 0;}
.home_title span a em{display: block; margin-right: 10px;transition: 0.3s;}
.home_title span a:hover em{ color: #bb1b21;}
.home_title span a:hover span{width: 52px;}
.home_title span a:hover span i{background: #bb1b21;}

.about_tx{ margin-top: 60px; font-size: 18px; color: #999;}
.about_tx p{margin-top: 10px;}
.about_tx p:first-child{margin-top: 0;}
.about_tx p:nth-child(2){font-weight: bold; color: #000;}

.about_more{margin-top: 60px; overflow: hidden;}
.about_more a{display: flex; align-items: center; float: left; }
.about_more a span{ width: 42px; height: 9px; display: flex; align-items: center; position: relative;transition: 0.3s;}
.about_more a span i{ width: 100%;height: 1px; background: #000;transition: 0.3s;}
.about_more a span b{display: block; width: 1px; height: 9px; background: #bb1b21; position: absolute; left: 5px; top: 0;}
.about_more a em{display: block; margin-left: 10px;transition: 0.3s;}
.about_more a:hover em{ color: #bb1b21;}
.about_more a:hover span{width: 52px;}
.about_more a:hover span i{background: #bb1b21;}

.nums{border-bottom: 1px #ddd solid;border-top: 1px #ddd solid; margin-top: 60px; display: flex; padding: 40px 0;}
.numitem{width: 33.3333%; border-right: 1px #ddd solid; text-align: center; padding: 20px 0;}
.numitem:last-child{border-right: 0;}
.numitem span{display: flex;align-items: flex-start; justify-content: center;}
.numitem span p{font-size: 52px; line-height: 0.8;font-weight: bold;}
.numitem span b{font-weight: bold; font-size: 18px; }
.numitem:nth-child(2) span{align-items: flex-end;}
.numitem:nth-child(2) span b{font-size: 14px;}
.numitem h1{font-size: 18px; margin-top: 20px;}
.numitem h2{color: #999;}

.futitle{ color: #999; margin-top: 20px; font-size: 18px;}

.fuwus{display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 60px;}
.fuwu_list{width: calc(25% - 20px); background: #eee; padding-bottom: 30px;}
.fuwu_title{text-align: center; color: #fff; height: 136px; overflow: hidden; width: 100%;}
.fuwu_title h1{font-size: 24px; margin-top: 30px;}
.fuwu_title h2{text-transform: uppercase;box-sizing: border-box; padding: 0 30px; margin-top: 15px; word-break: break-all;}
.fuwu_list:nth-child(1) .fuwu_title{background: url(../img/fuwu1.jpg) no-repeat center;background-size: cover; }
.fuwu_list:nth-child(2) .fuwu_title{background: url(../img/fuwu2.jpg) no-repeat center;background-size: cover; }
.fuwu_list:nth-child(3) .fuwu_title{background: url(../img/fuwu3.jpg) no-repeat center;background-size: cover; }
.fuwu_list:nth-child(4) .fuwu_title{background: url(../img/fuwu4.jpg) no-repeat center;background-size: cover; }

.fuwu_small{text-align: center; font-size: 16px; margin-top: 30px; color: #999; line-height: 2;}
.fuwu_small p{transition: 0.3s;}
.fuwu_small p:hover{ color: #000;}
.fuwu_icon{width: 80px; height: 80px; border: 1px #aaa solid; border-radius: 50%; margin: 0 auto; margin-top: 30px; display: flex; align-items: center; justify-content: center; line-height: 80px;}
.fuwu_icon::before{color: #aaa; font-size: 32px;}
.fuwu_list:nth-child(1) .fuwu_icon::before{content: "\e629";}
.fuwu_list:nth-child(2) .fuwu_icon::before{content: "\e65d";}
.fuwu_list:nth-child(3) .fuwu_icon::before{content: "\f228";}
.fuwu_list:nth-child(4) .fuwu_icon::before{content: "\e643";}

.casebox{margin-top: 60px; display: flex; flex-wrap: wrap;}
.casebox a{display: block; position: relative; width: 33.3333%;}
.casebox a img{display: block; width: 100%;}
.casebox a span{display: block; width: 100%;height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,.6); opacity: 0; transition: 0.5s; display:flex; align-items: center; align-content: center; justify-content: center; color: #fff; flex-wrap: wrap; overflow: hidden;}
.casebox a span h1{font-size: 24px;width: 80%;  text-align: center;word-wrap:break-word; white-space:nowrap;overflow: hidden;text-overflow:ellipsis;}
.casebox a span h2{color: rgba(255,255,255,.7); margin-top: 10px; font-style: italic; width: 100%;text-align: center;}
.casebox a:hover span{opacity: 1;}

.newsbox{margin-top: 60px; position: relative;--swiper-navigation-size: 0;}
.news_swiper{width: 100%;}
.news_swiper .swiper-slide{width: 100%;box-sizing: border-box; padding: 1px;}
.newsitem{display: block; width: 100%; box-sizing: border-box!important; background: #eee; padding: 30px; transition: 0.3s;}
.newsitem i{font-size: 58px; font-family: 'num';}
.newsitem span{display: block; margin-top: 30px;}
.newsitem span h1{font-size: 18px;word-wrap:break-word; white-space:nowrap;overflow: hidden;text-overflow:ellipsis;transition: 0.3s;}
.newsitem span h2{color: #999; margin-top: 8px;}
.newsitem em{
display: block;text-align: justify; color: #666; line-height: 1.6;  margin-top: 50px; transition: 0.3s;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.newsitem p{margin-top: 50px;}
.newsitem:hover{background: #f8f8f8;}
.newsitem:hover span h1{color: #BB1B21;}
.newsitem:hover em{color: #aaa;}

.news_btn{position: relative; width: 100%;margin-top: 60px; height: 38px;}

.newsbox .swiper-button-prev{width: 88px!important; height:38px!important;   cursor: pointer;  display: flex; align-items: center; justify-content: center;  top: 0; bottom: auto;  color: #000; font-size: 32px; left: 50%; right: auto; margin-left: -88px; transition: 0.3s;}
.newsbox .swiper-button-prev::before{content: "\e609"; transform: rotate(180deg);}
.newsbox .swiper-button-prev:hover{color: #BB1B21;}
.newsbox .swiper-button-next{width: 88px!important; height:38px!important;   cursor: pointer;  display: flex; align-items: center; justify-content: center;  top: 0; bottom: auto;  color: #000; font-size: 32px; right: 50%; left: auto; margin-right: -88px;transition: 0.3s;}
.newsbox .swiper-button-next::before{content: "\e609";}
.newsbox .swiper-button-next:hover{ color: #BB1B21;}

.brand_title{text-align: center;}
.brand_title h1{font-size: 42px;}
.brand_title h2{font-size: 24px; color: #999; margin-top: 8px;}
.brands{display: flex; flex-wrap: wrap; margin-top: 40px;}
.brands span{width: calc(20% - 12px); margin-right: 15px; margin-top: 15px; transition: 0.3s; }
.brands span:nth-child(5n){margin-right: 0;}
.brands span img{display: block; width: 100%;}
.brands span:hover{transform: translateY(-10px);}


footer{width: 1400px; margin: 0 auto; margin-top: 80px;}
.foot_top{display: flex; justify-content: space-between; border-top: 1px #ccc solid; padding-top: 50px; flex-wrap: wrap; overflow: hidden; width: 100%;}

.foot_title{font-size: 24px; line-height: 24px; margin-top: 10px; }

.foot_about{width: 320px;}
.foot_about em{ width: 236px; display: block;}
.foot_about em img{display: block; width: 100%;}
.foot_about span{display: block;  margin-top: 34px; }
.foot_about span h1{font-size: 18px;}
.foot_about span h2{color: #999; text-align: justify; line-height: 1.6; margin-top: 20px;}

.contacts_box{display: flex; flex-wrap: wrap; justify-content: space-between;}
.foot_contact{width: 260px;}
.foot_contact:nth-child(2){margin-left: 50px;}
.contacts{margin-top: 36px;color: #999;  }
.contacts p{margin-top: 10px;}

.foot_focus{width: 130px;}
.ma{width: 128px; border: 1px #ddd solid; margin-top: 40px;}
.ma img{display: block; width: 100%;}
.fenxiang{display: flex; justify-content: space-between; margin-top: 10px;}
.fenxiang a{ width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px #ddd solid; transition: 0.3s;}
.fenxiang a::before{display: block; color: #999; font-size: 18px;}
.fenxiang a:nth-child(1)::before{content: "\e6c4";}
.fenxiang a:nth-child(2)::before{content: "\e882";}
.fenxiang a:nth-child(3)::before{content: "\e650";}
.fenxiang a:hover{border: 1px #000 solid; }
.fenxiang a:hover::before{color: #000;}

.foot_center{display: flex; justify-content: space-between;border-top: 1px #ccc solid; padding: 30px 0; flex-wrap: wrap; margin-top: 50px; color: #999;}
.foot_center a{color: #999; transition: 0.3s;}
.foot_center a:hover{color: #000;}

.foot_links{border-top: 1px #ccc solid; padding: 30px 0; }
.foot_links p{font-size: 18px;}
.foot_links span{display: flex;flex-wrap: wrap;}
.foot_links span a{display: block; margin-right: 20px; color: #999;transition: 0.3s; margin-top: 10px;}
.foot_links span a:hover{color: #000;}

.navtext{width: 1400px; margin: 0 auto; margin-top: 220px; display: flex; align-items: center; justify-content: space-between;}
.navtext_left{display: flex; flex-wrap: wrap; font-size: 42px; width: 100px; line-height: 1.2; justify-content: flex-end;}
.navtext_right{ width: 700px; }
.navtext_right h1{font-size: 52px; color: #ddd;}
.navtext_right h2{font-size: 24px; text-align: justify;}

.fybox{width: 1400px; margin: 0 auto; margin-top: 80px; border-top: 1px #ddd solid; padding-top: 60px; position: relative;}
.about_box{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.about_pic{width: 360px;}
.about_pic img{display: block; width: 100%;}
.about_left{width: calc(100% - 440px);}

.fy_title{}
.fy_title h1{font-size: 32px;}
.fy_title h2{font-size: 16px; color: #999;}
.about_info{line-height: 1.8; margin-top: 30px; font-size: 16px; color: #999;}
.about_info span{display: block; text-align: justify; margin-top: 20px;}
.name{font-size: 32px; margin-top: 30px; font-weight: bold;}

.wenhuabox{background: url(../img/wenhuabg.jpg) no-repeat center; background-size: cover; margin-top: 60px; box-sizing: border-box; padding:0 50px;color: #fff;}
.wenhua_list{border-bottom: 1px rgba(255,255,255,.4) solid; padding-bottom: 50px; padding-top: 50px; display: flex; flex-wrap: wrap;}
.wenhua_list em{font-size: 32px; display: block; margin-top: 6px;}
.wenhua_list span{width: calc(100% - 60px); margin-left: 20px; display: block;}
.wenhua_list span dl dt h1{font-size: 28px; }
.wenhua_list span dl dt h2{font-size: 18px; }
.wenhua_list span dl dd{margin-top: 30px; }
.wenhua_list span dl dd p{margin-top: 8px;}
.wenhua_list:nth-child(1) em::before{content: "\e610";}
.wenhua_list:nth-child(2) em::before{content: "\e611";}
.wenhua_list:nth-child(3) em::before{content: "\e60f";}

.casebox2{display: flex; flex-wrap: wrap;}
.casebox2 a{display: block; position: relative; width: 50%;}
.casebox2 a img{display: block; width: 100%;}
.casebox2 a span{display: block; width: 100%;height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,.6); opacity: 0; transition: 0.5s; display:flex; align-items: center; align-content: center; justify-content: center; color: #fff; flex-wrap: wrap;}
.casebox2 a span h1{font-size: 24px;width: 80%;  text-align: center;word-wrap:break-word; white-space:nowrap;overflow: hidden;text-overflow:ellipsis;}
.casebox2 a span h2{color: rgba(255,255,255,.7); margin-top: 10px; width: 100%;text-align: center;}
.casebox2 a:hover span{opacity: 1;}

/*分页样式*/ 
.pages{margin-top: 60px;  }
ul.yiiPager{ display: flex;  justify-content: center;}  
ul.yiiPager li{display:block; }  
ul.yiiPager li a{ width: 30px; height: 30px; line-height: 30px; display: flex; align-items: center; justify-content: center;  color: #666; transition: 0.3s;}  
ul.yiiPager li a:hover{color: #bb1b21;}
ul.yiiPager li.first a::before{content: "\e741"; font-size: 18px;}
ul.yiiPager li.last a::before{content: "\e741"; transform: rotate(180deg); font-size: 18px;}
ul.yiiPager li.previous a::before{content: "\e642";transform: rotate(180deg); }
ul.yiiPager li.next a::before{content: "\e642"; }
ul.yiiPager li.selected a{color: #bb1b21}


.showbox{width: 1400px; margin: 0 auto; margin-top: 220px; }
.con_show_title{ padding-bottom: 20px;}
.con_show_title h1{font-size: 36px; text-align: justify;}
.con_show_title h2{margin-top: 20px; font-size: 14px;color: #999; }
.con_show_title h2 i{display: flex; align-items: center; margin:0 20px; line-height: 1;}
.con_show_title h2 i::before{display: block; margin-right: 6px;font-size: 16px;}
.con_show_title h2 i:nth-child(1)::before{content: "\e680";}
.con_show_title h2 i:nth-child(2)::before{content: "\e638";}

.biaoqian{}

.con_show_info{color: #666; line-height: 1.8; text-align: justify; margin-top: 30px;}
.con_show_info img{display: block; max-width: 100%!important;height: auto!important;}

.bar{margin-top: 60px; display: flex; justify-content: space-between;}
.bar a{font-size: 16px; color: #666; line-height: 1; transition: 0.3s;}
.bar a:hover{color: #BB1B21;}
.bar a.show_prev{display: flex; align-items: center; justify-content: space-between;  box-sizing: border-box; width: calc(50% - 100px);}
.bar a.show_prev::before{content: "\e642";  transform: rotate(-180deg); }
.bar a.show_prev i{width: calc(100% - 30px);word-wrap:break-word; white-space:nowrap;overflow: hidden;text-overflow:ellipsis;}

.bar a.show_next{display: flex; align-items: center; justify-content: space-between;  box-sizing: border-box; width: calc(50% - 100px);}
.bar a.show_next::after{content: "\e642";}
.bar a.show_next i{width: calc(100% - 30px);word-wrap:break-word; white-space:nowrap;overflow: hidden;text-overflow:ellipsis; text-align: right;}


.service_item{display: flex; flex-wrap: wrap;  margin-top: 60px; box-sizing: border-box; border: 1px #ddd solid;}
.service_list{width: 50%; box-sizing: border-box; border-right: 1px #ddd solid; border-bottom: 1px #ddd solid; padding:30px; }
.service_list:nth-child(2n){border-right: 0;}
.service_list:nth-child(3){border-bottom: 0;}
.service_list:nth-child(4){border-bottom: 0;}

.service_list i::before{display: block; font-size: 52px;}
.service_list:nth-child(1) i::before{content: "\e629";}
.service_list:nth-child(2) i::before{content: "\e65d";}
.service_list:nth-child(3) i::before{content: "\f228";}
.service_list:nth-child(4) i::before{content: "\e643";}
.service_list dl{margin-top: 30px;}
.service_list dl dt{font-size: 24px;}
.service_list dl dd{color: #999;}
.service_list ul{margin-top: 30px;}
.service_list ul li{line-height: 1.8; font-size: 16px; color: #999; }

.liuchengbox{display: flex; justify-content: space-between; flex-wrap: wrap;  box-sizing: border-box;  margin-top: 40px; }
.liuchengbox span{box-sizing: border-box; width:calc(25% - 12px);  padding: 30px; background: #f2f2f2; margin-top: 16px; }
.liuchengbox span h1{font-family: 'num'; font-size: 32px;}
.liuchengbox span h2{font-size: 24px; margin-top: 20px;}
.liuchengbox span h3{color: #999;}

.wenzhang{display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: -60px; }
.wenzhang a{display: block; margin-top: 60px; width: calc(50% - 20px);}
.wenzhang a em{display: block; width: 100%; overflow: hidden;}
.wenzhang a em img{display: block; width: 100%; transition: 0.3s;}
.wenzhang a span{display: block; margin-top: 10px;}
.wenzhang a span h1{font-size: 24px; word-wrap:break-word; white-space:nowrap;overflow: hidden;text-overflow:ellipsis;transition: 0.3s;}
.wenzhang a span h2{color: #999; }
.wenzhang a:hover em img{transform: scale(1.1); opacity: .7;}
.wenzhang a:hover span h1{color: #999;}

.contactbox{display: flex; justify-content: space-between; flex-wrap: wrap;}
.contact_title{ width: 300px;}
.contact_title h1{font-size: 32px;}
.contact_title h2{color: #aaa; font-size: 18px;}
.contact_con{width: calc(100% - 380px); display: flex; flex-wrap: wrap; justify-content: space-between;}

.contact_item h1{font-size: 24px; margin-top: 4px;}
.contact_item span{display: block; margin-top: 30px; color: #999;}
.contact_item span p{margin-top: 8px;}
.contact_item em{display: block; width: 120px; border: 1px #ccc solid; margin-top: 30px;}
.contact_item em img{display: block; width: 100%;}

.contact_item h2{margin-top: 30px; font-size: 18px;}
.contact_item i{display: block; width: 300px; border: 1px #ccc solid;margin-top: 30px; box-sizing: border-box;}
.contact_item i img{display: block; width: 100%;}

.join_list{width: 100%; border-bottom: 1px #eee solid; padding: 50px 0;}
.join_list h1{font-size: 24px;}
.join_list span{font-size: 16px; color: #999; margin-top: 10px; display: block;}
.join_list span p{margin-top: 8px;}
.join_list:first-child{padding-top: 0;}
.join_list:last-child{border-bottom:0; padding-bottom: 0;}