@charset "utf-8";
/* *** reset *** */

html {font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body {
    color:#a1a7b2;
    font:14px/22px ng, '맑은 고딕';
    overflow-x:hidden;
    background:#37373d;
}
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dd,dt,button,fieldset,caption,legend,input,form,textarea,address,table,th,td,img {margin:0;padding:0;}
h1,h2,h3,h4,h5,h6, strong, b {font-weight:600;}
input, select, textarea {color:#a1a7b2;font:14px/22px ng, '맑은 고딕';}
input[type="radio"], input[type="checkbox"] {vertical-align:text-top;}
ul,ol,li {list-style:none;}
img,fieldset,textarea {border:none;}
img {vertical-align:top;}
a {text-decoration:none;color:#a1a7b2;}
a:hover,a:focus {text-decoration:none;color:#fff;}
em, address {font-style:normal;}
table {border-collapse:collapse;border-spacing:0;width:100%;}
th {font-weight:600;}
th,td {word-break:break-all;}
caption,legend {height:0;width:0;overflow:hidden;font-size:0;line-height:0;visibility:hidden;}
button {font:inherit;background:none;border:none;}
button img {display:block;position:relative;}
button span {position: relative;}
label {cursor:pointer;}
hr {border:.5px solid #72767d}
button, input[type="button"], input[type="submit"], input[type="image"] {cursor:pointer; outline:none;}

/* *** layout *** */
#heroes_wrap {
	position:relative;
	min-width:1280px;
	max-width:1920px;
	margin: 0 auto;
	background:#37373d;
}
#heroes_top {
	position:relative;
	width:100%;
}
#heroes_contents {
	position:relative;
	margin:0 auto;
}
#heroes_footer {
	clear:both;
	padding:47px 0 50px 0;
	background:#25252b;
}

/* ** heroes_top ** */
#header {
	position:absolute;
	top:0;
	left:0;
	z-index:6;
	width:100%;
}
#header.default {height:80px;}
#header .background {display:none;position:absolute;top:0;left:0;width:100%;height:0;background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_gnb_01.png);}
#header h1 {
	position: absolute;
	top:29px;
	left:59px;
	width:202px;
	height:43px;
	font-size:0;
	background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/tx_logo_01.png) no-repeat;
}
#header h1 a {display:block;height:100%;}
#header .gnb:after {clear:both;display:block;content:"";}
#header .gnb {
	position:relative;
	margin: 33px 33% 0 17%;
	color:#fff;
}
#header .gnb ul {height:0;margin-bottom:20px;overflow:hidden;}
#header .gnb>li {
	float:left;
	width:13.2857%;
	text-align:center;
}
#header .gnb>li:nth-child(1) {width:12.2857%;}
#header .gnb>li:nth-child(2) {width:15.2857%;}
#header .gnb>li:nth-child(3) {width:14.2857%;}
#header .gnb>li:nth-child(4) {width:15.2857%;}
#header .gnb>li:nth-child(5) {width:10.2857%;}
#header .gnb>li:nth-child(6) {width:14.2857%;}
#header .gnb>li:nth-child(7) {width:18.2857%;}
#header .gnb li strong {display:block;height:47px;font-size:20px;font-weight:600;}
#header .gnb li li {
	margin-bottom:10px;
	font-size:14px;
}
#header .gnb li li a:hover {text-decoration: none}
#header .gnb li li img {margin-left:5px;vertical-align: middle;}
#header .gnb #devNew,.newmenu {display:none;}
#header .gnb #devNew.on, .newmenu.on {display:inline-block}

#header .link {
	position:absolute;
	z-index:5;
	top:0;
	left:50%;
	margin-left:373px;
	font-size:0;
	text-align:center;
}
#header .link a {
	position:relative;
	display:inline-block;
	vertical-align:top;
	width:54px;
	height:54px;
	margin:25px 7.5px 0 7.5px;
	background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bt_sns_01.png) no-repeat;
}
#header .link a:nth-child(1) {background-position:0 0;}
#header .link a:nth-child(2) {background-position:-54px 0;}
#header .link a:nth-child(3) {background-position:-108px 0;}
#header .link img {
	position:absolute;
	top:0;
	right:0;
}
#header.on .gnb + .link {display:block;}
#header.on .link a:nth-child(2) {background-position:-54px -54px;}
#header.on .link a:nth-child(3) {background-position:-108px -54px;}

