@charset "utf-8";

#wrapper.bodyScrollDisable {

  height: 100vh;
  overflow: hidden;
}

body.overflow {
  height: 100%;
  padding-right: 17px;
  overflow: hidden;
  box-sizing: border-box;
}
body.overflow.popup {
  overflow-y: auto;
}


/* 페이지타이틀 */
.title_dep1 {
  position: absolute;
  width: 100%;
  height: 153px;
  left: 0;
  top: 178px;
  font-size: 45px;
  font-weight: 500;
  text-align: center;
  color: #fff;
  line-height: 245px;
}
.title_dep1.sub01 {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/sub_top/sub01.png) 50% 0 no-repeat;
}
.title_dep1.sub02 {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/sub_top/sub02.png) 50% 0 no-repeat;
}
.title_dep1.sub03 {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/sub_top/sub03.png) 50% 0 no-repeat;
}
.title_dep1.sub04 {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/sub_top/sub04.png) 50% 0 no-repeat;
}
.title_dep1.sub05 {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/sub_top/sub05_3BB5E10E.png) 50% 0 no-repeat;
}
/* 20250707 크리에이터 부터 sub10으로 설정 */
.title_dep1.sub10 {
  background: url('../images/sub_top/sub10.png') 50% 0 no-repeat;
}
.title_dep2 {
  font-weight: 500;
  font-size: 35px;
  line-height: 35px;
  color: #232535;
  letter-spacing: -0.075em;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/layout/h3_deco.png) 100% 4px no-repeat;
  padding-right: 240px;
  display: inline-block;
  margin-bottom: 45px;
}
.full .title_dep2 {
  margin-bottom: 72px;
}
/* 게시판 뷰페이지 카테고리 버튼 */
.btn_cate {
  display: inline-block;
  margin-left: -229px;
  vertical-align: top;
  margin-top: 9px;
  font-size: 0;
}
.btn_cate a {
  font-size: 12px;
  color: #eee;
  min-width: 35px;
  height: auto;
  line-height: 16px;
  text-align: center;
  background-color: #a8a9b0;
  padding: 0 5px;
  display: inline-block;
  border: 1px solid #eee;
  border-top: 2px solid #eee;
  border-bottom: 2px solid #eee;
}
.btn_cate a:hover,
.btn_cate a:focus,
.btn_cate a.active {
  background-color: #666879;
}
/* 게시판 탭 */
.board_list_tab {
  position: relative;
  width: 100%;
  height: 51px;
  font-size: 23px;
}
.board_list_tab li {
  position: relative;
  height: 51px;
  margin-right: 50px;
  float: left;
  line-height: 42px;
}
.board_list_tab li a {
  display: block;
  width: 100%;
  height: 100%;
  color: #858b9b;
  z-index: 9;
  letter-spacing: -0.1px;
}
.board_list_tab li a:hover {
  color: #242736;
}
.board_list_tab li.active a {
  color: #242736;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/tab_bottom.png) 50% 0 repeat-x;
  height: 51px;
}
.board_list_tab li a:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.3s;
  transform: scale(0.1, 1);
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/tab_bottom.png) 50% 0 repeat-x;
  filter: Alpha(opacity=0);
}
.board_list_tab li a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.board_list_tab li a:hover:before {
  opacity: 1;
  transform: scale(1, 1);
}
.board_list_tab li a:hover:after {
  opacity: 0;
  filter: Alpha(opacity=0);
}

/* 게시판 소팅 버튼 */
.list_sort {
  position: relative;
  width: 100%;
  height: 15px;
  text-align: right;
  font-size: 0;
}
.list_sort h4 {
  display: inline-block;
  font-size: 12px;
  color: #666879;
  margin-right: 5px;
  line-height: 15px;
  font-weight: 500;
}
.list_sort .btn_sort {
  display: inline-block;
  margin-left: 2px;
  font-size: 12px;
  line-height: 16px;
  background-color: #a8a9b0;
  color: #eee;
  width: 45px;
  text-align: center;
  height: auto;
}
.list_sort .btn_sort:hover,
.list_sort .btn_sort.active {
  background-color: #666879;
}

/* 게시판 리스트 */
.wrap_board {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 6px;
  min-height: 500px;
  float: left;
}
.wrap_board .list {
  width: 100%;
  border-top: 1px solid #cdcdcd;
}
.wrap_board .list li {
  display: block;
  border-bottom: 1px solid #cdcdcd;
  padding: 9px 0;
  height: 39px;
  letter-spacing: -0.075em;
  color: #858b9b;
}
.wrap_board .list li.nodata {
  text-align: center;
  line-height: 39px;
  width: 100%;
  background: transparent;
  padding: 50px 0;
  border-top: 1px solid #cdcdcd;
  margin-top: -1px;
}
.wrap_board .list li dl {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  font-size: 12px;
}
.wrap_board .list li dt {
  font-weight: 500;
  position: relative;
}

.wrap_board .list li dt:hover a {
  color: #fff;
}
.wrap_board .list li dt:before {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 0px;
  content: "";
  background: #282d3c;
  transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  z-index: -1;
}
.wrap_board .list li dt:hover:before {
  width: 100%;
  left: 0%;
  right: auto;
}
.wrap_board .list .gm dt:hover a {
  color: #ffb4b4;
}
.wrap_board .list li dt:hover .writer span {
  color: #fff;
}
.wrap_board .list li span,
.wrap_board .list li dt,
.wrap_board .list li dd,
.wrap_board .list li strong,
.wrap_board .list li em {
  float: left;
  line-height: 39px;
  overflow: hidden;
}
.wrap_board .list li a {
  float: left;
  overflow: hidden;
}
.wrap_board .list .subject {
  padding: 0 20px 0 15px;
  width: 490px;
}
.wrap_board .list .subject.free {
  width: 577px;
}
.wrap_board .list .subject .tit {
  display: block;
  max-width: 449px;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  float: left;
  width: auto;
  margin-right: 7px;
  padding-right: 1px;
}
.wrap_board .list .gm a {
  color: #c81515;
}
.wrap_board .list .subject.free .tit {
  max-width: 537px;
}
.wrap_board .list .writer {
  width: 171px;
  line-height: 35px;
}
.wrap_board .list .writer span {
  display: inline-block;
  padding-right: 7px;
  margin-right: 5px;
  color: #26549a;
  vertical-align: middle;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/layout/bg_bar1.png) right center no-repeat;
  line-height: 36px;
  letter-spacing: 0;
}
.wrap_board .list .writer img {
  margin-right: 5px;
}
.wrap_board .list .new {
  width: 5px;
  height: 5px;
  background-color: #ff1d1d;
  border-radius: 50%;
  margin: 17px 9px 0 0px;
  text-indent: -100000px;
}
.wrap_board .list .info {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/board_info_left.png) no-repeat;
  width: 266px;
  height: 100%;
  padding-left: 22px;
}
.wrap_board .list .info._2 {
  width: 243px;
  padding-left: 45px;
}
.wrap_board .list span b {
  font-family: "Teko", Tw Cen MT Condensed;
  font-size: 16px;
  letter-spacing: 0;
  font-weight: 500;
  margin-left: 3px;
}
.wrap_board .list .info._1 span {
  width: 100%;
}
.wrap_board .list .info._2 span {
  width: 50%;
}
.wrap_board .list .info._3 span {
  width: 33.33%;
}
.wrap_board .list .cmt em {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_board.png) 0 0 no-repeat;
  width: 17px;
  height: 12px;
  display: inline-block;
  margin: 14px 5px 0 0;
}
.wrap_board .list .like em {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_board.png) -22px 0 no-repeat;
  width: 18px;
  height: 14px;
  display: inline-block;
  margin: 12px 3px 0 0;
}
.wrap_board .list .hit em {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_board.png) -45px 0 no-repeat;
  width: 17px;
  height: 17px;
  display: inline-block;
  margin: 12px 5px 0 0;
}
.wrap_board .list .date {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/board_info_right.png) no-repeat;
  width: 89px;
  height: 100%;
  padding-left: 30px;
  float: right;
  font-family: "Teko", Tw Cen MT Condensed;
  font-size: 16px;
  letter-spacing: 0;
}
.wrap_board .list .date span {
  width: 100%;
}
.wrap_board .list .time 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: 10px 5px 0 0;
}

/* 자유-전략-아이디어게시판 */
.wrap_board ._skin1 li dt {
  width: 788px;
  margin-right: 3px;
}
.wrap_board ._skin1 .category {
  padding-left: 37px;
  width: 55px;
  text-align: center;
  background: #fff url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_category.png) no-repeat;
  line-height: 39px;
  color: #4e5568;
}
.wrap_board ._skin1 .category.or {
  background-position: 0 -116px;
}
.wrap_board ._skin1 .category.st {
  background-position: 0 -58px;
}
.wrap_board ._skin1 .category.al {
  background-position: 0 -174px;
}
.wrap_board ._skin1 .category.none,
.wrap_board ._skin3 .category.none {
  background: #fff;
  width: 5px;
  padding-left: 0;
}

/* 이미지-스튜디오모드게시판 */
.wrap_board ._skin2 {
  border: 0;
  width: 1227px;
  float: left;
}
.wrap_board ._skin2 li {
  position: relative;
  width: 382px;
  height: 316px;
  background-color: #fff;
  margin: 0 27px 27px 0;
  float: left;
  border: 0;
  padding: 0;
}
.wrap_board ._skin2 .gr_tit {
  width: 335px;
  height: 61px;
  margin: 18px 0 0 20px;
  padding-left: 7px;
}
.wrap_board ._skin2 .gr_info {
  width: 336px;
  height: 40px;
  margin-left: 20px;
  border-top: 1px solid #eee;
  font-size: 12px;
  letter-spacing: 0;
  font-weight: 500;
  color: #858b9b;
  padding-left: 6px;
}
.wrap_board ._skin2 .gr_info span {
  width: 33.33%;
}
.wrap_board ._skin2 .gr_state {
  position: absolute;
  top: 50px;
  right: 29px;
  width: 62px;
  height: 62px;
  background-color: #3f71bc;
  color: #eee;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  line-height: 62px;
  border-radius: 50%;
  z-index: 2;
}
.wrap_board ._skin2 .gr_state._done {
  background-color: #7e838a;
}
.wrap_board ._skin2 .time {
  font-family: "Teko", Tw Cen MT Condensed;
  font-size: 16px;
  letter-spacing: 0;
  font-weight: 500;
}
.wrap_board ._skin2 .writer {
  clear: left;
  width: 100%;
  line-height: 28px;
}
.wrap_board ._skin2 .writer span {
  line-height: 28px;
}
.wrap_board ._skin2 .tit {
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  max-width: 259px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 1px;
  height: 25px;
}
.wrap_board ._skin2 .tit._news {
  display: block;
  max-width: 330px;
  width: 100%;
}
.wrap_board ._skin2 .tit a {
  color: #4e5568;
  width:100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.wrap_board ._skin2 .cmt {
  font-family: "Teko", Tw Cen MT Condensed;
  font-size: 20px;
  line-height: 28px;
  margin-left: 7px;
  font-weight: 500;
  color: #4e5568;
  letter-spacing: 0;
}
.wrap_board ._skin2 .cmt em {
  margin-top: 7px;
}
.wrap_board ._skin2 .gr_img {
  width: 382px;
  height: auto;
  position: relative;
}
.wrap_board ._skin2 .gr_img a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.wrap_board ._skin2 .gr_img_over {
  width: 382px;
  height: 123px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/dim_over.png) no-repeat;
  cursor: pointer;
  display: none;
}
.wrap_board ._skin2 .gr_img_over img {
  position: absolute;
  bottom: 12px;
  left: 28px;
  width: 220px;
  height: 35px;
}
.wrap_board ._skin2 .gr_img .cate {
  position: absolute;
  right: 0;
  top: 0;
}
.wrap_board ._skin2 li .new {
  margin-top: 12px;
  float: none;
  display: inline-block;
  vertical-align: top;
  margin-left: 7px;
}

/* 설문조사 */
.wrap_board .list._skin3 .subject {
  padding: 0 20px 0 15px;
  width: 620px;
}
.wrap_board .list._skin3 .subject a {
  max-width: 600px;
}
.wrap_board .list._skin3 .state {
  width: 148px;
  background-color: #eee;
}
.wrap_board .list._skin3 .state img {
  vertical-align: top;
}
.wrap_board .list._skin3 .info {
  width: 140px;
  padding-left: 54px;
}
.wrap_board .list._skin3 .date {
  width: 124px;
  padding-left: 70px;
}
.wrap_board .list .join em {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_board.png) -67px -20px no-repeat;
  width: 18px;
  height: 14px;
  display: inline-block;
  margin: 12px 5px 0 0;
}
#layer_poll {
  position: absolute;
  width: 635px;
  left: 305px;
  top: -60px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/layer_poll_top.png) no-repeat;
  margin: 0 auto;
  padding-top: 117px;
  display: none;
  z-index: 1;
}
#layer_poll h4 {
  position: absolute;
  left: 145px;
  top: 78px;
  font-size: 23px;
  font-weight: 500;
  line-height: 23px;
  letter-spacing: -0.075em;
  max-width: 449px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 1px;
}
#layer_poll .poll_close_x {
  position: absolute;
  right: 15px;
  top: 15px;
  width: 47px;
  height: 47px;
  text-indent: -100000px;
}
#layer_poll .poll_wrap {
  position: relative;
  padding: 30px 0 50px 0;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/layer_poll_bottom.png) 0 bottom repeat-y;
}
#layer_poll .poll_wrap ul {
  width: 547px;
  height: auto;
  padding: 0 63px 0 25px;
}
#layer_poll .poll_wrap li {
  position: relative;
  font-size: 0;
  width: 100%;
  height: 28px;
  margin-bottom: 17px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/layer_poll_list.png) 100% 100% no-repeat;
}
#layer_poll .poll_wrap li span {
  display: inline-block;
  font-size: 15px;
  color: #353a48;
  letter-spacing: -0.075em;
  line-height: 28px;
  font-weight: 500;
  height: 100%;
  vertical-align: top;
}
#layer_poll .poll_wrap li .cnt_no {
  width: 87px;
  text-align: right;
  padding-right: 10px;
}
#layer_poll .poll_wrap li .cnt_no b {
  font-size: 23px;
  font-weight: 500;
}
#layer_poll .poll_wrap li .cnt_per {
  width: 107px;
  font-size: 14px;
  color: #fff;
  background-color: #8c96a6;
  position: relative;
}
#layer_poll .poll_wrap li .cnt_per em {
  background-color: #26549a;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
}
#layer_poll .poll_wrap li .cnt_per strong {
  height: 100%;
  right: 10%;
  top: 0;
  position: absolute;
  text-align: right;
  font-weight: 500;
}
#layer_poll .poll_wrap li .txt_poll {
  width: 297px;
  padding: 0 14px 0 32px;
  max-width: 297px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
#layer_poll .btn_poll_area {
  padding-top: 24px;
  text-align: center;
  height: 42px;
}
#layer_poll .poll_close {
  border: 2px solid #000;
  background-color: #eee;
  padding: 0 20px;
  height: 38px;
  line-height: 35px;
  font-size: 16px;
  font-weight: 500;
  color: #181c27;
}

/* 공지사항 */
.wrap_board ._skin4 {
  border: 0;
  width: 1228px;
  float: left;
}
.wrap_board ._skin4 li {
  position: relative;
  width: 280px;
  height: 273px;
  background-color: #fff;
  margin: 0 27px 26px 0;
  float: left;
  border: 0;
  padding: 0 18px;
  box-sizing: border-box;
}
.wrap_board ._skin4 li:hover .noti_bg {
  height: 100%;
}
.wrap_board ._skin4 li .noti_bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 280px;
  height: 60px;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
.wrap_board ._skin4 li.notice .noti_bg {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/bg_notice.png) no-repeat;
}
.wrap_board ._skin4 li.patch .noti_bg {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/bg_patch.png) no-repeat;
}
.wrap_board ._skin4 li.checkup .noti_bg {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/bg_checkup.png) no-repeat;
}
.wrap_board ._skin4 li .noti_cate {
  width: 100%;
  height: 60px;
  display: block;
  position: relative;
  font-size: 12px;
  color: #fff;
  line-height: 60px;
  font-weight: 500;
}
.wrap_board ._skin4 li .noti_cate em {
  display: inline-block;
  width: 40px;
  height: 31px;
  text-indent: -100000px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_ico_title.png) no-repeat;
  vertical-align: top;
  margin: 15px 10px 0 0;
}
.wrap_board ._skin4 li.notice .noti_cate em {
  background-position: 0 0;
}
.wrap_board ._skin4 li.patch .noti_cate em {
  background-position: 0 -105px;
}
.wrap_board ._skin4 li.checkup .noti_cate em {
  background-position: -40px -105px;
}

