body {
    margin: 0;
    padding: 0;
    font-family: "微軟正黑體", Helvetica, Arial, sans-serif;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

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

img {
    max-width: 100%;
    height: auto;
}

a:hover,
a:focus,
a:active,
a:visited {
    text-decoration: none;
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
    /*For IE 6&7 only*/
}

.wrapper {
    overflow: hidden;
}

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 99;
}

.fixed-top .brandlogo {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 360px;
}

.fixed-top .social_media {
    position: absolute;
    right: 60px;
    top: 30px;
}

.fixed-top .social_media a,
.fixed-top .link_btn ul li a {
    -moz-transition: all 0.15s ease-in-out;
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}

.fixed-top .social_media a {
    height: 50px;
    width: 50px;
    background: transparent url(../images/social_icon.png) no-repeat 0 0;
    display: inline-block;
    text-indent: -9999px;
    background-size: 100% auto;
}

.fixed-top .social_media a:last-child {
    background-position-y: -57px;
    margin: 0 0 0 5px;
}

.fixed-top .link_btn {
    position: absolute;
    right: 15px;
    top: 95px;

}

.fixed-top .link_btn ul li {
    display: block;
    margin: 0 0 5px;
}

.fixed-top .link_btn ul li a {
    display: block;
    height: 63px;
    width: 214px;
    text-indent: -9999px;
    overflow: hidden;
    background: url(../images/button.png) no-repeat;
    background-size: 100% auto;
}

.fixed-top .link_btn ul li a:hover {
    background: url(../images/button_hover.png) no-repeat;
    background-size: 100% auto;
}

.fixed-top .link_btn ul li:nth-child(1) a {
    background-position: 0 2px;
}

.fixed-top .link_btn ul li:nth-child(2) a {
    background-position-y: -79px;
}

.fixed-top .link_btn ul li:nth-child(3) a {
    background-position-y: -158px;
}

.fixed-top .social_media a:hover {
    opacity: .7;
}

.section {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 50%;
    text-align: center;
    overflow: hidden;
    padding: 0 10px;
}

#section0 img:nth-child(2) {
    display: none;
}

#section2 img {
    padding: 110px 0 0;
}

#section3>.fp-tableCell>img {
    padding: 250px 0 0;
    position: relative;
    z-index: 8;
}

.zx {
    position: relative;
    z-index: 10;
}

.ctmove {
    position: absolute;
    left: 50%;
    margin-left: -600px;
}

.ct {
    position: relative;
    background: url(../images/2-ct.png) no-repeat 0 0;
    background-size: cover;
    width: 1200px;
    height: 833px;
    margin: 0 auto;
    z-index: 1;
    -webkit-animation: move 5s ease-in-out infinite;
    animation: move 5s ease-in-out infinite;
}

.knife_wonmen {
    position: absolute;
    z-index: 1;
    left: 188px;
    bottom: 0;
    width: 530px;
}

.lantern-lf {
    position: absolute;
    left: 0;
    top: 0;
    width: 260px;
    display: block;
    animation: swing ease-in-out 3s infinite alternate;
    transform-origin: center -20px;
}

.lantern-rt {
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    display: block;
    animation: swing ease-in-out 6s infinite alternate;
    transform-origin: center -20px;
}

.cake-1 {
    position: absolute;
    bottom: 20px;
    left: 0;
    display: block;
    z-index: 3;
}

.cake-2 {
    position: absolute;
    bottom: 10px;
    left: 50%;
    display: block;
    z-index: 4;
}

.cake-3 {
    position: absolute;
    bottom: 300px;
    right: 295px;
    display: block;
    z-index: 5;
}

.copyright {
    position: absolute;
    background: #060608;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    overflow: hidden;
    padding: 0 15px;
}

/* fullpage custom */

#fp-nav.right {
    right: 15px;
    top: 55%;
}

#fp-nav ul li {
    width: 34px;
    height: 34px;
}

#fp-nav ul li a span {
    width: 34px;
    height: 34px;
    background: transparent url(../images/dots.png) no-repeat 0 0;
    border-radius: 0;
    margin: -20px 0 0 -20px;
    animation: rotation 5s ease-in-out infinite;
}

#fp-nav ul li:nth-child(odd) a span {
    animation: rotation 8s ease-in-out infinite;
}

