@charset "UTF-8";
/*
	Licensed under SIL OPEN FONT LICENSE Version 1.1
	NotoSansJP-Regular.otf: Copyright 2012 Google Inc. All Rights Reserved.
	NotoSansJP-Medium.otf: Copyright 2012 Google Inc. All Rights Reserved.
	NotoSansJP-Bold.otf: Copyright 2012 Google Inc. All Rights Reserved.
	Copyright 2012 Google Inc. All Rights Reserved.
*/
/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
  padding: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
  padding: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable
 */
button,
input,
optgroup,
select,
textarea {
  vertical-align: middle;
  color: inherit;
  font: inherit;
  padding: 0;
  margin: 0;
  outline: 0;
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type=checkbox] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  appearance: radio;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button[disabled],
[type=button][disabled],
[type=reset][disabled],
[type=submit][disabled] {
  cursor: default;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove arrow in IE10 & IE11
 */
select::-ms-expand {
  display: none;
}

/**
 * Remove padding
 */
/*
option {
  padding: 0;
}
*/
/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
/*
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
*/
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  font: inherit; /* 2 */
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable] {
  outline: none;
}

/* Table */
/* ============================================ */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/* Misc */
/* ============================================ */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #373737;
  font-size: 3.7333333333vw;
  font-weight: 400;
  margin: 0;
  padding: 0;
}
body > img {
  position: absolute;
  display: none;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(0);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

div, p, ul, ol, dl, li, dt, dd {
  word-break: break-all;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

tr, th, td {
  word-break: break-all;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

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

img {
  border: none;
  vertical-align: top;
}

form {
  margin: 0;
  padding: 0;
}

select, label, [type=radio], [type=checkbox] {
  cursor: pointer;
}

select {
  background: #fff;
}

select, input, textarea, button {
  box-sizing: content-box !important;
}

[type=text], [type=date], [type=email],
[type=number], [type=password], [type=search],
[type=tel], [type=url] {
  background: #fff;
  caret-color: #373737;
  border: solid 1px #abadb3;
}

a,
a:visited,
a:hover,
a:active {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: block;
  outline: none !important;
}

[class^=btn-] {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
}
[class^=btn-] a {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
[class^=btn-] a:hover {
  background-position-y: 100% !important;
}
[class^=btn-] a span {
  display: none;
}
[class^=btn-] a img {
  width: 100%;
  height: auto;
}

.develop-footer-code {
  overflow: hidden;
  height: 0;
}

:placeholder-shown {
  color: #666;
}

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

:-moz-placeholder {
  color: #666;
  opacity: 1;
}

::-moz-placeholder {
  color: #666;
  opacity: 1;
}

::-ms-input-placeholder {
  color: #666;
}

::placeholder {
  color: #666;
}

:focus:placeholder-shown {
  color: transparent;
}

:focus::-webkit-input-placeholder {
  color: transparent;
}

:focus:-moz-placeholder {
  color: transparent;
}

:focus::-moz-placeholder {
  color: transparent;
}

:focus::-ms-input-placeholder {
  color: transparent;
}

:focus::placeholder {
  color: transparent;
}

@media (min-width: 1025px) {
  [class^=create-] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
    animation: fadein 0.3s ease forwards;
  }
  [class^=create-] div {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 550px;
    padding: 50px 40px;
    background: #fff;
    border: solid 2px #8e98ad;
    border-radius: 4px;
  }
  [class^=create-] div ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1em;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 700;
    color: #000000;
  }
  [class^=create-] div ul li {
    margin: 0 20px;
  }
  [class^=create-] div ul li a {
    display: inline-block;
    text-decoration: underline;
  }
  [class^=create-] div ul li a:hover {
    text-decoration: none;
  }
  [class^=create-] div ul li span {
    font-size: 12px;
    margin-left: 4px;
  }
  [class^=create-] div ul li.btn-registry {
    width: 210px;
    height: 46px;
    margin: 0 10px;
  }
  [class^=create-] div ul li.btn-registry a {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/modal/btn_registry.webp);
    transition: all 0.3s ease;
  }
  [class^=create-] div ul li.btn-registry a:hover {
    transform: translateY(-5px);
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  }
  [class^=create-] div ul li.btn-registry a span {
    display: none;
  }
  [class^=create-] div ul li.btn-login {
    width: 210px;
    height: 46px;
    margin: 0 10px;
  }
  [class^=create-] div ul li.btn-login a {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/modal/btn_login.webp);
    transition: all 0.3s ease;
  }
  [class^=create-] div ul li.btn-login a:hover {
    transform: translateY(-5px);
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  }
  [class^=create-] div ul li.btn-login a span {
    display: none;
  }
  [class^=create-] div p {
    text-align: center;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 500;
    color: #000000;
    margin-top: 1em;
  }
  [class^=create-] div p.caution {
    font-size: 15px;
  }
  [class^=create-] div p:nth-of-type(1) {
    margin-top: 0;
  }
  [class^=create-] div .close {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    margin: -40px -4px 0 0;
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  [class^=create-] div .close:hover {
    transform: rotateZ(180deg);
  }
  [class^=create-] div .close::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateZ(45deg);
    width: 100%;
    height: 4px;
    background: #fff;
  }
  [class^=create-] div .close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateZ(-45deg);
    width: 100%;
    height: 4px;
    background: #fff;
  }
  .create-nowloading {
    animation: fadein 1s ease forwards;
  }
  .create-nowloading div {
    height: 230px;
  }
  .create-nowloading div p {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: 700;
  }
  .create-nowloading div p span {
    display: inline-block;
    animation: jump 2s ease infinite;
  }
  .create-nowloading div p span:nth-of-type(1) {
    animation-delay: 0.1s;
  }
  .create-nowloading div p span:nth-of-type(2) {
    animation-delay: 0.2s;
  }
  .create-nowloading div p span:nth-of-type(3) {
    animation-delay: 0.3s;
  }
  .create-nowloading div p span:nth-of-type(4) {
    animation-delay: 0.4s;
  }
  .create-nowloading div p span:nth-of-type(5) {
    animation-delay: 0.5s;
  }
  .create-nowloading div p span:nth-of-type(6) {
    animation-delay: 0.6s;
  }
  .create-nowloading div p span:nth-of-type(7) {
    animation-delay: 0.7s;
  }
  .create-nowloading div p span:nth-of-type(8) {
    animation-delay: 0.8s;
  }
  .create-nowloading div p span:nth-of-type(9) {
    animation-delay: 0.9s;
  }
  .create-nowloading div p span:nth-of-type(10) {
    animation-delay: 1s;
  }
  .create-nowloading div p span:nth-of-type(11) {
    animation-delay: 1.1s;
  }
  .create-nowloading div p span:nth-of-type(12) {
    animation-delay: 1.2s;
  }
  .create-nowloading div p span:nth-of-type(13) {
    animation-delay: 1.3s;
  }
  .create-nowloading div p span:nth-of-type(3) {
    margin-right: 6px;
  }
  .create-firsttime div p span {
    font-weight: 700;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes jump {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  40% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(-8px);
    animation-timing-function: ease-in;
  }
  60% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0);
  }
}
/******************************************************************************
GNB
******************************************************************************/
#gnb-container {
  position: relative;
  z-index: 1000;
  min-width: auto;
  display: none;
}
#gnb-container #gnb2 {
  min-width: auto;
}

/******************************************************************************
header
******************************************************************************/
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  height: 0;
  padding-top: 12.2666666667%;
}
header h1 {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  margin: 1.0666666667% 0% 1.0666666667% 3.4666666667%;
  width: 19.2%;
}
header h1 img {
  width: 100%;
  height: auto;
}
header .band {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 0;
  padding-top: 12.2666666667%;
  background: -webkit-linear-gradient(left, #ffac00 0%, #ff6fab 100%);
  background: linear-gradient(to right, #ffac00 0%, #ff6fab 100%);
  border-bottom: solid 2px #000;
}
header .band::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
}
header .band .inner {
  width: 100%;
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
}
header .band .btn-menu {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  width: 5.6%;
  height: 0;
  padding-top: 4.8%;
  margin: 3.6% 3.6% 0% 0%;
  cursor: pointer;
}
header .band .btn-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  width: 100%;
  height: 0;
  padding-top: 9.5238095238%;
  margin-top: 0;
  transform: rotateZ(0deg);
}
header .band .btn-menu::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;
  width: 100%;
  height: 0;
  padding-top: 9.5238095238%;
  margin-bottom: 0;
  transform: rotateZ(0deg);
}
header .band .btn-menu span {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: #fff;
  width: 100%;
  height: 0;
  padding-top: 9.5238095238%;
  opacity: 1;
}
header .user {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  margin-top: 12.2666666667%;
  width: 100%;
  pointer-events: none;
}
header .user .before .btn-login {
  position: absolute;
  top: 0;
  right: 0;
  width: 14.6666666667%;
  height: 0;
  padding-top: 8%;
  margin: -10.1333333333% 13.3333333333% 0% 0%;
  pointer-events: all;
}
header .user .before .btn-login a {
  background: url(https://static.nexon.co.jp/maplestory/ver2021/common/btn_hd_login.png) no-repeat center center;
  background-size: contain;
}
header .user .before .btn-login a:hover {
  background-position: center center !important;
}
header .user .after {
  overflow: hidden;
}
header .user .after .avatar {
  position: absolute;
  top: 0;
  right: 0;
  width: 7.4666666667%;
  height: 0;
  padding-top: 7.4666666667%;
  margin: -9.8666666667% 13.3333333333% 0% 0%;
  background: #ffb751;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  pointer-events: all;
}
header .user .after .avatar img {
  position: absolute;
  top: 0;
  left: 0;
  margin: -17.8571428571% 0% 0% -35.7142857143%;
  width: 171.4285714286%;
  height: 171.4285714286%;
}
header .user .notset {
  overflow: hidden;
}
header .user .notset .avatar {
  position: absolute;
  top: 0;
  right: 0;
  width: 7.4666666667%;
  height: 0;
  padding-top: 7.4666666667%;
  margin: -9.8666666667% 13.3333333333% 0% 0%;
  overflow: hidden;
  cursor: pointer;
  pointer-events: all;
}
header .user .notset .avatar img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
header .user .maintenance p {
  position: absolute;
  top: 0;
  right: 0;
  width: 24.5333333333%;
  height: 0;
  padding-top: 3.7333333333%;
  margin: -8% 13.3333333333% 0% 0%;
  background: url(https://static.nexon.co.jp/maplestory/ver2021/common/bg_hd_maintenance.png) no-repeat 0 0;
  background-size: contain;
}
header .user .maintenance p span {
  display: none;
}
header .user .buttons {
  position: relative;
  width: 100%;
  background: #000;
  padding-top: 3.4666666667%;
  border-bottom: solid 1px #505050;
  pointer-events: none;
  transform: translateY(-110%);
  pointer-events: all;
}
header .user .buttons li {
  pointer-events: all;
  padding-top: 12%;
  border-top: solid 1px #505050;
}
header .user .buttons li a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  margin-left: 4.8%;
  height: 0;
  padding-top: 7.4666666667%;
}
header .user .buttons li.btn-mynote a::before {
  background: url(https://static.nexon.co.jp/maplestory/ver2021/common/btn_hd_mynote.png) no-repeat 0 0;
  background-size: contain;
  width: 22.9333333333%;
}
header .user .buttons li.btn-idadminister a::before {
  background: url(https://static.nexon.co.jp/maplestory/ver2021/common/btn_hd_idadminister.png) no-repeat 0 0;
  background-size: contain;
  width: 39.2%;
}
header .user .buttons li.btn-community a::before {
  background: url(https://static.nexon.co.jp/maplestory/ver2021/common/btn_hd_community.png) no-repeat 0 0;
  background-size: contain;
  width: 53.8666666667%;
}
header .user .buttons li.btn-pointcharge a::before {
  background: url(https://static.nexon.co.jp/maplestory/ver2021/common/btn_hd_pointcharge.png) no-repeat 0 0;
  background-size: contain;
  width: 43.7333333333%;
}
header .user .buttons li.btn-logout a::before {
  background: url(https://static.nexon.co.jp/maplestory/ver2021/common/btn_hd_logout.png) no-repeat 0 0;
  background-size: contain;
  width: 27.7333333333%;
}
header nav {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  background: #000;
  transform: translateY(-120%);
  min-height: 101vh;
  overflow: hidden;
}
header nav > ul {
  position: relative;
  width: 100%;
  font-size: 4vw;
}
header nav > ul > li {
  position: relative;
}
header nav > ul > li > p {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 12%;
  cursor: pointer;
}
header nav > ul > li > p::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  margin-left: 4%;
  height: 0;
  padding-top: 7.4666666667%;
}
header nav > ul > li > p span {
  display: none;
}
header nav > ul > li a {
  color: #fff;
  padding: 3.2% 0% 3.2% 0%;
  border-top: dotted 1px #505050;
}
header nav > ul > li ul {
  position: relative;
}
header nav > ul > li ul::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  margin: -6.1333333333% 4.5333333333% 0% 0%;
  background: #fff;
  width: 4%;
  height: 0;
  padding-top: 0.5333333333%;
  transform: rotateZ(0deg);
  pointer-events: none;
}
header nav > ul > li ul::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  margin: -7.8666666667% 6.2666666667% 0% 0%;
  background: #fff;
  width: 0.5333333333%;
  height: 0;
  padding-top: 4%;
  transform: rotateZ(0deg);
  pointer-events: none;
}
header nav > ul > li ul li {
  width: 100%;
  display: none;
}
header nav > ul > li ul.open::before {
  transform: rotateZ(-180deg);
}
header nav > ul > li ul.open::after {
  transform: rotateZ(-270deg);
}
header nav > ul {
  padding-top: 15.7333333333%;
  border-bottom: solid 1px #505050;
  margin-bottom: 40%;
}
header nav > ul > li {
  border-top: solid 1px #505050;
}
header nav > ul > li > ul > li > a {
  padding-left: 9.6%;
}
header nav > ul > li > ul > li > ul > li > a {
  padding-left: 14.4%;
}
header nav > ul > li > ul > li > ul > li > p {
  cursor: pointer;
  border-top: dotted 1px #505050;
  padding: 3.2% 0% 3.2% 14.4%;
}
header nav > ul > li > ul > li > ul > li > p span {
  color: #fff;
  display: block;
}
header nav > ul > li > ul > li > ul > li > ul > li > a {
  padding-left: 19.2%;
}
header nav .menu-notice > p::before {
  width: 22.9333333333%;
  background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_gm_notice_sp.png) no-repeat 0 0/100% auto;
}
header nav .menu-notice ul .active a {
  color: #000;
  background: #a4d05b;
}
header nav .menu-gameintroduction > p::before {
  width: 28.2666666667%;
  background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_gm_gameintroduction_sp.png) no-repeat 0 0/100% auto;
}
header nav .menu-gameintroduction ul .active a {
  color: #000;
  background: #e4d01b;
}
header nav .menu-job > p::before {
  width: 24%;
  background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_gm_job_sp.png) no-repeat 0 0/100% auto;
}
header nav .menu-job ul .active a {
  color: #000;
  background: #ffcd00;
}
header nav .menu-community > p::before {
  width: 31.4666666667%;
  background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_gm_community_sp.png) no-repeat 0 0/100% auto;
}
header nav .menu-community ul .active a {
  color: #000;
  background: #ffbc00;
}
header nav .menu-support > p::before {
  width: 22.4%;
  background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_gm_support_sp.png) no-repeat 0 0/100% auto;
}
header nav .menu-support ul .active a {
  color: #000;
  background: #ffa400;
}
header.openmenu {
  position: absolute;
}
header.openmenu .band::before {
  opacity: 1;
}
header.openmenu .btn-menu::before {
  transform: rotateZ(-315deg);
  margin-top: 38.0952380952%;
}
header.openmenu .btn-menu::after {
  transform: rotateZ(315deg);
  margin-bottom: 38.0952380952%;
}
header.openmenu .btn-menu span {
  opacity: 0;
}
header.openmenu nav {
  transform: translateY(0%);
  position: absolute;
}
header.openmenu nav ul li ul::before, header.openmenu nav ul li ul::after {
  transition: transform 0.3s ease;
}
header.openuser .band::before {
  opacity: 1;
}
header.openuser .user .after .buttons,
header.openuser .user .notset .buttons {
  transform: translateY(0%);
}
header.animation .band::before {
  transition: opacity 0.4s ease 0.1s;
}
header.animation .band .btn-menu::before, header.animation .band .btn-menu::after,
header.animation .band .btn-menu span {
  transition: all 0.4s ease 0s;
}
header.animation .user .after .buttons,
header.animation .user .notset .buttons {
  transition: transform 0.2s ease 0.1s;
}
header.animation nav {
  transition: transform 0.4s ease 0s;
}
header.openmenu.animation .band::before {
  transition: opacity 0.3s ease 0s;
}
header.openmenu.animation nav ul li ul::before, header.openmenu.animation nav ul li ul::after {
  transition: none;
}

header.openmenu ~ main,
header.openmenu ~ footer {
  display: none;
}

header.openmenu.animation ~ main,
header.openmenu.animation ~ footer {
  display: block;
}

