/*
 * Theme : app 引导页
 * Date  : 2018/01/10
 * Author: LX
 */
*{
    margin:0;
    padding:0;
}
html,body{
    font-family: 'microsoft yahei';
    height: 100%;
    width:100%;
}
.tcenter{
    text-align: center;
}
.vam{
    vertical-align: middle;
}
.app-page{
    width:100%;
    height:100%;
    position: relative;
    overflow: hidden;
    min-width: 1480px;
    min-height: 920px;
}
.app-page .images{
    background:url(../../images/app/bg.jpg);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 300%;
    animation: slideshow 80s linear infinite;
}

@keyframes slideshow {
    0%    { left: 0; }
    100%  { left: -200%; }
  }
.app-page .app-content{
   position: absolute;
   width:100%;
   height: 100%;
   top:0;
   /* bottom: 0; */
   left: 0;
   /* right: 0; */
}
.app-page .text-wrap{
    width: 648px;
    height: 293px;
    background:url(../../images/app/text.png);
    margin-top:112px;
    /* margin-left: 398px; */
 }
.app-page .logo{
    background:url(../../images/app/logo.png);
    display:block;
    width: 272px;
    height: 56px;
    margin-left: 70px;
    margin-top:61px;
}
.app-page .download-wrap{
    margin-top:56px;
    font-size: 0;
    /* margin-left: 484px; */
    margin-left: 100px;
}
.app-page .download-btn{
    display: inline-block;
    width: 202px;
    height: 57px;
    border-radius: 10px;
    background: #3383e6;
    text-align: center;
    line-height: 57px;
    margin-right: 50px;
    position: relative;
    cursor: pointer;
}
.app-page .download-btn:hover > .tip-erweima{
  display:block;
}
.app-page .download-btn .platform-icon{
    display: inline-block;
    width: 28px;
    height: 33px;
    background:url(../../images/app/appicons.png) no-repeat 0 0;
    vertical-align: middle;
    margin-right: 8px;
}
.app-page .download-btn .platform-icon.android-icon{
    background:url(../../images/app/appicons.png) no-repeat -31px 0;
}
.sm-erweima{
    width: 24px;
    height: 25px;
    position: absolute;
    right: 0;
    top:0;
    background:url(../../images/app/appicons.png) no-repeat 0 -35px;
    
}
.app-page .download-btn span{
  color: #fff;
  font-size: 20px;
  vertical-align: middle;
}
.app-page .adv{
   width: 203px;
   height:322px;
   position: fixed;
   top:178px;
   right: 42px;
   background:url(../../images/app/adv.png);
}
.app-page .adv .close{
  position: absolute;
  top:0;
  right:18px;
  width:20px;
  height: 20px;
  cursor: pointer;
 }
.app-page .adv .erweima{
    width: 110px;
    height: 110px;
    background: red;
    margin-top:150px;
    margin-left:50px;
}
.app-page .adv .down-btn{
   margin-top:10px;
   height: 26px;
   width:100px;
   border:1px solid #3399ff;
   text-align: center;
   line-height: 26px;
   color: #3399ff;
   font-size: 12px;
   border-radius: 13px;
   margin-left: 55px;
   cursor: pointer;
}
 
.app-page .swiper-container{
     position: absolute;
     top:0;
     bottom: 0;
    /* width: 881px; */
    width: 810px;
    
     /* min-width:  */
     right: 0;
 }
 .app-page .swiper-container .phone{
    width: 326px;
    height: 686px;
    margin-top:208px;
    margin-left: 183px;
    position: relative;
}
.app-page .wrap{
   width: 1480px;
   margin:0 auto;
}
.app-page .swiper-slide:nth-of-type(1) .phone{
    width: 326px;
    height: 686px;
   background:url(../../images/app/slide1.png);
    margin-top:208px;
    margin-left: 183px;
    position: relative;
}
.app-page .swiper-slide:nth-of-type(2) .phone{
    width: 326px;
    height: 686px;
    background:url(../../images/app/slide2.png);
    margin-top:208px;
    margin-left: 183px;
    position: relative;
}
.app-page .swiper-slide:nth-of-type(3) .phone{
    width: 326px;
    height: 686px;
   background:url(../../images/app/slide3.png);
    margin-top:208px;
    margin-left: 183px;
    position: relative;
}
.app-page .swiper-slide:nth-of-type(4) .phone{
    width: 326px;
    height: 686px;
   background:url(../../images/app/slide4.png);
    margin-top:208px;
    margin-left: 183px;
    position: relative;
}
.app-page .swiper-slide:nth-of-type(5) .phone{
    width: 326px;
    height: 686px;
   background:url(../../images/app/slide5.png);
    margin-top:208px;
    margin-left: 183px;
    position: relative;
}
.app-page .swiper-container .phone .title-text{
    width: 363px;
    height: 152px;
    position: absolute;
    top:329px;
}

