动画中心动画SVG中心动画

时间:2017-10-17 12:21:51

标签: html css css3 svg svg-animate

我创建了2个svg,其中一个使用vivius来设置轮廓的动画,另一个用来填充轮廓!但是我不能让它成为一个包装div的中心!这是我的代码......

<div id="homeWrapper">
      <div id="big-logo">
        <div id="svg-wrapper">
          <div id="svg-layer">
            <svg id="CCMS-animated" width="671.712px" height="74.875px" viewBox="249.863 47.554 671.712 74.875">
            <g>
              <g>
                <path d="M278.583,53.794h-22.52v16.32h22.52v6.24h-22.8c-1.654,0-3.054-0.573-4.2-1.72
                  c-1.147-1.146-1.72-2.546-1.72-4.2v-16.96c0-1.653,0.573-3.053,1.72-4.2c1.146-1.146,2.546-1.72,4.2-1.72h22.8V53.794z"/>
                <path d="M288.862,47.554v22.56h16.32v-22.56h6.28v22.88c0,1.627-0.58,3.02-1.74,4.18
                  c-1.16,1.16-2.554,1.74-4.18,1.74h-16.96c-1.654,0-3.054-0.573-4.2-1.72c-1.147-1.146-1.72-2.546-1.72-4.2v-22.88H288.862z"/>
                <path d="M344.461,53.474v2.68h-6.28v-2.36h-16.32v5.04h16.68c1.626,0,3.02,0.58,4.18,1.74
                  c1.16,1.16,1.74,2.554,1.74,4.18v5.68c0,1.627-0.58,3.02-1.74,4.18c-1.16,1.16-2.554,1.74-4.18,1.74h-16.96
                  c-1.627,0-3.02-0.573-4.18-1.72c-1.16-1.146-1.74-2.546-1.74-4.2v-2.68h6.2v2.36h16.32v-5.04h-16.6c-1.627,0-3.02-0.573-4.18-1.72
                  c-1.16-1.146-1.74-2.546-1.74-4.2v-5.68c0-1.653,0.58-3.053,1.74-4.2c1.16-1.146,2.553-1.72,4.18-1.72h16.96
                  c1.626,0,3.02,0.58,4.18,1.74C343.881,50.454,344.461,51.848,344.461,53.474z"/>
                <path d="M347.301,47.554h28.8v6.24h-11.28v22.56h-6.24v-22.56h-11.28V47.554z"/>
                <path d="M384.941,47.554H401.9c1.627,0,3.021,0.58,4.181,1.74c1.159,1.16,1.739,2.554,1.739,4.18v16.96
                  c0,1.627-0.58,3.02-1.739,4.18c-1.16,1.16-2.554,1.74-4.181,1.74h-16.959c-1.654,0-3.055-0.573-4.201-1.72
                  c-1.146-1.146-1.719-2.546-1.719-4.2v-16.96c0-1.653,0.572-3.053,1.719-4.2C381.887,48.128,383.287,47.554,384.941,47.554z
                   M385.221,53.794v16.32h16.32v-16.32H385.221z"/>
                <path d="M428.381,59.194l9.72-11.64h6.44v28.8h-6.24v-19.32l-9.92,11.84l-9.961-11.8v19.28h-6.199v-28.8h6.4
                  L428.381,59.194z"/>
                <path d="M476.02,47.554v6.24H455.7v5.04h16.36v6.24H455.7v5.04h20.319v6.24h-26.6v-28.8H476.02z"/>
                <path d="M508.74,53.514v7.44c0,1.627-0.588,3.02-1.76,4.18c-1.174,1.16-2.574,1.74-4.201,1.74H502.5l6.24,7.36
                  v2.12h-6.4l-7.96-9.48l-8.24,0.04c0.08,0,0.12,0.08,0.12,0.24c-0.054,0-0.094-0.013-0.12-0.04v9.24h-6.2v-28.76h22.84
                  c1.627,0,3.027,0.58,4.201,1.74C508.152,50.494,508.74,51.888,508.74,53.514z M486.14,53.794v6.84h16.32v-6.84H486.14z"/>
              </g>
            </g>
            </svg>
          </div>
          <div id="svg-layer">
            <svg id="CCMS-white" width="671.712px" height="74.875px" viewBox="249.863 47.554 671.712 74.875">
            <g>
              <g>
                <path d="M278.583,53.794h-22.52v16.32h22.52v6.24h-22.8c-1.654,0-3.054-0.573-4.2-1.72
                  c-1.147-1.146-1.72-2.546-1.72-4.2v-16.96c0-1.653,0.573-3.053,1.72-4.2c1.146-1.146,2.546-1.72,4.2-1.72h22.8V53.794z"/>
                <path d="M288.862,47.554v22.56h16.32v-22.56h6.28v22.88c0,1.627-0.58,3.02-1.74,4.18
                  c-1.16,1.16-2.554,1.74-4.18,1.74h-16.96c-1.654,0-3.054-0.573-4.2-1.72c-1.147-1.146-1.72-2.546-1.72-4.2v-22.88H288.862z"/>
                <path d="M344.461,53.474v2.68h-6.28v-2.36h-16.32v5.04h16.68c1.626,0,3.02,0.58,4.18,1.74
                  c1.16,1.16,1.74,2.554,1.74,4.18v5.68c0,1.627-0.58,3.02-1.74,4.18c-1.16,1.16-2.554,1.74-4.18,1.74h-16.96
                  c-1.627,0-3.02-0.573-4.18-1.72c-1.16-1.146-1.74-2.546-1.74-4.2v-2.68h6.2v2.36h16.32v-5.04h-16.6c-1.627,0-3.02-0.573-4.18-1.72
                  c-1.16-1.146-1.74-2.546-1.74-4.2v-5.68c0-1.653,0.58-3.053,1.74-4.2c1.16-1.146,2.553-1.72,4.18-1.72h16.96
                  c1.626,0,3.02,0.58,4.18,1.74C343.881,50.454,344.461,51.848,344.461,53.474z"/>
                <path d="M347.301,47.554h28.8v6.24h-11.28v22.56h-6.24v-22.56h-11.28V47.554z"/>
                <path d="M384.941,47.554H401.9c1.627,0,3.021,0.58,4.181,1.74c1.159,1.16,1.739,2.554,1.739,4.18v16.96
                  c0,1.627-0.58,3.02-1.739,4.18c-1.16,1.16-2.554,1.74-4.181,1.74h-16.959c-1.654,0-3.055-0.573-4.201-1.72
                  c-1.146-1.146-1.719-2.546-1.719-4.2v-16.96c0-1.653,0.572-3.053,1.719-4.2C381.887,48.128,383.287,47.554,384.941,47.554z
                   M385.221,53.794v16.32h16.32v-16.32H385.221z"/>
                <path d="M428.381,59.194l9.72-11.64h6.44v28.8h-6.24v-19.32l-9.92,11.84l-9.961-11.8v19.28h-6.199v-28.8h6.4
                  L428.381,59.194z"/>
                <path d="M476.02,47.554v6.24H455.7v5.04h16.36v6.24H455.7v5.04h20.319v6.24h-26.6v-28.8H476.02z"/>
                <path d="M508.74,53.514v7.44c0,1.627-0.588,3.02-1.76,4.18c-1.174,1.16-2.574,1.74-4.201,1.74H502.5l6.24,7.36
                  v2.12h-6.4l-7.96-9.48l-8.24,0.04c0.08,0,0.12,0.08,0.12,0.24c-0.054,0-0.094-0.013-0.12-0.04v9.24h-6.2v-28.76h22.84
                  c1.627,0,3.027,0.58,4.201,1.74C508.152,50.494,508.74,51.888,508.74,53.514z M486.14,53.794v6.84h16.32v-6.84H486.14z"/>
              </g>
            </g>
            </svg>
        </div>
        </div>
      </div>
    </div>

