/* tfam-marquee.css */
.netopen-landing{
    height: 100vh;
    background-color: #666666;
}

.netopen-landing-bottom{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    background-color: #666666;
    height: 50vh;
}
.netopen-landing-bottom-text{
    font-size: 15rem;
}
.tfam-marquee-container {
    position: relative;
    width: 100%;
    height: 120px;
    background-color: #ffffff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tfam-marquee-top,
.tfam-marquee-bottom {
    position: relative;
    height: 50%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: #000000;
}

.tfam-marquee-top {
    animation: scroll-right 50s linear infinite;
}

.tfam-marquee-bottom {
    animation: scroll-left 50s linear infinite;
}

.marquee-text {
    padding-right: 100px;
    display: inline-block;
    font-size: 10rem;
}

.marquee-text-sub{
    font-size: 2.5rem;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
}

.marquee-text-title{
    margin-left: -3rem;
}

/* 上方跑馬燈 - 從左到右 */
@keyframes scroll-right {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* 下方跑馬燈 - 從右到左 */
@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* 響應式設計 */
@media (max-width: 768px) {
    .tfam-marquee-top,
    .tfam-marquee-bottom {
        font-size: 18px;
    }
    
    .tfam-marquee-container {
        height: 100px;
    }
}

@media (max-width: 480px) {
    .tfam-marquee-top,
    .tfam-marquee-bottom {
        font-size: 16px;
    }
    
    .tfam-marquee-container {
        height: 80px;
    }
}

/* 暫停動畫當滑鼠懸停 */
.tfam-marquee-container:hover .tfam-marquee-top,
.tfam-marquee-container:hover .tfam-marquee-bottom {
    animation-play-state: paused;
}

/* 自定義TFAM字樣的直立效果 */
.tfam-marquee-top .marquee-text {
    letter-spacing: 2px;
}

.tfam-marquee-bottom .marquee-text {
    letter-spacing: 1px;
}