@charset "UTF-8";
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
@import url("https://fonts.googleapis.com/css2?family=Lilita+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Signika:wght@600&display=swap");
* {
  -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,
select,
textarea,
p,
blockquote,
th,
td {
  padding: 0;
  margin: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

fieldset,
img {
  border: 0;
  border-style: none; }

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-weight: normal;
  font-style: normal; }

ol,
ul {
  list-style: none; }

caption,
th {
  text-align: left; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: 100%; }

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

abbr,
acronym {
  border: 0; }

a {
  text-decoration: none;
  color: inherit; }

input,
button,
textarea,
select,
option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit; }

*:focus {
  outline: none; }

@-webkit-keyframes punchman_back {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1; }
  25% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; }
  30% {
    opacity: 0; }
  35% {
    opacity: 1; }
  40% {
    opacity: 0; }
  45% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }

@keyframes punchman_back {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1; }
  25% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; }
  30% {
    opacity: 0; }
  35% {
    opacity: 1; }
  40% {
    opacity: 0; }
  45% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }

@-webkit-keyframes punchman {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  20%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes punchman {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  20%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes punchman_fly {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); } }

@keyframes punchman_fly {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); } }

@-webkit-keyframes punchman_fist {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  40%, 50%, 70%, 100% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5); }
  55% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6); } }

@keyframes punchman_fist {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  40%, 50%, 70%, 100% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5); }
  55% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6); } }

@keyframes punchman_fist {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  10%, 50%, 70%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  55% {
    -webkit-transform: scale(1.8);
    transform: scale(1.8); } }

@-webkit-keyframes glass_01 {
  0% {
    -webkit-transform: translate(23vw, 10vw) scale(0);
    transform: translate(23vw, 10vw) scale(0); }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); } }

@keyframes glass_01 {
  0% {
    -webkit-transform: translate(23vw, 10vw) scale(0);
    transform: translate(23vw, 10vw) scale(0); }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); } }

@-webkit-keyframes glass_02 {
  0% {
    -webkit-transform: translate(29vw, 4vw) scale(0);
    transform: translate(29vw, 4vw) scale(0); }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); } }

@keyframes glass_02 {
  0% {
    -webkit-transform: translate(29vw, 4vw) scale(0);
    transform: translate(29vw, 4vw) scale(0); }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); } }

@-webkit-keyframes glass_03 {
  0% {
    -webkit-transform: translate(27vw, -20vw) scale(0);
    transform: translate(27vw, -20vw) scale(0); }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); } }

@keyframes glass_03 {
  0% {
    -webkit-transform: translate(27vw, -20vw) scale(0);
    transform: translate(27vw, -20vw) scale(0); }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); } }

@-webkit-keyframes glass_04 {
  0% {
    -webkit-transform: translate(9vw, -22vw) scale(0);
    transform: translate(9vw, -22vw) scale(0); }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); } }

@keyframes glass_04 {
  0% {
    -webkit-transform: translate(9vw, -22vw) scale(0);
    transform: translate(9vw, -22vw) scale(0); }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); } }

@-webkit-keyframes glass_05 {
  0% {
    -webkit-transform: translate(-26vw, 14vw) scale(0);
    transform: translate(-26vw, 14vw) scale(0); }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); } }

@keyframes glass_05 {
  0% {
    -webkit-transform: translate(-26vw, 14vw) scale(0);
    transform: translate(-26vw, 14vw) scale(0); }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); } }

@-webkit-keyframes glass_06 {
  0% {
    -webkit-transform: translate(-33vw, 12vw) scale(0);
    transform: translate(-33vw, 12vw) scale(0); }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); } }

@keyframes glass_06 {
  0% {
    -webkit-transform: translate(-33vw, 12vw) scale(0);
    transform: translate(-33vw, 12vw) scale(0); }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); } }

@-webkit-keyframes glass_07 {
  0% {
    -webkit-transform: translate(-33vw, -14vw) scale(0);
    transform: translate(-33vw, -14vw) scale(0); }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); } }

@keyframes glass_07 {
  0% {
    -webkit-transform: translate(-33vw, -14vw) scale(0);
    transform: translate(-33vw, -14vw) scale(0); }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); } }

@-webkit-keyframes glass_08 {
  0% {
    -webkit-transform: translate(-21vw, -18vw) scale(0);
    transform: translate(-21vw, -18vw) scale(0); }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); } }

@keyframes glass_08 {
  0% {
    -webkit-transform: translate(-21vw, -18vw) scale(0);
    transform: translate(-21vw, -18vw) scale(0); }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); } }

@-webkit-keyframes mashinVideoBtn {
  0%, 100% {
    -webkit-filter: brightness(1);
    filter: brightness(1); }
  50% {
    -webkit-filter: brightness(1.3);
    filter: brightness(1.3); } }

@keyframes mashinVideoBtn {
  0%, 100% {
    -webkit-filter: brightness(1);
    filter: brightness(1); }
  50% {
    -webkit-filter: brightness(1.3);
    filter: brightness(1.3); } }

@-webkit-keyframes thanatos {
  0% {
    opacity: 0; }
  25% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes thanatos {
  0% {
    opacity: 0; }
  25% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes thanatos_btn {
  0% {
    -webkit-transform: rotate(60deg) scale(1);
    transform: rotate(60deg) scale(1);
    opacity: 0.5; }
  50% {
    -webkit-transform: rotate(240deg) scale(1.1);
    transform: rotate(240deg) scale(1.1);
    opacity: 1; }
  100% {
    -webkit-transform: rotate(60deg) scale(1);
    transform: rotate(60deg) scale(1);
    opacity: 0.5; } }

@keyframes thanatos_btn {
  0% {
    -webkit-transform: rotate(60deg) scale(1);
    transform: rotate(60deg) scale(1);
    opacity: 0.5; }
  50% {
    -webkit-transform: rotate(240deg) scale(1.1);
    transform: rotate(240deg) scale(1.1);
    opacity: 1; }
  100% {
    -webkit-transform: rotate(60deg) scale(1);
    transform: rotate(60deg) scale(1);
    opacity: 0.5; } }

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

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

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

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

@-webkit-keyframes mashin {
  0% {
    opacity: 0;
    -webkit-transform: scale(3);
    transform: scale(3); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes mashin {
  0% {
    opacity: 0;
    -webkit-transform: scale(3);
    transform: scale(3); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes mashin_fadein_right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px) scale(3);
    transform: translateX(100px) scale(3); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1); } }

@keyframes mashin_fadein_right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px) scale(3);
    transform: translateX(100px) scale(3); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1); } }

