/*
border="1" bordercolor="green"
border: 1px solid rgba(255, 0, 0, 0.5);
*/
body{
    background: linear-gradient(45deg, #ffffff, #64c8fa) no-repeat fixed center top;
    background-size: cover;
}/*页面背景色*/
hr{
    width: 80%;/*分割线宽度*/
    color: white;/*分割线颜色*/
    margin: auto;/*水平居中*/
}/*分割线*/
*{/*声明内外边距为0*/
    margin: 0;/*内边距*/
    padding: 0;/*外边距*/
    /*声明各种列表样式为空*/
    text-decoration: none;
    list-style: none;
}/*声明事项*/
.B1{
    max-width: 366px;
    height: 150px;
}/*LOGO图框架*/
.B1 img{
    max-width: 366px;
    height: 150px;
}
.B2{
    width: 215px;
    height: 50px;
    position: absolute;
    top: 30px;
    right: 30px;
}/*社交程序*/
.B2 img{
    max-width: 50px;
    max-height: 50px;
    border-radius: 10px;
}/*社交程序图标*/
.dh01{
    position: revert;/*父级定位，便于下拉菜单进行绝对定位不影响其他元素*/
    height: 40px;/*导航条高度*/
    width: 750px;/*导航栏宽度*/
    background-color: rgba(255,255,255,0.3);/*导航条背景色*/
    box-shadow: dimgray;/*导航条阴影色*/
    margin: auto 100px;/*导航栏上下居中，左右边距100*/
    border-radius: 20px;/*边框改为圆角*/
}/*导航条背景*/
.dh02 a{
    font-size: 12px;/*导航文字尺寸*/
    color: black;/*导航文字颜色*/
    display: block;/*让文字选框以外边框为准*/
}/*导航栏文字*/
.dh02 a:hover{
    background: lightskyblue;/*鼠标停留时的背景颜色*/
    border-radius: 20px;/*边框改为圆角*/
}/*鼠标停留时的背景颜色*/
.dh03{
    float: left;/*靠左浮动，使其横排*/
    width: 150px;/*行宽*/
    line-height: 40px;/*行高*/
    text-align: center;/*对齐方式水平居中*/
}/*导航项属性*/
.KJ01{
    height: 720px;/*框架高度*/
    max-width: 1280px;/*框架宽度*/
    margin: auto;/*位置居中*/
}/*主页图片框架*/
.KJ01 img{
    border-radius: 30px;
    height: 720px;/*框架高度*/
    max-width: 1280px;/*框架宽度*/
}/*主页图片*/
.B3{
    color: black;/*文本颜色*/
    text-align: center;/*文本水平居中*/
    font-weight: bold; /*文本信息加粗*/
    font-size: 48px;/*文本字体大小*/
    margin: auto;/*居中*/
    max-width: 600px;/*宽度*/
    background-color: rgba(255,255,255,0.3);/*半透背景色*/
    border-radius: 40px;
}/*标题文字*/
.KJ02{
    padding: 10px;
    background-color: rgba(255,255,255,0.3);/*导航条背景色*/
    border-radius: 20px;/*边框改为圆角*/
    margin: auto;
    max-width: 1280px;
    height: auto;
}/*产品展示夫级框架*/
.KJ02 h2{
    margin: auto;
    font-size: 24px;
    text-align: center;
    background: rgba(255, 255, 255,0.3);
    border-radius: 10px;
    padding: 5px;
    width: 30%;
    height: auto;
}/*产品展示主题文字*/
.KJ02-1{
    overflow-x: auto;/*水平滚动条超出范围自动生成，不超出不生成*/
    white-space: nowrap; /* 防止换行 */
    padding: 5px;
}/*产品展示子级框架*/
.KJ02-2{
    display: inline-block; /* 使图片水平排列 */
    white-space: nowrap; /* 防止图片换行 */
}/*产品展示子子级框架*/
.KJ02-1 img{
    display: inline-block; /* 使图片水平排列 */
    max-width: 400px;
    height: 400px;
    margin-right: 10px; /* 图片之间的间距 */
    border-radius: 40px;/*边框改为圆角*/
    float: none;
}/*产品展示图片*/
.B4{
    max-width: 1000px;
    height: auto;
    margin: auto;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}/*结尾文本*/
.BQ{
    text-align: center;
}
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #fa648e;
    color: white;
    border: none;
    width: 60px;
    height: 60px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 30px;
    cursor: pointer;
}/* 返回顶部按钮 */
.mail-link {
    position: fixed;
    bottom: 100px;
    right: 30px;
    background: #fa648e;
    color: white;
    text-decoration: none;
    width: 60px;
    height: 60px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 30px;
    cursor: pointer;
}/*发送邮件按钮*/
.mail-link p{
    margin: 18px auto;
}
.back-to-top:hover{
    background: #6e9cff;
}
.mail-link:hover{
    background: #6e9cff;
}
/* 手机导航样式 */
.DH01 {
    position: fixed;
    top: 0;
    left: -100%;
    width: 50%;
    height: 90%;
    color: black;
    tab-size: 36px;
    font-size: 24px;
    font-weight: bolder;
    text-align: center;
    background-color: rgba(0, 150, 255, 0.8);/*导航条背景色*/
    border-radius: 80px;
    padding: 40px 20px;
    transition: left 0.3s;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    z-index: 1000;
}
.DH02 {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    margin: auto;
    display: block;
    padding: 10px;
    width: 150px;/*行宽*/
    height: 40px;
}
.DH02 a{
    font-size: 12px;/*导航文字尺寸*/
    color: #ffffff;/*导航文字颜色*/
    display: block;/*让文字选框以外边框为准*/
}/*导航栏文字*/
.DH02 a:hover{
    background: rgba(132, 132, 132, 0.8);/*鼠标停留时的背景颜色*/
    border-radius: 20px;/*边框改为圆角*/
}/*鼠标停留时的背景颜色*/
.DH03 {
    margin: 15px 0;
    position: relative;
    width: 150px;/*行宽*/
    line-height: 40px;/*行高*/
    background-color: rgba(0, 100, 255, 1);/*导航条背景色*/
    border-radius: 20px;/*边框改为圆角*/
}
.mail-link01 {
    display: none;
}/*隐藏移动端发送邮件按钮*/
.back-to-top01 {
    display: none;
}/*隐藏移动端返回顶部按钮*/
.menu-btn{
    display: none;
}/*隐藏移动端菜单按钮*/
/* 媒体查询 */
@media (max-width: 768px) {
    .br01{
        display: none;
    }
    .sjcd{
        display: block;
    }
    .dh01 {
        display: none;
    }
    .back-to-top {
        display: none;
    }/*隐藏客户端返回顶部按钮*/
    .mail-link {
        display: none;
    }/*隐藏客户端发送邮件按钮*/
    .mail-link01 {
        display: block;
    }
    .back-to-top01 {
        display: block;
    }
    .menu-btn {
        display: block;
    }
    .B1{
        width: auto;
        height: auto;
    }/*LOGO图框架*/
    .B1 img{
        width: 40%;
        height: auto;
    }
    .B2 {
        position: absolute;
        top: 10px; /* 顶部距离 10px */
        right: 10px; /* 右侧距离 10px（实现右上角定位） */
        width: auto; /* 恢复自动宽度，避免固定尺寸限制 */
        height: auto; /* 恢复自动高度 */
        padding: 0; /* 清除多余内边距 */
    }/*社交程序*/
    .B2 img{
        width: 30px;
        height: 30px;
        border-radius: 10px;
    }/*社交程序图标*/
    .KJ01{
        height: auto;/*框架高度*/
        width: 100%;/*框架宽度*/
        margin: auto;/*位置居中*/
    }/*主页图片框架*/
    .KJ01 img{
        border-radius: 15px;
        height: 100%;/*框架高度*/
        width: 100%;/*框架宽度*/
    }/*主页图片*/
    .B3{
        color: black;/*文本颜色*/
        text-align: center;/*文本水平居中*/
        font-weight: bold; /*文本信息加粗*/
        font-size: 24px;/*文本字体大小*/
        margin: auto;/*居中*/
        width: 70%;/*宽度*/
        background-color: rgba(255,255,255,0.3);/*半透背景色*/
        border-radius: 40px;
    }/*标题文字*/
    .KJ02{
        padding: 10px;
        background-color: rgba(255,255,255,0.3);/*导航条背景色*/
        border-radius: 20px;/*边框改为圆角*/
        margin: auto;
        width: 90%;
        height: auto;
    }/*产品展示夫级框架*/
    .KJ02 h2{
        font-size: 14px;
        margin: auto;
        background: rgba(255, 255, 255,0.3);
        border-radius: 10px;
        padding: 5px;
        width: 50%;
        height: auto;
    }/*产品展示主题文字*/
    .KJ02-1::-webkit-scrollbar {
        display: none;
    }/* 谷歌/苹果隐藏滚动条 */
    .KJ02-1 img{
        display: inline-block; /* 使图片水平排列 */
        width: 100px;
        height: auto;
        margin-right: 5px; /* 图片之间的间距 */
        border-radius: 10px;/*边框改为圆角*/
        float: none;
    }/*产品展示图片*/
    .B4{
        width: 90%;
        height: auto;
        margin: auto;
        font-size: 10px;
        font-weight: bold;
        text-align: center;
    }/*末端文字*/
    .BQ{
        font-size: 10px;
        text-align: center;
    }
    .sjcd{
        position: fixed;
        bottom: 10px;
        left: 10%;
        width: 80%;
        height: 50px;
        display: flex;/* 启用 Flex 布局 */
        justify-content: space-evenly; /* 子元素水平等分间距 */
        align-items: center; /* 子元素垂直居中 */
    }
    .menu-btn {
        margin: auto 5px;
        text-align: center;/*子级对齐方式水平居中*/
        background-color: rgb(250, 100, 142);/*导航条背景色*/
        border: none;
        width: 100px;
        border-radius: 5px;
        cursor: pointer;
    }/*移动端菜单按钮*/
    .menu-btn:hover{
        background-color: #64c8fa;
    }
    .menu-btn img{
        width: 40px;
        height: auto;
    }
    .mail-link01 {
        margin: auto 5px;
        text-align: center;/*子级对齐方式水平居中*/
        background-color: rgb(250, 100, 142);/*导航条背景色*/
        border: none;
        width: 100px;
        border-radius: 5px;
        cursor: pointer;
    }/*移动端发送邮件按钮*/
    .mail-link01:hover{
        background-color: #64c8fa;
    }
    .mail-link01 img{
        width: 40px;
        height: auto;
    }
    .back-to-top01 {
        margin: auto 5px;
        text-align: center;/*子级对齐方式水平居中*/
        background-color: rgb(250, 100, 142);/*导航条背景色*/
        border: none;
        width: 100px;
        border-radius: 5px;
        cursor: pointer;
    }/*移动端返回顶部按钮*/
    .back-to-top01:hover{
        background-color: #64c8fa;
    }
    .back-to-top01 img{
        width: 40px;
        height: auto;
    }
}