@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
* {
  outline: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, img {
  margin: 0px;
  padding: 0px; }

fieldset, img, abbr, acronym {
  border: 0; }

q:before, q:after {
  content: ''; }

input, button, select {
  border: none;
  outline: none; }

button, .cursor {
  cursor: pointer; }

textarea {
  outline: none;
  resize: vertical;
  border: 1px solid #e4eff1;
  padding: 10px; }

/********************************************************************/
html, body {
  width: 100%;
  height: 100%; }

body {
  overflow-x: hidden;
  font-family: 'Noto Sans TC', Microsoft JhengHei, Helvetica, sans-serif;
  color: #333;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 1px; }
  @media only screen and (max-width: 768px) {
    body {
      padding-top: 40px;
      font-size: 15px;
      line-height: 24px; } }

a {
  text-decoration: none; }

.clearfix:after {
  /* FF, IE8, O, S, etc. */
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

.clearfix {
  zoom: 1; }

.fleft {
  float: left; }

.fright {
  float: right; }

.ul {
  list-style: none; }

.pos_r {
  position: relative; }

.block_center {
  margin-left: auto;
  margin-right: auto; }

.row {
  margin-left: -10px;
  margin-right: -10px; }

.col-1 {
  padding: 0px 10px;
  width: 8.33333%; }

.col-2 {
  padding: 0px 10px;
  width: 16.66667%; }

.col-3 {
  padding: 0px 10px;
  width: 25%; }

.col-4 {
  padding: 0px 10px;
  width: 33.33333%; }

.col-5 {
  padding: 0px 10px;
  width: 41.66667%; }

.col-6 {
  padding: 0px 10px;
  width: 50%; }

.col-7 {
  padding: 0px 10px;
  width: 58.33333%; }

.col-8 {
  padding: 0px 10px;
  width: 66.66667%; }

.col-9 {
  padding: 0px 10px;
  width: 75%; }

.col-10 {
  padding: 0px 10px;
  width: 83.33333%; }

.col-11 {
  padding: 0px 10px;
  width: 91.66667%; }

.col-12 {
  padding: 0px 10px;
  width: 100%; }

@media only screen and (max-width: 768px) {
  .row-s {
    margin-left: -5px;
    margin-right: -5px; }
  .col-s-1 {
    padding: 0px 5px;
    width: 8.33333%; }
  .col-s-2 {
    padding: 0px 5px;
    width: 16.66667%; }
  .col-s-3 {
    padding: 0px 5px;
    width: 25%; }
  .col-s-4 {
    padding: 0px 5px;
    width: 33.33333%; }
  .col-s-5 {
    padding: 0px 5px;
    width: 41.66667%; }
  .col-s-6 {
    padding: 0px 5px;
    width: 50%; }
  .col-s-7 {
    padding: 0px 5px;
    width: 58.33333%; }
  .col-s-8 {
    padding: 0px 5px;
    width: 66.66667%; }
  .col-s-9 {
    padding: 0px 5px;
    width: 75%; }
  .col-s-10 {
    padding: 0px 5px;
    width: 83.33333%; }
  .col-s-11 {
    padding: 0px 5px;
    width: 91.66667%; }
  .col-s-12 {
    padding: 0px 5px;
    width: 100%; } }

.main {
  margin: auto;
  padding-left: 20px;
  padding-right: 20px; }
  @media only screen and (min-width: 768px) {
    .main {
      max-width: 1280px;
      padding-left: 40px;
      padding-right: 40px; } }

img {
  max-width: 100%; }

.mb_show {
  display: block; }
  @media only screen and (min-width: 768px) {
    .mb_show {
      display: none; } }

.pc_show {
  display: none; }
  @media only screen and (min-width: 768px) {
    .pc_show {
      display: block; } }

.book_list {
  max-width: 900px;
  width: 100%; }

.animated {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

@-webkit-keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0); }
  85% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0); }
  85% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

