@charset "UTF-8";

/* 活動辦法頁專用（共用版型請載入 common.css） */

body#rule.rule .rule-screens {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

body#rule.rule .rule-screen {
  box-sizing: border-box;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  line-height: 0;
}

body#rule.rule .rule-screen--1 {
  position: relative;
}

/* 參照 award.css：第二屏往上疊一段距離 */
body#rule.rule .rule-screen--2 {
  position: relative;
  top: -10vw;
}

@media (min-width: 751px) {
  body#rule.rule .rule-screen--2 {
    top: -80px;
  }
}

body#rule.rule .rule-screen-img {
  display: block;
  width: 100%;
  max-width: 750px;
  height: auto;
}

body#rule.rule .rule-screen--2 .rule-screen-img {
  position: relative;
  z-index: 0;
}

body#rule.rule .rule-screen--2-copy {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 1.2%;
  width: 84%;
  transform: translateX(-50%);
  line-height: 1.65;
  font-size: 3vw;
  color: #000;
  font-family: "Noto Serif TC", "Source Han Serif TC", "Source Han Serif",
    "Songti TC", serif;
}

@media (min-width: 751px) {
  body#rule.rule .rule-screen--2-copy {
    left: 50%;
    top: 176px;
    width: 613px;
    font-size: 22px;
  }
}

body#rule.rule .rule-screen--2-copy p {
  margin: 0;
  text-align: justify;
  text-justify: inter-ideograph;
}

body#rule.rule .rule-screen--2-copy2 {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 3.9%;
  width: 84%;
  transform: translateX(-50%);
  line-height: 1.65;
  font-size: 3vw;
  color: #000;
  font-family: "Noto Serif TC", "Source Han Serif TC", "Source Han Serif", "Songti TC", serif;
}

@media (min-width: 751px) {
  body#rule.rule .rule-screen--2-copy2 {
    top: 590px;
    width: 613px;
    font-size: 22px;
  }
}

body#rule.rule .rule-screen--2-copy2 p {
  margin: 0;
  text-align: justify;
  text-justify: inter-ideograph;
  line-height: 1.85;
}

body#rule.rule .rule-screen--2-copy3 {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 7.8%;
  width: 84%;
  transform: translateX(-50%);
  line-height: 1.65;
  font-size: 3vw;
  color: #000;
  font-family: "Noto Serif TC", "Source Han Serif TC", "Source Han Serif",
    "Songti TC", serif;
}

@media (min-width: 751px) {
  body#rule.rule .rule-screen--2-copy3 {
    left: 50%;
    top: 1170px;
    width: 613px;
    font-size: 22px;
  }
}

body#rule.rule .rule-screen--2-copy3 p {
  margin: 0;
  text-align: justify;
  text-justify: inter-ideograph;
  line-height: 2.2;
}

body#rule.rule .rule-screen--2-copy4 {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 11.6%;
  width: 84%;
  transform: translateX(-50%);
  line-height: 1.65;
  font-size: 3vw;
  color: #000;
  font-family: "Noto Serif TC", "Source Han Serif TC", "Source Han Serif",
    "Songti TC", serif;
}

@media (min-width: 751px) {
  body#rule.rule .rule-screen--2-copy4 {
    left: 50%;
    top: 1750px;
    width: 613px;
    font-size: 22px;
  }
}

body#rule.rule .rule-terms {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

body#rule.rule .rule-term {
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
}

body#rule.rule .rule-term p {
  margin: 0;
  text-align: justify;
  text-justify: inter-ideograph;
}

body#rule.rule .rule-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 999px;
  background-color: #b3dbbd;
  color: #004511;
  font-weight: 600;
  line-height: 1;
  margin-top: 0.08em; /* 微調：讓圓形編號跟著第一行文字更貼齊 */
}

@media (min-width: 751px) {
  body#rule.rule .rule-num {
    margin-top: 0.1em;
  }
}

body#rule.rule .rule-accent {
  font-weight: 800;
  color: rgb(0, 136, 34);
}

body#rule.rule .rule-label {
  display: inline-flex;
  align-items: center;
  padding: 0.08em 0.6em;
  border-radius: 20px;
  background-color: #b3dbbd;
  color: #004511;
  font-weight: 800;
  line-height: 1.2;
}