这是用来设计它的CSS ...

#homeWrapper {float:left;width:90%;height:80%;margin:8% 5% auto 5%;display:block}
#homeWrapper #big-logo {float: left;
height: 224px;
width: 60%;
margin: 4% 20% 0 20%;
display: block;}
#homeWrapper #big-logo #svg-wrapper {height: 80px;
width: 100%;
float: left;
margin-bottom: 20px;}
#homeWrapper #big-logo #svg-wrapper:after {content:"";display:table;clear:both}
#homeWrapper #big-logo #svg-wrapper #svg-layer {position:absolute}
#homeWrapper #big-logo #svg-wrapper #svg-layer:after {content:"";display:table;clear:both}
#homeWrapper #big-logo #svg-wrapper #svg-layer #CCMS-animated {
  fill:none;
  stroke:rgba(255,255,255,.5);
  stroke-width:1.25px;
  -webkit-animation:fadeOut 1s 2.75s ease;
  -moz-animation:fadeOut 1s 2.75s ease;
  animation:fadeOut 1s 2.75s ease;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards
}
#homeWrapper #big-logo #svg-wrapper #svg-layer #CCMS-white {
  fill:#fff;
  opacity:0;
  -webkit-animation:fadeIn 2s ease;
  -moz-animation:fadeIn 2s ease;
  animation:fadeIn 2s ease;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards
}
@-webkit-keyframes fadeIn {from {opacity:0} to {opacity:1}}
@-moz-keyframes fadeIn {from {opacity:0} to {opacity:1}}
@keyframes fadeIn {from {opacity:0} to {opacity:1}}
@-webkit-keyframes fadeOut {from {opacity:1} to {opacity:0}}
@-moz-keyframes fadeOut {from {opacity:1} to {opacity:0}}
@keyframes fadeOut {from {opacity:1} to {opacity:0}}

我正在使用一些Javascript来制作它的动画但是因为我只是想让图像居中,我会把它留下来!我还创建了一个小提琴,展示它应该如何工作HERE

1 个答案:

答案 0 :(得分:0)

这是修复它的小提琴代码:

&#13;
&#13;
$.stellar(),$(document).ready(function(){new Vivus("CCMS-animated",{type:"delayed",duration:600,animTimingFunction:Vivus.EASE_OUT})}),function(){var t,n,e,a,r,i,l;(r=[]).push({delay:2e3,text:"OpenText Exstream Specalists"}),n=$("#typed-wrapper"),e=$("#message"),t=$("#animate"),a=null,l=function(t,n,e){var a,r,i,l,u,o,s,h,f,p,c,d,g,m,v,y,x,b,M,T,k,E,O,S,w,C,V;for(i={probability:.2,glitches:"-|/\\",blank:"",duration:120*n.length,ease:"easeInOutQuad",delay:4e3},a=$(t),O=$.extend(i,e),function(){if(Math.random()<.5)return 1;retun},V=function(t,n){return'<span class="'+n+'">'+t+"</span>"},d=O.glitches,p=(f=d.split("")).length,c=O.probability,g=function(){var t,n,e;for(e=[],t=0,n=f.length;t<n;t++)y=f[t],e.push(V(y,"glitch"));return e}(),o=a.text(),(u=o.split("")).length,s=function(){var t,n,e;for(e=[],t=0,n=u.length;t<n;t++)y=u[t],e.push(V(y,"ghost"));return e}(),w=n.split(""),C=w.length,b=function(){E=[];for(var t=0;0<=C?t<C:t>C;0<=C?t++:t--)E.push(t);return E}.apply(this).sort(this.shuffle),M=[],m=v=0,k=C;0<=k?v<k:v>k;m=0<=k?++v:--v)h=g[Math.floor(Math.random()*(p-1))],l=s[m]||O.blank,r=Math.random()<c?h:l,M.push(r);return x={value:0},S={value:1},T={duration:O.duration,ease:O.ease,step:function(){var t,n,e,r;for(e=Math.floor(x.value*(C-1)),m=n=0,r=e;0<=r?n<=r:n;m=0<=r?++n:--n)t=b[m],M[t]=w[t];return a.html(M.join(""))},complete:function(){return a.html(n)}},$(x).delay(O.delay).animate(S,T)},i=function(){var t,n,e,i,u,o;for(e=i=0,u=r.length;i<u;e=++i)t=r[e],(n=a.get(e)).innerText="",o={delay:t.delay},l(n,t.text,o)},function(){var l,u,o;for(t.click(i),l=u=0,o=r.length;u<o;l=++u)r[l],e.append("<h2>");a=n.find("h2"),i()}()}.call(this);
&#13;
body {background:#ccc}
#homeWrapper {width:90%;height:100%;margin: 0 auto; text-align: center; display:block}
#homeWrapper #big-logo {

display: block;}
#homeWrapper #big-logo #svg-wrapper:after {content:"";display:table;clear:both}

