@charset "utf-8";
/* CSS Document */

/*通用页面样式、顶部*/
* { margin:0; padding:0; list-style-image: none;list-style-type: none;}
.fix {clear:both;height: 1px;font-size: 0px;}


/*背景特效*/
@-webkit-keyframes orbloop {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes orbloop {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes orbmove {
  from {
    -webkit-transform: translateX(-1000px);
  }
  to {
    -webkit-transform: translateX(2000px);
  }
}
@keyframes orbmove {
  from {
    transform: translateX(-1000px);
  }
  to {
    transform: translateX(2000px);
  }
}

.pagebox{position:relative;z-index:2;}
#stage {
	position: fixed;
	width: 100%;
  height: 100%;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: -830px;
	overflow:hidden;
	z-index: 0;
 
}

#bg {
	position: absolute;
	width: 1000px;
	height: 100%;
	top: 50%;
	left: 50%;
	margin-left: -500px;
	margin-top: -500px;
}
#bg div div {
  position: absolute;
}
#bg {
  opacity: 0;
}
#bg .row1 div {
  -webkit-animation: orbmove 48s linear infinite;
  animation: orbmove 96s linear infinite;
}
#bg .row1 .orb1 {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 50%;
  left: 50%;
  margin-left: -30px;
  margin-top: -380px;
}
#bg .row1 .orb1 div {
  width: 100%;
  height: 100%;
  border-radius: 60px;
  background: -webkit-linear-gradient(top, rgba(238,238,238,.78), rgba(247,247,247,.78));
  background: linear-gradient(to bottom, rgba(238,238,238,.78), rgba(247,247,247,.78));
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row1 .orb2 {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-left: 450px;
  margin-top: 50px;
}
#bg .row1 .orb2 div {
  width: 100%;
  height: 100%;
  border-radius: 100px;
  background: -webkit-linear-gradient(top, rgba(238,238,238,.78), rgba(247,247,247,.78));
  background: linear-gradient(to bottom, rgba(238,238,238,.78), rgba(247,247,247,.78));
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row1 .orb1c {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 50%;
  left: 50%;
  margin-left: 1970px;
  margin-top: -380px;
}
#bg .row1 .orb1c div {
  width: 100%;
  height: 100%;
  border-radius: 60px;
  background: -webkit-linear-gradient(top, rgba(238,238,238,.78), rgba(247,247,247,.78));
  background: linear-gradient(to bottom, rgba(238,238,238,.78), rgba(247,247,247,.78));
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row1 .orb2c {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-left: 2450px;
  margin-top: 50px;
}
#bg .row1 .orb2c div {
  width: 100%;
  height: 100%;
  border-radius: 100px;
  background: -webkit-linear-gradient(top, rgba(238,238,238,.78), rgba(247,247,247,.78));
  background: linear-gradient(to bottom, rgba(238,238,238,.78), rgba(247,247,247,.78));
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row2 div {
  -webkit-animation: orbmove 24s linear infinite;
  animation: orbmove 48s linear infinite;
}
#bg .row2 .orb1 {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-left: -500px;
  margin-top: -300px;
}
#bg .row2 .orb1 div {
  width: 100%;
  height: 100%;
  border-radius: 200px;
  background: -webkit-linear-gradient(top, rgba(238,238,238,.78), rgba(247,247,247,.78));
  background: linear-gradient(to bottom, rgba(238,238,238,.78), rgba(247,247,247,.78));
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row2 .orb2 {
  position: absolute;
  width: 250px;
  height: 250px;
  top: 50%;
  left: 50%;
  margin-left: 175px;
  margin-top: -125px;
}
#bg .row2 .orb2 div {
  width: 100%;
  height: 100%;
  border-radius: 250px;
  background: -webkit-linear-gradient(top, rgba(238,238,238,.78), rgba(247,247,247,.78));
  background: linear-gradient(to bottom, rgba(238,238,238,.78), rgba(247,247,247,.78));
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row2 .orb1c {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-left: 1500px;
  margin-top: -300px;
}
#bg .row2 .orb1c div {
  width: 100%;
  height: 100%;
  border-radius: 200px;
  background: -webkit-linear-gradient(top, rgba(238,238,238,.78), rgba(247,247,247,.78));
  background: linear-gradient(to bottom, rgba(238,238,238,.78), rgba(247,247,247,.78));
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row2 .orb2c {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-left: 2100px;
  margin-top: -200px;
}
#bg .row2 .orb2c div {
  width: 100%;
  height: 100%;
  border-radius: 400px;
  background: -webkit-linear-gradient(top, rgba(238,238,238,.78), rgba(247,247,247,.78));
  background: linear-gradient(to bottom, rgba(238,238,238,.78), rgba(247,247,247,.78));
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row3 div {
  -webkit-animation: orbmove 12s linear infinite;
  animation: orbmove 24s linear infinite;
}
#bg .row3 .orb1 {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  margin-left: 850px;
  margin-top: -300px;
}
#bg .row3 .orb1 div {
  width: 100%;
  height: 100%;
  border-radius: 300px;
  background: -webkit-linear-gradient(top, rgba(238,238,238,.78), rgba(247,247,247,.78));
  background: linear-gradient(to bottom, rgba(238,238,238,.78), rgba(247,247,247,.78));
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row3 .orb2 {
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  margin-left: 0px;
  margin-top: 0px;
}
#bg .row3 .orb2 div {
  width: 100%;
  height: 100%;
  border-radius: 600px;
  background: -webkit-linear-gradient(top, rgba(238,238,238,.78), rgba(247,247,247,.78));
  background: linear-gradient(to bottom, rgba(238,238,238,.78), rgba(247,247,247,.78));
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row3 .orb1c {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  margin-left: 2850px;
  margin-top: -300px;
}
#bg .row3 .orb1c div {
  width: 100%;
  height: 100%;
  border-radius: 300px;
  background: -webkit-linear-gradient(top, rgba(238,238,238,.78), rgba(247,247,247,.78));
  background: linear-gradient(to bottom, rgba(238,238,238,.78), rgba(247,247,247,.78));
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row3 .orb2c {
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  margin-left: 2000px;
  margin-top: 0px;
}
#bg .row3 .orb2c div {
  width: 100%;
  height: 100%;
  border-radius: 600px;
  background: -webkit-linear-gradient(top, rgba(238,238,238,.78), rgba(247,247,247,.78));
  background: linear-gradient(to bottom, rgba(238,238,238,.78), rgba(247,247,247,.78));
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}


/*作品集、工作室、关于我*/
@font-face
{
font-family: Langdon;
src: url('/design/css/Langdon.otf')
}
@font-face
{
font-family: 造字工房典黑（非商用）超细体;
src: url('/upload/css/造字工房典黑超细体.otf')
}
@font-face
{
font-family: BrandonText-Black;
src: url('/css/font/BrandonText-Black.otf')
}