ohplay_official/public/static/css/product-maoking.css

@charset "UTF-8";
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2017-07-04 14:35:58
 * @version $Id$
 */
* {
	margin: 0;
	padding: 0;
}
html {
	font-size: 625%;
}
body {
	width: 100%;
}

.scroll-wrap {
	width: 100%;
	// height: 100vh;
	// overflow: hidden;
}

.scroll-wrap > .scroll-item {
	position: relative;
	width: 100%;
	// min-width: 960px;
	height: 100vh;
	
	background-position: center center;
	background-size: cover;
}

.scroll-item:nth-child(1) .scroll-text {
	top: 45%;
}

.scroll-item:nth-child(2) .scroll-text {
	top: 1.5rem;
}

.scroll-item:nth-child(3) .scroll-text {
	top: 3rem;
}

.scroll-item:nth-child(4) .scroll-text {
	top: 3.5rem;
}

.scroll-item:nth-child(5) .scroll-text {
	top: 1.5rem;
}

.scroll-item:nth-child(6) .scroll-text {
	top: 1rem;
}

.scroll-item .scroll-text {
	width: 100%;
	position: absolute;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	text-align: center;
}
.scroll-text-title {
	font-size: 0.72rem;
	color: #f2e7ce;
}
.scroll-text-content {
	margin-top: 0.5rem;
	font-size: 0.18rem;
	color: #f2e7ce;
	line-height: 0.4rem;
}

.scroll-text p{
	opacity: 0;
	-webkit-transform: translateY(2rem);
	-webkit-transition: all 1s;
}

.fp-completely .scroll-text p{
	opacity: 1;
	-webkit-transform: translateY(0);
}

#fp-nav > ul > li > a > span {
	background-color: #fff;
}

.video-wrap {
	position: absolute;
	left: 6%;
	bottom: 1.5rem;
}
.video-title {
	font-size: 0.28rem;
	color: #fffde8;
	margin: 5px;
}
.video-tv {
	margin: 15px 0;
}
.video-text {
	font-size: 12px;
	color: #fffde8;
	margin: 5px;
	line-height: 0.24rem;
}
.btn-buynow {
	width: 250px;
	line-height: 0.6rem;
	font-size: 0.3rem;
	color: #f1d7ae;
	position: absolute;
	top: 85%;
	text-align: center;
	left: 50%;
	margin-left: -1rem;
	background-color: #862323;
	border-radius: 15px;
	cursor: pointer;
}

@media (max-width: 1600px) {
	html {
		font-size: 500%;
	}
	.scroll-item .scroll-text {
		// width: 50%;
	}
}

@media (max-width: 1280px) {
	html {
		font-size: 375%;
	}
	.scroll-item .scroll-text {
		// width: 65%;
	}
	.video-tv > img{
		width: 70%;
	}
}

@media (max-width: 960px) {
	html {
		font-size: 250%;
	}
	.scroll-item .scroll-text {
		// width: 80%;
	}
	.video-tv > img{
		width: 50%;
	}
}