@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500&family=Noto+Serif+JP:wght@500&family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0");
h1, h2, h3, h4 {
  position: relative; }

h1 {
  color: white;
  font-weight: 700;
  font-size: 3vw;
  padding-bottom: .5vw; }
  @media (max-width: 800px) {
    h1 {
      font-size: 4.5vw;
      padding-bottom: 1vw; } }
  @media (max-width: 550px) {
    h1 {
      font-size: 8.5vw;
      padding-bottom: 2.5vw; } }
  h1::before {
    content: "";
    position: absolute;
    background: url("../images/pop.svg") no-repeat center;
    background-size: contain;
    transition: .4s all;
    width: 3.2vw;
    height: 3.6vw;
    margin: -.7em -1.1em; }
    @media (max-width: 800px) {
      h1::before {
        width: 4.8vw;
        height: 5.4vw; } }
    @media (max-width: 550px) {
      h1::before {
        width: 9.6vw;
        height: 10.8vw; } }

h2 {
  font-weight: 700;
  font-style: italic;
  font-size: 1.6vw; }
  @media (max-width: 800px) {
    h2 {
      font-size: 2.4vw; } }
  @media (max-width: 550px) {
    h2 {
      font-size: 4.5vw; } }
  h2::after {
    content: "\e7e2";
    font-family: "Material Symbols Outlined";
    vertical-align: top;
    font-size: 1.9vw; }
    @media (max-width: 800px) {
      h2::after {
        font-size: 2.8vw; } }
    @media (max-width: 550px) {
      h2::after {
        font-size: 5.5vw; } }

@keyframes rotation1 {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(15deg) scale(1.3); }
  100% {
    transform: rotate(0deg); } }
@keyframes rotation2 {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(-10deg); }
  100% {
    transform: rotate(0deg); } }
@keyframes rotation3 {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(180deg); }
  100% {
    transform: rotate(359deg); } }
@keyframes rotation4 {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(-180deg); }
  100% {
    transform: rotate(-359deg); } }
@keyframes rotation5 {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(15deg); }
  100% {
    transform: rotate(0deg); } }
.logo {
  background: url("../images/logo.svg") no-repeat center;
  background-size: contain;
  position: absolute;
  z-index: 100;
  transition: .4s all;
  width: 5.5vw;
  height: 2.3vw;
  top: 1.5vw;
  left: 2.5vw; }
  @media (max-width: 550px) {
    .logo {
      width: 14vw;
      height: 5.8vw;
      left: 3.5;
      top: 2.5vw; } }
  .logo:hover {
    transform: scale(1.05); }

#TOP {
  position: fixed;
  background-image: url("../images/bg_top.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  top: 0;
  width: 100%;
  height: 46.8vw; }
  @media (max-width: 800px) {
    #TOP {
      height: 55vw; } }
  @media (max-width: 550px) {
    #TOP {
      background-image: url("../images/bg_top_m.webp");
      height: 166vw; } }
  #TOP main {
    position: relative;
    background: url("../images/title_top.svg") no-repeat center;
    padding-top: 2vw;
    background-size: 34.2vw;
    width: 100%;
    height: 18vw; }
    @media (max-width: 800px) {
      #TOP main {
        padding-top: 8vw; } }
    @media (max-width: 550px) {
      #TOP main {
        background-size: 88vw;
        height: 46vw;
        padding-top: 12vw; } }
    #TOP main p {
      position: absolute;
      font-style: italic;
      letter-spacing: .1em;
      color: #333333;
      left: 50%;
      top: 15.5vw;
      margin: 0 -12vw;
      font-size: 1.6vw; }
      @media (max-width: 800px) {
        #TOP main p {
          left: 48%;
          top: 18.7vw; } }
      @media (max-width: 550px) {
        #TOP main p {
          font-size: 4.5vw;
          top: 44vw;
          margin: 0 -38vw; } }
      #TOP main p span {
        font-weight: 700; }
        #TOP main p span.orr {
          color: #ef2847; }
        #TOP main p span.bll {
          color: #2f70b7; }
    #TOP main::before {
      content: "";
      position: absolute;
      background: url("../images/new.svg") no-repeat center;
      background-size: contain;
      animation: rotation1 2s infinite linear;
      transform-origin: 80% 100%;
      width: 3.1vw;
      height: 3.5vw;
      top: 4vw;
      margin: 0 4.5vw; }
      @media (max-width: 800px) {
        #TOP main::before {
          top: 7vw; } }
      @media (max-width: 550px) {
        #TOP main::before {
          width: 7.75vw;
          height: 8.75vw;
          top: 14vw;
          margin: 0 11.25vw; } }
  #TOP h3, #TOP h4 {
    position: absolute; }
  #TOP h3 {
    background: url("../images/ipad_welcome.webp") no-repeat center;
    background-size: contain;
    animation: rotation5 8s infinite linear;
    width: 17.7vw;
    height: 30vw;
    right: 15vw;
    top: 12vw; }
    @media (max-width: 800px) {
      #TOP h3 {
        right: 10vw; } }
    @media (max-width: 550px) {
      #TOP h3 {
        width: 28.32vw;
        height: 48vw;
        right: 12vw;
        top: 57vw; } }
  #TOP h4 {
    background: url("../images/phone_index.webp") no-repeat center;
    background-size: contain;
    animation: rotation2 4s infinite linear;
    width: 6.5vw;
    height: 18.5vw;
    right: 33vw;
    top: 19vw; }
    @media (max-width: 800px) {
      #TOP h4 {
        right: 28vw; } }
    @media (max-width: 550px) {
      #TOP h4 {
        width: 10.4vw;
        height: 29.6vw;
        right: 37vw;
        top: 52vw; } }
  #TOP ul {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: saturate(100%) blur(7px);
    z-index: 11;
    border-radius: .9vw;
    padding: 2vw 4vw;
    top: 29vw;
    left: 21vw; }
    @media (max-width: 1080px) {
      #TOP ul {
        left: 15vw; } }
    @media (max-width: 800px) {
      #TOP ul {
        top: 33vw;
        left: 8vw; } }
    @media (max-width: 550px) {
      #TOP ul {
        position: relative;
        width: 90%;
        margin: 68vw auto;
        top: inherit;
        left: inherit;
        border-radius: 2.4vw;
        padding: 3vw 0; } }
    #TOP ul li {
      display: inline-block;
      vertical-align: top;
      margin: 0 .5vw; }
      #TOP ul li.qrcode {
        background: url("../images/hi_qrcode.svg") no-repeat center;
        background-size: contain;
        width: 6.8vw;
        height: 6.8vw; }
        @media (max-width: 1080px) {
          #TOP ul li.qrcode {
            width: 9vw;
            height: 9vw; } }
        @media (max-width: 800px) {
          #TOP ul li.qrcode {
            width: 12vw;
            height: 12vw; } }
        @media (max-width: 550px) {
          #TOP ul li.qrcode {
            display: none; } }
      #TOP ul li h5, #TOP ul li h6 {
        letter-spacing: .1em;
        line-height: 1.3;
        font-size: 1.3vw; }
        @media (max-width: 1080px) {
          #TOP ul li h5, #TOP ul li h6 {
            font-size: 1.6vw; } }
        @media (max-width: 800px) {
          #TOP ul li h5, #TOP ul li h6 {
            font-size: 2.5vw; } }
        @media (max-width: 550px) {
          #TOP ul li h5, #TOP ul li h6 {
            font-size: 5vw; } }
      #TOP ul li h5 {
        color: #2f70b7;
        font-weight: 700; }
        #TOP ul li h5 span {
          color: #ef2847; }
      #TOP ul li h6 {
        color: #333333; }
      #TOP ul li a * {
        transition: .4s all; }
        #TOP ul li a *:hover {
          transform: scale(1.05); }
      #TOP ul li a:hover {
        text-decoration: none; }
      #TOP ul li a .googlestore, #TOP ul li a .applestore {
        display: inline-block;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin: 1vw .2vw;
        width: 7.7vw;
        height: 2.3vw; }
        @media (max-width: 1080px) {
          #TOP ul li a .googlestore, #TOP ul li a .applestore {
            margin: 1vw .5vw;
            width: 9.5vw;
            height: 3.5vw; } }
        @media (max-width: 800px) {
          #TOP ul li a .googlestore, #TOP ul li a .applestore {
            margin: 1vw .5vw;
            width: 15vw;
            height: 4.5vw; } }
        @media (max-width: 550px) {
          #TOP ul li a .googlestore, #TOP ul li a .applestore {
            margin: 2vw 1vw;
            width: 40vw;
            height: 12vw; } }
      #TOP ul li a .googlestore {
        background-image: url("../images/store_google.svg"); }
      #TOP ul li a .applestore {
        background-image: url("../images/store_apple.svg"); }

