@font-face {
	font-family: WenYueJuJiuWuTi;
	src: url('../font/方正宋三_GBK.ttf');
}
html, body{
	width: 100%;
	max-width: 414px;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	/* font-family: 'Helvetica Neue', Helvetica, 'Microsoft YaHei', STXihei, 'PingFang SC','Hiragino Sans GB', Arial, sans-serif; */
	font-family: WenYueJuJiuWuTi, 'Helvetica Neue', Helvetica, 'Microsoft YaHei', STXihei, 'PingFang SC','Hiragino Sans GB', Arial, sans-serif;
	font-size: 62.5%;
	overflow: hidden;
}
p, ul, li {
	margin: 0;
	padding: 0;
}
a {
	color: #333;
	text-decoration: none;
}
img {
	max-width: 100%;
	vertical-align: middle;
}

.audio-wrap {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 14;
	overflow: hidden;
}

.audio-wrap .control-audio-btn {
	width: 30px;
	height: 30px;
}

.audio-wrap .control-audio-btn.play {
	background: url(../img/play.png) no-repeat center center;
	background-size: cover;
}

.audio-wrap .control-audio-btn.pause {
	background: url(../img/pause.png) no-repeat center center;
	background-size: cover;
}

.swiper-container, .swiper-slide {
	width: 100%;
	height: 100%;
}

.none {
	display: none;
}

.block {
	display: block;
}

.special-red {
	color: #ed4e53;
}

.special-blue {
	color: #2199d2;
}

/* 所有控件 */
video::-webkit-media-controls-enclosure{ 
    display: none;
}

.scoll-btn {
	position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translate(-50%, 0);
	width: 100%;
	text-align: center;
	animation: upDownMove 2s infinite;
	opacity: 0;
}

.scoll-btn img {
	width: 30px;
	height: 30px;
}

#eleventh .scoll-btn {
	position: fixed;
	bottom: 50px;
	left: 50%;
	z-index: 6;
	transform: translate(-50%, 0);
	width: 100%;
	text-align: center;
	animation: upDownMove 2s infinite alternate;
	opacity: 0;
}

#ninth .scoll-btn {
	bottom: 60px;
	opacity: 0;
}

#first {
	background: url('../img/01/first_bg.jpg') no-repeat center;
	background-size: cover;
	position: relative;
}

.first-part-title {
	width: 30%;
	margin: 60px auto 20px;
}

.first-part-content {
	margin-left: -416px;
	width: 100%;
}

.start-btn {
	position: fixed;
	bottom: 12%;
	left: 50%;
	transform: translateX(-50%) scale(1);
	z-index: 2;
	width: 100%;
	height: 55px;
	background: url(../img/01/first_btn.png) no-repeat center;
	background-size: contain;
}
.footer-text {
	position: fixed;
	bottom: 2.8%;
	left: 50%;
	transform: translateX(-50%) scale(.8);
	z-index: 2;
	width: 100%;
	opacity: 0;
}
.footer-text p {
	font-size: 12px;
	text-align: center;
	line-height: 1.5;
	color: #eee;
	letter-spacing: .3em;
}

.start-btn.scale {
	animation: firstPageScale 1.5s 1;
}

#second {
	background: url('../img/02/second_bg.jpg') no-repeat center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}

#second .second-content {
	margin-top: 80px;
	text-indent: 1.5em;
	line-height: 2;
	letter-spacing: 2px;
	font-size: 14px;
	white-space: nowrap;
	/* margin-left: -416px; */
	transform: translateX(-416px);
	font-weight: bold;
	transition: all 0.8s;
}

#second .second-content p,
#second h2{
	/* 渐变效果 */
	background: linear-gradient(to bottom, #1e1711, #773b17);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	
	/* 不支持渐变时的回退样式 */
	@supports not (background-clip: text) {
		color: #181616;
	}
}

#second .second-content p.date {
	color: #181616;
}

#second .customer-name, 
#second .cooperate-day, 
#second .accompany-day,
#third .total-tickets,
#third .total-boxs,
#third .total-weight,
#third .rate span,
#forth .total-tickets,
#forth .total-cost,
#fifth .order-create-time,
#fifth .service-type-name,
#fifth .store-name,
#sixth .month,
#sixth .total-tons,
#sixth .rate,
#sixth .total-stores,
#seventh .total-sqares,
#eighth .eighth-box-equal-one span{
	color: #ff7800;
}

