@charset "utf-8";
/**
*   MYZHAN Copyright (C)2008-2066
*   This is NOT a freeware,Use is subject to license.txt
*/

/*原*/
.video_title {padding:0 24px;}
.video_title h1 {font-weight:bold;font-size:22px;margin:0 0 10px 0;height:32px;line-height:32px;overflow:hidden;}
.player {}
.player iframe {display:block;}
.play-list {padding:20px 20px 0 20px;}
.play-list div {height:75px;margin-bottom:20px;}
.play-list div:hover {background:#404040;}
.play-list img {float:left;}
.play-list ul {float:left;width:190px;}
.play-list p {height:40px;line-height:20px;overflow:hidden;margin:6px 10px;color:#F1F1F1;}
.play-list span {color:#999999;padding-left:10px;}
.play-list i {color:#999999;font-style:normal;float:right;padding-right:4px;}
.play-list .on {background:#0072C6;}
.album-list {overflow:hidden;padding:0 0 16px 0;border-bottom:#EEEEEE 1px solid;}
.album-list p {margin:0;border-bottom:#EEEEEE 1px solid;line-height:48px;padding:0 16px;}
.album-list p b {font-size:18px;}
.album-list p span {float:right;color:#999999;}
.album-list li {width:362px;height:36px;line-height:36px;overflow:hidden;float:left;padding:0 12px;background:#F6F6F6;margin:16px 0 0 16px;font-size:14px;border-radius:6px;}
.album-list li:hover {background:#EEEEEE;color:#333333;}
.album-list li i {float:right;font-size:12px;color:#999999;font-style:normal;}
.album-list .on {background:#F6F6F6 url('../../image/ico-play.gif') no-repeat 366px center;background-size:8px 16px;width:342px;padding:0 32px 0 12px;}
/*new*/
/**/
.navbar {position: sticky;top: 72px;width:100%;background:rgba(255,255,255,0.98);backdrop-filter:blur(10px);z-index: 100;padding:15px 0;box-shadow: 0 4px 10px rgba(0,0,0,0.1);transition:var(--transition);display: none;}
.nav-content {display:flex;justify-content: space-between;align-items: center;}
a.nav-name{font-size: 20px;font-weight: bold;color: var(--primary-blue);text-decoration: none;display: flex;align-items: center;gap: 10px;}
.nav-links {display:flex;gap: 40px;align-items:center;}
.nav-links a {color:var(--dark-gray);text-decoration:none;font-weight:500;transition:var(--transition);font-size:16px;position:relative;}
.nav-links a:hover {color:var(--primary-blue);}
.nav-links a.cta-button {background:linear-gradient(135deg,var(--primary-blue),var(--dark-blue));color:var(--white);padding:10px 24px;border-radius:30px;text-decoration:none;font-weight:600;font-size:15px;box-shadow:0 4px 15px rgba(0,102,204,0.2);}
.nav-links a.cta-button:hover {transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,102,204,0.3);color:var(--white);}
/**/
.page-header {background:linear-gradient(135deg,var(--dark-blue),var(--primary-blue));color:var(--white);padding:140px 0 80px;text-align:center;position:relative;overflow:hidden;}
.page-header:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,0.1) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(255,102,0,0.1) 0%,transparent 50%);z-index:1;}
.page-header-content {position:relative;z-index:2;max-width: 860px;margin:0 auto;}
.page-header h1 {font-size:3.5rem;margin-bottom:20px;font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,0.2);}
.page-header p {font-size:1.4rem;opacity:0.95;line-height:1.8;margin-bottom:30px;}
.stats-bar {display:flex;justify-content:center;gap:50px;margin-top:50px;flex-wrap:wrap;}
.stat-item {text-align:center;}
.stat-number {font-size:2.5rem;font-weight:800;margin-bottom:5px;background:linear-gradient(to right,#FFD700,#FFA500);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.stat-label {font-size:1rem;opacity:0.9;}

.category-nav {background:var(--light-gray);padding:20px 0;position:sticky;top:70px;z-index:900;box-shadow:0 2px 10px rgba(0,0,0,0.05);}
.category-list {display:flex;justify-content:center;gap:15px;flex-wrap:wrap;}
.category-item {padding:12px 28px;background:var(--white);border-radius:30px;border:2px solid transparent;cursor:pointer;transition:var(--transition);font-weight:600;color:var(--medium-gray);box-shadow:0 2px 10px rgba(0,0,0,0.05);}
.category-item:hover {transform:translateY(-3px);box-shadow:0 5px 20px rgba(0,102,204,0.1);color:var(--primary-blue);}
.category-item.active {background:var(--primary-blue);color:var(--white);border-color:var(--primary-blue);box-shadow:0 5px 20px rgba(0,102,204,0.2);}

.video-showcase-section {padding:80px 0;}
.section-title {text-align:center;margin-bottom:60px;}
.section-title h2 {font-size:2.5rem;color:var(--dark-blue);margin-bottom:20px;position:relative;display:inline-block;font-weight:700;}
.section-title h2:after {content:'';position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);width:100px;height:5px;background:linear-gradient(90deg,var(--primary-blue),var(--accent-orange));border-radius:3px;}
.section-title p {color:var(--medium-gray);font-size:1.2rem;max-width:700px;margin:30px auto 0;line-height:1.8;}

.video-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px;margin-bottom:50px;}
.video-card {background:var(--white);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);transition:var(--transition);position:relative;height:100%;display:flex;flex-direction:column;}
.video-card:hover {transform:translateY(-10px);box-shadow:var(--shadow-heavy);}
.video-badge {position:absolute;top:15px;right:15px;background:var(--accent-orange);color:var(--white);padding:6px 12px;border-radius:20px;font-size:0.8rem;font-weight:600;z-index:2;}
.video-badge.live {background:#FF4757;animation:pulse 1.5s infinite;}

@keyframes pulse {
0% {opacity:1;}
50% {opacity:0.7;}
100% {opacity:1;}
}

.video-thumbnail-container {position:relative;width:100%;padding-top:133.33%; background:#000;overflow:hidden;}
.video-thumbnail {position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.video-thumbnail img {width:100%;/* height:100%; */object-fit:cover;transition:transform 0.5s ease;}
.video-card:hover .video-thumbnail img {transform:scale(1.05);}
.video-play-overlay {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease;cursor:pointer;}
.video-thumbnail-container:hover .video-play-overlay {opacity:1;}
.play-icon {width:60px;height:60px;background:rgba(255,255,255,0.9);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--primary-blue);font-size:24px;transition:var(--transition);}
.play-icon:hover {transform:scale(1.1);background:var(--white);}
.video-info {padding:25px;flex:1;display:flex;flex-direction:column;}
.video-meta {display:flex;justify-content:space-between;margin-bottom:15px;color:var(--medium-gray);font-size:0.9rem;}
.video-category {background:var(--light-blue);color:var(--primary-blue);padding:4px 12px;border-radius:12px;font-weight:600;font-size:0.8rem;}
.video-duration {display:flex;align-items:center;gap:5px;}
.video-info h3 {font-size:1.3rem;color:var(--dark-blue);margin-bottom:15px;font-weight:700;line-height:1.4;flex:1;}
.video-description {color:var(--medium-gray);font-size:0.95rem;line-height:1.6;margin: 0;margin-bottom:20px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.company-info {display:flex;align-items:center;gap:12px;margin-bottom:20px;padding:15px;background:var(--light-gray);border-radius:10px;}
.company-logo {width:50px;height:50px;border-radius:50%;background:var(--primary-blue);display:flex;align-items:center;justify-content:center;color:var(--white);font-size:20px;font-weight:700;flex-shrink:0;}
.company-details h4 {font-size:1.1rem;color:var(--dark-blue);margin-bottom:5px;}
.company-details p {font-size:0.9rem;color:var(--medium-gray);margin: 0;}
.video-stats {display:flex;justify-content:space-between;padding-top:15px;border-top:1px solid rgba(0,0,0,0.08);color:var(--medium-gray);font-size:0.9rem;margin-top:auto;}
.video-stat {display:flex;align-items:center;gap:5px;}

.featured-case {background:linear-gradient(135deg,#f8fbff 0%,#f0f7ff 100%);border-radius:30px;padding: 80px;/* margin:80px 0; */position:relative;overflow:hidden;}
.featured-case:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 10% 20%,rgba(0,102,204,0.05) 0%,transparent 20%),radial-gradient(circle at 90% 80%,rgba(255,102,0,0.05) 0%,transparent 20%);z-index:1;}
.featured-case-content {position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.featured-video {border-radius:15px;overflow:hidden;box-shadow:0 20px 60px rgba(0,51,102,0.15);}
.featured-video video {width:100%;height:auto;display:block;}
.featured-details h3 {font-size:2rem;color:var(--dark-blue);margin-bottom:20px;font-weight:800;}
.featured-stats {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0;}
.featured-stat {text-align:center;padding:20px;background:var(--white);border-radius:15px;box-shadow:0 5px 15px rgba(0,102,204,0.08);}
.featured-stat-value {font-size:2rem;font-weight:800;color:var(--primary-blue);margin-bottom:5px;}
.featured-stat-label {font-size:0.9rem;color:var(--medium-gray);font-weight:600;}

.live-preview-section {background:linear-gradient(135deg,var(--dark-blue),#004080);color:var(--white);padding:80px 0;border-radius: 200px 0;position:relative;overflow:hidden;}
.live-preview-section:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,0.1) 0%,transparent 40%),radial-gradient(circle at 70% 80%,rgba(255,102,0,0.1) 0%,transparent 40%);z-index:1;}
.live-preview-content {position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.live-info h3 {font-size:2.5rem;margin-bottom:20px;font-weight:800;}
.live-info p {font-size:1.2rem;opacity:0.9;margin: 0;margin-bottom:30px;line-height:1.8;}

.countdown {display:flex;gap:15px;margin:30px 0;}
.countdown-item {text-align:center;background:rgba(255,255,255,0.1);padding:20px;border-radius:15px;backdrop-filter:blur(10px);}
.countdown-value {font-size:2rem;font-weight:800;margin-bottom:5px;}
.countdown-label {font-size:0.9rem;opacity:0.9;}
.live-preview-video {border-radius:15px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.3);}

.case-modal {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);display:none;justify-content:center;align-items:center;z-index:2000;opacity:0;transition:opacity 0.3s ease;padding:20px;}
.case-modal.active {display:flex;opacity:1;}
.case-modal .modal-content {position:relative;width:90%;max-width:1000px;background:#000;border-radius:20px;overflow:hidden;transform:scale(0.9);transition:transform 0.3s ease;}
.case-modal.active .modal-content {transform:scale(1);}
.case-modal .modal-video {width:100%;height:auto;max-height:70vh;}
.case-modal .modal-info {background:#1a1a1a;padding:30px;color:white;}
.case-modal .modal-info h3 {font-size:1.8rem;margin-bottom:15px;color:white;}
.case-modal .modal-info p {color:rgba(255,255,255,0.8);line-height:1.6;margin-bottom:20px;}
.case-modal .close-modal {position:absolute;top:20px;right:20px;width:40px;height:40px;background:rgba(255,255,255,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:20px;cursor:pointer;transition:var(--transition);z-index:2001;}
.case-modal .close-modal:hover {background:rgba(255,255,255,0.2);transform:rotate(90deg);}

.cta-section {text-align:center;padding:100px 0;background:linear-gradient(135deg,#f8fbff,#f0f7ff);border-radius:30px;}
.cta-section h2 {font-size:2.5rem;color:var(--dark-blue);margin-bottom:20px;font-weight:800;}
.cta-section p {font-size:1.2rem;color:var(--medium-gray);max-width:600px;margin:0 auto 40px;line-height:1.8;}
.cta-buttons {display:flex;gap:20px;justify-content:center;flex-wrap:wrap;}
a.cta-button,.cta-button {background:linear-gradient(135deg,var(--primary-blue),var(--dark-blue));color:var(--white);padding:16px 32px;border-radius: 30px;border:none;cursor:pointer;transition:var(--transition);text-decoration:none;display:inline-block;font-weight:600;font-size:1.1rem;box-shadow:0 4px 15px rgba(0,102,204,0.2);}
.cta-button:hover {transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,102,204,0.3);}
a.secondary-button,.secondary-button {background:transparent;color:var(--primary-blue);border:2px solid var(--primary-blue);padding:16px 32px;border-radius: 30px;text-decoration:none;font-weight: 600;font-size: 1.1rem;transition:var(--transition);}
.secondary-button:hover {background:var(--primary-blue);color:var(--white);transform:translateY(-5px);}
#loadMore{font-size: 0.9rem;}