@-webkit-keyframes mashin_fadein_left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px) scale(3);
    transform: translateX(-100px) scale(3); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1); } }

@keyframes mashin_fadein_left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px) scale(3);
    transform: translateX(-100px) scale(3); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1); } }

@-webkit-keyframes mashin_fly_right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(300px) rotate(360deg);
    transform: translateX(300px) rotate(360deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); } }

@keyframes mashin_fly_right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(300px) rotate(360deg);
    transform: translateX(300px) rotate(360deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); } }

@-webkit-keyframes mashin_fly_left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-300px) rotate(-360deg);
    transform: translateX(-300px) rotate(-360deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); } }

@keyframes mashin_fly_left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-300px) rotate(-360deg);
    transform: translateX(-300px) rotate(-360deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); } }

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

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

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

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

h1 {
  font-size: 40px;
  font-weight: 700; }

h2 {
  font-size: 36px;
  font-weight: 600; }

h3 {
  font-size: 28px;
  font-weight: 600; }

h4 {
  font-size: 26px;
  font-weight: 600; }

h5 {
  font-size: 22px;
  font-weight: 500; }

p {
  font-size: 18px; }

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

footer {
  background-color: #1c1c1c; }

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%; }

body {
  line-height: 1.5;
  font-family: 'Noto Sans TC', "微軟正黑體", sans-serif;
  font-size: 18px;
  overflow-x: hidden;
  background-color: #fff; }

#gnjoy_topBar {
  position: absolute;
  left: 0;
  top: 0; }

.romMenu {
  position: fixed;
  right: 10px;
  top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
  .romMenu > div {
    margin-right: 3px; }
  .romMenu.upper {
    top: 10px; }
  .romMenu.hide {
    display: none; }

#fullpage {
  color: #fff;
  position: relative; }
  #fullpage .section {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden; }
  #fullpage .video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10;
    overflow: hidden;
    z-index: 99999999; }
    #fullpage .video .videoWrap {
      border: 1px solid #b15050;
      position: absolute;
      left: 50%;
      top: 50%;
      font-size: 0;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
      #fullpage .video .videoWrap .close {
        position: absolute;
        width: 42px;
        height: 42px;
        right: -8px;
        top: -38px;
        cursor: pointer; }
        #fullpage .video .videoWrap .close span {
          position: relative;
          display: block;
          width: 40px;
          height: 2px;
          background-color: #fff; }
          #fullpage .video .videoWrap .close span:nth-child(1) {
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-transform-origin: center left;
            -ms-transform-origin: center left;
            transform-origin: center left;
            top: 2px;
            left: 3px; }
          #fullpage .video .videoWrap .close span:nth-child(2) {
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-transform-origin: center right;
            -ms-transform-origin: center right;
            transform-origin: center right;
            left: -9px; }
      #fullpage .video .videoWrap video {
        width: 800px; }
  #fullpage .section1 {
    background-image: url(../img/s4_bg.jpg);
    background-position: center top 35px;
    background-size: cover;
    background-repeat: no-repeat; }
    #fullpage .section1::before, #fullpage .section1::after {
      content: "";
      position: absolute;
      width: 100%;
      background-repeat: no-repeat;
      left: 0;
      z-index: 10; }
    #fullpage .section1::before {
      background-image: url(../img/s4_frame_top.png);
      background-position: left top;
      height: 22px;
      top: 35px; }
    #fullpage .section1::after {
      background-image: url(../img/s4_frame_bottom.png);
      background-position: right bottom;
      height: 32px;
      bottom: 0; }
    #fullpage .section1 .video {
      display: none; }
      #fullpage .section1 .video .videoWrap {
        border: 1px solid #f0c05a; }
    #fullpage .section1 .slogan {
      position: absolute;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      bottom: 145px;
      z-index: 10; }
      #fullpage .section1 .slogan > img {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation: punchman 0.8s 0.9s cubic-bezier(0.4, -0.58, 0.68, 1.51) forwards;
        animation: punchman 0.8s 0.9s cubic-bezier(0.4, -0.58, 0.68, 1.51) forwards; }
      #fullpage .section1 .slogan .playBtn {
        position: absolute;
        left: 48px;
        bottom: -25px;
        cursor: pointer;
        -webkit-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation: punchman 0.8s 0.9s cubic-bezier(0.4, -0.58, 0.68, 1.51) forwards;
        animation: punchman 0.8s 0.9s cubic-bezier(0.4, -0.58, 0.68, 1.51) forwards; }
        #fullpage .section1 .slogan .playBtn:hover img {
          -webkit-animation: mashinVideoBtn 0.5s ease-in-out infinite;
          animation: mashinVideoBtn 0.5s ease-in-out infinite; }
    #fullpage .section1 .punchBtn {
      z-index: 5;
      position: absolute;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      bottom: 40px;
      -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
      transform-origin: center center;
      -webkit-transition: all 0.1s ease-in;
      -o-transition: all 0.1s ease-in;
      transition: all 0.1s ease-in; }
      #fullpage .section1 .punchBtn:hover {
        -webkit-transform: translateX(-50%) scale(0.95) rotate(3deg);
        -ms-transform: translateX(-50%) scale(0.95) rotate(3deg);
        transform: translateX(-50%) scale(0.95) rotate(3deg); }
      #fullpage .section1 .punchBtn img {
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px);
        -webkit-animation: punchBtn 1s 0.9s cubic-bezier(0.4, -0.58, 0.68, 1.51) forwards;
        animation: punchBtn 1s 0.9s cubic-bezier(0.4, -0.58, 0.68, 1.51) forwards; }

@-webkit-keyframes punchBtn {
  0% {
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  80% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  85% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px); }
  90% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  95% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px); }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px); } }

