/*==============================================
web 퍼블리싱 
==============================================*/

/* top 버튼 */
#top{
	display: none;
	position: fixed;
	width: 72px; 
    height: 83px;
    bottom: 3px;
    right: 8px;
    z-index: 11;
}

/* floating */
.floating{
    position: fixed;
    width: 177px;
    height: 259px;
    top: 10px;
    right: 22px;
    z-index: 11;
}
.floating a{
	display: block;
}
.floating .btn_google{
	margin-bottom:5px
}
.floating .icons{
	position: relative;
	margin-top:14px;
	margin-bottom: 7px;
}
.floating .icons.white{
	/* background:url('../images/img_floatingWhiteBar.png') no-repeat left center; */
}
.floating .icons.navy{
	background:url('../images/img_floatingNavyBar.png') no-repeat left center;
}

.floating .icons li{
	background-position: right center;
	background-repeat: no-repeat;
}


.floating .icons li a{
	display: block;
	text-indent: -6000px;
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 100%;
	margin: 0 auto;
}

.floating .icons li.cafe a{
	width:18px;
}

.floating .icons li.ytube a{
	width:23px;
}

.floating .icons li.facebook a{
	width:11px;
}

.floating .icons.white li{
	/* background-image:url('../images/img_floatingWhiteBar.png'); */
}

.floating .icons.white li.cafe a{
	/* background-image:url('../images/btn_white_cafe.png'); */
}
.floating .icons.white li.community a{
	background-image:url('../images/btn_community.png');
	width: 177px;
	height:  161px;
	background-position: 0px;
}

.floating .icons.white li.ytube a{
	background-image:url('../images/btn_white_ytube.png');
}

.floating .icons.white li.facebook a{
	background-image:url('../images/btn_white_facebook.png');
}

.floating .icons.navy li{
	background-image:url('../images/img_floatingNavyBar.png');
}

.floating .icons.navy li.cafe a{
	background-image:url('../images/btn_navy_cafe.png');
}

.floating .icons.navy li.ytube a{
	background-image:url('../images/btn_navy_ytube.png');
}

.floating .icons.navy li.facebook a{
	background-image:url('../images/btn_navy_facebook.png');
}


/* leftFloating */
.leftFloating{
	display: none;
	position: fixed;
    width: 170px;
    height: 142px;
	bottom: 79px;
    right: 0px;
    z-index: 11;
    background: url(../images/img_leftFloting.png) no-repeat;
}
.leftFloating a{
	display: block;
	cursor: pointer;
}

.leftFloating a.btn_leftFlo1 { width: 150px; height: 162px; z-index: 1; position: absolute; top: 12px; left: 10px; }



/******* header *******/
header {
	display: none;
    position: fixed;
    width: 130px;
    height: 420px;
    top: 50%;
    left: 76px;
    margin-top: -210px;
    z-index: 11;

}

header ul {width:100%; height: 100% }
header ul li{position: relative; width: 100%; display: block ; transition: all .3s;}
header ul li:last-child{margin-bottom:0}
header ul li .line{display:block; position: absolute; top:18px; left:8px; width:1px; height:33px;}

header .menu li a {
	display:block; 	
	cursor: pointer;
	width: 100%;
	height:51px; 
	text-indent: -9999px; 
	background-position: 0 0; 
	background-repeat: no-repeat;
	transition: .4s ease-out;
}
header .menu li.menu0 a {background-position:0 0; }
header .menu li.menu1 a{ background-position: 0 -51px; }
header .menu li.menu2 a{ background-position: 0 -101px; } 
header .menu li.menu3 a{ background-position: 0 -152px; }
header .menu li.menu4 a{ background-position: 0 -202px; }
header .menu li.menu5 a{ background-position: 0 -253px; }
header .menu li.menu6 a{ background-position: 0 -303px; }
header .menu li.menu7 a{ background-position: 0 -353px; }

header ul li a{
	background-image:url('../images/nav_menu_off.png'); 
}
header ul li a{
	background-image:url('../images/nav_menu_off.png'); 
}


header ul li a:hover, header ul li.active a{
	background-image:url('../images/nav_menu_on.png'); 
	background-position: 0 0; 
	background-repeat: no-repeat; 
}

header ul li a:hover, header ul li.active a{
	background-image:url('../images/nav_menu_on.png'); 
	background-position: 0 0; 
	background-repeat: no-repeat; 
}


