.opage_main{width: 100%;min-height: 500px; padding-top: 100px; background: url('../opage_line.png') no-repeat;background-size: 100% auto;}



.opage_wrap{width: 100%;}

.left_side{width: 20%; float: left;}

.right_side{width: 75%;float:right;}



.left_nav_title{padding-bottom: 16px;border-bottom: 2px solid #08306C;}

    .left_nav_title .zh_title{font-weight: bold;font-size: 24px;line-height: 34px;color: #08306C; }

    .left_nav_title .en_title{margin-left:2%; font-size: 18px; line-height: 24px;color: #E33812;}

.left_nav li{width: 100%;border-bottom: 1px solid rgba(0, 0, 0, 0.87);}

.left_nav li a{display: block; width: 100%; padding:10px 0 10px 15px;font-size: 18px;

    line-height: 24px;color: rgba(0, 0, 0, 0.87); position: relative;}

.left_nav li a:before{content: '';width: 6px;height: 6px;border-radius: 50%;background-color:#212121;position:absolute;left:0;top:50%;margin-top:-3px;  display: inline-block;}



.left_nav li:hover a,.left_nav li.active a{color: #08306C;font-weight: bold;}

.left_nav li:hover a:before,.left_nav li.active a:before{background-color:#08306C;}

.left_nav li:last-of-type{border-bottom: 0;}



.position{width: 100%;padding-bottom: 10px; margin-bottom: 10px;border-bottom: 1px solid #000000;color: rgba(0, 0, 0, 0.54);}

.position a{color: rgba(0, 0, 0, 0.54);margin-right: 6px;}

.position a:hover{color: #08306C;}



































/* 文章 */

.article_list{margin: 32px 0;}

.article_list .article_item{width: 100%;margin-bottom: 30px;}

.article_list .article_item a{display: block; width: 100%; padding: 2%; border: 1px solid rgba(0, 0, 0, 0.12); font-weight: normal;font-size: 14px;line-height: 1.5;}

.article_list .article_title{font-size: 24px;

    line-height: 28px;font-weight: bold;margin-bottom: 14px;color: #000000;padding-bottom: 14px;border-bottom: 1px solid #000000;}

.article_list .article_desc{margin-bottom: 14px;color: rgba(0, 0, 0, 0.54);font-size: 14px;

}



.pub_date{color: rgba(0, 0, 0, 0.54);}

.article_list .article_item{margin-bottom: 20px; border: 1px solid rgba(0, 0, 0, 0.12);}

.article_list .article_item:last-of-type{margin-bottom: 0;}

.article_list .article_item_img{width: 22%;overflow:hidden;}

.article_item_img img{width: 100%;height: 100%;object-fit: cover;transition: all 0.5s ease;}

.article_list .article_item_img:hover img{transform: scale(1.1);}

.article_list .article_item_info{width: 75%;color: rgba(0, 0, 0, 0.54); padding-top: 10px;}



.article_item a:hover{border-color:#08306C;}

.article_item a:hover .article_title{color: #08306C;}



/* 文章详情页 */

.article_detail{width: 100%;background-color: #ffffff;padding:30px 0px;}

.article_detail .article_title{text-align: center; margin-bottom: 10px;font-size: 24px;line-height: 1.5; color: #37474f;}

.article_detail .info {text-align: center;  padding-bottom: 10px;border-bottom: 1px solid #f0f2f5;font-size: 13px;font-weight: 300;color: #a3afb7;}

.article_detail .info span {padding-right: 20px;}

.article_con{padding:20px 0;font-size: 14px;line-height: 1.6;color: #222;width: 100%;}

.article_con img{/* display: block;width: 100%; */ display:inline-block;}





/* 图片列表页 */

.picture_list{width: 100%;margin:30px 0;}

.picture_item{width: 48%;margin-bottom: 4%;}

.picture_item_img{ padding:2%;box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);}

.picture_item_img a,.picture_item_img img{display: block;width: 100%;}

.picture_item_title{font-size: 18px;line-height: 24px;margin-top:20px;font-weight: bold;  text-align: center;color: rgba(0, 0, 0, 0.87);}

.picture_item:hover .picture_item_title{color:#08306C;}

.picture_item:hover .picture_item_img{box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);}



/* 分页 */

.pagination { text-align: center; overflow: hidden;padding:10px 0px;font-size:12px;margin: 20px auto;}

.pagination a {border: #ccc 1px solid;color: #545454;text-decoration: none;overflow: hidden;padding:5px 8px;margin: 0px 0px 0px 5px;}

.pagination a:hover {color: #fff;background-color: #08306C;overflow: hidden;border-color: #08306C;}

.pagination span.current {border: #ccc 1px solid;color: #545454;overflow: hidden;padding:5px 8px;margin: 0px 0px 0px 5px;}

.pagination span.disabled {background-color: #fff; cursor: not-allowed;}

/* 手机版分页 */

.phone_pages {margin:30px 0;text-align: center;}

.phone_pages a{display: inline-block; border: #ccc 1px solid;color: #545454;padding:5px 18px;margin:0 15px;}

.phone_pages a:hover,.phone_pages a.active{color: #fff;background-color: #08306C;border-color: #08306C;}



/* 上下篇 */

.met-page{margin:20px 0;overflow:hidden;padding:10px 0px;width:100%;}

.met-page .previous{float:left;width:48%;}

.met-page .next{float:right;width:48%;}

.met-page li span{font-size:14px;}

.met-page li .badge{display:inline-block;vertical-align:middle;width:70px;height:30px;text-align:center;line-height:30px;margin-right:5px;}

.met-page li span.title{width:calc(100% - 80px);display:inline-block;vertical-align:middle;}

.met-page li a{color:#202020;}

.met-page li a:hover{color:#08306C;}







@media (max-width:1400px){

    .left_nav_title .zh_title{font-size: 18px;}

    .left_nav_title .en_title{font-size: 14px;}

    .article_list   .article_title{ font-size: 18px;line-height: 24px;padding-bottom: 6px;margin-bottom: 6px;}

    .article_list   .pub_date{font-size: 12px;}

}



@media (max-width:1200px){

    .opage_main{padding-top:50px;}

    .left_nav_title{padding-bottom: 0;}

    .left_nav_title .zh_title{font-size: 18px;}

    .left_nav_title .en_title{font-size: 14px;}

    .left_nav li a{font-size: 16px;padding:6px 0;}

    .article_list{margin:20px 0;}

    .article_list   .article_title{ font-size: 16px;line-height: 20px;padding-bottom: 6px;margin-bottom: 6px;}

    .article_list   .article_desc{-webkit-line-clamp: 1;}

    .article_list   .pub_date{font-size: 12px;}

}





@media (max-width:767px){

    .opage_main{padding-top:30px;}

    .left_side{width: 100%;display:none;}

    .right_side{width: 100%;}

    .article_list .article_item_img {width: 30%;}

    .article_list .article_item_info {width: 66%;}

    .met-page .previous,.met-page .next{width: 100%;float: none;}

    .article_detail .article_title{font-size: 18px;margin-bottom: 5px;text-align: left;}

    .article_detail .info{font-size: 12px;text-align: left;}

    .met-page li span{font-size: 12px;}

    .article_detail{padding:15px 0;}

    .picture_item_title{font-size: 16px;line-height: 24px;margin-top:10px;}

}