@charset "UTF-8";
/* Scss Document */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap");
/* Scss Document */
body {
  box-sizing: border-box;
  font-family: "Noto Sans TC", Arial, Helvetica, "heiti tc", SimHei, "Microsoft JhengHei", sans-serif;
  margin: 0;
  padding: 0;
  text-align: left;
  background-attachment: fixed; }

table {
  border: 0 none;
  border-collapse: collapse;
  margin: 0;
  padding: 0; }

img {
  border: 0 none;
  max-width: 100%; }

h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
div,
blockquote,
cite,
em,
tt,
dfn {
  font-family: "Noto Sans TC", Arial, Helvetica, "heiti tc", SimHei, "Microsoft JhengHei", sans-serif;
  font-weight: normal;
  margin: 0;
  padding: 0; }

dfn,
strong,
em {
  font-style: normal; }

li {
  list-style: outside none none; }

section a {
  cursor: pointer;
  outline: medium none;
  font-family: "Noto Sans TC", Arial, Helvetica, "heiti tc", SimHei, "Microsoft JhengHei", sans-serif;
  display: block;
  color: black; }

section {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: 0 auto; }

.container {
  width: 100%;
  max-width: 1200px;
  position: relative;
  margin: 0 auto; }

.monly {
  display: none; }

.mhide {
  display: inline-block; }

p {
  font-size: 1.1rem;
  line-height: 1.5rem; }

h2 {
  text-align: center;
  margin-bottom: 24px; }
  @media screen and (max-width: 736px) {
    h2 {
      margin-bottom: 10px; } }

h3 {
  position: relative;
  font-size: 17px;
  line-height: 26px;
  display: inline-block;
  text-align: center; }
  @media screen and (max-width: 736px) {
    h3 {
      font-size: 20px;
      line-height: 28px;
      margin-bottom: 20px; } }

ul.title {
  display: flex;
  flex-direction: column;
  align-items: center; }
  ul.title h3 {
    margin-bottom: 24px;
    font-weight: 300; }
  ul.title h2 {
    margin: 0 auto 12px; }
  @media screen and (max-width: 736px) {
    ul.title {
      flex-direction: column; }
      ul.title h3 {
        margin-bottom: 16px;
        font-size: 15px;
        line-height: 20px; }
        ul.title h3 br {
          display: none; }
      ul.title h2 {
        margin: 0 auto 10px; } }

.cta-secondary {
  color: #28ea92;
  text-align: center;
  border-radius: 100px;
  font-size: 24px;
  line-height: 32px;
  padding: 8px 20px 8px; }

.cta-secondary-white {
  color: #fff;
  text-align: center;
  border-radius: 100px;
  font-size: 24px;
  line-height: 32px;
  padding: 8px 20px 8px;
  margin: 0 10px;
  border: 3px solid #fff;
  width: 206px;
  margin: auto; }
  @media screen and (max-width: 736px) {
    .cta-secondary-white {
      margin: 0  auto 0;
      font-size: 15px;
      border: 2px solid #fff;
      line-height: 20px;
      padding: 4px 8px;
      width: fit-content; } }

.cta-primary {
  color: #fff;
  background: #28ea92;
  text-align: center;
  border-radius: 100px;
  font-size: 24px;
  line-height: 32px;
  padding: 8px 20px 8px; }

.cta-group {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }
  .cta-group a {
    margin: 0 10px;
    border: 3px solid #28ea92; }
  @media screen and (max-width: 736px) {
    .cta-group a {
      margin: 0  4px 0;
      font-size: 15px;
      border: 2px solid #28ea92;
      line-height: 20px;
      padding: 4px 8px; } }

.cta-group.large {
  margin: auto;
  flex-direction: column; }
  @media screen and (min-width: 737px) {
    .cta-group.large {
      max-width: 490px; } }
  .cta-group.large li:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    margin-top: 40px; }
    .cta-group.large li:first-child p {
      font-size: 24px;
      margin-right: 10px; }
    @media screen and (max-width: 736px) {
      .cta-group.large li:first-child {
        margin-bottom: 8px;
        margin-top: 20px;
        flex-wrap: wrap; }
        .cta-group.large li:first-child p {
          width: 100%;
          text-align: center;
          margin-bottom: 8px;
          font-size: 20px; } }
  .cta-group.large li:last-child a {
    margin: 0; }
    @media screen and (max-width: 736px) {
      .cta-group.large li:last-child a {
        max-width: 200px;
        margin: auto; } }

