@media screen and (orientation: portrait) {
	#orientLayer {
		display: none;
	}
}

@media screen and (orientation: landscape) {
	#orientLayer {
		display: block;
	}
}

.mod-orient-layer {
	display: none;
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: #000;
	z-index: 9997;
	overflow: hidden
}

.mod-orient-layer__content {
	position: absolute;
	width: 100%;
	top: 45%;
	margin-top: -75px;
	text-align: center
}

.mod-orient-layer__icon-orient {
	display: inline-block;
	width: 67px;
	height: 109px;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAADaCAMAAABU68ovAAAAXVBMVEUAAAD29vb////x8fH////////x8fH5+fn29vby8vL////5+fn39/f6+vr////x8fH////////+/v7////09PT////x8fH39/f////////////////////x8fH///+WLTLGAAAAHXRSTlMAIpML+gb4ZhHWn1c2gvHBvq1uKJcC6k8b187lQ9yhhboAAAQYSURBVHja7d3blpowFIDhTUIAOchZDkre/zE7ycySrbUUpsRN2/1fzO18KzEqxEVgTiZNfgmmtxRc8iaR8HNe8x4BtjQePKayYCIoyBSgvNNE1AkNSHqZyLqk97EgUCCHBzZ5mkg7ScvIJuIyOyXBRFxgpqWZyGsAZLB1KjsJi8nutHU4JCRbFRH8tmirI9k8Jx2sqNs8K/m0LQkrktO2crgcgXGB4AiTEsB0hJfo9MGgX7CGcYiYwQxmMOOvZwRhBG8tCoMXjBDeXvWCEcHbi14wgCBmMIMZzGAGM5jxETNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxY6E2rUQxnH2tz9cirlJFwFBJedaPnUv0M7++egPDE8iAJcIDmxwH5wwv9vUviw2kLbVO3TJU5uul/EyB0FoLp4x60PdGUd3qPurrWyjGGTc05u+1dcgI7/+tCCPARWGhH7o5Y7RCf+bH9ctXLp6v2BVDxfqz0oPXeSVaNtINo/1SXDv4dck8IIkbhtC2ol+iouEonTBCbYvVMnXOjxww6s/RFrBUpXHh/gw1rHj5d/qhYn9Gpk2FWh6xRBRX5Oj3Znh2Sq49/L6+y8pB26q9GbE2dbA2mVbx6I+7MfBglLCttm73ZQi7AD3iL4HqjFYJHSPRppqaUaJ3ATpGa+ckpGak2hRRMyqjGMkvl+xyFeSMwjAqcsZgGDdyhl0oNTnDN4yenJGZFGxNChP5/Y3efh6SM2rDOJMzboYxkDMqwyjIGcIw6F+io2FU1IxIm1JqRmgXSkvNKNCXeTpGrU0JNSO2c6LIGPgCS8AuDHz9ta0SXWDtxoDRH+MqlbC2Dt2G2JFRadtQZt2qq/orGowdGb2euxYiqWEpVWhTBnszoNAPdStuQwxqf0aocdWKW4Z+DfszIh8pxJqbuCE4YAC+4bm0evtipjpgJHeFnyyt1Ku2xa0bhjxr27p75rECNwyI9ZwvXkHq+7aTaMEV44YYy/spfgjgjNHaWW+GeUhGEX7tLlVinIFDDSgnOwhi1V6bU0b6tVS9eAERe863g4dRrtiHdc6o+nn5vtyVVgR79Cqt4uL6gfHPQyGqtP2vf7HADGbcYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JjhtOM+J/AgT008yDMkN/dPP9hzS8zAMQN3OEYeekp5YU7KOKXwVXqiY+QS7smcinGKABWdiBgpPJTSMHJ4KidhhPBUSMLw4CmPhKHgKUXCkHsygum71ftNSgCX6bsl8FQyfbcL5EdYsDk0R3j7aiA5wpt5AjKg/2gLJEBD/0Hf2OOf/vRrj6z/7GtP4B3nMKyjHA12kIPSjnJs3FEO0TvKkYJHOWCR+rjJH0Vn6fI5PjNbAAAAAElFTkSuQmCC');
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-webkit-animation: rotation infinite 1.5s ease-in-out;
	animation: rotation infinite 1.5s ease-in-out;
	-webkit-background-size: 100%;
	background-repeat: no-repeat;
	background-size: 100%
}

