/* 下面的html的font-size代表多少像素等于1rem（不过无论就算1rem小于20px，计算时也请以1rem=20px来） */
/* @media screen and (min-width:360px){html{font-size:18px}body{font-size:12px}}
@media screen and (min-width:375px){html{font-size:18.75px}body{font-size:12px}}
@media screen and (min-width:393px){html{font-size:20px}body{font-size:13px}}
@media screen and (min-width:412px){html{font-size:20px}body{font-size:13.5px}}
@media screen and (min-width:414px){html{font-size:20px}body{font-size:13.5px}} */
@media not all and (min-resolution:.001dpcm)
{ @media { /* 仅针对于Safari浏览器的外观样式 */
  input[type='date'],input[type='time'],input[type='datetime-local'],select{
    -webkit-appearance: none;
  }
}}
select{background: #fff;}/*安卓问题*/
*{margin:0;padding:0;} /* 不可以在这里设置字体，否则新增字体将无法应用！ */
*,*::before,*::after {box-sizing: border-box;}
html,body{
  padding: 0;margin: 0;
  width: 100%;/*若body添加了背景色并被超出的话会很难看，所以把height改为min-height会比较好*/
  height:100%;/*但是如果body使用min-height:100%的话就无法限制内容超出浏览器窗口了(即使用body内部容器限制也无效),所以特此改回;另外强烈建议不要给body加上背景色！*/
  color: var(--black);
  font-family:'PingFangSC-Regular',微软雅黑;
  background:#fff;
}
a{text-decoration:none;color:#334;}
p{white-space: pre-wrap;} /* 让textarea保存的文字原样换行 */
img{border:0;vertical-align: middle;text-align: center;max-width: 100%;border-style: none;}
ul,li{list-style: none;}
button{font-family: 'PingFangSC-Semibold',微软雅黑;}
:root{	/* 定义颜色变量 */
  --grey: #bfbfbf;
  --ored: #ff4200;  /* 通用的橙红色 */
  --purple: #614ed3;
  --yellow: #f7941d;
  --info: #48B0F7;  /* 通用的蓝色信息 */
  --color: #0070c0; /* 通用的主题颜色 */
  --pale: #ececec;  /* 通用的浅灰色 */
  --dblue: #0125A8; /* 通用的深蓝色 */
  --red: #bf2121; /* 通用的红色 */
  --black: #232343; /* 标准黑色文字 */
  --second: #667; /* 灰色文字 */
  --yolk: #ff7444; /* 蛋黄色 */
  --green: #85ce1a; /* 淡绿色 */
}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
    color: #bebebe;
}
.bg-full{ /* 常用于body加颜色的包裹 */
  min-height: 100%;
  height: initial;
}
.center{/* 通用的居中子元素样式（父元素无需指定高度） */
    align-items: center;    /* 子元素垂直居中 */
    justify-content: center;/* 子元素水平居中 */
    display:flex;text-align: center;
}
.center>p{width: 100%;}/*使用父元素flex->center的方法会使子p元素宽度变为最小值，这里做修正*/
[class*=flx]{ display: flex;}/*当主元素用该样式时建议不要在其内的一级元素上再使用该样式了*/
[class*=flx-d]{ flex-direction: column;}
[class*=flx-vc]{ align-items: center;} /* vertical center */
[class*=flx-d-vc]{justify-content: center;} /* vertical center */
[class*=flx-d-b]{justify-content:flex-end;} /* vertical bottom */
[class*=flx-hc]{ justify-content: center;} /* horizontal center */
[class*=flx-d-hc]{ align-items: center;} /* horizontal center */
[class*=blo]{ display: block;}
[class*=fl-l]{ float: left;}
[class*=fl-r]{ float: right!important;}
.relative{position: relative;}
.jc-sb{justify-content:space-between!important;}/* flex子元素两端分布 */
.cf{zoom:1}.cf:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.cf>*[class*=wd]{float: left;}
.grow{ flex-grow: 1;}/*通用的自动撑大*/
.eq-wd{flex: 1 1 0;} /* 元素等宽 */
.hidden{display: none!important;}
small{font-size: 75%;}
.nowrap{white-space:nowrap;}
.vt-md{vertical-align: middle;}
/*以下样式类似boostrap4*/
.tx-l{text-align: left!important;}
.tx-c{text-align: center;justify-content: center;}
.tx-r{text-align: right;justify-content: flex-end;}
.ff{background: #fff;}
.fa{background: #fafafa;}
.ee{background: #eee;}
.bc{background-color: var(--color)!important;color:#fff;}/*通用的主题背景色*/
.fc,.active{color: var(--color)!important;} /*通用的主题字体色*/
.f-red,span.red,i.red,b.red{color: var(--red);}
*[class*=wd-]>*{max-width: 100%;}/*不然会超出整个页面*/
.wd-2-1,.wd-50{width: 50%;}
.wd-3-1,.wd-33{width: 33.3%;}
.wd-4-1,.wd-25{width: 25%;}
.wd-4-3,.wd-75{width: 75%;}
.wd-5-1,.wd-20{width: 20%;}
.wd-15{width: 15%!important;}
.wd-40{width: 40%!important;}
.wd-45{width: 45%!important;}
.wd-55{width: 55%!important;}
.wd-60{width: 60%!important;}
.wd-90{width: 90%!important;}
.wd-100{width: 100%!important;}

.bt-1{border-bottom: 1px solid #bdbdbd;}
.br-0{border-radius: 0!important;}
.pd-0{padding: 0 !important;}
.bd-0{border: 0!important;}
.mg-0{margin: 0!important;}
.br-0{border-radius:0!important;}

.h-i,.sp-i{height: 0.15rem;}/*超小间隔*/
.h-s,.sp-s{height: 0.27rem;}/*小间隔*/
.h-a,.sp-a{height: 0.57rem;}/*间隔a*/
.h-b,.sp-b{height: 0.83rem;}/*间隔b*/
.h-1,.sp-1{height: 1rem;} /*1rem间隔*/
.h-2,.sp-2{height: 2rem;} /*1rem间隔*/
.h-auto{height: auto!important;}
.h-100{height: 100%!important;}

input[type='radio']{width: 0.7rem;height: 0.7rem;vertical-align: middle;}
.grid-9{float: left;width: 33.3%;text-align: center;padding:0.55rem 0;}
.grid-9 img{height: 1.75rem;margin-bottom: 0.15rem;}
/*针对IOS图片的预览角度旋转*/
img[data-ort='6']{transform: rotate(90deg);}
img[data-ort='3']{transform: rotate(180deg);}
img[data-ort='8']{transform: rotate(-90deg);}

.list{overflow-y: auto;-webkit-overflow-scrolling: touch;}
.tab-flx>*{text-align: center;} /* 选项卡菜单默认居中 */
.tab-flx>.active{
	background: var(--color);
	color: #fff;
}