@charset "utf-8";


#mMainDiv{
	width:1100px;
	-webkit-box-shadow: 6px 6px 6px;
	-moz-box-shadow: 6px 6px 6px;
	box-shadow: 6px 6px 6px;
}
.cs_lDiv_Main{
	float:left;
	left:0;
	width:200px;
}
.cs_rDiv_Main{
	float:right;
	right:0;
	width:900px;
}

.cs_rDiv_lMain{
	float:left;
	left:0;
	width:600px;
}
.cs_rDiv_rMain{
	float:right;
	right:0;
	width:300px;
}
.cs_rDiv_Top{
	position:relative;
	right:0;
	top:0;
	width:300px;
	height:161px;
	-moz-background-size:100% 100%;
	background-size:100% 100%;
}
.cs_rDiv_Btm{
	position:relative;
	right:0;
	width:300px;
	height:248px;
	-moz-background-size:100% 100%;
	background-size:100% 100%;
}
.cs_rDiv_bMain{
	position:relative;
	width:900px;
	left:0px;
}
.cs_rDiv_bMainChA{
	position:relative;
	float:left;
	left:0;
	width:66%;
	height:451px;
}
.cs_rDiv_bMainChB{
	position:relative;
	float:right;
	right:0;
	width:33%;
	height:451px;
}
.cs_rDiv_bMain_Q{
	height:1352px;
}
.cs_rDiv_bMainCh1{
	position:relative;
	float:left;
	left:0;
	width:50%;
	height:100%;
}
.cs_rDiv_bMainCh2{
	position:relative;
	width:50%;
	left:50%;
	top:0px;
	height:100%;
}
.cs_rDiv_bMainCh3{
	position:relative;
	float:right;
	right:0;
	width:100%;
	height:100%;
}
.cs_lDiv_gg{
	position:relative;
	width:100%;
	height:285px;
	-moz-background-size:100% 100%;
	background-size:100% 100%;
}
.cs_Book2 #book1{
	position:absolute;
	left:0;
	width:371px;
	height:480px;
	-moz-background-size:100% 100%;
	background-size:100% 100%;
}
.cs_Book2 #book2{
	position:absolute;
	right:0;
	width:529px;
	height:480px;
	-moz-background-size:100% 100%;
	background-size:100% 100%;
}
.cs_lDiv_Clr{
}
.cs_rDiv_Clr{
}


.cs_rDiv_ColuUnit{
	position:relative;
	height:340px;
	width:100%;
}
.cs_rDiv_ColuUnitA{
	position:relative;
	float:left;
	left:0;
	width:50%;
	height:340px;
	-moz-background-size:100% 100%;
	background-size:100% 100%;
}
.cs_rDiv_ColuUnitB{
	position:relative;
	float:right;
	left:0;
	width:50%;
	height:340px;
	-moz-background-size:100% 100%;
	background-size:100% 100%;
}




.cs_Menu{
	z-index:99;
	position:absolute;
	width:120px;
	height:59px;
	text-align:center;
	font-size:16px;
}
.cs_Menu .div{
	position:absolute;
	top:15px;
	left:20%;
	width:60%;
	height:29px;
	background-color:rgba(102,255,51,0.7);
	border-radius:10px;
	-webkit-box-shadow: 3px 3px 3px;
	-moz-box-shadow: 3px 3px 3px;
	box-shadow: 3px 3px 3px;
}
.cs_Menu .div:hover{
	cursor: pointer;
	color:#ff00ff;
}

.cs_Rotate1{
	transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
}
.cs_Rotate2{
	transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
}
.cs_Rotate3{
	transform: rotate(5deg);
	-o-transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
}
.cs_Rotate4{
	transform: rotate(10deg);
	-o-transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
}

