* 									{ MARGIN:0px; PADDING:0px; BORDER:none; FONT-STYLE:inherit; FONT-FAMILY:inherit; FONT-WEIGHT:inherit; FONT-SIZE:100%; OUTLINE-STYLE:none; OUTLINE-COLOR:invert; OUTLINE-WIDTH: 0px;}
*,*:before,*:after					{ -webkit-box-sizing: border-box; box-sizing: border-box;}
:focus 								{ OUTLINE-STYLE: none; OUTLINE-COLOR: invert; OUTLINE-WIDTH: 0px;}
A IMG 								{ BORDER: medium none;}
IFRAME 								{ BORDER: medium none;}
OL,UL								{ LIST-STYLE-TYPE: none; LIST-STYLE-IMAGE: none;}
INPUT,TEXTAREA,SELECT,BUTTON		{ FONT-FAMILY: inherit; FONT-SIZE: 100%;}
html,body							{ -webkit-text-size-adjust:none;}
b,strong							{ font-weight:bold;}

html								{ font-size:10px;}
body								{ background:#555; font-family:"Arial","Microsoft YaHei"; font-size:1.8rem; line-height:1.6; color:#fff;}
i 									{ display: inline-block; font-style: normal; vertical-align: middle; height:100%; }
img									{ vertical-align: middle; }

.wp{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; background-color:#333;}
.page{ position:relative; background-position:center top; background-repeat:no-repeat; background-size:cover;}
.scale{ position:absolute; width:320px; height:100%; transform-origin:0 0; -webkit-transform-origin:0 0;}
.item{ position:absolute; transform-origin:center center; -webkit-transform-origin:center center; width:100%; opacity:1; left:0; top:0;}
.item p{ width:100%; height:100%;-webkit-animation-fill-mode:both;animation-fill-mode:both; font-size:18px; line-height:1.5; text-align:center; color:#000; font-weight:normal; font-style:normal; text-decoration:none; padding:0px;}
.item a{ color:inherit; text-decoration:none;}
.page_bg{ position:absolute; left:0; top:0; right:0; bottom:0; z-index:0; background-position:center top; background-repeat:no-repeat; background-size:100%;background-color:#fff}

.image_box img{ width:100%; height:100%;}
.font_box p{ padding:0.3em 15px;}

/* 箭头 */
@-webkit-keyframes start {
    0%,30% { opacity: 0.2; -webkit-transform: translate(0,10px);}
    60% { opacity: 1; -webkit-transform: translate(0,0);}
    100% { opacity: 0.2; -webkit-transform: translate(0, -5px);}
}
@keyframes start {
    0%,30% { opacity: 0.2; transform: translate(0,10px);}
    60% { opacity: 1; transform: translate(0,0);}
    100% { opacity: 0.2; transform: translate(0, -5px);}
}
.start{ position: fixed; left: 50%; margin-left: -17px; top: 95%; margin-top: -34px; width: 34px; height: 34px;}
.start b{ position: absolute; left: 50%; top: 10px; margin-left: -9px; width: 19px; height: 12px; background: url(../images/arrow.png); background-size: 100% 100%; -webkit-animation: start 1.5s infinite ease-in-out; animation: start 1.5s infinite ease-in-out;}

/* 背景音乐 */
.music{ position: absolute; z-index: 1000; right: 10px; top: 10px; padding: 10px; width: 34px; height: 34px; -webkit-box-sizing:content-box; box-sizing:content-box;}
.music .music-btn { display: block; padding-left: 1px; width: 34px; height: 34px; background-image: url(../images/music-1.png); background-size: 100% 100%;}
.music .music-btn.play { background-image: url(../images/music-0.png); animation:rotating 1.2s linear 0s infinite normal none; -webkit-animation:rotating 1.2s linear 0s infinite normal none;}
@-webkit-keyframes rotating {
	0% { -webkit-transform: rotate(0deg);}
	100% { -webkit-transform: rotate(360deg);}
}
@keyframes rotating {
	0% { transform: rotate(0deg);}
	100% { transform: rotate(360deg);}
}

/* 屏幕方向 */
.landscape { display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; color: #ffd40a; font-size: 22px; background: #32373b; z-index:1000;}
.landscape img { margin-top: 20px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-animation: landscape 1.5s infinite; animation: landscape 1.5s infinite;}
@-webkit-keyframes landscape {
	0% { -webkit-transform: rotate(-90deg);}
	30% { -webkit-transform: rotate(0deg);}
	70% { -webkit-transform: rotate(0deg);}
	100% { -webkit-transform: rotate(-90deg);}
}
@keyframes landscape {
	0% { transform: rotate(-90deg);}
	30% { transform: rotate(0deg);}
	70% { transform: rotate(0deg);}
	100% { transform: rotate(-90deg);}
}

/* 指示点 */
.indicator{ position:fixed; right: 10px; top: 50%; margin-top: -40px;}
.indicator li{ margin-top: 10px; width: 10px; height: 10px; border-radius: 100px; background: rgba(0,0,0,0.5); text-indent: -9999px; list-style: none;}
.indicator li.cur{ background: rgba(255,255,255,0.5); }

#scratchpad{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index:1000;}


#finger{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index:1000; background-repeat:no-repeat; background-position:center top; background-size:100% auto;}
#finger .finger_zw{ width:140px; position:absolute; left:50%; top:50%; margin-left:-70px; margin-top:-70px; -webkit-touch-callout:none; -webkit-user-select:none;}
#finger .finger_line{ -webkit-touch-callout:none; -webkit-user-select:none; display:none; width:180px; position:absolute; left:50%; top:50%; margin-left:-90px; margin-top:70px;}
#finger .finger_line.linemove{ display:block; animation: linemove 2s ease 0s 1 forwards; -webkit-animation: linemove 2s ease 0s 1 forwards;}
#finger .finger_info{ color:#fff; position:absolute; top:50%; left:0; width:100%; text-align:center; font-size:14px; margin-top:-90px;}
@keyframes linemove
{
0%   { margin-top:45px;}
100% { margin-top:-85px;}
}
@-webkit-keyframes linemove
{
0%   { margin-top:45px;}
100% { margin-top:-85px;}
}