@charset "UTF-8";
/* Com2us Platform WD_WP Team. Author :Jiwon Lee 2023-03-29 */
/* Hanbom.com Pub Team Edit :Juyeon Kim 2024-04-25 1847 */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap");
* {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: 0;
  box-sizing: border-box;
  word-wrap: break-word;
  word-break: keep-all;
}

html {
  -webkit-text-size-adjust: none;
  height: 100%;
}

body {
  font-family: "Pretendard Variable", "Noto Sans SC", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("../font/PretendardVariable.woff2") format("woff2-variations");
  unicode-range: U+0041-005A, U+0061-007A, U+AC00-D7A3, U+0030-0039, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E; /* 특수문자 */
}
@font-face {
  font-family: "Eras Bold ITC";
  font-style: normal;
  font-display: swap;
  src: url("../font/ITCErasStd-Bold.woff2") format("woff2-variations");
}
img {
  max-width: 100%;
  vertical-align: top;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: none;
  outline: none;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  border: 0;
  outline: 0;
  box-sizing: border-box;
}

button:disabled {
  cursor: default;
}

a {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  text-decoration: none;
  outline: 0;
}

label {
  cursor: pointer;
}

blockquote, q {
  quotes: none;
}

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

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

em, address {
  font-style: normal;
}

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

table, th, td, tr {
  border: 1px solid #000;
}

.tb {
  display: table;
  width: 100%;
  height: 100%;
}

.cell {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

input,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  box-sizing: border-box;
  outline: none;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
}

textarea {
  width: 100%;
  height: 100%;
  resize: none;
}

pre {
  white-space: normal;
}

font {
  white-space: inherit;
}

input, textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

/* ** HTML5 display-role reset for older browsers ** */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

input::-webkit-input-placeholder {
  color: #8d8d8d !important;
}
input::-moz-placeholder {
  color: #8d8d8d !important;
}
input:-ms-input-placeholder {
  color: #8d8d8d !important;
}
input:-moz-placeholder {
  color: #8d8d8d !important;
}

/* ** input 'x' button close ** */
input::-ms-clear,
input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
  display: none;
}

/* ** Skip to Main ** */
a.skip_to_content {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  z-index: -999;
  top: -50px;
  right: 0;
  left: 0;
}

a.skip_to_content:focus, a.skip_to_content:active {
  width: auto;
  height: auto;
  display: block;
  position: absolute;
  z-index: 999;
  top: 0;
  margin: 0;
  padding: 5px 5px 2px;
  font-size: 15px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #000;
}

.hide {
  position: absolute;
  left: -1000px;
  top: -1000px;
  overflow: hidden;
  width: 1px;
  height: 1px;
  text-indent: -9999px;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

/* slick */
.slick-list, .slick-slider, .slick-track {
  display: block;
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
}

.slick-loading .slick-slide, .slick-loading .slick-track {
  visibility: hidden;
}

.slick-slider {
  box-sizing: border-box;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.slick-slider img {
  display: none;
  opacity: 0;
}
.slick-slider .slick-active img {
  display: block;
  opacity: 1;
  display: inline-block;
}
.slick-slider .item {
  width: calc(100% - 400px);
  height: auto;
}

.slick-list {
  overflow: hidden;
  margin: 0;
  padding: 0;
  margin: 0 auto;
}

.slick-list:focus {
  outline: 0;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-list, .slick-slider .slick-track {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  top: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto; /*transform:translate3d(0,0,0)!important;*/
}

.slick-track:after, .slick-track:before {
  display: table;
  content: "";
}

.slick-track:after {
  clear: both;
}

.slick-slide {
  height: 100%;
  min-height: 1px;
  display: none;
  float: left;
}

[dir=rtl] .slick-slide {
  float: right;
}

.slick-slide img {
  width: 100%;
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-vertical .slick-slide {
  height: auto;
  display: block;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.slick-prev {
  position: absolute;
  width: 50px;
  height: 70px;
  background-image: url("data:image/svg+xml,%3Csvg width='50' height='70' viewBox='0 0 50 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35 0 0 34.998 35 70v-9.127L9.127 34.998 35 9.128V0zM20.165 34.998l14.918 14.917 14.915-14.917-14.915-14.915-14.918 14.915z' fill='%237E7E7E' fill-rule='evenodd'/%3E%3C/svg%3E");
  top: 50%;
  left: -100px;
  transform: translateY(-50%);
}

.slick-next {
  position: absolute;
  width: 50px;
  height: 70px;
  background-image: url("data:image/svg+xml,%3Csvg width='50' height='70' viewBox='0 0 50 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35 0 0 34.998 35 70v-9.127L9.127 34.998 35 9.128V0zM20.165 34.998l14.918 14.917 14.915-14.917-14.915-14.915-14.918 14.915z' fill='%237E7E7E' fill-rule='evenodd'/%3E%3C/svg%3E");
  top: 50%;
  right: -100px;
  transform: translateY(-50%) rotate(180deg);
}

.slick-arrow {
  z-index: 10;
  font-size: 0;
  background-size: 100% 100%;
}
.slick-arrow:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='50' height='70' viewBox='0 0 50 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35 0 0 34.998 35 70v-9.127L9.127 34.998 35 9.128V0zM20.165 34.998l14.918 14.917 14.915-14.917-14.915-14.915-14.918 14.915z' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.slick-list,
.slick-track,
.slick-slide > div {
  height: 100%;
}

.board.view .textarea .list_attach li .ibtn_del, .board.view .reply_wrap button.dislike.on:before, .board.view .reply_wrap button.dislike:before, .board.view .reply_wrap button:before, .board.view .reply_wrap button.like.on:before, .pop_phone .btn_close:before, .pop_phone .agreement input[type=checkbox]:checked + label:before, .pop_phone .agreement input[type=checkbox] + label:before, .board .select_wrap .btn_select:hover:after, #CMMfooter .container .logo_wrap .logo, .pop_wrap .popup_layer > .pop_close, [id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .btn_del:before, [id^=CMMheader] .header_right .search_wrap .btn_search:hover, [id^=CMMheader] .header_right .search_wrap .btn_search, [id^=CMMheader] .nav > li .depth2 li.link_outside a:hover span:after, [id^=CMMheader] .nav > li .depth2 li.link_outside a span:after, [id^=CMMheader] .nav > li.arrow:after {
  background-image: url("../img/sprite_set-f72dac978f.png");
  background-repeat: no-repeat;
}

/* Hanbom.com Pub Team Edit :Juyeon Kim 2024-04-25 1847 */
:root {
  --vh100: calc(var(--vh, 1vh) * 100);
  --header: 90px;
  --nav: 306px;
  --red: #f04242;
  --orange: #e16513;
  --bg: #fbfbfd;
  --black: #000;
  --gray-1: #4b5056;
  --gray-2: #898e94;
  --gray-3: #b6bdc5;
  --gray-4: #cdd1db;
  --gray-5: #e8eaf0;
  --gray-6: #f3f4f8;
  --gray-7: #f9fafc;
  --white: #fff;
  --gray-0: #2d2d2d;
  --gold-1: #a48869;
  --gold-2: #b49673;
  --orange-1: #ff7a23;
  --orange-2: #ffa506;
  --line-gray: #e0e2e4;
  --gold-3: #ecdcba;
  /* z-one */
  --z-yellow-1: #fff680;
  --z-orange: #ff5c13;
  --z-violet: #793ffc;
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-color: #fff;
  --scrollgold: rgba(164, 136, 105, 0.8);
}

@media screen and (max-width: 1199px) {
  :root {
    --header: 64px;
  }
}
/* Hanbom.com Pub Team Edit :Juyeon Kim 2024-04-25 1847 */
/* Hanbom.com Pub Team Edit :Juyeon Kim 2024-04-25 1847 */
body {
  height: 100%;
  min-width: 320px;
  font-weight: 500;
  line-height: 1.6;
}

/* scrollbar */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  background-color: #000;
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollgold);
}

#COMMUNITYwrap {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-width: 1440px;
}
#COMMUNITYwrap section {
  overflow: hidden;
  position: relative;
  flex: 1;
}

@media screen and (max-width: 1199px) {
  #COMMUNITYwrap {
    min-width: 320px;
  }
}
[id^=CMMheader] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header);
  z-index: 110;
  color: #fff;
  background: #000;
  padding: 0 416px 0 344px;
  min-width: 1440px;
}
[id^=CMMheader].header_error h1.logo {
  left: 50% !important;
  transform: translateX(-50%);
}
[id^=CMMheader] h1.logo {
  position: absolute;
  top: 21px;
  left: 57px;
  width: 202px;
  height: 48px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
[id^=CMMheader] h1.logo a {
  display: block;
  width: 100%;
  height: 100%;
}
[id^=CMMheader] .nav_wrap {
  position: relative;
  height: 100%;
  display: inline-block;
}
[id^=CMMheader] .nav_wrap .logo {
  display: none;
  position: absolute;
  top: 16px;
  left: 40px;
  width: 144px;
  height: 33.4px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
[id^=CMMheader] .nav_wrap .logo a {
  width: 100%;
  height: 100%;
  display: block;
}
[id^=CMMheader] .nav_wrap.on .logo {
  height: 68px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 60;
  display: none;
}
[id^=CMMheader] .nav_wrap.on .logo + .nav {
  left: 0;
}
[id^=CMMheader] .sub_title {
  display: none;
}
[id^=CMMheader] .btn_menu {
  display: none;
  background: transparent url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M7 10h22v2H7zM7 17h22v2H7zM7 24h22v2H7z'/%3E%3C/svg%3E%0A") no-repeat;
  background-size: 36px 36px;
  z-index: 70;
}
[id^=CMMheader] .btn_menu.on {
  background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11 24.996 14.142-14.142M25 24.996 10.858 10.854' stroke='%23fff' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[id^=CMMheader] .btn_back {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.647 2 6 12l9.647 10L17 20.599 8.706 12 17 3.403z' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
  width: 24px;
  height: 24px;
  background-size: 100% 100%;
  position: absolute;
  top: 22px;
  left: 20px;
  left: calc(constant(safe-area-inset-left) + 22px);
  left: calc(env(safe-area-inset-left) + 22px);
}
[id^=CMMheader] .btn_check {
  font-size: 16px;
  line-height: 20px;
  position: absolute;
  top: 24px;
  right: 20px;
  right: calc(constant(safe-area-inset-right) + 20px);
  right: calc(env(safe-area-inset-right) + 20px);
}
[id^=CMMheader] .nav {
  position: relative;
  display: flex;
  height: 100%;
  gap: 52px;
}
[id^=CMMheader] .nav > li {
  position: relative;
  height: 100%;
}
[id^=CMMheader] .nav > li.on > a {
  color: #fff;
  position: relative;
}
[id^=CMMheader] .nav > li.arrow:after {
  display: none;
  background-position: 66.493955095% 20.7972270364%;
  background-size: 1708.3333333333% 1702.7777777778%;
}
[id^=CMMheader] .nav > li a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px;
}
[id^=CMMheader] .nav > li > a {
  color: #fff;
  font-size: 18px;
}
[id^=CMMheader] .nav > li > a:hover {
  color: #fff;
}
[id^=CMMheader] .nav > li .depth2 {
  display: none;
  position: absolute;
  top: 100%;
  left: -16px;
  padding: 24px 0 24px 20px;
  line-height: 24px;
  background: #000;
  border-top: 1px solid var(--gray-0);
  min-width: 160px;
  max-width: 200px;
}
[id^=CMMheader] .nav > li .depth2 li {
  position: relative;
}
[id^=CMMheader] .nav > li .depth2 li span {
  position: relative;
}
[id^=CMMheader] .nav > li .depth2 li a {
  width: fit-content;
  height: 100%;
}
[id^=CMMheader] .nav > li .depth2 li a > span {
  display: flex;
  align-items: center;
  gap: 8px;
}
[id^=CMMheader] .nav > li .depth2 li a:hover {
  color: #fff;
}
[id^=CMMheader] .nav > li .depth2 li.on a {
  color: #fff;
}
[id^=CMMheader] .nav > li .depth2 li.link_outside a span:after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-position: 0% 100%;
  background-size: 2562.5% 2554.1666666667%;
}
[id^=CMMheader] .nav > li .depth2 li.link_outside a:hover span:after {
  background-position: 8.7986463621% 100%;
  background-size: 2562.5% 2554.1666666667%;
}
[id^=CMMheader] .nav > li:last-child > .depth2 {
  min-width: 190px;
}
[id^=CMMheader] .nav > li.new > a > span,
[id^=CMMheader] .nav > li .depth2 li > a > span {
  position: relative;
}
[id^=CMMheader] .nav > li.new > a > span:before,
[id^=CMMheader] .nav > li .depth2 li > a > span:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: -16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
}
[id^=CMMheader] .nav > li.new > a > span:before,
[id^=CMMheader] .nav > li .depth2 li.new > a > span:before {
  background: #f40058;
}
[id^=CMMheader] .nav > li .depth2 li > a > span:before {
  top: 13px;
}
[id^=CMMheader] .nav > li .depth2 li:not(.new) > a > span:before {
  background: var(--gray-1);
}
[id^=CMMheader] .nav > li:hover .depth2, [id^=CMMheader] .nav > li:active .depth2 {
  display: block;
}
[id^=CMMheader] .header_right {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 100%;
}
[id^=CMMheader] .header_right.login .btn_login {
  display: none;
}
[id^=CMMheader] .header_right.login .user {
  display: block;
}
[id^=CMMheader] .header_right.login .btn_profile {
  display: inline-block !important;
}
[id^=CMMheader] .header_right .login_wrap {
  display: flex;
  align-items: center;
}
[id^=CMMheader] .header_right .btn_login {
  font-size: 16px;
  line-height: 20px;
}
[id^=CMMheader] .header_right .user {
  position: relative;
  display: none;
  margin-left: 20px;
}
[id^=CMMheader] .header_right .user .user_wrap {
  position: absolute;
  display: none;
}
[id^=CMMheader] .header_right .user .user_wrap .img_profile {
  width: 60px;
  height: 60px;
}
[id^=CMMheader] .header_right .user .btn_profile {
  overflow: hidden;
  display: none;
  width: 32px;
  height: 32px;
  background-size: cover;
  border-radius: 50%;
}
[id^=CMMheader] .header_right .user .btn_profile.on + .user_wrap {
  top: calc(100% + 19px);
  right: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 12px;
  height: 162px;
  padding: 26px 26px 24px;
  border-radius: 4px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.2);
  border: solid 1px #323232;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 2;
}
[id^=CMMheader] .header_right .user .btn_profile.on + .user_wrap .text_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 60px - 12px);
}
[id^=CMMheader] .header_right .user .btn_profile.on + .user_wrap .text_wrap .username {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  height: 26px;
  color: #fff;
  font-size: 16px;
  line-height: 26px;
}
[id^=CMMheader] .header_right .user .btn_profile.on + .user_wrap .text_wrap dl.coupon {
  display: flex;
  align-items: center;
  gap: 6px;
}
[id^=CMMheader] .header_right .user .btn_profile.on + .user_wrap .text_wrap dl.coupon dt {
  display: flex;
  align-items: center;
  gap: 5px;
}
[id^=CMMheader] .header_right .user .btn_profile.on + .user_wrap .text_wrap dl.coupon dt img {
  width: 21px;
  height: 21px;
}
[id^=CMMheader] .header_right .user .btn_profile.on + .user_wrap .text_wrap dl.coupon dd a {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: #ffce73;
  text-decoration: underline;
}
[id^=CMMheader] .header_right .user .btn_profile.on + .user_wrap .btn_logout {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 33px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
  border: solid 1px rgba(255, 255, 255, 0.2);
}
[id^=CMMheader] .header_right .search_wrap {
  position: relative;
  margin-left: 36px;
}
[id^=CMMheader] .header_right .search_wrap .btn_search {
  position: relative;
  width: 24px;
  height: 24px;
  background-position: 8.8183421517% 95.3982300885%;
  background-size: 1281.25% 1277.0833333333%;
  z-index: 10;
}
[id^=CMMheader] .header_right .search_wrap .btn_search:hover {
  background-position: 17.6366843034% 95.3982300885%;
  background-size: 1281.25% 1277.0833333333%;
}
[id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 120;
}
[id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .btn_search_close {
  position: absolute;
  top: 60px;
  right: 100px;
  width: 40px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='m5.715 5.727 28.571 28.571M34.285 5.727 5.714 34.298' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat 50% 50%;
  background-size: contain;
}
[id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner {
  position: relative;
  background: #000;
  width: 100%;
  padding: 210px 0 143px;
  height: fit-content;
  min-height: 545px;
}
[id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner input,
[id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner .recent_searches {
  width: 100%;
  max-width: 952px;
  margin-left: auto;
  margin-right: auto;
}
[id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner input[type=search] {
  display: block;
  height: 70px;
  line-height: 70px;
  padding: 0 28px 0 76px;
  border-radius: 35px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  background: var(--white) url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10.4113' cy='10.4113' r='9.14201' stroke='black' stroke-width='1.86667'/%3E%3Cpath d='M17.1289 16.457L23.6686 22.9967' stroke='black' stroke-width='1.86667'/%3E%3C/svg%3E%0A") no-repeat 28px 50%;
}
[id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner input[type=search]::-webkit-search-decoration, [id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner input[type=search]::-webkit-search-cancel-button, [id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner input[type=search]::-webkit-search-results-button, [id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner input[type=search]::-webkit-search-results-decoration {
  width: 28px;
  height: 28px;
}
[id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner .recent_searches {
  margin-top: 36px;
}
[id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner .recent_searches .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
}
[id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner .recent_searches .title h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
}
[id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner .recent_searches .title .btn_remove_recent {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--gray-2);
}
[id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner .recent_searches .keyword_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
[id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner .recent_searches .keyword_tags .keyword_tag {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 4px 16px;
  border-radius: 100px;
  color: var(--gray-3);
  background-color: var(--gray-0);
}
[id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner .recent_searches .keyword_tags .keyword_tag .btn_remove_keyword {
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m1.715 1.71 8.571 8.572M10.285 1.71l-8.571 8.572' stroke='%23B6BDC5' stroke-width='1.3'/%3E%3C/svg%3E%0A");
}
[id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner .recent_searches .no_recent {
  padding-top: 24px;
  text-align: center;
}
[id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .btn_del {
  width: 20px;
  height: 24px;
  position: absolute;
  top: 50%;
  right: 50px;
  transform: translateY(-50%);
}
[id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .btn_del:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  background-position: 95.4003407155% 92.1367521368%;
  background-size: 2196.4285714286% 2189.2857142857%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
}
[id^=CMMheader] .header_right .search_wrap .inp_wrap {
  display: none;
}
[id^=CMMheader] .header_right .btn_gamestart:not(.old) {
  overflow: hidden;
  position: relative;
  width: 270px;
  height: var(--header);
  margin-left: 49px;
}
[id^=CMMheader] .header_right .btn_gamestart:not(.old) .side {
  position: absolute;
  width: auto;
  height: 100%;
}
[id^=CMMheader] .header_right .btn_gamestart:not(.old) .start_txt {
  position: absolute;
  width: 200px;
  height: auto;
  top: calc(50% - 10px);
  left: calc(50% - 90px);
  z-index: 2;
}
[id^=CMMheader] .header_right .btn_gamestart:not(.old) video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
[id^=CMMheader] .header_right .btn_gamestart:not(.old):before, [id^=CMMheader] .header_right .btn_gamestart:not(.old):after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  z-index: 3;
}
[id^=CMMheader] .header_right .btn_gamestart:not(.old):before {
  border-width: 73px 29px 0 0;
  border-color: #000 transparent transparent transparent;
}
[id^=CMMheader] .header_right .btn_gamestart:not(.old):after {
  left: 0;
  bottom: 0;
  border-width: 21px 0 0 26px;
  border-color: transparent transparent transparent #000;
}
[id^=CMMheader] .header_right .btn_gamestart.old {
  width: 280px;
  height: 80px;
  margin-right: 1px;
  margin-left: 38px;
  background: url("../img/btn_gamestart.jpg") no-repeat 0 0;
  background-size: 100% 100%;
}
[id^=CMMheader] .header_right .btn_gamestart.old:hover {
  background-image: url("../img/btn_gamestart_on.gif?v=1");
}
[id^=CMMheader] .nav_wrap.on + .nav li a {
  color: #0e0e0e;
}
[id^=CMMheader] .nav_wrap.on + .nav li a:hover {
  color: #fff;
}
[id^=CMMheader] .nav > li > a:hover {
  color: #fff;
}
[id^=CMMheader] .nav > li .depth2 li a {
  color: #8d8d8d;
}
[id^=CMMheader] .nav > li .depth2 li a:hover {
  color: #fff;
}

#CMMheader_2 {
  display: none;
}

@media screen and (min-width: 1200px) and (max-width: 1919px) {
  [id^=CMMheader] {
    padding-left: 17.917vw;
  }
  [id^=CMMheader] h1.logo {
    left: 2.969vw;
  }
}
@media screen and (min-width: 1600px) and (max-width: 1919px) {
  [id^=CMMheader] .nav {
    gap: 2.76vw;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1599px) {
  [id^=CMMheader] h1.logo {
    width: 14.429vw;
    height: 3.429vw;
  }
  [id^=CMMheader] .nav {
    gap: 1.5vw;
  }
}
@media screen and (min-width: 1200px) {
  [id^=CMMheader] .header_right .user .btn_profile.on + .user_wrap {
    transform: translateX(50%);
  }
  [id^=CMMheader] .nav > li .depth2 li + li {
    margin-top: 16px;
  }
}
@media screen and (max-width: 1199px) {
  [id^=CMMheader] {
    padding: 0 20px 0 211px;
    min-width: 340px;
  }
  [id^=CMMheader] .nav {
    position: fixed;
    top: 0;
    left: var(--nav);
    display: none;
    width: var(--nav);
    background: #22201e;
    float: none;
    z-index: 50;
    padding-top: var(--header);
    padding-left: 30px;
    padding-left: calc(constant(safe-area-inset-left) + 30px) !important;
    padding-left: calc(env(safe-area-inset-left) + 30px) !important;
    padding-right: 30px;
  }
  [id^=CMMheader] .nav > li {
    overflow: hidden;
    position: relative;
    display: block;
    height: auto;
    margin-left: 0;
    padding: 0;
  }
  [id^=CMMheader] .nav > li:hover .depth2, [id^=CMMheader] .nav > li:active .depth2 {
    display: none;
  }
  [id^=CMMheader] .nav > li a {
    position: relative;
    font-size: 14px;
    line-height: 22px;
    padding: 15px 0 14px;
    color: var(--gray-4);
  }
  [id^=CMMheader] .nav > li > a,
  [id^=CMMheader] .nav > li .depth2 > li {
    border-bottom: 1px solid #3f4348;
  }
  [id^=CMMheader] .nav > li .depth2 {
    display: none;
    position: relative;
    background: none;
    border: none;
    top: inherit;
    left: inherit;
    width: 100%;
    max-width: 100%;
    padding: 0 0 0 15px;
  }
  [id^=CMMheader] .nav > li .depth2 li a {
    color: var(--gray-4);
  }
  [id^=CMMheader] .nav > li.new > a > span:before,
  [id^=CMMheader] .nav > li .depth2 li > a > span:before {
    left: auto;
    right: -16px;
  }
  [id^=CMMheader] .nav > li .depth2 li:not(.new) > a > span:before {
    opacity: 0;
  }
  [id^=CMMheader] .nav > li.arrow:after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    position: absolute;
    top: 19px;
    right: 16px;
  }
  [id^=CMMheader] .nav > li.on > a, [id^=CMMheader] .nav > li.m_on > a {
    color: #fff;
  }
  [id^=CMMheader] .nav > li.on.arrow:after, [id^=CMMheader] .nav > li.m_on.arrow:after {
    transform: rotate(180deg);
  }
  [id^=CMMheader] .nav > li.on .depth2, [id^=CMMheader] .nav > li.m_on .depth2 {
    display: block !important;
  }
  [id^=CMMheader] .btn_menu {
    position: absolute;
    width: 36px;
    height: 36px;
    top: 14px;
    left: 20px;
    display: block;
    left: calc(constant(safe-area-inset-left) + 20px);
    left: calc(env(safe-area-inset-left) + 20px);
  }
  [id^=CMMheader] .nav_wrap {
    position: relative;
  }
  [id^=CMMheader] .nav_wrap.on:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 49;
    background-color: rgba(0, 0, 0, 0.8);
  }
  [id^=CMMheader] .nav_wrap.on .logo {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 308px;
    height: var(--header);
  }
  [id^=CMMheader] .nav_wrap.on .logo a {
    position: absolute;
    top: 16px;
    left: 50px;
    width: 144px;
    height: 33.4px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  [id^=CMMheader] .nav_wrap.on .logo + .nav {
    overflow: auto;
    display: block;
  }
  [id^=CMMheader] .header_right {
    right: 20px;
    right: calc(constant(safe-area-inset-right) + 20px);
    right: calc(env(safe-area-inset-right) + 20px);
  }
  [id^=CMMheader] .header_right .user_wrap {
    top: 37px !important;
  }
  [id^=CMMheader] .header_right .user .btn_profile {
    width: 30px;
    height: 30px;
  }
  [id^=CMMheader] .header_right .search_wrap {
    margin-left: 20px;
  }
  [id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap {
    background-color: rgba(0, 0, 0, 0.9);
  }
  [id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner {
    padding-left: 36px;
    padding-right: 36px;
  }
  [id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner .btn_search_close {
    right: 36px;
  }
  [id^=CMMheader] .header_right .btn_gamestart {
    display: none;
  }
  [id^=CMMheader] h1.logo {
    top: 16px;
    left: 50px;
    left: calc(constant(safe-area-inset-left) + 50px);
    left: calc(env(safe-area-inset-left) + 50px);
    width: 144px;
    height: 34px;
  }
  .sub [id^=CMMheader] h1.logo {
    position: absolute;
    left: -1000px;
    top: -1000px;
    overflow: hidden;
    width: 1px;
    height: 1px;
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
    color: transparent;
  }
  .sub [id^=CMMheader] .sub_title {
    display: block;
    position: fixed;
    top: 17px;
    font-size: 20px;
    line-height: 30px;
    left: 64px;
    left: calc(constant(safe-area-inset-left) + 64px);
    left: calc(env(safe-area-inset-left) + 64px);
  }
  #CMMheader_2 {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  [id^=CMMheader] .header_right .user .btn_profile.on + .user_wrap {
    width: 280px;
  }
}
@media screen and (max-width: 767px) {
  [id^=CMMheader] {
    min-width: 320px;
  }
  [id^=CMMheader] .header_right .user .btn_profile.on + .user_wrap {
    position: fixed;
    left: 20px;
    right: 20px !important;
    top: 59px !important;
  }
  [id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner {
    padding: 74px 24px 0;
  }
  [id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner .btn_search_close {
    top: 14px;
    right: 15px;
    width: 36px;
    height: 36px;
    background-size: 20px 20px;
  }
  [id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner input {
    height: 56px;
    line-height: 56px;
    font-size: 16px;
  }
  [id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner .recent_searches .title h2 {
    font-size: 16px;
  }
  [id^=CMMheader] .header_right .search_wrap .btn_search.on + .inp_wrap .search_inner .recent_searches .title .btn_remove_recent {
    font-size: 14px;
  }
}
@media screen and (max-width: 430px) {
  [id^=CMMheader] .header_right .search_wrap {
    margin-left: 10px;
  }
}
[lang=zh-hant] [id^=CMMheader] .header_right .btn_gamestart:before {
  border-width: 70px 34px 0 0;
}

[lang=zh-hant] [id^=CMMheader] .header_right .btn_gamestart:after {
  border-width: 20px 0 0 30px;
}

body.pop_on {
  overflow: hidden;
}

.pop_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: calc(var(--header) + 20px) 20px;
  background-color: rgba(0, 0, 0, 0.6);
  overflow: auto;
  visibility: hidden;
  opacity: 0;
  z-index: -1;
  -webkit-overflow-scrolling: touch;
  transition: opacity 500ms;
}
.pop_wrap.on {
  overflow-y: auto;
  visibility: visible;
  opacity: 1;
  z-index: 99;
  display: flex !important;
}
.pop_wrap .pop_layer {
  position: relative;
  width: 100%;
  min-width: 280px;
}
.pop_wrap .pop_layer .pop_cont,
.pop_wrap .pop_layer .pop_contents {
  line-height: 1.5;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.1);
}
.pop_wrap .pop_layer > .title {
  width: 100%;
  height: 96px;
  background-color: #000;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}
.pop_wrap .pop_layer > .img {
  margin: 0 auto;
  max-width: 190px;
}
.pop_wrap .pop_layer > .img + .pop_cont {
  margin-top: -70px;
  margin-bottom: 106px;
  padding: 98px 34px 30px;
}
.pop_wrap .pop_layer > .img + .pop_cont > .medium {
  text-align: center;
  font-size: 24px;
  line-height: 1.6;
  font-weight: bold;
}
.pop_wrap .popup_layer {
  position: relative;
  width: 680px;
  padding: 50px 40px;
  border-radius: 2px;
  background-color: #fff;
  border: solid 1px #bebebe;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.16);
}
.pop_wrap .popup_layer > .pop_close {
  background-position: 35.2733686067% 95.3982300885%;
  background-size: 1281.25% 1277.0833333333%;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 24px;
  height: 24px;
}
.pop_wrap .popup_layer .title {
  font-size: 18px;
  line-height: 30px;
  color: #222832;
  background: inherit;
}
.pop_wrap .popup_layer .btn_area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}
.pop_wrap .popup_layer .btn_area button {
  width: 200px;
  height: 56px;
  padding: 16px 10px;
}
.pop_wrap .popup_layer .btn_area button.btn_cancel {
  border: solid 2px #bebebe;
  background-color: #fff;
  color: #9e9e9e;
}
.pop_wrap .popup_layer .btn_area button.btn_cancel:hover {
  border-color: #0e0e0e;
}
.pop_wrap .popup_layer .btn_area button.btn_confirm, .pop_wrap .popup_layer .btn_area button.btn_download {
  border: solid 2px #0e0e0e;
  background-color: #fff;
  color: #0e0e0e;
}
.pop_wrap .popup_layer .btn_area button.btn_confirm:hover, .pop_wrap .popup_layer .btn_area button.btn_download:hover {
  background-color: #0e0e0e;
  color: #fff;
}
.pop_wrap .pop_close {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m16.001 17.415 8.485 8.486 1.415-1.415-8.486-8.485 8.486-8.485-1.415-1.414-8.485 8.485-8.485-8.485-1.414 1.414L14.587 16l-8.485 8.485 1.414 1.415L16 17.415z' fill='%23fff'/%3E%3C/svg%3E");
}
.pop_wrap .pop_contents {
  width: 100%;
  padding: 40px;
}
.pop_wrap .pop_contents.has-sitcky {
  padding-bottom: 106px;
}
.pop_wrap .pop_contents.has-sitcky .btns.bottom-sticky {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.pop_wrap .pop_contents.has-sitcky .btns.bottom-sticky > .btn.large {
  height: 80px;
}
.pop_wrap .title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.pop_wrap .btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 40px;
}
.pop_wrap .btns button,
.pop_wrap .btns a {
  flex: 1;
  font-size: 16px;
  height: 56px;
  border-radius: 2px;
  transition: 0.3s;
}
.pop_wrap .btns .btn_report,
.pop_wrap .btns .btn_delete_all,
.pop_wrap .btns .btn_confirm,
.pop_wrap .btns .btn.black {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: background-color 0.2s;
  background-color: var(--black);
  color: var(--white);
}
.pop_wrap .btns .btn_cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: background-color 0.2s;
  background-color: var(--white);
  color: var(--black);
  box-shadow: 0 0 0 1px inset var(--black);
}
.pop_wrap .btns .btn.large {
  width: auto;
}

@media screen and (max-width: 1199px) {
  .pop_wrap {
    padding: calc(var(--header) + 20px) 20px 20px;
  }
  .pop_wrap .popup_layer {
    width: 100%;
    max-width: 560px;
    padding: 50px 20px 68px 20px;
  }
  .pop_wrap .popup_layer .btn_area {
    margin-top: 30px;
    gap: 10px;
  }
  .pop_wrap .popup_layer .btn_area button {
    height: 46px;
    padding: 0 10px;
  }
  .pop_wrap .pop_contents {
    padding: calc(env(safe-area-inset-left) + 40px);
  }
  .pop_wrap .pop_contents.has-sitcky {
    padding-bottom: 86px;
  }
  .pop_wrap .pop_contents.has-sitcky .btns.bottom-sticky > .btn.large {
    height: 68px;
  }
  .pop_wrap .pop_contents.has-sitcky .btns.bottom-sticky > .btn.xlarge {
    height: 72px;
    font-size: 24px;
    font-weight: 700;
  }
  .pop_wrap .btns {
    margin-top: 30px;
  }
}
@media screen and (max-width: 767px) {
  .pop_wrap {
    padding: calc(env(safe-area-inset-left) + var(--header) + 20px) calc(env(safe-area-inset-left) + 20px) calc(env(safe-area-inset-left) + 30px) calc(env(safe-area-inset-right) + 20px);
  }
  .pop_wrap .pop_layer > .title {
    height: 72px;
    font-size: 16px;
  }
  .pop_wrap .pop_layer > .img + .pop_cont > .medium {
    font-size: 18px;
  }
  .pop_wrap .pop_close {
    top: 20px;
    right: 20px;
  }
  .pop_wrap .pop_contents {
    padding: calc(env(safe-area-inset-left) + 20px);
    font-size: 14px;
  }
}
#CMMfooter {
  padding: 60px 0;
  background: #000;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--gray-2);
}
#CMMfooter .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  width: 100%;
  max-width: 1400px;
}
#CMMfooter .container .logo_wrap {
  width: 100%;
}
#CMMfooter .container .logo_wrap .logo {
  display: block;
  width: 237px;
  height: 27px;
  background-position: 100% 0%;
  background-size: 137.2767857143% 1178.8461538462%;
}
#CMMfooter .container .link_list {
  display: flex;
  flex-wrap: wrap;
  width: 742px;
  gap: 4px 30px;
}
#CMMfooter .container .link_list li a,
#CMMfooter .container .link_list li .btn_grade {
  color: #fff;
}
#CMMfooter .container .link_list li .btn_grade {
  display: block;
}
#CMMfooter .container .com_info {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 580px;
  gap: 4px 20px;
}
#CMMfooter .container .game_info {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 483px;
  margin: 0 calc(100% - 483px) 0 0;
  padding: 10px 24px;
  border-radius: 2px;
  background-color: #161616;
}
#CMMfooter .container .game_info .grade {
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 45px;
  height: 52px;
  background-image: url("../img/grade.svg");
}
#CMMfooter .container .game_info p {
  width: calc(100% - 45px - 12px);
}
#CMMfooter .container .download_list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}
#CMMfooter .container .download_list li a {
  display: block;
  width: fit-content;
  height: 37px;
}
#CMMfooter .container .download_list li a img {
  display: block;
  height: inherit;
}
#CMMfooter .container .copy {
  margin-top: 9px;
  width: calc(100% - 138px - 22px);
  color: rgba(255, 255, 255, 0.7);
  opacity: 0.4;
}
#CMMfooter .container .sns_list {
  display: flex;
  align-items: center;
  width: 138px;
  gap: 15px;
}
#CMMfooter .container .sns_list li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  opacity: 0.4;
  border-radius: 400px;
  background-color: var(--white);
}
#CMMfooter .container .sns_list li a i {
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 20px;
  height: 20px;
}
#CMMfooter .container .sns_list li a i.youtube {
  background-image: url("../img/sns_facebook.svg");
}
#CMMfooter .container .sns_list li a i.kakao {
  background-image: url("../img/sns_kakao.svg");
}
#CMMfooter .container .sns_list li a i.facebook {
  background-image: url("../img/sns_youtube.svg");
}
#CMMfooter #CMMpop_gamegrade .pop_layer {
  width: 774px;
  height: 217px;
  position: absolute;
  bottom: 78px;
  left: 50%;
  transform: translateX(-50%);
  background: url("../img/gamegrade_popup.png") no-repeat 0 0;
  background-size: 100% 100%;
}
#CMMfooter #CMMpop_gamegrade .pop_layer .pop_close {
  top: 14px;
  right: 14px;
  background: transparent;
}

