/* 通用*/
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0;
}

img {
  vertical-align: middle;
}

a {
  text-decoration: none;
}

/* rem响应 */
html {
  font-size: 16px;
}

@media screen and (min-width: 320px) and (max-width: 375px) {
  html {
    font-size: calc(84.38% + (200vw - 750px) / 39);
    font-size: calc(13.5px + (200vw - 640px) / 55);
  }
}

@media screen and (min-width: 375px) and (max-width: 414px) {
  html {
    font-size: calc(100% + (200vw - 750px) / 39);
    font-size: calc(16px + (200vw - 750px) / 39);
  }
}

@media screen and (min-width: 414px) and (max-width: 600px) {
  html {
    font-size: calc(112.5% + (400vw - 1656px) / 186);
    font-size: calc(18px + (400vw - 1656px) / 186);
  }
}

@media screen and (min-width: 600px) {
  html {
    font-size: 26px;
  }
}

@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape),
  (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  html {
    font-size: calc(15px + (500vw - 3840px) / 256);
  }
  html body {
    min-width: 100%;
  }
}

@media screen and (min-width: 1320px) {
  html {
    font-size: calc(162.5% + (1200vw - 15840px) / 600);
    font-size: calc(26px + (1200vw - 15840px) / 600);
  }
}

@media screen and (min-width: 1920px) {
  html {
    font-size: calc(237.5% + (500vw - 9600px) / 1000);
    font-size: calc(38px + (500vw - 9600px) / 1000);
  }
}

body {
  margin: 0;
  width: 100%;
  min-width: 1320px;
  background: #efefef;
  line-height: 1;
}

@media screen and (max-width: 600px) {
  body {
    min-width: 100%;
  }
}

body ::-moz-selection {
  color: #fff;
  background-color: #d89bdd;
}

body ::selection {
  color: #fff;
  background-color: #d89bdd;
}

body img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#app {
  font-family: Arial, Helvetica Neue, Hiragino Sans GB, Microsoft YaHei,
    "\5FAE\8F6F\96C5\9ED1", Helvetica, Verdana, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

footer {
  width: 100%;
  padding: 1.5rem 0 1.5rem;
  background: #000;
  text-align: center;
  font-size: 0;
}

@media screen and (max-width: 600px) {
  footer {
    padding: 1.5rem 0 1.2rem;
  }
}

footer .logo {
  display: inline-block;
  height: 1.2rem;
}

@media screen and (max-width: 600px) {
  footer .logo {
    height: 1.625rem;
  }
}

footer .maoliang {
  margin-left: 0.8rem;
  height: 1.2rem;
}

@media screen and (max-width: 600px) {
  footer .maoliang {
    height: 1.625rem;
  }
}

footer .text {
  display: inline-block;
  margin-left: 3rem;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  margin-top: 1.5rem;
}

@media screen and (max-width: 600px) {
  footer .text {
    width: 100%;
    margin-left: 0;
    margin-top: 1.5rem;
  }
}

footer .text .item {
  margin-bottom: 0.5rem;
  font-size: 0.5rem;
}

footer .text .item a {
  padding: 0 0.5rem;
  cursor: pointer;
  color: #fff;
}

footer .text .item .item-bottom {
  display: inline-block;
}

footer .text .item a:not(:last-child) {
  border-right: 1px solid #fff;
}

footer .text .item a:hover {
  color: #f5ed00;
}

@media screen and (max-width: 600px) {
  footer .text .item a {
    font-size: 0.7rem;
    line-height: 1rem;
  }

  footer .text .item .item-bottom {
    display: block;
  }
}

footer .text .copyright {
  font-size: 0.5rem;
}

footer .text .copyright p:not(:last-child) {
  margin-bottom: 0.5263rem;
}

@media screen and (max-width: 600px) {
  footer .text .copyright {
    font-size: 0.7rem;
  }
}

/* 框架 */
.pirate {
  background: url("../images/bg_pc.jpg") no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

@media screen and (max-width: 600px) {
  .pirate {
    background: transparent;
  }

  .pirate::before {
    content: "";
    background: url("../images/bg_sp.jpg") no-repeat;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-size: cover;
    z-index: -1;
  }
}

.pirate .pirate_public {
  position: relative;
  overflow: hidden;
}

.pirate_public .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 3rem 1rem;
  max-width: 36rem;
  z-index: 0;
}

.pirate .pirate_second,
.pirate .pirate_third,
.pirate .pirate_fourth,
.pirate .pirate_fifth {
  background-image: url("../images/bg_point.png");
}

/* 章节一 */
.pirate .pirate_first {
  height: 100lvh;
}

.pirate .pirate_first .logo {
  filter: drop-shadow(0px 0px 10px rgb(255, 255, 255));
}

.pirate .pirate_first .title {
  width: 100%;
  max-width: 1056px;
  display: block;
  translate: 0 -16%;
}
.pirate .pirate_first .time {
  width: 100%;
  max-width: 1375px;
  translate: 0 -45%;
}

@media screen and (max-width: 600px) {
  .pirate .pirate_first .content {
    justify-content: flex-start;
    padding-top: 16vh;
  }

  .pirate .pirate_first .logo {
    margin-bottom: 2rem;
    width: 60%;
  }

  .pirate .pirate_first .title {
    margin-bottom: 0.5rem;
  }

  .pirate .pirate_first .time {
    margin-bottom: 2rem;
  }
}
.pirate_second {
  min-height: 100lvh;
}

