.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}
.mt60{margin-top:60px;}
.mt70{margin-top:70px;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}
.mb60{margin-bottom:60px;}
.mtb10{ margin-top:10px; margin-bottom:10px;}
.mtb20{ margin-top:20px; margin-bottom:20px;}
.mtb30 {margin-top: 30px;margin-bottom: 30px;}
.mtb40{ margin-top:40px; margin-bottom:40px;}
.mtb50{ margin-top:50px; margin-bottom:50px;}
.mtb60{ margin-top:60px; margin-bottom:60px;}
.mtb70{ margin-top:70px; margin-bottom:70px;}
.mtb80{ margin-top:80px; margin-bottom:80px;}
.mtb90{ margin-top:90px; margin-bottom:90px;}
.mtb100{ margin-top:100px; margin-bottom:100px;}
.mtb110{ margin-top:110px; margin-bottom:110px;}

h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:14px;}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========== 导航 ========== */
#topnav {
    width: 100%;
	height: 12vh;
    position: relative;
    padding-top: 10px;
}

.nav-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    background: rgba(255,255,255,0.95);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    z-index: 999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.logo img {
    width: 190px;
    height: 80px;
    object-fit: contain;
}

.nav-menu {
    display: flex;
    gap: 0px;
}

.nav-menu li {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-menu li a {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    padding: 0 20px;
	margin: 0px 0px 0px 50px;
    white-space: nowrap;
    transition: color 0.3s;
}

.nav-menu li a:hover {
    color: #0066cc;
}

.menu-btn {
    font-size: 28px;
    cursor: pointer;
    display: none;
}



        /* 轮播图基础样式（直接内置） */
        .slider {
            width: 80%;
            height: 80vh;
			margin: 0 auto;
            position: relative;
            overflow: hidden;
            padding-top: 90px;
        }
        .slider-item {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        .slider-item.active {
            opacity: 1;
        }
        /* 左右箭头 */
        .slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            background: rgba(0,0,0,0.3);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            cursor: pointer;
            z-index: 10;
            transition: 0.3s;
        }
        .slider-arrow:hover {
            background: rgba(0,0,0,0.6);
        }
        .prev { left: 30px; }
        .next { right: 30px; }
        /* 指示器 */
        .slider-dots {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 12px;
            z-index: 10;
        }
        .dot {
            width: 12px;
            height: 12px;
            background: rgba(255,255,255,0.5);
            border-radius: 50%;
            cursor: pointer;
            transition: 0.3s;
        }
        .dot.active {
            background: white;
            width: 30px;
            border-radius: 6px;
        }
        /* 移动端适配 */
        @media (max-width: 576px) {
            .slider { height: 70vh; }
            .slider-arrow { width: 40px; height: 40px; font-size: 18px; }
        }



        #terms {
            width: 100%;
            background: #eaeaea;
            border-radius: 40px 40px 0 0;
            padding: 50px 5%;
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
        }
        
        #termsa, #termsb, #termsc, #termsd {
            flex: 1;
            min-width: 240px;
        }
        
        #termsa img {
            max-width: 180px;
            height: 75px;
            object-fit: contain;
            margin-bottom: 20px;
        }
        
        #termsa #p1 {
            font-size: 16px;
            font-weight: 600;
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        #termsa #p2{
            font-size: 14px;
            color: #333;
        }
        #termsd #p2 {
            font-size: 14px;
            color: #333;
            margin-top: 80px;
        }
            #termsd #p2 a {
                font-size: 14px;
                display: inline;
            }
        
        #termsb #p1,
        #termsc #p1,
        #termsd #p1 {
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 20px;
        }
        
        #terms a {
            display: block;
            font-size: 18px;
            color: #000;
            margin-bottom: 10px;
            transition: color 0.3s;
        }
        
        #terms a:hover {
            color: #0066cc;
        }
        







/* ========== 响应式 ========== */
@media (max-width: 1024px) {
    .nav-menu {
        position: fixed;
        top: 90px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 90px);
        background: #fff;
        flex-direction: column;
        align-items: center;
        padding-top: 30px;
        transition: 0.3s;
    }
    .nav-menu.active {
        left: 0;
    }
    .nav-menu li {
        height: 60px;
    }
    .menu-btn {
        display: block;
    }
    #product {
        flex-direction: column;
    }
    #stara {
        width: 100%;
    }
}

@media (max-width: 768px) {
    #star h1, #tech h1, #recom h1 {
        font-size: 32px;
    }
    #recomn div, #recomm div {
        min-width: 100%;
    }
}

@media (max-width: 576px) {
    #topnav {
        height: 10px;
    }
}









/*Banner*/
#banner {
    width: 100%;
    height: auto;
    overflow: hidden;
    position:relative;
}
#banner img{
    width:100%;
}
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    justify-content: center;
    align-items: center;
}

#banner .swiper-button-prev, .swiper-button-next {
    background:rgba(0,0,0,0.3);
    color: white; 
    width: 50px; 
    height: 50px; 
    border-radius: 50%;
    display: flex; 
    justify-content: center;
    align-items: center;
}
#banner .swiper-button-prev:hover{
    background:rgba(0,0,0,0.5);
}
#banner .swiper-button-next:hover{
    background:rgba(0,0,0,0.5);
}
#banner .swiper-button-prev::after, .swiper-button-next::after {
    font-size: 20px; 
    font-weight: bolder;
}

#banner .swiper-pagination-bullet{
    width: 50px;
    height: 5px;
    border-radius:5px;
}
#banner .swiper-pagination-bullet-active{
    background: #0066cc;
}


#list_view{
    margin:30px auto;
}