/*
 * @Author: Alan.zheng 
 * @Date: 2020-04-27 16:01:57 
 * @Last Modified by: Alan.zheng
 * @Last Modified time: 2020-04-27 17:54:58
 */
 body {
     font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     margin: 0 auto;
     padding: 0;
     background: #bba733;
 }

 ul,
 ol,
 li,
 dl,
 dt,
 dd,
 p,
 form,
 fieldset,
 table,
 td,
 img,
 div {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 ul,
 ol,
 li {
     list-style: none;
 }

 a {
     color: #7d7d7d;
     text-decoration: none;
 }

 img {
     max-width: 100%;
 }
 
 .ani {
     -webkit-transition: all .3s linear;
     transition: all .3s linear;
 }

 .clearfix:before,
 .clearfix:after {
     display: table;
     content: '';
 }

 .clearfix:after {
     clear: both;
 }

 .clearfix {
     *zoom: 1;
     /*IE/7/6*/
 }
 .bg {
    background: url('../images/page.jpg') no-repeat center 0 #bba733;
    height: 100vh;
    background-size: 100% auto;
    width: 100%;
    height: 19rem;
    max-width: 750px;
    margin: 0 auto;
 }

.main {
    position: relative;
    width: 100%;
    height: 100%;
    background: url('../images/bg-yellow.jpg') no-repeat 0 bottom;
    background-size: 100% auto;
}
.bg-yellow {
    position: absolute;
    width: 100%;
    left: 0;
    top: 75%;
    top: 13.35rem;
}
.btn-box {
    padding-bottom: .4rem;
    margin: 0 15%;
}
.btn {
    background: #3c3c3c;
    color: #fff;
    padding: .3rem 0;
    text-align: center;
    display: block;
    margin: .3rem 0;
    border-radius: .8rem;
    font-size: .45rem;
}
.btn-open {
    color: #3c3c3c;
    background: #fff;
}
 .share-body {
     background: #3c3c3c;
 }
.share-bg {
     background: url('../images/download-page.jpg') no-repeat center 0 #3c3c3c;
     height: 100vh;
     background-size: 100% auto;
     width: 100%;
     max-width: 750px;
     margin: 0 auto;
     position: relative;
}
.share-msg {
    position: absolute;
    left: 13%;
    top: 0;
    background: url('../images/ios-share.png') no-repeat;
    background-size: 100% 100%;
    height: 3.1rem;
    width: 74%;
    display: none;
}
.share-msg-android {
    background-image:url('../images/android-share.png')
}
.share-down {
    position: absolute;
    left: 0;
    bottom: 0;
}
.share-down img {
    display: block;
    max-width: 100%;
}
.bg-pc {
    box-shadow: 0 0 15px rgba(0, 0, 0, .8);
    height: 1350px;
}

.bg-pc .bg-yellow {
    top: 1020px;
}

.bg-ipad {
    max-width: 556px;
    height: 100vh;
    box-shadow: 0 0 15px rgba(0, 0, 0, .8);
    background-size: auto 100%;
}

.bg-ipad .bg-yellow {
    top: 73%;
}

.bg-ipad .btn {
    font-size: .55rem;
}
.bg-ipad .share-msg {
    height: 4.3rem;
}
.bg-pc .share-msg {
    height: 210px;
}
@media (min-width: 1000px) {
   .bg-ipad {
       max-width: 750px;
       background-size:  100% auto;
   }

   .bg-ipad .bg-yellow {
       top: 75%;
   }
   .bg-ipad .share-msg {
       height: 5.5rem;
   }
}
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min--moz-device-pixel-ratio: 2) {
    .bg {
        background-image: url('../images/page@2x.jpg');
    }
    .share-bg {
        background-image: url('../images/download-page@2x.jpg');
    }
}
@media screen and (-webkit-min-device-pixel-ratio: 3),
screen and (min--moz-device-pixel-ratio: 3) {
    .bg {
        background-image: url('../images/page@3x.jpg');
    }
    .share-bg {
        background-image: url('../images/download-page@3x.jpg');
    }
}