/*
公共样式
*/
*{margin:0;padding:0;box-sizing: border-box;}
.height{height:calc(100vh)}.width{width: calc(100vw);}
.min-height{min-height:calc(100vh)}.min-width{min-width: calc(100vw);}
.page{
	width: 100%;padding-bottom: 2rpx;
	box-sizing: border-box;
	background-color: #F0EDF1;
}
/* .page{background-color: #F0EDF1;
min-height: calc(100vh);
padding-bottom: 2rpx;}
*/

/* 行为相关颜色 */
@primary: #007aff;
@success: #4cd964;
@warning: #f0ad4e;
@error: #dd524d;

/* 主色调 */
.color{color: #9E2036!important;}
.color-3 {color: #333;}
.color-6 {color: #666;}
.color-9 {color: #999;}
.color-c {color: #ccc;}
.color-f {color: #fff;}
.color-p {color: #007aff;}
.color-s {color: #4cd964;}
.color-w {color: #f0ad4e;}
.color-e {color: #dd524d;}
.color-red{color: red;}
.color-blue{color: blue;}
.color-green{color: green;}
.bgc{background-color: #9E2036!important;}
.bgc-3 {background-color: #333;}
.bgc-6 {background-color: #666;}
.bgc-9 {background-color: #999;}
.bgc-c {background-color: #ccc;}
.bgc-f {background-color: #fff;}
.bgc-p {background-color: #007aff;}
.bgc-s {background-color: #4cd964;}
.bgc-w {background-color: #f0ad4e;}
.bgc-e {background-color: #dd524d;}
.bgc-red{background-color: red;}
.bgc-blue{background-color: blue;}
.bgc-green{background-color: green;}
.bgcimg{background: url(./static/img/bgcimg.png) no-repeat 100% 100%;background-size: 100% 100%;}
.loginimg{background: url(./static/img/loginimg.png) no-repeat 100% 100%;background-size: 100% 100%;}

.gradient{background: linear-gradient(#9E2036, #EE405E);}
.gradient1{background: linear-gradient(135deg, #c850c0, #4158d0);}
.gradient2{background: linear-gradient(135deg, #a1c4fd, #c2e9fb);}
.gradient3{background: linear-gradient(135deg, #ff9a9e, #fad0c4);}
.gradient4{background: linear-gradient(135deg, #f6d365, #fda085);}
.gradient5{background: linear-gradient(135deg, #a8e063, #56ab2f);}
.gradient6{background: linear-gradient(135deg, #292a3a, #536976);}
.gradient7{background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);}
.gradient8{background: linear-gradient(135deg, #001f3f, #0088a9, #00c9a7, #92d5c6, #ebf5ee);}
.gradient9{background: linear-gradient(135deg, #272727, #4a4a4a, #6d6d6d, #909090, #b3b3b3, #d6d6d6, #f9f9f9);}
.gradient10{background: linear-gradient(135deg, #c7e9fb, #a6defa, #80d4f9, #5bc9f8, #35bef7);}
/* 应用于文本，为文本内容添加阴影效果。 */
.txtcolor{text-shadow: 0 0 10 #FD5757;}
/* 应用于元素，为元素内容添加阴影效果。 */
.boxcolor{box-shadow: 0 0 10 #FD5757;}
/* 应用于图像，为图像内容添加阴影效果。 */
.imgcolor{drop-shadow: 0 0 10 #FD5757;}

/*
文字渐变颜色
*/
.linear-text{
    /* 设置背景色渐变 */
    background-image: linear-gradient(to right,#e66465, #9198e5);
    /* 设置背景颜色限制在文字中 */
    background-clip: text;
    -webkit-background-clip: text;
    /* 设置文本颜色透明以露出后面裁切成文本形状的渐变背景 */
    color: transparent;
	-webkit-text-fill-color: transparent;
}
/*
线性渐变色
*/
.linear{/*向右线性渐变：*/
    background-image: linear-gradient(to right,#e66465, #9198e5);
}
.radial{/*颜色节点均匀分布的径向渐变：*/
    background-image: radial-gradient(red, yellow, green);
}
.radial-circle{/*形状为圆形的径向渐变：*/
    background-image: radial-gradient(circle, red, yellow, green);
}
.radial-ellipse{/*形状为椭圆形的径向渐变：*/
    background-image: radial-gradient(ellipse, red, yellow, green);
}


/*
水平对齐 
*/
.t-left{text-align:left;}
.t-center{text-align:center;}
.t-right{text-align:right;}

/* 
垂直对齐
*/
.v-top{vertical-align:top;}
.v-middle{vertical-align:middle;}
.v-bottom{vertical-align:bottom;}

/* 
字体样式 
*/
.f08rem{font-size:0.8rem;}
.f09rem{font-size:0.9rem;}
.f1rem{font-size:1rem;}
.f101rem{font-size:1.1rem;}
.f102rem{font-size:1.2rem;}
.f103rem{font-size:1.3rem;}
.f104rem{font-size:1.4rem;}
.f105rem{font-size:1.5rem;}
.f106rem{font-size:1.6rem;}
.f107rem{font-size:1.7rem;}
.f108rem{font-size:1.8rem;}
.f109rem{font-size:1.9rem;}
.f2rem{font-size:2rem;}
.f202rem{font-size:2.2rem;}
.f204rem{font-size:2.4rem;}
.f206rem{font-size:2.6rem;}
.f208rem{font-size:2.8rem;}
.f3rem{font-size:3rem;}
.f302rem{font-size:3.2rem;}
.f304rem{font-size:3.4rem;}
.f306rem{font-size:3.6rem;}
.f308rem{font-size:3.8rem;}
.f4rem{font-size:4rem;}
.f5rem{font-size:5rem;}
.f6rem{font-size:6rem;}
/* 字体加粗 */
.f-bold{font-weight:bold;}
/* 字体不换行 */
.f-nowrap{white-space:nowrap;}
/* 首行缩进 */
.f-indent{text-indent:2em;}
/* 字符间距 */
.f-spacing{letter-spacing:1em;}
/* 单词及字母换行 */
.f-all{word-wrap:break-word;word-break:break-all;}
/* 将长串字母或长单词自动换行 */
.f-wrap{word-wrap:break-word;}
/* 将完整的单词拆分自动换行 */
.f-break{word-break:break-all;}
/* 文本溢出隐藏 */
.f-hidden3{
    overflow:hidden;/*溢出隐藏*/
    text-overflow: ellipsis;/*超出部分显示省略号*/
    display:-webkit-box;/*弹性盒*/
    -webkit-box-orient:vertical;/*设置对象内元素的排列方式为垂直*/
    -webkit-line-clamp:3;/*限制块元素文本行数*/
}
.f-hidden2{
    overflow:hidden;/*溢出隐藏*/
    text-overflow: ellipsis;/*超出部分显示省略号*/
    display:-webkit-box;/*弹性盒*/
    -webkit-box-orient:vertical;/*设置对象内元素的排列方式为垂直*/
    -webkit-line-clamp:2;/*限制块元素文本行数*/
}
.f-hidden{
    overflow:hidden;/*溢出隐藏*/
    text-overflow:ellipsis;/*超出部分显示省略号*/
	white-space:nowrap; /*不换行*/
    -o-text-overflow:ellipsis;
}

/*
溢出隐藏显示
*/
/* 超出容器则显示滚动条 */
.overflow-a{overflow:auto;}
.overflowx-a{overflow-x:auto;}
.overflowy-a{overflow-y:auto;}
/* 无论是否超出都显示滚动条 */
.overflow-s{overflow:scroll;}
.overflowx-s{overflow-x:scroll;}
.overflowy-s{overflow-y:scroll;}
/* 超出容器部分隐藏 */
.overflow-h{overflow:hidden;}
.overflowx-h{overflow-x:hidden;}
.overflowy-h{overflow-y:hidden;}
/* 不被裁剪或隐藏‌ */
.overflow-v{overflow: visible;}
/* 自定义滚动条 */
::-webkit-scrollbar{/* — 整个滚动条. */
   width: 2px;
    height: 2px;
    background-color: #ccc;
}
::-webkit-scrollbar-button {/* — 滚动条上的按钮 (上下箭头). */
    /* background-color: red; */
}
::-webkit-scrollbar-thumb{ /* — 滚动条上的滚动滑块. */
    /* background-color: red; */
}
::-webkit-scrollbar-track{/* — 滚动条轨道. */
    /* background-color: orange  ; */
}
::-webkit-scrollbar-track-piece{/* — 滚动条没有滑块的轨道部分. */
    /* background-color: yellow; */
}

/* 
隐藏、定位、浮动
*/
/* 背景模糊 */
.blur{backdrop-filter: blur(3px);}
/* 保持容器原有尺寸比例，图片不被缩放。 */
.fit{object-fit:cover}
.radius{border-radius: 18px;}
/* 隐藏 */
.none{display:none;}
.hidden{visibility:hidden;}
.opacity{opacity:0;}
.noborder{border:none;}
/* 定位 */
.pon{position:static;}
.por{position:relative;}
.poa{position:absolute;}
.pof{position:fixed;}
.pos{position:sticky;}
/* 浮动 */
.float-l{float:left;}
.float-r{float:right;}
/* 清除浮动*/
.clear:after{content:"";display:block;clear:both}
/* 层级 */
.z1{z-index: 1;}.z2{z-index: 2;}.z3{z-index: 3;}.z4{z-index: 4;}.z5{z-index: 5;}.z6{z-index: 6;}.z7{z-index: 7;}.z8{z-index: 8;}
.z9{z-index: 9;}
.z99{z-index: 99;}
.z999{z-index: 999;}
.z9999{z-index: 9999;}
/*
百分比
*/
.w10{width:10%;}.w20{width:20%;}.w30{width:30%;}.w40{width:40%;}.w50{width:50%;}
.w60{width:60%;}.w70{width:70%;}.w80{width:80%;}.w90{width:90%;}.w100{width:100%;}
.w2{width:50%;}.w3{width:33.333%;}.w4{width:25%;}.w5{width:20%;}
.w6{width:16.666%;}.w7{width:14.285%;}.w8{width:12.5%;}.w9{width:11.111%;}
.h10{height:10%;}.h20{height:20%;}.h30{height:30%;}.h40{height:40%;}.h50{height:50%;}
.h60{height:60%;}.h70{height:70%;}.h80{height:80%;}.h90{height:90%;}.h100{height:100%;}


/* 显示 */
.show{
	opacity: 1;
/* 	display: block;
	visibility: visible;
	overflow: visible; */
}
/* 隐藏 */
.hide{
	opacity: 0;
	/* display: none;
	visibility: hidden;
	overflow: hidden; */
}
/* 选中 */
.actives{
	color: #3e7ffd;
	background-color: #fff;
	border-bottom: 2px solid #3e7ffd;
	border-radius: 0 0 6px 6px;
}


/*进度加载条*/
.loading{
	width: 100%;padding: 1%;border-radius: 20px;
	background-color: #fff; overflow: hidden;
}
.loading .load{
	width: 0%; height: 100%; border-radius: 10px; opacity: 0.5;transition: all 3s;
	background-image: linear-gradient(to right,#3773bb 80%, red);
	display: flex;align-items: center;justify-content: center;
}
.loading .loads{
	width: 100%;height: 100%; border-radius: 10px; opacity: 1;
	/* background-image: linear-gradient(to right,#3773bb 80%, red); */
}

/* 开关按钮 */
.switch{
	position: relative; width: 100%; height: 2.5rem;
	box-shadow: 0 0 2px #999; border-radius: 40px;
	background-color: #fff;; overflow: hidden; 
	transition: all 1s;
}
.switchs{
	background-color: blue;
}
/* 按钮固定值 */
.switch .anniu{
	width: 2.5rem; height: 100%; border-radius: 50%; 
	color: #fff; background-color: #ccc; transition: all 2s;
	position: absolute; top: 0; 
}
/* 开关按钮切换 */
.switch .on{
	left: 0px;
	transform: rotate(0);
}
.switch .off{
	left: calc(100% - 2.5rem);
	transform: rotate(720deg);
}

/* 下拉窗弹框 */
.pop{
	position: absolute;overflow-y: auto;transition:all 1s;opacity: 1;
	top: 50%;width: 100%; min-height: 3rem;max-height: 6rem;
	background-color: #efefef;
	height: 5rem;
	box-shadow: 2px 2px 4px; border-radius: 0 0 20px 20px;
}
.pops{
	height: 0rem;min-height: 0rem;opacity: 0;transition:all 1s;
}

/*整个页面弹框*/
.popup{/*全局遮罩层*/
	/* 有遮罩层，根据flex定位弹窗位置 */
	position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%;
	background-color: rgba(100,100,100,0.5); z-index: 9999;
	backdrop-filter: blur(3px); 
}
.popupe{/*无遮罩*/
	/* 无遮罩层，根据top或bottom属性定位弹窗位置 */
	position: fixed; width: 100%; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	/* pointer-events: none; */
	/* 取消元素鼠标事件，实现点击穿透*/
}

.poptop{/*顶部弹框样式*/
	width: 98%; height: 8vh; padding: 2%;color: #000;overflow: hidden;
	border-radius: 10px; background-color: #fff;box-shadow: 0 0 2px #ccc;
}
.popcont{/*居中弹框样式*/
	width: 70%; height: 20vh; padding: 2%;color: #000;overflow: hidden;
	border-radius: 10px; background-color: #fff;box-shadow: 0 0 2px #ccc;
}
.popend{ /*底部弹框样式*/
	width: 100%; height: 25vh; padding: 2%;color: #000;overflow: hidden;
	border-radius: 10px 10px 0 0; background-color: #fff;box-shadow: 0 0 2px #ccc;
}



/*
    css3变形2D：旋转、缩放、扭曲、移动及矩阵变形
*/
/* {transform:     旋转rotate     |  缩放scale |  扭曲skew     |  移动translate |  矩阵变形matrix} */
.transform{transform:rotate(30deg)scale(2,2)skew(30deg,10deg)translate(100px,20px);}
/* .matrix{transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);} */
/* 设置旋转中心为底部中心 */
.origin{ transform-origin: 50% 100%; }
/* 设置变形原点为元素的左上角 */
.origin{ transform-origin: top left; }
/* 设置变形原点为元素的右下角,且Z轴位置为100px */
.origin{ transform-origin: right bottom 100px; }
/* 设置变形原点为元素的水平中心,且垂直方向距离顶部25% */
.origin{ transform-origin: center 25%; }
  
/*
    css3变形3D：元素透视视图、旋转、缩放、移动及矩阵变形
*/
/* {transform: 观察者距离perspective |旋转rotateX,rotateX,rotateX| 缩放scaleX,scaleY,scaleZ | 移动translateX,translateY,translateZ |矩阵变形matrix3d} */
.transform{transform:perspective(300px)rotate3d(x,y,z)scale3d(x,y,z)translate3d(x,y,z);transform-style: preserve-3d;}
/* .matrix{transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);} */
/* 改变元素基点 */
.origin{transform-origin: x-axis y-axis z-axis;}
.origin-l{transform-origin: left;}
.origin-r{transform-origin: right;}
.origin-t{transform-origin: top;}
.origin-b{transform-origin: bottom;}

/* 过渡用时 */
.transition{
    -moz-transition: all .2s;-webkit-transition: all .2s;
    -o-transition: all .2s;transition: all .2s!important;
}
/*调用动画*/
.animation{
    animation-name: anime1;/*动画名称*/
    animation-duration: 3s;/*完成周期时间*/
    animation-delay: 0s; /* 延迟3秒开始动画 */
    animation-iteration-count: infinite; /* 无限次重复动画,数字为次数 */
	animation-timing-function‌: ease;/* 匀速linear、默认先慢后快再慢ease、低速开始ease-in、低速结束ease-out、低速开始和结束ease-in-out、自定义贝塞尔曲线cubic-bezier(0,1,0,1) */
	‌animation-play-state‌:running;/* 播放running、暂停paused‌ */
	‌animation-direction‌:normal;/* 正常方向normal、反向reverse、正反交替alternate、反向交替alternate-reverse ‌*/
}
/* 滚动驱动动画 */
.anime-scroll{
	animation-name: anime;/*动画名称*/
	animation-timeline: view();
	animation-timeline: view(block 10px); /* 垂直边距 */
	animation-timeline: view(inline 50%); /* 水平边距 */
	animation-timeline: view(10px 20px 30px 40px); /* 所有边距 */
	animation-range: entry 60% exit 70%;/*动画的开始和结束位置*/
}
/* 滚动驱动动画。推荐使用 @scroll-timeline polyfill 为旧浏览器提供基本支持。 */
@supports (animation-timeline: view()) {
	/* 现代浏览器样式 */
}

@supports not (animation-timeline: view()) {
	/* 回退方案 */
	.fallback {
		transition: all 0.5s ease;
	}
	/* 使用 IntersectionObserver 添加 .active 类 */
}

/*定义动画*/
@keyframes anime{
    0%{
        /* width: 100px; */
        width: 80%;
		opacity: 0.1;
    }
    100%{
        /* width: 300px; */
        width: 90%;
		opacity: 0.9;
    }
}

/*手机灵动岛变大变小效果*/
@keyframes animand{
	0%{ width: 30%; height: 1vh; border-radius: 10px; transform:scale(0.5,0.5); }
	20%{ width: 80%; height: 8vh; border-radius: 50px; transform:scale(1,1); }
	80%{ width: 80%; height: 8vh; border-radius: 50px; transform:scale(1,1); }
	100%{ width: 30%; height: 1vh; border-radius: 10px; transform:scale(0.5,0.5); }
}
/*电视关机渐远变小效果*/
@keyframes animmsg{
	/* 0%{ transform:perspective(100px)rotateX(-90deg)scale(0.1)translateY(0px); }
	10%{ transform:perspective(200px)rotateX(-45deg)scale(0.7)translateY(-50px); }
	20%{ transform:perspective(300px)rotateX(0deg)scale(1)translateY(0px); } */
	0%{ transform:perspective(300px)rotateX(0deg)scale(1)translateY(0px); }
	80%{ transform:perspective(300px)rotateX(0deg)scale(1)translateY(0px); }
	90%{ transform:perspective(200px)rotateX(45deg)scale(0.7)translateY(50px); }
	100%{ transform:perspective(100px)rotateX(90deg)scale(0.1)translateY(0px); }
}
/*左右翻转效果*/
@keyframes animmod{
	0%{ transform:perspective(300px)rotateY(0deg)scale(1); }
	30%{ transform:perspective(300px)rotateY(0deg)scale(1); }
	40%{ transform:perspective(300px)rotateY(-15deg)scale(1); }
	/* 50%{ transform:perspective(300px)rotateY(0deg)scale(1); } */
	60%{ transform:perspective(300px)rotateY(15deg)scale(1); }
	70%{ transform:perspective(300px)rotateY(0deg)scale(1); }
	100%{ transform:perspective(300px)rotateY(0deg)scale(1); }
}
/* 进度向右加载效果 */
@keyframes animr{
	0%{ left:0%; right: 100%; width: 20%; border-radius: 50px; }
	70%{ left:0%; right: 0%; width:100%; }
	100%{ left:100%; right: 0%; width: 20%; border-radius: 50px; }
}
/* 进度向左加载效果 */
@keyframes animl{
	0%{ left:100%; right: 0; width: 20%; border-radius: 50px; }
	20%{ left:100%; right: 0; width: 100%;  }
	80%{ left:-80%; right: 100%; width: 100%;  }
	100%{ left:0; right: 80%; width: 20%; border-radius: 50px; }
}


/* 
盒子类型 
*/
.block{display:block;}/*块级元素*/
.blocks{display:inline-block;}/*内联元素*/
.boxing{box-sizing:border-box;}
.flex{/*块级弹性盒*/
	display: -webkit-box;
    display: -moz-box;display: -ms-flexbox;
    display: -webkit-flex;display:flex;
}
.flexs{/*内联弹性盒*/
	display: -webkit-box;
    display: -moz-box;display: -ms-flexbox;
    display: -webkit-flex;display:inline-flex;
}

/* 
元素占比
*/
/* flex{flex-grow flex-shrink flex-basis}元素：放大比例 缩小比例 分配多余空间 */
.f1{flex:1;}.f2{flex:2;}.f3{flex:3;}.f4{flex:4;}.f5{flex:5;}
.f6{flex:6;}.f7{flex:7;}.f8{flex:8;}.f9{flex:9;}
.f10{flex:0 0 10%}.f16{flex:0 0 16.666%;}.f20{flex:0 0 20%;}.f25{flex:0 0 25%;}
.f33{flex:0 0 33.333%;}.f50{flex:0 0 50%;}.f100{flex:0 0 100%;}

/* 
元素排列顺序
*/
.o1{order:1}.o2{order:2}.o3{order:3}.o4{order:4}.o5{order:5}


/* 
纵横居中
*/
.F-xy{display:flex;justify-content:center;align-items:center;}

/* 
自上至下换行排序
*/
.F-wrap{display:flex;flex-wrap:wrap;}
/* 
自底向上换行排序
*/
.F-wrapr{display:flex;flex-wrap:wrap-reverse;}

/* 
X轴排序
*/
.FX{display:flex;flex-direction:row;}
/* 
X轴反向排序
*/
.FX-r{display:flex;flex-direction:row-reverse;}

/* 
Y轴排序 
*/
.FY{display:flex;flex-direction:column;}
/* 
Y轴反向排序
*/
.FY-r{display:flex;flex-direction:column-reverse;}

/* 
X轴排列
*/
.FX-b{display:flex;justify-content: baseline;}
.FX-c{display:flex;justify-content:center;}
.FX-sa{display:flex;justify-content:space-around;}
.FX-sb{display:flex;justify-content:space-between;}
.FX-fs{display:flex;justify-content:flex-start;}
.FX-fe{display:flex;justify-content:flex-end;}

/* 
Y轴排列
*/
.FY-b{display:flex;align-items:baseline;}/*以首行基线对齐*/
.FY-c{display:flex;align-items:center;}
.FY-fs{display:flex;align-items:flex-start;}
.FY-fe{display:flex;align-items:flex-end;}
.FY-h{display:flex;align-items:stretch;}/*如果项目未设置高度或设为auto，将占满整个容器的高度。*/

/* 
Y轴排列下的单个项目
*/
.FY-bs{display:flex;align-self:baseline;}/*以首行基线对齐*/
.FY-cs{display:flex;align-self:center;}
.FY-fss{display:flex;align-self:flex-start;}
.FY-fes{display:flex;align-self:flex-end;}
.FY-hs{display:flex;align-self:stretch;}/*如果项目未设置高度或设为auto，将占满整个容器的高度。*/


/* 
盒子外边距
*/
.m-02rem{margin:0.2rem;}
.m-04rem{margin:0.4rem;}
.m-06rem{margin:0.6rem;}
.m-08rem{margin:0.8rem;}
.m-1rem{margin:1rem;}
.m-2rem{margin:2rem;}
.m-3rem{margin:3rem;}
.m-4rem{margin:4rem;}
.m-5rem{margin:5rem;}

/* 
盒子外边距X轴
*/
.mx-02rem{margin-left:0.2rem;margin-right:0.2rem;}
.mx-04rem{margin-left:0.4rem;margin-right:0.4rem;}
.mx-06rem{margin-left:0.6rem;margin-right:0.6rem;}
.mx-08rem{margin-left:0.8rem;margin-right:0.8rem;}
.mx-1rem{margin-left:1rem;margin-right:1rem;}
.mx-102rem{margin-left:1.2rem;margin-right:1.2rem;}
.mx-104rem{margin-left:1.4rem;margin-right:1.4rem;}
.mx-106rem{margin-left:1.6rem;margin-right:1.6rem;}
.mx-108rem{margin-left:1.8rem;margin-right:1.8rem;}
.mx-2rem{margin-left:2rem;margin-right:2rem;}
.mx-202rem{margin-left:2.2rem;margin-right:2.2rem;}
.mx-204rem{margin-left:2.4rem;margin-right:2.4rem;}
.mx-206rem{margin-left:2.6rem;margin-right:2.6rem;}
.mx-208rem{margin-left:2.8rem;margin-right:2.8rem;}
.mx-3rem{margin-left:3rem;margin-right:3rem;}
.mx-4rem{margin-left:4rem;margin-right:4rem;}
.mx-5rem{margin-left:5rem;margin-right:5rem;}

/* 
盒子外边距Y轴
*/
.my-02rem{margin-top:0.2rem;margin-bottom:0.2rem;}
.my-04rem{margin-top:0.4rem;margin-bottom:0.4rem;}
.my-06rem{margin-top:0.6rem;margin-bottom:0.6rem;}
.my-08rem{margin-top:0.8rem;margin-bottom:0.8rem;}
.my-1rem{margin-top:1rem;margin-bottom:1rem;}
.my-102rem{margin-top:1.2rem;margin-bottom:1.2rem;}
.my-104rem{margin-top:1.4rem;margin-bottom:1.4rem;}
.my-106rem{margin-top:1.6rem;margin-bottom:1.6rem;}
.my-108rem{margin-top:1.8rem;margin-bottom:1.8rem;}
.my-2rem{margin-top:2rem;margin-bottom:2rem;}
.my-202rem{margin-top:2.2rem;margin-bottom:2.2rem;}
.my-204rem{margin-top:2.4rem;margin-bottom:2.4rem;}
.my-206rem{margin-top:2.6rem;margin-bottom:2.6rem;}
.my-208rem{margin-top:2.8rem;margin-bottom:2.8rem;}
.my-3rem{margin-top:3rem;margin-bottom:3rem;}
.my-4rem{margin-top:4rem;margin-bottom:4rem;}
.my-5rem{margin-top:5rem;margin-bottom:5rem;}

/* 
盒子外边距左右上下
*/
.ml-02rem{margin-left:0.2rem;}
.ml-04rem{margin-left:0.4rem;}
.ml-06rem{margin-left:0.6rem;}
.ml-08rem{margin-left:0.8rem;}
.ml-1rem{margin-left:1rem;}
.ml-2rem{margin-left:2rem;}
.ml-3rem{margin-left:3rem;}
.ml-4rem{margin-left:4rem;}
.ml-5rem{margin-left:5rem;}
.ml-6rem{margin-left:6rem;}
.mr-02rem{margin-right:0.2rem;}
.mr-04rem{margin-right:0.4rem;}
.mr-06rem{margin-right:0.6rem;}
.mr-08rem{margin-right:0.8rem;}
.mr-1rem{margin-right:1rem;}
.mr-2rem{margin-right:2rem;}
.mr-3rem{margin-right:3rem;}
.mr-4rem{margin-right:4rem;}
.mr-5rem{margin-right:5rem;}
.mr-6rem{margin-right:6rem;}
.mt-02rem{margin-top:0.2rem;}
.mt-04rem{margin-top:0.4rem;}
.mt-06rem{margin-top:0.6rem;}
.mt-08rem{margin-top:0.8rem;}
.mt-1rem{margin-top:1rem;}
.mt-2rem{margin-top:2rem;}
.mt-3rem{margin-top:3rem;}
.mt-4rem{margin-top:4rem;}
.mt-5rem{margin-top:5rem;}
.mt-6rem{margin-top:6rem;}
.mb-02rem{margin-bottom:0.2rem;}
.mb-04rem{margin-bottom:0.4rem;}
.mb-06rem{margin-bottom:0.6rem;}
.mb-08rem{margin-bottom:0.8rem;}
.mb-1rem{margin-bottom:1rem;}
.mb-2rem{margin-bottom:2rem;}
.mb-3rem{margin-bottom:3rem;}
.mb-4rem{margin-bottom:4rem;}
.mb-5rem{margin-bottom:5rem;}
.mb-6rem{margin-bottom:6rem;}


/* 
盒子内边距
*/
.p-02rem{padding:0.2rem;}
.p-04rem{padding:0.4rem;}
.p-06rem{padding:0.6rem;}
.p-08rem{padding:0.8rem;}
.p-1rem{padding:1rem;}
.p-2rem{padding:2rem;}
.p-3rem{padding:3rem;}
.p-4rem{padding:4rem;}
.p-5rem{padding:5rem;}

/* 
盒子内边距X轴
*/
.px-02rem{padding-left:0.2rem;padding-right:0.2rem;}
.px-04rem{padding-left:0.4rem;padding-right:0.4rem;}
.px-06rem{padding-left:0.6rem;padding-right:0.6rem;}
.px-08rem{padding-left:0.8rem;padding-right:0.8rem;}
.px-1rem{padding-left:1rem;padding-right:1rem;}
.px-102rem{padding-left:1.2rem;padding-right:1.2rem;}
.px-104rem{padding-left:1.4rem;padding-right:1.4rem;}
.px-106rem{padding-left:1.6rem;padding-right:1.6rem;}
.px-108rem{padding-left:1.8rem;padding-right:1.8rem;}
.px-2rem{padding-left:2rem;padding-right:2rem;}
.px-202rem{padding-left:2.2rem;padding-right:2.2rem;}
.px-204rem{padding-left:2.4rem;padding-right:2.4rem;}
.px-206rem{padding-left:2.6rem;padding-right:2.6rem;}
.px-208rem{padding-left:2.8rem;padding-right:2.8rem;}
.px-3rem{padding-left:3rem;padding-right:3rem;}
.px-4rem{padding-left:4rem;padding-right:4rem;}
.px-5rem{padding-left:5rem;padding-right:5rem;}

/* 
盒子内边距Y轴
*/
.py-02rem{padding-top:0.2rem;padding-bottom:0.2rem;}
.py-04rem{padding-top:0.4rem;padding-bottom:0.4rem;}
.py-06rem{padding-top:0.6rem;padding-bottom:0.6rem;}
.py-08rem{padding-top:0.8rem;padding-bottom:0.8rem;}
.py-1rem{padding-top:1rem;padding-bottom:1rem;}
.py-102rem{padding-top:1.2rem;padding-bottom:1.2rem;}
.py-104rem{padding-top:1.4rem;padding-bottom:1.4rem;}
.py-106rem{padding-top:1.6rem;padding-bottom:1.6rem;}
.py-108rem{padding-top:1.8rem;padding-bottom:1.8rem;}
.py-2rem{padding-top:2rem;padding-bottom:2rem;}
.py-202rem{padding-top:2.2rem;padding-bottom:2.2rem;}
.py-204rem{padding-top:2.4rem;padding-bottom:2.4rem;}
.py-206rem{padding-top:2.6rem;padding-bottom:2.6rem;}
.py-208rem{padding-top:2.8rem;padding-bottom:2.8rem;}
.py-3rem{padding-top:3rem;padding-bottom:3rem;}
.py-4rem{padding-top:4rem;padding-bottom:4rem;}
.py-5rem{padding-top:5rem;padding-bottom:5rem;}

/* 
盒子内边距左右上下
*/
.pl-02rem{padding-left:0.2rem;}
.pl-04rem{padding-left:0.4rem;}
.pl-06rem{padding-left:0.6rem;}
.pl-08rem{padding-left:0.8rem;}
.pl-1rem{padding-left:1rem;}
.pl-2rem{padding-left:2rem;}
.pl-3rem{padding-left:3rem;}
.pl-4rem{padding-left:4rem;}
.pl-5rem{padding-left:5rem;}
.pl-6rem{padding-left:6rem;}
.pr-02rem{padding-right:0.2rem;}
.pr-04rem{padding-right:0.4rem;}
.pr-06rem{padding-right:0.6rem;}
.pr-08rem{padding-right:0.8rem;}
.pr-1rem{padding-right:1rem;}
.pr-2rem{padding-right:2rem;}
.pr-3rem{padding-right:3rem;}
.pr-4rem{padding-right:4rem;}
.pr-5rem{padding-right:5rem;}
.pr-6rem{padding-right:6rem;}
.pt-02rem{padding-top:0.2rem;}
.pt-04rem{padding-top:0.4rem;}
.pt-06rem{padding-top:0.6rem;}
.pt-08rem{padding-top:0.8rem;}
.pt-1rem{padding-top:1rem;}
.pt-2rem{padding-top:2rem;}
.pt-3rem{padding-top:3rem;}
.pt-4rem{padding-top:4rem;}
.pt-5rem{padding-top:5rem;}
.pt-6rem{padding-top:6rem;}
.pb-02rem{padding-bottom:0.2rem;}
.pb-04rem{padding-bottom:0.4rem;}
.pb-06rem{padding-bottom:0.6rem;}
.pb-08rem{padding-bottom:0.8rem;}
.pb-1rem{padding-bottom:1rem;}
.pb-2rem{padding-bottom:2rem;}
.pb-3rem{padding-bottom:3rem;}
.pb-4rem{padding-bottom:4rem;}
.pb-5rem{padding-bottom:5rem;}
.pb-6rem{padding-bottom:6rem;}