* {margin:0;padding:0;border:0;-webkit-user-select:text;}
a,img {-webkit-touch-callout:none}
ol,ul {list-style:none}
*,:after,:before {-webkit-box-sizing:border-box;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
body,html {text-align:left;width:100%;font-family:Roboto,HelveticaNeue,Helvetica,Arial,sans-serif;font-size:.16rem;font-weight:400;line-height:1;}
input[type=password],input[type=text],textarea {resize:none;outline:none;-webkit-appearance:none;white-space:pre-wrap;word-wrap:break-word;background:#fff;}
a {color:#333;text-decoration:none}
img {vertical-align:top}
.clearfix:after,.clearfix:before {content:" ";display:table}
.clearfix:after {clear:both}
body {-webkit-box-pack:center;margin:0 auto;font-family:Hiragino Sans GB,Microsoft Yahei;width: 100%;height: 100%;overflow: hidden;color: #fff;}

.no-landscape{position: fixed;height: 100%;width: 100%;left: 0;top: 0;right: 0;bottom: 0;z-index: 10000;background: #000;text-align:center;}
.landscape_layer{position: absolute;width: 100%;line-height: 0;top: 50%;margin-top: -0.75rem;}
.landscape_layer .ico{background: url(../images/ico-land.png);width: 0.6rem;height: 0.98rem;display: inline-block;background-size: 0.6rem 0.98rem;transform:rotate(90deg);-webkit-transform:rotate(90deg);animation: rotation infinite 1.5s ease-in-out;-webkit-animation: rotation infinite 1.5s ease-in-out;}
.landscape_layer p{font-size: 14px;margin-top: 0.3rem;color: #fff;}
.no-landscape,.landscape_layer{display: none;}

.loading{width: 100%;height: 100%;position: absolute;z-index: 9999;background: #000f33}
.loadgif{background: url(../images/gog_logo.png) center center no-repeat;width: 3.5rem;position: relative;margin: 60% auto 0;background-size: 3.5rem .87rem;height: .87rem;-webkit-animation:logo infinite 4s linear;animation:logo infinite 4s linear;}
.loadcont{width: 100%;height: .4rem;line-height: .4rem;text-align: center;font-size: .45rem;margin-top: .5rem;color: #fff;font-family:"微软雅黑";}


.main{height: 100%;width: 100%;margin: 0 auto;position: relative;overflow: hidden;background: #112a5a;perspective: 300;-webkit-perspective: 300;}
.title{position: absolute;height: 100%;width: 100%;background: url(../images/title_bg.jpg) top center no-repeat;background-size: 100% 100%;}
.title_h{position: absolute;height: 3.45rem;width: 6rem;background: url(../images/title_h.png) top center no-repeat;background-size: 6rem 3.45rem;top: 1rem;left: .7rem;}
.title_p{position: absolute;background: url(../images/title_p.png) top center no-repeat;background-size: 6rem 3.06rem;height: 3.06rem;width: 6rem;top: 4.9rem;left: .7rem;color: #fff;}
.title_p p{margin: .2rem;word-break:break-all;font-size: .23rem;line-height: .4rem;text-indent: 2em;}
.enter{background: url(../images/enter.png);width: 2.54rem;height: .6rem;background-size:2.54rem .6rem;position: absolute;left: 2.53rem;top: 9rem;z-index: 100;}
.enter span,.reload span{color: #fff;font-size: .3rem;margin-left: 1.7rem;margin-top: .1rem;display: inline-block;-webkit-animation:enter infinite 2s linear;animation:enter infinite 2s linear;}
.reload{position: absolute;background: url(../images/reload.png);width: 2.47rem;height: .6rem;left: 2.2rem;top: 6.42rem;background-size: 2.47rem .6rem;text-align: center;line-height: .44rem;}
.reload span{margin-left: 0;margin-top: 0rem;}



.mainList{width: 100%;height: 100%;position: absolute;background: url(../images/mainContent_bg.jpg);width: 7.5rem;height: 101.2rem;background-size: 100% 100%;left: 0;bottom: 0;}
.note{position: fixed;z-index: 2200;bottom: .8rem;}
.beat-note1{background: url(../images/beat-note1.png);width: .365rem;height: 1rem;left: .8rem;background-size: 100% 100%;-webkit-animation:fourNote1 1.2s linear infinite backwards;animation: fourNote1 1.2s linear infinite backwards;}
.beat-note3{background: url(../images/beat-note3.png);width: .52rem;height: .8rem;left: 1.7rem;background-size: 100% 100%;-webkit-animation:fourNote1 0.8s linear infinite backwards;animation: fourNote1 0.8s linear infinite backwards;}
.beat-note2{background: url(../images/beat-note2.png);width: .52rem;height: .8rem;right: 1.7rem;background-size: 100% 100%;-webkit-animation:fourNote1 1s linear infinite backwards;animation: fourNote1 1s linear infinite backwards;}
.beat-note4{background: url(../images/beat-note4.png);width: .36rem;height: .66rem;right: .8rem;background-size: 100% 100%;-webkit-animation:fourNote1 .9s linear infinite backwards;animation: fourNote1 .9s linear infinite backwards;}
.btn_long{width: 1.73rem;height: 1.73rem;position: fixed;bottom: .8rem;left: 50%;margin-left: -0.865rem;background: url(../images/btn_long.png);background-size: 1.73rem 1.73rem;z-index: 2300;-webkit-animation:btn_long infinite 1.5s linear;animation:btn_long infinite 1.5s linear;}

.mainList_small_m{width: 100%;height: 1.12rem;overflow: hidden;position: absolute;z-index: 100;}
.mainList_small_l{float: left;width: 1.6rem;height: 1.12rem;margin-left: .6rem;}
.mainList_small_l img{width: 1.6rem;height: 1.12rem;}
.mainList_small p{float: left;color: #fff;width: 3.4rem;font-size: .34rem;line-height: .5rem;letter-spacing: .02rem;margin-left: .35rem;height: 1.12rem;}
.arrow{font-size: .7rem;float: right;margin-right: .4rem;height: 1.12rem;text-align: center;line-height: 1.12rem;font-weight: bold;-webkit-animation:arrow infinite 2s linear;animation:arrow infinite 2s linear;}

.mainList_small_m:nth-of-type(1){bottom: 3.8rem;}
.mainList_small_m:nth-of-type(2){bottom: 13.22rem;}
.mainList_small_m:nth-of-type(3){bottom: 23.84rem;}
.mainList_small_m:nth-of-type(4){bottom: 32.5rem;}
.mainList_small_m:nth-of-type(5){bottom: 41.84rem;}
.mainList_small_m:nth-of-type(6){bottom: 50.84rem;}
.mainList_small_m:nth-of-type(7){bottom: 58.84rem;}
.mainList_small_m:nth-of-type(8){top:32.6rem;}
.mainList_small_m:nth-of-type(9){top:22.7rem;}
.mainList_small_m:nth-of-type(10){top:14.76rem;}

.mainList_big_m{width: 100%;height: 100%;position: absolute;left:0;top: 0;background: #122e65;z-index: 2100;display: none;}
.close{font-size: .6rem;position: absolute;top: .8rem;right: .75rem;z-index: 2200;display: none;}
.mainList_big_m img{width: 6rem;height: 2.7rem;margin-left: 0.75rem;margin-top: 2rem;}
.mainList_big_m h2{font-size: .32rem;text-align: center;width: 6rem;margin-left: .75rem;margin-top: .5rem;margin-bottom: .5rem;}
.mainList_big_m p{word-break:break-all;font-size: .25rem;line-height: .4rem;text-indent: 2em;width: 6rem;margin-left: .75rem;}

@media screen and (orientation: landscape){
	.no-landscape,.landscape_layer{display:block}
}


@-webkit-keyframes rotation {
	10%,100%,90% {
		transform: rotate(90deg);
		-webkit-transform: rotate(90deg)
	}

	50%,60% {
		transform: rotate(0);
		-webkit-transform: rotate(0)
	}
}

@keyframes rotation {
	10%,100%,90% {
		transform: rotate(90deg);
		-webkit-transform: rotate(90deg)
	}

	50%,60% {
		transform: rotate(0);
		-webkit-transform: rotate(0)
	}
}



@keyframes btn_long {
	0%,100% {
		opacity: 1
	}

	50% {
		opacity: .5
	}
}

@-webkit-keyframes btn_long {
	0%,100% {
		opacity: 1
	}

	50% {
		opacity: .7
	}
}

@keyframes yq {
	0%{
		transform:rotate(0deg);
	}

	100% {
		transform:rotate(-360deg);
	}
}

@-webkit-keyframes yq {
	0%{
		-webkit-transform:rotate(0deg);
	}

	100% {
		-webkit-transform:rotate(-360deg);
	}
}



@-webkit-keyframes logo {
	0% {
		-webkit-transform: rotateY(0deg);
		
	}

	100% {
		-webkit-transform: rotateY(720deg);
	}
}

@keyframes logo {
	0% {
		transform: rotateY(0deg);
		
	}

	100% {
		transform: rotateY(720deg);
	}
}


@-webkit-keyframes enter {
	0% {
		-webkit-transform: translateX(0);
	}
    
    50%{
    	     -webkit-transform: translateX(10px);
    }
	100% {
		-webkit-transform: translateX(0);
	}
}

@keyframes enter {
	0% {
		transform: translateX(0);
	}
    
    50%{
    	transform: translateX(10px);
    }
	100% {
		transform: translateX(0);
	}
}

@-webkit-keyframes fourNote1 {
    0% {
		-webkit-transform: translateY(0);
	}
    
    50%{
    	      -webkit-transform: translateY(-20px);
    }
	100% {
		-webkit-transform: translateY(0);
	}
}

@keyframes fourNote1 {
    0% {
		transform: translateY(0);
	}
    
    50%{
    	transform: translateY(-20px);
    }
	100% {
		transform: translateY(0);
	}
}

@-webkit-keyframes arrow {
	0% {
		-webkit-transform: translateX(0px);
	}
    
    50%{
    	-webkit-transform: translateX(10px);
    }
	100% {
		-webkit-transform: translateX(0px);
	}
}

@keyframes arrow {
	0% {
		transform: translateX(0px);
	}
    
    50%{
    	transform: translateX(10px);
    }
	100% {
		transform: translateX(0px);
	}
}