html,
body {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}

body {
    padding: 0;
    margin: 0;
    font-family: "微软雅黑", "microsoft yahei";
    position: relative;
    color: #424242;
    font-size: .16rem;
}

body * {
    outline: none;
}

a {
    text-decoration: none;
    margin: 0;
    padding: 0;
    color: #424242;
    display: inline-block;
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    -ms-transition: all .3s linear;
    outline: none;
}

ul,
li,dl,dt {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}

img {
    border: 0;
}

input,
button,
select,
textarea {
    font-family: "Microsoft YaHei UI", "Helvetica", sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    vertical-align: middle;
    -webkit-user-select: auto;
    border: 0;
    border-radius: 0;
}

.pClear {
    clear: both;
}

.pClear::after {
    content: '';
    display: block;
    clear: both;
}

.mainWidth {
    width: 12rem;
    margin: 0 auto;
    position: relative;
    background-color: #ccc;
    height: 4rem;
    font-size: 18px;
    font-size: .18rem;
}

html,
body {
    margin: 0;
    padding: 0;
}

/****  响应式 ****/
html {
    font-size: 100px;
}

/****  
(1920 - 1200) / 2 = 360
1920 - 360 = 1560
@media 屏幕宽度初始值设为1553 每个除以 1560
****/

@media screen and (max-width: 1553px) {
    html {
        font-size: 99.55128205128205px
    }
}

@media screen and (max-width: 1543px) {
    html {
        font-size: 98.91025641025641px
    }
}

@media screen and (max-width: 1533px) {
    html {
        font-size: 98.26923076923077px
    }
}

@media screen and (max-width: 1523px) {
    html {
        font-size: 97.62820512820513px
    }
}

@media screen and (max-width: 1513px) {
    html {
        font-size: 96.98717948717949px
    }
}

@media screen and (max-width: 1503px) {
    html {
        font-size: 96.34615384615385px
    }
}

@media screen and (max-width: 1493px) {
    html {
        font-size: px
    }
}

@media screen and (max-width: 1483px) {
    html {
        font-size: 89.33734939759036px
    }
}

@media screen and (max-width: 1473px) {
    html {
        font-size: 88.73493975903614px
    }
}

@media screen and (max-width: 1463px) {
    html {
        font-size: 88.13253012048193px
    }
}

@media screen and (max-width: 1453px) {
    html {
        font-size: 87.53012048192771px
    }
}

@media screen and (max-width: 1443px) {
    html {
        font-size: 86.92771084337349px
    }
}

@media screen and (max-width: 1433px) {
    html {
        font-size: 86.32530120481928px
    }
}

@media screen and (max-width: 1423px) {
    html {
        font-size: 85.72289156626506px
    }
}

@media screen and (max-width: 1413px) {
    html {
        font-size: 85.12048192771084px
    }
}

@media screen and (max-width: 1403px) {
    html {
        font-size: 84.51807228915663px;
    }
}

@media screen and (max-width: 1393px) {
    html {
        font-size: 83.91566265060241px
    }
}

@media screen and (max-width: 1383px) {
    html {
        font-size: 83.31325301204819px
    }
}

@media screen and (max-width: 1373px) {
    html {
        font-size: 82.7108433734939px
    }
}

@media screen and (max-width: 1363px) {
    html {
        font-size: 82.10843373493976px
    }
}

@media screen and (max-width: 1353px) {
    html {
        font-size: 81.5060240963855px
    }
}

@media screen and (max-width: 1343px) {
    html {
        font-size: 80.9036144578313px
    }
}

@media screen and (max-width: 1333px) {
    html {
        font-size: 80.3012048192771px
    }
}

@media screen and (max-width: 1323px) {
    html {
        font-size: 79.6987951807229px
    }
}

@media screen and (max-width: 1313px) {
    html {
        font-size: 79.0963855421687px
    }
}

@media screen and (max-width: 1303px) {
    html {
        font-size: 78.4939759036145px
    }
}

@media screen and (max-width: 1293px) {
    html {
        font-size: 77.8915662650602px
    }
}

@media screen and (max-width: 1283px) {
    html {
        font-size: 77.2891566265060px
    }
}

@media screen and (max-width: 1273px) {
    html {
        font-size: 76.6867469879518px
    }
}

@media screen and (max-width: 1263px) {
    html {
        font-size: 76.0843373493976px
    }
}

@media screen and (max-width: 1253px) {
    html {
        font-size: 75.4819277108434px
    }
}

@media screen and (max-width: 1243px) {
    html {
        font-size: 74.8795180722891px
    }
}

@media screen and (max-width: 1233px) {
    html {
        font-size: 74.2771084337349px
    }
}

@media screen and (max-width: 1223px) {
    html {
        font-size: 73.6746987951807px
    }
}