@media screen and (max-width: 1199px) {
  #CMMfooter .container .com_info {
    max-width: 100%;
  }
}
@media screen and (max-width: 767px) {
  #CMMfooter {
    padding-bottom: 50px;
  }
  #CMMfooter .container {
    gap: 30px;
  }
  #CMMfooter .container .logo_wrap .logo {
    width: 252px;
    height: 25px;
  }
  #CMMfooter .container .link_list {
    margin-top: 12px;
  }
  #CMMfooter .container .game_info {
    width: 100%;
    margin-right: 0;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  #CMMfooter .container .download_list {
    order: 5;
    width: 100%;
    justify-content: center;
    gap: 16px;
  }
  #CMMfooter .container .sns_list {
    order: 6;
    width: 100%;
    justify-content: center;
  }
  #CMMfooter .container .copy {
    order: 7;
  }
}
@media screen and (max-width: 430px) {
  #CMMfooter .container .link_list {
    gap: 8px;
  }
  #CMMfooter .container .link_list li {
    width: 100%;
  }
  #CMMfooter .container .link_list li a,
  #CMMfooter .container .link_list li .btn_grade {
    font-size: 16px;
  }
  #CMMfooter .container .com_info span {
    width: 100%;
  }
  #CMMfooter .container .download_list li {
    width: calc((100% - 16px) / 2);
  }
  #CMMfooter .container .download_list li a {
    width: 100%;
  }
}
header {
  padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-left);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-left);
}

#COMMUNITYcontent {
  padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-left);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-left);
  padding-top: var(--header);
  padding-bottom: 100px;
}

.container {
  overflow: hidden;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-left);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-left);
}

@media screen and (max-width: 1199px) {
  #CMMfooter .container,
  .tab ul.container {
    padding: 0 calc(env(safe-area-inset-left) + 20px) 0 calc(env(safe-area-inset-right) + 20px);
    padding: 0 0 calc(constant(safe-area-inset-left) + 20px) 0 calc(constant(safe-area-inset-right) + 20px);
  }
}
/* Hanbom.com Pub Team Edit :Juyeon Kim 2024-04-25 1847 */
/* 전체 공통 */
/* sub title banner */
.medium {
  font-weight: 500;
}

.bold {
  font-weight: 600;
}

.bold2 {
  font-weight: 700;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

input[type=search] {
  display: block;
  color: var(--black);
}
input[type=search]::-webkit-input-placeholder, input[type=search]::-moz-placeholder, input[type=search]:-ms-input-placeholder, input[type=search]:-moz-placeholder {
  color: var(--gray-2);
}
input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
  position: relative;
  display: block;
  right: 0;
  width: 20px;
  height: 20px;
  -webkit-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' style='fill:%23d9d9d9'/%3E%3Cpath d='m21922 16697-4 4 4-4-4-4 4 4 4-4-4 4 4 4z' transform='translate(-21912 -16687)' style='fill:none;stroke:%23fff;stroke-miterlimit:10'/%3E%3C/svg%3E") no-repeat 0 0;
  background-size: contain;
}

.grade {
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 24px;
  height: 24px;
}
.grade.diamond {
  background-image: url("../img/grade/rating_diamond.svg");
}
.grade.gold {
  background-image: url("../img/grade/rating_gold.svg");
}
.grade.silver {
  background-image: url("../img/grade/rating_silver.svg");
}
.grade.bronze {
  background-image: url("../img/grade/rating_bronze.svg");
}
.grade.wood {
  background-image: url("../img/grade/rating_wood.svg");
}

.img_profile {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
}
.img_profile img {
  display: block;
  width: 100%;
  clip-path: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
}
.img_profile:not(.small):not(.large) {
  width: 60px;
  height: 60px;
}
.img_profile:not(.small):not(.large) .grade {
  bottom: 0;
  right: -8px;
}
.img_profile.small {
  width: 36px;
  height: 36px;
}
.img_profile.small .grade {
  bottom: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
}
.img_profile.large {
  width: 72px;
  height: 72px;
}
.img_profile + span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 80px);
  min-width: 60px;
}
.img_profile .grade {
  position: absolute;
}

.ico_new {
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23F40058'/%3E%3Cpath d='M13.93 5.278V15h-1.746l-4.27-6.177h-.08V15H5.818V5.278h1.773l4.243 6.177h.094V5.278h2z' fill='%23fff'/%3E%3C/svg%3E%0A");
}

.thumb_wrap {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.thumb_wrap .thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

a:hover .thumb_wrap .thumb {
  transform: scale(1.1);
  transition: all 0.4s ease-in-out;
}

.swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-pagination-bullet {
  opacity: 0.5;
  background-color: var(--white);
}

@media screen and (max-width: 767px) {
  .btn_more {
    font-size: 14px;
  }
}
.sticker-wrap {
  position: relative;
  display: block;
}
.sticker-wrap:not(.small) {
  width: 80px;
  height: 80px;
}
.sticker-wrap.small {
  width: 50px;
  height: 50px;
}
.sticker-wrap img {
  display: block;
}
.sticker-wrap .btn_del_sticker {
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 22px;
  height: 22px;
  background-image: url("../img/btn_del_sticker.svg");
}

.sub_tab ul {
  display: flex;
  align-items: center;
  margin-top: 26px;
  margin-bottom: 53px;
  gap: 24px;
}
.sub_tab ul li {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 24px;
  font-weight: 600;
  text-align: left;
  color: var(--gray-3);
}
.sub_tab ul li.current {
  color: var(--black);
}

@media screen and (max-width: 1199px) {
  .sub_tab {
    padding-right: 20px;
    overflow: auto hidden;
  }
  .sub_tab ul {
    width: fit-content;
    margin-top: 36px;
    margin-bottom: 36px;
    padding-right: 40px;
    gap: 18px;
  }
  .sub_tab ul li {
    font-size: 16px;
  }
  .sub_tab + .board.list {
    border-top: solid 1px var(--line-gray);
  }
}
.ico_my {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 37px;
  height: 24px;
  gap: 10px;
  padding: 0 8px;
  border-radius: 100px;
  background-color: var(--gold-1);
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
}

@media screen and (max-width: 1199px) {
  .ico_my {
    height: 22px;
  }
}
.shop-item .img-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.shop-item .text_wrap .title.large .tit {
  font-size: 20px;
  font-weight: 600;
}
.shop-item .info_wrap .info.purchase {
  width: 100%;
}
.shop-item .info_wrap .info.purchase li {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shop-item .info_wrap .info.purchase li .dt {
  color: #4B5056;
  font-weight: 400;
}
.shop-item .info_wrap .info.purchase li strong {
  font-weight: 600;
}
.shop-item .info_wrap .info.purchase li strong.limit {
  color: #F40058;
}
.shop-item .price {
  text-align: right;
}
.shop-item .price strong {
  font-size: 36px;
  font-weight: 600;
}
.shop-item .price .unit {
  font-size: 30px;
  font-weight: 700;
}

.fc-pink {
  color: #f40058;
}

select.select-deflut {
  appearance: none;
  -webkit-appearance: none;
  min-width: 160px;
  padding: 0 20px;
  height: 54px;
  font-weight: 600;
  border: 1px solid #E0E2E4;
  background: #FFF;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16 7-6 6-6-6' stroke='%23000' stroke-width='1.2' stroke-miterlimit='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 16px);
  background-size: 20px;
}

/* 메인 */
.quick_menu {
  position: fixed;
  bottom: 40px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 60px;
  z-index: 20;
  transition: all 0.45s ease-in-out;
}
.quick_menu a,
.quick_menu button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 60px;
}
.quick_menu a.btn_toggle:after, .quick_menu a.btn_top:after,
.quick_menu button.btn_toggle:after,
.quick_menu button.btn_top:after {
  content: "";
}
.quick_menu a .thumb, .quick_menu a.btn_toggle:after, .quick_menu a.btn_top:after,
.quick_menu button .thumb,
.quick_menu button.btn_toggle:after,
.quick_menu button.btn_top:after {
  display: block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: contain;
}
.quick_menu a.btn_toggle,
.quick_menu button.btn_toggle {
  position: relative;
  background-color: var(--gray-0);
}
.quick_menu a.btn_toggle:after,
.quick_menu button.btn_toggle:after {
  transform: rotate(45deg);
  transition: transform 0.45s ease-in-out;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21V3M12 21V3M3 12h18M3 12h18' stroke='%23fff' stroke-width='1.9'/%3E%3C/svg%3E");
}
.quick_menu a.btn_top,
.quick_menu button.btn_top {
  box-shadow: 2px 2px 20px 0 rgba(25, 25, 25, 0.12);
  background-color: var(--white);
}
.quick_menu a.btn_top:after,
.quick_menu button.btn_top:after {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.929 4.686 6.272 9.343 4.858 7.93l5.657-5.657L11.929.858l1.414 1.414L19 7.93l-1.414 1.414-4.657-4.657V23h-2V4.686z' fill='%23000'/%3E%3C/svg%3E");
}
.quick_menu .quick_list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: auto;
}
.quick_menu .quick_list li a {
  position: relative;
  overflow: visible;
  background-color: var(--gold-1);
}
.quick_menu .quick_list li a > .item {
  display: none;
}
.quick_menu.fold .quick_list {
  overflow: hidden;
  visibility: hidden;
  height: 0;
}
.quick_menu.fold .btn_toggle:after {
  transform: rotate(0);
}

@media screen and (max-width: 1600px) {
  .quick_menu {
    width: 50px;
    height: 50px;
    bottom: 20px;
  }
  .quick_menu .quick_list,
  .quick_menu .btn_toggle {
    display: none;
  }
  .quick_menu .btn_top {
    width: 50px;
    height: 50px;
  }
  .quick_menu .btn_top:after {
    width: 20px;
    height: 20px;
  }
}
@media screen and (max-width: 767px) {
  .quick_menu {
    width: 40px;
    height: 40px;
  }
  .quick_menu .btn_top {
    width: 40px;
    height: 40px;
  }
  .quick_menu .btn_top:after {
    width: 12px;
    height: 12px;
  }
}
.main#COMMUNITYwrap section {
  padding-bottom: 0;
  color: var(--white);
  background-color: var(--black);
}
.main .title {
  color: var(--white);
}
.main .title.small {
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
}
.main .title.medium {
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
}
.main .title.large {
  font-size: 60px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 30px;
}
.main .title.large + p + .btn_more {
  margin-top: 20px;
}
.main .btn_more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--gray-2);
}
.main .btn_more:after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.28 11.161h13.44v1.68H5.28v-1.68z' fill='%23898E94'/%3E%3Cpath d='M12.84 5.281v13.44h-1.68V5.281h1.68z' fill='%23898E94'/%3E%3C/svg%3E");
}
.main .slider_wrap {
  overflow: hidden;
  width: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
}
.main .slider_wrap a {
  display: block;
  width: 100%;
  height: 100%;
  background-size: auto 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.main .slider_wrap .swiper.swiper_banner {
  position: relative;
  overflow: visible;
  width: 100%;
  max-width: 1280px;
}
.main .slider_wrap .swiper.swiper_banner .swiper-slide {
  max-width: 1280px;
  aspect-ratio: 16/9;
}
.main .slider_wrap .swiper.swiper_banner .swiper-slide:not(.swiper-slide-active) {
  opacity: 0.5;
}
.main .slider_wrap .swiper.swiper_banner .swiper-pagination-bullets {
  bottom: 7.2%;
}
.main .slider_wrap .btns,
.main .slider_wrap .swiper-fraction {
  display: flex;
  justify-content: center;
  align-items: center;
}
.main .bg_black {
  background-color: var(--black);
}
.main .bg_black:not(.noti) {
  padding: 100px 0;
}
.main .bg_darkgray {
  background-color: #161616;
  padding: 100px 0;
}
.main .title_wrap {
  padding-bottom: 60px;
}
.main .bg_black.noti {
  padding: 40px 0 120px;
}
.main .bg_black.noti .swiper_notice {
  max-height: 80px;
  padding: 16px 0;
  border-radius: 2px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--white);
  background-color: var(--gold-1);
}
.main .bg_black.noti .swiper_notice .swiper-wrapper {
  transition-timing-function: linear;
  column-gap: 92px;
}
.main .bg_black.noti .swiper_notice .swiper-slide {
  width: fit-content;
  display: flex;
  align-items: center;
  transition: transform 0.3s;
}
.main .bg_black.noti .swiper_notice .swiper-slide a {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.main .bg_black.noti .swiper_notice .swiper-slide a .icon_notice {
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 28px;
  height: 28px;
  background-image: url("../img/icon_notice.svg");
}
.main .bg_black.noti .news {
  width: 100%;
  max-width: 1440px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  margin-top: 80px;
}
.main .bg_black.noti .news > div {
  flex: 1;
  color: var(--gray-2);
}
.main .bg_black.noti .news > div .news_title_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main .bg_black.noti .news > div .news_title_wrap .legend {
  font-size: 15px;
  line-height: 1.6;
}
.main .bg_black.noti .news .list_news {
  margin-top: 52px;
  background-image: linear-gradient(var(--gray-1), var(--gray-1));
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 1px;
}
.main .bg_black.noti .news .list_news li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 84px;
  background-image: linear-gradient(var(--gray-1), var(--gray-1));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 1px;
}
.main .bg_black.noti .news .list_news li .board_title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--white);
}
.main .bg_black.noti .news .list_news li .board_title:hover > span {
  text-decoration: underline;
}
.main .bg_black.noti .news .news_game .list_news li {
  gap: 12px;
  padding: 0 30px;
}
.main .bg_black.noti .news .news_game .list_news li .board_cate {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 107px;
  height: 28px;
  padding: 0 15px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: normal;
  color: var(--white);
}
.main .bg_black.noti .news .news_game .list_news li .board_cate.notice {
  background-color: #5f657b;
}
.main .bg_black.noti .news .news_game .list_news li .board_cate.event {
  background-color: #908989;
}
.main .bg_black.noti .news .news_game .list_news li .board_cate.letter {
  background-color: #3f5656;
}
.main .bg_black.noti .news .news_game .list_news li .board_title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 24px - 107px - 132px);
}
.main .bg_black.noti .news .news_game .list_news li .board_title .cate {
  margin-right: 2px;
  font-weight: 500;
  color: var(--gold-2);
}
.main .bg_black.noti .news .news_game .list_news li .time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 135px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--gray-2);
}
.main .bg_black.noti .news .news_game .list_news li .time:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2.5a6 6 0 1 0 6 6 6.006 6.006 0 0 0-6-6zm2.854 3.854-2.5 2.5a.5.5 0 0 1-.708-.708l2.5-2.5a.5.5 0 1 1 .708.708z' fill='%23898E94'/%3E%3C/svg%3E");
}
.main .bg_black.noti .news .world_ranking .list_news li {
  gap: 0;
}
.main .bg_black.noti .news .world_ranking .list_news li .rank {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 110px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
}
.main .bg_black.noti .news .world_ranking .list_news li:nth-of-type(1) .rank:before, .main .bg_black.noti .news .world_ranking .list_news li:nth-of-type(2) .rank:before, .main .bg_black.noti .news .world_ranking .list_news li:nth-of-type(3) .rank:before {
  content: "";
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 20px;
  height: 27px;
}
.main .bg_black.noti .news .world_ranking .list_news li:nth-of-type(1) .rank:before {
  background-image: url("../img/ranking_1.svg");
}
.main .bg_black.noti .news .world_ranking .list_news li:nth-of-type(2) .rank:before {
  background-image: url("../img/ranking_2.svg");
}
.main .bg_black.noti .news .world_ranking .list_news li:nth-of-type(3) .rank:before {
  background-image: url("../img/ranking_3.svg");
}
.main .bg_black.noti .news .world_ranking .list_news li .board_title {
  display: flex;
  align-items: center;
  width: calc(100% - 110px - 122px);
  gap: 20px;
}
.main .bg_black.noti .news .world_ranking .list_news li .board_title .img_profile + span {
  width: 100%;
  height: 29px;
  max-width: 303px;
}
.main .bg_black.noti .news .world_ranking .list_news li .server {
  width: 122px;
  font-size: 16px;
  text-align: center;
}
.main .bg_black.noti .news .world_ranking .list_news.top10 {
  position: relative;
  overflow-y: auto;
  height: 420px;
}
.main .bg_black.noti .news .world_ranking .list_news.my_rank {
  margin-top: 0;
}
.main .bg_black.noti .news .world_ranking .list_news.my_rank li {
  background-color: var(--gold-2);
  color: var(--white);
}
.main .bg_black.noti .news .world_ranking .list_news.my_rank li .no-data {
  width: 100%;
  text-align: center;
}
.main .bg_black.noti .mmorpg {
  margin-top: 230px;
}
.main .bg_black.noti .mmorpg p:not(.launch) {
  display: flex;
  align-items: flex-end;
  height: 120px;
  font-size: 80px;
  font-weight: 800;
  line-height: 1.5;
}
.main .bg_black.noti .mmorpg p:not(.launch) img {
  display: block;
}
.main .bg_black.noti .mmorpg p:not(.launch) .img01 {
  margin: 0 0 24px -27px;
  width: 328px;
}
.main .bg_black.noti .mmorpg p:not(.launch) .img02 {
  margin: 0 32px 19px 0;
  width: 368px;
}
.main .bg_black.noti .mmorpg p:not(.launch) + p {
  margin-top: 30px;
}
.main .bg_black.noti .mmorpg p:not(.launch) + p .only-mo {
  display: none;
}
.main .bg_black.noti .mmorpg p:not(.launch) span {
  position: relative;
}
.main .bg_black.noti .mmorpg p:not(.launch) span + span {
  margin-left: 28px;
}
.main .bg_black.noti .mmorpg p.launch {
  margin-top: 30px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--gray-2);
}
.main .bg_story {
  position: relative;
  background: var(--black) url("../img/bg_story.png") no-repeat center top;
  background-size: cover;
  padding-top: 180px;
  padding-bottom: 180px;
}
.main .bg_story:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
}
.main .bg_story > .container {
  position: relative;
}
.main .bg_story > .container .title {
  font-size: 60px;
  font-weight: 800;
  line-height: 1.3;
}
.main .bg_story .history-wrap,
.main .bg_story .history-wrap .container,
.main .bg_story .swiper_history {
  overflow: visible;
}
.main .bg_story .history-wrap .btns_wrap {
  margin-top: -48px;
}
.main .bg_story .history-wrap .swiper_history {
  margin-top: 100px;
}
.main .bg_story .img-wrap {
  width: 100%;
}
.main .bg_story .text-wrap {
  margin-top: 20px;
  padding: 0 20px;
}
.main .bg_story .text-wrap p.thumb-title {
  margin-bottom: 20px;
  font-size: 28px;
  font-weight: 600;
}
.main .bg_story .text-wrap p:not(.thumb-title) {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.8px;
}
.main .bg_black.key_contents .accordion .item {
  position: relative;
  display: block;
  height: 240px;
  padding: 60px 0 0 80px;
  border-bottom: solid 1px var(--gray-1);
  transition: height 1s;
}
.main .bg_black.key_contents .accordion .item:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 11%, rgba(0, 0, 0, 0) 89%);
}
.main .bg_black.key_contents .accordion .item .text_wrap {
  display: flex;
  gap: 20px;
  position: relative;
}
.main .bg_black.key_contents .accordion .item .text_wrap .title {
  font-size: 54px;
  font-weight: bold;
  line-height: 1;
}
.main .bg_black.key_contents .accordion .item .text_wrap .text {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
}
.main .bg_black.key_contents .accordion .item .img_wrap {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.main .bg_black.key_contents .accordion .item .img_wrap img {
  max-height: 100%;
}
.main .bg_black.key_contents .accordion .item .img_wrap .only-mo {
  display: none;
}
.main .bg_black.key_contents .accordion .item:nth-child(even) .text_wrap {
  flex-direction: row-reverse;
}
.main .bg_black.key_contents .accordion .item:nth-child(even) .img_wrap {
  right: auto;
  left: 0;
}
.main .bg_black.key_contents .accordion .item:hover {
  height: 450px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.main .bg_black.key_contents .accordion .item:hover:nth-child(1) {
  background-image: url("../img/bg_key01.jpg");
}
.main .bg_black.key_contents .accordion .item:hover:nth-child(2) {
  background-image: url("../img/bg_key02.jpg");
}
.main .bg_black.key_contents .accordion .item:hover:nth-child(3) {
  background-image: url("../img/bg_key03.jpg");
}
.main .bg_darkgray.game_guide .swiper-wrapper li a {
  overflow: hidden;
  display: block;
}
.main .bg_darkgray.game_guide .swiper-wrapper li .thumb_wrap {
  width: 100%;
  aspect-ratio: 1/0.6318;
}
.main .bg_darkgray.game_guide .swiper-wrapper li .board_title {
  margin-top: 24px;
  font-size: 20px;
  line-height: 1.6;
}
.main .bg_black.vedio .list_video {
  padding-top: 30px;
}
.main .bg_black.vedio .list_video .btns_wrap {
  top: -82px;
}
.main .bg_black.vedio .list_video .swiper_video {
  height: 261px;
}
.main .bg_black.vedio .list_video .swiper-slide a:hover {
  position: relative;
}
.main .bg_black.vedio .list_video .swiper-slide a:hover:before, .main .bg_black.vedio .list_video .swiper-slide a:hover:after {
  content: "";
  position: absolute;
}
.main .bg_black.vedio .list_video .swiper-slide a:hover:before {
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
.main .bg_black.vedio .list_video .swiper-slide a:hover:after {
  top: 50%;
  left: 50%;
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 60px;
  height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='29.25' stroke='%23fff' stroke-width='1.5'/%3E%3Cpath d='M41.275 29.244a1.45 1.45 0 0 1 0 2.512L23.872 41.803a1.45 1.45 0 0 1-2.175-1.255V20.452a1.45 1.45 0 0 1 2.175-1.256l17.403 10.048z' fill='%23fff'/%3E%3C/svg%3E%0A");
  transform: translate(-50%, -50%);
}
.main .bg_story .history-wrap,
.main .bg_black.vedio .list_video {
  position: relative;
}
.main .bg_story .history-wrap .btns_wrap,
.main .bg_black.vedio .list_video .btns_wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}
.main .bg_story .history-wrap .btns_wrap button,
.main .bg_black.vedio .list_video .btns_wrap button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background-color: transparent;
  border: solid 1px var(--white);
  border-radius: 48px;
}
.main .bg_story .history-wrap .btns_wrap button:after,
.main .bg_black.vedio .list_video .btns_wrap button:after {
  content: "";
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='kmktd9gfma' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='16' height='16'%3E%3Cpath fill='%23D9D9D9' stroke='%23000' stroke-width='1.5' d='M15.25 15.25H.75V.75h14.5z'/%3E%3C/mask%3E%3Cg mask='url(%23kmktd9gfma)'%3E%3Cpath d='m9.656 13.547-5.539-5.54 5.54-5.538' stroke='%23fff' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E");
}
.main .bg_story .history-wrap .btns_wrap button.swiper_button_next_2:after,
.main .bg_black.vedio .list_video .btns_wrap button.swiper_button_next_2:after {
  transform: rotate(180deg);
}
.main .bg_story .history-wrap .btns_wrap button:hover,
.main .bg_black.vedio .list_video .btns_wrap button:hover {
  background-color: var(--white);
}
.main .bg_story .history-wrap .btns_wrap button:hover:after,
.main .bg_black.vedio .list_video .btns_wrap button:hover:after {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='kmktd9gfma' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='16' height='16'%3E%3Cpath fill='%23D9D9D9' stroke='%23000' stroke-width='1.5' d='M15.25 15.25H.75V.75h14.5z'/%3E%3C/mask%3E%3Cg mask='url(%23kmktd9gfma)'%3E%3Cpath d='m9.656 13.547-5.539-5.54 5.54-5.538' stroke='%23000' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E");
}
.main .bg_story .history-wrap .swiper-slide,
.main .bg_black.vedio .list_video .swiper-slide {
  position: relative;
  cursor: pointer;
}
.main .bg_story .history-wrap .swiper-slide a,
.main .bg_black.vedio .list_video .swiper-slide a {
  display: block;
  width: 100%;
  height: 100%;
}
.main .bg_story .history-wrap .swiper-slide a img,
.main .bg_black.vedio .list_video .swiper-slide a img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main .bg_story .history-wrap .swiper-horizontal > .swiper-pagination-bullets,
.main .bg_story .history-wrap .swiper-pagination-bullets.swiper-pagination-horizontal,
.main .bg_story .history-wrap .swiper-pagination-custom,
.main .bg_story .history-wrap .swiper-pagination-fraction,
.main .bg_black.vedio .list_video .swiper-horizontal > .swiper-pagination-bullets,
.main .bg_black.vedio .list_video .swiper-pagination-bullets.swiper-pagination-horizontal,
.main .bg_black.vedio .list_video .swiper-pagination-custom,
.main .bg_black.vedio .list_video .swiper-pagination-fraction {
  display: none;
}
.main .bg_darkgray.archive .archive_wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas: "guide guide character1 character2" "guide guide boss boss";
}
.main .bg_darkgray.archive .archive_wrap > div {
  position: relative;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.main .bg_darkgray.archive .archive_wrap > div .mask {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.3;
  background-color: var(--black);
}
.main .bg_darkgray.archive .archive_wrap > div p,
.main .bg_darkgray.archive .archive_wrap > div a {
  position: relative;
}
.main .bg_darkgray.archive .archive_wrap > div .img_wrap {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.main .bg_darkgray.archive .archive_wrap > div .img_wrap img {
  display: block;
  width: auto;
  max-width: 400%;
  height: 100%;
  transform: scale(1.1);
  transition: all 0.7s ease-in-out;
}
.main .bg_darkgray.archive .archive_wrap > div .label {
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  height: 24px;
  border: solid 1px var(--white);
  font-size: 14px;
}
.main .bg_darkgray.archive .archive_wrap > div a {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.6;
}
.main .bg_darkgray.archive .archive_wrap > div a.btn_guide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 148px;
  border-top: solid 1px rgba(255, 255, 255, 0.4);
}
.main .bg_darkgray.archive .archive_wrap > div a.btn_guide:after {
  content: "";
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 25px;
  height: 25px;
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='26' viewBox='0 0 25 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9 5.5 7.4 7.4L9 20.3' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E%0A");
}
.main .bg_darkgray.archive .archive_wrap > div:hover .img_wrap img {
  transform: scale(1);
}
.main .bg_darkgray.archive .archive_wrap .guide {
  grid-area: guide;
}
.main .bg_darkgray.archive .archive_wrap .guide .img_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.main .bg_darkgray.archive .archive_wrap [class^=character] {
  aspect-ratio: 1/1.022;
  background-image: linear-gradient(to bottom, #4a4a4a, #262626);
}
.main .bg_darkgray.archive .archive_wrap [class^=character] .img_wrap {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.main .bg_darkgray.archive .archive_wrap [class^=character] .img_wrap img {
  margin-left: -38.88%;
}
.main .bg_darkgray.archive .archive_wrap .character1 {
  grid-area: character1;
}
.main .bg_darkgray.archive .archive_wrap .character2 {
  grid-area: character2;
}
.main .bg_darkgray.archive .archive_wrap .boss {
  grid-area: boss;
}
.main .banner_download {
  position: relative;
  padding: 190px 0;
  background: var(--black) url("../img/banner_download.jpg") no-repeat center center;
  background-size: cover;
}
.main .banner_download:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to top, var(--black) 0%, rgba(0, 0, 0, 0.1) 100%);
}
.main .banner_download > p, .main .banner_download > h2, .main .banner_download > div {
  position: relative;
  text-align: center;
}
.main .banner_download .text.small {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
}
.main .banner_download .title {
  margin-top: 8px;
}
.main .banner_download .text.large {
  margin-top: 32px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.6;
}
.main .banner_download .btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 60px;
}
.main .banner_download .btns .btn {
  height: 56px;
}
.main .banner_download .btns .btn.start {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 200px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--white);
  background-image: linear-gradient(300deg, var(--gold-1) 26%, #8b7359 73%);
}
.main .banner_download .btns .btn.start i {
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 24px;
  height: 24px;
}
.main .banner_download .btns .btn:not(.start) {
  display: block;
}
.main .banner_download .btns .btn:not(.start) img {
  height: inherit;
}