.wavebox {
  position: relative;
  width: 100%;
  height: 6vw;
  margin-top: 41vw; }
  @media (max-width: 800px) {
    .wavebox {
      margin-top: 50vw; } }
  @media (max-width: 550px) {
    .wavebox {
      margin-top: 162vw; } }
  .wavebox .editorial {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0; }
    .wavebox .editorial .parallax use {
      animation: move-forever 24s linear infinite; }
      .wavebox .editorial .parallax use:nth-child(1) {
        animation-delay: -2s; }
      .wavebox .editorial .parallax use:nth-child(2) {
        animation-delay: -2s;
        animation-duration: 10s; }
      .wavebox .editorial .parallax use:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 6s; }
@keyframes move-forever {
  0% {
    transform: translate(-90px, 0%); }
  100% {
    transform: translate(85px, 0%); } }
.titlefive {
  display: none; }
  @media (max-width: 550px) {
    .titlefive {
      display: block;
      position: relative;
      background-color: white;
      color: #2f70b7;
      font-size: 7vw;
      padding: 8vw 0 12vw; }
      .titlefive::before {
        content: "新";
        position: absolute;
        background-color: #ef2847;
        border-radius: 50%;
        color: white;
        left: 44.5vw;
        top: 7vw;
        padding: 2vw; }
      .titlefive::after {
        content: "\ead0";
        font-family: "Material Symbols Outlined";
        position: absolute;
        color: #ef2847;
        font-size: 8vw;
        left: 46vw;
        top: 18vw; }
      .titlefive span {
        color: white; } }

#FiveFunction {
  position: relative;
  background: url("../images/pattern_fivefunction.svg") no-repeat;
  background-color: white;
  background-position: 50vw 1vw;
  background-size: 67.3vw;
  padding: 9vw 0 18vw; }
  @media (max-width: 550px) {
    #FiveFunction {
      background-position: top center;
      background-size: 180%;
      padding: 16vw 0 65vw; } }
  #FiveFunction::before {
    content: "";
    position: absolute;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    left: 0;
    bottom: 0;
    background-color: #91b4d8;
    width: 100%;
    height: 10.4vw; }
  #FiveFunction aside {
    position: absolute;
    background: url("../images/circle_pp1.webp") no-repeat center;
    background-size: 60%;
    width: 26.3vw;
    height: 24.6vw;
    left: 1.5vw;
    top: 5vw; }
    @media (max-width: 550px) {
      #FiveFunction aside {
        width: 52.6vw;
        height: 49.2vw;
        left: 1.5vw;
        bottom: 26vw;
        top: inherit; } }
    #FiveFunction aside::before {
      content: "";
      position: absolute;
      background: url("../images/circle_blue.svg") no-repeat center;
      background-size: contain;
      animation: rotation4 36s infinite linear;
      left: 0;
      width: inherit;
      height: inherit; }
  #FiveFunction h6 {
    position: absolute;
    background: url("../images/circle_pp2.webp") no-repeat center;
    background-size: 55%;
    width: 20vw;
    height: 20vw;
    left: 19.5vw;
    top: 19.5vw; }
    @media (max-width: 550px) {
      #FiveFunction h6 {
        width: 40vw;
        height: 40vw;
        right: 13vw;
        bottom: 19vw;
        top: inherit;
        left: inherit; } }
    #FiveFunction h6::before {
      content: "";
      position: absolute;
      background: url("../images/circle_pink.svg") no-repeat center;
      background-size: contain;
      animation: rotation3 24s infinite linear;
      left: 0;
      width: inherit;
      height: inherit; }
  #FiveFunction ul {
    position: relative;
    z-index: 2;
    width: 55vw;
    margin: 0 26vw; }
    @media (max-width: 800px) {
      #FiveFunction ul {
        width: 65vw; } }
    @media (max-width: 550px) {
      #FiveFunction ul {
        width: 100%;
        margin: 5vw auto; } }
    #FiveFunction ul li {
      position: relative;
      display: inline-block;
      vertical-align: top;
      text-align: left;
      line-height: 1.2;
      background: white;
      border-radius: .8vw;
      box-shadow: 0 0.25vw 0.45vw rgba(0, 0, 0, 0.15);
      margin: 0 1.7vw 4.8vw;
      padding: .8vw 3.5vw .8vw 1.5vw;
      transition: .4s all; }
      @media (max-width: 550px) {
        #FiveFunction ul li {
          box-shadow: 0 0.75vw 1.5vw rgba(0, 0, 0, 0.15);
          border-radius: 2.7vw;
          padding: 2.7vw 8.5vw 2.7vw 4.8vw;
          margin: 0 2.5vw 10vw; } }
      #FiveFunction ul li:hover {
        transform: scale(1.05); }
      #FiveFunction ul li::before {
        content: "\e913";
        font-family: "Material Symbols Outlined";
        position: absolute;
        color: aqua;
        font-size: 2.8vw;
        right: .8vw;
        bottom: .6vw; }
        @media (max-width: 550px) {
          #FiveFunction ul li::before {
            font-size: 9vw;
            bottom: 1vw; } }
      #FiveFunction ul li::after {
        content: "";
        position: absolute;
        background: url("../images/pop.svg") no-repeat center;
        background-size: contain;
        left: -1.2vw;
        top: -.5vw;
        width: 2.2vw;
        height: 2.4vw; }
        @media (max-width: 550px) {
          #FiveFunction ul li::after {
            width: 7.5vw;
            height: 8.2vw;
            left: -4.1vw;
            top: -1.7vw; } }
      #FiveFunction ul li h3 {
        font-weight: 700;
        color: #2f70b7;
        font-size: 1.6vw; }
        @media (max-width: 550px) {
          #FiveFunction ul li h3 {
            font-size: 5.4vw; } }
      #FiveFunction ul li h4 {
        color: #333333;
        font-size: 1.1vw; }
        @media (max-width: 550px) {
          #FiveFunction ul li h4 {
            font-size: 3.3vw; } }
  #FiveFunction h5 {
    position: relative;
    color: aqua;
    font-size: 1.3vw; }
    @media (max-width: 550px) {
      #FiveFunction h5 {
        display: none; } }
    #FiveFunction h5::before {
      content: "新";
      position: absolute;
      background-color: aqua;
      border-radius: 50%;
      color: white;
      margin: 0 4.7vw;
      top: -.5vw;
      padding: .5vw; }
      @media (max-width: 800px) {
        #FiveFunction h5::before {
          margin: 0 6vw; } }
    #FiveFunction h5::after {
      content: "\eacf";
      font-family: "Material Symbols Outlined";
      position: absolute;
      color: aqua;
      font-size: 1.6vw;
      margin: 0 -6.7vw;
      top: -2vw; }
      @media (max-width: 800px) {
        #FiveFunction h5::after {
          margin: 0 -7.6vw; } }
    #FiveFunction h5 span {
      color: white; }

