* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "PingFang SC";
}

html,
body {
  height: 100%;
  -webkit-touch-callout: none;
  user-select: none;
}

body {
  -webkit-text-size-adjust: none;
  overflow-x: hidden;
}

.img-box img {
  width: 100%;
  display: block;
}

.main {
  width: 100vw;
  height: 6600rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url("./img/bg1.png") no-repeat center center/100% 100%;
  padding-top: 200rem;
}
.main.main-bg {
  height: 6824rem;
  background: url("./img/bg2.png") no-repeat center center/100% 100%;
}

.head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 156rem;
  background: linear-gradient(to left, rgba(60, 39, 71, 0.7), rgba(14, 28, 28, 0.7));
}
.head .left-box {
  display: flex;
  align-items: center;
  height: 58rem;
}
.head .left-box .iconText {
  width: 151rem;
  height: 43rem;
  background: url("./img/logo_text.png") no-repeat center center/100% 100%;
}
.head .right-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 58rem;
  cursor: pointer;
}
.head .right-box .tab1 {
  width: 115rem;
  height: 40rem;
  background: url("./img/tab1.png") no-repeat center center/100% 100%;
  margin-right: 40rem;
}
.head .right-box .tab1.active {
  background: url("./img/tab1_active.png") no-repeat center center/100% 100%;
}
.head .right-box .tab2 {
  width: 157rem;
  height: 40rem;
  background: url("./img/tab2.png") no-repeat center center/100% 100%;
  margin-right: 30rem;
}
.head .right-box .tab2.active {
  background: url("./img/tab2_active.png") no-repeat center center/100% 100%;
}
.head .right-box .tab3 {
  width: 145rem;
  height: 40rem;
  background: url("./img/tab3.png") no-repeat center center/100% 100%;
  margin-right: 20rem;
}
.head .right-box .tab3.active {
  background: url("./img/tab3_active.png") no-repeat center center/100% 100%;
}
.head .right-box .tab4 {
  width: 367rem;
  height: 40rem;
  background: url("./img/tab4.png") no-repeat center center/100% 100%;
  margin-right: 20rem;
}
.head .right-box .tab4.active {
  background: url("./img/tab4_active.png") no-repeat center center/100% 100%;
}
.head .right-box .logo {
  width: 58rem;
  height: 58rem;
  background: url("./img/logo.png") no-repeat center center/100% 100%;
}

.tab-bg6 {
  margin-top: 200rem;
  width: 1920rem;
  height: 390rem;
  background: url("./img/tab1_6.png") no-repeat center center/100% 100%;
  position: relative;
  cursor: pointer;
}
.tab-bg6 .privacy-agreement {
  width: 720rem;
  height: 290rem;
  position: absolute;
  top: 120rem;
  left: 160rem;
}
.tab-bg6 .user-terms {
  width: 720rem;
  height: 290rem;
  position: absolute;
  top: 120rem;
  left: 1040rem;
}

.tab1-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tab1-container .tab1-bg1 {
  width: 1569rem;
  height: 850rem;
  background: url("./img/tab1_1.png") no-repeat center center/100% 100%;
}
.tab1-container .tab1-bg2 {
  margin-top: 500rem;
  width: 1425rem;
  height: 547rem;
  background: url("./img/tab1_2.png") no-repeat center center/100% 100%;
}
.tab1-container .tab1-bg3 {
  margin-top: 400rem;
  width: 1564rem;
  height: 958rem;
  background: url("./img/tab1_3.png") no-repeat center center/100% 100%;
}
.tab1-container .tab1-bg4 {
  margin-top: 350rem;
  width: 1564rem;
  height: 968rem;
  background: url("./img/tab1_4.png") no-repeat center center/100% 100%;
}
.tab1-container .tab1-bg5 {
  margin-top: 300rem;
  width: 1557rem;
  height: 630rem;
  background: url("./img/tab1_5.png") no-repeat center center/100% 100%;
}

.tab2-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  display: none;
}
.tab2-container .tab2-bg1 {
  width: 1564rem;
  height: 989rem;
  background: url("./img/tab2_1.png") no-repeat center center/100% 100%;
}
.tab2-container .tab2-bg2 {
  margin-top: 200rem;
  width: 1564rem;
  height: 946rem;
  background: url("./img/tab2_2.png") no-repeat center center/100% 100%;
}
.tab2-container .tab2-bg3 {
  margin-top: 100rem;
  width: 1564rem;
  height: 1005rem;
  background: url("./img/tab2_3.png") no-repeat center center/100% 100%;
}
.tab2-container .tab2-bg4 {
  margin-top: 150rem;
  width: 1564rem;
  height: 946rem;
  background: url("./img/tab2_4.png") no-repeat center center/100% 100%;
}
.tab2-container .tab2-bg5 {
  margin-top: 100rem;
  width: 1564rem;
  height: 1059rem;
  background: url("./img/tab2_5.png") no-repeat center center/100% 100%;
}

.tab3-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  display: none;
}
.tab3-container .tab3-bg1 {
  width: 1422rem;
  height: 1153rem;
  background: url("./img/tab3_1.png") no-repeat center center/100% 100%;
}
.tab3-container .tab3-bg2 {
  margin-top: 300rem;
  width: 1422rem;
  height: 632rem;
  background: url("./img/tab3_2.png") no-repeat center center/100% 100%;
}
.tab3-container .tab3-bg3 {
  margin-top: 620rem;
  width: 1422rem;
  height: 584rem;
  background: url("./img/tab3_3.png") no-repeat center center/100% 100%;
}
.tab3-container .tab3-bg4 {
  margin-top: 620rem;
  width: 1130rem;
  height: 571rem;
  background: url("./img/tab3_4.png") no-repeat center center/100% 100%;
}
.tab3-container .tab3-bg5 {
  margin-top: 620rem;
  width: 1400rem;
  height: 668rem;
  background: url("./img/tab3_5.png") no-repeat center center/100% 100%;
}

.tab4-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  display: none;
}
.tab4-container .tab4-bg1 {
  width: 1920rem;
  height: 1120rem;
  background: url("./img/tab4_1.png") no-repeat center center/100% 100%;
}
.tab4-container .tab4-bg2 {
  width: 1590rem;
  height: 4806rem;
  background: url("./img/tab4_2.png") no-repeat center center/100% 100%;
}