@media screen and (min-width: 1200px) {
  .main .slider_wrap .swiper_bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    z-index: 20;
  }
  .main .slider_wrap .swiper_bar:before,
  .main .slider_wrap .swiper_bar .swiper_nav {
    transition: top 250ms;
  }
  .main .slider_wrap .swiper_bar:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .main .slider_wrap .swiper_bar .swiper_nav {
    position: relative;
    top: 0;
    width: 100%;
    max-width: 1440px;
    height: 100%;
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
  }
  .main .slider_wrap .swiper_bar .swiper_nav.flex-center .swiper-wrapper {
    justify-content: center;
  }
  .main .slider_wrap .swiper_bar .swiper_nav .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 100%;
    padding: 8px 12px 0;
    border-bottom: 1px solid transparent;
  }
  .main .slider_wrap .swiper_bar .swiper_nav .swiper-slide span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .main .slider_wrap .swiper_bar .swiper_nav .swiper-slide-thumb-active {
    position: relative;
    color: var(--gold-2);
  }
  .main .slider_wrap:not(:hover):not(:focus) .swiper_bar:before,
  .main .slider_wrap:not(:hover):not(:focus) .swiper_bar .swiper_nav {
    top: 100px;
  }
  .main .slider_wrap .btns {
    position: absolute;
    bottom: 16px;
    left: calc(50% + 720px - 152px);
    width: 152px;
    height: 63px;
    border-radius: 50px;
    border: 1px solid rgba(18, 20, 5, 0.6);
    border-image-slice: 1;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), linear-gradient(298deg, rgba(18, 20, 5, 0.9) 15%, rgb(75, 75, 75) 75%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    z-index: 20;
  }
  .main .slider_wrap .btns:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
    background-origin: border-box;
    background-clip: content-box, border-box;
  }
  .main .slider_wrap .btns .swiper-fraction,
  .main .slider_wrap .btns .swiper_button_prev,
  .main .slider_wrap .btns .swiper_button_next {
    position: relative;
  }
  .main .slider_wrap .btns .swiper-fraction {
    width: 64px;
    font-size: 18px;
    line-height: 1.3;
    color: var(--white);
  }
  .main .slider_wrap .btns .swiper-fraction .total:before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 7px;
    border-radius: 50px;
    background-color: var(--white);
    vertical-align: middle;
  }
  .main .slider_wrap .btns .swiper-fraction .current {
    color: var(--gold-2);
  }
  .main .slider_wrap .btns .swiper_button_prev,
  .main .slider_wrap .btns .swiper_button_next {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='q7qeg9tzfa' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='21'%3E%3Cpath transform='rotate(180 20 20.5)' fill='%23D9D9D9' d='M20 20.5h20v20H20z'/%3E%3C/mask%3E%3Cg mask='url(%23q7qeg9tzfa)'%3E%3Cpath d='m12.07 17.441-6.924-6.923 6.924-6.924' stroke='%23fff' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
  }
  .main .slider_wrap .btns .swiper_button_prev:after,
  .main .slider_wrap .btns .swiper_button_next:after {
    display: none;
  }
  .main .slider_wrap .btns .swiper_button_next {
    transform: rotate(180deg);
  }
  .main .slider_wrap .swiper.swiper_banner .swiper-pagination-bullets {
    opacity: 0;
  }
  .main .bg_black.noti .news .list_news {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 0 48px;
  }
  .main .bg_black.noti .news .list_news li {
    width: 100%;
    max-width: 696px;
  }
  .main .bg_darkgray.game_guide .swiper-wrapper {
    flex-wrap: wrap;
    gap: 80px 24px;
  }
  .main .bg_darkgray.game_guide .swiper-wrapper li {
    width: calc((100% - 72px) / 4) !important;
  }
  .main .bg_darkgray.game_guide .swiper-wrapper li .board_title {
    margin-top: 24px;
    font-size: 20px;
    line-height: 1.6;
  }
  .main .bg_darkgray.game_guide .swiper-pagination {
    display: none;
  }
}
@media screen and (max-width: 1199px) {
  .main .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .main #COMMUNITYcontent {
    padding-top: 68px;
  }
  .main#COMMUNITYwrap .board.search {
    padding-top: 68px;
  }
  .main#COMMUNITYwrap .search_view .paging {
    margin-bottom: 0;
  }
  .main .slider_wrap {
    width: auto;
  }
  .main .slider_wrap:before {
    display: none;
  }
  .main .slider_wrap:after {
    display: none;
  }
  .main .slider_wrap .swiper_nav {
    display: none;
  }
  .main .slider_wrap .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .main .slider_wrap .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: #fff;
    margin: 0 6px;
    bottom: 20px;
  }
  .main .slider_wrap .btns {
    display: none !important;
  }
  .main .title.small {
    font-size: 3.333vw;
  }
  .main .bg_black.noti {
    padding: 2.167vw 0;
  }
  .main .bg_black.noti .news {
    flex-direction: column;
  }
  .main .bg_black.noti .news > div {
    width: 100%;
  }
  .main .bg_black.noti .news .list_news {
    margin-top: 3.611vw;
  }
  .main .bg_black.noti .news .news_game .list_news li {
    height: fit-content;
    padding: 20px;
  }
  .main .bg_black.noti .news .news_game .list_news li .board_title {
    width: calc(100% - 40px - 24px - 107px - 132px);
  }
  .main .bg_black.noti .news .world_ranking .list_news li .rank {
    width: 152px;
  }
  .main .bg_black.noti .mmorpg {
    margin-top: 17.969vw;
  }
  .main .bg_black.noti .mmorpg p:not(.launch) {
    font-size: 6.25vw;
    height: 9.375vw;
  }
  .main .bg_black.noti .mmorpg p:not(.launch) .img01 {
    width: 25.625vw;
    height: auto;
    margin: 0 0 1.875vw -2.109vw;
  }
  .main .bg_black.noti .mmorpg p:not(.launch) .img02 {
    width: 28.75vw;
    margin: 0 2.5vw 1.484vw 0;
  }
  .main .bg_black.noti .mmorpg p:not(.launch) + p {
    margin-top: 2.344vw;
  }
  .main .bg_black.noti .mmorpg p:not(.launch) span + span {
    margin-left: 2.188vw;
  }
  .main .bg_story .text-wrap p:not(.thumb-title) {
    font-size: 16px;
  }
  .main .bg_story .text-wrap p.thumb-title {
    margin-bottom: 15px;
    font-size: 20px;
  }
  .main .bg_darkgray.game_guide .swiper {
    padding-bottom: 38px;
    overflow: visible;
  }
  .main .bg_darkgray.archive .archive_wrap > div a {
    font-size: 20px;
  }
}
@media screen and (max-width: 767px) {
  .main [class^=board_area_] .title {
    text-align: center;
    font-size: 22px;
  }
  .main .title.small {
    font-size: 24px;
  }
  .main .title.large {
    font-size: 30px;
    line-height: 1.6;
    margin-bottom: 22px;
  }
  .main .title.large + p + .btn_more {
    margin-top: 10px;
  }
  .main .title_wrap {
    padding-bottom: 32px;
  }
  .main .btn_more {
    gap: 2px;
  }
  .main .slider_wrap .swiper_nav {
    display: none;
  }
  .main .bg_black:not(.noti),
  .main .bg_darkgray {
    padding: 90px 0;
  }
  .main .bg_black.noti {
    padding: 29px 0 100px;
  }
  .main .bg_black.noti .swiper_notice {
    position: relative;
    font-size: 14px;
    min-height: 46px;
  }
  .main .bg_black.noti .swiper_notice .swiper-wrapper {
    column-gap: 50px;
  }
  .main .bg_black.noti .swiper_notice:after {
    content: "";
    position: absolute;
    top: 2px;
    display: block;
    width: 53px;
    height: calc(100% - 4px);
    background: var(--gold-1) url(../img/icon_notice.svg) no-repeat 20px 50%;
    background-size: 28px 28px;
    z-index: 2;
  }
  .main .bg_black.noti .swiper_notice .swiper-slide a .icon_notice {
    display: none;
  }
  .main .bg_black.noti .news > div .news_title_wrap .legend {
    font-size: 12px;
  }
  .main .bg_black.noti .news .news_game .list_news li {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
  }
  .main .bg_black.noti .news .news_game .list_news li .board_title {
    width: 100%;
    margin-top: 6px;
    font-size: 14px;
  }
  .main .bg_black.noti .news .world_ranking .list_news li .rank {
    width: 73px;
    font-size: 16px;
  }
  .main .bg_black.noti .news .world_ranking .list_news li .board_title {
    width: calc(100% - 73px - 66px);
    font-size: 14px;
  }
  .main .bg_black.noti .news .world_ranking .list_news li .board_title .img_profile {
    width: 52px;
    height: 52px;
  }
  .main .bg_black.noti .news .world_ranking .list_news li .board_title .img_profile + span {
    width: calc(100% - 72px);
  }
  .main .bg_black.noti .news .world_ranking .list_news li .server {
    width: 66px;
  }
  .main .bg_black.noti .mmorpg {
    position: relative;
    margin-top: 26.667vw;
    padding-bottom: 6.8vw;
  }
  .main .bg_black.noti .mmorpg p:not(.launch) {
    font-size: 8vw;
    height: fit-content;
    display: block;
  }
  .main .bg_black.noti .mmorpg p:not(.launch) .img01 {
    position: absolute;
    right: 0;
    top: 20.533vw;
    width: 58.133vw;
    margin: 0;
  }
  .main .bg_black.noti .mmorpg p:not(.launch) .img02 {
    display: none;
  }
  .main .bg_black.noti .mmorpg p:not(.launch) + p {
    margin-top: 0;
  }
  .main .bg_black.noti .mmorpg p:not(.launch) + p span + span {
    display: block;
    width: 100%;
    margin-left: 0;
  }
  .main .bg_black.noti .mmorpg p.launch {
    margin-top: 4vw !important;
    font-size: 3.733vw;
  }
  .main .bg_story {
    padding-top: 90px;
    padding-bottom: 90px;
  }
  .main .bg_story > .container .title {
    font-size: 30px;
  }
  .main .bg_story .history-wrap .btns_wrap {
    display: none;
  }
  .main .bg_story .history-wrap .swiper_history {
    margin-top: 30px;
    padding-bottom: 30px;
  }
  .main .bg_story .history-wrap .swiper-horizontal > .swiper-pagination-bullets,
  .main .bg_story .history-wrap .swiper-pagination-bullets.swiper-pagination-horizontal {
    display: block;
  }
  .main .bg_black.key_contents .accordion {
    margin-left: -20px;
    margin-right: -20px;
  }
  .main .bg_black.key_contents .accordion .item {
    height: 328px;
    padding: 30px 20px 0;
  }
  .main .bg_black.key_contents .accordion .item:nth-child(even) .text_wrap {
    flex-direction: column;
    align-items: flex-end;
  }
  .main .bg_black.key_contents .accordion .item .text_wrap {
    flex-direction: column;
    gap: 10px;
  }
  .main .bg_black.key_contents .accordion .item .text_wrap .title {
    font-size: 32px;
  }
  .main .bg_black.key_contents .accordion .item .text_wrap .text {
    font-size: 16px;
  }
  .main .bg_black.key_contents .accordion .item .img_wrap {
    height: 297px;
  }
  .main .bg_black.key_contents .accordion .item .img_wrap .only-pc {
    display: none;
  }
  .main .bg_black.key_contents .accordion .item .img_wrap .only-mo {
    display: block;
  }
  .main .bg_black.key_contents .accordion .item:hover {
    height: 448px;
  }
  .main .bg_darkgray.game_guide .swiper {
    margin-left: -20px;
    margin-right: -20px;
  }
  .main .bg_darkgray.game_guide .swiper .swiper-wrapper li .board_title {
    margin-top: 12px;
    padding-left: 20px;
    font-size: 14px;
  }
  .main .bg_darkgray.game_guide .swiper .swiper-horizontal > .swiper-pagination-bullets,
  .main .bg_darkgray.game_guide .swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
  .main .bg_darkgray.game_guide .swiper .swiper-pagination-custom, .main .bg_darkgray.game_guide .swiper .swiper-pagination-fraction {
    bottom: 0;
  }
  .main .bg_black.vedio .list_video {
    margin-left: -20px;
    margin-right: -20px;
    padding-top: 15px;
  }
  .main .bg_black.vedio .list_video .swiper_video {
    height: fit-content;
    padding-bottom: 28px;
  }
  .main .bg_story .container .history-wrap .swiper-horizontal > .swiper-pagination-bullets,
  .main .bg_story .container .history-wrap .swiper-pagination-bullets.swiper-pagination-horizontal,
  .main .bg_story .container .history-wrap .swiper-pagination-custom, .main .bg_story .container .history-wrap .swiper-pagination-fraction,
  .main .bg_black.vedio .list_video .swiper-horizontal > .swiper-pagination-bullets,
  .main .bg_black.vedio .list_video .swiper-pagination-bullets.swiper-pagination-horizontal,
  .main .bg_black.vedio .list_video .swiper-pagination-custom,
  .main .bg_black.vedio .list_video .swiper-pagination-fraction {
    display: flex;
    bottom: 0;
  }
  .main .bg_story .container .history-wrap .btns_wrap,
  .main .bg_black.vedio .list_video .btns_wrap {
    display: none;
  }
  .main .bg_darkgray.archive .archive_wrap {
    display: flex;
    flex-direction: column;
    margin-left: -20px;
    margin-right: -20px;
  }
  .main .bg_darkgray.archive .archive_wrap .guide {
    height: 735px;
  }
  .main .bg_darkgray.archive .archive_wrap [class^=character] {
    aspect-ratio: 1/1;
  }
  .main .bg_darkgray.archive .archive_wrap [class^=character] .img_wrap {
    width: 100%;
    aspect-ratio: 1/1;
  }
  .main .bg_darkgray.archive .archive_wrap > div {
    overflow: hidden;
  }
  .main .bg_darkgray.archive .archive_wrap > div.boss {
    width: 100%;
    aspect-ratio: 1/1;
  }
  .main .bg_darkgray.archive .archive_wrap > div.boss .img_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 1/1;
  }
  .main .banner_download {
    background-position: 20% 50%;
    padding: 148px 0;
  }
  .main .banner_download .text.small {
    font-size: 16px;
  }
  .main .banner_download .title.small {
    font-size: 30px !important;
  }
  .main .banner_download .btns {
    flex-direction: column;
  }
  .main .banner_download .btns .btn {
    width: 280px;
  }
}
@media screen and (max-width: 430px) {
  .main .bg_black.noti .news .list_news {
    margin-left: -20px;
    margin-right: -20px;
  }
  .main .world_ranking .list_news li {
    padding-right: 20px;
  }
  .main .bg_story .container .list_story li {
    width: 100%;
    float: none;
  }
  .main .bg_story .container .list_story li:nth-child(2) {
    margin-top: 60px;
  }
  .main .bg_story .container .list_story + .btn_detail {
    width: 280px;
    font-size: 14px;
  }
  .main .bg_story .container .list_story + .btn_detail svg {
    width: 20px;
    height: 20px;
  }
}
/* 메인배너 스와이퍼 */
.swiper_banner .swiper-button-next,
.swiper_banner .swiper-button-prev {
  width: 80px;
  height: 80px;
  top: calc(50% - 50px);
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='80' height='80' rx='40' fill='white' fill-opacity='0.1'/%3E%3Crect x='0.5' y='0.5' width='79' height='79' rx='39.5' stroke='url(%23paint0_linear_2555_28986)' stroke-opacity='0.5'/%3E%3Cpath d='M41.9714 28.3105C41.5048 27.8818 40.7663 27.8992 40.3218 28.3492C39.8774 28.7992 39.8955 29.5115 40.362 29.9401L50.0864 38.8745H27.1667C26.5223 38.8745 26 39.3784 26 39.9999C26 40.6213 26.5223 41.1252 27.1667 41.1252H50.0865L40.362 50.0598C39.8955 50.4884 39.8774 51.2008 40.3218 51.6508C40.7663 52.1008 41.5048 52.1182 41.9714 51.6895L53.5119 41.0865C53.7746 40.8451 53.9302 40.537 53.9784 40.217C53.9925 40.1468 54 40.0741 54 39.9999C54 39.9256 53.9925 39.8528 53.9782 39.7825C53.93 39.4626 53.7744 39.1548 53.5119 38.9136L41.9714 28.3105Z' fill='white'/%3E%3C/svg%3E");
  backdrop-filter: blur(20px);
}
.swiper_banner .swiper-button-next:hover,
.swiper_banner .swiper-button-prev:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='80' height='80' rx='40' fill='%23A48869'/%3E%3Crect x='0.5' y='0.5' width='79' height='79' rx='39.5' stroke='url(%23paint0_linear_2555_28994)' stroke-opacity='0.5'/%3E%3Cpath d='M41.9714 28.3105C41.5048 27.8818 40.7663 27.8992 40.3218 28.3492C39.8774 28.7992 39.8955 29.5115 40.362 29.9401L50.0864 38.8745H27.1667C26.5223 38.8745 26 39.3784 26 39.9999C26 40.6213 26.5223 41.1252 27.1667 41.1252H50.0865L40.362 50.0598C39.8955 50.4884 39.8774 51.2008 40.3218 51.6508C40.7663 52.1008 41.5048 52.1182 41.9714 51.6895L53.5119 41.0865C53.7746 40.8451 53.9302 40.537 53.9784 40.217C53.9925 40.1468 54 40.0741 54 39.9999C54 39.9256 53.9925 39.8528 53.9782 39.7825C53.93 39.4626 53.7744 39.1548 53.5119 38.9136L41.9714 28.3105Z' fill='white'/%3E%3C/svg%3E%0A");
}
.swiper_banner .swiper-button-next:after,
.swiper_banner .swiper-button-prev:after {
  opacity: 0;
  font-size: 0;
}
.swiper_banner .swiper-button-next {
  right: -100px;
}
.swiper_banner .swiper-button-prev {
  left: -100px;
  transform: scaleX(-1);
}

@media screen and (max-width: 1199px) {
  .swiper_banner .swiper-button-next,
  .swiper_banner .swiper-button-prev {
    display: none;
  }
}
/* 폼요소 공통 */
.btn {
  white-space: nowrap;
}
.btn.black {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: background-color 0.2s;
  background-color: var(--black);
  color: var(--white);
}
.btn.light {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: background-color 0.2s;
  background-color: var(--gray-7);
  color: var(--black);
  box-shadow: 0 0 0 1px inset var(--gray-5);
}
.btn.gold {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: background-color 0.2s;
  background-color: var(--gold-1);
  color: var(--white);
}
.btn.gold:hover {
  background-color: var(--gold-2);
}
.btn.gold:disabled {
  background-color: var(--gold-3);
}
.btn.bdr {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: background-color 0.2s;
  background-color: var(--white);
  color: var(--black);
  box-shadow: 0 0 0 1px inset var(--black);
}
.btn.xsmall {
  height: 31px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
}
.btn.large {
  height: 60px;
  padding: 0 30px;
  font-size: 16px;
  font-weight: 600;
}

/* checkbox & radio*/
.check-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: min-content;
}

input.checkbox,
input.radio {
  position: relative;
  overflow: hidden;
  width: 20px;
  height: 20px;
  margin: 0;
  vertical-align: text-bottom;
}
input.checkbox + .label,
input.radio + .label {
  font-weight: 500;
}
input.checkbox:before,
input.radio:before {
  content: "";
  display: block;
  width: inherit;
  height: inherit;
  box-sizing: border-box;
  border: 1px solid var(--line-gray);
  transition: 0.1s border-color ease;
}
input.checkbox:after,
input.radio:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  display: block;
  transition: all 0.2s ease-in-out;
}
input.checkbox:checked:not([disabled]):before,
input.radio:checked:not([disabled]):before {
  border-color: var(--gold-1);
}
input.checkbox:checked:after,
input.radio:checked:after {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

input.checkbox:before {
  border-radius: 2px;
}
input.checkbox:after {
  width: inherit;
  height: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect width='20' height='20' rx='2' fill='%23A48869'/%3E%3Cpath d='M5 9.294 8.75 13 15 6' stroke='%23B3B3B3' stroke-width='1.5'/%3E%3Cpath d='M5 9.294 8.75 13 15 6' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: cover;
}
input.checkbox:checked:disabled:after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' rx='2' /%3E%3Cpath d='M5 9.294 8.75 13 15 6' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
}
input.checkbox:disabled:before {
  background-color: var(--line-gray);
}

input.radio:before, input.radio:after {
  border-radius: 20px;
}
input.radio:after {
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%) scale(0);
}
input.radio:checked:after {
  background-color: var(--gold-1);
}
input.radio:disabled:after {
  background-color: var(--line-gray);
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

.check-wrap input.checkbox {
  margin-top: 2px;
  margin-bottom: 2px;
}
.check-wrap input.checkbox + label {
  max-width: calc(100% - 20px - 12px);
}

.select_group {
  display: flex;
  flex-wrap: wrap;
}
.select_group li {
  position: relative;
}
.select_group li input.checkbox {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  z-index: 2;
}
.select_group li input.checkbox:before, .select_group li input.checkbox:after {
  border-radius: 50px;
}
.select_group li input.checkbox:before {
  border: 0 none;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field .label {
  font-weight: 500;
}
.field .insert {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--gray-4);
}
.field .insert .select,
.field .insert .input-text,
.field .insert .textarea,
.field .insert .data-text {
  width: 100%;
}
.field .insert .select :disabled,
.field .insert .select [disabled],
.field .insert .select [readonly],
.field .insert .select :read-only,
.field .insert .input-text :disabled,
.field .insert .input-text [disabled],
.field .insert .input-text [readonly],
.field .insert .input-text :read-only,
.field .insert .textarea :disabled,
.field .insert .textarea [disabled],
.field .insert .textarea [readonly],
.field .insert .textarea :read-only {
  color: var(--gray-3);
}
.field .insert .select.medium,
.field .insert .input-text.medium,
.field .insert .data-text {
  height: 52px;
}
.field .insert .data-text {
  display: flex;
  align-items: center;
  gap: 8px;
}
.field .insert .icon_question {
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' rx='10' fill='%23E6E6E6'/%3E%3Crect width='20' height='20' rx='10' fill='%23E8EAF0'/%3E%3Cpath d='M9 12.11c.005-.657.07-1.188.195-1.594.13-.412.31-.74.54-.985.229-.25.536-.495.921-.734.771-.469 1.156-1.068 1.156-1.797 0-.318-.075-.596-.226-.836a1.446 1.446 0 0 0-.61-.562 1.846 1.846 0 0 0-.851-.196 1.84 1.84 0 0 0-.82.188 1.54 1.54 0 0 0-.633.554c-.167.25-.26.56-.281.93H6.703c.021-.646.182-1.2.484-1.664A2.943 2.943 0 0 1 8.415 4.36C8.924 4.12 9.494 4 10.125 4c.667 0 1.255.128 1.766.383.515.25.914.601 1.195 1.054.286.454.43.974.43 1.563 0 .604-.136 1.128-.407 1.57-.27.438-.666.815-1.187 1.133a3.453 3.453 0 0 0-.766.61 1.97 1.97 0 0 0-.422.734c-.088.286-.135.64-.14 1.062v.094H9v-.094zm-.25 2.374c0-.203.05-.39.148-.562.1-.172.232-.307.399-.406.172-.104.36-.157.562-.157.198 0 .38.05.547.149.172.099.307.234.406.406.105.172.157.357.157.555 0 .198-.052.383-.156.554a1.167 1.167 0 0 1-.407.407 1.094 1.094 0 0 1-1.102 0 1.19 1.19 0 0 1-.406-.399 1.051 1.051 0 0 1-.148-.547z' fill='%23B6BDC5'/%3E%3C/svg%3E");
}
.field .insert .btn.black {
  max-width: 92px;
}
.field .insert.has-fixed {
  position: relative;
}
.field .insert.has-fixed .fix-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}

.field-group {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
}
.field-group > .field {
  width: calc((100% - 60px) / 2);
}

@media screen and (max-width: 1199px) {
  .field-group {
    gap: 32px;
  }
  .field-group > .field {
    width: calc((100% - 32px) / 2);
  }
}
@media screen and (max-width: 767px) {
  .field-group {
    gap: 40px;
  }
  .field-group > .field {
    width: 100%;
    gap: 0;
  }
  .field-group > .field .insert + .guide {
    margin-top: 6px;
  }
  .field-group .field .label {
    font-size: 14px;
  }
}
/* 서브 공통 */
.sub #COMMUNITYcontent article .sub_title,
.sub #COMMUNITYcontent article > div:not(.tab) {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  /* overflow: hidden; */
  padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-left);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-left);
  padding-left: 40px;
  padding-right: 40px;
}

.banner {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url("../img/banner_1.jpg");
}
.banner:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.banner > .container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 230px;
}
.banner .title {
  font-size: 52px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--white);
}

.tab {
  width: 100%;
  margin-bottom: 60px;
  background-image: linear-gradient(var(--line-gray), var(--line-gray));
  background-repeat: no-repeat;
  background-position: left 0 bottom 0;
  background-size: 100% 1px;
  z-index: 10;
}
.tab ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  width: 100%;
  max-width: 1440px;
}
.tab ul li {
  position: relative;
  height: 62px;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--gray-2);
  transition: color 0.3s;
}
.tab ul li a {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: inherit;
}
.tab ul li a:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--black);
  transform: scale3d(0, 1, 1);
  transition: transform 0.1s;
}
.tab ul li.on a {
  color: var(--black);
}
.tab ul li.on a:before {
  transform: scale3d(1, 1, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.3s;
}

@media screen and (max-width: 1199px) {
  .sub #COMMUNITYcontent article:not(.search) .sub_title {
    display: none;
  }
  .sub #COMMUNITYcontent article > div:not(.tab):not(.sub_tab) {
    padding-left: 0;
    padding-right: 0;
  }
  .sub #COMMUNITYcontent article > div.sub_tab {
    padding-left: 20px;
    padding-right: 20px;
    padding-left: calc(env(safe-area-inset-left) + 20px);
    padding-right: calc(env(safe-area-inset-left) + 20px);
  }
  .banner {
    display: none;
  }
  .tab {
    overflow: auto hidden;
    margin-bottom: 0;
  }
  .tab ul {
    width: fit-content;
    max-width: fit-content;
    justify-content: flex-start;
    margin: 0;
    gap: 24px;
  }
}
article .sub_title,
.section_title {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.5;
}

@media screen and (max-width: 1199px) {
  .section_title {
    font-size: 24px;
    font-weight: bold;
  }
  [id^=CMMheader] .sub_title,
  article:not(.search) .sub_title {
    display: none;
  }
  .section_title {
    font-size: 24px;
    font-weight: bold;
  }
}
select.select {
  display: none;
  font-family: inherit;
}

