ohplay_official/public/static/css/maofm_0825.css

@charset "UTF-8";
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2017-08-01 16:56:17
 * @version $Id$
 */

* {
    margin: 0;
    padding: 0;
}
html {
    font-family: "PingFang SC", "STXihei", "Microsoft YaHei";
    font-size: 625%;
}

.footer-wrap {
    /*display: none;*/
}

.subnav-logo {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/subnav_logo_fm.jpg');
}
.m-maofm {
	font-size: 0;
}

.section {
	width: 100%;
	height: 100vh;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	position: relative;
}

.section-bg {
	width: 100%;
	height: 100vh;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: relative;
}

.maofm-1 .section-bg {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_01.jpg');
}
.maofm-2 .section-bg {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_02.jpg');
}
.maofm-3 .section-bg {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_03.jpg');
}
.maofm-4 .section-bg {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_04.jpg');
}
.maofm-5 .section-bg {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_05.jpg');
}
.maofm-6 .section-bg {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_06.jpg');
}
.maofm-7 .section-bg {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_07.jpg');
}
.maofm-8 .section-bg {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_default.jpg');
}
.maofm-product .section-bg {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_default.jpg');
}

.section-title {
	display: inline-block;
	font-size: 0.6rem;
	color: #ffbc7b;
	text-align: center;
	font-weight: 400;
	position: absolute;
	top: 50%;
	letter-spacing: 0.04rem;
}

.content-title {
	display: inline-block;
	font-size: 0.6rem;
	color: #ffbe7e;
	text-align: center;
	font-weight: 600;
	position: absolute;
	top: 50%;
	pointer-events: none;
}

.section-content, .content-text {
	display: inline-block;
	font-size: 0.4rem;
	color: #fff;
	text-align: center;
	position: absolute;
	top: 50%;
	pointer-events: none;
	letter-spacing: 0.02rem;
}

.title-line {
	width: 1.4rem;
	height: 2px;
	background-color: #fff;
}


/* section-1 */
.maofm-1 .section-title {
	font-size: 0.9rem;
	width: 100%;
	text-align: center;
	left: 0;
	margin-top: -2.6rem;
	letter-spacing: 0.1rem;
	font-weight: 600;
}
.maofm-1 .section-content {
	width: 100%;
	text-align: center;
	left: 0;
	margin-top: -1.2rem;
	letter-spacing: 0.04rem;
}

.section-app .app-logo {
	width: 1.73rem;
	height: 0.42rem;
	background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_logo.png') no-repeat center center;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0.75rem 0 0 -0.865rem;
}

.section-app .app-qrcode {
	width: 1.73rem;
	height: 1.73rem;
	background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_qrcode.jpg') no-repeat center center;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 1.32rem 0 0 -0.865rem;
}

.section-app .app-hint {
	width: 100%;
	color: #fff;
	font-size: 0.2rem;
	text-align: center;
	position: absolute;
	top: 50%;
	margin-top: 3.2rem;
}

/* section-2 */
.maofm-2 .section-title {
	width: 5rem;
	margin: -3.7rem 0 0 -5.6rem;
	text-align: left;
	left: 50%;
}
.maofm-2 .section-content-wrap {
	/*width: 8rem;*/
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -2.8rem 0 0 -5.6rem;
}

.maofm-2 .content-item {
	position: relative;
	margin: 0.45rem 0;
}

.maofm-2 .content-title {
	display: block;
	position: relative;
	top: 0;
	left: 0;
	text-align: left;
	font-size: 0.4rem;
	font-weight: normal;
}

.maofm-2 .content-text {
	position: relative;
	top: 0;
	left: 0;
	text-align: left;
	font-size: 0.24rem;
	margin-top: 0.15rem;
	line-height: 0.38rem;
}


/* section-3 */
.maofm-3 .section-title {
	text-align: right;
	margin: -1.5rem -1.9rem 0 0;
	right: 50%;
}

.maofm-3 .section-content {
	text-align: right;
	margin: 0.4rem -2rem 0 0;
	right: 50%;
	font-size: 0.2rem;
	line-height: 0.36rem;
}

