@charset "UTF-8";

/*****************************************
 * Common
 ******************************************/
.block {
  float: left;
  margin: 0 0 0 47px;
  *margin: 0 22px;
}

.block:first-child {
  margin: 0;
}

.block+.block+.block+.block {
  margin: 0 0 0 46px;
}

/*****************************************
 * Layout
 ******************************************/
#header {
  background-image: none;
  background-color: black;
  min-height: 695px;
}

.row {
  padding: 53px 40px;
}

.row1,
.row3 {
  min-height: 344px;
}

/* [START] 🙌 20241107 수정 - 띠배너 수정 */
/*****************************************
 * Line Banner
 ******************************************/
#lineBanner {
  position: relative;
  max-width: 1920px;
  min-width: 1280px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.line-banner__content {
  position: relative;
  display: block;
  width: 100%;
  height: 110px;
}

.line-banner__content img {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

.line-banner__util {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  background-color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;
}

.line-banner__util::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("https://img.sa.nexon.com/assets/main/banner/line_banner_light.png");
  pointer-events: none;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.line-banner__util-content {
  z-index: 1;
  display: flex;
  align-items: center;
}

.line-banner__util-content::before {
  order: 2;
  content: "";
  display: block;
  width: 1px;
  height: 14px;
  background-color: rgba(255, 255, 255, 0.2);
}

.line-banner__checkbox {
  order: 3;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 9.5px 15px;
}

.line-banner__button {
  order: 1;
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 0;
  background-color: transparent;
}

.line-banner__icon {
  pointer-events: none;
}

.line-banner__icon::before,
.line-banner__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 12px;
  height: 2px;
  background-color: #d6d6d6;
}

.line-banner__icon::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.line-banner__icon::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

.line-banner__loader span {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  box-sizing: border-box;
  border: 0;
  background-color: rgba(255, 255, 255, 0.1);
  animation: line-banner-loading 3s linear;
}

@keyframes line-banner-loading {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@media screen and (max-width: 1600px) {
  .line-banner__util-content::before {
    display: none;
  }

  .line-banner__checkbox {
    display: none;
  }
}

@media screen and (max-width: 1360px) {
  .line-banner__util {
    left: 50%;
    right: initial;
    margin: 0 0 0 610px;
  }
}

/* [END] 🙌 20241107 수정 - 띠배너 수정 */

/*****************************************
 * Floating Banner
 ******************************************/
#floatingBanner {
  position: relative;
  width: 980px;
  margin: 0 auto;
}

#floatingBanner .fb_image a {
  color: white;
}

#floatingBanner .fb_inspection {
  background: url("https://img.sa.nexon.com/assets/main/inspection/background.png") no-repeat;
  width: 980px;
  height: 780px;
}

#floatingBanner .fbi_number {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 450px;
  height: 130px;
  margin: -59px 0 0 -223px;
}

#floatingBanner .fbi_pannel {
  position: absolute;
  top: 506px;
  left: 335px;
  background: url("https://img.sa.nexon.com/assets/main/inspection/pannel_bg.png") no-repeat;
  width: 330px;
  height: 140px;
}

#floatingBanner .fbi_title {
  height: 30px;
  padding-top: 10px;
  font-size: 13px;
  color: white;
  text-align: center;
}

#floatingBanner .fbi_list {
  height: 88px;
  padding: 12px 0 0 15px;
  font-size: 13px;
  color: #8b8585;
  overflow: hidden;
  overflow-y: scroll;
}

#floatingBanner .fbi_list li {
  padding: 3px 0 4px 0;
}

#floatingBanner .fb_today {
  position: absolute;
  bottom: 60px;
  left: 0;
  width: 100%;
  text-align: center;
}

#floatingBanner .fb_today input[type=checkbox] {
  width: 15px;
  height: 15px;
  color: #f15c30;
  margin: 0 4px 0 0;
  vertical-align: middle;
}

