@charset "UTF-8";
@media (max-width: 550px) {
  body {
    font-weight: 300; } }

.main {
  height: 50vw;
  position: relative;
  background: url(../images/bg.jpg) center top no-repeat;
  background-size: cover; }
  @media (max-width: 800px) {
    .main {
      height: 148vw; } }
  @media (max-width: 550px) {
    .main {
      height: 150vw; } }
  .main .logo {
    background: url("../images/hi-tr-logo.svg") no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    margin: 4vw 0 0 11.8vw;
    width: 13.5vw;
    height: 4vw; }
    @media (max-width: 800px) {
      .main .logo {
        background: url("../images/logo_m.svg") no-repeat;
        width: 33vw;
        height: 18vw;
        left: 15%;
        margin: 4vw 0; } }
    @media (max-width: 550px) {
      .main .logo {
        height: 20vw;
        left: 14%;
        margin: 3vw 0; } }
  .main .title1 {
    /*你的*/
    position: absolute;
    left: 50%;
    margin: 4vw 0 0 2.5vw;
    color: #749eba;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 700;
    font-size: 4.2vw; }
    @media (max-width: 800px) {
      .main .title1 {
        left: 16%;
        margin: 26vw 0;
        font-size: 13vw; } }
  .main .title2 {
    /*英語重擔*/
    position: absolute;
    left: 50%;
    margin: 8.8vw 0 0 2vw;
    color: #2a2e38;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 900;
    font-size: 6.2vw; }
    @media (max-width: 800px) {
      .main .title2 {
        left: 11%;
        margin: 40vw 0;
        font-size: 18vw;
        line-height: 18vw; } }
    .main .title2 br {
      display: none; }
      @media (max-width: 800px) {
        .main .title2 br {
          display: block; } }
  .main .title3 {
    /*我們來扛*/
    position: absolute;
    left: 50%;
    margin: 15.5vw 0 0 2.2vw;
    color: #d23228;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 700;
    font-size: 4.2vw; }
    @media (max-width: 800px) {
      .main .title3 {
        left: 4%;
        margin: 77vw 0;
        font-size: 12vw; } }
  .main .intro {
    background: url("../images/pop.svg") no-repeat;
    background-size: cover;
    width: 29vw;
    height: 10vw;
    position: absolute;
    left: 50%;
    margin: 19.3vw 0 0 -0.8vw; }
    @media (max-width: 800px) {
      .main .intro {
        background: url("../images/pop_m.svg") no-repeat;
        background-size: 100%;
        width: 86vw;
        height: 50vw;
        left: 7%;
        margin: 90vw auto; } }
    @media (max-width: 550px) {
      .main .intro {
        width: 90vw;
        left: 5%; } }
    .main .intro p {
      color: #fff;
      font-size: 1.4vw;
      line-height: 2.3vw;
      text-align: justify;
      padding: 2.1vw 1.5vw; }
      @media (max-width: 800px) {
        .main .intro p {
          font-size: 4vw;
          line-height: 6.5vw;
          padding: 12vw 0;
          text-align: center; } }
      @media (max-width: 550px) {
        .main .intro p {
          font-size: 5vw;
          line-height: 7.2vw; } }
      .main .intro p br {
        display: none; }
        @media (max-width: 800px) {
          .main .intro p br {
            display: block; } }
  .main .zou {
    background: url("../images/zou.png") no-repeat;
    background-size: cover;
    width: 28.8vw;
    height: 20.5vw;
    position: absolute;
    left: 50%;
    margin: 0.5vw 0 0 -28vw; }
    @media (max-width: 800px) {
      .main .zou {
        width: 52vw;
        height: 50vw;
        left: inherit;
        right: 0;
        margin: 2vw 0; } }
  .main .man {
    background: url("../images/man.png") no-repeat;
    background-size: cover;
    width: 11.9vw;
    height: 24.4vw;
    position: absolute;
    left: 50%;
    margin: 15.5vw 0 0 -22.5vw;
    z-index: 1; }
    @media (max-width: 800px) {
      .main .man {
        width: 29vw;
        height: 60vw;
        left: inherit;
        right: 9%;
        margin: 40vw 0; } }

