/* c-message组件样式 */

.c-message {
  position: fixed;
  top: 10%;
  left: 50%;
  /* transform:translateX(-50%); */
  height: 50px;
  line-height: 50px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  min-width: 150px;
  font-size: 14px;
  color: #fff;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 0 6px rgba(0, 0, 0, 0.04);
  z-index: 9999;
}

.c-message-center {
  top: 40%;
}

.c-message--main {
  padding-left: 52px;
  padding-right: 20px;
}

.c-message--main-noicon {
  padding-left: 20px;
}

.c-message--icon {
  color: #fff;
  width: 18px;
  height: 18px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  left: 24px;
  top: calc(50% - 9px);
  line-height: 40px;
}

.c-message--success {
  background: #fff
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAPUExURUdwTACzKQC0KgCzKwC0KuS6fnkAAAAEdFJOUwCAv0BHJ479AAADsklEQVR42sWcUXKjMBBEJSsHkB0dgBAOgBMOYIm+/5n2c2p3K3QNqJX+t1/ejAgYRgRH0vM+zzPQ5o/7e1AkPWf8lY/72hnxbQRYau5pYQiC6YuwqnUp2nPBcTrIfIHm42qpiIZ1Rsaw5GsMNSXCkaxkGEXJMIquH5bmpyxwp3oZBZBTvnAqn8KmW7K3IeKCbYCcEnEh2VEstcoGKClWLHXBCiBXiYBepQBylRugV1nQIU0oYpmYiFwlAnqVgk6pQhFLJiJalQjoVQo6Zv8Bgq4RVssy6asFVKGIZQ3/5w2d89JXC2jCalkyuUYRHSoLIK9XhCCZrC3J+ioQpJFqKY7HGySZSLUE/78girAllkwWcPdFXAB9UyCLsCWWVd8SYNK3BNgHtATNWiLMOgIy6fsOvKzv+s4vGNB5QN/5CGmy9V29vDZIs3dbXJ8hlcPOL31OG/EQ0qu55eCUEnud/9LBGu53F237eXm9dTuRRyUkH//82Pvc2NRDTCRsP67hfiKhyCCZQRBC0l8jriH2E4kqSOVX1MghykUwhZtOxCBvchG8DCITwR42nYhBilwE9RCyr0+niB/SyIeJCIGQM7dTBC0s5A+NHhE/JJPPcxEOafYFXOQsZLdv4CIEwu9YRC5CIbzkhYqQBPCf+ZGKcAi/wVOYCIfwW8fxmgjIErbvoSIcwlvLRfhxwnpL+RzCVTieQ7gKpXMIV+Fwfj7hKpTNIVyFi3AIVzkgM8gGhwoR4dddXIWK8CtIruIVMcgNDhUmwq/quQoX4b9PuIpPxCAJDhUuwiFcxSdid3DgUElnRBBCWDwqTIRDuMopkWo3RJwqEW6IX6X47tbfcEIlojsEmYjQDyfw1MvT3fCrFPdTwMWj4hdpBnGpFP+P/Q1OlXjigcDNfxfQk5fnkuPaUH+CT6XAFdeDs3pOpPkmfPIpkep7mFnPiODlnCfJfhFrZXKYf118JMHT7jO86TLbxe2tKfqZkgRZ8riREv1wjH7MZ9DAkr4pQ4bIxo/DJW1LlBMfdfywpX5sVD8Aqx/l1Q8ly+tVf2tQPGmrpR/et9xEIvoNFdpDpQ7b5KLfrqNXyeO2UGlXcR6zrU2vMo3baqhdYNOw7Z/6jaxylTpoc7FcZQ9BTmm/tnWdqfiLJae0gS9G0L/iQf+yCjmlBW/i4masY16FIqfkMa+n0VGsH0IKZ3BKETIsD8dxritZew8dkg5l5jX0SSwEocTM36Fv0v3xD+F9DYo87495AeZ5vrsIfwD6Nx5u4Z6PNgAAAABJRU5ErkJggg==)
    no-repeat 0 50%;
  background-size: cover;
}

