@charset "uft-8";
/*Luca*/

html{
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  width: 100%;
  height: 100%;
  min-width: 320px;
  min-height: 375px;
  font-size: 14px;
  font-family: "microsoft yahei";
  overflow: hidden;
  background: #fafafa;
  background: linear-gradient(top,#fafafa,#fff);
  background: -webkit-linear-gradient(top,#fafafa,#fff);
  transform-style:preserve-3d;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  margin:0;
}
a {
  border: 0px;
  outline: none;
  color: #000;
  text-decoration: none;
}
a:focus{outline:none;text-decoration:none!important;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
/*.clearfix{*zoom:1;}*/


#bg {
  position: absolute;
  width: 1000px;
  height: 1000px;
  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, #ffffff, #dedede);
  background: linear-gradient(to bottom, #ffffff, #dedede);
  -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, #ffffff, #dedede);
  background: linear-gradient(to bottom, #ffffff, #dedede);
  -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, #ffffff, #dedede);
  background: linear-gradient(to bottom, #ffffff, #dedede);
  -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, #ffffff, #dedede);
  background: linear-gradient(to bottom, #ffffff, #dedede);
  -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, #ffffff, #dedede);
  background: linear-gradient(to bottom, #ffffff, #dedede);
  -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, #ffffff, #dedede);
  background: linear-gradient(to bottom, #ffffff, #dedede);
  -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, #ffffff, #dedede);
  background: linear-gradient(to bottom, #ffffff, #dedede);
  -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, #ffffff, #dedede);
  background: linear-gradient(to bottom, #ffffff, #dedede);
  -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, #dedede, #ffffff);
  background: linear-gradient(to bottom, #dedede, #ffffff);
  -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, #dedede, #ffffff);
  background: linear-gradient(to bottom, #dedede, #ffffff);
  -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, #dedede, #ffffff);
  background: linear-gradient(to bottom, #dedede, #ffffff);
  -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, #dedede, #ffffff);
  background: linear-gradient(to bottom, #dedede, #ffffff);
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}

@-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(0px);
  }
  to {
    -webkit-transform: translateX(-2000px);
  }
}
@keyframes orbmove {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-2000px);
  }
}

#js{
  width: 310px;
  height:325px;
  background: url("../images/js.png") no-repeat scroll center center;
  background-size:310px 325px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -174px;
  margin-left: -155px;
  transform-origin: center;
  opacity:0;
}

#css{
  width: 310px;
  height:130px;
  background: url("../images/css.png") no-repeat scroll center center;
  background-size:288px 129px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -62px;
  margin-left: -156px;
  transform-origin: center;
  opacity:0;
}

#html{
  width: 421px;
  height:201px;
  background: url("../images/html.png");
  position: absolute;
  top: calc(20% + 80px);
  left: 50%;
  margin-left: -210px;
  transform-origin: bottom;
  -webkit-transform-origin: bottom;
  -moz-transform-origin: bottom;
  opacity:0;
}

#mysite{
  font-size: 30px;
  font-weight: 700;
  color:#000;
  width: 600px;
  height:auto;
  position: absolute;
  top: 20%;
  left: 50%;
  z-index: 10;
  margin-left: -300px;
  opacity:0;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #fafafa;
  background: linear-gradient(top,green,#fafafa);
  background: -webkit-linear-gradient(top,green,#fafafa);
}

#mysite a{
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  display: block;
  float: left;
  text-align: center;
  width:200px;
  height:60px;
  line-height: 50px;
  padding:5px 10px;
  background: none;
  border: 0;
  position: relative;
  text-decoration: underline;
}

#mysite a::before, #mysite a::after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}


.centerBorder:hover {
  color: orange;
}
.centerBorder::before, .centerBorder::after {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
}
.centerBorder::before {
  border-top: 2px solid green;
  border-bottom: 2px solid green;
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
}
.centerBorder::after {
  border-left: 2px solid green;
  border-right: 2px solid green;
  -webkit-transform: scale3d(1, 0, 1);
          transform: scale3d(1, 0, 1);
}
.centerBorder:hover::before, .centerBorder:hover::after {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
  -webkit-transition: -webkit-transform 0.5s;
          transition: transform 0.5s;
}

#cp{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: auto;
  text-align: center;
  color:#ccc;
}

#cp a{color:#ccc;}
#cp a:hover{color:#000;}

@media screen and (max-width: 960px) {
  #mysite{
    font-size: 20px;
    width: 300px;
    margin-left: -150px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
  }
  #mysite a{
    width:100px;
    padding:2px 5px;
  }
  #html{
    width: 280px;
    height:134px;
    background: url("../images/html.png") no-repeat scroll 0 0/100% 100%;
    top: calc(20% + 80px);
    margin-left: -140px;
  }
}