@charset "utf-8";
/* CSS Document */
body{ background:#f3f3f3;}
.selected{background: #024289;}
.main{width:95%; max-width:1340px; margin:0 auto;}
.fl{float: left;}
.fr{float: right;}
.clear{clear: both;overflow: hidden;}


/* 置顶主题 */
.colunm-box{width: 100%;background: #fff;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;padding: 30px;margin-bottom: 30px;padding-bottom: 6px;}
.top-column{margin-bottom: 30px;-webkit-box-shadow:0px 7px 21px rgba(174, 174, 174, 0.15);box-shadow:0px 7px 21px rgba(174, 174, 174, 0.15);display: flex;align-items: center;}
.top-column li{position: relative;height: 160px;margin-right: 2%;overflow: hidden;border-radius: 4px; width: 32%; }
.top-column li:last-child{margin-right: 0;}
.top-column li a{width: 100%;height: 100%;}
.top-column li a img{-webkit-transition: all 0.6s;-o-transition: all 0.6s;transition: all 0.6s;-o-object-fit: fill;object-fit: fill;width: 100%;height: 100%;}
.top-column .mask{width: 100%;height: 100%;text-align: center;position: absolute;top: 0;left: 0;background: rgba(0, 0, 0, 0);color: #fff;padding-top: 40px;}
.top-column .mask h1{font-size: 1.2rem;font-weight: 700;margin-bottom: 20px;}
.top-column .mask p{font-size: 1.2rem;font-weight: 700; margin-top:-10px;}
.top-column .mask span{font-size: 0.9rem;}
.top-column .mask:hover{cursor: pointer;}
.top-column li:hover .top-column-pic{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);}

/* 推荐主题 */
.recom-column{width: 100%;height: 49px;border-bottom: 1px solid #f3f3f3;margin-bottom: 30px;}
.recom-column-title{font-size: 1.1rem;font-weight: 700;color: #1559a3;border-bottom: 4px solid #1559a3;padding-bottom: 12px;}
.recom-column-model li{width: 23.5%;height: 160px;border-radius: 4px;background: #f3f6f9;margin-right: 2%;float: left;cursor: pointer;text-align: center;margin-bottom: 26px;}
.recom-column-model li:nth-of-type(4n){margin-right: 0;}

.recom-column-model li a{display: block; width: 100%;height: 100%;color: #293239;font-size: 0.9rem;padding: 30px 20px 0 20px;}
.recom-column-model li a h2{font-size: 0.9rem;}
.recom-column-model li a .column-img{display:inline-block;width: 50px;height: 50px;margin-bottom: 20px;background-size: contain;background-repeat: no-repeat;background-position: center}
.recom-column-model li:hover .column-title{color: #fff;}
.recom-column-model li:hover{background: #1559a3;}
.recom-column .fr img { width:24px;}

/* 往期专题 */
.previous-column{width: 100%;padding: 30px;margin-bottom: 30px;background: #fff;border-radius: 8px;}
.column-list-box ul li{position: relative;padding-left: 15px;line-height: 50px;}
.column-list-box ul li a:before{content: "";width: 5px;height: 5px;background: #cdcdcd;border-radius: 50%;position: absolute;left: 0;top:47%;display: inline-block;}
.column-list-box ul li a{font-size: 0.9rem;}
.column-list-box ul li a:hover{color: #1559a3;}
.column-list-box ul li a:hover:before{background: #1559a3;}
.column-list-left{border-right: 1px dashed #cdcdcd;width: 49%;padding-right: 2%;}
.column-list-right{width:48%;}



@media(max-width:1024px){
  .recom-column-model li a .column-img{width: 44px;height: 44px;margin-bottom: 10px;}
  .colunm-box{padding: 20px;padding-bottom: 5px;margin-bottom: 20px;}
  .top-column li{width: 49%;margin-bottom: 16px;}
  .top-column li:nth-child(even){float: right;margin-right: 0;}

  .top-column{flex-wrap: wrap;box-shadow: none;margin-bottom: 10px;}
  .recom-column-model li:nth-of-type(4n){float: left;margin-right: 2%;}
  .recom-column-model li{width: 32%;height: 136px;overflow: hidden;float: left;margin-right: 2%;margin-bottom: 16px;}
  .recom-column-model li:nth-of-type(3n){float: right;margin-right: 0;}
  .recom-column-model li a img{width: 42px;height: 42px;}
  .recom-column-model li a h2{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 0.9rem;}
  .previous-column{padding: 20px;}
  .recom-column{margin-bottom: 14px;}
  .column-list-box ul li{line-height: 45px;}
}

@media(max-width:768px){
  .colunm-box{padding: 15px;margin-bottom: 20px;}
  /* .top-column li{height: 100px;} */
  .mask{padding:20px 10px 10px;}
  .mask h1{margin-bottom: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;}
  .recom-column{height: 44px;margin-bottom: 20px;}
  .recom-column-title{padding-bottom:8px;}
  .recom-column-model li{width: 32%;height: 110px;padding: 16px 10px 0 10px;overflow: hidden;float: left;margin-right: 2%;margin-bottom: 12px;}
  .recom-column-model li a {padding: 0;}
  .recom-column-model li a img{width: 36px;height: 36px;margin-bottom: 15px;}
  .recom-column-model li a h2{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;}
  .previous-column{width: 100%;float: none;padding: 15px;}
  .column-list-left,.column-list-right{width: 100%;border-right: none;}
  .column-list-box ul li{line-height: 45px;overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;}
  .column-list-box ul li a{white-space: nowrap;line-height: 42px;}
  .recom-column-model li a .column-img {margin-bottom: 10px;width: 40px;height: 40px;}
  .top-column li{margin-bottom: 11px;}
}
@media(max-width:640px){
  .top-column li{height: 136px;margin-bottom: 9px;margin-right: 0;}
  .top-column .mask{padding-top: 28px;}
  .colunm-box{padding-bottom: 0;}
  .recom-column{height: 41px;}
  .recom-column-model li:nth-of-type(3n){float: left;margin-right: 2%;}
  .recom-column-model li{width: 49%;margin-bottom: 8px;float: left;margin-right: 2%;}
  .recom-column-model li:nth-of-type(2n){float: right;margin-right: 0;}
  .top-column li{width: 100%;}
}
@media(max-width:480px){
  .recom-column{height: 38px;}
}

@media(max-width:420px){
  .top-column li{height: 108px;}
  .top-column .mask h1{margin-bottom: 14px;}
  .recom-column{height: 35px;}
  .recom-column-title{border-bottom: 2px solid #1559a3;}
  .recom-column-model li{height: 86px;padding: 12px 10px 0 10px;margin-bottom: 7px;}
  .recom-column-model li a img{width: 24px;height: 24px;}
  .colunm-box{padding: 10px;padding-bottom: 5px;margin-bottom: 10px;}
  .recom-column{margin-bottom: 10px;}
  .column-list-box ul li{line-height: 24px;}
  .column-list-box ul li a{line-height:  30px;}
  .previous-column{padding: 10px;}
  .recom-column .more{width: 16px;}
  .previous-column{margin-bottom: 15px;}
  .recom-column-model li a .column-img{width: 32px;height: 32px;}
}