@charset "utf-8";

/* common */
.icon,
.tab_2dep h2::before,
.latest_list .go::after,
.board_list .time::before,
.board_list .view::before,
.board_list .vote::before,
.board_list .like::before,
.board_view .view_body .btn_copy::after,
.board_view .view_header .btn_report::before,
.board_view .view_header .btn_like::before,
.qna_list .func .btn_my_q::before,
.qna_list .func .btn_all_q::before,
.qna_list .time::before,
.view_content .poll .btn_vote::after,
.view_content .poll .btn_king::after,
.ranking_func .my_rank .noti::before,
.qna_list .question .btn_report,
.item_book .item_list .like::before {
    display: block;
    text-indent: -9999px;
    overflow: hidden;
    background: url('../../../../assets/img/main/spr_icon.png') no-repeat;
}

.tab_2dep {
    width: 100%;
    padding: 15px 0;
    background-color: #343434;
    border-bottom: 1px solid #e8e8e8;
}

.tab_2dep .inner {
    width: 1240px;
    margin: 0 auto;
}

.tab_2dep h2 {
    position: relative;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    padding: 0 50px 0 26px;
    height: 48px;
    line-height: 49px;
    font-weight: normal;
    font-size: 14px;
    color: #000;
    background-color: #f4f4f4;
    border: 1px solid #dedede;
    border-radius: 25px;
    text-align: center;
    vertical-align: top;
}

.tab_2dep h2::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 3px;
    line-height: 48px;
    vertical-align: middle
}

.tab_2dep h2 .icon {
    position: absolute;
    right: 14px;
    top: 13px;
    width: 22px;
    height: 22px;
    background-position: 0 -125px;
}

.tab_2dep ul {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: top;
    margin-left: 11px;
}

.tab_2dep ul li {
    float: left;
}

.tab_2dep ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    line-height: 50px;
    padding: 0 22px 0 21px;
    color: #767676;
    box-sizing: border-box;
    font-size: 16px;
}

.tab_2dep ul li a:hover {
    color: #00d4c3;
}

.tab_2dep ul li.active a {
    padding: 0 22px 0 21px;
    color: #fff;
    background-color: #33d8c6;
    border-radius: 25px;
    border: 1px solid #33d8c6
}

.tab_2dep ul li a .window {
    display: inline-block;
    width: 14px;
    height: 13px;
    vertical-align: top;
    text-indent: -9999px;
    overflow: hidden;
    background: url(../../../../assets/img/main/spr_icon.png) no-repeat;
    background-position: -0px -1780px;
    margin-left: 7px;
    position: relative;
    top: -2px
}

.tab_2dep ul li.active a .window,
.tab_2dep ul li.active a:hover .window {
    background-position: -25px -1780px;
}

.tab_2dep ul li a:hover .window {
    background-position: -50px -1780px;
}

#contents.info .tab_2dep h2::before {
    background-position: 0 -25px;
}

#contents.ranking .tab_2dep h2::before {
    background-position: 0 -50px;
}

#contents.community .tab_2dep h2::before {
    background-position: 0 -75px;
}

#contents.customer .tab_2dep h2::before {
    background-position: 0 -100px;
}

#contents.myblock .tab_2dep h2::before {
    background-position: 0 -350px;
}

#contents.myblock .tab_2dep h2 {
    padding-right: 30px
}

#contents.myblock .tab_2dep h2 .icon {
    display: none;
}

.contents_tit {
    position: relative;
    width: 1240px;
    margin: 78px auto 0;
    padding-bottom: 7px;
    background: url('../../../../assets/img/sub/bg_line_table.png') no-repeat center bottom
}

.contents_tit h3 {
    height: 60px;
    font-size: 42px;
    color: #000;
    font-weight: normal;
}

.contents_tit .tab_3dep {
    position: absolute;
    right: 0;
    top: 23px;
}

.contents_tit .tab_3dep li {
    float: left;
    padding: 0 16px 0 15px;
}

.contents_tit .tab_3dep li a {
    position: relative;
    display: block;
    height: 44px;
    padding: 0 8px;
    color: #969696;
    font-size: 20px;
}

.contents_tit .tab_3dep li:last-child {
    padding-right: 0
}

.contents_tit .tab_3dep li:hover a,
.contents_tit .tab_3dep li.active a {
    color: #00d4c3;
}

.contents_tit .tab_3dep li.active a::after,
.contents_tit .tab_3dep li:hover a::after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 7px;
    background: #33d8c6 url('../../../../assets/img/sub/bg_line_tab.png') no-repeat right bottom;
    border-radius: 5px;
}

.contents_tit .selectbox {
    position: absolute;
    right: 0;
    top: -10px;
    width: 190px;
    height: 58px;
}

.contents_tit .selectbox .btn_select {
    width: 190px;
    padding: 0 20px;
    line-height: 60px;
    color: #555;
    background-color: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 30px;
}

.contents_tit .selectbox.show .btn_select {
    border-radius: 30px 30px 0 0;
    border-bottom: 1px solid #eee;
}

.contents_tit .selectbox ul {
    position: relative;
    width: 188px;
    top: 0;
    z-index: 5;
    max-height: 163px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 0;
    background-color: #fff;
    border-top: 0;
    text-align: left;
    border-bottom: 1px solid #eee
}

.contents_tit .selectbox li:hover a {
    color: #555;
    background-color: #e0f1ef;
}

.contents_tit .selectbox li a {
    padding: 8px 6px 6px 16px
}

.contents_tit .selectbox .btm {
    display: none;
    position: relative;
    z-index: 5;
    width: 188px;
    height: 30px;
    border-radius: 0 0 30px 30px;
    border: 1px solid #d4d4d4;
    border-top: 0;
    background-color: #fff;
}

.contents_tit .selectbox.show .btm {
    display: block;
}

.sub_tit {
    margin: 55px 0 40px;
    color: #333;
    font-size: 24px;
    font-weight: 700
}

.sub_tit::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 4px;
    margin: -4px 8px 0 0;
    background-color: #33d8c6;
    border-radius: 2px;
    vertical-align: middle
}

.tab_4dep {
    position: relative;
    width: 1240px;
    margin: 0 auto;
    height: 61px;
    line-height: 60px;
    background: #eee url('../../../../assets/img/sub/bg_line_ptn1.png') repeat-x left bottom
}

.tab_4dep ul {
    overflow: hidden;
}

.tab_4dep li {
    position: relative;
    float: left;
    padding: 0 50px;
}

.tab_4dep li::before {
    position: absolute;
    left: 0;
    top: 21px;
    content: '';
    display: inline-block;
    width: 1px;
    height: 18px;
    background-color: #dedede;
}

.tab_4dep li:first-child::before {
    display: none;
}

.tab_4dep li a {
    display: inline-block;
    height: 61px;
    color: #969696;
    font-size: 18px;
}

.tab_4dep li.active a,
.tab_4dep li:hover a {
    color: #000;
    height: 60px;
    border-bottom: 1px solid #000;
}

.writer .server {
    display: inline-block;
    width: 42px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    background-color: #e8e8e8;
    border-radius: 12px;
    text-align: center
}

.writer .server.happy {
    color: #00d4c3
}

.writer .server.dream {
    color: #9b62ef
}

.writer .level_icon {
    position: relative;
    display: inline-block;
    width: 37px;
    line-height: 18px;
    color: #767676;
    vertical-align: middle;
    text-align: left
}

.writer .lv0 {
    margin-left: -20px
}

.category.notice,
.category.winner,
.category.free,
.category.user,
.category.game,
.category.king,
.category.monthly {
    color: #00d4c3
}

.category.event,
.category.idea,
.category.item {
    color: #9b62ef
}

.category.patch,
.category.guild,
.category.best,
.category.charac {
    color: #f94242
}

.category.check,
.category.sketch,
.category.etc {
    color: #767676
}

.category.info,
.category.map {
    color: #0f97ff
}

.category.ing {
    color: #fff;
    background-color: #f94242 !important;
}

.latest_list {
    position: relative;
    width: 1240px;
    margin: 36px auto 66px;
    ;
}

.latest_list ul {
    overflow: hidden;
}

.latest_list li {
    position: relative;
    float: left;
    width: 318px;
    height: 140px;
    padding: 32px 32px 26px;
    margin-left: 44px;
    background-color: #fff;
    border: 1px solid #dedede;
    text-align: right
}

.latest_list li:first-child {
    margin-left: 0
}

.latest_list .tit {
    display: block;
    font-size: 20px;
    color: #333;
    line-height: 30px;
    height: 63px;
    overflow: hidden;
    text-align: left
}

.latest_list .tit .new {
    display: inline-block;
    width: 23px;
    height: 8px;
    margin-top: 6px;
    background-position: 0 -175px;
    vertical-align: top
}

.latest_list .txt {
    display: none;
    position: absolute;
    left: 32px;
    top: 32px;
    width: 320px;
    height: 68px;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    background-color: #33d8c6;
    text-align: left
}

.latest_list .category {
    position: absolute;
    left: 31px;
    bottom: 44px;
    display: inline-block;
    width: 45px;
    height: 45px;
    line-height: 47px;
    text-align: center;
    font-size: 12px;
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
}

.latest_list .time,
.latest_list .view {
    display: inline-block;
    margin: 62px 0 0 20px;
    font-family: 'Roboto';
    color: #969696;
    text-indent: 0;
}

.latest_list .time {
    padding: 1px 0 0 21px;
    background-position: 0 -225px;
}

.latest_list .view {
    padding: 1px 0 0 25px;
    background-position: 0 -250px;
}

.latest_list .go {
    display: none;
    position: absolute;
    right: 32px;
    bottom: 26px;
    color: #ffe329;
}

.latest_list .go::after {
    content: '';
    display: inline-block;
    width: 23px;
    height: 15px;
    margin: -3px 0 0 10px;
    background-position: 0 -150px;
    vertical-align: middle
}

.latest_list .line {
    display: inline-block;
    position: absolute;
    left: 78px;
    bottom: 63px;
    width: 234px;
    height: 7px;
    margin-left: 27px;
    background-color: #e8e8e8;
    border-radius: 4px;
}

.latest_list .line::before {
    content: '';
    display: inline-block;
    position: absolute;
    left: -17px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #e8e8e8;
}

.latest_list li:hover {
    background-color: #33d8c6;
    border: 1px solid #33d8c6
}

.latest_list li:hover .txt,
.latest_list li:hover .go {
    display: block;
}

.latest_list li:hover .time,
.latest_list li:hover .view {
    display: none;
}

.latest_list li:hover .category {
    background-color: #14564f;
    border-color: #14564f;
    color: #00d4c3;
}

.latest_list li:hover .line,
.latest_list li:hover .line::before {
    background-color: #71e4d7;
}

.board_list {
    position: relative;
    width: 1240px;
    margin: 0 auto;
}

.board_list.notice {
    padding-top: 7px;
    background: url('../../../../assets/img/sub/bg_line_table.png') no-repeat center top
}

.board_list .table {
    padding-bottom: 7px;
    background: url('../../../../assets/img/sub/bg_line_table.png') no-repeat center bottom
}

.board_list .table li {
    position: relative;
    clear: both;
    width: 1042px;
    margin-left: 198px;
    border-top: 1px solid #dedede;
}

.board_list .table li::after {
    content: '';
    display: block;
    width: 100%;
    clear: both;
}

.board_list .table li a {
    float: left;
    width: 1042px;
    height: 69px;
}

.board_list .table li:first-child {
    border-top: 0;
}

.board_list .table li:hover {
    background-color: #e0f1ef;
}

.board_list.notice li:hover .tit,
.board_list.poll li:hover .tit,
.board_list .table li a.detail:hover .tit,
.board_list .table li a.writer:hover .name {
    text-decoration: underline
}

.board_list .time {
    position: absolute;
    left: -198px;
    top: 0;
    display: block;
    width: 136px;
    height: 44px;
    line-height: 44px;
    margin: 11px 36px 0 0;
    text-align: center;
    font-family: 'Roboto';
    color: #969696;
    text-indent: 0;
    background-color: #eeeeee;
    border: 1px solid #e2e2e2;
    border-radius: 22px
}

.board_list .time::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 44px;
    margin: -1px 9px 0 0;
    vertical-align: middle;
    background-position: 0 -225px;
}

.board_list .time::after {
    content: '';
    position: absolute;
    right: -25px;
    top: 19px;
    display: inline-block;
    width: 37px;
    height: 4px;
    background: url('../../../../assets/img/sub/bg_line_time.png') no-repeat
}

.board_list .category {
    position: relative;
    float: left;
    z-index: 7;
    width: 45px;
    height: 45px;
    line-height: 47px;
    margin: 11px 0 0 -23px;
    text-align: center;
    font-size: 12px;
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
}

.board_list.poll .category {
    color: #767676
}

.board_list .tit_wrap {
    float: left;
    width: 728px;
    line-height: 69px;
    margin-left: 22px;
    font-size: 16px;
    color: #333333;
}

.board_list .tit_wrap .tit {
    display: inline-block;
    max-width: 86%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle
}

.board_list .tit_wrap .new {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: -3px 0 0 3px;
    vertical-align: middle;
    background-position: 0 -200px;
}

.board_list .tit_wrap .mobile {
    display: inline-block;
    width: 11px;
    height: 15px;
    margin: -3px 0 0 4px;
    vertical-align: middle;
    background-position: 0 -1625px;
}

.board_list .tit_wrap .cmt {
    display: inline-block;
    vertical-align: middle;
    color: #00d4c3;
    font-size: 16px;
}

.board_list .view,
.board_list .vote {
    position: relative;
    float: right;
    width: 114px;
    line-height: 69px;
    color: #969696;
    font-family: 'Roboto';
}

.board_list .view::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 7px;
    background-position: 0 -250px;
    vertical-align: middle
}

.board_list .vote::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 7px;
    background-position: 0 -1350px;
    vertical-align: middle
}

.board_list .like {
    position: relative;
    float: right;
    width: 88px;
    line-height: 69px;
    color: #969696;
    font-family: 'Roboto';
}

.board_list .like::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 7px;
    background-position: 0 -275px;
    vertical-align: middle
}

.board_list .bar::after {
    content: '';
    display: inline-block;
    position: absolute;
    left: -34px;
    top: 32px;
    width: 19px;
    height: 4px;
    background-color: #d9d9d9;
    border-radius: 2px;
    vertical-align: middle
}

.board_list .table li .writer,
.board_list.free .table li a.writer {
    position: relative;
    float: left;
    width: 242px;
    line-height: 69px;
    color: #767676;
}

.board_list li .preview {
    display: none;
    position: absolute;
    right: 0;
    top: 46px;
    z-index: 9;
    width: 698px;
    padding: 17px 20px 15px;
    background-color: #fff;
    border: 1px solid #33d8c6;
    color: #666;
    line-height: 22px;
    box-shadow: 0px 3px 0px 0px #dbdbdb;
}

.board_list .table li.tmb {
    padding: 7px 0;
}

.board_list .table li.tmb a {
    height: 94px;
}

.board_list.free .table li.tmb a.writer {
    line-height: 94px
}

.board_list li.tmb .tit_wrap .tit {
    max-width: 80%;
}

.board_list li.tmb .preview {
    top: 67px;
}

.board_list li.tmb .time {
    margin-top: 32px
}

.board_list li.tmb .category {
    margin-top: 25px
}

.board_list li.tmb .like,
.board_list li.tmb .view,
.board_list.free li.tmb .writer {
    line-height: 94px;
}

.board_list li.tmb .bar::after {
    top: 44px;
}

.board_list .tmb_wrap {
    position: relative;
    float: left;
    width: 104px;
    height: 94px;
    margin-left: -23px;
    z-index: 5;
}

.board_list .tmb_wrap .tmb {
    display: block;
    width: 100%;
    height: 100%;
}

.board_list .tmb_wrap .img,
.board_list .tmb_wrap .mov {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-block;
    height: 24px;
    line-height: 27px;
    padding: 0 5px 0 6px;
    font-size: 12px;
    font-family: 'Roboto';
    color: #fff;
    background: url('../../../../assets/img/sub/bg_tmb_icon.png') repeat
}

.board_list .tmb_wrap .mov {
    padding: 3px;
    height: 18px;
    line-height: 18px;
}

.board_list .tmb_wrap .img .icon {
    display: inline-block;
    width: 17px;
    height: 13px;
    margin-top: -2px;
    background-position: 0 -1175px;
    vertical-align: middle
}

.board_list .tmb_wrap .mov .icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-position: -25px -1175px;
    vertical-align: middle
}

.board_list.free .table li a {
    float: left;
    width: 578px;
}

.board_list.free .table li .tit_wrap {
    width: 528px;
}

.board_list.free .table li.tmb .tit_wrap {
    width: 434px;
    margin-left: 15px;
    line-height: 94px;
}

.board_list.poll .table li {
    width: 953px;
    margin-left: 287px;
}

.board_list.poll .table li a {
    width: 953px;
}

.board_list.poll .time {
    width: 228px;
    left: -287px;
}

.board_list .table li.notice .category {
    background-color: #f94242;
    border-color: #f94242;
    color: #fff
}

.board_list .table li.notice a {
    background-color: #eeeeee;
}

.board_list .table li.notice .tit {
    color: #f94242
}

.board_list .table li.notice:hover a {
    background-color: #e0f1ef;
}

.board_list .table li.ing .category {
    background-color: #f94242;
    border-color: #f94242;
    color: #fff
}

.board_list .table li.ing a {
    background-color: #eeeeee;
}

.board_list_wrap .btns {
    position: relative;
    width: 100%;
    margin-bottom: -42px;
    padding-top: 14px;
    text-align: right
}

.board_list_wrap .btns a {
    display: inline-block;
    width: 120px;
    height: 60px;
    line-height: 63px;
    font-size: 18px;
    color: #fff;
    background-color: #29d3c0;
    border-radius: 30px;
    text-align: center
}

.board_list_wrap .btns a:hover {
    background-color: #00aaac;
}

.board_list_wrap .btns a.btn_list {
    width: 130px;
    background-color: #e8e8e8;
    border: 1px solid #d4d4d4;
    box-sizing: border-box;
    color: #333
}

.board_list_wrap .btns a.btn_list:hover {
    background-color: #d4d4d4;
}

.board_list_wrap .line_top,
.board_list_wrap .line_btm {
    display: block;
    width: 100%;
    height: 7px;
    background-color: #e8e8e8;
    border-radius: 4px;
    line-height: 0
}

.board_list_wrap .paging {
    position: relative;
    width: 1240px;
    margin: 64px auto 32px;
    text-align: center
}

.board_list_wrap .paging a {
    display: inline-block;
    padding: 10px 8px;
    margin: 0 3px;
    font-size: 16px;
    color: #767676;
    vertical-align: top
}

.board_list_wrap .paging a:hover {
    color: #00d4c3;
}

.board_list_wrap .paging em {
    display: inline-block;
    padding: 10px 1px 1px 0;
    margin: 0 9px;
    color: #00d4c3;
    font-style: normal;
    border-bottom: 1px solid #00d4c3;
    font-size: 16px;
    vertical-align: top
}

.board_list_wrap .paging button {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin: 0 2px 0 3px;
    vertical-align: top
}

.board_list_wrap .paging .btn_first {
    background-position: 0 -375px;
}

.board_list_wrap .paging .btn_first:hover {
    background-position: -50px -375px;
}

.board_list_wrap .paging .btn_prev {
    margin-right: 19px;
    background-position: 0 -425px;
}

.board_list_wrap .paging .btn_prev:hover {
    background-position: -50px -425px;
}

.board_list_wrap .paging .btn_next {
    margin-left: 18px;
    background-position: 0 -475px;
}

.board_list_wrap .paging .btn_next:hover {
    background-position: -50px -475px;
}

.board_list_wrap .paging .btn_last {
    background-position: 0 -525px;
}

.board_list_wrap .paging .btn_last:hover {
    background-position: -50px -525px;
}

.board_list_wrap .search {
    position: relative;
    width: 570px;
    height: 58px;
    margin: 0 auto;
    background-color: #f4f4f4;
    border: 1px solid #d4d4d4;
    border-radius: 29px;
}

.board_list_wrap .search .area {
    float: left;
    width: 98px;
    margin-left: 28px;
}

.board_list_wrap .search .input {
    position: relative;
    float: left;
    margin-top: 14px;
    padding-left: 20px;
    height: 30px;
    line-height: 34px;
    border-left: 1px solid #dbdbdb;
}

.board_list_wrap .search .input label {
    position: absolute;
    left: 20px;
    top: 0;
    color: #b1b1b1;
    font-size: 18px;
}

.board_list_wrap .search .input .ip_text {
    width: 360px;
    background-color: #f4f4f4;
    border: 0;
    color: #333;
    font-size: 18px;
}

.board_list_wrap .search .btn_search {
    position: absolute;
    right: 0;
    top: 0;
    width: 59px;
    height: 58px;
    background-position: 0 -1025px;
}

.board_list_wrap .search .btn_search:hover {
    background-position: -50px -1025px
}

.board_list_wrap .no_data {
    padding: 0 0 55px 0;
    font-size: 20px;
    color: #333;
    text-align: center;
}

.board_list_wrap .no_data p {
    padding-top: 200px;
    background: url('../../../../assets/img/sub/bg_nodata-1.png') no-repeat center 60px
}

.board_list_wrap .no_data em {
    font-style: normal;
    color: #00d4c3;
}

.board_list_wrap .no_data .btn_list {
    display: inline-block;
    height: 58px;
    line-height: 60px;
    margin-top: 32px;
    padding: 0 29px;
    font-size: 18px;
    color: #333;
    background-color: #e8e8e8;
    border: 1px solid #d4d4d4;
    border-radius: 29px;
}

.board_list_wrap .no_data .btn_list:hover {
    background-color: #d4d4d4;
}

.table_list {
    position: relative;
    width: 1240px;
    margin: 0 auto;
    padding-top: 7px;
    background: url('../../../../assets/img/sub/bg_line_table.png') no-repeat center top
}

.table_list table {
    position: relative;
    width: 100%;
}

.table_list table::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 7px;
    background: url('../../../../assets/img/sub/bg_line_table.png') no-repeat
}

.table_list th {
    height: 68px;
    font-size: 16px;
    color: #333;
    border-bottom: 2px solid #dedede;
    font-weight: normal
}

.table_list th.col1 {
    width: 138px;
}

.table_list th.col2 {
    width: 120px;
}

.table_list th.col3 {
    padding-left: 47px;
    text-align: left;
}

.table_list th.col4,
.table_list th.col5,
.table_list th.col6,
.table_list th.col7,
.table_list th.col8 {
    width: 132px;
}

.table_list.rank_total th.col4,
.table_list.rank_total th.col5,
.table_list.rank_total th.col6,
.table_list.rank_total th.col7,
.table_list.rank_winning th.col4,
.table_list.rank_winning th.col5,
.table_list.rank_winning th.col6,
.table_list.rank_winning th.col7,
.table_list.rank_winning_s th.col4,
.table_list.rank_winning_s th.col5,
.table_list.rank_winning_s th.col6,
.table_list.rank_winning_s th.col7,
.table_list.rank_ladder_s th.col4,
.table_list.rank_ladder_s th.col5,
.table_list.rank_ladder_s th.col6,
.table_list.rank_ladder_s th.col7 {
    width: 166px;
}

.table_list td {
    height: 69px;
    font-size: 16px;
    color: #969696;
    font-family: 'Roboto';
    text-align: center;
    border-top: 1px solid #dedede;
}

.table_list td.rank {
    padding: 0 9px;
    color: #333;
    font-size: 20px;
    font-weight: 700
}

.table_list td.name {
    padding-left: 30px;
    text-align: left;
    font-family: 'NEXONLv1Gothic';
    color: #333;
}

.table_list td.name a {
    display: inline-block;
    color: #333;
    font-size: 16px;
    vertical-align: middle
}

.table_list td.name a:hover {
    text-decoration: underline
}

.table_list td.name img {
    margin: -2px 7px 0 0;
    vertical-align: middle
}

.table_list td.adr.up {
    color: #f94242;
    font-size: 14px;
}

.table_list td.adr.dn {
    color: #4b8fff;
    font-size: 14px;
}

.table_list td.adr .icon {
    display: inline-block;
    width: 14px;
    height: 13px;
    margin-top: -2px;
    background-position: 0 -1550px;
    vertical-align: middle
}

.table_list td.adr.up .icon {
    width: 11px;
    margin-right: 5px;
    background-position: -25px -1550px;
}

.table_list td.adr.dn .icon {
    width: 11px;
    margin-right: 5px;
    background-position: -50px -1550px;
}

.table_list td .avatar {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 20px 0 19px;
    text-align: center
}

.table_list td .avatar img {
    margin-top: 7px;
}

.table_list td .avatar strong {
    position: absolute;
    top: 79px;
    left: 81px;
    z-index: 4;
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 38px;
}

.table_list td.rank .cover {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    display: block;
    width: 120px;
    height: 120px;
    background: url('../../../../assets/img/sub/bg_rank_cover.png') no-repeat;
}

.table_list td.rank2 .cover {
    background-position: 0 -120px
}

.table_list td.rank3 .cover {
    background-position: 0 -240px
}

.table_list tr.me td,
.table_list tr:hover td {
    background-color: #e0f1ef;
}

.table_list tr.me td.rank1 .cover,
.table_list tr:hover td.rank1 .cover {
    background-position: -120px 0
}

.table_list tr.me td.rank2 .cover,
.table_list tr:hover td.rank2 .cover {
    background-position: -120px -120px
}

.table_list tr.me td.rank3 .cover,
.table_list tr:hover td.rank3 .cover {
    background-position: -120px -240px
}

.table_list td .no_data {
    font-family: 'NEXONLv1Gothic'
}

.thumb_list {
    position: relative;
    width: 1240px;
    margin: 0 auto;
    background: none
}

.thumb_list .table {
    overflow: hidden;
    margin-left: -44px;
    padding-top: 36px;
    padding-bottom: 19px;
    background: url('../../../../assets/img/sub/bg_line_table.png') no-repeat 44px bottom
}

.thumb_list .table li {
    position: relative;
    float: left;
    width: 382px;
    height: 382px;
    margin: 0 0 44px 44px;
    border: 1px solid #e8e8e8;
    background-color: #fff;
}

.thumb_list .table li a {
    display: block;
    width: 100%;
}

.thumb_list li .tmb {
    display: block;
    width: 382px;
    height: 239px;
    overflow: hidden;
    border-bottom: 1px solid #eee
}

.thumb_list li .tit_wrap {
    display: block;
    margin: 35px 20px 8px 30px;
    font-size: 20px;
    color: #000;
}

.thumb_list li .tit {
    position: relative;
    display: inline-block;
    height: 21px;
    max-width: 82%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 22px
}

.thumb_list li .new {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 3px 0 0 1px;
    vertical-align: top;
    background-position: 0 -200px;
}

.thumb_list li .txt {
    display: block;
    max-height: 30px;
    margin: 0 20px 19px 30px;
    overflow: hidden;
    font-size: 14px;
    color: #666;
    line-height: 1.2
}

.thumb_list li .time {
    display: inline-block;
    margin-left: 30px;
    padding: 1px 0 0 21px;
    font-size: 14px;
    font-family: 'Roboto', 'NEXONLv1Gothic';
    color: #00d4c3;
    text-indent: 0;
    background-position: 0 -225px;
}

.thumb_list li .time .kor {
    font-size: 13px
}

.thumb_list li .writer {
    position: relative;
    display: block;
    margin: -5px 0 16px 0;
    padding: 0 0 20px 30px;
    border-bottom: 1px solid #eee
}

.thumb_list li .writer .name {
    color: #767676
}

.thumb_list li .like {
    float: right;
    margin-left: 15px;
    padding: 2px 0 0 24px;
    font-size: 14px;
    font-family: 'Roboto';
    color: #969696;
    text-indent: 0;
    background-position: 0 -275px
}

.thumb_list li .view {
    float: right;
    margin: 0 15px 0 17px;
    padding: 1px 0 0 26px;
    font-size: 14px;
    font-family: 'Roboto';
    color: #969696;
    text-indent: 0;
    background-position: 0 -250px
}