#header.scroll {
    position:absolute;
    height:78px;
    padding:0;
    background:#1f1f23;
}
#header.scroll .frame {position:relative;height:56px;padding-top:22px;}
#header.scroll h1 {position:static;width:175px;height:37px;background-image:url(https://ssl.nexon.com/s2/game/heroes/web/2017/tx_logo_05.png);}
#header.scroll .gnb {width:68%;margin-top:-30px;}
#header.scroll .start {position:absolute;top:3px;right:-9px;}
#header.scroll .btn_start {position:absolute;top:3px;right:-9px;width: 194px;height: 72px;background:url(https://lwi.nexon.com/heroes/home/common/btn_start_02.png) no-repeat center top}
#header.scroll .btn_start button {display: none;float: left;width: 97px;height: 72px;text-indent: -9999px;overflow: hidden;}
#header.scroll .btn_start:hover button {display: block;}
#header.scroll .btn_start .btn_32bit {background:url(https://lwi.nexon.com/heroes/home/common/bt_start_02_32bit.png) no-repeat}
#header.scroll .btn_start .btn_32bit:hover {background:url(https://lwi.nexon.com/heroes/home/common/bt_start_02_32bit_over.png) no-repeat}
#header.scroll .btn_start .btn_64bit {background:url(https://lwi.nexon.com/heroes/home/common/bt_start_02_64bit.png) no-repeat}
#header.scroll .btn_start .btn_64bit:hover {background:url(https://lwi.nexon.com/heroes/home/common/bt_start_02_64bit_over.png) no-repeat}
#header.scroll .btn_go_nx {position:absolute;top:11px;right:-9px;display: block;width: 170px;height: 58px;padding:12px 0 0 44px;font-size: 13px;line-height: 16px;color:#fff;box-sizing: border-box;background:url(https://lwi.nexon.com/heroes/home/common/btn_go_nx.png) no-repeat;letter-spacing: -1px;}

#header.scroll.down {
    position:fixed;
    left :50%;
    width:1920px;
    margin-left:-960px
}

/* start_area */
#start_area {
	position:absolute;
	top:0;
	left:50%;
    z-index:5;
	width:270px;
	margin-left:322px;
	padding:0 19px;
}
#start_area a {color:#fff}
#start_area .link {
	position:relative;
	z-index:6;
	font-size:0;
	text-align:center;
}
#start_area .link a {
	position:relative;
	display:inline-block;
	vertical-align:top;
	width:54px;
	height:54px;
	margin:25px 7.5px 0 7.5px;
	background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bt_sns_01.png) no-repeat;
}
#start_area .link a:nth-child(1) {background-position:0 0;}
#start_area .link a:nth-child(2) {background-position:-54px 0;}
#start_area .link a:nth-child(3) {background-position:-108px 0;}
#start_area .link img {
	position:absolute;
	top:0;
	right:0;
}
#start_area .play {padding-top:25px;}
#start_area .play .start {
    position:relative;
    width:270px;
    height:270px;
}
#start_area .play .start img {
    position:absolute;
    top:0;
    left:0;
    width:270px;
    height:270px;
    overflow: hidden;
}
#start_area .play .btn_start {
	position: relative;
	width:270px;
	height:270px;
}
#start_area .play .btn_start::before,
#start_area .play .btn_start::after {
	content: '';
	display: block;
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	z-index: 5;
	transition:opacity .3s ease-out;;
	background:url(https://lwi.nexon.com/heroes/home/common/bt_game_start_01.png) no-repeat;
}
#start_area .play .btn_start::after {
	opacity: 0;
	background:url(https://lwi.nexon.com/heroes/home/common/bt_game_start_01_v2_on.png) no-repeat;
}
#start_area .play .btn_start:hover::before {
	opacity: 0;
}
#start_area .play .btn_start:hover::after {
	opacity: 1;
}
#start_area .play .btn_start button {
	position: absolute;
	top:0;
	width: 135px;
	height: 270px;
	text-indent: -9999px;
	overflow: hidden;
	z-index: 7;
}
#start_area .play .btn_32bit {
	left:0;
}
#start_area .play .btn_32bit::before,
#start_area .play .btn_64bit::before {
	content: '';
	display: block;
	position: absolute;
	left:37px;
	top:101px;
	width: 86px;
	height: 60px;
	opacity: 0;
	background:url(https://lwi.nexon.com/heroes/home/common/bt_start_32bit.png) no-repeat;
}
#start_area .play .btn_64bit::before {
	width: 112px;
	left: 6px;
	background:url(https://lwi.nexon.com/heroes/home/common/bt_start_64bit.png) no-repeat;
}
#start_area .play .btn_64bit {
	right:0;
}
#start_area .play .btn_start button::before {
	transition:opacity .3s ease-out;
}
#start_area .play .btn_start:hover button::before {
	opacity: 1;
}
#start_area .play fieldset {
	position:relative;
	height:48px;
	text-align:center;
}
#start_area .play fieldset a {display:inline-block;vertical-align:top;}
#start_area .play fieldset .down {padding-left:27px;background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/ic_down_01.png) 0 3px no-repeat;}
#start_area .play fieldset .safe {display:inline-block;vertical-align:top;}
#start_area .play fieldset .safe_guide {vertical-align: text-top;}
#safe {
	display:none;
	position:absolute;
	top:40px;
	left:-106px;
	text-align:left;
}
#start_area .play fieldset .safe_guide:hover + #safe {display:block;}
#start_area .play label {margin:0;}
#start_area .play label.design1:before {margin-left:12px;}

