/* CSS Document */
@charset "utf-8";
/* CSS button */      
.button{
width: 140px;
line-height: 38px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow:1px 1px 1px #333;
border-radius: 5px;
margin:0 20px 20px 0;
position: relative;
overflow: hidden;
}
.button:nth-child(6n){
margin-right: 0;
}

.button.yellow{
border:1px solid #d2a000;
box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
background: -webkit-linear-gradient(top,#fece34,#d8a605);
background: -moz-linear-gradient(top,#fece34,#d8a605);
background: linear-gradient(top,#fece34,#d8a605);
}
.button.green{
border:1px solid #64c878;
box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
background: -webkit-linear-gradient(top,#90dfa2,#84d494);
background: -moz-linear-gradient(top,#90dfa2,#84d494);
background: linear-gradient(top,#90dfa2,#84d494);
}

.round,
	.side,
	.tags{
padding-right: 30px;
}
.round:after{
position: absolute;
display: inline-block;
content: "\003c";
top:50%;
right:10px;
margin-top: -10px;
width: 17px;
height: 20px;
padding-left: 3px;
line-height:18px;
font-size: 10px;
font-weight: normal;
border-radius: 10px;
text-shadow:-2px 0 1px #333;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg); 
transform:rotate(-90deg);
}

.yellow.round:after{
box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(148,131,4,.9);
background:-webkit-linear-gradient(top,#cf9d00,#d2a000);
background:-moz-linear-gradient(top,#cf9d00,#d2a000);
background:linear-gradient(top,#cf9d00,#d2a000);                         
}
.green.round:after{
box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(51,126,66,.9);
background:-webkit-linear-gradient(top,#64c878,#6dcb80);
background:-moz-linear-gradient(top,#64c878,#6dcb80);
background:linear-gradient(top,#64c878,#6dcb80);                         
}

.side:after{
position: absolute;
display: inline-block;
content: "\00bb";
top:3px;
right:-4px;
width: 38px;
height:30px;
font-weight: normal;
line-height: 26px;
border-radius:0 0 5px 5px;
text-shadow:-2px 0 1px #333;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
transform:rotate(-90deg);
}

.yellow.side:after{
border-top: 1px solid #ba8f06;
box-shadow:-2px 0 1px #deb842 inset;
background:-webkit-linear-gradient(right,#d5a406,#fdc40b 60%);
background:-moz-linear-gradient(right,#d5a406,#fdc40b 60%);
background:linear-gradient(right,#d5a406,#fdc40b 60%); 
}
.green.side:after{
border-top: 1px solid #53b567;
box-shadow:-2px 0 1px #8ad599 inset;
background:-webkit-linear-gradient(right,#69ca7c,#91e5a5 60%);
background:-moz-linear-gradient(right,#69ca7c,#91e5a5 60%);
background:linear-gradient(right,#69ca7c,#91e5a5 60%); 
}

.tags:after{
font-weight: normal;
position: absolute;
display: inline-block;
content: "FREE";
top:-3px;
right: -33px;
color: #fff;
text-shadow:none;
width: 85px;
height:25px;
line-height: 28px;
-webkit-transform:rotate(45deg) scale(.7,.7);
-moz-transform:rotate(45deg) scale(.7,.7);
transform:rotate(45deg) scale(.7,.7);
}

.yellow.tags:after{
background: #d2a000;
border:2px solid #fcc100;	
}
.green.tags:after{
background: #64c878;
border:2px solid #9bebac;	
}

.button.rarrow,
	.button.larrow{
overflow:visible;
}
.rarrow:after,	
	.rarrow:before,
	.larrow:after,	
	.larrow:before{
position:absolute;
content: "";
display: block;
width: 28px;
height: 28px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
}
.rarrow:before{
width: 27px;
height: 27px;
top: 6px;
right: -13px;
clip: rect(auto auto 26px 2px);
}
.rarrow:after{
top: 6px;
right: -12px;
clip: rect(auto auto 26px 2px);
}

.yellow.rarrow:before{
background: #D2A000;
}
.yellow.rarrow:after{
box-shadow: 0 1px 0 #FEDD71 inset,-1px 0 0 #A38B39 inset,-2px 0 0 #FEDD71 inset;
background:-webkit-linear-gradient(top left,#FECE34,#D8A605);
background:-moz-linear-gradient(top left,#FECE34,#D8A605);
background:linear-gradient(top left,#FECE34,#D8A605);
}
.green.rarrow:before{
background: #64C878;
}
.green.rarrow:after{
box-shadow: 0 1px 0 #B9ECC4 inset,-1px 0 0 #6C9F76 inset,-2px 0 0 #B9ECC4 inset;
background:-webkit-linear-gradient(top left,#90DFA2,#84D494);
background:-moz-linear-gradient(top left,#90DFA2,#84D494);
background:linear-gradient(top left,#90DFA2,#84D494);
}

.larrow:before{
top: 6px;
left: -13px;
width: 27px;
height: 27px;
clip: rect(2px 26px auto auto);
}
.larrow:after{
top: 6px;
left: -12px;
clip: rect(2px 26px auto auto);
}

.green.larrow:before{
background: #64C878;
}
.green.larrow:after{
box-shadow: 0 -1px 0 #6C9F76 inset,0 -2px 0 #B9ECC4 inset,1px 0 0 #B9ECC4 inset;
background:-webkit-linear-gradient(top left,#90DFA2,#84D494);
background:-moz-linear-gradient(top left,#90DFA2,#84D494);
background:linear-gradient(top left,#90DFA2,#84D494);
}


.yellow:hover{
background: -webkit-linear-gradient(top,#ffd859,#e3bb38);
background: -moz-linear-gradient(top,#ffd859,#e3bb38);
background: linear-gradient(top,#ffd859,#e3bb38);
}
.green:hover{
background: -webkit-linear-gradient(top,#aaebb9,#82d392);
background: -moz-linear-gradient(top,#aaebb9,#82d392);
background: linear-gradient(top,#aaebb9,#82d392);
}


.yellow:active{
top:1px;
box-shadow: 0 1px 3px #816b1f inset,0 3px 0 #fff;
background: -webkit-linear-gradient(top,#d3a203,#dba907);
background: -moz-linear-gradient(top,#d3a203,#dba907);
background: linear-gradient(top,#d3a203,#dba907);
}
.green:active{
top:1px;
box-shadow: 0 1px 3px #4d7254 inset,0 3px 0 #fff;
background: -webkit-linear-gradient(top,#5eac6e,#72b37e);
background: -moz-linear-gradient(top,#5eac6e,#72b37e);
background: linear-gradient(top,#5eac6e,#72b37e);
}

.yellow.side:hover:after{
background:-webkit-linear-gradient(right,#e1b21a,#fbc71d 60%);
background:-moz-linear-gradient(right,#e1b21a,#fbc71d 60%);
background:linear-gradient(right,#e1b21a,#fbc71d 60%); 
}
.green.side:hover:after{
background:-webkit-linear-gradient(right,#85da95,#94e0a5 60%);
background:-moz-linear-gradient(right,#85da95,#94e0a5 60%);
background:linear-gradient(right,#85da95,#94e0a5 60%); 
}


.yellow.side:active:after{
box-shadow:-1px 0 1px #816b1f inset;
background:-webkit-linear-gradient(right,#d3a203,#dba907 60%);
background:-moz-linear-gradient(right,#d3a203,#dba907 60%);
background:linear-gradient(right,#d3a203,#dba907 60%); 
}
.green.side:active:after{
box-shadow:-1px 0 1px #33663d inset;
background:-webkit-linear-gradient(right,#63a870,#72b37e 60%);
background:-moz-linear-gradient(right,#63a870,#72b37e 60%);
background:linear-gradient(right,#63a870,#72b37e 60%); 
}

.yellow.rarrow:hover:after,
	.yellow.larrow:hover:after{
background:-webkit-linear-gradient(top left,#ffd859,#e3bb38);
background:-moz-linear-gradient(top left,#ffd859,#e3bb38);
background:linear-gradient(top left,#ffd859,#e3bb38);
}
.green.rarrow:hover:after,
	.green.larrow:hover:after{
background:-webkit-linear-gradient(top left,#aaebb9,#82d392);
background:-moz-linear-gradient(top left,#aaebb9,#82d392);
background:linear-gradient(top left,#aaebb9,#82d392);
}


.yellow.rarrow:active:after,
	.yellow.larrow:active:after{
background:-webkit-linear-gradient(top left,#d3a203,#dba907);
background:-moz-linear-gradient(top left,#d3a203,#dba907);
background:linear-gradient(top left,#d3a203,#dba907);
}
.green.rarrow:active:after,
	.green.larrow:active:after{
background:-webkit-linear-gradient(top left,#63a870,#72b37e);
background:-moz-linear-gradient(top left,#63a870,#72b37e);
background:linear-gradient(top left,#63a870,#72b37e);
}


.yellow.rarrow:active:after{
box-shadow: 0 1px 0 #816b1f inset,-1px 0 0 #816b1f inset;
}
.yellow.larrow:active:after{
box-shadow: 0 -1px 0 #816b1f inset,1px 0 0 #816b1f inset;
}
.green.rarrow:active:after{
box-shadow: 0 1px 0 #4d7254 inset,-1px 0 0 #4d7254 inset;
}
.green.larrow:active:after{
box-shadow: 0 -1px 0 #4d7254 inset,1px 0 0 #4d7254 inset;
}      



img {
	max-width: 100%;
}
.text {
	border: 1px #999 solid;
	border-radius: 5px;
	background-color: #FFF;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 8px;
	margin-bottom: 2%;
}
p {
	font-size: 14px;
	line-height: 150%;
	margin: 5px;
	display: block;
	font-family: "΢ÈíÑźÚ";
	color: #363636;
}
table {
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	background: #FFF;
}
.music_div {
	line-height: 30px;
	position: relative;
	margin: 0px;
	word-wrap: break-word;
	word-break: normal;
	text-align: center;
}
.td {
	margin: 0px;
	font-size: 90%;
	border: solid #999 1px;
	text-align: center;
	word-break:break-all;
}
.top {
	float: left;
	height: 55px;
	width: 100%;
	background-color: #02af6f; 
	overflow: hidden;
}
.log_img {
	width: 80px;
	height: 55px;
	border-radius: 7px;
	overflow: hidden;
	float: left;
	text-align: center;
	margin-left: 15px;
}
.log_btb {
	text-align: center;
	height: 55px;
	font-size: 22px;
	line-height: 55px;
	color: #FFF;
	font-family: "΢ÈíÑźÚ";
}
.proinfo{ 
	display:none; 
	}

/*********/
body { color:#444; margin:0; font-size:12px; height:100%; background:#f7f7f7;}	
A:link{text-decoration:none; color:#444;}
A:visited{text-decoration:none; color:#444;}
A:hover{text-decoration: none; color:#ff0000;}
ol,ul,li{list-style:none; }
form{ padding:0; margin:0;}
input, select, textarea{outline: none;}
html {_overflow-y:scroll;}
*{	padding:0px;margin:0px;} 
h1,h2,h3,h4,h5,h6{font-size:12px;}
img{border: 0;}
.clear{clear:both;line-height:0px;}
.nbord{ border:none;}
#loading{ text-align:center; padding:20px 0;}
.navlist{ position:fixed; width:100%; top:0;z-index:999;}
.navlist li{ float:left; width:25%;height:40px; line-height:40px;}
.navlist li a{ display:block; text-align:center; font-size:14px; color:#FFF; background:#218217; border-right:solid 1px #6eaa68;}
.navlist li .active{ background:#060;}
.content{ padding:60px 10px 20px 10px;}
.content .infolist{ display:none; padding-bottom:60px;}

.prolisthome{ padding:0px 0;}
.prolisthome .claname{border-top:solid 1px #02af6f; margin-bottom:15px;}
.prolisthome .claname{border-top:solid 1px #ffffff; margin-bottom:15px;}
.prolisthome .claname a{ color:#FFF; font-size:16px; display:block}
.prolisthome .claname .cls{ width:91%; text-align:left;padding:4px 16px; background:#02af6f;-moz-border-radius:0px 0px 22px 22px;-webkit-border-radius:0px 0px 22px 22px;border-radius: 0px 0px 12px 12px;}
.prolisthome .claname .cls2{ width:91%; text-align:left;padding:4px 16px; background:#FFF5EE;-moz-border-radius:0px 0px 22px 22px;-webkit-border-radius:0px 0px 22px 22px;border-radius: 0px 0px 12px 12px;}
.proinfo{ display:none;padding:0px 0px 20px 0px;}
.prohome{ padding-bottom:10px;}
.prohome img{ max-width:100%; margin:10px 0;}