:root { --primary: #4facb1; --primary-dark: #4da3a5; --text-dark: #333333; --white: #ffffff; --gray-100: #f3f4f6; }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; /* Fix for mobile tap highlight */ }

body { font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; /* Expanded font stack */ color: var(--text-dark); background-color: var(--white); line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; width: 100%; }

.btn { display: inline-block; background-color: var(--primary);text-decoration:none; color: var(--white); font-weight: 500; padding: 0.5rem 2.5rem; border-radius: 9999px; text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.05em; border: none; cursor: pointer; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); transition: background-color 0.2s; }

.btn:hover { background-color: var(--primary-dark); }

header {  background-color: #b5dcde/* var(--primary)*/;  color: var(--white);  position: -webkit-sticky; /* Safari support */  position: sticky;  top: 0;  z-index: 50;  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);}

.header-content { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; max-width: 1280px; margin: 0 auto; }

.logo-container { display: flex; flex-direction: column; align-items: center; }

.logo-container img {max-height:100%  }

.menu-btn { background:url(/images/s1.jpg) no-repeat center center;width:32px;height:32px;cursor:pointer}

#menu-list{position:fixed;left:0px;top:0px;width:100%;height:100%;text-align:left;display:none }
#menu-list>p{position:fixed;display:block;left:0px;top:0px;height:100%;width:100%;margin:0px;padding:0px;background:rgba(20,20,20,0.5)}
.menudiv{width:80%;position:fixed;left:0px;top:0px;background:#50acb2;height:100%;box-sizing:border-box;padding-top:35px}
.menudiv .lia{line-height:25px;color:#000;padding:10px;box-sizing:border-box;border-bottom:1px solid #96cdd1;width:100%;position:relative}
.menudiv .lia>a{padding-left:26px;color:#000;font-size:16px;text-decoration:none}


.menudiv .lia>span{padding-left:26px;color:#000;font-size:16px;display:block;cursor:pointer}
.menudiv .lia > span::after{content:'';display:block;position:absolute;right:20px;top:17px;background:url(/images/s2.jpg) no-repeat center center;height:10px;width:10px}

.menudiv .lib{line-height:25px;color:#000;padding:10px 0px;display:none}
.menudiv .lib>a{padding:10px 0px;padding-left:36px;color:#000;font-size:16px;display:block;text-decoration:none}
.menudiv .lib::after{content:'';display:block;position:absolute;right:20px;top:17px;background:url(/images/s3.jpg) no-repeat center center;height:10px;width:10px}
 
.menudiv .lia a:hover,.menudiv .lia span:hover{color:#fff}

  /* --- HERO STRIP (MARQUEE) --- */
  .hero-strip {
    width: 100%;
    overflow: hidden;
    background-color: var(--white);
  }

.marquee-track { display: flex; width: max-content; /* Compatibility prefixes */ -webkit-animation: scroll 25s linear infinite; animation: scroll 25s linear infinite; }

.marquee-track:hover { -webkit-animation-play-state: paused; animation-play-state: paused; }

.marquee-item { width: 25vw; /* Mobile: 4 items */ flex-shrink: 0; border-right: 1px solid white; position: relative; aspect-ratio: 3 / 4; }

@media (min-width: 640px) {
 .marquee-item { width: 20vw; /* Desktop: 5 items */ }
}

.marquee-img { width: 100%; height: 100%; object-fit: cover; display: block; }

        /* Keyframes with Webkit prefix for compatibility */
@-webkit-keyframes scroll {
 0% { -webkit-transform: translateX(0); transform: translateX(0); }
 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

@keyframes scroll {
 0% { -webkit-transform: translateX(0); transform: translateX(0); }
 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

#case .marquee-item {
    width:75vw; 
}


        /* --- QUICK LINKS --- */
.quick-links { background-color: var(--primary); color: var(--white); padding: 1rem 0; }

.links-container { display: flex; justify-content: space-around; align-items: flex-start; }

.link-item { flex: 1; display: flex; flex-direction: column;color:#fff; align-items: center;text-decoration:none; cursor: pointer; text-align: center; }

.link-text { font-size: 0.875rem; font-weight: 500; line-height: 1.25; }
.quick-links img { margin-bottom: 0.7rem;height:38px;}

 
        /* --- SECTION HEADINGS --- */
.section-heading { display: flex; align-items: center; justify-content: center; margin: 2rem 0; padding: 0 2rem; }

.section-heading::after,.section-heading::before {display:block;content:''; height: 2px; width: 3rem; background-color: rgba(97, 195, 197, 0.6); /* primary/60 */ flex: 1; max-width: 80px; }

.section-heading h2{ margin: 0 1rem; color: var(--primary-dark); text-transform: uppercase; font-weight: bold; font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.025em; text-align: center; }

        /* --- VIDEO SECTION --- */
.video-wrapper { padding: 0 1rem; margin-bottom: 2rem; display: flex; flex-direction: column; align-items: center; }

.video-container { position: relative; width: 100%; max-width: 42rem; /* max-w-2xl */ aspect-ratio: 16 / 9; background-color: black; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); cursor: pointer; }

.video-cover { width: 100%; height: 100%; position: relative; }

.video-cover img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: transform 0.5s; }

.video-container:hover .video-cover img { transform: scale(1.05); }

.play-overlay { position: absolute; /* Replace 'inset: 0' for IE/360 compatibility */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; }

.play-btn-circle { background-color: rgba(255, 255, 255, 0.9); border-radius: 50%; padding: 1rem; padding-left: 1.25rem; /* Optical center for play icon */ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); transition: transform 0.3s, background-color 0.3s; display: flex; align-items: center; justify-content: center; }

.video-container:hover .play-btn-circle { transform: scale(1.1); background-color: #fff; }

        /* --- WHY CHOOSE SECTION (STAGGERED) --- */
.why-choose-wrapper { padding: 0 1rem; margin-bottom: 6rem; display: flex; flex-direction: column; align-items: center; }

        /* UPDATED: Force 4 columns on all screen sizes */
.grid-staggered { display: -ms-grid; /* IE10+ */ display: grid; grid-template-columns: repeat(4, 1fr); /* Always 4 columns */ gap: 0.5rem; /* Smaller gap for mobile */ width: 100%; max-width: 56rem; /* 4xl */ margin: 0 auto; }

        /* Larger gap on bigger screens */
@media (min-width: 768px) {
 .grid-staggered { gap: 1.25rem; }
}

.stagger-col { display: flex; flex-direction: column; }

        /* The Stagger Effect: High-Low */
        /* Always stagger even columns, but adjust the margin size based on screen */
        
        /* Mobile: Small stagger */
.stagger-col:nth-child(even) { margin-top: 2rem; }

        /* Desktop: Larger stagger */
@media (min-width: 768px) {
 .stagger-col:nth-child(even) { margin-top: 5rem; }
}

.slender-card { position: relative; width: 100%; aspect-ratio: 1 / 2; /* Slender look */ overflow: hidden; border-radius: 0.125rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); cursor: pointer; }

.slender-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }

.slender-card:hover img { transform: scale(1.1); }

.card-overlay { position: absolute; /* Replace 'inset: 0' for IE/360 compatibility */ top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; transition: background-color 0.3s; }

.slender-card:hover .card-overlay { background-color: rgba(0, 0, 0, 0.1); }

.btn-large { margin-top: 4rem; padding: 0.5rem 2.5rem; }

        /* --- FOOTER --- */
footer { background-color: var(--primary); padding: 1rem 0; margin-top: auto; }

.footer-content { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--white); }

.footer-logo-circle { padding: 0.5rem; border: 2px solid white; border-radius: 50%; margin-bottom: 0.25rem; display: flex; align-items: center; justify-content: center; }

.footer-text { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: bold; }

        /* --- ICONS (SVG Styling) --- */
.icon-svg { width: 2rem; height: 2rem; }
.icon-white { color: white; }
.icon-primary-dark { color: var(--primary-dark); }
.fill-current { fill: currentColor; }

.banner100{width:100%}
.banner100 img{width:100%}

.quicks{width:100%;padding:35px 0px;box-sizing:border-box;background:#f2f2f2;display:flex;justify-content:space-around}
.quicks a{display:block;text-align:center;cursor:pointer}
.quicks img{height:60px}
.quicks span{display:block;text-align:center;font-size:20px}

#ewmshow{position:fixed;left:0px;top:0px;width:100%;height:100%}
#ewmshow>p{position:fixed;left:0px;top:0px;width:100%;height:100%;background:rgba(0,0,0,0)}
#ewmshow>div{position:fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);background:#fff;border:1px solid #4facb1;color:#4facb1;padding:15px;border-radius:7px}
#ewmshow > div span{display:block;text-align:center;padding:8px 0px;font-size:20px}
#ewmshow > div img{width:250px}

.videos {width:100%;display:flex;justify-content:space-around;flex-wrap:wrap}
.videos a{display:block;width:40%;margin:15px;border:1px solid #eee;border-radius:5px;position:relative}
.videos a img{width:100%}
.videos a::after { display:block;content:attr(title);position:absolute;left:0px;bottom:0px;color:#fff;height:40px;line-height:40px;width:100%;padding:0px 10px;box-sizing:border-box;overflow: hidden;           /* 隐藏溢出内容 */
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all; }

.newss {width:100%;margin:0px auto}
.newss a{display:block;width:100%;border-bottom:4px solid #d9e0f0;margin:15px 0px;text-decoration:none;padding:0px 15px;padding-bottom:10px;box-sizing:border-box;}
.newss a img{width:100%}
.newss a strong { display:block;color:#000;line-height:25px;width:100%;font-size:16px }
.newss a span { display:block;color:#999;line-height:22px;width:100%;font-size:13px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px dashed #d9e0f0; }
.newss a time{color:#999999;padding-left:18px;background:url(/images/s10.jpg) no-repeat left center;padding-right:40px}
.newss a dj{color:#999999;padding-left:18px;background:url(/images/s11.jpg) no-repeat left center}


.newsxx{padding:15px;text-align:left}
.newsxx>h1{color:#40332e;font-size:18px;padding-bottom:15px}
.newsxx>span{color:#888887;font-size:16px;padding-bottom:15px;display:block}
.newsxx>div{color:#888887;font-size:16px;padding-top:15px;border-top:1px solid #d9d9d9}

#info{width:100%}
#info>p{padding:10px;color:#484848}