@charset "UTF-8";
@import url("bootstrap.min.css");
@import url("https://use.fontawesome.com/releases/v5.0.6/css/all.css");
@import url("owl.carousel.min.css");
@import url("owl.theme.default.min.css");
@import url("https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css");
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
@font-face {
  font-family: 'cwTeXMing';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.eot);
  src: url(https://fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.eot?#iefix) format("embedded-opentype"), url(https://fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.woff2) format("woff2"), url(https://fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.woff) format("woff"), url(https://fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.ttf) format("truetype"); }

.blocker {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0px;
  height: 0;
  overflow: hidden; }
  .blocker iframe,
  .blocker object,
  .blocker embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s; }
  * a:hover, * a:focus {
    text-decoration: none; }

body {
  overflow-x: hidden; }

.noticea {
  background: rgba(255, 255, 255, 0.8); }

.modal-con {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 50%;
  height: auto;
  padding: 30px 20px;
  background: #fff;
  line-height: 2;
  font-size: 1.75rem;
  -webkit-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.3); }

.modal-backdrop {
  background: rgba(255, 255, 255, 0.9); }

.modal-container {
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center; }
  .modal-container h3 {
    margin: 0;
    text-align: center;
    margin-top: -30px; }
  .modal-container p {
    padding: 0 5%;
    text-align: left; }

.notice-btn {
  padding: 0 10px;
  background: #58aba3;
  color: #fff;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1.75rem; }

.close-btn {
  background: #000;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
  margin: 0 auto;
  margin-top: -20px;
  padding: 5px 30px;
  color: #fff; }

header {
  background-color: #393939;
  text-align: center;
  padding: 10px 0px; }

section.hero {
  width: 100%;
  background: url("../image/bg.gif");
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
  padding: 4% 0; }
  section.hero .container {
    padding-left: 13%;
    padding-right: 13%; }
  section.hero p.decoration {
    text-transform: uppercase;
    color: #fff;
    font-family: 'cwTeXFangSong'; }
    section.hero p.decoration span.normalcase {
      text-transform: capitalize;
      font-size: 0.5rem; }
    section.hero p.decoration span.underline {
      text-decoration: underline; }

@media screen\0 {
  section.hero p.decoration {
    font-family: 'Noto Sans TC'; } }

.hero-title {
  display: block;
  width: 100%;
  margin: 0 auto;
  text-align: center; }
  .hero-title img {
    width: 100%; }

ul.menu {
  padding-left: 0;
  margin: 30px 0;
  text-align: center; }
  ul.menu li {
    display: inline-block; }
    ul.menu li a {
      background: #000;
      color: #fff;
      margin: 0px 10px;
      padding: 5px 15px;
      font-family: 'cwTeXFangSong';
      font-size: 2rem; }
      ul.menu li a:hover {
        background: #fff;
        color: #000; }

section.menuarea, .menuarea-fixed {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 3% 0; }

.menuarea-fixed {
  display: none;
  opacity: 0; }
  .menuarea-fixed.menufixed {
    display: block;
    -webkit-animation: showup 1s 0.3s forwards alternate;
    animation: showup 1s 0.3s forwards alternate;
    position: fixed;
    top: 0;
    background: #fff;
    z-index: 9999;
    padding: 1% 0; }
    .menuarea-fixed.menufixed .menu-content {
      height: auto; }
      .menuarea-fixed.menufixed .menu-content .cross {
        display: none; }
      .menuarea-fixed.menufixed .menu-content .places {
        display: none; }

.menublock {
  width: 95%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.menu-s {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: calc(100%/2); }

.menu-content {
  border: 5px solid #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: calc(100%/2);
  height: 150px;
  margin: 0 5px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 3rem;
  cursor: pointer;
  font-family: 'Noto Sans TC'; }
  .menu-content:hover {
    border: 5px solid #ca2420; }
  .menu-content .places span {
    color: #c23535;
    font-size: 2.5rem;
    margin-left: 10px; }
  .menu-content .wording {
    color: #c23535; }
  .menu-content .cross {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    position: relative; }
    .menu-content .cross:before, .menu-content .cross:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 100%;
      height: 2px;
      background: #c23535;
      position: absolute; }
    .menu-content .cross:before {
      -webkit-transform: translate(-50%, -50%) rotate(45deg);
      -ms-transform: translate(-50%, -50%) rotate(45deg);
      transform: translate(-50%, -50%) rotate(45deg); }
    .menu-content .cross:after {
      -webkit-transform: translate(-50%, -50%) rotate(-45deg);
      -ms-transform: translate(-50%, -50%) rotate(-45deg);
      transform: translate(-50%, -50%) rotate(-45deg); }

.maincontent.owl-carousel .owl-item img {
  width: auto; }

.main-content {
  padding: 3% 0;
  overflow: hidden; }

.title-block {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 20px;
  overflow: hidden; }
  .title-block:after {
    content: "";
    width: 100%;
    height: 2px;
    background: #000;
    display: block; }
  .title-block .number {
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: 10px;
    position: relative; }
    .title-block .number img {
      margin-bottom: 10px; }
    .title-block .number:after {
      content: "";
      width: 215%;
      height: 1px;
      background: #000;
      position: absolute;
      bottom: 0;
      right: 20%; }
  .title-block h2.section-title {
    display: inline-block;
    vertical-align: bottom;
    font-family: 'cwTeXMing';
    font-size: 3rem;
    margin-bottom: 0; }

.wording img {
  max-width: 423px; }

.content-block {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.head-block {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .head-block .word-block {
    width: 50%;
    display: block;
    padding: 0 15px; }

.people-block,
.word-block {
  width: calc(100%/2);
  display: block;
  padding: 0 15px; }

.word-block {
  padding-left: 30px; }
  .word-block p.description {
    line-height: 2;
    font-family: 'Noto Sans TC';
    text-align: left; }
    .word-block p.description.word-bottom {
      width: 70%; }
  .word-block h3.bottom-title {
    text-align: left;
    font-size: 4rem;
    font-family: 'cwTeXMing'; }
  .word-block .wording {
    margin-top: 20px; }
  .word-block img {
    width: 100% !important; }

.display-people {
  width: 100%;
  min-height: 908px;
  z-index: 0;
  position: relative; }
  .display-people .bg-pink {
    width: 100%;
    height: 100%;
    background: url(../image/bg-pink.png);
    position: absolute;
    top: -5%; }
    .display-people .bg-pink:after {
      content: "";
      width: 50%;
      height: 50%;
      background: #efd5b0;
      position: absolute;
      z-index: -1;
      bottom: -5%;
      left: -5%; }

.object-people, .object-product {
  position: absolute; }

.data {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center; }
  .data .product-name {
    width: 320px; }
  .data#p101 {
    bottom: -10%; }
  .data#p102 {
    bottom: 15%; }
  .data#p103 {
    bottom: 25%; }
  .data#p104 {
    bottom: 30%; }
  .data#p201 {
    bottom: -10%; }
  .data#p202 {
    bottom: 0%; }
  .data#p304 {
    bottom: 25%; }
  .data#p401 {
    bottom: -10%; }
  .data#p402 {
    bottom: 15%; }
  .data#p403 {
    bottom: 25%; }