#floatingBanner .fb_today label {
  font-size: 13px;
  font-weight: bold;
  color: white;
}

/*****************************************
 * Event Banner
 ******************************************/
#banner {
  position: relative;
}

.bImages {
  position: relative;
  width: 100%;
  height: 695px;
}

.bImages .bimage {
  position: absolute;
  top: 0;
  left: 50%;
  display: none;
  width: 1920px;
  height: 695px;
  margin: 0 0 0 -960px;
}

.bButtons {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.8);
}

.bButtons .bButton {
  display: none;
  width: 20%;
  height: 50px;
  padding: 30px 0 0 0;
  font-size: 14px;
  color: #8d8d8d;
  text-align: center;
  float: left;
}

.bButtons .bButton.active {
  font-weight: bold;
  color: #eb6c40;
  text-decoration: none;
}

.bButton_wrap {
  position: relative;
  max-width: 1200px;
  height: 80px;
  margin: 0 auto;
  padding: 0 40px;
  overflow: hidden;
  z-index: 100;
}

.bButton_left {
  position: absolute;
  top: 0;
  left: 20px;
}

.bButton_right {
  position: absolute;
  top: 0;
  right: 20px;
}

.bButton_left a,
.bButton_right a {
  display: block;
  width: 50px;
  height: 80px;
  color: #8d8d8d;
}

.bButton_left a:hover,
.bButton_right a:hover,
.bButton_left a:focus,
.bButton_right a:focus {
  background-color: #222;
  background-color: rgba(255, 255, 255, 0.1);
}

/*****************************************
 * Hot Time
 ******************************************/
#hottime {
  position: absolute;
  top: 545px;
  right: 0;
  width: 220px;
  height: 42px;
  padding: 16px 0 0 0;
  z-index: 1;
}

#hottime .txt {
  padding-left: 16px;
}

#hottime .remain {
  position: absolute;
  top: 16px;
  right: 30px;
}

#hottime .remain .hclock {
  background: url("https://img.sa.nexon.com/assets/main/hottime/digit.png") no-repeat;
  display: inline-block;
  width: 16px;
  height: 25px;
  margin: 0 -1px 0 -2px;
}

#hottime .remain .comma {
  display: inline-block;
  width: 14px;
  height: 25px;
  margin: 0 -3px 0 -2px;
  vertical-align: top;
}

#hottime .remain .hclock0 {
  background-position: 0 0;
}

#hottime .remain .hclock1 {
  background-position: -17px 0;
}

#hottime .remain .hclock2 {
  background-position: -34px 0;
}

#hottime .remain .hclock3 {
  background-position: -51px 0;
}

#hottime .remain .hclock4 {
  background-position: -68px 0;
}

#hottime .remain .hclock5 {
  background-position: -85px 0;
}

#hottime .remain .hclock6 {
  background-position: -102px 0;
}

#hottime .remain .hclock7 {
  background-position: -119px 0;
}

#hottime .remain .hclock8 {
  background-position: -136px 0;
}

#hottime .remain .hclock9 {
  background-position: -153px 0;
}

#hottime .hotopen {
  position: absolute;
  top: 17px;
  right: 28px;
  display: none;
}

#hottime .hothelp {
  position: absolute;
  bottom: 5px;
  right: 14px;
}

#hottime .hothelp i {
  width: 16px;
  height: 15px;
  background-position: -290px -976px;
}

#hottime .help {
  position: absolute;
  bottom: 17px;
  left: -470px;
  width: 430px;
  padding: 14px 20px;
  font-size: 12px;
  color: #555555;
  letter-spacing: -1px;
  background-color: white;
  display: none;
}

#hottime .help p {
  margin: 0 0 6px 0;
  font-size: 16px;
  color: black;
}

#hottime .help li {
  position: relative;
  font-size: 13px;
  padding: 0 0 4px 20px;
}

#hottime .help li b {
  position: absolute;
  top: 0;
  left: 0;
}

