@charset "utf-8";

#wrapper.bodyScrollDisable {
  height: 100vh;
  overflow: hidden;
}

.inner {
  position: relative;
  width: 1280px;
  height: auto;
}

#main {
  position: relative;
  width: 100%;
  height: 1008px;
  text-align: center;
  background: url(../images/keyvisual/250724_visual_main.jpg) 50% 0 no-repeat;
}
#main video.visual {
  display: none;
}
#main .main_banner {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 400px;
  background: url(../images/keyvisual/250724_cover_w.png) 50% 30% repeat-x;
}
#container {
  padding: 0;
  min-height: auto;
}
#container .section {
  position: relative;
  width: 100%;
  padding-bottom: 91px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/line.gif) 0 39px repeat-x;
  clear: both;
}
#container .quick_link {
  position: relative;
  width: 100%;
  height: 368px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/quick_link.jpg) 50% 0 no-repeat;
  clear: both;
}
.dark {
  position: absolute;
  width: 100%;
  height: 800px;
  background-color: #000;
  left: 0;
  top: 0;
}
.banner {
  position: relative;
  width: 1280px;
  height: 310px;
  margin: 0 auto;
  text-align: left;
}
.banner #count {
  position: relative;
  width: 100%;
  height: 54px;
  line-height: 54px;
  font-size: 35px;
  color: #838383;
  font-weight: 500;
  font-family: "Teko", Tw Cen MT Condensed;
}
.banner #count strong {
  font-weight: 500;
  color: #fff;
}
.banner #count img {
  margin: 0 10px;
}
.banner .slideshow {
  position: relative;
  width: 100% !important;
  height: 256px;
}
.banner .slideshow li {
  position: relative !important;
  width: 399px;
  height: 100%;
  margin-right: 40px;
  z-index: 1 !important;
  display: inline-block;
  *display: inline !important;
  zoom: 1;
}
.banner .slideshow li a {
  position: absolute;
  left: 0;
  top: 0;
  width: 365px;
  height: 176px;
  padding: 80px 0 0 34px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/ico_evt.png) 40px 33px no-repeat;
  white-space: normal;
}
.banner .slideshow li a.update {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/ico_upd.png) 40px 33px no-repeat;
}
.banner .slideshow li .tit {
  width: 170px;
  height: 100px;
  display: block;
  font-size: 26px;
  color: #e0e0e0;
  font-weight: 500;
  line-height: 30px;
  margin-bottom: 10px;
}
.banner .slideshow li .date {
  width: 70px;
  height: 35px;
  display: block;
  font-size: 18px;
  color: #9ca2b2;
  font-weight: 500;
  line-height: 16px;
  font-family: "Teko", Tw Cen MT Condensed;
}
.banner .banner_prev {
  position: absolute;
  left: -42px;
  top: 140px;
  height: 64px;
  width: 42px;
  margin-left: -17px;
}
.banner .banner_next {
  position: absolute;
  right: -42px;
  top: 140px;
  height: 64px;
  width: 42px;
  margin-right: -17px;
}
.banner .over {
  position: absolute;
  left: 0;
  top: 0;
  width: 399px;
  height: 256px;
  overflow: hidden;
}
.banner .over .down {
  position: absolute;
  width: 100%;
  height: 0;
  left: 0;
  top: 0;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/banner_over.png) no-repeat;
}
.banner .over .up {
  position: absolute;
  width: 100%;
  height: 0;
  left: 0;
  bottom: 0;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/banner_over.png) no-repeat;
}
.banner .over .right {
  position: absolute;
  width: 0;
  height: 1px;
  left: 195px;
  top: 125px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/banner_over_line.png) repeat-x;
}
.banner .over .left {
  position: absolute;
  width: 0;
  height: 1px;
  right: 204px;
  top: 125px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/banner_over_line.png) repeat-x;
}
.banner .over .center1 {
  position: absolute;
  width: 93px;
  height: 93px;
  left: 149px;
  top: 78px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/banner_over1.png) no-repeat;
  opacity: 0;
  filter: Alpha(opacity=0);
}
.banner .over .center2 {
  position: absolute;
  width: 79px;
  height: 79px;
  left: 157px;
  top: 86px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/banner_over2.png) no-repeat;
  opacity: 0;
  filter: Alpha(opacity=0);
}
.banner .over .center3 {
  position: absolute;
  width: 62px;
  height: 62px;
  left: 166px;
  top: 95px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/banner_over3.png) no-repeat;
  opacity: 0;
  filter: Alpha(opacity=0);
}
.banner .over .arrow1 {
  position: absolute;
  width: 22px;
  height: 25px;
  left: 157px;
  top: 113px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/banner_over_arrow.png) no-repeat;
  opacity: 0;
  filter: Alpha(opacity=0);
}
.banner .over .arrow2 {
  position: absolute;
  width: 0;
  height: 58px;
  left: 195px;
  top: 99px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/banner_over_arrow_right.png) right 0 no-repeat;
}
.banner .over .arrow3 {
  position: absolute;
  width: 0;
  height: 58px;
  right: 204px;
  top: 99px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/banner_over_arrow_left.png) no-repeat;
}
.banner .over .txt {
  position: absolute;
  width: 100%;
  height: 17px;
  left: 0;
  bottom: 55px;
  line-height: 17px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.075em;
  opacity: 0;
  filter: Alpha(opacity=0);
}

.hot {
  position: absolute;
  left: 50%;
  top: 200px;
  width: 700px;
  height: 350px;
  /* background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/ico_hot.png) no-repeat; */
  margin-left: -640px;
  font-weight: 500;
  /*👉 배경 이미지 어두울 경우 */
  color: #fff;
  /* 👉 배경 이미지 밝을 경우 */
  /* color: #242424; */

  text-align: left;
  padding-top: 47px;
}
.hot h2 {
  font-size: 50px;
  line-height: 60px;
  font-weight: 500;
  margin-bottom: 20px;
  /*👉 배경 이미지 어두울 경우 */
  /* color: #fff; */
  /* 👉 배경 이미지 밝을 경우 */
  color: #242424;
}
.hot h2 strong {
  font-weight: 700;
}
.hot h2 b {
  font-weight: 700;
}
.hot h2 span.h2_c1 {
  color: #0054ff;
}
.hot p {
  font-size: 14px;
  line-height: 20px;
  /* 👉 배경 이미지 어두울 경우 */
  /* color: #fff; */
  /* 👉 배경 이미지 밝을 경우 */
  color: #242424;
}
.hot p span {
  display: block;
  margin-bottom: 13px;
}
.hot p.st_type {
  font-size: 25px;
  margin-bottom: 13px;
  line-height: 26px;
  color: #ff4646;
}

.hot .hot_icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 37px;
  height: 43px;
  /* (기본) 키비주얼 색상 아이콘 */
  /* color: #d99d21; */
  color: #c33132;
}

:root {
  --btn-hot-bg-default-color: #c33132;
  --btn-hot-bg-hover-color: #c33132;
  --btn-hot-text-default-color: #242424;
  --btn-hot-text-hover-color: #fff;
}

.hot .btn_hot {
  --btn-hot-height: 44px;
  margin-top: calc(var(--btn-hot-height) / 2);
  width: 320px;
  height: var(--btn-hot-height);
  background-image: url(../images/keyvisual/bg_hot.png);
  background-repeat: no-repeat;
  /* 흰색 */
  /* background-position: 100% -1px; */
  /* 회색 */
  /* background-position: 100% calc(var(--btn-hot-height) * -1); */
  /* 아쿠아 */
  /* background-position: 100% calc(var(--btn-hot-height) * -2); */
  /* 갈색 */
  /* background-position: 100% calc(var(--btn-hot-height) * -3); */
  /* 보라색 */
  /* background-position: 100% calc(var(--btn-hot-height) * -4); */
  /* 검정색 */
  background-position: 100% calc(var(--btn-hot-height) * -5);
}

.hot .btn_hot .btn_txt {
  padding: 0 5px;
  border: 2px solid var(--btn-hot-bg-default-color);
  width: 220px;
  height: 42px;
  display: inline-flex;
  justify-content: center;
  font-size: 18px;
  line-height: 36px;
  font-weight: 500;
  color: var(--btn-hot-text-default-color);
  box-sizing: border-box;
  vertical-align: top;
  text-shadow: none;
}
.hot .btn_hot a {
  display: block;
}
.hot .btn_hot a:hover .btn_txt {
  border-color: var(--btn-hot-bg-hover-color);
  background-color: var(--btn-hot-bg-hover-color);
  color: var(--btn-hot-text-hover-color);
  font-weight: 500;
}

.hot .btn_hot a .arrow {
  margin-left: 4px;
  width: 46px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--btn-hot-bg-default-color);
  box-sizing: border-box;
  color: var(--btn-hot-text-default-color);
  i {
    display: block;
  }
  .on {
    display: none;
  }
}
.hot .btn_hot a:hover .arrow {
  border-color: var(--btn-hot-bg-hover-color);
  background: var(--btn-hot-bg-hover-color);
  color: var(--btn-hot-text-hover-color);
  .on {
    display: block;
    margin-top: 1px;
    font-family: "Teko", Tw Cen MT Condensed;
    font-size: 24px;
    line-height: 1;
    font-style: normal;
  }
  .off {
    display: none;
  }
}