.wrap_board ._skin4 li .noti_tit {
  width: 100%;
  height: 70px;
  display: block;
  position: relative;
  line-height: 23px;
  font-size: 17px;
  font-weight: 500;
  padding-top: 25px;
  overflow: hidden;
  letter-spacing: -0.075em;
}
.wrap_board ._skin4 li .noti_tit a {
  color: #4e5568;
}
.wrap_board ._skin4 li .noti_tit a:hover,
.wrap_board ._skin4 li .noti_tit a:focus,
.wrap_board ._skin4 li:hover .noti_tit a {
  color: #fff;
}
.wrap_board ._skin4 li .new {
  margin-top: 10px;
  float: none;
  display: inline-block;
  vertical-align: top;
  margin-left: 7px;
}
.wrap_board ._skin4 li .noti_con {
  width: 100%;
  height: 86px;
  display: none;
  position: relative;
  display: none;
  font-size: 12px;
  line-height: 17px;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 15px;
  letter-spacing: -0.075em;
}
.wrap_board ._skin4 li .noti_con a {
  color: #858b9b;
}
.wrap_board ._skin4 li:hover .noti_con {
  display: block;
}
.wrap_board ._skin4 li .noti_info {
  position: absolute;
  bottom: 0;
  left: 18px;
  width: 253px;
  height: 96px;
  padding-top: 12px;
  display: block;
}
.wrap_board ._skin4 li:hover .noti_info {
  display: none;
}
.wrap_board ._skin4 li .noti_info span {
  display: block;
  width: 238px;
  height: 40px;
  line-height: 44px;
  border-top: 1px solid #181c27;
  padding-left: 6px;
  color: #858b9b;
}
.wrap_board ._skin4 li .noti_info span.time {
  font-family: "Teko", Tw Cen MT Condensed;
  font-size: 20px;
  letter-spacing: 0;
  font-weight: 500;
}
.wrap_board ._skin4 li .noti_info span.hit {
  line-height: 50px;
}
.wrap_board ._skin4 li .noti_info span.hit em {
  margin-top: 16px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_board.png) -45px -20px no-repeat;
}
/* 게시판 리스트 버튼 */
.btn_group_list {
  position: relative;
  width: 100%;
  height: 53px;
  border-top: 1px solid #8f8da4;
  border-bottom: 1px solid #8f8da4;
  margin-top: 20px;
  text-align: right;
  padding-top: 10px;
  clear: both;
}
.btn_group_list button {
  margin-right: 15px;
}

.paging {
  position: relative;
  width: auto;
  padding-top: 55px;
  margin: 0 auto;
  height: 53px;
  text-align: center;
  font-size: 0;
  clear: both;
}
.paging a.btn_prev {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 53px;
  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/btn_prev.png) no-repeat;
  text-indent: -100000px;
  vertical-align: top;
  zoom: 1;
  *display: inline;
}
.paging a.btn_prev:before {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 0px;
  content: "";
  background: #5e6071;
  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  z-index: -1;
}
.paging a.btn_prev:hover {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/btn_prev_over.png) no-repeat;
}
.paging a.btn_prev:hover:before {
  width: 100%;
  right: 0%;
  left: auto;
}

.paging a.btn_next {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 53px;
  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/btn_next.png) no-repeat;
  text-indent: -100000px;
  vertical-align: top;
  zoom: 1;
  *display: inline;
}
.paging a.btn_next:before {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  content: "";
  background: #5e6071;
  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  z-index: -1;
}
.paging a.btn_next:hover {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/btn_next_over.png) no-repeat;
}
.paging a.btn_next:hover:before {
  width: 100%;
  left: 0%;
  right: auto;
}

.paging_box {
  border: 1px solid #5e6071;
  height: 51px;
  display: inline-block;
  font-family: "Teko", Tw Cen MT Condensed;
  padding: 0 20px;
  line-height: 53px;
  margin: 0 3px;
}
.paging_box a {
  font-size: 18px;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.paging_box ul {
  display: inline-block;
  vertical-align: top;
  max-width: 900px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.paging_box li {
  float: left;
}
.paging_box li.active {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/paging_active.png) 50% 0 no-repeat;
  height: 65px;
  margin-top: -6px;
  line-height: 65px;
}
.paging_box li a {
  font-size: 25px;
  color: #858b9b;
  padding: 0 9px;
  margin: 0 11px;
}
.paging_box li.active a {
  height: 51px;
  margin-top: 6px;
  line-height: 53px;
}
.paging_box li a:hover,
.paging_box li a:focus,
.paging_box li.active a {
  color: #d0d7ff;
  background-color: #2f3142;
}

/* 게시판 검색 */
.search_group {
  position: absolute;
  right: 0;
  top: -80px;
  width: 466px;
  height: 45px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/bg_search.png) 100% 1px no-repeat;
}
.search_group .search {
  border: 1px solid #2f3142;
  height: 43px;
  width: 47px;
  float: right;
  font-size: 0;
  overflow: hidden;
  position: relative;
}
.search_group button.btn_search {
  position: absolute;
  right: 0;
  top: 0;
  width: 47px;
  height: 43px;
  text-indent: -100000px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/btn_search.png) 50% 50% no-repeat;
}
.search_group button.btn_search.open {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/btn_search_close.png) 50% 50% no-repeat;
}
.search_group .search_area {
  position: absolute;
  right: 62px;
  top: 0;
  display: none;
}
.search_group .input_txt {
  display: inline-block;
  width: 240px;
  height: 43px;
  line-height: 43px;
  border: 0;
  background: transparent;
  padding: 0;
  vertical-align: top;
  text-indent: 10px;
  font-size: 13px;
}
.search_group .btn_find {
  display: inline-block;
  height: 26px;
  padding: 0 10px;
  text-align: center;
  background-color: #75767f;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  vertical-align: super;
}
/* 셀렉트박스 디자인 */
.jquery-selectbox {
  display: inline-block;
  position: relative;
  width: 111px !important;
  height: 43px;
  line-height: 43px;
  font-size: 16px;
  color: #a2a2a2;
  text-indent: 15px;
  text-align: left;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/bg_select.png) 100% 50% no-repeat;
  font-weight: 500;
  box-sizing: border-box;
}
label.jquery-selectbox {
  text-indent: 35px;
}
.jquery-selectbox .jquery-selectbox-list {
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 42px;
  left: -2px;
  border: 1px solid #2f3142;
  background: #eee;
  text-indent: 15px;
  z-index: 2147483647;
  width: 111px !important;
}
.jquery-selectbox .jquery-selectbox-moreButton {
  float: right;
  width: 43px;
  height: 43px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/btn_select_open.png) 50% 50% no-repeat;
  cursor: pointer;
}
.jquery-selectbox.selecthover .jquery-selectbox-moreButton {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/btn_select_close.png) 50% 50% no-repeat;
}
.jquery-selectbox .jquery-selectbox-item.listelementhover {
  background: #2f3142;
}
.jquery-selectbox .jquery-selectbox-item {
  display: block;
  height: 36px;
  line-height: 36px;
  cursor: default;
}

/* 게시판 검색(클래스 월페이퍼 페이지 검색어 자동완성 기능 추가) */
.search_auto_keyword{

}

.search_auto_keyword .search{
  position:relative;
}

.search_auto_keyword label.jquery-selectbox {
  text-indent: 0;
  text-align:center;
}

.search_auto_keyword .keyword_list{
  position:absolute;
  top:43px;
  left:-1px;
  width:100%;
  border-width:0 1px 1px 1px;
  border-style:solid;
  border-color:#2f3142;
  background:#EEE;
  z-index:2;
  max-height:0;
  overflow:hidden;
  transition:max-height linear 300ms;
}

.search_auto_keyword .keyword_list.open{
  max-height:500%;
  border-top:1px solid #2f3142;
}

.search_auto_keyword .keyword_list li{
  height:40px;
  font-size: 13px;
  line-height:40px;
}

.search_auto_keyword .keyword_list li em{
  font-weight:600;
}

.search_auto_keyword .keyword_list li a{
  display:block;
  width:100%;
  height:100%;
  padding: 0 24px;
  box-sizing:border-box;
  font-family:inherit;
  font-size:inherit;
  color:inherit;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}

.search_auto_keyword .keyword_list li a:hover{
  background:#DFDFDF;
}

.sorting{
  display:flex;
  gap:8px;
}

.sorting select{
  width:auto;
  min-width:140px;
  height:40px;
  padding:0 16px;
  appearance: none;
  -o-appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  font-family: "Noto Sans KR", Malgun Gothic, Dotum, sans-serif;
  font-size:14px;
  line-height:1;
  color:#4E5568;
  border:1px solid #363848;
  background: url('../images/sorting_arrow.png')calc(100% - 16px) 50% transparent no-repeat;
}

.sorting select:hover {
  border-color: #363848;
}

.sorting select:focus {
  border-color: #363848;
  box-shadow: 0 0 1px 3px rgba(0,0,0,0);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222;
  outline: none;
}

.sorting select option{
  background:#EEE;
}

/* 클래스 월페이퍼 */
.wrap_wallpaper{
  margin-top:23px;
}

.wrap_wallpaper .wallpaperList{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 23px;
  grid-row-gap: 40px;
}

.wrap_wallpaper .wallpaperList .box{
  background:#fff;
}

.wrap_wallpaper .wallpaperList .imageArea{
  position:relative;
  display:flex;
  align-items: flex-start;
  justify-content: center;
  aspect-ratio:100 / 110;
  background:url("../images/classWallpaper/bg_logo.png") 50% 50% #888 no-repeat;
  overflow:hidden;
}

.wrap_wallpaper .wallpaperList .imageArea .ico_new{
  position:absolute;
  top:0;
  left:0;
  width:50px;
  height:50px;
  font-family: "Teko", Tw Cen MT Condensed;
  font-size:17px;
  line-height:52px;
  font-style:normal;
  text-align:center;
  text-transform:uppercase;
  color:#fff;
  background:#009EB4;
  z-index:1;
}
.wrap_wallpaper .wallpaperList .imageArea .image{
  cursor:pointer;
}

.wrap_wallpaper .wallpaperList .imageArea .image:hover img{
  transform: scale(1.1);
}

.wrap_wallpaper .wallpaperList .imageArea .image img{
  width:100%;
  height:auto;
  transition: all 0.5s ease-in-out;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}
  
.wrap_wallpaper .wallpaperList .imageArea .btn_like{
  position:absolute;
  bottom:16px;
  right:16px;
  width:36px;
  height:36px;
  border-radius:100%;
  background:url("../images/classWallpaper/icon/ico_heart_off.png") 50% 50% rgba(15, 15, 15, 0.8) no-repeat;
  background-size:18px auto;
  overflow:hidden;
  z-index:1;
  text-indent:-9999px;
  transition:background linear 200ms;
}

/* off일때만 hover효과 줘서 클릭 유도 */
.wrap_wallpaper .wallpaperList .imageArea .btn_like:not(.on):hover{
  animation: bounce 400ms ease-out infinite;
}

.wrap_wallpaper .wallpaperList .imageArea .btn_like.on{
  background-image:url("../images/classWallpaper/icon/ico_heart_on.png")
}

.wrap_wallpaper .wallpaperList .textArea{
  padding:24px;
  box-sizing:border-box;
}

.wrap_wallpaper .wallpaperList .textArea .name{
  display:flex;
  justify-content:space-between;
}

.wrap_wallpaper .wallpaperList .textArea .name .type{
  display:inline-flex;
  align-items: center;
  justify-content: center;
  min-width:30px;
  height:24px;
  padding:0 8px;
  box-sizing:border-box;
  font-family: "Teko", Tw Cen MT Condensed;
  font-size:18px;
  text-align:center;
  text-transform:uppercase;
}

.wrap_wallpaper .wallpaperList .textArea .name .type span{
  padding-top:2px;
}

.wrap_wallpaper .wallpaperList .textArea .name .type_tr{
  background:#FBE5E5;
  color:#DD2B2B;
}

.wrap_wallpaper .wallpaperList .textArea .name .type_ct{
  background:#E4EAFF;
  color:#2B70D2;
}

.wrap_wallpaper .wallpaperList .textArea .name h4{
  font-size:18px;
  line-height:1;
  font-weight:500;
}

.wrap_wallpaper .wallpaperList .textArea .count{
  display:flex;
  gap:16px;
  margin-top:10px;
}

.wrap_wallpaper .wallpaperList .textArea .count li{
  padding-left:21px;
  font-family: "Teko", Tw Cen MT Condensed;
  font-size:18px;
  line-height:1;
  color:#A7AAB6;
}

.wrap_wallpaper .wallpaperList .textArea .count li.download{
  background:url("../images/classWallpaper/icon/ico_download.png") 0 -2px no-repeat;
}

.wrap_wallpaper .wallpaperList .textArea .count li.like{
  background:url("../images/classWallpaper/icon/ico_like.png") 0 -2px no-repeat;
}

.wrap_wallpaper .wallpaperList .textArea .count li span{

}

.wrap_wallpaper .wallpaperList .textArea .btn_download{
  display:flex;
  justify-content: center;
  align-items: center;
  gap:8px;
  width:100%;
  height:50px;
  margin-top:18px;
  border:1px solid #C5C7CF;
  box-sizing:border-box;
  transition: all 300ms ease-in-out;
}

.wrap_wallpaper .wallpaperList .textArea .btn_download svg{
  width:18px;
  height:18px;
  fill:none;
}

.wrap_wallpaper .wallpaperList .textArea .btn_download svg path{
  fill:#4E5568
}

.wrap_wallpaper .wallpaperList .textArea .btn_download span{
  color:#4E5568;
}

.wrap_wallpaper .wallpaperList .textArea .btn_download:hover{
  background:#282D3C;
  color:#fff;
  border-color:#282D3C;
}

.wrap_wallpaper .wallpaperList .textArea .btn_download:hover svg path{
  fill:#fff
}

.wrap_wallpaper .wallpaperList .textArea .btn_download:hover span{
  color:#fff;
}

.wrap_wallpaper .spinner{
  display:block;
  margin-top:65px;
}

.wrap_wallpaper .spinner img{
    margin: 0 auto;
    display: block;
}


/* 월페이퍼 레이어 팝업 */
:root{
  --wallpaper-popup-button-width: 60px;
  --icon-off-color:#A7AAB6;
  --icon-hover-color:#fff;
}

#wallpaperLayerPopup{
  display:none;
  position:relative;
  position:fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  // min-height:800px; 
  background: rgba(0, 0, 0, 0.9);
  /* 넥슨 공통 gnb보다 위에 오게 */
  z-index: 9999999; 
  @media screen and (max-height: 800px) {
    dispaly:flex;
    justify-content: center;
    width:100vw;
    height:100vh;
    padding:10vh 120px;
    box-sizing:border-box;
    overflow-x:hidden;
    overflow-y:auto;
    &::-webkit-scrollbar {
      width: 8px;
      height:8px;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(167,170,182,0.3);
      border-radius: 10px;
    }
    &::-webkit-scrollbar-track {
      background: rgba(167,170,182,0.2);
    }
  }
}

#wallpaperLayerPopup .layerPopupContents{
  position:absolute;
  top:50%;
  left:50%;
  height:calc(100% - 80px);
  max-height:1000px;
  transform:translate(-50%, -50%);
  aspect-ratio:100 / 152;
  @media screen and (max-height: 800px) {
    position:relative;
    left:0;
    top:0;
    height:800px;
    min-height:unset;
    transform:none;
  }
}

#wallpaperLayerPopup .titleArea{
  position:relative;
  height:70px;
  padding:15px 30px;
  box-sizing:border-box;
  background:#282D3C;
}

#wallpaperLayerPopup .titleArea .title{
  display:flex;
  align-items: center;
  gap:8px;
  min-height:20px;
}

#wallpaperLayerPopup .titleArea .title .ico_new{
  display:block;
  width:auto;
  min-width:40px;
  height:20px;
  padding:0 8px;
  box-sizing:border-box;
  font-family: "Teko", Tw Cen MT Condensed;
  font-size:16px;
  line-height:23px;
  font-style:normal;
  font-weight:300;
  text-align:center;
  text-transform:uppercase;
  color:#fff;
  background:#009EB4;
}

#wallpaperLayerPopup .titleArea .title h4{
  font-size:18px;
  line-height: 1px;
  font-weight:600;
  color:#fff;
}

#wallpaperLayerPopup .titleArea .update{
  font-family: "Teko", Tw Cen MT Condensed;
  font-size:16px;
  line-height:1;
  color:#A7AAB6;
  margin-top:6px;
}

#wallpaperLayerPopup .titleArea .type{
  position:relative;
  position:absolute;
  right:30px;
  top:50%;
  display:flex;
  align-items: center;
  justify-content: center;
  width:30px;
  height:24px;
  padding-top: 4px;
  font-family: "Teko", Tw Cen MT Condensed;
  font-size:16px;
  line-height:1;
  font-style:normal;
  font-weight:300;
  text-transform:uppercase;
  background:#1F2128;
  box-sizing:border-box;
  transform:translateY(-50%);
  transition: all 300ms linear;
}

#wallpaperLayerPopup .titleArea .type.type_ct{
  color:#2B70D2;
  border:1px solid #2B70D2;
}

#wallpaperLayerPopup .titleArea .type.type_tr{
  color:#DD2B2B;
  border:1px solid #DD2B2B;
}


#wallpaperLayerPopup .swiper{
  width:100%;
  aspect-ratio:100 / 140;
  height:calc(100% - 70px);
  max-height:930px;
  background:url("https://ssl.nexon.com/s2/game/cso/cso2018/common/logo.png") 50% 50% #282D3C no-repeat;
}



#wallpaperLayerPopup .swiper-wrapper .swiper-slide{
  position:relative !important;
  width:auto;
  height:100%;
  box-sizing:border-box;
  aspect-ratio:100 / 140;
  max-height:930px;
}


#wallpaperLayerPopup .swiper-wrapper .cycle-carousel-wrap{
  width:100%;
  aspect-ratio:100 / 140;
}

#wallpaperLayerPopup .swiper-wrapper .swiper-slide:hover .btn_download{
  opacity:1;
}

#wallpaperLayerPopup .swiper-wrapper .swiper-slide .btn_download{
  opacity:0;
  position:absolute;
  top:0;
  left:0;
  display:flex;
  align-items: center;
  justify-content: center;
  width:100%;
  height:100%;
  background: rgba(0, 0, 0, 0.2);
  transition:opacity linear 250ms;
}

