@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: 15px;
  line-height: 28px;
  letter-spacing: 1px; }
  @media only screen and (min-width: 768px) {
    body {
      font-size: 18px;
      line-height: 30px; } }

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-xs {
  margin-left: -5px;
  margin-right: -5px; }

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

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

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

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

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

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

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

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

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

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

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

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

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

@media only screen and (min-width: 1200px) {
  .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%; } }

.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; } }

.pos_r {
  position: relative; }

.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 moveUp {
  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 moveUp {
  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); } }

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

@keyframes moveUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px); } }

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

@-webkit-keyframes fadeToRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    transform: translateX(0px); } }

@keyframes fadeToRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    transform: translateX(0px); } }

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

@-webkit-keyframes moveToRight {
  0% {
    -webkit-transform: translateX(-120px);
    transform: translateX(-120px); }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); } }

@keyframes moveToRight {
  0% {
    -webkit-transform: translateX(-120px);
    transform: translateX(-120px); }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); } }

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

@-webkit-keyframes moveToRight80 {
  0% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px); }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); } }

@keyframes moveToRight80 {
  0% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px); }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); } }

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

@-webkit-keyframes moveToRight120 {
  0% {
    -webkit-transform: translateX(-400px);
    transform: translateX(-400px); }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); } }

@keyframes moveToRight120 {
  0% {
    -webkit-transform: translateX(-400px);
    transform: translateX(-400px); }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); } }

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

@-webkit-keyframes bounceIn {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  10% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9); }
  50% {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02); }
  75% {
    -webkit-transform: scale(0.99);
    -ms-transform: scale(0.99);
    transform: scale(0.99); }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); } }

@keyframes bounceIn {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  10% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9); }
  50% {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02); }
  75% {
    -webkit-transform: scale(0.99);
    -ms-transform: scale(0.99);
    transform: scale(0.99); }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); } }

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

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

.banner {
  width: 100%; }
  .banner .bg {
    padding-bottom: 57.5%;
    background: url("../images/index2_02.jpg") center center no-repeat;
    background-size: cover; }
    .banner .bg > div {
      position: absolute; }
  .banner .banner_title {
    left: 0%;
    top: 9.51087%;
    width: 55.54687%; }
    .banner .banner_title .pb {
      padding-bottom: 33.05204%;
      background: url("../images/banner_title.png") center center no-repeat;
      background-size: cover; }
  .banner .character_01 {
    left: 45.07813%;
    top: 28.80435%;
    width: 47.34375%; }
    .banner .character_01 .pb {
      padding-bottom: 38.11881%;
      background: url("../images/character_01.png") center center no-repeat;
      background-size: cover; }
  .banner .character_02 {
    left: 0.625%;
    top: 46.19565%;
    width: 47.34375%; }
    .banner .character_02 .pb {
      padding-bottom: 47.20121%;
      background: url("../images/character_02.png") center center no-repeat;
      background-size: cover; }
  .banner .character_03 {
    left: 61.71875%;
    top: 63.17935%;
    width: 34.92188%; }
    .banner .character_03 .pb {
      padding-bottom: 50.55928%;
      background: url("../images/character_03.png") center center no-repeat;
      background-size: cover; }

.area_02 {
  margin-top: -1px; }
  .area_02 .bg {
    padding-bottom: 21.875%;
    background: #fff;
    background-size: cover; }
    .area_02 .bg > div {
      position: absolute; }
  .area_02 .area_02_txt {
    left: 6.40625%;
    top: 5%;
    width: 86.64063%; }
    .area_02 .area_02_txt .pb {
      padding-bottom: 23.98557%;
      background: url("../images/area_02_txt.jpg") center center no-repeat;
      background-size: cover; }

.area_03 {
  margin-top: -1px; }
  .area_03 .bg {
    padding-bottom: 63.90625%;
    background: url("../images/index2_04.jpg") center center no-repeat;
    background-size: cover; }
    .area_03 .bg > div {
      position: absolute; }
  .area_03 .area_03_product {
    left: 10.70313%;
    top: 30.56235%;
    width: 43.35938%; }
    @media only screen and (min-width: 768px) {
      .area_03 .area_03_product .pb:hover {
        -webkit-animation: bounceIn .5s ease;
        animation: bounceIn .5s ease; } }
    .area_03 .area_03_product .pb {
      padding-bottom: 100%;
      background: url("../images/area_03_product.png") center center no-repeat;
      background-size: cover; }
  .area_03 .area_03_ball_01 {
    z-index: 1;
    left: 60.15625%;
    top: 39.1198%;
    width: 17.96875%; }
    .area_03 .area_03_ball_01 .pb {
      padding-bottom: 100.43478%;
      background: url("../images/area_03_ball_01.png") center center no-repeat;
      background-size: cover; }
  .area_03 .area_03_ball_02 {
    left: 73.4375%;
    top: 42.78729%;
    width: 17.10938%; }
    .area_03 .area_03_ball_02 .pb {
      padding-bottom: 100%;
      background: url("../images/area_03_ball_02.png") center center no-repeat;
      background-size: cover; }
  .area_03 .area_03_buy_btn {
    left: 69.53125%;
    top: 80.07335%;
    width: 23.04688%; }
    @media only screen and (min-width: 768px) {
      .area_03 .area_03_buy_btn .pb:hover {
        -webkit-animation: bounceIn .5s ease;
        animation: bounceIn .5s ease; } }
    .area_03 .area_03_buy_btn .pb {
      padding-bottom: 27.7193%;
      background: url("../images/area_03_buy_btn.png") center center no-repeat;
      background-size: cover;
      display: block;
      width: 100%; }

