@charset "UTF-8";
/*
Copyright(C)2010 MOTOYA CO.,LTD.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
@import url("https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap");
/*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
/*
 * Corrects block display not defined in IE6/7/8/9 & FF3
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

/*
 * Corrects inline-block display not defined in IE6/7/8/9 & FF3
 */
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

/*
 * Prevents modern browsers from displaying 'audio' without controls
 * Remove excess height in iOS5 devices
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/*
 * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
 * Known issue: no IE6 support
 */
[hidden] {
  /*display: none;*/
}

/* =============================================================================
   Base
   ========================================================================== */
/*
 * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */
html {
  font-size: 100%;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
}

/*
 * Addresses font-family inconsistency between 'textarea' and other form elements.
 */
html,
button,
input,
select,
textarea {
  font-family: sans-serif;
}

/*
 * Addresses margins handled incorrectly in IE6/7
 */
body {
  margin: 0;
}

/* =============================================================================
   Links
   ========================================================================== */
/*
 * Addresses outline displayed oddly in Chrome
 */
a:focus {
  outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers
 * people.opera.com/patrickl/experiments/keyboard/test
 */
a:hover,
a:active {
  outline: 0;
}

/* =============================================================================
   Typography
   ========================================================================== */
/*
 * Addresses font sizes and margins set differently in IE6/7
 * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}

h3 {
  font-size: 1.17em;
  margin: 1em 0;
}

h4 {
  font-size: 1em;
  margin: 1.33em 0;
}

h5 {
  font-size: 0.83em;
  margin: 1.67em 0;
}

h6 {
  font-size: 0.75em;
  margin: 2.33em 0;
}

/*
 * Addresses styling not present in IE7/8/9, S5, Chrome
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/*
 * Addresses style set to 'bolder' in FF3+, S4/5, Chrome
*/
b,
strong {
  font-weight: bold;
}

blockquote {
  margin: 1em 40px;
}

/*
 * Addresses styling not present in S5, Chrome
 */
dfn {
  font-style: italic;
}

/*
 * Addresses styling not present in IE6/7/8/9
 */
mark {
  background: #ff0;
  color: #000;
}

/*
 * Addresses margins set differently in IE6/7
 */
p,
pre {
  margin: 1em 0;
}

/*
 * Corrects font family set oddly in IE6, S4/5, Chrome
 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */
pre,
code,
kbd,
samp {
  font-family: monospace, serif;
  _font-family: 'courier new', monospace;
  font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers
 */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/*
 * 1. Addresses CSS quotes not supported in IE6/7
 * 2. Addresses quote property not supported in S4
 */
/* 1 */
q {
  quotes: none;
}

/* 2 */
q:before,
q:after {
  content: '';
  content: none;
}

small {
  font-size: 75%;
}

/*
 * Prevents sub and sup affecting line-height in all browsers
 * gist.github.com/413930
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* =============================================================================
   Lists
   ========================================================================== */
/*
 * Addresses margins set differently in IE6/7
 */
dl,
menu,
ol,
ul {
  margin: 1em 0;
}

dd {
  margin: 0 0 0 40px;
}

/*
 * Addresses paddings set differently in IE6/7
 */
menu,
ol,
ul {
  padding: 0 0 0 40px;
}

/*
 * Corrects list images handled incorrectly in IE7
 */
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}

/* =============================================================================
   Embedded content
   ========================================================================== */
/*
 * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
 * 2. Improves image quality when scaled in IE7
 *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */
img {
  border: 0;
  /* 1 */
  -ms-interpolation-mode: bicubic;
  /* 2 */
}

/*
 * Corrects overflow displayed oddly in IE9
 */
svg:not(:root) {
  overflow: hidden;
}

/* =============================================================================
   Figures
   ========================================================================== */
/*
 * Addresses margin not present in IE6/7/8/9, S5, O11
 */
figure {
  margin: 0;
}

/* =============================================================================
   Forms
   ========================================================================== */
/*
 * Corrects margin displayed oddly in IE6/7
 */
form {
  margin: 0;
}

/*
 * Define consistent border, margin, and padding
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE6/7/8/9
 * 2. Corrects text not wrapping in FF3
 * 3. Corrects alignment displayed oddly in IE6/7
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  white-space: normal;
  /* 2 */
  *margin-left: -7px;
  /* 3 */
}

/*
 * 1. Corrects font size not being inherited in all browsers
 * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
 * 3. Improves appearance and consistency in all browsers
 */
button,
input,
select,
textarea {
  font-size: 100%;
  /* 1 */
  margin: 0;
  /* 2 */
  vertical-align: baseline;
  /* 3 */
  *vertical-align: middle;
  /* 3 */
}

/*
 * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
 */
button,
input {
  line-height: normal;
  /* 1 */
}

/*
 * 1. Improves usability and consistency of cursor style between image-type 'input' and others
 * 2. Corrects inability to style clickable 'input' types in iOS
 * 3. Removes inner spacing in IE7 without affecting normal text inputs
 *    Known issue: inner spacing remains in IE6
 */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  /* 1 */
  -webkit-appearance: button;
  /* 2 */
  *overflow: visible;
  /* 3 */
}

/*
 * Re-set default cursor for disabled elements
 */
button[disabled],
input[disabled] {
  cursor: default;
}

/*
 * 1. Addresses box sizing set to content-box in IE8/9
 * 2. Removes excess padding in IE8/9
 * 3. Removes excess padding in IE7
      Known issue: excess padding remains in IE6
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
  *height: 13px;
  /* 3 */
  *width: 13px;
  /* 3 */
}

/*
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in S5, Chrome on OS X
 */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/*
 * Removes inner padding and border in FF3+
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9
 * 2. Improves readability and alignment in all browsers
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */
}

/* =============================================================================
   Tables
   ========================================================================== */
/*
 * Remove most spacing between table cells
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

body, ul, ol, li, dl, dt, dd,
table, tr, th, td,
h1, h2, h3, h4, h5, h6, div, p,
main, article, section, aside, nav,
form, input, select, textarea {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  color: #333;
  font-family: "游ゴシック Medium", "Yu Gothic Medium","游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
  font-size: 14px;
  background: #fff;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}

div, p, ul, ol, li, dl, dt, dd, tr, th, td {
  word-break: break-all;
  line-height: 1.3;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}

ul, ol, li {
  list-style: none;
}

img {
  border: none;
  vertical-align: bottom;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}
img.dot {
  image-rendering: pixelated;
  image-rendering: -webkit-crisp-edges;
  image-rendering: -moz-crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

.avatar img {
  image-rendering: pixelated;
  image-rendering: -webkit-crisp-edges;
  image-rendering: -moz-crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

table {
  width: 100%;
}

input,
select {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  outline: none !important;
}

select::-ms-expand {
  display: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

textarea {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
  color: #4c2000;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.2;
  outline: none !important;
}

label {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

svg {
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.show {
  display: block;
}

.hide {
  display: none;
}

/* link */
a,
a:visited,
a:hover,
a:active {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
  color: #333;
  outline: none !important;
}

a:hover {
  text-decoration: none;
}

/* btn */
[class^="btn-"] {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
}
[class^="btn-"] a {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
[class^="btn-"] a span {
  display: none;
}

/* placeholder */
:placeholder-shown {
  color: #a8a8a8;
}

::-webkit-input-placeholder {
  color: #a8a8a8;
}

:-moz-placeholder {
  color: #a8a8a8;
}

::-moz-placeholder {
  color: #a8a8a8;
}

:-ms-input-placeholder {
  color: #a8a8a8 !important;
}

/**********************************************************************************************************************
***********************************************************************************************************************
***********************************************************************************************************************
												750px以上の場合に適用
***********************************************************************************************************************
***********************************************************************************************************************
**********************************************************************************************************************/
@media (min-width: 750px) {
  body {
    overflow-x: auto;
  }

  /* btn */
  [class^="btn-"] a:hover {
    background-position-y: 100% !important;
  }
}
/* vendor-prefix */
body {
  background: #000;
}

/******************************************************************************
header
******************************************************************************/
header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 0;
}
header h1 {
  position: absolute;
  width: 60%;
  height: 0;
  padding-top: 14.6666666667%;
  text-align: center;
  z-index: 5;
  left: 50%;
  top: 0;
  margin-top: 11.3333333333%;
  margin-left: -30%;
  -webkit-transform: translateY(-60%) scale(0.75);
  transform: translateY(-60%) scale(0.75);
}
header h1 a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
header h1 img {
  width: 100%;
  height: auto;
}
header h1.anime {
  transition: all 0.5s ease;
}
header.top h1 {
  position: fixed;
  transition: all 0.5s ease;
  -webkit-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
}
header.top h1.animation {
  transition: none;
  -webkit-animation: logo 1.2s linear forwards;
  animation: logo 1.2s linear forwards;
}
header.top h1 a {
  cursor: default;
}
header .bg-menu {
  position: fixed;
  width: 66.6666666667%;
  height: 0;
  padding-top: 66.6666666667%;
  background: #ffb400;
  border-radius: 50%;
  z-index: 10;
  top: 0;
  right: 0;
  margin-top: -24%;
  margin-right: -24%;
  -webkit-transform: scale(0.2);
  transform: scale(0.2);
}
header .btn-menu {
  position: fixed;
  z-index: 15;
  top: 0;
  right: 0;
  margin-top: 2.6666666667%;
  margin-right: 2.6666666667%;
  width: 13.3333333333%;
  height: 0;
  padding-top: 13.3333333333%;
  cursor: pointer;
}
header .btn-menu .inner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}
header .btn-menu .inner::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 0;
  padding-top: 8%;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  border-radius: 20px;
  -webkit-transform: translateY(-220%) rotateZ(0deg);
  transform: translateY(-220%) rotateZ(0deg);
}
header .btn-menu .inner::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 0;
  padding-top: 8%;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  border-radius: 20px;
  -webkit-transform: translateY(220%) rotateZ(0deg);
  transform: translateY(220%) rotateZ(0deg);
}
header .btn-menu .inner span {
  position: absolute;
  display: block;
  width: 50%;
  height: 0;
  padding-top: 8%;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  border-radius: 20px;
}
header nav {
  position: relative;
  margin: 7.3333333333% auto 0;
  width: 100%;
  z-index: 10;
  -webkit-transform: scale(0);
  transform: scale(0);
}
header nav ul {
  text-align: center;
  position: relative;
  /*
  .btn-bbs{
  	width: lg_pct(350px,$wrap-width);
  	a{
  		background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_bbs.png) no-repeat 0 0;
  		background-size: 100% 200%;
  	}
  }
  */
}
header nav ul li {
  position: relative;
  height: 0;
  padding-top: 10.6666666667%;
  margin: 1.3333333333% auto 0;
  opacity: 0;
}
header nav ul li a:hover {
  background-position: 0 100%;
}
header nav ul li.charm, header nav ul li.job {
  padding-top: 22.6666666667%;
}
header nav ul li.charm ul, header nav ul li.job ul {
  margin-top: -24%;
}
header nav ul .btn-top {
  width: 38.6666666667%;
}
header nav ul .btn-top a {
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_top.png) no-repeat 0 0;
  background-size: 100% 200%;
}
header nav ul .btn-charm-01 {
  width: 80%;
}
header nav ul .btn-charm-01 a {
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_charm_01.png) no-repeat 0 0;
  background-size: 100% 200%;
}
header nav ul .btn-charm-02 {
  width: 80%;
}
header nav ul .btn-charm-02 a {
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_charm_02.png) no-repeat 0 0;
  background-size: 100% 200%;
}
header nav ul .btn-job {
  width: 38.6666666667%;
}
header nav ul .btn-job a {
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_job.png) no-repeat 0 0;
  background-size: 100% 200%;
}
header nav ul .btn-skill {
  width: 38.6666666667%;
}
header nav ul .btn-skill a {
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_skill.png) no-repeat 0 0;
  background-size: 100% 200%;
}
header nav ul .btn-reunion {
  width: 38.6666666667%;
}
header nav ul .btn-reunion a {
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_reunion.png) no-repeat 0 0;
  background-size: 100% 200%;
}
header nav ul .btn-notice {
  width: 38.6666666667%;
}
header nav ul .btn-notice a {
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_notice.png) no-repeat 0 0;
  background-size: 100% 200%;
}
header nav ul .btn-playguide {
  width: 38.6666666667%;
}
header nav ul .btn-playguide a {
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_playguide.png) no-repeat 0 0;
  background-size: 100% 200%;
}
header nav ul .btn-campaign {
  width: 64%;
}
header nav ul .btn-campaign a {
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_campaign.png) no-repeat 0 0;
  background-size: 100% 200%;
}
header nav ul [class^="btn-"].active a {
  background-position: 0 100%;
}
header nav dl {
  text-align: center;
  font-size: 0;
  margin: 4% 0 12%;
  opacity: 0;
  position: relative;
  padding-top: 5.3333333333%;
}
header nav dl::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/bg_menu_line.png) no-repeat center bottom;
  background-size: contain;
  width: 100%;
  height: 0;
  padding-top: 1.0666666667%;
}
header nav dl dt {
  display: inline-block;
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/bg_menu_info.png) no-repeat center top;
  background-size: contain;
  width: 41.3333333333%;
  height: 0;
  padding-top: 5.6%;
  margin: 0 2.6666666667% 4% 0;
}
header nav dl dt span {
  display: none;
}
header nav dl dd {
  display: inline-block;
  position: relative;
  width: 10.6666666667%;
  height: 0;
  padding-top: 10.6666666667%;
  margin: 1.3333333333% 2%;
}
header nav dl dd a {
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/btn_menu_share.png) no-repeat 0 0;
  background-size: 300% 100%;
}
header nav dl .btn-facebook a {
  background-position: 0 0;
}
header nav dl .btn-twitter a {
  background-position: 50% 0;
}
header nav dl .btn-line a {
  background-position: 100% 0;
}
header.open {
  overflow: visible;
}
header.open .bg-menu {
  -webkit-transform: scale(10);
  transform: scale(10);
}
header.open .btn-menu .inner::before {
  -webkit-transform: translateY(0) rotateZ(45deg);
  transform: translateY(0) rotateZ(45deg);
}
header.open .btn-menu .inner::after {
  -webkit-transform: translateY(0) rotateZ(-45deg);
  transform: translateY(0) rotateZ(-45deg);
}
header.open .btn-menu .inner span {
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
}
header.open nav {
  -webkit-transform: none;
  transform: none;
}
header.open nav li, header.open nav dl {
  opacity: 1;
}
header.animation .bg-menu {
  transition: all 0.3s linear 0.2s;
}
header.animation .btn-menu .inner::before {
  -webkit-animation: hamburger-top 0.3s ease forwards reverse;
  animation: hamburger-top 0.3s ease forwards reverse;
}
header.animation .btn-menu .inner::after {
  -webkit-animation: hamburger-bottom 0.3s ease forwards reverse;
  animation: hamburger-bottom 0.3s ease forwards reverse;
}
header.animation .btn-menu .inner span {
  transition: all 0.3s ease;
}
header.animation nav {
  -webkit-transform: none;
  transform: none;
}
header.animation nav ul li, header.animation nav dl {
  transition: opacity 0.3s ease 0s;
}
header.open.animation .bg-menu {
  transition: all 0.4s cubic-bezier(0.8, -0.1, 0.8, 0.7) 0s;
}
header.open.animation .btn-menu .inner::before {
  -webkit-animation: hamburger-top 0.3s ease forwards;
  animation: hamburger-top 0.3s ease forwards;
}
header.open.animation .btn-menu .inner::after {
  -webkit-animation: hamburger-bottom 0.3s ease forwards;
  animation: hamburger-bottom 0.3s ease forwards;
}
header.open.animation nav {
  -webkit-transform: scale(1);
  transform: scale(1);
}
header.open.animation nav ul li, header.open.animation nav dl {
  transition: opacity 0.4s ease 0.4s;
}

@keyframes logo {
  0% {
    -webkit-transform: translateY(-200%) scaleY(1);
    transform: translateY(-200%) scaleY(1);
    animation-timing-function: ease-out;
  }
  30% {
    -webkit-transform: translateY(70%) scaleY(0.6);
    transform: translateY(70%) scaleY(0.6);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    animation-timing-function: ease-in-out;
  }
  60% {
    -webkit-transform: translateY(-40%) scaleY(1);
    transform: translateY(-40%) scaleY(1);
    animation-timing-function: ease-in-out;
  }
  90% {
    -webkit-transform: translateY(0) scaleY(1);
    transform: translateY(0) scaleY(1);
    animation-timing-function: ease-in-out;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1);
    transform: translateY(0) scaleY(1);
    animation-timing-function: ease-in-out;
  }
}
@keyframes logo-pc {
  0% {
    -webkit-transform: translateY(-300%) scaleY(1);
    transform: translateY(-300%) scaleY(1);
    animation-timing-function: ease-out;
  }
  30% {
    -webkit-transform: translateY(70%) scaleY(0.6);
    transform: translateY(70%) scaleY(0.6);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    animation-timing-function: ease-in-out;
  }
  60% {
    -webkit-transform: translateY(-40%) scaleY(1);
    transform: translateY(-40%) scaleY(1);
    animation-timing-function: ease-in-out;
  }
  90% {
    -webkit-transform: translateY(0) scaleY(1);
    transform: translateY(0) scaleY(1);
    animation-timing-function: ease-in-out;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1);
    transform: translateY(0) scaleY(1);
    animation-timing-function: ease-in-out;
  }
}
@keyframes hamburger-open {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes hamburger-top {
  0% {
    -webkit-transform: translateY(-200%) rotateZ(0deg);
    transform: translateY(-200%) rotateZ(0deg);
  }
  50% {
    -webkit-transform: translateY(0) rotateZ(0deg);
    transform: translateY(0) rotateZ(0deg);
  }
  100% {
    -webkit-transform: translateY(0) rotateZ(45deg);
    transform: translateY(0) rotateZ(45deg);
  }
}
@keyframes hamburger-bottom {
  0% {
    -webkit-transform: translateY(200%) rotateZ(0deg);
    transform: translateY(200%) rotateZ(0deg);
  }
  50% {
    -webkit-transform: translateY(0) rotateZ(0deg);
    transform: translateY(0) rotateZ(0deg);
  }
  100% {
    -webkit-transform: translateY(0) rotateZ(-45deg);
    transform: translateY(0) rotateZ(-45deg);
  }
}
@supports (-ms-ime-align: auto) {
  header.top {
    overflow: hidden;
  }

  header.open {
    overflow: visible;
  }
}
@media all and (-ms-high-contrast: none) {
  header.top {
    overflow: hidden;
  }

  header.open {
    overflow: visible;
  }
}
/******************************************************************************
wrapper
******************************************************************************/
.wrapper {
  position: relative;
  z-index: 10;
  display: block;
}
.wrapper.hidden {
  overflow: hidden;
}
.wrapper.none {
  display: none;
}
.wrapper article {
  position: relative;
  z-index: 1;
}
.wrapper article > div,
.wrapper article > section {
  width: 100%;
  display: none;
}
.wrapper article > div.active,
.wrapper article > section.active {
  display: block;
}

/******************************************************************************
button effect
******************************************************************************/
.huge {
  -webkit-animation: huge-effect 0.2s ease forwards;
  animation: huge-effect 0.2s ease forwards;
}

@keyframes huge-effect {
  0% {
    -webkit-transform: scale(1) translate3d(0, 0, 100px);
    transform: scale(1) translate3d(0, 0, 100px);
  }
  50% {
    -webkit-transform: scale(1.1) translate3d(0, 0, 100px);
    transform: scale(1.1) translate3d(0, 0, 100px);
  }
  100% {
    -webkit-transform: scale(1) translate3d(0, 0, 100px);
    transform: scale(1) translate3d(0, 0, 100px);
  }
}
/******************************************************************************
footer
******************************************************************************/
footer .inner {
  text-align: center;
  position: relative;
  width: 100%;
  color: #fff;
  background: #000;
  padding: 7.3333333333% 0 3.3333333333%;
  z-index: 10;
}
footer .inner ul {
  text-align: center;
  margin: 0 auto 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
footer .inner ul li {
  font-size: 20px;
  font-size: 2.6666666667vw;
  position: relative;
  margin: 0 2.4% 0.8%;
}
footer .inner ul li a {
  color: #fff;
  display: block;
  position: relative;
}
footer .inner ul li:not(:first-child):not(:last-child)::before {
  content: '|';
  position: absolute;
  font-size: 0.9em;
  color: #fff;
  left: -1.1em;
  top: 0;
}
footer .inner .logo {
  position: relative;
  margin: 4.6666666667% auto 0;
  width: 17.0666666667%;
  height: 0;
  padding-top: 5.2%;
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/logo_nexon.png) no-repeat 0 0;
  background-size: contain;
}
footer .inner .logo span {
  display: none;
}
footer .inner .copy {
  margin-top: 4%;
  color: #fff;
  font-size: 16px;
  font-size: 2.1333333333vw;
}

footer.none {
  display: none;
}

/******************************************************************************
modal
******************************************************************************/
.modal {
  z-index: 50;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-100vh);
  transform: translateY(-100vh);
  font-size: 28px;
  font-size: 3.7333333333vw;
}
.modal div[class^="modal-"] {
  position: relative;
  margin: 0 auto;
  width: 92%;
  padding: 4%;
  display: none;
  z-index: 5;
  border-radius: 50px;
}
.modal div.modal-youtube {
  margin: 0 auto;
  max-width: 890px;
  padding: 0;
  border-radius: 0;
}
.modal div.modal-youtube .youtube-player {
  position: relative;
  margin: 0 auto 0;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.modal div.modal-youtube .youtube-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modal div.modal-banner .inner {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 0;
  padding-top: 73.6111111111%;
}
.modal div.modal-banner .inner a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modal div.modal-banner .inner a img {
  width: 100%;
  height: 100%;
}
.modal .btn-close {
  position: relative;
  width: 15.3846153846%;
  height: 0;
  padding-top: 15.3846153846%;
  cursor: pointer;
  opacity: 0;
  z-index: 10;
  margin: 4.6153846154% auto;
  -webkit-animation: none;
  animation: none;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  transition: all 0.5s ease 0s;
}
.modal .btn-close::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 0;
  padding-top: 8%;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fa8600;
  border-radius: 20px;
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}
.modal .btn-close::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 0;
  padding-top: 8%;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fa8600;
  border-radius: 20px;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
