/*
 * css reset
 */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent
}

:after,
:before {
  box-sizing: border-box
}

html,
body {
  width: 100%;
  height: 100%;
  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,
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);
  }
}

@font-face {
  font-family: 'd-Alternate';
  src: url('../font/DIN\ Alternate\ Bold.ttf');
}

.win-scroll ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: transparent;
}

.win-scroll ::-webkit-scrollbar-thumb {
  background-color: #c3c7ca;
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}