.mod-orient-layer__desc {
	margin-top: 20px;
	font-size: 18px;
	color: #fff
}


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

/*放大缩小进出*/
			
@-webkit-keyframes zoom-up1 {
	0% {
		opacity: 1
	}
	50% {
		opacity: 0;
		-webkit-transform: scale3d(3.3, 3.3, 3.3);
		transform: scale3d(3.3, 3.3, 3.3)
	}
	100% {
		opacity: 0
	}
	
}

@-webkit-keyframes zoom-up2 {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}
	50% {
		opacity: 1
	}
}

@-webkit-keyframes zoom-down1 {
	0% {
		opacity: 1
	}
	50% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}
	100% {
		opacity: 0
	}
}

@-webkit-keyframes zoom-down2 {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(3.3, 3.3, 3.3);
		transform: scale3d(3.3, 3.3, 3.3)
	}
	50% {
		opacity: 1
	}
}

/*淡入淡出*/
			
@-webkit-keyframes fade-up1 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
	
}

@-webkit-keyframes fade-up2 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fade-down2 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fade-down1 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/*上下连续翻页*/

@-webkit-keyframes coherentvertical-up1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, -100%, 0);
	}
}

@-webkit-keyframes coherentvertical-up2 {
	0% {
		-webkit-transform: translate3d(0, 100%, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes coherentvertical-down1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 100%, 0);
	}
}