#hottime .help ol {
  margin: 5px 0 0 0;
}

#hottime .help ol li {
  padding: 0 0 2px 10px;
  font-size: 12px;
  color: #888888;
  line-height: 16px;
}

/*****************************************
 * Event Calendar
 ******************************************/
#aside {
  position: absolute;
  top: 265px;
  right: 20px;
  width: 60px;
  height: 186px;
}

#aside a {
  color: white;
}

#calendar {
  position: absolute;
  top: 0;
  left: 0;
  background: white url("https://img.sa.nexon.com/assets/main/calendar/pattern_bg.jpg") repeat-x;
  width: 100%;
  min-height: 693px;
  border-bottom: 2px solid black;
  z-index: 120;
  overflow: hidden;
  display: none;
}

#calendar .cal_header {
  height: 79px;
  padding: 140px 0 0 0;
  text-align: center;
}

#calendar .cal_date {
  display: inline-block;
  width: 410px;
}

#calendar .cal_date img {
  margin: 0 1px;
}

#calendar .cal_prev,
#calendar .cal_next {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-color: #324353;
  border-radius: 3px;
}

#calendar .cal_prev:hover,
#calendar .cal_prev:focus,
#calendar .cal_next:hover,
#calendar .cal_next:focus {
  background-color: #485f75;
}

#calendar .cal_close {
  position: absolute;
  top: 125px;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: 0 0 0 500px;
}

#calendar .cal_close a {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #324353;
  border-radius: 25px;
}

.cal_list .cal_center {
  width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.cal_list .cal_th {
  font-size: 12px;
  color: #666666;
}

.cal_table {
  width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.cal_table table {
  border-collapse: separate;
}

.cal_table thead th {
  height: 41px;
  font-size: 12px;
  color: #666666;
}

.cal_table tbody th {
  font-size: 14px;
  text-align: left;
  border-right: 1px solid #d6dbe2;
}

.cal_table tbody th .cal_icon {
  margin: 0 6px 0 0;
}

.cal_table tbody th .ellipsis {
  max-width: 210px;
}

.cal_table tbody td {
  position: relative;
  height: 42px;
  padding: 0 16px;
  text-align: center;
  background-color: #e1e8f2;
  border-bottom: 1px solid #d6dbe2;
  border-right: 1px solid #d6dbe2;
}

.cal_table tbody td.cal_bg {
  background-color: #fcfdff;
}

.cal_table .cal_hottime th {
  font-size: 22px;
}

.cal_table .cal_hottime td {
  height: 110px;
  padding: 19px 16px 0 16px;
  vertical-align: top;
}

.cal_table .cal_hottime .cal_itemName {
  font-size: 12px;
  color: #666666;
}

.cal_table .cal_hottime .cal_alert {
  position: absolute;
  top: 5px;
  right: 8px;
  font-size: 11px;
  color: #999999;
}

.cal_table .cal_hottime .cal_alert a {
  color: black;
}

.cal_table .cal_hottime .cal_item {
  display: inline-block;
  width: 90px;
  height: 60px;
}

.cal_period {
  position: absolute;
  top: 262px;
  left: 50%;
  width: 932px;
  height: 400px;
  margin: 0 0 0 -332px;
}

.cal_period li {
  height: 30px;
  padding: 12px 0 0 0;
  margin: 0 0 1px 0;
  font-size: 12px;
  color: white;
  text-align: center;
  background-color: #7c90b5;
  background-color: rgba(124, 144, 181, 0.9);
}

.cal_period li.cal_from1 {
  margin-left: 0;
}

.cal_period li.cal_from2 {
  margin-left: 134px;
}

.cal_period li.cal_from3 {
  margin-left: 267px;
}

.cal_period li.cal_from4 {
  margin-left: 400px;
}

.cal_period li.cal_from5 {
  margin-left: 533px;
}

.cal_period li.cal_from6 {
  margin-left: 666px;
}

.cal_period li.cal_from7 {
  margin-left: 799px;
}

.cal_period li.cal_to1 {
  margin-right: 799px;
}

.cal_period li.cal_to2 {
  margin-right: 666px;
}

.cal_period li.cal_to3 {
  margin-right: 533px;
}

.cal_period li.cal_to4 {
  margin-right: 400px;
}

.cal_period li.cal_to5 {
  margin-right: 267px;
}

.cal_period li.cal_to6 {
  margin-right: 134px;
}

.cal_period li.cal_to7 {
  margin-right: 0;
}

/*****************************************
 * Sudden Pick
 ******************************************/
#suddenPick {
  position: relative;
  background-color: #edeeee;
  display: none;
}

#suddenPickClose {
  top: 50%;
  right: -85px;
  margin: -25px 0 0 0;
  z-index: 1;
}