.c-message--error {
  background: #fff
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABUUExURUdwTP9HAP9LAP9HAP9MAP9MAP9LAP9LAP9PAP9MAP9LAP9MAP9MAP9LAP9LAP9MAP9MAP////9jIP/p3/+8n//Uwv+wj/+lf/95QP9uMP/07/9XEPwpyZkAAAAQdFJOUwAQ7yCnb4/fH1/Pz79gQD8T2UI3AAABB0lEQVR42o3U7Y6DIBRF0SOiF8G2R/xoZ+b933MSRgi9dWz3L02WEAyAOtdZMaTxtnM47jKyyg8H5CpUiWZNz4P6pjYu8DBxlRHynWoqo/N5xp4n9fvSedo1IWHqa10ic3Fd84vUA63TNMds5mlauDcACAUllc10z2gEHMvXSeWnhSWHjlppww6WSj20oUWgUpM2FBhqpQ0N+NQjocjnwIORZqVgtPl+UQaizBJnrTysMuSLsui0yeqn+pmOe+tustoKaoGxoGSKKshXWyVud5bissV6q0B4mvwdy3M0fH4Q0ISTyRrstfKvaYF3yrefXxili2giN0USCzUZBxzXdjYY0oi6Dn8BN9FAh8jXYa4AAAAASUVORK5CYII=)
    no-repeat 0 50%;
  background-size: cover;
}

.c-message--info {
  background: #fff
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAPUExURUdwTBVd/xZd/xdb/xZd/yMcm6YAAAAEdFJOUwCAv0BHJ479AAADYUlEQVR42u2aUXLbIBRFJeEFoIQFyDYLwIkWYBD7X1Pz095pp23yXnU0dSbnO5qTdx8gsBiMhNc3Bo5wu+T+nfNcEEP/hbazJ7z03yINoZBmJ8ct978R93C89Hc4/3tUub9LjWAZIpIOWUiHLKBDzKBDPHscYxdUYqF33BKyXVKLUZK6g0o2XRaw6SJyDRHt45K1u6lgWCJyYYkGhiUqGJaIhmnopoKFiMgVIqqhEK6U3AU1jKe+CwvXEVHBjojIFSIqWIiIXCGiGjYofsofJKc9JXcuLdHAtovIFSK2QYi+M2BaYuHSEhUsRBTXIu/PS2nxeXWAwrVELFxaYvOmdX69PRnWL1da0fbXrlX+ahvvm6cl1fj3zdOSaI3X0ZJm3mlGe0uq+aR0t7ckmpe66miJfWdjnyWeoaKWOAZktjYlcZJND3CSpnwxid4pIymJ6js2uvpifWEVx7ths0oWh6RZ34qb51ce6x6iefYERRLgfaKMNbiIN6MWltV+shnN+6LUrZaQEYmYS3jJ9sNjh9E7DqSoiRxRWwKORdOE465pQqAxnD6FpLISzcZ8hKTjHCIp5lWlPc/JKtGqYjg03ljJ1XPqjzZJc/22sAyT63eMCZQMP+AkVZIVkyyS2B47dbHrwVTcTZIBkBgOQQ8mqYdL0pcEk0y8ZPmS/IeSkZfEYyTh0SU6NPISrdkPLmmsRI+tn0KysRKd46cHl2jfGT6FRNs0TtJoiZ5aj5CcWMldhyZOstASHc8CK9FRg5M0HZcpiR46kZK7zuScJOq4zEsGUnLEZ1n9Y+sRH5gnh8TQElvnixzBLBky8MVULXHf3TjZJZP5kWRIy9uU0dAS94BcLVPR+lB0LUTWNdJ1d0FN+aAlWr7KFu+du8vFfUfxBH38E8oLvjKcj7jRuXJpiZFOS3nRV8VX7tKoGMG0ROLGlpi4e7wigDeSReLSEiPYdpG5QsQEtl1kbraLlVsbRQDHr1i5ZUuM4PgViStEBLAjYgULEZmbI2ICJ7tIXCFiBIevSDt0He19Kx+VjGBYIoFhicyFJUY0LFn80xBty3UQlKUODhLXdDEm0CES6ZCFdMgCOsQTMHY9s7LJ4bckMCoxG8ogNNcy7EeYSYW4zfmnnM6vA0KY5/nyxnl+thp4vgGYmvq3TzBouAAAAABJRU5ErkJggg==)
    no-repeat 0 50%;
  background-size: cover;
}