@keyframes punchBtn {
  0% {
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  80% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  85% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px); }
  90% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  95% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px); }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px); } }
    #fullpage .section1 .punchman {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden; }
      #fullpage .section1 .punchman .back {
        position: relative;
        top: -80px;
        left: calc(50% - 735px); }
        #fullpage .section1 .punchman .back img {
          -webkit-transform: scale(0);
          -ms-transform: scale(0);
          transform: scale(0);
          opacity: 1;
          -webkit-transform-origin: center center;
          -ms-transform-origin: center center;
          transform-origin: center center;
          -webkit-animation: punchman_back 0.7s 1s linear forwards;
          animation: punchman_back 0.7s 1s linear forwards; }
      #fullpage .section1 .punchman .man {
        position: absolute;
        left: calc(50% - 629px);
        top: 82px;
        -webkit-animation: punchman_fly 3s ease-in-out infinite;
        animation: punchman_fly 3s ease-in-out infinite; }
        #fullpage .section1 .punchman .man img {
          -webkit-transform: scale(0);
          -ms-transform: scale(0);
          transform: scale(0);
          -webkit-transform-origin: center center;
          -ms-transform-origin: center center;
          transform-origin: center center;
          -webkit-animation: punchman 1s 0.5s linear forwards;
          animation: punchman 1s 0.5s linear forwards; }
        #fullpage .section1 .punchman .man::after {
          content: "";
          position: absolute;
          display: block;
          width: 69%;
          height: 60%;
          background-image: url(../img/s4_punchman_fist.png);
          background-size: contain;
          background-repeat: no-repeat;
          top: 13%;
          right: -18%;
          -webkit-transform: scale(0);
          -ms-transform: scale(0);
          transform: scale(0);
          -webkit-transform-origin: left center;
          -ms-transform-origin: left center;
          transform-origin: left center;
          -webkit-animation: punchman_fist 1.2s 0.3s linear forwards;
          animation: punchman_fist 1.2s 0.3s linear forwards; }
      #fullpage .section1 .punchman .fist {
        position: absolute;
        left: calc(50% - 311px);
        top: 29px;
        -webkit-animation: punchman_fly 3s ease-in-out infinite;
        animation: punchman_fly 3s ease-in-out infinite;
        display: none; }
        #fullpage .section1 .punchman .fist img {
          -webkit-transform: scale(0);
          -ms-transform: scale(0);
          transform: scale(0);
          -webkit-transform-origin: left center;
          -ms-transform-origin: left center;
          transform-origin: left center;
          -webkit-animation: punchman_fist 2s 0.5s linear forwards;
          animation: punchman_fist 2s 0.5s linear forwards; }
    #fullpage .section1 .glass {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: hidden; }
      #fullpage .section1 .glass > div {
        position: absolute; }
        #fullpage .section1 .glass > div img {
          max-width: 100%; }
      #fullpage .section1 .glass__glass01 {
        width: 5vw;
        left: 16vw;
        top: calc(35px - 0.2vw);
        -webkit-animation: punchman_fly 5s ease-in-out infinite;
        animation: punchman_fly 5s ease-in-out infinite; }
        #fullpage .section1 .glass__glass01 img {
          -webkit-transform-origin: right bottom;
          -ms-transform-origin: right bottom;
          transform-origin: right bottom;
          -webkit-transform: translate(23vw, 10vw) scale(0);
          -ms-transform: translate(23vw, 10vw) scale(0);
          transform: translate(23vw, 10vw) scale(0);
          -webkit-animation: glass_01 0.2s 1s linear forwards;
          animation: glass_01 0.2s 1s linear forwards; }
      #fullpage .section1 .glass__glass02 {
        width: 14vw;
        left: 2vw;
        top: 13vw;
        -webkit-animation: punchman_fly 5s 1s ease-in-out infinite;
        animation: punchman_fly 5s 1s ease-in-out infinite; }
        #fullpage .section1 .glass__glass02 img {
          -webkit-transform-origin: right center;
          -ms-transform-origin: right center;
          transform-origin: right center;
          -webkit-transform: translate(29vw, 4vw) scale(0);
          -ms-transform: translate(29vw, 4vw) scale(0);
          transform: translate(29vw, 4vw) scale(0);
          -webkit-animation: glass_02 0.3s 1s linear forwards;
          animation: glass_02 0.3s 1s linear forwards; }
      #fullpage .section1 .glass__glass03 {
        width: 15.5vw;
        left: 1vw;
        bottom: -3vw;
        animation: punchman_fly 4.5s 1.2s ease-in-out infinite reverse; }
        #fullpage .section1 .glass__glass03 img {
          -webkit-transform-origin: right top;
          -ms-transform-origin: right top;
          transform-origin: right top;
          -webkit-transform: translate(27vw, -20vw) scale(0);
          -ms-transform: translate(27vw, -20vw) scale(0);
          transform: translate(27vw, -20vw) scale(0);
          -webkit-animation: glass_03 0.4s 1s linear forwards;
          animation: glass_03 0.4s 1s linear forwards; }
      #fullpage .section1 .glass__glass04 {
        width: 3vw;
        left: 30vw;
        bottom: -2vw;
        -webkit-animation: punchman_fly 5s ease-in-out infinite;
        animation: punchman_fly 5s ease-in-out infinite; }
        #fullpage .section1 .glass__glass04 img {
          -webkit-transform-origin: center top;
          -ms-transform-origin: center top;
          transform-origin: center top;
          -webkit-transform: translate(9vw, -22vw) scale(0);
          -ms-transform: translate(9vw, -22vw) scale(0);
          transform: translate(9vw, -22vw) scale(0);
          -webkit-animation: glass_04 0.2s 1s linear forwards;
          animation: glass_04 0.2s 1s linear forwards; }
      #fullpage .section1 .glass__glass05 {
        width: 7vw;
        right: 14vw;
        top: 0;
        animation: punchman_fly 5s 0.8s ease-in-out infinite reverse; }
        #fullpage .section1 .glass__glass05 img {
          -webkit-transform-origin: left bottom;
          -ms-transform-origin: left bottom;
          transform-origin: left bottom;
          -webkit-transform: translate(-26vw, 14vw) scale(0);
          -ms-transform: translate(-26vw, 14vw) scale(0);
          transform: translate(-26vw, 14vw) scale(0);
          -webkit-animation: glass_05 0.2s 1s linear forwards;
          animation: glass_05 0.2s 1s linear forwards; }
      #fullpage .section1 .glass__glass06 {
        width: 13vw;
        right: -3vw;
        top: 9vw;
        -webkit-animation: punchman_fly 4s ease-in-out infinite;
        animation: punchman_fly 4s ease-in-out infinite; }
        #fullpage .section1 .glass__glass06 img {
          -webkit-transform-origin: center left;
          -ms-transform-origin: center left;
          transform-origin: center left;
          -webkit-transform: translate(-33vw, 12vw) scale(0);
          -ms-transform: translate(-33vw, 12vw) scale(0);
          transform: translate(-33vw, 12vw) scale(0);
          -webkit-animation: glass_06 0.4s 1s linear forwards;
          animation: glass_06 0.4s 1s linear forwards; }
      #fullpage .section1 .glass__glass07 {
        width: 8vw;
        right: -2vw;
        bottom: 4vw;
        animation: punchman_fly 4.2s 0.5s ease-in-out infinite reverse; }
        #fullpage .section1 .glass__glass07 img {
          -webkit-transform-origin: center left;
          -ms-transform-origin: center left;
          transform-origin: center left;
          -webkit-transform: translate(-33vw, -14vw) scale(0);
          -ms-transform: translate(-33vw, -14vw) scale(0);
          transform: translate(-33vw, -14vw) scale(0);
          -webkit-animation: glass_07 0.4s 1s linear forwards;
          animation: glass_07 0.4s 1s linear forwards; }
      #fullpage .section1 .glass__glass08 {
        width: 11vw;
        right: 19vw;
        bottom: 1.5vw;
        -webkit-animation: punchman_fly 4.3s 1s ease-in-out infinite;
        animation: punchman_fly 4.3s 1s ease-in-out infinite; }
        #fullpage .section1 .glass__glass08 img {
          -webkit-transform-origin: left left;
          -ms-transform-origin: left left;
          transform-origin: left left;
          -webkit-transform: translate(-21vw, -18vw) scale(0);
          -ms-transform: translate(-21vw, -18vw) scale(0);
          transform: translate(-21vw, -18vw) scale(0);
          -webkit-animation: glass_08 0.2s 1s linear forwards;
          animation: glass_08 0.2s 1s linear forwards; }
  #fullpage .section2 {
    background-color: #5151bc;
    background-image: url(../img/s3_bg_comingsoon.jpg);
    background-position: right center; }
    #fullpage .section2 .video {
      display: none; }
      #fullpage .section2 .video .videoWrap {
        border: 1px solid #a24ec8; }
    #fullpage .section2 .chaClose {
      font-size: 0;
      position: absolute;
      left: calc(50% - 874px);
      bottom: 0;
      z-index: 2; }
    #fullpage .section2 .chaShadow {
      font-size: 0;
      position: absolute;
      left: calc(50% - 887px);
      bottom: 0;
      z-index: 1; }
    #fullpage .section2 .chaClose, #fullpage .section2 .chaShadow {
      opacity: 0;
      -webkit-transform: translateX(-200px);
      -ms-transform: translateX(-200px);
      transform: translateX(-200px); }
      #fullpage .section2 .chaClose.newhero_ani, #fullpage .section2 .chaShadow.newhero_ani {
        -webkit-animation: newHero_cha 0.8s ease-in forwards;
        animation: newHero_cha 0.8s ease-in forwards; }
    #fullpage .section2 .slogan {
      position: absolute;
      right: calc(50% - 554px);
      top: 40%;
      z-index: 3;
      opacity: 0;
      -webkit-transform: translateX(200px);
      -ms-transform: translateX(200px);
      transform: translateX(200px); }
      #fullpage .section2 .slogan.newhero_ani {
        -webkit-animation: newHero_slogan 0.5s 0.2s ease-in forwards;
        animation: newHero_slogan 0.5s 0.2s ease-in forwards; }
      #fullpage .section2 .slogan_02 {
        margin-top: 5px; }
      #fullpage .section2 .slogan .playBtn {
        width: 86px;
        height: 86px;
        background-image: url(../img/s3_play_frame.png);
        position: absolute;
        right: 31px;
        bottom: -111px;
        text-align: center;
        cursor: pointer; }
        #fullpage .section2 .slogan .playBtn::after {
          content: "";
          width: 45px;
          height: 50px;
          background-image: url(../img/s3_play_deco.png);
          position: absolute;
          right: -13px;
          top: -28px; }
        #fullpage .section2 .slogan .playBtn img {
          margin-top: 50%;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
          margin-left: 4px; }
    #fullpage .section2 .flower {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 2; }
      #fullpage .section2 .flower > div {
        position: absolute; }
      #fullpage .section2 .flower__flower01 {
        right: -130px;
        top: 0; }
      #fullpage .section2 .flower__flower02 {
        left: calc(50% - 160px);
        bottom: -295px; }
      #fullpage .section2 .flower__flower03 {
        left: calc(50% - 902px);
        bottom: 100px; }
      #fullpage .section2 .flower__flower04 {
        left: -200px;
        top: 170px; }
  #fullpage .section3 {
    background-color: #000;
    background-image: url(../img/s1_bg.jpg); }
    #fullpage .section3 .video {
      display: none; }
    #fullpage .section3 .thanatos {
      position: absolute;
      right: calc(50% - 650px);
      top: calc(50% + 35px);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
      #fullpage .section3 .thanatos img {
        max-height: 94vh;
        opacity: 0;
        -webkit-animation: thanatos 0.3s ease-in forwards;
        animation: thanatos 0.3s ease-in forwards;
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s; }
      #fullpage .section3 .thanatos::after {
        content: "";
        position: absolute;
        background-image: url(../img/s1_thanatos_name.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 358px;
        height: 53px;
        left: -246px;
        bottom: 195px;
        opacity: 0;
        -webkit-animation: thanatos 0.3s ease-in forwards;
        animation: thanatos 0.3s ease-in forwards;
        -webkit-animation-delay: 0.7s;
        animation-delay: 0.7s; }
    #fullpage .section3 .heroLogo {
      position: absolute;
      left: calc(50% - 550px);
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
      #fullpage .section3 .heroLogo > img {
        max-height: 50vh;
        opacity: 0;
        -webkit-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
        transform: translateX(-200px);
        -webkit-animation: heroLogo 0.8s linear forwards;
        animation: heroLogo 0.8s linear forwards; }
      #fullpage .section3 .heroLogo .playBtn {
        width: 87px;
        height: 93px;
        background-image: url(../img/s1_play_frame.png);
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        left: 18px;
        top: 332px;
        text-align: center;
        cursor: pointer; }
        #fullpage .section3 .heroLogo .playBtn:hover {
          -webkit-animation: mashinVideoBtn 0.5s ease-in-out infinite;
          animation: mashinVideoBtn 0.5s ease-in-out infinite; }
        #fullpage .section3 .heroLogo .playBtn img {
          margin-top: 32px;
          margin-left: 10px; }
        #fullpage .section3 .heroLogo .playBtn::after {
          content: "";
          position: absolute;
          width: 58px;
          height: 58px;
          border: 1px solid rgba(255, 255, 255, 0.3);
          -webkit-transform: rotate(60deg) scale(1);
          -ms-transform: rotate(60deg) scale(1);
          transform: rotate(60deg) scale(1);
          left: 13px;
          top: 16px;
          opacity: 0.5;
          -webkit-animation: thanatos_btn 5s ease-in-out infinite;
          animation: thanatos_btn 5s ease-in-out infinite; }
      #fullpage .section3 .heroLogo .date {
        position: absolute;
        right: 21px;
        bottom: 37px;
        opacity: 0;
        -webkit-transform: translateX(200px);
        -ms-transform: translateX(200px);
        transform: translateX(200px);
        -webkit-animation: heroLogo_date 0.8s linear forwards;
        animation: heroLogo_date 0.8s linear forwards; }
  #fullpage .section4 {
    background-color: #3a9eec;
    background-blend-mode: multiply;
    background: -webkit-gradient(linear, left top, right top, color-stop(70%, transparent), to(#3a9eec)), url(../img/s2_bg.jpg);
    background: -webkit-linear-gradient(left, transparent 70%, #3a9eec), url(../img/s2_bg.jpg);
    background: -o-linear-gradient(left, transparent 70%, #3a9eec), url(../img/s2_bg.jpg);
    background: linear-gradient(to right, transparent 70%, #3a9eec), url(../img/s2_bg.jpg);
    background-position: center center;
    background-size: cover; }
    #fullpage .section4 .video {
      display: none; }
      #fullpage .section4 .video .videoWrap {
        border: 1px solid #3a9eec; }
    #fullpage .section4 .cha > div {
      position: absolute; }
      #fullpage .section4 .cha > div img {
        max-width: 100%; }
    #fullpage .section4 .cha_01, #fullpage .section4 .cha_02, #fullpage .section4 .cha_03, #fullpage .section4 .cha_04, #fullpage .section4 .cha_05, #fullpage .section4 .cha_06 {
      opacity: 0; }
    #fullpage .section4 .cha_01 {
      left: calc(50% - 136px);
      top: 70px;
      z-index: 4;
      -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
      transform-origin: center center; }
      #fullpage .section4 .cha_01.mashin_ani {
        -webkit-animation: mashin 0.2s ease-in-out forwards;
        animation: mashin 0.2s ease-in-out forwards; }
    #fullpage .section4 .cha_02 {
      right: calc(50% - 378px);
      top: 270px;
      z-index: 3;
      -webkit-transform: translateX(100px);
      -ms-transform: translateX(100px);
      transform: translateX(100px);
      -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
      transform-origin: left center; }
      #fullpage .section4 .cha_02.mashin_ani {
        -webkit-animation: mashin_fadein_right 0.2s ease-in-out forwards;
        animation: mashin_fadein_right 0.2s ease-in-out forwards;
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s; }
    #fullpage .section4 .cha_03 {
      left: calc(50% - 513px);
      top: 292px;
      z-index: 2;
      -webkit-transform-origin: right center;
      -ms-transform-origin: right center;
      transform-origin: right center; }
      #fullpage .section4 .cha_03.mashin_ani {
        -webkit-animation: mashin_fadein_left 0.2s ease-in-out forwards;
        animation: mashin_fadein_left 0.2s ease-in-out forwards;
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s; }
    #fullpage .section4 .cha_04 {
      right: calc(50% - 522px);
      top: 263px;
      z-index: 2;
      -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
      transform-origin: left center; }
      #fullpage .section4 .cha_04.mashin_ani {
        -webkit-animation: mashin_fadein_right 0.2s ease-in-out forwards;
        animation: mashin_fadein_right 0.2s ease-in-out forwards;
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s; }
    #fullpage .section4 .cha_05 {
      right: calc(50% - 567px);
      top: 20px;
      z-index: 1;
      -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
      transform-origin: left center; }
      #fullpage .section4 .cha_05.mashin_ani {
        -webkit-animation: mashin_fadein_right 0.2s ease-in-out forwards;
        animation: mashin_fadein_right 0.2s ease-in-out forwards;
        -webkit-animation-delay: 1s;
        animation-delay: 1s; }
    #fullpage .section4 .cha_06 {
      left: calc(50% - 682px);
      top: 43px;
      -webkit-transform-origin: right center;
      -ms-transform-origin: right center;
      transform-origin: right center; }
      #fullpage .section4 .cha_06.mashin_ani {
        -webkit-animation: mashin_fadein_left 0.2s ease-in-out forwards;
        animation: mashin_fadein_left 0.2s ease-in-out forwards;
        -webkit-animation-delay: 0.8s;
        animation-delay: 0.8s; }
    #fullpage .section4 .cha_07 {
      right: calc(50% - 775px);
      top: 80px; }
      #fullpage .section4 .cha_07.mashin_ani {
        -webkit-animation: mashin_fly_right 0.5s ease-in-out forwards;
        animation: mashin_fly_right 0.5s ease-in-out forwards; }
    #fullpage .section4 .cha_08 {
      left: calc(50% - 808px);
      bottom: 100px; }
      #fullpage .section4 .cha_08.mashin_ani {
        -webkit-animation: mashin_fly_left 0.5s ease-in-out forwards;
        animation: mashin_fly_left 0.5s ease-in-out forwards; }
    #fullpage .section4 .mashinlogo {
      position: absolute;
      left: 50%;
      bottom: 117px;
      z-index: 5;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%); }
      #fullpage .section4 .mashinlogo .playBtn {
        width: 137px;
        height: 109px;
        background-image: url(../img/s2_play_frame.png);
        position: absolute;
        left: 75px;
        top: -53px;
        text-align: center;
        cursor: pointer;
        -webkit-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s; }
        #fullpage .section4 .mashinlogo .playBtn:hover {
          -webkit-animation: mashinVideoBtn 0.5s ease-in-out infinite;
          animation: mashinVideoBtn 0.5s ease-in-out infinite; }
        #fullpage .section4 .mashinlogo .playBtn img {
          margin-top: 37px;
          margin-left: 10px; }
    #fullpage .section4 .mashinEventBtn {
      position: absolute;
      left: 50%;
      bottom: 45px;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      cursor: pointer;
      z-index: 5;
      -webkit-transition: -webkit-transform 0.1s ease-in;
      transition: -webkit-transform 0.1s ease-in;
      -o-transition: transform 0.1s ease-in;
      transition: transform 0.1s ease-in;
      transition: transform 0.1s ease-in, -webkit-transform 0.1s ease-in; }
      #fullpage .section4 .mashinEventBtn a {
        display: block;
        width: 100%;
        height: 100%; }
      #fullpage .section4 .mashinEventBtn:hover {
        -webkit-transform: translateX(-50%) scale(0.95);
        -ms-transform: translateX(-50%) scale(0.95);
        transform: translateX(-50%) scale(0.95); }
      #fullpage .section4 .mashinEventBtn::after {
        content: "";
        position: absolute;
        width: 261px;
        height: 72px;
        background-image: url(../img/s2_btn_frame.png);
        background-size: contain;
        background-repeat: no-repeat;
        right: -10px;
        bottom: 15px;
        pointer-events: none; }

