@charset "utf-8";

/* base */
body,html{height:100%;}
body {color:#555; font-size:14px; font-family:'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; background: #000000;}
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, input, table, tr, th, td, textarea, pre {margin:0; padding:0;}
header, footer, nav, menu,
article, aside, section, hgroup,
figure, figcaption, canvas, details, summary {display:block; margin:0; padding:0;}
table {margin:0; padding:0; border-spacing:0; border-collapse:collapse; border:0;}
h1, h2, h3, h4, h5, h6{font-weight: normal; font-size: 12px;}
fieldset, img {border: none; vertical-align: top;}
ul, ol, li{list-style: none}
em {font-style:normal;}
pre {padding-top: 5px;}
hr {display:none}
address {font-style:normal;}
img{max-width:100%;}
mark{background-color:transparent;}
.clear{clear:both;}
.hide{display:none;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

#skip{position:absolute; overflow:hidden; height:0; width:0; font-size:0; visibility:hidden;}

/* 레이아웃 공통 */
#wrap{display: block; overflow: hidden; width:100%; margin: 0 auto; background:000000;}
#contents{display: block; overflow: hidden; width:100%;}

/* 링크처리 */
a:link {color:#ffffff; text-decoration:none;}
a:visited {color:#636363; text-decoration:none;}
a:hover {color:#414141; text-decoration:none;}
a:active {color:#414141; text-decoration:none;}
a:hover span {text-decoration:none; cursor:pointer;}

/* 입력 form */
html.firefox fieldset {display:table-cell !important;}
button, input[type='button'], input[type='reset'], input[type='submit'] {overflow:visible;} /* ie6 ~ ie7 버튼 길어짐 해결 css */
button:hover, input[type='button']:hover, input[type='reset']:hover, input[type='submit']:hover {text-decoration:none;}
button:hover span {text-decoration:none;}
input, select, textarea, input[type='number']{width:100%; color:#747474; font-size: 1em; border: 1px solid #ffffff; background-color: #000000;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
input{text-align:center; padding:18px 5px 14px 5px;}
select{padding:8px 5px 7px 5px; background-image: url("http://appdata.hungryapp.co.kr/images/mobitalk/sub/select_arrow_gray02.png"); background-repeat: no-repeat; background-size:18px; background-position: right center; -webkit-appearance: none; -moz-appearance: none; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
textarea{height:130px; padding:8px; border: 1px solid #dcdcdc;}
input[type='radio'], input[type='checkbox'] {float:left; width:18px; height:18px; margin-top:6px; display: inline-block; border: 1px solid #cbcbcb; background: #ffffff; cursor: pointer;}
input[type='number']{padding:9px 5px 8px 5px; text-align:right;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color : #848484; font-weight:500;}
label{color:#747474; font-size: 1.0em; line-height: 2.5;}
input::placeholder {color: #727272; opacity: 1;  /* Firefox */}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #727272;}
input::-ms-input-placeholder { /* Microsoft Edge */ color: #727272;}
label.radio_img {float:left; width:25px; height:25px; background:url('http://appdata.hungryapp.co.kr/images/Events/legendwar_new/radio_off.png') no-repeat; background-size:25px 25px;}
input[type="radio"]:checked.radio_img + label.radio_img {background:url('http://appdata.hungryapp.co.kr/images/Events/legendwar_new/radio_on.png') no-repeat; background-size:25px 25px;}
label.image_checkbox {float:left; width:25px; height:25px; background:url('http://appdata.hungryapp.co.kr/images/Events/legendwar_new/checkbox_off.png') no-repeat; background-size:25px 25px;}
input[type="checkbox"]:checked.image_checkbox + label.image_checkbox {background:url('http://appdata.hungryapp.co.kr/images/Events/legendwar_new/checkbox_on.png') no-repeat; background-size:25px 25px;}

/* form_box */
.form_box{overflow: hidden; width:100%;}
.form_box input{width:calc(90% - 140px); float: left; margin-right:1%;}

/* 말줄임 */
.txt_reduce{display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; -webkit-box-orient: vertical;}

/* 배경아이콘 */
.bg_icon{overflow:hidden; line-height:50000; font-size:0; display:inline-block;}

/* 정렬 */
.fl_left {float:left !important;}
.fl_right {float:right !important;}
.fl_clear {clear:both; height:0; font-size:0; line-height:0;}
.dp_block {display:block !important;}
.dp_iblock {display:inline-block !important;}


/*bar*/
#header{position:fixed; left:0; right:0; z-index:10; background:rgba(0,0,0,0.8); border-bottom:1px solid #000000;}
#header .le_header{position:relative; width:1024px; margin:0 auto;}
#header h1{width:17%; }
#header h1 img{width:100%; margin: 7% 0 7% 13%}

#header ul {position:absolute; right:15%; top:37%; width:57.2%; }
#header ul li {float: left; width: 22%; padding:0 1.5%;  }
#header ul li img{width: 100%}

#header .bar_sns{position:absolute; right:4%; top:30%; width:11.5%;}
#header .bar_sns li{float: left;width: 48%; padding: 0 5%}
#header .bar_sns img {width: 90%}

/*main*/
.le_main {background: url('http://appdata.hungryapp.co.kr/images/Events/legendwar_new/bg_01.jpg')no-repeat; background-position: center top;  }
.main {width: 1024px; margin: 0 auto;}
.main img{width: 100%}
.le_main .gs_img100{position:relative; width:1081px; margin:0 auto;}
.le_main .main_img img{width:100%;}
.le_main .h_gnb{position:relative; width:100%; margin:0 auto;}
.le_main .h_gnb ul{position:absolute; right:0; top:0; width:15%; padding:3% 0% 3% 0;}
.le_main .h_gnb ul li{float:left; width:42%; padding:0 0 0 8%;}
.le_main .h_gnb ul li img{width:100%;}

	/************움직이는 버튼 *******************/
	.video-w{position:absolute; top:40%; left:50%;/*animation: mymove 5s infinite;*/ width:50%;}

	.actionCon {
		position:relative;
		 width:100%;
		 height:30%;
		  }
	.actionType1 {
		 width:100%;
		 height:100%;
		 margin:0 auto;
		 padding:10% 0;
		 box-sizing: border-box;
		 font-size: 0;
	}
	.actionType1 .FigureBox {
		 position:relative;
		 display: inline-block;
		 width:100px;
		 height:100px;
		 transform:rotate(0deg) scale(1);
	}
	.actionType1 .FigureBox:nth-child(odd) {
		 width:32%;
		 margin-right:23%;
		 padding:0 10% 0 10%;
		 top:20%;
		 right:15%;
		 animation:rotateFigure linear 1.5s infinite 0s;
		 -webkit-animation:rotateFigure linear 1.5s infinite 0s;
		 -moz-animation:rotateFigure linear 1.5s infinite 0s;
	}
	.actionType1 .FigureBox:nth-child(even) {
		 background-color:#6ebcbb;
		 animation:rotateFigure linear 1.5s infinite 0s;
		 -webkit-animation:rotateFigure linear 1.5s infinite 0s;
		 -moz-animation:rotateFigure linear 1.5s infinite 0s;
	}
	.actionType1 .FigureBox:nth-child(2) {
		 left:-9px;
	}
	.actionType1 .FigureBox:nth-child(3) {
		 left:-18px;
	}
	.actionType1 .FigureBox:nth-child(4) {
		 left:-27px;
	}
	.actionType1 .FigureBox:nth-child(5) {
		 left:-35px;
	}
	@-webkit-keyframes rotateFigure {
		 0%{
		 transform:rotate(0deg) scale(1);
		 -webkit-transform:rotate(0deg) scale(1);
		 -moz-transform:rotate(0deg) scale(1);
		 opacity:1;
	}
	 30%, 70%{
		 transform:scale(.8);
		 -webkit-transform:scale(.8);
		 -moz-transform:scale(.8);
		 opacity:.8;
	}
	 50%{
		 transform:scale(.7);
		 -webkit-transform:scale(.7);
		 -moz-transform:scale(.7);
		 opacity:.8;
	}
	 100%{
		 transform:rotate(0deg) scale(1);
		 -webkit-transform:rotate(0deg) scale(1);
		 -moz-transform:rotate(0deg) scale(1);
		 opacity:1;
	}}
	@keyframes rotateFigure {
		 0%{
		 transform:rotate(0deg) scale(1);
		 -webkit-transform:rotate(0deg) scale(1);
		 -moz-transform:rotate(0deg) scale(1);
		 opacity:1;
	}
	 30%, 70%{
		 transform:scale(.8);
		 -webkit-transform:scale(.8);
		 -moz-transform:scale(.8);
		 opacity:.8;
	}
	 50%{
		 transform:scale(.7);
		 -webkit-transform:scale(.7);
		 -moz-transform:scale(.7);
		 opacity:.8;
	}
	 100%{
		 transform:rotate(0deg) scale(1);
		 -webkit-transform:rotate(0deg) scale(1);
		 -moz-transform:rotate(0deg) scale(1);
		 opacity:1;
	}}


/*사전예약*/
.fbox_1 {width: 950px;  margin: 0 auto; padding: 0 3%}
.le_fbox{position:relative; display:block; overflow: hidden; width:1000px; margin:0 auto; padding:20px 0; font-size: 0.95em; color: #ffffff; line-height: 1.7em; border: 1px solid #ffffff; background-color:rgba(0,0,0,0.6); -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;}

.le_fbox_w {padding: 0 0 70px 0}
.le_MOBILE {display: none}

.radio li{float: left; margin: 0 10px 20px 0;}
.radio_txt {color: #ffffff; }
.re_icon img{width: 15%}
.ios img{width: 25%; }
.btn_y {height: 60px; text-align: center;}
.btn_y img{width: 180px; height: 55px }

.fbox_4 {margin: 5px 0; }
.fbox_4 {margin: 5px 0; }
.fbox_4 li{padding: 3px 0; }
.fbox_4 a{color: #ffffff}
.check {margin: 7px}

.fbox_5 {margin: 0 auto; text-align: center; padding: 15px;}
.fbox_5 img{margin:0; width: 28%}
.fbox_img {width: 90%; margin: 0 auto; padding: 7px 0}

/*스크린샷*/
.le_sc {background: url('http://appdata.hungryapp.co.kr/images/Events/legendwar_new/bg_02_.jpg')no-repeat; background-position: center top; text-align: center; position: relative;}
.sc_text_m {display: none}
.sc_arrow { margin: 0 auto; width: 30%}
.sc_arrow li {display: inline-block; padding: 5px 5px 50px 5px}
.ar img {padding-top: 243%}
.sc_img {padding: 0 0 15px 0}
.sc_2 {display: none}
.sc_3 {display: none}
.sc_4 {display: none}
.sc_5 {display: none}
.sc_6 {display: none}

/*캐릭터*/
.le_ch {background: url('http://appdata.hungryapp.co.kr/images/Events/legendwar_new/bg_03.jpg')no-repeat; background-position: center top; text-align: center; position: relative;}
.ch_img {width: 40%; margin: 0 auto; padding: 0}
.ch_m_img {width: 770px; margin: 0 auto }
.ch_m_img ul {overflow: hidden; display: block;  padding-top: 3px; margin: 0 auto; }
.ch_m_img li { float: left; width: 20%; }
.ch_m_img li img {padding: 2px}
.ch_text {display: none}
.ch_m_img .ch_02 {display: none;}
.ch_arrow{margin: 0 auto; width: 50%}
.ch_arrow img{width: 90%}
.ch_arrow li {display: inline-block; padding: 5px 5px 5px 5px}
.ch {padding: 340px 0 0 0}
.ch_ar img{padding: 45px 0 0 0}

/*이벤트*/
.le_ev{background: url('http://appdata.hungryapp.co.kr/images/Events/legendwar_new/bg_04.jpg')no-repeat; background-position: center top; position: relative;}
.ev_text {text-align: center; width: 1024px; margin: 0 auto;}
.ev_bg_1 {text-align: center;}
.ev_bg_2 {text-align: center;}
.ev_bg_1 {background: url('http://appdata.hungryapp.co.kr/images/Events/legendwar_new/bg_04_2.jpg')no-repeat; text-align: center; margin: 0 auto; height: 1040px; width: 1024px;}

.ev_btn1{padding: 55px 0 0 0}
.ev_btn2 {padding: 760px 0 20px 0}
.ev_btn1 li {display: inline-block; }

/*유의사항*/
.footer {background: url('http://appdata.hungryapp.co.kr/images/Events/legendwar_new/bg_05.jpg')no-repeat; background-position: center top}
.footer_img {text-align: center}

/* responsive */
@media screen and (max-width: 1024px) {
    #header .le_header {width: 100%}
    #header h1{margin: 0 0 0 2%}
    #header ul{position:absolute; right:15%; top:38%; width:57.5%;}
    #header .bar_sns{position:absolute; right:3%; top:27%; width:15%;}
    
    .main {width: 100%}
    .le_main {background: #000000}
    .le_re {position:relative; display:block; overflow: hidden; width:100%; margin:0 auto; background:url('http://appdata.hungryapp.co.kr/images/Events/legendwar_new/bg_1_02.jpg') no-repeat; background-position: center top; background-size:100%;}
    .le_fbox { position:relative; display:block; overflow: hidden; width:94%; margin:0 3% 8% 3%; padding:20px 0; font-size: 0.95em; color: #ffffff; line-height: 1.7em; border: 1px solid #ffffff; background-color:rgba(0,0,0,0.6); -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;}
    .le_fbox_w{padding: 0}
    .fbox_1 {width: 100%; top: 0; }
    .btn_y {width: 160px; float: right; height: 60px }
    .fbox_5 {padding: 10px 0}
    .fbox_5 img {width:172px; }
    .le_PC {display: none}
    .le_MOBILE {display: inline}

    .le_sc{background:#000000}
    .sc_text_m {display: block; }
    .sc_text_p {display: none}
    .sc_m{background: url('http://appdata.hungryapp.co.kr/images/Events/legendwar_new/bg_sc_02_01.jpg')no-repeat; background-position: center top; background-size: 100%; position: relative; width: 100%; height: 100%}
    .sc_arrow{background: url('http://appdata.hungryapp.co.kr/images/Events/legendwar_new/bg_sc_02_02.jpg')no-repeat; background-position: center top; position: relative; width:100%; margin: 0 auto; text-align: center; background-size: 100%}
    .sc_arrow li {display: inline-block; padding: 5px 0 20px 0}
    .ar img{width: 60%; padding: 20px 0 0 0}
    .sc_img {padding:30px 0 0 0; }
    .arrow ul{width: 50%; margin: 0 auto;}
    .arrow1 img {width: 40% }
    .arrow2 img {width: 40%; }
    .sc_img {width: 70%; margin: 0 auto; }
    .sc_img img {padding: 30% 0 0 0}
    
    .le_ch {background:#000000}
    .ch_text{display: none}
    .ch{background: url('http://appdata.hungryapp.co.kr/images/Events/legendwar_new/bg_1024_03.jpg')no-repeat; background-position: center top; background-size: 100%; padding: 27% 0 0 0}
    .ch_img{width: 70%; }
    
    .ch_m_img {width: 80%; margin: 0 auto }
    .ch_arrow ul {margin: 0 auto; width: 100%; padding: 0}
    .ch_arrow li {display: inline-block; padding: 0}
    .ch_ar img{width: 60%; padding: 20px 0 0 0}
    .ch_img {padding:30px 0 0 0}
    .ch_arrow1 img {width: 40% }
    .ch_arrow2 img {width: 40%; }
    
    .le_ev {background: #000000}
    .ev_text {width: 100%}
    .ev_btn2 {width: 100%; padding: 73% 0 3% 0}
    .ev_btn2 img{ width: 55%}
    .ev_bg_1 {background: url('http://appdata.hungryapp.co.kr/images/Events/legendwar_new/bg_04_2.jpg')no-repeat; text-align: center; margin: 0 auto; background-size: 100%; width: 100%; height: 100%}
    .ev_btn1 {padding: 20px}
    .ev_btn1 ul{width: 100%; padding: 20px 2px 0 2px}
    .ev_btn1 li {width: 48% }
 
}
@media screen and (max-width: 660px) {
    .ev_btn2 {padding: 70% 0 3% 0; }
 
}

@media screen and (max-width: 550px) {
    .ev_btn1 ul{padding:10px 0 0 0}
    .video-w{position:absolute; top:34%; left:50%;/*animation: mymove 5s infinite;*/ width:50%;}
}

@media screen and (max-width: 430px) {
    .ev_btn1 ul{padding:5px 0 0 0}
    .video-w{position:absolute; top:20%; left:50%;/*animation: mymove 5s infinite;*/ width:80%;}
    
}

@media screen and (max-width: 330px) {
    .ev_btn2{padding:67% 0 3% 0}
    
}

	/************popup**************/
	#myImg {
	  border-radius: 5px;
	  cursor: pointer;
	  transition: 0.3s;
	}

	#myImg:hover {opacity: 0.7;}


	/* The Modal (background) */
	.modal {
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 1; /* Sit on top */
	  padding-top: 160px; /* Location of the box */
	  left: 0;
	  top: 0;
	  width: 100%; /* Full width */
	  height: 100%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
	}

	/* Modal Content (image) */
	.modal-content {
	  margin: auto;
	  display: block;
	  width: 80%;
	  max-width: 700px;
	  border:2px solid #b71616;
	}

	/* Caption of Modal Image */
	#caption {
	  margin: auto;
	  display: block;
	  width: 80%;
	  max-width: 700px;
	  text-align: center;
	  color: #ccc;
	  padding: 10px 0;
	  height: 150px;
	}

	/* Add Animation */
	.modal-content, #caption {  
	  -webkit-animation-name: zoom;
	  -webkit-animation-duration: 0.6s;
	  animation-name: zoom;
	  animation-duration: 0.6s;
	}

	@-webkit-keyframes zoom {
	  from {-webkit-transform:scale(0)} 
	  to {-webkit-transform:scale(1)}
	}

	@keyframes zoom {
	  from {transform:scale(0)} 
	  to {transform:scale(1)}
	}

	/* The Close Button */
	.close {
	  position: absolute;
	  top: 15px;
	  right: 15px;
	  color: #f1f1f1;
	  font-size: 30px;
	  font-weight: bold;
	  transition: 0.3s;
	}

	.close:hover,
	.close:focus {
	  color: #bbb;
	  text-decoration: none;
	  cursor: pointer;
	}
	/* 100% Image Width on Smaller Screens */
	@media only screen and (max-width: 700px){
	  .modal-content {
		width: 90%;
	  }
	}


	/**video**/
	#myImg_video {
	  border-radius: 5px;
	  cursor: pointer;
	  transition: 0.3s;
	}


	/* The Modal (background) */
	.modal_video  {
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 15; /* Sit on top */
	  padding-top: 160px; /* Location of the box */
	  left: 0;
	  top: 0;
	  width: 100%; /* Full width */
	  height: 100%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
	}

	/* Modal Content (image) */
	.modal-content_video  {
	  margin: auto;
	  display: block;
	  width: 80%;
	  max-width: 700px;
	  border:2px solid #b71616;
	}

	/* Caption of Modal Image */
	#caption_video  {
	  margin: auto;
	  display: block;
	  width: 80%;
	  max-width: 700px;
	  text-align: center;
	  color: #ccc;
	  padding: 10px 0;
	  height: 150px;
	}

	/* Add Animation */
	.modal-content_video , #caption_video  {  
	  -webkit-animation-name: zoom;
	  -webkit-animation-duration: 0.6s;
	  animation-name: zoom;
	  animation-duration: 0.6s;
	}
	.close_video {
	  position: absolute;
	  top: 15px;
	  right: 15px;
	  color: #f1f1f1;
	  font-size: 30px;
	  font-weight: bold;
	  transition: 0.3s;
	}

	.close_video:hover,
	.close_video:focus {
	  color: #bbb;
	  text-decoration: none;
	  cursor: pointer;
	}
	/* 100% Image Width on Smaller Screens */
	@media only screen and (max-width: 700px){
	  .modal-content_video {
		width: 90%;
	  }
	}
	/****/

	.actionType1 .FigureBox:nth-child(odd) {
		 width:50%;
		 margin-right:50%;
		 padding:0 15% 0 15%;
		 top:20%;
		 right:24%;
		 animation:rotateFigure linear 1.5s infinite 0s;
		 -webkit-animation:rotateFigure linear 1.5s infinite 0s;
		 -moz-animation:rotateFigure linear 1.5s infinite 0s;
	}

	.modal-content_video iframe{height:300px;}


#popup_1 { position: relative; width:100%; height:100%; background-color:rgba(0,0,0,0.8); z-index:5000; top:0; left:0;padding-bottom:30px}
.popup {position: relative;  width:1024px;  margin: 0 auto; text-align: center;}
.bg {background:url('http://appdata.hungryapp.co.kr/images/Events/legendwar/bg.png') no-repeat; background-size:100%; min-height:1200px;}
.text {padding-top: 57% }
.close {position: absolute; width: 980px; top: 47% }
.close img{position: absolute; margin-left: 39%}