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

*{margin:0;padding:0;}
body{background-size:100%;}
.musicbody{display:none;width:100%;height:100%;position:fixed;top:0;left:0;}
.nav{background:url(./images/banner_bg.jpg) no-repeat;width:960px;height:250px;position: absolute;top: 100px;left:-1000px;border: 2px solid #333;border-radius: 20px;}
.nav ul li{list-style:none;float:left;}
.nav ul li img{border-radius:150px;position: absolute;top:0xp;}

.navright{-webkit-animation:anim1 2s linear;}
.imgdown{-webkit-animation:anim2 4s cubic-bezier(0.86, 0.15, 1, 0.44);}
.rotate{-webkit-animation:rota 2s linear infinite;}
@-webkit-keyframes anim1{
	0%{left:-1000px;transform:scale(0.5)}
	50%{transform:scale(1)}
	75%{transform:scale(1.2)}
	100%{left:150px;transform:scale(1)}
	}

@-webkit-keyframes anim2{
	0%{top:-100%;transform:scale(0.5)}
	50%{transform:scale(1)}
	75%{transform:scale(1.2)}
	100%{top:0px;transform:scale(1)}
	}
@-webkit-keyframes rota{
	from{transform:rotate(0deg);}
	to{transform:rotate(360deg);}
	}
	
.nav ul li.img1{width:50px;height:50px;margin:90px 0px 0px 8px}
.nav ul li.img2{width:84px;height:84px;margin:130px 0px 0px 20px}
.nav ul li.img3{width:145px;height:145px;margin:52px 0px 0px 132px}
.nav ul li.img4{width:78px;height:78px;margin:35px 0px 0px 50px}
.nav ul li.img5{width:45px;height:45px;margin:120px 0px 0px 30px}


.nav ul li.img1 img{width:50px;height:50px;}
.nav ul li.img2 img{width:84px;height:84px;}
.nav ul li.img3 img{width:145px;height:145px;}
.nav ul li.img4 img{width:78px;height:78px;}
.nav ul li.img5 img{width:45px;height:45px;}

/***换肤样式开始***/

.bigimg{background:url(images/bg_pic1.jpg) no-repeat;}
.btn-hf{position:fixed;top:0;left:0;width:100%;height:40px;background:rgba(0,0,0,0.5);z-index:1;}
.btn-hf a{width:60px;line-height:40px;text-decoration:none;color:#fff;margin-left: 140px;}
.hf-style{display:none;position:fixed;top:0;left:0;width:100%;height:400px;background:rgba(0,0,0,0.8);z-index:2;}
.hf-style ul{width: 950px;height: 330px;margin: 0px auto;padding-top: 70px;}
.hf-style ul li{position:relative;list-style:none;width:170px;height:108px;float:left;margin:10px}
.hf-style ul li img{width:170px;height:108px;border:4px solid #fff}
.hf-style ul li span.icon{position:absolute;bottom:10px;right:10px;display:none;;width:18px;height:18px;background:url(./images/ioc.png) no-repeat -180px 0px;}


/*音乐播放器部分*/
.music{width:500px;height:115px;border-radius:0px 10px 10px 0px;background:#000;position: fixed;top: 380px;left: -480px;}
.music img{height: 95px;width: 95px;border-radius: 95px;margin: 10px;float: left;}
.btn{position:absolute;height:40px;width:130px;float:left;margin:38px 300px;}
.music .tit{color:#fff;width:150px;height:30px;line-height:30px;font-size: 18px;font-weight: bold;margin:45px 10px;float:left;}

.music .jdt{width: 340px;height: 3px;background: #333;position: absolute;left: 110px;top: 80%;}
.music .jdj{width: 0px;height: 3px;background: #fff;position: absolute;left: 110px;top: 80%;}
.btn .shang{width: 20px;height: 20px;margin: 12px 10px;background: url(images/player_bg.png) no-repeat -76px -4px;float: left;}
.btn .play{width: 30px;height: 34px;margin: 5px 10px;background: url(images/player_bg.png) no-repeat -110px -4px;float: left;}
.btn .xia{width: 20px;height: 20px;margin: 12px 10px;background: url(images/player_bg.png) no-repeat -155px -4px;float: left;}

.btn .shang:hover{background:url(images/player_bg.png) no-repeat -76px -36px}
.btn .play:hover{background:url(images/player_bg.png) no-repeat -110px -46px}
.btn .xia:hover{background:url(images/player_bg.png) no-repeat -155px -36px}

.close{display:none;position: absolute;top: 0;right: 0;width:20px;height:115px;border-radius:0px 8px 8px 0px;float:right;background:url(images/player_bg.png) no-repeat -47px 0px;}
.close:hover{background:url(images/player_bg.png) no-repeat -2px 0px}
.open{position: absolute;top: 0;right: 0;width: 20px;height: 115px;border-radius: 0px 8px 8px 0px;background: url(images/player_bg.png) no-repeat -47px 0px;}
.open:hover{background:url(images/player_bg.png) no-repeat -24px 0px}


.stop {width: 30px;height: 34px;margin: 5px 10px;background: url(images/player_bg.png) no-repeat -297px -92px;float: left;}
.stop:hover{background: url(images/player_bg.png) no-repeat -340px -92px;}


/***页面加载特效***/
.loading{display:none;width:100%;height:100%;background:rgba(0,0,0,0.5);position:fixed;top:0px;left:0px;}
.loading ul.mubu{width:140px;height:140px;;margin:250px auto;

-webkit-transform-style:preserve-3D;/*设置3D幕布样式*/
animation:zqq 4s linear infinite;}
@-webkit-keyframes zqq{
	from{-webkit-transform:rotateX(-8deg)rotateY(0deg) rotateZ(-8deg)}
	to{-webkit-transform:rotateX(8deg)rotateY(360deg)rotateZ(8deg)}
	}
.loading ul.mubu li{list-style: none;width: 140px;height: 140px;background:rgba(0, 188, 212, 0.23);border-width: 2px;border-style: solid;border-color: #009688;position:absolute;box-shadow:0 0 50px rgb(153,249,255);}
.loading ul.mubu li:nth-child(1){
    -webkit-transform:translate3d(70px,0px,0px) rotateY(90deg);
  }
.loading ul.mubu li:nth-child(2){
    -webkit-transform:translate3d(-70px,0px,0px) rotateY(90deg);
  }
.loading ul.mubu li:nth-child(3){
    -webkit-transform:translate3d(0px,0px,-70px) rotateY(0deg);
  }
.loading ul.mubu li:nth-child(4){
    -webkit-transform:translate3d(0px,70px,0px) rotateX(90deg);
  }
.loading ul.mubu li:nth-child(5){
    -webkit-transform:translate3d(0px,-70px,0px) rotateX(90deg);
  }
.loading ul.mubu li:nth-child(6){
    -webkit-transform:translate3d(0px,0px,70px) rotateX(0deg);
  }
.loading ul.mubu li:nth-child(7){
    -webkit-transform:translate3d(0px,0px,0px) rotateX(0deg);background:#03A9F4;line-height:140px;color:#fff;font-size:30px;text-align:center;border:none;background:none;box-shadow:none;
  }