.nav {
  position: fixed;
  top: 50%;
  right: 20px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  padding: 30px 0; }
  .nav::after {
    content: '';
    display: block;
    position: absolute;
    right: 9px;
    top: 0;
    width: 1px;
    height: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(rgba(255, 255, 255, 0.5)), to(transparent));
    background: -webkit-linear-gradient(transparent, rgba(255, 255, 255, 0.5), transparent);
    background: -o-linear-gradient(transparent, rgba(255, 255, 255, 0.5), transparent);
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.5), transparent); }
  .nav.hide {
    display: none; }
  .nav li:not(:last-child) {
    margin-bottom: 20px; }
  .nav li:nth-child(1):hover a {
    background: -webkit-gradient(linear, left top, right top, from(transparent), to(#1c1c1c));
    background: -webkit-linear-gradient(left, transparent, #1c1c1c);
    background: -o-linear-gradient(left, transparent, #1c1c1c);
    background: linear-gradient(to right, transparent, #1c1c1c); }
  .nav li:nth-child(2):hover a {
    background: -webkit-gradient(linear, left top, right top, from(transparent), to(#6b32b3));
    background: -webkit-linear-gradient(left, transparent, #6b32b3);
    background: -o-linear-gradient(left, transparent, #6b32b3);
    background: linear-gradient(to right, transparent, #6b32b3); }
  .nav li:nth-child(3):hover a {
    background: -webkit-gradient(linear, left top, right top, from(transparent), to(#d94747));
    background: -webkit-linear-gradient(left, transparent, #d94747);
    background: -o-linear-gradient(left, transparent, #d94747);
    background: linear-gradient(to right, transparent, #d94747); }
  .nav li:nth-child(4):hover a {
    background: -webkit-gradient(linear, left top, right top, from(transparent), to(#2655aa));
    background: -webkit-linear-gradient(left, transparent, #2655aa);
    background: -o-linear-gradient(left, transparent, #2655aa);
    background: linear-gradient(to right, transparent, #2655aa); }
  .nav li a {
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    font-size: 0;
    width: 100%;
    height: 100%;
    padding: 5px 5px 5px 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end; }
  .nav li .dot {
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 100%;
    margin-left: 10px; }

@media only screen and (max-width: 1366px) {
  #fullpage .section1 img {
    max-width: 100%; }
  #fullpage .section1 .slogan {
    width: 46vw;
    bottom: 10vw; }
    #fullpage .section1 .slogan .playBtn {
      width: 13%;
      left: 7%;
      bottom: -7%; }
  #fullpage .section1 .punchBtn {
    width: 19vw;
    bottom: 3vw; }
  #fullpage .section1 .punchman .back {
    width: 54vw;
    left: 4vw;
    top: 0; }
  #fullpage .section1 .punchman .man {
    width: 38vw;
    left: 8vw;
    top: 6vw; }
  #fullpage .section2 .chaClose, #fullpage .section2 .chaShadow {
    width: 92vw;
    bottom: initial;
    top: 3vw; }
    #fullpage .section2 .chaClose img, #fullpage .section2 .chaShadow img {
      max-width: 100%; }
  #fullpage .section2 .chaClose {
    left: -7vw; }
  #fullpage .section2 .chaShadow {
    left: -8vw; }
  #fullpage .section2 .slogan {
    right: 18vw; }
  #fullpage .section3 .thanatos {
    width: 46vw;
    right: 8vw; }
    #fullpage .section3 .thanatos img {
      max-width: 100%; }
    #fullpage .section3 .thanatos::after {
      width: 22vw;
      height: 3.5vw;
      left: initial;
      right: 35.5vw;
      bottom: 11vw; }
  #fullpage .section3 .heroLogo {
    width: 30vw;
    left: 13vw; }
    #fullpage .section3 .heroLogo img {
      max-width: 100%; }
    #fullpage .section3 .heroLogo .playBtn {
      width: 6vw;
      height: 6.5vw;
      left: 0;
      top: 20vw; }
      #fullpage .section3 .heroLogo .playBtn img {
        width: 28%;
        margin-top: 34%;
        margin-left: 13%; }
      #fullpage .section3 .heroLogo .playBtn::after {
        width: 4vw;
        height: 4vw; }
    #fullpage .section3 .heroLogo .date {
      width: 18vw;
      right: initial;
      left: 10.5vw; }
      #fullpage .section3 .heroLogo .date img {
        max-width: 100%; }
  #fullpage .section4 .cha {
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    transform-origin: center top; }
    #fullpage .section4 .cha_01 {
      width: 17vw;
      left: 41vw;
      top: 3vw; }
    #fullpage .section4 .cha_02 {
      width: 18vw;
      right: 22vw;
      top: 20vw; }
    #fullpage .section4 .cha_03 {
      width: 34vw;
      left: 14vw;
      top: 18vw; }
    #fullpage .section4 .cha_04 {
      width: 15vw;
      right: 13vw;
      top: 18vw; }
    #fullpage .section4 .cha_05 {
      width: 44vw;
      right: 9vw;
      top: 2vw; }
    #fullpage .section4 .cha_06 {
      width: 49vw;
      left: 1vw;
      top: 2vw; }
    #fullpage .section4 .cha_07 {
      width: 13vw;
      right: 4vw;
      top: 5vw; }
    #fullpage .section4 .cha_08 {
      width: 12vw;
      left: 5vw;
      bottom: 4vw; }
  #fullpage .section4 .mashinlogo {
    bottom: 7vw; }
    #fullpage .section4 .mashinlogo > img {
      width: 27vw; }
    #fullpage .section4 .mashinlogo .playBtn {
      -webkit-transform: scale(0.7);
      -ms-transform: scale(0.7);
      transform: scale(0.7);
      -webkit-transform-origin: center left;
      -ms-transform-origin: center left;
      transform-origin: center left; }
  #fullpage .section4 .mashinEventBtn {
    width: 15vw;
    bottom: 2.5vw; }
    #fullpage .section4 .mashinEventBtn img {
      max-width: 100%; }
    #fullpage .section4 .mashinEventBtn::after {
      width: 15vw;
      height: 4.1vw; } }