a.object-button {
  position: absolute;
  padding: 2% 3%;
  background: #fff;
  font-size: 2rem;
  color: #000;
  font-family: 'Noto Sans TC'; }
  a.object-button i {
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-animation: leftright 0.3s infinite alternate;
    animation: leftright 0.3s infinite alternate; }

#one .head-block {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }

#one #p01 {
  top: -20%;
  left: -55%;
  -webkit-transform: translateX(-5%);
  -ms-transform: translateX(-5%);
  transform: translateX(-5%);
  opacity: 0;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s; }

#one #p0101 {
  right: 5%;
  bottom: 5%;
  opacity: 0; }

#one a.object-button {
  right: 5%;
  top: 3%; }

#one.active {
  display: block; }
  #one.active #p01 {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1; }
  #one.active #p0101 {
    -webkit-animation: showup 1s 0.3s forwards alternate;
    animation: showup 1s 0.3s forwards alternate; }

.owl-item.active #one #p01 {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
  opacity: 1; }

.owl-item.active #one #p0101 {
  -webkit-animation: showup 1s 0.3s forwards alternate;
  animation: showup 1s 0.3s forwards alternate; }

#two .head-block {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }

#two #p02 {
  top: -8%;
  left: -15%;
  z-index: 10;
  opacity: 0; }

#two #p0201 {
  z-index: 5;
  left: -55%;
  top: -20%;
  opacity: 0;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s; }

#two .object-product {
  right: -5%;
  bottom: 5%;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 0; }

#two a.object-button {
  right: 5%;
  top: 3%; }

