/* banner */
.banner {
	padding-top: 0.5rem;
}


/* about */
.about {
	padding-top: .35rem;
}
.about .title {
	font-size: 0.3rem;
	font-family: Microsoft YaHei;
	font-weight: bold;
	color: #010101;
}
.about .content {
	font-size: 0.16rem;
	font-weight: 400;
	color: #010101;
	line-height: 0.3rem;
	margin-top: .3rem;
}
.about .more {
	font-size: 0.16rem;
	font-family: Microsoft YaHei, Microsoft YaHei;
	font-weight: 400;
	color: var(--main_color);
	margin-top: .3rem;
	position: relative;
	width: 1rem;
	display: block;
}
.about .more::after {
	content: '+';
	display: block;
	position: absolute;
	right: .44rem;
	top: 0;
	transition: .3s ease-in-out;
}
.about .more::before {
	content: '';
	display: block;
	position: absolute;
	bottom: -0.09rem;
	width: 0%;
	height: 0.01rem;
	background-color: var(--main_color);
	right: 0;
	transition: .3s ease-in-out;
}
.about .more:hover::before {
	width: 100%;
}
.about .more:hover::after {
	right: 0;
}


/* video */
.video {
	padding-top: 0.6rem;
	background-color: #fff;
}
.video .video_box {
	position: relative;
}
.video .video_box .video_cover {
	position: absolute;
	z-index: 2;
}
.video .video_box .video_video {
	height: 5rem;
}
.video .video_box .cover_play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	max-width: 1rem;
	max-height: 1rem;
	transition: .3s ease-in-out;
}
.video .video_box:hover .cover_play {
	transform: translate(-50%,-50%) scale(1.1);
}
.video .title {
	font-size: 0.3rem;
	color: #010101;
	text-align: center;
	margin-top: 0.25rem;
}


/* material */
.material .common_center {
	padding-top: 0.73rem;
}
.material .title {
	font-size: 0.3rem;
	color: #010101;
	font-weight: bold;
}
.material .swiper-slide {
	flex: 0 0 25%;
	padding: 0 0.12rem;
}
.material .material_swiper {
	margin: 0 -0.12rem;
	margin-top: 0.14rem;
}
.material .material_swiper .scale-box {
    height: 2.25rem;
}
.material .material_swiper .title {
	font-size: 0.18rem;
	margin-top: 0.1rem;
}
.material .material_swiper .des {
	font-size: 0.16rem;
	color: #666666;
	line-height: 0.21rem;
	margin-top: 0.1rem;
	
}


/* brand */
.brand .common_center {
	padding-top: 0.6rem;
	padding-bottom: 0.8rem;
}
.brand .title {
	font-size: 0.3rem;
	color: #010101;
	font-weight: bold;
}
.brand .swiper-slide {
	flex: 0 0 25%;
	padding: 0 0.12rem;
}
.brand .brand_swiper {
	margin: 0 -0.12rem;
	margin-top: 0.14rem;
}
.brand .brand_swiper .title {
	font-size: 0.18rem;
}
.brand .brand_swiper .des {
	font-size: 0.16rem;
	color: #666666;
	line-height: 0.21rem;
	margin-top: 0.1rem;
}
.brand .brand_swiper .scale-box {
	position: relative;
	height: 1.8rem;
}
.brand .brand_swiper .img_title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	font-size: 0.18rem;
	font-weight: bold;
	transition: .3s ease-in-out;
	opacity: 1;
}
.brand .brand_swiper .title_box {
	justify-content: space-between;
	margin-top: 0.1rem;
	margin-bottom: 0.1rem;
	align-items: center;
	position: relative;
	transition: .3s ease-in-out;
	opacity: 0;
}
.brand .brand_swiper .title_box::after {
	content: '';
	display: block;
	width: 0%;
	height: 0.01rem;
	background-color: var(--main_color);
	position: absolute;
	bottom: -0.1rem;
	transition: .3s ease-in-out;
}
.brand .brand_swiper .brand_container:hover .title_box::after {
	width: 100%;
}
.brand .brand_swiper .brand_container:hover .title_box {
	opacity: 1;
}
.brand .brand_swiper .brand_container:hover .img_title {
	opacity: 0;
}
.brand .brand_swiper .more {
	font-size: 0.16rem;
	color: var(--main_color);
}





@media only screen and (max-width: 1024px){
    .material .common_center, 
    .brand .common_center, 
    .video, 
    .about{
    padding:15px;
}
.material .material_swiper .title, 
.brand .brand_swiper .title, 
.material .material_swiper .des, 
.about .more{
    font-size:14px !important;
        line-height: 1.6;
}
.page_right_new_content p span{
    font-size: 12px !important;
}
.about .more::after{
    right:0;
}
.video .video_box .video_video{
    height:150px;
}
.video .video_box .video_cover{
    height:100%;
}
.brand .brand_swiper .title_box{
    opacity:1;
}
.brand .brand_swiper .more{
    display:none;
}.brand .swiper-slide, 
.material .swiper-slide{
    flex:0 0 33.3%;
}
.banner{
    padding-top: 0;
}
}