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

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);


.gnbWrapper {
	min-width: 1280px !important;
}

select::-webkit-scrollbar {
	width: 22px;
}

select::-webkit-scrollbar-thumb {
	background-color: #F3F3F3;
	background-clip: padding-box;
	border: 5px solid transparent;

}

select::-webkit-scrollbar-track {
	background-color: #CCCCCC;
}

html {
	font-size: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 400;
	letter-spacing: -0.01em;
	font-size: 14px;
	overflow-x: hidden;
	color: #333;
}

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 {
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 400;
	letter-spacing: -0.01em;
	font-size: 14px;
	/* color: #a1a7b2; */
	/* font: 14px/22px ng, '맑은 고딕'; */
}

input[type="radio"],
input[type="checkbox"] {
	vertical-align: text-top;
}

input::placeholder,
textarea::placeholder {
	color: #999;
}

ul,
ol,
li {
	list-style: none;
}

img,
fieldset,
textarea {
	border: none;
}

img {
	vertical-align: top;
}

a {
	text-decoration: none;
	color: #000;
}

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: 1px dashed #000
}

button,
input[type="button"],
input[type="submit"],
input[type="image"] {
	cursor: pointer;
	outline: none;
}

.blind {
	overflow: hidden;
	font-size: 0;
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 0;
	height: 0;
}

/* *** layout *** */
#heroes_wrap {
	position: relative;
	min-width: 1280px;
	max-width: 1920px;
	margin: 0 auto;
	background-color: #f3f3f3;
	/* background:#37373d; */
}

#heroes_top {
	position: relative;
	width: 100%;
}

#heroes_contents {
	position: relative;
	margin: 0 auto;

}

#contents {
	width: 1240px;
	margin: 0 auto;
	position: relative;
}

#heroes_footer {
	clear: both;
	padding: 47px 0 50px 0;
	background: #fff;
}

/* ** heroes_top ** */
#header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 6;
	width: 100%;
	display: flex;
	background-color: #fff;
}

#header.default {
	height: 80px;
}

#header .background {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	/* background: url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_gnb_01.png); */
	background-color: rgba(255, 255, 255, 0.95);
}

#header .background:after {
	content: '';
	display: block;
	height: 0;
	width: 100%;
	border-bottom: 1px solid #EDEDED;
	position: absolute;
	left: 0;
	top: 81px;
}

#header>h1 {
	position: absolute;
	top: 18px;
	left: 50px;
	/* 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>h1 a img {
	width: 100%;
}

#header .gnb:after {
	clear: both;
	display: block;
	content: "";
}

#header .gnb {
	position: relative;
	/* margin-left: 323px; */
	color: #555;
	width: 1240px;
	margin: 0 auto;
}

#header .gnb ul {
	height: 0;
	/* margin-bottom: 20px; */
	overflow: hidden;
	opacity: 0;
	/* padding-top: 27px; */
}

#header .gnb>li {
	float: left;
	/* width: 13.2857%; */
	text-align: center;
	padding: 0 20px;

}

/* #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: 80px;
	font-size: 17px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
}

#header .gnb li li {
	margin-bottom: 12px;
	line-height: 100%;
	font-size: 14px;
}

#header .gnb li li:nth-of-type(1) {
	margin-top: 27px;
}

#header .gnb li li:nth-last-of-type(1) {
	margin-bottom: 0;
}

#header .gnb li li a {
	color: #666;
	font-weight: 350;
	display: flex;
	align-items: center;
	justify-content: center;
}
#header .gnb li li a[target="_blank"]:after{
	display: inline-block;
	content: '';
	width: 12px;
	height: 12px;
	background: url(https://lwi.nexon.com/heroes/renewal/common/gnb_blank.png) no-repeat;
	margin-left: 3px;
	vertical-align: middle;
}
#header .gnb li li a:hover {
	text-decoration: none;
	color: #D90000;
}

#header .gnb li li img {
	margin-left: 3px;
	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: fixed;
	top: 63px;
}

#header.scroll.down {
	top: 0;
}


/* #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;
	right: 0;
	z-index: 7;
	/* 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; */
	display: flex;
}

