:root {
            --brand-blue: #003366;
            --brand-gold: #ffcc00;
            --text-main: #111;
            --text-sub: #888;
            --line: #e0e0e0;
            --bg-soft: #fbfbfb;
        }
        .hero {
            height: 90vh; background: #000; position: relative;
            display: flex; align-items: flex-end; padding-bottom: 100px;
            background: url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/category/495522/4646/9de5a682e69f888f32b6e981d5f4c616/P1-Banner_%E5%9B%BE.jpg') center/cover;
        }
        .hero::after {content: '';position: absolute;inset: 0;/* background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); */}
        .hero-content {position: relative;z-index: 2;width: 100%;}
        .hero h1 {font-size: clamp(24px, 2.92vw, 56px);font-weight: 100;color: #fff;margin: 0;line-height: 1.2;text-shadow: 0px 0px 10px #00000066;padding: 20px 0;}
        .hero p {font-size: clamp(14px, 1.04vw, 20px);color: #fff;margin-bottom: 20px;font-weight: bold;/* font-family: var(--title-font-family); */text-shadow: 0px 0px 10px #00000066;width: 60%;line-height: 2;}


        @media(max-width:767px){
            .hero {height: auto;padding-bottom: 20px;padding-top: 20px;}
            .hero span {letter-spacing: 3px;}
            .hero p {padding: 0;margin-bottom: 10px;width: 100%;line-height: 24px;}
            .hero h1{padding: 10px 0;}
        }