#two.active #p02 {
  -webkit-animation: showup 1s 0.3s forwards alternate;
  animation: showup 1s 0.3s forwards alternate; }

#two.active #p0201 {
  -webkit-animation: showup 1s forwards alternate;
  animation: showup 1s forwards alternate; }

#two.active .object-product {
  -webkit-animation: showup 1s 0.5s forwards alternate;
  animation: showup 1s 0.5s forwards alternate; }

#two .show {
  text-align: center;
  -webkit-animation: round 12s linear infinite;
  animation: round 12s linear infinite; }
  #two .show:nth-child(1) {
    -webkit-animation-delay: 5s;
    animation-delay: 5s; }

.owl-item.active #two #p02 {
  -webkit-animation: showup 1s 0.3s forwards alternate;
  animation: showup 1s 0.3s forwards alternate; }

.owl-item.active #two #p0201 {
  -webkit-animation: showup 1s forwards alternate;
  animation: showup 1s forwards alternate; }

.owl-item.active #two .object-product {
  -webkit-animation: showup 1s 0.5s forwards alternate;
  animation: showup 1s 0.5s forwards alternate; }

#three .head-block {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }

#three .content-block {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }

#three .display-people .bg-pink {
  top: 0%; }

#three #p03 {
  right: -15%;
  opacity: 0; }

#three .object-product {
  top: 5%;
  left: -2%;
  opacity: 0; }

#three a.object-button {
  right: 5%;
  top: 3%; }

.owl-item.active #three #p03 {
  -webkit-animation: showup 1s 0s forwards alternate;
  animation: showup 1s 0s forwards alternate; }

.owl-item.active #three .object-product {
  -webkit-animation: showup 1s 0.5s forwards alternate;
  animation: showup 1s 0.5s forwards alternate; }

#four .display-people .bg-pink {
  top: 0%; }

#four .head-block {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }

#four .content-block {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }

#four #p04 {
  left: -10%;
  top: -5%;
  opacity: 0; }

#four #p0401 {
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  right: -45%;
  top: -16%;
  opacity: 0; }

#four .object-product {
  top: 10%;
  left: -2%;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 0; }

#four a.object-button {
  left: 3%;
  top: 2%; }

#four.active #p04 {
  -webkit-animation: showup 1s 0.5s forwards alternate;
  animation: showup 1s 0.5s forwards alternate; }

#four.active #p0401 {
  -webkit-animation: showup 1s 0s forwards alternate;
  animation: showup 1s 0s forwards alternate; }

#four.active .object-product {
  -webkit-animation: showup 1s 1s forwards alternate;
  animation: showup 1s 1s forwards alternate; }

#four .show {
  -webkit-animation: round 15s linear infinite;
  animation: round 15s linear infinite; }
  #four .show:nth-child(1) {
    -webkit-animation-delay: 5s;
    animation-delay: 5s; }
  #four .show:nth-child(2) {
    -webkit-animation-delay: 10s;
    animation-delay: 10s; }

.owl-item.active #four #p04 {
  -webkit-animation: showup 1s 0.5s forwards alternate;
  animation: showup 1s 0.5s forwards alternate; }

.owl-item.active #four #p0401 {
  -webkit-animation: showup 1s 0s forwards alternate;
  animation: showup 1s 0s forwards alternate; }

.owl-item.active #four .object-product {
  -webkit-animation: showup 1s 1s forwards alternate;
  animation: showup 1s 1s forwards alternate; }

.view {
  position: relative;
  width: 204px;
  height: 424px; }

.show {
  position: absolute;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  filter: alpha(opacity=0);
  -webkit-animation: round 20s linear infinite;
  animation: round 20s linear infinite; }
  .show:nth-child(1) {
    -webkit-animation-delay: 5s;
    animation-delay: 5s; }
  .show:nth-child(2) {
    -webkit-animation-delay: 10s;
    animation-delay: 10s; }
  .show:nth-child(3) {
    -webkit-animation-delay: 15s;
    animation-delay: 15s; }