#wallpaperLayerPopup .swiper-wrapper .swiper-slide .btn_download a{
  display:flex;
  align-items: center;
  justify-content: center;
  width:80px;
  height:80px;
  border-radius:80px;
  background:rgba(0, 0, 0, 0.7);
}

#wallpaperLayerPopup .swiper-wrapper .swiper-slide .btn_download svg{
  fill:none;
  margin-bottom:8px;
}

#wallpaperLayerPopup .swiper-wrapper .swiper-slide .btn_download svg path {
  fill:#fff;
  transition:all linear 250ms;
}


#wallpaperLayerPopup .swiper-wrapper .swiper-slide .btn_download a:hover svg path{
  fill:#18E7E9;
}

#wallpaperLayerPopup .swiper-wrapper .swiper-slide img{
  width:100%;
  height:100%;
  object-fit: cover;
}

#wallpaperLayerPopup .sliderButton{
  position:absolute;
  top:50%;
  left:50%;
  display:flex;
  justify-content: space-between;
  width:calc(100% + ((var(--wallpaper-popup-button-width) + 12px) * 2));
  transform:translate(-50%, -50%);
  @media screen and (max-height: 800px) {
    width:calc(100% + ((var(--wallpaper-popup-button-width) + 12px) * 2));
    z-index:200;
  }
}

#wallpaperLayerPopup .sliderButton button[class^="swiper-button-"]{
  position:static;
  display:block;
  width:var(--wallpaper-popup-button-width);
  height:var(--wallpaper-popup-button-width);
  margin:0;
  text-indent:-9999px;
  transition:all linear 250ms;
}

#wallpaperLayerPopup .sliderButton .swiper-button-prev{
  background:url("../images/classWallpaper/button/btn_sliderPrev_off.jpg") 50% 50% no-repeat;
}

#wallpaperLayerPopup .sliderButton .swiper-button-prev:hover{
  background-image:url("../images/classWallpaper/button/btn_sliderPrev_hover.jpg");
}

#wallpaperLayerPopup .sliderButton .swiper-button-next{

  background:url("../images/classWallpaper/button/btn_sliderNext_off.jpg") 50% 50% no-repeat;
}

#wallpaperLayerPopup .sliderButton .swiper-button-next:hover{
  background-image:url("../images/classWallpaper/button/btn_sliderNext_hover.jpg");
}

#wallpaperLayerPopup .utilButton{
  position:absolute;
  top:0;
  left:50%;
  display:flex;
  flex-direction: row-reverse;
  width:calc(100% + ((var(--wallpaper-popup-button-width) + 17px) * 2));
  transform:translateX(-50%);
}
#wallpaperLayerPopup .utilButton .utils{
  width:70px;
}

#wallpaperLayerPopup .utilButton .button{
  display:block;
  width:100%;
  height:var(--wallpaper-popup-button-width);
  margin-bottom:27px;
}

#wallpaperLayerPopup .utilButton .button i{
  display:block;
  width:100%;
  height:30px;
  text-indent:-9999px;
  background-position:50% 50%;
  background-repeat:no-repeat;
  transition:all linear 250ms;
}

#wallpaperLayerPopup .utilButton .button span[class^="txt_"]{
  display:block;
  margin-top:7px;
  font-family: "Teko", Tw Cen MT Condensed;
  font-size:18px;
  text-align:center;
  color:var(--icon-off-color);
  transition:all linear 250ms;
}

#wallpaperLayerPopup .utilButton .button:hover span[class^="txt_"]{
  color:var(--icon-hover-color);
}

#wallpaperLayerPopup .utilButton .button.btn_layerPopupClose{
  height:36px;
  margin-bottom:34px;
  background:url('../images/classWallpaper/button/btn_layerClose_off.png') 50% 50% no-repeat;
  text-indent:-9999px;
  transition:all linear 250ms;
}

#wallpaperLayerPopup .utilButton .button.btn_layerPopupClose:hover{
  background-image:url('../images/classWallpaper/button/btn_layerClose_hover.png');
}

#wallpaperLayerPopup .utilButton .button.btn_like i{
  background-image:url('../images/classWallpaper/icon/ico_heart_off.png');
  background-size:22px auto;
}

#wallpaperLayerPopup .utilButton .button.btn_like:hover i{
  background-image:url('../images/classWallpaper/icon/ico_heart_hover.png');
}

#wallpaperLayerPopup .utilButton .button.btn_like.on i{
  background-image:url('../images/classWallpaper/icon/ico_heart_on.png');
}


#wallpaperLayerPopup .utilButton .button.btn_download i{
  background-image:url('../images/classWallpaper/button/btn_download_off.png');
  background-size:100% auto;
}

#wallpaperLayerPopup .utilButton .button.btn_download:hover i{
  background-image:url('../images/classWallpaper/button/btn_download_hover.png');
}

#wallpaperLayerPopup .utilButton .button.btn_copy i{
  background-image:url('../images/classWallpaper/button/btn_linkCopy_off.png');
  background-size:100% auto;
}

#wallpaperLayerPopup .utilButton .button.btn_copy:hover i{
  background-image:url('../images/classWallpaper/button/btn_linkCopy_hover.png');
}

#wallpaperLayerPopup .utilButton .button.btn_copy span[class^="txt_"]{
  font-family: "Noto Sans KR", Malgun Gothic, Dotum, sans-serif;
  font-size:12px;
  font-weight:600;
}


/* 게시판 글쓰기 */
.title_area {
  position: relative;
  display: inline-block;
  width: 433px;
  height: 570px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/board_title.png) 2px 0 no-repeat;
  vertical-align: top;
  padding: 63px 0 0 77px;
  box-sizing: border-box;
}
.title_area.fix {
  position: fixed;
  top: 142px;
  left: auto;
}
.title_area .board_cate {
  width: auto;
  height: 31px;
  margin-bottom: 8px;
}
.title_area .board_cate .cate {
  font-size: 30px;
  color: #c9c9c9;
  line-height: 31px;
}
.title_area .board_cate em {
  display: inline-block;
  width: 40px;
  height: 31px;
  text-indent: -100000px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_ico_title.png) no-repeat;
  vertical-align: top;
  margin-right: 6px;
}
.title_area .board_cate em.cate01 {
  background-position: 0 0;
}
.title_area .board_cate em.cate02 {
  background-position: -40px 0;
}
.title_area .board_cate em.cate03 {
  background-position: -80px 0;
}
.title_area .board_cate em.cate04 {
  background-position: 0 -35px;
}
.title_area .board_cate em.cate05 {
  background-position: -40px -35px;
}
.title_area .board_cate em.cate06 {
  background-position: -80px -35px;
}
.title_area .board_cate em.cate07 {
  background-position: 0 -70px;
}
.title_area .board_cate em.cate08 {
  background-position: -40px -70px;
}
.title_area .board_cate em.cate09 {
  background-position: -80px -70px;
}
.title_area .board_cate .jquery-selectbox {
  width: 155px !important;
  height: 29px;
  line-height: 29px;
  background: #eee;
}
.title_area .board_cate .jquery-selectbox .jquery-selectbox-list {
  top: 30px;
  left: 0;
  border: 0;
  width: 155px !important;
}
.title_area .board_cate .jquery-selectbox .jquery-selectbox-moreButton {
  float: right;
  width: 34px;
  height: 29px;
}
.title_area textarea {
  width: 255px;
  height: 190px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 25px;
  color: #888;
  line-height: 38px;
  font-weight: 500;
  letter-spacing: -0.02em;
  overflow: hidden;
}
.title_area .tit {
  width: 255px;
  height: 180px;
  font-size: 25px;
  color: #eee;
  line-height: 38px;
  letter-spacing: -0.075em;
  margin-bottom: 23px;
  word-break: keep-all;
}
.title_area .tit em {
  margin-left: 10px;
}
.title_area .hit {
  font-size: 12px;
  color: #858b9b;
  font-weight: 500;
}
.title_area .hit b {
  font-family: "Teko", Tw Cen MT Condensed;
  font-size: 20px;
  letter-spacing: 0;
  font-weight: 500;
  margin-left: 3px;
  vertical-align: middle;
}
.title_area .hit em {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_board.png) -45px -20px no-repeat;
  width: 17px;
  height: 17px;
  display: inline-block;
  margin-right: 5px;
  vertical-align: top;
  margin-top: 2px;
}
.title_area .time {
  font-family: "Teko", Tw Cen MT Condensed;
  font-size: 20px;
  letter-spacing: 0;
  font-weight: 500;
  color: #858b9b;
  margin: 0 30px 0 5px;
}
.title_area .time 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: 5px;
  vertical-align: middle;
}

/* 이전 다음글 */
.title_area .view {
  position: absolute;
  left: 36px;
  width: 356px;
  height: 45px;
  line-height: 45px;
  font-size: 13px;
  color: #8d8e9d;
  font-weight: 500;
  background-color: #d1d1d6;
}
.title_area .view._prev {
  bottom: 50px;
}
.title_area .view._next {
  bottom: 0;
}
.title_area .view a {
  font-size: 13px;
  color: #8d8e9d;
  font-weight: 500;
  padding: 0 35px 0 70px;
  width: 251px;
  height: 100%;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.title_area .view._prev a {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_view.png) 20px -195px no-repeat;
}
.title_area .view._next a {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_view.png) 20px -245px no-repeat;
}
.title_area .view._prev:before {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  content: "";
  background-color: #232535;
  transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  z-index: -1;
}
.title_area .view._prev:hover:before {
  width: 100%;
  right: 0%;
  left: auto;
  z-index: 1;
}
.title_area .view._next:before {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 0px;
  content: "";
  background-color: #232535;
  transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  z-index: -1;
}
.title_area .view._next:hover:before {
  width: 100%;
  left: 0%;
  right: auto;
  z-index: 1;
}

/* 게시판 뷰 */
.content_area {
  position: relative;
  float: right;
  width: 702px;
  min-height: 600px;
  margin-top: 6px;
  margin-right: 47px;
}
.content_area .board_tit {
  width: 100%;
  height: 43px;
  line-height: 38px;
  border-top: 1px solid #131419;
  border-bottom: 1px solid #131419;
  padding: 0 3px 0 11px;
  font-size: 12px;
  color: #4e5568;
  font-weight: 500;
  box-sizing: border-box;
}
.content_area .board_tit .writer {
  margin-right: 10px;
}
.content_area .board_tit .family {
  padding-left: 10px;
  border-left: 1px solid #a7a7a7;
}
.content_area .board_tit .family img {
  margin-right: 5px;
}
.content_area .board_tit .more {
  font-size: 13px;
  font-weight: 400;
  float: right;
  height: 100%;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_view.png) 0 10px no-repeat;
  padding-left: 25px;
}
.content_area .board_tit .writer {
  margin-right: 10px;
  line-height: 26px;
}
.content_area .board_tit .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;
  letter-spacing: 0;
}
.content_area .board_tit .writer img {
  margin-right: 5px;
}
.content_area .board_con {
  width: 100%;
  height: 495px;
  border-bottom: 1px solid #131419;
  box-sizing: border-box;
}
.content_area .board_con.view {
  padding: 30px 10px 50px 10px;
  font-size: 15px;
  color: #4e5568;
  line-height: 21px;
  height: auto;
  min-height: 300px;
}
.content_area .board_con.view img {
  vertical-align: top;
  max-width: 100%;
}
.content_area .board_con.poll {
  padding: 45px 10px 30px 10px;
  font-size: 15px;
  color: #4e5568;
  line-height: 21px;
  height: auto;
  border-bottom: 0;
}
.content_area .board_con.news {
  padding: 0 10px 30px 10px;
  font-size: 15px;
  color: #4e5568;
  line-height: 21px;
  height: auto;
  margin-top: -39px;
}
.content_area .board_con.notice {
  padding: 0 10px 30px 10px;
  font-size: 15px;
  color: #4e5568;
  line-height: 21px;
  height: auto;
  min-height: 300px;
}
.content_area .poll_area {
  padding: 0 10px 80px 10px;
  font-size: 15px;
  color: #4e5568;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #131419;
  box-sizing: border-box;
}
.content_area .poll_area ul {
  width: 100%;
  height: auto;
}
.content_area .poll_area li {
  position: relative;
  font-size: 0;
  width: 100%;
  height: 28px;
  margin-bottom: 17px;
}
.content_area .poll_area li span {
  display: inline-block;
  font-size: 15px;
  color: #353a48;
  letter-spacing: -0.075em;
  line-height: 28px;
  font-weight: 500;
  height: 100%;
  vertical-align: top;
}
.content_area .poll_area li .cnt_no {
  width: 87px;
  text-align: right;
  padding-right: 10px;
}
.content_area .poll_area li .cnt_no b {
  font-size: 23px;
  font-weight: 500;
}
.content_area .poll_area li .cnt_per {
  width: 107px;
  font-size: 14px;
  color: #fff;
  background-color: #8c96a6;
  position: relative;
}
.content_area .poll_area li .cnt_per em {
  background-color: #26549a;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
}
.content_area .poll_area li .cnt_per strong {
  height: 100%;
  right: 10%;
  top: 0;
  position: absolute;
  text-align: right;
  font-weight: 500;
}
.content_area .poll_area li .txt_poll {
  width: 478px;
  overflow: hidden;
}
.content_area .poll_area li .txt_poll label {
}
.content_area .poll_area li .txt_poll em {
  width: 26px;
  height: 26px;
  display: inline-block;
  text-indent: -999px;
  overflow: hidden;
  cursor: pointer;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/check.png) 0 -45px no-repeat;
  vertical-align: top;
  margin-right: 5px;
}
.content_area .poll_area li .txt_poll em.checked {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/check.png) 0 0 no-repeat;
}
.content_area .poll_area li .txt_poll input {
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}
.content_area .board_tit .date {
  font-size: 12px;
  display: inline-block;
  width: 74.6%;
  height: 100%;
}
.content_area .board_tit .date em {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_board.png) 0 -40px no-repeat;
  width: 34px;
  height: 26px;
  display: inline-block;
  margin: 5px 10px 0 0;
  vertical-align: top;
}
.content_area .board_tit .date b {
  font-family: "Teko", Tw Cen MT Condensed;
  font-size: 20px;
  letter-spacing: 0;
  font-weight: 500;
  margin-left: 10px;
  vertical-align: middle;
}
.content_area .board_tit .total {
  font-size: 17px;
  display: inline-block;
  width: 25%;
  height: 100%;
  text-align: right;
}
.content_area .board_tit .total em {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_board.png) -64px -39px no-repeat;
  width: 22px;
  height: 18px;
  display: inline-block;
  margin: 10px 5px 0 0;
  vertical-align: top;
}
.content_area .board_tit .total strong {
  font-weight: 600;
  vertical-align: top;
  color: #26549a;
}

.content_area .poll_area .btn_poll_area {
  padding-top: 16px;
  height: 42px;
}
.content_area .poll_area .btn_poll {
  border: 2px solid #000;
  background-color: #26549a;
  padding: 0 20px;
  height: 38px;
  line-height: 35px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}

/* 이벤트 게시판 width 확장 */
.wrap_board_extension {
  width: 960px;
  margin: 0 auto;
}

.title_area_extension {
  padding-top: 17px;
  padding-bottom: 34px;
  border-bottom: 1px solid #d7d8da;
}
.title_area_extension .board_cate {
  margin-bottom: 17px;
}
.title_area_extension .board_cate .cate {
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  color: #4e5568;
}
.title_area_extension .board_cate .cate.progress {
  color: #1277ff;
}
.title_area_extension .tit {
  font-family: "Noto Sans KR", Malgun Gothic, Dotum, sans-serif;
  font-size: 36px;
  line-height: 1.36;
  font-weight: 600;
  color: #000;
}
.title_area_extension .title_bottom_area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
}
.title_area_extension .title_bottom_area .info {
  display: flex;
}
.title_area_extension .title_bottom_area .info span {
  display: flex;
  align-items: center;
}
.title_area_extension .title_bottom_area .info span:not(:last-child)::after {
  display: block;
  content: "";
  width: 1px;
  height: 16px;
  background: #7a7a7a;
  opacity: 0.7;
  margin: 0 14px;
}
.title_area_extension .title_bottom_area .info .hit {
  display: flex;
  align-items: center;
  color: #858b9b;
  font-weight: 500;
}
.title_area_extension .title_bottom_area .info .hit::before {
  display: block;
  content: "";
  margin-right: 5px;
  width: 20px;
  height: 20px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_board.png) -44px 2px no-repeat;
  opacity: 0.5;
}
.title_area_extension .title_bottom_area .info .hit em {
  font-size: 16px;
  line-height: 1;
}
.title_area_extension .title_bottom_area .info .hit b {
  margin-bottom: -5px;
  font-family: "Teko", Tw Cen MT Condensed;
  font-size: 20px;
  letter-spacing: 0;
  font-weight: 500;
  vertical-align: middle;
}
.title_area_extension .title_bottom_area .info .time {
  color: #858b9b;
}
.title_area_extension .title_bottom_area .info .time::before {
  display: block;
  content: "";
  margin-right: 8px;
  width: 20px;
  height: 20px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_board.png) -66px 1px no-repeat;
  opacity: 0.5;
}
.title_area_extension .title_bottom_area .info .time em {
  margin-bottom: -5px;
  font-family: "Teko", Tw Cen MT Condensed;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0;
  font-weight: 500;
  color: #858b9b;
}
.title_area_extension .title_bottom_area .btn_copy {
  height: 100%;
  height: 100%;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_view.png) 0 -70px no-repeat;
  padding-left: 25px;
}

