*{margin:0;padding: 0;}
ul,ol{list-style:none;}
a{text-decoration:none;}
	
	
	
/* 	.title{
		font-size: 3rem;
		text-align: center;
		margin: 20px;}
	
	.title h2{
		font-size:3rem;
		color:333}
	
	.title i{
		width:76px ;
		height:3px;
		background:#bb0007;
		display: block;
		margin: 18px auto 0;}
	
	.title-2{
		text-align: center;
		margin: 40px;}
	
	.title-2 h3{
		font-size:30px;
		color: #bb0007;}
	
	.title-2 p{
		font-size: 14px;
		color: #bbbbbb;} */
		
.title{text-align: center;margin: 20px;}
.title p{width: 90%;margin: 0 auto;font-size:1.2vw;}
.title h2{font-size:2vw;}
.title h1{font-size: 3vw;}
.title i{width:76px ;height:3px;background:#bb0007;display: block;margin: 18px auto 0;}


/* 	.banner {background-image: url('https://cn.hprt.com/static/v1/images/img/3d-banner.png');background-size: 100% 100%;background-position: center;color: #fff;text-align: center;padding:5% 5% 10% 5%;}
	.banner h1 {font-size: 3rem;}
	.banner p {	padding-top: 2%;font-size: 2rem;}
	@media screen and (max-width:767px){} */
	
.banner {position: relative;width: 100%;text-align: center;}
.banner img {width: 100%;vertical-align: middle;}
.banner h1,
.banner p {position: absolute;left: 50%;transform: translateX(-50%);color: #fff;width: 100%;}
.banner h1 {top: 30%;font-size: 3vw;width: 80%;}
.banner p {top: 50%; font-size: 1.25vw;}
@media screen and (max-width:767px){
	.title h2{font-size:2vh;}
	.title p{width: 100%;margin: 0 auto;font-size: 12px;}
	.banner{margin-top:50px;}
	.banner h1 {top: 30%;font-size: 2.5vh;}
	.banner p {font-size: 1.5vh;}
}



#solution-page{
			position: relative;
		}
		#solution-container{
			position: relative;
			width: 100vw;
			height: 16vw;
			padding: 1vw 0;
			overflow: hidden;
		}
		@keyframes scroll{
			0%{transform: translate(102vw, 0);}
			100%{transform: translate(-18vw, 0);}
		}
		#solution-container > div >div{
			position: absolute;
			left: 0;
			width: 8vw;
			height: 8vw;
			border-radius: 8vw;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			animation: scroll 52.8s linear infinite;
		}

		#solution-container > div > div> picture:hover::after{
			opacity: .1;
		}
		#solution-container > div > div:nth-child(odd){
			top: 1vw;		
		}
		#solution-container > div > div:nth-child(even){
			top: 8vw;		
		}
		#solution-container > div > div:hover img{
			filter: brightness(1);
		}
		#solution-container > div > div:nth-child(23){
			animation-delay: -2.2s;
		}
		#solution-container > div > div:nth-child(22){
			animation-delay: -4.4s;
		}
		#solution-container > div > div:nth-child(21){
			animation-delay: -6.6s;
		}
		#solution-container > div > div:nth-child(20){
			animation-delay: -8.8s;
		}
		#solution-container > div > div:nth-child(19){
			animation-delay: -11s;
		}
		#solution-container > div > div:nth-child(18){
			animation-delay: -13.2s;
		}
		#solution-container > div > div:nth-child(17){
			animation-delay: -15.4s;
		}
		#solution-container > div > div:nth-child(16){
			animation-delay: -17.6s;
		}
		#solution-container > div > div:nth-child(15){
			animation-delay: -19.8s;
		}
		#solution-container > div > div:nth-child(14){
			animation-delay: -22s;
		}
		#solution-container > div > div:nth-child(13){
			animation-delay: -24.2s;
		}
		#solution-container > div > div:nth-child(12){
			animation-delay: -26.4s;
		}
		#solution-container > div > div:nth-child(11){
			animation-delay: -28.6s;
		}
		#solution-container > div > div:nth-child(10){
			animation-delay: -30.8s;
		}
		#solution-container > div > div:nth-child(9){
			animation-delay: -33s;
		}
		#solution-container > div > div:nth-child(8){
			animation-delay: -35.2s;
		}
		#solution-container > div > div:nth-child(7){
			animation-delay: -37.4s;
		}
		#solution-container > div > div:nth-child(6){
			animation-delay: -39.6s;
		}
		#solution-container > div > div:nth-child(5){
			animation-delay: -41.8s;
		}
		#solution-container > div > div:nth-child(4){
			animation-delay: -44s;
		}
		#solution-container > div > div:nth-child(3){
			animation-delay: -46.2s;
		}
		#solution-container > div > div:nth-child(2){
			animation-delay: -48.4s;
		}
		#solution-container > div > div:nth-child(1){
			animation-delay: -50.6s;
		}
		
		.solutions-photo{
			position: absolute;
			left: 0;
			top: 0;
			width:8vw;
/* 			filter: brightness(.6); */
			transition: filter .2s;
		}
		.solutions-logo{
			width: 3vw;
			margin: .5vw;
			background-color: #fff;
			border-radius: 1vw;
			border: solid .3vw #fff;
			z-index: 1;
			pointer-events: none;
		}
		#solution-container > div > div > h3{
			width: 12vw;
			color: #fff;
			font-size: 1vw;
			line-height: 2.5vw;
			text-align: center;
			z-index: 1;
			margin: .5vw;
			pointer-events: none;
		}