section.product-list .title-block {
  position: relative; }
  section.product-list .title-block:before, section.product-list .title-block:after {
    content: "////////////////////////";
    position: absolute;
    font-weight: 300;
    font-size: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  section.product-list .title-block:before {
    -webkit-transform: translate(-200%, -50%);
    -ms-transform: translate(-200%, -50%);
    transform: translate(-200%, -50%); }
  section.product-list .title-block:after {
    background: none;
    width: auto;
    height: auto;
    -webkit-transform: translate(100%, -50%);
    -ms-transform: translate(100%, -50%);
    transform: translate(100%, -50%); }
  section.product-list .title-block h2.section-title {
    font-family: 'cwTeXFangSong';
    line-height: 0.8;
    font-size: 4rem; }
    section.product-list .title-block h2.section-title span {
      font-size: 2rem; }

.product-wrap {
  padding: 0 10%;
  position: relative; }

.product-single {
  display: block;
  text-align: center; }
  .product-single img {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    margin: -15% 0; }

.product-info {
  font-family: 'Noto Sans TC';
  font-weight: 300;
  color: #000;
  text-align: center; }

.product-name {
  font-size: 1.75rem;
  font-family: 'Noto Sans TC'; }

.product-price {
  font-size: 2.5rem;
  font-weight: 500;
  color: #0f3f83; }
  .product-price:before {
    content: "$";
    display: inline-block;
    font-size: 1rem; }

.product-img {
  overflow: hidden; }

.product-slider .owl-prev {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: -5%;
  font-size: 2rem; }

.product-slider .owl-next {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: -5%;
  font-size: 2rem; }

.product-slider {
  padding: 5% 0; }

.top-wrap {
  width: 80%;
  height: 5px;
  background: #000;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 999; }
  .top-wrap:before, .top-wrap:after {
    content: "";
    width: 5px;
    height: 50px;
    background: #000;
    position: absolute;
    top: 0; }
  .top-wrap:before {
    left: 0; }
  .top-wrap:after {
    right: 0; }

.bottom-wrap {
  width: 80%;
  height: 5px;
  background: #000;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 999; }
  .bottom-wrap:before, .bottom-wrap:after {
    content: "";
    width: 5px;
    height: 50px;
    background: #000;
    position: absolute;
    bottom: 0; }
  .bottom-wrap:before {
    left: 0; }
  .bottom-wrap:after {
    right: 0; }

p.rightdes {
  position: absolute;
  right: 0;
  padding: 0 10%; }

section.stylus {
  padding: 5% 0;
  background: url(../image/stylus-bg.gif);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 50%; }
  section.stylus .title-block:before {
    content: none; }
  section.stylus .title-block:after {
    content: none; }
  section.stylus .title-block h2.section-title {
    font-family: 'cwTeXFangSong';
    line-height: 1;
    font-size: 4rem; }
    section.stylus .title-block h2.section-title span {
      font-size: 4rem;
      color: #c23535;
      font-weight: 500; }
  section.stylus .content-block {
    -ms-flex-pack: distribute;
    justify-content: space-around; }

.styles-block {
  width: 30%; }
  .styles-block img {
    width: 100%; }

.mpeg {
  width: 60%; }

footer {
  margin-top: -2px;
  padding: 20px 0px;
  background: #2c2c2c; }

ul.links {
  padding-left: 0;
  list-style: none;
  text-align: center; }
  ul.links li {
    display: inline-block; }
    ul.links li:after {
      content: "";
      width: 2px;
      height: 20px;
      display: inline-block;
      margin: 0px 10px;
      background: #ffffff;
      vertical-align: middle; }
  ul.links li:last-child:after {
    content: none; }

.copyright {
  color: #fff;
  text-align: center;
  margin-bottom: 3%; }

a.luckybag {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 9999; }
  a.luckybag img {
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    -webkit-animation: jumping 0.5s alternate infinite;
    animation: jumping 0.5s alternate infinite; }

.correct {
  text-align: center;
  font-size: 10rem;
  color: green;
  -webkit-animation: jumping 0.3s infinite alternate;
  animation: jumping 0.3s infinite alternate; }

.gotop {
  position: fixed;
  bottom: 0;
  background: rgba(255, 255, 255, 0.6);
  width: 50px;
  text-align: center;
  border-radius: 5px 5px 0px 0px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  left: 50%;
  z-index: 999;
  cursor: pointer;
  display: none;
  opacity: 0; }
  .gotop.showup {
    display: block;
    -webkit-animation: showup 1s 0.3s forwards alternate;
    animation: showup 1s 0.3s forwards alternate; }

@media screen\0 {
  section.product-list .title-block h2.section-title, section.stylus .title-block h2.section-title, .maincontent .title-block h2.section-title {
    font-family: 'Noto Sans TC';
    font-weight: 300; } }

@media screen and (max-width: 1280px) {
  #two #p0201 {
    display: none; }
  #four #p0401 {
    display: none; } }

@-webkit-keyframes jumping {
  0% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7); }
  100% {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); } }