<%'* 震颤 *%>
@-webkit-keyframes pShake{
    0%,100%{-webkit-transform:translateY(0);}
    10%,30%,50%,70%,90%{-webkit-transform:translateY(-10px);}
    20%,40%,60%,80%{-webkit-transform:translateY(10px);}
}
@-moz-keyframes pShake{
    0%,100%{-moz-transform:translateY(0);}
    10%,30%,50%,70%,90%{-moz-transform:translateY(-10px);}
    20%,40%,60%,80%{-moz-transform:translateY(10px);}
}
@-ms-keyframes pShake{
    0%,100%{-ms-transform:translateY(0);}
    10%,30%,50%,70%,90%{-ms-transform:translateY(-10px);}
    20%,40%,60%,80%{-ms-transform:translateY(10px);}
}
@keyframes pShake{
    0%,100%{transform:translateY(0);}
    10%,30%,50%,70%,90%{transform:translateY(-10px);}
    20%,40%,60%,80%{transform:translateY(10px);}
}
.pMoveShake{
 transform-origin:50% top;
 -ms-transform-origin:50% top;
 -moz-transform-origin:50% top;
 -webkit-transform-origin:50% top;
 -o-transform-origin:50% top;

  -webkit-animation: pShake 16s ease-in-out infinite alternate;
  -moz-animation: pShake 16s ease-in-out infinite alternate;
  -ms-animation: pShake 16s ease-in-out infinite alternate;
  -o-animation: pShake 16s ease-in-out infinite alternate;
  animation: pShake 16s ease-in-out infinite alternate;
}

<%'/* 摇晃 */%>
@-webkit-keyframes pWobble{
    0%{-webkit-transform: rotate(0);}
    15%{-webkit-transform: rotate(-5deg);}
    30%{-webkit-transform: rotate(3deg);}
    45%{-webkit-transform: rotate(-3deg);}
    60%{-webkit-transform: rotate(2deg);}
    75%{-webkit-transform: rotate(-1deg);}
    100%{-webkit-transform: rotate(0);}
}
@-moz-keyframes pWobble{
    0%{-moz-transform: rotate(0);}
    15%{-moz-transform: rotate(-5deg);}
    30%{-moz-transform: rotate(3deg);}
    45%{-moz-transform: rotate(-3deg);}
    60%{-moz-transform: rotate(2deg);}
    75%{-moz-transform: rotate(-1deg);}
    100%{-moz-transform: rotate(0);}
}
@-ms-keyframes pWobble{
    0%{-ms-transform: rotate(0);}
    15%{-ms-transform: rotate(-5deg);}
    30%{-ms-transform: rotate(3deg);}
    45%{-ms-transform: rotate(-3deg);}
    60%{-ms-transform: rotate(2deg);}
    75%{-ms-transform: rotate(-1deg);}
    100%{-ms-transform: rotate(0);}
}
@keyframes pWobble{
    0%{transform: rotate(0);}
    15%{transform: rotate(-5deg);}
    30%{transform: rotate(3deg);}
    45%{transform: rotate(-3deg);}
    60%{transform: rotate(2deg);}
    75%{transform: rotate(-1deg);}
    100%{transform: rotate(0);}
}
.pMoveWobble16{
	top:30px;
	width:160px;
 transform-origin:50% 0;
 -ms-transform-origin:50% 0;
 -moz-transform-origin:50% 0;
 -webkit-transform-origin:50% 0;
 -o-transform-origin:50% 0;

  -webkit-animation: pWobble 16s ease-in-out infinite alternate;
  -moz-animation: pWobble 16s ease-in-out infinite alternate;
  -ms-animation: pWobble 16s ease-in-out infinite alternate;
  -o-animation: pWobble 16s ease-in-out infinite alternate;
  animation: pWobble 16s ease-in-out infinite alternate;
}
.pMoveWobble14{
	top:30px;
	width:160px;
 transform-origin:50% 0;
 -ms-transform-origin:50% 0;
 -moz-transform-origin:50% 0;
 -webkit-transform-origin:50% 0;
 -o-transform-origin:50% 0;

  -webkit-animation: pWobble 14s ease-in-out infinite alternate;
  -moz-animation: pWobble 14s ease-in-out infinite alternate;
  -ms-animation: pWobble 14s ease-in-out infinite alternate;
  -o-animation: pWobble 14s ease-in-out infinite alternate;
  animation: pWobble 14s ease-in-out infinite alternate;
}
.pMoveWobble12{
	top:30px;
	width:160px;
 transform-origin:50% 0;
 -ms-transform-origin:50% 0;
 -moz-transform-origin:50% 0;
 -webkit-transform-origin:50% 0;
 -o-transform-origin:50% 0;

  -webkit-animation: pWobble 12s ease-in-out infinite alternate;
  -moz-animation: pWobble 12s ease-in-out infinite alternate;
  -ms-animation: pWobble 12s ease-in-out infinite alternate;
  -o-animation: pWobble 12s ease-in-out infinite alternate;
  animation: pWobble 12s ease-in-out infinite alternate;
}
.pMoveWobble9{
	top:30px;
	width:160px;
 transform-origin:50% 0;
 -ms-transform-origin:50% 0;
 -moz-transform-origin:50% 0;
 -webkit-transform-origin:50% 0;
 -o-transform-origin:50% 0;

  -webkit-animation: pWobble 9s ease-in-out infinite alternate;
  -moz-animation: pWobble 9s ease-in-out infinite alternate;
  -ms-animation: pWobble 9s ease-in-out infinite alternate;
  -o-animation: pWobble 9s ease-in-out infinite alternate;
  animation: pWobble 9s ease-in-out infinite alternate;
}


