* {margin: 0; padding: 0;}
/*left styles*/

.bodystyle{
	width:100%;
	height:100%;
	background-color:#D1EFFE;
}
.main-body{
	width:65%;
	height:100%;
	float:left;
}
.header {
/*顶部固定悬浮导航栏参数*/ 
/* position:fixed; 
z-index:1; */ /*顶层级效果*/
top:0; 
width:100%; 
height:50px;
background-color:#66ccff; 
text-align:center;
} 
.navi { 
margin:0px auto 0px;/*上下边距及中间对齐*/  
text-align:center; 
} 
.navi ul li a{ 
list-style-type:none; 
display:inline; 
padding:0px 10px;
font: bold 36px/50px Montserrat;
color: hsl(100,100%,100%);
}
.live
{
	position:relative;
	height:720px;
}
.testbody{
	text-align:center; 
      padding: 40px;
      font: bold 80px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;;
	  color: #000000 ;
	text-shadow: 5px 5px 0 #BBBBBB, 7px 7px 0 ;
      text-transform: uppercase;
}
.left {
	width:15%;
	height:100%;
	float:left;
}
/*nav styles*/
.left-nav ul {
	position:fixed; 
	z-index:2;
	top:250px;
	background: white; border-top: 12px solid hsl(180, 40%, 60%);
	width: 200px;
}
.left-nav ul li {
	list-style-type: none;
	/*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
	position: relative;
	overflow: hidden;
}
.left-nav ul li a {
	font: bold 20px/28px Montserrat; 
	color: hsl(180, 40%, 40%);
	display: block; 
	padding: 10px 15px;
	text-decoration: none;
	cursor: pointer; /*since the links are dummy without href values*/
	/*prevent text selection*/
	user-select: none;
	/*static positioned elements appear behind absolutely positioned siblings(.ink in this case) hence we will make the links relatively positioned to bring them above .ink*/
	position: relative;
}
.left-nav ul li a:hover {
    background: rgba(255,152,0,0.1);
    color: #f08f00;
}

/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.left-nav .ink {
	display: block; 
	position: absolute;
	background: hsl(180, 40%, 80%);
	border-radius: 100%;
	transform: scale(0);
}
/*animation effect*/
.left-nav .ink.animate {animation: ripple 0.65s linear;}
@keyframes ripple {
	/*scale the element to 250% to safely cover the entire link and fade it out*/
	100% {opacity: 0; transform: scale(2.5);}
}

.right{
	width:20%;

	background-color:#66ccff;
	float:leftt;
}

.footer{
	clear: both;
    background: rgba(137, 215, 255, 0.46);
    color: #929292;
    padding: 0 0;
    text-align: center;
    font-size: 18px;
    line-height: 2.5em;
    text-shadow: none;
	text-decoration:none; 
}
.footer a:hover {
    background: rgba(255,152,0,0.1);
    color: #f08f00;
}
.cnzz{
	float:left; 
	opacity:0;
}