.content_area_extension {
  padding-top: 60px;
}

.content_area_extension .board_con {
  position: relative;
}

.content_area_extension .board_con.news {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content_area_extension .board_con.notice {
  width: 100%;
}

.content_area_extension .board_con img {
  max-width: 100%;
}

.content_area_extension .board_btn {
  width: 100%;
  height: 42px;
  text-align: right;
  margin-top: 20px;
}
.content_area_extension .board_btn button {
  width: 74px;
  height: 42px;
  border: 2px solid #000;
  text-align: center;
  line-height: 36px;
  font-weight: 500;
  font-size: 16px;
  color: #181c27;
  margin-left: 5px;
}
.content_area_extension .board_btn button:hover,
.content_area_extension .board_btn button:focus {
  background-color: #232535;
  color: #eee;
}
.content_area_extension .board_etc {
  position: relative;
  border-top: 1px solid #000;
  border-bottom: 1px solid #131419;
  box-sizing: border-box;
  margin-top: 50px;
  padding-left: 12px;
  height: 43px;
  font-size: 13px;
  color: #373947;
}

.content_area_extension .view_link {
  padding: 19px 0 34px;
}
.content_area_extension .view_link .view {
  display: flex;
  align-items: center;
  width: 100%;
}
.content_area_extension .view_link .view._prev {
  border-bottom: 1px solid #d7d8da;
}

.content_area_extension .view_link .view a {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 12px 0;
}
.content_area_extension .view_link .view a .subTit {
  width: 75px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content_area_extension .view_link .view a .subTit svg {
  display: block;
  margin-left: 4px;
}
.content_area_extension .view_link .view a .subTit span {
  font-size: 14px;
  font-weight: 600;
  color: #4e5568;
}
.content_area_extension .view_link .view a .tit {
  display: flex;
  justify-content: space-between;
  flex: 1;
  padding-left: 30px;
  box-sizing: border-box;
}
.content_area_extension .view_link .view a .title {
  display: block;
  width: 700px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
  line-height: 2;
  font-weight: 500;
  color: #4e5568;
}
.content_area_extension .view_link .view a:hover .title {
  color: #232535;
}
.content_area_extension .view_link .view a .date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: "Teko", Tw Cen MT Condensed;
  font-size: 16px;
  line-height: 21px;
  color: #858b9b;
  padding-right: 5px;
}
.content_area_extension .view_link .view a .date em {
  padding-top: 2px;
}
.content_area_extension .view_link .view a .date::before {
  display: block;
  content: "";
  width: 19px;
  height: 18px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_board.png) -67px 0 no-repeat;
}

/* 리그 vod */
.select_league {
  position: relative;
  width: 200px;
  height: 614px;
  box-sizing: border-box;
  border-bottom: 1px solid #131419;
  margin-right: 21px;
  float: left;
}
.select_vod {
  position: relative;
  width: 200px;
  height: 614px;
  box-sizing: border-box;
  border-bottom: 1px solid #131419;
  margin-right: 22px;
  float: left;
}
.view_vod {
  position: relative;
  width: 757px;
  height: 614px;
  box-sizing: border-box;
  border-bottom: 1px solid #131419;
  float: right;
  background-color: #fff;
  z-index: 0;
}
.view_vod .vedio {
  width: 100%;
  height: 426px;
  background-color: #000;
}
.view_vod h4 span {
  display: inline-block;
  height: 100%;
  vertical-align: top;
}
.view_vod .state {
  width: 71px;
  margin-right: 10px;
  font-size: 15px;
  color: #fff;
  padding-left: 15px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_vod.png) 0 2px no-repeat;
}
.view_vod .cate,
.view_vod .tit {
  padding: 0 10px;
}
.view_vod .ico {
  width: 12px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_vod.png) 0 -38px no-repeat;
}
.select_league h4,
.select_vod h4 {
  border-top: 1px solid #131419;
  border-bottom: 1px solid #131419;
  height: 42px;
  line-height: 42px;
  text-align: center;
  font-size: 18px;
  color: #404856;
  font-weight: 500;
  margin-bottom: 12px;
}
.view_vod h4 {
  width: 731px;
  height: 29px;
  line-height: 29px;
  font-size: 18px;
  color: #404856;
  font-weight: 500;
  margin-top: 28px;
  padding-left: 26px;
}
.view_vod .other {
  width: 705px;
  height: 35px;
  margin: 75px 0 0 26px;
  z-index: 1;
}
.view_vod .btn_prev {
  width: 353px;
  height: 100%;
  float: left;
  font-size: 0;
}
.view_vod .btn_next {
  width: 352px;
  height: 100%;
  float: left;
  font-size: 0;
}
.view_vod .btn_prev span {
  border: 1px solid #565b69;
  display: inline-block;
  margin-left: 3px;
  width: 298px;
  height: 33px;
  font-size: 13px;
  color: #232535;
  text-align: left;
  line-height: 33px;
  padding-left: 15px;
  letter-spacing: -0.075em;
}
.view_vod .btn_next span {
  border: 1px solid #565b69;
  display: inline-block;
  margin-right: 3px;
  width: 298px;
  height: 33px;
  border-left: 0;
  font-size: 13px;
  color: #232535;
  text-align: right;
  line-height: 33px;
  padding-right: 15px;
  letter-spacing: -0.075em;
}
.view_vod .btn_prev a {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 35px;
  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/btn_cmt_prev.png) no-repeat;
  text-indent: -100000px;
  vertical-align: top;
}
.view_vod .btn_prev a:before {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 0px;
  content: "";
  background-color: #565b69;
  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  z-index: -1;
}
.view_vod .btn_prev a:hover {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/btn_cmt_prev_over.png) no-repeat;
}
.view_vod .btn_prev a:hover:before {
  width: 100%;
  right: 0%;
  left: auto;
}
.view_vod .btn_next a {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 35px;
  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/btn_cmt_next.png) no-repeat;
  text-indent: -100000px;
  vertical-align: top;
}
.view_vod .btn_next a:before {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  content: "";
  background-color: #565b69;
  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  z-index: -1;
}
.view_vod .btn_next a:hover {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/btn_cmt_next_over.png) no-repeat;
}
.view_vod .btn_next a:hover:before {
  width: 100%;
  left: 0%;
  right: auto;
}
.select_league ul,
.select_vod ul {
  width: 100%;
  height: 544px;
  overflow: auto;
  overflow-x: hidden;
}
.select_league ul li {
  display: block;
  width: 100%;
  height: 31px;
  margin-bottom: 8px;
  border-left: 5px solid #fff;
  box-sizing: border-box;
  line-height: 31px;
  font-size: 13px;
}
.select_league ul li a {
  color: #404856;
  display: block;
  width: 100%;
  height: 100%;
  padding-left: 15px;
  box-sizing: border-box;
}
.select_league ul li a:hover,
.select_league ul li a:focus,
.select_league ul li.active a {
  color: #fff;
  background-color: #282d3c;
}
.select_vod ul li {
  display: block;
  width: 100%;
  height: 130px;
  margin-bottom: 8px;
  box-sizing: border-box;
  font-size: 13px;
}
.select_vod ul li a {
  color: #404856;
  display: block;
  width: 176px;
  height: 100%;
}
.select_vod ul li a span {
  border-left: 5px solid #dedede;
  box-sizing: border-box;
  line-height: 31px;
  padding: 0 15px;
  width: 100%;
  height: 31px;
  display: block;
  background-color: #fff;
  overflow: hidden;
  white-space: nowrap;
  -ms-text-overflow: ellipsis;
}
.select_vod ul li a:hover span,
.select_vod ul li a:focus span,
.select_vod ul li.active a span {
  color: #fff;
  background-color: #282d3c;
}
.wrap_board .txt_ie {
  clear: both;
  padding-top: 15px;
  text-align: right;
  font-size: 13px;
  color: #858b9b;
  font-weight: 500;
}
.wrap_board .txt_ie a {
  color: #3572b0;
  font-weight: 500;
}
.wrap_board .txt_ie a:hover {
  text-decoration: underline;
}

/* 230907 */
.content_area .board_file {
  width: 100%;
  height: 45px;
  text-align: left;
  border-bottom: 1px solid #000;
  display: flex;
  align-items: center;
}
.content_area .board_file .btn_fileup {
  width: 130px;
  height: 27px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -15px;
}
.content_area .board_file .btn_fileup:before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  background: url("https://lwi.nexon.com/cso/home/sub/add.png") no-repeat;
  margin-right: 5px;
}
#file {
  display: none;
}
#originName {
  margin-left: 10px;
  font-family: "Noto Sans KR";
}
.title_area .board_cate.report .jquery-selectbox {
  width: 176px !important;
  height: 29px;
  line-height: 29px;
  background: #eee;
}
.title_area .board_cate.report .jquery-selectbox .jquery-selectbox-list {
  width: 176px !important;
}
/* 230907 */

.content_area .board_btn {
  width: 100%;
  height: 42px;
  text-align: right;
  margin-top: 20px;
}
.content_area .board_btn button {
  width: 74px;
  height: 42px;
  border: 2px solid #000;
  text-align: center;
  line-height: 36px;
  font-weight: 500;
  font-size: 16px;
  color: #181c27;
  margin-left: 5px;
}
.content_area .board_btn button:hover,
.content_area .board_btn button:focus {
  background-color: #232535;
  color: #eee;
}
.content_area .board_etc {
  position: relative;
  border-bottom: 1px solid #131419;
  padding-left: 12px;
  height: 43px;
  font-size: 13px;
  color: #373947;
}
.board_etc .btn_recommend {
  position: absolute;
  right: 5px;
  height: 21px;
  top: -42px;
  line-height: 21px;
  color: #4e5568;
}
.board_etc .btn_recommend button {
  margin-right: 8px;
}
.board_etc .btn_recommend span {
  font-family: "Teko", Tw Cen MT Condensed;
  font-size: 20px;
  font-weight: 500;
  vertical-align: middle;
}
.board_etc .btn_copy {
  height: 100%;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_view.png) 0 -59px no-repeat;
  padding-left: 25px;
  margin-right: 15px;
}
.board_etc .btn_notify {
  height: 100%;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_view.png) 0 -118px no-repeat;
  padding-left: 17px;
  margin-right: 15px;
}
.full .btn_top_list {
  position: absolute;
  right: 55px;
  top: -110px;
  height: 31px;
}

/* 댓글 */
.comment_list {
  position: relative;
  width: 100%;
}
.comment_list .cmt_form {
  position: relative;
  width: 100%;
  // height: 98px;
  padding-top: 35px;
}
.comment_list .cmt_list {
  position: relative;
  width: 100%;
  padding: 30px 0 24px 0;
  box-sizing: border-box;
  font-weight: 500;
}
.comment_list .cmt_list ul {
  width: 100%;
}
.comment_list .cmt_list li {
  position: relative;
  display: flex;
  width: 100%;
  margin-bottom: 22px;
  font-size: 0;
  line-height: 21px;
  min-height: 43px;
  color: #858b9b;
}
.comment_list .cmt_list li span {
  display: block;
  font-size: 13px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.comment_list .cmt_cnt {
  font-size: 12px;
  color: #a7aab6;
  margin-bottom: 16px;
}
.comment_list .cmt_cnt em {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_board.png) 0 -20px no-repeat;
  width: 16px;
  height: 13px;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}
.comment_list .cmt_tit {
  position: relative;
  width: 58.8%;
  padding: 0 20px;
  color: #4e5568;
  box-sizing: border-box;
}
.comment_list .cmt_tit::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 1px;
  height: 100%;
  background: #a8abb5;
}
.comment_list .cmt_tit::after {
  position: absolute;
  top: 18px;
  left: 0;
  display: block;
  content: "";
  width: 10px;
  height: 1px;
  background: #a8abb5;
  border-left: 1px solid #eee;
}

.comment_list .cmt_writer {
  position: relative;
  width: 28.8%;
  padding: 0 5px 0 12px;
  box-sizing: border-box;
}
.comment_list .cmt_writer::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 1px;
  height: 100%;
  background: #a8abb5;
}
.comment_list .cmt_writer::after {
  position: absolute;
  top: 18px;
  left: -10px;
  display: block;
  content: "";
  width: 10px;
  height: 1px;
  background: #a8abb5;
  border-right: 1px solid #eee;
}
.comment_list .cmt_writer img {
  margin-right: 5px;
}
.comment_list .cmt_list .cmt_writer span {
  display: inline-block;
  padding-right: 7px;
  padding-top: 0;
  padding-bottom: 0;
  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;
}
.comment_list .cmt_date {
  font-family: "Teko", Tw Cen MT Condensed;
  font-size: 16px !important;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/time_dot.png) 8.5px 46px repeat-y;
}
.comment_list .cmt_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: 5px;
  vertical-align: top;
}

.comment_list .cmt_del {
  margin-left: 5px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/IR_board.png) -22px -20px no-repeat;
  width: 15px;
  height: 15px;
  display: inline-block;
  vertical-align: middle;
  text-indent: -100000px;
}
.comment_list .cmt_logoff {
  width: 100%;
  height: 79px;
  background-color: #fff;
  border: 1px solid #565b69;
  color: #4e5568;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  line-height: 81px;
  box-sizing: border-box;
}
.comment_list .cmt_logoff button {
  font-weight: 500;
  font-size: 13px;
  color: #eee;
  width: 113px;
  height: 23px;
  line-height: 23px;
  background-color: #565b69;
  vertical-align: middle;
  margin-left: 20px;
}
.comment_list .cmt_logoff button:hover,
.comment_list .cmt_logoff button:focus {
  background-color: #232535;
}

.comment_list .cmt_logon {
  // width: 700px;
  width: 100%;
  height: 80px;
  background-color: #fff;
  border: 1px solid #565b69;
  color: #4e5568;
  font-size: 0;
  font-weight: 500;
  box-sizing: border-box;
}
.comment_list .cmt_logon textarea {
  border: 0;
  padding: 10px 20px;
  color: #4e5568;
  // width: 623px;
  width: calc(100% - 77px);
  height: 100%;
  box-sizing: border-box;
  font-size: 13px;
  background: transparent;
  resize: none;
}
.comment_list .cmt_logon button {
  font-weight: 500;
  font-size: 13px;
  color: #eee;
  width: 77px;
  height: 100%;
  line-height: 79px;
  background-color: #565b69;
  vertical-align: top;
  font-size: 13px;
}
.comment_list .cmt_logon button:hover,
.comment_list .cmt_logon button:focus {
  background-color: #232535;
}
.comment_list .writer {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 500;
}
.comment_list .writer span {
  display: inline-block;
  padding-right: 7px;
  margin: -4px 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;
  letter-spacing: 0;
}
.comment_list .writer img {
  margin-right: 5px;
}
.comment_list .txt_ck {
  font-size: 12px;
  color: #4e5568;
  line-height: 24px;
}
.comment_list .txt_ck strong {
  font-weight: 400;
  color: #e97230;
}

/* CSO 소식 게시판 width 확장 */
.comment_list.extension .cmt_tit {
  width: 64.7%;
}
.comment_list.extension .cmt_writer {
  width: 27.2%;
}
.comment_list.extension .cmt_date {
}

.cmt_paging {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  height: 35px;
  text-align: center;
  font-size: 0;
  margin-top: -20px;
}
.cmt_paging a.btn_prev {
  position: relative;
  display: block;
  width: 35px;
  height: 35px;
  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/btn_cmt_prev.png) no-repeat;
  text-indent: -100000px;
  vertical-align: top;
}
.cmt_paging a.btn_prev:before {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 0px;
  content: "";
  background: #565b69;
  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  z-index: -1;
}
.cmt_paging a.btn_prev:hover {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/btn_cmt_prev_over.png) no-repeat;
}
.cmt_paging a.btn_prev:hover:before {
  width: 100%;
  right: 0%;
  left: auto;
}
.cmt_paging a.btn_next {
  position: relative;
  display: block;
  width: 35px;
  height: 35px;
  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/btn_cmt_next.png) no-repeat;
  text-indent: -100000px;
  vertical-align: top;
}
.cmt_paging a.btn_next:before {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  content: "";
  background: #565b69;
  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  z-index: -1;
}
.cmt_paging a.btn_next:hover {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/btn_cmt_next_over.png) no-repeat;
}
.cmt_paging a.btn_next:hover:before {
  width: 100%;
  left: 0%;
  right: auto;
}