.modal .btn-close.none {
  opacity: 0 !important;
}
.modal .btn-close span {
  display: none;
}
.modal.close.animation .btn-close {
  -webkit-animation: none;
  animation: none;
  transition: all 0.5s ease 0s;
}
.modal.close {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.modal.close .btn-close {
  opacity: 0;
  -webkit-transform: none;
  transform: none;
}
.modal.open.animation .btn-close {
  transition: none;
  -webkit-animation: close_btn 0.5s ease 0.5s both;
  animation: close_btn 0.5s ease 0.5s both;
}
.modal.open {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.modal.open .btn-close {
  opacity: 1;
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}

.modal + .shadow {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 0;
  padding-top: 100%;
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%) scale(0);
  transform: translateY(-50%) scale(0);
  left: 0;
  z-index: 40;
  border-radius: 50%;
  cursor: pointer;
  z-index: 40;
}

.modal.close.animation + .shadow {
  -webkit-animation: none;
  animation: none;
  transition: all 0.5s ease 0.5s;
}

.modal.close + .shadow {
  -webkit-transform: translateY(-50%) scale(0);
  transform: translateY(-50%) scale(0);
}

.modal.open.animation + .shadow {
  -webkit-animation: modal-shadow 1.0s ease both;
  animation: modal-shadow 1.0s ease both;
}

.modal.open + .shadow {
  -webkit-transform: translateY(-50%) scale(5);
  transform: translateY(-50%) scale(5);
}

@keyframes close_btn {
  0% {
    opacity: 0;
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
  }
}
@keyframes modal-shadow {
  0% {
    -webkit-transform: translateY(-50%) scale(0);
    transform: translateY(-50%) scale(0);
  }
  100% {
    -webkit-transform: translateY(-50%) scale(5);
    transform: translateY(-50%) scale(5);
  }
}
/******************************************************************************
loading
******************************************************************************/
.loading {
  position: fixed;
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/img_loading_01.png) no-repeat 0 0;
  background-size: contain;
  width: 18.4%;
  height: 0;
  padding-top: 18.4%;
  z-index: 100;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/img_loading_02.png) no-repeat 0 0;
  background-size: contain;
  -webkit-animation: loading 1s linear infinite;
  animation: loading 1s linear infinite;
}

@keyframes loading {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
/******************************************************************************
横向き
******************************************************************************/
.landscape {
  display: none;
  position: fixed;
  background: #000;
  width: 100vw;
  height: 100vh;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
}
.landscape p {
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/bg_landscape.png) no-repeat center center;
  background-size: contain;
  width: 155px;
  height: 176px;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  text-indent: 110%;
  overflow: hidden;
}