#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/renewal/common/game_start_01_re.png) no-repeat;
}

#start_area .play .btn_start::after {
	opacity: 0;
	background: url(https://lwi.nexon.com/heroes/renewal/common/game_start_02_re.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: 170px;
	height: 80px;
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	position: relative;
	z-index: 6;
}

/* #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;
}

#start_area .safe_wrap {
	display: flex;
	justify-content: flex-end;
}

#start_area .safe_wrap .safe_inner {
	display: flex;
	width: 150px;
	height: 30px;
	background: url(https://lwi.nexon.com/heroes/renewal/common/safe_bg.png);
	justify-content: center;
	position: relative;
	align-items: center;
}

#safe {
	display: none;
	position: absolute;
	top: 30px;
	right: 0px;
	left: auto;
}

#start_area 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;
	border: 1px solid #000;
}

.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;
}



.modal_pop .btn_close {
	position: absolute;
	right: 0;
	top: 0;
	/* width: 40px;
	height: 40px; */
	background: none;
}

.layer_start .modal_wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	width: 440px;
	background-color: #fff;
	padding: 25px 30px 30px;
	box-sizing: border-box;
}

.layer_start .modal_wrap .modal_head h3 {
	font-size: 25px;
	font-weight: 700;
	color: #333;
}

.layer_start .modal_wrap .modal_head .text_box {
	margin-top: 25px;
	font-size: 12px;
	line-height: 20px;
}


.modal_btn_box {
	display: flex;
	margin-top: 20px;
}

.modal_btn_box+.act {
	margin-top: 15px;
}

.modal_btn_box button,
.modal_btn_box .btn_ok {
	color: #fff;
	width: 106px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #D90000;
	margin-right: 10px;
}

.modal_btn_box .big {
	min-width: 210px;
}


.modal_btn_box button:nth-last-of-type(1) {
	margin-right: 0;
}

.modal_btn_box .btn_cancel {
	background-color: #A3A3A3;
	color: #E0E0E0;
}

.modal_btn_box .btn_close {
	position: absolute;
	right: 0;
	top: 0;
	width: auto;
	height: auto;
	background: none;
	text-indent: -9999px;
	overflow: hidden;
}

input.design1 {
	/* visibility: hidden; */
	/* font-size: 0; */
	width: 12px;
	height: 12px;
	margin-right: 5px;
}

label.design1 {
	color: #fff;
	margin-right: 4px;
	font-size: 11px;
	display: flex;
	align-items: center;
}

