html{background-color:#fff;color:#666;}
blockquote,body,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,html,input,li,ol,p,textarea,ul{margin:0;padding:0;}
body,button,input,select,textarea{font:16px/1.5 '微软雅黑',Helvetica,Arial,Sans-serif;}
button,input,select,textarea{-webkit-appearance:none;}
textarea{overflow:auto;vertical-align:top;}
img{border:none;}
ul,ol,li{list-style:none;}
a{text-decoration:none;color:#666;}

.frame{width:960px; margin:0px auto;}
#nav{height:110px; line-height:110px; border-bottom:1px solid #ededed;}
#nav h1{float:left; width:206px; height:56px; margin:27px 350px 0px 0px; text-indent:-9999px; background:url(../img/logo1.png) no-repeat;}
.navtab{float: right;}
#nav a{float:left; padding:0px 22px; color:#5e5e5e;}
#nav a.on,
#nav a:hover{color:#dc4543;}
#slide{height: 500px; margin-bottom:130px; background: #dc4543; overflow:hidden;}
.bgleft,.bgright{height: 179px;position:absolute;top: 30%;}
.bgleft{left: 0;}
.bgright{right: 0;}
#slide #preview{z-index: 10; position: absolute; width: 322px; height: 580px; left: 55%; margin: 37px 0px 0px 0; background: url(../img/iphonex_2.png); background-size: 100% 100%;}
#slide #preview .iphonex{z-index:5;width: 100%;height: 100%;position: absolute;}
#slide #preview .frame{float: left; margin-top: 18.5px; margin-left: 21px; width: 280px; height: 543px; position: relative; overflow: hidden;}
#slide #preview .slide{width:100%;height:100%;position:absolute; opacity:0; -webkit-transition:opacity 0.8s;-moz-transition:opacity 0.8s;-ms-transition:opacity 0.8s;-o-transition:opacity 0.8s}
#slide #preview .slide-on{opacity:1; -webkit-transition:opacity 0.8s;-moz-transition:opacity 0.8s;-ms-transition:opacity 0.8s;-o-transition:opacity 0.8s}
#slide #download{z-index: 10;position: absolute;float: left; text-align: center; height:170px; margin: 0 0 0 -30px; padding: 160px 0px 0px 50px; background:none;color: #fff;}
.slogan{font-size: 54px !important; line-height: 72px !important; font-weight: 100;}
.sloganen{font-size:16px !important;line-height: 20px !important;opacity: 0.5;}

#feature h3{margin-bottom:30px; padding-top:34px; font-size:48px; color:#666; font-weight:normal;}
#feature p{margin-bottom:30px; width:240px; font-size:20px; color:#999;}
#feature .feature-thumb{position:relative; width:400px;}
#feature-game{height:396px; margin-bottom:50px; padding-top:25px;}
#feature-game .feature-info,#feature-record .feature-info,#feature-chat .feature-info{height: 100%; display: flex; flex-direction: column; justify-content: center;}
#feature-game .feature-info{float:right;}
#feature-game .feature-thumb{float:left; position:relative;}
.thumb-1 img, .thumb-2 img, .thumb-3 img, .thumb-4 img, .thumb-5 img, .thumb-6 img{width: 241px; }
#feature .thumb-1{position:absolute; left:0px; opacity:0; z-index:1;}
#feature .thumb-2{position:absolute; left:-120px; opacity:0; z-index:1;}
#feature .icon-1{position:absolute; top:310px; left:-130px; opacity:0; z-index:5;}
#feature .thumb-1-on{left:120px; opacity:1; -webkit-transition:left 0.6s ease-in-out, opacity 1s; -moz-transition:left 0.6s ease-in-out 0.2s; -ms-transition:left 0.6s ease-in-out 0.2s; -o-transition:left 0.6s ease-in-out 0.2s;}
#feature .thumb-2-on{left:0px; opacity:1; -webkit-transition:left 0.6s ease-in-out 0.2s, opacity 1s; -moz-transition:left 0.6s ease-in-out, opacity 1s; -ms-transition:left 0.6s ease-in-out, opacity 1s; -o-transition:left 0.6s ease-in-out, opacity 1s;}
#feature .icon-1-on{opacity:1; -webkit-transition:opacity 0.5s 1.0s; -moz-transition:opacity 0.5s 1.0s; -ms-transition:opacity 0.5s 1.0s; -o-transition:opacity 0.5s 1.0s;}
#feature-chat{clear:both; height:435px; margin-bottom:50px;}
#feature-chat .feature-info{float:left;}
#feature-chat .feature-thumb{float:right; position:relative;}
#feature .thumb-3{position:absolute; right: -120px; opacity:0; z-index:1;}
#feature .thumb-4{position:absolute; right: 0; opacity:0; z-index:1;}
#feature .icon-2{position:absolute; top:315px; left:260px; opacity:0; z-index:5;}
#feature .thumb-3-on{right: 0; opacity:1; -webkit-transition:right 0.6s ease-in-out 0.2s, opacity 1s; -moz-transition:right 0.6s ease-in-out, opacity 1s; -ms-transition:right 0.6s ease-in-out, opacity 1s; -o-transition:right 0.6s ease-in-out, opacity 1s;}
#feature .thumb-4-on{right: 120px; opacity:1; -webkit-transition:right 0.6s ease-in-out, opacity 1s; -moz-transition:right 0.6s ease-in-out 0.2s, opacity 1s; -ms-transition:right 0.6s ease-in-out 0.2s, opacity 1s; -o-transition:right 0.6s ease-in-out 0.2s, opacity 1s;}
#feature .icon-2-on{opacity:1; -webkit-transition:opacity 0.5s 1.0s; -moz-transition:opacity 0.5s 1.0s; -ms-transition:opacity 0.5s 1.0s; -o-transition:opacity 0.5s 1.0s;}
#feature-record{clear:both; height:485px; margin-bottom:50px; padding-top:20px; }
#feature-record .feature-info{float:right;}
#feature-record .feature-thumb{float:left; position:relative;}
#feature .thumb-5{position:absolute; left:0px; opacity:0; z-index:1;}
#feature .thumb-6{position:absolute; left:-120px; opacity:0; z-index:1;}
#feature .icon-3{position:absolute; top:-28px; left:-64px; opacity:0; z-index:5;}
#feature .thumb-5-on{left:120px; opacity:1; -webkit-transition:left 0.6s ease-in-out, opacity 1s; -moz-transition:left 0.6s ease-in-out 0.2s, opacity 1s; -ms-transition:left 0.6s ease-in-out 0.2s, opacity 1s; -o-transition:left 0.6s ease-in-out 0.2s, opacity 1s;}
#feature .thumb-6-on{left:0px; opacity:1; -webkit-transition:left 0.6s ease-in-out 0.2s, opacity 1s; -moz-transition:left 0.6s ease-in-out, opacity 1s; -ms-transition:left 0.6s ease-in-out, opacity 1s; -o-transition:left 0.6s ease-in-out, opacity 1s;}
#feature .icon-3-on{opacity:1; -webkit-transition:opacity 0.5s 1.0s; -moz-transition:opacity 0.5s 1.0s; -ms-transition:opacity 0.5s 1.0s; -o-transition:opacity 0.5s 1.0s;}
#footer{border-top: 1px solid #D4D4D3;clear:both; padding: 56px 0px; line-height: 20px;width: 100%;text-align:center; font-size:14px; color:#666;}

#page-nav{height:80px; margin-bottom:50px; line-height:80px; text-align:center;}
#page-nav a{padding:0px 22px; color:#5e5e5e;}
#page-nav a.on,
#page-nav a:hover{color:#dc4543;}

#QRsecion{display: flex;justify-content: center;margin-top: 50px;}
#QRsecion section{width: 130px;font-size: 16px; margin: 0 10px;}
#QRsecion section p{border-radius: 4px;border:1px solid #fff;width: 100%;height: 40px;line-height: 30px !important;display: flex;justify-content: center;align-items: center;line-height:20px;}
#QRsecion section .hover{border-bottom: 0 !important;border-radius: 4px 4px 0 0;}
#QRsecion section .qricon{width: 15px;height: 16px;margin-left: 6px;}
#QRsecion section .qrcode{border-radius:0 0 4px 4px;border:1px solid #fff;border-top:0;width: 115px;height: 115px;display: none;padding:0 7.5px 7.5px;}
.slide_image {width: 100%;height: 100%;}