@media screen and (max-width: 1199px) {
  select.select {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
}
.gm {
  background-color: #e16513;
  color: #fff;
  border-radius: 20px;
  font-family: "Roboto";
  font-weight: 700;
  font-size: 14px;
  line-height: normal;
  color: #fff;
  padding: 1px 7px;
  vertical-align: baseline !important;
  letter-spacing: 0;
}

@media screen and (max-width: 1199px) {
  .board .textarea textarea {
    height: 58px !important;
  }
}
@media screen and (max-width: 767px) {
  .gm {
    font-size: 10px;
    padding: 2px 4px;
  }
  .tab + .board {
    padding-top: 62px;
  }
  .post_vote .vote_top {
    padding-bottom: 12px;
  }
  .post_vote .onair,
  .post_vote .onend,
  .post_vote .finish {
    font-size: 13px;
    letter-spacing: -0.25px;
    vertical-align: 1px;
    margin-left: 6px;
    padding: 3px 8px;
  }
  .post_vote .question {
    padding-top: 30px;
  }
  .post_vote dl + dl {
    margin-top: 30px;
  }
  .post_vote dl dt,
  .post_vote dl dd {
    font-size: 14px;
    letter-spacing: -0.35px;
  }
  .post_vote dl dt {
    margin-bottom: 12px;
  }
  .post_vote dl dd {
    padding: 12px;
  }
  .post_vote dl dd input[type=radio] + label,
  .post_vote dl dd input[type=checkbox] + label {
    padding-left: 24px;
  }
  .post_vote dl dd input[type=radio] + label:before,
  .post_vote dl dd input[type=checkbox] + label:before {
    top: 3px;
    width: 16px;
    height: 16px;
  }
  .post_vote dl dd input[type=radio]:checked + label:before {
    background-size: 8px 8px;
  }
  .post_vote dl dd input[type=checkbox]:checked + label:before {
    background-size: 8px 5px;
  }
  .post_vote dl dd label + span {
    padding-left: 8px;
  }
  .post_vote dl dd textarea {
    padding: 0;
  }
}
.empty_wrap .empty {
  border-top: 1px solid var(--line-gray);
  border-bottom: 1px solid var(--line-gray);
  text-align: center;
  padding-top: 160px;
  padding-bottom: 160px;
}
.empty_wrap .empty p {
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
}
.empty_wrap + .board_wrap {
  margin-top: -1px;
}

.paging {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 60px;
}
.paging button {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  height: 40px;
}
.paging > button[class*=btn_] {
  position: relative;
  transition: 0.3s;
}
.paging > button[class*=btn_]:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 40px 40px;
}
.paging > button.btn_first:before {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13 20 6-4.33v8.66L13 20zM19 20l6-4.33v8.66L19 20z' fill='%23000'/%3E%3C/svg%3E");
}
.paging > button.btn_prev:before {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16 20 6-4.33v8.66L16 20z' fill='%23000'/%3E%3C/svg%3E%0A");
}
.paging > button.btn_next:before {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m24 20-6 4.33v-8.66L24 20z' fill='%23000'/%3E%3C/svg%3E");
}
.paging > button.btn_last:before {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m21 20-6 4.33v-8.66L21 20zM27 20l-6 4.33v-8.66L27 20z' fill='%23000'/%3E%3C/svg%3E%0A");
}
.paging .num {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.paging .num .btn_num {
  color: #5b5b5b;
  padding: 0 8px;
}
.paging .num .btn_num.on, .paging .num .btn_num:hover {
  color: var(--white);
  background-color: var(--gold-1);
}
.paging.disabled > button[class*=btn_] {
  background-color: #d8d8d8;
}

@media screen and (max-width: 1199px) {
  .empty_wrap {
    margin-top: -1px;
  }
  .paging {
    gap: 4px;
  }
  .paging button {
    min-width: 32px;
    height: 32px;
  }
  .paging .num .btn_num {
    font-size: 14px;
  }
}
/* 게시판 : 공통*/
.info_wrap {
  display: flex;
  align-items: center;
}
.info_wrap .info:not(.purchase) {
  display: flex;
  align-items: center;
}
.info_wrap .info:not(.purchase) li {
  display: flex;
  align-items: center;
}
.info_wrap .info:not(.purchase) li.name {
  gap: 8px;
}
.info_wrap .info:not(.purchase) li.date:before, .info_wrap .info:not(.purchase) li.comment:before, .info_wrap .info:not(.purchase) li.view:before, .info_wrap .info:not(.purchase) li.like:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.info_wrap .info:not(.purchase) li.date:before {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2a6 6 0 1 0 6 6 6.006 6.006 0 0 0-6-6zm2.854 3.854-2.5 2.5a.5.5 0 0 1-.708-.708l2.5-2.5a.5.5 0 1 1 .708.708z' fill='%23B6BDC5'/%3E%3C/svg%3E");
}
.info_wrap .info:not(.purchase) li.like:before {
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.707 13.5h4.663c.24 0 .463-.06.668-.18a.99.99 0 0 0 .434-.498l1.78-4.145a1.198 1.198 0 0 0 .085-.423v-.677c0-.24-.081-.441-.244-.604a.818.818 0 0 0-.604-.242h-3.9l.51-2.877a.77.77 0 0 0-.022-.402.857.857 0 0 0-.212-.339l-.614-.613-3.9 4.23c-.113.113-.198.24-.255.381a1.24 1.24 0 0 0-.084.466v4.23c0 .466.166.864.498 1.196a1.63 1.63 0 0 0 1.197.496zM2.5 7.283c0-.264.214-.478.478-.478H5.13V13.5H2.978a.478.478 0 0 1-.478-.478v-5.74z' fill='%23B6BDC5'/%3E%3C/svg%3E%0A");
}
.info_wrap .info:not(.purchase) li.view:before {
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.842 7.848c-.02-.049-.54-1.202-1.702-2.363-1.078-1.076-2.929-2.36-5.64-2.36s-4.563 1.284-5.64 2.36C1.699 6.646 1.179 7.798 1.157 7.848a.375.375 0 0 0 0 .305c.022.048.542 1.201 1.703 2.363 1.077 1.076 2.929 2.359 5.64 2.359s4.562-1.283 5.64-2.36c1.161-1.16 1.681-2.312 1.702-2.362a.374.374 0 0 0 0-.305zM8.5 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6z' fill='%23B6BDC5'/%3E%3C/svg%3E%0A");
}
.info_wrap .info:not(.purchase) li.comment:before {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.214 4.71c0-1.77-1.44-3.21-3.208-3.21H4.72a3.212 3.212 0 0 0-3.208 3.21v3.379a3.218 3.218 0 0 0 2.551 3.14l.08.017V14.5l4.363-3.202h2.5c1.769 0 3.208-1.44 3.208-3.21V4.71z' fill='%23B6BDC5'/%3E%3C/svg%3E%0A");
}
.info_wrap .info:not(.purchase).tag {
  flex-wrap: wrap;
  gap: 4px;
  min-height: 26px;
}
.info_wrap .info:not(.purchase).tag li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 26px;
  line-height: 1;
  border-radius: 2px;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
}
@media screen and (mAX-width: 767px) {
  .info_wrap .info:not(.purchase).tag li {
    height: 24px;
    font-size: 12px;
  }
}
.info_wrap .info:not(.purchase).tag li.d_day {
  padding: 0 10px;
  background-color: #f40058;
}
.info_wrap .info:not(.purchase).tag li.type {
  padding: 0 12px;
  background-color: var(--black);
}
.info_wrap .info:not(.purchase).tag li.point {
  padding: 0 12px;
  background-color: var(--gold-1);
}
.info_wrap .info:not(.purchase).tag li.point:before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: transparent url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18zm.411-12.834h-3.12v7.954H7.94v-2.592h1.428c.6 0 1.117-.112 1.55-.336.435-.223.767-.536.994-.939.23-.406.346-.875.346-1.406 0-.524-.114-.987-.34-1.39a2.332 2.332 0 0 0-.979-.95c-.428-.227-.937-.34-1.527-.34zm.775 3.67c-.246.241-.606.362-1.082.362H7.939v-2.68h1.165c.476.003.836.124 1.082.362.249.238.371.56.368.967.003.414-.12.743-.368.989z' fill='%23fff'/%3E%3C/svg%3E%0A") no-repeat;
}
.info_wrap .info:not(.purchase).author {
  gap: 8px;
  color: var(--gray-1);
}
.info_wrap .info:not(.purchase).reaction li {
  gap: 4px;
  text-align: center;
  font-size: 14px;
  color: var(--gray-2);
}

@media screen and (max-width: 1199px) {
  .info_wrap {
    gap: 9px;
    flex-direction: column;
    align-items: flex-start;
  }
  .info_wrap .img_profile.small {
    width: 26px;
    height: 26px;
  }
  .info_wrap .info li.name {
    font-size: 14px;
  }
  .info_wrap .info li.date:before, .info_wrap .info li.comment:before, .info_wrap .info li.view:before, .info_wrap .info li.like:before {
    width: 18px;
    height: 18px;
  }
}
/* 게시판 */
.board .btn_wrap,
.my_board .btn_wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.board .btn_wrap {
  min-height: 54px;
}
.board .select_sort {
  position: relative;
}
.board .select_sort:not(.order) {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 200px;
  height: 54px;
  font-weight: 500;
  line-height: 1.6;
}
.board .select_sort:not(.order) .btn_select {
  width: 100%;
  height: 100%;
  text-align: left;
  padding-left: 16px;
  padding-right: 46px;
  color: var(--black);
  box-shadow: 0 0 0 1px inset var(--line-gray);
}
.board .select_sort:not(.order) .btn_select:after {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16 7-6 6-6-6' stroke='%23000' stroke-width='1.2' stroke-miterlimit='10'/%3E%3C/svg%3E");
  background-position: 50% 50%;
  background-size: cover;
  position: absolute;
  right: 14px;
  top: calc(50% - 10px);
}
.board .select_sort:not(.order) .btn_select.on:after {
  transform: rotate(180deg);
}
.board .select_sort:not(.order) .btn_select.on + .list_select {
  display: block;
}
.board .select_sort:not(.order) .list_select {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 1px);
  display: none;
  max-height: 196px;
  overflow: auto;
  padding: 10px 0 15px;
  border: solid 1px var(--black);
  box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.1);
  background-color: var(--white);
  z-index: 20;
}
.board .select_sort:not(.order) .list_select li button {
  width: 100%;
  padding: 6px 20px;
  text-align: left;
  line-height: 1.6;
  color: #b3b3b3;
}
.board .select_sort:not(.order) .list_select li button:hover {
  color: var(--black);
}
.board .select_sort.order .list_tab {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--gray-2);
}
.board .select_sort.order .list_tab .btn {
  position: relative;
  display: flex;
  align-items: center;
}
.board .select_sort.order .list_tab .btn input {
  overflow: hidden;
  display: inline-block;
  width: 0;
  height: 12px;
  transition: width 0.45s ease-in-out;
}
.board .select_sort.order .list_tab .btn input:checked {
  width: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m2.57 6.368 2.057 2.205 4.8-5.143' stroke='%23000' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px auto;
  background-position: left center;
  background-repeat: no-repeat;
}
.board .select_sort.order .list_tab .btn input:checked + span {
  color: var(--black);
}
.board .select_sort select.select {
  font-size: 14px;
  padding: 0 0 0 10px;
}
.board .btn_write {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: background-color 0.2s;
  background-color: var(--gold-1);
  color: var(--white);
  min-width: 160px;
  height: 54px;
  font-weight: 600;
}
.board .btn_write:hover {
  background-color: var(--gold-2);
}
.board .btn_write:disabled {
  background-color: var(--gold-3);
}
.board .select_wrap {
  position: relative;
  width: 200px;
  height: 54px;
  padding: 14px 14px 14px 20px;
  border: solid 1px var(--line-gray);
  background-color: var(--white);
}
.board .select_wrap .btn_select {
  width: 100%;
  height: 100%;
  text-align: left;
  padding-left: 20px;
  padding-right: 46px;
  border: 1px solid #bebebe;
}
.board .select_wrap .btn_select:after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("../img/select-arr.svg");
  background-position: 50% 50%;
  background-size: cover;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
}
.board .select_wrap .btn_select:hover:after {
  background-position: 13.3790737564% 98.6599664992%;
  background-size: 1921.875% 3831.25%;
}
.board .select_wrap .btn_select.on {
  border: solid 1px #0e0e0e;
}
.board .select_wrap .btn_select.on:after {
  transform: translateY(-50%) rotate(180deg);
}
.board .select_wrap .btn_select.on + .list_select {
  display: block;
}
.board .select_wrap .list_select {
  overflow: auto;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  margin-top: 2px;
  background-color: #f0f0f0;
  z-index: 20;
  display: none;
  max-height: 244px;
  padding: 11px 0;
}
.board .select_wrap .list_select li {
  font-size: 16px;
  color: #5e5e5e;
}
.board .select_wrap .list_select li:hover {
  color: #0e0e0e;
  background: #f8f8f8;
}
.board .select_wrap .list_select li button {
  width: 100%;
  padding: 5px 16px;
  text-align: left;
  font-size: 16px;
  letter-spacing: -0.4px;
  line-height: 1.5;
}
.board .select_wrap .list_select li + li {
  margin-top: 10px;
}
.board .select_wrap select.select {
  display: none;
}
.board .board_search {
  position: relative;
  width: 248px;
}
.board .board_search input {
  width: 100%;
  height: 54px;
  padding-left: 20px;
  padding-right: 40px;
  border: solid 1px var(--line-gray);
}
.board .board_search .btn_search_board {
  position: absolute;
  top: calc(50% - 10px);
  width: 20px;
  height: 20px;
  right: 14px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.865' cy='8.865' r='6.597' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='m13.664 13.184 4.671 4.67' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E%0A");
  background-size: contain;
}
.board .btn_wrap_right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}
.board textarea:disabled {
  position: relative;
  background-color: #f0f0f0;
}
.board .time_over p {
  padding: 80px 20px;
  border: solid 1px #e1e1e1;
  color: #bebebe;
  font-size: 16px;
  line-height: 24px;
  display: block;
  text-align: center;
}
.board .comment_reply {
  padding-top: 25px;
  border-top: 1px solid #ddd1ca;
}
.board .comment_reply > div {
  padding-left: 30px;
  padding-right: 30px;
}
.board .comment_reply .thumb {
  display: none;
}
.board .comment_reply .user {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.board .comment_reply .user .user_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.board .comment_reply .user .user_wrap .name {
  color: #808080;
}
.board .comment_reply .user .user_wrap .name .gm {
  margin-right: 6px;
}
.board .comment_reply .post_comment {
  margin-top: 15px;
  word-break: break-word;
}
.board .comment_reply .post_comment .usertag {
  color: #484848;
  margin-right: 16px;
}
.board .comment_reply .post_comment .usertag.mytag {
  color: #1c76ee;
}
.board .comment_reply .post_comment .img {
  margin-top: 14px;
}
.board .comment_reply .post_comment .img img {
  max-width: 240px;
  width: 100%;
}
.board .comment_reply .date {
  position: relative;
  color: #808080;
  font-size: 14px;
  letter-spacing: -0.35px;
}
.board .comment_reply .textarea_wrap + .reply_foot {
  padding-top: 0;
  padding-left: 0;
  margin-top: 0;
}
.board .comment_reply .reply_foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
  padding-bottom: 20px;
}
.board .comment_reply .btn_reply {
  color: #91745e;
  font-size: 16px;
  letter-spacing: -0.4px;
}
.board .comment_reply .btn_reply:hover {
  text-decoration: underline;
}
.board .comment_reply .depth_2 > li {
  background-color: #f9f9f9;
  padding-left: 30px;
}
.board .comment_reply .depth_2 > li + li {
  border-color: #fff;
}
.board .comment_reply .depth_2 .user,
.board .comment_reply .depth_2 .textarea_wrap {
  position: relative;
}
.board .comment_reply .depth_2 .user:before,
.board .comment_reply .depth_2 .textarea_wrap:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: -8px;
  left: -5px;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-image: url("../img/ico_reply_line.svg");
  background-position: 50% 50%;
  background-size: cover;
}
.board .comment_reply .textarea_wrap {
  padding-bottom: 20px;
}
.board .tool_wrap {
  position: relative;
}
.board .tool_wrap + #CMMpop_share {
  right: 34px;
}
.board .btn_tool_more {
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-image: url("../img/tooltip-more.svg");
  background-position: 50% 50%;
  background-size: cover;
}
.board .btn_tool_more.on + .tool_list {
  display: flex;
  z-index: 10;
}
.board .tool_list {
  display: none;
  position: absolute;
  top: -45px;
  left: 50%;
  background: #b19d8d;
  padding: 0 12px;
  transform: translateX(-50%);
}
.board .tool_list:before {
  content: "";
  display: block;
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 12px;
  height: 10px;
  background-repeat: no-repeat;
  background-image: url("../img/tooltip-arr.svg");
  background-position: 50% 50%;
  background-size: cover;
  transform: translateX(-50%);
}
.board .tool_list li {
  height: 30px;
  color: #fff;
  font-size: 16px;
  letter-spacing: -0.4px;
  display: flex;
  align-items: center;
  position: relative;
}
.board .tool_list li button {
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 0 6px;
}
.board .tool_list li button:hover {
  text-decoration: underline;
}
.board.view .btn_list,
.board .post_vote .btn_submit {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 50px;
  background-color: #91745e;
  font-size: 18px;
  letter-spacing: -0.45px;
  color: #fff;
  transition: background-color 0.2s;
}
.board.view .btn_list:hover,
.board .post_vote .btn_submit:hover {
  background-color: #be9a7e;
}

@media screen and (max-width: 1199px) {
  .board .btn_wrap {
    min-height: 50px;
  }
  .board .btn_write {
    position: fixed;
    bottom: 20px;
    right: 20px;
    min-width: 48px;
    height: 48px;
    font-size: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='5nbpkvxfoa' maskUnits='userSpaceOnUse' x='0' y='-.266' width='24' height='25' fill='%23000'%3E%3Cpath fill='%23fff' d='M0-.266h24v25H0z'/%3E%3Cpath d='M15.332 4.761 4.941 15.539c-.255.264-.382.396-.47.554-.086.16-.13.337-.215.694l-.99 4.11c-.12.49-.178.737-.041.871.137.135.381.071.87-.055l3.878-1.006c.368-.095.553-.143.715-.238.162-.095.294-.232.558-.505l10.51-10.9c.858-.891 1.288-1.337 1.288-1.885 0-.547-.43-.993-1.288-1.884l-.516-.534c-.918-.952-1.377-1.428-1.954-1.428s-1.036.476-1.954 1.428z'/%3E%3C/mask%3E%3Cpath d='m4.94 15.539 1.955 1.884-1.954-1.884zM15.333 4.76l-1.787-2.043-.087.076-.08.083 1.954 1.884zm3.908 0-1.954 1.884 1.954-1.884zm.516.534 1.953-1.884-1.953 1.884zm0 3.769 1.953 1.883-1.953-1.883zm-10.51 10.9L7.292 18.08l1.954 1.884zm-4.99-3.177-2.639-.636 2.639.636zm-.99 4.11 2.638.636-2.639-.636zm.83.816-.682-2.628-.107.028-.104.036.892 2.564zm3.877-1.006-.681-2.627.681 2.627zm-4.748 1.061 1.902-1.936-1.902 1.936zm.87-.055.681 2.627.107-.027.104-.037-.892-2.563zm4.593-1.244 1.369 2.344-1.37-2.344zm6.644-15.708 1.787 2.043.087-.076.08-.083-1.954-1.884zM4.472 16.093l2.38 1.306-2.38-1.306zm2.423 1.33L17.286 6.645l-3.908-3.768L2.986 13.655l3.909 3.768zM17.286 6.645l.515.535L21.71 3.41l-.516-.534-3.908 3.768zm.515.535-10.51 10.9 3.909 3.768 10.51-10.9L17.8 7.178zM1.617 16.15l-.99 4.11 5.277 1.273.99-4.11-5.277-1.272zm3.16 8.19 3.878-1.005-1.363-5.255-3.878 1.005 1.362 5.255zm-4.15-4.08c-.038.158-.147.576-.182.965-.037.421-.065 1.554.877 2.479l3.805-3.872c.364.358.575.785.67 1.18.082.346.063.611.056.696-.009.091-.02.134-.009.079.011-.052.028-.12.06-.254L.626 20.26zm2.576-1.111 1.784 5.127-1.784-5.127zm.21-.064c-.132.035-.2.052-.252.064-.055.013-.012 0 .079-.01.084-.009.349-.032.695.045.398.088.829.29 1.192.648l-3.805 3.872c.941.925 2.072.878 2.494.834.387-.042.804-.157.96-.198l-1.362-5.255zm3.879-1.005a47.702 47.702 0 0 1-.198.202l-.011.011a.05.05 0 0 1-.004.004l.004-.004a1.179 1.179 0 0 1 .14-.107c.03-.02.062-.04.096-.06l2.738 4.687c.56-.328.98-.797 1.143-.965L7.292 18.08zm1.362 5.255c.227-.06.842-.195 1.403-.522l-2.738-4.688a1.702 1.702 0 0 1 .247-.118 2.485 2.485 0 0 1-.15.04l-.124.033 1.362 5.255zM17.802 7.18c.221.23.383.398.517.543.134.147.194.222.218.254.023.031-.031-.035-.09-.18a1.668 1.668 0 0 1-.117-.617h5.428c0-1.082-.459-1.892-.852-2.425-.346-.47-.82-.952-1.197-1.344L17.802 7.18zm3.907 3.768c.378-.392.851-.875 1.197-1.344.393-.533.852-1.343.852-2.424H18.33c0-.24.05-.453.117-.618.059-.145.113-.211.09-.18a3.513 3.513 0 0 1-.218.254c-.134.145-.296.314-.517.543l3.907 3.768zm-4.59-4.144-3.574-4.086 3.574 4.086zm.167-.159c.237-.245.412-.426.563-.576.153-.15.233-.22.27-.249.036-.028-.03.031-.18.096-.174.074-.4.13-.653.13V.619c-1.145 0-1.988.513-2.53.941-.481.38-.973.898-1.378 1.318l3.908 3.768zm3.908-3.768c-.405-.42-.896-.939-1.377-1.318-.543-.428-1.386-.94-2.53-.94v5.428c-.254 0-.48-.057-.653-.131-.15-.065-.216-.124-.18-.096.036.03.117.099.27.25.15.149.325.33.562.575l3.908-3.768zM2.987 13.655c-.157.162-.594.584-.895 1.133l4.76 2.611a1.7 1.7 0 0 1-.145.22l-.01.012a.099.099 0 0 1-.004.004l.003-.004.01-.01.04-.043.063-.067.086-.088-3.908-3.768zm3.908 3.768a59.04 59.04 0 0 1 .069-.28l.001-.004-.001.005a1.09 1.09 0 0 1-.063.157 1.692 1.692 0 0 1-.05.098l-4.759-2.611c-.301.549-.422 1.144-.475 1.363l5.278 1.272z' fill='%23fff' mask='url(%235nbpkvxfoa)'/%3E%3Cpath d='M14.426 4.963 18.712 2l4.285 4.445-2.857 4.445-5.714-5.927z' fill='%23fff'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px auto;
    z-index: 20;
  }
  .board .btn_write:before {
    content: "";
    display: block;
  }
  .board .btn_wrap {
    flex-direction: column;
    align-items: flex-start;
  }
  .board .btn_wrap > div {
    width: 100%;
    border-bottom: solid 1px var(--line-gray);
  }
  .board .btn_wrap > div:not(.order) {
    padding-right: 6px;
  }
  .board .select_sort {
    width: 100%;
    height: 50px;
  }
  .board .select_sort:not(.order) {
    min-width: 104px;
    width: 104px;
    font-size: 14px;
  }
  .board .select_sort:not(.order) .btn_select {
    padding-left: 10px;
    padding-right: 30px;
    box-shadow: none;
  }
  .board .select_sort.order .list_tab {
    display: none;
  }
  .board .select_sort.order:before {
    content: "";
    position: absolute;
    top: calc(50% - 10px);
    left: 20px;
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5 10.25a3.251 3.251 0 0 1 2.498-3.163L14 .75a.75.75 0 0 1 1.493-.102L15.5.75v6.337a3.251 3.251 0 0 1 0 6.326v3.837a.75.75 0 0 1-1.493.102L14 17.25v-3.837a3.251 3.251 0 0 1-2.5-3.163zm1.5 0c0 .764.49 1.414 1.172 1.652l.063.021.148.038a1.756 1.756 0 0 0 .815-.019l.13-.04.069-.025a1.75 1.75 0 0 0-.069-3.28l-.13-.04.06.018a1.75 1.75 0 0 0-.815-.048l-.137.03-.07.02-.134.047A1.75 1.75 0 0 0 13 10.25zM2 7.75a3.251 3.251 0 0 1 2.5-3.163V.75A.75.75 0 0 1 5.993.648L6 .75v3.837a3.251 3.251 0 0 1 0 6.326v6.337a.75.75 0 0 1-1.493.102L4.5 17.25l-.002-6.337A3.251 3.251 0 0 1 2 7.75zm1.5 0c0 .764.49 1.414 1.173 1.652l.062.021.148.038a1.757 1.757 0 0 0 .815-.019l.13-.04.069-.025a1.75 1.75 0 0 0-.068-3.28l-.131-.04.06.018a1.75 1.75 0 0 0-.815-.048l-.137.03-.07.02-.134.047A1.75 1.75 0 0 0 3.5 7.75z' fill='%23212121'/%3E%3C/svg%3E");
  }
  .board .select_sort.order select.select {
    position: relative;
    opacity: 1;
    padding-left: 48px;
    background: transparent;
    -webkit-appearance: none;
  }
  .board .btn_wrap_right {
    padding-left: 10px;
  }
  .board .board_search {
    width: calc(100% - 104px - 4px);
  }
  .board .board_search input {
    border: none;
  }
  .board .comment_reply > div {
    padding-left: 24px;
    padding-right: 24px;
  }
  .board .comment_reply .thumb {
    width: 30px;
    height: 30px;
  }
  .board .comment_reply .btn_reply,
  .board .comment_reply .post_comment {
    font-size: 18px;
    letter-spacing: -0.45px;
  }
  .board .comment_reply .post_comment .img {
    margin-top: 10px;
  }
  .board .comment_reply .depth_2 > li {
    padding-left: 24px;
  }
  .board .comment_reply .depth_2 > li + li {
    border-color: #ddd1ca;
  }
  .board .comment_reply .depth_2 .comment_reply > div {
    padding-left: 36px;
  }
  .board .comment_reply .depth_2 .user:before,
  .board .comment_reply .depth_2 .textarea_wrap:before {
    left: 0;
  }
  .board.view .btn_list {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    transition: background-color 0.2s;
    background-color: var(--gold-1);
    color: var(--white);
    min-width: 140px;
    font-size: 20px;
    letter-spacing: -0.45px;
  }
  .board.view .btn_list:hover {
    background-color: var(--gold-2);
  }
  .board.view .btn_list:disabled {
    background-color: var(--gold-3);
  }
}
/* 글쓰기 */
.board.write {
  margin-top: 70px;
}
.board.write .select_list {
  display: flex;
  align-items: center;
  gap: 10px;
}
.board.write .input_title {
  margin-top: 26px;
  border-top: 1px solid #ddd1ca;
  border-bottom: 1px solid #ddd1ca;
}
.board.write .input_title input {
  padding: 18px 30px;
  width: 100%;
  color: #5b5b5b;
}
.board.write .editor_zone {
  padding: 50px 30px;
}
.board.write .write_tag {
  padding: 18px 30px;
  border-top: solid 1px #ddd1ca;
  font-size: 16px;
  letter-spacing: -0.4px;
  color: #5b5b5b;
  line-height: 1.5;
}
.board.write .write_tag input {
  width: 100%;
}
.board.write .write_tag .tag {
  word-break: break-all;
  word-wrap: break-word;
}
.board.write .write_tag .tag + .tag {
  margin-left: 8px;
}
.board.write .bw_btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 2px solid #ddd1ca;
}
.board.write .bw_btns .register_wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.board.write .bw_btns button {
  min-width: 140px;
  height: 50px;
  font-size: 18px;
  letter-spacing: -0.45px;
  color: #fff;
  transition: 0.3s;
}
.board.write .bw_btns button.btn_cancel {
  background-color: #fff;
  border: 1px solid #91745e;
  color: #91745e;
}
.board.write .bw_btns button.btn_cancel:hover {
  color: #be9a7e;
}
.board.write .bw_btns button.btn_temporarily {
  background-color: #727272;
}
.board.write .bw_btns button.btn_temporarily .num {
  padding-left: 8px;
}
.board.write .bw_btns button.btn_basic {
  background-color: #91745e;
}
.board.write .bw_btns button.btn_basic.active, .board.write .bw_btns button.btn_basic:hover {
  background-color: #be9a7e;
}

.list + .empty_wrap {
  margin-top: 0;
}
.list + .empty_wrap .empty {
  margin-top: -1px;
}

/* 통합검색 */
article.search {
  padding-top: 100px;
}
article.search .sub_title,
article.search .search_result {
  text-align: center;
}
article.search .search_result {
  padding: 20px 0 100px;
  font-size: 40px;
}
article.search .point,
article.search .point_search {
  color: var(--gold-1);
}
article.search .section_wrap {
  display: flex;
  flex-direction: column;
  gap: 160px;
}
article.search .section_wrap .section_title {
  display: flex;
  align-items: center;
  gap: 12px;
}
article.search .section_wrap .section_title .count {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 20px;
  background: var(--gold-1);
  color: var(--white);
  font-size: 24px;
  font-weight: 600;
}
article.search .board_list li.board_item .desc {
  max-width: 1060px;
}
article.search .tag_wrap {
  margin-top: 10px;
  color: #9e9e9e;
  font-size: 16px;
  line-height: 24px;
}
article.search .tag_wrap > span {
  border-radius: 100px;
  background-color: #f6f6f6;
  color: #5b5b5b;
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: -0.35px;
  padding: 3px 18px;
}
article.search .tag_wrap.point {
  font-weight: 700;
}
article.search .select_wrap {
  display: flex;
}
article.search .select_wrap .select_sort {
  float: none;
}
article.search .select_wrap .select_right {
  display: flex;
  margin-left: 10px;
}
article.search .select_wrap .select_right > .select_sort:nth-child(n+2) {
  margin-left: 10px;
}

@media screen and (min-width: 1200px) {
  article.search .sub_title {
    font-size: 52px;
    font-weight: 600;
  }
}
@media screen and (max-width: 1199px) {
  article.search {
    padding-top: 50px;
  }
  article.search .sub_title {
    font-size: 34px;
  }
  article.search .search_result {
    padding: 10px 0 50px;
    font-size: 24px;
  }
  article.search .section_wrap .section_title {
    padding-left: 20px;
    padding-right: 20px;
  }
  article.search .section_wrap .section_title .count {
    font-size: 14px;
  }
  article.search .section_wrap .btn_wrap {
    margin-top: 20px;
    border-top: solid 1px var(--line-gray);
  }
}
/* 포인트샵 */
article.pointshop {
  padding-top: 120px;
}
article.pointshop .sub_tab ul {
  margin: 0 0 36px;
}
article.pointshop .sub_tab ul li {
  font-size: 28px;
}
article.pointshop .board_list_img .list li .shop-item {
  padding: 40px;
  border: solid 1px var(--line-gray);
  border-radius: 2px;
}
article.pointshop .board_list_img .list li .shop-item .img-wrap {
  position: relative;
  aspect-ratio: 1/0.572916;
  border-radius: 10px;
}
article.pointshop .board_list_img .list li .shop-item .img-wrap:not(.has-bg) {
  border: 1px solid #F5F5F5;
  background: linear-gradient(180deg, #FFF 0%, #F6F6F6 100%);
}
article.pointshop .board_list_img .list li .shop-item .img-wrap.has-bg {
  background: url("../img/bg_shop_item.png") no-repeat 50% 50%;
}
article.pointshop .board_list_img .list li .shop-item .img-wrap img {
  width: 152px;
}
article.pointshop .board_list_img .list li .shop-item .text_wrap {
  padding: 28px 10px 22px;
  border: 0 none;
  background: none;
  gap: 12px;
}
article.pointshop .board_list_img .list li .shop-item .info_wrap .info.purchase,
article.pointshop .board_list_img .list li .shop-item .btn.black {
  width: 100%;
}
article.pointshop .board_list_img .list li.sold-out .img-wrap:before, article.pointshop .board_list_img .list li.sold-out .img-wrap:after {
  position: absolute;
  width: 20px;
  height: 20px;
}
article.pointshop .board_list_img .list li.sold-out .img-wrap:before {
  width: 100%;
  height: 100%;
  content: "";
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
}
article.pointshop .board_list_img .list li.sold-out .img-wrap:after {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  top: 22px;
  left: 22px;
  content: "품절";
  width: 56px;
  height: 37px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}
article.pointshop .board_list_img .list li.sold-out .img-wrap > img,
article.pointshop .board_list_img .list li.sold-out .text_wrap,
article.pointshop .board_list_img .list li.sold-out .btn.black {
  opacity: 0.5;
}
article.pointshop .board_list_img .list li.sold-out .btn.black {
  color: #898E94;
  background: #E8EAF0;
}

@media screen and (max-width: 767px) {
  article.pointshop {
    padding-top: 26px;
  }
  article.pointshop .sub_tab ul {
    margin-bottom: 6px;
  }
  article.pointshop .sub_tab ul li {
    font-size: 20px;
  }
  article.pointshop .board_list_img .list li .shop-item {
    padding: 30px;
  }
  article.pointshop .board_list_img .list li .shop-item .img-wrap {
    aspect-ratio: auto;
    height: 220px;
  }
  article.pointshop .board_list_img .list li .shop-item .info_wrap .info.purchase li {
    font-size: 14px;
  }
  article.pointshop .board_list_img .list li .shop-item .text_wrap {
    padding-top: 14px;
  }
}
/* popup */
[id^=CMMpop_default] .pop_layer {
  max-width: 440px;
  min-height: 368px;
}
[id^=CMMpop_default].pop_service .tit {
  color: #222832;
  font-size: 16px;
  line-height: 24px;
}
[id^=CMMpop_default].pop_service .agree_info {
  padding: 0 20px;
  text-align: left;
  color: #222832;
  margin-top: 20px;
}
[id^=CMMpop_default].pop_service .agree_info li {
  font-size: 14px;
  line-height: 26px;
}
[id^=CMMpop_default].pop_service .agree_info li:nth-child(n+2) {
  margin-top: 10px;
}
[id^=CMMpop_default].pop_service .agree_note {
  text-align: left;
  font-size: 14px;
  line-height: 22px;
  color: #5e5e5e;
  margin-top: 20px;
}
[id^=CMMpop_default].pop_service .pop_cont p {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 140px;
}

@media screen and (min-width: 1200px) {
  [id^=CMMpop_default] .pop_layer {
    min-width: 424px;
  }
}
@media screen and (max-width: 1199px) {
  [id^=CMMpop_default] .pop_layer .pop_cont {
    padding: 20px;
  }
  [id^=CMMpop_default].pop_service .agree_info {
    padding: 0;
  }
  [id^=CMMpop_default].pop_service .agree_info li {
    line-height: 20px;
  }
}
@media screen and (max-width: 767px) {
  [id^=CMMpop_default] .pop_cont p {
    /* min-height: 160px;
    font-size: 16px;
    letter-spacing: -0.4px; */
  }
}
/* 정보 활용 동의*/
#CMMpop_agree {
  text-align: center;
}
#CMMpop_agree .desc {
  font-size: 14px;
  line-height: 22px;
  color: #0e0e0e;
  margin-top: 10px;
}
#CMMpop_agree .info_box {
  padding: 24px 30px;
  background: #f8f8f8;
  text-align: left;
  margin-top: 30px;
}
#CMMpop_agree .info_box li {
  color: #0e0e0e;
  font-size: 14px;
  line-height: 22px;
  padding-left: 18px;
  position: relative;
}
#CMMpop_agree .info_box li:nth-child(n+2) {
  margin-top: 8px;
}
#CMMpop_agree .info_box li:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  background: #0e0e0e;
  position: absolute;
  width: 6px;
  height: 6px;
  top: 7px;
  left: 0;
  transform: rotate(45deg);
}
#CMMpop_agree .info_box li.note {
  color: #5e5e5e;
  font-size: 12px;
  line-height: 16px;
  margin-top: 20px;
  padding-left: 0;
}
#CMMpop_agree .info_box li.note:before {
  display: none;
}
#CMMpop_agree .checkbox {
  text-align: left;
}
#CMMpop_agree .checkbox [type=checkbox] {
  display: none;
}
#CMMpop_agree .checkbox label {
  position: relative;
  font-size: 14px;
  color: #0e0e0e;
  line-height: 20px;
  display: inline-block;
  margin-top: 20px;
}
#CMMpop_agree .checkbox label:before {
  content: "";
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  left: 0;
  width: 20px;
  height: 20px;
  text-indent: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.5.5h19v19H.5z' fill='%23FFF' stroke='%23BEBEBE' fill-rule='evenodd'/%3E%3C/svg%3E%0A") !important;
  background-size: 100% 100% !important;
}
#CMMpop_agree .checkbox input[type=checkbox]:checked + label:before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%230E0E0E' d='M0 0h20v20H0z'/%3E%3Cpath fill='%23FFF' d='m15.466 5-6.904 6.924-4.028-4.04L3 9.422 8.562 15 17 6.538z'/%3E%3C/g%3E%3C/svg%3E%0A") !important;
}
#CMMpop_agree .checkbox_today {
  background: #0e0e0e;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
}
#CMMpop_agree .checkbox_today [type=checkbox] {
  display: none;
}
#CMMpop_agree .checkbox_today label {
  position: relative;
  font-size: 12px;
  color: #fff;
  line-height: 18px;
  display: inline-block;
}
#CMMpop_agree .checkbox_today label:before {
  content: "";
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  left: 0;
  width: 18px;
  height: 18px;
  text-indent: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.5.5h19v19H.5z' fill='%23FFF' stroke='%23BEBEBE' fill-rule='evenodd'/%3E%3C/svg%3E%0A") !important;
  background-size: 100% 100% !important;
}
#CMMpop_agree .checkbox_today input[type=checkbox]:checked + label:before {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' d='M.9.9h16.2v16.2H.9z'/%3E%3Cpath fill='%230E0E0E' d='m13.92 4.5-6.214 6.231L4.08 7.095 2.7 8.48l5.006 5.02L15.3 5.884z'/%3E%3C/g%3E%3C/svg%3E%0A") !important;
}

