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

/* global */
body {background: linear-gradient(180deg, #f7fafb 0, #edf3f5 140px, #ffffff 320px) no-repeat;}
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 {position: relative; display: flex; align-items: center; gap: 18px; justify-content: space-between; padding: 10px 0;}

/* logo */
.logo {background: url(logo.png) no-repeat center; background-size: contain; display: block; height: 80px; width: 200px; flex-shrink: 0;}
.top-action {background: #fff; border: solid 1px #d9e4ee; border-radius: 999px; box-shadow: 0 8px 18px rgba(16, 53, 89, 0.08); display: none; height: 40px; position: relative; width: 40px;}
.top-action:before {background-position: center; background-repeat: no-repeat; background-size: 20px 20px; content: ""; display: block; height: 100%; width: 100%;}
.top-action-home:before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23142d4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E");}
.top-action-search:before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23142d4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");}
.top-action-text {position: absolute; left: -9999px;}

/* sobox */
#sobox {flex: 1; margin-left: auto; min-width: 300px; max-width: 520px; padding-top: 0;}
.sofrm {display: flex; margin: 0 auto; position: relative; width: 100%;}
.sipt {background: #fff; border: solid 1px #d7e0e8; border-radius: 14px; box-sizing: border-box; display: block; flex: 1; font: normal 13px/40px normal; height: 40px; padding: 0 12px 0 104px;}
.sbtn {background: #1c7ed6; border: 0; border-radius: 12px; color: #fff; cursor: pointer; font-size: 14px; height: 40px; margin-left: 8px; width: 78px; flex-shrink: 0;}

/* selopt */
#selopt {background: #f4f7fb; border: solid 1px #d7e0e8; border-radius: 12px 0 0 12px; box-sizing: border-box; position: absolute; left: 1px; top: 1px; width: 96px; z-index: 2;}
#cursel {cursor: pointer; display: block; height: 38px; line-height: 38px; overflow: hidden; position: relative; text-indent: 12px; width: 100%;}
#cursel:after {border-left: solid 4px transparent; border-right: solid 4px transparent; border-top: solid 5px #5e6d7c; content: ""; position: absolute; right: 12px; top: 17px;}
#options {background: #fff; border: solid 1px #d7e0e8; border-radius: 12px; box-shadow: 0 12px 24px rgba(16, 53, 89, 0.12); display: none; list-style: none; overflow: hidden; position: absolute; left: 0; top: 44px; width: 108px; z-index: 1000;}
#options li {background: #fff; clear: both; cursor: pointer;}
#options li a {color: #555; display: block; height: 32px; line-height: 32px; 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;}
.showpage .pages,
.showpage .first_page,
.showpage .last_page,
.showpage .prev_page,
.showpage .next_page,
.showpage .current {background: #fff; border: 1px solid #d8e0e6; border-radius: 10px; box-shadow: 0 2px 6px rgba(31, 53, 72, 0.06); color: #2c4256; display: inline-block; font-weight: bold; line-height: 1; margin: 0 5px; padding: 8px 12px; text-decoration: none;}
.showpage .current {background: #e6ebef; border-color: #c8d0d7; color: #334a5d;}
.showpage .pages:hover,
.showpage .first_page:hover,
.showpage .last_page:hover,
.showpage .prev_page:hover,
.showpage .next_page:hover {background: #f7fafc; border-color: #c7d4de; color: #1f3548; text-decoration: none;}

/* navbox */
#navbox {background: #eef3f6; border: solid 1px #d8e0e6; border-radius: 14px; box-shadow: 0 8px 18px rgba(43, 64, 84, 0.08); display: block; height: auto; overflow: hidden; padding: 5px;}
.navbar {display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; width: 100%;}
.navbar li {flex: 1; min-width: 0; text-align: center;}
.navbar li a {border-radius: 9px; color: #3a5165; display: block; font: 14px/38px "微软雅黑"; height: 38px; overflow: hidden; padding: 0 8px; text-overflow: ellipsis; white-space: nowrap;}
.navbar li a:hover {background: #d8e3ea; color: #24394c; text-decoration: none;}
.navbar .navline {display: none;}
.navbar .cur {background: #cddbe4; color: #24394c;}

/* txtbox */
#txtbox {background: #fff; border: solid 1px #dae4ec; border-radius: 16px; box-shadow: 0 10px 24px rgba(18, 52, 86, 0.08); display: flex; flex-wrap: wrap; gap: 10px; height: auto; justify-content: space-between; margin-top: 12px; padding: 12px 16px;}
.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:not(.sline) {align-items: center; display: flex; font-size: 14px; gap: 14px; min-height: 30px; overflow: hidden; vertical-align: top; width: 100%; margin-bottom: 10px;}
.csitelist li h4 {display: block; flex: 0 0 auto; font-weight: normal; line-height: 30px; margin-right: 0; max-width: 86px; min-width: 86px; overflow: hidden; vertical-align: top; white-space: nowrap;}
.csitelist li h4 a {color: #07c; display: block; overflow: hidden; text-overflow: ellipsis;}
.csitelist .cool-links {display: flex; flex: 1 1 auto; gap: 12px; justify-content: space-evenly; min-width: 0;}
.csitelist .cool-links span {display: block; flex: 1 1 0; height: 30px; line-height: 30px; margin-right: 0; min-width: 0; overflow: hidden; text-align: center; vertical-align: top; white-space: nowrap;}
.csitelist .cool-links span a {display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis;}
.csitelist .more {color: #07c; display: block; flex: 0 0 auto; font-size: 12px; line-height: 30px; margin-left: 0; vertical-align: top; white-space: nowrap;}
.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 {gap: 14px;}
    .logo {width: 160px; height: 64px;}
    #sobox {max-width: 100%; min-width: 240px;}
    #homebox {flex-direction: column;}
    #homebox-left, #homebox-right {min-width: 100%; max-width: 100%;}
    .bestlist li {min-width: 110px;}
    .csitelist .cool-links {gap: 10px;}
    .csitelist .cool-links span:nth-child(n+5) {display: none;}
}

@media screen and (max-width: 768px) {
    #wrapper, #topbar {width: 94%;}
    #topbox {background: #fff; border: solid 1px #e3ebf0; border-radius: 18px; box-shadow: 0 10px 22px rgba(31, 53, 72, 0.08); display: grid; grid-template-columns: 40px 1fr 40px; gap: 12px; justify-content: normal; padding: 10px 12px 12px;}
    .top-action {display: block;}
    .logo {height: 48px; justify-self: center; margin: 0; width: 132px;}
    #sobox {grid-column: 1 / -1; margin-top: 12px; max-width: none; min-width: 0; width: 100%;}
    body.js-ready #header:not(.search-open) #sobox {display: none;}
    body.js-ready #header.search-open #sobox {display: block;}
    .sofrm {display: flex; flex-wrap: nowrap;}
    #selopt {width: 84px;}
    #cursel {text-indent: 10px;}
    .sipt {padding-left: 92px;}
    .sbtn {width: 70px;}

    #homebox-left, #homebox-right {display: contents;}
    #homebox .blank10 {display: none;}
    #newbox {order: 1;}
    #bestbox {order: 2;}
    #coolbox {order: 3;}
    #hcatebox {order: 4;}
    #homebox-right > #rowbox {order: 5;}

    #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;}
    #newbox .newlist {gap: 8px; justify-content: flex-start;}
    #newbox .newlist li {display: block; margin-right: 0; text-align: center; width: calc(33.333% - 6px);}
    #newbox .newlist li a {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    .csitelist li:not(.sline) {gap: 8px; margin-bottom: 8px;}
    .csitelist li h4 {max-width: 72px; min-width: 72px;}
    .csitelist .cool-links {gap: 8px;}
    .csitelist .cool-links span:nth-child(n+4) {display: none;}
    #quickbox {white-space: normal;}
    #quickbox a {display: inline-block; margin: 0 10px 5px 0;}
    #navbox {margin-top: 10px; overflow: visible; padding: 8px;}
    .navbar {display: flex; flex-wrap: wrap; column-gap: 6px; row-gap: 3px; justify-content: flex-start; overflow: visible; white-space: normal;}
    .navbar li {flex: 0 0 calc(20% - 5px); min-width: calc(20% - 5px);}
    .navbar li a {align-items: center; display: flex; font-size: 12px; height: auto; justify-content: center; line-height: 1.2; min-height: 34px; padding: 7px 4px; white-space: normal;}
    .navbar .navline {display: none;}
    #txtbox {padding: 14px;}
    .count, .link {text-align: left; width: 100%;}
    .hcatelist li {width: 25%;}

    .newlist {flex-direction: row; flex-wrap: wrap;}
    .newlist li {width: calc(50% - 10px); margin-right: 10px;}
}

@media screen and (max-width: 480px) {
    #topbox {grid-template-columns: 36px 1fr 36px; gap: 10px;}
    .top-action {height: 36px; width: 36px;}
    .top-action:before {background-size: 18px 18px;}
    .logo {height: 42px; width: 112px;}
    #selopt {width: 86px;}
    .sbtn {margin-left: 6px; width: 64px;}

    .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;}
    #navbox {padding: 7px;}
    .navbar {column-gap: 5px; row-gap: 3px;}
    .navbar li {flex-basis: calc(20% - 4px); min-width: calc(20% - 4px);}
    .navbar li a {font-size: 11px; min-height: 32px; padding: 6px 3px;}
    #newbox .newlist {gap: 6px;}
    #newbox .newlist li {width: calc(33.333% - 4px);}
    .csitelist li:not(.sline) {gap: 6px;}
    .csitelist li h4 {max-width: 64px; min-width: 64px;}
    .csitelist .cool-links {gap: 6px;}
    .csitelist .cool-links span:nth-child(n+3) {display: none;}
    .csitelist .more {font-size: 11px;}
    .newlist li {margin-right: 0;}
}

@media screen and (max-width: 768px) {
    #listbox .sitelist li {
        align-items: flex-start !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
    }
    #listbox .sitelist li > a {
        display: block;
        flex-shrink: 0;
    }
    #listbox .sitelist li .thumb {
        align-self: flex-start !important;
        height: 66px !important;
        margin: 0 !important;
        width: 88px !important;
    }
    #listbox .sitelist li .info {
        flex: 1 1 auto !important;
        min-width: 0;
    }
    #listbox .sitelist li .info h3 {
        margin-bottom: 4px !important;
    }
    #listbox .sitelist li .info p {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        display: -webkit-box !important;
        line-height: 1.45 !important;
        margin-bottom: 6px !important;
        overflow: hidden !important;
    }
    #mainbox-right #bestweb .weblist_b li {
        align-items: flex-start !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
    }
    #mainbox-right #bestweb .weblist_b li img {
        align-self: flex-start !important;
        flex-shrink: 0;
        height: 66px !important;
        margin: 0 !important;
        width: 88px !important;
    }
    #mainbox-right #bestweb .weblist_b li > div {
        flex: 1 1 auto !important;
        min-width: 0;
    }
    #mainbox-right #bestweb .weblist_b li p {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        display: -webkit-box !important;
        line-height: 1.45 !important;
        margin-bottom: 4px !important;
        overflow: hidden !important;
    }
}