.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;}
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:999999;}
#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  /* COLOR 1 */
  border-top-color: #FFF;
  -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
  -ms-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
  -moz-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
  -o-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */   
      animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
  z-index:1001;}
#loader:before {
      content: "";
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border-radius: 50%;
      border: 3px solid transparent;
      /* COLOR 2 */       
      border-top-color: #FFF;
      -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      -moz-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      -o-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      -ms-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */              
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}
#loader:after {
      content: "";
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
      /* COLOR 3 */       
      -moz-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      -o-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      -ms-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */        
      -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}


@-webkit-keyframes spin {
      0%{ 
          -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
          -ms-transform: rotate(0deg);  /* IE 9 */
          transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
      }100%{
          -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
          -ms-transform: rotate(360deg);  /* IE 9 */
          transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */}
}

@keyframes spin {
      0%{ 
          -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
          -ms-transform: rotate(0deg);  /* IE 9 */
          transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
      }100%{
          -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
          -ms-transform: rotate(360deg);  /* IE 9 */
          transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */}
}


#loader-wrapper .loader-section {
      position: fixed;
      top: 0;
      width: 51%;
      height: 100%;
      background: #1abc9c; /* Old browsers */
      z-index: 1000;
      -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: translateX(0);  /* IE 9 */
      transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */}
#loader-wrapper .loader-section.section-left {left: 0;}
#loader-wrapper .loader-section.section-right {right: 0;}

/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
      -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
          -ms-transform: translateX(-100%);  /* IE 9 */
              transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
              transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
.loaded #loader-wrapper .loader-section.section-right {
      -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
          -ms-transform: translateX(100%);  /* IE 9 */
              transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
.loaded #loader {
      opacity: 0;
      -webkit-transition: all 0.3s ease-out;  
              transition: all 0.3s ease-out;}
.loaded #loader-wrapper {
      visibility: hidden;
      -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
          -ms-transform: translateY(-100%);  /* IE 9 */
              transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */
      -webkit-transition: all 0.3s 1s ease-out;  
              transition: all 0.3s 1s ease-out;}
/* JavaScript Turned Off */
.no-js #loader-wrapper {display: none;}
.no-js h1 {color: #222222;}
#loader-wrapper .load_title {
  font-family:'Open Sans';
  color:#FFF; font-size:19px; width:100%; text-align:center; z-index:9999999999999; position:absolute; top:60%; opacity:1; line-height:30px; }
#loader-wrapper .load_title span {  font-weight:normal; font-style:italic; font-size:13px; color:#FFF; opacity:0.5;}


/*@font-face {*/
/*  font-family: SY-Bold;*/
/*  src: url("../font/SourceHanSansCN-Bold.otf");*/
/*}*/
/*@font-face {*/
/*  font-family: SY-Medium;*/
/*  src: url("../font/SourceHanSansCN-Medium.otf");*/
/*}*/
/*@font-face {*/
/*  font-family: SY-Normal;*/
/*  src: url("../font/SourceHanSansCN-Normal.otf");*/
/*}*/
/*@font-face {*/
/*  font-family: SY-Regular;*/
/*  src: url("../font/SourceHanSansCN-Regular.otf");*/
/*}*/

/* 大标题 */
.SY-bold{
  font-family: SY-Bold;
}

.SY-medium{
  font-family: SY-Medium;
}

/* 标题 */
.SY-normal-l{
  font-family: SY-Normal;
  font-size: 42px;
}
/* 内容 */
.SY-normal-s{
  font-family: SY-Normal;
  font-size:13px;
  line-height: 21px;
}

.SY-regular{
  font-family: SY-Regular;
}