html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    background-color: #edfebc;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: 20px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #333;
}

.map {
    display: none;
    margin: 10px 0;
    margin-top: 0;
    margin-left: 20px;
}

.button-right, .button-copy {
    background-color: yellow; /* 设置按钮背景颜色为黄色 */
    border: 1px solid yellow;
    color: white; /* 设置按钮文字颜色为白色 */
    border-radius: 10px; /* 设置按钮边角为圆角，半径为10px */
    margin-left: 10px; /* 设置按钮与其他元素的左边距为10px */
}
@media screen and (min-width: 600px) {
    .button-right {
        display: none;
    }
}

.button-right:hover, .button-copy:hover {
    background-color: #ffcc00;
    cursor: pointer;
}

.tabs {
    list-style-type: none;
    padding: 0;
    margin: 20px 0 0;
    display: flex;
}

.tabs li {
    cursor: pointer;
    padding: 10px 20px;
    background-color: #eee;
    border-radius: 4px 4px 0 0;
    margin-right: 5px;
    color: #555;
}

@media (max-width: 600px) {
    .tabs {
        display: flex;
        flex-wrap: wrap; /* 允许标签换行 */
        justify-content: space-between; /* 在标签之间添加间隔 */
    }
    
    .tabs li {
        flex: 0 0 calc(50% - 10px); /* 设置每个标签项的基础宽度为容器的50%减去间隔的一半 */
        box-sizing: border-box; /* 确保宽度包括内边距和边框 */
        margin-bottom: 20px; /* 如果需要，可以添加底部间隔 */
        text-align: center; /* 文字水平居中 */
        display: flex; /* 使用flex布局 */
        align-items: center; /* 内容垂直居中 */
        justify-content: center; /* 内容水平居中 */
    }
}

.tabs li.active {
    background-color: #fff;
    border-bottom: 2px solid yellow;
    color: yellow;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* h2居中，行间距5px */
h2 {
    text-align: center;
    line-height: 50px;
}

/* p的字体设置为18px，段落内的行间距为3px */
p {
    font-size: 18px;
    line-height: 30px;
}

.ps-text {
    font-size: 18px;
    line-height: 30px;
    color: #333;
}

.signature {
    width: 300px;
    margin-left: auto;
    margin-right: 0;
    margin-top: 50px;
}
.signature p {
    text-align: center;
}
@media screen and (max-width: 600px) {
    .signature {
        width: 200px;
        padding: 0;
    }
}

.li-huiwu {
    font-size: 18px;
    line-height: 30px;
    list-style-type: disc;
    list-style-position: inside;
    color: initial; /* 将文字颜色设置回默认 */
}
.li-huiwu::marker {
    color: yellow; /* 仅将项目符号的颜色设置为黄色 */
}
.li-tixing {
    font-size: 18px;
    line-height: 30px;
    list-style-type: decimal; /* 从 disc 改为 decimal 以显示序号 */
    list-style-position: outside;
    color: initial; /* 将文字颜色设置回默认 */
    margin-bottom: 20px;
    margin-left: -20px;
}
.li-tixing::marker {
    color: yellow; /* 如果您想要序号的颜色为黄色，保留此规则 */
}
ul.yiwu li {
    font-size: 18px; /* 设置字体大小 */
    line-height: 30px; /* 设置行高 */
    list-style-type: decimal; /* 设置列表项前的标记类型为数字 */
    list-style-position: outside; /* 设置标记位置在外部 */
    color: initial; /* 设置文字颜色为默认 */
    margin-bottom: 20px; /* 设置下边距 */
    margin-left: -20px; /* 设置左边距，可能需要调整以适应具体布局 */
}
ul.yiwu li::marker {
    color: yellow; /* 设置列表项标记（即数字）的颜色为黄色 */
}
ul.anquan li {
    font-size: 18px; /* 设置字体大小 */
    line-height: 30px; /* 设置行高 */
    list-style-type: decimal; /* 设置列表项前的标记类型为数字 */
    list-style-position: outside; /* 设置标记位置在外部 */
    color: initial; /* 设置文字颜色为默认 */
    margin-bottom: 20px; /* 设置下边距 */
    margin-left: -20px; /* 设置左边距，可能需要调整以适应具体布局 */
}
ul.anquan li::marker {
    color: yellow; /* 设置列表项标记（即数字）的颜色为黄色 */
}
ul.anquan {
    counter-reset: list-item 9; /* 初始化计数器为9，因为它会在第一个元素处自增至10 */
}

ul.anquan li {
    counter-increment: list-item; /* 每个li元素出现时，计数器自增 */
    list-style-type: none; /* 移除默认的列表样式 */
}

ul.anquan li::before {
    content: counter(list-item) ". "; /* 在每个li元素前添加计数器的值和点 */
    margin-right: 5px; /* 添加右边距以分隔数字和文本 */
}

ul.baoxiao li {
    font-size: 18px; /* 设置字体大小 */
    line-height: 30px; /* 设置行高 */
    list-style-type: decimal; /* 设置列表项前的标记类型为数字 */
    list-style-position: outside; /* 设置标记位置在外部 */
    color: initial; /* 设置文字颜色为默认 */
    margin-bottom: 20px; /* 设置下边距 */
    margin-left: -20px; /* 设置左边距，可能需要调整以适应具体布局 */
}
ul.baoxiao li::marker {
    color: yellow; /* 设置列表项标记（即数字）的颜色为黄色 */
}
h4 {
    font-size: 18px; /* 设置字体大小 */
}
h5 {
    font-size: 17px; /* 设置字体大小 */
}
.lianxiren p {
    line-height: 30px; /* 设置行高 */
    margin: 0; /* 移除默认的外边距 */
}

/* 为table-container、table、tr、th、td设置美观的样式，以黄色为边框和标题行背景颜色 */
.table-container {
    margin: 20px 0;
}
table {
    width: 100%;
    border-collapse: collapse;
}
@media screen and (max-width: 600px) {
    .table-container {
        margin: 20px 0;
        width: 100%;
        overflow-x: auto; /* 添加此行 */
    }
    table {
        width: 300%;
        display: block;
    }
}
.tianqi {
    width: 60%;
    margin-left: 20%;
}
@media screen and (max-width: 600px) {
    .tianqi {
        width: 100%;
        display: table;
        margin-left: 0;
    }
    #div-tianqi {
        width: 100%;
    }
}
tr {
    border-bottom: 1px solid yellow;
}
th, td {
    padding: 10px;
    border: 1px solid yellow;
}
th {
    background-color: yellow;
    color: #333;
}

