body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #3171e5;
}
html,body {
    overflow-x: hidden;
}

header {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
}

header nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin-right: 15px;
}

header nav ul li a {
    color: white;
    text-decoration: none;
}

footer {
    text-align: center;
    padding: 10px 0;
    background-color: #343a40;
    color: white;
    margin-top: 20px;
}
/* 澶撮儴瀵艰埅鏍忕殑寰皟 */
.navbar {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.navbar-brand img {
    margin-right: 10px;
}

.navbar-nav .dropdown-menu {
    border-radius: 8px;
}

.navbar-nav .dropdown-item {
    transition: background-color 0.3s ease;
}

.navbar-nav .dropdown-item:hover {
    background-color: #f8f9fa;
}

/* 鎼滅储妗嗘牱寮忓井璋� */
.form-control {
    border-radius: 25px;
    padding: 0.5rem 1rem;
}

.btn-outline-primary {
    border-radius: 25px;
    padding: 0.5rem 1rem;
}

.input-diy{
    width: 75%;
}

.form-diy{
    justify-content: center;
}
.ul-diy{
    width: 50%;
}
.no-static{
    position:absolute !important;
}


.video-section {
    margin-bottom: 2rem;
}

.section-title {
    /*color: #fff;*/
    font-weight: bold;
    font-size: 1.25rem;
}

.card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.card:hover {
    transform: scale(1.05);
}

.container {
    max-width: 1200px; /* 鏈€澶у搴� */
    /*padding-left: 5px; !* 宸︿晶鍐呰竟璺� *!*/
    /*padding-right: 5px; !* 鍙充晶鍐呰竟璺� *!*/
    /*margin: 0 auto; !* 灞呬腑瀵归綈 *!*/
}

/* PC绔浘鐗囬珮搴� */
.card-img-top {
    height: 200px;          /* 鍥哄畾楂樺害 */
    object-fit: cover;      /* 瑁佸壀鍥剧墖锛屼繚鎸佹瘮渚� */
    width: 100%;            /* 瀹藉害濉弧瀹瑰櫒 */
}

/* 绉诲姩绔浘鐗囬珮搴� */
@media (max-width: 768px) {
    .card-img-top {
        height: 120px;      /* 绉诲姩绔珮搴� */
    }
}


/* 瑙嗛鏍囬鏍峰紡 */
.card-title {
    overflow: hidden;        /* 闅愯棌婧㈠嚭鍐呭 */
    text-overflow: ellipsis; /* 瓒呭嚭閮ㄥ垎鏄剧ず鐪佺暐鍙� */
    white-space: nowrap;     /* 鍗曡鏄剧ず */
    font-size: 14px;         /* 璋冩暣鏂囧瓧澶у皬 */
    line-height: 1.5;        /* 琛岄珮 */
    margin-bottom: 0;        /* 鍘绘帀涓嬫柟鐨勫浣欓棿璺� */
}

/* 鍗＄墖鏁翠綋瀵归綈璋冩暣 */
.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 淇濇寔鏍囬鍜屾寜閽箣闂寸殑闂磋窛 */
    height: 100%;
}

a {
    text-decoration: none; /* 鍘绘帀閾炬帴涓嬪垝绾� */
    color: #0e0e0e;        /* 缁ф壙鏂囧瓧棰滆壊 */
}

a:hover .card {
    transform: scale(1.03); /* 榧犳爣鎮仠鏃舵斁澶� */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 娣诲姞闃村奖 */
}

.card-title {
    margin-bottom: 0; /* 鍘绘帀鏍囬鐨勫浣欓棿璺� */
}
.badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #007bff;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
}

 /* 鍒嗛〉鏍峰紡 */
.pagination {
    flex-wrap: wrap; /* 鍏佽鍒嗛〉鎸夐挳鑷姩鎹㈣ */
}

.pagination .page-item {
    margin: 2px;
}

.pagination .page-item .page-link {
    color: #007bff;
    border-radius: 4px;
    padding: 8px 12px;
}