body#rule.rule .rule-screen--2-copy5 {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 14.4%;
  width: 84%;
  transform: translateX(-50%);
  line-height: 1.65;
  font-size: 3vw;
  color: #000;
  font-family: "Noto Serif TC", "Source Han Serif TC", "Source Han Serif",
    "Songti TC", serif;
}

@media (min-width: 751px) {
  body#rule.rule .rule-screen--2-copy5 {
    left: 50%;
    top: 2165px;
    width: 613px;
    font-size: 22px;
  }
}

body#rule.rule .rule-screen--2-copy5 p {
  margin: 0;
  text-align: justify;
  text-justify: inter-ideograph;
}

body#rule.rule .rule-green {
  color: #008822;
}

body#rule.rule .rule-screen--2-copy6 {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 18.3%;
  width: 84%;
  transform: translateX(-50%);
  line-height: 1.65;
  font-size: 3vw;
  color: #000;
  font-family: "Noto Serif TC", "Source Han Serif TC", "Source Han Serif",
    "Songti TC", serif;
}

@media (min-width: 751px) {
  body#rule.rule .rule-screen--2-copy6 {
    left: 50%;
    top: 2720px;
    width: 613px;
    font-size: 22px;
  }
}

body#rule.rule .rule-screen--2-copy7 {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 33.6%;
  width: 84%;
  transform: translateX(-50%);
  line-height: 1.4;
  font-size: 3vw;
  color: #000;
  font-family: "Noto Serif TC", "Source Han Serif TC", "Source Han Serif",
    "Songti TC", serif;
}

@media (min-width: 751px) {
  body#rule.rule .rule-screen--2-copy7 {
    left: 50%;
    top: 5065px;
    width: 613px;
    font-size: 22px;
  }
}

body#rule.rule .rule-screen--2-copy8 {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 42.2%;
  width: 84%;
  transform: translateX(-50%);
  line-height: 1.65;
  font-size: 3vw;
  color: #000;
  font-family: "Noto Serif TC", "Source Han Serif TC", "Source Han Serif",
    "Songti TC", serif;
}

@media (min-width: 751px) {
  body#rule.rule .rule-screen--2-copy8 {
    left: 50%;
    top: 6355px;
    width: 613px;
    font-size: 22px;
  }
}

body#rule.rule .rule-bullet-list {
  margin: 0;
  padding-left: 1.2em;
}

body#rule.rule .rule-bullet-list li {
  margin: 0.2em 0;
}

body#rule.rule .rule-screen--2-copy9,
body#rule.rule .rule-screen--2-copy10 {
  position: absolute;
  z-index: 3;
  left: 50%;
  box-sizing: border-box;
  width: 84%;
  transform: translateX(-50%);
  line-height: 1.75;
  font-size: 3vw;
  color: #000;
  font-family: "Noto Serif TC", "Source Han Serif TC", "Source Han Serif",
    "Songti TC", serif;
}

body#rule.rule .rule-screen--2-copy9 {
  top: 57%;
}

body#rule.rule .rule-screen--2-copy10 {
  top: 86.8%;
}

@media (min-width: 751px) {
  body#rule.rule .rule-screen--2-copy9,
  body#rule.rule .rule-screen--2-copy10 {
    width: 613px;
    font-size: 22px;
  }

  body#rule.rule .rule-screen--2-copy9 {
    top: 8615px;
  }

  body#rule.rule .rule-screen--2-copy10 {
    top: 13080px;
  }
}

body#rule.rule .rule-screen--2-copy9 p,
body#rule.rule .rule-screen--2-copy9 li,
body#rule.rule .rule-screen--2-copy10 p,
body#rule.rule .rule-screen--2-copy10 li {
  text-align: justify;
  text-justify: inter-ideograph;
}

body#rule.rule .rule-screen--2-copy9 p,
body#rule.rule .rule-screen--2-copy10 p {
  margin: 0 0 0.8em;
}

body#rule.rule .rule-screen--2-copy9 ol,
body#rule.rule .rule-screen--2-copy9 ul,
body#rule.rule .rule-screen--2-copy10 ol,
body#rule.rule .rule-screen--2-copy10 ul {
  margin: 0 0 0.8em;
  padding-left: 1.3em;
}

body#rule.rule .rule-screen--2-copy9 li,
body#rule.rule .rule-screen--2-copy10 li {
  margin: 0;
}

body#rule.rule .rule-screen--2-copy9 .rule-roman-list {
  list-style-type: lower-roman;
  margin-top: 0.45em;
}