.thumb_list li .cmt {
    display: inline-block;
    font-size: 20px;
    color: #00d4c3;
    vertical-align: top;
    margin-top: 1px;
    line-height: 22px
}

.thumb_list li .flag {
    position: absolute;
    left: 31px;
    top: 208px;
    display: inline-block;
    width: 54px;
    height: 54px;
    line-height: 56px;
    font-size: 12px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    border: 2px solid #fff
}

.thumb_list li .flag::after {
    content: '';
    display: block;
    position: absolute;
    left: -3px;
    top: -3px;
    width: 54px;
    height: 54px;
    border: 3px solid #fff;
    border-radius: 50%
}

.thumb_list li .flag.ing,
.thumb_list li .flag.best {
    background-color: #f94242;
}

.thumb_list li .flag.until {
    background-color: #33d8c6;
    font-family: 'Roboto';
    font-size: 16px
}

.thumb_list li .flag.user {
    background-color: #33d8c6;
}

.thumb_list li .flag.close {
    background-color: #585858;
}

.thumb_list li .flag.video {
    background-color: #33d8c6;
    background-image: url('../../../../assets/img/main/board/icon_play.png');
    background-repeat: no-repeat;
    background-position: 56% center;
}

.thumb_list .table li:hover {
    background-color: #e0f1ef;
}

.thumb_list .table li:hover>a .tit::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 1px;
    background-color: #58605f;
}

.thumb_list .table li.close a {
    cursor: default
}

.thumb_list .table li.close:hover {
    background-color: #fff;
}

.thumb_list .table li.close:hover>a .tit::before {
    display: none;
}

.thumb_list.sketchbook li .time {
    color: #969696
}

.thumb_list.sketchbook .table li {
    height: 432px;
}

.thumb_list.sketchbook li .txt {
    max-height: 15px;
}

.thumb_list.movie .table li {
    height: 361px;
}

.thumb_list.movie li .tmb {
    height: 214px;
}

.thumb_list.movie li .tit {
    display: inline;
    white-space: normal;
    line-height: 30px
}

.thumb_list.movie li:hover a .tit {
    border-bottom: 1px solid #58605f;
}

.thumb_list.movie li:hover a .tit::before {
    display: none;
}

.thumb_list.movie li .view2 {
    position: absolute;
    left: 30px;
    bottom: 24px;
    padding: 1px 0 0 21px;
    font-size: 14px;
    font-family: 'Roboto';
    color: #969696;
    text-indent: 0;
    background-position: -50px -700px
}

.thumb_list.movie li .icon.play {
    position: absolute;
    left: 32px;
    top: 184px;
    width: 60px;
    height: 60px;
    background: url('../../../../assets/img/info/spr_movie.png') no-repeat
}

.thumb_list.movie .txt_ie {
    clear: both;
    margin: 36px 0 -15px 0;
    font-size: 15px;
    color: #767676
}

.layer_movie .icon {
    background: url('../../../../assets/img/info/spr_movie.png') no-repeat
}

.layer_viewer {
    display: none;
    z-index: 100;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.layer_viewer .dim {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    background-color: #000;
}

.layer_viewer .btn_close {
    position: absolute;
    right: 20px;
    top: 80px;
    width: 80px;
    height: 80px;
    background-position: 0 -650px;
}

.layer_viewer .btn_close:hover {
    background-position: 0 -750px;
}

.layer_viewer.fixed .btn_close {
    position: fixed;
    top: 20px
}

.layer_viewer .viewer {
    position: relative;
    margin: 130px auto 0;
    text-align: center
}

.layer_viewer .detail {
    position: relative;
    display: inline-block;
    margin: 0 auto;
}

.layer_viewer .detail .ie9 {
    position: absolute;
    left: 0;
    top: 40%;
    width: 100%;
    text-align: center;
    font-size: 16px;
    line-height: 1.4;
    color: #fff;
    opacity: 0.6
}

.layer_movie #mPlayer {
    width: 1280px;
    height: 720px;
}

.layer_movie .thumbs {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 148px;
    background-color: #131313;
}

.layer_movie .thumbs .inner {
    position: relative;
    overflow: hidden;
    margin: 20px 30px 0 30px;
    background-color: #131313;
}

.layer_movie .thumbs ul {
    position: relative;
    width: 20000px;
    overflow: hidden;
}

.layer_movie .thumbs li {
    float: left;
    width: 192px;
    height: 108px;
    margin-right: 10px;
}

.layer_movie .thumbs li a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.layer_movie .thumbs li img {
    width: 100%;
    height: 100%;
}

.layer_movie .thumbs li.on a::before,
.layer_movie .thumbs li:hover a::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 4px solid #ffe329;
    box-sizing: border-box
}

.layer_movie .func {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 456px;
    height: 148px;
    padding: 0 30px;
    background-color: #1d1d1d;
    text-align: left;
    box-sizing: border-box
}

.layer_movie .btn_prev {
    display: inline-block;
    width: 98px;
    height: 98px;
    margin: 26px 14px 0 0;
    background-position: 0 -250px;
    vertical-align: top
}

.layer_movie .btn_prev:hover {
    background-position: 0 -350px
}

.layer_movie .btn_next {
    display: inline-block;
    width: 98px;
    height: 98px;
    margin: 26px 28px 0 0;
    background-position: 0 -450px;
    vertical-align: top
}

.layer_movie .btn_next:hover {
    background-position: 0 -550px
}

.layer_movie .paging {
    display: inline-block;
    width: 142px;
    height: 148px;
    line-height: 154px;
    color: #fff;
    font-size: 36px;
    font-family: 'Roboto';
    border-left: 1px solid #262626;
    text-align: center
}

.layer_movie .paging em {
    font-style: normal;
    color: #00d4c3;
}

.thumb_list.fashionshow .table li {
    width: 275px;
    height: 402px;
}

.thumb_list.fashionshow .table li>a {
    height: 100%;
}

.thumb_list.fashionshow li .tmb {
    width: 190px;
    height: 190px;
    line-height: 190px;
    margin: 25px auto 0;
    background-color: #f0f0f0;
    border-radius: 50%;
    text-align: center
}

.thumb_list.fashionshow li .tmb img {
    vertical-align: middle
}

.thumb_list.fashionshow li:hover .tmb {
    background-color: #d3e3e1;
}

.thumb_list.fashionshow li .tit_wrap {
    display: inline-block;
    width: 231px;
    max-height: 94px;
    overflow: hidden;
    margin: 3px 18px 0;
    vertical-align: middle;
    text-align: center
}

.thumb_list.fashionshow li .align {
    display: inline-block;
    height: 94px;
    width: 1px;
    vertical-align: middle
}

.thumb_list.fashionshow li .tit {
    display: inline;
    white-space: normal;
    line-height: 30px;
    vertical-align: middle;
}

.thumb_list.fashionshow li .cmt {
    line-height: 30px;
}

.thumb_list.fashionshow li .new {
    line-height: 30px;
    margin-top: 5px
}

.thumb_list.fashionshow li .mobile {
    display: inline-block;
    width: 11px;
    height: 15px;
    margin: -3px 0 0 2px;
    vertical-align: middle;
    background-position: 0 -1625px;
}

.thumb_list.fashionshow li:hover a .tit {
    border-bottom: 1px solid #58605f;
}

.thumb_list.fashionshow li:hover a .tit::before {
    display: none;
}

.thumb_list.fashionshow li .writer {
    position: absolute;
    left: 0;
    bottom: 52px;
    width: 100%;
    margin: 0;
    padding: 0 0 25px;
    border-bottom: 1px solid #eee;
    text-align: center
}

.thumb_list.fashionshow li .writer a {
    display: inline-block;
}

.thumb_list.fashionshow li .writer a:hover .name {
    text-decoration: underline;
}

.thumb_list.fashionshow li.w_over>a .tit {
    border-bottom: 0
}

.thumb_list.fashionshow li .time {
    margin-top: 58px;
    margin-left: 15px;
    color: #969696
}

.thumb_list.fashionshow li .like {
    margin-top: 57px;
    margin-left: 5px
}

.thumb_list.fashionshow li .view {
    margin: 58px 15px 0 12px;
}

.thumb_list.fashionking .table li {
    width: 275px;
    height: 451px;
}

.thumb_list.fashionking .table li:hover {
    background-color: #fff;
}

.thumb_list.fashionking li .tmb {
    width: 230px;
    height: 198px;
    line-height: 198px;
    margin: 21px 0 0 26px;
    text-align: center;
    border-bottom: 0;
    background: url('../../../../assets/img/sub/bg_fashionking.png') no-repeat
}

.thumb_list.fashionking li.now .tmb {
    background: url('../../../../assets/img/sub/bg_fashionking2.png') no-repeat
}

.thumb_list.fashionking li .number {
    position: absolute;
    left: 26px;
    top: 52px;
    display: inline-block;
    width: 48px;
    height: 48px;
    line-height: 48px;
    color: #16a5ff;
    font-size: 12px;
    text-align: center
}

.thumb_list.fashionking li.now .number {
    color: #ffe329
}

.thumb_list.fashionking li .number b {
    font-size: 20px;
    font-family: 'Roboto';
    font-weight: 700
}

.thumb_list.fashionking li .tmb img {
    vertical-align: middle
}

.thumb_list.fashionking li .tit_wrap {
    display: inline-block;
    width: 231px;
    max-height: 94px;
    overflow: hidden;
    margin: 3px 18px 0;
    vertical-align: middle;
    text-align: center
}

.thumb_list.fashionking li .align {
    display: inline-block;
    height: 94px;
    width: 1px;
    vertical-align: middle
}

.thumb_list.fashionking li .tit {
    display: inline;
    white-space: normal;
    line-height: 30px;
    vertical-align: middle;
}

.thumb_list.fashionking li .cmt {
    line-height: 30px;
}

.thumb_list.fashionking li .new {
    line-height: 30px;
    margin-top: 5px
}

.thumb_list.fashionking li .writer {
    margin: -8px 0 16px 0;
    padding: 0 15px 27px 15px;
    border-bottom: 1px solid #eee;
    text-align: center
}

.thumb_list.fashionking li .time {
    display: block;
    margin-left: 15px;
    color: #969696;
}

.thumb_list.fashionking li .vote {
    position: absolute;
    left: 14px;
    bottom: 16px;
    display: inline-block;
    height: 16px;
    padding: 1px 0 0 24px;
    text-indent: 0;
    color: #969696;
    font-family: 'Roboto';
    background-position: 0 -1350px
}

.thumb_list.fashionking li .btn {
    display: block;
    margin-top: 14px;
    padding: 6px 6px 0;
    border-top: 1px solid #eee;
    text-align: right
}

.thumb_list.fashionking li .btn_result {
    display: inline-block;
    width: 124px;
    height: 36px;
    line-height: 38px;
    background-color: #adadad;
    color: #fff;
    text-align: center
}

.thumb_list.fashionking li .btn_result:hover {
    background-color: #585858;
}

.fashionking .select_year .selectbox {
    width: 190px;
    height: 58px;
    margin: 35px auto 0;
    position: relative;
    z-index: 5;
}

.fashionking .select_year .selectbox .btn_select {
    width: 190px;
    padding: 0 20px;
    line-height: 60px;
    color: #555;
    background-color: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 30px;
    text-align: center
}

.fashionking .select_year .selectbox.show .btn_select {
    border-radius: 30px 30px 0 0;
    border-bottom: 1px solid #eee;
}

.fashionking .select_year .selectbox ul {
    position: relative;
    width: 188px;
    max-height: 140px;
    overflow-x: hidden;
    overflow-y: auto;
    top: 0;
    padding: 12px 0;
    background-color: #fff;
    border-top: 0;
    text-align: left;
    border-bottom: 1px solid #eee
}

.fashionking .select_year .selectbox li:hover a {
    color: #555;
    background-color: #e0f1ef;
}

.fashionking .select_year .selectbox li a {
    padding: 8px 6px 6px 16px
}

.fashionking .select_year .selectbox .btm {
    display: none;
    width: 188px;
    height: 30px;
    border-radius: 0 0 30px 30px;
    border: 1px solid #d4d4d4;
    border-top: 0;
    background-color: #fff;
}

.fashionking .select_year .selectbox.show .btm {
    display: block;
}

.thumb_list.monthly .table li {
    width: 275px;
    height: 526px;
}

.thumb_list.monthly li .tmb {
    position: relative;
    width: 100%;
    height: 361px;
    line-height: 361px;
    margin: 0 0 17px;
    text-align: center;
    background-color: #f4f4f4;
}

.thumb_list.monthly li .tmb img {
    vertical-align: middle
}

.thumb_list.monthly li .number {
    display: inline-block;
    margin-left: 24px;
    color: #000;
    font-size: 12px;
}

.thumb_list.monthly li .number b {
    margin-right: 3px;
    color: #333;
    font-size: 24px;
    vertical-align: -1px;
    font-family: 'Roboto';
    font-weight: 700
}

.thumb_list.monthly li .new {
    margin: 2px 0 0 0
}

.thumb_list.monthly li .tit_wrap {
    height: 94px;
    margin: 0 0 15px 0;
    padding: 7px 20px 0;
    border-bottom: 1px solid #eee
}

.thumb_list.monthly li .tit {
    max-width: 78%;
    margin: 0;
    font-size: 18px;
    color: #333;
    line-height: 22px
}

.thumb_list.monthly li .txt {
    display: block;
    margin: 8px 0 0 0;
    max-height: 46px;
    font-size: 14px;
    color: #666;
    line-height: 22px;
}

.thumb_list.monthly li .cmt {
    font-size: 14px
}

.thumb_list.monthly li:hover a .tit::before {
    display: none;
}

.thumb_list.monthly li:hover a .tit {
    text-decoration: underline
}

.qna_list {
    position: relative;
    width: 1240px;
    margin: 0 auto;
    background: none
}

.qna_list .write {
    overflow: hidden;
    margin: 32px 0 32px;
}

.qna_list .write .selectbox {
    position: absolute;
    left: 30px;
    top: 22px;
}

.qna_list .write .textarea {
    position: relative;
    float: left;
    width: 860px;
    height: 104px;
    padding-left: 240px;
    border-bottom: 1px solid #eee;
    border-top: 1px solid #dedede;
    background-color: #fff;
}

.qna_list .write textarea {
    width: 832px;
    height: 60px;
    padding: 24px 28px 19px 0;
    background-color: #fff;
    border: 0;
    color: #555;
}

.qna_list .write label {
    position: absolute;
    left: 240px;
    top: 44px;
    color: #b1b1b1;
}

.qna_list .write .submit {
    position: relative;
    float: right;
    width: 140px;
    height: 105px;
    background-color: #33d8c6;
}

.qna_list .write .submit:hover {
    background-color: #00aaac;
}

.qna_list .write .submit .btn_submit {
    position: absolute;
    left: 0;
    top: 0;
    width: 140px;
    height: 105px;
    padding-bottom: 16px;
    font-size: 18px;
    color: #fff;
}

.qna_list .write .submit .byte {
    display: block;
    padding-top: 61px;
    text-align: center;
    font-size: 14px;
    font-family: 'Roboto';
    color: #fff;
}

.qna_list .write .submit .byte em {
    font-style: normal;
    color: #ffe329
}

.qna_list .answer_write {
    position: relative;
    overflow: hidden;
    padding: 20px;
    background-color: #eee;
}

.qna_list .answer_write .textarea {
    position: relative;
    float: left;
    width: 1001px;
    height: 98px;
    border: 1px solid #dedede;
    background-color: #fff;
}

.qna_list .answer_write textarea {
    width: 815px;
    height: 58px;
    padding: 20px 28px;
    background-color: #fff;
    border: 0;
    color: #555;
}

.qna_list .answer_write label {
    position: absolute;
    left: 28px;
    top: 20px;
    color: #555;
}

.qna_list .answer_write .submit {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 118px;
    height: 78px;
    border: 1px solid #d4d4d4;
    background-color: #f4f4f4;
}

.qna_list .answer_write .submit:hover {
    background-color: #d4d4d4;
}

.qna_list .answer_write .submit .btn_submit {
    position: absolute;
    left: 0;
    top: 0;
    width: 118px;
    height: 78px;
    padding-bottom: 16px;
    font-size: 16px;
    color: #333;
}

.qna_list .answer_write .submit .byte {
    display: block;
    padding-top: 47px;
    text-align: center;
    font-size: 14px;
    font-family: 'Roboto';
    color: #333;
}

.qna_list .answer_write .submit .byte em {
    font-style: normal;
    color: #999
}

.qna_list .tag_wrap {
    width: 1240px;
    margin-bottom: 0
}

.qna_list .func {
    position: relative;
    width: 1240px;
    margin: 0 auto;
    padding-bottom: 17px;
    text-align: right;
    background: url('../../../../assets/img/sub/bg_line_table.png') no-repeat center bottom
}

.qna_list .func .btn_my_q,
.qna_list .func .btn_all_q {
    color: #fff;
    display: inline-block;
    height: 36px;
    line-height: 38px;
    padding: 0 32px 0 33px;
    background-color: #adadad;
}

.qna_list .func .btn_my_q:hover,
.qna_list .func .btn_all_q:hover {
    background-color: #585858;
}

.qna_list .func .btn_my_q::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background-position: 0 -1250px;
    vertical-align: middle
}

.qna_list .func .btn_all_q::before {
    content: '';
    display: inline-block;
    width: 19px;
    height: 12px;
    margin-right: 8px;
    background-position: 0 -1325px;
    vertical-align: middle
}

.qna_list .table {
    padding-bottom: 7px;
    background: url('../../../../assets/img/sub/bg_line_table.png') no-repeat center bottom
}

.qna_list .table li {
    position: relative;
    clear: both;
    width: 1042px;
    margin-left: 198px;
    border-top: 1px solid #dedede;
}

.qna_list .table li:first-child {
    border-top: 0;
}

.qna_list .table .question_wrap {
    position: relative;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 100%;
    padding: 25px 0;
    vertical-align: middle
}

.qna_list .time {
    position: relative;
    display: inline-block;
    width: 136px;
    height: 44px;
    line-height: 44px;
    margin: 0 55px 0 -198px;
    text-align: center;
    font-family: 'Roboto';
    color: #969696;
    text-indent: 0;
    background-color: #eeeeee;
    border: 1px solid #e2e2e2;
    border-radius: 22px;
    vertical-align: middle
}

.qna_list .time::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 44px;
    margin: -1px 9px 0 0;
    vertical-align: middle;
    background-position: 0 -225px;
}

.qna_list .time::after {
    content: '';
    position: absolute;
    right: -25px;
    top: 19px;
    display: inline-block;
    width: 37px;
    height: 4px;
    background: url('../../../../assets/img/sub/bg_line_time.png') no-repeat
}

.qna_list li.me .time {
    margin-top: -19px;
}

.qna_list .writer {
    position: absolute;
    right: 20px;
    top: 22px;
    width: 248px;
}

.qna_list .writer .name:hover {
    cursor: pointer;
    text-decoration: underline
}

.qna_list .table .btns {
    position: absolute;
    right: 20px;
    bottom: 26px;
    margin-bottom: 0;
    width: 252px;
    z-index: 4;
}

.qna_list .table .btns button {
    width: 118px;
    height: 32px;
    line-height: 32px;
    background-color: #f4f4f4;
    border: 1px solid #d4d4d4;
    color: #666
}

.qna_list .table .btns .btn_answer {
    background: #fff url('../../../S2/Game/ca/ca2019/common/icon_select2_dn.png') no-repeat 90% 49%;
}

.qna_list .table .btns .btn_answer:hover {
    background-image: url('../../../S2/Game/ca/ca2019/common/icon_select3_dn.png');
    background-repeat: no-repeat
}

.qna_list .table .open .btns .btn_answer {
    background-image: url('../../../S2/Game/ca/ca2019/common/icon_select2_up.png');
    background-repeat: no-repeat
}

.qna_list .table .open .btns .btn_answer:hover {
    background-image: url('../../../S2/Game/ca/ca2019/common/icon_select3_up.png');
    background-repeat: no-repeat
}

.qna_list .btns .no_answer {
    display: inline-block;
    width: 118px;
    height: 30px;
    line-height: 32px;
    background-color: #f4f4f4;
    border: 1px solid #d4d4d4;
    color: #666;
    text-align: center
}

.qna_list .table .btns button em,
.qna_list .table .btns .no_answer em {
    font-style: normal;
    color: #00d4c3;
}

.qna_list .table .btns button:hover {
    background-color: #33d8c6;
    color: #fff;
    border-color: #00d4c3;
    background-image: none;
}

.qna_list .table .btns button:hover em {
    color: #fff
}

.qna_list .category {
    position: relative;
    display: inline-block;
    z-index: 7;
    width: 45px;
    height: 45px;
    line-height: 47px;
    margin: 8px 0 8px -23px;
    text-align: center;
    font-size: 12px;
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    vertical-align: middle
}

.qna_list .question {
    display: inline-block;
    width: 646px;
    margin-left: 18px;
    color: #555;
    line-height: 23px;
    vertical-align: middle
}

.qna_list .question .new {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: -3px 0 0 3px;
    vertical-align: middle;
    background-position: 0 -200px;
}

.qna_list .question .mobile {
    display: inline-block;
    width: 11px;
    height: 15px;
    margin: -3px 0 0 4px;
    vertical-align: middle;
    background-position: 0 -1625px;
}

.qna_list .question .btn_report {
    display: inline-block;
    width: 48px;
    height: 22px;
    text-indent: 0;
    margin-left: 11px;
    padding: 0 0 0 15px;
    font-size: 12px;
    color: #767676;
    background-position: 0 -1599px
}

.qna_list .btn_del {
    display: inline-block;
    margin-left: 14px;
    padding: 1px 0 0 20px;
    text-indent: 0;
    color: #f6451c;
    font-size: 12px;
    background-position: 0 -1275px;
    line-height: 14px;
}

.qna_list .btn_mod {
    display: inline-block;
    margin-left: 20px;
    padding: 1px 0 0 20px;
    text-indent: 0;
    color: #f6451c;
    font-size: 12px;
    background-position: 0 -1300px;
    line-height: 14px;
}

.qna_list .btn_mod::before {
    position: absolute;
    left: 67px;
    top: 0;
    content: '';
    display: inline-block;
    width: 1px;
    height: 14px;
    background-color: #dedede;
}

.qna_list .my_btns {
    position: relative;
    clear: both;
    width: 300px;
    display: block;
    margin: 10px 0 0 46px;
    height: 15px;
    z-index: 5;
}

.qna_list .my_btns .btn_del {
    margin-left: 0;
    margin-right: 21px
}

.qna_list .tags {
    display: block;
    position: relative;
    z-index: 5;
}

.qna_list .tags .tag {
    display: inline-block;
    max-width: 100%;
    height: 28px;
    line-height: 28px;
    margin: 10px 10px 0 0;
    padding: 0 10px;
    color: #767676;
    background-color: #eee;
}

.qna_list .tags .tag:hover {
    color: #555;
    background-color: #ddd;
}

.qna_list .answer_list {
    display: none;
    width: 100%;
    background-color: #e1f1f0;
    overflow: hidden;
}

.qna_list .answer_list li {
    width: 1002px;
    margin: 0 20px;
    padding: 16px 0;
    overflow: hidden;
}

.qna_list .answer_list li .flag {
    float: left;
    width: 34px;
    height: 34px;
    line-height: 34px;
    margin-left: 21px;
    background-color: #33d8c6;
    font-size: 12px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
}

.qna_list .answer_list li .answer {
    float: left;
    width: 600px;
    margin-left: 14px;
    padding-top: 6px;
    color: #555;
    line-height: 23px;
}

.qna_list .answer_list .writer {
    right: 0;
}

.qna_list .open .answer_list {
    display: block;
}

.board_view {
    position: relative;
    width: 1240px;
    margin: 0 auto;
}

.board_view .line_btm {
    position: relative;
    display: block;
    width: 100%;
    height: 7px;
    background-color: #e8e8e8;
    border-radius: 4px;
}

.board_view .view_header {
    position: relative;
    width: 960px;
    padding: 34px 0 32px 60px;
    border-bottom: 1px solid #dedede
}

.board_view .view_header h4 {
    padding: 3px 0 23px;
    font-size: 24px;
    color: #333;
    font-weight: normal;
}

.board_view .view_header .category {
    position: absolute;
    left: 0;
    top: 24px;
    display: inline-block;
    width: 45px;
    height: 45px;
    line-height: 47px;
    text-align: center;
    font-size: 12px;
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
}

.board_view.event_view .view_header .category {
    color: #00d4c3
}

.board_view .view_header .time,
.board_view .view_header .view,
.board_view .view_header .vote,
.board_view .view_header .like,
.board_view .view_header .cmt {
    display: inline-block;
    height: 15px;
    margin-right: 13px;
    padding-top: 2px;
    text-indent: 0;
    font-family: 'Roboto', 'NEXONLv1Gothic';
    color: #969696;
}

.board_view .view_header .time {
    margin-right: 15px;
    padding-top: 1px;
    padding-left: 21px;
    background-position: 0 -225px
}

.board_view .view_header .time .kor {
    font-size: 13px
}

.board_view .view_header .view {
    padding-left: 24px;
    background-position: 0 -250px
}

.board_view .view_header .like {
    padding-left: 22px;
    background-position: 0 -300px
}

.board_view .view_header .vote {
    padding-left: 24px;
    background-position: 0 -1375px
}

.board_view .view_header .cmt {
    padding-left: 21px;
    background-position: 0 -325px
}

.board_view .view_header .new {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: -4px 0 0 0;
    background-position: 0 -200px;
    vertical-align: middle
}

.board_view .view_header .mobile {
    display: inline-block;
    width: 11px;
    height: 15px;
    margin: -3px 0 0 0px;
    vertical-align: middle;
    background-position: 0 -1625px;
}

.board_view .view_header .btns {
    position: absolute;
    right: 80px;
    bottom: 24px
}

.board_view .view_header .btn_report {
    width: 83px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #d4d4d4;
    color: #f94342;
}

.board_view .view_header .btn_report:hover {
    border-color: #f94342
}

.board_view .view_header .btn_report::before {
    content: '';
    display: inline-block;
    width: 19px;
    height: 19px;
    margin: -5px 8px 0 0;
    background-position: 0 -975px;
    vertical-align: middle
}

.board_view .view_header .btn_like {
    width: 83px;
    height: 30px;
    line-height: 31px;
    border: 1px solid #d4d4d4;
    color: #00d4c3;
}

.board_view .view_header .btn_like:hover {
    border-color: #00d4c3
}

.board_view .view_header .btn_like::before {
    content: '';
    display: inline-block;
    width: 19px;
    height: 19px;
    margin: -3px 8px 0 0;
    background-position: 0 -1000px;
    vertical-align: middle
}

.board_view .view_body {
    position: relative;
    width: 940px;
}

.board_view .view_body .notice1 {
    width: 840px;
    height: 96px;
    margin-bottom: 60px;
    padding: 64px 0 0 70px;
    background: url('../../../../assets/img/sub/bg_notice_tit1.png') no-repeat;
}

.board_view .view_body .notice1 h4 {
    position: relative;
    display: inline-block;
    color: #0088e8;
    font-size: 38px;
    line-height: 52px
}

.board_view .view_body .notice1 h4::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-block;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background-color: #0088e8;
}

.board_view .view_body .notice1 h4::after {
    content: '';
    position: absolute;
    right: -15px;
    bottom: 0;
    display: inline-block;
    width: 13px;
    height: 4px;
    background: url('../../../../assets/img/sub/bg_notice_dot1.png') no-repeat;
}

.board_view .view_body .notice2 {
    width: 840px;
    height: 100px;
    margin-bottom: 60px;
    padding: 60px 0 0 70px;
    font-size: 38px;
    background: url('../../../../assets/img/sub/bg_notice_tit2.png') no-repeat;
}

.board_view .view_body .notice2 h4 {
    position: relative;
    display: inline-block;
    color: #cc0a6a;
    font-size: 38px;
    line-height: 52px
}

.board_view .view_body .notice2 h4::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-block;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background-color: #cc0a6a;
}

.board_view .view_body .notice2 h4::after {
    content: '';
    position: absolute;
    right: -15px;
    bottom: 0;
    display: inline-block;
    width: 13px;
    height: 4px;
    background: url('../../../../assets/img/sub/bg_notice_dot2.png') no-repeat;
}