#FreeTrial {
  position: absolute;
  width: 100%;
  margin: -13.3vw 0; }
  @media (max-width: 800px) {
    #FreeTrial {
      position: relative;
      margin: inherit;
      padding: 3vw 0 5vw; } }
  @media (max-width: 550px) {
    #FreeTrial {
      padding: 4vw 0 6vw; } }
  #FreeTrial .trial_title {
    color: #fff;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 700;
    font-size: 2vw;
    text-shadow: 0em 0.08em 0.2em #272727; }
    @media (max-width: 800px) {
      #FreeTrial .trial_title {
        font-size: 6.5vw;
        margin: 1.5vw auto; } }
    @media (max-width: 550px) {
      #FreeTrial .trial_title {
        font-size: 8vw; } }
  #FreeTrial .trial {
    padding: 1vw 0 1.5vw;
    width: 66vw;
    border-radius: 0.5vw;
    color: #4d4d4d;
    background-color: rgba(255, 255, 255, 0.7);
    margin: 0.5vw auto;
    box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.1); }
    @media (max-width: 800px) {
      #FreeTrial .trial {
        padding: 4vw 0 5.5vw;
        width: 90%;
        border-radius: 1.5vw; } }
    @media (max-width: 550px) {
      #FreeTrial .trial {
        padding: 5vw 0 6.5vw;
        width: 93%;
        border-radius: 2.5vw; } }

.midd {
  position: relative;
  background: url(../images/bg2.jpg) center top no-repeat;
  background-size: cover;
  padding: 3vw 0; }
  @media (max-width: 800px) {
    .midd {
      height: inherit;
      position: relative;
      background-size: cover;
      padding: 10vw 0;
      background-image: url("../images/bg2_m.jpg"); } }
  .midd h1 {
    color: #749eba;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 900;
    font-size: 2.5vw;
    padding-bottom: 1vw; }
    @media (max-width: 800px) {
      .midd h1 {
        font-size: 6.5vw;
        padding-bottom: 2vw; } }
    @media (max-width: 550px) {
      .midd h1 {
        font-size: 8.5vw; } }
    .midd h1 span {
      color: white; }
  .midd .qa_box {
    width: 66%;
    position: relative;
    margin: 0 auto; }
    @media (max-width: 800px) {
      .midd .qa_box {
        width: 100%;
        position: relative;
        left: inherit;
        margin-left: inherit;
        top: inherit; } }
    .midd .qa_box figure .fa-plus-square {
      display: none; }
      @media (max-width: 550px) {
        .midd .qa_box figure .fa-plus-square {
          display: inline;
          position: absolute;
          font-size: 8vw;
          left: 40vw;
          top: 5vw; } }
    .midd .qa_box figure.snip1206 {
      color: black;
      position: relative;
      overflow: hidden;
      width: 23.5vw;
      height: 12.5vw;
      display: inline-block;
      margin: 1.5vw; }
      @media (max-width: 800px) {
        .midd .qa_box figure.snip1206 {
          width: 80vw;
          height: 42vw;
          margin: 3vw 0; } }
      @media (max-width: 550px) {
        .midd .qa_box figure.snip1206 {
          width: 90vw;
          height: 48vw; } }
      .midd .qa_box figure.snip1206::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        background: white;
        width: 100%;
        height: 100%;
        opacity: 1;
        transform: skew(-45deg) scaleX(0);
        transition: all 0.3s ease-in-out; }
      .midd .qa_box figure.snip1206:hover::before {
        transform: skew(-45deg) scaleX(1); }
      .midd .qa_box figure.snip1206:hover figcaption h2, .midd .qa_box figure.snip1206:hover figcaption p {
        transform: translate3d(0%, 0%, 0);
        transition-delay: 0.2s;
        opacity: 1; }
      .midd .qa_box figure.snip1206:hover .fa-plus-square {
        opacity: 0; }
      .midd .qa_box figure.snip1206 * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.6s ease;
        transition: all 0.6s ease; }
      .midd .qa_box figure.snip1206 img {
        opacity: 1;
        width: 100%;
        -webkit-transition: opacity 0.35s;
        transition: opacity 0.35s; }
      .midd .qa_box figure.snip1206 figcaption {
        position: absolute;
        top: 47%;
        left: 0;
        width: 100%;
        transform: translateY(-50%);
        z-index: 1; }
        .midd .qa_box figure.snip1206 figcaption h2, .midd .qa_box figure.snip1206 figcaption p {
          width: 100%;
          opacity: 0; }
        .midd .qa_box figure.snip1206 figcaption h2 {
          font-size: 3vw;
          display: inline-block;
          font-weight: bold;
          text-transform: uppercase;
          padding-bottom: 0.5vw; }
          @media (max-width: 800px) {
            .midd .qa_box figure.snip1206 figcaption h2 {
              font-size: 10vw; } }
          @media (max-width: 550px) {
            .midd .qa_box figure.snip1206 figcaption h2 {
              font-size: 12vw; } }
        .midd .qa_box figure.snip1206 figcaption p {
          padding: 0 3vw;
          font-size: 1.1vw;
          text-align: justify;
          line-height: 1.6vw; }
          @media (max-width: 800px) {
            .midd .qa_box figure.snip1206 figcaption p {
              padding: 0 9.5vw;
              font-size: 3.9vw;
              line-height: 5.5vw; } }
          @media (max-width: 550px) {
            .midd .qa_box figure.snip1206 figcaption p {
              padding: 0 9.5vw;
              font-size: 4.5vw;
              line-height: 7vw; } }