.paging_cmt_box {
  flex: 1;
  border: 1px solid #565b69;
  width: auto;
  height: 33px;
  display: block;
  font-family: "Teko", Tw Cen MT Condensed;
  line-height: 35px;
}
.paging_cmt_box a {
  font-size: 16px;
  display: block;
}
.paging_cmt_box ul {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.paging_cmt_box li {
  padding: 0 5px;
}
.paging_cmt_box li a {
  color: #a7aab6;
}
.paging_cmt_box li a:hover,
.paging_cmt_box li a:focus,
.paging_cmt_box li.active a {
  color: #565b69;
}

/* 에디터 재정의 */
.content_area .edSec {
  width: 100% !important;
  height: 495px !important;
  border: 0 !important;
  background: transparent !important;
}
.content_area .edWSec {
  height: 457px !important;
}
.content_area .editWindow {
  height: 100% !important;
  padding: 0 10px;
}

/* 레벨 */
.grade .txt_grade1 {
  font-size: 32px;
  line-height: 1.4;
  letter-spacing: -0.075em;
  font-weight: 400;
  color: #858b9b;
}
.grade .txt_grade1 strong {
  font-weight: 600;
}
.grade .txt_grade2 {
  font-size: 15px;
  line-height: 23px;
  font-weight: 500;
  color: #858b9b;
  margin: -7px 0 0 25px;
}
.grade h4 {
  height: 50px;
  line-height: 50px;
  font-weight: 500;
  color: #404856;
  font-size: 30px;
}
.grade h5 {
  height: 45px;
  line-height: 45px;
  padding-left: 19px;
  font-size: 20px;
  color: #fff;
  font-weight: 500;
  margin-top: 20px;
  background: #858b9b url(https://ssl.nexon.com/s2/game/cso/cso2018/layout/bg_stit_ptn.png) no-repeat;
}
.grade .section {
  position: relative;
  margin-top: 65px;
  padding-left: 150px;
  width: 1050px;
}
.grade .section h4 {
  color: #858b9b;
  font-size: 20px;
}
.grade .section h4 span {
  display: inline-block;
  width: 29px;
  height: 26px;
  line-height: 29px;
  padding-left: 1px;
  font-size: 16px;
  color: #fff;
  font-family: "Teko", Tw Cen MT Condensed;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/bg_bul_num.png) no-repeat;
  text-align: center;
  vertical-align: middle;
  margin-top: -3px;
}
.grade .section .img_grade {
  position: absolute;
  left: -14px;
  top: 14px;
}
.grade .section .tbl {
  width: 100%;
  margin-top: 8px;
  border-top: 1px solid #bec2cd;
}
.grade .section .tbl th,
.grade .section .tbl td {
  width: 90px;
  height: 43px;
  line-height: 18px;
  border-left: 1px solid #bec2cd;
  border-bottom: 1px solid #bec2cd;
  text-align: center;
  vertical-align: middle;
}
.grade .section .tbl th:first-child,
.grade .section .tbl td:first-child {
  border-left: 0;
}
.grade .section .tbl td.line {
  border-left: 1px solid #bec2cd;
}
.grade .section .tbl th {
  font-size: 17px;
  color: #858b9b;
  font-family: "Teko", Tw Cen MT Condensed;
  font-weight: 500;
}
.grade .section .tbl th span {
  font-family: "Noto Sans KR";
  font-size: 13px;
}
.grade .section .tbl th.th {
  font-size: 15px;
  color: #4e5568;
  font-family: "Noto Sans KR";
}
.grade .section .tbl td {
  color: #4e5568;
  font-size: 15px;
  font-weight: 600;
}
.grade .section .tbl tr.bgc th,
.grade .section .tbl tr.bgc td {
  background-color: #e3e4e6;
}
.grade .section .tbl_lv3 td,
.grade .section .tbl_lv4 td {
  height: 86px;
}
.grade .ico_lv {
  display: block;
  width: 30px;
  height: 25px;
  margin: 0 auto;
  text-indent: -9999px;
  overflow: hidden;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/spr_info_level.png) no-repeat;
}
.grade .lv2_0 {
  background-position: 0 0;
}
.grade .lv2_1 {
  background-position: -50px 0;
}
.grade .lv2_2 {
  background-position: -100px 0;
}
.grade .lv2_3 {
  background-position: -150px 0;
}
.grade .lv2_4 {
  background-position: -200px 0;
}
.grade .lv2_5 {
  background-position: -250px 0;
}
.grade .lv2_6 {
  background-position: -300px 0;
}
.grade .lv2_7 {
  background-position: -350px 0;
}
.grade .lv2_8 {
  background-position: -400px 0;
}
.grade .lv2_9 {
  background-position: -450px 0;
}

.grade .lv2_40 {
  background-position: 0 -25px;
}
.grade .lv2_41 {
  background-position: -50px -25px;
}
.grade .lv2_42 {
  background-position: -100px -25px;
}
.grade .lv2_43 {
  background-position: -150px -25px;
}
.grade .lv2_44 {
  background-position: -200px -25px;
}
.grade .lv2_45 {
  background-position: -250px -25px;
}
.grade .lv2_46 {
  background-position: -300px -25px;
}
.grade .lv2_47 {
  background-position: -350px -25px;
}
.grade .lv2_48 {
  background-position: -400px -25px;
}
.grade .lv2_49 {
  background-position: -450px -25px;
}

.grade .lv2_70 {
  background-position: 0 -50px;
}
.grade .lv2_71 {
  background-position: -50px -50px;
}
.grade .lv2_72 {
  background-position: -100px -50px;
}
.grade .lv2_73 {
  background-position: -150px -50px;
}
.grade .lv2_74 {
  background-position: -200px -50px;
}
.grade .lv2_75 {
  background-position: -250px -50px;
}
.grade .lv2_76 {
  background-position: -300px -50px;
}
.grade .lv2_77 {
  background-position: -350px -50px;
}
.grade .lv2_78 {
  background-position: -400px -50px;
}
.grade .lv2_79 {
  background-position: -450px -50px;
}

.grade .lv3_0 {
  width: 60px;
  height: 62px;
  background-position: 0 -100px;
}
.grade .lv3_1 {
  width: 60px;
  height: 62px;
  background-position: -100px -100px;
}
.grade .lv3_2 {
  width: 60px;
  height: 62px;
  background-position: -200px -100px;
}
.grade .lv3_3 {
  width: 60px;
  height: 62px;
  background-position: -300px -100px;
}
.grade .lv3_4 {
  width: 60px;
  height: 62px;
  background-position: -400px -100px;
}
.grade .lv3_5 {
  width: 60px;
  height: 62px;
  background-position: -500px -100px;
}
.grade .lv3_6 {
  width: 60px;
  height: 62px;
  background-position: 0 -175px;
}
.grade .lv3_7 {
  width: 60px;
  height: 62px;
  background-position: -100px -175px;
}
.grade .lv3_8 {
  width: 60px;
  height: 62px;
  background-position: -200px -175px;
}
.grade .lv3_9 {
  width: 60px;
  height: 62px;
  background-position: -300px -175px;
}
.grade .lv3_10 {
  width: 60px;
  height: 62px;
  background-position: -400px -175px;
}

.grade .lv4_0 {
  width: 69px;
  height: 69px;
  background-position: 0 -275px;
}
.grade .lv4_1 {
  width: 69px;
  height: 69px;
  background-position: -100px -275px;
}
.grade .lv4_2 {
  width: 69px;
  height: 69px;
  background-position: -200px -275px;
}
.grade .lv4_3 {
  width: 69px;
  height: 69px;
  background-position: -300px -275px;
}
.grade .lv4_4 {
  width: 69px;
  height: 69px;
  background-position: -400px -275px;
}
.grade .lv4_5 {
  width: 69px;
  height: 69px;
  background-position: 0 -350px;
}
.grade .lv4_6 {
  width: 69px;
  height: 69px;
  background-position: -100px -350px;
}
.grade .lv4_7 {
  width: 69px;
  height: 69px;
  background-position: -200px -350px;
}
.grade .lv4_8 {
  width: 69px;
  height: 69px;
  background-position: -300px -350px;
}
.grade .lv4_9 {
  width: 69px;
  height: 69px;
  background-position: -400px -350px;
}

.grade .grade_list {
  overflow: hidden;
  float: left;
  width: 246px;
  margin: 30px 0 0 72px;
  border-top: 2px solid #858b9b;
  border-bottom: 2px solid #858b9b;
  text-align: center;
  font-size: 15px;
  color: #4e5568;
  font-weight: 500;
}
.grade .grade_list.first {
  margin-left: 0;
}
.grade .grade_list dt {
  float: left;
  width: 100px;
  height: 41px;
  line-height: 41px;
  background-color: #e3e4e6;
  border-top: 1px solid #d6d8dd;
  border-left: 1px solid #d6d8dd;
}
.grade .grade_list dd {
  float: left;
  width: 112px;
  height: 41px;
  line-height: 41px;
  padding-left: 33px;
  border-top: 1px solid #d6d8dd;
  text-align: left;
}
.grade .grade_list dd img {
  margin-right: 12px;
  vertical-align: middle;
  margin-top: -2px;
}
.grade .grade_list dt:first-child,
.grade .grade_list dd:first-child {
  border: 0;
}

.grade ul {
  width: 1240px;
  margin-bottom: 50px;
  font-size: 0;
  font-weight: 500;
}
.grade ul li {
  display: inline-block;
  width: 208px;
  height: 37px;
  line-height: 37px;
  margin: 0 40px 10px 0;
  border-top: 1px solid #bec2cd;
  border-bottom: 1px solid #bec2cd;
  font-size: 15px;
  color: #4e5568;
  zoom: 1;
  *display: inline;
}
.grade ul li span {
  display: inline-block;
  width: 76px;
  height: 25px;
  line-height: 27px;
  font-size: 20px;
  color: #fff;
  font-family: "Teko", Tw Cen MT Condensed;
  padding-left: 10px;
  background: #858b9b url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/IR_grade.png) 75px -560px no-repeat;
}
.grade ul li img {
  margin: 0 10px 0 14px;
}

/* 게임정보 테이블 */
.basic {
  position: relative;
  width: 100%;
  height: auto;
  border-top: 1px solid #bec2cd;
  border-bottom: 1px solid #bec2cd;
  padding-top: 4px;
}
.basic table {
  position: relative;
  font-size: 15px;
  color: #4e5568;
  font-weight: 500;
  text-align: center;
  width: 100%;
}
.basic table th {
  color: #fff;
  padding: 7px 0 11px 0;
  font-weight: 500;
  background: #858b9b url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/table_th.png) 0 bottom repeat-x;
}
.basic table td {
  border-top: 1px solid #bec2cd;
  border-right: 1px solid #bec2cd;
  padding: 10px 0;
  vertical-align: middle;
}
.basic table td.item {
  border-right: 0;
  line-height: 23px;
  text-align: left;
  padding: 10px 20px 10px 50px;
  box-sizing: border-box;
  word-break: keep-all;
}
.basic table td.no {
  font-family: "Teko", Tw Cen MT Condensed;
  font-size: 17px;
  color: #858b9b;
}
.basic table td:last-child {
  border-right: 0;
}

/* Top 해독기 */
.top_item h4 {
  height: 85px;
  line-height: 70px;
  font-weight: 500;
  color: #858b9b;
  font-size: 20px;
  padding-left: 170px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/IR_item_v0926.png) no-repeat;
  margin: 70px 0 5px 0;
}
.top_item h4.item1 {
  background-position: -10px 0;
}
.top_item h4.item2 {
  background-position: -10px -193px;
}
.top_item h4.item3 {
  background-position: -10px -400px;
}
.top_item h4.item4 {
  background-position: 0 -625px;
}
.top_item h4.item5 {
  background-position: -10px -842px;
}
.top_item h4.item6 {
  background-position: -10px -1051px;
}
.top_item h4.item7 {
  background-position: -5px -1500px;
}
.top_item h4.item8 {
  background-position: -5px -1960px;
}
.cautions {
  float: left;
  width: 920px;
  margin-top: 60px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/ico_notice.png) 0 50% no-repeat;
  padding-left: 145px;
  min-height: 31px;
  font-size: 13px;
  color: #4e5568;
  font-weight: 500;
}
.cautions li {
  border-left: 1px solid #bec2cd;
  padding-left: 25px;
  line-height: 23px;
}
.icon_gucc {
  float: right;
  width: 108px;
  margin-top: 40px;
  text-align: right;
  vertical-align: top;
}

/* 마일리지 빙고 */
.bingo {
  padding-top: 60px;
}
.bingo .cautions li {
  line-height: 31px;
}

/* 경매물품 */
.auction {
  width: 100%;
}
.auction h4 {
  height: 40px;
  line-height: 40px;
  font-weight: 500;
  color: #858b9b;
  font-size: 20px;
  padding-left: 55px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/IR_grade.png) 0 -655px no-repeat;
  margin: 60px 0 22px 0;
}

/* 초월의 궤, 행운의 초월클래스 상자 */
.item_table {
  width: 100%;
}
.item_table h4 {
  height: 85px;
  line-height: 70px;
  font-weight: 500;
  color: #858b9b;
  font-size: 20px;
  padding-left: 136px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/IR_item_v1017_3BDAF921.png) no-repeat;
  margin: 70px 0 5px 0;
}
.item_table h4.item1 {
  background-position: -32px -1232px;
}
.item_table h4.item2 {
  padding-left: 160px;
  background-position: -20px -1368px;
}
.item_table h4.item3 {
  padding-left: 160px;
  background-position: 0 -1650px;
}
.item_table h4.item4 {
  padding-left: 150px;
  background-position: -20px -1794px;
}
.item_table h4.item5 {
  padding-left: 150px;
  background-position: -20px -2002px;
}
.item_table h4.item6 {
  padding-left: 150px;
  background-position: -20px -1900px;
}

/* 조작법 */
.control {
  padding-top: 40px;
}
.control .keyboard {
  position: relative;
  width: 100%;
  height: 360px;
  background: #fff url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/keyboard1.png) 50% 50% no-repeat;
  border: 1px solid #c4cbce;
  box-sizing: border-box;
}
.control .keyboard._special {
  background: #fff url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/keyboard2.png) 50% 50% no-repeat;
}
.control .key1 {
  margin-top: 45px;
  width: 100%;
  height: 172px;
  padding-left: 240px;
  box-sizing: border-box;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/IR_control.png) no-repeat;
}
.control .key2 {
  margin-top: 45px;
  width: 100%;
  height: 172px;
  padding-left: 240px;
  box-sizing: border-box;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/IR_control.png) 0 -290px no-repeat;
}
.control .key3 {
  margin-top: 45px;
  width: 100%;
  height: 172px;
  padding-left: 240px;
  box-sizing: border-box;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/IR_control.png) 0 -580px no-repeat;
}
.control .mouse {
  margin-top: 25px;
  width: 100%;
  height: 234px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/mouse.png) center 0 no-repeat;
}
.control h4 {
  font-size: 20px;
  color: #858b9b;
  line-height: 60px;
  font-weight: 700;
}
.control .keyboard span {
  position: absolute;
  display: block;
  width: 41px;
  height: 41px;
  text-indent: -100000px;
}
.control .keyboard span.on {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/keyboard1_over.png) no-repeat;
  -webkit-animation: light 0.5s ease-out alternate infinite;
  -ms-animation: light 0.5s ease-out alternate infinite;
  animation: light 0.5s ease-out alternate infinite;
}
@keyframes light {
  from,
  to {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
}
.control .keyboard._special span.on {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/keyboard2_over.png) no-repeat;
}
.control ._special span.f5 {
  left: 351px;
  top: 26px;
}
.control ._special span.tab {
  left: 29px;
  top: 141px;
  width: 68px;
}
.control ._special span.e {
  left: 204px;
  top: 141px;
}
.control ._special span.t {
  left: 303px;
  top: 141px;
}
.control ._special span.y {
  left: 353px;
  top: 141px;
}
.control ._special span.u {
  left: 402px;
  top: 141px;
}
.control ._special span._m._01 {
  left: 600px;
  top: 141px;
}
.control ._special span._m._02 {
  left: 649px;
  top: 141px;
}
.control ._special span.enter {
  left: 672px;
  top: 141px;
  width: 90px;
  height: 90px;
}
.control ._special span.caps {
  left: 29px;
  top: 190px;
  width: 90px;
}
.control ._special span.f {
  left: 276px;
  top: 190px;
}
.control ._special span.g {
  left: 326px;
  top: 190px;
}
.control ._special span.k {
  left: 474px;
  top: 190px;
}
.control ._special span.shift._01 {
  left: 29px;
  top: 240px;
  width: 116px;
}
.control ._special span.shift._02 {
  left: 649px;
  top: 240px;
  width: 116px;
}
.control ._special span.z {
  left: 154px;
  top: 240px;
}
.control ._special span.x {
  left: 203px;
  top: 240px;
}
.control ._special span.c {
  left: 253px;
  top: 240px;
}
.control ._special span.n {
  left: 401px;
  top: 240px;
}

.control ._special span.f5.on {
  background-position: -322px 0;
}
.control ._special span.tab.on {
  background-position: 0 -115px;
}
.control ._special span.e.on {
  background-position: -175px -115px;
}
.control ._special span.t.on {
  background-position: -274px -115px;
}
.control ._special span.y.on {
  background-position: -324px -115px;
}
.control ._special span.u.on {
  background-position: -373px -115px;
}
.control ._special span._m._01.on {
  background-position: -571px -115px;
}
.control ._special span._m._02.on {
  background-position: -620px -115px;
}
.control ._special span.enter.on {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/enter.png) no-repeat;
}
.control ._special span.caps.on {
  background-position: 0 -164px;
}
.control ._special span.f.on {
  background-position: -247px -164px;
}
.control ._special span.g.on {
  background-position: -297px -164px;
}
.control ._special span.k.on {
  background-position: -445px -164px;
}
.control ._special span.shift._01.on {
  background-position: 0 -214px;
}
.control ._special span.shift._02.on {
  background-position: -620px -214px;
}
.control ._special span.z.on {
  background-position: -125px -214px;
}
.control ._special span.x.on {
  background-position: -173px -214px;
}
.control ._special span.c.on {
  background-position: -224px -214px;
}
.control ._special span.n.on {
  background-position: -372px -214px;
}