.hot .btn_hot a:hover .arrow {
  background-position: 0 -56px;
}
.quick_link h2 {
  font-size: 38px;
  font-weight: 500;
  font-family: "Teko", Tw Cen MT Condensed;
  color: #9c9d9d;
  letter-spacing: -0.02em;
  line-height: 38px;
  position: absolute;
  top: 65px;
  left: 555px;
}
.quick_link .btn_quick {
  position: absolute;
  left: 0;
  top: 160px;
  width: 1320px;
  height: 138px;
}
.quick_link .btn_quick li {
  width: 124px;
  margin-right: 41px;
  height: 100%;
  float: left;
  font-size: 16px;
  letter-spacing: -0.075em;
}
.quick_link .btn_quick li a {
  display: block;
  width: 100%;
  height: 24px;
  color: #d9d9da;
  text-align: center;
  line-height: 24px;
  padding-top: 114px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/quick_link.png) no-repeat;
}
.quick_link .btn_quick li.q1 a {
  background-position: 0 0;
}
.quick_link .btn_quick li.q2 a {
  background-position: -164px 0;
}
.quick_link .btn_quick li.q3 a {
  background-position: -329px 0;
}
.quick_link .btn_quick li.q4 a {
  background-position: -1315px 0;
}
.quick_link .btn_quick li.q5 a {
  background-position: -658px 0;
}
.quick_link .btn_quick li.q6 a {
  background-position: -822px 0;
}
.quick_link .btn_quick li.q7 a {
  background-position: -987px 0;
}
.quick_link .btn_quick li.q8 a {
  background-position: -1151px 0;
}
.quick_link .btn_quick li.q1 a:hover,
.quick_link .btn_quick li.q1 a:focus {
  background-position: 0 -140px;
}
.quick_link .btn_quick li.q2 a:hover,
.quick_link .btn_quick li.q2 a:focus {
  background-position: -164px -140px;
}
.quick_link .btn_quick li.q3 a:hover,
.quick_link .btn_quick li.q3 a:focus {
  background-position: -329px -140px;
}
.quick_link .btn_quick li.q4 a:hover,
.quick_link .btn_quick li.q4 a:focus {
  background-position: -1315px -140px;
}
.quick_link .btn_quick li.q5 a:hover,
.quick_link .btn_quick li.q5 a:focus {
  background-position: -658px -140px;
}
.quick_link .btn_quick li.q6 a:hover,
.quick_link .btn_quick li.q6 a:focus {
  background-position: -822px -140px;
}
.quick_link .btn_quick li.q7 a:hover,
.quick_link .btn_quick li.q7 a:focus {
  background-position: -987px -140px;
}
.quick_link .btn_quick li.q8 a:hover,
.quick_link .btn_quick li.q8 a:focus {
  background-position: -1151px -140px;
}

a.bl_type {
  display: block;
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  width: 1280px;
  height: 562px;
  margin: 0 auto;
}

.login_area {
  height: 446px;
}
.login_area .stats_link {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
}
.login_area .stats_link .ico_stats_new {
  position: absolute;
  top: 0;
  left: 0;
  width: 71px;
  height: 58px;
  background: url("../images/ico_stats_new.png") 0 0 no-repeat;
  background-size: 100% 100%;
  text-indent: -9999px;
}
.login_area .btn_login {
  position: absolute;
  top: 0;
  left: 0;
}
.login_area .log_off {
  width: 100%;
  height: 158px; /* height:253px;background:url(https://ssl.nexon.com/s2/game/cso/cso2018/main/bg_login.png) 0 133px no-repeat; */
  position: relative;
}
.login_area .log_off.chrome {
  height: 117px;
}
.log_off .btn_info {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 31px;
}
.log_off .btn_info li {
  width: 31px;
  height: 31px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/bg_login_info2_v2.png) no-repeat;
  float: left;
  margin-left: 1px;
  overflow: hidden;
  font-size: 12px;
  line-height: 31px;
  font-weight: 500;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.log_off .btn_info li a {
  color: #bdbdbd;
  padding-left: 35px;
  display: block;
  height: 100%;
}
.log_off .btn_info li.join {
  background-position: 0 0;
}
.log_off .btn_info li.find_id {
  background-position: -107px 0;
}
.log_off .btn_info li.find_pw {
  background-position: -209px 0;
}
.log_off .btn_info li.join:hover {
  width: 106px;
}
.log_off .btn_info li.find_id:hover {
  width: 101px;
}
.log_off .btn_info li.find_pw:hover {
  width: 111px;
}
.log_off .btn_info li.join:hover a {
  padding-left: 18px;
}
.log_off .btn_info li.find_id:hover a {
  padding-left: 19px;
}
.log_off .btn_info li.find_pw:hover a {
  padding-left: 26px;
}
.log_off input {
  position: absolute;
  left: 70px;
  width: 235px;
  height: 38px;
  padding: 0;
  border: 0;
  font-size: 14px;
  color: #aaa;
  line-height: 38px;
  letter-spacing: 0;
  font-weight: 400;
  background: transparent;
  text-indent: 20px;
}
.log_off .input_id {
  top: 134px;
}
.log_off .input_pw {
  top: 175px;
}

.log_on {
  width: 100%;
  height: 239px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/bg_myinfo_v3.png) no-repeat;
  position: relative;
  overflow: hidden;
}
.login_area .logon {
  height: 100%;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/btn_myinfo.png) 0 bottom no-repeat;
}
.login_area .logon .my_grade {
  position: absolute;
  left: 0;
  top: 0;
  padding-top: 13px;
  height: 42px;
  line-height: normal;
}
.login_area .logon .my_name {
  position: absolute;
  left: 54px;
  top: 0;
}
.login_area .logon .my_level {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  width: 54px;
  height: 46px;
  padding-top: 10px;
  color: #fff;
  font-size: 14px;
  background-color: #141414;
}
.login_area .logon .my_level strong {
  display: block;
  margin-top: 4px;
  color: #df9b1d;
  font-size: 23px;
  font-family: "Teko", Tw Cen MT Condensed;
}

.badge {
  position: relative;
  margin-top: 12px;
  width: 85px;
  height: 90px;
}
.badge .lv1,
.badge .lv2,
.badge .lv3,
.badge .lv4,
.badge .num span {
  position: absolute;
  display: inline-block;
  text-indent: -9999px;
  overflow: hidden;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/common/spr_level.png) no-repeat;
}

.badge .lv1 {
  left: 21px;
  top: 25px;
  width: 43px;
  height: 19px;
  background-position: 0 0;
}
.badge .lv1_0 {
  background-position: 0 0;
}
.badge .lv1_1 {
  background-position: -50px 0;
}
.badge .lv1_2 {
  background-position: -100px 0;
}
.badge .lv1_3 {
  background-position: -150px 0;
}
.badge .lv1_4 {
  background-position: -200px 0;
}
.badge .lv1_5 {
  background-position: -250px 0;
}
.badge .lv1_6 {
  background-position: -300px 0;
}
.badge .lv1_7 {
  background-position: -350px 0;
}
.badge .lv1_8 {
  background-position: -400px 0;
}
.badge .lv1_9 {
  background-position: -450px 0;
}

.badge .lv2 {
  left: 34px;
  top: 6px;
  width: 18px;
  height: 17px;
  background-position: 0 -350px;
}
.badge .lv2_0 {
  background-position: 0 -350px;
}
.badge .lv2_1 {
  background-position: -25px -350px;
}
.badge .lv2_2 {
  background-position: -50px -350px;
}
.badge .lv2_3 {
  background-position: -75px -350px;
}
.badge .lv2_4 {
  background-position: -100px -350px;
}
.badge .lv2_5 {
  background-position: -125px -350px;
}
.badge .lv2_6 {
  background-position: -150px -350px;
}
.badge .lv2_7 {
  background-position: -175px -350px;
}
.badge .lv2_8 {
  background-position: -200px -350px;
}
.badge .lv2_9 {
  background-position: -225px -350px;
}

.badge .lv2_40 {
  background-position: 0 -375px;
}
.badge .lv2_41 {
  background-position: -25px -375px;
}
.badge .lv2_42 {
  background-position: -50px -375px;
}
.badge .lv2_43 {
  background-position: -75px -375px;
}
.badge .lv2_44 {
  background-position: -100px -375px;
}
.badge .lv2_45 {
  background-position: -125px -375px;
}
.badge .lv2_46 {
  background-position: -150px -375px;
}
.badge .lv2_47 {
  background-position: -175px -375px;
}
.badge .lv2_48 {
  background-position: -200px -375px;
}
.badge .lv2_49 {
  background-position: -225px -375px;
}

.badge .lv2_70 {
  background-position: 0 -400px;
}
.badge .lv2_71 {
  background-position: -25px -400px;
}
.badge .lv2_72 {
  background-position: -50px -400px;
}
.badge .lv2_73 {
  background-position: -75px -400px;
}
.badge .lv2_74 {
  background-position: -100px -400px;
}
.badge .lv2_75 {
  background-position: -125px -400px;
}
.badge .lv2_76 {
  background-position: -150px -400px;
}
.badge .lv2_77 {
  background-position: -175px -400px;
}
.badge .lv2_78 {
  background-position: -200px -400px;
}
.badge .lv2_79 {
  background-position: -225px -400px;
}