#HiNote {
  position: relative;
  background-color: #91b4d8;
  margin-top: -1px;
  padding: 0 0 8vw; }
  @media (max-width: 800px) {
    #HiNote {
      padding: 2vw 0 12vw; } }
  @media (max-width: 550px) {
    #HiNote {
      padding: 9vw 0 16vw; } }
  #HiNote aside::after, #HiNote aside::before {
    content: "";
    background: url("../images/bg_learningprocess.webp") no-repeat;
    background-size: cover;
    position: absolute;
    bottom: -1px;
    width: 50%;
    height: 10.4vw; }
  #HiNote aside::after {
    clip-path: polygon(0 0%, 0% 100%, 100% 100%);
    left: 0; }
  #HiNote aside::before {
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    right: 0; }
  #HiNote h2 {
    color: aqua; }
  #HiNote h3 {
    color: white;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: .1em;
    font-size: 1vw;
    padding-top: .7vw; }
    @media (max-width: 800px) {
      #HiNote h3 {
        font-size: 1.5vw;
        padding-top: 1vw; } }
    @media (max-width: 550px) {
      #HiNote h3 {
        font-size: 3.5vw;
        padding-top: 2.5vw; } }
    #HiNote h3::after, #HiNote h3::before {
      content: "";
      border: solid aqua 1px;
      position: absolute;
      z-index: 1; }
    #HiNote h3::after {
      animation: rotation3 36s infinite linear;
      width: 10.5vw;
      height: 10.5vw;
      top: -18vw;
      margin: 0 -7vw; }
      @media (max-width: 800px) {
        #HiNote h3::after {
          width: 13vw;
          height: 13vw;
          top: -24vw;
          margin: 0 -11vw; } }
      @media (max-width: 550px) {
        #HiNote h3::after {
          width: 20vw;
          height: 20vw;
          top: -40vw;
          margin: 0 -28vw; } }
    #HiNote h3::before {
      animation: rotation3 8s infinite linear;
      width: 4.5vw;
      height: 4.5vw;
      top: -12vw;
      margin: 0 4vw; }
      @media (max-width: 800px) {
        #HiNote h3::before {
          width: 6vw;
          height: 6vw;
          top: -17vw;
          margin: 0 7vw; } }
      @media (max-width: 550px) {
        #HiNote h3::before {
          width: 10vw;
          height: 10vw;
          top: -30vw;
          margin: 0 20vw; } }
  #HiNote ul {
    margin-top: 2.8vw; }
    @media (max-width: 800px) {
      #HiNote ul {
        margin-top: 4vw; } }
    @media (max-width: 550px) {
      #HiNote ul {
        margin-top: 8vw; } }
    #HiNote ul li {
      display: inline-block;
      vertical-align: top;
      width: 16.7vw;
      margin: 0 .5vw; }
      @media (max-width: 800px) {
        #HiNote ul li {
          width: 23vw;
          margin: 0 auto; } }
      @media (max-width: 550px) {
        #HiNote ul li {
          width: 46vw;
          margin: 2vw auto; } }
      #HiNote ul li h4 {
        color: white;
        font-weight: 700;
        font-size: 1.8vw;
        padding-bottom: .5vw; }
        @media (max-width: 800px) {
          #HiNote ul li h4 {
            font-size: 2.7vw;
            padding-bottom: .75vw; } }
        @media (max-width: 550px) {
          #HiNote ul li h4 {
            font-size: 5.4vw;
            padding-bottom: 1.5vw; } }
        #HiNote ul li h4 span {
          color: #1452e8; }
      #HiNote ul li main {
        position: relative;
        background: url("../images/square.svg") bottom center no-repeat;
        background-size: 66%;
        height: 10.2vw; }
        @media (max-width: 800px) {
          #HiNote ul li main {
            height: 15.3vw; } }
        @media (max-width: 550px) {
          #HiNote ul li main {
            height: 30.6vw; } }
        #HiNote ul li main::after {
          position: absolute;
          content: "\e913";
          font-family: "Material Symbols Outlined";
          color: #ef2847;
          font-size: 2vw;
          margin: 0 -1vw;
          bottom: 2vw; }
          @media (max-width: 800px) {
            #HiNote ul li main::after {
              font-size: 3.5vw;
              margin: 0 -1.5vw;
              bottom: 2.5vw; } }
          @media (max-width: 550px) {
            #HiNote ul li main::after {
              font-size: 7vw;
              margin: 0 -3.5vw;
              bottom: 5vw; } }
        #HiNote ul li main::before {
          position: absolute;
          content: "";
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          width: 6vw;
          height: 6vw;
          margin: 0 -3vw;
          top: 0; }
          @media (max-width: 800px) {
            #HiNote ul li main::before {
              width: 9vw;
              height: 9vw;
              margin: 0 -4.5vw; } }
          @media (max-width: 550px) {
            #HiNote ul li main::before {
              width: 18vw;
              height: 18vw;
              margin: 0 -9vw; } }
        #HiNote ul li main.hn1::before {
          background-image: url("../images/icon_openbook.svg"); }
        #HiNote ul li main.hn2::before {
          background-image: url("../images/icon_notebook+pen.svg"); }
        #HiNote ul li main.hn3::before {
          background-image: url("../images/icon_apple+books.svg"); }
        #HiNote ul li main.hn4::before {
          background-image: url("../images/icon_memo+pen.svg"); }
        #HiNote ul li main article {
          position: absolute;
          background: rgba(255, 255, 255, 0.88);
          transition: .4s all;
          opacity: 0;
          z-index: 1;
          border-radius: .9vw;
          width: 100%;
          height: 100%; }
          @media (max-width: 800px) {
            #HiNote ul li main article {
              border-radius: 1.5vw; } }
          @media (max-width: 550px) {
            #HiNote ul li main article {
              border-radius: 3vw; } }
          #HiNote ul li main article:hover {
            opacity: 1; }
          #HiNote ul li main article h5 {
            color: #2f70b7;
            line-height: 1.5;
            letter-spacing: .1em;
            font-size: 1vw;
            padding-top: 2vw; }
            @media (max-width: 800px) {
              #HiNote ul li main article h5 {
                font-size: 1.5vw;
                padding-top: 3vw; } }
            @media (max-width: 550px) {
              #HiNote ul li main article h5 {
                font-size: 3vw;
                padding-top: 6vw; } }
  #HiNote .asst {
    background: url("../images/pattern_hinote.svg") no-repeat center top;
    background-size: contain;
    margin: -1.1vw auto;
    width: 100%;
    height: 12.87vw; }
    @media (max-width: 800px) {
      #HiNote .asst {
        height: 17vw;
        margin: -1.5vw auto; } }
    @media (max-width: 550px) {
      #HiNote .asst {
        background-image: url("../images/pattern_hinote_m.svg");
        height: 28vw;
        margin: 3vw auto; } }