#start_area .play .ch_msg1 {padding: 30px 0 20px;font-size: 15px;color:#fff;text-align: center;line-height: 19px;}
#start_area .play .ch_msg2 {position: relative;width: 248px;margin:0 auto;padding: 11px 0 11px 38px;border-radius: 5px 5px 0 0;background-color: #002a39;border:1px solid #002a39;color:#eff0f1;font-size: 12px;line-height: 16px;box-sizing: border-box;text-align: center;}
#start_area .play .ch_msg2::before, #start_area .play .btn_go_nx::after {display: inline-block;background: url(https://lwi.nexon.com/heroes/home/common/icon_start_area.png) no-repeat;}
#start_area .play .ch_msg2::before {content: '';position: absolute;left:25px;top:7px; width: 39px;height: 39px;background-position: 0 0;}
#start_area .play .btn_go_nx {width: 248px;height: 57px;display: block;margin:0 auto 60px;background-color: #00a1d8;border-radius: 0 0 5px 5px;border:1px solid #00a1d8;box-sizing: border-box;text-align: center;line-height: 57px;color:#fff;font-size: 14px;letter-spacing: -1px;}
#start_area .play .btn_go_nx::after {content: '';width: 9px;height: 15px;margin:-3px 0 0 10px;background-position: 0 -49px;vertical-align: middle;}


.layer_start {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-width: 1280px;
  z-index: 9999999;
}
.layer_start .dim {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.85;
}
.layer_start .blind {
  position: absolute;
  left: -1000%;
  top: 0;
  width: 1px;
  height: 1px;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  text-indent: -10000px;
}
.layer_start .modal_wrap {
  position: absolute;
  top: 50%;
  left: 50%;
}
.modal_pop .btn_close {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background: none;
}
.layer_start .modal_wrap {
  width: 420px;
  height: 195px;
  margin: -200px 0 0 -210px;
  background: url("https://lwi.nexon.com/heroes/home/common/pop_gamestart_beta.png") no-repeat;
}
.layer_start .btn_ok, .layer_start .btn_cancel {
  position: absolute;
  bottom:34px;
  left:50%;
  margin-left: -82px;
  width: 79px;
  height: 36px;
  text-indent: -9999px;
  overflow: hidden;
}
.layer_start .btn_cancel {
  margin-left: 5px;
}
.layer_start .btn_close {
  position: absolute;
  right: 0;
  top: 0;
  width: 45px;
  height: 45px;
  background: none;
  text-indent: -9999px;
  overflow: hidden;
}

