@charset "utf-8";

/* RESET */
a,article,aside,body,dd,div,dl,dt,footer,h1,h2,h3,h4,h5,header,html,img,li,nav,p,section,span,strong,ul{margin:0;padding:0;border:0;vertical-align:baseline}
article,aside,footer,header,nav,section{display:block}
body,button{font-family:"맑은 고딕","malgun gothic","돋움",dotum,sans-serif;color:#fff;font-size:16px}
h1,h2,h3,h4,h5{font-size:16px}
ul{list-style:none}
a,img{vertical-align:top}
a,a:link,a:visited{color:#fff;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}
a:hover{text-decoration:none}
button{display:block;position:relative;padding:0;border:0;background-color:transparent;outline:0;cursor:pointer}
button:active,button:focus{padding:0}
.clearfix::after{display:block;content:"";clear:both}
.sr_only{overflow:hidden;visibility:hidden;position:absolute;left:0;top:0;width:0;height:0;font-size:0;line-height:0}
body{background:#000;}
.wrap{width:100%; min-width:1280px; margin:0 auto;}

/* HEADER */
.header {position: fixed; top: 0; left: 0; display: flex; width: 100%; height: 112px; z-index: 111;}
.header .logo {position: absolute; top: 32px; left: 41px; width: 197px; height: 32px; background: url('../images/logo.png') center center / 100% auto no-repeat;}
.header .logo button { display: block; width: 100%; height: 100%;}
.header .gnb, .header .gnb button {background: url('../images/spr_top.png') 0 0 / 1404px auto no-repeat;}
.header .gnb {position: absolute; top: 0; left: 266px; display: flex; width: 1384px; height: 114px; padding: 0 10px; background-position: -10px -10px;}
.header .gnb li {display: flex; justify-content: center; align-items: center; height: 105px;}
.header .gnb li:nth-child(1) {width: 202px;}
.header .gnb li:nth-child(2) {width: 247px;}
.header .gnb li:nth-child(3) {width: 279px;}
.header .gnb li:nth-child(4) {width: 216px;}
.header .gnb li:nth-child(5) {width: 213px;}
.header .gnb li:nth-child(6) {width: 213px;}
.header .gnb button {height: 100%; background-position-y: -122px;}
.header .gnb button:hover, .header .gnb button:active, .header .gnb li.active button {background-position-y: -208px;}
.header .gnb li:nth-child(1) button {width: 103px; background-position-x: -10px;}
.header .gnb li:nth-child(2) button {width: 137px; background-position-x: -218px;}
.header .gnb li:nth-child(3) button {width: 171px; background-position-x: -459px;}
.header .gnb li:nth-child(4) button {width: 102px; background-position-x: -747px;}
.header .gnb li:nth-child(5) button {width: 105px; background-position-x: -959px;}
.header .gnb li:nth-child(6) button {width: 105px; background-position-x: -1161px;}
.header .snb {position: absolute; top: 27px; right: 33px;}
.header .snb li, .header .snb button {display: block; height: 100%; background: url('../images/spr_menu.png') 0 0 / 166px auto no-repeat;}
.header .snb ul {display: flex; margin-bottom: 24px;}
.header .snb li {height: 28px;}
.header .snb li:nth-child(1) {width: 53px; background-position: 0 4px;}
.header .snb li:nth-child(2) {width: 56px; background-position: -53px 3px;}
.header .snb li:nth-child(3) {width: 58px; background-position: -109px 1px}
.header .snb a {display: block; width: 95%; height: 100%;}
.header .snb button {width: 166px; height: 36px; background-position-y: -53px}

@media screen and (max-width: 1919px) {
  .header {height: 5.8vw;}
  .header .logo {top: 1.7vw; left: 2.1vw; width: 10.3vw; height: 1.7vw;}
  .header .gnb, .header .gnb button {background-size: 73.1vw auto;}
  .header .gnb {left: 13.9vw; width: 72.1vw; height: 5.9vw; padding: 0 0.5vw; background-position: -0.5vw -0.5vw;}
  .header .gnb li {height: 5.5vw;}
  .header .gnb li:nth-child(1) {width: 10.5vw;}
  .header .gnb li:nth-child(2) {width: 12.9vw;}
  .header .gnb li:nth-child(3) {width: 14.5vw;}
  .header .gnb li:nth-child(4) {width: 11.3vw;}
  .header .gnb li:nth-child(5) {width: 11.1vw;}
  .header .gnb li:nth-child(6) {width: 11.1vw;}
  .header .gnb button {background-position-y: -6.4vw;}
  .header .gnb button:hover, .header .gnb button:active, .header .gnb li.active button {background-position-y: -10.8vw;}
  .header .gnb li:nth-child(1) button {width: 5.4vw; background-position-x: -0.5vw;}
  .header .gnb li:nth-child(2) button {width: 7.1vw; background-position-x: -11.4vw;}
  .header .gnb li:nth-child(3) button {width: 8.9vw; background-position-x: -23.9vw;}
  .header .gnb li:nth-child(4) button {width: 5.3vw; background-position-x: -38.9vw;}
  .header .gnb li:nth-child(5) button {width: 5.5vw; background-position-x: -49.9vw;}
  .header .gnb li:nth-child(6) button {width: 5.5vw; background-position-x: -60.5vw;}
  .header .snb {top: 1.4vw; right: 1.7vw;}
  .header .snb li, .header .snb button {background-size: 8.6vw auto;}
  .header .snb ul {margin-bottom: 1.3vw;}
  .header .snb li {height: 1.5vw;}
  .header .snb li:nth-child(1) {width: 2.8vw; background-position: 0 0.2vw;}
  .header .snb li:nth-child(2) {width: 2.9vw; background-position: -2.8vw 0.2vw;}
  .header .snb li:nth-child(3) {width: 3vw; background-position: -5.7vw 0.1vw}
  .header .snb button {width: 8.6vw; height: 1.9vw; background-position-y: -2.7vw}
}

@media screen and (max-width: 1280px) { /* 0.666배 */
  .header {height: 74.6px;}
  .header .logo {top: 21.3px; left: 27.3px; width: 131.2px; height: 21.3px;}
  .header .gnb, .header .gnb button {background-size: 935.1px auto}
  .header .gnb {left: 177.2px; width: 921.7px; height: 75.9px; padding: 0 6.7px; background-position: -6.7px -6.7px;}
  .header .gnb li {height: 69.9px;}
  .header .gnb li:nth-child(1) {width: 134.5px;}
  .header .gnb li:nth-child(2) {width: 164.5px;}
  .header .gnb li:nth-child(3) {width: 185.8px;}
  .header .gnb li:nth-child(4) {width: 143.9px;}
  .header .gnb li:nth-child(5) {width: 141.9px;}
  .header .gnb li:nth-child(6) {width: 141.9px;}
  .header .gnb button {background-position-y: -81.3px;}
  .header .gnb button:hover, .header .gnb button:active, .header .gnb li.active button {background-position-y: -138.5px;}
  .header .gnb li:nth-child(1) button {width: 68.6px; background-position-x: -6.7px;}
  .header .gnb li:nth-child(2) button {width: 91.2px; background-position-x: -145.2px;}
  .header .gnb li:nth-child(3) button {width: 113.9px; background-position-x: -305.7px;}
  .header .gnb li:nth-child(4) button {width: 67.9px; background-position-x: -497.5px;}
  .header .gnb li:nth-child(5) button {width: 69.9px; background-position-x: -638.7px;}
  .header .gnb li:nth-child(6) button {width: 69.9px; background-position-x: -773.2px;}
  .header .snb {top: 18px; right: 22px;}
  .header .snb li, .header .snb button {background-size: 110.6px auto;}
  .header .snb ul {margin-bottom: 16px;}
  .header .snb li {height: 18.6px;}
  .header .snb li:nth-child(1) {width: 35.3px; background-position: 0 2.7px;}
  .header .snb li:nth-child(2) {width: 37.3px; background-position: -35.3px 2px;}
  .header .snb li:nth-child(3) {width: 38.6px; background-position: -72.6px 0.7px}
  .header .snb button {width: 110.6px; height: 24px; background-position-y: -35.3px}
}

.qmenu {position:fixed; top:200px; right:0; display:none; width: 173px; height: 292px; background: url('../images/spr_quick.png') -169px -10px / auto no-repeat; z-index: 111;}
.qmenu a, .qmenu button {position: absolute; left: 50%; transform: translateX(-50%);}
.qmenu a {top: 82px; display: block; width:140px; height:122px; background: url('../images/spr_quick.png') -10px -10px / auto no-repeat;}
.qmenu a:hover {transform: translateX(-50%) rotateY(360deg); transition:all 550ms ease-in-out}
.qmenu button {top:227px; width:78px; height:53px; transform:translateX(-50%)}

/* UPDATE SECTION COMMON */
/* 영역 & 타이틀 */
.section {position:relative; background-position:center center; background-repeat:no-repeat; margin:0 auto}
.content {position: relative; width: 1280px; height: 100%; margin: 0 auto;}
.update .title_wrap .num, .update .title_wrap .title, .update .title_wrap .desc {margin: 0 auto; background: url('../images/spr_update_title.png') 0 0 / auto no-repeat;}
.update .sub_title_wrap {position: relative; margin: 0 auto;}
.update .sub_title_wrap .title, .update .sub_title_wrap .arrow {background: url('../images/spr_subtitle.png') 0 0 / auto no-repeat;}
.update .sub_title_wrap .title {height: 76px; opacity: 0; filter: blur(20px); transform: scale(0.7);}
.update .sub_title_wrap .arrow {position: absolute; top: 45px; width: 46px; height: 10px;}
.update .sub_title_wrap .left {left: -74px; background-position: -446px -202px; opacity: 0; transform: translateX(70px);}
.update .sub_title_wrap .right {right: -74px; background-position: -380px -202px; opacity: 0; transform: translateX(-70px);}
/* 던전정보 */
.update .dungeon_info {position: relative;}
.update .dungeon_info .img_chains {position: absolute; top:0; left:0; width:100%; height:100%}
.update .dungeon_info .img_chains span {position: absolute; width: 172px;}
.update .dungeon_info .img_chains .top {top: 59px; left: 91px; height: 152px; background: url('../images/chain_top.png') 0 0 / auto no-repeat;}
.update .dungeon_info .img_chains .bottom {bottom: 30px; right: 91px; height: 153px; background: url('../images/chain_top.png') 0 0 / auto no-repeat;}
/* 던전이미지 */
.update .dungeon_img {display: flex; width: 1277px;}
.update .dungeon_img button, .update .dungeon_img div {background: url('../images/spr_dungeon_preview.png');}
.update .dungeon_img button {position:relative; width:667px; height:346px; background-position:0 0;}
.update .dungeon_img button:nth-child(1) {margin-left: -23px;}
.update .dungeon_img button:nth-child(2) {margin-right: -23px;}
.update .dungeon_img button:hover {background-position:-667px 0; transform:translateY(-20px); transition:transform .8s}
.update .dungeon_img button div{position:absolute; top: 11px; left: 34px; width:594px; height:313px; background-position:0 0;}
/* 몬스터이미지 */
.update .monster_img .row {display: flex; justify-content: space-between; margin-bottom: 47px;}
.update .monster_img button {width: 386px; height: 547px; background: url('../images/spr_monster1.png') -10px -11px / auto no-repeat; overflow: hidden;}
.update .monster_img button:hover {background-position: -416px -11px;}
.update .monster_img button:hover .monster_img_preview {transform:translateY(20px); transition:transform .8s}
.update .monster_img .monster_img_preview {display: block; width: calc(100% - 2px); height: calc(100% - 2px); margin: 1px;}
/* 애니메이션 */
@keyframes sparkle {0%{opacity:.3} 100%{opacity:1}}
@keyframes slideX {100%{opacity:1;transform:translateX(0)}}
@keyframes slideY {100%{opacity:1;transform:translateY(0)}}
@keyframes switch {100%{opacity:1;filter:blur(0);transform:scale(1)}}
@keyframes chain {100%{opacity:1; width:172px}}
@keyframes revealed {100%{opacity:1}}
@keyframes move {100%{transform:translateY(20px)}}

@media screen and (max-width: 1500px) {
  .content {overflow: hidden;}
}

.update.active .title_wrap .num { opacity: 0; filter: blur(20px); transform: scale(2); animation: switch 600ms linear forwards;}
.update.active .title_wrap .title {opacity: 0; transform: translateY(-60px); animation: slideY 450ms linear forwards 720ms}
.update.active .title_wrap .desc {opacity: 0; transform: translateY(100px); animation: slideY 450ms ease-out forwards 720ms; overflow: hidden;}

/* MAIN */
canvas {position:absolute;top:0;left:0;width:100%;height:100%}
.main {height:1265px; background-image:url(../images/bg_main.jpg);}
.main .title_wrap {position: absolute; top: 394px; left: 25px; width: 670px;}
.main .title_wrap .date,.main .title_wrap h2,.main .title_wrap p{background:url('../images/spr_title.png') 0 0 / auto no-repeat}
.main .title_wrap .date {display: block; height: 46px; background-position: 0 0; animation:slideY 550ms linear forwards; opacity:0; transform:translateY(100px)}
.main .title_wrap h2 {height:163px;background-position-y: -46px; opacity:0; filter:blur(20px); transform:scale(2); animation:switch .8s linear forwards .4s}
.main .title_wrap p{height: 89px; background-position-y: -208px; opacity:0; transform:translateY(-100px); animation:slideY .6s linear forwards}

/* UPDATE1 */
.section.update1 {height:2051px; background-image:url(../images/bg_1.jpg);}
.section.update1 .title_wrap .num {width: 201px; height: 29px; margin-bottom: 31px; background-position: -931px -655px;}
.section.update1 .title_wrap .title {width: 449px; height: 86px; margin-bottom: 32px; background-position: -10px -598px;}
.section.update1 .title_wrap .desc {width: 547px; height: 37px; margin-bottom: 144px; background-position: -479px -598px;}
.section.update1 .content1 {margin-bottom: 175px;}
.section.update1 .content1 .sub_title_wrap {width: 143px; margin-bottom: 40px;}
.section.update1 .content1 .sub_title_wrap .title{background-position: -380px -106px;}
.section.update1 .content1 .para {margin-bottom: 44px;}
.section.update1 .content1 .para p {height: 18px; margin-bottom: 12px; background: url('../images/para1.png') center top / auto no-repeat;}
.section.update1 .content1 .para1 p:nth-child(1) {animation-delay: 100ms}
.section.update1 .content1 .para1 p:nth-child(2) {background-position-y: -30px; animation-delay:200ms}
.section.update1 .content1 .para1 p:nth-child(3) {background-position-y: -60px; animation-delay:300ms}
.section.update1 .content1 .para1 p:nth-child(4) {background-position-y: -90px; animation-delay:400ms}
.section.update1 .content1 .para2 p:nth-child(1) {background-position-y: -150px; animation-delay:700ms}
.section.update1 .content1 .para2 p:nth-child(2) {background-position-y: -180px; animation-delay:800ms}
.section.update1 .content1 .para2 p:nth-child(3) {background-position-y: -210px; animation-delay:900ms}
.section.update1 .content1 .para2 p:nth-child(4) {background-position-y: -240px; animation-delay:1000ms}
.section.update1 .content1 .para2 p:nth-child(5) {background-position-y: -270px; animation-delay:1100ms}
.section.update1 .content1 .para2 p:nth-child(6) {background-position-y: -300px; animation-delay:1200ms}
.section.update1 .content1 .para2 p:nth-child(7) {background-position-y: -330px; animation-delay:1300ms}
.section.update1 .content1 .para3 p:nth-child(1) {background-position-y: -390px; animation-delay:1600ms}
.section.update1 .content1 .para3 p:nth-child(2) {background-position-y: -420px; animation-delay:1700ms}
.section.update1 .content1 .para3 p:nth-child(3) {background-position-y: -450px; animation-delay:1800ms}
.section.update1 .content2 {margin-bottom: 0}
.section.update1 .content2 .sub_title_wrap {width: 143px; margin-bottom: 33px;}
.section.update1 .content2 .sub_title_wrap .title {background-position: -380px -10px;}
.section.update1 .content2 .tab_wrap {display:flex; justify-content:center; margin-bottom:50px;}
.section.update1 .content2 .tab_wrap button {display: block; width: 306px; height: 73px; background:url('../images/spr_button.png') -10px 0 / auto no-repeat;}
.section.update1 .content2 .tab_wrap button:nth-child(1) {background-position-y: -10px;}
.section.update1 .content2 .tab_wrap button:nth-child(2) {background-position-y: -196px;}
.section.update1 .content2 .tab_wrap button.active:nth-child(1) {background-position-y: -103px;}
.section.update1 .content2 .tab_wrap button.active:nth-child(2) {background-position-y: -289px;}
.section.update1 .content2 .item_wrap div {display: none;}
.section.update1 .content2 .item_wrap div.active {display: block;}
.section.update1 .content2 .item_wrap ul {display: flex; justify-content: space-between; width: 1271px; margin: 0 auto 26px;}
.section.update1 .content2 .item_wrap li {background: url('../images/spr_items.png') 0 0 / auto no-repeat; opacity:0; transform:translateY(-40px); animation: slideY 500ms ease-out forwards;}
.section.update1 .content2 .item_wrap .armors li{width: 296px; height: 481px; background-position-y: -10px;}
.section.update1 .content2 .item_wrap .armors li:nth-child(1){background-position-x: -642px; animation-delay: 100ms;}
.section.update1 .content2 .item_wrap .armors li:nth-child(2){background-position-x: -10px; animation-delay: 200ms;}
.section.update1 .content2 .item_wrap .armors li:nth-child(3){background-position-x: -326px; animation-delay: 300ms;}
.section.update1 .content2 .item_wrap .armors li:nth-child(4){background-position-x: -957px; animation-delay: 400ms;}
.section.update1 .content2 .item_wrap .weapons li{width: 198px; height: 258px;}
.section.update1 .content2 .item_wrap .weapons .row1 li:nth-child(1){background-position: -228px -789px; animation-delay: 100ms;}
.section.update1 .content2 .item_wrap .weapons .row1 li:nth-child(2){background-position: -228px -511px; animation-delay: 200ms;}
.section.update1 .content2 .item_wrap .weapons .row1 li:nth-child(3){background-position: -664px -511px; animation-delay: 300ms;}
.section.update1 .content2 .item_wrap .weapons .row1 li:nth-child(4){background-position: -879px -789px; animation-delay: 400ms;}
.section.update1 .content2 .item_wrap .weapons .row1 li:nth-child(5){background-position: -1272px -10px; animation-delay: 500ms;}
.section.update1 .content2 .item_wrap .weapons .row1 li:nth-child(6){background-position: -1272px -288px; animation-delay: 600ms;}
.section.update1 .content2 .item_wrap .weapons .row2 li:nth-child(1){background-position: -10px -511px; animation-delay: 700ms;}
.section.update1 .content2 .item_wrap .weapons .row2 li:nth-child(2){background-position: -446px -511px; animation-delay: 800ms;}
.section.update1 .content2 .item_wrap .weapons .row2 li:nth-child(3){background-position: -445px -789px; animation-delay: 900ms;}
.section.update1 .content2 .item_wrap .weapons .row2 li:nth-child(4){background-position: -662px -789px; animation-delay: 1000ms;}
.section.update1 .content2 .item_wrap .weapons .row2 li:nth-child(5){background-position: -882px -511px; animation-delay: 1100ms;}
.section.update1 .content2 .item_wrap .weapons .row2 li:nth-child(6){background-position: -10px -789px; animation-delay: 1200ms;}

/* >>> ANIMATION */
.section.update1 .content2 .tab_wrap,
.section.update1 .content2 .item_wrap {opacity: 0;}
.section.update1 .para p {opacity: 0; transform: translateY(-20px);}
.section.update1 .active .tab_wrap,
.section.update1 .active .item_wrap {animation: revealed 400ms ease-in forwards 1000ms;}
.section.update1 .active .para p {animation: slideY 400ms ease-in forwards;}
.section.update1 .active .sub_title_wrap .title {animation: switch 300ms linear forwards 500ms}
.section.update1 .active .sub_title_wrap .arrow {animation: slideX 550ms ease-in-out forwards 500ms;}

/* UPDATE2 */
.section.update2 {height:1361px; background-image:url(../images/bg_2.jpg);}
.section.update2 .title_wrap .num {width: 205px; height: 29px; margin-bottom: 30px; background-position: -706px -655px;}
.section.update2 .title_wrap .title {width: 1120px; height: 90px; margin-bottom: 17px; background-position: -10px -120px;}
.section.update2 .title_wrap .desc {width: 684px; height: 47px; margin-bottom: 79px; background-position: -514px -438px;}
.section.update2 .summary {width: 100%; height: 27px; margin-bottom: 81px; background: url('../images/update2_desc.png') center top / auto no-repeat;}
.section.update2 .image {width: 1247px; height: 756px; margin: 0 auto; background: url('../images/update2_image.png') center center / auto no-repeat;}

/* >>> ANIMATION */
.section.update2 .summary{opacity: 0; transform: translateY(-20px);}
.section.update2 .image{opacity: 0;}
.section.update2.active .summary{animation:slideY 450ms linear forwards 1500ms}
.section.update2.active .image{animation:revealed 750ms linear forwards 1800ms}

/* UPDATE3 */
.section.update3 {height:3530px; background-image:url(../images/bg_3.jpg);}
.section.update3 .title_wrap .num {width: 208px; height: 29px; margin-bottom: 30px; background-position: -1046px -598px;}
.section.update3 .title_wrap .title {width: 797px; height: 83px; margin-bottom: 18px; background-position: -10px -335px;}
.section.update3 .title_wrap .desc {width: 397px; height: 37px; margin-bottom: 81px; background-position: -875px -540px;}
.section.update3 .content1  {margin-bottom: 59px;}
.section.update3 .content1 .para_wrap {margin-bottom: 9px;}
.section.update3 .content1 .para {margin-bottom: 46px;}
.section.update3 .content1 .para:last-child {margin-bottom: 0;}
.section.update3 .content1 .para p {height: 19px; margin-bottom: 14px; background: url('../images/para2.png') center top / auto no-repeat;}
.section.update3 .content1 .para1 p:nth-child(1) {animation-delay: 100ms}
.section.update3 .content1 .para1 p:nth-child(2) {height: 20px; background-position-y: -32px;  animation-delay:200ms}
.section.update3 .content1 .para1 p:nth-child(3) {background-position-y: -66px;  animation-delay:300ms}
.section.update3 .content1 .para2 p:nth-child(1) {background-position-y: -129px; animation-delay:600ms}
.section.update3 .content1 .para2 p:nth-child(2) {background-position-y: -162px; animation-delay:700ms}
.section.update3 .content1 .para2 p:nth-child(3) {background-position-y: -192px; animation-delay:800ms}
.section.update3 .content1 .para2 p:nth-child(4) {background-position-y: -225px; animation-delay:900ms}
.section.update3 .content1 .para3 p:nth-child(1) {background-position-y: -289px; animation-delay:1200ms}
.section.update3 .content1 .para3 p:nth-child(2) {background-position-y: -320px; animation-delay:1300ms}
.section.update3 .content1 .para3 p:nth-child(3) {background-position-y: -353px; animation-delay:1400ms}
.section.update3 .content1 .para3 p:nth-child(4) {height: 20px; background-position-y: -384px; animation-delay:1500ms}
.section.update3 .content1 .para3 p:nth-child(5) {margin-bottom: 0; background-position-y: -416px; animation-delay:1600ms}
.section.update3 .content1 .dungeon_info {width: 1484px; height: 605px; margin-left: -108px; background: url('../images/dungeon_info1.png') center center / auto no-repeat;}
.section.update3 .content2 {margin-bottom: 140px;}
.section.update3 .content2 .sub_title_wrap {width: 316px; margin-bottom: 62px;}
.section.update3 .content2 .sub_title_wrap .title {background-position: -10px -106px;}
.section.update3 .content2 .dungeon1 .dungeon_img_preview {background-position:0 -346px;}
.section.update3 .content2 .dungeon2 .dungeon_img_preview {background-position:0 -659px;}
.section.update3 .content3 {margin-bottom: 0;}
.section.update3 .content3 .sub_title_wrap {width: 350px; margin-bottom: 64px;}
.section.update3 .content3 .sub_title_wrap .title {background-position: -10px -10px;}
.section.update3 .content3 .monster_img .monster_img_preview {background: url('../images/spr_monster1.png') 0 0 / auto no-repeat;}
.section.update3 .content3 .row1 button:nth-child(1) div {background-position: -821px -11px;}
.section.update3 .content3 .row1 button:nth-child(2) div {background-position: -9px -578px;}
.section.update3 .content3 .row1 button:nth-child(3) div {background-position: -413px -578px;}
.section.update3 .content3 .row2 button:nth-child(1) div {background-position: -1225px -578px;}
.section.update3 .content3 .row2 button:nth-child(2) div {background-position: -1225px -11px;}
.section.update3 .content3 .row2 button:nth-child(3) div {background-position: -817px -578px;}

/* >>> ANIMATION */
.section.update3 .para p {opacity: 0; transform: translateY(-20px);}
.section.update3 .content1 .dungeon_info {opacity: 0;}
.section.update3 .sub_title_wrap .title {transform: scale(0.7);}
.section.update3 .dungeon_img button, 
.section.update3 .monster_img button {opacity: 0; transform: translateY(-20px);}
.section.update3 .active .para p {animation: slideY 400ms ease-in forwards;}
.section.update3 .active .dungeon_info {animation:revealed 750ms linear forwards 1800ms}
.section.update3 .active .sub_title_wrap .title {animation: switch 300ms linear forwards 550ms}
.section.update3 .active .sub_title_wrap .arrow {animation: slideX 550ms ease-in-out forwards 200ms;}
.section.update3 .active .dungeon_img button, 
.section.update3 .active .monster_img button  {animation: slideY 550ms ease-in-out forwards 1000ms;}
.section.update3 .active .dungeon_img button:nth-child(1) {animation-delay: 1000ms;}
.section.update3 .active .dungeon_img button:nth-child(2) {animation-delay: 1200ms;}
.section.update3 .active .row1 button:nth-child(1) {animation-delay: 400ms;}
.section.update3 .active .row1 button:nth-child(2) {animation-delay: 600ms;}
.section.update3 .active .row1 button:nth-child(3) {animation-delay: 800ms;}
.section.update3 .active .row2 button:nth-child(1) {animation-delay: 1000ms;}
.section.update3 .active .row2 button:nth-child(2) {animation-delay: 1200ms;}
.section.update3 .active .row2 button:nth-child(3) {animation-delay: 1400ms;}

/* UPDATE4 */
.section.update4 {height:1641px; background-image:url(../images/bg_4.jpg);}
.section.update4 .title_wrap .num {width:209px; height:29px; margin-bottom: 27px; background-position: -915px -279px;}
.section.update4 .title_wrap .title {width:885px; height:85px; margin-bottom: 18px; background-position: -10px -230px;}
.section.update4 .title_wrap .desc {width:845px; height:38px; margin-bottom: -17px; background-position: -10px -540px;}
.section.update4 .dungeon_info {width: 1465px; height: 657px; margin-left: -96px; margin-bottom: 45px; background: url('../images/dungeon_info2.png') center center / auto no-repeat;}
.section.update4 .dungeon_info .img_chains .top {top: 100px; left: 81px}
.section.update4 .dungeon_info .img_chains .bottom {bottom: 46px; right: 76px}
.section.update4 .sub_title_wrap {width: 316px; margin-bottom: 62px;}
.section.update4 .sub_title_wrap .title {background-position: -10px -202px;}
.section.update4 .dungeon3 .dungeon_img_preview {background-position: -594px -346px}
.section.update4 .dungeon4 .dungeon_img_preview {background-position: -594px -659px}

/* >>> ANIMATION */
.section.update4 .dungeon_info {opacity: 0;}
.section.update4 .sub_title_wrap .title {transform: scale(0.7);}
.section.update4 .dungeon_img button {opacity: 0; transform: translateY(-20px);}
.section.update4 .active .dungeon_info {animation:revealed 750ms linear forwards 1800ms}
.section.update4 .active .sub_title_wrap .title {animation: switch 300ms linear forwards 550ms}
.section.update4 .active .sub_title_wrap .arrow {animation: slideX 550ms ease-in-out forwards 200ms;}
.section.update4 .active .dungeon_img button {animation: slideY 550ms ease-in-out forwards 1000ms;}
.section.update4 .active .dungeon_img button:nth-child(1) {animation-delay: 1000ms;}
.section.update4 .active .dungeon_img button:nth-child(2) {animation-delay: 1200ms;}

/* UPDATE5 */
.section.update5 {height:3454px; background-image:url(../images/bg_5.jpg);}
.section.update5 .title_wrap .num {width:207px; height:29px; margin-bottom: 31px; background-position:-479px -655px;}
.section.update5 .title_wrap .title {width:484px; height:82px; margin-bottom: 18px; background-position: -10px -438px;}
.section.update5 .title_wrap .desc {width:458px; height:37px; margin-bottom: 81px; background-position:-827px -335px;}
.section.update5 .content1 .para_wrap {margin-bottom: -9px;}
.section.update5 .content1 .para {margin-bottom: 45px;}
.section.update5 .content1 .para3 {margin-bottom: 0;}
.section.update5 .content1 .para:last-child {margin-bottom: 0;}
.section.update5 .content1 .para p {height: 20px; margin-bottom: 15px; background: url('../images/para3.png') center top / auto no-repeat;}
.section.update5 .content1 .para1 p:nth-child(1) {animation-delay: 1000ms}
.section.update5 .content1 .para1 p:nth-child(2) {background-position-y: -33px;  animation-delay:1100ms}
.section.update5 .content1 .para1 p:nth-child(3) {background-position-y: -63px;  animation-delay:1200ms}
.section.update5 .content1 .para2 p:nth-child(1) {background-position-y: -127px; animation-delay:1500ms}
.section.update5 .content1 .para2 p:nth-child(2) {height: 21px; background-position-y: -160px; animation-delay:1600ms}
.section.update5 .content1 .para2 p:nth-child(3) {background-position-y: -195px; animation-delay:1700ms}
.section.update5 .content1 .para3 p:nth-child(1) {background-position-y: -225px; animation-delay:2000ms}
.section.update5 .content1 .para3 p:nth-child(2) {background-position-y: -256px; animation-delay:2100ms}
.section.update5 .content1 .para3 p:nth-child(3) {background-position-y: -289px; animation-delay:2200ms}
.section.update5 .content1 .dungeon_info {width: 1484px; height: 605px; margin-left: -104px; margin-bottom: 59px; background: url('../images/dungeon_info3.png') center center / auto no-repeat;}
.section.update5 .content2 {margin-bottom: 151px;}
.section.update5 .content2 .sub_title_wrap {width: 316px; margin-bottom: 62px;}
.section.update5 .content2 .sub_title_wrap .title {background-position: -10px -202px;}
.section.update5 .content2 .dungeon5 .dungeon_img_preview {background-position: -594px -972px}
.section.update5 .content2 .dungeon6 .dungeon_img_preview {background-position: -0 -972px}
.section.update5 .content3 .sub_title_wrap {width: 350px; margin-bottom: 62px;}
.section.update5 .content3 .sub_title_wrap .title {background-position: -10px -10px;}
.section.update5 .content3 .monster_img .monster_img_preview {background: url('../images/spr_monster2.png') 0 0 / auto no-repeat;}
.section.update5 .content3 .row1 .monster7 .monster_img_preview {background-position:-10px -10px;}
.section.update5 .content3 .row1 .monster8 .monster_img_preview {background-position:-416px -10px;}
.section.update5 .content3 .row1 .monster9 .monster_img_preview {background-position: -822px -10px}
.section.update5 .content3 .row2 .monster10 .monster_img_preview {background-position:-10px -577px;}
.section.update5 .content3 .row2 .monster11 .monster_img_preview {background-position:-416px -577px;}
.section.update5 .content3 .row2 {justify-content: center;}
.section.update5 .content3 .monster10 {margin-right: 57px;}

/* >>> ANIMATION */
.section.update5 .para p {opacity: 0; transform: translateY(-20px);}
.section.update5 .dungeon_info {opacity: 0;}
.section.update5 .sub_title_wrap .title {transform: scale(0.7);}
.section.update5 .dungeon_img button,
.section.update5 .active .monster_img button {opacity: 0; transform: translateY(-20px);}
.section.update5 .active .para p {animation: slideY 400ms ease-in forwards;}
.section.update5 .active .dungeon_info {animation:revealed 750ms linear forwards 2200ms}
.section.update5 .active .sub_title_wrap .title {animation: switch 300ms linear forwards 550ms}
.section.update5 .active .sub_title_wrap .arrow {animation: slideX 550ms ease-in-out forwards 200ms;}
.section.update5 .active .dungeon_img button,
.section.update5 .active .monster_img button {animation: slideY 550ms ease-in-out forwards 1000ms;}
.section.update5 .active .dungeon_img button:nth-child(1) {animation-delay: 1000ms;}
.section.update5 .active .dungeon_img button:nth-child(2) {animation-delay: 1200ms;}
.section.update5 .active .row1 button:nth-child(1) {animation-delay: 400ms;}
.section.update5 .active .row1 button:nth-child(2) {animation-delay: 600ms;}
.section.update5 .active .row1 button:nth-child(3) {animation-delay: 800ms;}
.section.update5 .active .row2 button:nth-child(1) {animation-delay: 1000ms;}
.section.update5 .active .row2 button:nth-child(2) {animation-delay: 1200ms;}

/* UPDATE6 */
.section.update6 {background-image:url(../images/bg_6.jpg); height:1276px;}
.section.update6 .title_wrap .num {width:220px; height:29px; margin-bottom: 25px; background-position: -915px -230px;}
.section.update6 .title_wrap .title {width:1275px; height:90px; margin-bottom: 16px; background-position: -10px -10px;}
.section.update6 .title_wrap .desc {width:545px; height:37px; margin-bottom: 35px; background-position: -10px -704px;}
.section.update6 .img_wrap {position: relative; height: 917px;}
.section.update6 .img_wrap div {position: absolute;}
.section.update6 .img_wrap .img1 {top:0; left:-76px; width:728px; height:446px; background:url(../images/update6_image1.png) no-repeat;}
.section.update6 .img_wrap .img2 {top:41px; right:-89px; width:777px; height:456px; background:url(../images/update6_image2.png) no-repeat;}
.section.update6 .img_wrap .img3 {top:310px; left:154px; width:962px; height:607px; background:url(../images/update6_image3.png) no-repeat;}
.section.update6 .notation {top: 555px; left: 240px; width:566px; height:77px; background:url(../images/update6_notation.png) no-repeat; z-index: 2;}
.section.update6 .notiation_frame {top: 536px; left: 213px; width:616px; height:127px; background:url(../images/update6_notation_frame.png) no-repeat; z-index: 1}

/* >> ANIMATION */
.section.update6 .img_wrap .img1 {opacity:0;transform:translateX(-80px)}
.section.update6 .img_wrap .img2 {opacity:0;transform:translateX(80px)}
.section.update6 .img_wrap .img3 {opacity:0;transform:translateY(80px)}
.section.update6 .notation {opacity:0; transform:scale(1.1);}
.section.update6 .notiation_frame {opacity:0; transform:scale(1.1);}

.section.update6.active .img_wrap .img1 {animation:slideX .4s ease-in forwards 1s}
.section.update6.active .img_wrap .img2 {animation:slideX .4s ease-in forwards 1s}
.section.update6.active .img_wrap .img3 {animation:slideY .4s ease-in forwards 1.2s}
.section.update6.active .img_wrap .notation {animation:switch .7s ease-in forwards 1.58s}
.section.update6.active .img_wrap .notiation_frame {animation:switch .7s ease-in forwards 1.8s,sparkle .7s ease-in infinite alternate-reverse 2.4s}


footer{min-width:1280px;width:100%;height:81px;margin:0 auto;background:url(../images/footer.jpg) center center/auto no-repeat}
.pop_wrap{display:none;position:fixed;width:100%;height:100%;top:0;right:0;left:0;bottom:0;z-index:2000}
.pop_wrap .dimmed{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;background:rgba(0,0,0,.9)}
.pop_wrap .pop{position:absolute;left:50%;top:50%;width:1196px;height:660px;transform:translate(-50%,-50%)}
.pop_wrap .pop .btn_close{position:absolute;right:-64px;width:64px;height:64px;background:url(../images/btn_close.png) no-repeat;text-indent:-9999px;z-index:1}
.pop_wrap .pop .img_wrap{width:1171px;height:100%;margin:0 auto}
.pop_wrap .pop .img_wrap img{width:100%}

/* MOBILE */
@media only screen and (-webkit-min-device-pixel-ratio: 1.3) and (max-device-width: 720px) {
  .section.update .sub_title_wrap .title {transform: scale(1); opacity: 1; filter: blur(0);}
  .update.active .title_wrap .num { opacity: 1; filter: blur(0); transform: scale(1); }
  .section.update .active .sub_title_wrap .title {transform: scale(1);}
  .section.update3 .content1 .dungeon_info,
  .section.update .dungeon_info,
  .section.update .active .dungeon_info,
  .section.update2 .image {opacity: 1;}
  .section.update .img_wrap .img1,
  .section.update .img_wrap .img2,
  .section.update .img_wrap .img3,
  .update.active .img_wrap .img1,
  .update.active .img_wrap .img2,
  .update.active .img_wrap .img3 {opacity: 1; transform: translateX(0);}
  .section.update .para p,
  .section.update .dungeon_img button, 
  .section.update .active .dungeon_img button, 
  .section.update .monster_img button,
  .section.update .active .monster_img button,
  .update.active .title_wrap .title,
  .update.active .title_wrap .desc,
  .section.update .active .para p,
  .update.active .img_wrap .img3,
  .section.update2 .summary {opacity: 1; transform:translateY(0)}
  .section.update6 .notation,
  .section.update6 .notiation_frame {opacity:1; transform:scale(1);}

  .update.active .title_wrap .num,
  .update.active .title_wrap .title,
  .update.active .title_wrap .desc,
  .section.update .para p,
  .section.update .active .para p,
  .section.update .active .dungeon_info,
  .section.update .active .sub_title_wrap .title,
  .section.update .active .sub_title_wrap .arrow,
  .section.update .active .dungeon_img button, 
  .section.update .active .monster_img button,
  .update.active .img_wrap .img1,
  .update.active .img_wrap .img2,
  .update.active .img_wrap .img3,
  .section.update2.active .image,
  .section.update6.active .img_wrap .notation,
  .section.update6.active .img_wrap .notiation_frame {animation: none}
}