@charset "UTF-8";
/* reset */
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, input, textarea, select, button, table, em {
  font-family: "맑은 고딕", "Malgun Gothic", sans-serif;
  font-weight: normal;
  font-size: 16px;
}

img, fieldset {
  border: 0;
  vertical-align: top;
}

ul, ol {
  list-style: none;
}

em, address {
  font-style: normal;
}

a {
  text-decoration: none;
}

a:hover, a:active, a:focus {
  text-decoration: none;
}

html {
  background-color:#230c03;
}

.blind, legend {
  position: absolute;
  left: -1000%;
  top: 0;
  width: 1px;
  height: 1px;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  text-indent: -10000px;
}

button {
  border: 0;
  cursor: pointer;
  vertical-align: top;
  background: transparent;
}

button:focus {
  outline: none;
}

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

#wrapper {
  position: relative;
  width: 100%;
  min-width: 1280px;
  max-width: 2560px;
  min-height: 800px;
  margin: 0 auto;
  overflow: hidden;
  opacity: 0;
}

#header h1 a, #header .util a, #header .util button,.btn{
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  background-image: url("https://lwi.nexon.com/heroes/2022/0106_s4e5_fkt3uwvklfdsgjd/spr_common.png");
  background-repeat: no-repeat;
}

#header {
  z-index: 200;
}
#header h1 {
  position: absolute;
  top: 35px;
  left: 40px;
  z-index: 202;
}
#header h1 a {
  width: 99px;
  height: 62px;
  background-position: 0 0;
}
#header .util {
  position: absolute;
  right: 15px;
  top: 40px;
  width: 223px;
  overflow: hidden;
  z-index: 100;
}
#header .util li {
  position: relative;
  height: 25px;
  float: left
}
#header .util li::before{position: absolute;width: 4px;height: 4px;border-radius: 50%;background-color: #7e7d81;content: '';top: 10px;}
#header .util li:first-child::before{display: none;}
#header .util button, #header .util a {
  position: relative;
  display: block;
  width: 54px;
  height: 100%;
  text-indent: -9999px;
}
#header .util button:hover, #header .util a:hover {
  background-position-y: -196px;
}
#header .btn_start button {
  width: 107px;
  background-position-y: -117px;
}
#header .btn_home a {
  background-position: -111px -117px;
}
#header .btn_hide a {
  background-position: -169px -117px;
}

#footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 145px;
  z-index: 100;text-indent: -100000px;
  background: url("https://lwi.nexon.com/heroes/2022/0106_s4e5_fkt3uwvklfdsgjd/bg_footer.png") center top no-repeat;
}
#footer::after{content: '';position: absolute;width: 410px;height: 41px;left: 50%;margin-left: -205px;bottom: 30px;background: url("https://lwi.nexon.com/heroes/2022/0106_s4e5_fkt3uwvklfdsgjd/spr_common.png") 0 100% no-repeat;}
#container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 903px;
}
#back{position: absolute;width: 100%;height: 100%;background: url("https://lwi.nexon.com/heroes/2022/0106_s4e5_fkt3uwvklfdsgjd/back.png") center -63px no-repeat}
.back{position: absolute;width: 2560px;height: 1376px;left: 50%;margin-left: -1280px;}


.section {
  position: relative;
  width: 100%;
  text-align: center;
}
.spark{position: absolute;width: 100%;height: 100%;bottom: 0;}
.spark span {
  display: block;
  position: absolute;
  background: url("https://lwi.nexon.com/heroes/2021/1202_letty_44D76C4D38ACBC0A/spark.png") 0 0 no-repeat;
  width: 32px;
  height: 28px;
}
.spark .f2, .spark .f7, .spark .f8 {
  width: 29px;
  height: 27px;
  background-position-y: -50px;
}
.spark .f3, .spark .f10, .spark .f11, .spark .f12 {
  width: 43px;
  height: 36px;
  background-position-y: -94px;
}
.spark .f4, .spark .f13 {
  width: 29px;
  height: 27px;
  background-position-y: 100%;
}