.maofm-3 .section-img {
	width: 4.69rem;
	height: 8.06rem;
	background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_phone_01.png') no-repeat center center;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -4rem 0 0 1.9rem;
}

.maofm-3 .title-line {
	position: absolute;
	top: 50%;
	right: 50%;
	margin: -2rem -1.8rem 0 0;
}


/* section-4 */
.maofm-4 .section-title {
	width: 100%;
	margin-top: -4.2rem;
}
.maofm-4 .section-content {
	width: 100%;
	margin-top: -3rem;
	font-size: 0.2rem;
	line-height: 0.36rem;
}


/* section-5 */
.maofm-5 .section-title {
	left: 50%;
	margin: -2.5rem 0 0 -5.2rem;
	text-align: left;
}
.maofm-5 .section-content {
	left: 50%;
	margin: -0.6rem 0 0 -5.2rem;
	text-align: left;
	font-size: 0.2rem;
	line-height: 0.36rem;
}
.maofm-5 .title-line {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -3rem 0 0 -5.2rem;
}


/* section-6 */
.maofm-6 .section-title {
	width: 100%;
	margin-top: -1.2rem;
}
.maofm-6 .section-content {
	width: 100%;
	margin-top: -0.2rem;
	font-size: 0.2rem;
	line-height: 0.36rem;
}


/* section-7 */
.maofm-7 .section-title {
	text-align: left;
	margin: -2.3rem 0 0 -0.9rem;
	left: 50%;
	line-height: 0.72rem;
}

.maofm-7 .section-content {
	text-align: left;
	margin: -0.5rem 0 0 -0.9rem;
	left: 50%;
	font-size: 0.2rem;
	line-height: 0.36rem;
}

.maofm-7 .section-img {
	width: 4.69rem;
	height: 8.06rem;
	background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_phone_02.png') no-repeat center center;
	background-size: contain;
	position: absolute;
	top: 50%;
	right: 50%;
	margin: -4.4rem 1.1rem 0 0;
}

.maofm-7 .title-line {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -3rem 0 0 -0.86rem;
}


/* section-8 */
.maofm-8 .section-title {
	width: 100%;
	margin-top: -3.8rem;
}
.maofm-8 .section-content {
	width: 100%;
	margin-top: -2.8rem;
	font-size: 0.2rem;
	line-height: 0.36rem;
}
.section-price-wrap {
	width: 12.3rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	margin-top: 0.8rem;
}
.price {
	display: inline-block;
	width: 3.1rem;
	height: 3.1rem;
	background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_price_bg.png') no-repeat center center;
	background-size: contain;
	position: relative;
	margin: 0 0.5rem;
}
.price-num {
	font-size: 0.8rem;
	width: 100%;
	text-align: center;
	line-height: 3.1rem;
	color: #ffc28b;
	font-family: Arial;
}
.price-middle span {
	letter-spacing: -0.1rem;
}
.price-num span {
	font-size: 1.1rem;
	color: #ffc28b;
}
.price-text {
	width: 100%;
	text-align: center;
	font-size: 0.4rem;
	position: absolute;
	top: 100%;
	margin-top: 0.2rem;
	color: #fff;
}


/* section-8 */
.maofm-product .product-title {
	font-size: 0.4rem;
	color: #ffc28b;
	text-align: center;
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: -4.3rem;
}

.maofm-product .product-name {
	font-size: 0.3rem;
	color: #ffc28b;
	text-align: center;
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: 2rem;
}

.product-img {
	width: auto;
	height: 40vh;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	margin-top: -0.4rem;
}

.product-content-wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	margin-top: 3.5rem;
}

.product-content {
	font-size: 0.24rem;
	color: #fff;
	margin: 0.2rem 0;
	line-height: 0.36rem;
	letter-spacing: 0.02rem;
	position: relative;
}

.product-icon {
	display: inline-block;
	width: 0.35rem;
	height: 0.35rem;
	position: relative;
	top: 0.08rem;
	right: 0.04rem;
	background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_circle.png') no-repeat center center;
	background-size: contain;

}

/* common */
.scroll-hint {
    width: 0.2rem;
    height: auto;
    position: absolute;
    top: 90%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: 2;
}