.more {
  max-width: 148px;
  display: block;
  margin: auto;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out; }
  .more:hover {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px); }
  @media screen and (max-width: 736px) {
    .more {
      max-width: 100px; } }

.scale {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out; }
  .scale:hover {
    -webkit-transform: scale(0.97);
    -ms-transform: scale(0.97);
    -o-transform: scale(0.97);
    transform: scale(0.97); }

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0); }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
/*top*/
.top {
  background: url("../images/mainimg.png"), url(../images/top-line-l.png), url(../images/top-line-r.png), url(../images/top-bg.png), -moz-linear-gradient(-34deg, #19d67d 0%, #1fe18a 28%, #37eb9a 65%, #4ff4aa 100%);
  background: url("../images/mainimg.png"), url(../images/top-line-l.png), url(../images/top-line-r.png), url(../images/top-bg.png), -webkit-linear-gradient(-34deg, #19d67d 0%, #1fe18a 28%, #37eb9a 65%, #4ff4aa 100%);
  background: url("../images/mainimg.png"), url(../images/top-line-l.png), url(../images/top-line-r.png), url(../images/top-bg.png), -ms-linear-gradient(-34deg, #19d67d 0%, #1fe18a 28%, #37eb9a 65%, #4ff4aa 100%);
  background-position: center bottom,left top, 100% 22%,center 24%;
  background-repeat: no-repeat;
  position: relative; }
  .top .container {
    max-width: 100%;
    padding-top: 16%;
    overflow: hidden; }
  .top .h1.mhide {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    margin: auto;
    top: 86px;
    width: fit-content; }
  .top ul {
    position: absolute;
    top: 260px;
    left: 0;
    right: 0;
    width: fit-content;
    margin: auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center; }
    .top ul > li img {
      width: 100%; }
    .top ul li:nth-child(1) {
      flex: 0 1 344px; }
    .top ul li:nth-child(2) {
      flex: 0 1 346px; }
  .top p {
    position: absolute;
    top: 280px;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
    text-align: center;
    font-size: 27px;
    line-height: 37px; }
  .top h1 {
    position: relative; }
  .top .h1:before {
    content: '';
    position: absolute;
    display: block;
    top: 40px;
    left: -17%;
    width: 265px;
    height: 265px;
    margin: auto;
    background: url("../images/top-circle-bg.png") no-repeat;
    background-size: contain;
    animation: rotate 3s infinite linear; }
  .top h1.m {
    display: none; }
  .top .phone {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    width: 1920px;
    margin: auto;
    bottom: 0; }
  .top .container {
    min-height: 874px; }





  @media screen and (max-width: 1024px) {
    .top .container {
      padding-top: 7%; }
    .top h1 {
      margin: 0 3% !important; }
    .top .h1.mhide {
      position: static; }
    .top ul {
      position: static;
      margin-top: -20px;
      max-width: 80%; }
    .top p {
      position: static; }
  
  
  }
  @media screen and (max-width: 900px) {
    .top .container {
      min-height: 820px; } }
  @media screen and (max-width: 820px) {
    .top .container {
      min-height: 810px; } }
  @media screen and (max-width: 736px) {
    .top {
      background-size: 230%, 100%,0%; }
      .top .h1:before {
        display: none; }
      .top p {
        font-size: 15px;
        line-height: 24px; }
      .top .container {
        min-height: unset;
        padding-bottom: 64%; }
      .top .h1:before {
        top: -19px;
        left: 7%;
        width: 165px;
        height: 165px; }
      .top ul {
        flex-wrap: wrap;
        max-width: 90%; }
      .top ul li:nth-child(1) {
        flex: 0 1 100%;
        margin-bottom: -12px; }
      .top ul li:nth-child(2) {
        flex: 0 1 80%; }
      .top ul li:nth-child(3) {
        flex: 0 1 50%; } }

/*s1_product*/
.s1_product {
  padding-top: 70px;
  padding-bottom: 60px; }
  @media screen and (max-width: 736px) {
    .s1_product {
      padding-top: 5%;
      padding-bottom: 5%; } }
  .s1_product div > ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap; }
    .s1_product div > ul > li {
      flex: 1 1 23%;
      margin: 0 1% 30px;
      box-sizing: border-box;
      border-radius: 30px;
      text-align: center;
      padding: 36px 18px; }
      @media screen and (max-width: 736px) {
        .s1_product div > ul > li {
          flex: 1 1 80%;
          margin: 0 2% 20px; } }
    .s1_product div > ul > li {
      background-image: -moz-linear-gradient(90deg, white 0%, #befcdb 77%, #7cf8b7 99%);
      background-image: -webkit-linear-gradient(90deg, white 0%, #befcdb 77%, #7cf8b7 99%);
      background-image: -ms-linear-gradient(90deg, white 0%, #befcdb 77%, #7cf8b7 99%);
      flex: 1 1 23%; }
    .s1_product div > ul h3 {
      font-size: 40px;
      font-weight: bold;
      margin: auto;
      width: fit-content;
      margin-bottom: 12px; }
    .s1_product div > ul span {
      font-size: 21px; }
    .s1_product div > ul .ec {
      display: flex;
      align-items: center;
      margin: auto;
      width: fit-content; }
    .s1_product div > ul .ec li {
      font-size: 18px;
      padding-right: 8px; }
      .s1_product div > ul .ec li span {
        font-weight: bold;
        font-size: 28px;
        margin: 0 4px;
        color: #f382ff; }
        @media screen and (max-width: 736px) {
          .s1_product div > ul .ec li span {
            font-size: 14px; }
            .s1_product div > ul .ec li span span {
              font-weight: bold;
              font-size: 20px;
              margin: 0 2px;
              color: #f382ff; } }
    .s1_product div > ul a.btn {
      background: #000;
      font-size: 24px;
      color: #fff;
      padding: 11px 8px;
      border-radius: 22px;
      width: 126px;
      margin: auto;
      display: inline-block; }
    @media screen and (min-width: 1081px) {
      .s1_product div > ul a.btn {
        display: block; } }
    @media screen and (max-width: 1080px) {
      .s1_product div > ul > li {
        padding: 24px 8px;
        margin: 0 1% 10px;
        flex: 100%; }
      .s1_product div > ul h3 {
        font-size: 28px; }
      .s1_product div > ul h3.crown {
        position: relative;
        padding-left: 32px; }
        .s1_product div > ul h3.crown:before {
          width: 28px;
          height: 28px;
          left: 0;
          top: 2px; }
      .s1_product div > ul span {
        font-size: 17px;
        margin-right: 4px; }
      .s1_product div > ul .ec li {
        font-size: 14px; }
        .s1_product div > ul .ec li span {
          font-weight: bold;
          font-size: 20px;
          margin: 0 2px;
          color: #f382ff; }
      .s1_product div > ul a.btn {
        font-size: 15px;
        padding: 10px 8px;
        width: auto; } }

/*s2_teacher*/
.s2_teacher {
  background: url(../images/s2-bg.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 70px;
  padding-bottom: 60px; }
  @media screen and (max-width: 736px) {
    .s2_teacher {
      padding-top: 5%;
      padding-bottom: 5%; } }
  .s2_teacher .myth {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px; }
    .s2_teacher .myth h3 {
      font-weight: bold;
      font-size: 22px;
      margin-bottom: 0;
      background: #000;
      color: #fff;
      padding: 8px 12px;
      border-radius: 30px; }
    .s2_teacher .myth li {
      padding-left: 16px;
      position: relative;
      margin-left: 17px;
      font-size: 17px; }
      .s2_teacher .myth li:before {
        content: '';
        position: absolute;
        background: #28ea92;
        top: 0;
        left: 0;
        bottom: 0;
        display: block;
        margin: auto;
        width: 7px;
        height: 7px;
        border-radius: 100%; }
    @media screen and (max-width: 736px) {
      .s2_teacher .myth h3 {
        margin-bottom: 8px;
        font-size: 17px; }
      .s2_teacher .myth li {
        margin-bottom: 8px; } }
  .s2_teacher ul.group {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    background: #28ea92;
    border-radius: 30px;
    border: 3px solid #28ea92;
    margin-bottom: 36px;
    overflow: hidden; }
  .s2_teacher .teacher1 li.teacher {
    background: url(../images/s2-teacher-1.png) top left no-repeat; }
  .s2_teacher .teacher2 li.teacher {
    background: url(../images/s2-teacher-2.png) top left no-repeat; }
  .s2_teacher .teacher3 li.teacher {
    background: url(../images/s2-teacher-3.png) top left no-repeat; }
  .s2_teacher .teacher4 li.teacher {
    background: url(../images/s2-teacher-4.png) top left no-repeat; }
  .s2_teacher .group li.teacher {
    flex: 0 1 43%;
    background-size: cover;

  }


  @media (min-width: 1025px) and (max-width: 1440px) {
  /* 這段會在筆電上生效 */


    .s2_teacher .group li.teacher {
        flex: 0 1 46%;
        background-size: cover;
        background-position-x: -30px;

  }
}


  .s2_teacher li.content {
    flex: 52%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column; }
    .s2_teacher li.content .info {
      padding: 26px 32px; }
    .s2_teacher li.content h5 {
      font-size: 22px;
      margin-bottom: 6px;
      font-weight: 500;
      padding-left: 20px;
      position: relative; }
      .s2_teacher li.content h5:before {
        content: '';
        position: absolute;
        background: #000;
        top: 0;
        left: 0;
        bottom: 0;
        display: block;
        margin: auto;
        width: 10px;
        height: 10px;
        border-radius: 100%; }
    .s2_teacher li.content h5.work {
      color: #fff;
      background: #000;
      border-radius: 10px;
      text-align: center;
      font-size: 17px;
      padding: 3px 12px;
      font-weight: 400;
      display: inline-block; }
    .s2_teacher li.content h5:not(.work) + p {
      margin-bottom: 20px; }
    .s2_teacher li.content p {
      font-size: 17px;
      line-height: 26px;
      font-weight: 300; }
    .s2_teacher li.content p + p {
      text-align: right; }
    .s2_teacher li.content p + a {
      color: #28ea92;
      font-size: 22px;
      text-align: right;
      margin-top: 8px; }
  .s2_teacher ul.book {
    flex: 1 1;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    background: #fff;
    width: 100%;
    padding: 26px 32px;
    align-content: flex-start; }
    .s2_teacher ul.book li {
      flex: 0 1 216px;
      margin-right: 24px; }
      .s2_teacher ul.book li img {
        max-height: 216px; }
    .s2_teacher ul.book li:last-child {
      flex: 100%;
      margin-top: 12px;
      margin-right: 0; }
    .s2_teacher ul.book p {
      font-size: 17px;
      line-height: 26px;
      font-weight: 300;
      margin-bottom: 4px; }
  @media screen and (min-width: 737px) and (max-width: 1250px) {
    .s2_teacher ul.group {
      flex-direction: column;
      margin-bottom: 10px;
      align-items: center;
      width: 48%;
      float: left;
      margin-right: 2%; }
    .s2_teacher .cta-group {
      clear: both;
      padding-top: 12px; } }
  @media screen and (max-width: 1250px) {
    .s2_teacher ul.group {
      flex-direction: column;
      margin-bottom: 10px;
      align-items: center; }
    .s2_teacher .group li.teacher {
      padding-right: 0;
      padding-bottom: 80%;
      width: 100%;
      background-size: cover; }
    .s2_teacher li.content .info {
      padding: 12px; }
    .s2_teacher li.content h5 {
      font-size: 20px;
      line-height: 28px;
      margin-bottom: 4px;
      padding-left: 12px;
      position: relative; }
      .s2_teacher li.content h5:before {
        width: 6px;
        height: 6px; }
    .s2_teacher li.content h5.work {
      font-size: 15px;
      padding: 0 8px; }
    .s2_teacher li.content h5:not(.work) + p {
      margin-bottom: 12px; }
    .s2_teacher li.content p {
      font-size: 15px;
      line-height: 20px; }
    .s2_teacher ul.book {
      padding: 12px 12px 16px; }
      .s2_teacher ul.book li {
        flex: 0 1 48%;
        margin: 0 1% 4px; }
        .s2_teacher ul.book li img {
          margin-right: 0;
          max-height: unset; } }

/*s3_new*/
.s3_new {
  background: url(../images/s3-bg.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 70px;
  padding-bottom: 60px; }
  @media screen and (max-width: 736px) {
    .s3_new {
      padding-top: 5%;
      padding-bottom: 2%; } }
  .s3_new .slide-hot.monly > div {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column; }
  .s3_new .slide-new.monly {
    padding: 0 5%; }
    .s3_new .slide-new.monly p {
      font-size: 15px;
      line-height: 20px;
      text-align: center;
      padding: 8px 0 0; }
  .s3_new .slide-new.monly div.slick-slide {
    margin: 0 12px 16px; }
  .s3_new ul.mhide {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
    @media screen and (max-width: 736px) {
      .s3_new ul.mhide {
        display: none; } }
    .s3_new ul.mhide li {
      flex: 1 1 19%;
      margin: 0 0.5% 30px;
      box-sizing: border-box; }
      @media screen and (max-width: 736px) {
        .s3_new ul.mhide li {
          flex: 0 1 46%;
          margin: 0 2% 10px; } }
    .s3_new ul.mhide p {
      margin-top: 8px;
      text-align: center;
      padding: 0 8px;
      font-size: 16px;
      line-height: 24px; }
  .s3_new div.monly p, .s3_new ul.mhide p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; }
  @media screen and (max-width: 736px) {
    .s3_new h2 {
      width: 50%;
      margin: 0 auto 10px; } }

/*s4_boss*/
.s4_boss {
  background: url(../images/s4-bg.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 70px;
  padding-bottom: 60px; }
  @media screen and (max-width: 736px) {
    .s4_boss {
      padding-top: 5%;
      padding-bottom: 5%; } }
  .s4_boss .container > ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap; }
    .s4_boss .container > ul > li {
      flex: 1 1 31.33%;
      margin: 0 1% 30px;
      box-sizing: border-box; }
      @media screen and (max-width: 736px) {
        .s4_boss .container > ul > li {
          flex: 1 1 80%;
          margin: 0 2% 20px; } }
      .s4_boss .container > ul > li > div {
        border: 2px solid #28ea92;
        border-radius: 30px;
        overflow: hidden; }
  .s4_boss div.name {
    padding: 16px;
    background: #fff; }
  .s4_boss div.books {
    background: #ededed;
    padding: 12px 16px 0; }
    .s4_boss div.books ul {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex; }
      .s4_boss div.books ul li {
        flex: 1 1 31.33%;
        margin: 0 1% 30px;
        box-sizing: border-box;
        margin-bottom: 16px; }
        @media screen and (max-width: 736px) {
          .s4_boss div.books ul li {
            flex: 1 1 80%;
            margin: 0 2% 20px; } }
  .s4_boss h4 {
    font-size: 22px;
    line-height: 28px;
    font-weight: 500;
    margin-bottom: 10px;
    text-align: center; }
  .s4_boss h5 {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 12px;
    text-align: center; }
  .s4_boss p {
    font-size: 17px;
    line-height: 25px;
    margin-bottom: 12px;
    font-weight: 300; }
  .s4_boss audio {
    width: 100%;
    max-width: 300px;
    margin: auto;
    display: block; }
  @media screen and (max-width: 736px) {
    .s4_boss div.name {
      padding: 10px; }
    .s4_boss div.books {
      padding: 10px 10px 0; }
    .s4_boss h4 {
      font-size: 20px;
      line-height: 28px; }
    .s4_boss h5 {
      font-size: 17px;
      line-height: 26px; }
    .s4_boss p {
      font-size: 15px;
      line-height: 20px; } }

/*s5_hot*/
.s5_hot {
  background: url(../images/s5-bg.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 70px;
  padding-bottom: 60px; }
  @media screen and (max-width: 736px) {
    .s5_hot {
      padding-top: 5%;
      padding-bottom: 2%; }
      .s5_hot h2 {
        width: 50%;
        margin: 0 auto 10px; } }
  .s5_hot .slide-hot.monly > div {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column; }
    .s5_hot .slide-hot.monly > div p {
      border-radius: 12px 12px 0 0;
      font-size: 15px;
      line-height: 20px;
      text-align: center;
      padding: 8px 4px;
      background-image: -moz-linear-gradient(180deg, #ef77fe 0%, #ffdafc 16%, #20ff9a 100%);
      background-image: -webkit-linear-gradient(180deg, #ef77fe 0%, #ffdafc 16%, #20ff9a 100%);
      background-image: -ms-linear-gradient(180deg, #ef77fe 0%, #ffdafc 16%, #20ff9a 100%); }
  .s5_hot .slide-hot.monly {
    padding: 0 5%; }
  .s5_hot .slide-hot.monly div.slick-slide {
    margin: 0 12px 16px; }
  .s5_hot ul.mhide {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
    @media screen and (max-width: 736px) {
      .s5_hot ul.mhide {
        display: none; } }
    .s5_hot ul.mhide li {
      flex: 1 1 19%;
      margin: 0 0.5% 30px;
      box-sizing: border-box; }
      @media screen and (max-width: 736px) {
        .s5_hot ul.mhide li {
          flex: 0 1 46%;
          margin: 0 2% 10px; } }
      .s5_hot ul.mhide li p {
        border-radius: 20px 20px 0 0;
        font-size: 22px;
        line-height: 50px;
        text-align: center;
        background-image: -moz-linear-gradient(180deg, #ef77fe 0%, #ffdafc 16%, #20ff9a 100%);
        background-image: -webkit-linear-gradient(180deg, #ef77fe 0%, #ffdafc 16%, #20ff9a 100%);
        background-image: -ms-linear-gradient(180deg, #ef77fe 0%, #ffdafc 16%, #20ff9a 100%); }

/*s6_tag*/
.s6_tag {
  padding-top: 70px;
  padding-bottom: 60px; }
  @media screen and (max-width: 736px) {
    .s6_tag {
      padding-top: 5%;
      padding-bottom: 5%; } }
  .s6_tag > div > h2 {
    max-width: 270px;
    margin: 0 auto 32px; }
    @media screen and (max-width: 736px) {
      .s6_tag > div > h2 {
        margin: 0 auto 10px;
        max-width: 50%; } }
  .s6_tag .bn img {
    border: 1px solid #adadad; }
  .s6_tag .tags {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px; }
    @media screen and (max-width: 736px) {
      .s6_tag .tags {
        margin-bottom: 12px; } }
    .s6_tag .tags li {
      flex: 0 1 18%;
      margin: 0 1% 12px; }
      @media screen and (max-width: 736px) {
        .s6_tag .tags li {
          flex: 0 1 48%;
          margin: 0 1% 12px; } }
    .s6_tag .tags a {
      width: 100%;
      color: #28ea92;
      border: 3px solid #28ea92;
      text-align: center;
      border-radius: 100px;
      font-size: 24px;
      line-height: 32px;
      padding: 10px; }
      @media screen and (max-width: 736px) {
        .s6_tag .tags a {
          font-size: 17px;
          line-height: 26px;
          padding: 4px;
          border: 2px solid #28ea92; } }
  .s6_tag .card {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap; }
    .s6_tag .card a {
      flex: 0 0 182px;
      height: 182px;
      padding: 20px;
      border-radius: 30px;
      margin: 0 6px 32px;
      text-align: center;
      font-size: 23px;
      line-height: 28px;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      align-items: center;
      justify-content: center; }
      @media screen and (max-width: 736px) {
        .s6_tag .card a {
          flex: 0 1 48%;
          margin: 0 1% 12px;
          height: 100px;
          font-size: 17px;
          line-height: 24px; } }
      .s6_tag .card a:nth-child(1) {
        background-image: -moz-linear-gradient(90deg, #a3ffd6 0%, #44f698 100%);
        background-image: -webkit-linear-gradient(90deg, #a3ffd6 0%, #44f698 100%);
        background-image: -ms-linear-gradient(90deg, #a3ffd6 0%, #44f698 100%); }
      .s6_tag .card a:nth-child(2) {
        background-image: -moz-linear-gradient(90deg, #ffddf6 0%, #ffa9e0 100%);
        background-image: -webkit-linear-gradient(90deg, #ffddf6 0%, #ffa9e0 100%);
        background-image: -ms-linear-gradient(90deg, #ffddf6 0%, #ffa9e0 100%); }
      .s6_tag .card a:nth-child(3) {
        background-image: -moz-linear-gradient(90deg, #8bfaee 0%, #41f2df 100%);
        background-image: -webkit-linear-gradient(90deg, #8bfaee 0%, #41f2df 100%);
        background-image: -ms-linear-gradient(90deg, #8bfaee 0%, #41f2df 100%); }
      .s6_tag .card a:nth-child(4) {
        background-image: -moz-linear-gradient(90deg, #7fefff 0%, #44e2f9 100%);
        background-image: -webkit-linear-gradient(90deg, #7fefff 0%, #44e2f9 100%);
        background-image: -ms-linear-gradient(90deg, #7fefff 0%, #44e2f9 100%); }
      .s6_tag .card a:nth-child(5) {
        background-image: -moz-linear-gradient(90deg, #ffecba 0%, #ffe087 100%);
        background-image: -webkit-linear-gradient(90deg, #ffecba 0%, #ffe087 100%);
        background-image: -ms-linear-gradient(90deg, #ffecba 0%, #ffe087 100%); }
      .s6_tag .card a:nth-child(6) {
        background-image: -moz-linear-gradient(90deg, #ffdcff 0%, #ffa6ff 100%);
        background-image: -webkit-linear-gradient(90deg, #ffdcff 0%, #ffa6ff 100%);
        background-image: -ms-linear-gradient(90deg, #ffdcff 0%, #ffa6ff 100%); }

/*s8_kol*/
.s8_kol {
  background: url(../images/s8-bg.png) center top no-repeat, -webkit-linear-gradient(-34deg, #19d67d 0%, #1fe18a 28%, #37eb9a 65%, #4ff4aa 100%);
  background-attachment: fixed;
  padding-top: 70px;
  padding-bottom: 60px; }
  .s8_kol p {
    font-size: 17px;
    line-height: 25px;
    background: #fff;
    padding: 15px;
    border-radius: 20px;
    font-weight: 300; }
  .s8_kol h3 {
    font-size: 36px;
    color: #fff;
    font-weight: 500;
    background: #000;
    padding: 16px;
    border-radius: 20px;
    margin-bottom: 20px; }
  .s8_kol .author ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px; }
    .s8_kol .author ul img {
      max-width: 260px; }
  @media screen and (min-width: 737px) {
    .s8_kol .container > div.author:nth-of-type(1) {
      padding-right: 15%; }
    .s8_kol .container > div.author:nth-of-type(2) {
      padding-right: 15%; }
    .s8_kol .container > div.author:nth-of-type(3) {
      padding-left: 15%; }
    .s8_kol .container > div.author:nth-of-type(4) {
      padding-left: 15%; }
    .s8_kol .container > div.author:nth-of-type(5) {
      padding-right: 15%; }
    .s8_kol .container > div.author:nth-of-type(6) {
      padding-right: 15%; }
    .s8_kol .container > div.author:nth-of-type(7) {
      padding-left: 15%; }
    .s8_kol .container > div.author:nth-of-type(8) {
      padding-left: 15%; }
    .s8_kol .container > div.author:nth-of-type(even) ul li:first-child {
      order: 1;
      margin-left: 24px; }
    .s8_kol .container > div.author:nth-of-type(odd) ul li:first-child {
      margin-right: 24px; }
    .s8_kol .container > div.author:nth-of-type(even) ul li {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      flex-direction: column;
      align-items: flex-end; } }
  @media screen and (max-width: 736px) {
    .s8_kol .author ul {
      flex-direction: column;
      justify-content: center; }
      .s8_kol .author ul img {
        max-width: 200px; }
      .s8_kol .author ul li {
        text-align: center; }
    .s8_kol h3 {
      font-size: 20px;
      line-height: 28px;
      padding: 8px;
      border-radius: 16px;
      margin: -20px 0 12px; }
    .s8_kol p {
      font-size: 15px;
      line-height: 24px;
      margin-bottom: 12px; } }

/*s8_btns*/
.s8_btns {
  padding-top: 70px;
  padding-bottom: 60px; }
  @media screen and (min-width: 737px) {
    .s8_btns {
      background: url(../images/s3-bg.jpg);
      background-position: center top;
      background-repeat: no-repeat;
      background-size: contain; } }
  @media screen and (max-width: 736px) {
    .s8_btns {
      padding-top: 5%;
      padding-bottom: 50px; } }
  .s8_btns .bn {
    text-align: center;
    margin-top: 54px; }
    @media screen and (max-width: 736px) {
      .s8_btns .bn {
        margin-top: 20px; } }
  .s8_btns .review h2 {
    margin: 0 0 24px; }
    @media screen and (max-width: 736px) {
      .s8_btns .review h2 {
        max-width: 80%;
        margin: 0 auto 24px; } }
  .s8_btns .slide-review div.slick-slide {
    padding: 0 12px; }
    @media screen and (max-width: 736px) {
      .s8_btns .slide-review div.slick-slide {
        padding: 0 24px; } }
  .s8_btns .slide-review h3 {
    font-size: 24px;
    line-height: 36px;
    font-weight: bold; }
  .s8_btns .slide-review p {
    font-size: 22px;
    line-height: 32px;
    font-weight: 300; }

.slick-prev,
.slick-prev:focus,
.slick-prev:hover {
  background: url(../images/arrow01.png) no-repeat top right;
  background-size: contain;
  left: -64px; }

.slick-next,
.slick-next:hover,
.slick-next:focus {
  background: url(../images/arrow02.png) no-repeat top left;
  background-size: contain;
  right: -64px; }

.slick-prev:before,
.slick-next:before {
  display: none; }

.slick-prev,
.slick-prev:focus,
.slick-next,
.slick-prev:hover,
.slick-next:hover,
.slick-next:focus {
  width: 51px;
  height: 101px; }

@media screen and (max-width: 736px) {
  button.slick-prev, button.slick-prev:focus, button.slick-prev:hover, button.slick-next, button.slick-next:hover, button.slick-next:focus {
    background-size: contain;
    width: 32px;
    height: 50px; }

  button.slick-next, button.slick-next:hover, button.slick-next:focus {
    right: -12.5px; }

  button.slick-prev, button.slick-prev:focus, button.slick-prev:hover {
    left: -12.5px; } }
/*浮動按鈕*/
.fixbtn {
  position: fixed;
  right: 0px;
  top: 20vh;
  text-align: center;
  z-index: 999;
  width: 130px;
  border-radius: 30px 0 0 30px;
  overflow: hidden; }
  @media screen and (max-width: 736px) {
    .fixbtn {
      right: 0;
      left: 0;
      top: unset;
      bottom: 0;
      width: 100%;
      display: flex;
      padding: 0;
      border: none;
      border-radius: 0; } }

.fixbtn ul {
  background: #424242; }
  .fixbtn ul li a {
    display: block;
    color: #fff;
    padding: 10px 6px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 300; }
    .fixbtn ul li a:hover {
      color: #28ea92; }
  .fixbtn ul li:last-child {
    border-top: 1px solid #28ea92; }
    .fixbtn ul li:last-child span {
      color: #28ea92; }
    @media screen and (max-width: 736px) {
      .fixbtn ul li:last-child {
        display: none; } }
  @media screen and (max-width: 736px) {
    .fixbtn ul {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      width: 100%;
      overflow-x: scroll;
      overflow-y: hidden; }
      .fixbtn ul li:not(:last-child) {
        border-right: 1px solid rgba(255, 255, 255, 0.5); }
      .fixbtn ul li span {
        padding: 8px 4px;
        white-space: nowrap; }
      .fixbtn ul li a {
        font-size: 14px;
        line-height: 1.3;
        color: #fff; }
        .fixbtn ul li a:hover {
          color: #fff; } }

@media screen and (min-width: 737px) {
  .scrollup-m {
    display: none !important; } }
@media screen and (max-width: 736px) {
  .scrollup-m {
    width: 54px;
    height: 54px;
    opacity: 1;
    position: fixed;
    text-align: center;
    z-index: 999;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -o-transform-origin: bottom;
    transform-origin: bottom;
    right: 8px;
    bottom: 56px; } }
#copyright {
  text-align: center;
  background: #424242;
  font-size: 14px;
  line-height: 20px;
  padding: 5px;
  color: #fff;
  position: absolute;
  width: 100%; }
  @media screen and (min-width: 937spx) {
    #copyright {
      position: absolute;
      width: 100%; } }
  @media screen and (max-width: 736px) {
    #copyright {
      font-size: 12px;
      padding: 0 4px; } }

/* md screen*/
@media (max-width: 1440px) {
  .container {
    width: 80%; } }
@media screen and (max-width: 736px) {
  .container {
    width: 100%;
    padding: 0 6%; }

  .monly {
    display: block; }

  .mhide {
    display: none; }

  h2 {
    margin-bottom: 10px; }

  /*top*/
  div.top_bgm img {
    width: 100%; } }