@media screen and (max-width: 1199px) {
  #CMMpop_agree .info_box {
    padding: 20px 20px 24px 20px;
    margin-top: 30px;
  }
}
/* 게임 설치 및 실행 안내 */
#CMMpop_gamestart .notice_box {
  padding: 24px 30px;
  background: #f8f8f8;
  text-align: left;
  margin-top: 36px;
}
#CMMpop_gamestart .notice_box dt {
  color: #0e0e0e;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 10px;
}
#CMMpop_gamestart .notice_box dt:nth-of-type(n+2) {
  margin-top: 20px;
}
#CMMpop_gamestart .notice_box dd {
  color: #5e5e5e;
  font-size: 14px;
  line-height: 22px;
  padding-left: 17px;
  position: relative;
}
#CMMpop_gamestart .notice_box dd:nth-child(n+2) {
  margin-top: 6px;
}
#CMMpop_gamestart .notice_box dd:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  background: #5e5e5e;
  position: absolute;
  width: 6px;
  height: 6px;
  top: 7px;
  left: 0;
  transform: rotate(45deg);
}

/* 신고하기 팝업 */
#CMMpop_report .pop_contents .choice_title {
  font-weight: 700;
}
#CMMpop_report .pop_contents dt,
#CMMpop_report .pop_contents .choice_title {
  position: relative;
}
#CMMpop_report .report_info {
  display: flex;
  align-items: center;
}
#CMMpop_report .report_info + .report_info {
  margin-top: 10px;
}
#CMMpop_report .report_info dt {
  min-width: 60px;
}
#CMMpop_report .report_info dd + dt {
  margin-top: 20px;
}
#CMMpop_report .report_choice {
  border-top: 1px solid var(--line-gray);
  padding-top: 30px;
  margin-top: 30px;
}
#CMMpop_report .report_choice .choice_title {
  margin-bottom: 20px;
}
#CMMpop_report .report_choice li {
  margin-top: 16px;
}
#CMMpop_report .report_choice li + li {
  margin-top: 10px;
}
#CMMpop_report .report_choice li:first-child {
  margin-top: 0;
}
#CMMpop_report .report_choice li.textarea {
  background-color: #f0f0f0;
  margin-left: 28px;
  margin-top: 16px;
}
#CMMpop_report .report_choice li.textarea textarea {
  display: block;
  padding: 20px;
  height: 130px !important;
  background-color: inherit;
  color: #5b5b5b;
}
#CMMpop_report .report_choice input[type=radio] {
  display: none;
}
#CMMpop_report .report_choice input[type=radio] + label {
  position: relative;
  display: inline-block;
  padding-left: 30px;
  text-indent: 0;
}
#CMMpop_report .report_choice input[type=radio] + label ~ label {
  margin-left: 10px;
}
#CMMpop_report .report_choice input[type=radio] + label:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #707070;
  background-color: #f8f8f8;
  background-image: none;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  box-sizing: border-box;
  border-radius: 50%;
}
#CMMpop_report .report_choice input[type=radio]:checked + label:before {
  background-image: url("../img/radio_chk.svg");
  background-size: 10px 10px;
}
#CMMpop_report .report_choice input[type=radio] + label:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #707070;
  background-color: #fff;
  background-image: none;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  box-sizing: border-box;
}
#CMMpop_report .report_choice input[type=radio]:checked + label {
  color: #0e0e0e;
}
#CMMpop_report .report_choice input[type=radio] + label ~ label {
  margin-left: 10px;
}

/* 임시등록 팝업 */
#CMMpop_temporarily .pop_layer {
  max-width: 560px;
}
#CMMpop_temporarily .desc {
  margin-bottom: 30px;
  font-weight: 700;
  text-align: center;
  color: #5b5b5b;
}
#CMMpop_temporarily .save_list {
  max-height: 260px;
  overflow: auto;
}
#CMMpop_temporarily .save_list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid var(--line-gray);
}
#CMMpop_temporarily .save_list li:nth-child(1) {
  border-top: 1px solid var(--line-gray);
}
#CMMpop_temporarily .save_list li:hover span {
  text-decoration: underline;
}
#CMMpop_temporarily .save_list li span {
  display: inline-block;
  width: calc(100% - 90px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#CMMpop_temporarily .save_list li .btn_close {
  position: relative;
  width: 90px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: background-color 0.2s;
  background-color: var(--white);
  color: var(--black);
  box-shadow: 0 0 0 1px inset var(--black);
}
#CMMpop_temporarily .save_list li .btn_close:hover {
  opacity: 0.8;
}
#CMMpop_temporarily .save_list li .btn_close:before {
  content: "삭제";
  font-size: 14px;
  display: block;
  transition: 0.3s;
}
#CMMpop_temporarily .pop_empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 260px;
  border-top: 1px solid var(--line-gray);
  border-bottom: 1px solid var(--line-gray);
  text-align: center;
}

/* 공유하기 팝업 */
#CMMpop_share .pop_layer {
  max-width: 350px;
}
#CMMpop_share .sns_list {
  display: flex;
  flex-wrap: wrap;
  padding: 40px;
  gap: 30px 10px;
  text-align: center;
}
#CMMpop_share .sns_list li {
  position: relative;
  width: calc(25% - 8px);
}
#CMMpop_share .sns_list li .img {
  width: 100%;
  aspect-ratio: 1/1;
  max-width: 60px;
  display: block;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
#CMMpop_share .sns_list li .img.share {
  background-image: url("../img/sns_url.svg");
}
#CMMpop_share .sns_list li .img.facebook {
  background-image: url("../img/sns_facebook.svg");
}
#CMMpop_share .sns_list li .img.whatsapp {
  background-image: url("../img/sns_whatsapp.svg");
}
#CMMpop_share .sns_list li .img.kakao {
  background-image: url("../img/sns_kakaotalk.svg");
}
#CMMpop_share .sns_list li .img.line {
  background-image: url("../img/sns_line.svg");
}
#CMMpop_share .sns_list li .img.reddit {
  background-image: url("../img/sns_reddit.svg");
}
#CMMpop_share .sns_list li .text {
  font-size: 12px;
  letter-spacing: -0.3px;
  color: #484848;
  text-align: center;
  padding-top: 2px;
}
#CMMpop_share .sns_list li:hover > .text {
  text-decoration: underline;
}
#CMMpop_share .sns_list li button {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 767px) {
  #CMMpop_share .sns_list {
    gap: 16px 10px;
  }
  #CMMpop_share .sns_list li {
    width: calc(33.3333333333% - 8px);
  }
  #CMMpop_share .sns_list li .text {
    font-size: 12px;
    letter-spacing: -0.3px;
  }
}
/* 커뮤니티 이용 제한 안내 */
#CMMpop_user_check .ico.alert {
  display: block;
  width: 40px;
  height: 40px;
  background-image: url("../img/ico_pop-alert.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  margin: 0 auto 10px;
}
#CMMpop_user_check.pop_wrap .title {
  font-size: 20px;
  letter-spacing: -0.5px;
  color: #5b5b5b;
  height: auto;
}
#CMMpop_user_check .text-wrap .text {
  text-align: center;
  margin-top: 20px;
}
#CMMpop_user_check .table-wrap {
  margin-top: 30px;
}
#CMMpop_user_check table {
  margin-top: 10px;
}
#CMMpop_user_check table th,
#CMMpop_user_check table td {
  border-color: var(--line-gray);
  color: #808080;
  padding: 16px 20px;
}
#CMMpop_user_check table th {
  font-weight: inherit;
  text-align: left;
  width: 109px;
}

@media screen and (max-width: 1199px) {
  #CMMpop_user_check.pop_wrap .pop_contents {
    font-size: 18px;
    letter-spacing: -0.45px;
  }
  #CMMpop_user_check.pop_wrap .title {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
}
@media screen and (min-width: 768px) {
  #CMMpop_user_check .pop_layer {
    width: 448px;
  }
}
@media screen and (max-width: 767px) {
  #CMMpop_user_check.pop_wrap .pop_contents {
    font-size: 16px;
    letter-spacing: -0.4px;
  }
  #CMMpop_user_check.pop_wrap .title {
    font-size: 20px;
    letter-spacing: -0.5px;
  }
  #CMMpop_user_check .ico.alert {
    margin-top: 25px;
  }
  #CMMpop_user_check .text-wrap .text {
    margin-top: 15px;
  }
  #CMMpop_user_check .table-wrap {
    margin-top: 20px;
  }
  #CMMpop_user_check th,
  #CMMpop_user_check td {
    padding: 10px 15px;
  }
}
/* 휴대폰 번호 등록 팝업 */
.pop_phone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  overflow-y: auto;
  z-index: -1;
  -webkit-overflow-scrolling: touch;
  text-align: center;
}
.pop_phone:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.pop_phone.on {
  z-index: 1000;
  padding: 30px 0;
}
.pop_phone .pop_layer {
  position: relative;
  display: inline-block;
  width: 560px;
  background-color: #fff;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.26);
  vertical-align: middle;
  text-align: center;
}
.pop_phone .desc {
  color: #5e5e5e;
  font-size: 16px;
  line-height: 24px;
  margin-top: 10px;
}
.pop_phone .input_wrap {
  margin-top: 40px;
}
.pop_phone .input_wrap li {
  height: 46px;
  position: relative;
}
.pop_phone .input_wrap li .btn_confirm {
  color: #1c76ee;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #e1e1e1;
  padding: 0 20px;
  height: 46px;
}
.pop_phone .input_wrap li .btn_confirm:hover {
  border-color: #1c76ee;
}
.pop_phone .input_wrap li:nth-child(n+2) {
  margin-top: 10px;
}
.pop_phone .input_wrap li input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 11px 88px 11px 20px;
  border: solid 1px #e1e1e1;
}
.pop_phone .input_wrap li .noti {
  font-size: 14px;
  line-height: 20px;
  color: #1c76ee;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
  padding: 0;
}
.pop_phone .input_wrap li .noti.error {
  color: #e60606;
}
.pop_phone .input_wrap li .count {
  color: #e60606;
  top: 0;
  right: 20px;
  line-height: 46px;
  position: absolute;
}
.pop_phone .agreement {
  position: relative;
  margin-top: 50px;
  padding-right: 32px;
  text-align: left;
}
.pop_phone .agreement input[type=checkbox] {
  display: none;
}
.pop_phone .agreement input[type=checkbox] + label {
  position: relative;
  display: inline-block;
  padding-left: 30px;
  text-indent: 0;
  line-height: 20px;
  font-size: 14px;
  color: #0e0e0e;
}
.pop_phone .agreement input[type=checkbox] + label:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  text-indent: 0;
  background-position: 45.0434782609% 20.942408377%;
  background-size: 1537.5% 1532.5%;
}
.pop_phone .agreement input[type=checkbox]:checked + label:before {
  background-position: 52.347826087% 20.942408377%;
  background-size: 1537.5% 1532.5%;
}
.pop_phone .agreement .more_info {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.pop_phone .agreement .more_info:after {
  content: "";
  display: block;
  width: 20px;
  height: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='4' viewBox='0 0 20 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239E9E9E' fill-rule='evenodd'%3E%3Cpath d='M0 0h4v4H0zM8 0h4v4H8zM16 0h4v4h-4z'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.pop_phone .btns {
  margin-top: 40px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pop_phone .btns button {
  font-size: 16px;
  line-height: 24px;
  padding: 10px 30px;
}
.pop_phone .btns button:nth-child(n+2) {
  margin-left: 10px;
}
.pop_phone .btn_close {
  display: block;
  width: 64px;
  height: 64px;
  position: absolute;
  right: 0;
  top: 0;
}
.pop_phone .btn_close:before {
  width: 24px;
  height: 24px;
  background-position: 95.4003407155% 92.1367521368%;
  background-size: 2196.4285714286% 2189.2857142857%;
  content: "";
  display: block;
  position: absolute;
  top: 20px;
  right: 20px;
}

@media screen and (max-width: 430px) {
  .pop_phone .pop_layer {
    width: 300px;
  }
}
/* 프로필 설정 */
#CMMpop_profile .pop_layer {
  max-width: 520px;
}
#CMMpop_profile .select_group {
  margin-top: 60px;
  gap: 20px;
}
#CMMpop_profile .select_group li {
  width: calc((100% - 80px) / 5);
}
#CMMpop_profile .select_group input.checkbox:checked + .img_profile {
  border: solid 2px var(--gold-2);
}
#CMMpop_profile .select_group input.checkbox:checked + .img_profile img {
  max-width: calc(100% + 4px);
}

@media screen and (max-width: 767px) {
  #CMMpop_profile .btn.xsmall {
    font-size: 12px;
    padding: 0 10px;
  }
  #CMMpop_profile .select_group {
    gap: 18px 5px;
  }
  #CMMpop_profile .select_group li {
    width: calc((100% - 15px) / 4);
  }
}
/* 스티커 */
#CMMpop_sticker .pop_layer {
  max-width: 520px;
}
#CMMpop_sticker .select_group {
  gap: 10px;
}
#CMMpop_sticker .select_group li {
  width: 80px;
}
#CMMpop_sticker input.checkbox:not(:checked):after {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect width='20' height='20' rx='2' fill='%23CDD1DB'/%3E%3Cpath d='M5 9.294 8.75 13 15 6' stroke='%23B3B3B3' stroke-width='1.5'/%3E%3Cpath d='M5 9.294 8.75 13 15 6' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
}

@media screen and (max-width: 767px) {
  #CMMpop_sticker .pop_layer {
    max-width: 322px;
  }
  #CMMpop_sticker .select_group {
    max-width: 282px;
    margin: 0 auto;
    gap: 12px 21px;
  }
  #CMMpop_sticker .select_group li {
    width: calc((100% - 42px) / 3);
  }
}
/* 포인트 등급 기준 */
#CMMpop_point .pop_layer {
  max-width: 520px;
  line-height: 1.6;
}
#CMMpop_point .exp {
  font: inherit;
  line-height: 34px;
}
#CMMpop_point .point_table {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding: 30px 49px;
  border: solid 1px var(--gray-6);
  background-color: var(--gray-7);
}
#CMMpop_point .point_table table {
  border: 0;
}
#CMMpop_point .point_table table th, #CMMpop_point .point_table table td, #CMMpop_point .point_table table tr {
  border: 0;
}
#CMMpop_point .point_table table th, #CMMpop_point .point_table table td {
  text-align: left;
  font-weight: 500;
  height: 34px;
  vertical-align: middle;
}

@media screen and (max-width: 767px) {
  #CMMpop_point .point_table {
    padding: 30px;
    flex-direction: column;
    gap: 15px;
  }
  #CMMpop_point .point_table table {
    font-size: 14px;
  }
}
/* 메인 배너 팝업 */
#CMMpopbanner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  overflow: hidden auto;
  visibility: hidden;
  opacity: 0;
  z-index: -1;
  -webkit-overflow-scrolling: touch;
  transition: opacity 500ms;
}
#CMMpopbanner:not(.on) {
  display: none;
}
#CMMpopbanner.on {
  overflow-y: auto;
  visibility: visible;
  opacity: 1;
  z-index: 140;
}
#CMMpopbanner .banner_layer {
  display: flex;
  justify-content: center;
  align-items: center;
}
#CMMpopbanner .pop_layer {
  display: none;
  vertical-align: middle;
}
#CMMpopbanner .pop_layer.on {
  display: block;
}
#CMMpopbanner .pop_layer a {
  display: block;
  width: 100%;
  height: 100%;
}
#CMMpopbanner .pop_layer .portrait {
  display: none;
}
#CMMpopbanner .pop_layer .landscape {
  max-width: 800px;
}
#CMMpopbanner .pop_layer .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
  background: #000;
  padding-left: 16px;
}
#CMMpopbanner .pop_layer .checkbox [type=checkbox] {
  display: none;
}
#CMMpopbanner .pop_layer .checkbox label {
  position: relative;
  display: inline-block;
  font-size: 16px;
  color: #c8c8c8;
  line-height: 20px;
}
#CMMpopbanner .pop_layer .checkbox label:before {
  content: "";
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  left: 0;
  width: 20px;
  height: 20px;
  text-indent: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg style='fill:%23fff; stroke:%23707070'%3E%3Cpath style='stroke:none' d='M0 0h20v20H0z'/%3E%3Cpath style='fill:none' d='M.5.5h19v19H.5z'/%3E%3C/g%3E%3Cpath data-name='icon/check' d='m-1-1 5 5 7-7' transform='translate(5.5 9.5)' style='stroke:%235b5b5b; stroke-width: 1.5px; fill:none'/%3E%3C/svg%3E%0A");
  background-size: 100% 100%;
}
#CMMpopbanner .pop_layer .banner_close {
  width: 50px;
  height: 50px;
  position: relative;
  margin-right: 2px;
}
#CMMpopbanner .pop_layer .banner_close:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17.06' height='17.06' viewBox='0 0 17.06 17.06'%3E%3Cpath data-name='268' d='m11243.666-14943.333 16 16' transform='translate(-11243.136 14943.863)' style='fill:none; stroke:%23707070; stroke-width: 1.5px'/%3E%3Cpath data-name='269' d='m0 0 16 16' transform='rotate(-90 8.53 7.999)' style='fill:none; stroke:%23707070; stroke-width: 1.5px'/%3E%3C/svg%3E%0A");
  background-size: 100% 100%;
}

