.boxTopic{font-size:20px; background-color:#fff; font-family: "Microsoft Yahei", "微软雅黑", Tahoma, Arial, Helvetica, STHeiti}
.boxTopic .box{max-width:1200px; margin:0 auto}
.anmt3,.topicList a,.topicList img,.topicList span,.topicList em:after{transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease}

.banner{background:url("banner.png") #18222E no-repeat center center}
.banner.xf .box{padding-top:100px}
.banner .box{height:500px; position:relative; box-sizing: border-box; padding-top:160px}
.banner .box>b{font-size:2.4em; color:#fff; max-width:686px; display:block}
.banner .box>p{font-size:1em; padding-top:30px; line-height:2em; color:#fff}

.boxTopic .tit{padding:1.8em 0 1em}
.boxTopic .tit b{color:#000; font-weight: normal; font-size:1.2em; line-height:1em; display:inline-block; position: relative; padding:0 1em .8em 0; border-bottom:1px solid #DCDCDC; margin-bottom:.5em}
.boxTopic .tit b:after{content:''; position: absolute; left:0; bottom:-1px; width:2em; height:3px; background-color:#008C95}

.topicList{display: flex; flex-wrap: wrap; margin-bottom:2em}
.topicList li{float: left; width:32%; margin:0 0 2%; text-align:center}
.topicList li:nth-child(3n-1){margin:0 2% 2%}
.topicList li a{display:flex; flex-wrap: wrap; position: relative; background-color:#fff;}
.topicList li a i{display: block; width:100%; height:220px; overflow:hidden}
.topicList li a i img{display: block; width:100%; height:100%; object-fit:cover}
.topicList li a span{width:calc(100% - 48px); line-height:48px; color:#333}
.topicList li a em{width:48px; height:48px; line-height:48px; text-align: center; display: block;background-color:#008C95; color:#fff;}
.topicList li a em:after{content:'\e65f'; font-family:iconfont_jpx; display: block;}
.topicList li a:hover{box-shadow: rgba(0,0,0,.1) 0 .5em 1em}
.topicList li a:hover span{color:#008C95}
.topicList li a:hover i img{transform: scale(1.05)}
.topicList li a:hover em:after{margin-left:10px}