@charset "utf-8";

/* 클릭시 점선제거 */
a { selector-dummy : expression(this.hideFocus=true); outline:0; text-decoration: none; }
a:hover,
a:active,
a:focus {text-decoration: none}

/* Common */
body{background-attachment:fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
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;-webkit-text-size-adjust: none}
body, html {width: 100%;height: 100%;}
body, h1, h2, h3, h4, h5, h6, textarea, button, select, a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var, li { font-family: 'NanumSquareNeo', Apple SD Gothic Neo, Malgun Gothic, sans-serif; -webkit-font-smoothing:antialiased; }
img, fieldset, button {border: 0}
table, td, th, tr { padding:0; border-collapse:collapse;}
ul, ol {list-style: none}
em, address {font-style: normal}
.blind {overflow: hidden;position: absolute;top: 0;left: 0;width: 1px;height: 1px;font-size: 0;line-height: 0}
.edg {position: absolute;top: 12px;right: 4px;width: 0;height: 0;border-width: 0 8px 8px;border-style: solid;border-color: transparent transparent #333}
.clear {clear: both}

/* Site Layout - Body Wrap */
#bodyWrap { padding-top:0px; line-height:normal; }

#top_img .top_banner { position:absolute; list-style:none; z-index:3; }

/* Site Layout - Content Body */
#contentBody { position:relative; padding:0px 0px 5px 0px; *zoom:1; }
#contentBody:after{ content:""; display:block; clear:both;}

/* 세로메인메뉴  ---------------------------------------------------------------------------*/
#fix { top:0;right:0;left:0; display:flex; -webkit-justify-content:center; z-index:999; }
#fix ul { margin:0; padding:0; list-style:none; float:left; }
#fix li { position:relative; display:block; float:left; margin:0; padding:0; z-index:999; }
#fix li.last { background:none; }
#fix li:hover>ul { left: 0px; }
#fix a { position: relative; display:block; float:left; z-index:99; height:35px; line-height:35px; padding:20px 25px 0; *zoom:1; text-decoration:none; font:bold 10pt 나눔고딕, NanumGothic, Trebuchet MS, 돋움, Dotum, Lucida Sans, 굴림, Gulim, tahoma, Arial; }
/* 세로메인메뉴 hover, select */
#fix li a:hover, 
#fix li a:focus { background:url(../img/lava.png) no-repeat center 0px; _background:transparent; }
#fix li.current a { text-decoration: none; font-weight:bold; }
/* 세로서브메뉴::화살표 */
#fix ul ul span { margin:0; display:block; cursor:pointer; background-repeat:no-repeat; }
/* 세로서브메뉴::공통 */
#fix ul ul { position:absolute; top:50px; left:-999em; padding:0; margin-left:20px; } /* 서브메뉴 높이, 위치 */
#fix ul ul li { width:180px; _clear:both;}
#fix ul ul a { display:block; float:none; padding:4px 0 4px 20px; height:25px; line-height:25px; font-size:9pt; font-weight:bold; margin-bottom:-1px;}
#fix ul ul a:hover { font-weight:bold; } 
/* 세로3차,4차서브메뉴::level3 */
#fix ul ul ul { padding:0; margin:-43px 0 0 180px; }
/* 세로 lava lamp */
#fix li.back { background: url(../img/lava_u.png) no-repeat center -40px !important; _background: url(../img/lava_u.gif) no-repeat center -40px !important; z-index:2; position:absolute; margin:2px 0 0 -1px; }
#fix li.back .left { background: url(../img/lava_u.png) no-repeat center !important; _background: url(../img/lava_u.gif) no-repeat center !important; height:63px; margin-right: 0px; }
#fix .gnbh:focus { background:url(../img/lava_u.png) no-repeat center top; color:#f00; }
/* 세로 공통 컬러셋 */
#fix li a:hover { color:#fff; } 
#fix li.current a { color:#fff; } /* 메인메뉴 Text hover, select */
#fix a { color:#fff; } /* 메인메뉴 컬러 */
#fix li.sub a { background:#333; border-top:1px solid #252525; border-bottom:1px solid #444; } /* 서브메뉴 배경, 컬러 */
#fix li.sub a:hover { background:#222 url(../img/second_sub_bg.gif) no-repeat left -25px; text-indent:10px; border:1px solid #000; color:#fff; } /* 서브메뉴 배경, 컬러 hover */
#fix ul ul a.parent span { background-position:95% 50%; background-image: url(../img/item-pointer.gif); }/* 서브메뉴::화살표 */
#fix ul ul a.parent:hover span { background-image: url(../img/item-pointer-mover.gif); }

/* Login */
 .side > ul > li { float: right; position: relative}
 .side > ul:after { display: block; clear: both; content: ''}
 .side > ul > li > a { display: block; width: 22px; height: 22px; margin-left: 12px; font-size: 22px; line-height: 22px; color: #888; text-align: center}
 .side > ul > li > a:hover,  .side > ul > li > a:focus,  .side > ul > li > a:active,  .side > ul > li.on > a { color: #444; }
 .side > ul .ly { position: relative; position: absolute; top: 100%; right: 0; margin-top: 13px; background-color: #f9f9f9; z-index:999;}
 .side > ul .ly.ly_login { overflow: hidden; margin-top: 0; background: url('../img/blank.gif') 0 0 repeat; height: 0;}
 .side > ul .ly.ly_login ul { position: relative; margin-top: 18px; padding: 8px 0; background-color: #333; }
 .side > ul .on .ly.ly_login { height: auto}
 .side > ul .ly li { display: block; min-width: 180px; height: 30px; padding: 0 20px; line-height: 40px; font-size: 11px; color: #ffffff}
 .side > ul .ly a { display: block; min-width: 180px; height: 30px; padding: 0 0px; line-height: 40px; font-size: 13px; color: #9d9d9d}
 .side > ul .ly a:hover { color: #cda25a; text-decoration: none}
 .side > ul > li .login_after { overflow: hidden; width: 40px; height: 40px; margin-top: -9px; border-radius: 100%}
 .side > ul > li .login_after img { width: 40px; height: 40px}
 .side > ul > li .login_after ~ .ly_login .edg { right: 11px}

/* Login Layer SocialXe */
.snsLogin{ margin:10px 0; padding-top:0px; border-top:0px solid #0033ff; text-align:center; }
.snsLogin a{ display:inline-block; overflow:hidden;width:197px; height:43px; margin:3px; }
.snsLogin .facebook{ background-image:url(../img/facebook.png);*display:inline;*zoom:1; }
.snsLogin .twitter{ background-image:url(../img/twitter.png);*display:inline;*zoom:1; }
.snsLogin .google{ background-image:url(../img/google.png);*display:inline;*zoom:1; }
.snsLogin .naver{ background-image:url(../img/naver.png);*display:inline;*zoom:1; }
.snsLogin .kakao{ background-image:url(../img/kakao.png);*display:inline;*zoom:1; }
.blind{ overflow:hidden; position:absolute; top:0; left:0; width:0; height:0; font-size:0; line-height:0; }

/* 중앙 메뉴 컬러*/
.caption { position:relative; margin:40px auto; -webkit-justify-content:center; color:#fff; font-size: 30px; text-align: center; letter-spacing: 0.2em; text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);}

.bl-left { position:relative; float:left; width:49%; height:200px; display: flex; justify-content: center; align-items: center; border:0px solid #f60}
.bl-right { position:relative; float:right; width:49%; height:200px; display: flex; justify-content: center; align-items: center; border:0px solid #f60}

.bl2-left { position:relative; float:left; width:49%; height:300px; display: flex; justify-content: center; align-items: center; border:0px solid #f60}
.bl2-right { position:relative; float:right; width:49%; height:300px; display: flex; justify-content: center; align-items: center; border:0px solid #f60}

.bluelight { position: relative; display: table; width: 150px; height: 150px; }

.bluelight a { font-family:Broadway; display: table-cell; vertical-align: middle;text-align: center; font-size: 40px; text-decoration: none; border-radius: 50%; transition: background 1s, border-width 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), text-shadow 0.5s; color: #daf6ff; text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0); box-shadow: 0 0 0 rgba(10, 175, 230, 0), inset 0 0 0 rgba(10, 175, 230, 0); background-image: radial-gradient(ellipse cover at center, rgba(10, 175, 230, 0) 0%, rgba(10, 175, 230, 0) 90%); border: 0 dotted rgba(10, 175, 230, 0);}

.bluelight a:hover { color: #fff; text-shadow: 0 0 50px #0aafe6, 0 0 50px #0aafe6; background-image: radial-gradient(ellipse cover at center, rgba(10, 175, 230, 0.3) 0%, rgba(10, 175, 230, 0) 60%);}

.bluelight:before,
.bluelight:after,
.bluelight a:before,
.bluelight a:after { transition: 0.2s ease-in-out; content: ""; display: block; position: absolute; border-radius: 50%; border: 60px dashed transparent; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.bluelight:before { animation: rotate 20s linear 0s infinite; width: 180%; height: 180%; border: 3px dotted rgba(10, 175, 230, 0); z-index: -1;}
.bluelight:after { animation: rotate 10s linear 0s infinite reverse; border: 80px dashed rgba(10, 175, 230, 0); width: 160%; height: 160%; z-index: -2;}

.bluelight a:before { animation: rotate 5s ease-in-out 0s infinite alternate; width: 120%; height: 120%; border: 50px dashed rgba(10, 175, 230, 0);}
.bluelight a:after { animation: rotate 5s linear 0s infinite; border: 18px dashed rgba(10, 175, 230, 0); width: 120%; height: 120%;}

.bluelight:hover:before { border-color: rgba(10, 175, 230, 0.3);}
.bluelight:hover:after { border-color: rgba(10, 175, 230, 0.1);}
.bluelight:hover a:before { border-color: rgba(10, 175, 230, 0.3);}
.bluelight:hover a:after { border-color: rgba(10, 175, 230, 0.3);}

.overlay{position: fixed;top:0;right:0;bottom:0;left: 0;z-index: -1;box-shadow:inset 0 0 50px rgba(0,0,0,.5)}

/* Mobile */
@media all and (max-width: 479px) {

	body, html {min-width: 100%;}
	.bluelight a { font-size: 80px; }

	#contentBody { width: 100%; }
	#bodyWrap {min-width: 100%}
	#fix {min-width: 100%}
	#content {min-width: 100%; margin:0; padding:0 }
	
	#supersized,
	#alwayStalker,
	.alwayStalker,
	#top_img,
	.side,
	.ad,
	.custom_area { display:none; }

}

@media (min-width: 479px) {
	@-webkit-keyframes f-animate {
		from {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0)}
		to {opacity: 1;-webkit-transform: none;transform: none}
	}
	
	@keyframes f-animate {
		from {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0)}
		to {opacity: 1;-webkit-transform: none;transform: none}
	}
	
	@-webkit-keyframes f-animate2 {
		from {opacity: 0;-webkit-transform: translate3d(0, -10%, 0);transform: translate3d(0, -10%, 0)}
		to {opacity: 1;-webkit-transform: none;transform: none}
	}
	
	@keyframes f-animate2 {
		from {opacity: 0;-webkit-transform: translate3d(0, -10%, 0);transform: translate3d(0, -10%, 0)}
		to {opacity: 1;-webkit-transform: none;transform: none}
	}

	@-webkit-keyframes f-animate3 {
		from {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0)}
		to {opacity: 1;-webkit-transform: none;transform: none}
	}
	
	@keyframes f-animate3 {
		from {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0)}
		to {opacity: 1;-webkit-transform: none;transform: none}
	}
}

@keyframes rotate {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}