@charset "UTF-8";
@import url(https://lwres.nexon.com/css/mabinogim/brand/common/font.css);
@import url(https://lwres.nexon.com/css/mabinogim/brand/common/common.css);
@import url(https://lwres.nexon.com/css/mabinogim/brand/common/modal.css);
@import url(https://lwres.nexon.com/css/mabinogim/brand/common/loading.css);
#mabinogim {
  overflow: hidden;
}
#mabinogim .game_info_class,
#mabinogim .info,
#mabinogim .container {
  position: relative;
  background: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/bg.png);
  background-size: cover;
  background-position: center top;
  transition: 0.3s;
}
#mabinogim .game_info_class .intro_wrap,
#mabinogim .info .intro_wrap,
#mabinogim .container .intro_wrap {
  position: relative;
  margin: auto 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100 - var(--pc-top-height));
  min-height: 720px;
  z-index: 1;
}
#mabinogim .game_info_class .intro_wrap .inner,
#mabinogim .info .intro_wrap .inner,
#mabinogim .container .intro_wrap .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(var(--vh, 1vh) * 100 - var(--pc-top-height) - 104px);
  min-height: 720px;
}
#mabinogim .game_info_class .intro_wrap .inner h1,
#mabinogim .info .intro_wrap .inner h1,
#mabinogim .container .intro_wrap .inner h1 {
  font-family: "Pretendard-Bold";
  color: #fff;
  font-size: 40px;
  letter-spacing: -0.8px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
#mabinogim .game_info_class .intro_wrap .inner h1::before,
#mabinogim .info .intro_wrap .inner h1::before,
#mabinogim .container .intro_wrap .inner h1::before {
  display: block;
  content: "";
  min-width: 63px;
  width: 63px;
  height: 16px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='63' height='16' fill='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M3.54 4.875.5 8l3.04 3.125L6.577 8 3.54 4.875ZM15.087.5 9.514 6.232l-.013-.013-1.72 1.768.013.013-.013.013 1.72 1.768.013-.014 5.574 5.733 5.576-5.732 2.59 2.664 1.72-1.767L22.383 8l2.59-2.665-1.718-1.767-2.592 2.664L15.088.5Zm0 3.535L18.944 8l-3.855 3.964L11.232 8l3.855-3.964ZM55.415 9.25c.5 1.457 1.851 2.5 3.439 2.5 2.014 0 3.647-1.679 3.647-3.75 0-2.071-1.633-3.75-3.647-3.75-1.588 0-2.939 1.044-3.44 2.5H30.284l-1.823-1.875L25.42 8l3.04 3.125 1.823-1.875h25.13Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  margin-right: 10px;
}
#mabinogim .game_info_class .intro_wrap .inner h1::after,
#mabinogim .info .intro_wrap .inner h1::after,
#mabinogim .container .intro_wrap .inner h1::after {
  display: block;
  content: "";
  width: 63px;
  min-width: 63px;
  height: 16px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='63' height='16' fill='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M3.54 4.875.5 8l3.04 3.125L6.577 8 3.54 4.875ZM15.087.5 9.514 6.232l-.013-.013-1.72 1.768.013.013-.013.013 1.72 1.768.013-.014 5.574 5.733 5.576-5.732 2.59 2.664 1.72-1.767L22.383 8l2.59-2.665-1.718-1.767-2.592 2.664L15.088.5Zm0 3.535L18.944 8l-3.855 3.964L11.232 8l3.855-3.964ZM55.415 9.25c.5 1.457 1.851 2.5 3.439 2.5 2.014 0 3.647-1.679 3.647-3.75 0-2.071-1.633-3.75-3.647-3.75-1.588 0-2.939 1.044-3.44 2.5H30.284l-1.823-1.875L25.42 8l3.04 3.125 1.823-1.875h25.13Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  transform: rotate(180deg);
  margin-left: 10px;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list,
#mabinogim .info .intro_wrap .inner .class_list,
#mabinogim .container .intro_wrap .inner .class_list {
  margin-top: 50px;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul,
#mabinogim .info .intro_wrap .inner .class_list ul,
#mabinogim .container .intro_wrap .inner .class_list ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li,
#mabinogim .info .intro_wrap .inner .class_list ul li,
#mabinogim .container .intro_wrap .inner .class_list ul li {
  position: relative;
  margin-right: 10px;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li .list_inner,
#mabinogim .info .intro_wrap .inner .class_list ul li .list_inner,
#mabinogim .container .intro_wrap .inner .class_list ul li .list_inner {
  position: relative;
  width: 277px;
  height: 644px;
  border-radius: 24px;
  background: #192b34;
  padding: 10px;
  cursor: pointer;
  overflow: hidden;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li .list_inner::before,
#mabinogim .info .intro_wrap .inner .class_list ul li .list_inner::before,
#mabinogim .container .intro_wrap .inner .class_list ul li .list_inner::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgb(25, 43, 52) 60%, rgba(20, 20, 20, 0) 90%);
  z-index: 2;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li .list_inner .deco_border,
#mabinogim .info .intro_wrap .inner .class_list ul li .list_inner .deco_border,
#mabinogim .container .intro_wrap .inner .class_list ul li .list_inner .deco_border {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  border: 2px solid #3a4040;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li .list_inner .class_card,
#mabinogim .info .intro_wrap .inner .class_list ul li .list_inner .class_card,
#mabinogim .container .intro_wrap .inner .class_list ul li .list_inner .class_card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li .list_inner .class_card .card_title,
#mabinogim .info .intro_wrap .inner .class_list ul li .list_inner .class_card .card_title,
#mabinogim .container .intro_wrap .inner .class_list ul li .list_inner .class_card .card_title {
  position: relative;
  padding-top: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li .list_inner .class_card .card_title h2,
#mabinogim .info .intro_wrap .inner .class_list ul li .list_inner .class_card .card_title h2,
#mabinogim .container .intro_wrap .inner .class_list ul li .list_inner .class_card .card_title h2 {
  font-family: "Pretendard-Bold";
  color: #fff;
  font-size: 35px;
  letter-spacing: -0.7px;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li .list_inner .class_card .card_title button,
#mabinogim .info .intro_wrap .inner .class_list ul li .list_inner .class_card .card_title button,
#mabinogim .container .intro_wrap .inner .class_list ul li .list_inner .class_card .card_title button {
  margin-top: 13px;
  color: #6f8289;
  border-radius: 10px;
  background: #01171e;
  white-space: nowrap;
  transition: 0.4s;
  z-index: 2;
  padding: 7px 12px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li .list_inner .class_card .card_title button::before,
#mabinogim .info .intro_wrap .inner .class_list ul li .list_inner .class_card .card_title button::before,
#mabinogim .container .intro_wrap .inner .class_list ul li .list_inner .class_card .card_title button::before {
  content: "계열";
  font-family: "Pretendard-Regular", sans-serif;
  display: block;
  font-size: 16px;
  letter-spacing: -0.32px;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li .list_inner .class_card .class_line,
#mabinogim .info .intro_wrap .inner .class_list ul li .list_inner .class_card .class_line,
#mabinogim .container .intro_wrap .inner .class_list ul li .list_inner .class_card .class_line {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li:hover .list_inner,
  #mabinogim .info .intro_wrap .inner .class_list ul li:hover .list_inner,
  #mabinogim .container .intro_wrap .inner .class_list ul li:hover .list_inner {
    background: #04495e;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li:hover .list_inner::before,
  #mabinogim .info .intro_wrap .inner .class_list ul li:hover .list_inner::before,
  #mabinogim .container .intro_wrap .inner .class_list ul li:hover .list_inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgb(4, 73, 94) 60%, rgba(4, 73, 94, 0) 90%);
    z-index: 2;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li:hover .list_inner .deco_border,
  #mabinogim .info .intro_wrap .inner .class_list ul li:hover .list_inner .deco_border,
  #mabinogim .container .intro_wrap .inner .class_list ul li:hover .list_inner .deco_border {
    border: 2px solid #585852;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li:hover .list_inner .class_card,
  #mabinogim .info .intro_wrap .inner .class_list ul li:hover .list_inner .class_card,
  #mabinogim .container .intro_wrap .inner .class_list ul li:hover .list_inner .class_card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title,
  #mabinogim .info .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title,
  #mabinogim .container .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title h2,
  #mabinogim .info .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title h2,
  #mabinogim .container .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title h2 {
    font-family: "Pretendard-Bold";
    color: #fff;
    font-size: 35px;
    letter-spacing: -0.7px;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title button,
  #mabinogim .info .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title button,
  #mabinogim .container .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title button {
    color: #fff;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title button::before,
  #mabinogim .info .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title button::before,
  #mabinogim .container .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title button::before {
    content: "자세히 보기";
    display: block;
    font-family: "Pretendard-Regular", sans-serif;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title button::after,
  #mabinogim .info .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title button::after,
  #mabinogim .container .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title button::after {
    content: "";
    display: block;
    width: 6px;
    min-width: 6px;
    height: 9px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='9' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='2' d='m1.5 7.5 3-3-3-3'/%3E%3C/svg%3E");
    z-index: 2;
    margin-top: -2px;
    margin-left: 10px;
  }
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=warrior] .list_inner .class_card .class_line .class_line_1,
#mabinogim .info .intro_wrap .inner .class_list ul li[data-line=warrior] .list_inner .class_card .class_line .class_line_1,
#mabinogim .container .intro_wrap .inner .class_list ul li[data-line=warrior] .list_inner .class_card .class_line .class_line_1 {
  position: absolute;
  left: -372px;
  top: 130px;
  width: 830px;
  height: 1024px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/warrior_line_2_37B2D3A04C09CC2F.png);
  background-size: 100% auto;
  transition: all 0.4s;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=warrior] .list_inner .class_card .class_line .class_line_2,
#mabinogim .info .intro_wrap .inner .class_list ul li[data-line=warrior] .list_inner .class_card .class_line .class_line_2,
#mabinogim .container .intro_wrap .inner .class_list ul li[data-line=warrior] .list_inner .class_card .class_line .class_line_2 {
  position: absolute;
  left: -372px;
  top: 300px;
  width: 888px;
  height: 1010px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/warrior_line_3_68958D98B3DDC1BF.png);
  background-size: 100% auto;
  transition: all 0.4s;
  opacity: 0;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=warrior] .list_inner .class_card .class_line .class_line_3,
#mabinogim .info .intro_wrap .inner .class_list ul li[data-line=warrior] .list_inner .class_card .class_line .class_line_3,
#mabinogim .container .intro_wrap .inner .class_list ul li[data-line=warrior] .list_inner .class_card .class_line .class_line_3 {
  position: absolute;
  left: -388px;
  top: 152px;
  width: 1000px;
  height: 580px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/warrior_line_4_5F017124236C03D6.png);
  background-size: 100% auto;
  transition: all 0.4s;
  opacity: 0;
  transform: scaleX(-1);
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=warrior]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=warrior]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=warrior]:hover .list_inner .class_card .class_line .class_line_1 {
    left: -222px;
    top: 128px;
    background-size: 84%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=warrior]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=warrior]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=warrior]:hover .list_inner .class_card .class_line .class_line_2 {
    left: -282px;
    top: 108px;
    opacity: 1;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=warrior]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=warrior]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=warrior]:hover .list_inner .class_card .class_line .class_line_3 {
    left: -528px;
    top: 202px;
    opacity: 1;
    background-size: 82%;
  }
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=archer] .list_inner .class_card .class_line .class_line_1,
#mabinogim .info .intro_wrap .inner .class_list ul li[data-line=archer] .list_inner .class_card .class_line .class_line_1,
#mabinogim .container .intro_wrap .inner .class_list ul li[data-line=archer] .list_inner .class_card .class_line .class_line_1 {
  position: absolute;
  left: -128px;
  top: 90px;
  width: 512px;
  height: 1144px;
  background: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/archer_line_2_946AEAF0A67A9596.png) no-repeat;
  background-size: 100%;
  transition: all 0.4s;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=archer] .list_inner .class_card .class_line .class_line_2,
#mabinogim .info .intro_wrap .inner .class_list ul li[data-line=archer] .list_inner .class_card .class_line .class_line_2,
#mabinogim .container .intro_wrap .inner .class_list ul li[data-line=archer] .list_inner .class_card .class_line .class_line_2 {
  position: absolute;
  left: -424px;
  top: 70px;
  width: 672px;
  height: 1064px;
  background: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/archer_line_3_1C943631C2AC78C3.png) no-repeat;
  background-size: 100%;
  transition: all 0.4s;
  opacity: 0;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=archer] .list_inner .class_card .class_line .class_line_3,
#mabinogim .info .intro_wrap .inner .class_list ul li[data-line=archer] .list_inner .class_card .class_line .class_line_3,
#mabinogim .container .intro_wrap .inner .class_list ul li[data-line=archer] .list_inner .class_card .class_line .class_line_3 {
  position: absolute;
  left: -284px;
  top: 290px;
  width: 1124px;
  height: 1108px;
  background: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/archer_line_4_87DDBBCFAFAB46A2.png) no-repeat;
  background-size: 100%;
  transition: all 0.4s;
  opacity: 0;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=archer]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=archer]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=archer]:hover .list_inner .class_card .class_line .class_line_1 {
    left: -18px;
    top: 80px;
    background-size: 80%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=archer]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=archer]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=archer]:hover .list_inner .class_card .class_line .class_line_2 {
    left: -224px;
    top: 40px;
    background-size: 84%;
    opacity: 1;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=archer]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=archer]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=archer]:hover .list_inner .class_card .class_line .class_line_3 {
    left: -324px;
    top: 298px;
    background-size: 84%;
    opacity: 1;
  }
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=mage] .list_inner .class_card .class_line .class_line_1,
#mabinogim .info .intro_wrap .inner .class_list ul li[data-line=mage] .list_inner .class_card .class_line .class_line_1,
#mabinogim .container .intro_wrap .inner .class_list ul li[data-line=mage] .list_inner .class_card .class_line .class_line_1 {
  position: absolute;
  left: -65px;
  top: 194px;
  width: 466px;
  height: 1112px;
  background: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/mage_line_2_3B83737BEFFE2F1E.png) no-repeat;
  background-size: 100%;
  transition: all 0.4s;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=mage] .list_inner .class_card .class_line .class_line_2,
