body,
dl,
dd,
ul,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form,
header,
section,
article,
footer {
    margin: 0;
}

body,
button,
input,
select,
textarea {
    font: 12px/1.5 tahoma, "\5FAE\8F6F\96C5\9ED1", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
}

em,
b {
    font-style: normal;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

img {
    border: 0;
}

html {
    width: 100%;
}

body {
    background: #fafafd;
    width: 100%;
    margin: 0;
    padding: 0;
}

button,
input,
select,
textarea {
    font-size: 100%;
    outline: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th,
ul,
ol {
    padding: 0;
}

ol,
ul {
    list-style: none;
}

.c:before,
.c:after {
    content: "";
    display: table;
}

.c:after {
    clear: both;
}

.hidden {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
}

.pr {
    position: relative;
}

.overh {
    overflow: hidden;
}

.wrap_h1 {
    display: none;
    visibility: hidden;
}

#afooter {
    padding: 30px 0;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    background-color: #000;
    color: #c0c0c0;
}

#afooter a,
#afooter a:hover {
    color: #c0c0c0;
    text-decoration: none;
}

.wrap {
  width: 1920px;
  /* height: 4220px; */
  height: 5000px;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/bg.jpg);
  background-size: cover;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.header {
  position: relative;
  width: 100%;
  height: 448px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.logo {
  width: 211px;
  height: 85px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/logo.png) no-repeat center center / 100% 100%;
  position: absolute;
  top: 36px;
  left: 168px;
}

.header-title {
  width: 696px;
  height: 174px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/title.png) no-repeat center center / 100% 100%;
  margin-top: 110px;
}

.header-mintitle {
  width: 241px;
  height: 22px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/min-title.png) no-repeat center center / 100% 100%;
  margin-top: 34px;
}

.header-text p {
  font-size: 18px;
  color: #674723;
  text-align: center;
  margin-top: 46px; 
}

.part1 {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 1197px;
  height: 856px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/part1-pic.png) no-repeat center center / 100% auto;
  flex: none;
}
.part1 > * {
  display: none !important;
}

.part1-title {
  width: 393px;
  height: 55px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/part1-title.png) no-repeat center center / 100% 100%;
  margin-top: 49px;
}

.part1-content {
  width: 93%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 14px;
}

.part1-left {
  width: 257px;
  height: 547px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/part1-left.png) no-repeat center center / 100% 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.part1-right {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 547px;
}

.part1-right1 {
  width: 676px;
  height: 295px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/part1-right1.png) no-repeat center center / 100% 100%;
  margin-top: 16px;
}

.part1-right2 {
  width: 674px;
  height: 221px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/part1-right2.png) no-repeat center center / 100% 100%;
  margin-top: 12px;
}

.myinfo {
  width: 102px;
  height: 24px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/myinfo.png) no-repeat center center / 100% 100%;
  margin-top: 38px;
}

.hero1 {
  width: 126px;
  height: 161px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/hero.png) no-repeat center center / 100% 100%;
  margin-top: 144px;
  margin-left: 16px;
}

.myname p {
  font-size: 15px;
  color: #d6c592;
  text-align: center;
  text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000;
  margin-top: 68px;
}

.occupation p {
  font-size: 15px;
  color: #a0844b;
  text-align: center;
  text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000;
}

.part1-right1,.part1-right2 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.right1-title {
  width: 135px;
  height: 24px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/myteam.png) no-repeat center center / 100% 100%;
  margin-top: 16px;
}

.right2-title {
  width: 100px;
  height: 24px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/friendinfo.png) no-repeat center center / 100% 100%;
  margin-top: 12px;
}

.right1-content {
  width: 650px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 14px;
}

.content1,.content2,.content3 {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.content2-img,.content3-img {
  width: 199px;
  height: 172px;
}

.content1-img {
  width: 206px;
  height: 178px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/part1-img1.png) no-repeat center center / 100% 100%;
  position: relative;
}

.content1-img p {
  font-size: 12px;
  text-align: center;
  color: #d6c592;
  position: absolute;
  top: 154px;
  left: 50%;
  transform: translate(-50%,-50%);
}

.content1-text,.content2-text,.content3-text {
  width: 69px;
  height: 26px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/btn.png) no-repeat center center / 100% 100%;
  margin-top: 14px;
}

.content2-text,.content3-text {
  margin-top: 17px;
}