#suddenPick .center {
  min-height: 200px;
}

.sp_left {
  position: absolute;
  top: 0;
  left: 0;
  display: table-cell;
  width: 440px;
  height: 200px;
  z-index: 1;
}

.sp_wrap {
  display: inline-block;
  vertical-align: middle;
}

.sp_left .sp_text01 {
  margin: 0 0 18px 0;
  font-size: 26px;
  font-weight: normal;
  color: black;
  line-height: 26px;
  letter-spacing: -2px;
}

.sp_left .sp_text01 strong {
  display: inline-block;
  height: 30px;
  padding: 0 2px;
  font-weight: normal;
  color: white;
  background-color: #f06333;
  line-height: 24px;
}

.sp_left .sp_text02 {
  max-width: 410px;
  max-height: 74px;
  font-size: 14px;
  color: #68686f;
  overflow: hidden;
}

.sp_left .sp_text02 b {
  color: black;
}

.sp_right {
  position: relative;
  padding: 0 0 0 440px;
}

.sp_right .dots {
  position: absolute;
  top: 12px;
  right: 3px;
}

.sp_buttons {
  position: absolute;
  top: 33px;
  right: 0;
  display: block;
}

.sp_buttons a {
  display: block;
  margin: 0 0 6px 0;
}

.sp_buttons .sp_button {
  width: 130px;
  height: 28px;
  padding: 10px 0 0 0;
  font-size: 12px;
  color: #3a3a40;
  text-align: center;
  background-color: #fbfbfb;
  border: 1px solid #b4bbca;
  border-bottom: 1px solid #9ba1af;
  border-right: 1px solid #9ba1af;
  border-radius: 2px;
}

.sp_tab {
  position: absolute;
  top: 40px;
  left: 440px;
  z-index: 1;
}

.sp_tab a {
  position: relative;
  display: block;
  width: 120px;
  height: 40px;
  margin: 0 0 1px 0;
  padding: 20px 0 0 0;
  font-size: 13px;
  color: white;
  text-align: center;
  background-color: #c7ccd5;
}

.sp_tab a.active {
  background-color: #8e9ebb;
  text-decoration: none;
}

.sp_tab a.active::before {
  position: absolute;
  top: 50%;
  right: -5px;
  margin: -5px 0 0 0;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #8e9ebb;
}

.sp_list {
  padding-top: 40px;
  display: none;
}

.sp_list ul {
  position: relative;
  height: 160px;
  overflow: hidden;
}

.sp_list li {
  position: relative;
  width: 137px;
  height: 160px;
  margin: 0 0 0 18px;
  float: left;
}

.sp_list li:first-child {
  margin: 0;
}

.sp_list .state {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 22px;
  line-height: 17px;
  text-align: center;
  background-color: #c7ccd5;
}

.sp_list .state2 {
  display: block;
  width: 36px;
  height: 32px;
  line-height: 27px;
  text-align: center;
  background-color: #c7ccd5;
}

.sp_list .state.on,
.sp_list .state2.on {
  background-color: #ea6b40;
}

