@font-face {font-family:Roboto; src: url("RobotoRegular.ttf");}
::-webkit-scrollbar {width: 3px;} 
::-webkit-scrollbar-track {border-left: 0;}
::-webkit-scrollbar-thumb {background: #b0bec5; border-radius: 50px;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, address, em, img, small, strong, sub, sup, b, u, i, center, ol, ul, li, form, label, table, caption, th, article, embed, footer, header, menu, nav, output, section, audio, video, input {margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;} 
footer, header, menu, nav, section {display:block;} 
ol, ul, li {list-style:none;}
body, select, input, textarea, button {background:#fff; font-family:sans-serif; font-size:1rem; line-height:1.5; color:#444; outline:none;}
body {background:#f1f5f9; font-family:'Roboto',sans-serif; font-size:1rem; line-height:1.5; color:#444;}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
img {border:0;}

header {position: fixed;top: 0;left: 0;width: 100%;height: 50px;line-height: 50px;background: #329bf6;color: #fff;z-index: 100;}
.head {width: 940px;margin: 0 auto;}
.logo {width: 240px;float: left;}
.logo a {color: #fff;font-size: 15px;text-transform: uppercase;letter-spacing: 1px;margin-left: 6px;}
.logo img {float: left;width: 50px;height: 50px;}
.logo a:hover {color:#fff;}
.logo i {background: #ffffff;padding: 0px 5px;border-radius: 4px;color: #7394b5;margin-right: 3px;font-weight: bold;}
.search {width: 290px;float: left;}
.search input {background: #ffffff;width: 270px;height: 10px;padding: 8px;font-size: 12px;margin: 10px 0;border-radius: 4px;border: solid 1px #e5e5e5;}
.topic {width: 410px;float: left;text-align: right;font-size: 15px;}
.topic a {color: #fff;text-decoration: none}
.topic a:hover {text-decoration: underline;}
.topic .active {font-weight: bold;font-size: 20px;text-decoration: underline;}

.pad {position: fixed;top: 50px;left: 0;right: 0;bottom: 0;opacity: 0.05;z-index: -10;}

.cover {width:700px;height:200px;background:#1c6a87;margin:0 auto 20px;border-radius:8px;box-shadow: 0 5px 12px rgba(126, 142, 177, .2);position: relative;}
.cover .bg {background: url(cover.jpg);position: absolute;top: 0;left: 0;right: 0;bottom: 0;border-radius: 8px;}
.cover .slogan {background: rgb(0 0 0 / 70%);position: absolute;left: 0;right: 0;bottom: 0;line-height: 40px;text-align: left;font-size: 15px;color: #fff;border-radius: 0 0 8px 8px; padding: 0 10px;}

.base {width: 940px;margin:60px auto 0;overflow: hidden;}
.base .left {width: 220px;float: left;}
.base .right {width: 700px;float: left;margin-left: 20px;}
.base .right .content {width: 460px;float: left;}
.base .right .sidebar {width: 220px;float: left; margin-left: 20px;}

.nav {width:220px;background: #f1f5f9;}
.navi {display: block;margin: 0px;position: relative;border-bottom: solid 1px rgb(229 229 229 / 33%);}
.navi input {display: none;position: absolute;visibility: hidden;left: 50%;top: 50%;z-index: 1;}
.navi .up {cursor:pointer;position:relative;z-index:2;line-height:46px;padding:0;color:#5a5a5a;text-decoration:none;font-size:14px;letter-spacing: 0.5px;border-left: solid 5px #f1f5f9;}
.navi .up i {width: 20px; margin:0 6px; text-align: center;}
.navi .up:hover {background: #fff;border-left: solid 5px #b0bec5;}
.navi .up:hover:before, .up:hover:after {background: #b0bec5;}
.navi .up:before, .up:after {background-color: #b0bec5;content: '';display: block;position: absolute;z-index: 3;}
.navi .up:before {height: 2px;margin-top: -1px;top: 50%;right: 10px;width: 8px;}
.navi .up:after {height: 8px;margin-top: -4px;top: 50%;right: 13px;width: 2px;}
.navi input:checked ~ .up {background: #1c6a87;color: white;border-radius: 4px 4px 0 0;border-left: solid 5px #1c6a87;}
.navi input:checked ~ .up:hover {background-color: #1c6a87;color: white;border-radius: 4px 4px 0 0;}
.navi input:checked ~ .up:before {background-color: white;}
.navi input:checked ~ .up:after {display: none;}
.navi .down {display: none;}
.navi .down a {display: block;line-height: 40px;padding: 0 10px;color: #5a5a5a;text-decoration: none;font-size: 13px;border-left: solid 5px #ffffff;}
.navi .down a:hover {border-left: solid 5px #1c6a87;}
.navi input:checked ~ .down {display: block;background: #fff;border-bottom: solid 1px #e5e5e5;border-radius: 0 0 4px 4px;}

.content-info {background: #ffffff;border: solid 1px #e5e5e5;margin-bottom: 20px;border-radius: 8px;box-shadow: 0 5px 12px rgba(126, 142, 177, .2);display: block;}
.content-info .uf {width: 60px;float: left;}
.content-info .uf img{width: 40px;height: 40px;border-radius: 8px;margin: 15px 0 0 15px;}
.content-info .text {padding: 10px 20px 10px 10px;line-height: 26px;font-size: 13px;color: #345;font-family: sans-serif;overflow: hidden;}
.content-info .text a {color: #2196F3;text-decoration: underline;font-weight: bold;}

.post {background: #ffffff; box-shadow: 0 5px 12px rgba(126, 142, 177, .2); border: solid 1px #e5e5e5;margin-bottom: 20px;display: block;padding: 18px;line-height: 20px;font-size: 12px;color: #345;font-family: sans-serif;border-radius: 8px;}
.post img {max-width: 420px;border-radius: 8px;margin: 0 auto 10px;display: block;}
.post h1 {font-size: 18px;font-weight: bold;color: #455A64;margin-bottom: 20px;line-height: 24px;display: block;}
.post p {font-size: 14px;line-height: 22px;color: #263238;padding: 5px;display: block;}
.post a {}
.post a:hover {}
.post .niz {background: #f1f1f1;font-size: 11px;line-height: 36px;text-align: center;color: #aaa;border-radius: 8px;display: block;}

.sidb {background: #ffffff;border: solid 1px #e5e5e5;margin-bottom: 20px;border-radius: 8px;box-shadow: 0 5px 12px rgba(126, 142, 177, .2);display: block; padding:10px;font-size: 14px;}
.sidb b {font-weight: bold;color: #78909C;margin-bottom: 5px;font-size: 12px;letter-spacing: 1px;display: block;}
.sidb a {font-size: 12px;color: #455A64;text-decoration: underline;line-height: 26px;display: block;}

footer {width: 100%;height: 50px;}
.footer {width: 940px;height: 50px;margin: 0 auto;}
.footer .copy{line-height: 50px;text-align: center;font-size: 14px;color: #777;float: left;margin-left: 12px;}
.footer .link{line-height: 50px;font-size: 11px;color: #777;float: right;margin-right: 12px;}
.footer .link a{color: #777;margin: 0 6px;}
.footer .link a:hover{text-decoration: underline;color: #333;}