.board_view .view_body .view_content {
    width: 910px;
    min-height: 240px;
    padding: 50px 0 0 30px;
    line-height: 1.6;
    color: #666
}

.event_view .view_body .view_content,
.monthly .view_body .view_content {
    width: 940px;
    padding-left: 0;
}

.board_view .view_body img {
    max-width: 100%;
}

.board_view .view_body .btns {
    width: 910px;
    margin: 70px 0 40px 30px;
    text-align: center
}

.board_view .view_body .btn_copy {
    height: 60px;
    line-height: 60px;
    margin: 0 3px 0 2px;
    padding: 0 45px;
    font-size: 18px;
    color: #333;
    background-color: #f4f4f4;
    border: 1px solid #d4d4d4;
    border-radius: 29px;
}

.board_view .view_body .btn_copy::after {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    margin: -4px 0 0 10px;
    background-position: 0 -950px;
    vertical-align: middle
}

.board_view .view_body .btn_copy:hover {
    color: #00d4c3;
    border-color: #33d8c6;
}

.board_view .view_body .btn_copy:hover::after {
    background-position: -25px -950px;
}

.board_view .view_body .btn_tw {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: 0 3px 0 2px;
    background-position: 0 -800px;
    background-color: #f4f4f4;
    border: 1px solid #d4d4d4;
    border-radius: 50%;
}

.board_view .view_body .btn_tw:hover {
    border-color: #00aeff;
}

.board_view .view_body .btn_fb {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: 0 3px 0 2px;
    background-position: 0 -875px;
    background-color: #f4f4f4;
    border: 1px solid #d4d4d4;
    border-radius: 50%;
}

.board_view .view_body .btn_fb:hover {
    border-color: #376fe1;
}

.view_content .poll {
    position: relative;
    width: 100%;
    text-align: center;
}

.view_content .poll li {
    position: relative;
    height: 60px;
    margin-bottom: 10px;
    background-color: #e8e8e8;
    border-radius: 30px;
    text-align: left;
    overflow: hidden;
}

.view_content .poll li a {
    display: block;
    width: 100%;
    height: 100%;
}

.view_content .poll .bar {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    height: 60px;
    background-color: #ffe329;
    border-radius: 30px;
    z-index: 1;
}

.view_content .poll em {
    position: absolute;
    left: 62px;
    top: 0;
    line-height: 60px;
    font-size: 16px;
    color: #333;
    font-style: normal;
    z-index: 3;
}

.view_content .poll .per {
    float: right;
    position: relative;
    z-index: 3;
    width: 95px;
    font-size: 24px;
    line-height: 60px;
    color: #00d4c3;
    font-family: 'Roboto';
}

.view_content .poll .vote {
    float: right;
    position: relative;
    z-index: 3;
    width: 82px;
    margin-top: 21px;
    padding-left: 25px;
    color: #969696;
    text-indent: 0;
    background-position: 0 -1349px
}

.view_content .poll .chk {
    position: absolute;
    left: 15px;
    top: 15px;
    z-index: 3;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #d9d8d4;
    background-position: 1000px 0
}

.view_content .poll li .on .chk {
    background-position: 0 -1425px;
}

.view_content .poll li.king em {
    font-size: 23px
}

.view_content .poll .rank {
    position: absolute;
    left: 7px;
    top: 7px;
    z-index: 3;
    display: block;
    width: 46px;
    height: 46px;
    text-indent: -9999px;
    overflow: hidden;
    background: url('../../../../assets/img/sub/spr_number.png') no-repeat;
}

.view_content .poll .rank2 {
    background-position: -50px 0
}

.view_content .poll .rank3 {
    background-position: 0 -50px
}

.view_content .poll .rank4 {
    background-position: -50px -50px
}

.view_content .poll .rank5 {
    background-position: 0 -100px
}

.view_content .poll .rank6 {
    background-position: -50px -100px
}

.view_content .poll .rank7 {
    background-position: 0 -150px
}

.view_content .poll .rank8 {
    background-position: -50px -150px
}

.view_content .poll .rank9 {
    background-position: 0 -200px
}

.view_content .poll .rank10 {
    background-position: -50px -200px
}

.view_content .poll .btn_area {
    display: block;
    width: 100%;
    margin-top: 30px;
}

.view_content .poll .btn_area a,
.view_content .poll .btn_area button {
    margin: 0 3px;
}

.view_content .poll .btn_vote {
    position: relative;
    width: 300px;
    height: 60px;
    line-height: 62px;
    color: #fff;
    font-size: 22px;
    background-color: #29d3c0;
    border-radius: 30px;
    vertical-align: top
}

.view_content .poll .btn_vote:hover {
    background-color: #00aaac;
}

.view_content .poll .btn_vote::after {
    content: '';
    display: inline-block;
    width: 25px;
    height: 22px;
    margin: -6px 0 0 18px;
    background-position: 0 -1400px;
    vertical-align: middle
}

.view_content .poll .btn_king {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 60px;
    line-height: 62px;
    color: #fff;
    font-size: 22px;
    background-color: #a7a7a7;
    border-radius: 30px;
    text-align: center;
    vertical-align: top
}

.view_content .poll .btn_king:hover {
    background-color: #888888;
}

.view_content .poll .btn_king::after {
    content: '';
    display: inline-block;
    width: 21px;
    height: 22px;
    margin: -6px 0 0 18px;
    background-position: -50px -1400px;
    vertical-align: middle
}

.board_view.sketchbook .view_content img {
    display: block;
    margin-bottom: 30px;
}

.aside {
    position: absolute;
    right: 0;
    top: 0;
    width: 220px;
    height: 100%;
    background-color: #eee;
}

.aside .writer {
    width: 190px;
    margin: 0 auto;
    padding-top: 20px;
    background: url('../../../../assets/img/sub/bg_writer.png') no-repeat center 20px;
    text-align: center
}

.aside .writer .avatar {
    display: block;
    text-align: center;
    height: 160px;
    line-height: 160px;
}

.aside .writer .avatar.no {
    display: block;
    text-align: center;
    height: 70px;
    padding-top: 90px;
    line-height: 19px;
    color: #ffe329;
    font-size: 12px;
    background: url('../../../../assets/img/sub/bg_writer2.png') no-repeat center top
}

.aside .writer .selected_name {
    clear: both;
    width: 188px;
    height: 58px;
    line-height: 58px;
    margin-top: 13px;
    color: #555;
    border: 1px solid #d4d4d4;
    border-radius: 30px;
}

.aside .writer .selected_name .server {
    display: inline-block;
    width: auto;
    height: auto;
    line-height: 58px;
    top: auto;
    font-size: 14px;
    background-color: transparent;
    color: #00d4c3
}

.aside .writer .selectbox {
    display: block;
    width: 190px;
    height: 58px;
    margin-top: 13px;
}

.aside .writer .selectbox .btn_select {
    width: 190px;
    padding: 0 20px;
    line-height: 60px;
    color: #555;
    background-color: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 30px;
}

.aside .writer .selectbox.show .btn_select {
    border-radius: 30px 30px 0 0;
    border-bottom: 1px solid #eee;
}

.aside .writer .selectbox ul {
    position: relative;
    width: 188px;
    max-height: 180px;
    overflow-x: hidden;
    overflow-y: auto;
    top: 0;
    padding: 10px 0;
    background-color: #fff;
    border-top: 0;
    text-align: left;
    border-bottom: 1px solid #eee
}

.aside .writer .selectbox li:hover a {
    color: #555;
    background-color: #e0f1ef;
}

.aside .writer .selectbox li a {
    padding: 8px 6px 6px 16px
}

.aside .writer .happy {
    color: #00d4c3
}

.aside .writer .dream {
    color: #9963ef
}

.aside .writer .selectbox .btm {
    display: none;
    width: 188px;
    height: 30px;
    border-radius: 0 0 30px 30px;
    border: 1px solid #d4d4d4;
    border-top: 0;
    background-color: #fff;
}

.aside .writer .selectbox.show .btm {
    display: block;
}

.aside .writer .avatar img {
    display: inline-block;
    vertical-align: middle
}

.aside .writer .server {
    position: relative;
    display: block;
    width: 50px;
    height: 26px;
    line-height: 26px;
    margin: 0 auto;
    top: -16px;
    color: #ffe329;
    font-size: 12px;
    border-radius: 13px;
    background-color: #16a5ff;
}

.aside .writer .server.happy {
    background-color: #33d8c6;
}

.aside .writer .server.dream {
    background-color: #9963ef;
}

.aside .writer .level_icon {
    position: relative;
    display: inline-block;
    width: 40px;
    line-height: 24px;
    color: #767676;
    vertical-align: top;
    text-align: left
}

.aside .writer .lv0 {
    margin-left: -20px
}

.aside .writer .level_icon img {
    display: inline-block;
    max-width: 18px;
    max-height: 18px;
    vertical-align: top
}

.aside .writer .name {
    display: inline-block;
    margin: -2px 0 0 0;
    color: #767676;
    line-height: 24px;
    vertical-align: top
}

.aside .writer .name {
    display: inline-block;
    margin-top: -2px;
    color: #333
}

.aside .writer .name:hover {
    text-decoration: underline;
    cursor: pointer;
}

.news .aside .writer .name:hover,
.aside .writer.gm .name:hover {
    text-decoration: none;
    cursor: default;
}

.aside .writer::after {
    content: '';
    display: block;
    width: 190px;
    height: 7px;
    margin-top: 20px;
    background-color: #e8e8e8;
    border-radius: 4px;
}

.aside .noti {
    margin-top: 20px;
    padding: 0 15px;
}

.aside .noti dt {
    margin-bottom: 12px;
    font-size: 12px;
    color: #f94242;
}

.aside .noti dt .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 7px;
    vertical-align: middle;
    margin-top: -3px;
    background-position: 0 -1650px
}

.aside .noti dd {
    margin-bottom: 4px;
    font-size: 12px;
    color: #969696;
    line-height: 16px;
    padding-left: 8px;
    background: url('../../../../assets/img/sub/bul_dot1.png') no-repeat left 6px;
}

.aside .noti dd em {
    font-style: normal;
    color: #555;
}

.board_view .aside .btns {
    position: absolute;
    left: 15px;
    bottom: 0;
    width: 190px;
    padding-bottom: 47px;
}

.board_view .aside .btns .btn_prev,
.board_view .aside .btns .btn_next {
    position: relative;
    display: block;
    padding: 20px 0;
}

.board_view .aside .btns .no_prev,
.board_view .aside .btns .no_next {
    position: relative;
    display: block;
    padding: 20px 0 20px 46px;
}

.board_view .aside .btns .btn_prev,
.board_view .aside .btns .no_prev {
    border-bottom: 1px solid #dedede
}

.board_view .aside .btns .align {
    display: inline-block;
    width: 1px;
    height: 36px;
    vertical-align: middle
}

.board_view .aside .btns .tit {
    display: inline-block;
    width: 130px;
    color: #333;
    line-height: 20px;
    padding-left: 46px;
    vertical-align: middle;
    max-height: 36px;
    overflow: hidden;
}

.board_view .aside .btns .tit em {
    margin-right: 5px;
    color: #00d4c3;
    font-style: normal
}

.board_view .aside .btns .btn_prev .icon,
.board_view .aside .btns .no_prev .icon {
    position: absolute;
    left: 0;
    top: 20px;
    width: 36px;
    height: 36px;
    background-position: 0 -600px;
}

.board_view .aside .btns .btn_prev:hover .icon {
    background-position: -50px -600px;
}

.board_view .aside .btns .btn_next .icon,
.board_view .aside .btns .no_next .icon {
    position: absolute;
    left: 0;
    top: 20px;
    width: 36px;
    height: 36px;
    background-position: 0 -650px;
}

.board_view .aside .btns .btn_next:hover .icon {
    background-position: -50px -650px;
}

.board_view .aside .btns .line {
    display: block;
    width: 100%;
    height: 7px;
    margin: 10px 0 30px;
    background-color: #e8e8e8;
    border-radius: 4px;
}

.board_view .aside .btns a,
.board_write .aside .btns a {
    margin-top: 8px
}

.board_view .aside .btns .btn_list {
    display: block;
    height: 60px;
    line-height: 59px;
    font-size: 18px;
    margin-top: 0;
    color: #fff;
    background-color: #585858;
    text-align: center;
    border-radius: 29px;
    border: 1px solid #585858;
    box-sizing: border-box
}

.board_view .aside .btns .btn_list:hover {
    background-color: #333;
    border: 1px solid #333;
}

.board_view .aside .btns .btn_write,
.board_write .aside .btns .btn_submit {
    display: block;
    height: 60px;
    line-height: 62px;
    font-size: 18px;
    color: #fff;
    background-color: #29d3c0;
    text-align: center;
    border-radius: 29px;
    border: 1px solid #29d3c0;
    box-sizing: border-box
}

.board_view .aside .btns .btn_write:hover,
.board_write .aside .btns .btn_submit:hover {
    background-color: #00aaac;
    border: 1px solid #00aaac;
}

.board_view .aside .btns .btn_delete,
.board_view .aside .btns .btn_modify,
.board_write .aside .btns .btn_cancel {
    display: block;
    height: 58px;
    line-height: 60px;
    font-size: 18px;
    color: #333;
    background-color: #eeeeee;
    border: 1px solid #cacaca;
    text-align: center;
    border-radius: 29px;
}

.board_view .aside .btns .btn_delete:hover,
.board_view .aside .btns .btn_modify:hover,
.board_write .aside .btns .btn_cancel:hover {
    background-color: #cdcdcd;
}

.fixed_aside_top .aside .writer {
    position: fixed;
    right: auto;
    left: 50%;
    top: 90px;
    margin-left: 415px;
}

.fixed_aside_btm .aside .btns {
    position: fixed;
    bottom: 0;
    left: 50%;
    margin-left: 415px;
    padding-bottom: 20px
}

.board_comment {
    position: relative;
    clear: both;
    width: 100%;
    padding-bottom: 60px
}

.board_comment::before {
    content: '';
    display: block;
    width: 100%;
    height: 7px;
    margin-top: 20px;
    background-color: #e8e8e8;
    border-radius: 4px;
}

.board_comment h5 {
    padding: 30px 0 8px;
    font-size: 14px;
    color: #666;
    font-weight: normal
}

.board_comment h5 em {
    margin-left: 3px;
    color: #00d4c3;
    font-style: normal;
}

.board_comment .write {
    overflow: hidden;
}

.board_comment .write .textarea {
    position: relative;
    float: left;
    width: 839px;
    height: 98px;
    border: 1px solid #dedede;
    border-right: 0;
    background-color: #fff;
}

.board_comment .write textarea {
    width: 783px;
    height: 58px;
    padding: 20px 28px;
    background-color: #fff;
    border: 0;
    color: #555;
}

.board_comment .write label {
    position: absolute;
    left: 28px;
    top: 20px;
    color: #555;
}

.board_comment .write .submit {
    position: relative;
    float: right;
    width: 100px;
    height: 100px;
    background-color: #33d8c6;
}

.board_comment .write .submit:hover {
    background-color: #00aaac;
}

.board_comment .write .submit .btn_submit {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100px;
    height: 100px;
    line-height: 86px;
    padding-bottom: 12px;
    font-size: 18px;
    color: #fff;
    text-align: center
}

.board_comment .write .submit .byte {
    display: block;
    padding-top: 58px;
    text-align: center;
    font-size: 14px;
    font-family: 'Roboto';
    color: #ffe329;
}

.board_comment .write .submit .byte em {
    font-style: normal;
    color: #fff
}

.board_comment .list {
    padding-top: 20px
}

.board_comment .list li {
    position: relative;
    padding: 21px 0 21px 150px;
    border-bottom: 1px solid #dedede;
}

.board_comment .list li .time {
    position: absolute;
    left: 0;
    top: 24px;
    display: inline-block;
    width: 105px;
    padding: 1px 0 0 23px;
    font-family: 'Roboto';
    color: #969696;
    text-indent: 0;
    background-position: 0 -225px;
    line-height: 14px;
    vertical-align: middle
}

.board_comment .list li .time::after {
    content: '';
    position: absolute;
    right: 0;
    top: 6px;
    display: block;
    width: 19px;
    height: 4px;
    background-color: #d9d9d9;
    border-radius: 2px;
}

.board_comment .list li .server {
    display: inline-block;
    margin: -2px 8px 0 0;
    vertical-align: top;
    width: 42px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    text-align: center;
    background-color: #e8e8e8;
    border-radius: 12px;
}

.board_comment .list li .server.happy {
    color: #00d4c3
}

.board_comment .list li .server.dream {
    color: #9963ef
}

.board_comment .list li .level_icon {
    position: relative;
    display: inline-block;
    width: 40px;
    line-height: 24px;
    color: #767676;
    vertical-align: top
}

.board_comment .list li .lv0 {
    margin-left: -20px
}

.board_comment .list li .level_icon img {
    display: inline-block;
    max-width: 18px;
    max-height: 18px;
    vertical-align: top
}

.board_comment .list li .name {
    display: inline-block;
    margin: -2px 0 0 0;
    color: #767676;
    line-height: 24px;
    vertical-align: top;
    font-size: 14px
}

.board_comment .list li .name:hover {
    text-decoration: underline;
    cursor: pointer;
}

.board_comment .list li .cmt {
    display: block;
    padding-top: 5px;
    max-width: 740px;
    color: #555;
    line-height: 22px;
    font-size: 14px
}

.board_comment .list li .mobile {
    display: inline-block;
    width: 11px;
    height: 15px;
    margin: -3px 0 0 4px;
    vertical-align: middle;
    background-position: 0 -1625px;
}

.board_comment .list li .btn_del {
    position: absolute;
    right: 0;
    top: 16px;
    width: 32px;
    height: 32px;
    background-position: 0 -700px;
}

.board_comment .paging {
    position: relative;
    width: 100%;
    margin: 55px auto 0;
    text-align: center
}

.board_comment .paging a {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 37px;
    margin: 0 1px 0 0;
    padding: 0;
    font-size: 14px;
    vertical-align: middle;
    background-color: #f4f4f4;
    border: 1px solid #d4d4d4;
    border-radius: 50%;
    font-family: 'Roboto';
    color: #767676;
}

.board_comment .paging a:hover {
    color: #fff;
    background-color: #33d8c6;
    border-color: #33d8c6
}

.board_comment .paging em {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 36px;
    margin: 0 1px 0 0;
    padding: 0;
    font-style: normal;
    color: #fff;
    font-family: 'Roboto';
    background-color: #33d8c6;
    border-color: #33d8c6;
    border-radius: 50%;
    vertical-align: middle
}

.board_comment .paging button {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 0 2px 0 2px;
    vertical-align: middle
}

.board_comment .paging .btn_first,
.board_comment .paging .btn_first:hover {
    background-position: 0 -575px;
}

.board_comment .paging .btn_prev,
.board_comment .paging .btn_prev:hover {
    margin-right: 18px;
    background-position: -25px -575px;
}

.board_comment .paging .btn_next,
.board_comment .paging .btn_next:hover {
    margin-left: 17px;
    background-position: -50px -575px;
}

.board_comment .paging .btn_last,
.board_comment .paging .btn_last:hover {
    background-position: -75px -575px;
}

.tag_wrap {
    width: 970px;
    margin-bottom: 40px;
    border-bottom: 1px solid #dedede;
    background-color: #fff;
    overflow: hidden;
}

.tag_wrap h4 {
    float: left;
    width: 53px;
    height: 30px;
    margin: 10px 0 10px 30px;
    background-position: 0 -750px;
}

.tag_wrap .input {
    position: relative;
    float: left;
}

.tag_wrap .input .ip_text {
    width: 828px;
    height: 27px;
    line-height: 30px;
    margin-top: 10px;
    padding: 3px 15px 0;
    color: #767676;
    border: 0;
}

.tag_wrap .input label {
    position: absolute;
    left: 15px;
    top: 10px;
    line-height: 34px;
    color: #b1b1b1
}

.tag_wrap .tag_list {
    width: 840px;
    padding: 10px 0 10px 100px;
    overflow: hidden;
    border-top: 1px solid #eee
}

.tag_wrap .tag_list li {
    float: left;
    margin: 5px 8px 5px 0;
    color: #767676
}

.tag_wrap .tag_list .btn_del {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    background-position: 0 -1225px;
}

.tag_wrap .tag_list .tag {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
    border: 1px solid #eee;
}

.qna_list .tag_wrap .input .ip_text {
    width: 1120px;
}

.qna_list .tag_wrap .tag_list {
    clear: both;
    width: 1140px;
    padding: 10px 0 10px 100px;
    overflow: hidden;
    border-top: 1px solid #eee
}

.board_view .tag_wrap {
    margin: 60px 0 -30px 0;
    border-bottom: 0;
    background-color: transparent;
}

.board_view .tag_wrap h4 {
    float: left;
    width: 53px;
    height: 30px;
    margin: 0 20px 0 30px;
    background-position: 0 -750px;
}

.board_view .tag_wrap .tag_list {
    float: left;
    width: 840px;
    padding: 0;
    overflow: hidden;
    border-top: 0
}

.board_view .tag_wrap .tag_list .tag {
    height: 30px;
    line-height: 30px;
    border: 0;
    background-color: #eeeeee;
    color: #767676
}

.board_view .tag_wrap .tag_list li {
    margin: 0 8px 10px 0
}

.board_view .tag_wrap .tag_list .tag:hover {
    background-color: #dddddd;
    color: #555
}

.board_write {
    position: relative;
    width: 1240px;
    margin: 0 auto;
}

.board_write .line_btm {
    position: relative;
    display: block;
    width: 100%;
    height: 7px;
    background-color: #e8e8e8;
    border-radius: 4px;
}

.board_write .write_header {
    position: relative;
    width: 970px;
    padding: 20px 0
}

.board_write .write_header .selectbox {
    float: left;
    width: 160px;
    height: 58px;
    margin-right: 20px;
}

.board_write .write_header .selectbox .btn_select {
    width: 160px;
    padding: 0 20px;
    line-height: 60px;
    color: #555;
    background-color: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 30px;
}

.board_write .write_header .selectbox.show .btn_select {
    border-radius: 30px 30px 0 0;
    border-bottom: 1px solid #eee;
}

.board_write .write_header .selectbox ul {
    position: relative;
    width: 158px;
    top: 0;
    padding: 10px 0;
    background-color: #fff;
    border-top: 0;
    border-bottom: 1px solid #eee
}

.board_write .write_header .selectbox li:hover a {
    color: #555;
    background-color: #e0f1ef;
}

.board_write .write_header .selectbox li a {
    padding: 8px 6px 6px 16px
}

.board_write .write_header .selectbox .btm {
    display: none;
    position: relative;
    z-index: 5;
    width: 158px;
    height: 30px;
    border-radius: 0 0 30px 30px;
    border: 1px solid #d4d4d4;
    border-top: 0;
    background-color: #fff;
}

.board_write .write_header .selectbox.show .btm {
    display: block;
}

.board_write .write_header .title {
    position: relative;
    float: left;
    width: 790px;
    font-size: 20px;
    color: #333;
}

.board_write .write_header .ip_text {
    width: 100%;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    color: #333;
    border: 0;
    background-color: #f4f4f4;
}

.board_write .write_header label {
    position: absolute;
    left: 0;
    top: 20px;
    color: #b1b1b1
}

.board_write .aside {
    position: absolute;
    right: 0;
    top: 0;
    width: 220px;
    height: 100%;
    background-color: #eee;
}

.board_write .aside .btns {
    position: absolute;
    left: 15px;
    bottom: 7px;
    width: 190px;
    padding-bottom: 40px;
}

.board_sorting {
    position: relative;
    width: 1240px;
    margin: 26px auto 10px;
    text-align: right
}

.board_sorting em.sort1 {
    display: inline-block;
    height: 60px;
    line-height: 62px;
    padding: 0 17px 0 16px;
    border: 1px solid #d4d4d4;
    color: #a6a6a6;
    box-sizing: border-box;
    text-align: center;
    border-radius: 30px;
    font-style: normal
}

.board_sorting em.sort1 span {
    color: #4b8fff
}

.board_sorting ul.sort1 {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    overflow: hidden;
}

.board_sorting ul.sort1 li {
    float: left;
    margin-left: 10px;
}

.board_sorting ul.sort1 li a {
    display: block;
    width: 60px;
    height: 60px;
    line-height: 62px;
    border: 1px solid #d4d4d4;
    color: #555;
    box-sizing: border-box;
    text-align: center;
    border-radius: 50%;
    font-style: normal;
    background-color: #fff;
}

.board_sorting ul.sort1 li a:hover {
    color: #00d4c3
}

.board_sorting ul.sort1 li.active a {
    background-color: #33d8c6;
    border-color: #33d8c6;
    color: #fff
}

.board_sorting .selectbox {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: top;
    width: 190px;
    height: 58px;
    margin-left: 3px;
}

.board_sorting .selectbox .btn_select {
    width: 190px;
    padding: 0 20px;
    line-height: 60px;
    color: #555;
    background-color: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 30px;
}

.board_sorting .selectbox.show .btn_select {
    border-radius: 30px 30px 0 0;
    border-bottom: 1px solid #eee;
}

.board_sorting .selectbox ul {
    position: relative;
    width: 188px;
    top: 0;
    z-index: 5;
    max-height: 140px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 0;
    background-color: #fff;
    border-top: 0;
    text-align: left;
    border-bottom: 1px solid #eee
}

.board_sorting .selectbox li:hover a {
    color: #555;
    background-color: #e0f1ef;
}

.board_sorting .selectbox li a {
    padding: 8px 6px 6px 16px
}

.board_sorting .selectbox .btm {
    display: none;
    position: relative;
    z-index: 5;
    width: 188px;
    height: 30px;
    border-radius: 0 0 30px 30px;
    border: 1px solid #d4d4d4;
    border-top: 0;
    background-color: #fff;
}

.board_sorting .selectbox.show .btm {
    display: block;
}

.ranking_func {
    position: relative;
    width: 1240px;
    height: 200px;
    margin: 36px auto 0;
    background: url('../../../../assets/img/sub/bg_ranking_func.png') no-repeat center top;
    text-align: center
}

.ranking_func .medal {
    position: absolute;
    left: 367px;
    top: 0;
    display: block;
    width: 62px;
    height: 72px;
    
}

.rank_zzang .ranking_func .medal {
    display: none
}

.rank_total .ranking_func .medal {
    background-position: 0 0;
}

.rank_ladder .ranking_func .medal {
    background-position: 0 -100px;
}

.rank_ladder_s .ranking_func .medal {
    background-position: 0 -200px;
}

.rank_winning .ranking_func .medal {
    background-position: 0 -300px;
}

.rank_winning_s .ranking_func .medal {
    background-position: 0 -400px;
}

.ranking_func h4 {
    margin-left: 0;
    padding: 22px 0 12px;
    font-size: 36px;
    color: #ffe329;
    font-family: 'Roboto';
    font-weight: 700;
    letter-spacing: 0.012em
}

.ranking_func .txt {
    color: #fff;
    padding-bottom: 25px
}

.ranking_func .search {
    position: relative;
    float: left;
    width: 390px;
    height: 60px;
    margin-left: 325px;
    background-color: #fff;
    border-radius: 30px;
}

.ranking_func .search legend {
    float: left;
    display: block;
    width: 105px;
    color: #767676;
    text-indent: 0;
    font-size: 14px;
    height: 60px;
    line-height: 62px;
    text-align: center
}

.ranking_func .search .input {
    position: relative;
    float: left;
    width: 235px;
    height: 30px;
    line-height: 32px;
    margin-top: 15px;
    border-left: 1px solid #e5e5e5;
    text-align: left;
}

.ranking_func .search .ip_text {
    width: 250px;
    height: 30px;
    line-height: 32px;
    padding: 0 20px;
    border: 0;
    background-color: #fff;
    box-sizing: border-box;
    font-size: 18px;
    color: #333
}

.ranking_func .search label {
    position: absolute;
    left: 20px;
    top: 0;
    font-size: 18px;
    color: #b1b1b1
}

.ranking_func .search .btn_search {
    position: absolute;
    right: 10px;
    top: 10px;
    display: inline-block;
    width: 40px;
    height: 40px;
    background-position: 0 -1475px
}