#section0 {width: 951px;height: 541px;position: absolute;left: 50%;top: 50%;margin: -270px 0 0 -475px}
.title{position: absolute;width: 100%;height: 333px;}
.title span{position: absolute;background: url("https://lwi.nexon.com/heroes/2022/0106_s4e5_fkt3uwvklfdsgjd/spr_title.png") no-repeat}
.title .t1{width: 361px;height: 50px;top: 0;left: 0;}
.title .t2{width: 361px;height: 50px;top: 0;right: 0;background-position-x: 100%;}
.title .t3{width: 230px;height: 50px;top: 0;left: 361px;background-position-x: -361px;}
.title .t4{width: 100%;height: 250px;top: 15px;left: 0;background-position-y: -113px;}
.title .t5{width: 100%;height: 43px;bottom: 42px;left: 0;background-position-y: -429px;}
.title .t6{width: 100%;height: 42px;bottom: 0;left: 0;background-position-y: 100%;}
#section0 .btn_mov1{position: absolute;width: 172px;height: 172px;left: 50%;bottom: 0;margin-left: -86px;background: url("https://lwi.nexon.com/heroes/2022/0106_s4e5_fkt3uwvklfdsgjd/btn_play.png") no-repeat;text-indent: -100000px;overflow: hidden;}
#section0 .btn_mov1:hover{background-position-y: -253px;}

.screen {
  position: fixed;
  left: 50%;
  top: 0;
  margin-left: -1280px;
  width: 2560px;
  height: 1000px;
  z-index: 100000;
  opacity: 0.8;
  transform: scale(1);
}

/* layer */
.modal_pop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
}

.modal_pop .dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.modal_pop .modal_wrap {
  position: absolute;
  top: 50%;
  left: 50%;
}
.modal_pop .btn_close,
.layer_movie .btn_ytb,
.layer_movie .msg,
.layer_movie h3{display: block;  text-indent: -9999px;  overflow: hidden;background: url("https://lwi.nexon.com/heroes/2022/0106_s4e5_fkt3uwvklfdsgjd/spr_layer.png") no-repeat;}
.modal_pop .btn_close {
  width: 38px;
  height: 34px;
  position: absolute;
  right: 0;
  top: -53px;
  background-position-y: -138px;
}
.modal_pop .btn_close:hover {
  background-position-y: -210px;
}

/* layer movie */
.layer_movie {
  position: fixed;
  z-index: 9999990;
  text-align: center;

}
.layer_movie .dim {
  height: 200%;
  opacity: .9;
}
.layer_movie .modal_wrap {
  width: 1024px;
  height: 660px;
  top: 50%;
  margin: -260px 0 0 -512px;
}

.layer_movie h3{position: absolute;width: 157px;height: 98px;left: 50%;margin-left: -78px;top: -124px;}
.layer_movie .msg {
  display: block;position: relative;
  height: 18px;
  width: 548px;
  margin: 20px auto 0 auto;
  background-position-y: -283px;
}
.layer_movie .btn_ytb {
  display: block;position: relative;
  width: 188px;
  height: 29px;
  background-position-y: -342px;margin: 20px auto 0 auto;
}
.layer_movie .btn_ytb:hover {
  background-position-y: 100%
}
.layer_movie .player {
  width: 1024px;
  height: 576px;
  margin: 0 auto;
}
.layer_movie .player iframe {
  width: 100%;
  height: 100%;
}

.layer_start {
  position: fixed;
}
.layer_start .dim {
  opacity: 0.85;
}
.layer_start .modal_wrap {
  width: 417px;
  height: 176px;
	margin-top: -200px;
	transform: translateX(-50%);
  background: url("https://lwi.nexon.com/heroes/home/common/pop_gamestart_re.png") no-repeat;
}
.layer_start .btn_32bit, .layer_start .btn_64bit {
  position: absolute;
  bottom:40px;
  left:50%;
  margin-left: -84px;
  width: 76px;
  height: 34px;
  text-indent: -9999px;
  overflow: hidden;
}
.layer_start .btn_64bit {
  margin-left: 5px;
}
.layer_start .btn_close {
  position: absolute;
  left: auto;
  right: 0;
  top: 0;
  width: 45px;
  height: 45px;
  background: none;
}

.mobile .layer_movie {
  background: none;
  background-color: #000;
}
.mobile .layer_movie .btn_close {
  left: 50%;
  margin-left: -25px;
}
.mobile .layer_movie h3 {
  display: none;
}
/* responsible */
@media (max-height: 1100px) {
  
}
@media (max-width: 1400px) {
  
}
@media (min-width: 2000px) {
  
}