#LearningProcess {
  position: relative;
  background: url("../images/bg_learningprocess.webp") no-repeat;
  background-size: cover;
  padding: 5vw 0 18vw; }
  @media (max-width: 800px) {
    #LearningProcess {
      padding: 5vw 0 22vw; } }
  @media (max-width: 550px) {
    #LearningProcess {
      padding: 12vw 0 28vw; } }
  #LearningProcess::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background-color: #60e8e1;
    background-image: url("../images/playstation-pattern.png");
    width: 100%;
    height: 10.4vw; }
  #LearningProcess aside::after, #LearningProcess aside::before {
    content: "";
    position: absolute; }
  #LearningProcess aside::after {
    background: url("../images/border.svg") repeat-x bottom;
    mix-blend-mode: overlay;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 15vw; }
    @media (max-width: 800px) {
      #LearningProcess aside::after {
        height: 18vw; } }
    @media (max-width: 550px) {
      #LearningProcess aside::after {
        height: 36vw;
        background-size: cover; } }
  #LearningProcess aside::before {
    background: url("../images/globe.svg") no-repeat;
    mix-blend-mode: soft-light;
    animation: rotation3 500s infinite linear;
    left: 19vw;
    bottom: -34vw;
    width: 62vw;
    height: 62vw; }
    @media (max-width: 800px) {
      #LearningProcess aside::before {
        animation-play-state: paused;
        left: 16vw;
        bottom: -36vw;
        width: 68vw;
        height: 68vw; } }
    @media (max-width: 550px) {
      #LearningProcess aside::before {
        left: 6vw;
        bottom: -40vw;
        width: 88vw;
        height: 88vw; } }
  #LearningProcess h2 {
    color: aqua; }
  #LearningProcess ul {
    position: relative; }
    @media (max-width: 550px) {
      #LearningProcess ul {
        display: inline-block;
        vertical-align: top;
        margin: 0 7.5vw; } }
    #LearningProcess ul li {
      position: relative;
      display: inline-block;
      font-weight: 400;
      color: white;
      font-size: 1.4vw;
      margin: 0 3.7vw; }
      @media (max-width: 800px) {
        #LearningProcess ul li {
          font-size: 2.1vw;
          margin: 0 5.5vw; } }
      @media (max-width: 550px) {
        #LearningProcess ul li {
          display: block;
          font-size: 4.2vw;
          margin: 12vw auto; } }
      #LearningProcess ul li span {
        font-weight: 700; }
      #LearningProcess ul li.lpa span {
        color: aqua; }
      #LearningProcess ul li.lpo span {
        color: #ef2847; }
      #LearningProcess ul li::before {
        content: "";
        position: absolute;
        background-size: contain;
        background-repeat: no-repeat;
        left: -3.2vw;
        width: 2.9vw;
        height: 2.9vw; }
        @media (max-width: 800px) {
          #LearningProcess ul li::before {
            left: -4.8vw;
            width: 4.3vw;
            height: 4.3vw; } }
        @media (max-width: 550px) {
          #LearningProcess ul li::before {
            left: -9vw;
            width: 8.4vw;
            height: 8.4vw; } }
      #LearningProcess ul li.lp1::before {
        background-image: url("../images/smallicon1.svg"); }
      #LearningProcess ul li.lp2::before {
        background-image: url("../images/smallicon2.svg"); }
      #LearningProcess ul li.lp3::before {
        background-image: url("../images/smallicon3.svg"); }
      #LearningProcess ul li.lp4::before {
        background-image: url("../images/smallicon4.svg"); }
      #LearningProcess ul li.lp5::before {
        background-image: url("../images/smallicon5.svg"); }
      #LearningProcess ul li.lp6::before {
        background-image: url("../images/smallicon6.svg"); }
      #LearningProcess ul li::after {
        content: "";
        position: absolute;
        width: 1px;
        height: 3.8vw; }
        @media (max-width: 550px) {
          #LearningProcess ul li::after {
            width: 8vw;
            height: 1px; } }
      #LearningProcess ul li.lpa::after {
        background-color: aqua; }
      #LearningProcess ul li.lpo::after {
        background-color: #ef2847; }
    #LearningProcess ul.lponetwothree li::after {
      left: -1.75vw;
      top: 2.9vw; }
      @media (max-width: 800px) {
        #LearningProcess ul.lponetwothree li::after {
          left: -2.6vw;
          top: 4.3vw; } }
      @media (max-width: 550px) {
        #LearningProcess ul.lponetwothree li::after {
          left: 17vw;
          top: 4.3vw; } }
    #LearningProcess ul.lpfourfivesix li::after {
      left: -1.75vw;
      top: -3.8vw; }
      @media (max-width: 800px) {
        #LearningProcess ul.lpfourfivesix li::after {
          left: -2.6vw;
          top: -3.8vw; } }
      @media (max-width: 550px) {
        #LearningProcess ul.lpfourfivesix li::after {
          left: -17vw;
          top: 4.3vw; } }
  #LearningProcess .lponetwothree {
    padding: 4.6vw 0 0 20vw; }
    @media (max-width: 800px) {
      #LearningProcess .lponetwothree {
        padding: 8vw 0 0 20vw; } }
    @media (max-width: 550px) {
      #LearningProcess .lponetwothree {
        padding: 0 0 0 9.2vw; } }
  #LearningProcess .lpfourfivesix {
    padding: 0 0 0 8vw;
    margin-top: -2px; }
    @media (max-width: 550px) {
      #LearningProcess .lpfourfivesix {
        padding: 8vw 0 0 8.8vw; } }
    #LearningProcess .lpfourfivesix::before {
      content: "";
      position: absolute;
      border: 1px solid rgba(255, 255, 255, 0.2);
      animation: rotation4 30s infinite linear;
      border-radius: 1vw;
      width: 15vw;
      height: 22vw;
      left: 11vw;
      top: -16vw; }
      @media (max-width: 550px) {
        #LearningProcess .lpfourfivesix::before {
          border-radius: 2vw;
          width: 22.5vw;
          height: 33vw;
          left: -17vw;
          bottom: -24vw;
          top: inherit; } }
  #LearningProcess ol {
    position: relative;
    background-image: linear-gradient(to right, aqua 18%, #ef2847 100%);
    width: 68vw;
    height: .2vw;
    margin: 3.9vw auto; }
    @media (max-width: 800px) {
      #LearningProcess ol {
        width: 84vw;
        height: .3vw;
        margin: 3.9vw auto; } }
    @media (max-width: 550px) {
      #LearningProcess ol {
        display: inline-block;
        background-image: linear-gradient(to bottom, aqua 0%, #ef2847 80%);
        width: .8vw;
        height: 93vw; } }
    #LearningProcess ol::after {
      content: "";
      position: absolute;
      background-color: #ef2847;
      border-radius: 50%;
      right: -.5vw;
      top: -.4vw;
      width: 1vw;
      height: 1vw; }
      @media (max-width: 800px) {
        #LearningProcess ol::after {
          right: -.5vw;
          top: -.6vw;
          width: 1.5vw;
          height: 1.5vw; } }
      @media (max-width: 550px) {
        #LearningProcess ol::after {
          background-color: aqua;
          right: -1vw;
          top: 0;
          width: 3vw;
          height: 3vw; } }
    #LearningProcess ol::before {
      content: "";
      position: absolute;
      background: url("../images/ipad_learningprocess.webp") no-repeat;
      background-size: contain;
      z-index: 1;
      animation: rotation2 3.5s infinite linear;
      width: 14.3vw;
      height: 26vw;
      left: -1vw;
      top: -13vw; }
      @media (max-width: 550px) {
        #LearningProcess ol::before {
          width: 21.5vw;
          height: 39vw;
          left: -1.5vw;
          top: -19.5vw; } }
      @media (max-width: 550px) {
        #LearningProcess ol::before {
          width: 21.5vw;
          height: 39vw;
          left: -10vw;
          bottom: -15vw;
          top: inherit; } }