.ranking_func .search .btn_search:hover {
    background-position: -50px -1475px
}

.ranking_func .my_rank {
    position: relative;
    float: left;
    margin-left: 18px;
    width: 180px;
}

.ranking_func .btn_my_rank {
    width: 180px;
    height: 60px;
    line-height: 62px;
    background-color: #ffe329;
    font-size: 18px;
    color: #000;
    font-weight: 700;
    border-radius: 30px;
    box-shadow: 0px 3px 16px 3px rgba(0, 0, 0, 0.3);
}

.ranking_func .btn_my_rank:hover {
    background-color: #ffbf26;
}

.ranking_func .my_rank .noti {
    position: absolute;
    left: -50px;
    bottom: -46px;
    width: 280px;
    height: 32px;
    line-height: 34px;
    background-color: #f94242;
    color: #fff;
    border-radius: 16px;
}

.ranking_func .my_rank .noti span {
    position: absolute;
    left: 50%;
    top: -9px;
    width: 9px;
    height: 9px;
    margin-left: -4px;
    background: url('../../../../assets/img/sub/bg_tooltip.png') no-repeat center top;
}

.ranking_func .my_rank .noti::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: -3px 12px 0 0;
    background-position: 0 -1525px;
    vertical-align: middle
}


/* 정보 - 소개 */
#contents.info {
    overflow: hidden;
}

.game_intro {
    position: relative;
    width: 1240px;
    margin: 0 auto;
}

.game_intro .primary {
    position: relative;
    height: 945px;
    overflow: hidden;
}

.game_intro .pt1 {
    position: absolute;
    display: block;
    z-index: 7;
    background: url('../../../../assets/img/info/intro/pattern.png') no-repeat
}

.game_intro .pt2 {
    position: absolute;
    display: block;
    z-index: 3;
}

.game_intro .primary .desc {
    position: relative;
    z-index: 10;
    padding-top: 445px;
    font-size: 16px;
    color: #0daaac;
    line-height: 26px;
    text-align: center;
    transform: rotate(0.01deg)
}

.game_intro .primary .desc em {
    font-style: normal;
    color: #226afd;
}

.game_intro .primary .pt2 {
    transform: rotate(-45deg)
}

.game_intro .ptn1 {
    left: 431px;
    top: 120px;
    width: 56px;
    height: 56px;
    transform: rotate(0.01deg)
}

.game_intro .ptn2 {
    left: 358px;
    top: 713px;
    width: 56px;
    height: 56px;
    background-position: -75px 0;
    transform: rotate(0.01deg)
}

.game_intro .ptn3 {
    left: 123px;
    top: 445px;
    width: 69px;
    height: 68px;
    background-position: -150px 0;
    transform: rotate(0.01deg)
}

.game_intro .ptn4 {
    left: 744px;
    top: 672px;
    width: 69px;
    height: 68px;
    background-position: -225px 0;
    transform: rotate(0.01deg)
}

.game_intro .ptn5 {
    left: 832px;
    top: 725px;
    width: 69px;
    height: 68px;
    background-position: -300px 0;
    transform: rotate(0.01deg)
}

.game_intro .primary .circle {
    position: absolute;
    display: block;
    z-index: 3;
    left: 310px;
    top: 104px;
    width: 620px;
    height: 620px;
    background: url('../../../../assets/img/info/intro/circle.png') no-repeat;
    ;
    transform: rotate(1deg)
}

.game_intro .ptn6 {
    left: 720px;
    top: 265px;
    z-index: 1;
    width: 300px;
    height: 68px;
    border-radius: 34px;
    background-color: #bcffeb;
    transform: rotate(0.01deg)
}

.game_intro .ptn7 {
    left: 854px;
    top: 115px;
    z-index: 2;
    width: 132px;
    height: 34px;
    border-radius: 18px;
    background: #ffbc46 url('../../../../assets/img/info/intro/ptn_gradient1.png') no-repeat;
    transform: rotate(0.01deg)
}

.game_intro .ptn8 {
    left: 848px;
    top: 124px;
    width: 70px;
    height: 33px;
    border-radius: 34px;
    background-color: #ffe329;
    ;
    transform: rotate(0.01deg)
}

.game_intro .ptn9 {
    left: 816px;
    top: 174px;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background-color: #ffe329;
    ;
    transform: rotate(0.01deg)
}

.game_intro .ptn10 {
    left: 669px;
    top: 95px;
    width: 178px;
    height: 34px;
    border-radius: 18px;
    background: #4694ff url('../../../../assets/img/info/intro/ptn_gradient2.png') no-repeat;
    transform: rotate(0.01deg)
}

.game_intro .ptn11 {
    left: 653px;
    top: 186px;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background-color: #af3ce7;
    transform: rotate(0.01deg)
}

.game_intro .ptn12 {
    left: 272px;
    top: 564px;
    width: 132px;
    height: 34px;
    border-radius: 18px;
    background: #ffbc46 url('../../../../assets/img/info/intro/ptn_gradient1.png') no-repeat -25px 0;
    transform: rotate(0.01deg)
}

.game_intro .ptn13 {
    left: 248px;
    top: 636px;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background-color: #f15f9c;
    transform: rotate(0.01deg)
}

.game_intro .ptn14 {
    left: 332px;
    top: 634px;
    width: 160px;
    height: 68px;
    border-radius: 34px;
    background-color: #4e84ff;
    transform: rotate(0.01deg)
}

.game_intro .ptn15 {
    left: 347px;
    top: 670px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #7e96ff;
    transform: rotate(0.01deg)
}

.game_intro .ptn16 {
    left: 22px;
    top: 596px;
    z-index: 1;
    width: 322px;
    height: 116px;
    border-radius: 58px;
    background-color: #bcffeb;
    transform: rotate(0.01deg)
}

.game_intro .primary .cha {
    position: absolute;
    display: block;
    z-index: 8;
    transform: rotate(0.01deg)
}

.game_intro .primary .cha1 {
    left: -10px;
    top: 34px;
    width: 450px;
    height: 463px;
    background: url('../../../../assets/img/info/intro/cha1.png') no-repeat
}

.game_intro .primary .cha2 {
    left: 742px;
    top: 260px;
    width: 458px;
    height: 507px;
    background: url('../../../../assets/img/info/intro/cha2.png') no-repeat
}

.game_intro .primary .tt {
    position: absolute;
    display: block;
    z-index: 8;
    background: url('../../../../assets/img/logogbm.png') no-repeat;
    transform: rotate(0.01deg);
    background-size: contain;
}

.game_intro .primary .t1 {
    left: 395px;
    top: 265px;
    width: 197px;
    height: 56px;
}

.game_intro .primary .t2 {
    left: 611px;
    top: 265px;
    width: 236px;
    height: 56px;
    background-position: -216px 0
}

.game_intro .primary .t3 {
    left: 446px;
    top: 263px;
    width: 350px;
    height: 210px;
    background-position: 0px -24px;
}

.game_intro .world_view {
    position: relative;
    height: 780px;
}

.game_intro .world_view h4 {
    position: absolute;
    left: -20px;
    top: 47px;
    padding: 50px 0 0 71px;
    color: #000;
    font-size: 16px;
    font-weight: normal;
    line-height: 22px;
    z-index: 7;
}

.game_intro .world_view h4 span {
    position: relative;
}

.game_intro .world_view h4 .eng {
    display: block;
    font-family: 'Roboto';
    font-weight: 700;
}

.game_intro .world_view h4 .circle {
    position: absolute;
    left: 0;
    top: 0;
    width: 136px;
    height: 136px;
    border-radius: 50%;
    background-color: #ffee36;
}

.world_view .dots {
    position: absolute;
    left: 154px;
    top: 118px;
    z-index: 7;
}

.world_view .dots li {
    float: left;
    margin: 0 6px;
    text-align: center
}

.world_view .dots a {
    display: block;
    width: 7px;
    height: 7px;
    background-color: #fff;
    border-radius: 4px;
    text-indent: -9999px;
    overflow: hidden;
    transition: width .15s ease
}

.world_view .dots .active a {
    width: 40px;
    background-color: #ffee36;
    transform-origin: "center center"
}

.world_view .nav {
    display: block;
    position: absolute;
    left: 328px;
    top: 94px;
    width: 54px;
    height: 54px;
    background: url('../../../../assets/img/info/intro/nav.png') no-repeat;
    z-index: 7;
    text-indent: -9999px;
    overflow: hidden;
}

.world_view .btn_v_prev:hover {
    background-position: -55px 0
}

.world_view .btn_v_next {
    left: 392px;
    background-position: 0 -55px
}

.world_view .btn_v_next:hover {
    background-position: -55px -55px
}

.world_view .pager {
    position: absolute;
    left: 48px;
    bottom: 125px;
    z-index: 7;
    color: #fff;
    font-size: 20px;
    font-family: 'Roboto';
}

.world_view .pager .total {
    opacity: 0.3;
    font-weight: normal;
}

.world_view .pager strong {
    font-size: 50px;
}

.world_view .world {
    display: none;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -870px;
    width: 1740px;
    height: 701px;
    padding-top: 228px;
    background-color: #4e84ff;
    z-index: 5;
    box-sizing: border-box;
    color: #fff;
    line-height: 31px;
}

.world_view .world h5 {
    position: absolute;
    top: 223px;
    font-size: 78px;
    font-weight: normal;
    line-height: 92px;
    z-index: 5;
    transform: rotate(0.01deg)
}

.world_view .world .desc {
    position: absolute;
    top: 438px;
    font-size: 18px;
    line-height: 32px;
    z-index: 5;
    transform: rotate(0.01deg)
}

.world_view .world .desc u {
    display: inline-block;
    position: relative;
    text-decoration: none
}

.world_view .world .desc u::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 6px;
    width: 100%;
    height: 12px;
    z-index: -1;
    background-color: #000;
    opacity: 0.3;
}

.world_view .world .circle {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 2;
    transform: rotate(0.01deg)
}

.world_view .world .bg {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 1740px;
    height: 701px;
    z-index: -1;
    overflow: hidden;
}

.world_view .world .bg span {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(0.01deg)
}

.world_view #world1 {
    background-color: #4e84ff;
}

.world_view #world1 .bg span {
    background: url('../../../../assets/img/info/intro/bg_world1.png') no-repeat;
}

.world_view #world1 h5 {
    left: 296px;
}

.world_view #world1 .desc {
    left: 452px;
}

.world_view #world1 .obj1 {
    position: absolute;
    display: block;
    background: url('../../../../assets/img/info/intro/obj1.png') no-repeat;
    z-index: 2;
    transform: rotate(0.01deg)
}

.world_view #world1 .circle1 {
    position: absolute;
    left: 1007px;
    top: -68px;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    overflow: hidden;
}

.world_view #world1 .circle1 .circle {
    background-color: #ff8fee;
}

.world_view #world1 .circle2 {
    position: absolute;
    left: 1317px;
    top: 393px;
    width: 226px;
    height: 226px;
    border-radius: 50%;
    overflow: hidden;
}

.world_view #world1 .circle2 .circle {
    background-color: #9df128;
}

.world_view #world1 .obj1_1 {
    left: -63px;
    top: -18px;
    width: 542px;
    height: 517px;
}

.world_view #world1 .obj1_2 {
    left: -46px;
    top: 48px;
    width: 306px;
    height: 200px;
    background-position: -600px 0
}

.world_view #world1 .obj1_3 {
    left: 158px;
    top: 482px;
    width: 59px;
    height: 57px;
    background-position: -600px -250px
}

.world_view #world1 .obj1_4 {
    left: 247px;
    top: 457px;
    width: 36px;
    height: 31px;
    background-position: -700px -250px
}

.world_view #world1 .obj1_5 {
    left: 878px;
    top: 47px;
    width: 65px;
    height: 60px;
    background-position: -750px -250px
}

.world_view #world1 .obj1_6 {
    left: 935px;
    top: 59px;
    width: 50px;
    height: 50px;
    background-position: -850px -250px
}

.world_view #world1 .obj1_7 {
    left: 865px;
    top: 582px;
    width: 90px;
    height: 60px;
    background-position: -600px -350px
}

.world_view #world1 .obj1_8 {
    left: 910px;
    top: 608px;
    width: 65px;
    height: 60px;
    background-position: -700px -350px
}

.world_view #world1 .obj1_9 {
    left: 1036px;
    top: 368px;
    width: 53px;
    height: 30px;
    background-position: -800px -350px
}

.world_view #world1 .obj1_10 {
    left: 1475px;
    top: 330px;
    width: 45px;
    height: 60px;
    background-position: -900px -350px
}

.world_view #world2 {
    background-color: #5fb0ff;
}

.world_view #world2 .bg span {
    background: url('../../../../assets/img/info/intro/bg_world2.png') no-repeat;
}

.world_view #world2 h5 {
    left: 722px;
}

.world_view #world2 .desc {
    left: 838px;
}

.world_view #world2 .obj2 {
    position: absolute;
    display: block;
    background: url('../../../../assets/img/info/intro/obj2.png') no-repeat;
    z-index: 2;
    transform: rotate(0.01deg)
}

.world_view #world2 .circle1 {
    position: absolute;
    left: 345px;
    top: 185px;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    overflow: hidden;
}

.world_view #world2 .circle1 .circle {
    background-color: #ff9d3f;
}

.world_view #world2 .circle2 {
    position: absolute;
    left: 1256px;
    top: -30px;
    width: 226px;
    height: 226px;
    border-radius: 50%;
    overflow: hidden;
}

.world_view #world2 .circle2 .circle {
    background-color: #b744ed;
}

.world_view #world2 .obj2_1 {
    left: 36px;
    top: 88px;
    width: 445px;
    height: 364px;
}

.world_view #world2 .obj2_2 {
    left: 16px;
    top: 26px;
    width: 181px;
    height: 210px;
    background-position: 0 -400px
}

.world_view #world2 .obj2_3 {
    left: 179px;
    top: 433px;
    width: 50px;
    height: 50px;
    background-position: -200px -400px
}

.world_view #world2 .obj2_4 {
    left: 179px;
    top: 470px;
    width: 21px;
    height: 21px;
    background-position: -200px -500px
}

.world_view #world2 .obj2_5 {
    left: 271px;
    top: 271px;
    width: 14px;
    height: 14px;
    background-position: -200px -550px
}

.world_view #world2 .obj2_6 {
    left: 853px;
    top: 106px;
    width: 14px;
    height: 14px;
    background-position: -200px -550px
}

.world_view #world2 .obj2_7 {
    left: 1166px;
    top: 365px;
    width: 14px;
    height: 14px;
    background-position: -200px -550px
}

.world_view #world2 .obj2_8 {
    left: 1194px;
    top: 328px;
    width: 21px;
    height: 21px;
    background-position: -200px -500px
}

.world_view #world2 .obj2_9 {
    left: 1255px;
    top: 585px;
    width: 50px;
    height: 50px;
    background-position: -200px -400px
}

.world_view #world2 .obj2_10 {
    left: 1452px;
    top: 419px;
    width: 44px;
    height: 44px;
    background-position: -200px -450px
}

.world_view #world2 .obj2_11 {
    left: 1455px;
    top: 106px;
    width: 44px;
    height: 44px;
    background-position: -200px -450px
}

.world_view #world2 .obj2_12 {
    left: 1412px;
    top: 323px;
    width: 21px;
    height: 21px;
    background-position: -200px -500px
}

.world_view #world2 .obj2_13 {
    left: 625px;
    top: 528px;
    width: 73px;
    height: 200px;
    background-position: -250px -400px
}

.world_view #world2 .obj2_14 {
    left: 682px;
    top: 609px;
    width: 48px;
    height: 119px;
    background-position: -350px -400px
}

.world_view #world3 {
    background-color: #a187e0;
}

.world_view #world3 .bg span {
    background: url('../../../../assets/img/info/intro/bg_world3.png') no-repeat;
}

.world_view #world3 h5 {
    left: 296px;
}

.world_view #world3 .desc {
    left: 448px;
}

.world_view #world3 .obj3 {
    position: absolute;
    display: block;
    background: url('../../../../assets/img/info/intro/obj3.png') no-repeat;
    z-index: 2;
    transform: rotate(0.01deg)
}

.world_view #world3 .circle1 {
    position: absolute;
    left: 1007px;
    top: -68px;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    overflow: hidden;
}

.world_view #world3 .circle1 .circle {
    background-color: #d76d7c;
}

.world_view #world3 .circle2 {
    position: absolute;
    left: 1317px;
    top: 393px;
    width: 226px;
    height: 226px;
    border-radius: 50%;
    overflow: hidden;
}

.world_view #world3 .circle2 .circle {
    background-color: #6dc782;
}

.world_view #world3 .obj3_1 {
    left: 32px;
    top: 112px;
    width: 447px;
    height: 365px;
}

.world_view #world3 .obj3_2 {
    left: 38px;
    top: 18px;
    width: 272px;
    height: 220px;
    background-position: 0 -400px
}

.world_view #world3 .obj3_3 {
    left: 932px;
    top: 527px;
    width: 290px;
    height: 200px;
    background-position: -300px -400px
}

.world_view #world3 .obj3_4 {
    left: 1067px;
    top: -24px;
    width: 43px;
    height: 36px;
    background-position: -500px 0
}

.world_view #world3 .obj3_5 {
    left: 893px;
    top: 97px;
    width: 56px;
    height: 30px;
    background-position: -500px -50px
}

.world_view #world3 .obj3_6 {
    left: 932px;
    top: 148px;
    width: 47px;
    height: 38px;
    background-position: -500px -100px
}

.world_view #world4 {
    background-color: #eb655b;
}

.world_view #world4 .bg span {
    background: url('../../../../assets/img/info/intro/bg_world4.png') no-repeat;
}

.world_view #world4 h5 {
    left: 402px;
}

.world_view #world4 .desc {
    left: 798px;
}

.world_view #world4 .obj4 {
    position: absolute;
    display: block;
    background: url('../../../../assets/img/info/intro/obj4.png') no-repeat;
    z-index: 2;
    transform: rotate(0.01deg)
}

.world_view #world4 .circle1 {
    position: absolute;
    left: 1007px;
    top: -68px;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    overflow: hidden;
}

.world_view #world4 .circle1 .circle {
    background-color: #6dd7cc;
}

.world_view #world4 .circle2 {
    position: absolute;
    left: 464px;
    top: 428px;
    width: 226px;
    height: 226px;
    border-radius: 50%;
    overflow: hidden;
}

.world_view #world4 .circle2 .circle {
    background-color: #6dc782;
}

.world_view #world4 .obj4_1 {
    left: 32px;
    top: 32px;
    width: 402px;
    height: 440px;
}

.world_view #world4 .obj4_2 {
    left: 4px;
    top: 62px;
    width: 180px;
    height: 173px;
    background-position: -450px 0
}

.world_view #world4 .obj4_3 {
    left: 1428px;
    top: 184px;
    width: 55px;
    height: 57px;
    background-position: -450px -200px
}

.world_view #world4 .obj4_4 {
    left: 660px;
    top: 488px;
    width: 55px;
    height: 57px;
    background-position: -450px -200px
}

.world_view #world4 .obj4_5 {
    left: 846px;
    top: -33px;
    width: 74px;
    height: 104px;
    background-position: -450px -300px
}

.world_view #world4 .obj4_6 {
    left: 964px;
    top: 98px;
    width: 65px;
    height: 83px;
    background-position: -550px -300px
}

.world_view #world4 .obj4_7 {
    left: 316px;
    top: 436px;
    width: 52px;
    height: 52px;
    background-position: -550px -200px
}

.world_view #world4 .obj4_8 {
    left: 351px;
    top: 510px;
    width: 62px;
    height: 62px;
    background-position: -650px -200px
}

.world_view #world4 .obj4_9 {
    left: 799px;
    top: 647px;
    width: 75px;
    height: 74px;
    background-position: -450px -450px
}

.world_view #world4 .obj4_10 {
    left: 888px;
    top: 660px;
    width: 67px;
    height: 62px;
    background-position: -550px -450px
}

.world_view #world5 {
    background-color: #ff9c3c;
}

.world_view #world5 .bg span {
    background: url('../../../../assets/img/info/intro/bg_world5.png') no-repeat;
}

.world_view #world5 h5 {
    left: 296px;
}

.world_view #world5 .desc {
    left: 839px;
    top: 270px
}

.world_view #world5 .obj5 {
    position: absolute;
    display: block;
    background: url('../../../../assets/img/info/intro/obj5.png') no-repeat;
    z-index: 2;
    transform: rotate(0.01deg)
}

.world_view #world5 .circle1 {
    position: absolute;
    left: 480px;
    top: 317px;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    overflow: hidden;
}

.world_view #world5 .circle1 .circle {
    background-color: #3fe6ff;
}

.world_view #world5 .circle2 {
    position: absolute;
    left: 1109px;
    top: -59px;
    width: 226px;
    height: 226px;
    border-radius: 50%;
    overflow: hidden;
}

.world_view #world5 .circle2 .circle {
    background-color: #ed4470;
}

.world_view #world5 .circle3 {
    position: absolute;
    left: 1344px;
    top: 31px;
    width: 274px;
    height: 274px;
    border-radius: 50%;
    overflow: hidden;
}

.world_view #world5 .circle3 .circle {
    background-color: #ff432e;
}

.world_view #world5 .obj5_1 {
    left: -50px;
    top: -6px;
    width: 551px;
    height: 521px;
}

.world_view #world5 .obj5_2 {
    left: 4px;
    top: -15px;
    width: 292px;
    height: 280px;
    background-position: -600px 0
}

.world_view #world5 .obj5_3 {
    left: 17px;
    top: 35px;
    width: 292px;
    height: 280px;
    background-position: -600px -300px
}

.world_view #world5 .obj5_4 {
    left: 913px;
    top: 149px;
    width: 38px;
    height: 37px;
    background-position: 0 -550px
}

.world_view #world5 .obj5_5 {
    left: 890px;
    top: 201px;
    width: 23px;
    height: 23px;
    background-position: -50px -550px
}

.world_view #world5 .obj5_6 {
    left: 979px;
    top: 680px;
    width: 66px;
    height: 65px;
    background-position: -100px -550px
}

.world_view #world5 .obj5_7 {
    left: 802px;
    top: 116px;
    width: 57px;
    height: 55px;
    background-position: -200px -550px
}

.world_view #world5 .obj5_8 {
    left: 359px;
    top: 468px;
    width: 61px;
    height: 61px;
    background-position: -300px -550px
}

.world_view #world6 {
    background-color: #ff829f;
}

.world_view #world6 .bg span {
    background: url('../../../../assets/img/info/intro/bg_world6.png') no-repeat;
}

.world_view #world6 h5 {
    left: 722px;
    top: 162px
}

.world_view #world6 .desc {
    left: 838px;
    top: 470px;
}

.world_view #world6 .obj6 {
    position: absolute;
    display: block;
    background: url('../../../../assets/img/info/intro/obj6.png') no-repeat;
    z-index: 2;
    transform: rotate(0.01deg)
}

.world_view #world6 .circle1 {
    position: absolute;
    left: 345px;
    top: 185px;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    overflow: hidden;
}

.world_view #world6 .circle1 .circle {
    background-color: #37eaba;
}

.world_view #world6 .circle2 {
    position: absolute;
    left: 1163px;
    top: 41px;
    width: 226px;
    height: 226px;
    border-radius: 50%;
    overflow: hidden;
}

.world_view #world6 .circle2 .circle {
    background-color: #b744ed;
}

.world_view #world6 .obj6_1 {
    left: -108px;
    top: -22px;
    width: 695px;
    height: 517px;
}

.world_view #world6 .obj6_2 {
    left: 30px;
    top: -18px;
    width: 247px;
    height: 298px;
    background-position: 0 -550px
}

.world_view #world6 .obj6_3 {
    left: 1314px;
    top: -108px;
    width: 163px;
    height: 335px;
    background-position: -300px -550px;
    z-index: 1;
}


.account_wrap {
    position: relative;
    width: 1240px;
    margin: 0 auto;
}

.account_wrap .txt1 {
    margin-top: 36px;
    font-size: 16px;
    color: #555;
    line-height: 26px;
}

.account_wrap .txt1 em {
    font-style: normal;
    color: #00d4c3
}

.account_wrap .btn1 {
    display: inline-block;
    width: 160px;
    height: 36px;
    line-height: 38px;
    margin-top: 10px;
    font-size: 16px;
    color: #fff;
    background-color: #adadad;
}

.account_wrap .btn1.top {
    position: absolute;
    left: 50%;
    top: 104px;
    margin-left: -80px;
}

.account_wrap .btn1.btm {
    position: absolute;
    left: 50%;
    bottom: 24px;
    margin-left: -80px;
}

.account_wrap .btn1:hover {
    background-color: #585858;
}

.account_wrap .account_info .icon {
    background: url('../../../../assets/img/sub/spr_myblock.png') no-repeat;
}

.account_wrap .account_info {
    margin: 40px 0 65px;
    border-top: 7px solid #e8e8e8;
    border-bottom: 7px solid #e8e8e8;
}

.account_wrap .account_info.account0 {
    height: 310px;
    padding-top: 50px;
    background-color: #eeeeee;
    text-align: center
}

.account_wrap .account_info .no_data {
    padding-top: 138px;
    font-size: 20px;
    color: #333;
    background: url('../../../../assets/img/sub/bg_nodata-1.png') no-repeat center top;
}

.account_wrap .account_info .btn_login {
    display: inline-block;
    width: 130px;
    height: 60px;
    line-height: 62px;
    margin-top: 32px;
    font-size: 18px;
    color: #333;
    box-sizing: border-box;
    background-color: #e8e8e8;
    border: 1px solid #d4d4d4;
    text-align: center;
    border-radius: 30px;
}

.account_wrap .account_info .btn_login:hover {
    background-color: #d4d4d4;
}

.account_wrap .account_info table {
    width: 100%;
}

.account_wrap .account_info thead th {
    position: relative;
    height: 68px;
    font-size: 16px;
    color: #333;
    background-color: #eee;
    border-bottom: 2px solid #dedede;
    font-weight: normal;
    border-left: 1px solid #dedede;
}

.account_wrap .account_info thead th:first-child {
    border-left: 0
}

.account_wrap .account_info th:first-child {
    border-right: 1px solid #dedede
}

.account_wrap .account_info td:nth-child(4) {
    border-left: 1px solid #dedede;
    border-right: 1px solid #dedede
}

.account_wrap .account_info tbody th {
    line-height: 18px
}

.account_wrap .account_info tbody th,
.account_wrap .account_info tbody td {
    padding: 27px 0;
    font-size: 14px;
    color: #333;
    font-weight: normal;
    text-align: center;
    border-bottom: 1px solid #dedede
}

.account_wrap .account_info tbody tr:last-child th,
.account_wrap .account_info tr:last-child td {
    border-bottom: 0
}

.account_wrap .account_info td {
    position: relative;
    border-bottom: 1px solid #dedede
}

.account_wrap .account_info thead th.me,
.account_wrap .account_info td.me {
    background-color: #e0f1ef;
}

.account_wrap .account_info td .line {
    position: absolute;
    left: -1px;
    top: 20px;
    width: 1px;
    border-left: 1px solid #dedede;
    vertical-align: middle;
}

.account_wrap .account_info .available .icon {
    display: inline-block;
    width: 42px;
    height: 42px;
    margin: 0 2px 0 3px
}

.account_wrap .account_info .shop {
    background-position: 0 -50px
}

.account_wrap .account_info .web {
    background-position: 0 -100px
}

.account_wrap .account_info .game_no {
    background-position: -50px 0
}

.account_wrap .account_info .shop_no {
    background-position: -50px -50px
}

.account_wrap .account_info .web_no {
    background-position: -50px -100px
}

.account_wrap .account_info h5 {
    color: #555;
    margin-bottom: 10px;
}

.account_wrap .account_info td.type3 {
    vertical-align: top
}

.account_wrap .account_info td.type2 .howto,
.account_wrap .account_info td.type4 .howto {
    margin-top: -30px
}

.account_wrap .account_info .howto {
    display: block;
    width: 180px;
    margin: 0 auto;
}

.account_wrap .account_info .howto li {
    padding: 3px 0;
    font-size: 13px
}