.app-page .swiper-container .swiper-slide:nth-of-type(1) .phone .title-text{
    width: 363px;
    height: 152px;
    position: absolute;
    top:329px;
    left: 96px;
    background:url(../../images/app/text1.png);
}
.app-page .swiper-container .swiper-slide:nth-of-type(2) .phone .title-text{
    width: 363px;
    height: 152px;
    position: absolute;
    top:329px;
    left: 131px;
    background:url(../../images/app/text2.png);
}
.app-page .swiper-container .swiper-slide:nth-of-type(3) .phone .title-text{
    width: 363px;
    height: 152px;
    position: absolute;
    top:329px;
    left: 96px;
    background:url(../../images/app/text3.png);
}
.app-page .swiper-container .swiper-slide:nth-of-type(4) .phone .title-text{
    width: 363px;
    height: 152px;
    position: absolute;
    top:329px;
    left: 131px;
    background:url(../../images/app/text4.png);
}
.app-page .swiper-container .swiper-slide:nth-of-type(5) .phone .title-text{
    width: 363px;
    height: 152px;
    position: absolute;
    top:329px;
    left: 96px;
    background:url(../../images/app/text5.png);
}
.app-page .swiper-container .swiper-slide .phone .person{
    position: absolute;
}
.app-page .swiper-container .swiper-slide:nth-of-type(1) .phone .person{
    width:377px;
    height:221px;
    bottom:0;
    left: -33px;
    background:url(../../images/app/person1.png);
}
.app-page .swiper-container .swiper-slide:nth-of-type(2) .phone .person{
    width:281px;
    height:221px;
    bottom:0;
    left: -94px;
    background:url(../../images/app/person2_1.png);
}
.app-page .swiper-container .swiper-slide:nth-of-type(3) .phone .person{
    width:239px;
    height:276px;
    bottom:22px;
    left:30px;
    background:url(../../images/app/person3.png);
}
.app-page .swiper-container .swiper-slide:nth-of-type(4) .phone .person{
    width:225px;
    height:305px;
    bottom:-46px;
    left:14px;
    background:url(../../images/app/person4.png);
}
.app-page .swiper-container .swiper-slide:nth-of-type(5) .phone .person{
    width:327px;
    height:221px;
    bottom:0px;
    left:0px;
    background:url(../../images/app/person5.png);
}
.app-page .swiper-container .swiper-slide:nth-of-type(5) .phone .person{
    width:327px;
    height:221px;
    bottom:0px;
    left:0px;
    background:url(../../images/app/person5.png);
}

.tip-erweima{
    width: 116px;
    height: 116px;
    border:1px solid #55a1ff;
    border-radius: 5px;
    background:#fff;
    position: absolute;
    top:-130px;
    left: 50%;
    margin-left: -59px;
    display:none;
}
.tip-erweima:before{
    content: '';
    position: absolute;
    width: 14px;
    height: 9px;
    background:url(../../images/app/tip_icon.png);
    bottom:-9px;
    left: 50%;
    margin-left:-7px;
    
   }

/* 移动端 */
.app-page-mobile{
    padding-top:1px;
    width: 100%;
    height: 100%;
    min-height: 13.34rem;
    background:url(../../images/app/wap.jpg);
    background-size: cover;
    position: relative;
}

.app-page-mobile .logo{
    width: 2.72rem;
    height: .56rem;
    margin:.95rem auto 0;
    background:url(../../images/app/mg_logo.png);
    background-size:2.72rem .56rem;

    /* background:url(../../images/app/wap.jpg); */
}
.app-page-mobile .slogan{
    width: 2.72rem;
    height: .67rem;
    margin:0 auto .62rem;
    background:url(../../images/app/slogan.png);
    background-size:2.72rem .67rem;
}
.app-page-mobile .content{
    width: 7.5rem;
    height: 9.07rem;
    margin:0 auto 0;
    background:url(../../images/app/mb_content.png);
    background-size: 7.5rem 9.07rem;
}
.app-page-mobile .download-btn{
    width: 3.13rem;
    height: .8rem;
    border:0.04rem solid #398df5;
    border-radius: .4rem;
    position: absolute;
    left: 50%;
    margin-left: -1.56rem;
    bottom: 1.24rem;
    line-height: .8rem;
    text-align: center;
    color:#398df5;
    font-size: .38rem;
    cursor: pointer;
}
.app-page-mobile .download-btn:active{
    background:#398df5;
    color:#fff;
}
.swiper-pagination-bullet-active{
    background: #fff !important;
}
.swiper-pagination-bullet{
    background: #808080;
    cursor: pointer;
}
.tooltips-wrap{
    position: fixed;
    display: none;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-align: right;
    background:rgba(0,0,0,.9);
}
.tooltips-wrap img.top{
    margin-top:0.3rem;
    margin-right:1rem;
    width:100%;
}
.tooltips-wrap img.bottom{
    width:100%;
    margin-top:1.0rem;
}