xt-ems-front/static/css/common.css

/*
 * css reset
 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }
:after,:before { box-sizing: border-box }
html { font-size: 20px; }
body{
  margin: 0; padding: 0;
  font-size: 12px; color: #000;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",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; color: #000; }
a:focus, a:hover { text-decoration: none; }

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

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


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

/*
 * animation
 * e.g. animation: lightSpeedIn .8s ease-out .2s both
 */
/* lightSpeedIn */
@-webkit-keyframes lightSpeedIn {
  0%{ -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; }
  60%{-webkit-transform:skewX(20deg); transform:skewX(20deg); opacity:1; }
  80%{-webkit-transform:skewX(-5deg); transform:skewX(-5deg); opacity:1; }
  100%{-webkit-transform:none; transform:none; opacity:1; }
}
@keyframes lightSpeedIn {
  0%{ -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; }
  60%{-webkit-transform:skewX(20deg); transform:skewX(20deg); opacity: 1; }
  80%{-webkit-transform:skewX(-5deg); transform:skewX(-5deg); opacity:1; }
  100%{-webkit-transform:none; transform:none; opacity:1; }
}
/* shake */
@-webkit-keyframes shake {
  0% ,100%{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0); }
  20%,40%,60%,80%{ opacity: 1;-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0); }
}
@keyframes shake {
  0% ,100%{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0); }
  20%,40%,60%,80%{ opacity: 1; -webkit-transform:translate3d(10px,0,0); transform:translate3d(10px,0,0); }
}
/* pulse */
@-webkit-keyframes pulse {
  0 %{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  50%{-webkit-transform:scale3d(1.2,1.2,1.2); transform:scale3d(1.2,1.2,1.2); }
  100%{-webkit-transform:scale3d(1,1,1); transform:scale3d(1,1,1); }
}
@keyframes pulse {
  0 %{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  50%{-webkit-transform:scale3d(1.2,1.2,1.2); transform:scale3d(1.2,1.2,1.2); }
  100%{-webkit-transform:scale3d(1,1,1); transform:scale3d(1,1,1); }
}
/* tada */
@-webkit-keyframes tada {
  0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
    transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg); }
  30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
    transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg); }
  40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
    transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg); }
  100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1); }
}
@keyframes tada {
  0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
    transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg); }
  30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
    transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg); }
  40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
    transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg); }
  100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1); }
}
/* rubberBand */
@-webkit-keyframes rubberBand {
  0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  30%{ -webkit-transform:scale3d(1.25,.75,1); transform:scale3d(1.25,.75,1); }
  40%{ -webkit-transform:scale3d(0.75,1.25,1); transform:scale3d(0.75,1.25,1); }
  50%{ -webkit-transform:scale3d(1.15,.85,1); transform:scale3d(1.15,.85,1); }
  65%{ -webkit-transform:scale3d(.95,1.05,1); transform:scale3d(.95,1.05,1); }
  75%{ -webkit-transform:scale3d(1.05,.95,1); transform:scale3d(1.05,.95,1); }
  100%{-webkit-transform:scale3d(1,1,1); transform:scale3d(1,1,1); }
}
@keyframes rubberBand {
  0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  30%{ -webkit-transform:scale3d(1.25,.75,1); transform:scale3d(1.25,.75,1); }
  40%{ -webkit-transform:scale3d(0.75,1.25,1); transform:scale3d(0.75,1.25,1); }
  50%{ -webkit-transform:scale3d(1.15,.85,1); transform:scale3d(1.15,.85,1); }
  65%{ -webkit-transform:scale3d(.95,1.05,1); transform:scale3d(.95,1.05,1); }
  75%{ -webkit-transform:scale3d(1.05,.95,1); transform:scale3d(1.05,.95,1); }
  100%{-webkit-transform:scale3d(1,1,1); transform:scale3d(1,1,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; }
}
/* 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; }
}
/* fadeIn */
@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100%{opacity: 1; }
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100%{opacity: 1; }
}
@-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; }
}
@-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 fadeOut {
  0% { opacity: 1; }
  100%{opacity: 0; }
}
@keyframes fadeOut {
  0% { opacity: 1; }
  100%{opacity: 0; }
}
@-webkit-keyframes fadeOutRight {
  0% { opacity: 1; }
  100%{opacity:0; -webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0); }
}
@keyframes fadeOutRight {
  0% { opacity: 1; }
  100%{opacity:0; -webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0); }
}
@-webkit-keyframes fadeOutLeft{
  0% { opacity: 1; }
  100%{opacity:0; -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0); }
}
@keyframes fadeOutLeft {
  0% { opacity: 1; }
  100%{opacity:0; -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0); }
}
@-webkit-keyframes fadeOutDown {
  0% { opacity: 1; }
  100%{opacity:0; -webkit-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0); }
}
@keyframes fadeOutDown {
  0% { opacity: 1; }
  100%{opacity: 0; -webkit-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0); }
}
@-webkit-keyframes fadeOutUp {
  0% { opacity: 1; }
  100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);}
}
@keyframes fadeOutUp {
  0% { opacity: 1; }
  100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);}
}
@-webkit-keyframes flipInX {
  0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; }
  40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);
    -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in;}
  60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg); transform:perspective(400px) rotate3d(1,0,0,10deg); opacity:1;}
  80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg); transform:perspective(400px) rotate3d(1,0,0,-5deg); }
  100%{-webkit-transform:perspective(400px); transform:perspective(400px); opacity:1; }
}
@keyframes flipInX {
  0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; }
  40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);
    -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in;}
  60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg); transform:perspective(400px) rotate3d(1,0,0,10deg); opacity:1;}
  80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg); transform:perspective(400px) rotate3d(1,0,0,-5deg); }
  100%{-webkit-transform:perspective(400px); transform:perspective(400px); opacity:1; }
}
@-webkit-keyframes flipInY {
  0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;animation-timing-function: ease-in; opacity: 0; }
  40%{ -webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg); transform:perspective(400px) rotate3d(0,1,0,-20deg);
    -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in; }
  60%{ -webkit-transform:perspective(400px) rotate3d(0,1,0,10deg); transform:perspective(400px) rotate3d(0,1,0,10deg); opacity:1; }
  80%{ -webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg); transform:perspective(400px) rotate3d(0,1,0,-5deg); }
  100%{-webkit-transform:perspective(400px); transform:perspective(400px); opacity:1; }
}
@keyframes flipInY {
  0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;animation-timing-function: ease-in; opacity: 0; }
  40%{ -webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg); transform:perspective(400px) rotate3d(0,1,0,-20deg);
    -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in; }
  60%{ -webkit-transform:perspective(400px) rotate3d(0,1,0,10deg); transform:perspective(400px) rotate3d(0,1,0,10deg); opacity:1; }
  80%{ -webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg); transform:perspective(400px) rotate3d(0,1,0,-5deg); }
  100%{-webkit-transform:perspective(400px); transform:perspective(400px); opacity:1; }
}
@-webkit-keyframes flipInY2 {
  0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;animation-timing-function: ease-in; opacity: 0; }
  70%{ -webkit-transform:perspective(400px) rotate3d(0,1,0,-10deg); transform:perspective(400px) rotate3d(0,1,0,-10deg);
    -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in; }
  100%{-webkit-transform:perspective(400px); transform:perspective(400px); opacity:1; }
}
@keyframes flipInY2 {
  0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;animation-timing-function: ease-in; opacity: 0; }
  70%{ -webkit-transform:perspective(400px) rotate3d(0,1,0,-10deg); transform:perspective(400px) rotate3d(0,1,0,-10deg);
    -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in; }
  100%{-webkit-transform:perspective(400px); transform:perspective(400px); opacity:1; }
}
@-webkit-keyframes flipOutY {
  0% { -webkit-transform: perspective(800px); transform: perspective(800px); }
  30%{ -webkit-transform:perspective(800px) rotate3d(0,1,0,-15deg);
    transform:perspective(800px) rotate3d(0,1,0,-15deg);opacity:1; }
  100%{-webkit-transform:perspective(800px) rotate3d(0,1,0,90deg);
    transform:perspective(800px) rotate3d(0,1,0,90deg); opacity:0; }
}
@keyframes flipOutY {
  0% { -webkit-transform: perspective(800px); transform: perspective(800px); }
  30%{ -webkit-transform:perspective(800px) rotate3d(0,1,0,-15deg);
    transform:perspective(800px) rotate3d(0,1,0,-15deg);opacity:1; }
  100%{-webkit-transform:perspective(800px) rotate3d(0,1,0,90deg);
    transform:perspective(800px) rotate3d(0,1,0,90deg); }
}
@-webkit-keyframes rollIn {
  0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  100%{opacity: 1; -webkit-transform:none; transform:none; }
}
@keyframes rollIn {
  0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  100%{opacity: 1; -webkit-transform:none; transform:none; }
}
@-webkit-keyframes zoomIn {
  0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); }
  100%{ opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes zoomIn {
  0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); }
  100%{ opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-webkit-keyframes slideInRight {
  0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; }
  100%{-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); opacity: 1; }
}
@keyframes slideInRight {
  0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; }
  100%{-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); opacity: 1; }
}
@-webkit-keyframes slideInUp {
  0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; }
  100%{-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); opacity: 1; }
}
@keyframes slideInUp {
  0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible;}
  100%{-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); opacity: 1; }
}
@-webkit-keyframes slideOutRight {
  0% {  -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  100%{ visibility :hidden; -webkit-transform:translate3d(100%, 0,0);transform:translate3d(100%, 0,0); }
}
@keyframes slideOutRight {
  0% {  -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  100%{ visibility :hidden; -webkit-transform:translate3d(100%, 0,0);transform:translate3d(100%, 0,0); }
}
@-webkit-keyframes rotateIn {
  0% { -webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);opacity: 0; }
  100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1; }
}
@keyframes rotateIn {
  0% { -webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);opacity: 0; }
  100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1; }
}
@-webkit-keyframes rotateInDownRight {
  0% { -webkit-transform-origin: right bottom; transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; }
  100%{-webkit-transform-origin:right bottom; transform-origin:right bottom;
    -webkit-transform: none; transform: none; opacity: 1;}
}
@keyframes rotateInDownRight {
  0% { -webkit-transform-origin: right bottom; transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; }
  100%{-webkit-transform-origin:right bottom; transform-origin:right bottom;
    -webkit-transform: none; transform: none; opacity: 1;}
}