#mabinogim .info .intro_wrap .inner .class_list ul li[data-line=mage] .list_inner .class_card .class_line .class_line_2,
#mabinogim .container .intro_wrap .inner .class_list ul li[data-line=mage] .list_inner .class_card .class_line .class_line_2 {
  position: absolute;
  left: 22px;
  top: 360px;
  width: 480px;
  height: 1172px;
  background: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/mage_line_3_8B52C51AC86C7FF4.png) no-repeat;
  background-size: 100%;
  transition: all 0.4s;
  opacity: 0;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=mage] .list_inner .class_card .class_line .class_line_3,
#mabinogim .info .intro_wrap .inner .class_list ul li[data-line=mage] .list_inner .class_card .class_line .class_line_3,
#mabinogim .container .intro_wrap .inner .class_list ul li[data-line=mage] .list_inner .class_card .class_line .class_line_3 {
  position: absolute;
  left: -346px;
  top: 242px;
  width: 553px;
  height: 1198px;
  background: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/mage_line_4_1407F0E540914B42.png) no-repeat;
  transition: all 0.4s;
  opacity: 0;
  z-index: -1;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=mage]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=mage]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=mage]:hover .list_inner .class_card .class_line .class_line_1 {
    left: -100px;
    top: 199px;
    background-size: 80%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=mage]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=mage]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=mage]:hover .list_inner .class_card .class_line .class_line_2 {
    left: -62px;
    top: 290px;
    background-size: 80%;
    opacity: 1;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=mage]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=mage]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=mage]:hover .list_inner .class_card .class_line .class_line_3 {
    left: 16px;
    top: 82px;
    opacity: 1;
    background-size: 80%;
  }
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=healer] .list_inner .class_card .class_line .class_line_1,
#mabinogim .info .intro_wrap .inner .class_list ul li[data-line=healer] .list_inner .class_card .class_line .class_line_1,
#mabinogim .container .intro_wrap .inner .class_list ul li[data-line=healer] .list_inner .class_card .class_line .class_line_1 {
  position: absolute;
  left: -70px;
  top: 118px;
  width: 418px;
  height: 1172px;
  background: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/healer_line_2_F36BCFDF34ADEF01.png) no-repeat;
  background-size: 100%;
  transition: all 0.4s;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=healer] .list_inner .class_card .class_line .class_line_2,
#mabinogim .info .intro_wrap .inner .class_list ul li[data-line=healer] .list_inner .class_card .class_line .class_line_2,
#mabinogim .container .intro_wrap .inner .class_list ul li[data-line=healer] .list_inner .class_card .class_line .class_line_2 {
  position: absolute;
  left: -642px;
  top: 350px;
  width: 1196px;
  height: 1064px;
  background: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/healer_line_3_2D469FC76BCE4EA2.png) no-repeat;
  transition: all 0.4s;
  opacity: 0;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=healer] .list_inner .class_card .class_line .class_line_3,
#mabinogim .info .intro_wrap .inner .class_list ul li[data-line=healer] .list_inner .class_card .class_line .class_line_3,
#mabinogim .container .intro_wrap .inner .class_list ul li[data-line=healer] .list_inner .class_card .class_line .class_line_3 {
  position: absolute;
  left: 15px;
  top: 180px;
  width: 942px;
  height: 976px;
  background: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/healer_line_4_937ABDCBE7D1B193.png) no-repeat;
  transition: all 0.4s;
  opacity: 0;
  z-index: -1;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=healer]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=healer]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=healer]:hover .list_inner .class_card .class_line .class_line_1 {
    left: -10px;
    top: 118px;
    background-size: 94%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=healer]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=healer]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=healer]:hover .list_inner .class_card .class_line .class_line_2 {
    left: -442px;
    top: 320px;
    background-size: 84%;
    opacity: 1;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=healer]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=healer]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=healer]:hover .list_inner .class_card .class_line .class_line_3 {
    left: -165px;
    top: 100px;
    background-size: 84%;
    opacity: 1;
  }
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=bard] .list_inner .class_card .class_line .class_line_1,
#mabinogim .info .intro_wrap .inner .class_list ul li[data-line=bard] .list_inner .class_card .class_line .class_line_1,
#mabinogim .container .intro_wrap .inner .class_list ul li[data-line=bard] .list_inner .class_card .class_line .class_line_1 {
  position: absolute;
  left: -130px;
  top: 142px;
  width: 618px;
  height: 1202px;
  background: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/bard_line_2_9BC13B02244F2CCE.png) no-repeat;
  background-size: 100%;
  transition: all 0.4s;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=bard] .list_inner .class_card .class_line .class_line_2,
#mabinogim .info .intro_wrap .inner .class_list ul li[data-line=bard] .list_inner .class_card .class_line .class_line_2,
#mabinogim .container .intro_wrap .inner .class_list ul li[data-line=bard] .list_inner .class_card .class_line .class_line_2 {
  position: absolute;
  left: -315px;
  top: 180px;
  width: 608px;
  height: 1212px;
  background: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/bard_line_3_292F7849A4CD3D6D.png) no-repeat;
  transition: all 0.4s;
  opacity: 0;
  z-index: 3;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=bard] .list_inner .class_card .class_line .class_line_3,
#mabinogim .info .intro_wrap .inner .class_list ul li[data-line=bard] .list_inner .class_card .class_line .class_line_3,
#mabinogim .container .intro_wrap .inner .class_list ul li[data-line=bard] .list_inner .class_card .class_line .class_line_3 {
  position: absolute;
  left: 45px;
  top: 240px;
  width: 440px;
  height: 1196px;
  background: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/bard_line_4_EE862F9C6C2F489E.png) no-repeat;
  transition: all 0.4s;
  opacity: 0;
  z-index: 2;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=bard]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=bard]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=bard]:hover .list_inner .class_card .class_line .class_line_1 {
    left: -150px;
    top: 142px;
    background-size: 84%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=bard]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=bard]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=bard]:hover .list_inner .class_card .class_line .class_line_2 {
    left: -285px;
    top: 50px;
    opacity: 1;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=bard]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=bard]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=bard]:hover .list_inner .class_card .class_line .class_line_3 {
    left: -15px;
    top: 184px;
    opacity: 1;
    background-size: 84%;
  }
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=thief] .list_inner .class_card .class_line .class_line_1,
#mabinogim .info .intro_wrap .inner .class_list ul li[data-line=thief] .list_inner .class_card .class_line .class_line_1,
#mabinogim .container .intro_wrap .inner .class_list ul li[data-line=thief] .list_inner .class_card .class_line .class_line_1 {
  position: absolute;
  left: -224px;
  top: 166px;
  width: 730px;
  height: 1108px;
  background: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/thief_line_2_329BACBB215B9685.png) no-repeat;
  background-size: 76%;
  transition: all 0.4s;
  z-index: 2;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=thief] .list_inner .class_card .class_line .class_line_2,
#mabinogim .info .intro_wrap .inner .class_list ul li[data-line=thief] .list_inner .class_card .class_line .class_line_2,
#mabinogim .container .intro_wrap .inner .class_list ul li[data-line=thief] .list_inner .class_card .class_line .class_line_2 {
  position: absolute;
  left: -265px;
  top: 320px;
  width: 966px;
  height: 1282px;
  background: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/thief_line_3_329BACBB215B9685.png) no-repeat;
  transition: all 0.4s;
  background-size: 72%;
  z-index: 3;
  opacity: 0;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=thief] .list_inner .class_card .class_line .class_line_3,
#mabinogim .info .intro_wrap .inner .class_list ul li[data-line=thief] .list_inner .class_card .class_line .class_line_3,
#mabinogim .container .intro_wrap .inner .class_list ul li[data-line=thief] .list_inner .class_card .class_line .class_line_3 {
  position: absolute;
  left: 45px;
  top: 240px;
  width: 698px;
  height: 1108px;
  background: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/thief_line_4_329BACBB215B9685.png) no-repeat;
  background-size: 60%;
  transition: all 0.4s;
  z-index: 1;
  opacity: 0;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=thief]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=thief]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=thief]:hover .list_inner .class_card .class_line .class_line_1 {
    left: -210px;
    top: 162px;
    background-size: 56%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=thief]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=thief]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=thief]:hover .list_inner .class_card .class_line .class_line_2 {
    left: -245px;
    top: 280px;
    opacity: 1;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=thief]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=thief]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=thief]:hover .list_inner .class_card .class_line .class_line_3 {
    left: -98px;
    top: 222px;
    opacity: 1;
  }
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li:last-child,
#mabinogim .info .intro_wrap .inner .class_list ul li:last-child,
#mabinogim .container .intro_wrap .inner .class_list ul li:last-child {
  margin-right: 0px;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li.new_class .list_inner .class_card .card_title h2,
#mabinogim .info .intro_wrap .inner .class_list ul li.new_class .list_inner .class_card .card_title h2,
#mabinogim .container .intro_wrap .inner .class_list ul li.new_class .list_inner .class_card .card_title h2 {
  position: relative;
  display: flex;
  justify-content: center;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list ul li.new_class .list_inner .class_card .card_title h2::before,
#mabinogim .info .intro_wrap .inner .class_list ul li.new_class .list_inner .class_card .card_title h2::before,
#mabinogim .container .intro_wrap .inner .class_list ul li.new_class .list_inner .class_card .card_title h2::before {
  position: absolute;
  top: -24px;
  content: "";
  display: block;
  width: 32px;
  min-width: 32px;
  height: 12px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='12' fill='none'%3E%3Cpath fill='%2300B771' d='M9.258 11H7.01L2.96 4.086V11H.858V.497h2.248l4.05 6.921V.498H9.26V11Zm9.606 0h-7.2V.497h7.2V2.6h-5.098v2.102h3.45v2.102h-3.45v2.095h5.098V11Zm12.344-3.003c0 .435-.083.845-.249 1.23a3.132 3.132 0 0 1-2.9 1.92c-.39 0-.767-.069-1.128-.206a3.026 3.026 0 0 1-.967-.6 3.006 3.006 0 0 1-.974.6 3.161 3.161 0 0 1-1.128.205 3.16 3.16 0 0 1-1.23-.241 3.296 3.296 0 0 1-1.004-.674 3.296 3.296 0 0 1-.674-1.003 3.16 3.16 0 0 1-.241-1.23v-7.5h2.102v7.5c0 .146.027.285.08.417.054.127.127.239.22.336.098.093.21.166.337.22.127.054.264.08.41.08a1.042 1.042 0 0 0 .967-.636c.054-.132.08-.271.08-.418v-7.5h2.103v7.5c0 .147.026.286.08.418.054.127.127.239.22.336.098.093.21.166.337.22.127.054.263.08.41.08a1.041 1.041 0 0 0 .967-.636c.058-.132.088-.271.088-.418v-7.5h2.094v7.5Z'/%3E%3C/svg%3E");
  z-index: 2;
}
#mabinogim .game_info_class .intro_wrap .inner .class_list .mobile_frame,
#mabinogim .info .intro_wrap .inner .class_list .mobile_frame,
#mabinogim .container .intro_wrap .inner .class_list .mobile_frame {
  display: none;
}
#mabinogim .game_info_class .detail_wrap,
#mabinogim .info .detail_wrap,
#mabinogim .container .detail_wrap {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: max(var(--vh, 1vh) * 100 - var(--pc-top-height), 970px);
}
#mabinogim .game_info_class .detail_wrap .inner,
#mabinogim .info .detail_wrap .inner,
#mabinogim .container .detail_wrap .inner {
  position: relative;
  padding: 0 56px;
  width: 100%;
  display: flex;
}
#mabinogim .game_info_class .detail_wrap .inner .class_list_area,
#mabinogim .info .detail_wrap .inner .class_list_area,
#mabinogim .container .detail_wrap .inner .class_list_area {
  position: relative;
  margin: auto 107px auto 0;
  width: 116px;
  z-index: 2;
  animation: fadeInLeft 0.3s forwards ease;
  opacity: 0;
}
#mabinogim .game_info_class .detail_wrap .inner .class_list_area .prev_button,
#mabinogim .info .detail_wrap .inner .class_list_area .prev_button,
#mabinogim .container .detail_wrap .inner .class_list_area .prev_button {
  position: relative;
  width: 100%;
  height: 48px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mabinogim .game_info_class .detail_wrap .inner .class_list_area .prev_button::after,
