Home

<div class="custom-hero-slider">
    <div class="slider-container">
        <div class="custom-slide active">
            <div class="slide-content">
                <div class="slide-left">
                    <h1 class="slide-title">THE LEADING MANUFACTURER OF <br><span>INJECTION MOLDING LINES</span></h1>
                    <p class="slide-desc">Precision mold making, high-volume production, and seamless end-to-end assembly. We eliminate multi-vendor hassle.</p>
                    <a href="/contact-us/" class="slide-btn">Learn More</a>
                </div>
                <div class="slide-right">
                    <div class="img-clip-wrap">
                        <img src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=800" alt="Factory 1">
                    </div>
                </div>
            </div>
        </div>
        
        <div class="custom-slide">
            <div class="slide-content">
                <div class="slide-left">
                    <h1 class="slide-title">HIGH-PRECISION <br><span>MOLD MAKING SOLUTIONS</span></h1>
                    <p class="slide-desc">World-class manufacturing standards to lower your cross-border supply chain and production costs.</p>
                    <a href="/contact-us/" class="slide-btn">Learn More</a>
                </div>
                <div class="slide-right">
                    <div class="img-clip-wrap">
                        <img src="https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?w=800" alt="Factory 2">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="slider-dots">
        <span class="dot active" onclick="currentSlide(0)"></span>
        <span class="dot" onclick="currentSlide(1)"></span>
    </div>
</div>

<style>
.custom-hero-slider {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%); /* 强行全屏，不留任何白边 */
    height: 650px;
    background: #111;
    overflow: hidden;
    font-family: system-ui, -apple-system, sans-serif;
}
.slider-container { width: 100%; height: 100%; position: relative; }
.custom-slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; transition: opacity 0.8s ease-in-out;
    display: flex; align-items: center; justify-content: center;
}
.custom-slide.active { opacity: 1; z-index: 2; }
.slide-content {
    display: grid; grid-template-columns: 1fr 1fr;
    width: 100%; max-width: 1300px; height: 100%;
    padding: 0 40px; align-items: center; gap: 60px;
}
.slide-left { color: #fff; z-index: 5; }
.slide-title { font-size: 46px; font-weight: 800; line-height: 1.15; color: #fff; margin-bottom: 20px; }
.slide-title span { color: #f4b400; } /* 321pack同款亮黄色 */
.slide-desc { font-size: 18px; color: #daffde; opacity: 0.8; line-height: 1.6; margin-bottom: 35px; }
.slide-btn {
    display: inline-block; padding: 15px 40px;
    background: #f4b400; color: #000; font-weight: bold;
    text-decoration: none; border-radius: 4px; transition: 0.3s;
}
.slide-btn:hover { background: #fff; }
.slide-right { height: 100%; display: flex; align-items: center; justify-content: relative; }
.img-clip-wrap {
    width: 100%; height: 90%; overflow: hidden;
    /* ✨ 核心代码：直接用CSS硬编码切出321pack的现代斜角 */
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%); 
}
.img-clip-wrap img { width: 100%; height: 100%; object-fit: cover; }
.slider-dots {
    position: absolute; bottom: 35px; left: 50%;
    transform: translateX(-50%); z-index: 10; display: flex; gap: 12px;
}
.dot {
    width: 12px; height: 12px; background: rgba(255,255,255,0.4);
    border-radius: 50%; cursor: pointer; transition: 0.3s;
}
.dot.active { background: #f4b400; width: 30px; border-radius: 6px; }
</style>

<script>
let slideIndex = 0;
const slides = document.querySelectorAll('.custom-slide');
const dots = document.querySelectorAll('.dot');
function showSlides() {
    slides.forEach(s => s.classList.remove('active'));
    dots.forEach(d => d.classList.remove('active'));
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}
    slides[slideIndex-1].classList.add('active');
    dots[slideIndex-1].classList.add('active');
    setTimeout(showSlides, 5000);
}
setTimeout(showSlides, 5000);
function currentSlide(n) {
    slideIndex = n;
    slides.forEach(s => s.classList.remove('active'));
    dots.forEach(d => d.classList.remove('active'));
    slides[slideIndex].classList.add('active');
    dots[slideIndex].classList.add('active');
}
</script>