@font-face {
  font-family: "Nightbeach";
  font-style: normal;
  font-weight: 800;
  src: local("./NightbeachB"), /* computer */
    url("./NightbeachB.eot"), /* IE9 Compat Modes */
    url("./NightbeachB.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("./NightbeachB.woff2") format("woff2"), /* Modern Browsers */
    url("./NightbeachB.woff") format("woff"), /* Modern Browsers */
    url("./NightbeachB.ttf") format("truetype"); /* Safari, Android, iOS */
}


/* Reset */
html,body{width:100%;height:100%; overflow: hidden; background: #ddd;}
html{overflow-y:scroll;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button{margin:0;padding:0}
body,h1,h2,h3,h4,input,button{font-family:'NanumGothic',sans-serif;font-size:11px;color: #333;}
img,fieldset,iframe{border:0 none}
li{list-style:none}
input,select,button{vertical-align:middle}
img{vertical-align:top}
i,em,address{font-style:normal}
label,button{cursor:pointer}
button{
  margin:0;
  padding:0;
  background: transparent;
  border: 0;
}
a{color:#333;text-decoration:none}
a:hover{color:#333; padding-bottom:2px; text-decoration:underline;} 
option{padding-right:6px}
hr{display:none}
legend{width:0}

#container {
	width:100%;
	height:100%;
}


.map_wrap{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width:1280px;
	height:720px;
  background: url("./el_bg.png") no-repeat 0 0
}
.map_wrap li {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 0px;
}
.map_wrap li:nth-child(1){
  top: 137px;
  left: 489px;
}
.map_wrap li:nth-child(2){
  top: 197px;
  left: 489px;
}
.map_wrap li:nth-child(3){
  top: 255px;
  left: 489px;
}
.map_wrap li:nth-child(4){
  top: 313px;
  left: 489px;
}
.map_wrap li:nth-child(5){
  top: 373px;
  left: 489px;
}
.map_wrap li:nth-child(6){
  top: 433px;
  left: 489px;
}
.map_wrap li:nth-child(7){
  top: 490px;
  left: 489px;
}
.map_wrap li:nth-child(8){
  top: 549px;
  left: 489px;
}

.map_wrap li button{
  position: relative;
  top: 0px;
  left: 0px;
  
}
.map_wrap li button img{
  position: absolute;
  top: 0px;
  left: 0px;
}


.popup {
	position: absolute;
	top: 0%;
	left: 0%;
	width:1280px;
	height:720px;
	background: url("e_pop_bg.png") no-repeat;

  display: none;
}
.popup.active{
  display: block;
}

.popup p{
  font-family:'Nightbeach',sans-serif;
  font-weight: bold;
  font-size: 28px;
  color: #242424;
  text-align: center;
  line-height: 1.28;
  letter-spacing: 0.5px;
  margin: 37px 0 0 0;
}
.popup p:first-child{
  margin: 161px 0 0 0;
}

.story_btn{
  position: absolute;
  top: 22px;
  left: 27px;
}

.close_btn{
  position: absolute;
  top: 20px;
  right: 22px;
}