#fp-nav ul li:hover a span {
    width: inherit;
    height: inherit;
    margin: -20px 0 0 -20px;
    filter: brightness(150%);
}

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
    width: inherit;
    height: inherit;
    margin: -20px 0 0 -20px;
    filter: brightness(150%);
}

#fp-nav ul li .fp-tooltip {
    font-family: "微軟正黑體", Helvetica, Arial, sans-serif;
}

#fp-nav ul li .fp-tooltip.right {
    right: 40px;
}

#fp-nav ul li .fp-tooltip {
    top: 7px;
    height: 100%;
    color: #fff;
}

/* fullpage custom */


/* animation */

@keyframes swing {
    0% {
        transform: rotate(3deg);
    }

    100% {
        transform: rotate(-3deg);
    }
}

@keyframes opacity {
    50% {
        opacity: 1;
    }
}

@keyframes move {
    0% {
        transform: translateY(-15px);
    }

    50% {
        transform: translateY(5px);
    }

    100% {
        transform: translateY(-15px);
    }
}

@keyframes rotation {
    0% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(-180deg);
    }
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-15%, 0, 0);
        transform: translate3d(-15%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-15%, 0, 0);
        transform: translate3d(-15%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

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

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(15%, 0, 0);
        transform: translate3d(15%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(15%, 0, 0);
        transform: translate3d(15%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

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

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

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

@-webkit-keyframes zoomOut {
    from {
        opacity: 0;
        -webkit-transform: scale3d(5, 5, 5);
        transform: scale3d(5, 5, 5);
    }

    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-3px, 0, 0);
        transform: translate3d(-3x, 0, 0);
    }

    40%,
    60%,
    80% {
        -webkit-transform: translate3d(3px, 0, 0);
        transform: translate3d(3px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes zoomOut {
    from {
        opacity: 0;
        -webkit-transform: scale3d(5, 5, 5);
        transform: scale3d(5, 5, 5);
    }

    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-3px, 0, 0);
        transform: translate3d(-3px, 0, 0);
    }

    40%,
    60%,
    80% {
        -webkit-transform: translate3d(3px, 0, 0);
        transform: translate3d(3px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
}
@-webkit-keyframes zoomInDown {
    from {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
  
    60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
  }
  
  @keyframes zoomInDown {
    from {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
  
    60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
  }
  
  .zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown;
  }
@-webkit-keyframes bounceInDown {

    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInDown {

    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

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

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip;
}

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

/* animation */

@media (max-width: 768px) {
    .fixed-top .brandlogo {
        width: 300px;
    }

    .fixed-top .social_media {
        top: 20px;
    }

    .section {
        background-position: 50%;
    }

    .ctmove {
        top: 50px;
    }

    #section2 {
        background-position: 84% 0;
    }

    .knife_wonmen {
        width: 100%;
        left: 0;
    }

}

@media (max-width: 420px) {
    #section0 img:nth-child(1) {
        display: none;
    }

    #section0 img:nth-child(2) {
        display: inline-block;
    }

    .fixed-top .brandlogo {
        width: 200px;
    }

    .fixed-top .social_media a {
        width: 35px;
        height: 35px;
    }

    .fixed-top .social_media {
        right: 15px;
    }

    .fixed-top .social_media a:last-child {
        background-position-y: -40px;
        margin: 0;
    }

    .fixed-top .link_btn ul li {
        margin: 0;
    }

    .fixed-top .link_btn ul li a {
        width: 120px;
        height: 35px;
    }

    .fixed-top .link_btn ul li:nth-child(2) a {
        background-position-y: -44px;
    }

    .fixed-top .link_btn ul li:nth-child(3) a {
        background-position-y: -89px;
    }

    .fixed-top .link_btn {
        top: 60px;
    }

    .ctmove {
        margin-left: -300px;
    }

    .ct {
        width: 600px;
        height: 416px;
    }

    .lantern-lf {
        width: 150px;
        left: -35px;
    }

    .lantern-rt {
        width: 180px;
        right: -78px;
        top: -61px;
    }

    .cake-1, .cake-2, .cake-3 {
        display: none;
    }

    .knife_wonmen {
        margin-left: -48px;
    }

    #section3>.fp-tableCell>img,
    #section6>.fp-tableCell>img {
        padding-top: 200px;
    }
}