.sp_list .sp_icon {
  position: absolute;
  top: 0;
  right: 0;
}

.sp_list .sp_icon a {
  display: block;
  width: 36px;
  height: 33px;
  margin: 0 0 1px 0;
  font-size: 12px;
  color: white;
  text-align: center;
  text-decoration: none;
  line-height: 33px;
  letter-spacing: -1px;
  background-color: #c7ccd5;
}

.sp_list a.sp_navy {
  height: 32px;
  background-color: #364451;
}

.sp_list .sp_icon a:hover,
.sp_list .sp_icon a:focus {
  background-color: #ea6b40;
}

.sp_list .nickname {
  margin: 6px 0 0 0;
}

.sp_list .nickname .grade {
  vertical-align: middle;
}

.sp_list .nickname .ellipsis {
  max-width: 100px;
  font-size: 12px;
}

.sp_list .sp_lastest {
  padding-left: 28px;
  font-size: 11px;
  color: #999999;
}

.sp_items {
  position: relative;
  width: 604px;
  padding-top: 40px;
}

.sp_items .dots {
  position: absolute;
  top: 10px;
  right: 0;
}

.sp_item {
  display: none;
}

#sp_benefit .sp_buttons {
  top: 80px;
}

#sp_pcbang .sp_right {
  padding: 45px 0 45px 440px;
}

#sp_pcbang .sp_buttons {
  top: 80px;
}

#sp_pcbang .sp_thumb {
  margin: 0 15px 0 0;
  float: left;
}

#sp_pcbang .sp_title {
  margin: 0 0 13px 0;
  font-size: 18px;
}

#sp_pcbang li {
  margin: 0 0 3px 0;
  font-size: 13px;
}

#sp_pcbang li .sp_cate {
  display: inline-block;
  width: 54px;
  height: 20px;
  margin: 0 5px 0 0;
  font-size: 11px;
  color: white;
  text-align: center;
  line-height: 18px;
  background-color: #364451;
}

#sp_comeback .sp_list ul {
  width: 460px;
  height: 102px;
  padding: 18px 0 0 144px;
  background-color: white;
}

#sp_comeback .sp_list li {
  width: 100%;
  height: 30px;
  margin: 0;
  text-align: left;
  float: none;
}

#sp_comeback .sp_list li a {
  font-size: 14px;
  color: #68686f;
}

#sp_comeback .sp_list li a:hover,
#sp_comeback .sp_list li a:focus {
  font-weight: bold;
  color: black;
  letter-spacing: -0.8px;
}

#sp_comeback .sp_buttons {
  top: 60px;
}

#sp_clan .sp_list li .clanmark {
  position: absolute;
  top: 20px;
  left: 20px;
}

#sp_clan .sp_list li .clanmark img {
  width: 60px;
  height: 60px;
}

#sp_clan .sp_list li .sp_icon a {
  height: 49px;
  line-height: 47px;
}

#sp_clan .sp_list li .clanname {
  margin: 7px 0 0 0;
  font-size: 12px;
  color: #eb6c40;
}

#sp_clan .sp_list li .clanname b {
  color: black;
}

#sp_clan .sp_list li .clanname .ellipsis {
  max-width: 100px;
  vertical-align: -3px;
}

/*****************************************
 * Hot keyword
 ******************************************/
#hotkeyword {
  position: absolute;
  top: 635px;
  left: 50%;
  margin-left: 640px;
  z-index: 110;
}

.keywordRolling {
  position: relative;
  width: 210px;
  height: 40px;
  overflow: hidden;
}

.keywordRolling ul {
  position: absolute;
  top: 0;
  left: 0;
}

.keywordRolling li {
  position: relative;
  width: 210px;
  padding: 10px 0;
  font-size: 14px;
  color: white;
}

