@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Merriweather');
body {margin: 0 !important; padding: 0;  background: #f7f7f7; font-family: 'Merriweather', serif}
.clearfix { width: 100%; display: inline-block; clear:both !important} 
.clear { width: 100%; display: inline-block; margin-top: 20px;  clear:both !important}
#container { width: 1240px; display: block; margin: 0 auto; padding: 0 }
#subcontainer { width: 98%; background: #FFF; padding: 1%; display: inline-block}
#header{ padding: 0; width: 100%; background: #FFF; display: inline-block}
.logo { margin: 20px; display:block;  font-size: 18px; color: #CCC; font-family: Verdana, Geneva, sans-serif; letter-spacing: 2px}
.time { color:#000; font-size:12px; margin: 10px 0; font-weight: bold; margin-left: 19%; letter-spacing: 0}
.col_30, .col_30_main { width: 31%; float: left; margin: 0 1%}
.col_30lft, .col_30lft_main { width: 31%; float: left; margin-right: 2%}
.col_30rgt, .col_30rgt_main, .sidebar { width: 31%; float: right; margin-left: 1%}
.col_30 a { color: #666; text-decoration: none;}
.col_30 a:hover {text-decoration: underline;}
.col_50lft_search { width: 98%; float: left; margin-right: 2%}
.col_50lft { width: 48%; float: left; margin-right: 2%}
.col_50rgt { width: 48%; float: right; margin-left: 2%}
.col_70lft, .content { width: 66%; float: left; margin-right: 2%}
.col_70rgt { width: 65%; float: right; margin-left: 2%}
.advt { width: 750px; height: 90px;}
.block { margin-top: 0; float: right; width: 90%; height: 30px; -webkit-box-shadow: 2px 1px 5px 1px rgba(0,0,0,0.03);-moz-box-shadow: 2px 1px 5px 1px rgba(0,0,0,0.03);box-shadow: 2px 1px 5px 1px rgba(0,0,0,0.03)}
.newblock { float: right; width: 60%;}
.newblock li, .newblock li a { float: left; margin-top: 3px; padding-right: 20px; color: #999; list-style: none; font-size: 14px; text-decoration: none;}
.flt {float: left; margin-right: 10px}
.grey {width: 90%; padding: 10px 5% 20px 5%; background: #f0f0f0; font-size: 18px; line-height: 34px; word-spacing: 5px}
.grey a { color: #333; text-decoration: none}
.grey .bt { color: #000; text-decoration: none; font-size: 22px}
.bg {width: 96%; background: #fff; padding: 2%; display: inline-block; -webkit-box-shadow: 2px 1px 5px 1px rgba(0,0,0,0.03);-moz-box-shadow: 2px 1px 5px 1px rgba(0,0,0,0.03);box-shadow: 2px 1px 5px 1px rgba(0,0,0,0.03)}
.bg p {font-size: 16px; color: #333}
.st, .st a { font-size: 14px; color: #999; margin-top: 5px;}
a {text-decoration: none;}
h1, h1 a {font-size: 28px; color: #000; font-weight: normal; margin-bottom: 0}
h2, h2 a {font-size: 24px; color: #000; font-weight: normal; margin-bottom: 0}
h3, h3 a {font-size: 18px; margin-bottom: 0; color: #000; margin-top: 30px}
h4, h4 a {font-size: 20px; font-weight: normal; margin-bottom: 20px; color: #003366 !important;}
h5, h5 a {font-size: 14px; font-weight: normal; margin: 10px 0; color: #003366; word-spacing: normal; text-decoration: none}
h6, h6 a {font-size: 16px; color: #000; margin-top: 5px; margin-bottom: 20px }
p {font-size: 16px; color: #333; line-height: 30px}
.simg {width: 24px !important; height: 18px !important;}
.vimg { width:345 height:146;}
#sticky-share {width: 50px; height:160px; text-align: center; z-index: 100; position: fixed; left: 0 !important; bottom: 50%;}
#sticky {width: 370px; height:500px; margin-top:10px}
#sticky.stick {position: fixed; top: 0; z-index: 10; border-radius: 0 0 0.5em 0.5em;}
.blu { font-size: 16px; color: #003366 }
.blu:after {content: '\276F\276F'; margin-left: 10px }
.sec, .sec a{ font-size: 20px; color: #003366; }
.article, .advt1 { width: 100%; height: 400px; margin-top: 25px}
.article img {width:374px; height:200px;}
.advt1 {text-align: center; margin-bottom: 20px;}
clean {display: none;}
#search { float: left; margin: 2px 5% 2px 0}
.span_30 { background: #fff; margin-bottom: 5px; font-size: 12px; color: #999}
.span_30 .over {background: rgba(0,0,0,0.5);  color: white;  cursor: pointer;  height: 20px;  left: 0;  bottom: 45px;  margin-left: 20px;  padding: 7px 12px;  position: relative;  width: 30%;  z-index: 100;  text-decoration: none;  font-size: 16px}
#search input[type="text"] { background: url(../../images/search.png) no-repeat 10px 6px #fff; border: 1px solid #f0f0f0; font: bold 14px; color: #000; width: 150px; padding: 6px 15px 6px 35px;text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s}
#search input[type="text"]:focus {width: 200px}
hr.style14 { clear:both; border: 0; height: 1px; background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0) }	

/*---------menu-----------------*/
nav {margin: 0;  position:relative;  float: right;  height: 35px;  width: 100%;  border-bottom: 1px solid #999;  border-top: 1px solid #000}
nav:after {content: ""; display: table; clear: both}
nav ul {float: left; padding: 0; margin: 0; list-style: none} 
nav ul li {margin: 0px; padding: 0 15px; display: block; float: left; line-height: 35px}
nav a {display: inline-block; padding: 0 15px}
nav ul li a {font-size: 16px; color: #333; text-transform: uppercase; text-decoration:none; font-weight:500 }
nav ul li a:hover {color: #333;}
nav ul li:hover > ul { display: inherit; }
nav li > a:after { content: ' +'; }
nav li > a:only-child:after { content: ''; }
.toggle, [id^=drop] {text-decoration: none;color: #005689;text-align: right;	padding: 5px 0;	display: none;float: right;}
input:focus {outline:none;}
input[type=checkbox]{display: none;} 
input[type=checkbox]:checked ~ #menu{display: block}
/*-----------city news-------------------*/
.city { font-size: 14px; background:#fff; color: #006699; text-decoration: none; line-height: 36px; border-left: 1px solid #f0f0f0; border-top: 1px solid #f0f0f0;}
.city li {background:#fff; border-bottom: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0; border-left: 1px solid #f0f0f0; list-style: none; width: 46%; float: left; padding-left: 3%;}
.city li a {color: #006699; text-decoration: none;}
.city li a:hover {color: #006699; text-decoration: underline;}
.city li img {margin-right: 10px; float: left;}
/*-------------footer-------------------*/
#footer {width: 100%; background: #333; height: 150px; margin-top: 30px; display: inline-block; list-style: none; text-align: center; clear: both;}
#footer li, #footer li a { color: #fff; text-decoration: none; float: left; margin: 10px 18px;}
#footer li { border-bottom: 1px solid #666;}
#footer p, #footer p a{font-size: 12px; float: right; margin: 0 15px; color: #999;}
/*-----Post comment----------*/

#form-main{	width: 100%; display: inline-block; height: 300px; clear:both; }
#form-div {padding: 0 5px; width: 50%;	float: left;	position: absolute;  -moz-border-radius: 7px;  -webkit-border-radius: 7px}
#form-div p{ margin:5px 0; padding: 0}
.feedback-input, .feedback-textarea {width: 35%; margin: 10px 0%; color:#3c3c3c;	font-family: Helvetica, Arial, sans-serif;  font-weight:500; font-size: 16px; line-height: 20px; background-color: #fbfbfb;	padding: 10px 10px 10px 24px;	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;  border: 1px solid #E5E5E5}
.feedback-input:focus, .feedback-textarea:focus{background: #fff;	box-shadow: 0;	border: 1px solid #3498db;	color: #3498db;	outline: none;  padding: 10px 10px 10px 24px}
.feedback-textarea {width: 45%;  height: 80px;}
.focused{color:#30aed6;	border:#30aed6 solid 1px}

/* post comment Icons ---------------------------------- */
#name{background-size: 20px;background-position: 11px 8px;	background-repeat: no-repeat;	width: 30%; float: left;	margin-right: 25px;	margin-bottom: 10px}
#name:focus{background-size: 20px;	background-position: 8px 5px;  background-position: 11px 8px;	background-repeat: no-repeat;width: 30%; float: left;margin-bottom: 10px}
#email{background-size: 20px;background-position: 11px 8px;	background-repeat: no-repeat;width: 30%; float: left;	margin-right: 25px;	margin-bottom: 10px}
#email:focus{background-size: 20px;  background-position: 11px 8px;	background-repeat: no-repeat;width: 30%; float: left;margin-right: 25px;margin-bottom: 10px}
#comment{background-size: 20px;	background-position: 11px 8px;	background-repeat: no-repeat;	margin-bottom: 5px}
textarea {width: 300px; height: 60px; line-height: 120%; resize:vertical}
input:hover, textarea:hover, input:focus, textarea:focus {background-color:white}
#button-blue{float:left; width: auto;border: #003366 solid 1px;	cursor:pointer;	background-color: #fff;	color: #003366;	font-size:20px;	margin-top: 10px;	padding: 5px 12px;	-webkit-transition: all 0.3s;	-moz-transition: all 0.3s;	transition: all 0.3s}
#button-blue:hover{	background-color: rgba(0,0,0,0);color: #0493bd}	
.submit:hover {	color: #3498db}

/*--------View Comment-----------------*/
.comments-container {width: auto;display: inline-block !important}
.comments-list li { margin-bottom: 15px; display: block; position: relative}
.comments-list li:after {content: ''; display: block; clear: both; height: 0; width: 0}
.comment-main-level:after {content: ''; width: 0; height: 0; display: block; clear: both}
.comment-box {width: 100%;right: 10px; position: relative; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15); -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15); box-shadow: 0 1px 1px rgba(0,0,0,0.15)}
.comment-box:before, .comment-box:after {content: ''; height: 0; width: 0; position: absolute;display: block; border-width: 10px 12px 10px 0; border-style: solid; border-color: transparent #FCFCFC; top: 8px;left: -11px}
.comments-list .comment-box:before {border-width: 11px 13px 11px 0; border-color: transparent rgba(0,0,0,0.05);left: -12px}
.comment-box .comment-head {background: #FCFCFC; padding: 10px 12px; border-bottom: 1px solid #E5E5E5; overflow: hidden; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0}
.comment-box .comment-head i {float: right; margin-left: 14px; position: relative; top: 2px; color: #A6A6A6; cursor: pointer; -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease}
.comment-box .comment-head i:hover {color: #03658c}
.comment-box .comment-name {color: #283035; font-size: 14px; font-weight: 700; float: left; margin-right: 10px}
.comment-box .comment-head span {float: left; color: #999; font-size: 13px;position: relative;top: 1px}
.comment-box h6 { margin: 0}
.comment-box .comment-content {background: #FFF; padding: 12px; font-size: 15px; color: #595959; -webkit-border-radius: 0 0 4px 4px;  -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px}
.comment-box .comment-name.by-author, .comment-box .comment-name.by-author a {color: #03658c}
.comment-box .comment-name.by-author:after { content: 'autor'; background: #03658c;  color: #FFF; font-size: 12px; padding: 3px 5px; font-weight: 700;  margin-left: 10px; -webkit-border-radius: 3px   -moz-border-radius: 3px;  border-radius: 3px}
.bg ol {list-style: none }   
.bg li {counter-increment: item; padding-left: 10px; border-bottom: 1px solid #f0f0f0; } 
.bg li a {color: #666; text-decoration:none; font-size: 16px;}   
.bg li:before {margin-left: -40px; margin-top: 10px; font-size: 24px; content: counter(item); width: 30px; color: #B1C6DA; display: inline-block; border-right: 1px solid #B1C6DA; margin-right: 10px; height: 40px}
.bg li p{ margin-top: -40px; line-height: 20px; font-size: 14px !important}

/*-------------------Responsive----------------*/

@media all and (max-width : 1250px) {
#container { width: 100%; display: block; margin: 0 auto; padding: 0 }
nav {display: block; width: 100%; background: none; margin-top: 10px; z-index: 1000; margin: 0;}
.toggle {display: block; padding: 0 0 0 15px; color: #333; line-height: 40px; text-decoration: none; float: left;}
.toggle:hover { color: #292221; cursor: pointer }
.toggle:after { content: '\25BC'; padding-left: 10px; }
[id^=drop]:checked + ul { display: block; }
nav ul { margin-top: 5px;}
nav ul li:hover {cursor: pointer; background: #f0f0f0;}
nav ul li {display: block; float:left; width: 90%; border-bottom: 1px solid #EEE; background: #fff }
.toggle + a,
 .menu { display: none;}
 .img {width: auto;}
 #sticky-share { background:#fff; width: auto; height:50px; z-index: 1000; position: fixed; left: 0; bottom: 0; right: 0; padding-top: 5px;}
 .gap {margin: 0 1%;}
}
@media screen and (max-width : 1024px){
.col_30 img, .col_30lft img, .col_30rgt img, .col_30, .col_30lft, .col_30rgt, .col_50lft, .col_50rgt {width: 99.5%; height: auto;}	
.newblock {width: 98%; height: 30px}
.feedback-textarea {width: 90%;}
.advt {width: 100%; height: auto;}
#form-div, .feedback-input, .feedback-textarea, #name, #name:focus, #email, #email:focus, textarea  {width: 90%;}
}
@media (min-width :741px) and (max-width : 1024px) {
.col_30_main, .col_30lft_main, .col_30rgt_main, .col_70lft, .col_70rgt, .content, .sidebar{ width: 48%; float: left; margin: 0 1%; display: block;}
.newblock li {padding-right: 10px;}
.advt1 {display: none; }
.advt2 {width: auto; margin-top: 40px; display: block; float: right !important; text-align: left !important;} 
.clean {width: 100%; clear: both;}
#sticky {width: 340px; height:400px; bottom: 100px;}
#footer {height: 250px; clear: both;}
}
@media (min-width : 421px) and (max-width : 740px) {
.content, .sidebar { width: 90%; float: none; margin-left: 1%; display: block;}
.col_30_main, .col_30lft_main, .col_30rgt_main, .col_70lft, .col_70rgt{ width: 48%; float: left; margin: 0 1%; display: block;}
.newblock li {padding-right: 10px;}
.advt1 {display: none; }
.advt2 {width: auto; margin-top: 40px; display: block; float: right !important; text-align: left !important;} 
.clean {width: 100%; clear: both;}
#sticky {width: 99%; bottom: 10px; position: relative!important; margin-top: 50px; height: 300px;}		
#footer li {display: none;}
}
@media screen and (max-width : 420px){
.col_30_main, .col_30lft_main, .col_30rgt_main, .col_30, .col_30lft, .col_30rgt, .col_50lft, .col_50rgt, .col_70lft, .col_70rgt, .block, .content, .sidebar{ width: 98%; float: none; margin-left: 1%; display: block; clear:both;}
.article img {width: 99%; height: auto;} 
#sticky {width: 99%; height:400px; bottom: 300px;}
#footer li {display: none;}
.newblock li, .newblock li a {padding-right: 10px !important;}

}