@media screen and (max-width: 1213px) {
    html {
        font-size: 73.0722891566265px
    }
}

@media screen and (max-width: 1203px) {
    html {
        font-size: 72.4698795180723px
    }
}

@media screen and (max-width: 1193px) {
    html {
        font-size: 71.8674698795181px
    }
}

@media screen and (max-width: 1183px) {
    html {
        font-size: 71.2650602409638px
    }
}

@media screen and (max-width: 1173px) {
    html {
        font-size: 70.6626506024096px
    }
}

@media screen and (max-width: 1163px) {
    html {
        font-size: 70.0602409638554px
    }
}

@media screen and (max-width: 1153px) {
    html {
        font-size: 69.4578313253012px
    }
}

@media screen and (max-width: 1143px) {
    html {
        font-size: 68.8554216867470px
    }
}

@media screen and (max-width: 1133px) {
    html {
        font-size: 68.2530120481928px
    }
}

@media screen and (max-width: 1123px) {
    html {
        font-size: 67.6506024096386px
    }
}

@media screen and (max-width: 1113px) {
    html {
        font-size: 67.0481927710843px
    }
}

@media screen and (max-width: 1103px) {
    html {
        font-size: 66.4457831325301px
    }
}

@media screen and (max-width: 1093px) {
    html {
        font-size: 65.8433734939759px
    }
}

@media screen and (max-width: 1083px) {
    html {
        font-size: 65.2409638554217px
    }
}

@media screen and (max-width: 1073px) {
    html {
        font-size: 64.6385542168675px
    }
}

@media screen and (max-width: 1063px) {
    html {
        font-size: 64.0361445783132px
    }
}

@media screen and (max-width: 1053px) {
    html {
        font-size: 63.4337349397590px
    }
}

@media screen and (max-width: 1043px) {
    html {
        font-size: 62.8313253012048px
    }
}

@media screen and (max-width: 1033px) {
    html {
        font-size: 62.2289156626506px
    }
}

@media screen and (max-width: 1023px) {
    html {
        font-size: 61.6265060240964px
    }
}

@media screen and (max-width: 1013px) {
    html {
        font-size: 61.0240963855422px
    }
}

@media screen and (max-width: 1003px) {
    html {
        font-size: 60.4216867469879px
    }
}

@media screen and (max-width: 993px) {
    html {
        font-size: 59.8192771084337px
    }
}

@media screen and (max-width: 983px) {
    html {
        font-size: 59.2168674698795px
    }
}

@media screen and (max-width: 973px) {
    html {
        font-size: 58.6144578313253px
    }
}

@media screen and (max-width: 963px) {
    html {
        font-size: 58.0120481927711px
    }
}

@media screen and (max-width: 953px) {
    html {
        font-size: 57.4096385542169px
    }
}

@media screen and (max-width: 943px) {
    html {
        font-size: 56.8072289156626px
    }
}

@media screen and (max-width: 933px) {
    html {
        font-size: 56.2048192771084px
    }
}

@media screen and (max-width: 923px) {
    html {
        font-size: 55.6024096385542px
    }
}

@media screen and (max-width: 913px) {
    html {
        font-size: 55px
    }
}

@media screen and (max-width: 903px) {
    html {
        font-size: 54.3975903614458px
    }
}

@media screen and (max-width: 893px) {
    html {
        font-size: 53.7951807228916px
    }
}

@media screen and (max-width: 883px) {
    html {
        font-size: 53.1927710843373px
    }
}

@media screen and (max-width: 873px) {
    html {
        font-size: 52.5903614457831px
    }
}

@media screen and (max-width: 863px) {
    html {
        font-size: 51.9879518072289px
    }
}

@media screen and (max-width: 853px) {
    html {
        font-size: 51.3855421686747px
    }
}

@media screen and (max-width: 843px) {
    html {
        font-size: 50.7831325301205px
    }
}

@media screen and (max-width: 833px) {
    html {
        font-size: 50.1807228915663px
    }
}

@media screen and (max-width: 823px) {
    html {
        font-size: 49.5783132530120px
    }
}

@media screen and (max-width: 813px) {
    html {
        font-size: 48.9759036144578px
    }
}

@media screen and (max-width: 803px) {
    html {
        font-size: 48.3734939759036px
    }
}

@media screen and (max-width: 793px) {
    html {
        font-size: 47.7710843373494px
    }
}

@media screen and (max-width: 783px) {
    html {
        font-size: 47.1686746987952px
    }
}

@media screen and (max-width: 773px) {
    html {
        font-size: 46.5662650602410px
    }
}

@media screen and (max-width: 768px) {
    html {
        font-size: 80px;
    }
    
    .mainWidth {
        width: calc(100% - 20px);
        padding: 0 10px;
    }
}

@media screen and (max-width: 320px) {
    html {
        font-size: 65px;
    }
}