@import url("flexslider.css");

@charset "utf-8";

/* Layout */
article h2{font-weight:700;color:#252525;margin:0.8em auto 0.8em;}
article section{overflow:hidden;clear:both;}
section h3{font-size:0.8;font-weight:500;color:#252525;margin:1.2em auto 0.8em;padding:10px 15px;background:#f7f7f7;border-radius: 2px;}
article h2 span, article h3 span {font-size:0.8em;font-weight:normal;margin-left:10px;}
/* toolbox */
.toolbox{float:left;width:395px;min-height:265px;margin-left:25px;margin-top:5px;overflow:hidden;}
.toolbox a{color:#252525;}
.toolbox dl{overflow:hidden;display:block;float:left;width:33.33%;height:50%;}
.toolbox dl dd,.toolbox dl dt{text-align:center;width:100%;}
.toolbox dl dt.tool_1{background:url(../images/toolbox_bg.png) no-repeat;background-position:0px 0px;width:95px;height:97px;display:block;margin:10px auto;}
.toolbox dl dt.tool_2{background:url(../images/toolbox_bg.png) no-repeat;background-position:-126px 0px;width:95px;height:97px;display:block;margin:10px auto;}
.toolbox dl dt.tool_3{background:url(../images/toolbox_bg.png) no-repeat;background-position:-249px 0px;width:95px;height:97px;display:block;margin:10px auto;}
.toolbox dl dt.tool_4{background:url(../images/toolbox_bg.png) no-repeat;background-position:0px -133px;width:95px;height:97px;display:block;margin:10px auto;}
.toolbox dl dt.tool_5{background:url(../images/toolbox_bg.png) no-repeat;background-position:-124px -133px;width:95px;height:97px;display:block;margin:10px auto;}
.toolbox dl dt.tool_6{background:url(../images/toolbox_bg.png) no-repeat;background-position:-249px -133px;width:95px;height:97px;display:block;margin:10px auto;}
.toolbox dl dd{font-size:1.1em;}
.toolbox dl dt.tool_1:hover{background:url(../images/toolbox_over_bg.png) no-repeat;background-position:0px 2px;}
.toolbox dl dt.tool_2:hover{background:url(../images/toolbox_over_bg.png) no-repeat;background-position:-126px 2px;}
.toolbox dl dt.tool_3:hover{background:url(../images/toolbox_over_bg.png) no-repeat;background-position:-249px 2px;}
.toolbox dl dt.tool_4:hover{background:url(../images/toolbox_over_bg.png) no-repeat;background-position:0px -131px;}
.toolbox dl dt.tool_5:hover{background:url(../images/toolbox_over_bg.png) no-repeat;background-position:-124px -131px;}
.toolbox dl dt.tool_6:hover{background:url(../images/toolbox_over_bg.png) no-repeat;background-position:-249px -131px;}

/* Channel button */
#tel_button{
	width:auto;text-align:center;
	margin: 23px auto -5px;
	clear:both;
	font-size:1.37em;font-weight:700;letter-spacing:2px;font-style:italic;border:0px solid #FCEFA7;
}
#tel_button a{color:#333;width:auto;padding:10px 30px 7px;display:block;}
#tel_button a:hover{box-shadow:inset -1px -1px 2px 2px #fce75d;}

#tel_button h2{font-size:2.375em;font-style:italic;display:inline;verticle-align:bottom;line-height:1;}
#tel_button span{font-size:0.725em;font-weight:normal;}
#tel_button .phone {
	background:#feef8a;
	position:relative;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
}
.phone:active {
	top:3px;
}
.phone:active::after {
	margin-top:-12px;
	-webkit-box-shadow: inset 0px 1px 0px #fff, 0px 2px 0px #0e3871, 0px 2px 2px #ffdb34;
	-moz-box-shadow: inset 0px 1px 0px #fff, 0px 3px 0px #0e3871, 0px 2px 2px #ffdb34;
	-o-box-shadow: inset 0px 1px 0px #fff, 0px 3px 0px #0e3871, 0px 2px 2px #ffdb34;
	box-shadow: inset 0px 1px 0px #fff, 0px 3px 0px #0e3871, 0px 2px 2px #ffdb34;
}
.phone:hover::after {
	-webkit-box-shadow: inset 0px 1px 0px #fff, 0px 2px 0px #fed545, 0px 2px 2px #ffdb34;
	-moz-box-shadow: inset 0px 1px 0px #fff, 0px 2px 0px #fed545, 0px 2px 2px #ffdb34;
	-o-box-shadow: inset 0px 1px 0px #fff, 0px 2px 0px #fed545, 0px 2px 2px #ffdb34;
	box-shadow: inset 0px 1px 0px #fff, 0px 2px 0px #fed545, 0px 2px 2px #ffdb34;
}
.phone::after{ 
	background-color:#fff7c2;
	background-image:url(../images/right_arrow.png);
	background-repeat:no-repeat;
	background-position:center center;
	content:"";
	width:35px;
	height:35px;
	/*position:absolute;*/
	top:50%;
	margin-top:-10px;margin-left:5px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	display:inline-block;
}

ul.channel_buttons{
	width: 100%;
	margin: 15px auto;
	clear:both;overflow:hidden;
}
ul.channel_buttons li{
	width:32%;float:left;margin-bottom:10px;margin-right:2%;text-align:center;	font-size:1.375em;font-weight:700;line-height:3;letter-spacing:2px;
}
ul.channel_buttons li a{display:block;background-color:#f3f1f2;padding-top:18px;padding-bottom:15px;color:#4b4a4a;position:relative;background-image: linear-gradient(bottom,#ececec 0%, #f3f1f2 100%);
	background-image: -o-linear-gradient(bottom,#ececec 0%, #f3f1f2 100%);
	background-image: -moz-linear-gradient(bottom,#ececec 0%, #f3f1f2 100%);
	background-image: -webkit-linear-gradient(bottom, #ececec 0%, #f3f1f2 100%);
	background-image: -ms-linear-gradient(bottom,#ececec 0%, #f3f1f2 100%);
	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, #ececec),
	color-stop(1, #f3f1f2)
	);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: inset 0px -1px 0px #f9f9f9,;
	-moz-box-shadow: inset 0px -1px 0px #f9f9f9,;
	-o-box-shadow: inset 0px 1px 0px #f9f9f9;
	box-shadow: inset 0px 1px 0px #f9f9f9;}
ul.channel_buttons li:last-child{margin-right:0;}
ul.channel_buttons a:hover{
	background:#efeeef;
	-webkit-box-shadow: inset -1px -1px 2px 2px #e5e4e4;
	-moz-box-shadow: inset -1px -1px 2px 2px #e5e4e4;
	-o-box-shadow: inset -1px -1px 2px 2px #e5e4e4;
	box-shadow: inset -1px -1px 2px 2px #e5e4e4;}
ul.channel_buttons a:active {
	top:3px;
	background-image: linear-gradient(bottom, #ededed 0%, #f7f4f6 100%);
	background-image: -o-linear-gradient(bottom, #ededed 0%, #f7f4f6 100%);
	background-image: -moz-linear-gradient(bottom,#ededed 0%, #f7f4f6 100%);
	background-image: -webkit-linear-gradient(bottom, #ededed 0%, #f7f4f6 100%);
	background-image: -ms-linear-gradient(bottom,#ededed 0%, #f7f4f6 100%);
	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0,#ededed),
	color-stop(1,#f7f4f6)
	);
	-webkit-box-shadow: inset 0px 2px 1px #ebebeb;
	-moz-box-shadow: inset 0px 2px 1px #ebebeb;
	-o-box-shadow: inset 0px 2px 1px #ebebeb;
	box-shadow: inset 0px 2px 1px #ebebeb;
}
ul.channel_buttons a:visited{color:#4b4a4a;}

.online{padding-left:39%;}
.online::before {
	background:url(../images/bt_bg1.png) no-repeat center center;
	content:"";
	width:113px;
	height:68px;
	position:absolute;
	top:15%;left:5%;
}
.shop{padding-left:43%;}
.shop::before {
	background:url(../images/bt_bg2.png) no-repeat center center;
	content:"";
	width:113px;
	height:68px;
	position:absolute;
	top:16%;left:8%;
}
.members{padding-left:44%;}
.members{margin-right:0;}
.members::before {
	background:url(../images/bt_bg3.png) no-repeat center center;
	content:"";
	width:113px;
	height:68px;
	position:absolute;
	top:15%;left:6%;
}


/* News Label */
.submenu{width:100%;margin:0 auto;}
ul.submenu {
	width: 100%;
	margin:0 auto;
	height: 47px;
	display:block;
	border-bottom: solid 1px #dfdfde;
	border-left: solid 1px #dfdfde;
}
ul.submenu li {
	float: left;
	width:50%;
	line-height: 45px;
	text-align:center;
	margin-bottom: -1px;
	border: solid 1px #dfdfde;
	border-left: none;	background:#f3f1f1;
}
ul.submenu li a {
	display: block;
	height: 45px;
	font-size:1.25em;
	padding-top: 3px;
	color: #000;
}
ul.submenu li a:hover {
	background:#dededb;
}
ul.submenu li.active  {
	background:#fff;
	border-bottom: solid 2px #fff;
}
.label_container{
	margin:0 auto 10px auto;
	width: 100%;
	border: 1px solid #dfdfde;
	border-top: none;
	background: #fff;}
.label_content{
	margin:0 auto;
	padding:15px 10px;
	font-size:1em;line-height:1.8;
	color:#6a6a6a;}
.label_content ul{line-height:1.5;margin-top:15px;padding-left:20px;padding-right:20px;}
.label_content ul li{margin:15px auto 18px;overflow:hidden;border-bottom:1px dotted #ddd;}

.label_content p img{margin:5px auto;}
.label_content ul li span{float: left;
    display: block;
    color: #666;
    padding-left:15px;padding-right:15px;}
.label_content ul li h3{line-height:1.5;margin-left:120px;display:block;font-size:1em;}

/* Hot */    
section dl {width:49%;margin-right:2%;float:left;overflow:hidden;display:block;border-bottom:1px dotted #b8b8b8;}
section dl:nth-child(odd){margin-right:0;}
section dl dt {width:100%;overflow:inhert;}
section dl dt img{float:left;margin:10px 15px 20px 10px;border:1px solid #f0f0f0;}
section dl dt h2{width:auto;font-size:1.2em;font-weight:bold;line-height:1.5em;display:block;margin-top:10px;padding-top:5px;}
section dl dd{
	width:310px;float:left;
	font-size: 1em;
	line-height: 1.5;
	padding-bottom:10px;
}
@media only screen and (min-width: 602px) and (max-width: 768px) {

#content .flexslider {
  margin: 15px auto 5px;
  width: 565px;
  float: none;
  padding: 0;
}
.toolbox {
  float:none;
  width: 80%;
  margin: 5px auto;
}
ul.channel_buttons li{
	font-size:1.2em;
	}	
.online {
  padding-left: 41%;
}
.online::before{
  background-size: 100px 60px;
  top: 10%;
  left: 2%;
  }
 .shop::before {
  background-size: 100px 60px;
  top: 10%;
  left: 6%;
	}
.members::before {
  background-size: 100px 60px;
  top: 10%;
  left: 5%;
}
}
@media screen and (max-width: 736px){
	
/* toolbox */
.toolbox{float:none;width:100%;min-height:265px;margin-top:15px;overflow:hidden;margin-left:0;}
.toolbox dl{overflow:hidden;display:block;float:left;width:33.33%;height:50%;}

/* Channel button */
ul.channel_buttons li{
	float:none;margin-right:0;width:100%;
}
ul.channel_buttons li a{width:100%;}
.online{padding-left:25%;}
.online::before {
	left:23%;
}
.shop{padding-left:25%;}
.shop::before {
	left:23%;
}
.members{padding-left:25%;}
.members::before {
	left:23%;
}


ul.submenu li {
	width:50%;
}

/* News Label */
.label_content ul{padding-left:0;padding-right:0;}
.label_content ul li span{
    padding-left:10px;padding-right:10px;}
.label_content ul li h3{margin-left:110px;}

/* Hot */  
section dl {width:100%;margin-right:auto;}
section dl dd{
	width:auto;margin-left:120px;float:none;padding-top:0;
	margin-top:auto;
}


}

@media screen and (max-width: 540px) {
	
/* Channel button */
#tel_button a{padding:20px 30px 17px;margin-left:-25px;}
#tel_button h2{fon-size:5em;verticle-align:middle;line-height:0.5;float:none;display:block;margin-top:20px;margin-left:-10%;}
#tel_button span{display:block;margin-top:-20px;vertical-align:top;}
.phone::after{ 
	width:50px;
	height:50px;
	top:40%;position:absolute;
	margin-left:66%;display:block;
}

/* Channel button */
.online{padding-left:38%;}
.online::before {
	left:10%;
}
.shop{padding-left:30%;}
.shop::before {
	left:13%;
}
.members{padding-left:38%;}
.members::before {
	left:13%;
}


ul.submenu li {
	width:50%;
}

}
