ohplay_official/public/static/css/station.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/%E5%85%B1%E9%80%9A/subnav_logo.jpg');
}
.m-maofm {
	font-size: 0;
}

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

.maofm-1 {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%9F%B3%E4%B9%90%E5%8F%B0/station_slide_01.jpg');
}
.maofm-2 {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%9F%B3%E4%B9%90%E5%8F%B0/station_slide_02.jpg');
}
.maofm-3 {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%9F%B3%E4%B9%90%E5%8F%B0/station_slide_03.jpg');
}
.maofm-4 {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%9F%B3%E4%B9%90%E5%8F%B0/station_slide_04.jpg');
}
.maofm-5 {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%9F%B3%E4%B9%90%E5%8F%B0/station_slide_05.jpg');
}
.maofm-6 {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%9F%B3%E4%B9%90%E5%8F%B0/station_slide_06.jpg');
}
.maofm-7 {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%9F%B3%E4%B9%90%E5%8F%B0/station_slide_07.jpg');
}

.section-title {
	display: inline-block;
	font-size: 0.6rem;
	color: #fff;
	text-align: center;
	font-weight: bolder;
	position: absolute;
	top: 50%;
	letter-spacing: 0.04rem;
	/* font-family: 'SimSun', 'STSong'; */
}

.content-title {
	display: inline-block;
	font-size: 0.6rem;
	color: #fff;
	text-align: center;
	font-weight: 600;
	position: absolute;
	top: 50%;
	pointer-events: none;
	/* font-family: 'SimSun', 'STSong'; */
}

.section-content, .content-text {
	display: inline-block;
	font-size: 0.24rem;
	color: #fff;
	text-align: center;
	position: absolute;
	top: 50%;
	pointer-events: none;
	letter-spacing: 0.02rem;
	line-height: 0.46rem;
	/* font-family: 'SimSun', 'STSong'; */
}

.section-title, .content-title, .product-title {
			transition: all 0.7s cubic-bezier(0,0,.2,1);
	-webkit-transition: all 0.7s cubic-bezier(0,0,.2,1);
}
.title-line {
	transition: all 0.7s cubic-bezier(0,0,.2,1) 0.1s;;
	-webkit-transition: all 0.7s cubic-bezier(0,0,.2,1) 0.1s;
}
.section-content, .content-text, .section-content-wrap, .product-name, .product-img {
			transition: all 0.7s cubic-bezier(0,0,.2,1) 0.1s;
	-webkit-transition: all 0.7s cubic-bezier(0,0,.2,1) 0.1s;
}
.section-price-wrap, .product-content-wrap {
			transition: all 0.7s cubic-bezier(0,0,.2,1) 0.2s;
	-webkit-transition: all 0.7s cubic-bezier(0,0,.2,1) 0.2s;
}

.section-title, .section-content, .title-line {
	opacity: 0;
			transform: translateY(0.5rem);
	-webkit-transform: translateY(0.5rem);
}

.fp-completely .section-title, 
.fp-completely .section-content,
.fp-completely .title-line
{
	opacity: 1;
			transform: translateY(0);
	-webkit-transform: translateY(0);
}

.title-line {
	width: 0.5rem;
	height: 0.06rem;
	background-color: #ff8a00;
}


/* 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;
}

.station-logo {
	width: 6.14rem;
	height: 1.5rem;
	background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%9F%B3%E4%B9%90%E5%8F%B0/station_logo.png') no-repeat center center;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -2.6rem 0 0 -3.07rem;
}

.station-subtitle {
	width: 6.13rem;
	height: 0.28rem;
	background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%9F%B3%E4%B9%90%E5%8F%B0/station_subtitle.png') no-repeat center center;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -0.7rem 0 0 -3.07rem;
}

.section-app .app-qrcode {
	width: 1.73rem;
	height: 1.73rem;
	background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%9F%B3%E4%B9%90%E5%8F%B0/station_qrcode.jpg') no-repeat center center;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0.4rem 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: 2.2rem;
}

/* section-2 */
.maofm-2 .section-title {
	width: 100%;
	margin: -2.6rem 0 0 0;
	text-align: center;
	left: 0;
}
.maofm-2 .section-content {
	width: 10rem;
	margin: -1.4rem 0 0 -5rem;
	text-align: center;
	left: 50%;
}


/* section-3 */
.maofm-3 .section-title {
	text-align: left;
	margin: -2.6rem 0 0 0.6rem;
	left: 50%;
}

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

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


/* section-4 */
.maofm-4 .section-title {
	text-align: left;
	left: 47.5%;
	/*width: 100%;*/
	margin-top: 1.4rem;
}
.maofm-4 .section-content {
	width: 50%;
	margin-top: 2.3rem;
	font-size: 0.2rem;
	line-height: 0.36rem;
	left: 49%;
	text-align: left;
}


/* section-5 */
.maofm-5 .section-title {
	left: 50%;
	margin: -3.3rem 0 0 -5rem;
	text-align: center;
	width: 10rem;
	color: #000;
}
.maofm-5 .section-content {
	left: 50%;
	margin: -2rem 0 0 -5rem;
	text-align: center;
	font-size: 0.2rem;
	line-height: 0.36rem;
	color: #000;
	width: 10rem;
}