.content1-text p,.content2-text p,.content3-text p {
  font-size: 15px;
  text-align: center;
  color: #96f13d;
  line-height: 26px;
  text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000;
}

.content2-text p,.content3-text p {
  color: #b7b7b7;
}

.content2-img {
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/part1-img2.png) no-repeat center center / 100% 100%;
}

.content3-img {
  position: relative;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/part1-img3.png) no-repeat center center / 100% 100%;
}

.add {
  width: 55px;
  height: 55px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/add.png) no-repeat center center / 100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.right2-content {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.right2-background {
  width: 458px;
  height: 34px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/right2-text.png) no-repeat center center / 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 16px;
}

.qq {
  display: inline-block;
  width: 53px;
  height: 17px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/qq.png) no-repeat center center / 100% 100%;
  margin-right: 4px;
}

.name {
  display: inline-block;
  width: 87px;
  height: 21px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/name.png) no-repeat center center / 100% 100%;
  margin-right: 4px;
}

.right2-background p {
  font-size: 16px;
  color: #5c3d0f;
  text-align: center;
  display: flex;
  align-items: center;
}

.change, .last-time {
  margin-top: 7px;
}

.change span, .last-time span {
  font-size: 16px;
  color: #5c3d0f;
  text-align: center;
  font-weight: 600;
}

.change p, .last-time p {
  font-size: 16px;
  color: #5c3d0f;
  text-align: center;
}

.open {
  width: 212px;
  height: 41px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/btn1.png) no-repeat center center / 100% 100%;
  margin-top: 8px;
}

.part2 {
  width: 1018px;
  /* height: 2541px; */
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/part2.png) no-repeat center center / 100% 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 36px;
}

.part2-title {
  width: 393px;
  height: 57px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/part2-title.png) no-repeat center center / 100% 100%;
  margin-top: 50px;
}

.part2-content {
  width: 920px;
  /* height: 2331px; */
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/part2-content.png) no-repeat center center / 100% 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 24px;
  margin-bottom: 74px;
}

.part2-text {
  width: 824px;
  margin-top: 36px;
}

.part2-text p {
  font-size: 16px;
  color: #432c14;
  text-align: center;
}

.table-container1,.table-container2,.table-container3,.table-container4 {
  width: 824px;
  margin-top: 24px;
}

.table-container4 {
  margin-bottom: 58px;
}

.table-container1 table {
  width: 100%;
}

.table-container1 th,.table-container1 td {
  padding: 6px;
  text-align: center;
  border: 1px solid #6e4d46;
}

.table-container1 td {
  padding: 26px 8px;
}

.table-container1 th {
  background-color: #6e4d46;
  color: #f4ce97;
  font-size: 16px;
}

.table-container1 th:first-child {
  border-right: 1px solid #d5af75; 
}

.table-container1 th:nth-child(2) {
  border-right: 1px solid #d5af75; 
}

.table-container1 td {
  background-color: rgba(0, 0, 0, 0);
  color: #432c14;
  font-size: 16px;
  line-height: 18px;
}

.table-container1 td:first-child {
  border-left: 1px solid #937653;
  width: 200px;
}

.table-container1 td:last-child {
  border-right: 1px solid #937653;
  width: 220px;
}

.table-container1 tr:last-child td {
  border-bottom: 1px solid #937653;
}

.part2-text {
  margin-top: 22px;
}

.table-container2 th,.table-container2 td {
  padding: 6px;
  text-align: center;
}

.table-container2 td {
  padding: 0;
}

.table-container2 th {
  background-color: #6e4d46;
  color: #f4ce97;
  font-size: 16px;
}

.table-container2 th:first-child {
  border-right: 1px solid #d5af75; 
  width: 160px;
}

.table-container2 th:nth-child(2) {
  border-right: 1px solid #d5af75; 
  width: 130px;
}

.table-container2 th:nth-child(3) {
  border-right: 1px solid #d5af75; 
  width: 170px;
}

.table-container2 tbody tr:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0);
  border-bottom: 1px solid #674d31;
}

.table-container2 tbody tr:nth-child(even) {
  background-color: rgba(216, 199, 165, 0.5);
  border-bottom: 1px solid #674d31;
}

.table-container2 tbody tr:last-child {
  border-bottom: 1px solid #886a45;
}

