html,
body {
    font-size: 100px;
}

/* 规定 1rem = 100px; 
 * 我们就可以根据这个比例来设计制作出一套css样式表布局这个页面，这个页面在宽度为750px时就完美显示了。例如：
*/
header {
    width        : 100%; // 宽度还可以结合百分百来使用
    height       : .98rem; // 高度为98px
    border-radius: .49rem; // 圆角为49px
    font-size    : .24rem; // 字体为24px
}

@media only screen and (max-width:768px),
only screen and (max-device-width:768px) {

    body,
    html {
        font-size: 104px;
    }
}

@media only screen and (max-width:750px),
only screen and (max-device-width:750px) {

    body,
    html {
        font-size: 100px;
    }
}

@media only screen and (max-width:640px),
only screen and (max-device-width:640px) {

    body,
    html {
        font-size: 85.33px;
    }
}

@media only screen and (max-width:600px),
only screen and (max-device-width:600px) {

    body,
    html {
        font-size: 80px;
    }
}

@media only screen and (max-width:540px),
only screen and (max-device-width:540px) {

    body,
    html {
        font-size: 72px;
    }
}

@media only screen and (max-width:480px),
only screen and (max-device-width:480px) {

    body,
    html {
        font-size: 64px;
    }
}

@media only screen and (max-width:414px),
only screen and (max-device-width:414px) {

    body,
    html {
        font-size: 55.2px;
    }
}

@media only screen and (max-width:412px),
only screen and (max-device-width:412px) {

    body,
    html {
        font-size: 54.8px;
    }
}

@media only screen and (max-width:400px),
only screen and (max-device-width:400px) {

    body,
    html {
        font-size: 53.33px;
    }
}

@media only screen and (max-width:375px),
only screen and (max-device-width:375px) {

    body,
    html {
        font-size: 50px;
    }
}

@media only screen and (max-width:360px),
only screen and (max-device-width:360px) {

    body,
    html {
        font-size: 47.8px;
    }
}

@media only screen and (max-width:320px),
only screen and (max-device-width:320px) {

    body,
    html {
        font-size: 42.4px;
    }
}

@charset "utf-8";

/* 禁用iPhone中Safari的字号自动调整 */
html {
    -webkit-text-size-adjust  : 100%;
    -ms-text-size-adjust      : 100%;
    /* 解决IOS默认滑动很卡的情况 */
    -webkit-overflow-scrolling: touch;
}

/* 禁止缩放表单 */
input[type="submit"],
input[type="reset"],
input[type="button"],
input {
    resize: none;
    border: none;
}

/* 取消链接高亮  */
body,
div,
ul,
li,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
select,
p,
dl,
dt,
dd,
a,
img,
button,
form,
table,
th,
tr,
td,
tbody,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 设置HTML5元素为块 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

/* 图片自适应 */
img {
    width                 : 100%;
    height                : auto;
    width                 : auto\9;
    /* ie8 */
    display               : inline-block;
    -ms-interpolation-mode: bicubic;
    /*为了照顾ie图片缩放失真*/
}

/* 初始化 */
body,
div,
ul,
li,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
select,
p,
dl,
dt,
dd,
a,
img,
button,
form,
table,
th,
tr,
td,
tbody,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    margin : 0;
    padding: 0;
}

body {
    font            : 12px/1.5 'Microsoft YaHei', '宋体', Tahoma, Arial, sans-serif;
    color           : #555;
    background-color: #FFFFFF;
}

em,
i {
    font-style: normal;
}

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

strong {
    font-weight: normal;
}

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

.clearfix {
    zoom: 1;
}

a {
    text-decoration: none;
    color          : #969696;
    font-family    : 'Microsoft YaHei', Tahoma, Arial, sans-serif;
}

a:hover {
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size  : 100%;
    font-family: 'Microsoft YaHei';
}

img {
    border: none;
}

input {
    font-family: 'Microsoft YaHei';
}

/*单行溢出*/
.one-txt-cut {
    overflow     : hidden;
    white-space  : nowrap;
    text-overflow: ellipsis;
}

/*多行溢出 手机端使用*/
.txt-cut {
    overflow             : hidden;
    text-overflow        : ellipsis;
    display              : -webkit-box;
    /* -webkit-line-clamp: 2; */
    -webkit-box-orient   : vertical;
}

/* 移动端点击a链接出现蓝色背景问题解决 */
a:link,
a:active,
a:visited,
a:hover {
    background                 : none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

.w50 {
    width: 50%;
}

.w25 {
    width: 25%;
}

.w20 {
    width: 20%;
}

.w33 {
    width: 33.333333%;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.db {
    display: block !important;
}

.dn {
    display: none;
}

.content-view {
    padding-bottom: 60px;
}

.banner img {
    width : 100%;
    height: 1.1rem;
}

.content-item {}

.content-title {
    font-size  : 0.14rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color      : #1A1A22;
    opacity    : 1;
    text-align : center;
    margin     : .2rem auto .1rem;
}

.content-desc {
    width      : 92%;
    font-size  : 0.12rem;
    font-family: MicrosoftYaHei;
    color      : #1A1A22;
    opacity    : 1;
    margin     : 0 auto;
}

.list-group {
    display              : grid;
    grid-template-columns: 50% 50%;
    grid-template-rows   : 1.5rem 1.5rem;
    grid-gap             : 0.05rem 0.05rem;
}

.list-group .list-item {
    background   : linear-gradient(315deg, #E5EFFF 0%, #F3F6F9 100%);
    border-radius: 4px;
    text-align   : center;
    padding-bottom: .1rem;
}

.list-item-icon {
    padding-top: 10px;
}

.list-group .list-item .list-item-icon img {
    width: 0.42rem;
}

.list-item-name {
    padding: 0.1rem 0.1rem 0;
}