/*common*/
body { background: #000; min-width: 1200px;  }


@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}


a, input, button, select, option {
    outline: none;
    font-family: 'Pretendard-Regular', 'dotum', '돋움', sans-serif;
    color: #000;
}

/* @media (max-width : 1500px) {
	
	table tbody tr td table { width: 70vw !important;  }
} */


/* wrap 내 컨텐츠 중앙정렬 div.element */
.section{ 
	width:100%; 
	max-width: 1500px;
	height:100%;
	position:relative;
	overflow: hidden;
	margin: 0 auto;
}
.element{ 
	position: relative; 
	z-index: 2;
	 /* width: 1500px;  */
	 max-width: 1500px;
	 height:100%; 
	 margin: 0 auto; 
	 overflow:hidden;
}

.wrap {
	background:url('../images/bg_main-full.jpg') center; 	
	background-repeat: no-repeat;
	/* height:1058px; */
	background-size: cover;
	aspect-ratio: 1920/3242;
	width: 100%;
	position: relative;
}

/* main */
#main {
	/* background:url('../images/bg_main.jpg'); 
	background-position: 50% 0;
	background-repeat: no-repeat; */
	height:auto;
	/* background-size: cover; */
}


#main .element { height: 1058px; position: relative; }
#main i { content: ''; display: block; position: absolute; }

#main h1.tit { left: 50%; top: 4%; margin-left: calc(-835px/2); width: 788px; height: 271px; background: url(../images/tit.webp) no-repeat; background-size: contain; font-size: 0; position: absolute; z-index: 5;}
#main i.char1 { left: 56%; top: 9%; margin-left: calc(-994px/2); width: 994px; height: 925px; background: url(../images/char1.webp) no-repeat; background-size: contain; z-index: 4;  }
#main i.char1.moving { animation: moving 3.5s linear infinite alternate;  }
#main i.char2.jump { animation: jump 1.1s ease-in infinite;  }
@keyframes moving {
	
	100% {
		transform: translateY(-1%) rotate(1.5deg);
	}
  }


  @keyframes jump {
	0% {
	  -webkit-transform: translateY(0) scale(1.15, 0.8);
			  transform: translateY(0) scale(1.15, 0.8);
	}
	20% {
	  -webkit-transform: translateY(-35px) scaleY(1.1);
			  transform: translateY(-35px) scaleY(1.1);
	}
	50% {
	  -webkit-transform: translateY(-50px) scale(1);
			  transform: translateY(-50px) scale(1);
	}
	80% {
	  -webkit-transform: translateY(-35px) scale(1);
			  transform: translateY(-35px) scale(1);
	}
	100% {
	  -webkit-transform: translateY(0) scale(1.15, 0.8);
			  transform: translateY(0) scale(1.15, 0.8);
	}
  }

#main i.char2 { left: 61%; top: 53%;  width: 267px; height: 235px; background: url(../images/char2.webp) no-repeat; background-size: contain; z-index: 4; }
#main i.char3 { left: 11%; top: 36%; width: 268px; height: 287px;  background: url(../images/char3.webp) no-repeat; background-size: contain;  z-index: 3; }

@media (max-width : 1750px) {
	#main i.char3 { left: 15%; }
}

#main i.char4 { left: 3%; top: -1%; width: 500px; height: 500px;  background: url(../images/char4.webp) no-repeat; background-position: 0px 0px; z-index: 3; animation: rotate1_ani 3s 1.7s ease-in-out infinite alternate forwards; }
#main i.char5 { left: -1%; top: 50%; width: 500px; height: 500px; background: url(../images/char4.webp) no-repeat; background-position: 9% 134%; z-index: 3; animation: rotate1_ani 4s 1.7s ease-in-out infinite alternate forwards; }
#main i.char6 { right: -2%; top: 50%; width: 500px; height: 500px; background: url(../images/char4.webp) no-repeat; background-position: 108% 109%; z-index: 3; animation: rotate1_ani 2s 1.5s ease-in-out infinite alternate forwards; }

@keyframes rotate1_ani {
	100% {
		transform: rotate(15deg);
	}
}
@media (min-width : 2100px) {
	footer {display: none;}
}