/* 포인트 구매 */
.pop_wrap.pop_purchase .pop_layer {
  max-height: 100%;
}
.pop_wrap.pop_purchase .pop_layer:not(.taiwan) {
  max-width: 520px;
}
.pop_wrap.pop_purchase .pop_layer:not(.taiwan) .info.purchase {
  max-width: 253px;
}
.pop_wrap.pop_purchase .pop_layer.taiwan {
  overflow: hidden;
  max-width: 812px;
}
.pop_wrap.pop_purchase .pop_layer.taiwan .info.purchase {
  max-width: 434px;
}
.pop_wrap.pop_purchase .pop_contents {
  padding-top: 34px;
  overflow-y: auto;
}
.pop_wrap.pop_purchase .pop_contents:not(.has-sitcky) {
  height: calc(100% - 96px);
  padding-bottom: 60px;
}
.pop_wrap.pop_purchase .pop_contents.has-sitcky {
  height: auto;
  max-height: calc(100vh - (var(--header) + var(--header) + var(--header) + 106px));
}
.pop_wrap.pop_purchase .shop-item {
  text-align: center;
}
.pop_wrap.pop_purchase .shop-item .img-wrap {
  margin: 0 auto;
  width: auto;
}
.pop_wrap.pop_purchase .shop-item .text_wrap {
  margin-top: 39px;
}
.pop_wrap.pop_purchase .shop-item .text_wrap .title {
  font-size: 20px;
  font-weight: 600;
  line-height: 160%;
}
.pop_wrap.pop_purchase .shop-item .text_wrap .title + .info_wrap {
  margin-top: 23px;
}
.pop_wrap.pop_purchase .shop-item .text_wrap .title + p {
  color: #4B5056;
}
.pop_wrap.pop_purchase .shop-item .text_wrap .title + p + .info_wrap {
  margin-top: 13px;
}
.pop_wrap.pop_purchase .shop-item .text_wrap .number-purchase {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 30px 0;
}
.pop_wrap.pop_purchase .shop-item .text_wrap .number-purchase .title {
  display: block;
  width: 110px;
  text-align: left;
}
.pop_wrap.pop_purchase .shop-item .text_wrap .number-purchase .num-wrap {
  width: calc(100% - 118px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 623px;
  gap: 4px 20px;
}
.pop_wrap.pop_purchase .shop-item .text_wrap .number-purchase .num-wrap .input-text,
.pop_wrap.pop_purchase .shop-item .text_wrap .number-purchase .num-wrap .btn {
  height: 58px;
  line-height: 56px;
}
.pop_wrap.pop_purchase .shop-item .text_wrap .number-purchase .num-wrap .btn.large {
  min-width: 78px;
  padding: 0;
}
.pop_wrap.pop_purchase .shop-item .text_wrap .number-purchase .num-wrap .input-num-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 305px;
  gap: 0;
}
.pop_wrap.pop_purchase .shop-item .text_wrap .number-purchase .num-wrap .input-num-wrap .input-text {
  width: 100%;
  border-top: 1px solid var(--gray-5);
  border-bottom: 1px solid var(--gray-5);
  text-align: center;
}
.pop_wrap.pop_purchase .shop-item .text_wrap .number-purchase .num-wrap .input-num-wrap .btn {
  font-size: 28px;
  font-weight: 400;
}
.pop_wrap.pop_purchase .shop-item .text_wrap .number-purchase .num-wrap .input-num-wrap .btn.minus {
  border-radius: 4px 0 0 4px;
}
.pop_wrap.pop_purchase .shop-item .text_wrap .number-purchase .num-wrap .input-num-wrap .btn.plus {
  border-radius: 0 4px 4px 0;
}
.pop_wrap.pop_purchase .shop-item .text_wrap .number-purchase .num-wrap .input-num-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}
.pop_wrap.pop_purchase .shop-item .text_wrap .number-purchase .num-wrap .input-num-control .btn {
  flex: 1;
  font-size: 15px;
  border-radius: 4px;
}
.pop_wrap.pop_purchase .shop-item .text_wrap .total-price {
  padding: 7px;
  border: 1px solid var(--gray-6);
  background: var(--gray-7);
  text-align: center;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.5;
}
.pop_wrap.pop_purchase .shop-item .text_wrap .total-price .unit {
  font-size: 30px;
  font-weight: 700;
}
.pop_wrap.pop_purchase .shop-item .info_wrap {
  padding: 20px 10px;
  border-top: 1px solid #f3f4f8;
  border-bottom: 1px solid #f3f4f8;
  background: #f9fafC;
}
.pop_wrap.pop_purchase .shop-item .info_wrap .info.purchase {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pop_wrap.pop_purchase .shop-item .check-wrap {
  margin-top: 16px;
}
.pop_wrap.pop_purchase .shop-item .noti {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.pop_wrap.pop_purchase .shop-item .noti .noti-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}
.pop_wrap.pop_purchase .shop-item .noti p {
  font-size: 14px;
  color: #4B5056;
}
.pop_wrap.pop_purchase .shop-item .btns {
  margin-top: 20px;
}
.pop_wrap.pop_purchase .shop-item.twd .title .tit {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
}
.pop_wrap.pop_purchase .purchase_complete {
  margin-top: -10px;
  margin-bottom: 40px;
  padding: 20px;
  border-radius: 4px;
  background: #F9FAFC;
  color: #4B5056;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.pop_wrap.pop_purchase .purchase_complete .underline {
  color: #448FFF;
  word-break: break-all;
  text-decoration-line: underline;
}
.pop_wrap.pop_purchase .purchase-coupon {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding: 16px 24px;
  border-radius: 2px;
  background: #E8EAF0;
}
.pop_wrap.pop_purchase .purchase-coupon .lable {
  width: 56px;
}
.pop_wrap.pop_purchase .purchase-coupon .copy-wrap {
  width: calc(100% - 56px - 16px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pop_wrap.pop_purchase .my_point {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding: 20px 0;
  border-top: 1px solid #F3F4F8;
  border-bottom: 1px solid #F3F4F8;
  color: #4B5056;
}
.pop_wrap.pop_purchase .my_point > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 253px;
  margin: 0 auto;
}
.pop_wrap.pop_purchase .repurchase .box.scroll {
  overflow-y: auto;
  height: 218px;
  margin-bottom: 24px;
  padding: 20px;
  border-top: 1px solid #F3F4F8;
  border-bottom: 1px solid #F3F4F8;
  background: #F9FAFC;
}
.pop_wrap.pop_purchase .repurchase .box.scroll .box-title {
  font-size: 16px;
}
.pop_wrap.pop_purchase .repurchase .box.scroll .box-title + p {
  margin-top: 16px;
}
.pop_wrap.pop_purchase .repurchase .box.scroll p {
  font-size: 14px;
}
.pop_wrap.pop_purchase .repurchase .data-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pop_wrap.pop_purchase .repurchase .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pop_wrap.pop_purchase .repurchase .item .title-wrap {
  width: 60%;
}
.pop_wrap.pop_purchase .repurchase .item .title-wrap .title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 26px;
}
.pop_wrap.pop_purchase .repurchase .item .title-wrap .date {
  color: #898E94;
  font-size: 14px;
  line-height: 160%;
}
.pop_wrap.pop_purchase .repurchase .item .btn {
  width: 38.8%;
  height: 56px;
}
.pop_wrap.pop_purchase .repurchase .item .btn.disabled {
  background: #656565;
}

@media screen and (max-width: 767px) {
  .pop_wrap.pop_purchase .pop_contents:not(.has-sitcky) {
    padding-bottom: 30px;
  }
  .pop_wrap.pop_purchase .shop-item .img-wrap {
    width: 100% !important;
  }
  .pop_wrap.pop_purchase .shop-item .info_wrap {
    margin-left: -20px;
    margin-right: -20px;
    padding: 16px 8px;
  }
  .pop_wrap.pop_purchase .shop-item .info_wrap .info.purchase {
    max-width: 75vw;
    padding: 0 20px;
  }
  .pop_wrap.pop_purchase .shop-item .text_wrap {
    margin-top: 29px;
  }
  .pop_wrap.pop_purchase .shop-item .text_wrap .title {
    font-size: 16px;
  }
  .pop_wrap.pop_purchase .shop-item .text_wrap .title + .info_wrap {
    margin-top: 16px;
  }
  .pop_wrap.pop_purchase .shop-item .text_wrap .number-purchase .num-wrap {
    min-width: 210px;
    max-width: 305px;
    flex-direction: column;
    align-content: stretch;
  }
  .pop_wrap.pop_purchase .shop-item .text_wrap .number-purchase .num-wrap .btn.large {
    min-width: 60px;
  }
  .pop_wrap.pop_purchase .shop-item .text_wrap .number-purchase .num-wrap .input-num-wrap,
  .pop_wrap.pop_purchase .shop-item .text_wrap .number-purchase .num-wrap .input-num-control {
    width: 100%;
  }
  .pop_wrap.pop_purchase .shop-item .noti {
    margin-top: 16px;
    gap: 8px;
  }
  .pop_wrap.pop_purchase .shop-item .noti .noti-title {
    font-size: 16px;
  }
  .pop_wrap.pop_purchase .purchase_complete {
    margin-top: -18px;
    margin-bottom: 20px;
  }
  .pop_wrap.pop_purchase .purchase-coupon {
    margin-top: 16px;
  }
  .pop_wrap.pop_purchase .purchase-coupon .label {
    display: none;
  }
  .pop_wrap.pop_purchase .purchase-coupon .copy-wrap {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }
  .pop_wrap.pop_purchase .purchase-coupon .copy-wrap .btn_copy:before {
    content: "쿠폰번호 ";
  }
  .pop_wrap.pop_purchase .my_point {
    margin-top: 16px;
  }
  .pop_wrap.pop_purchase .repurchase .box.scroll {
    height: 160px;
  }
}
@media screen and (max-height: 903px) {
  .pop_wrap.pop_purchase:not(.taiwan):not(.complete) {
    align-items: flex-start;
  }
}
@media screen and (max-height: 975px) {
  /*
  	.pop_wrap.pop_purchase.taiwan	{
  		align-items: flex-start;
  	}
  	 */
}
/* 게시글 목록 공통 */
@media screen and (min-width: 1200px) {
  .btn_wrap + .board_wrap {
    margin-top: 26px;
  }
}
[class^=board_list] .title .head_text:not(.box) {
  margin-right: 4px;
  color: var(--gold-1);
}
[class^=board_list] .title .head_text.box {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 26px;
  line-height: 1;
  border-radius: 2px;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  max-width: 137px;
  margin-right: 4px;
  padding: 0 8px;
  background-color: #bf8c6f;
}
@media screen and (mAX-width: 767px) {
  [class^=board_list] .title .head_text.box {
    height: 24px;
    font-size: 12px;
  }
}
[class^=board_list] li:not(.board_head) .title,
[class^=board_list] .board_item .title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
[class^=board_list] li:not(.board_head) .title .tit,
[class^=board_list] .board_item .title .tit {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[class^=board_list] .titicons {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.board_list_img .list li .img,
.board_list_event .list li .img {
  position: relative;
  overflow: hidden;
}
.board_list_img .list li .img .thumb,
.board_list_event .list li .img .thumb {
  background-position: 50% 50%;
  background-size: cover;
  transition: all 0.4s linear;
}
.board_list_img .list li:hover .thumb,
.board_list_event .list li:hover .thumb {
  transform: scale(1.1);
}

/* 게시판 목록 : 일반, 공지 */
.board_list li.board_head > div, .board_list li.board_head > a,
.board_list li.board_item > div,
.board_list li.board_item > a {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 79px;
  padding: 0;
}
.board_list li.board_head .info_wrap .info li:before {
  display: none;
}
.board_list li.board_item {
  border-top: solid 1px var(--line-gray);
}
.board_list li.board_item:last-child {
  border-bottom: solid 1px var(--line-gray);
}
.board_list li.board_item.fixed {
  background-color: var(--gray-6);
}
.board_list li.board_item .text {
  display: flex;
  align-items: center;
}
.board_list li.board_item .text .title {
  gap: 4px;
}
.board_list li.board_item .text .title .tit {
  width: fit-content;
}
.board_list li.board_item .desc {
  position: relative;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board_list li.board_item .desc > span:not(.titicons) {
  max-width: 400px;
  margin-left: 4px;
}
.board_list li.board_item .desc .titicons {
  position: absolute;
  top: calc(50% - 8px);
  right: -40px;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 36px;
  padding-left: 4px;
}
.board_list li.board_item .titicons .ico_new {
  width: 16px;
  height: 16px;
}
.board_list li.board_item .titicons .titicon_img {
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-image: url("../img/titicon_img.svg");
  background-position: 50% 50%;
  background-size: cover;
  display: inline-block;
  vertical-align: middle;
}

@media screen and (min-width: 1200px) {
  .board_list {
    border-color: solid 1px var(--black);
  }
  .board_list li.board_head .text,
  .board_list li.board_item .text {
    width: 48%;
    max-width: 730px;
    padding: 0 30px;
  }
  .board_list li.board_head .text .title,
  .board_list li.board_item .text .title {
    max-width: 520px;
  }
  .board_list li.board_head .info_wrap,
  .board_list li.board_item .info_wrap {
    width: 52%;
  }
  .board_list li.board_head .info_wrap .info.author,
  .board_list li.board_item .info_wrap .info.author {
    width: 48%;
    max-width: 363px;
  }
  .board_list li.board_head .info_wrap .info.author .img_profile + span,
  .board_list li.board_item .info_wrap .info.author .img_profile + span {
    width: calc(100% - 47px);
    max-width: 266px;
  }
  .board_list li.board_head .info_wrap .info.reaction,
  .board_list li.board_item .info_wrap .info.reaction {
    width: 52%;
  }
  .board_list li.board_head .info_wrap .info.reaction li,
  .board_list li.board_item .info_wrap .info.reaction li {
    padding: 0 14px;
  }
  .board_list li.board_head .info_wrap .info.reaction li.date,
  .board_list li.board_item .info_wrap .info.reaction li.date {
    width: 170px;
  }
  .board_list li.board_head .info_wrap .info.reaction li.view, .board_list li.board_head .info_wrap .info.reaction li.like,
  .board_list li.board_item .info_wrap .info.reaction li.view,
  .board_list li.board_item .info_wrap .info.reaction li.like {
    width: calc((100% - 170px) / 2);
  }
  .board_list li.board_head {
    border-top: 1px solid #000;
    color: var(--gray-1);
    font-size: 16px;
  }
  .board_list li.board_head .text .title,
  .board_list li.board_head .info_wrap .info li {
    font-size: inherit;
    color: inherit;
  }
  .board_list li.board_head .text .title {
    text-align: center;
  }
  .board_list li.board_head .info_wrap .info {
    justify-content: center;
  }
  .board_list li.board_head .info_wrap .info li {
    justify-content: center;
  }
}
@media screen and (max-width: 1199px) {
  .board_list li.board_head {
    display: none;
  }
  .board_list li.board_item {
    margin-top: -1px;
  }
  .board_list li.board_item a {
    gap: 16px;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px;
  }
  .board_list li.board_item .text {
    width: 100%;
  }
  .board_list li.board_item .info_wrap .info.reaction {
    gap: 8px;
  }
  .tab + .board {
    margin-top: 0;
    padding-top: 100px;
  }
  .post_vote .btn_submit {
    min-width: 120px;
    height: 40px;
    font-size: 20px;
    letter-spacing: -0.45px;
  }
}
@media screen and (max-width: 767px) {
  .board_list li.board_item a {
    font-size: 14px;
  }
  .board_list li.board_item .desc {
    max-width: 320px;
  }
}
@media screen and (max-width: 472px) {
  .board_list li.board_item .desc {
    max-width: 228px;
  }
}
/* 이미지 게시판 리스트 */
.board_list_img .list:not(.swiper-wrapper) {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.board_list_img .list:not(.swiper-wrapper) li .title {
  gap: 8px;
}
.board_list_img .list:not(.swiper-wrapper) li .info_wrap {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px 16px;
}
.board_list_img .list:not(.swiper-wrapper) li .info_wrap .info.reaction {
  gap: 16px;
}
.board_list_img .list:not(.swiper-wrapper) li .info_wrap .info.author {
  width: 100%;
  min-height: 36px;
  order: 3;
}
.board_list_img .list:not(.swiper-wrapper) li .img .thumb {
  padding-top: 63.16%;
}
.board_list_img .list:not(.swiper-wrapper) li .text_wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 28px 36px;
  border: solid 1px var(--line-gray);
  border-top: 0;
  background-color: #f8f8fa;
}

@media screen and (min-width: 1200px) {
  /* 이미지/동영상 게시판 리스트 3분할 */
  .board_list_img:not(.archive) .list > li {
    position: relative;
    width: calc((100% - 48px) / 3);
  }
  /* 아카이브 게시판 리스트 4분할 */
  .board_list_img.archive .list:not(.swiper-wrapper) > li {
    position: relative;
    width: calc((100% - 72px) / 4);
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  /* 이미지/동영상/아카이브 2분할 */
  .board_list_img .list:not(.swiper-wrapper) > li {
    width: calc((100% - 20px) / 2);
  }
}
@media screen and (max-width: 1199px) {
  .board_list_img .list:not(.swiper-wrapper) {
    gap: 20px;
    padding: 20px 20px 0;
  }
  .board_list_img .list:not(.swiper-wrapper) li .info_wrap {
    gap: 8px;
  }
  .board_list_img .list:not(.swiper-wrapper) li .text_wrap {
    gap: 8px;
    padding: 20px;
  }
}
@media screen and (min-width: 768px) {
  .board_list_img .list li .title .tit {
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.8;
  }
  .board_list_img .list li .title .head_text + .tit {
    max-width: calc(100% - 137px);
  }
}
@media screen and (max-width: 767px) {
  .board_list_img .list:not(.swiper-wrapper) {
    gap: 24px;
  }
  .board_list_img .list:not(.swiper-wrapper) > li {
    width: 100%;
  }
  .board_list_img .list:not(.swiper-wrapper) li .title {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .board_list_img .list:not(.swiper-wrapper) li .title .tit {
    width: 100%;
    line-height: 1.6;
  }
}
/* 동영상 게시판 리스트 */
.board_list_img.video .list .info_wrap {
  display: none;
}
.board_list_img.video .list a:hover .thumb {
  position: relative;
}
.board_list_img.video .list a:hover .thumb:before, .board_list_img.video .list a:hover .thumb:after {
  content: "";
  position: absolute;
}
.board_list_img.video .list a:hover .thumb:before {
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
.board_list_img.video .list a:hover .thumb:after {
  top: 50%;
  left: 50%;
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 60px;
  height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='29.25' stroke='%23fff' stroke-width='1.5'/%3E%3Cpath d='M41.275 29.244a1.45 1.45 0 0 1 0 2.512L23.872 41.803a1.45 1.45 0 0 1-2.175-1.255V20.452a1.45 1.45 0 0 1 2.175-1.256l17.403 10.048z' fill='%23fff'/%3E%3C/svg%3E%0A");
  transform: translate(-50%, -50%);
}

/* 아카이브 게시판 리스트 4분할 */
.board_list_img.archive .list {
  /* 아카이브 게시판 리스트 5분할 썸네일 비율 */
}
.board_list_img.archive .list li {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--white);
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.board_list_img.archive .list li:hover {
  color: #4f2d1a;
  text-shadow: none;
}
.board_list_img.archive .list li:hover .sub_txt {
  opacity: 70%;
}
.board_list_img.archive .list li .sub_txt {
  font-size: 16px;
}
.board_list_img.archive .list li a {
  display: block;
  overflow: hidden;
  position: relative;
  border: solid 1px rgba(255, 255, 255, 0.15);
}
.board_list_img.archive .list li a:hover {
  border: solid 1px rgba(255, 221, 155, 0.3);
}
.board_list_img.archive .list li a .img .thumb {
  padding-top: 49.7%;
}
.board_list_img.archive .list li a .mask_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.3);
}
.board_list_img.archive .list li:not(.character) .sub_txt {
  opacity: 0.7;
}
.board_list_img.archive .list li:not(.character) .mask_wrap {
  background-color: rgba(0, 0, 0, 0.5);
}
.board_list_img.archive .list li:not(.character):hover {
  color: #4f2d1a;
}
.board_list_img.archive .list li:not(.character):hover .mask_wrap {
  background: linear-gradient(120deg, rgba(193, 108, 23, 0.9) 0%, rgba(252, 206, 114, 0.9) 52%, rgba(193, 108, 23, 0.9) 100%);
}
.board_list_img.archive .list li.character {
  background-image: linear-gradient(to bottom, #4a4a4a 0%, #262626);
}
.board_list_img.archive .list li.character:hover {
  background-image: linear-gradient(116deg, #c16c17 0%, #fcce72 52%, #c16c17 100%);
}
.board_list_img.archive .list li.character:hover .mask_wrap {
  background: transparent;
}
.board_list_img.archive .list li.character:hover .mask_wrap .title {
  align-self: flex-end;
}
.board_list_img.archive .list li.class a .mask_wrap {
  padding: 0 20px;
}
.board_list_img.archive .list li.class .sub_txt,
.board_list_img.archive .list li.class .title {
  display: block;
  width: 100%;
  text-align: center;
}
.board_list_img.archive .list.swiper-wrapper > li .img .thumb {
  padding-top: 106.43%;
}

@media screen and (max-width: 1199px) {
  .board_list_img.archive .list:not(.swiper-wrapper) {
    padding-top: 0;
  }
  .board_list_img.archive .list:not(.swiper-wrapper):not(.mo-all-view) li:nth-child(n+5) {
    display: none;
  }
  .board_list_img.archive .list:not(.swiper-wrapper).mo-all-view li:nth-child(n+5) {
    display: block;
  }
}
/* 아트워크 게시판 */
.media_artwork .list {
  position: relative;
}
.media_artwork .list .inner {
  overflow: hidden;
  height: 100%;
  padding: 1px;
}
.media_artwork .list .item .thumb {
  position: relative;
  display: block;
  height: 100%;
  padding-top: 30%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  box-sizing: border-box;
  transform: translateZ(0);
}
.media_artwork .list .thumb:after {
  display: none;
}
.media_artwork .list a:hover .thumb:after {
  opacity: 1;
}
.media_artwork .list a:hover p {
  opacity: 1;
}
.media_artwork .list p {
  opacity: 0;
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  transition: 0.4s;
  color: #fff;
  background-color: transparent;
}
.media_artwork .list .empty p {
  opacity: 1;
  position: relative;
  left: inherit;
  right: inherit;
  bottom: inherit;
  transition: 0.4s;
  color: #0e0e0e;
  background-color: transparent;
}
.media_artwork .zoom {
  opacity: 0;
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  transition: z-index 0s 0.4s, opacity 0.4s 0s;
  background-color: rgba(0, 0, 0, 0.8);
  will-change: auto;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.media_artwork .zoom.on {
  opacity: 1;
  z-index: 120;
  overflow: auto;
  overflow-x: hidden;
  transition: z-index 0s 0s, opacity 0s 0s;
  will-change: opacity;
}
.media_artwork .zoom .swiper-slide {
  width: 100%;
}
.media_artwork .zoom .item {
  width: 100%;
  height: 100%;
}
.media_artwork .zoom .swiper-pagination {
  display: none;
  bottom: 28px;
}
.media_artwork .zoom .zoom_head {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 3;
  box-sizing: border-box;
}
.media_artwork .zoom .zoom_body {
  position: absolute;
  top: 120px;
  left: 200px;
  right: 200px;
  bottom: 120px;
  padding: 0;
  display: flex;
  align-items: center;
}
.media_artwork .zoom .zoom_body::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.6);
}
.media_artwork .zoom .zoom_body .inner {
  width: calc(100% - 80px);
  margin: auto;
}
.media_artwork .zoom .zoom_body .swiper-wrapper {
  align-items: center;
}
.media_artwork .zoom .zoom_body .item img {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
.media_artwork .zoom .zoom_body .item a {
  display: inline;
  height: auto;
}
.media_artwork .zoom .zoom_body .item a:before {
  display: inline-block;
  vertical-align: middle;
  content: "";
  height: 100%;
}
.media_artwork .zoom .swiper-prev,
.media_artwork .zoom .swiper-next {
  position: fixed;
  z-index: 1;
  margin-top: 30px;
}
.media_artwork .zoom .swiper-prev {
  left: 0;
}
.media_artwork .zoom .swiper-next {
  right: 0;
}
.media_artwork .zoom .swiper-prev:before,
.media_artwork .zoom .swiper-next:before {
  width: 100%;
  height: 100%;
}
.media_artwork .zoom .swiper-pagination-bullet {
  background-color: #fff;
}
.media_artwork .zoom .btn_zoom_down {
  padding: 11px 20px;
  border: solid 1px #fff;
  background-color: rgba(255, 255, 255, 0);
  color: #fff;
  line-height: 24px;
  display: inline-block;
  font-size: 16px;
}
.media_artwork .zoom .btn_zoom_down:before {
  width: 16px;
  height: 16px;
  display: inline-block;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.2 1v6.731L4.323 4.854 3.192 5.985l4.807 4.809 4.809-4.809-1.13-1.131-2.879 2.877V1H7.2zm7.2 9v3.2H1.599V10H0v4.799h16V10h-1.6z' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
  margin-right: 14px;
  vertical-align: middle;
  background-size: 100% 100%;
}
.media_artwork .zoom .btn_zoom_down:hover:before {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.2 1v6.731L4.323 4.854 3.192 5.985l4.807 4.809 4.809-4.809-1.13-1.131-2.879 2.877V1H7.2zm7.2 9v3.2H1.599V10H0v4.799h16V10h-1.6z' fill='%230E0E0E' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
}
.media_artwork .zoom .btn_zoom_down:hover {
  background: #fff;
  color: #0e0e0e;
}
.media_artwork .zoom .btn_close {
  width: 40px;
  height: 40px;
  top: 0;
  right: 40px;
  position: absolute;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.28 6.667 20 17.949 8.715 6.667l-2.05 2.05L17.949 20 6.667 31.282l2.05 2.051 11.282-11.282 11.282 11.282 2.052-2.05L22.05 20 33.333 8.718z' fill='%239E9E9E' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
}
.media_artwork .zoom .btn_close:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.28 6.667 20 17.949 8.715 6.667l-2.05 2.05L17.949 20 6.667 31.282l2.05 2.051 11.282-11.282 11.282 11.282 2.052-2.05L22.05 20 33.333 8.718z' fill='%23FFFFFF' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
}

@media screen and (max-width: 1199px) {
  .media_artwork .zoom .zoom_body {
    top: 80px;
    left: 60px;
    right: 60px;
    bottom: 80px;
  }
  .media_artwork .zoom .zoom_head {
    top: 20px;
  }
  .media_artwork .zoom .btn_zoom_down {
    padding: 11px 14px;
    font-size: 14px;
    line-height: 18px;
  }
  .media_artwork .zoom .btn_zoom_down:before {
    width: 14px;
    height: 14px;
    margin-right: 10px;
  }
  .media_artwork .zoom .btn_close {
    width: 30px;
    height: 30px;
    right: 20px;
  }
  .media_artwork .slick-next {
    width: 20px;
    height: 28px;
    right: -40px;
    right: calc(constant(safe-area-inset-left) - 40px);
    right: calc(env(safe-area-inset-left) - 40px);
  }
  .media_artwork .slick-prev {
    width: 20px;
    height: 28px;
    left: -40px;
    left: calc(constant(safe-area-inset-left) - 40px);
    left: calc(env(safe-area-inset-left) - 40px);
  }
}
@media screen and (max-width: 767px) {
  .media_artwork .zoom .zoom_body {
    top: 80px;
    left: 40px;
    right: 40px;
    bottom: 80px;
  }
  .media_artwork .zoom .zoom_head {
    top: 20px;
  }
  .media_artwork .zoom .btn_zoom_down {
    padding: 11px 14px;
    font-size: 14px;
    line-height: 18px;
  }
  .media_artwork .zoom .btn_zoom_down:before {
    width: 14px;
    height: 14px;
    margin-right: 10px;
  }
  .media_artwork .zoom .btn_close {
    width: 30px;
    height: 30px;
    right: 20px;
  }
  .media_artwork .slick-next {
    right: -30px;
  }
  .media_artwork .slick-prev {
    left: -30px;
  }
}
/* 이벤트 게시판 */
.board_list_event .list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.board_list_event .list a {
  display: flex;
  align-items: center;
  background-color: var(--gray-6);
  box-shadow: 0 0 0 1px var(--line-gray);
}
.board_list_event .list a .img .thumb {
  width: 100%;
  aspect-ratio: 1/0.2072;
}
.board_list_event .list a .text_wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.board_list_event .list a .text_wrap .event_tag {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: 24px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
}
.board_list_event .list a .text_wrap .event_tag:before, .board_list_event .list a .text_wrap .event_tag:after {
  position: absolute;
  content: "";
  width: calc(100% - 12px);
  height: 0;
  left: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.board_list_event .list a .text_wrap .event_tag:before {
  top: 0;
  border-bottom: 12px solid #b99974;
}
.board_list_event .list a .text_wrap .event_tag:after {
  bottom: 0;
  border-top: 12px solid var(--gold-1);
}
.board_list_event .list a .text_wrap .event_tag.end:before {
  border-bottom: 12px solid #8f8f8f;
}
.board_list_event .list a .text_wrap .event_tag.end:after {
  border-top: 12px solid #7b7b7b;
}
.board_list_event .list a .text_wrap .event_tag span {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 1;
}
.board_list_event .list a .text_wrap .title {
  gap: 4px;
}
.board_list_event .list a .text_wrap .title .tit {
  max-width: calc(100% - 40px);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
}
.board_list_event .list a .info_wrap {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

@media screen and (min-width: 1200px) {
  .board_list_event .list a .img {
    width: 57%;
  }
  .board_list_event .list a .text_wrap {
    width: 43%;
    padding: 0 40px;
  }
  .board_list_event .list a .info_wrap {
    min-height: 57px;
  }
}
@media screen and (max-width: 1199px) {
  .board_list_event .list a {
    padding: 20px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 14px;
  }
}
@media screen and (max-width: 767px) {
  .board_list_event .list a .text_wrap .title .tit {
    font-size: 16px;
  }
  .board_list_event .list a .text_wrap .event_tag {
    padding: 0 15px;
    font-size: 12px;
  }
}
/* 한줄 게시판 */
.board.list.single .textarea {
  border: solid 1px #e1e1e1;
  padding: 24px 20px 20px 24px;
}
.board.list.single .textarea .bottom_area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.board.list.single .textarea .counter {
  color: #9e9e9e;
  font-size: 14px;
  line-height: 22px;
  margin-right: 20px;
}
.board.list.single .textarea .btn_register {
  font-size: 14px;
  line-height: 22px;
  padding: 6px 16px;
  border: solid 1px #e1e1e1;
  color: #e1e1e1;
}
.board.list.single .textarea .btn_register.btn_on {
  border: solid 1px #0e0e0e;
  background: #0e0e0e;
  color: #fff;
}
.board.list.single .textarea .btn_register:hover {
  border: solid 1px #0e0e0e;
  color: #0e0e0e;
  background: #fff;
}
.board.list.single .textarea .btn_cancel {
  font-size: 14px;
  line-height: 22px;
  padding: 6px 16px;
  border: solid 1px #e1e1e1;
  color: #9e9e9e;
}
.board.list.single .textarea .btn_cancel:hover {
  border: solid 1px #0e0e0e;
  color: #0e0e0e;
}
.board.list.single .textarea .user_id {
  font-size: 14px;
  line-height: 22px;
}
.board.list.single .textarea textarea {
  margin-top: 10px;
  display: block;
  line-height: 24px;
}
.board.list.single .textarea textarea::-webkit-input-placeholder {
  color: #bebebe !important;
}
.board.list.single .textarea textarea::-moz-placeholder {
  color: #bebebe !important;
}
.board.list.single .textarea textarea:-ms-input-placeholder {
  color: #bebebe !important;
}
.board.list.single .textarea textarea:-moz-placeholder {
  color: #bebebe !important;
}
.board.list.single .textarea .btns {
  display: flex;
  align-items: center;
}
.board.list.single .textarea .btns button {
  margin-right: 10px;
}
.board.list.single .textarea .btns button:last-child {
  margin-right: 0;
}
.board.list.single .comment_reply {
  padding-bottom: 20px;
}
.board.list.single .comment_reply:last-child {
  border-bottom: 1px solid #e1e1e1;
}
.board.list.single .comment_reply .post_comment {
  margin-top: 10px;
  position: relative;
  padding: 0 20px 0 46px;
}
.board.list.single .comment_reply .post_comment span {
  display: inline;
  padding-right: 20px;
  position: relative;
  word-wrap: break-word;
}
.board.list.single .comment_reply .post_comment.titicon_new span:before {
  content: "";
  display: inline-block;
  position: absolute;
  right: 0;
  width: 8px;
  height: 8px;
  background: #e60606;
  border-radius: 50%;
  bottom: 6px;
}
.board.list.single .empty_wrap {
  margin: 0;
}
.board.list.single .empty_wrap .empty {
  border: none;
}
.board.list.single .date {
  color: #9e9e9e;
  font-size: 14px;
  line-height: 18px;
  padding-right: 0;
  padding-left: 24px;
  position: relative;
}
.board.list.single .date:after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background: #d8d8d8;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 10px;
  right: inherit;
  transform: translateY(-50%);
}
.board.list.single span {
  line-height: 24px;
}
.board.list.single.titicon_new {
  padding-right: 14px;
}
.board.list.single.titicon_new:before {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 10px;
  right: 0;
  width: 8px;
  height: 8px;
  background: #e60606;
  border-radius: 50%;
}
.board.list.single .titicons {
  display: none;
}
.board.list.single .titicons .titicon_new {
  width: 8px;
  height: 8px;
  background: #e60606;
  margin-left: 2px;
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
  margin-bottom: 2px;
}

/* 마이페이지 */
.info_guide {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-2);
}
.info_guide a {
  color: #448fff;
  text-decoration: underline;
}

.folding-area.folded {
  display: none;
}
.folding-area + .bdr-box {
  margin-top: 18px;
}

.my_page_wrap {
  display: flex;
  flex-wrap: wrap;
  padding-top: 100px;
}
.my_page_wrap .user_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px;
  border-radius: 2px;
  background-color: var(--gold-1);
  color: var(--white);
}
.my_page_wrap .user_wrap .greeting {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 47%;
  font-size: 28px;
}
.my_page_wrap .user_wrap .greeting p {
  text-align: center;
}
.my_page_wrap .user_wrap .user_info_wrap {
  display: flex;
  align-items: center;
  width: 47%;
  gap: 20px;
}
.my_page_wrap .user_wrap .user_info_wrap dl {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 76px;
  gap: 4px;
}
.my_page_wrap .user_wrap .user_info_wrap dl dt {
  color: var(--gray-5);
}
.my_page_wrap .user_wrap .user_info_wrap dl dd {
  font-size: 24px;
  font-weight: 600;
  color: var(--white);
}
.my_page_wrap .user_wrap .user_info_wrap p {
  width: 88%;
  text-align: center;
}
.my_page_wrap .bg-box {
  margin-top: 40px;
  padding: 17px 20px 20px;
  border-radius: 2px;
  background-color: var(--gray-7);
}
.my_page_wrap .bg-box .has-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.my_page_wrap .bg-box .has-detail .folding-switche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-2);
}
.my_page_wrap .bg-box .has-detail .folding-switche:not(.folded) > span:after {
  content: " 닫기";
}
.my_page_wrap .bg-box .has-detail .folding-switche.folding-switche.folded > span:after {
  content: " 자세히 보기";
}
.my_page_wrap .bg-box .has-detail .folding-switche.folded .folding-arr {
  transform: rotate(180deg);
}
.my_page_wrap .bg-box .has-detail .folding-arr {
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13.602 4.8-5.6 5.6-5.6-5.6' stroke='%23898E94' stroke-width='1.5' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
  transition: transform 0.3s ease-in-out;
}
.my_page_wrap .bg-box .bdr-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 60px;
  margin-top: 16px;
  padding: 16px 32px;
  border-radius: 2px;
  border: solid 1px var(--gray-5);
  background-color: var(--white);
}
.my_page_wrap .bg-box .bdr-box .check-group {
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 28px;
}
.my_page_wrap .my_board .board_item .purchase-number {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media screen and (min-width: 1200px) {
  .my_page_wrap {
    padding-left: 40px;
    padding-right: 40px;
    gap: 40px 122px;
  }
  .my_page_wrap > .title, .my_page_wrap > .my_nav {
    width: calc(100% - 122px - 976px);
  }
  .my_page_wrap > .user_wrap, .my_page_wrap > .my_board {
    width: 976px;
  }
  .my_page_wrap > .title, .my_page_wrap > .user_wrap {
    height: 136px;
  }
  .my_page_wrap > .title {
    font-size: 52px;
    font-weight: 600;
  }
  .my_page_wrap .greeting {
    height: 80px;
    padding: 0 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
  }
  .my_page_wrap .my_nav {
    padding-top: 59px;
    border-top: 2px solid var(--black);
  }
  .my_page_wrap .my_nav ul {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .my_page_wrap .my_nav ul li {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-3);
  }
  .my_page_wrap .my_nav ul li.current {
    color: var(--black);
  }
  .my_page_wrap .my_board .board_list li.board_head .text,
  .my_page_wrap .my_board .board_list li.board_item .text {
    max-width: 461px;
  }
  .my_page_wrap .my_board .board_list li.board_head .info_wrap,
  .my_page_wrap .my_board .board_list li.board_item .info_wrap {
    max-width: 515px;
  }
  .my_page_wrap .my_board .board_list li.board_head .info_wrap .info.author,
  .my_page_wrap .my_board .board_list li.board_item .info_wrap .info.author {
    max-width: 178px;
  }
  .my_page_wrap .my_board .board_list li.board_head .info_wrap .info.reaction,
  .my_page_wrap .my_board .board_list li.board_item .info_wrap .info.reaction {
    width: calc(100% - 178px);
  }
  .my_page_wrap .my_board .board_list li.board_head .info_wrap .info.author .img_profile + span,
  .my_page_wrap .my_board .board_list li.board_item .info_wrap .info.author .img_profile + span {
    max-width: 114px;
  }
  .my_page_wrap .my_board .board_list .purchase > div {
    padding: 0 20px;
    text-align: center;
  }
  .my_page_wrap .my_board .board_list .purchase > div.purchase-title {
    width: 31.28%;
  }
  .my_page_wrap .my_board .board_list .purchase > div.purchase-expiration {
    width: 18.71%;
  }
  .my_page_wrap .my_board .board_list .purchase > div.purchase-number {
    width: 31.08%;
  }
  .my_page_wrap .my_board .board_list .purchase > div.purchase-date {
    width: 18.93%;
  }
  .my_page_wrap .my_board .board_head .purchase {
    text-align: center;
  }
}
@media screen and (max-width: 1199px) {
  .my_page_wrap {
    padding: 30px 20px 0;
    gap: 40px;
  }
  .my_page_wrap > .title {
    display: none;
  }
  .my_page_wrap > .user_wrap, .my_page_wrap > .my_nav {
    width: 100%;
  }
  .my_page_wrap > .my_board {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
    padding-left: 20px;
    padding-right: 20px;
  }
  .my_page_wrap > .my_board > .board_wrap {
    margin-left: -20px;
    margin-right: -20px;
  }
  .my_page_wrap .my_nav ul {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .my_page_wrap .my_nav ul li {
    display: block;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-3);
    padding: 12px 20px;
    border-radius: 90px;
    background-color: var(--gray-6);
  }
  .my_page_wrap .my_nav ul li.current {
    background-color: var(--black);
    color: #fff;
  }
  .my_page_wrap .user_wrap {
    flex-direction: column;
    gap: 30px;
    padding-top: 49px;
    padding-bottom: 43px;
  }
  .my_page_wrap .user_wrap .greeting {
    width: fit-content;
    padding-left: 0;
  }
  .my_page_wrap .user_wrap .user_info_wrap {
    width: 100%;
    gap: 16px;
  }
  .my_page_wrap .user_wrap .user_info_wrap dl {
    position: relative;
    padding: 0 8px;
  }
  .my_page_wrap .user_wrap .user_info_wrap dl dt {
    font-size: 14px;
  }
  .my_page_wrap .user_wrap .user_info_wrap dl dd {
    font-size: 18px;
  }
  .my_page_wrap .user_wrap .user_info_wrap dl + dl:before {
    content: "";
    position: absolute;
    width: 1px;
    height: calc(100% - 5px);
    top: 2.5px;
    left: -16px;
    display: block;
    background: rgba(255, 255, 255, 0.3);
  }
  .my_page_wrap .user_wrap .user_info_wrap p {
    width: 100%;
  }
  .my_page_wrap .my_board .btn_wrap + .board_wrap {
    margin-top: 30px;
  }
  .my_page_wrap .my_board .board_list .purchase {
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .my_page_wrap .my_board .board_list .purchase > div {
    width: 100%;
  }
  .my_page_wrap .my_board .board_list .purchase > div.purchase-title {
    margin-bottom: 14px;
  }
  .my_page_wrap .my_board .board_list .purchase > div.purchase-expiration, .my_page_wrap .my_board .board_list .purchase > div.purchase-number, .my_page_wrap .my_board .board_list .purchase > div.purchase-date {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .my_page_wrap .my_board .board_list .purchase > div.purchase-expiration:before, .my_page_wrap .my_board .board_list .purchase > div.purchase-expiration:after, .my_page_wrap .my_board .board_list .purchase > div.purchase-number:before, .my_page_wrap .my_board .board_list .purchase > div.purchase-number:after, .my_page_wrap .my_board .board_list .purchase > div.purchase-date:before, .my_page_wrap .my_board .board_list .purchase > div.purchase-date:after {
    display: block;
  }
  .my_page_wrap .my_board .board_list .purchase > div.purchase-expiration:before, .my_page_wrap .my_board .board_list .purchase > div.purchase-number:before, .my_page_wrap .my_board .board_list .purchase > div.purchase-date:before {
    width: 62px;
    font-size: 14px;
  }
  .my_page_wrap .my_board .board_list .purchase > div.purchase-expiration:after, .my_page_wrap .my_board .board_list .purchase > div.purchase-number:after, .my_page_wrap .my_board .board_list .purchase > div.purchase-date:after {
    position: absolute;
    left: 62px;
    content: "";
    width: 1px;
    height: 12px;
    background: #B6BDC5;
  }
  .my_page_wrap .my_board .board_list .purchase > div.purchase-expiration .code, .my_page_wrap .my_board .board_list .purchase > div.purchase-number .code, .my_page_wrap .my_board .board_list .purchase > div.purchase-date .code {
    width: calc(100% - 62px - 20px - 76px);
  }
  .my_page_wrap .my_board .board_list .purchase > div.purchase-expiration .btn_copy, .my_page_wrap .my_board .board_list .purchase > div.purchase-number .btn_copy, .my_page_wrap .my_board .board_list .purchase > div.purchase-date .btn_copy {
    width: 76px;
  }
  .my_page_wrap .my_board .board_list .purchase > div.purchase-expiration:before {
    content: "만료 기간";
  }
  .my_page_wrap .my_board .board_list .purchase > div.purchase-number:before {
    content: "쿠폰 번호";
  }
  .my_page_wrap .my_board .board_list .purchase > div.purchase-date:before {
    content: "구매 일시";
  }
}
@media screen and (max-width: 767px) {
  .my_page_wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  .my_page_wrap .user_wrap .user_info_wrap dl {
    flex: auto;
    width: calc(50% - 8px);
  }
  .my_page_wrap .user_wrap .greeting,
  .my_page_wrap .user_wrap .greeting > a {
    display: flex;
    flex-direction: column;
  }
  .my_page_wrap .bg-box {
    margin-top: 60px;
    padding-bottom: 14px;
  }
  .my_page_wrap .bg-box .bdr-box,
  .my_page_wrap .bg-box .bdr-box .check-group {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .my_page_wrap .bg-box .bdr-box {
    gap: 20px;
  }
  .my_page_wrap .bg-box .bdr-box .check-group {
    gap: 12px;
  }
}
@media screen and (max-width: 430px) {
  .my_page_wrap .user_wrap .user_info_wrap {
    flex-wrap: wrap;
  }
  .my_page_wrap .user_wrap .user_info_wrap dl + dl:before {
    opacity: 0;
  }
}
/* 나의 포인트 */
.my_point_box {
  padding: 16px 40px 38px;
  border-radius: 2px;
  border: solid 1px var(--line-gray);
}
.my_point_box .data_board {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 80px;
}
.my_point_box .data_board dl {
  flex: 1;
  position: relative;
  padding: 12px 0 15px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.my_point_box .data_board dl + dl:before {
  content: "";
  position: absolute;
  display: block;
  left: -39px;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: var(--line-gray);
}
.my_point_box .data_board dl dd {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  align-items: flex-end;
}
.my_point_box .data_board dl dd .point {
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
}
.my_point_box .data_board dl dd .grade {
  width: 32px;
  height: 32px;
}
.my_point_box .progress-wrap {
  margin-top: 15px;
  padding-top: 58px;
  border-top: 2px solid var(--line-gray);
}

@media screen and (max-width: 767px) {
  .my_point_box {
    padding: 0 30px 40px;
  }
  .my_point_box .data_board {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
  }
  .my_point_box .data_board dl {
    width: 100%;
    min-height: 90px;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }
  .my_point_box .data_board dl + dl:before {
    width: 100%;
    top: 0;
    left: 0;
    height: 1px;
    margin-bottom: 30px;
  }
  .my_point_box .progress-wrap {
    margin-top: 0;
    border-top-width: 1px;
  }
}
.progress {
  position: relative;
  width: 100%;
  height: 28px;
  margin: 70px auto 26px;
  background-color: var(--gold-3);
  border-radius: 100px;
}
.progress .progress-bar {
  position: relative;
  height: 100%;
  width: 0;
  background-color: var(--gold-2);
  border-radius: 100px;
}
.progress .progress-bar .imhere {
  position: absolute;
  top: -48px;
  right: 0;
  width: 100px;
  height: 100px;
  transform: translateX(50%);
  z-index: 2;
}
.progress .progress-bar .imhere .character {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  background: transparent url("../img/progress_character.png") no-repeat 50% 50%;
  background-size: contain;
}
.progress .progress-bar .imhere .ballon {
  position: absolute;
  top: -22px;
  right: calc(100% + 2px);
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 177px;
  height: 50px;
  padding: 0 20px;
  border-radius: 100px;
  background-color: var(--gray-5);
  color: var(--gray-1);
}
.progress .progress-bar .imhere .ballon:before {
  position: absolute;
  right: 40px;
  bottom: -11px;
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10.9px 11px 0;
  border-color: transparent var(--gray-5) transparent transparent;
}
.progress .progress-unit {
  position: absolute;
  bottom: -26px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 52px;
  justify-content: flex-end;
}
.progress .progress-unit > p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  line-height: 1;
  color: var(--gray-2);
}

@media screen and (max-width: 767px) {
  .progress {
    margin: 36px auto 84px;
  }
  .progress .progress-bar .imhere {
    top: -28px;
    width: 70px;
    height: 70px;
  }
  .progress .progress-bar .imhere .ballon {
    left: 50%;
    top: calc(100% + 20px);
    max-width: 80vw;
    height: auto;
    min-height: 50px;
    transform: translate(-50%, 0);
    padding: 14px 28px;
    font-size: 14px;
  }
  .progress .progress-bar .imhere .ballon:before {
    display: none;
  }
}
.line_tab {
  margin-top: 60px;
}
.line_tab ul {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.line_tab ul li {
  position: relative;
  flex: 1;
  background-color: var(--gray-6);
}
.line_tab ul li:before, .line_tab ul li:after,
.line_tab ul li a:after {
  content: "";
  position: absolute;
  bottom: 0;
  background: var(--black);
}
.line_tab ul li:before, .line_tab ul li:after {
  width: 1px;
  height: 100%;
  opacity: 0;
  transform: scale3d(1, 0, 1);
  transform-origin: 50% 0%;
  transition: transform 0s 0.1s, opacity 0.1s;
  box-sizing: border-box;
}
.line_tab ul li:before {
  left: 0;
}
.line_tab ul li:after {
  right: 0;
}
.line_tab ul li a {
  position: relative;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 18px;
  color: var(--gray-2);
  transition: color 0.3s;
}
.line_tab ul li a:after {
  left: 0;
  width: 100%;
  height: 1px;
  transition: transform 0.3s;
}
.line_tab ul li.current, .line_tab ul li:focus {
  background-color: var(--white);
}
.line_tab ul li.current:before, .line_tab ul li.current:after, .line_tab ul li:focus:before, .line_tab ul li:focus:after {
  opacity: 1;
  transform: scale3d(1, 1, 1);
  transition: transform 0.3s;
  transition-delay: 0.3s;
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.line_tab ul li.current a, .line_tab ul li:focus a {
  color: var(--black);
}
.line_tab ul li.current a:after, .line_tab ul li:focus a:after {
  transform: translate3d(0, -56px, 0);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.point_list {
  margin-top: 28px;
}
.point_list .data-list {
  border-top: solid 1px var(--line-gray);
}
.point_list .data-list li {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 27.5px 30px;
  line-height: 1.3;
  border-bottom: solid 1px var(--line-gray);
}
.point_list .data-list li > p:not(.msg) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  gap: 4px;
}
.point_list .data-list li .point_right {
  text-align: right;
}
.point_list .data-list li .point_right strong.increase {
  color: #448fff;
}
.point_list .data-list li .point_right strong.decrease {
  color: #f40058;
}
.point_list .data-list li .date {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2;
  color: var(--gray-3);
}
@media screen and (min-width: 1200px) {
  .point_list .data-list li .msg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
@media screen and (max-width: 1199px) {
  .point_list .data-list li {
    flex-wrap: wrap;
  }
  .point_list .data-list li .msg {
    width: 100%;
  }
}
/* 내 계정 */
.my_account {
  padding-top: 40px;
}
.my_account h3.title {
  color: #0e0e0e;
  font-size: 24px;
  line-height: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e1e1e1;
}
.my_account .phone_register {
  width: 600px;
  margin: 40px auto 0;
  font-size: 16px;
  line-height: 24px;
}
.my_account .phone_register dt {
  padding-left: 18px;
  position: relative;
}
.my_account .phone_register dt:before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background: #000;
  position: absolute;
  top: 8px;
  left: 2px;
  transform: rotate(45deg);
}
.my_account .phone_register dd {
  margin-top: 14px;
  background: #f8f8f8;
  position: relative;
  height: 64px;
}
.my_account .phone_register dd input {
  width: 100%;
  height: 100%;
  padding: 20px 98px 20px 30px;
  font-size: 16px;
  line-height: 24px;
  color: #0e0e0e;
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
}
.my_account .phone_register dd .btn_register {
  padding: 7px 16px;
  font-size: 14px;
  line-height: 22px;
  border: 1px solid #e1e1e1;
  color: #0e0e0e;
  position: absolute;
  top: 14px;
  right: 20px;
  background: #fff;
}
.my_account .phone_register dd .btn_register:hover {
  border-color: #0e0e0e;
}
.my_account .note {
  width: 600px;
  margin: 20px auto 0;
  font-size: 14px;
  line-height: 20px;
  color: #5e5e5e;
  padding-left: 24px;
  position: relative;
}
.my_account .note:before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background: #5e5e5e;
  position: absolute;
  top: 8px;
  left: 10px;
  border-radius: 50%;
}
.my_account .note a {
  color: #1c76ee;
  text-decoration: underline;
}

/* 동영상 게시판 리스트 */
/* 게시글 리스트 */
/* 게시글 상세 */
.board.view {
  margin-top: 60px;
  max-width: 1200px;
  display: flex;
  justify-content: center;
  gap: 24px;
}
.board.view .board_content {
  width: 808px;
}
.board.view .board_content.full {
  width: 100%;
}
.board.view .board_content > .title {
  color: #0e0e0e;
  font-size: 24px;
  line-height: 36px;
}
.board.view .board_content .title_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ddd1ca;
  border-bottom: 1px solid #ddd1ca;
  padding: 30px;
}
.board.view .board_content .title_wrap .title {
  width: calc(100% - 30px);
  line-height: 1.5;
}
.board.view .board_content .title_wrap .title.bold {
  font-weight: 400;
  font-size: 22px;
}
.board.view .btn_more_wrap {
  display: none;
}
.board.view .top_wrap {
  position: relative;
  padding: 15px 30px;
  border-bottom: 1px solid #ddd1ca;
}
.board.view .top_wrap .info_wrap {
  width: 100%;
  margin-top: 0;
  justify-content: space-between;
}
.board.view .top_wrap .info_wrap .img_profile.small {
  width: 32px;
  height: 32px;
}
.board.view .top_wrap .btns {
  display: flex;
  align-items: center;
}
.board.view .info_wrap .info.reaction {
  gap: 8px;
}
.board.view .info_wrap .info.reaction li {
  font-size: 14px;
  letter-spacing: -0.35px;
}
.board.view .comment_reply .user .user_wrap .name,
.board.view .user_id {
  font-size: 14px;
  letter-spacing: -0.35px;
  color: #808080;
}
.board.view .comment_reply .user .user_wrap .name .gm,
.board.view .user_id .gm {
  margin-right: 6px;
}
.board.view .user_id {
  margin-bottom: 10px;
  display: block;
  font-weight: 400;
}
.board.view .post {
  font-size: 16px;
  line-height: 1.3;
  color: #0e0e0e;
  padding-top: 40px;
}
.board.view .post p {
  clear: both;
}
.board.view .post .table table td,
.board.view .post .table table th {
  vertical-align: middle;
}
.board.view .post,
.board.view .post_vote {
  padding-left: 30px;
  padding-right: 30px;
}
.board.view .tag_link {
  margin-top: 60px;
}
.board.view .tag_link:after {
  content: "";
  display: block;
  clear: both;
}
.board.view .tag_link li {
  float: left;
}
.board.view .tag_link li:nth-child(n+2) {
  margin-left: 4px;
}
.board.view .tag_link li a {
  color: #9e9e9e;
  font-size: 16px;
  line-height: 24px;
}
.board.view .tag_link li a:hover {
  color: #1c76ee;
  text-decoration: underline;
}
.board.view .reply_wrap {
  margin-top: 70px;
  text-align: right;
  position: relative;
  line-height: 28px;
}
.board.view .reply_wrap:after {
  content: "";
  display: block;
  clear: both;
}
.board.view .reply_wrap .reply_total {
  font-size: 18px;
  letter-spacing: -0.45px;
  color: #464646;
  float: left;
}
.board.view .reply_wrap .reply_total span {
  display: inline-block;
  vertical-align: middle;
}
.board.view .reply_wrap .reply_total span > em {
  display: inline-block;
  color: #91745e;
  padding-left: 10px;
}
.board.view .reply_wrap button {
  min-width: 57px;
  height: 28px;
  font-size: 14px;
  color: #9e9e9e;
  position: relative;
}
.board.view .reply_wrap button span {
  display: inline-block;
  vertical-align: middle;
}
.board.view .reply_wrap button.like {
  margin-left: 0;
}
.board.view .reply_wrap button.like:after {
  display: none;
}
.board.view .reply_wrap button.like.on {
  color: #0e0e0e;
}
.board.view .reply_wrap button.like.on:before {
  background-position: 90.2896081772% 92.4528301887%;
  background-size: 2196.4285714286% 2043.3333333333%;
}
.board.view .reply_wrap button:after {
  content: "";
  display: block;
  background: #d8d8d8;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  left: -4px;
  position: absolute;
}
.board.view .reply_wrap button:before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 15px;
  background-position: 85.1788756388% 92.4528301887%;
  background-size: 2196.4285714286% 2043.3333333333%;
  vertical-align: middle;
  margin-right: 6px;
}
.board.view .reply_wrap button.dislike:before {
  background-position: 80.0681431005% 92.4528301887%;
  background-size: 2196.4285714286% 2043.3333333333%;
}
.board.view .reply_wrap button.dislike.on {
  color: #0e0e0e;
}
.board.view .reply_wrap button.dislike.on:before {
  background-position: 98.4719864177% 82.9642248722%;
  background-size: 2365.3846153846% 2357.6923076923%;
}
.board.view .reply_wrap button.off {
  cursor: auto;
}
.board.view .utility_wrap {
  display: flex;
  justify-content: center;
  gap: 6px;
  position: relative;
  border-bottom: 1px solid #ddd1ca;
  margin-top: 50px;
  padding-bottom: 50px;
}
.board.view .like_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.board.view .like_wrap button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 90px;
  height: 30px;
  font-size: 16px;
  letter-spacing: -0.4px;
  border: 1px solid #91745e;
  color: #91745e;
  transition: 0.3s;
  padding-left: 30px;
  padding-right: 10px;
}
.board.view .like_wrap button:hover {
  border-color: #be9a7e;
}
.board.view .like_wrap button:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 10px;
  width: 14px;
  height: 13px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  margin-right: 6px;
  transform: translateY(-50%);
}
.board.view .like_wrap button.like:before {
  background-image: url("../img/fg-like.svg");
}
.board.view .like_wrap button.dislike:before {
  background-image: url("../img/fg-dislike.svg");
}
.board.view .like_wrap button.off {
  cursor: auto;
  color: #d8d8d8;
  border-color: #d8d8d8;
}
.board.view .like_wrap button.off:before {
  filter: opacity(0.4) grayscale(1);
}
.board.view .post_comment_list {
  border-top: 1px solid #e1e1e1;
  margin-top: 13px;
}
.board.view .post_comment_list > .comment_reply:nth-child(1) {
  border-top: none;
}
.board.view .post_comment_list .depth_2 li:last-child {
  border-bottom: none;
}
.board.view .textarea {
  background-color: inherit;
  border: solid 1px #ddd1ca;
  padding: 20px 30px;
}
.board.view .textarea textarea {
  background-color: inherit;
  color: inherit;
  font-size: 16px;
  letter-spacing: -0.4px;
}
.board.view .textarea .btn_camera {
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 24px;
  height: 24px;
  background-image: url("../img/ico_photo.svg");
}
.board.view .textarea .btn_sticker {
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 24px;
  height: 24px;
  background-image: url("../img/ico_sticker.png");
}
.board.view .textarea .bottom_area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% + 60px);
  border-top: 1px solid #ddd1ca;
  margin-left: -30px;
  margin-top: 20px;
  padding: 20px 30px 0;
}
.board.view .textarea .counter {
  color: #808080;
  font-size: 14px;
  letter-spacing: -0.35px;
  margin-right: 10px;
}
.board.view .textarea .counter .num {
  color: #e16513;
}
.board.view .textarea.off .counter,
.board.view .textarea.off .counter .num {
  color: #d8d8d8;
}
.board.view .textarea.off .btns button {
  cursor: default;
  background: #d8d8d8;
}
.board.view .textarea .function_btns {
  display: flex;
  align-items: center;
  gap: 12px;
}
.board.view .textarea .function_btns .selected_sticker {
  padding-left: 24px;
}
.board.view .textarea .function_btns .selected_sticker .sticker-wrap:before {
  position: absolute;
  top: calc(50% - 9px);
  left: -16px;
  content: "";
  display: block;
  width: 1px;
  height: 18px;
  background: #B6BDC5;
}
.board.view .textarea .btns {
  display: flex;
  align-items: center;
  gap: 10px;
}
.board.view .textarea .btns button {
  min-width: 90px;
  height: 30px;
  background-color: #91745e;
  font-size: 16px;
  letter-spacing: -0.4px;
  color: #fff;
}
.board.view .textarea .list_attach {
  margin-top: 28px;
  display: flex;
  align-items: center;
}
.board.view .textarea .list_attach li {
  position: relative;
}
.board.view .textarea .list_attach li:nth-child(n+2) {
  margin-left: 18px;
}
.board.view .textarea .list_attach li .img {
  width: 56px;
  height: 56px;
}
.board.view .textarea .list_attach li .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.board.view .textarea .list_attach li .ibtn_del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #fff;
  background-position: 59.652173913% 20.942408377%;
  background-size: 1537.5% 1532.5%;
}
.board.view .btn_list_wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 60px;
}
.board.view .move_list {
  margin-top: 60px;
  border-top: 1px solid #ddd1ca;
}
.board.view .move_list li {
  border-bottom: 1px solid #ddd1ca;
}
.board.view .move_list li a {
  display: flex;
  align-items: center;
  padding: 16px 26px;
}
.board.view .move_list li a:hover .tit {
  text-decoration: underline;
}
.board.view .move_list li span.arrow {
  display: inline-flex;
}
.board.view .move_list li span.arrow:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 17px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.board.view .move_list li span.arrow > span {
  display: none;
}
.board.view .move_list li span.title {
  line-height: 18px;
  margin-left: 36px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #5e5e5e;
  font-size: 18px;
  letter-spacing: -0.45px;
}
.board.view .move_list li.prev .arrow:before {
  background-image: url("../img/board_nav_prev.svg");
}
.board.view .move_list li.next .arrow:before {
  background-image: url("../img/board_nav_next.svg");
}
.board.view .paging {
  margin-top: 28px;
}
.board.view ul + .paging {
  margin-top: 40px;
  margin-bottom: 40px;
}
.board.view .post_vote + .tag_link {
  margin-top: 40px;
}