@keyframes jumping {
  0% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7); }
  100% {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); } }

@-webkit-keyframes showup {
  0% {
    display: none;
    opacity: 0; }
  25% {
    display: block;
    opacity: 0; }
  100% {
    display: block;
    opacity: 1; } }

@keyframes showup {
  0% {
    display: none;
    opacity: 0; }
  25% {
    display: block;
    opacity: 0; }
  100% {
    display: block;
    opacity: 1; } }

@-webkit-keyframes round {
  4% {
    opacity: 1;
    filter: alpha(opacity=100);
    /* 0 - 1秒 淡入*/ }
  20% {
    opacity: 1;
    filter: alpha(opacity=100);
    /* 1- 5秒靜止*/ }
  24% {
    opacity: 0;
    filter: alpha(opacity=0);
    /* 5-6秒淡出*/ } }

@keyframes round {
  4% {
    opacity: 1;
    filter: alpha(opacity=100);
    /* 0 - 1秒 淡入*/ }
  20% {
    opacity: 1;
    filter: alpha(opacity=100);
    /* 1- 5秒靜止*/ }
  24% {
    opacity: 0;
    filter: alpha(opacity=0);
    /* 5-6秒淡出*/ } }

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

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

@media screen and (max-width: 1024px) {
  section.hero {
    padding-bottom: 0; }
  .hero-title img {
    width: 80%; }
  .blocker iframe {
    width: 70%;
    height: 280px; }
  .menublock {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8); }
  .title-block .number img {
    width: 60%; }
  a.object-button {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8); }
  #one #p01 {
    left: -70%; }
  #one #p0101 {
    right: -5%; }
  #one a.object-button {
    right: 0; }
  #two #p0201 {
    display: none; }
  #two #p02 {
    left: -35%; }
  #two .object-product {
    right: -6%;
    bottom: 15%; }
  #two a.object-button {
    right: 0; }
  #three #p03 {
    right: -35%; }
  #three .object-product {
    top: -2%;
    left: 0%; }
  #three a.object-button {
    right: 0; }
  #four #p0401 {
    display: none; }
  #four .object-product {
    left: 0; }
  .mpeg iframe {
    height: 380px; } }

@media screen and (max-width: 768px) {
  ul.menu li a {
    font-size: 1rem; }
  .blocker iframe {
    width: 75%;
    height: 230px; }
  .menublock {
    width: 100%; }
  .menu-content {
    font-size: 2rem; }
  .head-block .word-block {
    font-size: 1rem; }
  .word-block p.description.word-bottom {
    font-size: 1rem;
    width: 100%; }
  .display-people .bg-pink {
    height: 85%; }
  #one #p01 {
    left: -115%;
    top: -25%; }
  #one #p0101 {
    bottom: 20%;
    right: -10%;
    -webkit-transform: translateY(-5%) scale(0.8);
    -ms-transform: translateY(-5%) scale(0.8);
    transform: translateY(-5%) scale(0.8); }
  #one a.object-button {
    right: -5%; }
  #two #p02 {
    top: -20%;
    left: -60%;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8); }
  #two .object-product {
    right: -15%;
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7); }
  #two a.object-button {
    right: -5%; }
  #three #p03 {
    right: -60%;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8); }
  #three .object-product {
    top: 0%;
    left: -15%;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6); }
  #four #p04 {
    left: -30%;
    top: -10%; }
  #four .object-product {
    top: 5%;
    left: -10%;
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7); }
  #four a.object-button {
    left: -5%; }
  .mpeg iframe {
    height: 292px; }
  a.luckybag {
    right: -5%;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8); } }