/* label.design1:before {
	display: inline-block;
	content: "";
	width: 11px;
	height: 11px;
	margin-right: 5px;
	background-color: #efefef;
	border: 1px solid #C4C4C4;
} */

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[class^=b_theme] {
	display: inline-block;
	width: 42px;
	height: 40px;
	background: url(https://lwi.nexon.com/heroes/renewal/common/icon_category.png);
	font-size: 0;
}

em[class^=s_theme] {
	display: inline-block;
	width: 42px;
	height: 20px;
	background: url(https://lwi.nexon.com/heroes/renewal/common/icon_category.png);
	background-position-y: -59px;
	font-size: 0;
}

em[class^=attack_] {
	display: inline-block;
	width: 42px;
	height: 20px;
	font-size: 0;
}

em[class^=attack_1] {
	background: url(https://lwi.nexon.com/heroes/renewal/common/attack_list_bullet1.png) center center no-repeat;
}

em[class^=attack_2] {
	background: url(https://lwi.nexon.com/heroes/renewal/common/attack_list_bullet2.png) center center no-repeat;
}

em[class^=attack_3] {
	background: url(https://lwi.nexon.com/heroes/renewal/common/attack_list_bullet3.png) center center no-repeat;
}

em[class^=attack_4] {
	background: url(https://lwi.nexon.com/heroes/renewal/common/attack_list_bullet4.png) center center no-repeat;
}


/* 공지 */
em[class*=_theme1] {
	background-position-x: 0px;
}

/* 점검 */
em[class*=_theme2] {
	background-position-x: -104px;
}

/* 이벤트 */
em[class*=_theme3] {
	background-position-x: -156px;
}

/* 샵 */
em[class*=_theme5] {
	background-position-x: -208px;
}

/* GM */
em[class*=_theme7] {
	background-position-x: -260px;
}

/* 넥슨 */
em[class*=_theme8] {
	background-position-x: -52px;
}

/* 적용 */
em[class*=_theme10] {
	background-position-x: -360px;
}

/* 추가 */
em[class*=_theme11] {
	background-position-x: -410px;
}

/* 수정 */
em[class*=_theme12] {
	background-position-x: -460px;
}


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

aside.aside button.type1 {
	background-color: #B40016;
	border: 1px solid #AE0000;
	color: #fff;
	font-weight: 500;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	width: 100%;
}

aside.aside button.type2 {
	background-color: #444444;
	color: #BCBCBC;
	font-weight: 500;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	width: 100%;
}

aside.aside .aside_inner {
	margin: 54px 20px;
	position: relative;
}

aside.aside .aside_inner .login_box>h2 {
	width: 190px;
	position: relative;
	left: -6px;
}

aside.aside .aside_inner .login_box .login_form {
	margin-top: -57px;
	position: relative;
}

aside.aside .aside_inner .login_box .login_form button.type1 {
	display: flex;
	flex-direction: column;
	height: 70px;
	font-size: 17px;
}

aside.aside .aside_inner .login_box .login_form .links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 11px;
}

aside.aside .aside_inner .login_box .login_form .links a {
	width: 50%;
	flex: 0 0 auto;
	text-align: center;
	position: relative;
	font-size: 13px;
	line-height: 20px;
	color: #666;
}

aside.aside .aside_inner .login_box .login_form .links a:nth-child(1)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 11px;
	border-right: 1px solid #666666;
}

aside.aside .my_info_box {
	display: flex;
	flex-direction: column;
	align-items: center;
}

aside.aside .my_info_box .my_img {
	width: 130px;
	height: 130px;
	border-radius: 25px;
	overflow: hidden;
	background: url(https://lwi.nexon.com/heroes/renewal/common/login_default_img.png) center center no-repeat;
	position: relative;
}

aside.aside .my_info_box .my_img .my_char {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

aside.aside .my_info_box .my_img .my_char img {
	min-width: 100%;
}

aside.aside .my_info_box .my_img .memo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .8);
	display: none;
}

aside.aside .my_info_box .my_img.gm_memo .memo {
	display: block;
}

aside.aside .my_info_box .my_img .memo a {
	width: 130px;
	height: 130px;
	display: flex;
	justify-content: center;
}

aside.aside .my_info_box .my_img .memo a p {
	margin-top: 30px;
	color: #fff;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	text-align: center;
}

aside.aside .my_info_box .my_img .memo .memo_close {
	position: absolute;
	bottom: 20px;
	left: 50%;
	font-size: 0;
	transform: translateX(-50%);
	display: block;
	width: 25px;
	height: 25px;
	background: url(https://lwi.nexon.com/heroes/renewal/common/login_char_pop_close.png) center center no-repeat;
}


aside.aside .my_info_box .my_text_area {
	text-align: center;
	font-size: 13px;
	line-height: 18px;
	color: #333;
	font-weight: 500;
	margin-top: 9px;
}

aside.aside .my_info_box .my_text_area .info_text {
	display: flex;
	flex-direction: column;
}

aside.aside .my_info_box .my_text_area .info_text a {
	color: #333;
}

aside.aside .my_info_box .my_text_area .info_text em {
	font-size: 11px;
	color: #666666;
	padding-left: 19px;
	background: url(https://lwi.nexon.com/heroes/renewal/common/icon_guild.png) 4px center no-repeat;
}

aside.aside .my_info_box .post_box {
	width: 100%;
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	font-size: 11px;
	height: 30px;
	padding: 0 15px;
	box-sizing: border-box;
	align-items: center;
	color: #999;
	margin-top: 9px;
}

aside.aside .my_info_box .post_box h3 {
	font-weight: 500;
	display: flex;
	align-items: center;
}

aside.aside .my_info_box .post_box h3::before {
	content: '';
	display: block;
	width: 12px;
	height: 10px;
	margin-right: 3px;
	background: url(https://lwi.nexon.com/heroes/renewal/common/icon_letter.png) center center no-repeat;
}

aside.aside .my_info_box .post_box p a {
	color: #555;
}

aside.aside .my_info_box .info_list {
	width: 100%;
	margin-top: 12px;
}

aside.aside .my_info_box .info_list button {
	margin-bottom: 2px;
}

aside.aside .my_info_box .info_list button:nth-last-of-type(1) {
	margin-bottom: 0;
}


aside.aside .aside_list {
	margin-top: 20px;
}

aside.aside .aside_list ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

aside.aside .aside_list ul li {
	margin-top: 4px;
}

aside.aside .aside_list ul li:nth-child(1),
aside.aside .aside_list ul li:nth-child(2) {
	margin-top: 0;
}

aside.aside .aside_list ul li a {
	display: flex;
	width: 88px;
	height: 88px;
	font-size: 0;
	background: url(https://lwi.nexon.com/heroes/renewal/common/btn_aside_list.png);
	position: relative;
}

aside.aside .aside_list ul li a:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: url(https://lwi.nexon.com/heroes/renewal/common/btn_aside_list_on.png);
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}

aside.aside .aside_list ul li a:hover:before {
	opacity: 1;
}

aside.aside .aside_list ul li.secure_code a,
aside.aside .aside_list ul li.secure_code a:before {
	background-position: 0px 0px;
}

aside.aside .aside_list ul li.secure_center a,
aside.aside .aside_list ul li.secure_center a:before {
	background-position: -92px 0px;
}

aside.aside .aside_list ul li.online_consulting a,
aside.aside .aside_list ul li.online_consulting a:before {
	background-position: 0px -92px;
}

aside.aside .aside_list ul li.shoping a,
aside.aside .aside_list ul li.shoping a:before {
	background-position: -92px -92px;
}

aside.aside .aside_list ul li.facebook a,
aside.aside .aside_list ul li.facebook a:before {
	background-position: 0px -184px;
}

aside.aside .aside_list ul li.youtube a,
aside.aside .aside_list ul li.youtube a:before {
	background-position: -92px -184px;
}



/* quick_menu */

/* .quick_menu {
	position:absolute;
	top:0;
	right:0px;
	height: 100%;
	background-color: gray;
	width: 220px;
}

.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 a span {
	position: relative;
	display:block;
	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:#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 10px;
}

#heroes_footer .info .links li:first-child {
	padding-left: 0;
	background: none;
}

#heroes_footer .info .links li a {
	color: #8D8D8D;
	font-weight: 500;
}

#heroes_footer .info .links li a:hover {
	text-decoration: underline;
}

#heroes_footer .info .links li.link_mobile a {
	color: #D90000;
}

#heroes_footer .info .links .privacy a {
	color: #3D3D3D;
	;
}

#heroes_footer .info address {
	clear: both;
	padding: 8px 0 1px 0;
	color: #8D8D8D;
	line-height: 16px;
	letter-spacing: -0.2px;
	font-size: 11px;
}

#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 .info .copy {
	font-size: 11px;
	font-weight: 400;
	margin-top: 15px;
}


#heroes_footer .symbol {
	display: flex;
	align-items: center;
}

#heroes_footer .symbol li {
	/* float: left; */
	/* padding: 0 16px;
	line-height: 20px; */
}

#heroes_footer .symbol li:nth-last-of-type(1){
	margin-bottom: 11px;
}

/* #heroes_footer .symbol li:first-child {
	padding-left: 0;
	border-right: 1px solid #5b5c60;
} */

/* * common * */
#heroes_contents:after,
#header:after,
#column:after,
#contents:after {
	display: block;
	clear: both;
	content: "";
}

#heroes_wrap .frame {
	/* 고정 폭 1200 */
	width: 1240px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

#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: #333;
	font-size: 25px;
	line-height: 100%;
	font-weight: 700;
	padding-right: 20px;
}

.pop_container h2 {
	margin-bottom: 10px;
	color: #333333;
	font-size: 14px;
	font-weight: 500;
}

.pop_container .radio_type1 li label {
	padding-left: 20px;
}

.pop_container .act {
	color: #666;

}

.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: 15;
	height: auto;
	font-size: 12px;
	min-width: 440px;
	/* border: 1px solid #000; */
}

/* .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;
}

.pop_wrap {
	border: 1px solid #000;
	background: #fff;
	position: relative;
	padding: 25px 30px 30px;
}

.pop_container {
	padding: 0;
	margin-top: 25px;
	font-size: 12px;
	line-height: 20px;
}

.pop_container .line {
	display: flex;
	height: 1px;
	background: rgb(196, 196, 196);
	background: linear-gradient(90deg, rgba(196, 196, 196, 1) 0%, rgba(196, 196, 196, 0) 100%);
	margin: 14px 0;
}

.pop_container>p span {
	font-weight: 500;
	font-size: 14px;
}

#gamegrade .pop_container {
	width: 427px;
	height: 162px;
	background: url(https://lwi.nexon.com/heroes/renewal/common/reject_pop_cont.png) center center no-repeat;
}


#winner .pop_wrap {
	/* background-image: url(https://lwi.nexon.com/heroes/renewal/common/game_pop_bg.png); */
	background-position: right 25px bottom 25px;
	background-repeat: no-repeat;
}

#winner .pop_wrap:after {
	content: '';
	position: absolute;
	bottom: 26px;
	right: 26px;
	width: 179px;
	height: 209px;
	background: url(https://lwi.nexon.com/heroes/renewal/common/game_pop_bg.png) center center no-repeat;
}

#winner .pop_wrap .pop_container .subTitle {}

#winner .pop_wrap .pop_container h4 {
	font-size: 14px;
	margin-top: 14px;
	margin-bottom: 5px;
}

#winner .pop_wrap .pop_container>ul {}

.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; */
	line-height: 20px;
}