.badge .lv3 {
  left: 0;
  top: 0;
  width: 85px;
  height: 85px;
  background-position: 0 -500px;
}
.badge .lv3_0 {
  background-position: 0 -500px;
}
.badge .lv3_1 {
  background-position: -100px -500px;
}
.badge .lv3_2 {
  background-position: -200px -500px;
}
.badge .lv3_3 {
  background-position: -300px -500px;
}
.badge .lv3_4 {
  background-position: -400px -500px;
}
.badge .lv3_5 {
  background-position: 0 -600px;
}
.badge .lv3_6 {
  background-position: -100px -600px;
}
.badge .lv3_7 {
  background-position: -200px -600px;
}
.badge .lv3_8 {
  background-position: -300px -600px;
}
.badge .lv3_9 {
  background-position: -400px -600px;
}
.badge .lv3_10 {
  background-position: 0 -700px;
}

.badge .lv4 {
  left: 0;
  top: 0;
  width: 85px;
  height: 85px;
  background-position: 0 -800px;
}
.badge .lv4_0 {
  background-position: 0 -800px;
}
.badge .lv4_1 {
  background-position: -100px -800px;
}
.badge .lv4_2 {
  background-position: -200px -800px;
}
.badge .lv4_3 {
  background-position: -300px -800px;
}
.badge .lv4_4 {
  background-position: -100px -900px;
}
.badge .lv4_5 {
  background-position: -200px -900px;
}
.badge .lv4_6 {
  background-position: -300px -900px;
}
.badge .lv4_7 {
  background-position: -100px -1000px;
}
.badge .lv4_8 {
  background-position: -200px -1000px;
}
.badge .lv4_9 {
  background-position: -300px -1000px;
}
.badge .num {
  position: absolute;
  left: 10px;
  top: 50px;
  width: 66px;
  height: 13px;
  text-align: center;
  display: block;
  text-indent: 0;
}
.badge .num span {
  position: static;
  width: 10px;
  height: 13px;
  text-indent: 0;
  font-size: 0;
  line-height: 0;
  background-position: 0 -1200px;
}
.badge .num .n0 {
  background-position: 0 -1200px;
}
.badge .num .n1 {
  background-position: -10px -1200px;
}
.badge .num .n2 {
  background-position: -20px -1200px;
}
.badge .num .n3 {
  background-position: -30px -1200px;
}
.badge .num .n4 {
  background-position: -40px -1200px;
}
.badge .num .n5 {
  background-position: -50px -1200px;
}
.badge .num .n6 {
  background-position: -60px -1200px;
}
.badge .num .n7 {
  width: 11px;
  background-position: -70px -1200px;
}
.badge .num .n8 {
  width: 11px;
  background-position: -80px -1200px;
}
.badge .num .n9 {
  width: 11px;
  background-position: -90px -1200px;
}

/* 휘장 컬러에 따라 lv1, 숫자 컬러 변경 */
.badge .lv3_1 .lv1_0 {
  background-position: 0 -25px;
}
.badge .lv3_1 .lv1_1 {
  background-position: -50px -25px;
}
.badge .lv3_1 .lv1_2 {
  background-position: -100px -25px;
}
.badge .lv3_1 .lv1_3 {
  background-position: -150px -25px;
}
.badge .lv3_1 .lv1_4 {
  background-position: -200px -25px;
}
.badge .lv3_1 .lv1_5 {
  background-position: -250px -25px;
}
.badge .lv3_1 .lv1_6 {
  background-position: -300px -25px;
}
.badge .lv3_1 .lv1_7 {
  background-position: -350px -25px;
}
.badge .lv3_1 .lv1_8 {
  background-position: -400px -25px;
}
.badge .lv3_1 .lv1_9 {
  background-position: -450px -25px;
}

.badge .lv3_1 .num .n0 {
  background-position: -150px -1200px;
}
.badge .lv3_1 .num .n1 {
  background-position: -160px -1200px;
}
.badge .lv3_1 .num .n2 {
  background-position: -170px -1200px;
}
.badge .lv3_1 .num .n3 {
  background-position: -180px -1200px;
}
.badge .lv3_1 .num .n4 {
  background-position: -190px -1200px;
}
.badge .lv3_1 .num .n5 {
  background-position: -200px -1200px;
}
.badge .lv3_1 .num .n6 {
  background-position: -210px -1200px;
}
.badge .lv3_1 .num .n7 {
  background-position: -220px -1200px;
}
.badge .lv3_1 .num .n8 {
  background-position: -230px -1200px;
}
.badge .lv3_1 .num .n9 {
  background-position: -240px -1200px;
}

.badge .lv3_2 .lv1_0 {
  background-position: 0 -50px;
}
.badge .lv3_2 .lv1_1 {
  background-position: -50px -50px;
}
.badge .lv3_2 .lv1_2 {
  background-position: -100px -50px;
}
.badge .lv3_2 .lv1_3 {
  background-position: -150px -50px;
}
.badge .lv3_2 .lv1_4 {
  background-position: -200px -50px;
}
.badge .lv3_2 .lv1_5 {
  background-position: -250px -50px;
}
.badge .lv3_2 .lv1_6 {
  background-position: -300px -50px;
}
.badge .lv3_2 .lv1_7 {
  background-position: -350px -50px;
}
.badge .lv3_2 .lv1_8 {
  background-position: -400px -50px;
}
.badge .lv3_2 .lv1_9 {
  background-position: -450px -50px;
}

.badge .lv3_2 .num .n0 {
  background-position: -300px -1200px;
}
.badge .lv3_2 .num .n1 {
  background-position: -310px -1200px;
}
.badge .lv3_2 .num .n2 {
  background-position: -320px -1200px;
}
.badge .lv3_2 .num .n3 {
  background-position: -330px -1200px;
}
.badge .lv3_2 .num .n4 {
  background-position: -340px -1200px;
}
.badge .lv3_2 .num .n5 {
  background-position: -350px -1200px;
}
.badge .lv3_2 .num .n6 {
  background-position: -360px -1200px;
}
.badge .lv3_2 .num .n7 {
  background-position: -370px -1200px;
}
.badge .lv3_2 .num .n8 {
  background-position: -380px -1200px;
}
.badge .lv3_2 .num .n9 {
  background-position: -390px -1200px;
}

.badge .lv3_3 .lv1_0 {
  background-position: 0 -75px;
}
.badge .lv3_3 .lv1_1 {
  background-position: -50px -75px;
}
.badge .lv3_3 .lv1_2 {
  background-position: -100px -75px;
}
.badge .lv3_3 .lv1_3 {
  background-position: -150px -75px;
}
.badge .lv3_3 .lv1_4 {
  background-position: -200px -75px;
}
.badge .lv3_3 .lv1_5 {
  background-position: -250px -75px;
}
.badge .lv3_3 .lv1_6 {
  background-position: -300px -75px;
}
.badge .lv3_3 .lv1_7 {
  background-position: -350px -75px;
}
.badge .lv3_3 .lv1_8 {
  background-position: -400px -75px;
}
.badge .lv3_3 .lv1_9 {
  background-position: -450px -75px;
}

.badge .lv3_3 .num .n0 {
  background-position: 0 -1225px;
}
.badge .lv3_3 .num .n1 {
  background-position: -10px -1225px;
}
.badge .lv3_3 .num .n2 {
  background-position: -20px -1225px;
}
.badge .lv3_3 .num .n3 {
  background-position: -30px -1225px;
}
.badge .lv3_3 .num .n4 {
  background-position: -40px -1225px;
}
.badge .lv3_3 .num .n5 {
  background-position: -50px -1225px;
}
.badge .lv3_3 .num .n6 {
  background-position: -60px -1225px;
}
.badge .lv3_3 .num .n7 {
  background-position: -70px -1225px;
}
.badge .lv3_3 .num .n8 {
  background-position: -80px -1225px;
}
.badge .lv3_3 .num .n9 {
  background-position: -90px -1225px;
}

.badge .lv3_4 .lv1_0 {
  background-position: 0 -100px;
}
.badge .lv3_4 .lv1_1 {
  background-position: -50px -100px;
}
.badge .lv3_4 .lv1_2 {
  background-position: -100px -100px;
}
.badge .lv3_4 .lv1_3 {
  background-position: -150px -100px;
}
.badge .lv3_4 .lv1_4 {
  background-position: -200px -100px;
}
.badge .lv3_4 .lv1_5 {
  background-position: -250px -100px;
}
.badge .lv3_4 .lv1_6 {
  background-position: -300px -100px;
}
.badge .lv3_4 .lv1_7 {
  background-position: -350px -100px;
}
.badge .lv3_4 .lv1_8 {
  background-position: -400px -100px;
}
.badge .lv3_4 .lv1_9 {
  background-position: -450px -100px;
}