.area_04 {
  margin-top: -1px; }
  /* new */
  .area_04 #benefit {
    position: absolute;
    width: 100%;
    top: -10.24328%; }
  .area_04 .bg {
    padding-bottom: 61.01562%;
    background: url("../images/index2_05.jpg") center center no-repeat;
    background-size: cover; }
    .area_04 .bg > div {
      position: absolute; }
  .area_04 .dialog_01 {
    left: 9.14063%;
    top: 30.60179%;
    width: 38.82813%; }
    .area_04 .dialog_01 .pb {
      padding-bottom: 43.86318%;
      background: url("../images/dialog_01.jpg") center center no-repeat;
      background-size: cover; }
  .area_04 .dialog_02 {
    left: 54.0625%;
    top: 28.80922%;
    width: 37.1875%; }
    .area_04 .dialog_02 .pb {
      padding-bottom: 48.94958%;
      background: url("../images/dialog_02.jpg") center center no-repeat;
      background-size: cover; }
  .area_04 .dialog_03 {
    left: 9.45313%;
    top: 67.86172%;
    width: 37.1875%; }
    .area_04 .dialog_03 .pb {
      padding-bottom: 37.92373%;
      background: url("../images/dialog_03.jpg") center center no-repeat;
      background-size: cover; }
  .area_04 .dialog_04 {
    left: 54.0625%;
    top: 64.40461%;
    width: 35.46875%; }
    .area_04 .dialog_04 .pb {
      padding-bottom: 45.59471%;
      background: url("../images/dialog_04.jpg") center center no-repeat;
      background-size: cover; }

.area_story {
  margin-top: -1px; }
  .area_story .bg {
    padding-bottom: 48.67188%;
    background: url("../images/index2_06.jpg") center center no-repeat;
    background-size: cover;
    z-index: 1; }
    .area_story .bg > div {
      position: absolute; }
  .area_story .area_04_title {
    left: 14.0625%;
    top: 1.60514%;
    width: 17.26563%;
    z-index: 1; }
    .area_story .area_04_title .pb {
      padding-bottom: 61.53846%;
      background: url("../images/area_04_title.png") center center no-repeat;
      background-size: cover; }
  .area_story .iframe {
    left: 19.60938%;
    top: 9.14928%;
    width: 59.76563%; 
	z-index: 999;/*因被圖片蓋到,改最高層級*/	
}
    .area_story .iframe .pb {
      padding-bottom: 53.0719%; }
      .area_story .iframe .pb iframe {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute; }
  .area_story .story_left {
    left: 1.25%;
    top: 35.95506%;
    width: 27.03125%; }
    .area_story .story_left .pb {
      padding-bottom: 112.42775%;
      background: url("../images/story_left.png") center center no-repeat;
      background-size: cover; }
  .area_story .story_right {
    right: 0%;
    top: 42.05457%;
    width: 26.71875%; }
    .area_story .story_right .pb {
      padding-bottom: 113.45029%;
      background: url("../images/story_right.png") center center no-repeat;
      background-size: cover; }

.area_05_top {
  margin-top: -1px; }
  /* new */
  .area_05_top #story {
    position: absolute;
    width: 100%;
    top: -15.60758%; }
  .area_05_top .bg {
    padding-bottom: 70.07813%;
    background: url("../images/index2_07.jpg") center center no-repeat;
    background-size: cover; }
    .area_05_top .bg > div {
      position: absolute; }
  .area_05_top .talk_01 {
    left: 4.6875%;
    top: 7.80379%;
    width: 89.92188%; }
    .area_05_top .talk_01 .pb {
      padding-bottom: 34.92615%;
      background: url("../images/talk_01.png") center center no-repeat;
      background-size: cover; }
  .area_05_top .talk_02 {
    left: 3.4375%;
    top: 56.85619%;
    width: 93.75%; }
    .area_05_top .talk_02 .pb {
      padding-bottom: 27.83333%;
      background: url("../images/talk_02.png") center center no-repeat;
      background-size: cover; }

.area_05_bottom {
  margin-top: -1px; }
  .area_05_bottom .bg {
    padding-bottom: 64.45313%;
    background: url("../images/index2_08.jpg") center center no-repeat;
    background-size: cover; }
    .area_05_bottom .bg > div {
      position: absolute; }
  .area_05_bottom .talk_03 {
    left: 3.4375%;
    top: 3.27273%;
    width: 93.04688%; }
    .area_05_bottom .talk_03 .pb {
      padding-bottom: 31.06633%;
      background: url("../images/talk_03.png") center center no-repeat;
      background-size: cover; }
  .area_05_bottom .talk_04 {
    left: 3.4375%;
    top: 55.63636%;
    width: 93.98438%; }
    .area_05_bottom .talk_04 .pb {
      padding-bottom: 27.84705%;
      background: url("../images/talk_04.png") center center no-repeat;
      background-size: cover; }

