ohplay_official/public/static/css/ohplay.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: cover;
	position: relative;
	overflow: hidden;
}

.section-video {
	overflow: hidden;
}

.video-wrap-2 {
	display: none;
	background-color: rgba(0, 0, 0, 0.8);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.video-2 {
	width: 80%;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.btn-videoplay {
	background-image: url(http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E5%85%B1%E9%80%9A/btn-play.png);
    background-size: contain;
    width: 96px;
    height: 96px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
}

.btn-close {
	    font-size: 0.72rem;
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    color: #fff;
    text-align: center;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    cursor: pointer;
}

.maofm-1 {
	background-image: url('https://www.radio1964.com/2020/ohplay_slide_01.png');
}
.maofm-2 {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/ohplay_slide_default.jpg');
}
.maofm-3 {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/ohplay_slide_02.jpg');
}
.maofm-4 {
	background-image: url('https://www.radio1964.com/2020/ohplay_slide_03.jpg');
}
.maofm-5 {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/ohplay_slide_04.jpg');
}
.maofm-6 {
	background-image: url('https://www.radio1964.com/2020/ohplay_slide_05.jpg');
}
.maofm-7 {
	background-image: url('https://www.radio1964.com/2020/ohplay_slide_06.jpg');
}
.maofm-8 {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/ohplay_slide_07.jpg');
}
.maofm-9 {
	background-image: url('https://www.radio1964.com/2020/ohplay_slide_08.jpg');
}
.maofm-10 {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/ohplay_slide_default.jpg');
}
.maofm-11 {
	background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/ohplay_slide_09.jpg');
}

.section-title {
	display: inline-block;
	font-size: 0.56rem;
	color: #ffbd7b;
	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.56rem;
	color: #ffbd7b;
	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.4rem;
	/*font-family: 'SimSun', 'STSong';*/
}

.section-title, .content-title, .product-title, .ohplay-station {
			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, .ohplay-station {
	opacity: 0;
			transform: translateY(0.5rem);
	-webkit-transform: translateY(0.5rem);
}

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

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

.video-wrap {
	/* width: 10rem; */
	width: 100%;
    height: 100%;
    /*height: 6rem;*/
    border: 3px solid #ffbd7b;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.video-wrap video {
	width: 100%;
	height: auto;
	position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.ohplay-station {
	width: 3.23rem;
	height: 1.47rem;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/ohplay_station.png') no-repeat center center;
	background-size: contain;
}

/* section-1 */
.maofm-1 .section-title {
	font-size: 0.28rem;
	width: 9rem;
	text-align: center;
	left: 50%;
	margin: -0.1rem 0 0 -1rem;
}
.maofm-1 .section-content {
	width: 9rem;
	text-align: center;
	left: 50%;
	margin: -1.2rem 0 0 -1rem;
	font-size: 0.32rem;
}
.ohplay-logo {
	width: 6rem;
	height: 1rem;
	background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/ohplay_logo.png') no-repeat center center;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -2.4rem 0 0 0.44rem;
}


.section-app {
	width: 4.5rem;
	height: 8.4rem;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -4.3rem 0 0 -5.2rem;
}

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

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

/* section-2 */
.maofm-3 .section-title {
	margin: 1.68rem 0 0 -7.24rem;
	text-align: center;
	left: 50%;
	top: 50%;
}
.maofm-3 .section-content {
	width: 6.5rem;
	margin: 2.56rem 0 0 -7.3rem;
	text-align: left;
	left: 50%;
	line-height: 0.4rem;
}
.maofm-3 .shadow-bg {
	width: 7.5rem;
	height: 3.1rem;
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 1.2rem 0 0 -7.8rem;
}


/* section-3 */
.maofm-4 .section-title {
	text-align: left;
	margin: -1.9rem 0 0 3.56rem;
	left: 50%;
	font-size: 0.4rem;
	color: #fff;
	font-style: italic;
}

.maofm-4 .section-content {
	text-align: left;
	margin: -1.16rem 0 0 3.5rem;
	left: 50%;
	width: 4rem;
}

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


/* section-4 */
.maofm-5 .section-title {
	text-align: left;
	left: 50%;
	/*width: 100%;*/
	margin: -0.7rem 0 0 -4.5rem;
}
.maofm-5 .section-content {
	width: 50%;
	margin: 1rem 0 0 -4.47rem;
	/*font-size: 0.2rem;*/
	left: 50%;
	text-align: left;
}

.maofm-5 .section-content span {
	color: #ffbd7b;
}


/* section-5 */
.maofm-6 .section-title {
	left: 50%;
	margin: -2.68rem 0 0 0.77rem;
	text-align: left;
}
.maofm-6 .section-content {
	left: 50%;
	margin: -1rem 0 0 0.8rem;
	text-align: left;
}

/* section-6 */
.maofm-7 .section-title {
	width: 100%;
	margin-top: -3.2rem;
}
.maofm-7 .section-content {
	width: 100%;
	margin-top: -1.5rem;
}
.maofm-7 .title-line {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -1.5rem 0 0 -0.25rem;
}


/* section-7 */
.maofm-8 .section-title {
	text-align: left;
	margin: -2.16rem 0 0 -5.3rem;
	left: 50%;
}

.maofm-8 .section-content {
	text-align: left;
	margin: 0.9rem 0 0 -5.3rem;
	left: 50%;
}
.maofm-8 .ohplay-station {
	margin: -0.5rem 0 0 -5.3rem;
}

.maofm-9 .section-title {
	text-align: left;
	margin: -1.64rem 0 0 2.9rem;
	left: 50%;
	width: 4.5rem;
}

.maofm-9 .section-content {
	text-align: left;
	margin: 1.45rem 0 0 2.9rem;
	left: 50%;
}

.maofm-9 .ohplay-station {
	margin: 0.05rem 0 0 2.9rem;
}

.maofm-11 .section-title {
	text-align: center;
	margin: -4.5rem 0 0 -2rem;
	left: 50%;
	opacity: 1;
			transform: translateY(0);
	-webkit-transform: translateY(0);
}

.maofm-11 .section-content {
	text-align: center;
	margin: -2.8rem 0 0 -5rem;
	left: 50%;
	width: 10.7rem;
	opacity: 1;
			transform: translateY(0);
	-webkit-transform: translateY(0);
}

.maofm-11 .section-content-2 {
	text-align: center;
	margin: 3.5rem 0 0 -4.6rem;
	left: 50%;
	width: 10rem;
	color: #ffbd7b;
}

.maofm-11 .section-title {
			transition: none;
	-webkit-transition: none;
}
.maofm-11 .section-content {
			transition: none;
	-webkit-transition: none;
}

/* 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('https://www.radio1964.com/2020/ohplay_mobile_slide_01.png');
	}
	.maofm-3 {
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/ohplay_mobile_slide_02.jpg');
	}
	.maofm-4 {
		background-image: url('https://www.radio1964.com/2020/ohplay_mobile_slide_03.jpg');
	}
	.maofm-5 {
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/ohplay_mobile_slide_04.jpg');
	}
	.maofm-6 {
		background-image: url('https://www.radio1964.com/2020/ohplay_mobile_slide_05.jpg');
	}
	.maofm-7 {
		background-image: url('https://www.radio1964.com/2020/ohplay_mobile_slide_06.jpg');
	}
	.maofm-8 {
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/ohplay_mobile_slide_07.jpg');
	}
	.maofm-9 {
		background-image: url('https://www.radio1964.com/2020/ohplay_mobile_slide_08.jpg');
	}
	.maofm-11 {
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/ohplay_mobile_slide_09.jpg');
	}
	.maofm-2, .maofm-10 {
		background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/ohplay_mobile_slide_default.jpg');
	}

	.section-title, .content-title {
		/*display: none;*/
		font-size: 0.46rem;
	}
	.section-content, .content-text {
		/*display: none;*/
	}
	.section-content-wrap {
		display: none;
	}
	.section-img {
		display: none;
	}
	.title-line {
		/*display: none;*/
	}

	/* section-1 */
	.maofm-1 .section-title {
		left: 0;
		width: 100%;
		margin: 5rem 0 0 0;
		font-size: 0.24rem;
	}
	.maofm-1 .section-content {
		margin: -4.5rem 0 0 0;
		left: 0;
		font-size: 0.25rem;
		width: 100%;
	}
	.maofm-1 .section-app {
		/*display: none;*/
		height: 7.4rem;
		margin: -2.8rem 0 0 -2.25rem;
	}
	.maofm-1 .app-qrcode {
		margin-top: 1.2rem;
	}
	.maofm-1 .app-hint {
		margin-top: 2.8rem;
	}
	.ohplay-logo {
		margin: -4.3rem 0 0 0;
		width: 100%;
		height: 0.7rem;
		left: 0;
	}

	.video-wrap {
		width: 100%;
	}

	.maofm-3 .section-title {
		width: 100%;
	    margin-top: 0.5rem;
	    left: 0;
	    margin-left: 0;
	}

	.maofm-3 .section-content {
		width: 70%;
		padding: 0 15%;
		text-align: center;
		margin-left: 0;
		margin-top: 1.3rem;
		font-size: 0.22rem;
		left: 0;
	}

	.maofm-3 .shadow-bg {
		display: none;
	}

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

	.maofm-4 .section-content {
		width: 70%;
		padding: 0 15%;
		margin-left: 0;
		margin-top: 4.1rem;
		font-size: 0.22rem;
		text-align: center;
		left: 0;
	}

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

	.maofm-5 .section-title {
		width: 100%;
		margin-left: 0;
		margin-top: 0.2rem;
		text-align: center;
		left: 0;
	}
	.maofm-5 .section-content {
	    width: 70%;
	    margin-left: 0;
	    margin-top: 2rem;
	    font-size: 0.18rem;
	    text-align: center;
	    line-height: 0.44rem;
	    left: 0;
	    padding: 0 15%;
	}

	.maofm-6 .section-title {
		width: 100%;
	    margin-left: 0;
	    margin-top: -0.5rem;
	    text-align: center;
	    left: 0;
	}
	.maofm-6 .section-content {
		width: 5.2rem;
		margin-left: -2.6rem;
		margin-top: 1.3rem;
		font-size: 0.22rem;
		text-align: center;
		line-height: 0.44rem;
	}

	.maofm-7 .section-title {
		width: 4.6rem;
		margin-left: -2.3rem;
		margin-top: -4.6rem;
		font-size: 0.56rem;
		text-align: center;
		font-weight: bolder;
		left: 50%;
	}
	.maofm-7 .section-content {
		width: 4rem;
		margin-left: -2rem;
		margin-top: 1.2rem;
		font-size: 0.22rem;
		text-align: center;
		line-height: 0.36rem;
		left: 50%;
	}

	.maofm-8 .section-title {
	    margin-top: 0rem;
	    width: 100%;
	    left: 0;
	    margin-left: 0;
	    text-align: center;
	}

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

	.maofm-8 .ohplay-station {
		margin: -1.4rem 0 0 -1.61rem;
	}

	.maofm-9 .section-title {
	    margin-top: 1rem;
	    width: 100%;
	    left: 0;
	    margin-left: 0;
	    text-align: center;
	}

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

	.maofm-9 .ohplay-station {
		display: none;
		margin: -1.4rem 0 0 -1.61rem;
	}

	.maofm-11 {
		background-position: 50% 20%;
	}

	.maofm-11 .section-title {
		margin-top: 1.2rem;
		top: 0;
	}
	.maofm-11 .section-content {
		width: 6rem;
		margin: 9.6rem 0 0 -3rem;
		font-size: 0.2rem;
		color: #ffbd7b;
		top: 0;
	}
	.maofm-11 .section-content-2 {
		width: 4rem;
		margin: 2.8rem 0 0 -2rem;
		font-size: 0.2rem;
		color: #fff;
		top: 0;
	}

	.section-video {
		display: none;
	}
}

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