.pMoveCls{
  transform-origin:left bottom;
  -ms-transform-origin:left bottom;
  -moz-transform-origin:left bottom;
  -webkit-transform-origin:left bottom;
  -o-transform-origin:left bottom;

  -webkit-animation: swingCls 10s ease-in-out infinite alternate;
  -moz-animation: swingCls 10s ease-in-out infinite alternate;
  -ms-animation: swingCls 10s ease-in-out infinite alternate;
  -o-animation: swingCls 10s ease-in-out infinite alternate;
  animation: swingCls 10s ease-in-out infinite alternate;
}

/* 摇摆 */
@-webkit-keyframes swingCls{
    20%{-webkit-transform:rotate(5deg);}
    40%{-webkit-transform:rotate(-4deg);}
    60%{-webkit-transform:rotate(3deg);}
    80%{-webkit-transform:rotate(-3deg);}
    100%{-webkit-transform:rotate(0);}
}
@-moz-keyframes swingCls{
    20%{-moz-transform:rotate(5deg);}
    40%{-moz-transform:rotate(-4deg);}
    60%{-moz-transform:rotate(3deg);}
    80%{-moz-transform:rotate(-3deg);}
    100%{-moz-transform:rotate(0);}
}
@-ms-keyframes swingCls{
    20%{-ms-transform:rotate(5deg);}
    40%{-ms-transform:rotate(-4deg);}
    60%{-ms-transform:rotate(3deg);}
    80%{-ms-transform:rotate(-3deg);}
    100%{-ms-transform:rotate(0);}
}
@keyframes swingCls{
    20%{transform:rotate(5deg);}
    40%{transform:rotate(-4deg);}
    60%{transform:rotate(3deg);}
    80%{transform:rotate(-3deg);}
    100%{transform:rotate(0);}
}