@media screen and (min-width: 1200px) {
  .board.view .utility_wrap .btns {
    position: absolute;
    top: 0;
    right: 0;
  }
}
@media screen and (max-width: 1199px) {
  /* 게시판 상세 */
  .board_detail {
    padding: 0;
    overflow-x: auto;
  }
  .board.view {
    margin-top: 30px;
  }
  .board.view .container,
  .board.view article {
    width: 100%;
    padding: 0;
  }
  .board.view .textarea_wrap {
    margin-top: 20px;
  }
  .board.view .textarea {
    padding: 20px 24px 27px;
  }
  .board.view .textarea .list_attach {
    margin-top: 18px;
  }
  .board.view .textarea .list_attach li .img {
    width: 40px;
    height: 40px;
  }
  .board.view .textarea .counter {
    font-size: 16px;
    margin-right: 6px;
  }
  .board.view .textarea .bottom_area {
    width: calc(100% + 48px);
    padding: 27px 24px 0;
    margin-left: -24px;
  }
  .board.view .textarea .btns button {
    height: 34px;
    min-width: 102px;
    font-size: 18px;
    letter-spacing: -0.45px;
  }
  .board.view .info .thumb {
    width: 30px;
    height: 30px;
  }
  .board.view .board_content {
    width: 100%;
  }
  .board.view .board_content .title_wrap,
  .board.view .board_content .top_wrap {
    padding: 20px 24px;
  }
  .board.view .board_content .post,
  .board.view .board_content .post_vote {
    padding-left: 24px;
    padding-right: 24px;
  }
  .board.view .board_content .post {
    padding-top: 20px;
  }
  .board.view .board_content .tag_link,
  .board.view .board_content .reply_wrap,
  .board.view .board_content .btn_more_wrap,
  .board.view .board_content .textarea_wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  .board.view .board_content .title {
    font-size: 18px;
    letter-spacing: -0.45px;
  }
  .board.view .board_content .title_wrap {
    border-top: 0;
  }
  .board.view .move_list {
    margin-top: 50px;
  }
  .board.view .move_list li a {
    padding: 16px 18px;
  }
  .board.view .info li {
    font-size: 16px;
  }
  .board.view .post_vote {
    margin-top: 40px;
    padding-top: 0;
  }
  .board.view .post_vote + .tag_link {
    margin-top: 30px;
  }
  .board.view .post_vote .btn_submit {
    margin-top: 40px;
  }
  .board.view .utility_wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  .board.view .tag_link {
    margin-top: 40px;
  }
  .board.view .reply_wrap {
    margin-top: 50px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .board.view .reply_wrap .reply_total {
    font-size: 20px;
    letter-spacing: -0.5px;
  }
  .board.view .post_comment_list {
    margin-top: 10px;
  }
  .board.view .counter {
    margin-right: 16px;
  }
  .board.view .btn_list_wrap {
    justify-content: center;
    margin-top: 50px;
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  .board.view .info li {
    font-size: 12px;
  }
  .board.view .ico.titicon_new {
    margin: 0;
    position: relative;
    top: 2px;
  }
  .board.view .board_content .title_wrap {
    border-bottom-color: rgba(221, 209, 202, 0.3);
  }
  .board.view .textarea textarea {
    font-size: 14px;
    letter-spacing: -0.35px;
    line-height: 1.43;
  }
  .board.view .board_content .title_wrap,
  .board.view .board_content .top_wrap {
    padding: 12px 20px;
  }
  .board.view .board_content .top_wrap {
    padding-top: 8px;
  }
  .board.view .board_content .post,
  .board.view .board_content .post_vote {
    padding-left: 20px;
    padding-right: 20px;
  }
  .board.view .board_content .title_wrap .title.bold {
    font-size: 14px;
    letter-spacing: -0.35px;
  }
  .board.view .textarea_wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  .board.view .textarea {
    padding: 13px;
  }
  .board.view .textarea .counter {
    font-size: 14px;
    margin-right: 8px;
  }
  .board.view .textarea .bottom_area {
    width: calc(100% + 26px);
    margin-top: 12px;
    margin-left: -13px;
    padding: 12px 13px 0;
  }
  .board.view .textarea .btns button {
    min-width: 78px;
    height: 32px;
    font-size: 14px;
    letter-spacing: -0.35px;
  }
  .board.view .textarea .btns button + button {
    margin-left: 6px;
  }
  .board.view .textarea .btn_camera,
  .board.view .textarea .btn_sticker {
    width: 20px;
    height: 20px;
  }
  .board.view .utility_wrap {
    margin-top: 30px;
    padding-bottom: 30px;
  }
  .board.view .utility_wrap .btns {
    position: relative;
    top: auto;
    left: auto;
    margin-left: 6px;
  }
  .board.view .like_wrap button,
  .board.view .btn_share {
    height: 32px;
  }
  .board.view .like_wrap {
    gap: 6px;
  }
  .board.view .like_wrap button {
    min-width: 76px;
    font-size: 12px;
    letter-spacing: -0.3px;
    padding-left: 32px;
    padding-right: 8px;
  }
  .board.view .like_wrap button:before {
    width: 16px;
    height: 15px;
  }
  .board.view .reply_wrap {
    margin-top: 30px;
  }
  .board.view .reply_wrap .reply_total {
    font-size: 16px;
    letter-spacing: -0.4px;
  }
  .board.view .reply_wrap .reply_total span > em {
    padding-left: 4px;
  }
  .board.view .btn_list_wrap {
    margin-top: 30px;
  }
  .board.view .move_list li a {
    padding: 12px 20px;
  }
  .board.view .move_list li span.arrow:before {
    width: 20px;
    height: 20px;
    background-size: 12px 6px;
    margin-right: 6px;
  }
  .board.view .move_list li.prev .arrow:before {
    background-image: url("../img/board_nav_prev_mo.svg");
  }
  .board.view .move_list li.next .arrow:before {
    background-image: url("../img/board_nav_next_mo.svg");
  }
  .board.view .move_list li span.title {
    font-size: 14px;
    letter-spacing: -0.35px;
  }
  .board.view .post_vote {
    font-size: 14px;
    letter-spacing: -0.35px;
    margin-top: 30px;
  }
  .board.view .btn_list,
  .post_vote .btn_submit {
    height: 32px;
    font-size: 14px;
    letter-spacing: -0.35px;
  }
  .post_vote .btn_submit {
    min-width: 98px;
  }
  .board.view .post_vote .btn_submit {
    margin-top: 30px;
  }
  .board.view .btn_list {
    min-width: 120px;
    height: 36px;
  }
}
/* 투표 */
.post_vote {
  position: relative;
  font-size: 18px;
  letter-spacing: -0.45px;
  margin-top: 50px;
  color: #0e0e0e;
}
.post_vote .vote_top {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 18px;
}
.post_vote .onair, .post_vote .onend, .post_vote .finish {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 2px;
  font-size: 14px;
  letter-spacing: -0.35px;
  margin-left: 12px;
}
.post_vote .onair {
  background-color: #549adf;
  color: #fff;
}
.post_vote .finish {
  background-color: #777777;
  color: #fff;
}
.post_vote .question {
  position: relative;
  padding-top: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid #f2f2f2;
}
.post_vote .question.disable:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
}
.post_vote .guide_text {
  position: absolute;
  top: 0;
  right: 30px;
  font-size: 18px;
  letter-spacing: -0.45px;
  color: #e16513;
}
.post_vote dl {
  position: relative;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.4px;
}
.post_vote dl + dl {
  margin-top: 50px;
}
.post_vote dl dt {
  margin-bottom: 20px;
}
.post_vote dl.req dt:before {
  content: "*";
  display: inline-block;
  margin-right: 4px;
  color: #d16060;
}
.post_vote dl dd {
  background-color: #f9f9f9;
  padding: 10px 20px;
}
.post_vote dl dd textarea {
  padding: 5px 0;
  width: 100%;
  height: 76px;
  background-color: inherit;
}
.post_vote dl dd input[type=radio],
.post_vote dl dd input[type=checkbox] {
  display: none;
}
.post_vote dl dd input[type=radio] + label,
.post_vote dl dd input[type=checkbox] + label {
  position: relative;
  display: inline-block;
  padding-left: 30px;
  text-indent: 0;
}
.post_vote dl dd input[type=radio] + label:before,
.post_vote dl dd input[type=checkbox] + label:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #707070;
  background-color: #fff;
  background-image: none;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  box-sizing: border-box;
}
.post_vote dl dd input[type=radio] + label ~ label {
  margin-left: 10px;
}
.post_vote dl dd input[type=radio] + label:before {
  background-color: #f8f8f8;
  border-radius: 50%;
}
.post_vote dl dd input[type=radio]:checked + label:before {
  background-image: url("../img/radio_chk.svg");
  background-size: 10px 10px;
}
.post_vote dl dd input[type=checkbox]:checked + label:before {
  background-image: url("../img/checkbox_chk.svg");
  background-size: 14px 9px;
}
.post_vote dl dd label + span {
  padding-left: 10px;
}
.post_vote .question.disable dl dd input[type=radio] + label:before,
.post_vote .question.disable dl dd input[type=checkbox] + label:before {
  filter: grayscale(1);
}
.post_vote .btn_submit {
  margin: 40px auto 0;
}

@media screen and (max-width: 1199px) {
  .post_vote .guide_text {
    position: static;
    padding-top: 8px;
  }
  .post_vote dl dt,
  .post_vote dl dd {
    font-size: 18px;
    letter-spacing: -0.45px;
  }
  .post_vote dl + dl {
    margin-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  .post_vote .guide_text {
    font-size: 12px;
    letter-spacing: -0.3px;
    padding-top: 4px;
  }
}
.btn_share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 90px;
  height: 30px;
  font-size: 16px;
  letter-spacing: -0.4px;
  border: 1px solid #91745e;
  color: #91745e;
  transition: 0.3s;
  min-width: 30px;
  height: 30px;
}
.btn_share:hover {
  border-color: #be9a7e;
}
.btn_share:before {
  content: "";
  display: block;
  width: 14px;
  height: 16px;
  background-repeat: no-repeat;
  background-image: url("../img/ico_share.svg");
  background-position: 50% 50%;
  background-size: cover;
  transition: 0.3s;
}
.btn_share:hover:before {
  background-image: url("../img/icon_share_hover.svg");
}
.btn_share.off {
  filter: opacity(0.4) grayscale(1);
}

.side_news {
  width: 368px;
}
.side_news li + li {
  margin-top: 20px;
}
.side_news li a {
  display: block;
}
.side_news li .thumb {
  overflow: hidden;
}
.side_news li img {
  transition: all 0.2s linear;
}
.side_news li:hover .title {
  text-decoration: underline;
}
.side_news li:hover img {
  transform: scale(1.1);
}
.side_news li:last-child {
  border-bottom: none;
}
.side_news li .title {
  margin-top: 12px;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.4px;
  color: #484848;
  line-height: 1.5;
  display: block;
}

.btn_more {
  display: none;
}

/* 에러 페이지 */
.error h1.logo {
  left: 50% !important;
  transform: translateX(-50%);
}

.error {
  padding: 200px 20px 0;
  text-align: center;
}
.error .title {
  display: block;
  font-size: 20px;
  line-height: 34px;
  color: #0e0e0e;
}
.error .desc {
  margin-top: 20px;
  font-size: 16px;
  line-height: 30px;
  color: #5e5e5e;
  display: inline-block;
}
.error .link_main {
  margin: 60px 0;
  padding: 11px 10px;
  font-size: 16px;
  line-height: 34px;
  color: #0e0e0e;
  min-width: 200px;
  border: solid 1px #bebebe;
  background-color: #fff;
  display: inline-block;
}
.error .link_main:hover {
  border: solid 1px #0e0e0e;
}
.error .copy {
  color: #bebebe;
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  line-height: 16px;
}

/* 사이트 점검 안내 */
#COMMUNITYwrap.out-of-service .speech-bubble {
  position: absolute;
  top: 115px;
  right: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 274px;
  padding: 15px 0;
  border-radius: 11px;
  background: #000000;
  color: #FFF;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
#COMMUNITYwrap.out-of-service .speech-bubble:after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 14px);
  width: 0;
  height: 0;
  margin-top: -21px;
  border-style: solid;
  border-width: 0 14px 21px 14px;
  border-color: transparent transparent #000 transparent;
}
#COMMUNITYwrap.out-of-service .speech-bubble .img-wrap {
  width: 34px;
  height: 34px;
}
#COMMUNITYwrap.out-of-service #COMMUNITYcontent {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
#COMMUNITYwrap.out-of-service #COMMUNITYcontent .message {
  display: flex;
  flex-direction: column;
  gap: 37px;
  text-align: center;
}
#COMMUNITYwrap.out-of-service #COMMUNITYcontent .message .img-wrap {
  margin: 0 auto;
  width: 190px;
  height: 190px;
}
#COMMUNITYwrap.out-of-service #COMMUNITYcontent .message .title {
  font-size: 30px;
  font-weight: 700;
}
#COMMUNITYwrap.out-of-service #COMMUNITYcontent .message .text {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
}
#COMMUNITYwrap.out-of-service #COMMUNITYcontent .message .desc {
  color: #978D9F;
  font-size: 20px;
  font-weight: 400;
  line-height: 2;
}
#COMMUNITYwrap.out-of-service #COMMUNITYcontent .message .copy {
  position: absolute;
  bottom: 35px;
  left: 0;
  width: 100%;
  color: #A9ADC9;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