.account_wrap .account_info .or {
    display: block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    margin: 25px auto;
    border-radius: 50%;
    color: #fff;
    background-color: #33d8c6;
    font-family: 'Roboto';
    font-weight: 700;
}

.account_wrap .account_info .only {
    font-size: 12px;
    color: #9c9c9c;
    line-height: 18px;
    margin-top: 10px;
}

.account_wrap .account_info .only em {
    font-style: normal;
    color: #f95555;
}

.account_wrap .account_info .btn_gid {
    margin-top: 12px
}

.account_wrap .account_info .noti {
    position: absolute;
    right: 11px;
    top: 20px;
    z-index: 5;
    text-align: left
}

.account_wrap .account_info .btn_noti {
    display: block;
    width: 24px;
    height: 24px;
    background-position: 0 -150px;
    text-indent: 0;
    overflow: visible
}

.account_wrap .account_info .btn_noti:hover {
    background-position: -50px -150px
}

.account_wrap .account_info .noti:hover .layer {
    display: block;
}

.account_wrap .account_info .noti .layer {
    position: absolute;
    right: -2px;
    top: 36px;
    display: none;
    width: 307px;
    padding: 20px 20px;
    text-indent: 0;
    font-size: 12px;
    color: #fff;
    line-height: 18px;
    background-color: #f94242;
    border-radius: 18px
}

.account_wrap .account_info .noti .layer strong {
    font-size: 14px;
    display: block;
    margin: 20px 0 7px;
    border-top: 1px solid #e23232;
    padding-top: 20px
}

.account_wrap .account_info .noti .layer strong:first-child {
    margin-top: 0;
    border-top: 0;
    padding-top: 0
}

.account_wrap .account_info .noti .layer em {
    font-style: normal;
    color: #ffe329;
}

.account_wrap .account_info .noti .layer .add {
    display: block;
    margin-top: 20px;
    padding: 0 0 0 8px;
    color: #630a0a;
    text-indent: -8px;
}

.account_wrap .account_info .noti .layer .arrow {
    position: absolute;
    right: 14px;
    top: -8px;
    display: inline-block;
    width: 9px;
    height: 9px;
    background: url('../../../../assets/img/sub/bg_tooltip.png') no-repeat;
}

.account_wrap .noti2 {
    position: relative;
    height: 100px;
    padding: 22px 0 18px 196px;
    background-color: #eee;
    border-radius: 70px
}

.account_wrap .noti2 p {
    position: absolute;
    left: 25px;
    top: 20px;
}

.account_wrap .noti2 li {
    height: 28px;
    line-height: 28px;
    padding: 0 0 8px;
    color: #9c9c9c
}

.account_wrap .noti2 li em {
    display: inline-block;
    width: 78px;
    font-style: normal;
    color: #646464
}


/* 정보 - 도감 */
.item_book {
    position: relative;
    width: 1240px;
    margin: 0 auto;
}

.search_func {
    position: relative;
    height: 60px;
    padding: 20px 20px 19px;
    background-color: #e8e8e8;
    border-bottom: 1px solid #dedede;
    display: flex;
}

.search_func .selectbox {
    float: left;
    margin-right: 6px;
}

.search_func .search {
    position: relative;
    float: left;
    height: 60px;
    margin-left: 23px;
    padding: 0 28px;
    border-left: 1px solid #d4d4d4;
    border-right: 1px solid #d4d4d4
}

.search_func .search .input {
    position: relative;
    display: block;
    width: 330px;
    height: 60px;
    line-height: 60px;
    border-radius: 30px;
    background-color: #fff;
    border: 1px solid #d4d4d4;
    box-sizing: border-box;
    overflow: hidden;
}

.search_func .search .input input {
    width: 236px;
    height: 58px;
    line-height: 62px;
    margin-left: 28px;
    border: 0;
    color: #333;
    vertical-align: top
}

.search_func .search label {
    position: absolute;
    left: 28px;
    top: 0;
    line-height: 62px;
    color: #969696;
}

.search_func .search .btn_search {
    position: absolute;
    right: 30px;
    top: 0;
    width: 59px;
    height: 58px;
    background-position: 0 -1025px;
}

.search_func .sorting {
    float: left;
    padding-left: 12px
}

.search_func .sorting .btn_sorting {
    display: inline-block;
    margin: 22px 0 0 8px;
    padding-left: 30px;
    text-indent: 0;
    color: #969696;
    background-position: 0 -1707px;
}

.search_func .sorting .btn_sorting.on,
.search_func .sorting .btn_sorting:hover {
    color: #00d4c3;
    background-position: 0 -1432px
}

.item_book .item_list li {
    position: relative;
    border-bottom: 1px solid #dedede
}

.item_book .item_list li:last-child {
    border: 0;
    padding-bottom: 8px;
    background: url('../../../../assets/img/sub/bg_line_table.png') no-repeat center bottom
}

.item_book .item_list .info {
    position: relative;
    height: 109px;
    cursor: pointer;
}

.item_book .item_list li .info .inner {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 36px 0 0 180px;
    box-sizing: border-box;
}

.item_book .item_list li .info:hover {
    background-color: #e0f1ef;
}

.item_book .item_list li .info:hover .name {
    text-decoration: underline
}

.item_book .item_list .tmb {
    position: absolute;
    left: 20px;
    top: 8px;
    display: block;
    width: 160px;
    line-height: 109px;
    text-align: center
}

.item_book .item_list .tmb img {
    line-height: 109px;
    vertical-align: middle
}

.item_book .item_list .name {
    display: inline-block;
    font-size: 16px;
    color: #333;
}

.item_book .item_list .cmt {
    display: inline-block;
    font-size: 16px;
    color: #0dc4c3;
    margin-left: 2px
}

.item_book .item_list .category {
    display: block;
    font-size: 12px;
    color: #969696;
    margin-top: 13px;
}

.item_book .item_list .category .arrow {
    display: inline-block;
    width: 5px;
    height: 8px;
    margin: 2px 4px 0 5px;
    vertical-align: top;
    background-position: 0 -1725px;
}

.item_book .item_list .btn_view {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: top;
    margin: -1px 0 0 6px;
    background-position: 0 -1675px;
}

.item_book .item_list .on .btn_view {
    background-position: -25px -1675px;
}

.item_book .item_list .like {
    position: absolute;
    right: 30px;
    top: 46px;
    display: inline-block;
    width: 88px;
    color: #969696;
    font-family: 'Roboto';
}

.item_book .item_list .like::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 7px;
    background-position: 0 -275px;
    vertical-align: middle
}

.item_book .item_list .bar::after {
    content: '';
    display: inline-block;
    position: absolute;
    left: -37px;
    top: 6px;
    width: 19px;
    height: 4px;
    background-color: #d9d9d9;
    border-radius: 2px;
    vertical-align: middle
}

.item_book .item_list .btn_like {
    position: absolute;
    right: 30px;
    top: 39px;
    display: inline-block;
    width: 120px;
    height: 32px;
    line-height: 34px;
    color: #969696;
    font-family: 'Roboto';
    background-color: #fff;
    border: 1px solid #d4d4d4
}

.item_book .item_list .btn_like .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: -3px 3px 0 0;
    background-position: 0 -1750px;
    vertical-align: middle
}

.item_book .item_list .btn_like:hover,
.item_book .item_list .btn_like.on {
    color: #00d4c3
}

.item_book .item_list .btn_like:hover .icon,
.item_book .item_list .btn_like.on .icon {
    background-position: -25px -1750px;
}

.item_book .board_comment {
    display: none;
    width: 940px;
    padding: 20px 150px;
    background-color: #eee;
}

.item_book .board_comment::before {
    display: none;
}

.item_book .on .board_comment {
    display: block;
}

.item_book .board_comment li:last-child {
    border: 0
}

.item_book .board_comment .paging {
    margin-top: 0;
    padding: 50px 0;
    border-top: 1px solid #dedede
}

.item_book .board_comment .list li:last-child {
    padding-bottom: 21px !important;
    background-image: none !important
}

.trade_info {
    position: relative;
    box-sizing: border-box;
    padding-top: 18px;
}

.trade_info h4 {
    height: 28px;
    color: #000;
    font-size: 14px;
    font-weight: normal;
}

.trade_info .select {
    position: absolute;
    right: 0;
    top: 6px;
}

.trade_info .i_server button {
    width: 69px;
    height: 30px;
    border-radius: 15px;
    color: #969696;
    border: 1px solid #bebebe
}

.trade_info .i_server button:hover,
.trade_info .i_server button.on {
    height: 32px;
    border-radius: 16px;
    color: #000;
    border: 2px solid #fff;
    background-color: #ffe329;
}

.trade_info .i_term {
    display: inline-block;
    height: 22px;
    margin-left: 12px;
    padding: 5px 0 0 10px;
    border-left: 1px solid #dedede;
    vertical-align: middle;
}

.trade_info .i_term button {
    font-size: 12px;
    color: #969696;
    margin: 0 4px;
}

.trade_info .i_term button:hover,
.trade_info .i_term button.on {
    color: #000;
    border-bottom: 1px solid #000
}

.trade_info .chart_wrap {
    width: 934px;
    height: 180px;
    margin: 0 0 28px 10px
}

.item_type {
    padding: 20px 0;
    background-color: #e8e8e8;
    border-bottom: 1px solid #dedede
}

.item_type .tab1 {
    overflow: hidden;
    margin-left: 20px
}

.item_type .tab1 li {
    position: relative;
    float: left;
    width: 230px;
    height: 48px;
    line-height: 50px;
    margin: 0 10px 10px 0;
    text-align: center;
    border: 1px solid #dedede;
    border-radius: 25px;
    overflow: hidden;
}

.item_type .tab1 li a {
    display: block;
    width: 100%;
    height: 100%;
    color: #555;
    background-color: #eee;
}

.item_type .tab1 li:hover a,
.item_type .tab1 li.active a {
    background-color: #fff;
    color: #00d4c3;
    font-weight: 700
}

.item_type .tab1 li img {
    vertical-align: middle;
    position: absolute;
    left: 8px;
    top: 8px;
}

.item_type .tab1 li .icon {
    position: absolute;
    left: 9px;
    top: 8px;
    width: 32px;
    height: 32px;
    background: url('../../../../assets/img/info/spr_probability.png') no-repeat
}

.item_type .tab1 li.i2 .icon {
    background-position: 0 -50px;
}

.item_type .tab1 li.i3 .icon {
    background-position: 0 -100px;
}

.item_type .tab1 li.i4 .icon {
    background-position: 0 -150px;
}

.item_type .tab1 li.i5 .icon {
    background-position: 0 -200px;
}

.item_type .sub_depth {
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid #dedede;
    overflow: hidden;
}

.item_type h5 {
    position: relative;
    float: left;
    width: 78px;
    margin: 18px 0 0 46px;
    font-weight: normal;
    color: #969696;
}

.item_type h5::after {
    content: '';
    display: inline-block;
    position: absolute;
    right: 0;
    top: 4px;
    width: 18px;
    height: 4px;
    background-color: #d9d9d9;
    border-radius: 2px;
    vertical-align: middle
}

.item_type .tab2 {
    float: left;
    width: 1100px;
    margin-top: 18px;
}

.item_type .tab2 li {
    position: relative;
    float: left;
    margin: 0 22px
}

.item_type .tab2 li::before {
    content: '';
    display: inline-block;
    position: absolute;
    left: -22px;
    top: 4px;
    width: 3px;
    height: 3px;
    background-color: #d4d4d4;
    border-radius: 50%;
    vertical-align: middle
}

.item_type .tab2 li:first-child::before {
    display: none;
}

.item_type .tab2 li a {
    color: #555
}

.item_type .tab2 li:hover a,
.item_type .tab2 li.active a {
    color: #00d4c3;
    font-weight: 700
}

.item_type .sub_depth .no_item {
    float: left;
    width: 1060px;
    margin: 18px 0 0 22px;
    color: #969696
}

.item_book .stit {
    margin: 35px 0 15px;
    color: #333;
    font-weight: normal;
    font-size: 16px;
}

.item_book .stit .arrow {
    display: inline-block;
    width: 5px;
    height: 8px;
    margin: 3px 4px 0 5px;
    vertical-align: top;
    background-position: 0 -1725px;
}

.item_book .mark {
    margin-top: 14px;
    text-align: right
}

.tbl_probability {
    padding-bottom: 7px;
    background: url('../../../../assets/img/sub/bg_line_table.png') no-repeat center bottom
}

.tbl_probability table {
    position: relative;
    width: 100%;
    background: url('../../../../assets/img/sub/bg_line_table.png') no-repeat center top
}

.tbl_probability .col1 {
    width: 390px;
    text-align: left;
    padding-left: 27px;
    box-sizing: border-box
}

.tbl_probability .col2 {
    width: 600px;
    text-align: left;
    padding-left: 27px;
    box-sizing: border-box
}

.tbl_probability .col3 {
    width: 250px;
}

.tbl_probability th {
    height: 62px;
    padding-top: 7px;
    color: #333;
    font-size: 16px;
    font-weight: normal;
    border-bottom: 2px solid #dedede;
}

.tbl_probability td {
    height: 39px;
    line-height: 39px;
    padding: 0 25px;
    border-top: 1px solid #dedede;
}

.tbl_probability td.type {
    padding: 22px;
    vertical-align: top;
    line-height: 27px;
}

.tbl_probability td.type strong {
    font-size: 16px;
    line-height: 27px;
}

.tbl_probability td.align_top {
    vertical-align: baseline;
}

.tbl_probability td.per {
    line-height: 39px;
    padding: 0;
    font-family: 'Roboto';
    text-align: center
}

.tbl_probability td .desc {
    color: #969696
}

.tbl_probability td .sub_desc {
    color: #9c9c9c;
    font-size: 12px;
}

.tbl_probability td .sub_desc em {
    color: #f95555;
}

.tbl_probability .no_data {
    padding: 50px 0 100px;
    font-size: 20px;
    color: #333;
    text-align: center;
    background: url('../../../../assets/img/sub/bg_line_table.png') no-repeat center top
}

.tbl_probability .no_data p {
    padding-top: 200px;
    background: url('../../../../assets/img/sub/bg_nodata-1.png') no-repeat center 60px
}

.tbl_probability.type2 {
    background: none;
    background-color: #eee;
    padding: 5px 30px 25px;
}

.tbl_probability.type2 h5 {
    padding: 30px 0 15px;
}

.tbl_probability.type2 h5:first-child {
    padding-top: 25px;
}

.tbl_probability.type2 h5::before {
    content: '';
    display: inline-block;
    width: 11px;
    height: 5px;
    margin: -3px 8px 0 0;
    background-color: #33d8c6;
    border-radius: 4px;
    vertical-align: middle;
}

.tbl_probability.type2 table {
    background: none;
}

.item_book .line_per .desc:before,
.tbl_probability.type2 table:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 7px;
    background-color: #e2e2e2;
    border-radius: 4px;
}

.item_book .line_per .desc:after,
.tbl_probability.type2 table:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 100%;
    height: 7px;
    background-color: #e2e2e2;
    border-radius: 4px;
}

.tbl_probability.type2 td {
    text-align: center;
}

.tbl_probability.type2 td.align_left {
    padding-left: 140px;
    text-align: left;
}

.tbl_probability.type2+.tbl_probability {
    margin-top: 70px;
}

.tbl_probability.type3 h5 {
    padding: 25px 0 15px;
    font-size: 16px;
}

.tbl_probability.type3 h5:first-child {
    padding-top: 49px;
}

.tbl_probability.type3 h5::before {
    content: '';
    display: inline-block;
    width: 11px;
    height: 5px;
    margin: -3px 8px 0 0;
    background-color: #33d8c6;
    border-radius: 4px;
    vertical-align: middle;
}

.item_book .line_per {
    margin-top: 25px;
}

.item_book h5+.line_per {
    margin-top: 0;
}

.item_book .line_per .desc {
    position: relative;
    margin: 0 0 30px;
    padding: 27px 0 20px;

    font-size: 1.15em;
    text-align: center;
}

.item_book .line_per .desc2 {
    color: #9c9c9c;
    font-size: 12px;
    margin-left: 20px;
    padding-bottom: 5px;
}

.item_book .line_per .desc2 em {
    font-style: normal;
    color: #f95555;
}

.item_book .line_per ul {
    margin: 7px 0 20px;
    padding: 10px 0;
    border: 1px solid #dedede;
    background-color: #eeeeee;
    border-radius: 25px;
    overflow: hidden;
}

.item_book .line_per li {
    float: left;
    width: 12.5%;
    height: 28px;
    line-height: 28px;
    color: #555;
    font-family: 'Roboto';
    box-sizing: border-box;
    text-align: center;
    border-left: 1px solid #dedede
}

.item_book .line_per li:first-child {
    border: 0
}

.tab_4dep.rank {
    font-family: 'Roboto';
    font-size: 18px;
    letter-spacing: -1px
}

.tab_4dep.rank li {
    padding: 0;
    width: 155px;
    text-align: center
}

.item_book .rank_list {
    margin-top: 36px;
    padding-bottom: 7px;
    background: url('../../../../assets/img/sub/bg_line_table.png') no-repeat center bottom
}

.item_book .rank_list table {
    width: 100%;
    text-align: center;
    background: url('../../../../assets/img/sub/bg_line_table.png') no-repeat center top
}

.item_book .rank_list table .col1 {
    width: 112px;
}

.item_book .rank_list table .col2 {
    width: 110px;
    padding-right: 90px;
}

.item_book .rank_list table .col3 {
    width: auto;
}

.item_book .rank_list table .col4 {
    width: 155px;
}

.item_book .rank_list table .col5 {
    width: 155px;
}

.item_book .rank_list table .col6 {
    width: 155px;
}

.item_book .rank_list table .col7 {
    width: 155px;
}

.item_book .rank_list table .col8 {
    width: 155px;
}

.item_book .rank_list th {
    height: 68px;
    padding-top: 7px;
    font-size: 16px;
    color: #333;
    font-weight: normal;
    border-bottom: 2px solid #dedede
}

.item_book .rank_list td {
    height: 40px;
    font-family: 'Roboto';
    font-size: 16px;
    color: #969696;
}

.item_book .rank_list td.rank {
    padding-right: 90px;
    color: #333;
    font-weight: 700
}

.item_book .rank_list tbody tr:nth-child(10n+1) {
    border-top: 2px solid #dedede
}

.item_book .rank_list tbody tr:nth-child(10n+6) {
    border-top: 1px solid #dedede
}

.item_book .rank_list tr:hover td {
    background-color: #e0f1ef;
}

.characters {
    position: relative;
    width: 1240px;
    margin: 0 auto;
}

.characters .stat_info {
    position: absolute;
    right: 0;
    top: 85px;
    overflow: hidden;
}

.characters .stat_info dt {
    float: left;
    color: #555;
    line-height: 28px;
    margin: 0 8px 0 20px
}

.characters .stat_info dd {
    float: left;
}

.cha_list {
    margin-left: -44px;
}

.cha_list::after {
    content: '';
    display: block;
    clear: both
}

.cha_list li {
    position: relative;
    float: left;
    width: 384px;
    height: 384px;
    margin: 44px 0 0 44px;
    text-align: center;
    cursor: pointer;
}

.cha_list li:nth-child(-n+3) {
    margin-top: 0
}

.cha_list .cover {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: url('../../../../assets/img/info/character/cover.png') no-repeat;
}

.cha_list h5 {
    padding-top: 50px;
    font-size: 28px;
    color: #fff;
    font-weight: normal;
    line-height: 30px;
}

.cha_list h6 {
    margin-top: 38px;
    font-family: 'Roboto';
    font-size: 24px;
    font-weight: 700;
    color: #fff
}

.cha_list h6 span {
    position: relative;
    display: inline-block;
    margin-bottom: 4px;
    padding: 1px 0 0 0;
    font-family: 'NEXONLv1Gothic';
    font-size: 14px;
    line-height: 20px;
    font-weight: normal;
    border-top: 2px solid #fff
}

.cha_list h6 span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
}

.cha_list .desc {
    display: block;
    padding-top: 10px;
    color: #fff;
    line-height: 22px;
}

.cha_list .stat {
    position: absolute;
    left: 55px;
    top: 192px;
}

.cha_list .stat dt {
    height: 40px;
    text-align: left;
    color: #fff
}

.cha_list .img {
    position: absolute;
    left: 74px;
    top: 145px;
    display: block;
}

.cha_list .cha2 .img {
    left: 36px;
    top: 142px;
}

.cha_list .cha3 .img {
    left: 32px;
    top: 138px;
}

.cha_list .cha4 .img {
    left: 75px;
    top: 138px;
}

.cha_list .cha5 .img {
    left: 54px;
    top: 154px;
}

.cha_list .cha6 .img {
    left: 75px;
    top: 110px;
}

.cha_list .cha7 .img {
    left: 51px;
    top: 135px;
}

.cha_list .cha8 .img {
    left: 25px;
    top: 90px;
}

.cha_list .cha9 .img {
    left: 5px;
    top: 108px;
}

.cha_list .cha10 .img {
    left: 43px;
    top: 139px;
}

.cha_list .cha11 .img {
    left: 67px;
    top: 139px;
}

.cha_list .cha12 .img {
    left: 55px;
    top: 105px;
}

.cha_list.luxury .cha1 .img {
    left: 65px;
    top: 132px;
}

.cha_list.luxury .cha2 .img {
    left: 43px;
    top: 142px;
}

.cha_list.luxury .cha3 .img {
    left: 53px;
    top: 142px;
}

.cha_list.luxury .cha4 .img {
    left: 64px;
    top: 135px;
}

.cha_list.luxury .cha5 .img {
    left: 62px;
    top: 134px;
}

.cha_list.luxury .cha6 .img {
    left: 27px;
    top: 131px;
}

.cha_list.super .cha1 .img {
    left: 38px;
    top: 115px;
}

.cha_list.super .cha2 .img {
    left: 43px;
    top: 123px;
}

.cha_list.super .cha3 .img {
    left: 46px;
    top: 131px;
}

.cha_list.super .cha4 .img {
    left: 6px;
    top: 119px;
}

.cha_list.super .cha5 .img {
    left: 64px;
    top: 115px;
}

.cha_list.super .cha6 .img {
    left: 62px;
    top: 115px;
}

.cha_list.super .cha7 .img {
    left: 15px;
    top: 80px;
}

.cha_list.super .cha7 .desc {
    line-height: 17px;
}

.cha_list .card {
    position: relative;
    width: 384px;
    height: 384px;
    border-radius: 50%;
    overflow: hidden;
    transform: rotate(0.01deg)
}

.cha_list .face {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background: url('../../../ca/common/info/character/spr_cha.png') no-repeat;
    transform: rotate(0.01deg)
}

.cha_list.luxury .face {
    background: url('../../../ca/common/info/character/spr_cha_lux.png') no-repeat;
}

.cha_list.super .face {
    background: url('../../../ca/common/info/character/spr_cha_sup_5B80E1BD9D0E759E.png') no-repeat;
}

.cha_list .cha1 .face.front {
    background-position: 0 0;
}

.cha_list .cha1 .face.back {
    background-position: -384px 0;
}

.cha_list .cha2 .face.front {
    background-position: 0 -384px;
}

.cha_list .cha2 .face.back {
    background-position: -384px -384px;
}

.cha_list .cha3 .face.front {
    background-position: 0 -768px;
}

.cha_list .cha3 .face.back {
    background-position: -384px -768px;
}

.cha_list .cha4 .face.front {
    background-position: 0 -1152px;
}

.cha_list .cha4 .face.back {
    background-position: -384px -1152px;
}

.cha_list .cha5 .face.front {
    background-position: 0 -1536px;
}

.cha_list .cha5 .face.back {
    background-position: -384px -1536px;
}

.cha_list .cha6 .face.front {
    background-position: 0 -1920px;
}

.cha_list .cha6 .face.back {
    background-position: -384px -1920px;
}

.cha_list .cha7 .face.front {
    background-position: 0 -2304px;
}

.cha_list .cha7 .face.back {
    background-position: -384px -2304px;
}

.cha_list .cha8 .face.front {
    background-position: 0 -2688px;
}

.cha_list .cha8 .face.back {
    background-position: -384px -2688px;
}

.cha_list .cha9 .face.front {
    background-position: 0 -3072px;
}

.cha_list .cha9 .face.back {
    background-position: -384px -3072px;
}

.cha_list .cha10 .face.front {
    background-position: 0 -3456px;
}

.cha_list .cha10 .face.back {
    background-position: -384px -3456px;
}

.cha_list .cha11 .face.front {
    background-position: 0 -3840px;
}

.cha_list .cha11 .face.back {
    background-position: -384px -3840px;
}

.cha_list .cha12 .face.front {
    background-position: 0 -4224px;
}

.cha_list .cha12 .face.back {
    background-position: -384px -4224px;
}



/* 정보 - 배우기 */
.guide_book {
    position: relative;
    width: 1240px;
    margin: 0 auto;
}

.guide_book .btn_guide_menu {
    position: relative;
    z-index: 10;
    float: right;
    width: 176px;
    height: 40px;
    height: 42px;
    margin-top: 37px;
    padding-left: 22px;
    color: #666;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #d4d4d4;
    background: url('../../../../assets/img/info/guide/bg_btn_guide.png') no-repeat 123px -14px;
    text-align: left;
    transition: background .12s ease-out;
    margin-bottom: -79px
}

.guide_book .btn_guide_menu:hover {
    background-color: #e8e8e8;
    background-position: 118px -12px
}

.guide_book .tab_4dep li {
    padding: 0;
    width: 206px;
    text-align: center
}

.guide_book .section {
    position: relative;
    margin-bottom: 20px;
    padding: 0 0 65px 26px;
    overflow: hidden;
    border-bottom: 1px solid #dedede;
    z-index: 5;
}

.guide_book .section:last-child {
    border: 0;
    padding-bottom: 0;
}

.guide_book .section1 {
    width: 1214px;
}

.guide_book h4 {
    margin-left: -26px;
}

.guide_book .section1 h4 {
    margin-top: 36px
}

.guide_book h5 {
    margin-bottom: 25px;
    padding-top: 20px;
    font-size: 22px;
    font-weight: normal;
    color: #333
}

.guide_book .img {
    margin-top: 46px;
    padding-bottom: 22px;
}

.guide_book h5+.img {
    margin-top: 20px;
}

.guide_book .section>h6 {
    padding-top: 5px;
    margin-bottom: 17px;
    font-size: 18px;
    color: #00d4c3
}

.guide_book .txt1 {
    margin-bottom: 14px;
    font-size: 16px;
    color: #333;
    line-height: 24px;
    text-indent: -30px;
    padding-left: 30px
}

.guide_book .txt1.ind0 {
    text-indent: 0;
    padding-left: 0
}

.guide_book .txt1 em {
    color: #00d4c3;
    font-style: normal
}

.guide_book .txt1 span {
    color: #888
}

.guide_book .txt1 strong {
    font-weight: normal;
    color: #333;
    font-size: 22px;
}

.guide_book .txt1 u {
    position: relative;
    display: inline-block;
    text-decoration: none;
    text-indent: 0;
}

.guide_book .txt1 u::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 12px;
    background-color: #ffe329;
    z-index: -1;
}

.guide_book .txt1 .num {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 22px;
    margin: -3px 9px 0 0;
    border-radius: 50%;
    border: 1px solid #33b0a2;
    background-color: #33d8c6;
    color: #fff;
    font-family: 'Roboto';
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    text-indent: 0;
}

.guide_book .txt2 {
    margin: 0 0 9px 34px;
    font-size: 14px;
    color: #666;
    line-height: 22px;
}

.guide_book .txt2::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: -3px 7px 0 0;
    border-radius: 50%;
    background-color: #33d8c6;
    vertical-align: middle
}

.guide_book .txt2 em {
    color: #00d4c3;
    font-style: normal
}

.guide_book .txt3 {
    margin: 0 0 9px 34px;
    font-size: 14px;
    color: #888;
    line-height: 22px;
}

.guide_book .txt3 span {
    color: #f85353
}

.guide_book .str1 {
    display: block;
    margin: 68px 0 8px;
    font-size: 24px;
    color: #f94242;
    font-weight: normal
}