.keywordRolling li .keywordNum {
  display: inline-block;
  width: 17px;
  height: 18px;
  margin-right: 7px;
  padding-right: 1px;
  font-size: 14px;
  color: black;
  text-align: center;
  background-color: #eb6c40;
  vertical-align: -2px;
  line-height: 16px;
}

.keywordRolling li .ellipsis {
  display: inline-block;
  max-width: 140px;
  vertical-align: -4px;
}

.keywordExtend {
  position: absolute;
  top: 12px;
  right: 10px;
  font-size: 11px;
  color: white;
}

.keywordPannel {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.keywordSubject {
  position: relative;
  width: 210px;
  height: 30px;
  padding: 10px 0 0 0;
  font-size: 14px;
  color: white;
  text-align: center;
  background-color: #262120;
}

.keywordSubject .orange {
  color: #eb6c40;
}

.keywordList {
  position: relative;
  padding: 15px 18px;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.9);
}

.keywordList li {
  position: relative;
  height: 26px;
}

.keywordList li a {
  display: inline-block;
  max-width: 125px;
  font-size: 13px;
  color: #999;
  vertical-align: middle;
}

.keywordList li a b {
  color: #ccc;
}

.keywordList li a:hover,
.keywordList li a:hover b {
  font-weight: bold;
  color: #eb6c40;
  text-decoration: none;
}

.keywordList li .keywordNum {
  display: inline-block;
  width: 22px;
  font-size: 14px;
  color: white;
  vertical-align: -3px;
}

.keywordList li .keywordNew {
  margin-left: 6px;
  vertical-align: -1px;
}

/*****************************************
 * Left Banner & SNS
 ******************************************/
#left_banner {
  position: absolute;
  top: 455px;
  left: 0;
  width: 240px;
  height: 240px;
}

#right_sns {
  position: absolute;
  top: 638px;
  left: 50%;
  width: 680px;
  margin-left: 860px;
  z-index: 3;
}

.InspectBanner {
  background: url("https://img.sa.nexon.com/assets/main/inspection/background_small.png") no-repeat;
  display: block;
  width: 238px;
  height: 238px;
}

.InspectBanner .inspectNum {
  position: absolute;
  top: 153px;
  left: 25px;
}

.InspectBanner .inspectNum img {
  width: 18.5%;
  image-rendering: auto;
}

.InspectBanner .inspectNum .in_dot {
  width: 12px;
}

@media screen and (max-width: 1700px) {
  #left_banner {
    top: 505px;
  }

  #left_banner,
  #left_banner img {
    width: 190px;
    height: 190px;
    image-rendering: inherit;
  }

  .withLeftBanner .bButton_wrap {
    width: 1020px;
    padding-left: 220px;
  }

  .withLeftBanner .bButton_left {
    left: 200px;
  }

  .InspectBanner {
    background-size: 99.5%;
    width: 190px;
    height: 190px;
  }

  .InspectBanner .inspectNum {
    top: 124px;
    left: 20px;
  }

  .InspectBanner .inspectNum img {
    width: 18% !important;
    height: 18% !important;
  }

  .InspectBanner .inspectNum .in_dot {
    width: 8px !important;
  }
}

@media screen and (max-width: 1500px) {
  #right_sns {
    display: none;
  }
}

/*****************************************
 * Icon Buttons
 ******************************************/
.icons {
  text-align: center;
  border-top: 1px solid #ebecee;
}

.btn_icon {
  display: inline-block;
  width: 195px;
  font-size: 12px;
  color: #7a7d84;
  text-align: center;
  *zoom: 1;
  *display: inline;
}

.btn_icon a {
  display: inline-block;
  width: 76px;
  height: 76px;
  margin: 0 0 10px 0;
  background-color: #7c7c8b;
}

.btn_icon a:hover,
.btn_icon a:focus {
  background-color: #f15c30;
}


/*****************************************
 * 2018-04-05 added
 ******************************************/

/* 2022-07-28 추가 */
.layerPop {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 1280px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 200;
}

