.banner h1,.banner p{
    color:#fff;
}
#header{
    background-color:#fff;
}


.sec1{
	background-color:#e4e5e7;
	padding:2.3% 0 12%;
}
.sec1 h4{
	font-size:1.75em;
	line-height:1.14;
	color:var(--theme-purple);
	font-weight:normal;
	margin-bottom:12.23%;
	padding-left:2.82em;
}
.sec1 h4 img{
	vertical-align:middle;
	margin-right:1.25em;
	width:1.57em;
	margin-left:-2.82em;
}
.sec1 .tip{
	font-size:2em;
	color:#333;
	line-height:1.5;
}
.sec1 h3{
	font-size:3em;
	color:var(--theme-purple);
	margin:7% 0 5.7%;
}
.sec1 ul{
	display:flex;
	align-items:stretch;
	justify-content:space-between;
	flex-direction:row;
}
.sec1 li{
	color:#fff;
	position:relative;
	text-align:center;
	width:19.12%;
	transition:width 0.5s;
	overflow:hidden;
	cursor:pointer;
}
.sec1 li.active{
	text-align:left;
	width:55.147%;
}
.sec1 li img{
	width:auto;
	height:100%;
	position:relative;
	left:50%;
	transform:translateX(-50%);
}
.sec1 li .cover{
	position:absolute;
	left:0;
	top: 0;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	transition:padding 0.5s;
}
.sec1 li.active .cover{
	align-items:flex-start;
	justify-content:flex-end;
	padding:0 8% 6.4%;
}
.sec1 li h5{
	font-size:1.625em;
	line-height:1.385;
}
.sec1 li p{
	font-size:1.375em;
	line-height:1.36;
	display:none;
	margin-top:1em;
}
.sec1 li.active p{
	display:block;
}



.sec2{
	padding:9.375% 0 12%;
}
.sec2 h3{
	text-align:center;
	margin-bottom:5.3%;
	font-size:3em;
	color:var(--theme-purple);
}
.sec2 .flex-box{
	display:flex;
	align-items:stretch;
	justify-content:space-between;
	flex-direction:row;
}
.sec2 .box{
	color:#fff;
	width:48.53%;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	padding:5%;
}
.sec2 .box1{
	background-image:url(../images/csr_sec2_bg1.jpg);
}
.sec2 .box2{
	background-image:url(../images/csr_sec2_bg2.jpg);
}
.sec2 h4{
	font-size:1.75em;
	margin-bottom:2em;
}
.sec2 li{
	padding-left:4.25em;
	display:flex;
	align-items:flex-start;
	justify-content:flex-start;
	flex-direction:row;
	margin-bottom:7.5%;
}
.sec2 li:last-child{
	margin-bottom:0;
}
.sec2 li img{
	margin-left:-4.25em;
	width:2.75em;
	margin-right:1.5em;
}
.sec2 h5,.sec2 p{
	font-size:1.375em;
}
.sec2 h5{
	margin-bottom:0.5em;
}
.sec2 p{
	line-height:1.45;
}


.sec3{
	display:flex;
	align-items:stretch;
	justify-content:flex-start;
	flex-direction:row;
}
.sec3 .img-box,.sec3 .text-box{
	width:50%;
}
.sec3 .text-box{
	background-repeat:no-repeat;
	background-image:url(../images/csr_sec3_img2.jpg);
	background-size:cover;
	background-position:center center;
	color:#fff;
	display:flex;
	align-items:flex-start;
	justify-content:center;
	flex-direction:column;
	padding:0 8.8%;
}
.sec3 h5{
	font-size:3em;
	margin-bottom:0.6875em;
}
.sec3 p{
	font-size:1.375em;
	line-height:1.64;
}


.sec4{
	padding-top:8%;
}
.sec4 h3{
	margin-bottom:5.2%;
	font-size:3em;
	color:var(--theme-purple);
	text-align:center;
}
.sec4 li{
    color:#fff;
    position:relative;
}
.sec4 .inner{
    position:absolute;
    left:0;
    right:0;
    bottom:10%;
}
.sec4 h5{
    font-size:3em;
    line-height:1.5;
    margin-bottom:0.65em;
}
.sec4 p{
    font-size:1.625em;
    line-height:1.4;
    margin-bottom:0.3em;
    padding-left:1.7em;
}
.sec4 p:last-child{
	margin-bottom:0;
}
.sec4 p span{
	display:inline-block;
	vertical-align:top;
	width:0.85em;
	margin-left:-0.85em;
	font-size:2em;
	line-height:0.7;
}
@media only screen and (min-width:1025px){
}
@media only screen and (max-width:1024px){
	.section{
		font-size:1.25em;
	}

	.sec1{
		padding:10% 0 15%;
	}
	.sec1 h4{
		margin-bottom:20%;
	}
	.sec1 h3{
		margin:15% 0 10%;
	}
	.sec1 ul{
		display:block;
	}
	.sec1 li{
		width:100%;
		margin-bottom:10%;
		text-align:left;
	}
	.sec1 li:last-child{
		margin-bottom:0;
	}
	.sec1 li.active{
		width:100%;
	}
	.sec1 li img{
		position:absolute;
		top:0;
	}
	.sec1 li .cover{
		position:relative;
		height:auto;
		z-index:1;
		padding:60% 5% 10%;
		align-items:flex-start;
		justify-content:flex-end;
	}
	.sec1 li.active .cover{
		padding:60% 5% 10%;
	}
	.sec1 li p{
		display:block;
	}



	.sec2{
		padding:15% 0;
	}
	.sec2 h3{
		margin-bottom:10%;
	}
	.sec2 .flex-box{
		display:block;
	}
	.sec2 .box{
		width:100%;
		padding:10%;
		margin-bottom:10%;
	}
	.sec2 .box:last-child{
		margin-bottom:0;
	}


	.sec3{
		display:block;
	}
	.sec3 .img-box,.sec3 .text-box{
		width:100%;
	}
	.sec3 .text-box{
		padding:10%;
	}


	.sec4{
		padding-top:15%;
	}
	.sec4 h3{
		margin-bottom:10%;
	}
	.sec4 .inner{
	    position:static;
	}
    .sec4 li{
        padding:40% 0 7.5%;
    }
    .sec4 li img{
        position:absolute;
        left:50%;
        top:0;
        height:100%;
        width:auto;
        transform:translateX(-50%);   
    }
	.sec4 h5{
		font-size:2em;
	    margin-bottom:0.5em;
	}
	.sec4 p{
	    font-size:1.5em;
	}
}