body{
	background: #000;
}
.wrap{
	height: 100%;
	width: 100%;
	background: #000;
}
.page{
	height: 100%;
	width: 100%;
	min-height: 580px;
}
.page-one{
	background: #000 url(../images/1.jpg) left top no-repeat;
	background-size: 100% auto;
	position: relative;
}
.img{
	width: 100%;
	height: 100%;
}
.imgH{
	width: auto;
	height: 100%;
}
.imgW{
	width: 100%;
	height: auto;
}
.one-btn{
	display: inline-block;
	width: 9.9rem;
	height: 4.5rem;
	position: absolute;
	left: 50%;
	bottom: 2rem;
	margin-left: -4.9rem;
}
.page-two{
	background: #000 url(../images/2.jpg) left top no-repeat;
	background-size: 100% auto;
	position: relative;
}
.two-head{
	text-align: center;
	padding: 1rem 0;
}
.head-title{
	display: inline-block;
	vertical-align: middle;
	color: #fff;
	font-size: 2.2rem;
	line-height: 3rem;
	text-align: center;
}
.head-chose{
	display: inline-block;
	/*width: 9.8rem;*/
	height: 3rem;
	font-size: 0;
	line-height: 0;
	border: 2px solid #666666;
	position: relative;
	vertical-align: middle;
}
.chose-name{
	background: #fff;
	width: 7.55rem;
	height: 3rem;
	color: #333333;
	font-size: 1.5rem;
	line-height: 3rem;
	display: inline-block;
	vertical-align: middle;
}
.chose-tip{
	display: inline-block;
	width: 3.35rem;
	height: 3rem;
	vertical-align: middle;
}
.chose-tip-act{
	transform:rotate(180deg)
}
.head-list{
	position: absolute;
	left: 0;
	width: 7.55rem;
	top: 3.1rem;
	background: #fff;
	border: 1px solid #333;
	border-width: 1px 1px 0 1px;
	display: none;
	height: 25rem;
	overflow-y: scroll;
	z-index: 5;
}
.head-item{
	height: 2.8rem;
	line-height: 2.8rem;
	text-align: center;
	font-size: 1.6rem;
	display: inline-block;
	width: 100%;
	border-bottom: 1px solid #333;
}
.two-tabs{
	margin: 1rem 0;
	text-align: center;
}
.two-tab{
	display: inline-block;
	width: 8.2rem;
	height: 3.6rem;
	margin: 0 1rem;
}
.two-tab .left-tab{
	display: inline-block;
	width: 100%;
	height: 100%;
	background: url(../images/2_1.png) left top no-repeat;
	background-size: 100% 100%;
}
.two-tab .right-tab{
	display: inline-block;
	width: 100%;
	height: 100%;
	background: url(../images/2_2.png) left top no-repeat;
	background-size: 100% 100%;
}
.two-tab-act .left-tab{
	background: url(../images/2_1_act.png) left top no-repeat;
	background-size: 100% 100%;
}
.two-tab-act .right-tab{
	background: url(../images/2_2_act.png) left top no-repeat;
	background-size: 100% 100%;
}
.two-con{
	position: relative;
}
.two-info{
	position: absolute;
	left: 0;
	top: 3rem;
	right: 0;
	z-index: 3;
	display: flex;
	justify-content: space-between;
}
.info-items{
	width: 8rem;
	padding: 0rem 0.2rem;
}
.items-icon{
	display: inline-block;
	width: 5.8rem;
	height: 5.2rem;
	padding: 1.8rem 1.2rem 1rem 1rem;
	background: url(../images/item_bg.png) left top no-repeat;
	background-size: 100% 100%;
	text-align: center;
	/*margin-bottom: 2rem;*/
}
.two-next{
	display: inline-block;
	width: 12rem;
	height: 5.3rem;
	background: url(../images/3_1.png) left top no-repeat;
	background-size: 100% 100%;
	position: absolute;
	left: 50%;
	margin-left: -6rem;
	bottom: 5%;
	cursor: pointer;
	z-index: 5;
}
.zhuan-con .info-items{
	width: 9rem;
}
.zhuan-con .items-icon{
	width: 7rem;
	height: 6.4rem;
	padding: 1.6rem 1rem 1rem;
	text-align: center;
}
.page-three{
	background: #000 url(../images/3.jpg) left top no-repeat;
	background-size: 100% 100%;
	position: relative;
}
.three-head{
	padding: 3rem 0 1rem;
	height: 20rem;
	position: relative;
}
.three-bule{
	height: 17rem;
	position: absolute;
	left: 0;
	top: 3rem;
	right: 0;
	background:url(../images/3_1.png) left top no-repeat;
	background-size: 100% auto;
	z-index: 2;
}
.three-red{
	height: 17rem;
	background:url(../images/3_2.png) left top no-repeat;
	background-size: 100% auto;
	position: relative;
	z-index: 1;
}
.three-shan{
	display: inline-block;
	width: 12rem;
	height: 20rem;
	position: absolute;
	left: 50%;
	top: 3rem;
	margin-left: -6rem;
	background:url(../images/3_3.png) left top no-repeat;
	background-size: 100% auto;
	z-index: 3;
	opacity: 0;
}
.three-item{
	
}
.three-type{
	color :#fff;
	font-size: 0.9rem;
}

