/* 设置整个页面的基础样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

.parent-container {
    background-color: #d2d3d3;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    background-color: #d2d3d3;
}

.home-container {
    display: flex;
    width: 70%;
    /* 或者具体像素值，如 800px */
    /*                max-width: 1200px;*/
    /*                border: 1px solid #ccc;*/
    overflow: hidden;
    justify-content: center;
    align-items: center;
}

.title-box {
    padding: 20px;
    text-align: center;
    color: white;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中，如果需要的话 */
    gap: 10px;
    /* 子div之间的间距 */
}

.title-child {
    display: flex;
    flex-wrap: nowrap;
    /* 强制所有项目保持在一行 */
    overflow-x: auto;
    /* 如果内容超出屏幕宽度，则水平滚动 */
}

/* 分配宽度比例 */
.box1 {
    /* 相当于 50% */
    /* flex: 2; 
    text-align: left; */
}

.box2 {
    flex: 1;
    /* 相当于 25% */
    color: black;
}

.box3 {
    flex: 1;
    /* 剩余的 25% */
}

.header-li {
    margin-left: 10px;
    font-size: 0.7rem;
}

.header-image {
    height: 20px;
}

.font-small {
    
    font-size: 0.7rem;
}

/* 容器样式 */
.scrolling-text-container {
    overflow: hidden;
    white-space: nowrap;
    /*                border: 1px solid #ccc;*/
    padding: 10px;
    /* background-color: #2c2c2c; */
    text-align: center;
}

/* 滚动文本的基本样式 */
.scrolling-text {
    color: white;
    font-size: 1.2rem;
    display: inline-block;
    padding-left: 100%;
    /* 初始位置在容器外右侧 */
    animation: scroll-left 15s linear infinite;
}

/* 定义动画 */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.log_font {
    margin-left: 3rem;
    color: #1e3d5c;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
}

.head_menu {
    margin-right: 1rem;
    border: 1px solid black;
    padding: 0 1px 0 1px;
    cursor: pointer;
    flex-shrink: 0;
}

.vip_wechat {
    background-color: #3468aa;
    border-radius: 20px 20px 20px 20px;
    padding: 0.5rem 8rem 0.5rem 1rem;
    flex-shrink: 0;
}

.responsive-bg {
    width: 100%;
    /* 或者指定具体的宽度 */
    height: 100vh;
    background-image: url("../img/background.jpg");
    /* 替换为你的图片路径 */
    /* 让背景图片覆盖整个 div，保持图片比例 */
    background-size: cover;
    background-position: center bottom;
    /* 图片居中显示 */
    background-repeat: no-repeat;
    /* 防止图片重复 */
    overflow: auto;
}

.font-container {
    text-align: center;
}

.free {
    text-align: center;
    font-size: 4rem;
    letter-spacing: 2rem;
    color: white;
    padding-top: 8rem;
}

.design {
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 0.3rem;
    color: white;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.account {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    text-align: center;
    cursor: pointer;
}

.sign {
    font-size: 1.5rem;
    letter-spacing: 1rem;
    color: white;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: #222130;
    border-radius: 20px 20px 20px 20px;
}

.sign:hover {
    background-color: #ff9939;
    /* 你可以根据需要更改颜色 */
}

.login_cont {
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中，如果需要的话 */
    gap: 10px;
    /* 子div之间的间距 */
    text-align: center;
    color: white;
    cursor: pointer;
}

.pay_div {
    background-color: #222130;
    border-radius: 20px 20px 20px 20px;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.font_change {
    color: white;
}

.font_change:hover {
    color: #ff9939;
}

.pay_sty {
    cursor: pointer;
}

.pay_sty:hover {
    color: #ff9939;
}

.pay_div div {
    padding-left: 1rem;
}

.count_us {
    cursor: pointer;
    text-decoration: underline;
    color: white;
}

.count_us:hover {
    color: #ff0000;
}

.group-pic {
    position: relative;
    display: flex;
    width: 100%;
    height: 700px;
}

.left-div,
.right-div {
    flex: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 左边的 div 设置为不规则四边形 */
.left-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    /* 占据屏幕的50%宽度 */
    height: 100%;
    /* 覆盖整个容器的高度 */
    background-image: url("../img/livingroom.png");
    /* 替换为你的图片路径 */
    clip-path: polygon(0% 10%, 90% 30%, 75% 100%, 0% 100%);
}

/* 右边的 div 设置为另一个不规则四边形 */
.right-div {
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    /* 占据屏幕的70%宽度 */
    height: 100%;
    /* 覆盖整个容器的高度 */
    background-image: url("../img/55859.jpg");
    /* 替换为你的图片路径 */
    clip-path: polygon(20% 29.5%, 100% 55%, 100% 100%, 10% 101%);
}



.pic_font {
    font-size: 3rem;
    text-align: left;
    margin-top: 20rem;
    margin-left: 25rem;
    color: white;
}

.pic_cont {
    margin-left: 25rem;
    margin-top: 1rem;
    width: 50%;
    color: #a2a2a2;
}

.pic_tail {
    margin-left: 25rem;
    margin-top: 1rem;
    color: #a2a2a2;
}

.footer_cont {
    background-color: #0d1107;
    text-align: center;
    color: white;
    font-size: 1rem;
}

.order-list {
    color: #757575;
}

.order-list table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
    text-align: center;
}

.order-list table th,
td {
    padding: 12px;
    border: 1px solid #ddd;
}

.order-list table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

/* 添加媒体查询，针对移动设备调整样式 */

@media (min-width: 768px) and (max-width: 991px) {

    .pic_font,
    .pic_cont,
    .pic_tail {
        margin-left: 10rem;
        /* 减少左边距 */
        margin-right: 1rem;
        /* 添加右边距 */
        width: 65%;
    }

    .pic_font {
        margin-top: 18rem;
        /* 调整顶部边距 */
    }

    /* 隐藏登录和注册按钮 */
    .text-end {
        display: none;
    }

    .header-li {
        margin-left: 0;
    font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    .right-div {
        width: 100%;
        /* 在移动设备上占据整个宽度 */
        clip-path: none;
        /* 移除不规则形状 */
        position: relative;
        /* 改为相对定位 */
        right: auto;
        /* 取消右对齐 */
    }

    .pic_font,
    .pic_cont,
    .pic_tail {
        margin-left: 1rem;
        /* 减少左边距 */
        margin-right: 1rem;
        /* 添加右边距 */
    }

    .pic_font {
        margin-top: 2rem;
        /* 调整顶部边距 */
    }

    /* 隐藏登录和注册按钮 */
    .text-end {
        display: none;
    }

    .header-li {
        margin-left: 0;
    font-size: 0.7rem;
    }
}