#third {
	background: url('../img/03/third_bg.jpg') no-repeat center;
	background-size: cover;
	position: relative;
}

#third .third-content {
	margin-top: 80px;
	text-indent: 1.5em;
	line-height: 1.8;
	letter-spacing: 2px;
	font-size: 14px;
	opacity: 0;
}

#third .third-content p {
	color: #443727;
	font-weight: bold;
}

#third p.title {
	color: #2f1e14;
	font-size: 22px;
}

#third p.sub-title {
	font-size: 14px;
	color: #805625;
}

#third p.third-title {
	font-size: 18px;
	color: #805625;
	margin-bottom: 20px;
}


#forth {
	background: url('../img/04/forth_bg.jpg') no-repeat center;
	background-size: cover;
	position: relative;
}

#forth .forth-content {
	margin-top: 80px;
	text-indent: 1.5em;
	line-height: 1.8;
	letter-spacing: 2px;
	font-size: 16px;
	opacity: 0;
}

#forth .forth-content p {
	color: #745d4c;
	font-weight: bold;
}

#forth p.title {
	color: #2f1e14;
	font-size: 22px;
}

#forth p.sub-title {
	font-size: 14px;
	color: #805625;
}

#forth p.forth-title {
	font-size: 18px;
	color: #805625;
	margin-bottom: 20px;
}

#fifth {
	background: url('../img/05/fifth_bg.jpg') no-repeat center;
	background-size: cover;
	position: relative;
}

#fifth .fifth-content {
	margin-top: 80px;
	text-indent: 1.5em;
	line-height: 1.8;
	letter-spacing: 2px;
	font-size: 16px;
	/* margin-left: -416px; */
	color: #fff;
	transform: translateX(-416px);
	opacity: 0;
	white-space: nowrap;
}

#fifth .fifth-content.fifth-slide-in {
	animation: slide-in .8s forwards;
}

@keyframes slide-in {
	0% {
		opacity: 0;
		transform: translateX(-416px);
	}
	80% {
		opacity: .8;
		transform: translateX(80px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

#fifth .fifth-content h1 {
	margin: 0;
	line-height: 1.5;
	color: #fff2d9;
}

#fifth .fifth-content p {
	font-weight: bold;
}

#fifth .fifth-content p.sub-title {
	color: #fff2d9;
}

#fifth p.title {
	color: #000;
}

#fifth p.order-create-time {
	font-size: 24px;
	color: #ff0f0f;
}

.way-count-square {
	color: #ed4e53;
}


#sixth{
	background: url('../img/06/sixth_bg.jpg') no-repeat center;
	background-size: cover;
	position: relative;
}

#sixth .sixth-content {
	margin-top: 60px;
	text-indent: 1.5em;
	line-height: 1.8;
	letter-spacing: 2px;
	font-size: 14px;
	color: #6a3616;
	font-weight: bold;
	opacity: 1;
}

#sixth h2.title {
	font-size: 24px;
	margin: 0;
	line-height: 1.5;
	/* 渐变效果 */
	background: linear-gradient(to bottom, #1e1711, #773b17);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	
	/* 不支持渐变时的回退样式 */
	@supports not (background-clip: text) {
		color: #181616;
	}
}

#sixth p.sub-title {
	font-size: 20px;
}

#sixth p.sixth-title {
	padding: 5px 0 0;
	font-size: 16px
}

#sixth p.total-stores {
	font-size: 16px;
	padding: 10px 0 5px;
}

#sixth #chart {
	width: 100%;
	height: 250px;
	margin: 0 auto;
}


#seventh{
	background: url('../img/07/seventh_bg.jpg') no-repeat center;
	background-size: cover;
	position: relative;
}

#seventh .seventh-content {
	margin-top: 80px;
	text-indent: 1.5em;
	line-height: 1.8;
	letter-spacing: 2px;
	font-size: 16px;
	color: #362223;
	font-weight: bold;
	opacity: 1;
}

#seventh h2 {
	margin: 0;
	line-height: 1.5;
}

#seventh p.sub-title {
	color: #0d0d0c;
	padding: 20px 0;
}


#eighth {
	background: url('../img/08/eighth_bg.jpg') no-repeat center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}

