@charset "UTF-8";

/* 基础样式重置 */
html, body { margin: 0; }
p, ul { margin: 0; padding: 0; }
a { color: #000; text-decoration: none; }
li { list-style: none; }
img { max-width: 100%; }
.footer::after{content: "";display: block;clear: both;}

/* 通用工具类 */
.fl { float: left; }
.fr { float: right; }

/* 清除浮动 */
.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after { display: table; content: ''; line-height: 0; }
.clearfix:after { clear: both; }

/* 布局容器 */
.container { width: 1200px; margin: 0 auto; box-sizing: border-box; }
.main { width: 1200px; margin: 0 auto; }

/* 页面背景 */
body { background: #dcf0fd url(../images/bg.png) top center no-repeat; }

/* 头部区域 */
.site-logo { margin-top: 30px; cursor: pointer;display: block;}
.site-logo img{display: inline-block;vertical-align: middle;margin-right: 15px;width: 50px;}
.site-logo span{font-size: 36px;font-weight: 700;color: #fff;display: inline-block;vertical-align: middle;}
.zt-hdzsk { margin-top: 80px; }
.no-data{text-align: center;line-height: 60px;color: #999;}

/* 搜索区域 */
.search { padding: 32px 32px 24px; border-radius: 16px; box-shadow: 0px 0px 16px 0px rgba(73, 111, 176, 0.1); background: rgb(255, 255, 255); }
.search-form { padding-bottom: 24px; border-bottom: 1px dashed #CCCCCC; }
.search-box { width: 710px; margin: 0 auto; }
.search-box input { float: left; }
.search-keyword { border: 1px solid #0477e6; width: 590px; height: 50px; box-sizing: border-box; background: rgba(255, 255, 255, 0.74); border-radius: 8px 0 0 8px; padding: 0 10px; font-size: 16px; outline: none; }
.search-btn { width: 120px; height: 50px; border: 0; background: #0477E6 url(../images/icon_search.png) 70px 14px no-repeat; cursor: pointer; outline: 0; color: #fff; font-size: 16px; text-indent: -30px; border-radius: 0 8px 8px 0; }

/* 分类导航 */
.category { margin-top: 60px; }
.category-title { float: left; padding: 0 30px; height: 40px; line-height: 40px; color: #fff; font-size: 20px; text-align: center; border-radius: 20px; background: #0477e6; }
.category-list li { float: left; margin-right: 8px; white-space: nowrap; line-height: 40px; }
.category-list li a { color: #333; padding: 0 16px; display: block; }
.category-list li a:hover, category-list li.active a { color: #0048AE; background: #F2F7FF; border-radius: 40px; }

/* 热门问题区域 */
.hot { margin-top: 30px; border-radius: 16px; box-shadow: 0px 0px 16px 0px rgba(73, 111, 176, 0.1); background: rgb(255, 255, 255); }
.hot .hot-title { line-height: 60px; overflow: hidden; background: linear-gradient(270.00deg, rgba(82, 163, 255, 0.5), rgba(82, 163, 255, 0.075) 99.237%); border-radius: 16px 16px 0 0; padding: 0 32px; }
.hot .hot-title span { float: left; color: #0048AE; display: block; line-height: 46px; font-size: 22px; }
.hot .hot-title a.more { float: right; line-height: 46px; }
.hot .hot-con { height: 426px; overflow: hidden; padding: 16px 32px 32px; }
.hot .hot-con .slidebox { width: 100%; height: 100%; overflow: hidden; position: relative; }
.hot .hot-con .hd { position: absolute; bottom: 0px; width: 100%; height: 8px; left: 0px; text-align: center; }
.hot .hot-con .hd li { display: inline-block; margin: 0 4px; height: 8px; vertical-align: top; }
.hot .hot-con .hd li span { display: block; width: 12px; height: 8px; border-radius: 4px; background: #ddd; font-size: 0; text-indent: -999em; }
.hot .hot-con .hd li.active span { background: #4998FF; width: 24px; }
.hot .hot-con .bd {}

/* 问答区域 */
.qa .question .avatar { width: 52px; height: 52px; float: left; margin-right: 10px; }
.qa .question .con { float: left; position: relative; background: #EEF7FF; padding: 18px 20px; line-height: 24px; color: #0048AE; border-radius: 0 10px 10px 10px; max-width: 800px; }
.qa .question .con .icon { position: absolute; width: 12px; height: 12px; left: -12px; top: 0px; background: url(../images/icon_arrow.png) no-repeat center center; }
.qa .answer { width: 833px; float: right; text-align: right; margin-top: 32px; }
.qa .answer .avatar { width: 52px; height: 52px; float: right; margin-left: 10px; margin-top: 36px; }
.qa .answer .con { margin-right: 60px; }
.qa .answer .con .info { line-height: 24px; margin-bottom: 12px; color: #999; }
.qa .answer .con .content { position: relative; border-radius: 12px 0px 12px 12px; text-align: left; background: linear-gradient(270.00deg, rgb(73, 152, 255), rgb(29, 176, 248) 100%); padding: 24px 26px; line-height: 28px; color: #fff; }
.qa .answer .con .content .icon { position: absolute; width: 12px; height: 12px; right: -12px; top: 0px; background: url(../images/icon_arrow_r.png) center center no-repeat; }
.qa .answer .con .content .scrollbar-y { overflow-y: auto; overflow-x: hidden; }
.qa .answer .con .rel { display: none; height: auto; line-height: 24px; padding: 10px 0px; color: #666; text-align: left; }

/* 常见问题区域 */
.faq { margin-top: 30px; padding: 14px 32px 32px; overflow: hidden; border-radius: 16px; box-shadow: 0px 0px 16px 0px rgba(73, 111, 176, 0.1); background: rgb(255, 255, 255); }
.faq .hd { height: 46px; border-bottom: 1px solid #E5E5E5; }
.faq .hd span { float: left; color: #0048AE; display: block; line-height: 46px; font-size: 22px; }
.faq .hd a.more { float: right; line-height: 46px; }
.faq .bd { padding-top: 10px; }
.faq li { float: left; width: 50%; }

/* 文章列表 */
.article-list li {height: 34px;box-sizing: border-box;line-height: 36px;padding-left: 17px;background: url("../images/dot.png") left center no-repeat;position: relative;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.article-list li .date { position: absolute; right: 0px; top: 2px; color: #999; }

/* 链接区域 */
.main .link { margin-top: 30px; background: none;margin-bottom: 30px;}
.main .link li { float: left; width: 384px; height: 220px; margin-right: 24px; }
.main .link li:last-child { margin-right: 0; }
.main .link li:nth-child(1) { background: url(../images/link_1.png) no-repeat; }
.main .link li:nth-child(2) { background: url(../images/link_2.png) no-repeat; }
.main .link li:nth-child(3) { background: url(../images/link_3.png) no-repeat; }
.main .link li a { padding: 30px 0 0 40px; color: #236CB5; font-size: 32px; line-height: 48px; display: block; }
.main .link li a span { position: relative; }
.main .link li a span::after { content: ''; width: 64px; height: 4px; background: #236CB5; border-radius: 2px; position: absolute; left: 0; bottom: -16px; }
.main .link li:nth-child(2) a { color: #CE8745; }
.main .link li:nth-child(2) a span::after { background: #CE8745; }
.main .link li:nth-child(3) a { color: #00A174; }
.main .link li:nth-child(3) a span::after { background: #00A174; }

/* 更多按钮 */
.columnMore { display: block; width: 120px; background-color: #2884c9; line-height: 36px; color: #fff; height: 36px; text-align: center; margin: 20px auto 0; border-radius: 20px; cursor: pointer; }

/* 知识库主体 */
.zsk-main { border-radius: 16px; box-shadow: 0px 0px 16px 0px rgba(73, 111, 176, 0.1); background: rgb(255, 255, 255); margin-bottom: 32px; padding: 24px 32px 32px; }
.zsk-main .qa { padding: 48px 0 22px; overflow: hidden; font-size: 16px; }

/* 位置导航 */
.position {padding-bottom: 20px;border-bottom: 1px solid #E2E2E2;margin-bottom: 15px;line-height: 24px;background: url(../images/icon_pos.png) left 2px no-repeat;color: #666666;font-size: 16px;padding-left: 30px;}

/* 页码 */
.page {text-align: center;display: block;}

@media (max-width:992px) {
    .main {width: 100%;}
    .main .link li {
        width: calc(33% - 11px);
        height: 180px;
        margin: 0 20px 10px 0;
        background-size: 100% 100% !important;
    }
}

/* 响应式布局 */
@media (max-width:768px) {
  .container { width: 100%; }
  .main { width: 100%; padding: 10px; box-sizing: border-box; }
  .zt-hdzsk { width: 96%; }
  .search { padding: 10px; }
  .search-form { width: 100%; }
  .search-box { width: 100%; }
  .search-keyword { width: 80%; }
  .search-btn { width: 20%; text-indent: -999px; background: #0477E6 url(../images/icon_search.png) center center no-repeat; }
  .search-type { margin-top: 20px; }
  .hot .hot-con { padding: 10px; }
  .qa .answer { width: 100%; }
  .qa .answer .avatar { margin: 0; }
  .qa .answer .con { margin-right: 0; clear: both; }
  .qa .answer .con .content { border-radius: 12px; padding: 10px; }
  .faq { padding: 10px; }
  .faq li { float: none; width: 100%; overflow: hidden; }
  .main .link li { float: none; width: 100%; height: 120px; margin: 0 0 10px 0; background-size: 100% 100% !important; }
  .footer .split { display: none !important; }
  .copyright { width: 100%; margin: 0; }
  .copyright p { text-align: center; }
  .zsk-main { padding: 10px; }
  .article-list li a { max-width: 100%; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
  .search-form {padding-bottom: 0px;border-bottom: 0px dashed #CCCCCC;}
}
@media (max-width:450px) {
    .main .link {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .main .link li:last-child {
        margin-bottom: -10px;
    }
    .main .link li {  
        margin: 0 0 20px 0;
    }
}