@media only screen and (max-width: 1280px) {
  #fullpage .section1 .punchman .man {
    width: 40vw;
    left: 5vw; } }

@media only screen and (max-width: 1024px) {
  #fullpage .section .video .videoWrap video {
    width: 500px; }
  #fullpage .section1 {
    background-image: url(../img/s4_bg_1024.jpg); }
    #fullpage .section1 .slogan {
      width: 56vw; }
    #fullpage .section1 .punchman .back {
      width: 64vw;
      top: 1vw; }
    #fullpage .section1 .punchman .man {
      width: 53vw;
      left: 5vw; }
  #fullpage .section3 .thanatos {
    width: 58vw;
    right: 5vw; }
  #fullpage .section3 .heroLogo {
    width: 38vw;
    left: 5vw;
    margin-top: 2vw; }
    #fullpage .section3 .heroLogo .playBtn {
      width: 8vw;
      height: 8.6vw;
      top: -1vw;
      left: 30vw; }
      #fullpage .section3 .heroLogo .playBtn::after {
        width: 5vw;
        height: 5vw; }
    #fullpage .section3 .heroLogo .date {
      width: 23vw;
      left: 14vw;
      bottom: 3vw; }
  #fullpage .section4 .cha_01 {
    width: 24vw;
    left: 37.5vw;
    top: 2vw; }
  #fullpage .section4 .cha_02 {
    width: 23vw;
    right: 12vw;
    top: 23vw; }
  #fullpage .section4 .cha_03 {
    width: 44vw;
    left: 5vw;
    top: 24vw; }
  #fullpage .section4 .cha_04 {
    width: 16vw;
    right: 29vw; }
  #fullpage .section4 .cha_05 {
    width: 40vw;
    right: 12vw;
    top: 3vw; }
  #fullpage .section4 .cha_06 {
    width: 46vw;
    left: 1vw;
    top: 5vw; }
  #fullpage .section4 .cha_07 {
    width: 12vw;
    right: 11vw;
    top: 17vw; }
  #fullpage .section4 .cha_08 {
    width: 12vw;
    left: 2vw;
    bottom: 9vw; }
  #fullpage .section4 .mashinlogo {
    width: 38vw;
    bottom: 8vw; }
    #fullpage .section4 .mashinlogo > img {
      width: 100%; }
    #fullpage .section4 .mashinlogo .playBtn {
      left: 5vw;
      top: -5.5vw; }
  #fullpage .section4 .mashinEventBtn {
    bottom: 2vw;
    width: 20vw; }
    #fullpage .section4 .mashinEventBtn::after {
      width: 20vw;
      height: 5.5vw;
      right: -1vw;
      bottom: 1.5vw; }
    #fullpage .section4 .mashinEventBtn img {
      width: 100%; }
  #fullpage .section2 .chaClose, #fullpage .section2 .chaShadow {
    top: initial;
    bottom: 0;
    height: 95vh; }
    #fullpage .section2 .chaClose img, #fullpage .section2 .chaShadow img {
      max-width: initial;
      height: 100%;
      width: auto; }
  #fullpage .section2 .chaClose {
    left: -16vw; }
  #fullpage .section2 .chaShadow {
    left: -15vw; } }