@media screen and (max-width: 420px) {
  a.logo img {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8); }
  .hero-title img {
    width: 100%; }
  section.hero {
    background-position: center top; }
    section.hero p.decoration {
      font-size: 1rem; }
    section.hero .container {
      padding-left: 5%;
      padding-right: 5%; }
  ul.menu li a {
    margin: 0 5px;
    padding: 5px; }
  .blocker iframe {
    width: 100%;
    height: 210px; }
  .menublock {
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .menu-content {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
    margin: 5px;
    font-size: 2.5rem; }
  .menu-s {
    width: 100%;
    margin: 5px 0; }
  .title-block {
    width: 100%; }
    .title-block .number {
      margin-bottom: 0; }
      .title-block .number:after {
        content: none; }
      .title-block .number img {
        width: 50% !important; }
    .title-block h2.section-title {
      margin-top: 0;
      font-size: 2.5rem; }
  .head-block .word-block {
    width: 100%; }
  .content-block {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
  .people-block,
  .word-block {
    width: 100%; }
  .display-people {
    min-height: 700px; }
    .display-people .bg-pink {
      top: 0; }
  #one #p01 {
    left: -95%;
    top: -50%;
    -webkit-transform: translateX(-5%) scale(0.7);
    -ms-transform: translateX(-5%) scale(0.7);
    transform: translateX(-5%) scale(0.7); }
  #one #p101 {
    bottom: -10%; }
  .owl-item.active #one #p01 {
    -webkit-transform: translateX(0%) scale(0.7);
    -ms-transform: translateX(0%) scale(0.7);
    transform: translateX(0%) scale(0.7); }
  #two #p02 {
    top: -40%;
    left: -45%;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6); }
  #two .object-product {
    right: -10%;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6); }
  .word-block {
    padding-left: 0;
    padding-right: 0; }
  #three .content-block {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
  #three #p03 {
    right: -55%;
    top: -30%;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6); }
  #three .object-product {
    top: -10%;
    left: -5%; }
  #four .content-block {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
  #four #p04 {
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6);
    top: -50%;
    left: -15%; }
  #four .object-product {
    top: 5%;
    left: -3%; }
  section.stylus {
    margin-top: 20%;
    background-position: 350% 100%;
    background-size: 90%; }
    section.stylus .title-block h2.section-title {
      font-size: 2rem; }
  .styles-block {
    width: 100%;
    padding: 0 5%;
    text-align: center; }
    .styles-block img {
      width: 80%; }
  .mpeg {
    width: 100%;
    margin-top: 15%;
    text-align: center;
    padding: 0 5%;
    margin-bottom: 20%; }
  a.luckybag {
    right: -10%; }
  .modal-con {
    width: 95%; }
  section.product-list .title-block:before {
    -webkit-transform: translate(-185%, -50%);
    -ms-transform: translate(-185%, -50%);
    transform: translate(-185%, -50%); }
  section.product-list .title-block:after {
    -webkit-transform: translate(75%, -50%);
    -ms-transform: translate(75%, -50%);
    transform: translate(75%, -50%); } }

@media screen and (max-width: 375px) {
  header {
    overflow: hidden; }
  ul.menu li a {
    margin: 0; }
  .menu-content {
    font-size: 2rem; }
  #one #p01 {
    left: -115%; }
  #one #p0101 {
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6); }
  #two #p02 {
    left: -60%; }
  #two .object-product {
    top: 0%;
    right: -12%;
    bottom: auto; }
  #three #p03 {
    right: -70%;
    top: -25%; }
  #three .object-product {
    top: -10%;
    left: -10%; }
  #four #p04 {
    left: -30%; }
  #four .object-product {
    top: 0%;
    left: -8%; }
  a.luckybag {
    right: -15%;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6); } }

@media screen and (max-width: 320px) {
  a.logo img {
    width: 100%; }
  .blocker iframe {
    height: 160px; }
  ul.menu li a {
    letter-spacing: -1px; }
  .people-block,
  .word-block {
    padding: 0; }
  .display-people {
    min-height: 600px; }
  #one #p01 {
    top: -70%;
    left: -120%;
    -webkit-transform: translateX(-5%) scale(0.6);
    -ms-transform: translateX(-5%) scale(0.6);
    transform: translateX(-5%) scale(0.6); }
  #one #p0101 {
    bottom: 10%;
    right: -15%;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5); }
  .owl-item.active #one #p01 {
    -webkit-transform: translateX(0%) scale(0.6);
    -ms-transform: translateX(0%) scale(0.6);
    transform: translateX(0%) scale(0.6); }
  #two #p02 {
    top: -58%;
    left: -65%;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5); }
  #two .object-product {
    right: -10%;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5); }
  #three #p03 {
    top: -50%;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5); }
  #three .object-product {
    top: -25%;
    left: -15%;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5); }
  #four #p04 {
    top: -65%;
    left: -40%;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5); }
  #four .object-product {
    top: -15%;
    left: -10%;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6); }
  section.stylus {
    margin-top: 35%; }
  a.luckybag {
    right: -22%; } }