@charset "utf-8";

.solution1{ position: relative; overflow: hidden;}
.solution1:before{ content: ''; position: absolute; left: 0; right: 50%; bottom: 0; height: 461px; background: url(../image/xf/img8.jpg);}
.solution1 .bg{ position: absolute; left: 50%; top: 0; margin-left: 204px; width: 756px; height: 884px; overflow: hidden;}
.solution1 .bg img{ display: block; width: 100%;}
.solution1 .tit{ margin-left: 135px; margin-bottom: 154px; padding-top: 167px; width: 575px;}
.solution1 .tit .t{ margin-bottom: 75px;}
.solution1 .tit .p{ color: #666; word-break: break-all; text-align: justify; text-justify: inter-ideograph;}
.solution1 .slick-item{ position: relative;}
.solution1 .slick-arrow {background: #fff;width: 50px;height: 50px;}
.solution1 .slick-arrow:before {color: #5e5e5e;}
.solution1 .slick-prev {left: 0;}
.solution1 .slick-next {right: 0;}
.solution1 .slick-prev:before {content: "\e768";}
.solution1 .slick-next:before {content: "\e769";}
.solution1 .slick-item .img{ height: 654px; overflow: hidden;}
.solution1 .slick-item .img img{ display: block; width: 100%;}
.solution1 .slick-item .cont{ position: absolute; right: 0; bottom: 0; padding: 47px 77px 80px 58px; width: 656px; background: url(../image/xf/img9.jpg); background-size: 100% 100%; color: #fff;}
.solution1 .slick-item .cont .t1{ position: absolute; left: 58px; bottom: 100%; margin-bottom: 108px;}
.solution1 .slick-item .cont .t2{ margin-bottom: 24px;}
.solution1 .slick-item .cont .p{ word-break: break-all; text-align: justify; text-justify: inter-ideograph;}

.solution2{ padding: 138px 0 112px; overflow: hidden;}
.solution2 .tit{ margin-bottom: 70px;}
.solution2 .slick-mod{ margin: 0 -5px;}
.solution2 .slick-item{ padding: 0 5px;}
.solution2 .slick-item .img{ position: relative; overflow: hidden;}
.solution2 .slick-item .img:before{ content: ''; display: block; padding-top: 75.1861%;}
.solution2 .slick-item .img img{ position: absolute; left: 0; top: 0; width: 100%;}
.solution2 .slick-item .cont{ padding: 24px 40px; text-align: center;}
.solution2 .slick-item .cont .t{ margin-bottom: 14px;}
.solution2 .slick-item .cont .p{ color: #666;}
.solution2 .slick-arrow {background: #fff;width: 50px;height: 50px;top: 126px;
	-ms-transform: none;
	transform: none;
}
.solution2 .slick-arrow:before {color: #5e5e5e;}
.solution2 .slick-prev {left: 5px;}
.solution2 .slick-next {right: 3px;}
.solution2 .slick-prev:before {content: "\e768";}
.solution2 .slick-next:before {content: "\e769";}

.solution3{ position: relative; padding: 129px 0 138px; background: url(../image/xf/img5.jpg) center no-repeat; color: #fff;}
.solution3 .mask{ position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
.solution3 .tit{ margin-bottom: 72px;}
.solution3 .ul{ overflow: hidden;}
.solution3 .li{ float: left; padding: 0 10px; width: 25%; text-align: center;}
.solution3 .li .ico{ margin: auto; margin-bottom: 15px; width: 110px; height: 98px; overflow: hidden;}
.solution3 .li .ico img{ display: block; width: 100%;}
.solution3 .li .ico .i2{ display: none;}
.solution3 .li .t{ margin-bottom: 12px;}

/*	pc 端	*/
@media screen and (min-width: 1021px){
	
	.solution1 .slick-arrow:hover {background: url(../image/temp/bgi1.jpg);}
	.solution1 .slick-arrow:hover:before {color: #fff;}
	
	.solution2 .slick-arrow:hover {background: url(../image/temp/bgi1.jpg);}
	.solution2 .slick-arrow:hover:before {color: #fff;}
	
	.solution3 .li:hover{ color: #FFB500;}
	.solution3 .li:hover .ico .i1{ display: none;}
	.solution3 .li:hover .ico .i2{ display: block;}
	
}

/*	pc 端 1024 - 1280	*/
@media screen and (min-width: 1021px) and (max-width: 1279px){
	
/*	.solution1 .tit{ margin-left: 60px;}*/

}

/*	pc 端 1280 以上	*/
@media screen and (min-width: 1280px){

	
}

/*	移动端 1024 以下	*/
@media screen and (max-width: 1020px){
	
.solution1:before{ display: none;}
.solution1 .bg{ display: none;}
.solution1 .tit{ margin-left: 0; margin-bottom: 0.3rem; padding-top: 1rem; width: 100%;}
.solution1 .tit .t{ margin-bottom: 0.2rem;}
.solution1 .slick-arrow {width: 0.5rem;height: 0.5rem;}
.solution1 .slick-item .img{ height: auto;}
.solution1 .slick-item .cont{ position: relative; padding: 0.5rem; width: 100%;}
.solution1 .slick-item .cont .t1{ left: 0.5rem; bottom: 100%; margin-bottom: 0.5rem;}
.solution1 .slick-item .cont .t2{ margin-bottom: 0.2rem;}

.solution2{ padding: 1rem 0 0.5rem;}
.solution2 .tit{ margin-bottom: 0.3rem;}
.solution2 .slick-mod{ margin: 0;}
.solution2 .slick-item{ padding: 0;}
.solution2 .slick-item .cont{ padding: 0.5rem;}
.solution2 .slick-item .cont .t{ margin-bottom: 0.2rem;}
.solution2 .slick-arrow {width: 0.5rem;height: 0.5rem;top: 2.38rem;}
.solution2 .slick-prev {left: 0;}
.solution2 .slick-next {right: 0;}

.solution3{ padding: 1rem 0; background-size: cover;}
.solution3 .tit{ margin-bottom: 0.3rem;}
.solution3 .ul{
	display: flex;
	flex-wrap: wrap;
}
.solution3 .li{ margin-bottom: 0.3rem; padding: 0 0.1rem; width: 50%;}
.solution3 .li .ico{ margin-bottom: 0.1rem; width: 1rem; height: auto;}
.solution3 .li .t{ margin-bottom: 0.1rem;}

	
}