#mabinogim .info .detail_wrap .inner .class_list_area .prev_button::after,
#mabinogim .container .detail_wrap .inner .class_list_area .prev_button::after {
  content: "";
  display: block;
  width: 12px;
  min-width: 12px;
  height: 9px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' fill='none'%3E%3Cpath stroke='%2317252F' stroke-linecap='round' stroke-width='3' d='M10 2 6 6 2 2'/%3E%3C/svg%3E");
  transform: rotate(180deg);
  transition: all 0.3s;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .detail_wrap .inner .class_list_area .prev_button:hover::after,
  #mabinogim .info .detail_wrap .inner .class_list_area .prev_button:hover::after,
  #mabinogim .container .detail_wrap .inner .class_list_area .prev_button:hover::after {
    transform: rotate(180deg) translateY(2px);
  }
}
#mabinogim .game_info_class .detail_wrap .inner .class_list_area .free_scroll,
#mabinogim .info .detail_wrap .inner .class_list_area .free_scroll,
#mabinogim .container .detail_wrap .inner .class_list_area .free_scroll {
  margin: 20px 0;
  max-height: 505px;
  overflow: hidden;
}
#mabinogim .game_info_class .detail_wrap .inner .class_list_area .free_scroll ul li,
#mabinogim .info .detail_wrap .inner .class_list_area .free_scroll ul li,
#mabinogim .container .detail_wrap .inner .class_list_area .free_scroll ul li {
  font-family: "Pretendard-Bold";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  border-radius: 12px;
  background: #17252f;
  color: #fff;
  font-size: 14px;
  margin-bottom: 5px;
  cursor: pointer;
  text-align: center;
}
#mabinogim .game_info_class .detail_wrap .inner .class_list_area .free_scroll ul li:last-child,
#mabinogim .info .detail_wrap .inner .class_list_area .free_scroll ul li:last-child,
#mabinogim .container .detail_wrap .inner .class_list_area .free_scroll ul li:last-child {
  margin-bottom: 0;
}
#mabinogim .game_info_class .detail_wrap .inner .class_list_area .free_scroll ul li.on,
#mabinogim .info .detail_wrap .inner .class_list_area .free_scroll ul li.on,
#mabinogim .container .detail_wrap .inner .class_list_area .free_scroll ul li.on {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  border: 3px solid #00b670;
  border-radius: 12px;
  background: rgba(0, 182, 112, 0.7);
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .detail_wrap .inner .class_list_area .free_scroll ul li:hover,
  #mabinogim .info .detail_wrap .inner .class_list_area .free_scroll ul li:hover,
  #mabinogim .container .detail_wrap .inner .class_list_area .free_scroll ul li:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    border: 3px solid #00b670;
    border-radius: 12px;
    background: rgba(0, 182, 112, 0.7);
  }
}
#mabinogim .game_info_class .detail_wrap .inner .class_list_area .next_button,
#mabinogim .info .detail_wrap .inner .class_list_area .next_button,
#mabinogim .container .detail_wrap .inner .class_list_area .next_button {
  position: relative;
  width: 100%;
  height: 48px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mabinogim .game_info_class .detail_wrap .inner .class_list_area .next_button::after,