.badge .lv3_4 .num .n0 {
  background-position: -150px -1225px;
}
.badge .lv3_4 .num .n1 {
  background-position: -160px -1225px;
}
.badge .lv3_4 .num .n2 {
  background-position: -170px -1225px;
}
.badge .lv3_4 .num .n3 {
  background-position: -180px -1225px;
}
.badge .lv3_4 .num .n4 {
  background-position: -190px -1225px;
}
.badge .lv3_4 .num .n5 {
  background-position: -200px -1225px;
}
.badge .lv3_4 .num .n6 {
  background-position: -210px -1225px;
}
.badge .lv3_4 .num .n7 {
  background-position: -220px -1225px;
}
.badge .lv3_4 .num .n8 {
  background-position: -230px -1225px;
}
.badge .lv3_4 .num .n9 {
  background-position: -240px -1225px;
}

.badge .lv3_5 .lv1_0 {
  background-position: 0 -125px;
}
.badge .lv3_5 .lv1_1 {
  background-position: -50px -125px;
}
.badge .lv3_5 .lv1_2 {
  background-position: -100px -125px;
}
.badge .lv3_5 .lv1_3 {
  background-position: -150px -125px;
}
.badge .lv3_5 .lv1_4 {
  background-position: -200px -125px;
}
.badge .lv3_5 .lv1_5 {
  background-position: -250px -125px;
}
.badge .lv3_5 .lv1_6 {
  background-position: -300px -125px;
}
.badge .lv3_5 .lv1_7 {
  background-position: -350px -125px;
}
.badge .lv3_5 .lv1_8 {
  background-position: -400px -125px;
}
.badge .lv3_5 .lv1_9 {
  background-position: -450px -125px;
}

.badge .lv3_5 .num .n0 {
  background-position: -300px -1225px;
}
.badge .lv3_5 .num .n1 {
  background-position: -310px -1225px;
}
.badge .lv3_5 .num .n2 {
  background-position: -320px -1225px;
}
.badge .lv3_5 .num .n3 {
  background-position: -330px -1225px;
}
.badge .lv3_5 .num .n4 {
  background-position: -340px -1225px;
}
.badge .lv3_5 .num .n5 {
  background-position: -350px -1225px;
}
.badge .lv3_5 .num .n6 {
  background-position: -360px -1225px;
}
.badge .lv3_5 .num .n7 {
  background-position: -370px -1225px;
}
.badge .lv3_5 .num .n8 {
  background-position: -380px -1225px;
}
.badge .lv3_5 .num .n9 {
  background-position: -390px -1225px;
}

.badge .lv3_6 .lv1_0 {
  background-position: 0 -150px;
}
.badge .lv3_6 .lv1_1 {
  background-position: -50px -150px;
}
.badge .lv3_6 .lv1_2 {
  background-position: -100px -150px;
}
.badge .lv3_6 .lv1_3 {
  background-position: -150px -150px;
}
.badge .lv3_6 .lv1_4 {
  background-position: -200px -150px;
}
.badge .lv3_6 .lv1_5 {
  background-position: -250px -150px;
}
.badge .lv3_6 .lv1_6 {
  background-position: -300px -150px;
}
.badge .lv3_6 .lv1_7 {
  background-position: -350px -150px;
}
.badge .lv3_6 .lv1_8 {
  background-position: -400px -150px;
}
.badge .lv3_6 .lv1_9 {
  background-position: -450px -150px;
}

.badge .lv3_6 .num .n0 {
  background-position: 0 -1250px;
}
.badge .lv3_6 .num .n1 {
  background-position: -10px -1250px;
}
.badge .lv3_6 .num .n2 {
  background-position: -20px -1250px;
}
.badge .lv3_6 .num .n3 {
  background-position: -30px -1250px;
}
.badge .lv3_6 .num .n4 {
  background-position: -40px -1250px;
}
.badge .lv3_6 .num .n5 {
  background-position: -50px -1250px;
}
.badge .lv3_6 .num .n6 {
  background-position: -60px -1250px;
}
.badge .lv3_6 .num .n7 {
  background-position: -70px -1250px;
}
.badge .lv3_6 .num .n8 {
  background-position: -80px -1250px;
}
.badge .lv3_6 .num .n9 {
  background-position: -90px -1250px;
}

.badge .lv3_7 .lv1_0 {
  background-position: 0 -175px;
}
.badge .lv3_7 .lv1_1 {
  background-position: -50px -175px;
}
.badge .lv3_7 .lv1_2 {
  background-position: -100px -175px;
}
.badge .lv3_7 .lv1_3 {
  background-position: -150px -175px;
}
.badge .lv3_7 .lv1_4 {
  background-position: -200px -175px;
}
.badge .lv3_7 .lv1_5 {
  background-position: -250px -175px;
}
.badge .lv3_7 .lv1_6 {
  background-position: -300px -175px;
}
.badge .lv3_7 .lv1_7 {
  background-position: -350px -175px;
}
.badge .lv3_7 .lv1_8 {
  background-position: -400px -175px;
}
.badge .lv3_7 .lv1_9 {
  background-position: -450px -175px;
}

.badge .lv3_7 .num .n0 {
  background-position: -150px -1250px;
}
.badge .lv3_7 .num .n1 {
  background-position: -160px -1250px;
}
.badge .lv3_7 .num .n2 {
  background-position: -170px -1250px;
}
.badge .lv3_7 .num .n3 {
  background-position: -180px -1250px;
}
.badge .lv3_7 .num .n4 {
  background-position: -190px -1250px;
}
.badge .lv3_7 .num .n5 {
  background-position: -200px -1250px;
}
.badge .lv3_7 .num .n6 {
  background-position: -210px -1250px;
}
.badge .lv3_7 .num .n7 {
  background-position: -220px -1250px;
}
.badge .lv3_7 .num .n8 {
  background-position: -230px -1250px;
}
.badge .lv3_7 .num .n9 {
  background-position: -240px -1250px;
}

.badge .lv3_8 .lv1_0 {
  background-position: 0 -200px;
}
.badge .lv3_8 .lv1_1 {
  background-position: -50px -200px;
}
.badge .lv3_8 .lv1_2 {
  background-position: -100px -200px;
}
.badge .lv3_8 .lv1_3 {
  background-position: -150px -200px;
}
.badge .lv3_8 .lv1_4 {
  background-position: -200px -200px;
}
.badge .lv3_8 .lv1_5 {
  background-position: -250px -200px;
}
.badge .lv3_8 .lv1_6 {
  background-position: -300px -200px;
}
.badge .lv3_8 .lv1_7 {
  background-position: -350px -200px;
}
.badge .lv3_8 .lv1_8 {
  background-position: -400px -200px;
}
.badge .lv3_8 .lv1_9 {
  background-position: -450px -200px;
}

.badge .lv3_8 .num .n0 {
  background-position: -300px -1250px;
}
.badge .lv3_8 .num .n1 {
  background-position: -310px -1250px;
}
.badge .lv3_8 .num .n2 {
  background-position: -320px -1250px;
}
.badge .lv3_8 .num .n3 {
  background-position: -330px -1250px;
}
.badge .lv3_8 .num .n4 {
  background-position: -340px -1250px;
}
.badge .lv3_8 .num .n5 {
  background-position: -350px -1250px;
}
.badge .lv3_8 .num .n6 {
  background-position: -360px -1250px;
}
.badge .lv3_8 .num .n7 {
  background-position: -370px -1250px;
}
.badge .lv3_8 .num .n8 {
  background-position: -380px -1250px;
}
.badge .lv3_8 .num .n9 {
  background-position: -390px -1250px;
}

.badge .lv3_9 .lv1_0 {
  background-position: 0 -225px;
}
.badge .lv3_9 .lv1_1 {
  background-position: -50px -225px;
}
.badge .lv3_9 .lv1_2 {
  background-position: -100px -225px;
}
.badge .lv3_9 .lv1_3 {
  background-position: -150px -225px;
}
.badge .lv3_9 .lv1_4 {
  background-position: -200px -225px;
}
.badge .lv3_9 .lv1_5 {
  background-position: -250px -225px;
}
.badge .lv3_9 .lv1_6 {
  background-position: -300px -225px;
}
.badge .lv3_9 .lv1_7 {
  background-position: -350px -225px;
}
.badge .lv3_9 .lv1_8 {
  background-position: -400px -225px;
}
.badge .lv3_9 .lv1_9 {
  background-position: -450px -225px;
}

.badge .lv3_9 .num .n0 {
  background-position: 0 -1275px;
}
.badge .lv3_9 .num .n1 {
  background-position: -10px -1275px;
}
.badge .lv3_9 .num .n2 {
  background-position: -20px -1275px;
}
.badge .lv3_9 .num .n3 {
  background-position: -30px -1275px;
}
.badge .lv3_9 .num .n4 {
  background-position: -40px -1275px;
}
.badge .lv3_9 .num .n5 {
  background-position: -50px -1275px;
}
.badge .lv3_9 .num .n6 {
  background-position: -60px -1275px;
}
.badge .lv3_9 .num .n7 {
  background-position: -70px -1275px;
}
.badge .lv3_9 .num .n8 {
  background-position: -80px -1275px;
}
.badge .lv3_9 .num .n9 {
  background-position: -90px -1275px;
}