.mb-scroll-hint {
	display: none;
}

.mb-download-wrap {
	display: none;
}

@media (min-width: 959px) {
	html {
		font-size: 385%;
	}
}
@media (min-width: 1279px) {
	html {
		font-size: 465%;
	}
}
@media (min-width: 1599px) {
	html {
		font-size: 545%;
	}
}
@media (min-width: 1919px) {
	html {
		font-size: 625%;
	}
}

@media (max-device-width: 1081px) {
    html {
        font-size: 585%;
    }
	.scroll-hint {
		display: none;
	}
	.mb-scroll-hint {
		display: inline-block;
	    width: 0.4rem;
	    height: auto;
	    position: absolute;
	    top: 92%;
	    left: 50%;
	    -webkit-transform: translate(-50%, -50%);
	            transform: translate(-50%, -50%);
	    z-index: 2;
	}

	.maofm-1 .section-bg {
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_01.jpg');
	}
	.maofm-2 .section-bg {
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_02n.jpg');
	}
	.maofm-3 .section-bg {
		background-position: 50% 80%;
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_03n.jpg');
	}
	.maofm-4 .section-bg {
		background-position: 50% 0;
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_04n.jpg');
	}
	.maofm-5 .section-bg {
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_05n.jpg');
	}
	.maofm-6 .section-bg {
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_06n.jpg');
	}
	.maofm-7 .section-bg {
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_07n.jpg');
	}
	.maofm-8 .section-bg {
		background-position: 50% 0;
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_default.jpg');
	}
	.maofm-product .section-bg {
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_default.jpg');
	}
	/*.product-2 {
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_10.jpg');
	}*/

	.section-title, .content-title {
		/*display: none;*/
	}
	.section-content, .content-text {
		/*display: none;*/
	}
	.section-content-wrap {
		/*display: none;*/
	}
	.section-img {
		/*display: none;*/
	}
	.title-line {
		display: none;
	}
	.section-price-wrap {
		/*display: none;*/
	}
	.product-title {
		/*display: none;*/
	}
	.product-content {
		/*display: none;*/
	}
	.product-name {
		/*display: none;*/
	}
	.product-img {
		/*display: none;*/
	}

	/* section-1 */
	.maofm-1 .section-title {
		display: none;
	}
	.maofm-1 .section-content {
		display: none;
	}
	.maofm-1 .section-app{
		display: none;
	}

	.mb-download-wrap {
		display: block;
	}

	.download-ios {
		width: 2.25rem;
		height: 0.61rem;
		border-radius: 0.2rem;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: 2rem 0 0 -1.125rem;
		background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/btn_ios.png') no-repeat center center;
		background-size: contain;
	}
	.download-android {
		width: 2.25rem;
		height: 0.61rem;
		border-radius: 0.2rem;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: 3.05rem 0 0 -1.125rem;
		background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/btn_android.png') no-repeat center center;
		background-size: contain;
	}

	.maofm-2 .section-title {
		margin: -4.1rem 0 0 -3rem;
		font-size: 0.52rem;
	}

	.maofm-2 .section-content-wrap {
		width: 6rem;
		margin: -3.5rem 0 0 -3rem;
	}
	.maofm-2 .content-title {
		font-size: 0.26rem;
	}

	.maofm-3 .section-title {
		font-size: 0.42rem;
		width: 100%;
		right: 0;
		margin: 2.7rem 0 0 0;
		text-align: center;
	}
	.maofm-3 .section-content {
		width: 80%;
		right: 0;
		margin: 4rem 10% 0;
		text-align: center;
	}
	.maofm-3 .section-img {
		width: 3.5rem;
		margin: -4.3rem 0 0 -1.75rem;
	}

	.maofm-4 .section-title {
		font-size: 0.44rem;
		margin-top: -3.4rem;
	}

	.maofm-4 .section-content {
		width: 80%;
		margin: -2.6rem 10% 0;
	}

	.maofm-5 .section-title {
		width: 80%;
		margin: -1rem 10%;
		text-align: center;
		left: 0;
		font-size: 0.4rem;
	}

	.maofm-5 .section-content {
		width: 80%;
		margin: 0.24rem 10%;
		text-align: center;
		left: 0;
	}

	.maofm-6 .section-title {
		margin-top: -1rem;
		font-size: 0.4rem;
	}
	.maofm-6 .section-content {
		width: 80%;
		margin: -0.3rem 10%;
	}

	.maofm-7 .section-title {
		text-align: center;
		margin: -3.8rem 10% 0;
		left: 0;
		font-size: 0.4rem;
		line-height: 0.5rem;
		width: 80%;
	}
	.maofm-7 .section-content {
		width: 80%;
		margin: -2.8rem 10%;
		text-align: center;
		left: 0;
	}
	.maofm-7 .section-img {
		margin: -2.6rem -2.3rem 0 0;
	}

	.maofm-8 .section-title {
		margin-top: -4rem;
	}

	.maofm-8 .section-content {
		margin-top: -3rem;
	}
	.price {
		width: 2.2rem;
		height: 2.2rem;
		position: absolute;
		top: 50%;
		left: 50%;
	}
	.price-text {
		font-size: 0.28rem;
	}
	.price-num {
		font-size: 0.54rem;
		line-height: 2.2rem;
	}
	.price-num span {
		font-size: 0.84rem;
	}
	.price-low {
		margin: -2.3rem 0 0 -1.1rem;
	}
	.price-middle {
		margin: 0.6rem 0 0 -2.5rem;
	}
	.price-high {
		margin: 0.6rem 0 0 0.3rem;
	}


	.maofm-product .product-title {
		font-size: 0.32rem;
		margin: -3.5rem 10%;
		width: 80%;
	}
	.product-img {
		width: 66%;
		height: auto;
		margin-top: -0.2rem;
	}
	.maofm-product .product-name {
		font-size: 0.32rem;
		margin-top: 2.2rem;
	}
	.product-content-wrap {
		left: 0;
		transform: translate(0, -50%);
		-webkit-transform: translate(0, -50%);
		width: 80%;
		margin: 4rem 10% 0;
	}
}

