/** 2023/8/18 **/
/** CENTER LOGO BLACK THEME v0.1 **/

/*main color var*/
:root {
  /* ------------------------------------------ */
  /* Replace with this when new website created */
  --main-color: #fcb826;
  --subMain-color: #c08a19;
  --main-logo: url(/r/front/img/comm/transparent.png);
  --main-footer_logo: url(/r/front/img/comm/transparent.png);
  --main-loading_icon: url(/r/front/img/comm/transparent.png);
  --main-bg_logo: url(/r/front/img/comm/transparent.png);
  --main-font: "NotoSansKR";
  /* ------------------------------------------ */
  /* ------------------------------------------ */

  /* Common */
  --white: #ffffff;
  --black: #000000;
  --white-filter: brightness(0) invert(1);
  --btn-radius: 5px;
  --full-border-radius: 999px;
  --game-radius: 10px;
  --border-light: #333;
  --border-dark: #aaa;
  --text-primary: var(--white);
  --text-secondary: var(--black);
  --text-grey: #aaa;
  --text-input: #444;
  --link-primary: var(--white);
  /* Main color button */
  --btn-primary-bg: var(--main-color);
  --btn-primary-hover-bg: transparent;
  --btn-primary-text: #000;
  --btn-primary-hover-text: var(--main-color);
  --btn-primary-border: var(--main-color);
  /* Outline button - after hover become main color button */
  --btn-secondary-bg: transparent;
  --btn-secondary-text: var(--main-color);
  --btn-secondary-border: var(--main-color);
  /* Grey button - after hover become main color button */
  --btn-tertiary-bg: #f1f1f1;
  --btn-tertiary-text: #333;
  --btn-tertiary-border: #f1f1f1;
  --btn-padding: 10px;
  --input-padding: 10px 14px;
  --game-green: #00ff00;
  --game-shadow: 0 0 15px;
  --game-gap: 20px;
  --gradient-basic: linear-gradient(
    to bottom,
    #00000000,
    #00000000,
    #00000030,
    #00000040,
    #00000050,
    #000000
  );
  --bg-primary: #222;
  --bg-secondary: #333;
  --bg-grey: #aaa;
  --bg-dark-grey: #050505;
  --red: #ff0000;
  --orange: #ffa500;
  --green: #19d600;
  --light-blue: #2cb4ff;
  --yellow: #fc0;
}

/*COMMON CSS*/
body,
form,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd,
ul,
ol,
li,
fieldset,
th,
td,
input,
textarea,
button,
select,
pre,
span,
a {
  margin: 0;
  padding: 0;
  font-family:
    var(--main-font), "Malgun Gothic", "Malgun Gothic", "맑은 고딕",
    "Hiragino Sans GB", "Microsoft Yahei", "돋움", Dotum, "굴림", Gulim,
    "Apple Gothic", "Apple SD Gothic Neo", Sans-serif;
  font-size: 14px;
  letter-spacing: normal;
  font-weight: normal;
  line-height: normal;
}
body {
  min-width: 1180px;
  color: var(--text-primary);
}
body,
.wrapper {
  background-color: #191919;
}
body.modal-open {
  overflow: hidden;
}
a:link {
  color: var(--text-primary);
}
img {
  user-select: none;
  pointer-events: none;
}
.table,
.table table {
  width: 100%;
}
.table td,
.table th {
  border: 1px solid var(--border-dark);
}

.G005004 {
  background: url(/r/front/img/comm/flag_best.png) 0 0 no-repeat;
  width: 112px;
  height: 82px;
  position: absolute;
  top: -1px;
  left: -4px;
  font-size: 0px;
  text-indent: -999px;
}
.G005002 {
  background: url(/r/front/img/comm/flag_hot.png) 0 0 no-repeat;
  width: 112px;
  height: 82px;
  position: absolute;
  top: -1px;
  left: -4px;
  font-size: 0px;
  text-indent: -999px;
}
.G005003 {
  background: url(/r/front/img/comm/flag_new.png) 0 0 no-repeat;
  width: 112px;
  height: 82px;
  position: absolute;
  top: -1px;
  left: -4px;
  font-size: 0px;
  text-indent: -999px;
}

.w1280r {
  width: 1380px;
  margin: 0 auto;
  position: relative;
}

@media (max-width: 1440px) {
  .wrapper .header .inner .header_wrap,
  .main_section .contents .sport,
  .main_section .contents .mainEvent,
  .main_section .contents .status,
  .main_section .contents .recent,
  .layer_tutorial,
  .footer .cs .inner,
  .footer .foot_con,
  .footer .util,
  .mypage_cont,
  .header_mypage .inner,
  .sub_section .sub_contents .game_list1 .inner,
  .event_section .evt_cont,
  .cs_section .cs_con_new,
  .cs_cont,
  .tab_wrap .inner,
  .wrapper_login .header .inner .header_wrap {
    width: calc(100% - 160px) !important;
    margin: auto;
  }

  .quick_wrap .mypage_cont {
    width: 1380px !important;
  }
}
/*Common CSS end*/

/*HEADER*/
/*LOGO*/
.wrapper #theme_logo {
  min-height: 89px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.theme_logo_img {
  width: 200px;
  margin: 0;
  height: 89px;
  cursor: pointer;
  background: var(--main-logo) center / auto 90% no-repeat;
  display: block;
  background-size: 100%;
}

@media only screen and (max-width: 1180px) {
  .wrapper #theme_logo {
    width: auto;
  }
}

.wrapper {
  width: 100%;
  border-radius: var(--btn-radius);
  overflow: hidden;
}
.header.fix_top {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0 1px 10px #000;
}

/* LOADING */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1009;
  background-color: var(--bg-dark-grey);
}
.main-loading {
  width: 150px;
  height: 150px;
  background-image: var(--main-loading_icon);
  background-repeat: no-repeat;
  background-size: contain;
}

/* ERROR / INFO / INSPECTION */
.container.info {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}
.logo {
  width: 200px;
  height: 89px;
  margin: auto;
  background: var(--main-logo) no-repeat center;
  background-size: contain;
}
.logo img {
  display: block;
  margin: auto;
  width: 172px;
}
.info-title {
  text-align: center;
  font-weight: bold;
}
.info-title h2 {
  margin: 40px 0 20px;
  font-size: 50px;
  font-weight: normal;
}
.info-title .white {
  color: var(--text-primary);
}
.info-msg > * {
  text-align: center;
  font-size: 16px;
  color: var(--text-grey);
}
.chrome_dl {
  margin: 40px 0;
}
.chrome_dl img {
  display: block;
  margin: 0 auto;
}
.error-btn button {
  display: block;
  margin: auto;
  margin-top: 45px;
  padding: 15px 30px;
  font-size: 16px;
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: 0.3s all ease;
}
.error-btn button:hover,
.error-btn button:focus {
  color: var(--btn-primary-hover-text);
  background-color: var(--btn-primary-hover-bg);
}
.error-box {
  border: 1px solid var(--border-dark);
  text-align: center;
}
.error-box h2 {
  padding: var(--btn-padding);
  font-size: 24px;
}
.caution_title {
  text-align: center;
  font-size: 45px;
  font-weight: bold;
  color: var(--main-color);
}
.caution_img {
  text-align: center;
  margin-top: 150px;
}
.caution_content {
  text-align: center;
  margin-top: 150px;
  color: var(--text-primary);
}
.caution_time {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
}

/* SELECT */
select {
  width: 100%;
  height: 40px;
  padding: 5px 30px 5px 10px;
  font-size: 16px;
  color: var(--text-input);
  background-color: var(--white);
  background-image: url(/r/front/img/m/comm/bt_arrow_grey_bottom.png);
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: right 15px center;
  border: none;
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
select:focus-visible {
  outline: none;
}

/* INPUT */
input {
  height: 40px !important;
  padding: var(--btn-padding) !important;
  font-size: 16px !important;
  color: var(--text-input) !important;
  background-color: var(--white) !important;
  border: 0 !important;
  border-radius: var(--btn-radius) !important;
  box-sizing: border-box !important;
}
.checkmark {
  top: 12px;
  left: 0px;
}
.checkcontainer {
  padding: 15px 30px;
}
.checkcontainer span {
  white-space: nowrap;
  margin-left: 10px;
}

/*LOGIN (HEADER)*/
.wrapper .header .inner .header_wrap {
  display: flex;
  justify-content: space-between;
  width: 90%;
  min-width: 1100px;
  min-height: 90px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}
.wrapper .header .inner #theme_login {
  flex-basis: 30%;
  display: flex;
  align-items: center;
  justify-content: end;
  z-index: 1002;
}
.wrapper .header .inner .mem_menu {
  display: flex;
  align-items: center;
  padding: 5px 0;
  z-index: 1000;
}
.wrapper .header .inner .mem_menu:nth-child(8) {
  display: none;
}
.wrapper .header .inner .mem_menu.login:nth-child(8) {
  display: block;
}
.wrapper .header .inner .mem_menu li {
  display: inline-block;
  position: relative;
  margin: 0px;
  padding: 0 15px 0 15px;
}
.wrapper .header .inner .mem_menu li:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--main-color);
}
.wrapper .header .inner .mem_menu.login li {
  padding: 0 5px 0 15px;
}
.wrapper .header .inner .mem_menu li:first-child {
  border: 0px;
}
.wrapper .header .inner .mem_menu li a {
  display: flex;
  align-items: center;
  gap: 5px;
  width: auto;
  height: auto;
  padding: 0 10px 0 0;
  text-align: center;
  color: var(--text-grey);
  border-right: 1px solid var(--border-dark);
  box-sizing: border-box;
  cursor: pointer;
}
.wrapper .header .inner .mem_menu li a:hover {
  color: var(--btn-primary-hover-text);
  background-color: var(--btn-primary-hover-bg);
}
.wrapper .header .inner .mem_menu li a:last-child {
  border: none;
  padding: 0;
}
.wrapper .header .inner .mem_menu li a p {
  color: var(--text-primary);
}

.wrapper .header .inner .mem_menu_login {
  display: flex;
  align-items: center;
  padding: 10px 0;
  z-index: 1;
}
.wrapper .header .inner .mem_menu_login li {
  display: inline-block;
  position: relative;
  margin: 0px;
  padding: 0 15px 0 15px;
}
.wrapper .header .inner .mem_menu_login li:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--main-color);
}
.wrapper .header .inner .mem_menu_login li:first-child {
  border: 0px;
}
.wrapper .header .inner .mem_menu_login li a {
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  color: var(--text-grey);
  text-align: center;
  white-space: nowrap;
  border: none;
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  cursor: pointer;
}
.wrapper .header .inner .mem_menu_login li a:hover {
  color: var(--btn-primary-hover-text);
}
.wrapper .header .inner .mem_menu_login li a.bt_login {
  background: none;
}
.wrapper .header .inner .mem_menu_login li a.bt_login:hover {
  border: 0px;
}
.wrapper .header .inner .mem_menu_login li a.bt_join {
  background: none;
}
.wrapper .header .inner .mem_menu_login li a.bt_join:hover {
  border: 0px;
}

/* Attendance check — bold whenever it is rendered */
.wrapper .header .inner .mem_menu li.bt_attendance > a,
.wrapper .header .inner .mem_menu_login li.bt_attendance > a {
  font-weight: bold;
}

/* Site 10 desktop utility navigation */
.wrapper .header .inner .site10_utility_menu li.bt_notice {
  display: inline-block;
}
.wrapper .header .inner .site10_utility_menu li.bt_event > a,
.wrapper .header .inner .site10_utility_menu li.bt_partner > a,
.wrapper .header .inner .site10_utility_menu li.bt_coupon > a,
.wrapper .header .inner .site10_utility_menu li.bt_cs > a,
.wrapper .header .inner .site10_utility_menu li.bt_attendance > a,
.wrapper .header .inner .site10_utility_menu li.bt_bulletin > a,
.wrapper .header .inner .site10_utility_menu li.bt_notice > a,
.wrapper .header .inner .site10_utility_menu li.bt_guide > a,
.wrapper .header .inner .site10_utility_menu li.bt_betting_rules > a {
  font-size: 15px;
  font-weight: bold;
}
.wrapper .header .inner .site10_utility_menu li.bt_partner > a span,
.wrapper .header .inner .site10_utility_menu li.bt_coupon > a span {
  font-weight: bold;
}
.wrapper .header .inner .site10_utility_menu li.bt_event > a {
  color: var(--main-color);
}
.wrapper .header .inner .site10_utility_menu li.bt_event > a:hover {
  color: var(--main-hover-color);
}

/* Desktop utility navigation */
.wrapper .header .inner .mem_menu li.bt_event > a,
.wrapper .header .inner .mem_menu li.bt_partner > a,
.wrapper .header .inner .mem_menu li.bt_coupon > a,
.wrapper .header .inner .mem_menu li.bt_cs > a,
.wrapper .header .inner .mem_menu li.bt_bulletin > a,
.wrapper .header .inner .mem_menu li.bt_notice > a,
.wrapper .header .inner .mem_menu li.bt_guide > a,
.wrapper .header .inner .mem_menu li.bt_betting_rules > a,
.wrapper .header .inner .mem_menu_login li.bt_event > a,
.wrapper .header .inner .mem_menu_login li.bt_partner > a,
.wrapper .header .inner .mem_menu_login li.bt_coupon > a,
.wrapper .header .inner .mem_menu_login li.bt_cs > a,
.wrapper .header .inner .mem_menu_login li.bt_bulletin > a,
.wrapper .header .inner .mem_menu_login li.bt_notice > a,
.wrapper .header .inner .mem_menu_login li.bt_guide > a,
.wrapper .header .inner .mem_menu_login li.bt_betting_rules > a {
  font-size: 15px;
  font-weight: bold;
}
.wrapper .header .inner .mem_menu li.bt_partner > a span,
.wrapper .header .inner .mem_menu li.bt_coupon > a span,
.wrapper .header .inner .mem_menu_login li.bt_partner > a span,
.wrapper .header .inner .mem_menu_login li.bt_coupon > a span {
  font-weight: bold;
}
.wrapper .header .inner .mem_menu li.bt_event > a,
.wrapper .header .inner .mem_menu_login li.bt_event > a {
  color: var(--main-color);
}
.wrapper .header .inner .mem_menu li.bt_event > a:hover,
.wrapper .header .inner .mem_menu_login li.bt_event > a:hover {
  color: var(--main-hover-color);
}

.wrapper .header .inner .select_lang_flag ul {
  z-index: 1011;
}
.wrapper .header .inner .select_lang_flag ul li:before {
  display: none;
}
.wrapper_login .select_lang_flag {
  display: none;
}
.wrapper .header .inner .quick_menu_wrapper.non_login li a {
  width: 104px;
  font-size: 16px;
  text-indent: inherit;
}

.wrapper .header .inner .quick_menu {
  margin-top: 10px;
  text-align: left;
  display: flex;
  justify-content: end;
  align-self: center;
}
.wrapper .header .inner .quick_menu > li {
  position: relative;
}
.wrapper .header .inner .quick_menu > li:first-child {
  margin-left: 0px;
}
.wrapper .header .inner .quick_menu > li > a {
  display: block;
  width: 50px;
  height: 42px;
  margin-left: 5px;
  padding: var(--btn-padding);
  font-size: 0;
  text-indent: 9999px;
  text-align: center;
  color: var(--text-grey);
  box-sizing: border-box;
}
.wrapper .header .inner .quick_menu > li > a.bt_login {
  height: 40px;
  padding: 0px;
  line-height: 38px;
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
}
.wrapper .header .inner .quick_menu > li:hover > a.bt_login {
  color: var(--btn-primary-hover-text);
  background-color: var(--btn-primary-hover-bg);
}
.wrapper .header .inner .quick_menu > li > a.bt_join {
  height: 40px;
  padding: 0px;
  line-height: 38px;
  color: var(--text-grey);
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
}
.wrapper .header .inner .quick_menu > li:hover > a.bt_join {
  color: var(--text-grey);
  background-color: var(--bg-secondary);
  border-color: #555;
}
.wrapper .header .inner .quick_menu > li > a.bt_deposit {
  width: 70px;
  padding: 12px 0;
  text-indent: 0;
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
}
.wrapper .header .inner .quick_menu > li > a.bt_deposit span {
  padding: 5px 0 5px 25px;
  color: var(--text-secondary);
  background: url(/r/theme/center_logo/img/pc/vip_btm_deposit_black.png) 0 50%
    no-repeat;
  background-size: 20px;
  cursor: pointer;
}
.wrapper .header .inner .quick_menu > li > a.bt_deposit:hover {
  color: var(--btn-primary-hover-text);
  background-color: var(--white);
  border-color: var(--white);
}
.wrapper .header .inner .quick_menu > li > a.bt_withdraw {
  width: 70px;
  margin-right: 10px;
  padding: 12px 0;
  text-indent: 0;
  color: var(--text-secondary);
  background-color: var(--bg-grey);
  border-radius: var(--btn-radius);
}
.wrapper .header .inner .quick_menu > li > a.bt_withdraw span {
  padding: 5px 0 5px 25px;
  color: var(--text-secondary);
  background: url(/r/theme/center_logo/img/pc/vip_btm_withdrawl_black.png) 0 50%
    no-repeat;
  background-size: 20px;
  cursor: pointer;
}
.wrapper .header .inner .quick_menu > li > a.bt_withdraw:hover {
  background-color: var(--white);
}

.wrapper .header .inner .quick_menu li:hover a.bt_mypage {
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
}
.wrapper .header .inner .quick_menu li .count_alarm {
  position: absolute;
  top: -5px;
  right: -2px;
  width: 25px;
  height: 25px;
  text-align: center;
  color: var(--text-primary);
  background-color: var(--red);
  border-radius: 50%;
}
.wrapper .header .inner .quick_menu li .layer_list {
  display: none;
  position: absolute;
  top: 45px;
  right: 0px;
  z-index: 1002;
  background-color: var(--bg-grey);
  border-radius: var(--btn-radius);
}
.wrapper .header .inner .quick_menu li:hover .layer_list {
  display: block;
}
.wrapper .header .inner .quick_menu li .layer_list ul {
  width: 100%;
}
.wrapper .header .inner .quick_menu li .layer_list ul li {
  width: 215px;
  padding: 15px;
  border-bottom: 1px solid var(--border-light);
  background: #ddd url(/r/front/img/comm/ico_arrow_r7x13.png) 183px 17px
    no-repeat;
  cursor: pointer;
}
.wrapper .header .inner .quick_menu li .layer_list ul li:hover {
  background: var(--white) url(/r/front/img/comm/ico_arrow_r7x13.png) 183px 17px
    no-repeat;
}
.wrapper .header .inner .quick_menu li .layer_list ul li:last-child {
  border-bottom: 0px;
}
.wrapper .header .inner .quick_menu li .layer_list ul li a {
  width: 100%;
  height: 100%;
  color: var(--text-secondary);
}
.wrapper .header .inner .quick_menu li .layer_list ul li a span {
  width: 45px;
  text-align: center;
  color: var(--text-secondary);
}
.wrapper .header .inner .quick_menu li .layer_list ul li a p {
  width: 160px;
  font-weight: bold;
  color: var(--text-secondary);
}
.wrapper .header .inner .quick_menu li .layer_list ul li a .count {
  position: absolute;
  top: 13px;
  right: 40px;
  color: var(--text-primary);
}

/* login page */
.wrapper_login .header .inner .header_wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 90px;
  padding: 0 25px;
}
.wrapper_login .header .inner .header_wrap > :first-child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.wrapper_login .header .inner .mem_menu {
  position: relative;
  display: flex;
  margin-right: 20px;
  margin-left: auto;
  z-index: 1;
}
.wrapper_login .wrapper_login .header .inner .mem_menu li a.bt_login {
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
  cursor: pointer;
}
.wrapper_login .wrapper_login .header .inner .mem_menu li a.bt_login:hover {
  color: var(--btn-primary-hover-text);
  background-color: var(--btn-primary-hover-bg);
}
.wrapper_login .header .inner .mem_menu.login {
  width: 160px;
  padding: 0;
  text-align: center;
  position: absolute;
  top: 49px;
  right: 300px;
  margin-right: 0;
  box-sizing: border-box;
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--btn-radius);
  color: var(--btn-secondary-text);
  background-color: var(--btn-secondary-bg);
}
.wrapper_login .header .inner .mem_menu li {
  margin-left: 10px;
}
.wrapper_login .header .inner .mem_menu li a {
  display: block;
  width: 104px;
  padding: 5px;
  text-align: center;
  font-size: 16px;
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  cursor: pointer;
}
.wrapper_login .header .inner .mem_menu li a.bt_login {
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
}
.wrapper_login .header .inner .mem_menu li a.bt_login:hover {
  color: var(--btn-primary-hover-text);
  background-color: var(--btn-primary-hover-bg);
}
.wrapper_login .header .inner .mem_menu li a.bt_join {
  color: var(--text-primary);
  background-color: var(--bg-primary);
  border: 1px solid var(--white);
}
.wrapper_login .header .inner .mem_menu li a.bt_join:hover {
  color: var(--text-secondary);
  background-color: var(--white);
}

.wrapper_login .header .inner .quick_menu {
  display: none;
}
.wrapper_login .header .inner .quick_menu > li > a.bt_attendance {
  display: none;
  background: none;
}
.wrapper_login .header .inner .quick_menu > li > a.bt_leaderboard {
  display: none;
  background: none;
}
.wrapper_login .header .inner .quick_menu > li > a.bt_league {
  display: none;
  background: none;
}

.wrapper .header .inner .mem_menu li a.bt_login {
  display: block;
  width: 85px;
  margin-left: 10px;
  padding: 0;
  text-align: center;
  text-indent: 0;
  color: var(--btn-secondary-text);
  background-color: var(--btn-secondary-bg);
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
}
.wrapper .header .inner .mem_menu li a.bt_join {
  display: block;
  width: 85px;
  margin-left: 10px;
  padding: 0;
  text-align: center;
  text-indent: 0;
  color: var(--btn-secondary-text);
  background-color: var(--btn-secondary-bg);
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
}
.wrapper .header .inner .mem_menu li:hover a.bt_login {
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
}
.wrapper .header .inner .mem_menu li:hover a.bt_join {
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
}

.header .inner #theme_login .mem_menu.login {
  flex-basis: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 10px 0 0;
  position: relative;
  border: 0;
}
.header .inner #theme_login .mem_menu.login li:before {
  display: none;
}
.header .inner #theme_login .mem_menu li {
  margin-left: 10px;
}
.header .inner #theme_login .mem_menu.login .tooltip {
  position: absolute;
  top: 120%;
  left: 65%;
  transform: translateX(-50%);
  margin-bottom: 10px;
  padding: 5px 10px;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border-radius: var(--btn-radius);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 999;
}
.header .inner #theme_login .mem_menu.login:hover .tooltip {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 1;
  visibility: visible;
  color: var(--text-grey);
}
.header .inner #theme_login .mem_menu.login:hover .tooltip p {
  color: var(--text-primary);
}
.header .inner #theme_login .mem_menu li a.bt_login {
  background-color: var(--subMain-color);
  color: var(--text-primary);
  cursor: pointer;
}
.header .inner #theme_login .mem_menu li a.bt_login:hover {
  color: var(--subMain-color);
  background-color: var(--bg-primary);
  border: 1px solid var(--subMain-color);
}
.header .inner #theme_login .mem_menu li a.bt_join {
  color: var(--text-grey);
  background: transparent;
  border: 1px solid var(--border-light);
  cursor: pointer;
}
.header .inner #theme_login .mem_menu li a.bt_join:hover {
  color: var(--text-primary);
  background-color: var(--bg-secondary);
}
.header .inner #theme_login .mem_menu li.user_info {
  text-align: right;
}
.header .inner #theme_login .mem_menu li.user_info .user {
  margin-bottom: 5px;
  color: var(--text-primary);
}
.header .inner #theme_login .mem_menu li.user_info .money {
  margin-top: 5px;
  font-size: 16px;
  color: var(--main-color);
}
.header .inner #theme_login .quick_menu li {
  position: relative;
}
.header .inner #theme_login .quick_menu li:first-child {
  margin-left: 0;
}
.header .inner #theme_login .quick_menu li a.bt_money {
  border-radius: var(--btn-radius);
  background: url(/r/theme/center_logo/img/pc/top_icon1.png) 50% 50% no-repeat;
  background-color: var(--subMain-color);
}
.header .inner #theme_login .quick_menu li:hover a.bt_money {
  background-color: var(--bg-grey);
}
.header .inner #theme_login .quick_menu li a.bt_alarm {
  border-radius: var(--btn-radius);
  background: url(/r/theme/center_logo/img/pc/top_icon2.png) 50% 50% no-repeat;
  background-color: var(--bg-secondary);
}
.header .inner #theme_login .quick_menu li:hover a.bt_alarm {
  background-color: var(--bg-grey);
}
.header .inner #theme_login .quick_menu li a.bt_mypage {
  border-radius: var(--btn-radius);
  background: url(/r/theme/center_logo/img/pc/top_icon3.png) 50% 50% no-repeat;
  background-color: var(--bg-secondary);
}
.header .inner #theme_login .quick_menu li:hover a.bt_mypage {
  background-color: var(--bg-grey);
  border: 0;
}
.header .inner #theme_login .quick_menu li .count_alarm {
  position: absolute;
  top: -10px;
  right: 0;
  width: 25px;
  height: 25px;
  text-align: center;
  color: var(--text-primary);
  background-color: var(--red);
  border-radius: 50%;
}
.header .inner #theme_login .quick_menu li:hover .layer_list {
  display: block;
}

.wrapper .header .inner #theme_login .mem_menu > li.user_info {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  text-align: right;
  white-space: nowrap;
  position: relative;
  box-sizing: border-box;
}
.wrapper .header .inner #theme_login .mem_menu > li.user_info .user {
  display: block;
  margin-bottom: 0;
  font-weight: bold;
  color: var(--subMain-color);
}
.wrapper .header .inner #theme_login .mem_menu > li.user_info .user img {
  width: 20px;
  height: 20px;
}
.wrapper .header .inner #theme_login .mem_menu > li.user_info .money {
  display: block;
  width: auto;
  margin-top: 0;
  font-weight: bold;
  color: var(--text-primary);
}
.wrapper .header .inner #theme_login .mem_menu > li.user_info .level_name {
  color: var(--text-primary);
}
.wrapper .header .inner #theme_login .mem_menu > li.user_info_cp {
  display: flex;
  justify-content: end;
  gap: 10px;
  width: 100%;
  padding: 0;
  text-align: right;
  white-space: nowrap;
  position: relative;
  box-sizing: border-box;
}

.wrapper .header .inner #theme_login .quick_menu li .layer_list ul {
  width: 100%;
  border-radius: var(--btn-radius);
  overflow: hidden;
}
.wrapper .header .inner #theme_login .quick_menu li .layer_list ul li {
  width: 215px;
  border-bottom: none;
  background: #ddd url(/r/front/img/comm/ico_arrow_r7x13.png) 210px 20px
    no-repeat;
  cursor: pointer;
}
.wrapper
  .header
  .inner
  #theme_login
  .quick_menu
  li
  .layer_list
  ul
  li:nth-child(odd) {
  background: #bbb url(/r/front/img/comm/ico_arrow_r7x13.png) 210px 20px
    no-repeat;
}
.wrapper
  .header
  .inner
  #theme_login
  .quick_menu
  li
  .layer_list
  ul
  li:nth-child(even) {
  background: #ddd url(/r/front/img/comm/ico_arrow_r7x13.png) 210px 20px
    no-repeat;
}
.wrapper .header .inner #theme_login .quick_menu li .layer_list ul li:hover {
  background: var(--white) url(/r/front/img/comm/ico_arrow_r7x13.png) 210px 20px
    no-repeat;
}
.wrapper
  .header
  .inner
  #theme_login
  .quick_menu
  li
  .layer_list
  ul
  li:last-child {
  border-bottom: 0;
}
.wrapper .header .inner #theme_login .quick_menu li .layer_list ul li > a {
  width: 100%;
  height: 100%;
}
.wrapper
  .header
  .inner
  #theme_login
  .quick_menu
  li
  .layer_list
  ul
  li
  > a
  > span {
  width: 45px;
  text-align: center;
  color: var(--text-secondary);
  background: none;
}
.wrapper .header .inner #theme_login .quick_menu li .layer_list ul li > a > p {
  width: 160px;
  padding-left: 20px;
  font-weight: bold;
  color: var(--text-secondary);
}
.wrapper
  .header
  .inner
  #theme_login
  .quick_menu
  li
  .layer_list
  ul
  li
  > a
  .count {
  position: absolute;
  top: 15px;
  right: 50px;
  color: var(--text-secondary);
}

@media screen and (max-width: 1380px) {
  .wrapper .header .inner #theme_login .quick_menu {
    right: 60px !important;
  }
}

.wrapper_login .header > .inner > #theme_login > h1 a {
  display: block;
  width: 200px;
}
.wrapper_login .header .inner #theme_login .mem_menu li a.bt_login {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 1px solid var(--btn-primary-border);
  cursor: pointer;
}
.wrapper_login .header .inner #theme_login .mem_menu li a.bt_login:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}
.wrapper .header .inner .quick_menu_sub {
  position: absolute;
  top: 73px;
  right: 43px;
  margin-top: 0;
}
.wrapper .header .inner .quick_menu_sub > li {
  position: relative;
}
.wrapper .header .inner .quick_menu_sub > li:first-child {
  margin-left: 0;
}
.wrapper .header .inner .quick_menu_sub > li > a {
  display: block;
  width: 85px;
  margin-left: 10px;
  text-indent: 0;
  text-align: center;
  color: var(--main-color);
  background-color: var(--bg-dark-grey);
  border: 1px solid var(--main-color);
  box-sizing: border-box;
  border-radius: var(--btn-radius);
}
.wrapper .header .inner .quick_menu_sub > li > a.bt_money {
  background: none;
}
.wrapper .header .inner .quick_menu_sub > li:hover > a.bt_money {
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
}
.wrapper .header .inner .quick_menu_sub > li > a.bt_alarm {
  background: none;
}
.wrapper .header .inner .quick_menu_sub > li:hover > a.bt_alarm {
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
}
.wrapper .header .inner .quick_menu_sub > li > a.bt_attendance {
  background: none;
  display: none;
}
.wrapper .header .inner .quick_menu_sub > li:hover > a.bt_attendance {
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
}
.wrapper .header .inner .quick_menu_sub > li > a.bt_leaderboard {
  background: none;
  display: none;
}
.wrapper .header .inner .quick_menu_sub > li:hover > a.bt_leaderboard {
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
}
.wrapper .header .inner .quick_menu_sub > li > a.bt_league {
  background: none;
  display: none;
}
.wrapper .header .inner .quick_menu_sub > li:hover > a.bt_league {
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
}
.wrapper .header .inner .quick_menu_sub li:hover a.bt_mypage {
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
}
.wrapper .header .inner .quick_menu_sub li .count_alarm {
  position: absolute;
  top: -5px;
  right: -2px;
  width: 25px;
  height: 25px;
  text-align: center;
  color: var(--text-primary);
  background-color: var(--red);
  border-radius: 50%;
}
.wrapper .header .inner .quick_menu_sub li .layer_list {
  display: none;
  position: absolute;
  top: 31px;
  right: 0;
  z-index: 1002;
  background-color: var(--bg-grey);
  border: 5px solid var(--border-light);
}
.wrapper .header .inner .quick_menu_sub li:hover .layer_list {
  display: block;
}
.wrapper .header .inner .quick_menu_sub li .layer_list ul {
  width: 100%;
}
.wrapper .header .inner .quick_menu_sub li .layer_list ul li {
  width: 215px;
  height: 45px;
  border-bottom: 1px solid var(--border-light);
  background: #ddd url(/r/front/img/comm/ico_arrow_r7x13.png) 183px 17px
    no-repeat;
  cursor: pointer;
}
.wrapper .header .inner .quick_menu_sub li .layer_list ul li:hover {
  background: var(--white) url(/r/front/img/comm/ico_arrow_r7x13.png) 183px 17px
    no-repeat;
}
.wrapper .header .inner .quick_menu_sub li .layer_list ul li:last-child {
  border-bottom: 0;
}
.wrapper .header .inner .quick_menu_sub li .layer_list ul li a {
  width: 100%;
  height: 100%;
}
.wrapper .header .inner .quick_menu_sub li .layer_list ul li a span {
  width: 45px;
  text-align: center;
  color: var(--text-primary);
}
.wrapper .header .inner .quick_menu_sub li .layer_list ul li a p {
  width: 160px;
  padding-left: 0;
  font-weight: bold;
  color: var(--text-primary);
}
.wrapper .header .inner .quick_menu_sub li .layer_list ul li a .count {
  position: absolute;
  top: 13px;
  right: 40px;
  color: var(--text-primary);
}
.wrapper .header .inner .quick_menu_sub li a.bt_mypage {
  background: none;
  display: none;
}
.wrapper_login .header .inner .quick_menu_sub > li > a.bt_attendance {
  background: none;
  display: none;
}
.wrapper_login .header .inner .quick_menu_sub > li > a.bt_leaderboard {
  background: none;
  display: none;
}
.wrapper_login .header .inner .quick_menu_sub > li > a.bt_league {
  background: none;
  display: none;
}
body .wrapper .header > .inner:after {
  height: 0 !important;
}

/*END - LOGIN (HEADER)*/

/*JOIN INDEX*/
.wrapper_login .join_index_wrap {
  width: 1250px;
  margin: 0 auto;
  padding-top: 10px;
  text-align: center;
}
.wrapper_login .join_index_wrap .join_index_title {
  width: 100%;
  margin-bottom: 50px;
}
.wrapper_login .join_index_wrap .join_index_title p.title {
  font-size: 30px;
  color: var(--text-primary);
}
.wrapper_login .join_index_wrap .join_index_title p.sub_title {
  font-size: 20px;
  color: var(--text-primary);
}
.wrapper_login .join_index_wrap .join_index_inner_wrap {
  display: flex;
  justify-content: space-evenly;
}
.wrapper_login .normal_join {
  width: 35%;
  border: 4px solid var(--border-light);
  border-radius: var(--btn-radius);
  display: block;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wrapper_login .normal_join p {
  width: 70%;
  margin: 10px auto 0;
  text-align: left;
  color: var(--text-primary);
}
.wrapper_login .private_join {
  width: 35%;
  border: 4px solid var(--border-light);
  border-radius: var(--btn-radius);
  display: block;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wrapper_login .private_join p {
  width: 70%;
  margin: 10px auto 0;
  text-align: left;
  color: var(--text-primary);
}
.wrapper_login .join_index_normal_btn {
  width: 100%;
  position: relative;
  font-size: 16px;
  font-weight: bold;
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  cursor: pointer;
}
.wrapper_login .join_index_normal_btn:hover {
  color: var(--btn-primary-hover-text);
  background-color: var(--btn-primary-hover-bg);
}
.wrapper_login .normal_join ul li {
  position: relative;
}
.wrapper_login .normal_join ul li:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--main-color);
}
.wrapper_login .normal_join_img {
  width: 120px;
  height: 120px;
  margin: 10px auto;
  display: block;
  background: url("/r/front/img/comm/join_normal.png") no-repeat;
  background-size: 120px;
}
.wrapper_login button.normal_join_btm_btn {
  width: 70%;
  margin: 20px auto;
  padding: var(--btn-padding);
  font-size: 16px;
  font-weight: bold;
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  display: block;
  cursor: pointer;
}
.wrapper_login button.normal_join_btm_btn:hover {
  color: var(--btn-primary-hover-text);
  background-color: var(--btn-primary-hover-bg);
}
.wrapper_login .join_index_telegram_btn {
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
  background-color: #008be4;
  border: 0;
  border-radius: var(--btn-radius);
}
.wrapper_login .private_join_img {
  width: 120px;
  height: 120px;
  margin: 10px auto;
  display: block;
  background: url("/r/front/img/comm/join_telegram.png") no-repeat;
  background-size: 120px;
}
.wrapper_login button.private_join_btm_btn {
  width: 70%;
  margin: 20px auto;
  padding: var(--btn-padding);
  font-size: 16px;
  font-weight: bold;
  color: var(--text-secondary);
  background-color: #008be4;
  border: 1px solid #008be4;
  border-radius: var(--btn-radius);
  display: block;
  cursor: pointer;
}
.wrapper_login button.private_join_btm_btn:hover {
  color: #008be4;
  background-color: var(--btn-primary-hover-bg);
}
.wrapper_login .private_join ul li {
  position: relative;
}
.wrapper_login .private_join ul li:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #008be4;
}
.wrapper_login p.join_title {
  width: 70%;
  margin: 20px auto 0;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  color: var(--main-color);
}
.wrapper_login p.join_title.join_private {
  color: #2498e9;
}

/*GNB*/
.wrapper .header {
  position: relative;
  z-index: 999;
  background-color: var(--bg-dark-grey);
  border-bottom: 1px solid var(--main-color);
}
.wrapper .header:before {
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background-color: var(--bg-secondary);
}
.wrapper .header > .inner .allmenu {
  display: block;
  width: 56px;
  height: 40px;
  background-color: var(--main-color);
  z-index: 10;
}
.wrapper .header > .inner .allmenu a {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0px;
  text-indent: -999px;
  background: url(/r/front/img/template3/comm/wbc__gnb_allmenu.png) 50% 50%
    no-repeat;
}

.wrapper #newSnb {
  position: absolute;
  top: 132px;
  left: 0px;
  z-index: 1000;
  display: none;
  width: 100%;
  height: auto;
  text-align: center;
  background-color: #00000080;
  border-bottom: 1px solid var(--main-color);
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 20px #0008;
}
.wrapper #newSnb #snb_bl {
  position: relative;
  display: flex;
  margin: auto;
  width: 1180px;
  height: 100%;
}
.wrapper #newSnb #snb_bl > div.swiper-container {
  width: 100%;
  margin-bottom: 5px;
  padding-bottom: 25px;
}
.wrapper #newSnb #snb_bl > div.swiper-container ul:after {
  content: "";
  display: block;
  clear: both;
}
.wrapper #newSnb #snb_bl > div > ul > li {
  float: left;
  margin: 25px 10px 0;
  width: auto;
}
.wrapper #newSnb #snb_bl > div > ul > li a {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 126px;
  text-align: center;
  color: var(--text-grey);
  white-space: nowrap;
  cursor: pointer;
}
.wrapper #newSnb #snb_bl > div > ul > li a:hover {
  color: var(--main-color);
}
.wrapper #newSnb #snb_bl > div > ul > li a img {
  display: block;
  width: 124px;
  height: auto;
  border: 1px solid var(--border-light);
  border-radius: 14px;
}
.wrapper #newSnb #snb_bl > div > ul > li a:hover img {
  border: 1px solid var(--main-color);
}
.wrapper #newSnb #snb_bl > div > ul > li.newDivide:after {
  position: absolute;
  top: 0;
  right: -10px;
  width: 2px;
  height: 100%;
  content: "";
  background: radial-gradient(circle, var(--main-color) 0%, #000 92%);
}
.wrapper #newSnb .next {
  position: absolute;
  top: 110px;
  left: -60px;
  width: 60px;
  height: 60px;
  cursor: pointer;
  outline: none;
  background: url(/r/front/img/comm/bt_snb_prev_on.png) 0 0 no-repeat;
}
.wrapper #newSnb .prev {
  position: absolute;
  top: 110px;
  right: -60px;
  width: 60px;
  height: 60px;
  cursor: pointer;
  outline: none;
  background: url(/r/front/img/comm/bt_snb_next_on.png) 0 0 no-repeat;
}
.header > .inner .snb .snb_sl .time {
  position: absolute;
  top: 180px;
  left: 62px;
  width: 120px;
  text-align: center;
  font-size: 20px;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  border: 2px solid var(--border-light);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
}
.header > .inner .snb .snb_sl li a:hover .time {
  border: 2px solid var(--white);
}
.wrapper #newSnb #snb_bl > div > ul > li.newAddLine a {
  margin: 0;
}
.wrapper #newSnb #snb_bl > div > ul > br {
  clear: both;
}

.wrapper .header > .inner > .gnb {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  overflow: initial;
  text-align: center;
  box-sizing: border-box;
}
.wrapper .header > .inner > .gnb > li > a {
  display: block;
  padding: 6px 25px;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
  white-space: nowrap;
  box-sizing: border-box;
}
.wrapper .header > .inner > .gnb > li > a > span {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
  white-space: nowrap;
}
.wrapper .header > .inner > .gnb > li.main > a {
  cursor: pointer;
}
.wrapper .header > .inner > .gnb > li.main > a:hover {
  color: var(--main-color);
  border: 0;
}
.wrapper .header > .inner > .gnb > li.main.on > a {
  color: var(--main-color);
  border: 0;
}
.wrapper .header > .inner > .gnb > li.sup {
  padding-top: 5px;
  background: url(/r/front/img/comm/bg_bar_wh2x10.png) left 13px no-repeat;
}
.wrapper .header > .inner > .gnb > li.sup > a {
  cursor: pointer;
}
.wrapper .header > .inner > .gnb > li.sup > a:hover {
  color: var(--main-color);
}
.minigameTime {
  position: absolute;
  top: -10px;
  right: -3px;
  width: 80px;
  text-align: center;
  font-weight: bold;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  border: 2px solid var(--main-color);
  border-radius: var(--btn-radius);
  box-shadow: 10px 10px 25px #000;
}

.no-drag {
  -webkit-user-drag: none;
}
.wrapper .header > .inner > .allMenuLayer {
  display: none;
  position: absolute;
  top: 132px;
  width: 100%;
  z-index: 100;
  background-color: var(--bg-dark-grey);
  border-bottom: 1px solid var(--main-color);
}
.wrapper .header > .inner > .allMenuLayer .inner {
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 15px;
  width: 100%;
  margin: auto;
}
.wrapper .header > .inner > .allMenuLayer .inner .row {
  margin-left: 50px;
}
.wrapper .header > .inner > .allMenuLayer .inner .row:first-child {
  margin-left: 0px;
}
.wrapper .header > .inner > .allMenuLayer .inner .row p {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
  color: var(--main-color);
}
.wrapper .header > .inner > .allMenuLayer .inner .row ul {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(25, auto);
  gap: 5px 35px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.wrapper .header > .inner > .allMenuLayer .inner .row ul li {
  color: var(--text-primary);
  cursor: pointer;
}
.wrapper .header > .inner > .allMenuLayer .inner .row ul li:hover {
  color: var(--main-color);
}
.wrapper .header > .inner > .allMenuLayer .inner .row ul li a {
  color: var(--text-primary);
  cursor: pointer;
}
.wrapper .header > .inner > .allMenuLayer .inner .row ul li a:hover {
  color: var(--main-color);
}
.wrapper .header > .inner > .allMenuLayer.on {
  display: block;
}
.gameHyperLink {
  cursor: pointer;
}

/*hide gnb cs*/
.cs_center_gnb {
  display: none;
}
/*END GNB*/

/*QUICK*/
/*quick cs center*/
#pageViewBox {
  position: relative;
  display: none;
  width: 1067px;
  height: 40px;
}

.cs_center {
  position: fixed;
  top: 18% !important;
  right: 10px !important;
  z-index: 1001;
  display: block;
  background-color: var(--bg-dark-grey);
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
}
.cs_center .bt_cs {
  display: none;
  font-size: 0px;
  text-indent: -999px;
}
.cs_center .cs_con {
  width: 70px;
  padding: 0 0 10px;
  box-sizing: border-box;
}
.cs_center .cs_con li {
  position: relative;
  margin-bottom: 10px;
  padding: 15px 0 0px 0px;
  box-sizing: border-box;
}
.cs_center .cs_con li:first-child {
  margin-top: 0px;
}
.cs_center .cs_con li > a {
  display: block;
  width: 100%;
  color: var(--text-grey);
}
.cs_center .cs_con li .svg-container {
  display: flex;
  margin: auto;
  align-items: center;
  justify-content: center;
  height: 35px;
  color: var(--text-primary);
}
.cs_center .cs_con li:hover .svg-container {
  color: var(--main-color) !important;
}
.cs_center .cs_con li:hover > a {
  background-image: none !important;
}
.cs_center .cs_con li span {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--text-grey);
}
.cs_center .cs_con li:hover span {
  color: var(--main-color);
}
.cs_center .cs_con li.bt_cs1 > a {
  background-position: 50% 4px;
}
.cs_center .cs_con li.bt_cs2 > a {
  background-position: 50% -58px;
}
.cs_center .cs_con li.bt_cs3 > a {
  background-position: 50% -120px;
}
.cs_center .cs_con li.bt_cs4 > a {
  background-position: 50% -306px;
}
.cs_center .cs_con li.bt_cs5 > a {
  background-position: 50% -182px;
}
.cs_center .cs_con li.bt_cs6 > a {
  background-position: 50% -244px;
}
.cs_center .cs_con li.bt_cs7 > a {
  background-position: 50% -368px;
}

.cs_center .cs_con2 {
  position: absolute;
  bottom: -70px;
  width: 100%;
}
.cs_center .cs_con2 li {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.cs_center .cs_con2 li > a {
  display: block;
  width: 100%;
  height: 62px;
  font-size: 0px;
  text-indent: -99px;
  color: var(--text-grey);
  background: url(/r/front/img/template5/comm/bt_top_st5.png) 50% 50% no-repeat;
  cursor: pointer;
}
.cs_center .cs_con2 li.bt_down > a {
  display: none;
  background-position: 50% -120px;
  cursor: pointer;
}
.cs_center .cs_con2 li.bt_down > a:hover {
  background-position: 50% -75px;
}

.bubble_pop_box {
  position: fixed;
  top: 187px;
  right: -198px;
  z-index: 570;
  display: none !important;
}
.bubble_pop_box .bubble_pop {
  position: absolute;
  top: 30px;
  right: 240px;
  pointer-events: none;
}
.bubble_pop_box .bubble_pop_close {
  position: absolute;
  top: 5px;
  right: 255px;
}

.bubble_pop {
  width: 205px;
  height: 80px;
}
.bubble_pop_close {
  width: 20px;
  height: 20px;
  cursor: pointer;
  background: url(/r/front/img/comm/btn_simple_close.png);
  background-repeat: no-repeat;
  background-size: 20px 20px;
}
.bubble_pop_image {
  width: 100%;
  height: 100%;
  background: url(/r/front/img/comm/simple_bubble_bg.png);
  background-repeat: no-repeat;
  background-size: 200px 80px;
}

.bubble_info_title {
  padding-top: 15px;
  text-align: center;
  margin-right: 10px;
  font-weight: bold;
  color: var(--text-secondary);
}
.bubble_info_content {
  padding-top: 5px;
  text-align: center;
  margin-right: 10px;
  color: var(--text-secondary);
}

.cs_center .cs_con li.bt_cs8 > a {
  color: inherit;
  background: url(/r/front/img/template5/comm/quick_left_icon_v1-3.png)
    50% -182px no-repeat;
}
.cs_center .cs_con li.bt_cs8:hover > a {
  color: var(--main-color);
  background: url(/r/front/img/template5/comm/quick_left_icon_on_v1-3.png)
    50% -182px no-repeat;
}

/*quick deposit*/
.quick_content {
  scrollbar-3dlight-color: none;
  scrollbar-arrow-color: none;
  scrollbar-darkshadow-color: none;
  scrollbar-face-color: #eee;
  scrollbar-highlight-color: #eee;
  scrollbar-shadow-color: #eee;
  scrollbar-track-color: #fff;
}
.quick_content::-webkit-scrollbar {
  width: 8px;
}
.quick_content::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
  display: block;
}
.quick_content::-webkit-scrollbar-track {
  background-color: var(--bg-primary);
}
.quick_content::-webkit-scrollbar-thumb {
  width: 50px;
  height: 50px;
  background: rgba(85, 85, 85);
}
.quick_content .mybox {
  background-color: transparent !important;
}
.quick_wrap {
  z-index: 1111;
  height: 700px;
  background-color: var(--bg-dark-grey);
  border: 2px solid var(--border-light);
  border-radius: var(--btn-radius);
}
.quick_page {
  width: 100%;
  height: 100%;
  display: flex;
}
.quick_page .quick_left {
  width: 180px;
  height: 100%;
  box-sizing: border-box;
  background-color: var(--bg-primary);
}
.quick_page .quick_content {
  width: 100%;
  height: 100%;
  max-height: 705px;
  padding: 15px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}
.quick_page .quick_content .mypage_cont {
  padding: 0;
}
.quick_page .quick_content .mypage_cont .contents {
  width: 75%;
  max-width: 850px;
  margin: 0;
}
.quick_page .quick_content .mypage_cont .contents .deposit_wrap {
  position: relative;
}
.quick_page .quick_content #simple_bankTransferArea .transfer_area > div.mybox,
.quick_page .quick_content #simple_coinTransferArea .transfer_area > div.mybox {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.quick_page
  .quick_content
  #simple_bankTransferArea
  .transfer_area
  > div.mybox
  .mbox,
.quick_page
  .quick_content
  #simple_coinTransferArea
  .transfer_area
  > div.mybox
  .mbox {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.quick_page .quick_left > ul {
  overflow: hidden;
}
.quick_page .quick_left > ul > li {
  width: 180px;
  padding: 15px;
  font-size: 16px;
  color: var(--text-grey);
  cursor: pointer;
  background-color: var(--bg-primary);
}
.quick_page .quick_left > ul > li.menu01,
.quick_page .quick_left > ul > li.menu05 {
  background-position: 29px 9px;
}
.quick_page .quick_left > ul > li.menu02,
.quick_page .quick_left > ul > li.menu06 {
  background-position: 29px -51px;
}
.quick_page .quick_left > ul > li.menu03 {
  background-position: 29px -114px;
}
.quick_page .quick_left > ul > li.menu04 {
  background-position: 29px 9px;
}
.quick_page .quick_left > ul > li:hover,
.quick_page .quick_left > ul > li.on {
  padding-left: 15px;
  color: var(--main-color);
  background-color: var(--bg-dark-grey);
  border-left: 4px solid var(--main-color);
}

.deposit_wrap .mybox .myboxTitle {
  margin-bottom: 15px;
  font-size: 20px;
  color: var(--text-primary);
  font-weight: bold;
}
.mypageTab {
  width: 100%;
}
.mypageTab > ul {
  display: flex;
  overflow: hidden;
  background-color: var(--bg-dark-grey);
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
}
.mypageTab > ul > li {
  margin-right: 5px;
  padding: 12px 40px;
  font-size: 16px;
  color: var(--text-grey);
  cursor: pointer;
  background-color: var(--bg-primary);
  border-right: 1px solid var(--border-light);
  border-bottom: 0;
}
.mypageTab > ul > li.on {
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
}

.deposit_wrap {
  position: relative;
  margin: 0 auto;
}
.deposit_wrap .mypageTab {
  width: 850px;
}
.deposit_wrap .deposit_inp li .alrim_time {
  padding-left: 30px;
  color: var(--red);
}
.deposit_wrap .moneybox .money_sel {
  width: 600px;
  margin-top: 10px;
  overflow: hidden;
}
.deposit_wrap .moneybox .money_sel > li {
  flex: 1;
}
.deposit_wrap .moneybox .money_sel > li > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: var(--btn-padding);
  text-align: center;
  color: var(--text-input);
  background-color: var(--white);
  border: 1px solid var(--border-dark);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  white-space: nowrap;
  cursor: pointer;
}
.deposit_wrap .moneybox .money_sel > li > a > em {
  margin-right: 5px;
  font-size: 20;
  color: var(--text-grey);
  font-weight: bold;
}
.deposit_wrap .moneybox .money_sel > li > a:hover {
  color: var(--text-secondary);
  background-color: var(--btn-tertiary-bg);
}
.deposit_wrap .moneybox #depositBalance {
  display: flex;
  margin-top: 20px;
}
.deposit_wrap .coupon_sel {
  position: relative;
  cursor: pointer;
  width: 600px;
  height: 40px;
  margin-left: 30px;
  padding: 0 0 0 20px;
  background-color: var(--btn-tertiary-bg);
  box-sizing: border-box;
}
.deposit_wrap .coupon_sel > p {
  font-size: 16px;
  color: var(--text-primary);
}
.deposit_wrap .coupon_sel > span {
  position: absolute;
  top: 17px;
  right: 17px;
  width: 11px;
  height: 6px;
  background: url(/r/front/img/mypage/ico_arrow.png) 0 0 no-repeat;
  display: block;
}
.deposit_wrap .coupon_sel > span.on {
  background-position: left -74px;
}
.deposit_wrap .coupon_sel > .sel {
  display: none;
  z-index: 10;
  position: absolute;
  top: 35px;
  left: 0;
  width: 600px;
  background-color: var(--bg-primary);
  border-radius: 0 0 8px 8px;
}
.deposit_wrap .coupon_sel > .sel li {
  padding: 5px 20px;
  color: var(--text-grey);
  text-align: left;
}
.deposit_wrap .deposit_info {
  margin-left: 40px;
}
.deposit_wrap .deposit_info > li {
  padding: 0 10px;
  font-size: 16px;
  color: var(--text-primary);
}
.deposit_wrap .deposit_account {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.deposit_wrap .deposit_account > :last-child {
  margin-left: auto;
}
.deposit_wrap .deposit_account > li {
  color: var(--text-secondary);
  font-size: 16px;
  padding: 5px;
}
.deposit_wrap .deposit_account > li:first-child {
  padding-left: 0px;
}
.deposit_wrap .deposit_account > li.ready {
  color: var(--text-secondary);
  padding: var(--btn-padding);
}
.deposit_wrap .deposit_account > li > button {
  color: var(--main-color);
}
.deposit_wrap .deposit_account > li span#certifyTimer {
  font-weight: bold;
  color: var(--text-input);
  margin-left: 5px;
}
.deposit_wrap .deposit_account > li span {
  font-size: 16px;
  height: 100%;
}
.deposit_wrap .agreebox {
  position: relative;
  margin-top: 25px;
}
.deposit_wrap .agreebox > p {
  text-align: center;
  color: var(--text-grey);
}
.deposit_wrap .agreebox > .chkbox {
  position: absolute;
  top: -3px;
  right: 140px;
}
.deposit_wrap .agreebox > .chkbox label {
  height: 20px;
  padding: 5px 0 0 30px;
  color: var(--text-grey);
  cursor: pointer;
  background: url(/r/front/img/mypage/ico_checkbox.png) left 0 no-repeat;
}
.deposit_wrap .agreebox > .chkbox label.checked {
  background-position: left -59px;
}

/*quick transfer*/
.transfer_txt {
  width: 680px;
  text-align: center;
  color: var(--text-grey);
}
.transfer_txt em {
  color: var(--text-primary);
  font-weight: bold;
}
.transfer_area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  overflow: hidden;
}
.transfer_area > div.transfer_blank {
  width: 22px;
  height: 36px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -10px;
  background: url(/r/front/img/mypage/transfer_blank.png) no-repeat;
}
.transfer_area > div.mybox {
  width: 100% !important;
  min-height: 280px;
  padding: var(--btn-padding);
  border: 2px solid var(--border-light);
}
.transfer_area > div.mybox .mbox {
  text-align: center;
  margin: 25px 0;
}
.transfer_area > div.mybox .tit {
  width: 100%;
  height: 50px;
  position: relative;
  text-align: center;
  padding: 0;
}
.transfer_area > div.mybox .tit > span {
  width: 32px;
  height: 28px;
  position: absolute;
  top: 10px;
  right: 10px;
  background: url(/r/theme/center_logo/img/pc/vip_exchange.png) no-repeat;
  cursor: pointer;
}
.transfer_area > div.mybox .tit > span:hover {
  background: url(/r/theme/center_logo/img/pc/vip_exchange_on.png) no-repeat;
}
.transfer_area > div.mybox .mbox > p:first-child {
  height: 75px;
}
.transfer_area > div.mybox .mbox > p > img {
  width: 50px;
  height: 50px;
}
#coinTransferArea .transfer_area > div.mybox .mbox > p > img {
  width: auto;
}
.transfer_area > div.mybox .mbox > p.txt {
  margin-top: 10px;
  color: var(--text-primary);
}
.transfer_area > div.mybox .mbox > p.txt > em {
  color: var(--main-color);
  font-weight: bold;
}
.company_logo_box {
  height: 80px;
}
.mybox.amount {
  margin-top: 15px;
  padding: 15px 15px 30px;
}
.mybox.amount > p {
  margin-bottom: 15px;
  font-size: 20px;
  color: var(--text-primary);
}

.transfer_form > .deposit_inp li .title {
  width: 100px;
}
.quick_content .transfer_form > .deposit_inp .moneybox .top .inp_wrap {
  width: 530px;
}
.transfer_form > .deposit_inp .moneybox .top .inp_wrap > input {
  width: 400px;
}
.transfer_area .siteLogo {
  display: block;
  width: 200px;
  height: 80px;
  margin: auto;
  background: var(--main-logo) center center no-repeat;
  background-size: contain;
}
.transfer_area .siteName {
  height: 40px;
}

.quick_content .quickTransferBox {
  margin: 30px;
}
.quick_content .transfer_desc {
  margin-top: 20px;
  color: var(--text-primary);
  text-align: center;
}
.quick_content .transfer_img {
  padding: 25px 20px 30px;
  margin-bottom: 5px;
  border-radius: var(--btn-radius);
}
.quick_content .transfer_img .img {
  margin: 20px 0;
  text-align: center;
}
.quick_content .transfer_blank {
  width: 22px;
  height: 36px;
  margin: 80px 0 0 120px;
  background: url(/r/front/img/mypage/transfer_blank.png?0o3) no-repeat;
}

.quick_content .mypage_cont .mybox.amount {
  padding: 25px 15px 30px;
  margin-top: 5px;
  border-radius: var(--btn-radius);
}
.quick_content .mypage_cont .mybox.amount .top p {
  width: 10%;
  margin-top: 10px;
  font-weight: bold;
  color: var(--text-grey);
}
.quick_content .mypage_cont .mybox.amount .simple_coinDeposit .money_sel {
  padding: 10px 0 0 0;
}
.quick_content .mypage_cont .mybox.amount .simple_coinDeposit .moneybox {
  width: 80%;
}
.quick_content .mypage_cont .mybox.amount .simple_coinDeposit.gameSel .left {
  display: flex;
}
.quick_content .mypage_cont .mybox.amount .simple_coinDeposit.gameSel .right {
  display: flex;
}
.quick_content .mypage_cont .mybox.amount .simple_coinDeposit.gameSel .right p {
  margin-left: 20px;
  padding-right: 0px;
}
.quick_content .mypage_cont .mybox.amount .simple_coinDeposit .bonus_selection {
  width: 100%;
  padding-left: 25px;
}
/*END QUICK*/

/*LOGIN PAGE*/
.login_section {
  padding: 100px 0;
}
.login_section .loginwrap {
  width: 1250px;
  margin: 0 auto;
}
.login_section .loginwrap .logo {
  text-align: center;
  margin-bottom: 65px;
}
.login_section .loginbox {
  position: relative;
  width: 360px;
  margin: 0 auto;
  padding: 45px 30px 20px;
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  background-color: var(--bg-dark-grey);
  box-sizing: border-box;
}
.login_section .loginbox .title {
  position: relative;
  margin-bottom: 40px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: var(--text-primary);
}
.login_section .loginbox .title:after {
  content: "";
  position: absolute;
  bottom: -10px;
  right: 30%;
  width: 120px;
  height: 4px;
  background-color: var(--main-color);
}

.login_section .loginbox .inp_login {
  width: 100%;
}
.login_section .loginbox .inp_login > li {
  position: relative;
  margin-top: 20px;
  height: 40px;
  background: url(/r/front/img/template3/member/wbc__icons_login.png) -99px 0
    no-repeat;
}
.login_section .loginbox .inp_login > li > input {
  width: 100%;
}
.login_section .loginbox .inp_login > li.id {
  background-position: 10px 6px;
}
.login_section .loginbox .inp_login > li.pw {
  background-position: 10px -35px;
}
.login_section .loginbox .inp_login > li.inpimg {
  background-position: 10px -75px;
}
.login_section .loginbox .inp_login > li .err_ico {
  position: absolute;
  top: 6px;
  right: 0;
  width: 20px;
  height: 20px;
  display: none;
  background: url(/r/front/img/member/ico_err.png) 0 0 no-repeat;
}
.login_section .loginbox .imgchk {
  margin-top: 20px;
}
.login_section .loginbox .imgchk img {
  width: 200px;
}
.login_section .loginbox .bot_btn {
  margin-top: 60px;
  text-align: center;
}

.login_section .loginbox .bot_btn > ul {
  margin-top: 15px;
  overflow: hidden;
}
.login_section .loginbox .bot_btn > ul > li a {
  color: var(--text-primary);
  cursor: pointer;
}
.login_section .loginbox .bot_btn > ul > li a:hover {
  color: var(--main-color);
}
.login_captcha_refresh {
  width: 50px;
  height: 50px;
  margin-top: 0;
  border: 2px solid var(--border-light);
  border-radius: var(--btn-radius);
  background: url(/r/front/img/comm/r-captcha.png) 50% 45% no-repeat;
  cursor: pointer;
}
.login_captcha_refresh:hover {
  background: var(--bg-dark-grey)
    url(/r/front/img/template2/comm/r-captcha-hover.png) 50% 45% no-repeat;
}
.login_section .loginbox .err_msg {
  position: relative;
  margin: 5px 0 0 0;
  display: none;
  color: var(--red);
}
.login_icon_telegram_wrap {
  position: relative;
  width: 285px;
  margin: 10px auto;
  cursor: pointer;
}
.login_icon_telegram {
  position: relative;
  width: 30px;
  height: 34px;
  margin-right: 5px;
  background: url(/r/front/img/member/icon_telegram.png) 50% 25% no-repeat;
  background-size: 30px;
}
.login_icon_telegram_wrap input.btn_telegram_clean {
  border: none;
  border-radius: var(--btn-radius);
  background: none;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-input);
}
input.btn_general_sign_up {
  width: 100%;
  margin-top: 5px;
  border: 1px solid var(--white);
  border-radius: var(--btn-radius);
  background-color: var(--white);
  box-sizing: border-box;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-secondary);
}
input.btn_private_sign_up {
  width: 100%;
  margin-top: 10px;
  border: 1px solid var(--red);
  border-radius: var(--btn-radius);
  background-color: var(--red);
  box-sizing: border-box;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
}
.login_section .loginbox .bot_btn .bt_login {
  width: 100%;
  margin-bottom: 5px;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  padding: var(--btn-padding);
  background-color: var(--btn-primary-bg);
  box-sizing: border-box;
  font-size: 16px;
  font-weight: bold;
  color: var(--btn-primary-text);
  cursor: pointer;
}
.login_section .loginbox .bot_btn .bt_login:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}
.login_section .loginbox .bot_btn .bt_join {
  margin: 15px auto 0;
  border: 1px solid var(--btn-secondary-border);
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  cursor: pointer;
}
.login_section .loginbox .bot_btn .bt_join:hover {
  border: 1px solid var(--btn-primary-border);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.login_section .loginbox .bot_btn .deviderOr {
  width: 215px;
  margin: 20px auto;
  position: relative;
}
.login_section .loginbox .bot_btn .deviderOr div {
  color: var(--text-grey);
}
.login_section .loginbox .bot_btn .deviderOr:before {
  position: absolute;
  top: 5px;
  left: 0;
  width: 85px;
  height: 1px;
  content: "";
  background-color: var(--bg-grey);
}
.login_section .loginbox .bot_btn .deviderOr:after {
  position: absolute;
  top: 5px;
  right: 0;
  width: 85px;
  height: 1px;
  content: "";
  background-color: var(--bg-grey);
}
.login_section .loginbox .bot_btn > ul {
  margin: 30px 0;
}
.login_section .loginbox .bot_btn > ul > li {
  width: 100%;
  color: var(--text-primary);
}
.login_section .loginbox .bot_btn > ul > li > a {
  padding: 0 0 0 10px;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
}
.login_section .loginbox .bot_btn .btn_telegram {
  width: 100%;
  margin-bottom: 5px;
  border: 1px solid #1e96c8;
  border-radius: var(--btn-radius);
  padding: var(--btn-padding);
  background-color: #1e96c8;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
  cursor: pointer;
}
.login_section .loginbox .bot_btn .btn_telegram:hover {
  background: transparent;
  color: #1e96c8;
}
#qrImg {
  background-color: var(--bg-dark-grey);
}
.social {
  width: 100% !important;
  border-radius: var(--btn-radius);
}

#loadingArea {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1004;
  opacity: 0.3;
  background-color: var(--bg-dark-grey);
}
.ajaxLoading {
  width: 150px;
  height: 150px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -75px 0 0 -75px;
  z-index: 1005;
  opacity: 0.5;
  background: var(--main-loading_icon) no-repeat;
}
/*LOGIN PAGE - END*/

/* JOIN PAGE */
/*join*/
.center_box {
  position: relative;
  margin: 0 auto;
}
.joinInfo {
  width: 300px;
  height: 577px;
  margin: 0 auto;
  border: 1px solid var(--border-light);
}
.join_greeting .center_box {
  width: 1060px;
  text-align: right;
}
.join_greeting .center_box .visual_img {
  top: -165px;
  left: unset;
  right: -260px;
  width: 353px;
  height: 350px;
  background: none;
}
.join_section {
  padding: 0px 0px 100px 0px;
}
.join_greeting {
  position: relative;
  width: 100%;
  height: auto;
}
.join_greeting .inner {
  width: 1040px;
  margin: 0 auto;
  padding: 50px 0 20px 40px;
}
.join_greeting .inner .tit {
  position: relative;
  text-align: center;
  font-size: 33px;
  font-weight: bold;
  color: var(--text-primary);
}
.join_greeting .inner .tit:after {
  position: absolute;
  bottom: -10px;
  right: 44%;
  width: 120px;
  height: 4px;
  content: "";
  background-color: var(--main-color);
}
.join_greeting .inner .txt {
  margin-top: 20px;
  text-align: center;
  font-size: 16px;
  color: var(--text-grey);
}
.join_greeting .inner .txt em {
  font-size: 16px;
  color: var(--main-color);
}
.join_greeting .visual_img {
  position: absolute;
  top: 15px;
  left: 50%;
  display: block;
  margin-left: 270px;
  width: 353px;
  height: 350px;
  background: url(/r/front/img/template3/member/bg_join2.png) 0 0 no-repeat;
}
.joinbox {
  position: relative;
  width: 600px;
  margin: 0 auto;
  padding: 10px 30px 30px;
  border-radius: var(--btn-radius);
  box-sizing: border-box;
}
.joinbox .icon_mem {
  position: absolute;
  top: -28px;
  left: 50%;
  margin-left: -25px;
  display: block;
  width: 56px;
  background: none !important;
}
.joinbox .inp_join {
  margin: auto;
}
.joinbox .inp_join > li {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 15px;
  padding-left: 10px;
  padding-bottom: 0;
  background: none !important;
  box-sizing: border-box;
}
.joinbox .inp_join .bdnone {
  border: 0px !important;
}
.joinbox .inp_join .bt_yellow {
  position: absolute;
  right: 0;
  width: 20% !important;
  border-radius: var(--btn-radius) !important;
  padding: var(--btn-padding);
  background-color: var(--btn-primary-bg);
  box-sizing: border-box;
  text-align: center;
  font-size: 14px !important;
  font-weight: bold;
  color: var(--btn-primary-text);
  cursor: pointer;
}
.joinbox .inp_join .bt_yellow:hover {
  background-color: var(--bg-primary);
  color: var(--btn-primary-hover-text);
  border: 1px solid var(--btn-primary-border);
}
.joinbox .inp_join > li > input {
  width: 100%;
}
.joinbox .inp_join > li > input::-webkit-input-placeholder {
  font-weight: 400;
  color: var(--text-input);
}
.joinbox .inp_join > li > input:-ms-input-placeholder {
  font-weight: 400;
  color: var(--text-input);
}
.joinbox .inp_join > li.ico1 {
  background-position: 3px 6px;
}
.joinbox .inp_join > li.ico2 {
  background-position: 3px -35px;
}
.joinbox .inp_join > li.ico4 {
  width: 100%;
  background-position: 3px -161px;
}
.join_ico3_required {
  position: absolute;
  top: -2px;
  left: 0px;
  width: 30px;
  height: 34px;
  background: none;
  background-position: 3px -115px;
}
.join_ico5_required {
  position: absolute;
  top: -2px;
  left: 0px;
  width: 30px;
  height: 34px;
  background: none;
  background-position: 3px -214px;
}
.join_ico3 {
  position: absolute;
  top: -2px;
  left: 0px;
  width: 30px;
  height: 34px;
  background: none;
  background-position: 3px -115px;
}
.join_ico5 {
  position: absolute;
  top: -2px;
  left: 0px;
  width: 30px;
  height: 34px;
  background: none;
  background-position: 3px -214px;
}

.joinbox .inp_join > li .err_ico {
  position: absolute;
  top: 25%;
  right: 10px;
  width: 20px;
  height: 20px;
  display: none;
  background: url(/r/front/img/member/ico_err.png) 0 0 no-repeat;
}
.joinbox .inp_join > li .numbox {
  width: 100%;
}
.joinbox .inp_join > li.confirm > p {
  width: 130px;
  color: var(--text-primary);
}
.joinbox .inp_join > li.confirm > select {
  width: 100%;
}
.joinbox .inp_join > li.confirm > select option {
  background-color: #222;
  color: #fff;
}
.joinbox .inp_join > li.confirm > div#user_email2 {
  width: 136px !important;
  height: 42px !important;
  border: 1px solid var(--border-dark);
  border-radius: var(--btn-radius);
}
.joinbox .inp_join > li.confirm > div#bank_name {
  width: 412px !important;
  border: 1px solid var(--border-dark);
  border-radius: var(--btn-radius);
}
.joinbox .inp_join > li.confirm > div > input {
  width: 100%;
}
.joinbox .inp_join > li.confirm > div > span {
  position: absolute;
  top: 25%;
  right: 10px;
  font-size: 16px;
  color: var(--text-input);
}
.joinbox .inp_join > li.confirm > .bt_resend {
  position: absolute;
  top: -2px;
  right: -6px;
}
.joinbox .inp_join > li .err_msg {
  position: absolute;
  top: 40px;
  left: 30px;
  display: none;
  color: var(--red);
}
.joinbox .inp_join > li.etc {
  margin-top: 40px;
}
.joinbox .bot_btn {
  text-align: center;
  margin-top: 35px;
}
.joinbox .bot_btn .bt_join {
  width: 140px;
  padding: var(--btn-padding);
  border: 1px solid var(--main-color);
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
  box-sizing: border-box;
  font-weight: bold;
  color: var(--main-color);
  cursor: pointer;
}
.joinbox .bot_btn .bt_join:hover {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.wrapper_login .joinbox .bot_btn .bt_join {
  width: 250px;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-primary-bg);
  box-sizing: border-box;
  font-size: 16px;
  font-weight: bold;
  color: var(--btn-primary-text);
  cursor: pointer;
}
.wrapper_login .joinbox .bot_btn .bt_join:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}
/*instruction box*/
.info_box {
  position: relative;
  margin: 30px auto;
  padding: 20px 40px 20px 20px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
}
.info_box .info_title > span {
  font-size: 20px;
  font-weight: bold;
  color: var(--text-primary);
}
.info_box .info_content > p {
  width: 100%;
  color: var(--text-grey);
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 10px 5px;
  border-radius: var(--full-border-radius);
}
.joinbox .inp_join > li > label {
  width: 100px;
  margin: 0 30px 0 5px;
}
.joinbox .inp_join .formInputAsterick {
  position: absolute;
  top: 8px;
  left: 0px;
  font-weight: bold;
  color: var(--red);
}
.joinboxhr {
  width: 100%;
  height: 1px;
  border: none;
  color: var(--text-input);
  background-color: var(--bg-secondary);
  visibility: visible;
}
.joinbox .lefttitle {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-input);
}
.joinbox .righttitle {
  font-size: 16px;
  color: var(--red);
}

.joinwrap .joinbox .required {
  position: absolute;
  left: 2px;
  font-weight: bold;
  color: var(--red);
}
.joinbox .inp_join > li > select.country_selection {
  width: 120px;
}
.joinbox .inp_join > li > input.country_selection_input {
  width: 275px;
}

/*JOIN TELEGRAM */
.joinwrap .center_box.qr_telegram {
  width: 780px; /*height:600px;*/
}
.joinwrap .center_box.qr_telegram .swiper-container {
  height: 550px;
  text-align: center;
  color: var(--text-primary);
}
.joinwrap .center_box.qr_telegram .swiper-pagination-wrapper {
  width: 100%;
  height: 26px;
  text-align: center;
}
.joinwrap
  .center_box.qr_telegram
  .swiper-pagination-wrapper
  .swiper-pagination {
  display: contents;
  margin: 5px;
}
.joinwrap .center_box.qr_telegram .joinbox .info_box {
  padding: 40px 0 0 0;
}

/* Join Pritvate */
.joinwrap .center_box {
  display: flex;
  width: 1060px;
  padding: 20px 0;
  overflow: hidden;
  border: none;
  border-radius: var(--btn-radius);
}
.joinwrap .joinbox .required {
  position: absolute;
  top: 0px;
  left: -5px;
  font-weight: bold;
  color: var(--main-color);
}
.joinwrap .center_box.qr_telegram {
  padding: 0;
}
.joinwrap .center_box.qr_telegram .joinInfo {
  display: none;
}
.joinwrap .center_box.qr_telegram .joinbox .inp_join {
  display: flex;
  flex-wrap: wrap;
}
.joinwrap .center_box.qr_telegram .swiper-container {
  height: 550px;
  text-align: center;
  color: var(--text-primary);
}
.joinwrap .center_box.qr_telegram .joinbox {
  position: relative;
  width: 600px;
  padding: 45px 30px;
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
  box-sizing: border-box;
}
.joinwrap .center_box.qr_telegram .joinbox .info_box {
  margin-top: 30px;
  padding: 20px 30px;
}
.joinwrap .center_box.qr_telegram .joinbox .inp_join > li {
  position: relative;
  display: flex;
  justify-content: flex-end;
}
.joinwrap .center_box.qr_telegram .joinbox .inp_join > li > input {
  width: calc(100% - 60px) !important;
}
.joinwrap .center_box.qr_telegram .joinbox .inp_join > li > .join_ico_bitcoin {
  display: none;
}
.joinwrap .center_box.qr_telegram .joinbox .inp_join > li:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
  height: 100%;
  content: "" !important;
  display: block;
  background-size: 30px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.joinwrap .center_box.qr_telegram .joinbox .inp_join > li.join_ico_id:before {
  background-image: url(/r/theme/s1/icons/ico_join_id.svg);
}
.joinwrap
  .center_box.qr_telegram
  .joinbox
  .inp_join
  > li.join_ico_nickname:before {
  background-image: url(/r/theme/s1/icons/ico_join_nickname.svg);
}
.joinwrap .center_box.qr_telegram .joinbox .inp_join > li.join_ico_pw:before {
  background-image: url(/r/theme/s1/icons/ico_join_pw.svg);
}
.joinwrap
  .center_box.qr_telegram
  .joinbox
  .inp_join
  > li.join_ico_pw_check:before {
  background-image: url(/r/theme/s1/icons/ico_join_pw_check.svg);
}
.joinwrap
  .center_box.qr_telegram
  .joinbox
  .inp_join
  > li.join_ico_email:before {
  background-image: url(/r/theme/s1/icons/ico_join_mail.svg);
}
.joinwrap
  .center_box.qr_telegram
  .joinbox
  .inp_join
  > li.join_ico_partner:before {
  background-image: url(/r/theme/s1/icons/ico_join_partner.svg);
}
.joinwrap
  .center_box.qr_telegram
  .joinbox
  .inp_join
  > li.join_ico_crypto:before {
  background-image: url(/r/theme/s1/icons/ico_join_crypto.svg);
}
.joinwrap .center_box.qr_telegram .joinbox .required {
  left: 35px;
}
.joinwrap .center_box.qr_telegram .joinbox .inp_join > li.join_crypto {
  width: 100%;
}
.joinwrap
  .center_box.qr_telegram
  .joinbox
  .inp_join
  li.join_crypto
  .crypto_address_form {
  display: flex;
  align-items: center;
  gap: 5px;
  width: calc(100% - 60px);
}
.joinwrap
  .center_box.qr_telegram
  .joinbox
  .inp_join
  li.join_crypto
  .crypto_address_form
  select {
  width: 33.33%;
}
.joinwrap
  .center_box.qr_telegram
  .joinbox
  .inp_join
  li.join_crypto
  .crypto_address_form
  input {
  width: 66.66%;
}
.joinwrap .center_box.qr_telegram .joinbox .inp_join > li .bt_phone {
  right: 0;
}
.joinwrap .center_box.qr_telegram .joinbox .inp_join > li .err_ico {
  display: none !important;
}

.join_anni_warning,
.join_phone_warning {
  position: absolute;
  left: 110px;
  bottom: 0;
  color: var(--red);
  display: block;
}
.qr_telegram .join_anni_warning,
.qr_telegram .join_phone_warning {
  left: 68px;
  margin-right: auto;
}
.joinbox .inp_join > li:has(.join_phone_warning:not(:empty)),
.joinbox .inp_join > li:has(.join_anni_warning:not(:empty)) {
  padding-bottom: 25px;
}
/* JOIN PAGE - END*/

.mypage_cont .tab_container .tab_top {
  position: relative;
  border-bottom: 2px solid var(--white);
}
.mypage_cont .tab_container .tab_menu {
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
}
.mypage_cont .tab_container .tab_menu > li {
  width: 160px;
  margin-left: 5px;
  border: 2px solid var(--border-light);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  background-color: var(--bg-primary);
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
  color: var(--text-grey);
  cursor: pointer;
}
.mypage_cont .tab_container .tab_menu > li:first-child {
  margin-left: 0;
}
.mypage_cont .tab_container .tab_menu > li.on {
  border: 2px solid var(--white);
  border-bottom: 2px solid var(--border-light);
  color: var(--text-primary);
}

/* TELEGRAM QR CSS */
.join_qr_wrap {
  width: 1250px;
  margin: 0 auto;
  padding-top: 10px;
  text-align: center;
}
.loginwrap .loginbox .bot_btn #qrArea {
  position: relative;
  width: 200px;
  height: 200px;
  margin: auto;
  display: none;
}
#qrImg {
  position: relative;
  width: 200px;
  height: 200px;
  display: none;
}
#qrCenterIconArea {
  position: absolute;
  top: 0;
  width: 200px;
  height: 200px;
  display: none;
}
#qrCenterIcon {
  position: absolute;
  top: 82.5px;
  left: 82.5px;
  width: 35px;
  height: 35px;
  display: none;
}

.qr_step_img {
  width: 50%;
  margin: 30px 0;
}
.qr_wrap {
  position: relative;
  display: block;
  width: 200px;
  height: 200px;
  margin: 80px auto 120px;
}
.qr_wrap:after {
  position: absolute;
  top: -23px;
  left: -23px;
  width: 250px;
  height: 250px;
  content: "";
  background: url("/r/front/img/comm/telegram_qr_bg.png") no-repeat;
}
.qr_paragraph {
  margin-top: 30px;
  font-size: 35px;
  color: var(--text-primary);
}
.qr_paragraph span {
  font-weight: bold;
}
.qr_steps_title {
  font-size: 30px;
  font-weight: bold;
  color: var(--text-primary);
}
.loader {
  position: relative;
  top: -127px;
  z-index: 1;
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  background: url(/r/front/img/member/ico_member.png) 0 0 no-repeat;
}

.faq_board {
  width: 100%;
  border-top: 1px solid var(--border-light);
}
.faq_board tbody td {
  padding: 15px 0;
  text-align: center;
  color: var(--text-grey);
  border-bottom: 1px solid var(--border-light);
}
.faq_board tbody td.title {
  text-align: left;
  padding-left: 170px;
}
.faq_board tbody td.title .txt_q {
  height: 20px;
  padding: 0 0 0 40px;
  font-size: 20px;
  color: var(--text-grey);
  background: url(/r/front/img/comm/ico_faq.png) 0 0 no-repeat;
  cursor: pointer;
}
.faq_board tbody td.title .txt_q:hover {
  color: var(--main-color);
  background: url(/r/front/img/comm/ico_faq.png) 0 -66px no-repeat;
}
.faq_board tbody .on td.title .txt_q {
  color: var(--main-color);
  background: url(/r/front/img/comm/ico_faq.png) 0 -130px no-repeat;
}
.faq_board tbody td.title > .answer {
  position: relative;
  display: none;
  margin-top: 20px;
  padding: 20px 0 10px 45px;
  font-size: 16px;
  color: var(--text-primary);
}
.faq_board tbody td.title > .answer em {
  display: block;
  width: 18px;
  height: 18px;
}
.faq_board tbody td.title > .answer > span.liner {
  position: absolute;
  top: 0;
  left: -168px;
  width: 100%;
  max-width: 1380px;
  height: 1px;
  display: block;
  background-color: var(--bg-secondary);
}

.event.calendar {
  margin-left: 0;
  cursor: pointer;
}
.event.calendar:hover {
  top: 0;
  box-shadow: none;
}
.event .fin_layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  display: none;
  background: url(/r/front/img/comm/bg_black40.png) 0 top repeat;
}
.event .fin_layer > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  margin: -20px 0 0 -80px;
  background-color: var(--bg-dark-grey);
  text-align: center;
  font-size: 16px;
  color: var(--text-primary);
  display: block;
}
.event.fin .fin_layer {
  display: block;
}
.event .thumb img {
  width: 100% !important;
  height: 225px !important;
}
.event .thumbCal {
  height: 260px;
}

.event_section .evt_detail {
  position: relative;
  width: 1100px;
  margin: 0 auto;
  padding: 30px 0 50px;
}
.event_section .top_area .tit_evt {
  position: relative;
  padding-bottom: 20px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: var(--text-primary);
}
.event_section .top_area .tit_evt > em {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 46px;
  height: 1px;
  margin-left: -25px;
  display: block;
  background-color: var(--btn-tertiary-bg);
}
.event_section .top_area .tit {
  margin: 50px 0 35px;
  text-align: center;
  font-size: 35px;
  font-weight: bold;
  color: var(--text-primary);
}
.event_section .evt_info {
  padding: 37px 20px;
}
.event_section .evt_info .info_table {
  width: 100%;
  table-layout: fixed;
}
.event_section .evt_info .info_table th {
  padding: 0 0 0 5px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  font-size: 16px;
  color: var(--text-primary);
}
.event_section .evt_info .info_table td {
  border-bottom: 1px solid var(--border-light);
  font-size: 16px;
  color: var(--text-primary);
}
.event_section .evt_info .info_table td > a {
  color: var(--text-primary);
}
.event_section .evt_info .info_table td.contents {
  border-bottom: 0;
}
.event_section .evt_info .info_table td.contents .inbox {
  padding: 40px 25px;
}
.event_section .evt_info .info_table td.contents .inbox .title {
  margin-top: 40px;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
}
.event_section .evt_info .info_table td.contents .inbox .details {
  margin-top: 5px;
}
.event_section .evt_info .info_table td.contents .inbox .details li {
  font-size: 16px;
  color: var(--text-primary);
}
.event_section .evt_info .info_table td.contents .inbox img {
  width: 100%;
}
.event_section .bts {
  text-align: right;
  margin-top: 30px;
}
.event_section .bts .bt_go_list {
  width: 160px;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  text-align: center;
  border: 1px solid var(--white);
  color: var(--text-primary);
  cursor: pointer;
}
.event_section .event_join {
  width: 240px;
  border: 2px solid var(--main-color);
  border-radius: 20px;
  font-size: 20px;
  color: var(--main-color);
}
.event_section .event_join:hover {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.event_request {
  width: 200px;
  margin-top: 20px;
  border: 2px solid var(--main-color);
  border-radius: 20px;
  font-size: 20px;
  color: var(--main-color);
  cursor: pointer;
}
.event_request:hover {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.cs_section .cs_con .cs_board {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 5px;
  overflow: hidden;
  box-sizing: border-box;
}
.cs_section .cs_con .cs_board .board_box {
  width: 567px;
  height: 420px;
  border: 1px solid var(--border-light);
  box-sizing: border-box;
}
.cs_section .cs_con .cs_board .board_box .top {
  position: relative;
  height: 57px;
  padding: 15px 0 0 15px;
  background-color: var(--bg-secondary);
  box-sizing: border-box;
}
.cs_section .cs_con .cs_board .board_box .top h4 {
  height: 24px;
  padding: 0 0 0 20px;
  font-size: 20px;
  font-weight: bold;
  color: var(--text-primary);
  background: url(/r/front/img/comm/bg_bar_yellow.png) 0 0 no-repeat;
}
.cs_section .cs_con .cs_board .board_box .top a {
  position: absolute;
  top: 12px;
  right: 15px;
  display: block;
  width: 80px;
  height: 32px;
  font-size: 0;
  text-indent: -999px;
  background: url(/r/front/img/comm/bt_cs_more.png) 0 0 no-repeat;
  cursor: pointer;
}
.cs_section .cs_con .cs_board .board_box .top a:hover {
  background: url(/r/front/img/comm/bt_cs_more_on.png) 0 0 no-repeat;
}
.cs_section .cs_con .cs_board .board_box .bot {
  width: 100%;
  height: 360px;
  padding: 0 20px;
  background-color: var(--bg-primary);
  box-sizing: border-box;
}
.cs_section .cs_con .cs_service {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding-top: 10px;
}
.cs_section .cs_con .cs_service .cs_list {
  overflow: hidden;
}
.cs_section .cs_con .cs_service .cs_list > li {
  width: 280px;
  height: 200px;
  margin: 10px 0 0 10px;
  background: var(--bg-primary) url(/r/front/img/comm/cs_list_icon.png) 0 0
    no-repeat;
  box-sizing: border-box;
}
.cs_section .cs_con .cs_service .cs_list > li .top {
  position: relative;
  height: 57px;
  padding: 15px 0 0 15px;
  background-color: var(--bg-secondary);
  box-sizing: border-box;
}
.cs_section .cs_con .cs_service .cs_list > li .top h4 {
  height: 24px;
  padding: 0 0 0 20px;
  font-size: 20px;
  font-weight: bold;
  color: var(--text-primary);
  background: url(/r/front/img/comm/bg_bar_yellow.png) 0 0 no-repeat;
}
.cs_section .cs_con .cs_service .cs_list > li .top a {
  position: absolute;
  top: 22px;
  right: 15px;
  color: var(--text-grey);
  text-decoration: underline;
  cursor: pointer;
}
.cs_section .cs_con .cs_service .cs_list > li .top a:hover {
  color: var(--text-primary);
}
.cs_section .cs_con .cs_service .cs_list > li > p {
  margin-top: 115px;
  text-align: center;
  color: var(--text-grey);
}
.cs_section .cs_con .cs_service .cs_list > li.cs1 {
  margin-top: 0;
  background-position: 50% 72px;
}
.cs_section .cs_con .cs_service .cs_list > li.cs2 {
  margin-top: 0;
  margin-left: 0;
  background-position: 50% -149px;
}
.cs_section .cs_con .cs_service .cs_list > li.cs3 {
  margin-top: 0;
  background-position: 50% -370px;
}
.cs_section .cs_con .cs_service .cs_list > li.cs4 {
  margin-top: 0;
  background-position: 50% -593px;
}
.cs_section .cs_con .cs_service .cs_list > li.cs5 {
  margin-left: 0;
  background-position: 50% -816px;
}
.cs_section .cs_con .cs_service .cs_list > li.cs6 {
  background-position: 50% -1251px;
}
.cs_section .cs_con .cs_service .cs_list > li.cs7 {
  position: relative;
  width: 570px;
  height: 200px;
  padding: 20px 0 0 35px;
  border: 1px solid var(--border-light);
  background-color: var(--bg-primary);
}
.cs_section .cs_con .cs_service .cs_list > li.cs7 .txt1 {
  font-size: 16px;
  color: var(--text-grey);
}
.cs_section .cs_con .cs_service .cs_list > li.cs7 .txt2 {
  margin-top: 5px;
  font-size: 20px;
  font-weight: bold;
  color: var(--main-color);
}
.cs_section .cs_con .cs_service .cs_list > li.cs7 .txt3 {
  margin-top: 10px;
  color: var(--text-grey);
}
.cs_section .cs_con .cs_service .cs_list > li.cs7 .tel {
  margin-top: 35px;
  font-size: 20px;
  color: var(--main-color);
}
.cs_section .cs_con .cs_service .cs_list > li.cs7 .r_img {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 315px;
  height: 182px;
  background: url(/r/front/img/comm/cs_tel.jpg) no-repeat;
}

.guide_section {
  background: url(/r/front/img/mypage/bg_mypage.jpg) right 50px no-repeat;
}
.guide_section .guide_top {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}
.guide_section .guide_top .greeting {
  position: relative;
  padding: 90px 0 50px;
  text-align: center;
  box-sizing: border-box;
}
.guide_section .guide_top .greeting h3 {
  font-size: 40px;
  font-weight: bold;
  color: var(--text-primary);
}
.guide_section .guide_bot {
  padding: 40px 0 80px;
  background-color: var(--bg-primary);
}
.guide_section .guide_bot .inbox {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 5px;
  box-sizing: border-box;
}

/*login header*/
.wrapper_login {
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-primary);
}
.wrapper_login .header {
  border-bottom: 1px solid var(--border-light);
  background-color: var(--bg-dark-grey);
}
.wrapper_login .header .inner {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}
.wrapper_login .header .inner h1 a {
  margin: -15px 15px 0 0;
}

hr,
caption,
legend {
  width: 0;
  height: 0;
  font-size: 0;
  overflow: hidden;
  visibility: hidden;
}
.hide,
.blindtext {
  position: absolute;
  top: -9999px;
  width: 0;
  height: 0;
  font-size: 0;
  overflow: hidden;
  visibility: hidden;
}
input[type="text"]:focus {
  outline: none;
}
input[type="password"]:focus {
  outline: none;
}
input[type="text"].msg_err {
  display: none;
  color: var(--red);
}
.idpw_section {
  width: 1250px;
  margin: 0 auto;
  padding: 0 0 100px;
}
.idpw_greeting {
  position: relative;
  width: 100%;
}
.idpw_greeting .inner {
  width: 1040px;
  margin: 0 auto;
  padding: 70px 0 0 40px;
}
.idpw_greeting .inner .tit {
  font-size: 33px;
  color: var(--text-primary);
}
.idpw_greeting .inner .txt {
  margin-top: 20px;
  font-size: 16px;
  color: var(--text-primary);
}
.idpw_greeting .inner .txt em {
  font-size: 16px;
  color: var(--main-color);
}
.idpw_greeting .visual_img {
  position: absolute;
  top: 50px;
  left: 50%;
  display: block;
  margin-left: 200px;
  width: 258px;
  height: 261px;
  background: url(/r/front/img/member/bg_idpw1.png) 0 0 no-repeat;
}
.idpw_greeting .visual_img2 {
  position: absolute;
  top: 424px;
  left: 50%;
  display: block;
  margin-left: -540px;
  width: 399px;
  height: 320px;
  background: url(/r/front/img/member/bg_idpw2.png) 0 0 no-repeat;
}
.idpwboxwrap {
  position: relative;
  width: 360px;
  margin: 0 auto;
  padding-bottom: 0;
  background-color: var(--bg-primary);
}
.idpwboxwrap .idpwTab {
  position: absolute;
  top: 0;
  left: 0;
}
.idpwboxwrap .idpwTab > li {
  width: 160px;
  margin-left: 50px;
}
.idpwboxwrap .idpwTab > li > a {
  display: block;
  position: relative;
  width: 160px;
  text-align: center;
  border-radius: 15px 15px 0 0;
}
.idpwboxwrap .idpwTab > li > a > span {
  padding: 10px 0 0;
  font-weight: bold;
  color: var(--text-grey);
}
.idpwboxwrap .idpwTab > li > a > span > em {
  color: var(--text-grey);
}
.idpwboxwrap .idpwTab > li:first-child {
  margin-left: 0;
}
.idpwboxwrap .idpwTab > li.li1 > a {
  background-color: var(--bg-secondary);
}
.idpwboxwrap .idpwTab > li.li2 > a {
  background-color: var(--bg-secondary);
}
.idpwboxwrap .idpwTab > li.on {
  border-radius: var(--btn-radius);
  box-shadow: 1px 5px 10px #0c0c0c;
  box-sizing: border-box;
}
.idpwboxwrap .idpwTab > li.li1:hover > a {
  background-color: var(--bg-secondary);
}
.idpwboxwrap .idpwTab > li.li2:hover > a {
  background-color: var(--bg-secondary);
}
.idpwboxwrap .idpwTab > li.li1:hover > a > span {
  color: var(--text-primary);
}
.idpwboxwrap .idpwTab > li.li1:hover > a > span > em {
  color: var(--text-primary);
}
.idpwboxwrap .idpwTab > li.li2:hover > a > span {
  color: var(--text-primary);
}
.idpwboxwrap .idpwTab > li.li2:hover > a > span > em {
  color: var(--text-primary);
}
.idpwboxwrap .idpwTab > li.li1.on > a {
  z-index: 99;
  background-color: var(--bg-primary);
}
.idpwboxwrap .idpwTab > li.li2.on > a {
  z-index: 99;
  background-color: var(--bg-primary);
}
.idpwboxwrap .idpwTab > li.li1.on > a > span {
  color: var(--text-grey);
}
.idpwboxwrap .idpwTab > li.li1.on > a > span > em {
  color: var(--main-color);
}
.idpwboxwrap .idpwTab > li.li2.on > a > span {
  color: var(--text-grey);
}
.idpwboxwrap .idpwTab > li.li2.on > a > span > em {
  color: var(--main-color);
}
.idpwboxwrap .idpwbox {
  position: relative;
  top: 0;
  left: 0;
  width: 360px;
  margin: 0 auto;
  padding: 45px 30px 30px;
  border-radius: var(--btn-radius);
  box-shadow: 1px 5px 10px #0c0c0c;
  box-sizing: border-box;
  background-color: var(--bg-primary);
}
.idpwboxwrap .idpwbox .icon_mem {
  position: absolute;
  top: -28px;
  left: 50%;
  z-index: 100;
  display: none;
  margin-left: -30px;
  width: 56px;
  height: 56px;
  background: url(/r/front/img/member/ico_schidpw.png) 0 0 no-repeat;
}

.idpw_section .idpwbox .inp_pwid {
  width: 100%;
  margin-top: 30px;
}
.idpw_section .idpwbox .inp_pwid > li {
  position: relative;
  height: 30px;
  margin-top: 25px;
  padding-left: 40px;
  border-bottom: 2px solid var(--border-light);
  background: url(/r/front/img/member/icons_login_2.png) -99px 0 no-repeat;
}
.idpw_section .idpwbox .inp_pwid > li > input {
  width: 230px;
}
.idpw_section .idpwbox .inp_pwid > li.phon {
  background-position: 3px -161px;
}
.idpw_section .idpwbox .inp_pwid > li.id {
  background-position: 3px 6px;
}
.idpw_section .idpwbox .inp_pwid > li.mail {
  background-position: 3px -115px;
}
.idpwbox .inp_pwid > li > input {
  width: 225px;
}
.idpwbox .inp_pwid > li > input::-webkit-input-placeholder {
  color: var(--text-grey);
}
.idpwbox .inp_pwid > li > input:-ms-input-placeholder {
  color: var(--text-grey);
}
.idpwBoxDiv {
  display: none;
}
.idpwBoxDiv .inp_mbrRel .numbox input {
  margin-right: 10px;
  padding: var(--btn-padding);
  background-color: #fff2 !important;
  color: var(--text-primary);
  text-align: center;
  letter-spacing: 0;
}
.idpwbox .bot_btn {
  margin-top: 35px;
  text-align: center;
}
.idpwbox .bot_btn .bt_ipsch {
  width: 140px;
  height: 40px;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-primary-bg);
  box-sizing: border-box;
  font-weight: bold;
  color: var(--btn-primary-text);
  cursor: pointer;
}
.idpwbox .bot_btn .bt_ipsch:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}

#btnSendCertificate {
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  padding: var(--btn-padding);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
#btnSendCertificate:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
  cursor: pointer;
}
#certifyTimer {
  margin-right: 10px;
}

.layer_idpwCom {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 200;
  display: none;
}
.layer_idpwCom.layer_idpwpopname {
  width: 401px;
  margin: -250px 0 0 -201px;
}
.layer_idpwCom.layer_idpw2popname {
  width: 401px;
  margin: -190px 0 0 -201px;
}
.layer_idpwCom .bt_close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  display: block;
  font-size: 0;
  text-indent: -99px;
  background: url(/r/front/img/main/bt_close.png) 0 0 no-repeat;
}
.layer_idpwCom .layer_inner {
  position: relative;
  width: 401px;
  margin-top: 50px;
  padding-bottom: 25px;
  text-align: center;
  background-color: var(--white);
  border-radius: var(--btn-radius);
}
.layer_idpwCom .layer_inner .icochk {
  padding-top: 25px;
  text-align: center;
}
.layer_idpwCom .layer_inner .txt_big {
  padding-top: 15px;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-input);
}
.layer_idpwCom .layer_inner .txt_big > span {
  color: var(--main-color);
}
.layer_idpwCom .layer_inner .txt {
  margin-top: 5px;
  color: var(--text-grey);
}
.layer_idpwCom .layer_inner .txt span {
  font-weight: bold;
  color: var(--text-input);
}
.layer_tutorial .layer_inner .bt_area {
  margin-top: 25px;
}

.layerbot_btn {
  margin-top: 10px;
  text-align: center;
}
.layerbot_btn .layerbt_submit {
  padding: 10px 30px;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-primary-bg);
  box-sizing: border-box;
  font-weight: bold;
  color: var(--btn-primary-text);
  cursor: pointer;
}
.layerbot_btn .layerbt_submit:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}

.mbrRel_section {
  padding: 0 0 100px;
}
.mbrRel_greeting {
  position: relative;
  width: 100%;
}
.mbrRel_greeting .inner {
  width: 1040px;
  margin: 0 auto;
  padding: 70px 0 0 40px;
}
.mbrRel_greeting .inner .tit {
  font-size: 33px;
  color: var(--text-primary);
}
.mbrRel_greeting .inner .txt {
  margin-top: 20px;
  font-size: 16px;
  color: var(--text-primary);
}
.mbrRel_greeting .inner .txt em {
  font-size: 16px;
  color: var(--main-color);
}
.mbrRel_greeting .inner .txt .info_desc {
  color: var(--text-grey);
}
.mbrRel_greeting .visual_img {
  position: absolute;
  top: 23px;
  left: 50%;
  display: block;
  margin-left: 155px;
  width: 320px;
  height: 236px;
  background: url(/r/front/img/member/bg_mbrRel.png) 0 0 no-repeat;
}
.mbrRel_section .mbrRelbox {
  position: relative;
  width: 360px;
  margin: 0 auto;
  padding: 45px 30px 20px;
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
  box-shadow: 1px 5px 10px #0c0c0c;
  box-sizing: border-box;
}
.mbrRel_section .mbrRelbox .title {
  margin-bottom: 10px;
  text-align: center;
  font-size: 20px;
  color: var(--text-grey);
}
.mbrRel_section .mbrRelbox .icon_mem {
  position: absolute;
  top: -54px;
  left: 50%;
  display: block;
  margin-left: -30px;
  width: 56px;
  height: 86px;
  background: url(/r/front/img/member/ico_mbrRel.png) 0 0 no-repeat;
  background-size: 56px;
}
.mbrRel_section .mbrRelbox .inp_mbrRel {
  width: 100%;
  margin-top: 30px;
}
.mbrRel_section .mbrRelbox .inp_mbrRel > li {
  position: relative;
  width: 300px;
  height: 35px;
  margin-top: 10px;
  padding-left: 40px;
  border-bottom: 2px solid var(--border-light);
  background: url(/r/front/img/member/icons_login_2.png) -99px 0 no-repeat;
  box-sizing: border-box;
}
.mbrRelbox .inp_mbrRel > li.ico2 {
  background-position: 3px -35px;
}
.mbrRelbox .inp_mbrRel > li.ico4 {
  background-position: 3px -161px;
}
.mbrRelbox .inp_mbrRel > li .bt_phone {
  position: absolute;
  top: 1px;
  right: -90px;
}
.mbrRelbox .inp_mbrRel .bt_yellow {
  width: 80px;
  text-align: center;
  border: 1px solid var(--main-color);
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
  box-sizing: border-box;
  font-weight: bold;
  color: var(--main-color);
  cursor: pointer;
}
.mbrRelbox .inp_mbrRel .bt_yellow:hover {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.mbrRelbox .inp_mbrRel > li.confirm > p {
  margin: 10px 10px 0 0;
  color: var(--text-grey);
}
.mbrRelbox .inp_mbrRel > li.confirm > div {
  position: relative;
  width: 115px;
  padding: 0 0 0 5px;
  border: 1px solid var(--border-dark);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
}
.mbrRelbox .inp_mbrRel > li.confirm > div > input {
  width: 65px;
}
.mbrRelbox .inp_mbrRel > li.confirm > div > span {
  position: absolute;
  top: 6px;
  right: 3px;
  color: var(--text-primary);
}
.mbrRelbox .inp_mbrRel > li.confirm > .bt_resend {
  position: absolute;
  top: -2px;
  right: -20px;
}
.mbrRel_section .mbrRelbox .inp_mbrRel > li > input {
  width: 225px;
}
.mbrRel_section .mbrRelbox .inp_mbrRel > li > input::-webkit-input-placeholder {
  color: var(--text-grey);
}
.mbrRel_section .mbrRelbox .inp_mbrRel > li > input:-ms-input-placeholder {
  color: var(--text-grey);
}
.mbrRel_section .msg_err {
  padding: 5px 0 0 35px;
  display: none;
  color: var(--red);
}
.mbrRelbox .bot_btn {
  margin-top: 35px;
  text-align: center;
}
.mbrRelbox .bot_btn .bt_mbrRel {
  width: 140px;
  border: 1px solid var(--main-color);
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
  box-sizing: border-box;
  font-weight: bold;
  color: var(--main-color);
  cursor: pointer;
}
.mbrRelbox .bot_btn .bt_mbrRel:hover {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.partners_section .partners_vis {
  position: relative;
}
.partners_section .partners_vis .banner {
  position: relative;
  width: 1900px;
  left: 50%;
  margin-left: -950px;
}
.partners_section .partners_vis .banner .bt_partners {
  position: absolute;
  top: 465px;
  left: 444px;
  width: 240px;
  border: 1px solid var(--btn-primary-border);
  border-radius: 20px;
  background-color: var(--btn-primary-bg);
  box-sizing: border-box;
  font-size: 20px;
  font-weight: bold;
  color: var(--btn-primary-text);
  text-align: center;
  cursor: pointer;
}
.partners_section .partners_vis .banner .bt_partners:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}
.partners_section .infobox {
  width: 1900px;
  height: 580px;
  text-align: center;
  background: url(/r/front/img/comm/info_partners.jpg) no-repeat;
  background-color: var(--bg-primary);
}
.partners_section .join_form {
  width: 820px;
  margin: 0 auto;
  padding: 90px 0 80px;
}
.partners_section .join_form > h4 {
  margin-bottom: 70px;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: var(--main-color);
}
.partners_section .join_form .inp_join {
  width: 100%;
  overflow: hidden;
}
.partners_section .join_form .inp_join > li {
  position: relative;
  width: 400px;
  border-bottom: 1px solid var(--border-light);
  box-sizing: border-box;
}
.partners_section .join_form .inp_join > li p.title {
  position: relative;
  width: 45px;
  font-size: 0;
  text-indent: -999px;
  background: url(/r/front/img/member/icons_modify.png) 0 0 no-repeat;
}
.partners_section .join_form .inp_join > li input {
  width: 350px;
  margin-top: 10px;
}
.partners_section .join_form .inp_join > li input::-webkit-input-placeholder {
  color: var(--text-input);
}
.partners_section .join_form .inp_join > li input:-ms-input-placeholder {
  color: var(--text-input);
}
.partners_section .join_form .inp_join > li p.ico1 {
  background-position: -4px -2px;
}
.partners_section .join_form .inp_join > li p.ico2 {
  background-position: -3px -76px;
}
.partners_section .join_form .inp_join > li p.ico3 {
  background-position: -2px -145px;
}
.partners_section .join_form .inp_join > li p.ico4 {
  background-position: -2px -214px;
}
.partners_section .join_form .inp_join > li p.ico5 {
  background-position: -2px -641px;
}
.partners_section .join_form .inp_join > li p.ico6 {
  background-position: -2px -719px;
}
.partners_section .join_form .inp_join > li p.ico7 {
  background-position: -2px -798px;
}
.partners_section .join_form .inp_join > li .err_ico {
  position: absolute;
  top: 6px;
  right: 0;
  width: 20px;
  height: 20px;
  display: block;
  background: url(/r/front/img/member/ico_err.png) 0 0 no-repeat;
}
.partners_section .join_form .inp_join > li .err_msg {
  position: absolute;
  top: 40px;
  left: 30px;
  color: var(--red);
}
.partners_section .join_form .btn_wrap {
  margin-top: 100px;
  text-align: center;
}
.partners_section .join_form .btn_wrap .bt_ptn_join {
  width: 200px;
  border: 1px solid var(--main-color);
  border-radius: 20px;
  background-color: var(--bg-primary);
  box-sizing: border-box;
  font-size: 20px;
  font-weight: bold;
  color: var(--main-color);
  text-align: center;
  cursor: pointer;
}
.partners_section .join_form .btn_wrap .bt_ptn_join:hover {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.alliance {
  width: 100%;
  margin-top: 100px;
}
.alliance > ul {
  overflow: hidden;
}
.alliance > ul > li {
  width: 33.3%;
  text-align: left;
}
.alliance > ul > li > div {
  height: 60px;
  padding-left: 65px;
  text-align: left;
  background: url(/r/front/img/comm/partner_contact.png) 0 0 no-repeat;
  background-size: 60px;
}
.alliance > ul > li > div.phone {
  background-position: 0 -90px;
}
.alliance > ul > li > div.email {
  background-position: 0 0;
}
.alliance > ul > li > div.telegram {
  background-position: 0 -180px;
}
.alliance > ul > li > div p {
  padding: 10px 0 0 10px;
  font-size: 16px;
  font-weight: bold;
}
.alliance > ul > li > div .alliance_title {
  color: var(--text-grey);
}
.alliance > ul > li > div .alliance_contact {
  padding: 0;
  color: var(--main-color);
}

.jackpot-alert-wrapper {
  position: fixed;
  top: 100px;
  right: 100px;
  width: 260px;
  z-index: 99999;
}
.jackpot-alert .inner {
  display: block;
  padding: 15px;
  margin: 5px;
  border-radius: var(--btn-radius);
  background-color: var(--btn-tertiary-bg);
  box-shadow: 3px 3px 10px #333;
}
.jackpot-alert .inner p {
  font-weight: bold;
  color: var(--text-primary);
}
.jackpot-alert .inner p em {
  font-weight: bold;
  color: var(--text-primary);
}
.jackpot-alert .inner span {
  display: block;
  margin-top: 5px;
  font-weight: bold;
  color: var(--text-input);
}
.jackpot-alert .alrimClose {
  width: inherit;
  margin: 5px 15px 0 0;
  cursor: pointer;
  color: var(--text-grey);
}
.jackpot-alert .inner,
.alert .close {
  color: var(--text-primary);
}
.jackpot-alert input {
  display: none;
}
.jackpot-alert input:checked ~ * {
  animation-name: dismiss, hide;
  animation-duration: 300ms;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0s, 100ms;
}

/* gamelist title */
.titlebox {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
}
.titlebox h4 {
  padding: 20px 0;
  font-size: 22px;
  font-weight: bold;
  color: var(--text-primary);
}
.titlebox .bt_all {
  min-width: 80px;
  width: auto;
  padding: var(--btn-padding);
  border: 2px solid var(--white);
  border-radius: var(--btn-radius);
  background: none;
  font-weight: bold;
  color: var(--text-grey);
  cursor: pointer;
}
.titlebox .bt_all:hover {
  border: 2px solid var(--white);
  color: var(--text-primary);
}

/*BANNER*/
.bannerLink {
  display: block;
  height: 370px;
  margin-top: 25px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  filter: blur(5px) brightness(0.5);
}
#theme_banner_outer .swiper-pagination-fraction {
  bottom: 10px;
  right: 18%;
  left: inherit;
  width: 50px;
}
#theme_banner_outer .swiper-container {
  width: 100%;
  height: 440px;
  margin: 0 auto;
}
#theme_banner_outer .swiper-button-prev {
  left: calc(18% - 13px);
  color: var(--main-color);
}
#theme_banner_outer .swiper-button-next {
  right: calc(18% - 24px);
  color: var(--main-color);
}
#swiper-event-prev {
  left: -35px;
  color: var(--main-color);
}
#swiper-event-next {
  right: -35px;
  color: var(--main-color);
}
@media only screen and (max-width: 1800px) {
  #theme_banner_outer .swiper-button-prev {
    left: calc(13% - 13px);
  }
  #theme_banner_outer .swiper-button-next {
    right: calc(13% - 7px);
  }
}
@media only screen and (max-width: 1699px) {
  #theme_banner_outer .swiper-button-prev {
    left: calc(10% - 13px);
  }
  #theme_banner_outer .swiper-button-next {
    right: calc(10% - 7px);
  }
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: calc(17% - 7px);
  color: var(--text-grey);
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: calc(18% - 13px);
  color: var(--text-grey);
}
#theme_banner_outer .swiper-slide.swiper-slide-active .bannerLink {
  height: 440px;
  margin-top: 0;
  filter: none;
}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 35px;
  right: 21%;
  left: inherit;
  width: 30px;
  padding: 10px 30px;
  border-radius: var(--btn-radius);
  background-color: #00000080;
  color: var(--text-primary);
}

/* MAIN SECTION - CONTENTS */
.main_section .contents {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}
.main_section .contents > * {
  flex: 0 0 auto;
}

/* EVENT */
.main_section .contents .mainEvent {
  width: 100%;
}
.main_section .contents .mainEvent .inner {
  position: relative;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}
.main_section .contents .mainEvent .inner .addTab {
  border-bottom: 1px solid var(--border-light);
}
.main_section .contents .mainEvent .inner .addTab .main_event_area {
  position: absolute;
  top: 45px;
  left: 125px;
  width: 900px;
  overflow: hidden;
}
.main_section .contents .mainEvent .inner .addTab .tabMenus {
  position: absolute;
  top: 0;
  left: 0;
}
.main_section .contents .mainEvent .inner .addTab .tabMenus li {
  padding: 0 25px;
  text-align: center;
}
.main_section .contents .mainEvent .inner .addTab .tabMenus li a {
  font-size: 16px;
  color: var(--text-grey);
}
.main_section .contents .mainEvent .inner .addTab .tabMenus li:hover a {
  color: var(--text-primary);
  font-weight: bold;
}
.main_section .contents .mainEvent .inner .addTab .tabMenus li.on {
  border-bottom: 3px solid var(--white);
}
.main_section .contents .mainEvent .inner .addTab .tabMenus li.on a {
  color: var(--text-primary);
  font-weight: bold;
}
.main_section .contents .mainEvent .inner .addTab .btnPrev {
  display: block;
  position: absolute;
  top: 35px;
  right: 50px;
  width: 40px;
  font-size: 0;
  text-indent: -999px;
  border: 1px solid var(--white);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  background: url(/r/front/img/template3/comm/wbc__tab_move_prev.png) 50% 50%
    no-repeat;
  cursor: pointer;
}
.main_section .contents .mainEvent .inner .addTab .btnPrev:hover {
  border: 1px solid var(--main-color);
}
.main_section .contents .mainEvent .inner .addTab .btnNext {
  display: block;
  position: absolute;
  top: 35px;
  right: 0;
  width: 40px;
  font-size: 0;
  text-indent: -999px;
  border: 1px solid var(--white);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  background: url(/r/front/img/template3/comm/wbc__tab_move_next.png) 50% 50%
    no-repeat;
  cursor: pointer;
}
.main_section .contents .mainEvent .inner .addTab .btnNext:hover {
  border: 1px solid var(--main-color);
}
.main_section .contents .mainEvent .tabContainer {
  position: relative;
  margin: 30px 0;
}
.main_section .contents .mainEvent .tabContainer .tabCon.on {
  display: block;
}
.main_section .contents .mainEvent .tabContainer .tabCon .eventList {
  position: relative;
}
.main_section
  .contents
  .mainEvent
  .tabContainer
  .tabCon
  .eventList
  .swiper-slide {
  position: relative;
  height: 300px;
  flex: 0 0 32%;
  box-sizing: border-box;
  margin-right: 20px;
  padding-bottom: 10px;
  overflow: hidden;
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
  box-shadow: 1px 5px 10px #0c0c0c;
}
.main_section
  .contents
  .mainEvent
  .tabContainer
  .tabCon
  .eventList
  .swiper-slide
  p {
  margin-top: 40px;
  padding: 0 10px;
  font-weight: bold;
}
.main_section
  .contents
  .mainEvent
  .tabContainer
  .tabCon
  .eventList
  .swiper-slide
  em {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 95%;
  max-height: 40px;
  padding: 5px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main_section
  .contents
  .mainEvent
  .tabContainer
  .tabCon
  .eventList
  .swiper-slide
  img {
  position: absolute;
  top: 0;
  width: 100% !important;
  height: 220px !important;
}
.main_section .contents .mainEvent .tabContainer .tabCon .eventList li {
  width: 380px;
}
.main_section .contents .mainEvent .tabContainer .tabCon .eventList li p {
  margin-top: 30px;
  font-size: 20px;
  font-weight: bold;
  color: var(--text-primary);
}
.main_section .contents .mainEvent .tabContainer .tabCon .eventList li em {
  display: block;
  margin-top: 15px;
  color: var(--text-grey);
}
.event_arrows_wrap {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  max-width: 1380px;
}
.event_arrows_wrap .prev_arrow {
  position: absolute;
  left: -35px;
  margin-top: -30px;
}
.event_arrows_wrap .next_arrow {
  position: absolute;
  right: -35px;
  margin-top: -30px;
}

/* JACKPOT */
.main_section .contents .status .jackpot {
  flex: 1;
  width: 100%;
  padding: 0 70px 7px 7px;
  border-radius: var(--btn-radius);
}
.main_section .contents .status .jackpot.swiper-container {
  height: 330px;
}
.main_section .contents .status .jackpot .bx-viewport {
  width: 487px !important;
  height: 340px !important;
}
.main_section .contents .status .jackpot .jackpot_list {
  width: 365px;
}
.main_section .contents .status .jackpot .jackpot_list > li {
  position: relative;
  width: 360px;
  margin-left: -7px;
  margin-top: 5px;
  cursor: pointer;
}
.main_section .contents .status .jackpot .jackpot_list > li:first-child {
  margin-top: 0;
}
.main_section .contents .status .jackpot .jackpot_list > li.on {
  height: 87px;
}
.main_section .contents .status .jackpot .jackpot_list > li .thumb {
  box-shadow: 1px 4px 24px #1d1a1a;
}
.main_section .contents .status .jackpot .jackpot_list > li .normal {
  position: relative;
  height: 36px;
  border-radius: var(--btn-radius);
  background-color: #222;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.main_section .contents .status .jackpot .jackpot_list > li.on .normal {
  display: none;
}
.main_section .contents .status .jackpot .jackpot_list > li .normal .name {
  font-size: 12px;
  color: #fff;
  line-height: 34px;
  text-align: left;
}
.main_section .contents .status .jackpot .jackpot_list > li .normal .game {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 34px;
  text-align: left;
}
.main_section .contents .status .jackpot .jackpot_list > li .normal .money {
  margin-left: auto;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  line-height: 34px;
  font-family: var(--sub-font);
}
.main_section .contents .status .jackpot .jackpot_list > li .normal .thumb {
  position: absolute;
  top: -20px;
  right: -106px;
  width: 80px;
  height: 80px;
  z-index: 3;
}
.main_section .contents .status .jackpot .jackpot_list > li .normal .thumb img {
  width: 100%;
}
.main_section .contents .status .jackpot .jackpot_list > li .hoverbox {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 85px;
  border-top: 1px solid #6a6a6a;
  border-bottom: 1px solid #6a6a6a;
  border-radius: var(--btn-radius);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.2) 20%,
    rgba(0, 0, 0, 0.95) 50%,
    rgba(0, 0, 0, 0.3) 56%
  );
  background-color: #333;
  box-shadow: 1px 5px 10px #0c0c0c;
  z-index: 10;
  display: none;
}
.main_section .contents .status .jackpot .jackpot_list > li .hoverbox:before {
  content: "";
  position: absolute;
  top: 2px;
  right: 0;
  width: 1px;
  height: 83px;
  background: linear-gradient(
    180deg,
    #6a6a6a 1%,
    var(--main-color) 50%,
    #6a6a6a 99%
  );
}
.main_section .contents .status .jackpot .jackpot_list > li .hoverbox:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 1px;
  height: 83px;
  background: linear-gradient(
    180deg,
    #6a6a6a 1%,
    var(--main-color) 50%,
    #6a6a6a 99%
  );
}
.main_section .contents .status .jackpot .jackpot_list > li.on .hoverbox {
  display: block;
}
.main_section
  .contents
  .status
  .jackpot
  .jackpot_list
  > li
  .hoverbox
  .img_money {
  position: absolute;
  top: 14px;
  left: 10px;
  width: 95px;
  height: 60px;
  background: url(/r/front/img/template1/main/bg_money.png) 0 0 no-repeat;
  z-index: 1;
  display: block;
}
.main_section .contents .status .jackpot .jackpot_list > li .hoverbox .name {
  position: absolute;
  top: 15px;
  left: 114px;
  font-size: 14px;
  color: #ccc;
  line-height: 1.2;
  text-align: left;
}
.main_section .contents .status .jackpot .jackpot_list > li .hoverbox .game {
  position: absolute;
  top: 15px;
  right: 13px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  text-align: left;
}
.main_section .contents .status .jackpot .jackpot_list > li .hoverbox .money {
  position: absolute;
  top: 38px;
  right: 13px;
  font-size: 26px;
  font-weight: bold;
  line-height: 36px;
  color: var(--main-color);
  background: -webkit-linear-gradient(#ffea74, #ea9f34, #604c1c, #bc9150);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.main_section
  .contents
  .status
  .jackpot
  .jackpot_list
  > li
  .hoverbox
  .money
  > em {
  font-size: 20px;
  font-weight: 700;
}
.main_section
  .contents
  .status
  .jackpot
  .jackpot_list
  > li
  .hoverbox
  .money_odd {
  position: absolute;
  top: 30px;
  right: 13px;
  font-size: 26px;
  font-weight: bold;
  line-height: 36px;
  color: var(--main-color);
  background: -webkit-linear-gradient(#ffea74, #ea9f34, #604c1c, #bc9150);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.main_section
  .contents
  .status
  .jackpot
  .jackpot_list
  > li
  .hoverbox
  .money_odd
  > em {
  font-size: 20px;
  font-weight: 700;
}
.main_section
  .contents
  .status
  .jackpot
  .jackpot_list
  > li
  .hoverbox
  .money_odd1 {
  position: absolute;
  top: 54px;
  right: 13px;
  font-size: 14px;
  color: #fff;
  line-height: 36px;
}
.main_section
  .contents
  .status
  .jackpot
  .jackpot_list
  > li
  .hoverbox
  .money_odd1
  > em {
  font-size: 14px;
  font-weight: 700;
}
.main_section .contents .status .jackpot .jackpot_list > li .edge {
  position: absolute;
  top: 35px;
  right: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid var(--main-color);
  z-index: 1;
  display: block;
}
.main_section .contents .status .jackpot .jackpot_list > li .hoverbox .thumb {
  position: absolute;
  top: -8px;
  right: -118px;
  width: 104px;
  height: 104px;
  z-index: 4;
}
.main_section
  .contents
  .status
  .jackpot
  .jackpot_list
  > li
  .hoverbox
  .thumb
  img {
  width: 100%;
}

/* LATEST */
.main_section .contents .recent {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}
.main_section .contents .recent .titlebox .favorbox_main {
  position: absolute;
  top: 24px;
  left: 50%;
  margin-left: -100px;
}
.main_section .contents .recent .recent_sl {
  margin-top: 10px;
}
.main_section .contents .recent .recent_sl .sl li {
  border: 1px solid var(--border-dark);
}
.main_section .contents .recent .recent_sl .bx-controls-direction > a {
  display: block;
  position: absolute;
  top: 50%;
  width: 54px;
  height: 54px;
  font-size: 0;
  cursor: pointer;
}
.main_section .contents .recent .recent_sl .bx-controls-direction > a.bx-prev {
  left: -90px;
  background: url(/r/front/img/template1/comm/bt_snb_prev2.jpg) 0 0 no-repeat;
}
.main_section
  .contents
  .recent
  .recent_sl
  .bx-controls-direction
  > a.bx-prev:hover {
  background: url(/r/front/img/template1/comm/bt_snb_prev2_on.jpg) 0 0 no-repeat;
}
.main_section .contents .recent .recent_sl .bx-controls-direction > a.bx-next {
  right: -90px;
  background: url(/r/front/img/template1/comm/bt_snb_next2.jpg) 0 0 no-repeat;
}
.main_section
  .contents
  .recent
  .recent_sl
  .bx-controls-direction
  > a.bx-next:hover {
  background: url(/r/front/img/template1/comm/bt_snb_next2_on.jpg) 0 0 no-repeat;
}
.main_section .contents .recent .tabcontainer > div {
  display: none;
}
.main_section .contents .recent .tabcontainer > div.on {
  display: block;
}

.favorbox {
  position: relative;
  width: 192px;
  height: 40px;
  padding: 0 15px;
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  box-shadow: 0 2px 6px #000;
}
.favorbox > span {
  color: var(--text-input);
}
.favorbox > span.on {
  color: var(--text-primary);
}
.favorbox .tab1 {
  cursor: pointer;
}
.favorbox .tab2 {
  cursor: pointer;
}
.favorbox .statbox {
  position: absolute;
  top: 3px;
  left: 50%;
  margin-left: -30px;
  width: 60px;
  height: 32px;
  background: url(/r/front/img/template1/comm/bg_favor.png) left top no-repeat;
  cursor: pointer;
}
.favorbox.type2 .statbox {
  position: absolute;
  top: 3px;
  left: 50%;
  margin-left: -30px;
  width: 60px;
  height: 32px;
  background: url(/r/front/img/template1/comm/bg_favor2.png) left top no-repeat;
}
.favorbox .statbox #stat_favor_ico {
  position: absolute;
  top: 4px;
  width: 24px;
  height: 24px;
}
.favorbox .statbox #stat_favor_ico.stat1 {
  left: 4px;
  background: url(/r/front/img/template1/comm/ico_favor_heart.png) left top
    no-repeat;
}
.favorbox .statbox #stat_favor_ico.stat2 {
  left: 4px;
  background: url(/r/front/img/template1/comm/ico_favor_star.png) left top
    no-repeat;
}
.favorbox.type2 .statbox #stat_favor_ico.stat1 {
  left: 4px;
  background: url(/r/front/img/template1/comm/ico_favor_check.png) left top
    no-repeat;
}
.favorbox.type2 .statbox #stat_favor_ico.stat2 {
  left: 4px;
  background: url(/r/front/img/comm/ico_favor_jewel.png) left top no-repeat;
}
.favorbox_main {
  position: relative;
  width: 192px;
  padding: 0 15px;
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  box-shadow: 0 2px 6px #000;
}
.favorbox_main > span {
  color: var(--text-input);
}
.favorbox_main > span.on {
  color: var(--text-primary);
}
.favorbox_main .tab1 {
  cursor: pointer;
}
.favorbox_main .tab2 {
  cursor: pointer;
}
.favorbox_main .statbox {
  position: absolute;
  top: 3px;
  left: 50%;
  margin-left: -30px;
  width: 60px;
  height: 32px;
  background: url(/r/front/img/comm/bg_favor.png) left top no-repeat;
}
.favorbox_main.type2 .statbox {
  position: absolute;
  top: 3px;
  left: 50%;
  margin-left: -30px;
  width: 60px;
  height: 32px;
  background: url(/r/front/img/comm/bg_favor2.png) left top no-repeat;
}
.favorbox_main .statbox #stat_favor_ico {
  position: absolute;
  top: 4px;
  width: 24px;
  height: 24px;
}
.favorbox_main .statbox #stat_favor_ico.stat1 {
  left: 4px;
  background: url(/r/front/img/template1/comm/ico_favor_heart.png) left top
    no-repeat;
}
.favorbox_main .statbox #stat_favor_ico.stat2 {
  left: 4px;
  background: url(/r/front/img/template1/comm/ico_favor_star.png) left top
    no-repeat;
}
.favorbox_main.type2 .statbox #stat_favor_ico.stat1 {
  left: 4px;
  background: url(/r/front/img/template1/comm/ico_favor_check.png) left top
    no-repeat;
}
.favorbox_main.type2 .statbox #stat_favor_ico.stat2 {
  left: 4px;
  background: url(/r/front/img/comm/ico_favor_jewel.png) left top no-repeat;
}

/*NOTICE*/
.main_section .greybox {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  background-color: var(--bg-primary);
  box-shadow: 1px 5px 10px #0c0c0c;
}
.main_section .greybox .boxtit {
  padding: var(--btn-padding);
  font-size: 20px;
  font-weight: bold;
  color: var(--text-primary);
  text-align: center;
  border-bottom: 1px solid var(--border-light);
}
.main_section .greybox .boxtit span {
  font-size: 20px;
  font-weight: bold;
  color: var(--text-primary);
  text-align: center;
}
.main_section .greybox .bt_more {
  display: block;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  font-size: 30px;
  text-align: center;
  background: 0 0;
  color: var(--text-primary);
}
.main_section .greybox .bt_more span {
  display: none;
}
.main_section .contents .status {
  display: flex;
  gap: 10px;
  overflow: hidden;
  width: 100%;
  max-width: 1380px;
  margin: 20px auto;
}
.main_section .contents .status > div {
  height: 400px;
}
.main_section .contents .status > div:first-child {
  margin-left: 0;
}
.main_section .contents .status .notice {
  flex: 1;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
}
.main_section .contents .status .notice .list_wrap {
  width: 100%;
  height: 100%;
  padding: 5px 10px 10px;
  box-sizing: border-box;
  background-color: var(--bg-primary);
}
.main_section .contents .status .notice .noti_list {
  width: 100%;
}
.main_section .contents .status .notice .noti_list th {
  text-align: left;
  color: var(--main-color);
  border-bottom: 2px solid var(--border-light);
}
.main_section .contents .status .notice .noti_list td {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.main_section .contents .status .notice .noti_list td span {
  display: inline-block;
  min-width: 65px;
  text-align: center;
  color: var(--main-color);
}
.main_section .contents .status .notice .noti_list .title {
  display: block;
  overflow: hidden;
  width: 250px;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  cursor: pointer;
}
.main_section .contents .status .notice .noti_list .title:hover {
  text-decoration: underline;
}
.main_section .contents .status .notice .noti_list .date {
  text-align: right;
  color: var(--text-grey);
}
.main_section .contents .status .notice .noti_list .title p {
  display: inline-block;
  margin-right: 10px;
  width: auto;
  min-width: 50px;
  text-align: center;
  color: var(--text-primary);
  background-color: var(--red);
  border-radius: var(--btn-radius);
}

/*REALTIME_WITHDRAW*/
.main_section .contents .status .realtime {
  flex: 1;
  padding: 0px 7px 7px 7px;
}
.main_section .contents .status .realtime.swiper-container {
  height: 330px;
}
.main_section .contents .status .realtime .bx-viewport {
  height: 340px !important;
}
.main_section .contents .status .realtime .realtime_list {
  width: 100%;
  height: 388px;
}
.main_section .contents .status .realtime .realtime_list > li {
  position: relative;
  width: 100%;
  margin-left: -7px;
  font-family: var(--sub-font);
  cursor: pointer;
}
.main_section .contents .status .realtime .realtime_list > li:first-child {
  margin-top: 0px;
}
.main_section .contents .status .realtime .realtime_list > li.on {
  height: 87px;
}
.main_section .contents .status .realtime .realtime_list > li .normal {
  height: 36px;
  padding: 0 8px;
  border-radius: var(--btn-radius);
  background-color: #222;
  display: flex;
  align-items: center;
}
.main_section .contents .status .realtime .realtime_list > li.on .normal {
  display: none;
}
.main_section .contents .status .realtime .realtime_list > li .normal .time {
  width: 80px;
  font-size: 12px;
  color: #fff;
  line-height: 34px;
  text-align: center;
  letter-spacing: 1px;
}
.main_section .contents .status .realtime .realtime_list > li .normal .name {
  flex: 1;
  font-size: 12px;
  color: #fff;
  line-height: 34px;
  text-align: left;
}
.main_section .contents .status .realtime .realtime_list > li .normal .money {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  line-height: 34px;
  font-family: var(--sub-font);
}
.main_section .contents .status .realtime .realtime_list > li .hoverbox {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 85px;
  border-top: 1px solid #6a6a6a;
  border-bottom: 1px solid #6a6a6a;
  border-radius: var(--btn-radius);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.2) 20%,
    rgba(0, 0, 0, 0.95) 50%,
    rgba(0, 0, 0, 0.3) 56%
  );
  background-color: #333;
  box-shadow: 1px 5px 10px #0c0c0c;
  z-index: 10;
  display: none;
}
.main_section .contents .status .realtime .realtime_list > li .hoverbox:before {
  content: "";
  position: absolute;
  top: 2px;
  right: 0;
  width: 1px;
  height: 83px;
  background: linear-gradient(
    180deg,
    #6a6a6a 1%,
    var(--main-color) 50%,
    #6a6a6a 99%
  );
}
.main_section .contents .status .realtime .realtime_list > li .hoverbox:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 1px;
  height: 83px;
  background: linear-gradient(
    180deg,
    #6a6a6a 1%,
    var(--main-color) 50%,
    #6a6a6a 99%
  );
}
.main_section .contents .status .realtime .realtime_list > li.on .hoverbox {
  display: flex;
  align-items: flex-start;
}
.main_section .contents .status .realtime .realtime_list > li .hoverbox .time {
  width: 80px;
  margin-top: 36px;
  font-size: 14px;
  color: #fff;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 1px;
}
.main_section .contents .status .realtime .realtime_list > li .hoverbox .name {
  flex: 1;
  margin-top: 14px;
  font-size: 14px;
  color: #ccc;
  line-height: 1.2;
  text-align: left;
}
.main_section .contents .status .realtime .realtime_list > li .hoverbox .money {
  position: absolute;
  top: 38px;
  right: 17px;
  font-size: 26px;
  font-weight: bold;
  line-height: 36px;
  color: var(--main-color);
  background: -webkit-linear-gradient(#ffea74, #ea9f34, #604c1c, #bc9150);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.main_section
  .contents
  .status
  .realtime
  .realtime_list
  > li
  .hoverbox
  .money
  > em {
  font-size: 20px;
  font-weight: bold;
}

@media (max-width: 1440px) {
  .main_section .contents .status {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .main_section .contents .status > *:nth-child(3) {
    grid-column: span 2;
  }
  .main_section .contents .status > .notice {
    width: 99%;
  }
  .main_section .contents .status .notice .noti_list {
    width: 100%;
  }
  .main_section .contents .status .notice .noti_list .title {
    width: 390px;
  }
  .main_section .contents .status .realtime {
    width: 99%;
  }
  .main_section .contents .status .jackpot {
    width: 99%;
    padding: 0 7px 7px;
  }
  .main_section .contents .status .jackpot .jackpot_list {
    width: 100%;
  }
  .main_section .contents .status .jackpot .jackpot_list > li {
    width: 90%;
  }
  .main_section .contents .status .jackpot .jackpot_list > li .normal {
    width: 95%;
    margin: auto;
  }
  .main_section .contents .status .jackpot .jackpot_list > li .hoverbox {
    width: 98%;
  }
  .main_section .contents .status .jackpot .jackpot_list > li .hoverbox .thumb {
    right: -120px;
  }
  .main_section .contents .status .jackpot.swiper-container {
    width: 100%;
    margin: auto;
  }

  #theme_banner_outer .swiper-pagination-fraction {
    bottom: 0;
    right: 10%;
  }
}

/*GAMELIST*/
.game_list > li {
  position: relative;
  overflow: hidden;
  border-radius: var(--btn-radius) !important;
}
.game_list.in_main > li {
  margin-top: 15px;
}
.game_list.in_main > li:first-child {
  margin-top: 10px;
}
.game_list_wrap {
  position: relative;
  z-index: 3;
}
.game_list_wrap .align_box_l {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.game_list_wrap .align_box_l > * {
  margin-right: 10px;
}
.game_list_wrap .align_box_l > *:last-child {
  margin-right: 0;
}
.game_list_wrap .align_box_l .big_banner {
  position: relative;
  flex: 1;
  height: -webkit-fill-available;
  overflow: hidden;
  border-radius: var(--btn-radius);
  box-shadow: 1px 5px 10px #0c0c0c;
}
.game_list_wrap .align_box_l .big_banner img {
  width: 100% !important;
}
.game_list_wrap .align_box_l .game_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex: 1;
  gap: 10px;
}
.game_list_wrap .align_box_l .game_list > li {
  position: relative;
  width: 220px;
  height: 285px;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--btn-radius);
  box-shadow: 1px 5px 10px #0c0c0c;
}
.game_list_wrap .align_box_l .game_list > li img {
  width: 100% !important;
  height: 225px !important;
}
.game_list_wrap .align_box_l .game_list > li .layer_item_set {
  width: 99%;
  height: 224px;
}
.game_list_wrap .align_box_l .layer_item_big_set {
  width: 99.5%;
}
/* With a banner - keep 4-col grid */
.game_list_wrap .align_box_l:has(.big_banner) .game_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex: 1;
  gap: 10px;
}
/* No banner - keep 5-col grid */
.game_list_wrap .align_box_l:not(:has(.big_banner)) .game_list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.game_list_wrap .align_box_l:not(:has(.big_banner)) .game_list > li {
  width: 100%;
}

.game_list_wrap .align_box_r {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.game_list_wrap .align_box_r > * {
  margin-right: 10px;
}
.game_list_wrap .align_box_r > *:last-child {
  margin-right: 0;
}
.game_list_wrap .align_box_r .big_banner {
  position: relative;
  flex: 1;
  height: -webkit-fill-available;
  overflow: hidden;
  border-radius: var(--btn-radius);
  box-shadow: 1px 5px 10px #0c0c0c;
}
.game_list_wrap .align_box_r .big_banner img {
  width: 100% !important;
}
.game_list_wrap .align_box_r .game_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex: 1;
  gap: 10px;
}
.game_list_wrap .align_box_r .game_list > li {
  position: relative;
  width: 220px;
  height: 285px;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--btn-radius);
  box-shadow: 1px 5px 10px #0c0c0c;
}
.game_list_wrap .align_box_r .game_list > li img {
  width: 100% !important;
  height: 225px !important;
}
.game_list_wrap .align_box_r .game_list > li .layer_item_set {
  width: 99%;
  height: 224px;
}
.game_list_wrap .align_box_r .layer_item_big_set {
  width: 99.5%;
}
/* With a banner - keep 4-col grid */
.game_list_wrap .align_box_r:has(.big_banner) .game_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex: 1;
  gap: 10px;
}
/* No banner - keep 5-col grid */
.game_list_wrap .align_box_r:not(:has(.big_banner)) .game_list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin: 20px 0;
}
.game_list_wrap .align_box_r:not(:has(.big_banner)) .game_list > li {
  width: 100%;
}

.game_list_wrap .align_box_justi {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.game_list_wrap .align_box_justi .big_banner {
  position: relative;
  flex: 1;
  height: -webkit-fill-available;
  overflow: hidden;
  border-radius: var(--btn-radius);
  box-shadow: 1px 5px 10px #0c0c0c;
}
.game_list_wrap .align_box_justi .big_banner img {
  width: 100% !important;
}
.game_list_wrap .align_box_justi .big_banner img:before {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--main-bg_logo) 100% no-repeat;
  background-size: 100%;
}
.game_list_wrap .align_box_justi .game_list {
  display: grid;
  width: 250px;
  gap: 10px;
}
.game_list_wrap .align_box_justi .game_list > li {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--btn-radius);
  box-shadow: 1px 5px 10px #0c0c0c;
}
.game_list_wrap .align_box_justi .game_list > li img {
  width: 100% !important;
}
.game_list_wrap .align_box_justi .game_list > li .layer_item_set {
  height: 220px;
}
.game_list_wrap .game_list.outer {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 20px;
}
.game_list_wrap .game_list.outer > li {
  position: relative;
  margin-bottom: 20px;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--btn-radius);
  box-shadow: 1px 5px 10px #0c0c0c;
}
.game_list_wrap .game_list.outer > li.hide_list {
  display: none;
}
.game_list_wrap .game_list.outer > li img {
  width: 100% !important;
  height: 250px !important;
}
.game_list_wrap .game_list.outer > li img:before {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--main-bg_logo) 100% no-repeat;
  background-size: 100%;
}
.game_list_wrap .big_banner .gameInfo {
  position: relative;
  height: 100%;
  background-color: var(--bg-primary);
}
.game_list_wrap .big_banner .gameInfo p.gameTitle {
  width: 370px;
  padding: 35px 0 0 20px;
  font-size: 20px;
  font-weight: bold;
  color: var(--text-primary);
}
.game_list_wrap .big_banner .gameInfo span.gameDetailInfo {
  position: absolute;
  top: 60px;
  right: 10px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background: url(/r/front/img/comm/bt_caution.png) 0 0 repeat;
  background-size: 24px;
  font-size: 0;
  text-indent: -999px;
}
.game_list_wrap .big_banner .gameInfo span.gameFavor {
  position: absolute;
  top: 33px;
  right: 10px;
  width: 24px;
  height: 20px;
  background: url(/r/front/img/template3/comm/wbc__ico_favor.png) left top
    no-repeat;
  font-size: 0;
  text-indent: -999px;
}
.game_list_wrap .gameInfo {
  position: relative;
  height: 60px;
  background-color: var(--bg-primary);
}
.game_list_wrap .gameInfo p {
  width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game_list_wrap .gameInfo p.gameTitle {
  padding: 20px;
  font-weight: bold;
  color: var(--text-primary);
}
.game_list_wrap .gameInfo p.gameTitleEn {
  padding: 0 0 0 20px;
  color: var(--text-grey);
}
.game_list_wrap .gameInfo span.gameFavor {
  position: absolute;
  top: 20px;
  right: 40px;
  width: 24px;
  height: 20px;
  background: url(/r/front/img/template3/comm/wbc__ico_favor.png) left top
    no-repeat;
  font-size: 0;
  text-indent: -999px;
}
.game_list_wrap .gameInfo span.gameFavor.on {
  background: url(/r/front/img/template3/comm/wbc__ico_favor.png) left bottom
    no-repeat;
}
.game_list_wrap .gameInfo span.gameDetailInfo {
  position: absolute;
  top: 18px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: url(/r/front/img/comm/bt_caution.png) 0 0 repeat;
  background-size: 24px;
  font-size: 0;
  text-indent: -999px;
  cursor: pointer;
}
.game_list_wrap .gameInfo span.gameDetailInfo:hover {
  background: url(/r/front/img/comm/bt_caution_hover.png) 0 0 repeat;
  background-size: 24px;
}

/*게임 슬라이더 공통*/
.game_sl {
  position: relative;
  width: 100%;
  margin-top: 5px;
}
.game_sl .sl > li {
  position: relative;
  border: 1px solid var(--border-dark);
}

.layer_item {
  position: absolute;
  top: -10px;
  left: -36px;
  display: none;
  width: 306px;
  height: 306px;
  box-sizing: border-box;
  box-shadow: 10px 10px 25px #000;
  z-index: 10;
}
.layer_item .thumb {
  position: relative;
  width: 100%;
  height: 100%;
}
.layer_item .thumb > img {
  width: 100%;
}
.layer_item .thumb > a {
  display: block;
  height: 100%;
  background-size: 100%;
}
.layer_item .thumb * {
  outline: 0 !important;
}
.layer_item .thumb .iframe_wrap {
  width: 306px;
  height: 306px;
}
.layer_item .thumb .iframe_wrap iframe {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.layer_item .thumb .item_img {
  width: 306px;
  height: 306px;
}
.layer_item .thumb .bt_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 230px;
  z-index: 2;
}
.layer_item .thumb .bt_wrap .bt_play {
  position: absolute;
  top: 50px;
  left: 50%;
  width: 179px;
  height: 50px;
  margin-left: -90px;
  font-size: 0;
  text-indent: -99px;
  cursor: pointer;
}
.layer_item .thumb .bt_wrap .bt_ex {
  position: absolute;
  top: 110px;
  left: 50%;
  width: 122px;
  height: 39px;
  margin-left: -60px;
  font-weight: bold;
  color: var(--text-primary);
  text-align: center;
  border: 1px solid var(--white);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  cursor: pointer;
}
.layer_item .thumb .bt_wrap .bt_ex:hover {
  background: url(/r/front/img/comm/bg_wh_20.png) 0 0 repeat;
}
.layer_item .infobox {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 30px 10px;
  box-sizing: border-box;
  z-index: 3;
  background: url(/r/front/img/comm/info_back.png) repeat-x;
}
.layer_item .infobox .title {
  width: 195px;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layer_item .infobox .title_en {
  margin-top: 0;
  color: var(--text-grey);
}
.layer_item .infobox .bt_ex {
  position: absolute;
  top: 40px;
  right: 9px;
  width: 85px;
  font-weight: bold;
  color: var(--text-primary);
  text-align: center;
  border: 1px solid var(--white);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  cursor: pointer;
}
.layer_item .infobox .bt_ex:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.layer_item .btns {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 100;
}
.layer_item .btns > li > a {
  font-size: 0;
  text-indent: -99px;
}
.layer_item .btns > li .bt_favor {
  display: block;
  width: 25px;
  height: 29px;
  margin-bottom: 15px;
  background: url(/r/front/img/comm/bt_favor.png) 0 0 repeat;
  cursor: pointer;
}
.layer_item .btns > li .bt_favor:hover {
  background: url(/r/front/img/comm/bt_favor_hover.png) 0 0 repeat;
}
.layer_item .btns > li .bt_favor.on {
  background: url(/r/front/img/comm/bt_favor_on.png) 0 0 repeat !important;
}
.layer_item .btns > li .bt_caution {
  display: block;
  width: 29px;
  height: 29px;
  background: url(/r/front/img/comm/bt_caution.png) 0 0 repeat;
  cursor: pointer;
}
.layer_item .btns > li .bt_caution:hover {
  background: url(/r/front/img/comm/bt_caution_hover.png) 0 0 repeat;
}
.layer_item .gameLinkArea {
  position: absolute;
  top: 0;
  left: 0;
  width: 306px;
  height: 306px;
  cursor: pointer;
}

.layer_item_big {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 495px;
  height: 495px;
  padding: 0;
  box-sizing: border-box;
  box-shadow: 10px 10px 25px #000;
  z-index: 10;
}
.layer_item_big .thumb {
  position: relative;
  width: 100%;
  cursor: pointer;
}
.layer_item_big .thumb * {
  outline: 0 !important;
}
.layer_item_big .thumb > img {
  width: 100%;
}
.layer_item_big .thumb > a {
  display: block;
  height: 100%;
  background-size: 100%;
}
.layer_item_big .thumb .iframe_wrap {
  width: 495px;
  height: 495px;
}
.layer_item_big .thumb .iframe_wrap iframe {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.layer_item_big .thumb .item_big_img {
  width: 495px;
  height: 495px;
}
.layer_item_big .thumb .bt_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 414px;
  background: url(/r/front/img/comm/bg_black60.png) 0 0 repeat;
  z-index: 2;
}
.layer_item_big .thumb .bt_wrap .bt_play {
  position: absolute;
  top: 160px;
  left: 50%;
  width: 179px;
  height: 50px;
  margin-left: -90px;
  background: url(/r/front/img/template1/comm/btn_play_red.png) 0 0 repeat;
  font-size: 0;
  text-indent: -99px;
  cursor: pointer;
}
.layer_item_big .thumb .bt_wrap .bt_play:hover {
  background: url(/r/front/img/template1/comm/btn_play_red_on.png) 0 0 repeat;
}
.layer_item_big .thumb .bt_wrap .bt_ex {
  position: absolute;
  top: 220px;
  left: 50%;
  width: 122px;
  height: 39px;
  margin-left: -60px;
  font-weight: bold;
  color: var(--text-primary);
  text-align: center;
  border: 1px solid var(--white);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  cursor: pointer;
}
.layer_item_big .thumb .bt_wrap .bt_ex:hover {
  background: url(/r/front/img/comm/bg_wh_20.png) 0 0 repeat;
}
.layer_item_big .infobox {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 30px 10px;
  background: url(/r/front/img/comm/info_back.png) repeat-x;
  box-sizing: border-box;
  z-index: 3;
}
.layer_item_big .infobox .title {
  width: 430px;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layer_item_big .infobox .title_en {
  margin-top: 5px;
  font-weight: bold;
  color: var(--text-grey);
}
.layer_item_big .infobox .bt_ex {
  position: absolute;
  top: 40px;
  right: 9px;
  width: 85px;
  height: 30px;
  font-weight: bold;
  color: var(--text-primary);
  text-align: center;
  border: 1px solid var(--white);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  cursor: pointer;
}
.layer_item_big .infobox .bt_ex:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.layer_item_big .btns {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 100;
}
.layer_item_big .btns > li > a {
  font-size: 0;
  text-indent: -99px;
}
.layer_item_big .btns > li .bt_favor {
  display: block;
  width: 25px;
  height: 29px;
  margin-bottom: 15px;
  background: url(/r/front/img/comm/bt_favor.png) 0 0 repeat;
  cursor: pointer;
}
.layer_item_big .btns > li .bt_favor:hover {
  background: url(/r/front/img/comm/bt_favor_hover.png) 0 0 repeat;
}
.layer_item_big .btns > li .bt_favor.on {
  background: url(/r/front/img/comm/bt_favor_on.png) 0 0 repeat !important;
}
.layer_item_big .btns > li .bt_caution {
  display: block;
  width: 29px;
  height: 29px;
  background: url(/r/front/img/comm/bt_caution.png) 0 0 repeat;
  cursor: pointer;
}
.layer_item_big .btns > li .bt_caution:hover {
  background: url(/r/front/img/comm/bt_caution_hover.png) 0 0 repeat;
}
.layer_item_big .gameLinkArea {
  position: absolute;
  top: 0;
  left: 0;
  width: 495px;
  height: 495px;
  cursor: pointer;
}

.txt_type_layer {
  width: 400px;
  left: 50%;
}
.txt_type_layer .bt_close {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: url(/r/front/img/main/bt_close.png) 0 0 no-repeat;
  font-size: 0;
  text-indent: -99px;
}
.txt_type_layer .inbox {
  position: relative;
  width: 400px;
  margin-top: 50px;
  padding-bottom: 25px;
  text-align: center;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-dark);
  border-radius: var(--btn-radius);
  box-shadow: 0 5px 10px #333;
}
.txt_type_layer .inbox .icochk {
  padding-top: 25px;
  text-align: center;
  left: 50%;
}
.txt_type_layer .inbox .icochk img {
  max-width: 32px;
}
.txt_type_layer .inbox .txt_big {
  padding-top: 15px;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
}
.txt_type_layer .inbox .txt_big > span {
  color: var(--main-color);
}
.txt_type_layer .inbox .txt {
  margin-top: 5px;
  color: var(--text-primary);
}
.txt_type_layer .inbox .txt pre {
  margin-top: 15px;
  color: var(--text-primary);
}
.txt_type_layer .inbox .txt span {
  display: block;
  font-weight: bold;
  color: var(--text-primary);
}
.txt_type_layer .layerbot_btn {
  margin-top: 10px;
  text-align: center;
}
.txt_type_layer .layerbot_btn .bt_yellow {
  display: inline-block;
  width: 128px;
  font-weight: bold;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  cursor: pointer;
}
.txt_type_layer .layerbot_btn .bt_yellow:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}
.txt_type_layer .layerbot_btn .bt_grey {
  display: inline-block;
  width: 128px;
  padding: 10px 0;
  font-weight: bold;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  cursor: pointer;
}
.txt_type_layer .layerbot_btn .bt_grey:hover {
  background-color: var(--bg-dark-grey);
  border: 1px solid var(--border-light);
}
.txt_type_layer .layerbot_btn .bt_grey:focus {
  outline: 0;
}
.txt_type_layer .layerbot_btn .bt_grey_bd {
  display: inline-block;
  width: 128px;
  font-weight: bold;
  color: var(--text-grey);
  background-color: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  cursor: pointer;
}
.txt_type_layer .layerbot_btn .bt_grey_bd:hover {
  color: var(--text-primary);
  border: 1px solid var(--border-light);
}

.game_list_wrap.six_games_row .game_list.outer {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  min-width: 1100px;
}
.game_list_wrap.six_games_row .game_list.outer > li > img {
  width: 100% !important;
  height: 200px !important;
}
.game_list_wrap.six_games_row .layer_item {
  width: 260px !important;
  height: 260px !important;
}
.game_list_wrap.six_games_row .layer_item .gameLinkArea {
  width: 260px !important;
  height: 260px !important;
}
.game_list_wrap.six_games_row .layer_item .thumb > a > img {
  width: 260px !important;
  height: 260px !important;
}
.game_list_wrap.six_games_row .layer_item .thumb > a {
  background-size: 100% !important;
}
.game_list_wrap.six_games_row .layer_item .infobox .title {
  width: 155px !important;
}
.game_list_wrap.six_games_row .layer_item .infobox .title_en {
  width: 155px !important;
}

.game_list_wrap.six_games_row .layer_item_set {
  width: 210px !important;
  height: 200px !important;
}
.game_list_wrap.six_games_row .layer_item_set .gameLinkArea {
  width: 210px !important;
  height: 200px !important;
}
.game_list_wrap.six_games_row .layer_item_set .thumb > a > img {
  width: 210px !important;
  height: 200px !important;
}
.game_list_wrap.six_games_row .layer_item_set .thumb > a {
  background-size: 100% !important;
}
.game_list_wrap.six_games_row .layer_item_set .infobox .title {
  width: 155px !important;
}
.game_list_wrap.six_games_row .layer_item_set .infobox .title_en {
  width: 155px !important;
}

@media (max-width: 1440px) {
  .game_list_wrap .game_list.outer > li img,
  .game_list_wrap.six_games_row .game_list.outer > li > img {
    height: auto !important;
  }
  .game_list_wrap.six_games_row .layer_item_set,
  .game_list_wrap.six_games_row .layer_item_set .gameLinkArea,
  .game_list_wrap.six_games_row .layer_item_set .thumb > a > img {
    width: 99% !important;
    height: 170px !important;
  }

  .layer_item_set {
    height: 79% !important;
  }
  .layer_item_big_set {
    width: 99% !important;
    height: 79% !important;
  }

  .game_list_wrap .align_box_l .big_banner {
    min-width: 300px !important;
  }
  .game_list_wrap .align_box_l .game_list > li {
    width: 200px !important;
  }
  .game_list_wrap .align_box_l:not(:has(.big_banner)) .game_list > li {
    width: 100% !important;
  }
  .game_list_wrap .align_box_r .big_banner {
    min-width: 300px !important;
  }
  .game_list_wrap .align_box_r .game_list > li {
    width: 200px !important;
  }
  .game_list_wrap .align_box_r:not(:has(.big_banner)) .game_list > li {
    width: 100% !important;
  }
}

/*GAME_DETAIL*/
/*즐겨찾기 퀵메뉴*/

.sub_contents .gameArea {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 820px;
}
.sub_contents .gameArea .caution_img {
  margin-top: 170px;
  text-align: center;
}
.sub_contents .gameArea .caution_img img {
  width: 100px;
}
.sub_contents .gameArea .check_service {
  margin-top: 30px;
  font-size: 45px;
  font-weight: bold;
  color: var(--orange);
  text-align: center;
}
.sub_contents.game_detail iframe {
  width: 100%;
  height: 100.5vh;
  border: 0;
  background: url(/r/front/img/game/sports_bg.jpg) 50% 0 no-repeat;
}
.sub_contents .game_wrap .game_frame .iframe_wrap #gameArea {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 680px;
}
.sub_contents .game_wrap .game_frame .iframe_wrap .caution_img {
  margin-top: 170px;
  text-align: center;
}
.sub_contents .game_wrap .game_frame .iframe_wrap .caution_img img {
  width: 100px;
}
.sub_contents .game_wrap .game_frame .iframe_wrap .check_service {
  margin-top: 30px;
  font-size: 45px;
  font-weight: bold;
  color: var(--orange);
  text-align: center;
}
.sub_contents .game_wrap .game_frame .iframe_wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: url(/r/front/img/game/slot_bg.jpg) 50% 0 no-repeat;
}

.quick_game {
  position: absolute;
  top: 0;
  width: 240px;
  background-color: var(--bg-dark-grey);
}
.quick_game.left_quick {
  left: -240px;
}
.quick_game.right_quick {
  right: -240px;
}
.quick_game .quick_top > a {
  position: absolute;
  top: -7px;
  right: -11px;
  width: 58px;
  height: 58px;
  background: url(/r/front/img/template1/comm/sub_quick_close.png) left top
    no-repeat;
  font-size: 0;
  text-indent: -999px;
}
.quick_game .quick_cont {
  width: 240px;
  margin-top: 10px;
  padding: 20px 0 40px;
  border: none;
}
.quick_game .quick_cont ul {
  display: none;
  width: 200px;
  margin: 0 auto;
}
.quick_game .quick_cont ul.on {
  display: block;
}
.quick_game .quick_cont ul li {
  width: 200px;
  margin-top: 20px;
  border: 1px solid var(--border-light);
}
.quick_game .quick_cont ul li:first-child {
  margin-top: 0;
}
.quick_game .quick_cont ul li img {
  width: 100%;
}

/*즐겨찾기 박스*/
.sub_contents .favorbox {
  position: relative;
  width: 200px;
  margin-top: 20px;
  padding: 0 10px;
  border: none;
  box-sizing: border-box;
}
.sub_contents .favorbox > span {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-grey);
}
.sub_contents .favorbox > span.on {
  color: var(--text-primary);
  border-bottom: 2px solid var(--white);
}
.sub_contents .favorbox .tab1 {
  cursor: pointer;
}
.sub_contents .favorbox .tab2 {
  cursor: pointer;
  margin-left: 20px;
}
.sub_contents .favorbox .statbox {
  display: none;
  position: absolute;
  top: 3px;
  left: 50%;
  margin-left: -30px;
  width: 60px;
  height: 32px;
  cursor: pointer;
  background: url(/r/front/img/template1/comm/bg_favor.png) left top no-repeat;
}
.sub_contents .favorbox.type2 .statbox {
  position: absolute;
  top: 3px;
  left: 50%;
  margin-left: -30px;
  width: 60px;
  height: 32px;
  background: url(/r/front/img/template1/comm/bg_favor2.png) left top no-repeat;
}
.sub_contents .favorbox .statbox #stat_favor_ico {
  position: absolute;
  top: 4px;
  width: 24px;
  height: 24px;
}
.sub_contents .favorbox .statbox #stat_favor_ico.stat1 {
  left: 4px;
  background: url(/r/front/img/template1/comm/ico_favor_heart.png) left top
    no-repeat;
}
.sub_contents .favorbox .statbox #stat_favor_ico.stat2 {
  left: 4px;
  background: url(/r/front/img/template1/comm/ico_favor_star.png) left top
    no-repeat;
}
.sub_contents .favorbox.type2 .statbox #stat_favor_ico.stat1 {
  left: 4px;
  background: url(/r/front/img/template1/comm/ico_favor_check.png) left top
    no-repeat;
}
.sub_contents .favorbox.type2 .statbox #stat_favor_ico.stat2 {
  left: 4px;
  background: url(/r/front/img/comm/ico_favor_jewel.png) left top no-repeat;
}

.favorbox_main {
  position: relative;
  width: 192px;
  height: 40px;
  padding: 0 15px;
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  box-shadow: 0 2px 6px #000;
}
.favorbox_main .statbox #stat_favor_ico {
  position: absolute;
  top: 4px;
  width: 24px;
  height: 24px;
}
.favorbox_main .statbox #stat_favor_ico.stat1 {
  left: 4px;
  background: url(/r/front/img/template1/comm/ico_favor_heart.png) left top
    no-repeat;
}
.favorbox_main .statbox #stat_favor_ico.stat2 {
  left: 4px;
  background: url(/r/front/img/template1/comm/ico_favor_star.png) left top
    no-repeat;
}
.favorbox_main.type2 .statbox #stat_favor_ico.stat1 {
  left: 4px;
  background: url(/r/front/img/template1/comm/ico_favor_check.png) left top
    no-repeat;
}
.favorbox_main.type2 .statbox #stat_favor_ico.stat2 {
  left: 4px;
  background: url(/r/front/img/comm/ico_favor_jewel.png) left top no-repeat;
}

/*game*/
.sub_section .game_wrap {
  position: relative;
  width: 1280px !important;
  margin: 40px auto 0;
  padding: 50px 0;
  border: 6px solid var(--border-light);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  background-color: var(--bg-secondary);
}
.sub_section .game_wrap .game_tit {
  position: absolute;
  top: -28px;
  left: 0;
  width: 100%;
  z-index: 1;
  text-align: left;
}
.sub_section .game_wrap .game_tit > p {
  position: relative;
  min-width: 270px;
  padding: 9px 15px 9px 115px;
  border: 0;
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  background-color: var(--main-color);
  font-size: 23px;
  color: var(--text-primary);
  text-align: left;
}
.sub_section .game_wrap .game_tit .btnSlotGame {
  position: absolute;
  top: 0;
  width: 52px;
  height: 52px;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
  border-radius: var(--btn-radius);
  cursor: pointer;
}
.sub_section .game_wrap .game_tit .btnSlotGame.blue {
  width: 34px;
  height: 44px;
  margin-left: 0 !important;
  padding: 5px var(--btn-padding);
  background-color: var(--bg-dark-grey);
  text-align: center;
  font-size: 15px;
}
.sub_section .game_wrap .game_tit .btnSlotGame.green {
  margin-left: 50px !important;
  text-indent: -999px;
  background: var(--main-color) url(/r/front/img/comm/full.png) no-repeat 50%
    50%;
}

.sub_section .game_wrap .game_tit_full {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  display: none;
  text-align: center;
}
.sub_section .game_wrap .game_tit_full > p {
  position: relative;
  min-width: 270px;
  padding: 0 60px;
  border: 6px solid var(--border-light);
  border-radius: 20px;
  box-sizing: border-box;
  background-color: var(--bg-dark-grey);
  font-size: 23px;
  color: var(--text-grey);
  text-align: center;
}
.sub_section .game_wrap .game_tit_full .btnSlotGame {
  position: absolute;
  top: 0;
  width: 150px;
  height: 52px;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-secondary);
  border-radius: var(--btn-radius);
  cursor: pointer;
}
.sub_section .game_wrap .game_tit_full .btnSlotGame.blue {
  right: 50%;
  margin-right: 25px;
  background: #0084ff url(/r/front/img/comm/back.png) no-repeat 10% 50%;
}
.sub_section .game_wrap .game_tit_full .btnSlotGame.blue:hover {
  margin-right: 95px;
}
.sub_section .game_wrap .game_tit_full .btnSlotGame.green {
  left: 50%;
  margin-left: 25px;
  background: #38aa00 url(/r/front/img/comm/full2.png) no-repeat 90% 50%;
}
.sub_section .game_wrap .game_tit_full .btnSlotGame.green:hover {
  margin-left: 95px;
}

.sub_section .game_wrap .game_frame {
  width: 1120px;
  margin: 0 auto;
}
.sub_section .game_wrap .game_frame iframe {
  width: 100%;
}

.sub_section .game_wrap .game_frame.mini {
  position: relative;
  width: 850px;
  margin: 0 auto;
  padding: 0 0 0 200px;
}
.sub_section .game_wrap .game_frame.mini .minigame_tab {
  position: absolute;
  top: 0;
  left: 0;
}
.sub_section .game_wrap .game_frame.mini .minigame_tab > ul > li {
  width: 180px;
  margin-top: 10px;
  cursor: pointer;
}
.sub_section .game_wrap .game_frame.mini .minigame_tab > ul > li:first-child {
  margin-top: 0;
}
.sub_section .game_wrap .game_frame.mini .minigame_tab > ul > li .title {
  width: 172px;
  border: 4px solid var(--border-light);
  border-radius: 15px 15px 0 0;
  background-color: var(--bg-dark-grey);
  font-size: 16px;
  font-weight: bold;
  color: var(--text-grey);
  text-align: center;
}
.sub_section .game_wrap .game_frame.mini .minigame_tab > ul > li .time {
  width: 172px;
  height: 45px;
  border: 4px solid var(--border-light);
  border-width: 0 4px 4px 4px;
  border-radius: 0 0 15px 15px;
  background: var(--bg-primary) url(/r/front/img/comm/ico_clock.png) 12px 7px
    no-repeat;
  font-size: 25px;
  color: var(--text-primary);
  text-align: center;
}
.sub_section .game_wrap .game_frame.mini .minigame_tab > ul > li.on .title {
  color: var(--text-primary);
}
.sub_section .game_wrap .game_frame.mini .minigame_tab > ul > li.on .time {
  background: var(--bg-primary) url(/r/front/img/comm/ico_clock_on.png) 12px 7px
    no-repeat;
}
.sub_section .game_wrap .game_frame.mini .minigame_tab > ul > li:hover .title {
  color: var(--text-primary);
}
.sub_section .game_wrap .game_frame.mini .minigame_tab > ul > li:hover .time {
  background: var(--bg-primary) url(/r/front/img/comm/ico_clock_on.png) 12px 7px
    no-repeat;
}

.sub_section .game_wrap .game_frame.mini .minigame_tab > ul > li.m1.on .title {
  background: var(--bg-primary) url(/r/front/img/comm/bg_green.jpg) 0 0 repeat;
}
.sub_section .game_wrap .game_frame.mini .minigame_tab > ul > li.m2.on .title {
  background: var(--bg-primary) url(/r/front/img/comm/bg_green2.jpg) 0 0 repeat;
}
.sub_section .game_wrap .game_frame.mini .minigame_tab > ul > li.m3.on .title {
  background: var(--bg-primary) url(/r/front/img/comm/bg_green3.jpg) 0 0 repeat;
}
.sub_section .game_wrap .game_frame.mini .minigame_tab > ul > li.m4.on .title {
  background: var(--bg-primary) url(/r/front/img/comm/bg_green4.jpg) 0 0 repeat;
}
.sub_section .game_wrap .game_frame.mini .minigame_tab > ul > li.m5.on .title {
  background: var(--bg-primary) url(/r/front/img/comm/bg_green5.jpg) 0 0 repeat;
}

.sub_section
  .game_wrap
  .game_frame.mini
  .minigame_tab
  > ul
  > li.m1:hover
  .title {
  background: var(--bg-primary) url(/r/front/img/comm/bg_green.jpg) 0 0 repeat;
}
.sub_section
  .game_wrap
  .game_frame.mini
  .minigame_tab
  > ul
  > li.m2:hover
  .title {
  background: var(--bg-primary) url(/r/front/img/comm/bg_green2.jpg) 0 0 repeat;
}
.sub_section
  .game_wrap
  .game_frame.mini
  .minigame_tab
  > ul
  > li.m3:hover
  .title {
  background: var(--bg-primary) url(/r/front/img/comm/bg_green3.jpg) 0 0 repeat;
}
.sub_section
  .game_wrap
  .game_frame.mini
  .minigame_tab
  > ul
  > li.m4:hover
  .title {
  background: var(--bg-primary) url(/r/front/img/comm/bg_green4.jpg) 0 0 repeat;
}
.sub_section
  .game_wrap
  .game_frame.mini
  .minigame_tab
  > ul
  > li.m5:hover
  .title {
  background: var(--bg-primary) url(/r/front/img/comm/bg_green5.jpg) 0 0 repeat;
}

/* one line notice */
.notice_area {
  width: 100%;
  height: 20px;
  margin: 0 auto;
  padding: var(--btn-padding);
  clear: both;
  background-color: var(--bg-primary);
}
.notice_area .inner {
  position: relative;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}
.notice_area .inner > .tit {
  width: 10%;
  padding-left: 10px;
}
.notice_area .inner > .tit img {
  display: none;
}
.notice_area .inner > .tit span {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 10px;
  font-weight: bold;
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  text-align: center;
  white-space: nowrap;
}
.notice_area .inner > .txt_roll {
  width: 1100px;
}
.notice_area .inner > .txt_roll .txt {
  width: 100%;
}
.notice_area .bx-wrapper {
  width: 1100px;
}
.notice_area .bx-wrapper .txt {
  overflow: hidden;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.marquee {
  width: 99.5%;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  animation: marquee 20s linear infinite;
}
.marquee > div {
  width: fit-content;
}
.marquee p {
  color: var(--text-primary);
}
@keyframes marquee {
  0% {
    text-indent: 100%;
  }
  100% {
    text-indent: -100%;
  }
}

.thumb_list {
  width: 100%;
}
.thumb_list > li {
  position: relative;
  margin: 10px 0 0 10px;
  cursor: pointer;
  border: 1px solid var(--border-dark);
}
.thumb_list > li > .layer_item {
  position: absolute;
  top: -31px;
  left: -31px;
  display: none;
  width: 306px;
  height: 306px;
  padding: var(--btn-padding);
  background-color: var(--bg-secondary);
  border: none;
  box-sizing: border-box;
  box-shadow: 10px 10px 25px #000;
  z-index: 10;
}
.thumb_list > li > .layer_item .thumb {
  position: relative;
  width: 100%;
}
.thumb_list > li > .layer_item .thumb > img {
  width: 100%;
}
.thumb_list > li > .layer_item .thumb .bt_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 230px;
  background: url(/r/front/img/template1/comm/bg_black60.png) 0 0 repeat;
  z-index: 2;
  cursor: pointer;
}
.thumb_list > li > .layer_item .thumb .bt_wrap .bt_play {
  position: absolute;
  top: 50px;
  left: 50%;
  width: 179px;
  height: 50px;
  margin-left: -90px;
  background: url(/r/front/img/template1/comm/btn_play_red.png) 0 0 repeat;
  font-size: 0;
  text-indent: -99px;
  cursor: pointer;
}
.thumb_list > li > .layer_item .thumb .bt_wrap .bt_play:hover {
  background: url(/r/front/img/template1/comm/btn_play_red_on.png) 0 0 repeat;
}
.thumb_list > li > .layer_item .infobox {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 10px;
  background-color: var(--bg-secondary);
  box-sizing: border-box;
  z-index: 3;
}
.thumb_list > li > .layer_item .infobox .title {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
}
.thumb_list > li > .layer_item .infobox .title_en {
  margin-top: 5px;
  font-weight: bold;
  color: var(--text-grey);
}
.thumb_list > li > .layer_item .infobox .btns {
  position: absolute;
  top: 30px;
  right: 10px;
}
.thumb_list > li > .layer_item .infobox .btns > li > a {
  font-size: 0;
  text-indent: -99px;
}
.thumb_list > li > .layer_item .infobox .btns > li .bt_favor {
  display: block;
  width: 25px;
  height: 29px;
  background: url(/r/front/img/template1/comm/bt_favor.png) 0 0 repeat;
  cursor: pointer;
}
.thumb_list > li > .layer_item .infobox .btns > li .bt_favor:hover {
  background: url(/r/front/img/template1/comm/bt_favor_hover.png) 0 0 repeat;
}
.thumb_list > li > .layer_item .infobox .btns > li .bt_favor.on {
  background: url(/r/front/img/template1/comm/bt_favor_on.png) 0 0 repeat !important;
}
.thumb_list > li > .layer_item .infobox .btns > li .bt_caution {
  display: block;
  width: 29px;
  height: 29px;
  margin-left: 10px;
  background: url(/r/front/img/comm/bt_caution.png) 0 0 repeat;
  cursor: pointer;
}
.thumb_list > li > .layer_item .infobox .btns > li .bt_caution:hover {
  background: url(/r/front/img/comm/bt_caution_hover.png) 0 0 repeat;
}

.sports_sl {
  position: relative;
  width: 100%;
}
.sports_sl .sl li {
  border: 1px solid var(--border-light);
}
.sports_sl .big_thumb {
  position: absolute;
  width: 306px;
  height: 306px;
  border: 8px solid var(--border-dark);
  background-color: var(--bg-dark-grey);
  box-shadow: 10px 10px 25px #000;
  z-index: 60;
}
.sports_sl .big_thumb > img.thumb {
  width: 100%;
}
.sports_sl .big_thumb > a.play {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 97px;
  height: 97px;
  margin: -50px 0 0 -50px;
  padding-top: 30px;
  text-align: center;
  box-sizing: border-box;
}
.sports_sl .big_thumb > a.play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85px;
  height: 83px;
  margin: -40px 0 0 -40px;
  background: url(/r/front/img/template1/comm/lotate1.png) 0 0 no-repeat;
  animation: target_image 1s linear infinite;
  transform-origin: 50% 50%;
}
.sports_sl .big_thumb > a.play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 97px;
  height: 97px;
  margin: -50px 0 0 -50px;
  background: url(/r/front/img/template1/comm/lotate2.png) 0 0 no-repeat;
  animation: target_image2 1s linear infinite;
  transform-origin: 50% 50%;
}
.sports_sl .big_thumb > a.play span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35px;
  height: 40px;
  margin: -20px 0 0 -20px;
  background: url(/r/front/img/comm/bt_play_wh.png) 0 0 no-repeat;
}
.sports_sl .big_thumb > a.play:hover span {
  background: url(/r/front/img/template1/comm/bt_play_orange.png) 0 0 no-repeat;
}
.sports_sl .big_thumb > p {
  position: absolute;
  bottom: 11px;
  left: 0;
  width: 100%;
  font-size: 16px;
  color: var(--text-primary);
  text-align: center;
  display: block;
}
.sports_sl .big_thumb > a.info {
  display: block;
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 29px;
  height: 29px;
  font-size: 0;
  text-indent: -999px;
  background: url(/r/front/img/comm/bt_caution.png) 0 0 no-repeat;
  text-align: center;
  cursor: pointer;
}
.sports_sl .big_thumb > a.info:hover {
  background: url(/r/front/img/comm/bt_caution_hover.png) 0 0 no-repeat;
}
.sports_sl .bx-controls-direction > a {
  display: block;
  position: absolute;
  top: 50%;
  width: 54px;
  height: 54px;
  margin-top: -25px;
  font-size: 0;
  cursor: pointer;
}
.sports_sl .bx-controls-direction > a.bx-prev {
  left: -90px;
  background: url(/r/front/img/template1/comm/bt_snb_prev.png) 0 0 no-repeat;
}
.sports_sl .bx-controls-direction > a.bx-prev:hover {
  background: url(/r/front/img/template1/comm/bt_snb_prev_on.png) 0 0 no-repeat;
}
.sports_sl .bx-controls-direction > a.bx-next {
  right: -80px;
  background: url(/r/front/img/template1/comm/bt_snb_next.png) 0 0 no-repeat;
}
.sports_sl .bx-controls-direction > a.bx-next:hover {
  background: url(/r/front/img/template1/comm/bt_snb_next_on.png) 0 0 no-repeat;
}
@keyframes target_image {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-180deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes target_image2 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.layer_popup_bg_alert {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(/r/front/img/comm/bg_opacity.png) repeat;
  z-index: 1003;
}
.layer_popup_bg_none {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1001;
}
.layer_popup_bg {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(/r/front/img/comm/bg_opacity.png) repeat;
  z-index: 1001;
}

/* main page ads popup */
.simpleMenu_layer_popup_bg {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(/r/front/img/comm/bg_opacity.png) repeat;
  z-index: 999;
}
.wrap_layer_popup_box {
  display: none;
  position: absolute;
  left: 50%;
  margin-left: -50%;
  z-index: 10001;
}
.wrap_layer_popup_box .wrap_layer_popup_web.layer_main {
  width: 500px;
  border: 2px solid var(--white);
}
.wrap_layer_popup_box .wrap_layer_popup_web .bot_btn {
  display: flex;
  overflow: hidden;
}
.wrap_layer_popup_box .wrap_layer_popup_web .bot_btn > a {
  display: block;
  width: 50%;
  padding: var(--btn-padding);
  font-size: 16px;
  color: var(--text-grey);
  text-align: center;
  background-color: var(--bg-primary);
  cursor: pointer;
}
.wrap_layer_popup_box .wrap_layer_popup_web .bot_btn > a:hover {
  color: var(--text-primary);
}
.wrap_layer_popup_box .wrap_layer_popup_web .wrap_layer_popup_web_all_close {
  position: absolute;
  top: -45px;
  right: 0;
  width: 144px;
  padding: var(--btn-padding);
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
  text-align: center;
  border: 2px solid var(--white);
  border-radius: 0;
  background-color: var(--bg-dark-grey);
  cursor: pointer;
}
.wrap_layer_popup {
  display: none;
  position: fixed !important;
  top: 350px !important;
  left: 50%;
  margin-left: -50%;
  border-radius: var(--btn-radius);
  z-index: 112;
}
.wrap_layer_popup .banner_thumb {
  position: relative;
}
.wrap_layer_popup .banner_thumb figure {
  margin: 0;
}
.wrap_layer_popup .bot_btn {
  display: flex;
  overflow: hidden;
}
.wrap_layer_popup .bot_btn > a {
  display: block;
  width: 50%;
  padding: var(--btn-padding);
  font-size: 16px;
  color: var(--text-grey);
  text-align: center;
  background-color: var(--bg-primary);
  cursor: pointer;
}
.wrap_layer_popup .bot_btn > a:hover {
  color: var(--text-primary);
}
.wrap_layer_popup.layer_main {
  width: 500px;
  border: 2px solid var(--white);
  top: 200px !important;
  background-color: var(--bg-secondary);
}
.wrap_layer_popup.layer_main .banner_thumb a.ban_in_link {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
  text-indent: -999px;
}

.wrap_layer_popup_box_evo_powerball {
  display: none;
  position: absolute;
  left: 50%;
  margin-left: -50%;
  z-index: 10001;
}
.wrap_layer_popup_box_evo_powerball .wrap_layer_popup_web.layer_main {
  width: 500px;
  border: 2px solid var(--white);
}
.wrap_layer_popup_box_evo_powerball .wrap_layer_popup_web .bot_btn {
  overflow: hidden;
}
.wrap_layer_popup_box_evo_powerball .wrap_layer_popup_web .bot_btn > a {
  display: block;
  width: 50%;
  font-size: 16px;
  color: var(--text-grey);
  text-align: center;
  background-color: var(--bg-primary);
  cursor: pointer;
}
.wrap_layer_popup_box_evo_powerball .wrap_layer_popup_web .bot_btn > a:hover {
  color: var(--text-primary);
}
.wrap_layer_popup_box_evo_powerball
  .wrap_layer_popup_web
  .wrap_layer_popup_web_all_close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 144px;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
  text-align: center;
  border: 2px solid var(--white);
  border-radius: 0;
  background-color: var(--bg-dark-grey);
  cursor: pointer;
}
.banner_thumb {
  min-height: 420px;
  background-color: #222;
}

.bt_orange {
  padding: 10px 30px;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-weight: bold;
  cursor: pointer;
}
.bt_orange:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}
.bt_orange:focus {
  outline: none;
}

.event_popup_bg {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(/r/front/img/comm/bg_opacity.png) repeat;
  z-index: 110;
}
.event_type_layer {
  display: none;
  position: absolute;
  left: 50%;
  margin-left: -50%;
  min-width: 500px;
  z-index: 111;
}
.event_type_layer .bt_close {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  font-size: 0;
  text-indent: -99px;
  background: url(/r/front/img/main/bt_close.png) 0 0 no-repeat;
}
.event_type_layer .inbox {
  position: relative;
  margin-top: 50px;
  padding: 40px;
  min-width: 420px;
  text-align: center;
  border: 2px solid var(--white);
  background-color: var(--bg-dark-grey);
}
.event_type_layer .inbox .icochk {
  padding-top: 25px;
  text-align: center;
}
.event_type_layer .inbox .txt_big {
  padding-top: 40px;
  font-size: 30px;
  font-weight: bold;
  color: var(--text-primary);
  background: url(/r/front/img/template1/comm/event_tit.png) 50% 0 no-repeat;
}
.event_type_layer .inbox .txt_big > span {
  color: var(--main-color);
}
.event_type_layer .inbox .txt {
  margin-top: 5px;
  color: var(--text-grey);
}
.event_type_layer .inbox .txt span {
  display: block;
  font-weight: bold;
  color: var(--text-input);
}
.event_type_layer .layerbot_btn {
  margin-top: 10px;
  text-align: center;
}
.event_type_layer .layerbot_btn .bt_yellow {
  padding: 10px 30px;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-weight: bold;
  cursor: pointer;
}
.event_type_layer .layerbot_btn .bt_yellow:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}
.event_type_layer .layerbot_btn .bt_grey {
  padding: 10px 30px;
  border: 1px solid var(--border-dark);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  background-color: var(--white);
  color: var(--text-grey);
  font-weight: bold;
  cursor: pointer;
}
.event_type_layer .layerbot_btn .bt_grey:hover {
  background-color: var(--bg-grey);
  border: 1px solid var(--border-dark);
}
.event_type_layer .layerbot_btn .bt_grey_bd {
  padding: 10px 30px;
  border: 2px solid var(--border-dark);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  background-color: var(--white);
  color: var(--text-grey);
  font-weight: bold;
  cursor: pointer;
}
.event_type_layer .layerbot_btn .bt_grey_bd:hover {
  border: 2px solid var(--border-dark);
  color: var(--text-input);
}
.event_type_layer .selTeam {
  width: 42%;
  text-align: center;
}
.event_type_layer .selTeam img {
  width: 114px;
  height: 114px;
}
.event_type_layer .selTeam input[type="number"] {
  width: 155px;
  padding-left: 20px;
  font-size: 20px;
  color: var(--text-primary);
  background-color: var(--bg-dark-grey);
  border: 2px solid var(--white);
}

@media all and (min-width: 0px) and (max-width: 1610px) {
  .hideCon {
    display: none;
  }
}

.event_book {
  position: fixed;
  top: 187px;
  left: -255px;
  z-index: 100;
}
.event_book .evt_con {
  width: 255px;
  padding-bottom: 20px;
  border: 1px solid var(--white);
  border-width: 1px 1px 1px 0;
  border-radius: 0 0 20px 0;
  background: url(/r/front/img/comm/bg_grey50.png) 0 0 repeat;
  box-sizing: border-box;
}
.event_book .evt_con .evt_top {
  position: relative;
  width: 216px;
  margin: 0 auto;
  padding: 40px 0 30px;
}
.event_book .evt_con .evt_top .bt_more {
  position: absolute;
  top: 35px;
  right: 0;
  display: block;
  width: 40px;
  height: 20px;
  text-align: center;
  z-index: 91;
}
.event_book .evt_con .evt_top .bg_gift {
  display: none;
  position: absolute;
  top: -77px;
  right: -35px;
  width: 244px;
  height: 140px;
  background: url(/r/front/img/comm/img_gift.png) 0 0 repeat;
  z-index: 90;
}
.event_book .evt_con .evt_list {
  width: 216px;
  margin: 0 auto;
}
.event_book .evt_con .evt_list > li {
  position: relative;
  width: 100%;
  margin-top: 5px;
  padding-bottom: 10px;
  background-color: var(--bg-primary);
  box-sizing: border-box;
}
.event_book .evt_con .evt_list > li:first-child {
  margin-top: 0;
}
.event_book .evt_con .evt_list > li .bt_join {
  display: block;
  margin-top: 10px;
  padding: 0 0 0 10px;
  color: var(--main-color);
}
.event_book .evt_con .evt_list > li .bt_go {
  position: absolute;
  bottom: 15px;
  right: 15px;
  display: block;
  width: 45px;
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  color: var(--text-input);
  text-align: center;
}
.event_book .evt_con .evt_list > li:hover .bt_go {
  border: 1px solid var(--border-dark);
  color: var(--text-grey);
}
.event_book .evt_con .evt_list > li.type_blue {
  border: 1px solid #11688e;
  cursor: pointer;
}
.event_book .evt_con .evt_list > li.type_blue:hover {
  border: 1px solid #0993ce;
}
.event_book .evt_con .evt_list > li.type_blue .top {
  width: 100%;
  height: 30px;
  background: var(--bg-primary) url(/r/front/img/comm/bg_evt_blue.png) 0 0
    no-repeat;
}
.event_book .evt_con .evt_list > li.type_blue:hover .top {
  background: var(--bg-primary) url(/r/front/img/comm/bg_evt_blue2.png) 0 0
    no-repeat;
}
.event_book .evt_con .evt_list > li.type_blue .top > p {
  padding: 10px 0 0 10px;
  color: var(--text-primary);
}
.event_book .evt_con .evt_list > li.type_blue .evt_txt {
  padding: 10px 0 0 10px;
  color: var(--text-grey);
}
.event_book .evt_con .evt_list > li.type_blue:hover .evt_txt {
  color: var(--text-primary);
}
.event_book .evt_con .evt_list > li.type_blue .evt_txt > span {
  font-size: 16px;
}
.event_book .evt_con .evt_list > li.type_yellow {
  border: 1px solid var(--main-color);
  cursor: pointer;
}
.event_book .evt_con .evt_list > li.type_yellow:hover {
  border: 1px solid var(--main-color);
}
.event_book .evt_con .evt_list > li.type_yellow .top {
  width: 100%;
  height: 30px;
  background: var(--bg-primary) url(/r/front/img/comm/bg_evt_yellow.png) 0 0
    no-repeat;
}
.event_book .evt_con .evt_list > li.type_yellow .top > p {
  padding: 10px 0 0 10px;
  color: var(--text-primary);
}
.event_book .evt_con .evt_list > li.type_yellow .evt_txt {
  padding: 10px 0 0 10px;
  color: var(--text-grey);
  letter-spacing: 0;
}
.event_book .evt_con .evt_list > li.type_yellow:hover .evt_txt {
  color: var(--text-primary);
}
.event_book .evt_con .evt_list > li.type_yellow .evt_txt > span {
  font-size: 20px;
  color: var(--main-color);
}

.livechat {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 90;
}

.main_section .main_visual {
  position: relative;
}
.main_section .main_visual .wrap_sl {
  position: relative;
  left: 50%;
  width: 1900px;
  margin-left: -950px;
}
.main_section .main_visual .wrap_sl .bx-pager {
  position: absolute;
  bottom: 10px;
  z-index: 60;
  width: 100%;
  text-align: center;
}
.main_section .main_visual .wrap_sl .bx-pager > div {
  width: 20px;
}
.main_section .main_visual .wrap_sl .bx-pager > div > a {
  width: 10px;
  height: 10px;
  font-size: 0;
  text-indent: -99px;
  border-radius: 50%;
  background-color: var(--bg-grey);
}
.main_section .main_visual .wrap_sl .bx-pager > div > a.active {
  background-color: var(--bg-secondary);
}
.main_section .main_visual .wrap_sl li a {
  position: absolute;
  top: 324px;
  left: 50%;
  width: 244px;
  margin-left: -120px;
  font-size: 0;
  text-indent: -99px;
}

.layer_tutorial {
  display: none;
  position: absolute;
  top: 100px;
  right: 90px;
  z-index: 60;
}
.layer_tutorial .bt_close {
  display: block;
  position: absolute;
  top: 0;
  right: 13px;
  width: 40px;
  height: 40px;
  font-size: 0;
  text-indent: -99px;
  background: url(/r/front/img/main/bt_close.png) 0 0 no-repeat;
}
.layer_tutorial .inner {
  width: 328px;
  height: 361px;
  margin-top: 45px;
  background: url(/r/front/img/main/bg_tutor_pop.png) 0 0 no-repeat;
  text-align: center;
}
.layer_tutorial .inner .txt_big {
  padding-top: 40px;
  font-size: 30px;
  color: var(--text-input);
}
.layer_tutorial .inner .txt_big > span {
  color: var(--main-color);
}
.layer_tutorial .inner .txt {
  margin-top: 35px;
  color: var(--text-grey);
}
.layer_tutorial .inner .bt_area {
  margin-top: 25px;
}

.bt_area {
  padding: 0 15px;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  cursor: pointer;
}
.bt_area:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}
a:link {
  color: var(--text-primary);
  text-decoration: none;
}
a:visited {
  color: var(--text-primary);
  text-decoration: none;
}
a:hover {
  color: var(--text-primary);
  text-decoration: none;
}

.bt_close_ico {
  width: 40px;
  height: 40px;
  background: url(/r/front/img/main/bt_close.png) 0 0 no-repeat;
}
#pageViewBox .bt_close_ico {
  position: fixed;
  margin-left: -45px;
  text-align: right;
}
.pageView {
  display: none;
  width: 1067px;
  height: 720px;
  overflow: hidden;
  background-color: var(--bg-primary);
  border: 0;
}

/*main page event*/
.main_section .contents .promotions {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding-top: 10px;
}
.main_section .contents .promotions > div {
  margin-left: 10px;
}
.main_section .contents .promotions > div:first-child {
  margin-left: 0;
}
.main_section .contents .promotions .greybox.promo {
  width: 644px;
  padding: 0 15px 20px;
}
.main_section .contents .promotions .greybox.promo .ban_list li {
  margin-top: 15px;
  overflow: hidden;
}
.main_section .contents .promotions .greybox.promo .ban_list li:first-child {
  margin-top: 10px;
}
.main_section .contents .promotions .greybox.promo .ban_list li img {
  height: 216px;
}
.main_section .contents .promotions .greybox.newgame {
  padding: 0 15px 20px;
}
.main_section .contents .promotions .greybox.newgame .ban_list li {
  margin-top: 15px;
}
.main_section .contents .promotions .greybox.newgame .ban_list li:first-child {
  margin-top: 10px;
}
.main_section .contents .promotions .greybox.newgame .ban_list li img {
  width: 216px;
}
.main_section .contents .promotions .greybox.hotgame {
  padding: 0 15px 20px;
}
.main_section .contents .promotions .greybox.hotgame .ban_list li {
  margin-top: 15px;
}
.main_section .contents .promotions .greybox.hotgame .ban_list li:first-child {
  margin-top: 10px;
}
.main_section .contents .promotions .greybox.hotgame .ban_list li img {
  width: 216px;
}
.main_section .contents .best_casino {
  position: relative;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}
.main_section .contents .best_casino .list_wrap {
  position: relative;
  left: -8px;
  z-index: 3;
}
.main_section .contents .best_casino .thumb_list {
  width: 1260px;
}
.main_section .contents .best_casino .girl1bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: 600px;
  z-index: 1;
}
.main_section .contents .best_casino .girl2bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -940px;
  z-index: 1;
}
.main_section .contents .best_slot {
  position: relative;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}
.main_section .contents .best_slot .list_wrap {
  position: relative;
  z-index: 3;
}
.main_section .contents .best_slot .list_wrap > .main_game {
  margin-top: 10px;
  border: 1px solid var(--border-dark);
}
.main_section .contents .best_slot .thumb_list {
  width: 1008px;
}
.main_section .contents .best_slot .girl3bg {
  position: absolute;
  bottom: -14px;
  left: 50%;
  margin-left: -940px;
  z-index: 1;
}
.main_section .contents .sport {
  position: relative;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}
.main_section .contents .sport .sport_sl {
  position: relative;
  margin-top: 10px;
}
.main_section .contents .sport .sport_sl .sl li {
  border: 1px solid var(--border-light);
}
.main_section .contents .sport .sport_sl .bx-controls-direction > a {
  display: block;
  position: absolute;
  top: 50%;
  width: 54px;
  height: 54px;
  margin-top: -25px;
  font-size: 0;
}
.main_section .contents .sport .sport_sl .bx-controls-direction > a.bx-prev {
  left: -90px;
  background: url(/r/front/img/template1/comm/bt_snb_prev2.jpg) 0 0 no-repeat;
  cursor: pointer;
}
.main_section
  .contents
  .sport
  .sport_sl
  .bx-controls-direction
  > a.bx-prev:hover {
  background: url(/r/front/img/template1/comm/bt_snb_prev2_on.jpg) 0 0 no-repeat;
}
.main_section .contents .sport .sport_sl .bx-controls-direction > a.bx-next {
  right: -90px;
  background: url(/r/front/img/template1/comm/bt_snb_next2.jpg) 0 0 no-repeat;
  cursor: pointer;
}
.main_section
  .contents
  .sport
  .sport_sl
  .bx-controls-direction
  > a.bx-next:hover {
  background: url(/r/front/img/template1/comm/bt_snb_next2_on.jpg) 0 0 no-repeat;
}
.main_section .contents .sport .sport_sl .big_thumb {
  position: absolute;
  top: -34px;
  left: 50%;
  width: 306px;
  height: 306px;
  margin-left: -150px;
  border: 1px solid var(--border-light);
  background-color: var(--bg-dark-grey);
  box-shadow: 10px 10px 25px #000;
  z-index: 60;
}
.main_section .contents .sport .sport_sl .big_thumb > img {
  width: 100%;
}
.main_section .contents .sport .sport_sl .big_thumb > a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 97px;
  height: 97px;
  margin: -50px 0 0 -50px;
  padding-top: 30px;
  text-align: center;
  box-sizing: border-box;
}
.main_section .contents .sport .sport_sl .big_thumb > a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85px;
  height: 83px;
  margin: -40px 0 0 -40px;
  background: url(/r/front/img/template1/comm/lotate1.png) 0 0 no-repeat;
  animation: target_image 2s linear infinite;
  transform-origin: 50% 50%;
}
.main_section .contents .sport .sport_sl .big_thumb > a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 97px;
  height: 97px;
  margin: -50px 0 0 -50px;
  background: url(/r/front/img/template1/comm/lotate2.png) 0 0 no-repeat;
  animation: target_image2 2s linear infinite;
  transform-origin: 50% 50%;
}
.main_section .contents .sport .sport_sl .big_thumb > p {
  display: none;
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  font-size: 16px;
  color: var(--text-primary);
  text-align: center;
}
.main_section .contents .sport .sport_sl .big_thumb:hover > a {
  display: block;
}
.main_section .contents .sport .sport_sl .big_thumb:hover > p {
  display: block;
}

.main_section .contents .long_ban {
  width: 100%;
  margin: 0 auto;
  padding-top: 30px;
}
.main_section .contents .long_ban .long_sl {
  position: relative;
}
.main_section .contents .long_ban .swiper-slide {
  max-height: 400px;
}
.main_section .contents .long_ban .long_sl .swiper-container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.main_section .contents .long_ban .long_sl .bx-controls-direction > a {
  display: block;
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -15px;
  font-size: 0;
}
.main_section .contents .long_ban .long_sl .bx-controls-direction > a.bx-prev {
  left: 1px;
  background: url(/r/front/img/main/bt_long_prev.png) 0 0 no-repeat;
}
.main_section .contents .long_ban .long_sl .bx-controls-direction > a.bx-next {
  right: 1px;
  background: url(/r/front/img/main/bt_long_next.png) 0 0 no-repeat;
}
.swiper-main-bottom_prev {
  position: absolute;
  top: 50%;
  left: 1px;
  width: 33px;
  height: 33px;
  margin-top: -15px;
  background: url(/r/front/img/main/bt_long_prev.png) 0 0 no-repeat;
  z-index: 5000;
}
.swiper-main-bottom_next {
  position: absolute;
  top: 50%;
  right: 1px;
  width: 33px;
  height: 33px;
  margin-top: -15px;
  background: url(/r/front/img/main/bt_long_next.png) 0 0 no-repeat;
  z-index: 5000;
}

.sub_main_banner {
  position: relative;
  height: 441px;
}
.sub_main_banner .wrap_sl {
  position: relative;
  left: 50%;
  width: 1900px;
  margin-left: -950px;
}
.sub_main_banner .wrap_sl .bx-pager {
  position: absolute;
  bottom: 10px;
  z-index: 60;
  width: 100%;
  text-align: center;
}
.sub_main_banner .wrap_sl .bx-pager > div {
  width: 20px;
}
.sub_main_banner .wrap_sl .bx-pager > div > a {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--bg-grey);
  font-size: 0;
  text-indent: -99px;
}
.sub_main_banner .wrap_sl .bx-pager > div > a.active {
  background-color: var(--bg-secondary);
}
.sub_main_banner .wrap_sl ul > li a {
  position: absolute;
  top: 324px;
  left: 50%;
  width: 244px;
  margin-left: -120px;
  font-size: 0;
  text-indent: -99px;
}

.sub_section {
  padding: 0;
}
.sub_section .sub_contents {
  position: relative;
  margin: 0 auto;
  width: 1280px;
}
.sub_section .sub_contents.game_contents {
  padding-top: 0 !important;
}
.sub_section .sub_contents .location {
  position: absolute;
  top: 10px;
  left: -252px;
  width: 240px;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  text-overflow: ellipsis;
  color: var(--text-grey);
}
.sub_section .sub_contents .location > span {
  color: var(--text-grey);
  text-decoration: underline;
}
.sub_section .sub_contents .bg_vis_change {
  position: absolute;
  top: 30px;
  right: 1300px;
  width: 180px;
  height: 220px;
  background: url(/r/front/img/game/mini_monkey_01.png) right top no-repeat;
}
.sub_section .sub_contents .bg_vis1 {
  position: absolute;
  top: 900px;
  left: 42px;
  width: 275px;
  height: 279px;
  background: url(/r/front/img/game/monkey2.png) 0 0 no-repeat;
}
.sub_section .sub_contents .bg_vis2 {
  position: absolute;
  top: 856px;
  left: 1220px;
  width: 254px;
  height: 363px;
  background: url(/r/front/img/game/monkey3.png) 0 0 no-repeat;
}
.sub_section .sport_wrap {
  width: 100%;
  background: url(/r/front/img/comm/bg_sports_black.jpg) 50% 100% no-repeat;
  background-size: cover;
}
.sub_section .sport_wrap .sport_con {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}
.sub_section .sub_contents .game_list1 {
  position: relative;
}
.sub_section .sub_contents .game_list1 .bg_line {
  position: absolute;
  bottom: -87px;
  width: 100%;
  height: 87px;
  background: url(/r/front/img/comm/bg_sub_line.png) 50% top no-repeat;
}
.sub_section .sub_contents .game_list1 .inner {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}
/*.sub_section .sub_contents>:nth-child(odd){background-color:var(--bg-primary);}*/

/*BRAND GAME MAIN*/
.brand.lotto {
  --main-color: #76ad2e;
  --main-logo: url("/r/front/img/comm/lottoland_logo.png");
}
.brand.lotto .theme_logo_img {
  background-position: left;
  background-size: 180px;
}
.brand .sub_section .sub_contents {
  background-color: var(--white);
}
.brand .sub_section .sub_contents .game_list1 .bg_line {
  position: absolute;
  bottom: 0;
  left: calc(50% - 574px);
  width: 100%;
  max-width: 1380px;
  height: 1px;
  background: none;
  border-top: 1px solid var(--border-dark);
}
.brand .tab_wrap {
  background-color: var(--main-color);
}
.brand.lotto .tab_wrap .tab_list > li.on a {
  color: var(--text-primary);
  border-bottom: 2px solid var(--white);
}
.brand.lotto .tab_wrap .tab_list > li a {
  filter: brightness(0) invert(1);
}
.brand.lotto .tab_wrap.fix_top {
  background-color: rgba(101, 165, 8, 0.7);
}
.brand.lotto .titlebox h4 {
  position: relative;
  padding: 0 0 0 20px;
  font-size: 22px;
  color: var(--text-primary);
  background: linear-gradient(
    275deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(118, 173, 46, 1) 45%
  );
  background-size: 300px 100%;
  background-repeat: no-repeat;
}
.brand.lotto .titlebox h4:after {
  position: absolute;
  top: 5px;
  left: 5px;
  content: "";
  width: 4px;
  height: 30px;
  border-radius: var(--btn-radius);
  background-color: var(--btn-tertiary-bg);
}
.brand.lotto .titlebox h4 em.sub_tit_box {
  position: absolute;
  left: 200px;
  height: 100%;
  padding: 0 10px;
  background-color: var(--white);
  color: var(--text-secondary);
}
.brand.lotto .titlebox .bt_all {
  color: var(--text-primary);
  border: 2px solid var(--white);
  background: linear-gradient(
    275deg,
    rgba(101, 165, 8, 1) 0%,
    rgba(163, 203, 36, 1) 100%
  );
  cursor: pointer;
}
.brand.lotto .titlebox .bt_all:hover {
  background: linear-gradient(
    275deg,
    rgba(163, 203, 36, 1) 0%,
    rgba(101, 165, 8, 1) 100%
  );
}
.brand.lotto .tab_wrap .searchbox {
  background-color: var(--white);
  background: url(/r/front/img/comm/lotto_search_icon.png) 95% 50% no-repeat;
  background-size: 30px;
  border: 1px solid var(--main-color);
}
.brand.lotto .tab_wrap .searchbox > input {
  color: var(--main-color);
}
.brand.lotto .game_list_wrap .gameInfo {
  background-color: var(--white);
}
.brand.lotto .game_list_wrap .gameInfo p.gameTitle,
.brand.lotto .game_list_wrap .big_banner .gameInfo p.gameTitle {
  color: var(--main-color);
}

/*LOTTO BRAND*/
.lotto .tab_wrap {
  background-color: var(--bg-primary);
}

.list-container {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 20px 0;
  overflow: hidden;
}
.bg-lightgray {
  background-color: #f2f2f2;
}
.lotto .leaderboard-section {
  position: relative;
  background: transparent;
}
.lotto .leaderboard-section:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/r/front/img/lottoland/img_leaderboard_bg.jpg) center/cover
    no-repeat;
  opacity: 0.13;
  z-index: 0;
}
.brand.lotto .titlebox {
  padding: 0;
  margin-bottom: 10px;
}
.brand.lotto .titlebox h4 {
  position: relative;
  padding-left: 10px;
  font-size: 22px;
  color: var(--text-secondary);
  background: unset;
}
.brand.lotto .titlebox h4:before {
  content: "";
  display: block;
  position: absolute;
  top: 6px;
  left: 0;
  width: 0;
  height: 28px;
  border-left: 3px solid var(--main-color);
}
.brand.lotto .titlebox h4:after {
  display: none;
}
.brand.lotto .titlebox h4 em.sub_tit_box {
  position: static;
  margin-left: 10px;
  padding: 0;
  color: var(--text-grey);
  background: unset;
}

.lotto-main * {
  box-sizing: border-box;
}
.lotto-list .badge.--new {
  background-color: #80ff00;
  color: var(--text-secondary);
}
.lotto-list .badge.--hot {
  background-color: var(--red);
  color: var(--text-primary);
}
.lotto-list .badge.--best {
  background-color: #00b1ff;
  color: var(--text-primary);
}
.lotto-list .play-btn {
  display: block;
  text-align: center;
  font-weight: bold;
  color: var(--text-secondary);
  border-radius: var(--btn-radius);
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 46%, #d1d1d1 100%);
  box-shadow: 0 3px 6px #00000029;
  cursor: pointer;
  transition: 0.4s;
}
.lotto-list .play-btn:hover {
  transform: scale(1.03);
  filter: brightness(1.5);
}
.lotto-list .fav-btn,
.lotto-list .info-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 46%, #d1d1d1 100%);
  cursor: pointer;
  transition: 0.3s;
}
.lotto-list .fav-btn {
  margin-bottom: 5px;
}
.lotto-list .fav-btn:hover,
.lotto-list .info-btn:hover {
  filter: brightness(1.5);
}
.lotto-list .fav-btn:hover:before,
.lotto-list .info-btn:hover:before {
  transform: scale(1.3);
}
.lotto-list .fav-btn.on {
  border: 0.5px solid var(--border-dark);
  background-color: var(--bg-secondary);
}
.lotto-list .fav-btn:before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  background: url(/r/front/img/lottoland/ico_star.svg) center/100% auto
    no-repeat;
}
.lotto-list .fav-btn.on:before {
  background: url(/r/front/img/lottoland/ico_star_on.svg) center/100% auto
    no-repeat;
}
.lotto-list .info-btn:before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  background: url(/r/front/img/lottoland/ico_infomation.svg) center/auto 100%
    no-repeat;
}
.lotto-list .info-btn {
  display: none; /*temp hide for layer info*/
}
.lotto-list .lotto-swiper {
  position: relative;
}
.lotto-list .swiper-wrapper {
  flex-wrap: nowrap !important;
  gap: unset !important;
}
.lotto-list .swiper-function {
  display: flex;
  flex-direction: row-reverse;
  gap: 5px;
  position: absolute;
  top: -50px;
  right: 0;
  width: auto;
  height: 35px;
}
.lotto-list .swiper-function .swiper-button-prev,
.lotto-list .swiper-function .swiper-button-next {
  position: static;
  width: 35px;
  height: 35px;
  margin-top: 0;
  border-radius: 50%;
  background-color: var(--white);
}
.lotto-list .swiper-function .swiper-button-prev:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(/r/front/img/lottoland/ico_arrow_left.svg) center/14px auto
    no-repeat;
}
.lotto-list .swiper-function .swiper-button-next:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(/r/front/img/lottoland/ico_arrow_right.svg) center/14px auto
    no-repeat;
}
.lotto-list .swiper-function .swiper-pagination-progressbar {
  position: absolute;
  top: 50%;
  right: 90px;
  width: 100px;
  height: 3px;
}
.lotto-list
  .swiper-function
  .swiper-pagination-progressbar
  .swiper-pagination-progressbar-fill {
  background-color: var(--bg-dark-grey);
}

.lotto-list .game_list > li:after {
  display: none;
}
.lotto-list .list-type-01 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 16px;
}
.lotto-list .list-type-01 li {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: calc(33.3333% - 11px);
}
.lotto-list .list-type-01 li .list-box {
  position: relative;
  width: 100%;
  height: 186px;
  padding: 20px;
  border-radius: var(--btn-radius);
  overflow: hidden;
}
.lotto-list .list-type-01 li:nth-child(1) .list-box,
.lotto-list .list-type-01 li:nth-child(3) .list-box {
  background: url("/r/front/img/lottoland/img_jackpotLotto_bg_01.png") top
    center/100% auto no-repeat;
}
.lotto-list .list-type-01 li:nth-child(2) .list-box {
  background: url("/r/front/img/lottoland/img_jackpotLotto_bg_02.png") top
    center/100% auto no-repeat;
}
.lotto-list .list-type-01 li:nth-child(4) .list-box,
.lotto-list .list-type-01 li:nth-child(6) .list-box {
  background: url("/r/front/img/lottoland/img_jackpotLotto_bg_03.png") top
    center/100% auto no-repeat;
}
.lotto-list .list-type-01 li:nth-child(5) .list-box {
  background: url("/r/front/img/lottoland/img_jackpotLotto_bg_04.png") top
    center/100% auto no-repeat;
}
.lotto-list .list-type-01 li .list-box .left {
  position: relative;
  padding-top: 20px;
}
.lotto-list .list-type-01 li .list-box .left .badge {
  position: absolute;
  top: 0;
  display: block;
  width: 40px;
  height: 15px;
  text-align: center;
  font-weight: bold;
  text-indent: 0;
  border-radius: var(--btn-radius);
}
.lotto-list .list-type-01 li .list-box .left .game-title {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: var(--text-primary);
}
.lotto-list .list-type-01 li .list-box .left .play-btn {
  width: 132px;
  height: 34px;
  margin-top: 5px;
  padding: 5px 0;
}
.lotto-list .list-type-01 li .list-box figure {
  position: absolute;
  top: 0;
  right: 17px;
  display: block;
  width: 128px;
  height: 128px;
}
.lotto-list .list-type-01 li .list-box .prize {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  font-size: 24px;
  font-weight: bold;
  color: var(--text-primary);
  border-radius: var(--btn-radius);
  background: linear-gradient(90deg, #270021 0%, #0c0033 100%);
}
.lotto-list .list-type-01 li .list-box .prize strong {
  letter-spacing: -0.5px;
}
.lotto-list .list-type-01 li:nth-child(1) .list-box .prize strong,
.lotto-list .list-type-01 li:nth-child(3) .list-box .prize strong {
  color: #ff79ff;
}
.lotto-list .list-type-01 li:nth-child(2) .list-box .prize strong {
  color: #00ccff;
}
.lotto-list .list-type-01 li:nth-child(4) .list-box .prize strong,
.lotto-list .list-type-01 li:nth-child(6) .list-box .prize strong {
  color: #ffaa00;
}
.lotto-list .list-type-01 li:nth-child(5) .list-box .prize strong {
  color: #00ffa7;
}
.lotto-list .list-type-01 .timer {
  margin-top: 10px;
}

.lotto-list .list-type-02 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lotto-list .list-type-02 li {
  position: relative;
  flex: 0 0 auto;
  width: calc(20% - 6.4px);
}
.lotto-list .list-type-02 li .list-box {
  position: relative;
  width: 100%;
  padding: 12px 20px;
  border-radius: var(--btn-radius);
  overflow: hidden;
}
.lotto-list .list-type-02 li:nth-child(6n + 1) .list-box {
  background: linear-gradient(180deg, #f7843c 0%, #9c613d 100%);
}
.lotto-list .list-type-02 li:nth-child(6n + 2) .list-box {
  background: linear-gradient(180deg, #0243f4 0%, #01227a 100%);
}
.lotto-list .list-type-02 li:nth-child(6n + 3) .list-box {
  background: linear-gradient(180deg, #a700ad 0%, #540057 100%);
}
.lotto-list .list-type-02 li:nth-child(6n + 4) .list-box {
  background: linear-gradient(180deg, #00900b 0%, #005d08 100%);
}
.lotto-list .list-type-02 li:nth-child(6n + 5) .list-box {
  background: linear-gradient(180deg, #d6008c 0%, #980063 100%);
}
.lotto-list .list-type-02 li:nth-child(6n + 6) .list-box {
  background: linear-gradient(180deg, #00a4b2 0%, #006871 100%);
}
.lotto-list .list-type-02 li .list-box .left {
  position: relative;
  z-index: 2;
  padding-top: 20px;
}
.lotto-list .list-type-02 li .list-box .left .badge {
  position: absolute;
  top: 0;
  display: block;
  width: 40px;
  height: 15px;
  text-align: center;
  font-weight: bold;
  text-indent: 0;
  border-radius: var(--btn-radius);
}
.lotto-list .list-type-02 li .list-box .left .game-title {
  display: block;
  width: calc(100% - 85px);
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
  word-break: keep-all;
}
.lotto-list .list-type-02 li .list-box .left .play-btn {
  width: 85px;
  margin-top: 5px;
  padding: 5px 0;
}
.lotto-list .list-type-02 li .list-box figure {
  position: absolute;
  top: 23px;
  right: 24px;
  display: block;
  width: 76px;
  height: 76px;
}
.lotto-list .list-type-02 li .list-box .prize {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  color: var(--text-primary);
  font-weight: bold;
  border-radius: var(--btn-radius);
  background: rgba(0, 0, 0, 0.8);
}
.lotto-list .list-type-02 li .list-box .prize strong {
  letter-spacing: -0.5px;
  color: var(--yellow);
}
.lotto-list .list-type-02 li .list-box .function-wrap {
  position: absolute;
  top: 12px;
  right: 8px;
  z-index: 3;
}
.lotto-list .list-type-02 .timer {
  margin-top: 5px;
}

.lotto-list .list-type-03 {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 8px;
}
.lotto-list .list-type-03 li {
  position: relative;
  flex: 0 0 auto;
  width: calc(20% - 6.4px);
}
.lotto-list .list-type-03 li .list-box {
  position: relative;
  height: 140px;
  padding: 15px 20px;
  border-radius: var(--btn-radius);
  overflow: hidden;
  background: linear-gradient(180deg, #b4a178 0%, #80755c 100%);
}
.lotto-list .list-type-03 li .list-box figure {
  position: relative;
  z-index: 2;
  display: block;
  width: 76px;
  height: 76px;
  margin-left: -10px;
}
.lotto-list .list-type-03 li .list-box .right {
  position: absolute;
  top: 12px;
  left: 85px;
  z-index: 2;
  width: calc(100% - 120px);
  padding-top: 20px;
}
.lotto-list .list-type-03 li .list-box .right .badge {
  position: absolute;
  top: 0;
  display: block;
  width: 40px;
  height: 15px;
  text-align: center;
  font-weight: bold;
  text-indent: 0;
  border-radius: var(--btn-radius);
}
.lotto-list .list-type-03 li .list-box .right .game-title {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
  word-break: keep-all;
}
.lotto-list .list-type-03 li .list-box .right .play-btn {
  width: 85px;
  height: 28px;
  margin-top: 5px;
  padding: 5px 0;
}
.lotto-list .list-type-03 li .list-box .prize {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 30px;
  color: var(--text-primary);
  font-weight: bold;
  border-radius: var(--btn-radius);
  background: rgba(0, 0, 0, 0.8);
}
.lotto-list .list-type-03 li .list-box .prize strong {
  letter-spacing: -0.5px;
  color: var(--yellow);
}
.lotto-list .list-type-03 li .list-box .function-wrap {
  position: absolute;
  top: 12px;
  right: 8px;
  z-index: 3;
}
.lotto-list .list-type-03.korea-japan li .list-box:before {
  content: "";
  position: absolute;
  top: 0;
  left: -68px;
  display: block;
  width: 130px;
  height: 170px;
  background-color: var(--yellow);
  transform: rotate(-22deg);
}
.lotto-list .list-type-03.korea-japan .list-box.korea:before {
  background: linear-gradient(#0070d0 0%, #003868 100%);
}
.lotto-list .list-type-03.korea-japan .list-box.japan:before {
  background: linear-gradient(#cc0404 0%, #660202 100%);
}
.lotto-list .list-type-03 .timer {
  margin-top: 5px;
}

.lotto-list .list-type-04 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lotto-list .list-type-04 li {
  position: relative;
  flex: 0 0 auto;
  width: calc(20%);
}
.lotto-list .list-type-04 li .list-box {
  position: relative;
  height: 150px;
  padding: 15px;
  border-radius: var(--btn-radius);
  overflow: hidden;
  background: linear-gradient(180deg, #506474 0%, #28323a 100%);
}
.lotto-list .list-type-04 li .list-box .left {
  position: relative;
  z-index: 2;
  padding-top: 20px;
}
.lotto-list .list-type-04 li .list-box .left .badge {
  position: absolute;
  top: 0;
  display: block;
  width: 40px;
  height: 15px;
  text-align: center;
  font-weight: bold;
  text-indent: 0;
  border-radius: var(--btn-radius);
}
.lotto-list .list-type-04 li .list-box .left .game-title {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
  word-break: keep-all;
}
.lotto-list .list-type-04 li .list-box .left .interval {
  position: relative;
  margin-top: 10px;
  padding-left: 20px;
  color: var(--text-primary);
  font-weight: 400;
}
.lotto-list .list-type-04 li .list-box .left .interval strong {
  color: var(--yellow);
  font-weight: 400;
}
.lotto-list .list-type-04 li .list-box .left .interval:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 13px;
  height: 15px;
  background: url(/r/front/img/lottoland/ico_clock.svg) center/100% auto
    no-repeat;
}
.lotto-list .list-type-04 li .list-box .play-btn {
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  width: 132px;
  padding: 5px 0;
}
.lotto-list .list-type-04 li .list-box figure {
  position: absolute;
  top: 18px;
  right: 40px;
  display: block;
  width: 76px;
  height: 76px;
}
.lotto-list .list-type-04 li .list-box .prize {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 30px;
  color: var(--text-primary);
  font-weight: bold;
  border-radius: var(--btn-radius);
  background: rgba(0, 0, 0, 0.8);
}
.lotto-list .list-type-04 li .list-box .prize strong {
  letter-spacing: -0.5px;
  color: var(--yellow);
}
.lotto-list .list-type-04 li .list-box .function-wrap {
  position: absolute;
  top: 12px;
  right: 8px;
  z-index: 3;
}
.lotto-list .list-type-04 .timer {
  margin-top: 5px;
}

.lotto-list .timer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: var(--text-input);
}
.lotto-list .timer.red {
  filter: brightness(0) saturate(100%) invert(34%) sepia(67%) saturate(6461%)
    hue-rotate(346deg) brightness(97%) contrast(91%);
}
.lotto-list .timer:before {
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 5px;
  background: url(/r/front/img/lottoland/ico_hourgass.svg) center/12px auto
    no-repeat;
}
.lotto-list .timer strong {
  margin-right: 5px;
  font-weight: bold;
}

.leaderboard-section > * {
  position: relative;
  z-index: 2;
}
.leaderboard-section .video-container {
  position: relative;
  width: 100%;
  margin-top: 30px;
  padding-bottom: 56.25%;
  border-radius: var(--btn-radius);
  background-color: #999;
}
.leaderboard {
  margin-top: 30px;
}
.leaderboard-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
}
.leaderboard-tab li a {
  display: block;
  min-width: 80px;
  padding: 0 15px;
  border: 1px solid var(--white);
  border-radius: var(--btn-radius);
  background-color: var(--white);
  color: var(--text-secondary);
  font-weight: bold;
  text-align: center;
}
.leaderboard-tab li.on a {
  background-color: #6aa509;
  color: var(--text-primary);
}
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--btn-radius);
}
.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
}
.leaderboard-table th,
.leaderboard-table td {
  padding: 10px 20px;
  color: var(--text-primary);
  font-weight: bold;
}
.leaderboard-table th {
  background-color: var(--bg-secondary);
}
.leaderboard-table tbody tr:nth-child(even) {
  background-color: #76828d;
}
.leaderboard-table tbody tr:nth-child(odd) {
  background-color: #7f8993;
}
.leaderboard-table td[data-label="date"] {
  opacity: 0.5;
}
.leaderboard-table td[data-label="result"] span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--btn-tertiary-bg);
  color: var(--text-grey);
  font-weight: bold;
  text-align: center;
}
.leaderboard td[data-label="result"] .on {
  background: linear-gradient(180deg, #78d701 0%, #00d32e 100%);
  color: var(--text-secondary);
  box-shadow: 0 0 3px #ebff00d6;
}
.leaderboard td[data-label="result"] span:last-child.on {
  background: linear-gradient(180deg, #f1ff4a 0%, #d39200 100%);
  box-shadow: 0 0 3px #ff00e2d6;
}
.leaderboard td[data-label="result"] .yellow {
  background: linear-gradient(180deg, #f1ff4a 0%, #d39200 100%);
  box-shadow: 0 0 3px #ff00e2d6;
}
.leaderboard-table td[data-label="amount"] {
  text-align: right;
}

.badge-jackpot {
  position: relative;
  top: -1px;
  margin-right: 10px;
  height: 18px;
  padding: 0 10px;
  border-radius: var(--btn-radius);
  background-color: #f7ed00;
  color: var(--text-secondary);
  font-weight: bold;
}

/*BRAND GAME DETAIL*/
.brand.lotto.wrapper {
  background-color: var(--btn-tertiary-bg);
}
.brand.lotto .sub_section .game_wrap {
  border: none;
  background-color: var(--btn-tertiary-bg);
}
.brand.lotto .sub_section .game_wrap .game_tit {
  display: none;
}
.brand.lotto .quick_game {
  display: none;
}
.brand.lotto .notice_area {
  background-color: var(--bg-primary);
}
.brand.lotto .sub_contents .game_wrap .game_frame .iframe_wrap iframe {
  background: none;
}

.tab_wrap {
  position: relative;
  background-color: var(--bg-dark-grey) !important;
}
.tab_wrap.fix_top {
  width: 100%;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.8);
}
.tab_wrap .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  max-width: 1380px;
  min-height: 100px;
  margin: 0 auto;
  padding: var(--btn-padding);
  background-color: var(--bg-dark-grey) !important;
}
.tab_wrap .clearfix:after {
  display: none;
}
.tab_wrap .bg_line {
  position: absolute;
  bottom: -87px;
  width: 100%;
  height: 87px;
  background: url(/r/front/img/comm/bg_sub_line.png) 50% top no-repeat;
}
.tab_wrap .tab_list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 1030px;
  height: auto;
  flex-wrap: wrap;
  gap: 10px 15px;
}
.tab_wrap .tab_list > li {
  width: 75px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.tab_wrap .tab_list > li a {
  display: block;
  min-width: 43px;
  padding-top: 50px;
  color: var(--text-primary);
  font-weight: bold;
  box-sizing: border-box;
  background: url(/r/front/img/template1/comm/icons_slotgames.png) 0 0 no-repeat;
  white-space: nowrap;
}
.tab_wrap .tab_list > li a.ir1 {
  background-position: 10px -78px;
}
.tab_wrap .tab_list > li.on a.ir1 {
  background-position: 10px 20px;
}
.tab_wrap .tab_list > li a.ir2 {
  background-position: -93px -78px;
}
.tab_wrap .tab_list > li.on a.ir2 {
  background-position: -93px 20px;
}
.tab_wrap .tab_list > li a.ir3 {
  background-position: -200px -78px;
}
.tab_wrap .tab_list > li.on a.ir3 {
  background-position: -200px 22px;
}
.tab_wrap .tab_list > li a.ir4 {
  background-position: -302px -78px;
}
.tab_wrap .tab_list > li.on a.ir4 {
  background-position: -302px 20px;
}
.tab_wrap .tab_list > li a.ir5 {
  background-position: -400px -78px;
}
.tab_wrap .tab_list > li.on a.ir5 {
  background-position: -400px 24px;
}
.tab_wrap .tab_list > li a.ir6 {
  background-position: -504px -78px;
}
.tab_wrap .tab_list > li.on a.ir6 {
  background-position: -504px 19px;
}
.tab_wrap .tab_list > li a.ir7 {
  background-position: -614px -78px;
}
.tab_wrap .tab_list > li.on a.ir7 {
  background-position: -614px 19px;
}
.tab_wrap .tab_list > li a.ir8 {
  background-position: -720px -78px;
}
.tab_wrap .tab_list > li.on a.ir8 {
  background-position: -720px 19px;
}
.tab_wrap .tab_list > li a.ir9 {
  background-position: -823px -78px;
}
.tab_wrap .tab_list > li.on a.ir9 {
  background-position: -823px 19px;
}
.tab_wrap .tab_list > li a.ir10 {
  background-position: -823px -78px;
}
.tab_wrap .tab_list > li.on a.ir10 {
  background-position: -823px -20px;
}
.tab_wrap .tab_list > li.on a {
  color: var(--main-color);
}
.tab_wrap .tab_list > li.on {
  border-bottom: 2px solid var(--main-color);
}
.tab_wrap .searchboxArea {
  width: 240px;
}
.tab_wrap .searchbox {
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--border-dark);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  background: var(--white) url(/r/theme/center_logo/img/mobile/search.png) 95%
    6px no-repeat;
  background-size: 25px;
  overflow: hidden;
}
.tab_wrap .searchbox > input {
  width: 180px;
}
.tab_wrap .searchbox > input::placeholder {
  color: var(--text-input);
}
.tab_wrap .choiceGame {
  margin: 10px 0;
  padding: 5px var(--btn-padding);
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.btn_list {
  padding: 10px 30px;
  border: 1px solid var(--main-color);
  border-radius: var(--btn-radius);
  background-color: var(--main-color);
  color: var(--text-primary);
  text-align: center;
}
.slot_jackpot {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: var(--main-color);
  color: var(--text-secondary);
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.slot_jackpot > em {
  font-weight: 400;
}
.sub_contents .user_guide_btn a {
  position: absolute;
  left: calc(50% - 73px);
  z-index: 1;
  width: 130px;
  padding: var(--btn-padding);
  background: var(--main-color) url(/r/front/img/comm/user_guide_btn.png) 115px
    50% no-repeat;
  background-size: 18px;
}

.design_sel.cate {
  position: relative;
  width: 90px;
  height: 30px;
  margin-left: 0;
  border: 1px solid var(--border-dark);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  cursor: pointer;
}
.design_sel.cate.t1 {
  width: 62px;
  background: var(--bg-primary) url(/r/front/img/template1/mypage/ico_arrow.png)
    44px 11px no-repeat;
}
.design_sel.cate.t2 {
  width: 90px;
  background: var(--bg-primary) url(/r/front/img/template1/mypage/ico_arrow.png)
    68px 11px no-repeat;
}
.design_sel.cate label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 0 0 10px;
  color: var(--text-primary);
  font-weight: bold;
}
.design_sel.cate select {
  width: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
}
.design_sel.cate select option {
  background-color: #222;
  color: #fff;
}

.mypage_cont .tab_con > div {
  display: none;
}
.mypage_cont .tab_con > div.on {
  display: block;
}

.wrapper .mypage_cont .mybox .name > span {
  color: var(--text-primary);
}

.list_my {
  margin: 10px 0;
}
.list_my > li {
  position: relative;
  padding: 20px;
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  overflow: hidden;
}
.list_my > li > a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 95%;
  margin-left: 5%;
}
.list_my > li .checkcontainer {
  position: absolute;
  top: 50%;
}
.list_my > li .left_c {
  width: 100%;
}
.list_my > li .left_c .date {
  color: var(--text-grey);
  font-size: 16px;
}
.list_my > li .left_c .g_type1 {
  margin-top: 10px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: bold;
}
.list_my > li .left_c .g_type1 > em {
  color: var(--text-grey);
  font-size: 20px;
  font-weight: bold;
}
.list_my > li .left_c .g_type2 {
  margin-top: 20px;
  color: var(--text-grey);
  font-size: 20px;
  font-weight: bold;
}
.list_my > li .left_c .g_type2 em {
  font-size: 16px;
}
.list_my > li .center_c ul {
  margin-top: 15px;
}
.list_my > li .center_c ul li {
  margin-top: 10px;
  color: var(--text-grey);
  font-size: 16px;
  font-weight: bold;
}
.list_my > li .center_c ul li > span {
  font-size: 16px;
}
.list_my > li .center_c ul li.point {
  color: var(--main-color);
}
.list_my > li .right_c {
  text-align: right;
}
.list_my > li .right_c .ticket {
  color: var(--text-grey);
  word-break: break-all;
}
.list_my > li .right_c .ticket_bot {
  margin-top: 5px;
  color: var(--text-grey);
  font-size: 16px;
}
.list_my > li .right_c .result {
  margin-top: 10px;
  text-align: right;
}
.list_my > li .right_c .result > span {
  width: 100px;
  border-radius: var(--btn-radius);
  color: var(--text-primary);
  font-size: 16px;
  text-align: right;
}
.list_my > li .right_c .result > span.flag_win {
  background-color: var(--main-color);
}
.list_my > li .right_c .result > span.flag_lose {
  background-color: var(--bg-secondary);
}
.list_my.type_normal > li .center_c ul {
  margin-top: 0;
}
.list_my.type_normal > li .right_c .result {
  margin-top: 15px;
  text-align: right;
}
.betting-click {
  width: 70px;
  margin-right: 5px;
  border: 1px solid var(--white);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  background-color: var(--white);
  color: var(--text-secondary);
  font-weight: 400;
  text-align: center;
  cursor: pointer;
}
input.id_check {
  position: absolute;
  left: -3000em;
}

.design_sel.cate {
  position: relative;
  margin-left: 0;
  width: 90px;
  height: 30px;
  border: 1px solid var(--border-dark);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  cursor: pointer;
}
.design_sel.cate.t1 {
  width: 62px;
  background: var(--bg-primary) url(/r/front/img/template3/mypage/ico_arrow.png)
    44px 11px no-repeat;
}
.design_sel.cate.t2 {
  width: 90px;
  background: var(--bg-primary) url(/r/front/img/template3/mypage/ico_arrow.png)
    68px 11px no-repeat;
}
.design_sel.cate label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 0 0 10px;
  color: var(--text-primary);
  font-weight: bold;
}
.design_sel.cate select {
  width: 100%;
  opacity: 0;
  filter: alpha(opacity=0); /* IE 8 */
}

/* 마이페이지 */
.mypage_cont {
  display: flex;
  align-items: self-start;
  gap: 20px;
  overflow: hidden;
  width: 1380px;
  margin: 0 auto;
  padding: 50px 0 140px;
}
.mypage_cont .contents {
  overflow: hidden;
  width: 100%;
}
.mypage_cont .contents .location {
  display: none;
  overflow: hidden;
  width: 100%;
  padding: 0 0 0 20px;
  border: 1px solid var(--border-light);
  background-color: var(--bg-dark-grey);
  box-sizing: border-box;
}
.mypage_cont .contents .location > p {
  color: var(--text-grey);
}
.mypage_cont .contents .location > em {
  padding: 0 20px;
  color: var(--text-grey);
}
.mypage_cont .contents .greeting {
  padding-bottom: 20px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: var(--text-primary);
}
.mypage_cont .contents .greeting span {
  font-size: 28px;
  font-weight: bold;
}
.mypage_cont .contents .greeting em {
  font-weight: bold;
  color: var(--main-color);
}

.setting_button_area {
  position: absolute;
  top: 14px;
  left: 250px;
  color: var(--text-primary);
  font-weight: bold;
}
.switch_button {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 40px;
}
.switch_button input {
  width: 0;
  height: 0;
  opacity: 0;
}
.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-dark-grey);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.slider:before {
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 35px;
  height: 30px;
  content: "";
  background-color: var(--white);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.checked {
  position: absolute;
  top: 30%;
  color: var(--text-primary);
  font-weight: bold;
  letter-spacing: 1px;
}
.checked.on {
  left: 10px;
}
.checked.off {
  right: 10px;
}
.switch_button input:checked + .slider {
  background-color: var(--main-color);
}
.switch_button input:checked + .slider:before {
  -webkit-transform: translateX(44px);
  -ms-transform: translateX(44px);
  transform: translateX(44px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 15px;
}

/*내정보수정*/
.greeting2 .reddot {
  padding: 0 0 0 15px;
  background: url(/r/front/img/comm/ico_redstar.png) 0 50% no-repeat;
}
.modify_wrap {
  position: relative;
  width: 100%;
  padding: 15px 120px;
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  background-color: var(--bg-dark-grey);
}
.modify_wrap .modibox .inp_join {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.modify_wrap .modibox .inp_join:before {
  position: absolute;
  width: 165px;
  height: 100%;
  content: "";
  background-color: var(--bg-primary);
}
.modify_wrap .modibox .inp_join > li {
  position: relative;
  width: 100%;
  border-bottom: 1px solid var(--border-light);
  box-sizing: border-box;
}
.modify_wrap .modibox .inp_join > li p.title {
  position: relative;
  width: 170px;
  padding-left: 15px;
  background: none;
  color: var(--text-grey);
  display: flex;
  align-items: center;
}
.modify_wrap .modibox .inp_join > li p.title.ico4 {
  font-size: 16px;
}
.modify_wrap .modibox .inp_join > li p > em {
  position: absolute;
  top: 0px;
  left: 5px;
  display: block;
  width: 9px;
  height: 10px;
  background: url(/r/front/img/comm/ico_redstar.png) 0 50% no-repeat;
  font-size: 0px;
  text-indent: -999px;
}
.modify_wrap .modibox .inp_join > li p.txt {
  height: 40px !important;
  padding: var(--btn-padding) !important;
  border: 0 !important;
  border-radius: var(--btn-radius) !important;
  box-sizing: border-box !important;
  background-color: var(--white) !important;
  color: var(--text-input) !important;
  font-size: 16px !important;
}
.modify_wrap .modibox .inp_join > li input {
  width: 350px;
  margin-top: 10px;
  margin-right: 10px;
}
.modify_wrap .modibox .inp_join > li input::-webkit-input-placeholder {
  color: var(--text-grey);
  font-weight: 400;
}
.modify_wrap .modibox .inp_join > li input:-ms-input-placeholder {
  color: var(--text-grey);
  font-weight: 400;
}
.modify_wrap .modibox .inp_join > li p.ico1 {
  background-position: -4px -2px;
}
.modify_wrap .modibox .inp_join > li p.ico2 {
  background-position: -3px -76px;
}
.modify_wrap .modibox .inp_join > li p.ico3 {
  background-position: -2px -145px;
}
.modify_wrap .modibox .inp_join > li p.ico4 {
  background-position: -2px -214px;
}
.modify_wrap .modibox .inp_join > li p.ico5 {
  background-position: -1px -285px;
}
.modify_wrap .modibox .inp_join > li p.ico6 {
  background-position: 2px -352px;
}
.modify_wrap .modibox .inp_join > li p.ico7 {
  background-position: -2px -424px;
}
.modify_wrap .modibox .inp_join > li p.ico8 {
  background-position: -2px -495px;
}
.modify_wrap .modibox .inp_join > li p.ico9 {
  background-position: -2px -567px;
}
.modify_wrap .modibox .inp_join > li p.ico10 {
  background-position: -2px -717px;
}
.modify_wrap .modibox .inp_join > li p.ico11 {
  background-position: -2px -867px;
}
.modify_wrap .modibox .inp_join > li .err_ico {
  position: absolute;
  top: 6px;
  right: 0px;
  display: block;
  width: 20px;
  height: 20px;
  background: url(/r/front/img/member/ico_err.png) 0 0 no-repeat;
}
.modify_wrap .modibox .inp_join > li .bt_phone {
  margin-top: 10px;
}
.modify_wrap .modibox .inp_join > li .conf {
  width: 66px !important;
  padding-left: 40px !important;
  margin-left: 140px;
}
.modify_wrap .modibox .inp_join > li .numbox {
  position: relative;
  width: 152px;
  padding: 0 0 0 5px;
  margin-top: 10px;
  border: 1px solid var(--border-dark);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
}
.modify_wrap .modibox .inp_join > li .numbox > input {
  width: 80px;
  margin-top: 5px;
}
.modify_wrap .modibox .inp_join > li .numbox > span {
  position: absolute;
  top: 10px;
  right: 5px;
  color: var(--text-primary);
}
.modify_wrap .modibox .inp_join > li .bt_resend {
  position: absolute;
  top: -2px;
  right: -6px;
}
.modify_wrap .modibox .inp_join > li .err_msg {
  position: absolute;
  top: 40px;
  left: 30px;
  color: var(--red);
}
.modify_wrap .modibox .inp_join > li.etc {
  margin-top: 40px;
}
.modify_wrap .modibox .inp_join .bt_yellow {
  width: 88px;
  border: 1px solid var(--main-color);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  background-color: var(--bg-primary);
  color: var(--main-color);
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
.modify_wrap .modibox .inp_join .bt_yellow:hover {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.modify_wrap .modibox .bot_btn {
  text-align: center;
}
.modify_wrap .modibox .bot_btn .bt_modify {
  padding: 10px 30px;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  cursor: pointer;
}
.modify_wrap .modibox .bot_btn .bt_modify:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}
.modify_wrap .modibox .bot_btn .bt_bye {
  margin-left: 10px;
  padding: 10px 30px;
  border: 1px solid var(--white);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
}
.modify_wrap .modibox .bot_btn .bt_bye:hover {
  border: 1px solid var(--btn-primary-border);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.wrapper .modify_wrap .modibox .inp_join > li {
  display: flex;
  position: relative;
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  border: none;
  box-sizing: border-box;
}
.wrapper .modify_wrap .modibox .inp_join > li input {
  margin-top: 0;
}
.wrapper .modify_wrap .modibox .inp_join > li p.txt {
  width: 350px;
  height: 40px !important;
  padding: var(--btn-padding) !important;
  border: 0 !important;
  border-radius: var(--btn-radius) !important;
  box-sizing: border-box !important;
  background-color: var(--white) !important;
  color: var(--text-input) !important;
  font-size: 16px !important;
  cursor: pointer;
}
.wrapper .modify_wrap .modibox .bot_btn .bt_white {
  display: block;
  width: 100px;
  padding: var(--btn-padding);
  border: none;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  text-align: center;
}
.wrapper .modify_wrap .modibox .bot_btn .bt_white:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}
.wrapper .modify_wrap .modibox .inp_join > li p.title {
  color: var(--text-grey);
}
.wrapper .modify_wrap .modibox .inp_join > li .setting_button_area {
  position: absolute;
  top: 3px;
  left: 188px;
}
.wrapper .modify_wrap .modibox .inp_join > li .design_sel {
  margin-top: 0;
}
.wrapper .modify_wrap .modibox .inp_join > li .info_select {
  width: 350px;
  margin: 0;
}
.wrapper .modify_wrap .modibox .bot_btn.action_btn {
  text-align: left;
}
.wrapper .modify_wrap .modibox .inp_join > li .design_sel {
  margin-top: 0 !important;
  border-radius: var(--btn-radius);
}
.mybox .mbox .ico_comp {
  background: var(--bg-primary) url(/r/front/img/template1/mypage/ico_comp.png)
    6px 6px no-repeat;
}

.deposit_wrap .agree_wrap {
  margin-top: 40px;
  padding: 0 0 60px;
}
.deposit_wrap .agree_wrap > p {
  text-align: center;
  color: var(--text-primary);
}
.deposit_wrap .agree_wrap > ul {
  width: 420px;
  margin: 0 auto;
  padding-top: 40px;
}
.deposit_wrap .agree_wrap > ul > li {
  overflow: hidden;
  margin-top: 15px;
  padding-left: 10px;
}
.deposit_wrap .agree_wrap > ul > li:first-child {
  margin-top: 0;
}
.deposit_wrap .agree_wrap > ul > li > p {
  margin-top: 5px;
  width: 350px;
  color: var(--text-primary);
}
.deposit_wrap .agree_wrap > ul > li > div label {
  height: 20px;
  padding-left: 30px;
  background: url(/r/front/img/mypage/ico_checkbox.png) left 0 no-repeat;
  color: var(--text-primary);
  cursor: pointer;
}
.deposit_wrap .agree_wrap > ul > li > div label.checked {
  background-position: left -59px;
}
.deposit_wrap .agree_wrap > div {
  width: 420px;
  margin: 0 auto;
  padding-top: 15px;
  border-bottom: 2px solid var(--border-light);
}
.deposit_wrap .agree_wrap > div p.title {
  position: relative;
  width: 153px;
  padding-left: 55px;
  background: url(/r/front/img/template1/member/icons_modify.png) 0 -146px
    no-repeat;
  color: var(--text-grey);
}
.deposit_wrap .agree_wrap > div input {
  width: 200px;
  margin-top: 10px;
}
.deposit_wrap .agree_wrap > div input::-webkit-input-placeholder {
  color: var(--text-grey);
}
.deposit_wrap .agree_wrap > div input:-ms-input-placeholder {
  color: var(--text-grey);
}

#contents {
  margin-top: 10px;
  border: 1px solid var(--border-dark);
}
#contents p {
  color: var(--text-primary);
}

.cf-stream-menu-container {
  display: none;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  background-color: var(--bg-secondary);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.slider:before {
  position: absolute;
  left: 4px;
  bottom: 6px;
  width: 35px;
  height: 26px;
  content: "";
  background-color: var(--white);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.checked {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-primary);
  font-weight: bold;
  letter-spacing: 1px;
}

.setting_button_area {
  color: var(--text-primary);
  font-weight: bold;
}

.templat .content_body_templat1 {
  width: 100%;
  height: 365px;
  overflow-y: auto;
}
.templat .content_body_templat1 .win_area {
  width: 250px;
  margin: 0 auto;
  text-align: center;
}
.templat .content_body_templat1 .win_area .team_box > div {
  max-width: 100%;
  height: 180px;
  border: 1px solid var(--white);
}
.templat .content_body_templat1 .win_area .team_box {
  margin-bottom: 50px;
}
.templat .content_body_templat1 .rank_area {
  width: 100%;
  overflow-y: auto;
}
.templat .content_body_templat1 .rank_area ul {
  overflow: hidden;
  width: 600px;
}
.templat .content_body_templat1 .rank_area ul li {
  width: 150px;
  box-sizing: border-box;
  text-align: center;
}
.templat .content_body_templat1 .rank_area ul li .team_box {
  width: 90%;
  margin: 0 0 30px;
}
.templat .content_body_templat1 .rank_area .team_box {
  margin-bottom: 70px;
}
.templat .content_body_templat1 button {
  width: 400px;
  height: 80px;
  border-radius: var(--btn-radius);
  background-color: var(--orange);
  color: var(--text-secondary);
  font-size: 40px;
}

.templat .content_body_templat2 {
  width: 100%;
  height: 220px;
  overflow-y: auto;
}
.templat .content_body_templat2 .win_area {
  width: 250px;
  margin: 0 auto;
  text-align: center;
}
.templat .content_body_templat2 .win_area .team_box > div {
  max-width: 100%;
  height: 180px;
  border: 1px solid var(--white);
}
.templat .content_body_templat2 .win_area .team_box {
  margin-bottom: 50px;
}
.templat .content_body_templat2 .rank_area {
  width: 100%;
  overflow-y: auto;
}
.templat .content_body_templat2 .rank_area ul {
  overflow: hidden;
  width: 600px;
}
.templat .content_body_templat2 .rank_area ul li {
  width: 150px;
  box-sizing: border-box;
  text-align: center;
}
.templat .content_body_templat2 .rank_area ul li .team_box {
  width: 90%;
  margin: 0 0 30px;
}
.templat .content_body_templat2 .rank_area .team_box {
  margin-bottom: 70px;
}
.templat .content_body_templat2 button {
  width: 400px;
  height: 80px;
  border-radius: var(--btn-radius);
  background-color: var(--orange);
  color: var(--text-secondary);
  font-size: 40px;
}

.templat .team_box > div {
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid var(--white);
  box-sizing: border-box;
}
.templat .team_box > div > img {
  max-width: 100%;
  max-height: 100%;
}
.templat .content_footer {
  padding-bottom: 400px;
}
.templat select {
  width: 100%;
}

#powerBall_link {
  display: none;
  position: absolute;
  top: -30px;
  right: 30px;
  text-align: center;
}
#powerBall_link .text {
  width: 100px;
  padding-top: 5px;
  border: 1px solid var(--main-color);
  border-radius: var(--btn-radius);
  background-color: var(--main-color);
  color: var(--text-primary);
  font-weight: bold;
}
#powerBall_link:hover .text {
  border: 1px solid var(--main-color);
  background-color: var(--bg-primary);
  color: var(--main-color);
  font-weight: bold;
}

.inspection {
  margin-top: 30px;
  text-align: center;
  color: var(--main-color);
  font-size: 45px;
  font-weight: bold;
}

#pageReload {
  display: none;
  padding: 5px 10px;
  border-radius: var(--btn-radius);
  background-color: var(--main-color);
  color: var(--text-secondary);
}
button[simpleid="pageReload"] {
  display: none;
  padding: 5px 10px;
  border-radius: var(--btn-radius);
  background-color: var(--main-color);
  color: var(--text-secondary) !important;
}

#pageCopyDep {
  display: none;
  padding: 5px 10px;
  border-radius: var(--btn-radius);
  background-color: var(--main-color);
  color: var(--text-secondary);
}
button[simpleid="pageCopyDep"] {
  display: none;
  padding: 5px 10px;
  border-radius: var(--btn-radius);
  background-color: var(--main-color);
  color: var(--text-secondary) !important;
}

.btnMoveGame {
  display: block;
  width: 500px;
  margin: 0 auto;
  border: 1px solid var(--btn-primary-border);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text) !important;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
.btnMoveGame:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}

/*LNB*/
.header_mypage {
  width: 100%;
  height: 220px;
  background-color: var(--bg-dark-grey);
}
.header_mypage .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 30px 0;
}
.header_mypage .clearfix:after {
  display: none;
}
.header_mypage_left {
  position: relative;
  width: 495px;
}
.header_mypage_right {
  position: relative;
  display: flex;
  justify-content: flex-end;
}
.header_mypage_level {
  display: flex;
  align-items: center;
  gap: 5px;
}
.header_mypage_left h1 {
  color: var(--main-color);
  font-size: 40px;
}
.header_mypage_left h1 span {
  padding-left: 5px;
  color: var(--text-primary);
  font-size: 16px;
}
.header_mypage_left h1 span#theme_lnb_username {
  color: var(--subMain-color);
  font-size: 35px;
}
.header_mypage_level img {
  width: 51px;
  height: 50px;
  margin-right: 15px;
}
.header_mypage_level .level_label {
  display: block;
  color: var(--text-primary);
}
.header_mypage_level .level_value {
  display: block;
  color: var(--text-primary);
  font-size: 26px;
}
.wallet_wrapper {
  width: 250px;
  height: 100px;
  padding: 20px 15px 10px;
  border-radius: var(--btn-radius);
  border: 1px solid var(--border-light);
  overflow: hidden;
  background-color: var(--bg-primary);
}
.wallet_wrapper .wallet_label {
  display: block;
  color: var(--text-grey);
}
.wallet_wrapper .wallet_value {
  padding-top: 45px;
  color: var(--red);
  font-size: 22px;
  font-weight: bold;
}
.wallet_wrapper .wallet_value span#theme_lnb_real_amount {
  font-size: 24px;
  font-weight: bold;
}
.wallet_wrapper .wallet_value span {
  font-size: 16px;
}
.board_wrapper {
  border-radius: var(--btn-radius);
  overflow: hidden;
}
.board_wrapper:nth-child(odd) {
  width: 250px;
  padding: 0 15px;
  border-left: none;
  background-color: var(--bg-primary);
}
.board_wrapper:nth-child(even) {
  width: 250px;
  padding: 0 15px;
  margin-left: -5px;
  border-left: none;
  background-color: #191919;
  border: 1px solid var(--border-light);
}
.board_wrapper .board_label {
  display: block;
  margin-top: 10px;
  color: var(--text-grey);
}
.board_wrapper h3 {
  display: block;
  margin-top: 5px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: bold;
}
.mypage_cont .lnb_wrap {
  width: 200px;
  margin-left: 10px;
  border-radius: var(--btn-radius);
  overflow: hidden;
}
.mypage_cont .lnb_wrap .top {
  width: 100%;
  padding: 30px 20px;
  box-sizing: border-box;
  text-align: left;
  background-color: var(--bg-dark-grey);
}
.mypage_cont .lnb_wrap .top > a {
  padding-top: 0;
  background: none;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: bold;
}
.mypage_cont .lnb_wrap .lnb > li {
  position: relative;
  background-color: var(--bg-dark-grey);
}
.wrapper .mypage_cont .lnb_wrap .top > a {
  background: none;
}
.wrapper .mypage_cont .lnb_wrap .lnb {
  padding: 20px;
  background-color: var(--bg-dark-grey);
}
.wrapper .mypage_cont .lnb_wrap .lnb > li > a {
  position: relative;
  display: block;
  width: 100%;
  padding: 5px;
  border-left: none;
  background: url(/r/theme/center_logo/img/pc/arrow_down.png) 147px 14px
    no-repeat;
  color: var(--text-primary);
  font-size: 16px;
  cursor: pointer;
}
.wrapper .mypage_cont .lnb_wrap .lnb > li > a:hover {
  border-left: none;
  background-position: 147px 14px;
  color: var(--main-color);
}
.wrapper .mypage_cont .lnb_wrap .lnb > li > span {
  display: none;
  position: absolute;
  top: 14px;
  right: 0;
  width: 13px;
  height: 13px;
  font-size: 0;
  background: url(/r/theme/center_logo/img/pc/arrow_up.png) 0 0 no-repeat;
  z-index: 10;
}
.wrapper .mypage_cont .lnb_wrap .lnb > li.on > a {
  border-left: none;
  background-position: 165px -100px;
  color: var(--main-color);
  font-weight: bold;
}
.wrapper .mypage_cont .lnb_wrap .lnb > li.on > span {
  display: block;
}
.wrapper .mypage_cont .lnb_wrap .lnb > li.no_bg > a {
  background: none;
}
.wrapper .mypage_cont .lnb_wrap .lnb > li .dep2 {
  position: relative;
  top: 0;
  display: none;
  margin-bottom: 15px;
  background-color: var(--bg-dark-grey);
}
.wrapper .mypage_cont .lnb_wrap .lnb > li .dep2 > ul > li > a {
  display: block;
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  background: none;
  color: var(--text-primary);
  cursor: pointer;
}
.wrapper .mypage_cont .lnb_wrap .lnb > li .dep2 > ul > li > a:hover {
  background-position: 26px -24px;
  color: var(--main-color);
}
.wrapper .mypage_cont .lnb_wrap .lnb > li .dep2 > ul > li > a.on {
  background-position: 26px -24px;
  color: var(--main-color);
}
.wrapper .mypage_cont .lnb_wrap .bottom {
  padding: 20px;
  border-top: 1px solid var(--border-light);
  background-color: var(--bg-dark-grey);
}
.wrapper .mypage_cont .lnb_wrap .bottom h4,
.wrapper .mypage_cont .lnb_wrap .bottom h4 a {
  margin: 0 0 10px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: bold;
}
.wrapper .mypage_cont .lnb_wrap .bottom p,
.wrapper .mypage_cont .lnb_wrap .bottom p a {
  margin: 0 0 10px;
  color: var(--text-grey);
}
.wrapper .mypage_cont .lnb_wrap .bottom ul {
  margin-left: 20px;
}
.wrapper .mypage_cont .lnb_wrap .bottom ul li,
.wrapper .mypage_cont .lnb_wrap .bottom ul li a {
  margin: 0 0 5px;
  color: var(--main-color);
  font-size: 16px;
  list-style-type: disc;
}

/*CS COMMON*/
/*CS_CENTER*/
.cs_section.bg_none {
  background: none;
}
.cs_section .cs_vis {
  position: relative;
}
.cs_section .cs_vis #btnInquiry {
  display: inline-block;
  position: absolute;
  top: 125px;
  right: 383px;
  width: 300px;
}
.cs_section .cs_vis .img_cs_vis {
  position: relative;
  left: 50%;
  width: 1900px;
  height: 260px;
  margin-left: -950px;
  background: url(/r/front/img/comm/cs_visual_v3.png) no-repeat;
}
.cs_section .cs_con_new {
  width: 100%;
  max-width: 1380px;
  margin: auto;
  padding: 40px 0;
}
.cs_section .cs_con_new .cs_service {
  width: 100%;
  margin: 0 auto;
  padding-top: 10px;
}
.cs_section .cs_con_new .cs_service .cs_list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cs_section .cs_con_new .cs_service .cs_list > li {
  flex: 1 1 calc(25% - 30px);
  padding: var(--btn-padding);
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  background: var(--bg-secondary)
    url(/r/front/img/site_seq/imperial/cs_new_list_icon.png) 0 0 no-repeat;
}
.cs_section .cs_con_new .cs_service .cs_list > li .top {
  position: relative;
  height: 57px;
  padding: 15px 0 0 15px;
  border-radius: var(--btn-radius);
}
.cs_section .cs_con_new .cs_service .cs_list > li .top h4 {
  position: relative;
  padding: 0 0 0 20px;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: bold;
}
.cs_section .cs_con_new .cs_service .cs_list > li .top h4:after {
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 24px;
  content: "";
  border-radius: var(--btn-radius);
  background-color: var(--main-color);
}
.cs_section .cs_con_new .cs_service .cs_list > li .top a {
  display: block;
  position: absolute;
  top: 22px;
  right: 15px;
  color: var(--text-grey);
  text-decoration: underline;
  cursor: pointer;
}
.cs_section .cs_con_new .cs_service .cs_list > li .top a:hover {
  color: var(--text-primary);
}
.cs_section .cs_con_new .cs_service .cs_list > li > p {
  margin-top: 20px;
  text-align: center;
  color: var(--text-primary);
}
.cs_section .svg-container {
  display: flex;
  width: 80px;
  height: 80px;
  margin: auto;
  color: var(--main-color);
}
.cs_section .cs_con_new .cs_service .cs_list > li.cs1 {
  background: none;
  background-color: var(--bg-primary);
}
.cs_section .cs_con_new .cs_service .cs_list > li.cs2 {
  background: none;
  background-color: var(--bg-primary);
}
.cs_section .cs_con_new .cs_service .cs_list > li.cs3 {
  background: none;
  background-color: var(--bg-primary);
}
.cs_section .cs_con_new .cs_service .cs_list > li.cs4 {
  margin-top: 0;
  background-position: 50% -593px;
}
.cs_section .cs_con_new .cs_service .cs_list > li.cs5 {
  background: none;
  background-color: var(--bg-primary);
}
.cs_section .cs_con_new .cs_service .cs_list > li.cs6 {
  background-position: 50% -1251px;
}
.cs_section .cs_con_new .cs_service .cs_list > li.cs7 {
  position: relative;
  width: 100%;
  height: 180px;
  padding: 10px 30px;
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  background: none;
  background-color: var(--bg-primary);
}
.cs_section .cs_con_new .cs_service .cs_list > li.cs7 .txt1 {
  color: var(--text-primary);
  font-size: 16px;
}
.cs_section .cs_con_new .cs_service .cs_list > li.cs7 .txt2 {
  margin-top: 5px;
  color: var(--main-color);
  font-size: 20px;
  font-weight: bold;
}
.cs_section .cs_con_new .cs_service .cs_list > li.cs7 .txt3 {
  margin-top: 10px;
  color: var(--text-primary);
}
.cs_section .cs_con_new .cs_service .cs_list > li.cs7 .tel {
  margin-top: 15px;
  color: var(--main-color);
  font-size: 22px;
}
.cs_section .cs_con_new .cs_service .cs_list > li.cs7 .r_img {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 440px;
  height: 180px;
  border-radius: var(--btn-radius);
  background: url(/r/front/img/site_seq/imperial/cs_new_tel.png) no-repeat;
  background-position: top;
}
.cs_section .cs_con_new .cs_service .cs_list > li.cs7 .r_img a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/*cs_board*/
.cs_section .cs_con_new .cs_board {
  display: flex;
  gap: 10px;
  width: 100%;
  margin: 0 auto;
  margin-top: 10px; /*padding:0 5px;*/
  overflow: hidden;
}
.cs_section .cs_con_new .cs_board .board_box {
  width: 100%;
  height: 420px;
  padding: var(--btn-padding);
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  overflow: hidden;
  background-color: var(--bg-primary);
}
.cs_section .cs_con_new .cs_board .board_box .top {
  position: relative;
  height: 57px;
  padding: 15px 0 0 15px;
  border-bottom: 1px solid var(--border-light);
  border-radius: 8px 8px 0 0;
}
.cs_section .cs_con_new .cs_board .board_box .top h4 {
  position: relative;
  padding: 0 0 0 20px;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: bold;
}
.cs_section .cs_con_new .cs_board .board_box .top h4:after {
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 25px;
  content: "";
  border-radius: var(--btn-radius);
  background-color: var(--main-color);
}
.cs_section .cs_con_new .cs_board .board_box .top a {
  display: block;
  position: absolute;
  top: 12px;
  right: 15px;
  width: auto;
  padding: 5px 20px 5px 15px;
  border: 1px solid var(--border-dark);
  border-radius: var(--btn-radius);
  color: var(--text-primary);
  cursor: pointer;
}
.cs_section .cs_con_new .cs_board .board_box .top a:after {
  position: absolute;
  top: 12px;
  right: 10px;
  width: 0;
  height: 0;
  content: "";
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid var(--border-dark);
}
.cs_section .cs_con_new .cs_board .board_box .top a:hover {
  border: 1px solid var(--border-dark);
  color: var(--text-primary);
}
.cs_section .cs_con_new .cs_board .board_box .top a:hover:after {
  border-left: 4px solid var(--main-color);
}
.cs_section .cs_con_new .cs_board .board_box .bot {
  padding: 0 20px;
  border-radius: 0 0 10px 10px;
}

.cs_cont .cs_top {
  width: 100%;
  margin: 0 auto;
}
.cs_cont .cs_top .greeting {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 50px auto 20px auto;
  text-align: center;
}
.cs_cont .cs_top .greeting h3 {
  margin: 40px;
  color: var(--text-primary);
  font-size: 30px;
  font-weight: bold;
}
.cs_cont .cs_top .greeting .search_faq {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  padding: 50px 0;
  overflow: hidden;
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
}
.cs_cont .cs_top .greeting .search_faq .search_word {
  width: 250px;
  margin: 0 -5px 0 10px;
  padding-left: 10px;
  border: 1px solid var(--border-dark) !important;
  border-color: var(--border-light);
  border-width: 1px 0 1px 1px;
  border-radius: 5px 0 0 5px !important;
  background-color: var(--white);
  color: var(--text-secondary);
  font-size: 16px;
}
.cs_cont .cs_top .greeting .search_faq .bt_search {
  display: block;
  width: 100px;
  height: 18px;
  margin-left: 5px;
  padding: 10px 0 10px 0;
  border-width: 1px 1px 1px 0;
  border: 1px solid var(--btn-primary-border);
  border-radius: 0 5px 5px 0;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  cursor: pointer;
}
.cs_cont .cs_top .greeting .search_faq .bt_search:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}
.cs_cont .cs_top .greeting > p {
  margin-top: 5px;
  color: var(--text-primary);
}
.cs_cont .cs_top .greeting > p em {
  color: var(--main-color);
}
.cs_cont .cs_bot {
  padding: 40px 0 80px;
}
.cs_cont .cs_bot .inbox {
  width: 100% !important;
  margin: 20px auto;
  box-sizing: border-box;
}
.cs_cont .cs_bot .inbox img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.cs_cont .cs_bot h4 {
  text-align: center;
  border: 1px solid var(--border-dark);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 30px;
}
.cs_cont .cs_bot .tab_board_wrap {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}
.cs_cont .cs_bot .my_board td.title {
  position: relative;
}
.cs_cont .cs_bot .my_board td.title .txt_q {
  color: var(--text-grey);
  cursor: pointer;
}
.cs_cont .cs_bot .my_board td.title .txt_q:hover {
  color: var(--text-primary);
}
.cs_cont .cs_bot .my_board .on td.title .txt_q {
  color: var(--text-primary);
}
.cs_cont .cs_bot .my_board td.title em.edge {
  position: absolute;
  top: 18px;
  right: 21px;
  display: block;
  width: 16px;
  height: 10px;
  background: url(/r/front/img/mypage/ico_select_arrow.png) 0 bottom no-repeat;
}
.cs_cont .cs_bot .my_board .on td.title em.edge {
  background: url(/r/front/img/mypage/ico_select_arrow.png) 0 top no-repeat;
}
.cs_cont .cs_bot .my_board td .liner {
  left: -287px !important;
  width: 1380px !important;
}
.cs_cont .cs_bot .faq_ban {
  position: relative;
  margin-top: 50px;
}
.cs_cont .cs_bot .faq_ban > a {
  display: block;
  position: absolute;
  top: 50px;
  right: 63px;
  width: 280px;
  text-align: center;
  border: 1px solid var(--border-dark);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 24px;
  font-weight: bold;
}
.title_bottom_line {
  display: block;
  position: absolute;
  top: 43px;
  left: -174px;
  width: 1140px;
  height: 1px;
  background-color: var(--bg-secondary);
}
.tabc_guide {
  width: 100%;
  margin: auto;
}

.mini_board {
  width: 100%;
}
.mini_board thead th {
  padding: 20px 5px 10px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  font-weight: bold;
}
.mini_board thead th:nth-child(1) {
  text-align: center;
}
.mini_board thead th:nth-child(3) {
  text-align: right;
}
.mini_board tbody td {
  min-width: 60px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-light);
  text-align: center;
  color: var(--text-primary);
}
.mini_board .title {
  text-align: left;
}
.mini_board .title_link {
  display: block;
  padding: 0 5px;
  text-align: left;
  color: var(--text-primary);
}
.mini_board .title_link span[notice] {
  display: inline-block;
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.mini_board .date {
  text-align: right;
  color: var(--text-grey);
}
.mini_board .flag_yellow {
  display: inline-block;
  margin-left: 10px;
  padding: 0 5px;
  border: 1px solid var(--btn-primary-border);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  cursor: pointer;
}
.mini_board .flag_yellow:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}
.mini_board .important_notice span {
  display: inline-block;
  width: auto;
  min-width: 55px;
  padding: 2px;
  text-align: center;
  border-radius: var(--btn-radius);
  background-color: var(--red);
  color: var(--text-primary);
}
.mini_board thead td {
  color: var(--text-primary);
  border-color: var(--border-light);
}
#noticeList .important_notice {
  text-align: center;
}

/* COMPANY INFO */
.cs_cont {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  overflow: hidden;
}
.cs_cont img {
  max-width: 100%;
}

/* CS_NOTICE */

/*CS_FAQ*/
/*게시판 Notice Board*/
.my_board {
  width: 100%;
}
.my_board thead th {
  position: relative;
  padding: 20px 0;
  border: 1px solid var(--border-light);
  border-width: 2px 0 2px 0;
  color: var(--text-grey);
  font-weight: bold;
  text-align: center;
}
.my_board thead td {
  border-color: var(--border-light);
  background-color: var(--bg-primary);
  color: var(--text-primary);
}
.my_board tbody td {
  padding: 15px 0;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  text-align: center;
  vertical-align: top;
}
.my_board tbody td[colspan="6"] {
  text-align: center;
  color: var(--text-grey);
}
.my_board tbody td.title {
  color: var(--text-primary);
  text-align: left;
}
.my_board tbody td.title a {
  color: var(--text-primary);
}
.my_board tbody td.title em {
  color: var(--main-color);
  font-weight: bold;
}
.my_board tbody td.title > .answer {
  display: none;
  position: relative;
  padding: 20px 0 15px 20px;
  color: var(--text-grey);
}
.my_board tbody td.title > .answer a {
  text-decoration: underline;
}
.my_board tbody td.title > .answer.myNotice a {
  display: block;
  min-width: 100px;
  width: fit-content;
  margin: 10px 0;
  padding: 10px 20px;
  border: 1px solid var(--white);
  border-radius: var(--btn-radius);
  color: var(--text-primary);
  text-align: center;
  text-decoration: none;
}
.my_board tbody td.title > .answer p {
  color: var(--text-primary);
}
.my_board tbody td.title > .answer pre {
  white-space: pre-wrap;
  color: var(--text-primary);
}
.my_board tbody td.title > .answer em {
  color: var(--main-color);
}
.my_board tbody td.title > .answer > span.liner {
  display: block;
  position: absolute;
  top: 0;
  left: -278px;
  width: 1300px;
  height: 1px;
  background-color: var(--bg-dark-grey);
}
.my_board tbody td.id {
  color: var(--text-primary);
}
.my_board tbody td.bonus {
  padding: 15px 20px 15px 0;
  color: var(--text-primary);
  text-align: right;
}
.my_board tbody td.location_path {
  padding: 15px 0;
  text-align: left;
}
.my_board tbody tr {
  background-color: var(--bg-primary);
}
.my_board tbody tr.on {
  background-color: #1a1a1a;
}
.my_board tbody tr.on.rate {
  height: 70px;
}
.my_board tbody tr.on .stat_read {
  color: var(--text-primary);
}
.my_board tbody tr.on .txt_q {
  color: var(--text-primary);
}
.my_board tbody tr.not_read .stat_read {
  color: var(--text-primary);
}
.my_board tbody tr.not_read .txt_q {
  color: var(--text-primary);
}
.my_board tbody tr.readed .stat_read {
  color: var(--text-grey);
}
.my_board tbody tr.readed .txt_q {
  color: var(--text-grey);
}
.my_board tbody tr:hover {
  background-color: #1a1a1a;
  color: var(--btn-primary-hover-text);
}
.my_board .txt_q {
  color: var(--text-primary);
  font-size: 16px;
}
.my_board .txt_q em {
  color: var(--main-color);
  font-weight: bold;
}
.my_board .txt_q .badge-new {
  display: inline-block;
  position: relative;
  top: -1px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background-color: var(--red);
  color: var(--white);
  font-weight: bold;
  text-align: center;
}
.my_board .re_fin {
  color: var(--main-color);
}
.my_board .flag_red {
  display: inline-block;
  padding: 5px 10px;
  border-radius: var(--btn-radius);
  background-color: var(--red);
  color: var(--text-primary);
  font-weight: bold;
}
.my_board .flag_yellow {
  display: inline-block;
  margin-left: 10px;
  padding: 0 5px;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  cursor: pointer;
}
.my_board .flag_yellow:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}
.my_board .bt_send {
  display: inline-block;
  width: 80px;
  border: 1px solid var(--main-color);
  border-radius: var(--btn-radius);
  background-color: var(--bg-secondary);
  color: var(--main-color);
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
.my_board .bt_send:hover {
  border: 1px solid var(--btn-primary-border);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

/*CS_GUIDE*/
#flexDepth1Tab {
  position: relative;
  width: 100%;
  height: 52px;
  margin: 0 auto;
  overflow: hidden;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.tab_guide_wrap {
  display: flex;
  width: 100%;
  overflow: hidden;
}
.tab_guide_wrap .search_area {
  border-radius: var(--btn-radius);
  background-color: var(--bg-dark-grey);
}
.tab_guide_wrap .tab_guide_arrow {
  display: flex;
}
.tab_guide_wrap .tab_guide_arrow .prev {
  width: 35px;
  border: 2px solid var(--border-light);
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
}
.tab_guide_wrap .tab_guide_arrow .prev span {
  display: block;
  padding-top: 10px;
  color: var(--text-input);
  font-size: 16px;
  text-align: center;
}
.tab_guide_wrap .tab_guide_arrow .next {
  width: 35px;
  border: 2px solid var(--white);
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
}
.tab_guide_wrap .tab_guide_arrow .next span {
  display: block;
  padding-top: 10px;
  color: var(--text-primary);
  font-size: 16px;
  text-align: center;
}
.tabm_guide {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.tabm_guide.js-tabm-comm {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 50px;
  font-size: 0;
  border-radius: var(--btn-radius);
  background: transparent;
  overflow: hidden;
}
.tabm_guide::after {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  background-color: var(--white);
  z-index: 0;
}
.tabm_guide > li {
  position: relative;
  width: 120px;
  margin-left: 2px;
  padding: 15px;
  box-sizing: border-box;
  color: var(--text-primary);
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  background-color: var(--bg-dark-grey);
  cursor: pointer;
}
.tabm_guide > li:first-child {
  margin-left: 0;
}
.tabm_guide > li.on {
  z-index: 1;
  border: 1px solid var(--btn-primary-border);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.tabm_guide > li:hover {
  z-index: 1;
}
.tabm_guide > li > a {
  display: block;
  white-space: nowrap;
  color: var(--text-primary);
  font-weight: bold;
}
.tabm_guide > li.on > a {
  color: var(--text-secondary);
}
.tabm_guide_2dep {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
  padding: 10px 0;
  overflow: hidden;
  border-radius: var(--btn-radius);
  background-color: var(--bg-dark-grey);
  border-top: none;
}
.tabm_guide_2dep > li {
  width: 100%;
  margin: 5px 0 5px 0;
  box-sizing: border-box;
  border-right: 1px solid var(--border-light);
  color: var(--text-grey);
  font-size: 16px;
  text-align: center;
  cursor: pointer;
}
.tabm_guide_2dep > li > a {
  display: block;
  color: var(--text-grey);
  cursor: pointer;
}
.tabm_guide_2dep > li:first-child {
  margin-left: 0;
}
.tabm_guide_2dep > li:nth-child(7) {
  margin-left: 0;
}
.tabm_guide_2dep > li:nth-child(13) {
  margin-left: 0;
}
.tabm_guide_2dep > li.on {
  color: var(--text-primary);
}
.tabm_guide_2dep > li.on a {
  color: var(--main-color) !important;
}
.tabm_guide_2dep > li:hover {
  color: var(--text-primary);
}
.tabm_guide_2dep > li:nth-child(5n) {
  border-right: none;
}
.tabm_guide_3dep {
  width: 100%;
  min-height: 60px;
  padding: 10px 0;
  text-align: center;
}
.tabm_guide_3dep > li {
  display: inline-block;
  width: auto;
  margin: 5px 0;
  padding: 0 10px;
  border-left: 1px solid var(--border-dark);
  color: var(--text-primary);
  font-size: 16px;
  text-align: center;
}
.tabm_guide_3dep > li.virtual {
  width: 120px;
}
.tabm_guide_3dep > li:first-child {
  border-left: 0;
}
.tabm_guide_3dep > li a {
  color: var(--text-grey);
}
.tabm_guide_3dep > li.on a {
  color: var(--main-color);
}
.tabm_guide_3dep > li:hover a {
  color: var(--main-color);
}

/* MYPAGE COMMON*/
.greeting2 {
  position: relative;
  box-sizing: border-box;
  padding-bottom: 10px;
  text-align: left;
}
.greeting2 h3 {
  color: var(--text-primary);
  font-size: 28px;
  font-weight: bold;
}
.greeting2 > p {
  margin-top: 5px;
  color: var(--text-grey);
  font-weight: bold;
}
.greeting2 > p em {
  color: var(--main-color);
}
.greeting2 .bt_greet {
  display: block;
  position: absolute;
  top: 85px;
  left: 50%;
  margin-left: -70px;
  width: 140px;
  box-sizing: border-box;
  border: 2px solid var(--white);
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 16px;
  text-align: center;
  cursor: pointer;
}
.greeting2 .bt_greet:hover {
  border: 2px solid var(--btn-primary-border);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.mypage_cont .mybox.tab {
  border-radius: var(--btn-radius);
}
.mypage_cont .mybox {
  position: relative;
  padding: var(--btn-padding);
  box-sizing: border-box;
  border-radius: var(--btn-radius);
  background-color: var(--bg-dark-grey);
  font-weight: bold;
}
.mypage_cont .my_point_area .mybox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mypage_cont .mybox .tit {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: bold;
}
.mypage_cont .mybox .name {
  color: var(--text-grey);
  font-size: 16px;
  font-weight: bold;
}
.mypage_cont .mybox .name > em {
  color: var(--main-color);
  font-size: 30px;
  font-weight: bold;
}
.mypage_cont .mybox .info {
  margin-top: 20px;
}
.mypage_cont .mybox .info th {
  min-width: 75px;
  text-align: left;
  color: var(--text-grey);
  font-weight: bold;
}
.mypage_cont .mybox .info td {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}
.mypage_cont .mybox .btnbox {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.mypage_cont .mybox .btnbox.notkr {
  left: 50px;
}
.mypage_cont .mybox a:has(.alarm) {
  position: absolute;
  top: 0;
  right: 0;
}
.mypage_cont .mybox .alarm {
  position: absolute;
  top: 15px;
  right: 10px;
  display: block;
  width: 32px;
  height: 37px;
  background: url(/r/front/img/m/comm/header_ico_alrim.png) 0 0 no-repeat;
  background-size: 32px;
}
.mypage_cont .mybox .alarm > em {
  position: absolute;
  top: -8px;
  right: -10px;
  display: block;
  min-width: 24px;
  border-radius: var(--btn-radius);
  background-color: var(--main-color);
  text-align: center;
  color: var(--text-primary);
}
.mypage_cont .mybox .btnbox .bt_grey {
  width: 100%;
  padding: var(--btn-padding);
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  background-color: var(--bg-secondary);
  color: var(--text-grey);
  text-align: center;
  cursor: pointer;
}
.mypage_cont .mybox .btnbox .bt_grey:hover {
  border: 1px solid var(--border-dark);
  color: var(--text-grey);
}
.mypage_cont .mybox .btnbox .bt_yellow {
  width: 100%;
  padding: var(--btn-padding);
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  text-align: center;
  cursor: pointer;
}
.mypage_cont .mybox .btnbox .bt_yellow:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}
.mypage_cont .mybox .btnbox .bt_white {
  width: 100%;
  padding: var(--btn-padding);
  border: 1px solid var(--white);
  border-radius: var(--btn-radius);
  background-color: var(--white);
  color: var(--text-secondary);
  text-align: center;
  cursor: pointer;
}
.mypage_cont .mybox .btnbox .bt_white.single {
  width: 100px;
}
.mypage_cont .mybox .btnbox .bt_white:hover {
  border: 1px solid var(--white);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}
.mypage_cont .mybox .money {
  padding: 30px 30px 10px 0;
  color: var(--text-primary);
  font-size: 16px;
  text-align: right;
}
.mypage_cont .mybox .money > em {
  color: var(--main-color);
  font-size: 30px;
  font-weight: bold;
}
.mypage_cont .mybox .m_info {
  display: flex;
  width: 100%;
  padding: var(--btn-padding);
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  overflow: hidden;
}
.mypage_cont .mybox .m_info > li {
  width: 130px;
  flex: 1;
}
.mypage_cont .mybox .m_info > li:first-child {
  width: 133px;
  border-right: 1px solid var(--border-light);
}
.mypage_cont .mybox .m_info > li a {
  display: block;
}
.mypage_cont .mybox .m_info > li span {
  display: block;
  padding: 0 0 0 15px;
  color: var(--text-grey);
}
.mypage_cont .mybox .m_info > li p {
  display: block;
  padding: 0 0 0 15px;
  color: var(--text-primary);
}
.mypage_cont .mybox .friend {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
.mypage_cont .mybox .friend > em {
  color: var(--main-color);
  font-size: 30px;
  font-weight: bold;
}
.mypage_cont .mybox .coupon {
  width: 100%;
  padding: 35px 0 90px 0;
  background: url(/r/front/img/mypage/coupon.png) 50% bottom no-repeat;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
.mypage_cont .mybox .coupon > em {
  color: var(--main-color);
  font-size: 30px;
  font-weight: bold;
}

.design_sel {
  position: relative;
  width: 200px;
  height: 40px;
  margin-left: 0;
  border: 1px solid var(--border-dark);
  border-radius: var(--btn-radius);
  cursor: pointer;
  background: var(--white) url(/r/theme/center_logo/img/pc/arrow_down.png) 115px
    18px no-repeat;
}
.design_sel label {
  position: absolute;
  padding: 0 0 0 20px;
  color: var(--text-primary);
  font-size: 16px;
}
.design_sel select {
  width: 100%;
}
.design_sel select option {
  background-color: #222;
  color: #fff;
}

.design_sel2 {
  position: relative;
  cursor: pointer;
}
.design_sel2 select {
  margin-left: 30px;
}
.design_sel2 select option {
  background-color: #222;
  color: #fff;
}
.design_sel2.long {
  width: 600px;
}

.my_list_wrap .btn_row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  padding: 20px 0;
}
.my_list_wrap .search_area {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.my_list_wrap .search_area .left {
  display: flex;
  gap: 10px;
}
.my_list_wrap .search_area .left .type1 {
  margin-left: 0;
}
.my_list_wrap .search_area .left .design_sel label {
  padding: 0 0 0 15px;
}
.my_list_wrap .search_area .left > input {
  width: 200px;
  margin-right: 20px;
}
.my_list_wrap .search_area .left > input::webkit-input-placeholder {
  color: var(--text-grey);
}
.my_list_wrap .search_area .right {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 10px;
  width: 70%;
}
.my_list_wrap .search_area .right .date_pick {
  display: flex;
  align-items: center;
  gap: 10px;
}

.my_list_wrap {
  padding: 0 10px;
  border-radius: var(--btn-radius);
  background-color: var(--bg-dark-grey);
}
.my_list_wrap .my_list_top {
  position: relative;
  width: 100%;
  margin: 0 auto 10px auto;
  padding: 20px 0 0 0;
}
.my_list_wrap .my_list_top > p {
  color: var(--text-primary);
  font-size: 16px;
}
.my_list_wrap .my_list_top > p > em {
  color: var(--main-color);
}
.my_list_wrap .my_list_top .date_pick {
  display: flex;
  flex: 1;
  justify-content: end;
  align-items: center;
}
.my_list_wrap .my_list_cont {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 20px;
  overflow: hidden;
}
.my_list_wrap .my_list_cont a {
  font-size: 16px;
}
.my_list_wrap .my_list_cont .my_list {
  width: 100%;
  padding: 0 !important;
}
.my_list_wrap .my_list_cont .my_list thead th {
  position: relative;
  padding: 10px 0;
  border: 1px solid var(--border-light);
  border-width: 2px 0 2px 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  background-color: var(--bg-primary);
  color: var(--text-grey);
  font-weight: bold;
  white-space: nowrap;
}
.my_list_wrap .my_list_cont .my_list thead td {
  border-color: var(--border-light);
  background-color: var(--bg-primary);
  color: var(--text-primary);
}
.my_list_wrap .my_list_cont .my_list tbody td {
  padding: 15px 0;
  border-bottom: 1px solid var(--border-dark);
  border-color: var(--border-light);
  color: var(--text-grey);
  text-align: center;
}
.my_list_wrap .my_list_cont .my_list tbody td > strong {
  display: block;
  color: var(--text-primary);
}
.my_list_wrap .my_list_cont .my_list tbody td > em {
  display: block;
  padding: 0 30px 0 0;
  text-align: right;
  margin-bottom: 10px;
}
.my_list_wrap .my_list_cont .my_list tbody td > span {
  display: inline-block;
  width: 11px;
  height: 11px;
}
.my_list_wrap .my_list_cont .my_list tbody td > span.flag_ing {
  background-color: var(--main-color);
}
.my_list_wrap .my_list_cont .my_list tbody td > span.flag_del {
  background-color: var(--bg-dark-grey);
}
.my_list_wrap .my_list_cont .my_list tbody td > span.flag_fin {
  background-color: var(--green);
}
.my_list_wrap .my_list_cont .my_list tbody td > span.check-null {
  width: auto;
  height: auto;
}
.my_list_wrap .my_list_cont .my_list tbody td.pl80 {
  padding-left: 80px !important;
}
.my_list_wrap .my_list_cont .my_list tbody td.pr90 {
  padding-right: 90px !important;
}
.my_list_wrap .my_list_cont .my_list tbody .no_list td {
  width: 100% !important;
}
.my_list_cont tr .checkcontainer {
  background: transparent;
}

/* dropdown list */
.wrapper .jqx-fill-state-normal {
  border-color: #222;
  background-color: var(--bg-primary);
}
.wrapper .input {
  width: 90%;
}

/* 1:1문의 */
.tab_board_wrap {
  position: relative;
  width: 100%;
  margin: 25px auto 0;
  border-bottom: 2px solid var(--white);
}
.tab_menu_board {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
}
.tab_menu_board > li {
  width: 150px;
  margin-left: 0;
  padding: 15px;
  border-right: 1px solid var(--border-light);
  border-bottom: 0;
  box-sizing: border-box;
  background: transparent;
  color: var(--text-grey);
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}
.tab_menu_board > li.long {
  width: 150px;
}
.tab_menu_board > li:first-child {
  margin-left: 0;
}
.tab_menu_board > li.on {
  border: none;
  border-right: 1px solid var(--border-light);
  background-color: var(--main-color);
  color: var(--text-secondary);
}
.tab_menu_board > li > a {
  display: block;
}
.tab_board_contents > div {
  display: none;
}
.tab_board_contents > div.on {
  display: block;
}

.account_btns {
  width: 850px;
  margin: 20px 0;
  text-align: center;
}
.account_btns a.bt_enter {
  min-width: 140px;
  padding: 10px 30px;
  box-sizing: border-box;
  border: 2px solid var(--main-color);
  border-radius: var(--btn-radius);
  background-color: var(--main-color);
  color: var(--text-secondary);
  font-size: 16px;
  text-align: center;
  cursor: pointer;
}
.account_btns a.bt_enter:hover {
  border: 2px solid var(--main-color);
  background: transparent;
  color: var(--main-color);
}

/* MYPAGE COMMON - END*/
/* MYPAGE */
.mypage_cont .infobox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}
.mypage_cont .infobox > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  position: relative;
}
.mypage_cont .infobox > div.info01 {
  flex: 1;
  border: 1px solid var(--border-light);
  background-color: var(--bg-primary);
}
.mypage_cont .infobox > div.info02 {
  flex: 1;
  border: 1px solid var(--border-light);
  background-color: var(--bg-primary);
}
.mypage_cont .infobox > div.info03 {
  flex: 1;
  min-width: 120px;
  max-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mypage_cont .infobox > div.info04 {
  flex: 1;
  max-width: 200px;
  border: 1px solid var(--border-light);
  background-color: var(--bg-primary);
}
.mypage_cont .info03 .mybox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.mypage_cont .mybox.small {
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-light);
  background-color: var(--bg-primary);
}
.mypage_cont .mybox.small .tit {
  text-align: center;
}
.mypage_cont h4 {
  width: 100%;
  padding: 0 0 0 50px;
  border: 1px solid var(--border-light);
  box-sizing: border-box;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 20px;
}
.mypage_cont .mybox .info td.level_name img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

/* levelbox */
.levelbox {
  margin: 10px 0 0 0;
}
.levelbox .mybox {
  border: 1px solid var(--border-light);
  background-color: var(--bg-primary);
}
.levelbox .btn_check_progress {
  width: 100px;
  margin: 0 0 0 10px;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  text-align: center;
  cursor: pointer;
}
.levelbox .btn_check_progress:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}
.levelbox .lvl_img {
  width: 25px;
  height: 25px;
}
.levelbox .currentLevel {
  color: #ddd;
}
.levelbox .nextLevel {
  color: #ccc;
}
.cont_title {
  position: relative;
  margin: 30px 0 0;
  color: var(--text-grey);
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 8px;
}
.progress_wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 80%;
  margin: 35px auto 0;
}
.progress {
  position: relative;
  height: 20px;
  margin-bottom: 8px;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  background-color: var(--white);
}
.progress h2 {
  position: absolute;
  top: 50%;
  left: 20px;
  margin-top: -10px;
  color: var(--text-secondary);
  font-weight: bold;
}
.progress p {
  position: absolute;
  top: 50%;
  left: 20px;
  margin-top: -10px;
  color: var(--text-secondary);
}
.progress h5 {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -10px;
  color: var(--text-secondary);
  font-weight: bold;
}
.progress h5 em {
  font-weight: bold;
}
.progress span {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--btn-radius);
  background-color: var(--main-color);
}

/*masking*/
.mypage_cont .mybox .masking {
  position: absolute;
  top: 15px;
  right: 60px;
  display: block;
  width: 37px;
  height: 37px;
  cursor: pointer;
  background: url(/r/front/img/mypage/w_eva_eye-off-outline.png) 0 0 no-repeat;
  background-size: 37px;
}
.mypage_cont .mybox .masking.active {
  background: url(/r/front/img/mypage/w_ic_baseline-remove-red-eye.png) 0 0
    no-repeat;
  background-size: 37px;
}

.masking_popup_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1002;
  background: rgba(0, 0, 0, 0.5);
}
.masking_popup_bg .txt_type_layer {
  position: absolute;
  top: 306px;
  margin-left: -200px;
  z-index: 1004;
}
.masking_popup_bg .txt_type_layer .txt {
  width: 80%;
  margin: auto;
}
.masking_popup_bg .txt_type_layer .layerbot_btn {
  margin-top: 30px;
}

.txt_type_layer .inbox .masking_input {
  width: 250px;
  padding-left: 5px;
  border: 1px solid rgb(197, 197, 197);
  border-radius: var(--btn-radius);
  background-color: var(--white);
}
.txt_type_layer .inbox .masking_radio {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin: 15px auto;
}
.txt_type_layer .inbox .masking_radio input[type="radio"] {
  accent-color: var(--main-color);
}
.txt_type_layer .inbox .masking_radio .unmasked_icon {
  width: 25px;
  height: 25px;
  margin: 0 5px 0 0;
  background: url(/r/front/img/mypage/ic_outline-remove-red-eye.png) 0 0
    no-repeat;
  background-size: contain;
}
.txt_type_layer .inbox .masking_radio .masked_icon {
  width: 25px;
  height: 25px;
  margin: 0 5px 0 0;
  background: url(/r/front/img/mypage/eva_eye-off-outline.png) 0 0 no-repeat;
  background-size: contain;
}
.txt_type_layer .inbox .masking_radio label {
  margin-right: 20px;
}
.txt_type_layer .inbox .masking_checkbox {
  margin: 30px 0;
}

/* MYPAGE - ACCOUNT */
.account_info {
  width: 880px;
  margin: 0 auto;
  overflow: hidden;
}
.account_info .info01 {
  width: 100%;
  border-radius: 0 12px 12px;
}
.account_info .info01 > table {
  width: 100%;
  margin: 20px auto;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.account_info .info01 > table th {
  width: 80px;
  padding: 15px 40px 15px 15px;
  border-top: none;
  border-bottom: none;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  text-align: left;
  white-space: nowrap;
}
.account_info .info01 > table td p {
  width: 90%;
  min-height: 40px;
  height: auto;
  margin-left: 30px;
  border: 1px solid var(--border-dark);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  background-color: var(--white);
  color: var(--text-grey);
  font-size: 16px;
}
.account_info .info01 > table td #bank_alias {
  width: 70%;
}
.account_info .info01 > table td #bank_name {
  width: 90%;
  margin: 0 0 0 30px;
  box-sizing: border-box;
  background-color: var(--white);
  color: var(--text-secondary);
  font-size: 16px;
}
.account_info .info01 > table td #coin_type_code {
  width: 90%;
  box-sizing: border-box;
  background-color: var(--white);
  color: var(--text-secondary);
  font-size: 16px;
}
.account_info .info02 {
  width: 434px;
}
.account_info .info02 > div:first-child {
  margin-bottom: 10px;
}

.account_info2 {
  width: 100%;
  display: none;
  overflow: hidden;
}
.account_info2 .info01 {
  width: 100%;
  margin-right: 15px;
  border-radius: 0 12px 12px;
}
.account_info2 .info01 > table {
  width: 800px;
  margin: 50px auto 0;
}
.account_info2 .info01 > table th {
  width: 75px;
  color: var(--main-color);
}
.account_info2 .info01 > table td p {
  width: 80%;
  padding: 0 0 0 20px;
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 16px;
}
.account_info2 .info02 {
  width: 434px;
}
.account_info2 .info02 > div:first-child {
  margin-bottom: 10px;
}

.wrap_file {
  position: relative;
  width: 100%;
  padding: 0 100px 0 0;
  box-sizing: border-box;
  border: 1px solid var(--border-dark);
  border-radius: var(--btn-radius);
  background-color: var(--btn-tertiary-bg);
}
.wrap_file .ico_chk {
  position: absolute;
  top: 14px;
  left: 16px;
  display: none;
  width: 15px;
  height: 10px;
  background: url(/r/front/img/mypage/check_file.png?JVR) 0 0 no-repeat;
}
.wrap_file input[type="text"] {
  width: 300px;
  border: 0;
  background: none !important;
  color: var(--text-grey);
}
.wrap_file .bt_file {
  position: absolute;
  top: 3px;
  right: 5px;
  display: block;
  width: 90px;
  height: 35px;
  padding: 5px;
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  border: 1px solid var(--btn-secondary-border);
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  text-align: center;
  cursor: pointer;
}
.wrap_file .bt_file:hover {
  border: 1px solid var(--btn-primary-border);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.wrap_file input[type="file"] {
  position: absolute;
  top: 5px;
  left: 0;
  width: 80%;
  opacity: 0;
  filter: alpha(opacity=0);
  cursor: pointer;
}
.wrap_fileinfo {
  margin-top: 10px;
  padding-bottom: 40px;
}
.wrap_fileinfo li {
  color: var(--text-grey);
}

.account_info .wrap_file {
  width: 90%;
  margin-left: 30px;
}
.account_info .wrap_file .file {
  width: 80%;
}
.account_info .account_regist {
  width: 750px;
  margin: auto;
  padding: 0;
}
.account_info .account_regist input {
  margin-top: 10px;
  display: none;
}
.account_info .account_regist_table {
  padding: 20px 0 0 0;
}
.account_info .account_regist_table table {
  width: 750px;
  margin: auto;
  border-collapse: separate;
  background-color: var(--white);
}
.account_info .account_regist_table table tr th {
  width: 15%;
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
  background-color: #f8f8f8;
  color: var(--text-primary);
  text-align: center;
}
.account_info .account_regist_table table tbody {
  background-color: var(--bg-secondary);
}
.account_info .info_box {
  width: 100%;
  padding: 20px 40px;
  box-sizing: border-box;
}
.account_info .account_regist .reset {
  width: 80px;
  margin-top: 10px;
  display: none;
  border: 1px solid var(--main-color);
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
  color: var(--main-color);
  text-align: center;
  cursor: pointer;
}

/** Multi Account */
#withdrawAccountList tr td {
  background-color: var(--white);
  color: var(--text-secondary);
  text-align: center;
}
#withdrawAccountList tr td a input {
  width: 60px;
}
input.reset {
  width: 80px;
  border: 1px solid var(--main-color);
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
  color: var(--main-color);
  text-align: center;
  cursor: pointer;
}

/* MYPAGE - BETTING */
.tab_guide_wrap.mypage_betting {
  display: block;
}
#tabGameCategory {
  width: 100% !important;
  border-radius: var(--btn-radius);
}
.mypage_betting .search_area {
  width: 100%;
  margin-top: 5px;
  padding: var(--btn-padding);
  box-sizing: border-box;
  overflow: hidden;
}
.mypage_betting .search_area .date_pick {
  display: flex;
  align-items: center;
}

.mypage_cont .tab_container .date_pick {
  position: absolute;
  top: 0;
  left: 390px;
}
.mypage_cont .date_pick > p {
  display: flex;
  flex: 1;
  justify-content: end;
  padding: 0 10px;
  color: var(--text-grey);
  font-size: 16px;
  white-space: nowrap;
}
.mypage_cont .date_pick > .date {
  width: 140px;
  height: 40px;
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid var(--border-dark);
  background: var(--white) url(/r/front/img/mypage/calendar.png?qEv) 115px 11px
    no-repeat;
  background-size: 15px;
  color: var(--text-input);
  cursor: pointer;
}
.mypage_cont .date_pick .bt_search {
  width: 80px;
  margin-left: 10px;
  padding: var(--btn-padding);
  box-sizing: border-box;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  text-align: center;
  cursor: pointer;
}
.mypage_cont .date_pick .bt_search:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}

.layer_mixparlay {
  display: none;
  position: absolute;
  top: 100px;
  left: 20px;
  z-index: 10002;
  width: 96%;
  box-sizing: border-box;
}
.layer_mixparlay .bt_close {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 40px;
  height: 40px;
  background: url(/r/front/img/main/bt_close.png?qEv) 0 0 no-repeat;
  font-size: 0;
  text-indent: -99px;
  filter: opacity(0.5) drop-shadow(0 0 0 #000);
}
.layer_mixparlay .inner {
  width: 850px;
  min-height: 150px;
  margin-top: 45px;
  padding: 15px 10px;
  border-radius: var(--btn-radius);
  background-color: var(--white);
  text-align: center;
}
.layer_mixparlay .inner h3 {
  width: 100%;
  margin-bottom: 15px;
  text-align: left;
  font-weight: bold;
}
.layer_mixparlay .inner table {
  width: 100%;
  border: 1px solid var(--black);
}
.layer_mixparlay .inner table th {
  border-right: 1px solid var(--white);
  background-color: var(--bg-dark-grey);
  color: var(--text-primary);
}
.layer_mixparlay .inner table th:last-child {
  border-right: 0;
}
.layer_mixparlay .inner table tr td {
  padding: 10px 0;
  border-right: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
}
.layer_mixparlay .inner table tr:last-child td {
  border-bottom: 0;
}
.layer_mixparlay.small .inner {
  max-height: 380px;
  overflow-y: auto;
}

.red_important {
  color: var(--red);
  font-weight: bold;
  text-align: center;
}
.red_important span {
  margin: 0 10px;
  padding: 50% 0;
}

/* MYPAGE - COMP*/
/* MYPAGE - COMP */
.comp_txt p {
  width: 680px;
  margin: 10px 0 0 150px;
  color: var(--text-grey);
  text-align: left;
}
.comp_txt em {
  color: var(--text-primary);
  font-weight: bold;
}
.comp_area {
  overflow: hidden;
  border: 1px solid var(--border-light);
}
.comp_area > div.mybox {
  width: 420px;
  border: none;
}
.comp_area > div:first-child {
  border-right: 1px solid var(--border-light);
}
.comp_area > div .mbox {
  text-align: right;
}
.comp_area > div .mbox > p {
  min-width: 180px;
  padding-right: 55px;
  border-radius: 20px;
  color: var(--main-color);
  font-size: 30px;
  font-weight: bold;
}
.comp_area > div .mbox > p em {
  font-size: 16px;
}
.comp_area > div.sec2 .mbox {
  margin-top: 5px;
  overflow: hidden;
}
.comp_area > div.sec2 .mbox:first-child {
  margin-top: 5px;
}
.comp_area > div.sec2 .mbox > span {
  padding: 15px 0 0 10px;
  color: var(--text-primary);
}
.mypage_cont .comp_area .mybox .tit {
  padding: 10px 0 0 10px;
}

/* MYPAGE - COMPPPOINT*/

/* MYPAGE - FRIEND */
.my_friend {
  width: 100%;
}
.my_friend thead th {
  position: relative;
  padding: 20px 0;
  border: 1px solid var(--border-light);
  border-width: 2px 0 2px 0;
  background-color: var(--bg-primary);
  color: var(--text-grey);
  font-weight: bold;
}
.my_friend tbody td {
  padding: 15px 0;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-grey);
  text-align: center;
}
.my_friend tbody td.grade {
  text-align: left;
}
.my_friend tbody td.grade > p {
  position: relative;
  padding: 0 0 0 60px;
}
.my_friend tbody td.grade > p > em {
  position: absolute;
  top: -9px;
  left: 24px;
  display: block;
  width: 25px;
  height: 33px;
  background: url(/r/front/img/mypage/grade.png?qEv) 0 19px no-repeat;
}
.my_friend tbody td.grade > p.silver > em {
  background-position: 0 0;
}
.my_friend tbody td.grade > p.bronze > em {
  background-position: 0 -56px;
}
.my_friend tbody td.grade > p.gold > em {
  background-position: 0 -113px;
}
.my_friend tbody td.grade > p.vip > em {
  background-position: 0 -167px;
}
.my_friend tbody td.id {
  color: var(--text-primary);
}
.my_friend tbody td.bonus {
  padding: 15px 20px 15px 0;
  color: var(--text-primary);
  text-align: right;
}
.my_friend tbody td.price {
  padding: 0 10px 0 0;
  color: var(--text-primary);
  text-align: right;
}
.my_friend tbody td.remain {
  padding: 0 10px 0 0;
  color: var(--text-primary);
  text-align: right;
}
.my_friend .category {
  display: inline-block;
  padding: 0 20px 0 0;
  background: url(/r/front/img/mypage/ico_arrow.png?qEv) right 5px no-repeat;
}
.my_friend .saving {
  color: var(--main-color);
}
.my_friend .used {
  color: var(--green);
}
.my_friend .detail {
  width: 200px;
  padding: 0 10px;
  color: var(--text-grey);
  text-align: left;
}
.my_friend .recomm {
  width: 75px;
  padding: 0 10px;
  color: var(--text-grey);
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  text-align: left;
}
.my_friend .bt_send {
  display: inline-block;
  width: 80px;
  padding: 5px 10px;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  text-align: center;
  cursor: pointer;
}
.my_friend .bt_send:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}
.my_friend .design_sel.cate {
  position: absolute;
  top: 10px;
  left: 0;
  display: none;
}

/* MYPAGE - COUPON */
.coupon_usebtn {
  width: 80px;
  margin-top: 5px;
  box-sizing: border-box;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  text-align: center;
  cursor: pointer;
  cursor: pointer;
}
.coupon_usebtn:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}

/* MYPAGE - COUPONINFO */
.coupon_game_guide_wrap .banner {
  width: 910px;
  height: 244px;
  background: url(/r/front/img/template3/mypage/use_coupon_banner.png) no-repeat;
  background-size: contain;
}
.coupon_game_guide_wrap .banner img {
  width: 100%;
  height: auto;
}
.coupon_game_guide_title {
  position: relative;
  display: flex;
  align-items: center;
  margin: 20px 0;
  background-color: var(--bg-primary);
  color: var(--text-grey);
  font-size: 16px;
  padding: 0 0 0 15px;
}
.coupon_game_guide_title:after {
  position: absolute;
  top: 5px;
  left: 4px;
  width: 3px;
  border-radius: var(--btn-radius);
  content: "";
  background-color: var(--main-color);
}
.coupon_game_guide_content p {
  margin: 5px 15px 10px;
  color: var(--text-grey);
}
.coupon_game_guide_content .badge_guide {
  display: flex;
}
.coupon_game_guide_content .badge_guide .badge_icon {
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 15px;
  background: url(/r/front/img/comm/badge_coupongame.svg) 100% no-repeat;
  background-size: contain;
}

a.coupon_usebtn {
  border: 1px solid var(--btn-primary-border);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  padding: 5px;
  cursor: pointer;
}
a.coupon_usebtn:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}

.coupon_game_popup_overlay .coupon_gamelist_wrap #coupon_gamelist .inner {
  position: relative;
}

/* MYPAGE - DEPOSIT */
.deposit_wrap .deposit_inp .moneybox .inp_wrap .coin_name {
  position: absolute;
  top: 9px;
  right: 15px;
  color: var(--text-secondary);
}
.deposit_wrap .deposit_inp .moneybox .real_time_rate {
  margin-top: 10px;
  color: var(--text-primary);
  text-align: center;
}
.deposit_wrap .deposit_inp .moneybox .inp_wrap .wallet_address {
  width: 78%;
  padding-top: 5px;
  color: var(--text-input);
}
.deposit_wrap .deposit_inp .moneybox .inp_wrap .wallet_address li input {
  width: 100%;
}
.deposit_noti {
  width: 870px;
  height: 290px;
  margin-bottom: 20px;
  text-align: center;
  background: url(/r/theme/center_logo/img/pc/vip_deposit_normal_flow.png)
    no-repeat;
  background-size: contain;
}
.deposit_coin_noti {
  width: 870px;
  height: 177px;
  margin-bottom: 20px;
  text-align: center;
  background: url(/r/theme/center_logo/img/pc/vip_deposit_crypto_flow.png)
    no-repeat;
  background-size: contain;
}

.checkbox_disclaimer {
  margin: 20px 0 0 155px;
}

/* MYPAGE - DEPOSITLIST */
.mypage_cont .deposit-currency-select {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: var(--btn-radius);
  background-color: var(--bg-dark-grey);
}
.mypage_cont .deposit-currency-select span {
  min-width: 100px;
  padding: var(--btn-padding);
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
.mypage_cont .deposit-currency-select span:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}
.mypage_cont .deposit-currency-select select {
  width: 250px;
}

.my_list_wrap .my_list_top .my_list_top_header {
  display: flex;
  justify-content: start;
  width: 100%;
}
.my_list_wrap .my_list_top .my_list_top_header .total_money_area span {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: bold;
}
.total_money_area {
  display: block;
  width: 100px;
  padding: var(--btn-padding);
  border-radius: 5px 0 0 5px;
  background-color: var(--subMain-color);
  text-align: center;
}
.total_money {
  display: block;
  width: 163px;
  margin-right: 20px;
  border-radius: 0 5px 5px 0;
  background-color: var(--main-color);
}
.total_money > span {
  display: block;
  margin-top: 10px;
  padding-right: 10px;
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: bold;
  text-align: right;
}
.totalResultCnt {
  position: absolute;
  top: 35px;
  right: 0;
  width: 40%;
  padding-right: 15px;
  text-align: right;
}

/* MYPAGE - DETOUR DEPOSIT */
.detour_noti {
  width: 700px;
  height: 200px;
  margin: 0 auto;
  text-align: center;
  background-image: url("/r/front/img/mypage/detour_kbc_info.png?sdf");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.deposit_wrap .moneybox .detour_rate {
  margin-top: 10px;
  color: var(--text-primary);
  text-align: center;
}
.deposit_wrap .deposit_form .virtual_box {
  width: 200px;
  margin: auto;
}
.mybox .transferBankNotiOuter {
  display: none;
}

/* MYPAGE - FRIEND */
.mypage_cont .friend_wrap {
  padding: 15px 10px;
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
}
.mypage_cont .friend_top {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  border: none;
}
.mypage_cont .friend_top > div.mybox {
  border-color: var(--border-light);
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
}

.wrap_bts {
  position: relative;
  width: 415px;
  padding: 0 100px 0 15px;
  box-sizing: border-box;
  border-radius: var(--btn-radius);
  background-color: var(--white);
  overflow: hidden;
}
.wrap_bts input[type="text"] {
  width: 300px;
  border: 0;
  background: none;
  color: var(--text-secondary);
}
.wrap_bts input::-webkit-input-placeholder {
  color: var(--text-grey);
  font-weight: 400;
}
.wrap_bts .bt_file {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 90px;
  padding: var(--btn-padding);
  box-sizing: border-box;
  border: 1px solid var(--btn-primary-border);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  text-align: center;
  cursor: pointer;
}
.wrap_bts .bt_file_make {
  position: absolute;
  top: 0;
  right: 89px;
  display: block;
  width: 90px;
  padding: var(--btn-padding);
  box-sizing: border-box;
  border: 1px solid var(--btn-primary-border);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  text-align: center;
  cursor: pointer;
}
.wrap_bts .bt_file_none {
  position: absolute;
  top: -1px;
  right: -1px;
  display: block;
  width: 90px;
  padding: var(--btn-padding);
  box-sizing: border-box;
  border: 1px solid var(--border-dark);
  background-color: #666;
  color: var(--text-secondary);
  text-align: center;
  cursor: pointer;
}
.wrap_bts .bt_file:hover,
.wrap_bts .bt_file_make:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}

.friendTitle .titleColor {
  color: var(--main-color);
}

/* 안내사항 박스 */
.tb-board {
  margin: 0 auto;
}
.tb-board th {
  padding: var(--btn-padding);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  font-size: 16px;
}
.tb-board td {
  padding: var(--btn-padding);
  border: 1px solid var(--border-light);
  color: var(--text-grey);
  font-size: 16px;
}
.tb-board td[colspan="2"] {
  padding: 10px 0;
  border: none;
}
.tb-board input {
  width: 300px;
}

/* MYPAGE - INFORMATION */
.modify_wrap .modibox .bot_btn .bt_white {
  width: 78px;
  border: 1px solid var(--white);
  border-radius: var(--btn-radius);
  background-color: var(--btn-tertiary-bg);
  color: var(--text-primary);
  text-align: center;
  cursor: pointer;
}
.modify_wrap .modibox .bot_btn .bt_white:hover {
  border: 1px solid var(--white);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.info_select {
  width: 180px;
  margin-top: 10px;
}

/* MYPAGE - INQUIRY */
.my_list_wrap .top_btns {
  width: 100%;
  margin: 5px auto;
  text-align: left;
}
.my_list_wrap .top_btns .btn_inquiry {
  width: 100px;
}
.my_list_wrap .betting-click-all {
  margin-right: 5px;
  padding: 5px 20px;
  border-radius: var(--btn-radius);
}
.my_list_wrap .betting-desc {
  margin: 10px 0 !important;
}
.top_btns > a {
  width: 80px;
  padding: 0;
  border: 1px solid var(--btn-primary-border);
  box-sizing: border-box;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
.top_btns > a:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}
#accountBank {
  margin-top: 10px;
}
.my_board tbody td.location_path {
  padding: 15px 0;
  text-align: left;
}

.rating_inquiry_wrap {
  padding-left: 25px;
  text-align: left;
}
.rating_inquiry {
  color: var(--text-primary);
}
.rating_inquiry_wrap .starRev {
  display: flex;
  width: 150px;
  height: 30px;
  margin-top: 5px;
}
.rating_inquiry_wrap .starRev > div {
  display: flex;
}
.rate_grade {
  height: 30px;
  color: var(--text-primary);
}
.starR1 {
  width: 15px;
  height: 30px;
  background: url(/r/front/img/comm/ico_review.png) no-repeat -52px 0;
  background-size: auto 100%;
  text-indent: -9999px;
}
.starR2 {
  width: 15px;
  height: 30px;
  background: url(/r/front/img/comm/ico_review.png) no-repeat right 0;
  background-size: auto 100%;
  text-indent: -9999px;
}
.starR1.on {
  background-position: 0 0;
}
.starR2.on {
  background-position: -15px 0;
}
.answer img {
  max-width: 100%;
}
.btnAddGrade {
  width: 70px;
  padding: 5px;
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  color: var(--text-primary);
}

#btnWriteInquiry {
  display: block;
  width: 125px;
  margin: 15px auto;
  padding: var(--btn-padding);
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  text-align: center;
  cursor: pointer;
}
#btnWriteInquiry:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}

/*MYPAGE INQUIRY WRITE*/
.q_write_wrap {
  width: 90%;
  margin: 0 auto;
  padding: 20px;
}
.q_write_wrap .category_box {
  overflow: hidden;
}
.q_write_wrap .category_box .design_sel {
  width: 50%;
  margin: 0 15px 0 0;
  padding: 0 10px;
}
.q_write_wrap .text_box .q_title_inp {
  width: 100%;
  margin-top: 10px;
  padding: var(--btn-padding);
  border: 1px solid var(--border-light);
  background-color: var(--bg-primary);
  font-size: 16px;
  color: var(--text-secondary);
  border-radius: var(--btn-radius);
}
.q_write_wrap .text_box > div {
  height: 300px;
  margin-top: 10px;
  padding: var(--btn-padding);
  border: 1px solid var(--border-dark);
  background-color: var(--white);
  font-size: 16px;
  color: var(--text-input);
  border-radius: var(--btn-radius);
  overflow-y: auto;
}
.q_write_wrap .text_box > div > div {
  color: var(--text-secondary);
}
.q_write_wrap .bt_box {
  margin-top: 25px;
  text-align: center;
}
.q_write_wrap .bt_box .bt_q_submit {
  min-width: 140px;
  padding: 0 20px;
  padding: var(--btn-padding);
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: 16px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}
.q_write_wrap .bt_box .bt_q_submit:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}

/*MYPAGE MYNOTICE*/
.myNoticeImportant {
  color: var(--main-color);
  font-weight: bold;
}
.note_top_btn a {
  padding: 5px 20px;
  border-radius: var(--btn-radius);
}
.note_top_btn .btn-read-all {
  margin-right: 5px;
  padding: 5px 20px;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: 16px;
  cursor: pointer;
}
.note_top_btn .btn-read-all:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}

/*MYPAGE NORMALCOUPON*/

/*MYPAGE POINT*/
/*point*/
.point_txt p {
  width: 680px;
  margin: 10px 0 0 150px;
  text-align: left;
  color: var(--text-grey);
  font-weight: bold;
}
.point_txt em {
  color: var(--text-primary);
  font-weight: bold;
}
.my_point_area {
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
  overflow: hidden;
}
.my_point_area > div {
  width: 100%;
}
.my_point_area > div .mbox {
  margin-top: 0;
  border-radius: var(--btn-radius);
  text-align: right;
}
.my_point_area > div .mbox > p {
  text-align: center;
  color: var(--main-color);
  font-size: 30px;
  font-weight: bold;
}
.my_point_area > div .mbox > p em {
  font-size: 16px;
}
/*MYPAGE SECURITYGUIDE*/

/*MYPAGE - SECURITYMANAGE*/
.mypage_cont .mybox .titL {
  padding: 10px 0px 30px 100px;
  color: var(--main-color);
  font-size: 20px;
}
.mypage_cont .mybox .titR {
  padding: 10px 0px 30px 100px;
  color: var(--text-primary);
  font-size: 16px;
}

/*MYPAGE SECURITYMANAGEREGIST*/
table.securityManage th {
  width: 100px;
  text-align: left;
}
table.securityManage td span {
  display: block;
  margin: 10px 0 0 30px;
  color: var(--text-primary);
  font-weight: bold;
}
table.securityManage td .wrap {
  margin: 20px 0 30px 0;
  overflow: hidden;
}
table.securityManage td .wrap img {
  width: 200px;
  margin: 0 0 10px 30px;
}
table.securityManage td .wrap p,
.securityManage td .wrap .wrap_file {
  width: 96%;
}

/*MYPAGE - SECURITYMANAGERELEASE*/
table.securityRelease th {
  width: 100px;
  text-align: left;
}

/* MYPAGE - TRANSFER*/
div#bankTransferArea {
  padding: 20px;
  border: 1px solid var(--border-light);
  background-color: var(--bg-dark-grey);
}
.mypageTab.transfer {
  margin-bottom: 0px;
  padding: 0;
  width: 100%;
}
.rolling_status {
  width: 850px;
  margin: 10px 0;
  border-radius: var(--btn-radius);
}
.rolling_status .rolling_main_title {
  align-items: center;
  color: var(--text-grey);
}
.transfer_noti_img {
  width: 100%;
  height: 202px;
  margin: 0 auto 20px;
  background-image: url("/r/theme/center_logo/img/pc/vip_transfer_normal_flow.png?sdf");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: center;
}
.transfer_coin_noti_img {
  width: 100%;
  height: 202px;
  margin: 0 auto 20px;
  background-image: url("/r/theme/center_logo/img/pc/vip_transfer_crypto_flow.png?sdf");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: center;
}
.btnQuickChange {
  width: 35px;
  height: 30px;
  position: absolute;
  top: 10px;
  left: 40%;
  background: url(/r/front/img/mypage/exchange.png?w7B0) no-repeat;
  cursor: pointer;
}
.transfer_area .design_sel2 {
  width: 200px;
  margin: 5px auto;
}
.transfer_area .design_sel2 select {
  width: 100%;
}
.deposit_wrap .transfer_area .moneybox .top .inp_wrap {
  width: 355px;
}
.transfer_area .moneybox #fromCoinText {
  width: 310px;
  text-align: right;
}

.transfer_area .tradeInfoWrap {
  display: block;
  margin-bottom: 5%;
}
.transfer_area .tradeInfoWrap .title {
  width: 300px;
  margin: 10px auto 0;
  text-align: left;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: bold;
}
.transfer_area .tradeInfoWrap .sub-title {
  width: 300px;
  margin: 10px auto 0;
  text-align: left;
  color: var(--text-grey);
}
.transfer_area .tradeInfoWrap .title .coinithdrawQuantity {
  width: 160px;
}
.transfer_area .tradeInfoWrap .title .coinBalance {
  width: 40%;
  padding-right: 5%;
  text-align: right;
  color: var(--main-color);
}
.transfer_area .tradeInfoWrap .sub-title .realTimeInfoTit {
  width: 120px;
}
.transfer_area .tradeInfoWrap .sub-title .realTimeInfo {
  width: 50%;
  padding-right: 5%;
  text-align: right;
}

.coinDeposit.mybox {
  width: 850px;
  padding: 15px 40px 30px;
}
.coinDeposit.mybox .deposit_inp .moneybox.single {
  width: 80%;
}
.coinDeposit.mybox .deposit_inp .gameSel .first {
  width: 61%;
  padding-left: 0;
  display: flex;
  align-items: center;
}
.coinDeposit.mybox .deposit_inp .gameSel .last {
  display: flex;
  align-items: center;
}
.coinDeposit.mybox .deposit_inp .gameSel .last select {
  margin-left: 0;
}
.coinDeposit .account_info {
  width: 100%;
}
.coinDeposit .account_info .info01 {
  width: 100%;
  border-radius: 0 12px 12px;
  padding: 0;
}
.coinDeposit .account_info .info01 .tit {
  margin-top: 10px;
}
.coinDeposit .account_info .info01 > table {
  width: 100%;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--border-light);
}
.coinDeposit .account_info .info01 > table th {
  width: 130px;
  padding: 20px 12px;
  box-sizing: border-box;
}
.coinDeposit .account_info .info01 > table td p {
  width: 600px;
  min-height: 40px;
  height: auto;
  margin-left: 20px;
  border: 1px solid var(--border-dark);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  background-color: var(--white);
  color: var(--text-grey);
  font-size: 16px;
}
.coinDeposit .account_info .info01 > table td #coin_type_code {
  width: 600px;
  box-sizing: border-box;
  background-color: var(--white);
  color: var(--text-secondary);
  font-size: 16px;
  margin-left: 20px;
}
.coinDeposit .account_info .info01 > table th {
  background-color: var(--bg-primary);
  color: var(--text-grey);
  font-weight: bold;
}
.coinDeposit .account_info .info01 > table tr:first-child > th {
  padding-top: 30px;
}
.coinDeposit .account_info .info01 > table tr:first-child > td {
  padding-top: 10px;
}
.coinDeposit
  .account_info
  .info01
  > table
  tr:last-child:not([style*="display:none" i])
  > th,
.coinDeposit
  .account_info
  .info01
  > table
  tr:last-child:not([style*="display:none" i])
  > td,
.coinDeposit
  .account_info
  .info01
  > table
  tr:last-child:not([style*="display: none" i])
  > th,
.coinDeposit
  .account_info
  .info01
  > table
  tr:last-child:not([style*="display: none" i])
  > td {
  padding-top: 10px;
  padding-bottom: 20px;
}

#simple_withdrawBalance {
  display: flex;
}
.depositBalanceTitle {
  min-width: 10%;
  width: 100px;
  padding: var(--btn-padding);
  color: var(--text-grey);
  font-weight: bold;
}

/*MYPAGE - USECOUPON*/
/*coupon popup gamelist*/
.coupon_game_popup_overlay {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
}
.coupon_game_popup_close_wrap {
  position: relative;
}
.coupon_game_popup_close_btn {
  position: absolute;
  top: -55px;
  right: -10px;
  width: 49px;
  height: 49px;
  background: url(/r/front/img/main/bt_close.png) no-repeat;
  z-index: 1;
}
.coupon_game_popup {
  width: 1160px;
  height: 600px;
  padding: 20px;
  overflow-y: auto;
  border: 1px solid var(--border-dark);
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
}
.coupon_gamelist_wrap {
  margin: 15px 0 0 0;
}
.coupon_game_title {
  padding: 0 0 0 15px;
  display: flex;
  align-items: center;
  position: relative;
  color: var(--text-primary);
  font-size: 20px;
}
.coupon_game_title:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 4px;
  width: 4px;
  height: 40px;
  border-radius: var(--btn-radius);
  background-color: var(--main-color);
}
.coupon_gamelist_wrap .top {
  display: flex;
  justify-content: space-between;
}
.coupon_gamelist_wrap .searchbox {
  width: 300px;
  height: 40px;
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  background: var(--white) url(/r/theme/center_logo/img/mobile/search.png) 95%
    6px no-repeat;
  background-size: 25px;
}
.coupon_gamelist_wrap .searchbox input {
  width: 250px;
}
.coupon_gamelist_wrap .indicates {
  margin: 30px 15px;
  display: flex;
  justify-content: space-between;
}
.coupon_gamelist_wrap .indicates p {
  color: var(--text-grey);
}
.coupon_gamelist_wrap .bt_all {
  min-width: 80px;
  padding: 5px 10px;
  border: 1px solid var(--white);
  border-radius: var(--btn-radius);
  position: absolute;
  right: 0;
  top: -55px;
  color: var(--text-grey);
  font-weight: bold;
  cursor: pointer;
}
.coupon_gamelist_wrap .bt_all:hover {
  color: var(--text-primary);
  border: 1px solid var(--white);
}
.coupon_gamelist_wrap .game_list_wrap .game_list {
  flex-wrap: wrap;
}

/*MYPAGE WITHDRAW*/
.deposit_wrap .deposit_form {
  padding: 0 0 10px 0;
  overflow: hidden;
  background-color: var(--bg-dark-grey);
}
.deposit_wrap .deposit_inp {
  position: relative;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.deposit_wrap .deposit_inp:before {
  width: 130px;
  height: 100%;
  position: absolute;
  background-color: var(--bg-primary);
  content: "";
}
.deposit_wrap .deposit_inp > li {
  width: 750px;
  margin-top: 20px;
  position: relative;
  display: flex;
  align-items: center;
}
.deposit_wrap .deposit_inp > li:after {
  content: "";
  display: table;
  clear: both;
}
.deposit_wrap .deposit_inp > li:has(+ li[style*="display:none" i]),
.deposit_wrap .deposit_inp > li:has(+ li[style*="display: none" i]),
.deposit_wrap .deposit_inp > li:last-child:not([style*="display:none" i]),
.deposit_wrap .deposit_inp > li:last-child:not([style*="display: none" i]) {
  margin-bottom: 20px;
}
.deposit_wrap
  .deposit_inp:has(
    + .account_info:not([style*="display:none" i]):not(
        [style*="display: none" i]
      )
  ) {
  border-bottom: none;
}
.deposit_wrap
  .deposit_inp:has(
    + .account_info:not([style*="display:none" i]):not(
        [style*="display: none" i]
      )
  )
  > li {
  margin-bottom: 0;
}
.deposit_wrap .deposit_inp > li .w-full {
  display: flex;
}
.deposit_wrap .deposit_inp > li.gameSel div {
  display: flex;
  flex: 1;
  align-items: center;
}
.deposit_wrap .deposit_inp > li.gameSel div .design_sel2.long {
  width: auto !important;
}
.deposit_wrap .deposit_inp li .title {
  min-width: 10%;
  width: 100px;
  margin: 0 !important;
  padding: var(--btn-padding);
  color: var(--text-grey);
  font-weight: bold;
}
.deposit_wrap .deposit_inp li .title em {
  color: var(--text-grey);
  font-weight: bold;
}
.deposit_wrap .deposit_inp li .select_chk {
  margin: 5px 0 0 30px;
}
.deposit_wrap .deposit_inp li .select_chk .select_type1 {
  overflow: hidden;
}
.deposit_wrap .deposit_inp li .select_chk .select_type1 > li {
  margin-left: 50px;
}
.deposit_wrap .deposit_inp li .select_chk .select_type1 > li:first-child {
  margin-left: 0px;
}
.deposit_wrap .deposit_inp li .select_chk .select_type1 > li label {
  padding: 5px 0 0 30px;
  height: 20px;
  background: url(/r/front/img/mypage/ico_checkbox.png?JVR) left 0px no-repeat;
  font-size: 16px;
  color: var(--text-primary);
  cursor: pointer;
}
.deposit_wrap .deposit_inp li .select_chk .select_type1 > li label.checked {
  background-position: left -59px;
}
.deposit_wrap .deposit_inp #simple_depositBalance {
  display: flex;
}

.deposit_wrap .moneybox {
  margin-left: 30px !important;
}
.deposit_wrap .moneybox .top .inp_wrap {
  width: 600px;
  height: 40px;
  padding: 0 0 0 10px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  background-color: var(--white);
  border-radius: var(--btn-radius);
}
.deposit_wrap .moneybox .top .inp_wrap > input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  padding-left: 0px !important;
}
.deposit_wrap .moneybox .top .inp_wrap > a {
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  position: absolute;
  display: block;
  border-radius: var(--full-border-radius);
  background: var(--main-color) url(/r/front/img/m/comm/bt_close_wh2.png) center
    no-repeat;
  background-size: 10px;
}
.deposit_wrap .moneybox .top .inp_wrap > button {
  top: 0;
  right: 0;
  padding: var(--btn-padding);
  position: absolute;
  display: block;
  min-width: 88px;
  border: 1px solid var(--btn-primary-border);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  cursor: pointer;
}
.deposit_wrap .moneybox .top .inp_wrap > button:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}

.tf .inp_wrap {
  margin-left: 115px;
  width: 600px;
}
.tf_ .inp_wrap {
  margin-left: 120px;
  width: 600px;
}
.simple_coinDeposit .selectBoxShortStyle select {
  width: 220px;
}
.simple_coinDeposit .selectBoxLongStyle select {
  margin-left: 0;
  width: 600px;
}
.simple_coinDeposit .bonus_selection .tf {
  margin-left: 15px;
}

/* Coin Transfer notice image hide*/
.transfer_noti_img {
  display: none !important;
}

.deposit_wrap .moneybox .money_sel {
  overflow: hidden;
  margin-top: 10px;
  padding: 0 0 0 40px;
  display: flex;
}
.deposit_wrap .moneybox .money_sel > li {
  margin-left: 10px;
}
.deposit_wrap .moneybox .money_sel > li:first-child {
  margin-left: 0px;
}
.deposit_wrap .moneybox .money_sel {
  padding: 0;
}
.deposit_wrap .deposit_info > li {
  color: var(--text-primary);
}
.coinDeposit .deposit_inp .selectBoxLongStyle select {
  width: 600px;
  margin-left: 30px;
}
.coinDeposit .deposit_inp .selectBoxShortStyle select {
  width: 220px;
}

.deposit_wrap .coinDeposit .realtimeinfo {
  margin: 10px 0 0 30px;
  color: var(--main-color);
}

p.estimated_time {
  position: relative;
  margin: 15px 10px;
}
p.estimated_time span {
  color: var(--text-primary);
  padding: 0 0 0 15px;
}
p.estimated_time em {
  font-weight: bold;
  color: var(--text-primary);
}
p.estimated_time:before {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: 8px;
  left: 5px;
  background-color: var(--white);
  border-radius: var(--full-border-radius);
}

.deposit_wrap .deposit_info {
  margin-left: 40px;
}
.deposit_wrap .deposit_info > li {
  color: var(--text-primary);
  font-size: 16px;
  padding: 0 10px;
}
.deposit_wrap .deposit_account {
  width: 100%;
  height: 100%;
}

.withdraw_txt p {
  text-align: left;
  width: 680px;
  color: var(--text-grey);
  font-weight: bold;
  margin-top: 10px;
}
.withdraw_txt em {
  color: var(--text-primary);
  font-weight: bold;
}

.mypage_cont .withdraw_area {
  overflow: hidden;
  border: 1px solid var(--border-light);
}
.mypage_cont .withdraw_area > div {
  border: none;
  width: 49%;
}
.mypage_cont .withdraw_area > div.border-right {
  border-right: 1px solid var(--border-dark);
}
.mypage_cont .withdraw_area > div .mbox {
  text-align: right;
  margin-top: 0;
}
.mypage_cont .withdraw_area > div .mbox > p {
  height: 44px;
  padding-right: 55px;
  min-width: 260px;
  background: var(--bg-primary)
    url(/r/front/img/template3/mypage/wbc__ico_withdraw.png) 6px 6px no-repeat;
  border-radius: 20px;
  color: var(--text-primary);
  font-size: 30px;
  font-weight: bold;
}
.mypage_cont .withdraw_area > div .mbox > p em {
  font-size: 16px;
}
.mypage_cont .withdraw_area > div.sec2 .mbox {
  margin-top: 5px;
  overflow: hidden;
}
.mypage_cont .withdraw_area > div.sec2 .mbox:first-child {
  margin-top: 5px;
}
.mypage_cont .withdraw_area > div.sec2 .mbox > span {
  color: var(--text-primary);
  padding: 15px 0 0 10px;
}

.mypage_cont .mybox table.withdraw_detail {
  width: 100%;
  background-color: var(--white);
}
.mypage_cont .mybox table.withdraw_detail tr th {
  color: var(--text-grey);
  text-align: center;
  padding: 5px 0;
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
  background-color: #f8f8f8;
}
.mypage_cont .mybox table.withdraw_detail tr td {
  color: var(--text-grey);
  text-align: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-dark);
}

span#currencyToChange {
  border: 1px solid var(--border-dark);
}
.wrapper .withdraw_area > div .mbox > p {
  background: 0 0;
  min-width: 190px;
  color: var(--main-color);
}
.exchangeCurrency {
  padding: 0px;
  position: absolute;
  left: 80px;
  top: 5px;
}
.exchangeCurrency .mybox {
  background-color: transparent !important;
}
.exchangeCurrency .design_sel2 select {
  width: 600px;
  margin-left: 80px;
}

/*MYPAGE - WITHDRAWAL*/
.deposit_wrap .agree_wrap > div input.withdrawal_pass {
  border: 1px solid var(--border-light);
}

/*MYPAGE WITHDRAWLIST*/
.tab_menu_board > li.clickTab.coin {
  width: 150px;
}

/*MYPAGE WITHDRAW VIEW*/
.coinInfo_simple p {
  margin: 5px auto 0;
  width: 100%;
  padding: var(--btn-padding);
  text-align: left;
  color: var(--text-primary);
  font-size: 16px;
}

/*EVENT_LIST*/
.tab_event_wrap {
  position: relative;
  margin: 25px auto 0;
  margin-bottom: 20px;
  width: 100%;
  display: flex;
}
.tab_event_wrap .tab_event_arrow {
  display: flex;
}
.tab_event_wrap .tab_event_arrow .prev {
  width: 34px;
  margin-right: 1px;
  border: 2px solid var(--border-light);
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
}
.tab_event_wrap .tab_event_arrow .prev span {
  display: block;
  padding: var(--btn-padding);
  font-size: 16px;
  text-align: center;
  color: var(--text-input);
}
.tab_event_wrap .tab_event_arrow .next {
  width: 34px;
  border: 2px solid var(--white);
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
}
.tab_event_wrap .tab_event_arrow .next span {
  display: block;
  padding: var(--btn-padding);
  font-size: 16px;
  text-align: center;
  color: var(--text-primary);
}

.tab_menu_event {
  display: flex;
  overflow: hidden;
  border-radius: var(--btn-radius);
}
.tab_menu_event > li {
  margin: 0 5px 0 -1px;
  width: 150px;
  padding: 15px 0;
  border: none;
  border-right: 1px solid var(--border-light);
  background-color: var(--bg-primary);
  color: var(--text-grey);
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.tab_menu_event > li:hover {
  border: 1px solid var(--btn-primary-border);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.tab_menu_event > li > a {
  display: block;
  color: var(--text-primary);
  font-weight: bold;
}
.tab_menu_event > li:first-child {
  margin-left: 0;
}
.tab_menu_event > li.on {
  border: 1px solid var(--btn-primary-border);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.tab_menu_event > li.on > a {
  color: var(--text-secondary);
}
.tab_menu_event > li:hover > a {
  color: var(--text-secondary);
}

.event_section .evt_cont {
  position: relative;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 30px 0 50px;
}
.event_section .evt_banner {
  position: relative;
}
.event_section .evt_banner .bx-pager {
  margin: 15px 0 30px 0;
  width: 100%;
  text-align: center;
}
.event_section .evt_banner .bx-pager > div {
  width: 20px;
}
.event_section .evt_banner .bx-pager > div > a {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--bg-secondary);
  font-size: 0px;
  text-indent: -99px;
}
.event_section .evt_banner .bx-pager > div > a.active {
  background-color: var(--main-color);
}
.event_section .sort_wrap {
  margin-bottom: 20px;
  overflow: hidden;
}
.event_section .sort_wrap .sort > li {
  margin-left: 35px;
  height: 22px;
  padding: 0 0 0 35px;
  background: url(/r/front/img/comm/bg_sort.png) 0 bottom no-repeat;
}
.event_section .sort_wrap .sort > li > a {
  color: var(--text-input);
  font-size: 16px;
}
.event_section .sort_wrap .sort > li.on {
  background: url(/r/front/img/comm/bg_sort.png) 0 top no-repeat;
}
.event_section .sort_wrap .sort > li.on > a {
  color: var(--text-primary);
}
.event_section .evt_list_wrap .evt_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  row-gap: 20px;
}
.event_section .evt_list_wrap .evt_list > li {
  position: relative;
  min-width: 350px;
  overflow: hidden;
  border-radius: var(--btn-radius);
  background-color: var(--bg-secondary);
  transition: 0.3s ease all;
  cursor: pointer;
}
.event_section .evt_list_wrap .evt_list > li .info {
  position: relative;
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
}
.event_section .evt_list_wrap .evt_list > li .info .tit {
  width: 325px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.event_section .evt_list_wrap .evt_list > li .info .date {
  color: var(--text-grey);
}
.event_section .evt_list_wrap .evt_list > li:hover {
  box-shadow: 5px 5px 20px #000;
  transform: scale(1.05);
}
.event_section .evt_list_wrap .evt_list > li.calendar {
  margin-left: 0;
  cursor: pointer;
}
.event_section .evt_list_wrap .evt_list > li.calendar:hover {
  top: 0;
  box-shadow: none;
}
.event_section .evt_list_wrap .evt_list > li .fin_layer {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  width: 100%;
  display: none;
  background: url(/r/front/img/comm/bg_black40.png) 0 top repeat;
}
.event_section .evt_list_wrap .evt_list > li .fin_layer > span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  margin: -20px 0 0 -80px;
  padding: 5px;
  border-radius: 5px;
  background-color: var(--bg-dark-grey);
  color: var(--text-primary);
  font-size: 16px;
  text-align: center;
  display: block;
}
.event_section .evt_list_wrap .evt_list > li.fin .fin_layer {
  display: block;
}

.tab_board_contents .my_list_cont .my_board #scheduleList_outer tr td {
  padding-top: 0;
}

figure img {
  width: 100%;
}
figure.table,
figure.image {
  margin: 0;
}

.wrapper .btn_event_list {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 5px;
  border: 2px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: 16px;
  cursor: pointer;
}
.wrapper .btn_event_list:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}
/*balance transfer*/
.rb_wrap p {
  margin-bottom: 5px;
  text-align: center;
  color: var(--text-grey);
}
.rb_wrap p.rb_title {
  margin: 20px 0;
  text-align: center;
  color: var(--text-primary);
  font-size: 30px;
}
.rb_details {
  margin: 20px 0 30px;
  padding: 15px 30px;
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  color: var(--text-primary);
  text-align: center;
}
.rb_details h1 {
  margin: -30px auto 20px;
  max-width: 180px;
  padding: 0 10px;
  background-color: var(--bg-dark-grey);
  color: var(--text-primary);
  font-size: 25px;
}
.rb_details p {
  text-align: left;
  color: var(--text-primary);
}
.rb_details .column1,
.rb_details .column2 {
  width: 49%;
}

.balance_transfer_wrap {
  display: flex;
  width: 80%;
  margin: 50px auto;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 1%;
}
.balance_transfer_banner img {
  width: 100%;
}
.balance_transfer_item {
  flex-basis: 49%;
}
.balance_transfer_item input[type="radio"] {
  display: none;
}
.balance_transfer_radio_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 5px 25px;
  border: 2px solid var(--border-dark);
  border-radius: var(--btn-radius);
  font-size: 26px;
  cursor: pointer;
}
.balance_transfer_item
  input[type="radio"]:checked
  + .balance_transfer_radio_btn {
  border: 2px solid var(--main-color);
  box-shadow: 0 0 16px -6px rgba(0, 0, 0, 0.5);
  color: var(--main-color);
}
.balance_transfer_item
  input[type="radio"]:checked
  + .balance_transfer_radio_btn
  h3 {
  color: var(--main-color);
}

/*EVENT_DETAIL*/
/* 이벤트 line. 2085 */
.templat .content_body_templat1 .win_area .team_box > div {
  max-width: 100%;
  height: 180px;
  border: 1px solid var(--white);
}
.templat .content_body_templat1 .rank_area ul li .team_box {
  width: 90%;
  margin: 0 0 30px 0px;
}
.templat .content_body_templat2 .win_area .team_box > div {
  max-width: 100%;
  height: 180px;
  border: 1px solid var(--white);
}
.templat .content_body_templat2 .rank_area ul li .team_box {
  width: 90%;
  margin: 0 0 30px 0px;
}
.templat .content_body_templat3 {
  width: 100%;
  height: 220px;
  overflow-y: auto;
}
.templat .content_body_templat3 .win_area {
  width: 250px;
  margin: 0 auto;
  text-align: center;
}
.templat .content_body_templat3 .win_area .team_box > div {
  max-width: 100%;
  height: 180px;
  border: 1px solid var(--white);
}
.templat .content_body_templat3 .win_area .team_box {
  margin-bottom: 50px;
}
.templat .content_body_templat3 .rank_area {
  width: 100%;
  overflow-y: auto;
}
.templat .content_body_templat3 .rank_area ul {
  width: 600px;
  overflow: hidden;
  text-align: center;
}
.templat .content_body_templat3 .rank_area ul li {
  width: 150px;
  box-sizing: border-box;
  text-align: center;
}
.templat .content_body_templat3 .rank_area ul li .team_box {
  width: 90%;
  margin: 0 0 30px 0px;
}
.templat .content_body_templat3 .rank_area .team_box {
  margin-bottom: 70px;
}
.templat .content_body_templat3 button {
  width: 400px;
  height: 80px;
  border-radius: var(--btn-radius);
  background-color: var(--orange);
  color: var(--text-secondary);
  font-size: 40px;
}
.templat .team_box > div {
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid var(--white);
  box-sizing: border-box;
}
.templat .team_box > div > img {
  max-width: 100%;
  max-height: 100%;
}

/*leaderboard*/
.leaderboard_section .notice_area {
  background-color: var(--bg-primary);
}
.leaderboard_section .evt_detail {
  width: 100%;
  background: var(--white)
    url("/r/front/img/event/leaderboard/v2/leaderboard_bg.jpg") no-repeat;
  background-size: 100% 765px;
}
.leaderboard_section .evt_detail .ldrboard_position {
  margin: auto;
}
.leaderboard_section .evt_info.leaderboard_table {
  margin: auto;
}

.ldrboard_position {
  position: relative;
  width: 100%;
  max-width: 1380px;
  height: 550px;
  margin-top: 35px;
  background: url("/r/front/img/event/leaderboard/new/ldrboard_title.png")
    no-repeat;
  background-size: 500px;
  background-position: top center;
}
.ldrboard_position > div > div {
  position: absolute;
  bottom: 0;
  width: 307px;
  height: 185px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 20px;
}
.ldrboard_position .position_middle {
  left: 424px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 25px;
}
.ldrboard_position .position_left {
  left: 175px;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 25px;
}
.ldrboard_position .position_right {
  right: 165px;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 25px;
}
.ldrboard_position .position_left.prize_1 {
  left: 150px;
}
.ldrboard_position .position_right.prize_1 {
  right: 150px;
}
.ldrboard_position .position_middle.prize_1 .rank_pic {
  width: 100%;
  height: 300px;
  display: block;
  background: url("/r/front/img/event/leaderboard/v2/top1_middle.png") no-repeat;
  background-size: 300px;
  background-position: 50% 50%;
}
.ldrboard_position .position_left.prize_1 .rank_pic {
  width: 100%;
  height: 300px;
  display: block;
  background: url("/r/front/img/event/leaderboard/v2/top1_left.png") no-repeat;
  background-size: 300px;
  background-position: 50% 50%;
}
.ldrboard_position .position_right.prize_1 .rank_pic {
  width: 100%;
  height: 300px;
  display: block;
  background: url("/r/front/img/event/leaderboard/v2/top1_middle.png") no-repeat;
  background-size: 300px;
  background-position: 50% 50%;
}
.ldrboard_position .position_left.prize_2 .rank_pic {
  width: 100%;
  height: 220px;
  display: block;
  background: url("/r/front/img/event/leaderboard/v2/top2_left.png") no-repeat;
  background-size: 220px;
  background-position: 50% 50%;
}
.ldrboard_position .position_right.prize_2 .rank_pic {
  width: 100%;
  height: 220px;
  display: block;
  background: url("/r/front/img/event/leaderboard/v2/top2_right.png") no-repeat;
  background-size: 220px;
  background-position: 50% 50%;
}
.ldrboard_position .position_right.prize_3 .rank_pic {
  width: 100%;
  height: 220px;
  display: block;
  background: url("/r/front/img/event/leaderboard/v2/top3_right.png") no-repeat;
  background-size: 220px;
  background-position: 50% 50%;
}
.ldrboard_position .ldrboard_date {
  position: absolute;
  top: 70px;
  width: 100%;
  color: var(--text-primary);
  font-size: 16px;
  text-align: center;
}
.ldrboard_position .main_wrap {
  width: 300px;
}

.ldrboard_position .prize_1 .detail_wrap {
  width: 220px;
  margin: auto;
}
.ldrboard_position .prize_1 .detail_wrap h3 {
  width: 100%;
  margin: 5px 0 0;
  padding: 0;
  color: var(--text-primary);
  font-size: 30px;
  font-weight: bold;
  display: block;
}
.ldrboard_position .prize_1 .detail_wrap .details .row .label {
  width: 35%;
  padding: 5px 0;
  color: var(--text-primary);
  font-size: 16px;
  text-align: left;
}
.ldrboard_position .prize_1 .detail_wrap .details .row .content {
  width: 60%;
  padding: 5px 0;
  color: var(--text-primary);
  font-size: 16px;
  text-align: right;
}
.ldrboard_position .prize_2 .detail_wrap {
  width: 220px;
  margin: auto;
}
.ldrboard_position .prize_2 .detail_wrap h3 {
  width: 100%;
  margin: 5px 0 0;
  padding: 0;
  color: var(--text-primary);
  font-size: 30px;
  font-weight: bold;
  display: block;
}
.ldrboard_position .prize_2 .detail_wrap .details .row .label {
  width: 35%;
  padding: 5px 0;
  color: var(--text-primary);
  font-size: 16px;
  text-align: left;
}
.ldrboard_position .prize_2 .detail_wrap .details .row .content {
  width: 60%;
  padding: 5px 0;
  color: var(--text-primary);
  font-size: 16px;
  text-align: right;
}
.ldrboard_position .prize_3 .detail_wrap {
  width: 220px;
  margin: auto;
}
.ldrboard_position .prize_3 .detail_wrap h3 {
  width: 100%;
  margin: 5px 0 0;
  padding: 0;
  color: var(--text-primary);
  font-size: 30px;
  font-weight: bold;
  display: block;
}
.ldrboard_position .prize_3 .detail_wrap .details .row .label {
  width: 35%;
  padding: 5px 0;
  color: var(--text-primary);
  font-size: 16px;
  text-align: left;
}
.ldrboard_position .prize_3 .detail_wrap .details .row .content {
  width: 60%;
  padding: 5px 0;
  color: var(--text-primary);
  font-size: 16px;
  text-align: right;
}

.event_section .evt_info.leaderboard_table {
  padding: 0;
  width: 100%;
  max-width: 1380px;
  background: none;
}
.event_section .evt_info.leaderboard_table .info_table {
  margin-top: 15px;
}
.event_section .evt_info.leaderboard_table .info_table tr:first-child td {
  border-bottom: 1px solid var(--white);
}
.event_section .evt_info.leaderboard_table .info_table th {
  position: relative;
  padding: 10px 0;
  border-bottom: 1px solid var(--white);
  color: var(--text-secondary);
  text-align: center;
}
.event_section .evt_info.leaderboard_table .info_table th:after {
  position: absolute;
  top: 18px;
  right: 0;
  width: 1px;
  background-color: var(--bg-dark-grey);
  content: "";
}
.event_section .evt_info.leaderboard_table .info_table th:last-child:after {
  display: none;
}
.event_section
  .evt_info.leaderboard_table
  .tab_board_contents
  .my_list_cont
  .my_board {
  margin-bottom: 20px;
  width: 100%;
}
.event_section
  .evt_info.leaderboard_table
  .tab_board_contents
  .my_list_cont
  .my_board
  tr {
  background-color: #faf3ff;
}
.event_section
  .evt_info.leaderboard_table
  .tab_board_contents
  .my_list_cont
  .my_board
  tr.active {
  background-color: #260074;
}
.event_section
  .evt_info.leaderboard_table
  .tab_board_contents
  .my_list_cont
  .my_board
  tr.active
  td {
  color: var(--text-primary);
}
.event_section
  .evt_info.leaderboard_table
  .tab_board_contents
  .my_list_cont
  .my_board
  tr
  td.table_prize_1 {
  width: 130px;
  background-image: url(/r/front/img/event/leaderboard/ldrboard_icon.png);
  background-repeat: no-repeat;
  background-size: 50px;
  background-position: 0px 0;
}
.event_section
  .evt_info.leaderboard_table
  .tab_board_contents
  .my_list_cont
  .my_board
  tr
  td.table_prize_2 {
  width: 130px;
  background-image: url(/r/front/img/event/leaderboard/ldrboard_icon.png);
  background-repeat: no-repeat;
  background-size: 50px;
  background-position: 0px -50px;
}
.event_section
  .evt_info.leaderboard_table
  .tab_board_contents
  .my_list_cont
  .my_board
  tr
  td.table_prize_3 {
  width: 130px;
  background-image: url(/r/front/img/event/leaderboard/ldrboard_icon.png);
  background-repeat: no-repeat;
  background-size: 50px;
  background-position: 0px -100px;
}
.event_section
  .evt_info.leaderboard_table
  .tab_board_contents
  .my_list_cont
  .my_board
  tr
  td {
  position: relative;
  padding-top: 15px;
  color: var(--text-secondary);
  text-align: center;
}
.event_section
  .evt_info.leaderboard_table
  .tab_board_contents
  .my_list_cont
  .my_board
  tr
  td
  .myposition {
  position: absolute;
  top: 14px;
  left: 3px;
}

/*hide bottom btn*/
.leaderboard_section .bts {
  display: none;
}

/*footer*/
.loading-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

/*FOOTER*/
.footer {
  padding: 0 0 20px;
  background-color: var(--bg-dark-grey);
}
.footer .util {
  position: relative;
  width: 100%;
  max-width: 1380px;
  margin: auto;
  padding: 30px 0 0 0;
  border: 0;
}
.footer .util .inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}
.footer .util .inner > :nth-child(2) {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.footer .util .sitemap {
  margin-top: 50px;
  display: flex;
  justify-content: end;
  overflow: hidden;
  gap: 20px;
}
.footer .util .sitemap > li > ul {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
}
.footer .util .sitemap > li > ul > li > p {
  padding-bottom: 20px;
  color: var(--text-primary);
  display: none;
}
.footer .util .sitemap > li > ul > li {
  position: relative;
}
.footer .util .sitemap > li > ul > li:first-child {
  display: none;
}
.footer .util .sitemap > li > ul > li > a {
  color: var(--text-grey);
  font-weight: bold;
  cursor: pointer;
}
.footer .util .sitemap > li > ul > li > a:hover {
  color: var(--text-primary);
}
.footer .util .sitemap > li > ul > li .comment {
  color: var(--text-grey);
}
.footer .util .sitemap > div {
  display: none;
}
.footer .util .sitemap > div > p {
  padding-bottom: 10px;
  color: var(--text-grey);
  font-size: 16px;
  font-weight: bold;
}
.footer .util .sitemap > div > ul > li a {
  color: var(--text-grey);
  font-weight: bold;
  cursor: pointer;
}
.footer .util .sitemap > div > ul > li a:hover {
  color: var(--text-input);
  font-weight: bold;
}
* .footer > .cs > .inner > .sitemap {
  display: flex;
}
.footer .util .inner .connectus .tit {
  padding-bottom: 20px;
  color: var(--text-grey);
  font-size: 16px;
  font-weight: bold;
}
.footer .util .inner .connectus ul {
  overflow: hidden;
  display: flex;
}
.footer .util .inner .connectus .noti {
  padding-top: 15px;
  color: var(--text-grey);
}
/*footer cs*/
.footer .cs {
  position: relative;
  width: 100%;
  height: auto;
  padding: 30px 0;
  box-sizing: border-box;
  background-color: var(--bg-secondary);
}
.footer .cs .inner {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.footer .cs .inner .tit_help {
  color: var(--text-primary);
  font-size: 30px;
  font-weight: bold;
}
.footer .cs .inner .sec01 {
  color: var(--text-grey);
  font-size: 16px;
}
.footer .cs .inner .sec01 strong {
  display: block;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: bold;
}
.footer .cs .inner .sec01 a {
  margin-top: 10px;
  padding-left: 30px;
  color: var(--main-color);
  font-size: 16px;
  font-weight: bold;
  display: block;
}
.footer .cs .inner .sec01 a.tel {
  background: url(/r/front/img/template5/comm/tel.png) no-repeat;
}
.footer .cs .inner .sec01 a.tel2 {
  margin-top: 5px;
  padding-left: 30px;
  background: url(/r/front/img/template5/comm/tel2.png) no-repeat;
}
.footer .cs .inner .sec02 strong {
  display: block;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: bold;
}
.footer .cs .inner .sec02 p {
  color: var(--text-grey);
  font-size: 16px;
}
.footer .cs .inner .csBtns a {
  position: relative;
  display: block;
  width: auto;
  padding: 10px 30px;
  border: 1px solid var(--white);
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}
.footer .cs .inner .csBtns a:after {
  position: absolute;
  top: 15px;
  right: 12px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid var(--white);
  content: "";
}
.footer .cs .inner .csBtns a:first-child {
  margin-bottom: 10px;
}
.footer .cs .inner .csBtns a:hover {
  border: 1px solid var(--btn-primary-border);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.footer .cs .inner .csBtns a:hover:after {
  border-left: 12px solid var(--black);
}
/*END footer cs*/
.footer .foot_con {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.footer .foot_con > p.copy {
  padding: 5px;
  border: none;
  color: var(--text-grey);
  text-align: center;
}
.footer .foot_con > p.foot_logo {
  width: 220px;
  height: 55px;
  background: var(--main-footer_logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.footer .foot_con > div.partners {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}
.footer .foot_con > div.partners > p {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  color: var(--text-grey);
}
.footer .foot_con > div.partners > ul {
  width: 100%;
  padding: 50px 0 100px;
}
.footer .foot_con > div.partners > ul > li {
  width: 12.5%;
  padding: 0 1%;
  text-align: center;
  box-sizing: border-box;
}
.footer .foot_con > div.partners > ul > li img {
  width: 100%;
}
.footer .util .inner:after {
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 100%;
  max-width: 1380px;
  height: 1px;
  background-color: var(--bg-secondary);
  content: "";
}
body .footer .foot_con > div.partners > .swiper-wrapper {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}

#footerBanner .footSlider {
  height: 56px;
  margin-right: 40px;
  flex-shrink: 1;
}
#footerBanner .footSlider img {
  height: 30px;
}

.footer_notice_channel {
  position: relative;
  top: 0;
  left: 0;
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  flex-direction: column;
  gap: 15px;
}
.footer_notice_channel h4 {
  text-align: center;
}
.footer_notice_channel .channel_wrap {
  justify-content: center;
}

.popupTile table {
  width: 100%;
}
.popupTile table,
.popupTile thead,
.popupTile tbody,
.popupTile tfoot,
.popupTile tr,
.popupTile th,
.popupTile td {
  padding: 0;
  -webkit-border-horizontal-spacing: 0;
  -webkit-border-vertical-spacing: 0;
}
.popupTile table .tile_item {
  cursor: pointer;
}
.popupTile table .tile_item button {
  width: 100%;
}
.popupTile table .tile_item img {
  width: 100% !important;
  height: auto !important;
}

/*WBC STYLE FOOTER*/
.footer .cs .inner .sitemap > li {
  margin-right: 35px;
}
.footer .cs .inner .sitemap > li.map4 {
  margin-right: 50px;
}
.footer .cs .inner .sitemap > li.map4 ul {
  height: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.footer .cs .inner .sitemap > li.map4 ul li {
  padding-right: 15px;
}
.footer .cs .inner .sitemap > li.map4 ul li:nth-child(7),
.footer .cs_style_2 .inner .sitemap > li.map4 ul li:nth-child(12),
.footer .cs_style_2 .inner .sitemap > li.map4 ul li:nth-child(17) {
  padding-top: 40px;
}
.footer .cs .inner .sitemap > li > ul > li > p {
  padding-bottom: 5px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: bold;
}
.footer .cs .inner .sitemap > li > ul > li > a {
  color: var(--text-grey);
  cursor: pointer;
}
.footer .cs .inner .sitemap > li > ul > li > a:hover {
  color: var(--text-primary);
}
.footer .cs .inner .sitemap > li > ul > li .comment {
  color: var(--text-grey);
}
/*END FOOTER*/

/*EVENT ATTENDANCE*/
#product_list {
  scrollbar-face-color: #eee;
  scrollbar-track-color: #fff;
  scrollbar-arrow-color: none;
  scrollbar-highlight-color: #eee;
  scrollbar-3dlight-color: none;
  scrollbar-shadow-color: #eee;
  scrollbar-darkshadow-color: none;
}
#product_list::-webkit-scrollbar {
  width: 8px;
}
#product_list::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
  display: block;
}
#product_list::-webkit-scrollbar-track {
  background-color: var(--bg-primary);
}
#product_list::-webkit-scrollbar-thumb {
  width: 50px;
  height: 50px;
  background: rgba(85, 85, 85);
}

.tab-content {
  border-radius: 0 0 8px 8px;
  display: none;
}
.tab-content.active {
  padding: 15px;
  border: 1px solid var(--main-color);
  display: block;
}
.nav-tab-wrapper {
  margin-top: 20px;
  overflow: hidden;
}
.nav-tab-wrapper a.nav-tab {
  padding: 15px 0;
  border-radius: 8px 8px 0 0;
  background-color: var(--bg-secondary);
  text-align: center;
  display: block;
}
.nav-tab-wrapper a.nav-tab.nav-tab-active {
  border: 1px solid var(--btn-primary-border);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-weight: bold;
}

.event_popup_wrap {
  position: fixed;
  top: calc(35% - 130px);
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.event_popup {
  width: 700px;
  margin: auto;
  background-color: var(--bg-dark-grey);
}
.event_popup_title {
  padding: 15px;
  overflow: hidden;
  background-color: var(--white);
  display: flex;
  justify-content: space-between;
}
.event_popup_title h2 {
  padding: var(--btn-padding);
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: bold;
}
.event_popup_title a {
  padding: 10px 15px;
  border: 2px solid var(--main-color);
  border-radius: var(--btn-radius);
  background-color: var(--main-color);
}
.event_popup_content {
  padding: 15px;
  border: 1px solid var(--white);
}
.event_popup_content .reward_wrap {
  margin-bottom: 20px;
}
.event_popup_content .reward_wrap #product_list {
  max-height: 385px;
  overflow-y: auto;
}
.event_popup_content .reward_wrap h3 {
  margin-bottom: 10px;
  color: var(--text-primary);
  text-align: left;
}
.event_popup_content .reward_wrap .reward_box {
  margin-bottom: 5px;
  border: 1px solid var(--border-light);
  background-color: var(--bg-dark-grey);
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
.event_popup_content .reward_wrap .reward_box .reward_img {
  width: 120px;
  padding: var(--btn-padding);
  display: flex;
  align-items: center;
}
.event_popup_content .reward_wrap .reward_box .reward_img img {
  width: 100%;
}
.event_popup_content .reward_wrap .reward_box .reward_detail {
  width: 275px;
  padding: 20px 15px;
}
.event_popup_content .reward_wrap .reward_box .reward_detail h4 {
  padding-bottom: 5px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: bold;
}
.event_popup_content .reward_wrap .reward_box .reward_detail p {
  padding-top: 5px;
  color: var(--text-primary);
  font-size: 16px;
}
.event_popup_content .reward_wrap .reward_box .reward_detail p.prize {
  color: var(--main-color);
  font-weight: bold;
}
.event_popup_content .reward_wrap .reward_box .reward_btn {
  width: 125px;
  padding: 20px 10px;
}
.event_popup_content .reward_wrap .reward_box .reward_btn a {
  display: block;
  padding: 15px;
  border: 2px solid var(--main-color);
  border-radius: var(--btn-radius);
  background: none;
  color: var(--main-color);
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
.event_popup_content .reward_wrap .reward_box .reward_btn a:hover {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.event_popup_content .reward_wrap .reward_box .reward_btn a.not_achieve {
  border: 1px solid var(--white);
  color: var(--text-primary);
  cursor: pointer;
}
.event_popup_content .reward_wrap .reward_box .reward_btn a.not_achieve:hover {
  background-color: var(--white);
  color: var(--text-input);
}
.event_popup_content .close_btn a {
  display: block;
  width: 125px;
  margin: 15px auto;
  padding: 15px;
  border: 2px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
.event_popup_content .close_btn a:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}

* {
  margin: 0;
  padding: 0;
}

#calendarBody {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 50px;
  padding-top: 30px;
  overflow: hidden;
  text-align: center;
}
#cal_table_head {
  width: 100%;
  margin-bottom: 40px;
  color: var(--text-primary);
  font-size: 35px;
  font-weight: bold;
}
#cal_table_head button.prev {
  width: 200px;
  color: var(--text-primary);
  font-size: 35px;
  font-weight: bold;
}
#cal_table_head button.next {
  width: 200px;
  color: var(--text-primary);
  font-size: 35px;
  font-weight: bold;
}
#cal_table_head span {
  font-size: 22px;
  font-weight: bold;
}
#cal_table_body {
  width: 100%;
  border: 1px solid var(--border-dark);
}
#cal_table_body td {
  text-align: center;
  border-left: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
}
#cal_table_body th {
  padding: 15px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
#cal_table_body thead.cal_date th {
  font-size: 1.5rem;
}
#cal_table_body thead.cal_date th button {
  border: none;
  font-size: 1.5rem;
}
#cal_table_body thead.cal_week th {
  background-color: var(--bg-dark-grey);
  color: var(--text-primary);
}
#cal_table_body thead.cal_week th.sun {
  color: var(--red);
  font-size: 20px;
  font-weight: bold;
  border-bottom: 1px solid var(--border-dark);
}
#cal_table_body thead.cal_week th.mon {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: bold;
  border-left: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
}
#cal_table_body thead.cal_week th.tue {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: bold;
  border-left: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
}
#cal_table_body thead.cal_week th.wed {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: bold;
  border-left: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
}
#cal_table_body thead.cal_week th.thu {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: bold;
  border-left: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
}
#cal_table_body thead.cal_week th.fri {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: bold;
  border-left: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
}
#cal_table_body thead.cal_week th.sat {
  color: var(--light-blue);
  font-size: 20px;
  font-weight: bold;
  border-left: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
}
#cal_table_body .css_mid .css_sub {
  color: var(--text-primary) !important;
}
#cal_table #cal_table_td {
  border: 0;
}
#cal_table #cal_table_td #cal_table_sub {
  height: 60px;
}

.css_star {
  position: relative;
  top: 10px;
  left: 0px;
}
.stamp_stop {
  position: relative;
  top: 0;
  left: 0;
  z-index: 0;
  transform: rotate(-15deg) scale(1);
  pointer-events: all;
}
.stamp_start {
  position: relative;
  top: 0;
  left: 0;
  z-index: 0;
  transform: rotate(0deg) scale(1);
  opacity: 0;
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-delay: 0.5s;
  animation-delay: 2.5s;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  pointer-events: all;
}

@keyframes pulse {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.5;
    transform-origin: 50% 50%;
    transform: rotate(-2deg) scale(5);
    transition: all 0.3s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  100% {
    opacity: 1;
    transform: rotate(-15deg) scale(1);
  }
}

.selectBoxChangeCurrencyStyle select {
  width: 40%;
}
.selectBoxShortStyle select {
  position: relative;
  margin-left: 30px;
  width: 240px;
  cursor: pointer;
}
.selectBoxLongStyle select {
  position: relative;
  margin-left: 30px;
  width: 600px;
  cursor: pointer;
}
#withdrawAccountList_simple tr {
  height: 30px;
}
#withdrawAccountList_simple tr td {
  background-color: var(--white);
  color: var(--text-secondary);
  text-align: center;
}
#withdrawAccountList_simple tr td a input {
  width: 60px;
}
.simpleWithdrawList tbody {
  background-color: var(--white);
}

.pwreset_section {
  padding: 0 0 100px 0;
}
.pwreset_section .pwresetbox {
  position: relative;
  width: 360px;
  margin: 0 auto;
  padding: 45px 30px 20px;
  border-radius: var(--btn-radius);
  box-shadow: 1px 5px 10px #0c0c0c;
  box-sizing: border-box;
}
.pwreset_section .pwresetbox .title {
  margin-bottom: 10px;
  color: var(--text-grey);
  font-size: 20px;
  text-align: center;
}
.pwreset_section .pwresetbox .icon_mem {
  position: absolute;
  top: -28px;
  left: 50%;
  margin-left: -30px;
  display: block;
  width: 56px;
  height: 56px;
  background: url(/r/front/img/member/ico_pwreset.png) 0 0 no-repeat;
}
.pwreset_greeting {
  position: relative;
  width: 100%;
  height: 272px;
}
.pwreset_greeting .inner {
  width: 1040px;
  margin: 0 auto;
  padding: 70px 0 0 40px;
}
.pwreset_greeting .inner .tit {
  color: var(--text-primary);
  font-size: 33px;
}
.pwreset_greeting .inner .txt {
  margin-top: 20px;
  color: var(--text-primary);
  font-size: 16px;
}
.pwreset_greeting .inner .txt em {
  color: var(--main-color);
  font-size: 16px;
}
.pwreset_greeting .visual_img {
  position: absolute;
  top: 42px;
  left: 50%;
  margin-left: 240px;
  display: block;
  width: 393px;
  height: 320px;
  background: url(/r/front/img/member/bg_pwreset.png) 0 0 no-repeat;
}
.pwreset_section .pwresetbox .inp_pwreset {
  width: 100%;
  margin-top: 30px;
}
.pwreset_section .pwresetbox .inp_pwreset > li {
  position: relative;
  height: 30px;
  margin-top: 25px;
  padding-left: 45px;
  border-bottom: 2px solid var(--border-light);
  background: url(/r/front/img/member/icons_login.png) -99px 0 no-repeat;
}
.pwreset_section .pwresetbox .inp_pwreset > li > input {
  width: 225px;
}
.pwreset_section .pwresetbox .inp_pwreset > li.pw {
  background-position: 10px -35px;
}
.pwreset_section
  .pwresetbox
  .inp_pwreset
  > li
  > input::-webkit-input-placeholder {
  color: var(--text-grey);
  font-weight: 400;
}
.pwreset_section .pwresetbox .inp_pwreset > li > input:-ms-input-placeholder {
  color: var(--text-grey);
  font-weight: 400;
}
.pwresetbox .bot_btn {
  margin-top: 35px;
  text-align: center;
}
.pwresetbox .bot_btn .bt_pwreset {
  width: 140px;
  height: 40px;
  border: 1px solid var(--main-color);
  border-radius: var(--btn-radius);
  background-color: var(--bg-primary);
  color: var(--main-color);
  font-weight: bold;
  box-sizing: border-box;
  cursor: pointer;
}
.pwresetbox .bot_btn .bt_pwreset:hover {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

/*league victory*/

.evt_cont {
  width: 820px;
  margin: 0 auto;
}
.evt_cont.victory_cont {
  margin: 20px auto;
  padding: 30px 20px;
  background-color: var(--bg-dark-grey);
}
.evt_tab_wrap {
  margin-bottom: 20px;
  overflow: hidden;
}
.evt_tab_wrap li {
  width: 50%;
  background-color: var(--bg-dark-grey);
}
.evt_tab_wrap li.active {
  background-color: var(--main-color);
}
.evt_tab_wrap li.active a {
  color: var(--text-secondary);
}
.evt_tab_wrap li a {
  display: block;
  padding: var(--btn-padding);
  color: var(--text-primary);
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.evt_slide_wrap {
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
}
.evt_slide_wrap ul {
  width: 90%;
  margin: auto;
  display: block;
  overflow: hidden;
  white-space: nowrap;
}
.evt_slide_wrap li a {
  display: block;
  padding: 0 10px;
  color: var(--text-grey);
  font-size: 20px;
}
.evt_slide_wrap li.active a {
  color: var(--text-primary);
  font-weight: bold;
}
.evt_slide_wrap a.left-arrow {
  position: absolute;
  top: 5px;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent var(--main-color) transparent transparent;
}
.evt_slide_wrap a.right-arrow {
  position: absolute;
  top: 5px;
  right: 0;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent var(--main-color);
}
.evt_date_wrap {
  margin-bottom: 20px;
  padding: 0 0 10px;
  overflow-x: auto;
  white-space: nowrap;
}
.evt_date_wrap li {
  width: 155px;
  margin: 0 5px;
  border: 2px solid transparent;
  border-radius: var(--btn-radius);
  background-color: var(--bg-dark-grey);
}
.evt_date_wrap li p {
  color: var(--text-grey);
}
.evt_date_wrap li.active {
  border-color: var(--main-color);
}
.evt_date_wrap li.active .status {
  color: var(--main-color);
}
.evt_date_wrap li.active .round {
  color: var(--text-primary);
}
.evt_date_wrap li a {
  display: block;
  padding: var(--btn-padding);
  color: var(--text-grey);
  font-weight: bold;
  text-align: center;
}
.evt_date_wrap li a .round {
  font-size: 20px;
  font-weight: bold;
}
.evt_date_wrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.evt_date_wrap::-webkit-scrollbar-track {
  background-color: var(--bg-dark-grey);
}
.evt_date_wrap::-webkit-scrollbar-thumb {
  border-radius: var(--btn-radius);
  background-color: #888;
}

.evt_prediction_rate {
  margin: 15px 0 30px;
  padding: 15px;
  background-color: var(--bg-dark-grey);
  text-align: center;
}
.evt_prediction_rate p {
  color: var(--text-primary);
  font-size: 16px;
}
.evt_prediction_rate .rate span {
  color: var(--main-color);
  font-size: 22px;
  font-weight: bold;
}

.evt_content {
  text-align: center;
}
.evt_content p {
  color: var(--text-grey);
  font-size: 16px;
}
.evt_content .evt_main_tit {
  color: var(--text-primary);
  font-size: 50px;
  font-weight: bold;
}
.evt_content .evt_tit {
  color: var(--main-color);
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}
.evt_content .reward {
  color: var(--text-primary);
  font-size: 25px;
}

.match_date {
  color: var(--text-grey);
  font-size: 16px;
}
.match_prediction_wrap {
  margin-bottom: 20px;
  display: flex;
}
.match_prediction_wrap input[type="radio"] {
  margin: 1px;
  -webkit-appearance: none;
  appearance: none;
}
.match_prediction_wrap label {
  position: relative;
  width: 33.33%;
  height: 70px;
  margin: auto;
  padding: var(--btn-padding);
  background-color: var(--bg-dark-grey);
  color: var(--text-grey);
  transition: 0.5s;
}
.match_prediction_wrap label.left {
  border-radius: 5px 0 0 5px;
}
.match_prediction_wrap label.center {
  text-align: center;
}
.match_prediction_wrap label span {
  display: block;
  font-size: 20px;
}
.match_prediction_wrap label span.percentage {
  font-size: 25px;
  font-weight: bold;
}
.match_prediction_wrap label img {
  margin: auto;
  padding: 0 10px;
  width: 64px;
  height: 64px;
  display: block;
}
.match_prediction_wrap label.right {
  border-radius: 0 5px 5px 0;
  text-align: right;
}
.match_prediction_wrap input[type="radio"]:checked + label {
  background-color: var(--main-color);
  color: var(--text-primary);
}
.match_prediction_wrap.type2 {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.match_prediction_wrap.type2 > div {
  width: 33%;
  margin-top: 15px;
}
.match_prediction_wrap.type2 .team img {
  width: 250px;
  height: 250px;
}
.match_prediction_wrap.type2 .score p {
  margin: 5px 0;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: bold;
}
.match_prediction_wrap.type2 .score span {
  font-size: 20px;
}
.match_prediction_wrap.type2 .score .final_score {
  padding: 0 10px;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: bold;
}
.match_prediction_wrap.type2 p {
  margin: 10px 0;
  color: var(--text-primary);
}
.match_prediction_wrap.type2 input {
  text-align: center;
}
.match_prediction_wrap.type2.won .score p {
  color: var(--main-color);
}
.match_prediction_wrap.type2.lost .team img {
  filter: grayscale(100%);
}

.winner_wrap {
  background-color: var(--bg-dark-grey);
  text-align: center;
}
.winner_header {
  padding: 15px;
  background-color: var(--bg-dark-grey);
}
.winner_header h2 {
  color: var(--text-primary);
  font-size: 22px;
  font-weight: bold;
}
.winner_header h2 span {
  color: var(--text-primary);
  font-size: 28px;
}
.winner_header p {
  color: var(--text-grey);
  font-size: 16px;
}
.winner_wrap .winner_content {
  padding: 20px 10px;
}
.winner_wrap .winner_box {
  margin: 5px;
  width: 200px;
  padding: 10px 5px;
  border: 2px solid var(--main-color);
  border-radius: var(--btn-radius);
  background-color: var(--bg-dark-grey);
}
.winner_wrap .winner_box img {
  width: 32px;
  height: 32px;
}
.winner_wrap .winner_box p {
  color: var(--text-grey);
  font-size: 16px;
}
.winner_wrap .winner_box span {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: bold;
}

.evt_submit {
  min-width: 140px;
  margin: 10px 0;
  padding: var(--btn-padding);
  border: 2px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: 16px;
  cursor: pointer;
}
.evt_submit:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}

.manage_selected {
  background-color: #444 !important;
  color: var(--text-primary) !important;
}

.layer_item_set {
  position: absolute;
  width: 99%;
  height: 250px;
  box-sizing: border-box;
  z-index: 10;
  border-radius: var(--btn-radius);
  box-shadow: 0px 0px 1px 1px #222;
}
.layer_item_set .thumb {
  position: relative;
  width: 100%;
  height: 100%;
}
.layer_item_set .thumb > img {
  width: 100%;
}
.layer_item_set .thumb > a {
  display: block;
  height: 100%;
  background-size: 100%;
}
.layer_item_set .thumb * {
  outline: 0 !important;
}
.layer_item_set .thumb .bt_play {
  position: absolute;
  bottom: 15px;
  right: 5px;
  width: auto;
  height: 24px;
  margin-left: -50px;
  border: 1px solid var(--white);
  border-radius: var(--btn-radius);
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  text-align: center;
  z-index: 100;
  cursor: pointer;
  white-space: nowrap;
}
.layer_item_set .thumb .bt_ex {
  position: absolute;
  top: 120px;
  left: 50%;
  width: 122px;
  height: 39px;
  margin-left: -60px;
  box-sizing: border-box;
  color: var(--text-primary);
  font-weight: bold;
  text-align: center;
  z-index: 100;
  cursor: pointer;
}
.layer_item_set .thumb .bt_play:hover {
  border: 1px solid var(--main-color);
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--main-color);
}
.layer_item_set .thumb .bt_ex:hover {
  color: var(--main-color);
}
.layer_item_set .infobox {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 80px;
  padding: 30px 10px;
  box-sizing: border-box;
  z-index: 3;
  background: url(/r/front/img/comm/info_back.png) repeat-x;
}
.layer_item_set .infobox .title {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: bold;
}
.layer_item_set .infobox .title_en {
  margin-top: 5px;
  color: var(--text-grey);
  font-weight: bold;
}
.layer_item_set .infobox .bt_ex {
  position: absolute;
  top: 40px;
  right: 9px;
  width: 85px;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid var(--white);
  border-radius: var(--btn-radius);
  color: var(--text-primary);
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
.layer_item_set .infobox .bt_ex:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.layer_item_set .btns {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 100;
}
.layer_item_set .btns > li > a {
  font-size: 0px;
  text-indent: -99px;
}
.layer_item_set .btns > li .bt_favor {
  display: block;
  margin-bottom: 15px;
  width: 25px;
  height: 29px;
  background: url(/r/front/img/comm/bt_favor.png) 0 0 repeat;
  cursor: pointer;
}
.layer_item_set .btns > li .bt_favor:hover {
  background: url(/r/front/img/comm/bt_favor_hover.png) 0 0 repeat;
}
.layer_item_set .btns > li .bt_favor.on {
  background: url(/r/front/img/comm/bt_favor_on.png) 0 0 repeat !important;
}
.layer_item_set .btns > li .bt_caution {
  display: block;
  width: 29px;
  height: 29px;
  background: url(/r/front/img/comm/bt_caution.png) 0 0 repeat;
  cursor: pointer;
}
.layer_item_set .btns > li .bt_caution:hover {
  background: url(/r/front/img/comm/bt_caution_hover.png) 0 0 repeat;
}
.layer_item_set .gameLinkArea {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 218px;
  height: 218px;
  cursor: pointer;
}
.layer_item_set .gameLinkArea .layer_item_set {
  width: 219px;
  height: 220px;
}

.layer_item_set:before,
.layer_item_set:after,
.game_list > li:after,
.game_list > li:before {
  position: absolute;
  display: block;
  z-index: 100;
  border-radius: var(--btn-radius);
  background-color: var(--main-color);
  content: "";
  transition: all 0.3s ease;
}
.layer_item_set:before {
  top: 0;
  left: 0;
  right: 100%;
  height: 2px;
}
.layer_item_set:after {
  top: 0;
  right: 0;
  bottom: 100%;
  width: 2px;
}
.layer_item_set:hover:before {
  right: 0;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.layer_item_set:hover:after {
  bottom: 0;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.game_list > li:after {
  bottom: 60px;
  right: 0;
  left: 100%;
  height: 2px;
}
.game_list > li:before {
  bottom: 60px;
  left: 0;
  top: 100%;
  width: 2px;
}
.game_list > li:hover:after {
  left: 0;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.game_list > li:hover:before {
  top: 0;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.layer_item_big_set {
  position: absolute;
  width: 530px;
  height: 445px;
  padding: 0px;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: 0px 0px 1px 1px;
}
.layer_item_big_set .thumb {
  position: relative;
  width: 100%;
  cursor: pointer;
}
.layer_item_big_set .thumb * {
  outline: 0 !important;
}
.layer_item_big_set .thumb > img {
  width: 100%;
}
.layer_item_big_set .thumb > a {
  display: block;
  height: 100%;
  background-size: 100%;
}
.layer_item_big_set .thumb .bt_wrap {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 414px;
  background: url(/r/front/img/comm/bg_black60.png) 0 0 repeat;
  z-index: 2;
}
.layer_item_big_set .thumb .bt_play {
  position: absolute;
  top: 210px;
  left: 50%;
  width: 100px;
  height: 30px;
  margin-left: -50px;
  border: 1px solid var(--white);
  color: var(--text-primary);
  font-weight: bold;
  text-align: center;
  z-index: 100;
  cursor: pointer;
}
.layer_item_big_set .thumb .bt_ex {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 80px;
  height: 24px;
  margin-left: -50px;
  border: 1px solid var(--white);
  background-color: rgba(0, 0, 0, 0.3);
  color: var(--text-primary);
  text-align: center;
  z-index: 100;
  cursor: pointer;
}
.layer_item_big_set .thumb .bt_play:hover {
  border: 1px solid var(--main-color);
  background: url(/r/front/img/comm/bg_wh_20.png) 0 0 repeat;
  color: var(--main-color);
}
.layer_item_big_set .thumb .bt_ex:hover {
  border: 1px solid var(--main-color);
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--main-color);
}

.layer_item_big_set .infobox {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 80px;
  padding: 30px 10px;
  box-sizing: border-box;
  z-index: 3;
  background: url(/r/front/img/comm/info_back.png) repeat-x;
}
.layer_item_big_set .infobox .title {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: bold;
}
.layer_item_big_set .infobox .title_en {
  margin-top: 5px;
  color: var(--text-grey);
  font-weight: bold;
}
.layer_item_big_set .btns {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 100;
}
.layer_item_big_set .btns > li > a {
  font-size: 0px;
  text-indent: -99px;
}
.layer_item_big_set .btns > li .bt_favor {
  display: block;
  margin-bottom: 15px;
  width: 25px;
  height: 29px;
  background: url(/r/front/img/comm/bt_favor.png) 0 0 repeat;
  cursor: pointer;
}
.layer_item_big_set .btns > li .bt_favor:hover {
  background: url(/r/front/img/comm/bt_favor_hover.png) 0 0 repeat;
}
.layer_item_big_set .btns > li .bt_favor.on {
  background: url(/r/front/img/comm/bt_favor_on.png) 0 0 repeat !important;
}
.layer_item_big_set .btns > li .bt_caution {
  display: block;
  width: 29px;
  height: 29px;
  background: url(/r/front/img/comm/bt_caution.png) 0 0 repeat;
  cursor: pointer;
}
.layer_item_big_set .btns > li .bt_caution:hover {
  background: url(/r/front/img/comm/bt_caution_hover.png) 0 0 repeat;
}
.layer_item_big_set .gameLinkArea {
  position: absolute;
  top: 0;
  left: 0;
  width: 450px;
  height: 450px;
  cursor: pointer;
}

.layer_item_big_set:before,
.layer_item_big_set:after,
.game_list_wrap .big_banner:after,
.game_list_wrap .big_banner:before {
  position: absolute;
  display: block;
  z-index: 100;
  border-radius: var(--btn-radius);
  background-color: var(--main-color);
  content: "";
  transition: all 0.3s ease;
}
.layer_item_big_set:before {
  top: 0;
  left: 0;
  right: 100%;
  height: 2px;
}
.layer_item_big_set:after {
  top: 0;
  right: 0;
  bottom: 100%;
  width: 2px;
}
.layer_item_big_set:hover:before {
  right: 0;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.layer_item_big_set:hover:after {
  bottom: 0;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.game_list_wrap .big_banner:after {
  bottom: 120px;
  right: 0;
  left: 100%;
  height: 2px;
}
.game_list_wrap .big_banner:before {
  bottom: 120px;
  left: 0;
  top: 100%;
  width: 2px;
}
.game_list_wrap .big_banner:hover:after {
  left: 0;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.game_list_wrap .big_banner:hover:before {
  top: 0;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

/*占쎈눇?뙼?봿?뮝?뜝?럥?뿮 占쎈쐻占쎈윥獒뺚뮪?쐻占쎈윪?앗껊쐻占쎈윪?얠±?쐻占쎈윥占쎈쭬 ?뜝?뜦維?甕곕쪋?삕?땻占?*/

.sub_contents .user_guide_btn a {
  position: absolute;
  left: calc(50% - 73px);
  z-index: 1;
  display: none;
  width: 130px;
  padding: var(--btn-padding);
  border: 1px solid var(--btn-primary-border);
  background: url(/r/front/img/comm/user_guide_btn.png) 115px 50% no-repeat;
  background-size: 18px;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  cursor: pointer;
}
.sub_contents .user_guide_btn a:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}

.game_main_swiper {
  padding: 15px 0;
  overflow: hidden;
}
.slide_wrap,
.slide_wrap img {
  width: 350px;
  height: 350px;
}
.slide_wrap .overlay_content {
  position: absolute;
  bottom: 0;
  width: 320px;
  height: 50px;
  padding: 15px 15px 0;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.6699054621848739) 52%,
    rgba(0, 212, 255, 0) 100%
  );
}
.slide_wrap .overlay_content p {
  width: 220px;
  color: var(--text-primary);
}
.slide_wrap .overlay_content a {
  padding: 5px 10px;
  border: 1px solid var(--main-color);
  border-radius: var(--btn-radius);
  color: var(--main-color);
  font-size: 16px;
}
.tab_wrap .tab_list > li:first-child,
.tab_wrap .tab_list > li:nth-child(10) {
  margin-left: 0px;
}
.game_list_wrap .game_list.outer > li .badgeCoupon {
  position: absolute;
  bottom: 70px;
  left: 10px;
  width: 50px;
  height: 50px;
  background: url(/r/front/img/comm/badge_coupongame.svg) 100% no-repeat;
  background-size: contain;
}

#gameList {
  position: relative;
  z-index: 1;
}
/*#gameList>:nth-child(odd){background-color:#252525;}*/

.select_lang_flag {
  margin-left: 5px;
  padding: 10px 20px 10px 10px;
  border-radius: var(--btn-radius);
  background-color: var(--bg-grey);
}
.select_lang_flag ul {
  top: 43px;
  right: 0;
  width: 100%;
  border: 1px solid var(--border-dark);
  border-radius: var(--btn-radius);
  background-color: var(--bg-grey);
}
.select_lang_flag ul li {
  border-bottom: 1px solid #888;
  cursor: pointer;
}
.select_lang_flag ul li span {
  padding-left: 3px;
}
.select_lang_flag ul li:last-child {
  border-bottom: none;
}
.select_lang_flag ul li:hover {
  background-color: var(--bg-secondary);
}
.select_lang_flag ul li:hover span {
  color: var(--white);
}
.wrapper .header .inner .select_lang_flag ul li {
  margin: 5px !important;
}

.quick-main {
  width: 100%;
  max-width: 1380px;
  margin: 30px auto 0 auto;
  display: none;
}
.quick-main ul {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.quick-main ul li {
  flex: 1;
}
.quick-main ul li a {
  display: block;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
  cursor: pointer;
}
.quick-main ul li a:hover {
  transform: scale(1.04);
  filter: brightness(140%);
}
.quick-main ul li a img {
  width: 100%;
}

.event_chk_main {
  width: 495px !important;
}
.event_chk_main .event_check_main_list {
  height: 100%;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.main_section .contents .status .notice .noti_list #eventListChk .title {
  width: 428px !important;
}

/*SPORT QUICK*/
.cs_center.sport_quick {
  right: -280px !important;
}
.btnGameDetailHeader {
  position: fixed;
  left: 50%;
  z-index: 1000;
  display: none;
  margin: 1px 0 0 0;
  width: 40px;
  height: 30px;
  padding: 5px;
  border: 1px solid var(--border-dark);
  border-top: none;
  border-radius: 0 0 6px 6px;
  background-color: var(--bg-secondary);
  cursor: pointer;
  transition: 0.3s ease-in-out all;
}
.btnGameDetailHeader img {
  margin-top: 5px;
  transform: rotate(0deg);
  transition: 0.3s ease-in-out all;
}
.btnGameDetailHeader.on img {
  margin-top: 5px;
  transform: rotate(180deg);
}
.btnGameDetailQuick {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 1000;
  display: none;
  width: 22px;
  height: 40px;
  padding: 0 5px;
  border: 1px solid var(--border-dark);
  border-right: none;
  border-radius: 6px 0 0 6px;
  background-color: var(--bg-secondary);
  text-align: center;
  cursor: pointer;
  transition: 0.2s ease-in-out all;
}
.btnGameDetailQuick img {
  margin-top: -5px;
  transform: rotate(90deg);
  transition: 0.2s ease-in-out all;
}
.btnGameDetailQuick.on {
  right: 83px;
}
.btnGameDetailQuick.on img {
  transform: rotate(270deg);
}
.balance_crypto {
  width: 20px;
  height: 20px;
  background-size: contain;
}
.notice_channel_title {
  display: none;
}
.quick_menu .notice_channel_wrap a {
  width: auto !important;
}
.custom14Use {
  display: none !important;
}

.wrapper .header {
  position: relative;
  z-index: 21;
}
.wrapper .header.slide-header {
  overflow: hidden;
}
.wrapper_login .header {
  z-index: 21;
}
.wrapper .header .inner {
  position: relative;
  z-index: 2;
}
.header-snow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 89px;
}
.wrapper_login .header-snow {
  height: 89px;
  background: transparent;
}
.initial-snow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.initial-snow > * {
  position: absolute;
  top: -5vh;
  color: var(--text-primary);
  opacity: 0.75;
}

@keyframes snowfall {
  0% {
    transform: translate3d(var(--left-ini), 0, 0);
  }
  100% {
    transform: translate3d(var(--left-end), 110vh, 0);
  }
}
.snow:nth-child(2n) {
  font-size: 40px;
  filter: blur(1px);
}
.snow:nth-child(6n) {
  font-size: 30px;
  filter: blur(2px);
}
.snow:nth-child(10n) {
  font-size: 30px;
  filter: blur(5px);
}
.snow:nth-child(1) {
  --size: 0.8vw;
  --left-ini: 0vw;
  --left-end: -1vw;
  left: 70vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -1s;
}
.snow:nth-child(2) {
  --size: 0.2vw;
  --left-ini: -7vw;
  --left-end: 10vw;
  left: 65vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -8s;
}
.snow:nth-child(3) {
  --size: 1vw;
  --left-ini: 6vw;
  --left-end: 6vw;
  left: 1vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -7s;
}
.snow:nth-child(4) {
  --size: 0.2vw;
  --left-ini: -3vw;
  --left-end: 9vw;
  left: 88vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -5s;
}
.snow:nth-child(5) {
  --size: 0.4vw;
  --left-ini: -2vw;
  --left-end: -9vw;
  left: 74vw;
  animation: snowfall 6s linear infinite;
  animation-delay: -4s;
}
.snow:nth-child(6) {
  --size: 0.2vw;
  --left-ini: 5vw;
  --left-end: 1vw;
  left: 35vw;
  animation: snowfall 6s linear infinite;
  animation-delay: -7s;
}
.snow:nth-child(7) {
  --size: 0.4vw;
  --left-ini: -2vw;
  --left-end: -1vw;
  left: 27vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -8s;
}
.snow:nth-child(8) {
  --size: 1vw;
  --left-ini: -9vw;
  --left-end: -2vw;
  left: 69vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -8s;
}
.snow:nth-child(9) {
  --size: 0.2vw;
  --left-ini: -1vw;
  --left-end: -5vw;
  left: 84vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -6s;
}
.snow:nth-child(10) {
  --size: 0.2vw;
  --left-ini: 7vw;
  --left-end: -9vw;
  left: 82vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -3s;
}
.snow:nth-child(11) {
  --size: 0.6vw;
  --left-ini: -2vw;
  --left-end: -1vw;
  left: 48vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -1s;
}
.snow:nth-child(12) {
  --size: 0.2vw;
  --left-ini: 5vw;
  --left-end: 6vw;
  left: 39vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -8s;
}
.snow:nth-child(13) {
  --size: 0.2vw;
  --left-ini: 6vw;
  --left-end: 5vw;
  left: 3vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -8s;
}
.snow:nth-child(14) {
  --size: 0.8vw;
  --left-ini: -5vw;
  --left-end: -2vw;
  left: 49vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -8s;
}
.snow:nth-child(15) {
  --size: 0.6vw;
  --left-ini: 10vw;
  --left-end: 4vw;
  left: 77vw;
  animation: snowfall 7s linear infinite;
  animation-delay: -4s;
}
.snow:nth-child(16) {
  --size: 0.8vw;
  --left-ini: -3vw;
  --left-end: 1vw;
  left: 86vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -8s;
}
.snow:nth-child(17) {
  --size: 1vw;
  --left-ini: 6vw;
  --left-end: -7vw;
  left: 18vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -6s;
}
.snow:nth-child(18) {
  --size: 1vw;
  --left-ini: -9vw;
  --left-end: 4vw;
  left: 64vw;
  animation: snowfall 13s linear infinite;
  animation-delay: -7s;
}
.snow:nth-child(19) {
  --size: 1vw;
  --left-ini: 2vw;
  --left-end: -7vw;
  left: 52vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -9s;
}
.snow:nth-child(20) {
  --size: 0.4vw;
  --left-ini: 0vw;
  --left-end: 8vw;
  left: 5vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -9s;
}
.snow:nth-child(21) {
  --size: 0.6vw;
  --left-ini: -9vw;
  --left-end: -2vw;
  left: 10vw;
  animation: snowfall 12s linear infinite;
  animation-delay: -3s;
}
.snow:nth-child(22) {
  --size: 0.8vw;
  --left-ini: -3vw;
  --left-end: -8vw;
  left: 54vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -9s;
}
.snow:nth-child(23) {
  --size: 0.6vw;
  --left-ini: -7vw;
  --left-end: -8vw;
  left: 20vw;
  animation: snowfall 6s linear infinite;
  animation-delay: -3s;
}
.snow:nth-child(24) {
  --size: 0.4vw;
  --left-ini: 10vw;
  --left-end: -4vw;
  left: 68vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -8s;
}
.snow:nth-child(25) {
  --size: 1vw;
  --left-ini: 3vw;
  --left-end: 5vw;
  left: 90vw;
  animation: snowfall 7s linear infinite;
  animation-delay: -9s;
}
.snow:nth-child(26) {
  --size: 1vw;
  --left-ini: -7vw;
  --left-end: 5vw;
  left: 71vw;
  animation: snowfall 13s linear infinite;
  animation-delay: -2s;
}
.snow:nth-child(27) {
  --size: 0.6vw;
  --left-ini: 9vw;
  --left-end: 4vw;
  left: 2vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -5s;
}
.snow:nth-child(28) {
  --size: 1vw;
  --left-ini: -5vw;
  --left-end: 3vw;
  left: 23vw;
  animation: snowfall 12s linear infinite;
  animation-delay: -1s;
}
.snow:nth-child(29) {
  --size: 0.4vw;
  --left-ini: -2vw;
  --left-end: -1vw;
  left: 39vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -9s;
}
.snow:nth-child(30) {
  --size: 0.6vw;
  --left-ini: -9vw;
  --left-end: -5vw;
  left: 76vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -5s;
}
.snow:nth-child(31) {
  --size: 0.4vw;
  --left-ini: -5vw;
  --left-end: 3vw;
  left: 14vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -5s;
}
.snow:nth-child(32) {
  --size: 0.2vw;
  --left-ini: 5vw;
  --left-end: -1vw;
  left: 86vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -9s;
}
.snow:nth-child(33) {
  --size: 0.4vw;
  --left-ini: -3vw;
  --left-end: 10vw;
  left: 66vw;
  animation: snowfall 6s linear infinite;
  animation-delay: -6s;
}
.snow:nth-child(34) {
  --size: 1vw;
  --left-ini: -3vw;
  --left-end: 6vw;
  left: 75vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -9s;
}
.snow:nth-child(35) {
  --size: 1vw;
  --left-ini: -6vw;
  --left-end: 7vw;
  left: 22vw;
  animation: snowfall 7s linear infinite;
  animation-delay: -5s;
}
.snow:nth-child(36) {
  --size: 1vw;
  --left-ini: 3vw;
  --left-end: 4vw;
  left: 10vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -10s;
}
.snow:nth-child(37) {
  --size: 0.6vw;
  --left-ini: 2vw;
  --left-end: 10vw;
  left: 95vw;
  animation: snowfall 13s linear infinite;
  animation-delay: -6s;
}
.snow:nth-child(38) {
  --size: 0.8vw;
  --left-ini: 5vw;
  --left-end: 8vw;
  left: 34vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -10s;
}
.snow:nth-child(39) {
  --size: 0.8vw;
  --left-ini: 4vw;
  --left-end: 0vw;
  left: 80vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -2s;
}
.snow:nth-child(40) {
  --size: 0.8vw;
  --left-ini: 1vw;
  --left-end: -7vw;
  left: 45vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -4s;
}
.snow:nth-child(41) {
  --size: 0.2vw;
  --left-ini: 9vw;
  --left-end: 10vw;
  left: 82vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -2s;
}
.snow:nth-child(42) {
  --size: 1vw;
  --left-ini: 9vw;
  --left-end: -9vw;
  left: 22vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -6s;
}
.snow:nth-child(43) {
  --size: 0.6vw;
  --left-ini: 5vw;
  --left-end: 8vw;
  left: 66vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -1s;
}
.snow:nth-child(44) {
  --size: 0.6vw;
  --left-ini: -5vw;
  --left-end: -2vw;
  left: 75vw;
  animation: snowfall 12s linear infinite;
  animation-delay: -4s;
}
.snow:nth-child(45) {
  --size: 0.2vw;
  --left-ini: 0vw;
  --left-end: 3vw;
  left: 2vw;
  animation: snowfall 7s linear infinite;
  animation-delay: -5s;
}
.snow:nth-child(46) {
  --size: 0.2vw;
  --left-ini: 8vw;
  --left-end: -3vw;
  left: 94vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -9s;
}
.snow:nth-child(47) {
  --size: 0.6vw;
  --left-ini: -6vw;
  --left-end: -9vw;
  left: 95vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -4s;
}
.snow:nth-child(48) {
  --size: 0.2vw;
  --left-ini: -5vw;
  --left-end: 6vw;
  left: 34vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -6s;
}
.snow:nth-child(49) {
  --size: 0.8vw;
  --left-ini: 4vw;
  --left-end: 8vw;
  left: 22vw;
  animation: snowfall 12s linear infinite;
  animation-delay: -10s;
}
.snow:nth-child(50) {
  --size: 0.2vw;
  --left-ini: -4vw;
  --left-end: 4vw;
  left: 100vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -9s;
}

/* skyeagles section */
.skyeagles_area .inner {
  width: 1400px;
}