@media only screen and (max-width: 820px) {
  .nav {
    top: 23vw; }
  #fullpage .section .video .videoWrap video {
    width: 94vw; }
  #fullpage .section1 {
    background-image: url(../img/s4_bg_m.jpg);
    background-position: center center; }
    #fullpage .section1::before {
      top: 0; }
    #fullpage .section1 .punchman {
      position: absolute;
      left: 0;
      top: 0; }
      #fullpage .section1 .punchman .back {
        width: 92vw;
        top: 2vw; }
      #fullpage .section1 .punchman .man {
        width: 75vw;
        left: 9vw;
        top: 10%; }
        #fullpage .section1 .punchman .man::after {
          width: 59%;
          height: 51%;
          top: 22%;
          right: -8%; }
    #fullpage .section1 .slogan {
      width: 75vw;
      bottom: 17%; }
    #fullpage .section1 .punchBtn {
      width: 38vw;
      bottom: 7%; }
  #fullpage .section2 {
    background-image: url(../img/s3_bg_m.jpg); }
    #fullpage .section2 .chaClose, #fullpage .section2 .chaShadow {
      height: 85vh;
      top: 33vw; }
    #fullpage .section2 .chaClose {
      left: -9vw; }
    #fullpage .section2 .chaShadow {
      left: -11vw; }
    #fullpage .section2 .slogan {
      right: initial;
      top: 12vw;
      left: 11vw; }
      #fullpage .section2 .slogan .playBtn {
        left: 10px;
        bottom: -123px; }
  #fullpage .section3 {
    background-image: url(../img/s1_bg_m.jpg);
    background-size: cover; }
    #fullpage .section3 .thanatos {
      width: 139vw;
      right: -38vw;
      top: 101vw; }
      #fullpage .section3 .thanatos img {
        max-width: none;
        max-height: none;
        width: 100%; }
    #fullpage .section3 .heroLogo {
      width: 47vw;
      left: 5vw;
      top: 11vw;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      margin-top: 0; }
      #fullpage .section3 .heroLogo .date {
        width: 30vw;
        bottom: 5vw;
        left: 16vw; }
      #fullpage .section3 .heroLogo .playBtn {
        width: 16vw;
        height: 16.6vw;
        top: 0;
        left: 41vw; }
        #fullpage .section3 .heroLogo .playBtn::after {
          width: 10vw;
          height: 10vw;
          left: 2.5vw;
          top: 2.5vw; }
  #fullpage .section4 {
    background: -webkit-gradient(linear, left top, right top, color-stop(70%, transparent), to(#3a9eec)), url(../img/s2_bg_m.jpg);
    background: -webkit-linear-gradient(left, transparent 70%, #3a9eec), url(../img/s2_bg_m.jpg);
    background: -o-linear-gradient(left, transparent 70%, #3a9eec), url(../img/s2_bg_m.jpg);
    background: linear-gradient(to right, transparent 70%, #3a9eec), url(../img/s2_bg_m.jpg);
    background-size: cover; }
    #fullpage .section4 .cha_01 {
      width: 33vw;
      left: 33.5vw;
      top: 24vw; }
    #fullpage .section4 .cha_02 {
      width: 33vw;
      right: 7vw;
      top: 50vw; }
    #fullpage .section4 .cha_03 {
      width: 60vw;
      left: -9vw;
      top: 51vw; }
    #fullpage .section4 .cha_04 {
      width: 27vw;
      right: -5vw;
      top: 38vw; }
    #fullpage .section4 .cha_05 {
      width: 59vw;
      right: -3vw;
      top: 24vw; }
    #fullpage .section4 .cha_06 {
      width: 83vw;
      left: -23vw;
      top: 7vw; }
    #fullpage .section4 .cha_07 {
      width: 20vw;
      right: 18vw;
      top: 10vw; }
    #fullpage .section4 .cha_08 {
      width: 18vw;
      left: 6vw;
      bottom: initial;
      top: 40vw; }
    #fullpage .section4 .mashinlogo {
      width: 60vw;
      bottom: 19vw; }
      #fullpage .section4 .mashinlogo .playBtn {
        left: 9vw;
        top: -7.5vw;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1); }
    #fullpage .section4 .mashinEventBtn {
      bottom: 10vw;
      width: 32vw; }
      #fullpage .section4 .mashinEventBtn::after {
        width: 32vw;
        height: 9.5vw; } }