footer { background: url(../images/bg_main-full.jpg) no-repeat; width: 100%; background-position: center -3108px; height: 137px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 3;


}
/* #main .element ul { position: absolute; z-index: 10; top: 830px; left: 50%; margin-left: -316px; width: 1100px; height: 144px; bottom: 0; z-index: 99;}
#main .element ul li{ width: 256px; height: 144px; position: absolute; cursor: pointer; background: url('../images/btn_menu_off.webp') no-repeat; transition: 0.5s all; }
#main .element ul li:hover{background: url(../images/btn_menu_on.webp) no-repeat;}
#main .element ul li.active{background: url(../images/btn_menu_on.webp) no-repeat;}
#main .element ul li.menu1{ background-position: 0 0; left: 0%;}
#main .element ul li.menu2{ background-position: -256px 0px; left: 256px;}
#main .element ul li.menu3{ background-position: -512px 0px; left: 512px;} */


.contentsBox1, .contentsBox2,  .contentsBox3, .contentsBox4 { position: relative; display: block; margin: 0 auto; }
.contentsBox1 { display: flex; justify-content: center; }

.contentsBox1 a { width: 395px; height: 75px; position: absolute; left: 50%; top: 57%; transform: translateX(-50%); z-index: 5;  }


.contentsBox2 { display: flex; justify-content: center; margin-top: 50px; max-width: 1100px; }
.contentsBox2 p { width: auto; white-space: nowrap; height: 40px; position: absolute; color: #9a93bc; font-size: 26px; font-weight: 600; left: 50%; top: 158%; z-index: 5; transform: translateX(-50%); }
.contentsBox2 span { font-size: inherit; } 
.contentsBox2 a { width: 246px; height: 25px; position: absolute; right: 0%; top: 42%; z-index: 5;  }

.contentsBox3 { display: flex; justify-content: center; margin-top: 180px; }

.contentsBox4 { display: flex; justify-content: center; margin-top: 59px; width: 1500px; height: 632px; position: relative; }
.contentsBox4 img { position: relative; left: 78px; }

@media (max-width : 1500px) {
	.contentsBox4 img { position: relative; left: 0px; }
}

/* event1 */ 
#event1{
	/* background:url('../images/bg_event1.jpg'); 
	background-position: 50% 0;
	background-repeat: no-repeat;
	
	background-size: cover; */

	height:2468px;
}
.characterChoice{width:100%; position: relative; height: 2260px; top: 0%; transform: translateY(-235px); z-index: 2;} 
.characterChoice .selectOption { position: absolute; top: 135px; left: 50%; transform: translateX(-50%); display: flex; width: 1100px; justify-content: space-between; }
.characterChoice .selectOption .selArea { background: url('../images/btn_select.webp') no-repeat 290px center; height: 80px; overflow: hidden; width: 355px; background-color:#fff; border:1px solid #998675; box-sizing: border-box;}
.characterChoice .selectOption .selArea select { appearance: none !important; -webkit-appearance:none; -moz-appearance: none; background: transparent; border: none; font-size:28px; font-weight: bold; height: 80px; padding: 5px 13px; width: 355px; color:#261a61; cursor: pointer;}
.characterChoice .selectOption .selArea select:disabled { background-color:#bebcca ; }
select::-ms-expand { display:none; }
a.btn_apply { position: absolute; z-index: 10; top: 111%; left: 50%; width: 499px; height: 96px; cursor: pointer; transform: translateX(-50%); background: url(../images/btn_apply.webp) no-repeat; }
a.btn_apply.cancel { position: absolute; z-index: 10; top: 111%; left: 50%; width: 499px; height: 96px; cursor: pointer; transform: translateX(-50%); background: url(../images/btn_apply_cancel.webp) no-repeat; }


.account_btn { position: absolute; display: inline-block; bottom: 20%; left: 185px; width: 221px; height: 61px; text-indent: -9999px; cursor: pointer; }



/* event2 */
#event2{
	display: none;
	height:13035px;
}
#event2 .popbtn_promotion_equipment { position: absolute; z-index: 10; top: 645px; left: 650px; width: 318px; height: 66px; bottom: 0; cursor: pointer; }
#event2 .popbtn_item { position: absolute; z-index: 10; top: 4581px; left: 319px; width: 387px; height:76px; bottom: 0; cursor: pointer; }
#event2 .popbtn_episode { position: absolute; z-index: 10; top: 5883px; left: 250px; width: 524px; height: 90px; bottom: 0; cursor: pointer; }
#event2 .popbtn_job { position: absolute; z-index: 10; top: 7042px; left: 319px; width: 387px; height: 91px; bottom: 0; cursor: pointer; }
#event2 .popbtn_buff { position: absolute; z-index: 10; top: 4532px; left: 341px; width: 68px; height: 26px; bottom: 0; cursor: pointer; }


/* event3 */
#event3{
	display: none;
	height:2166px;
}


/* 이벤트배경 */
.imgView{ 
	position: absolute; 
	top: 0; 
	left: 50%;
	margin-left:-960px; 
	width:100%;
	z-index:1;
}


#btn_top {
	display: none;
    position: fixed;
    top: 74%;
    left: 86%;
    width: 10.45vw;
    height: 11vw;
    z-index: 9;
    cursor: pointer;
}


