@charset "utf-8";
/* top_banner */
@keyframes banner-bg-gradient {
    0% { left: 0; }
    100% { left: -1900%; }
}
@keyframes pullDown {
	0% { height: 0; }
    25% { height: 47px; }
    60% { height: 42px; }
    75% { height: 43px; }
	100% { height: 42px; }
}
@keyframes pullUp {
	0% { height: 42px; }
    25% { height: 43px; }
    70% { height: 42px; }
    85% { height: 47px; }
	100% { height: 0; }
}
.top_banner { position: sticky; left: 0; top: 68px; width: 100%; height: 0; overflow: hidden; z-index: 1000; }
.top_banner.on { animation: pullDown 0.7s ease-in 1 forwards; }
.top_banner.off { animation: pullUp 0.7s ease-in 1 forwards; }
.top_banner::before {  
    position: absolute; left: 0; top: 0; width: 2000%; height: 100%; animation: banner-bg-gradient 30s linear infinite; content: ''; display: block; z-index: -1; 
    background: rgb(245,86,131); background: linear-gradient(90deg, rgba(245,86,131,1) 0%, rgba(109,91,245,1) 20%, rgba(42,132,255,1) 40%, rgba(255,227,42,1) 60%, rgba(245,86,131,1) 80%, rgba(218,87,154,1) 100%); 
}
.top_banner p { width: 100%; height: 100%; min-height: 40px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color: #ffffff; line-height: 18px; }
.top_banner p::before { width: 24px; height: 24px; background: url(../../image/icon/icon_clock.webp) no-repeat center center; background-size: contain; content: ''; display: inline-block; margin-right: 6px; }
.top_banner p em { display: inline-block; font-weight: 700; margin-left: 4px; }
.top_banner p strong { display: inline-block; font-size: 15px; font-weight: 700; color: #FFF1A7; margin-right: 4px; }