#mabinogim .info .detail_wrap .inner .class_list_area .next_button::after,
#mabinogim .container .detail_wrap .inner .class_list_area .next_button::after {
  content: "";
  display: block;
  width: 12px;
  min-width: 12px;
  height: 9px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' fill='none'%3E%3Cpath stroke='%2317252F' stroke-linecap='round' stroke-width='3' d='M10 2 6 6 2 2'/%3E%3C/svg%3E");
  transition: all 0.3s;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .detail_wrap .inner .class_list_area .next_button:hover::after,
  #mabinogim .info .detail_wrap .inner .class_list_area .next_button:hover::after,
  #mabinogim .container .detail_wrap .inner .class_list_area .next_button:hover::after {
    transform: translateY(2px);
  }
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout,
#mabinogim .info .detail_wrap .inner .detail_layout,
#mabinogim .container .detail_wrap .inner .detail_layout {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: auto 0;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info {
  opacity: 0;
  animation: fadeUp 1s forwards ease;
  z-index: 2;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .line_flag,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .line_flag,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .line_flag {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  column-gap: 8px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .line_flag .new_class,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .line_flag .new_class,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .line_flag .new_class {
  display: block;
  width: 32px;
  min-width: 32px;
  height: 12px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='12' fill='none'%3E%3Cpath fill='%2300B771' d='M9.258 11H7.01L2.96 4.086V11H.858V.497h2.248l4.05 6.921V.498H9.26V11Zm9.606 0h-7.2V.497h7.2V2.6h-5.098v2.102h3.45v2.102h-3.45v2.095h5.098V11Zm12.344-3.003c0 .435-.083.845-.249 1.23a3.132 3.132 0 0 1-2.9 1.92c-.39 0-.767-.069-1.128-.206a3.026 3.026 0 0 1-.967-.6 3.006 3.006 0 0 1-.974.6 3.161 3.161 0 0 1-1.128.205 3.16 3.16 0 0 1-1.23-.241 3.296 3.296 0 0 1-1.004-.674 3.296 3.296 0 0 1-.674-1.003 3.16 3.16 0 0 1-.241-1.23v-7.5h2.102v7.5c0 .146.027.285.08.417.054.127.127.239.22.336.098.093.21.166.337.22.127.054.264.08.41.08a1.042 1.042 0 0 0 .967-.636c.054-.132.08-.271.08-.418v-7.5h2.103v7.5c0 .147.026.286.08.418.054.127.127.239.22.336.098.093.21.166.337.22.127.054.263.08.41.08a1.041 1.041 0 0 0 .967-.636c.058-.132.088-.271.088-.418v-7.5h2.094v7.5Z'/%3E%3C/svg%3E");
  background-size: 100% auto;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .line_flag span,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .line_flag span,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .line_flag span {
  font-family: "Pretendard-Bold";
  display: block;
  color: #fff;
  padding: 8px 15px;
  border-radius: 20px;
  background: #192b34;
  color: #fff;
  font-size: 14px;
  width: min-content;
  white-space: nowrap;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .name,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .name,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .name {
  display: flex;
  align-items: center;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .name span,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .name span,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .name span {
  font-family: "Pretendard-Bold";
  color: #fff;
  font-size: 70px;
  letter-spacing: -1.4px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .description,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .description,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .description {
  margin-top: 38px;
  color: #fff;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 21px */
  word-break: keep-all;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .tag,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .tag,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .tag {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .tag span,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .tag span,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .tag span {
  border-radius: 5px;
  border: 1px solid #fff;
  padding: 5px 10px;
  width: auto;
  white-space: nowrap;
  color: #fff;
  font-size: 14px;
  letter-spacing: -0.28px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .button_area,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .button_area,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .button_area {
  position: relative;
  margin-top: 32px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .button_area ul,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .button_area ul,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .button_area ul {
  display: flex;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .button_area ul li button,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .button_area ul li button,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .button_area ul li button {
  border-radius: 12px;
  background: #4c5860;
  padding: 12px 18px;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .button_area ul li button::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .button_area ul li button::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .button_area ul li button::before {
  display: block;
  content: "";
  width: 8px;
  height: 10px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10' fill='none'%3E%3Cpath fill='%23fff' d='M7.5 4.254a1 1 0 0 1 0 1.732l-6 3.464A1 1 0 0 1 0 8.584V1.656A1 1 0 0 1 1.5.79l6 3.464Z'/%3E%3C/svg%3E");
  margin-right: 8px;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .button_area ul li button:hover,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .button_area ul li button:hover,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .button_area ul li button:hover {
    background: #2baf7e;
  }
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .button_area ul li:first-child,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .button_area ul li:first-child,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .button_area ul li:first-child {
  margin-right: 6px;
  display: none;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .button_area ul li:first-child button::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .button_area ul li:first-child button::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .button_area ul li:first-child button::before {
  display: block;
  content: "";
  width: 9px;
  height: 8px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='8' fill='none'%3E%3Cpath fill='%23fff' d='M0 1c0-.552.504-1 1.125-1h6.75C8.496 0 9 .448 9 1s-.504 1-1.125 1h-6.75C.504 2 0 1.552 0 1ZM0 4c0-.552.504-1 1.125-1h6.75C8.496 3 9 3.448 9 4s-.504 1-1.125 1h-6.75C.504 5 0 4.552 0 4ZM0 7c0-.552.504-1 1.125-1h6.75C8.496 6 9 6.448 9 7s-.504 1-1.125 1h-6.75C.504 8 0 7.552 0 7Z'/%3E%3C/svg%3E");
  margin-right: 8px;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .button_area ul li:first-child button:hover,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .button_area ul li:first-child button:hover,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .button_area ul li:first-child button:hover {
    background: #2baf7e;
  }
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component {
  position: relative;
  max-width: 680px;
  min-width: 556px;
  height: 340px;
  width: 100%;
  display: block;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area {
  position: relative;
  margin-top: 32px;
  width: 100%;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_mobile_top,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_mobile_top,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_mobile_top {
  display: flex;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list {
  display: flex;
  align-items: center;
  border-radius: 12px;
  background: rgba(23, 37, 47, 0.5);
  padding: 13px 18px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list span,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list span,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list span {
  color: #fff;
  font-size: 14px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list ul,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list ul,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list ul {
  margin-left: 10px;
  display: flex;
  align-items: center;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list ul li,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list ul li,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list ul li {
  width: 44px;
  height: 44px;
  margin-right: 10px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.5;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list ul li:last-child,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list ul li:last-child,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list ul li:last-child {
  margin-right: 0;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list ul li img,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list ul li img,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list ul li img {
  width: 100%;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list ul li.on,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list ul li.on,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list ul li.on {
  border: 3px solid #00b670;
  opacity: 1;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list ul li:hover,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list ul li:hover,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_select_list ul li:hover {
    opacity: 1;
  }
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail {
  border-radius: 12px;
  background: rgba(23, 37, 47, 0.5);
  margin-top: 6px;
  padding: 18px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_title,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_title,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_title {
  display: flex;
  align-items: center;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_title .skill_icon,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_title .skill_icon,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_title .skill_icon {
  width: 24px;
  height: 24px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_title .skill_icon img,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_title .skill_icon img,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_title .skill_icon img {
  width: 100%;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_title span,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_title span,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_title span {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin-left: 10px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_tag,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_tag,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_tag {
  margin-top: 14px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_tag span,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_tag span,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_tag span {
  color: #a1b7c7;
  font-size: 15px;
  font-weight: 400;
  margin-right: 4px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_tag span:last-child,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_tag span:last-child,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_tag span:last-child {
  margin-right: 0;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_description,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_description,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_description {
  margin-top: 24px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_description span,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_description span,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_description span {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.3px;
  word-break: keep-all;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_description span .br_pc,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_description span .br_pc,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .skill_description span .br_pc {
  display: block;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .default_text,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .default_text,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .default_text {
  margin-top: 12px;
  display: inline-block;
  border-radius: 20px;
  background: #364149;
  padding: 6px 12px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .default_text span,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .default_text span,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component .skill_area .skill_content .skill_detail .default_text span {
  color: #a1b7c7;
  font-size: 14px;
  letter-spacing: -0.28px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line {
  position: relative;
  transition: all 0.3s;
  z-index: 2;
  align-self: flex-end;
  margin-left: 10px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list {
  position: relative;
  display: flex;
  animation: fadeInLeft 1s 0.5s forwards ease;
  opacity: 0;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_start,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_start,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_start {
  width: 107px;
  margin-right: 5px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item {
  min-width: min-content;
  overflow: hidden;
  background: #263844;
  cursor: pointer;
  border-right: 1px solid #1c2931;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item.on,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item.on,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item.on {
  background: #04495e;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item:hover,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item:hover,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item:hover {
    background: #04495e;
  }
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item.line_1,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item.line_1,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item.line_1 {
  border-radius: 12px 12px 0 0;
  border-right: none;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item:last-child,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item:last-child,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item:last-child {
  border-right: none;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title {
  width: 107px;
  height: 206px;
  position: relative;
  overflow: hidden;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .name,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .name,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .name {
  font-family: "Pretendard-Bold";
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 78px;
  margin: 6px auto 0;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .name::before {
  content: "";
  display: block;
  width: 78px;
  height: 78px;
  position: absolute;
  background-size: 100% auto;
  opacity: 0.1;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .name.new_class::after,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .name.new_class::after,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .name.new_class::after {
  position: absolute;
  top: 12px;
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 20px;
  border-radius: 10px;
  background: rgba(1, 23, 30, 0.6);
  backdrop-filter: blur(2px);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='12' fill='none'%3E%3Cpath fill='%2300B771' d='M9.258 11H7.01L2.96 4.086V11H.858V.497h2.248l4.05 6.921V.498H9.26V11Zm9.606 0h-7.2V.497h7.2V2.6h-5.098v2.102h3.45v2.102h-3.45v2.095h5.098V11Zm12.344-3.003c0 .435-.083.845-.249 1.23a3.132 3.132 0 0 1-2.9 1.92c-.39 0-.767-.069-1.128-.206a3.026 3.026 0 0 1-.967-.6 3.006 3.006 0 0 1-.974.6 3.161 3.161 0 0 1-1.128.205 3.16 3.16 0 0 1-1.23-.241 3.296 3.296 0 0 1-1.004-.674 3.296 3.296 0 0 1-.674-1.003 3.16 3.16 0 0 1-.241-1.23v-7.5h2.102v7.5c0 .146.027.285.08.417.054.127.127.239.22.336.098.093.21.166.337.22.127.054.264.08.41.08a1.042 1.042 0 0 0 .967-.636c.054-.132.08-.271.08-.418v-7.5h2.103v7.5c0 .147.026.286.08.418.054.127.127.239.22.336.098.093.21.166.337.22.127.054.263.08.41.08a1.041 1.041 0 0 0 .967-.636c.058-.132.088-.271.088-.418v-7.5h2.094v7.5Z'/%3E%3C/svg%3E");
  background-size: 60% auto;
  background-position: center 6px;
  background-repeat: no-repeat;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .thumbnail {
  position: absolute;
  background-size: 100% auto;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .tag,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .tag,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .tag {
  background: #1c2931;
  width: 100%;
  height: 24px;
  display: flex;
  align-items: center;
  border-radius: 0 0 12px 12px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .tag span,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .tag span,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .tag span {
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding-left: 16px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_expert_swiper,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_expert_swiper,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_expert_swiper {
  position: relative;
  border-radius: 12px;
  background: #263844;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_expert_swiper ul,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_expert_swiper ul,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_expert_swiper ul {
  height: auto;
  max-width: 324px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_expert_swiper .tag span,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_expert_swiper .tag span,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_expert_swiper .tag span {
  color: #a1b7c7;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .pager,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .pager,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .pager {
  position: absolute;
  width: 98%;
  display: flex;
  justify-content: flex-end;
  bottom: -14px;
  right: 0;
  z-index: 12;
  height: 30px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .pager .swiper-pagination-bullet,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .pager .swiper-pagination-bullet,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .pager .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: #aaa;
  border-radius: 50%;
  opacity: 1;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .pager .swiper-pagination-bullet:last-child,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .pager .swiper-pagination-bullet:last-child,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .pager .swiper-pagination-bullet:last-child {
  margin-right: 0;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .pager .swiper-pagination-bullet-active,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .pager .swiper-pagination-bullet-active,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .pager .swiper-pagination-bullet-active {
  width: 25px;
  height: 8px;
  background: #2baf7e;
  border-radius: 4px;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_1 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_1 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_1 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/warrior_icon_1_65811EBD4BEC0285.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_1 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_1 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_1 .title .thumbnail {
  top: 70px;
  left: -40px;
  width: 245px;
  height: 271px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/warrior_line_1_06066EE99E761EFA.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_2 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_2 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_2 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/warrior_icon_5_648CB463FD4AC8A3.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_2 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_2 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_2 .title .thumbnail {
  top: 22px;
  left: -152px;
  width: 382px;
  height: 394px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/warrior_line_5_8A452CCB080CB6B1.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_3 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_3 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_3 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/warrior_icon_2_82FBE98DCDF420BB.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_3 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_3 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_3 .title .thumbnail {
  top: 62px;
  left: -126px;
  width: 296px;
  height: 364px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/warrior_line_2_37B2D3A04C09CC2F.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_4 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_4 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_4 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/warrior_icon_3_753F0A05E1F5E2F8.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_4 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_4 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_4 .title .thumbnail {
  top: 52px;
  left: -82px;
  width: 322px;
  height: 365px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/warrior_line_3_68958D98B3DDC1BF.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_5 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_5 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_5 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/warrior_icon_4_C1812DE239AB0EC8.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_5 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_5 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=warrior] .line_5 .title .thumbnail {
  position: absolute;
  top: 36px;
  left: -62px;
  width: 308px;
  height: 373px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/warrior_line_4_5F017124236C03D6.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_1 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_1 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_1 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/archer_icon_1_6C95C482C969A5DA.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_1 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_1 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_1 .title .thumbnail {
  position: absolute;
  top: 16px;
  left: -28px;
  width: 219px;
  height: 428px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/archer_line_1_91D9F178871DF33E.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_2 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_2 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_2 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/archer_icon_2_A336FF08A4F57E5A.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_2 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_2 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_2 .title .thumbnail {
  position: absolute;
  top: 36px;
  left: -40px;
  width: 186px;
  height: 415px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/archer_line_2_946AEAF0A67A9596.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_3 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_3 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_3 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/archer_icon_3_3406C778F7F364AF.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_3 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_3 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_3 .title .thumbnail {
  top: 8px;
  left: -76px;
  width: 244px;
  height: 386px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/archer_line_3_1C943631C2AC78C3.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_4 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_4 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_4 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/archer_icon_4_D99A386A246CC076.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_4 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_4 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=archer] .line_4 .title .thumbnail {
  top: 52px;
  left: -146px;
  width: 393px;
  height: 388px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/archer_line_4_87DDBBCFAFAB46A2.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_1 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_1 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_1 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/mage_icon_1_3399B9475E5FD2BA.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_1 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_1 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_1 .title .thumbnail {
  top: 54px;
  left: -38px;
  width: 198px;
  height: 183px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/mage_line_1_ABCF78594DE826C6.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_2 .title .name,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_2 .title .name,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_2 .title .name {
  position: relative;
  z-index: 2;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_2 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_2 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_2 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/mage_icon_5_EB114856CBE160D2.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_2 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_2 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_2 .title .thumbnail {
  top: -60px;
  left: -66px;
  width: 256px;
  height: 267px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/mage_line_5_B081998986AB2402.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_3 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_3 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_3 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/mage_icon_2_8A3C50B41D1A1A9E.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_3 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_3 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_3 .title .thumbnail {
  top: 64px;
  left: -18px;
  width: 171px;
  height: 407px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/mage_line_2_3B83737BEFFE2F1E.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_4 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_4 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_4 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/mage_icon_3_A721D69252722705.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_4 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_4 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_4 .title .thumbnail {
  top: 44px;
  left: -30px;
  width: 168px;
  height: 448px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/mage_line_3_8B52C51AC86C7FF4.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_5 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_5 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_5 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/mage_icon_4_A4B1DBBE4891A929.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_5 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_5 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=mage] .line_5 .title .thumbnail {
  top: 34px;
  left: -46px;
  width: 213px;
  height: 473px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/mage_line_4_1407F0E540914B42.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_1 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_1 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_1 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/healer_icon_1_697BB71C01BA77C7.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_1 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_1 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_1 .title .thumbnail {
  top: 52px;
  left: -42px;
  width: 212px;
  height: 427px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/healer_line_1_CAA08532FD6A5564.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_2 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_2 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_2 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/healer_icon_5_589CF9A334A77B91.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_2 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_2 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_2 .title .thumbnail {
  top: auto;
  bottom: -6px;
  left: 0;
  width: 107px;
  height: 143px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/healer_line_5_A81ECBD118FDBD03.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_3 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_3 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_3 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/healer_icon_2_15972371DB794119.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_3 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_3 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_3 .title .thumbnail {
  top: 34px;
  left: -28px;
  width: 162px;
  height: 461px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/healer_line_2_F36BCFDF34ADEF01.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_4 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_4 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_4 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/healer_icon_3_5F6E5C85FD70A719.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_4 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_4 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_4 .title .thumbnail {
  top: 54px;
  left: -196px;
  width: 474px;
  height: 422px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/healer_line_3_2D469FC76BCE4EA2.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_5 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_5 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_5 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/healer_icon_4_D9E416836A696233.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_5 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_5 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=healer] .line_5 .title .thumbnail {
  top: 42px;
  left: -62px;
  width: 365px;
  height: 379px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/healer_line_4_937ABDCBE7D1B193.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_1 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_1 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_1 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/bard_icon_1_410D309C3257989E.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_1 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_1 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_1 .title .thumbnail {
  top: 54px;
  left: -74px;
  width: 351px;
  height: 312px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/bard_line_1_665D3DD481B4F2B1.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_2 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_2 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_2 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/bard_icon_2_AD3BA497BA26AFE8.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_2 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_2 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_2 .title .thumbnail {
  top: 52px;
  left: -44px;
  width: 227px;
  height: 447px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/bard_line_2_9BC13B02244F2CCE.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_3 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_3 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_3 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/bard_icon_3_C866D0245C7D57D4.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_3 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_3 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_3 .title .thumbnail {
  top: -48px;
  left: -108px;
  width: 266px;
  height: 666px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/bard_line_3_292F7849A4CD3D6D.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_4 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_4 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_4 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/bard_icon_4_A3E490DA005190F0.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_4 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_4 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=bard] .line_4 .title .thumbnail {
  top: 38px;
  left: -42px;
  width: 162px;
  height: 439px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/bard_line_4_EE862F9C6C2F489E.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_1 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_1 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_1 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/thief_icon_1_A8450BD19314134E.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_1 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_1 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_1 .title .thumbnail {
  top: 76px;
  left: -58px;
  width: 210px;
  height: 358px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/thief_line_1_329BACBB215B9685.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_2 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_2 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_2 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/thief_icon_2_A8450BD19314134E.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_2 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_2 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_2 .title .thumbnail {
  top: 72px;
  left: -72px;
  width: 187px;
  height: 285px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/thief_line_2_329BACBB215B9685.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_3 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_3 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_3 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/thief_icon_3_A8450BD19314134E.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_3 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_3 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_3 .title .thumbnail {
  top: 20px;
  left: -96px;
  width: 303px;
  height: 403px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/thief_line_3_329BACBB215B9685.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_4 .title .name::before,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_4 .title .name::before,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_4 .title .name::before {
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/thief_icon_4_A8450BD19314134E.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_4 .title .thumbnail,
#mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_4 .title .thumbnail,
#mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list[data-line=thief] .line_4 .title .thumbnail {
  top: 55px;
  left: -66px;
  width: 195px;
  height: 425px;
  background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/thief_line_4_329BACBB215B9685.png);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .background,
#mabinogim .info .detail_wrap .inner .detail_layout .background,
#mabinogim .container .detail_wrap .inner .detail_layout .background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1;
  overflow: hidden;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .background .video_area,
#mabinogim .info .detail_wrap .inner .detail_layout .background .video_area,
#mabinogim .container .detail_wrap .inner .detail_layout .background .video_area {
  width: 100%;
  height: 100%;
  animation: fadeIn 1s forwards ease;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .background .video_area::before,
#mabinogim .info .detail_wrap .inner .detail_layout .background .video_area::before,
#mabinogim .container .detail_wrap .inner .detail_layout .background .video_area::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(38, 38, 38, 0.85) 0.1%, rgba(38, 38, 38, 0.74) 30.2%, rgba(38, 38, 38, 0) 52.66%);
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .background .video_area video,
#mabinogim .info .detail_wrap .inner .detail_layout .background .video_area video,
#mabinogim .container .detail_wrap .inner .detail_layout .background .video_area video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .background .video_area video[data-type=pc],
#mabinogim .info .detail_wrap .inner .detail_layout .background .video_area video[data-type=pc],
#mabinogim .container .detail_wrap .inner .detail_layout .background .video_area video[data-type=pc] {
  display: block;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .background .video_area video[data-type=mobile],
#mabinogim .info .detail_wrap .inner .detail_layout .background .video_area video[data-type=mobile],
#mabinogim .container .detail_wrap .inner .detail_layout .background .video_area video[data-type=mobile] {
  display: none;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .back_button,
#mabinogim .info .detail_wrap .inner .detail_layout .back_button,
#mabinogim .container .detail_wrap .inner .detail_layout .back_button {
  font-family: "Pretendard-Bold";
  position: absolute;
  right: 0;
  top: 48px;
  padding: 10px 20px;
  border-radius: 12px 0px 0px 12px;
  background: #fff;
  color: #5e5f66;
  font-size: 16px;
  letter-spacing: -0.32px;
  display: flex;
  align-items: center;
  z-index: 3;
  transition: all 0.3s;
  animation: fadeInLeft 1s 0.5s forwards ease;
  opacity: 0;
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .back_button::before,
#mabinogim .info .detail_wrap .inner .detail_layout .back_button::before,
#mabinogim .container .detail_wrap .inner .detail_layout .back_button::before {
  display: block;
  content: "";
  min-width: 16px;
  width: 16px;
  height: 17px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='none'%3E%3Cpath fill='%235E5F66' d='M13.953 9.833a4.668 4.668 0 0 1-4.62 4H3.667V12.5h5.666a3.333 3.333 0 1 0 0-6.667H4.61L6.276 7.5l-.943.943-3.276-3.276L5.333 1.89l.943.942L4.609 4.5h4.724A4.667 4.667 0 0 1 14 9.167v.666h-.047Z'/%3E%3C/svg%3E");
  margin-right: 8px;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .back_button:hover,
  #mabinogim .info .detail_wrap .inner .detail_layout .back_button:hover,
  #mabinogim .container .detail_wrap .inner .detail_layout .back_button:hover {
    padding: 10px 30px 10px 20px;
  }
}
#mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile,
#mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile,
#mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile {
  display: none;
}

@media screen and (max-width: 1920px), screen and (max-height: 1080px) {
  #mabinogim {
    overflow: hidden;
  }
  #mabinogim .game_info_class,
  #mabinogim .info,
  #mabinogim .container {
    position: relative;
    background: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/bg.png);
    background-size: cover;
    background-position: center top;
  }
  #mabinogim .game_info_class .intro_wrap .inner,
  #mabinogim .info .intro_wrap .inner,
  #mabinogim .container .intro_wrap .inner {
    height: calc(var(--vh, 1vh) * 100 - var(--pc-top-height) - 104px);
    min-height: 672px;
  }
  #mabinogim .game_info_class .intro_wrap .inner h1,
  #mabinogim .info .intro_wrap .inner h1,
  #mabinogim .container .intro_wrap .inner h1 {
    color: #fff;
    font-size: 40px;
    letter-spacing: -0.8px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }
  #mabinogim .game_info_class .intro_wrap .inner h1::before,
  #mabinogim .info .intro_wrap .inner h1::before,
  #mabinogim .container .intro_wrap .inner h1::before {
    display: block;
    content: "";
    min-width: 63px;
    width: 63px;
    height: 16px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='63' height='16' fill='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M3.54 4.875.5 8l3.04 3.125L6.577 8 3.54 4.875ZM15.087.5 9.514 6.232l-.013-.013-1.72 1.768.013.013-.013.013 1.72 1.768.013-.014 5.574 5.733 5.576-5.732 2.59 2.664 1.72-1.767L22.383 8l2.59-2.665-1.718-1.767-2.592 2.664L15.088.5Zm0 3.535L18.944 8l-3.855 3.964L11.232 8l3.855-3.964ZM55.415 9.25c.5 1.457 1.851 2.5 3.439 2.5 2.014 0 3.647-1.679 3.647-3.75 0-2.071-1.633-3.75-3.647-3.75-1.588 0-2.939 1.044-3.44 2.5H30.284l-1.823-1.875L25.42 8l3.04 3.125 1.823-1.875h25.13Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    margin-right: 10px;
  }
  #mabinogim .game_info_class .intro_wrap .inner h1::after,
  #mabinogim .info .intro_wrap .inner h1::after,
  #mabinogim .container .intro_wrap .inner h1::after {
    display: block;
    content: "";
    width: 63px;
    min-width: 63px;
    height: 16px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='63' height='16' fill='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M3.54 4.875.5 8l3.04 3.125L6.577 8 3.54 4.875ZM15.087.5 9.514 6.232l-.013-.013-1.72 1.768.013.013-.013.013 1.72 1.768.013-.014 5.574 5.733 5.576-5.732 2.59 2.664 1.72-1.767L22.383 8l2.59-2.665-1.718-1.767-2.592 2.664L15.088.5Zm0 3.535L18.944 8l-3.855 3.964L11.232 8l3.855-3.964ZM55.415 9.25c.5 1.457 1.851 2.5 3.439 2.5 2.014 0 3.647-1.679 3.647-3.75 0-2.071-1.633-3.75-3.647-3.75-1.588 0-2.939 1.044-3.44 2.5H30.284l-1.823-1.875L25.42 8l3.04 3.125 1.823-1.875h25.13Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    transform: rotate(180deg);
    margin-left: 10px;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list,
  #mabinogim .info .intro_wrap .inner .class_list,
  #mabinogim .container .intro_wrap .inner .class_list {
    margin-top: 34px;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li,
  #mabinogim .info .intro_wrap .inner .class_list ul li,
  #mabinogim .container .intro_wrap .inner .class_list ul li {
    position: relative;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li .list_inner,
  #mabinogim .info .intro_wrap .inner .class_list ul li .list_inner,
  #mabinogim .container .intro_wrap .inner .class_list ul li .list_inner {
    width: 225px;
    height: 510px;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li .list_inner .class_card,
  #mabinogim .info .intro_wrap .inner .class_list ul li .list_inner .class_card,
  #mabinogim .container .intro_wrap .inner .class_list ul li .list_inner .class_card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li .list_inner .class_card .card_title,
  #mabinogim .info .intro_wrap .inner .class_list ul li .list_inner .class_card .card_title,
  #mabinogim .container .intro_wrap .inner .class_list ul li .list_inner .class_card .card_title {
    position: relative;
    padding-top: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li .list_inner .class_card .card_title h2,
  #mabinogim .info .intro_wrap .inner .class_list ul li .list_inner .class_card .card_title h2,
  #mabinogim .container .intro_wrap .inner .class_list ul li .list_inner .class_card .card_title h2 {
    color: #fff;
    font-size: 35px;
    letter-spacing: -0.7px;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li .list_inner .class_card .class_line,
  #mabinogim .info .intro_wrap .inner .class_list ul li .list_inner .class_card .class_line,
  #mabinogim .container .intro_wrap .inner .class_list ul li .list_inner .class_card .class_line {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}
@media screen and (max-width: 1920px) and (hover: hover) and (min-width: 1281px), screen and (max-height: 1080px) and (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li:hover .list_inner .class_card,
  #mabinogim .info .intro_wrap .inner .class_list ul li:hover .list_inner .class_card,
  #mabinogim .container .intro_wrap .inner .class_list ul li:hover .list_inner .class_card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title,
  #mabinogim .info .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title,
  #mabinogim .container .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title {
    position: relative;
    padding-top: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title h2,
  #mabinogim .info .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title h2,
  #mabinogim .container .intro_wrap .inner .class_list ul li:hover .list_inner .class_card .card_title h2 {
    color: #fff;
    font-size: 35px;
    letter-spacing: -0.7px;
  }
}
@media screen and (max-width: 1920px), screen and (max-height: 1080px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=warrior] .list_inner .class_card .class_line .class_line_1,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=warrior] .list_inner .class_card .class_line .class_line_1,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=warrior] .list_inner .class_card .class_line .class_line_1 {
    position: absolute;
    left: -286px;
    top: 126px;
    background-size: 80% auto;
    transition: all 0.4s;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=warrior] .list_inner .class_card .class_line .class_line_2,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=warrior] .list_inner .class_card .class_line .class_line_2,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=warrior] .list_inner .class_card .class_line .class_line_2 {
    position: absolute;
    left: -342px;
    top: 250px;
    background-size: 80% auto;
    opacity: 0;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=warrior] .list_inner .class_card .class_line .class_line_3,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=warrior] .list_inner .class_card .class_line .class_line_3,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=warrior] .list_inner .class_card .class_line .class_line_3 {
    position: absolute;
    left: -388px;
    top: 152px;
    background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/warrior_line_4_5F017124236C03D6.png);
    background-size: 80% auto;
    opacity: 0;
    transform: scaleX(-1);
  }
}
@media screen and (max-width: 1920px) and (hover: hover) and (min-width: 1281px), screen and (max-height: 1080px) and (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=warrior]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=warrior]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=warrior]:hover .list_inner .class_card .class_line .class_line_1 {
    left: -162px;
    top: 118px;
    background-size: 65%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=warrior]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=warrior]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=warrior]:hover .list_inner .class_card .class_line .class_line_2 {
    left: -172px;
    top: 112px;
    opacity: 1;
    background-size: 65%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=warrior]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=warrior]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=warrior]:hover .list_inner .class_card .class_line .class_line_3 {
    left: -648px;
    top: 192px;
    opacity: 1;
    background-size: 58%;
  }
}
@media screen and (max-width: 1920px), screen and (max-height: 1080px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=archer] .list_inner .class_card .class_line .class_line_1,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=archer] .list_inner .class_card .class_line .class_line_1,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=archer] .list_inner .class_card .class_line .class_line_1 {
    position: absolute;
    left: -108px;
    top: 90px;
    background-size: 80%;
    transition: all 0.4s;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=archer] .list_inner .class_card .class_line .class_line_2,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=archer] .list_inner .class_card .class_line .class_line_2,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=archer] .list_inner .class_card .class_line .class_line_2 {
    position: absolute;
    left: -424px;
    top: 70px;
    background-size: 80%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=archer] .list_inner .class_card .class_line .class_line_3,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=archer] .list_inner .class_card .class_line .class_line_3,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=archer] .list_inner .class_card .class_line .class_line_3 {
    position: absolute;
    left: -284px;
    top: 260px;
    background-size: 80%;
  }
}
@media screen and (max-width: 1920px) and (hover: hover) and (min-width: 1281px), screen and (max-height: 1080px) and (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=archer]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=archer]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=archer]:hover .list_inner .class_card .class_line .class_line_1 {
    left: -8px;
    top: 80px;
    background-size: 64%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=archer]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=archer]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=archer]:hover .list_inner .class_card .class_line .class_line_2 {
    left: -174px;
    top: 40px;
    background-size: 64%;
    opacity: 1;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=archer]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=archer]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=archer]:hover .list_inner .class_card .class_line .class_line_3 {
    left: -234px;
    top: 248px;
    background-size: 60%;
    opacity: 1;
  }
}
@media screen and (max-width: 1920px), screen and (max-height: 1080px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=mage] .list_inner .class_card .class_line .class_line_1,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=mage] .list_inner .class_card .class_line .class_line_1,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=mage] .list_inner .class_card .class_line .class_line_1 {
    position: absolute;
    left: -55px;
    top: 158px;
    background-size: 80%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=mage] .list_inner .class_card .class_line .class_line_2,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=mage] .list_inner .class_card .class_line .class_line_2,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=mage] .list_inner .class_card .class_line .class_line_2 {
    position: absolute;
    left: 22px;
    top: 360px;
    background-size: 80%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=mage] .list_inner .class_card .class_line .class_line_3,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=mage] .list_inner .class_card .class_line .class_line_3,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=mage] .list_inner .class_card .class_line .class_line_3 {
    position: absolute;
    left: -346px;
    top: 242px;
    background-size: 80%;
    z-index: -1;
  }
}
@media screen and (max-width: 1920px) and (hover: hover) and (min-width: 1281px), screen and (max-height: 1080px) and (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=mage]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=mage]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=mage]:hover .list_inner .class_card .class_line .class_line_1 {
    left: -80px;
    top: 160px;
    background-size: 68%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=mage]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=mage]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=mage]:hover .list_inner .class_card .class_line .class_line_2 {
    left: -42px;
    top: 240px;
    background-size: 64%;
    opacity: 1;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=mage]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=mage]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=mage]:hover .list_inner .class_card .class_line .class_line_3 {
    left: 12px;
    top: 82px;
    opacity: 1;
    background-size: 62%;
  }
}
@media screen and (max-width: 1920px), screen and (max-height: 1080px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=healer] .list_inner .class_card .class_line .class_line_1,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=healer] .list_inner .class_card .class_line .class_line_1,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=healer] .list_inner .class_card .class_line .class_line_1 {
    position: absolute;
    left: -54px;
    top: 102px;
    background-size: 80%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=healer] .list_inner .class_card .class_line .class_line_2,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=healer] .list_inner .class_card .class_line .class_line_2,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=healer] .list_inner .class_card .class_line .class_line_2 {
    position: absolute;
    left: -562px;
    top: 300px;
    background-size: 80%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=healer] .list_inner .class_card .class_line .class_line_3,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=healer] .list_inner .class_card .class_line .class_line_3,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=healer] .list_inner .class_card .class_line .class_line_3 {
    position: absolute;
    left: 15px;
    top: 180px;
    background-size: 80%;
  }
}
@media screen and (max-width: 1920px) and (hover: hover) and (min-width: 1281px), screen and (max-height: 1080px) and (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=healer]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=healer]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=healer]:hover .list_inner .class_card .class_line .class_line_1 {
    left: 16px;
    top: 108px;
    background-size: 70%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=healer]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=healer]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=healer]:hover .list_inner .class_card .class_line .class_line_2 {
    left: -352px;
    top: 260px;
    background-size: 68%;
    opacity: 1;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=healer]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=healer]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=healer]:hover .list_inner .class_card .class_line .class_line_3 {
    left: -122px;
    top: 100px;
    background-size: 66%;
    opacity: 1;
  }
}
@media screen and (max-width: 1920px), screen and (max-height: 1080px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=bard] .list_inner .class_card .class_line .class_line_1,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=bard] .list_inner .class_card .class_line .class_line_1,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=bard] .list_inner .class_card .class_line .class_line_1 {
    position: absolute;
    left: -100px;
    top: 132px;
    background-size: 80%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=bard] .list_inner .class_card .class_line .class_line_2,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=bard] .list_inner .class_card .class_line .class_line_2,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=bard] .list_inner .class_card .class_line .class_line_2 {
    position: absolute;
    left: -315px;
    top: 180px;
    background-size: 80%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=bard] .list_inner .class_card .class_line .class_line_3,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=bard] .list_inner .class_card .class_line .class_line_3,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=bard] .list_inner .class_card .class_line .class_line_3 {
    position: absolute;
    left: 45px;
    top: 184px;
    background-size: 80%;
  }
}
@media screen and (max-width: 1920px) and (hover: hover) and (min-width: 1281px), screen and (max-height: 1080px) and (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=bard]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=bard]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=bard]:hover .list_inner .class_card .class_line .class_line_1 {
    left: -130px;
    top: 122px;
    background-size: 70%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=bard]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=bard]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=bard]:hover .list_inner .class_card .class_line .class_line_2 {
    left: -225px;
    top: 60px;
    opacity: 1;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=bard]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=bard]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=bard]:hover .list_inner .class_card .class_line .class_line_3 {
    left: -18px;
    top: 144px;
    opacity: 1;
    background-size: 70%;
  }
}
@media screen and (max-width: 1920px), screen and (max-height: 1080px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=thief] .list_inner .class_card .class_line .class_line_1,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=thief] .list_inner .class_card .class_line .class_line_1,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=thief] .list_inner .class_card .class_line .class_line_1 {
    position: absolute;
    left: -138px;
    top: 160px;
    background-size: 54%;
    z-index: 2;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=thief] .list_inner .class_card .class_line .class_line_2,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=thief] .list_inner .class_card .class_line .class_line_2,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=thief] .list_inner .class_card .class_line .class_line_2 {
    position: absolute;
    left: -315px;
    top: 250px;
    z-index: 3;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=thief] .list_inner .class_card .class_line .class_line_3,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=thief] .list_inner .class_card .class_line .class_line_3,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=thief] .list_inner .class_card .class_line .class_line_3 {
    position: absolute;
    left: -45px;
    top: 144px;
    z-index: 1;
  }
}
@media screen and (max-width: 1920px) and (hover: hover) and (min-width: 1281px), screen and (max-height: 1080px) and (hover: hover) and (min-width: 1281px) {
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=thief]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=thief]:hover .list_inner .class_card .class_line .class_line_1,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=thief]:hover .list_inner .class_card .class_line .class_line_1 {
    left: -170px;
    top: 142px;
    background-size: 46%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=thief]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=thief]:hover .list_inner .class_card .class_line .class_line_2,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=thief]:hover .list_inner .class_card .class_line .class_line_2 {
    left: -175px;
    top: 234px;
    opacity: 1;
    background-size: 54%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=thief]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=thief]:hover .list_inner .class_card .class_line .class_line_3,
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=thief]:hover .list_inner .class_card .class_line .class_line_3 {
    left: -80px;
    top: 174px;
    opacity: 1;
    background-size: 50%;
  }
}
@media screen and (max-width: 1920px), screen and (max-height: 1080px) {
  #mabinogim .game_info_class .detail_wrap .inner .class_list_area,
  #mabinogim .info .detail_wrap .inner .class_list_area,
  #mabinogim .container .detail_wrap .inner .class_list_area {
    margin: auto 71px auto 0;
    width: 104px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .class_list_area .free_scroll,
  #mabinogim .info .detail_wrap .inner .class_list_area .free_scroll,
  #mabinogim .container .detail_wrap .inner .class_list_area .free_scroll {
    max-height: 335px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .name span,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .name span,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .name span {
    font-size: 50px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .description,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .description,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .description {
    margin-top: 25px;
    font-size: 14px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .tag,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .tag,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .tag {
    margin-top: 15px;
    display: flex;
    gap: 10px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .tag span,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .tag span,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .tag span {
    border-radius: 5px;
    border: 1px solid #fff;
    padding: 5px 10px;
    width: auto;
    white-space: nowrap;
    color: #fff;
    font-size: 14px;
    letter-spacing: -0.28px;
  }
}
@media (max-width: 1280px) {
  #mabinogim {
    overflow: hidden;
  }
  #mabinogim .game_info_class,
  #mabinogim .info,
  #mabinogim .container {
    position: relative;
    background: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/bg.png);
    background-size: cover;
    background-position: left top;
    height: calc(var(--vh, 1vh) * 100 - var(--mobile-top-height));
    min-height: 530px;
  }
  #mabinogim .game_info_class .intro_wrap,
  #mabinogim .info .intro_wrap,
  #mabinogim .container .intro_wrap {
    margin: auto 0;
    width: 100%;
    min-height: inherit;
  }
  #mabinogim .game_info_class .intro_wrap .inner,
  #mabinogim .info .intro_wrap .inner,
  #mabinogim .container .intro_wrap .inner {
    height: calc(var(--vh, 1vh) * 100 - var(--mobile-top-height) - 74px);
    min-height: 468px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #mabinogim .game_info_class .intro_wrap .inner h1,
  #mabinogim .info .intro_wrap .inner h1,
  #mabinogim .container .intro_wrap .inner h1 {
    display: none;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list,
  #mabinogim .info .intro_wrap .inner .class_list,
  #mabinogim .container .intro_wrap .inner .class_list {
    display: block;
    margin-top: 0;
    width: 100%;
    max-width: 454px;
    position: relative;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list .mobile_frame,
  #mabinogim .info .intro_wrap .inner .class_list .mobile_frame,
  #mabinogim .container .intro_wrap .inner .class_list .mobile_frame {
    display: block;
    max-width: 100%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul,
  #mabinogim .info .intro_wrap .inner .class_list ul,
  #mabinogim .container .intro_wrap .inner .class_list ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 454px;
    display: block;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li,
  #mabinogim .info .intro_wrap .inner .class_list ul li,
  #mabinogim .container .intro_wrap .inner .class_list ul li {
    position: absolute;
    width: 30%;
    height: 45.8%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li .list_inner,
  #mabinogim .info .intro_wrap .inner .class_list ul li .list_inner,
  #mabinogim .container .intro_wrap .inner .class_list ul li .list_inner {
    position: absolute;
    background: none;
    width: 100%;
    height: 100%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li .list_inner::before,
  #mabinogim .info .intro_wrap .inner .class_list ul li .list_inner::before,
  #mabinogim .container .intro_wrap .inner .class_list ul li .list_inner::before {
    display: none;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li .list_inner .deco_border,
  #mabinogim .info .intro_wrap .inner .class_list ul li .list_inner .deco_border,
  #mabinogim .container .intro_wrap .inner .class_list ul li .list_inner .deco_border {
    display: none;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li .list_inner .class_card,
  #mabinogim .info .intro_wrap .inner .class_list ul li .list_inner .class_card,
  #mabinogim .container .intro_wrap .inner .class_list ul li .list_inner .class_card {
    display: none;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=warrior],
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=warrior],
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=warrior] {
    top: 2%;
    left: 2.6%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=archer],
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=archer],
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=archer] {
    top: 2%;
    left: 34.8%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=mage],
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=mage],
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=mage] {
    top: 2%;
    left: 68.8%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=healer],
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=healer],
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=healer] {
    top: 52.4%;
    left: 2.6%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=bard],
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=bard],
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=bard] {
    top: 52.4%;
    left: 34.8%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li[data-line=thief],
  #mabinogim .info .intro_wrap .inner .class_list ul li[data-line=thief],
  #mabinogim .container .intro_wrap .inner .class_list ul li[data-line=thief] {
    top: 52.4%;
    left: 68.8%;
  }
  #mabinogim .game_info_class .intro_wrap .inner .class_list ul li.new::before,
  #mabinogim .info .intro_wrap .inner .class_list ul li.new::before,
  #mabinogim .container .intro_wrap .inner .class_list ul li.new::before {
    display: none;
  }
  #mabinogim .game_info_class .detail_wrap,
  #mabinogim .info .detail_wrap,
  #mabinogim .container .detail_wrap {
    display: flex;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100 - var(--mobile-top-height) - 70px);
    min-height: 470px;
  }
  #mabinogim .game_info_class .detail_wrap .inner,
  #mabinogim .info .detail_wrap .inner,
  #mabinogim .container .detail_wrap .inner {
    position: relative;
    padding: 0 20px;
    width: 100%;
  }
  #mabinogim .game_info_class .detail_wrap .inner .class_list_area,
  #mabinogim .info .detail_wrap .inner .class_list_area,
  #mabinogim .container .detail_wrap .inner .class_list_area {
    display: none;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout,
  #mabinogim .info .detail_wrap .inner .detail_layout,
  #mabinogim .container .detail_wrap .inner .detail_layout {
    display: flex;
    flex-direction: column;
    margin: auto 0 0 0;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info {
    opacity: 0;
    animation: fadeUp 1s 0.5s forwards ease;
    z-index: 2;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .line_flag span,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .line_flag span,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .line_flag span {
    color: #fff;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .name,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .name,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .name {
    display: flex;
    align-items: center;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .name span,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .name span,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .name span {
    color: #fff;
    font-size: min(40px, 12.4vw);
    letter-spacing: -1px;
    white-space: nowrap;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .name .gender,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .name .gender,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .name .gender {
    display: flex;
    margin-left: 20px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .name .gender .female_button,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .name .gender .female_button,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .name .gender .female_button {
    width: 44px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .name .gender .female_button::before,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .name .gender .female_button::before,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .name .gender .female_button::before {
    display: block;
    content: "";
    min-width: 9px;
    width: 9px;
    height: 21px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='21' fill='none'%3E%3Cpath fill='%23fff' d='m8.973 14.934-1.8-7.756A.895.895 0 0 0 6.3 6.5h-.426c-.852.39-1.86.406-2.748 0H2.7a.903.903 0 0 0-.873.678l-1.8 7.756A.896.896 0 0 0 .9 16.046H3v3.56c0 .493.403.894.9.894h1.2c.497 0 .9-.4.9-.895v-3.56h2.1a.896.896 0 0 0 .873-1.112ZM4.5.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z'/%3E%3C/svg%3E");
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .name .gender .male_button,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .name .gender .male_button,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .name .gender .male_button {
    width: 44px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .name .gender .male_button::before,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .name .gender .male_button::before,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .name .gender .male_button::before {
    display: block;
    content: "";
    min-width: 9px;
    width: 9px;
    height: 23px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='23' fill='none'%3E%3Cg fill='%23fff' clip-path='url(%23a)'%3E%3Cpath d='M4.5 5.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'/%3E%3Cpath fill-rule='evenodd' d='M6.285 6.5c.67 0 1.815.64 2.356 1.17.23.225.359.53.359.848v7.027c0 .678-.55 1.228-1.227 1.228H6.545v4.5c0 .678-.549 1.227-1.227 1.227H3.682c-.678 0-1.227-.55-1.227-1.227v-4.5H1.227C.55 16.773 0 16.223 0 15.546V8.518c0-.318.13-.623.36-.848C.9 7.14 2.044 6.5 2.714 6.5c.54.262 1.145.41 1.785.41.64 0 1.246-.148 1.785-.41Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h9v22H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .description,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .description,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .description {
    margin-top: 20px;
    color: #fff;
    font-size: min(14px, 3vw);
    line-height: 140%; /* 21px */
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .tag,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .tag,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .tag {
    margin-top: 15px;
    display: flex;
    gap: 10px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .tag span,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .tag span,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .tag span {
    border-radius: 5px;
    border: 1px solid #fff;
    padding: 5px 10px;
    width: auto;
    white-space: nowrap;
    color: #fff;
    font-size: 12px;
    letter-spacing: -0.28px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .button_area,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .button_area,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .button_area {
    margin-top: 20px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .button_area ul li:first-child,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .button_area ul li:first-child,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .button_area ul li:first-child {
    margin-right: 6px;
    display: block;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .button_area ul li:first-child button,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .button_area ul li:first-child button,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .button_area ul li:first-child button {
    background: #2baf7e;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_info .skill_component,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_info .skill_component,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_info .skill_component {
    display: none;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_line,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_line {
    align-self: auto;
    margin-top: 35px;
    margin-bottom: 24px;
    margin-left: 0;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list {
    display: flex;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item {
    width: min-content;
    max-width: min-content;
    min-width: min-content;
    overflow: hidden;
    background: #263844;
    cursor: pointer;
    margin-right: 5px;
    border-right: none;
    border-radius: 16px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item.on,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item.on,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item.on {
    background: #2baf7e;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item.line_1,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item.line_1,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item.line_1 {
    border-radius: 16px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item.line_2,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item.line_2,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item.line_2 {
    border-radius: 16px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item:last-child,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item:last-child,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item:last-child {
    margin-right: 0;
    border-radius: 16px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title {
    padding-top: 0;
    padding: 0px;
    width: auto;
    height: auto;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .name,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .name,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .name {
    padding: 10px 20px 10px 18px;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    height: 53px;
    display: flex;
    margin: 0;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .name::before,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .name::before,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .name::before {
    content: "";
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    opacity: 1;
    margin-right: 6px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .name.new_class::after,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .name.new_class::after,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .title .name.new_class::after {
    margin-left: 5px;
    position: relative;
    top: auto;
    content: "";
    display: block;
    width: 18px;
    height: 19px;
    background: none;
    background-image: url(https://lwi.nexon.com/m_mabinogim/brand/info/class/i_new_B9D88CAA486F971C.png);
    background-size: contain;
    backdrop-filter: none;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .thumbnail,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .thumbnail,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .thumbnail {
    display: none;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .tag,
  #mabinogim .info .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .tag,
  #mabinogim .container .detail_wrap .inner .detail_layout .detail_line .line_list .line_item .tag {
    display: none;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .background,
  #mabinogim .info .detail_wrap .inner .detail_layout .background,
  #mabinogim .container .detail_wrap .inner .detail_layout .background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1;
    overflow: hidden;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .background .video_area,
  #mabinogim .info .detail_wrap .inner .detail_layout .background .video_area,
  #mabinogim .container .detail_wrap .inner .detail_layout .background .video_area {
    width: 100%;
    height: 100%;
    animation: fadeIn 1s forwards ease;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .background .video_area::before,
  #mabinogim .info .detail_wrap .inner .detail_layout .background .video_area::before,
  #mabinogim .container .detail_wrap .inner .detail_layout .background .video_area::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(38, 38, 38, 0.85) 0.18%, rgba(38, 38, 38, 0.74) 48.4%, rgba(38, 38, 38, 0) 70.65%);
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .background .video_area video,
  #mabinogim .info .detail_wrap .inner .detail_layout .background .video_area video,
  #mabinogim .container .detail_wrap .inner .detail_layout .background .video_area video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .background .video_area video[data-type=pc],
  #mabinogim .info .detail_wrap .inner .detail_layout .background .video_area video[data-type=pc],
  #mabinogim .container .detail_wrap .inner .detail_layout .background .video_area video[data-type=pc] {
    display: none;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .background .video_area video[data-type=mobile],
  #mabinogim .info .detail_wrap .inner .detail_layout .background .video_area video[data-type=mobile],
  #mabinogim .container .detail_wrap .inner .detail_layout .background .video_area video[data-type=mobile] {
    display: block;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: rgba(0, 0, 0, 0.8);
    padding: 60px 10px 10px 10px;
    overflow-y: auto;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area {
    position: relative;
    margin-top: inherit;
    width: 100%;
    margin: auto 0;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_mobile_top,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_mobile_top,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_mobile_top {
    padding: 10px 15px;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 16px 16px 0 0;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_mobile_top .logo,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_mobile_top .logo,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_mobile_top .logo {
    display: block;
    width: 84px;
    height: 22px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='22' fill='none'%3E%3Cpath fill='%23000' d='m69.665 9.897-4.955-.018-.009-2.922h4.179V5.62h-8.181V.844h-1.427v5.223c0 .492.409.89.916.89h3.086l.01 2.922-4.858.018v1.252h11.24V9.897ZM28.385 11.176h5.21V.884H27.47v9.402c0 .492.41.89.916.89ZM29 2.136h3.058v7.788H29V2.137ZM39.169 4.33h-1.952V.514h-1.534v11.06h1.534V5.587h.004v.226h1.985V4.335h-.037V4.33ZM47.916 4.335h-3.248V.83h-1.534v9.465c0 .492.409.89.915.89h5.397V.83h-1.534v3.5l.005.005Zm0 5.602h-3.248V5.813h3.248v4.124ZM53.63.5h-1.535v11.074h1.534V.5ZM84 .545h-1.436v11.31H84V.545ZM77.92 2.91c0 2.908-.26 5.436-3.467 6.95l-.656.308.623 1.311.656-.307c3.964-1.872 4.3-5.246 4.3-8.262l.008-2.07h-5.893V2.2h4.434v.71h-.005ZM49.144 20.324h4.48v-1.809H48.08v.674h4.68v.475h-4.68v1.284c0 .303.251.552.567.552h5.062v-.687h-4.56v-.48l-.004-.009ZM53.624 14.925h-.864v3.21h.864v-3.21ZM49.334 18.009c.312 0 .604-.063.87-.194.269-.132.478-.312.636-.548.158-.235.233-.502.233-.795 0-.294-.08-.575-.233-.81a1.588 1.588 0 0 0-.637-.552 1.957 1.957 0 0 0-.869-.198c-.311 0-.609.067-.874.198a1.561 1.561 0 0 0-.627.552 1.454 1.454 0 0 0-.233.81c0 .302.08.565.233.795.158.236.367.416.627.543.26.131.553.195.87.195l.004.004Zm-.65-2.184a.9.9 0 0 1 .65-.258c.256 0 .474.086.656.258.176.172.27.389.27.651a.843.843 0 0 1-.27.629.915.915 0 0 1-.651.257.908.908 0 0 1-.65-.257.844.844 0 0 1-.266-.633c0-.254.088-.475.265-.652l-.005.005ZM44.598 17.48H43.51v-2.41h-.85v6.416h.85v-3.278h.005v.136h1.101v-.86h-.018v-.004ZM40.35 17.47h-2.004v-2.22H37.5v5.431c0 .303.251.552.567.552H41.2v-5.978h-.846v2.22l-.005-.004Zm0 3.04h-2.004v-2.18h2.003v2.18ZM30.77 18.904h2.435v-.009h.005v-3.581h-5.624v.009h-.005v3.034c0 .303.251.552.567.552h1.766v1.714l-2.733.009v.732h6.4v-.732l-2.798-.01V18.91l-.013-.005Zm-2.33-.737v-2.125h3.91v2.125h-3.91ZM6.45 7.382h-.009a.517.517 0 0 1-.372-.158.501.501 0 0 1 .014-.728l2.733-2.568a.543.543 0 0 1 .377-.145c.14 0 .274.059.372.158a.505.505 0 0 1-.014.728L6.818 7.238a.52.52 0 0 1-.367.144ZM17.494 10.222h-.009a.525.525 0 0 1-.372-.158l-2.64-2.659a.5.5 0 0 1 .014-.728.482.482 0 0 1 .377-.145c.14 0 .274.06.371.159l2.64 2.658a.5.5 0 0 1-.013.729.52.52 0 0 1-.367.144Z'/%3E%3Cpath fill='%23000' d='M13.827 10.376c-.67 0-1.315-.258-1.79-.733a2.372 2.372 0 0 1 .06-3.419l1.935-1.794c.255-.24.423-.534.464-.832.06-.435-.079-.86-.385-1.167a1.475 1.475 0 0 0-1.52-.335l-.07.027c-.135.06-.414.172-.665-.149-.107-.208-.12-.37-.065-.506.06-.145.195-.254.414-.335.944-.335 1.985-.104 2.668.583.256.258.446.566.567.91.307.881.06 1.867-.627 2.509L12.879 6.93c-.256.24-.423.534-.465.832-.065.434.08.86.386 1.167.39.389.985.52 1.52.335l.07-.028c.134-.054.413-.171.664.15.107.208.121.37.065.506-.06.145-.195.253-.413.335a2.58 2.58 0 0 1-.879.149Z'/%3E%3Cpath fill='%23000' d='M11.977 4.796h-.01a.525.525 0 0 1-.371-.158L9.332 2.304a1.407 1.407 0 0 0-.99-.43 1.43 1.43 0 0 0-1.004.394c-.4.384-.525.977-.32 1.506a.45.45 0 0 0 .032.068c.06.113.177.325-.107.56-.209.177-.395.177-.511.145-.181-.045-.34-.203-.423-.425a2.459 2.459 0 0 1 0-1.7c.181-.484.493-.873.92-1.167.953-.651 2.283-.515 3.161.321l.084.077 2.189 2.257c.2.208.195.533-.014.732a.524.524 0 0 1-.367.15l-.005.004ZM11.842 18.24h-.009a.525.525 0 0 1-.52-.525c0-.136.06-.267.162-.362l2.733-2.568a.475.475 0 0 1 .377-.145c.144 0 .274.059.372.159a.501.501 0 0 1-.014.728l-2.733 2.568a.52.52 0 0 1-.368.145Z'/%3E%3Cpath fill='%23000' d='M18.443 15.857a2.518 2.518 0 0 1-1.79-.737l-1.845-1.882a1.51 1.51 0 0 0-.855-.452 1.442 1.442 0 0 0-1.2.376c-.4.38-.534.958-.344 1.478l.028.068c.056.131.177.402-.153.651-.214.104-.381.118-.52.063-.15-.058-.26-.19-.345-.402a2.392 2.392 0 0 1 .6-2.596 2.534 2.534 0 0 1 3.514.059l1.845 1.881c.247.249.549.412.856.452.441.06.883-.076 1.199-.375.4-.38.534-.958.344-1.474l-.028-.068c-.056-.13-.177-.402.153-.65.214-.105.377-.119.52-.064.15.058.261.19.345.402.344.918.107 1.931-.6 2.596a2.516 2.516 0 0 1-1.724.678v-.004Z'/%3E%3Cpath fill='%23000' d='M17.536 12.868a.57.57 0 0 1-.385-.154.497.497 0 0 1 .01-.728l2.397-2.202c.28-.254.433-.597.442-.964a1.344 1.344 0 0 0-.404-.976c-.396-.39-1.005-.511-1.553-.312-.14.05-.474.171-.697-.127-.126-.172-.168-.33-.121-.475.051-.163.204-.285.46-.375a2.633 2.633 0 0 1 1.748 0c.497.176.897.48 1.199.895.67.927.53 2.22-.33 3.075l-.07.072-2.324 2.135a.548.548 0 0 1-.372.145v-.01ZM6.223 15.517h-.01a.517.517 0 0 1-.371-.158L3.202 12.7a.501.501 0 0 1 .013-.728.52.52 0 0 1 .368-.144h.009c.14 0 .274.058.372.158l2.64 2.659a.501.501 0 0 1-.014.728.52.52 0 0 1-.367.144Z'/%3E%3Cpath fill='%23000' d='M8.045 21.07c-.67 0-1.316-.257-1.79-.732a2.372 2.372 0 0 1 .06-3.419l1.934-1.795c.256-.24.423-.534.465-.832a1.355 1.355 0 0 0-.386-1.167 1.475 1.475 0 0 0-1.52-.334l-.07.027c-.134.059-.413.172-.664-.15-.107-.207-.12-.37-.065-.506.06-.145.195-.253.414-.335.943-.334 1.984-.104 2.668.584a2.372 2.372 0 0 1-.06 3.419l-1.934 1.795c-.256.24-.423.533-.465.832-.06.434.079.859.386 1.166.39.39.985.52 1.52.335l.07-.027c.134-.054.413-.167.664.15.107.207.12.37.065.506-.06.144-.195.253-.414.334-.288.104-.585.15-.878.15Z'/%3E%3Cpath fill='%23000' d='M12.74 21.147a2.626 2.626 0 0 1-1.809-.732l-.097-.095-2.17-2.243a.514.514 0 0 1 .013-.733.525.525 0 0 1 .367-.149h.01c.139 0 .274.059.371.158l2.264 2.334c.26.271.614.42.99.43a1.37 1.37 0 0 0 1.004-.394c.4-.384.525-.977.32-1.51-.05-.136-.176-.462.13-.679.178-.122.34-.163.489-.117.167.05.297.199.386.447a2.433 2.433 0 0 1-.92 2.867 2.398 2.398 0 0 1-1.353.412l.005.004ZM7.315 10.277a2.518 2.518 0 0 1-1.79-.738L3.68 7.66a1.509 1.509 0 0 0-.855-.453 1.462 1.462 0 0 0-1.2.375c-.399.38-.534.96-.343 1.48l.028.067c.055.131.176.402-.154.651-.213.104-.38.118-.52.063-.149-.058-.26-.19-.344-.402a2.392 2.392 0 0 1 .6-2.596 2.533 2.533 0 0 1 3.514.059L6.25 8.784c.246.249.548.412.855.452.442.064.883-.076 1.2-.375.399-.38.534-.959.343-1.479l-.028-.067c-.056-.132-.176-.403.154-.652.213-.104.38-.117.52-.063.149.059.265.19.344.403.344.918.107 1.93-.6 2.595a2.516 2.516 0 0 1-1.724.678Z'/%3E%3Cpath fill='%23000' d='M2.495 15.508c-.297 0-.595-.05-.874-.149a2.455 2.455 0 0 1-1.2-.895c-.668-.927-.529-2.22.33-3.075l.08-.082h.005L3.15 9.182a.55.55 0 0 1 .753.014.498.498 0 0 1-.01.728l-2.397 2.202a1.354 1.354 0 0 0-.442.963c-.005.366.14.715.404.977.396.389 1.004.51 1.553.312.14-.05.474-.172.697.127.126.171.167.33.121.474-.051.163-.205.29-.46.376-.284.1-.577.149-.874.149v.004Z'/%3E%3C/svg%3E");
    background-size: 100% auto;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_mobile_top .logo img,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_mobile_top .logo img,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_mobile_top .logo img {
    display: none;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_mobile_top .close_button,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_mobile_top .close_button,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_mobile_top .close_button {
    display: block;
    min-width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Cpath fill='%23838383' fill-rule='evenodd' d='M17.497 15.07a1.717 1.717 0 0 1-2.428 2.427L9 11.428l-6.069 6.07a1.717 1.717 0 0 1-2.428-2.429L6.573 9 .502 2.93A1.717 1.717 0 0 1 2.93.504L9 6.573 15.07.502a1.717 1.717 0 0 1 2.428 2.428L11.428 9l6.07 6.068Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-size: cover;
    opacity: 1;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content {
    padding: 14px;
    background: #f6f4f4;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list {
    display: flex;
    align-items: center;
    border-radius: 12px;
    background: rgba(23, 37, 47, 0.8);
    padding: 8px 18px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list span,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list span,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list span {
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list ul,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list ul,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list ul {
    width: 100%;
    margin-left: 10px;
    display: flex;
    align-items: center;
    overflow-x: auto;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list ul li,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list ul li,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list ul li {
    min-width: 30px;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.5;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list ul li:last-child,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list ul li:last-child,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list ul li:last-child {
    margin-right: 0;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list ul li img,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list ul li img,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list ul li img {
    width: 100%;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list ul li.on,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list ul li.on,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_select_list ul li.on {
    border: 3px solid #00b670;
    opacity: 1;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail {
    border-radius: 12px;
    background: rgba(23, 37, 47, 0.8);
    margin-top: 6px;
    padding: 18px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_title,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_title,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_title {
    display: flex;
    align-items: center;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_title .skill_icon,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_title .skill_icon,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_title .skill_icon {
    width: 24px;
    height: 24px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_title .skill_icon img,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_title .skill_icon img,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_title .skill_icon img {
    width: 100%;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_title span,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_title span,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_title span {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin-left: 10px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_tag,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_tag,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_tag {
    margin-top: 12px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_tag span,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_tag span,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_tag span {
    color: #a1b7c7;
    font-size: 15px;
    font-weight: 400;
    margin-right: 4px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_tag span:last-child,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_tag span:last-child,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_tag span:last-child {
    margin-right: 0;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_description,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_description,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_description {
    margin-top: 24px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_description span,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_description span,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_description span {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.3px;
    word-break: keep-all;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_description span .br_pc,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_description span .br_pc,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .skill_description span .br_pc {
    display: none;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .default_text,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .default_text,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .default_text {
    margin-top: 12px;
    display: inline-block;
    border-radius: 20px;
    background: #364149;
    padding: 6px 12px;
  }
  #mabinogim .game_info_class .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .default_text span,
  #mabinogim .info .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .default_text span,
  #mabinogim .container .detail_wrap .inner .detail_layout .skill_component_mobile .skill_area .skill_content .skill_detail .default_text span {
    color: #a1b7c7;
    font-size: 12px;
    letter-spacing: -0.28px;
  }
  #mabinogim .game_info_class .pagination,
  #mabinogim .info .pagination,
  #mabinogim .container .pagination {
    width: 100%;
    padding: 0 50px;
    border-top: 1px solid rgba(210, 210, 210, 0.3);
    background: linear-gradient(180deg, rgba(24, 26, 35, 0.28) 0%, rgba(24, 26, 35, 0.83) 100%);
    backdrop-filter: blur(10px);
    z-index: 2;
  }
  #mabinogim .game_info_class .pagination .swiper,
  #mabinogim .info .pagination .swiper,
  #mabinogim .container .pagination .swiper {
    position: relative;
    width: 100%;
    height: 70px;
    display: flex;
    align-items: flex-end;
  }
  #mabinogim .game_info_class .pagination .swiper ul,
  #mabinogim .info .pagination .swiper ul,
  #mabinogim .container .pagination .swiper ul {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: flex-start;
    gap: 0;
    background: none;
    backdrop-filter: none;
  }
  #mabinogim .game_info_class .pagination .swiper ul li,
  #mabinogim .info .pagination .swiper ul li,
  #mabinogim .container .pagination .swiper ul li {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  #mabinogim .game_info_class .pagination .swiper ul li a,
  #mabinogim .info .pagination .swiper ul li a,
  #mabinogim .container .pagination .swiper ul li a {
    color: #fff;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 14px;
  }
  #mabinogim .game_info_class .pagination .swiper ul li a::before,
  #mabinogim .info .pagination .swiper ul li a::before,
  #mabinogim .container .pagination .swiper ul li a::before {
    content: "";
    position: static;
    top: inherit;
    transform: none;
    display: block;
    width: 43px;
    min-width: 43px;
    height: 43px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='43' fill='none'%3E%3Cpath fill='%23fff' d='m21.063 3.063 5.906 9.976a6 6 0 0 0 2.04 2.067L39.5 21.5l-10.633 6.886a6.001 6.001 0 0 0-1.846 1.887l-5.959 9.665-7.086-9.984a5.999 5.999 0 0 0-1.425-1.423L2.626 21.5l9.788-6.525a6 6 0 0 0 1.63-1.613l7.02-10.3Z'/%3E%3Cmask id='a' width='34' height='34' x='4' y='5' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%23D9D9D9' d='M19.852 5.976a3 3 0 0 1 2.296 0l9.371 3.881a3 3 0 0 1 1.624 1.624l3.882 9.37a3.001 3.001 0 0 1 0 2.297l-3.882 9.371a3 3 0 0 1-1.624 1.624l-9.37 3.882a3.001 3.001 0 0 1-2.297 0l-9.371-3.882a3 3 0 0 1-1.624-1.624l-3.881-9.37a3 3 0 0 1 0-2.297l3.881-9.371a3 3 0 0 1 1.624-1.624l9.37-3.881Z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%23E8E8E8' d='M.729 21.529h20.743v18.857H.729z'/%3E%3Cpath fill='%23DAD9D9' d='M20.529 20.586h19.8v19.8h-19.8z'/%3E%3Cpath fill='%23fff' d='M.729 1.729h20.743v19.8H.729z'/%3E%3Cpath fill='%23EFEFEF' d='M20.529 2.671h19.8v19.8h-19.8z'/%3E%3C/g%3E%3Cpath fill='%236F6F6F' fill-rule='evenodd' d='M23.708 13.949 21 11.5l-2.708 2.449L21 16.398l2.708-2.449Zm3.792 9.306-4.968-4.492.011-.01-1.532-1.386-.011.01-.011-.01-1.532 1.386.011.01-4.968 4.492 4.968 4.493-2.31 2.087 1.533 1.386L21 29.133l2.31 2.088 1.531-1.386-2.31-2.088 4.969-4.492Zm-3.064 0L21 26.362l-3.436-3.107L21 20.148l3.436 3.107Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    margin-right: 10px;
  }
  #mabinogim .game_info_class .pagination .prev_button,
  #mabinogim .info .pagination .prev_button,
  #mabinogim .container .pagination .prev_button {
    display: block;
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    min-width: 12px;
    height: 20px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='2' d='m11 19-9-9 9-9'/%3E%3C/svg%3E");
    z-index: 2;
  }
  #mabinogim .game_info_class .pagination .next_button,
  #mabinogim .info .pagination .next_button,
  #mabinogim .container .pagination .next_button {
    display: block;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    min-width: 12px;
    height: 20px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='2' d='m1 1 9 9-9 9'/%3E%3C/svg%3E");
    z-index: 2;
  }
}
#mabinogim .info .pagination {
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 2;
}
#mabinogim .info .pagination .swiper {
  position: relative;
  width: 100%;
  height: 104px;
  display: flex;
  align-items: flex-end;
}
#mabinogim .info .pagination .swiper ul {
  width: 100%;
  height: 84px;
  border-top: 1px solid rgba(210, 210, 210, 0.3);
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, rgba(24, 26, 35, 0.28) 0%, rgba(24, 26, 35, 0.83) 100%);
  backdrop-filter: blur(10px);
}
#mabinogim .info .pagination .swiper ul li {
  width: auto;
  transition: 0.3s;
  margin-right: 120px;
}
#mabinogim .info .pagination .swiper ul li a {
  color: #fff;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 16px;
}
#mabinogim .info .pagination .swiper ul li a::before {
  content: "";
  font-style: normal;
  position: absolute;
  top: 0px;
  transform: translateY(-50%);
  display: block;
  width: 20px;
  min-width: 20px;
  height: 20px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath fill='%23fff' d='m9.94 6.382.516.872a6 6 0 0 0 2.04 2.067l.98.597-1.122.726a5.999 5.999 0 0 0-1.845 1.887l-.57.922-.88-1.241a6 6 0 0 0-1.425-1.423l-1.23-.871 1.092-.728a6 6 0 0 0 1.63-1.613l.814-1.195Z'/%3E%3Cmask id='a' width='10' height='10' x='5' y='5' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%23D9D9D9' d='M8.776 5.948a3 3 0 0 1 2.296 0l.94.39a3 3 0 0 1 1.623 1.623l.39.94a3 3 0 0 1 0 2.296l-.39.94a3 3 0 0 1-1.623 1.623l-.94.39a3 3 0 0 1-2.296 0l-.94-.39a3 3 0 0 1-1.624-1.624l-.389-.94a3 3 0 0 1 0-2.296l.39-.94a3 3 0 0 1 1.623-1.623l.94-.39Z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%23E8E8E8' d='M4.302 9.918h5.753v5.23H4.302z'/%3E%3Cpath fill='%23DAD9D9' d='M9.793 9.656h5.491v5.491H9.793z'/%3E%3Cpath fill='%23fff' d='M4.302 4.426h5.753v5.491H4.302z'/%3E%3Cpath fill='%23EFEFEF' d='M9.793 4.688h5.491v5.491H9.793z'/%3E%3C/g%3E%3C/svg%3E");
}
#mabinogim .info .pagination .swiper ul li.on {
  transform: translateY(-2px);
}
#mabinogim .info .pagination .swiper ul li.on a::before {
  top: 2px;
  width: 43px;
  min-width: 43px;
  height: 43px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='43' fill='none'%3E%3Cpath fill='%23fff' d='m21.063 3.063 5.906 9.976a6 6 0 0 0 2.04 2.067L39.5 21.5l-10.633 6.886a6.001 6.001 0 0 0-1.846 1.887l-5.959 9.665-7.086-9.984a5.999 5.999 0 0 0-1.425-1.423L2.626 21.5l9.788-6.525a6 6 0 0 0 1.63-1.613l7.02-10.3Z'/%3E%3Cmask id='a' width='34' height='34' x='4' y='5' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%23D9D9D9' d='M19.852 5.976a3 3 0 0 1 2.296 0l9.371 3.881a3 3 0 0 1 1.624 1.624l3.882 9.37a3.001 3.001 0 0 1 0 2.297l-3.882 9.371a3 3 0 0 1-1.624 1.624l-9.37 3.882a3.001 3.001 0 0 1-2.297 0l-9.371-3.882a3 3 0 0 1-1.624-1.624l-3.881-9.37a3 3 0 0 1 0-2.297l3.881-9.371a3 3 0 0 1 1.624-1.624l9.37-3.881Z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%23E8E8E8' d='M.729 21.529h20.743v18.857H.729z'/%3E%3Cpath fill='%23DAD9D9' d='M20.529 20.586h19.8v19.8h-19.8z'/%3E%3Cpath fill='%23fff' d='M.729 1.729h20.743v19.8H.729z'/%3E%3Cpath fill='%23EFEFEF' d='M20.529 2.671h19.8v19.8h-19.8z'/%3E%3C/g%3E%3Cpath fill='%236F6F6F' fill-rule='evenodd' d='M23.708 13.949 21 11.5l-2.708 2.449L21 16.398l2.708-2.449Zm3.792 9.306-4.968-4.492.011-.01-1.532-1.386-.011.01-.011-.01-1.532 1.386.011.01-4.968 4.492 4.968 4.493-2.31 2.087 1.533 1.386L21 29.133l2.31 2.088 1.531-1.386-2.31-2.088 4.969-4.492Zm-3.064 0L21 26.362l-3.436-3.107L21 20.148l3.436 3.107Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  animation: hoverAction 0.2s forwards linear;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .info .pagination .swiper ul li:hover {
    transform: translateY(-2px);
  }
  #mabinogim .info .pagination .swiper ul li:hover a::before {
    top: 2px;
    width: 43px;
    min-width: 43px;
    height: 43px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='43' fill='none'%3E%3Cpath fill='%23fff' d='m21.063 3.063 5.906 9.976a6 6 0 0 0 2.04 2.067L39.5 21.5l-10.633 6.886a6.001 6.001 0 0 0-1.846 1.887l-5.959 9.665-7.086-9.984a5.999 5.999 0 0 0-1.425-1.423L2.626 21.5l9.788-6.525a6 6 0 0 0 1.63-1.613l7.02-10.3Z'/%3E%3Cmask id='a' width='34' height='34' x='4' y='5' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%23D9D9D9' d='M19.852 5.976a3 3 0 0 1 2.296 0l9.371 3.881a3 3 0 0 1 1.624 1.624l3.882 9.37a3.001 3.001 0 0 1 0 2.297l-3.882 9.371a3 3 0 0 1-1.624 1.624l-9.37 3.882a3.001 3.001 0 0 1-2.297 0l-9.371-3.882a3 3 0 0 1-1.624-1.624l-3.881-9.37a3 3 0 0 1 0-2.297l3.881-9.371a3 3 0 0 1 1.624-1.624l9.37-3.881Z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%23E8E8E8' d='M.729 21.529h20.743v18.857H.729z'/%3E%3Cpath fill='%23DAD9D9' d='M20.529 20.586h19.8v19.8h-19.8z'/%3E%3Cpath fill='%23fff' d='M.729 1.729h20.743v19.8H.729z'/%3E%3Cpath fill='%23EFEFEF' d='M20.529 2.671h19.8v19.8h-19.8z'/%3E%3C/g%3E%3Cpath fill='%236F6F6F' fill-rule='evenodd' d='M23.708 13.949 21 11.5l-2.708 2.449L21 16.398l2.708-2.449Zm3.792 9.306-4.968-4.492.011-.01-1.532-1.386-.011.01-.011-.01-1.532 1.386.011.01-4.968 4.492 4.968 4.493-2.31 2.087 1.533 1.386L21 29.133l2.31 2.088 1.531-1.386-2.31-2.088 4.969-4.492Zm-3.064 0L21 26.362l-3.436-3.107L21 20.148l3.436 3.107Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    animation: hoverAction 0.2s forwards linear;
  }
}
#mabinogim .info .pagination .swiper ul li:last-child {
  margin-right: 0;
}
@keyframes hoverAction {
  0% {
    transform: scale(0) translateY(-50%);
    transform-origin: 50% 0;
  }
  100% {
    transform: scale(1) translateY(-50%);
    transform-origin: 50% 0;
  }
}
#mabinogim .info .pagination .prev_button,
#mabinogim .info .pagination .next_button {
  display: none;
}

@media (max-width: 1280px) {
  #mabinogim {
    overflow: hidden;
  }
  #mabinogim .info .pagination {
    width: 100%;
    padding: 0 50px;
    border-top: 1px solid rgba(210, 210, 210, 0.3);
    background: linear-gradient(180deg, rgba(24, 26, 35, 0.28) 0%, rgba(24, 26, 35, 0.83) 100%);
    backdrop-filter: blur(10px);
    z-index: 2;
  }
  #mabinogim .info .pagination .swiper {
    position: relative;
    width: 100%;
    height: 70px;
    display: flex;
    align-items: flex-end;
  }
  #mabinogim .info .pagination .swiper ul {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: flex-start;
    background: none;
    backdrop-filter: none;
  }
  #mabinogim .info .pagination .swiper ul li {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
  }
  #mabinogim .info .pagination .swiper ul li a {
    color: #fff;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 14px;
  }
  #mabinogim .info .pagination .swiper ul li a::before {
    content: "";
    position: static;
    top: inherit;
    transform: none;
    display: block;
    width: 43px;
    min-width: 43px;
    height: 43px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='43' fill='none'%3E%3Cpath fill='%23fff' d='m21.063 3.063 5.906 9.976a6 6 0 0 0 2.04 2.067L39.5 21.5l-10.633 6.886a6.001 6.001 0 0 0-1.846 1.887l-5.959 9.665-7.086-9.984a5.999 5.999 0 0 0-1.425-1.423L2.626 21.5l9.788-6.525a6 6 0 0 0 1.63-1.613l7.02-10.3Z'/%3E%3Cmask id='a' width='34' height='34' x='4' y='5' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%23D9D9D9' d='M19.852 5.976a3 3 0 0 1 2.296 0l9.371 3.881a3 3 0 0 1 1.624 1.624l3.882 9.37a3.001 3.001 0 0 1 0 2.297l-3.882 9.371a3 3 0 0 1-1.624 1.624l-9.37 3.882a3.001 3.001 0 0 1-2.297 0l-9.371-3.882a3 3 0 0 1-1.624-1.624l-3.881-9.37a3 3 0 0 1 0-2.297l3.881-9.371a3 3 0 0 1 1.624-1.624l9.37-3.881Z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%23E8E8E8' d='M.729 21.529h20.743v18.857H.729z'/%3E%3Cpath fill='%23DAD9D9' d='M20.529 20.586h19.8v19.8h-19.8z'/%3E%3Cpath fill='%23fff' d='M.729 1.729h20.743v19.8H.729z'/%3E%3Cpath fill='%23EFEFEF' d='M20.529 2.671h19.8v19.8h-19.8z'/%3E%3C/g%3E%3Cpath fill='%236F6F6F' fill-rule='evenodd' d='M23.708 13.949 21 11.5l-2.708 2.449L21 16.398l2.708-2.449Zm3.792 9.306-4.968-4.492.011-.01-1.532-1.386-.011.01-.011-.01-1.532 1.386.011.01-4.968 4.492 4.968 4.493-2.31 2.087 1.533 1.386L21 29.133l2.31 2.088 1.531-1.386-2.31-2.088 4.969-4.492Zm-3.064 0L21 26.362l-3.436-3.107L21 20.148l3.436 3.107Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    margin-right: 10px;
  }
  #mabinogim .info .pagination .swiper ul li.on {
    transform: none;
  }
  #mabinogim .info .pagination .swiper ul li.on a::before {
    top: 2px;
    width: 43px;
    min-width: 43px;
    height: 43px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='43' fill='none'%3E%3Cpath fill='%23fff' d='m21.063 3.063 5.906 9.976a6 6 0 0 0 2.04 2.067L39.5 21.5l-10.633 6.886a6.001 6.001 0 0 0-1.846 1.887l-5.959 9.665-7.086-9.984a5.999 5.999 0 0 0-1.425-1.423L2.626 21.5l9.788-6.525a6 6 0 0 0 1.63-1.613l7.02-10.3Z'/%3E%3Cmask id='a' width='34' height='34' x='4' y='5' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%23D9D9D9' d='M19.852 5.976a3 3 0 0 1 2.296 0l9.371 3.881a3 3 0 0 1 1.624 1.624l3.882 9.37a3.001 3.001 0 0 1 0 2.297l-3.882 9.371a3 3 0 0 1-1.624 1.624l-9.37 3.882a3.001 3.001 0 0 1-2.297 0l-9.371-3.882a3 3 0 0 1-1.624-1.624l-3.881-9.37a3 3 0 0 1 0-2.297l3.881-9.371a3 3 0 0 1 1.624-1.624l9.37-3.881Z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%23E8E8E8' d='M.729 21.529h20.743v18.857H.729z'/%3E%3Cpath fill='%23DAD9D9' d='M20.529 20.586h19.8v19.8h-19.8z'/%3E%3Cpath fill='%23fff' d='M.729 1.729h20.743v19.8H.729z'/%3E%3Cpath fill='%23EFEFEF' d='M20.529 2.671h19.8v19.8h-19.8z'/%3E%3C/g%3E%3Cpath fill='%236F6F6F' fill-rule='evenodd' d='M23.708 13.949 21 11.5l-2.708 2.449L21 16.398l2.708-2.449Zm3.792 9.306-4.968-4.492.011-.01-1.532-1.386-.011.01-.011-.01-1.532 1.386.011.01-4.968 4.492 4.968 4.493-2.31 2.087 1.533 1.386L21 29.133l2.31 2.088 1.531-1.386-2.31-2.088 4.969-4.492Zm-3.064 0L21 26.362l-3.436-3.107L21 20.148l3.436 3.107Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    animation: none;
  }
  #mabinogim .info .pagination .prev_button {
    display: block;
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    min-width: 12px;
    height: 100%;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='2' d='m11 19-9-9 9-9'/%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 2;
    padding: 0 26px;
  }
  #mabinogim .info .pagination .next_button {
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    min-width: 12px;
    height: 100%;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='2' d='m1 1 9 9-9 9'/%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 2;
    padding: 0 26px;
  }
}
@keyframes fadeIn {
  0% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes fadeInLeft {
  0% {
    transform: translateX(5%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.95);
    opacity: 0;
  }
}
@keyframes fadeUp {
  0% {
    transform: translateY(5%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}