: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/010bc2c686822e1e977f37cf7de3ecc4/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 #000000;padding: 10px 0;}
        .hero p {font-size: clamp(14px, 1.04vw, 20px);color: #fff;margin-bottom: 0px;font-weight: bold;/* font-family: var(--title-font-family); */text-shadow: 0px 0px 4px #fff;width: 60%;line-height: 2;color: var(--color-primary);text-transform: uppercase;font-family: var(--title-font-family);}


        @media(max-width:767px){
            .hero {height: auto;padding-bottom: 40px;padding-top: 40px;}
            .hero span {letter-spacing: 3px;}
            .hero p {}
            
        }