body,html {background:#001426;width: 100%;height:100%;padding:0px;margin:0px;background-color:#131313;outline:none;box-sizing: border-box}
img{border:none;}
a{text-decoration:none;color:#444;}
a:hover{color:#999;}
#title{width:600px;margin:20px auto;text-align:center;}
input,button,select,textarea,a{outline:none;}
/* 定义关键帧 */
@-webkit-keyframes shade{
	from{opacity:1;}
	15%{opacity:0.8;}
	to{opacity:1;}
}
@-moz-keyframes shade{
	from{opacity:1;}
	15%{opacity:0.8;}
	to{opacity:1;}
}
@-ms-keyframes shade{
	from{opacity:1;}
	15%{opacity:0.8;}
	to{opacity:1;}
}
@-o-keyframes shade{
	from{opacity:1;}
	15%{opacity:0.8;}
	to{opacity:1;}
}
@keyframes shade{
	from{opacity:1;}
	15%{opacity:0.8;}
	to{opacity:1;}
}
/* wrap */
#wrap{width:100%;height:100%;margin:0 auto;position:relative;padding:0px}
#wrap .box{width:270px;height:auto;padding:8px;float:left;border-right:dotted 0px #B1B1B1;border-bottom:solid 0px #B1B1B1;}
#wrap .box .info{width:270px;height:auto;border-radius:0px;box-shadow:0 0 0px #000;background:#fff;}
#wrap .box .info .pic{width:270px;height:auto;margin:0 auto;padding:0px;}
#wrap .box .info .pic:hover{
	-webkit-animation:shade 3s ease-in-out 1;
	-moz-animation:shade 3s ease-in-out 1;
	-ms-animation:shade 3s ease-in-out 1;
	-o-animation:shade 3s ease-in-out 1;
	animation:shade 3s ease-in-out 1;
}
#wrap .box .info .pic img{width:270px;border-radius:0px;}
#wrap .box .info .title{width:270px;height:auto;margin:0px auto;line-height:40px;text-align:center;color:#666;font-size:16px;font-weight:bold}
#wrap .box .info .title a:nth-child(2){display:inline-block;cursor:default;text-align:center;}
#wrap .box .info .title a span{display:inline-block;cursor:default;margin-right:25px}
#wrap .box .info .title .shuang::before{content:url(../images/Illustrator.svg);width:18px;position: absolute;margin:-30px 0px;cursor:default}
#wrap .box .info .title .shuang::after{content:url(../images/Photoshop.svg);width:18px;position: absolute;margin:-30px;cursor:default}
#wrap .box .info .title .ai::before{content:url(../images/Illustrator.svg);width:18px;position: absolute;margin:-30px 10px 0px 0px;cursor:default}
#wrap .box .info .title .ps::before{content:url(../images/Photoshop.svg);width:18px;position: absolute;margin:-30px 10px 0px 0px;cursor:default}
#wrap .box .info .title .ae::before{content:url(../images/After%20Effects.svg);width:18px;position: absolute;margin:-30px 10px 0px 0px;cursor:default}
#wrap .box .info .title .pr::before{content:url(../images/Premiere%20Pro.svg);width:18px;position: absolute;margin:-30px 10px 0px 0px;cursor:default}
#wrap .box .info .title .h5::before{content:url(../images/html5.svg);width:18px;position:absolute;margin:-30px 10px 0px 0px;cursor:default}
#wrap .box .info .title .dw::before{content:url(../images/Dreamweaver.svg);width:18px;position:absolute;margin:-30px 10px 0px 0px;cursor:default}
#wrap .box .info .title .in::before{content:url(../images/InDesign.svg);width:18px;position:absolute;margin:-30px 10px 0px 0px;cursor:default}
#wrap .box .info .title .jq::before{content:url(../images/jq.svg);position:absolute;width:7px;margin:-34px -10px 0px -10px;cursor:default}
#wrap .box .info .title h5{width:238px;height:auto;margin:0px auto;padding:10px 16px 20px 16px;line-height:18px;color:#AFAFAF;font-size:12px;border-top:dotted 1px #AFAFAF;font-weight:normal;background-color: #FFF}
#wrap .box .info .title h5 p {line-height:18px;margin:0px;padding:0px;}
footer{position: fixed;left:0px;bottom: 0;width:100%;height:112px;margin-top:-112px;background:url(../../img/end.png) no-repeat bottom;float:left;text-align: center}
.home {position:absolute;width:66px; height:66px;display:inline;margin-right:20px;}

.s {display: block;
  position: relative;
  border-radius: 50%;
	width: 66px;margin-left:auto;margin-right:auto;
  height: 66px;
background:url(../../img/2018.png) no-repeat center;
    background-clip: padding-box;
  box-shadow:inset -1px 1px 2px 0px #7b36d0, inset 1px -1px 2px 2px #379bb1;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
}

.photo {
  position: absolute;
  -webkit-animation: round 16s infinite;
  -moz-animation: round 16s infinite;
  -o-animation: round 16s infinite;
  animation: round 16s infinite;
  opacity: 0;
  width: 100%;
}
@-webkit-keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
@-moz-keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
@-o-keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
@keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
img:nth-child(4) {
  -webkit-animation-delay: 0s;
}
img:nth-child(3) {
  -webkit-animation-delay: 4s;
}
img:nth-child(2) {
  -webkit-animation-delay: 8s;
}
img:nth-child(1) {
  -webkit-animation-delay: 12s;
}