.layerPop .content {
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 370px;
  width: 980px;
  height: 410px;
  text-align: center;
  background: url("https://img.sa.nexon.com/assets/main/happy_banner_bg.png") no-repeat;
}

.layerPop .content .blind {
  text-indent: -9999px;
  opacity: 0;
  height: 0;
}

.layerPop .content .item {
  display: inline-block;
  width: 200px;
}

.layerPop .content .item img {
  max-width: 100%;
  width: auto;
}

.layerPop .content .name {
  margin: 0 auto;
  width: 600px;
  font-size: 16px;
  line-height: 26px;
  color: #fff;
}

.layerPop .content .btn {
  position: absolute;
  top: 536px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 65px;
  text-indent: -9999px;
}

.layerPop .content .close {
  position: absolute;
  bottom: 19px;
  left: 0;
  width: 100%;
  height: 44px;
  text-indent: -9999px;
}

.layerPop .content .xBtn {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background: url("https://img.sa.nexon.com/assets/main/layerPop_close.png") no-repeat;
}

.layerPop .left {
  position: absolute;
  top: 454px;
  left: 0;
}

#floatingBanner .birthday {
  padding-top: 410px;
  width: 980px;
  height: 370px;
  text-align: center;
  background: url("https://img.sa.nexon.com/assets/main/happy_banner_bg.png") no-repeat;
}

#floatingBanner .birthday .blind {
  text-indent: -9999px;
  opacity: 0;
  height: 0;
}

#floatingBanner .birthday .item {
  display: inline-block;
}

#floatingBanner .birthday .name {
  margin: 0 auto;
  width: 600px;
  font-size: 16px;
  line-height: 26px;
  color: #fff;
}

#floatingBanner .birthday .btn {
  position: absolute;
  top: 576px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 65px;
  text-indent: -9999px;
}

/* //2022-07-28 추가 */
/* [START] 🙌 20250612 수정 - 트렌드&팁, 공식영상 */
.middleBanner {
  height: 350px;
  padding: 60px 0 55px;
  background-color: #f5f5f5;
  box-sizing: border-box;
  background: url("https://img.sa.nexon.com/assets/main/middleBanner_bg.jpg") no-repeat center center/cover;
}

.middleBanner__content {
  position: relative;
  width: 885px;
}

.middleBanner__tabs {
  display: flex;
  align-items: center;
  height: 30px;
  margin-bottom: 22px;
}

.middleBanner__tab {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.middleBanner__tab.active {
  color: #fff;
}

.middleBanner__tab:first-child::after {
  display: block;
  width: 1px;
  height: 13px;
  margin: 0 14px;
  background-color: rgba(255, 255, 255, 0.4);
  content: "";
}

.middleBanner__more {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #bbbabc;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  box-sizing: border-box;
}

.middleBanner__more:hover {
  border-color: #fff;
  color: #fff;
  text-decoration: none;
}

.middleBanner__list {
  display: none;
  align-content: center;
  gap: 45px;
}

.middleBanner__list.active {
  display: flex;
}

.middleBanner__item {
  width: 265px;
  color: #fff;
}

.middleBanner__image {
  position: relative;
  width: 100%;
  height: 150px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  overflow: hidden;
  background-color: #333;
}

.middleBanner__image img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
}

.middleBanner__text {
  width: 100%;
}

.middleBanner__text span {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 14px;
}

.middleBanner__deco {
  position: absolute;
  top: -18px;
  right: 139px;
  display: block;
  width: 109px;
  height: 83px;
  background: url("https://img.sa.nexon.com/assets/main/middleBanner_deco.png") no-repeat center center/cover;
  pointer-events: none;
  touch-action: none;
}

/* [START] 🙌 20260430 수정 */
#sparena.block .sparena__content {
  text-align: center;
  letter-spacing: -0.7px;
}

#sparena.block .sparena__content>a {
  display: flex;
}

