/* styles.css */

/* 全局设置，消除默认的内边距和外边距，并设置盒子模型 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    color: #000000;
    text-decoration: none;
}

body, html {
    height: 1255px;
    font-family: Arial, sans-serif;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* 页脚内容左对齐 */
    padding: 20px;
    padding-left: 0px; /* 调整下载按钮左边距 */
}

.iframe1 {
    width: 100%;
    height: 100%;
    display: block;
}

.iframe2 {
    width: 100%;
    height: 100%;
    display: none;
}

main {
    width: 100%;
    text-align: left; /* 调整字体左对齐 */
}

.contract_concent {
    margin: 0 auto;
    width: calc(100% - 200px);
    height: 786px;
}

iframe {
    border: none !important;
}

/* 设置html和body标签的高度和字体 */

/* 容器类，设置背景图和布局方式 */
.container {
    position: relative;
    /* background: url('./officialWebsite_bg.png') no-repeat center 0; */
    background-color: #ffffff;
    background-size: 100% 900px; /* 背景图自适应拉伸 */
    height: 100%;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    align-items: center;
    color: white;
    padding: 20px;
}

/* 页眉样式，包含Logo，左对齐 */
header {
    width: 100%;
    padding: 20px;
    
}
.nav_list {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.list {
    display: flex; 
}

.agreement_list {
    margin-top: 10px;
    margin-left: 155px;
    display: flex;
    color: #000000;
}

.agreement_list_item {
    padding: 20px;
    cursor: pointer;
}

.itemActive {
    border-bottom: 5px solid #f4da06;
    font-weight: 700;
}

.message {
    margin-bottom: 15px;
    font-size: 16px;
    color: #9FA2A6;
}

.list .item {
    color: black;
    position: relative;
    margin-right: 50px;
}

.list .active:before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -5px;
    width: 18px;
    height: 4px; /* 下横线的粗细 */
    background-color: black; /* 下横线的颜色 */
}

.logo {
    width: 139.78px; /* 调整Logo宽度 */
    margin-left: 155px; /* 调整Logo左边距 */
}

h1, h2, .additional-info {
    text-align: left; /* 确保PC端字体左对齐 */
    margin-left: 170px; /* 调整文字左边距 */
}

h1 {
    font-size: 4.5em; /* 调整字体大小 */
    margin-top: 50px; /* 调整PC端标题的上间距 */
    margin-bottom: 10px; /* 调整PC端标题的下间距 */
}

h2 {
    font-size: 2.6em; /* 调整字体大小 */
    margin-top: 10px; /* 调整PC端副标题的上间距 */
    margin-bottom: 10px; /* 调整PC端副标题的下间距 */
}

.additional-info {
    font-size: 1.2em; /* 调整字体大小 */
    line-height: 1.5;
    margin-top: 20px; /* 调整PC端标题的上间距 */
    margin-bottom: 20px; /* 调整PC端附加信息的下间距 */
}

.additional-info .officialWebsite_tooltip {
    display: inline-block;
    width: 356px;
    height: 58px;
}

/* 动态图片样式，设置动画效果 */
.dynamic-image {
    width: 800px; /* 调整动态图片宽度 */
    position: absolute;
    right: 150px; /* 调整水平位置 */
    top: 50%; /* 调整垂直位置，使其居中 */
    transform: translateY(-50%); /* 使图片垂直居中 */
    animation: sway 6s infinite ease-in-out;
}

/* 动画关键帧，设置较大的左右晃动效果 */
@keyframes sway {
    0%, 100% { transform: translateY(-50%) rotate(0deg); }
    50% { transform: translateY(-50%) rotate(3deg); }
}

.download-button img {
    width: 230px; /* 调整下载按钮宽度 */
    margin-right: 10px; /* 调整下载按钮之间的间距 */
}

/* 版权信息样式 */
.copyright {
    text-align: center;
    font-size: 0.8em;
    margin-top: 10px;
    width: 100%; /* 确保版权信息占据整个页脚的宽度 */
    color: #000000;
}