/******************************************************************************
main
******************************************************************************/
main {
  position: relative;
  z-index: 10;
  margin: 12.2666666667% 0% 8% 0%;
  overflow: hidden;
}
main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 0;
  padding-top: 41.3333333333%;
  background: url(https://static.nexon.co.jp/maplestory/ver2021/common/bg_body.png) repeat-x center top;
  background-size: auto 100%;
}
main .breadcrumb {
  position: relative;
  z-index: 5;
  width: 100%;
  background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/bg_status.png) repeat 0 0/10px 10px;
}
main .breadcrumb ::-webkit-scrollbar {
  height: 0;
}
main .breadcrumb ol {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.3333333333% 4% 1.6%;
  overflow-x: scroll;
}
main .breadcrumb li {
  position: relative;
  font-size: 2.4vw;
  font-weight: 500;
  color: #fff;
  line-height: 1;
  padding: 0 0.5em 0 1em;
  white-space: nowrap;
}
main .breadcrumb li::before {
  content: ">";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 2.4vw;
  line-height: 1;
}
main .breadcrumb li:first-child {
  padding-left: 0;
}
main .breadcrumb li:first-child::before {
  content: normal;
}
main .breadcrumb li a {
  color: #fff;
}

/******************************************************************************
article
******************************************************************************/
article {
  position: relative;
  z-index: 5;
  padding: 0 4%;
  font-size: 1.6vw;
}
article h2 {
  text-align: center;
  font-size: 5.6vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  padding: 10.1449275362% 0 4.347826087%;
}
article .contents {
  font-size: 3.2vw;
}
article .contents .pager {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  margin: 4.5248868778% auto;
}
article .contents .pager p {
  font-size: 2.9333333333vw;
  background: #ceb084;
  border-radius: 100%;
  line-height: 1;
  margin: 0;
}
article .contents .pager p a,
article .contents .pager p span {
  position: static;
  color: #fff;
  padding: 0.4em;
  text-decoration: none;
  transform: scaleX(0.5);
}
article .contents .pager ol {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  margin: 0 0.5em;
}
article .contents .pager ol li {
  margin-bottom: 0;
  font-size: 2.6666666667vw;
  background: #ceb084;
  font-weight: bold;
  line-height: 1;
}
article .contents .pager ol li.prev {
  border-radius: 50px 0 0 50px;
  padding-left: 0.8em;
}
article .contents .pager ol li.next {
  border-radius: 0 50px 50px 0;
  padding-right: 0.8em;
}
article .contents .pager ol a {
  display: block;
  color: #fff;
  padding: 0.9em 0.5em;
  text-decoration: underline;
}
article .contents .pager ol a:hover {
  color: #fff;
}
article .contents .pager ol span {
  display: block;
  color: #bb0000;
  padding: 0.9em 0.5em;
}
article h3 {
  position: relative;
  border-top: solid 2px #373737;
  background: #f6f6f6;
  font-size: 4.2666666667vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  margin-top: 5.7971014493%;
  padding: 5.7971014493% 0% 3.768115942% 3.768115942%;
  border-bottom: solid 1px #e8e8e8;
}
article section .inner > div {
  padding-top: 5.7971014493%;
  margin: 0 1.4492753623%;
}
article .totop {
  display: none;
}

/******************************************************************************
side-menu
******************************************************************************/
.side-menu {
  display: none;
}

