body {
	width: 100vw;
	background: #01050c;
	font-size: 0.14rem;
}

.main {
	position: relative;
	height: 100%;
	padding-bottom: 1.2rem;
}

.banner {
	width: 100vw;
	/* max-width: 19.2rem; */
	min-width: 12rem;
	height: 7.8rem;
	margin: 0 auto;
	background: url(../images/top-bg.png?v=002) no-repeat center/cover;
}

.banner-container {
	position: relative;
	max-width: 12rem;
	min-width: 12rem;
	padding-top: 0.2rem;
	margin: 0 auto;
	box-sizing: border-box;
}

.banner-title {
	width: 9.59rem;
	height: 4.19rem;
	margin-left: -1rem;
	background: url(../images/banner-title.png?v=002) no-repeat center/cover;
	background-size: 90%;
}

.banner-case {
	position: relative;
	width: 7.62rem;
	height: 2.25rem;
	margin-left: 0.2rem;
	margin-top: -0.2rem;
	background: url(../images/banner-case.png?v=003) no-repeat center/cover;
	background-size: 90%;
}

.banner-case .qrcode {
	position: absolute;
	top: 0.2rem;
	right: 1.8rem;
	width: 1.84rem;
	height: 1.84rem;
	padding: 0.06rem;
	border: 0.01rem solid #de0000;
}

.banner-phone {
	position: absolute;
	top: 0.1rem;
	right: 0;
	width: 4.14rem;
	height: 5.94rem;
	margin-right: -0.3rem;
	background: url(../images/banner-phone.png) no-repeat center/cover;
	background-size: 90%;
}

.banner-container .parts {
	position: absolute;
	width: 0.82rem;
	height: 0.82rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 80%;
}

.banner-container .parts1 {
	top: 1rem;
	left: -1rem;
	background-image: url(../images/parts1.png);
}

.banner-container .parts2 {
	top: 4rem;
	left: 6.4rem;
	background-image: url(../images/parts2.png);
}

.banner-container .parts3 {
	top: 0.4rem;
	right: -0.6rem;
	background-image: url(../images/parts3.png);
}

.case1 {
	position: relative;
	width: 100%;
	height: 11.87rem;
	background-color: #efefef;
	background-image: url(../images/case1-bg.png);
	background-repeat: no-repeat;
	background-size: 19.2rem 11.07rem;
	background-position: top;
}

.case {
	position: absolute;
	top: -0.68rem;
	left: 0;
	right: 0;
	width: 9.22rem;
	height: 2.12rem;
	margin: 0 auto;
	background-image: url(../images/case.png?v=002);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.case1-title {
	position: absolute;
	top: 2.14rem;
	left: 0;
	right: 0;
	width: 10.93rem;
	height: 7.68rem;
	margin: 0 auto;
	background-image: url(../images/case2.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.case1-gif {
	position: absolute;
	top: 2.7rem;
	left: 0.3rem;
	right: 0;
	width: 7.5rem;
	height: 4.65rem;
	margin: 0 auto;
	background-image: url(../images/case1-gif.gif?v=001);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.main-btn {
	position: absolute;
	top: 10.2rem;
	left: 0.3rem;
	right: 0;
	width: 5.5rem;
	height: 1.44rem;
	margin: 0 auto;
	background-image: url(../images/main-btn.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.case2 {
	position: relative;
	width: 100%;
	height: 9.75rem;
	padding-top: 0.66rem;
	background-color: #fff;
	background-image: url(../images/case2-bg.png);
	background-repeat: no-repeat;
	background-size: 17.2rem 5.09rem;
	background-position: center 25%;
	box-sizing: border-box;
}

.case2-title {
	display: block;
	width: 11.13rem;
	height: 2.1rem;
	margin: 0 auto;
	background-image: url(../images/case3-title.png?v=001);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.swiper-box {
	width: 10rem;
	height: 3.72rem;
	margin: 0.6rem auto 0;
	overflow: hidden;
}

.swiper-slide {
	width: 4.39rem;
	height: 3.72rem;
	margin: 0 -0.5rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transform: scale(0.7) !important;
}

.swiper-slide.swiper-slide-active {
	transform: scale(1) !important;
}

.swiper1 {
	background-image: url(../images/swiper1.png);
}

.swiper2 {
	background-image: url(../images/swiper2.png);
}

.swiper3 {
	background-image: url(../images/swiper3.png);
}

.ys-tips {
	display: block;
	width: 5.04rem;
	height: 1.23rem;
	margin: 0.6rem auto 0;
	background-image: url(../images/ys-tips.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.footer-wrap {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 1.21rem;
	margin: 0 auto;
	background-image: url(../images/footer-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.footer-content {
	position: relative;
	width: 9.8rem;
	height: 100%;
	margin: 0 auto;
}

.footer-left {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	max-width: 5.63rem;
	height: 1.66rem;
	background-image: url(../images/footer-left.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.footer-btn {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 3.13rem;
	height: 1.36rem;
	background-image: url(../images/footer-btn.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.popup-right {
	display: none;
	position: fixed;
	right: -0.25rem;
	top: 50%;
	margin-top: -2.6rem;
	width: 3.86rem;
	height: 5.37rem;
	background-image: url(../images/popup.png);
	background-repeat: no-repeat;
	background-size: 85%;
	background-position: center;
}

.popup-right .qrcode {
	position: absolute;
	top: 1.85rem;
	left: 0.14rem;
	right: 0;
	width: 2.16rem;
	height: 2.16rem;
	margin: 0 auto;
	padding: .06rem;
	border: 0.01rem solid #de0000;
}

.popup-mask {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
}

.popup-main {
	position: absolute;
	left: 0;
	right: 0;
	top: 15%;
	margin: 0 auto;
	width: 3.86rem;
	height: 5.37rem;
	background-image: url(../images/popup.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.popup-main .qrcode {
	position: absolute;
	top: 1.75rem;
	left: 0.16rem;
	right: 0;
	width: 2.48rem;
	height: 2.48rem;
	padding: 0.06rem;
	margin: 0 auto;
	border: 0.01rem solid #de0000;
}

.bigSame {
	animation: bigSame 0.4s linear infinite both;
	cursor: pointer;
}

@keyframes bigSame {
	0% {
		transform: scale(1, 1);
	}
	50% {
		transform: scale(0.85, 0.85);
	}
	100% {
		transform: scale(1, 1);
	}
}