body {
    background: #666 url(bg.png) no-repeat;
    background-size:initial;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

div, span, a, p {
    word-wrap: break-word;
}

a {
    text-decoration: none;
}
li{list-style:none;}

.clear {
    clear: both;
}
.fl{
    float:left;
}
.fr{
    float:right;
}
.vertical-align-middle {
    margin: 30px auto;
    line-height: 1.6em;
    font-size: 14px;
}

#main{
    position:absolute;
    bottom:0;
    left:0;
    left:calc((100% - 1460px)/2);
    height:788px;
}
#aq{
    position: fixed;
    bottom: 25px;
    left: 20px;
}

.wrap {
    width: 1100px;
    margin: 0 auto;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    display: block;
    width:100%;
    height: 86px;
    color: #FFF;
    text-align: center;
    vertical-align: middle;
}
.footer::before{
    position: absolute;
    left:0;
    top:0;
    content:" ";
    width:100%;
    height:100%;
    background:#000;
    opacity: 0.3;
}
.footer .info{
    position:relative;
}
.footer .info.en{
    position:relative;
    height: 64px;
    background: url(footer-info-en.png) center no-repeat;
}
.footer .sns{
    height: 30px;
    margin: 26px 0 0 470px;
    display: inline-block;
    float: left;
}
.footer .sns a{
    display:inline-block;
    width:30px;
    height:30px;
    margin:0 18px 0 0;
}

.footer a {
    color: #ffffff;
}

.footer a:hover {
    color: #888888;
}

.left {
    background: url(hand.png) center no-repeat;
    width: 730px;
    height: 788px;
    float: left;
    position:relative;
}

.right {
    float: right;
    width:354px;
    padding-top: 130px;
}

.right .dl{
    display:inline-block;
    width:100%;
    margin: 40px 0;
}

.right .qr-cn {
    background: url(qr-cn.png) center no-repeat;
    height: 166px;
}
.right .qr-en {
    background: url(qr-en.png) center no-repeat;
    height: 166px;
}

.dl a{
    display:inline-block;
    width:152px;
    height:42px;
    margin-left: 10px;
}
.dl .app-store{
    background:url(dl-app-store.png) 0 0 / contain no-repeat;
}
.dl .google-play{
    background:url(dl-google-play.png) 0 0 / contain no-repeat;
}
.dl .android{
    background:url(dl-android.png) 0 0 / contain no-repeat;
}

.slides{
    position: absolute;
    left: 343px;
    top: 145px;
    width: 234px;
    height: 390px;
    display:inline-block;
}
.slides ul{ position:absolute;width:100%;height:100%;margin:0; padding:0; overflow: hidden;}
.slides li{
    float:left;
    width: 234px;
    height: 390px;
    overflow:hidden;
}
.slides li a{
     height: inherit;
     width: inherit;
     margin:0;
     padding:0;
     display:inline-block;
    overflow:hidden;
 }
.slides li a img{
    display:inline-block;
    height:100%;
    width: 100%;
}

.slides-nav{
    width: 376px;
    position: absolute;
    top: 620px;
    left: 275px;
}

.slides-nav .arrow{
    display:inline-block;
    width:32px;
    height:32px;
}
.slides-nav .arrow:hover{
    cursor: pointer;
}

.slides-nav .arrow.prev{
    float:left;
    background:url(arrow-prev.png) no-repeat;
}

.slides-nav .arrow.next{
    float:right;
    background:url(arrow-next.png) no-repeat;
}
.slides-nav .index{
    float:left;
    display: inline-block;
    width:312px;
    text-align: center;
    line-height: 32px;
}
.slides-nav .index i{
    display:inline-block;
    width: 8px;
    height: 8px;
    margin: 7px;
    border-radius: 5px;
    background: #DDD;
    vertical-align: middle;
}
.slides-nav .index i.on,
.slides-nav .index i:hover{
    background: #adff2f;
}