.guide_book .str2 {
    display: block;
    margin-bottom: 26px;
    font-size: 60px;
    color: #f94242;
    font-weight: normal
}

.guide_book .str2 b {
    font-weight: 700
}

.guide_book p.cf {
    margin-top: 4px;
    color: #f94242
}

.guide_book p.cf span {
    display: inline-block;
    width: 47px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    color: #fff;
    background-color: #acacac;
    border-radius: 12px;
    text-indent: 0;
    text-align: center;
    margin: 5px 6px 0 0;
}

.guide_book .section>.list_type1 {
    margin-bottom: 40px;
}

.guide_book .section>.list_type1:last-child {
    margin-bottom: 0
}

.guide_book .section>.list_type1 li {
    color: #666;
    line-height: 22px;
    margin: 7px 0;
    padding-left: 11px;
    text-indent: -11px
}

.guide_book .section>.list_type1 li::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: -3px 7px 0 0;
    background-color: #33d8c6;
    border-radius: 50%;
    vertical-align: middle;
}

.guide_book .section>.list_type1 li span {
    color: #00d4c3
}

.guide_book .tip,
.guide_book .info {
    clear: both;
    position: relative;
    width: 792px;
    padding: 17px 28px 15px;
    color: #888;
    background-color: #e8e8e8;
    line-height: 24px;
    box-sizing: border-box
}

.guide_book .tip p {
    position: relative;
}

.guide_book .tip.num p {
    margin-top: 8px;
}

.guide_book .tip p span {
    color: #f94242;
}

.guide_book .tip .box {
    margin: 15px 0 5px;
    padding: 10px 10px 5px;
    background-color: #f4f4f4;
}

.guide_book .tip .box img {
    vertical-align: middle;
    margin-right: 5px;
}

.guide_book .tip .box em {
    font-style: normal;
    color: #f94242
}

.guide_book .tip .noti,
.guide_book .info h6 {
    position: absolute;
    left: 0;
    top: -50px;
    display: inline-block;
    width: 91px;
    height: 32px;
    line-height: 34px;
    color: #fff;
    font-style: italic;
    font-weight: 700;
    font-size: 13px;
    border-radius: 16px;
    background-color: #f94242;
    text-align: center;
}

.guide_book .tip .noti::before,
.guide_book .info h6::before {
    content: '';
    position: absolute;
    left: 14px;
    bottom: -9px;
    width: 10px;
    height: 10px;
    background: url('../../../../assets/img/sub/bg_tooltip2.png') no-repeat
}

.guide_book .tip strong.ex {
    display: inline-block;
    width: 47px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    color: #fff;
    background-color: #acacac;
    border-radius: 12px;
    text-indent: 0;
    text-align: center;
    margin: -3px 6px 0 0;
    vertical-align: middle;
    font-weight: normal
}

.guide_book .tip span.ex {
    display: inline-block;
    color: #888;
    vertical-align: middle
}

.guide_book .tip span.ex em {
    font-style: normal;
    color: #f94242
}

.guide_book .row {
    float: left;
    margin-right: 18px;
}

.guide_book .row .img {
    margin-top: 0;
}

.guide_book dl.desc {
    font-size: 16px;
    line-height: 25px;
    margin-top: 30px
}

.guide_book dl.desc dt {
    float: left;
    width: 370px;
    margin-left: 55px;
    text-align: center;
    padding-top: 8px
}

.guide_book dl.desc dd {
    float: left;
    width: 758px;
    margin-bottom: 38px;
}

.guide_book dl.desc dd:last-child {
    margin-bottom: 0
}

.guide_book dl.desc dd em {
    font-style: normal;
    color: #00d4c3;
}

.guide_book dl.desc .tip {
    margin-top: 8px;
    font-size: 14px;
}

.guide_book .desc_box {
    overflow: hidden;
    padding-top: 15px
}

.guide_book .desc_box.row {
    width: 1284px;
    margin-left: -44px;
}

.guide_book .desc_box h5 {
    height: 58px;
    line-height: 70px;
    margin: 0;
    padding: 0;
    font-weight: 700;
    color: #00d4c3;
    font-size: 24px;
}

.guide_book .desc_box li {
    position: relative;
    width: 1108px;
    margin-bottom: 46px;
    padding: 40px 39px;
    border: 1px solid #dedede;
    background-color: #fff;
    overflow: hidden;
}

.guide_book .desc_box.row li {
    float: left;
    width: 570px;
    height: 608px;
    margin-left: 44px;
    padding: 0;
    text-align: center;
}

.guide_book .desc_box .img {
    position: relative;
    float: left;
    width: 348px;
    margin: 0;
    padding: 0 0 40px 0;
    overflow: hidden;
    text-align: center
}

.guide_book .desc_box .img.round {
    cursor: pointer;
}

.guide_book .desc_box .img.round .cover {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -285px;
    display: block;
    width: 570px;
    height: 349px;
    background: url('../../../../assets/img/info/guide/cover_round.png') no-repeat;
    transform-origin: "center center"
}

.guide_book .desc_box.row .img {
    float: none;
    width: 100%;
    height: 349px;
    padding: 0
}

.guide_book .desc_box.row .img::after {
    content: '';
    display: block;
    position: absolute;
    left: 40px;
    bottom: 0;
    width: 480px;
    height: 4px;
    border-radius: 2px;
    background-color: #f4f4f4;
}

.guide_book .desc_box.row .img:hover::after {
    display: none;
}

.guide_book .desc_box .txt1 {
    padding-left: 0;
    text-indent: 0;
    font-size: 18px;
    line-height: 29px;
}

.guide_book .desc_box .txt2 {
    padding-left: 0;
    text-indent: 0;
    font-size: 14px;
    line-height: 22px;
    color: #888
}

.guide_book .desc_box .txt2::before {
    display: none;
}

.guide_book .desc_box .desc {
    float: left;
    width: 728px;
    margin-left: 24px;
}

.guide_book .desc_box .desc h5 {
    padding-top: 40px
}

.guide_book .desc_box .txt2 {
    margin-left: 0
}

.guide_book .desc_box .info {
    position: relative;
    width: 100%;
    padding: 35px 0;
    background-color: #f8f8f8;
}

.guide_book .desc_box .info::after {
    content: '';
    display: block;
    clear: both;
}

.guide_book .desc_box .info h6 {
    width: auto;
    left: 40px;
    top: -16px;
    padding: 0 18px;
}

.guide_book .desc_box .info .list {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.guide_book .desc_box .info .list li {
    float: left;
    height: 100%;
    margin: 0;
    padding: 0 25px 0 32px;
    border: 0;
    border-left: 1px solid #dedede;
    box-sizing: border-box;
    background-color: transparent;
    vertical-align: top
}

.guide_book .desc_box .info .list li:first-of-type {
    border: 0;
}

.guide_book .desc_box .info .list strong {
    font-size: 18px;
    color: #333;
    display: inline-block;
    margin-bottom: 6px
}

.guide_book .desc_box .info .list p {
    font-size: 14px;
    color: #666;
    line-height: 22px;
}

.guide_book .desc_box .info .list p u {
    color: #333
}

.guide_book .desc_box .info .list .tmb {
    display: block;
    text-align: center;
    margin-bottom: 23px
}

.guide_book .desc_box .info .list.li2 li {
    width: 50%;
}

.guide_book .desc_box .info .list.li3 li {
    width: 33.2%;
}

.guide_book .desc_box .info .list.li4 li {
    width: 25%;
}

.guide_book .desc_box .info+.tip {
    margin-top: 30px
}

.guide_book .desc_box .tip {
    position: relative;
    width: 100%;
    padding: 33px 40px 30px;
    background-color: #f8f8f8;
    box-sizing: border-box
}

.guide_book .desc_box .tip p {
    color: #666;
    margin-top: 9px;
    padding-left: 30px;
    text-indent: -30px;
}

.guide_book .desc_box .tip p:first-of-type {
    padding-top: 10px
}

.guide_book .desc_box .tip p img {
    vertical-align: middle
}

.guide_book .desc_box .tip p.cf {
    margin-top: 4px;
    color: #f94242
}

.guide_book .desc_box .tip p.cf span {
    display: inline-block;
    width: 47px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    color: #fff;
    background-color: #acacac;
    border-radius: 12px;
    text-indent: 0;
    text-align: center;
    margin: 0 6px 0 31px;
}

.guide_book .desc_box .tip p.cf2 {
    margin-top: 0;
    color: #888888
}

.guide_book .desc_box .tip p.cf2 span {
    display: inline-block;
    color: #f94242;
    text-indent: 0;
    margin-left: 31px;
}

.guide_book .desc_box .tip h6 {
    position: absolute;
    left: 41px;
    top: -14px;
    display: inline-block;
    min-width: 60px;
    height: 39px;
    background: url('../../../../assets/img/sub/icon_tip.png') no-repeat;
    text-indent: -9999px;
    overflow: hidden;
}

.guide_book .tip h6.ic {
    position: absolute;
    left: 30px;
    top: -14px;
    display: inline-block;
    min-width: 60px;
    height: 39px;
    padding-left: 42px;
    background: url('../../../../assets/img/sub/icon_tip.png') no-repeat;
    text-indent: 0;
    overflow: visible;
    color: #fff
}

.guide_book .tip h6.ic em {
    display: inline-block;
    height: 32px;
    line-height: 34px;
    padding: 0 20px 0 10px;
    background-color: #f94242;
    border-radius: 0 16px 16px 0;
    color: #fff;
    font-style: italic;
    font-size: 13px
}

.guide_book .tip h6.ic em::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: -2px 8px 0 0;
    background-color: #fff;
    border-radius: 50%;
    vertical-align: middle
}

.guide_book .tip h6.ic+p {
    margin-top: 16px;
}

.guide_book .tip .num {
    display: inline-block;
    width: 19px;
    height: 20px;
    line-height: 21px;
    margin-right: 8px;
    padding-left: 1px;
    border-radius: 50%;
    border: 1px solid #cecece;
    text-align: center;
    font-family: 'Roboto';
    font-size: 12px;
    font-weight: 700;
    color: #00d4c3;
    background-color: #fff;
    text-indent: 0;
}

.guide_book .tip em {
    font-style: normal;
    color: #00d4c3;
}

.guide_book .desc_box .tip .img {
    float: none;
    height: auto;
    width: auto;
    padding-bottom: 0;
    text-align: left
}

.guide_book .desc_box .row_wrap {
    clear: both;
    width: 100%;
    overflow: hidden;
}

.guide_book .desc_box .row {
    width: 47%;
    margin: 10px 0 15px;
}

.guide_book .desc_box .row>h5 {
    font-size: 18px;
    line-height: 36px;
    height: 40px;
}

.guide_book .desc_box .row>h5 em {
    margin-left: 5px;
    font-size: 12px;
    color: #f94242;
    text-decoration: underline;
    font-weight: normal
}

.guide_book .desc_box .row>.img {
    width: 192px;
}

.guide_book .desc_box .row_wrap+.tip {
    margin-top: 20px
}

.guide_book .btn1 {
    display: inline-block;
    height: 36px;
    line-height: 36px;
    margin-top: 8px;
    padding: 0 25px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    background-color: #adadad;
}

.guide_book .btn1:hover {
    background-color: #585858;
}


.guide_book table {
    position: relative;
    padding: 7px 0
}

.guide_book table::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 7px;
    background-color: #e8e8e8;
    border-radius: 4px;
}

.guide_book table::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 7px;
    background-color: #e8e8e8;
    border-radius: 4px;
}

.guide_book table thead th {
    border-bottom: 2px solid #dedede
}

.guide_book table th {
    width: 198px;
    height: 48px;
    padding-top: 7px;
    font-weight: normal;
    font-size: 16px;
    color: #333
}

.guide_book table td {
    height: 40px;
    text-align: center;
    color: #888
}

.guide_book table tr:first-child td {
    padding-top: 10px
}

.guide_book table tr:last-child td {
    padding-bottom: 10px
}

.guide_book.guide2 .tab_4dep li {
    width: 176px;
}

.guide_book.guide3 .tab_4dep {
    height: 122px;
}

.guide_book.guide3 .tab_4dep::before {
    content: '';
    position: absolute;
    left: 0;
    top: 60px;
    width: 100%;
    height: 1px;
    background-color: #dedede;
}

.guide_book.guide3 .tab_4dep li {
    width: 205px;
}

.guide_book.create .section3 h5,
.guide_book.create .section4 h5 {
    padding-top: 40px
}

.guide_book.create .section3 .tip img {
    position: absolute;
    right: 28px;
    top: 6px;
}

.guide_book.control .section1 .tip {
    width: 397px;
}

.guide_book.control .section1 dl.desc dd:last-child {
    padding-top: 15px
}

.guide_book.control .section2 .desc {
    position: absolute;
    left: 273px;
    top: 612px
}

.guide_book.control .section2 .desc dd {
    margin-bottom: 37px
}

.guide_book.control .section2 .desc2 {
    left: 977px;
}

.guide_book.fast .section1 .img {
    margin-top: 18px
}

.guide_book.fast .section2 .tip {
    width: 382px;
}

.guide_book.player .section1 .img:nth-of-type(1) {
    margin-top: 18px;
}

.guide_book.player .section1 .tip {
    margin-top: 45px;
    padding-top: 35px;
}

.guide_book.hiddencatch .section1 .eng1 {
    display: inline-block;
    padding: 35px 0 10px;
    font-style: normal;
    color: #0cd4c3;
    font-size: 24px;
    font-family: 'Roboto';
    font-weight: 700
}

.guide_book.hiddencatch .section1 .eng2 {
    display: inline-block;
    padding-bottom: 30px;
    font-style: normal;
    color: #0cd4c3;
    font-size: 60px;
    font-family: 'Roboto';
    font-weight: 700
}

.guide_book.hiddencatch .section1 {
    overflow: visible;
    width: 620px;
}

.guide_book.hiddencatch .section1 .txt1 {
    padding-left: 0;
    text-indent: 0;
    line-height: 30px
}

.guide_book.hiddencatch .section1 .img {
    position: absolute;
    left: 620px;
    top: -35px;
}

.guide_book.mission .section1 .img {
    margin-top: 0;
}

.guide_book.bonus .desc_box li {
    height: 467px;
}

.guide_book.theme .desc_box li {
    height: 489px;
}

.guide_book.bonus .desc_box .txt1,
.guide_book.theme .desc_box .txt1 {
    font-size: 14px;
    line-height: 22px
}

.guide_book.theme .quick {
    position: fixed;
    right: 20px;
    top: 150px;
    min-width: 30px
}

.guide_book.theme .quick li {
    text-align: right;
    height: 32px;
    line-height: 32px;
    margin-bottom: 4px;
}

.guide_book.theme .quick a {
    display: block;
    width: 100%;
    height: 32px;
    line-height: 32px;
    color: #969696;
    font-size: 12px;
}

.guide_book.theme .quick .txt {
    display: none;
}

.guide_book.theme .quick .icon {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 12px;
    line-height: 32px;
    vertical-align: middle;
    border-radius: 50%;
    background-image: none;
    background-color: #a2a2a2;
}

.guide_book.theme .quick:hover .txt {
    display: inline-block;
    margin-right: 25px;
    text-align: right;
}

.guide_book.theme .quick:hover .icon,
.guide_book.theme .quick .active .icon {
    width: 32px;
    height: 32px;
    margin: 0;
    background: url('../../../../assets/img/info/guide/icon_theme.png') no-repeat;
}

.guide_book.theme .quick:hover li.q2 .icon,
.guide_book.theme .quick li.q2.active .icon {
    background-position: 0 -36px
}

.guide_book.theme .quick:hover li.q3 .icon,
.guide_book.theme .quick li.q3.active .icon {
    background-position: 0 -72px
}

.guide_book.theme .quick:hover li.q4 .icon,
.guide_book.theme .quick li.q4.active .icon {
    background-position: 0 -108px
}

.guide_book.theme .quick:hover li.q5 .icon,
.guide_book.theme .quick li.q5.active .icon {
    background-position: 0 -144px
}

.guide_book.theme .quick:hover li.q6 .icon,
.guide_book.theme .quick li.q6.active .icon {
    background-position: 0 -180px
}

.guide_book.theme .quick:hover li.q7 .icon,
.guide_book.theme .quick li.q7.active .icon {
    background-position: 0 -216px
}

.guide_book.theme .quick:hover li.q8 .icon,
.guide_book.theme .quick li.q8.active .icon {
    background-position: 0 -252px
}

.guide_book.theme .quick:hover li.q9 .icon,
.guide_book.theme .quick li.q9.active .icon {
    background-position: 0 -288px
}

.guide_book.theme .quick:hover li.q10 .icon,
.guide_book.theme .quick li.q10.active .icon {
    background-position: 0 -324px
}

.guide_book.theme .quick:hover li.q11 .icon,
.guide_book.theme .quick li.q11.active .icon {
    background-position: 0 -360px
}

.guide_book.theme .quick:hover li.q12 .icon,
.guide_book.theme .quick li.q12.active .icon {
    background-position: 0 -396px
}

.guide_book.theme .quick:hover li.q13 .icon,
.guide_book.theme .quick li.q13.active .icon {
    background-position: 0 -432px
}

.guide_book.theme .quick:hover li.q14 .icon,
.guide_book.theme .quick li.q14.active .icon {
    background-position: 0 -468px
}

.guide_book.theme .quick:hover li.q15 .icon,
.guide_book.theme .quick li.q15.active .icon {
    background-position: 0 -504px
}

.guide_book.theme .quick:hover li.q16 .icon,
.guide_book.theme .quick li.q16.active .icon {
    background-position: 0 -540px
}

.guide_book.theme .quick:hover li.q17 .icon,
.guide_book.theme .quick li.q17.active .icon {
    background-position: 0 -576px
}

.guide_book.theme .quick .active .txt {
    position: relative;
    display: inline-block;
    padding: 0 16px;
    height: 28px;
    line-height: 28px;
    margin-right: 8px;
    background-color: #767676;
    border-radius: 14px;
    text-align: center;
    color: #fff
}

.guide_book.theme .quick .active .txt::before {
    content: '';
    position: absolute;
    right: -7px;
    top: 12px;
    width: 8px;
    height: 7px;
    background: url('../../../../assets/img/sub/bg_tooltip3.png') no-repeat;
}

.w_m .guide_book .quick {
    display: none !important;
}

.guide_book.battle1 .desc_box .img,
.guide_book.battle2 .desc_box .img {
    padding-bottom: 0
}

.guide_book.battle1 .desc_box .txt1,
.guide_book.battle2 .desc_box .txt1 {
    padding-top: 60px
}

.guide_book.monster1 .section1 {
    background: url('../../../../assets/img/info/guide/c8_monster0.png') no-repeat 288px 62px;
}

.guide_book.monster1 .desc_box {
    margin-top: 275px
}

.guide_book.monster1 .desc_box:last-child {
    margin-top: 0
}

.guide_book.monster1 .desc_box li .list {
    height: 338px !important
}

.guide_book.monster2 .section1 {
    background: url('../../../../assets/img/info/guide/c9_monster1.png') no-repeat 345px 76px;
}

.guide_book.monster2 .desc_box {
    margin-top: 295px
}

.guide_book.monster2 .desc_box:last-child {
    margin-top: 0
}

.guide_book.monster2 .info .list li .str {
    width: 100%;
    font-size: 40px;
    color: #f94242;
    text-align: center;
    font-weight: normal
}

.guide_book.monster2 .info .list.row2 li {
    height: 238px !important;
}

.guide_book.monster2 .info .list.row2::before {
    content: '';
    position: absolute;
    left: 3%;
    top: 50%;
    width: 94%;
    height: 1px;
    background-color: #dedede;
}

.guide_book.monster2 .info .list.row2 li:nth-child(4) {
    border: 0
}

.guide_book.monster2 .info .list.row2 li:nth-child(-n+3) {
    margin-bottom: 70px;
}

.guide_book.monster2 .desc_box li .list {
    height: 338px !important
}

.guide_book.monster2 .desc_box li:nth-child(1) .list {
    height: auto !important
}

.guide_book.monster2 .desc_box li:nth-child(1) .list li {
    height: 247px !important
}

.guide_book.treasure .desc_box>li {
    margin-bottom: 0
}

.guide_book.treasure .desc_box .img {
    padding-bottom: 0
}

.guide_book.treasure .desc_box .txt1 {
    padding-top: 60px
}

.guide_book.treasure .section1 .desc_box {
    padding-top: 0
}

.guide_book.treasure .section1 .desc_box li {
    margin-bottom: 0
}

.guide_book.treasure .section2 h5 {
    padding-top: 30px;
}

.guide_book.zzang .desc_box .img {
    padding-bottom: 0
}

.guide_book.zzang .desc_box .txt1 {
    padding-top: 85px
}

.guide_book.zzang .section1 .desc_box {
    padding-top: 0
}

.guide_book.zzang .section1 .desc_box li {
    margin-bottom: 0
}

.guide_book.zzang .section2 h5 {
    padding-top: 30px;
}

.guide_book.zzang .section2 .list_type1 {
    margin-left: 30px
}

.guide_book.exchange .section1 .tip {
    width: 1188px;
}

.guide_book.guide6 .txt1+.img {
    margin-top: 0;
}

.guide_book.square .section2 .tip {
    margin-top: 15px
}

.guide_book.fishing .tip {
    margin-top: 15px
}

.guide_book.guide8 .txt1+.img {
    margin-top: 0;
}

.guide_book.item .section1 .tip {
    width: 1188px;
}

/* 배우기 전체보기 레이어 */
.layer_guide .icon,
.layer_guide .guide_menu .dep1::after {
    background: url('../../../../assets/img/info/spr_guidebook.png') no-repeat
}

.layer_guide .btn_close {
    background-position: 0 -25px;
}

.layer_guide .btn_close:hover {
    background-position: 0 -125px;
}

.layer_guide .modal_wrap {
    position: absolute;
    top: 220px;
    left: 50%;
    width: 1240px;
    height: 651px;
    margin-left: -620px;
    background: url('../../../../assets/img/info/bg_layer_guidebook.png') no-repeat
}

.layer_guide .modal_wrap h2 {
    position: absolute;
    left: 0;
    top: -70px;
    font-size: 30px;
    font-weight: normal;
    color: #fff
}

.layer_guide .modal_wrap h2 strong {
    font-weight: 700
}

.layer_guide .modal_wrap h2 .round {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: -3px 16px 0 0;
    background-color: #eee;
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle
}

.layer_guide .modal_wrap h2 .round .icon {
    position: absolute;
    left: -20px;
    top: -11px;
    display: block;
    width: 78px;
    height: 75px;
    background-position: 0 -225px
}

.layer_guide .guide_menu {
    padding-top: 10px
}

.layer_guide .guide_menu>li {
    position: relative;
    width: 953px;
    padding-left: 248px;
    min-height: 58px
}

.layer_guide .guide_menu>li::before {
    content: '';
    position: absolute;
    left: 30px;
    bottom: 0;
    width: 148px;
    height: 1px;
    background-color: #58dcce;
}

.layer_guide .guide_menu>li::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 953px;
    height: 1px;
    background-color: #eee;
}

.layer_guide .guide_menu>li:last-child::after {
    display: none;
}

.layer_guide .guide_menu .dep1 {
    position: absolute;
    left: 30px;
    display: block;
    width: 148px;
    height: 30px;
    line-height: 30px;
    margin-top: 16px;
    font-size: 18px;
    color: #fff;
}

.layer_guide .guide_menu .dep1::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 7px;
    width: 16px;
    height: 12px;
}

.layer_guide .guide_menu>li:hover .dep1 {
    color: #ffe329
}

.layer_guide .guide_menu>li:hover .dep1::after {
    background-position: -25px 0
}

.layer_guide .guide_menu .dep2 {
    width: 953px;
    padding: 16px 0 15px;
    overflow: hidden;
}

.layer_guide .guide_menu .dep2 li {
    float: left;
    width: 317px;
    height: 30px;
    line-height: 30px;
}

.layer_guide .guide_menu .dep2 li a {
    font-size: 16px;
    color: #666
}

.layer_guide .guide_menu .dep2 li a::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 4px;
    margin: 0 20px 0 0;
    vertical-align: middle;
    border-radius: 2px;
    background-color: #ebebeb;
}

.layer_guide .guide_menu .dep2 li:hover a {
    color: #00d4c3
}

.layer_guide .guide_menu .dep2 li:hover a::before {
    background-color: #33d8c6;
}

/* 정보 - 달력 */
.wallpaper_wrap {
    width: 100%;
}

.wallpaper_wrap .icon {
    background: url('../../../../assets/img/info/spr_wallpaper.png') no-repeat
}

.wallpaper_wrap .latest {
    position: relative;
    width: 384px;
    height: 482px;
    margin: 0 auto;
    padding: 62px 0 0 856px;
    border-bottom: 1px solid #dedede;
    background: #eee url('../../../../assets/img/info/bg_wallpaper.png') no-repeat right top;
}

.wallpaper_wrap .latest h4 {
    color: #333;
    font-family: 'Roboto';
}

.wallpaper_wrap .latest h4 .y {
    position: relative;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    font-size: 30px;
}

.wallpaper_wrap .latest h4 .y::before {
    position: absolute;
    left: 0;
    top: -6px;
    content: '';
    width: 100%;
    height: 4px;
    background-color: #333;
    border-radius: 3px;
}

.wallpaper_wrap .latest h4 .y::after {
    position: absolute;
    left: 0;
    bottom: -3px;
    content: '';
    width: 100%;
    height: 4px;
    background-color: #333;
    border-radius: 3px;
}

.wallpaper_wrap .latest h4 .m {
    display: inline-block;
    height: 174px;
    margin-left: -8px;
    font-size: 160px;
    letter-spacing: -1px;
    vertical-align: top;
    line-height: 160px;
}

.wallpaper_wrap .latest .new {
    display: inline-block;
    width: 38px;
    height: 10px;
    margin: 24px 0 0 2px;
    background-position: 0 0;
}

.wallpaper_wrap .latest .wallpaper {
    position: absolute;
    left: 35px;
    top: 56px;
    width: 766px;
    height: 430px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    box-shadow: 8px 8px 24px 1px rgba(1, 49, 129, 0.2);
}

.wallpaper_wrap .latest .wallpaper img {
    max-width: 766px;
}

.wallpaper_wrap .download a {
    position: relative;
    display: block;
    width: 150px;
    height: 34px;
    line-height: 36px;
    margin-bottom: 8px;
    padding-right: 20px;
    border: 1px solid #a1a1a1;
    border-radius: 18px;
    font-size: 14px;
    font-family: 'Roboto';
    color: #666;
    text-align: right
}

.wallpaper_wrap .download a:hover {
    color: #fff;
    background-color: #33d8c6;
    border-color: #33d8c6
}

.wallpaper_wrap .download a .icon {
    position: absolute;
    left: 19px;
    top: 10px;
    display: inline-block;
    width: 15px;
    height: 15px;
    text-indent: -9999px;
    overflow: hidden;
    font-size: 0;
    background-position: 0 -25px
}

.wallpaper_wrap .download a:hover .icon {
    background-position: -25px -25px
}

.wallpaper_wrap .latest .download .btn_viewer {
    position: relative;
    display: block;
    width: 172px;
    height: 34px;
    line-height: 36px;
    margin-bottom: 8px;
    padding-right: 20px;
    border: 1px solid #33d8c6;
    border-radius: 18px;
    font-size: 14px;
    font-family: 'NEXONLv1Gothic';
    color: #00d4c3;
    text-align: right;
}

.wallpaper_wrap .latest .download .btn_viewer:hover {
    color: #ffe329;
    background-color: #33d8c6;
}

.wallpaper_wrap .latest .download .btn_viewer .icon {
    position: absolute;
    left: 19px;
    top: 10px;
    display: inline-block;
    width: 15px;
    height: 15px;
    text-indent: -9999px;
    overflow: hidden;
    font-size: 0;
    background-position: 0 -50px
}

.wallpaper_wrap .latest .download .btn_viewer:hover .icon {
    background-position: -25px -50px
}

.wallpaper_wrap .list {
    position: relative;
    width: 1240px;
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: 7px;
    background: url('../../../../assets/img/sub/bg_line_table.png') no-repeat center bottom
}