#eighth .eighth-content {
	margin-top: 60px;
	text-indent: 1.5em;
	line-height: 1.8;
	letter-spacing: 1.5px;
	color: #352222;
	font-size: 12px;
	font-weight: bold;
	opacity: 1;
}

#eighth h2.title {
	margin: 0;
	line-height: 1.5;
	/* color: #fff2d9; */
	font-size: 24px;
}

#eighth p.sub-title {
	/* color: #fff2d9; */
	font-size: 20px;
	font-weight: bold;
}

#eighth .total-tickets {
	font-size: 14px;
}


#ninth {
	background: url('../img/09/ninth_bg.jpg') no-repeat center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}

#ninth .ninth-content {
	width: 100%;
	height: 480px;
	margin: 40px auto 0;
	background: url('../img/09/content_bg.png') no-repeat center;
	background-size: contain;
	position: relative;
	transform: scale(.7);
	transition: all 1s;
	opacity: 0;
	position: relative;
}

#ninth .ninth-part-footer {
	text-indent: 1.5em;
	line-height: 1.8;
	letter-spacing: 2px;
	font-weight: bold;
	font-size: 14px;
	color: #352222;
	opacity: 0;
}

#ninth .rank-wrap {
	width: 82%;
	margin: 0 auto;
	position: absolute;
	top: 56%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	opacity: 0;
}

#ninth .rank-list {
	width: 100%;
	margin-bottom: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#ninth .rank-item{
	display: flex;
	align-items: center;
}

#ninth .icon{
	width: 20px;
	height: 20px;
	background: url('../img/09/rank_icon.png') no-repeat;
	background-size: contain;
	overflow: hidden;
}

#ninth .name, 
#ninth .value {
	font-size: 20px;
	color: #1e6ba8;
}

#ninth .name {
	margin-left: 5px;
}


#tenth {
	background: url('../img/10/tenth_bg.jpg') no-repeat center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}

#tenth .tenth-title {
	background: url('../img/10/tenth_title.png') no-repeat center;
	background-size: contain;
	width: 50%;
	height: 65px;
	margin: 20px auto 0;
	transform: scale(.2);
	transform-origin: 50%;
}

#tenth .tenth-title.scale {
	animation: tenthTitleScale 1s forwards;
}

@keyframes tenthTitleScale {
	0%{
		transform: scale(.2);
	}
	80%{
		transform: scale(1.2);
	}
	100%{
		transform: scale(1);
	}
}

#tenth .tenth-content {
	background: url('../img/10/tenth_content.png') no-repeat center;
	background-size: contain;
	width: 100%;
	height: 420px;
	margin: 40px auto 0;
	transform: translateY(0);
	transform-origin: 50%;
}

.scale {
	animation: tenthContentScale 1.5s 1 forwards;
}

.move-up-down {
	animation: tendthUpDownMove 1.5s infinite alternate;
}

@keyframes tenthContentScale {
	0%{
		transform: scale(1);
	}
	50%{
		transform: scale(1.4);
	}
	100%{
		transform: scale(1);
	}
}

@keyframes tendthUpDownMove { 
	0%, 100% {
	   transform: translateY(0);
	}
	50% {
	   transform: translateY(-10px);
	}
}


#eleventh {
	background: url('../img/11/eleventh_bg.jpg') no-repeat center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}

#eleventh .eleventh-content {
	position: absolute;
	top: 120px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	width: 100%;
}

#eleventh .eleventh-content .eleventh-item {
	width: 80%;
	margin-left: 20px;
	margin-top: 15px;
	height: 90px;
	opacity: 0;
}

#eleventh .line {
	position: absolute;
	top: 120px;
	left: 6.8%;
	z-index: 1;
	width: 2px;
	height: 520px;
	background: #fff;
}

#eleventh .eleventh-mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
}

#eleventh .eleventh-continue-text {
	position: fixed;
	bottom: 220px;
	left: 50%;
	transform: translateX(-50%);
	width: 85%;
	height: 112px;
	z-index: 6;
	border-radius: 8px;
	overflow: hidden;
}
#eleventh .eleventh-continue-btn {
	position: fixed;
	bottom: 130px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 60px;
	z-index: 6;
	background: url('../img/11/eleventh_continue_btn.png') no-repeat center;
	background-size: contain;
}