@media only screen and (max-width: 768px) {
  .romMenu {
    top: 10px; } }

@media only screen and (max-width: 580px) {
  .nav {
    display: none; }
  .romMenu img {
    height: 8vw;
    max-height: 38px; }
  #fullpage .section1 {
    background-image: url(../img/s4_bg_s_poring02.png), url(../img/s4_bg_s_poring01.png), url(../img/s4_bg_s.jpg);
    background-position: right bottom, left bottom ,center top;
    background-size: 34%, 54%, cover; }
    #fullpage .section1 .slogan {
      width: 88vw;
      bottom: 32vw; }
    #fullpage .section1 .punchBtn {
      width: 46vw;
      bottom: 15vw; }
    #fullpage .section1 .punchman .back {
      width: 87vw;
      top: 9vw;
      left: 8vw; }
    #fullpage .section1 .punchman .man {
      width: 88vw;
      left: 4vw;
      top: 20vw; }
  #fullpage .section2 .slogan {
    top: 18vw; }
    #fullpage .section2 .slogan_01 {
      width: 33vw; }
      #fullpage .section2 .slogan_01 img {
        width: 100%; }
    #fullpage .section2 .slogan_02 {
      width: 60vw;
      margin-top: 0; }
      #fullpage .section2 .slogan_02 img {
        width: 100%; }
    #fullpage .section2 .slogan .playBtn {
      background-size: contain;
      background-repeat: no-repeat;
      bottom: -19vw;
      left: 0;
      width: 17vw;
      height: 17vw; }
      #fullpage .section2 .slogan .playBtn::after {
        background-repeat: no-repeat;
        background-size: contain;
        width: 10vw;
        height: 11vw; }
  #fullpage .section2 .flower > div img {
    max-width: 100%; }
  #fullpage .section2 .flower__flower01 {
    width: 54vw;
    right: -24vw; }
  #fullpage .section2 .flower__flower02 {
    width: 82vw;
    bottom: -68vw; }
  #fullpage .section2 .flower__flower03 {
    display: none; }
  #fullpage .section2 .flower__flower04 {
    width: 60vw;
    top: 55vw;
    left: -39vw; }
  #fullpage .section3 .thanatos {
    width: 168vw;
    top: 140vw; }
  #fullpage .section3 .heroLogo {
    width: 57vw;
    top: 15vw; }
    #fullpage .section3 .heroLogo .date {
      width: 46vw;
      left: 5vw;
      bottom: 4vw; }
    #fullpage .section3 .heroLogo .playBtn {
      width: 20vw;
      height: 21.6vw;
      left: 52vw;
      top: 2vw; }
      #fullpage .section3 .heroLogo .playBtn::after {
        width: 12.5vw;
        height: 12.5vw;
        left: 3.5vw;
        top: 3.5vw; }
  #fullpage .section4 .cha_01 {
    width: 52vw;
    left: 24.5vw;
    top: 14vh; }
  #fullpage .section4 .cha_02 {
    width: 46vw;
    right: -10vw;
    top: 28vh; }
  #fullpage .section4 .cha_03 {
    width: 77vw;
    left: -18vw;
    top: 30vh; }
  #fullpage .section4 .cha_05 {
    top: 13vh; }
  #fullpage .section4 .cha_06 {
    top: 6vh; }
  #fullpage .section4 .cha_07 {
    right: 11vw;
    top: 8vh; }
  #fullpage .section4 .mashinlogo {
    width: 70vw;
    bottom: 18vw; }
    #fullpage .section4 .mashinlogo .playBtn {
      top: -10vw;
      width: 21vw;
      height: 17vw;
      background-size: contain;
      background-repeat: no-repeat; }
      #fullpage .section4 .mashinlogo .playBtn img {
        margin-top: 24%;
        margin-left: 8%;
        width: 28%; }
  #fullpage .section4 .mashinEventBtn {
    width: 46vw;
    bottom: 5vw; }
    #fullpage .section4 .mashinEventBtn::after {
      width: 46vw;
      height: 14.5vw;
      right: -2vw;
      bottom: 2vw; } }