@media (max-device-width: 720px) {
    html {
        font-size: 465%;
    }
}
@media (max-device-width: 660px) {
    html {
        font-size: 445%;
    }
}
@media (max-device-width: 600px) {
    html {
        font-size: 425%;
    }
}
@media (max-device-width: 540px) {
    html {
        font-size: 405%;
    }
}
@media (max-device-width: 480px) {
    html {
        font-size: 385%;
    }
}
@media (max-device-width: 420px) {
    html {
        font-size: 345%;
    }
}
@media (max-device-width: 360px) {
    html {
        font-size: 325%;
    }
}
@media (max-device-width: 240px) {
    html {
        font-size: 305%;
    }
}

.ani-bgscale-x {
	-webkit-animation: bgscale-x 2s cubic-bezier(0,0,.2,1);
	        animation: bgscale-x 2s cubic-bezier(0,0,.2,1);
}
.ani-bgscale-y {
	-webkit-animation: bgscale-y 2s cubic-bezier(0,0,.2,1);
	        animation: bgscale-y 2s cubic-bezier(0,0,.2,1);
}

@-webkit-keyframes bgscale-x {
	0% {
		-webkit-background-size: 115% auto;
		background-size: 115% auto;
	}
	100% {
		-webkit-background-size: 115% auto;
		background-size: 100% auto;
	}
}

@keyframes bgscale-x {
	0% {
		-webkit-background-size: 115% auto;
		background-size: 115% auto;
	}
	100% {
		-webkit-background-size: 115% auto;
		background-size: 100% auto;
	}
}

@-webkit-keyframes bgscale-y {
	0% {
		-webkit-background-size: auto 115%;
		background-size: auto 115%;
	}
	100% {
		-webkit-background-size: auto 100%;
		background-size: auto 100%;
	}
}

@keyframes bgscale-y {
	0% {
		-webkit-background-size: auto 115%;
		background-size: auto 115%;
	}
	100% {
		-webkit-background-size: auto 100%;
		background-size: auto 100%;
	}
}