#loading1 {
    width: 200px;
    height: 100px;
    margin: 50px auto;
    position: absolute;
    top: 60%;
    zoom: 0.5;
    left: 47%;
}
#loading1 span {
	height:80px;
	width:15px;
	background:#d27e37;
	display:inline-block;
	animation:loader 1s infinite;
}
#loading1 p {
  color: #f01b00;
  font-size: 20px;
  font-family: Helvetica;
  text-transform: uppercase;
  margin-top: 5px;
  font-weight: 300;
  letter-spacing: .05em;
  text-align: center;
}
@keyframes loader{
	50% { height:30px; margin-top:50px; opacity:.5; }
}

#loading1 span:nth-child(1) {animation-delay:.1s;}
#loading1 span:nth-child(2) {animation-delay:.2s;}
#loading1 span:nth-child(3) {animation-delay:.3s;}
#loading1 span:nth-child(4) {animation-delay:.4s;}
#loading1 span:nth-child(5) {animation-delay:.5s;}
#loading1 span:nth-child(6) {animation-delay:.6s;}
#loading{
  width:100%;
}
/*****loading****/
.loading{
  /* background-color:#000; */
  position: fixed;
  /* height: 100vh; */
  width: 100%;
  top: 0;
}
.loading-head{
  position:relative;
  height:20px;
  top:20px;
  transform: translate3d(0, 0, 0);
}
.loading-head .line{
  top:50%;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  width: calc(100% - 11px);
}
.loading-head .triangle{
  position:absolute;
  top:50%;
  width:11px;
  height:13px;
  background:url('/img/triangle.png') no-repeat center;
  background-size:11px 13px;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.logo-mask{
  position:absolute;
  top:50%;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  width:100%;
  height:200px;
  background:#000;
}
/*动画*/
.animate-loading{
  animation: animateLoading ease-in forwards 3s;
  -moz-animation: animateLoading ease-in forwards 3s;
  /* Firefox */
  -webkit-animation: animateLoading ease-in forwards 3s;
  /* Safari 和 Chrome */
  -o-animation: animateLoading ease-in forwards 3s;
  /* Opera */
}
.animate-logo{
  animation: loadingLogo ease-in forwards 3s;
  -moz-animation: loadingLogo ease-in forwards 3s;
  /* Firefox */
  -webkit-animation: loadingLogo ease-in forwards 3s;
  /* Safari 和 Chrome */
  -o-animation: loadingLogo ease-in forwards 3s;
  /* Opera */
}
/*animate-loading*/
@keyframes animateLoading{
  0%   {
    margin-right:100%;
  }
  100% {
    margin-right:0;
  }
}
@-moz-keyframes animateLoading{
  /* Firefox */
  0%   {
    margin-right:100%;
  }
  100% {
    margin-right:0;
  }
}
@-webkit-keyframes animateLoading{
  /* Safari 和 Chrome */
  0%   {
    margin-right:100%;
  }
  100% {
    margin-right:0;
  }
}
@-o-keyframes animateLoading{
  /* Opera */
  0%   {
    margin-right:100%;
  }
  100% {
    margin-right:0;
  }
}
.marginLeft{
  margin-right:30px;
}
/***************************** facebook **********************************/
#circle{
  /* margin-top: 30%; */
  float:left;
  width: 288px;
  height: 100px;
  /* margin-left: 50%; */
  
  transform: translateY(-50%);
  top: 45%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.circle{
  /* float:left; */height: 100px;
  margin-left:8px;
  width: 288px;
  -webkit-animation-name: bounce_circle;
  /* -webkit-border-radius:10px; */-webkit-animation-duration: 3.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: linear;
  opacity:1;
  position: absolute;
}
#circle_1{
  -webkit-animation-delay: .3s;
  background: url(/img/logo001.png) no-repeat;
}
#circle_2{
  -webkit-animation-delay: .9s;
  background: url(/img/logo02.png);
}
#circle_3{
  -webkit-animation-delay: 1.5s;
  background: url(/img/logo03.png);
}
@-webkit-keyframes bounce_circle{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
/***************************** circular **********************************/