*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    scrollbar-width: none;  
}
a{
    color: #000;

}
body {  
    background: url("../img/beijing.png") no-repeat center center fixed;   
    -webkit-background-size: cover;  
    -moz-background-size: cover;  
    -o-background-size: cover;  
    background-size: cover;  
}



/* 设置.container的样式 */
.container {
    max-width: 390px; /* 设置容器的最大宽度，防止在大屏幕上过于宽广 */
    margin: 0 auto; /* 使容器水平居中 */
    padding: 16px; /* 设置容器的内边距，确保内容与屏幕边缘有一定距离 */
}
 
/* 设置.banner的样式 */
.banner {
    position: relative; /* 为绝对定位的子元素提供参考 */
    width: 100%; /* 使.banner的宽度与其父容器.container的宽度相匹配 */
    height: 0; /* 高度初始化为0，将通过padding-bottom技巧来设置宽高比 */
    padding-bottom: 55.86%; /* 通过计算得出（200/358*100），以保持图片的宽高比 */
    overflow: hidden; /* 隐藏溢出的内容 */
    border-radius: 8px; /* 设置圆角 */
    background-color: #ccc; /* 示例背景色，图片加载前显示 */
}
 
/* 设置.banner内图片的样式 */
.banner img {
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 宽度设置为100%，以适应.banner的宽度 */
    height: auto; /* 高度自动调整，以保持宽高比 */
    border-radius: inherit; /* 继承.banner的圆角 */
    object-fit: cover; /* 图片按比例缩放，填充整个容器 */
}
 



/* ... (之前的全局样式和.banner样式保持不变) */

.conner {
    margin-top: 16px;
    display: flex;
    flex-direction: column; /* 垂直排列子元素 */
    gap: 8px; /* 子元素之间的间距 */
}

.conner-1 {
    display: flex;
    justify-content: space-between; /* 水平排列子元素，两端对齐 */
    align-items: center; /* 垂直居中对齐子元素（如果高度不一致可能需要调整） */
    gap: 8px; /* 子元素之间的间距 */
}
.cc{
    width: calc(80% - 16px); /* 占据父容器.conner-1宽度的一半，减去左右内边距和间距的一半 */
}
.zz {
    display: flex;
    flex-direction: column; /* 垂直排列.box4和.box5 */
    gap: 8px; /* .box4和.box5之间的间距 */
    
}

.box1, .box2, .box3, .box4, .box5 {
    opacity: 1;
    border-radius: 8px;
    overflow: hidden; /* 隐藏溢出内容 */
    box-sizing: border-box; /* 包括内边距和边框在内计算元素的总宽度和高度 */
}

/* 使用固定高度和自适应宽度（百分比或max-width） */
.box1 {
    width: 100%; /* 或使用max-width并设置具体像素值来限制最大宽度 */
    height: 85px; /* 固定高度 */
    background-image: url("../img/box1.png");
    background-size: cover; /* 背景图片覆盖整个盒子 */
    background-position: center; /* 背景图片居中显示 */
}

.box2 {
    width: 100%; /* 在a标签内占据全部宽度 */
    height: 183px; /* 固定高度 */
    background-image: url("../img/box2.png");
    background-size: cover;
    background-position: center;
}

.box3 {
    width: 100%; /* 或根据需要调整 */
    height: 85px;
    background-image: url("../img/box3.png");
    background-size: cover;
    background-position: center;
}

.box4, .box5 {
    width: 100%; /* 在.zz内占据全部宽度 */
    height: 85px; /* 固定高度 */
    background-image: url("../img/box4.png"), url("../img/box5.png"); /* 注意：这里应该分别设置，示例中合并了，实际应分开 */
    background-size: cover;
    background-position: center;
}

/* 修正：分别为.box4和.box5设置背景图片 */
.box4 {
    background-image: url("../img/box4.png");
}

.box5 {
    background-image: url("../img/box5.png");
}

/* 内容样式保持不变 */
.box1 h4, .box2 h4, .box3 h4, .box4 h4, .box5 h4 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 6px;
    line-height: 22px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
    padding-top: 12px;
    padding-left: 8px;
    padding-right: 8px;
    /* ... (之前的样式保持不变) */
}

.box1 p, .box2 p, .box3 p, .box4 p, .box5 p {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 20px;
    color: #E6E3E3;
    vertical-align: top;
    padding-top: 1px;
    padding-left: 8px;
    padding-right: 8px;
    /* ... (之前的样式保持不变) */
}





.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #f5f5f5; /* 背景色 */
    text-align: center; /* 初始设置，但将被覆盖 */
    z-index: 999; /* 确保在顶部 */
    padding: 0 16px; /* 为footer添加左右内边距 */
    box-sizing: border-box; /* 确保内边距不会影响总宽度 */
}

.footer-nav {
    display: flex;
    justify-content: center;
    max-width: 390px; /* 设置最大宽度 */
    width: 100%; /* 让.footer-nav根据其内容或父容器（在这里是.footer，但由于我们设置了padding，所以实际上它会更小）的宽度自动调整 */
    margin: 0 auto; /* 由于.footer已经有了padding，这里margin: 0 auto将确保.footer-nav在.footer内水平居中 */
    padding: 10px 0; /* 上下内边距，左右内边距由.footer处理 */
    box-sizing: border-box; /* 确保内边距和边框不会影响总宽度 */
}