.badge .lv3_10 .lv1_0 {
  background-position: 0 -250px;
}
.badge .lv3_10 .lv1_1 {
  background-position: -50px -250px;
}
.badge .lv3_10 .lv1_2 {
  background-position: -100px -250px;
}
.badge .lv3_10 .lv1_3 {
  background-position: -150px -250px;
}
.badge .lv3_10 .lv1_4 {
  background-position: -200px -250px;
}
.badge .lv3_10 .lv1_5 {
  background-position: -250px -250px;
}
.badge .lv3_10 .lv1_6 {
  background-position: -300px -250px;
}
.badge .lv3_10 .lv1_7 {
  background-position: -350px -250px;
}
.badge .lv3_10 .lv1_8 {
  background-position: -400px -250px;
}
.badge .lv3_10 .lv1_9 {
  background-position: -450px -250px;
}

.badge .lv3_10 .num .n0 {
  background-position: -150px -1275px;
}
.badge .lv3_10 .num .n1 {
  background-position: -160px -1275px;
}
.badge .lv3_10 .num .n2 {
  background-position: -170px -1275px;
}
.badge .lv3_10 .num .n3 {
  background-position: -180px -1275px;
}
.badge .lv3_10 .num .n4 {
  background-position: -190px -1275px;
}
.badge .lv3_10 .num .n5 {
  background-position: -200px -1275px;
}
.badge .lv3_10 .num .n6 {
  background-position: -210px -1275px;
}
.badge .lv3_10 .num .n7 {
  background-position: -220px -1275px;
}
.badge .lv3_10 .num .n8 {
  background-position: -230px -1275px;
}
.badge .lv3_10 .num .n9 {
  background-position: -240px -1275px;
}

.login_area .logon .btn_logout {
  position: absolute;
  right: 0;
  top: 0;
}
.login_area .logon .btn_change {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 160px;
  height: 35px;
  font-size: 11px;
  color: #b2c0e7;
  font-family: Dotum;
  line-height: 35px;
}
.login_area .logon .btn_detail {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 160px;
  height: 35px;
  font-size: 11px;
  color: #b2c0e7;
  font-family: Dotum;
  line-height: 35px;
}
.login_area .my_info1 {
  position: absolute;
  left: 40px;
  top: 57px;
  width: 270px;
  height: 140px;
  text-align: left;
}

.login_area .my_info1 .exp {
  display: block;
  width: 108px;
  margin: 5px 0 0 -10px;
  color: #ded1c4;
  font-size: 18px;
  font-family: "Teko", Tw Cen MT Condensed;
  text-align: center;
}
.login_area .my_info1 .exp strong {
  display: inline-block;
  margin-left: 8px;
  padding-left: 20px;
  color: #d5a523;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/arrow2.png) no-repeat 0 2px;
}
.login_area .my_info1 .pass {
  position: absolute;
  left: 150px;
  top: 12px;
  width: 86px;
  text-align: center;
}
.login_area .my_info1 .pass .name {
  display: block;
  padding: 5px 0 3px;
  font-size: 12px;
  color: #c59925;
}
.login_area .my_info1 .pass .grade {
  display: block;
  font-size: 12px;
  color: #ded1c4;
}
.login_area .my_info1 .pass .grade span {
  font-size: 16px;
  font-family: "Teko", Tw Cen MT Condensed;
}

.login_area .my_info1 ul {
  position: absolute;
  width: auto;
  height: auto;
  left: 113px;
  top: 20px;
}
.login_area .my_info1 ul li {
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: #ded1c4;
  font-size: 36px;
  font-weight: 500;
  font-family: "Teko", Tw Cen MT Condensed;
}
.login_area .my_info1 li span {
  display: inline-block;
  width: 42px;
  font-size: 12px;
  font-family: "Noto Sans KR";
  vertical-align: top;
}
.login_area .my_info1 .per1 {
  position: absolute;
  top: 22px;
  left: 0;
  width: 81px;
  height: 71px;
  text-align: center;
  font-size: 12px;
  color: #ded1c4;
  line-height: 23px;
  padding-top: 10px;
}
#graph {
  position: absolute;
  top: 22px;
  left: 0;
  width: 81px;
  height: 81px;
}
.login_area .my_info1 .per1 strong {
  font-size: 21px;
  font-family: "Teko", Tw Cen MT Condensed;
  color: #c0810b;
  display: block;
  line-height: 35px;
}
.login_area .my_info1 .per1 strong em {
  font-size: 35px;
}
.login_area .my_info1 .per2 {
  display: none;
  position: absolute;
  top: 57px;
  right: 1px;
  width: 44px;
  height: 19px;
  text-align: center;
  font-size: 20px;
  color: #c0810b;
  line-height: 23px;
  font-weight: 500;
  font-family: "Teko", Tw Cen MT Condensed;
}
.login_area .my_info1 .level {
  position: absolute;
  top: 57px;
  left: 134px;
  width: 126px;
  text-align: center;
  font-size: 14px;
  color: #ded1c4;
}
.login_area .my_info1 .level strong {
  margin-left: 3px;
  color: #c0810b;
  font-size: 35px;
  font-weight: 500;
  font-family: "Teko", Tw Cen MT Condensed;
  vertical-align: middle;
}
.login_area .my_info1 .grade1 {
  position: absolute;
  top: 113px;
  left: -28px;
  line-height: 12px;
  text-align: center;
  font-size: 12px;
  color: #ded1c4;
  font-weight: 500;
  width: 140px;
}
.login_area .my_info1 .grade2 {
  position: absolute;
  top: 110px;
  left: 54px;
  line-height: 12px;
  text-align: left;
  font-size: 12px;
  color: #d5a523;
  font-weight: 500;
}
.login_area .my_info2 {
  position: absolute;
  left: 45px;
  top: 214px;
  width: 265px;
  height: 195px;
  font-size: 12px;
  color: #c6c6c6;
  font-weight: 500;
  text-align: left;
  display: none;
}
.login_area .my_info2 h3 {
  width: 100%;
  height: 27px;
  line-height: 27px;
}
.login_area .my_info2 h3 img {
  margin-right: 10px;
}
.login_area .my_info2 ul {
  width: 100%;
  height: auto;
  margin-top: 10px;
}
.login_area .my_info2 li {
  position: relative;
  width: 100%;
  height: 24px;
  line-height: 24px;
}
.login_area .my_info2 li span {
  display: inline-block;
  width: 80px;
  color: #3d557a;
}
.login_area .my_info2 li.break {
  height: auto;
  padding-left: 80px;
  line-height: 1.6;
}
.login_area .my_info2 li.break span {
  position: absolute;
  left: 0;
  top: 0;
}

.smoothswap-up {
  position: absolute;
  left: -53px;
  top: 20px;
  width: 24px;
  height: 20px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/btn_arrow.png) -26px 0 no-repeat;
}
.smoothswap-down {
  position: absolute;
  left: -53px;
  top: 40px;
  width: 24px;
  height: 20px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/btn_arrow.png) -26px -20px no-repeat;
}
.smoothswap-up:hover {
  background-position: 0 0;
}
.smoothswap-down:hover {
  background-position: 0 -20px;
}
#con1 .inner {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/bg_board.png) 56px 62px no-repeat;
  *zoom: 1;
}
#con1 .inner:after {
  content: "";
  display: block;
  clear: both;
}
.section h2 {
  font-size: 25px;
  color: #4e5568;
  vertical-align: top;
  font-weight: 700;
}
.section h2 a {
  margin: 5px 0 0 15px;
  vertical-align: top;
  line-height: 18px;
  display: inline-block;
}
.section h2 a img {
  vertical-align: top;
}
.section li .writer img {
  margin-right: 5px;
}

.csoNews {
  position: relative;
  width: 563px;
  height: 305px;
  float: left;
  margin-right: 107px;
}
.csoNews ul {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 21px;
}
.csoNews ul li {
  position: relative;
  width: 100%;
  height: 45px;
  line-height: 45px;
  font-size: 0;
}
.csoNews ul li span {
  display: inline-block;
  font-weight: 500;
  vertical-align: top;
  zoom: 1;
  *display: inline;
}
.csoNews ul li .cate {
  width: 70px;
  height: 100%;
  font-size: 12px;
  color: #858b9b;
}
.csoNews ul li .date {
  width: 82px;
  height: 100%;
  color: #858b9b;
  font-family: "Teko", Tw Cen MT Condensed;
  font-size: 16px;
}
.csoNews ul li .subject {
  width: 411px;
  height: 100%;
  font-size: 14px;
  letter-spacing: -0.075em;
}
.csoNews ul li a {
  color: #4e5568;
  display: inline-block;
  font-weight: 500;
  vertical-align: top;
  zoom: 1;
  *display: inline;
  height: 100%;
}
.csoNews ul li a:hover,
.csoNews ul li a:focus {
  color: #b81515;
}
.csoNews ul li .subject .tit {
  display: inline-block;
  max-width: 379px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 1px;
}
.csoNews ul li .new {
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: #ff1d1d;
  border-radius: 50%;
  margin-left: 7px;
  text-indent: -100000px;
  vertical-align: middle;
}
.csoNews ul li .cate em {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/ico_news.png) 0 0 no-repeat;
  width: 15px;
  height: 15px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.csoNews ul li .cate.notice em {
  background-position: 0 0;
}
.csoNews ul li .cate.patch em {
  background-position: 0 -45px;
}
.csoNews ul li .cate.checkup em {
  background-position: 0 -90px;
}
.csoNews ul li .date em {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_board.png) -67px 0 no-repeat;
  width: 19px;
  height: 19px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