#sparena.block .sparena__content>a img {
  display: block;
  width: 100%;
}

#sparena.block .sparena__content>div {
  width: 265px;
  height: 27px;
  margin-top: 8px;
  background-image: url("https://img.sa.nexon.com/assets/main/championship/deco-line.png");
}

#sparena.block .sparena__content>p {
  display: flex;
  justify-content: center;
  gap: 8px;
  height: 53px;
  padding-top: 8px;
  color: #4a4a4a;
  font-size: 14px;
  line-height: 18px;
}

#sparena.block .sparena__content>p b {
  color: #e82828;
  font-weight: 700;
  letter-spacing: -0.7px;
}

#sparena.block .sparena__content>p i {
  width: 1px;
  height: 12px;
  margin-top: 4px;
  background-color: #8a8a8a;
}

#sparena.block .sparena__content>p span {
  font-weight: 400;
  letter-spacing: -0.56px;
}

#sparena.block .sparena__content>p.sparena__end {
  display: block;
}

#sparena.block .sparena__content>p.sparena__end strong {
  font-weight: 700;
}

#sparena.block .sparena__content>.sparena__button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 263px;
  height: 44px;
  border: 1px solid #000;
  border-radius: 3px;
  color: #333;
  background-color: transparent;
  font-size: 14px;
  font-weight: 700;
}

#sparena.block .sparena__content>.sparena__button::before {
  content: "";
  display: block;
  width: 24px;
  height: 20px;
  background: url("https://img.sa.nexon.com/assets/main/championship/sparena_icon.png") no-repeat center center/cover;
}

#sparena.block .sparena__content>.sparena__button:hover {
  text-decoration: none;
}

/* [END] 🙌 20260430 수정 */




/* [END] 🙌 20250612 수정 - 트렌드&팁, 공식영상 */

/* //2022-07-28 추가 */

/* [START] 🙌 20250612 수정 - 트렌드&팁, 공식영상 */
.middleBanner {
  height: 360px;
  padding: 60px 0 65px;
  background-color: #f5f5f5;
  box-sizing: border-box;
  background: url('https://img.sa.nexon.com/assets/main/middleBanner_bg.jpg') no-repeat center center / cover;

  &__content {
    position: relative;
    width: 885px;
  }

  &__tabs {
    display: flex;
    align-items: center;
    height: 30px;
    margin-bottom: 22px;
  }

  &__tab {
    display: flex;
    align-items: center;
    color: rgba(#fff, 0.4);
    font-weight: 400;
    line-height: 1;
    cursor: pointer;

    &.active {
      color: #fff;
    }

    &:first-child::after {
      display: block;
      width: 1px;
      height: 13px;
      margin: 0 14px;
      background-color: rgba(#fff, 0.4);
      content: '';
    }
  }

  &__more {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(#fff, 0.4);
    color: #bbbabc;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    box-sizing: border-box;

    &:hover {
      border-color: #fff;
      color: #fff;
      text-decoration: none;
    }
  }

  &__list {
    display: none;
    align-content: center;
    gap: 45px;

    &.active {
      display: flex;
    }
  }

  &__item {
    width: 265px;
    color: #fff;
  }

  &__image {
    position: relative;
    width: 100%;
    height: 150px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    overflow: hidden;
    background-color: #333;

    img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: block;
      object-fit: cover;
    }
  }

  &__text {
    width: 100%;

    span {
      display: block;
      width: 100%;
      color: #fff;
      font-size: 14px;
    }
  }

  &__deco {
    position: absolute;
    top: -18px;
    right: 139px;
    display: block;
    width: 109px;
    height: 83px;
    background: url('https://img.sa.nexon.com/assets/main/middleBanner_deco.png') no-repeat center center / cover;
    pointer-events: none;
    touch-action: none;
  }
}

/* [END] 🙌 20250612 수정 - 트렌드&팁, 공식영상 */