@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500&display=swap&subset=korean");
/* RESET DEFAULT ELEMENTS STYLE */
body, section, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button { margin: 0; padding: 0; }

dl, ul, ol, menu, li { list-style: none; }

address, caption, cite, code, dfn, em, var { font-style: normal; font-weight: normal; }

img, fieldset, iframe { border: 0 none; }

img { vertical-align: top; }

input, select, textarea, button { vertical-align: middle; }

textarea { resize: none; }

input::-ms-clear { display: none; }

button { border: 0 none; background-color: transparent; cursor: pointer; }

button:focus, a:focus { outline: 0; }

button, input[type='button'], input[type='submit'], input[type='reset'], input[type='file'] { border-radius: 0; -webkit-appearance: button; }

input[type="image"], input[type="text"], input[type="submit"], input[type="password"], input[type='search'] { border-radius: 0; -webkit-appearance: none; }

input:checked[type='checkbox'] { -webkit-appearance: checkbox; background-color: transparent; }

input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }

table { border-collapse: collapse; border-spacing: 0; empty-cells: show; }

caption, legend { position: absolute; top: -9999px; left: -9999px; font-size: 0; line-height: 0; }

a { text-decoration: none; }

a:hover { text-decoration: underline; }

a:active { background-color: transparent; }

hr { display: none; }

address, caption, cite, code, dfn, em, var { font-style: normal; font-weight: normal; }

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, main { display: block; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

html, body { background: #fff; }

.blind { display: block; overflow: hidden; visibility: hidden; text-indent: -9999px; font-size: 0; height: 0; }

.ir { display: block; overflow: hidden; text-align: left; text-indent: -9999px; font-size: 0 !important; }

.loader { z-index: 512; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; }

/* Common Page Size */
#wrapper, #contents { position: relative; margin: 0 auto; }

#wrapper { min-width: 1280px; max-width: 2560px; }

#contents { z-index: 2; overflow: hidden; min-width: 1280px; max-width: 2560px; height: 7817px; padding-top: 120px; background: url("https://lwi.nexon.com/elsword/event/2022/1124_dyeing_A8887F0343FE818C/contents.jpg") no-repeat center 120px; }

.inner { position: relative; width: 1280px; margin: 0 auto; }

.inner:after { content: ''; display: block; clear: both; }

/* Header */
#header { position: absolute; top: 0; left: 0; right: 0; z-index: 3; height: 120px; }

#header .h_bg_l { position: absolute; top: 0; left: 0; width: 50%; height: 120px; background: #6eb9e1; }

#header .h_bg_r { position: absolute; top: 0; right: 0; width: 50%; height: 120px; background: #d975a6; }

#header.sticky.sticky { position: fixed; }

.header-inner { position: relative; width: 100%; margin: 0 auto; min-width: 1400px; max-width: 2560px; }

.header-inner:after { content: ''; display: block; clear: both; }

.header-logo a, .header-menu a { position: relative; display: block; overflow: hidden; text-align: left; text-indent: -9999px; font-size: 0; }

.header-logo { position: absolute; top: 30px; left: 25px; z-index: 99; transition: all .3s ease; }

.header-logo a { width: 145px; height: 50px; background: url("https://lwi.nexon.com/elsword/event/2022/1124_dyeing_A8887F0343FE818C/quick_logo.png") no-repeat; }

.header-menu { position: absolute; top: 44px; right: 30px; z-index: 99; overflow: hidden; height: 35px; }

.header-menu li { float: left; margin-left: 4px; }

.header-menu li:first-child { margin: 0 8px 0 0; }

.header-menu li a { width: 35px; height: 35px; background: url("https://lwi.nexon.com/elsword/event/2022/1124_dyeing_A8887F0343FE818C/spr_tnb.png") no-repeat; }

.header-menu li.gameStart a { width: 121px; background-position: 0 0px; }

.header-menu li.home a { background-position: -134px 0px; }

.header-menu li.fb a { background-position: -172px 0px; }

.header-menu li.tw a { background-position: -211px 0px; }

.nav { position: absolute; top: 0; left: 0; right: 0; height: 120px; }

.nav .nav_inner { position: relative; z-index: 5; width: 1280px; margin: 0 auto; background: url("https://lwi.nexon.com/elsword/event/2022/1124_dyeing_A8887F0343FE818C/nav_bg.png") no-repeat; }

.nav .nav_inner ul.nav_l { overflow: hidden; width: 890px; margin: 0 auto; }

.nav .nav_inner ul.nav_l li { float: left; }

.nav .nav_inner ul.nav_l li a { display: block; width: 420px; height: 120px; background: url("https://lwi.nexon.com/elsword/event/2022/1124_dyeing_A8887F0343FE818C/nav.png") no-repeat; text-indent: -9999px; background-position-y: 40px; }

.nav .nav_inner ul.nav_l li a:hover { background-position-y: -98px; }

.nav .nav_inner ul.nav_l li.n1 { padding-right: 50px; }

.nav .nav_inner ul.nav_l li.n2 a { background-position-x: -470px; }

.nav .nav_inner ul.nav_l li.on a { background-position-y: -98px; }

/* Contents 영역 */
.section { position: relative; z-index: 1; }

#href_1 { position: absolute; top: 1350px; left: 0; right: 0; height: 1px; }

#href_2 { position: absolute; top: 4480px; left: 0; right: 0; height: 1px; }

#contents .btn_top { display: none; position: fixed; bottom: 30px; right: 30px; width: 80px; height: 80px; z-index: 100; background-position-x: -747px; }

#contents .btn_top a { display: block; width: 100%; height: 100%; background: url("https://lwi.nexon.com/elsword/event/2022/1124_dyeing_A8887F0343FE818C/btn_top.png") no-repeat; text-indent: -9999px; }

#contents .btn_top a:hover { background-position-y: -153px; }

h4.note_h4 { position: absolute; top: 6180px; left: 150px; font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; font-size: 16px; font-weight: normal; color: #c58cff; }

/* 시스템 유의사항 */
.note { position: relative; margin: 0 auto; font-size: 16px; font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; color: #cdc8ed; }

.note > ul { vertical-align: middle; }

.note > ul ul { margin-left: 12px; }

.note > ul li { position: relative; }

.note li:last-child { margin-bottom: 0; }

.note li, .note p, .note a { line-height: 27px; }

.note a { position: relative; font-weight: bold; }

.note a:hover { text-decoration: underline; }

.note strong { font-weight: 700; }

#note1 { padding: 6206px 0 0 141px; }

#note1 h4 { display: none; }

#note1 ul li { padding-left: 9px; background: url("https://lwi.nexon.com/elsword/event/2022/1124_dyeing_A8887F0343FE818C/bul.png") 0 13px no-repeat; }

#footer { position: absolute; bottom: 118px; left: 0; right: 0; z-index: 10; }

#footer .f_inner { width: 1280px; margin: 0 auto; }

#footer .f_inner .copyright { width: 426px; height: 21px; margin: 0 auto; background: url("https://lwi.nexon.com/elsword/event/2022/1124_dyeing_A8887F0343FE818C/footer.png") no-repeat; text-indent: -9999px; }