@-webkit-keyframes slideInLeft {
  0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; }
  100%{-webkit-transform: translate3d(0,0,0); transform:translate3d(0,0,0); opacity: 1; }
}
@keyframes slideInLeft {
  0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; }
  100%{-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); opacity: 1; }
}
@-webkit-keyframes slideInRight {
  0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; }
  100%{-webkit-transform: translate3d(0,0,0); transform:translate3d(0,0,0); opacity: 1; }
}
@keyframes slideInRight {
  0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; }
  100%{-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); opacity: 1; }
}

@-webkit-keyframes bounceIn {
  0%,100%,20%,40%,60%,80%{
    -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(0.215, .61, .355, 1);
  }
  0%  { opacity:0;-webkit-transform:scale3d(.3,.3,.3); transform:scale3d(.3,.3,.3); }
  20% { -webkit-transform:scale3d(1.1,1.1,1.1); transform:scale3d(1.1,1.1,1.1); }
  40% { -webkit-transform:scale3d(.9,.9,.9); transform:scale3d(.9,.9,.9); }
  60% { opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03); transform:scale3d(1.03,1.03,1.03); }
  80% { -webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97); }
  100%{ opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1); }
}
@keyframes bounceIn {
  0%,100%,20%,40%,60%,80%{
    -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(0.215, .61, .355, 1);
  }
  0%  { opacity:0;-webkit-transform:scale3d(.3,.3,.3); transform:scale3d(.3,.3,.3); }
  20% { -webkit-transform:scale3d(1.1,1.1,1.1); transform:scale3d(1.1,1.1,1.1); }
  40% { -webkit-transform:scale3d(.9,.9,.9); transform:scale3d(.9,.9,.9); }
  60% { opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03); transform:scale3d(1.03,1.03,1.03); }
  80% { -webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97); }
  100%{ opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1); }
}

