@charset "utf-8";
html{
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    /* 定义滚动时回弹效果 */
    -webkit-overflow-scrolling: touch; 
}
body {
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei","Helvetica";
    background-color: #fff;
    color: #333;
    font-size: 14px;
}
p,ul,ol,li,dl,dd,p,h1,h2,h3,h4,h5,h6,button,input,select,textarea,fieldset {
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6 { font-weight: normal }

ul,ol,li {
    list-style-type: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

*:link, *:visited, *:hover, *:active, *:focus { text-decoration: none;}
em, i { font-style: normal;}

/* Hevitica  字体 */
.He{
    font-family: "Hevitica";
}

:not(input) { 
    -webkit-tap-highlight-color: rgba(0,0,0,0);  /* 清除 移动端 点击时高亮 */
    -webkit-touch-callout: none; 
}

textarea{
    font-family: "Microsoft YaHei","Helvetica";
    resize: none;
}
select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    resize: none;
}
input,textarea,button{
    outline: none;
}
input::-webkit-input-placeholder{
    color: #999;
}
input {
  font-family: "Arial", "Microsoft YaHei", "sans-serif";
}
/*搜索框*/
input[type="search"]::-webkit-search-cancel-button, 
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/*自动填上 会出现背景色*/
input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    -webkit-text-fill-color: #333;
}

/* 多尺寸 设定rem   公式750 => 375 ,750的100份  7.5 ，  375/7.5 = 50 */
/*   100vw / 750*100% = 13.33333% */
/*注意：  换算方法  ———— 1rem = 50px;   所以：15px  => 0.3rem;  */
@media screen and (max-width: 320px) {
    html {
        font-size:42.667px;
    }
}
@media screen and (min-width: 321px) and (max-width:360px) {
    html {
        font-size:48px;
    }
}
@media screen and (min-width: 361px) and (max-width:375px) {
    html {
        font-size:50px;
    }
}
@media screen and (min-width: 376px) and (max-width:393px) {
    html {
        font-size:52.4px;
    }
}
@media screen and (min-width: 394px) and (max-width:412px) {
    html {
        font-size:54.93px;
    }
}
@media screen and (min-width: 413px) and (max-width:414px) {
    html {
        font-size:55.2px;
    }
}
@media screen and (min-width: 415px) {
    html {
        font-size: 56px;
    }
}

/* 容器限定 */
@media (min-width: 768px){
    .container {
        max-width: 750px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
    .container-fluid {
        max-width: 750px;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 376px) and (max-width: 414px) {
    .container {
        max-width: 414px;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: auto;
        margin-right: auto;
    }
    .container-fluid {
        max-width: 414px;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 375px) {
    .container {
        max-width: 375px;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: auto;
        margin-right: auto;
    }
    .container-fluid {
        max-width: 375px;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 360px) {
    .container {
        max-width: 360px;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: auto;
        margin-right: auto;
    }
    .container-fluid {
        max-width: 360px;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 320px) {
    .container {
        max-width: 320px;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: auto;
        margin-right: auto;
    }
    .container-fluid {
        max-width: 320px;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
    }
}