/* popup */
.blind{
	display:none; 
	position:absolute; 
	top:0; 
	left:0; 
	background-color:black;
	width:100%; 
	height:4254px; 
	z-index:10; 
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
	filter: alpha(opacity=70); 
	-moz-opacity: 0.7; 
	-khtml-opacity: 0.7;
	 opacity: 0.7;
}
.popup{
	display: none; 
	position: fixed;
	top:50%;
	left:50%; 
	 z-index:15; 
	 
}
.popup div{
	width:100%; 
	height:100%; 
}
.popup .btn_close{
    position: absolute;
    top: 24px;
    right: 23px;
    width: 40px;
    height: 40px;
	z-index: 12;
	cursor: pointer;
}

.pop_alert{
	width:540px;
	height:auto;
	min-height: 100px;
	background-color:#fe7a27;
	border:3px solid #ff4e00;
    margin-left: -270px;
    margin-top: -150px;
}
.pop_alert div{
	background-color:#fff;
	margin:20px;
	height:100%;
	width:auto !important;
	box-sizing: border-box;
	padding:40px 30px 20px 30px;
	text-align: center;
}
.pop_alert div span{
	width:100%;
	height:100%;
	display: block;
	color:#666666;
	font-size: 16px;
	padding:10px;
	box-sizing: border-box;
}
.pop_alert div span em{
	color:#ff0000;
	font-style: normal;
}

.pop_alert .btn_Ok{
	display:inline-block;
	padding:15px 75px;
	background-color:#fe7a27;
	margin-top:20px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	cursor: pointer;
}

.pop_equipment{
    width: 823px;
    height: 800px;
    margin-left: -386px;
    margin-top: -400px;
    overflow-x: hidden;
}

.pop_buff{
    width: 806px;
    height: 652px;
    margin-left: -403px;
    margin-top: -327px;
    overflow-x: hidden;
}

.pop_equipment img.gif1{ 
	position: absolute; bottom: -51569px; right: 81px; width: 153px; height: 153px;
 }
.pop_equipment img.gif2{ 
	position: absolute; bottom: -51847px; right: 81px; width: 153px; height: 153px;
 }
.pop_equipment img.gif3{ 
	position: absolute; bottom: -52126px; right: 81px; width: 153px; height: 153px;
 }
.pop_equipment img.gif4{ 
	position: absolute; bottom: -52406px; right: 81px; width: 153px; height: 153px;
 }
.pop_equipment img.gif5{ 
	position: absolute; bottom: -52685px; right: 81px; width: 153px; height: 153px;
 }
.pop_equipment img.gif6{ 
	position: absolute; bottom: -52964px; right: 81px; width: 153px; height: 153px;
 }
 
.pop_item, .pop_episode, .pop_shadow{
    width: 823px;
    height: 800px;
    margin-left: -386px;
    margin-top: -400px;
    overflow-x: hidden;
}