@charset "utf-8";
@import url(http://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);
/* reset style [start] */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0} 
body,input,textarea,select,button,table{font-family:'Noto Sans Korean', Malgun Gothic, Dotum, sans-serif;font-weight:300;}
img,fieldset{border:0;vertical-align: top;}
ul,ol{list-style:none}
em,address{font-style:normal}
a{text-decoration:none}
a:hover,a:active,a:focus{text-decoration:none}
html {min-width:1280px;-webkit-text-size-adjust:none;background-color:#000}
.blind, legend{position:absolute;left:-1000%; top:0; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden;text-indent:-10000px} /* 숨김 */
button{border:0;cursor:pointer;*overflow:visible;vertical-align:top;background:transparent}
.inner{position:relative;width:100%;max-width:1920px;margin:0 auto;height:100%;}

/* common */
body {background-color: #000;}
#wrapper{position:relative;width:100%;}
#header h1 a, #header .util a, .btn, #header .nav li a, #header .nav li span, .section1 li button {display:block;background:url("https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/spr_btn.png") no-repeat;text-indent:-9999px;overflow:hidden}
#header{position: absolute;top:0;width:100%;height:100px;z-index: 11;background:url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/bg_header_ptn.png') repeat-x;}
#header .inner {position: relative;width: 100%;max-width:1920px;z-index: 5;margin:0 auto;}
#header h1 {position:absolute;left:40px;top:32px;z-index:9}
#header h1 a{width:252px;height:38px}
#header .util{position:absolute;right:20px;top:38px;padding-left:162px}
#header .util ul{overflow:hidden}
#header .util li{float:left;}
#header .util li a{width:150px;height:25px;margin:0  10px}
#header .util .btn_home a{background-position:-180px -50px}
#header .util .btn_home a:hover{background-position:-180px -75px}
#header .util .btn_pw a{width: 122px;background-position:-357px -50px}
#header .util .btn_pw a:hover{background-position:-357px -75px}
#header .util .btn_hide{position:absolute;left:0;top:0;width:154px;height:25px;background-position:0 -50px;}
#header .util .btn_hide:hover{background-position:0 -75px}
#header .nav {position: relative;z-index: 10;width: 838px;margin:0 auto;padding-top:36px;overflow: hidden;}
#header .nav li {float: left;padding:0 25px;border-left:1px solid #262626;}
#header .nav li a{height: 28px;}
#header .nav .n1{border:none;}
#header .nav .n1 a{width: 106px;background-position: -21px -226px}
#header .nav .n1 a:hover{background-position: -21px -254px}
#header .nav .n2 a{width: 156px;background-position: -212px -226px}
#header .nav .n2 a:hover{background-position: -212px -254px}
#header .nav .n3 a{width: 138px;background-position: -452px -226px}
#header .nav .n3 a:hover, #header .nav .active a  {background-position: -452px -254px}
#header .nav .n4 a{width: 182px;background-position: -674px -226px}
#header .nav .n4 a:hover {background-position: -674px -254px}
#container{position:relative;width:100%;max-width:1920px;margin:0 auto;overflow: hidden;}
#footer{position: relative; width:100%;height:100px;background:#000 url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/copyright.png') no-repeat 50% 50%;z-index:20}

.quick {position: absolute;top:180px;right:2%;z-index: 15;}
.quick a {display:block;width: 114px;height: 80px;background: url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/quick.png') no-repeat;text-indent:-9999px;overflow:hidden}
.quick li .q0 {height: 79px;}
.quick li .q0:hover {background-position:-114px 0}
.quick li .q1 {height: 81px;background-position:0 -79px}
.quick li .q1:hover, .quick li.active .q1 {background-position:-114px -79px}
.quick li .q2 {background-position:0 -160px}
.quick li .q2:hover, .quick li.active .q2 {background-position:-114px -160px}
.quick li .q3 {background-position:0 -240px}
.quick li .q3:hover, .quick li.active .q3 {background-position:-114px -240px}
.quick li .q4 {background-position:0 -320px}
.quick li .q4:hover, .quick li.active .q4 {background-position:-114px -320px}
.quick li .q5 {background-position:0 -400px}
.quick li .q5:hover, .quick li.active .q5 {background-position:-114px -400px}
.quick li .q6 {background-position:0 -480px}
.quick li .q6:hover, .quick li.active .q6 {background-position:-114px -480px}
.quick .btn_top {height: 55px;background-position: 0 -560px;}
.sticky #header{position: fixed;}
.sticky .quick{position: fixed;}
.screen {position:fixed;left:0;top:0;width:100%;height:0;background-color:#000;z-index:100000;opacity:0}
.section {position: relative;width: 100%;text-align: center}
.section .inner {position: relative;width: 1280px;margin: 0 auto;}
.section .t3 {padding-bottom: 20px;}
.t1, .t2, .t3, .t4  {transform:rotate(0.01deg)} 

/* section0 */
.section0 {height: 1013px;text-align:center;background:  url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/bg0.jpg') no-repeat center top;}
.section0 .t1 {position: absolute;left:50%;top:318px;margin-left:-572px;z-index: 1;}
.section0 .t2 {position: absolute;left:50%;top:444px;margin-left:-572px;z-index: 1;}
.section0 .t3 {position: absolute;left:50%;top:418px;margin-left:-298px;z-index: 3;}
.section0 .t4 {position: absolute;left:50%;top:564px;margin-left:-298px;z-index: 3;}
.section0 .cha1 {position: absolute;left:50%;top:0;margin-left:-354px; display: block;z-index: 2;width: 874px;height: 1013px;background:  url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/cha0.png') no-repeat }

.scroll{position: absolute;;left:50%;top:786px;;margin-left:-35px;z-index:10;width:69px;height:132px;text-align:center;}
.scroll {animation: bounce 1.5s ease infinite;}

@keyframes bounce {
  50% {
    transform: translateY(-9px);
  }
  100% {
    transform: translateY(0);
  }
}

/* section1 */
.section1 {height: 810px;background:url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/bg1.jpg') no-repeat center top;z-index: 10;}
.section1 .inner {height: 100%;background:url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/txt1.png') no-repeat center top;}
.section1 .btn_preview {position: absolute;left:50%;top:615px;margin-left:-116px; display: block;width: 232px;height: 64px;background-position: 0 -323px;}
.section1 .cha1_1 {position: absolute;left:50%;top:150px;margin-left:-830px;display: block;width: 417px;height: 575px;background:url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/cha1_1.png') no-repeat}
.section1 .cha1_2 {position: absolute;left:50%;top:170px;margin-left:430px;display: block;width: 311px;height: 517px;background:url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/cha1_2.png') no-repeat}

/* section2 */
.section2 {height: 990px;background:url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/bg2.jpg') no-repeat center top;z-index: 10;}
.section2 .inner {height: 100%;margin-top:-20px;background: url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/txt2.png') no-repeat center top;}

/* section3 */
.section3 {height: 575px;background:url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/bg3.jpg') no-repeat center top;z-index: 10;}
.section3 .inner {height: 100%;background: url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/txt3.png') no-repeat center top;}

/* section4 */
.section4 {height: 813px;background:url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/bg4.jpg') no-repeat center top;z-index: 10;}
.section4 .inner {height: 100%;background: url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/txt4.png') no-repeat center top;}

/* section5 */
.section5 {height: 780px;background:url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/bg5.jpg') no-repeat center top;z-index: 10;}
.section5 .inner {height: 100%;background: url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/txt5.png') no-repeat center top;}

/* ~w1420~ */
@media all and (max-width:1420px){
  #header h1 {left:5px;}
	#header .util {right:5px;padding-left:140px;}
	#header .nav {width: 670px;min-width: 640px;margin-left:260px;}
	#header .nav li {padding:0 6px;}
}
/* ~w1199~ */
@media all and (max-width:1199px){
	.sticky #header .util {right:5px;top:65px}
}

/* 꽃가루 */
.particles {width: 1rem;height: 1rem;display: inline-block;position: absolute;top: -1rem;left: 0;z-index: 10;}
.particles .rotate {animation: driftyRotate 1s infinite both ease-in-out;perspective: 1000;}
.particles .askew {background: currentColor;transform: skewY(30deg);width: 1rem;height: 1rem;animation: drifty 1s infinite alternate both ease-in-out;perspective:1000;}
.particles:nth-of-type(5n) { color: #ff4200;}
.particles:nth-of-type(5n+1) {color: #00c0ff;}
.particles:nth-of-type(5n+2) {color: #d2109e;}
.particles:nth-of-type(5n+3) {color: #fcff00;}
.particles:nth-of-type(5n+4) {color: #000cff;}
.particles:nth-of-type(5n+5) {color: #00ffc6;}
.particles:nth-of-type(5n+6) {color: #9446ff;}
.particles:nth-of-type(5n+7) {color: #ff0303;}
.particles:nth-of-type(7n) .askew {animation-delay: -.6s;animation-duration: 2.25s;}
.particles:nth-of-type(7n + 1) .askew {animation-delay: -.879s;animation-duration: 3.5s;}
.particles:nth-of-type(7n + 2) .askew {animation-delay: -.11s;animation-duration: 1.95s;}
.particles:nth-of-type(7n + 3) .askew {animation-delay: -.246s;animation-duration: .85s;}
.particles:nth-of-type(7n + 4) .askew {animation-delay: -.43s;animation-duration: 2.5s;}
.particles:nth-of-type(7n + 5) .askew {animation-delay: -.56s;animation-duration: 1.75s;}
.particles:nth-of-type(7n + 6) .askew {animation-delay: -.76s;animation-duration: 1.5s;}
.particles:nth-of-type(9n) .rotate {animation-duration: 2s;}
.particles:nth-of-type(9n + 1) .rotate {animation-duration: 2.3s;}
.particles:nth-of-type(9n + 2) .rotate {animation-duration: 1.1s;}
.particles:nth-of-type(9n + 3) .rotate {animation-duration: .75s;}
.particles:nth-of-type(9n + 4) .rotate {animation-duration: 4.3s;}
.particles:nth-of-type(9n + 5) .rotate {animation-duration: 3.05s;}
.particles:nth-of-type(9n + 6) .rotate {animation-duration: 2.76s;}
.particles:nth-of-type(9n + 7) .rotate {animation-duration: 7.6s;}
.particles:nth-of-type(9n + 8) .rotate {animation-duration: 1.78s;}
@keyframes drifty {
  0% {
    transform: skewY(30deg) translate3d(-450%, 0, 0);
  }
  100% {
    transform: skewY(-22deg) translate3d(650%, 0, 0);
  }
}
@keyframes driftyRotate {
  0% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(359deg);
  }
}
#petals {width:100%; height:1500px; position: absolute;left:0;top:0;z-index:2;}
.petal1{position: absolute;width:18px;height:16px;background: url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/p1.png');background-size: 100% 100%;transform: rotate(0.01deg)}
.petal2{position:absolute;width:19px;height:12px;background: url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/p2.png');background-size: 100% 100%;transform: rotate(0.01deg)}
.petal3{position:absolute;width:25px;height:12px;background: url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/p3.png');background-size: 100% 100%;transform: rotate(0.01deg)}
.petal4{position:absolute;width:16px;height:18px;background: url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/p4.png');transform: rotate(0.01deg)}
.petal5{position:absolute;width:8px;height:9px;background: url('https://ssl.nexon.com/S2/Game/CSO/event/2018/0726_revive_evt/p5.png');background-size: 100% 100%;transform: rotate(0.01deg)}
.petal6 {width:8px;height:8px;position:absolute;background-color:#00FF00;perspective: 150px;z-index:2;}