header ul li.menu0 a:hover, header ul li.menu0.active a{background-position:0 0; }
header ul li.menu1 a:hover, header ul li.menu1.active a{background-position:0 -51px; }
header ul li.menu2 a:hover, header ul li.menu2.active a{background-position:0 -101px; }
header ul li.menu3 a:hover, header ul li.menu3.active a{background-position:0 -152px; }
header ul li.menu4 a:hover, header ul li.menu4.active a{background-position:0 -202px; }
header ul li.menu5 a:hover, header ul li.menu5.active a{background-position:0 -253px; }
header ul li.menu6 a:hover, header ul li.menu6.active a{background-position:0 -303px; }
header ul li.menu7 a:hover, header ul li.menu7.active a{background-position:0 -353px; }


/******* footer *******/
footer{position: relative; background-color: #dfdfdf; width:100%; height:50px; line-height:50px; text-align: center;}
footer p{display: inline; font-size: 14px; font-family: 'malgun Gothic'; color:#1c1c1c; font-weight: 100; padding:0 20px;}
footer .flogo img{padding-top:14px}



/******* section 공통 *******/
.section{ 
	width:100%; 
	min-width: 1200px;
	height:100%;
	position:relative;
	overflow: hidden;
	top:0;
	text-align: center;
}
.element{ 
	position: relative; 
	z-index: 2;
	 width: 1200px; 
	 height:100%; 
	 margin: 0 auto; 	 
}

.section .element .title{
	/* padding-top:85px */
	/* width: 0;
	height: 0;
	position: absolute;
	left: -9999px; */

}
.section .element .contents{
	padding-top:0px;
	padding-bottom:115px;
	box-sizing: border-box;
}

/******* #section0 main *******/
#section0 .intro{
	background:url(../images/bg_main.jpg) no-repeat center top;
	background-attachment: fixed;
	height:980px;
}

#section0 .btn_paper{
    position: absolute;
    width:294px;
    height:196px;
    right:0;
	bottom:0;
	z-index: 99;
 }

#section0 .btn_paper img { width:100%; height:100%; border:0px; display:block; position:absolute; top:0px; left:0px; transition: opacity .4s; }
#section0 .btn_paper img:last-child{opacity: 0;}
#section0 .btn_paper:hover img:last-child { opacity:1 }

/* 동영상배경 */
.bgVideoContainer {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 1080px;
    z-index: 1;
}

.bgShadow {
    position: absolute;
    width: 100%;
	height: 1080px;
	background : rgba(0, 0, 0, 0.4);
    /* background: url(../images/bg_shadow.png) no-repeat bottom center; */
}
.bgVideo { 
	/* width: 100%; */
    height: 1080px;
}



#section0 .element .main_logo{
	position: absolute;
    opacity: 1;
    top: 39px;
    left: 50%;
    width: 382px;
    height: 382px;
    margin-left: -191px;
    background: url(../images/img_logo.png) no-repeat;
	transform: scale(0);
}


#section0 .element .main_logo.is-animated{  transform: scale(1); transition: .3s all; }


#section0 h1.tit_main{
	position: absolute; z-index: 1; width: 943px; height: 482px; left: 50%; top: 45%; margin-left: -471.5px; background: url(../images/tit_main.png) no-repeat; text-indent: -9999px; font-size: 0;
}

#section0 i { position: absolute; display: block; z-index: 1; width: 190px; height: 190px; text-indent: -9999px; font-size: 0; transition: 0.5s all; z-index: 5; }

#section0 i.img_mainChar0{ background: url(../images/img_mainChar0.png) no-repeat; left: 189px; top: 396px; animation: swing0 linear 1.6s infinite alternate; }
#section0 i.img_mainChar1{ background: url(../images/img_mainChar1.png) no-repeat; left: 334px; top: 216px; animation: swing1 ease-in-out 1.2s infinite alternate; }
#section0 i.img_mainChar2{ background: url(../images/img_mainChar2.png) no-repeat; left: 447px; top: 368px; animation: swing2 linear 1s infinite alternate; }
#section0 i.img_mainChar3{ background: url(../images/img_mainChar3.png) no-repeat; left: 697px; top: 205px; animation: swing3 ease-in-out 1.2s infinite alternate; }

#section0 i.img_mainChar4{ background: url(../images/img_mainChar4.png) no-repeat; width: 380px; height: 380px; left: 847px; top: 345px; z-index: 0; animation: swing4 ease-in-out 1.2s infinite alternate; }
#section0 i.img_mainChar5{ background: url(../images/img_mainChar5.png) no-repeat; width: 380px; height: 380px; left: 904px; top: 24px; z-index: 0; animation: swing5 ease-in-out 1.6s infinite alternate; }