input.design1 {visibility:hidden;width:0;height:0;font-size: 0}
label.design1 {color:#fff;margin-right:12px;}
label.design1:before {
	display:inline-block;
	content: "";
	width:11px;
	height:11px;
	margin-right:5px;
	vertical-align: middle;
	border:1px solid #fff;
	border-radius:2px;
}
input.design1:checked + label.design1:before {background:#fff;}

/* login */
#start_area #login {padding:0 11px;}
.login_form {padding-top:27px;}
.login_form .bt_login {
	color:#fff;
	font-size:16px;
	font-weight:600;
	background:#b01415;
}
.login_form .bt_login.type2 {
	display:block;
	width:100%;
	height:58px;
	border:1px solid #b01415;
	border-radius: 5px;
}
.login_form .bt_login.type2.naver {background:#2e9b09;border-color:#2e9b09}
#login .links {padding-top:13px;text-align:center;font-size:13px;}
#login .login_form .links a {margin-left:10px;padding-left:13px;background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_login_03.png) 0 center no-repeat;}
#login .login_form .links a:hover {text-decoration:underline}
#login .login_form .links a:first-child {margin:0;padding:0;border:none;background:none;}
#login .login_after .links a {
	display:inline-block;
	vertical-align:top;
	width:80px;
	height:22px;
	background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_login_02.png) no-repeat;
}
.login_after {position:relative; padding-top:27px;}
.login_after .info {
	position:absolute;
	top:-7px;
	left:0;
	width:100%;
	font-size:13px;
}
.login_after .info a {padding-left:17px;}
.login_after .info a:hover {text-decoration:underline}
.login_after .info .set {background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/ic_set_01.png) 0 center no-repeat;}
.login_after .info .letter {float:right;}
.login_after .info .letter a {background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/ic_letter_01.png) 0 center no-repeat;}
.login_after .info .letter a span {margin-left:3px;}
.login_after .info .letter em {
	display:none;
	position:absolute;
	top:34px;
	right:0;
	width:246px;
	height:40px;
	padding-top:18px;
	color:#000;
	font-weight:600;
	text-align:center;
	border:1px solid #1e1e22;
	background:#efbc3b;
}
.login_after .info .letter button {position:absolute;top:6px;right:6px;}
.login_after .character {
	width:238px;
	height:40px;
	padding:10px 0 10px 10px;
	background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_login_01.png) no-repeat;
}
.login_after .character .img {
	float:left;
	width:40px;
	height:40px;
	margin-right:8px;
	border:1px solid #0b0d11;
	background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/img_basic_01.jpg) no-repeat;
}
.login_after .character .img img {width:40px;height:40px;}
.login_after .character ul {float:left;margin-top:-2px;}
.login_after .character li span {display:inline-block;width:auto;margin-right:10px;color:#ffba00;font-size:13px;}
.login_after .character .level {color:#fff;}
.login_after .character .level span {color:#ff3d3a;}
.login_after .character .level span + a {
	display: inline-block;
	width:133px;
	height:23px;
	vertical-align: middle;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.login_after .character em {
	display:inline-block;
	width:141px;
	color:#fff;
	font-size:13px;
	font-weight: 600;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	vertical-align:top;
}
.login_after .character .level em {width:125px;}
.login_after .character .level em a {padding-left:15px;}
.login_after .character .level .premier a {background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/ic_premier_01.png) 0 center no-repeat;}
.login_after .character .level .test a {background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/ic_test_01.png) 0 center no-repeat;}
.login_after .character .none {padding-top:9px;color:#fff;}

/* ad */
#heroes_top .ad {
	display:none;
	position:absolute;
	z-index:7;
	top:0;
	left:50%;
	margin-left:630px;
	overflow:hidden;
	background-repeat:no-repeat;
}
#heroes_top .ad a {
	display:block;
	width:330px;
	height:100%;
	font-size:0;
}

/* ** heroes_contents ** */
em.theme1 {color:#00b6d7;}/* 마영전공지 */
em.theme2 {color:#00d733;}/* 점검 */
em.theme3 {color:#ff6000;}/* 이벤트 */
em.theme4 {color:#4b7cb9;}/* 정보 */
em.theme5 {color:#7168c7;}/* 상점 */
em.theme6 {color:#c73037;}/* 보안 */
em.theme7 {color:#ec59ac;}/* GM노트 */
em.theme8 {color:#4b7cb9;}/* 넥슨공지 */

/* quick_menu */
.quick_menu:after,
.quick_menu .type1:after,
.quick_menu .type2:after {display:block;clear:both;content:"";}
.quick_menu a {display:block;float:left;padding:1px;border-bottom:1px solid #3e3e45;background-color:#1a1a1e;}
.quick_menu a:hover {text-decoration: none;}
.quick_menu .type1 a:nth-child(4){margin-bottom:10px;}
.quick_menu a span {
	position: relative;
	display:block;
	width:118px;
	height:116px;
	text-align:center;
	font-size:13px;
	font-weight:bold;
	background:#25252b url(https://ssl.nexon.com/s2/game/heroes/web/2017/img_quick_menu1.png) no-repeat;
}
.quick_menu .type1 a:nth-child(1) span,
.quick_menu .type1 a:nth-child(2) span {height:35px;padding-top:81px;}
.quick_menu .type1 a:nth-child(3) span,
.quick_menu .type1 a:nth-child(4) span {height:38px;padding-top:78px;}
.quick_menu .type1 a:nth-child(1) span {background-position:0 0} /* 보안코드 초기화 */
.quick_menu .type1 a:nth-child(2) span {background-position:0 -116px} /* 보안센터 */
.quick_menu .type1 a:nth-child(3) span {background-position:0 -232px} /* 온라인 상담 */
/* .quick_menu .type1 a:nth-child(4) span {background-position:0 -348px}  마영전 인벤 */
.quick_menu .type1 a:nth-child(4) span {background:#25252b url(https://ssl.nexon.com/s2/game/heroes/web/2017/qm_benefit.png) no-repeat;}
.quick_menu .type1 a.new span::after {content:'';position: absolute;right:15px;top:30px;width: 18px;height: 18px;background: url('https://ssl.nexon.com/s2/game/heroes/web/2017/ic_new_01.png') no-repeat;}


.quick_menu .type2 {clear:both;}
.quick_menu .type2 a {margin-bottom:5px;padding:0;border-bottom:1px solid #25252b;background:none;}
.quick_menu .type2 a:nth-child(1) span {background-position:0 -464px} /* 페이스북 */
.quick_menu .type2 a:nth-child(2) span {background-position:-62px -464px} /* 트위터 */
.quick_menu .type2 a:nth-child(3) span {background-position:0 -524px} /* 유투브 */
.quick_menu .type2 a:nth-child(4) span {background-position:-62px -524px} /* 앱 */
.quick_menu .type2 a:nth-child(2),
.quick_menu .type2 a:nth-child(4){margin-left:8px;}
.quick_menu .type2 span {width:56px;height:56px;font-size:0px;}

/* ** heroes_footer ** */
#heroes_footer .info {margin-bottom:13px;color:#868e9b;font-size:12px;}
#heroes_footer .info .links li {float:left;padding:0 20px;background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_footer_bar.gif) 0 center no-repeat;}
#heroes_footer .info .links li:first-child {padding-left:0;background:none;}
#heroes_footer .info .links li a {color:#acb1ba;font-weight:bold;}
#heroes_footer .info .links li a:hover {text-decoration:underline;}
#heroes_footer .info .links .privacy a {color:#fff;}
#heroes_footer .info address {clear:both;padding:8px 0 1px 0;color:#868e9b;line-height:16px;letter-spacing:-0.2px;}
#heroes_footer .info address a {color:#868e9b;text-decoration:underline;}
#heroes_footer .info address .mail:hover {text-decoration:underline;}
#heroes_footer .symbol:after {display:block;clear:both;content:"";}
#heroes_footer .symbol li {float:left;padding:0 16px;line-height: 20px;}
#heroes_footer .symbol li:first-child {padding-left:0;border-right:1px solid #5b5c60;}

/* * common * */
#heroes_contents:after, 
#heroes_footer:after, 
#header:after,  
#column:after, 
#contents:after, 
.frame:after {display:block;clear:both;content:"";}
#heroes_wrap .frame { /* 고정 폭 1200 */
	width:1200px;
	margin:0 auto;
}  
#heroes_wrap.etc {background-image:url(https://ssl.nexon.com/s2/game/heroes/web/2017/visual_top_02.jpg);}
#heroes_wrap.etc.v1 {background-image:url(https://ssl.nexon.com/s2/game/heroes/web/2017/visual_top_03.jpg);}
.mobile_ver {
	height:64px;
	padding-top:35px;
	text-align:center;
	background:#212021;
	border-top:1px solid #0d0d0d;
}
.hidden {position:absolute;left:0;top:-3000px;line-height:1px;width:1px;height:1px;overflow:hidden;font-size:1px;}
.standard {position:relative;}

/* skip */
#skip_menu {
	position:absolute;
	z-index:99999999;
	top:0;
	left:0;
	width:1px;
	height:1px; 
	margin:-1px; 
	padding:0; 
	clip: rect(0 0 0 0);
	overflow:hidden;
}
#skip_menu.view {
	clip:auto;
	margin-left:0;
	overflow:visible;
}
#skip_menu ul {width:179px;height:38px;padding-left:81px;}
#skip_menu ul li {float:left;margin-left:3px;}
#skip_menu ul li a {display:block;width:56px;font-size:11px;line-height:38px;text-align:center;}
#skip_menu ul li a:hover, #skip_menu ul li a:focus {color:#000;font-weight:bold;}
#skip_menu ul li a span {position:absolute; right:0; top:-1000px;}

/* 배경스토리 */
.layer_stroy {
    display:none;
	position:fixed;
	top:0;
	left:0;
    z-index:8;
	width:100%;
	height:100%;
	background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_dim.png);
}
.layer_stroy .stroy_wrap {
    height:100%;
    overflow-y: scroll;
}
.layer_stroy .stroy_content{
	width:1018px;
	margin:100px auto;
	padding-bottom:140px;
	background:#fff;
}
.layer_stroy .top {position: relative;height:69px;color:#000;font-size:16px;font-weight:600;border-bottom:1px solid #ccc;}
.layer_stroy .top .bt_select {position:relative;width:240px;height:69px;border-right:1px solid #ccc;}
.layer_stroy .top .bt_select:before {
	display:block;
	content:"";
	position:absolute;
	top:28px;
	left:50px;
	width:16px;
	height:14px;
	background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bu_spr_01.png) 0 -743px no-repeat;
}
.layer_stroy .top .bt_select:after {
	display:block;
	content:"";
	position:absolute;
	top:30px;
	right:60px;
	width:17px;
	height:9px;
	background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bu_spr_01.png) 0 -1013px no-repeat; 
/*	background-position:0 1003px;*/ /* 화살표 위방향 */
}
.layer_stroy .top .bt_select:hover + ul, .layer_stroy .top ul:hover {display:block}
.layer_stroy .top ul {
	display:none;
	width:239px;
	padding-top:35px; 
	text-align:center;
	border:1px solid #ccc;
	border-left:none;
	background:#fff;
}
.layer_stroy .top li {margin-bottom:35px;}
.layer_stroy .top a {color:#000}
.layer_stroy .top a:hover {text-decoration:underline}
.layer_stroy .top .bt_close {position:absolute;top:0;right:0;}
.layer_stroy h1 {height:157px;padding-top:90px;text-align:center;}
.layer_stroy h1 em {display:block;margin-bottom:17px;}
.layer_stroy .section {padding: 0 174px;}
.layer_stroy .section img {width:670px;height:430px;margin-bottom:40px;}
.layer_stroy .section p {margin-bottom:40px;padding:0 45px;color:#000;font-size:15px;line-height:28px;}
.layer_stroy .section p span {display:block;padding:28px 0;}
.layer_stroy .section .sign {padding-top:20px;text-align:right;font-size:13px;color:#888;}
.layer_stroy .bt_story_top {display:none;position:fixed;bottom:99px;right:50%;margin-right:-557px;cursor:pointer}

/* ** popup ** */
/* 동영상 팝업 */
#movie_layer {position:fixed;top:50%;left:50%;width:720px;margin:-250px 0 0 -360px;z-index:10}
#movie_layer .movie>p {background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_arr_red.png) no-repeat 53.5% top;padding-top:17px;position:absolute;right:-35px;bottom:13px}
#movie_layer .movie>p>span {color:#fff;font-size:11px;letter-spacing:-1px;background-position:-972px -40px;padding-left:14px}
#movie_layer .movie .load {width:720px;height:450px}
#movie_layer .movie iframe {background:#000;position:relative;z-index:1}
#movie_layer .movie .caption,#movie_layer .movie .caption span,#movie_layer .movie .caption div,.movie_caption,.movie_caption span,.movie_caption div{position:absolute;width:720px;height:30px;left:0}
#movie_layer .movie .caption span,.movie_caption span{top:0;background:#000;z-index:1;opacity:0.65;filter:alpha(opacity=65)}
#movie_layer .movie .caption,.movie_caption{top:420px;display:none;z-index:2}
#movie_layer .movie .caption a,.movie_caption a{position:absolute;right:11px;top:8px;z-index:3}
#movie_layer .movie .caption div,.movie_caption div{width:684px;z-index:2;overflow:hidden}
#movie_layer .movie .caption div p,.movie_caption div p{position:absolute;left:684px;top:0;height:30px;color:#fff;font-size:11px;letter-spacing:-1px;overflow:hidden;line-height:32px;white-space:nowrap}
#movie_layer .movie .btns{overflow:hidden;padding:18px 0 0 0}
#movie_layer .movie .btns a{float:left;width:119px;height:39px;line-height:39px;text-align:center;color:#fff;font-size:12px;background:#61658b;display:inline-block;letter-spacing:-2px;font-weight:bold;border-left:1px solid #525364}
#movie_layer .movie .btns a.copyurl{border-left:0;background:#de2d67}
#movie_layer .movie .btns a.file{border-left-color:#be2758}
#movie_layer .movie .btns a:hover,#movie_layer .movie .btns a:focus{text-decoration:none}
#movie_layer .close {position:absolute;width:27px;height:27px;right:0px;top:-54px;overflow:hidden;padding:14px 14px 14px 15px;border:1px solid #1f1f1f;background:#000}
#movie_layer .close img{float:left}
#transparent_b {position:fixed;left:0;top:0;width:100%;height:100%;z-index:10001;background:#000;}

/* 레이어 팝업 */
.pop_header {position:relative;height:44px;border-bottom:2px solid #0b0d11;background:#212125;}
.pop_header .close {position:absolute;top:0;right:0;}
.pop_header h1 {padding:12px 0 0 24px;color:#808fbc;font-size:16px;}
.pop_container h2 {margin-bottom:16px;color:#d1d3dc;font-size:14px;}
.pop_footer {padding:0 0 32px 0;text-align:center;}
.pop_footer .bt {padding-top:25px;border-top:1px solid #0b0d11;}
.pop_footer .bt.noline {padding-top:0;border-top:none;}
.pop_footer .bt button, .pop_footer .bt a {display:inline-block;margin:0 4px;color:#a1a7b2;border:1px solid #0b0d11;}
.pop_footer .bt span {display:block;padding:5px 24px 7px 24px;border:1px solid #222328;border-top-color:#2f3035;background:#191b1f;}

.popup_layer {position:absolute;top:0;left:0;z-index:7;height:auto;font-size:12px;}
.popup_layer.w1 {width:394px;}
.popup_layer.w2 {width:494px;}
.popup_layer#code, .popup_layer#notp, .popup_layer#uotp {display:none;position:fixed;top: 50%;left: 50%;-webkit-transform: translateY(-50%) translateX(-50%);transform: translateY(-50%) translateX(-50%);}
.popup_layer h1, .popup_layer h2 {font-weight:600;}
.popup_layer .pop_wrap {border:2px solid #0b0d11;background:#36373f;}
.popup_layer .pop_container {padding:0;}
.popup_layer .winner p {padding:26px 24px 21px 24px;color:#a1a7b2;background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_popup_04.png) 286px bottom no-repeat;}
.popup_layer .winner p strong {display:block;margin-bottom:6px;font-size:14px;color:#d1d3dc;}
.popup_layer .winner p strong span {color:#ffba00;}
.popup_layer .section {background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_table_03.gif) repeat-x;}
.popup_layer .winner .section {padding:24px;}
.popup_layer .winner .section:after {display:block;clear:both;content:"";}
.popup_layer .winner dl {float:left;width:auto;}
.popup_layer .winner h2 + dl {margin-right:38px;}
.popup_layer .winner dt {margin-bottom:8px;font-weight:bold;color:#808fbc;}
.popup_layer .winner dd {margin-bottom:5px;font-size:11px;}
.popup_layer .security {padding:31px 0 21px 0;text-align:center;}
.popup_layer .security h2 {margin-bottom:23px;}
.popup_layer .security h2.otp_h2 {margin-bottom:0;}
.popup_layer .security fieldset {display:inline-block;margin-bottom:26px;border-bottom:1px solid #4c4e53;}
.popup_layer .security .otp_join {margin:23px 0;}
.popup_layer .security input {width:164px;height:36px;text-align:center;font:20px Arial;font-size:20px;color:#fff;border:1px solid #0b0d11;background:#262a30}
.popup_layer .security p {font-size:12px;}
.popup_layer .security p strong {color:#ffba00;font-weight:normal;}
.popup_layer .security p.otp_c1 {color:#ffba00;}
.popup_layer .safe {padding:15px 24px 147px 24px;background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_popup_05.jpg) center 90px no-repeat;}
.popup_layer .safe p {color:#a1a7b2;}
.popup_layer .safe p span {color:#d1d3dc;}
.popup_layer .grade {height:215px;padding:21px 24px 32px 24px;background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_table_03.gif) 0 52px repeat-x;}
.popup_layer .grade ul {height:39px;}
.popup_layer .grade li {float:left;width:114px;height:39px;background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_pop_06_off.png) no-repeat;}
.popup_layer .grade li.on {background-image:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_pop_06_on.png)}
.popup_layer .grade li h2 {margin:0;height:42px;padding-top:5px;font-size:12px;text-align:center;color:#fff;cursor:pointer}
.popup_layer .grade .grade_con {display:none;margin-left:-115px;}
.popup_layer .grade .on .grade_con {display:block;}
.popup_layer .grade li:first-child .grade_con {margin-left:0;}
.popup_layer .grade .grade_con strong, .popup_layer .grade .grade_con table {display:block;width:1px;height:1px;font-size:0;}
.popup_layer .report {padding:24px 24px 27px 24px;background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_table_03.gif) 0 195px repeat-x;}
.popup_layer .report li {position:relative;margin-bottom:8px;padding-left:10px;}
.popup_layer .report li:before {
	display:block;
	content:"";
	position:absolute;
	top:9px;
	left:0;
	width:5px;
	height:5px;
	background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bu_spr_01.png) 0 -531px no-repeat;
}
.popup_layer .report p {margin-top:43px;line-height:21px;font-size:11px;}
.popup_layer .movie {padding:25px;}
.popup_layer .movie p {letter-spacing: -0.3px;}
.popup_layer .movie fieldset {position: relative;}
.popup_layer .movie input[type="text"] {
	width: 86%;
	height: 32px;
	margin-top:20px;
	padding:2px 10% 2px 4%;
	background:#262a30;
	border:1px solid #0b0d11;
}
.popup_layer .movie input[type="text"]::-ms-clear {display: none;}
.popup_layer .movie .inputDel {
	position: absolute;
	bottom:14px;
	right:14px;
}

/* 채널링 */
.etc #heroes_contents .guide1 .naver_limit p {margin-bottom:24px;font-size:14px;}
.etc #heroes_contents .guide1 .naver_limit p strong {font-weight:normal;color:#00b6d7;}
.etc #heroes_contents .guide1 .naver_limit .tbl_btn {margin-bottom:1px}
.etc #heroes_contents .guide1 .naver_limit .tbl_btn a {margin:0 5px;}
.etc #heroes_contents .guide1 .tbl_btn .btn.v9 span {width:151px;}

#heroes_footer.naver .copy {margin-bottom:10px;}
#heroes_footer.naver .copy + p {}

/* sitemap */
.sitemap {
    display:none;
	position:absolute;
	top:0;
	left:0;
	z-index:8;
	width:100%;
	height:100%;
	background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_dim.png);
    overflow-y:scroll;
}
.sitemap ul {width:1220px;margin:193px auto;background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_sitemap_02.png) repeat-y;}
.sitemap ul:after {display:block;clear:both;content:""}
.sitemap li {float:left;width:170px;height:100%;padding-bottom:30px;margin-left:5px;text-align:center;font-size:16px;font-weight:600;color:#fff;}
.sitemap li:first-child {margin-left:0;}
.sitemap li strong {display:block;height:45px;margin-bottom:30px;padding-top:24px;font-size:21px;color:#000;background:#af1112;}
.sitemap li a {display:block;margin-bottom:30px;color:#fff;}
.sitemap li a img {margin-left:4px;vertical-align: middle;}
.sitemap a:hover {text-decoration:underline}
.sitemap .sub {display:block;margin:-25px 0 26px 0}
.sitemap .sub a {margin-bottom:4px;font-size:13px;color:#ae696a;}
.sitemap .bt_close, .event_all .bt_close {position: absolute;top:95px;right:50%;margin-right:-26.5px;}

/* event_all */
.event_all {
	display:none;
	position:absolute;
	top:0;
	left:0;
	z-index:8;
	width:100%;
	height:100%;
	background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_dim.png);
    overflow-y:scroll;
}
.event_all .event_wrap div{
	width:1200px;
	margin:196px auto;
} 
.event_all .event_wrap div a {
	position:relative;
	display:inline-block;
	margin:0 0 12px 8px;
	vertical-align: top;
}
.event_all .event_wrap div a:nth-child(3n-2) {margin-left:0;}
.event_all .event_wrap div a:after {
	display:block;
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_event_01.png);
}
.event_all .event_wrap div a:hover:after {
	width:388px;
	height:170px;
	border:2px solid #af1112;
	background:none;
}
.event_all .event_wrap div img {
	width:392px;
	height:174px;
}

/* ncc layer */
.layer_movie{display:none;position:fixed;top:0;left:0;top:0;right:0;bottom:0;width:100%;height:100%;min-width:1280px;z-index:9999998;overflow-y: auto;}
.layer_movie .btn, .layer_report .btn {display: inline-block;overflow: hidden;text-indent: -9999px;background:url(https://lwi.nexon.com/heroes/home/common/spr_ncc.png) no-repeat;}
.layer_movie .dim{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;min-height:100%;background:#000;filter:alpha(opacity=80);opacity:0.8}
.layer_movie .modal_wrap{position:absolute;top:100px;left:50%;width: 928px;margin:0 0 0 -464px;background-color: #1f2025;padding:34px;box-sizing: border-box;border:1px solid #2a2b30}
.layer_movie .btn_close{position:absolute;right:23px;top:33px;width: 37px;height: 21px;background-position: -45px 0}
.layer_movie .btn_refresh {position:absolute;right:61px;top:33px;width: 37px;height: 21px;background-position: 0 0;border-right: 1px solid #4c4f55;}
.layer_movie h2 em {display: block;padding-bottom: 16px;font-size: 14px;color:#6b6f77;font-weight: normal;}
.layer_movie h2 span {display: block;padding-bottom: 24px;font-size: 18px;color:#e7894a;font-weight: normal;}
.layer_movie .player {width: 860px;height: 484px;background-color: #000;}
.layer_movie .movie_info {position: relative;padding-top:28px;word-wrap:break-word;white-space: normal;}
.layer_movie .tit {display: block;padding-bottom: 24px; font-size: 20px;color:#fff;}
.layer_movie .channel {display: block;padding-bottom: 2px;font-size: 15px;color:#81858e}
.layer_movie .hit, .layer_movie .time {font-size: 15px;color:#81858e}
.layer_movie .noti {display: block;margin-top: 22px;padding-top: 24px;border-top:1px solid #2f3139;font-size: 14px;color:#72757b}
.layer_movie .func {position: absolute;right:0;bottom:97px;}
.layer_movie .func button {float: left;}
.layer_movie .btn_like {width: 61px;height: 39px;background-position: -88px 0;}
.layer_movie .btn_like:hover, .layer_movie .btn_like.on {background-position: -157px 0;}
.layer_movie .btn_hate {width: 61px;height: 39px;background-position: -228px 0;margin-left:-1px}
.layer_movie .btn_hate:hover, .layer_movie .btn_hate.on {background-position: -299px 0;}
.layer_movie .btn_report {width: 71px;height: 39px;background-position: -228px 0;margin-left:4px;border:1px solid #2f3139;font-size: 12px;color:#8e97a1;}
.layer_movie .btn_report:hover {color:#fff}

.layer_report {display:none;position:fixed;top:0;left:0;top:0;right:0;bottom:0;width:100%;height:100%;min-width:1280px;z-index:9999999}
.layer_report .dim{position:fixed;top:0;left:0;bottom:0;right:0;width:100%;height:100%;background:#000;filter:alpha(opacity=82);opacity:0.82}
.layer_report .modal_wrap {position:absolute;top:100px;left:50%;width: 460px;height: 600px;margin-left:-230px;background-color: #36373f;box-sizing: border-box;}
.layer_report h3 {height:44px;line-height:44px;font-size: 16px;padding-left: 15px; color:#000;color:#808fbc;border:1px solid #0b0d11;background-color: #212125;}
.layer_report .report {padding:25px 24px 20px;border-top:1px solid #0b0d11;border-bottom:1px solid #0b0d11;}
.layer_report p {margin-bottom: 18px;font-size:14px;color:#d1d3dc;}
.layer_report .report .radio {display: block;margin:8px 0}
.layer_report .report label {font-size: 14px;color:#798292;vertical-align: top;line-height: 16px;}
.layer_report .report input {display: inline-block;width: 16px;height: 16px;vertical-align: top;margin-top:1px}
.layer_report .report .byte {display: block;text-align:right}
.layer_report  textarea{display:block;width:412px;height:176px;margin-top:15px;padding: 12px 15px;resize:none;outline:0;background-color: #fff;border:1px solid #707070;box-sizing: border-box;color:#7c7c7c;font-size: 14px;}
.layer_report  textarea::plac
.layer_report  textarea:disabled {background-color: #d7d7d7;}
.layer_report .btns {margin-top:25px;text-align: center;}
.layer_report .btn_close {position: absolute;right:0;top:0; width: 46px;height: 44px;background-position: 0 -57px;}
.layer_report .btn_ok {display: inline-block;width: 76px;height: 34px;background-position: -142px -57px;}
.layer_report .btn_cancel {display: inline-block;width: 76px;height: 34px;background-position: -56px -57px;}


/* dim */
.dim_pop {
    display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
    z-index:9;
	overflow: auto;
	background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_dim_80.png);
}
.allPoint {cursor:pointer}

/* pc방 팝업 */
.pop_pcbang {display:;position:absolute;z-index:10;top:375px;left:-60px;}
.pop_pcbang p {position:relative;}
.pop_pcbang .bt_close {position:absolute;top:10px;right:10px;display:block;width:28px;height:28px;background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/blank.png) no-repeat;}
.pop_pcbang .bt_close span {font-size:0; visibility:hidden;}

@media screen and (min-width:1920px) {
	#heroes_top .ad {display:block;}	
}

@media screen and (max-width:1600px) {
	#header h1 {
		left:40px;
		width:175px;
		height:37px;
		background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/tx_logo_05.png) no-repeat;
	}
	#header .gnb {margin: 33px 28% 0 18%;}
}

@media screen and (max-width:1280px) {
	body {overflow-x:scroll;}
	#header .gnb {margin: 33px 26% 0 18%;}
}


/* dim */
.dim_pop {
    display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
    z-index:9;
	overflow: auto;
	background:url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_dim_80.png);
}

@media screen and (min-width:1920px) {
    #heroes_wrap {
	    max-width:100%;
	    margin: 0 auto;
    }
    #heroes_top {
	    width:1920px;
        margin:0 auto;
    }
}