.control ._basic span._1 {
  left: 78px;
  top: 91px;
}
.control ._basic span._2 {
  left: 128px;
  top: 91px;
}
.control ._basic span._3 {
  left: 177px;
  top: 91px;
}
.control ._basic span._4 {
  left: 227px;
  top: 91px;
}
.control ._basic span._5 {
  left: 276px;
  top: 91px;
}
.control ._basic span.q {
  left: 105px;
  top: 141px;
}
.control ._basic span.w {
  left: 155px;
  top: 141px;
}
.control ._basic span.r {
  left: 254px;
  top: 141px;
}
.control ._basic span.a {
  left: 128px;
  top: 190px;
}
.control ._basic span.s {
  left: 177px;
  top: 190px;
}
.control ._basic span.d {
  left: 227px;
  top: 190px;
}
.control ._basic span.g {
  left: 326px;
  top: 190px;
}
.control ._basic span.shift._01 {
  left: 29px;
  top: 240px;
  width: 116px;
}
.control ._basic span.shift._02 {
  left: 649px;
  top: 240px;
  width: 116px;
}
.control ._basic span.ctrl._01 {
  left: 29px;
  top: 291px;
  width: 68px;
}
.control ._basic span.ctrl._02 {
  left: 694px;
  top: 291px;
  width: 68px;
}
.control ._basic span.space {
  left: 281px;
  top: 291px;
  width: 179px;
}
.control ._basic span._1.on {
  background-position: -49px -65px;
}
.control ._basic span._2.on {
  background-position: -99px -65px;
}
.control ._basic span._3.on {
  background-position: -148px -65px;
}
.control ._basic span._4.on {
  background-position: -198px -65px;
}
.control ._basic span._5.on {
  background-position: -247px -65px;
}
.control ._basic span.q.on {
  background-position: -76px -115px;
}
.control ._basic span.w.on {
  background-position: -126px -115px;
}
.control ._basic span.r.on {
  background-position: -225px -115px;
}
.control ._basic span.a.on {
  background-position: -99px -164px;
}
.control ._basic span.s.on {
  background-position: -148px -164px;
}
.control ._basic span.d.on {
  background-position: -198px -164px;
}
.control ._basic span.g.on {
  background-position: -297px -164px;
}
.control ._basic span.shift._01.on {
  background-position: 0 -214px;
}
.control ._basic span.shift._02.on {
  background-position: -620px -214px;
}
.control ._basic span.ctrl._01.on {
  background-position: 0 -265px;
}
.control ._basic span.ctrl._02.on {
  background-position: -665px -265px;
}
.control ._basic span.space.on {
  background-position: -252px -265px;
}

.control .key1 ul {
  width: 900px;
  height: 90px;
}
.control .key1 ul li {
  width: 180px;
  float: left;
  line-height: 45px;
  font-size: 16px;
  color: #858b9b;
  font-weight: 500;
  cursor: default;
}
.control .key1 ul li span {
  display: inline-block;
  width: 24px;
  height: 24px;
  text-indent: -100000px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/bg_key1.png) no-repeat;
  vertical-align: middle;
  margin-right: 13px;
  zoom: 1;
  *display: inline;
}
.control .key1 ul li span.w {
  background-position: 0 0;
}
.control .key1 ul li:hover span.a,
.control .key1 ul li:focus span.a,
.control .key1 ul li span.a {
  background-position: -172px 0;
}
.control .key1 ul li:hover span.s,
.control .key1 ul li:focus span.s,
.control .key1 ul li span.s {
  background-position: -369px 0;
}
.control .key1 ul li:hover span.d,
.control .key1 ul li:focus span.d,
.control .key1 ul li span.d {
  background-position: -555px 0;
}
.control .key1 ul li:hover span.shift,
.control .key1 ul li:focus span.shift,
.control .key1 ul li span.shift {
  background-position: -784px 0;
  width: 41px;
}
.control .key1 ul li:hover span.ctrl,
.control .key1 ul li:focus span.ctrl,
.control .key1 ul li span.ctrl {
  background-position: 0 -48px;
  width: 41px;
}
.control .key1 ul li:hover span.space,
.control .key1 ul li:focus span.space,
.control .key1 ul li span.space {
  background-position: -172px -48px;
  width: 74px;
}
.control .key1 ul li:hover span,
.control .key1 ul li:focus span {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/bg_key1_over.png) no-repeat;
}

.control .key2 ul {
  width: 900px;
  height: 90px;
}
.control .key2 ul li {
  width: 180px;
  float: left;
  line-height: 45px;
  font-size: 16px;
  color: #858b9b;
  font-weight: 500;
  cursor: default;
}
.control .key2 ul li.lw {
  width: 250px;
}
.control .key2 ul li span {
  display: inline-block;
  width: 24px;
  height: 24px;
  text-indent: -100000px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/bg_key2.png) no-repeat;
  vertical-align: middle;
  margin-right: 13px;
  zoom: 1;
  *display: inline;
}
.control .key2 ul li span._1 {
  background-position: 0 0;
}
.control .key2 ul li:hover span._2,
.control .key2 ul li:focus span._2,
.control .key2 ul li span._2 {
  background-position: -172px 0;
}
.control .key2 ul li:hover span._3,
.control .key2 ul li:focus span._3,
.control .key2 ul li span._3 {
  background-position: -369px 0;
}
.control .key2 ul li:hover span._4,
.control .key2 ul li:focus span._4,
.control .key2 ul li span._4 {
  background-position: -555px 0;
}
.control .key2 ul li:hover span._5,
.control .key2 ul li:focus span._5,
.control .key2 ul li span._5 {
  background-position: 0 -49px;
}
.control .key2 ul li:hover span.q,
.control .key2 ul li:focus span.q,
.control .key2 ul li span.q {
  background-position: -172px -49px;
}
.control .key2 ul li:hover span.r,
.control .key2 ul li:focus span.r,
.control .key2 ul li span.r {
  background-position: -369px -49px;
}
.control .key2 ul li:hover span.g,
.control .key2 ul li:focus span.g,
.control .key2 ul li span.g {
  background-position: -555px -49px;
}
.control .key2 ul li:hover span,
.control .key2 ul li:focus span {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/bg_key2_over.png) no-repeat;
}

.control .key3 ul {
  width: 100%;
  height: 100%;
}
.control .key3 ul li {
  float: left;
  line-height: 45px;
  font-size: 16px;
  color: #858b9b;
  font-weight: 500;
  cursor: default;
}
.control .key3 ul li span {
  display: inline-block;
  width: 24px;
  height: 24px;
  text-indent: -100000px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/bg_key3.png) no-repeat;
  vertical-align: middle;
  margin-right: 13px;
  zoom: 1;
  *display: inline;
}
.control .key3 ul li:hover span,
.control .key3 ul li:focus span {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/bg_key3_over.png) no-repeat;
}
.control .key3 ul li.l1,
.control .key3 ul li.l6 {
  width: 192px;
}
.control .key3 ul li.l2,
.control .key3 ul li.l7 {
  width: 255px;
}
.control .key3 ul li.l3 {
  width: 173px;
}
.control .key3 ul li.l4 {
  width: 189px;
}
.control .key3 ul li.l5 {
  width: 150px;
}
.control .key3 ul li.l8,
.control .key3 ul li.l11,
.control .key3 ul li.l14 {
  width: 260px;
}
.control .key3 ul li.l9,
.control .key3 ul li.l12 {
  width: 252px;
}
.control .key3 ul li.l10 {
  width: 447px;
}
.control .key3 ul li.l13 {
  width: 327px;
}
.control .key3 ul li.l15 {
  width: 372px;
}
.control .key3 ul li:hover span.y,
.control .key3 ul li:focus span.y,
.control .key3 ul li span.y {
  background-position: 0 0;
  width: 85px;
}
.control .key3 ul li:hover span.u,
.control .key3 ul li:focus span.u,
.control .key3 ul li span.u {
  background-position: -192px 0;
  width: 152px;
}
.control .key3 ul li:hover span.k,
.control .key3 ul li:focus span.k,
.control .key3 ul li span.k {
  background-position: -447px 0;
}
.control .key3 ul li:hover span.z,
.control .key3 ul li:focus span.z,
.control .key3 ul li span.z {
  background-position: -620px 0;
}
.control .key3 ul li:hover span.x,
.control .key3 ul li:focus span.x,
.control .key3 ul li span.x {
  background-position: -809px 0;
}
.control .key3 ul li:hover span.c,
.control .key3 ul li:focus span.c,
.control .key3 ul li span.c {
  background-position: 0 -40px;
}
.control .key3 ul li:hover span.g,
.control .key3 ul li:focus span.g,
.control .key3 ul li span.g {
  background-position: -192px -40px;
}
.control .key3 ul li:hover span._m,
.control .key3 ul li:focus span._m,
.control .key3 ul li span._m {
  background-position: -447px -40px;
  width: 61px;
}
.control .key3 ul li:hover span.tab,
.control .key3 ul li:focus span.tab,
.control .key3 ul li span.tab {
  background-position: -707px -40px;
  width: 34px;
}
.control .key3 ul li:hover span.e,
.control .key3 ul li:focus span.e,
.control .key3 ul li span.e {
  background-position: 0 -83px;
}
.control .key3 ul li:hover span.t,
.control .key3 ul li:focus span.t,
.control .key3 ul li span.t {
  background-position: -447px -83px;
}
.control .key3 ul li:hover span.f,
.control .key3 ul li:focus span.f,
.control .key3 ul li span.f {
  background-position: -707px -83px;
}
.control .key3 ul li:hover span.n,
.control .key3 ul li:focus span.n,
.control .key3 ul li span.n {
  background-position: 0 -126px;
}
.control .key3 ul li:hover span.f5,
.control .key3 ul li:focus span.f5,
.control .key3 ul li span.f5 {
  background-position: -327px -126px;
}
.control .key3 ul li:hover span.caps,
.control .key3 ul li:focus span.caps,
.control .key3 ul li span.caps {
  background-position: -587px -126px;
  width: 74px;
}

/* 가이드 */
.guide_line ul.gt_btn {
  overflow: hidden;
  margin-bottom: 39px;
}
.guide_line ul.gt_btn li {
  float: left;
  margin-right: 5px;
}
.guide_line ul.gt_btn li a {
  display: block;
  position: relative;
  width: 396px;
  height: 62px;
  background: url(https://lwi.nexon.com/cso/home/sub/gt_btn.png) no-repeat;
  text-indent: -9999px;
}
.guide_line ul.gt_btn li a:hover::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 396px;
  height: 62px;
  background: url(https://lwi.nexon.com/cso/home/sub/gt_btn_on.png) no-repeat;
}
.guide_line ul.gt_btn li.gb_2 a {
  background-position-x: -401px;
}
.guide_line ul.gt_btn li.gb_3 {
  margin-right: 0;
}
.guide_line ul.gt_btn li.gb_3 a {
  background-position-x: -803px;
}

.t_line {
  margin-bottom: 47px;
}
.t_line:last-child {
  margin-bottom: 0;
}

.th_line {
  padding: 4px 0 4px 0;
  border-top: 1px solid #bec2cd;
  border-bottom: 1px solid #bec2cd;
}
.th_line .tl_inner {
  height: 39px;
  background: #b3b7bc;
}
.th_line p {
  padding: 0 18px;
  font-size: 20px;
  font-weight: 500;
  line-height: 38px;
  color: #fff;
}

.th_line2 {
  padding: 4px 0 4px 0;
  border-top: 1px solid #bec2cd;
  border-bottom: 1px solid #bec2cd;
}
.th_line2 .tl_inner {
  height: 39px;
  padding-left: 40px;
  background: #d4d4d4 url(https://lwi.nexon.com/cso/home/sub/tl_type2_ic.png) no-repeat left 0;
}
.th_line2 p {
  padding: 0 12px;
  font-size: 18px;
  font-weight: 500;
  line-height: 38px;
  color: #232535;
}

table.gt_type1 {
  width: 100%;
}
table.gt_type1 col.g1_ws1 {
  width: 16.3%;
}
table.gt_type1 thead th {
  text-align: left;
  padding: 4px 0 4px 0;
  border-bottom: 1px solid #bec2cd;
  font-weight: normal;
}
table.gt_type1 tbody th {
  vertical-align: top;
  text-align: left;
  padding: 13px 16px 12px 16px;
  border-right: 1px solid #bec2cd;
  border-bottom: 1px solid #bec2cd;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  color: #4e5568;
}
table.gt_type1 td {
  padding: 13px 0 2px 0;
  border-bottom: 1px solid #bec2cd;
  line-height: 26px;
}

.gl_bx {
  padding: 0 25px;
}
ul.gb_list {
  overflow: hidden;
}
ul.gb_list li {
  float: left;
  padding-right: 2px;
  margin-bottom: 10px;
  background: url(https://lwi.nexon.com/cso/home/sub/gl_cut.png) no-repeat right 8px;
}
ul.gb_list li:last-child {
  background: none;
}
ul.gb_list li a {
  display: block;
  width: 184px;
  margin: 0 2px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  color: #4e5568;
}
ul.gb_list li a:hover {
  background: #26549a;
  border-radius: 6px;
  color: #fff;
}
ul.gb_list li.on a {
  background: #232535;
  border-radius: 6px;
  color: #fff;
}

h4.g_type {
  padding-left: 10px;
  margin-bottom: 13px;
  background: url(https://lwi.nexon.com/cso/home/sub/g_h4_ic.png) no-repeat left 9px;
  font-size: 25px;
  line-height: 25px;
  font-weight: 500;
  color: #232535;
}
.g_view {
  padding: 26px 40px;
  border-bottom: 1px solid #bec2cd;
}
.gv_edit {
  line-height: 1.4;
}
.gv_con {
  margin-top: 50px;
}
.gv_tl1 {
  margin-bottom: 13px;
}
.gv_tl1_i {
  display: inline-block;
  height: 30px;
  padding-left: 6px;
  background: #fff;
  border-radius: 50px;
}
.gv_tl1_i p {
  padding: 0 14px 0 26px;
  background: url(https://lwi.nexon.com/cso/home/sub/gv_tl1_ic.png) no-repeat left 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 30px;
  color: #4e5568;
}

.gv_tl2::after {
  display: block;
  content: "";
  clear: both;
}
.gv_tl2 p {
  float: left;
  font-size: 14px;
  font-weight: 500;
  color: #4079d1;
}
.gv_tl2 a.gv_tl2_b {
  display: block;
  position: relative;
  float: left;
  height: 19px;
  padding: 0 15px 0 7px;
  margin: -2px 0 0 8px;
  background: #4e5568;
  border-radius: 3px;
  font-size: 12px;
  line-height: 19px;
  color: #fff;
}
.gv_tl2 a.gv_tl2_b::after {
  display: block;
  content: "";
  position: absolute;
  top: 7px;
  right: 6px;
  width: 3px;
  height: 5px;
  background: url(https://lwi.nexon.com/cso/home/sub/gv_tl2_b_ic.png) no-repeat;
}

.gv_b_btn {
  margin-top: 15px;
  font-size: 0;
  line-height: 0;
  text-align: right;
}
.gv_b_btn a {
  display: inline-block;
  height: 38px;
  padding: 0 17px 0 16px;
  margin-left: 10px;
  border: 2px solid #000;
}
.gv_b_btn a:hover {
  background: #181c27;
}
.gv_b_btn a:hover span {
  color: #fff;
}
.gv_b_btn a span {
  display: block;
  position: relative;
  padding-right: 22px;
  font-size: 16px;
  font-weight: 600;
  line-height: 38px;
  color: #181c27;
}
.gv_b_btn a.gv_btn1 span::after {
  display: block;
  content: "";
  position: absolute;
  top: 14px;
  right: 0;
  width: 10px;
  height: 10px;
  background: url(https://lwi.nexon.com/cso/home/sub/gv_btn1_ic.png) no-repeat;
}
.gv_b_btn a.gv_btn1:hover span::after {
  background-position-y: -48px;
}
.gv_b_btn a.gv_btn2 span::after {
  display: block;
  content: "";
  position: absolute;
  top: 14px;
  right: 0;
  width: 10px;
  height: 12px;
  background: url(https://lwi.nexon.com/cso/home/sub/gv_btn2_ic.png) no-repeat;
}
.gv_b_btn a.gv_btn2:hover span::after {
  background-position-y: -48px;
}

/*  게임소개 */
.wrap_info {
  position: relative;
  width: 100%;
  height: auto;
}
.wrap_info ._parallax {
  position: relative;
  width: 100%;
  -webkit-transition: background 0.2s ease-out;
  transition: background 0.2s ease-out;
}
.wrap_info .con1 {
  height: 1061px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/bg_gameinfo1.png) 50% 100% no-repeat;
}
.wrap_info .con2 {
  height: 882px;
  background: #3c4351 url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/bg_gameinfo2.png) 50% 0 no-repeat;
}
.wrap_info .con3 {
  height: 1019px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/bg_gameinfo3.png) 50% 0 no-repeat;
  margin-top: -182px;
}
.wrap_info .con1.fixed {
  background-attachment: fixed;
  background-position: 50% 0;
}
.wrap_info .con2.fixed {
  background-attachment: fixed;
}
.wrap_info .con1 .txt_info1 {
  font-size: 38px;
  line-height: 46px;
  font-weight: 500;
  color: #858b9b;
}
.wrap_info .con1 .txt_info1 strong {
  font-weight: 700;
}
.wrap_info .con1 .txt_info2 {
  font-size: 16px;
  line-height: 23px;
  font-weight: 500;
  color: #858b9b;
  margin: 30px 0 140px 0;
}
.wrap_info .title_intro {
  font-family: "Teko", Tw Cen MT Condensed;
  font-weight: 500;
  font-size: 105px;
  color: #404856;
  margin-bottom: 30px;
}
.wrap_info .title_intro span {
  font-size: 30px;
  color: #626c7f;
  font-family: "Noto Sans KR";
  display: block;
}
.wrap_info .txt_intro {
  font-size: 14px;
  color: #858b9b;
  line-height: 21px;
}
.wrap_info .con2 .title_intro {
  color: #eee;
}
.wrap_info .con2 .title_intro span {
  color: #c6c6c6;
}
.wrap_info .con2 .txt_intro {
  color: #a9afbf;
}
.wrap_info .con2 .right {
  position: absolute;
  top: 105px;
  right: 115px;
  width: 445px;
  height: 760px;
  z-index: 1;
}
.wrap_info .con3 .left {
  position: absolute;
  top: 335px;
  left: 180px;
  width: 605px;
  height: 760px;
}
.wrap_info .con1 .kind_game {
  margin-top: 30px;
}
.wrap_info .con2 .kind_game {
  margin-top: 40px;
}
.wrap_info .con3 .kind_game {
  margin-top: 65px;
}
.wrap_info .kind_game h5 {
  font-size: 20px;
  font-weight: 500;
  color: #9097a9;
  line-height: 30px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/IR_game.png) 0 -80px no-repeat;
  width: 100%;
  height: 30px;
  margin-bottom: 5px;
}
.wrap_info .con2 .kind_game h5 {
  color: #eee;
}
.wrap_info .kind_game ul {
  width: 100%;
  height: 186px;
  font-size: 0;
}
.wrap_info .kind_game ul li {
  display: inline-block;
  width: 153px;
  height: 100%;
  margin-right: 12px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/IR_game.png) no-repeat;
  zoom: 1;
  *display: inline;
}
.wrap_info .con1 .kind_game ul li.k1 {
  background-position: 0 -117px;
}
.wrap_info .con1 .kind_game ul li.k2 {
  background-position: -165px -117px;
}
.wrap_info .con1 .kind_game ul li.k1:hover {
  background-position: -328px -117px;
}
.wrap_info .con1 .kind_game ul li.k2:hover {
  background-position: -493px -117px;
}
.wrap_info .con2 .kind_game ul li.k1 {
  background-position: 0 -313px;
}
.wrap_info .con2 .kind_game ul li.k2 {
  background-position: -165px -313px;
}
.wrap_info .con2 .kind_game ul li.k1:hover {
  background-position: -328px -313px;
}
.wrap_info .con2 .kind_game ul li.k2:hover {
  background-position: -493px -313px;
}
.wrap_info .con3 .kind_game ul li.k1 {
  background-position: 0 -511px;
}
.wrap_info .con3 .kind_game ul li.k2 {
  background-position: -165px -511px;
}
.wrap_info .con3 .kind_game ul li.k3 {
  background-position: -330px -511px;
}
.wrap_info .con3 .kind_game ul li.k1:hover {
  background-position: -493px -511px;
}
.wrap_info .con3 .kind_game ul li.k2:hover {
  background-position: -658px -511px;
}
.wrap_info .con3 .kind_game ul li.k3:hover {
  background-position: -823px -511px;
}
.wrap_info .btn_zombie {
  margin-top: 35px;
  width: 312px;
  height: 48px;
}
.wrap_info .btn_zombie a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -100000px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/IR_game.png) no-repeat;
}
.wrap_info .btn_zombie a:hover,
.wrap_info .btn_zombie a:focus {
  background-position: -328px 0;
}
.wrap_info .cube1 {
  position: absolute;
  width: 248px;
  height: 213px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/cube1.png) no-repeat;
  left: 50%;
  top: -45px;
  margin-left: -650px;
  animation: float1 5s ease-in-out infinite;
  -webkit-animation: float1 5s ease-in-out infinite;
}
.wrap_info .cube2 {
  position: absolute;
  width: 267px;
  height: 330px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/cube2.png) no-repeat;
  left: 50%;
  top: 202px;
  animation: float2 6s ease-in-out infinite;
  -webkit-animation: float2 6s ease-in-out infinite;
}
.wrap_info .cube3 {
  position: absolute;
  width: 216px;
  height: 244px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/cube3.png) no-repeat;
  left: 50%;
  top: 547px;
  margin-left: -220px;
  animation: float1 5s ease-in-out infinite;
  -webkit-animation: float1 5s ease-in-out infinite;
}
@keyframes float1 {
  0%,
  100% {
    transform: translate(0, -10px) rotate(1deg);
  }
  50% {
    transform: translate(-5px, 10px) rotate(-1deg);
  }
}
@keyframes float2 {
  0%,
  100% {
    transform: translate(0, -15px) scale(1);
  }
  50% {
    transform: translate(0, 15px) scale(1.02);
  }
}