.pagination .page-item.active .page-link {
    background-color: #007bff;
    color: white;
    border: none;
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    cursor: not-allowed;
}


/* 澶栧眰瀹瑰櫒锛屼繚鎸佸叏瀹� */
.video-player {
    width: 100%;
    max-width: 1200px; /* PC绔渶澶у搴� */
    margin: 0 auto;    /* 灞呬腑鏄剧ず */
    padding: 0;        /* 纭繚娌℃湁鍐呰竟璺� */
    overflow: hidden; /* 绂佹鍐呭婧㈠嚭 */
}

/* 鍝嶅簲寮� iframe 鏍峰紡 */
.responsive-iframe {
    display: block;
    width: 100%;
    height: 400px;      /* 榛樿楂樺害 */
    border: none;       /* 鍘绘帀杈规 */
    overflow: hidden;   /* 绂佹鍐呭瓒呭嚭 */
    margin: 0;          /* 鍘绘帀澶栬竟璺� */
    padding: 0;         /* 鍘绘帀鍐呰竟璺� */
}

/* PC绔牱寮忥紙瀹藉害 >= 992px锛� */
@media (min-width: 992px) {
    .responsive-iframe {
        height: 600px; /* PC绔洿楂樼殑瑙嗛鍖哄煙 */
    }
}

/* 绉诲姩绔牱寮忥紙瀹藉害 <= 768px锛� */
@media (max-width: 768px) {
    .responsive-iframe {
        height: 245px; /* 绉诲姩绔殑楂樺害 */
    }
}

/* 澶栭儴瀹瑰櫒锛岄檺鍒跺瓧骞曠殑鏄剧ず鍖哄煙 */
.marquee-container {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #ff943d; /* 搴曢儴鑳屾櫙棰滆壊 */
    color: #fff;           /* 瀛椾綋棰滆壊 */
    overflow: hidden;      /* 闅愯棌瓒呭嚭鐨勬枃瀛� */
    white-space: nowrap;   /* 绂佹鎹㈣ */
    border-top: 2px solid #555; /* 澧炲姞椤堕儴杈规 */
    padding: 5px 0;        /* 涓婁笅鍐呰竟璺� */
    z-index: 999;          /* 淇濊瘉鍦� footer 涔嬩笂 */
}

/* 婊氬姩瀛楀箷 */
.marquee {
    display: inline-block;
    will-change: transform; /* 浼樺寲鍔ㄧ敾鎬ц兘 */
    animation: scroll-left 29s linear infinite; /* 婊氬姩鍔ㄧ敾 */
}


/* 鍔ㄧ敾鏁堟灉 */
@keyframes scroll-left {
    from {
        transform: translateX(110%); /* 浠庡彸渚у紑濮� */
    }
    to {
        transform: translateX(-110%); /* 婊氬姩鍒板乏渚ф秷澶� */
    }
}

/* 鎮仠鏃舵殏鍋滃姩鐢� */
.marquee:hover {
    animation-play-state: paused; /* 鏆傚仠鍔ㄧ敾 */
}

/* 閾炬帴鏍峰紡 */
.marquee a {
    margin-right: 50px;  /* 姣忔鏂囧瓧鐨勯棿璺� */
    font-size: 16px;     /* 瀛椾綋澶у皬 */
    font-weight: bold;   /* 鍔犵矖 */
    color: #fff;         /* 閾炬帴棰滆壊 */
    text-decoration: none; /* 鍘绘帀涓嬪垝绾� */
    transition: color 0.3s; /* 鎮仠鏃剁殑棰滆壊鍙樺寲 */
}

/* 鎮仠鏃堕摼鎺ユ牱寮� */
.marquee a:hover {
    color: #00bfff; /* 榧犳爣鎮仠鏃剁殑楂樹寒棰滆壊 */
}

/* Footer 鐨勯鐣欑┖闂� */
footer {
    padding-bottom: 36px; /* 鐣欏嚭婊氬姩瀛楀箷鐨勯珮搴� */
}