body,html{ overflow-x: hidden; }
body{font-family:"-apple-system","San-Fransico",Helvetica Neue,Helvetica,Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;background: #130a41;}










.wp{width: 1083px; margin: 0 auto;}
.bannerbg{background: url(https://public-static.zcool.com.cn/special-resource/2016/assets/img/bannerbg.jpg) no-repeat center center; height:786px; position: relative;}
.bannerText{ font-size: 16px; color: #fff; line-height: 30px; position: absolute; bottom: 116px; left: 50%; text-align: center; margin-left: -420px;}

.wwp{padding: 0 20px;}
.floorBox{ height: 120px;  box-shadow: 1px 2px 5px #0a0329; width: 1043px; position: relative; margin-bottom: 30px;}

.worksList li{ width: 250px; height: 188px; float: left; margin-right: 14px; margin-bottom: 30px; overflow: hidden; position: relative;}
.worksList li .wkCont{ background: rgba(0, 0, 0, 0.5); width: 230px;  color: #fff; position: absolute; bottom: -80px;
     height: 50px; padding:15px 10px; transition:transform ease 0.5s;}
.worksList li .wkCont a{color: #fff; font-size: 16px; text-decoration: none;}
.worksList li .wkCont p{font-size: 12px;}
.worksList li .wkCont p a{font-size: 12px;}
/* .worksList li a img{ transition:transform ease 0.5s;}
.worksList li a:hover img{transform:scale(1.10);} */
.worksList li:hover .wkCont{transform: translateY(-80px);}


.thead{ float: left; height: 50px; width: 50px;}
.tText{ float:left; width: 160px; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; padding-left: 10px }





#navis{width:160px; display: none; position: fixed;z-index:222;left:50%;margin-left:542px;margin-top:-300px;top:50%;}
#navis li{background: #451399; position: relative;}
#navis li > a{display: block; text-align: center;color:#c881ff;font-size:16px; height:50px;line-height:50px;}
#navis li > a:hover{background: #5e1cca;color:#c881ff; text-decoration: none;}
#navis li.active > a,#navis li.active > a:hover{background: #6c29de;color:#fff;}
.shareIcon{padding-left:30px;background: url(https://public-static.zcool.com.cn/special-resource/2016/assets/img/shares.png) no-repeat left center;}
#navis li.active > a .shareIcon,#navis li.active > a:hover .shareIcon{background: url(https://public-static.zcool.com.cn/special-resource/2016/assets/img/share.png) no-repeat left center;}


.shareBox:hover .shareContentWhite{ display: block; }
.shareContentWhite{background: #fff;border-radius: 5px; text-align: center; position: absolute;right:170px;bottom :0;width:250px;height:50px; display: none;}
.shareContentWhite:before{content:"";width:0;height:0;position: absolute;right:-20px;bottom:15px;border-width: 10px;border-style: solid;border-color:transparent transparent transparent #fff;}

.jiathis_style_32x32{margin:9px 0 0 19px;}



.shareBox:hover .shareContent{ display: block; }
.shareContent{background: #6c29de; position: absolute;right:170px;bottom :0;width:340px; display: none;}
.shareContent:before{content:"";width:0;height:0;position: absolute;right:-20px;bottom:15px;border-width: 10px;border-style: solid;border-color:transparent transparent transparent #6c29de;}
.sc{width:170px;float:left; text-align: center;padding:20px 0 10px;}
.sc p{color:#fff;padding-top:10px;}



.floImg{ position: absolute;}
.floTitle{ font-size: 22px;color: #fff; padding:25px 0 0 55px; font-weight: bold;}
.floText{ font-size: 14px; color: #e2dbff; width: 600px; position: absolute}


.floor01{background: #512bf9;}
.floor02{ margin-top: 90px; background: #00b6c1; }
.floor03{background: #7400ea;margin-top: 90px;}
.floor04{background: #24af66;margin-top: 90px;}
.floor05{background: #0651e8;margin-top: 90px;}
.floor06{background: #ff4b58;margin-top: 90px;}
.floor07{background: #d505e8;margin-top: 90px;}
.floor08{background: #ff7800;margin-top: 90px;}
.floor09{background: #f56048;margin-top: 90px;}
.floor10{background: #ffa200;margin-top: 90px;}



.mo01{ left: -10px; bottom:-44px;}
.mo02{ left: -40px; bottom: 0;}
.mo03{ left: -65px; bottom: -23px;}
.mo04{ left:-24px; bottom: -23px;}
.mo05{ left: 10px; bottom: -33px;}
.mo06{ left: -15px; bottom: -8px;}
.mo07{ left: -55px; bottom: -23px;}
.mo08{ left: 35px; bottom: -33px;}
.mo09{ left: -35px; bottom: -39px;}
.mo10{ left: -65px; bottom: -33px;}




.floTitle02{margin-left: 185px;}
.floTitle03{margin-left: 185px;}
.floTitle04{margin-left: 0px;}
.floTitle05{margin-left: 20px;}
.floTitle06{margin-left: 0px;}
.floTitle07{margin-left: 210px;}
.floTitle08{margin-left:1px;}
.floTitle09{margin-left: 185px;}
.floTitle10{margin-left:20px;}


.floTextAb{ left: 200px; top: 25px; }
.floTextAb02{ right: 60px; top: 25px; color: #ccfcff;}
.floTextAb03{ right: 60px; top: 25px; color: #ccfcff;}
.floTextAb04{ left: 188px; top: 25px; color: #bffedd;}
.floTextAb05{ left: 215px; top: 25px; color: #cddeff;}
.floTextAb06{ left: 195px; top: 25px; color: #fedfe1;}
.floTextAb07{ right: 60px; top: 25px; color: #fcdfff;}
.floTextAb08{left: 215px; top: 25px; color: #fff4ce; }
.floTextAb09{ right: 60px; top: 25px; color: #fff3e5;width: 560px;}
.floTextAb10{ left: 180px; top: 25px; color: #fff;}



.fooText{ background: url(https://public-static.zcool.com.cn/special-resource/2016/assets/img/fbg.png) no-repeat center center;height: 350px; color: #fff; font-size: 16px; text-align: center; line-height: 30px;}
.fooText p{ padding-top: 90px; }


.commentsBox .textWrapper{width:1083px;}
.commentsBox.noBg textarea{ background:#fff;width:1015px;height:100px;margin:0px 0 0 30px; 
      outline:none;border:0; font-size:14px;padding-left:15px;padding:5px;}
.commentsBox.noBg{ background:none;padding:0;margin-top:20px;border-bottom:1px solid #351072;}


a.facespan{color:#fff;font-size:12px; display:inline-block;padding:2px 5px;}


.commentsBox{ background:#351072;padding:0 20px;margin-top:0px;}

.commentsUl{margin:0 auto;font-size:14px;}
.commentsUl li{border-bottom:1px solid #351072;padding:10px;margin:0 auto; position:relative;}

.floor{color:#f3eede; position:absolute;right:0;top:5px;font-size:14px;}

.commentsUlLeft{width:48px;float:left;padding:3px 0 0 0; }
.commentsUlRight{margin-left:65px;color:#333;}

.commentsUlRight a{color:#41fdff;}
.date{color:#41fdff;margin-top:5px;}
.commentsUlRight p{padding-top:5px; color: #fff;}

a.reCom{color:#41fdff; float:right;}
a.reCom:hover{color:#f30; text-decoration:none;}


.page a,.page span{ display:inline-block;padding:0 5px;font-size:14px;}
.page span{color:#41fdff;}
.page a:link,.page a:visited{color:#41fdff; text-decoration:none;}
.page a:hover,.page a:active{color:#41fdff; text-decoration:none;}

.page a.selected:link,.page a.selected:visited{color:#fff; text-decoration:none;font-weight:bold;}
.page a.selected:hover,.page a.selected:active{color:#fff; text-decoration:none;font-weight:bold;}


a.lyBtn{ display:inline-block;width:90px;height:36px; background:#fff; line-height: 36px; text-align: center ;font-size: 16px; color: #351072;}
a.lyBtn:hover{opacity: 0.9; color: #150a46;}

.area textarea{width:945px;padding:5px;border:1px solid #fff;height:60px;}

.fBox{ background:#fff;border:1px solid #fff; position:relative;margin-top:10px;padding:10px;}
.fBox:before{content:""; display:inline-block; position:absolute;width:0;height:0; border-width:7px; border-color:transparent transparent #fff  transparent;top:-14px;left:10px; border-style:solid;}
.fBox p{color:#000;}




a.cancelBtn{ display:inline-block; background:#999;color:#fff; text-align:center;line-height:36px;width:100px;height:36px; font-size:16px;
 font-family:"微软雅黑"; text-decoration:none;overflow:hidden;}
a.cancelBtn:hover{ opacity: 0.9;}
a.submitBtn{ display:inline-block; background:#fff;color:#351072; text-align:center;line-height:36px;width:100px;
      height:36px;font-size:16px; font-family:"微软雅黑"; text-decoration:none; overflow:hidden;}
a.submitBtn:hover{opacity: 0.9; color: #150a46;}






.downComments{ background:#351072;margin-top:50px;padding:30px 0 30px 0;}
.fTitle{font-size:24px;}
.pb60{padding-bottom: 60px;}














.aoto01{ position: absolute; left: 50%; margin-left: -664px; top: 57px; }
.start01{ position: absolute; left: 50%; margin-left: -940px; top: 240px; }
.start02{ position: absolute; left: 50%; margin-left: 0px; bottom: 287px; }
.start03{ position: absolute; left: 50%; margin-left: 894px; top: 260px; }
.start04{ position: absolute; left: 50%; margin-left: -700px; top: 165px; }
.aoto02{ position: absolute; left: 50%; margin-left: -764px; top: 310px; }
.aoto03{ position: absolute; left: 50%; margin-left: 844px; top: 94px; }
.aoto04{ position: absolute; left: 50%; margin-left: 510px; top: 147px; }
.aoto05{ position: absolute; left: 50%;margin-left: -890px; top: 85px; }
.aoto06{ position: absolute; left: 50%; margin-left: 674px; top: 140px; }
.aoto07{ position: absolute; left: 50%; margin-left: 380px; top: 250px; }
.aoto08{ position: absolute; left: 50%; margin-left: 274px; top:-10px; }
.aoto09{ position: absolute; left: 50%; margin-left: -64px; top: 65px; }
.aoto10{ position: absolute; left: 50%; margin-left: -484px; top: 37px;z-index: 100;}
.aoto11{ position: absolute; left: 50%; margin-left: 304px; top:317px; }
.aoto12{ position: absolute; left: 50%; margin-left: -214px; bottom: 350px; }
.aoto13{ position: absolute; left: 50%; margin-left: -134px; top:-4px; }
.aoto14{ position: absolute; left: 50%; margin-left:-400px; top:44px; }

@keyframes aoto01
{
      0% {transform:translateX(0px);opacity: 0.7; transform: scale(0.8)}
      50% {transform:translateX(70px);transform: scale(1); right: 300px;left: 800px;}
      100% {transform:translateX(0px);opacity: 0.7;transform: scale(0.8) ;}
}
.aoto01{animation:aoto01 20s infinite;}


@keyframes aoto02
{
      0%{transform: scale(1);transform:translate(0px,0px);}
      50%{transform:scale(1.08);transform:translate(3px,6px);}
      100%{transform:scale(1);transform:translate(0px,0px);}
}

.aoto02{animation:aoto02 4s infinite;}

@keyframes start01
{
       0%{transform:translate(0px,0px); top: 200px; }
      50%{transform:translate(6px,8px);opacity: 0.7; transform: scale(0.9);}
      100%{transform:translate(0px,0px); top: 200px;}
}

.start01{animation:start01 4s infinite;}
@keyframes start02
{
       0%{transform:translate(0px,0px);opacity:1; }
      50%{transform:translate(3px,5px);opacity: 0.7; transform: scale(0.9);}
      100%{transform:translate(0px,0px); }
}

.start02{animation:start02 4s infinite;}
@keyframes start03
{
        0%{transform:translate(0px,0px);opacity:1; }
      50%{transform:translate(3px,5px);opacity: 0.7; transform: scale(0.9);}
      100%{transform:translate(0px,0px); }
}

.start03{animation:start03 3s infinite;}
@keyframes start04
{
      0%{transform:translate(0px,0px);opacity:1; }
      50%{transform:translate(3px,5px);opacity: 0.7; transform: scale(0.9);}
      100%{transform:translate(0px,0px); }
}

.start04{animation:start04 3s infinite;}


@keyframes aoto03
{
       0%{transform:translate(0px,0px);opacity:1; }
      50%{transform:translate(3px,5px);opacity: 0.7; transform: scale(0.9);}
      100%{transform:translate(0px,0px); }
}

.aoto03{animation:aoto03 5s infinite;}
@keyframes aoto04
{
       0%{transform:translate(0px,0px);  transform: scale(0.4); opacity: 0;left: 870px; top: 120px;}
      50%{transform:translate(3px,5px);opacity: 0.7; transform: scale(1);left: 980px;top: 130px;}
      100%{transform:translate(0px,0px); transform: scale(0.4); opacity: 0;left: 870px;top: 120px;}
}

.aoto04{animation:aoto04 16s infinite;}
@keyframes aoto05
{
        0% {transform:translateX(0px); opacity: 0.4;}
      25% {transform:translateX(30px);opacity: 0.6;}
      50% {transform:translateX(50px);opacity:; }
      75% {transform:translateX(30px);opacity: 0.6;}
      100% {transform:translateX(0px);opacity:0.4;}
}

.aoto05{animation:aoto05 20s linear infinite;}
@keyframes aoto06
{
      0% {transform:translateX(0px); top:30px;opacity: 0.2; right: 200px; left: 850px;transform: scale(0.3);}
      25% {transform:translateX(30px);transform: scale(0.5); opacity: 0.5; left: 900px;top:40px;}
      50% {transform:translateX(60px);transform: scale(0.8); opacity:0.8;top: 80px; left: 1000px;}
      75% {transform:translateX(30px);transform: scale(1); opacity:1 ;top: 100px;top:110px;}
      100% {transform:translateX(0px);opacity: 0.2;top:30px;left: 850px;transform: scale(0.3);}
}

.aoto06{animation:aoto06 20s infinite;}
@keyframes aoto07
{
      0%{transform: rotate(0deg);transform: scale(1);transform: translate(0px, 0px)}
      50%{transform: rotate(180deg);transform: scale(0.9);transform: translate(3px, 5px)}
      100%{transform: rotate(0deg);transform: scale(1);transform: translate(0px, 0px)}
}

.aoto07{animation:aoto07 10s infinite;}

@keyframes aoto08
{
      0% {transform:translateX(0px); top: 0;}
      50% {transform:translateX(30px);top: -20px;}
      100% {transform:translateX(0px);top: 0px;}
}

.aoto08{animation:aoto08 16s infinite;}

@keyframes aoto10
{
      0% {transform:translate(0,0px); }
      25% {transform:translate(10px,10px);}
      50% {transform:translate(-10px,-10px);}
      75% {transform:translate(10px,10px);}
      100% {transform:translate(0px,0);}
}

.aoto10{animation:aoto10 12s infinite;}


@keyframes aoto12
{
      0% {transform:translateY(0px); }
      50% {transform:translateY(20px);}
      100% {transform:translateY(0px);}
}

.aoto12{animation:aoto12 16s infinite;}

@media (max-width:1400px ){

  #navis{left:auto;right:0;margin-left:0;}

}