/* 杞挱鍥惧熀纭�瀹瑰櫒鏍峰紡 */
.banner {
    width: 100%;          /* 瀹瑰櫒瀹藉害鍗犳弧鐖跺厓绱� */
    height: 350px;        /* 瀹瑰櫒鍥哄畾楂樺害350px */
    margin: auto;         /* 瀹瑰櫒灞呬腑 */
    position: relative;   /* 鐩稿瀹氫綅锛屼綔涓哄瓙鍏冪礌鐨勫畾浣嶅弬鑰� */
    overflow: hidden;     /* 瓒呭嚭閮ㄥ垎闅愯棌 */
}

/* 鍥剧墖鍒楄〃瀹瑰櫒鏍峰紡 */
.banner .imglist {
    position: absolute;   /* 缁濆瀹氫綅 */
    left: 0;             /* 宸﹀榻� */
    top: 0;              /* 椤堕儴瀵归綈 */
    width: 100%;         /* 瀹藉害鍗犳弧鐖跺鍣� */
    height: 100%;        /* 楂樺害鍗犳弧鐖跺鍣� */
    padding: 0;          /* 鍐呰竟璺濅负0 */
    margin: 0;           /* 澶栬竟璺濅负0 */
    list-style: none;    /* 绉婚櫎鍒楄〃鏍峰紡 */
    display: flex;       /* 寮规�у竷灞� */
    transition: transform 0.3s ease-in-out;  /* 杩囨浮鍔ㄧ敾鏁堟灉 */
}

/* 鍥剧墖鍒楄〃涓殑姣忎釜椤圭洰鏍峰紡 */
.banner .imglist li {
    flex: 0 0 100%;      /* flex灞炴�э紝涓嶆斁澶т笉缂╁皬锛屽熀鍑嗗��100% */
    width: 100%;         /* 瀹藉害鍗犳弧 */
    height: 100%;        /* 楂樺害鍗犳弧 */
    display: flex;       /* 寮规�у竷灞� */
    justify-content: center;  /* 姘村钩灞呬腑 */
    align-items: center;      /* 鍨傜洿灞呬腑 */
}

/* 鍥剧墖鏈韩鐨勬牱寮� */
.banner .imglist li img {
    max-width: 100%;     /* 鏈�澶у搴︿笉瓒呰繃瀹瑰櫒 */
    max-height: 100%;    /* 鏈�澶ч珮搴︿笉瓒呰繃瀹瑰櫒 */
    object-fit: cover;   /* 鍥剧墖瑕嗙洊妯″紡锛屼繚鎸佹瘮渚嬪～鍏� */
}

/* 杞挱鍥惧簳閮ㄥ渾鐐规寚绀哄櫒瀹瑰櫒 */
.cir {
    position: absolute;   /* 缁濆瀹氫綅 */
    left: 50%;           /* 宸︿晶50% */
    bottom: 15px;        /* 搴曢儴15px */
    transform: translateX(-50%);  /* X杞村钩绉�-50%瀹炵幇灞呬腑 */
    display: flex;       /* 寮规�у竷灞� */
}

/* 杞挱鍥惧簳閮ㄥ渾鐐规牱寮� */
.cir a {
    width: 10px;         /* 鍦嗙偣瀹藉害 */
    height: 10px;        /* 鍦嗙偣楂樺害 */
    border-radius: 50%;  /* 鍦嗚瀹炵幇鍦嗗舰 */
    background-color: rgba(255, 255, 255, 0.5);  /* 鍗婇�忔槑鐧借壊鑳屾櫙 */
    margin: 0 5px;       /* 宸﹀彸闂磋窛5px */
}

/* 杞挱鍥惧簳閮ㄥ渾鐐规縺娲荤姸鎬� */
.cir a.hover {
    background-color: #fff;  /* 婵�娲荤姸鎬佷负绾櫧鑹� */
}

/* Swiper杞挱鍥惧鍣ㄦ牱寮� */
.swiper-container {
    width: 40%;         /* 榛樿瀹藉害40% */
    height: auto;        
    margin: 0 auto;      
    overflow: hidden;    
}

/* 鍦ㄧ獥鍙ｅ搴﹀皬浜�800px鏃剁殑鐗规畩鏍峰紡 */
@media all and (max-width: 1000px) {
    .swiper-container {
        width: 93% !important;     /* 浣跨敤!important纭繚浼樺厛绾� */
        margin: 30px auto 0;       /* 涓婅竟璺�30px锛屽乏鍙冲眳涓� */
    }
}

/* Swiper鍗曚釜婊戝潡鏍峰紡 */
.swiper-slide {
    width: 100% !important;  /* 寮哄埗瀹藉害100% */
    display: flex;           /* 寮规�у竷灞� */
    justify-content: center; /* 姘村钩灞呬腑 */
    align-items: center;     /* 鍨傜洿灞呬腑 */
}

/* Swiper婊戝潡涓殑鍥剧墖鏍峰紡 */
.swiper-slide img {
    width: 100%;         /* 鍥剧墖瀹藉害100% */
    height: auto;        /* 楂樺害鑷�傚簲 */
    object-fit: contain; /* 鍥剧墖濉厖妯″紡锛屼繚鎸佹瘮渚嬪畬鏁存樉绀� */
}

/* 鍜ㄨ甯堥�夋嫨鍖哄煙鏍峰紡 */
.selectZXS{
    width: 1000px;       /* 鍥哄畾瀹藉害1000px */
    height: 250px;       /* 鍥哄畾楂樺害250px */
    margin: auto;        /* 灞呬腑鏄剧ず */
}

/* 鍜ㄨ甯堝垪琛ㄩ」鏍峰紡 */
.selectZXS ul li {
    float: left;         /* 宸︽诞鍔� */
    margin-right: 20px;  /* 鍙宠竟璺�20px */
    list-style: none;    /* 绉婚櫎鍒楄〃鏍峰紡 */
}

/* 鍜ㄨ甯堝垪琛ㄥ鍣ㄦ牱寮� */
.selectZXS ul{
    height: 20px;        /* 鍥哄畾楂樺害20px */
}