.three-name{
	color :#fff;
	font-size: 1.6rem;
}
.three-bule .three-icon{
	display: inline-block;
    width: 7.8rem;
    height: 7.8rem;
    position: absolute;
    left: 6.4rem;
    bottom: 2.7rem
}
.three-bule .three-info{
	position: absolute;
	left: 1.7rem;
    bottom: 4.4rem;
}
.three-red .three-icon{
	display: inline-block;
    width: 7.8rem;
    height: 7.8rem;
    position: absolute;
    right: 6.4rem;
    bottom: 2.7rem
}
.three-red .three-info{
	position: absolute;
	right: 1.7rem;
    bottom: 4.4rem;
}
.three-foot{
	margin-top: 4rem;
}
.success{
	text-align: center;
	height: 6rem;
	opacity: 0;
}
.doing{
	text-align: center;
	height: 3rem;
	opacity: 0;
}
.three-num{
	color: #fff;
	font-size: 10rem;
	font-weight: bold;
	text-align: center;
	opacity: 0;
}
.animate .three-bule{
	animation: bounceInLeft 1s forwards;
}
.animate .three-red{
	animation: bounceInRight 1s forwards;
}
.animate .three-shan{
	animation: bounceInDown 1s 0.5s forwards;
}
.animate .success{
	animation: fadeIn 1s 1.3s forwards;
}
.animate .doing{
	animation: fadeIn 0.8s 1.8s forwards;
}
.animate .three-num{
	animation: fadeIn 0.2s 2.3s forwards;
}
.page-four{
	background: #000;
	position: relative;
}
.four-gif{
	width: 100%;
	height: 19rem;
}
.four-gif video{
	width: 100%;
	height: 100%;
	display: block;
}
.player{
	width: 100%;
	height: 6rem;
}
.player .play{
	width: 3rem;
	height: 3rem;
	background: url(https://mgame-f.netease.com/forum/201906/28/142402geoo9ndlg44exd40.png) no-repeat center 0 /100% 100%;
	margin: .8rem auto 0;
	opacity: .99;
}
.netwarn{
	color: #ff0000;
    text-align: center;
    font-size: 1rem;
	padding-top: .5rem;
}
.four-info{
	padding: 8.1rem 1rem 1.1rem;
	height: 45rem;
	background: url(../images/g_b.jpg) left top no-repeat;
	background-size: cover;
	margin: -6rem auto 0;
}
.info-line{
	color: #fff;
	font-size: 1.3rem;
	line-height: 2rem;
	/* opacity: 0; */
}
.yellow{
	color: #ffff00;
}
.red{
	color: #ff0000;
}
.green{
	color: #00ff00;
}
.animate .four-one{
	display: none;
	/* animation: fadeIn 0.5s 1s forwards; */
}
.animate .four-two{
	display: none;
	/* animation: fadeIn 0.5s 5s forwards; */
}
.animate .four-three{
	display: none;
	/* animation: fadeIn 0.5s 29s forwards; */
}
.animate .four-four{
	display: none;
	/* animation: fadeIn 0.5s 33s forwards; */
}
.animate .four-five{
	display: none;
	/* animation: fadeIn 0.5s 50s forwards; */
}
.animate .four-six{
	display: none;
	/* animation: fadeIn 0.5s 67s forwards; */
}
.animate .five-pause{
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}
.animate .five-play{
	-webkit-animation-play-state: running;
	animation-play-state: running;
}
.page-five{
	background: url(../images/4.jpg) center top no-repeat;
	background-size: 100% 100%;
}
.five-peo{
	padding-top: 5rem;
	height: 39rem;
	text-align: center;
}
.five-ava{
	animation: fadeIn 0.5s 1s forwards;
	opacity: 0;
}
.five-word{
	text-align: center;
	height: 4rem;
	margin-top: -3rem;
}
.five-word .imgH{
	transform: translate(-30rem,0) skewX(45deg);
	animation: slide 0.5s 1s forwards;
}
@keyframes slide {
    0% {
        transform: translate(-30rem,0) skewX(45deg);
    }

    to {
        transform: translate(0,0) skewX(0);
    }
}
.five-news{
	text-align: center;
}
.five-name{
	display: inline-block;
	margin: .2rem 0.6rem 0;
	color: #fff;
	font-size: 1.5rem;
	font-weight: bold;
}
.page-six{
	background: #1a192b url(../images/5.jpg) center top no-repeat;
	background-size: 100% auto;
	text-align: center;
}
.six-time{
	margin-top: 45%;
	font-size: 1.2rem;
	text-align: center;
	color: #fff;
	text-shadow: .1rem .1rem .1rem #000;
	display: inline-block;
	background: rgba(0,0,0,.5);
	padding: .2rem .5rem;
	border-radius: 1rem;
}
.six-list{
	padding: 1rem 1rem 0 ;
	display: flex;
	align-items: center;
}
.six-item{
	display: inline-block;
	width: 14.3rem;
	height: 5.6rem;
	background: url(../images/5_3.png) left top no-repeat;
	background-size:100% auto;
	text-align: center; 
}
.six-w{
	display: inline-block;
	width: 100%;
	height: 100%;
	color: #facc81;
	line-height: 5.2rem;
	font-size: 1.5rem;
	font-weight: bold;
	transform: rotate(-5deg);
}
.six-left, .six-right{
	width: 50%;
}
.six-left{
	padding-top: 4rem;
}
.six-right{
	/*padding-top: 1rem;*/
}
.six-foot{
	text-align: center;
	height: 7rem;
}
.share{
	display: inline-block;
	width: 14rem;
	height: 3.5rem;
	margin-top: 1.2rem;
}
@keyframes bounceInLeft {
    0%,60%,75%,90%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px,0,0);
        transform: translate3d(-3000px,0,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px,0,0);
        transform: translate3d(25px,0,0)
    }

    75% {
        -webkit-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0)
    }

    90% {
        -webkit-transform: translate3d(5px,0,0);
        transform: translate3d(5px,0,0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes bounceInRight {
    0%,60%,75%,90%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px,0,0);
        transform: translate3d(3000px,0,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px,0,0);
        transform: translate3d(-25px,0,0)
    }

    75% {
        -webkit-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0)
    }

    90% {
        -webkit-transform: translate3d(-5px,0,0);
        transform: translate3d(-5px,0,0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes bounceInDown {
    0%,60%,75%,90%,to {
    	opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-3000px,0);
        transform: translate3d(0,-3000px,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0,25px,0);
        transform: translate3d(0,25px,0)
    }

    75% {
        -webkit-transform: translate3d(0,-10px,0);
        transform: translate3d(0,-10px,0)
    }

    90% {
        -webkit-transform: translate3d(0,5px,0);
        transform: translate3d(0,5px,0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}
.two-pop{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	text-align: center;
	z-index: 7;
	display: none;
}
.two-show{
	width: 80%;
	max-height: 80%;
	overflow-y: scroll;
	position: absolute;
	top: 10%;
	left: 10%;
}
.two-show-heng{
	width: 100%;
	max-height: 50%;
	overflow-y: scroll;
	position: absolute;
	top: 25%;
	left: 0;
}
@media screen and (min-height: 810px) {
	.six-time{
		/*padding-top: 65%;*/
	}
	.five-peo{
		padding-top: 15rem;
	}
}



.NIE-share_ctrl{
	font-size: 40px;
}
.NIE-share-m{
	font-size: 40px;
}