.article-header{border-bottom: 1.5px solid var(--color-neutral-2);}
.article-header .title-banner{position: relative;font-size: 0;}
.article-header .title-banner img{width: 100%;}
.article-header .title-banner .title-text{position: absolute;top: 50%;left: 50%;width: 100%;text-align: center;color: #fff;}
.article-header .title-banner .title-text h2{font-size: 36rem;font-weight: 700;}
.article-header .title-banner .title-text p{font-size: 17rem;line-height: 1.4;margin-top: 20rem;}
.article-header .title-banner .title-text{opacity: 0;visibility: hidden;transform: translate3d(-50%, calc(-50% + 5rem), 0);animation: fadeInUpTitle 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;animation-fill-mode: both;}

.article-header .cate-list{}
.article-header .cate-list > ul{display: flex;gap: 0 30rem;align-items: center;justify-content: center;}
.article-header .cate-list > ul > li{position: relative;}
.article-header .cate-list > ul > li.current{}
.article-header .cate-list > ul > li::after{content: "";position: absolute;bottom: -1.5px;left: 0;width: 100%;height: 1.5px;background: transparent;}
.article-header .cate-list > ul > li.current::after{background: var(--color-primary);}
.article-header .cate-list > ul > li > a{display: block;line-height: 74rem;font-weight: 500;color: var(--color-neutral-4);padding-inline: 10rem;font-size: 18rem;white-space: nowrap;}
.article-header .cate-list > ul > li.current > a{color: var(--color-primary);}

@media all and (max-width:1023px) {
    .article-header .title-banner .title-text{padding-inline: 16rem;}
    .article-header .title-banner .title-text h2{font-size: 26rem;}
    .article-header .title-banner .title-text p{font-size: 14rem;margin-top: 15rem;}

    .article-header .cate-list > ul > li > a{line-height: 50rem;font-size: 16rem;}
}

@media all and (max-width:660px) {
    .article-header .cate-list{margin-inline: -16rem;transform: translateY(1.5px);}
    .article-header .cate-list > ul{justify-content: flex-start;flex-wrap: nowrap;overflow-x: scroll;overflow-y: visible;padding-inline: 12rem;}
    .article-header .cate-list > ul::-webkit-scrollbar{display: none;}
    .article-header .cate-list > ul > li::after{bottom: 0;}
    .article-header .cate-list > ul > li > a{padding-inline: 4rem;}
}

@keyframes fadeInUpTitle { 
    from { opacity: 0; transform: translate3d(-50%, calc(-50% + 5rem), 0); visibility: hidden; } 
    to { opacity: 1; transform: translate3d(-50%, -50%, 0); visibility: visible; } 
}

@keyframes fadeInUpFixed { 
    from { opacity: 0; transform: translate(-50%, calc(-50% + 20rem)); } 
    to { opacity: 1; transform: translate(-50%, -50%); } 
}

@keyframes fadeInUpTitleMobile { 
    from { opacity: 0; transform: translate3d(0, 5rem, 0); visibility: hidden; } 
    to { opacity: 1; transform: translate3d(0, 0, 0); visibility: visible; } 
}


/* pagination */
.navigation.pagination{margin-top: 75rem;}
.navigation.pagination .nav-links{display: flex;align-items: center;justify-content: center;gap: 0 12rem;font-size: 18rem;}
.navigation.pagination .nav-links .page-numbers{display: inline-block;}
.navigation.pagination .nav-links .page-numbers.current{padding: 3rem 6rem;background: #e0e0e0;border-radius: 4rem;}

@media all and (max-width:660px) {
    .navigation.pagination .nav-links{font-size: 16rem;}
}