/* 고객지원 */
.dn_wrap h4 {
  height: 38px;
  margin-top: 50px;
  font-size: 25px;
  color: #232535;
  font-weight: 600;
}
.dn_wrap .btn,
.dn_wrap.driver dl dt,
.dn_wrap.driver .btn2::after {
  text-indent: -9999px;
  overflow: hidden;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/IR_download_A060634A.png) no-repeat;
}
.dn_wrap.file_download {
  width: 1200px;
  height: 226px;
  padding: 68px 0 0 40px;
  box-sizing: border-box;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/bg_file_download.png) no-repeat;
}
.dn_wrap.file_download h4 {
  color: #fff;
  margin-top: 0;
}
.dn_wrap.file_download p {
  color: #fff;
  opacity: 0.7;
  font-size: 15px;
  line-height: 20px;
}
.dn_wrap.file_download p::before {
  content: "";
  display: block;
  width: 670px;
  height: 1px;
  margin-bottom: 16px;
  background-color: #fff;
  opacity: 0.2;
}
.dn_wrap.file_download .btn {
  position: absolute;
  right: 30px;
  width: 354px;
  height: 80px;
}
.dn_wrap.file_download .btn_down1 {
  top: 30px;
}
.dn_wrap.file_download .btn_down1:hover {
  background-position: -369px 0;
}
.dn_wrap.file_download .btn_down2 {
  top: 116px;
  background-position: 0 -100px;
}
.dn_wrap.file_download .btn_down2:hover {
  background-position: -369px -100px;
}
.dn_wrap.pc_spec table {
  width: 100%;
  border-top: 1px solid #bec2cd;
  border-bottom: 1px solid #bec2cd;
}
.dn_wrap.pc_spec th,
.dn_wrap.pc_spec td {
  vertical-align: middle;
  font-weight: 500;
  font-size: 15px;
}
.dn_wrap.pc_spec th.col2 {
  width: 504px;
}
.dn_wrap.pc_spec th.col3 {
  width: 504px;
}
.dn_wrap.pc_spec thead th {
  position: relative;
  height: 35px;
  font-size: 15px;
  color: #fff;
  background-color: #858b9b;
}
.dn_wrap.pc_spec thead th::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background-color: #eeeeee;
}
.dn_wrap.pc_spec thead th::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background-color: #eeeeee;
}
.dn_wrap.pc_spec tbody th,
.dn_wrap.pc_spec td {
  padding: 10px 0;
  border-top: 1px solid #bec2cd;
  border-left: 1px solid #bec2cd;
  text-align: center;
  line-height: 23px;
}
.dn_wrap.pc_spec tbody th {
  border-left: none;
}

.dn_wrap.driver > h4 {
  height: 36px;
}
.dn_wrap.driver > p {
  padding-bottom: 18px;
  font-size: 16px;
  color: #858b9b;
  font-weight: 500;
}
.dn_wrap.driver dl {
  float: left;
  width: 300px;
  height: 256px;
  box-sizing: border-box;
  border: 1px solid #bec2cd;
  text-align: center;
  border-left: none;
}
.dn_wrap.driver dl.dr1 {
  border-left: 1px solid #bec2cd;
}
.dn_wrap.driver dl dt {
  width: 150px;
  height: 144px;
  margin: 38px auto 0;
}
.dn_wrap.driver dl.dr1 dt {
  background-position: 0 -216px;
}
.dn_wrap.driver dl.dr2 dt {
  background-position: -177px -216px;
}
.dn_wrap.driver dl.dr3 dt {
  background-position: -354px -216px;
}
.dn_wrap.driver dl.dr4 dt {
  background-position: -579px -216px;
}
.dn_wrap.driver .btn2 {
  display: inline-block;
  width: 150px;
  height: 36px;
  line-height: 32px;
  font-weight: 500;
  border: 1px solid #565b69;
  box-sizing: border-box;
  color: #2f3142;
  font-size: 14px;
}
.dn_wrap.driver .btn2:hover {
  color: #fff;
  background-color: #565b69;
}
.dn_wrap.driver .btn2::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 10px;
  vertical-align: middle;
  margin: -2px 0 0 4px;
  background-position: -34px -366px;
}
.dn_wrap.driver .btn2:hover::after {
  background-position: -51px -366px;
}
.dn_wrap.driver .dr1 .btn2::after {
  background-position: 0 -366px;
  margin: -4px 0 0 4px;
}
.dn_wrap.driver .dr1 .btn2:hover::after {
  background-position: -17px -366px;
}

/* 2차 비밀번호 초기화 */
.p_reset .txt_info_a1 {
  font-size: 30px;
  line-height: 38px;
  color: #858b9b;
}
.p_reset .txt_info_a2 {
  margin: 14px 0 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
  color: #858b9b;
}
.p_reset .pr_guide {
  margin-top: 80px;
  background: url(https://lwi.nexon.com/cso/home/sub/pr_bg.jpg);
}
.p_reset .pr_inner {
  width: 1200px;
  height: 403px;
  padding-top: 37px;
  margin: 0 auto;
}
.p_reset p.pr_lt {
  font-size: 25px;
  font-weight: 500;
  line-height: 26px;
  color: #232535;
}
.p_reset ul.pr_list {
  overflow: hidden;
  padding-left: 68px;
  margin-top: 52px;
}
.p_reset ul.pr_list li {
  position: relative;
  float: left;
  width: 198px;
  height: 248px;
  padding-right: 90px;
}
.p_reset ul.pr_list li::after {
  display: block;
  content: "";
  position: absolute;
  top: 151px;
  right: 21px;
  width: 49px;
  height: 22px;
  background: url(https://lwi.nexon.com/cso/home/sub/pr_arr.png) no-repeat;
}
.p_reset ul.pr_list li .pr_tb {
  position: absolute;
  top: 3px;
  left: 0;
  width: 198px;
  height: 58px;
}
.p_reset ul.pr_list li .pr_tb p {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  color: #f1f1f1;
}

.p_reset ul.pr_list li.pr_l1 {
  background: url(https://lwi.nexon.com/cso/home/sub/pr_l1.png) no-repeat;
}
.p_reset ul.pr_list li.pr_l2 {
  background: url(https://lwi.nexon.com/cso/home/sub/pr_l2.png) no-repeat;
}
.p_reset ul.pr_list li.pr_l3 {
  background: url(https://lwi.nexon.com/cso/home/sub/pr_l3.png) no-repeat;
}
.p_reset ul.pr_list li.pr_l4 {
  padding-right: 0;
  background: url(https://lwi.nexon.com/cso/home/sub/pr_l4.png) no-repeat;
}

.p_reset .lb_line {
  margin-top: 51px;
}
.p_reset .lb_inner {
  width: 1200px;
  margin: 0 auto;
}
.p_reset .line_b {
  position: relative;
  width: 976px;
  margin: 0 auto;
  border-top: 2px solid #a4aab5;
  border-bottom: 2px solid #a4aab5;
}
.p_reset .line_b::before {
  display: block;
  content: "";
  position: absolute;
  top: -3px;
  left: -43px;
  width: 43px;
  height: 103px;
  background: url(https://lwi.nexon.com/cso/home/sub/lb_l.png) no-repeat;
}
.p_reset .line_b::after {
  display: block;
  content: "";
  position: absolute;
  top: -3px;
  right: -43px;
  width: 43px;
  height: 103px;
  background: url(https://lwi.nexon.com/cso/home/sub/lb_r.png) no-repeat;
}
.p_reset .line_b p.lb_t {
  height: 44px;
  padding: 25px 0 28px 90px;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: #858b9b;
}
.p_reset .line_b .lb_ib {
  position: absolute;
  top: 35px;
  right: 92px;
}
.p_reset .line_b .lb_ib a {
  display: block;
  width: 103px;
  height: 33px;
  background: url(https://lwi.nexon.com/cso/home/sub/lb_ib.png) no-repeat;
  text-indent: -9999px;
}
.p_reset .line_b .lb_ib a:hover {
  background-position-y: -53px;
}
.p_reset .lb_btn {
  margin-top: 44px;
}
.p_reset .lb_btn a {
  display: block;
  width: 292px;
  height: 60px;
  margin: 0 auto;
  background: url(https://lwi.nexon.com/cso/home/sub/lb_btn.png) no-repeat;
  text-indent: -9999px;
}
.p_reset .lb_btn a:hover {
  background-position-y: -79px;
}

/* 비매너 채팅/불법 프로그램 신고 */
.report .txt_info_a1 {
  font-size: 30px;
  line-height: 38px;
  color: #232535;
  font-weight: normal;
}
.report .txt_info_a2 {
  margin: 14px 0 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
  color: #858b9b;
}
.report .report_guide {
  margin-top: 80px;
  background: url(https://lwi.nexon.com/cso/home/sub/pr_bg.jpg);
}
.report .r_inner {
  width: 1200px;
  height: 403px;
  padding-top: 37px;
  margin: 0 auto;
}
.report p.r_lt {
  font-size: 25px;
  font-weight: 500;
  line-height: 26px;
  color: #232535;
}
.report ul.r_list {
  text-indent: -99999px;
  overflow: hidden;
  padding-left: 68px;
  margin-top: 52px;
  display: flex;
}
.report ul.r_list li {
  position: relative;
  width: 350px;
  height: 248px;
  padding-right: 25px;
}

.report ul.r_list li.r_l1 {
  background: url("https://lwi.nexon.com/cso/home/sub/how1.jpg") no-repeat;
}
.report ul.r_list li.r_l2 {
  background: url("https://lwi.nexon.com/cso/home/sub/how2.jpg") no-repeat;
}
.report ul.r_list li.r_l3 {
  background: url("https://lwi.nexon.com/cso/home/sub/how3.jpg") no-repeat;
}

.report .r_strong {
  font-weight: 600;
}
.report .lb_line {
  margin-top: 51px;
}
.report .lb_inner {
  width: 1200px;
  margin: 0 auto;
}
.report .line_b p.lb_t {
  margin-top: -20px;
  height: 44px;
  padding: 0px 0 80px 0px;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: #858b9b;
}
.report .line_b .lb_ib {
  position: absolute;
  top: 35px;
  right: 92px;
}
.report .line_b .lb_ib a {
  display: block;
  width: 103px;
  height: 33px;
  background: url(https://lwi.nexon.com/cso/home/sub/lb_ib.png) no-repeat;
  text-indent: -9999px;
}
.report .line_b .lb_ib a:hover {
  background-position-y: -53px;
}
.report .r_btn1 {
  position: absolute;
  top: 876px;
  margin-left: 300px;
  width: 292px;
  height: 60px;
  background: url("https://lwi.nexon.com/cso/home/sub/btn_manner.png") no-repeat;
  z-index: 1;
}
.report .r_btn2 {
  position: absolute;
  top: 876px;
  margin-left: 608px;
  width: 292px;
  height: 60px;
  background: url("https://lwi.nexon.com/cso/home/sub/btn_illegal.png") no-repeat;
  z-index: 1;
}
.report .r_btn1 a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
}
.report .r_btn2 a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
}
.report .r_btn1 a:hover {
  background: url("https://lwi.nexon.com/cso/home/sub/btn_manner_over.png") no-repeat;
}
.report .r_btn2 a:hover {
  background: url("https://lwi.nexon.com/cso/home/sub/btn_illegal_over.png") no-repeat;
}

#editWindow html body {
  font-family: "Noto Sans KR", Malgun Gothic, Dotum, sans-serif;
}

/* 신고완료 */
#container.report_container {
  min-height: 474px;
}
.report .report_txt1 {
  font-size: 16px;
  color: #666879;
  line-height: 1.4;
  font-weight: normal;
}
.report .report_txt1 strong {
  font-weight: bold;
}
.report .btn_back {
  position: absolute;
  top: 402px;
  margin-left: -162px;
  left: 50%;
  width: 292px;
  height: 60px;
  background: url("https://lwi.nexon.com/cso/home/sub/btn_back.jpg") no-repeat;
  z-index: 1;
}
.report .btn_back a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
}
.report .btn_back a:hover {
  background: url("https://lwi.nexon.com/cso/home/sub/btn_back_over.jpg") no-repeat;
}

/* IE8대응 */

.ie8 #layer_poll h4 {
  line-height: 25px;
}
.ie8 .control .key1 ul li,
.ie8 .control .key2 ul li,
.ie8 .control .key3 ul li {
  font-size: 15px;
}
.ie8 .wrap_board ._skin2 .tit {
  height: 25px;
}
.ie8 .wrap_board .list .subject a {
  height: 39px;
}
.ie8 .wrap_board .list li dt:hover {
  background: #282d3c;
}
.ie8 .wrap_board .list li dt:before,
.ie8 .title_area .view:before {
  background: transparent;
}
.ie8 .title_area .view:hover {
  background: #232535;
}
.ie8 .board_list_tab li a,
.ie8 .board_list_tab li a:before,
.ie8 .board_list_tab li.active a {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/board/tab_bottom_ie8.png) 50% 0 repeat-x;
}

/* ~w1280px */
@media all and (max-width: 1280px) {
  .title_area.fix {
    position: absolute;
  }
}

/* 마이크로 사이트 header & footer */
#header_micro {
  position: relative;
  height: 334px;
  z-index: 100;
}
#header_micro h1 {
  position: absolute;
  top: 34px;
  left: 42px;
}
#header_micro h1 a {
  display: block;
  width: 240px;
  height: 33px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/common/logo.png) no-repeat;
  text-indent: -99999px;
  overflow: hidden;
}
#header_micro .util {
  position: absolute;
  top: 24px;
  right: 42px;
  border: 1px solid #828489;
  border-color: rgba(238, 238, 238, 0.5);
  overflow: hidden;
}
#header_micro .util .btn_home,
#header_micro .util .btn_game {
  float: left;
  display: block;
  height: 50px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/layout/spr_header_micro.png) no-repeat;
  text-indent: -99999px;
  overflow: hidden;
}
#header_micro .util .btn_home {
  width: 51px;
  border-right: 1px solid #828489;
  border-color: rgba(238, 238, 238, 0.5);
}
#header_micro .util .btn_home:hover {
  background-position: 0 -78px;
}
#header_micro .util .btn_game {
  width: 204px;
  background-position: -53px 0;
  outline: 0;
}
#header_micro .util .btn_game:hover {
  background-position: -53px -78px;
}
#header_micro .bg_fixed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #191d29;
}
.fixed #header_micro {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
}
#footer_micro {
  position: relative;
  width: 100%;
  height: 95px;
  background: #000;
  clear: both;
}
#footer_micro .copyright {
  text-align: center;
  font-weight: 500;
  color: #999;
  font-size: 13px;
  line-height: 91px;
}

