.topTip {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    -webkit-transition-property: all;
    transition-property: all;
    transition-property: all;
    transition-property: all, -webkit-transform;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%);
    z-index:9999;
    text-align: left;
}
.topTip-active{
  height:auto;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}
.topTip-error {
    background-color: #ff7360;
}
.topTip-success {
    background-color: #00e099;
}
.topTip-notice {
    background-color: #ff9500;
}
.topTipText {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 16px;
    color: #ffffff;
    line-height: 38px;
}
.toptip-icon {
  position: absolute;
  left: 12px;
  top: 9px;
}
.left-topIcon {
    left: 14px;
    color:#fff;
    font-size: 16px;
}
.right-topIcon {
    right: 12px;
    top: 16px;
  &:before{
    color:#fff;
    font-size:32px;
  }
}
.fixTop {
  padding-top: 25px;
}
.fixTop .topTipIcon {
  top: 34px;
}
.fixTop .right-topIcon {
     top: 29px;
     display: inline-block!important;
     font-size: 16px;
}
.tip-cross-box {
    display: inline-block;
    width: 40px;
    height: 40px;
    position: absolute;
    line-height: 40px;
    right: 0;
    top: 0;
}
.tip-cross {
   top: 21px;
   right: 12px;
   display: inline-block;
   width: 20px;
   height: 1px;
   background: #fff;
   font-size: 0;
   line-height: 0;
   position: absolute;
   vertical-align: middle;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}
.tip-cross:after {
   content: '';
   display: inline-block;
   width: 20px;
   height: 1px;
   background: #fff;
   -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
}