/*列表页*/
#blog_index #main{background-color: #f5f7f8;}
#blog_index #main .banner{position:relative;width: 100%;height: 363px;background: url('../images/blog/banner.png?v=2') center no-repeat;background-size: cover;}
#blog_index #main .banner img{width: 100%;}
#blog_index #main .banner .banner_m{display: none;}
#blog_index #main .banner .title{color: #fff;position: absolute;left: 48.5%;top: 105px;}
#blog_index #main .banner .title .sm_title{font-size: clamp(1.875rem, 0.542rem + 2.78vw, 2.625rem);font-weight: bold;}
#blog_index #main .banner .title .sm_title span{font-size: clamp(4.375rem, 2.375rem + 4.17vw, 5.5rem);font-weight: bold;}
#blog_index #main .sub_word{padding:40px 0;font-size: 30px;line-height: 30px;font-weight: bold;color: #222222;}
#blog_index #main .blog{width:100%;margin:0 auto;padding:0 0 90px;}
@media (max-width: 768px) {
    #blog_index #main .banner{background: none;height: auto;display: flex;justify-content: center;}
    #blog_index #main .banner .banner_m{display: block;}
    #blog_index #main .banner .title{color: #fff;position: absolute;left: unset;top: 10%;text-align: center;}
    #blog_index #main .banner .title .sm_title{font-size: clamp(1.25rem, 0.609rem + 3.42vw, 2.25rem);font-weight: bold;}
    #blog_index #main .banner .title .sm_title span{font-size: clamp(2.5rem, 0.897rem + 8.55vw, 5rem);font-weight: bold;}
    #blog_index #main .sub_word{padding:20px 0;font-size: 14px;line-height: 14px;}
    #blog_index #main .blog{width:100%;padding:0 0 45px 0;}
}
#blog_index #breadcrumb nav .breadcrumb-item a,
#blog_index .breadcrumb-item+.breadcrumb-item::before,
#blog_index #breadcrumb nav .breadcrumb-item.active{color: #ffffff;}

/*详情页*/
#blog_view{background-color: #f5f7f8;}
#blog_view #main .blog{width: 100%;overflow: hidden;display: flex;margin: 0 auto;padding:70px 0 100px;}
#blog_view #main .l_box{width: 70%;float:left;padding:50px 30px 45px;border-radius: 12px;background-color: #fff;}
#blog_view #main .l_box .top .title{font-size: 40px;font-weight: bold;line-height: 48px;color: #222222;}
#blog_view #main .l_box .top .date{margin-top:20px;font-size:16px;font-weight: bold;color: var(--primaryColor);}
#blog_view #main .l_box .top .img{margin-top:50px;max-width: 60%;max-height: 250px;}
#blog_view #main .l_box .top .content{margin-top:50px;}
#blog_view #main .l_box .top .content img{height: auto;}
#blog_view #main .l_box .bottom{margin-top:70px;display: flex;justify-content: space-between;gap: 100px;}
#blog_view #main .l_box .bottom .prev{width: 50%;display: flex;justify-content: left;}
#blog_view #main .l_box .bottom .next{width: 50%;display: flex;justify-content: right;text-align: right;}
#blog_view #main .l_box .bottom a{display: flex;text-decoration: none;}
#blog_view #main .l_box .bottom .img_box{width: 105px;max-height: 60px;display: flex;justify-content: center;align-items: start;}
#blog_view #main .l_box .bottom img{border-radius: 6px;max-width: 105px;}
#blog_view #main .l_box .bottom .box{padding:0 10px;}
#blog_view #main .l_box .bottom .key{color: var(--primaryColor);line-height: 22px;}
#blog_view #main .l_box .bottom .title{margin-top:8px;font-weight: bold;line-height: 18px;color: #222222;}
#blog_view #main .r_box{width: 30%;float:right;padding: 20px 20px 20px 50px;}
#blog_view #main .r_box .label{font-size: 24px;font-weight: bold;color: var(--primaryColor);}
#blog_view #main .r_box .items_box{margin-top:20px;}
#blog_view #main .r_box .item{margin-top:25px;display: flex;}
#blog_view #main .r_box .item:first-child{margin-top:0;}
#blog_view #main .r_box .item a:hover{text-decoration: none;font-weight: bold;}
#blog_view #main .r_box .item .key{padding-right:15px;font-size: 16px;font-weight: bold;}
#blog_view #main .r_box .item .key.rank{color:var(--primaryColor);}
#blog_view #main .r_box .item .title{line-height: 22px;}
#blog_view #main #breadcrumb nav{top:30px;}
@media (max-width: 768px) {
    #blog_view #main .blog{width: 100%;padding:40px 0 50px;}
    #blog_view #main .l_box{width: 100%;border-radius:10px;padding:22px 15px 40px;}
    #blog_view #main .l_box .top .title{font-size: 28px;line-height: 40px;}
    #blog_view #main .l_box .top .date{margin-top:15px;font-size: 14px;}
    #blog_view #main .l_box .top .img{margin-top:25px;max-width: 100%;height: 180px;display: flex;align-items: center;}
    #blog_view #main .l_box .top .content{margin-top:16px;font-size: 12px;line-height: 20px;}
    #blog_view #main .l_box .bottom{margin-top:40px;display: block;}
    #blog_view #main .l_box .bottom .prev{width: 100%;}
    #blog_view #main .l_box .bottom .next{width: 100%;margin-top:38px;}
    #blog_view #main .l_box .bottom .img_box{width: 77px;max-height: 45px;}
    #blog_view #main .l_box .bottom img{max-width: 77px;border-radius: 3px;}
    #blog_view #main .l_box .bottom .box{padding:0 11px;}
    #blog_view #main .l_box .bottom .key{font-size: 12px;line-height: 11px;}
    #blog_view #main .l_box .bottom .title{margin-top:6px;font-size: 12px;line-height: 16px;}
    #blog_view #main .r_box{display: none;}
    #blog_view #main #breadcrumb nav{top: 15px;font-size: 12px;line-height: 12px;}
}