.sec1{
	position: relative;
	height: 600px;
}
.sec1 .inner{
	position: absolute;
	left: 0;
	right: 0;
}
.sec1 .img-box{
	bottom: 8.875%;
}
.sec1 .img-box .img{
	width: 4.833%;
	position: relative;
}
.sec1 .img-box .img .word{
	position: absolute;
	left: 0;
	top: 0;
	-webkit-animation: sec1imgrotate 5s linear infinite;
	animation: sec1imgrotate 5s linear infinite;
}
@-webkit-keyframes sec1imgrotate{
    0%{-webkit-transform: rotate(0deg); opacity: .5;}
    50%{-webkit-transform: rotate(180deg); opacity: 1;}
    100%{-webkit-transform: rotate(360deg); opacity: 0.5;}
}
@keyframes sec1imgrotate{
    0%{transform: rotate(0deg); opacity: .5;}
    50%{transform: rotate(180deg); opacity: 1;}
    100%{transform: rotate(360deg); opacity: 0.5;}
}
.sec1 .text-box{
	top: 39%;
	opacity: 0;
	-webkit-transition: all 1s;
	transition: all 1s;
	-webkit-transform: translateY(20%);
	transform: translateY(20%);
}
.sec1 .text-box.actived{
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.sec1 h3{
	font-size: 56px;
	color: #f00040;
	font-weight: bold;
	margin-bottom: 0.5em;
	margin-left: 1.37%;
	line-height: 1.2;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: masked 8s linear infinite;
	animation: masked 8s linear infinite;
	display: inline-block;
	vertical-align: top;
	background-image: url(../image/wordcolorchange.png);
}
.sec1 h5{
	font-size: 24px;
	color: #333;
	font-weight: normal;
	margin-left: 1.37%;
	line-height: 1.6;
}



.sec2{
	padding: 5.2% 0;
}
.sec2 ul{
	margin-left: 1.37%;
}
.sec2 li{
	background-color: #f6f6f6;
	margin-bottom: 4.26%;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	opacity: 0;
	-webkit-transform: translateY(25%);
	transform: translateY(25%);
}
.sec2 li.actived{
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.sec2 li .img-box{
	overflow: hidden;
	position: relative;
}
.sec2 li .img-box img{
	width: 100%;
	-webkit-transition: transform 0.5s;
	-moz-transition: transform 0.5s;
	-ms-transition: transform 0.5s;
	-o-transition: transform 0.5s;
	transition: transform 0.5s;
	margin-bottom: 0.23%;
}
.sec2 li .img-box img:last-child{
	margin-bottom: 0;
}
.sec2 li .img-box img:hover{
	-webkit-transform: scale(1.1,1.1);
	-moz-transform: scale(1.1,1.1);
	-ms-transform: scale(1.1,1.1);
	-o-transform: scale(1.1,1.1);
	transform: scale(1.1,1.1);
}
.sec2 li .text-box{
	padding: 3% 4.55%;
	-webkit-display: flex;
	-webkit-align-items: flex-start;
	-webkit-justify-content: space-between;
	-webkit-flex-direction: row;
	-moz-display: flex;
	-moz-align-items: flex-start;
	-moz-justify-content: space-between;
	-moz-flex-direction: row;
	-ms-display: flex;
	-ms-align-items: flex-start;
	-ms-justify-content: space-between;
	-ms-flex-direction: row;
	-o-display: flex;
	-o-align-items: flex-start;
	-o-justify-content: space-between;
	-o-flex-direction: row;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-direction: row;
}
.sec2 li h5{
	font-size: 48px;
	color: #040000;
	font-weight: bold;
	margin-bottom: 0.5833em;
}
.sec2 li p{
	font-size: 16px;
	color: #333;
	line-height: 1.75;
}

.sec2 li .more{
	display: block;
	border: 1px solid #000;
	padding: 19px 30px;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	-ms-transition: background-color 0.5s;
	-o-transition: background-color 0.5s;
	transition: background-color 0.5s;
	-webkit-flex-shrink: 0;
	-moz-flex-shrink: 0;
	-ms-flex-shrink: 0;
	-o-flex-shrink: 0;
	flex-shrink: 0;
}
.sec2 li .more:hover{
	background-color: #000;
}
.sec2 li .more span{
	font-size: 14px;
	color: #333;
	display: inline-block;
	vertical-align: middle;
	-webkit-transition: color 0.5s;
	-moz-transition: color 0.5s;
	-ms-transition: color 0.5s;
	-o-transition: color 0.5s;
	transition: color 0.5s;
}
.sec2 li .more:hover span{
	color: #fff;
}
.sec2 li .more .tri{
	position: relative;
	height: 1px;
	width: 40px;
	background-color: #333;
	display: inline-block;
	vertical-align: middle;
	margin-left: 14px;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	-ms-transition: background-color 0.5s;
	-o-transition: background-color 0.5s;
	transition: background-color 0.5s;
}
.sec2 li .more:hover .tri{
	background-color: #fff;
}
.sec2 li .more .tri div{
	height: 1px;
	width: 15%;
	background-color: #333;
	position: absolute;
	right: 0;
	top: 0;
	-webkit-transform-origin: right center;
	-moz-transform-origin: right center;
	-ms-transform-origin: right center;
	-o-transform-origin: right center;
	transform-origin: right center;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	-ms-transition: background-color 0.5s;
	-o-transition: background-color 0.5s;
	transition: background-color 0.5s;
}
.sec2 li .more:hover .tri div{
	background-color: #fff;
}
.sec2 li .more .tri div.linetop{
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.sec2 li .more .tri div.linebottom{
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


@media only screen and (max-width:1024px) {

	.sec1{
		height: 80vw;
	}
	.sec1 .img-box{
		bottom: 5%;
	}
	.sec1 .img-box .img{
		width: 15%;
	}
	.sec1 .text-box{
		top: 39%;
	}
	.sec1 h3{
		font-size: 1.5rem;
	}
	.sec1 h5{
		font-size: 0.75rem;
	}



	.sec2{
		padding: 2rem 0;
	}
	.sec2 li{
		margin-bottom: 1.5rem;
	}
	.sec2 li .img-box img{
		margin-bottom: 0.5rem;
	}
	.sec2 li .text-box{
		padding: 1rem;
	}
	.sec2 li h5{
		font-size: 1.25rem;
	}
	.sec2 li p{
		font-size: 0.6875rem;
	}
	.sec2 li .more{
		padding: 0.625rem 1rem;
	}
	.sec2 li .more span{
		font-size: 0.625rem;
	}
	.sec2 li .more .tri{
		width: 1.5rem;
		margin-left: 0.5rem;
	}
}