*,body{-webkit-font-smoothing:antialiased}
a,body,input,select,textarea{color:#252525}
.hide,[v-cloak]{display:none}
.my-header nav a,img,input{vertical-align:top}
.page-ai .desktop .message:before,.page-ai .desktop li:before,.page-package .package .right-img:before,.page-package2 .apps li:before,.page-package3 .apps li:before,.page-package4 .apps li:before,.page-reg .invite-wx-box:after,.page-sales .solutions .box:before{content:''}
html{font-size:20px}
@media only screen and (max-width:767px){html{font-size:16px}
}
*{padding:0;
margin:0;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-tap-highlight-color:transparent}
table{border-collapse:collapse;
border-spacing:0}
body{width:100%;
font-size:.7rem;
line-height:1.5;
font-family:"Source Han Sans","Hiragino Sans GB","Microsoft YaHei",Tahoma,sans-serif;
word-wrap:break-word;
word-break:normal;
overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-size:100%;
line-height:1.8;
font-weight:400}
li,ol,ul{list-style:none}
em,i{font-style:normal}
img{border:0}
a{text-decoration:none}
body,html{min-height:100%}
.clearfix{clear:both;
line-height:0;
font-size:0;
height:0}
.color-red{color:#bd081c}
.layout{width:1020px;
margin:0 auto}
.lazy-img{background:url(../img/lazy-loading.png) center center no-repeat;
background-size:50%}
.media-pc{display:block}
.media-h5{display:none}
@media only screen and (max-width:767px){.layout{width:100%;
margin:0 auto}
.media-pc{display:none!important}
.media-h5{display:block!important}
}
.my-header{height:56px;
background:rgba(0,0,0,.65);
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:500}
.my-header .logo-topnav{width:36px;
height:36px;
position:absolute;
top:10px;
left:20px}
.my-header .logo-topnav img{width:100%;
height:100%}
.my-header nav,.my-header nav a{height:56px;
float:left}
.my-header nav a{line-height:56px;
color:rgba(255,255,255,.5);
padding:0 32px;
-webkit-transition:color .3s ease-in-out;
-o-transition:color .3s ease-in-out;
transition:color .3s ease-in-out}
.my-header nav a.active,.my-header nav a:hover{color:#fff}
.my-header .link-agent{float:left;
width:80px;
height:32px;
line-height:30px;
text-align:center;
color:rgba(255,255,255,.5);
margin:0 0 0 25px;
border:1px solid rgba(255,255,255,.5);
border-radius:16px}
.my-header .link-agent:hover{background:rgba(255,255,255,.1);
color:rgba(255,255,255,.9);
border:1px solid rgba(255,255,255,.9)}
.my-header .link-business{float:left;
height:32px;
line-height:20px;
padding:6px 8px;
text-align:center;
margin:0 0 0 32px;
font-size:13px;
background:#fff;
border-radius:16px}
.my-header .link-business .link-try{display:inline-block;
vertical-align:top;
height:20px;
font-weight:700;
color:#bd081c;
border-right:1px solid #d8d8d8;
padding:0 6px 0 0;
margin:0 6px 0 0}
.my-header .layout,.my-header2 .link-back{display:-webkit-box;
display:-ms-flexbox;
-webkit-box-align:center}
.my-header .layout{display:flex;
-ms-flex-align:center;
align-items:center;
height:100%}
.my-header .show-nav{display:none;
width:56px;
height:56px;
padding:14px 0 0;
position:absolute;
top:0;
right:0}
.my-header .show-nav .l1,.my-header .show-nav .l2{display:block;
width:16px;
height:1px;
margin:6px auto 0;
background:#fff;
-webkit-transition:-webkit-transform .4s;
-o-transition:transform .4s;
transition:transform .4s;
transition:transform .4s,-webkit-transform .4s}
@media only screen and (max-width:767px){.my-header.opened nav,.my-header.opened nav a{display:block;
float:none}
.my-header{overflow:hidden;
height:44px;
background:rgba(0,0,0,.8)}
.my-header .layout{display:block}
.my-header .logo-topnav{width:24px;
height:24px;
left:10px}
.my-header nav{display:block;
padding:0 0 24px;
height:auto;
margin:44px 0 0}
.my-header nav a{height:44px}
.my-header .show-nav{display:block;
height:44px;
width:44px;
padding:12px 0 0}
.my-header.opened{height:100%}
.my-header.opened nav{width:100%}
.my-header.opened .show-nav .l1{-webkit-transform:translate(0,3px) rotate(-45deg);
-ms-transform:translate(0,3px) rotate(-45deg);
transform:translate(0,3px) rotate(-45deg)}
.my-header.opened .show-nav .l2{-webkit-transform:translate(0,-4px) rotate(45deg);
-ms-transform:translate(0,-4px) rotate(45deg);
transform:translate(0,-4px) rotate(45deg)}
}
.my-header2{height:56px;
background:rgba(0,0,0,.8);
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:500}
.my-header2 .logo-topnav{width:36px;
height:36px;
position:absolute;
top:10px;
left:20px}
.my-header2 .logo-topnav img{width:100%;
height:100%}
.my-header2 nav,.my-header2 nav a{height:56px;
vertical-align:top;
float:left}
.my-header2 nav a{line-height:56px;
color:rgba(255,255,255,.5);
padding:0 40px;
-webkit-transition:color .4s ease-in-out;
-o-transition:color .4s ease-in-out;
transition:color .4s ease-in-out}
.my-header2 nav a:hover{color:rgba(255,255,255,.9)}
.my-footer,.my-header2 nav a.active{color:#fff}
.my-header2 .link-back{display:flex;
-ms-flex-align:center;
align-items:center;
width:80px;
height:32px;
line-height:30px;
color:#fff;
font-size:.65rem;
text-align:center;
opacity:.5;
position:absolute;
top:12px;
right:0;
-webkit-transition:opacity .4s ease-in-out;
-o-transition:opacity .4s ease-in-out;
transition:opacity .4s ease-in-out}
.my-header2 .link-back span{margin:0 0 0 4px}
.my-header2 .link-back:hover{opacity:.9}
.my-header2 .layout{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
height:100%;
position:relative}
@media only screen and (max-width:767px){.my-header2{height:44px}
.my-header2 .layout{display:block}
.my-header2 .logo-topnav{width:24px;
height:24px;
left:10px}
.my-header2 nav{width:100%;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
height:44px;
padding:0 50px}
.my-header2 nav a{-webkit-box-flex:1;
-ms-flex:1;
flex:1;
height:44px;
line-height:44px;
padding:0}
.my-header2 .link-back{top:6px;
right:0;
width:auto;
padding:0 12px}
}
.my-footer{background:#252525}
.my-footer .follow{text-align:center;
padding:40px 0 60px}
.my-footer .follow .title{font-size:16px;
line-height:16px;
padding:0 0 80px}
.my-footer .icon-weibo,.my-footer .icon-weixin{display:inline-block;
vertical-align:top;
width:49px;
height:49px;
margin:0 40px;
background:url(../img/icon-2wei.png) no-repeat;
background-size:auto 49px;
opacity:.6;
cursor:pointer}
.my-footer .icon-weibo:hover,.my-footer .icon-weixin:hover,.page-index .index2 .link-sales:hover,.page-index .index2 .link-try:hover{opacity:.9}
.my-footer .icon-weixin{background-position:-49px 0;
position:relative}
.my-footer .icon-weixin img{display:none;
width:120px;
height:120px;
position:absolute;
left:60px;
top:-32px;
border:8px solid #fff;
border-radius:3px}
.my-footer .icon-weixin:hover img{display:block}
.my-footer .bottom{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
font-size:.65rem;
padding:0 0 12px}
.my-footer .copyright{text-align:center;
color:#666;
padding:1.2rem 0;
font-size:.65rem;
border-top:1px solid #4c4c4c}
@media only screen and (max-width:767px){.my-footer .follow{padding:2rem 0}
.my-footer .follow .title{font-size:.8rem;
line-height:.8rem;
padding:0 0 2rem}
.my-footer .icon-weixin{background-position:-50px 0}
.my-footer .bottom{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-flow:column;
flex-flow:column;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
padding:0 0 12px 24px}
.my-footer .bottom div{padding:8px 0 0}
.my-footer .copyright{padding:1.2rem}
}
.icon-angular,.icon-arrow-right,.icon-arrow-right2,.icon-back,.icon-clock,.icon-dot,.icon-qrcode{background:url(../img/icon-sprite.png) no-repeat}
.icon-arrow-right{display:inline-block;
width:12px;
height:10px;
background-position:0 0}
.icon-angular{display:block;
width:10px;
height:10px;
background-position:-20px 0}
.icon-arrow-right2{display:inline-block;
width:22px;
height:20px;
background-position:0 -20px}
.icon-qrcode{display:block;
width:32px;
height:32px;
background-position:0 -50px}
.icon-dot{display:block;
width:16px;
height:16px;
background-position:-30px -20px}
.icon-clock{display:block;
width:60px;
height:60px;
background-position:0 -90px}
.icon-back{display:inline-block;
width:12px;
height:12px;
background-position:-50px -20px}
.page-index .banner{height:810px;
text-align:center;
padding:280px 0 0;
background:url(../img/banner-index.jpg) center top no-repeat;
background-size:cover;
position:relative}
.page-index .banner h1{color:#fff;
font-size:2.8rem;
line-height:2.8rem}
.page-index .banner h2{color:#fff;
font-size:2.2rem;
line-height:2.2rem;
margin:.8rem 0 0}
.page-index .banner .play{display:inline-block;
vertical-align:top;
width:44px;
height:44px;
margin:4rem 0 0;
background:url(../img/icon-play.png) no-repeat;
background-size:auto 44px;
cursor:pointer}
.page-index .banner .play:hover{background-position:-44px 0}
.page-index .banner video{background:#000}
.page-index .banner .video{position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:100%;
height:100%;
background:#252525}
.page-index .banner .video video{width:100%;
height:100%}
.page-index .index1{text-align:center;
font-size:0;
padding:3rem 0;
background:#fafafa}
.page-index .index1 .img{width:580px;
height:484px}
.page-index .index1 .right{display:inline-block;
vertical-align:top;
width:400px;
text-align:left;
padding:4rem 0 0}
.page-index .index1 h3{font-size:1.5rem;
padding:1.2rem 0}
.page-index .index1 p{font-size:.7rem;
line-height:1.3rem;
padding-bottom:1.5rem}
.page-index .index1 .sale{display:inline-block;
width:7rem;
height:2.2rem;
line-height:2.2rem;
text-align:center;
font-size:.7rem;
border:1px solid #252525;
border-radius:1.1rem;
-webkit-transition:color .3s ease-in-out,border-color .3s ease-in-out;
-o-transition:color .3s ease-in-out,border-color .3s ease-in-out;
transition:color .3s ease-in-out,border-color .3s ease-in-out}
.page-index .index1 .sale:hover{color:#bd081c;
border-color:#bd081c}
.page-index .solution{border-top:1px solid #e6e6e6}
.page-index .solution .holder{min-width:1020px;
max-width:1440px;
margin:0 auto}
.page-index .solution .title{font-size:1.5rem;
text-align:center;
line-height:1.5rem;
padding:2.3rem 0}
.page-index .solution .body{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-flow:wrap;
flex-flow:wrap;
height:520px}
.page-index .solution .cell{-webkit-box-flex:1;
-ms-flex:1;
flex:1;
text-align:center;
padding:35px 0 0;
position:relative}
.page-index .solution .solution1{background:url(../img/solution1.png) center top no-repeat;
background-size:cover}
.page-index .solution .solution2{background:url(../img/solution2.png) center top no-repeat;
background-size:cover}
.page-index .solution .solution3{background:url(../img/solution3.png) center top no-repeat;
background-size:cover}
.page-index .solution .solution4{background:url(../img/solution4.png) center top no-repeat;
background-size:cover}
.page-index .solution h3{font-size:1.6rem;
line-height:1.6rem;
color:#fff;
padding-bottom:15px}
.page-index .solution h4{font-size:.65rem;
line-height:.65rem;
color:#fff}
.page-index .solution .more{display:inline-block;
width:5.75rem;
height:1.6rem;
line-height:1.6rem;
text-align:center;
background:rgba(255,255,255,.8);
border-radius:16px;
position:absolute;
bottom:3.2rem;
left:50%;
-webkit-transform:translateX(-50%);
-ms-transform:translateX(-50%);
transform:translateX(-50%)}
.page-index .index2,.page-index .index2 .link-try{display:-webkit-box;
display:-ms-flexbox;
-webkit-box-align:center}
.page-index .index2{display:flex;
-ms-flex-align:center;
align-items:center;
max-width:800px;
margin:0 auto;
padding:125px 0}
.page-index .index2 .logo{width:70px;
height:70px;
margin:0 24px 0 0}
.page-index .index2 .flex{-webkit-box-flex:1;
-ms-flex:1;
flex:1}
.page-index .index2 h4{font-size:1.2rem}
.page-index .index2 p{font-size:.8rem;
color:grey}
.page-index .index2 .link-try{display:flex;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
width:104px;
height:2.2rem;
color:#bd081c;
font-size:.8rem;
margin:0 0 0 30px;
background:rgba(189,8,28,.04);
border:1px solid #bd081c;
border-radius:3px}
.page-index .index2 .link-sales{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
width:136px;
height:2.2rem;
color:#fff;
font-size:.8rem;
margin:0 0 0 30px;
background:#bd081c;
border:1px solid #bd081c;
border-radius:3px}
@media only screen and (max-width:767px){.page-index .banner{height:405px;
padding:130px 0 0}
.page-index .index1 .layout{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-orient:vertical;
-webkit-box-direction:reverse;
-ms-flex-direction:column-reverse;
flex-direction:column-reverse}
.page-index .index1 .img{display:block;
margin:0 auto;
width:240px;
height:192px}
.page-index .index1 .right{width:280px;
padding:0}
.page-index .solution .holder{min-width:100%}
.page-index .solution .body{height:auto}
.page-index .solution .cell{-webkit-box-flex:0;
-ms-flex:none;
flex:none;
width:50%;
height:320px;
padding-top:16px;
background-size:cover}
.page-index .index2{-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-flow:column;
flex-flow:column;
padding:55px 0}
.page-index .index2 .logo{margin:0 0 10px}
.page-index .index2 .link-sales,.page-index .index2 .link-try{width:200px;
margin:15px 0 0}
}
.page-package .banner{height:416px;
color:#fff;
text-align:center;
padding:128px 0 0;
background:url(../img/banner-package.jpg) center top no-repeat #1f1f1f;
background-size:cover}
.page-package .banner h1{font-size:1.8rem;
line-height:1.8rem}
.page-package .banner h4{font-size:.7rem;
line-height:.7rem;
margin:8px 0 0;
opacity:.5}
.page-package .banner p{display:inline-block;
vertical-align:top;
font-size:.7rem;
line-height:1.2rem;
max-width:600px;
margin:24px 0 0}
.page-package .banner .icon{padding:32px 0 0}
.page-package .banner .btn-sale{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
margin:30px auto 0;
color:#fff;
font-size:.7rem;
width:6.2rem;
height:1.6rem;
border:1px solid #fff;
border-radius:16px}
.page-package .banner .btn-sale span{margin-left:5px}
.page-package .package{max-width:964px;
padding:2.5rem 0 0;
margin:0 auto}
.page-package .package .tips{text-align:right;
color:#999;
font-size:.7rem;
line-height:.7rem;
padding:0 0 16px}
.page-package .package .body{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-flow:wrap;
flex-flow:wrap;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between}
.page-package .package .cell{display:-webkit-box;
display:-ms-flexbox;
display:flex;
width:480px;
height:336px;
vertical-align:top;
margin:0 0 4px}
.page-package .package .right-img{-webkit-box-flex:1;
-ms-flex:1;
flex:1;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
position:relative}
.page-package .package .right-img:before{width:100%;
height:100%;
background:#000;
opacity:.4;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
-webkit-transition:opacity .4s ease-in-out;
-o-transition:opacity .4s ease-in-out;
transition:opacity .4s ease-in-out}
.page-package .package .right-img .pop{display:none;
padding:40px 24px 0;
font-size:.7rem;
line-height:24px;
color:#fff;
position:absolute;
top:0;
right:0;
bottom:0;
left:0}
.page-package .package .right-img .more{width:4.8rem;
height:1.6rem;
border:1px solid #fff;
font-size:.7rem;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
color:#fff;
position:absolute;
bottom:30px;
right:24px;
border-radius:16px}
.page-package2 .coupon,.page-package3 .coupon{border-top:1px solid #e5e5e5}
.page-package .package .cell:hover .right-img:before{opacity:.8}
.page-package1 .banner .buy:hover,.page-package2 .banner .buy:hover,.page-package3 .banner .buy:hover,.page-package4 .banner .buy:hover,.page-sales .solutions .buy:hover{opacity:.9}
.page-package .package .cell:hover .right-img .pop{display:block}
.page-package .package .left-title{width:8rem;
color:#fff;
padding:38px 12px 0 24px;
position:relative}
.page-package .package .buy,.page-package .package .wait{position:absolute;
bottom:40px;
left:24px}
.page-package .package .package1 .right-img{background-image:url(../img/package1.png)}
.page-package .package .package2 .right-img{background-image:url(../img/package2.png)}
.page-package .package .package3 .right-img{background-image:url(../img/package3.png)}
.page-package .package .package4 .right-img{background-image:url(../img/package4.png)}
.page-package .package .package1 .left-title{background:#6ea535}
.page-package .package .package2 .left-title{background:#ff9800}
.page-package .package .package3 .left-title{background:#2b81ff}
.page-package .package .package4 .left-title{background:#000}
.page-package .package h3{font-size:1.6rem;
line-height:1.6rem;
margin:0 0 24px}
.page-package .package h4{font-size:.7rem;
line-height:.7rem;
margin:0 0 24px}
.page-package .package .buy{color:#fff}
.page-package .package .buy .icon-arrow-right{width:0;
height:0;
overflow:hidden;
margin-right:8px;
-webkit-transition:width .24s ease-in-out;
-o-transition:width .24s ease-in-out;
transition:width .24s ease-in-out}
.page-package .package .cell:hover .buy .icon-arrow-right{width:12px;
height:10px}
.page-package .service{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
line-height:1.1rem;
height:160px;
margin:6rem 0 0;
background:url(../img/package-service.png) center top no-repeat;
background-size:cover}
.page-package .service .layout{padding:0 0 0 480px}
.page-package .service p{padding:0 0 .8rem}
.page-package .service strong{font-size:1.4rem;
font-style:italic;
margin:0 0 0 24px}
@media only screen and (max-width:767px){.page-package .banner p{max-width:auto;
padding:0 24px}
.page-package .banner .icon img{width:252px}
.page-package .package .cell{width:100%;
margin:0}
.page-package .package .cell .right-img .pop{display:block}
.page-package .package .left-title{padding-left:12px}
.page-package .package .tips{padding:0 16px 16px}
.page-package .package .cell .buy .icon-arrow-right{-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1)}
.page-package .service{height:120px;
margin:24px 0 0}
.page-package .service .layout{padding:0 0 0 56px;
text-shadow:1px 1px 0 rgba(255,255,255,.4)}
}
.page-package1 .banner{height:440px;
background:#f9f9f9}
.page-package1 .banner .layout{padding:128px 0 0;
position:relative}
.page-package1 .banner .phone{width:495px;
height:440px;
position:absolute;
top:36px;
right:0}
.page-package1 .banner h2{font-size:1.8rem;
line-height:1.8rem;
color:#999}
.page-package1 .banner h2 span{margin-left:16px;
color:#6ea535}
.page-package1 .banner h3{font-size:1rem;
margin:16px 0 0;
line-height:1rem}
.page-package1 .banner p{color:#666;
line-height:1.2rem;
margin:32px 0 36px;
width:480px}
.page-package1 .banner .buy{display:inline-block;
vertical-align:top;
width:10rem;
height:2.2rem;
text-align:center;
line-height:2.2rem;
font-size:.8rem;
color:#fff;
background:#6ea535;
border-radius:3px}
.page-package1 .banner .price{display:inline-block;
vertical-align:top;
line-height:44px;
font-size:1rem;
margin:0 0 0 40px}
.page-package1 .banner .price b{font-size:1.6rem}
.page-package1 .banner .price span{color:#6ea535}
@media only screen and (max-width:767px){.page-package1 .banner .layout{padding:128px 12px 0 16px;
position:relative}
.page-package1 .banner .phone{display:none}
.page-package1 .banner p{width:auto}
.page-package1 .banner .buy{width:7rem}
.page-package1 .banner .price{margin:10px 0 0}
}
.page-package1 .apps{padding:60px 0 100px}
.page-package1 .apps .title{font-size:.8rem}
.page-package1 .apps .title span{color:#6ea535;
font-weight:500}
.page-package1 .apps ul{overflow:hidden}
.page-package1 .apps li{float:left;
width:88px;
height:190px;
text-align:center;
margin:20px 92px 0 0}
.page-package1 .apps li img{width:88px;
height:88px;
margin:0 0 1.2rem}
.page-package1 .apps li .name{font-size:.8rem;
line-height:.8rem;
font-weight:500;
overflow:hidden}
.page-package1 .apps li p{margin:.4rem 0 0;
color:#666;
font-size:.6rem;
line-height:.9rem}
.page-package1 .upgrade{height:8rem;
font-size:1.2rem;
line-height:1.2rem;
text-align:center;
padding:2rem 0 0;
color:#fff;
background:#6ea535}
.page-package1 .upgrade a{color:#fff;
text-decoration:underline}
.page-package1 .upgrade a:hover{text-decoration:none}
.page-package1 .upgrade small{font-size:1rem;
line-height:1rem;
margin:1.6rem 0 0;
display:block}
@media only screen and (max-width:767px){.page-package1 .apps{padding:60px 12px 100px}
.page-package1 .apps li{height:140px;
margin-right:10px}
.page-package1 .apps li img{width:66px;
height:66px}
.page-package1 .upgrade{font-size:16px}
.page-package1 .upgrade small{font-size:14px}
}
.page-package2 .banner{height:440px;
background:#f9f9f9}
.page-package2 .banner .layout{padding:128px 0 0;
position:relative}
.page-package2 .banner .phone{width:495px;
height:440px;
position:absolute;
top:36px;
right:0}
.page-package2 .banner h2{font-size:1.8rem;
line-height:1.8rem;
color:#999}
.page-package2 .banner h2 span{margin-left:16px;
color:#ff9800}
.page-package2 .banner h3{font-size:1rem;
margin:16px 0 0;
line-height:1rem}
.page-package2 .banner p{color:#666;
line-height:1.2rem;
margin:32px 0 36px;
width:480px}
.page-package2 .banner .buy{display:inline-block;
vertical-align:top;
width:10rem;
height:2.2rem;
text-align:center;
line-height:2.2rem;
font-size:.8rem;
border-radius:3px}
.page-package2 .banner .price{display:inline-block;
vertical-align:top;
line-height:44px;
font-size:1rem;
margin:0 0 0 40px}
.page-package2 .banner .price b{font-size:1.6rem}
.page-package2 .banner .price span{color:#ff9800}
@media only screen and (max-width:767px){.page-package2 .banner .layout{padding:128px 12px 0 16px;
position:relative}
.page-package2 .banner .phone{display:none}
.page-package2 .banner p{width:auto}
.page-package2 .banner .buy{width:7rem}
.page-package2 .banner .price{margin:10px 0 0}
}
.page-package2 .coupon .flex,.page-package2 .coupon .img,.page-package2 .video .flex,.page-package2 .video .img{display:inline-block;
vertical-align:top}
.page-package2 .banner .buy{background:#ccc;
color:#787878}
.page-package2 .apps{padding:60px 0 30px}
.page-package2 .apps .title{font-size:.8rem}
.page-package2 .apps .title span{color:#ff9800;
font-weight:500}
.page-package2 .apps .body{width:600px;
margin:20px 60px 32px}
.page-package2 .apps ul{padding:0 0 40px;
overflow:hidden}
.page-package2 .apps li{float:left;
width:120px;
height:20px;
line-height:20px;
margin:20px 0 0}
.page-package2 .apps li:before{float:left;
width:2px;
height:2px;
margin:9px 10px 0 0;
background:#ff9800;
border-radius:50%}
.page-package2 .apps li.gray{color:#999}
.page-package2 .apps li.gray:before{background:#999}
.page-package2 .apps .more{text-align:right;
font-size:.6rem;
line-height:.6rem;
color:#999;
margin:0 50px 0 0}
.page-package2 .coupon .layout{padding:148px 0;
background:url(../img/package2-bg1.png) right center no-repeat}
.page-package2 .coupon .img{width:144px;
height:144px;
margin:0 56px 0 0}
.page-package2 .coupon .flex{width:538px}
.page-package2 .coupon h3{font-size:1.4rem;
line-height:1.4rem;
margin:10px 0 16px;
font-weight:500}
.page-package2 .coupon p{line-height:24px}
.page-package2 .video{padding:148px 0;
background:url(../img/package2-bg2.png) center no-repeat;
background-size:cover}
.page-package2 .video .img{width:144px;
height:144px;
margin:0 56px 0 0}
.page-package2 .video .flex{width:538px;
color:#fff}
.page-package2 .video h3{font-size:1.4rem;
line-height:1.4rem;
margin:10px 0 16px;
font-weight:500}
.page-package2 .video p{line-height:24px}
.page-package2 .upgrade{height:8rem;
font-size:1.2rem;
line-height:1.2rem;
text-align:center;
padding:2rem 0 0;
color:#fff;
background:#ff9800}
.page-package2 .upgrade a{color:#fff;
text-decoration:underline}
.page-package2 .upgrade a:hover{text-decoration:none}
.page-package2 .upgrade small{font-size:1rem;
line-height:1rem;
margin:1.6rem 0 0;
display:block}
@media only screen and (max-width:767px){.page-package2 .apps{padding:40px 12px}
.page-package2 .apps .body{width:auto;
margin:0}
.page-package2 .apps ul{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-flow:wrap;
flex-flow:wrap;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
margin:0 0 0 24px}
.page-package2 .apps li{width:33.33%}
.page-package2 .apps .more{margin-right:24px}
.page-package2 .coupon .img,.page-package2 .video .img{display:block;
height:72px;
vertical-align:top;
margin:0 auto}
.page-package2 .coupon{padding:24px 0}
.page-package2 .coupon .layout{padding:0 12px;
text-align:center;
background-size:84px auto}
.page-package2 .coupon .img{width:72px}
.page-package2 .coupon .flex{-webkit-box-flex:1;
-ms-flex:1;
flex:1;
width:auto}
.page-package2 .video{padding:24px 0;
background-size:cover}
.page-package2 .video .layout{padding:0 12px;
text-align:center}
.page-package2 .video .img{width:72px}
.page-package2 .video .flex{-webkit-box-flex:1;
-ms-flex:1;
flex:1;
width:auto}
.page-package2 .upgrade{font-size:16px}
.page-package2 .upgrade small{font-size:14px}
}
.page-package3 .banner{height:440px;
background:#f9f9f9}
.page-package3 .banner .layout{padding:128px 0 0;
position:relative}
.page-package3 .banner .phone{width:495px;
height:440px;
position:absolute;
top:36px;
right:0}
.page-package3 .banner h2{font-size:1.8rem;
line-height:1.8rem;
color:#999}
.page-package3 .banner h2 span{margin-left:16px;
color:#2b81ff}
.page-package3 .banner h3{font-size:1rem;
margin:16px 0 0;
line-height:1rem}
.page-package3 .banner p{color:#666;
line-height:1.2rem;
margin:32px 0 36px;
width:480px}
.page-package3 .banner .buy{display:inline-block;
vertical-align:top;
width:10rem;
height:2.2rem;
text-align:center;
line-height:2.2rem;
font-size:.8rem;
border-radius:3px}
.page-package3 .banner .price{display:inline-block;
vertical-align:top;
line-height:44px;
font-size:1rem;
margin:0 0 0 40px}
.page-package3 .banner .price b{font-size:1.6rem}
.page-package3 .banner .price span{color:#2b81ff}
@media only screen and (max-width:767px){.page-package3 .banner .layout{padding:128px 12px 0 16px;
position:relative}
.page-package3 .banner .phone{display:none}
.page-package3 .banner p{width:auto}
.page-package3 .banner .buy{width:7rem}
.page-package3 .banner .price{margin:10px 0 0}
}
.page-package3 .coupon .flex,.page-package3 .coupon .img,.page-package3 .video .flex,.page-package3 .video .img{display:inline-block;
vertical-align:top}
.page-package3 .banner .buy{background:#ccc;
color:#787878}
.page-package3 .apps{padding:60px 0 30px}
.page-package3 .apps .title{font-size:.8rem}
.page-package3 .apps .title span{color:#2b81ff;
font-weight:500}
.page-package3 .apps .body{width:600px;
margin:20px 60px 32px}
.page-package3 .apps ul{padding:0 0 40px;
overflow:hidden}
.page-package3 .apps li{float:left;
width:120px;
height:20px;
line-height:20px;
margin:20px 0 0}
.page-package3 .apps li:before{float:left;
width:2px;
height:2px;
margin:9px 10px 0 0;
background:#2b81ff;
border-radius:50%}
.page-package3 .apps li.gray{color:#999}
.page-package3 .apps li.gray:before{background:#999}
.page-package3 .apps .more{text-align:right;
font-size:.6rem;
line-height:.6rem;
color:#999;
margin:0 50px 0 0}
.page-package3 .coupon{padding:148px 0;
background:url(../img/package3-bg1.png) center no-repeat;
background-size:cover}
.page-package3 .coupon .img{width:144px;
height:144px;
margin:0 56px 0 0}
.page-package3 .coupon .flex{width:480px}
.page-package3 .coupon h3{font-size:1.4rem;
line-height:28px;
margin:10px 0 16px;
font-weight:500}
.page-package3 .coupon p{line-height:24px}
.page-package3 .video{padding:148px 0;
background:url(../img/package3-bg2.png) center no-repeat;
background-size:cover}
.page-package3 .video .img{width:144px;
height:144px;
margin:0 56px 0 0}
.page-package3 .video .flex{width:480px;
color:#fff}
.page-package3 .video h3{font-size:1.4rem;
line-height:1.4rem;
margin:10px 0 16px;
font-weight:500}
.page-package3 .video p{line-height:24px}
.page-package3 .upgrade{height:160px;
font-size:1.4rem;
line-height:1.4rem;
text-align:center;
padding:40px 0 0;
color:#fff;
background:#2b81ff}
.page-package3 .upgrade a{color:#fff;
text-decoration:underline}
.page-package3 .upgrade a:hover{text-decoration:none}
.page-package3 .upgrade small{font-size:1rem;
line-height:1rem;
margin:32px 0 0;
display:block}
@media only screen and (max-width:767px){.page-package3 .apps{padding:40px 12px}
.page-package3 .apps .body{width:auto;
margin:0}
.page-package3 .apps ul{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-flow:wrap;
flex-flow:wrap;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
margin:0 0 0 24px}
.page-package3 .apps li{width:33.33%}
.page-package3 .apps .more{margin-right:24px}
.page-package3 .coupon .img,.page-package3 .video .img{display:block;
height:72px;
vertical-align:top;
margin:0 auto}
.page-package3 .coupon{padding:24px 0}
.page-package3 .coupon .layout{padding:0 12px;
text-align:center;
background-size:84px auto}
.page-package3 .coupon .img{width:72px}
.page-package3 .coupon .flex{-webkit-box-flex:1;
-ms-flex:1;
flex:1;
width:auto}
.page-package3 .video{padding:24px 0;
background-size:cover}
.page-package3 .video .layout{padding:0 12px;
text-align:center}
.page-package3 .video .img{width:72px}
.page-package3 .video .flex{-webkit-box-flex:1;
-ms-flex:1;
flex:1;
width:auto}
.page-package3 .upgrade{font-size:16px}
.page-package3 .upgrade small{font-size:14px}
}
.page-package4 .banner{height:440px;
background:#f9f9f9}
.page-package4 .banner .layout{padding:128px 0 0;
position:relative}
.page-package4 .banner .phone{width:495px;
height:440px;
position:absolute;
top:36px;
right:0}
.page-package4 .banner h2{font-size:1.8rem;
line-height:1.8rem;
color:#999}
.page-package4 .banner h2 span{margin-left:16px;
color:#000}
.page-package4 .banner h3{font-size:1rem;
margin:16px 0 0;
line-height:1rem}
.page-package4 .banner p{color:#666;
line-height:1.2rem;
margin:32px 0 36px;
width:480px}
.page-package4 .banner .buy{display:inline-block;
vertical-align:top;
width:10rem;
height:2.2rem;
text-align:center;
line-height:2.2rem;
font-size:.8rem;
border-radius:3px}
.page-package4 .banner .price{display:inline-block;
vertical-align:top;
line-height:44px;
font-size:1rem;
margin:0 0 0 40px}
.page-package4 .banner .price b{font-size:1.6rem}
.page-package4 .banner .price span{color:#000}
@media only screen and (max-width:767px){.page-package4 .banner .layout{padding:128px 12px 0 16px;
position:relative}
.page-package4 .banner .phone{display:none}
.page-package4 .banner p{width:auto}
.page-package4 .banner .buy{width:7rem}
.page-package4 .banner .price{margin:10px 0 0}
}
.page-package4 .banner .buy{background:#ccc;
color:#787878}
.page-package4 .apps{padding:60px 0 30px}
.page-package4 .apps .title{font-size:.8rem}
.page-package4 .apps .title span{color:#000;
font-weight:500}
.page-package4 .apps .body{width:600px;
margin:20px 60px 32px}
.page-package4 .apps ul{padding:0 0 40px;
overflow:hidden}
.page-package4 .apps li{float:left;
width:120px;
height:20px;
line-height:20px;
margin:20px 0 0}
.page-package4 .apps li:before{float:left;
width:2px;
height:2px;
margin:9px 10px 0 0;
background:#000;
border-radius:50%}
.page-package4 .apps li.gray{color:#999}
.page-package4 .apps li.gray:before{background:#999}
.page-package4 .apps .more{text-align:right;
font-size:.6rem;
line-height:.6rem;
color:#999;
margin:0 50px 0 0}
.page-package4 .compare{padding:80px 0;
background:#fafafa;
overflow:hidden;
width:100%}
.page-package4 .compare .item{padding:16px 0 0}
.page-package4 .compare .item:first-child{padding:0}
.page-package4 .compare .item .title{font-size:1rem;
line-height:1rem;
font-weight:500}
.page-package4 .compare .item .column{height:3.2rem;
line-height:3.2rem;
color:#fff;
font-size:1.6rem;
padding:0 1.2rem;
margin:8px 0 0;
border-radius:3px;
overflow:hidden}
.page-package4 .compare .item:nth-child(1) .column{width:200%;
-webkit-animation:column1 2s ease-in-out forwards;
animation:column1 2s ease-in-out forwards;
background:#000}
.page-package4 .compare .item:nth-child(2) .column{width:720px;
-webkit-animation:column2 2s ease-in-out forwards;
animation:column2 2s ease-in-out forwards;
background:#2b81ff}
.page-package4 .compare .item:nth-child(3) .column{width:480px;
-webkit-animation:column3 2s ease-in-out forwards;
animation:column3 2s ease-in-out forwards;
background:#ff9800}
.page-package4 .compare .item:nth-child(4) .column{width:240px;
-webkit-animation:column4 2s ease-in-out forwards;
animation:column4 2s ease-in-out forwards;
background:#6ea535}
.page-package4 .photo{padding:148px 0;
background:url(../img/package4-bg1.png) center no-repeat;
background-size:cover}
.page-package4 .photo .img{display:inline-block;
width:144px;
height:144px;
vertical-align:top;
margin:0 56px 0 0}
.page-package4 .photo .flex{display:inline-block;
width:480px;
color:#fff;
vertical-align:top}
.page-package4 .photo h3{font-size:1.4rem;
line-height:1.4rem;
margin:10px 0 16px;
font-weight:500}
.page-package4 .photo p{line-height:24px}
.page-package4 .upgrade{height:160px;
font-size:28px;
line-height:28px;
text-align:center;
padding:40px 0 0;
color:#fff;
background:#000}
.page-package4 .upgrade a{color:#fff;
text-decoration:underline}
.page-package4 .upgrade a:hover{text-decoration:none}
.page-package4 .upgrade small{font-size:20px;
line-height:20px;
margin:32px 0 0;
display:block}
@-webkit-keyframes column1{0%{color:rgba(255,255,255,0);
width:0}
50%{color:rgba(255,255,255,0)}
100%{color:#fff;
width:150%}
}
@keyframes column1{0%{color:rgba(255,255,255,0);
width:0}
50%{color:rgba(255,255,255,0)}
100%{color:#fff;
width:150%}
}
@-webkit-keyframes column2{0%{color:rgba(255,255,255,0);
width:0}
50%{color:rgba(255,255,255,0)}
100%{color:#fff;
width:720px}
}
@keyframes column2{0%{color:rgba(255,255,255,0);
width:0}
50%{color:rgba(255,255,255,0)}
100%{color:#fff;
width:720px}
}
@-webkit-keyframes column3{0%{color:rgba(255,255,255,0);
width:0}
50%{color:rgba(255,255,255,0)}
100%{color:#fff;
width:480px}
}
@keyframes column3{0%{color:rgba(255,255,255,0);
width:0}
50%{color:rgba(255,255,255,0)}
100%{color:#fff;
width:480px}
}
@-webkit-keyframes column4{0%{color:rgba(255,255,255,0);
width:0}
50%{color:rgba(255,255,255,0)}
100%{color:#fff;
width:240px}
}
@keyframes column4{0%{color:rgba(255,255,255,0);
width:0}
50%{color:rgba(255,255,255,0)}
100%{color:#fff;
width:240px}
}
@media only screen and (max-width:767px){.page-package4 .apps{padding:40px 12px}
.page-package4 .apps .body{width:auto;
margin:0}
.page-package4 .apps ul{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-flow:wrap;
flex-flow:wrap;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
margin:0 0 0 24px}
.page-package4 .apps li{width:33.33%}
.page-package4 .apps .more{margin-right:24px}
.page-package4 .compare{padding:40px 24px}
.page-package4 .compare .item .column{font-size:1.2rem}
.page-package4 .compare .item:nth-child(2) .column{width:90%;
background:#2b81ff}
.page-package4 .compare .item:nth-child(3) .column{width:70%;
background:#ff9800}
.page-package4 .compare .item:nth-child(4) .column{width:50%;
background:#6ea535}
.page-package4 .photo{padding:24px 0;
background-size:cover}
.page-package4 .photo .layout{padding:0 12px;
text-align:center}
.page-package4 .photo .img{display:block;
width:72px;
height:72px;
vertical-align:top;
margin:0 auto}
.page-package4 .photo .flex{-webkit-box-flex:1;
-ms-flex:1;
flex:1;
width:auto}
.page-package4 .upgrade{font-size:16px}
.page-package4 .upgrade small{font-size:14px}
}
.page-sales .banner{height:416px;
color:#fff;
text-align:center;
padding:128px 0 0;
background:url(../img/banner-package.jpg) center top no-repeat #1f1f1f;
background-size:cover}
.page-sales .banner h1{font-size:1.8rem;
line-height:1.8rem}
.page-sales .banner p{display:inline-block;
vertical-align:top;
line-height:1.2rem;
max-width:600px;
margin:16px 0 0}
.page-sales .banner .btn-sale{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
margin:16px auto 0;
color:#fff;
width:88px;
height:24px;
border:1px solid #fff;
border-radius:12px}
.page-sales .banner .btn-sale span{margin-left:5px}
.page-sales .banner ul{margin:24px 0 0}
.page-sales .banner li{display:inline-block;
width:72px;
text-align:center;
vertical-align:top;
margin:0 60px}
.page-sales .banner li .img{width:72px;
height:72px;
background:url(../img/solution-icon.png) no-repeat;
background-size:auto 72px}
.page-sales .banner li .img1{background-position:0 0}
.page-sales .banner li .img2{background-position:-72px 0}
.page-sales .banner li .img3{background-position:-144px 0}
.page-sales .banner li .caption{font-size:.6rem;
margin:8px 0 0}
.page-sales .solutions{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
padding:38px 0 50px}
.page-sales .solutions .box{width:50%;
height:950px;
text-align:center;
padding:0 18px;
border:1px solid transparent;
position:relative}
.page-sales .solutions .box:before{display:none;
width:36px;
height:46px;
background:url(../img/solution-flag.png) no-repeat;
position:absolute;
top:-2px;
left:8px}
.page-sales .solutions .box:hover:before{display:block}
.page-sales .solutions h3{font-size:1.4rem;
line-height:1.4rem;
padding:1.2rem 0 0}
.page-sales .solutions h5{font-size:.6rem;
line-height:.6rem;
color:grey;
padding:8px 0 0}
.page-sales .solutions .price{font-size:16px;
line-height:16px;
font-weight:500;
padding:32px 0}
.page-sales .solutions p{font-size:14px;
line-height:18px;
padding:0 0 12px}
.page-sales .solutions .buy,.page-sales .solutions .wait{display:block;
height:44px;
line-height:44px;
font-size:.8rem;
text-align:center;
color:#fff;
margin:16px 0 0;
border-radius:3px}
.page-sales .solutions .wait{background:#ccc;
color:#787878}
.page-sales .solutions .comment{height:106px;
padding:24px 0 0;
font-size:.65rem;
color:grey;
line-height:22px}
.page-sales .solutions ul{padding:4px 0;
overflow:hidden}
.page-sales .solutions li{float:left;
width:50%;
font-size:.6rem;
line-height:16px;
text-align:left;
padding:4px 0 4px 16px}
.page-sales .solutions li.disabled{color:#b3b3b3}
.page-sales .solutions .box1:before{background-position:0 0}
.page-sales .solutions .box1 .price,.page-sales .solutions .box1 h3,.page-sales .solutions .box1 ul{color:#6ea535}
.page-sales .solutions .box1 .buy{background-color:#6ea535}
.page-sales .solutions .box1 ul{background:rgba(110,165,53,.1)}
.page-sales .solutions .box1:hover{border-color:#6ea535}
.page-sales .solutions .box2:before{background-position:-36px 0}
.page-sales .solutions .box2 .price,.page-sales .solutions .box2 h3,.page-sales .solutions .box2 ul{color:#ff9800}
.page-sales .solutions .box2 .buy{background-color:#ff9800}
.page-sales .solutions .box2 ul{background:rgba(255,152,0,.1)}
.page-sales .solutions .box2:hover{border-color:#ff9800}
.page-sales .solutions .box3:before{background-position:-72px 0}
.page-sales .solutions .box3 .price,.page-sales .solutions .box3 h3,.page-sales .solutions .box3 ul{color:#2b81ff}
.page-sales .solutions .box3 .buy{background-color:#2b81ff}
.page-sales .solutions .box3 ul{background:rgba(43,129,255,.1)}
.page-sales .solutions .box3:hover{border-color:#2b81ff}
.page-sales .solutions .box4:before{background-position:-108px 0}
.page-sales .solutions .box4 .price,.page-sales .solutions .box4 h3,.page-sales .solutions .box4 ul{color:#000}
.page-sales .solutions .box4 .buy{background-color:#000}
.page-sales .solutions .box4 ul{background:rgba(0,0,0,.1)}
.page-sales .solutions .box4:hover{border-color:#000}
@media only screen and (max-width:767px){.page-sales .banner p{padding:0 24px}
.page-sales .banner li{width:60px;
text-align:center;
margin:0 20px}
.page-sales .banner li .img{width:36px;
height:36px;
margin:0 auto;
background:url(../img/solution-icon.png) no-repeat;
background-size:auto 36px}
.page-sales .banner li .img1{background-position:0 0}
.page-sales .banner li .img2{background-position:-36px 0}
.page-sales .banner li .img3{background-position:-72px 0}
.page-sales .solutions{-ms-flex-flow:wrap;
flex-flow:wrap;
padding:38px 12px 50px}
.page-sales .solutions .box{padding:0 8px}
}
.page-weapp .banner{height:810px;
text-align:center;
padding:128px 0 0;
background:url(../img/banner-weapp.jpg) center no-repeat;
background-size:cover}
.page-weapp .banner h1{color:#fff;
font-size:1.8rem;
line-height:1.8rem}
.page-weapp .banner h4{width:510px;
color:#e6e6e6;
font-size:.7rem;
line-height:1.2rem;
margin:32px auto 0}
.page-weapp .banner .m{line-height:.7rem;
color:#e6e6e6;
margin:32px 0 0}
.page-weapp .banner .video{width:640px;
height:360px;
margin:24px auto 0;
background:#050505;
position:relative}
.page-weapp .banner .play{vertical-align:top;
width:44px;
height:44px;
background:url(../img/icon-play.png) no-repeat;
background-size:auto 44px;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
cursor:pointer}
.page-weapp .banner .play:hover{background-position:-44px 0}
.page-weapp .banner .player{position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:100%;
height:100%;
background:#252525}
.page-weapp .banner .player video{width:100%;
height:100%}
.page-weapp .section{display:-webkit-box;
display:-ms-flexbox;
display:flex;
height:800px;
background:url(../img/weapp-bg.png) center center no-repeat #FAFAFA;
background-size:cover}
.page-weapp .section .layout{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
padding:100px 0}
.page-weapp .section .box{width:420px;
padding:3.25rem 2.4rem 0;
background:#fff;
border-radius:3px;
-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.2);
box-shadow:0 1px 2px 0 rgba(0,0,0,.2)}
.page-weapp .section .t{display:-webkit-box;
display:-ms-flexbox;
display:flex;
height:13rem}
.page-weapp .section .t .flex{-webkit-box-flex:1;
-ms-flex:1;
flex:1;
padding:12px 0 0;
border-bottom:1px solid #d7d7d7}
.page-weapp .section .t .img{width:4rem;
height:4rem;
margin:0 32px 0 0}
.page-weapp .section .t h3{font-size:1.3rem;
line-height:1.3rem;
font-weight:500;
margin:0 0 12px}
.page-weapp .section .t h5{font-size:.7rem;
line-height:.7rem;
color:#999;
margin:0 0 2.7rem}
.page-weapp .section .wecode{display:-webkit-box;
display:-ms-flexbox;
display:flex;
margin:2rem 0 0}
.page-weapp .section .wecode .code{width:6rem;
height:6rem;
margin:0 30px 0 -1rem}
.page-weapp .section .wecode .flex{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-flex:1;
-ms-flex:1;
flex:1;
line-height:1.1rem;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center}
.page-weapp .section .buy{display:block;
height:44px;
line-height:44px;
font-size:16px;
font-weight:500;
text-align:center;
color:#fff;
background:#2b81ff;
margin:2.5rem 0 0;
border-radius:3px}
.page-weapp .section .box:nth-child(2) .buy{background:#000}
@media only screen and (max-width:767px){.page-weapp .banner{height:540px}
.page-weapp .banner h4{width:auto;
padding:0 24px}
.page-weapp .banner .video{width:320px;
height:180px}
.page-weapp .section{display:-webkit-box;
display:-ms-flexbox;
display:flex;
height:auto;
background:url(../img/weapp-bg.png) center center no-repeat #FAFAFA;
background-size:cover}
.page-weapp .section .layout{display:block;
padding:12px 0 24px}
.page-weapp .section .box{width:auto;
margin:12px;
padding-bottom:24px}
}
.page-ai .desktop{min-height:800px;
padding:140px 0 80px;
background:#208cff;
position:relative}
.page-ai .desktop .tl{width:518px;
height:250px;
background:url(../img/ai-tl.png) no-repeat;
position:absolute;
top:0;
left:0}
.page-ai .desktop .rb{width:356px;
height:171px;
background:url(../img/ai-rb.png) no-repeat;
position:absolute;
right:0;
bottom:0}
.page-ai .desktop .circle{float:right;
width:320px;
height:320px;
margin:80px 0 0;
-webkit-animation:circleShadow 4s ease-in-out infinite;
animation:circleShadow 4s ease-in-out infinite;
-webkit-box-shadow:0 0 60px 0 rgba(255,255,255,.8),inset 0 0 60px 0 rgba(255,255,255,.8);
box-shadow:0 0 60px 0 rgba(255,255,255,.8),inset 0 0 60px 0 rgba(255,255,255,.8);
border:20px solid #fff;
border-radius:50%}
.page-ai .desktop .left-talk{float:left;
width:380px}
.page-ai .desktop .message{height:0;
color:#208cff;
font-size:.9rem;
line-height:1.2rem;
background:#fff;
position:relative;
border-radius:22px;
overflow:hidden;
opacity:0;
-webkit-transform:translate(-10px,-10px);
-ms-transform:translate(-10px,-10px);
transform:translate(-10px,-10px);
-webkit-transition:opacity .8s ease-in-out,-webkit-transform .4s ease-in-out;
-o-transition:opacity .8s ease-in-out,transform .4s ease-in-out;
transition:opacity .8s ease-in-out,transform .4s ease-in-out;
transition:opacity .8s ease-in-out,transform .4s ease-in-out,-webkit-transform .4s ease-in-out}
.page-ai .desktop .message:before{background:url(../img/icon-sprite.png) -20px 0 no-repeat;
display:block;
width:10px;
height:10px;
position:absolute;
top:18px;
left:-9px}
.page-ai .desktop .message.in{display:inline-block;
height:auto;
padding:10px 16px 10px 20px;
margin:16px 0 0;
overflow:visible;
opacity:1;
-webkit-transform:translate(0,0);
-ms-transform:translate(0,0);
transform:translate(0,0)}
.page-ai .desktop ul{height:0;
overflow:hidden;
opacity:0;
-webkit-transform:translate(-10px,-10px);
-ms-transform:translate(-10px,-10px);
transform:translate(-10px,-10px);
-webkit-transition:opacity .8s ease-in-out,-webkit-transform .4s ease-in-out;
-o-transition:opacity .8s ease-in-out,transform .4s ease-in-out;
transition:opacity .8s ease-in-out,transform .4s ease-in-out;
transition:opacity .8s ease-in-out,transform .4s ease-in-out,-webkit-transform .4s ease-in-out}
.page-ai .desktop ul.in{padding:12px 0;
opacity:1;
-webkit-transform:translate(0,0);
-ms-transform:translate(0,0);
transform:translate(0,0);
height:auto}
.page-ai .desktop li{line-height:.9rem;
font-size:.9rem;
padding:12px 0 12px 20px;
color:rgba(255,255,255,.25);
-webkit-transition:color .4s ease-in-out;
-o-transition:color .4s ease-in-out;
transition:color .4s ease-in-out;
position:relative;
cursor:pointer}
.page-ai .desktop li:before{background:url(../img/icon-sprite.png) 0 -20px no-repeat;
width:22px;
height:20px;
display:none;
position:absolute;
top:8px;
left:-18px}
.page-ai .desktop li.active,.page-ai .desktop ul.init li{color:#fff}
.page-ai .desktop li.active:before{display:block}
.page-ai .desktop .last{font-size:0;
padding:16px;
opacity:0}
.page-ai .desktop .last.in{opacity:1}
.page-ai .desktop .last div{display:inline-block;
vertical-align:top;
width:8px;
height:8px;
border-radius:50%;
margin:0 6px;
background:#fff}
.page-ai .desktop .last div:nth-child(1){-webkit-animation:waiting 1.2s ease-in-out infinite;
animation:waiting 1.2s ease-in-out infinite}
.page-ai .desktop .last div:nth-child(2){-webkit-animation:waiting 1.2s .4s ease-in-out infinite;
animation:waiting 1.2s .4s ease-in-out infinite}
.page-ai .desktop .last div:nth-child(3){-webkit-animation:waiting 1.2s .8s ease-in-out infinite;
animation:waiting 1.2s .8s ease-in-out infinite}
@-webkit-keyframes waiting{0%,100%{-webkit-transform:scale(0);
transform:scale(0)}
50%{-webkit-transform:scale(1);
transform:scale(1)}
}
@keyframes waiting{0%,100%{-webkit-transform:scale(0);
transform:scale(0)}
50%{-webkit-transform:scale(1);
transform:scale(1)}
}
@-webkit-keyframes circleShadow{0%,100%{-webkit-box-shadow:0 0 60px 0 rgba(255,255,255,.8),inset 0 0 60px 0 rgba(255,255,255,.8);
box-shadow:0 0 60px 0 rgba(255,255,255,.8),inset 0 0 60px 0 rgba(255,255,255,.8);
-webkit-transform:scale(1);
transform:scale(1)}
50%{-webkit-box-shadow:0 0 0 0 rgba(255,255,255,.49),inset 0 0 0 0 rgba(255,255,255,.49);
box-shadow:0 0 0 0 rgba(255,255,255,.49),inset 0 0 0 0 rgba(255,255,255,.49);
-webkit-transform:scale(.98);
transform:scale(.98)}
}
@keyframes circleShadow{0%,100%{-webkit-box-shadow:0 0 60px 0 rgba(255,255,255,.8),inset 0 0 60px 0 rgba(255,255,255,.8);
box-shadow:0 0 60px 0 rgba(255,255,255,.8),inset 0 0 60px 0 rgba(255,255,255,.8);
-webkit-transform:scale(1);
transform:scale(1)}
50%{-webkit-box-shadow:0 0 0 0 rgba(255,255,255,.49),inset 0 0 0 0 rgba(255,255,255,.49);
box-shadow:0 0 0 0 rgba(255,255,255,.49),inset 0 0 0 0 rgba(255,255,255,.49);
-webkit-transform:scale(.98);
transform:scale(.98)}
}
@media only screen and (max-width:767px){.page-ai .desktop{padding:100px 24px 60px}
.page-ai .desktop .left-talk{float:none;
display:block;
width:auto}
.page-ai .desktop .circle{float:none;
display:block;
width:280px;
height:280px;
margin:40px auto 0}
}
.page-promotion .banner{height:810px;
padding:200px 0 0;
background:url(../img/banner-promotion.jpg) center no-repeat;
background-size:cover}
.page-promotion .banner .layout{padding:0 0 0 400px}
.page-promotion .banner h1{color:#fff;
font-size:1.5rem;
line-height:2.2rem}
.page-promotion .banner h4{width:480px;
color:#e6e6e6;
font-size:.7rem;
line-height:1.2rem;
margin:2rem 0 0}
.page-promotion .banner .p{color:#fff;
padding:124px 0 24px}
.page-promotion .banner .icon-qrcode{opacity:.4;
position:relative;
cursor:pointer}
.page-promotion .banner .wx-qrcode{display:none;
width:128px;
height:128px;
position:absolute;
top:0;
left:48px;
background:#fff;
cursor:default}
.page-promotion .banner .wx-qrcode img{width:100%;
height:100%}
.page-promotion .banner .icon-qrcode:hover{opacity:.9}
.page-promotion .banner .icon-qrcode:hover .wx-qrcode{display:block}
.page-promotion .section{display:-webkit-box;
display:-ms-flexbox;
display:flex;
min-width:1200px}
.page-promotion .section>div{width:50%}
.page-promotion .section .text{text-align:right;
padding:120px 60px 0}
.page-promotion .section .img,.page-promotion .section.reversion .text{text-align:left}
.page-promotion .section .img img{width:100%;
max-width:720px}
.page-promotion .section .article{display:inline-block;
width:380px;
text-align:left}
.page-promotion .section h2{font-size:1.8rem;
line-height:2.4rem}
.page-promotion .section h4{font-size:.8rem;
line-height:1.4rem;
margin:40px 0 0}
.page-promotion .section h6{font-size:.65rem;
color:#999;
margin:120px 0 0;
line-height:.65rem}
.page-promotion .section.reversion .img{text-align:right}
@media only screen and (max-width:767px){.page-promotion .banner{height:auto;
padding:100px 0 80px}
.page-promotion .banner .layout{padding:0 0 0 20px}
.page-promotion .banner h4{width:auto;
padding:0 24px 0 0}
.page-promotion .banner .p{padding:40px 0 12px}
.page-promotion .section{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-flow:column;
flex-flow:column;
min-height:auto;
min-width:auto}
.page-promotion .section>div{width:100%}
.page-promotion .section .text{padding:60px 24px 24px}
.page-promotion .section .article{display:block;
width:100%}
.page-promotion .section .img img{width:100%;
height:auto}
.page-promotion .section h6{margin:60px 0 0}
.page-promotion .section.reversion{-webkit-box-orient:vertical;
-webkit-box-direction:reverse;
-ms-flex-flow:column-reverse;
flex-flow:column-reverse}
.page-promotion .section.reversion .text{text-align:left}
.page-promotion .section.reversion .img{text-align:right}
}
.page-aboutus .scroll-nav{position:absolute;
width:100%;
height:0;
z-index:500}
.page-aboutus .scroll-nav .layout{height:0}
.page-aboutus .scroll-nav .nav{width:150px;
margin:140px 0 0 50px}
.page-aboutus .scroll-nav .nav .title{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
width:120px;
height:42px;
font-size:.7rem;
color:#bd081c;
text-align:center;
margin:0 0 36px;
background:0 0;
border:1px solid #bd081c;
border-radius:28px}
.page-aboutus .scroll-nav .nav .title.active{color:#fff;
background:#bd081c}
.page-aboutus .banner{height:810px;
background:url(../img/banner-aboutus.jpg) center top no-repeat;
background-size:cover}
.page-aboutus .banner .text{float:right;
width:660px;
line-height:1.8;
color:#fff;
font-size:.8rem;
letter-spacing:1px;
margin:140px 100px 0 0}
.page-aboutus .banner .text p{padding:0 0 20px}
.page-aboutus .history{padding:120px 0 0}
.page-aboutus .history .title{margin-top:10px}
.page-aboutus .history .holder{float:right;
width:800px;
margin:0 auto;
position:relative}
.page-aboutus .history .scrollline{height:800px;
margin:60px 0 0;
overflow-y:auto;
position:relative}
.page-aboutus .history .scrollline::-webkit-scrollbar{width:8px}
.page-aboutus .history .scrollline::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3)}
.page-aboutus .history .scrollline::-webkit-scrollbar-thumb{background-color:#a9a9a9;
outline:#708090 solid 1px}
.page-aboutus .history .timeline{padding:30px 0 0;
margin:0 0 0 188px;
border-left:4px solid #e22c4a}
.page-aboutus .history .year{line-height:60px;
font-size:30px;
color:#000;
position:absolute;
top:0;
left:0}
.page-aboutus .history .icon-clock{position:absolute;
top:0;
left:160px;
z-index:500}
.page-aboutus .history .year-row{height:80px;
position:relative}
.page-aboutus .history .year-row b{line-height:60px;
font-size:1.5rem;
font-weight:500;
color:#000;
position:absolute;
top:0;
left:-130px}
.page-aboutus .history .row{color:#757577;
padding:0 0 30px 35px;
position:relative}
.page-aboutus .history .row .time{width:65px;
line-height:1;
text-align:right;
font-size:18px;
color:#e12c4a;
position:absolute;
top:10px;
left:-90px}
.page-aboutus .history .row .time small{font-size:12px}
.page-aboutus .history .row .time.gray{color:#999}
.page-aboutus .history .row .icon-dot{width:16px;
position:absolute;
top:16px;
left:-10px}
.page-aboutus .history .row .h5{font-size:1.1rem;
color:#252525}
.page-aboutus .history .row .h6{font-size:.7rem;
color:#999}
.page-aboutus .business{padding:180px 0}
.page-aboutus .business .title{margin-top:20px}
.page-aboutus .business .logos{float:right;
width:800px}
.page-aboutus .business .logos>div{display:inline-block;
width:135px;
font-size:14px;
vertical-align:top}
.page-aboutus .business .logos>div img{width:135px;
height:135px}
.page-aboutus .business .logos>div p{text-align:center}
.page-aboutus .friend{height:540px;
padding:180px 0 0;
background:url(../img/aboutus.jpg) center top no-repeat;
background-size:cover}
.page-aboutus .friend .text{float:right;
width:800px;
color:#fff;
font-size:.8rem;
letter-spacing:1px}
.page-aboutus .friend .text p{padding:0 0 30px}
@media only screen and (max-width:767px){.scroll-nav{display:none}
.page-aboutus .title{float:none;
display:block;
width:150px;
height:40px;
line-height:40px;
font-size:18px;
margin:0 auto 30px}
.page-aboutus .banner{height:auto;
padding:50px 0 30px;
background:url(../img/banner-aboutus.jpg) no-repeat;
background-size:auto 100%}
.page-aboutus .banner .text{float:none;
width:auto;
padding:0 20px;
margin:0}
.page-aboutus .banner .text p{font-size:16px;
padding-bottom:20px}
.page-aboutus .history{padding:30px 0}
.page-aboutus .history .scrollline{height:auto;
margin:0}
.page-aboutus .history .title{text-align:center;
padding:0 0 40px}
.page-aboutus .history .title img{width:300px}
.page-aboutus .history .holder{width:100%;
margin:0 auto;
position:relative}
.page-aboutus .history .timeline{padding:60px 10px 0 0;
margin:0 0 0 100px;
border-left:2px solid #e22c4a}
.page-aboutus .history .year{line-height:40px;
font-size:15px;
color:#000;
position:absolute;
top:0;
left:10px}
.page-aboutus .history .icon-clock{position:absolute;
top:-2px;
left:70px}
.page-aboutus .history .icon-clock img{width:40px;
height:40px}
.page-aboutus .history .year-row b{left:-90px}
.page-aboutus .history .row{color:#757577;
padding:0 0 25px 18px;
position:relative}
.page-aboutus .history .row .time{width:50px;
line-height:1.2;
text-align:right;
font-size:12px;
color:#e12c4a;
position:absolute;
top:10px;
left:-70px}
.page-aboutus .history .row .time small{font-size:10px}
.page-aboutus .history .row .time.gray{color:#999}
.page-aboutus .history .row .icon-dot{position:absolute;
top:14px;
left:-9px}
.page-aboutus .history .row .h4{font-size:.6rem;
padding:10px 0 0}
.page-aboutus .history .row .h5{font-size:.55rem}
.page-aboutus .history .row .h2{font-size:.8rem;
padding:5px 0 0}
.page-aboutus .business{padding:24px 0 40px}
.page-aboutus .business .title{margin-top:20px}
.page-aboutus .business .logos{float:none;
width:auto;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
-ms-flex-flow:wrap;
flex-flow:wrap;
padding:0 10px}
.page-aboutus .business .logos>div{display:inline-block;
width:30%;
font-size:14px;
vertical-align:top}
.page-aboutus .business .logos>div img{width:100px;
height:100px}
.page-aboutus .business .logos>div p{text-align:center}
.page-aboutus .friend{height:auto;
padding:40px 20px;
background:url(../img/banner-aboutus.jpg) center top no-repeat;
background-size:cover}
.page-aboutus .friend .text{float:none;
width:100%;
color:#fff;
font-size:16px;
letter-spacing:1px}
.page-aboutus .friend .text p{padding:0 0 30px}
}
.page-reg .banner-reg{height:580px;
background:url(../img/banner-reg.jpg) center top no-repeat;
overflow:hidden}
.page-reg .banner-reg .logo{display:block;
margin:90px auto 0}
.page-reg .banner-reg h1{padding:100px 0 0;
text-align:center;
color:#fff;
font-size:32px;
font-weight:400}
.page-reg .content{padding:30px 70px;
margin-top:-90px;
background:#fff;
-webkit-box-shadow:0 0 10px -1px rgba(0,0,0,.3),0 20px 20px -20px rgba(0,0,0,.4);
box-shadow:0 0 10px -1px rgba(0,0,0,.3),0 20px 20px -20px rgba(0,0,0,.4);
position:relative}
.page-reg .article{line-height:2;
color:#333}
.page-reg .article .comment{color:#999;
}
.page-reg .article h3{padding-top:10px}
.page-reg .article p{text-indent:2em;
margin-bottom:10px;
color:#666}
.page-reg .article .indent{padding-left:2em}
.page-reg .angular{width:60px;
height:60px;
background:#d81f3e;
position:absolute;
top:-30px;
left:-30px}
.page-reg .top-tips{position:absolute;
top:-30px;
left:70px;
line-height:30px;
font-size:14px;
color:rgba(255,255,255,.3)}
.page-reg .form{max-width:400px;
margin:0 auto}
.page-reg label.title{display:block;
line-height:30px;
font-size:16px;
color:#000;
padding:8px 0}
.page-reg label.title i{display:inline-block;
width:8px;
vertical-align:top;
color:#d81f3e;
margin-left:-8px}
.page-reg .input-text{width:400px;
height:38px;
font-size:14px;
padding:0 12px;
border:1px solid #ccc;
border-radius:4px;
outline:0}
.page-reg .input-text:focus{border-color:grey}
.page-reg .input-text::-webkit-input-placeholder{color:#b2b2b2;
font-size:14px}
.page-reg .helper{opacity:0;
min-height:24px;
line-height:24px;
padding:6px 14px 0;
font-size:14px;
color:#d81f3e;
-webkit-box-sizing:content-box;
box-sizing:content-box}
.page-reg .control{min-height:38px}
.page-reg .control label{display:inline-block;
margin-right:20px}
.page-reg .ctrl-radio{display:inline-block;
font-size:14px}
.page-reg .form-error .helper{opacity:1}
.page-reg .form-error .input-text{border-color:#d81f3e}
.page-reg .ctrl-code .input-text{float:left;
width:240px}
.page-reg .ctrl-code .code{float:left;
width:140px;
height:38px;
line-height:38px;
text-align:center;
margin-left:20px;
color:#FFF;
background:#d81f3e;
border-radius:3px;
cursor:pointer}
.page-reg .ctrl-code .code.sended{background:#ccc;
cursor:default}
.page-reg .protocol{font-size:14px;
color:#333;
border-top:1px solid #ccc;
text-align:center;
margin:30px 0 0;
padding:20px 0 0}
.page-reg .protocol a{color:#2a87ff;
text-decoration:underline}
.page-reg .btnbar{padding:50px 0;
text-align:center}
.page-reg .btnbar .btn-submit{display:inline-block;
width:200px;
height:44px;
line-height:44px;
margin:0 auto;
color:#fff;
background:#d81f3e;
font-size:16px;
border-radius:2px;
border:none;
cursor:pointer}
.page-reg .btnbar .btn-submit.sended{background:#ccc;
cursor:default}
.page-reg .success{padding:170px 0 0;
text-align:center}
.page-reg .success strong{display:block;
font-size:32px;
color:#333;
padding:70px 0 50px}
.page-reg .support{width:100%;
height:100%;
background:rgba(0,0,0,.8);
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:500}
.page-reg .support .panel{width:300px;
background:#fff;
padding:15px;
border-radius:5px;
margin:0 0 0 -150px;
position:fixed;
top:150px;
left:50%}
.page-reg .support .qrcode{width:100%;
text-align:center}
.page-reg .support .qrcode canvas{max-width:100%}
.page-reg .support .text{text-align:center;
font-size:13px;
padding:15px 0 0}
.page-reg .support .text a{color:#369}
.page-reg .support .text p{color:#666;
font-style:italic;
padding:10px 0 0}
.page-reg .mobile-tips{display:none;
text-align:center;
font-size:14px;
padding:0 0 20px;
color:#666;
font-weight:500}
.page-reg .get-invite-code{position:relative}
.page-reg .invite-wx-box{display:none;
width:100%;
height:100%;
background:rgba(0,0,0,.8);
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:5000}
.page-reg .invite-wx-box.in{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center}
.page-reg .invite-wx-box .panel{width:400px;
height:360px;
color:#fff;
text-align:center;
background:#fff;
-webkit-box-shadow:0 4px 20px rgba(0,0,0,.4);
box-shadow:0 4px 20px rgba(0,0,0,.4);
border-radius:3px;
cursor:default;
position:relative}
.page-reg .invite-wx-box .close{position:absolute;
top:0;
right:0;
color:#fff;
font-size:30px;
font-weight:400;
width:40px;
height:40px;
text-align:center;
line-height:40px;
cursor:pointer}
.page-reg .invite-wx-box .close:hover{color:rgba(255,255,255,.5)}
.page-reg .invite-wx-box:after{display:block;
width:0;
height:0;
border:8px solid transparent;
border-top-color:#fff;
position:absolute;
bottom:-16px;
left:420px;
margin:0 0 0 -4px}
.page-reg .invite-wx-box .top{height:190px;
background:#d81f3e;
border-radius:3px 3px 0 0}
.page-reg .invite-wx-box .top h3{height:70px;
font-size:20px;
font-weight:400;
padding:25px 0 5px}
.page-reg .invite-wx-box .top .avatars{height:120px}
.page-reg .invite-wx-box .avatars .flex{padding:10px 0 0;
position:relative}
.page-reg .invite-wx-box .avatars .flex.active:after{content:'';
display:block;
width:0;
height:0;
border:8px solid transparent;
border-bottom-color:#fff;
position:absolute;
bottom:0;
left:50%;
margin:0 0 0 -4px}
.page-reg .invite-wx-box .flexbox{display:-webkit-box;
display:-ms-flexbox;
display:flex;
padding:0 15px}
.page-reg .invite-wx-box .flexbox .flex{-webkit-box-flex:1;
-ms-flex:1;
flex:1}
.page-reg .invite-wx-box .qrcodes .flex{padding-top:22px;
position:relative}
.page-reg .invite-wx-box .qrcodes img{vertical-align:top}
.page-reg .invite-wx-box .mobile-tips{display:none}
.page-reg .app-download{display:-webkit-box;
display:-ms-flexbox;
display:flex;
padding:25px 20px;
border-top:1px solid #ccc}
.page-reg .app-download img{width:72px;
height:72px;
margin:0 25px 0 0}
.page-reg .app-download .flex{-webkit-box-flex:1;
-ms-flex:1;
flex:1}
.page-reg .app-download p{font-size:14px;
padding:3px 0 0}
.page-reg .app-download .btn{display:block;
line-height:20px;
font-size:14px;
padding:5px 15px;
font-weight:400;
text-align:center;
white-space:nowrap;
vertical-align:middle;
cursor:pointer;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-user-select:none;
background-image:none;
border:none;
-webkit-box-sizing:border-box;
box-sizing:border-box;
color:#fff;
background:-webkit-gradient(linear,left top,right top,from(#d42946),to(#f95974));
background:-webkit-linear-gradient(left,#d42946,#f95974);
background:-o-linear-gradient(left,#d42946,#f95974);
background:linear-gradient(to right,#d42946,#f95974);
outline:0;
position:relative;
margin:14px 0 0;
border-radius:18px;
max-width:178px}
@media only screen and (max-width:767px){.page-reg label.title{font-size:13px;
padding:2px 0}
.page-reg .angular{width:3px;
height:14px;
top:-22px;
left:0}
.page-reg .top-tips{left:10px;
font-size:13px}
.page-reg .banner-reg{height:340px}
.page-reg .banner-reg .logo{width:60px;
height:60px;
margin-top:40px}
.page-reg .banner-reg h1{font-size:24px;
padding-top:20px}
.page-reg .input-text{width:100%;
height:34px}
.page-reg .input-text::-webkit-input-placeholder{font-size:12px}
.page-reg .helper{font-size:12px;
padding-top:0}
.page-reg .content{margin-right:10px;
margin-left:10px;
padding:20px}
.page-reg .ctrl-code .input-text{width:160px}
.page-reg .ctrl-code .code{width:90px;
margin-left:10px;
height:34px}
.page-reg .btnbar{padding:30px 0;
margin-top:20px}
.page-reg .pc-btn{display:none}
.page-reg .mobile-tips{display:block}
.page-reg .success{padding:40px 0 0;
text-align:center}
.page-reg .success img{width:80px}
.page-reg .success strong{display:block;
font-size:18px;
color:#333;
padding:35px 0 25px}
.page-reg .get-invite-code{position:static}
.page-reg .invite-wx-box{padding:0 15px}
.page-reg .invite-wx-box .top h3{font-size:16px}
.page-reg .invite-wx-box .panel{width:auto;
min-width:300px}
.page-reg .invite-wx-box .mobile-tips{display:block;
color:#999;
font-size:10px}
}
.page-pay .content,.page-pay-success .content{-webkit-box-shadow:0 0 20px #e5e5e5;
position:relative}
.page-agent .section{height:810px;
background:url(../img/banner-agent.jpg) center top no-repeat;
background-size:cover;
overflow:hidden}
.page-agent .panel{width:840px;
height:600px;
padding:64px 0 0;
margin:120px auto 0;
background:rgba(0,0,0,.6)}
.page-agent h2{font-size:1.8rem;
line-height:1.8rem;
color:#fff;
text-align:center;
padding:0 0 13px}
.page-agent h3{font-size:1.2rem;
line-height:1.2rem;
color:#fff;
text-align:center;
padding:0 0 20px}
.page-agent h5{font-size:.7rem;
text-align:center;
line-height:.7rem;
color:#999}
.page-agent .form{width:345px;
color:#fff;
margin:32px auto 0}
.page-agent .row{display:-webkit-box;
display:-ms-flexbox;
display:flex;
height:1.8rem;
margin:24px 0 0}
.page-agent .label{width:65px;
font-size:.8rem;
line-height:1.8rem}
.page-agent .flex{-webkit-box-flex:1;
-ms-flex:1;
flex:1;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
height:100%;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center}
.page-agent .flex input[type=text]{-webkit-box-flex:1;
-ms-flex:1;
flex:1;
height:100%;
font-size:14px;
padding:0 16px;
border:none;
border-radius:3px;
outline:0}
.page-agent .flex input[type=text]::-webkit-input-placeholder{color:#999}
.page-agent .flex label{display:-webkit-inline-box;
display:-ms-inline-flexbox;
display:inline-flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
padding:0 16px}
.page-agent .flex label input[type=radio]{margin-right:16px}
.page-agent .flex select{-webkit-box-flex:1;
-ms-flex:1;
flex:1;
width:30%;
height:100%;
padding:0 0 0 12px;
margin:0 8px 0 0}
.page-agent .flex select:last-child{margin:0}
.page-agent .btnbar{text-align:center;
padding:56px 0 0}
.page-agent .btn-submit{color:#fff;
font-size:.8rem;
background:#bd081c;
border:none;
width:9.6rem;
height:2.2rem;
border-radius:3px;
cursor:pointer}
@media only screen and (max-width:767px){.page-agent .section{height:auto;
padding:0 0 50px}
.page-agent .panel{width:auto;
height:auto;
padding:30px 24px;
margin:100px 12px 0}
.page-agent .form{width:auto}
.page-agent .row{margin:12px 0 0}
.page-agent .btnbar{padding:32px 0 0}
}
.page-pay .content{padding:0 0 60px;
margin:90px auto 100px;
background:#fff;
border-radius:5px;
box-shadow:0 0 20px #e5e5e5}
.page-pay .titlebar{padding:30px 0 20px;
margin:0 30px;
background:#fff;
border-bottom:1px solid #e6e6e6}
.page-pay .titlebar strong{font-size:1.1rem;
font-weight:500;
margin:0}
.page-pay .titlebar .back,.page-pay .titlebar strong a{color:grey;
margin:0 0 0 30px;
font-size:.8rem}
.page-pay .titlebar .text-right{float:right}
.page-pay .titlebar .btn-blue{cursor:pointer;
display:inline-block;
font-size:.8rem;
padding:2px 10px;
color:#20a5ff;
font-weight:700;
border-radius:3px;
margin:8px 38px 0 0}
.page-pay .pay-wrap{margin:30px 12px 0;
border-bottom:1px solid #e6e6e6}
.page-pay .pay-wrap .row{line-height:36px;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
padding:10px 0}
.page-pay .pay-wrap .label{width:200px;
text-align:right;
font-weight:500;
padding:0 10px}
.page-pay .pay-wrap .flex{-webkit-box-flex:1;
-ms-flex:1;
flex:1;
padding:0 10px}
.page-pay .pay-wrap .shop-comment{color:#999;
font-style:italic;
font-size:.6rem}
.page-pay .pay-wrap input[type=text],.page-pay .pay-wrap select{width:300px;
height:36px;
padding:0 10px;
border:1px solid #ccc;
border-radius:5px}
.page-pay .pay-wrap .row-code{display:-webkit-box;
display:-ms-flexbox;
display:flex}
.page-pay .pay-wrap .row-code input{width:170px}
.page-pay .pay-wrap .btn-getcode{background:#bd081c;
border-radius:3px;
color:#fff;
width:120px;
text-align:center;
margin:0 0 0 10px;
cursor:pointer}
.page-pay .pay-wrap .btn-getcode.sended{background:grey}
.page-pay .pay-wrap .prd{display:inline-block;
vertical-align:top;
width:200px;
height:100px;
font-size:.8rem;
text-align:center;
color:#d81f3e;
padding:15px 0 0;
margin-right:30px;
border:1px solid #d81f3e;
border-radius:5px;
cursor:pointer;
margin-bottom:5px}
.page-pay .pay-wrap .prd strong{display:block;
font-size:1.1rem;
color:#000}
.page-pay .pay-wrap .prd.active{color:#fff;
background:#d81f3e}
.page-pay .pay-wrap .prd.active strong{color:#fff}
.page-pay .pay-wrap label{display:-webkit-inline-box;
display:-ms-inline-flexbox;
display:inline-flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
margin:0 20px 0 0}
.page-pay .pay-wrap label input[type=radio]{width:16px;
height:16px;
margin:0 10px 0 0}
.page-pay .pay-wrap label img{width:24px;
height:24px;
margin:0 10px 0 0}
.page-pay .pay-wrap label .input-cdk{width:auto;
margin:0 0 0 10px}
.page-pay .features{display:none;
float:right;
width:240px;
padding:0 10px 20px;
margin:0 30px 0 0;
background:#fff;
position:absolute;
top:100px;
right:0}
.page-pay .features .f-title{font-size:.7rem}
.page-pay .features ul{display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
-ms-flex-flow:wrap;
flex-flow:wrap;
margin:10px 0 0}
.page-pay .features li{display:inline-block;
width:48%;
text-align:center;
font-size:12px;
padding:6px 15px;
margin:10px 0 0;
background:#f5f5f5}
.page-pay .features li.db{display:block;
width:100%}
.page-pay .hasFeature{overflow:hidden}
.page-pay .hasFeature .pay-form{float:left;
width:750px}
.page-pay .hasFeature .features{display:block}
.page-pay .btnbar{text-align:center;
padding:40px 0 0}
.page-pay .btnbar .btn{display:inline-block;
width:160px;
height:44px;
color:#fff;
line-height:44px;
text-align:center;
font-size:.8rem;
background:#bd081c;
border-radius:3px;
cursor:pointer}
.page-pay .alipay-form{width:0;
height:0;
overflow:hidden}
@media only screen and (max-width:767px){.page-pay .content{display:block;
width:auto;
padding-bottom:40px;
margin:60px 10px 20px;
border-radius:3px}
.page-pay .titlebar{margin:0 15px}
.page-pay .titlebar strong{font-size:18px}
.page-pay .titlebar .btn-blue{font-size:14px;
margin:8px 0 0;
padding:0}
.page-pay .pay-form{width:auto}
.page-pay .pay-wrap{margin:30px 0 0;
border-bottom:1px solid #e6e6e6}
.page-pay .pay-wrap .row{line-height:36px;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
padding:10px 0}
.page-pay .pay-wrap .label{width:100px;
text-align:right;
font-size:12px}
.page-pay .pay-wrap .flex{-webkit-box-flex:1;
-ms-flex:1;
flex:1;
font-size:.8rem;
padding:0 10px}
.page-pay .pay-wrap .flex input[type=text],.page-pay .pay-wrap .flex select{width:100%;
height:36px;
padding:0 10px;
border:1px solid #ccc;
border-radius:5px}
.page-pay .pay-wrap .prd{display:block;
vertical-align:top;
height:80px;
font-size:13px;
text-align:center;
color:#d81f3e;
padding:5px 0 0;
margin-right:30px;
border:1px solid #d81f3e;
border-radius:5px;
cursor:pointer;
margin-bottom:5px}
.page-pay .pay-wrap .prd strong{display:block;
font-size:.8rem;
color:#000}
.page-pay .pay-wrap .prd.active{color:#fff;
background:#d81f3e}
.page-pay .pay-wrap .prd.active strong{color:#fff}
.page-pay .pay-wrap .payway{display:-webkit-box;
display:-ms-flexbox;
display:flex}
.page-pay .hasFeature .pay-form{width:auto;
float:none}
.page-pay .hasFeature .features{display:none}
}
.page-pay-success .content{padding:0 0 60px;
margin:90px auto 100px;
background:#fff;
border-radius:5px;
box-shadow:0 0 20px #e5e5e5}
.page-pay-success .success{text-align:center;
padding:80px 0 60px;
margin:0 30px;
border-bottom:1px solid #e6e6e6}
.page-pay-success .success .h2{font-size:1.8rem;
padding:40px 0}
.page-pay-success .success .h5{font-size:.8rem}
.page-pay-success .appqrcode{text-align:center;
padding:40px 0 20px}
.page-pay-success .appqrcode p{padding-top:20px;
font-size:.8rem}
.page-pay-success .appqrcode img{width:180px}
.page-pay-success .row-code{display:-webkit-box;
display:-ms-flexbox;
display:flex;
width:300px;
overflow:hidden}
.page-pay-success .input-code{-webkit-box-flex:1;
-ms-flex:1;
flex:1;
width:auto!important;
margin-right:10px}
.page-pay-success .btn-getcode{width:110px;
text-align:center}
.page-pay-success .btn-pcweb{display:block;
width:180px;
height:44px;
line-height:44px;
margin:40px auto 0;
text-align:center;
color:#fff;
font-size:.8rem;
border-radius:3px;
background:#bd081c}
.page-pay-success .radio-group label{margin-right:20px;
font-size:14px}
.page-pay-success .radio-group input[type=radio]{width:22px;
height:22px}
@media only screen and (max-width:767px){.page-pay-success .content{width:auto;
margin:60px 12px 50px}
}