.scaleIn {
  -webkit-animation-name: scaleIn;
  animation-name: scaleIn;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease; }

@-webkit-keyframes move_up {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px); }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

@keyframes move_up {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px); }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

.move_up {
  -webkit-animation-name: move_up;
  animation-name: move_up;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease; }

.g_banner {
  background: url("../images/banner_bg.jpg") center center repeat;
  width: 100%;
  position: relative; }
  .g_banner .deco_line {
    background: url("../images/deco_line.png") center center repeat-x;
    height: 14px;
    width: 100%;
    position: absolute;
    bottom: -7px;
    z-index: 1; }
    @media only screen and (max-width: 768px) {
      .g_banner .deco_line {
        background-size: auto 7px;
        height: 7px;
        bottom: -3px; } }
  .g_banner .banner {
    max-width: 1348px;
    width: 100%;
    margin: auto; }
    .g_banner .banner > .bg {
      position: relative;
      padding-bottom: 33.16024%;
      background: url("../images/banner.png") center center no-repeat;
      background-size: cover; }
    .g_banner .banner .banner_title {
      position: absolute;
      top: 6.71141%;
      left: 56.75074%;
      width: 35.31157%; }
      .g_banner .banner .banner_title .pb {
        padding-bottom: 56.93277%;
        background: url("../images/banner_title.png") center center no-repeat;
        background-size: cover; }
    .g_banner .banner .price {
      position: absolute;
      top: 70.4698%;
      left: 72.7003%;
      width: 15.65282%; }
      .g_banner .banner .price .pb {
        padding-bottom: 27.48815%;
        background: url("../images/price.png") center center no-repeat;
        background-size: cover; }
    @media only screen and (max-width: 768px) {
      .g_banner .banner > .bg {
        padding-bottom: 75.625%;
        background: url("../images/m_banner.jpg") center center no-repeat;
        background-size: cover; }
      .g_banner .banner .banner_title {
        top: 0%;
        left: 10.9375%;
        width: 69.0625%; }
      .g_banner .banner .price {
        top: 51.23967%;
        left: 50%;
        width: 43.28125%; }
        .g_banner .banner .price .pb {
          padding-bottom: 33.213%;
          background: url("../images/m_price.png") center center no-repeat;
          background-size: cover; } }

.menu-container {
  width: 100%;
  margin: 0 auto; }

.menu-mobile {
  display: none;
  background-color: #fff;
  padding: 5px 20px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  width: 100%; }
  .menu-mobile .menu_btn {
    background: url("../images/menu_btn.png");
    background-position: center top;
    background-repeat: no-repeat;
    width: image-width("../images/menu_btn.png");
    height: image-height("../images/menu_btn.png");
    background-size: 100%, auto;
    width: 30px;
    height: 30px;
    content: "";
    padding: 0;
    float: left;
    position: relative;
    display: block;
    cursor: pointer; }
    .menu-mobile .menu_btn.open {
      background: url("../images/menu_btn_close.png");
      background-position: center top;
      background-repeat: no-repeat;
      width: image-width("../images/menu_btn_close.png");
      height: image-height("../images/menu_btn_close.png");
      background-size: 100%, auto; }