/**********************************************************************************************************************
***********************************************************************************************************************
												750px以上の場合に適用
***********************************************************************************************************************
**********************************************************************************************************************/
@media (min-width: 750px) {
  /******************************************************************************
  header
  ******************************************************************************/
  header {
    min-width: 1120px;
  }
  header h1 {
    width: 540px;
    padding-top: 132px;
    margin-top: 190px;
    margin-left: -270px;
    -webkit-transform: scale(0.52) translateY(-120%);
    transform: scale(0.52) translateY(-120%);
  }
  header h1.animation {
    -webkit-animation: logo-pc 1.5s linear forwards;
    animation: logo-pc 1.5s linear forwards;
  }
  header.top, header.open, header.animation {
    min-width: 0;
  }
  header.close, header.open.animation {
    min-width: 1120px;
  }

  /******************************************************************************
  wrapper
  ******************************************************************************/
  .wrapper {
    width: 100%;
    overflow: hidden;
    margin: 0 auto 0;
  }
  .wrapper.hidden {
    min-width: 1120px;
  }
  .wrapper article > div {
    width: 1120px;
  }
  .wrapper article > section {
    margin: 92px auto 0;
    width: 1120px;
  }

  /******************************************************************************
  footer
  ******************************************************************************/
  footer .inner {
    padding: 45px 0 35px;
  }
  footer .inner ul {
    width: 550px;
    flex-wrap: wrap;
  }
  footer .inner ul li {
    font-size: 16px;
    position: relative;
    margin: 0 12px 6px;
  }
  footer .inner ul li:not(:first-child):not(:last-child)::before {
    content: '|';
    position: absolute;
    font-size: 0.9em;
    color: #fff;
    left: -1.1em;
    top: 0;
  }
  footer .inner .logo {
    position: relative;
    margin: 30px auto 0;
    width: 128px;
    height: 39px;
    padding-top: 0;
  }
  footer .inner .copy {
    margin: 30px 0 0 0;
    font-size: 14px;
  }

  footer.none {
    display: block;
  }

  footer.length {
    min-width: 1120px;
  }

  /******************************************************************************
  modal
  ******************************************************************************/
  .modal {
    width: auto;
    max-width: 890px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 22px;
  }
  .modal div[class^="modal-"] {
    width: auto;
    padding: 35px;
    border-radius: 50px;
  }
  .modal div.modal-youtube {
    width: 890px;
    padding: 0;
  }
  .modal div.modal-banner {
    width: 720px;
    padding: 0;
  }
  .modal .btn-close {
    position: absolute;
    width: 70px;
    height: 70px;
    padding-top: 0;
    margin: 0;
    top: -80px;
    right: 0;
  }
  .modal .btn-close::before {
    width: 35px;
    height: 5px;
    padding-top: 0;
    border-radius: 20px;
  }
  .modal .btn-close::after {
    width: 35px;
    height: 5px;
    padding-top: 0;
    border-radius: 20px;
  }
  .modal.close, .modal.open {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  /******************************************************************************
  loading
  ******************************************************************************/
  .loading {
    width: 138px;
    height: 138px;
    padding-top: 0;
  }
}
/**********************************************************************************************************************
***********************************************************************************************************************
												1120px以上の場合に適用
***********************************************************************************************************************
**********************************************************************************************************************/
@media (min-width: 1120px) {
  /******************************************************************************
  header
  ******************************************************************************/
  header.top {
    overflow: visible;
  }
  header.top h1 {
    position: absolute;
    width: 28.125%;
    height: 0;
    padding-top: 6.875%;
    margin-left: -14.0625%;
    margin-top: 12.037037037%;
  }
  header .bg-menu {
    width: 100%;
    height: 92px;
    padding-top: 0px;
    border-radius: 0px;
    -webkit-transform: none;
    transform: none;
    margin: 0;
    position: absolute;
  }
  header .btn-menu {
    display: none;
  }
  header nav {
    -webkit-transform: none;
    transform: none;
    margin: 0 auto 0;
  }
  header nav ul {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 25px;
    /*
    .btn-bbs{
    	width: 183px;
    	a{
    		background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_bbs_pc.png) no-repeat 0 0;
    	}
    }
    */
  }
  header nav ul li {
    position: relative;
    height: 40px;
    padding-top: 0;
    margin: 0 24px 0 0;
    opacity: 1;
  }
  header nav ul li:not(:first-child)::before {
    content: '';
    position: absolute;
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/bg_menu_bar_pc.png) no-repeat 0 0;
    width: 12px;
    height: 20px;
    left: -18px;
    top: 8px;
  }
  header nav ul li:last-child {
    margin-right: 0;
  }
  header nav ul li.charm {
    padding-top: 0;
    width: 205px;
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/bg_newmenu_charm_pc.png) no-repeat 0 0;
  }
  header nav ul li.job {
    padding-top: 0;
    width: 110px;
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/bg_newmenu_job_pc.png) no-repeat 0 0;
  }
  header nav ul li.playguide {
    padding-top: 0;
    width: 154px;
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_playguide_pc.png) no-repeat 0 0;
  }
  header nav ul li.charm ul, header nav ul li.job ul, header nav ul li.playguide ul {
    display: block;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: 40px;
    width: 218px;
    height: 0;
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/bg_submenu_pc.png) no-repeat center 6px;
    transition: all 0.2s ease;
    overflow: hidden;
  }
  header nav ul li.charm ul li, header nav ul li.job ul li, header nav ul li.playguide ul li {
    margin: 36px auto 0;
  }
  header nav ul li.charm ul li.active a, header nav ul li.job ul li.active a, header nav ul li.playguide ul li.active a {
    background-position: 0 100% !important;
  }
  header nav ul li.charm ul li::before, header nav ul li.job ul li::before, header nav ul li.playguide ul li::before {
    content: normal;
  }
  header nav ul li.charm:hover, header nav ul li.job:hover, header nav ul li.playguide:hover {
    background-position: 0 100%;
  }
  header nav ul li.charm:hover ul, header nav ul li.job:hover ul, header nav ul li.playguide:hover ul {
    height: 145px;
  }
  header nav ul li.charm.active, header nav ul li.job.active, header nav ul li.playguide.active {
    background-position: 0 50%;
  }
  header nav ul li.charm.active li a, header nav ul li.job.active li a, header nav ul li.playguide.active li a {
    background-position: 0 0 !important;
  }
  header nav ul li.charm.active li a:hover,
  header nav ul li.charm.active li.active a, header nav ul li.job.active li a:hover,
  header nav ul li.job.active li.active a, header nav ul li.playguide.active li a:hover,
  header nav ul li.playguide.active li.active a {
    background-position: 0 100% !important;
  }
  header nav ul .btn-top {
    width: 77px;
  }
  header nav ul .btn-top a {
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_top_pc.png) no-repeat 0 0;
  }
  header nav ul .btn-charm-01 {
    width: 123px;
    height: 24px;
  }
  header nav ul .btn-charm-01 a {
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_charm_01_pc.png) no-repeat 0 0;
  }
  header nav ul .btn-charm-02 {
    width: 123px;
    height: 24px;
  }
  header nav ul .btn-charm-02 a {
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_charm_02_pc.png) no-repeat 0 0;
  }
  header nav ul .btn-job {
    width: 99px;
    height: 24px;
  }
  header nav ul .btn-job a {
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_job_pc.png) no-repeat 0 0;
  }
  header nav ul .btn-skill {
    width: 123px;
    height: 24px;
  }
  header nav ul .btn-skill a {
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_skill_pc.png) no-repeat 0 0;
  }
  header nav ul .btn-reunion {
    width: 113px;
    position: relative;
  }
  header nav ul .btn-reunion a {
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_reunion_pc.png) no-repeat 0 0;
  }
  header nav ul .btn-reunion::after {
    content: '';
    position: absolute;
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/bg_newmenu_reunion_pc.png) no-repeat 0 0;
    width: 120px;
    height: 17px;
    top: -16px;
    left: -5px;
  }
  header nav ul .btn-notice {
    width: 110px;
  }
  header nav ul .btn-notice a {
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_notice_pc.png) no-repeat 0 0;
  }
  header nav ul .btn-playguide {
    width: 154px;
  }
  header nav ul .btn-playguide a {
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/newmenu/btn_newmenu_playguide_pc.png) no-repeat 0 0;
  }
  header nav ul .btn-campaign {
    display: none;
  }
  header nav ul .active a,
  header nav ul .active a:hover {
    background-position: 0 50% !important;
  }
  header nav dl {
    display: none;
  }
  header.open .bg-menu {
    -webkit-transform: none;
    transform: none;
  }
  header.open nav {
    -webkit-transform: none;
    transform: none;
  }

  /******************************************************************************
  wrapper
  ******************************************************************************/
  .wrapper.none {
    display: block;
  }
}
/******************************************************************************
aside
******************************************************************************/
aside {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 0;
}
aside .swiper-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-top: 50.1333333333%;
  z-index: 1;
  margin-top: 33.3333333333%;
  overflow: visible;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
}
aside .swiper-container .swiper-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
aside .swiper-container .swiper-slide {
  width: 50.1333333333%;
  height: 0;
  padding-top: 50.1333333333%;
  z-index: 1;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  position: relative;
  /*
  .btn-bbs a{
  	background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/btn_bbs.png) no-repeat 0 0;
  	background-size: cover;
  }
  */
}
aside .swiper-container .swiper-slide p {
  -webkit-animation: none;
  animation: none;
  position: absolute;
  top: 0;
  left: 10px;
  margin: 0;
  width: calc(100% - 20px);
  height: 0;
  padding-top: calc(100% - 20px);
  border-radius: 50%;
  transition: all 0.3s ease;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
aside .swiper-container .swiper-slide p span {
  display: none;
}
aside .swiper-container .swiper-slide p::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(38, 28, 15, 0.4);
  transition: all 0.5s ease;
  z-index: 5;
}
aside .swiper-container .swiper-slide p a {
  z-index: 1;
}
aside .swiper-container .swiper-slide .bg-charm {
  z-index: 3;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/bg_charm.png) no-repeat 0 0;
  background-size: cover;
  -webkit-transform: translate3d(0, 0, 10px);
  transform: translate3d(0, 0, 10px);
}
aside .swiper-container .swiper-slide .btn-charm-01 {
  width: calc(50% - 20px);
  height: 0;
  padding-top: calc(50% - 20px);
  top: 100%;
  left: 5%;
  z-index: 1;
  -webkit-transform: translate3d(50%, -200%, -10px) scale(0);
  transform: translate3d(50%, -200%, -10px) scale(0);
  transition-delay: 0s;
  transition-timing-function: ease-out;
}
aside .swiper-container .swiper-slide .btn-charm-01 a {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/btn_charm_01.png) no-repeat 0 0;
  background-size: cover;
}
aside .swiper-container .swiper-slide .btn-charm-02 {
  width: calc(50% - 20px);
  height: 0;
  padding-top: calc(50% - 20px);
  top: 100%;
  left: calc(45% + 20px);
  z-index: 1;
  -webkit-transform: translate3d(-50%, -200%, -10px) scale(0);
  transform: translate3d(-50%, -200%, -10px) scale(0);
  transition-delay: 0.2s;
  transition-timing-function: ease-out;
}
aside .swiper-container .swiper-slide .btn-charm-02.open {
  transition-delay: 0s;
}
aside .swiper-container .swiper-slide .btn-charm-02 a {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/btn_charm_02.png) no-repeat 0 0;
  background-size: cover;
}
aside .swiper-container .swiper-slide .btn-reunion a {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/btn_reunion.png) no-repeat 0 0;
  background-size: cover;
}
aside .swiper-container .swiper-slide .btn-campaign a {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/btn_campaign.png) no-repeat 0 0;
  background-size: cover;
}
aside .swiper-container .swiper-slide .btn-playguide {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/btn_playguide.png) no-repeat 0 0;
  background-size: cover;
}
aside .swiper-container .swiper-slide .btn-notice a {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/btn_notice.png) no-repeat 0 0;
  background-size: cover;
}
aside .swiper-container .swiper-slide .bg-job {
  z-index: 3;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/bg_job.png) no-repeat 0 0;
  background-size: cover;
  -webkit-transform: translate3d(0, 0, 10px);
  transform: translate3d(0, 0, 10px);
}
aside .swiper-container .swiper-slide .btn-job {
  width: calc(50% - 20px);
  height: 0;
  padding-top: calc(50% - 20px);
  top: 100%;
  left: 5%;
  z-index: 1;
  -webkit-transform: translate3d(50%, -200%, -10px) scale(0);
  transform: translate3d(50%, -200%, -10px) scale(0);
  transition-delay: 0s;
  transition-timing-function: ease-out;
}
aside .swiper-container .swiper-slide .btn-job a {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/btn_job.png) no-repeat 0 0;
  background-size: cover;
}
aside .swiper-container .swiper-slide .btn-skill {
  width: calc(50% - 20px);
  height: 0;
  padding-top: calc(50% - 20px);
  top: 100%;
  left: calc(45% + 20px);
  z-index: 1;
  -webkit-transform: translate3d(-50%, -200%, -10px) scale(0);
  transform: translate3d(-50%, -200%, -10px) scale(0);
  transition-delay: 0.2s;
  transition-timing-function: ease-out;
}
aside .swiper-container .swiper-slide .btn-skill.open {
  transition-delay: 0s;
}
aside .swiper-container .swiper-slide .btn-skill a {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/btn_skill.png) no-repeat 0 0;
  background-size: cover;
}
aside .swiper-container .swiper-slide-next p,
aside .swiper-container .swiper-slide-duplicate-next p {
  cursor: pointer;
  -webkit-animation: bounce-03 6.0s ease-in-out 1.0s infinite;
  animation: bounce-03 6.0s ease-in-out 1.0s infinite;
}
aside .swiper-container .swiper-slide-next .btn-charm-01,
aside .swiper-container .swiper-slide-next .btn-charm-02,
aside .swiper-container .swiper-slide-next .btn-job,
aside .swiper-container .swiper-slide-next .btn-skill,
aside .swiper-container .swiper-slide-duplicate-next .btn-charm-01,
aside .swiper-container .swiper-slide-duplicate-next .btn-charm-02,
aside .swiper-container .swiper-slide-duplicate-next .btn-job,
aside .swiper-container .swiper-slide-duplicate-next .btn-skill {
  -webkit-animation: none;
  animation: none;
}
aside .swiper-container .swiper-slide-prev p,
aside .swiper-container .swiper-slide-duplicate-prev p {
  cursor: pointer;
  -webkit-animation: bounce-03 6.0s ease-in-out 2.0s infinite;
  animation: bounce-03 6.0s ease-in-out 2.0s infinite;
}
aside .swiper-container .swiper-slide-prev .btn-charm-01,
aside .swiper-container .swiper-slide-prev .btn-charm-02,
aside .swiper-container .swiper-slide-prev .btn-job,
aside .swiper-container .swiper-slide-prev .btn-skill,
aside .swiper-container .swiper-slide-duplicate-prev .btn-charm-01,
aside .swiper-container .swiper-slide-duplicate-prev .btn-charm-02,
aside .swiper-container .swiper-slide-duplicate-prev .btn-job,
aside .swiper-container .swiper-slide-duplicate-prev .btn-skill {
  -webkit-animation: none;
  animation: none;
}
aside .swiper-container .swiper-slide-active,
aside .swiper-container .swiper-slide-duplicate-active {
  z-index: 10;
}
aside .swiper-container .swiper-slide-active p,
aside .swiper-container .swiper-slide-duplicate-active p {
  cursor: pointer;
  -webkit-animation: bounce 3.0s ease-in-out 0s infinite;
  animation: bounce 3.0s ease-in-out 0s infinite;
}
aside .swiper-container .swiper-slide-active p::before,
aside .swiper-container .swiper-slide-duplicate-active p::before {
  opacity: 0;
}
aside .swiper-container .swiper-slide-active p a.open,
aside .swiper-container .swiper-slide-duplicate-active p a.open {
  transition: all 0.2s ease;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
aside .swiper-container .swiper-slide-active [class^="bg-"],
aside .swiper-container .swiper-slide-duplicate-active [class^="bg-"] {
  cursor: default;
}
aside .swiper-container .swiper-slide-active .btn-charm-01,
aside .swiper-container .swiper-slide-active .btn-job,
aside .swiper-container .swiper-slide-duplicate-active .btn-charm-01,
aside .swiper-container .swiper-slide-duplicate-active .btn-job {
  -webkit-animation: none;
  animation: none;
  -webkit-transform: translate3d(0, 0, -10px) scale(1);
  transform: translate3d(0, 0, -10px) scale(1);
  transition-delay: 0.3s;
  transition-timing-function: cubic-bezier(0, 0.2, 0.1, 1.4);
}
aside .swiper-container .swiper-slide-active .btn-charm-02,
aside .swiper-container .swiper-slide-active .btn-skill,
aside .swiper-container .swiper-slide-duplicate-active .btn-charm-02,
aside .swiper-container .swiper-slide-duplicate-active .btn-skill {
  -webkit-animation: none;
  animation: none;
  -webkit-transform: translate3d(0, 0, -10px) scale(1);
  transform: translate3d(0, 0, -10px) scale(1);
  transition-delay: 0.5s;
  transition-timing-function: cubic-bezier(0, 0.2, 0.1, 1.4);
}
aside .swiper-container .swiper-button-prev,
aside .swiper-container .swiper-button-next {
  outline: none !important;
  background-size: 200%;
  display: block;
  position: absolute;
  width: 16%;
  height: 0;
  padding-top: 37.3333333333%;
  z-index: 100;
  top: 21.6%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
}
aside .swiper-container .swiper-button-prev {
  left: 0;
}
aside .swiper-container .swiper-button-next {
  right: 0;
}
aside h1.animation ~ .swiper-container .btn-pre {
  animation-delay: 0.2s;
}
aside .filter {
  margin: 0;
  width: 50.1333333333%;
  height: 0;
  padding-top: 50.1333333333%;
  position: fixed;
  z-index: 20;
  top: -100%;
  left: -100%;
  border-radius: 50%;
  -webkit-transform: scale(0);
  transform: scale(0);
  transition: transform 0.3s linear 0.1s;
  background: #000;
  /*
  &.bbs{
  	background: #e9e052;
  }
  */
}
aside .filter.charm-01 {
  background: #ffdee4;
}
aside .filter.charm-02 {
  background: #ffd6ba;
}
aside .filter.reunion {
  background: #6cdbff;
}
aside .filter.campaign {
  background: #ff99eb;
}
aside .filter.playguide {
  background: #bdc6f9;
}
aside .filter.notice {
  background: #dec065;
}
aside .filter.job {
  background: #aaf5a8;
}
aside .filter.skill {
  background: #fbf5bc;
}
aside .filter.open {
  -webkit-transform: scale(6);
  transform: scale(6);
}

@supports (-ms-ime-align: auto) {
  aside .swiper-container .swiper-slide {
    padding-top: 100%;
  }
  aside .swiper-container .swiper-slide .btn-charm-01,
  aside .swiper-container .swiper-slide .btn-charm-02,
  aside .swiper-container .swiper-slide .btn-job,
  aside .swiper-container .swiper-slide .btn-skill {
    top: 50%;
  }
}
@keyframes bounce {
  0% {
    -webkit-transform: scale(1, 1) translate3D(0, 0, 0);
    transform: scale(1, 1) translate3D(0, 0, 0);
  }
  7% {
    -webkit-transform: scale(1, 1) translate3D(0, 0, 0);
    transform: scale(1, 1) translate3D(0, 0, 0);
  }
  10% {
    -webkit-transform: scale(1.15, 0.9) translate3D(0, 0, 0);
    transform: scale(1.15, 0.9) translate3D(0, 0, 0);
  }
  17% {
    -webkit-transform: scale(0.9, 1.05) translate3D(0, -6%, 0);
    transform: scale(0.9, 1.05) translate3D(0, -6%, 0);
  }
  22% {
    -webkit-transform: scale(1, 1) translate3D(0, 0, 0);
    transform: scale(1, 1) translate3D(0, 0, 0);
  }
  100% {
    -webkit-transform: scale(1, 1) translate3D(0, 0, 0);
    transform: scale(1, 1) translate3D(0, 0, 0);
  }
}
@keyframes bounce-02 {
  0% {
    -webkit-transform: scale(1, 1) translate3D(0, 0, 0);
    transform: scale(1, 1) translate3D(0, 0, 0);
  }
  4% {
    -webkit-transform: scale(1.15, 0.9) translate3D(0, 0, 0);
    transform: scale(1.15, 0.9) translate3D(0, 0, 0);
  }
  10% {
    -webkit-transform: scale(0.9, 1.05) translate3D(0, -10%, 0);
    transform: scale(0.9, 1.05) translate3D(0, -10%, 0);
  }
  18% {
    -webkit-transform: scale(1, 1) translate3D(0, 0, 0);
    transform: scale(1, 1) translate3D(0, 0, 0);
  }
  100% {
    -webkit-transform: scale(1, 1) translate3D(0, 0, 0);
    transform: scale(1, 1) translate3D(0, 0, 0);
  }
}
@keyframes bounce-03 {
  0% {
    -webkit-transform: scale(1, 1) translate3D(0, 0, 0);
    transform: scale(1, 1) translate3D(0, 0, 0);
  }
  3% {
    -webkit-transform: scale(1, 1) translate3D(0, 0, 0);
    transform: scale(1, 1) translate3D(0, 0, 0);
  }
  5% {
    -webkit-transform: scale(1.15, 0.9) translate3D(0, 0, 0);
    transform: scale(1.15, 0.9) translate3D(0, 0, 0);
  }
  8% {
    -webkit-transform: scale(0.9, 1.05) translate3D(0, -6%, 0);
    transform: scale(0.9, 1.05) translate3D(0, -6%, 0);
  }
  11% {
    -webkit-transform: scale(1, 1) translate3D(0, 0, 0);
    transform: scale(1, 1) translate3D(0, 0, 0);
  }
  100% {
    -webkit-transform: scale(1, 1) translate3D(0, 0, 0);
    transform: scale(1, 1) translate3D(0, 0, 0);
  }
}
/******************************************************************************
top
******************************************************************************/
.wrapper .top {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: visible;
  position: fixed;
  background: #000;
}
.wrapper .top .scroll-area {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0;
  height: 100%;
  overflow: visible;
  white-space: nowrap;
  z-index: 3;
  -webkit-transform: translate3d(0, 0, 3px);
  transform: translate3d(0, 0, 3px);
}
.wrapper .top .scroll-area > div {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 10px);
  transform: translate3d(0, 0, 10px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.wrapper .top .scroll-area > div.first {
  z-index: 10;
  opacity: 1;
}
.wrapper .top .scroll-area > div.active {
  -webkit-animation: scl-active 12.0s linear 0s both;
  animation: scl-active 12.0s linear 0s both;
  z-index: 10;
  opacity: 1;
}
.wrapper .top .scroll-area > div.ios11 {
  z-index: 10;
  opacity: 1;
}
.wrapper .top .scroll-area > div.stop {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.wrapper .top .scroll-area > div .end-obj {
  position: absolute;
  right: 0;
}
.wrapper .top .scroll-zakum {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0;
  height: 100%;
  white-space: nowrap;
  z-index: 25;
  -webkit-transform: translate3d(0, 0, 25px);
  transform: translate3d(0, 0, 25px);
}
.wrapper .top .scroll-zakum.active span {
  display: block;
  position: absolute;
  margin-left: 33.7777777778%;
  top: 0;
  left: 0;
  margin-top: 22.4%;
  width: 100%;
  height: 100%;
  padding-top: 0;
  -webkit-animation: scl-active 12.0s linear 0s both;
  animation: scl-active 12.0s linear 0s both;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.wrapper .top .scroll-zakum.active span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 15;
  width: 32.8444444444%;
  height: 0;
  padding-top: 26.0444444444%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/zakum/img_zakum_bottom.png) no-repeat 0 0;
  background-size: cover;
}
.wrapper .top .scroll-zakum.ios11 span {
  display: block;
  position: absolute;
  margin-left: 33.7777777778%;
  top: 0;
  left: 0;
  margin-top: 22.4%;
  width: 100%;
  height: 100%;
  padding-top: 0;
}
.wrapper .top .scroll-zakum.ios11 span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 15;
  width: 32.8444444444%;
  height: 0;
  padding-top: 26.0444444444%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/zakum/img_zakum_bottom.png) no-repeat 0 0;
  background-size: cover;
}
.wrapper .top .scroll-zakum.stop span {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.wrapper .top .scroll-area .area-01 {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/bg_01.jpg) no-repeat 0 0;
  background-size: contain;
}
.wrapper .top .scroll-area .area-01.active .friend-talk, .wrapper .top .scroll-area .area-01.ios11 .friend-talk {
  position: absolute;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/friend_talk.gif) no-repeat 0 0;
  background-size: cover;
  left: 60%;
  top: 0;
  margin-top: 40.0888888889%;
  width: 4.3555555556%;
  height: 0;
  padding-top: 6.5777777778%;
}
.wrapper .top .scroll-area .area-01.active .friend-talk::before, .wrapper .top .scroll-area .area-01.ios11 .friend-talk::before {
  content: '';
  position: absolute;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/img_talk_01.png) no-repeat 0 0;
  background-size: cover;
  width: 185.7142857143%;
  height: 0;
  padding-top: 77.5510204082%;
  top: -61.2244897959%;
  left: 20.4081632653%;
  opacity: 0;
  transition: all 0.1s linear 0s;
}
.wrapper .top .scroll-area .area-01.active .friend-talk::after, .wrapper .top .scroll-area .area-01.ios11 .friend-talk::after {
  content: '';
  position: absolute;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/img_talk_02.png) no-repeat 0 0;
  background-size: cover;
  width: 142.8571428571%;
  height: 0;
  padding-top: 77.5510204082%;
  top: -61.2244897959%;
  left: 0;
  margin-left: -204.0816326531%;
  opacity: 0;
  transition: all 0.1s linear 0s;
}
.wrapper .top .scroll-area .area-01.active .friend-talk.talk::before, .wrapper .top .scroll-area .area-01.ios11 .friend-talk.talk::before {
  opacity: 1;
}
.wrapper .top .scroll-area .area-01.active .friend-talk.talk::after, .wrapper .top .scroll-area .area-01.ios11 .friend-talk.talk::after {
  opacity: 1;
  transition-delay: 0.8s;
}
.wrapper .top .scroll-area .area-01.active .friend-talk.togo, .wrapper .top .scroll-area .area-01.ios11 .friend-talk.togo {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/friend_talk_walk.gif) no-repeat 0 0;
  background-size: cover;
  left: 100%;
  transition: left 4.95s linear 0.2s;
}
.wrapper .top .scroll-area .area-01.active .friend-group, .wrapper .top .scroll-area .area-01.ios11 .friend-group {
  position: absolute;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/friend_group.gif) no-repeat 0 0;
  background-size: cover;
  left: 63%;
  top: 0;
  margin-top: 39.8222222222%;
  width: 4.6222222222%;
  height: 0;
  padding-top: 7.1111111111%;
}
.wrapper .top .scroll-area .area-01.active .friend-group.togo, .wrapper .top .scroll-area .area-01.ios11 .friend-group.togo {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/friend_group_walk.gif) no-repeat 0 0;
  background-size: cover;
  left: 100%;
  transition: left 4.6s linear;
}
.wrapper .top .scroll-area .area-01.active .friend-01, .wrapper .top .scroll-area .area-01.ios11 .friend-01 {
  position: absolute;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/friend_01.gif) no-repeat 0 0;
  background-size: cover;
  left: 22.2222222222%;
  top: 0;
  margin-top: 40.2666666667%;
  width: 6.4888888889%;
  height: 0;
  padding-top: 6.4888888889%;
}
.wrapper .top .scroll-area .area-02 {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/bg_02.jpg) no-repeat 0 0;
  background-size: contain;
}
.wrapper .top .scroll-area .area-02.active .friend-yumi, .wrapper .top .scroll-area .area-02.ios11 .friend-yumi {
  position: absolute;
  left: 21.3333333333%;
  top: 0;
  margin-top: 44.4444444444%;
  width: 17.7777777778%;
  height: 0;
  padding-top: 6.3111111111%;
  z-index: 10;
  -webkit-animation: friend-yumi 1.2s linear forwards;
  animation: friend-yumi 1.2s linear forwards;
}
.wrapper .top .scroll-area .area-02.active .friend-yumi span, .wrapper .top .scroll-area .area-02.ios11 .friend-yumi span {
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/friend_yumi_up.gif) no-repeat 0 0;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.wrapper .top .scroll-area .area-02.active .friend-yumi.attack, .wrapper .top .scroll-area .area-02.ios11 .friend-yumi.attack {
  margin-top: 28.3555555556%;
}
.wrapper .top .scroll-area .area-02.active .friend-yumi.attack span, .wrapper .top .scroll-area .area-02.ios11 .friend-yumi.attack span {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/friend_yumi_attack.png) no-repeat 0 0;
  background-size: cover;
  -webkit-animation: repeat-animation 1.4s steps(14, end) infinite forwards;
  animation: repeat-animation 1.4s steps(14, end) infinite forwards;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"], .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] {
  position: absolute;
  width: 5.2444444444%;
  height: 0;
  padding-top: 2.6666666667%;
  z-index: 10;
  opacity: 0;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 5;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span::before, .wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span::after {
  content: '';
  position: absolute;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/img_damage.png) no-repeat 0 0;
  background-size: 100% 400%;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 5;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span::after {
  top: 50%;
  z-index: 1;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span:nth-child(2), .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span:nth-child(2) {
  top: 100%;
  z-index: 1;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-01::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-01::before {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-01::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-01::after {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-02::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-02::before {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-02::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-02::after {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-03::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-03::before {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-03::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-03::after {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-04::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-04::before {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-04::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-04::after {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-05::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-05::before {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-05::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-05::after {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-06::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-06::before {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-06::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-06::after {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-07::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-07::before {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-07::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-07::after {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-08::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-08::before {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-08::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-08::after {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-09::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-09::before {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-09::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-09::after {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-10::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-10::before {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-10::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-10::after {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-11::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-11::before {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-11::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-11::after {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-12::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-12::before {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-yumi-"] span.damage-12::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-yumi-"] span.damage-12::after {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active .damageskin-yumi-01, .wrapper .top .scroll-area .area-02.ios11 .damageskin-yumi-01 {
  left: 33.3333333333%;
  top: 0;
  margin-top: 31.1111111111%;
}
.wrapper .top .scroll-area .area-02.active .damageskin-yumi-02, .wrapper .top .scroll-area .area-02.ios11 .damageskin-yumi-02 {
  left: 37.7777777778%;
  top: 0;
  margin-top: 25.7777777778%;
}
.wrapper .top .scroll-area .area-02.active .friend-yumi.attack + .damageskin-yumi-01, .wrapper .top .scroll-area .area-02.ios11 .friend-yumi.attack + .damageskin-yumi-01 {
  opacity: 1;
  -webkit-animation: damage-zakum 1.4s linear infinite;
  animation: damage-zakum 1.4s linear infinite;
}
.wrapper .top .scroll-area .area-02.active .friend-yumi.attack + .damageskin-yumi-01 span:nth-child(1)::before, .wrapper .top .scroll-area .area-02.ios11 .friend-yumi.attack + .damageskin-yumi-01 span:nth-child(1)::before {
  -webkit-animation: damage-zakum-01 1.4s linear infinite;
  animation: damage-zakum-01 1.4s linear infinite;
}
.wrapper .top .scroll-area .area-02.active .friend-yumi.attack + .damageskin-yumi-01 span:nth-child(1)::after, .wrapper .top .scroll-area .area-02.ios11 .friend-yumi.attack + .damageskin-yumi-01 span:nth-child(1)::after {
  -webkit-animation: damage-zakum-02 1.4s linear infinite;
  animation: damage-zakum-02 1.4s linear infinite;
}
.wrapper .top .scroll-area .area-02.active .friend-yumi.attack + .damageskin-yumi-01 span:nth-child(2)::before, .wrapper .top .scroll-area .area-02.ios11 .friend-yumi.attack + .damageskin-yumi-01 span:nth-child(2)::before {
  -webkit-animation: damage-zakum-03 1.4s linear infinite;
  animation: damage-zakum-03 1.4s linear infinite;
}
.wrapper .top .scroll-area .area-02.active .friend-yumi.attack + .damageskin-yumi-01 span:nth-child(2)::after, .wrapper .top .scroll-area .area-02.ios11 .friend-yumi.attack + .damageskin-yumi-01 span:nth-child(2)::after {
  -webkit-animation: damage-zakum-04 1.4s linear infinite;
  animation: damage-zakum-04 1.4s linear infinite;
}
.wrapper .top .scroll-area .area-02.active .friend-yumi.attack ~ .damageskin-yumi-02, .wrapper .top .scroll-area .area-02.ios11 .friend-yumi.attack ~ .damageskin-yumi-02 {
  opacity: 1;
  -webkit-animation: damage-zakum 1.4s linear 0.3s infinite;
  animation: damage-zakum 1.4s linear 0.3s infinite;
}
.wrapper .top .scroll-area .area-02.active .friend-yumi.attack ~ .damageskin-yumi-02 span:nth-child(1)::before, .wrapper .top .scroll-area .area-02.ios11 .friend-yumi.attack ~ .damageskin-yumi-02 span:nth-child(1)::before {
  -webkit-animation: damage-zakum-01 1.4s linear 0.3s infinite both;
  animation: damage-zakum-01 1.4s linear 0.3s infinite both;
}
.wrapper .top .scroll-area .area-02.active .friend-yumi.attack ~ .damageskin-yumi-02 span:nth-child(1)::after, .wrapper .top .scroll-area .area-02.ios11 .friend-yumi.attack ~ .damageskin-yumi-02 span:nth-child(1)::after {
  -webkit-animation: damage-zakum-02 1.4s linear 0.3s infinite both;
  animation: damage-zakum-02 1.4s linear 0.3s infinite both;
}
.wrapper .top .scroll-area .area-02.active .friend-yumi.attack ~ .damageskin-yumi-02 span:nth-child(2)::before, .wrapper .top .scroll-area .area-02.ios11 .friend-yumi.attack ~ .damageskin-yumi-02 span:nth-child(2)::before {
  -webkit-animation: damage-zakum-03 1.4s linear 0.3s infinite both;
  animation: damage-zakum-03 1.4s linear 0.3s infinite both;
}
.wrapper .top .scroll-area .area-02.active .friend-yumi.attack ~ .damageskin-yumi-02 span:nth-child(2)::after, .wrapper .top .scroll-area .area-02.ios11 .friend-yumi.attack ~ .damageskin-yumi-02 span:nth-child(2)::after {
  -webkit-animation: damage-zakum-04 1.4s linear 0.3s infinite both;
  animation: damage-zakum-04 1.4s linear 0.3s infinite both;
}
.wrapper .top .scroll-area .area-02.active .friend-ken, .wrapper .top .scroll-area .area-02.ios11 .friend-ken {
  position: absolute;
  left: 60%;
  top: 0;
  margin-top: 27.5555555556%;
  width: 14.9333333333%;
  height: 0;
  padding-top: 10.7111111111%;
  z-index: 10;
}
.wrapper .top .scroll-area .area-02.active .friend-ken span, .wrapper .top .scroll-area .area-02.ios11 .friend-ken span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: repeat-animation 1s steps(10, end) infinite both, jump-03 2.8s cubic-bezier(0.22, 0.35, 0.65, 1) infinite;
  animation: repeat-animation 1s steps(10, end) infinite both, jump-03 2.8s cubic-bezier(0.22, 0.35, 0.65, 1) infinite;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/friend_ken_attack.png) no-repeat 0 0;
  background-size: cover;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"], .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] {
  position: absolute;
  width: 5.2444444444%;
  height: 0;
  padding-top: 2.6666666667%;
  z-index: 10;
  opacity: 0;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 5;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span::before, .wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span::after {
  content: '';
  position: absolute;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/img_damage.png) no-repeat 0 0;
  background-size: 100% 400%;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 5;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span::after {
  top: 50%;
  z-index: 1;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span:nth-child(2), .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span:nth-child(2) {
  top: 100%;
  z-index: 1;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-01::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-01::before {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-01::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-01::after {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-02::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-02::before {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-02::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-02::after {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-03::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-03::before {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-03::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-03::after {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-04::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-04::before {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-04::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-04::after {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-05::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-05::before {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-05::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-05::after {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-06::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-06::before {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-06::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-06::after {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-07::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-07::before {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-07::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-07::after {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-08::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-08::before {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-08::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-08::after {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-09::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-09::before {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-09::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-09::after {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-10::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-10::before {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-10::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-10::after {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-11::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-11::before {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-11::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-11::after {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-12::before, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-12::before {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active div[class^="damageskin-ken-"] span.damage-12::after, .wrapper .top .scroll-area .area-02.ios11 div[class^="damageskin-ken-"] span.damage-12::after {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active .damageskin-ken-01, .wrapper .top .scroll-area .area-02.ios11 .damageskin-ken-01 {
  left: 56.8888888889%;
  top: 0;
  margin-top: 25.7777777778%;
}
.wrapper .top .scroll-area .area-02.active .damageskin-ken-02, .wrapper .top .scroll-area .area-02.ios11 .damageskin-ken-02 {
  left: 58.6666666667%;
  top: 0;
  margin-top: 30.2222222222%;
}
.wrapper .top .scroll-area .area-02.active .friend-ken + .damageskin-ken-01, .wrapper .top .scroll-area .area-02.ios11 .friend-ken + .damageskin-ken-01 {
  opacity: 1;
  -webkit-animation: damage-zakum 1.4s linear infinite;
  animation: damage-zakum 1.4s linear infinite;
}
.wrapper .top .scroll-area .area-02.active .friend-ken + .damageskin-ken-01 span:nth-child(1)::before, .wrapper .top .scroll-area .area-02.ios11 .friend-ken + .damageskin-ken-01 span:nth-child(1)::before {
  -webkit-animation: damage-zakum-01 1.4s linear infinite;
  animation: damage-zakum-01 1.4s linear infinite;
}
.wrapper .top .scroll-area .area-02.active .friend-ken + .damageskin-ken-01 span:nth-child(1)::after, .wrapper .top .scroll-area .area-02.ios11 .friend-ken + .damageskin-ken-01 span:nth-child(1)::after {
  -webkit-animation: damage-zakum-02 1.4s linear infinite;
  animation: damage-zakum-02 1.4s linear infinite;
}
.wrapper .top .scroll-area .area-02.active .friend-ken + .damageskin-ken-01 span:nth-child(2)::before, .wrapper .top .scroll-area .area-02.ios11 .friend-ken + .damageskin-ken-01 span:nth-child(2)::before {
  -webkit-animation: damage-zakum-03 1.4s linear infinite;
  animation: damage-zakum-03 1.4s linear infinite;
}
.wrapper .top .scroll-area .area-02.active .friend-ken + .damageskin-ken-01 span:nth-child(2)::after, .wrapper .top .scroll-area .area-02.ios11 .friend-ken + .damageskin-ken-01 span:nth-child(2)::after {
  -webkit-animation: damage-zakum-04 1.4s linear infinite;
  animation: damage-zakum-04 1.4s linear infinite;
}
.wrapper .top .scroll-area .area-02.active .friend-ken ~ .damageskin-ken-02, .wrapper .top .scroll-area .area-02.ios11 .friend-ken ~ .damageskin-ken-02 {
  opacity: 1;
  -webkit-animation: damage-zakum 1.4s linear 0.5s infinite;
  animation: damage-zakum 1.4s linear 0.5s infinite;
}
.wrapper .top .scroll-area .area-02.active .friend-ken ~ .damageskin-ken-02 span:nth-child(1)::before, .wrapper .top .scroll-area .area-02.ios11 .friend-ken ~ .damageskin-ken-02 span:nth-child(1)::before {
  -webkit-animation: damage-zakum-01 1.4s linear 0.5s infinite both;
  animation: damage-zakum-01 1.4s linear 0.5s infinite both;
}
.wrapper .top .scroll-area .area-02.active .friend-ken ~ .damageskin-ken-02 span:nth-child(1)::after, .wrapper .top .scroll-area .area-02.ios11 .friend-ken ~ .damageskin-ken-02 span:nth-child(1)::after {
  -webkit-animation: damage-zakum-02 1.4s linear 0.5s infinite both;
  animation: damage-zakum-02 1.4s linear 0.5s infinite both;
}
.wrapper .top .scroll-area .area-02.active .friend-ken ~ .damageskin-ken-02 span:nth-child(2)::before, .wrapper .top .scroll-area .area-02.ios11 .friend-ken ~ .damageskin-ken-02 span:nth-child(2)::before {
  -webkit-animation: damage-zakum-03 1.4s linear 0.5s infinite both;
  animation: damage-zakum-03 1.4s linear 0.5s infinite both;
}
.wrapper .top .scroll-area .area-02.active .friend-ken ~ .damageskin-ken-02 span:nth-child(2)::after, .wrapper .top .scroll-area .area-02.ios11 .friend-ken ~ .damageskin-ken-02 span:nth-child(2)::after {
  -webkit-animation: damage-zakum-04 1.4s linear 0.5s infinite both;
  animation: damage-zakum-04 1.4s linear 0.5s infinite both;
}
.wrapper .top .scroll-area .area-02.active .zakum, .wrapper .top .scroll-area .area-02.ios11 .zakum {
  position: absolute;
  left: 33.7777777778%;
  top: 0;
  margin-top: 22.4%;
  width: 32.8444444444%;
  height: 0;
  padding-top: 26.0444444444%;
  z-index: 5;
}
.wrapper .top .scroll-area .area-02.active .zakum::before, .wrapper .top .scroll-area .area-02.ios11 .zakum::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/zakum/img_zakum.png) no-repeat 0 0;
  background-size: cover;
  -webkit-animation: zakum 0.2s ease-in-out alternate infinite 0.1s;
  animation: zakum 0.2s ease-in-out alternate infinite 0.1s;
}
.wrapper .top .scroll-area .area-02.active .zakum .hand-01::before, .wrapper .top .scroll-area .area-02.ios11 .zakum .hand-01::before {
  content: '';
  position: absolute;
  top: -4.329004329%;
  left: 14.0692640693%;
  z-index: 1;
  width: 27.380952381%;
  height: 0;
  padding-top: 34.3073593074%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/zakum/img_left_01.png) no-repeat 0 0;
  background-size: cover;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-animation: hand 0.5s ease-in-out alternate infinite;
  animation: hand 0.5s ease-in-out alternate infinite;
}
.wrapper .top .scroll-area .area-02.active .zakum .hand-01::after, .wrapper .top .scroll-area .area-02.ios11 .zakum .hand-01::after {
  content: '';
  position: absolute;
  top: -3.2467532468%;
  right: 19.4805194805%;
  z-index: 1;
  width: 28.0303030303%;
  height: 0;
  padding-top: 33.7662337662%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/zakum/img_right_01.png) no-repeat 0 0;
  background-size: cover;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-animation: hand 0.5s ease-in-out -0.15s alternate infinite;
  animation: hand 0.5s ease-in-out -0.15s alternate infinite;
}
.wrapper .top .scroll-area .area-02.active .zakum .hand-02::before, .wrapper .top .scroll-area .area-02.ios11 .zakum .hand-02::before {
  content: '';
  position: absolute;
  top: 9.7402597403%;
  left: 4.329004329%;
  z-index: 2;
  width: 35.2813852814%;
  height: 0;
  padding-top: 30.0865800866%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/zakum/img_left_02.png) no-repeat 0 0;
  background-size: cover;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-animation: hand 0.5s ease-in-out -0.3s alternate infinite, hand-died 0.3s ease 4.8s forwards;
  animation: hand 0.5s ease-in-out -0.3s alternate infinite, hand-died 0.3s ease 4.8s forwards;
}
.wrapper .top .scroll-area .area-02.active .zakum .hand-02::after, .wrapper .top .scroll-area .area-02.ios11 .zakum .hand-02::after {
  content: '';
  position: absolute;
  top: 8.658008658%;
  right: 10.8225108225%;
  z-index: 2;
  width: 36.6883116883%;
  height: 0;
  padding-top: 32.2510822511%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/zakum/img_right_02.png) no-repeat 0 0;
  background-size: cover;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-animation: hand 0.5s ease-in-out -0.05s alternate infinite;
  animation: hand 0.5s ease-in-out -0.05s alternate infinite;
}
.wrapper .top .scroll-area .area-02.active .zakum .hand-03::before, .wrapper .top .scroll-area .area-02.ios11 .zakum .hand-03::before {
  content: '';
  position: absolute;
  top: 34.632034632%;
  left: 0%;
  z-index: 2;
  width: 40.8008658009%;
  height: 0;
  padding-top: 21.3203463203%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/zakum/img_left_03.png) no-repeat 0 0;
  background-size: cover;
  -webkit-transform-origin: right center;
  transform-origin: right center;
  -webkit-animation: hand 0.5s ease-in-out -0.2s alternate infinite;
  animation: hand 0.5s ease-in-out -0.2s alternate infinite;
}
.wrapper .top .scroll-area .area-02.active .zakum .hand-03::after, .wrapper .top .scroll-area .area-02.ios11 .zakum .hand-03::after {
  content: '';
  position: absolute;
  top: 31.3852813853%;
  right: 3.2467532468%;
  z-index: 2;
  width: 40.4761904762%;
  height: 0;
  padding-top: 25.4329004329%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/zakum/img_right_03.png) no-repeat 0 0;
  background-size: cover;
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-animation: hand 0.5s ease-in-out -0.35s alternate infinite, hand-died 0.3s ease 8.8s forwards;
  animation: hand 0.5s ease-in-out -0.35s alternate infinite, hand-died 0.3s ease 8.8s forwards;
}
.wrapper .top .scroll-area .area-02.active .zakum .brokenhand-01, .wrapper .top .scroll-area .area-02.ios11 .zakum .brokenhand-01 {
  position: absolute;
  top: 51.9480519481%;
  left: -2.1645021645%;
  z-index: 2;
  width: 39.1774891775%;
  height: 0;
  padding-top: 20.7792207792%;
}
.wrapper .top .scroll-area .area-02.active .zakum .brokenhand-01 span, .wrapper .top .scroll-area .area-02.ios11 .zakum .brokenhand-01 span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/zakum/img_left_04.png) no-repeat 0 0;
  background-size: cover;
  -webkit-transform-origin: right top;
  transform-origin: right top;
  -webkit-animation: hand 0.5s ease-in-out -0.1s alternate infinite;
  animation: hand 0.5s ease-in-out -0.1s alternate infinite;
}
.wrapper .top .scroll-area .area-02.active .zakum .brokenhand-01.died span, .wrapper .top .scroll-area .area-02.ios11 .zakum .brokenhand-01.died span {
  -webkit-animation: hand-died 0.5s ease forwards;
  animation: hand-died 0.5s ease forwards;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"], .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] {
  position: absolute;
  width: 15.9675236806%;
  height: 0;
  padding-top: 8.1190798376%;
  z-index: 10;
  opacity: 0;
  left: -2.7063599459%;
  top: 0;
  margin-top: 47.3612990528%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 5;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span::before, .wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span::after {
  content: '';
  position: absolute;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/img_damage.png) no-repeat 0 0;
  background-size: 100% 400%;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 5;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span::after {
  top: 50%;
  z-index: 1;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span:nth-child(2), .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span:nth-child(2) {
  top: 100%;
  z-index: 1;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-01::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-01::before {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-01::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-01::after {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-02::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-02::before {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-02::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-02::after {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-03::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-03::before {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-03::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-03::after {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-04::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-04::before {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-04::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-04::after {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-05::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-05::before {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-05::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-05::after {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-06::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-06::before {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-06::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-06::after {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-07::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-07::before {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-07::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-07::after {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-08::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-08::before {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-08::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-08::after {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-09::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-09::before {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-09::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-09::after {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-10::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-10::before {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-10::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-10::after {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-11::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-11::before {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-11::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-11::after {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-12::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-12::before {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"] span.damage-12::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"] span.damage-12::after {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active .zakum div.damageskin-left-02, .wrapper .top .scroll-area .area-02.ios11 .zakum div.damageskin-left-02 {
  left: 8.1190798376%;
  margin-top: 41.948579161%;
}
.wrapper .top .scroll-area .area-02.active .zakum div.damageskin-left-03, .wrapper .top .scroll-area .area-02.ios11 .zakum div.damageskin-left-03 {
  left: 2.7063599459%;
  margin-top: 54.1271989175%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"].attack, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"].attack {
  opacity: 1;
  -webkit-animation: damage-zakum 1.2s linear forwards;
  animation: damage-zakum 1.2s linear forwards;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"].attack span:nth-child(1)::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"].attack span:nth-child(1)::before {
  -webkit-animation: damage-zakum-01 1.2s linear forwards;
  animation: damage-zakum-01 1.2s linear forwards;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"].attack span:nth-child(1)::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"].attack span:nth-child(1)::after {
  -webkit-animation: damage-zakum-02 1.2s linear forwards;
  animation: damage-zakum-02 1.2s linear forwards;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"].attack span:nth-child(2)::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"].attack span:nth-child(2)::before {
  -webkit-animation: damage-zakum-03 1.2s linear forwards;
  animation: damage-zakum-03 1.2s linear forwards;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-left-"].attack span:nth-child(2)::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-left-"].attack span:nth-child(2)::after {
  -webkit-animation: damage-zakum-04 1.2s linear forwards;
  animation: damage-zakum-04 1.2s linear forwards;
}
.wrapper .top .scroll-area .area-02.active .zakum .brokenhand-02, .wrapper .top .scroll-area .area-02.ios11 .zakum .brokenhand-02 {
  position: absolute;
  top: 56.2770562771%;
  right: 5.4112554113%;
  z-index: 2;
  width: 39.2857142857%;
  height: 0;
  padding-top: 19.9134199134%;
}
.wrapper .top .scroll-area .area-02.active .zakum .brokenhand-02 span, .wrapper .top .scroll-area .area-02.ios11 .zakum .brokenhand-02 span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/zakum/img_right_04.png) no-repeat 0 0;
  background-size: cover;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  -webkit-animation: hand 0.5s ease-in-out -0.25s alternate infinite;
  animation: hand 0.5s ease-in-out -0.25s alternate infinite;
}
.wrapper .top .scroll-area .area-02.active .zakum .brokenhand-02.died span, .wrapper .top .scroll-area .area-02.ios11 .zakum .brokenhand-02.died span {
  -webkit-animation: hand-died 0.5s ease forwards;
  animation: hand-died 0.5s ease forwards;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"], .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] {
  position: absolute;
  width: 15.9675236806%;
  height: 0;
  padding-top: 8.1190798376%;
  z-index: 10;
  opacity: 0;
  right: 9.4722598106%;
  top: 0;
  margin-top: 54.1271989175%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 5;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span::before, .wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span::after {
  content: '';
  position: absolute;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/img_damage.png) no-repeat 0 0;
  background-size: 100% 400%;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 5;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span::after {
  top: 50%;
  z-index: 1;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span:nth-child(2), .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span:nth-child(2) {
  top: 100%;
  z-index: 1;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-01::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-01::before {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-01::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-01::after {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-02::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-02::before {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-02::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-02::after {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-03::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-03::before {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-03::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-03::after {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-04::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-04::before {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-04::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-04::after {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-05::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-05::before {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-05::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-05::after {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-06::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-06::before {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-06::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-06::after {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-07::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-07::before {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-07::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-07::after {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-08::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-08::before {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-08::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-08::after {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-09::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-09::before {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-09::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-09::after {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-10::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-10::before {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-10::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-10::after {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-11::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-11::before {
  background-position: 0 33.33%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-11::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-11::after {
  background-position: 0 0;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-12::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-12::before {
  background-position: 0 100%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"] span.damage-12::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"] span.damage-12::after {
  background-position: 0 66.66%;
}
.wrapper .top .scroll-area .area-02.active .zakum div.damageskin-right-02, .wrapper .top .scroll-area .area-02.ios11 .zakum div.damageskin-right-02 {
  right: 18.9445196211%;
  margin-top: 47.3612990528%;
}
.wrapper .top .scroll-area .area-02.active .zakum div.damageskin-right-03, .wrapper .top .scroll-area .area-02.ios11 .zakum div.damageskin-right-03 {
  right: 8.1190798376%;
  margin-top: 52.7740189445%;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"].attack, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"].attack {
  opacity: 1;
  -webkit-animation: damage-zakum 1.2s linear forwards;
  animation: damage-zakum 1.2s linear forwards;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"].attack span:nth-child(1)::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"].attack span:nth-child(1)::before {
  -webkit-animation: damage-zakum-01 1.2s linear forwards;
  animation: damage-zakum-01 1.2s linear forwards;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"].attack span:nth-child(1)::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"].attack span:nth-child(1)::after {
  -webkit-animation: damage-zakum-02 1.2s linear forwards;
  animation: damage-zakum-02 1.2s linear forwards;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"].attack span:nth-child(2)::before, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"].attack span:nth-child(2)::before {
  -webkit-animation: damage-zakum-03 1.2s linear forwards;
  animation: damage-zakum-03 1.2s linear forwards;
}
.wrapper .top .scroll-area .area-02.active .zakum div[class^="damageskin-right-"].attack span:nth-child(2)::after, .wrapper .top .scroll-area .area-02.ios11 .zakum div[class^="damageskin-right-"].attack span:nth-child(2)::after {
  -webkit-animation: damage-zakum-04 1.2s linear forwards;
  animation: damage-zakum-04 1.2s linear forwards;
}
.wrapper .top .scroll-area .area-03 {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/bg_03.jpg) no-repeat 0 0;
  background-size: contain;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-01 {
  position: absolute;
  left: 22.2222222222%;
  top: 0;
  margin-top: 43.1111111111%;
  width: 5.1111111111%;
  height: 0;
  padding-top: 3.7777777778%;
  -webkit-animation: monster 70.0s linear forwards;
  animation: monster 70.0s linear forwards;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-01::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_04_walk.gif) no-repeat 0 0;
  background-size: cover;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-01::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_04_died.png) no-repeat 0 0;
  background-size: cover;
  opacity: 0;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-01.died {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-01.died::before {
  opacity: 0;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-01.died::after {
  opacity: 1;
  -webkit-animation: repeat-animation 1s steps(7, start) 1 forwards;
  animation: repeat-animation 1s steps(7, start) 1 forwards;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-01 span {
  margin-top: -52.1739130435%;
  width: 102.6086956522%;
  height: 0;
  padding-top: 52.1739130435%;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-02 {
  position: absolute;
  left: 33.3333333333%;
  top: 0;
  margin-top: 43.1111111111%;
  width: 5.7777777778%;
  height: 0;
  padding-top: 4%;
  -webkit-animation: monster 65.0s linear forwards;
  animation: monster 65.0s linear forwards;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-02::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_01_walk.gif) no-repeat 0 0;
  background-size: cover;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-02::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_01_died.png) no-repeat 0 0;
  background-size: cover;
  opacity: 0;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-02.died {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-02.died::before {
  opacity: 0;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-02.died::after {
  opacity: 1;
  -webkit-animation: repeat-animation 1s steps(9, start) 1 forwards;
  animation: repeat-animation 1s steps(9, start) 1 forwards;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-02 span {
  margin-top: -46.1538461538%;
  width: 90.76923076919999%;
  height: 0;
  padding-top: 46.1538461538%;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-03 {
  position: absolute;
  left: 53.3333333333%;
  top: 0;
  margin-top: 42.3111111111%;
  width: 10.2222222222%;
  height: 0;
  padding-top: 5.1111111111%;
  -webkit-animation: monster 65.0s linear forwards;
  animation: monster 65.0s linear forwards;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-03::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_02_walk.gif) no-repeat 0 0;
  background-size: cover;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-03::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_02_died.png) no-repeat 0 0;
  background-size: cover;
  opacity: 0;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-03.died {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-03.died::before {
  opacity: 0;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-03.died::after {
  opacity: 1;
  -webkit-animation: repeat-animation 1s steps(9, start) 1 forwards;
  animation: repeat-animation 1s steps(9, start) 1 forwards;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-03 span {
  margin-top: -26.0869565217%;
  width: 51.3043478261%;
  height: 0;
  padding-top: 26.0869565217%;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-04 {
  position: absolute;
  left: 62.2222222222%;
  top: 0;
  margin-top: 43.1111111111%;
  width: 5.1111111111%;
  height: 0;
  padding-top: 3.7777777778%;
  -webkit-animation: monster 70.0s linear forwards;
  animation: monster 70.0s linear forwards;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-04::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_03_walk.gif) no-repeat 0 0;
  background-size: cover;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-04::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_03_died.png) no-repeat 0 0;
  background-size: cover;
  opacity: 0;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-04.died {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-04.died::before {
  opacity: 0;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-04.died::after {
  opacity: 1;
  -webkit-animation: repeat-animation 1s steps(7, start) 1 forwards;
  animation: repeat-animation 1s steps(7, start) 1 forwards;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-04 span {
  margin-top: -52.1739130435%;
  width: 102.6086956522%;
  height: 0;
  padding-top: 52.1739130435%;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-05 {
  position: absolute;
  left: 80%;
  top: 0;
  margin-top: 43.1111111111%;
  width: 5.7777777778%;
  height: 0;
  padding-top: 4%;
  -webkit-animation: monster 65.0s linear forwards;
  animation: monster 65.0s linear forwards;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-05::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_01_walk.gif) no-repeat 0 0;
  background-size: cover;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-05::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_01_died.png) no-repeat 0 0;
  background-size: cover;
  opacity: 0;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-05.died {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-05.died::before {
  opacity: 0;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-05.died::after {
  opacity: 1;
  -webkit-animation: repeat-animation 1s steps(9, start) 1 forwards;
  animation: repeat-animation 1s steps(9, start) 1 forwards;
}
.wrapper .top .scroll-area .area-03.ios11 .monster-05 span {
  margin-top: -46.1538461538%;
  width: 90.76923076919999%;
  height: 0;
  padding-top: 46.1538461538%;
}
.wrapper .top .scroll-area .area-03.active .monster-01 {
  position: absolute;
  left: 22.2222222222%;
  top: 0;
  margin-top: 43.1111111111%;
  width: 5.1111111111%;
  height: 0;
  padding-top: 3.7777777778%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_04_walk.gif) no-repeat 0 0;
  background-size: cover;
  -webkit-animation: monster 70s linear forwards, repeat-animation 1s steps(7, start) 1 forwards;
  animation: monster 70s linear forwards, repeat-animation 1s steps(7, start) 1 forwards;
  -webkit-animation-play-state: running, paused;
  animation-play-state: running, paused;
}
.wrapper .top .scroll-area .area-03.active .monster-01.died {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_04_died.png) no-repeat 0 0;
  background-size: cover;
  -webkit-animation-play-state: paused, running;
  animation-play-state: paused, running;
}
.wrapper .top .scroll-area .area-03.active .monster-01 span {
  margin-top: -52.1739130435%;
  width: 102.6086956522%;
  height: 0;
  padding-top: 52.1739130435%;
}
.wrapper .top .scroll-area .area-03.active .monster-02 {
  position: absolute;
  left: 33.3333333333%;
  top: 0;
  margin-top: 43.1111111111%;
  width: 5.7777777778%;
  height: 0;
  padding-top: 4%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_01_walk.gif) no-repeat 0 0;
  background-size: cover;
  -webkit-animation: monster 65s linear forwards, repeat-animation 1s steps(9, start) 1 forwards;
  animation: monster 65s linear forwards, repeat-animation 1s steps(9, start) 1 forwards;
  -webkit-animation-play-state: running, paused;
  animation-play-state: running, paused;
}
.wrapper .top .scroll-area .area-03.active .monster-02.died {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_01_died.png) no-repeat 0 0;
  background-size: cover;
  -webkit-animation-play-state: paused, running;
  animation-play-state: paused, running;
}
.wrapper .top .scroll-area .area-03.active .monster-02 span {
  margin-top: -46.1538461538%;
  width: 90.76923076919999%;
  height: 0;
  padding-top: 46.1538461538%;
}
.wrapper .top .scroll-area .area-03.active .monster-03 {
  position: absolute;
  left: 53.3333333333%;
  top: 0;
  margin-top: 42.3111111111%;
  width: 10.2222222222%;
  height: 0;
  padding-top: 5.1111111111%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_02_walk.gif) no-repeat 0 0;
  background-size: cover;
  -webkit-animation: monster 65s linear forwards, repeat-animation 1s steps(9, start) 1 forwards;
  animation: monster 65s linear forwards, repeat-animation 1s steps(9, start) 1 forwards;
  -webkit-animation-play-state: running, paused;
  animation-play-state: running, paused;
}
.wrapper .top .scroll-area .area-03.active .monster-03.died {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_02_died.png) no-repeat 0 0;
  background-size: cover;
  -webkit-animation-play-state: paused, running;
  animation-play-state: paused, running;
}
.wrapper .top .scroll-area .area-03.active .monster-03 span {
  margin-top: -26.0869565217%;
  width: 51.3043478261%;
  height: 0;
  padding-top: 26.0869565217%;
}
.wrapper .top .scroll-area .area-03.active .monster-04 {
  position: absolute;
  left: 62.2222222222%;
  top: 0;
  margin-top: 43.1111111111%;
  width: 5.1111111111%;
  height: 0;
  padding-top: 3.7777777778%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_03_walk.gif) no-repeat 0 0;
  background-size: cover;
  -webkit-animation: monster 70s linear forwards, repeat-animation 1s steps(7, start) 1 forwards;
  animation: monster 70s linear forwards, repeat-animation 1s steps(7, start) 1 forwards;
  -webkit-animation-play-state: running, paused;
  animation-play-state: running, paused;
}
.wrapper .top .scroll-area .area-03.active .monster-04.died {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_03_died.png) no-repeat 0 0;
  background-size: cover;
  -webkit-animation-play-state: paused, running;
  animation-play-state: paused, running;
}
.wrapper .top .scroll-area .area-03.active .monster-04 span {
  margin-top: -52.1739130435%;
  width: 102.6086956522%;
  height: 0;
  padding-top: 52.1739130435%;
}
.wrapper .top .scroll-area .area-03.active .monster-05 {
  position: absolute;
  left: 80%;
  top: 0;
  margin-top: 43.1111111111%;
  width: 5.7777777778%;
  height: 0;
  padding-top: 4%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_01_walk.gif) no-repeat 0 0;
  background-size: cover;
  -webkit-animation: monster 65s linear forwards, repeat-animation 1s steps(9, start) 1 forwards;
  animation: monster 65s linear forwards, repeat-animation 1s steps(9, start) 1 forwards;
  -webkit-animation-play-state: running, paused;
  animation-play-state: running, paused;
}
.wrapper .top .scroll-area .area-03.active .monster-05.died {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_01_died.png) no-repeat 0 0;
  background-size: cover;
  -webkit-animation-play-state: paused, running;
  animation-play-state: paused, running;
}
.wrapper .top .scroll-area .area-03.active .monster-05 span {
  margin-top: -46.1538461538%;
  width: 90.76923076919999%;
  height: 0;
  padding-top: 46.1538461538%;
}
.wrapper .top .scroll-area .area-03.active .monster-06 {
  position: absolute;
  left: 40%;
  top: 0;
  margin-top: 33.4222222222%;
  width: 5.1111111111%;
  height: 0;
  padding-top: 3.7777777778%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_03_walk.gif) no-repeat 0 0;
  background-size: cover;
  -webkit-animation: monster 70s linear forwards, repeat-animation 1s steps(7, start) 1 forwards;
  animation: monster 70s linear forwards, repeat-animation 1s steps(7, start) 1 forwards;
  -webkit-animation-play-state: running, paused;
  animation-play-state: running, paused;
}
.wrapper .top .scroll-area .area-03.active .monster-06.died {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_03_died.png) no-repeat 0 0;
  background-size: cover;
  -webkit-animation-play-state: paused, running;
  animation-play-state: paused, running;
}
.wrapper .top .scroll-area .area-03.active .monster-06 span {
  margin-top: -52.1739130435%;
  width: 102.6086956522%;
  height: 0;
  padding-top: 52.1739130435%;
}
.wrapper .top .scroll-area .area-03.active .monster-07 {
  position: absolute;
  left: 73.3333333333%;
  top: 0;
  margin-top: 33.4222222222%;
  width: 5.7777777778%;
  height: 0;
  padding-top: 4%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_01_walk.gif) no-repeat 0 0;
  background-size: cover;
  -webkit-animation: monster 70s linear forwards, repeat-animation 1s steps(9, start) 1 forwards;
  animation: monster 70s linear forwards, repeat-animation 1s steps(9, start) 1 forwards;
  -webkit-animation-play-state: running, paused;
  animation-play-state: running, paused;
}
.wrapper .top .scroll-area .area-03.active .monster-07.died {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_01_died.png) no-repeat 0 0;
  background-size: cover;
  -webkit-animation-play-state: paused, running;
  animation-play-state: paused, running;
}
.wrapper .top .scroll-area .area-03.active .monster-07 span {
  margin-top: -46.1538461538%;
  width: 90.76923076919999%;
  height: 0;
  padding-top: 46.1538461538%;
}
.wrapper .top .scroll-area .area-03.active .monster-08 {
  position: absolute;
  left: 91.5555555556%;
  top: 0;
  margin-top: 30.7555555556%;
  width: 5.1111111111%;
  height: 0;
  padding-top: 3.7777777778%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_04_walk.gif) no-repeat 0 0;
  background-size: cover;
  -webkit-animation: monster 65s linear forwards, repeat-animation 1s steps(7, start) 1 forwards;
  animation: monster 65s linear forwards, repeat-animation 1s steps(7, start) 1 forwards;
  -webkit-animation-play-state: running, paused;
  animation-play-state: running, paused;
}
.wrapper .top .scroll-area .area-03.active .monster-08.died {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/monster_04_died.png) no-repeat 0 0;
  background-size: cover;
  -webkit-animation-play-state: paused, running;
  animation-play-state: paused, running;
}
.wrapper .top .scroll-area .area-03.active .monster-08 span {
  margin-top: -52.1739130435%;
  width: 102.6086956522%;
  height: 0;
  padding-top: 52.1739130435%;
}
.wrapper .top .scroll-area .area-03.active div[class^="monster-"] span, .wrapper .top .scroll-area .area-03.ios11 div[class^="monster-"] span {
  content: '';
  position: absolute;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/img_damage.png) no-repeat 0 0;
  background-size: 100% 400%;
  opacity: 0;
}
.wrapper .top .scroll-area .area-03.active div[class^="monster-"].stop, .wrapper .top .scroll-area .area-03.ios11 div[class^="monster-"].stop {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.wrapper .top .scroll-area .area-03.active div[class^="monster-"].damage-01 span, .wrapper .top .scroll-area .area-03.ios11 div[class^="monster-"].damage-01 span {
  top: 0;
  left: 0%;
  opacity: 1;
  background-position: 0 0;
  -webkit-animation: damage_skin 0.5s cubic-bezier(0, 0, 0.2, 1) both, damage_skin_left 0.5s linear both;
  animation: damage_skin 0.5s cubic-bezier(0, 0, 0.2, 1) both, damage_skin_left 0.5s linear both;
}
.wrapper .top .scroll-area .area-03.active div[class^="monster-"].damage-02 span, .wrapper .top .scroll-area .area-03.ios11 div[class^="monster-"].damage-02 span {
  top: 0;
  left: 10%;
  opacity: 1;
  background-position: 0 33.33%;
  -webkit-animation: damage_skin 0.5s cubic-bezier(0, 0, 0.2, 1) both, damage_skin_left 0.5s linear both;
  animation: damage_skin 0.5s cubic-bezier(0, 0, 0.2, 1) both, damage_skin_left 0.5s linear both;
}
.wrapper .top .scroll-area .area-03.active div[class^="monster-"].damage-03 span, .wrapper .top .scroll-area .area-03.ios11 div[class^="monster-"].damage-03 span {
  top: 0;
  left: -10%;
  opacity: 1;
  background-position: 0 66.66%;
  -webkit-animation: damage_skin 0.5s cubic-bezier(0, 0, 0.2, 1) both, damage_skin_right 0.5s linear both;
  animation: damage_skin 0.5s cubic-bezier(0, 0, 0.2, 1) both, damage_skin_right 0.5s linear both;
}
.wrapper .top .scroll-area .area-03.active div[class^="monster-"].damage-04 span, .wrapper .top .scroll-area .area-03.ios11 div[class^="monster-"].damage-04 span {
  top: 0;
  left: 0%;
  opacity: 1;
  background-position: 0 100%;
  -webkit-animation: damage_skin 0.5s cubic-bezier(0, 0, 0.2, 1) both, damage_skin_right 0.5s linear both;
  animation: damage_skin 0.5s cubic-bezier(0, 0, 0.2, 1) both, damage_skin_right 0.5s linear both;
}
.wrapper .top .char {
  position: absolute;
  pointer-events: none;
  z-index: 20;
  height: 0;
  top: 0;
  left: 0;
  -webkit-transform: translate3d(0, 0, 20px);
  transform: translate3d(0, 0, 20px);
}
.wrapper .top .char span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.wrapper .top .char span::before {
  content: '';
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/pc_01_walk.gif) no-repeat 0 0;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.wrapper .top .char span::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: none;
  animation: none;
}
.wrapper .top .char.stop span::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/pc_01.gif) no-repeat 0 0;
  background-size: cover;
}
.wrapper .top .char.jump span {
  transition: none;
  -webkit-animation: jump 0.6s cubic-bezier(0.22, 0.35, 0.65, 1);
  animation: jump 0.6s cubic-bezier(0.22, 0.35, 0.65, 1);
}
.wrapper .top .char.jump span::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/pc_01_jump.gif) no-repeat 0 0;
  background-size: cover;
}
.wrapper .top .char.attack span::before {
  background: none;
}
.wrapper .top .char.attack span::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/pc_01_attack.png) no-repeat 0 0;
  background-size: 100% 400%;
  transition: none;
  -webkit-animation: repeat-animation 0.2s steps(3, end) 1 forwards;
  animation: repeat-animation 0.2s steps(3, end) 1 forwards;
}
.wrapper .top .char.ready {
  -webkit-transform: translate3D(-100%, 0px, 20px);
  transform: translate3D(-100%, 0px, 20px);
}
.wrapper .top .char.ready.go {
  -webkit-transform: translate3d(0, 0, 20px);
  transform: translate3d(0, 0, 20px);
  transition: transform 1.4s linear;
}
.wrapper .top .pet {
  position: absolute;
  pointer-events: none;
  z-index: 18;
  -webkit-transform: translate3d(0, 0, 18px);
  transform: translate3d(0, 0, 18px);
  height: 0;
  top: 0;
  left: 0;
}
.wrapper .top .pet span {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/pet_01_walk.gif) no-repeat 0 0;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation: pet 2.5s cubic-bezier(0.5, 0, 0.5, 1) -1s infinite;
  animation: pet 2.5s cubic-bezier(0.5, 0, 0.5, 1) -1s infinite;
}
.wrapper .top .pet.stop span {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.wrapper .top .pet.ready {
  -webkit-transform: translate3D(-300%, 0px, 10px);
  transform: translate3D(-300%, 0px, 10px);
}
.wrapper .top .pet.ready.go {
  -webkit-transform: none;
  transform: none;
  transition: transform 1.4s linear;
}
.wrapper .top .btn-jump {
  -webkit-transform: translate3d(0px, 0px, 30px);
  transform: translate3d(0px, 0px, 30px);
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/btn_jump.png) no-repeat 0 0;
  background-size: cover;
  width: 14.9333333333%;
  height: 0;
  padding-top: 14.9333333333%;
  position: absolute;
  right: 4%;
  bottom: 0;
  margin-bottom: 38%;
  z-index: 30;
  -webkit-transform: translate3D(0, 0, 30px);
  transform: translate3D(0, 0, 30px);
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.wrapper .top .btn-attack {
  -webkit-transform: translate3d(0px, 0px, 30px);
  transform: translate3d(0px, 0px, 30px);
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/btn_attack.png) no-repeat 0 0;
  background-size: cover;
  width: 17.0666666667%;
  height: 0;
  padding-top: 17.0666666667%;
  position: absolute;
  right: 16%;
  bottom: 0;
  margin-bottom: 23.3333333333%;
  z-index: 30;
  -webkit-transform: translate3D(0, 0, 30px);
  transform: translate3D(0, 0, 30px);
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.wrapper .top .fade-screen {
  position: absolute;
  z-index: 25;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3D(-50%, -50%, 25px);
  transform: translate3D(-50%, -50%, 25px);
  height: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 #1a1712 inset;
  transition: box-shadow 1s ease-in-out;
}
.wrapper .top .fade-screen.on {
  box-shadow: 0 0 0 100vh #1a1712 inset;
}
.wrapper .top .fade-screen.depth {
  z-index: 35;
  -webkit-transform: translate3D(-50%, -50%, 35px);
  transform: translate3D(-50%, -50%, 35px);
}
.wrapper .top .bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  padding-top: 20%;
  background: #1a1712;
  -webkit-transform: translate3d(0px, 0px, 40px);
  transform: translate3d(0px, 0px, 40px);
  z-index: 40;
}
.wrapper .top .bottom .btn-modal-youtube {
  width: 25.0666666667%;
  height: 0;
  padding-top: 13.8666666667%;
  position: absolute;
  top: 0;
  margin-top: 3.3333333333%;
  left: 0;
  margin-left: 5.3333333333%;
}
.wrapper .top .bottom .btn-modal-youtube a {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/btn_pv.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .top .bottom .store dt {
  position: absolute;
  top: 0;
  margin-top: 2.4%;
  right: 0;
  margin-right: 24%;
  width: 25.6%;
  height: 0;
  padding-top: 3.7333333333%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/sttl_store.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .top .bottom .store dt span {
  display: none;
}
.wrapper .top .bottom .store .btn-appstore {
  position: absolute;
  top: 0;
  margin-top: 8%;
  right: 0;
  margin-right: 38.6666666667%;
  width: 25.4666666667%;
  height: 0;
  padding-top: 9.3333333333%;
}
.wrapper .top .bottom .store .btn-appstore a {
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/btn_appstore_download.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .top .bottom .store .btn-appstore a span {
  display: none;
}
.wrapper .top .bottom .store .btn-googleplay {
  position: absolute;
  top: 0;
  margin-top: 8%;
  right: 0;
  margin-right: 5.0666666667%;
  width: 31.6%;
  height: 0;
  padding-top: 9.3333333333%;
}
.wrapper .top .bottom .store .btn-googleplay a {
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/btn_googleplay.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .top .bottom .store .btn-googleplay a span {
  display: none;
}
.wrapper .top .campaign-area {
  position: relative;
  z-index: 1;
  height: 0;
  overflow: hidden;
}

@keyframes pc-char {
  0% {
    left: -20%;
  }
  100% {
    left: 110%;
  }
}
@keyframes pet {
  0% {
    -webkit-transform: translate3D(-50%, 0%, 0) scale(1, 0.9) skewX(-5deg);
    transform: translate3D(-50%, 0%, 0) scale(1, 0.9) skewX(-5deg);
    animation-timing-function: ease-in;
  }
  5% {
    -webkit-transform: translate3D(-50%, 0%, 0) scale(1, 1) skewX(0deg);
    transform: translate3D(-50%, 0%, 0) scale(1, 1) skewX(0deg);
    animation-timing-function: linear;
  }
  8% {
    -webkit-transform: translate3D(-10%, -20%, 0) scale(1, 1) skewX(0deg);
    transform: translate3D(-10%, -20%, 0) scale(1, 1) skewX(0deg);
    animation-timing-function: ease-in-out;
  }
  10% {
    -webkit-transform: translate3D(30%, -30%, 0) scale(1, 1) skewX(0deg);
    transform: translate3D(30%, -30%, 0) scale(1, 1) skewX(0deg);
    animation-timing-function: ease-in-out;
  }
  17% {
    -webkit-transform: translate3D(50%, 0%, 0) scale(1, 0.9) skewX(-5deg);
    transform: translate3D(50%, 0%, 0) scale(1, 0.9) skewX(-5deg);
    animation-timing-function: ease-out;
  }
  22% {
    -webkit-transform: translate3D(50%, 0%, 0) scale(1, 1) skewX(0deg);
    transform: translate3D(50%, 0%, 0) scale(1, 1) skewX(0deg);
    animation-timing-function: linear;
  }
  100% {
    -webkit-transform: translate3D(-50%, 0%, 0) scale(1, 1) skewX(0deg);
    transform: translate3D(-50%, 0%, 0) scale(1, 1) skewX(0deg);
    animation-timing-function: linear;
  }
}
@keyframes scl-active {
  0% {
    -webkit-transform: translate3d(0, 0, 10px);
    transform: translate3d(0, 0, 10px);
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 10px);
    transform: translate3d(-100%, 0, 10px);
  }
}
@keyframes jump {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  55% {
    -webkit-transform: translateY(-130%);
    transform: translateY(-130%);
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes jump-02 {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  60% {
    -webkit-transform: translateY(-130%);
    transform: translateY(-130%);
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes jump-03 {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  15% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    animation-timing-function: ease-out;
  }
  30% {
    -webkit-transform: translateY(-80%);
    transform: translateY(-80%);
    animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}
@keyframes monster {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-1000%);
    transform: translateX(-1000%);
  }
}
@keyframes repeat-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}
@keyframes zakum {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-0.4%);
    transform: translateY(-0.4%);
  }
}
@keyframes hand {
  0% {
    -webkit-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg);
  }
  100% {
    -webkit-transform: rotateZ(10deg);
    transform: rotateZ(10deg);
  }
}
@keyframes hand-died {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes friend-yumi {
  0% {
    margin-top: 44.4444444444%;
  }
  100% {
    margin-top: 28.3555555556%;
  }
}
@keyframes damage-zakum {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@keyframes damage-zakum-01 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes damage-zakum-02 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes damage-zakum-03 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes damage-zakum-04 {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes damage_skin {
  0% {
    top: 0;
  }
  100% {
    top: -50%;
  }
}
@keyframes damage_skin_left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: translateX(-20%);
    transform: translateX(-20%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-40%);
    transform: translateX(-40%);
    opacity: 0;
  }
}
@keyframes damage_skin_right {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: translateX(20%);
    transform: translateX(20%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(40%);
    transform: translateX(40%);
    opacity: 0;
  }
}
@keyframes campaign-badge {
  0% {
    -webkit-transform: scale(1) rotateZ(0deg);
    transform: scale(1) rotateZ(0deg);
  }
  40% {
    -webkit-transform: scale(0.8) rotateZ(0deg);
    transform: scale(0.8) rotateZ(0deg);
  }
  42% {
    -webkit-transform: scale(1) rotateZ(5deg);
    transform: scale(1) rotateZ(5deg);
  }
  44% {
    -webkit-transform: scale(1) rotateZ(-5deg);
    transform: scale(1) rotateZ(-5deg);
  }
  46% {
    -webkit-transform: scale(1) rotateZ(5deg);
    transform: scale(1) rotateZ(5deg);
  }
  48% {
    -webkit-transform: scale(1) rotateZ(-5deg);
    transform: scale(1) rotateZ(-5deg);
  }
  50% {
    -webkit-transform: scale(1) rotateZ(5deg);
    transform: scale(1) rotateZ(5deg);
  }
  52% {
    -webkit-transform: scale(1) rotateZ(-5deg);
    transform: scale(1) rotateZ(-5deg);
  }
  54% {
    -webkit-transform: scale(1) rotateZ(0deg);
    transform: scale(1) rotateZ(0deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(0deg);
    transform: scale(1) rotateZ(0deg);
  }
}
/******************************************************************************
charm(初心者)
******************************************************************************/
.wrapper .charm-01 .bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm.jpg) no-repeat center center;
  background-size: cover;
  z-index: 1;
}
.wrapper .charm-01 .bg::after {
  content: '';
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm.jpg) no-repeat center center;
  background-size: cover;
}
.wrapper .charm-01 .bg.ms {
  position: fixed;
}
.wrapper .charm-01 .inner {
  position: relative;
  z-index: 5;
  padding-top: 6.6666666667%;
  margin: 0 auto 8%;
}
.wrapper .charm-01 h2 {
  width: 100%;
  height: 0;
  padding-top: 49.0666666667%;
  margin: 0 auto;
  position: relative;
}
.wrapper .charm-01 h2 img {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  z-index: 2;
}
.wrapper .charm-01 .lead {
  width: 70.6666666667%;
  height: 0;
  margin: 2.6666666667% auto 0;
  padding-top: 13.0666666667%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/lead_charm_01.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .charm-01 .point-01 .ttl {
  width: 46.4%;
  height: 0;
  margin: 6.6666666667% auto 0;
  padding-top: 19.4666666667%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/sttl_charm_01_01.png) no-repeat 0 0;
  background-size: contain;
  position: relative;
  z-index: 5;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.wrapper .charm-01 .point-01 .txt {
  width: 100%;
  height: 0;
  margin: -10.6666666667% auto 0;
  padding-top: 91.2%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm_01_01.png) no-repeat 0 0;
  background-size: contain;
  position: relative;
  z-index: 1;
}
.wrapper .charm-01 .point-01 .txt::after {
  content: '';
  width: 44%;
  height: 0;
  padding-top: 45.0666666667%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/char_charm_01_01.png) no-repeat 0 0;
  background-size: contain;
  position: absolute;
  z-index: 3;
  right: -9.3333333333%;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  bottom: -5.3333333333%;
}
.wrapper .charm-01 .point-02 .ttl {
  width: 46.4%;
  height: 0;
  margin: 6.6666666667% auto 0;
  padding-top: 19.4666666667%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/sttl_charm_01_02.png) no-repeat 0 0;
  background-size: contain;
  position: relative;
  z-index: 5;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.wrapper .charm-01 .point-02 .txt {
  width: 100%;
  height: 0;
  margin: -10.6666666667% auto 0;
  padding-top: 84.5333333333%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm_01_02.png) no-repeat 0 0;
  background-size: contain;
  position: relative;
  z-index: 1;
}
.wrapper .charm-01 .point-02 .txt::after {
  content: '';
  width: 33.8666666667%;
  height: 0;
  padding-top: 37.6%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/char_charm_01_02.png) no-repeat 0 0;
  background-size: contain;
  position: absolute;
  z-index: 3;
  left: -5.3333333333%;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  bottom: -5.3333333333%;
}
.wrapper .charm-01 .point-03 .ttl {
  width: 46.4%;
  height: 0;
  margin: 6.6666666667% auto 0;
  padding-top: 19.4666666667%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/sttl_charm_01_03.png) no-repeat 0 0;
  background-size: contain;
  position: relative;
  z-index: 5;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.wrapper .charm-01 .point-03 .txt {
  width: 100%;
  height: 0;
  margin: -10.6666666667% auto 0;
  padding-top: 91.2%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm_01_03.png) no-repeat 0 0;
  background-size: contain;
  position: relative;
  z-index: 1;
}
.wrapper .charm-01 .point-03 .txt::after {
  content: '';
  width: 60.5333333333%;
  height: 0;
  padding-top: 47.2%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/char_charm_01_03.png) no-repeat 0 0;
  background-size: contain;
  position: absolute;
  z-index: 3;
  right: -22.6666666667%;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  bottom: -5.3333333333%;
}
.wrapper .charm-01 .point-04 .ttl {
  width: 46.4%;
  height: 0;
  margin: 6.6666666667% auto 0;
  padding-top: 19.4666666667%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/sttl_charm_01_04.png) no-repeat 0 0;
  background-size: contain;
  position: relative;
  z-index: 5;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.wrapper .charm-01 .point-04 .txt {
  width: 100%;
  height: 0;
  margin: -10.6666666667% auto 0;
  padding-top: 91.4666666667%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm_01_04.png) no-repeat 0 0;
  background-size: contain;
  position: relative;
  z-index: 1;
}
.wrapper .charm-01 .point-01 .ttl.complete,
.wrapper .charm-01 .point-01 .txt.complete::after,
.wrapper .charm-01 .complete .ttl,
.wrapper .charm-01 .complete .txt::after {
  -webkit-transform: none;
  transform: none;
}
.wrapper .charm-01 .point-01 .ttl.animation {
  transition: all 0.3s cubic-bezier(0, 0.49, 0.34, 1.3) 0.8s;
}
.wrapper .charm-01 .animation .ttl {
  transition: all 0.3s cubic-bezier(0, 0.49, 0.34, 1.3);
}
.wrapper .charm-01 .point-01 .txt.animation::after {
  transition: all 0.5s ease;
}
.wrapper .charm-01 .animation .txt::after {
  transition: all 0.5s ease 0.5s;
}
.wrapper .charm-01 span {
  display: none;
}

/******************************************************************************
charm(経験者)
******************************************************************************/
.wrapper .charm-02 .bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm.jpg) no-repeat center center;
  background-size: cover;
  z-index: 1;
}
.wrapper .charm-02 .bg::after {
  content: '';
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm.jpg) no-repeat center center;
  background-size: cover;
}
.wrapper .charm-02 .bg.ms {
  position: fixed;
}
.wrapper .charm-02 .inner {
  position: relative;
  z-index: 5;
  padding-top: 6.6666666667%;
  margin: 0 auto 8%;
}
.wrapper .charm-02 h2 {
  width: 100%;
  height: 0;
  padding-top: 49.0666666667%;
  margin: 0 auto;
  position: relative;
}
.wrapper .charm-02 h2 img {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  z-index: 2;
}
.wrapper .charm-02 .lead {
  width: 62.6666666667%;
  height: 0;
  margin: 2.6666666667% auto 0;
  padding-top: 13.0666666667%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/lead_charm_02.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .charm-02 .point-01 .ttl {
  width: 57.0666666667%;
  height: 0;
  margin: 6.6666666667% auto 0;
  padding-top: 19.4666666667%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/sttl_charm_02_01.png) no-repeat 0 0;
  background-size: contain;
  position: relative;
  z-index: 5;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.wrapper .charm-02 .point-01 .ttl.active {
  -webkit-animation: ttl 0.3s cubic-bezier(0, 0.49, 0.34, 1.3) 1.2s forwards;
  animation: ttl 0.3s cubic-bezier(0, 0.49, 0.34, 1.3) 1.2s forwards;
}
.wrapper .charm-02 .point-01 .txt {
  width: 100%;
  height: 0;
  margin: -10.6666666667% auto 0;
  padding-top: 91.4666666667%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm_02_01.png) no-repeat 0 0;
  background-size: contain;
  position: relative;
  z-index: 1;
}
.wrapper .charm-02 .point-01 .txt::after {
  content: '';
  width: 53.0666666667%;
  height: 0;
  padding-top: 39.7333333333%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/char_charm_02_01.png) no-repeat 0 0;
  background-size: contain;
  position: absolute;
  z-index: 3;
  left: -25.3333333333%;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  bottom: -4%;
}
.wrapper .charm-02 .point-02 .ttl {
  width: 57.0666666667%;
  height: 0;
  margin: 6.6666666667% auto 0;
  padding-top: 19.4666666667%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/sttl_charm_02_02.png) no-repeat 0 0;
  background-size: contain;
  position: relative;
  z-index: 5;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.wrapper .charm-02 .point-02 .txt {
  width: 100%;
  height: 0;
  margin: -10.6666666667% auto 0;
  padding-top: 91.4666666667%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm_02_02.png) no-repeat 0 0;
  background-size: contain;
  position: relative;
  z-index: 1;
}
.wrapper .charm-02 .point-02 .txt::after {
  content: '';
  width: 43.4666666667%;
  height: 0;
  padding-top: 43.4666666667%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/char_charm_02_02.png) no-repeat 0 0;
  background-size: contain;
  position: absolute;
  z-index: 3;
  right: -13.3333333333%;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  bottom: -5.3333333333%;
}
.wrapper .charm-02 .point-03 .ttl {
  width: 57.0666666667%;
  height: 0;
  margin: 6.6666666667% auto 0;
  padding-top: 19.4666666667%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/sttl_charm_02_03.png) no-repeat 0 0;
  background-size: contain;
  position: relative;
  z-index: 5;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.wrapper .charm-02 .point-03 .txt {
  width: 100%;
  height: 0;
  margin: -10.6666666667% auto 0;
  padding-top: 84.8%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm_02_03.png) no-repeat 0 0;
  background-size: contain;
  position: relative;
  z-index: 1;
}
.wrapper .charm-02 .point-03 .txt::after {
  content: '';
  width: 25.8666666667%;
  height: 0;
  padding-top: 41.8666666667%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/char_charm_02_03.png) no-repeat 0 0;
  background-size: contain;
  position: absolute;
  z-index: 3;
  left: -2.6666666667%;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  bottom: -2.6666666667%;
}
.wrapper .charm-02 .point-04 .ttl {
  width: 57.0666666667%;
  height: 0;
  margin: 6.6666666667% auto 0;
  padding-top: 19.4666666667%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/sttl_charm_02_04.png) no-repeat 0 0;
  background-size: contain;
  position: relative;
  z-index: 5;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.wrapper .charm-02 .point-04 .txt {
  width: 100%;
  height: 0;
  margin: -10.6666666667% auto 0;
  padding-top: 91.4666666667%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm_02_04.png) no-repeat 0 0;
  background-size: contain;
  position: relative;
  z-index: 1;
}
.wrapper .charm-02 .point-01 .ttl.complete,
.wrapper .charm-02 .point-01 .txt.complete::after,
.wrapper .charm-02 .complete .ttl,
.wrapper .charm-02 .complete .txt::after {
  -webkit-transform: none;
  transform: none;
}
.wrapper .charm-02 .point-01 .ttl.animation {
  transition: all 0.3s cubic-bezier(0, 0.49, 0.34, 1.3) 0.8s;
}
.wrapper .charm-02 .animation .ttl {
  transition: all 0.3s cubic-bezier(0, 0.49, 0.34, 1.3);
}
.wrapper .charm-02 .point-01 .txt.animation::after {
  transition: all 0.5s ease;
}
.wrapper .charm-02 .animation .txt::after {
  transition: all 0.5s ease 0.5s;
}
.wrapper .charm-02 span {
  display: none;
}

/******************************************************************************
job
******************************************************************************/
.wrapper .job .bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/bg_job.jpg) no-repeat center center;
  background-size: cover;
  z-index: 1;
}
.wrapper .job .bg::after {
  content: '';
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/bg_job.jpg) no-repeat center center;
  background-size: cover;
}
.wrapper .job .bg.ms {
  position: fixed;
}
.wrapper .job .inner {
  position: relative;
  z-index: 5;
  padding-top: 17.3333333333%;
  margin: 0 auto 8%;
}
.wrapper .job h2 {
  width: 100%;
  height: 0;
  padding-top: 24%;
  margin: 0 auto;
  position: relative;
}
.wrapper .job h2 img {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  z-index: 2;
}
.wrapper .job h2 span {
  display: none;
}
.wrapper .job .lead {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 0;
  margin-top: 2.6666666667%;
  padding-top: 13.3333333333%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/lead_job.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .lead span {
  display: none;
}
.wrapper .job .job-area {
  position: relative;
}
.wrapper .job .swiper-container {
  width: 200%;
  height: 0;
  padding-top: 150.6666666667%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  margin-top: -14.6666666667%;
  opacity: 0;
}
.wrapper .job .swiper-container .swiper-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.wrapper .job .swiper-container .swiper-slide {
  width: 100%;
  height: 0;
  padding-top: 88%;
  position: relative;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.wrapper .job .swiper-container .swiper-slide > div {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.wrapper .job .swiper-container .swiper-slide > div h3, .wrapper .job .swiper-container .swiper-slide > div p, .wrapper .job .swiper-container .swiper-slide > div dl {
  display: none;
}
.wrapper .job .swiper-container .swiper-slide > div::before, .wrapper .job .swiper-container .swiper-slide > div::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 88.8%;
  height: 0;
  padding-top: 98.6666666667%;
  z-index: 5;
  transition: all 0.5s ease;
}
.wrapper .job .swiper-container .swiper-slide .txt {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 5%);
  transform: translate(-50%, 5%);
  width: 88.8%;
  height: 0;
  padding-top: 59.7333333333%;
  margin: 0 0 28% 0;
  z-index: 3;
  opacity: 0;
  transition: all 0.5s ease 0s;
}
.wrapper .job .swiper-container .swiper-slide.swiper-slide-active > div::after, .wrapper .job .swiper-container .swiper-slide.swiper-slide-duplicate-active > div::after {
  opacity: 0;
}
.wrapper .job .swiper-container .swiper-slide.swiper-slide-active > div .txt, .wrapper .job .swiper-container .swiper-slide.swiper-slide-duplicate-active > div .txt {
  opacity: 1;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  transition: all 0.5s ease 0.3s;
}
.wrapper .job .swiper-container .slide-darkknight::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_darknight_200821.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-darkknight::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_darknight_200821.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-darkknight .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_darkknight.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-hero::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_hero_200821.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-hero::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_hero_200821.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-hero .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_hero.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-paladin::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_paladin.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-paladin::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_paladin.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-paladin .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_paladin.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-bowmaster::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_bowmaster_200821.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-bowmaster::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_bowmaster_200821.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-bowmaster .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_bowmaster.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-crossbowmaster::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_crossbowmaster.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-crossbowmaster::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_crossbowmaster.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-crossbowmaster .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_crossbowmaster.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-nightload::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_nightload_200821.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-nightload::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_nightload_200821.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-nightload .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_nightload.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-shadower::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_shadower.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-shadower::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_shadower.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-shadower .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_shadower.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-bishop::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_bishop_200821.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-bishop::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_bishop_200821.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-bishop .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_bishop.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-archmagefire::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_archmage_fire.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-archmagefire::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_archmage_fire.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-archmagefire .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_archmage_fire.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-archmageice::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_archmage_ice.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-archmageice::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_archmage_ice.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-archmageice .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_archmage_ice.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-captain::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_captain_200821.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-captain::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_captain_200821.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-captain .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_captain.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-viper::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_viper.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-viper::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_viper.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-viper .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_viper.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-soulmaster::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_soulmaster.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-soulmaster::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_soulmaster.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-soulmaster .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_soulmaster.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-windshooter::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_windshooter_200219.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-windshooter::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_windshooter_200219.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-windshooter .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_windshooter.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-nightwalker::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_nightwalker_200219.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-nightwalker::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_nightwalker_200219.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-nightwalker .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_nightwalker.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-flamewizard::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_flamewizard_200219.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-flamewizard::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_flamewizard_200219.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-flamewizard .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_flamewizard.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-striker::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_striker_200219.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-striker::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_striker_200219.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-striker .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_striker.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-mechanic::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_mechanic.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-mechanic::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_mechanic.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-mechanic .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_mechanic.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-xenon::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_xenon.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-xenon::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_xenon.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-xenon .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_xenon.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-demonavenger::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_demonavenger.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-demonavenger::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_demonavenger.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-demonavenger .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_demonavenger.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-demonslayer::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_demonslayer.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-demonslayer::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_demonslayer.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-demonslayer .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_demonslayer.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-battlemage::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_battlemage_dnl3.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-battlemage::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_battlemage_dnl3.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-battlemage .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_battlemage_dnl3.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-wildhunter::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_wildhunter_dnl3.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-wildhunter::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_wildhunter_dnl3.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-wildhunter .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_wildhunter_dnl3.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-kanna::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_kanna.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-kanna::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_kanna.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-kanna .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_kanna.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-aran::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_aran.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-aran::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_aran.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-aran .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_aran.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-mercedes::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_mercedes.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-mercedes::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_mercedes.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-mercedes .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_mercedes.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-phantom::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_phantom.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-phantom::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_phantom.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-phantom .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_phantom.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-evan::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_evan.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-evan::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_evan.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-evan .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_evan.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-luminous::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_luminous.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-luminous::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_luminous.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-luminous .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_luminous.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container .slide-yue::before {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_yue.png) no-repeat 0 0;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-yue::after {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/char_yue.png) no-repeat 0 100%;
  background-size: 100% 200%;
}
.wrapper .job .swiper-container .slide-yue .txt {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/txt_yue.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .job .swiper-container.start {
  opacity: 1;
  transition: opacity 0.5s ease;
}
.wrapper .job .swiper-button-prev,
.wrapper .job .swiper-button-next {
  outline: none !important;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/img_arrow.png) no-repeat 0 0;
  background-size: 200%;
  display: block;
  position: absolute;
  width: 10.6666666667%;
  height: 0;
  padding-top: 10.6666666667%;
  z-index: 100;
  top: 0;
  margin-top: 113.3333333333%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
}
.wrapper .job .swiper-button-prev {
  left: 2.6666666667%;
}
.wrapper .job .swiper-button-next {
  background-position: 100% 0;
  right: 2.6666666667%;
}
.wrapper .job .swiper-pagination {
  width: 66.6666666667%;
  z-index: 10;
  font-size: 0;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  text-align: left;
}
.wrapper .job .swiper-pagination span {
  margin: 1.8%;
  border-radius: 0;
  width: 16.4%;
  height: 0;
  padding-top: 16.4%;
  cursor: pointer;
  vertical-align: top;
  outline: none !important;
  opacity: 1;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/img_thuamb_210603.png) no-repeat 0 0;
  background-size: 1100% 1100%;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  border-radius: 30%;
}
.wrapper .job .swiper-pagination span:nth-of-type(-n+10) {
  background-position-y: 0%;
}
.wrapper .job .swiper-pagination span:nth-of-type(n+11):nth-of-type(-n+20) {
  background-position-y: 20%;
}
.wrapper .job .swiper-pagination span:nth-of-type(n+21):nth-of-type(-n+30) {
  background-position-y: 40%;
}
.wrapper .job .swiper-pagination span:nth-of-type(n+31):nth-of-type(-n+40) {
  background-position-y: 60%;
}
.wrapper .job .swiper-pagination span:nth-of-type(n+41) {
  background-position-y: 80%;
}
.wrapper .job .swiper-pagination span:nth-of-type(1), .wrapper .job .swiper-pagination span:nth-of-type(11), .wrapper .job .swiper-pagination span:nth-of-type(21) {
  background-position-x: 0%;
}
.wrapper .job .swiper-pagination span:nth-of-type(2), .wrapper .job .swiper-pagination span:nth-of-type(12), .wrapper .job .swiper-pagination span:nth-of-type(22) {
  background-position-x: 10%;
}
.wrapper .job .swiper-pagination span:nth-of-type(3), .wrapper .job .swiper-pagination span:nth-of-type(13), .wrapper .job .swiper-pagination span:nth-of-type(23) {
  background-position-x: 20%;
}
.wrapper .job .swiper-pagination span:nth-of-type(4), .wrapper .job .swiper-pagination span:nth-of-type(14), .wrapper .job .swiper-pagination span:nth-of-type(24) {
  background-position-x: 30%;
}
.wrapper .job .swiper-pagination span:nth-of-type(5), .wrapper .job .swiper-pagination span:nth-of-type(15), .wrapper .job .swiper-pagination span:nth-of-type(25) {
  background-position-x: 40%;
}
.wrapper .job .swiper-pagination span:nth-of-type(6), .wrapper .job .swiper-pagination span:nth-of-type(16), .wrapper .job .swiper-pagination span:nth-of-type(26) {
  background-position-x: 50%;
}
.wrapper .job .swiper-pagination span:nth-of-type(7), .wrapper .job .swiper-pagination span:nth-of-type(17), .wrapper .job .swiper-pagination span:nth-of-type(27) {
  background-position-x: 60%;
}
.wrapper .job .swiper-pagination span:nth-of-type(8), .wrapper .job .swiper-pagination span:nth-of-type(18), .wrapper .job .swiper-pagination span:nth-of-type(28) {
  background-position-x: 70%;
}
.wrapper .job .swiper-pagination span:nth-of-type(9), .wrapper .job .swiper-pagination span:nth-of-type(19), .wrapper .job .swiper-pagination span:nth-of-type(29) {
  background-position-x: 80%;
}
.wrapper .job .swiper-pagination span:nth-of-type(10), .wrapper .job .swiper-pagination span:nth-of-type(20), .wrapper .job .swiper-pagination span:nth-of-type(30) {
  background-position-x: 90%;
}
.wrapper .job .swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}
.wrapper .job .swiper-pagination .swiper-pagination-bullet-active:nth-of-type(-n+10) {
  background-position-y: 10%;
}
.wrapper .job .swiper-pagination .swiper-pagination-bullet-active:nth-of-type(n+11):nth-of-type(-n+20) {
  background-position-y: 30%;
}
.wrapper .job .swiper-pagination .swiper-pagination-bullet-active:nth-of-type(n+21):nth-of-type(-n+30) {
  background-position-y: 50%;
}
.wrapper .job .swiper-pagination .swiper-pagination-bullet-active:nth-of-type(n+31):nth-of-type(-n+40) {
  background-position-y: 70%;
}
.wrapper .job .swiper-pagination .swiper-pagination-bullet-active:nth-of-type(n+41) {
  background-position-y: 90%;
}

/******************************************************************************
campaign
******************************************************************************/
.wrapper .campaign .bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/campaign/bg_campaign.jpg) no-repeat center center;
  background-size: cover;
  z-index: 1;
}
.wrapper .campaign .bg::after {
  content: '';
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/campaign/bg_campaign.jpg) no-repeat center center;
  background-size: cover;
}
.wrapper .campaign .bg.ms {
  position: fixed;
}
.wrapper .campaign .inner {
  position: relative;
  z-index: 5;
  padding-top: 16%;
  margin: 0 auto 8%;
}
.wrapper .campaign h2 {
  width: 100%;
  height: 0;
  padding-top: 38.6666666667%;
  margin: 0 auto;
  position: relative;
}
.wrapper .campaign h2 img {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  z-index: 2;
}
.wrapper .campaign h2 span {
  display: none;
}
.wrapper .campaign .lead {
  width: 100%;
  height: 0;
  margin-top: 5.3333333333%;
  padding-top: 6.9333333333%;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/campaign/lead_campaign.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .campaign .lead span {
  display: none;
}
.wrapper .campaign .bnr-area {
  margin: 2.6666666667% auto 0;
  width: 92%;
  background: #fffaed;
  border-radius: 30px;
  box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.1);
  padding: 4%;
}
.wrapper .campaign .bnr-area .btn-bnr {
  margin: 2.1333333333% auto 0;
  width: 100%;
  height: 0;
  padding-top: 21.5873015873%;
  position: relative;
}
.wrapper .campaign .bnr-area .btn-bnr img {
  width: 100%;
  height: auto;
}
.wrapper .campaign .bnr-area .btn-bnr:nth-child(1) {
  margin-top: 0;
}
.wrapper .campaign .bnr-area .btn-bnr a {
  overflow: hidden;
}
.wrapper .campaign .bnr-area .btn-bnr a::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0);
  position: relative;
  z-index: 10;
}
.wrapper .campaign .bnr-area .btn-bnr a:hover::after {
  background: rgba(255, 255, 255, 0.2);
}
.wrapper .campaign .sns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}
.wrapper .campaign .sns dt {
  margin: 6.6666666667% auto 0;
  width: 60.2666666667%;
  height: 0;
  padding-top: 9.6%;
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/sttl_sns.png) no-repeat center top;
  background-size: contain;
}
.wrapper .campaign .sns .btn-twitter {
  position: relative;
  margin-top: 2.9333333333%;
  width: 46.9333333333%;
  height: 0;
  padding-top: 14.1333333333%;
}
.wrapper .campaign .sns .btn-twitter a {
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/btn_twitter.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .campaign .sns .btn-line {
  position: relative;
  margin-top: 2.9333333333%;
  width: 46.9333333333%;
  height: 0;
  padding-top: 14.1333333333%;
}
.wrapper .campaign .sns .btn-line a {
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/btn_line.png) no-repeat 0 0;
  background-size: contain;
}
.wrapper .campaign .sns span {
  display: none;
}

/******************************************************************************
modal
******************************************************************************/
.modal-appstore {
  background: #fffaed;
}
.modal-appstore .register {
  text-align: center;
  margin: 0 auto;
  font-size: 0;
  position: relative;
  margin-top: 3.1746031746%;
}
.modal-appstore .register .btn-line {
  position: relative;
  width: 90.4761904762%;
  height: 0;
  padding-top: 20.3174603175%;
  margin: 0 auto 3.1746031746%;
}
.modal-appstore .register .btn-line a {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/pre/btn_modal_line.png) no-repeat 0 0;
  background-size: contain;
}
.modal-appstore .register .btn-twitter {
  position: relative;
  width: 90.4761904762%;
  height: 0;
  padding-top: 20.3174603175%;
  margin: 0 auto 3.1746031746%;
}
.modal-appstore .register .btn-twitter a {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/pre/btn_modal_twitter.png) no-repeat 0 0;
  background-size: contain;
}
.modal-appstore .register .btn-modal-mail {
  position: relative;
  width: 90.4761904762%;
  height: 0;
  padding-top: 20.3174603175%;
  margin: 0 auto 4.7619047619%;
}
.modal-appstore .register .btn-modal-mail a {
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/pre/btn_modal_mail.png) no-repeat 0 0;
  background-size: contain;
}
.modal-appstore .register .caution {
  width: 62.2222222222%;
  height: 0;
  padding-top: 2.8571428571%;
  margin: 0 auto;
  background: url(https://static.nexon.co.jp/maplestorym/index_ka03/pre/txt_modal_caution.png) no-repeat 0 0;
  background-size: contain;
}
.modal-appstore .register .caution span {
  display: none;
}
.modal-appstore .qr {
  margin: 6% auto;
  width: 88.4%;
  height: 0;
  padding-top: 85.6%;
  background: url(https://static.nexon.co.jp/maplestorym/common_anzi/bg_modal_appstore.png) no-repeat 0 0;
  background-size: contain;
}
.modal-appstore .qr p {
  display: none;
}

/**********************************************************************************************************************
***********************************************************************************************************************
												750px以上の場合に適用
***********************************************************************************************************************
**********************************************************************************************************************/
@media (min-width: 750px) {
  /******************************************************************************
  aside
  ******************************************************************************/
  aside .swiper-container {
    display: none !important;
  }
  aside .filter {
    display: none;
  }

  /******************************************************************************
  top
  ******************************************************************************/
  .wrapper .top {
    height: auto;
    padding-bottom: 125px;
    position: relative;
  }
  .wrapper .top .scroll-area {
    position: relative;
  }
  .wrapper .top .scroll-area > div.active {
    -webkit-animation: none;
    animation: none;
  }
  .wrapper .top .scroll-area > div .end-obj {
    margin-right: 0;
  }
  .wrapper .top .scroll-zakum.active span {
    -webkit-animation: none;
    animation: none;
  }
  .wrapper .top .scroll-area .area-01 {
    background-size: 100% auto;
  }
  .wrapper .top .scroll-area .area-01.active .friend-talk {
    left: 77%;
  }
  .wrapper .top .scroll-area .area-01.active .friend-group {
    left: 80%;
  }
  .wrapper .top .scroll-area .area-02 {
    background-size: 100% auto;
  }
  .wrapper .top .scroll-area .area-03 {
    background-size: 100% auto;
  }
  .wrapper .top .char {
    -webkit-animation: pc-char 15s linear infinite;
    animation: pc-char 15s linear infinite;
    left: -20%;
  }
  .wrapper .top .char.ready.go {
    left: -20%;
    transition: all 0.1s linear;
  }
  .wrapper .top .char.stop {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }
  .wrapper .top .pet {
    -webkit-animation: pc-char 15s linear infinite;
    animation: pc-char 15s linear infinite;
    left: -20%;
  }
  .wrapper .top .pet.ready.go {
    left: -20%;
    transition: all 0.1s linear;
  }
  .wrapper .top .pet.stop {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }
  .wrapper .top .btn-jump {
    width: 5.8333333333%;
    height: 0;
    padding-top: 5.8333333333%;
    right: 1.5625%;
    margin-bottom: 26.0416666667%;
  }
  .wrapper .top .btn-attack {
    width: 6.6666666667%;
    height: 0;
    padding-top: 6.6666666667%;
    right: 6.25%;
    margin-bottom: 20.3125%;
  }
  .wrapper .top .fade-screen.on {
    box-shadow: 0 0 0 100vw #1a1712 inset;
  }

  /******************************************************************************
  charm(初心者)
  ******************************************************************************/
  .wrapper .charm-01 .bg {
    position: fixed;
    background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm_pc.jpg) no-repeat center center;
  }
  .wrapper .charm-01 .bg::after {
    content: normal;
  }
  .wrapper .charm-01 .inner {
    padding-top: 30px;
  }
  .wrapper .charm-01 h2 {
    width: 750px;
    height: 368px;
    padding-top: 0;
    margin: 0 auto 0;
  }
  .wrapper .charm-01 .lead {
    width: 480px;
    height: 89px;
    margin: 20px auto 10px;
    padding-top: 0;
  }
  .wrapper .charm-01 .point-01 {
    display: inline-block;
    margin-right: 12px;
  }
  .wrapper .charm-01 .point-01 .ttl {
    width: 248px;
    height: 104px;
    margin: 50px auto 0;
    padding-top: 0;
    -webkit-transform: none;
    transform: none;
  }
  .wrapper .charm-01 .point-01 .txt {
    width: 544px;
    height: 522px;
    margin: -60px auto 0;
    padding-top: 0;
    background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm_01_01_pc.png) no-repeat 0 0;
  }
  .wrapper .charm-01 .point-01 .txt::after, .wrapper .charm-01 .point-01 .txt.complete::after {
    width: 330px;
    height: 338px;
    padding-top: 0;
    left: -140px;
    right: auto;
    opacity: 1;
    -webkit-transform: scale(-0.7, 0.7);
    transform: scale(-0.7, 0.7);
    bottom: -75px;
  }
  .wrapper .charm-01 .point-02 {
    display: inline-block;
    margin-left: 12px;
  }
  .wrapper .charm-01 .point-02 .ttl {
    width: 248px;
    height: 104px;
    margin: 50px auto 0;
    padding-top: 0;
    -webkit-transform: none;
    transform: none;
  }
  .wrapper .charm-01 .point-02 .txt {
    width: 544px;
    height: 522px;
    margin: -60px auto 0;
    padding-top: 0;
    background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm_01_02_pc.png) no-repeat 0 0;
  }
  .wrapper .charm-01 .point-02 .txt::after {
    width: 254px;
    height: 282px;
    padding-top: 0px;
    right: -110px;
    left: auto;
    opacity: 1;
    -webkit-transform: scale(-0.7, 0.7);
    transform: scale(-0.7, 0.7);
    bottom: -65px;
  }
  .wrapper .charm-01 .point-03 {
    display: inline-block;
    margin-right: 12px;
  }
  .wrapper .charm-01 .point-03 .ttl {
    width: 248px;
    height: 104px;
    margin: 50px auto 0;
    padding-top: 0;
    -webkit-transform: none;
    transform: none;
  }
  .wrapper .charm-01 .point-03 .txt {
    width: 544px;
    height: 522px;
    margin: -60px auto 0;
    padding-top: 0;
    background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm_01_03_pc.png) no-repeat 0 0;
  }
  .wrapper .charm-01 .point-03 .txt::after {
    width: 454px;
    height: 354px;
    padding-top: 0;
    left: -250px;
    right: auto;
    opacity: 1;
    -webkit-transform: scale(-0.7, 0.7);
    transform: scale(-0.7, 0.7);
    bottom: -80px;
  }
  .wrapper .charm-01 .point-04 {
    display: inline-block;
    margin-left: 12px;
  }
  .wrapper .charm-01 .point-04 .ttl {
    width: 248px;
    height: 104px;
    margin: 50px auto 0;
    padding-top: 0;
    -webkit-transform: none;
    transform: none;
  }
  .wrapper .charm-01 .point-04 .txt {
    width: 544px;
    height: 522px;
    margin: -60px auto 0;
    padding-top: 0;
    background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm_01_04_pc.png) no-repeat 0 0;
  }
  .wrapper .charm-01 .btn-pre {
    width: 504px;
    height: 114px;
    margin: 50px auto;
    padding-top: 0;
  }
  .wrapper .charm-01 .btn-pre a {
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/btn_pre_pc.png) no-repeat 0 0;
  }

  /******************************************************************************
  charm(経験者)
  ******************************************************************************/
  .wrapper .charm-02 .bg {
    position: fixed;
    background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm_pc.jpg) no-repeat center center;
  }
  .wrapper .charm-02 .bg::after {
    content: normal;
  }
  .wrapper .charm-02 .inner {
    padding-top: 30px;
  }
  .wrapper .charm-02 h2 {
    width: 750px;
    height: 368px;
    padding-top: 0;
    margin: 0 auto 0;
  }
  .wrapper .charm-02 .lead {
    width: 470px;
    height: 98px;
    margin: 20px auto 10px;
    padding-top: 0;
  }
  .wrapper .charm-02 .point-01 {
    display: inline-block;
    margin-right: 12px;
  }
  .wrapper .charm-02 .point-01 .ttl {
    width: 280px;
    height: 96px;
    margin: 40px auto 0;
    padding-top: 0;
    -webkit-transform: none;
    transform: none;
  }
  .wrapper .charm-02 .point-01 .txt {
    width: 544px;
    height: 522px;
    margin: -50px auto 0;
    padding-top: 0;
    background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm_02_01_pc.png) no-repeat 0 0;
  }
  .wrapper .charm-02 .point-01 .txt::after, .wrapper .charm-02 .point-01 .txt.complete::after {
    width: 398px;
    height: 298px;
    padding-top: 0;
    left: -240px;
    right: auto;
    opacity: 1;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    bottom: -70px;
  }
  .wrapper .charm-02 .point-02 {
    display: inline-block;
    margin-left: 12px;
  }
  .wrapper .charm-02 .point-02 .ttl {
    width: 280px;
    height: 96px;
    margin: 40px auto 0;
    padding-top: 0;
    -webkit-transform: none;
    transform: none;
  }
  .wrapper .charm-02 .point-02 .txt {
    width: 544px;
    height: 522px;
    margin: -50px auto 0;
    padding-top: 0;
    background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm_02_02_pc.png) no-repeat 0 0;
  }
  .wrapper .charm-02 .point-02 .txt::after {
    width: 326px;
    height: 326px;
    padding-top: 0px;
    right: -145px;
    left: auto;
    opacity: 1;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    bottom: -70px;
  }
  .wrapper .charm-02 .point-03 {
    display: inline-block;
    margin-right: 12px;
  }
  .wrapper .charm-02 .point-03 .ttl {
    width: 280px;
    height: 96px;
    margin: 40px auto 0;
    padding-top: 0;
    -webkit-transform: none;
    transform: none;
  }
  .wrapper .charm-02 .point-03 .txt {
    width: 544px;
    height: 522px;
    margin: -50px auto 0;
    padding-top: 0;
    background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm_02_03_pc.png) no-repeat 0 0;
  }
  .wrapper .charm-02 .point-03 .txt::after {
    width: 194px;
    height: 314px;
    padding-top: 0;
    left: -90px;
    right: auto;
    opacity: 1;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    bottom: -60px;
  }
  .wrapper .charm-02 .point-04 {
    display: inline-block;
    margin-left: 12px;
  }
  .wrapper .charm-02 .point-04 .ttl {
    width: 280px;
    height: 96px;
    margin: 40px auto 0;
    padding-top: 0;
    -webkit-transform: none;
    transform: none;
  }
  .wrapper .charm-02 .point-04 .txt {
    width: 544px;
    height: 522px;
    margin: -50px auto 0;
    padding-top: 0;
    background: url(https://static.nexon.co.jp/maplestorym/index_ka03/charm/bg_charm_02_04_pc.png) no-repeat 0 0;
  }
  .wrapper .charm-02 .btn-pre {
    width: 504px;
    height: 114px;
    margin: 50px auto;
    padding-top: 0;
  }
  .wrapper .charm-02 .btn-pre a {
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/btn_pre_pc.png) no-repeat 0 0;
  }

  /******************************************************************************
  job
  ******************************************************************************/
  .wrapper .job .bg {
    position: fixed;
    background: url(https://static.nexon.co.jp/maplestorym/index_ka03/job/bg_job_pc.jpg) no-repeat center center;
  }
  .wrapper .job .bg::after {
    content: normal;
  }
  .wrapper .job .inner {
    padding-top: 120px;
  }
  .wrapper .job h2 {
    width: 750px;
    height: 180px;
    padding-top: 0;
    margin: 0 auto;
  }
  .wrapper .job .lead {
    width: 590px;
    height: 79px;
    margin: 20px auto 0;
    padding-top: 0;
  }
  .wrapper .job .swiper-container {
    position: relative;
    width: 1120px;
    height: 750px;
    padding-top: 0;
    left: 0;
    -webkit-transform: none;
    transform: none;
    margin: -175px 0 0 0;
    overflow: visible;
  }
  .wrapper .job .swiper-container .swiper-wrapper {
    height: 100%;
    padding-top: 0;
  }
  .wrapper .job .swiper-container .swiper-slide {
    height: 100%;
    margin-top: 0;
    padding-top: 0;
  }
  .wrapper .job .swiper-container .swiper-slide > div::before {
    left: -90px;
    -webkit-transform: none;
    transform: none;
    width: 666px;
    height: 740px;
    padding-top: 0;
    opacity: 0;
  }
  .wrapper .job .swiper-container .swiper-slide > div::after {
    content: normal;
  }
  .wrapper .job .swiper-container .swiper-slide .txt {
    top: 250px;
    right: 40px;
    bottom: auto;
    left: auto;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    width: 666px;
    height: 0;
    padding-top: 448px;
    margin: 0;
  }
  .wrapper .job .swiper-container .swiper-slide.swiper-slide-active > div::before, .wrapper .job .swiper-container .swiper-slide.swiper-slide-duplicate-active > div::before {
    opacity: 1;
  }
  .wrapper .job .swiper-container .swiper-slide.swiper-slide-active > div .txt, .wrapper .job .swiper-container .swiper-slide.swiper-slide-duplicate-active > div .txt {
    -webkit-transform: none;
    transform: none;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-hero::before {
    top: 10px;
    left: -130px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-bowmaster::before {
    top: 20px;
    left: -170px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-nightload::before {
    top: 10px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-bishop::before {
    top: 20px;
    left: -130px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-archmagefire::before {
    left: -120px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-captain::before {
    top: 20px;
    left: -90px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-soulmaster::before {
    top: 30px;
    left: -120px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-windshooter::before {
    top: 0px;
    left: -135px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-nightwalker::before {
    top: 40px;
    left: -110px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-flamewizard::before {
    top: 24px;
    left: -135px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-striker::before {
    top: 40px;
    left: -120px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-mechanic::before {
    left: -150px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-xenon::before {
    top: -30px;
    left: -130px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-demonavenger::before {
    top: -20px;
    left: -120px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-demonslayer::before {
    top: 0px;
    left: -100px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-battlemage::before {
    top: 0px;
    left: -120px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-wildhunter::before {
    top: 20px;
    left: -80px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-kanna::before {
    top: -5px;
    left: -105px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-aran::before {
    top: 100px;
    left: -130px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-mercedes::before {
    top: 20px;
    left: -140px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-phantom::before {
    top: 37px;
    left: -60px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-evan::before {
    top: 10px;
    left: -50px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-luminous::before {
    top: 10px;
    left: -105px;
  }
  .wrapper .job .swiper-container .swiper-slide .slide-yue::before {
    top: 15px;
    left: -90px;
  }
  .wrapper .job .swiper-button-prev,
  .wrapper .job .swiper-button-next {
    width: 80px;
    height: 80px;
    padding-top: 0;
    margin-top: 0;
    top: 450px;
  }
  .wrapper .job .swiper-button-prev {
    left: 0;
  }
  .wrapper .job .swiper-button-prev:hover {
    background-position: 0 100%;
  }
  .wrapper .job .swiper-button-next {
    right: 0;
  }
  .wrapper .job .swiper-button-next:hover {
    background-position: 100% 100%;
  }
  .wrapper .job .swiper-pagination {
    width: 800px;
    height: auto;
    padding-top: 0;
    text-align: left;
  }
  .wrapper .job .swiper-pagination span {
    width: 82px;
    height: 82px;
    margin: 9px;
    padding-top: 0;
  }
  .wrapper .job .btn-pre {
    width: 504px;
    height: 114px;
    margin: 50px auto;
    padding-top: 0;
  }
  .wrapper .job .btn-pre a {
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/btn_pre_pc.png) no-repeat 0 0;
  }

  @supports (-ms-ime-align: auto) {
    .txt {
      margin: 0 0 52% 0;
    }
  }
  /******************************************************************************
  modal
  ******************************************************************************/
  .modal-appstore {
    width: 560px !important;
  }
  .modal-appstore .register .btn-line {
    position: relative;
    width: 504px;
    height: 88px;
    padding-top: 0;
    margin: 0 auto 20px;
  }
  .modal-appstore .register .btn-line a {
    background: url(https://static.nexon.co.jp/maplestorym/index_ka03/pre/btn_modal_line_pc.png) no-repeat 0 0;
    background-size: cover;
  }
  .modal-appstore .register .btn-twitter {
    position: relative;
    width: 504px;
    height: 88px;
    padding-top: 0;
    margin: 0 auto 20px;
  }
  .modal-appstore .register .btn-twitter a {
    background: url(https://static.nexon.co.jp/maplestorym/index_ka03/pre/btn_modal_twitter_pc.png) no-repeat 0 0;
    background-size: cover;
  }
  .modal-appstore .register .btn-modal-mail {
    position: relative;
    width: 504px;
    height: 88px;
    padding-top: 0;
    margin: 0 auto 30px;
  }
  .modal-appstore .register .btn-modal-mail a {
    background: url(https://static.nexon.co.jp/maplestorym/index_ka03/pre/btn_modal_mail_pc.png) no-repeat 0 0;
    background-size: cover;
  }
  .modal-appstore .register .caution {
    width: 392px;
    height: 18px;
    padding-top: 0;
  }
  .modal-appstore .qr {
    margin: 15px auto;
    width: 442px;
    height: 428px;
    padding-top: 0;
  }
}
/**********************************************************************************************************************
***********************************************************************************************************************
												1120px以上の場合に適用
***********************************************************************************************************************
**********************************************************************************************************************/
@media (min-width: 1120px) {
  /******************************************************************************
  wrapper
  ******************************************************************************/
  .wrapper .top .campaign-area {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 125px;
    background: #e3e3e3;
    overflow: visible;
    z-index: 50;
  }
  .wrapper .top .campaign-area .inner {
    width: 1120px;
    margin: 0 auto;
    height: 125px;
    text-align: center;
    font-size: 0;
  }
  .wrapper .top .campaign-area .campaign-swiper {
    position: relative;
    width: 320px;
    height: 86px;
    display: inline-block;
    margin: 19px 10px;
  }
  .wrapper .top .campaign-area .campaign-swiper::before {
    content: '';
    background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/img_campaign_pc.png) no-repeat center center;
    width: 52px;
    height: 52px;
    position: absolute;
    z-index: 5;
    top: -30px;
    left: -40px;
    -webkit-animation: campaign-badge 3s linear infinite;
    animation: campaign-badge 3s linear infinite;
  }
  .wrapper .top .campaign-area .swiper-container {
    width: 320px;
  }
  .wrapper .top .campaign-area .swiper-container a {
    width: 320px;
    height: 86px;
    display: block;
  }
  .wrapper .top .campaign-area .swiper-pagination {
    bottom: -14px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .wrapper .top .campaign-area .swiper-pagination .swiper-pagination-bullet {
    margin: 0 5px;
    opacity: 1;
    background: #9b9b9b;
  }
  .wrapper .top .campaign-area .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #f47720;
  }
  .wrapper .top .campaign-area .swiper-button-prev,
  .wrapper .top .campaign-area .swiper-button-next {
    outline: none !important;
    background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/btn_arrow_pc.png) no-repeat 0 0;
    display: block;
    position: absolute;
    width: 16px;
    height: 20px;
    top: 55px;
  }
  .wrapper .top .campaign-area .swiper-button-prev {
    left: 5px;
  }
  .wrapper .top .campaign-area .swiper-button-next {
    background-position: 100% 0;
    right: 5px;
  }
  .wrapper .top .campaign-area .sns {
    background: #fff;
    display: inline-flex;
    justify-content: center;
    padding: 14px 10px;
    width: 620px;
    height: 86px;
    border-radius: 24px;
    vertical-align: top;
    margin: 19px 10px;
  }
  .wrapper .top .campaign-area .sns dt {
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/sttl_sns_pc.png) no-repeat 0 0;
    width: 178px;
    height: 30px;
    margin: 14px 20px 0 0;
  }
  .wrapper .top .campaign-area .sns dd {
    width: 190px;
    height: 58px;
    position: relative;
    margin-left: 10px;
  }
  .wrapper .top .campaign-area .sns .btn-twitter a {
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/btn_twitter_pc.png) no-repeat 0 0;
    width: 100%;
    height: 100%;
  }
  .wrapper .top .campaign-area .sns .btn-line a {
    background: url(https://static.nexon.co.jp/maplestorym/common_anzi/btn_line_pc.png) no-repeat 0 0;
  }
  .wrapper .top .campaign-area .sns span {
    display: none;
  }
  .wrapper .top .bottom {
    margin: 21.09375% 0 0 0;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: auto;
    width: 540px;
    height: 310px;
    padding-top: 0;
    background: none;
  }
  .wrapper .top .bottom.depth {
    z-index: 30;
  }
  .wrapper .top .bottom .btn-modal-youtube {
    width: 140px;
    height: 0;
    padding-top: 140px;
    position: relative;
    margin: 0 auto 0;
    transition: transform 0.5s ease;
    background: #f60000;
    border-radius: 50%;
    overflow: hidden;
  }
  .wrapper .top .bottom .btn-modal-youtube a {
    background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/btn_pv_pc.png) no-repeat center center;
  }
  .wrapper .top .bottom .btn-modal-youtube a:hover {
    background-position: center center !important;
  }
  .wrapper .top .bottom .btn-modal-youtube:hover {
    background: #ff0000;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  .wrapper .top .bottom .release {
    width: 362px;
    height: 42px;
    margin: 30px auto 0;
  }
  .wrapper .top .bottom .store {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .wrapper .top .bottom .store dt {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 46px;
    margin: 20px auto 15px;
    background: url(https://static.nexon.co.jp/maplestorym/index_ka03/top/sttl_store_pc.png) no-repeat center center;
  }
  .wrapper .top .bottom .store .btn-appstore,
  .wrapper .top .bottom .store .bg-appstore {
    position: relative;
    width: 191px;
    height: 70px;
    padding-top: 0;
    margin: 0 10px 0 0;
  }
  .wrapper .top .bottom .store .btn-googleplay,
  .wrapper .top .bottom .store .bg-googleplay {
    position: relative;
    width: 237px;
    height: 70px;
    padding-top: 0;
    margin: 0 0 0 10px;
  }
}