#topBanner {
    width: 100%;
    height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: var(--point-color-primary);
    overflow: hidden;
    position: relative;
    transition: height .25s ease, opacity .2s ease, visibility 0s linear .25s;
}
#topBanner.is-active {
    height: 60px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}
#topBanner .swiper-wrapper {height: 100%;}
#topBanner ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 16px;
}
/* 링크가 있으면 a, 링크 없이 문구만이면 .topBnrText 입니다. 모양은 똑같습니다. */
#topBanner ul li a,
#topBanner ul li .topBnrText {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: var(--mono-00);
    box-sizing: border-box;
}
#topBanner ul li a  span{font-weight:700;}

@media all and (max-width:1024px) {
    #topBanner.is-active {height: 33px;}
    #topBanner ul li,
    #topBanner ul li a,
    #topBanner ul li .topBnrText {font-size: 12px;}
}

@media (prefers-reduced-motion: reduce) {
    #topBanner {transition: none;}
}