/* 章节二 */
.pirate .pirate_second .sub-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80vh;
}

.pirate .pirate_second .sub-section + .sub-section {
  margin-top: 4rem;
}

.pirate .pirate_second .title {
  margin-bottom: 2rem;
}

.pirate .pirate_second .inner {
  width: 100%;
}

/*
 * PC端使用图片原始尺寸，不做自适应缩放
 * SP端基于设计稿390px按vw响应式缩放：
 *   text1_sp:  329px → 84.36vw
 *   text2_sp:  297px → 76.15vw
 *   text3_sp:  369px → 94.62vw
 *   text4_sp:  145px → 37.18vw
 */
.pirate .pirate_second picture {
  width: auto;
}

@media screen and (max-width: 600px) {
  .pirate .pirate_second picture:has(img[src*="text1_pc"]) {
    width: 84.36vw;
  }
  .pirate .pirate_second picture:has(img[src*="text2_pc"]) {
    width: 76.15vw;
  }
  .pirate .pirate_second picture:has(img[src*="text3_pc"]) {
    width: 94.62vw;
  }
  .pirate .pirate_second picture:has(img[src*="text4_pc"]) {
    width: 37.18vw;
  }
}

.pirate .pirate_second picture + picture {
  margin-top: 2rem;
}

@media screen and (max-width: 600px) {
  .pirate .pirate_second {
    padding-bottom: 2rem;
  }

  .pirate .pirate_second .title {
    width: 50%;
  }
}

/* 章节三、四、五 共用样式 */
.pirate .pirate_third .title,
.pirate .pirate_fourth .title,
.pirate .pirate_fifth .title {
  margin-bottom: 2rem;
}

.pirate .pirate_third .group,
.pirate .pirate_fourth .group,
.pirate .pirate_fifth .group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.pirate .pirate_third .group + .group,
.pirate .pirate_fourth .group + .group,
.pirate .pirate_fifth .group + .group {
  margin-top: 3rem;
}

.pirate .pirate_third .group-title,
.pirate .pirate_fourth .group-title,
.pirate .pirate_fifth .group-title {
  display: block;
  margin-bottom: 1.5rem;
}

.pirate .pirate_third .group-list,
.pirate .pirate_fourth .group-list,
.pirate .pirate_fifth .group-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  gap: 1rem;
}

.pirate .pirate_third .group:first-of-type .group-list,
.pirate .pirate_fourth .group:first-of-type .group-list {
  grid-template-columns: repeat(2, 1fr);
  max-width: 50%;
  gap: 0.5rem;
}

/* pirate_fifth 列表一：单图居中 */
.pirate .pirate_fifth .group-list--single {
  grid-template-columns: repeat(1, 1fr);
  max-width: 25%;
  justify-items: center;
}

@media screen and (max-width: 600px) {
  .pirate .pirate_third .group:first-of-type .group-list,
  .pirate .pirate_fourth .group:first-of-type .group-list {
    max-width: 100%;
  }

  .pirate .pirate_fifth .group-list--single {
    max-width: 50%;
  }
}

.pirate .pirate_third .group-list .item img,
.pirate .pirate_fourth .group-list .item img,
.pirate .pirate_fifth .group-list .item img {
  width: 100%;
}

@media screen and (max-width: 600px) {
  .pirate .pirate_third,
  .pirate .pirate_fourth,
  .pirate .pirate_fifth {
    padding-bottom: 2rem;
  }

  /* 大标题：260/390 ≈ 66.67vw */
  .pirate .pirate_third .title,
  .pirate .pirate_fourth .title,
  .pirate .pirate_fifth .title {
    width: 66.67vw;
  }

  /* mc.png: 100/390 ≈ 25.64vw */
  .pirate .pirate_third .group:nth-of-type(1) .group-title,
  .pirate .pirate_fourth .group:nth-of-type(1) .group-title,
  .pirate .pirate_fifth .group:nth-of-type(1) .group-title {
    width: 25.64vw;
  }

  /* title_red.png / title_blue.png: 185/390 ≈ 47.44vw */
  .pirate .pirate_third .group:nth-of-type(2) .group-title,
  .pirate .pirate_third .group:nth-of-type(3) .group-title,
  .pirate .pirate_fourth .group:nth-of-type(2) .group-title,
  .pirate .pirate_fourth .group:nth-of-type(3) .group-title,
  .pirate .pirate_fifth .group:nth-of-type(2) .group-title,
  .pirate .pirate_fifth .group:nth-of-type(3) .group-title {
    width: 47.44vw;
  }

  .pirate .pirate_third .group-list,
  .pirate .pirate_fourth .group-list,
  .pirate .pirate_fifth .group-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .pirate .pirate_fifth .group-list--single {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* 结尾 */
.pirate .pirate_end .title {
  margin-bottom: 2rem;
}

.pirate .pirate_end .to {
  cursor: pointer;
  margin: 0.5rem 0;
  width: 86%;
}

.pirate .pirate_end .content .to img {
  width: 100%;
}

@media screen and (max-width: 600px) {
  .pirate .pirate_end {
    padding-bottom: 2rem;
  }

  .pirate .pirate_end .title {
    width: 50%;
  }

  .pirate .pirate_end .content .to {
    width: 100%;
  }
}
/* 动画 */
.fadein {
  opacity: 0;
  transform: translate(0, 40px);
  transition: all 1000ms;
}

.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}