main {
  max-width: 1400px;
  margin: 0 auto;
}

section {
  position: relative;
  top: -1px;
}

.subtitle {
  text-align: center;
}
.subtitle span {
  font-weight: 500;
  font-size: 65px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .subtitle span {
    font-size: 4.6428571429vw;
  }
}
@media (max-width: 767px) {
  .subtitle span {
    font-size: 7.1614583333vw;
  }
}
.subtitle span {
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  background-image: linear-gradient(85deg, #00269f 0%, #0777fb 20%, #0735c0 30%, #0038cf 48%, #002395 62%, #0141d2 74%, #0580ff 87%, #002da9 100%);
}
@media (max-width: 767px) {
  .subtitle b {
    display: none;
  }
}
.subtitle i {
  font-size: 50px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .subtitle i {
    font-size: 3.5714285714vw;
  }
}
@media (max-width: 767px) {
  .subtitle i {
    font-size: 3.2552083333vw;
  }
}
.subtitle sup {
  position: relative;
  top: -3.3em;
  font-weight: 500;
  font-size: 12px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .subtitle sup {
    font-size: 0.8571428571vw;
  }
}
@media (max-width: 767px) {
  .subtitle sup {
    font-size: 1.5625vw;
  }
}
.subtitle sup {
  font-family: "Noto Sans TC", san-serif;
}
@media (max-width: 767px) {
  .subtitle sup {
    top: -0.8em;
  }
}

.title {
  text-align: center;
  margin-top: -5px;
}
@media (max-width: 767px) {
  .title {
    margin-top: -2px;
  }
}
.title span {
  font-weight: 700;
  font-size: 80px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .title span {
    font-size: 5.7142857143vw;
  }
}
@media (max-width: 767px) {
  .title span {
    font-size: 10.4166666667vw;
  }
}
.title span {
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  background-image: linear-gradient(85deg, #00269f 0%, #0777fb 20%, #0735c0 30%, #0038cf 48%, #002395 62%, #0141d2 74%, #0580ff 87%, #002da9 100%);
}
.title sup {
  position: relative;
  top: -3.3em;
  font-weight: 700;
  font-size: 16px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .title sup {
    font-size: 1.1428571429vw;
  }
}
@media (max-width: 767px) {
  .title sup {
    font-size: 2.0833333333vw;
  }
}
.title sup {
  font-family: "Noto Sans TC", san-serif;
}
@media (max-width: 767px) {
  .title sup {
    top: -1.5em;
  }
}

small.s-txt {
  font-size: 10px;
  color: #727272;
  text-align: right;
  font-size: 10px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  small.s-txt {
    font-size: 0.7142857143vw;
  }
}
@media (max-width: 767px) {
  small.s-txt {
    font-size: 1.8229166667vw;
  }
}

.section-kv {
  margin-top: 80px;
}
@media (max-width: 767px) {
  .section-kv {
    margin-top: 56px;
  }
}
.section-kv .s-txt {
  position: absolute;
  bottom: 11%;
  right: 2.3%;
  line-height: 1.25;
  max-width: 550px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-kv .s-txt {
    max-width: 39.2857142857vw;
  }
}
@media (max-width: 767px) {
  .section-kv .s-txt {
    max-width: 31.25vw;
  }
}
@media (max-width: 767px) {
  .section-kv .s-txt {
    bottom: 4.3%;
    right: 4.6%;
    text-align: justify;
    -moz-text-align-last: right;
         text-align-last: right;
    line-height: 1.57;
  }
}

.section-1 {
  padding: 3.9% 0 4.25%;
}
@media (max-width: 767px) {
  .section-1 {
    padding: 12.6% 0 8.55%;
  }
}
.section-1 .img {
  position: relative;
  margin: 0 auto;
  width: 1234px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-1 .img {
    width: 88.1428571429vw;
  }
}
@media (max-width: 767px) {
  .section-1 .img {
    width: 85.8072916667vw;
  }
}
.section-1 .img {
  background-color: #000;
  margin-top: 49px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-1 .img {
    margin-top: 3.5vw;
  }
}
@media (max-width: 767px) {
  .section-1 .img {
    margin-top: 3.125vw;
  }
}
.section-1 .img .txt {
  position: absolute;
  bottom: 2.2%;
  color: #fff;
  letter-spacing: 0.02em;
  font-size: 40px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-1 .img .txt {
    font-size: 2.8571428571vw;
  }
}
@media (max-width: 767px) {
  .section-1 .img .txt {
    font-size: 2.8645833333vw;
  }
}
.section-1 .img .txt-1 {
  left: 3.6%;
}
@media (max-width: 767px) {
  .section-1 .img .txt-1 {
    left: 3%;
  }
}
.section-1 .img .txt-2 {
  left: 38.6%;
}
@media (max-width: 767px) {
  .section-1 .img .txt-2 {
    left: 38%;
  }
}
.section-1 .img .txt-3 {
  left: 70.6%;
}
@media (max-width: 767px) {
  .section-1 .img .txt-3 {
    left: 70%;
  }
}

.section-2 .txtBox {
  position: absolute;
  top: 4%;
  left: 0%;
  width: 100%;
  text-align: center;
}
@media (max-width: 767px) {
  .section-2 .txtBox {
    top: 3.6%;
  }
}
@media (max-width: 767px) {
  .section-2 .subtitle {
    line-height: 1.273;
  }
}
@media (max-width: 767px) {
  .section-2 .title {
    margin-top: 3px;
  }
}
.section-2 .title span {
  font-size: 80px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-2 .title span {
    font-size: 5.7142857143vw;
  }
}
@media (max-width: 767px) {
  .section-2 .title span {
    font-size: 8.0729166667vw;
  }
}
.section-2 .txt {
  position: absolute;
  top: 81%;
  color: #000;
  line-height: 1.25;
  font-size: 40px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-2 .txt {
    font-size: 2.8571428571vw;
  }
}
@media (max-width: 767px) {
  .section-2 .txt {
    font-size: 3.6458333333vw;
  }
}
@media (max-width: 767px) {
  .section-2 .txt {
    top: 83.5%;
  }
}
.section-2 .txt-1 {
  left: 25.2%;
}
@media (max-width: 767px) {
  .section-2 .txt-1 {
    left: 18.4%;
  }
}
.section-2 .txt-2 {
  left: 49.6%;
}
@media (max-width: 767px) {
  .section-2 .txt-2 {
    left: 49.4%;
  }
}

.section-3 .txtBox {
  position: absolute;
  top: 1.5%;
  left: 4.7%;
}
@media (max-width: 767px) {
  .section-3 .txtBox {
    top: 2.2%;
  }
}
.section-3 .txtBox .title, .section-3 .txtBox .subtitle {
  display: inline-block;
  text-align: left;
  font-family: "Noto Sans", "Noto Sans TC", san-serif;
}
.section-3 .txtBox .title span {
  font-size: 80px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-3 .txtBox .title span {
    font-size: 5.7142857143vw;
  }
}
@media (max-width: 767px) {
  .section-3 .txtBox .title span {
    font-size: 7.5520833333vw;
  }
}
.section-3 .txtBox .title span {
  background-image: -webkit-gradient(linear, left top, right top, from(#0038cf), color-stop(7%, #00269f), color-stop(26%, #0735c0), color-stop(38%, #0038cf), color-stop(51%, #002395), color-stop(69%, #0141d2), color-stop(81%, #0580ff), color-stop(96%, #002da9));
  background-image: linear-gradient(90deg, #0038cf 0%, #00269f 7%, #0735c0 26%, #0038cf 38%, #002395 51%, #0141d2 69%, #0580ff 81%, #002da9 96%);
}
.section-3 .txtBox .subtitle {
  margin-left: -0.3em;
}
@media (max-width: 767px) {
  .section-3 .txtBox .subtitle {
    margin: 0.15em 0 0 0;
  }
}
.section-3 .txtBox .subtitle span {
  font-size: 65px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-3 .txtBox .subtitle span {
    font-size: 4.6428571429vw;
  }
}
@media (max-width: 767px) {
  .section-3 .txtBox .subtitle span {
    font-size: 4.6875vw;
  }
}
.section-3 .txtBox .subtitle span {
  background-image: -webkit-gradient(linear, left top, right top, from(#00269f), color-stop(17%, #0777fb), color-stop(29%, #0735c0), color-stop(37%, #0038cf), color-stop(46%, #002395), color-stop(63%, #0141d2), color-stop(76%, #0580ff), color-stop(94%, #002da9));
  background-image: linear-gradient(90deg, #00269f 0%, #0777fb 17%, #0735c0 29%, #0038cf 37%, #002395 46%, #0141d2 63%, #0580ff 76%, #002da9 94%);
}
.section-3 .txt {
  position: absolute;
  left: 5%;
}
.section-3 .txt .m-title {
  font-weight: 500;
  font-family: "Noto Sans", "Noto Sans TC", san-serif;
  margin-bottom: 18px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-3 .txt .m-title {
    margin-bottom: 1.2857142857vw;
  }
}
@media (max-width: 767px) {
  .section-3 .txt .m-title {
    margin-bottom: 2.6041666667vw;
  }
}
.section-3 .txt .m-title span {
  background-image: -webkit-gradient(linear, left top, right top, from(#00269f), color-stop(17%, #0777fb), color-stop(28%, #0735c0), color-stop(37%, #0038cf), color-stop(46%, #002395), color-stop(63%, #0141d2), color-stop(76%, #0580ff), color-stop(94%, #002da9));
  background-image: linear-gradient(90deg, #00269f 0%, #0777fb 17%, #0735c0 28%, #0038cf 37%, #002395 46%, #0141d2 63%, #0580ff 76%, #002da9 94%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: 45px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-3 .txt .m-title span {
    font-size: 3.2142857143vw;
  }
}
@media (max-width: 767px) {
  .section-3 .txt .m-title span {
    font-size: 3.90625vw;
  }
}
.section-3 .txt .m-title .num {
  font-size: 50px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-3 .txt .m-title .num {
    font-size: 3.5714285714vw;
  }
}
@media (max-width: 767px) {
  .section-3 .txt .m-title .num {
    font-size: 4.296875vw;
  }
}
.section-3 .txt .m-title i {
  margin-right: 0.2em;
  font-size: 34px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-3 .txt .m-title i {
    font-size: 2.4285714286vw;
  }
}
@media (max-width: 767px) {
  .section-3 .txt .m-title i {
    font-size: 3.125vw;
  }
}
@media (max-width: 767px) {
  .section-3 .txt .m-title i {
    margin: 0;
  }
}
.section-3 .txt .m-info {
  color: #00266e;
  line-height: 1.22;
  font-size: 45px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-3 .txt .m-info {
    font-size: 3.2142857143vw;
  }
}
@media (max-width: 767px) {
  .section-3 .txt .m-info {
    font-size: 3.90625vw;
  }
}
.section-3 .txt .m-info sup {
  position: relative;
  top: -1em;
  color: #00368f;
  font-size: 12px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-3 .txt .m-info sup {
    font-size: 0.8571428571vw;
  }
}
@media (max-width: 767px) {
  .section-3 .txt .m-info sup {
    font-size: 1.3020833333vw;
  }
}
@media (max-width: 767px) {
  .section-3 .txt .m-info sup {
    top: -0.8em;
  }
}
.section-3 .txt-1 {
  top: 16.55%;
}
@media (max-width: 767px) {
  .section-3 .txt-1 {
    top: 15.6%;
  }
}
.section-3 .txt-2 {
  top: 30.35%;
}
@media (max-width: 767px) {
  .section-3 .txt-2 {
    top: 29.1%;
  }
}
.section-3 .txt-3 {
  position: absolute;
  top: 56.25%;
  left: 9.3%;
  color: #000;
  line-height: 1.25;
  letter-spacing: 0.06em;
  font-size: 40px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-3 .txt-3 {
    font-size: 2.8571428571vw;
  }
}
@media (max-width: 767px) {
  .section-3 .txt-3 {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .section-3 .txt-3 {
    top: 54.15%;
    left: 5.5%;
  }
}
.section-3 .type {
  position: absolute;
  left: 58.6%;
}
@media (max-width: 767px) {
  .section-3 .type {
    left: 60.6%;
  }
}
.section-3 .type .m-title {
  font-weight: 500;
  margin-bottom: 24px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-3 .type .m-title {
    margin-bottom: 1.7142857143vw;
  }
}
@media (max-width: 767px) {
  .section-3 .type .m-title {
    margin-bottom: 2.6041666667vw;
  }
}
.section-3 .type .m-title span {
  background-image: -webkit-gradient(linear, left top, right top, from(#0777fb), color-stop(20%, #0735c0), color-stop(37%, #0038cf), color-stop(56%, #002395), color-stop(82%, #0141d2), to(#0580ff));
  background-image: linear-gradient(90deg, #0777fb 0%, #0735c0 20%, #0038cf 37%, #002395 56%, #0141d2 82%, #0580ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: 65px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-3 .type .m-title span {
    font-size: 4.6428571429vw;
  }
}
@media (max-width: 767px) {
  .section-3 .type .m-title span {
    font-size: 5.2083333333vw;
  }
}
.section-3 .type .m-info {
  color: #000;
  line-height: 1.22;
  letter-spacing: 0.06em;
  font-size: 40px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-3 .type .m-info {
    font-size: 2.8571428571vw;
  }
}
@media (max-width: 767px) {
  .section-3 .type .m-info {
    font-size: 3.2552083333vw;
  }
}
.section-3 .type .m-info sup {
  position: relative;
  top: -1em;
  color: #00368f;
  font-size: 12px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-3 .type .m-info sup {
    font-size: 0.8571428571vw;
  }
}
@media (max-width: 767px) {
  .section-3 .type .m-info sup {
    font-size: 1.3020833333vw;
  }
}
@media (max-width: 767px) {
  .section-3 .type .m-info sup {
    top: -0.8em;
  }
}
.section-3 .type-1 {
  top: 48.3%;
}
@media (max-width: 767px) {
  .section-3 .type-1 {
    top: 50%;
  }
}
.section-3 .type-2 {
  top: 74.75%;
  left: 59.3%;
}
@media (max-width: 767px) {
  .section-3 .type-2 {
    top: 75.45%;
    left: 63.3%;
  }
}

.section-4 .txtBox {
  position: absolute;
  top: 1.25%;
  left: 0%;
  width: 100%;
  text-align: center;
}
@media (max-width: 767px) {
  .section-4 .txtBox {
    top: 2.5%;
  }
}
.section-4 .subtitle span {
  font-size: 65px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-4 .subtitle span {
    font-size: 4.6428571429vw;
  }
}
@media (max-width: 767px) {
  .section-4 .subtitle span {
    font-size: 8.4635416667vw;
  }
}
@media (max-width: 767px) {
  .section-4 .title sup {
    top: -2.8em;
  }
}

.section-5 .title {
  position: absolute;
  top: 2.7%;
  left: 0;
  width: 100%;
  text-align: center;
}
@media (max-width: 767px) {
  .section-5 .title {
    top: -0.5%;
  }
}
.section-5 .step {
  position: absolute;
  top: 22.4%;
}
@media (max-width: 767px) {
  .section-5 .step {
    top: 12%;
  }
}
.section-5 .step .m-title {
  color: #231815;
  letter-spacing: 0.025em;
  line-height: 1.25;
  font-weight: 500;
  font-size: 40px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-5 .step .m-title {
    font-size: 2.8571428571vw;
  }
}
@media (max-width: 767px) {
  .section-5 .step .m-title {
    font-size: 4.4270833333vw;
  }
}
.section-5 .step .m-info {
  color: #000;
  line-height: 1.429;
  font-size: 35px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-5 .step .m-info {
    font-size: 2.5vw;
  }
}
@media (max-width: 767px) {
  .section-5 .step .m-info {
    font-size: 3.3854166667vw;
  }
}
.section-5 .step .m-info span {
  font-weight: 600;
}
.section-5 .step-1 {
  left: 6.8%;
}
@media (max-width: 767px) {
  .section-5 .step-1 {
    left: 16%;
  }
}
.section-5 .step-1 .m-info {
  width: 350px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-5 .step-1 .m-info {
    width: 25vw;
  }
}
@media (max-width: 767px) {
  .section-5 .step-1 .m-info {
    width: 40.3645833333vw;
  }
}
.section-5 .step-1 .m-info {
  margin-top: 78px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-5 .step-1 .m-info {
    margin-top: 5.5714285714vw;
  }
}
@media (max-width: 767px) {
  .section-5 .step-1 .m-info {
    margin-top: 5.9895833333vw;
  }
}
.section-5 .step-1 .m-info {
  margin-left: -1.1em;
}
@media (max-width: 767px) {
  .section-5 .step-1 .m-info {
    margin-left: -2.6em;
    text-align: justify;
  }
}
.section-5 .step-2 {
  left: 40.2%;
}
@media (max-width: 767px) {
  .section-5 .step-2 {
    top: 41.5%;
    left: 16%;
  }
}
.section-5 .step-2 .m-info {
  width: 370px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-5 .step-2 .m-info {
    width: 26.4285714286vw;
  }
}
@media (max-width: 767px) {
  .section-5 .step-2 .m-info {
    width: 42.96875vw;
  }
}
.section-5 .step-2 .m-info {
  margin-top: 78px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-5 .step-2 .m-info {
    margin-top: 5.5714285714vw;
  }
}
@media (max-width: 767px) {
  .section-5 .step-2 .m-info {
    margin-top: 5.46875vw;
  }
}
.section-5 .step-2 .m-info {
  margin-left: -1.4em;
}
@media (max-width: 767px) {
  .section-5 .step-2 .m-info {
    margin-left: -2.6em;
    text-align: justify;
  }
}
.section-5 .step-3 {
  top: 19.9%;
  left: 73.5%;
}
@media (max-width: 767px) {
  .section-5 .step-3 {
    top: 70.6%;
    left: 15.9%;
  }
}
.section-5 .step-3 .m-info {
  width: 370px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-5 .step-3 .m-info {
    width: 26.4285714286vw;
  }
}
@media (max-width: 767px) {
  .section-5 .step-3 .m-info {
    width: 41.6666666667vw;
  }
}
.section-5 .step-3 .m-info {
  margin-top: 54px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-5 .step-3 .m-info {
    margin-top: 3.8571428571vw;
  }
}
@media (max-width: 767px) {
  .section-5 .step-3 .m-info {
    margin-top: 5.859375vw;
  }
}
.section-5 .step-3 .m-info {
  margin-left: -1.1em;
}
@media (max-width: 767px) {
  .section-5 .step-3 .m-info {
    margin-left: -2.6em;
    text-align: justify;
    letter-spacing: -0.06em;
  }
}

.section-6 .txt {
  position: absolute;
  top: 46.4%;
}
@media (max-width: 767px) {
  .section-6 .txt {
    top: 11.2%;
  }
}
.section-6 .txt span {
  letter-spacing: 0.015em;
  font-weight: 500;
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  background-image: -webkit-gradient(linear, left top, right top, from(#0777fb), color-stop(20%, #0735c0), color-stop(37%, #0038cf), color-stop(57%, #002395), color-stop(82%, #0141d2), to(#0580ff));
  background-image: linear-gradient(90deg, #0777fb 0%, #0735c0 20%, #0038cf 37%, #002395 57%, #0141d2 82%, #0580ff 100%);
  font-size: 35px;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .section-6 .txt span {
    font-size: 2.5vw;
  }
}
@media (max-width: 767px) {
  .section-6 .txt span {
    font-size: 3.515625vw;
  }
}
.section-6 .txt-1 {
  left: 6%;
}
@media (max-width: 767px) {
  .section-6 .txt-1 {
    top: 10.8%;
    left: 17.8%;
  }
}
.section-6 .txt-2 {
  left: 77.1%;
}
@media (max-width: 767px) {
  .section-6 .txt-2 {
    left: 59.4%;
  }
}