body {
	background: #000000;
	font-family: Arial, "Microsoft YaHei";
	cursor: url(../img/hearthstone-cursor.png) 10 2, auto;
	overflow: hidden;
}
body:active {
  cursor: url(../img/hearthstone-click.png) 10 2, auto;
}
.ca-icon {
  cursor: url(../img/hearthstone-grab.png) 10 2, auto;
}
.core {
  cursor: url(../img/hearthstone-grab.png) 10 2, auto;
}
canvas {
	display: block;
	position:relative;z-index:-1;
}
/*光盘菜单*/
@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('images/websymbols/websymbols-regular-webfont.eot');
    src: url('images/websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('images/websymbols/websymbols-regular-webfont.woff') format('woff'),
         url('images/websymbols/websymbols-regular-webfont.ttf') format('truetype'),
         url('images/websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.ca-menu{
    padding:0;
    margin:20px auto;
    width: 1020px;
	font-family: 'Dosis', sans-serif;
	
}
.ca-menu li{
    width: 170px;
    height: 170px;
    border: 0px solid #cccccc;
    overflow: hidden;
    position: relative;
    float:left;
	/**background: url('../images/flag-menu.png');**/
    margin-right: 4px;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-border-radius: 125px;
    -moz-border-radius: 125px;
    border-radius: 125px;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.ca-menu li:last-child{
    margin-right: 0px;
}
.ca-menu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #fff;
    position: relative;
   -moz-box-shadow:0px 0px 3px #fff;
   -webkit-box-shadow:0px 0px 3px #fff;
   box-shadow:0px 0px 3px #fff;

}
.ca-icon{
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 40px;
    color: #f6f6f6;;
    line-height: 60px;
    position: absolute;
    width: 100%;
    height: 60px;
    left: 0px;
    top: 30px;
    text-align: center;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.ca-main{
    font-size: 24px;
    position: absolute;
    top: 110px;
    height: 80px;
    width: 170px;
    left: 50%;
    margin-left: -85px;
    opacity: 0.8;
    text-align: center;
}
.ca-sub{
    text-align:center;
    color:#666666;
    font-size: 26px;
    position: absolute;
    height: 80px;
    width: 170px;
    left: 50%;
    margin-left: -85px;
    top: 110px;
    opacity:0.8;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.ca-menu li:hover{
	
    /*background:#45b4e2;
	background:#92000e;*/
	color: #000;
	 font-size: 26px;
    border-color:#fff;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 45px 60px -50px #666666;
}
.ca-menu li:hover .ca-icon{
    color: #fff;
    font-size: 60px;
}
.ca-menu li:hover img{
	color: #fff;
    background: url('../images/flag-menu.png');
}
.ca-menu li:hover .ca-main{
	color: #fff;
    display: none;
}
.ca-menu li:hover .ca-sub{
	color: #fff;
    opacity: 0.8;
	
}
/*光盘菜单*/
/*右上角菜单*/
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
#nav{
    background:-webkit-radial-gradient(rgb(255,255,255),rgb(140,140,140));
    background:-o-radial-gradient(rgb(255,255,255),rgb(140,140,140));
    background:-moz-radial-gradient(rgb(255,255,255),rgb(140,140,140));
    background:-ms-radial-gradient(rgb(255,255,255),rgb(140,140,140));
    background:radial-gradient(rgb(255,255,255),rgb(140,140,140));
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-left: 0px;
    top: -80px;
    left: -80px;
    border: 1px solid gray;
}
#nav img{
    position: absolute;
    left:85px ;
    top:85px;
}
/* 圆角菜单底层 
#out{
    width: 700px;
    height: 700px;
    margin-left: 2050px;
    margin-top: -1050px;
    border-radius: 30%;
    background-color: rgb(210,210,206);
    opacity: 0.6;
}*/
#buttonphone{
    position: absolute;
    width: 100px;
    height: 100px;
    left: -100px;
    top: -100px;
    transform:rotate(110deg);
    opacity: 0.7;
}
#baidu{
    position: absolute;
    width: 100px;
    height: 100px;
    left: -100px;
    top: -100px;
    transform:rotate(110deg);
    opacity: 0.7;
}
#djinfo{
    position: absolute;
    width: 100px;
    height: 100px;
    left: -100px;
    top: -100px;
    transform:rotate(110deg);
    opacity: 0.7;
}
#appdown{
    position: absolute;
    width: 100px;
    height: 100px;
    left: -100px;
    top: -100px;
    transform:rotate(110deg);
    opacity: 0.7;
}
#rock{
    position: absolute;
    width: 100px;
    height: 100px;
    left: -100px;
    top: -100px;
    transform:rotate(110deg);
    opacity: 0.7;
}
#first{
    position: absolute;
    width: 100px;
    height: 100px;
    left: -100px;
    top: -100px;
    opacity: 0.7;
    transform:rotate(0deg);
}
#second{
    position: absolute;
    width: 100px;
    height: 100px;
    left: -100px;
    top: -100px;
    transform:rotate(45deg);
    opacity: 0.7;
}
#third{
    position: absolute;
    width: 100px;
    height: 100px;
    left: -100px;
    top: -100px;
    transform:rotate(90deg);
    opacity: 0.7;
}
#compound{
    position: absolute;
    width: 100px;
    height: 100px;
    left: -100px;
    top: -100px;
    transform:rotate(90deg);
    opacity: 0.7;
}
#four{
    position: absolute;
    width: 100px;
    height: 100px;
    left: -100px;
    top: -100px;
    transform:rotate(135deg);
    opacity: 0.7;
}
/*右上角菜单*/