/* section-6 */
.maofm-6 .section-title {
	width: 100%;
	margin-top: -3rem;
	font-size: 0.44rem;
}
.maofm-6 .section-content {
	/* width: 100%; */
	left: 50%;
	width: 10rem;
	margin-left: -5rem;
	margin-top: -1.1rem;
	font-size: 0.2rem;
	line-height: 0.36rem;
}
.maofm-6 .title-line {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -1.5rem 0 0 -0.25rem;
}


/* section-7 */
.maofm-7 .section-title {
	text-align: center;
	margin: -3.1rem 0 0 -5rem;
	left: 50%;
	line-height: 0.72rem;
	width: 10rem;
}

.maofm-7 .section-content {
	text-align: center;
	margin: -1.3rem 0 0 -5rem;
	left: 50%;
	font-size: 0.2rem;
	line-height: 0.36rem;
	width: 10rem;
}
.maofm-7 .station-icon-all {
	width: 9.95rem;
	height: 2.36rem;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0 0 0 -4.48rem;
	background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%9F%B3%E4%B9%90%E5%8F%B0/station_icon_all.png') no-repeat 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 {
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%9F%B3%E4%B9%90%E5%8F%B0/station_mobile_slide_01.jpg');
	}
	.maofm-2 {
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%9F%B3%E4%B9%90%E5%8F%B0/station_mobile_slide_02.jpg');
	}
	.maofm-3 {
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%9F%B3%E4%B9%90%E5%8F%B0/station_mobile_slide_03.jpg');
	}
	.maofm-4 {
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%9F%B3%E4%B9%90%E5%8F%B0/station_mobile_slide_04.jpg');
	}
	.maofm-5 {
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%9F%B3%E4%B9%90%E5%8F%B0/station_mobile_slide_05.jpg');
	}
	.maofm-6 {
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%9F%B3%E4%B9%90%E5%8F%B0/station_mobile_slide_06.jpg');
	}
	.maofm-7 {
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%9F%B3%E4%B9%90%E5%8F%B0/station_mobile_slide_07.jpg');
	}

	.section-content-wrap {
		display: none;
	}
	.section-img {
		display: none;
	}

	/* section-1 */
	.maofm-1 .section-title {
		display: none;
	}
	.maofm-1 .section-content {
		display: none;
	}
	.maofm-1 .section-app{
		/*display: none;*/
	}
	.maofm-1 .app-qrcode {
		margin-top: 1.8rem;
	}
	.maofm-1 .app-hint {
		margin-top: 3.6rem;
	}

	.maofm-2 .section-title {
		width: 60%;
		padding: 0 20%;
		margin-top: -3.3rem;
	}

	.maofm-2 .section-content {
		width: 4.4rem;
		margin-left: -2.2rem;
		margin-top: -1.3rem;
		font-size: 0.22rem;
		text-align: left;
	}

	.maofm-3 .section-title {
		width: 6rem;
		margin-left: -3rem;
		margin-top: 0.9rem;
		font-size: 0.4rem;
		text-align: center;
	}

	.maofm-3 .section-content {
		width: 4.4rem;
		margin-left: -2.2rem;
		margin-top: 2.9rem;
		font-size: 0.22rem;
		text-align: left;
	}

	.maofm-3 .title-line {
		margin: 2.4rem 0 0 -0.25rem;
	}

	.maofm-4 .section-title {
		width: 4.6rem;
		margin-left: -2.1rem;
		margin-top: -3rem;
		font-size: 0.56rem;
		text-align: center;
		font-weight: bolder;
		left: 50%;
	}
	.maofm-4 .section-content {
		width: 3.6rem;
		margin-left: -1.5rem;
		margin-top: -1.3rem;
		font-size: 0.22rem;
		text-align: left;
		line-height: 0.44rem;
	}

	.maofm-5 .section-title {
		width: 4.6rem;
		margin-left: -2.3rem;
		margin-top: -3.8rem;
		font-size: 0.56rem;
		text-align: center;
		font-weight: bolder;
		left: 50%;
	}
	.maofm-5 .section-content {
		width: 5.2rem;
		margin-left: -2.6rem;
		margin-top: -2.2rem;
		font-size: 0.22rem;
		text-align: left;
		line-height: 0.44rem;
	}

	.maofm-6 .section-title {
		width: 4.6rem;
		margin-left: -2.3rem;
		margin-top: -3.8rem;
		font-size: 0.56rem;
		text-align: center;
		font-weight: bolder;
		left: 50%;
	}
	.maofm-6 .section-content {
		width: 5rem;
		margin-left: -2.5rem;
		margin-top: -1.7rem;
		font-size: 0.22rem;
		text-align: left;
		line-height: 0.36rem;
		left: 50%;
	}

	.maofm-6 .title-line {
		margin-top: -2.2rem;
	}

	.maofm-7 .section-title {
		margin-top: -4.4rem;
	}

	.maofm-7 .section-content {
		width: 5rem;
		margin-left: -2.5rem;
		margin-top: -2.5rem;
		font-size: 0.22rem;
		text-align: left;
		line-height: 0.4rem;
	}

	.maofm-7 .station-icon-all {
		width: 4.03rem;
		height: 5.58rem;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -0.2rem 0 0 -2.01rem;
		background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%9F%B3%E4%B9%90%E5%8F%B0/station_mobile_icon_all.png') no-repeat center;
		background-size: contain;
	}
}

@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%;
    }
}