.banner{ width: 100%; }
.banner .swiper-slide a{ display: block; /*padding: 22% 0 11%;*/ text-align: right; color: #FFFFFF;padding-bottom: 28.9%;}
.banner .swiper-slide .text{ width:80%; max-width: 824px; display: inline-block; text-align: left; background: rgba(0,0,0,.4); padding:35px 58px; }
.banner .swiper-slide .text .cn{ font-weight: bold; font-size: 30px; letter-spacing:4px; text-shadow:2px 2px 2px rgba(0,0,0,.5);}
.banner .swiper-slide .text .en{ margin-top: 10px; text-transform: uppercase; opacity: .5;}


.banner .button .inner-wrap{ position:relative;    right: 100px;}
.banner .button .swiper-button-prev,.banner .button .swiper-button-next{ left:auto; right:auto; margin: 0; bottom:30px; top:auto; width:30px; height: 30px; background-size:cover;}
.banner .button .swiper-button-prev{ right:40px; background:url(../images/banner_prev.png);}
.banner .button .swiper-button-next{ right:0;  background:url(../images/banner_nex.png);}


.home-sub{ background:#383838; text-align: center;}
.home-sub li{ float: left; width: 20%; border-left: 1px solid #4c4c4c; color: #FFFFFF;}
.home-sub li:last-child{ border-right: 1px solid #4c4c4c; }
.home-sub li a{ display: block; color: #FFFFFF; padding: 35px 0;}
.home-sub li img{ margin-right:2%; max-width: 22%; display: inline-block; vertical-align: middle;}
.home-sub li div{ display: inline-block; max-width:70%; vertical-align: middle; text-align: left;}
.home-sub li span{ display: block; font-weight: bold;}
.home-sub li p{ margin-top:5px; opacity: .5;}
.home-sub li a:hover{ background: #6d131e;}
.home-sub li a:hover img{ animation: tada 1s; -webkit-animation: tada 1s;}


.index-tit{ text-align: center;}
.index-tit .en{ position: relative; padding-bottom: 20px; font-size: 34px; line-height: 44px; color: #d0d0d0; letter-spacing: 5px; text-transform: uppercase;}
.index-tit .en:after{ content:""; display: block; position: absolute; bottom:0; left:50%; height: 1px; width: 56px; margin-left: -28px; background: #6e6e6e;}
.index-tit .tit{ margin-top: 20px; font-size: 20px; color: #222222; letter-spacing: 5px;}
.index-tit .des{ margin-top: 15px; color: #6c6c6c; line-height: 24px;}

.red-more{ text-align: center;}
.red-more a{ display: inline-block; width: 205px; height:44px; line-height: 44px; background: #6d131e; text-transform: uppercase;color: #FFFFFF; position: relative; transition: all ease .4s;  -webkit-transition: all ease .4s;  -ms-transition: all ease .4s;  -o-transition: all ease .4s;}
.red-more a:after{ content: "";position: absolute;display: block;top:0;left:0px;width: 100%;height: 100%;background: #212121;z-index: 0;opacity:0; transition: all ease .4s; -ms-transition: all ease .4s; -o-transition: all ease .4s; -webkit-transition: all ease .4s; -moz-transition: all ease .4s; -moz-transform: rotateX(180deg);-ms-transition: rotateX(180deg);-o-transition: rotateX(180deg); transform: rotateX(180deg);-webkit-transform: rotateX(180deg);}
.red-more a span{ position: relative; z-index: 1; }
.red-more a:hover:after{ opacity:1; transform: rotateX(0deg); -webkit-transform:rotateX(0deg);  -ms-transform:rotateX(0deg); -o-transform:rotateX(0deg); }


.index-case{ padding:60px 0;}
.index-case .red-more{ margin-top: 45px;}
.index-case-tab{ text-align: center;}
.index-case-tab span{ margin:28px 2px 0; display: inline-block; padding: 0 27px; line-height: 30px; height: 32px; border: 1px solid #e3e3e3; color: #585858; cursor: pointer;  transition: all ease .2s;  -webkit-transition: all ease .2s;}
.index-case-tab span.active{ background: #6d131e; border: 1px solid #6d131e; color: #FFFFFF;}
.index-case-tab span:hover{ border: 1px solid #585858; }
.index-case .js-tab-con.active{ display:block;}
.index-case .js-tab-con{ margin-top: 25px; display:none;}

.index-case-list{ margin:0 -2px;}
.index-case-list li{ float: left; padding:2px; width: 20%; text-align: center; }
.index-case-list li a{ position: relative; display: block;}
.index-case-list li .cimg{ width:100%;}
.index-case-list li .cimg img{ width: 100%;}
.index-case-list li .text{ position:absolute; bottom:0; left:0; width: 100%; height:0; background:rgba(0,0,0,.75);  transition: all ease .2s;  -webkit-transition: all ease .2s; overflow: hidden;}
.index-case-list li .con{ display: inline-block; vertical-align: middle; width: 100%; color:#FFFFFF;}
.index-case-list li .con p{ position: relative; font-size: 16px; padding:0 5px 18px;}
.index-case-list li .con p:after{ content:""; position: absolute; bottom:0; left:50%; margin-left: -20px; height: 1px; width:40px; background: rgba(255,255,255,.6);}
.index-case-list li .con div{ margin-top: 20px; opacity: .6;}
.index-case-list li .con div i{ margin: 0 10px; font-style: normal;}
.index-case-list li .con div i em{ font-style: normal;}
.index-case-list li .con span{ margin-top: 25px; display: inline-block; padding:5px 20px; text-transform: uppercase;  border: 1px solid #FFFFFF; opacity: .7;}
.index-case-list li .con+i{  display: inline-block; vertical-align: middle; height: 100%;}
.index-case-list li:hover .text{ height: 100%;}	

@media (max-width:1540px) {
	.index-case-list li .con p{ padding-bottom: 10px;}
	.index-case-list li .con div { margin-top: 10px;}
	.index-case-list li .con span { margin-top: 10px; height: 26px; line-height: 24px; padding:0 10px; font-size: 12px;}
}

@media (max-width:1300px) {
	.index-case-list li .con div{ margin-top: 5px; font-size: 12px;}
	.index-case-list li .con p { font-size: 14px;}
}



.index-design{ padding-bottom: 60px; overflow: hidden; background:url(../images/index_design_bg.jpg) bottom right no-repeat;}
.index-design .inner-wrap{ position: relative; padding-left:50px;}
.index-design .inner-wrap:after{ content: ""; position: absolute;display: block; bottom:0; left:-30px; z-index: 0; content""; height:557px; width: 56px; background:url(../images/index_design_png.jpg) bottom right;}
.index-design .red-more{ margin-top: 40px;}
.index-design .content{ margin-top: 50px; max-width: 1230px; z-index: 1; position: relative;}
.index-design-list{ position: absolute; bottom:0; left:0; width:50%;}
.index-design-list .text{ margin-bottom: 25px;}
.index-design-list .text .en{ max-width: 380px; line-height: 20px; color: #a9a9a9; font-size: 12px; text-transform: uppercase;}
.index-design-list .text .cn{ margin-bottom:5px; color: #505050;}
.index-design-list li{ float: left; width: 20%; position: relative; background:#000000; cursor:pointer; overflow: hidden;}
.index-design-list li:nth-child(5n+1){ clear: both;}
.index-design-list li img{ width: 100%; transition: all ease .4s;  -webkit-transition: all ease .4s;}
.index-design-list li span{ opacity:0; position: absolute; top:50%; left:50%; margin-left: -20px; margin-top: -20px; display: inline-block; border: 1px solid #FFFFFF; width: 40px; height: 40px; background: url(../images/index_design_jt.png) center center no-repeat; transition: all ease .4s; -webkit-transition: all ease .4s;}
.index-design-list li.active img{ opacity: .4;}
.index-design-list li.active span{ opacity:1; }
.index-design-list li:hover img{ opacity: .6; transform:scale(1.1); -webkit-transform:scale(1.1);}

.index-design-box{ margin-left: 50%; position: relative;}
.index-design-box .box{ display: none;}
.index-design-box .box.active{display: block;}
.index-design-box .box .left{ float: left; width:60%; position: relative;  background: #000000; overflow: hidden;}
.index-design-box .box .left .img{ position: relative; overflow: hidden;}
.index-design-box .box .left .img:after{ content: ""; display: inline-block; padding-bottom:138%;}
.index-design-box .box .left .img img{ position:absolute; top:0; left:0; width: 100%; transition: all ease .4s; -webkit-transition: all ease .4s;}
.index-design-box .box .left .con{ position: absolute; bottom:0; left:0; width: 100%; padding:5% 12% 15%; color:#FFFFFF;}
.index-design-box .box .left .con .tit{ letter-spacing:8px; padding-bottom: 25px; font-weight: bold; font-size: 25px;}
.index-design-box .box .left .con p{ margin-top:5px; color:#e3e3e3; line-height: 22px;}
.index-design-box .box .left a:hover img{ opacity: .7; transform:scale(1.05); -webkit-transform:scale(1.05);}
.index-design-box .box .right{ position: absolute; bottom:0; right:0; width: 40%; padding:30px 20px; background:#FFFFFF; -webkit-box-shadow:  0 5px 10px rgba(4,0,0,.03); -moz-box-shadow: 0 5px 10px rgba(4,0,0,.03); box-shadow: 0 5px 10px rgba(4,0,0,.03);}
.index-design-box .box .right .tit{ position: relative; padding-bottom: 30px;}
.index-design-box .box .right .tit:after{ content:""; position: absolute; bottom:0; left:0; width: 35px; height: 1px; background: #6e6e6e;}
.index-design-box .box .right .tit span{ color: #434343; font-weight: bold; font-size: 15px;}
.index-design-box .box .right .tit i{ margin: 0 10px; display: inline-block; font-style: normal;}
.index-design-box .box .right .des{ margin-top: 25px; line-height: 24px; color: #b4b4b4;}
.index-design-box .box .right a{ margin-top:40px; display: inline-block; color: #6d131e; transition: all ease .4s; -webkit-transition: all ease .4s;}
.index-design-box .box .right a:hover{transform: translateY(-5px); -webkit-transform: translateY(-5px);}




.index-site{ position: relative; background-image:url(../images/index_process_bg.jpg); overflow: hidden;}
.index-site:after{ content:""; position: absolute; z-index: 0; top:0; right:0; width: 50%; height: 100%; display: block; background: rgba(0,0,0,.6);}
.index-site .content{ position: relative; z-index: 1; margin-left:50%; padding: 75px 10px 58px 70px;}
.index-site .index-tit{ text-align: left;}
.index-site .index-tit .en{color: #a3a3a3; letter-spacing:0;}
.index-site .index-tit .en:after{ left:0%; height: 2px; width:40px; margin-left: 0px; background: #b80b20;}
.index-site .index-tit .tit{ color: #FFFFFF;}
.index-site .index-tit .des{color: #FFFFFF; opacity: .6;}
.index-site .index-tit .des span{ font-size: 20px;}
.index-site li{ margin-top: 36px; float: left; margin-right:11%; width: 26%; max-width: 130px; background: #FFFFFF;text-align: center; }
.index-site li:nth-child(3n){ margin-right: 0;}
.index-site li a{ display: block; height: 130px;}
.index-site li div{ text-align: left; display: inline-block; vertical-align: middle;}
.index-site li div+i{ height: 100%; display: inline-block; vertical-align: middle;}
.index-site li span{ display: block; color: #6d131e;}
.index-site li p{ margin-top: 15px; color:#4d4d4d; transition: all ease .2s;  -webkit-transition: all ease .2s;}
.index-site li p strong{ margin-right:8px; font-weight: normal; font-size: 30px;}
.index-site li img{ transition: all ease .2s;  -webkit-transition: all ease .2s;}
.index-site li a:hover p{ margin-top: 5px;}
.index-site li a:hover img{opacity:.5;}

.process-sub{ background:#f5f5f5; text-align: center;}
.process-sub li{ float: left; width: 20%; border-left: 1px solid #e2e2e2; color: #b9b9b9;}
.process-sub li:last-child{ border-right: 1px solid #e2e2e2; }
.process-sub li a{ display: block; background:#f5f5f5; color: #383838; padding: 30px 0; transition: all ease .1s;  -webkit-transition: all ease .1s;}
.process-sub li .tit{ position: relative;}
.process-sub li .tit span{ margin-left:15px; font-size: 18px; display: inline-block; vertical-align: bottom;}
.process-sub li .tit em{ margin-right: 10px; font-size: 30px; font-weight: bold;}
.process-sub li .des{ opacity: .4; margin-top:20px; line-height: 22px; }
.process-sub li .ico:after{ content: ""; position: absolute; display: block; bottom:-5px; left:5px; z-index: 0; content""; height:1px; width:35px; background:#e2e2e2;  transition: all ease .3s;  -webkit-transition: all ease .3s;}
.process-sub li .ico{ position: relative; display: inline-block; vertical-align: bottom; width: 45px; height: 45px;}
.process-sub li .ico img{  transition: all ease .3s;  -webkit-transition: all ease .3s;}
.process-sub li .ico img.hover{ position: absolute; top: 0; left: 0; opacity: 0; transform: rotateY(-180deg);
 -webkit-transform: rotateY(180deg); opacity:0; }
.process-sub li a:hover{ background: #6d131e;color: #FFFFFF;}
.process-sub li a:hover .ico:after{ background: #97535c;}
.process-sub li a:hover img.default{ transform: rotateY(180deg); -webkit-transform: rotateY(180deg); opacity: 0;}
.process-sub li a:hover img.hover{ transform: rotateY(0deg); -webkit-transform: rotateY(0deg);opacity: 1;}


.index-project{ position: relative; z-index:0; padding:60px 0 215px; background:url(../images/index_project_bg.jpg) bottom center no-repeat;}
.index-project .index-case-list{ margin-top: 42px;}
.index-project .red-more{ margin-top: 50px;}


.index-activity{ position: relative; z-index: 1; }
.index-activity .content{margin-top: -115px; padding:60px 0px 60px 40px; background:#FFFFFF; -webkit-box-shadow:0 0px 15px rgba(4,0,0,.1); -moz-box-shadow:0 0px 15px rgba(4,0,0,.1); box-shadow:0 0px 15px rgba(4,0,0,.1);}
.index-activity .dimg{ margin-top: 0; padding-top:8px; float: left; width: 62.5%; text-align: center;}
.index-activity .dimg img{ width: 100%;}
.index-activity .con{ margin-left: 62.5%; padding:0px 6.25%;}
.index-activity .con .index-tit .en{ padding-bottom: 15px; letter-spacing: 2px; color: #6c6c6c;} 
.index-activity .con .text{ margin:20px 0 10px; text-align: center; font-size: 16px; color: #383838;}
.index-activity .con .text span{ margin: 0 10px; color: #6d131e; font-weight:bold;}
.index-activity .con .in{ margin-bottom: 8px; border: 1px solid #ebebeb; height: 36px;}
.index-activity .con .in input{ width: 100%; padding: 5px 10px; line-height: 24px; border: none; background: none;}
.index-activity .con .in input::-webkit-input-placeholder{ color: #9b9b9b; } 
.index-activity .con .in input:-moz-placeholder{ color: #9b9b9b; } 
.index-activity .con .in input::-moz-placeholder{ color: #9b9b9b; } 
.index-activity .con .in input:-ms-input-placeholder{ color: #9b9b9b; } 
.index-activity .con .button input{ width: 100%; height: 36px; line-height: 36px; background:#6d131e; color: #FFFFFF; border: none;}
.index-activity .con .txt{ text-align: center; margin-top:25px; color: #c4c4c4;}
.index-activity .con .txt span{ margin: 0 10px;}


.index-honor{ padding: 85px 0;}
.index-honor .left{ float: left; width: 25%; overflow: hidden;}
.index-honor .left .index-tit{ text-align: left;}
.index-honor .left .index-tit .en{ padding-bottom:50px; letter-spacing: 0;}
.index-honor .left .index-tit .en:after{ left:0; margin-left: 0;}
.index-honor .left .index-tit .des{ margin-top:50px;}
.index-honor .left .text{ margin-top:20px; font-size: 12px; line-height: 22px; text-transform: uppercase;  color: #c5c5c5;}
.index-honor .right{ float: right; width:74%;}
.index-honor .right .tit{ position: relative; text-align: center; color: #2f2f2f; font-size: 20px;}
.index-honor .right .tit:after{ content:""; display: block; position: absolute; z-index: 0; bottom:50%; left:0; height: 1px; width:100%; background: #cfcfcf;}
.index-honor .right .tit span{ position: relative; z-index: 1; display: inline-block; padding: 0 20px; background: #FFFFFF;}
.index-honor ul{ margin-top: 22px; border: 1px solid #e5e5e5; border-bottom: none; border-left: none;}
.index-honor li{ border-bottom: 1px solid #e5e5e5;  border-left: 1px solid #e5e5e5; float:left; width: 25%; text-align: center; padding-bottom: 10px;}
.index-honor li:nth-child(4n+1){ clear: both;}
.index-honor li div{ height:40px; line-height: 20px; color: #000000; font-weight: bold;}
.index-honor li div span{display: inline-block; vertical-align: middle;}
.index-honor li div i{ display: inline-block; vertical-align: middle; height: 100%;}


.index-brand{ position: relative; background:#f5f5f5;}
.index-brand .img{position: absolute; z-index: 0; top:0; right:0; width: 50%; height: 100%; }
.index-brand .content{ position: relative; z-index: 1; width: 50%; padding: 30px 40px 30px 0px;}
.index-brand .index-tit{ text-align: left;}
.index-brand .index-tit .en{ max-width: 475px; letter-spacing:0; color: #bdbdbd;}
.index-brand .index-tit .en:after{ left:0; margin-left: 0;}
.index-brand .text{ margin-top: 15px; font-size: 12px; line-height: 20px; text-transform: uppercase; color: #c5c5c5;} 
.index-brand li{ float: left; width: 50%; margin-top: 40px; }
.index-brand li a{ display: inline-block; text-align: center;}
.index-brand li p{ margin-top:10px;}
.index-brand li p span{ margin-right:5px; font-size: 20px; color: #6d131e;}
.index-brand li:hover img{ animation: flipInY 1s; -webkit-animation: flipInY 1s;}


.index-news{ padding:105px 0 180px;}
.index-news .index-tit .en{ color: #bebebe; letter-spacing: 2px;}
.index-news .red-more{ margin-top:20px;}
.index-news-tab{ text-align: center;}
.index-news-tab span{ margin:28px 20px 0; display: inline-block; padding: 0 27px; line-height: 30px; height: 32px; border: 1px solid #e3e3e3; color: #585858; cursor: pointer; transition: all ease .2s;  -webkit-transition: all ease .2s;}
.index-news-tab span.active{ background: #6d131e; border: 1px solid #6d131e; color: #FFFFFF;}
.index-news-tab span:hover{ border: 1px solid #585858; }
.index-news .js-tab-con.active{ display:block;}
.index-news .js-tab-con{ display:none; margin-top: 25px; padding:45px 32px 18px; background:#FFFFFF; -webkit-box-shadow:0 0px 10px rgba(4,0,0,.05); -moz-box-shadow:0 0px 10px rgba(4,0,0,.05); box-shadow:0 0px 10px rgba(4,0,0,.05);}

.index-news-con{ border-bottom: 1px solid #e8e8e8; }
.index-news-con .box{ float: left; width: 55%; max-width: 630px;}
.index-news-con .box .item{ padding-bottom: 35px;}
.index-news-con .box .item .img{ float: left; width: 38%; overflow: hidden;}
.index-news-con .box .item .img img{transition: all ease .3s;  -webkit-transition: all ease .3s;}
.index-news-con .box .item .con{ margin-left: 43%;}
.index-news-con .box .item .con div{ font-weight: bold; color: #6b6b6b;}
.index-news-con .box .item .con p{ margin-top: 10px; line-height: 24px; height: 48px; overflow:hidden; color: #858585;}
.index-news-con .box .item .con span{ margin-top: 8px; display:block; height: 20px; line-height: 20px; background: url(../images/ico_time.png) no-repeat left center; padding-left: 20px; color: #a8a8a8;}
.index-news-con .box .item .con em{ opacity:0; display: block; margin-top: 20px; color: #6d131e; text-transform:uppercase; transition: all ease .3s;  -webkit-transition: all ease .3s;}
.index-news-con .box .item a:hover div{ color: #6d131e; }
.index-news-con .box .item a:hover .img img{ transform:scale(1.05); -webkit-transform:scale(1.05);}
.index-news-con .box .item a:hover em{ opacity: 1;}
.index-news-con ul{ float:right; width:40%;}
.index-news-con ul li{ padding-bottom:22px;}
.index-news-con ul li:last-child{ margin-bottom: 0;}
.index-news-con ul li a{ display: block; color: #858585;}
.index-news-con ul li span{ margin-right: 15px;}
.index-news-con ul li a:hover{ color: #6d131e;}



@media (max-width:1280px){
	.index-activity .dimg{ width: 68%;}
	.index-activity .con{ margin-left: 68%; padding:0px 2% 0;}
}

@media (max-width:1100px){
	.home-sub li a{ padding: 25px 0;}
	.home-sub li div{ margin-top: 10px; display: block; text-align: center; max-width:100%;}
	
	.index-case-list li .con span{ display: none;}
	.index-design-box .box .right{ padding: 20px;}
	
	.index-site li a{ height: 110px;}
	.index-site li p strong{ font-size: 26px;}
}

@media (max-width:1000px){
	.index-design-list{ width: 60%;}
	.index-design-box { margin-left: 60%;}
	.index-design-box .box .left{  float:none; width: 100%;}
	.index-design-box .box .right{ display: none;}
	
	.index-project{ padding: 80px 0 120px;}
}
@media (max-width:960px){
	.index-activity .content{ margin-top: -85px; padding: 20px 20px 30px;}
	.index-activity .dimg{ float: none; width: 100%;}
	.index-activity .con{ margin-top:20px; margin-left: 0;}
}





/* 2017-10-30 */
.index-like-list {
	overflow: hidden;
	width: 960px;
	margin: 0 auto;
}

.index-like-list li {
	float: left;
	padding-left: 3%;
	margin-bottom: 22px;
	width: 25%;
}

.index-like-list li a {
	display: inline-block;
	position: relative;
	padding-left: 12px;
}

.index-like-list li a::before {
	content: '';
	position:absolute;
	left: 0;
	top: 50%;
	margin-top:-2px; 
	width:4px;
	height: 4px;
	background: #616161;
}

.index-like-list li:hover a { color: #6d131e;}
.index-like-list li:hover a::before { background: #6d131e;}




.fwkh{ position: absolute; text-align: center; width: 85px; height: 48px; background: url(../images/bg2_03.png) no-repeat; right: 0; top: -6px; z-index: 10; color: #fff; font-size: 18px; font-weight: bold; line-height: 1;}
.fwkh span{ display: block; font-size: 13px; font-weight: normal; line-height: 24px;}

.bgFull {
    background-size: cover;
    background-position: center center;
    background-repeat: nno-repeat;
}