/* 카스온라인TV*/
.tv_wrap #header_micro {
  background: #000 url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/bg_header_tv.jpg) center top no-repeat;
  text-align: center;
}
.tv_wrap #header_micro .noise {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/bg_noise_tv.gif) center top no-repeat;
  animation: videoNoise 400ms steps(6, end) infinite;
  opacity: 0.3;
  filter: alpha(opacity=30);
}
.tv_wrap #header_micro h2 {
  position: absolute;
  top: 120px;
  left: 50%;
  width: 639px;
  margin-left: -320px;
}
.tv_wrap #header_micro h2 img {
  width: 100%;
}
.tv_wrap #header_micro .txt_ie {
  position: relative;
  display: inline-block;
  text-align: center;
  padding-top: 236px;
  color: #858b9b;
  font-weight: 500;
}
.tv_wrap #header_micro .txt_ie a {
  color: #3572b0;
  font-weight: 500;
}
.tv_wrap #header_micro .txt_ie a:hover {
  text-decoration: underline;
}

#wrapper.tv_wrap.fixed {
  padding-top: 334px;
}
.fixed #header_micro {
  background: none;
}
.fixed #header_micro .noise {
  display: none;
}
.fixed #header_micro .bg_fixed {
  height: 100%;
  transition: height 300ms ease;
}
.fixed #header_micro h2 {
  top: 34px;
  width: 213px;
  margin-left: -107px;
}
.fixed #header_micro .txt_ie {
  display: none;
}
.tv_inner .entire_wrap .btn_faq,
.tv_inner .entire_wrap .btn_more span,
.layerTV .btn_close,
.pop_faq .faq h4 .arrow {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/spr_btn_tv.png) no-repeat;
}
.tv_inner .tv_list {
  overflow: hidden;
  margin-right: -28px;
}
.tv_inner .tv_list li {
  float: left;
  width: 279px;
  border-bottom: 1px solid #131419;
  margin: 0 28px 28px 0;
}
.tv_inner .tv_list .recommend {
  width: 586px;
}
.tv_inner .tv_list li a {
  display: block;
  position: relative;
  background-color: #fff;
}
.tv_inner .tv_list li .thumbnail {
  position: relative;
  height: 157px;
}
.tv_inner .tv_list .recommend .thumbnail {
  height: 329px;
}
.tv_inner .tv_list li .thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
}
.tv_inner .tv_list 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;
}
.tv_inner .tv_list li a:hover .play {
  background-position: 0 -67px;
}
.tv_inner .tv_list .recommend .play {
  width: 104px;
  height: 90px;
  background-position: -119px 0;
  margin: -45px 0 0 -52px;
}
.tv_inner .tv_list .recommend a:hover .play {
  background-position: -119px -105px;
}
.tv_inner .tv_list p {
  position: relative;
  font-weight: 500;
  padding: 11px 12px 16px;
}
.tv_inner .tv_list p span {
  display: block;
}
.tv_inner .tv_list .tit {
  color: #2f3142;
  font-size: 15px;
  line-height: 18px;
  height: 36px;
  overflow: hidden;
  margin-bottom: 9px;
}
.tv_inner .tv_list .writer {
  color: #858b9b;
  font-size: 13px;
}
.tv_inner .tv_list .time {
  position: absolute;
  right: 14px;
  bottom: 11px;
  color: #858b9b;
  font-family: "Teko", Tw Cen MT Condensed, sans-serif;
  font-size: 16px;
}
.tv_inner .recommend_wrap .recommend p {
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/layout/h3_deco.png) 351px 134px no-repeat;
  padding: 24px 28px 22px;
}
.tv_inner .recommend_wrap .recommend .tit {
  font-size: 18px;
  line-height: 23px;
  height: 46px;
  margin-bottom: 77px;
}
.tv_inner .recommend_wrap .recommend .writer {
  font-size: 15px;
}
.tv_inner .recommend_wrap {
  padding-bottom: 36px;
}
.tv_inner .board_list_tab {
  margin-bottom: 35px;
}
.tv_inner .tag_list {
  font-size: 0;
  margin-bottom: 27px;
}
.tv_inner .tag_list a {
  display: inline-block;
  *zoom: 1;
  min-width: 43px;
  height: 22px;
  line-height: 22px;
  border: 1px solid #5e6071;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  color: #242736;
  padding: 0 7px;
  margin-right: 3px;
}
.tv_inner .tag_list .active,
.tv_inner .tag_list a:hover {
  color: #fff;
  background-color: #5e6071;
}
.tv_inner .entire_wrap {
  position: relative;
}
.tv_inner .entire_wrap .tv_list {
  padding-bottom: 17px;
}
.tv_inner .entire_wrap .btn_faq {
  position: absolute;
  top: 0;
  right: 0;
  width: 41px;
  height: 41px;
  line-height: 41px;
  border: 1px solid #2f3142;
  color: #4e5568;
  font-size: 16px;
  font-weight: 500;
  padding-left: 37px;
}
.tv_inner .entire_wrap .btn_faq:hover {
  background-color: #5e6071;
  border-color: #5e6071;
  color: #eee;
  background-position: 0 -53px;
}
.tv_inner .entire_wrap .btn_more {
  display: block;
  border: 1px solid #666879;
  height: 50px;
  text-align: center;
  color: #666879;
}
.tv_inner .entire_wrap .btn_more span {
  display: inline-block;
  *zoom: 1;
  vertical-align: top;
  font-size: 16px;
  font-weight: 500;
  line-height: 48px;
  background-position: 0 -430px;
  padding-left: 24px;
}
.tv_inner .entire_wrap .btn_more:hover {
  background-color: #5e6071;
  border-color: #5e6071;
  color: #fff;
}
.tv_inner .entire_wrap .btn_more:hover span {
  background-position: 0 -471px;
}
.tv_inner .entire_wrap .checking {
  position: relative;
  height: 207px;
  background: url(https://ssl.nexon.com/s2/game/cso/cso2018/contents/bg_tv_checking.png) no-repeat;
  color: #fff;
  font-size: 23px;
  line-height: 28px;
  text-align: center;
  padding-top: 253px;
}

/* 카스온라인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-position: -330px 0;
  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 .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;
}

/* FAQ 팝업*/
.pop_faq .pop_body {
  background: #fff;
  padding: 32px 28px 58px;
}
.pop_faq h3 {
  background-position: 100% 8px;
  margin-bottom: 28px;
  padding-right: 240px;
}
.pop_faq .faq_content {
  border-top: 1px solid #5e6071;
}
.pop_faq .faq h4 {
  position: relative;
  border-bottom: 1px solid #ccc;
}
.pop_faq .faq h4 a,
.pop_faq .faq .answer {
  font-weight: 500;
  line-height: 23px;
  padding: 0 90px;
}
.pop_faq .faq h4 a {
  display: block;
  font-size: 18px;
  color: #2f3142;
  background-position: 100% -264px;
  padding-top: 24px;
  padding-bottom: 28px;
}
.pop_faq .faq h4 a:hover {
  text-decoration: underline;
  background-color: #fbfbfb;
}
.pop_faq .faq h4 .arrow {
  position: absolute;
  top: 28px;
  right: 30px;
  width: 23px;
  height: 20px;
  background-position: -447px -292px;
}
.pop_faq .faq.open h4 .arrow {
  background-position: -447px -346px;
}
.pop_faq .faq .mark {
  position: absolute;
  left: 30px;
  width: 37px;
  height: 37px;
  line-height: 34px;
  color: #fff;
  font-size: 18px;
  text-align: center;
  border-radius: 100%;
}
.pop_faq .faq h4 .mark {
  top: 19px;
  background: #2f3142;
}
.pop_faq .faq .answer .mark {
  top: 29px;
  background: #5e6071;
}
.pop_faq .faq .answer {
  position: relative;
  display: none;
  color: #4e5568;
  font-size: 15px;
  background: #eee;
  border-bottom: 1px solid #ccc;
  padding-top: 34px;
  padding-bottom: 35px;
}
.pop_faq .faq.open .answer {
  display: block;
}
.pop_faq .faq .answer p + p {
  margin-top: 6px;
}
.pop_faq .faq .answer p.img {
  margin-top: 13px;
}
.pop_faq .faq .answer .indent {
  text-indent: -11px;
  padding-left: 11px;
}
.pop_faq .faq .answer .indent strong {
  font-weight: 600;
}
.pop_faq .faq .answer p .blue {
  color: #2e6fd2;
}
.pop_faq .faq .answer p a.blue {
  text-decoration: underline;
}

/* video 팝업 */
.pop_video .pop_content {
  margin-top: -447px;
}
.pop_video .pop_body {
  height: 824px;
  background: #fff;
}
.pop_video .video_frame {
  position: relative;
  height: 675px;
  background: #000;
}
.pop_video .video_frame iframe {
  width: 100%;
  height: 100%;
}
.pop_video .video_info {
  height: 118px;
  font-size: 0;
  padding: 31px 28px 0;
}
.pop_video .video_info h3 {
  width: 700px;
  height: 46px;
  color: #2f3142;
  font-size: 18px;
  line-height: 23px;
  font-weight: 500;
  overflow: hidden;
  margin-bottom: 26px;
}
.pop_video .video_info span {
  display: inline-block;
  *zoom: 1;
  color: #858b9b;
}
.pop_video .video_info .writer {
  font-size: 15px;
  margin-right: 10px;
}
.pop_video .video_info .writer:after {
  content: "";
  display: inline-block;
  height: 12px;
  border-right: 1px solid #ced1d7;
  margin-left: 10px;
}
.pop_video .video_info .time {
  font-size: 18px;
  font-family: "Teko", Tw Cen MT Condensed, sans-serif;
}

@keyframes videoNoise {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}


/* 크리에이터 */
.button-more {
  margin-top: 30px;
  align-items: center;
  border: 1px solid #282D3C;
  border-radius: 3px;
  box-sizing: border-box;
  color: #000;
  display: inline-flex;
  font-size: 16px;
  height: 46px;
  justify-content: center;
  padding: 10px;
  transition: background-color .2s ease;
  width: 100%;
}

.button-more:hover {
  background-color: #f6f6f6;
}

.creator_banner {
  position: relative;
  margin: -10px 0 25px 0;
}

.creator_banner a {
  position: absolute;
  top: 74px;
  right: 50px;
  display: flex;
  min-width: 168px;
  height: 44px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #FFF;
  font-size: 16px;
  font-weight: 500;
  border-radius: 22px;
  border: 2px solid #5464F1;
  background: #5464F1;
  box-sizing: border-box;
  transition: filter 0.3s ease;
}

.creator_banner a:hover {
  filter: brightness(1.2);
}

@keyframes loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(12px);
  }
}


.creator_banner a:hover svg {
  animation: loop 0.4s infinite alternate ease-in-out;
}

.creator_sort.list_sort button {
  width: 64px;
} 

.creatror_loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 366px;
  font-size: 15px;
  font-weight: bold;
}
.creatror_loading svg {
  width: 90px;
  height: 90px;
  margin-bottom: 10px;
}

.creator_list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 50px 32px;
  grid-auto-rows: minmax(100px, auto);
  margin-top: 50px;
}

.creator_list li {
  position: relative;
  width: 100%;
  max-width: 277px;
  height: 366px;
  padding: 100px 25px 25px 25px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #FFF;
  box-sizing: border-box;
  cursor: pointer;
  transition: border 0.3s ease;
}

.creator_list li:hover {
  border: 1px solid #ccc;
  box-shadow: 0px 4px 8px 0px #DBDDE980
}

.creator_profile {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.creator_image {
  position: relative;
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

.creator_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creator_type {
  position: absolute;
  bottom: -10px;
  left: 50%;
  display: inline-flex;
  padding: 2px 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #FFF;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px; /* 123.077% */
  white-space: nowrap;
  border-radius: 20px;
  background: #aaa;
  transform: translateX(-50%);
}

.creator_type.emerald {
  background: #1ECACC;
}

.creator_type.green {
  background: #0AC943;
}

.creator_type.red {
  background: #FB3C3C;
}

.creator_grade {
  position: absolute;
  bottom: 9px;
  right: -15px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  padding: 0 4px;
  border-radius: 19px;
  border: 1px solid #F6F6F6;
  background: #FAFAFA;
  box-sizing: border-box;
}

.creator_grade img {
  width: 100%;
}

.creator_name {
  color: #000;
  font-size: 22px;
  font-weight: 500;
  line-height: 24px; /* 72.727% */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.creator_algin {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 38px;
  margin-top: 10px;
}

.creator_desc {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px; /* 128.571% */
  color: #666;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
}

.creator_sns {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 10px;
  height: 50px;
  margin-bottom: 10px;
}

.creator_sns a {
  display: inline-block;
  width: 34px;
  height: 34px;
  border-radius: 17px;
  border: 1px solid #E9E9E9;
  background-color: #FFF;
  background-repeat: no-repeat;
  background-position: center center;
}

.creator_sns .youtube {
  background-image: url('../images/creator/icon_youtube.png');
}

.creator_sns .youtube:hover {
  background-image: url('../images/creator/icon_youtube_white.png');
  background-color: #F20000;
  border: 1px solid #F20000;
}

.creator_sns .chzzk {
  background-image: url('../images/creator/icon_chzzk.png');
}

.creator_sns .chzzk:hover {
  background-color: #000;
  border: 1px solid #000;
}

.creator_sns .soop {
  background-image: url('../images/creator/icon_soop.png');
}

.creator_sns .soop:hover {
  background-color: #15171A;
  border: 1px solid #15171A;
}

.creator_info {
  display: flex;
  align-items: center;
  height: 60px;
  margin-bottom: 10px;
  color: #666;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px; /* 128.571% */
  border-top: 1px solid #E5E5E5;
}

.creator_follower,
.creator_subscriber {
  width: 100%;
  padding: 0 10px;
}

.creator_info strong {
  color: #282D3C;
  font-weight: 600;
}

.creator_wall {
  position: relative;
  width: 1px;
  height: 12px;
  background-color: #D9D9D9;
}

a.creator_followup,
button.creator_followup {
  display: flex;
  width: 225px;
  height: 44px;
  justify-content: center;
  align-items: center;
  color: #FFF;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px; /* 114.286% */
  background: #282D3C;
  transition: filter 0.2s ease;
}

.creator_followup:hover {
  filter: brightness(1.4);
}

.creator_skin .type {
  height: 39px;
}

.creator_skin .type-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 100%;
  background-color: #999;
}

.creator_skin .type-icon.notice {
  background: #2F3142 url('../images/creator/icon_notice.png') no-repeat center center;
}

.creator_skin .type-icon.event {
  background: #52E5C3 url('../images/creator/icon_event.png') no-repeat center 9px;
}

.creator_skin .type-icon.faq {
  background: #5464F2 url('../images/creator/icon_faq.png') no-repeat center 7px;
}

.creator_skin .type-text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 100%;
  color: #5F6876;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  background-color: #fff;
}

.creator_skin.list .subject {
  width: 700px;
  font-size: 15px;
}

.creator_skin.list .subject .tit {
  max-width: 659px;
  font-size: 15px;
}

.creator_skin.list li dt {
  width: 820px;
}
.creator_skin.list .info._2 {
  width: 112px;
}

.creator-login {
  position: fixed;
  inset: 0px;
  background-color: rgba(30, 30, 30, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

@keyframes slideDown {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

.creator-login__box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 360px;
  color: #2F3142;
  background-color: white;
  animation: slideDown .2s ease-out;
}

.creator-login__box h3 {
  font-size: 22px;
  font-weight: 600;
}

.creator-login__box p {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 400;
}

.creator-login__close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 30px;
}

.creator-login__buttons {
  display: flex;
  gap: 0 10px;
  justify-content: center;
  margin-top: 50px;
}

.creator-login__buttons .button {
  display: inline-block;
  width: 200px;
  height: 60px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 5px;
}

.creator-login__buttons .border {
  color: #2F3142;
  border: 1px solid #2F3142;
  background-color: #fff;
}

.creator-login__buttons .border:hover {
  filter: brightness(0.95);
}

.creator-login__buttons .fill {
  color: #fff;
  background-color: #2F3142;
}

.creator-login__buttons .fill:hover {
  filter: brightness(1.2);
}