.wallpaper_wrap .list ul {
    margin-left: -44px;
    padding: 56px 0 12px;
    overflow: hidden;
}

.wallpaper_wrap .list li {
    position: relative;
    float: left;
    width: 382px;
    margin: 0 0 44px 44px;
    border: 1px solid #e8e8e8;
    background-color: #fff;
    cursor: pointer;
}

.wallpaper_wrap .list .thumb {
    display: inline-block;
    width: 382px;
    height: 214px;
    border-bottom: 1px solid #e8e8e8;
    overflow: hidden;
}

.wallpaper_wrap .list .thumb img {
    max-width: 100%;
}

.wallpaper_wrap .list .tit {
    display: inline-block;
    height: 59px;
    line-height: 59px;
    padding-left: 22px;
    font-size: 24px;
    color: #333;
    font-family: 'Roboto';
    font-weight: 700
}

.wallpaper_wrap .list .new {
    display: inline-block;
    width: 24px;
    height: 8px;
    margin: -18px 0 0 6px;
    background-position: -50px 0;
    vertical-align: middle
}

.wallpaper_wrap .list .download {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 214px;
    padding-top: 23px;
    box-sizing: border-box
}

.wallpaper_wrap .list .download .bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #4da198;
    opacity: 0.8;
}

.wallpaper_wrap .list .download a {
    position: relative;
    margin: 0 auto 8px;
    z-index: 3;
    color: #fff;
    border-color: #fff
}

.wallpaper_wrap .list .download a:hover {
    border-color: #33d8c6
}

.wallpaper_wrap .list .download a .icon {
    background-position: -25px -25px
}

.wallpaper_wrap .list li .over:hover {
    background-color: #e0f1ef;
}

.wallpaper_wrap .list li .over:hover .download {
    display: block;
}

.wallpaper_wrap .list .btn_viewer {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 63px;
    height: 59px;
    background-position: 0 -100px;
}

.wallpaper_wrap .list .btn_viewer:hover {
    background-position: 0 -175px;
}

.wallpaper_wrap .layer_wp {
    display: none;
    z-index: 100;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-width: 1280px
}

.wallpaper_wrap .layer_wp .dim {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    background-color: #000;
}

.wallpaper_wrap .layer_wp .btn_close {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 80px;
    height: 80px;
    background-position: 0 -650px;
}

.wallpaper_wrap .layer_wp .btn_close:hover {
    background-position: 0 -750px;
}

.wallpaper_wrap .layer_wp .viewer {
    position: relative;
    margin: 80px auto 0;
    text-align: center
}

.wallpaper_wrap .layer_wp .detail {
    position: relative;
    display: inline-block;
    margin: 0 auto;
}

.wallpaper_wrap .layer_wp .detail img {
    max-width: 100%;
    max-height: 100%
}

.wallpaper_wrap .layer_wp .func {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-color: #1d1d1d;
}

.wallpaper_wrap .layer_wp .download {
    position: absolute;
    left: 50%;
    top: 40px;
    margin-left: -640px;
    width: 1280px;
    text-align: right
}

.wallpaper_wrap .layer_wp .download a {
    position: relative;
    display: inline-block;
    width: auto;
    height: 18px;
    line-height: 18px;
    margin: 0 0 0 40px;
    padding: 0 0 0 27px;
    border: 0;
    border-radius: 0;
    font-size: 18px;
    font-family: 'Roboto';
    color: #fff;
    text-align: left;
    font-weight: normal
}

.wallpaper_wrap .layer_wp .download a:hover {
    background-color: transparent;
    color: #ffe329;
    text-decoration: underline
}

.wallpaper_wrap .layer_wp .download a .icon {
    left: 0;
    top: 0;
    width: 19px;
    height: 18px;
    background-position: 0 -75px;
}

.wallpaper_wrap .layer_wp .download a:hover .icon {
    background-position: -25px -75px
}

.wallpaper_wrap .layer_wp .btn_prev {
    position: absolute;
    left: -108px;
    top: 38%;
    width: 98px;
    height: 98px;
    background-position: 0 -250px
}

.wallpaper_wrap .layer_wp .btn_prev:hover {
    background-position: 0 -350px
}

.wallpaper_wrap .layer_wp .btn_next {
    position: absolute;
    right: -108px;
    top: 38%;
    width: 98px;
    height: 98px;
    background-position: 0 -450px
}

.wallpaper_wrap .layer_wp .btn_next:hover {
    background-position: 0 -550px
}

.wallpaper_wrap .layer_wp .month {
    position: absolute;
    left: 50%;
    top: 18px;
    margin-left: -640px;
    font-size: 64px;
    color: #fff;
    font-family: 'Roboto';
}

.wallpaper_wrap .layer_wp .month em {
    font-style: normal;
    color: #00d4c3;
}

.w_m .wallpaper_wrap .layer_wp .detail {
    width: 82%;
}

.w_m .wallpaper_wrap .layer_wp .month {
    left: 20px;
    margin-left: 0
}

.w_m .wallpaper_wrap .layer_wp .download {
    left: auto;
    right: 20px;
    margin-left: 0
}


/* 고객지원 */
.help_wrap {
    position: relative;
    width: 1240px;
    margin: 62px auto 0;
    overflow: hidden;
}

.help_wrap.help1 {
    margin-top: 36px;
}

.help_wrap .icon,
.help_wrap.help3 .security dd button::after,
.dn_wrap .icon {
    background: url('../../../../assets/img/customer/spr_customer.png') no-repeat
}

.help_wrap h4 {
    padding-bottom: 24px;
    color: #333;
    font-size: 24px;
    font-weight: 700
}

.help_wrap h4::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 4px;
    margin: -4px 8px 0 0;
    background-color: #33d8c6;
    border-radius: 2px;
    vertical-align: middle
}

.help_wrap .section {
    position: relative;
    float: left;
    width: 598px;
    height: 493px;
    padding: 278px 0 0 0;
    background-color: #fff;
    border: 1px solid #dedede;
    box-sizing: border-box;
    text-align: center
}

.help_wrap .sec1 {
    margin-right: 44px;
    background: #fff url('../../../../assets/img/customer/bg_help1.png') no-repeat center 40px
}

.help_wrap .sec2 {
    padding-top: 268px;
    background: #fff url('../../../../assets/img/customer/bg_help2.png') no-repeat center 40px
}

.help_wrap .section h5 {
    padding-bottom: 16px;
    font-size: 20px;
    color: #333;
    font-weight: normal
}

.help_wrap .section .t1 {
    padding-bottom: 7px;
    font-size: 16px;
    color: #555;
    line-height: 26px;
}

.help_wrap .section .t1 em {
    font-style: normal;
    color: #00d4c3;
}

.help_wrap .section .t2 {
    font-size: 14px;
    color: #9c9c9c;
    line-height: 22px;
}

.help_wrap .section .btn1 {
    position: absolute;
    left: 50%;
    bottom: 39px;
    margin-left: -105px;
    width: 210px;
    height: 60px;
    line-height: 62px;
    color: #fff;
    font-size: 16px;
    background-color: #33d8c6;
    border-radius: 30px;
}

.help_wrap .section .btn1:hover {
    background-color: #00aaac;
}

.help_wrap .section .btn2 {
    width: 180px;
    height: 36px;
    line-height: 38px;
    color: #fff;
    font-size: 16px;
    background-color: #adadad;
}

.help_wrap .section .btn2:hover {
    background-color: #585858;
}

.help_wrap.help2 .section {
    width: 1240px;
    height: 334px;
    padding: 39px 0;
}

.help_wrap.help2 .step {
    padding: 0 22px 35px;
    border-bottom: 1px solid #eaeaea;
    overflow: hidden;
}

.help_wrap.help2 .step li {
    position: relative;
    float: left;
    width: 170px;
    height: 170px;
    line-height: 24px;
    margin: 0 64px;
    border-radius: 50%;
    font-size: 16px;
    color: #555;
    background-color: #f4f4f4;
}

.help_wrap.help2 .step li::before {
    position: absolute;
    left: -73px;
    top: 83px;
    content: '';
    display: inline-block;
    width: 18px;
    height: 4px;
    background-color: #d9d9d9;
    border-radius: 2px
}

.help_wrap.help2 .step li:first-child::before {
    display: none;
}

.help_wrap.help2 .step li span {
    display: block;
    width: 53px;
    height: 26px;
    line-height: 26px;
    margin: 32px auto 16px;
    font-size: 12px;
    color: #000;
    border: 1px solid #dedede;
    border-radius: 14px;
}

.help_wrap.help2 .step li.line1 span {
    margin-bottom: 27px;
}

.help_wrap.help2 .step li em {
    color: #00d4c3;
    font-style: normal
}

.help_wrap.help2 .t2 {
    text-align: left;
    margin: 34px 0 0 82px;
}

.help_wrap.help2 .t2 em {
    color: #f94242;
    font-style: normal
}

.help_wrap.help2 .btn2 {
    position: absolute;
    right: 82px;
    bottom: 28px;
}

.help_wrap.help3 .section {
    width: 1240px;
    height: 308px;
    padding: 47px 0 0;
}

.help_wrap.help3 .security {
    position: relative;
    float: left;
    width: 244px;
    margin: 0 18px 0 40px;
    text-align: center
}

.help_wrap.help3 .security::before {
    position: absolute;
    left: -40px;
    top: 105px;
    content: '';
    display: inline-block;
    width: 18px;
    height: 4px;
    background-color: #d9d9d9;
    border-radius: 2px
}

.help_wrap.help3 .security:first-child::before {
    display: none;
}

.help_wrap.help3 .security dt {
    height: 94px;
    font-size: 20px;
    color: #333
}

.help_wrap.help3 .security dt .icon {
    height: 50px;
    margin: 0 auto 5px;
}

.help_wrap.help3 .security dd {
    position: relative;
    height: 128px;
    color: #9c9c9c;
    font-size: 14px;
    line-height: 22px
}

.help_wrap.help3 .security dd button {
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -90px
}

.help_wrap.help3 .security dd button::after {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-left: 7px;
    background-position: 0 -200px
}

.help_wrap.help3 .security .sc1 .icon {
    width: 31px;
    background-position: 0 0;
}

.help_wrap.help3 .security .sc2 .icon {
    width: 31px;
    background-position: 0 -50px;
}

.help_wrap.help3 .security .sc3 .icon {
    width: 41px;
    background-position: 0 -100px;
}

.help_wrap.help3 .security .sc4 .icon {
    width: 40px;
    background-position: 0 -150px;
}

.dn_wrap {
    position: relative;
    width: 1240px;
    margin: 30px auto 0;
}

.dn_wrap .section {
    position: relative;
    float: left;
    width: 1240px;
    height: 248px;
    padding: 33px 0 0 21px;
    background-color: #fff;
    border: 1px solid #dedede;
    box-sizing: border-box;
    text-align: center
}

.dn_wrap h4 {
    padding-bottom: 15px;
    color: #333;
    font-size: 24px;
    font-weight: 700
}

.dn_wrap h4::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 4px;
    margin: -4px 8px 0 0;
    background-color: #33d8c6;
    border-radius: 2px;
    vertical-align: middle
}

.dn_wrap .t1 {
    padding-left: 25px;
    font-size: 16px;
    color: #555;
    line-height: 26px;
}

.dn_wrap .t1 em {
    font-style: normal;
    color: #00d4c3;
}

.dn_wrap .t2 {
    text-align: left;
    margin: 21px 0 0 25px;
    color: #9c9c9c;
}

.dn_wrap .t2 em {
    color: #f94242;
    font-style: normal;
}

.dn_wrap.dn {
    width: 1109px;
    height: 227px;
    padding: 50px 0 0 131px;
    background: url('../../../../assets/img/customer/bg_download.png') no-repeat
}

.dn_wrap.dn h4 {
    padding-bottom: 18px;
    font-size: 24px;
    color: #fff;
}

.dn_wrap.dn h4::before {
    display: none;
}

.dn_wrap.dn .t1 {
    padding-left: 0;
    color: #fff;
}

.dn_wrap.dn .t1 em {
    font-style: normal;
    color: #ffe329;
}

.dn_wrap.dn .btn_howto {
    height: 36px;
    line-height: 38px;
    margin-top: 20px;
    padding: 0 35px;
    color: #fff;
    background-color: #00aaac;
}

.dn_wrap.dn .btn_howto:hover {
    background-color: #069ea0;
}

.dn_wrap.dn .btn_dn {
    position: absolute;
    right: 70px;
    top: 75px;
    width: 340px;
    height: 100px;
    line-height: 102px;
    background-color: #ffe329;
    font-size: 28px;
    color: #000;
    border-radius: 50px;
    box-shadow: 0px 6px 36px 0px rgba(28, 65, 111, 0.33);
    font-weight: 700
}

.dn_wrap.dn .btn_dn .icon {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin-right: 14px;
    background-position: 0 -225px;
    vertical-align: middle
}

.dn_wrap.dn .btn_dn:hover {
    background-color: #ffbf26;
}

.tbl_pcspec {
    width: 100%;
    margin-top: 17px;
    border-top: 7px solid #e8e8e8;
    border-bottom: 7px solid #e8e8e8;
    text-align: center
}

.tbl_pcspec .col1 {
    width: 140px;
}

.tbl_pcspec .col2 {
    width: 366px;
}

.tbl_pcspec .col3 {
    width: 366px;
}

.tbl_pcspec th {
    height: 68px;
    font-size: 16px;
    color: #333;
    background-color: #eee;
    border-bottom: 2px solid #dedede;
    font-weight: normal
}

.tbl_pcspec td {
    height: 69px;
    padding: 0 25px;
    border-top: 1px solid #dedede;
}

.tbl_pcspec tr:first-child td {
    border-top: 0;
}

.tbl_pcspec td.mypc {
    background-color: #e0f1ef;
}

.tbl_pcspec td .btn_mypc {
    width: 180px;
    height: 60px;
    line-height: 62px;
    background-color: #33d8c6;
    font-size: 16px;
    color: #fff;
    border-radius: 30px;
}

.tbl_pcspec td .btn_mypc:hover {
    background-color: #00aaac;
}

.dn_wrap.driver {
    margin-top: 62px;
    overflow: hidden;
}

.dn_wrap.driver h4 {
    padding-bottom: 20px;
}

.dn_wrap.driver dl {
    position: relative;
    float: left;
    width: 180px;
    float: left;
    margin: 0 59px;
}

.dn_wrap.driver dl::before {
    position: absolute;
    left: -68px;
    top: 82px;
    content: '';
    display: inline-block;
    width: 18px;
    height: 4px;
    background-color: #d9d9d9;
    border-radius: 2px
}

.dn_wrap.driver dl:first-child::before {
    display: none;
}

.dn_wrap.driver dl dt {
    width: 180px;
    height: 113px;
    margin-bottom: 28px;
    background: url('../../../../assets/img/customer/spr_directx.png') no-repeat;
    overflow: hidden;
    text-indent: -9999px;
}

.dn_wrap.driver dl dt.dr2 {
    background-position: 0 -150px
}

.dn_wrap.driver dl dt.dr3 {
    background-position: 0 -300px
}

.dn_wrap.driver dl dt.dr4 {
    background-position: 0 -450px
}

.dn_wrap.driver dl dd .btn2 {
    display: inline-block;
    width: 180px;
    height: 36px;
    line-height: 38px;
    color: #fff;
    font-size: 16px;
    background-color: #adadad;
    font-family: 'Roboto';
}

.dn_wrap.driver dl dd .btn2:hover {
    background-color: #585858;
}

.dn_wrap.driver dl dd .btn2 span {
    display: inline-block;
    width: 15px;
    height: 13px;
    margin: -4px 0 0 4px;
    background-position: 0 -300px;
    vertical-align: middle
}

/* 내정보 */
.myblock_wrap {
    position: relative;
    width: 1240px;
    margin: 36px auto 0;
    overflow: hidden;
}

.myblock_wrap .account_info .icon,
.myblock_wrap .management .m1 .server .btn_chk,
.myblock_wrap .personal .icon {
    background: url('../../../../assets/img/sub/spr_myblock.png') no-repeat;
}

.myblock_wrap .btn1 {
    display: inline-block;
    width: 160px;
    height: 36px;
    line-height: 38px;
    margin-top: 30px;
    font-size: 16px;
    color: #fff;
    background-color: #adadad;
}

.myblock_wrap .btn1:hover {
    background-color: #585858;
}

.myblock_wrap .btn2 {
    position: absolute;
    right: 54px;
    bottom: 36px;
    display: inline-block;
    width: 206px;
    height: 60px;
    line-height: 62px;
    color: #fff;
    font-size: 18px;
    border-radius: 30px;
    background-color: #33d8c6;
    text-align: center
}

.myblock_wrap .btn2:hover {
    background-color: #00aaac;
}

.myblock_wrap .personal {
    width: 100%;
    height: 240px;
    padding-left: 250px;
    box-sizing: border-box;
    background: url('../../../../assets/img/sub/bg_myblock_info2.png') no-repeat;
}

.myblock_wrap .personal .avatar {
    position: absolute;
    left: 28px;
    top: 38px;
    width: 180px;
    height: 164px;
    line-height: 164px;
    text-align: center;
}

.myblock_wrap .personal .avatar img {
    vertical-align: middle
}

.myblock_wrap .personal .id {
    float: left;
    padding: 62px 0 0;
    width: 536px;
    height: 88px;
}

.myblock_wrap .personal .server {
    display: inline-block;
    width: 42px;
    height: 24px;
    line-height: 26px;
    font-size: 12px;
    background-color: #fff;
    border-radius: 12px;
    text-align: center
}

.myblock_wrap .personal .id .server.happy {
    color: #4b8fff
}

.myblock_wrap .personal .id .server.dream {
    color: #9963ef
}

.myblock_wrap .personal .name {
    font-size: 32px;
    color: #fff;
    vertical-align: middle
}

.myblock_wrap .personal .level_icon {
    position: relative;
    display: inline-block;
    width: 37px;
    line-height: 18px;
    color: #767676;
    vertical-align: middle;
    text-align: left
}

.myblock_wrap .personal .lv0 {
    margin-left: -20px
}

.myblock_wrap .personal dt {
    color: #104db1;
    font-size: 16px;
}

.myblock_wrap .personal dd {
    color: #fff;
    font-family: 'Roboto';
}

.myblock_wrap .personal .average {
    float: left;
    width: 548px;
    overflow: hidden;
}

.myblock_wrap .personal .average dt,
.myblock_wrap .personal .average dd {
    float: left;
    font-size: 16px
}

.myblock_wrap .personal .average dd {
    margin: 0 12px 0 6px;
    font-family: 'Roboto';
    line-height: 15px;
    font-size: 17px
}

.myblock_wrap .personal .lucci {
    float: left;
    margin-top: -100px;
    padding: 0 38px 0 48px;
    text-align: center
}

.myblock_wrap .personal .exp {
    float: left;
    margin-top: -100px;
    padding: 0 30px;
    text-align: center
}

.myblock_wrap .personal .exp dt .icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 10px;
    background-position: 0 -375px;
}

.myblock_wrap .personal .lucci dt .icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 10px;
    background-position: 0 -275px
}

.myblock_wrap .personal .lucci dd,
.myblock_wrap .personal .exp dd {
    font-size: 20px;
    margin-top: 7px;
}

.myblock_wrap .personal .friend {
    position: absolute;
    left: 278px;
    top: 215px;
    width: 680px;
    height: 48px;
    line-height: 48px;
    background-color: #ffe329;
    border-radius: 24px;
    text-align: center
}

.myblock_wrap .personal .friend dt {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    color: #00d4c3;
    font-size: 16px;
    font-weight: 700;
    vertical-align: middle;
    margin-top: 1px
}

.myblock_wrap .personal .friend dt .icon {
    display: inline-block;
    width: 12px;
    height: 11px;
    margin: 0 18px 0 5px;
    background-position: 0 -475px;
}

.myblock_wrap .personal .friend dd {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    font-family: 'NEXONLv1Gothic';
    margin-right: 11px;
    vertical-align: middle
}

.myblock_wrap .personal .friend .server.happy {
    background-color: #fff;
    color: #00d4c3
}

.myblock_wrap .personal .friend .server.dream {
    background-color: #fff;
    color: #9b62ef
}

.myblock_wrap .personal .friend .name {
    font-size: 14px;
    color: #333
}

.myblock_wrap .personal .friend .time {
    color: #ac821c;
    font-size: 12px;
}

.myblock_wrap .personal .friend .time::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: #ebcd26;
    vertical-align: middle;
    margin: -3px 12px 0 0
}

.myblock_wrap .personal.me {
    background: url('../../../../assets/img/sub/bg_myblock_info.png') no-repeat;
}

.myblock_wrap .personal.me dt {
    color: #169590;
}

.myblock_wrap .personal.me .id .server.happy {
    color: #00d4c3
}

.myblock_wrap .personal.me .id .server.dream {
    color: #9b62ef
}

.myblock_wrap .stit {
    float: left;
    width: 300px;
    font-size: 24px;
    color: #333;
    margin-top: 65px;
    padding-top: 28px;
}

.myblock_wrap .stit::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 4px;
    margin-right: 10px;
    border-radius: 2px;
    background-color: #33d8c6;
    vertical-align: middle
}

.myblock_wrap .stit2 {
    float: none;
    height: 41px;
    margin-top: 0;
    padding-top: 0;
}

.myblock_wrap .board_sorting {
    float: right;
    width: 500px;
    margin: 65px 0 10px 0;
}

.myblock_wrap .table_list {
    clear: both;
}

.myblock_wrap .table_list td {
    border-top: 0
}

.myblock_wrap .table_list .no_data {
    padding: 55px 0 55px 80px;
}

.myblock_wrap .table_list .no_data .icon {
    display: inline-block;
    width: 61px;
    height: 60px;
    margin: -5px 20px 0 0;
    vertical-align: middle;
    background: url('../../../../assets/img/sub/bg_nodata2.png') no-repeat;
}

.myblock_wrap .account_info {
    margin-bottom: 65px;
    border-top: 7px solid #e8e8e8;
    border-bottom: 7px solid #e8e8e8;
}

.myblock_wrap .account_info.account0 {
    height: 310px;
    padding-top: 50px;
    background-color: #eeeeee;
    text-align: center
}

.myblock_wrap .account_info .no_data {
    padding-top: 138px;
    font-size: 20px;
    color: #333;
    background: url('../../../../assets/img/sub/bg_nodata-1.png') no-repeat center top;
}

.myblock_wrap .account_info .btn_login {
    display: inline-block;
    width: 130px;
    height: 60px;
    line-height: 62px;
    margin-top: 32px;
    font-size: 18px;
    color: #333;
    box-sizing: border-box;
    background-color: #e8e8e8;
    border: 1px solid #d4d4d4;
    text-align: center;
    border-radius: 30px;
}

.myblock_wrap .account_info .btn_login:hover {
    background-color: #d4d4d4;
}

.myblock_wrap .account_info table {
    width: 100%;
}

.myblock_wrap .account_info thead th {
    height: 68px;
    font-size: 16px;
    color: #333;
    background-color: #eee;
    border-bottom: 2px solid #dedede;
    font-weight: normal
}

.myblock_wrap .account_info th:first-child {
    border-right: 1px solid #dedede
}

.myblock_wrap .account_info tbody th {
    line-height: 18px
}

.myblock_wrap .account_info tbody th,
.myblock_wrap .account_info tbody td {
    padding: 27px 0;
    font-size: 14px;
    color: #333;
    font-weight: normal;
    text-align: center;
    border-bottom: 1px solid #dedede
}

.myblock_wrap .account_info tbody tr:last-child th,
.myblock_wrap .account_info tr:last-child td {
    border-bottom: 0
}

.myblock_wrap .account_info td {
    position: relative;
    border-bottom: 1px solid #dedede
}

.myblock_wrap .account_info td.me {
    background-color: #e0f1ef;
}

.myblock_wrap .account_info td .line {
    position: absolute;
    left: -1px;
    top: 20px;
    width: 1px;
    border-left: 1px solid #dedede;
    vertical-align: middle;
}

.myblock_wrap .account_info .available .icon {
    display: inline-block;
    width: 42px;
    height: 42px;
    margin: 0 2px 0 3px
}

.myblock_wrap .account_info .shop {
    background-position: 0 -50px
}

.myblock_wrap .account_info .web {
    background-position: 0 -100px
}

.myblock_wrap .account_info .game_no {
    background-position: -50px 0
}

.myblock_wrap .account_info .shop_no {
    background-position: -50px -50px
}

.myblock_wrap .account_info .web_no {
    background-position: -50px -100px
}

.myblock_wrap .account_info h5 {
    color: #555;
    margin-bottom: 10px;
}

.myblock_wrap .account_info .howto {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 180px;
    vertical-align: middle
}

.myblock_wrap .account_info .howto li {
    padding: 3px 0
}

.myblock_wrap .account_info .or {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 25px;
    height: 25px;
    line-height: 25px;
    margin: -12px 30px 0;
    border-radius: 50%;
    color: #fff;
    background-color: #33d8c6;
    font-family: 'Roboto';
    font-weight: 700;
    vertical-align: middle
}

.myblock_wrap .account_info .only {
    font-size: 12px;
    color: #9c9c9c;
    line-height: 18px;
    margin-top: 10px;
}

.myblock_wrap .account_info .only em {
    font-style: normal;
    color: #f95555;
}

.myblock_wrap .account_info .btn_gid {
    margin-top: 12px
}

.myblock_wrap .account_info .noti {
    position: absolute;
    right: 20px;
    top: 68px;
    z-index: 5;
}

.myblock_wrap .account_info .btn_noti {
    display: block;
    width: 24px;
    height: 24px;
    background-position: 0 -150px;
    text-indent: 0;
    overflow: visible
}

.myblock_wrap .account_info .btn_noti:hover {
    background-position: -50px -150px
}

.myblock_wrap .account_info .noti:hover .layer {
    display: block;
}

.myblock_wrap .account_info .noti .layer {
    position: absolute;
    right: -5px;
    top: 36px;
    display: none;
    width: 307px;
    padding: 20px 20px;
    text-indent: 0;
    font-size: 12px;
    color: #fff;
    line-height: 18px;
    background-color: #f94242;
    border-radius: 18px
}

.myblock_wrap .account_info .noti .layer strong {
    font-size: 14px;
    display: block;
    margin: 20px 0 7px;
    border-top: 1px solid #e23232;
    padding-top: 20px
}

.myblock_wrap .account_info .noti .layer strong:first-child {
    margin-top: 0;
    border-top: 0;
    padding-top: 0
}

.myblock_wrap .account_info .noti .layer em {
    font-style: normal;
    color: #ffe329;
}

.myblock_wrap .account_info .noti .layer .add {
    display: block;
    margin-top: 20px;
    padding: 0 0 0 8px;
    color: #630a0a;
    text-indent: -8px;
}

.myblock_wrap .account_info .noti .layer .arrow {
    position: absolute;
    right: 12px;
    top: -8px;
    display: inline-block;
    width: 9px;
    height: 9px;
    background: url('../../../../assets/img/sub/bg_tooltip.png') no-repeat;
}

.myblock_wrap .management {
    width: 100%;
    background-color: #fff;
    margin-bottom: 65px;
    border: 1px solid #dedede;
    border-bottom: 0;
    box-sizing: border-box;
}

.myblock_wrap .management::after {
    content: '';
    display: block;
    clear: both;
}

.myblock_wrap .management li {
    position: relative;
    float: left;
    width: 50%;
    height: 245px;
    padding: 38px 45px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #dedede;
}

.myblock_wrap .management li.m2::before,
.myblock_wrap .management li.m4::before {
    position: absolute;
    left: 0;
    top: 20px;
    content: '';
    width: 1px;
    height: 205px;
    display: inline-block;
    background-color: #dedede;
}

.myblock_wrap .management li h5 {
    padding-bottom: 13px;
    font-weight: normal;
    color: #333;
    font-size: 20px;
}

.myblock_wrap .management li p {
    line-height: 25px;
    font-size: 16px;
    color: #555
}

.myblock_wrap .management li p em {
    font-style: normal;
    color: #00d4c3;
}

.myblock_wrap .management .selectbox {
    float: left;
}

