/* =================================================
   CFMG NEWS DETAIL PAGE
   prolist_detail.css
================================================= */
/* =========================
   Reset
========================= */
.prolist_detail,
.prolist_detail *{
    box-sizing:border-box;
}
.prolist_detail{
    width:100%;
    background:#fff;
    color:#152342;
    overflow:hidden;
    padding-top: 11rem;
}
.prolist_detail img{
    max-width:100%;
    display:block;
}
/* =========================
   Container
========================= */
.prolist_container{
    width:165rem;
    margin:0 auto;
}
/* =========================
   Breadcrumb
========================= */
.prolist_breadcrumb{
    height:8rem;
    display:flex;
    align-items:center;
    font-size:1.4rem;
    color:#78859d;
}
.prolist_breadcrumb a{
    color:#78859d;
}
.prolist_breadcrumb span{
    margin:0 1.2rem;
    color:#b5c0d3;
}
.prolist_breadcrumb span:last-of-type {
    display: none;
}
/* =========================
   Article Header
========================= */
.prolist_detail_header{
    padding:2rem 0 7rem;
    background:
    linear-gradient(
    120deg,
    #ffffff 30%,
    #f5f9ff
    );
}
.prolist_detail_category{
    display:inline-flex;
    align-items:center;
    height:3rem;
    padding-left:1.5rem;
    border-left:.4rem solid #1464ff;
    color:#1264ff;
    font-size:1.5rem;
    font-weight:700;
    letter-spacing:.08rem;
    margin-bottom:3rem;
}
.prolist_detail_title{
    width:110rem;
    margin:0;
    font-size:4.6rem;
    line-height:1.25;
    letter-spacing:-.1rem;
    font-weight:800;
    color:#122142;
}
.prolist_detail_meta{
    display:flex;
    align-items:center;
    gap:4rem;
    margin-top:3.5rem;
}
.prolist_detail_meta div{
    display:flex;
    align-items:center;
    gap:1rem;
    color:#65728a;
    font-size:1.5rem;
}
.prolist_detail_meta i{
    width:1.6rem;
    height:1.6rem;
    border-radius:50%;
    background:#1464ff;
    display:block;
}
/* =========================
   Main Layout
========================= */
.prolist_detail_body{
    padding:7rem 0 12rem;
}
.prolist_detail_layout{
    display:grid;
    grid-template-columns:
    110rem 35rem;
    gap:8rem;
    align-items:start;
}
/* =========================
   Article Content
========================= */
.prolist_article_content{
    font-size:1.8rem;
    line-height:2;
    color:#52627d;
}
.prolist_article_content iframe{
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}
.prolist_img_desc{
    font-size:1.4rem!important;
    color:#8995aa;
}
/* CMS列表 */
.prolist_article_list{
    padding:0;
    margin:3rem 0 5rem;
    list-style:none;
}
.prolist_article_list li{
    position:relative;
    padding-left:4rem;
    margin-bottom:2.5rem;
}
.prolist_article_list li:before{
    content:"";
    position:absolute;
    left:0;
    top:.8rem;
    width:1.5rem;
    height:1.5rem;
    background:#1464ff;
    border-radius:50%;
}
.prolist_article_list strong{
    display:block;
    color:#162644;
    font-size:1.8rem;
}
.prolist_article_list p{
    margin:.5rem 0 0;
    font-size:1.6rem;
}
/* =========================
   Prev Next
========================= */
.prolist_article_switch{
    margin-top:6rem;
    padding:3rem;
    display:flex;
    justify-content:space-between;
    border-radius:1.5rem;
    background:#fff;
    border:1px solid #e5ecf8;
    box-shadow:
    0 2rem 5rem rgba(20,60,120,.06);
}
.prolist_article_switch a{
    width:45%;
    text-decoration:none;
    color:#152342;
}
.prolist_article_switch span{
    display:block;
    font-size:1.3rem;
    color:#1464ff;
    font-weight:700;
    margin-bottom:1rem;
}
.prolist_article_switch strong{
    display:block;
    font-size:1.6rem;
    line-height:1.5;
}
.prolist_next{
    text-align:right;
    border-left:1px solid #e6edf8;
    padding-left:3rem;
}
/* =========================
 Sidebar
========================= */
.prolist_sidebar{
    position:sticky;
    top:12rem;
}
.prolist_side_box{
    padding:3rem;
    margin-bottom:2rem;
    background:#fff;
    border-radius:1.8rem;
    border:1px solid #e7edf8;
    box-shadow:
    0 2rem 5rem rgba(20,70,140,.06);
}
.prolist_side_box h3{
    margin:0 0 2.5rem;
    padding-left:1.5rem;
    border-left:.35rem solid #1464ff;
    font-size:1.8rem;
    color:#142442;
}
/* Article info */
.prolist_side_box ul{
    list-style:none;
    padding:0;
    margin:0;
}
.prolist_side_box li{
    display:flex;
    justify-content:space-between;
    padding:1.5rem 0;
    border-bottom:1px solid #edf2fa;
    font-size:1.5rem;
}
.prolist_side_box li:last-child{
    border:none;
}
.prolist_side_box li span{
    color:#7c899e;
}
.prolist_side_box li em{
    font-style:normal;
    color:#182846;
    text-align:right;
}
/* Share */
.prolist_share{
    display:flex;
    gap:1.5rem;
}
.prolist_share a{
    width:5rem;
    height:5rem;
    border-radius:50%;
    background:#f1f5fc;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#1464ff;
    font-size:1.8rem;
    text-decoration:none;
    transition:.3s;
}
.prolist_share a:hover{
    background:#1464ff;
    color:#fff;
}
/* Related */
.prolist_related a{
    display:flex;
    gap:1.5rem;
    padding:1.5rem 0;
    text-decoration:none;
    border-bottom:1px solid #edf2fa;
}
.prolist_related a:last-child{
    border:none;
}
.prolist_related img{
    width:8rem;
    height:7rem;
    object-fit:cover;
    border-radius:1rem;
}
.prolist_related div{
    flex:1;
}
.prolist_related span{
    font-size:1.1rem;
    color:#1464ff;
    font-weight:700;
}
.prolist_related strong{
    margin:.5rem 0;
    font-size:1.4rem;
    line-height:1.4;
    color:#172744;
     display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.prolist_related time{
    font-size:1.2rem;
    color:#7f8ba1;
}
/* =========================
   Animation Ready
========================= */
.prolist_detail_header{
    animation:
    prolistFade .8s ease;
}
.prolist_article_content{
    animation:
    prolistFade .8s .15s both;
}
.prolist_sidebar{
    animation:
    prolistFade .8s .25s both;
}
@keyframes prolistFade{
    from{
        opacity:0;
        transform:translateY(3rem);
    }
    to{
        opacity:1;
        transform:none;
    }
}