/* 移除下面这行，因为它与.footer-nav的样式冲突，并且不是必需的 */
.footer nav {
    display: flex;
    justify-content: space-between;
}

.footer nav a {
    display: grid;
    place-items: center;
    text-align: center;
    /* 可以根据需要添加高度和宽度，但在这里我们让Flexbox处理宽度，高度由内容决定 */
}

.footer nav a img {
    margin-bottom: 4px;
}

.footer nav a p {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 16.8px;
    color: #9C9392;
}




/*产品页*/
.toubu{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    box-sizing: border-box;
}
.toubu b{
    width: 24px;
    height: 24px;
}
.toubu p{
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 25.2px;
    color: rgba(48, 34, 34, 1);
    text-align: center;
    vertical-align: top;
}

.chanpin{
    width: 100%;
    box-sizing: border-box;
    display: flex;

    margin-bottom: 24px;
    box-sizing: border-box;

}
.chanpin img{
    width: 125px;
    height: 100px;
    border-radius: 4px;
}
.chanpin-wenzi{
    margin-left: 12px;
    box-sizing: border-box;
}
.yuanqi{
    font-size: 12px;
    color: rgba(135, 122, 122, 1);
}
.chanpin h4{
    left: 0px;
    top: 0px;
    width: 220px;
    height: 20px;
    opacity: 1;
    display: flex;

    /** 文本1 */
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 19.6px;
    color: rgba(48, 34, 34, 1);
    text-align: left;
    vertical-align: top;

    margin-bottom: 4px;
}
.chanpin p{
    height: 17px;
    opacity: 1;
    display: flex;

    /** 文本1 */
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 16.8px;
    color: rgba(135, 122, 122, 1);
    text-align: left;
    vertical-align: top;

}
.chanpin b{
    left: 0px;
    top: 81px;
    width: 59px;
    height: 19px;
    opacity: 1;
    /** 文本1 */
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 18.75px;
    color: rgba(255, 67, 46, 1);
    text-align: left;
    vertical-align: top;

}


.bq{
    display: flex;
}
.biaoqian{
    left: 0px;
    top: 49px;
    height: 15px;
    opacity: 1;
    border-radius: 80px;
    background: rgba(245, 246, 255, 1);
    border: 1px solid rgba(90, 107, 253, 1);
    display: flex;
    justify-content: center;
    padding: 0px 8px 0px 8px;
    margin-bottom: 13px;
    margin-top: 8px;

}
.biaoqian p{
    left: 8px;
    top: 0px;
    width: 40px;
    height: 15px;
    opacity: 1;
    display: flex;

    /** 文本1 */
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 15px;
    color: rgba(90, 107, 253, 1);
    text-align: center;
    vertical-align: top;

}
.biaoqian2{
    left: 0px;
    top: 49px;
    height: 15px;
    opacity: 1;
    border-radius: 80px;
    background: rgba(67, 207, 124, 0.1);
    border: 1px solid rgba(67, 207, 124, 1);
    display: flex;
    justify-content: center;
    padding: 0px 8px 0px 8px;
    margin-bottom: 13px;
    margin-top: 8px;
    margin-left: 8px;

}
.biaoqian2 p{
    left: 8px;
    top: 0px;
    width: 40px;
    height: 15px;
    opacity: 1;
    display: flex;

    /** 文本1 */
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 15px;
    color: rgba(39, 125, 73, 1);
    text-align: center;
    vertical-align: top;

}




/*理赔*/
.lipei-banner{
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}
.lipei-banner img{
    width: 322px;
    height: 129px;

}

.lipei-wenzi{
    height: 286px;
    border-radius: 8px;
    background: rgba(237, 244, 255, 1);
    box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
    margin: 0 auto;
    padding: 12px;
    box-sizing: border-box;
}

.lipei-wenzi-bt{
    display: flex;
    justify-content: center;
    align-items: center;
}
.lipei-wenzi-bt h3{
    font-size: 20px;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;

}
.lipei-wenzi-nr{
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 19.6px;
    color: rgba(0, 0, 0, 0.45);
    text-align: center;
    margin-top: 6px;

}

.lipei-wenzi-nr-tb{
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
}
.lipei-wenzi-nr-tb-tt{
    display: grid;  
    place-items: center; /* 简化版，同时设置水平和垂直居中 */  
    /* 可以根据需要添加高度和宽度 */  
    text-align: center; /* 确保文本在p标签内也居中 */
}

.lipei-wenzi-nr-tb-tt img{
    width: 62px;
    height: 62px;
}
.lipei-wenzi-nr-tb-tt p{
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 19.6px;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
}


.lipei-wenzi-tj{
    left: 0px;
    top: 194px;
    height: 48px;
    opacity: 1;
    border-radius: 77px;
    background: linear-gradient(225deg, rgba(71, 148, 255, 1) 0%, rgba(102, 217, 255, 1) 100%), rgba(87, 193, 250, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 115px 10px 115px;
    box-sizing: border-box;
    margin-top: 34px;

}
.lipei-wenzi-tj p{
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 28px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
}