@charset "utf-8";
@import url(../fonts/NanumSquareNeo/NanumSquareNeo.css);
@import url(../fonts/nexon/font.css); /* font-family: 'nexonfootballB'; */

@-webkit-keyframes ani-bounce{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{-webkit-transform:translateY(-10%);transform:translateY(-10%)}}@keyframes ani-upDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{-webkit-transform:translateY(-10%);transform:translateY(-10%)}}
@-webkit-keyframes ani-bounce-ball{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{-webkit-transform:translateY(-15%);transform:translateY(-15%)}}@keyframes slide-top{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{-webkit-transform:translateY(-15%);transform:translateY(-15%)}}
@-webkit-keyframes ani-blink {0% {opacity:1;} 50%{opacity:0;} 100% {opacity:1;}} @keyframes blink {0% {opacity:1;} 50%{opacity:0;} 100% {opacity:1;}}
@keyframes textLoop {0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}}
@keyframes dots {100%{transform:translate(-50%,-50%) scale(2.5); opacity:0;}}
@keyframes fireworks1 { 0% {transform:scale(.3);opacity:0;} 100% {transform: scale(1);}}
@-webkit-keyframes ani-turnRight{0%{-webkit-transform:rotate(0); transform:rotate(0)}100%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}}
@keyframes ani-turnRight{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}}
@-webkit-keyframes ani-turnLeft{0%{-webkit-transform:rotate(0); transform:rotate(0)}100%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}}
@keyframes ani-turnLeft{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}}
@-webkit-keyframes ani-turnRight2{0%{-webkit-transform:rotate(0); transform:rotate(0)}100%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}
@keyframes ani-turnLeft{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {line-height:1.6; letter-spacing:-0.02em; word-break:keep-all;}
html {font-size:20px;}
body {font-family: 'NanumSquareNeo'; font-size:1em; color:#111;}
em, .em {color:#4400d7;}

* { /*outline:0;*/ letter-spacing:-.02em; box-sizing:border-box;}
img {max-width:100%;}
.inner {position:relative; max-width:1720px; margin:0 auto;}
.txt-hidden {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0;}


@media all and (min-width:1025px) {
	.only-ta {display:none !important;}
	.only-mo {display:none !important;}
	.not-pc {display:none !important;}
}
@media all and (max-width:1024px) and (min-width:641px) {
	.only-pc {display:none !important;}
	.only-mo {display:none !important;}
	.not-ta {display:none !important;}
}
@media all and (max-width:640px) {
	.only-pc {display:none !important;}
	.only-ta {display:none !important;}
	.not-mo {display:none !important;}
}


/* --------------------------------------------------------------------------
   해상도별 폰트 사이즈 정의
   -------------------------------------------------------------------------- */
@media all and (max-width : 1024px) {html {font-size : 19px;}}
@media all and (max-width : 780px) {html {font-size : 18px;}}
@media all and (max-width : 640px) {html {font-size : 17px;}}
@media all and (max-width : 480px) {html {font-size : 16px;}}

#lnb_05 ~ li {display:none !important;}

/* -----------------------------------------------
	Top Slider
   ----------------------------------------------- */

.mainTopBanner {position:fixed; top:0; left:0; right:0; height:2.5em; z-index:99; background:#111; visibility:hidden;}
.mainTopBanner._visible {visibility:visible;}
.mainTopBanner .slider {position:relative; height:100%; z-index:0;}
.mainTopBanner .swiper-container {height:100%;}
.mainTopBanner .swiper-slide a {display:table; width:100%; height:2.5em;}
.mainTopBanner .swiper-slide a > * {display:table-cell; vertical-align:middle;}
.mainTopBanner .swiper-slide a img {display:block; position:relative; margin:0 auto; max-height:2.5em;}

.today_close {display:block; position:absolute; top:50%; right:0; transform:translateY(-50%); -webkit-transform:translateY(-50%); z-index:5;}
.today_close a {display:block; position:relative; width:2.5em; height:2.5em; text-indent:-999px; overflow:hidden; background:url(../img/common/btn_slide_close.svg) no-repeat 50% 50%; background-size:1em auto;}



/* -----------------------------------------------
	Header
   ----------------------------------------------- */

.mainTopBanner._visible ~ #wrap {padding-top:7em;}
.mainTopBanner._visible ~ #wrap #headerWrap {top:2.5em;}

#wrap {padding-top:4.5em; transition:.3s padding; -webkit-transition:.3s padding; overflow:hidden;}
#headerWrap {display:block; position:fixed; top:0; left:0; right:0; background:#fff; border-bottom:1px solid #E6E6E6; padding:0 2em; z-index:99; transition:.3s top; -webkit-transition:.3s top;}
#headerWrap.scroll {border-bottom:1px solid #dadada;}
#headerWrap .gnb_option {position:absolute; right:0; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); z-index:5;}
#headerWrap .gnb_option a {display:inline-block; vertical-align:middle; padding:.5em 1.5em; padding-left:3em; border:1px solid #fff; border-radius:9em; color:#111; background:#fff;}
#headerWrap .gnb_option a:first-child {border:1px solid #eee;}
#headerWrap .gnb_option a:first-child:before {content:''; display:block; position:absolute;top:50%; margin-top:-.65em; left:1.3em; width:1.2em;height:1.2em; background:url(../img/common/ico_government.svg) no-repeat 0 0; background-size:100%;}
#headerWrap .gnb_option a + a {position: relative; margin-left:.2em; border-color:#2D27DE; background:#2D27DE; color:#fff;}
#headerWrap .gnb_option a + a:before {content:''; display:block; position:absolute;top:50%; margin-top:-.65em; left:1.3em; width:1.2em;height:1.2em; background:url(../img/common/ico_ask.svg) no-repeat 0 0; background-size:100%;}
#headerWrap .gnb_option a span {display:block; position:relative; font-size:.85em;}


#headerWrap .gnb_option a:hover {background:#F7F7F7;}
#headerWrap .gnb_option a + a:hover {background:#333; border-color:#333;}

#logo {display:block; position:absolute; top:50%; left:0; z-index:5; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
#logo a {display:block; position:relative; width:4em; height:2em;}

#lnbWrap {display:block; position:relative; margin:0 15em;}
#lnbWrap .lnb_nav {display:flex; flex-wrap:nowrap; justify-content:center; height:4.5em; align-items:center;}
#lnbWrap .lnb_nav > li {position:relative; padding:0 2.5em; transition:.5s all; -webkit-transition:.5s all;}
#lnbWrap .lnb_nav > li > a {display:block; position:relative; color:#111; height:4.5em; line-height:4.5em;}
#lnbWrap .lnb_nav > li > a span {position:relative; font-size:.9em; font-weight:700;}
#lnbWrap .lnb_nav > li.active > a span,
#lnbWrap .lnb_nav > li > a:hover span {color:#3371ff!important; font-weight:800;}
#lnbWrap .lnb_nav:hover > li {padding:0 3em;}

#lnbWrap .lnb_nav > li#lnb_02 {padding-right:2.8em;}
#lnbWrap .lnb_nav > li#lnb_02 > a:before {content:''; display:block; width:.7em; height:.7em; position:absolute; right:-1.3em; top:50%; margin-top:-.3em; background:url(../img/common/ico-dropdown.svg) no-repeat 0 0; background-size: .7em auto;}

#lnbWrap .lnb_nav .depth02 {display:none; position:absolute; top:4.5em; left:-.8em; min-width:10.85em; padding:.65em .8em; text-align:left; box-sizing:border-box; border-radius:.5em; background:#fff; z-index:1; transition:.3s all; -webkit-transition:.3s all; box-shadow:0 0 20px rgba(0, 0, 0, .1); overflow:visible; }
#lnbWrap .lnb_nav .depth02 li + li {border-top:1px solid #F2F2F2;}
#lnbWrap .lnb_nav .depth02 li a {display:block; position:relative; padding:.95em .95em .95em 3em; font-size:.8em; color:#333; border-radius:.5em;}
#lnbWrap .lnb_nav .depth02 li:hover a {background:#EAEBFC; font-weight:800; color:#2D27DE;}
#lnbWrap .lnb_nav .depth02 li a:before {content:''; display:block; width:1.563em; height:1.563em; position:absolute; left:.5em; top:50%; margin-top:-.85em; background:url(../img/common/ico-dropdown01.svg) no-repeat 0 0; background-size:contain !important; overflow:hidden; transition:.3s all; -webkit-transition:.3s all;}
#lnbWrap .lnb_nav .depth02 #lnb_0202 a:before {background:url(../img/common/ico-dropdown02.svg) no-repeat 0 0;}
#lnbWrap .lnb_nav .depth02 #lnb_0203 a:before {background:url(../img/common/ico-dropdown03.svg) no-repeat 0 0;}
#lnbWrap .lnb_nav .depth02 #lnb_0204 a:before {background:url(../img/common/ico-dropdown04.svg) no-repeat 0 0;}
#lnbWrap .lnb_nav .depth02 #lnb_0205 a:before {background:url(../img/common/ico-dropdown05.svg) no-repeat 0 0;}
#lnbWrap .lnb_nav .depth02 #lnb_0206 a:before {background:url(../img/common/ico-dropdown06.svg) no-repeat 0 0;}
#lnbWrap .lnb_nav .depth02 #lnb_0207 a:before {background:url(../img/common/ico-dropdown07.svg) no-repeat 0 0;}
#lnbWrap .lnb_nav .depth02 #lnb_0208 a:before {background:url(../img/common/ico-dropdown08.svg) no-repeat 0 0;}
#lnbWrap .lnb_nav .depth02 #lnb_0209 a:before {background:url(../img/common/ico-dropdown09.svg) no-repeat 0 0;}
#lnbWrap .lnb_nav .depth02 #lnb_0201:hover a:before {background:url(../img/common/ico-dropdown01-on.svg) no-repeat 0 0;}
#lnbWrap .lnb_nav .depth02 #lnb_0202:hover a:before {background:url(../img/common/ico-dropdown02-on.svg) no-repeat 0 0;}
#lnbWrap .lnb_nav .depth02 #lnb_0203:hover a:before {background:url(../img/common/ico-dropdown03-on.svg) no-repeat 0 0;}
#lnbWrap .lnb_nav .depth02 #lnb_0204:hover a:before {background:url(../img/common/ico-dropdown04-on.svg) no-repeat 0 0;}
#lnbWrap .lnb_nav .depth02 #lnb_0205:hover a:before {background:url(../img/common/ico-dropdown05-on.svg) no-repeat 0 0;}
#lnbWrap .lnb_nav .depth02 #lnb_0206:hover a:before {background:url(../img/common/ico-dropdown06-on.svg) no-repeat 0 0;}
#lnbWrap .lnb_nav .depth02 #lnb_0207:hover a:before {background:url(../img/common/ico-dropdown07-on.svg) no-repeat 0 0;}
#lnbWrap .lnb_nav .depth02 #lnb_0208:hover a:before {background:url(../img/common/ico-dropdown08-on.svg) no-repeat 0 0;}
#lnbWrap .lnb_nav .depth02 #lnb_0209:hover a:before {background:url(../img/common/ico-dropdown09-on.svg) no-repeat 0 0;}

#lnbWrap .lnb_nav > li:hover .depth02 {display:block;}

/* Event */
/* #lnb_02 > a:before {content:""; display:block; position:absolute; left:0; right:0; bottom:100%; margin-bottom:.1em; height:1.3em; background:url(../img/common/img_event.svg) no-repeat 50% 50%;}*/

#openMenu {display:none; position:absolute; top:50%; right:0; margin-top:-.75em; z-index:5; width:1.5em; height:1.5em; background:url(../img/common/btn_mobile_menu.svg) no-repeat 50% 50%; background-size:contain;}

#spotWrap {max-width:1520px; margin:0 auto; text-align:right; position:relative; z-index:9;}
#spotWrap .spot_list {position:absolute; right:0; top:1em; }
#spotWrap .spot_list li {display:inline-block; position:relative; vertical-align:middle; padding:0 1.5em;}
#spotWrap .spot_list li + li:before {content:""; display:block; position:absolute; width:1.2em; height:1.2em; left:-0.75em; background:url(../img/common/ico_arrow.svg) no-repeat center;  overflow:hidden;}
#spotWrap .spot_list li:last-child {padding-right:0;}
#spotWrap .spot_list li:first-child > * {font-size:1em; width:1.2em; height:1.2em; background:url(../img/common/ico_home.svg) no-repeat center; text-indent:-999px; overflow:hidden; text-align:left;}
#spotWrap .spot_list li > * {display:block; position:relative; color:#888; font-size:.8em; font-weight:600;}
#spotWrap .spot_list li > *:hover {color:#111!important; font-weight:800;}

@media all and (max-width:1400px) {
	#lnbWrap {margin:0 9.5em 0 5em;}
	#lnbWrap .lnb_nav > li {padding:0 1.5em;}
	#lnbWrap .lnb_nav:hover > li {padding:0 2em;}
	#spotWrap .spot_list {padding:0 2.5em;}
	#headerWrap .gnb_option a {font-size:.8em; background:#fff;}
}
@media (max-width: 1024px) {
	.mainTopBanner {z-index:9999;}
	.mainTopBanner._visible ~ #wrap {padding-top:6em;}
	#headerWrap .gnb_option {right:2.5em;}
	#headerWrap .gnb_option a span {font-size:.85em;}
	#headerWrap .inner {height:3.5em;}
	#headerWrap .inner:before {content:""; display:block; position:absolute; top:0; left:-1em; right:-1em; bottom:0; z-index:1;}
	
	#spotWrap .spot_list li {padding:0 1em;}
	#openMenu {display:block;}
	
	#lnbWrap {position:absolute; top:100%; left:0; right:0; margin:0 -1.5em; z-index:0; padding:1em; background:#111; visibility:hidden; transform:translateY(-100%); -webkit-transform:translateY(-100%); transition:.3s all; -webkit-transition:.3s all;}
	#lnbWrap .lnb_nav {justify-content:space-between; height:3em;}
	#lnbWrap .lnb_nav > li {margin-left:0 !important; width:33.33%; padding:0;}
	#lnbWrap .lnb_nav > li > a {text-align:center; color:#fff;}
	#lnbWrap .lnb_nav > li a span {font-size:.9em;}
	#lnbWrap .lnb_nav:hover li  {padding:0; }
	#lnbWrap .lnb_nav > li#lnb_02 {padding-right:0;}
	
	.open-totalMenu #lnbWrap {visibility:visible; transform:translateY(0%); -webkit-transform:translateY(0%);}
}

@media all and (max-width:640px) {
	#headerWrap {padding:0 1.5em;}
	#spotWrap .spot_list {padding:0 1.5em;}
	#headerWrap .gnb_option a {font-size:.7em;}
}

/* -----------------------------------------------
	Footer
   ----------------------------------------------- */

footer {display:block; position:relative; background:#111111; color:#fff; padding:2em; margin-top:6em;}
footer .inner {max-width:1520px;}
footer .logo {display:block; position:relative; margin:0 0 1.1em; width:4em; height:2em; background:url(../img/common/f_logo.svg) no-repeat 50% 50%; background-size:contain;}

footer .link ul {display:block; position:relative; overflow:hidden; margin:0 -1em;}
footer .link li {display:block; position:relative; float:left; padding:0 1em;}
footer .link li a {display:block; position:relative; font-size:.8em; color:#fff; text-align:center;}
footer .link li a.b {font-weight:800;}

footer .con {display:block; position:relative;}
footer .con > * {font-size:.8em; line-height:1.3em;}
footer .con > * + * {margin-top:.625em;}
footer .con li {display:inline-block; vertical-align:middle; margin-right:2.5em; color:#E7E7E7;}
footer .con li strong {font-weight:800; margin-right:1em;}

footer .bottom {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:center; margin-top:2em; padding-top:1.25em; border-top:1px solid rgba(255,255,255,0.2);}
footer .bottom > p {font-size:.8em;color:#CFCFCF;letter-spacing: .03em;}

@media all and (max-width:1024px) {
	
	footer .logo {margin:0em auto 1.5em;}
	footer .link {position:relative; padding:1em 0;}
	footer .link ul {text-align:center;}
	footer .link li {display:inline-block; float:none; vertical-align:middle; padding:.5em 1em;}
	footer .con {text-align:center; line-height:1.5;}
	footer .con li {padding:.5em 1em; margin:0;}
	footer .bottom {text-align:center; flex-direction:column;}
}

@media all and (max-width:570px) {
	footer .link li {display:block; padding:.5em;}
	footer .link li + li:before {display:none;}
}

.wrapQuick {display:block; position:absolute; top:-2em; right:2em; z-index:99;}
.wrapQuick > * {display:block; position:relative; width:4em; height:4em; border-radius:100%; text-indent:-999px; overflow:hidden; background:no-repeat 50% 50%; background-size:2em auto;}
.wrapQuick .btn_scroll_top {display:block !important; opacity:1 !important; background-image:url(../img/common/btn_site_top.svg); background-color:#111; border:3px solid #fff;}
.wrapQuick .btn_scroll_top:hover {background-color:#333;}