@charset "utf-8";
/* 你自己的样式 */

/* 边距 */
.mt-0,.mtb-0 {margin-top: 0}
.mt-5,.mtb-5 {margin-top: 5px}
.mt-10,.mtb-10 {margin-top: 10px}
.mt-15,.mtb-15 {margin-top: 15px}
.mt-20,.mtb-20 {margin-top: 20px}
.mt-25,.mtb-25 {margin-top: 25px}
.mt-30,.mtb-30 {margin-top: 30px}
.mt-35,.mtb-35 {margin-top: 35px}
.mt-40,.mtb-40 {margin-top: 40px}
.mt-45,.mtb-45 {margin-top: 45px}
.mt-50,.mtb-50 {margin-top: 50px}

.mb-0,.mtb-0 {margin-bottom: 0}
.mb-5,.mtb-5 {margin-bottom: 5px}
.mb-10,.mtb-10 {margin-bottom: 10px}
.mb-15,.mtb-15 {margin-bottom: 15px}
.mb-20,.mtb-20 {margin-bottom: 20px}
.mb-25,.mtb-25 {margin-bottom: 25px}
.mb-30,.mtb-30 {margin-bottom: 30px}
.mb-35,.mtb-35 {margin-bottom: 35px}
.mb-40,.mtb-40 {margin-bottom: 40px}
.mb-45,.mtb-45 {margin-bottom: 45px}
.mb-50,.mtb-50 {margin-bottom: 50px}

.ml-0,.mlr-0 {margin-left: 0}
.ml-5,.mlr-5 {margin-left: 5px}
.ml-10,.mlr-10 {margin-left: 10px}
.ml-15,.mlr-15 {margin-left: 15px}
.ml-20,.mlr-20 {margin-left: 20px}
.ml-25,.mlr-25 {margin-left: 25px}
.ml-30,.mlr-30 {margin-left: 30px}
.ml-35,.mlr-35 {margin-left: 35px}
.ml-40,.mlr-40 {margin-left: 40px}
.ml-45,.mlr-45 {margin-left: 45px}
.ml-50,.mlr-50 {margin-left: 50px}

.mr-0,.mlr-0 {	margin-right: 0}
.mr-5,.mlr-5 {	margin-right: 5px}
.mr-10,.mlr-10 {margin-right: 10px}
.mr-15,.mlr-15 {margin-right: 15px}
.mr-20,.mlr-20 {margin-right: 20px}
.mr-25,.mlr-25 {margin-right: 25px}
.mr-30,.mlr-30 {margin-right: 30px}
.mr-35,.mlr-35 {margin-right: 35px}
.mr-40,.mlr-40 {margin-right: 40px}
.mr-50,.mlr-50 {margin-right: 50px}
.mg-0 {margin: 0}
.mg-5 {margin: 5px}
.mg-10 {margin: 10px}
.mg-15 {margin: 15px}
.mg-20 {margin: 20px}
.mg-25 {margin: 25px}
.mg-30 {margin: 30px}
.mg-35 {margin: 35px}
.mg-40 {margin: 40px}
.mg-50 {margin: 50px}

.pt-5,.ptb-5 {	padding-top: 5px}
.pt-10,.ptb-10 {padding-top: 10px}
.pt-15,.ptb-15 {padding-top: 15px}
.pt-20,.ptb-20 {padding-top: 20px}
.pt-25,.ptb-25 {padding-top: 25px}
.pt-30,.ptb-30 {padding-top: 30px}
.pt-40,.ptb-40 {padding-top: 40px}
.pt-50,.ptb-50 {padding-top: 50px}
.pb-5,.ptb-5 {padding-bottom: 5px}
.pb-10,.ptb-10 {padding-bottom: 10px}
.pb-15,.ptb-15 {padding-bottom: 15px}
.pb-20,.ptb-20 {padding-bottom: 20px}
.pb-25,.ptb-25 {padding-bottom: 25px}
.pb-30,.ptb-30 {padding-bottom: 30px}
.pb-40,.ptb-40 {padding-bottom: 40px}
.pb-50,.ptb-50 {padding-bottom: 50px}
.pl-5,.plr-5 {padding-left: 5px}
.pl-10,.plr-10 {padding-left: 10px}
.pl-15,.plr-15 {padding-left: 15px}
.pl-20,.plr-20 {padding-left: 20px}
.pl-30,.plr-30 {padding-left: 30px}
.pl-40,.plr-40 {padding-left: 40px}
.pl-50,.plr-50 {padding-left: 50px}
.pr-5,.plr-5 {padding-right: 5px}
.pr-10,.plr-10 {padding-right: 10px}
.pr-15,.plr-15 {padding-right: 15px}
.pr-20,.plr-20 {padding-right: 20px}
.pr-30,.plr-30 {padding-right: 30px}
.pr-40,.plr-40 {padding-right: 40px}
.pr-50,.plr-50 {padding-right: 50px}
.pd-5 {padding: 5px}
.pd-10 {padding: 10px}
.pd-15 {padding: 15px}
.pd-20 {padding: 20px}
.pd-25 {padding: 25px}
.pd-30 {padding: 30px}
.pd-35 {padding: 35px}
.pd-40 {padding: 40px}
.pd-50 {padding: 50px}

/* ----- flex 布局 ----- */
.d-f{display: flex}
.f-1{flex:1}
.f-2{flex:2}
.f-3{flex:3}
.f-4{flex:4}
.f-5{flex:5}
.f-6{flex:6}

/* flex-direction 属性设置容器主轴的方向 */
.f-d-r{flex-direction:row}/* 默认值，沿水平方向，由左到右*/
.f-d-rr{flex-direction:row-reverse}/* 沿水平方向，由右到左 */
.f-d-c{flex-direction:column}/* 垂直方向，由上到下 */
.f-d-cr{flex-direction:column-reverse}/* 垂直方向，由下到上 */

/* flex-wrap属性用于设置当项目在容器中一行无法显示的时候如何处理 */
.f-w-n{flex-wrap:nowrap}/* 不换行 */
.f-w-w{flex-wrap:wrap}/* 正常换行，第一个位于第一行的第一个 */
.f-w-wr{flex-wrap:wrap-reverse}/* 向上换行，第一行位于下方 */

/* justify-content属性用于设置项目在容器中的对齐方式 */
.j-c-beg{justify-content:flex-start}/* 默认值，左对齐 */
.j-c-end{justify-content:flex-end}/* 右对齐 */
.j-c-c{justify-content:center}/* 居中对齐 */
.j-c-sb{justify-content:space-between}/* 两端对齐 */
.j-c-sa{justify-content:space-around}/* 每个项目两侧的间距相等 */

/* align-items定义了项目在交叉轴上是如何对齐显示的 */
.a-i-c{align-items:center}/* 交叉轴居中 */
.a-i-end{align-items:flex-end}/* 交叉轴末尾 */