#OtherFunction {
  position: relative;
  background-image: url("../images/playstation-pattern.png");
  background-blend-mode: multiply;
  margin-top: -1px;
  padding-bottom: 5vw; }
  @media (max-width: 550px) {
    #OtherFunction {
      padding: 3vw 0 6vw; } }
  #OtherFunction #Phone {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 46.3vw; }
    @media (max-width: 800px) {
      #OtherFunction #Phone {
        height: 65vw;
        padding-bottom: 6vw; } }
    @media (max-width: 550px) {
      #OtherFunction #Phone {
        height: 180vw;
        padding-bottom: 48vw; } }
    #OtherFunction #Phone .app {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center; }
      #OtherFunction #Phone .app .cardList {
        position: absolute;
        width: 35%;
        height: auto;
        margin-top: -4vw; }
        @media (max-width: 800px) {
          #OtherFunction #Phone .app .cardList {
            width: 55%; } }
        @media (max-width: 550px) {
          #OtherFunction #Phone .app .cardList {
            width: 100%; } }
        #OtherFunction #Phone .app .cardList button {
          border: 0;
          background: rgba(0, 0, 0, 0);
          cursor: pointer;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          z-index: 100; }
          #OtherFunction #Phone .app .cardList button:focus {
            border: 0;
            outline: 0; }
          #OtherFunction #Phone .app .cardList button::-moz-focus-inner {
            border-color: transparent; }
          #OtherFunction #Phone .app .cardList button::before {
            font-family: "Material Symbols Outlined";
            font-size: 2vw; }
            @media (max-width: 800px) {
              #OtherFunction #Phone .app .cardList button::before {
                font-size: 4vw; } }
            @media (max-width: 550px) {
              #OtherFunction #Phone .app .cardList button::before {
                font-size: 8vw;
                color: white; } }
          #OtherFunction #Phone .app .cardList button.btn--left {
            left: -12%; }
            @media (max-width: 550px) {
              #OtherFunction #Phone .app .cardList button.btn--left {
                left: 4%; } }
            #OtherFunction #Phone .app .cardList button.btn--left::before {
              content: "\eac3"; }
          #OtherFunction #Phone .app .cardList button.btn--right {
            right: -12%; }
            @media (max-width: 550px) {
              #OtherFunction #Phone .app .cardList button.btn--right {
                right: 4%; } }
            #OtherFunction #Phone .app .cardList button.btn--right::before {
              content: "\eac9"; }
        #OtherFunction #Phone .app .cardList .cards__wrapper {
          position: relative;
          width: 100%;
          height: 100%;
          perspective: 1000px; }
          #OtherFunction #Phone .app .cardList .cards__wrapper .card {
            position: absolute;
            left: 50%;
            top: 50%;
            display: inline-block;
            width: 10.5vw;
            height: 19vw;
            transition: transform 800ms ease, opacity 800ms ease;
            user-select: none;
            margin: -9.5vw -5.25vw; }
            @media (max-width: 800px) {
              #OtherFunction #Phone .app .cardList .cards__wrapper .card {
                width: 15.75vw;
                height: 28.5vw;
                margin: -13vw -7.8vw; } }
            @media (max-width: 550px) {
              #OtherFunction #Phone .app .cardList .cards__wrapper .card {
                width: 52.5vw;
                height: 95vw;
                margin: -47.5vw -26.25vw; } }
            #OtherFunction #Phone .app .cardList .cards__wrapper .card::before {
              content: "";
              position: absolute;
              left: 5%;
              top: 0;
              width: 90%;
              height: 100%;
              background: black;
              z-index: 1;
              transition: opacity 800ms ease;
              opacity: .5;
              border-radius: 1.8vw; }
              @media (max-width: 550px) {
                #OtherFunction #Phone .app .cardList .cards__wrapper .card::before {
                  border-radius: 8vw; } }
            #OtherFunction #Phone .app .cardList .cards__wrapper .card.current--card {
              transform: rotate(0) translateX(0) scale(1.2);
              opacity: 1; }
              #OtherFunction #Phone .app .cardList .cards__wrapper .card.current--card::before {
                opacity: 0; }
            #OtherFunction #Phone .app .cardList .cards__wrapper .card.previous--card {
              transform: rotateY(25deg) scale(0.9) translateX(-13vw); }
              @media (max-width: 800px) {
                #OtherFunction #Phone .app .cardList .cards__wrapper .card.previous--card {
                  transform: rotateY(25deg) scale(0.9) translateX(-20vw); } }
              @media (max-width: 550px) {
                #OtherFunction #Phone .app .cardList .cards__wrapper .card.previous--card {
                  transform: rotateY(25deg) scale(0.9) translateX(-60vw); } }
            #OtherFunction #Phone .app .cardList .cards__wrapper .card.next--card {
              transform: rotateY(-25deg) scale(0.9) translateX(13vw); }
              @media (max-width: 800px) {
                #OtherFunction #Phone .app .cardList .cards__wrapper .card.next--card {
                  transform: rotateY(-25deg) scale(0.9) translateX(20vw); } }
              @media (max-width: 550px) {
                #OtherFunction #Phone .app .cardList .cards__wrapper .card.next--card {
                  transform: rotateY(-25deg) scale(0.9) translateX(60vw); } }
            #OtherFunction #Phone .app .cardList .cards__wrapper .card .card__image {
              position: relative;
              width: 100%;
              height: 100%; }
              #OtherFunction #Phone .app .cardList .cards__wrapper .card .card__image img {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                object-fit: contain; }
      #OtherFunction #Phone .app .infoList {
        position: absolute;
        width: 100%;
        height: 100%; }
        #OtherFunction #Phone .app .infoList .info__wrapper {
          position: relative;
          width: 100%;
          height: 100%; }
          #OtherFunction #Phone .app .infoList .info__wrapper .info {
            transition: transform 800ms ease, opacity 800ms ease; }
            #OtherFunction #Phone .app .infoList .info__wrapper .info.current--info {
              text-align: center;
              opacity: 1;
              display: block;
              transform: rotate(0) translateX(0) scale(1); }
            #OtherFunction #Phone .app .infoList .info__wrapper .info.previous--info, #OtherFunction #Phone .app .infoList .info__wrapper .info.info.next--info {
              opacity: 0;
              display: none; }
            #OtherFunction #Phone .app .infoList .info__wrapper .info h1 {
              padding-top: 2.2vw;
              text-transform: uppercase; }
              @media (max-width: 800px) {
                #OtherFunction #Phone .app .infoList .info__wrapper .info h1 {
                  padding-top: 3.3vw; } }
              @media (max-width: 550px) {
                #OtherFunction #Phone .app .infoList .info__wrapper .info h1 {
                  padding-top: 6.6vw; } }
            #OtherFunction #Phone .app .infoList .info__wrapper .info h2 {
              text-transform: uppercase; }
      #OtherFunction #Phone .app .app__bg {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;
        pointer-events: all; }
        #OtherFunction #Phone .app .app__bg .app__bg__image {
          position: absolute;
          left: 50%;
          top: 50%;
          width: 100%;
          transition: transform 1000ms ease, opacity 1000ms ease;
          transform: translate(-50%, 13vw) translateX(0); }
          @media (max-width: 800px) {
            #OtherFunction #Phone .app .app__bg .app__bg__image {
              margin-top: 7vw; } }
          @media (max-width: 550px) {
            #OtherFunction #Phone .app .app__bg .app__bg__image {
              margin-top: 48vw; } }
          #OtherFunction #Phone .app .app__bg .app__bg__image.previous--image, #OtherFunction #Phone .app .app__bg .app__bg__image.next--image {
            opacity: 0; }
          #OtherFunction #Phone .app .app__bg .app__bg__image.previous--image {
            transform: translate(-50%, 13vw) translateX(-25%); }
          #OtherFunction #Phone .app .app__bg .app__bg__image.next--image {
            transform: translate(-50%, 13vw) translateX(25%); }
          #OtherFunction #Phone .app .app__bg .app__bg__image li {
            position: relative;
            display: inline-block;
            vertical-align: top;
            background: url("../images/box1.svg") no-repeat center;
            background-size: contain;
            transition: .4s all;
            width: 14vw;
            height: 8vw;
            margin: 0 1vw; }
            @media (max-width: 800px) {
              #OtherFunction #Phone .app .app__bg .app__bg__image li {
                width: 21vw;
                height: 12vw;
                margin: 1vw .5vw; } }
            @media (max-width: 550px) {
              #OtherFunction #Phone .app .app__bg .app__bg__image li {
                width: 46.2vw;
                height: 26.4vw;
                margin: 4vw .3vw; } }
            #OtherFunction #Phone .app .app__bg .app__bg__image li:hover {
              background: url("../images/box2.svg") no-repeat center;
              transform: scale(1.05); }
            #OtherFunction #Phone .app .app__bg .app__bg__image li::before {
              font-family: "Material Symbols Outlined";
              color: #ef2847;
              content: "\e1c6";
              position: absolute;
              left: 1vw;
              top: -2.1vw;
              font-size: 2.3vw; }
              @media (max-width: 800px) {
                #OtherFunction #Phone .app .app__bg .app__bg__image li::before {
                  left: 1.5vw;
                  top: -3.2vw;
                  font-size: 3.45vw; } }
              @media (max-width: 550px) {
                #OtherFunction #Phone .app .app__bg .app__bg__image li::before {
                  left: 3vw;
                  top: -7.5vw;
                  font-size: 8vw; } }
            #OtherFunction #Phone .app .app__bg .app__bg__image li::after {
              content: "►Hi家教APP神隊友";
              position: absolute;
              font-style: italic;
              font-weight: 500;
              color: #ef2847;
              left: 1vw;
              top: .6vw;
              font-size: .6em; }
              @media (max-width: 1440px) {
                #OtherFunction #Phone .app .app__bg .app__bg__image li::after {
                  content: "Hi家教APP神隊友";
                  left: 3.5vw;
                  top: -1.2vw; } }
              @media (max-width: 800px) {
                #OtherFunction #Phone .app .app__bg .app__bg__image li::after {
                  content: "Hi家教APP神隊友";
                  left: 5vw;
                  top: -1.8vw; } }
              @media (max-width: 550px) {
                #OtherFunction #Phone .app .app__bg .app__bg__image li::after {
                  content: "Hi家教APP神隊友";
                  left: 11vw;
                  top: -3.5vw;
                  font-size: 2.5vw; } }
            #OtherFunction #Phone .app .app__bg .app__bg__image li h6 {
              font-weight: 300;
              font-size: 1.1vw;
              line-height: 1.3;
              letter-spacing: .1em;
              margin-top: 2.25vw; }
              @media (max-width: 800px) {
                #OtherFunction #Phone .app .app__bg .app__bg__image li h6 {
                  font-size: 1.65vw;
                  margin-top: 3.5vw; } }
              @media (max-width: 550px) {
                #OtherFunction #Phone .app .app__bg .app__bg__image li h6 {
                  font-size: 3.8vw;
                  margin-top: 6.5vw; } }
              #OtherFunction #Phone .app .app__bg .app__bg__image li h6 span {
                font-weight: 700;
                color: #ef2847; }
          #OtherFunction #Phone .app .app__bg .app__bg__image img {
            width: 100%;
            height: 100%;
            object-fit: cover; }
    #OtherFunction #Phone .loading__wrapper {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #000;
      z-index: 200; }
      #OtherFunction #Phone .loading__wrapper .loader--text {
        color: #fff;
        font-family: "Montserrat";
        font-weight: 500;
        margin-bottom: 1.4rem; }
      #OtherFunction #Phone .loading__wrapper .loader {
        position: relative;
        width: 200px;
        height: 2px;
        background: rgba(255, 255, 255, 0.25); }
        #OtherFunction #Phone .loading__wrapper .loader span {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: red;
          transform: scaleX(0);
          transform-origin: left; }