.area_06 {
  margin-top: -1px; }
  /* new */
  .area_06 #product {
    position: absolute;
    width: 100%;
    top: -8.77193%; }
  .area_06 .bg {
    padding-bottom: 89.0625%;
    background: url("../images/index2_09.jpg") center center no-repeat;
    background-size: cover; }
    .area_06 .bg > div {
      position: absolute; }
  .area_06 .area_06_product {
    left: 50%;
    top: 0%;
    width: 43.35938%; }
    @media only screen and (min-width: 768px) {
      .area_06 .area_06_product .pb:hover {
        -webkit-animation: bounceIn .5s ease;
        animation: bounceIn .5s ease; } }
    .area_06 .area_06_product .pb {
      padding-bottom: 100%;
      background: url("../images/area_03_product.png") center center no-repeat;
      background-size: cover; }
  .area_06 .area_06_buy_btn {
    left: 16.5625%;
    top: 49.73684%;
    width: 22.26563%; }
    @media only screen and (min-width: 768px) {
      .area_06 .area_06_buy_btn .pb:hover {
        -webkit-animation: bounceIn .5s ease;
        animation: bounceIn .5s ease; } }
    .area_06 .area_06_buy_btn .pb {
      padding-bottom: 27.7193%;
      background: url("../images/area_06_buy_btn.png") center center no-repeat;
      background-size: cover;
      display: block;
      width: 100%; }

.area_07 {
  margin-top: -1px; }
  .area_07 .bg {
    padding-bottom: 45.625%;
    background: url("../images/index2_10.jpg") center center no-repeat;
    background-size: cover; }
    .area_07 .bg > div {
      position: absolute; }
  .area_07 .gift_02 {
    left: 3.98437%;
    top: -9.93151%;
    width: 43.82813%; }
    @media only screen and (min-width: 768px) {
      .area_07 .gift_02:hover .pb {
        -webkit-animation: bounceIn .5s ease;
        animation: bounceIn .5s ease; } }
    .area_07 .gift_02 .pb {
      padding-bottom: 104.63458%;
      background: url("../images/gift_02.png") center center no-repeat;
      background-size: cover; }
  .area_07 .gift_01 {
    left: 48.4375%;
    top: -37.67123%;
    width: 47.57813%; }
    @media only screen and (min-width: 768px) {
      .area_07 .gift_01:hover .pb {
        -webkit-animation: bounceIn .5s ease;
        animation: bounceIn .5s ease; } }
    .area_07 .gift_01 .pb {
      padding-bottom: 104.63458%;
      background: url("../images/gift_01.png") center center no-repeat;
      background-size: cover; }

.area_08 {
  margin-top: -1px; }
  .area_08 .bg {
    padding-bottom: 11.48438%;
    background: #074445; }
    .area_08 .bg > div {
      position: absolute; }
  .area_08 .area_07_buy_btn {
    left: 58.20313%;
    top: 2.04082%;
    width: 22.26563%; }
    @media only screen and (min-width: 768px) {
      .area_08 .area_07_buy_btn:hover .pb {
        -webkit-animation: bounceIn .5s ease;
        animation: bounceIn .5s ease; } }
    .area_08 .area_07_buy_btn .pb {
      padding-bottom: 27.7193%;
      background: url("../images/area_07_buy_btn.png") center center no-repeat;
      background-size: cover;
      display: block;
      width: 100%; }
  .area_08 .area_07_price {
    left: 20.85938%;
    top: 6.80272%;
    width: 25.78125%; }
    .area_08 .area_07_price .pb {
      padding-bottom: 20.90909%;
      background: url("../images/area_07_price.png") center center no-repeat;
      background-size: cover;
      display: block;
      width: 100%; }

.side {
  z-index: 50;
  position: fixed;
  width: 124px;
  height: 127px;
  right: 20px;
  top: 50%;
  margin-top: -62px;
  text-align: center;
  line-height: 0;
  -webkit-transition: .2s;
  -o-transition: .2s;
  transition: .2s; }
  .side .gotop {
    background-color: none;
    cursor: pointer; }
    @media only screen and (min-width: 768px) {
      .side .gotop img:hover {
        -webkit-animation: bounceIn .5s ease;
        animation: bounceIn .5s ease; } }
  @media only screen and (min-width: 768px) {
    .side .chart img:hover {
      -webkit-animation: bounceIn .5s ease;
      animation: bounceIn .5s ease; } }

.top {
  background-color: #18315a;
  padding: 14px;
  position: fixed;
  width: 100%;
  z-index: 50; }
  .top .tag {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%; }

.wrap {
  padding-top: 118px; }