@-webkit-keyframes rotateInUpRight {
  0%  { -webkit-transform-origin: right bottom;transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);transform: rotate3d(0, 0, 1, -90deg); opacity: 0; }
  100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;
    -webkit-transform:none;transform:none;opacity:1;}
}
@keyframes rotateInUpRight {
  0%  { -webkit-transform-origin: right bottom;transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);transform: rotate3d(0, 0, 1, -90deg); opacity: 0; }
  100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;
    -webkit-transform:none;transform:none;opacity:1;}
}
/* circle  animation */
@-webkit-keyframes circle {
  0%{ -webkit-transform: rotate(0deg); transform:rotate(0deg);}
  100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
@keyframes circle {
  0%{ -webkit-transform: rotate(0deg); transform:rotate(0deg);}
  100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
@-webkit-keyframes circle2 {
  0%{ -webkit-transform: rotate(0deg); transform:rotate(0deg);}
  100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); }
}
@keyframes circle2 {
  0%{ -webkit-transform: rotate(0deg); transform:rotate(0deg);}
  100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); }
}
/* largen  animation */
@-webkit-keyframes largen {
  0%{ -webkit-transform: scale(1, 1); transform: scale(1, 1); }
  100% { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); }
}
@keyframes largen {
  0%{ -webkit-transform: scale(1, 1); transform: scale(1, 1); }
  100% { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); }
}
@-webkit-keyframes largen2 {
  0%{ -webkit-transform: scale(1, 1); transform: scale(1, 1); }
  100% { -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); }
}
@keyframes largen2 {
  0%{ -webkit-transform: scale(1, 1); transform: scale(1, 1); }
  100% { -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); }
}
@-webkit-keyframes zoomOut {
  0%  { opacity: 1; }
  50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); }
  100%{ opacity: 0; }
}
@keyframes zoomOut {
  0%  { opacity: 1; }
  50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); }
  100%{ opacity: 0; }
}
@-webkit-keyframes rotateOut {
  0%  { -webkit-transform-origin: center; transform-origin: center; opacity: 1; }
  100%{ -webkit-transform-origin: center; transform-origin: center;
    -webkit-transform:rotate3d(0, 0,1,200deg); transform:rotate3d(0, 0,1,200deg); opacity: 0; }
}
@keyframes rotateOut {
  0%  { -webkit-transform-origin: center; transform-origin: center; opacity: 1; }
  100%{ -webkit-transform-origin: center; transform-origin: center;
    -webkit-transform:rotate3d(0, 0,1,200deg); transform:rotate3d(0, 0,1,200deg); opacity: 0; }
}