#section0 .element .main_txt{
	margin:30px 0 15px;
}
#section0 .element .main_txt span{
	opacity: 0;
	display: inline-block;
	animation-name: fade-in-top;
	animation-duration: 3s;
	-webkit-animation-duration: 1s;
  	animation-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);
  	animation-fill-mode: both;
}
#section0 .element .main_txt span:nth-child(1){animation-delay: 1.2s;}
#section0 .element .main_txt span:nth-child(2){animation-delay: 1.3s;}
#section0 .element .main_txt span:nth-child(3){animation-delay: 1.4s;margin-right:15px;}
#section0 .element .main_txt span:nth-child(4){animation-delay: 1.5s;}
#section0 .element .main_txt span:nth-child(5){animation-delay: 1.6s;margin-left:-11px;margin-right:15px;}
#section0 .element .main_txt span:nth-child(6){animation-delay: 1.7s;}
#section0 .element .main_txt span:nth-child(7){animation-delay: 1.8s;}
#section0 .element .main_txt span:nth-child(8){animation-delay: 1.9s;}
#section0 .element .main_txt span:nth-child(9){animation-delay: 2.0s;}


#section0 .light{
	position: relative;
	width:100%;
	top:0;
	left:0;
}
#section0 .light1 {
  display: block;
  position: absolute;
  top: 1px;
  left: 110px;
  height: 2px;
  background: linear-gradient(-45deg, #fef3cb, rgba(0, 0, 255, 0));
  filter: drop-shadow(0 0 6px #ffc800);
  animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
  animation-delay: 3s;
}

#section0 .element {
	z-index: 10;
}

#section0 .element .btn_movie{
	position: absolute;
    top: 560px;
    left: 50%;
	width:93px;
	height:109px;
	margin-left:-46.5px;
    cursor: pointer;
	transition: all .2s;
	transform: scale(0.9);
}

#section0 .element .btn_movie:hover{
	width:93px;
	height:109px;
	transform: scale(1);
}
.hrefArea{
	position: absolute;
	width:100%;
	margin:0 auto;
	top:740px
}
.hrefArea ul {
	display: flex;
	justify-content: center;
}
.hrefArea ul li{
	width:220px;
	height:75px;
	display: table-cell;
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -9999px;
	padding:0 43px;
	transition: .3s;
}
.hrefArea ul li a{
	display: block;
	width:220px;
	height:75px; 
	cursor: pointer;
}
.hrefArea ul li:nth-child(1){
	background-image: url('../images/btn_main2_off.png');
}

.hrefArea ul li:nth-child(2){
	background-image: url('../images/btn_main2_off.png');
}


.hrefArea ul li:nth-child(1):hover{
	background-image: url('../images/btn_main2_on.png');
}
.hrefArea ul li:nth-child(2):hover{
	background-image: url('../images/btn_main2_on.png');
}

.hrefArea ul li:nth-child(1){
	padding:0 43px 0 0;
	background-position: 26px;
}

.hrefArea ul li:nth-last-child(1){
	padding:0 0 0 43px;
	background-position: -210px;
}


/******* 스크롤네비 *******/
.scrolldownContainer {
    position: absolute;
    width: 82px;
    height: 65px;
    z-index: 10;
    top: 86%;
    left: 50%;
	margin-left:-41px;
  }

  .chevron {
	animation:move 1.3s ease-in-out infinite;
	position:absolute;
	bottom:50px;
	left:50%;
	width:2px;
	margin-left:-1px;
	height:10px;
	background-color:#fff;
  }
  
  
/* effect_area 공통 intro 밑*/
#effect_area {width: 1900px; position: absolute; height: 100%; z-index: 2; left: 50%; top: 0; margin-left: -950px; } 
.crt{position: absolute; top:0;left:0; transform:translateX(-1000px); transition: 0.5s all; z-index: 1;}



/******* #section(이벤트) *******/
#sectionEvent .intro {
	background:url(../images/bg_update1.jpg) no-repeat center top; 
	background-attachment: fixed;
}




/****** #section1 (레벨 달성 선착순 이벤트) ******/
#section1 {
	position: absolute; top: 1px; left: 50%; margin-left: -50%; height: 950px; width: 100%;
}
 
