@charset "utf-8";
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;box-sizing:border-box}
article,aside,footer,header,nav,section{display:block}
body,button{font-family:GmarketSans,"맑은 고딕","Malgun gothic","돋움",dotum,"굴림",Helvetica,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}
.sr_only{overflow:hidden;visibility:hidden;position:absolute;left:0;top:0;width:0;height:0;font-size:0;line-height:0}


/* COMMON */
body{background-color:#0c0c0d;position:relative;}
.section{position:relative;width:100%;min-width:1280px;max-width:1920px;margin:0 auto;background-position:center center;background-size:auto;background-repeat:no-repeat;}
.wrap{position:relative;width:1280px;height:100%;padding:0 40px;margin:0 auto}
.section .wrap > .num {opacity: 0; transform: translateY(-20px); transition: all 500ms ease 300ms;}
.section .wrap > .title {opacity: 0; transition: all 500ms ease 300ms;}
.section .wrap > .text {opacity: 0; transform: translateY(20px); transition: all 500ms ease 300ms;}
.section.active .wrap > .num {opacity: 1; transform: translateY(0);}
.section.active .wrap > .title {opacity: 1; animation: glow 6s ease-in-out alternate 300ms;}
.section.active .wrap > .text {opacity: 1; transform: translateY(0);}
.img{background-position:center center;background-size:auto;background-repeat:no-repeat}


/* HEADER */
.header{position:absolute;top:0;left:0;width:100%;min-width:1280px;z-index:100}
.header h1{position:absolute;top:27px;left:50px;width:194px;height:55px;background:url(../images/h-logo.png) center center/auto no-repeat}
.header h1 a{display:block;height:100%}
.header .gnb{position:fixed;top:50%;left:46px;width:175px;height:330px;transform:translateY(-50%)}
.header .gnb::before{position:absolute;top:0;left:5px;width:1px;height:330px;background:url(../images/h-line.png) center center/auto no-repeat;content:''}
.header .gnb li button{position:absolute;left:0;height:50px;background:url(../images/h-gnb.png) -10px 0/auto no-repeat}
.header .gnb li:nth-child(1) button{top:55px;width:196px;background-position-y:-10px}
.header .gnb li.active:nth-child(1) button,.header .gnb li:hover:nth-child(1) button{background-position-y:-72px}
.header .gnb li:nth-child(2) button{top:108px;width:280px;background-position-y:-118px}
.header .gnb li.active:nth-child(2) button,.header .gnb li:hover:nth-child(2) button{background-position-y:-180px}
.header .gnb li:nth-child(3) button{top:193px;width:202px;background-position-y:-258px}
.header .gnb li.active:nth-child(3) button,.header .gnb li:hover:nth-child(3) button{background-position-y:-320px}
.header .gnb li:nth-child(4) button{top:259px;width:265px;background-position-y:-377px}
.header .gnb li.active:nth-child(4) button,.header .gnb li:hover:nth-child(4) button{background-position-y:-439px}
.header .snb{position:absolute;top:31px;right:50px;width:166px;height:85px}
.header .snb li{position:absolute;background:url(../images/h-snb.png) 0 0/auto no-repeat}
.header .snb a,.header .snb button{display:block;width:100%;height:100%;padding:0 8px}
.header .snb li:nth-child(1){top:0;left:0;width:42px;height:42px;background-position:-48px -65px}
.header .snb li:nth-child(2){top:0;left:66px;width:42px;height:42px;background-position:-94px -64px}
.header .snb li:nth-child(3){top:0;left:124px;width:42px;height:42px;background-position:5px -66px}
.header .snb li:nth-child(4){bottom:0;left:0;width:167px;height:35px;background-position:-10px -10px}
.header .quick{position:fixed;bottom:20px;right:0;width:100px;height:45px}
.header .quick li{background:url(../images/h-quick.png) 0 0/auto no-repeat}
.header .quick a,.header .quick button{display:block;width:100%;height:100%}
.header .quick li:nth-child(1){height:55px;background-position:-10px -80px}
.header .quick li:nth-child(2){margin-top:-1px;height:55px;background-position:-130px -10px}
.header .quick li:nth-child(3){margin-top:-1px;height:40px;background-position:-10px -85px}


/* MAIN */
.section.intro{position:relative;height:1226px;background-image: url(../images/u0-bg.jpg)}
.section.intro .sub,.section.intro .title,.section.intro .version{position:absolute;background:url(../images/u0-spr.png) 0 0/auto no-repeat;opacity:0;transform:translateY(50px);animation:fadeInTitle 1s ease-out forwards,glow 3s ease-in-out alternate}
.section.intro .sub{top:337px;left:134px;width:539px;height:62px;background-position:-10px -491px;animation-delay:.5s}
.section.intro .version{top:386px;left:64px;width:680px;height:76px;background-position:-10px -395px;animation-delay:1s}
.section.intro .title{top:431px;left:-12px;width:1132px;height:365px;background:url(../images/title.png) 0 0/auto no-repeat;animation-delay:1.5s}
.section.intro .effect{position:absolute;top:0;left:50%;width: 100%; max-width:1920px;height:1226px;transform:translateX(-50%)}
.section.intro .spider_left{position:absolute;top:0;left:0;width:789px;height:514px;background:url(../images/u0-spider.png) -10px -88px/auto no-repeat;animation:sway 4s ease-in-out infinite;transform-origin:top left}
.section.intro .spider_right{position:absolute;top:0;right:0;width:617px;height:664px;background:url(../images/u0-spider.png) -10px -627px/auto no-repeat;animation:sway2 4s ease-in-out infinite;transform-origin:top right}
.section.intro .smoke div {position: absolute; top: 39px; left: 38px; width: 404px; height: 600px; background: url('../images/smoke.png') center center / 100% 90% no-repeat;opacity: 0}

/* UPDATE 1 */
.section.update1{height:4203px;background-image:url(../images/u1-bg.jpg)}
.section.update1::after{position:absolute;top:3445px;left:49%;width:1479px;height:44px;background:url(../images/u1-stair.png) center center/auto no-repeat;transform:translateX(-50%);opacity:1;pointer-events:none;content:''}
.section.update1 .num,.section.update1 .text,.section.update1 .title{background:url(../images/u1-title.png) 0 0/auto no-repeat}
.section.update1 .num{display:block;width:440px;height:58px;margin:0 auto;background-position:-10px -270px; }
.section.update1 .title{width:550px;height:120px;margin:0px auto 10px;background-position:0px 0px; }
.section.update1 .text{width:576px;height:39px;margin:0 auto 74px;background-position:-10px -350px; }
.section.update1 .article1 .title{width:342px;height:110px;margin:0 auto;background-position:-10px -149px}
.section.update1 .article1 .content p{margin-bottom:31px;font-size:17px;line-height:1.5;letter-spacing:-0.025em;text-align:center}
.section.update1 .article1 .content span{display:block}
.section.update1 .article2 .img,.section.update1 .article2 .table,.section.update1 .article2 .title{background:url(../images/u1-info.png) 0 0/auto no-repeat}
.section.update1 .article2 .title{width:260px;height:67px;margin:81px auto 47px;background-position:-367px -351px}
.section.update1 .article2 .content{display:flex}
.section.update1 .article2 .img{width:337px;height:306px;margin-top:39px;margin-left:66px;background-position:-10px -351px; animation: infinityMove 4s linear infinite;}
.section.update1 .article2 .table{width:701px;height:321px;margin-left:85px;background-position:-10px -10px}
.section.update1 .article3 .img button,.section.update1 .article3 .title{background:url(../images/u1-img.png) 0 0/auto no-repeat}
.section.update1 .article3 .title{width:320px;height:34px;margin:70px auto 64px;background-position:-10px -596px}
.section.update1 .article3 .content{display:flex;flex-wrap:wrap;justify-content:space-between}
.section.update1 .article3 .content li{display:inline-flex;justify-content:center;align-items:center;width:586px;height:273px;margin-bottom:26px;background-color:#4a423a;transition:background-color .3s ease-in}
.section.update1 .article3 .content li:hover{background-color:#ffab50;transition:background-color .3s ease-in}
.section.update1 .article3 .content button{display:block;width:calc(100% - 2px);height:calc(100% - 2px)}
.section.update1 .article3 .content li:nth-child(1) button{background-position:-616px -10px}
.section.update1 .article3 .content li:nth-child(2) button{background-position:-616px -303px}
.section.update1 .article3 .content li:nth-child(3) button{background-position:-10px -10px}
.section.update1 .article3 .content li:nth-child(4) button{background-position:-10px -303px}
.section.update1 .article4 .img button,.section.update1 .article4 .monster,.section.update1 .article4 .title{background:url(../images/u1-monster.png) 0 0/auto no-repeat}
.section.update1 .article4 .title{width:323px;height:60px;margin:77px auto 55px;background-position:-2046px -503px}
.section.update1 .article4 .content{display:flex;flex-wrap:wrap;justify-content:space-between}
.section.update1 .article4 .content li{position:relative;width:388px;height:547px;margin-bottom:22px;opacity:.8;transition:opacity 3s ease;overflow:hidden}
.section.update1 .article4 .content li:hover{opacity:1}
.section.update1 .article4 .content button{display:block;width:386px;height:547px}
.section.update1 .article4 .content li:nth-child(1) button{background-position:-1234px -10px}
.section.update1 .article4 .content li:nth-child(2) button{background-position:-1640px -577px}
.section.update1 .article4 .content li:nth-child(3) button{background-position:-1234px -577px}
.section.update1 .article4 .content li:nth-child(4) button{background-position:-10px -1146px}
.section.update1 .article4 .content li:nth-child(5) button{background-position:-416px -1146px}
.section.update1 .article4 .content li:nth-child(6) button{background-position:-1640px -10px}
.section.update1 .article4 .content .monster{position:absolute;width:386px}
.section.update1 .article4 .content li:nth-child(1) .monster{top:99px;left:1px;height:380px;background-position:-416px -1713px;transition:left .5s ease}
.section.update1 .article4 .content li:nth-child(2) .monster{top:64px;left:0;height:482px;background-position:-1633px -1146px;transition:top .5s ease}
.section.update1 .article4 .content li:nth-child(3) .monster{top:42px;left:0;height:500px;background-position:-822px -1146px;transition:left .5s ease}
.section.update1 .article4 .content li:nth-child(4) .monster{top:63px;left:0;height:480px;background-position:-10px -1713px;transition:top .5s ease}
.section.update1 .article4 .content li:nth-child(5) .monster{top:50px;left:0;height:492px;background-position:-1227px -1146px;transition:left .5s ease}
.section.update1 .article4 .content li:nth-child(6) .monster{top:63px;left:0;height:483px;background-position:-2046px -10px;transition:top .5s ease}
.section.update1 .article4 .content li:hover:nth-child(1) button{background-position:-11px -10px}
.section.update1 .article4 .content li:hover:nth-child(2) button{background-position:-419px -10px}
.section.update1 .article4 .content li:hover:nth-child(3) button{background-position:-419px -578px}
.section.update1 .article4 .content li:hover:nth-child(4) button{background-position:-827px -10px}
.section.update1 .article4 .content li:hover:nth-child(5) button{background-position:-11px -578px}
.section.update1 .article4 .content li:hover:nth-child(6) button{background-position:-826px -578px}
.section.update1 .article4 .content li:hover:nth-child(1) .monster{left:-6px}
.section.update1 .article4 .content li:hover:nth-child(2) .monster{top:70px}
.section.update1 .article4 .content li:hover:nth-child(3) .monster{left:-6px}
.section.update1 .article4 .content li:hover:nth-child(4) .monster{top:50px}
.section.update1 .article4 .content li:hover:nth-child(5) .monster{left:-6px}
.section.update1 .article4 .content li:hover:nth-child(6) .monster{top:50px}
.section.update1 .article5 .content div,.section.update1 .article5 .title{background:url(../images/u1-item.png) 0 0/auto no-repeat}
.section.update1 .article5 .title{width:545px;height:36px;margin:81px auto 2px;background-position:0 -16px}
.section.update1 .article5 .content{display:flex;justify-content:center;flex-wrap: wrap;}
.section.update1 .article5 .content div:nth-child(1){width:275px;height:266px;margin-top:4px;margin-right:98px;background-position:51px -50px}
.section.update1 .article5 .content div:nth-child(2){width:275px;height:266px;background-position:-330px -50px}
.section.update1 .article5 .content div:nth-child(3){width:555px;height:256px;background-position:0 -317px}
/* ANIMATION */
.section.update1 .article1 .title{opacity: 0; filter: blur(20px); transition: opacity 500ms ease 300ms, filter 500ms ease 300ms;}
.section.update1 .article1 .content span{opacity: 0; transform: translateY(20px); transition: opacity 500ms ease, transform 500ms ease 300ms;}
.section.update1 .article1.active .title{opacity: 1; filter: blur(0);}
.section.update1 .article1.active span {opacity: 1; transform: translateY(0);}
.section.update1 .article1.active p:nth-child(1) span:nth-child(1){transition-delay: 0.8s;}
.section.update1 .article1.active p:nth-child(1) span:nth-child(2){transition-delay: 1s;}
.section.update1 .article1.active p:nth-child(2) span:nth-child(1){transition-delay: 1.2s;}
.section.update1 .article1.active p:nth-child(2) span:nth-child(2){transition-delay: 1.4s;}
.section.update1 .article1.active p:nth-child(3) span:nth-child(1){transition-delay: 1.6s;}
.section.update1 .article1.active p:nth-child(3) span:nth-child(2){transition-delay: 2s;}
.section.update1 .article1.active p:nth-child(4) span:nth-child(1){transition-delay: 2.2s;}
.section.update1 .article1.active p:nth-child(4) span:nth-child(2){transition-delay: 2.4s;}
.section.update1 .article1.active p:nth-child(4) span:nth-child(3){transition-delay: 2.6s;}
.section.update1 .article1.active p:nth-child(5) span:nth-child(1){transition-delay: 2.8s;}
.section.update1 .article1.active p:nth-child(5) span:nth-child(2){transition-delay: 3s;}
.section.update1 .article2 .title{opacity: 0; filter: blur(20px); transition: opacity 500ms ease 300ms, filter 500ms ease 300ms;}
.section.update1 .article2 .img{opacity: 0; transform: translateX(-20px); transition: opacity 500ms ease 500ms, transform 500ms ease 500ms;}
.section.update1 .article2 .table{opacity: 0; transform: translateX(20px); transition: opacity 500ms ease 500ms, transform 500ms ease 500ms;}
.section.update1 .article2.active .title{opacity: 1; filter: blur(0);}
.section.update1 .article2.active .img{opacity: 1; transform: translateX(0);}
.section.update1 .article2.active .table{opacity: 1; transform: translateX(0);}
.section.update1 .article3 .title{opacity: 0; filter: blur(20px); transition: opacity 500ms ease 300ms, filter 500ms ease 300ms;}
.section.update1 .article3 .content li{opacity: 0; transition: opacity 500ms ease 600ms, transform 500ms ease 600ms;}
.section.update1 .article3 .content li:nth-child(1){ transform: translateX(-20px);}
.section.update1 .article3 .content li:nth-child(2){ transform: translateY(-20px);}
.section.update1 .article3 .content li:nth-child(3){ transform: translateY(20px);}
.section.update1 .article3 .content li:nth-child(4){ transform: translateX(20px);}
.section.update1 .article3.active .title{opacity: 1; filter: blur(0);}
.section.update1 .article3.active .content li{opacity: 1; transform: translate(0,0);}
.section.update1 .article3.active .content li:hover{transition-delay: 0s !important;}
.section.update1 .article3.active .content li:nth-child(2){transition-delay: 0.9s;}
.section.update1 .article3.active .content li:nth-child(3){transition-delay: 1.2s;}
.section.update1 .article3.active .content li:nth-child(4){transition-delay: 1.5s;}
.section.update1 .article4 .title{opacity: 0; filter: blur(20px); transition: opacity 500ms ease 300ms, filter 500ms ease 300ms;}
.section.update1 .article4 .content button{opacity: 0; transform: translateY(20px); transition: opacity 500ms ease 600ms, transform 500ms ease 600ms;}
.section.update1 .article4 .content li:nth-child(1) button{transition-delay: 0.6s;}
.section.update1 .article4 .content li:nth-child(2) button{transition-delay: 0.9s;}
.section.update1 .article4 .content li:nth-child(3) button{transition-delay: 1.2s;}
.section.update1 .article4 .content li:nth-child(4) button{transition-delay: 1.5s;}
.section.update1 .article4 .content li:nth-child(5) button{transition-delay: 1.8s;}
.section.update1 .article4 .content li:nth-child(6) button{transition-delay: 2.1s;}
.section.update1 .article4.active .title{opacity: 1; filter: blur(0);}
.section.update1 .article4.active .content button{opacity: 1; transform: translateY(0);}
.section.update1 .article5 .title{opacity: 0; filter: blur(20px); transition: opacity 500ms ease 300ms, filter 500ms ease 300ms;}
.section.update1 .article5 .content div{opacity: 0; transition: opacity 500ms ease 600ms, transform 500ms ease 600ms;}
.section.update1 .article5 .content div:first-child{transform: translateX(-20px);}
.section.update1 .article5 .content div:last-child{transform: translateX(20px);}
.section.update1 .article5.active .title{opacity: 1; filter: blur(0);}
.section.update1 .article5.active .content div{opacity: 1; transform: translateX(0);}
@media screen and (max-width: 1280px){
   .section.update1::after{width: 100%}
}

/* UPDATE2 */
.section.update2{height:1214px;background-image:url(../images/u2-bg.jpg)}
.section.update2 .num,.section.update2 .text,.section.update2 .title{background:url(../images/u2-title.png) 0 0/auto no-repeat}
.section.update2 .num{display:block;width:440px;height:60px;margin:0 auto;background-position:-10px -148px}
.section.update2 .title{width:966px;height:118px;margin:-6px auto 5px;background-position:-10px -10px}
.section.update2 .text{width:500px;height:39px;margin:0 auto 70px;background-position:-471px -148px}
.section.update2 .btns{display:flex;justify-content:center;margin-bottom:29px}
.section.update2 .btns button{width:282px;height:57px;background:url(../images/u2-btn.png)}
.section.update2 .btns .btn1{margin-right:38px;background-position:-10px -164px}
.section.update2 .btns .btn1.active,.section.update2 .btns .btn1:hover{background-position:-10px -241px}
.section.update2 .btns .btn2{background-position:-10px -87px}
.section.update2 .btns .btn2.active,.section.update2 .btns .btn2:hover{background-position:-10px -10px}
.section.update2 article{display:none}
.section.update2 article.active{display:block}
.section.update2 .article1,.section.update2 .article1 .img{background:url(../images/u2-pet.png)}
.section.update2 .article1{position:relative;width:758px;height:656px;margin:0 auto;background-position:-10px 0}
.section.update2 .article1 .img{position:absolute;bottom:107px;left:-54px;width:411px;height:130px;background-position:-788px -10px;transform:scale(1.05);animation:pulse .8s ease-in infinite alternate-reverse}
.section.update2 .article2,.section.update2 .article2 .img{background:url(../images/u2-anima.png)}
.section.update2 .article2{position:relative;width:877px;height:652px;margin:0 auto;background-position:-10px -10px}
.section.update2 .article2 .img1{position:absolute;bottom:37px;left:185px;width:489px;height:185px;background-position:-10px -682px;transform:scale(1.05);animation:pulse .8s ease-in infinite alternate-reverse}
.section.update2 .article2 .img2{position:absolute;bottom:235px;right:-28px;width:329px;height:108px;background-position:-519px -682px;transform:scale(1.05);animation:pulse .8s ease-in infinite alternate-reverse}
/* ANIMATION */
.section.update2 .scrollAnim {opacity: 0; transform: translateY(40px); transition: opacity 500ms ease 300ms, transform 500ms ease 300ms;}
.section.update2 .scrollAnim.active {opacity: 1; transform: translateY(0);}


/* UPDATE3 */
.section.update3{height:1244px;background-image:url(../images/u3-bg.jpg)}
.section.update3 .num,.section.update3 .text,.section.update3 .title{background:url(../images/u3-title.png) 0 0/auto no-repeat}
.section.update3 .num{display:block;width:570px;height:60px;margin:0 auto;background-position:-10px -211px}
.section.update3 .title{width:560px;height:100px;margin:-6px auto 3px;background-position:-10px -10px}
.section.update3 .text{width:624px;height:40px;margin:0 auto 42px;background-position:-10px -151px}
.section.update3 .content .text{width:781px;height:66px;margin:0 auto 13px;background-position:-590px -10px}
.section.update3 .img{position:relative;width:100%;height:804px}
.section.update3 .img div{position:absolute;background:url(../images/u3-spr.png) 0 0/auto no-repeat}
.section.update3 .img .ui{left:139px;top:38px;width:289px;height:149px;background-image:url(../images/u3-ui.png);z-index:1}
.section.update3 .img .stone{left:282px;bottom:0;width:897px;height:804px;background-image:url(../images/u3-img.png);z-index:3}
.section.update3 .img .fg{left:317px;top:100px;width:227px;height:380px;background-position:-10px -665px;z-index:2}
.section.update3 .img .fb{left:636px;top:104px;width:228px;height:364px;background-position:-257px -665px;z-index:2}
.section.update3 .img .fp{left:131px;top:149px;width:310px;height:475px;background-position:-746px -10px;z-index:3}
.section.update3 .img .fr{left:724px;top:104px;width:311px;height:532px;background-position:-415px -10px;z-index:3}
.section.update3 .img .fy{left:407px;top:75px;width:385px;height:635px;background-position:-10px -10px;z-index:4}
.section.update3 .img .iw{left:732px;top:426px;width:13px;height:13px;background-position:-746px -615px;z-index:5}
.section.update3 .img .ib{left:805px;top:150px;width:84px;height:84px;background-position:-856px -505px}
.section.update3 .img .ir{left:954px;top:337px;width:71px;height:71px;background-position:-960px -505px}
.section.update3 .img .ig{left:355px;top:219px;width:54px;height:53px;background-position:-489px -553px}
.section.update3 .img .iy{left:454px;top:446px;width:54px;height:54px;background-position:-415px -553px;z-index:5}
.section.update3 .img .ip{left:149px;top:271px;width:90px;height:90px;background-position:-746px -505px}
.section.update3 .img .pp{left:286px;bottom:30px;width:162px;height:147px;background-position:-696px -665px;z-index:6}
.section.update3 .img .pr{left:751px;bottom:31px;width:162px;height:147px;background-position:-878px -665px;z-index:6}
.section.update3 .img .pb{left:585px;bottom:26px;width:171px;height:155px;background-position:-505px -665px;z-index:6}
.section.update3 .img .pg{left:442px;bottom:30px;width:162px;height:147px;background-position:-505px -840px;z-index:6}
/* ANIMATION */
.section.update3 .content .text{opacity: 0; transform: translateY(-20px); transition: opacity 500ms ease 300ms, transform 500ms ease 300ms;}
.section.update3 .img .ui{opacity: 0; transition: opacity 500ms ease 2000ms}
.section.update3 .img .stone{opacity: 0; transition: opacity 500ms ease 600ms}
.section.update3 .img .fg,
.section.update3 .img .fp{opacity: 0; transform: translateX(-60px); transition: all 500ms ease 800ms;}
.section.update3 .img .fb,
.section.update3 .img .fr{opacity: 0; transform: translateX(60px); transition: all 500ms ease 800ms;}
.section.update3 .img .fy{opacity: 0; transform: translateY(60px); transition: all 500ms ease 800ms;}
.section.update3 .img .iw,
.section.update3 .img .ib,
.section.update3 .img .ir,
.section.update3 .img .ig,
.section.update3 .img .iy,
.section.update3 .img .ip{opacity: 0; transition: opacity 500ms ease 1500ms}
.section.update3 .img .pp,
.section.update3 .img .pr,
.section.update3 .img .pb,
.section.update3 .img .pg{opacity: 0; transform: translateY(20px); transition: opacity 500ms ease 2.4s, transform 500ms ease 2000ms}
.section.update3 .scrollAnim.active .text{opacity: 1; transform: translateY(0);}
.section.update3 .scrollAnim.active .img .ui{opacity: 1;}
.section.update3 .scrollAnim.active .img .stone{opacity: 1;}
.section.update3 .scrollAnim.active .img .fg,
.section.update3 .scrollAnim.active .img .fp,
.section.update3 .scrollAnim.active .img .fb,
.section.update3 .scrollAnim.active .img .fr{opacity: 1; transform: translateX(0);}
.section.update3 .scrollAnim.active .img .fy{opacity: 1; transform: translateY(0);}
.section.update3 .scrollAnim.active .img .iw,
.section.update3 .scrollAnim.active .img .ib,
.section.update3 .scrollAnim.active .img .ir,
.section.update3 .scrollAnim.active .img .ig,
.section.update3 .scrollAnim.active .img .iy,
.section.update3 .scrollAnim.active .img .ip{opacity: 1; animation: goUp 2.5s ease infinite 0s}
.section.update3 .scrollAnim.active .img .iw{animation-duration: 2s; animation-delay: 1s;}
.section.update3 .scrollAnim.active .img .ib{animation-duration: 2.5s; animation-delay: 1.1s;}
.section.update3 .scrollAnim.active .img .ir{animation-duration: 3s; animation-delay: 1.2s;}
.section.update3 .scrollAnim.active .img .ig{animation-duration: 3.5s; animation-delay: 1.3s;}
.section.update3 .scrollAnim.active .img .iy{animation-duration: 4s; animation-delay: 1.4s;}
.section.update3 .scrollAnim.active .img .ip{animation-duration: 4.5s; animation-delay: 1.5s;}
.section.update3 .scrollAnim.active .img .pp,
.section.update3 .scrollAnim.active .img .pr,
.section.update3 .scrollAnim.active .img .pb,
.section.update3 .scrollAnim.active .img .pg{opacity: 1; transform: translateY(0);}


/* UPDATE4 */
.section.update4{height:1257px;background-image:url(../images/u4-bg.jpg)}
.section.update4 .img div,.section.update4 .num,.section.update4 .text,.section.update4 .title{background:url(../images/u4-spr.png) 0 0/auto no-repeat}
.section.update4 .num{display:block;width:448px;height:50px;margin:0 auto;background-position:-469px -418px}
.section.update4 .title{width:719px;height:128px;margin:16px auto 4px;background-position:-341px -1113px}
.section.update4 .text{width:647px;height:38px;margin:0 auto 46px;background-position:-447px -995px}
.section.update4 .btns{display:flex;justify-content:center;margin-bottom:31px}
.section.update4 .btns button{width:282px;height:57px;background:url(../images/u4-btn.png);border:1px solid #ff9b2e;box-shadow:0 0 10px 0 rgba(0,0,0,.004);transition:background-color .2s ease-in-out}
.section.update4 .btns button.active,.section.update4 .btns button:hover{background-color:#ff9b2e}
.section.update4 .btns .btn1{margin-right:40px;background-position:-10px -10px}
.section.update4 .btns .btn1.active,.section.update4 .btns .btn1:hover{background-position:-10px -87px}
.section.update4 .btns .btn2{background-position:-10px -241px}
.section.update4 .btns .btn2.active,.section.update4 .btns .btn2:hover{background-position:-10px -164px}
.section.update4 article{display:none}
.section.update4 article.active{display:block}
.section.update4 .article1{position:relative;height:662px}
.section.update4 .article1 .text{width:600px;height:37px;margin:0 auto;background-position:-902px -524px}
.section.update4 .article1 .right{position:absolute;top:105px;left:732px;width:417px;height:494px;background-position:-10px -599px}
.section.update4 .article1 .left{position:absolute;top:105px;left:46px;width:418px;height:494px;background-position:-1097px -10px}
.section.update4 .article1 .center{position:absolute;top:93px;left:380px;width:439px;height:569px;background-position:-10px -10px;z-index:2}
.section.update4 .article2{position:relative;height:503px;margin-bottom:271px}
.section.update4 .article2 .text{width:617px;height:68px;background-position:-876px -599px}
.section.update4 .article2 .right{position:absolute;top:183px;left:578px;width:409px;height:376px;background-position:-447px -599px;z-index:2}
.section.update4 .article2 .left{position:absolute;top:101px;left:216px;width:311px;height:386px;background-position:-10px -1113px;z-index:2}
.section.update4 .article2 .center{position:absolute;top:143px;left:293px;width:608px;height:388px;background-position:-469px -10px}
/* ANIMATION */
.section.update4 .btns{opacity: 0; transform: translateY(-20px); transition: opacity 500ms ease 300ms, transform 500ms ease 300ms;}
.section.update4 article{opacity: 0; transform: translateY(-20px); transition: opacity 500ms ease 600ms, transform 500ms ease 600ms;}
.section.update4 .scrollAnim.active .btns{opacity: 1; transform: translateY(0);}
.section.update4 .scrollAnim.active article{opacity: 1; transform: translateY(0);}


/* FOOTER */
.footer{position:absolute;bottom:0;left:0; min-width: 1280px; width:100%;height:137px}
.footer address,.footer strong{margin:0 auto;background:url(../images/f-spr.png) 0 0/auto no-repeat}
.footer strong{display:block;width:646px;height:50px;margin-bottom:21px;background-position:-10px -10px}
.footer address{display:block;width:637px;height:18px;background-position:-10px -80px}


/* POPUP */
.popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);z-index:9999}
.pop_inner{position:absolute;top:50%;left:50%;width:1200px;height:680px;transform:translate(-50%,-50%)}
.pop_inner div{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center center;background-repeat:no-repeat}
.pop_inner div.d-1{background-image:url(../images/d-1.png)}
.pop_inner div.d-2{background-image:url(../images/d-2.png)}
.pop_inner div.d-3{background-image:url(../images/d-3.png)}
.pop_inner div.d-4{background-image:url(../images/d-4.png)}
.pop_inner div.m-1{background-image:url(../images/m-1.png)}
.pop_inner div.m-2{background-image:url(../images/m-2.png)}
.pop_inner div.m-3{background-image:url(../images/m-3.png)}
.pop_inner div.m-4{background-image:url(../images/m-4.png)}
.pop_inner div.m-5{background-image:url(../images/m-5.png)}
.pop_inner div.m-6{background-image:url(../images/m-6.png)}
.pop_inner .btn{position:absolute;top:0;right:-78px;width:73px;height:78px;background:url(../images/btn-close.png) center center/auto no-repeat}


/* ANIM */
@keyframes pulse{
   100%{transform:scale(1)}
}
@keyframes goUp {
   0%,10% {opacity: 1; transform: translateY(0);}
   100% {opacity: 0; transform: translateY(-100px);}
}
@keyframes fadeInUp{
   0%{opacity:0;transform:translateY(20px)}
   100%{opacity:1;transform:translateY(0)}
}
@keyframes bling{
   0%{opacity:.2}
   50%{opacity:1}
   100%{opacity:.2}
}
@keyframes glow{
   from{filter:drop-shadow(0 0 5px rgba(255, 255, 255, .9))}
   to{filter:drop-shadow(0 0 20px rgba(255, 255, 255, 0))}
}
@keyframes sway{
   0%,100%{transform:rotate(0)}
   50%{transform:rotate(1.6deg)}
}
@keyframes sway2{
   0%,100%{transform:rotate(0)}
   50%{transform:rotate(1.2deg)}
}
@keyframes fadeInTitle{
   0%{opacity:0;transform:translateY(5px)}
   70%{opacity:1;transform:translateY(-10px)}
   100%{opacity:1;transform:translateY(0)}
}
@keyframes infinityMove {
   0%, 100% {
     transform: translate(0, 0);
   }
   25% {
     transform: translate(10px, -10px);
   }
   50% {
     transform: translate(20px, 0);
   }
   75% {
     transform: translate(10px, 10px);
   }
 }


/* 배경 */
@media screen and (min-width: 1920px) {
   .section.intro {background-image:linear-gradient(to right, rgba(12,12,13, 0.8) 0%, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) calc(100% - 30px), rgba(12,12,13, 0.8) 100%), url(../images/u0-bg.jpg)}
   .section.update1{background-image:linear-gradient(to right, rgba(12,12,13, 0.8) 0%, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) calc(100% - 30px), rgba(12,12,13, 0.8) 100%),url(../images/u1-bg.jpg)}
   .section.update2{background-image:linear-gradient(to right, rgba(12,12,13, 0.8) 0%, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) calc(100% - 30px), rgba(12,12,13, 0.8) 100%),url(../images/u2-bg.jpg)}
   .section.update3{background-image:linear-gradient(to right, rgba(12,12,13, 0.8) 0%, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) calc(100% - 30px), rgba(12,12,13, 0.8) 100%),url(../images/u3-bg.jpg)}
   .section.update4{background-image:linear-gradient(to right, rgba(12,12,13, 0.8) 0%, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) calc(100% - 30px), rgba(12,12,13, 0.8) 100%),url(../images/u4-bg.jpg)}
}