@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 .guide,
#mabinogim .info,
#mabinogim .container {
  max-width: 1740px;
  margin: 0 auto;
  padding: 60px 60px 140px;
}
#mabinogim .guide .grid_list_wrap,
#mabinogim .info .grid_list_wrap,
#mabinogim .container .grid_list_wrap {
  margin: 0 auto;
}
#mabinogim .guide .grid_list_wrap .category_area,
#mabinogim .info .grid_list_wrap .category_area,
#mabinogim .container .grid_list_wrap .category_area {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
  padding: 10px;
  border-radius: 24px;
  margin-bottom: 30px;
}
#mabinogim .guide .grid_list_wrap .category_area ul,
#mabinogim .info .grid_list_wrap .category_area ul,
#mabinogim .container .grid_list_wrap .category_area ul {
  display: flex;
  gap: 2px;
}
#mabinogim .guide .grid_list_wrap .category_area ul li,
#mabinogim .info .grid_list_wrap .category_area ul li,
#mabinogim .container .grid_list_wrap .category_area ul li {
  flex: 1;
}
#mabinogim .guide .grid_list_wrap .category_area ul li a,
#mabinogim .info .grid_list_wrap .category_area ul li a,
#mabinogim .container .grid_list_wrap .category_area ul li a {
  display: block;
  width: 100%;
  padding: 15px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(16px, 1vw);
  border-radius: 12px;
  background: linear-gradient(#222632, #222632) no-repeat 0px -48px;
  white-space: nowrap;
}
#mabinogim .guide .grid_list_wrap .category_area ul li a.active, #mabinogim .guide .grid_list_wrap .category_area ul li a.on,
#mabinogim .info .grid_list_wrap .category_area ul li a.active,
#mabinogim .info .grid_list_wrap .category_area ul li a.on,
#mabinogim .container .grid_list_wrap .category_area ul li a.active,
#mabinogim .container .grid_list_wrap .category_area ul li a.on {
  background: #222632;
  color: #fff;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .guide .grid_list_wrap .category_area ul li a:hover,
  #mabinogim .info .grid_list_wrap .category_area ul li a:hover,
  #mabinogim .container .grid_list_wrap .category_area ul li a:hover {
    background: linear-gradient(#222632, #222632) no-repeat 0px 0px;
    color: #fff;
    transition: 0.3s;
  }
}
#mabinogim .guide .grid_list_wrap .filter_area,
#mabinogim .info .grid_list_wrap .filter_area,
#mabinogim .container .grid_list_wrap .filter_area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}
#mabinogim .guide .grid_list_wrap .filter_area .order_1,
#mabinogim .info .grid_list_wrap .filter_area .order_1,
#mabinogim .container .grid_list_wrap .filter_area .order_1 {
  position: relative;
  height: 52px;
  display: flex;
  align-items: flex-end;
  padding-left: 20px;
}
#mabinogim .guide .grid_list_wrap .filter_area .order_1 button,
#mabinogim .info .grid_list_wrap .filter_area .order_1 button,
#mabinogim .container .grid_list_wrap .filter_area .order_1 button {
  position: relative;
  margin-right: 18px;
  color: #525252;
  padding: 4px 10px;
  white-space: nowrap;
}
#mabinogim .guide .grid_list_wrap .filter_area .order_1 button.active, #mabinogim .guide .grid_list_wrap .filter_area .order_1 button.on,
#mabinogim .info .grid_list_wrap .filter_area .order_1 button.active,
#mabinogim .info .grid_list_wrap .filter_area .order_1 button.on,
#mabinogim .container .grid_list_wrap .filter_area .order_1 button.active,
#mabinogim .container .grid_list_wrap .filter_area .order_1 button.on {
  background: #5c5c5c;
  color: #fff;
  border-radius: 6px;
}
#mabinogim .guide .grid_list_wrap .filter_area .order_1 button.active::after, #mabinogim .guide .grid_list_wrap .filter_area .order_1 button.on::after,
#mabinogim .info .grid_list_wrap .filter_area .order_1 button.active::after,
#mabinogim .info .grid_list_wrap .filter_area .order_1 button.on::after,
#mabinogim .container .grid_list_wrap .filter_area .order_1 button.active::after,
#mabinogim .container .grid_list_wrap .filter_area .order_1 button.on::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -4px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 5px solid #5c5c5c;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .guide .grid_list_wrap .filter_area .order_1 button:hover,
  #mabinogim .info .grid_list_wrap .filter_area .order_1 button:hover,
  #mabinogim .container .grid_list_wrap .filter_area .order_1 button:hover {
    background: #5c5c5c;
    color: #fff;
    border-radius: 6px;
  }
  #mabinogim .guide .grid_list_wrap .filter_area .order_1 button:hover::after,
  #mabinogim .info .grid_list_wrap .filter_area .order_1 button:hover::after,
  #mabinogim .container .grid_list_wrap .filter_area .order_1 button:hover::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -4px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 5px solid #5c5c5c;
  }
}
#mabinogim .guide .grid_list_wrap .filter_area .order_2,
#mabinogim .info .grid_list_wrap .filter_area .order_2,
#mabinogim .container .grid_list_wrap .filter_area .order_2 {
  position: relative;
  height: 52px;
  display: flex;
  margin-left: auto;
}
#mabinogim .guide .grid_list_wrap .filter_area .order_2 .total_list,
#mabinogim .info .grid_list_wrap .filter_area .order_2 .total_list,
#mabinogim .container .grid_list_wrap .filter_area .order_2 .total_list {
  position: relative;
  margin-right: 10px;
  border-radius: 16px;
}
#mabinogim .guide .grid_list_wrap .filter_area .order_2 .total_list button,
#mabinogim .info .grid_list_wrap .filter_area .order_2 .total_list button,
#mabinogim .container .grid_list_wrap .filter_area .order_2 .total_list button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 52px;
  height: 52px;
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' fill='none' viewBox='0 0 52 52'%3E%3Crect width='52' height='52' fill='%23e3e1e1' rx='16'/%3E%3Cpath fill='%235c5c5c' d='M26 37q-4.606 0-7.803-3.197T15 26t3.197-7.803T26 15q2.372 0 4.538.98a10.5 10.5 0 0 1 3.712 2.801v-2.406q0-.584.396-.98a1.33 1.33 0 0 1 .979-.395q.585 0 .979.395.396.395.396.98v6.875q0 .585-.396.979-.395.396-.979.396H28.75q-.585 0-.979-.396a1.33 1.33 0 0 1-.396-.979q0-.584.396-.98a1.33 1.33 0 0 1 .979-.395h4.4a8.03 8.03 0 0 0-3.007-3.025A8.15 8.15 0 0 0 26 17.75q-3.438 0-5.844 2.406T17.75 26t2.406 5.844T26 34.25a8.1 8.1 0 0 0 4.384-1.255q2.01-1.254 3.007-3.351.17-.378.568-.635.394-.26.807-.259.79 0 1.186.55t.086 1.238q-1.307 2.92-4.022 4.691T26 37'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
#mabinogim .guide .grid_list_wrap .filter_area .order_2 .total_list button:hover,
#mabinogim .info .grid_list_wrap .filter_area .order_2 .total_list button:hover,
#mabinogim .container .grid_list_wrap .filter_area .order_2 .total_list button:hover {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' fill='none' viewBox='0 0 52 52'%3E%3Crect width='52' height='52' fill='%23d0cdcd' rx='16'/%3E%3Cpath fill='%235c5c5c' d='M26 37q-4.606 0-7.803-3.197T15 26t3.197-7.803T26 15q2.372 0 4.538.98a10.5 10.5 0 0 1 3.712 2.801v-2.406q0-.584.396-.98a1.33 1.33 0 0 1 .979-.395q.585 0 .979.395.396.395.396.98v6.875q0 .585-.396.979-.395.396-.979.396H28.75q-.585 0-.979-.396a1.33 1.33 0 0 1-.396-.979q0-.584.396-.98a1.33 1.33 0 0 1 .979-.395h4.4a8.03 8.03 0 0 0-3.007-3.025A8.15 8.15 0 0 0 26 17.75q-3.438 0-5.844 2.406T17.75 26t2.406 5.844T26 34.25a8.1 8.1 0 0 0 4.384-1.255q2.01-1.254 3.007-3.351.17-.378.568-.635.394-.26.807-.259.79 0 1.186.55t.086 1.238q-1.307 2.92-4.022 4.691T26 37'/%3E%3C/svg%3E");
}
#mabinogim .guide .grid_list_wrap .list_area > ul,
#mabinogim .info .grid_list_wrap .list_area > ul,
#mabinogim .container .grid_list_wrap .list_area > ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1%;
  row-gap: 20px;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item {
  width: 24.25%;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div {
  position: relative;
  padding: 10px 10px 30px;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .aspect_ratio_area,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .aspect_ratio_area,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .aspect_ratio_area {
  position: relative;
  width: 100%;
  height: 0px;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  padding-bottom: 56.26%;
}
@supports (aspect-ratio: 1.77) {
  #mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .aspect_ratio_area,
  #mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .aspect_ratio_area,
  #mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .aspect_ratio_area {
    aspect-ratio: 16/9;
    padding-bottom: 0px;
    height: auto;
  }
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .aspect_ratio_area .thumbnail,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .aspect_ratio_area .thumbnail,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .aspect_ratio_area .thumbnail {
  position: absolute;
  inset: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .aspect_ratio_area .thumbnail img,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .aspect_ratio_area .thumbnail img,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .aspect_ratio_area .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .aspect_ratio_area .thumbnail:hover img,
  #mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .aspect_ratio_area .thumbnail:hover img,
  #mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .aspect_ratio_area .thumbnail:hover img {
    transform: scale(1.1);
  }
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript {
  padding: 28px 10px 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .type,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .type,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .type {
  width: min-content;
  color: #626262;
  font-size: 14px;
  letter-spacing: -0.28px;
  padding: 5px 15px;
  border-radius: 20px;
  border: 1px solid #d9d9d9;
  background: #fff;
  white-space: nowrap;
  display: flex;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .type span,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .type span,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .type span {
  display: flex;
  align-items: center;
  width: min-content;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .type span:last-child::after,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .type span:last-child::after,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .type span:last-child::after {
  display: none;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .type span::after,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .type span::after,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .type span::after {
  display: block;
  content: "";
  width: 5px;
  height: 8px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' fill='none'%3E%3Cpath fill='%23D9D9D9' d='M3 3h1v2H3V3ZM2 2h1v1H2V2ZM1 1h1v1H1V1ZM0 0h1v1H0V0ZM2 5h1v1H2V5ZM1 6h1v1H1V6ZM0 7h1v1H0V7ZM0 6h1v1H0V6ZM1 5h1v1H1V5ZM2 3h1v2H2V3ZM1 2h1v1H1V2ZM0 1h1v1H0V1ZM1 7h1v1H1V7ZM2 6h1v1H2V6ZM3 5h1v1H3V5ZM4 3h1v2H4V3ZM3 2h1v1H3V2ZM2 1h1v1H2V1ZM1 0h1v1H1V0Z'/%3E%3C/svg%3E") no-repeat;
  margin: 0 6px;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .type + .title,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .type + .title,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .type + .title {
  margin-top: 10px;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .title,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .title,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .title {
  margin-bottom: auto;
  position: relative;
  display: flex;
  align-items: center;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .title span,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .title span,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .title span {
  display: inline-block;
  font-size: 18px;
  letter-spacing: -0.36px;
  color: #5c5c5c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .title span b,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .title span b,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .title span b {
  color: #f65606;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .user_info,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .user_info,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .user_info {
  margin-top: 12px;
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .user_info .profile_image,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .user_info .profile_image,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .user_info .profile_image {
  width: 20px;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .user_info .profile_image img,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .user_info .profile_image img,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .user_info .profile_image img {
  width: 100%;
  height: 100%;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .user_info .name,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .user_info .name,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .user_info .name {
  margin-left: 10px;
  color: #5c5c5c;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .user_info ~ .sub_info,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .user_info ~ .sub_info,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .user_info ~ .sub_info {
  margin-top: 9px;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .date,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .date,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .date {
  margin-right: 10px;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .date span,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .date span,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .date span {
  -webkit-box-orient: vertical;
  display: -webkit-inline-box;
  -webkit-line-clamp: 1;
  overflow: hidden;
  word-break: break-all;
  color: #aaa;
  font-size: 12px;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc {
  display: flex;
  align-items: center;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc div,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc div,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc div {
  display: flex;
  align-items: center;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc div span,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc div span,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc div span {
  font-size: 14px;
  color: #707070;
  white-space: nowrap;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc .comment,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc .comment,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc .comment {
  margin-right: 12px;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc .comment::before,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc .comment::before,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc .comment::before {
  display: block;
  content: "";
  width: 18px;
  height: 20px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%238E8E8E' d='m4 17-3-2h3v2Z'/%3E%3Cpath fill='%23AAA' d='M1 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H1V7Z'/%3E%3Cpath fill='%23F6F4F4' d='M4 9h2v2H4V9ZM8 9h2v2H8V9ZM12 9h2v2h-2V9Z'/%3E%3C/svg%3E");
  background-size: cover;
  margin-right: 4px;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc .view,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc .view,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc .view {
  margin-right: 12px;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc .view::before,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc .view::before,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc .view::before {
  display: block;
  content: "";
  min-width: 18px;
  width: 18px;
  height: 10px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' fill='none'%3E%3Cpath fill='%23AAA' fill-rule='evenodd' d='M9 10c5.61 0 9-4.22 9-5 0-.78-3.39-5-9-5-4.809 0-9 4.22-9 5 0 .78 4.191 5 9 5Zm0-1.25c2.13 0 3.857-1.679 3.857-3.75 0-2.071-1.727-3.75-3.857-3.75S5.143 2.929 5.143 5C5.143 7.071 6.87 8.75 9 8.75Z' clip-rule='evenodd'/%3E%3Cpath fill='%23AAA' fill-rule='evenodd' d='M9 7.5c1.42 0 2.571-1.12 2.571-2.5H9V2.5C7.58 2.5 6.428 3.62 6.428 5S7.58 7.5 9 7.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: cover;
  margin-right: 4px;
}
#mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc .like::before,
#mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc .like::before,
#mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .sub_info .etc .like::before {
  display: block;
  content: "";
  width: 12px;
  min-width: 12px;
  height: 11px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='11' fill='none'%3E%3Cpath fill='%23AAA' d='M0 2v4l3 3 3 2 3-2 3-3V2L9 0 6 2 3 0 0 2Z'/%3E%3C/svg%3E");
  background-size: cover;
  margin-right: 4px;
}
#mabinogim .guide .grid_list_wrap .list_area .list_empty,
#mabinogim .info .grid_list_wrap .list_area .list_empty,
#mabinogim .container .grid_list_wrap .list_area .list_empty {
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
}
#mabinogim .guide .grid_list_wrap .list_area .list_empty span,
#mabinogim .info .grid_list_wrap .list_area .list_empty span,
#mabinogim .container .grid_list_wrap .list_area .list_empty span {
  min-height: 220px;
  height: 220px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mabinogim .guide .grid_list_wrap .list_area .list_empty span b,
#mabinogim .info .grid_list_wrap .list_area .list_empty span b,
#mabinogim .container .grid_list_wrap .list_area .list_empty span b {
  color: #f65606;
}
#mabinogim .guide .grid_list_wrap .list_area .pager,
#mabinogim .info .grid_list_wrap .list_area .pager,
#mabinogim .container .grid_list_wrap .list_area .pager {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px auto 0;
}
#mabinogim .guide .grid_list_wrap .list_area .pager .pagination,
#mabinogim .info .grid_list_wrap .list_area .pager .pagination,
#mabinogim .container .grid_list_wrap .list_area .pager .pagination {
  display: flex;
  align-items: center;
}
#mabinogim .guide .grid_list_wrap .list_area .pager .pagination ul,
#mabinogim .info .grid_list_wrap .list_area .pager .pagination ul,
#mabinogim .container .grid_list_wrap .list_area .pager .pagination ul {
  display: flex;
}
#mabinogim .guide .grid_list_wrap .list_area .pager .pagination ul li,
#mabinogim .info .grid_list_wrap .list_area .pager .pagination ul li,
#mabinogim .container .grid_list_wrap .list_area .pager .pagination ul li {
  font-size: 16px;
  color: #525252;
  margin-right: 4px;
  cursor: pointer;
  width: 44px;
  height: 30px;
  background: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mabinogim .guide .grid_list_wrap .list_area .pager .pagination ul li.on,
#mabinogim .info .grid_list_wrap .list_area .pager .pagination ul li.on,
#mabinogim .container .grid_list_wrap .list_area .pager .pagination ul li.on {
  color: #fff;
  background: #2baf7e;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .guide .grid_list_wrap .list_area .pager .pagination ul li:hover,
  #mabinogim .info .grid_list_wrap .list_area .pager .pagination ul li:hover,
  #mabinogim .container .grid_list_wrap .list_area .pager .pagination ul li:hover {
    color: #fff;
    background: #2baf7e;
  }
}
#mabinogim .guide .grid_list_wrap .list_area .pager .pagination ul li:first-child,
#mabinogim .info .grid_list_wrap .list_area .pager .pagination ul li:first-child,
#mabinogim .container .grid_list_wrap .list_area .pager .pagination ul li:first-child {
  margin-left: 26px;
}
#mabinogim .guide .grid_list_wrap .list_area .pager .pagination ul li:last-child,
#mabinogim .info .grid_list_wrap .list_area .pager .pagination ul li:last-child,
#mabinogim .container .grid_list_wrap .list_area .pager .pagination ul li:last-child {
  margin-right: 26px;
}
#mabinogim .guide .grid_list_wrap .list_area .pager .pagination button.prev_button,
#mabinogim .info .grid_list_wrap .list_area .pager .pagination button.prev_button,
#mabinogim .container .grid_list_wrap .list_area .pager .pagination button.prev_button {
  width: 48px;
  height: 34px;
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mabinogim .guide .grid_list_wrap .list_area .pager .pagination button.prev_button::before,
#mabinogim .info .grid_list_wrap .list_area .pager .pagination button.prev_button::before,
#mabinogim .container .grid_list_wrap .list_area .pager .pagination button.prev_button::before {
  display: block;
  content: "";
  min-width: 9px;
  width: 9px;
  height: 11px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='11' fill='none'%3E%3Cpath stroke='%23424242' stroke-linecap='round' stroke-width='3' d='m7 1.5-4 4 4 4'/%3E%3C/svg%3E");
  transition: all 0.3s;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .guide .grid_list_wrap .list_area .pager .pagination button.prev_button:hover::before,
  #mabinogim .info .grid_list_wrap .list_area .pager .pagination button.prev_button:hover::before,
  #mabinogim .container .grid_list_wrap .list_area .pager .pagination button.prev_button:hover::before {
    transform: translateX(-4px);
  }
}
#mabinogim .guide .grid_list_wrap .list_area .pager .pagination button.next_button,
#mabinogim .info .grid_list_wrap .list_area .pager .pagination button.next_button,
#mabinogim .container .grid_list_wrap .list_area .pager .pagination button.next_button {
  width: 48px;
  height: 34px;
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mabinogim .guide .grid_list_wrap .list_area .pager .pagination button.next_button::before,
#mabinogim .info .grid_list_wrap .list_area .pager .pagination button.next_button::before,
#mabinogim .container .grid_list_wrap .list_area .pager .pagination button.next_button::before {
  display: block;
  content: "";
  min-width: 9px;
  width: 9px;
  height: 11px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='11' fill='none'%3E%3Cpath stroke='%23424242' stroke-linecap='round' stroke-width='3' d='m2 1.5 4 4-4 4'/%3E%3C/svg%3E");
  transition: all 0.3s;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .guide .grid_list_wrap .list_area .pager .pagination button.next_button:hover::before,
  #mabinogim .info .grid_list_wrap .list_area .pager .pagination button.next_button:hover::before,
  #mabinogim .container .grid_list_wrap .list_area .pager .pagination button.next_button:hover::before {
    transform: translateX(4px);
  }
}
#mabinogim .guide .grid_list_wrap .list_area .pager .write_button,
#mabinogim .info .grid_list_wrap .list_area .pager .write_button,
#mabinogim .container .grid_list_wrap .list_area .pager .write_button {
  width: min-content;
  padding: 10px 56px;
  background: #00b670;
  border-radius: 12px;
  font-size: 18px;
  color: #fff;
  white-space: nowrap;
  margin-left: auto;
}
@media (hover: hover) and (min-width: 1281px) {
  #mabinogim .guide .grid_list_wrap .list_area .pager .write_button:hover,
  #mabinogim .info .grid_list_wrap .list_area .pager .write_button:hover,
  #mabinogim .container .grid_list_wrap .list_area .pager .write_button:hover {
    background: #0c8b5a;
  }
}

@media (max-width: 1740px) {
  #mabinogim .guide .grid_list_wrap .list_area > ul > li.item,
  #mabinogim .info .grid_list_wrap .list_area > ul > li.item,
  #mabinogim .container .grid_list_wrap .list_area > ul > li.item {
    width: 32.666%;
  }
}
@media (max-width: 1280px) {
  #mabinogim .guide,
  #mabinogim .info,
  #mabinogim .container {
    padding: 30px 20px 57px;
  }
  #mabinogim .guide .grid_list_wrap .category_area,
  #mabinogim .info .grid_list_wrap .category_area,
  #mabinogim .container .grid_list_wrap .category_area {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
  }
  #mabinogim .guide .grid_list_wrap .category_area ul li a,
  #mabinogim .info .grid_list_wrap .category_area ul li a,
  #mabinogim .container .grid_list_wrap .category_area ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    font-size: 12px;
    border-radius: 12px;
    background: linear-gradient(#222632, #222632) no-repeat 0px -48px;
  }
  #mabinogim .guide .grid_list_wrap .filter_area,
  #mabinogim .info .grid_list_wrap .filter_area,
  #mabinogim .container .grid_list_wrap .filter_area {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }
  #mabinogim .guide .grid_list_wrap .filter_area .order_1,
  #mabinogim .info .grid_list_wrap .filter_area .order_1,
  #mabinogim .container .grid_list_wrap .filter_area .order_1 {
    order: 1;
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 0 10px;
  }
  #mabinogim .guide .grid_list_wrap .filter_area .order_1 button,
  #mabinogim .info .grid_list_wrap .filter_area .order_1 button,
  #mabinogim .container .grid_list_wrap .filter_area .order_1 button {
    position: relative;
    margin-right: 7px;
    color: #525252;
    padding: 4px 10px;
    font-size: 12px;
  }
  #mabinogim .guide .grid_list_wrap .filter_area .order_2,
  #mabinogim .info .grid_list_wrap .filter_area .order_2,
  #mabinogim .container .grid_list_wrap .filter_area .order_2 {
    position: relative;
    width: 100%;
    height: 42px;
    display: flex;
    margin: auto;
  }
  #mabinogim .guide .grid_list_wrap .filter_area .order_2 .total_list,
  #mabinogim .info .grid_list_wrap .filter_area .order_2 .total_list,
  #mabinogim .container .grid_list_wrap .filter_area .order_2 .total_list {
    position: relative;
    margin-right: 10px;
    border-radius: 16px;
  }
  #mabinogim .guide .grid_list_wrap .filter_area .order_2 .total_list button,
  #mabinogim .info .grid_list_wrap .filter_area .order_2 .total_list button,
  #mabinogim .container .grid_list_wrap .filter_area .order_2 .total_list button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 42px;
    height: 42px;
    background-size: cover;
  }
  #mabinogim .guide .grid_list_wrap .list_area > ul > li.item,
  #mabinogim .info .grid_list_wrap .list_area > ul > li.item,
  #mabinogim .container .grid_list_wrap .list_area > ul > li.item {
    width: 49.5%;
  }
  #mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div,
  #mabinogim .info .grid_list_wrap .list_area > ul > li.item > div,
  #mabinogim .container .grid_list_wrap .list_area > ul > li.item > div {
    padding: 10px 10px 10px;
  }
  #mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript,
  #mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript,
  #mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript {
    margin-top: 0px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  #mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .type span,
  #mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .type span,
  #mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .type span {
    color: #5c5c5c;
    font-size: 16px;
    letter-spacing: -0.32px;
  }
  #mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .title,
  #mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .title,
  #mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .title {
    margin-bottom: auto;
    position: relative;
    display: flex;
    align-items: center;
  }
  #mabinogim .guide .grid_list_wrap .list_area > ul > li.item > div .descript .title span,
  #mabinogim .info .grid_list_wrap .list_area > ul > li.item > div .descript .title span,
  #mabinogim .container .grid_list_wrap .list_area > ul > li.item > div .descript .title span {
    display: inline-block;
    letter-spacing: -0.36px;
    color: #626262;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #mabinogim .guide .grid_list_wrap .list_area .list_empty,
  #mabinogim .info .grid_list_wrap .list_area .list_empty,
  #mabinogim .container .grid_list_wrap .list_area .list_empty {
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
  }
  #mabinogim .guide .grid_list_wrap .list_area .list_empty span,
  #mabinogim .info .grid_list_wrap .list_area .list_empty span,
  #mabinogim .container .grid_list_wrap .list_area .list_empty span {
    min-height: 220px;
    height: 220px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #mabinogim .guide .grid_list_wrap .list_area .list_empty span b,
  #mabinogim .info .grid_list_wrap .list_area .list_empty span b,
  #mabinogim .container .grid_list_wrap .list_area .list_empty span b {
    color: #f65606;
  }
  #mabinogim .guide .grid_list_wrap .list_area .pager,
  #mabinogim .info .grid_list_wrap .list_area .pager,
  #mabinogim .container .grid_list_wrap .list_area .pager {
    display: block;
    width: 100%;
    margin: 20px auto 0;
  }
  #mabinogim .guide .grid_list_wrap .list_area .pager .pagination,
  #mabinogim .info .grid_list_wrap .list_area .pager .pagination,
  #mabinogim .container .grid_list_wrap .list_area .pager .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #mabinogim .guide .grid_list_wrap .list_area .pager .pagination ul,
  #mabinogim .info .grid_list_wrap .list_area .pager .pagination ul,
  #mabinogim .container .grid_list_wrap .list_area .pager .pagination ul {
    display: flex;
  }
  #mabinogim .guide .grid_list_wrap .list_area .pager .pagination ul li,
  #mabinogim .info .grid_list_wrap .list_area .pager .pagination ul li,
  #mabinogim .container .grid_list_wrap .list_area .pager .pagination ul li {
    font-size: 10px;
    color: #525252;
    margin-right: 4px;
    cursor: pointer;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #mabinogim .guide .grid_list_wrap .list_area .pager .pagination ul li.on, #mabinogim .guide .grid_list_wrap .list_area .pager .pagination ul lili:hover,
  #mabinogim .info .grid_list_wrap .list_area .pager .pagination ul li.on,
  #mabinogim .info .grid_list_wrap .list_area .pager .pagination ul lili:hover,
  #mabinogim .container .grid_list_wrap .list_area .pager .pagination ul li.on,
  #mabinogim .container .grid_list_wrap .list_area .pager .pagination ul lili:hover {
    color: #fff;
    background: #2baf7e;
  }
  #mabinogim .guide .grid_list_wrap .list_area .pager .pagination ul li:first-child,
  #mabinogim .info .grid_list_wrap .list_area .pager .pagination ul li:first-child,
  #mabinogim .container .grid_list_wrap .list_area .pager .pagination ul li:first-child {
    margin-left: 8px;
  }
  #mabinogim .guide .grid_list_wrap .list_area .pager .pagination ul li:last-child,
  #mabinogim .info .grid_list_wrap .list_area .pager .pagination ul li:last-child,
  #mabinogim .container .grid_list_wrap .list_area .pager .pagination ul li:last-child {
    margin-right: 8px;
  }
  #mabinogim .guide .grid_list_wrap .list_area .pager .pagination button.prev_button,
  #mabinogim .info .grid_list_wrap .list_area .pager .pagination button.prev_button,
  #mabinogim .container .grid_list_wrap .list_area .pager .pagination button.prev_button {
    width: 20px;
    height: 23px;
    border-radius: none;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #mabinogim .guide .grid_list_wrap .list_area .pager .pagination button.next_button,
  #mabinogim .info .grid_list_wrap .list_area .pager .pagination button.next_button,
  #mabinogim .container .grid_list_wrap .list_area .pager .pagination button.next_button {
    width: 20px;
    height: 23px;
    border-radius: none;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #mabinogim .guide .grid_list_wrap .list_area .pager .write_button,
  #mabinogim .info .grid_list_wrap .list_area .pager .write_button,
  #mabinogim .container .grid_list_wrap .list_area .pager .write_button {
    display: block;
    background: #00b670;
    border-radius: 12px;
    font-size: 18px;
    color: #fff;
    margin: 30px auto 0;
  }
}
@media (max-width: 700px) {
  #mabinogim .guide .grid_list_wrap .list_area > ul,
  #mabinogim .info .grid_list_wrap .list_area > ul,
  #mabinogim .container .grid_list_wrap .list_area > ul {
    gap: 10px;
  }
  #mabinogim .guide .grid_list_wrap .list_area > ul > li.item,
  #mabinogim .info .grid_list_wrap .list_area > ul > li.item,
  #mabinogim .container .grid_list_wrap .list_area > ul > li.item {
    width: 100%;
  }
}
.sticky_banner_wrap {
  position: relative;
  margin-bottom: 55px;
}
.sticky_banner_wrap > h1 {
  color: #5c5c5c;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.48px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.sticky_banner_wrap .swiper {
  position: relative;
  overflow-y: visible !important;
  overflow-x: hidden !important; /* fallback: clip 미지원 구형 브라우저 대응 */
  overflow-x: clip !important;
}
.sticky_banner_wrap .swiper .swiper-wrapper {
  position: relative;
  margin: 0 auto;
  width: min-content;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide {
  position: relative;
  max-width: 385px;
  min-width: 385px;
  border-radius: 24px;
  background: #fff;
  transition: transform 0.3s, box-shadow 0.3s;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide:last-child {
  margin-right: 0 !important;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript {
  position: relative;
  padding: 20px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .type {
  margin-top: auto;
  width: min-content;
  color: #626262;
  font-size: 14px;
  letter-spacing: -0.28px;
  padding: 5px 15px;
  border-radius: 20px;
  border: 1px solid #d9d9d9;
  background: #fff;
  white-space: nowrap;
  display: flex;
  margin-bottom: 10px;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .type span {
  display: flex;
  align-items: center;
  width: min-content;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .type span:last-child::after {
  display: none;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .type span::after {
  display: block;
  content: "";
  width: 5px;
  height: 8px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' fill='none'%3E%3Cpath fill='%23D9D9D9' d='M3 3h1v2H3V3ZM2 2h1v1H2V2ZM1 1h1v1H1V1ZM0 0h1v1H0V0ZM2 5h1v1H2V5ZM1 6h1v1H1V6ZM0 7h1v1H0V7ZM0 6h1v1H0V6ZM1 5h1v1H1V5ZM2 3h1v2H2V3ZM1 2h1v1H1V2ZM0 1h1v1H0V1ZM1 7h1v1H1V7ZM2 6h1v1H2V6ZM3 5h1v1H3V5ZM4 3h1v2H4V3ZM3 2h1v1H3V2ZM2 1h1v1H2V1ZM1 0h1v1H1V0Z'/%3E%3C/svg%3E") no-repeat;
  margin: 0 6px;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .type + .title {
  margin-top: 0;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .title {
  margin-top: auto;
  position: relative;
  display: flex;
  align-items: center;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .title span {
  display: inline-block;
  max-width: 100%;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.36px;
  color: #5c5c5c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .user_info {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 10px;
  cursor: pointer;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .user_info .profile_image {
  width: 20px;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .user_info .profile_image img {
  width: 100%;
  height: 100%;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .user_info .name {
  margin-left: 10px;
  color: #5c5c5c;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .user_info ~ .sub_info {
  margin-top: 9px;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .sub_info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .sub_info .date {
  max-width: 60%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .sub_info .date span {
  color: #aaa;
  font-size: 12px;
  color: #525252;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .sub_info .etc {
  display: flex;
  align-items: center;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .sub_info .etc div {
  display: flex;
  align-items: center;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .sub_info .etc div span {
  font-size: 14px;
  color: #707070;
  white-space: nowrap;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .sub_info .etc .comment {
  margin-right: 12px;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .sub_info .etc .comment::before {
  display: block;
  content: "";
  width: 18px;
  height: 20px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%238E8E8E' d='m4 17-3-2h3v2Z'/%3E%3Cpath fill='%23AAA' d='M1 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H1V7Z'/%3E%3Cpath fill='%23F6F4F4' d='M4 9h2v2H4V9ZM8 9h2v2H8V9ZM12 9h2v2h-2V9Z'/%3E%3C/svg%3E");
  background-size: cover;
  margin-right: 4px;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .sub_info .etc .view {
  margin-right: 12px;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .sub_info .etc .view::before {
  display: block;
  content: "";
  min-width: 18px;
  width: 18px;
  height: 10px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' fill='none'%3E%3Cpath fill='%23AAA' fill-rule='evenodd' d='M9 10c5.61 0 9-4.22 9-5 0-.78-3.39-5-9-5-4.809 0-9 4.22-9 5 0 .78 4.191 5 9 5Zm0-1.25c2.13 0 3.857-1.679 3.857-3.75 0-2.071-1.727-3.75-3.857-3.75S5.143 2.929 5.143 5C5.143 7.071 6.87 8.75 9 8.75Z' clip-rule='evenodd'/%3E%3Cpath fill='%23AAA' fill-rule='evenodd' d='M9 7.5c1.42 0 2.571-1.12 2.571-2.5H9V2.5C7.58 2.5 6.428 3.62 6.428 5S7.58 7.5 9 7.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: cover;
  margin-right: 4px;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .sub_info .etc .like::before {
  display: block;
  content: "";
  width: 12px;
  min-width: 12px;
  height: 11px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='11' fill='none'%3E%3Cpath fill='%23AAA' d='M0 2v4l3 3 3 2 3-2 3-3V2L9 0 6 2 3 0 0 2Z'/%3E%3C/svg%3E");
  background-size: cover;
  margin-right: 4px;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .thumbnail {
  position: relative;
  width: 100%;
  height: 140px;
  background-size: cover;
  background-position: left center;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .thumbnail span {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 41px;
  transform: translateY(-50%);
  font-size: 20px;
  color: #fff;
  margin-left: auto;
  font-weight: 700;
  line-height: 130%; /* 26px */
  letter-spacing: -0.4px;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .thumbnail span::before {
  display: block;
  content: "";
  width: 40px;
  min-width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none'%3E%3Cg fill='%23fff' clip-path='url(%23a)'%3E%3Cg opacity='.8'%3E%3Cpath fill-rule='evenodd' d='M20 8c-5.554 0-10.25 3.805-11.584 8.994a.828.828 0 0 1-1.001.582.799.799 0 0 1-.602-.97C8.318 10.755 13.636 6.4 20 6.4c6.364 0 11.682 4.354 13.187 10.207a.799.799 0 0 1-.602.97.828.828 0 0 1-1-.583C30.25 11.804 25.554 8 20 8ZM7.415 22.424a.828.828 0 0 1 1 .582C9.75 28.196 14.446 32 20 32c5.554 0 10.25-3.805 11.584-8.994a.828.828 0 0 1 1.001-.582.799.799 0 0 1 .602.97C31.682 29.245 26.364 33.6 20 33.6c-6.364 0-11.682-4.354-13.187-10.207a.799.799 0 0 1 .602-.97Z' clip-rule='evenodd'/%3E%3Cpath d='M20 32.215c-.456 0-.826.317-.826.708v6.37c0 .39.37.707.826.707.456 0 .826-.317.826-.708v-6.369c0-.39-.37-.708-.826-.708ZM20 0c-.456 0-.826.317-.826.708v6.369c0 .39.37.708.826.708.456 0 .826-.317.826-.708V.707c0-.39-.37-.707-.826-.707ZM9.081 26.108c-.228-.383-.696-.535-1.045-.34l-5.693 3.185c-.35.196-.448.664-.22 1.047.228.383.696.534 1.045.339l5.694-3.185c.349-.195.447-.664.22-1.046ZM37.877 10c-.228-.383-.696-.534-1.045-.339l-5.694 3.185c-.349.195-.447.664-.22 1.046.229.383.697.535 1.046.34l5.693-3.185c.35-.196.448-.664.22-1.047ZM30.919 26.108c.228-.383.696-.535 1.045-.34l5.693 3.185c.35.196.448.665.22 1.047-.228.383-.696.535-1.045.34l-5.694-3.186c-.349-.195-.447-.664-.22-1.046ZM2.123 10c.228-.383.696-.534 1.045-.339l5.693 3.185c.35.195.448.664.22 1.046-.228.383-.696.535-1.045.34l-5.693-3.185c-.35-.196-.448-.664-.22-1.047Z'/%3E%3C/g%3E%3Cpath d='m11 20 6.546 2.454L20 29l2.454-6.546L29 20l-6.546-2.454L20 11l-2.454 6.546L11 20Zm6.546 0L20 17.546 22.454 20 20 22.454 17.546 20Z'/%3E%3Cg opacity='.3'%3E%3Cpath d='M38.26 18.293 40 20l-1.74 1.707L36.523 20l1.739-1.707ZM1.74 18.293 3.477 20 1.74 21.707 0 20l1.74-1.707ZM30.637 34.668 30 37l-2.376-.625.637-2.331 2.376.624ZM12.376 3.625l-.637 2.332-2.376-.625L10 3l2.376.625ZM12.376 36.375 10 37l-.637-2.332 2.376-.625.637 2.332ZM30.637 5.332l-2.376.625-.637-2.332L30 3l.637 2.332Z'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h40v40H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-size: cover;
  margin-right: 6px;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .thumbnail + .descript {
  position: relative;
  padding: 20px 30px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 135px;
  height: 135px;
  max-height: 135px;
}
.sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .thumbnail + .descript .title {
  margin-top: 0px;
}
@media (hover: hover) and (min-width: 1281px) {
  .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide:hover {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
  }
}
.sticky_banner_wrap .pager {
  padding-top: 24px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sticky_banner_wrap .pager .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #aaa;
  opacity: 0.5;
  border-radius: 50%;
  margin-right: 10px;
}
.sticky_banner_wrap .pager .swiper-pagination-bullet:last-child {
  margin-right: 0;
}
.sticky_banner_wrap .pager .swiper-pagination-bullet-active {
  width: 25px;
  height: 8px;
  background: #2baf7e;
  border-radius: 4px;
  opacity: 1;
}

.faq .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide {
  max-width: 524px;
}

@media (max-width: 1280px) {
  .sticky_banner_wrap {
    margin-bottom: 34px;
  }
  .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .thumbnail i {
    margin-right: 6px;
  }
  .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .thumbnail span {
    font-size: 16px;
    color: #fff;
  }
  .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .title {
    position: relative;
    display: flex;
    align-items: center;
  }
  .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .title span {
    display: inline-block;
    font-size: 16px;
    letter-spacing: -0.36px;
    line-height: 140%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .user_info {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .user_info .profile_image {
    width: 20px;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
  }
  .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .user_info .profile_image img {
    width: 100%;
    height: 100%;
  }
  .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .user_info .name {
    margin-left: 10px;
    color: #5c5c5c;
    font-size: 12px;
    letter-spacing: -0.28px;
  }
  .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .sub_info {
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
    align-items: center;
  }
  .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .sub_info .date span {
    color: #aaa;
    font-size: 11px;
  }
  .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .sub_info .etc {
    display: flex;
    align-items: center;
  }
  .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .sub_info .etc div {
    display: flex;
    align-items: center;
  }
  .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .sub_info .etc div span {
    font-size: 11px;
    color: #707070;
  }
  .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .sub_info .etc div i {
    margin-right: 2px;
  }
  .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript .sub_info .etc .comment {
    margin-right: 12px;
  }
  .sticky_banner_wrap .pager {
    padding-top: 24px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sticky_banner_wrap .pager .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #aaa;
    opacity: 0.5;
    border-radius: 50%;
    margin-right: 10px;
  }
  .sticky_banner_wrap .pager .swiper-pagination-bullet:last-child {
    margin-right: 0;
  }
  .sticky_banner_wrap .pager .swiper-pagination-bullet-active {
    width: 25px;
    height: 8px;
    background: #2baf7e;
    border-radius: 4px;
    opacity: 1;
  }
}
@media (min-width: 701px) and (max-width: 1279px) {
  .sticky_banner_wrap .swiper .swiper-wrapper {
    width: 100%;
    margin: 0;
    height: auto !important;
  }
  .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide {
    width: calc(50% - 6px);
    min-width: unset;
    max-width: unset;
  }
  .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .thumbnail {
    height: auto;
    aspect-ratio: 385/140;
  }
  .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .thumbnail + .descript {
    height: auto;
    min-height: unset;
    max-height: none;
  }
}
@media (max-width: 700px) {
  #mabinogim .container .sticky_banner_wrap .swiper .swiper-wrapper {
    width: 100%;
    margin: 0;
    height: auto !important;
  }
  #mabinogim .container .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide {
    min-width: unset;
    max-width: 100%;
  }
  #mabinogim .container .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .descript {
    height: auto;
  }
  #mabinogim .container .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .thumbnail {
    height: auto;
    aspect-ratio: 385/140;
  }
  #mabinogim .container .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .thumbnail span {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #mabinogim .container .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .thumbnail span::before {
    width: 28px;
    min-width: 28px;
    height: 28px;
  }
  #mabinogim .container .sticky_banner_wrap .swiper .swiper-wrapper .swiper-slide .thumbnail + .descript {
    height: auto;
    min-height: unset;
    max-height: none;
  }
}