/****** #section2 (기념 쿠폰이벤트) ******/
#section2 {
	position: absolute; top: 961px; left: 50%; margin-left: -50%; height: 1035px; width: 100%; z-index: 11;
}
/****** #section3 (신규 모함가 이벤트) ******/
#section3 {
	position: absolute; top: 2018px; left: 50%; margin-left: -50%; height: 1020px; width: 100%;
}
/****** #section4 (신규 모함가 이벤트) ******/
#section4 {
	position: absolute; top: 3053px; left: 50%; margin-left: -50%; height: 1020px; width: 100%; z-index: 11;
}
.ninjaEvent_joinBtn { position: absolute; z-index: 1; width: 517px; height: 68px; left: 341px; top: 659px; cursor: pointer; }


.eventContents_img { position: relative; z-index: 10; } 

#section2 form { position: relative; top: 594px; }
#section2 .btn_userIDCheck { position: absolute; z-index: 1; width: 88px; height: 18px; left: 67%; top: 880px; cursor: pointer; }
#section2 .leftChar { background: url(../images/img_leftChar.png) no-repeat; position: fixed; z-index: 1; width: 814px; height: 917px; right: -100%; top: 196px; transition: 0.7s all;}
#section2 .leftChar.is-animated{  right: -8%; }
#section3 .rightChar1 { background: url(../images/img_rightChar1.png) no-repeat; position: fixed; z-index: 1; width: 814px; height: 917px; left: -100%; top: 196px; transition: 0.7s all;}
#section3 .rightChar1.is-animated{  left: -11%; }
#section4 .rightChar2 { background: url(../images/img_rightChar2.png) no-repeat; position: fixed; z-index: 1; width: 1400px; height: 917px; right: -100%; top: 196px; transition: 0.7s all;}
#section4 .rightChar2.is-animated{  right: 4%; }