/******************************************************************************
footer
******************************************************************************/
footer {
  position: relative;
  z-index: 5;
  background: #373737;
  font-size: 2.1333333333vw;
  color: #fff;
  text-align: center;
  padding-bottom: 17.3333333333%;
  line-height: 1;
}
footer::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: url(https://static.nexon.co.jp/maplestory/ver2021/common/nexon.png) no-repeat 0 0;
  background-size: contain;
  width: 5.6%;
  height: 0;
  padding-top: 5.3333333333%;
  margin-bottom: 6%;
}
footer a {
  text-decoration: underline;
}
footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 85.3333333333%;
  margin: 0 auto;
  padding-top: 5.8666666667%;
}
footer ul li {
  position: relative;
  margin: 0.4em 0.4em 0 0;
  padding-right: 0.6em;
}
footer ul li::after {
  content: "|";
  font-size: 0.8em;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
footer ul li:last-child {
  margin-right: 0;
  padding-right: 0;
}
footer ul li:last-child::after {
  content: normal;
}
footer p {
  margin-top: 4.5333333333%;
}
footer p a {
  color: #0aa0d2;
}

/******************************************************************************
コミュニティポイント
******************************************************************************/
.login-point {
  width: 275px;
  height: 330px;
  position: fixed;
  z-index: 1000;
  left: 0;
  bottom: -376px;
}
.login-point::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: url(https://static.nexon.co.jp/maplestory/ver2017/common/bg_login_char.png) no-repeat 0 0;
  background-size: contain;
  width: 140px;
  height: 220px;
}
.login-point .inner {
  position: absolute;
  top: 0;
  left: 35px;
  z-index: 5;
  background: url(https://static.nexon.co.jp/maplestory/ver2017/common/bg_login_point.png) no-repeat 0 0;
  background-size: 100%;
  width: 240px;
  height: 225px;
  transform-origin: left bottom;
  transform: scale(0.1);
}
.login-point .inner p {
  font-size: 0;
  overflow: hidden;
}
.login-point .inner p .point {
  position: absolute;
  top: 50px;
  left: 60px;
  display: block;
  font-size: 40px;
  font-weight: 500;
  color: #ee3000;
  line-height: 1;
}
.login-point .inner p .total-point {
  position: absolute;
  top: 129px;
  left: 70px;
  display: block;
  width: 40px;
  font-size: 18px;
  font-weight: 500;
  color: #665030;
  text-align: right;
  line-height: 1;
}
.login-point.open {
  bottom: -46px;
}
.login-point.open .inner {
  transform: scale(1);
}
.login-point.animation {
  transition: all 0.3s ease 0.3s;
}
.login-point.animation .inner {
  transition: all 0.6s cubic-bezier(0.5, -0.2, 0, 0.6) 0s;
}
.login-point.open.animation {
  transition: all 0.3s cubic-bezier(0, 0.4, 0.5, 1.2);
}
.login-point.open.animation .inner {
  transition: all 0.3s cubic-bezier(0, 0.4, 0.5, 1.2) 0.3s;
}

:placeholder-shown {
  color: #b5b5b5;
}

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

:-moz-placeholder {
  color: #b5b5b5;
  opacity: 1;
}

::-moz-placeholder {
  color: #b5b5b5;
  opacity: 1;
}

::-ms-input-placeholder {
  color: #b5b5b5;
}

::placeholder {
  color: #b5b5b5;
}

:focus:placeholder-shown {
  color: transparent;
}

:focus::-webkit-input-placeholder {
  color: transparent;
}

:focus:-moz-placeholder {
  color: transparent;
}

:focus::-moz-placeholder {
  color: transparent;
}

:focus::-ms-input-placeholder {
  color: transparent;
}

:focus::placeholder {
  color: transparent;
}

/******************************************************************************
チャットボット
******************************************************************************/
.chatbot {
  position: fixed;
  z-index: 100;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #ff5a5a;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.4);
  transform: translateY(100%);
  transition: transform 0.4s ease-out;
}
.chatbot.pcview {
  width: 375px;
  max-height: 580px;
}
.chatbot.pcview .header .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-top: 80%;
  margin-top: -80%;
  transform: translateX(0);
  border-radius: 0%;
  background: rgba(105, 196, 222, 0);
  pointer-events: none;
  transition: margin 1s ease;
}
.chatbot.pcview .header .inner::before {
  content: "";
}
.chatbot.pcview .header .inner .icon {
  width: 26.6666666667%;
  padding-top: 26.6666666667%;
  margin: 50.6666666667% 0 0 70.6666666667%;
}
.chatbot.pcview .header .inner .icon span {
  width: 75%;
  padding-top: 78%;
  margin: 40% 0 0 90%;
}
.chatbot.pcview .header .inner .icon::after {
  width: 75%;
  padding-top: 32%;
  margin: 7% 0 0 15%;
  background: url(https://static.nexon.co.jp/maplestory/ver2021/chatbot/icn_text.png) no-repeat 0 0/100% auto;
}
.chatbot.pcview .body {
  font-size: 15px;
}
.chatbot.pcview .body .inner::-webkit-scrollbar {
  width: 4px;
}
.chatbot.pcview .body .inner::-webkit-scrollbar-thumb {
  background: #bcbcbc;
  border-radius: 20px;
}
.chatbot .header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  background: #ff5a5a;
  width: 100%;
  height: 0;
  padding-top: 16.5333333333%;
}
.chatbot .header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 58.4%;
  height: 0;
  padding-top: 10.4%;
  margin: 3.2% 0 0 17.3333333333%;
  background: url(https://static.nexon.co.jp/maplestory/ver2021/chatbot/ttl.png) no-repeat 0 0/100% auto;
}
.chatbot .header .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-top: 80%;
  margin-top: -80%;
  transform: translateX(0);
  border-radius: 0%;
  background: rgba(105, 196, 222, 0);
  pointer-events: none;
  transition: margin 1s ease;
}
.chatbot .header .inner::before {
  content: normal;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  padding-top: 17.6%;
  margin: 56% 0 0 72%;
  background: url(https://static.nexon.co.jp/maplestory/ver2021/chatbot/icn_fukidashi.png) no-repeat 0 0/cover;
  pointer-events: all;
  cursor: pointer;
}
.chatbot .header .inner .icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 0;
  padding-top: 20%;
  margin: 57.3333333333% 0 0 77.3333333333%;
  border-radius: 100%;
  background: rgb(255, 90, 90);
  overflow: hidden;
  pointer-events: all;
  cursor: pointer;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.4);
  transform: scale(0);
}
.chatbot .header .inner .icon.visible {
  overflow: visible;
}
.chatbot .header .inner .icon span {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 85.3333333333%;
  height: 0;
  padding-top: 88.6666666667%;
  margin: 29.3333333333% 0 0 92%;
  transform: translate(-100%, 0) scale(1);
}
.chatbot .header .inner .icon span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(0);
  background: url(https://static.nexon.co.jp/maplestory/ver2021/chatbot/icn_kinoko.png) no-repeat 0 0/100% auto;
}
.chatbot .header .inner .icon::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 50.6666666667%;
  height: 0;
  padding-top: 16%;
  margin: 12% 0 0 25.3333333333%;
  background: url(https://static.nexon.co.jp/maplestory/ver2021/chatbot/icn_text_sp.png) no-repeat 0 0/100% auto;
}
.chatbot .header .inner.active::before {
  width: 53.6%;
  margin: 56% 0 0 18.6666666667%;
  transition: width 0.5s ease 0.3s, margin 0.5s ease 0.3s;
}
.chatbot .header .inner.active .icon {
  transform: scale(1);
  transition: transform 0.5s ease 0s;
}
.chatbot .header .btn-chatbot-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 8%;
  height: 0;
  padding-top: 8%;
  margin: 4.5333333333% 3.7333333333% 0 0;
  transform: rotateZ(-45deg);
  cursor: pointer;
}
.chatbot .header .btn-chatbot-close::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 0;
  padding-top: 16.6666666667%;
  border-radius: 10%/100%;
  background: #fff;
}
.chatbot .header .btn-chatbot-close::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16.6666666667%;
  height: 0;
  padding-top: 100%;
  border-radius: 100%/10%;
  background: #fff;
}
.chatbot.open-1 .header .inner {
  margin-top: 0;
}
.chatbot.open-1 .header .inner .icon span {
  animation: kinokoY-N 1s ease;
}
.chatbot.open-2 .header .inner {
  margin-top: 0;
}
.chatbot.open-2 .header .inner .icon span {
  animation: kinokoY-R 1s ease;
}
.chatbot.open-2 .header .inner .icon span::before {
  animation: kinokoX-R 0.5s linear;
}
.chatbot.open-3 .header .inner {
  margin-top: 0;
}
.chatbot.open-3 .header .inner .icon span {
  animation: kinokoY-SR 1s ease;
}
.chatbot.open-3 .header .inner .icon span::before {
  animation: kinokoX-SR 0.5s linear;
}
.chatbot.complete {
  transform: translateY(0);
}
.chatbot.complete .header .inner {
  width: 13.3333333333%;
  height: 0;
  padding-top: 13.3333333333%;
  margin-top: 1.6%;
  transform: translateX(12%);
  border-radius: 100%;
  background: rgb(105, 196, 222);
  pointer-events: all;
  overflow: hidden;
  transition: none;
}
.chatbot.complete .header .inner::before {
  content: normal;
}
.chatbot.complete .header .inner .icon {
  width: 100%;
  height: 0;
  padding-top: 100%;
  margin: 0;
  background: rgba(255, 90, 90, 0);
  overflow: visible;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0);
}
.chatbot.complete .header .inner .icon span {
  width: 150%;
  height: 0;
  padding-top: 156%;
  margin: -12% 0 0 -10%;
  transform: translate(0, 0) scale(0.75);
  transition: margin 0.5s ease 0.5s;
}
.chatbot.complete .header .inner .icon::after {
  content: normal;
}
.chatbot.complete .header .inner .icon.jump {
  animation: kinoko-jump 0.5s linear;
}
.chatbot.close {
  transform: translateY(100%);
}
.chatbot.slide .body {
  padding: 18.9333333333% 0 38.6666666667%;
}
.chatbot.slide .footer {
  padding-top: 36.8%;
}
.chatbot.slide .footer .search .btn-slide {
  transform: rotateX(180deg);
}
.chatbot .body {
  position: relative;
  z-index: 5;
  width: 98.4%;
  margin: 0 auto;
  min-height: 100%;
  height: 100%;
  padding: 18.9333333333% 0 14.6666666667%;
  background: #fff;
  font-size: 4vw;
  color: #9c5b22;
  transition: all 0.5s ease;
}
.chatbot .body .inner {
  height: 100%;
  overflow-y: scroll;
  margin: 0 1.3550135501% 0 1.8970189702%;
  padding: 1.8970189702% 3.2520325203% 1.8970189702% 1.8970189702%;
}
.chatbot .body .inner > div:not(:nth-of-type(1)) {
  padding-top: 4.4642857143%;
}
.chatbot .body .inner .question {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.chatbot .body .inner .question.show {
  opacity: 1;
}
.chatbot .body .inner .question::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 2.6785714286%;
  height: 0;
  padding-top: 2.9761904762%;
  margin: 10.4166666667% 0 0 17.2619047619%;
  background: #ffcc32;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.chatbot .body .inner .question::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 2.6785714286%;
  height: 0;
  padding-top: 2.9761904762%;
  margin: 10.4166666667% 0 0 17.2619047619%;
  transform: translateX(0.2em);
  background: #fff;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.chatbot .body .inner .question .icon {
  position: relative;
  width: 14.880952381%;
  height: 0;
  padding-top: 14.880952381%;
  margin: 0;
  background: rgb(105, 196, 222);
  border-radius: 100%;
  overflow: hidden;
}
.chatbot .body .inner .question .icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 0;
  padding-top: 156%;
  margin: -12% 0 0 -10%;
  transform: translate(0, 0) scale(0.75);
  background: url(https://static.nexon.co.jp/maplestory/ver2021/chatbot/icn_kinoko.png) no-repeat 0 0/100% auto;
}
.chatbot .body .inner .question .box {
  width: 80.3571428571%;
  padding: 2.9761904762%;
  margin-top: 1.4880952381%;
  box-shadow: 0px 0px 0px 0.1em #ffcc32 inset;
  border-radius: 10px;
}
.chatbot .body .inner .question .box p:not(:last-child) {
  margin-bottom: 1em;
}
.chatbot .body .inner .question .box .choice:not(:last-child) {
  margin-bottom: 1em;
}
.chatbot .body .inner .question .box .choice li {
  padding: 0.4em 1.4em;
  text-align: center;
  color: #fff;
  background: #3db5ef;
  border-radius: 10px;
  cursor: pointer;
}
.chatbot .body .inner .question .box .choice li:not(:last-child) {
  margin-bottom: 3.7037037037%;
}
.chatbot .body .inner .question .box a {
  font-weight: 700;
  display: inline-block;
  text-decoration: underline;
}
.chatbot .body .inner .question .box a:hover {
  text-decoration: none;
}
.chatbot .body .inner .question .box img {
  width: 100%;
  height: auto;
}
.chatbot .body .inner .question .box h4 {
  background: url(https://static.nexon.co.jp/maplestory/ver2021/cms/h4.png) no-repeat 0 0.2rem/1rem auto;
  font-size: min(4.2666666667vw, 16px);
  font-weight: 500;
  color: #0956F2;
  margin-bottom: 1rem;
  padding-left: 1rem;
}
.chatbot .body .inner .question .box h5 {
  background: url(https://static.nexon.co.jp/maplestory/ver2021/cms/h5.png) no-repeat 0 0.05rem/1rem auto;
  font-size: min(3.7333333333vw, 14px);
  font-weight: 500;
  color: #33870A;
  margin: 0 0 1rem 0;
  padding-left: 1rem;
}
.chatbot .body .inner .question .box p, .chatbot .body .inner .question .box ul, .chatbot .body .inner .question .box ol, .chatbot .body .inner .question .box dl {
  margin-bottom: 1rem;
}
.chatbot .body .inner .question .box a {
  display: inline-block;
  font-weight: 500;
  text-decoration: underline;
}
.chatbot .body .inner .question .box img {
  vertical-align: middle;
}
.chatbot .body .inner .question .box em {
  font-weight: 700;
  font-style: normal;
}
.chatbot .body .inner .question .box strong {
  font-weight: 700;
  font-style: normal;
  color: #f31010;
}
.chatbot .body .inner .question .box .toc {
  border: solid 1px #F1E0C6;
  margin: 1rem 4.347826087% 0;
  padding: 1rem;
}
.chatbot .body .inner .question .box .toc p {
  font-weight: 700;
  text-align: center;
  font-size: min(4.8vw, 18px);
}
.chatbot .body .inner .question .box .toc ul {
  list-style-type: disc;
  margin: 0 0 0 1rem;
}
.chatbot .body .inner .question .box .toc ol {
  list-style-type: decimal;
  margin: 0 0 0 1rem;
}
.chatbot .body .inner .question .box .toc li {
  line-height: 1.6;
}
.chatbot .body .inner .question .box .toc li a {
  display: inline;
}
.chatbot .body .inner .question .box .toc li a:hover {
  text-decoration: none;
}
.chatbot .body .inner .question .box dl dt {
  font-size: min(3.7333333333vw, 14px);
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.chatbot .body .inner .question .box dl dd {
  margin-bottom: 1rem;
}
.chatbot .body .inner .question .box dl.arrow dt {
  color: #8ba417;
  background: url(https://static.nexon.co.jp/maplestory/ver2021/cms/icn_arrow.png) no-repeat 0 50%/1rem auto;
  padding-left: 1rem;
}
.chatbot .body .inner .question .box dl.abreast {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.chatbot .body .inner .question .box dl.abreast dt {
  font-size: min(3.2vw, 12px);
}
.chatbot .body .inner .question .box dl.abreast dd {
  margin-bottom: 0.5rem;
}
.chatbot .body .inner .question .box .resize-view .w1,
.chatbot .body .inner .question .box .w1 {
  width: 1%;
}
.chatbot .body .inner .question .box .resize-view .w1.abreast,
.chatbot .body .inner .question .box .w1.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w1.abreast dt,
.chatbot .body .inner .question .box .w1.abreast dt {
  width: 1%;
}
.chatbot .body .inner .question .box .resize-view .w1.abreast dd,
.chatbot .body .inner .question .box .w1.abreast dd {
  width: 99%;
}
.chatbot .body .inner .question .box .resize-view .w2,
.chatbot .body .inner .question .box .w2 {
  width: 2%;
}
.chatbot .body .inner .question .box .resize-view .w2.abreast,
.chatbot .body .inner .question .box .w2.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w2.abreast dt,
.chatbot .body .inner .question .box .w2.abreast dt {
  width: 2%;
}
.chatbot .body .inner .question .box .resize-view .w2.abreast dd,
.chatbot .body .inner .question .box .w2.abreast dd {
  width: 98%;
}
.chatbot .body .inner .question .box .resize-view .w3,
.chatbot .body .inner .question .box .w3 {
  width: 3%;
}
.chatbot .body .inner .question .box .resize-view .w3.abreast,
.chatbot .body .inner .question .box .w3.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w3.abreast dt,
.chatbot .body .inner .question .box .w3.abreast dt {
  width: 3%;
}
.chatbot .body .inner .question .box .resize-view .w3.abreast dd,
.chatbot .body .inner .question .box .w3.abreast dd {
  width: 97%;
}
.chatbot .body .inner .question .box .resize-view .w4,
.chatbot .body .inner .question .box .w4 {
  width: 4%;
}
.chatbot .body .inner .question .box .resize-view .w4.abreast,
.chatbot .body .inner .question .box .w4.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w4.abreast dt,
.chatbot .body .inner .question .box .w4.abreast dt {
  width: 4%;
}
.chatbot .body .inner .question .box .resize-view .w4.abreast dd,
.chatbot .body .inner .question .box .w4.abreast dd {
  width: 96%;
}
.chatbot .body .inner .question .box .resize-view .w5,
.chatbot .body .inner .question .box .w5 {
  width: 5%;
}
.chatbot .body .inner .question .box .resize-view .w5.abreast,
.chatbot .body .inner .question .box .w5.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w5.abreast dt,
.chatbot .body .inner .question .box .w5.abreast dt {
  width: 5%;
}
.chatbot .body .inner .question .box .resize-view .w5.abreast dd,
.chatbot .body .inner .question .box .w5.abreast dd {
  width: 95%;
}
.chatbot .body .inner .question .box .resize-view .w6,
.chatbot .body .inner .question .box .w6 {
  width: 6%;
}
.chatbot .body .inner .question .box .resize-view .w6.abreast,
.chatbot .body .inner .question .box .w6.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w6.abreast dt,
.chatbot .body .inner .question .box .w6.abreast dt {
  width: 6%;
}
.chatbot .body .inner .question .box .resize-view .w6.abreast dd,
.chatbot .body .inner .question .box .w6.abreast dd {
  width: 94%;
}
.chatbot .body .inner .question .box .resize-view .w7,
.chatbot .body .inner .question .box .w7 {
  width: 7%;
}
.chatbot .body .inner .question .box .resize-view .w7.abreast,
.chatbot .body .inner .question .box .w7.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w7.abreast dt,
.chatbot .body .inner .question .box .w7.abreast dt {
  width: 7%;
}
.chatbot .body .inner .question .box .resize-view .w7.abreast dd,
.chatbot .body .inner .question .box .w7.abreast dd {
  width: 93%;
}
.chatbot .body .inner .question .box .resize-view .w8,
.chatbot .body .inner .question .box .w8 {
  width: 8%;
}
.chatbot .body .inner .question .box .resize-view .w8.abreast,
.chatbot .body .inner .question .box .w8.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w8.abreast dt,
.chatbot .body .inner .question .box .w8.abreast dt {
  width: 8%;
}
.chatbot .body .inner .question .box .resize-view .w8.abreast dd,
.chatbot .body .inner .question .box .w8.abreast dd {
  width: 92%;
}
.chatbot .body .inner .question .box .resize-view .w9,
.chatbot .body .inner .question .box .w9 {
  width: 9%;
}
.chatbot .body .inner .question .box .resize-view .w9.abreast,
.chatbot .body .inner .question .box .w9.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w9.abreast dt,
.chatbot .body .inner .question .box .w9.abreast dt {
  width: 9%;
}
.chatbot .body .inner .question .box .resize-view .w9.abreast dd,
.chatbot .body .inner .question .box .w9.abreast dd {
  width: 91%;
}
.chatbot .body .inner .question .box .resize-view .w10,
.chatbot .body .inner .question .box .w10 {
  width: 10%;
}
.chatbot .body .inner .question .box .resize-view .w10.abreast,
.chatbot .body .inner .question .box .w10.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w10.abreast dt,
.chatbot .body .inner .question .box .w10.abreast dt {
  width: 10%;
}
.chatbot .body .inner .question .box .resize-view .w10.abreast dd,
.chatbot .body .inner .question .box .w10.abreast dd {
  width: 90%;
}
.chatbot .body .inner .question .box .resize-view .w11,
.chatbot .body .inner .question .box .w11 {
  width: 11%;
}
.chatbot .body .inner .question .box .resize-view .w11.abreast,
.chatbot .body .inner .question .box .w11.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w11.abreast dt,
.chatbot .body .inner .question .box .w11.abreast dt {
  width: 11%;
}
.chatbot .body .inner .question .box .resize-view .w11.abreast dd,
.chatbot .body .inner .question .box .w11.abreast dd {
  width: 89%;
}
.chatbot .body .inner .question .box .resize-view .w12,
.chatbot .body .inner .question .box .w12 {
  width: 12%;
}
.chatbot .body .inner .question .box .resize-view .w12.abreast,
.chatbot .body .inner .question .box .w12.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w12.abreast dt,
.chatbot .body .inner .question .box .w12.abreast dt {
  width: 12%;
}
.chatbot .body .inner .question .box .resize-view .w12.abreast dd,
.chatbot .body .inner .question .box .w12.abreast dd {
  width: 88%;
}
.chatbot .body .inner .question .box .resize-view .w13,
.chatbot .body .inner .question .box .w13 {
  width: 13%;
}
.chatbot .body .inner .question .box .resize-view .w13.abreast,
.chatbot .body .inner .question .box .w13.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w13.abreast dt,
.chatbot .body .inner .question .box .w13.abreast dt {
  width: 13%;
}
.chatbot .body .inner .question .box .resize-view .w13.abreast dd,
.chatbot .body .inner .question .box .w13.abreast dd {
  width: 87%;
}
.chatbot .body .inner .question .box .resize-view .w14,
.chatbot .body .inner .question .box .w14 {
  width: 14%;
}
.chatbot .body .inner .question .box .resize-view .w14.abreast,
.chatbot .body .inner .question .box .w14.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w14.abreast dt,
.chatbot .body .inner .question .box .w14.abreast dt {
  width: 14%;
}
.chatbot .body .inner .question .box .resize-view .w14.abreast dd,
.chatbot .body .inner .question .box .w14.abreast dd {
  width: 86%;
}
.chatbot .body .inner .question .box .resize-view .w15,
.chatbot .body .inner .question .box .w15 {
  width: 15%;
}
.chatbot .body .inner .question .box .resize-view .w15.abreast,
.chatbot .body .inner .question .box .w15.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w15.abreast dt,
.chatbot .body .inner .question .box .w15.abreast dt {
  width: 15%;
}
.chatbot .body .inner .question .box .resize-view .w15.abreast dd,
.chatbot .body .inner .question .box .w15.abreast dd {
  width: 85%;
}
.chatbot .body .inner .question .box .resize-view .w16,
.chatbot .body .inner .question .box .w16 {
  width: 16%;
}
.chatbot .body .inner .question .box .resize-view .w16.abreast,
.chatbot .body .inner .question .box .w16.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w16.abreast dt,
.chatbot .body .inner .question .box .w16.abreast dt {
  width: 16%;
}
.chatbot .body .inner .question .box .resize-view .w16.abreast dd,
.chatbot .body .inner .question .box .w16.abreast dd {
  width: 84%;
}
.chatbot .body .inner .question .box .resize-view .w17,
.chatbot .body .inner .question .box .w17 {
  width: 17%;
}
.chatbot .body .inner .question .box .resize-view .w17.abreast,
.chatbot .body .inner .question .box .w17.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w17.abreast dt,
.chatbot .body .inner .question .box .w17.abreast dt {
  width: 17%;
}
.chatbot .body .inner .question .box .resize-view .w17.abreast dd,
.chatbot .body .inner .question .box .w17.abreast dd {
  width: 83%;
}
.chatbot .body .inner .question .box .resize-view .w18,
.chatbot .body .inner .question .box .w18 {
  width: 18%;
}
.chatbot .body .inner .question .box .resize-view .w18.abreast,
.chatbot .body .inner .question .box .w18.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w18.abreast dt,
.chatbot .body .inner .question .box .w18.abreast dt {
  width: 18%;
}
.chatbot .body .inner .question .box .resize-view .w18.abreast dd,
.chatbot .body .inner .question .box .w18.abreast dd {
  width: 82%;
}
.chatbot .body .inner .question .box .resize-view .w19,
.chatbot .body .inner .question .box .w19 {
  width: 19%;
}
.chatbot .body .inner .question .box .resize-view .w19.abreast,
.chatbot .body .inner .question .box .w19.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w19.abreast dt,
.chatbot .body .inner .question .box .w19.abreast dt {
  width: 19%;
}
.chatbot .body .inner .question .box .resize-view .w19.abreast dd,
.chatbot .body .inner .question .box .w19.abreast dd {
  width: 81%;
}
.chatbot .body .inner .question .box .resize-view .w20,
.chatbot .body .inner .question .box .w20 {
  width: 20%;
}
.chatbot .body .inner .question .box .resize-view .w20.abreast,
.chatbot .body .inner .question .box .w20.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w20.abreast dt,
.chatbot .body .inner .question .box .w20.abreast dt {
  width: 20%;
}
.chatbot .body .inner .question .box .resize-view .w20.abreast dd,
.chatbot .body .inner .question .box .w20.abreast dd {
  width: 80%;
}
.chatbot .body .inner .question .box .resize-view .w21,
.chatbot .body .inner .question .box .w21 {
  width: 21%;
}
.chatbot .body .inner .question .box .resize-view .w21.abreast,
.chatbot .body .inner .question .box .w21.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w21.abreast dt,
.chatbot .body .inner .question .box .w21.abreast dt {
  width: 21%;
}
.chatbot .body .inner .question .box .resize-view .w21.abreast dd,
.chatbot .body .inner .question .box .w21.abreast dd {
  width: 79%;
}
.chatbot .body .inner .question .box .resize-view .w22,
.chatbot .body .inner .question .box .w22 {
  width: 22%;
}
.chatbot .body .inner .question .box .resize-view .w22.abreast,
.chatbot .body .inner .question .box .w22.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w22.abreast dt,
.chatbot .body .inner .question .box .w22.abreast dt {
  width: 22%;
}
.chatbot .body .inner .question .box .resize-view .w22.abreast dd,
.chatbot .body .inner .question .box .w22.abreast dd {
  width: 78%;
}
.chatbot .body .inner .question .box .resize-view .w23,
.chatbot .body .inner .question .box .w23 {
  width: 23%;
}
.chatbot .body .inner .question .box .resize-view .w23.abreast,
.chatbot .body .inner .question .box .w23.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w23.abreast dt,
.chatbot .body .inner .question .box .w23.abreast dt {
  width: 23%;
}
.chatbot .body .inner .question .box .resize-view .w23.abreast dd,
.chatbot .body .inner .question .box .w23.abreast dd {
  width: 77%;
}
.chatbot .body .inner .question .box .resize-view .w24,
.chatbot .body .inner .question .box .w24 {
  width: 24%;
}
.chatbot .body .inner .question .box .resize-view .w24.abreast,
.chatbot .body .inner .question .box .w24.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w24.abreast dt,
.chatbot .body .inner .question .box .w24.abreast dt {
  width: 24%;
}
.chatbot .body .inner .question .box .resize-view .w24.abreast dd,
.chatbot .body .inner .question .box .w24.abreast dd {
  width: 76%;
}
.chatbot .body .inner .question .box .resize-view .w25,
.chatbot .body .inner .question .box .w25 {
  width: 25%;
}
.chatbot .body .inner .question .box .resize-view .w25.abreast,
.chatbot .body .inner .question .box .w25.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w25.abreast dt,
.chatbot .body .inner .question .box .w25.abreast dt {
  width: 25%;
}
.chatbot .body .inner .question .box .resize-view .w25.abreast dd,
.chatbot .body .inner .question .box .w25.abreast dd {
  width: 75%;
}
.chatbot .body .inner .question .box .resize-view .w26,
.chatbot .body .inner .question .box .w26 {
  width: 26%;
}
.chatbot .body .inner .question .box .resize-view .w26.abreast,
.chatbot .body .inner .question .box .w26.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w26.abreast dt,
.chatbot .body .inner .question .box .w26.abreast dt {
  width: 26%;
}
.chatbot .body .inner .question .box .resize-view .w26.abreast dd,
.chatbot .body .inner .question .box .w26.abreast dd {
  width: 74%;
}
.chatbot .body .inner .question .box .resize-view .w27,
.chatbot .body .inner .question .box .w27 {
  width: 27%;
}
.chatbot .body .inner .question .box .resize-view .w27.abreast,
.chatbot .body .inner .question .box .w27.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w27.abreast dt,
.chatbot .body .inner .question .box .w27.abreast dt {
  width: 27%;
}
.chatbot .body .inner .question .box .resize-view .w27.abreast dd,
.chatbot .body .inner .question .box .w27.abreast dd {
  width: 73%;
}
.chatbot .body .inner .question .box .resize-view .w28,
.chatbot .body .inner .question .box .w28 {
  width: 28%;
}
.chatbot .body .inner .question .box .resize-view .w28.abreast,
.chatbot .body .inner .question .box .w28.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w28.abreast dt,
.chatbot .body .inner .question .box .w28.abreast dt {
  width: 28%;
}
.chatbot .body .inner .question .box .resize-view .w28.abreast dd,
.chatbot .body .inner .question .box .w28.abreast dd {
  width: 72%;
}
.chatbot .body .inner .question .box .resize-view .w29,
.chatbot .body .inner .question .box .w29 {
  width: 29%;
}
.chatbot .body .inner .question .box .resize-view .w29.abreast,
.chatbot .body .inner .question .box .w29.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w29.abreast dt,
.chatbot .body .inner .question .box .w29.abreast dt {
  width: 29%;
}
.chatbot .body .inner .question .box .resize-view .w29.abreast dd,
.chatbot .body .inner .question .box .w29.abreast dd {
  width: 71%;
}
.chatbot .body .inner .question .box .resize-view .w30,
.chatbot .body .inner .question .box .w30 {
  width: 30%;
}
.chatbot .body .inner .question .box .resize-view .w30.abreast,
.chatbot .body .inner .question .box .w30.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w30.abreast dt,
.chatbot .body .inner .question .box .w30.abreast dt {
  width: 30%;
}
.chatbot .body .inner .question .box .resize-view .w30.abreast dd,
.chatbot .body .inner .question .box .w30.abreast dd {
  width: 70%;
}
.chatbot .body .inner .question .box .resize-view .w31,
.chatbot .body .inner .question .box .w31 {
  width: 31%;
}
.chatbot .body .inner .question .box .resize-view .w31.abreast,
.chatbot .body .inner .question .box .w31.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w31.abreast dt,
.chatbot .body .inner .question .box .w31.abreast dt {
  width: 31%;
}
.chatbot .body .inner .question .box .resize-view .w31.abreast dd,
.chatbot .body .inner .question .box .w31.abreast dd {
  width: 69%;
}
.chatbot .body .inner .question .box .resize-view .w32,
.chatbot .body .inner .question .box .w32 {
  width: 32%;
}
.chatbot .body .inner .question .box .resize-view .w32.abreast,
.chatbot .body .inner .question .box .w32.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w32.abreast dt,
.chatbot .body .inner .question .box .w32.abreast dt {
  width: 32%;
}
.chatbot .body .inner .question .box .resize-view .w32.abreast dd,
.chatbot .body .inner .question .box .w32.abreast dd {
  width: 68%;
}
.chatbot .body .inner .question .box .resize-view .w33,
.chatbot .body .inner .question .box .w33 {
  width: 33%;
}
.chatbot .body .inner .question .box .resize-view .w33.abreast,
.chatbot .body .inner .question .box .w33.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w33.abreast dt,
.chatbot .body .inner .question .box .w33.abreast dt {
  width: 33%;
}
.chatbot .body .inner .question .box .resize-view .w33.abreast dd,
.chatbot .body .inner .question .box .w33.abreast dd {
  width: 67%;
}
.chatbot .body .inner .question .box .resize-view .w34,
.chatbot .body .inner .question .box .w34 {
  width: 34%;
}
.chatbot .body .inner .question .box .resize-view .w34.abreast,
.chatbot .body .inner .question .box .w34.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w34.abreast dt,
.chatbot .body .inner .question .box .w34.abreast dt {
  width: 34%;
}
.chatbot .body .inner .question .box .resize-view .w34.abreast dd,
.chatbot .body .inner .question .box .w34.abreast dd {
  width: 66%;
}
.chatbot .body .inner .question .box .resize-view .w35,
.chatbot .body .inner .question .box .w35 {
  width: 35%;
}
.chatbot .body .inner .question .box .resize-view .w35.abreast,
.chatbot .body .inner .question .box .w35.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w35.abreast dt,
.chatbot .body .inner .question .box .w35.abreast dt {
  width: 35%;
}
.chatbot .body .inner .question .box .resize-view .w35.abreast dd,
.chatbot .body .inner .question .box .w35.abreast dd {
  width: 65%;
}
.chatbot .body .inner .question .box .resize-view .w36,
.chatbot .body .inner .question .box .w36 {
  width: 36%;
}
.chatbot .body .inner .question .box .resize-view .w36.abreast,
.chatbot .body .inner .question .box .w36.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w36.abreast dt,
.chatbot .body .inner .question .box .w36.abreast dt {
  width: 36%;
}
.chatbot .body .inner .question .box .resize-view .w36.abreast dd,
.chatbot .body .inner .question .box .w36.abreast dd {
  width: 64%;
}
.chatbot .body .inner .question .box .resize-view .w37,
.chatbot .body .inner .question .box .w37 {
  width: 37%;
}
.chatbot .body .inner .question .box .resize-view .w37.abreast,
.chatbot .body .inner .question .box .w37.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w37.abreast dt,
.chatbot .body .inner .question .box .w37.abreast dt {
  width: 37%;
}
.chatbot .body .inner .question .box .resize-view .w37.abreast dd,
.chatbot .body .inner .question .box .w37.abreast dd {
  width: 63%;
}
.chatbot .body .inner .question .box .resize-view .w38,
.chatbot .body .inner .question .box .w38 {
  width: 38%;
}
.chatbot .body .inner .question .box .resize-view .w38.abreast,
.chatbot .body .inner .question .box .w38.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w38.abreast dt,
.chatbot .body .inner .question .box .w38.abreast dt {
  width: 38%;
}
.chatbot .body .inner .question .box .resize-view .w38.abreast dd,
.chatbot .body .inner .question .box .w38.abreast dd {
  width: 62%;
}
.chatbot .body .inner .question .box .resize-view .w39,
.chatbot .body .inner .question .box .w39 {
  width: 39%;
}
.chatbot .body .inner .question .box .resize-view .w39.abreast,
.chatbot .body .inner .question .box .w39.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w39.abreast dt,
.chatbot .body .inner .question .box .w39.abreast dt {
  width: 39%;
}
.chatbot .body .inner .question .box .resize-view .w39.abreast dd,
.chatbot .body .inner .question .box .w39.abreast dd {
  width: 61%;
}
.chatbot .body .inner .question .box .resize-view .w40,
.chatbot .body .inner .question .box .w40 {
  width: 40%;
}
.chatbot .body .inner .question .box .resize-view .w40.abreast,
.chatbot .body .inner .question .box .w40.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w40.abreast dt,
.chatbot .body .inner .question .box .w40.abreast dt {
  width: 40%;
}
.chatbot .body .inner .question .box .resize-view .w40.abreast dd,
.chatbot .body .inner .question .box .w40.abreast dd {
  width: 60%;
}
.chatbot .body .inner .question .box .resize-view .w41,
.chatbot .body .inner .question .box .w41 {
  width: 41%;
}
.chatbot .body .inner .question .box .resize-view .w41.abreast,
.chatbot .body .inner .question .box .w41.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w41.abreast dt,
.chatbot .body .inner .question .box .w41.abreast dt {
  width: 41%;
}
.chatbot .body .inner .question .box .resize-view .w41.abreast dd,
.chatbot .body .inner .question .box .w41.abreast dd {
  width: 59%;
}
.chatbot .body .inner .question .box .resize-view .w42,
.chatbot .body .inner .question .box .w42 {
  width: 42%;
}
.chatbot .body .inner .question .box .resize-view .w42.abreast,
.chatbot .body .inner .question .box .w42.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w42.abreast dt,
.chatbot .body .inner .question .box .w42.abreast dt {
  width: 42%;
}
.chatbot .body .inner .question .box .resize-view .w42.abreast dd,
.chatbot .body .inner .question .box .w42.abreast dd {
  width: 58%;
}
.chatbot .body .inner .question .box .resize-view .w43,
.chatbot .body .inner .question .box .w43 {
  width: 43%;
}
.chatbot .body .inner .question .box .resize-view .w43.abreast,
.chatbot .body .inner .question .box .w43.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w43.abreast dt,
.chatbot .body .inner .question .box .w43.abreast dt {
  width: 43%;
}
.chatbot .body .inner .question .box .resize-view .w43.abreast dd,
.chatbot .body .inner .question .box .w43.abreast dd {
  width: 57%;
}
.chatbot .body .inner .question .box .resize-view .w44,
.chatbot .body .inner .question .box .w44 {
  width: 44%;
}
.chatbot .body .inner .question .box .resize-view .w44.abreast,
.chatbot .body .inner .question .box .w44.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w44.abreast dt,
.chatbot .body .inner .question .box .w44.abreast dt {
  width: 44%;
}
.chatbot .body .inner .question .box .resize-view .w44.abreast dd,
.chatbot .body .inner .question .box .w44.abreast dd {
  width: 56%;
}
.chatbot .body .inner .question .box .resize-view .w45,
.chatbot .body .inner .question .box .w45 {
  width: 45%;
}
.chatbot .body .inner .question .box .resize-view .w45.abreast,
.chatbot .body .inner .question .box .w45.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w45.abreast dt,
.chatbot .body .inner .question .box .w45.abreast dt {
  width: 45%;
}
.chatbot .body .inner .question .box .resize-view .w45.abreast dd,
.chatbot .body .inner .question .box .w45.abreast dd {
  width: 55%;
}
.chatbot .body .inner .question .box .resize-view .w46,
.chatbot .body .inner .question .box .w46 {
  width: 46%;
}
.chatbot .body .inner .question .box .resize-view .w46.abreast,
.chatbot .body .inner .question .box .w46.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w46.abreast dt,
.chatbot .body .inner .question .box .w46.abreast dt {
  width: 46%;
}
.chatbot .body .inner .question .box .resize-view .w46.abreast dd,
.chatbot .body .inner .question .box .w46.abreast dd {
  width: 54%;
}
.chatbot .body .inner .question .box .resize-view .w47,
.chatbot .body .inner .question .box .w47 {
  width: 47%;
}
.chatbot .body .inner .question .box .resize-view .w47.abreast,
.chatbot .body .inner .question .box .w47.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w47.abreast dt,
.chatbot .body .inner .question .box .w47.abreast dt {
  width: 47%;
}
.chatbot .body .inner .question .box .resize-view .w47.abreast dd,
.chatbot .body .inner .question .box .w47.abreast dd {
  width: 53%;
}
.chatbot .body .inner .question .box .resize-view .w48,
.chatbot .body .inner .question .box .w48 {
  width: 48%;
}
.chatbot .body .inner .question .box .resize-view .w48.abreast,
.chatbot .body .inner .question .box .w48.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w48.abreast dt,
.chatbot .body .inner .question .box .w48.abreast dt {
  width: 48%;
}
.chatbot .body .inner .question .box .resize-view .w48.abreast dd,
.chatbot .body .inner .question .box .w48.abreast dd {
  width: 52%;
}
.chatbot .body .inner .question .box .resize-view .w49,
.chatbot .body .inner .question .box .w49 {
  width: 49%;
}
.chatbot .body .inner .question .box .resize-view .w49.abreast,
.chatbot .body .inner .question .box .w49.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w49.abreast dt,
.chatbot .body .inner .question .box .w49.abreast dt {
  width: 49%;
}
.chatbot .body .inner .question .box .resize-view .w49.abreast dd,
.chatbot .body .inner .question .box .w49.abreast dd {
  width: 51%;
}
.chatbot .body .inner .question .box .resize-view .w50,
.chatbot .body .inner .question .box .w50 {
  width: 50%;
}
.chatbot .body .inner .question .box .resize-view .w50.abreast,
.chatbot .body .inner .question .box .w50.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w50.abreast dt,
.chatbot .body .inner .question .box .w50.abreast dt {
  width: 50%;
}
.chatbot .body .inner .question .box .resize-view .w50.abreast dd,
.chatbot .body .inner .question .box .w50.abreast dd {
  width: 50%;
}
.chatbot .body .inner .question .box .resize-view .w51,
.chatbot .body .inner .question .box .w51 {
  width: 51%;
}
.chatbot .body .inner .question .box .resize-view .w51.abreast,
.chatbot .body .inner .question .box .w51.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w51.abreast dt,
.chatbot .body .inner .question .box .w51.abreast dt {
  width: 51%;
}
.chatbot .body .inner .question .box .resize-view .w51.abreast dd,
.chatbot .body .inner .question .box .w51.abreast dd {
  width: 49%;
}
.chatbot .body .inner .question .box .resize-view .w52,
.chatbot .body .inner .question .box .w52 {
  width: 52%;
}
.chatbot .body .inner .question .box .resize-view .w52.abreast,
.chatbot .body .inner .question .box .w52.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w52.abreast dt,
.chatbot .body .inner .question .box .w52.abreast dt {
  width: 52%;
}
.chatbot .body .inner .question .box .resize-view .w52.abreast dd,
.chatbot .body .inner .question .box .w52.abreast dd {
  width: 48%;
}
.chatbot .body .inner .question .box .resize-view .w53,
.chatbot .body .inner .question .box .w53 {
  width: 53%;
}
.chatbot .body .inner .question .box .resize-view .w53.abreast,
.chatbot .body .inner .question .box .w53.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w53.abreast dt,
.chatbot .body .inner .question .box .w53.abreast dt {
  width: 53%;
}
.chatbot .body .inner .question .box .resize-view .w53.abreast dd,
.chatbot .body .inner .question .box .w53.abreast dd {
  width: 47%;
}
.chatbot .body .inner .question .box .resize-view .w54,
.chatbot .body .inner .question .box .w54 {
  width: 54%;
}
.chatbot .body .inner .question .box .resize-view .w54.abreast,
.chatbot .body .inner .question .box .w54.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w54.abreast dt,
.chatbot .body .inner .question .box .w54.abreast dt {
  width: 54%;
}
.chatbot .body .inner .question .box .resize-view .w54.abreast dd,
.chatbot .body .inner .question .box .w54.abreast dd {
  width: 46%;
}
.chatbot .body .inner .question .box .resize-view .w55,
.chatbot .body .inner .question .box .w55 {
  width: 55%;
}
.chatbot .body .inner .question .box .resize-view .w55.abreast,
.chatbot .body .inner .question .box .w55.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w55.abreast dt,
.chatbot .body .inner .question .box .w55.abreast dt {
  width: 55%;
}
.chatbot .body .inner .question .box .resize-view .w55.abreast dd,
.chatbot .body .inner .question .box .w55.abreast dd {
  width: 45%;
}
.chatbot .body .inner .question .box .resize-view .w56,
.chatbot .body .inner .question .box .w56 {
  width: 56%;
}
.chatbot .body .inner .question .box .resize-view .w56.abreast,
.chatbot .body .inner .question .box .w56.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w56.abreast dt,
.chatbot .body .inner .question .box .w56.abreast dt {
  width: 56%;
}
.chatbot .body .inner .question .box .resize-view .w56.abreast dd,
.chatbot .body .inner .question .box .w56.abreast dd {
  width: 44%;
}
.chatbot .body .inner .question .box .resize-view .w57,
.chatbot .body .inner .question .box .w57 {
  width: 57%;
}
.chatbot .body .inner .question .box .resize-view .w57.abreast,
.chatbot .body .inner .question .box .w57.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w57.abreast dt,
.chatbot .body .inner .question .box .w57.abreast dt {
  width: 57%;
}
.chatbot .body .inner .question .box .resize-view .w57.abreast dd,
.chatbot .body .inner .question .box .w57.abreast dd {
  width: 43%;
}
.chatbot .body .inner .question .box .resize-view .w58,
.chatbot .body .inner .question .box .w58 {
  width: 58%;
}
.chatbot .body .inner .question .box .resize-view .w58.abreast,
.chatbot .body .inner .question .box .w58.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w58.abreast dt,
.chatbot .body .inner .question .box .w58.abreast dt {
  width: 58%;
}
.chatbot .body .inner .question .box .resize-view .w58.abreast dd,
.chatbot .body .inner .question .box .w58.abreast dd {
  width: 42%;
}
.chatbot .body .inner .question .box .resize-view .w59,
.chatbot .body .inner .question .box .w59 {
  width: 59%;
}
.chatbot .body .inner .question .box .resize-view .w59.abreast,
.chatbot .body .inner .question .box .w59.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w59.abreast dt,
.chatbot .body .inner .question .box .w59.abreast dt {
  width: 59%;
}
.chatbot .body .inner .question .box .resize-view .w59.abreast dd,
.chatbot .body .inner .question .box .w59.abreast dd {
  width: 41%;
}
.chatbot .body .inner .question .box .resize-view .w60,
.chatbot .body .inner .question .box .w60 {
  width: 60%;
}
.chatbot .body .inner .question .box .resize-view .w60.abreast,
.chatbot .body .inner .question .box .w60.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w60.abreast dt,
.chatbot .body .inner .question .box .w60.abreast dt {
  width: 60%;
}
.chatbot .body .inner .question .box .resize-view .w60.abreast dd,
.chatbot .body .inner .question .box .w60.abreast dd {
  width: 40%;
}
.chatbot .body .inner .question .box .resize-view .w61,
.chatbot .body .inner .question .box .w61 {
  width: 61%;
}
.chatbot .body .inner .question .box .resize-view .w61.abreast,
.chatbot .body .inner .question .box .w61.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w61.abreast dt,
.chatbot .body .inner .question .box .w61.abreast dt {
  width: 61%;
}
.chatbot .body .inner .question .box .resize-view .w61.abreast dd,
.chatbot .body .inner .question .box .w61.abreast dd {
  width: 39%;
}
.chatbot .body .inner .question .box .resize-view .w62,
.chatbot .body .inner .question .box .w62 {
  width: 62%;
}
.chatbot .body .inner .question .box .resize-view .w62.abreast,
.chatbot .body .inner .question .box .w62.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w62.abreast dt,
.chatbot .body .inner .question .box .w62.abreast dt {
  width: 62%;
}
.chatbot .body .inner .question .box .resize-view .w62.abreast dd,
.chatbot .body .inner .question .box .w62.abreast dd {
  width: 38%;
}
.chatbot .body .inner .question .box .resize-view .w63,
.chatbot .body .inner .question .box .w63 {
  width: 63%;
}
.chatbot .body .inner .question .box .resize-view .w63.abreast,
.chatbot .body .inner .question .box .w63.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w63.abreast dt,
.chatbot .body .inner .question .box .w63.abreast dt {
  width: 63%;
}
.chatbot .body .inner .question .box .resize-view .w63.abreast dd,
.chatbot .body .inner .question .box .w63.abreast dd {
  width: 37%;
}
.chatbot .body .inner .question .box .resize-view .w64,
.chatbot .body .inner .question .box .w64 {
  width: 64%;
}
.chatbot .body .inner .question .box .resize-view .w64.abreast,
.chatbot .body .inner .question .box .w64.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w64.abreast dt,
.chatbot .body .inner .question .box .w64.abreast dt {
  width: 64%;
}
.chatbot .body .inner .question .box .resize-view .w64.abreast dd,
.chatbot .body .inner .question .box .w64.abreast dd {
  width: 36%;
}
.chatbot .body .inner .question .box .resize-view .w65,
.chatbot .body .inner .question .box .w65 {
  width: 65%;
}
.chatbot .body .inner .question .box .resize-view .w65.abreast,
.chatbot .body .inner .question .box .w65.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w65.abreast dt,
.chatbot .body .inner .question .box .w65.abreast dt {
  width: 65%;
}
.chatbot .body .inner .question .box .resize-view .w65.abreast dd,
.chatbot .body .inner .question .box .w65.abreast dd {
  width: 35%;
}
.chatbot .body .inner .question .box .resize-view .w66,
.chatbot .body .inner .question .box .w66 {
  width: 66%;
}
.chatbot .body .inner .question .box .resize-view .w66.abreast,
.chatbot .body .inner .question .box .w66.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w66.abreast dt,
.chatbot .body .inner .question .box .w66.abreast dt {
  width: 66%;
}
.chatbot .body .inner .question .box .resize-view .w66.abreast dd,
.chatbot .body .inner .question .box .w66.abreast dd {
  width: 34%;
}
.chatbot .body .inner .question .box .resize-view .w67,
.chatbot .body .inner .question .box .w67 {
  width: 67%;
}
.chatbot .body .inner .question .box .resize-view .w67.abreast,
.chatbot .body .inner .question .box .w67.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w67.abreast dt,
.chatbot .body .inner .question .box .w67.abreast dt {
  width: 67%;
}
.chatbot .body .inner .question .box .resize-view .w67.abreast dd,
.chatbot .body .inner .question .box .w67.abreast dd {
  width: 33%;
}
.chatbot .body .inner .question .box .resize-view .w68,
.chatbot .body .inner .question .box .w68 {
  width: 68%;
}
.chatbot .body .inner .question .box .resize-view .w68.abreast,
.chatbot .body .inner .question .box .w68.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w68.abreast dt,
.chatbot .body .inner .question .box .w68.abreast dt {
  width: 68%;
}
.chatbot .body .inner .question .box .resize-view .w68.abreast dd,
.chatbot .body .inner .question .box .w68.abreast dd {
  width: 32%;
}
.chatbot .body .inner .question .box .resize-view .w69,
.chatbot .body .inner .question .box .w69 {
  width: 69%;
}
.chatbot .body .inner .question .box .resize-view .w69.abreast,
.chatbot .body .inner .question .box .w69.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w69.abreast dt,
.chatbot .body .inner .question .box .w69.abreast dt {
  width: 69%;
}
.chatbot .body .inner .question .box .resize-view .w69.abreast dd,
.chatbot .body .inner .question .box .w69.abreast dd {
  width: 31%;
}
.chatbot .body .inner .question .box .resize-view .w70,
.chatbot .body .inner .question .box .w70 {
  width: 70%;
}
.chatbot .body .inner .question .box .resize-view .w70.abreast,
.chatbot .body .inner .question .box .w70.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w70.abreast dt,
.chatbot .body .inner .question .box .w70.abreast dt {
  width: 70%;
}
.chatbot .body .inner .question .box .resize-view .w70.abreast dd,
.chatbot .body .inner .question .box .w70.abreast dd {
  width: 30%;
}
.chatbot .body .inner .question .box .resize-view .w71,
.chatbot .body .inner .question .box .w71 {
  width: 71%;
}
.chatbot .body .inner .question .box .resize-view .w71.abreast,
.chatbot .body .inner .question .box .w71.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w71.abreast dt,
.chatbot .body .inner .question .box .w71.abreast dt {
  width: 71%;
}
.chatbot .body .inner .question .box .resize-view .w71.abreast dd,
.chatbot .body .inner .question .box .w71.abreast dd {
  width: 29%;
}
.chatbot .body .inner .question .box .resize-view .w72,
.chatbot .body .inner .question .box .w72 {
  width: 72%;
}
.chatbot .body .inner .question .box .resize-view .w72.abreast,
.chatbot .body .inner .question .box .w72.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w72.abreast dt,
.chatbot .body .inner .question .box .w72.abreast dt {
  width: 72%;
}
.chatbot .body .inner .question .box .resize-view .w72.abreast dd,
.chatbot .body .inner .question .box .w72.abreast dd {
  width: 28%;
}
.chatbot .body .inner .question .box .resize-view .w73,
.chatbot .body .inner .question .box .w73 {
  width: 73%;
}
.chatbot .body .inner .question .box .resize-view .w73.abreast,
.chatbot .body .inner .question .box .w73.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w73.abreast dt,
.chatbot .body .inner .question .box .w73.abreast dt {
  width: 73%;
}
.chatbot .body .inner .question .box .resize-view .w73.abreast dd,
.chatbot .body .inner .question .box .w73.abreast dd {
  width: 27%;
}
.chatbot .body .inner .question .box .resize-view .w74,
.chatbot .body .inner .question .box .w74 {
  width: 74%;
}
.chatbot .body .inner .question .box .resize-view .w74.abreast,
.chatbot .body .inner .question .box .w74.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w74.abreast dt,
.chatbot .body .inner .question .box .w74.abreast dt {
  width: 74%;
}
.chatbot .body .inner .question .box .resize-view .w74.abreast dd,
.chatbot .body .inner .question .box .w74.abreast dd {
  width: 26%;
}
.chatbot .body .inner .question .box .resize-view .w75,
.chatbot .body .inner .question .box .w75 {
  width: 75%;
}
.chatbot .body .inner .question .box .resize-view .w75.abreast,
.chatbot .body .inner .question .box .w75.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w75.abreast dt,
.chatbot .body .inner .question .box .w75.abreast dt {
  width: 75%;
}
.chatbot .body .inner .question .box .resize-view .w75.abreast dd,
.chatbot .body .inner .question .box .w75.abreast dd {
  width: 25%;
}
.chatbot .body .inner .question .box .resize-view .w76,
.chatbot .body .inner .question .box .w76 {
  width: 76%;
}
.chatbot .body .inner .question .box .resize-view .w76.abreast,
.chatbot .body .inner .question .box .w76.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w76.abreast dt,
.chatbot .body .inner .question .box .w76.abreast dt {
  width: 76%;
}
.chatbot .body .inner .question .box .resize-view .w76.abreast dd,
.chatbot .body .inner .question .box .w76.abreast dd {
  width: 24%;
}
.chatbot .body .inner .question .box .resize-view .w77,
.chatbot .body .inner .question .box .w77 {
  width: 77%;
}
.chatbot .body .inner .question .box .resize-view .w77.abreast,
.chatbot .body .inner .question .box .w77.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w77.abreast dt,
.chatbot .body .inner .question .box .w77.abreast dt {
  width: 77%;
}
.chatbot .body .inner .question .box .resize-view .w77.abreast dd,
.chatbot .body .inner .question .box .w77.abreast dd {
  width: 23%;
}
.chatbot .body .inner .question .box .resize-view .w78,
.chatbot .body .inner .question .box .w78 {
  width: 78%;
}
.chatbot .body .inner .question .box .resize-view .w78.abreast,
.chatbot .body .inner .question .box .w78.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w78.abreast dt,
.chatbot .body .inner .question .box .w78.abreast dt {
  width: 78%;
}
.chatbot .body .inner .question .box .resize-view .w78.abreast dd,
.chatbot .body .inner .question .box .w78.abreast dd {
  width: 22%;
}
.chatbot .body .inner .question .box .resize-view .w79,
.chatbot .body .inner .question .box .w79 {
  width: 79%;
}
.chatbot .body .inner .question .box .resize-view .w79.abreast,
.chatbot .body .inner .question .box .w79.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w79.abreast dt,
.chatbot .body .inner .question .box .w79.abreast dt {
  width: 79%;
}
.chatbot .body .inner .question .box .resize-view .w79.abreast dd,
.chatbot .body .inner .question .box .w79.abreast dd {
  width: 21%;
}
.chatbot .body .inner .question .box .resize-view .w80,
.chatbot .body .inner .question .box .w80 {
  width: 80%;
}
.chatbot .body .inner .question .box .resize-view .w80.abreast,
.chatbot .body .inner .question .box .w80.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w80.abreast dt,
.chatbot .body .inner .question .box .w80.abreast dt {
  width: 80%;
}
.chatbot .body .inner .question .box .resize-view .w80.abreast dd,
.chatbot .body .inner .question .box .w80.abreast dd {
  width: 20%;
}
.chatbot .body .inner .question .box .resize-view .w81,
.chatbot .body .inner .question .box .w81 {
  width: 81%;
}
.chatbot .body .inner .question .box .resize-view .w81.abreast,
.chatbot .body .inner .question .box .w81.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w81.abreast dt,
.chatbot .body .inner .question .box .w81.abreast dt {
  width: 81%;
}
.chatbot .body .inner .question .box .resize-view .w81.abreast dd,
.chatbot .body .inner .question .box .w81.abreast dd {
  width: 19%;
}
.chatbot .body .inner .question .box .resize-view .w82,
.chatbot .body .inner .question .box .w82 {
  width: 82%;
}
.chatbot .body .inner .question .box .resize-view .w82.abreast,
.chatbot .body .inner .question .box .w82.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w82.abreast dt,
.chatbot .body .inner .question .box .w82.abreast dt {
  width: 82%;
}
.chatbot .body .inner .question .box .resize-view .w82.abreast dd,
.chatbot .body .inner .question .box .w82.abreast dd {
  width: 18%;
}
.chatbot .body .inner .question .box .resize-view .w83,
.chatbot .body .inner .question .box .w83 {
  width: 83%;
}
.chatbot .body .inner .question .box .resize-view .w83.abreast,
.chatbot .body .inner .question .box .w83.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w83.abreast dt,
.chatbot .body .inner .question .box .w83.abreast dt {
  width: 83%;
}
.chatbot .body .inner .question .box .resize-view .w83.abreast dd,
.chatbot .body .inner .question .box .w83.abreast dd {
  width: 17%;
}
.chatbot .body .inner .question .box .resize-view .w84,
.chatbot .body .inner .question .box .w84 {
  width: 84%;
}
.chatbot .body .inner .question .box .resize-view .w84.abreast,
.chatbot .body .inner .question .box .w84.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w84.abreast dt,
.chatbot .body .inner .question .box .w84.abreast dt {
  width: 84%;
}
.chatbot .body .inner .question .box .resize-view .w84.abreast dd,
.chatbot .body .inner .question .box .w84.abreast dd {
  width: 16%;
}
.chatbot .body .inner .question .box .resize-view .w85,
.chatbot .body .inner .question .box .w85 {
  width: 85%;
}
.chatbot .body .inner .question .box .resize-view .w85.abreast,
.chatbot .body .inner .question .box .w85.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w85.abreast dt,
.chatbot .body .inner .question .box .w85.abreast dt {
  width: 85%;
}
.chatbot .body .inner .question .box .resize-view .w85.abreast dd,
.chatbot .body .inner .question .box .w85.abreast dd {
  width: 15%;
}
.chatbot .body .inner .question .box .resize-view .w86,
.chatbot .body .inner .question .box .w86 {
  width: 86%;
}
.chatbot .body .inner .question .box .resize-view .w86.abreast,
.chatbot .body .inner .question .box .w86.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w86.abreast dt,
.chatbot .body .inner .question .box .w86.abreast dt {
  width: 86%;
}
.chatbot .body .inner .question .box .resize-view .w86.abreast dd,
.chatbot .body .inner .question .box .w86.abreast dd {
  width: 14%;
}
.chatbot .body .inner .question .box .resize-view .w87,
.chatbot .body .inner .question .box .w87 {
  width: 87%;
}
.chatbot .body .inner .question .box .resize-view .w87.abreast,
.chatbot .body .inner .question .box .w87.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w87.abreast dt,
.chatbot .body .inner .question .box .w87.abreast dt {
  width: 87%;
}
.chatbot .body .inner .question .box .resize-view .w87.abreast dd,
.chatbot .body .inner .question .box .w87.abreast dd {
  width: 13%;
}
.chatbot .body .inner .question .box .resize-view .w88,
.chatbot .body .inner .question .box .w88 {
  width: 88%;
}
.chatbot .body .inner .question .box .resize-view .w88.abreast,
.chatbot .body .inner .question .box .w88.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w88.abreast dt,
.chatbot .body .inner .question .box .w88.abreast dt {
  width: 88%;
}
.chatbot .body .inner .question .box .resize-view .w88.abreast dd,
.chatbot .body .inner .question .box .w88.abreast dd {
  width: 12%;
}
.chatbot .body .inner .question .box .resize-view .w89,
.chatbot .body .inner .question .box .w89 {
  width: 89%;
}
.chatbot .body .inner .question .box .resize-view .w89.abreast,
.chatbot .body .inner .question .box .w89.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w89.abreast dt,
.chatbot .body .inner .question .box .w89.abreast dt {
  width: 89%;
}
.chatbot .body .inner .question .box .resize-view .w89.abreast dd,
.chatbot .body .inner .question .box .w89.abreast dd {
  width: 11%;
}
.chatbot .body .inner .question .box .resize-view .w90,
.chatbot .body .inner .question .box .w90 {
  width: 90%;
}
.chatbot .body .inner .question .box .resize-view .w90.abreast,
.chatbot .body .inner .question .box .w90.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w90.abreast dt,
.chatbot .body .inner .question .box .w90.abreast dt {
  width: 90%;
}
.chatbot .body .inner .question .box .resize-view .w90.abreast dd,
.chatbot .body .inner .question .box .w90.abreast dd {
  width: 10%;
}
.chatbot .body .inner .question .box .resize-view .w91,
.chatbot .body .inner .question .box .w91 {
  width: 91%;
}
.chatbot .body .inner .question .box .resize-view .w91.abreast,
.chatbot .body .inner .question .box .w91.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w91.abreast dt,
.chatbot .body .inner .question .box .w91.abreast dt {
  width: 91%;
}
.chatbot .body .inner .question .box .resize-view .w91.abreast dd,
.chatbot .body .inner .question .box .w91.abreast dd {
  width: 9%;
}
.chatbot .body .inner .question .box .resize-view .w92,
.chatbot .body .inner .question .box .w92 {
  width: 92%;
}
.chatbot .body .inner .question .box .resize-view .w92.abreast,
.chatbot .body .inner .question .box .w92.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w92.abreast dt,
.chatbot .body .inner .question .box .w92.abreast dt {
  width: 92%;
}
.chatbot .body .inner .question .box .resize-view .w92.abreast dd,
.chatbot .body .inner .question .box .w92.abreast dd {
  width: 8%;
}
.chatbot .body .inner .question .box .resize-view .w93,
.chatbot .body .inner .question .box .w93 {
  width: 93%;
}
.chatbot .body .inner .question .box .resize-view .w93.abreast,
.chatbot .body .inner .question .box .w93.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w93.abreast dt,
.chatbot .body .inner .question .box .w93.abreast dt {
  width: 93%;
}
.chatbot .body .inner .question .box .resize-view .w93.abreast dd,
.chatbot .body .inner .question .box .w93.abreast dd {
  width: 7%;
}
.chatbot .body .inner .question .box .resize-view .w94,
.chatbot .body .inner .question .box .w94 {
  width: 94%;
}
.chatbot .body .inner .question .box .resize-view .w94.abreast,
.chatbot .body .inner .question .box .w94.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w94.abreast dt,
.chatbot .body .inner .question .box .w94.abreast dt {
  width: 94%;
}
.chatbot .body .inner .question .box .resize-view .w94.abreast dd,
.chatbot .body .inner .question .box .w94.abreast dd {
  width: 6%;
}
.chatbot .body .inner .question .box .resize-view .w95,
.chatbot .body .inner .question .box .w95 {
  width: 95%;
}
.chatbot .body .inner .question .box .resize-view .w95.abreast,
.chatbot .body .inner .question .box .w95.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w95.abreast dt,
.chatbot .body .inner .question .box .w95.abreast dt {
  width: 95%;
}
.chatbot .body .inner .question .box .resize-view .w95.abreast dd,
.chatbot .body .inner .question .box .w95.abreast dd {
  width: 5%;
}
.chatbot .body .inner .question .box .resize-view .w96,
.chatbot .body .inner .question .box .w96 {
  width: 96%;
}
.chatbot .body .inner .question .box .resize-view .w96.abreast,
.chatbot .body .inner .question .box .w96.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w96.abreast dt,
.chatbot .body .inner .question .box .w96.abreast dt {
  width: 96%;
}
.chatbot .body .inner .question .box .resize-view .w96.abreast dd,
.chatbot .body .inner .question .box .w96.abreast dd {
  width: 4%;
}
.chatbot .body .inner .question .box .resize-view .w97,
.chatbot .body .inner .question .box .w97 {
  width: 97%;
}
.chatbot .body .inner .question .box .resize-view .w97.abreast,
.chatbot .body .inner .question .box .w97.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w97.abreast dt,
.chatbot .body .inner .question .box .w97.abreast dt {
  width: 97%;
}
.chatbot .body .inner .question .box .resize-view .w97.abreast dd,
.chatbot .body .inner .question .box .w97.abreast dd {
  width: 3%;
}
.chatbot .body .inner .question .box .resize-view .w98,
.chatbot .body .inner .question .box .w98 {
  width: 98%;
}
.chatbot .body .inner .question .box .resize-view .w98.abreast,
.chatbot .body .inner .question .box .w98.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w98.abreast dt,
.chatbot .body .inner .question .box .w98.abreast dt {
  width: 98%;
}
.chatbot .body .inner .question .box .resize-view .w98.abreast dd,
.chatbot .body .inner .question .box .w98.abreast dd {
  width: 2%;
}
.chatbot .body .inner .question .box .resize-view .w99,
.chatbot .body .inner .question .box .w99 {
  width: 99%;
}
.chatbot .body .inner .question .box .resize-view .w99.abreast,
.chatbot .body .inner .question .box .w99.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w99.abreast dt,
.chatbot .body .inner .question .box .w99.abreast dt {
  width: 99%;
}
.chatbot .body .inner .question .box .resize-view .w99.abreast dd,
.chatbot .body .inner .question .box .w99.abreast dd {
  width: 1%;
}
.chatbot .body .inner .question .box .resize-view .w100,
.chatbot .body .inner .question .box .w100 {
  width: 100%;
}
.chatbot .body .inner .question .box .resize-view .w100.abreast,
.chatbot .body .inner .question .box .w100.abreast {
  width: auto;
}
.chatbot .body .inner .question .box .resize-view .w100.abreast dt,
.chatbot .body .inner .question .box .w100.abreast dt {
  width: 100%;
}
.chatbot .body .inner .question .box .resize-view .w100.abreast dd,
.chatbot .body .inner .question .box .w100.abreast dd {
  width: 0%;
}
.chatbot .body .inner .question .box .blank2 {
  margin-bottom: 2rem !important;
}
.chatbot .body .inner .question .box .blank3 {
  margin-bottom: 3rem !important;
}
.chatbot .body .inner .question .box .blank4 {
  margin-bottom: 4rem !important;
}
.chatbot .body .inner .question .box .blank5 {
  margin-bottom: 5rem !important;
}
.chatbot .body .inner .question .box .blank6 {
  margin-bottom: 6rem !important;
}
.chatbot .body .inner .question .box .blank7 {
  margin-bottom: 7rem !important;
}
.chatbot .body .inner .question .box .blank8 {
  margin-bottom: 8rem !important;
}
.chatbot .body .inner .question .box .blank9 {
  margin-bottom: 9rem !important;
}
.chatbot .body .inner .question .box .blank10 {
  margin-bottom: 10rem !important;
}
.chatbot .body .inner .question .box .blank11 {
  margin-bottom: 11rem !important;
}
.chatbot .body .inner .question .box .blank12 {
  margin-bottom: 12rem !important;
}
.chatbot .body .inner .question .box .blank13 {
  margin-bottom: 13rem !important;
}
.chatbot .body .inner .question .box .blank14 {
  margin-bottom: 14rem !important;
}
.chatbot .body .inner .question .box .blank15 {
  margin-bottom: 15rem !important;
}
.chatbot .body .inner .question .box .blank16 {
  margin-bottom: 16rem !important;
}
.chatbot .body .inner .question .box .blank17 {
  margin-bottom: 17rem !important;
}
.chatbot .body .inner .question .box .blank18 {
  margin-bottom: 18rem !important;
}
.chatbot .body .inner .question .box .blank19 {
  margin-bottom: 19rem !important;
}
.chatbot .body .inner .question .box .blank20 {
  margin-bottom: 20rem !important;
}
.chatbot .body .inner .question .box .blank21 {
  margin-bottom: 21rem !important;
}
.chatbot .body .inner .question .box .blank22 {
  margin-bottom: 22rem !important;
}
.chatbot .body .inner .question .box .blank23 {
  margin-bottom: 23rem !important;
}
.chatbot .body .inner .question .box .blank24 {
  margin-bottom: 24rem !important;
}
.chatbot .body .inner .question .box .blank25 {
  margin-bottom: 25rem !important;
}
.chatbot .body .inner .question .box .blank26 {
  margin-bottom: 26rem !important;
}
.chatbot .body .inner .question .box .blank27 {
  margin-bottom: 27rem !important;
}
.chatbot .body .inner .question .box .blank28 {
  margin-bottom: 28rem !important;
}
.chatbot .body .inner .question .box .blank29 {
  margin-bottom: 29rem !important;
}
.chatbot .body .inner .question .box .blank30 {
  margin-bottom: 30rem !important;
}
.chatbot .body .inner .question .box .blank31 {
  margin-bottom: 31rem !important;
}
.chatbot .body .inner .question .box .blank32 {
  margin-bottom: 32rem !important;
}
.chatbot .body .inner .question .box .blank33 {
  margin-bottom: 33rem !important;
}
.chatbot .body .inner .question .box .blank34 {
  margin-bottom: 34rem !important;
}
.chatbot .body .inner .question .box .blank35 {
  margin-bottom: 35rem !important;
}
.chatbot .body .inner .question .box .blank36 {
  margin-bottom: 36rem !important;
}
.chatbot .body .inner .question .box .blank37 {
  margin-bottom: 37rem !important;
}
.chatbot .body .inner .question .box .blank38 {
  margin-bottom: 38rem !important;
}
.chatbot .body .inner .question .box .blank39 {
  margin-bottom: 39rem !important;
}
.chatbot .body .inner .question .box .blank40 {
  margin-bottom: 40rem !important;
}
.chatbot .body .inner .question .box .blank41 {
  margin-bottom: 41rem !important;
}
.chatbot .body .inner .question .box .blank42 {
  margin-bottom: 42rem !important;
}
.chatbot .body .inner .question .box .blank43 {
  margin-bottom: 43rem !important;
}
.chatbot .body .inner .question .box .blank44 {
  margin-bottom: 44rem !important;
}
.chatbot .body .inner .question .box .blank45 {
  margin-bottom: 45rem !important;
}
.chatbot .body .inner .question .box .blank46 {
  margin-bottom: 46rem !important;
}
.chatbot .body .inner .question .box .blank47 {
  margin-bottom: 47rem !important;
}
.chatbot .body .inner .question .box .blank48 {
  margin-bottom: 48rem !important;
}
.chatbot .body .inner .question .box .blank49 {
  margin-bottom: 49rem !important;
}
.chatbot .body .inner .question .box .blank50 {
  margin-bottom: 50rem !important;
}
.chatbot .body .inner .question .box .blank51 {
  margin-bottom: 51rem !important;
}
.chatbot .body .inner .question .box .blank52 {
  margin-bottom: 52rem !important;
}
.chatbot .body .inner .question .box .blank53 {
  margin-bottom: 53rem !important;
}
.chatbot .body .inner .question .box .blank54 {
  margin-bottom: 54rem !important;
}
.chatbot .body .inner .question .box .blank55 {
  margin-bottom: 55rem !important;
}
.chatbot .body .inner .question .box .blank56 {
  margin-bottom: 56rem !important;
}
.chatbot .body .inner .question .box .blank57 {
  margin-bottom: 57rem !important;
}
.chatbot .body .inner .question .box .blank58 {
  margin-bottom: 58rem !important;
}
.chatbot .body .inner .question .box .blank59 {
  margin-bottom: 59rem !important;
}
.chatbot .body .inner .question .box .blank60 {
  margin-bottom: 60rem !important;
}
.chatbot .body .inner .question .box .blank61 {
  margin-bottom: 61rem !important;
}
.chatbot .body .inner .question .box .blank62 {
  margin-bottom: 62rem !important;
}
.chatbot .body .inner .question .box .blank63 {
  margin-bottom: 63rem !important;
}
.chatbot .body .inner .question .box .blank64 {
  margin-bottom: 64rem !important;
}
.chatbot .body .inner .question .box .blank65 {
  margin-bottom: 65rem !important;
}
.chatbot .body .inner .question .box .blank66 {
  margin-bottom: 66rem !important;
}
.chatbot .body .inner .question .box .blank67 {
  margin-bottom: 67rem !important;
}
.chatbot .body .inner .question .box .blank68 {
  margin-bottom: 68rem !important;
}
.chatbot .body .inner .question .box .blank69 {
  margin-bottom: 69rem !important;
}
.chatbot .body .inner .question .box .blank70 {
  margin-bottom: 70rem !important;
}
.chatbot .body .inner .question .box .blank71 {
  margin-bottom: 71rem !important;
}
.chatbot .body .inner .question .box .blank72 {
  margin-bottom: 72rem !important;
}
.chatbot .body .inner .question .box .blank73 {
  margin-bottom: 73rem !important;
}
.chatbot .body .inner .question .box .blank74 {
  margin-bottom: 74rem !important;
}
.chatbot .body .inner .question .box .blank75 {
  margin-bottom: 75rem !important;
}
.chatbot .body .inner .question .box .blank76 {
  margin-bottom: 76rem !important;
}
.chatbot .body .inner .question .box .blank77 {
  margin-bottom: 77rem !important;
}
.chatbot .body .inner .question .box .blank78 {
  margin-bottom: 78rem !important;
}
.chatbot .body .inner .question .box .blank79 {
  margin-bottom: 79rem !important;
}
.chatbot .body .inner .question .box .blank80 {
  margin-bottom: 80rem !important;
}
.chatbot .body .inner .question .box .blank81 {
  margin-bottom: 81rem !important;
}
.chatbot .body .inner .question .box .blank82 {
  margin-bottom: 82rem !important;
}
.chatbot .body .inner .question .box .blank83 {
  margin-bottom: 83rem !important;
}
.chatbot .body .inner .question .box .blank84 {
  margin-bottom: 84rem !important;
}
.chatbot .body .inner .question .box .blank85 {
  margin-bottom: 85rem !important;
}
.chatbot .body .inner .question .box .blank86 {
  margin-bottom: 86rem !important;
}
.chatbot .body .inner .question .box .blank87 {
  margin-bottom: 87rem !important;
}
.chatbot .body .inner .question .box .blank88 {
  margin-bottom: 88rem !important;
}
.chatbot .body .inner .question .box .blank89 {
  margin-bottom: 89rem !important;
}
.chatbot .body .inner .question .box .blank90 {
  margin-bottom: 90rem !important;
}
.chatbot .body .inner .question .box .blank91 {
  margin-bottom: 91rem !important;
}
.chatbot .body .inner .question .box .blank92 {
  margin-bottom: 92rem !important;
}
.chatbot .body .inner .question .box .blank93 {
  margin-bottom: 93rem !important;
}
.chatbot .body .inner .question .box .blank94 {
  margin-bottom: 94rem !important;
}
.chatbot .body .inner .question .box .blank95 {
  margin-bottom: 95rem !important;
}
.chatbot .body .inner .question .box .blank96 {
  margin-bottom: 96rem !important;
}
.chatbot .body .inner .question .box .blank97 {
  margin-bottom: 97rem !important;
}
.chatbot .body .inner .question .box .blank98 {
  margin-bottom: 98rem !important;
}
.chatbot .body .inner .question .box .blank99 {
  margin-bottom: 99rem !important;
}
.chatbot .body .inner .question .box .blank100 {
  margin-bottom: 100rem !important;
}
.chatbot .body .inner .question .box p.indent,
.chatbot .body .inner .question .box .indent li,
.chatbot .body .inner .question .box p.caution,
.chatbot .body .inner .question .box .caution li {
  padding-left: 1em;
  text-indent: -1em;
}
.chatbot .body .inner .question .box p.indent a,
.chatbot .body .inner .question .box .indent li a,
.chatbot .body .inner .question .box p.caution a,
.chatbot .body .inner .question .box .caution li a {
  display: inline;
}
.chatbot .body .inner .question .box .caution {
  color: #8c6e44;
  font-size: min(2.9333333333vw, 11px);
}
.chatbot .body .inner .question .box .left,
.chatbot .body .inner .question .box .left * {
  text-align: left;
}
.chatbot .body .inner .question .box .center,
.chatbot .body .inner .question .box .center * {
  text-align: center;
}
.chatbot .body .inner .question .box .right,
.chatbot .body .inner .question .box .right * {
  text-align: right;
}
.chatbot .body .inner .question .box .button {
  margin-bottom: 1rem;
}
.chatbot .body .inner .question .box .button a {
  display: inline-block;
  background: #ffb007;
  color: #fff;
  text-align: center;
  font-size: min(2.1333333333vw, 18px);
  text-decoration: none;
  padding: 0.5rem 2rem 0.6rem;
  line-height: 1;
  border: solid 1px #ff8707;
  border-radius: 100px;
}
.chatbot .body .inner .question .box .button a:hover {
  background: #ff8707;
}
.chatbot .body .inner .question .box .ss {
  text-align: center;
  margin-bottom: 1rem;
}
.chatbot .body .inner .question .box .ss img {
  max-width: 100%;
}
.chatbot .body .inner .question .box .ss.left {
  text-align: left;
}
.chatbot .body .inner .question .box .ss.right {
  text-align: right;
}
.chatbot .body .inner .question .box .attention {
  background: url(https://static.nexon.co.jp/maplestory/ver2021/cms/icn_attention.png) no-repeat 0 0/1rem auto;
  padding-left: 1rem;
  margin-bottom: 1rem;
  font-weight: 700;
}
.chatbot .body .inner .question .box .strokebox {
  border: solid 1px #F1E0C6;
}
.chatbot .body .inner .question .box .fillbox {
  background: #F1E0C6;
}
.chatbot .body .inner .question .box .strokebox,
.chatbot .body .inner .question .box .fillbox {
  padding: 1rem;
  margin-bottom: 1rem;
}
.chatbot .body .inner .question .box .strokebox > :nth-last-child(1),
.chatbot .body .inner .question .box .fillbox > :nth-last-child(1) {
  margin-bottom: 0;
}
.chatbot .body .inner .question .box .youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  margin-bottom: 1rem;
}
.chatbot .body .inner .question .box .youtube iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.chatbot .body .inner .question .box .flexbox [class^=w] {
  width: auto;
}
.chatbot .body .inner .question .box .resize-switch {
  position: relative;
  text-align: right;
  margin-bottom: 0.5rem;
}
.chatbot .body .inner .question .box .resize-switch::before {
  content: "■ 100%サイズ表示";
  display: inline-block;
  padding: 0.5rem;
  background: #eee;
  cursor: pointer;
}
.chatbot .body .inner .question .box .resize-switch.insize::before {
  content: "⇔ スクロール表示";
}
.chatbot .body .inner .question .box .resize-view {
  position: relative;
  overflow: auto;
  white-space: nowrap;
}
.chatbot .body .inner .question .box .resize-view::before {
  content: "";
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  filter: blur(2px);
  animation: scrollhint 1.4s ease infinite;
}
.chatbot .body .inner .question .box .resize-view.touch::before {
  content: normal;
}
.chatbot .body .inner .question .box .resize-view .ss img {
  width: auto;
  max-width: none;
}
.chatbot .body .inner .question .box .insize + .resize-view {
  white-space: normal;
}
.chatbot .body .inner .question .box .insize + .resize-view::before {
  content: normal;
}
.chatbot .body .inner .question .box .insize + .resize-view .ss img {
  width: 100%;
}
.chatbot .body .inner .question .box table {
  margin-bottom: 1rem;
}
.chatbot .body .inner .question .box table th, .chatbot .body .inner .question .box table td {
  border: solid 1px #D2A764;
  padding: 0.4rem 1rem;
  vertical-align: middle;
}
.chatbot .body .inner .question .box table th :nth-last-child(1), .chatbot .body .inner .question .box table td :nth-last-child(1) {
  margin-bottom: 0;
}
.chatbot .body .inner .question .box table th {
  background: #82D248;
  color: #fff;
  font-weight: 700;
}
.chatbot .body .inner .question .box table td {
  background: #fff;
}
.chatbot .body .inner .answer {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-wrap: nowrap;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.chatbot .body .inner .answer.show {
  opacity: 1;
}
.chatbot .body .inner .answer::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 2.6785714286%;
  height: 0;
  padding-top: 2.9761904762%;
  margin: 7.7380952381% 0 0 0;
  background: #3db5ef;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.chatbot .body .inner .answer .box {
  display: inline-block;
  padding: 0.4em 1.4em;
  background: #3db5ef;
  border-radius: 10px;
  color: #fff;
  margin-right: 2.6785714286%;
}
.chatbot .footer {
  position: absolute;
  z-index: 10;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-top: 12.2666666667%;
  background: #ff5a5a;
  overflow: hidden;
  transition: all 0.5s ease;
}
.chatbot .footer .search {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  padding: 2.6666666667% 0;
  background: #ff5a5a;
}
.chatbot .footer .search .btn-slide {
  position: relative;
  width: 6.1333333333%;
  height: 0;
  padding-top: 6.9333333333%;
  margin: 0 1.3333333333%;
  cursor: pointer;
}
.chatbot .footer .search .btn-slide span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 0;
  padding-top: 100%;
  margin-top: 43.4782608696%;
  transform: translateX(-50%) rotateZ(45deg);
}
.chatbot .footer .search .btn-slide span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 65.2173913043%;
  height: 0;
  padding-top: 21.7391304348%;
  background: #fff;
  border-radius: 40%/100%;
}
.chatbot .footer .search .btn-slide span::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 21.7391304348%;
  height: 0;
  padding-top: 65.2173913043%;
  background: #fff;
  border-radius: 100%/40%;
}
.chatbot .footer .search input {
  appearance: none;
  background: #fff;
  border: none;
  width: 68%;
  height: auto;
  margin: 0 1.3333333333%;
  padding: 0.5333333333%;
  font-size: 16px;
}
.chatbot .footer .search .btn-search {
  width: 14.9333333333%;
  height: 0;
  padding-top: 6.9333333333%;
  margin: 0 1.3333333333%;
}
.chatbot .footer .search .btn-search a {
  background: url(https://static.nexon.co.jp/maplestory/ver2021/chatbot/btn_search.png) no-repeat 0 0/100% auto;
}
.chatbot .footer .function {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 5;
  width: 98.4%;
  height: 0;
  padding-top: 24%;
  margin: 0 0.8% 0.8%;
  background: #fff;
}
.chatbot .footer .function ul {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
}
.chatbot .footer .function ul li {
  width: 29.810298103%;
  height: 0;
  padding-top: 18.9701897019%;
  margin: 2.7100271003% 1.3550135501% 0;
}
.chatbot .footer .function ul li.btn-restart a {
  background: url(https://static.nexon.co.jp/maplestory/ver2021/chatbot/btn_restart.png) no-repeat 0 0/100% auto;
}
.chatbot .footer .function ul li.btn-question a {
  background: url(https://static.nexon.co.jp/maplestory/ver2021/chatbot/btn_question.png) no-repeat 0 0/100% auto;
}
.chatbot .footer .function ul li.btn-inquiry a {
  background: url(https://static.nexon.co.jp/maplestory/ver2021/chatbot/btn_inquiry.png) no-repeat 0 0/100% auto;
}

@keyframes kinokoY-N {
  0% {
    transform: translate(-100%, 0);
  }
  90% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(-100%, 100%);
  }
}
@keyframes kinokoX-R {
  0% {
    transform: translateX(0%) rotateZ(0deg);
  }
  99% {
    transform: translateX(-300%) rotateZ(0deg);
  }
  100% {
    transform: translateX(-300%);
  }
}
@keyframes kinokoY-R {
  0% {
    transform: translate(-100%, 0);
  }
  25% {
    transform: translate(-100%, -150%);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
@keyframes kinokoX-SR {
  0% {
    transform: translateX(0%) rotateZ(0deg);
  }
  99% {
    transform: translateX(-300%) rotateZ(-1080deg);
  }
  100% {
    transform: translateX(-300%);
  }
}
@keyframes kinokoY-SR {
  0% {
    transform: translate(-100%, 0);
  }
  25% {
    transform: translate(-100%, -500%);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
@keyframes kinokoY-SR {
  0% {
    transform: translate(-100%, 0);
  }
  25% {
    transform: translate(-100%, -500%);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
@keyframes kinoko-jump {
  0% {
    transform: translateY(0%);
  }
  25% {
    transform: translateY(-10%);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: translateY(0%);
  }
  75% {
    transform: translateY(-10%);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes scrollhint {
  0% {
    margin-left: 4rem;
    opacity: 0;
  }
  10% {
    margin-left: 4rem;
    opacity: 1;
  }
  70% {
    margin-left: -4rem;
    opacity: 0;
  }
  100% {
    margin-left: -4rem;
    opacity: 0;
  }
}
/******************************************************************************
colorbox（旧モーダル）
******************************************************************************/
#colorbox, #cboxOverlay, #cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30001;
  overflow: visible !important;
}

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

#cboxMiddleLeft, #cboxBottomLeft {
  clear: left;
}

#cboxContent {
  position: relative;
  text-align: center;
}

#cboxLoadedContent {
  overflow: auto;
}

#cboxTitle {
  margin: 0;
}

#cboxLoadingOverlay, #cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
}

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

#colorbox:focus {
  outline: none;
}

#cboxClose {
  outline: none;
  border: none;
  opacity: 1;
  background: url(https://static.nexon.co.jp/maplestory/ver2017/sub/btn_modal_close.png) no-repeat 0 0;
  margin-top: 15px;
  width: 110px;
  height: 32px;
  padding: 0;
  z-index: 30002;
  white-space: nowrap;
  text-indent: 110%;
  overflow: hidden;
}
#cboxClose:hover {
  background-position: 0 100%;
}

.btn-modal-close {
  width: 110px;
  height: 32px;
  margin: 15px auto 0;
  white-space: nowrap;
  text-indent: 110%;
  overflow: hidden;
}
.btn-modal-close a {
  background: url(https://static.nexon.co.jp/maplestory/ver2017/sub/btn_modal_close.png) no-repeat 0 0;
  width: 110px;
  height: 32px;
}

.modal-wrapper {
  overflow: hidden;
  background: none;
  min-width: auto;
}

.modal article[class^=modal-] {
  position: relative;
  max-width: 750px;
  padding: 0;
  margin: 0 auto;
  background: #fff;
}
.modal article[class^=modal-]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 0;
  padding-top: 44.9275362319%;
  background: url(https://static.nexon.co.jp/maplestory/ver2021/common/bg_body.png) repeat-x center top;
  background-size: auto 100%;
}
.modal article[class^=modal-] section,
.modal article[class^=modal-] > div {
  position: relative;
  z-index: 5;
  padding: 4.347826087%;
}
.modal article[class^=modal-] section h3,
.modal article[class^=modal-] > div h3 {
  margin: 0;
}

div[class^=modal-] {
  position: relative;
  max-width: 750px;
  padding: 0;
  margin: 0 auto;
  background: #fff;
}
div[class^=modal-]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 0;
  padding-top: 44.9275362319%;
  background: url(https://static.nexon.co.jp/maplestory/ver2021/common/bg_body.png) repeat-x center top;
  background-size: auto 100%;
}
div[class^=modal-] section,
div[class^=modal-] .section {
  position: relative;
  z-index: 5;
  margin-top: 0px !important;
  padding: 4.347826087%;
}
div[class^=modal-] section h3,
div[class^=modal-] .section h3 {
  border-top: solid 2px #373737;
  background: #f6f6f6;
  font-size: 4.2666666667vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  margin-top: 1.4492753623%;
  padding: 5.7971014493% 0% 3.768115942% 3.768115942%;
  border-bottom: solid 1px #e8e8e8;
  text-align: left;
}
div[class^=modal-] section .inner,
div[class^=modal-] .section .inner {
  margin: 0 !important;
}

/******************************************************************************
プレゼントモーダル
******************************************************************************/
.modal .modal-present {
  width: 100%;
  padding: 0;
}
.modal .modal-present section {
  width: 100%;
  padding: 4.347826087%;
}
.modal .modal-present section .inner h3 {
  margin-top: 0;
}
.modal .modal-present section .inner .txt {
  text-align: center;
}
.modal .modal-present section .inner .txt p {
  color: #754a0b;
  font-size: 16px;
  font-weight: bold;
}
.modal .modal-present section .inner .btn-info {
  width: 174px;
  height: 32px;
  margin: 5.7971014493% auto 0;
}
.modal .modal-present section .inner .btn-info a {
  background: url(https://static.nexon.co.jp/maplestory/ver2017/common/btn_modal_info.png) no-repeat 0 0;
  width: 100%;
  height: 100%;
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
}

/********************************************************************************************************
 modal（レスポンシブ対応）
********************************************************************************************************/
body:not(.modal-wrapper) .modal {
  display: block;
  z-index: 200;
  position: absolute;
  width: 100%;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  margin: 0 auto;
  pointer-events: none;
}
body:not(.modal-wrapper) .modal > div {
  display: none;
  opacity: 0;
  margin: 0 auto;
  pointer-events: auto;
  background: none;
  max-width: 100%;
}
body:not(.modal-wrapper) .modal > div::before {
  content: normal;
}
body:not(.modal-wrapper) .modal > div .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
body:not(.modal-wrapper) .modal .modal-youtube {
  position: relative;
  width: 90.6666666667%;
  height: 0;
  padding-top: 50.9333333333%;
}
body:not(.modal-wrapper) .modal .modal-youtube .youtube-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
body:not(.modal-wrapper) .modal .modal-cem {
  width: 90.6666666667%;
  height: 0;
  padding-top: 40.6666666667%;
}
body:not(.modal-wrapper) .modal .modal-cem img {
  width: 100%;
  height: auto;
}
body:not(.modal-wrapper) .modal .modal-system {
  color: #000;
  font-size: 3.2vw;
  width: 90.6666666667%;
  background: #fff;
  border: solid 2px #8e98ad;
  border-radius: 4px;
}
body:not(.modal-wrapper) .modal .modal-system .inner {
  position: relative;
  padding: 7.3529411765%;
}
body:not(.modal-wrapper) .modal .modal-system .inner p:not(:first-child) {
  margin-top: 1em;
}
body:not(.modal-wrapper) .modal .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 7.0666666667%;
  height: 0;
  padding-top: 7.0666666667%;
  margin: -8% 4% 0 0;
  cursor: pointer;
}
body:not(.modal-wrapper) .modal .btn-close::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(45deg);
  width: 100%;
  height: 0;
  padding-top: 7.5471698113%;
  background: #fff;
  transition: transform 0.2s ease;
}
body:not(.modal-wrapper) .modal .btn-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(-45deg);
  width: 100%;
  height: 0;
  padding-top: 7.5471698113%;
  background: #fff;
  transition: transform 0.2s ease;
}
body:not(.modal-wrapper) .modal .btn-close:hover::before {
  transform: translate(-50%, -50%) rotateZ(225deg);
}
body:not(.modal-wrapper) .modal .btn-close:hover::after {
  transform: translate(-50%, -50%) rotateZ(135deg);
}
body:not(.modal-wrapper) .modal .btn-close span {
  display: none;
}
body:not(.modal-wrapper) .modal + .shadow {
  position: fixed;
  z-index: 150;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  width: 100%;
  height: 150%;
  opacity: 0;
  transform: translateY(-150%);
}
body:not(.modal-wrapper) .modal.open {
  transform: translate(-50%, 0);
}
body:not(.modal-wrapper) .modal.open .open,
body:not(.modal-wrapper) .modal.open .btn-close {
  display: block;
  opacity: 1;
}
body:not(.modal-wrapper) .modal.open + .shadow {
  transform: translateY(0);
  opacity: 1;
}
body:not(.modal-wrapper) .modal.close {
  transform: translate(-50%, 0);
}
body:not(.modal-wrapper) .modal.close .open,
body:not(.modal-wrapper) .modal.close .btn-close {
  display: block;
  opacity: 0;
}
body:not(.modal-wrapper) .modal.close + .shadow {
  transform: translateY(0);
  opacity: 0;
}
body:not(.modal-wrapper) .modal.animation .open,
body:not(.modal-wrapper) .modal.animation .btn-close,
body:not(.modal-wrapper) .modal.animation + .shadow {
  transition: opacity 0.3s ease 0s;
}

/******************************************************************************
ドメイン変更モーダル
******************************************************************************/
body:not(.modal-wrapper) .modal .modal-domain {
  width: 88%;
  height: 0;
  padding-top: 52%;
  background: url(https://static.nexon.co.jp/maplestory/ver2021/common/modal/bg_domain_sp.png) no-repeat 0 0;
  background-size: contain;
}
body:not(.modal-wrapper) .modal .modal-domain h2 {
  display: none;
}
body:not(.modal-wrapper) .modal .modal-domain .btn-more {
  position: relative;
  width: 36.3636363636%;
  height: 0;
  padding-top: 7.1212121212%;
  margin: 36.9696969697% auto 0;
}
body:not(.modal-wrapper) .modal .modal-domain .btn-more a {
  background: url(https://static.nexon.co.jp/maplestory/ver2021/common/modal/btn_domain.png) no-repeat 0 0;
  background-size: 100% 200%;
}
body:not(.modal-wrapper) .modal .modal-domain .btn-more a:hover {
  background-position: 0 100%;
}
body:not(.modal-wrapper) .modal .modal-domain .btn-more span {
  display: none;
}
body:not(.modal-wrapper) .modal .modal-domain .checkbox {
  font-size: 1.8666666667vw;
  color: #0a3255;
  margin: 7.5757575758% auto 0;
  text-align: center;
}
body:not(.modal-wrapper) .modal .modal-domain .checkbox span {
  vertical-align: middle;
  margin-left: 0.5em;
}

/******************************************************************************
コラボモーダル
******************************************************************************/
body:not(.modal-wrapper) .modal .modal-blackpink {
  width: 88%;
  height: 0;
  padding-top: 52%;
}
body:not(.modal-wrapper) .modal .modal-blackpink a, body:not(.modal-wrapper) .modal .modal-blackpink img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

@media (min-width: 1025px) {
  /******************************************************************************
  GNB
  ******************************************************************************/
  #gnb-container {
    min-width: 1200px;
    display: block;
  }
  #gnb-container #gnb2 {
    min-width: 1200px;
  }
}
@media (min-width: 1025px) {
  /******************************************************************************
  header
  ******************************************************************************/
  header {
    position: absolute;
    top: 35px;
    height: auto;
    padding-top: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
  }
  header::before {
    content: "";
    position: absolute;
    top: 76px;
    left: 0;
    width: 100%;
    height: 0;
    background: rgba(0, 0, 0, 0.9);
  }
  header h1 {
    position: relative;
    margin: 8px 1px 8px 18px;
    width: 121px;
    min-width: 121px;
    height: 59px;
  }
  header .band {
    position: absolute;
    height: 78px;
    padding-top: 0;
    min-width: 1200px;
    background: -webkit-linear-gradient(left, #99ee01 0%, #ffc412 25%, #ff9000 50%, #ec75e2 75%, #65d2fe 100%);
    background: linear-gradient(to right, #99ee01 0%, #ffc412 25%, #ff9000 50%, #ec75e2 75%, #65d2fe 100%);
  }
  header .band .inner {
    min-width: 1200px;
    width: 1200px;
    position: relative;
    height: 76px;
    margin: 0 auto;
  }
  header .band .btn-menu {
    display: none;
  }
  header .user {
    display: none;
  }
  header nav {
    position: relative;
    background: none;
    padding-top: 0;
    transform: translateY(0);
    z-index: 30;
    transition: none;
    width: 1060px;
    min-height: auto;
    margin: 0;
  }
  header nav > ul {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
    border-bottom: none;
  }
  header nav > ul > li {
    margin-top: 0;
    width: 200px;
    border-top: none;
    cursor: default;
  }
  header nav > ul > li p {
    width: 100%;
    height: 76px;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
    margin: 0 auto;
    cursor: default;
  }
  header nav > ul > li p::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 20px;
    padding-top: 0;
    margin-left: 0;
  }
  header nav > ul > li a {
    padding: 0;
    border-top: none;
    font-size: 15px;
  }
  header nav > ul > li ul {
    position: relative;
    display: block;
    text-align: center;
    display: none;
    padding-bottom: 16px;
  }
  header nav > ul > li ul::before, header nav > ul > li ul::after {
    content: normal;
  }
  header nav > ul > li ul li {
    margin: 0 auto 12px;
    width: 100%;
    display: block;
  }
  header nav > ul > li > ul > li > a {
    padding-left: 0;
  }
  header nav > ul > li > ul > li ul {
    display: none;
  }
  header nav .menu-notice {
    width: 200px;
  }
  header nav .menu-notice p::before {
    width: 70px;
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_gm_notice.png) no-repeat 0 0/100% auto;
  }
  header nav .menu-notice ul .active a {
    color: #fff;
    background: none;
  }
  header nav .menu-notice a:hover,
  header nav .menu-notice ul .active a:hover {
    color: #a4d05b;
  }
  header nav .menu-gameintroduction {
    width: 220px;
  }
  header nav .menu-gameintroduction p::before {
    width: 86px;
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_gm_gameintroduction.png) no-repeat 0 0/100% auto;
  }
  header nav .menu-gameintroduction ul .active a {
    color: #fff;
    background: none;
  }
  header nav .menu-gameintroduction a:hover,
  header nav .menu-gameintroduction ul .active a:hover {
    color: #e4d01b;
  }
  header nav .menu-job {
    width: 200px;
  }
  header nav .menu-job p::before {
    width: 70px;
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_gm_job.png) no-repeat 0 0/100% auto;
  }
  header nav .menu-job ul .active a {
    color: #fff;
    background: none;
  }
  header nav .menu-job a:hover,
  header nav .menu-job ul .active a:hover {
    color: #ffcd00;
  }
  header nav .menu-community {
    width: 220px;
  }
  header nav .menu-community p::before {
    width: 100px;
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_gm_community.png) no-repeat 0 0/100% auto;
  }
  header nav .menu-community ul .active a {
    color: #fff;
    background: none;
  }
  header nav .menu-community a:hover,
  header nav .menu-community ul .active a:hover {
    color: #ffbc00;
  }
  header nav .menu-support {
    width: 220px;
  }
  header nav .menu-support p::before {
    width: 68px;
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_gm_support.png) no-repeat 0 0/100% auto;
  }
  header nav .menu-support ul .active a {
    color: #fff;
    background: none;
  }
  header nav .menu-support a:hover,
  header nav .menu-support ul .active a:hover {
    color: #ffa400;
  }
  header.slide::before {
    height: calc(100% - 76px);
  }
  header.slide .band::before {
    opacity: 1;
  }
  header.animation::before {
    transition: height 0.1s cubic-bezier(0.42, 0, 0.58, 1) 0.1s;
  }
  header.animation .band::before {
    transition: opacity 0.15s ease 0.15s;
  }
  header.slide.animation::before {
    transition: height 0.1s cubic-bezier(0.42, 0, 0.58, 1);
  }
  header.slide.animation .band::before {
    transition: opacity 0.2s ease 0s;
  }
  header.fixed {
    position: fixed;
    top: 0;
  }
}
@media (min-width: 1025px) {
  /******************************************************************************
  base
  ******************************************************************************/
  body {
    font-size: 18px;
  }
  /******************************************************************************
  wrapper
  ******************************************************************************/
  .wrapper {
    min-width: 1200px;
  }
  /******************************************************************************
  main
  ******************************************************************************/
  main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin: 76px 0 0;
    padding-bottom: 120px;
  }
  main::before {
    height: 310px;
    padding-top: 0;
  }
  main.single .side-menu {
    display: none;
  }
  main.single h2 {
    text-align: center;
    margin-left: 0;
  }
  main .breadcrumb ol {
    width: 1200px;
    margin: 0 auto;
    padding: 8px 0 10px;
  }
  main .breadcrumb li {
    font-size: 15px;
  }
  main .breadcrumb li::before {
    font-size: 15px;
  }
  /******************************************************************************
  article
  ******************************************************************************/
  article {
    order: 2;
    position: relative;
    z-index: 15;
    width: 880px;
    padding: 0;
    font-size: 12px;
  }
  article h2 {
    text-align: left;
    font-size: 48px;
    padding: 70px 0 34px;
    margin-left: 30px;
  }
  article .contents {
    font-size: 12px;
  }
  article .contents .pager {
    margin: 30px auto;
  }
  article .contents .pager p {
    font-size: 16px;
  }
  article .contents .pager ol li {
    font-size: 12px;
  }
  article h3 {
    font-size: 28px;
    margin-top: 30px;
    padding: 40px 0px 26px 30px;
  }
  article section .inner > div {
    padding: 20px 0 0 0;
    margin: 0 10px;
  }
  article .totop {
    position: fixed;
    z-index: 200;
    left: 50%;
    margin-left: -16px;
    bottom: 30px;
    width: 32px;
    height: 32px;
    background: #373737;
  }
  article .totop.bottom {
    position: absolute;
    margin-left: -176px;
    bottom: -120px;
  }
  article .totop::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 13px;
    width: 14px;
    height: 3px;
    background: #fff;
    transform: rotateZ(45deg);
    pointer-events: none;
  }
  article .totop::after {
    content: "";
    position: absolute;
    top: 13px;
    right: 13px;
    width: 14px;
    height: 3px;
    background: #fff;
    transform: rotateZ(-45deg);
    pointer-events: none;
  }
  article .totop a {
    text-indent: 110%;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
}
@media (min-width: 1025px) {
  /******************************************************************************
  side-menu
  ******************************************************************************/
  .side-menu {
    order: 1;
    display: block;
    position: relative;
    z-index: 10;
    width: 280px;
    margin-right: 40px;
  }
  .side-menu .function-area {
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .side-menu .function-area .before {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/bg_status.png) repeat 0 0/10px 10px;
    padding: 28px 20px;
  }
  .side-menu .function-area .before .btn-login {
    position: relative;
    width: 100%;
    height: 86px;
  }
  .side-menu .function-area .before .btn-login a::before {
    content: "";
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00aeff;
    transition: all 0.2s ease;
  }
  .side-menu .function-area .before .btn-login a::after {
    content: "";
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 186px;
    height: 44px;
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_nexonidlogin_sub.png) no-repeat 0 0/100% auto;
  }
  .side-menu .function-area .before .btn-login a:hover::before {
    background: #00c6ff;
  }
  .side-menu .function-area .before ul {
    margin-top: 16px;
    font-size: 14px;
    color: #fff;
    text-align: center;
  }
  .side-menu .function-area .before ul li:nth-of-type(1) {
    margin-bottom: 8px;
  }
  .side-menu .function-area .before ul a {
    display: inline;
    text-decoration: underline;
  }
  .side-menu .function-area .before ul a:hover {
    text-decoration: none;
  }
  .side-menu .function-area .after {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/bg_status.png) repeat 0 0/10px 10px;
    padding: 28px 14px;
  }
  .side-menu .function-area .after .avatar {
    position: relative;
    width: 160px;
    height: 150px;
    margin: 0 auto;
    border: solid 1px #7bb9f3;
    background: linear-gradient(to bottom, #2da9ff, #b8f7ff);
    overflow: hidden;
  }
  .side-menu .function-area .after .avatar img {
    position: absolute;
    top: -21px;
    left: -16px;
    width: 192px;
    height: 192px;
    image-rendering: pixelated;
    image-rendering: -webkit-crisp-edges;
    image-rendering: -moz-crisp-edges;
  }
  .side-menu .function-area .after .info {
    position: relative;
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/bg_line.png) repeat-x 0 100%/6px 2px;
  }
  .side-menu .function-area .after .info .status {
    margin: 14px 30px 18px;
  }
  .side-menu .function-area .after .info .status [class^=server] {
    position: relative;
    color: #fff;
    font-size: 20px;
    padding-left: 28px;
    line-height: 1;
  }
  .side-menu .function-area .after .info .status [class^=server]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
  }
  .side-menu .function-area .after .info .status .server-kaede::before {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/icn_kaede.png) no-repeat 0 0/100% auto;
  }
  .side-menu .function-area .after .info .status .server-kurumi::before {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/icn_kurumi.png) no-repeat 0 0/100% auto;
  }
  .side-menu .function-area .after .info .status .server-yukari::before {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/icn_yukari.png) no-repeat 0 0/100% auto;
  }
  .side-menu .function-area .after .info .status .server-reboot::before {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/icn_reboot.png) no-repeat 0 0/100% auto;
  }
  .side-menu .function-area .after .info .status .level {
    position: absolute;
    top: 0;
    right: 0;
    margin: 2px 28px 0 0;
    font-size: 12px;
    color: #d9d2a3;
    font-weight: 500;
  }
  .side-menu .function-area .after .info .settings {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/bg_line.png) repeat-x 0 0/6px 2px;
    padding: 10px 0 20px;
  }
  .side-menu .function-area .after .info .settings li {
    position: relative;
    width: 164px;
    height: 36px;
    margin: 10px auto 0;
  }
  .side-menu .function-area .after .info .settings li a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
  }
  .side-menu .function-area .after .info .settings li a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 124px;
    height: 14px;
    margin-right: 10px;
  }
  .side-menu .function-area .after .info .settings li a:hover::before {
    background: #d8e0e6;
  }
  .side-menu .function-area .after .info .settings li.btn-mynote a::after {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_mynote_sub.png) no-repeat 0 0/100% auto;
  }
  .side-menu .function-area .after .info .settings li.btn-idadminister a::after {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_idadminister_sub.png) no-repeat 0 0/100% auto;
  }
  .side-menu .function-area .after .buttons {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 12px 0;
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/bg_line.png) repeat-x 0 100%/6px 2px;
  }
  .side-menu .function-area .after .buttons li {
    position: relative;
    width: 62px;
    height: 48px;
  }
  .side-menu .function-area .after .buttons li a {
    overflow: visible !important;
  }
  .side-menu .function-area .after .buttons li a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .side-menu .function-area .after .buttons li a::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: -0.9em;
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/icn_new.png) no-repeat 0 0/100% auto;
    width: 1.1em;
    height: 1.1em;
    pointer-events: none;
    opacity: 0;
  }
  .side-menu .function-area .after .buttons li a:hover::before {
    opacity: 0.8;
  }
  .side-menu .function-area .after .buttons li.btn-notice a::before {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_notice_sub.png) no-repeat 0 0/100% auto;
  }
  .side-menu .function-area .after .buttons li.btn-message a::before {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_message_sub.png) no-repeat 0 0/100% auto;
  }
  .side-menu .function-area .after .buttons li.btn-communitypoint a::before {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_communitypoint_sub.png) no-repeat 0 0/100% auto;
  }
  .side-menu .function-area .after .buttons li.new a::after {
    opacity: 1;
  }
  .side-menu .function-area .after .btn-logout {
    width: 72px;
    height: 12px;
    margin: 20px auto 0;
  }
  .side-menu .function-area .after .btn-logout a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_logout.png) no-repeat 0 0/100% auto;
  }
  .side-menu .function-area .after .btn-logout a:hover::before {
    opacity: 0.8;
  }
  .side-menu .function-area .notset {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/bg_status.png) repeat 0 0/10px 10px;
    padding: 28px 14px;
  }
  .side-menu .function-area .notset .avatar {
    position: relative;
    width: 160px;
    height: 148px;
    margin: 0 auto;
    border: solid 1px #959caa;
    background: #fff;
    overflow: hidden;
  }
  .side-menu .function-area .notset .avatar img {
    position: absolute;
    top: -26px;
    left: -14px;
    width: 192px;
    height: 192px;
    image-rendering: pixelated;
    image-rendering: -webkit-crisp-edges;
    image-rendering: -moz-crisp-edges;
  }
  .side-menu .function-area .notset .info {
    position: relative;
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/bg_line.png) repeat-x 0 100%/6px 2px;
  }
  .side-menu .function-area .notset .info .settings {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/bg_line.png) repeat-x 0 0/6px 2px;
    padding: 18px 0 20px;
    margin-top: 22px;
  }
  .side-menu .function-area .notset .info .settings li {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
  }
  .side-menu .function-area .notset .info .settings li br:nth-of-type(2) {
    display: none;
  }
  .side-menu .function-area .notset .info .settings .btn-mynote {
    position: relative;
    width: 164px;
    height: 36px;
    margin: 16px auto 0;
  }
  .side-menu .function-area .notset .info .settings .btn-mynote a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
  }
  .side-menu .function-area .notset .info .settings .btn-mynote a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 124px;
    height: 14px;
    margin-right: 10px;
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_mynote_sub.png) no-repeat 0 0/100% auto;
  }
  .side-menu .function-area .notset .info .settings .btn-mynote a:hover::before {
    background: #d8e0e6;
  }
  .side-menu .function-area .notset .buttons {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 12px 0;
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/bg_line.png) repeat-x 0 100%/6px 2px;
  }
  .side-menu .function-area .notset .buttons li {
    position: relative;
    width: 62px;
    height: 48px;
  }
  .side-menu .function-area .notset .buttons li a {
    overflow: visible !important;
  }
  .side-menu .function-area .notset .buttons li a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .side-menu .function-area .notset .buttons li a::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: -0.9em;
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/icn_new.png) no-repeat 0 0/100% auto;
    width: 1.1em;
    height: 1.1em;
    pointer-events: none;
    opacity: 0;
  }
  .side-menu .function-area .notset .buttons li a:hover::before {
    opacity: 0.8;
  }
  .side-menu .function-area .notset .buttons li.btn-notice a::before {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_notice_sub.png) no-repeat 0 0/100% auto;
  }
  .side-menu .function-area .notset .buttons li.btn-message a::before {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_message_sub.png) no-repeat 0 0/100% auto;
  }
  .side-menu .function-area .notset .buttons li.btn-communitypoint a::before {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_communitypoint_sub.png) no-repeat 0 0/100% auto;
  }
  .side-menu .function-area .notset .buttons li.new a::after {
    opacity: 1;
  }
  .side-menu .function-area .notset .btn-logout {
    width: 72px;
    height: 12px;
    margin: 20px auto 0;
  }
  .side-menu .function-area .notset .btn-logout a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_logout.png) no-repeat 0 0/100% auto;
  }
  .side-menu .function-area .notset .btn-logout a:hover::before {
    opacity: 0.8;
  }
  .side-menu .function-area .maintenance {
    position: relative;
    width: 100%;
    height: 297px;
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/bg_maintenance_sub.png) no-repeat 0 0/100% auto;
  }
  .side-menu .function-area .maintenance p {
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    padding-top: 180px;
  }
  .side-menu .function-area .search-box-common {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    font-size: 12px;
    margin-top: 20px;
  }
  .side-menu .function-area .search-box-common :placeholder-shown {
    color: #787878;
  }
  .side-menu .function-area .search-box-common ::-webkit-input-placeholder {
    color: #787878;
  }
  .side-menu .function-area .search-box-common :-moz-placeholder {
    color: #787878;
    opacity: 1;
  }
  .side-menu .function-area .search-box-common ::-moz-placeholder {
    color: #787878;
    opacity: 1;
  }
  .side-menu .function-area .search-box-common ::-ms-input-placeholder {
    color: #787878;
  }
  .side-menu .function-area .search-box-common ::placeholder {
    color: #787878;
  }
  .side-menu .function-area .search-box-common :focus:placeholder-shown {
    color: transparent;
  }
  .side-menu .function-area .search-box-common :focus::-webkit-input-placeholder {
    color: transparent;
  }
  .side-menu .function-area .search-box-common :focus:-moz-placeholder {
    color: transparent;
  }
  .side-menu .function-area .search-box-common :focus::-moz-placeholder {
    color: transparent;
  }
  .side-menu .function-area .search-box-common :focus::-ms-input-placeholder {
    color: transparent;
  }
  .side-menu .function-area .search-box-common :focus::placeholder {
    color: transparent;
  }
  .side-menu .function-area .search-box-common input {
    width: calc(100% - 80px);
    padding: 4px;
    height: auto;
    border: solid 1px #c7c7c7;
  }
  .side-menu .function-area .search-box-common .btn-search {
    width: 60px;
    height: 25px;
  }
  .side-menu .function-area .search-box-common .btn-search a {
    position: static;
    text-align: center;
    font-size: 16px;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
    color: #fff;
    background: #2E7EED;
  }
  .side-menu .menu-area {
    margin-bottom: 20px;
    border-top: solid 2px #373737;
    border-right: solid 1px #d8d8d8;
    border-bottom: solid 1px #d8d8d8;
    border-left: solid 1px #d8d8d8;
    padding: 36px 20px 20px 20px;
  }
  .side-menu .menu-area > p {
    position: relative;
    font-weight: 700;
    text-align: left;
    font-size: 24px;
    padding-left: 16px;
    margin-bottom: 36px;
  }
  .side-menu .menu-area > p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #21daed;
    width: 10px;
    height: 18px;
    border-radius: 30%/25%;
  }
  .side-menu .menu-area ul {
    font-size: 16px;
  }
  .side-menu .menu-area ul li {
    margin: 16px 0;
    position: relative;
  }
  .side-menu .menu-area ul li p {
    padding-left: 12px;
  }
  .side-menu .menu-area ul li p::before {
    content: "-";
    position: absolute;
    top: -2px;
    left: 0;
  }
  .side-menu .menu-area ul li a {
    padding-left: 12px;
  }
  .side-menu .menu-area ul li a::before {
    content: "-";
    position: absolute;
    top: -2px;
    left: 0;
  }
  .side-menu .menu-area ul li a::after {
    content: ">";
    position: absolute;
    top: -2px;
    right: 0;
  }
  .side-menu .menu-area ul li a:hover {
    color: #00aadc;
  }
  .side-menu .menu-area ul li.active a {
    color: #00aadc;
  }
  .side-menu .menu-area ul li ul li a {
    margin-left: 14px;
  }
  .side-menu .menu-area ul li ul li a::before {
    content: normal;
  }
  .side-menu .official-banner li {
    width: 280px;
    height: 80px;
  }
  .side-menu .official-banner .btn-official-x a {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_bnr_x_231213.png) no-repeat 0 0;
    transition: all 0.2s ease-out;
  }
  .side-menu .official-banner .btn-official-x a:hover {
    transform: translateY(-2px);
    box-shadow: 0em 0.2em 0.8em 0.05em rgba(0, 0, 0, 0.1);
  }
  .side-menu .official-banner .btn-official-youtube {
    margin-top: 20px;
  }
  .side-menu .official-banner .btn-official-youtube a {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_bnr_youtube_231213.png) no-repeat 0 0;
    transition: all 0.2s ease-out;
  }
  .side-menu .official-banner .btn-official-youtube a:hover {
    transform: translateY(-2px);
    box-shadow: 0em 0.2em 0.8em 0.05em rgba(0, 0, 0, 0.1);
  }
  .side-menu .official-banner .btn-official-discord {
    margin-top: 20px;
  }
  .side-menu .official-banner .btn-official-discord a {
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/new/btn_bnr_discord_240709.png) no-repeat 0 0;
    transition: all 0.2s ease-out;
  }
  .side-menu .official-banner .btn-official-discord a:hover {
    transform: translateY(-2px);
    box-shadow: 0em 0.2em 0.8em 0.05em rgba(0, 0, 0, 0.1);
  }
}
@media (min-width: 1025px) {
  /******************************************************************************
  footer
  ******************************************************************************/
  footer {
    font-size: 12px;
    padding-bottom: 110px;
    height: 240px;
  }
  footer::after {
    width: 42px;
    height: 40px;
    padding-top: 0;
    margin-bottom: 55px;
  }
  footer a {
    text-decoration: none;
  }
  footer a:hover {
    text-decoration: underline;
  }
  footer ul {
    width: 100%;
    padding-top: 40px;
  }
  footer ul + p {
    display: inline-block;
  }
  footer p {
    margin-top: 16px;
  }
}
@media (min-width: 1025px) {
  /******************************************************************************
  colorbox（旧モーダル）
  ******************************************************************************/
  div[class^=modal-] section,
  div[class^=modal-] .section {
    padding: 30px;
  }
  div[class^=modal-] section h3,
  div[class^=modal-] .section h3 {
    font-size: 28px;
    margin-top: 10px;
    padding: 40px 0px 26px 30px;
  }
}
@media (min-width: 1025px) {
  /********************************************************************************************************
   modal（レスポンシブ対応）
  ********************************************************************************************************/
  body:not(.modal-wrapper) .modal {
    width: auto;
  }
  body:not(.modal-wrapper) .modal .modal-youtube {
    width: 960px;
    min-width: 960px;
    padding-top: 540px;
  }
  body:not(.modal-wrapper) .modal .modal-cem {
    width: 680px;
    min-width: 680px;
    padding-top: 305px;
  }
  body:not(.modal-wrapper) .modal .modal-system {
    font-size: 16px;
    width: 530px;
    min-width: 530px;
  }
  body:not(.modal-wrapper) .modal .modal-system .inner {
    padding: 50px;
  }
  body:not(.modal-wrapper) .modal .btn-close {
    width: 30px;
    padding-top: 30px;
    margin: -38px -6px 0 0;
  }
  body:not(.modal-wrapper) .modal .btn-close::before {
    padding-top: 4px;
  }
  body:not(.modal-wrapper) .modal .btn-close::after {
    padding-top: 4px;
  }
  /******************************************************************************
  ドメイン変更モーダル
  ******************************************************************************/
  body:not(.modal-wrapper) .modal .modal-domain {
    width: 730px;
    height: 410px;
    padding-top: 0;
    background: url(https://static.nexon.co.jp/maplestory/ver2021/common/modal/bg_domain_pc.png) no-repeat 0 0;
  }
  body:not(.modal-wrapper) .modal .modal-domain .btn-more {
    width: 240px;
    height: 47px;
    padding-top: 0;
    margin: 260px auto 0;
  }
  body:not(.modal-wrapper) .modal .modal-domain .checkbox {
    margin: 54px auto 0;
    font-size: 14px;
  }
  /******************************************************************************
  コラボモーダル
  ******************************************************************************/
  body:not(.modal-wrapper) .modal .modal-blackpink {
    width: 660px;
    height: 390px;
    padding-top: 0;
  }
}
/******************************************************************************
animation
******************************************************************************/
@keyframes login-button {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg);
    transform-origin: 50% 50%;
  }
  10% {
    transform: translate(-50%, -50%) rotateZ(72deg);
    transform-origin: 60% 60%;
  }
  20% {
    transform: translate(-50%, -50%) rotateZ(144deg);
    transform-origin: 60% 40%;
  }
  30% {
    transform: translate(-50%, -50%) rotateZ(216deg);
    transform-origin: 40% 60%;
  }
  40% {
    transform: translate(-50%, -50%) rotateZ(288deg);
    transform-origin: 40% 40%;
  }
  50% {
    transform: translate(-50%, -50%) rotateZ(360deg);
    transform-origin: 50% 50%;
  }
  60% {
    transform: translate(-50%, -50%) rotateZ(288deg);
    transform-origin: 60% 60%;
  }
  70% {
    transform: translate(-50%, -50%) rotateZ(216deg);
    transform-origin: 60% 40%;
  }
  80% {
    transform: translate(-50%, -50%) rotateZ(144deg);
    transform-origin: 40% 60%;
  }
  90% {
    transform: translate(-50%, -50%) rotateZ(72deg);
    transform-origin: 40% 40%;
  }
  100% {
    transform: translate(-50%, -50%) rotateZ(0deg);
    transform-origin: 50% 50%;
  }
}

/*# sourceMappingURL=common.css.map */