.c-message--warning {
  background: #fff
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAPUExURUdwTP99AP99AP97AP99AODWpyAAAAAEdFJOUwC/gEAwzgZsAAADf0lEQVR42u2cUXKjMBBEBeIAONYBZMIBlOADIDH3P9P+bdf+xO4xrdpypb+tesy0JATMOHCK27Ysn1sJKm23ZH9Vl01JgD7yqYh4MUiAAUKK+bIftZwRRrIHauVlw5M9VhamClqUDPgvZEBNyQBFzADFzxD6MhitzDKimYBCrPOz1v5qLjWh6dD8PGM0t7IuWVATJgu6CpMFZV2yoEYEog0lmclDGexlzfx+wqs+gtztBB3E5utXIQIRhWKmD2U4CzLr1ghUicWuCGU9D9JeCaReS/ymdjA+kFrwS1co8WlGGJN3Fg+EnaPX+pVJQeLzxV/c4LN+sofiDDxcq71xya2ubO1k4NmzyWdyLh6elZjZVcVlC75DjrvKpIDsjg2YvvdUxwbMQJAvaNBAZiJbbshBuMhDMAQaXRDSlMkFIU1ZXRDSFPNAyDGjD8KZMuggMyzRQY4eEAwyGQSmjD0gkw4C5+86CJxfdRCMMiXE4LsQUtQQOD9pITt810EONQTDUg+IaSGGySWEFC0Ec3joAZl0EMzh9S0gDT9WQDDO3gJiIUQ9pPSBjHpI7gGZw9ADMukh+y+Eg9z1kOMXwkHWN4G0N4QIXnQCcv/PIMX5ke1gIHN3yKSA8J82AGGuyHy+205BMmsJIK58rTKIZQRCQQYj1MhAcO7iKGBQJ0iOklEQ+zwkGqmajFQBRKcSgh4SQkhvAancdPSXS9zfArLjBY5OsxaCXTX2gAT9MtEvlKqG4O5w7wGZ5MtEO4dxLohyiH4O43FG6rt+eh0h6J3fXbWilwvpOw+5lhDCjfKddv7KniAbKqJ0Z2FABt2pHo+AUfd8kjEkyZ60+Fpk/q1Ho+uEG18jvQcoEiOo68p08JmHBDr4EtjgG1+8Hf4RX/8cNZD8aple4guTJx7ClyhGRboyXWTLQxpfAMu/Hjychc/Q6Cp9TmfXC1e+K4R/Pbj7CsU537Ov5H1mLqk5i/cbd0UQFJmDBDXhfVXsMRFR09Y3vqqcD8XaJ5rAyUDOP97n/o1H/Vuo4lmQ3m1t+gY9fauhdILV0rX9U9fbVvu25Oqbi/Vt0vqGb33reucmfNliuXb5YwRGcX1hP9HaAoaOMgdaN6Hp0KpkgKJkgKJkwBchA1pUDL49cAsvKq7EOvdrEaYKGn/w/4IwFBgglJj6ofhbtSUpCVDcvpdl28gs/QH6lbHYkyDXsQAAAABJRU5ErkJggg==)
    no-repeat 0 50%;
  background-size: cover;
}

.c-message--close {
  position: absolute;
  right: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  cursor: pointer;
  font-size: 22px;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.c-message--close:hover {
  color: #fff;
}

@keyframes messageFadeInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

.c-message.messageFadeInDown {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: messageFadeInDown;
  animation-name: messageFadeInDown;
}

@keyframes messageFadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

.c-message.messageFadeOutUp {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: messageFadeOutUp;
  animation-name: messageFadeOutUp;
}

/* .c-message--tip{
    text-align: center;
} */