:root { --background-color: #f8f9fa;
 --card-background: #ffffff;
 --text-color: #6c757d;
 --title-color: #212529;
 --brand-color: #007bff;
 --border-color: #dee2e6;
 --shadow-color: rgba(0, 0, 0, 0.08);
 --neu-tag-bg: #e2f5e3;
 --neu-tag-text: #28a745;
}
body { overflow-x: hidden; }
.slider-wrapper { position: relative; margin:0 auto; width: 100%; max-width: 1400px; }
.slider-container { position: relative; /* overflow: hidden; */ padding: 10px 0; }
.slider { display: flex; gap: 20px; cursor: grab; transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); padding-bottom: 30px; /* Space for pagination */ }
.slider:active { cursor: grabbing; }
.card { /*flex: 0 0 310px;*/ background-color: var(--card-background); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 4px 12px var(--shadow-color); padding: 20px; text-align: left; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; border-radius: .75rem;
box-shadow: 0 0 #0000001f, 0 2px 8px .5px #00182029; box-sizing: border-box; color: inherit; display: flex; flex-direction: column; gap: 2rem; height: 100%; padding: 1.5rem 1.5rem 3rem; text-decoration: none; width: 100%; }
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); }
.card-image-container { display: flex; justify-content: center; align-items: center; margin-bottom: 15px; }
.card-image { width:260px; height:195px; object-fit: contain; }
.neu-tag { position: absolute; top: 15px; left: 15px; color: var(--neu-tag-text); padding: 4px 8px; border-radius: 6px; font-size: 12px; background-color: #c5e2ba; align-items: center; border-radius: 1.25rem; color:#002b39; display: inline-flex; text-align: center; }
.carddetail { display: flex; flex-direction: column; gap: 1rem; padding: 0 1.5rem; text-align: center; }
.card-brand { font-family: var(--font-text, "Roboto Flex Variable", "Roboto Flex", sans-serif); letter-spacing: .005rem;
 font-size: .875rem;
line-height: 1.375rem; font-variation-settings: "opsz" 14, "GRAD" 0; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #3e769b; /*padding: .125rem .5rem;*/ text-transform: uppercase; }
.card-title { font-size: 20px; font-weight: 700; color: var(--title-color); margin-bottom: 10px; }
.card-description { font-size: 14px; color: var(--text-color); line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 4; display: -webkit-box; line-clamp: 4; max-height: 6rem; overflow: hidden; text-overflow: ellipsis; }
.nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background-color: var(--card-background); border: 1px solid var(--border-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); z-index: 10; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.slider-wrapper:hover .nav-arrow { opacity: 1; pointer-events: auto; }
.nav-arrow:hover { transform: translateY(-50%) scale(1.1); background-color: #f1f3f5; }
.nav-arrow.left { left: 0; }
.nav-arrow.right { right: 0; }
.nav-arrow.hidden { opacity: 0 !important; pointer-events: none !important; transform: translateY(-50%) scale(0.8) !important; }
.nav-arrow svg { width: 24px; height: 24px; color: #495057; }
.pagination { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.dot { width: 10px; height: 10px; background-color: #ced4da; border-radius: 50%; transition: background-color 0.3s ease, transform 0.3s ease; cursor: pointer; /* Add cursor pointer */ }
.dot.active { background-color: var(--brand-color); transform: scale(1.2); }
.card2 { min-width:390px; max-width: 456px; align-items: flex-start; display: flex; flex-direction: column; height: 100%; }
.card2 img {
border-radius: .75rem; overflow: hidden; aspect-ratio: 4 / 3; width: 100%; object-fit: contain; }
.card2con { display: flex; flex-direction: column; gap: .75rem;
 padding: 1.5rem .5rem .75rem;
}
.card2con h3 { font-size: 1.5rem; line-height: 2rem; }
.card2con p { font-family: var(--font-text, "Roboto Flex Variable", "Roboto Flex", sans-serif); letter-spacing: .0025rem;
font-size: 1rem; line-height: 1.5rem; font-variation-settings: "opsz" 16, "GRAD" 0; font-weight: 300; -webkit-font-smoothing: antialiased; }
.card2more { font-family: var(--font-text, "Roboto Flex Variable", "Roboto Flex", sans-serif);  letter-spacing: .0025rem;
font-size: 1rem; line-height: 1.5rem; font-variation-settings: "opsz" 16, "GRAD" 0; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; align-items: center; display: flex;  padding-left: .5rem;
 padding-right: .5rem;
}
.card2more a { color: #3e769b; display: flex; flex-direction: row; width: max-content; text-decoration: none; }
.card2more span {width:0px;   transition: all .2s ease-out;color: #3e769b; }
.card2more a:hover span {width: 30px;}
.card2more a:hover { color: #265d82; }
.card5 { align-items: center; cursor: pointer; }
.card5 img { object-fit: contain; max-width: 308px; border-radius: .75rem;}
.slider img{    /* ... 现有样式 ... */
    user-drag: none;
    -webkit-user-drag: none; /* 针对旧版 Safari 和 Chrome */}
        /* Responsive Design */
        @media (max-width: 768px) {
 .slider-container {
overflow:hidden;
}
 body {
}
 .card {
 flex: 0 0 240px;
}
 .nav-arrow {
opacity: 1; /*display: none;  Hide arrows on mobile, rely on swipe */
}
.card5 img{max-width:190px;}
}