@charset "utf-8";

html, body, div, h1, h2, h3, h4, h5, h6, p, span, img, input, textarea, ul, ol, li, hr{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


/* 去掉 table cell 的边距并让其边重合 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 去掉列表前的标识，li 会继承 */
ol,
ul {
    list-style: none;
}


/* 去掉图片低测默认的3像素空白缝隙 */
svg,
img {
    border: 0;
    vertical-align: middle;
}

/* 默认不显示下划线，保持页面简洁 */
ins,
a {
    text-decoration: none;
}

/* 让链接在 hover 状态下显示下划线 */
/* a:hover {
	text-decoration: underline;
} */

/* 去除 ie6 & ie7 焦点点状线 */
/* a:focus,
*:focus {
	outline: none;
} */

/* 解决高度塌陷问题 */
.bfc::before{
    content: '';
    display: table;
}
.bfc::after {
    content: "";
    display: block;
    clear: both;
}

/* flex弹性布局 */
.flex {display: flex;}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.flex-ffrw {
    display: flex;
    flex-flow: row wrap;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-ac {
    display: flex;
    align-items: center;
}

.flex-as {
    display: flex;
    align-items: flex-start;
}

.flex-aend {
    display: flex;
    align-items: flex-end;
}

.flex-ais{
    display: flex;
    align-items: stretch;
}

.flex-jc {
    display: flex;
    justify-content: center;
}

.flex-jsa {
    display: flex;
    justify-content: space-around;
}

.flex-jsb {
    display: flex;
    justify-content: space-between;
}

.flex-jse {
    display: flex;
    justify-content: space-evenly;
}

.flex-jend {
    display: flex;
    justify-content: flex-end;
}

.flex-jfs {
    display: flex;
    justify-content: flex-start
}

.flex-jac {
    display: flex;
    justify-content: center;
    align-items: center;
    /* place-items: center; */
}

.flex-jsbw {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.flex-auto{
    flex: auto;
}
.flex-none{
    flex: none;
}

.grid {
    display: grid;
}
.grid_columns_2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.grid_columns_3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.grid_columns_4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.grid_columns_5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
/* 垂直居中 */
.grid-ac-center{
    display: grid;
    align-content: center;
}


/* 背景图片铺满 */
.bg-img{
    background: no-repeat scroll center center / cover content-box content-box;
}

.row{
    white-space: nowrap;
}
/* 不换行显示省略号 */
.row1{
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}

/* 显示两行省略 */
.row2{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    word-break:break-all;
    overflow:hidden;
    text-overflow: ellipsis;
}
/* 显示三行省略 */
.row3{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    word-break:break-all;
    overflow:hidden;
    text-overflow: ellipsis;
}

/* 隐藏 */
.hidden{overflow: hidden;}
.none{display: none}
.inline{display: inline}
.block{display: block}
.inline-block{display: inline-block;vertical-align: top;}

/* 文字排版 */
.fs-8 {font-size: 8px ; }
.fs-10{font-size: 10px; }
.fs-11{font-size: 11px; }
.fs-12{font-size: 12px; }
.fs-13{font-size: 13px; }
.fs-14{font-size: 14px; }
.fs-15{font-size: 15px; }
.fs-16{font-size: 16px; }
.fs-17{font-size: 17px; }
.fs-18{font-size: 18px; }
.fs-20{font-size: 20px; }
.fs-22{font-size: 22px; }
.fs-24{font-size: 24px; }
.fs-26{font-size: 26px; }
.fs-28{font-size: 28px; }
.fs-30{font-size: 30px; }
.fs-34{font-size: 34px; }
.fs-36{font-size: 36px; }
.fs-48{font-size: 48px; }
.fs-60{font-size: 60px; }


.fw-1{font-weight: 100; }
.fw-2{font-weight: 200; }
.fw-3{font-weight: 300; }
.fw-4{font-weight: 400; }
.fw-5{font-weight: 500; }
.fw-7{font-weight: 700; }
.fw-b{font-weight: bold; }
/* 缩进两个字宽 */
.ti2{text-indent: 2em}

/* 行高 */
.lh_10{line-height: 1}
.lh_12{line-height: 1.2}
.lh_15{line-height: 1.5}
.lh_18{line-height: 1.8}
.lh_20{line-height: 2}

.opacity_9{opacity: 0.9}
.opacity_8{opacity: 0.8}
.opacity_5{opacity: 0.5}
.opacity_3{opacity: 0.3}

.tdu{text-decoration: underline}
.tdn{text-decoration: none}

/* 定位 */
.text-left{text-align: left;}
.text-center{text-align: center;}
.text-right{text-align: right;}

/* 浮动 */
.fl{float: left;}
.fr{float: right;}
.cb{clear: both;}
.cl{clear: left;}
.cr{clear: right;}

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

/* .clearfix{display: inline-block;}*html
.clearfix{height: 1%}
.Clearfix{display: block;} */
.vm{vertical-align: middle;}
/* 定位 */
.relative{position: relative;}
.absolute{position: absolute;}
.fixed{position: fixed;}
.zoom{zoom:1;}


/* 圆角 */
.yj-2 {border-radius: 2px}
.yj-4 {border-radius: 4px}
.yj-5 {border-radius: 5px}
.yj-6 {border-radius: 6px}
.yj-8 {border-radius: 8px}
.yj-10{border-radius: 10px}
.yj-12{border-radius: 12px}
.yj-16{border-radius: 16px}
.yj-18{border-radius: 18px}
.yj-20{border-radius: 20px}
.yj-26{border-radius: 26px}
.yj-34{border-radius: 34px}
.yj-100{border-radius: 100px}
.yj_50{border-radius: 50%}
.yj-max{border-radius: 500px}

/* 旋转 */
.rotate30 {transform: rotate(30deg)}
.rotate45 {transform: rotate(45deg)}
.rotate90 {transform: rotate(90deg)}
.rotate180 {transform: rotate(180deg)}
.rotate270 {transform: rotate(-90deg)}
.rotate315 {transform: rotate(-45deg)}

/*长度高度*/
.size-16, .w-16{width: 16px;}
.size-20, .w-20{width: 20px;}
.size-24, .w-24{width: 24px;}
.size-32, .w-32{width: 32px;}
.size-36,	.w-36{width: 36px;}
.size-40,	.w-40{width: 40px;}
.size-48,	.w-48{width: 48px;}
.w-60{width: 60px;}
.size-64, .w-64{width: 64px;}
.size-80, .w-80{width: 80px;}
.size-96, .w-96{width: 96px;}
.size-144, .w-144 {width: 144px;}
.size-160, .w-160 {width: 160px;}
.w-200 {width: 200px;}
.w-220 {width: 220px;}
.wh-max, .w-max {width: 100%;}
.w_20 {width: 20%;}


.h-10{height: 10px;}
.h-16{height: 16px;}
.h-20{height: 20px;}
.size-24, .h-24{height: 24px;}
.h-28{height: 28px;}
.h-30{height: 30px;}
.size-32, .h-32{height: 32px;}
.size-36, .h-36{height: 36px;}
.size-40, .h-40{height: 40px;}
.h-42{height: 42px;}
.h-44{height: 44px;}
.size-48, .h-48{height: 48px;}
.h-50{height: 50px;}
.size-64, .h-64{height: 64px}
.size-80, .h-80{height: 80px}
.h-88{height: 88px}
.size-96, .h-96{height: 96px}
.size-144, .h-144 {height: 144px}
.size-160, .h-160 {height: 160px;}

.h-100{height: 100px}
.h-200{height: 200px}
.wh-max, .h-max{height: 100%}
.wh-max-absolute {
    position: absolute;
    inset: 0;
}

/* 边距 */
.m-auto{margin: auto;}
.mx-auto{margin-left: auto;margin-right: auto;}
.my-auto{margin-top: auto;margin-bottom: auto;}
.ml-auto{margin-left:auto;}
.mt-auto{margin-top:auto;}
.ml-4,  .mx-4,  .m-4  {margin-left: 4px;}
.ml-8,  .mx-8,  .m-8  {margin-left: 8px;}
.ml-10, .mx-10, .m-10 {margin-left: 10px;}
.ml-12, .mx-12, .m-12 {margin-left: 12px;}
.ml-15, .mx-15, .m-15 {margin-left: 15px;}
.ml-16, .mx-16, .m-16 {margin-left: 16px;}
.ml-20, .mx-20, .m-20 {margin-left: 20px;}
.ml-24, .mx-24, .m-24 {margin-left: 24px;}
.ml-25, .mx-25, .m-25 {margin-left: 25px;}
.ml-28, .mx-28, .m-28 {margin-left: 28px;}
.ml-30, .mx-30, .m-30 {margin-left: 30px;}
.ml-32, .mx-32, .m-32 {margin-left: 32px;}
.ml-40, .mx-40, .m-40 {margin-left: 40px;}
.ml-50, .mx-50, .m-50 {margin-left: 50px;}
.ml-64, .mx-64, .m-64 {margin-left: 64px;}

.mr-4,  .mx-4,  .m-4  {margin-right: 4px;}
.mr-8,  .mx-8,  .m-8  {margin-right: 8px;}
.mr-10, .mx-10, .m-10 {margin-right: 10px;}
.mr-12, .mx-12, .m-12 {margin-right: 12px;}
.mr-15, .mx-15, .m-15 {margin-right: 15px;}
.mr-16, .mx-16, .m-16 {margin-right: 16px;}
.mr-20, .mx-20, .m-20 {margin-right: 20px;}
.mr-24, .mx-24, .m-24 {margin-right: 24px;}
.mr-25, .mx-25, .m-25 {margin-right: 25px;}
.mr-28, .mx-28, .m-28 {margin-right: 28px;}

.mr-30, .mx-30, .m-30 {margin-right: 30px;}
.mr-32, .mx-32, .m-32 {margin-right: 32px;}
.mr-40, .mx-40, .m-40 {margin-right: 40px;}
.mr-50, .mx-50, .m-50 {margin-right: 50px;}
.mr-64, .mx-64, .m-64 {margin-right: 64px;}

.mt-4,  .my-4,  .m-4  {margin-top: 4px;}
.mt-6,  .my-6,  .m-6  {margin-top: 6px;}
.mt-8,  .my-8,  .m-8  {margin-top: 8px;}
.mt-10, .my-10, .m-10 {margin-top: 10px;}
.mt-12, .my-12, .m-12 {margin-top: 12px;}
.mt-15, .my-15, .m-15 {margin-top: 15px;}
.mt-16, .my-16, .m-16 {margin-top: 16px;}
.mt-20, .my-20, .m-20 {margin-top: 20px;}
.mt-24, .my-24, .m-24 {margin-top: 24px;}
.mt-25, .my-25, .m-25 {margin-top: 25px;}
.mt-28, .my-28, .m-28 {margin-top: 28px;}
.mt-30, .my-30, .m-30 {margin-top: 30px;}
.mt-32, .my-32, .m-32 {margin-top: 32px;}
.mt-42, .my-42, .m-42 {margin-top: 42px;}
.mt-48, .my-48, .m-48 {margin-top: 48px;}
.mt-50, .my-50, .m-50 {margin-top: 50px;}
.mt-64, .my-64, .m-64 {margin-top: 64px;}

.mb-4,  .my-4,  .m-4  {margin-bottom: 4px;}
.mb-8,  .my-8,  .m-8  {margin-bottom: 8px;}
.mb-10, .my-10, .m-10 {margin-bottom: 10px;}
.mb-12, .my-12, .m-12 {margin-bottom: 12px;}
.mb-15, .my-15, .m-15 {margin-bottom: 15px;}
.mb-16, .my-16, .m-16 {margin-bottom: 16px;}
.mb-20, .my-20, .m-20 {margin-bottom: 20px;}
.mb-24, .my-24, .m-24 {margin-bottom: 24px;}
.mb-25, .my-25, .m-25 {margin-bottom: 25px;}
.mb-28, .my-28, .m-28 {margin-bottom: 28px;}
.mb-30, .my-30, .m-30 {margin-bottom: 30px;}
.mb-32, .my-32, .m-32 {margin-bottom: 32px;}
.mb-48, .my-48, .m-48 {margin-bottom: 48px;}
.mb-64, .my-64, .m-64 {margin-bottom: 64px;}

.pl-4,  .px-4,  .p-4 {padding-left:4px;}
.pl-8,  .px-8,  .p-8 {padding-left:8px;}
.pl-10, .px-10, .p-10{padding-left:10px;}
.pl-12, .px-12, .p-12{padding-left:12px;}
.pl-15, .px-15, .p-15{padding-left:15px;}
.pl-16, .px-16, .p-16{padding-left:16px;}
.pl-20, .px-20, .p-20{padding-left:20px;}
.pl-25, .px-25, .p-25{padding-left:25px;}
.pl-30, .px-30, .p-30{padding-left:30px;}
.pl-32, .px-32, .p-32{padding-left:32px;}
.pl-48, .px-48, .p-48{padding-left:48px;}

.pr-4,  .px-4,  .p-4 {padding-right:4px;}
.pr-8,  .px-8,  .p-8 {padding-right:8px;}
.pr-10, .px-10, .p-10{padding-right:10px;}
.pr-12, .px-12, .p-12{padding-right:12px;}
.pr-15, .px-15, .p-15{padding-right:15px;}
.pr-16, .px-16, .p-16{padding-right:16px;}
.pr-20, .px-20, .p-20{padding-right:20px;}
.pr-25, .px-25, .p-25{padding-right:25px;}
.pr-30, .px-30, .p-30{padding-right:30px;}
.pr-32, .px-32, .p-32{padding-right:32px;}
.pr-48, .px-48, .p-48{padding-right:48px;}

.pt-4,  .py-4,  .p-4 {padding-top:4px;}
.pt-8,  .py-8,  .p-8 {padding-top:8px;}
.pt-10, .py-10, .p-10{padding-top:10px;}
.pt-12, .py-12, .p-12{padding-top:12px;}
.pt-15, .py-15, .p-15{padding-top:15px;}
.pt-16, .py-16, .p-16{padding-top:16px;}
.pt-20, .py-20, .p-20{padding-top:20px;}
.pt-25, .py-25, .p-25{padding-top:25px;}
.pt-28, .py-28, .p-28{padding-top:28px;}
.pt-30, .py-30, .p-30{padding-top:30px;}
.pt-32, .py-32, .p-32{padding-top:32px;}
.pt-48, .py-48, .p-48{padding-top:48px;}

.pb-4,  .py-4,  .p-4 {padding-bottom:4px;}
.pb-8,  .py-8,  .p-8 {padding-bottom:8px;}
.pb-10, .py-10, .p-10{padding-bottom:10px;}
.pb-12, .py-12, .p-12{padding-bottom:12px;}
.pb-15, .py-15, .p-15{padding-bottom:15px;}
.pb-16, .py-16, .p-16{padding-bottom:16px;}
.pb-20, .py-20, .p-20{padding-bottom:20px;}
.pb-25, .py-25, .p-25{padding-bottom:25px;}
.pb-28, .py-28, .p-28{padding-bottom:28px;}
.pb-30, .py-30, .p-30{padding-bottom:30px;}
.pb-32, .py-32, .p-32{padding-bottom:32px;}
.pb-48, .py-48, .p-48{padding-bottom:48px;}