//
//展示窗
//

@mixin showcase-content {
  width: 100%;
  text-align: center;
  color: $c-theme-yellow;
  text-shadow: 0 1px 0 $c-grey-normal;
  z-index: 5;
}

.xm-showcase {
  background: $c-linear;
  width: 100%;
  height: rem(180px);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: rem(28px);
  &[role="dark"] {
    background: $c-theme-grey;
  }
  > .xm-title {
    @include showcase-content;
    font-family: $font-theme;
    font-size: rem(80px);
    line-height: 1;
    &.small-fix {
      font-size: rem(60px);
    }
  }
  > .xm-desc {
    @include showcase-content;
    font-size: rem(18px);
    line-height: 1.2;
    margin-top: .2rem;
    &.small-fix {
      font-size: rem(15px);
      margin-top: .4rem;
    }
  }
}
.xm-showcase-bg{

}

.xm-showcase-img{
  width: 100%;
  z-index: 4;
}

.showcase-animation {
  position: relative;
  &:before, &:after {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: '';
    display: block;
    z-index: 2;
  }
  &:before {
    //background-image: url('/img/assets/showcase_1.png');
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAAC0CAMAAABYFZxiAAAAgVBMVEUAAAD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gAPt7SfAAAAK3RSTlMACRYiKi8yAhcrMwEHKQ8wEhAIFSEnDh8EKDETAyAFHiYuLRQRHRojLCQYTiDxDwAAA7hJREFUeAHt3Ydi6jgQheGBxAZGgI0TioGlt5v3f7/tJcVYvlkNSvm/N0iTx2eOggAAAAAAgC+o1b67T9I0ub9rtwS30en29JletyMw59qJvpK0ncBWf6AVBn2BpWGmlbKhwE6e6hVpLrAySvWqdCSwUWRaIysEFtxAaw2cwEBbPdqC8DqJeiQdQXBd9eoKguupV08QWksbaAkCa6ty0ERwpw3cCQK71wbuBYEl2kAiCCzVBlIJqf/wOEjSNBk8PvTlNvi+u3ysz4xzJ/Y4ZyY9faU3EWM8VztTrTDtiCXmyFmplcoZ8Yzhe9Osp1f0ZmKFnKBT6lVlR4yQi021xlRskANPtNZETLD36GmtnhMD7Ply9cjFAHvtsXqM6XG8MC8kgL569SU4eksP6vUg/6Gnt5AgHtXrUb6f0VwrzUcSxkC9BvINFdU97MI49mS54tqZvpK13S1j/lS+p+XrezZLEb7vN9Hq/nOvrNsSj9jnDOI/VxF/jkT89yaQExgjF4uPHDg+F2HvgXh7PvzCXttY/B4H4veWMBtopcFMYCBOLxXxe9hweanPlLmT9wP3bAAAAAAAAAAAAAAAq3y92WaabTfrfCU3AZdv9LnNwgnMLXb62m4vsNUfa5VxX2DokGm1LBeYacf4j/joxvgoAhy03kFgoMi0XlYIwhurTykIbqF+e0Fgbqd+OycIa6FNLARhbbSJjSColTazEoSUazO5IKS1NjMV2A/vjPDWdtrMVhBSps1kgpC0KQG/75zvYJ5hfgfvqz+NfIYDfizvBvJ39k3Ys1+No/z54R30Z9zwWG7TdFseh46+2K0sT4n+Kzkt6UfeRL7VF7a5fCbdz/ltd2t9Y+3kE8nnWm2ey4flzlrh7OQT6ZdapSzk4zpqpbV8KvvPdr/p8EV6426x0efGCycf2DLRK5KlfDKrxb/3Vxcr+dhOetVJYMUlelXipAkU3fMl0+zyo1tIQ0OtMRT4jUr9TzlqOszUOAp8io2+tCn+975mLPA4zPW1+UH8Ej5YOHz6vxevVGukUguHVKukhyjfd6L/rOCciXK5asNz1c5IrxtFmSPZ7Ja8N1kptE5BThBlvfhELmbkrHXORjkwLlrnIh4Hi+4yd3wy8Vm/a88HrRdnr83ve8QeB+e7R57oC0kuCDDPGPT08OSf3xv2UpM0Tcx6qbyvIn4+A9s8EgbGURJ0FFdryIUg/n4V8fsEsO/PwE4x1pfGhSB+PxJ2iqcff/WBnwoBAAAAAAAAAAAAAADAx/Ub9AfduJEkNTMAAAAASUVORK5CYII=');
    animation: linear showcase-lite-1 10s infinite;
  }
  &:after {
    //background-image: url('/img/assets/showcase_2.png');
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAAC0CAMAAABYFZxiAAAAjVBMVEX/////0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gDzSFGMAAAAL3RSTlMACRYiKi8yBxUhKQIXKzMBEicOHw8wBCgQCAMkLTEYBiAFHiYuExQRGwocIywdGqhWviIAAAVqSURBVHgB7MEBAQAABAAg/1d7AVTRCAAAAAAAAACSvbo6cB4GggA8BoFBY2Zf0n+VPzN4HxTWfQUIFqM4SZXWKk3iCFdhbJZ/viHPrMG7z4rS8ReuLHBhVd3wF01dIXhVrPgHFV82Lq3jH1yLwJmc/5AbXEzR8R+6AiHrB/7T0ONCxon/NI0IV635H7q+UNgd/8OFG/hZ87/0jAsoJv7XVCBMy8ADwwJ/HQ90CFKV81BewVfLQy1CFFMQw5fjIVchPIWiQBXwU1NQIzwlRSX8NBQ0CI+jyMGLocggNBEpi+DDUmTft+rlB01GUYYLWe226ze32RWPLSFlCXzkFOW4iOI08JvhVOCRpaQshQ9FkcIlnFP+Ij3jgSny2mHRFOmLhH3nb/ZHDrwmZfoZ4v6RvTtRblWHwQCsMAXuFEYmk7iENGRuWEpPt/d/u7tvcU3q9IijS/m/R+jiRfqNslK98qPwc9dfZ478znFp64zCvnpn+R17t4B9Vfkc+ZP+vUD/HKlwb7pnj/s5l2eY8xnUCQ7scVhAnUC5LpawR7KAuphyHdiyR7LoOrCR73sE/v0cFtD3UO7z+ffVZff56OeQvrb+OfJUNG1n2XZtU5z0+9oKOQ6Fe5MpWv6vtjeaOY66UsgtKdQJ+gO7Dg+quSURd7fsdXtHQrIbdtxkFCpds8861crp9fPJpaYdn+lSCjVY9rMFTWlXs1e9m1MOO/1s3yMKPETLq/w57IokmaLk/ygLQy6VPl/OrPaDN5Flh42Mwjsbgb52criqrz3wZQNNau++s9kjlutN5spb5X+/K8tXtBRr/khJ4qDnjz2QMDAH/tjBkCzoOURPsqDlEC2JghOHOZEkKDhMQZKg4TAbkgRrDlOSJDhwmI4kgeUwliQBhyLA3zvWd8B5Bud3wH0V9RkYX+Dlg+KA+jv6TfCg01+FEof3BeRnQCUvBvr5SMh1fuxQ1OxXFzQhSEv2KSuaFjyEvG+SB6Zv+b/WvaGrZENTxkkSl82QEVzh1P/zfrU/0XXSTc3/qDcpwQ+QPSZ8JnnMSAPGdNymNC341rFH942mBGnMXnFK8sD/UNz/YFwePPKoR5oKpAmPSlKSA/ozY2Bf8wX1niYBg0rTBDYqAT8oVXriEPNFMYHGh9wTAvzcsc4A9lWcI/9HVtHf34CKVrg3/SCZ+82zDHWC6ZkoZkccGdTFFJqWk7ctUQfeWvay2/n0PZ5Ij/w3iwv0+ZS+0Y2+tsojDFshxzHXGQziX+J23aRfcApyhJye2owdffq5VP2ZUvqyYvNnDntTZKRKf4YayM8MFAYRB8gJ1GbCgv4MZNCf+Q36M+5noMqfXyzbl/u8ou9ktq9llyRd+bo1+LlftCv5X+WOvsP+LeZ/xG97rDOjqpbPtRV9VuFOyiuwr44YanbVA32KafidxuAc6fMg910t88wez4aC5Yu5Nw0J+yQDXe+VvRrUCcK7O7aSy/EMqIu5WrnBRfuYR8R7+TrwvO143I6u88aj3ubd95BXyuVZTcyjYjPnPp+8ii+p6BpbvmA72762QlftKHGY+dOrVI6jrugLeOZLnuU+672Wzy3N2Qtf8iJXWomFcnr9EmbpWLlSYkLX2NXsVe+WMTtK6+dOlT+HXRHh7110nXGZyLLDRoYcWN8F9lXH3n1nsycXzjMy50jXKv/7XVm+oi/lyJccJe9NknBfla8T4MlxKVkXk4R6pHwdGEO71nJ9j4IcUNWCBaiGvRoCgf6qQF9bFPIEYzkOccjPuIqYz8QFwYhqzefWlWxOTx7ykf5capwkcUAuFarj/Z954CPm5/zaHhwQAACAIAD6/7oZlQKXAQAAAAAAAAAMTtmxKBACcLAAAAAASUVORK5CYII=');
    animation: linear showcase-lite-2 8s infinite;
  }

  &[role=dark] {
    &:before {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAAFklEQVR4AWMgD4yC/3r/9chWRBiMAgAiugS1Cs8RuwAAAABJRU5ErkJggg=='), -webkit-linear-gradient(45deg, #564743 0%, #564743 100%) !important;
      background-size: rem(9px) rem(9px), auto;
      animation: showcase-dark-dot 0.5s linear infinite;
    }
    &:after {
      background-image: none;
    }
  }

}

@keyframes showcase-lite-1 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 180px;
  }
}

@keyframes showcase-lite-2 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 180px;
  }
}

@keyframes showcase-dark-dot {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 9px -9px, 0 0;
  }
}