/*
 * css reset
 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }
:after,:before { box-sizing: border-box }
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%;
}
span, p, h1, h2, h3, h4, h5, h6 {
  letter-spacing: 1px;
}
/* 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;
} */

/*
 * 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; }


.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; }
}
/*左旋转*/
@keyframes rotateLeftRound {
  0% {
    transform: rotate(0deg);
    color: #6b7280;
  }
  25% {
    transform: rotate(-90deg);
    color: #ff4d24;
  }
  50% {
    transform: rotate(-180deg);
    color: red;
  }
  75% {
    transform: rotate(-270deg);
    color: #ff4d24;
  }
  100% {
    transform: rotate(-360deg);
    color: #6b7280;
  }
}
/*红色闪烁*/
@keyframes bling {
  0% {
    color: #6b7280;
  }
  50% {
    color: red;
  }
  100% {
    color: #6b7280;
  }
}
/* 闪烁 */
@-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) rotateX(60deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotateX(60deg);
    opacity: 0;
  }
}
/* scale 由0 - 1 */

@keyframes scaleInTo {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}