@media screen and (min-width: 1600px) { 
	#mMainDiv{
		width:1600px;
		-webkit-box-shadow: 6px 6px 6px;
		-moz-box-shadow: 6px 6px 6px;
		box-shadow: 6px 6px 6px;
	}
	.cs_lDiv_Main{
		float:left;
		left:0;
		width:400px;
	}
	.cs_rDiv_Main{
		float:right;
		right:0;
		width:1200px;
	}
	.cs_rDiv_lMain{
		float:left;
		left:0;
		width:700px;
	}
	.cs_rDiv_rMain{
		float:right;
		right:0;
		width:500px;
	}
	.cs_rDiv_Top{
		position:relative;
		right:0;
		top:0;
		width:500px;
		height:268px;
	}
	.cs_rDiv_Btm{
		position:relative;
		right:0;
		width:500px;
		height:414px;
	}
	.cs_rDiv_bMain{
		position:relative;
		width:1200px;
		left:0px;
	}
	.cs_rDiv_bMainChA{
		position:relative;
		float:left;
		left:0;
		width:66%;
		height:451px;
	}
	.cs_rDiv_bMainChB{
		position:relative;
		float:right;
		right:0;
		width:33%;
		height:451px;
	}
	.cs_rDiv_bMain_Q{
		height:1352px;
	}
	.cs_lDiv_gg{
		width:100%;
		height:285px;
	}
	.cs_Book2 #book1{
		width:495px;
		height:480px;
	}
	.cs_Book2 #book2{
		width:705px;
		height:480px;
	}
}
@media screen and (min-width: 1100px) and (max-width: 1600px) { 
	#mMainDiv{
		width:1100px;
		-webkit-box-shadow: 6px 6px 6px;
		-moz-box-shadow: 6px 6px 6px;
		box-shadow: 6px 6px 6px;
	}
	.cs_lDiv_Main{
		float:left;
		left:0;
		width:200px;
	}
	.cs_rDiv_Main{
		float:right;
		right:0;
		width:900px;
	}
	.cs_rDiv_lMain{
		float:left;
		left:0;
		width:600px;
	}
	.cs_rDiv_rMain{
		float:right;
		right:0;
		width:300px;
	}
	.cs_rDiv_Top{
		position:relative;
		right:0;
		top:0;
		width:300px;
		height:161px;
	}
	.cs_rDiv_Btm{
		position:relative;
		right:0;
		width:300px;
		height:248px;
	}
	.cs_rDiv_bMain{
		position:relative;
		width:900px;
		left:0px;
	}
	.cs_rDiv_bMainChA{
		position:relative;
		float:left;
		left:0;
		width:66%;
		height:451px;
	}
	.cs_rDiv_bMainChB{
		position:relative;
		float:right;
		right:0;
		width:33%;
		height:451px;
	}
	.cs_rDiv_bMain_Q{
		height:1352px;
	}
	.cs_lDiv_gg{
		width:100%;
		height:285px;
	}
	.cs_Book2 #book1{
		width:371px;
		height:480px;
	}
	.cs_Book2 #book2{
		width:529px;
		height:480px;
	}
} 
@media screen and (min-width: 768px) and (max-width: 1100px) { 
	#mMainDiv{
		width:768px;
		-webkit-box-shadow: 3px 3px 3px;
		-moz-box-shadow: 3px 3px 3px;
		box-shadow: 3px 3px 3px;
	}
	.cs_lDiv_Main{
		float:left;
		left:0;
		width:200px;
	}
	.cs_rDiv_Main{
		float:right;
		right:0;
		width:568px;
	}
	.cs_rDiv_lMain{
		float:left;
		left:0;
		width:568px;
	}
	.cs_rDiv_rMain{
		float:right;
		right:0;
		width:568px;
	}
	.cs_rDiv_Top{
		position:relative;
		right:0;
		top:0;
		width:568px;
		height:161px;
	}
	.cs_rDiv_Btm{
		position:relative;
		right:0;
		width:568px;
		height:470px;
	}
	.cs_rDiv_bMain{
		position:relative;
		width:568px;
		left:0px;
	}
	.cs_rDiv_Clr{
		clear:both;
	}
	.cs_rDiv_bMainChA,.cs_rDiv_bMainChB{
		position:relative;
		width:100%;
		height:451px;
	}
	.cs_rDiv_bMain_Q{
		height:2704px;
	}
	.cs_lDiv_gg{
		width:100%;
		height:285px;
	}
	.cs_Book2 #book2{
		width:100%;
		height:480px;
	}
	.cs_Book2 #book1{
		display:none;
	}
} 
@media screen and (min-width: 550px) and (max-width: 768px) { 
	#mMainDiv{
		width:550px;
		-webkit-box-shadow: 3px 3px 3px;
		-moz-box-shadow: 3px 3px 3px;
		box-shadow: 3px 3px 3px;
	}
	.cs_lDiv_Main{
		width:550px;
	}
	.cs_rDiv_Main{
		float:right;
		right:0;
		width:550px;
	}
	.cs_rDiv_lMain{
		float:left;
		left:0;
		width:550px;
	}
	.cs_rDiv_rMain{
		float:right;
		right:0;
		width:550px;
	}
	.cs_rDiv_Top{
		position:relative;
		right:0;
		top:0;
		width:550px;
		height:161px;
	}
	.cs_rDiv_Btm{
		position:relative;
		right:0;
		width:550px;
		height:455px;
	}
	.cs_rDiv_bMain{
		position:relative;
		width:550px;
		left:0px;
	}
	.cs_rDiv_Clr{
		clear:both;
	}
	.cs_lDiv_Clr{
		clear:both;
	}
	.cs_rDiv_bMainChA,.cs_rDiv_bMainChB{
		position:relative;
		width:100%;
		height:451px;
	}
	.cs_rDiv_bMain_Q{
		height:2704px;
	}
	.cs_lDiv_gg{
		width:100%;
		height:485px;
	}
	.cs_Book2 #book2{
		width:100%;
		height:480px;
	}
	.cs_Book2 #book1{
		display:none;
	}
} 
@media screen and (max-width: 550px) { 
	#mMainDiv{
		width:100%;
	}
	.cs_lDiv_Main{
		width:100%;
	}
	.cs_rDiv_Main{
		width:100%;
	}
	.cs_rDiv_lMain{
		width:100%;
	}
	.cs_rDiv_rMain{
		width:100%;
	}
	.cs_rDiv_Top{
		position:relative;
		right:0;
		top:0;
		width:100%;
		height:161px;
	}
	.cs_rDiv_Btm{
		position:relative;
		right:0;
		width:100%;
		height:248px;
	}
	.cs_rDiv_bMain{
		position:relative;
		width:100%;
		left:0px;
	}
	.cs_rDiv_Clr{
		clear:both;
	}
	.cs_lDiv_Clr{
		clear:both;
	}
	.cs_rDiv_bMainChA,.cs_rDiv_bMainChB{
		position:relative;
		width:100%;
		height:451px;
	}
	.cs_rDiv_bMain_Q{
		height:2704px;
	}
	.cs_lDiv_gg{
		width:100%;
		height:485px;
	}
	.cs_Book2 #book2{
		width:100%;
		height:480px;
	}
	.cs_Book2 #book1{
		display:none;
	}
	.cs_rDiv_ColuUnit{
		height:680px;
	}
	.cs_rDiv_ColuUnitA{
		position:relative;
		float:left;
		left:0;
		width:100%;
		height:340px;
		-moz-background-size:100% 100%;
		background-size:100% 100%;
	}
	.cs_rDiv_ColuUnitB{
		position:relative;
		float:right;
		left:0;
		width:100%;
		height:340px;
		-moz-background-size:100% 100%;
		background-size:100% 100%;
	}
}