.freeBoard {
  position: relative;
  width: 610px;
  height: 305px;
  float: left;
}
.freeBoard .tab {
  position: absolute;
  right: 0;
  top: 10px;
  width: 376px;
  height: 16px;
}
.freeBoard .tab li {
  float: left;
  height: 100%;
}
.freeBoard .tab li.b1 {
  width: 72px;
}
.freeBoard .tab li.b2 {
  width: 79px;
}
.freeBoard .tab li.b3 {
  width: 78px;
}
.freeBoard .tab li.b4 {
  width: 86px;
}
.freeBoard .tab li.b5 {
  width: 61px;
}
.freeBoard .tab li a {
  display: block;
  height: 100%;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/ico_community.png) no-repeat;
  padding-left: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #4e5568;
  letter-spacing: -0.075em;
}
.freeBoard .tab li.b1 a {
  width: 52px;
  background-position: 0 -32px;
}
.freeBoard .tab li.b2 a {
  width: 54px;
  background-position: -72px -32px;
  padding-left: 25px;
}
.freeBoard .tab li.b3 a {
  width: 58px;
  background-position: -151px -32px;
}
.freeBoard .tab li.b4 a {
  width: 66px;
  background-position: -229px -32px;
}
.freeBoard .tab li.b5 a {
  width: 46px;
  background-position: -315px -32px;
  padding-left: 15px;
}
.freeBoard .tab li.b1 a:hover,
.freeBoard .tab li.b1 a:focus {
  background-position: 0 0;
}
.freeBoard .tab li.b2 a:hover,
.freeBoard .tab li.b2 a:focus {
  background-position: -72px 0;
}
.freeBoard .tab li.b3 a:hover,
.freeBoard .tab li.b3 a:focus {
  background-position: -151px 0;
}
.freeBoard .tab li.b4 a:hover,
.freeBoard .tab li.b4 a:focus {
  background-position: -229px 0;
}
.freeBoard .tab li.b5 a:hover,
.freeBoard .tab li.b5 a:focus {
  background-position: -315px 0;
}
.ranking #rank2,
.ranking #rank3,
.freeBoard #board2,
.freeBoard #board3,
.freeBoard #board4,
.freeBoard #board5 {
  display: none;
}
.freeBoard div ul {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 39px;
}
.freeBoard div li {
  position: relative;
  width: 100%;
  height: 39px;
  margin-bottom: 28px;
  line-height: 39px;
  font-size: 0;
}
.freeBoard div li span {
  display: inline-block;
  font-weight: 500;
  vertical-align: top;
  zoom: 1;
  *display: inline;
}
.freeBoard div li .no {
  width: 67px;
  height: 100%;
  font-size: 13px;
  color: #4e5568;
  border-left: 5px solid #fff;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: -0.075em;
  padding-left: 16px;
}
.freeBoard div li .date {
  width: 82px;
  height: 100%;
  color: #858b9b;
  font-family: "Teko", Tw Cen MT Condensed;
  font-size: 16px;
}
.freeBoard div li .writer {
  width: 171px;
  height: 100%;
  color: #858b9b;
  font-size: 12px;
  letter-spacing: -0.075em;
  line-height: 35px;
}
.freeBoard div li .writer span {
  display: inline-block;
  padding-right: 7px;
  margin: -2px 5px 0 0;
  color: #26549a;
  vertical-align: middle;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/layout/bg_bar1.png) right center no-repeat;
}
.freeBoard div li .subject {
  width: 269px;
  height: 100%;
  font-size: 16px;
  letter-spacing: -0.075em;
}
.freeBoard div li a {
  color: #4e5568;
  display: inline-block;
  font-weight: 500;
  vertical-align: top;
  zoom: 1;
  *display: inline;
  height: 100%;
}
.freeBoard div li a:hover,
.freeBoard div li a:focus {
  color: #b81515;
}
.freeBoard div li .subject .tit {
  display: inline-block;
  max-width: 179px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 1px;
}
.freeBoard div li .new {
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: #ff1d1d;
  border-radius: 50%;
  margin-left: 7px;
  text-indent: -100000px;
  vertical-align: middle;
}
.freeBoard div li .date em {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_board.png) -67px 0 no-repeat;
  width: 19px;
  height: 19px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.freeBoard div li .subject em {
  display: inline-block;
  vertical-align: top;
  margin: 1px 0 2px 5px;
}
.freeBoard div li .no strong {
  display: block;
  font-size: 35px;
  line-height: 32px;
  font-family: "Teko", Tw Cen MT Condensed;
  font-weight: 500;
  letter-spacing: 0;
}
.freeBoard div li:hover .no,
.freeBoard div li:focus .no {
  border-left: 5px solid #282d3c;
}

.csoTV {
  position: relative;
  width: 100%;
  float: left;
  margin-top: 42px;
}
.csoTV ul {
  position: relative;
  overflow: hidden;
  margin: 24px -24px 0 0;
}
.csoTV li {
  float: left;
  width: 269px;
  margin-right: 24px;
}
.csoTV .recommend {
  width: 399px;
  margin-right: 26px;
}
.csoTV .recommend .tag {
  position: absolute;
  top: 0;
  left: 11px;
  width: 64px;
  height: 44px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/bg_tv_recommend.png) no-repeat;
  font-weight: normal;
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding-top: 28px;
}
.csoTV li a {
  position: relative;
  display: block;
  height: 224px;
}
.csoTV li a:hover {
  background-color: #fff;
}
.csoTV li .thumbnail {
  position: relative;
  width: 100%;
  height: 151px;
}
.csoTV .recommend .thumbnail {
  height: 100%;
}
.csoTV li img {
  display: block;
  width: 100%;
  height: 100%;
}
.csoTV li .cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/bg_tv_cover.png) no-repeat;
}
.csoTV li .play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 61px;
  height: 53px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/spr_icon_tv_play.png) no-repeat;
  margin: -27px 0 0 -30px;
}
.csoTV li a:hover .play {
  background-position: 0 -67px;
}
.csoTV li p {
  border-bottom: 2px solid #a7aab6;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/bg_tv.png) 151px 46px no-repeat;
  padding: 11px 10px;
}
.csoTV li p span {
  display: block;
}
.csoTV li .tit {
  height: 22px;
  font-size: 16px;
  color: #4e5568;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 13px;
}
.csoTV li .writer {
  color: #858b9b;
}

.bestShot {
  position: relative;
  width: 864px;
  height: 288px;
  float: left;
  margin-bottom: 52px;
}
.bestShot ul {
  position: relative;
  width: 100%;
  height: 220px;
  margin-top: 50px;
}
.bestShot ul li {
  position: relative;
  width: 262px;
  height: 100%;
  margin-right: 26px;
  float: left;
  overflow: hidden;
}
.bestShot ul li > img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.bestShot ul li:hover > img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.bestShot ul li a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/best_shot.png) 0 bottom no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
}
.bestShot ul li .cate {
  position: absolute;
  right: 0;
  top: 0;
}
.bestShot ul li .over {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 53px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/best_shot_over.png) 0 bottom no-repeat;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.bestShot ul li a:hover .over {
  width: 100%;
}
.bestShot ul li p {
  position: absolute;
  left: 22px;
  bottom: 55px;
  width: 100%;
  height: 24px;
}
.bestShot ul li .tit {
  display: inline-block;
  max-width: 199px;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 1px;
}
.bestShot ul li .hit {
  display: inline-block;
  line-height: 24px;
  vertical-align: top;
  margin-left: 5px;
}
.bestShot ul li .writer {
  position: absolute;
  left: 22px;
  bottom: 20px;
  width: 100%;
  line-height: 25px;
  color: #b9c0d6;
  font-weight: 400;
  font-size: 12px;
}
.bestShot ul li .writer span {
  margin-right: 4px;
}
.bestShot ul li .date {
  position: absolute;
  left: 22px;
  top: 18px;
  width: 34px;
  height: 34px;
  border: 1px solid #d0d0d1;
  background-color: #2f333c;
  line-height: 16px;
  font-size: 12px;
  color: #bfbfbf;
  padding-left: 5px;
}