.blog-B{width: 80%;margin: 0 auto;background-color:#eee;}

.expand .blog-B {border-radius: 10px;overflow: hidden;display: flex;flex-wrap: wrap;<!--justify-content: space-between;-->background-color: #eee;}
.blog-img{width: 45%;}
.expand .blog-B img {flex:100% ;max-width: 100%;display: block;}
.expand .blog-B .text{width: 50%; }
.blog-B h3{padding: 30px;margin: 30px;font-size: 1.5rem;color: #bb0007;}
.blog-B p{padding: 0px 30px;margin-left: 30px;font-size: 1rem;}

@media screen and (max-width:767px){
	.blog-B{width: 95%;}
	.blog-img{width: 100%;}
	.expand .blog-B .text{width: 100%;}
}



.NEWS{width:80%;margin:20px auto;}
.NEWS .news{height:100%;display: flex;flex-wrap: wrap;justify-content: space-around;}
.news li{width: 33%;background:#f2f2f2;border-radius: 10px;overflow: hidden;float: left;margin-top: 20px;transition: transform 0.8s, box-shadow 0.5s, margin-top 0.5s;}

.news img{flex: 100%;max-width: 100%;display: block;margin: 0 auto;}
.news .text{width: 100%;}
.news .text h3{font-size: 1.25rem;color: #bb0007;padding: 10px 0 0 25px;height: 72px;}
.news .list p{font-size: 1rem;color: #444444;padding-top: 7px;margin: 0 3%;padding: 1rem;}
.news .list{width: 100%; height:158px;}
.more{padding: 15px;float:right;border-radius:5px;font-size: 1rem;}
.more p{background-color: #bb0007;color: #fff;border-radius:5px;text-align: center;padding: 2px;}
.more p:hover{background-color: #fff;color: #bb0007;}

.blog-list{width: 100%; /* height: 100px; */margin-right: 25px;}
.b-list{padding: 15px;float:right;border-radius:18px;font-size: 1rem;}
.b-list p{background-color: #bb0007;color: #fff;border-radius:5px;text-align: center;padding: 2px;}
.b-list p:hover{background-color: #fff;color: #bb0007;}

@media screen and (max-width:767px){
	.NEWS{width:95%;}
	.news li{width: 95%;}
}

@media screen and (min-width:768px){
	.NEWS{width:80%;}
	.news li{width: 33%;}
}
			

.blog-B-1{width: 80%;margin: 0 auto; background-color: #eee;transition: transform 0.3s, box-shadow 0.3s, margin-top 0.3s;}
.expand .blog-B-1 {border-radius: 10px;overflow: hidden;display: flex;flex-wrap: wrap;justify-content: flex-start;}
.blog-img-1{width: 45%;}
.expand .blog-B-1 img {flex:100% ;max-width: 100%;display: block;}
.expand .blog-B-1 .text{width: 50%;}
.blog-B-1 h3{padding: 10px;margin: 10px;font-size: 1.5rem;color: #bb0007;}
.blog-B-1 p{padding-left: 10px;margin-left: 10px;font-size: 1rem;line-height: 1.5rem;}
.new-list{width: 100%; /* height: 100px; */}
.n-list{padding: 15px; float:right;border-radius:18px;padding-right:10%;font-size: 1rem;}
.n-list p{background-color: #bb0007;color: #fff;border-radius:5px;text-align: center;padding: 2px;}
.n-list p:hover{background-color: #fff;color: #bb0007;}

.learn-more{ padding: 15px; float:right;border-radius:5px;margin-top:30px;font-size: 1rem; }
.learn-more a{background-color: #bb0007;color: #fff;border-radius:5px;text-align: center;padding: 2px;}
.learn-more a:hover{background-color: #fff;color: #bb0007;}

@media screen and (max-width:767px){
	.blog-B-1{width: 95%;}
	.blog-img-1{width: 100%;}
	.expand .blog-B-1 .text{width: 100%;}
}