.table-container2 td {
  color: #432c14;
  font-size: 16px;
  line-height: 18px;
}

.table-container2 tbody tr td:first-child,.table-container2 tbody tr td:nth-child(2),.table-container2 tbody tr td:nth-child(3) {
  padding: 10px 0;
  border-right: 1px solid #341e0c;
}

.table-container2 tbody tr td:first-child {
  border-left: 1px solid #886a45;
}

.table-container2 tbody tr td:last-child {
  border-right: 1px solid #886a45;
}

.table-container2 tbody tr td:last-child {
  padding: 4px 24px;
}

.table-container2 thead tr {
  border:1px solid #6e4d46;
}

.table-container3 th,.table-container3 td {
  padding: 6px;
  text-align: center;
}

.table-container3 td {
  padding: 0;
}

.table-container3 th {
  background-color: #6e4d46;
  color: #f4ce97;
  font-size: 16px;
}

.table-container3 th:first-child {
  border-right: 1px solid #d5af75; 
  width: 160px;
}

.table-container3 th:nth-child(2) {
  border-right: 1px solid #d5af75; 
  width: 130px;
}

.table-container3 th:nth-child(3) {
  border-right: 1px solid #d5af75; 
  width: 170px;
}

.table-container3 tbody tr:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0);
  border-bottom: 1px solid #674d31;
}

.table-container3 tbody tr:nth-child(even) {
  background-color: rgba(216, 199, 165, 0.5);
  border-bottom: 1px solid #674d31;
}

.table-container3 tbody tr:last-child {
  border-bottom: 1px solid #886a45;
}

.table-container3 td {
  color: #432c14;
  font-size: 16px;
  line-height: 18px;
}

.table-container3 tbody tr td:first-child,.table-container3 tbody tr td:nth-child(2),.table-container3 tbody tr td:nth-child(3) {
  padding: 9px 0;
  border-right: 1px solid #341e0c;
}

.table-container3 tbody tr td:first-child {
  border-left: 1px solid #886a45;
}

.table-container3 tbody tr td:last-child {
  border-right: 1px solid #886a45;
}

.table-container3 tbody tr td:last-child {
  padding: 12px;
}

.table-container3 thead tr {
  border:1px solid #6e4d46;
}

.table-container4 th,.table-container4 td {
  padding: 6px;
  text-align: center;
}

.table-container4 td {
  padding: 0;
}

.table-container4 th {
  background-color: #6e4d46;
  color: #f4ce97;
  font-size: 16px;
}

.table-container4 th:first-child {
  border-right: 1px solid #d5af75; 
  width: 160px;
}

.table-container4 th:nth-child(2) {
  border-right: 1px solid #d5af75; 
  width: 130px;
}

.table-container4 th:nth-child(3) {
  border-right: 1px solid #d5af75; 
  width: 170px;
}

.table-container4 tbody tr:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0);
  border-bottom: 1px solid #674d31;
}

.table-container4 tbody tr:nth-child(even) {
  background-color: rgba(216, 199, 165, 0.5);
  border-bottom: 1px solid #674d31;
}

.table-container4 tbody tr:last-child {
  border-bottom: 1px solid #886a45;
}

.table-container4 td {
  color: #432c14;
  font-size: 16px;
  line-height: 18px;
}

.table-container4 tbody tr td:first-child,.table-container4 tbody tr td:nth-child(2),.table-container4 tbody tr td:nth-child(3) {
  padding: 4px 0;
  border-right: 1px solid #341e0c;
}

.table-container4 tbody tr td:first-child {
  border-left: 1px solid #886a45;
}

.table-container4 tbody tr td:last-child {
  border-right: 1px solid #886a45;
}

.table-container4 tbody tr td:last-child {
  padding: 7px 4px;
}

.table-container4 thead tr {
  border:1px solid #6e4d46;
}

.part3 {
  width: 1018px;
  height: 211px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/part3.png) no-repeat center center / 100% 100%;
  margin-top: 40px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.part3-title {
  width: 393px;
  height: 57px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20250612sociali/part3-title.png) no-repeat center center / 100% 100%;
  margin-top: 40px;
}

.part3-text p {
  font-size: 16px;
  color: #fcd7a3;
  text-align: center;
  margin-top: 20px;
}

.footer p {
  font-size: 16px;
  color: #fcd7a3;
  text-align: center;
  margin-top: 20px;
}