@import url("reset.css");
@import "animate.min.css";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Sigmar&display=swap");

body {
  font-family: "Noto Sans TC", serif; /* 預設英文字型 */
}

:lang(zh) {
  font-family: "Noto Sans TC", serif; /* 中文字型 */
}

.pb_1 {
  padding-bottom: 3%;
}

/* 灰格背景 */
.gray_bg {
  position: relative;
}

.gray_bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url(../imgs/gray_Square.png);
  background-repeat: repeat;
  z-index: -1;
}
/* 灰格背景 */

.header_title {
  position: relative;
  display: block;
  margin: 0 auto;
  padding-top: 5%;
}

@media screen and (max-width: 786px) {
  .header_title {
    max-width: 40%;
  }
}

/* 雲 */
.cloud_img_r {
    position: relative;
    padding-top: 3%;
}

.cloud_img_r::after {
  content: "";
  position: absolute;
  top: 0;
  left: 80%;
  bottom: 50%;
  right: 0;
  background-image: url(../imgs/cloud.png);
  background-repeat: no-repeat;
  background-position: left;
  animation: floatUpDown 2s ease-in-out infinite alternate;
}

/* 內頁左雲 */
.cloud_img_l_b {
  position: relative;
}
.cloud_img_l_b::before {
  content: "";
  position: absolute;
  top: 0;
  left: -25%;
  bottom: 0;
  right: 0;
  background-image: url(../imgs/cloud.png);
  background-repeat: no-repeat;
  background-position: left;
  animation: floatUpDown 2s ease-in-out infinite alternate;
  z-index: -1;
}

@keyframes floatUpDown {
  0% {
    transform: translateY(0); /* 初始位置 */
  }
  100% {
    transform: translateY(20px); /* 向下移動 20px */
  }
}

/* 主頁左雲 */
.cloud_img_l {
  position: absolute;
  left: -25%;
  animation: floatUpDown 2s ease-in-out infinite alternate;
}

@media screen and (max-width: 1920px) {
  .cloud_img_r::after {
    left: 85%;
    z-index: -1;
  }
}
@media screen and (max-width: 1500px) {
  .cloud_img_r::after {
    display: none;
  }
  .cloud_img_l {
    display: none;
  }
  .cloud_img_l_b::before {
    display: none;
  }
}

/* /雲 */
/* 創作者列表 */
.pc_list {
  display: block;
}
.sm_list {
  display: none;
}

@media screen and (max-width: 768px) {
  .pc_list {
    display: none;
  }
  .sm_list {
    display: block;
  }
}

/* 最底部雲 */
.cloud_but {
  display: block;
}
.cloud_bg {
  position: relative;
}
.cloud_but {
  position: absolute;
  z-index: -1;
  bottom: 0;
}

@media screen and (max-width: 786px) {
  .cloud_but {
    content: url("../imgs/cloud_buttom_m.png");
    max-width: 100%;
  }
}