.black_classes{overflow:hidden;position:relative;background-color:#f3f4f8}
.black_classes .inner_classes{position:relative;max-width:1280px;width:100%;min-height:838px;margin:0 auto;padding:0 40px;box-sizing:border-box}/* 2020-04-29 수정 */
.black_classes .tit_classes{position:relative;z-index:10;margin-left:-2px;margin-bottom:38px;padding-top:50px;font-weight:normal;font-size:40px;line-height:46px;letter-spacing:0.02em;color:#333}/* 2020-04-29 수정 */
.black_classes .tit_classes .row_cut{display:block}
.black_classes .bg_smoke{position:absolute;left:0;bottom:0;z-index:10;width:100%;height:100%;background:url(https://akamai-webcdn.kgstatic.net/renewal/static/images/character/main/bg_smoke_200429.png) no-repeat 50% 100%;background-size:cover}/* 2020-04-29 수정 */
.black_classes .area_desc{position:relative;z-index:10;}
.black_classes .tit_class{font-weight:normal;font-size:30px;line-height:34px;letter-spacing:0.02em;color:#333333}
.black_classes .ico_mark{display:inline-block;width:50px;height:50px;margin:0px 12px 0 -4px;background:url(https://akamai-webcdn.kgstatic.net/renewal/static/images/character/ico_mark_201219.png) no-repeat 0 0;background-size:550px 100px;vertical-align:middle}
.black_classes .ico_class{display:block;overflow:hidden;font-size:0;line-height:0;background:url(https://akamai-webcdn.kgstatic.net/renewal/static/images/character/ico_class_201219.png) no-repeat 0 0;background-size:823.5px 300px;text-indent:-9999px}
.black_classes .ico_darkknight{background-position:0 0}
.black_classes .ico_striker{background-position:-50px 0}
.black_classes .ico_mystic{background-position:-100px 0}
.black_classes .ico_warrior{background-position:-150px 0}
.black_classes .ico_sorceress{background-position:-200px 0}
.black_classes .ico_ranger{background-position:-250px 0}
.black_classes .ico_berserker{background-position:-300px 0}
.black_classes .ico_tamer{background-position:-350px 0}
.black_classes .ico_ninja{background-position:-400px 0}
.black_classes .ico_musa{background-position:-450px 0}
.black_classes .ico_maehwa{background-position:0 -50px}
.black_classes .ico_valkyrie{background-position:-50px -50px}
.black_classes .ico_wizard{background-position:-100px -50px}
.black_classes .ico_witch{background-position:-150px -50px}
.black_classes .ico_kunoichi{background-position:-200px -50px}
.black_classes .ico_lahn{background-position:-250px -50px}
.black_classes .ico_archer{background-position:-300px -50px}
.black_classes .ico_shai{background-position:-350px -50px}
.black_classes .ico_guardian{background-position:-400px -50px}
.black_classes .ico_hashashin{background-position:-450px -50px}
.black_classes .ico_nova{background-position:-500px 0px}

.nav_class{position:absolute;left:50%;bottom:31px;z-index:20;padding:0 45px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}/* 2020-04-29 수정 *//* 2020-05-07 수정 */
.nav_class .btn_prev{position:absolute;bottom:0;left:12px;height:118px;outline:0}
.nav_class .ico_prev{width:28px;height:32px;background-position:-750px -40px}
.nav_class .btn_next{position:absolute;bottom:0;right:12px;height:118px;outline:0}
.nav_class .ico_next{width:28px;height:32px;background-position:-750px -75px}
.list_class{width:930px}
.list_class .panel{float:left;padding:100px 8px 20px;outline:none}
.list_class .link_class{display:block;position:relative;width:77px;height:77px;outline:none}
.list_class .link_class .txt_name{display:none;position:absolute;left:50%;bottom:86px;width:97px;margin-left:-48.5px;font-size:18px;line-height:22px;color:#333;text-align:center}
.list_class .link_class:hover .txt_name, .list_class .on .link_class .txt_name{display:block}
.list_class .ico_class{width:73px;height:73px;margin:2px;border-radius:50%}
.list_class .link_class:hover .ico_class, .list_class .on .link_class .ico_class{margin:0;border:2px solid #fff;box-shadow: 2px 3px 9px 0px rgba(0, 0, 0, 0.22)}
.list_class .link_darkknight .ico_class{background-position:0 0}
.list_class .link_darkknight:hover .ico_class, .list_class .on .link_darkknight .ico_class{background-position:0 -75px}
.list_class .link_striker .ico_class{background-position:-75px 0}
.list_class .link_striker:hover .ico_class, .list_class .on .link_striker .ico_class{background-position:-75px -75px}
.list_class .link_mystic .ico_class{background-position:-150px 0}
.list_class .link_mystic:hover .ico_class, .list_class .on .link_mystic .ico_class{background-position:-150px -75px}
.list_class .link_warrior .ico_class{background-position:-225px 0}
.list_class .link_warrior:hover .ico_class, .list_class .on .link_warrior .ico_class{background-position:-225px -75px}
.list_class .link_sorceress .ico_class{background-position:-300px 0}
.list_class .link_sorceress:hover .ico_class, .list_class .on .link_sorceress .ico_class{background-position:-300px -75px}
.list_class .link_ranger .ico_class{background-position:-375px 0}
.list_class .link_ranger:hover .ico_class, .list_class .on .link_ranger .ico_class{background-position:-375px -75px}
.list_class .link_berserker .ico_class{background-position:-450px 0}
.list_class .link_berserker:hover .ico_class, .list_class .on .link_berserker .ico_class{background-position:-450px -75px}
.list_class .link_tamer .ico_class{background-position:-525px 0}
.list_class .link_tamer:hover .ico_class, .list_class .on .link_tamer .ico_class{background-position:-525px -75px}
.list_class .link_ninja .ico_class{background-position:-600px 0}
.list_class .link_ninja:hover .ico_class, .list_class .on .link_ninja .ico_class{background-position:-600px -75px}
.list_class .link_musa .ico_class{background-position:-675px 0}
.list_class .link_musa:hover .ico_class, .list_class .on .link_musa .ico_class{background-position:-675px -75px}
.list_class .link_maehwa .ico_class{background-position:0 -150px}
.list_class .link_maehwa:hover .ico_class, .list_class .on .link_maehwa .ico_class{background-position:0 -225px}
.list_class .link_valkyrie .ico_class{background-position:-75px -150px}
.list_class .link_valkyrie:hover .ico_class, .list_class .on .link_valkyrie .ico_class{background-position:-75px -225px}
.list_class .link_wizard .ico_class{background-position:-150px -150px}
.list_class .link_wizard:hover .ico_class, .list_class .on .link_wizard .ico_class{background-position:-150px -225px}
.list_class .link_witch .ico_class{background-position:-225px -150px}
.list_class .link_witch:hover .ico_class, .list_class .on .link_witch .ico_class{background-position:-225px -225px}
.list_class .link_kunoichi .ico_class{background-position:-300px -150px}
.list_class .link_kunoichi:hover .ico_class, .list_class .on .link_kunoichi .ico_class{background-position:-300px -225px}
.list_class .link_lahn .ico_class{background-position:-375px -150px}
.list_class .link_lahn:hover .ico_class, .list_class .on .link_lahn .ico_class{background-position:-375px -225px}
.list_class .link_archer .ico_class{background-position:-450px -150px}
.list_class .link_archer:hover .ico_class, .list_class .on .link_archer .ico_class{background-position:-450px -225px}
.list_class .link_shai .ico_class{background-position:-525px -150px}
.list_class .link_shai:hover .ico_class, .list_class .on .link_shai .ico_class{background-position:-525px -225px}
.list_class .link_guardian .ico_class{background-position:-600px -150px}
.list_class .link_guardian:hover .ico_class, .list_class .on .link_guardian .ico_class{background-position:-600px -225px}
.list_class .link_hashashin .ico_class{background-position:-675px -150px}
.list_class .link_hashashin:hover .ico_class, .list_class .on .link_hashashin .ico_class{background-position:-675px -225px}
.list_class .link_nova .ico_class{background-position:-750px -150px}
.list_class .link_nova:hover .ico_class, .list_class .on .link_nova .ico_class{background-position:-750px -225px}


.list_classtype{position:absolute;top:50%;right:40px;z-index:10;margin-top:-174px;padding-right:1px;text-align:right}/* 2020-04-29 수정 */
.list_classtype li{line-height:22px}
.list_classtype li + li{margin-top:17px}
.list_classtype .item_vod{display:none;margin-top:64px}/* 2020-04-29 수정 */
.normal .list_classtype .vod_normal{display:block}
.normal .list_classtype .vod_awake,
.normal .list_classtype .vod_succession{display:none}
.awake .list_classtype .vod_awake{display:block}
.awake .list_classtype .vod_normal,
.awake .list_classtype .vod_succession{display:none}
.succession .list_classtype .vod_succession{display:block}
.succession .list_classtype .vod_normal,
.succession .list_classtype .vod_awake{display:none}
.list_classtype .link_classtype{display:block;font-size:18px;line-height:22px;color:#333;text-decoration:none}
.list_classtype .link_classtype:after{display:inline-block;width:13px;height:1px;margin:10px 2px 0 8px;background-color:#333;vertical-align:top;content:'';-webkit-transition:all 0.3s ease;transition:all 0.3s ease}
.list_classtype .on .link_classtype:after{width:55px;margin-left:9px;background-color:#c53835}
.list_classtype .link_vod{display:inline-block;position:relative;width:190px;height:95px;background-color:#000;vertical-align:top;text-decoration:none}
.list_classtype .ico_play{position:absolute;top:50%;left:50%;width:35px;height:40px;margin:-20px 0 0 -19px;background-position:-750px 0}
.list_classtype [class*='link_']:hover .ico_play{background-position:-750px 0}
.list_classtype .thumb_g{display:block;width:190px;height:95px}
.list_classtype .frame_thumb{display:block}
.list_classtype .frame_thumb:before{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.2);content:''}
.list_classtype .txt_vod{display:block;margin-top:12px;font-size:18px;line-height:22px;color:#000;text-align:center;letter-spacing:-0.01em}
.list_classtype .on .link_classtype{color:#c53835}

.detail_class{display:none}
.detail_class.on{display:block}
.detail_class .tag_awake{display:none;margin:-3px 0 0 12px;padding:2px 10px;border:1px solid #696969;font-size:14px;line-height:22px;background-color:#fff;color:#161616;vertical-align:middle}
.detail_class .btn_g2{min-width:200px}
.detail_class .desc_class{width:396px;margin-top:12px;font-size:18px;line-height:30px;letter-spacing:-0.01em;color:#333}/* 2020-04-29 수정 */
.detail_class .desc_class2{display:none}
.detail_class .desc_weapon{margin-top:30px;font-size:18px;line-height:30px;letter-spacing:-0.01em;color:#333}/* 2020-04-29 수정 */
.detail_class .desc_succession{display:none;margin-top:20px;font-size:18px;line-height:30px;letter-spacing:-0.01em;color:#808080}/* 2020-04-29 수정 */
.detail_class .desc_class.desc_class_nova{font-size:15px;line-height:22px;}
.detail_class .desc_weapon.desc_class_nova{font-size:15px;line-height:24px;}
.detail_class .img_char{display:none}
.detail_class .front_char{position:absolute;left:50%;bottom:0;-webkit-animation:fadeInFront .4s ease-in backwards;animation:fadeInFront .4s ease-in backwards}
@keyframes fadeInFront{0%{opacity:0;-webkit-transform:translateX(130px);transform:translateX(130px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
.normal .char_normal{display:block}
.normal .char_awake, .normal .char_succession{display:none}
.awake .char_awake{display:block}
.awake .char_normal, .awake .char_succession{display:none}
.succession .char_succession{display:block}
.succession .char_normal, .succession .char_awake{display:none}
.succession .desc_succession{display:block}

/* 2020-04-29 수정 시작 */
.detail_darkknight .char_normal .front_char{margin-left:-195px}
.detail_darkknight .char_awake .front_char{margin-left:-298px}
.detail_darkknight .char_succession .front_char{margin-left:-141px}
.detail_striker .char_normal .front_char{margin-left:-244px}
.detail_striker .char_awake .front_char{bottom:100px;margin-left:-330px}
.detail_striker .char_succession .front_char{margin-left:-201px}
.detail_mystic .char_normal .front_char{margin-left:-212px}
.detail_mystic .char_awake .front_char{margin-left:-216px}
.detail_mystic .char_succession .front_char{margin-left:-187px}
.detail_warrior .char_normal .front_char{margin-left:-322px}
.detail_warrior .char_awake .front_char{margin-left:-294px}
.detail_warrior .char_succession .front_char{margin-left:-350px}
.detail_sorceress .char_normal .front_char{margin-left:-182px}
.detail_sorceress .char_awake .front_char{margin-left:-511px}
.detail_sorceress .char_succession .front_char{margin-left:-296px}
.detail_ranger .char_normal .front_char{margin-left:-282px}
.detail_ranger .char_awake .front_char{margin-left:-359px}
.detail_ranger .char_succession .front_char{margin-left:-424px}
.detail_berserker .char_normal .front_char{margin-left:-181px}
.detail_berserker .char_awake .front_char{margin-left:-196px}
.detail_berserker .char_succession .front_char{margin-left:-597px}
.detail_tamer .char_normal .front_char{margin-left:-328px}
.detail_tamer .char_awake .front_char{margin-left:-185px}
.detail_tamer .char_succession .front_char{margin-left:-165px}
.detail_ninja .char_normal .front_char{bottom:100px;margin-left:-458px}
.detail_ninja .char_awake .front_char{margin-left:-221px}
.detail_ninja .char_succession .front_char{margin-left:-290px}
.detail_musa .char_normal .front_char{margin-left:-220px}
.detail_musa .char_awake .front_char{margin-left:-201px}
.detail_musa .char_succession .front_char{margin-left:-164px}
.detail_maehwa .char_normal .front_char{margin-left:-153px}
.detail_maehwa .char_awake .front_char{margin-left:-350px}
.detail_maehwa .char_succession .front_char{margin-left:-216px}
.detail_valkyrie .char_normal .front_char{margin-left:-187px}
.detail_valkyrie .char_awake .front_char{margin-left:-714px}
.detail_valkyrie .char_succession .front_char{margin-left:-213px}
.detail_wizard .char_normal .front_char{margin-left:-155px}
.detail_wizard .char_awake .front_char{margin-left:-289px}
.detail_wizard .char_succession .front_char{margin-left:-193px}
.detail_witch .char_normal .front_char{margin-left:-278px}
.detail_witch .char_awake .front_char{margin-left:-190px}
.detail_witch .char_succession .front_char{margin-left:-155px}
.detail_kunoichi .char_normal .front_char{margin-left:-141px}
.detail_kunoichi .char_awake .front_char{margin-left:-238px}
.detail_kunoichi .char_succession .front_char{margin-left:-168px}
.detail_lahn .char_normal .front_char{margin-left:-176px}
.detail_lahn .char_awake .front_char{margin-left:-302px}
.detail_lahn .char_succession .front_char{margin-left:-220px}
.detail_archer .char_normal .front_char{margin-left:-185px}
.detail_archer .char_awake .front_char{margin-left:-342px}
.detail_shai .char_normal .front_char{margin-left:-166px}
.detail_shai .char_awake .front_char{margin-left:-204px}
.detail_guardian .char_normal .front_char{margin-left:-654px}
.detail_guardian .char_awake .front_char{margin-left:-288px}
.detail_guardian .char_succession .front_char{margin-left:-236px}
.detail_hashashin .char_normal .front_char{margin-left:-234px;top:-20px;}
.detail_hashashin .char_awake .front_char{margin-left:-234px;top:-20px;}
.detail_hashashin .char_succession .front_char{margin-left:-234px;top:-20px;}
.detail_nova .char_normal .front_char{margin-left:-234px;top:70px;}
.detail_nova .char_awake .front_char{margin-left:-234px;top:20px;}
.detail_nova .char_succession .front_char{margin-left:-234px;top:0px;}
/* 2020-04-29 수정 끝 */