﻿/* @media (min-width:3px2rem(20)) {
    html {
        font-size: px2rem(20);
    }
} */


@media (min-width: 320px) {
html { font-size: 266.667%; }
}
 @media (min-width: 360px) {
html { font-size: 300%; }
}
 @media (min-width: 375px) {
html { font-size: 312.5%; }
}
 @media (min-width: 384px) {
html { font-size: 320%; }
}
 @media (min-width: 414px) {
html { font-size: 345%; }
}
 @media (min-width: 448px) {
html { font-size: 373.333%; }
}
 @media (min-width: 480px) {
html { font-size: 400%; }
}
 @media (min-width: 512px) {
html { font-size: 426.667%; }
}
 @media (min-width: 544px) {
html { font-size: 453.333%; }
}
 @media (min-width: 576px) {
html { font-size: 480%; }
}
 @media (min-width: 608px) {
html { font-size: 506.667%; }
}
 @media (min-width: 640px) {
html { font-size: 533.333%; }
}
 @media (min-width: 750px) {
html { font-size: 625%; }
}
* { box-sizing: border-box; /* 在X5新内核Blink中，在排版页面的时候，会主动对字体进行放大，会检测页面中的主字体，当某一块字体在我们的判定规则中，认为字号较小，并且是页面中的主要字体，就会采取主动放大的操作。然而这不是我们想要的，可以采取给最大高度解决 */
max-height: 100000px; }
*:before, *:after { box-sizing: border-box; max-height: 1000001px; }
*, *:before, *:after { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, textarea, td { border: 0 none; font-size: inherit; color: inherit; margin: 0; padding: 0; vertical-align: baseline; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
em, strong, i { font-style: normal; }
ul, ol, li { list-style: none; }
body { font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif; line-height: 1.5; color: #333; background-color: #f2f2f2; font-size: 0.24rem; }
a { text-decoration: none; }
* html .clearfix { height: 1%; }
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; font-size: 0; }
.d-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; }
.fl { float: left; }
.fr { float: right; }
.fn-hide { display: none!important; }
/* body{margin-bottom:50rem!important;} */


/* http://www.bootstrapmb.com/item/2709/preview  动态加载三个点的动化 */
.stage { display: flex; justify-content: center; align-items: center; padding: 2rem 0; margin: 0 -5%; overflow: hidden; }
.dot-carousel { position: relative; left: -9999px; width: 10px; height: 10px; border-radius: 5px; background-color: #0f89fd; color: #0f89fd; box-shadow: 9984px 0 0 0 #0f89fd, 9999px 0 0 0 #0f89fd, 10014px 0 0 0 #0f89fd; animation: dotCarousel 1.5s infinite linear; }
 @keyframes dotCarousel {  0% {
box-shadow:9984px 0 0 -1px #0f89fd, 9999px 0 0 1px #0f89fd, 10014px 0 0 -1px #0f89fd
}
 50% {
box-shadow:10014px 0 0 -1px #0f89fd, 9984px 0 0 -1px #0f89fd, 9999px 0 0 1px #0f89fd
}
 100% {
box-shadow:9999px 0 0 1px #0f89fd, 10014px 0 0 -1px #0f89fd, 9984px 0 0 -1px #0f89fd
}
}