.leave-immediately { display: none !important; }
.fade-in {
  -webkit-animation: fadeIn .3s ease-out both;
  animation: fadeIn .3s ease-out both;
}
.fade-out {
  -webkit-animation: fadeOut .3s ease-out both;
  animation: fadeOut .3s ease-out both;
}

/* reset element ui css */
.el-submenu .el-menu-item {
  min-width: inherit !important;
}
.el-button--text:hover { color: #ff474e !important; }

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

/*
 *common style
 */

.sui-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: keep-all; }

/* icons */
.sui-icons {
  display: inline-block;
  width: 20px; height: 20px;
  cursor: pointer;
}
.sui-icons-close {
  background: url(../img/icons/icons-close.png) center center no-repeat;
}

/* table */
.sui-table { max-width: 100%; width: 100%; border-top: 1px solid #ccc; border-left: 1px solid #ccc;  }
.sui-table td, .sui-table th {
  padding: 6px 12px;
  text-align: left; border-color: #ccc;
  border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;
}
.sui-table-small td, .sui-table-small th { padding: 2px 12px; }
.sui-table-bgg { background-color: #f5f5f5; word-break: break-all;}
.sui-table-bgw { background-color: #fff; }
.sui-table .sui-table-tdl { color: #666; text-align: right; }
.sui-table .sui-table-tdll { text-align: left; }
.sui-table-form .sui-table-tdl { background-color: #f5f5f5; }

/* tabs */
.sui-tabs { text-align: center; }
.sui-tabs > li {
  display: inline-block;
  height: 50px; line-height: 50px; vertical-align: middle;
  margin: 0 10px; padding: 0 2px;
  border-bottom: 2px solid #fff;
  cursor: pointer;
  font-size: 13px;
  transition: all .4s ease-out;
}
.sui-tabs > li.sui-tabs-li-sed {
  border-color: #70baf2;
  color: #70baf2;
  cursor: default;
}
.sui-tabs > a {
  display: inline-block;
  height: 50px; line-height: 50px; vertical-align: middle;
  margin: 0 10px; padding: 0 2px;
  border-bottom: 2px solid #fff;
  cursor: pointer;
  font-size: 13px;
  transition: all .4s ease-out;
}
.sui-tabs > a:hover { color: #70baf2; }
.sui-tabs > a.router-link-active {
  color: #70baf2;
  border-color: #70baf2;
}

/* slide */
.sui-slider-body { overflow: hidden; }
.sui-slider {
  display: none; overflow: hidden;
  position: fixed; top: 0; right: 0; z-index: 1902;
  width: 100%; height: 100%;
}
.sui-slider-main{
  display: block; overflow: auto;
  position: absolute; top: 0; right: 0; z-index: 1904;
  width: 800px; height: 100%;
  box-shadow: 0 0 8px #333;
  background-color: #fff;
}
.sui-slider-cover {
  position: absolute; top: 0; right: 0; z-index: 1903;
  width: 100%; height: 100%;
  background-color: rgba(221, 221, 221, .15);
}
.sui-slider-in { -webkit-animation: slideInRight .3s ease-out 0s both; animation: slideInRight .3s ease-out 0s both; }
.sui-slider-out { -webkit-animation: slideOutRight .3s ease-out 0s both; animation: slideOutRight .3s ease-out 0s both; }
.sui-slider-title {
  position: relative;
  background-color: #f5f5f5;
  height: 60px;
  border-bottom: 1px solid #e6e6e6;
}
.sui-slider-title > h2 {
  padding-left: 30px; padding-top: 20px;
  font-size: 16px; color: #333;
  text-align: left;
}
.sui-slider-title-text { display: inline-block; padding-left: 5px; }
.sui-slider-title-x {
  position: absolute; top: 24px; right: 30px;
  cursor: pointer; margin-right: 0 !important;
}
.sui-slider-title-x:hover { animation: circle 2s linear 0s infinite; }
.sui-slider-title-x2 {
  position: absolute; top: 24px; right: 30px;
  cursor: pointer; margin-right: 0 !important;
}
.sui-slider-title-x2:hover { animation: circle 2s linear 0s infinite; }
.sui-slider-content { padding: 20px; }

.sui-slider {
  display: none; overflow: hidden;
  position: fixed; top: 0; right: 0; z-index: 1902;
  width: 100%; height: 100%;
}
/* menu */
.sui-menu {}
.sui-menu-li {
  padding: 0 0;
}
.sui-menu-li > a {
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 50px;
  padding: 15px 20px;
  border-right: 2px solid #fff;
  -webkit-transition: color .2s linear; transition: color .2s linear;
}
.sui-menu-li > a:hover { color: #ff474e; }
.sui-menu-li > a.router-link-active {
  color: #ff474e;
  border-color: #ff474e;
  background-color: #f6f6f6;
}
.sui-menu-title {
  display: inline-block;
  padding-left: 40px;
  width: 100%;
  height: 20px; line-height: 20px; vertical-align: middle;
}
.sui-menu-icon {
  position: absolute; top: 15px; left: 30px;
}

/* 组织结构图插件样式 */
/* Draw the lines */
.jOrgChart .line { width: 1px; height: 20px; }
.jOrgChart .down { margin: 0 auto; background-color: #666; }
.jOrgChart .top { border-top: 1px solid #666; }
.jOrgChart .left { border-right: 1px solid #666; }
.jOrgChart .right { border-left: 1px solid #666; }
/* node cell */
.jOrgChart td { text-align: center; vertical-align: top; padding: 0; }
/* The node */
.jOrgChart .node {
  display: inline-block;
  margin: 0 8px; padding: 0 5px;
  z-index: 10;
  width: 120px; height: 40px; line-height: 40px; vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: keep-all;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #666;
}
.jOrgChart .node a {
  display: inline-block;
  height: 100%; width: 100%;
  cursor: pointer;
  color: #1f2f3d; font-size: 13px; text-decoration: none;
}
/*物料进程图*/
.jProcessChartCol .node {
  height: auto;
  border: none;
}
.jProcessChartCol .node {
  width: 135px;
  overflow: visible;
  margin: 0;
}
.jProcessChartCol .node a{
  line-height: 16px;
}
.jProcessChartColDiv {
  position: relative;
  border: 1px solid #a7a3a3a1;
  background: #67b1f1a6;
  max-height: 48px;
}
.jProcessChartColDivCurrent {
  background: #e6a23cb0;
  border: 1px solid #F56C6C;
}
.jProcessChartColDetail {
  width:260px;
  /* max-width: 200px; */
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
  border:1px solid #ebeef5;
  color: #606266;
  position:absolute;
  top: 0;
  left: 140px;
  z-index:999;
  background:#fff;
  border-radius: 4px;
  padding: 5px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.2);
  text-align: justify;
  font-size: 14px;
}
/*@media print {*/
  /*@page {*/
    /*size: 105mm 65mm;  !* or size: 794px 1123px;   *!*/
    /*!* size: 297mm 420mm;  or size: 1123px 1588px;  *!*/
  /*}*/
/*}*/

.ytg-print-table { text-align: center; max-width: 100%; width: 100%; border-top: 1px solid #ccc; border-left: 1px solid #ccc;  }
.ytg-print-table th {
  padding: 0px 10px;
  border-color: #ccc; color: #000;
  border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;
  word-break:break-all;
  text-align: center;
  font-size: 12px;
}
.ytg-print-table td {
  padding: 0px 10px;
  border-color: #ccc; color: #000;
  border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;
  word-break:break-all;
  font-size: 10px;
}
/*结算单打印--字体要大！*/
.ytg-print-table-biggerSize {
  border-color: #000;
}
.ytg-print-table-biggerSize th {
  border-color: #000; color: #000;
  border-right: 1px solid #000; border-bottom: 1px solid #000;
  font-size: 17px;
  padding: 10px 8px;
}
.ytg-print-table-biggerSize td {
  border-color: #000; color: #000;
  border-right: 1px solid #000; border-bottom: 1px solid #000;
  font-size: 17px;
  padding: 10px 8px;
}
.ytg-print-table-left {
  text-align: left;
}
.ytg-print-table2 { text-align: center; max-width: 100%; width: 100%; border-top: 1px solid #ccc; border-left: 1px solid #ccc;  }
.ytg-print-table2 td {
  padding: 10px 10px;
  border-color: #ccc; color: #000;
  border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;
  word-break:break-all;
}
.ytg-print-table2 th {
  padding: 10px 10px;
  border-color: #ccc; color: #000;
  border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;
  word-break:break-all;
  text-align: center;
}