#homeWrapper #big-logo #svg-wrapper #svg-layer:after {content:"";display:table;clear:both}
#homeWrapper #big-logo #svg-wrapper #svg-layer #CCMS-animated {
  fill:none;
  stroke:rgba(255,255,255,.5);
  stroke-width:1.25px;
  -webkit-animation:fadeOut 1s 2.75s ease;
  -moz-animation:fadeOut 1s 2.75s ease;
  animation:fadeOut 1s 2.75s ease;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards
}
#homeWrapper #big-logo #svg-wrapper #svg-layer #CCMS-white {
  fill:#fff;
  opacity:0;
  -webkit-animation:fadeIn 2s ease;
  -moz-animation:fadeIn 2s ease;
  animation:fadeIn 2s ease;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards
}
@-webkit-keyframes fadeIn {from {opacity:0} to {opacity:1}}
@-moz-keyframes fadeIn {from {opacity:0} to {opacity:1}}
@keyframes fadeIn {from {opacity:0} to {opacity:1}}
@-webkit-keyframes fadeOut {from {opacity:1} to {opacity:0}}
@-moz-keyframes fadeOut {from {opacity:1} to {opacity:0}}
@keyframes fadeOut {from {opacity:1} to {opacity:0}}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="homeWrapper">
      <div id="big-logo">
        <div id="svg-wrapper">
          <div id="svg-layer">
            <svg id="CCMS-animated" width="671.712px" height="74.875px" viewBox="249.863 47.554 671.712 74.875">
            <g>
              <g>
                <path d="M278.583,53.794h-22.52v16.32h22.52v6.24h-22.8c-1.654,0-3.054-0.573-4.2-1.72
                  c-1.147-1.146-1.72-2.546-1.72-4.2v-16.96c0-1.653,0.573-3.053,1.72-4.2c1.146-1.146,2.546-1.72,4.2-1.72h22.8V53.794z"/>
                <path d="M288.862,47.554v22.56h16.32v-22.56h6.28v22.88c0,1.627-0.58,3.02-1.74,4.18
                  c-1.16,1.16-2.554,1.74-4.18,1.74h-16.96c-1.654,0-3.054-0.573-4.2-1.72c-1.147-1.146-1.72-2.546-1.72-4.2v-22.88H288.862z"/>
                <path d="M344.461,53.474v2.68h-6.28v-2.36h-16.32v5.04h16.68c1.626,0,3.02,0.58,4.18,1.74
                  c1.16,1.16,1.74,2.554,1.74,4.18v5.68c0,1.627-0.58,3.02-1.74,4.18c-1.16,1.16-2.554,1.74-4.18,1.74h-16.96
                  c-1.627,0-3.02-0.573-4.18-1.72c-1.16-1.146-1.74-2.546-1.74-4.2v-2.68h6.2v2.36h16.32v-5.04h-16.6c-1.627,0-3.02-0.573-4.18-1.72
                  c-1.16-1.146-1.74-2.546-1.74-4.2v-5.68c0-1.653,0.58-3.053,1.74-4.2c1.16-1.146,2.553-1.72,4.18-1.72h16.96
                  c1.626,0,3.02,0.58,4.18,1.74C343.881,50.454,344.461,51.848,344.461,53.474z"/>
                <path d="M347.301,47.554h28.8v6.24h-11.28v22.56h-6.24v-22.56h-11.28V47.554z"/>
                <path d="M384.941,47.554H401.9c1.627,0,3.021,0.58,4.181,1.74c1.159,1.16,1.739,2.554,1.739,4.18v16.96
                  c0,1.627-0.58,3.02-1.739,4.18c-1.16,1.16-2.554,1.74-4.181,1.74h-16.959c-1.654,0-3.055-0.573-4.201-1.72
                  c-1.146-1.146-1.719-2.546-1.719-4.2v-16.96c0-1.653,0.572-3.053,1.719-4.2C381.887,48.128,383.287,47.554,384.941,47.554z
                   M385.221,53.794v16.32h16.32v-16.32H385.221z"/>
                <path d="M428.381,59.194l9.72-11.64h6.44v28.8h-6.24v-19.32l-9.92,11.84l-9.961-11.8v19.28h-6.199v-28.8h6.4
                  L428.381,59.194z"/>
                <path d="M476.02,47.554v6.24H455.7v5.04h16.36v6.24H455.7v5.04h20.319v6.24h-26.6v-28.8H476.02z"/>
                <path d="M508.74,53.514v7.44c0,1.627-0.588,3.02-1.76,4.18c-1.174,1.16-2.574,1.74-4.201,1.74H502.5l6.24,7.36
                  v2.12h-6.4l-7.96-9.48l-8.24,0.04c0.08,0,0.12,0.08,0.12,0.24c-0.054,0-0.094-0.013-0.12-0.04v9.24h-6.2v-28.76h22.84
                  c1.627,0,3.027,0.58,4.201,1.74C508.152,50.494,508.74,51.888,508.74,53.514z M486.14,53.794v6.84h16.32v-6.84H486.14z"/>
              </g>
              <g>
                <path d="M567.46,53.794h-22.52v16.32h22.52v6.24h-22.8c-1.654,0-3.054-0.573-4.2-1.72
                  c-1.146-1.146-1.72-2.546-1.72-4.2v-16.96c0-1.653,0.573-3.053,1.72-4.2c1.146-1.146,2.546-1.72,4.2-1.72h22.8V53.794z"/>
                <path d="M577.46,47.554h16.96c1.626,0,3.02,0.58,4.18,1.74s1.74,2.554,1.74,4.18v16.96
                  c0,1.627-0.58,3.02-1.74,4.18c-1.16,1.16-2.554,1.74-4.18,1.74h-16.96c-1.654,0-3.054-0.573-4.2-1.72
                  c-1.146-1.146-1.72-2.546-1.72-4.2v-16.96c0-1.653,0.573-3.053,1.72-4.2C574.406,48.128,575.806,47.554,577.46,47.554z
                   M577.74,53.794v16.32h16.319v-16.32H577.74z"/>
                <path d="M620.899,59.194l9.72-11.64h6.439v28.8h-6.239v-19.32l-9.92,11.84l-9.96-11.8v19.28h-6.2v-28.8h6.399
                  L620.899,59.194z"/>
                <path d="M658.02,59.194l9.72-11.64h6.439v28.8h-6.239v-19.32l-9.92,11.84l-9.96-11.8v19.28h-6.2v-28.8h6.399
                  L658.02,59.194z"/>
                <path d="M685.099,47.554v22.56h16.319v-22.56h6.28v22.88c0,1.627-0.58,3.02-1.74,4.18
                  c-1.16,1.16-2.554,1.74-4.18,1.74h-16.96c-1.654,0-3.054-0.573-4.2-1.72c-1.146-1.146-1.72-2.546-1.72-4.2v-22.88H685.099z"/>
                <path d="M734.618,66.754v-19.2h6.28v28.8h-6.4l-16.199-19.28v19.28h-6.2v-28.8h6.399L734.618,66.754z"/>
                <path d="M745.418,76.354v-28.8h6.239v28.8H745.418z"/>
                <path d="M782.897,53.794h-22.52v16.32h22.52v6.24h-22.8c-1.654,0-3.054-0.573-4.2-1.72
                  c-1.146-1.146-1.72-2.546-1.72-4.2v-16.96c0-1.653,0.573-3.053,1.72-4.2c1.146-1.146,2.546-1.72,4.2-1.72h22.8V53.794z"/>
                <path d="M793.057,47.554h16.92c1.653,0,3.06,0.58,4.22,1.74s1.74,2.554,1.74,4.18v22.88h-6.28v-9.28h-16.32v9.28
                  h-6.199v-22.88c0-1.653,0.573-3.053,1.72-4.2C790.003,48.128,791.402,47.554,793.057,47.554z M793.336,60.834h16.32v-7.04h-16.32
                  V60.834z"/>
                <path d="M819.057,47.554h28.8v6.24h-11.279v22.56h-6.24v-22.56h-11.28V47.554z"/>
                <path d="M850.896,76.354v-28.8h6.239v28.8H850.896z"/>
                <path d="M865.496,47.554h16.96c1.626,0,3.02,0.58,4.18,1.74s1.74,2.554,1.74,4.18v16.96
                  c0,1.627-0.58,3.02-1.74,4.18c-1.16,1.16-2.554,1.74-4.18,1.74h-16.96c-1.654,0-3.054-0.573-4.2-1.72
                  c-1.146-1.146-1.72-2.546-1.72-4.2v-16.96c0-1.653,0.573-3.053,1.72-4.2C862.442,48.128,863.842,47.554,865.496,47.554z
                   M865.776,53.794v16.32h16.319v-16.32H865.776z"/>
                <path d="M915.295,66.754v-19.2h6.28v28.8h-6.4l-16.199-19.28v19.28h-6.2v-28.8h6.399L915.295,66.754z"/>
              </g>
            </g>
            <g>
              <g>
                <path d="M304.481,105.269l9.72-11.64h6.44v28.8h-6.24v-19.32l-9.92,11.84l-9.96-11.8v19.28h-6.2v-28.8h6.4
                  L304.481,105.269z"/>
                <path d="M331.441,93.629h16.919c1.654,0,3.061,0.58,4.221,1.74c1.16,1.159,1.74,2.554,1.74,4.18v22.88h-6.281
                  v-9.28h-16.319v9.28h-6.2v-22.88c0-1.653,0.573-3.054,1.72-4.2C328.387,94.202,329.787,93.629,331.441,93.629z M331.721,106.909
                  h16.319v-7.04h-16.319V106.909z"/>
                <path d="M381.4,112.829v-19.2h6.28v28.8h-6.4l-16.199-19.28v19.28h-6.2v-28.8h6.399L381.4,112.829z"/>
                <path d="M398.16,93.629h16.92c1.653,0,3.06,0.58,4.22,1.74c1.16,1.159,1.74,2.554,1.74,4.18v22.88h-6.28v-9.28
                  h-16.32v9.28h-6.199v-22.88c0-1.653,0.573-3.054,1.72-4.2S396.506,93.629,398.16,93.629z M398.439,106.909h16.32v-7.04h-16.32
                  V106.909z"/>
                <path d="M454.4,99.549v2.72h-6.28v-2.399h-16.319v16.319h16.319v-4.319h-6.24v-6.24H454.4v10.88
                  c0,1.627-0.58,3.02-1.74,4.18s-2.566,1.74-4.22,1.74h-16.92c-1.654,0-3.054-0.573-4.2-1.72s-1.72-2.547-1.72-4.2v-16.96
                  c0-1.653,0.573-3.054,1.72-4.2s2.546-1.72,4.2-1.72h16.92c1.653,0,3.06,0.58,4.22,1.74C453.82,96.529,454.4,97.923,454.4,99.549z"
                  />
                <path d="M485.479,93.629v6.24h-20.32v5.04h16.36v6.239h-16.36v5.04h20.32v6.24h-26.6v-28.8H485.479z"/>
                <path d="M504.84,105.269l9.72-11.64h6.439v28.8h-6.239v-19.32l-9.92,11.84l-9.96-11.8v19.28h-6.2v-28.8h6.399
                  L504.84,105.269z"/>
                <path d="M552.479,93.629v6.24h-20.32v5.04h16.36v6.239h-16.36v5.04h20.32v6.24h-26.6v-28.8H552.479z"/>
                <path d="M578.958,112.829v-19.2h6.28v28.8h-6.4l-16.199-19.28v19.28h-6.2v-28.8h6.399L578.958,112.829z"/>
                <path d="M588.278,93.629h28.8v6.24h-11.279v22.56h-6.24v-22.56h-11.28V93.629z"/>
              </g>
              <g>
                <path d="M675.921,99.549v2.68h-6.28v-2.359h-16.319v5.04h16.68c1.626,0,3.021,0.579,4.18,1.739
                  c1.16,1.16,1.74,2.554,1.74,4.181v5.68c0,1.627-0.58,3.02-1.74,4.18c-1.159,1.16-2.554,1.74-4.18,1.74h-16.96
                  c-1.627,0-3.02-0.573-4.18-1.72s-1.74-2.547-1.74-4.2v-2.68h6.2v2.359h16.319v-5.04h-16.6c-1.627,0-3.02-0.573-4.18-1.72
                  s-1.74-2.546-1.74-4.2v-5.68c0-1.653,0.58-3.054,1.74-4.2s2.553-1.72,4.18-1.72h16.96c1.626,0,3.021,0.58,4.18,1.74
                  C675.341,96.529,675.921,97.923,675.921,99.549z"/>
                <path d="M706.881,93.629v6.24h-20.32v5.04h16.36v6.239h-16.36v5.04h20.32v6.24h-26.6v-28.8H706.881z"/>
                <path d="M739.601,99.589v7.439c0,1.627-0.587,3.021-1.76,4.181c-1.174,1.16-2.574,1.739-4.2,1.739h-0.28l6.24,7.36
                  v2.12h-6.4l-7.96-9.48l-8.239,0.04c0.08,0,0.119,0.08,0.119,0.24c-0.054,0-0.094-0.013-0.119-0.04v9.24h-6.2v-28.76h22.84
                  c1.626,0,3.026,0.58,4.2,1.74C739.014,96.569,739.601,97.963,739.601,99.589z M717.001,99.869v6.84h16.319v-6.84H717.001z"/>
                <path d="M760.96,114.549l12.08-20.92h7.16l-16.68,28.8h-5.16l-16.68-28.8h7.199L760.96,114.549z"/>
                <path d="M782.681,122.429v-28.8h6.239v28.8H782.681z"/>
                <path d="M820.16,99.869h-22.52v16.319h22.52v6.24h-22.8c-1.654,0-3.054-0.573-4.2-1.72s-1.72-2.547-1.72-4.2
                  v-16.96c0-1.653,0.573-3.054,1.72-4.2s2.546-1.72,4.2-1.72h22.8V99.869z"/>
                <path d="M850.999,93.629v6.24h-20.32v5.04h16.36v6.239h-16.36v5.04h20.32v6.24h-26.6v-28.8H850.999z"/>
                <path d="M883.559,99.549v2.68h-6.28v-2.359h-16.319v5.04h16.68c1.626,0,3.021,0.579,4.18,1.739
                  c1.16,1.16,1.74,2.554,1.74,4.181v5.68c0,1.627-0.58,3.02-1.74,4.18c-1.159,1.16-2.554,1.74-4.18,1.74h-16.96
                  c-1.627,0-3.02-0.573-4.18-1.72s-1.74-2.547-1.74-4.2v-2.68h6.2v2.359h16.319v-5.04h-16.6c-1.627,0-3.02-0.573-4.18-1.72
                  s-1.74-2.546-1.74-4.2v-5.68c0-1.653,0.58-3.054,1.74-4.2s2.553-1.72,4.18-1.72h16.96c1.626,0,3.021,0.58,4.18,1.74
                  C882.979,96.529,883.559,97.923,883.559,99.549z"/>
              </g>
            </g>
            </svg>
          </div>
          <div id="svg-layer">
            <svg id="CCMS-white" width="671.712px" height="74.875px" viewBox="249.863 47.554 671.712 74.875">
            <g>
              <g>
                <path d="M278.583,53.794h-22.52v16.32h22.52v6.24h-22.8c-1.654,0-3.054-0.573-4.2-1.72
                  c-1.147-1.146-1.72-2.546-1.72-4.2v-16.96c0-1.653,0.573-3.053,1.72-4.2c1.146-1.146,2.546-1.72,4.2-1.72h22.8V53.794z"/>
                <path d="M288.862,47.554v22.56h16.32v-22.56h6.28v22.88c0,1.627-0.58,3.02-1.74,4.18
                  c-1.16,1.16-2.554,1.74-4.18,1.74h-16.96c-1.654,0-3.054-0.573-4.2-1.72c-1.147-1.146-1.72-2.546-1.72-4.2v-22.88H288.862z"/>
                <path d="M344.461,53.474v2.68h-6.28v-2.36h-16.32v5.04h16.68c1.626,0,3.02,0.58,4.18,1.74
                  c1.16,1.16,1.74,2.554,1.74,4.18v5.68c0,1.627-0.58,3.02-1.74,4.18c-1.16,1.16-2.554,1.74-4.18,1.74h-16.96
                  c-1.627,0-3.02-0.573-4.18-1.72c-1.16-1.146-1.74-2.546-1.74-4.2v-2.68h6.2v2.36h16.32v-5.04h-16.6c-1.627,0-3.02-0.573-4.18-1.72
                  c-1.16-1.146-1.74-2.546-1.74-4.2v-5.68c0-1.653,0.58-3.053,1.74-4.2c1.16-1.146,2.553-1.72,4.18-1.72h16.96
                  c1.626,0,3.02,0.58,4.18,1.74C343.881,50.454,344.461,51.848,344.461,53.474z"/>
                <path d="M347.301,47.554h28.8v6.24h-11.28v22.56h-6.24v-22.56h-11.28V47.554z"/>
                <path d="M384.941,47.554H401.9c1.627,0,3.021,0.58,4.181,1.74c1.159,1.16,1.739,2.554,1.739,4.18v16.96
                  c0,1.627-0.58,3.02-1.739,4.18c-1.16,1.16-2.554,1.74-4.181,1.74h-16.959c-1.654,0-3.055-0.573-4.201-1.72
                  c-1.146-1.146-1.719-2.546-1.719-4.2v-16.96c0-1.653,0.572-3.053,1.719-4.2C381.887,48.128,383.287,47.554,384.941,47.554z
                   M385.221,53.794v16.32h16.32v-16.32H385.221z"/>
                <path d="M428.381,59.194l9.72-11.64h6.44v28.8h-6.24v-19.32l-9.92,11.84l-9.961-11.8v19.28h-6.199v-28.8h6.4
                  L428.381,59.194z"/>
                <path d="M476.02,47.554v6.24H455.7v5.04h16.36v6.24H455.7v5.04h20.319v6.24h-26.6v-28.8H476.02z"/>
                <path d="M508.74,53.514v7.44c0,1.627-0.588,3.02-1.76,4.18c-1.174,1.16-2.574,1.74-4.201,1.74H502.5l6.24,7.36
                  v2.12h-6.4l-7.96-9.48l-8.24,0.04c0.08,0,0.12,0.08,0.12,0.24c-0.054,0-0.094-0.013-0.12-0.04v9.24h-6.2v-28.76h22.84
                  c1.627,0,3.027,0.58,4.201,1.74C508.152,50.494,508.74,51.888,508.74,53.514z M486.14,53.794v6.84h16.32v-6.84H486.14z"/>
              </g>
              <g>
                <path d="M567.46,53.794h-22.52v16.32h22.52v6.24h-22.8c-1.654,0-3.054-0.573-4.2-1.72
                  c-1.146-1.146-1.72-2.546-1.72-4.2v-16.96c0-1.653,0.573-3.053,1.72-4.2c1.146-1.146,2.546-1.72,4.2-1.72h22.8V53.794z"/>
                <path d="M577.46,47.554h16.96c1.626,0,3.02,0.58,4.18,1.74s1.74,2.554,1.74,4.18v16.96
                  c0,1.627-0.58,3.02-1.74,4.18c-1.16,1.16-2.554,1.74-4.18,1.74h-16.96c-1.654,0-3.054-0.573-4.2-1.72
                  c-1.146-1.146-1.72-2.546-1.72-4.2v-16.96c0-1.653,0.573-3.053,1.72-4.2C574.406,48.128,575.806,47.554,577.46,47.554z
                   M577.74,53.794v16.32h16.319v-16.32H577.74z"/>
                <path d="M620.899,59.194l9.72-11.64h6.439v28.8h-6.239v-19.32l-9.92,11.84l-9.96-11.8v19.28h-6.2v-28.8h6.399
                  L620.899,59.194z"/>
                <path d="M658.02,59.194l9.72-11.64h6.439v28.8h-6.239v-19.32l-9.92,11.84l-9.96-11.8v19.28h-6.2v-28.8h6.399
                  L658.02,59.194z"/>
                <path d="M685.099,47.554v22.56h16.319v-22.56h6.28v22.88c0,1.627-0.58,3.02-1.74,4.18
                  c-1.16,1.16-2.554,1.74-4.18,1.74h-16.96c-1.654,0-3.054-0.573-4.2-1.72c-1.146-1.146-1.72-2.546-1.72-4.2v-22.88H685.099z"/>
                <path d="M734.618,66.754v-19.2h6.28v28.8h-6.4l-16.199-19.28v19.28h-6.2v-28.8h6.399L734.618,66.754z"/>
                <path d="M745.418,76.354v-28.8h6.239v28.8H745.418z"/>
                <path d="M782.897,53.794h-22.52v16.32h22.52v6.24h-22.8c-1.654,0-3.054-0.573-4.2-1.72
                  c-1.146-1.146-1.72-2.546-1.72-4.2v-16.96c0-1.653,0.573-3.053,1.72-4.2c1.146-1.146,2.546-1.72,4.2-1.72h22.8V53.794z"/>
                <path d="M793.057,47.554h16.92c1.653,0,3.06,0.58,4.22,1.74s1.74,2.554,1.74,4.18v22.88h-6.28v-9.28h-16.32v9.28
                  h-6.199v-22.88c0-1.653,0.573-3.053,1.72-4.2C790.003,48.128,791.402,47.554,793.057,47.554z M793.336,60.834h16.32v-7.04h-16.32
                  V60.834z"/>
                <path d="M819.057,47.554h28.8v6.24h-11.279v22.56h-6.24v-22.56h-11.28V47.554z"/>
                <path d="M850.896,76.354v-28.8h6.239v28.8H850.896z"/>
                <path d="M865.496,47.554h16.96c1.626,0,3.02,0.58,4.18,1.74s1.74,2.554,1.74,4.18v16.96
                  c0,1.627-0.58,3.02-1.74,4.18c-1.16,1.16-2.554,1.74-4.18,1.74h-16.96c-1.654,0-3.054-0.573-4.2-1.72
                  c-1.146-1.146-1.72-2.546-1.72-4.2v-16.96c0-1.653,0.573-3.053,1.72-4.2C862.442,48.128,863.842,47.554,865.496,47.554z
                   M865.776,53.794v16.32h16.319v-16.32H865.776z"/>
                <path d="M915.295,66.754v-19.2h6.28v28.8h-6.4l-16.199-19.28v19.28h-6.2v-28.8h6.399L915.295,66.754z"/>
              </g>
            </g>
            <g>
              <g>
                <path d="M304.481,105.269l9.72-11.64h6.44v28.8h-6.24v-19.32l-9.92,11.84l-9.96-11.8v19.28h-6.2v-28.8h6.4
                  L304.481,105.269z"/>
                <path d="M331.441,93.629h16.919c1.654,0,3.061,0.58,4.221,1.74c1.16,1.159,1.74,2.554,1.74,4.18v22.88h-6.281
                  v-9.28h-16.319v9.28h-6.2v-22.88c0-1.653,0.573-3.054,1.72-4.2C328.387,94.202,329.787,93.629,331.441,93.629z M331.721,106.909
                  h16.319v-7.04h-16.319V106.909z"/>
                <path d="M381.4,112.829v-19.2h6.28v28.8h-6.4l-16.199-19.28v19.28h-6.2v-28.8h6.399L381.4,112.829z"/>
                <path d="M398.16,93.629h16.92c1.653,0,3.06,0.58,4.22,1.74c1.16,1.159,1.74,2.554,1.74,4.18v22.88h-6.28v-9.28
                  h-16.32v9.28h-6.199v-22.88c0-1.653,0.573-3.054,1.72-4.2S396.506,93.629,398.16,93.629z M398.439,106.909h16.32v-7.04h-16.32
                  V106.909z"/>
                <path d="M454.4,99.549v2.72h-6.28v-2.399h-16.319v16.319h16.319v-4.319h-6.24v-6.24H454.4v10.88
                  c0,1.627-0.58,3.02-1.74,4.18s-2.566,1.74-4.22,1.74h-16.92c-1.654,0-3.054-0.573-4.2-1.72s-1.72-2.547-1.72-4.2v-16.96
                  c0-1.653,0.573-3.054,1.72-4.2s2.546-1.72,4.2-1.72h16.92c1.653,0,3.06,0.58,4.22,1.74C453.82,96.529,454.4,97.923,454.4,99.549z"
                  />
                <path d="M485.479,93.629v6.24h-20.32v5.04h16.36v6.239h-16.36v5.04h20.32v6.24h-26.6v-28.8H485.479z"/>
                <path d="M504.84,105.269l9.72-11.64h6.439v28.8h-6.239v-19.32l-9.92,11.84l-9.96-11.8v19.28h-6.2v-28.8h6.399
                  L504.84,105.269z"/>
                <path d="M552.479,93.629v6.24h-20.32v5.04h16.36v6.239h-16.36v5.04h20.32v6.24h-26.6v-28.8H552.479z"/>
                <path d="M578.958,112.829v-19.2h6.28v28.8h-6.4l-16.199-19.28v19.28h-6.2v-28.8h6.399L578.958,112.829z"/>
                <path d="M588.278,93.629h28.8v6.24h-11.279v22.56h-6.24v-22.56h-11.28V93.629z"/>
              </g>
              <g>
                <path d="M675.921,99.549v2.68h-6.28v-2.359h-16.319v5.04h16.68c1.626,0,3.021,0.579,4.18,1.739
                  c1.16,1.16,1.74,2.554,1.74,4.181v5.68c0,1.627-0.58,3.02-1.74,4.18c-1.159,1.16-2.554,1.74-4.18,1.74h-16.96
                  c-1.627,0-3.02-0.573-4.18-1.72s-1.74-2.547-1.74-4.2v-2.68h6.2v2.359h16.319v-5.04h-16.6c-1.627,0-3.02-0.573-4.18-1.72
                  s-1.74-2.546-1.74-4.2v-5.68c0-1.653,0.58-3.054,1.74-4.2s2.553-1.72,4.18-1.72h16.96c1.626,0,3.021,0.58,4.18,1.74
                  C675.341,96.529,675.921,97.923,675.921,99.549z"/>
                <path d="M706.881,93.629v6.24h-20.32v5.04h16.36v6.239h-16.36v5.04h20.32v6.24h-26.6v-28.8H706.881z"/>
                <path d="M739.601,99.589v7.439c0,1.627-0.587,3.021-1.76,4.181c-1.174,1.16-2.574,1.739-4.2,1.739h-0.28l6.24,7.36
                  v2.12h-6.4l-7.96-9.48l-8.239,0.04c0.08,0,0.119,0.08,0.119,0.24c-0.054,0-0.094-0.013-0.119-0.04v9.24h-6.2v-28.76h22.84
                  c1.626,0,3.026,0.58,4.2,1.74C739.014,96.569,739.601,97.963,739.601,99.589z M717.001,99.869v6.84h16.319v-6.84H717.001z"/>
                <path d="M760.96,114.549l12.08-20.92h7.16l-16.68,28.8h-5.16l-16.68-28.8h7.199L760.96,114.549z"/>
                <path d="M782.681,122.429v-28.8h6.239v28.8H782.681z"/>
                <path d="M820.16,99.869h-22.52v16.319h22.52v6.24h-22.8c-1.654,0-3.054-0.573-4.2-1.72s-1.72-2.547-1.72-4.2
                  v-16.96c0-1.653,0.573-3.054,1.72-4.2s2.546-1.72,4.2-1.72h22.8V99.869z"/>
                <path d="M850.999,93.629v6.24h-20.32v5.04h16.36v6.239h-16.36v5.04h20.32v6.24h-26.6v-28.8H850.999z"/>
                <path d="M883.559,99.549v2.68h-6.28v-2.359h-16.319v5.04h16.68c1.626,0,3.021,0.579,4.18,1.739
                  c1.16,1.16,1.74,2.554,1.74,4.181v5.68c0,1.627-0.58,3.02-1.74,4.18c-1.159,1.16-2.554,1.74-4.18,1.74h-16.96
                  c-1.627,0-3.02-0.573-4.18-1.72s-1.74-2.547-1.74-4.2v-2.68h6.2v2.359h16.319v-5.04h-16.6c-1.627,0-3.02-0.573-4.18-1.72
                  s-1.74-2.546-1.74-4.2v-5.68c0-1.653,0.58-3.054,1.74-4.2s2.553-1.72,4.18-1.72h16.96c1.626,0,3.021,0.58,4.18,1.74
                  C882.979,96.529,883.559,97.923,883.559,99.549z"/>
              </g>
            </g>
            </svg>
        </div>
        </div>
      </div>
    </div>
&#13;
&#13;
&#13;