@-webkit-keyframes coherentvertical-down2 {
	0% {
		-webkit-transform: translate3d(0, -100%, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

/*左右连续翻页*/

@-webkit-keyframes coherenthorizontal-up1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(-100%, 0, 0);
	}
}

@-webkit-keyframes coherenthorizontal-up2 {
	0% {
		-webkit-transform: translate3d(100%, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes coherenthorizontal-down1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(100%, 0, 0);
	}
}

@-webkit-keyframes coherenthorizontal-down2 {
	0% {
		-webkit-transform: translate3d(-100%, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

/*上下惯性翻页*/

@-webkit-keyframes inertiavertical-up1 {
	0% {
		-webkit-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		-webkit-transform: scale3d(1, 1, 1);
	}
	100% {
		-webkit-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		-webkit-transform: scale3d(.1, .1, .1);
	}
}

@-webkit-keyframes inertiavertical-up2 {
	0% {
		-webkit-transform: translate3d(0, 100%, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes inertiavertical-down1 {
	0% {
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transform: scale3d(1, 1, 1);
	}
	100% {
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transform: scale3d(.1, .1, .1);
	}
}

@-webkit-keyframes inertiavertical-down2 {
	0% {
		-webkit-transform: translate3d(0, -100%, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

/*左右惯性翻页*/

@-webkit-keyframes inertiahorizontal-up1 {
	0% {
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		-webkit-transform: scale3d(1, 1, 1);
	}
	100% {
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		-webkit-transform: scale3d(.1, .1, .1);
	}
}

@-webkit-keyframes inertiahorizontal-up2 {
	0% {
		-webkit-transform: translate3d(100%, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes inertiahorizontal-down1 {
	0% {
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
		-webkit-transform: scale3d(1, 1, 1);
	}
	100% {
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
		-webkit-transform: scale3d(.1, .1, .1);
	}
}

@-webkit-keyframes inertiahorizontal-down2 {
	0% {
		-webkit-transform: translate3d(-100%, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

/*上下覆盖翻页*/

@-webkit-keyframes coververtical-up1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes coververtical-up2 {
	0% {
		-webkit-transform: translate3d(0, 100%, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes coververtical-down1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes coververtical-down2 {
	0% {
		-webkit-transform: translate3d(0, -100%, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

/*左右覆盖翻页*/

@-webkit-keyframes coverhorizontal-up1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes coverhorizontal-up2 {
	0% {
		-webkit-transform: translate3d(100%, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes coverhorizontal-down1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes coverhorizontal-down2 {
	0% {
		-webkit-transform: translate3d(-100%, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

/*上下推出翻页*/

@-webkit-keyframes launchvertical-up1 {
	0% {
		-webkit-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		-webkit-transform: perspective(400px) rotate3d(1,0,0,0);
	}
	100% {
		-webkit-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		-webkit-transform: perspective(400px) rotate3d(1,0,0,-90deg);
	}
}

@-webkit-keyframes launchvertical-up2 {
	0% {
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
	}
	100% {
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transform: perspective(400px) rotate3d(1,0,0,0);
	}
}

@-webkit-keyframes launchvertical-down1 {
	0% {
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transform: perspective(400px) rotate3d(1,0,0,0);
	}
	100% {
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
	}
}

@-webkit-keyframes launchvertical-down2 {
	0% {
		-webkit-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		-webkit-transform: perspective(400px) rotate3d(1,0,0,-90deg);
	}
	100% {
		-webkit-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		-webkit-transform: perspective(400px) rotate3d(1,0,0,0);
	}
}

/*左右推出翻页*/

@-webkit-keyframes launchhorizontal-up1 {
	0% {
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		-webkit-transform: perspective(200px) rotate3d(0,1,0,0);
	}
	100% {
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		-webkit-transform: perspective(200px) rotate3d(0,1,0,90deg);
	}
}

@-webkit-keyframes launchhorizontal-up2 {
	0% {
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
		-webkit-transform: perspective(200px) rotate3d(0,1,0,-90deg);
	}
	100% {
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
		-webkit-transform: perspective(200px) rotate3d(0,1,0,0);
	}
}

@-webkit-keyframes launchhorizontal-down1 {
	0% {
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
		-webkit-transform: perspective(200px) rotate3d(0,1,0,0);
	}
	100% {
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
		-webkit-transform: perspective(200px) rotate3d(0,1,0,-90deg);
	}
}

@-webkit-keyframes launchhorizontal-down2 {
	0% {
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		-webkit-transform: perspective(200px) rotate3d(0,1,0,90deg);
	}
	100% {
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		-webkit-transform: perspective(200px) rotate3d(0,1,0,0);
	}
}

/*左右交换翻页*/

@-webkit-keyframes exchange-up1 {
	0% {
		-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	}
	50% {
		-webkit-transform: scale3d(.5, .5, .5) translate3d(-100%, 0, 0);
	}
	100% {
		-webkit-transform: scale3d(.3, .3, .3) translate3d(0, 0, 0);
	}
}

@-webkit-keyframes exchange-up2 {
	0% {
		-webkit-transform: scale3d(.3, .3, .3) translate3d(0, 0, 0);
	}
	50% {
		-webkit-transform: scale3d(.5, .5, .5) translate3d(100%, 0, 0);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	}
}

@-webkit-keyframes exchange-down1 {
	0% {
		-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	}
	50% {
		-webkit-transform: scale3d(.5, .5, .5) translate3d(100%, 0, 0);
	}
	100% {
		-webkit-transform: scale3d(.3, .3, .3) translate3d(0, 0, 0);
	}
}

@-webkit-keyframes exchange-down2 {
	0% {
		-webkit-transform: scale3d(.3, .3, .3) translate3d(0, 0, 0);
	}
	50% {
		-webkit-transform: scale3d(.5, .5, .5) translate3d(-100%, 0, 0);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	}
}

/*3D翻页*/

@-webkit-keyframes cube-up1 {
	0% {
		-webkit-transform: perspective(calc(90vh)) scale3d(1, 1, 1) rotateX(0deg) translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: perspective(calc(90vh)) scale3d(.3, .3, .3) rotateX(90deg) translate3d(0, 0, calc(100vh));
		
	}
}

@-webkit-keyframes cube-up2 {
	0% {
		-webkit-transform: perspective(calc(90vh)) scale3d(.3, .3, .3) rotateX(-90deg) translate3d(0, 0, calc(100vh));	
	}
	100% {
		-webkit-transform: perspective(calc(90vh)) scale3d(1, 1, 1) rotateX(0deg) translate3d(0, 0, 0);
	}
}

@-webkit-keyframes cube-down1 {
	0% {
		-webkit-transform: perspective(calc(90vh)) scale3d(1, 1, 1) rotateX(0deg) translate3d(0, 0, 0);
		
	}
	100% {
		-webkit-transform: perspective(calc(90vh)) scale3d(.3, .3, .3) rotateX(-90deg) translate3d(0, 0, calc(100vh));
		
	}
}

@-webkit-keyframes cube-down2 {
	0% {
		-webkit-transform: perspective(calc(90vh)) scale3d(.3, .3, .3)  rotateX(90deg) translate3d(0, 0, calc(100vh));
	}
	100% {
		
		-webkit-transform: perspective(calc(90vh)) scale3d(1, 1, 1) rotateX(0deg) translate3d(0, 0, 0);
	}
}