@charset "utf-8";
@import url("reset.css");

/* global */
body {background: #fff url(bg.png) repeat-x top;}
body, td, th, input, select, textarea {color: #555; font: 12px/1.5 "微软雅黑";}
a {color: #555; text-decoration: none;}
a:hover {color: #f30; text-decoration: underline;}
.blank10 {clear: both; display: block; height: 10px; width: 100%;}
.clearfix:after {content: ""; display: table; clear: both;}
/* topbg */
#topbg {height: 32px; line-height: 32px;}
#topbar {margin: 0 auto; max-width: 1200px; width: 95%;}
#topbar-left {float: left;}
#topbar-right {color: #ccc; float: right;}
#topbar-right img {vertical-align: middle;}
/* wrapper */
#wrapper {margin: 0 auto; max-width: 1200px; width: 95%;}
/* topbox */
#topbox {height: auto; position: relative; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 10px 0;}
/* logo */
.logo {background: url(logo.png) no-repeat center; display: block; height: 80px; width: 200px; background-size: contain; margin-right: 20px; flex-shrink: 0;}
/* sobox */
#sobox {flex: 1; min-width: 300px; max-width: 500px; padding-top: 0;}
.sofrm {display: flex; margin: 0px auto; position: relative; width: 100%;}
.sipt {background: url(ipt.png) no-repeat top left; border: solid 1px #dadada; display: block; font: normal 13px/30px normal; height: 30px; padding: 0 5px 0 90px; flex: 1; box-sizing: border-box;}
.sbtn {background: #65bc0b; border: 0; color: #fff; cursor: pointer; font-size: 14px; height: 32px; width: 70px; margin-left: 5px; flex-shrink: 0;}
/* selopt */
#selopt {background: url(select.gif) no-repeat; position: absolute; left: 2px; top: 2px; width: 88px; z-index: 2;}
#cursel {cursor: pointer; display: block; height: 28px; line-height: 28px; overflow: hidden; text-indent: 12px; width: 85px;}
#options {border: solid 1px #dadada; border-top: 0; display: none; list-style: none; position: absolute; left: -2px; width: 80px; z-index: 1000;}
#options li {background: #fff; clear: both; cursor: pointer;}
#options li a {color: #555; display: block; height: 25px; line-height: 25px; text-decoration: none; text-align: center;}
#options li a:hover {background: #1791de; color: #fff; display: block; text-decoration: none;}
.current {background: #1791de; color: #fff; display: block; text-decoration: none;}
/* navbox - 修复导航栏间距问题 */
#navbox {background: url(blue.png) repeat-x; display: block; height: auto; overflow-x: auto; white-space: nowrap;}
.navbar {display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; width: 100%;}
.navbar li {flex: 1; text-align: center; min-width: 0; /* 防止flex项溢出 */}
.navbar li a {display: block; color: #fff; font: 14px/35px "微软雅黑"; height: 35px; padding: 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.navbar li a:hover {background: #0080c6; color: #fff;}
.navbar .navline {display: none; /* 移除分隔线，使用边框代替 */}
.navbar .cur {background: #0067ae;}
/* txtbox */
#txtbox {background: url(blue.png) repeat-x 0 -55px; border-left: solid 1px #dae7ed; border-right: solid 1px #dae7ed; height: auto; padding: 10px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.count {padding: 0;}
.count b {color: #f60; font: bold 16px Arial; padding-right: 3px;}
.link {color: #999; padding: 0;}
.link a {color: #06c;}
/* quickbox */
#quickbox {background: #f9fef4; border: dashed 1px #cbe6bd; overflow: hidden; padding: 6px; white-space: nowrap; overflow-x: auto;}
#quickbox strong {}
#quickbox a {margin-right: 15px; white-space: nowrap;}
/* homebox */
#homebox {display: flex; flex-wrap: wrap; gap: 20px;}
#homebox-left {flex: 1; min-width: 250px; max-width: 300px;}
#homebox-right {flex: 2; min-width: 600px;}
/* hcatebox */
#hcatebox {background: #f8fdff; border: solid 1px #dae7ed; padding: 8px;}
#hcatebox dt {clear: both; display: block; font: bold 14px/25px "微软雅黑"; height: 25px;}
#hcatebox dt a {color: #07c;}
#hcatebox dd {}
.hcatelist {}
.hcatelist li {float: left; height: 30px; line-height: 30px; text-align: center; width: 56px;}
.hcatelist li a {font-size: 13px;}
/* newbox */
#newbox {border: solid 1px #dae7ed;}
#newbox h3 {background: #f8fdff; border-bottom: dashed 1px #dae7ed; color: #07c; font-size: 14px; padding: 6px;}
.newlist {padding: 3px 8px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.newlist li {padding: 5px 0; display: flex; justify-content: space-between; width: calc(50% - 10px); box-sizing: border-box;}
.newlist li a {overflow: hidden; text-overflow: ellipsis; flex: 1;}
.newlist li span {color: #ccc;}
/* bestbox */
#bestbox {border: solid 1px #dae7ed;}
#bestbox h3 {background: #f8fdff; border-bottom: solid 1px #dae7ed; font: bold 14px normal; height: 30px;}
#bestbox h3 span {background: #fff; border: solid 1px #cedee6; border-bottom: 0; color: #07c; display: block; float: left; height: 25px; line-height: 25px; margin-left: 5px; margin-top: 5px; text-align: center; width: 80px;}
.bestlist {padding: 8px; display: flex; flex-wrap: wrap; gap: 10px;}
.bestlist li {display: block; height: 30px; line-height: 30px; overflow: hidden; text-align: center; white-space: nowrap; flex: 1; min-width: 120px; max-width: 150px;}
.bestlist li a {font-size: 13px;}
/* coolbox */
#coolbox {border: solid 1px #dae7ed;}
#coolbox h3 {background: #f8fdff; border-bottom: dashed 1px #dae7ed; color: #07c; font-size: 14px; padding: 6px;}
.csitelist {padding: 5px 8px;}
.csitelist li {display: block; font-size: 14px; height: auto; overflow: hidden; vertical-align: top; width: 100%; margin-bottom: 10px;}
.csitelist li h4 {display: inline-block; font-weight: normal; height: 30px; line-height: 30px; width: auto; margin-right: 10px; vertical-align: top;}
.csitelist li h4 a {color: #07c;}
.csitelist li span {display: inline-block; height: 30px; line-height: 30px; margin-right: 15px; overflow: hidden; white-space: nowrap; vertical-align: top;}
.csitelist li span a {font-size: 13px;}
.csitelist .more {color: #07c; display: inline-block; font-size: 12px; line-height: 30px; margin-left: 10px; vertical-align: top;}
.sline {background: url(dot.gif) repeat-x center; display: block; height: 10px; width: 100%;}
/* rowbox */
#rowbox {border: solid 1px #dae7ed; padding: 10px; display: flex; flex-wrap: wrap; gap: 20px;}
/* newsbox */
#newsbox {flex: 1; min-width: 300px;}
#newsbox h3 {color: #07c; font-size: 14px; padding-bottom: 6px;}
.newslist {}
.newslist li {padding: 6px 0; display: flex; justify-content: space-between;}
.newslist li span {color: #ccc; font-size: 10px;}
/* exlink */
#exlink {flex: 1; min-width: 300px;}
#exlink h3 {color: #07c; font-size: 14px; padding-bottom: 6px;}
.exlist {}
.exlist li {padding: 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.exlist li span {color: #ccc;}
.line {border-left: dashed 1px #dadada; height: auto; width: 1px;}
/* inbox */
#inbox {background: #f8fdff; border: solid 1px #dae7ed; padding: 5px 8px; display: flex; flex-wrap: wrap;}
#inbox h3 {height: 23px; line-height: 23px; width: 60px; margin-right: 10px;}
.inlist {display: flex; flex-wrap: wrap; flex: 1;}
.inlist li {height: 23px; line-height: 23px; margin-right: 20px; white-space: nowrap;}
/* linkbox */
#linkbox {background: #f8fdff; border: solid 1px #dae7ed; padding: 5px 8px; display: flex; flex-wrap: wrap;}
#linkbox h3 {height: 23px; line-height: 23px; width: 60px; margin-right: 10px;}
.linklist {display: flex; flex-wrap: wrap; flex: 1;}
.linklist li {height: 23px; line-height: 23px; margin-right: 20px; vertical-align: top; white-space: nowrap;}
/* footer */
#footer {background: url(fbg.png) repeat-x; padding: 10px; text-align: center;}
#fmenu {color: #ccc; padding-bottom: 5px;}
#fmenu a {text-decoration: none;}
#fmenu a:hover {color: #f60; text-decoration: underline;}
#fcopy {line-height: 23px;}

/* 响应式布局 - 桌面优先 */
@media screen and (max-width: 1200px) {
    #wrapper, #topbar {width: 95%;}
    #homebox-left, #homebox-right {max-width: 100%;}
}

@media screen and (max-width: 980px) {
    #topbox {flex-direction: row; align-items: center;}
    .logo {margin: 0 15px 0 0; width: 150px; height: 60px;}
    #sobox {width: auto; max-width: 100%; padding-top: 0;}
    .sofrm {flex-wrap: nowrap;}
    .sipt {width: 70%; padding: 0 10px; box-sizing: border-box;}
    .sbtn {width: 25%; margin-left: 5px;}
    #selopt {position: relative; left: 0; top: 0; margin-bottom: 0; width: 25%; margin-right: 5px;}
    #cursel {width: 100%;}
    #navbox {height: auto; overflow-x: auto;}
    .navbar {width: 100%; display: flex; flex-wrap: nowrap;}
    .navbar li {min-width: 90px; flex: 0 0 auto;}
    .navbar .navline {display: none;}
    #txtbox {height: auto; text-align: center; padding: 10px 0; flex-direction: row;}
    .count, .link {padding: 5px; text-align: center;}
    #homebox {flex-direction: column;}
    #homebox-left, #homebox-right {min-width: 100%; max-width: 100%;}
    .bestlist li {min-width: 110px;}
    .csitelist li span {display: inline-block; margin-right: 10px;}
}

@media screen and (max-width: 768px) {
    #topbox {flex-wrap: nowrap; padding: 5px 0;}
    .logo {width: 120px; height: 50px; margin-right: 10px;}
    #sobox {min-width: auto;}
    .sofrm {flex-wrap: nowrap;}
    #selopt {width: 30%;}
    .sipt {width: 60%;}
    .sbtn {width: 20%;}
    
    #rowbox {padding: 10px 5px; flex-direction: column;}
    #newsbox, #exlink {width: 100%; margin-bottom: 15px;}
    .line {display: none;}
    .bestlist {justify-content: space-between;}
    .bestlist li {width: calc(33.333% - 10px); margin-right: 0; margin-bottom: 10px; box-sizing: border-box;}
    .csitelist li {white-space: nowrap; overflow-x: auto;}
    .csitelist li span {white-space: nowrap;}
    #quickbox {white-space: normal;}
    #quickbox a {display: inline-block; margin: 0 10px 5px 0;}
    .navbar {width: 100%; overflow-x: auto; white-space: nowrap; justify-content: flex-start;}
    .navbar li {display: inline-block; float: none; flex: 0 0 auto;}
    .hcatelist li {width: 25%;}
    
    /* 修改newlist为水平排列 */
    .newlist {flex-direction: row; flex-wrap: wrap;}
    .newlist li {width: calc(50% - 10px); margin-right: 10px;}
}

@media screen and (max-width: 480px) {
    #topbox {flex-wrap: nowrap;}
    .logo {width: 100px; height: 40px;}
    .sofrm {flex-wrap: nowrap;}
    #selopt {width: 28%; margin-right: 5px;}
    .sipt {width: 45%; padding: 0 5px;}
    .sbtn {width: 27%; margin-left: 5px;}
    
    .bestlist li {width: calc(50% - 5px);}
    .csitelist li span {width: auto; margin-right: 0; margin-bottom: 0;}
    .hcatelist li {width: 33.333%;}
    .inlist li, .linklist li {margin-right: 10px;}
    .navbar li {min-width: 80px; font-size: 12px; padding: 0 5px;}
    
    /* 在更小的屏幕上，newlist每行显示一个 */
    .newlist li {width: 100%; margin-right: 0;}
}