.cRoundImg{border-radius:10px}


.view{border-radius:10px; width:100%; height:100%; overflow:hidden; position:relative; margin:2px; float:left;}
.mRhover{
	width:100%; background:rgba(0, 0 ,0 ,0.5); position:absolute; top:20px; left:0; text-align:center; color:#fff; 

	transform:rotate(55deg); 
	-moz-transform:rotate(55deg); 
	-webkit-transform:rotate(55deg); 
	
	transition:all 0.5s; 
	-moz-transition:all 0.5s; 
	-webkit-transition:all 0.5s; 

overflow:hidden; height:0; z-index:4000;/*transform:translateX(200px);*/}/*写好样式，进行隐藏，用overflow:hidden; height:0;*/
.mRhover h3{color:#fff; border-bottom:2px solid rgba(255, 255 ,255, 0.5); padding-bottom:10px;}
.view:hover .mRhover{
	height:120px;
	
	transform:rotate(0deg); 
	-moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
}
/*before   after为选择器，一般给选择器加动画背景，设置动画样式*/
.view:before{
	content:""; position:absolute; top:-240px; right:0;width:360px; height:360px; background:rgba( 150, 50, 100,0.5); 

	transform:rotate(55deg) translateX(60px);
	-moz-transform:rotate(55deg) translateX(60px);
	-webkit-transform:rotate(55deg) translateX(60px);
	 
	transform-origin:100% 0%; 
	-moz-transform-origin:100% 0%; 
	-webkit-transform-origin:100% 0%; 
	
	transition:all 0.5s ease 0.3s;
	-moz-transition:all 0.5s ease 0.3s;
	-webkit-transition:all 0.5s ease 0.3s;

}/*写好样式，进行隐藏，用top:-240px;*/
.view:hover:before{ top:0;}
.view:after{
	content:""; position:absolute;bottom:-240px; left:0;width:360px; height:360px; background:rgba( 150, 50, 100,0.5);
	
	transform:rotate(55deg) translateX(-60px);
	-moz-transform:rotate(55deg) translateX(-60px);
	-webkit-transform:rotate(55deg) translateX(-60px);

	transform-origin:0% 100%;
	-moz-transform-origin:0% 100%;
	-webkit-transform-origin:0% 100%;
	
	transition:all 0.5s ease 0.3s;
	-moz-transition:all 0.5s ease 0.3s;
	-webkit-transition:all 0.5s ease 0.3s;
}
.view:hover:after{ bottom:0px;}


.rbBox{
	padding: 0 0 1px 0;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1)), color-stop(.1,rgba(0, 0, 0, 0.1)));
	background: -webkit-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
	background: -o-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
	background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-radius: 60px 60px 60px 0 / 5px 5px 60px 0;
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
}
.rbBox:before{
	content:'';
	width: 25px;
	height: 20px;
	position: absolute;
	bottom:0;
	right:0;
	border-radius: 0 0 30px 0;
	-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
	-moz-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
	-o-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
	transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
}
.rbBox:after{
	content: '';
	z-index: -10;
	width: 100px;
	height: 100px;
	position:absolute;
	bottom:0;
	right:0;
	background-color: rgba(0, 0, 0, 0.2);
	display: inline-block;
	-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
	-moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
	-o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
	transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
}
.rbBox .cornerLf{
	width: 100px;
	height: 100px;
	top:0; left:0;
	position:absolute;
	z-index:-6;
	display: inline-block;
	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
	-moz-transform: rotate(2deg) translate(20px,25px) skew(20deg);
	-o-transform: rotate(2deg) translate(20px,25px) skew(20deg);
	transform: rotate(2deg) translate(20px,25px) skew(20deg); 
}
.rbBox .cornerRt{
	content: '';
	width: 50px;
	height: 50px;
	top:0; right:0;
	position:absolute;
	display: inline-block;
	z-index:-6;
	-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
	-moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
	-o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
	transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
}
.rbBox .ribbon:before{
	content: '';
	position:absolute;
	top:0; left: 0;
	width: 130px;
	height: 40px;
	background-color:rgba(0,0,0,0.2);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -webkit-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	background: -o-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(90deg) skew(0,0) translate(100px,65px);
	-moz-transform: rotate(90deg) skew(0,0) translate(100px,65px);
	-o-transform: rotate(90deg) skew(0,0) translate(100px,65px);
	transform: rotate(90deg) skew(0,0) translate(100px,65px);
}
.rbBox .ribbon:after{
	content: '';
	position:absolute;
	top:0; right: 0;
	width: 130px;
	height: 40px;
	background-color:rgba(0, 0, 0, 0.1);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -webkit-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	background: -o-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
	-moz-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
	-o-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
	transform: rotate(90deg) skew(0,0) translate(100px,-65px);
}

