body, html { background-color: #F6F7FC; }
#navIndex { position: sticky; }
.mainBox { width: 60vw; margin: auto; max-width: 1200px; }
.mainBox .bread { display: flex; align-items: center; margin: 1.5vw 0 3vw 0; }
.mainBox .bread .t, .mainBox .bread a { font-size: .8vw; color: #444452; }
.mainBox .bread .iocn { width: .8vw; height: .8vw; margin: 0 .4vw; }
.mainBox .bread  .active { }
.mainBox .articleBox { border-bottom: solid 1px #D8D8D8; padding-bottom: 2vw; }
.mainBox .articleBox .title { font-size: 1.8vw; color: #040D14; line-height: 3vw; text-align: center; font-weight: 700; }
.mainBox .articleBox .time { margin-top: 1vw; color: #444452; font-size: .9vw; text-align: center; border-bottom: solid 1px #D8D8D8; padding-bottom: 2vw; }
.mainBox .articleBox .time span { padding-left: 1vw; }
.mainBox .articleBox .textInfo { font-size: .9vw; color: #444452; line-height: 1.8vw; margin-top: 1.2vw; margin-bottom: 3vw; }
.mainBox .articleBox .textInfo img { max-width: 100%; display: block; margin: auto; }
.mainBox .btnBox { display: flex; align-items: center; justify-content: center; }
.mainBox .btnBox .item { width: 10vw; height: 3vw; border: 1px solid #005CE6; line-height: 3vw; text-align: center; font-size: .9vw; color: #005CE6; cursor: pointer; margin: 0 4vw; display: flex; align-items: center; justify-content: center; }
.mainBox .btnBox .item .i1 { width: .8vw; height: .8vw; margin: 0 1vw 0 -1vw; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url('img/ico_2left_blue.png'); }
.mainBox .btnBox .item .i2 { width: .8vw; margin: 0 -1vw 0 1vw; height: .8vw; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url('img/ico_2left_blue.png'); }
.mainBox .btnBox .item:hover { background-color: #005CE6; color: #fff; }
.mainBox .btnBox .active .i2 { transform: rotate(180deg); }
.mainBox .btnBox .item:hover .i1 { background-image: url('img/ico_2right_white.png'); transform: rotate(180deg); }
.mainBox .btnBox .item:hover .i2 { background-image: url('img/ico_2right_white.png'); transform: rotate(0); }
.mainBox .recommend { margin-top: 3vw; padding-bottom: 3vw; }
.mainBox .recommend .title { font-size: 1.4vw; color: #040D14; font-weight: 700; padding: 0 1vw 1vw 1vw; }
.mainBox .recommend .listBoxAll { display: flex; flex-wrap: wrap; }
.mainBox .recommend .listBoxAll .list { flex: 0 0 33.3333%; cursor: pointer; position: relative; margin-bottom: 1vw; }
.mainBox .recommend .listBoxAll .list .listBox { padding: 1vw; }
.mainBox .recommend .listBoxAll .list:nth-child(3n) { margin-right: 0; }
.mainBox .recommend .listBoxAll .list .imgBox { height: 14vw; overflow: hidden; }
.mainBox .recommend .listBoxAll .list .imgBox .img { width: 100%; }
.mainBox .recommend .listBoxAll .list .name { color: #040D14; font-size: 1.2vw; line-height: 1.8vw; margin: 1vw 0; display: -webkit-box; -webkit-box-orient: vertical; font-weight: normal; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; height: 3.5vw; font-weight: 700; }
.mainBox .recommend .listBoxAll .list .dsc { color: #444452; line-height: 1.4vw; font-size: .9vw; display: -webkit-box; -webkit-box-orient: vertical; font-weight: normal; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; height: 2.8vw; }
.mainBox .recommend .listBoxAll .list .time { display: flex; align-items: center; color: #444452; font-size: .8vw; margin-top: 1vw; }
.mainBox .recommend .listBoxAll .list .time .icon { width: 14px; height: 14px; margin-right: 10px; }
.mainBox .recommend .listBoxAll .list:hover { background-color: #fff; }
.mainBox .recommend .listBoxAll .list:hover::after { content: ''; position: absolute; width: 60px; height: 6px; background: #005CE6; bottom: 0; left: 50%; transform: translate(-50%, 0); }
.mainBox .recommend .listBoxAll .list:hover .name { color: #005CE6; }
@media screen and (max-width:1024px) {
  .mainBox { width: 100%; padding-top: 1.5rem; }
  .mainBox .bread .t, .mainBox .bread a { font-size: .24rem; }
  .mainBox .bread .active { display: -webkit-box; -webkit-box-orient: vertical; font-weight: normal; -webkit-line-clamp: 1; text-overflow: ellipsis; overflow: hidden; flex: 1; }
  .mainBox .bread { margin: 0 0 .4rem 0; padding: 0 .3rem; }
  .mainBox .articleBox { padding: 0 0 .8rem 0; margin: 0 .3rem; }
  .mainBox .articleBox .title { font-size: .36rem; line-height: .64rem; font-weight: 600; }
  .mainBox .articleBox .time { margin-top: .3rem; font-size: .24rem; padding-bottom: .4rem; }
  .mainBox .articleBox .textInfo { margin: .4rem 0 .7rem 0; font-size: .3rem; line-height: .56rem; }
  .mainBox .btnBox .item { width: 2.4rem; height: .72rem; line-height: .72rem; margin: 0 .4rem; font-size: .28rem; }
  .mainBox .recommend { margin-top: .7rem; padding: 0; }
  .mainBox .recommend .listBoxAll { display: block; }
  .mainBox .recommend .title { font-size: .38rem; font-weight: 600; padding-bottom: .5rem; padding: 0 .3rem; margin-bottom: .3rem; }
  .mainBox .recommend .listBoxAll .list { margin-bottom: .7rem; padding: .3rem; }
  .mainBox .recommend .listBoxAll .list .listBox { padding: 0; }
  .mainBox .recommend .listBoxAll .list .name { font-size: .34rem; line-height: .56rem; height: auto; margin: .3rem 0 .14rem 0; font-weight: 700; }
  .mainBox .recommend .listBoxAll .list .dsc { font-size: .3rem; line-height: .52rem; height: auto; }
  .mainBox .recommend .listBoxAll .list .time { margin-top: .32rem; font-size: .24rem; }
  .mainBox .recommend .listBoxAll .list .time .icon { width: .24rem; height: .24rem; }
  .mainBox .recommend .listBoxAll .list .imgBox { height: auto; }
  .mainBox .btnBox .item .i1 { width: .24rem; margin: 0 .1rem 0 -.1rem; }
  .mainBox .btnBox .item .i2 { width: .24rem; margin: 0 -.1rem 0 .1rem; }
  .mainBox .bread .iocn { width: .25rem; height: .25rem; margin: 0 .1rem; }
}