*{ box-sizing: border-box; margin: 0; padding: 0; } 
body {font-size: 16px; font-family: 'Arial', sans-serif; line-height: 1.5; }
ul, ol { list-style: none; }
input, button, select { border: none; outline: none; }
img { max-width: 100%; }
img.nvyoupic{max-height:auto;}
.clear{ clear: both;}
.yin{ display: none;}
/* 定义全局变量 */
:root {
    --hong: #ff5722;
    --cheng: #ffb800;
    --lv: #16baaa;
    --lan: #1e9fff;
    --zi: #a233c6;
    --shen: #2f363c;  
} 
/*颜色*/
.hong{ color: var(--hong);}
.cheng{ color: var(--cheng);}
.lv{ color: var(--lv);}
.lan{ color: var(--lan);}
.zi{ color: var(--zi);}
.shen{ color: var(--shen); }
.bghong{ background-color: var(--hong);}
.bgcheng{ background-color: var(--cheng);}
.bglv{ background-color: var(--lv);}
.bglan{ background-color: var(--lan);}
.bgzi{ background-color: var(--zi);}
.bgshen{ background-color: var(--shen); } 

/*flex*/
.x { display: flex;  }
.x.wrap{flex-wrap: wrap;}/* 空间不足是否换行*/
.gap5 {gap: 5px;}
.gap10 {gap: 10px;}
.x.between { justify-content: space-between;}
.x.around { justify-content: space-around;}
.x.evenly { justify-content: space-evenly;}
.x.l { justify-content: flex-start;}
.x.c { justify-content: center;}
.x.r { justify-content: flex-end;}
.x.lr > * { flex-grow: 1;}
.x.t { align-items: flex-start;}
.x.m { align-items: center;}
.x.b { align-items: flex-end;}
.x.tb { align-items: stretch;}
.x > .tb { height: 100%;}
.x > .lr { flex-grow: 1;}
.x > .st { align-self: flex-start;}
.x > .sm { align-self: center;}
.x > .sb { align-self: flex-end;}
.y { display: flex; flex-direction: column;} 
.y.between { justify-content: space-between;}
.y.around { justify-content: space-around;}
.y.evenly { justify-content: space-evenly;}
.y.l { align-items: flex-start;}
.y.c { align-items: center;}
.y.r { align-items: flex-end;}
.y.lr { align-items: stretch;}
.y.t { justify-content: flex-start;}
.y.m { justify-content: center;}
.y.b { justify-content: flex-end;}
.y.tb > * { flex-grow: 1;}
.y > .tb { flex-grow: 1;}
.y > .lr { width: 100%;}
.y > .sl { align-self: flex-start;}
.y > .sc { align-self: center;}
.y > .sr { align-self: flex-end;}
/*栅格*/
.row::after{content: ""; display:block; clear: both;}  
.row > *{ float: left;}
.gap8 { margin-left: -4px; margin-right: -4px;}  .gap8  > *{ padding-left: 4px; padding-right: 4px; } 
.gap10 { margin-left: -5px; margin-right: -5px;} .gap10 > *{ padding-left: 5px; padding-right: 5px; }
/* 手机 */
@media (max-width: 768px) {
    .s1-1{ width: 8.33333333%;}
    .s1-2{ width: 16.66666666%;}
    .s1-3{ width: 25%;}
    .s1-4{ width: 33.33333333%;}
    .s1-5{ width: 41.66666666%;}
    .s1-6{ width: 50%;}
    .s1-7{ width: 58.33333333%;}
    .s1-8{ width: 66.66666666%;}
    .s1-9{ width: 75%;}
    .s1-10{ width: 83.33333333%;}
    .s1-11{ width: 91.66666666%;}
    .s1-12{ width: 100%;}
}  
/* 平板 */
@media (min-width: 769px) and (max-width: 1024px) {
    .s2-1{ width: 8.33333333%;}
    .s2-2{ width: 16.66666666%;}
    .s2-3{ width: 25%;}
    .s2-4{ width: 33.33333333%;}
    .s2-5{ width: 41.66666666%;}
    .s2-6{ width: 50%;}
    .s2-7{ width: 58.33333333%;}
    .s2-8{ width: 66.66666666%;}
    .s2-9{ width: 75%;}
    .s2-10{ width: 83.33333333%;}
    .s2-11{ width: 91.66666666%;}
    .s2-12{ width: 100%;}
}
/* 电脑*/
@media (min-width: 1025px) {
    .s3-1{ width: 8.33333333%;}
    .s3-2{ width: 16.66666666%;}
    .s3-3{ width: 25%;}
    .s3-4{ width: 33.33333333%;}
    .s3-5{ width: 41.66666666%;}
    .s3-6{ width: 50%;}
    .s3-7{ width: 58.33333333%;}
    .s3-8{ width: 66.66666666%;}
    .s3-9{ width: 75%;}
    .s3-10{ width: 83.33333333%;}
    .s3-11{ width: 91.66666666%;}
    .s3-12{ width: 100%;}
}