@charset "UTF-8";
/*
1、写入CSS的尺寸/屏幕宽度 = UI图标注的尺寸/UI图宽度
即：写入CSS的尺寸 = (UI图标注的尺寸*屏幕宽度)/UI图宽度
2、我们将根元素设置为100px，则1rem=100px
然而为了不失真要计算出对应的比例，于是1rem = 屏幕宽度/UI设计图宽度*100px
即：屏幕640px，给的设计稿宽640px，那么这种情况下1rem就表示100px
如果屏幕320px，给的设计稿宽640px，那么这种情况下1rem就表示50px
要想做成响应式，只需要配合@media计算好对应屏幕下html font-size的值。
当然为了好计算，我们全部以100px为基准
3、于是：写入CSS的尺寸 = UI图标注的尺寸/100px*1rem
*/
@media (min-width: 240px) {
    html {
        font-size: 32px;
    }
}

@media (min-width: 320px) {
    html {
        font-size: 42.66667px;
    }
}

@media (min-width: 360px) {
    html {
        font-size: 48px;
    }
}

@media (min-width: 375px) {
    html {
        font-size: 50px;
    }
}

@media (min-width: 384px) {
    html {
        font-size: 51.2px;
    }
}

@media (min-width: 411px) {
    html {
        font-size: 54.8px;
    }
}

@media (min-width: 414px) {
    html {
        font-size: 55.2px;
    }
}

@media (min-width: 424px) {
    html {
        font-size: 56.53333px;
    }
}

@media (min-width: 480px) {
    html {
        font-size: 64px;
    }
}

@media (min-width: 540px) {
    html {
        font-size: 72px;
    }
}

@media (min-width: 640px) {
    html {
        font-size: 85.33333px;
    }
}

@media (min-width: 720px) {
    html {
        font-size: 96px;
    }
}

@media (min-width: 750px) {
    html {
        font-size: 100px;
        /* 相当于 font-size: 100px; */
        /*font-size: 625%;*/
    }
}

/*
@media (min-width: 768px) {
    html {
        font-size: 102.4px;
    }
}

@media (min-width: 800px) {
    html {
        font-size: 106.66667px;
    }
}

@media (min-width: 980px) {
    html {
        font-size: 130.66667px;
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 136.53333px;
    }
}

@media (min-width: 1080px) {
    html {
        font-size: 144px;
    }
}

@media (min-width: 1152px) {
    html {
        font-size: 153.6px;
    }
}

@media (min-width: 1366px) {
    html {
        font-size: 182.13333px;
    }
}

@media (min-width: 1440px) {
    html {
        font-size: 192px;
    }
}

@media (min-width: 2160px) {
    html {
        font-size: 288px;
    }
}*/

a, blockquote, body, code, dd, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, input, label, li, object, ol, p, q, small, span, strong, table, tbody, td, th, tr, ul {
    margin: 0;
    padding: 0;
    border: 0
}

html, body {
    height: 100%;
}

body {
    line-height: normal;
    color: #333;
    font-size: .28rem;
    font-family: "AlibabaPuHuiTi-Bold", "AlibabaPuHuiTi-Medium", "AlibabaPuHuiTi-R","AlibabapuhuiTi";
  
}

a, a:active, a:focus, a:hover, a:visited {
    text-decoration: none
}

a, img {
    -webkit-touch-callout: none
}

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

.hidden, .none {
    display: none !important
}

.clear:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0
}

.f12 {
    font-size: .24rem;
}
.f14 {
    font-size: .28rem;
}
.f16 {
    font-size: .32rem;
}
.f18 {
    font-size: .36rem;
}
.f20 {
    font-size: .4rem;
}
.f30 {
    font-size: .6rem;
}
.f-bold {
    font-weight: bold;
}

/*字符串单行截断*/
/* .elli {*/
/*     width: 100%;*/
/*     text-overflow: ellipsis;*/
/*     overflow: hidden;*/
/*     white-space: nowrap;*/
/*     word-wrap: normal;*/
/*     vertical-align: top*/
/* }*/

/* 设为flex布局以后，子元素的float、clear和vertical-align属性将失效 */
.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex
}

.flex-x {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row
}

.flex-x-start {
    -webkit-box-pack: start;
    -moz-justify-content: flex-start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start
}

.flex-x-center {
    -webkit-box-pack: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center
}

.flex-x-end {
    -webkit-box-pack: end;
    -moz-justify-content: flex-end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end
}

.flex-x-between {
    -webkit-box-pack: justify;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.flex-x-around {
    -moz-justify-content: space-around;
    -webkit-justify-content: space-around;
    justify-content: space-around
}

.flex-y {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column
}

.flex-y-start {
    -webkit-box-align: start;
    -moz-align-items: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start
}

.flex-y-center {
    -webkit-box-align: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center
}

.flex-y-end {
    -webkit-box-align: end;
    -moz-align-items: flex-end;
    -webkit-align-items: flex-end;
    align-items: flex-end
}


.wrapper {
    margin: 0 auto;
    max-width: 7.5rem;
    width: 100%;
    height: 100%;
}

.wrapper hr {
    margin-top: .2rem;
    margin-bottom: .2rem;
    border: 0;
    border-top: 1px solid #eee;
}
.mobileBody {
    background: transparent url(../img/mobile/home/bottom_bg.png) left bottom no-repeat;
    background-size:  100%;
  padding-bottom: 2.5rem;
  
}

.my-scrollbar::-webkit-scrollbar {
    width:8px;
    height:8px
}
.my-scrollbar::-webkit-scrollbar-track-piece {
    background-color:#fff;
    border-radius:0
}
.my-scrollbar::-webkit-scrollbar-thumb:active {
    height:50px;
    background-color: #fff;
    border-radius:4px
}
  /*.navTop {*/
  /*      font-size: 0.3rem;*/
  /*      margin: 0.2rem;*/
  /*      & span {*/
  /*          color: #857a7a;*/
  /*          letter-spacing: 3px;*/
  /*          display: inline-block;*/
  /*      }*/
  /*      & span:first-child {*/
  /*          padding-left: 0.1rem;*/
  /*          padding-right: 0.2rem;*/
  /*          color: #3079cc !important;*/
  /*      }*/
  /*      & i {*/
  /*          font-size: 0.5rem;*/
  /*          color: #908484eb;*/
  /*          padding-left: 3.4rem;*/
  /*      }*/
  /*  }*/