.tabClsDivBody {
	TEXT-ALIGN: left;FONT-SIZE: 12px; BORDER-RIGHT: #007575 2px solid; BORDER-LEFT: #007575 1px solid; WIDTH: 100%; LINE-HEIGHT: 20px; BORDER-BOTTOM: #007575 1px solid; HEIGHT: 100%;
}
.tabClsDivBody ul li{
	list-style-type:none;
	display:block;
	height:20px;
	border-bottom:1px solid #0f2;
}
.tabBgHead {
	FONT-SIZE: 12px; WIDTH: 100%; CURSOR: pointer; LINE-HEIGHT: 27px; HEIGHT: 27px;
}
.tabStyHead1 {
	FLOAT: left; WIDTH: 100px; CURSOR: pointer; COLOR: #ff0000; LINE-HEIGHT: 27px; HEIGHT: 27px; TEXT-ALIGN: center;
}
.tabStyHead2 {
	FLOAT: left; WIDTH: 100px; CURSOR: pointer; COLOR: #00ffff; LINE-HEIGHT: 27px; HEIGHT: 27px; TEXT-ALIGN: center;
}

.cs_rDiv_Otr{
	position:relative;
	right:0;
	top:0;
	width:100%;
	height:300px;
	-moz-background-size:100% 100%;
	background-size:100% 100%;
}
.cs_rDiv_Otr .div1{
	position:absolute;
	top:5%;
	left:5%;
	width:90%;
	height:80%;
	padding:10px 0 10px 0;
	background-color:rgba(153,204,255,0.8);
	MARGIN-RIGHT: auto;
	MARGIN-LEFT: auto;

	transform: rotate(5deg);
	-o-transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
}
.cs_rDiv_Otr .div1 div{
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
}
.cs_rDiv_Otr .div1 div p{
	padding:10px 10px 10px 10px;
}
.cs_rDiv_Otr .div1 .dTitle{
	position:absolute;
	top:-35px;
	right:0;
	width:180px;
	height:100px;
}

