@charset "utf-8";

/* reset */
html,body,div,p,img,span,a,em,strong,pre,h1,h2,h3,h4,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tbody,thead,tfoot,tr,th,td,form,fieldset,legend,caption,input,textarea,button,select,object,video,iframe{margin:0;padding:0}
html{overflow-y:scroll}
header,article,aside,details,figcaption,figure,footer,hgroup,menu,nav,section{display:block;margin:0;padding:0;vertical-align:baseline}
body{position:relative;width:100%;font-family:"Noto Sans KR", "맑은 고딕","Malgun Gothic","돋움","dotum",sans-serif;font-size:14px;color:#261400;line-height:1;}
input,textarea,button,select{font-size:inherit;font-family:"Noto Sans KR", "맑은 고딕","Malgun Gothic","돋움","dotum",sans-serif;color:#261400}
img,fieldset,button{border:0}
table{border-collapse:collapse;border-spacing:0}
ul,ol{list-style:none}
em,address{font-style:normal}
a,a:link{text-decoration:none;color:#261400}
a,a:link, a:active{background-color:transparent}
a,img{vertical-align:top}
hr{display:none}
legend, .blind{overflow:hidden;visibility:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0}
.ir{text-indent:-9999px;overflow:hidden}
button{border:0;cursor:pointer}

/* layout */
body {background-color:#fff;}
#wrap{position:relative;width:100%;height: 100%;min-width:1280px;min-height:1200px;z-index: 2;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/bg0.jpg") no-repeat center top;}
#wrap .footer {position:absolute;left:0;bottom:75px;width:100%;text-align: center;z-index: 5;}
.section {position: relative;width: 100%;overflow: hidden;}
.section .container{position:relative;width:100%;height: 100%;}
.quick {position: absolute;left:0;top:1083px;width: 100%;height: 111px;z-index: 5;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/bg_quick.png") no-repeat center top;}
.sticky .quick {position: fixed;top:0;}
.quick ul {width: 1122px;margin: 0 auto;}
.quick li {float: left;}
.quick li a {display: block;width: 141px;height: 111px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/spr_quick.png") no-repeat;}
.quick li .q1 {background-position:-50px 0;}
.quick li .q2 {background-position:-191px 0;}
.quick li .q3 {background-position:-332px 0;}
.quick li .q4 {background-position:-473px 0;}
.quick li .q5 {background-position:-614px 0;}
.quick li .q6 {background-position:-755px 0;}
.quick li .q7 {width: 126px;background-position:-896px 0;}
.quick li .q8 {width: 150px;background-position:-1022px 0;}
.quick li:hover .q1, .quick li.active .q1 {background-position:-50px -150px;}
.quick li:hover .q2, .quick li.active .q2 {background-position:-191px -150px;}
.quick li:hover .q3, .quick li.active .q3 {background-position:-332px -150px;}
.quick li:hover .q4, .quick li.active .q4 {background-position:-473px -150px;}
.quick li:hover .q5, .quick li.active .q5 {background-position:-614px -150px;}
.quick li:hover .q6, .quick li.active .q6 {background-position:-755px -150px;}
.quick li:hover .q7, .quick li.active .q7 {background-position:-896px -150px;}
.quick li:hover .q8, .quick li.active .q8 {background-position:-1022px -150px;}
#wrap .header .quick a.bt_top {position: fixed;right:2%;bottom:5%;z-index: 50;overflow: visible;width: 80px;text-indent:0;}

/* btn */
#wrap h1 a, #wrap .util .btn_game, #wrap .util a {display:inline-block;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/spr_header.png") no-repeat;text-indent:-99999px;overflow:hidden}

/* header */
#wrap .header{position:absolute;top:0;left:0;width:100%;height:90px;z-index:100}
#wrap .header a, #wrap .nav li a .cover, #wrap .header button{display:block;text-indent:-99999px;overflow:hidden;}
#wrap .header h1{position:absolute;top:30px;left:2.5%}
#wrap .header h1 a{width:230px;height:98px;background-position: 0 0;}
#wrap .util{position:absolute;top:57px;right:10px;width: 280px;}
#wrap .util .btn_home {display: inline-block;vertical-align: bottom;}
#wrap .util .btn_home a {width: 81px;height: 101px;background-position:0 bottom;}
#wrap .util .btn_home a:hover {background-position:-337px bottom;}
#wrap .util .btn_game{position: absolute;left:81px;top:0; width:181px;height:101px;vertical-align: bottom;background-position:-81px bottom;transition:top 50ms linear}
#wrap .util .btn_game .spin_img {position: absolute;left:22px;top:15px; width: 32px;height: 34px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/ptn_start.png") no-repeat;}
#wrap .util .btn_game:hover{background-position:-418px bottom}
#wrap .util .btn_game:hover .spin_img {animation:spin 1s linear infinite;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/ptn_start_over.png") no-repeat;}

/* intro */
#intro .container {height: 1193px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/txt0.png") no-repeat center top;}
#intro .obj0_1{position: absolute;left:50%;top:72px;margin-left:-718px;animation: float 3s ease-in-out infinite;}
#intro .obj0_2{position: absolute;left:50%;top:104px;margin-left:550px;animation: float 2s ease-in-out infinite;}

/* section1 */
#section1 {height: 1348px;background:#ffe45f url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/bg1.jpg") no-repeat center top;}
#section1 .container {z-index: 2;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/txt1.png") no-repeat center top;}
#section1 .bg1 {position: absolute;left:0;top:0;width: 100%;height: 1251px;z-index: 3;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/obj1_3.png") no-repeat center top;}
.obj1_1, .obj1_4, .obj1_5, .obj1_6, .obj1_8, .obj1_9, .obj1_11 {position: absolute;left:50%;width: 101px;height:98px;z-index: 1;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/spr_obj.png") no-repeat -825px 0;}
.obj1_2, .obj1_3, .obj1_7, .obj1_10{position: absolute;left:50%;width: 210px;height: 204px;z-index: 1;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/spr_obj.png") no-repeat -578px 0;}

.obj1_1 {margin-left:-690px;top:200px;}
.obj1_2 {margin-left:-600px;top:760px;}
.obj1_3 {margin-left:500px;top:450px;}
.obj1_4 {margin-left:-260px;top:670px;}
.obj1_5 {margin-left:350px;top:640px;}
.obj1_6 {margin-left:500px;top:100px;}
.obj1_7 {margin-left:350px;top:730px;}
.obj1_8 {margin-left:-100px;top:1180px;}
.obj1_9 {margin-left:670px;top:1160px;}
.obj1_10 {margin-left:-600px;top:1080px;}
.obj1_11 {margin-left:-360px;top:1060px;}

/* section2 */
#section2 {height: 1958px;background:#c17bfc url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/bg2.jpg") no-repeat center top;}
#section2 .container {z-index: 2;height: 1304px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/txt2_1.png") no-repeat center top;}
#section2 .container2 {z-index: 2;height: 541px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/txt2_2.png") no-repeat center top;}
.obj2_0 {position: absolute;left:50%;top:484px;margin-left:-630px;z-index: 2;animation: float 2s ease-in-out infinite;}
.obj2 {position: absolute;left:50%;width: 80px;height:84px;z-index: 1;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/spr_obj.png") no-repeat -479px 0;}
#section2 .star1 {width: 260px;height: 264px;background-position: 0 0;}
#section2 .star2 {width: 146px;height: 152px;background-position: -295px 0;}
#section2 .star3 {width: 320px;height: 322px;background-position: 0 -284px;}
.obj2_1 {margin-left:-800px;top:460px;}
.obj2_2 {margin-left:-870px;top:770px;}
.obj2_3 {margin-left:-520px;top:850px;}
.obj2_4 {margin-left:-500px;top:1000px;}
.obj2_5 {margin-left:320px;top:800px;}
.obj2_6 {margin-left:700px;top:450px;}
.obj2_7 {margin-left:950px;top:1160px;}
.obj2_8 {margin-left:-860px;top:1500px;}
.obj2_9 {margin-left:470px;top:1300px;}
.obj2_10 {margin-left:600px;top:1650px;}
.obj2_11 {margin-left:-760px;top:1950px;}
.obj2_12 {margin-left:500px;top:1850px;}

/* section3 */
#section3 {height: 1812px;background:#ffadbe url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/bg3.jpg") no-repeat center top;}
#section3 .container {z-index: 2;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/txt3.png") no-repeat center top;}
.obj3_1 {position: absolute;left:0;top:-700px;width: 100%;height: 705px;z-index: 1;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/obj3_1.png") no-repeat center top;}
.obj3_2 {position: absolute;left:0;top:-900px;width: 100%;height: 705px;z-index: 1;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/obj3_2.png") no-repeat center top;}

/* section4 */
#section4 {height: 1332px;background:#855d44 url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/bg4.jpg") no-repeat center top;}
#section4 .container {z-index: 2;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/txt4.png") no-repeat center top;}
.obj4_1 {position: absolute;left:0;top:200px;width: 100%;height: 1500px;z-index: 1;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/obj4_1.png") no-repeat center top;}
.obj4_2 {position: absolute;left:0;top:400px;width: 100%;height: 1000px;z-index: 1;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/obj4_2.png") no-repeat center top;}

/* section5 */
#section5 {height: 1816px;background:#e14949 url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/bg5.jpg") no-repeat center top;}
#section5 .container {z-index: 2;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/txt5.png") no-repeat center top;}
#section5 .obj5 {position: absolute;left:50%;top:588px;margin-left:460px;width: 226px;height: 294px;z-index: 1;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/obj5_1.png") no-repeat center top;}
#section5 .bg1 {position: absolute;left:50%;top:580px;margin-left:-960px;width: 775px;height: 850px;z-index: 3;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/obj5_2.png") no-repeat center top;}

/* section6 */
#section6 {height: 1488px;background:#b4df19 url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/bg6.jpg") no-repeat center top;}
#section6 .container {z-index: 2;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/txt6.png") no-repeat center top;}
.obj6_1 {position: absolute;left:50%;top:1116px;margin-left:277px;width: 78px;height: 100px;z-index: 1;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/ani_book1.gif") no-repeat;}
.obj6_2 {position: absolute;left:50%;top:1116px;margin-left:360px;width: 73px;height: 100px;z-index: 1;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/ani_book2.gif") no-repeat;}

/* section7 */
#section7 {height: 2475px;background:#4596e9 url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/bg7.jpg") repeat-y center top;}
#section7 .container {z-index: 2;height: 2229px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/txt7.png") no-repeat center top;}
#section7 .bg1 {position: absolute;left:0;bottom:330px;width: 100%;height: 461px;z-index: 2;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/obj7_0.png") no-repeat center top;}
.obj7_1 {position: absolute;left:0;top:300px;width: 100%;height: 1500px;z-index: 1;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/obj7_1.png") no-repeat center top;}
 .obj7_2 {position: absolute;left:0;top:50px;width: 100%;height: 1500px;z-index: 1;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/obj7_2.png") no-repeat center top;}
.obj7_3 {position: absolute;left:0;top:530px;width: 100%;height: 630px;z-index: 1;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/obj7_3.png") no-repeat center top;}
.obj7_4 {position: absolute;left:0;top:1430px;width: 100%;height: 1509px;z-index: 1;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/obj7_4.png") no-repeat center top;}
.obj7_5 {display:none;position: absolute;left:0;top:1560px;width: 100%;height: 1509px;z-index: 1;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/obj7_5.png") no-repeat center top;}
.obj7_6 {position: absolute;left:0;top:1760px;width: 100%;height: 1023px;z-index: 1;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0524_magic/obj7_6.png") no-repeat center top;}

/* motion */
.ptn {position: absolute;left:50%;top:410px;width: 208px;height: 213px;transform-origin: 50% 50%;z-index: 1;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0510_teaser/obj_ptn.png") no-repeat;}
.ptn1 {margin-left:-920px;animation: rotate1 linear 10s infinite;}
.ptn2 {top:50px;margin-left:-500px;width: 90px;height: 95px;animation: rotate1 linear 8s infinite;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0510_teaser/obj_ptn2.png") no-repeat;}
.ptn3 {top:680px;margin-left:-20px;width: 51px;height: 54px;animation: rotate1 linear 11s infinite;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0510_teaser/obj_ptn3.png") no-repeat;}
.ptn4 {top:-40px;margin-left:340px;width: 90px;height: 95px;animation: rotate1 linear 7s infinite;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0510_teaser/obj_ptn4.png") no-repeat;}
.ptn5 {top:380px;margin-left:860px;width: 90px;height: 95px;animation: rotate1 linear 12s infinite;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0510_teaser/obj_ptn4.png") no-repeat;}
.ptn6 {top:720px;margin-left:430px;width: 90px;height: 95px;animation: rotate1 linear 11s infinite;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0510_teaser/obj_ptn2.png") no-repeat;}
.ptn7 {top:120px;margin-left:-20px;width: 66px;height: 63px;animation: rotate2 linear 11s infinite;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0510_teaser/obj_ptn6.png") no-repeat;}
.screen {position: fixed;left:0;top:0;z-index: 101;width: 100%;height: 100%;background-color: #fff;}
.cha1 {position: absolute;left:50%;top:148px;margin-left:-800px;z-index:2;width: 165px;height: 223px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0510_teaser/obj_cha1.png") no-repeat;animation: float 3s ease-in-out infinite;}
.cha2 {position: absolute;left:50%;top:218px;margin-left:660px;z-index:2;width: 145px;height: 184px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0510_teaser/obj_cha2.png") no-repeat;animation: float 2s ease-in-out infinite;}


@keyframes spin {
    100%{transform: rotate(360deg)}
}
@keyframes rotate1 {
    0% {
        transform: translatex(-90px) translatey(0px) rotate(-720deg) scale(1) ;
    }
    50% {
        transform: translatex(0px) translatey(40px) rotate(0deg) scale(0.7) ;
    }
    100% {
        transform: translatex(-90px) translatey(0px) rotate(720deg) scale(1);
    }
}
@keyframes rotate2 {
    0% {
        transform: translatex(10px) translatey(-40px) rotate(-720deg) scale(1) ;
    }
    50% {
        transform: translatex(0px) translatey(0px) rotate(0deg) scale(0.5) ;
    }
    100% {
        transform: translatex(10px) translatey(-40px) rotate(720deg) scale(1);
    }
}
@keyframes float {
	0% {
		transform: translatey(0px)  rotate(0deg);
	}
	50% {
		transform: translatey(-30px) rotate(2deg);
	}
	100% {
		transform: translatey(0px)  rotate(0deg);
	}
}