.arrow {
  position: absolute;
  margin: 0 -1.5vw;
  color: #fff;
  font-size: 3vw;
  left: 50%;
  top: 32.8vw;
  z-index: 1; }
  @media (max-width: 800px) {
    .arrow {
      font-size: 9vw;
      top: 137vw;
      margin: 0 -4.5vw; } }
  @media (max-width: 550px) {
    .arrow {
      font-size: 11vw; } }

.three {
  background: url(../images/pattern.png) center top;
  padding: 4vw 0 6vw; }
  @media (max-width: 800px) {
    .three {
      padding: 10vw 0 6vw; } }
  .three h2 {
    color: #749eba;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 900;
    font-size: 2.5vw;
    padding-bottom: 1vw; }
    @media (max-width: 800px) {
      .three h2 {
        font-size: 6.5vw; } }
    @media (max-width: 550px) {
      .three h2 {
        font-size: 8.5vw; } }
  .three h3 {
    color: #333;
    font-size: 1.1vw;
    line-height: 1.7vw;
    margin-top: 0.5vw;
    letter-spacing: 0.1vw; }
    @media (max-width: 800px) {
      .three h3 {
        font-size: 3.9vw;
        line-height: 5vw;
        margin-top: 1.5vw;
        padding: 0 15vw; } }
    @media (max-width: 550px) {
      .three h3 {
        font-size: 4.5vw;
        line-height: 7vw;
        padding: 0 10vw;
        text-align: justify; }
        .three h3 br {
          display: none; } }
  .three ul {
    margin-top: 2.5vw; }
    @media (max-width: 800px) {
      .three ul {
        margin-top: 6vw; } }
    @media (max-width: 550px) {
      .three ul {
        margin-top: 8vw; } }
    .three ul li {
      display: inline-block;
      margin: 0 2vw; }
      @media (max-width: 800px) {
        .three ul li {
          margin: 0 2vw; } }
      .three ul li h4, .three ul li img {
        display: inline-block;
        margin: 0 0.2vw; }
        @media (max-width: 800px) {
          .three ul li h4, .three ul li img {
            margin: 6vw 0.5vw;
            vertical-align: middle; } }
      .three ul li h4 {
        font-size: 4.6vw;
        font-weight: 700;
        color: #d23228; }
        @media (max-width: 800px) {
          .three ul li h4 {
            font-size: 12vw;
            padding-bottom: 6vw; } }
        @media (max-width: 550px) {
          .three ul li h4 {
            font-size: 15vw;
            padding-bottom: 3vw; } }
      .three ul li img {
        width: 4vw; }
        @media (max-width: 800px) {
          .three ul li img {
            width: 11vw;
            padding: 0 2vw 6vw 0; } }
        @media (max-width: 550px) {
          .three ul li img {
            width: 12vw;
            padding: 0 2vw 4vw 0; } }
      .three ul li article {
        width: 14.3vw;
        font-size: 1.1vw;
        text-align: justify;
        line-height: 1.6vw;
        padding: 1vw 0;
        margin-top: 0.5vw;
        border-bottom: solid 1px #999999;
        border-top: solid 1px #999999; }
        @media (max-width: 800px) {
          .three ul li article {
            display: inline-block;
            margin: 6vw 0.5vw;
            vertical-align: middle;
            width: 52vw;
            font-size: 3.5vw;
            line-height: 5vw;
            padding: 3vw 0;
            margin-top: inherit; } }
        @media (max-width: 550px) {
          .three ul li article {
            width: 58vw;
            font-size: 4.3vw;
            line-height: 7vw; } }

.four {
  position: relative;
  background: url(../images/bg4.jpg) center top;
  padding: 3vw 0; }
  @media (max-width: 800px) {
    .four {
      padding: 8vw 0; } }
  .four li {
    display: inline-block;
    margin: 0 6vw; }
    @media (max-width: 800px) {
      .four li {
        margin: 6vw 0; } }
    @media (max-width: 550px) {
      .four li {
        margin: 6vw 0; } }
    .four li h2, .four li h3, .four li h4 {
      background-size: cover;
      width: 2.3vw;
      height: 2.3vw;
      filter: drop-shadow(0 0.5vw 0.3vw rgba(0, 0, 0, 0.7));
      margin: 0 auto; }
      @media (max-width: 800px) {
        .four li h2, .four li h3, .four li h4 {
          width: 7vw;
          height: 7vw;
          filter: drop-shadow(0 1vw 0.5vw rgba(0, 0, 0, 0.7)); } }
      @media (max-width: 550px) {
        .four li h2, .four li h3, .four li h4 {
          width: 8vw;
          height: 8vw; } }
    .four li h2 {
      background: url("../images/icon4.svg") no-repeat center; }
    .four li h3 {
      background: url("../images/icon5.svg") no-repeat center; }
    .four li h4 {
      background: url("../images/icon6.svg") no-repeat center; }
    .four li p {
      color: #fff;
      font-size: 1vw;
      text-shadow: 0 0.3vw 0.3vw rgba(0, 0, 0, 0.7);
      padding-top: 1vw;
      line-height: 1.5vw;
      letter-spacing: 2; }
      @media (max-width: 800px) {
        .four li p {
          font-size: 3.5vw;
          text-shadow: 0 0.5vw 0.5vw rgba(0, 0, 0, 0.7);
          padding-top: 3vw;
          line-height: inherit; }
          .four li p br {
            display: none; } }
      @media (max-width: 550px) {
        .four li p {
          font-size: 4.3vw;
          letter-spacing: 1; } }
      .four li p span {
        display: none; }
        @media (max-width: 800px) {
          .four li p span {
            display: inline; } }

.gotrial {
  position: relative;
  padding: 0.7vw 0;
  background: #B29347;
  transition: 0.5s all; }
  @media (max-width: 800px) {
    .gotrial {
      padding: 3vw 0; } }
  @media (max-width: 550px) {
    .gotrial {
      padding: 5vw 0; } }
  .gotrial:hover {
    background: black; }
  .gotrial a, .gotrial a:hover {
    color: #ffffff;
    font-size: 1.3vw;
    letter-spacing: 0.4vw;
    font-family: Microsoft JhengHei;
    font-weight: lighter;
    text-decoration: none; }
    @media (max-width: 800px) {
      .gotrial a, .gotrial a:hover {
        font-size: 4.2vw; } }
    @media (max-width: 550px) {
      .gotrial a, .gotrial a:hover {
        font-size: 6.5vw; } }

.footerz {
  position: relative;
  color: #fff;
  background: #D23228;
  font-family: "Microsoft JhengHei";
  text-align: justify; }

.footerz > .edm_footer_001 .svg {
  color: #fff;
  fill: #fff; }

.footerz > .edm_footer_001 .icon_list > li > p {
  color: #fff;
  font-weight: bold;
  margin: .5em 0 .5em 40px;
  line-height: 1.5em;
  font-size: 21px; }

.footerz > .edm_footer_001 .icon_list > li {
  position: relative;
  margin-bottom: 1em;
  border-bottom: 1px solid #fff; }

.frp {
  background: #e4754a;
  margin-top: -20px; }

.frp a {
  color: #e68058;
  font-size: 5px;
  pointer-events: none;
  margin-top: -22px; }

#gotop {
  display: block;
  visibility: visible;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s ease-in;
  position: fixed;
  bottom: 10%;
  right: 0;
  text-align: center;
  cursor: pointer;
  z-index: 99;
  align-content: 50% 0 0 50%;
  overflow: hidden; }
  @media (max-width: 800px) {
    #gotop {
      bottom: 20%; } }
  @media (max-width: 550px) {
    #gotop {
      bottom: 40%; } }
  #gotop .topbutton {
    background: #d23228;
    border-top-left-radius: 1.3vw;
    border-bottom-left-radius: 1.3vw;
    ransition: all .3s ease;
    padding: 0.4vw 0; }
    @media (max-width: 800px) {
      #gotop .topbutton {
        padding: 2vw 2.5vw;
        border-top-left-radius: 6vw;
        border-bottom-left-radius: 6vw; } }
    @media (max-width: 550px) {
      #gotop .topbutton {
        padding: 2vw 3.5vw;
        border-top-left-radius: 7vw;
        border-bottom-left-radius: 7vw; } }
    #gotop .topbutton a, #gotop .topbutton a:hover {
      font-size: 1.6vw;
      color: white;
      padding: 0 1vw; }
      @media (max-width: 800px) {
        #gotop .topbutton a, #gotop .topbutton a:hover {
          font-size: 6vw; } }
      @media (max-width: 550px) {
        #gotop .topbutton a, #gotop .topbutton a:hover {
          font-size: 7.2vw; } }

/*---------------------------------------------------------------------------------------------------*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

@-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0); }
  100% {
    -webkit-transform: none;
    transform: none; } }
@keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0); }
  100% {
    -webkit-transform: none;
    transform: none; } }
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown; }

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite; }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); } }