.application{
    width: 100%; display: block; font-size: 0; background: #fff; margin-top: .3rem;
}
.application li{
    width: 100%; margin: .2rem 0 0; background: #fff; display: inline-block; position: relative; box-sizing: border-box; padding: .3rem .3rem .3rem 2.8rem; min-height: 2rem;
}
.application li .img{
    width: 2.3rem; height: 1.4rem; position: absolute; left: .3rem; top: .3rem;
}
.application li .tit{
    font-size: .24rem; font-family: "Avenir-Next-LT-Pro"; color: #585d6a;
}
.application li p{
    font-size: .14rem; line-height: 1.7
}


.banner-support {
	background: url(../images/banner-support.jpg) no-repeat center center / cover;
}
.banner-support .text h2 {
	color: #fff;
	text-shadow: unset;
}
.support .main {
	width: 12.8rem;
	margin: 0 auto;
}
.title-line1 {
	margin: .83rem 0 .15rem 0;
	font-family: "Arial-Narrow-blod";
	font-size: .3rem;
	color: #535865;
	line-height: .36rem;
	width: 11.54rem;
}
.title-line2 {
	margin-bottom: .45rem;
	font-size: .14rem;
	line-height: .24rem;
	color: #bbb;
	width: 11.54rem;
}
.support  .main > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.support .main > ul li {
	margin-bottom: .3rem;
	width: 23%;
}
.support .main .application-image {
	width: 2.94rem;
}
.support .main .application-image img {
	max-width: 100%;
}
.support .main .application-name {
	margin-top: .1rem;
	line-height: 1.5;
	font-size: .18rem;
	color: #535865;
	width: 100%;
	text-align: center;
	font-weight: bold;
}

.equipment-warp {
	margin-top: .4rem;
	width: 100%;
	display: block; font-size: 0;
}
.equipment-warp .equipment {
	width: 50%; height: 5rem;
	font-size: 0;display: inline-block;
	overflow: unset;
}
.equipment-warp .equipment .equipment-image {
	width: 52%; height: 5rem;
	display: inline-block;
	vertical-align: top; overflow: hidden;
	position: relative;
}
.equipment-warp .equipment .equipment-image a {
	width: 100%; height: 100%;
	display: block;
	position: relative;
}
.equipment-warp .equipment .equipment-image a::before {
	content: '\e64c';
	font-family: iconfont;
	font-size: .5rem;
	text-align: center;
	line-height: 5rem;
	color: #f0f0f0;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-color: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity .2s ease-in-out;
}
.equipment-warp .equipment .equipment-image a::after {
	content: '';
	width: .8rem; height: .8rem;
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 2px solid #f0f0f0;
	transition: opacity .2s ease-in-out;
	opacity: 0;
}
.equipment-warp .equipment .equipment-image a:hover::before,
.equipment-warp .equipment .equipment-image a:hover::after {
	opacity: 1;
}
.equipment-image .swiper-button-prev, 
.equipment-image .swiper-button-next {
	opacity: 0;
	transition: opacity .4s ease-in-out;
}
.equipment-warp .equipment:hover .swiper-button-prev,
.equipment-warp .equipment:hover .swiper-button-next {
	opacity: 1;
}
.equipment-warp .equipment .equipment-image img {
	object-fit: cover;
	width: 100%; height: 100%;
}
.equipment-warp .equipment .lightbox:not(:first-child) {
	height: 0;
	overflow: hidden;
}
.equipment-warp .equipment .equipment-text {
	width: 48%; height: 5rem;
	display: inline-block;
	vertical-align: top;
	padding: 16% 5.54%;
	box-sizing: border-box;
	background-color: #535865;
}
.equipment-warp .equipment .equipment-title {
	font-family: "Arial-Narrow-blod";
	font-size: .3rem;
	line-height: .36rem;
	color: #fff; text-transform: uppercase;
}
.equipment-warp .equipment p {
	font-size: .14rem;
	line-height: .24rem;
	color: #fff;
	margin: .3rem 0;
}
.equipment-warp .equipment .equipment-button { color: #fff; padding: 0 38px; line-height: 48px; display: inline-block; z-index: 2; overflow: hidden; position: relative; font-size: 14px; text-transform: uppercase;}
.equipment-warp .equipment .equipment-button::before{ content: ""; background: #72a248; width: 110%; height: 100%; position: absolute; right: 10px; top: 0; transform: skewX(-15deg); z-index: -1; transition: all 0.3s ease-in-out;}
.equipment-warp .equipment .equipment-button:hover::before{ background: #000;}

.equipment-image .swiper-button-prev {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%2372a248'%2F%3E%3C%2Fsvg%3E")
}
.equipment-image .swiper-button-next {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%2372a248'%2F%3E%3C%2Fsvg%3E")
}
.equipment-image .swiper-pagination-bullet-active {
	background: #72a248;
}
@media screen and (max-width: 1366px){
	.support .main{ box-sizing: border-box;}
	.support .main .application-image{ width: 100%;}
	.support .main > ul li img{ max-width: 100%;}
}
@media screen and (max-width: 1280px){
	.support .main{ width: 100%;}
}
/*  IPAD 横版 */
@media screen and (max-width: 1112px){
	.support .main{ width: 100%;}
	.support .main > ul li{ width: 32%;}
	.support .main .application-image{ width: 100%;}
	.title-line1,.title-line2{ width: 100%;}
	/* .equipment-warp{ display: flex; justify-content: center;} */
	.equipment-warp .equipment{ display: flex; flex-wrap: wrap; width: 100%; height: 100%;}
	.equipment-warp .equipment .equipment-image{ width: 50%; height: 4rem; }
	.equipment-warp .equipment .equipment-text{ width: 50%; height: 4rem; padding: .2rem 5.54%; display: flex; flex-wrap: wrap; align-content: center;align-items: center;}
	.equipment-warp .equipment.testing{ display: flex; flex-wrap: wrap;}
	.equipment-warp .equipment.testing .equipment-image{ order: 2;}
	.equipment-warp .equipment.testing .equipment-text{ order: 1;}
}

@media screen and (max-width: 734px){
	.title-line1{ margin: .3rem 0 .2rem; line-height: 1.2; font-size: .22rem;}
	.title-line2{ line-height: 1.2}
	.support .main > ul li{ width: 48%;}
	.support .main .application-name{ font-size: .14rem;}
	.equipment-warp .equipment .equipment-image{ width: 100%;}
	.equipment-warp .equipment .equipment-text{ width: 100%;}
	.equipment-warp .equipment.testing .equipment-text{ order: 3;}
	.equipment-warp .equipment .equipment-image a::before,.equipment-warp .equipment .equipment-image a:after{ display: none;}
}
