html,body{height:100%;overflow:hidden}html,body,h1,h2,h3,h4,h5,h6,p,ul,li{margin:0;padding:0;font:14px "微软雅黑"}a{text-decoration:none;display:block}li{list-style:none}img{display:block}.clearfix{*zoom:1}.clearfix:after{content:"";display:block;clear:both}.commonTitle{color:#009ee0;font-size:80px;line-height:.8;font-weight:bold;letter-spacing:-5px}.commonText{color:white;line-height:1.5;font-size:15px}#wrap{height:100%}#wrap>#head{background:white!important;width:100%}#wrap>#head>.headMain{width:1100px;height:80px;margin:0 auto;position:relative}#wrap>#head>.headMain>.logo{margin-top:30px;float:left}#wrap>#head>.headMain>.nav{margin-top:50px;float:right}#wrap>#head>.headMain>.nav>ul>li{float:left;margin-left:40px;position:relative}#wrap>#head>.headMain>.nav>ul>li .up{position:absolute;width:0;color:#000;overflow:hidden;transition:1s width}#wrap>#head>.headMain>.nav>ul>li:hover .up{width:100%}#wrap>#head>.headMain>.arrow{width:21px;height:11px;background:url(../img/h5Project/menuIndicator.png);position:absolute;bottom:-11px;transition:1s left;z-index:2}#wrap>#content{overflow:hidden;width:100%;position:relative}#wrap>#content>.list{width:100%;position:absolute;left:0;top:0;transition:1s top}#wrap>#content>.list>li{position:relative;background-position:50% 50%!important;overflow:hidden}#wrap>#content>.list>li>section{width:1100px;height:520px;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}#wrap>#content>.list>.home{background:url(../img/h5Project/bg1.jpg) no-repeat}#wrap>#content>.list>.home .home1{width:100%;height:100%;perspective:1000px;transform-style:preserve-3d}#wrap>#content>.list>.home .home1>li{position:absolute;left:0;top:0;right:0;bottom:0;visibility:hidden}#wrap>#content>.list>.home .home1>li:nth-of-type(1){background-color:#dc6c5f}#wrap>#content>.list>.home .home1>li:nth-of-type(2){background-color:#95dc84}#wrap>#content>.list>.home .home1>li:nth-of-type(3){background-color:#64b9d2}#wrap>#content>.list>.home .home1>li:nth-of-type(4){background-color:#000}#wrap>#content>.list>.home .home1>li>div{margin-top:200px;color:white;text-align:center}#wrap>#content>.list>.home .home1>li.active{visibility:visible}#wrap>#content>.list>.home .home2{position:absolute;left:0;right:0;bottom:0;text-align:center}#wrap>#content>.list>.home .home2>li{display:inline-block;width:20px;height:20px;background-color:rgba(255,255,255,0.5);margin:2px;border-radius:50%;box-shadow:0 0 4px rgba(25,25,25,0.8);cursor:pointer}#wrap>#content>.list>.home .home2>li.active{background-color:white;cursor:default}#wrap>#content>.list>.home .home1>li.leftHide{visibility:hidden;animation:1s leftHide 1 linear}#wrap>#content>.list>.home .home1>li.rightShow{visibility:visible;animation:1s rightShow 1 linear}@keyframes leftHide{0%{visibility:visible}50%{transform:translateX(-40%) rotateY(30deg) scale(.8)}100%{transform:translateZ(-200px)}}@keyframes rightShow{0%{visibility:hidden;transform:translateZ(-200px)}50%{transform:translateX(40%) rotateY(-30deg) scale(.8)}}#wrap>#content>.list>.home .home1>li.leftShow{visibility:visible;animation:1s leftShow 1 linear}#wrap>#content>.list>.home .home1>li.rightHide{visibility:hidden;animation:1s rightHide 1 linear}@keyframes leftShow{0%{visibility:hidden;transform:translateZ(-200px)}50%{transform:translateX(-40%) rotateY(30deg) scale(.8)}}@keyframes rightHide{0%{visibility:visible}50%{transform:translateX(40%) rotateY(-30deg) scale(.8)}100%{transform:translateZ(-200px)}}#wrap>#content>.list>.course{background:url(../img/h5Project/bg2.jpg) no-repeat;position:relative}#wrap>#content>.list>.course .course1{margin:50px;z-index:2;position:relative}#wrap>#content>.list>.course .course2{margin-left:50px;width:400px;z-index:2;position:relative}#wrap>#content>.list>.course .course3{width:480px;position:absolute;right:50px;top:70px;z-index:2}#wrap>#content>.list>.course .course3 .item{width:120px;height:132px;float:left;position:relative;perspective:500px;transform-style:preserve-3d;word-wrap:break-word}#wrap>#content>.list>.course .course3 .item .face,#wrap>#content>.list>.course .course3 .item .backFace{position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box;padding:15px}#wrap>#content>.list>.course .course3 .item .face{backface-visibility:hidden;background:#009ee0;color:white;transform:rotateY(180deg);transition:1s transform}#wrap>#content>.list>.course .course3 .item:hover .face{transform:rotateY(360deg)}#wrap>#content>.list>.course .course3 .item:hover .backFace{transform:rotateY(180deg)}#wrap>#content>.list>.course .course3 .item .backFace{background-position:50% 50%!important;transition:1s transform}#wrap>#content>.list>.course .course3 .item:nth-of-type(1) .backFace{background:url(../img/h5Project/binoli.png) no-repeat}#wrap>#content>.list>.course .course3 .item:nth-of-type(2) .backFace{background:url(../img/h5Project/gu.png) no-repeat}#wrap>#content>.list>.course .course3 .item:nth-of-type(3) .backFace{background:url(../img/h5Project/bks.png) no-repeat}#wrap>#content>.list>.course .course3 .item:nth-of-type(4) .backFace{background:url(../img/h5Project/hlx.png) no-repeat}#wrap>#content>.list>.course .course3 .item:nth-of-type(5) .backFace{background:url(../img/h5Project/lbs.png) no-repeat}#wrap>#content>.list>.course .course3 .item:nth-of-type(6) .backFace{background:url(../img/h5Project/leonberg.png) no-repeat}#wrap>#content>.list>.course .course3 .item:nth-of-type(7) .backFace{background:url(../img/h5Project/lbs.png) no-repeat}#wrap>#content>.list>.course .course3 .item:nth-of-type(8) .backFace{background:url(../img/h5Project/binoli.png) no-repeat}#wrap>#content>.list>.course .course3 .item:nth-of-type(9) .backFace{background:url(../img/h5Project/lbs.png) no-repeat}#wrap>#content>.list>.course .course3 .item:nth-of-type(10) .backFace{background:url(../img/h5Project/bks.png) no-repeat}#wrap>#content>.list>.course .course3 .item:nth-of-type(11) .backFace{background:url(../img/h5Project/binoli.png) no-repeat}#wrap>#content>.list>.course .course3 .item:nth-of-type(12) .backFace{background:url(../img/h5Project/bks.png) no-repeat}#wrap>#content>.list>.course .course3 .line{position:absolute;top:-7px;width:9px;height:410px;background:url(img/h5Project/plus_row.png) no-repeat}#wrap>#content>.list>.course .course3 .line:nth-of-type(1){left:-5px}#wrap>#content>.list>.course .course3 .line:nth-of-type(2){left:115px}#wrap>#content>.list>.course .course3 .line:nth-of-type(3){left:235px}#wrap>#content>.list>.course .course3 .line:nth-of-type(4){left:355px}#wrap>#content>.list>.course .course3 .line:nth-of-type(5){left:475px}#wrap>#content>.list>.works{background:url(../img/h5Project/bg3.jpg) no-repeat}#wrap>#content>.list>.works .works1{margin:50px 0 100px 50px;z-index:2;position:relative}#wrap>#content>.list>.works .works2{margin-left:50px;z-index:2;position:relative}#wrap>#content>.list>.works .works2 .item{width:220px;height:133px;margin:0 1px;float:left;position:relative;overflow:hidden}#wrap>#content>.list>.works .works2 .item:last-child{width:332px}#wrap>#content>.list>.works .works2 .item .mask{position:absolute;left:0;top:0;right:0;bottom:0;color:white;background-color:black;opacity:0;box-sizing:border-box;padding:15px;transition:1s opacity}#wrap>#content>.list>.works .works2 .item .mask .icon{background:url(../img/h5Project/zoomico.png) no-repeat;width:32px;height:34px;margin:0 auto;margin-top:10px;transition:1s background-position}#wrap>#content>.list>.works .works2 .item:hover .mask{opacity:.7}#wrap>#content>.list>.works .works2 .item .mask .icon:hover{background-position:0 -36px}#wrap>#content>.list>.works .works2 .item img{transition:1s transform}#wrap>#content>.list>.works .works2 .item:hover img{transform:rotate(30deg) scale(1.5)}#wrap>#content>.list>.works .works3{background:url(../img/h5Project/robot.png) no-repeat;width:167px;height:191px;position:absolute;left:900px;top:170px;animation:works3Move 4s linear infinite;z-index:2}@keyframes works3Move{0%{transform:translateX(0px) rotateY(0deg)}49%{transform:translateX(-495px) rotateY(0deg)}50%{transform:translateX(-500px) rotateY(180deg)}100%{transform:translateX(0px) rotateY(180deg)}}#wrap>#content>.list>.about{background:url(../img/h5Project/bg4.jpg) no-repeat}#wrap>#content>.list>.about .about1{margin:50px 0 100px 50px}#wrap>#content>.list>.about .about2{margin-left:50px;width:400px}#wrap>#content>.list>.about .about3>.item{width:260px;height:200px;position:absolute;border:5px solid rgba(255,255,255,0.5);border-radius:8px;z-index:2;overflow:hidden}#wrap>#content>.list>.about .about3>.item:nth-of-type(1){left:750px;top:50px}#wrap>#content>.list>.about .about3>.item:nth-of-type(2){left:600px;top:290px}#wrap>#content>.list>.about .about4{width:357px;height:998px;background:url(../img/h5Project/greenLine.png) no-repeat;position:absolute;left:50%;top:-100px}#wrap>#content>.list>.about .about3>.item>span,#wrap>#content>.list>.about .about3>.item>ul{position:absolute;left:0;right:0;bottom:0;top:0}#wrap>#content>.list>.about .about3>.item:nth-of-type(1)>span{background:url(../img/h5Project/about2.jpg) no-repeat;transform:scale(1.5);transition:.8s transform}#wrap>#content>.list>.about .about3>.item:nth-of-type(2)>span{background:url(../img/h5Project/about4.jpg) no-repeat;transform:scale(1.5);transition:.8s transform}#wrap>#content>.list>.about .about3>.item:hover>span{transform:scale(1)}#wrap>#content>.list>.about .about3>.item>ul>li{float:left;position:relative;overflow:hidden}#wrap>#content>.list>.about .about3>.item>ul>li>img{position:absolute;transition:.8s top,0.8s left}#wrap>#content>.list>.team{background:url(../img/h5Project/bg5.jpg) no-repeat}#wrap>#content>.list>.team .team1{float:left;width:400px;margin:50px}#wrap>#content>.list>.team .team2{float:right;width:400px;margin:50px}#wrap>#content>.list>.team .team3{width:944px;height:448px;position:absolute;left:50%;margin-left:-472px;top:250px}#wrap>#content>.list>.team .team3 ul{position:relative;height:100%}#wrap>#content>.list>.team .team3 ul li{transition:1s opacity;width:118px;height:100%;float:left;background:url(../img/h5Project/team.png) no-repeat}#wrap>#content>.list>.team .team3 ul li:nth-of-type(1){background-position:0 0}#wrap>#content>.list>.team .team3 ul li:nth-of-type(2){background-position:-118px 0}#wrap>#content>.list>.team .team3 ul li:nth-of-type(3){background-position:-236px 0}#wrap>#content>.list>.team .team3 ul li:nth-of-type(4){background-position:-354px 0}#wrap>#content>.list>.team .team3 ul li:nth-of-type(5){background-position:-472px 0}#wrap>#content>.list>.team .team3 ul li:nth-of-type(6){background-position:-590px 0}#wrap>#content>.list>.team .team3 ul li:nth-of-type(7){background-position:-708px 0}#wrap>#content>.list>.team .team3 ul li:nth-of-type(8){background-position:-826px 0}#wrap>#content>.list>.team .team3 canvas{position:absolute;left:0;top:0}#wrap>#content>.dot{position:fixed;right:10px;top:45%}#wrap>#content>.dot>li{width:10px;height:10px;border:2px solid pink;margin-top:10px;border-radius:50%}#wrap>#content>.dot>li.active{background-color:pink}#wrap>#content>.list>.home .home1,#wrap>#content>.list>.home .home2{transition:1s transform,1s opacity}#content .course .plane1{width:359px;height:283px;background:url(../img/h5Project/plane1.png) no-repeat;position:absolute;left:300px;top:-100px;transition:1s transform}#content .course .plane2{width:309px;height:249px;background:url(../img/h5Project/plane2.png) no-repeat;position:absolute;left:-100px;top:200px;transition:1s transform}#content .course .plane3{width:230px;height:182px;background:url(../img/h5Project/plane3.png) no-repeat;position:absolute;left:300px;top:400px;transition:1s transform}#content .works .pencel1{width:180px;height:97px;background:url(../img/h5Project/pencel1.png) no-repeat;position:absolute;transition:1s transform;left:500px;top:0}#content .works .pencel2{width:268px;height:38px;background:url(../img/h5Project/pencel2.png) no-repeat;position:absolute;transition:1s transform;left:300px;top:250px}#content .works .pencel3{width:441px;height:231px;background:url(../img/h5Project/pencel3.png) no-repeat;position:absolute;transition:1s transform;left:650px;top:300px}#wrap>#content>.list>.about .about3>.item,#wrap>#content>.list>.team .team1,#wrap>#content>.list>.team .team2{transition:1s transform}#wrap>#head>.headMain>.music{width:14px;height:14px;background:url(../img/h5Project/musicon.gif);float:left;margin:50px 0 0 5px}#wrap>#mask{height:100%;width:100%;position:absolute;z-index:100}#wrap>#mask>.up{width:100%;height:50%;background:pink;transition:1s height}#wrap>#mask>.down{width:100%;height:50%;background:deeppink;transition:1s height;position:absolute;bottom:0}#wrap>#mask>.line{height:4px;width:0;background:white;position:absolute;left:0;top:50%;margin-top:-2px;transition:1s width}