/* CSS Document */
.desginOne{
	padding-top:87px;
}
@media screen and (max-width:1200px) {
	.desginOne{
		padding-top:60px;
	}
}
@media screen and (max-width:640px) {
	.desginOne{
		padding-top:0px;
	}
}
.desginOne div{
	display:block;
	background:url(../images/design-bg-one.jpg) no-repeat center center;
	background-size: cover;
	height:445px;
	text-align:center;
	position:relative;
}

.desginOne div span{
	content:"";
	position:absolute;
	display:block;
	bottom:30px;
	left:calc(50% - 17.5px);
	width:30px;
	height:30px;
	border:3px solid #FFF;
	border-top:0px;
	border-left:0px;
	transform:rotate(45deg);
	transition:all 0.3s;
	cursor:pointer;
}

.desginOne div span:hover{
	bottom:25px;
}
@media screen and (max-width:1200px) {
	.desginOne div{
		height:380px;
	}
}
@media screen and (max-width:991px) {
	.desginOne div{
		height:320px;
	}
}
@media screen and (max-width:768px) {
	.desginOne div{
		height:280px;
	}
}
@media screen and (max-width:640px) {
	.desginOne div{
		height:250px;
	}
}


.desginTitle{
	font-size:35px;
	color:rgba(0,0,0,0.7);
	text-align:center;
	padding-top:70px;
	line-height:83px;
}
.desginInfo{
	font-size:15px;
	color:rgba(51,51,51,0.75);
	text-align:left;
	padding:10px;
	line-height:28px;
	max-width:888px;
	margin:0px auto;
	padding-bottom:50px;
}
.desginVideo {
    width:888px;
    text-align:center;
    margin:0 auto;
    padding-bottom:50px;
}
.desginVideo video{ width:calc(100% - 20px); height:500px; background:#000;}
@media screen and (max-width:768px) {
	.desginTitle{
		font-size:24px;
		padding-top:30px;
		line-height:50px;
	}
	.desginVideo {
        width:100%;
    }
    .desginVideo video{ height:350px;}
}
@media screen and (max-width:480px) {
	.desginTitle{
		font-size:18px;
		padding-top:20px;
		line-height:30px;
	}
    .desginVideo video{ height:270px;}
}



.desginTwo{
	height:630px;
	background:#D2101B url(../images/design-bg-two.jpg) no-repeat center bottom;
	background-size:cover;
	text-align:center;
	padding-top:40px;
}
.desginTwo span{
	display:inline-block;
	padding:40px 67px 0px 67px;
}
.desginTwo span img{
	max-width:100%;
}

@media screen and (max-width:1200px) {
	.desginTwo span{
	padding:40px 20px 0px 20px;
	}
}
@media screen and (max-width:960px) {
	.desginTwo{
		height:auto;
		padding-bottom:40px;
	}
}


.desginThree{
	height:990px;
	background:url(../images/design-bg-three_1.jpg) center center no-repeat;
	background-size:cover;
	text-align:center;
}
.desginThree .d_jg{ width:100%; height:22.4%;}
.swiper-container { width:1142px; height:768px;}
.swiper-slide p{ width:100%; height:117px; line-height:117px; font-size:26px; text-align:center; color:#FFF;background:url(../images/design-bg_1.png) repeat; position:absolute; left:0; bottom:0;}


@media screen and (max-width:1600px) {
	.desginThree{ height:831px;}
    .swiper-container { width:960px; height:645px;}
    .swiper-button-prev,
    .swiper-button-next {
      width: 64px;
      height: 126px;
      margin-top: -63px;
    }
    .swiper-slide p{ height:98px; line-height:98px; font-size:22px;}
}
@media screen and (max-width:1200px) {
	.desginThree{ height:624px;}
    .swiper-container { width:720px; height:484px;}
    .swiper-button-prev,
    .swiper-button-next {
      width: 48px;
      height: 95px;
      margin-top: -47px;
    }
    .swiper-slide p{ height:74px; line-height:74px; font-size:16px;}
}
@media screen and (max-width:991px) {
	.desginThree{ height:515px;}
    .swiper-container { width:595px; height:400px;}
    .swiper-button-prev,
    .swiper-button-next {
      width: 40px;
      height: 79px;
      margin-top: -39px;
    }
    .swiper-slide p{ height:61px; line-height:61px;}
}
@media screen and (max-width:768px) {
	.desginThree{ height:398px;}
    .swiper-container { width:460px; height:309px;}
    .swiper-button-prev, .swiper-button-next { width:0; height:0;}
}
/*desginThree phone start*/
.swiper3{ display:none;}
@media screen and (max-width:640px) {
	.desginThree{
	    height:auto;
	    background:#EDEDED;
	    padding:20px 10px;
    }
	.desginThree .d_jg{ display:none;}
	.swiper1{ display:none;}
	.swiper3{ display:block;}
	.swiper3 p{ width:100%; background:#000; color:#FFF; height:40px; line-height:40px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	.swiper-container { width:100%; height:auto;}
}
/*desginThree phone end*/

.desginIntro{
	max-width:1345px;
	margin:0px auto;
	padding-top:88px;
	padding-bottom:50px;
}
.desginIntro h3{
	color:#333;
	font-size:35px;
	line-height:55px;
}
.desginIntro h3 span{
	display:block;
	color:#c6191f;
}

@media screen and (max-width:640px) {
	.desginIntro{
		padding-top:40px;
	}
	.desginIntro h3{
		color:#333;
		font-size:22px;
		line-height:35px;
	}
}

.desginIntro div{
	overflow:hidden;
	padding-top:40px;
}
.desginIntro div ul li{
	text-align:left;
	color:rgba(0,0,0,0.8);
	font-size:14px;
	line-height:30px;
	padding-left:100px;
	background-position:top left;
	background-repeat:no-repeat;
	padding-bottom:20px;
}
.desginIntro div ul li:nth-child(1){
	background-image:url(../images/desgin-bit-01.jpg);
}
.desginIntro div ul li:nth-child(2){
	background-image:url(../images/desgin-bit-02.jpg);
}
.desginIntro div ul li:nth-child(3){
	background-image:url(../images/desgin-bit-03.jpg);
}
.desginIntro div ul li strong{
	color:rgba(0,0,0,1);
	font-size:20px;
	display:block;
	font-weight:normal;
}

.desginIntro div ul li:nth-child(4){
	font-size:16px;
	padding-left:140px;
	background-image:url(../images/desgin-bit-04.jpg);
	background-position:100px top ;
}
.desginIntro div ul li:nth-child(4) span{
	color:rgba(0,0,0,0.7);
}
.desginIntro div ul li:nth-child(4) font{
	color:#d2101b;
	font-weight:bold;
}


@media screen and (max-width:991px) {
	.desginIntro div ul li{
		padding-left:70px;
		background-size:50px auto;
		font-size:14px;
		line-height:24px;
	}
	.desginIntro div ul li strong{
		font-size:16px;
	}
	.desginIntro div ul li:nth-child(4){
		font-size:14px;
		padding-left:70px;
		background-position:40px top ;
		background-size:auto;
	}
}

.desginIntro div section{
	padding-top:20px;
}
.desginIntro div section img{
	margin:0px auto;
	max-width:100%;
}


.desginFour{
	background:#D20F1B;
	min-height:710px;
	overflow:hidden;
}
.desginFour h3{
	font-size:29px;
	color:#FFF;
	padding:65px 0px;
	line-height:40px;
}
.desginFour h3 span{
	font-size:16px;
	display:block;
}
.desginFour div{
	max-width:1345px;
	margin:0px auto;
	color:#FFF;
	line-height:24px;
	text-align:left;
	position:relative;	
}
.desginFour div .hx{
    overflow:visible; width:100%; height:1px; background:#fff; position:absolute; left:0; top:194px;
}
.desginFour div .hx p{
    border: 9px solid transparent;
    border-left: 12px solid #FFF;
    width: 0;
    height: 0;
    float:right;    
    position:relative; right:-9px; top:-8px;
}
.desginFour div strong{
	font-size:20px;
	display:block;
	line-height:40px;
	margin-top:8px;
}
.desginFour div ul{
    width:10000px;
}
.desginFour div li{
	float:left;
	width:470px;
    margin-right:-55px;
	position:relative;
}
.desginFour div li:nth-child(4n + 3){
    margin-top:229px;
}
.desginFour div li:nth-child(5){
    margin-right:65px;
}
.desginFour div li:nth-child(2n){
    display:none;
}
.desginFour div li img{
    float:left;
}
.desginFour div li p{
    float:right;
    width:245px;
}
.desginFour div li em{
    clear:both; display:block; width:15px; height:15px; border-radius:50%; background:#FFF; position:absolute; left:92px; top:187px;
}
.desginFour div li:nth-child(4n + 3) em{
    top:-42px;
}
@media screen and (max-width:1360px) {
    .desginFour div{
	    max-width:1100px;
    }
    .desginFour div li{
        margin-right:-160px;
    }
}
@media screen and (max-width:991px) {
	.desginFour{ padding-bottom:20px;}
	.desginFour h3{
	    padding:40px 0px;
    }
	.desginFour div{
	    max-width:960px;
    }
    .desginFour div .hx{
        display:none;
    }
    .desginFour div ul{
        width:100%;
    }
    .desginFour div li{
        width:calc(100% - 40px); margin:0; clear:both; overflow:hidden; margin:0 20px 20px 20px; background:#FFF; color:#333333;
    }
    .desginFour div li:nth-child(4n + 3){
        margin-top:0;
    }
    .desginFour div li:nth-child(5){
        margin-right:0;
    }
    .desginFour div li:nth-child(odd) p{
        float:left; padding-left:30px; width:auto;
    }
    .desginFour div li em{
        display:none;
    }
    .desginFour div li:nth-child(2n){
        display:block; background:none; text-align:center; height:45px;
    }
    .desginFour div li:nth-child(2n) img{
        float:none;
    }
    .desginFour div li:nth-child(2n) span {
        content:"";
	    position:absolute;
	    display:block;
	    top:0px;
	    left:calc(50% - 17.5px);
	    width:30px;
	    height:30px;
	    border:5px solid #FFF;
	    border-top:0px;
	    border-left:0px;
	    transform:rotate(45deg);
	    cursor:pointer;
    }

}
@media screen and (max-width:768px) {
    .desginFour{ min-height:580px;}
    .desginFour div li img{
        width:20%; min-width:130px;
    }
    .desginFour div li p{
        width:80%; padding-left:20px; max-width:calc(100% - 130px);
    }
    .desginFour div strong{
	    margin-top:0px;
    }
}
@media screen and (max-width:640px) {
    .desginFour div{
	    line-height:20px;
	    font-size:13px;
    }
    .desginFour div strong{
	     font-size:17px;
	    line-height:30px;
    }
}
@media screen and (max-width:320px) {
    .desginFour div li{
        width:calc(100% - 20px); margin:0 10px 10px 10px;
    }
    .desginFour div li:nth-child(odd) img{
        width:70px;
    }
    .desginFour div li:nth-child(odd) p{
        padding-left:10px; width:200px;
    }
    .desginFour div li:nth-child(2n) img{
        float:none;
    }
    .desginFour div li:nth-child(2n){
        height:30px;
    }
    .desginFour div li:nth-child(2n) span {
	    left:calc(50% - 17.5px);
	    width:20px;
	    height:20px;
	    border:3px solid #FFF;
	    border-top:0px;
	    border-left:0px;
    }
}


.desginFive{
	background-image:url(../images/design-bg-six.jpg);
	background-repeat: no-repeat;
	background-attachment:fixed;
	background-position:center center;
	background-size:cover;
	height:700px;
	line-height:700px;
	color:#FFF;
	font-size:40px;
	text-align:center;
}

@media screen and (max-width:1200px) {
	.desginFive{
		height:600px;
		line-height:600px;
	}
}
@media screen and (max-width:991px) {
	.desginFive{
		height:500px;
		line-height:500px;
	}
}
@media screen and (max-width:768px) {
	.desginFive{
		height:400px;
		line-height:400px;
		font-size:30px;
	    background-attachment:inherit;
	}
}
@media screen and (max-width:640px) {
	.desginFive{
		height:350px;
		line-height:350px;
		font-size:24px;
	}
}
@media screen and (max-width:480px) {
	.desginFive{
		height:300px;
		line-height:300px;
		font-size:16px;
	}
}


.desginSix{
    background:#FFF;
	min-height:680px;
}
.desginSix h3{
	color:#000;
}
.desginSix div .hx{
    background:#C2C2C2;
}
.desginSix div .hx p{
    border-left: 12px solid #C2C2C2;
}
.desginSix div li p{
	color:#333;
}
.desginSix div li em{
    background:#C2C2C2;
}
@media screen and (max-width:991px) {
    .desginSix div li{
        border:1px solid #C5C4C4;
    }
    .desginSix div li:nth-child(2n){
        border:0;
    }
    .desginSix div li:nth-child(2n) span {
	    border:5px solid #D4D4D4;
	    border-top:0px;
	    border-left:0px;
    }
}
@media screen and (max-width:320px) {
    .desginSix div li:nth-child(2n) span {
	    border:3px solid #D4D4D4;	     
	    border-top:0px;
	    border-left:0px;
    }
}


.desginSeven{
    background:#EDEDED;
	min-height:680px;
}
.desginSeven h3{
	color:#000;
}
.desginSeven div .hx{
    background:#C2C2C2;
}
.desginSeven div .hx p{
    border-left: 12px solid #C2C2C2;
}

.desginSeven div li{
	width:430px;
    margin-right:-133px;
}
.desginSeven div li:nth-child(5){
    margin-right:-133px;
}
.desginSeven div li:nth-child(2n){
    display:none;
}
.desginSeven div li:nth-child(odd) p{
    width:205px;
}

.desginSeven div li p{
	color:#333;
}
.desginSeven div li em{
    background:#C2C2C2;
}
@media screen and (max-width:991px) {
    .desginSeven div li{
        border:1px solid #C5C4C4;
        width:calc(100% - 40px);
        width:calc(100% - 20px); margin:0 10px 10px 10px;
    }
    .desginSeven div li:nth-child(2n){
        border:0;
        display:block;
    }
    .desginSeven div li:nth-child(2n) span {
	    border:5px solid #D4D4D4;
	    border-top:0px;
	    border-left:0px;
    }
}
@media screen and (max-width:320px) {
    .desginSeven div li:nth-child(2n) span {
	    border:3px solid #D4D4D4;	     
	    border-top:0px;
	    border-left:0px;
    }
}