.menu {
  -webkit-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
  position: fixed;
  width: 439px;
  height: 47px;
  top: 54px;
  left: 50%;
  margin-left: 11%;
  z-index: 500;
  background: url("../images/menu.png") center center no-repeat; }
  .menu ul {
    text-align: right;
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 10px 22px;
    position: relative; }
    .menu ul:after, .menu ul:before {
      content: "";
      display: table; }
    .menu ul:after {
      clear: both; }
    .menu ul li {
      padding: 0;
      margin: 0;
      display: inline-block; }
      .menu ul li + li {
        border-left: 1px solid #ffffff; }
      .menu ul li a {
        font-size: 13px;
        color: #ffffff;
        padding: 5px 9px;
        line-height: 13px;
        display: block;
        -webkit-transition: .2s;
        -o-transition: .2s;
        transition: .2s;
        font-weight: 700; }
        .menu ul li a:hover {
          color: #fdd7d1; }
  @media only screen and (max-width: 1148px) {
    .menu {
      margin-left: 0;
      left: auto;
      right: 20px;
      top: 40px; } }

.m_subscription {
  height: 30px;
  line-height: 30px;
  background-color: #eb7c85;
  font-size: 14px;
  border-radius: 15px;
  display: inline-block;
  padding: 0 10px;
  margin-left: 20px; }
  .m_subscription span {
    color: #ffffff; }

.m_subscription:hover {
  color: #ffffff;
  background-color: #dc6770;
  text-decoration: none; }

.m_subscription img {
  width: 15px; }

@media only screen and (max-width: 768px) {
  .menu-container {
    width: 100%; }
  .menu-mobile {
    display: block;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
  .menu {
    top: 0;
    padding: 0;
    width: 100%;
    background: none; }
    .menu ul {
      display: none; }
      .menu ul li {
        width: 100%;
        float: none;
        display: block;
        text-align: left;
        border-bottom: 1px solid #f8f8f8; }
        .menu ul li a {
          padding: 10px 20px;
          width: 100%;
          display: block;
          color: #555555; }
          .menu ul li a:hover {
            color: #555555; }
    .menu .show-on-mobile {
      position: fixed;
      top: 40px;
      left: 0;
      width: 100%;
      background-color: #fff;
      display: block; } }

.content {
  background: url("../images/content_bg.jpg") center center repeat; }
  @media only screen and (max-width: 768px) {
    .content {
      padding-top: 0; } }

.paragraph {
  background-color: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.44);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.44);
  padding: 90px 70px 60px;
  position: relative; }
  @media only screen and (max-width: 768px) {
    .paragraph {
      padding: 50px 20px; }
      .paragraph + .paragraph {
        margin-top: 60px; } }

.deco_cloud {
  position: absolute; }
  .deco_cloud.cloud_01 {
    top: -55px;
    left: 50%;
    margin-left: 130px; }
  .deco_cloud.cloud_02 {
    top: 350px;
    left: -170px; }
  .deco_cloud.cloud_03 {
    top: 650px;
    right: -240px; }
  @media only screen and (max-width: 768px) {
    .deco_cloud {
      display: none; } }

.para_title {
  background-color: #fff;
  border-radius: 5px;
  display: inline-block;
  position: absolute;
  line-height: 0;
  top: -45px;
  left: 70px; }
  .para_title .pos_r {
    padding: 24px 40px 24px 85px; }
  .para_title .title_img {
    position: absolute; }
  .para_title.title_01 {
    background-color: #62c580; }
    .para_title.title_01 .title_img {
      left: -27px;
      top: -47px; }
  .para_title.title_02 {
    background-color: #00beb9; }
    .para_title.title_02 .title_img {
      left: -27px;
      top: -47px; }
  .para_title.title_03 {
    background-color: #fff100;
    left: 0; }
    .para_title.title_03 .title_img {
      left: -27px;
      top: -22px; }
  @media only screen and (max-width: 768px) {
    .para_title {
      position: relative;
      margin: auto;
      left: auto;
      top: -26px; }
      .para_title .pos_r {
        padding: 12px 20px 12px 40px; }
      .para_title .title {
        height: 20px; }
      .para_title.title_01 .title_img {
        width: 45px;
        left: -23px;
        top: -24px; }
      .para_title.title_02 .title_img {
        width: 50px;
        left: -20px;
        top: -18px; }
      .para_title.title_03 .title_img {
        width: 35px;
        left: -10px;
        top: -10px; } }

.g_para {
  padding-top: 125px; }
  @media only screen and (max-width: 768px) {
    .g_para {
      padding-top: 95px; } }

@media only screen and (max-width: 768px) {
  .g_para_title {
    text-align: center;
    position: relative;
    margin-top: -45px; } }

.para_des {
  padding-bottom: 40px; }
  @media only screen and (max-width: 768px) {
    .para_des {
      padding-bottom: 20px; } }

.g_pro {
  position: relative;
  z-index: 1;
  background-color: #f0f8fe;
  padding: 25px 50px;
  display: table;
  margin-bottom: 80px; }
  .g_pro .deco_img {
    position: absolute; }
    @media only screen and (max-width: 768px) {
      .g_pro .deco_img {
        display: none; } }
  .g_pro .pro_col {
    display: table-cell;
    vertical-align: middle; }
  @media only screen and (max-width: 768px) {
    .g_pro {
      margin-bottom: 20px;
      padding: 20px; }
      .g_pro .pro_col {
        display: block; } }

.deco_img01 {
  top: -165px;
  right: -5px; }

.deco_img02 {
  top: -268px;
  right: -30px; }

.plante {
  left: -110px;
  bottom: -65px; }

.side_img {
  width: 35.10204%;
  padding: 14px 15px 14px 0; }
  .side_img .item {
    cursor: pointer;
    margin-bottom: 10px; }
    .side_img .item:last-child {
      margin-bottom: 0; }
  @media only screen and (max-width: 768px) {
    .side_img {
      padding-top: 0; } }

.paragraph01 .main_img {
  width: 60.20408%; }

.paragraph01 .buy_btn {
  float: none; }

.buy_btn {
  cursor: pointer;
  background-color: #eb7c85;
  border-radius: 25px;
  color: #ffffff;
  font-size: 18px;
  display: inline-block;
  padding: 7px 20px; }
  .buy_btn span, .buy_btn img {
    color: #ffffff;
    vertical-align: middle; }
  .buy_btn img {
    width: 30px; }

.pro_info .pro_item {
  margin-bottom: 10px; }

.pro_info .pro_ps span {
  font-size: 14px;
  color: #aaaaaa; }

.pro_info .pro_title {
  font-size: 30px;
  line-height: 46px;
  color: #000;
  font-weight: bold; }

.pro_info .pro_price {
  display: inline;
  line-height: 50px; }
  .pro_info .pro_price del {
    color: #aaaaaa;
    padding-right: 20px; }
  .pro_info .pro_price .special {
    color: #eb7c85;
    font-size: 24px;
    font-weight: bold;
    padding-right: 20px; }

@media only screen and (max-width: 768px) {
  .pro_info .g_pro_price {
    text-align: center; }
  .pro_info .pro_ps span {
    display: block; }
  .pro_info .pro_title {
    font-size: 24px; }
  .pro_info .pro_price .special {
    padding-right: 0;
    font-size: 20px; } }

.video {
  position: absolute;
  width: 29.31034%;
  right: 50px;
  bottom: -50px; }
  .video .pb {
    padding-bottom: 58.82353%;
    position: relative; }
    .video .pb iframe {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%; }
  @media only screen and (max-width: 1100px) {
    .video {
      position: relative;
      right: auto;
      width: 100%;
      bottom: 0;
      margin-top: 20px; } }

.paragraph02 .pro_info {
  margin-left: 330px; }
  @media only screen and (max-width: 768px) {
    .paragraph02 .pro_info {
      margin-left: 0; } }

.paragraph02 .pro_img {
  padding-right: 10px;
  display: blockl; }

@media only screen and (max-width: 768px) {
  .paragraph02 .main_img {
    text-align: center;
    float: none; } }

.paragraph03 {
  padding-bottom: 40px; }
  .paragraph03 .para_title {
    position: relative;
    top: auto; }

.para3_des {
  color: #ffffff;
  padding-top: 30px; }
  @media only screen and (max-width: 768px) {
    .para3_des {
      padding-top: 20px; } }

.para3_content {
  background-color: #fff;
  border-radius: 10px;
  padding: 150px 20px 40px;
  position: relative;
  text-align: center; }
  .para3_content .para3_pro_img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; }
  .para3_content .para3_pro_title {
    font-size: 24px;
    font-weight: bold;
    color: #000;
    margin-bottom: 15px; }
  .para3_content .para3_pro_des {
    color: #555555;
    font-size: 18px;
    line-height: 30px; }
  @media only screen and (max-width: 768px) {
    .para3_content {
      max-width: 325px;
      padding: 0;
      background-color: transparent;
      margin: auto; }
      .para3_content .para3_pro_img {
        width: 200px;
        bottom: -85px; }
      .para3_content .para3_item {
        padding-top: 45px; }
        .para3_content .para3_item .txt {
          background-color: #fff;
          border-radius: 10px;
          padding: 85px 20px 20px; } }

@media only screen and (max-width: 768px) {
  .cloud {
    width: 140px; }
  .cloud_mid {
    display: none; } }

.para3_item {
  display: block; }

.cloud_top {
  position: absolute;
  top: 50px;
  right: -170px; }
  @media only screen and (max-width: 768px) {
    .cloud_top {
      top: 18px;
      right: -8px; } }

.cloud_bottom {
  position: absolute;
  top: 160px;
  left: -160px; }
  @media only screen and (max-width: 768px) {
    .cloud_bottom {
      left: -67px; } }

.cloud_mid {
  display: block;
  margin: auto; }
  @media only screen and (max-width: 768px) {
    .cloud_mid {
      display: none; } }

.bottom_deco {
  position: relative; }
  .bottom_deco .bottom_top {
    position: relative;
    z-index: 1;
    margin-top: -250px;
    height: 696px;
    width: 100%;
    background: url("../images/bottom.png") center bottom no-repeat; }
    @media only screen and (max-width: 768px) {
      .bottom_deco .bottom_top {
        background-size: auto 150px;
        height: 150px;
        margin-top: 0; } }
  .bottom_deco .bg {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: url("../images/bottom_bg.jpg") center center repeat;
    background-size: 100% auto;
    height: 264px; }
    @media only screen and (max-width: 768px) {
      .bottom_deco .bg {
        display: none; } }

.big_side_bg {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  z-index: 600;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none; }
  .big_side_bg .close_btn {
    cursor: pointer;
    width: 40px;
    height: 40px;
    border: 1px solid #fff;
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 50%;
    background: url("../images/close_btn.png") center center no-repeat;
    background-size: 30px; }
  .big_side_bg .big_sideimg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; }

.g_side_btn {
  position: fixed;
  right: 20px;
  z-index: 500;
  top: 50%; }
  .g_side_btn .gotop {
    cursor: pointer;
    width: 127px;
    height: 74px;
    background: url("../images/buy_01.png") center center no-repeat; }
  .g_side_btn .side_btn_b {
    width: 127px;
    height: 59px;
    display: block;
    background: url("../images/buy_02.png") center center no-repeat; }
  @media only screen and (max-width: 768px) {
    .g_side_btn {
      right: 5px; }
      .g_side_btn .gotop {
        width: 63.5px;
        height: 37px;
        background-size: auto 37px; }
      .g_side_btn .side_btn_b {
        width: 63.5px;
        height: 29.5px;
        background-size: auto 29.5px; } }

a.more_btn {
  background-color: #00beb9;
  color: #ffffff;
  display: inline-block;
  padding: 10px 20px;
  border-radius: 25px; }

.bottom_banner {
  text-align: center;
  background-color: #004d78;
  padding-bottom: 40px;
  line-height: 0; }
  @media only screen and (max-width: 768px) {
    .bottom_banner {
      padding-bottom: 0; } }

@media only screen and (max-width: 768px) {
  .one_product {
    float: none !important;
    margin: auto; } }