.article .banner { position: relative; }
.article .banner img { display: block; width: 100%; height: auto; }
.article .banner .body { position: absolute; left: 50%; margin-left: -620px; top: 50%; color: #fff; }
.article .banner .info:before { display: block; content: ''; width: 4px; height: 100%; position: absolute; left: -10px; top: -2px; background: #a61111; }

.article .artpath em { margin: 0 10px; font-style: normal; }
.article .artcon h2,.article .artcon .artpath { text-align: center; line-height: 1.4; }
.article .artcon p { line-height: 2;  margin: 1rem 0; }
.article .artcon .indent2{text-indent: 2rem;}
.article .artcon p img { display: block; width: auto; height: auto; max-width: 100%; margin: 0 auto; }
.art-con{ padding: 20px 70px; margin-bottom: 3rem;}

.art-nav{width: 80%;}
.art-nav ul{ padding: 0; }
.art-nav ul li{background: #fff;border-bottom: 1px solid #eee; cursor: pointer; padding: 0; transition:all .5s ease-out; -webkit-transition:all .5s ease-out; -moz-transition:all .5s ease-out;
    -o-transition:all .5s ease-out; -ms-transition:all .5s ease-out; transform-origin: top left; border-radius: 4px;}
.art-nav ul li a{color: #525252; display: block; width: 100%; padding: 16px 10px; }
.art-navtit{background: #a61111;color: #fff;margin-bottom: 20px;padding: 6px 10px;}
.art-nav li:last-child{border-bottom:0;}

.art-nav ul li a.col-red,
.art-nav li:hover a { background: #a61111; color: #fff; font-weight: bold; }
.art-nav li.active,
.art-nav li:hover { transform: scale(1.06, 1); }

@media screen and (max-width: 1000px) {
    .article .artcon h2,
    .article .artcon .artpath { text-align: left; }
    .article .banner .body { left: 10%; top: 10%; margin-left: 0; }
}
@media screen and (max-width: 500px) {
    .article .artcon h2 { font-size: 20px; }
    .mt2 { margin-top: 1rem; }
    .sidebar-nav{background: #fff;height: 200px;overflow: hidden;overflow-y: auto;}
    .art-con{  padding: 1rem; margin-bottom: 1.6rem;}
    .art-nav{width: 100%;}
}