.popup_layer .safe p {
	color: #a1a7b2;

}

.popup_layer .safe p span {
	color: #d1d3dc;
}

.popup_layer .safe .layer_center {
	background: url(https://ssl.nexon.com/s2/game/heroes/web/2017/bg_popup_05.jpg) center center no-repeat;
	width: 249px;
	height: 96px;
	margin: 19px auto 0;
}


.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;
	font-size: 14px;
	font-weight: 500;
	color: #333;
}

.popup_layer .movie fieldset {
	position: relative;
}

.popup_layer .movie input[type="text"] {
	width: 100%;
	height: 45px;
	margin-top: 10px;
	padding: 2px 10% 2px 4%;
	box-sizing: border-box;
	background: #F3F3F3;
	border: 0;
}

.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-color: rgba(0, 0, 0, .6);
	/* 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 #fff;
	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:1800px) {
	#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: 0 0 0 18%;
	}

	#header .gnb>li {
		padding: 0 10px;
	}
}

@media screen and (max-width:1280px) {
	body {
		overflow-x: scroll;
	}

	#header .gnb {
		margin: 0 0 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;
	} */
}

.filebox {
	display: flex;
	align-items: center;
}

.filebox input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.filebox label {
	color: #8C8C8C;
	font-size: 12px;
	cursor: pointer;
	border: 1px solid #8C8C8C;
	height: 32px;
	display: flex;
	align-items: center;
	padding: 0 20px;
	font-weight: 500;
}

/* named upload */
.filebox .upload-name {
	display: inline-block;
	padding: 0 20px;
	/* label의 패딩값과 일치 */
	font-size: 12px;
	vertical-align: middle;
	border: 0;
	border-radius: .25em;
	-webkit-appearance: none;
	/* 네이티브 외형 감추기 */
	-moz-appearance: none;
	appearance: none;
	color: #1C1C1C;
	font-weight: 500;
	background: none;
}

.filebox .remove_file {
	display: none;
	font-size: 0;
	width: 16px;
	height: 16px;
	background: url(https://lwi.nexon.com/heroes/renewal/common/icon_fileRemove.png) center center no-repeat;
}

.cke_editable {
	border: 1px solid #ddd;
	padding: 5px;
}

.cke_editable .guide_box2 .guide_list{
	display: block;
}