@media screen and (max-width: 1199px) {
  #COMMUNITYwrap.out-of-service [id^=CMMheader] {
    padding: 0 20px;
  }
  #COMMUNITYwrap.out-of-service [id^=CMMheader] h1.logo {
    left: calc(50% - 72px);
  }
  #COMMUNITYwrap.out-of-service .speech-bubble {
    display: none;
  }
  #COMMUNITYwrap.out-of-service #COMMUNITYcontent .message {
    padding: 0 20px;
  }
  #COMMUNITYwrap.out-of-service #COMMUNITYcontent .message .title,
  #COMMUNITYwrap.out-of-service #COMMUNITYcontent .message .text {
    font-size: 24px;
  }
  #COMMUNITYwrap.out-of-service #COMMUNITYcontent .message .desc {
    font-size: 16px;
  }
}
.ico {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
}
.ico span {
  visibility: hidden;
  overflow: hidden;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 1px;
  height: 1px;
  font-size: 0;
  line-height: 0;
  z-index: -1;
}
.ico.titicon_new {
  width: 16px;
  height: 16px;
  background-image: url("../img/titicon_new.svg");
  background-size: cover;
  margin-left: 4px;
  margin-right: 6px;
}
.ico.refresh {
  width: 18px;
  height: 18px;
  background-image: url("../img/ico_refresh.svg");
  background-size: contain;
}

@media screen and (max-width: 1199px) {
  /* 내 계정 */
  .my_account {
    padding-top: 30px;
  }
  .my_account h3.title {
    display: none;
  }
  .my_account .phone_register {
    width: 568px;
    margin: 0 auto;
  }
  .my_account .phone_register dt {
    padding-left: 18px;
    position: relative;
  }
  .my_account .phone_register dt:before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background: #000;
    position: absolute;
    top: 8px;
    left: 2px;
    transform: rotate(45deg);
  }
  .my_account .phone_register dd {
    margin-top: 14px;
    background: #f8f8f8;
    position: relative;
    height: 64px;
  }
  .my_account .phone_register dd input {
    width: 100%;
    height: 100%;
    padding: 20px 98px 20px 30px;
    font-size: 16px;
    line-height: 24px;
    color: #0e0e0e;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
  }
  .my_account .phone_register dd .btn_register {
    padding: 7px 16px;
    font-size: 14px;
    line-height: 22px;
    border: 1px solid #e1e1e1;
    color: #0e0e0e;
    position: absolute;
    top: 14px;
    right: 20px;
    background: #fff;
  }
  .my_account .phone_register dd .btn_register:hover {
    border-color: #0e0e0e;
  }
  .my_account .note {
    width: 568px;
  }
  .board.list.single .board_wrap {
    margin: 10px 0 0;
  }
  .board.list.single .comment_reply {
    margin: 0 -20px 0 0;
    padding-left: 0;
  }
  .board.list.single .comment_reply .post_comment {
    margin-top: 8px;
    padding-left: 40px;
  }
  .board.list.single .btn_more_wrap {
    padding: 0;
    margin-bottom: 0;
  }
  .board.list.single .textarea {
    padding: 20px;
  }
  .side_news {
    display: none !important;
  }
  .btn_more_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
  }
  .btn_more_wrap.off {
    display: none !important;
  }
  .btn_more_wrap .btn_more {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 135px;
    height: 46px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bold;
    color: var(--black);
    border: 1px solid var(--black);
  }
  .board .tool_list li {
    height: 34px;
    font-size: 18px;
    letter-spacing: -0.45px;
  }
  /* 글쓰기 */
  .board.write {
    margin-top: 0;
  }
  .board.write .select_list {
    border-top: solid 1px var(--line-gray);
    flex-direction: column;
    gap: 0;
  }
  .board.write .select_list .btn_select {
    padding-left: 20px;
  }
  .board.write .select_sort {
    width: 100%;
    border-bottom: solid 1px var(--line-gray);
  }
  .board.write .input_title {
    margin-top: 20px;
  }
  .board.write .input_title input,
  .board.write .write_tag {
    font-size: 18px;
    letter-spacing: -0.45px;
    padding: 20px;
  }
  .board.write .editor_zone {
    padding: 0;
  }
  .board.write .bw_btns {
    justify-content: center;
    padding-top: 30px;
  }
  .board.write .bw_btns button {
    font-size: 20px;
    letter-spacing: -0.5px;
  }
  .board.write .bw_btns .btn_temporarily {
    display: none;
  }
  .board.write .write_tag {
    padding: 14px 20px;
  }
  /* 에러 페이지 */
  .error h1.logo {
    top: 16px !important;
  }
  .error {
    padding-top: 100px;
  }
  .error .copy {
    bottom: 40px;
  }
  .error h1.logo {
    top: 16px !important;
  }
  .error {
    padding-top: 100px;
  }
  .copy {
    bottom: 40px;
  }
  #CMMpopbanner .pop_layer .portrait {
    display: inline-block;
    max-width: 450px;
  }
  #CMMpopbanner .pop_layer .landscape {
    display: none;
  }
  #CMMpopbanner .pop_layer .bottom {
    height: 62px;
    background: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 16px;
  }
  #CMMpopbanner .pop_layer .checkbox [type=checkbox] {
    display: none;
  }
  #CMMpopbanner .pop_layer .checkbox label {
    line-height: 26px;
    font-size: 18px;
  }
  #CMMpopbanner .pop_layer .checkbox label:before {
    width: 26px;
    height: 26px;
  }
  #CMMpopbanner .pop_layer .banner_close {
    width: 40px;
    height: 40px;
    margin-right: 4px;
  }
}
@media screen and (max-width: 767px) {
  #CMMpopbanner .pop_layer .portrait {
    display: inline-block;
    max-width: 230px;
  }
  #CMMpopbanner .pop_layer .bottom {
    height: 35px;
    background: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 12px;
  }
  #CMMpopbanner .pop_layer .checkbox [type=checkbox] {
    display: none;
  }
  #CMMpopbanner .pop_layer .checkbox label {
    line-height: 18px;
    font-size: 12px;
  }
  #CMMpopbanner .pop_layer .checkbox label:before {
    width: 18px;
    height: 18px;
  }
  #CMMpopbanner .pop_layer .banner_close {
    width: 20px;
    height: 20px;
    margin-right: 3px;
  }
  #CMMpopbanner .pop_layer .banner_close:after {
    width: 10px;
    height: 10px;
  }
  /* 내 계정 */
  .my_account {
    padding-top: 30px;
  }
  .my_account h3.title {
    display: none;
  }
  .my_account .phone_register {
    width: 100%;
    margin: 0 auto;
  }
  .my_account .phone_register dt {
    padding-left: 18px;
    position: relative;
  }
  .my_account .phone_register dt:before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background: #000;
    position: absolute;
    top: 8px;
    left: 2px;
    transform: rotate(45deg);
  }
  .my_account .phone_register dd {
    margin-top: 14px;
    background: #f8f8f8;
    position: relative;
    height: 64px;
  }
  .my_account .phone_register dd input {
    width: 100%;
    height: 100%;
    padding: 20px 98px 20px 30px;
    font-size: 16px;
    line-height: 24px;
    color: #0e0e0e;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
  }
  .my_account .phone_register dd .btn_register {
    padding: 7px 16px;
    font-size: 14px;
    line-height: 22px;
    border: 1px solid #e1e1e1;
    color: #0e0e0e;
    position: absolute;
    top: 14px;
    right: 20px;
    background: #fff;
  }
  .my_account .phone_register dd .btn_register:hover {
    border-color: #0e0e0e;
  }
  .my_account .note {
    width: 100%;
  }
  .board .comment_reply {
    padding-top: 12px;
  }
  .board .comment_reply .user .user_wrap .name,
  .board .comment_reply .user_id {
    font-size: 12px;
    letter-spacing: -0.3px;
  }
  .board .comment_reply .post_comment {
    margin-top: 10px;
    font-size: 14px;
    letter-spacing: -0.35px;
    line-height: 1.43;
  }
  .board .comment_reply .post_comment .usertag.mytag {
    margin-right: 10px;
  }
  .board .comment_reply .reply_foot {
    padding-bottom: 12px;
  }
  .board .comment_reply .btn_reply {
    font-size: 14px;
    letter-spacing: -0.35px;
  }
  .board .comment_reply .textarea_wrap {
    margin-top: 14px;
    margin-right: 20px;
    padding-bottom: 12px;
  }
  .board .comment_reply .depth_2 .comment_reply > div {
    padding-left: 18px;
  }
  .board .comment_reply .depth_2 .user:before,
  .board .comment_reply .depth_2 .textarea_wrap:before {
    top: 1px;
    width: 10px;
    height: 10px;
    background-image: url("../img/ico_reply_line_mo.svg");
  }
  .board .btn_tool_more {
    width: 22px;
    height: 22px;
  }
  .board .tool_list {
    flex-direction: column;
    top: auto;
    bottom: 28px;
    padding: 0;
  }
  .board .tool_list:before {
    bottom: -4px;
    width: 6px;
    height: 4px;
    background-image: url("../img/tooltip-arr_mo.svg");
  }
  .board .tool_list li {
    font-size: 14px;
    letter-spacing: -0.35px;
    padding: 4px 8px;
  }
  .board .tool_list li + li {
    border-top: 1px solid #fff;
  }
  .board_list li.board_item a {
    padding: 24px 20px;
  }
  .board_list li.board_item .desc.titicon_new:before {
    top: 4px;
  }
  .board_list_img.video .list li .img:before {
    width: 56px;
    height: 56px;
  }
  .btn_share:before {
    width: 12px;
    height: 14px;
  }
  .board.write {
    padding-left: 0;
    padding-right: 0;
  }
  .board.write .select_sort {
    height: 44px;
  }
  .board.write .select_sort + .select_sort {
    margin-top: 8px;
  }
  .board.write .select_sort .btn_select:after {
    right: 10px;
  }
  .board.write .input_title input,
  .board.write .write_tag {
    font-size: 14px;
    letter-spacing: -0.35px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .board.write .write_tag .tag_inp {
    display: block;
  }
  .board.write .write_tag .tag_inp .tag {
    padding: 6px 10px;
  }
  .board.write .write_tag input {
    width: 100%;
  }
  .board.write .bw_btns button {
    min-width: 120px;
    height: 36px;
    font-size: 14px;
    letter-spacing: -0.35px;
  }
  .board.write .bw_btns button + button {
    margin-left: 8px;
  }
  .ico.titicon_new {
    width: 14px;
    height: 14px;
  }
  .empty_wrap .empty {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .empty_wrap .empty p {
    font-size: 14px;
    letter-spacing: 0;
  }
  /* 에러 페이지 */
  .error .copy {
    bottom: 20px;
  }
  #CMMpop_report .pop_contents dt {
    min-width: 45px;
  }
  #CMMpop_report .pop_contents dd {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #CMMpop_report .report_choice {
    margin-top: 12px;
    padding-top: 12px;
  }
  #CMMpop_report .report_choice .choice_title {
    margin-bottom: 6px;
  }
  #CMMpop_report .report_choice li.textarea {
    margin-top: 12px;
    margin-left: 0;
  }
  #CMMpop_report .report_choice input[type=radio] + label {
    padding-left: 24px;
  }
  #CMMpop_report .report_choice input[type=radio] + label:before {
    top: 3px;
    width: 16px;
    height: 16px;
  }
  #CMMpop_report .report_choice input[type=radio]:checked + label:before {
    background-size: 8px 8px;
  }
  #CMMpop_report .report_info + .report_info,
  #CMMpop_report .report_choice li + li {
    margin-top: 6px;
  }
}
.post_check {
  margin-right: auto;
  margin-left: 20px;
}
.post_check input[type=checkbox] {
  display: none;
}
.post_check input[type=checkbox] + label {
  position: relative;
  display: inline-block;
  padding-left: 30px;
  font-size: 16px;
  letter-spacing: -0.4px;
  color: #5b5b5b;
  line-height: 1.5;
}
.post_check input[type=checkbox] + label:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #707070;
  box-sizing: border-box;
  text-indent: 0;
  background-repeat: no-repeat;
  background-image: url("../img/uio_check.svg");
  background-position: 50% 50%;
  background-size: 14px 9px;
}
.post_check input[type=checkbox]:checked + label:before {
  background-position: 52.34% 20.94%;
  background-size: 1537.5% 1532.5%;
}

@media screen and (max-width: 1199px) {
  .post_check {
    margin-left: 16px;
  }
}
@media screen and (max-width: 767px) {
  .board .btn_wrap {
    flex-wrap: wrap;
  }
  .post_check {
    position: relative;
    display: block;
    width: 100%;
    order: 3;
    margin-top: 12px;
    margin-left: 0;
    padding: 10px 0px 0;
  }
  .post_check:before {
    content: "";
    position: absolute;
    top: 0;
    left: -20px;
    width: calc(100% + 40px);
    border-top: 1px solid #ddd1ca;
  }
  .post_check input[type=checkbox] + label {
    font-size: 12px;
    letter-spacing: -0.3px;
    padding-left: 20px;
  }
  .post_check input[type=checkbox] + label:before {
    width: 16px;
    height: 16px;
    background-size: 10px 7px;
  }
}
@media screen and (min-width: 1200px) { /*
.board.list.normal .board_list li.board_item a {
	padding-right: 33.5%;
}
.board.list.search .board_list li.board_item a {
	padding-right: 25%;
}
.board.list.normal .board_list li.board_item .info_wrap .info + .info,
.board.list.search .board_list li.board_item .info .name {
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translateY(-50%);
}

.board.list.search .board_list li.board_item .info .name {
	min-width: 130px;
}

.board.list.search .board_list li.board_item .info .date {
	margin-left: 0;
}
*/ }
@media screen and (min-width: 768px) {
  #CMMpop_report.pop_wrap .pop_layer {
    width: 560px;
  }
}
.ck.ck-editor__editable_inline {
  line-height: 1.3;
}

.ck.ck-editor__editable_inline p {
  clear: both;
}

/* 240124 css 추가 */
@media screen and (max-width: 768px) {
  .board_content .post .table {
    display: block !important;
    overflow: auto;
  }
  .board_content .post .table table {
    width: 740px !important;
  }
}
.gamegrade.pop_wrap {
  opacity: 1;
  z-index: 1;
  visibility: visible;
}

/* archive */
#COMMUNITYcontent.archive {
  padding-bottom: 0;
  background: #05070C;
  color: #fff;
}
#COMMUNITYcontent.archive.list {
  background: #05070C url("../img/bg_archive_list.png") no-repeat;
  background-position: 50% var(--header);
  background-size: 100% auto;
}
#COMMUNITYcontent.archive:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}
#COMMUNITYcontent.archive .banner {
  height: 246px;
}
#COMMUNITYcontent.archive .banner:before {
  background: transparent;
}
#COMMUNITYcontent.archive .paging .num .btn_num {
  color: #fff;
}
#COMMUNITYcontent.archive .paging > button.btn_first:before {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13 20 6-4.33v8.66L13 20zM19 20l6-4.33v8.66L19 20z' fill='%23fff'/%3E%3C/svg%3E");
}
#COMMUNITYcontent.archive .paging > button.btn_prev:before {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16 20 6-4.33v8.66L16 20z' fill='%23fff'/%3E%3C/svg%3E%0A");
}
#COMMUNITYcontent.archive .paging > button.btn_next:before {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m24 20-6 4.33v-8.66L24 20z' fill='%23fff'/%3E%3C/svg%3E");
}
#COMMUNITYcontent.archive .paging > button.btn_last:before {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m21 20-6 4.33v-8.66L21 20zM27 20l-6 4.33v-8.66L27 20z' fill='%23fff'/%3E%3C/svg%3E%0A");
}

@media screen and (max-width: 1199px) {
  #COMMUNITYcontent.archive .banner {
    display: block;
    height: 166px;
  }
  #COMMUNITYcontent.archive .banner > .container {
    height: 145px;
  }
  #COMMUNITYcontent.archive .banner .title {
    font-size: 30px;
  }
  .sub #COMMUNITYcontent.archive article .sub_title {
    display: block;
    font-size: 24px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* archive.main */
.archive_main {
  position: relative;
  overflow: hidden;
}
.archive_main .skew-wrap {
  width: 136.667vw; /* 1920 기준 2624 */
  display: flex;
  align-items: center;
  align-items: stretch;
}
.archive_main .block-title {
  font-family: "Eras Bold ITC";
  font-size: 44px;
  font-weight: 400;
  line-height: 1.5;
  text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.45);
}
.archive_main .block-title + p {
  margin-top: -6px;
  text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.35);
}
.archive_main .block {
  overflow: hidden;
  position: relative;
  background: #000;
  color: #FFF;
}
.archive_main .block .section h2,
.archive_main .block .section p,
.archive_main .block .section .history {
  position: relative;
}
.archive_main .block .section .gradint {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}
.archive_main .block.big {
  width: 36.05%; /* 946px */
  height: 50.833vw;
  padding: 50px 50px 50px 12.344vw;
  background: url("../img/bg_archive_histogy.png") no-repeat 50% 50%;
  background-size: cover;
}
.archive_main .block.big .gradint {
  background: linear-gradient(249deg, rgba(0, 0, 0, 0) 25.95%, rgba(0, 0, 0, 0.1) 90.37%);
}
.archive_main .block.big .section {
  width: 100%;
}
.archive_main .block.big .section .history {
  position: relative;
  overflow: hidden;
  margin-top: 50px;
  max-width: 345px;
}
.archive_main .block.big .section .history .history-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.archive_main .block.big .section .history .history-container:hover {
  animation-play-state: paused;
}
.archive_main .block.big .section .history .history-container h3 {
  font-size: 28px;
  font-weight: 600;
}
.archive_main .block.big .section .history .history-container h3 + .section {
  margin-top: 6px;
}
.archive_main .block.big .section .history .history-container .section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.archive_main .block.big .section .history .history-container .section h4 {
  font-size: 18px;
  font-weight: 700;
}
.archive_main .block.big .section .history .history-container .section p {
  text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25);
}
.archive_main .blocks {
  width: 63.95%;
  transform: skewx(-27.13deg);
  transform-origin: 0% 0%;
  display: flex;
  flex-wrap: wrap;
}
.archive_main .blocks > .block {
  position: relative;
  width: 30.625vw;
  height: 25.417vw;
}
.archive_main .blocks > .block .section {
  position: absolute;
  width: 43.646vw;
  height: 25.417vw;
  margin-left: -6.51vw;
  padding: 50px 7vw 50px 13.542vw;
  -webkit-transform: skewx(27.13deg);
  transform-origin: 0% 50%;
}
.archive_main .blocks > .block .section .bg-wrap,
.archive_main .blocks > .block .section .img-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: all 0.7s ease-in-out;
}
.archive_main .blocks > .block .section .bg-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.archive_main .blocks > .block .section .img-wrap img {
  width: 100%;
}
.archive_main .blocks > .block:nth-of-type(2n) {
  width: 46.094vw;
}
.archive_main .blocks > .block:nth-of-type(2n) .section {
  width: 46.094vw;
}
.archive_main .blocks > .block:nth-child(1) .bg-wrap, .archive_main .blocks > .block:nth-child(4) .bg-wrap {
  filter: blur(3px);
  -webkit-filter: blur(3px);
}
.archive_main .blocks > .block:nth-child(2) .bg-wrap {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}
.archive_main .blocks > .block:hover .bg-wrap {
  transform: scale(1.1);
}
.archive_main .blocks > .block:hover .img-wrap {
  transform: translateX(7%);
}

@media screen and (min-width: 1200px) {
  .archive_main {
    font-size: 16px;
  }
}
@media screen and (max-width: 1600px) {
  .archive_main .block.big {
    padding-left: 6vw;
  }
  .archive_main .block-title {
    font-size: 2.75vw;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1460px) {
  .archive_main .block.big,
  .archive_main .blocks > .block .section {
    padding-top: 3.472vw;
  }
  .archive_main .block.big .section .history .history-container h3 {
    font-size: 22px;
  }
  .archive_main .block.big .section .history .history-container .section h4 {
    font-size: 16px;
  }
  .archive_main .block.big .section .history .history-container .section p {
    font-size: 14px;
  }
}
@media screen and (max-width: 1199px) {
  .archive_main {
    font-size: 14px;
  }
  .archive_main .blocks {
    width: 100%;
  }
  .archive_main .block-title {
    font-size: 36px;
  }
  .archive_main .block.big,
  .archive_main .blocks .block.small {
    width: 100%;
    height: fit-content;
    min-height: 667px;
  }
  .archive_main .skew-wrap,
  .archive_main .blocks,
  .archive_main .blocks > .block .section {
    transform: none;
  }
  .archive_main .skew-wrap,
  .archive_main .blocks {
    flex-direction: column;
  }
  .archive_main .skew-wrap {
    width: 100%;
  }
  .archive_main .block.big,
  .archive_main .blocks > .block .section {
    padding: 12.267vw 5.333vw;
  }
  .archive_main .blocks > .block .section {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .archive_main .blocks > .block:nth-of-type(2n) .section {
    width: 100%;
  }
  .archive_main .blocks > .block .section .img-wrap {
    overflow: hidden;
    left: -10%;
    right: -10%;
  }
  .archive_main .blocks > .block .section .img-wrap img {
    width: auto;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
  .archive_main .block.big .section .history {
    max-width: none;
    margin-top: 28px;
  }
}
/* archive.list */
.archive_list_group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding-bottom: 100px;
}
.archive_list_group .section {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.archive_list_group .swiper_class {
  overflow: visible;
  padding-bottom: 36px;
}

@media screen and (max-width: 1199px) {
  .archive_list_group {
    gap: 100px;
  }
  .archive_list_group .section {
    gap: 20px;
  }
  .archive_list_group .btn_more_wrap .btn_more {
    color: #fff;
    border-color: #fff;
  }
  .archive_list_group .board_wrap.class {
    padding: 0 20px;
  }
}
/* archive.detail */
.archive_detail {
  position: relative;
  background: #000;
}
.archive_detail.character {
  background: url("../img/game/bg_detail_character.png") no-repeat 50% 50%;
  background-size: cover;
}
.archive_detail > .img-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  width: 100%;
  transform: translateX(-50%);
}
.archive_detail > .img-wrap img {
  display: block;
  width: auto;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.archive_detail .skew_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 620px;
  height: 1127px;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(182, 173, 173, 0.05));
  -webkit-transform: skewx(-21.56deg);
  transform-origin: 0% 0%;
}
.archive_detail > article {
  position: relative;
  margin: 0 auto;
  max-width: 1440px;
  padding: 0 40px;
}
.archive_detail .side_menu {
  position: relative;
  width: 620px;
}
.archive_detail .detail_container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  height: 1080px;
}
.archive_detail .detail_container .btn_list {
  position: absolute;
  top: 47px;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.archive_detail .detail_container .side {
  margin-left: -40px;
  padding-top: 47px;
}
.archive_detail .detail_container .side .side_title {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.5;
}
.archive_detail .detail_container .side .side_menu {
  position: relative;
  margin-top: 30px;
  width: 150px;
  max-height: 342px;
  overflow-y: auto;
}
.archive_detail .detail_container .side .side_menu:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 132px;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.archive_detail .detail_container .side .side_menu ul {
  width: 132px;
}
.archive_detail .detail_container .side .side_menu ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.archive_detail .detail_container .side .side_menu ul li a {
  display: flex;
  align-items: center;
  height: 37px;
  font-size: 18px;
  font-weight: 500;
}
.archive_detail .detail_container .side .side_menu ul li a:hover {
  background: linear-gradient(257deg, rgba(255, 191, 84, 0.3) 2.19%, rgba(255, 191, 84, 0) 59.51%) no-repeat 100% 0;
  background-size: 111px 37px;
  color: #ffbf54;
}
.archive_detail .detail_container .detail_info {
  width: 345px;
}
.archive_detail .detail_container .detail_info .detail_title {
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.archive_detail .detail_container .detail_info .detail_title strong {
  font-size: 60px;
  line-height: 1.5;
}
.archive_detail .detail_container .detail_info .detail_title span {
  font-size: 28px;
  line-height: 1.6;
}
.archive_detail .detail_container .detail_info .text_wrap {
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
  font-weight: 600;
  line-height: 1.6;
}
.archive_detail .detail_container .detail_info .detail_paging {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.archive_detail .detail_container .detail_info .detail_paging .btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}
.archive_detail .detail_container .detail_info .detail_paging .btn.next img {
  order: 2;
}
.archive_detail .detail_container .detail_info .detail_paging.others .btn {
  gap: 10px;
}
.archive_detail .detail_container .detail_info .detail_paging.others .btn .img_profile img {
  width: auto;
  height: 60px;
}
.archive_detail .detail_container .detail_info .detail_paging.others .btn > div:not(.img_profile) {
  display: flex;
  flex-direction: column;
}
.archive_detail .detail_container .detail_info .detail_paging.others .btn > div:not(.img_profile) strong {
  font-size: 20px;
  font-weight: 600;
}
.archive_detail.character .detail_title {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: "HeirofLight";
}
.archive_detail.character .detail_title strong.ko {
  font-weight: bold;
}
.archive_detail.character .detail_title span.en {
  font-weight: 400;
}
.archive_detail.boss .detail_title, .archive_detail.world .detail_title {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.archive_detail.boss .detail_title span, .archive_detail.world .detail_title span {
  margin-top: -6px;
}
.archive_detail.boss .detail_title + .text_wrap, .archive_detail.world .detail_title + .text_wrap {
  margin-top: 14px;
}
.archive_detail .btn_detail {
  overflow: hidden;
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 42px;
  margin-top: 12px;
  font-size: 14px;
  padding: 0 20px;
  border-radius: 90px;
}
.archive_detail .btn_detail::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
}
.archive_detail .btn_detail span {
  position: relative;
}

@media screen and (min-width: 1200px) {
  .archive_detail > article {
    min-height: calc(100vh - var(--header));
  }
}
@media screen and (max-width: 1199px) {
  .archive_detail .skew_bg,
  .archive_detail .detail_container .side {
    display: none;
  }
  .archive_detail .detail_container {
    justify-content: flex-end;
  }
}
@media screen and (max-width: 768px) {
  .archive_detail > article {
    padding: 425px 20px 26.667vw;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 44.75%, #000 72.65%);
  }
  .archive_detail .detail_container {
    height: fit-content;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 6px;
  }
  .archive_detail .detail_container .btn_list {
    position: static;
  }
  .archive_detail .detail_container .detail_info {
    position: relative;
    width: 100%;
  }
  .archive_detail .detail_container .detail_info .detail_title strong {
    font-size: 40px;
  }
  .archive_detail .detail_container .detail_info .detail_title span {
    font-size: 20px;
  }
  .archive_detail .btn_detail {
    position: absolute;
    right: 0;
    top: 32px;
  }
}
@media screen and (max-width: 430px) {
  .archive_detail > .img-wrap {
    width: 100%;
    min-width: 280px;
  }
}
@font-face {
  font-family: "HeirofLight";
  font-weight: 400;
  font-style: normal;
  src: url("https://cdn.jsdelivr.net/gh/webfontworld/heiroflight/HeirofLightRegular.eot");
  src: url("https://cdn.jsdelivr.net/gh/webfontworld/heiroflight/HeirofLightRegular.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/gh/webfontworld/heiroflight/HeirofLightRegular.woff2") format("woff2"), url("https://cdn.jsdelivr.net/gh/webfontworld/heiroflight/HeirofLightRegular.woff") format("woff"), url("https://cdn.jsdelivr.net/gh/webfontworld/heiroflight/HeirofLightRegular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "HeirofLight";
  font-weight: 700;
  font-style: normal;
  src: url("https://cdn.jsdelivr.net/gh/webfontworld/heiroflight/HeirofLightBold.eot");
  src: url("https://cdn.jsdelivr.net/gh/webfontworld/heiroflight/HeirofLightBold.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/gh/webfontworld/heiroflight/HeirofLightBold.woff2") format("woff2"), url("https://cdn.jsdelivr.net/gh/webfontworld/heiroflight/HeirofLightBold.woff") format("woff"), url("https://cdn.jsdelivr.net/gh/webfontworld/heiroflight/HeirofLightBold.ttf") format("truetype");
  font-display: swap;
}
/* 아카이브 게시물 주요 콘텐츠 */
.archive-box {
  padding: 36px;
  border-radius: 2px;
  background: #000;
}
.archive-box .archive-content {
  position: relative;
  padding: 120px 80px 84px;
  background: #fff;
  line-height: 1.6;
}
.archive-box .archive-content .centered-img {
  position: absolute;
  width: 100%;
  left: 0;
  top: -120px;
}
.archive-box .archive-content .centered-img img,
.archive-box .archive-content .centered-img .image-inline {
  margin: 0 auto;
  display: block;
  width: 100%;
  max-width: 240px;
}
.archive-box .archive-content .archive-flag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 26px;
  line-height: 1;
  border-radius: 2px;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  height: 30px;
  padding: 0 10px;
  background: #000;
}
@media screen and (mAX-width: 767px) {
  .archive-box .archive-content .archive-flag {
    height: 24px;
    font-size: 12px;
  }
}
.archive-box .archive-content .box-sub-title,
.archive-box .archive-content .story-title {
  font-size: 20px;
  font-weight: 600;
}
.archive-box .archive-content .title-wrap {
  margin-top: 12px;
  padding-bottom: 58px;
  display: flex;
  gap: 56px;
}
.archive-box .archive-content .title-wrap .box-title {
  width: 38.74%;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.5;
}
.archive-box .archive-content .title-wrap .sub-wrap {
  width: calc(61.26% - 56px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.archive-box .archive-content .story-wrap {
  border-top: 1px solid #000;
  padding-top: 60px;
}
.archive-box .archive-content .story-wrap .story-title + p {
  margin-top: 20px;
}
.archive-box .archive-content .story-wrap p + p {
  margin-top: 1.6em;
}

@media screen and (max-width: 1199px) {
  .archive-box {
    padding: 2.5vw;
  }
  .archive-box .archive-content {
    padding: 60px 30px;
  }
  .archive-box .archive-content .centered-img {
    top: -60px;
  }
  .archive-box .archive-content .centered-img img,
  .archive-box .archive-content .centered-img .image-inline {
    max-width: 120px;
  }
  .archive-box .archive-content .title-wrap {
    margin-top: 6px;
    flex-direction: column;
    padding-bottom: 30px;
    gap: 20px;
  }
  .archive-box .archive-content .title-wrap .box-title,
  .archive-box .archive-content .title-wrap .sub-wrap {
    width: 100%;
  }
  .archive-box .archive-content .title-wrap .sub-wrap {
    gap: 6px;
  }
  .archive-box .archive-content .story-wrap {
    padding-top: 30px;
  }
}
@media screen and (max-width: 767px) {
  .archive-box .archive-content .archive-flag {
    font-size: 14px;
  }
  .archive-box .archive-content .title-wrap .box-title {
    font-size: 24px;
  }
  .archive-box .archive-content .box-sub-title,
  .archive-box .archive-content .story-title {
    font-size: 16px;
  }
}
@media screen and (max-width: 430px) {
  .archive-box {
    padding: 0;
  }
}
.post .archive-box {
  margin-left: -70px;
  margin-right: -70px;
}

@media screen and (max-width: 1199px) {
  .post .archive-box {
    margin-left: -24px;
    margin-right: -24px;
  }
}
@media screen and (max-width: 767px) {
  .post .archive-box {
    margin-left: -20px;
    margin-right: -20px;
  }
}
.ck-content .archive-box {
  max-width: 1440px;
  margin: 0 auto;
}
.ck-content .archive-box .image-inline {
  display: block;
}

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