.myblock_wrap .management .selectbox li {
    float: none;
    width: auto;
    height: auto;
    padding: 0;
    border: 0
}

.myblock_wrap .management .input_id {
    position: relative;
    float: left;
    width: 196px;
    margin: 0 20px 0 15px;
}

.myblock_wrap .management .input_id input {
    width: 196px;
    height: 60px;
    line-height: 62px;
    padding: 0 20px;
    border: 1px solid #d4d4d4;
    border-radius: 30px;
    box-sizing: border-box;
}

.myblock_wrap .management .input_id label {
    color: #b8b6b6;
    position: absolute;
    left: 20px;
    top: 24px;
}

.myblock_wrap .management .m1 .server {
    position: relative;
    margin: 16px 0 10px;
}

.myblock_wrap .management .m1 .server::before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 15px;
    width: 352px;
    height: 4px;
    background-color: #f4f4f4;
    border-radius: 2px;
}

.myblock_wrap .management .m1 .server .btn_chk {
    text-indent: 0;
    width: 68px;
    margin-right: 12px;
    padding-left: 38px;
    height: 30px;
    color: #555;
    background-position: 0 -175px
}

.myblock_wrap .management .m1 .server .btn_chk.on {
    background-position: 0 -225px
}

.myblock_wrap .management .m1 .server .btn_chk:active,
.myblock_wrap .management .m1 .server .btn_chk:focus {
    outline: none;
    border: 0;
}

.myblock_wrap .management .m1 .btn_submit {
    width: 100px;
    height: 60px;
    position: static;
    right: auto;
    bottom: auto;
}

.myblock_wrap .management .m5 {
    width: 100%;
}

.myblock_wrap .management .m5 .btn_list {
    width: 274px;
}

.myblock_wrap .change {
    width: 100%;
    padding: 39px 0 35px;
    background-color: #fff;
    margin-bottom: 65px;
    border: 1px solid #dedede;
    box-sizing: border-box;
}

.myblock_wrap .change dl {
    width: 554px;
    margin: 0 auto;
    overflow: hidden;
}

.myblock_wrap .change dt {
    float: left;
    position: relative;
    width: 174px;
    height: 60px;
    line-height: 60px;
    margin: 0 23px 8px 0;
    color: #555;
    font-weight: 700
}

.myblock_wrap .change dt::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 27px;
    width: 18px;
    height: 4px;
    background-color: #d9d9d9;
    border-radius: 2px;
}

.myblock_wrap .change dd {
    position: relative;
    float: left;
    width: 350px;
    height: 60px;
    line-height: 60px;
    margin: 0 0 8px 0;
    border-radius: 30px;
    border: 1px solid #d4d4d4
}

.myblock_wrap .change dd label {
    position: absolute;
    left: 22px;
    top: 0;
    color: #b8b6b6;
    height: 60px;
    line-height: 60px;
}

.myblock_wrap .change dd input {
    width: 304px;
    height: 56px;
    line-height: 56px;
    margin-left: 22px;
    vertical-align: middle;
    color: #333;
    border: 0
}

.myblock_wrap .change .btn2 {
    position: static;
    right: auto;
    bottom: auto;
    display: block;
    width: 158px;
    margin: 12px auto 0
}

.myblock_wrap .password {
    position: relative;
    height: 334px;
    padding: 39px 0;
    background-color: #fff;
    border: 1px solid #dedede;
    box-sizing: border-box;
    text-align: center
}

.myblock_wrap .password .step {
    padding: 0 22px 35px;
    border-bottom: 1px solid #eaeaea;
    overflow: hidden;
}

.myblock_wrap .password .step li {
    position: relative;
    float: left;
    width: 170px;
    height: 170px;
    line-height: 24px;
    margin: 0 64px;
    border-radius: 50%;
    font-size: 16px;
    color: #555;
    background-color: #f4f4f4;
}

.myblock_wrap .password .step li::before {
    position: absolute;
    left: -73px;
    top: 83px;
    content: '';
    display: inline-block;
    width: 18px;
    height: 4px;
    background-color: #d9d9d9;
    border-radius: 2px
}

.myblock_wrap .password .step li:first-child::before {
    display: none;
}

.myblock_wrap .password .step li span {
    display: block;
    width: 53px;
    height: 26px;
    line-height: 28px;
    margin: 32px auto 16px;
    font-size: 12px;
    color: #000;
    border: 1px solid #dedede;
    border-radius: 14px;
}

.myblock_wrap .password .step li.line1 span {
    margin-bottom: 27px;
}

.myblock_wrap .password .step li em {
    color: #00d4c3;
    font-style: normal
}

.myblock_wrap .password .t2 {
    text-align: left;
    margin: 34px 0 0 82px;
    color: #9c9c9c
}

.myblock_wrap .password .t2 em {
    color: #f94242;
    font-style: normal
}

.myblock_wrap .password .btn1 {
    position: absolute;
    right: 82px;
    bottom: 28px;
    width: 180px
}

/* 일반 팝업 - 내정보 */
.pop_window {
    width: 680px;
    margin: 0 auto
}

.pop_window .icon,
.pop_window h1 span.dep1::before,
.pop_window .step li::before,
.pop_window .server .btn_chk,
.pop_window .btn_chk,
.layer_download .modal_header h2 .icon {
    background: url('../../../S2/Game/ca/ca2019/common/spr_popup-1.png') no-repeat;
}

.pop_window .pop_header {
    height: 124px;
    padding: 8px 48px 0;
    box-sizing: border-box;
    background: #43e2d1 url('../../../S2/Game/ca/ca2019/common/pop_window_top.png') no-repeat;
}

.pop_window h1 {
    color: #fff;
    font-size: 36px;
    font-weight: normal;
}

.pop_window h1 span.dep1 {
    display: inline-block;
    height: 18px;
    margin-bottom: 16px;
    color: #fff229;
    font-size: 14px;
    font-family: 'Roboto';
    border-bottom: 1px solid #fff229;
}

.pop_window h1 span.dep1::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle
}

.pop_window .txt1 {
    font-size: 16px;
    color: #333;
    line-height: 26px;
}

.pop_window .txt1 em {
    font-style: normal;
    color: #00d4c3
}

.pop_window .pop_contents {
    position: relative;
    padding-bottom: 40px
}

.pop_window .pop_contents .section {
    padding: 42px 40px 0
}

.pop_window .btns {
    position: relative;
    margin-top: 30px;
    text-align: center
}

.pop_window .btns .btn1,
.pop_window .btns .btn2 {
    display: inline-block;
    height: 60px;
    line-height: 62px;
    padding: 0 50px;
    color: #fff;
    font-size: 18px;
    background-color: #33d8c6;
    border-radius: 30px;
    margin: 0 2px
}

.pop_window .btns .btn1 {
    background-color: #585858;
}

.pop_window .btns .btn1:hover {
    background-color: #333;
}

.pop_window .btns .btn2:hover {
    background-color: #00aaac;
}

.pop_window .step {
    padding: 20px 48px 18px;
    background-color: #f4f4f4;
}

.pop_window .step ul {
    overflow: hidden
}

.pop_window .step li {
    color: #767676;
    margin-right: 20px;
    float: left;
    padding-top: 2px;
    height: 22px;
    line-height: 22px;
}

.pop_window .step li.active {
    color: #000;
}

.pop_window .step li::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    margin: -2px 20px 0 0;
    vertical-align: middle;
    background-position: 0 -125px
}

.pop_window .step li:first-child::before {
    display: none;
}

.pop_generate .generate_info {
    margin-top: 20px;
    padding: 25px 0 25px 30px;
    background-color: #f4f4f4;
}

.pop_generate .generate_info h2 {
    position: relative;
    width: 138px;
    height: 24px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    color: #555;
    vertical-align: middle
}

.pop_generate .generate_info h2::after {
    content: '';
    position: absolute;
    right: 0;
    top: 5px;
    display: inline-block;
    width: 18px;
    height: 4px;
    background-color: #d9d9d9;
    border-radius: 2px;
}

.pop_generate .generate_info .input {
    position: relative;
    width: 352px;
    height: 60px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    color: #555;
    margin: 0 0 10px 20px;
    vertical-align: middle
}

.pop_generate .generate_info .input.game_id,
.pop_generate .generate_info .input.capcha {
    border: 1px solid #d4d4d4;
    border-radius: 30px;
    background-color: #fff;
    box-sizing: border-box
}

.pop_generate .generate_info .input.game_id input {
    width: 208px;
    height: 54px;
    line-height: 60px;
    margin: 2px 10px 0 20px;
    color: #555;
    border: 0
}

.pop_generate .generate_info .input.game_id label {
    position: absolute;
    left: 20px;
    top: 0;
    height: 58px;
    line-height: 60px;
}

.pop_generate .generate_info .input .btn_id_chk {
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 42px;
    background-color: #adadad;
    color: #fff;
    border-radius: 20px
}

.pop_generate .generate_info .input .btn_id_chk:hover {
    background-color: #585858;
}

.pop_generate .generate_info .input.capcha img {
    line-height: 58px;
    vertical-align: middle;
    margin: 0 14px 0 20px
}

.pop_generate .generate_info .input.capcha input {
    width: 160px;
    height: 30px;
    line-height: 32px;
    margin: 15px 0 0 0;
    padding-left: 20px;
    color: #555;
    border: 0;
    border-left: 1px solid #ededed;
}

.pop_generate .generate_info .input.capcha label {
    position: absolute;
    left: 153px;
    top: 0;
    height: 54px;
    line-height: 59px;
    color: #b8b6b6
}

.pop_generate .generate_info .server {
    height: 30px;
}

.pop_generate .generate_info .server .btn_chk {
    text-indent: 0;
    width: 68px;
    margin-right: 12px;
    padding-left: 38px;
    height: 30px;
    color: #555;
    background-position: 0 -150px
}

.pop_generate .generate_info .server .btn_chk.on {
    background-position: 0 -200px
}

.pop_generate .generate_info .server .btn_chk:active,
.pop_generate .generate_info .server .btn_chk:focus {
    outline: none;
    border: 0;
}

.pop_generate .generate_info .txt2 {
    color: #555;
    line-height: 25px;
    text-align: center
}

.pop_generate .generate_info .download {
    overflow: hidden;
    margin: 22px 0 0 36px
}

.pop_generate .generate_info .download li {
    position: relative;
    width: 166px;
    float: left;
    font-size: 12px;
    color: #767676;
    text-align: center;
    line-height: 18px;
}

.pop_generate .generate_info .download li::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 21px;
    width: 18px;
    height: 4px;
    background-color: #d8d8d8;
    border-radius: 2px
}

.pop_generate .generate_info .download li:first-child::before {
    display: none;
}

.pop_generate .generate_info .download span {
    display: block;
    width: 46px;
    height: 46px;
    line-height: 46px;
    margin: 0 auto 12px;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    background-color: #a8a8a8;
    font-family: 'Roboto';
}

.pop_generate .generate_info .download li p.line1 {
    margin-top: 22px
}

.pop_integrate .integration_info {
    margin-top: 20px;
    padding: 35px 0 35px 30px;
    background-color: #f4f4f4;
}

.pop_integrate .integration_info .server {
    position: relative;
    display: block;
    height: 30px;
    margin: 0 0 20px 5px;
}

.pop_integrate .integration_info .server .btn_chk {
    text-indent: 0;
    width: 68px;
    margin-right: 12px;
    padding-left: 38px;
    height: 30px;
    color: #555;
    background-position: 0 -150px
}

.pop_integrate .integration_info .server .btn_chk.on {
    background-position: 0 -200px
}

.pop_integrate .integration_info .server .btn_chk:active,
.pop_generate .generate_info .server .btn_chk:focus {
    outline: none;
    border: 0;
}

.pop_integrate .integration_info .input {
    position: relative;
    display: inline-block;
    width: 255px;
    height: 60px;
    margin: 0 0 10px 5px;
    border: 1px solid #d4d4d4;
    border-radius: 30px;
    background-color: #fff;
    box-sizing: border-box
}

.pop_integrate .integration_info .input.password {
    margin-left: 8px;
}

.pop_integrate .integration_info .input input {
    width: 208px;
    height: 54px;
    line-height: 60px;
    margin: 2px 10px 0 20px;
    color: #555;
    border: 0
}

.pop_integrate .integration_info .input label {
    position: absolute;
    left: 20px;
    top: 0;
    height: 58px;
    line-height: 60px;
    font-size: 14px;
    color: #b8b6b6
}

.pop_integrate .verification_info {
    margin-top: 20px;
    height: 215px;
    background: #f4f4f4 url('../../../../assets/img/sub/bg_verification.png') no-repeat center top;
}

.pop_integrate .complete {
    margin-top: 10px;
    padding: 90px 30px 90px;
    background-color: #f4f4f4;
    text-align: center;
    color: #555;
    line-height: 25px;
}

.pop_integrate .complete em {
    font-weight: 700;
    color: #00d4c3
}

.pop_integrate .complete strong {
    font-weight: normal;
    display: block;
    font-size: 24px;
    margin-bottom: 16px;
}

/* 일반 팝업 - 수동 다운로드 */
.pop_download h1 span.dep1::before {
    background-position: 0 -25px
}

.pop_download .install {
    padding: 40px 50px 0
}

.pop_download .install .noti {
    padding-top: 8px;
    color: #9c9c9c
}

.pop_download .install .noti em {
    color: #f94242;
    font-style: normal
}

.pop_download .install li {
    padding-bottom: 40px;
    color: #333;
    font-size: 16px
}

.pop_download .install li:last-child {
    padding-bottom: 0
}

.pop_download .install li span {
    margin: -4px 8px 0 0;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 24px;
    background-color: #33d8c6;
    border: 1px solid #2dafa0;
    border-radius: 50%;
    text-align: center;
    font-family: 'Roboto';
    vertical-align: middle
}

.pop_download .install li em {
    font-style: normal;
    color: #00d4c3
}

.pop_download .install li .img {
    margin-top: 10px
}

/* 일반 팝업 -  2차 비밀번호 해제 */
.pop_sec_pw h1 span.dep1::before {
    background-position: 0 0
}

.pop_sec_pw .pop_contents {
    padding: 40px 50px 0
}

.pop_sec_pw h2 {
    height: 35px;
    font-size: 16px;
    color: #333
}

.pop_sec_pw .txt2 {
    color: #9c9c9c;
    line-height: 22px;
    text-indent: -10px;
    padding-left: 10px
}

.pop_sec_pw .txt2 span {
    color: #f94242;
}

.pop_sec_pw .txt2_a {
    margin-top: 14px;
}

.pop_sec_pw .txt3 {
    color: #767676;
    line-height: 22px;
    margin-bottom: 2px
}

.pop_sec_pw .txt3::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 2px;
    margin-right: 7px;
    vertical-align: middle;
    background-color: #31d9c2;
}

.pop_sec_pw .interaction {
    height: 322px;
    margin: 15px 0 28px;
    padding: 65px 30px 0;
    background-color: #f4f4f4;
    box-sizing: border-box
}

.pop_sec_pw .btn_chk {
    display: block;
    text-indent: 0;
    padding-top: 5px;
    margin-bottom: 40px;
    padding-left: 48px;
    min-height: 30px;
    color: #767676;
    background-position: 0 -150px;
    text-align: left;
    cursor: pointer;
}

.pop_sec_pw .btn_chk strong {
    display: block;
    margin: -5px 0 8px;
    font-size: 16px;
    color: #555;
}

.pop_sec_pw .btn_chk.on {
    background-position: 0 -200px
}

.pop_sec_pw .btn_chk:active,
.pop_sec_pw .btn_chk:focus {
    outline: none;
    border: 0;
}

.pop_sec_pw .btn_chk:last-child {
    margin-bottom: 0
}

.pop_sec_pw .btn_help {
    position: absolute;
    right: 50px;
    top: 500px;
    display: block;
    width: 140px;
    height: 40px;
    line-height: 40px;
    color: #333;
    text-align: center;
    border-radius: 20px;
    border: 1px solid #d4d4d4;
    background-color: #fff;
}

.pop_sec_pw .btn_help:hover {
    background-color: #e4e4e4;
}

.pop_sec_pw .btn_help_a {
    top: 571px;
}

.pop_sec_pw .btns::before {
    content: '';
    position: absolute;
    left: 0;
    top: -7px;
    width: 100%;
    height: 7px;
    border-radius: 4px;
    background-color: #f4f4f4;
}

.pop_sec_pw .btns {
    padding-top: 30px
}

.pop_sec_pw .btns .btn1,
.pop_sec_pw .btns .btn2 {
    width: 250px;
    padding: 0;
}

.pop_sec_pw dl.input {
    overflow: hidden;
    margin-bottom: 35px;
    padding-bottom: 63px;
    border-bottom: 1px solid #dedede
}

.pop_sec_pw dl.input dt {
    float: left;
    font-size: 16px;
    font-weight: 700;
    color: #555;
    line-height: 60px;
    margin-right: 15px;
}

.pop_sec_pw dl.input dd {
    position: relative;
    float: left;
    width: 396px;
    height: 58px;
    line-height: 60px;
    border-radius: 30px;
    border: 1px solid #d4d4d4;
    overflow: hidden;
    background-color: #fff;
}

.pop_sec_pw dl.input dd input {
    width: 244px;
    height: 58px;
    padding: 0 20px;
    line-height: 60px;
    border: 0;
    background-color: #fff;
}

.pop_sec_pw dl.input label {
    color: #b8b6b6;
    position: absolute;
    left: 20px;
    top: 0;
}

.pop_sec_pw .btn_ok,
.pop_sec_pw .btn_re {
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 42px;
    border-radius: 20px;
    background-color: #adadad;
    color: #fff
}

.pop_sec_pw .btn_ok:hover,
.pop_sec_pw .btn_re:hover {
    background-color: #585858;
}

.pop_sec_pw .btn_re {
    position: absolute;
    right: 88px;
    top: 372px;
}

.pop_sec_pw .qna .interaction {
    padding-top: 20px;
    height: 348px;
}

.pop_sec_pw .qna dl.input {
    border: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.pop_sec_pw .qna dl.input dt {
    float: none;
    line-height: 1.2;
    font-weight: normal;
    padding: 7px 0 7px
}

.pop_sec_pw .qna dl.input dt b {
    margin-right: 15px;
}

.pop_sec_pw .qna dl.input dd {
    float: none;
    width: 520px;
    margin-bottom: 13px;
}

.pop_sec_pw .qna dl.input dd input {
    width: 480px;
}

.pop_sec_pw .qna .btn_ok {
    margin: 0 auto 18px;
    display: block;
}

.pop_sec_pw .qna .txt3 {
    padding-top: 15px;
    border-top: 1px solid #dedede
}

.pop_sec_pw .complete .interaction {
    height: 283px;
    text-align: center;
    margin-top: 0
}

.pop_sec_pw .complete .txt1 {
    margin: 30px 0 15px;
    color: #333;
    font-size: 24px
}

.pop_sec_pw .complete .txt2 {
    color: #555;
    font-size: 14px;
    text-indent: 0;
    padding-left: 0
}

.pop_sec_pw .complete .btns {
    padding-top: 0
}

.pop_sec_pw .complete .btns::before {
    display: none;
}

.pop_sec_pw .complete .btns .btn2 {
    width: 130px;
}


/* 레이어 팝업 */
#layerIDchk .input.game_id {
    position: relative;
    width: 340px;
    height: 60px;
    border-radius: 30px;
    background-color: #fff;
    box-sizing: border-box
}

#layerIDchk .input.game_id input {
    width: 194px;
    height: 54px;
    line-height: 60px;
    margin: 2px 10px 0 20px;
    color: #555;
    border: 0
}

#layerIDchk .input.game_id label {
    position: absolute;
    left: 20px;
    top: 0;
    height: 60px;
    line-height: 60px;
}

#layerIDchk .input .btn_id_chk {
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 42px;
    margin-top: 10px;
    background-color: #adadad;
    color: #fff;
    border-radius: 20px
}

#layerIDchk .input .btn_id_chk:hover {
    background-color: #585858;
}

/* 레이어 팝업 - 게임 다운로드 */
.layer_download .modal_header h2 {
    padding-top: 60px;
}

.layer_download .modal_header h2 .icon {
    display: inline-block;
    width: 16px;
    height: 15px;
    margin: -2px 3px 0 0;
    padding: 0;
    vertical-align: middle;
    border: 0;
    background-position: 0 -25px
}

.layer_download .modal_header h2 em {
    display: inline-block;
    color: #fff229;
    font-family: 'Roboto';
    font-style: normal;
    border-bottom: 1px solid #fff229
}

.layer_download .txt1 strong {
    letter-spacing: 1px;
    font-weight: normal
}

.layer_download .txt1 br:last-child {
    display: none;
}

.layer_download .btn_download {
    display: inline-block;
    width: 210px;
    height: 60px;
    line-height: 62px;
    font-size: 18px;
    color: #fff;
    background-color: #585858;
    border-radius: 30px;
}

.layer_download .btn_download:last-child {
    width: 200px;
    margin-left: 90px
}

.layer_download .btn_download:hover {
    background-color: #333;
}

.layer_download .btn_download em {
    font-style: normal;
    color: #ffe329;
}

.layer_download .btn_download .icon {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin: -2px 10px 0 0;
    background-position: 0 -500px;
    vertical-align: middle
}

.layer_download .primary {
    margin-bottom: 30px;
}

.layer_download .primary::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 30px;
    width: 1px;
    height: 60px;
    background-color: #dedede;
}

/* 상시 이벤트 : 주말이벤트 */
.weekly_event {
    position: relative;
    width: 940px;
    margin: 0 auto;
    background: #0084e7 url("../../../s2/game/ca/2019/event/0731_weekly_4A8DAFF0E59D5A95/bg_weekly_event.png") no-repeat;
    font-family: 'Do Hyeon';
}

.weekly_event .main_txt {
    position: relative;
    width: 544px;
    height: 275px;
    margin: 0 auto;
    padding-top: 376px;
    font-size: 35px;
    line-height: 43px;
    color: #fff;
    text-align: center
}

.weekly_event .main_txt span {
    width: 530px;
    display: inline-block;
    vertical-align: middle
}

.weekly_event .main_txt span.align {
    width: 1px;
    height: 120px;
}

.weekly_event dl.info {
    position: relative;
    width: 604px;
    margin: 0 auto 18px;
    overflow: hidden;
}

.weekly_event dl.info dt {
    float: left;
    width: 88px;
    height: 35px;
    line-height: 38px;
    margin-right: 20px;
    font-size: 25px;
    color: #003a8a;
    background-color: #fff;
    border-radius: 18px;
    text-align: center
}

.weekly_event dl.info dt.m {
    background-color: #fcff00;
}

.weekly_event dl.info dd {
    float: left;
    width: 490px;
    padding-top: 4px;
    font-size: 25px;
    color: #ffffff;
    line-height: 28px
}

.weekly_event .hand {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 404px;
    background: url("../../../s2/game/ca/2019/event/0731_weekly_4A8DAFF0E59D5A95/hand.png") no-repeat
}

.weekly_event .help {
    width: 100%;
    margin-top: 40px;
    padding: 52px 0;
    background-color: #003a8a;
}

.weekly_event .help ul {
    width: 590px;
    margin: 0 auto;
    font-size: 18px;
    color: #fff;
    font-family: "NEXONLv1Gothic"
}

.weekly_event .help li {
    text-indent: -14px;
    padding-left: 14px;
    margin: 2px 0
}

.weekly_event .help li::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: -5px 10px 0 0;
    vertical-align: middle;
    background-color: #fff;
}

/* 언제나 공모전 */
.tab_4dep.sort {
    background: transparent;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 22px
}

.tab_4dep.sort input {
    display: none;
    opacity: 0;
}

.tab_4dep.sort label {
    font-size: 14px;
    color: #969696;
    height: 33px;
    line-height: 30px;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tab_4dep.sort label::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 11px;
    background: url('https://lwi.nexon.com/ca/ca2019/sub/board/check_off.png');
    margin-right: 8px;
}

.tab_4dep.sort input[type="radio"]:checked+label,
.tab_4dep.sort label:hover {
    color: #33d8c6;
}

.tab_4dep.sort input[type="radio"]:checked+label::before,
.tab_4dep.sort label:hover::before {
    background: url('https://lwi.nexon.com/ca/ca2019/sub/board/check_on.png')
}

.thumb_list.always .table {
    padding-top: 6px;
}

.thumb_list.always .table li {
    height: 419px;
}

.thumb_list.always .table li .time {
    color: #969696
}

.thumb_list.always .table li .tit_wrap {
    margin: 34px 20px 0px 30px
}

.thumb_list.always .table li .writer {
    margin: 23px 0 18px 0
}

.thumb_list.always .table li .view {
    margin: 0 0 0 0;
    padding: 1px 30px 0 26px
}

.thumb_list.always .table li .like {
    margin: 0 17px 0 15px;
}

.thumb_list.always .table li .tag.always~.like {
    margin: 0 30px 0 15px;
}

.thumb_list.always .select_year {
    margin-bottom: 30px;
}

.thumb_list.always .select_year .selectbox {
    width: 190px;
    height: 58px;
    margin: 35px auto 0;
    position: relative;
    z-index: 5;
}

.thumb_list.always .select_year .selectbox .btn_select {
    width: 190px;
    padding: 5px 6px 6px 16px;
    color: #555;
    background-color: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 30px;
}

.thumb_list.always .select_year .selectbox.show .btn_select {
    border-radius: 30px 30px 0 0;
    border-bottom: 1px solid #eee;
}

.thumb_list.always .select_year .selectbox ul {
    position: relative;
    width: 188px;
    max-height: 140px;
    overflow-x: hidden;
    overflow-y: auto;
    top: 0;
    padding: 12px 0;
    background-color: #fff;
    border-top: 0;
    text-align: left;
    border-bottom: 1px solid #eee
}

.thumb_list.always .select_year .selectbox li:hover a {
    color: #555;
    background-color: #e0f1ef;
}

.thumb_list.always .select_year .selectbox li a {
    padding: 8px 6px 6px 16px
}

.thumb_list.always .select_year .selectbox .btm {
    display: none;
    width: 188px;
    height: 30px;
    border-radius: 0 0 30px 30px;
    border: 1px solid #d4d4d4;
    border-top: 0;
    background-color: #fff;
}

.thumb_list.always .select_year .selectbox.show .btm {
    display: block;
}

.thumb_list.always .table .tag.always {
    min-width: 110px;
    height: 45px;
    position: absolute;
    top: 12px;
    left: 0;
    background: linear-gradient(80deg, #c740f9, #4993ff);
    border-radius: 0px 100px 100px 0px;
    font-size: 14px;
    color: #fff;
    line-height: 45px;
    text-align: center;
    padding: 0 15px;
}

.thumb_list.always .table .tag.always.normal {
    background: linear-gradient(80deg, #33d8c6, #45c8fe);
}

.thumb_list.always .no_data {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.thumb_list.always .no_data .icon {
    width: 120px;
    height: 120px;
    background: url('https://lwi.nexon.com/ca/ca2019/sub/board/icon_bazzi.png');
    margin-top: 100px;
}

.thumb_list.always .no_data h4 {
    font-size: 20px;
    color: #333;
    line-height: 30px;
    padding-top: 17px;
    padding-bottom: 20px;
}

.thumb_list.always .no_data p {
    padding: 12px 23px;
    background-color: #fff;
    color: #0dc4c3;
    font-size: 18px;
    font-weight: bold;
    border-radius: 100px;
}

.thumb_list.always .no_data small {
    color: #969696;
    font-size: 14px;
    margin: 20px 0;
}

#contents.community.always .tag_wrap {
    margin-bottom: 30px;
}

#contents.community.always .notice {
    width: 970px;
    font-size: 14px;
}

#contents.community.always .notice h5 {
    color: #f94242;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

#contents.community.always .notice h5::before {
    content: '';
    display: inline-block;
    background: url(../../../../assets/img/main/spr_icon.png) 0 -1650px no-repeat;
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

#contents.community.always .notice ul {
    margin-bottom: 40px;
}

#contents.community.always .notice li {
    color: #969696;
    line-height: 22px;
    position: relative;
    background: url('../../../../assets/img/sub/bul_dot1.png') no-repeat left 9px;
    padding-left: 8px;
    margin-bottom: 4px;
}