@import url("https://fonts.googleapis.com/css2?family=Yantramanav:wght@900&display=swap");
.footer, .article, .logo, .mainmenu {
  display: none;
}

.openweb {
  position: fixed;
  max-width: 1920px;
  overflow: hidden;
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
}
.openweb .skipopen {
  position: fixed;
  left: initial;
  text-align: center;
  display: none;
  cursor: pointer;
  right: 15px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  color: #fff;
  border: 1px solid #fff;
  font-size: 0.875em;
  background: rgba(30, 30, 30, 0.35);
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-transform: translate(0px, -50%);
  -ms-transform: translate(0px, -50%);
  -webkit-transform: translate(0px, -50%);
  transform: translate(0px, -50%);
  top: 50%;
  z-index: 9;
}
.openweb div, .openweb h3 {
  position: absolute;
  width: 96%;
  margin: auto;
  right: 0;
  left: 0;
}
.openweb .count, .openweb h3, .openweb .bgtext, .openweb .step2, .openweb .step3, .openweb .top3, .openweb .number, .openweb .effecttext1, .openweb .effecttext2 {
  opacity: 0;
}
.openweb h3 {
  font-family: 'Noto Serif TC', serif;
  font-weight: 900;
  font-size: 2em;
  margin-left: -10%;
  top: 45%;
  color: #fff;
  z-index: 5;
}
.openweb h3 span {
  position: relative;
}
.openweb h3 .title1, .openweb h3 .title3, .openweb h3 .title4 {
  opacity: 0;
}
.openweb h3 .title1 {
  left: 10%;
}
.openweb h3 .title2, .openweb h3 .title4 {
  left: -6%;
}
.openweb h3 .title3 {
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
}
.openweb .step1 {
  z-index: 1;
}
.openweb .step2 {
  z-index: 2;
}
.openweb .step3 {
  filter: blur(12px);
  z-index: 6;
}
.openweb .bgtext {
  z-index: 3;
  top: 60%;
  -moz-transition: all 3s;
  -o-transition: all 3s;
  -webkit-transition: all 3s;
  transition: all 3s;
}
.openweb .bgtext big {
  letter-spacing: 1px;
  line-height: 100%;
  font-family: 'Yantramanav', sans-serif;
  font-size: 10em;
  opacity: .7;
  color: #fff;
}
.openweb .bgtext small {
  opacity: 0;
  display: block;
  font-family: "Noto Sans TC";
  font-weight: 500;
  position: relative;
  right: 0;
  top: 175px;
  font-size: 1.5em;
  color: #fff;
}
.openweb .top {
  z-index: 4;
}
.openweb .number {
  padding-left: 80px;
  z-index: 5;
  top: 30%;
  font-family: "Noto Sans TC";
  font-weight: 500;
}
.openweb .number big {
  font-size: 5em;
  font-family: Century Gothic, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #fff;
  margin: 0 10px;
}
.openweb .number small {
  display: block;
  max-width: 500px;
  padding: 7px 2%;
  margin: 8px auto;
  background: #5fd7cb;
  width: 96%;
  color: #fff;
  opacity: 0;
  font-size: 1.25rem;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.openweb .number span {
  position: relative;
  color: #fff;
  left: -15%;
  opacity: 0;
  display: inline-block;
  font-size: 1.5em;
}
.openweb .bgtext1 {
  margin-left: -10%;
}
.openweb .bgtext2 {
  z-index: 7;
}
.openweb .text {
  top: 60%;
  max-width: 600px;
  margin-left: 10%;
  z-index: 8;
  text-shadow: 0px 2px 3px #333;
}
.openweb .text span, .openweb .text small, .openweb .text a {
  display: block;
  color: #fff;
  opacity: 0;
}
.openweb .text a, .openweb .text span {
  font-family: "Noto Sans TC";
  font-weight: 500;
}
.openweb .text .text1 {
  font-size: 1.875em;
}
.openweb .text .text2 {
  font-size: 1.375em;
}
.openweb .text a {
  margin: 20px auto;
  max-width: 250px;
  padding: 15px 0;
  border: solid 1px #fff;
  font-size: 1em;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
}
.openweb .text a:hover {
  background: #63dfe6;
}
.openweb .text small {
  font-size: 1rem;
}
.openweb .text small span {
  display: inline-block;
  font-size: 1rem;
  opacity: 1;
}
.openweb .bgeffect {
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}
.openweb .bgeffect img {
  position: absolute;
  opacity: 0;
  top: 0;
  height: 100%;
}
.openweb .bgeffect .bgeffect1 {
  right: -100%;
}
.openweb .effecttext1, .openweb .effecttext2, .openweb .effecttext3 {
  font-size: 1em;
  text-align: left;
  max-width: 400px;
  padding: 20px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
}
.openweb .effecttext1 h4, .openweb .effecttext1 h5, .openweb .effecttext1 big, .openweb .effecttext2 h4, .openweb .effecttext2 h5, .openweb .effecttext2 big, .openweb .effecttext3 h4, .openweb .effecttext3 h5, .openweb .effecttext3 big {
  font-family: "Noto Sans TC";
  font-weight: 500;
}
.openweb .effecttext1 h4, .openweb .effecttext2 h4, .openweb .effecttext3 h4 {
  font-size: 1.5rem;
}
.openweb .effecttext1 h5, .openweb .effecttext2 h5, .openweb .effecttext3 h5 {
  font-size: 1.125rem;
  color: #fff;
  padding: 10px;
  background: #55d4d9;
  margin-bottom: 25px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.openweb .effecttext1 i, .openweb .effecttext1 span, .openweb .effecttext2 i, .openweb .effecttext2 span, .openweb .effecttext3 i, .openweb .effecttext3 span {
  font-weight: bold;
  color: #55d4d9;
  font-size: 110%;
}
.openweb .effecttext1 big, .openweb .effecttext2 big, .openweb .effecttext3 big {
  font-size: 1.125rem;
  display: block;
  margin: 5px auto;
}
.openweb .effecttext1 strong, .openweb .effecttext2 strong, .openweb .effecttext3 strong {
  display: block;
  margin: 5px auto;
  font-size: 1.125rem;
}
.openweb .effecttext1 .more, .openweb .effecttext2 .more, .openweb .effecttext3 .more {
  text-align: center;
  display: inline-block;
  min-width: 120px;
  padding: 10px 0;
  margin: 15px 3px;
  border: 2px solid #f08256;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
}
.openweb .effecttext1, .openweb .effecttext2 {
  top: 40%;
  right: 5%;
  left: initial;
  background: rgba(255, 255, 255, 0.85);
}
.openweb .effecttext1 {
  z-index: 5;
}
.openweb .effecttext2 {
  z-index: 4;
}
.openweb .effecttext3 {
  position: absolute;
  left: 6%;
  bottom: 10%;
  right: initial;
  color: #fff;
  background: rgba(30, 30, 30, 0.35);
  z-index: 6;
}
.openweb .effecttext3 ul {
  margin: 10px auto;
}
.openweb .effecttext3 ul li {
  display: block;
  margin: 3px auto;
  font-size: 95%;
  padding: 5px;
  background: #ade1e380;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.openweb .effect1, .openweb .effect2 {
  width: 100%;
  height: 100%;
}
.openweb .effect1 {
  z-index: 1;
}
.openweb .effect2 {
  display: none;
  opacity: 0;
  z-index: 2;
}

.en {
  font-size: 80%;
}
.en .effecttext1 strong, .en .effecttext1 big, .en .effecttext2 strong, .en .effecttext2 big, .en .effecttext3 strong, .en .effecttext3 big {
  font-size: 1rem;
}
.en .effecttext1 p, .en .effecttext2 p, .en .effecttext3 p {
  line-height: inherit;
}
.en .bgtext small {
  top: 140px;
}

.cn h3 {
  font-family: 'Noto Serif SC', serif;
}
.cn .bgtext small {
  font-family: 'Noto Sans SC', sans-serif;
}
.cn .number {
  font-family: 'Noto Sans SC', sans-serif;
}
.cn .effecttext1 h4, .cn .effecttext1 h5, .cn .effecttext1 big, .cn .effecttext2 h4, .cn .effecttext2 h5, .cn .effecttext2 big, .cn .effecttext3 h4, .cn .effecttext3 h5, .cn .effecttext3 big {
  font-family: 'Noto Sans SC', sans-serif;
}
.cn .text a, .cn .text span {
  font-family: 'Noto Sans SC', sans-serif;
}

.page-home {
  position: relative;
  width: 100%;
}

@media screen and (max-width: 1024px) {
  .openweb h3, .openweb .bgtext1 {
    margin-left: inherit;
  }
  .openweb .effect2 {
    top: 150px;
  }
  .openweb .bgeffect1 {
    display: none;
  }
  .openweb .effecttext1, .openweb .effecttext2, .openweb .effecttext3 {
    left: 0;
    right: 0;
    padding: 3%;
    width: 86%;
  }
  .openweb .effecttext3 {
    top: 500px;
    bottom: initial;
  }
  .openweb .effecttext3 .bottom {
    padding-bottom: 50px;
  }

  .mainpage {
    position: absolute;
    overflow: initial;
  }

  .mainbg {
    position: fixed;
  }
}
@media screen and (max-width: 800px) {
  .openweb h3 {
    font-size: 1.5em;
  }
  .openweb .bgtext big {
    font-size: 8em;
  }
  .openweb .bgtext small {
    top: 140px;
  }
}
@media screen and (max-width: 680px) {
  .openweb .text {
    margin-left: inherit;
  }
  .openweb .skipopen {
    top: initial;
    bottom: 20px;
    left: 15px;
  }
}
@media screen and (max-width: 540px) {
  .openweb .number span {
    font-size: 1.25em;
  }
  .openweb .number big {
    font-size: 3em;
  }
  .openweb .number small {
    font-size: 1rem;
  }
  .openweb .bgtext big {
    font-size: 6em;
  }
  .openweb .bgtext small {
    top: 110px;
    font-size: 1.25em;
  }
  .openweb .text .text1 {
    font-size: 1.5em;
  }
  .openweb .text .text2 {
    font-size: 1em;
  }
  .openweb .text small {
    font-size: 0.875rem;
  }
  .openweb .effecttext1, .openweb .effecttext2, .openweb .effecttext3 {
    font-size: 0.875em;
  }
  .openweb .effecttext1 h4, .openweb .effecttext2 h4, .openweb .effecttext3 h4 {
    font-size: 1.25rem;
  }
  .openweb .effecttext1 h5, .openweb .effecttext1 big, .openweb .effecttext2 h5, .openweb .effecttext2 big, .openweb .effecttext3 h5, .openweb .effecttext3 big {
    font-size: 1rem;
  }
}
@media screen and (max-width: 480px) {
  .openweb h3 {
    font-size: 1.25em;
  }
}
@media screen and (max-width: 420px) {
  .openweb .number span {
    font-size: 1em;
  }
  .openweb .number big {
    font-size: 2em;
    margin: 0 3px;
  }
  .openweb .text .text1 {
    font-size: 1.25em;
  }
  .openweb .text .text2 {
    font-size: 0.875em;
  }
  .openweb .text small span {
    font-size: 0.875rem;
  }
  .openweb .text span {
    font-weight: initial;
  }
}
@media screen and (max-width: 360px) {
  .openweb .bgtext big {
    font-size: 5em;
  }
  .openweb .bgtext small {
    top: 90px;
    font-size: 1em;
  }
}