body{ background-color: #dcdddd; }
.hole{ width: 1250px; height: 880px; margin:auto; margin-top: 100px; margin-bottom: 60px;}

.hole_zuo{ width: 925px; height: 410px; background-color: #fff; float: left; position: relative;}

.hole_you{ width: 305px; height: 410px; float: right; background-color: #fff; }

.hole_bot_zuo{ width: 925px; height: 398px; background-color: #fff; float: left; margin-top: 20px;}
.hole_bot_you{ width: 305px; height: 398px; background-color: #fff; float: right; margin-top: 20px;}

.zuo_content{ width: 855px; height: 350px; border: 2px solid #2ca5df; margin:auto; margin-top: 29px;}
#Mycanvas{ margin: auto; display: block; margin-top: 33px; }

.hole_zuo .zd_tu1{ position: absolute; width: 290px; height: 289px; top: 62px; right: 178px; }
.hole_zuo .zd_tu2{ position: absolute; width: 240px; height: 240px; top: 89px; right: 204px; }
.hole_zuo .zd_tu3{ position: absolute; width: 212px; height: 212px; top: 104px; right: 216px; }
.hole_zuo .zd_tu4{ position: absolute; width: 169px; height: 169px; top: 126px; right: 237px; }

.hole_zuo .zd_num{ width: 70px; height: 80px; position: absolute; top: 180px; right: 287px; border-top: 4px solid #0ec2c6; }
.hole_zuo .zd_num span{ 

	display: block; 
	width: 84px; height: 43px; 
	margin:auto; 
	text-align: center; 
	font-size: 30px;
}

.hole_zuo .zd_num img{ 
	display: block; 
	width: 75%; 
	padding-top: 5px;
	padding-left: 12px;
}


.hole_zuo .zuoquan{ width: 140px; height: 115px; background: url('../images/zuoquan.png') no-repeat; position: absolute; top: 70px; left: 370px; background-size: 100%}
.hole_zuo .youquan{ width: 110px; height: 86px; background: url('../images/youquan.png') no-repeat; position: absolute; top: 180px; right: 68px;}
.hole_zuo .zuoquan span{ display: block; width: 52px; height: 35px; padding-left: 11px; color: #fff; padding-top: 25px; font-size: 22px;text-align: center; }
.hole_zuo .youquan span{ display: block; width: 52px; height: 35px; padding-left: 40px; color: #fff; padding-top: 26px; font-size: 22px;text-align: center; }




.hole_zuo .zd_tu1 .play{

	animation: music 0.5s linear infinite;
   -moz-animation: music 0.5s linear infinite;
   -webkit-animation: music 0.5s linear infinite;
   -o-animation: music 0.5s linear infinite;
}



.hole_zuo .zd_tu2 .play1{

	animation: music1 1s linear infinite;
   -moz-animation: music1 1s linear infinite;
   -webkit-animation: music1 1s linear infinite;
   -o-animation: music1 1s linear infinite;
}


.hole_zuo .zd_tu3 .play2{

	animation: music2 0.8s linear infinite;
   -moz-animation: music2 0.8s linear infinite;
   -webkit-animation: music2 0.8s linear infinite;
   -o-animation: music2 0.8s linear infinite;
}


.hole_zuo .zd_tu4 .play3{

	animation: music3 1s linear infinite;
   -moz-animation: music3 1s linear infinite;
   -webkit-animation: music3 1s linear infinite;
   -o-animation: music3 1s linear infinite;
}

@keyframes music{

        0%{
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform:rotate(360deg);    /* Opera*/
        }

}

@-webkit-keyframes music{

     	0%{
     		transform: rotate(0deg);
     		-webkit-transform: rotate(0deg);
     		-ms-transform: rotate(0deg);
     		-moz-transform: rotate(0deg);
     		-o-transform: rotate(0deg);
     	}
     	100%{
     		transform: rotate(360deg);
     		-webkit-transform: rotate(360deg);
     		-ms-transform: rotate(360deg);
     		-moz-transform: rotate(360deg);
     		-o-transform:rotate(360deg); 	/* Opera*/
     	}

}

@keyframes music1{

        0%{
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
        }
        100%{
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform:rotate(0deg);  /* Opera*/
        }

}
@-webkit-keyframes music1{

     	0%{
     		transform: rotate(360deg);
     		-webkit-transform: rotate(360deg);
     		-ms-transform: rotate(360deg);
     		-moz-transform: rotate(360deg);
     		-o-transform: rotate(360deg);
     	}
     	100%{
     		transform: rotate(0deg);
     		-webkit-transform: rotate(0deg);
     		-ms-transform: rotate(0deg);
     		-moz-transform: rotate(0deg);
     		-o-transform:rotate(0deg); 	/* Opera*/
     	}

}

@keyframes music2{

        0%{
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform:rotate(360deg);    /* Opera*/
        }

}
@-webkit-keyframes music2{

     	0%{
     		transform: rotate(0deg);
     		-webkit-transform: rotate(0deg);
     		-ms-transform: rotate(0deg);
     		-moz-transform: rotate(0deg);
     		-o-transform: rotate(0deg);
     	}
     	100%{
     		transform: rotate(360deg);
     		-webkit-transform: rotate(360deg);
     		-ms-transform: rotate(360deg);
     		-moz-transform: rotate(360deg);
     		-o-transform:rotate(360deg); 	/* Opera*/
     	}

}

@keyframes music3{

        0%{
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform:rotate(360deg);    /* Opera*/
        }

}
@-webkit-keyframes music3{

     	0%{
     		transform: rotate(0deg);
     		-webkit-transform: rotate(0deg);
     		-ms-transform: rotate(0deg);
     		-moz-transform: rotate(0deg);
     		-o-transform: rotate(0deg);
     	}
     	100%{
     		transform: rotate(360deg);
     		-webkit-transform: rotate(360deg);
     		-ms-transform: rotate(360deg);
     		-moz-transform: rotate(360deg);
     		-o-transform:rotate(360deg); 	/* Opera*/
     	}

}






.hole_you .you_top{ width: 100%; height: 28px; background-color: #2ca5df; }
.hole_you .you_content{ 
	width: 90%; 
	height: 350px;
	margin:auto; 
	margin-top: 15px; 
	overflow: hidden; 
	color: #454749; 
	font-size: 14px;
	line-height: 22px;
	position: relative;
}
.hole_you .you_content ul{ width: 100%; height: auto; position: absolute; top: 0; left: 0; }
.hole_you .you_content ul li{ width: 100%; height: 25px; overflow: hidden; line-height: 25px; }

.hole_bot_zuo .bot_zuo_top{ width: 100%; height: 28px;background-color: #2ca5df; }
.hole_bot_zuo .bot_zuo_content{ width: 95%; height: 245px; margin: auto; margin-top: 10px;}

.hole_bot_zuo .bot_zuo_content ul li{ width: 95px; height: auto; float: left; margin-right: 14px;}
.hole_bot_zuo .bot_zuo_content ul li .first{ 
	display: block; 
	width: 100%; 
	height: 30px; 
	line-height: 30px; 
	font-size: 14px; 
	text-align: center;
	border: 1px solid #2ca5df;
	border-radius: 5px;
	-webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px; 
    margin-bottom: 3px;
}


.hole_bot_zuo .bot_zuo_content ul li span{ 
	display: block; 
	width: 100%; 
	height: 25px; 
	line-height: 25px; 
	text-align: center; 
	font-size: 12px;
	
	margin-bottom: 5px;
}
.hole_bot_zuo .bot_zuo_content ul li .add1{background-color: #bbe2f5; }
.hole_bot_zuo .bot_zuo_content ul li .add2{
	background-color: #2ca5df; 
	color: #fff;
	height: 30px; 
	line-height: 30px; 
	font-size: 14px; 
	border-radius: 5px;
	-webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px; 
}





.bot_you_top{ width: 100%; height: 28px;background-color: #2ca5df;  }

.bot_you_cont{ width: 82%;  height: auto; margin:auto;}
.bot_you_cont h3{ display: block; padding-top: 30px; }
.bot_you_cont .twoh{padding-top: 10px;}

.bot_you_cont .amate1{ width: 100%; height: auto; padding-top: 23px;}
.bot_you_cont span{ display: block; }
.bot_you_cont .amate1 .kd{ width: 92%; margin: auto; height: 12px; padding-top: 5px;}
.bot_you_cont .amate1 .kd b{ display: inline-block; width: 1px; height: 12px; background-color: #606163; float: left; margin-right: 106px; }
.bot_you_cont .amate1 .kd .kd_y{ float: right; margin-right: 0; }
.bot_you_cont .amate1 ul{ padding-top: 5px; height: 30px;}
.bot_you_cont .amate1 ul li{ width: 25px; float: left; margin-right: 79px; text-align: center; font-size: 12px;}
.bot_you_cont .amate1 ul .ul_y{ float: right; margin-right: 0; }


.bot_you_cont .mate1{ 
	height: 8px;
	background-color: #454749;
	width: 250px;
	border-radius: 8px;
	-webkit-border-radius: 8px;
    -o-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 10px; 
    position: relative;
}
.bot_you_cont .mate1 i{ 
	display: block;
	width: 0px;
	height: 8px; 
	border-radius: 8px;
	-webkit-border-radius: 8px;
    -o-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px; 
    background-color: #92c755;
    position: absolute;
    top: 0;
    left: 0;
    
}


.bot_you_cont .mate2{ 
	height: 8px;
	background-color: #454749;
	width: 250px;
	border-radius: 8px;
	-webkit-border-radius: 8px;
    -o-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 10px; 
    position: relative;
}
.bot_you_cont .mate2 i{ 
	display: block;
	width: 0px;
	height: 8px; 
	border-radius: 8px;
	-webkit-border-radius: 8px;
    -o-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px; 
    background-color: #2493ae;
    position: absolute;
    top: 0;
    left: 0;
    
}

.bot_you_cont .mate3{ 
	height: 8px;
	background-color: #454749;
	width: 250px;
	border-radius: 8px;
	-webkit-border-radius: 8px;
    -o-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 10px; 
    position: relative;
}
.bot_you_cont .mate3 i{ 
	display: block;
	width: 0px;
	height: 8px; 
	border-radius: 8px;
	-webkit-border-radius: 8px;
    -o-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px; 
    background-color: #fba133;
    position: absolute;
    top: 0;
    left: 0;
    
}

.rand_kate{ width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); position: fixed; top: 0; left: 0;}
.rand_kate .kate_cont{ width: 556px; height: 296px; margin: auto; background: #2ca5df url('../images/kate_nav.jpg') center no-repeat; }
.rand_kate .kate_cont h3{ 
    display: block; 
    width: 210px; 
    height: 60px; 
    font-size: 20px; 
    text-align: center; 
    margin: auto; color: #FFF;
    padding-top: 88px;
    line-height: 30px;
}



.bjd{ width: 820px; height: 600px; background-color: #fff; margin: auto; padding-top: 50px; overflow: auto;}
.bjd ul{ width: 600px; height: auto; border: 2px solid #2ca5df; margin: auto; border-bottom: 0;}
.bjd ul li{ width: 100%; height: 40px; border-bottom: 2px solid #2ca5df; }

.bjd ul li span{display: block; float: left; border-right: 2px solid #2ca5df;width: 60%;height: 40px; line-height: 40px; text-align: center;}
.bjd ul li i{ float: right; font-style: normal;width: 39%;height: 40px; line-height: 40px; text-align: center;}

.bjd ul h3{ background-color: #2ca5df; color: #fff; display: block; width: 100%; height: 40px;}
.bjd ul h3 span{ display: block; float: left; width: 60%;height: 40px; line-height: 40px; text-align: center;}
.bjd ul h3 i{ display: block; float: left; width: 39%;height: 40px; line-height: 40px; text-align: center;}

.bjd ul h3 span{ float: left; border-right: 2px solid #2ca5df;}
.bjd ul h3 i{ float: right; font-style: normal;}



.rand_kate .bjd a{ 
    display: block;
    width: 120px; height: 35px;
    text-align: center;
    line-height: 35px;
    color: #fff;
    background-color: #2ca5df;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px; 
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}
.rand_kate .bjd a:hover{ background-color: #036eb6 }