#MemberComment {
  position: relative;
  background-color: white;
  height: 38vw;
  padding: 6vw 0; }
  @media (max-width: 800px) {
    #MemberComment {
      height: inherit;
      padding: 9vw 0; } }
  @media (max-width: 550px) {
    #MemberComment {
      padding: 18vw 0; } }
  #MemberComment::before {
    content: "";
    position: absolute;
    background: url("../images/bg_comment.webp") no-repeat center;
    background-size: 102%;
    clip-path: polygon(6% 0%, 94% 0%, 100% 11%, 100% 89%, 94% 100%, 6% 100%, 0% 89%, 0% 11%);
    width: 100%;
    height: 98%;
    left: 0;
    top: 1%; }
    @media (max-width: 800px) {
      #MemberComment::before {
        clip-path: polygon(10% 0%, 90% 0%, 100% 11%, 100% 89%, 90% 100%, 10% 100%, 0% 89%, 0% 11%);
        background-size: cover; } }
    @media (max-width: 550px) {
      #MemberComment::before {
        background-position: left;
        clip-path: polygon(14% 0%, 85% 0%, 100% 5%, 100% 94%, 85% 100%, 14% 100%, 0% 94%, 0% 5%); } }
  #MemberComment h2 {
    color: #333333; }
  #MemberComment ul {
    position: absolute;
    left: 11%;
    top: 23%;
    width: 55%; }
    @media (max-width: 800px) {
      #MemberComment ul {
        position: relative;
        left: inherit;
        top: inherit;
        width: 80%;
        margin: 6vw auto 0 1vw; } }
    @media (max-width: 550px) {
      #MemberComment ul {
        width: inherit;
        margin: 6vw auto 0; } }
    #MemberComment ul li {
      position: absolute; }
      @media (max-width: 800px) {
        #MemberComment ul li {
          position: relative;
          display: inline-block; } }
      #MemberComment ul li::after {
        content: "";
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        width: 4.2vw;
        height: 4.2vw; }
        @media (max-width: 550px) {
          #MemberComment ul li::after {
            width: 12.6vw;
            height: 12.6vw; } }
@keyframes jump {
  0% {
    top: -20px; }
  40% {
    top: -45px; }
  50% {
    top: -25px; }
  80% {
    top: -30px; }
  100% {
    top: -20px; } }