.serverSelect,  input[type="text"]{
    border: 4px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to left, #9f6deb 0%, #9f6deb 50%, #9f6deb 100%);
	-webkit-border-image-source: linear-gradient(to left, #9f6deb 0%, #9f6deb 50%, #9f6deb 100%);
	width: 670px;
	height: 68px;
	box-sizing: border-box;
	margin :  0 auto;

}
.serverSelect select option { color: #fff; }

 .serverSelect{margin-bottom:7px;}
 .serverSelect select{width:100%; appearance: none !important; -webkit-appearance:none; -moz-appearance: none; background: transparent; border: none; font-size:20px; height: 100%; padding: 5px  49px 5px 10px; width: 100%; cursor: pointer; 
	
}
 .serverSelect select,  input[type="text"]{ color: #fff; box-sizing:border-box; font-size: 20px; text-align: center; background: #000000; }
 input[type="text"]::placeholder{color: #fff;}
.voteBox .btn_ok{position: absolute; display: block; width: 670px; height: 70px; cursor: pointer; left: 0%; top: 154px;} 
.img_select { cursor: pointer; background: url(../images/btn_select.jpg) no-repeat; position: absolute; right: 141px; top: 1px; z-index: 1; display: block; width: 47px; height: 48px; }

 .serverSelect select {
	background-image: url(../images/btn_select.jpg), linear-gradient(to right, rgba(0,0,0), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat; background-position: 598px 0px, right;
}
.serverSelect_btnOk { width: 670px; height: 68px; position: relative; margin: 9px auto; display: block; }




.img_txtWrap { position: absolute; z-index: 1; width: 716px; height: 88px; left: 50%; top: 37%; background: url('../images/img_txtWrap.png') no-repeat; margin-left: -315px; }



/****** #section5 (신규직업) ******/
#section5 {
	overflow: inherit;
}
#section5 .intro{
	background:url(../images/bg_update3.jpg) no-repeat center top; 
	height: 980px;
	background-attachment: fixed;
}
/* #section5 div.newjobIntro { width: 400px; height: 810px; position: absolute; transform: translate(-1000px, 0px); z-index: 10; background: url(../images/img_newjobIntro.png) no-repeat; transition: 0.5s all; } */
#section5 div.newjobIntro { display: none; width: 400px; height: 810px; position: absolute; transform: translate(721px, -999px); z-index: 10; background: url(../images/img_newjobIntro.png) no-repeat; transition: 0.5s all; }
#section5 div.ninjaM { width: 1145px; height: 1100px; position: absolute; transform: translate(-200%, -2%); z-index: 10; background: url(../images/img_ninjaM.png) no-repeat; transition: 0.5s all; }
#section5 div.ninjaW { width: 1145px; height: 1100px; position: absolute; transform: translate(-200%, -9%); z-index: 10; background: url(../images/img_ninjaW.png) no-repeat; transition: 0.5s all; }
#section5 ul.btn_jobArea { width: 246px; height: 83px; position: absolute;  z-index: 10; top: 90.5%; left: 9%;  }
#section5 ul.btn_jobArea li{ cursor: pointer; width: 75px; height: 100%; position: absolute; background: url(../images/btn_jobArea_off.png) no-repeat; transition: 0.5s all; }
#section5 ul.btn_jobArea li:hover{ background: url(../images/btn_jobArea_on.png) no-repeat; }
#section5 ul.btn_jobArea li.active{ background: url(../images/btn_jobArea_on.png) no-repeat; }
#section5 ul.btn_jobArea li.jobbtn1{ background-position: 0 0; left: 0%; }
#section5 ul.btn_jobArea li.jobbtn2{ background-position: -84px 0; left: 34.8%; }
#section5 ul.btn_jobArea li.jobbtn3{ background-position: -170px 0; left: 69.3%; }
 
#section5 img.gif_nimM { width: 409px; height: 229px; position: absolute; left: 9%; top: 57%; }
#section5 img.gif_nimW { display: none; width: 409px; height: 229px; position: absolute; left: 9%; top: 57%; }
#section5 img.backMpale { position: absolute; top: -327px; right: 0px; }
 

/****** #section6 (신규컨텐츠 게임소개) ******/
#section6 .intro{
	background:url(../images/bg_update4.jpg) no-repeat center top; 
	height: 980px;
	/* background-attachment: fixed; */
}


.pop_alert{
	display:none; 
	position: fixed;
	top:50%;
	left:50%; 
	z-index:15; 
    width: 969px;
    height: 471px;
    margin-left: -484.5px;
    margin-top: -235.5px;
}

.popup.pop_alert .btn_ok{
    position: absolute;
    left: 38%;
    top: 71%;
    margin-left: -91px;
    width: 321px;
    height: 60px;
    z-index: 15;
    cursor: pointer;
}
.popup.pop_alert .btn_close{
    /* width: 35px;
    height: 35px;
    position: absolute;
    top: 0%;
    right: -9%;
    display: block;
    z-index: 10;
    cursor: pointer;
    background: url(../images/btn_close.png) no-repeat; */
}

.textArea {
	position: absolute;
    top: 31.3%;
    transition: 0.5s all;
    width: 59%;
    left: 146px;
    height: 125px;
    line-height: 125px;
    text-align: center;
    box-sizing: border-box;
    padding: 0 92px;
}
.textArea p {
    font-size: 21.5px;
    color: #264a72;
    font-weight: bold;
    display: inline-block;
    /* max-width: 202px; */
    /* max-height: 55px; */
    vertical-align: middle;
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}


/****** #section7 (정령의 나라 오픈!) ******/
#section7 .intro{
	background:url(../images/bg_update5.jpg) no-repeat center top; 
	height: 1025px;
	/* background-attachment: fixed; */
}
#section7 .title { padding-top: 75px; }
img.section7_contents { position: absolute; bottom: 0px; z-index: 4; left: 50%; width: 100%; height: 1025px; margin-left: -50%; }


/****** popup ******/
.blind{
	display:none; 
	position:absolute; 
	top:0; 
	left:0; 
	background-color:black;
	width:100%; 
	height:4254px; 
	z-index:21; 
	-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:25; 
}

.popup .btn_close {
    position: absolute;
    top: 55px;
    right: 207px;
    width: 25px;
    height: 25px;
    z-index: 15;
    cursor: pointer;
}

/* movie_wrap 동영상 */
.movie_wrap{
	position: fixed; 
	transform: scale(0,0); 
	opacity: 0; 
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity:0;
	top:50%; 
	left:50%; 
	width:1082px; 
	height:698px; 
	margin-left:-541px;
	margin-top:-349px; 
	z-index:25;
}
.movie_wrap.open_movie{
	transform : scale(1,1); 
	transition: all .5s; 
	opacity: 1;
} 
.movie_wrap .btn_close{
    position: absolute;
    top: 5%;
    right: 0;
    width: 25px;
    height: 25px;
    z-index: 25;
}
.movie_wrap .btn_close:hover{
	animation: rotate 2s;
}	


.movie_wrap .you_tube{
	position:relative; 
	height:0; 
	padding-bottom:56.25%;
	z-index:25;
}
.movie_wrap .you_tube iframe, .movie_wrap  .you_tube object, .movie_wrap  .you_tube embed{
	position:absolute; 
	display:block; 
	width:100%; 
	height:100%; 
	margin-top:70px
}

.pop_comingsoon{
	display: block;
	width:574px; 
	height:285px; 
	margin-left:-285px;
	margin-top:-142.5px;
}







input[type=radio], input[type=checkbox] {
    display: none;
    width: 1px;
    height: 1px;
}

.btn_reservation { position: absolute; z-index: 10; width: 190px; height: 68px; left: 76%; top: 0%; cursor: pointer; }

.pop_person.popup .btn_close , .pop_consignment.popup .btn_close , .pop_advertising.popup .btn_close {
    width: 35px;
    height: 35px;
    position: absolute;
    top: 0%;
    right: -7%;
    display: block;
    z-index: 10;
    cursor: pointer;
    background: url(../images/btn_close.png) no-repeat;
}

.popup a.eventRule { position: absolute; z-index: 1; width: 268px; height: 60px; left: 30%; top: 83%; cursor: pointer; }

.pop_person{
    width: 670px;
    height: 724px;
    margin-left: -335px;
    margin-top: -362px;
}
.pop_consignment{
    width: 670px;
    height: 724px;
    margin-left: -335px;
    margin-top: -362px;
}
.pop_advertising{
    width: 670px;
    height: 724px;
    margin-left: -335px;
    margin-top: -362px;
}


.pop_reservation_complete{
	width: 1411px;
    height: 817px;
    margin-left: -705.5px;
    margin-top: -408.5px;
}
.pop_reservation_complete .accp_eventJoin{ position: absolute; z-index: 1; width: 210px; height: 50px; left: 35.5%; top: 56%; cursor: pointer; }
.pop_reservation_complete .coupon_eventJoin{ position: absolute; z-index: 1; width: 210px; height: 50px; left: 51.0%; top: 56%; cursor: pointer; }

.pop_reservation_complete .btn_close{

    
    display: block;
    right: 20% !important;
    top: 14% !important;

}



@keyframes swing0 {
    0% { transform: rotate(3deg); top : 395px; }
    100% { transform: rotate(-3deg); top : 400px; }
}
@keyframes swing1 {
    0% { transform: rotate(-2deg); top: 216px; }
    100% { transform: rotate(2deg); top: 220px; }
}
@keyframes swing2 {
    0% { transform: rotate(3deg); top: 375px; }
    100% { transform: rotate(-3deg); top : 367px; }
}
@keyframes swing3 {
    0% { transform: rotate(-2deg); top: 205px; }
    100% { transform: rotate(2deg); top: 212px; }
}
@keyframes swing4 {
    0% { transform: rotate(-2deg); top: 328px; }
    100% { transform: rotate(2deg); top: 345px; }
}
@keyframes swing5 {
    0% { transform: rotate(5deg); top: 32px; }
    100% { transform: rotate(-20deg); top: 24px; }
}


@media all and (max-width: 1280px) {

	.movie_wrap .btn_close {
		position: absolute; top: 3vw; right: 50%; margin-right: 1vw; width: 1.95vw;
	}

	.movie_wrap {
		top: 55%; left: 50%; width: 60vw; height: 50vw; margin-left: -30vw; margin-top: -25vw;		
	}
	.leftChar{ display: none;}
	.rightChar1{ display: none; }
	.rightChar2{ display: none; }
	
	.pop_alert {

		top: 55%; left: 50%; width: 60vw; height: 37vw; margin-left: -30vw; margin-top: -19vw;
	}
	.pop_alert img{ width: 100%; }

	.popup .btn_close {
		position: absolute; top: 1vw; right: 50%; margin-right: 2.25vw; width: 1.95vw;
	}
	.popup.pop_alert .btn_ok { position: absolute; left: 30.1vw; top: 21vw; margin-left: -8.3vw; width: 10vw; height: 4vw; z-index: 15; cursor: pointer; }

	.textArea {
		position: absolute; top: 6vw; transition: 0.5s all; width: 43vw; left: 5vw; height: 12vw; line-height: 12vw; text-align: center; box-sizing: border-box; padding: 0 9vw;
	}
	.textArea p { font-size: 2vw; }
	#sectionEvent .intro {
		
		height: 100%;
		background-size: 100% 100%;
		background-attachment: scroll;
		
	}
	#section5 .intro {
		
		background-attachment: scroll;
	}
}