#twelveth {
	background: url('../img/12/twelveth_bg.jpg') no-repeat center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}

#twelveth .scroll-container {
	width: 90%;
	height: 450px;
	margin: 110px auto 0;
	overflow: hidden;
	position: relative;
	border-radius: 10px;
	/* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	background-color: #1a1a2e; */
}

#twelveth .long-image {
	width: 100%;
	display: block;
	position: absolute;
	bottom: 0;
	transition: transform 0.1s linear;
	overflow: hidden;
}


#thirteenth {
	background-image: url('../img/13/thirteenth_bg.jpg'), linear-gradient(to bottom, #a8100f, #c11f1c);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	overflow: hidden;
}

#thirteenth .title {
	width: 60%;
	height: 110px;
	background: url('../img/13/thirteenth_title.png') no-repeat center;
	background-size: contain;
	transform: rotateY(-180deg);
	transform-origin: 50%;
	margin: 18% auto 0;
	opacity: 0;
	transition: all 1s;
}

#thirteenth .decoration {
	position: absolute;
	top: 40px;
	right: -416px;
	z-index: 5;
	width: 25%;
	height: 200px;
	background: url('../img/13/thirteenth_icon.png') no-repeat center;
	background-size: contain;
}

#thirteenth .thirteenth-content {
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	width: 85%;
	height: 380px;
	opacity: 0;
}

#thirteenth .thirteenth-btn {
	position: absolute;
	bottom: 5%;
	left: 50%;
	transform: translateX(-50%) scale(.8);
	z-index: 6;
	width: 50%;
	height: 80px;
	background: url('../img/13/thirteenth_btn.png') no-repeat center;
	background-size: contain;
	animation: scale 1s infinite;
	opacity: 0;
}


#forteenth {
	background: url('../img/14/forteenth_bg.jpg') no-repeat center;
	background-size: cover;
	position: relative;
}

#forteenth .forteenth-btn {
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%) scale(.8);
	z-index: 3;
	width: 75%;
	height: 100px;
	background: url('../img/14/forteenth_start_btn.png') no-repeat center;
	background-size: contain;
}


.rich-img-wrap {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .45);
}

.rich-img-wrap.none {
	display: none;
}

.rich-img-box {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	opacity: 0;
}

.rich-img-wrap .rich {
	width: 360px;
	height: 640px;
	transform: translateY(-100%);
	transition: transform 1.5s;
}

.rich-img-wrap .title {
	text-align: center;
	font-size: 48px;
	color: #fff;
}

.close-btn {
	position: fixed;
	bottom: 8%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	width: 40px;
	text-align: center;
	opacity: 0;
}

.oper-btn {
	position: fixed;
	bottom: 15%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	justify-content: space-around;
	opacity: 0;
}

.change-btn {
	width: 128px;
	height: 48px;
	background: #666;
	margin-right: 10px;
	background: url(../img/14/forteenth_change_btn.png) no-repeat center;
	background-size: contain;
}

.save-btn {
	width: 144px;
	height: 48px;
	background: #666;
	background: url(../img/14/forteenth_save_btn.png) no-repeat center;
	background-size: contain;
}

@keyframes btnSlideIn {
	0%{
		opacity: 0;
		transform: translateY(100%);
	}
	100%{
		opacity: 1;
		transform: translateY(35%);
	}
}

@keyframes scale {
	0%{
		transform: translateX(-50%) scale(.8);
	}
	100%{
		transform: translateX(-50%) scale(1);
	}
}

@keyframes firstPageScale {
	0%{
		transform: translateX(-50%) scale(1);
	}
	10%{
		transform: translateX(-50%) scale(1.6);
	}
	75%{
		transform: translateX(-50%) scale(0.9);
	}
	100%{
		transform: translateX(-50%) scale(1);
	}
}

@keyframes upDownMove { 
	0% {
	   transform: translate(-50%, 0);            
	}            
	50% {                
	   transform: translate(-50%, -10px);            
	}            
	100% {                
	   transform: translate(-50%, 0);
	}
}

@keyframes twinkleStar {
	0%{
		opacity: .3;
	}
	100%{
		opacity: 1;
	}
}

.ios-dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	width: 200px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: rgba(0, 0, 0, .45);
	font-size: 18px;
	color: #fff;
	border-radius: 8px;
}