.btnArea {
  position: relative;
  width: 384px;
  height: 222px;
  margin: 66px 0 52px 0;
  float: right;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/bg_btn.png) right top no-repeat;
}
.btnArea > div {
  width: 100%;
  height: 111px;
}
.btnArea > div a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -100000px;
}
.ranking {
  position: relative;
  width: 1248px;
  height: 127px;
  clear: both;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/bg_ranking.png) no-repeat;
  padding: 51px 0 0 32px;
}
/*.ranking .select_season{position:absolute;left:32px;top:26px;}*/
.rt_line {
  position: absolute;
  top: 0;
  left: 0;
  width: 785px;
  height: 34px;
  background: url(https://lwi.nexon.com/cso/home/main/rt_line.png) no-repeat;
}
.ranking .latest_season {
  position: absolute;
  top: 9px;
  left: 9px;
  padding-left: 23px;
  color: #fff;
  font-size: 14px;
}
.ranking .latest_season i {
  position: absolute;
  top: -2px;
  left: 0;
  width: 15px;
  height: 22px;
  background: url(https://lwi.nexon.com/cso/home/main/latest_season_ic.png) no-repeat;
}
.ranking .note {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 18px;
  padding: 0 20px;
  background-color: #171717;
  color: #aeaeae;
  font-size: 12px;
  line-height: 18px;
  border-radius: 20px;
}
.ranking .tab {
  position: absolute;
  top: 8px;
  left: 182px;
  height: 18px;
  padding-left: 15px;
  line-height: 18px;
}
.ranking .tab::after {
  display: block;
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 1px;
  height: 14px;
  background: url(https://lwi.nexon.com/cso/home/main/ranking_cut.png) no-repeat;
}
.ranking .tab li {
  float: left;
  height: 100%;
  margin-right: 14px;
}
.ranking .tab li a {
  display: block;
  height: 100%;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/ico_ranking.png) 0 6px no-repeat;
  padding-left: 15px;
  font-size: 12px;
  color: #aeaeae;
}
.ranking .tab li a:hover,
.ranking .tab li a:focus,
.ranking .tab li.active a {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/ico_ranking.png) 0 -14px no-repeat;
  color: #fff;
}
.ranking .rank {
  height: 65px;
}
.ranking h2 {
  float: left;
  width: auto;
  height: 40px;
  border-bottom: 1px solid #fff;
  font-size: 30px;
  letter-spacing: -0.075em;
  font-weight: 400;
  color: #fff;
  padding-top: 15px;
  line-height: 1.4;
}
.ranking h2 strong {
  font-weight: 700;
}
.ranking div .slideshow {
  position: relative;
  width: 893px;
  height: 100%;
  float: right;
  margin-right: 10px;
  overflow: hidden;
}
.ranking div .slideshow ul {
  width: 100%;
  height: 100%;
  float: left;
  z-index: 1 !important;
  position: relative;
}
.ranking div ul li {
  display: inline-block;
  font-size: 0;
}
.ranking div ul li p {
  position: relative;
  width: 259px;
  height: 65px;
  margin-right: 34px;
  display: inline-block;
  *display: inline;
  zoom: 1;
  color: #fff;
}
.ranking div ul li.nodata {
  line-height: 65px;
  font-size: 31px;
  color: #eee;
  font-weight: 500;
  width: 595px;
  padding-left: 325px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/noranking.png) 185px 50% no-repeat;
}
.ranking div ul li .rk {
  display: inline-block;
  width: 47px;
  height: 100%;
  margin-right: 24px;
  font-size: 55px;
  font-weight: 500;
  font-family: "Teko", Tw Cen MT Condensed;
  text-align: center;
}
.ranking div ul li .rk em {
  display: block;
  width: 100%;
  line-height: 17px;
  font-size: 12px;
  font-weight: 700;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  text-align: center;
  font-family: "Noto Sans KR";
}
.ranking div ul li .name {
  display: inline-block;
  width: 188px;
  height: 100%;
  margin-top: 3px;
  font-size: 19px;
  font-weight: 700;
  vertical-align: top;
  line-height: 30px;
  vertical-align: top;
}
.ranking div ul li .point {
  display: block;
  width: 182px;
  height: 24px;
  font-size: 12px;
  font-weight: 500;
  color: #aeaeae;
  background-color: #000;
  line-height: 24px;
  padding-left: 7px;
  margin-top: 5px;
}
.ranking div ul li .point em {
  font-size: 16px;
  color: #fff;
  font-family: "Teko", Tw Cen MT Condensed;
  font-weight: 400;
}
.ranking .btn_left {
  position: absolute;
  right: 0;
  top: 0;
  width: 35px;
  height: 77px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/btn_ranking.png) no-repeat;
  text-indent: -100000px;
  z-index: 2;
}
.ranking .btn_left:hover {
  background-position: -37px 0;
}
.ranking .btn_right {
  position: absolute;
  right: 0;
  top: 77px;
  width: 35px;
  height: 76px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/btn_ranking.png) 0 -77px no-repeat;
  text-indent: -100000px;
  z-index: 2;
}
.ranking .btn_right:hover {
  background-position: -37px -77px;
}

/* 셀렉트박스 디자인 */
.jquery-selectbox {
  display: inline-block;
  position: relative;
  width: 125px !important;
  height: 23px;
  line-height: 19px;
  font-size: 12px;
  color: #fff;
  text-indent: 5px;
  text-align: left;
  border: 2px solid #fff;
  box-sizing: border-box;
}
.jquery-selectbox .jquery-selectbox-list {
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 21px;
  left: -2px;
  background: #fff;
  text-indent: 5px;
  z-index: 2147483647;
  width: 125px !important;
  color: #171717;
}
.jquery-selectbox .jquery-selectbox-moreButton {
  float: right;
  width: 21px;
  height: 21px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/btn_select_open.png) 50% 50% no-repeat;
  cursor: pointer;
}
.jquery-selectbox .jquery-selectbox-item.listelementhover {
  text-decoration: underline;
}
.jquery-selectbox .jquery-selectbox-item {
  display: block;
  height: 30px;
  line-height: 30px;
  cursor: default;
}

.bestStudio {
  position: relative;
  width: 1323px;
  height: 509px;
  margin-top: 50px;
}
.bestStudio li {
  position: relative;
  float: left;
  width: 399px;
  height: 100%;
  margin-right: 42px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/bg_studio.png) 0 bottom no-repeat;
}
.bestStudio li a {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}
.bestStudio li a:hover {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/bg_studio_over.png) 0 bottom no-repeat;
  color: #2b2c2f;
}
.bestStudio li .up {
  position: absolute;
  width: 82px;
  height: 53px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/main/label_studio.png) no-repeat;
  bottom: 228px;
  right: 25px;
  padding-top: 40px;
  text-align: center;
  font-size: 40px;
  font-weight: 500;
  color: #fff;
  font-family: "Teko", Tw Cen MT Condensed;
  line-height: 46px;
}
.bestStudio li p {
  position: absolute;
  left: 50px;
  top: 250px;
  width: 320px;
  height: 155px;
}
.bestStudio li .tit {
  display: inline-block;
  max-width: 189px;
  line-height: 34px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 22px;
  font-weight: 700;
  padding-right: 1px;
  height: 34px;
}
.bestStudio li .hit {
  display: inline-block;
  line-height: 34px;
  font-size: 22px;
  font-weight: 700;
  vertical-align: top;
}
.bestStudio li .writer {
  display: block;
  width: 100%;
  line-height: 25px;
  color: #b9c0d6;
}
.bestStudio li .writer span {
  margin-right: 4px;
}
.bestStudio li .con {
  display: block;
  width: 100%;
  line-height: 21px;
  margin-top: 25px;
  height: 64px;
  overflow: hidden;
}
.bestStudio li .date {
  position: absolute;
  left: 50px;
  bottom: 35px;
  width: 100%;
  line-height: 19px;
  font-family: "Teko", Tw Cen MT Condensed;
  font-size: 16px;
  color: #b9c0d6;
  letter-spacing: 0;
}
.bestStudio li .date em {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_board.png) -39px -61px no-repeat;
  width: 19px;
  height: 19px;
  display: inline-block;
  margin-right: 5px;
  vertical-align: top;
}
.bestStudio li a:hover .writer,
.bestStudio li a:hover .date {
  color: #2b2c2f;
}
.bestStudio li a:hover .date em {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_board.png) -39px -40px no-repeat;
}

/* IE8대응 */
.ie8 .freeBoard .tab li a {
  font-size: 12px;
}
.ie8 .ranking div ul li .name {
  font-size: 26px;
}
.ie8 .freeBoard div li .subject em {
  margin-top: 0;
}
.ie8 #graph {
  top: 21px;
  left: -1px;
}