@keyframes jump2 {
  0% {
    top: 15px; }
  40% {
    top: -10px; }
  50% {
    top: 15px; }
  80% {
    top: -5px; }
  100% {
    top: 15px; } }
@keyframes jump3 {
  0% {
    top: -50px; }
  40% {
    top: -60px; }
  50% {
    top: -50px; }
  80% {
    top: -65px; }
  100% {
    top: -50px; } }
      #MemberComment ul li h3, #MemberComment ul li h4 {
        text-align: left;
        line-height: 1.8; }
      #MemberComment ul li h3 {
        font-weight: 400;
        font-size: .75vw; }
        @media (max-width: 550px) {
          #MemberComment ul li h3 {
            font-size: 2.8vw; } }
      #MemberComment ul li h4 {
        font-weight: 500;
        font-size: .85vw; }
        @media (max-width: 550px) {
          #MemberComment ul li h4 {
            font-size: 3vw; } }
      #MemberComment ul li.popw, #MemberComment ul li.popb {
        border-radius: 1.7vw;
        padding: 1.5vw;
        box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.15); }
        @media (max-width: 550px) {
          #MemberComment ul li.popw, #MemberComment ul li.popb {
            border-radius: 5.1vw;
            padding: 4.5vw; } }
        #MemberComment ul li.popw::before, #MemberComment ul li.popb::before {
          content: "";
          position: absolute;
          background-size: contain;
          filter: drop-shadow(7px 7px 0 rgba(0, 0, 0, 0.15));
          width: 2vw;
          height: 1.4vw;
          bottom: -1.4vw; }
          @media (max-width: 800px) {
            #MemberComment ul li.popw::before, #MemberComment ul li.popb::before {
              width: 3vw;
              height: 2.1vw;
              bottom: -1.9vw; } }
          @media (max-width: 550px) {
            #MemberComment ul li.popw::before, #MemberComment ul li.popb::before {
              width: 6vw;
              height: 4.2vw;
              bottom: -3.8vw; } }
      #MemberComment ul li.popw {
        background: white;
        color: #333333; }
        #MemberComment ul li.popw::before {
          background: url("../images/horn_white.svg") no-repeat left top;
          left: 25px; }
        #MemberComment ul li.popw span {
          color: #ef2847; }
      #MemberComment ul li.popb {
        background: #3a6ac9;
        color: white; }
        #MemberComment ul li.popb::before {
          background: url("../images/horn_blue.svg") no-repeat left top;
          right: 25px; }
        #MemberComment ul li.popb span {
          color: aqua; }
      #MemberComment ul li.pop1::after {
        background-image: url("../images/emoji_kiss.svg");
        right: 2vw;
        top: -1.5vw;
        animation: jump 1.5s infinite ease; }
      #MemberComment ul li.pop2 {
        margin: 4vw 0 0 15vw; }
        @media (max-width: 800px) {
          #MemberComment ul li.pop2 {
            margin: inherit; } }
        #MemberComment ul li.pop2::after {
          background-image: url("../images/emoji_smiling.svg");
          right: 3vw;
          top: -2vw;
          animation: jump 2s infinite ease; }
      #MemberComment ul li.pop3 {
        padding-right: 6vw;
        margin: 2vw 0 0 37vw; }
        @media (max-width: 550px) {
          #MemberComment ul li.pop3 {
            padding-right: 18vw; } }
        #MemberComment ul li.pop3::after {
          background-image: url("../images/emoji_like.svg");
          right: 1vw;
          top: .8vw;
          animation: jump2 1.5s infinite ease; }
      #MemberComment ul li.pop4 {
        padding-left: 4vw;
        margin: 11.5vw 0 0 3vw; }
        @media (max-width: 550px) {
          #MemberComment ul li.pop4 {
            padding-left: 12vw; } }
        #MemberComment ul li.pop4::after {
          background-image: url("../images/emoji_relieved.svg");
          left: -1vw;
          top: .8vw;
          animation: jump2 2.5s infinite ease; }
      #MemberComment ul li.pop5 {
        margin: 15vw 0 0 20vw; }
        #MemberComment ul li.pop5::after {
          background-image: url("../images/emoji_grinning.svg");
          right: 2vw;
          top: -3vw;
          animation: jump3 1s infinite ease; }
      #MemberComment ul li.pop6 {
        padding-right: 6vw;
        margin: 13vw 0 0 35vw; }
        @media (max-width: 550px) {
          #MemberComment ul li.pop6 {
            padding-right: 18vw; } }
        #MemberComment ul li.pop6::after {
          background-image: url("../images/emoji_hearteyes.svg");
          right: 1vw;
          top: .8vw;
          animation: jump2 2.5s infinite ease; }
      #MemberComment ul li.pop7 {
        margin: 21vw 0 0 -3vw; }
        #MemberComment ul li.pop7::after {
          background-image: url("../images/emoji_like.svg");
          right: 3vw;
          margin-top: -2vw;
          animation: jump2 1.5s infinite ease; }
      #MemberComment ul li.pop8 {
        padding-right: 6vw;
        margin: 25.5vw 0 0 15vw; }
        @media (max-width: 550px) {
          #MemberComment ul li.pop8 {
            padding-right: 18vw; } }
        #MemberComment ul li.pop8::after {
          background-image: url("../images/emoji_star.svg");
          right: 1vw;
          top: .8vw;
          animation: jump2 2s infinite ease; }
      #MemberComment ul li.pop9 {
        padding: 2.9vw 4vw;
        margin: 22vw 0 0 37vw; }
        @media (max-width: 550px) {
          #MemberComment ul li.pop9 {
            padding: 8.7vw 12vw; } }
        #MemberComment ul li.pop9::after {
          background-image: url("../images/emoji_smiling.svg");
          right: 1.8vw;
          top: .8vw;
          animation: jump2 3s infinite ease; }
          @media (max-width: 550px) {
            #MemberComment ul li.pop9::after {
              right: 5.4vw; } }
      #MemberComment ul li.pop10 {
        padding: 2.9vw 4vw;
        margin: 9vw 0 0 73vw; }
        @media (max-width: 550px) {
          #MemberComment ul li.pop10 {
            padding: 8.7vw 12vw; } }
        #MemberComment ul li.pop10::after {
          background-image: url("../images/emoji_heart.svg");
          right: 1.8vw;
          top: .8vw;
          animation: jump2 1.5s infinite ease; }
          @media (max-width: 550px) {
            #MemberComment ul li.pop10::after {
              right: 5.4vw; } }
      @media (max-width: 800px) {
        #MemberComment ul li.pop1, #MemberComment ul li.pop2, #MemberComment ul li.pop3, #MemberComment ul li.pop4, #MemberComment ul li.pop5, #MemberComment ul li.pop6, #MemberComment ul li.pop7, #MemberComment ul li.pop8, #MemberComment ul li.pop9, #MemberComment ul li.pop10 {
          margin: 1.5vw 1vw; } }
      @media (max-width: 550px) {
        #MemberComment ul li.pop1, #MemberComment ul li.pop2, #MemberComment ul li.pop3, #MemberComment ul li.pop4, #MemberComment ul li.pop5, #MemberComment ul li.pop6, #MemberComment ul li.pop7, #MemberComment ul li.pop8, #MemberComment ul li.pop9, #MemberComment ul li.pop10 {
          margin: 3vw auto; } }

