/*
 * css reset
 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }
:after,:before { box-sizing: border-box; color:#2345a6 }
html, body{
  margin: 0; padding: 0;
  font-size: 14px; color: #333;
  font-family: "Microsoft YaHei","微软雅黑","Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB",Arial,sans-serif;
}

div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0; padding: 0;
}
table { border-spacing: 0; }
fieldset, img { border: 0; }
/* img { max-width: 100%; max-height: 100%; } */
address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal; font-weight: normal;
}
ol, ul { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
abbr, acronym { border: 0; font-variant: normal; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
input, textarea, select {
  font-family: inherit; font-size: inherit; font-weight: inherit; *font-size: 100%;
}
/* div塌陷 clearfix */
.clearfix:after { clear: both; content: ""; display: block; }
.clearfix { *zoom: 1; }
a { text-decoration: none; }
a:focus, a:hover { text-decoration: none; }

button[disabled] { cursor: not-allowed !important; }
input{ outline: none !important; }
:focus { outline: none;  }

/* 取消chrome默认背景色等 */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset; }
/* input[type=text]:focus, input[type=password]:focus, textarea:focus { -webkit-box-shadow: 0 0 0 1000px white inset; } */

/* ie11不支持CSS变量，含泪放弃 */
/* :root{
  --color-main: #333;
  --color-danger: #ff4949;
  --color-success: #13ce66;
} */

/*
 *  color 色彩
 *  项目中所有字体颜色都从这里获取，不允许自定义字体颜色
 */
.color-black { color: #000; }
.color-black-light { color: #324057; }
.color-black-extra-light { color: #475669; }
.color-silver { color: #8492a6; }
.color-silver-light { color: #99a9bf; }
.color-silver-extra-light { color: #c0ccda; }
.color-gray { color: #d3dce6; }
.color-gray-light { color: #e5e9f2; }
.color-gray-extra-light { color: #eff2f7; }
.color-white { color: #fff; }
.color-white-dark  { color: #f9fafc; }
.color-blue-dark { color: #1d8ce0; }
.color-blue { color: #20a0ff; }
.color-blue-light { color: #58b7ff; }
.color-success { color: #13ce66; }
.color-warning { color: #f7ba2a; }
.color-danger { color: #ff4949; }

/*
 * common style
 * start with com-
 */
.com_ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; }
.com_keepall { word-break:keep-all; white-space:nowrap; }

/* 
 * 高度适应宽度,可调整 padding-top: 100% 控制高度大小, 默认100%与宽度一致
 */
.com_width_to_height {
  position: relative;
  width: 100%; height: 0;
  padding-top: 100%;
}
.com_width_to_height > div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.com_width_to_height > div > div {
  position: relative;
  width: 100%; height: 100%;
  display: flex; justify-content: center; align-items: center;
}
.com_width_to_height > div > div > img {
  visibility: visible;
  width: 100%; height: 100%;
}

.com_trans50_l {
  position: absolute; left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
  -moz-transform: translate3d(-50%, 0, 0);
  -ms-transform: translate3d(-50%, 0, 0);
  -o-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}
.com_trans50_t {
  position: absolute; top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  -ms-transform: translate3d(0, -50%, 0);
  -o-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}
.com_trans50_lt {
  position: absolute; top: 50%; left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -moz-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

/* ========== animation ========== */
/* fadeIn */
@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100%{opacity: 1; }
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100%{opacity: 1; }
}
/* fadeInUp */
@-webkit-keyframes fadeInUp {
  0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
  100%{ -webkit-transform:none; transform:none; opacity:1; }
}
@keyframes fadeInUp {
  0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
  100%{ -webkit-transform:none; transform:none; opacity:1; }
}
@-webkit-keyframes fadeInUpControl {
  0% { opacity: 0; -webkit-transform: translate3d(0, 40%, 0); transform: translate3d(0, 40%, 0); }
  100%{ -webkit-transform:none; transform:none; opacity:0.5; }
}
@keyframes fadeInUpControl {
  0% { opacity: 0; -webkit-transform: translate3d(0, 40%, 0); transform: translate3d(0, 40%, 0); }
  100%{ -webkit-transform:none; transform:none; opacity:0.5; }
}
/* fadeInDown */
@-webkit-keyframes fadeInDown {
  0% { opacity: 0; -webkit-transform: translate3d(0,-100%, 0); transform: translate3d(0, -100%, 0); }
  100%{opacity:1; -webkit-transform:none; transform:none; }
}
@keyframes fadeInDown {
  0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
  100%{opacity:1; -webkit-transform:none; transform:none; }
}
/* fadeInLeft */
@-webkit-keyframes fadeInLeft {
  0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
  100%{opacity:1; -webkit-transform:none; transform:none; }
}
@keyframes fadeInLeft {
  0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
  100%{opacity:1; -webkit-transform:none; transform:none; }
}
/* fadeInRight */
@-webkit-keyframes fadeInRight {
  0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
  100%{opacity:1; -webkit-transform:none; transform:none; }
}
@keyframes fadeInRight {
  0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
  100%{opacity:1; -webkit-transform:none; transform:none; }
}
/* 闪烁 */
@-webkit-keyframes twinkle {
  0% { opacity: 1; }
  50%{ opacity: 0; }
  100%{ opacity: 1; }
}
@keyframes twinkle {
  0% { opacity: 1; }
  50%{ opacity: 0; }
  100%{ opacity: 1; }
}
/* 圆圈波浪 */
@keyframes circleWave {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}