a {
    color: #337ab7;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
footer {
    margin-top: 50px;
    color: #808080; /* 文字颜色 */
    text-align: center; /* 文字居中 */
}
a {
    color: #FFFF00;
}
#qrimg {
    position: fixed;
    right: 20px;
    top: 20px;
    width: 110px;
}
.img-qr {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    margin-bottom: 2px;
    display: block;
}
.img-p {
    margin: 0 auto; /* 水平居中 */
    margin-bottom: 7px;
    font-size: 12px;
    color: yellow;
    display: block; /* 使margin: auto生效，对于非块级元素 */
    text-align: center; /* 文本居中 */
}
@media (max-width: 1200px) {
    #qrimg{
        display: none;
    }
}
#qrimg-m {
    margin: 20px;
    padding-left: 15px;
    padding-right: 15px;
    width: 95%; /* 确保它横跨整个视口的宽度 */
    display: flex; /* 使用 flex 布局使子元素横向排列 */
    justify-content: center; /* 子元素居中对齐 */
}
@media (max-width: 1200px) {
    #qrimg-m {
        max-width: 100%;
        width: auto; /* 确保宽度会自适应 */
        box-sizing: border-box; /* 确保padding和border不会使元素宽度超出container */
        padding: 0;
        margin-left: 5px;
        margin-right: 5px;
    }
}
.img-qr-m {
    margin: 10px; /* 在图片之间添加一些间隔 */
}
@media (min-width: 1200px) {
    #qrimg-m{
        display: none;
    }
}

@media (min-width: 1200px) {
    #yijiayi {
        position: fixed;
        left: -30px;
        top: 20px;
    }
    .img-yijiayi {
        width: 240px;
        margin: 0 auto;
        margin-bottom: 2px;
        display: block;
    }
}
@media (max-width: 1200px) {
    .img-yijiayi {
        width: 300px;
        margin: 0 auto;
        margin-bottom: 2px;
        display: block;
    }
}

/* 设置手机浏览器地址栏颜色 */
@media (prefers-color-scheme: light) {
    /* light mode */
    /* 设置为黄色 */
    :root {
        --browser-address-bar-color: #FFD700;
    }
}

/* 兼容 dark mode */
@media (prefers-color-scheme: dark) {
    /* dark mode */
    /* 设置为黄色 */
    :root {
        --browser-address-bar-color: #FFD700;
    }
}

.back-to-top {
    max-width: 800px;
    margin: 10px auto;
    text-align: right;
}