#PromoVideo {
  position: relative;
  background: url("../images/map_hellows.svg") no-repeat center top;
  background-size: cover;
  background-color: #333333;
  padding: 6vw 0 1vw; }
  @media (max-width: 550px) {
    #PromoVideo {
      padding: 18vw 0 3vw; } }
  #PromoVideo .videobox {
    width: 37.5vw;
    margin: 0 auto; }
    @media (max-width: 1080px) {
      #PromoVideo .videobox {
        width: 55vw; } }
    @media (max-width: 800px) {
      #PromoVideo .videobox {
        width: 66vw; } }
    @media (max-width: 550px) {
      #PromoVideo .videobox {
        width: 90vw; } }
    #PromoVideo .videobox .video-container {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 30px;
      height: 0;
      overflow: hidden; }
      #PromoVideo .videobox .video-container iframe, #PromoVideo .videobox .video-container object, #PromoVideo .videobox .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
  #PromoVideo ul {
    position: relative;
    margin-top: 2vw; }
    @media (max-width: 800px) {
      #PromoVideo ul {
        margin-top: 4vw; } }
    @media (max-width: 550px) {
      #PromoVideo ul {
        margin-top: 10vw; } }
    #PromoVideo ul li {
      display: inline-block;
      vertical-align: top;
      margin: 0 .5vw; }
      #PromoVideo ul li.qrcode {
        background: url("../images/hi_qrcode.svg") no-repeat center;
        background-size: contain;
        width: 6.8vw;
        height: 6.8vw; }
        @media (max-width: 1080px) {
          #PromoVideo ul li.qrcode {
            width: 8vw;
            height: 8vw; } }
        @media (max-width: 800px) {
          #PromoVideo ul li.qrcode {
            width: 13.6vw;
            height: 13.6vw; } }
        @media (max-width: 550px) {
          #PromoVideo ul li.qrcode {
            display: none; } }
      #PromoVideo ul li a * {
        transition: .4s all; }
        #PromoVideo ul li a *:hover {
          transform: scale(1.05); }
      #PromoVideo ul li a:hover {
        text-decoration: none; }
      #PromoVideo ul li a p {
        background: aqua;
        color: black;
        font-weight: 700;
        letter-spacing: .1em;
        border-radius: 2vw;
        font-size: 1.5vw;
        padding: .5vw 1.5vw .8vw 2vw; }
        #PromoVideo ul li a p:hover {
          background: #ff0099;
          color: white; }
        @media (max-width: 800px) {
          #PromoVideo ul li a p {
            border-radius: 4vw;
            font-size: 3.2vw;
            padding: 1.5vw 3vw 1.5vw 4vw; } }
        @media (max-width: 550px) {
          #PromoVideo ul li a p {
            border-radius: 8vw;
            font-size: 6vw;
            padding: 2vw 6vw 2vw 8vw; } }
        #PromoVideo ul li a p::after {
          content: "\e913";
          font-family: "Material Symbols Outlined";
          font-weight: 400;
          vertical-align: text-bottom;
          font-size: 2.5vw; }
          @media (max-width: 800px) {
            #PromoVideo ul li a p::after {
              font-size: 4vw; } }
          @media (max-width: 550px) {
            #PromoVideo ul li a p::after {
              font-size: 8vw; } }
      #PromoVideo ul li a .googlestore, #PromoVideo ul li a .applestore {
        display: inline-block;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin: .6vw .2vw;
        width: 6.9vw;
        height: 2.1vw; }
        @media (max-width: 1080px) {
          #PromoVideo ul li a .googlestore, #PromoVideo ul li a .applestore {
            width: 10vw;
            height: 4vw; } }
        @media (max-width: 800px) {
          #PromoVideo ul li a .googlestore, #PromoVideo ul li a .applestore {
            margin-top: 2vw;
            width: 15vw;
            height: 4.5vw; } }
        @media (max-width: 550px) {
          #PromoVideo ul li a .googlestore, #PromoVideo ul li a .applestore {
            margin: 4vw 1vw;
            width: 40vw;
            height: 12vw; } }
      #PromoVideo ul li a .googlestore {
        background-image: url("../images/store_google_w.svg"); }
      #PromoVideo ul li a .applestore {
        background-image: url("../images/store_apple_w.svg"); }

#FreeTrial {
  position: relative;
  background: url("../images/map_hellows.svg") no-repeat center bottom;
  background-size: cover;
  background-color: #333333;
  width: 100%;
  margin-top: -1px;
  padding: 2.2vw 0; }
  @media (max-width: 800px) {
    #FreeTrial {
      padding: 4.4vw 0; } }
  @media (max-width: 550px) {
    #FreeTrial {
      padding: 11vw 0;
      margin: 0 auto; } }
  #FreeTrial * {
    box-sizing: border-box; }
  @media (max-width: 550px) {
    #FreeTrial section {
      width: 90%;
      margin: 0 5%; } }

#Footerz {
  position: relative;
  color: white;
  background: #ef2847;
  text-align: justify;
  font-family: "Microsoft JhengHei"; }
  @media (max-width: 550px) {
    #Footerz {
      padding: 6vw 0; } }
  @media (max-width: 550px) {
    #Footerz footer.edm_footer_001 .container {
      width: 90%;
      left: 0; } }
  @media (max-width: 550px) {
    #Footerz footer.edm_footer_001 .container .hi_footer_logo {
      width: 45%; } }
  #Footerz footer.edm_footer_001 .container ul a {
    color: white; }
  #Footerz footer.edm_footer_001 .container ul li svg.st0 {
    fill: white;
    color: white; }
  #Footerz svg {
    fill: white; }
  @media (max-width: 550px) {
    #Footerz li {
      width: 80%;
      margin: 0 10%; } }

#GoTop {
  display: block;
  visibility: visible;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s ease-in;
  text-align: center;
  z-index: 199;
  align-content: 50% 0 0 50%;
  overflow: hidden;
  position: relative; }
  #GoTop a {
    cursor: pointer;
    position: fixed;
    ransition: all .3s ease; }
  #GoTop a.topbtn, #GoTop a.topbtn:hover {
    background: rgba(0, 0, 0, 0.7);
    padding: .6vw .6vw .4vw;
    right: 4vw;
    bottom: 8vw;
    text-decoration: none; }
    @media (max-width: 800px) {
      #GoTop a.topbtn, #GoTop a.topbtn:hover {
        right: 0;
        bottom: 28vw;
        padding: 1.2vw 1.2vw .8vw; } }
    @media (max-width: 550px) {
      #GoTop a.topbtn, #GoTop a.topbtn:hover {
        right: 0;
        bottom: 30%;
        font-size: 5vw;
        padding: 2.8vw 2.8vw 2.3vw; } }
    #GoTop a.topbtn::before, #GoTop a.topbtn:hover::before {
      font-family: "Material Symbols Outlined";
      font-size: 2.5vw;
      color: #ef2847;
      content: "\e25a"; }
      @media (max-width: 800px) {
        #GoTop a.topbtn::before, #GoTop a.topbtn:hover::before {
          font-size: 4vw; } }
      @media (max-width: 800px) {
        #GoTop a.topbtn::before, #GoTop a.topbtn:hover::before {
          font-size: 8vw; } }

.fade_content * {
  transition: ease opacity .5s, ease transform .5s; }
  .fade_content *:nth-child(3n+2) {
    transition-delay: .1s; }
  .fade_content *:nth-child(3n+3) {
    transition-delay: .2s; }