.cs_rDiv_Otr .div2{
	position:absolute;
	top:5%;
	left:5%;
	width:90%;
	height:80%;
	padding:10px 0 10px 0;
	background-color:rgba(153,204,255,0.8);
	MARGIN-RIGHT: auto;
	MARGIN-LEFT: auto;

	transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
}
.cs_rDiv_Otr .div2 div{
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
}
.cs_rDiv_Otr .div2 div p{
	padding:10px 10px 10px 10px;
}
.cs_rDiv_Otr .div2 .dTitle{
	position:absolute;
	top:-35px;
	right:0;
	width:180px;
	height:100px;
}
.cs_mDiv_BtmMain{
	position:relative;
	width:100%;
	left:0;
}


.cs_Book{
	position:relative;
	width:100%;
	height:400px;
	-moz-background-size:100% 100%;
	background-size:100% 100%;
}
.cs_LBook{
	position:absolute;
	width:36%;
	left:8%;
	height:65%;
	top:15%;
	padding:10px 20px 10px 0px;
	overflow:hidden;
}
.cs_RBook{
	position:absolute;
	width:36%;
	right:10%;
	height:65%;
	top:15%;
	padding:10px 20px 10px 0px;
	overflow:hidden;
}

.cs_Book2{
	position:relative;
	width:100%;
	height:480px;
}
.cs_Book2 #book1 span{
	position:absolute;
	width:80%;
	height:80%;
	top:10%;
	left:15%;
	z-index:2;
	overflow:hidden;
	background-color:rgba(200,151,240,0.4);
}
.cs_Book2 #book2 span{
	position:absolute;
	width:85%;
	height:80%;
	top:10%;
	left:5%;
	z-index:2;
	overflow:hidden;
	background-color:rgba(200,151,240,0.4);
}

.pMoveShakePic{
	position:relative;
	width:232px;
	height:340px;
}
.pMoveShakePic .cImg{
	position:absolute;
	top:140px;
	left:38px;
	width:164px;
	height:172px;
}
.pMoveShakePic #div{
	position:absolute;
	top:138px;
	left:34px;
	width:168px;
	height:176px;
	-webkit-box-shadow: 3px 3px 3px;
	-moz-box-shadow: 3px 3px 3px;
	box-shadow: 3px 3px 3px;
}


.cs_rDiv_bMain div .chr{
	position:absolute;
	width:80%;
	left:10%;
	top:8%;
	height:80%;
	background-color:rgba(255,151,240,0.8);
}
.cs_rDiv_lBan{
	position:relative;
	width:100%;
	height:368px;
	-moz-background-size:100% 100%;
	background-size:100% 100%;
}
.cs_rDiv_lBan div{
	position:absolute;
	width:84%;
	left:8%;
	top:13%;
	height:74%;
	background-color:rgba(255,151,240,0.8);
}

.mdRound{
	position:absolute;
	border-radius:80px;
	overflow:hidden;
	width:160px;
	height:160px;
	bottom:0;
}
.mdRound .bImg{
	position:absolute;
	left:0;
	top:0;
	width:160px;
	height:160px;
}
.mdRound .aImg{
	position:absolute;
	left:30px;
	top:30px;
	width:100px;
	height:100px;
}

.cs_lDiv_Max{
	position:relative;
	width:100%;
}
.cs_lDiv_Max_d{
	width:100%;
	height:105px;
	-moz-background-size:100% 100%;
	background-size:100% 100%;
}
.cs_lDiv_Max_ban1{
	width:100%;
	height:200px;
	-moz-background-size:100% 100%;
	background-size:100% 100%;
}
.cs_lDiv_Max_ban2{
	width:100%;
	height:365px;
	-moz-background-size:100% 100%;
	background-size:100% 100%;
}
.cs_lDiv_gg div{
	position:absolute;
	width:80%;
	height:60%;
	top:30%;
	left:10%;
}
.cs_lDiv_gg_cld{
	display: none;
	FONT-SIZE: 10px;
}
.cs_lDiv_gb{
	position:relative;
	width:100%;
	height:258px;
	-moz-background-size:100% 100%;
	background-size:100% 100%;
}
.cs_lDiv_gb div{
	position:absolute;
	width:80%;
	height:60%;
	top:16%;
	left:12%;
}
.cs_rDiv_lMainLBg{
	position:absolute;
	width:20px;
	height:100%;
	left:-10px;
	top:0;
	z-index:4;
}
.cs_rDiv_ForTiny{
}