@charset "UTF-8";
html,body,div,canvas,input,p,img,span,section,ul,li,a {padding: 0;margin: 0;border: none;}
html,body {width: 100%;height: 100%;max-width: 640px;margin: 0 auto;background-color: white;}
.mainbox {position: relative;width: 100%;height: 100%;text-align: center;}
.box {display: none;}
.active {display: block;}
.bgimg {position: absolute;width: 100%;height: 100%;left: 0;top: 0;}

.ResultTitlebox{width: 100%;max-width: 640px;margin: 0 auto;position: relative;}
.common-result-top{font-size: 16px;color: white;background-color: #ff4303;height: 44px;line-height: 44px;font-weight: 200;font-weight: 600;letter-spacing: 1px;border-bottom: 6px solid #EFEFF4;}
.common-result-btnbox{position: relative;width: 100%;background: white;padding: 0 8px; text-align: left;}
.commonbtn-playAgain, .commonbtn-share{display: inline-block;margin: 0 5%;padding: 0.5em 0em;font-size: 16px;color: white;background-color: #ff4303;border-radius: 40px;width: 35%;box-sizing: border-box;-webkit-box-sizing: border-box;}
.commontip{display: block;width: 65.5%;margin: 0px auto;}
@font-face {font-family: 'iconfont';src:url('iconfont.ttf?v=1.01') format('truetype');}
.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
.icon-home{position: absolute;right: 8px;top: 7px; height: 26px; line-height: 26px; font-size: 26px !important;color:white;font-weight: normal;}
.iconfont a:link,.iconfont a:visited,.iconfont a:hover,.iconfont a:active {color: white;text-decoration: none;}
.loading{position: relative;width: 75px;margin-top: 40%;}
.loading-text{position: relative;text-align: center;color: #FF4303;margin: 20px auto;font-family: "微软雅黑";letter-spacing: 1px;}
.active .loading{-webkit-animation: roting  1s  linear infinite;}
.active .commontip{-webkit-animation: bounce 3s linear infinite;}
@-webkit-keyframes roting {
	0% { -webkit-transform:rotateZ(0) ;}
	100% { -webkit-transform:rotateZ(360deg) ;}
}
@-webkit-keyframes bounce{
	0%,7%,21%,35%,100%{-webkit-transform:translateY(0)}
	14%,28%{-webkit-transform:translateY(10px)}
}
.page3{background-color:#F3F3F3;}
.resultimgbox{margin: 8px;padding-bottom: 4px;}
.result{width: 100%;}
.header-menubtn {position: absolute;width: 20px;height: 20px;left: 11px;top: 12px;}

.common-result-btn-box {display: none;padding: 2.5px 5px;margin: 10px 10px 10px 0;color: #ff4303;border: 1px solid #ff4303;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;font-size: 16px;padding: 0 8px;text-align: left;}
.common-result-btn-box img {display: inline-block;width: 18px;margin-bottom: -3px;margin-right: 2px;}
.resultimgbox {margin: 0;padding: 8px 8px 12px 8px;background-color: #F3F3F3;position: relative;}
.savetipbox {position: fixed;width: 100%;height: 48px;left: 0;bottom: 0;}
.savebox {background-color: #ff4303;color: #fff;display: inline-block;width: 100%;text-align: center;line-height: 48px;font-size: 18px;padding-right: 60px;-webkit-box-sizing: border-box;box-sizing: border-box;}
.savebox img {width: 20px;margin-bottom: -3px;margin-right: 2px;}
.sharebox {display: block;position: absolute;width: 60px;height: 100%;background-color: #fabf11;right: 0;bottom: 0;}
.sharebox img {display: inline-block;width: 20px;margin-top: 4px;}
.sharebox span {position: absolute;display: block;font-size: 16px;color: white;left: 0; bottom: 4px;text-align: center;width: 100%;}
#savetipsbox {display: none;position: absolute;background-color: rgba(0, 0, 0, 0.7);-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;margin-top: 14px;padding: 10px 15px;min-width: 154px;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
#savetipsbox span {display: block;color: #fff;text-align: center;font-size: 22px;line-height: 33px;}
.savetip {width: 50px;height: 50px;display: block;margin: 0 auto;background-image: url('../finger.png');background-size: 50px 200px;background-position: 0 0;background-repeat: no-repeat;}
.savetipsbox .savetip {-webkit-animation: savetip 1s infinite steps(1) 0s forwards; }

@-webkit-keyframes savetip {
    0%, 100% { background-position-y: 0; }
    25% { background-position-y: -50px; }
    50% { background-position-y: -100px; }
    75% { background-position-y: -150px; }
}
.isWeixin .savebox {padding-right: 0;}
.isWeixin .sharebox {display: none;}
.isWeibo .savebox {display: none;}
.isWeibo .sharebox {position: relative; display: block;width: 100%;line-height: 48px;font-size: 18px;}
.isWeibo .sharebox img {display: inline-block;width: 20px;margin-bottom: -3px;margin-right: 2px;}
.isWeibo .sharebox span {position: relative;display: inline-block;font-size: 18px;color: white;left: 0;bottom: 0;text-align: center;width: auto;}