/* 이벤트 레이어 181010
#layerLiveEvt {position: absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:9999999}
#layerLiveEvt .dim{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:3257px;;background:#000;z-index:9999998;filter:alpha(opacity=86);opacity:0.86}
#layerLiveEvt .pop_content{position: absolute; left:50%;width:916px;height:640px;margin:142px 0 0 -458px;padding-top: 300px;z-index:9999999;background: url('https://ssl.nexon.com/s2/Game/CSO/event/2018/1010_live2/title.png') no-repeat center top}
#layerLiveEvt .logo, #layerLiveEvt .btn {display: block;text-indent: -9999px;overflow: hidden;background: url('https://ssl.nexon.com/s2/Game/CSO/event/2018/1010_live2/spr_btn.png') no-repeat}
#layerLiveEvt .video_box{position: relative;width:916px;height:516px;margin:0 auto;background:#000;border:1px solid #363636;box-sizing: border-box}
#layerLiveEvt .btns {margin-top: 15px;overflow: hidden;}
#layerLiveEvt .btns li {float: left;margin-right: 18px;width: 293px;height: 55px;}
#layerLiveEvt .btns .b3 {margin-right: 0;}
#layerLiveEvt .b1 a {width: 100%;height: 100%;background-position: 0 -57px;}
#layerLiveEvt .b1 a:hover {background-position: 0 -124px;}
#layerLiveEvt .b2 a {width: 100%;height: 100%;background-position: -312px -57px;}
#layerLiveEvt .b2 a:hover {background-position: -312px -124px;}
#layerLiveEvt .b3 a {display: block;width: 293px;height: 55px;background-position: -623px -57px;}
#layerLiveEvt .b3 a:hover {background-position: -623px -124px;}
#layerLiveEvt .b3 a .tooltip {display: none;position: absolute;left:0;top:299px;width: 916px;height: 532px;background: url('https://ssl.nexon.com/s2/Game/CSO/event/2018/1010_live2/tooltip.png') no-repeat;z-index:99999999}
#layerLiveEvt .b3 a:hover .tooltip {display: block;}
#layerLiveEvt .logo {position: absolute;left:-182px;top:-58px; width: 254px;height: 45px;}
#layerLiveEvt .ptn1 {position: absolute;left:-15px;top:345px;width: 46px;height: 143px;background: url('https://ssl.nexon.com/s2/Game/CSO/event/2018/1010_live2/ptn1.png') no-repeat}
#layerLiveEvt .ptn2 {position: absolute;right:-76px;top:680px;width: 112px;height: 31px;background: url('https://ssl.nexon.com/s2/Game/CSO/event/2018/1010_live2/ptn2.png') no-repeat}
#layerLiveEvt .btn_close{position:absolute;top:-56px;right:-15px;width:168px;height:39px;background-position: -312px 0}
#layerLiveEvt .btn_today{position:absolute;top:-56px;right:-182px;width:168px;height:39px;background-position: -480px 0}
#layerLiveEvt .txt{text-align: center;padding-top:24px;}
 */

.layer_movie {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}
.layer_movie .dim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 3257px;
  background: #000;
  z-index: 99998;
  filter: alpha(opacity=86);
  opacity: 0.86;
}
.layer_movie .pop_content {
  position: absolute;
  left: 50%;
  top: 0;
  width: 974px;
  margin: 138px 0 0 -487px;
  z-index: 99999;
  text-align: center;
}
.layer_movie .logo,
.layer_movie .btn {
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  background: url("https://ssl.nexon.com/s2/Game/CSO/event/2019/0425_layer_ups2/btn.png") no-repeat;
}
.layer_movie .video_box {
  position: relative;
  width: 970px;
  height: 544px;
  margin: 5px auto 0;
  background: #000;
  border: 2px solid #373737;
}
.layer_movie .btn_close {
  position: absolute;
  top: 562px;
  right: 0;
  width: 51px;
  height: 26px;
  background-position: -152px 0;
}
.layer_movie .btn_close:hover {
  background-position: -152px -26px;
}
.layer_movie .btn_today {
  position: absolute;
  top: 562px;
  right: 66px;
  width: 132px;
  height: 26px;
  background-position: 0 0;
}
.layer_movie .btn_today:hover {
  background-position: 0 -26px;
}
.layer_movie .txt {
  text-align: center;
  padding-top: 24px;
}
.layer_movie .txt_ie {
  padding: 14px 0 0 2px;
  text-align: left;
  font-size: 14px;
  color: #fff;
}
.layer_movie .txt_ie a {
  color: #3572b0;
  font-weight: 600;
}
.layer_movie .txt_ie a:hover {
  text-decoration: underline;
}

/* 이벤트 레이어 190425 */
#layerUpdateS2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}
#layerUpdateS2 .dim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 3257px;
  background: #000;
  z-index: 99998;
  filter: alpha(opacity=86);
  opacity: 0.86;
}
#layerUpdateS2 .pop_content {
  position: absolute;
  left: 50%;
  top: 0;
  width: 974px;
  margin: 138px 0 0 -487px;
  z-index: 99999;
  text-align: center;
}
#layerUpdateS2 .logo,
#layerUpdateS2 .btn {
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  background: url("https://ssl.nexon.com/s2/Game/CSO/event/2019/0425_layer_ups2/btn.png") no-repeat;
}
#layerUpdateS2 .video_box {
  position: relative;
  width: 970px;
  height: 544px;
  margin: 5px auto 0;
  background: #000;
  border: 2px solid #373737;
}
#layerUpdateS2 .cube1 {
  position: absolute;
  left: -202px;
  top: 242px;
  width: 236px;
  height: 236px;
  background: url("https://ssl.nexon.com/s2/Game/CSO/event/2019/0425_layer_ups2/cube1.png") no-repeat;
}
#layerUpdateS2 .cube2 {
  position: absolute;
  right: -146px;
  top: 430px;
  width: 181px;
  height: 193px;
  background: url("https://ssl.nexon.com/s2/Game/CSO/event/2019/0425_layer_ups2/cube2.png") no-repeat;
}
#layerUpdateS2 .btn_close {
  position: absolute;
  top: 736px;
  left: 152px;
  width: 51px;
  height: 26px;
  background-position: -152px 0;
}
#layerUpdateS2 .btn_close:hover {
  background-position: -152px -26px;
}
#layerUpdateS2 .btn_today {
  position: absolute;
  top: 736px;
  left: 0;
  width: 132px;
  height: 26px;
  background-position: 0 0;
}
#layerUpdateS2 .btn_today:hover {
  background-position: 0 -26px;
}
#layerUpdateS2 .txt {
  text-align: center;
  padding-top: 24px;
}

/* 카스온라인TV 레이어팝업 */
.layerTV {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  overflow: hidden;
  overflow-y: scroll;
}
.layerTV .dimmed {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 100%;
  background: #000;
  filter: alpha(opacity=70);
  opacity: 0.7;
}
.layerTV .pop_content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1200px;
  margin-left: -600px;
  padding-top: 70px;
}
.layerTV .btn_close {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/spr_btn_tv.png) -330px 0 no-repeat;
  text-indent: -99999px;
  overflow: hidden;
  outline: 0;
}
.layerTV .btn_close:hover {
  background-position: -430px 0;
}
.layerTV.scrollpop .pop_content {
  top: 20px;
  margin-top: 0 !important;
  margin-bottom: 20px;
}
.layerTV.scrollpop .dimmed {
  padding-bottom: 40px;
}
.layerTV .pop_content {
  margin-top: -447px;
}
.layerTV .pop_body {
  height: 824px;
  background: #fff;
}
.layerTV .video_frame {
  position: relative;
  height: 675px;
  background: #000;
}
.layerTV .video_frame iframe {
  width: 100%;
  height: 100%;
}
.layerTV .video_info {
  height: 118px;
  font-size: 0;
  padding: 31px 28px 0;
}
.layerTV .video_info h3 {
  width: 700px;
  height: 46px;
  color: #2f3142;
  font-size: 18px;
  line-height: 23px;
  font-weight: 500;
  overflow: hidden;
  margin-bottom: 26px;
}
.layerTV .video_info span {
  display: inline-block;
  *zoom: 1;
  color: #858b9b;
}
.layerTV .video_info .writer {
  font-size: 15px;
  margin-right: 10px;
}
.layerTV .video_info .writer:after {
  content: "";
  display: inline-block;
  height: 12px;
  border-right: 1px solid #ced1d7;
  margin-left: 10px;
}
.layerTV .video_info .time {
  font-size: 18px;
  font-family: "Teko", Tw Cen MT Condensed, sans-serif;
}
.layerTV .txt_ie {
  position: absolute;
  right: 26px;
  bottom: 30px;
  color: #858b9b;
  font-weight: 500;
}
.layerTV .txt_ie a {
  color: #3572b0;
  font-weight: 500;
}
.layerTV .txt_ie a:hover {
  text-decoration: underline;
}

/* 플로팅 배너 */
.floating_banner_wrap {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  z-index: 100;
}
.floating_banner_wrap .floating_banner_contents {
  position: relative;
  width: 900px;
  height: 620px;
  @media screen and (max-height: 750px) {
    width: auto;
    height: 90vh;
  }
}
.floating_banner_wrap .floating_banner_contents .button_area {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  height: 40px;
}
.floating_banner_wrap .floating_banner_contents .button_area p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 20px;
}
.floating_banner_wrap .floating_banner_contents .button_area p input[type="checkbox"] {
  display: block;
  width: 13px;
  height: 13px;
  margin: 0;
}
.floating_banner_wrap .floating_banner_contents .button_area p label {
  display: block;
  font-size: 13px;
  color: #96928e;
}
.floating_banner_wrap .floating_banner_contents .button_area button {
  width: 40px;
  height: 40px;
  @media screen and (max-height: 700px) {
    width: 34px;
    height: 34px;
  }
}
.floating_banner_wrap .floating_banner_contents .button_area button img {
  display: block;
  width: 100%;
  height: 100%;
}
.floating_banner_wrap .floating_banner_contents .image_area {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.floating_banner_wrap .floating_banner_contents .image_area img {
  display: block;
  width: 100%;
  height: auto;
  @media screen and (max-height: 700px) {
    width: auto;
    height: 90vh;
  }
}