@charset "utf-8";
/* base css */
/*
	User: PuLeun Kim
*/

html, body { font-family: 'Noto Sans KR', sans-serif; }

.clear 		{ clear: both; }
.f_left 	{ float: left; }
.f_right 	{ float: right; }

.overlay 		{ position: fixed; z-index: 9999; opacity: 0; visibility: hidden; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 0.4s; }
.overlay 		{ position: fixed; z-index: 9999; opacity: 1; visibility: visible; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 0.4s; }
.overlay:target { opacity: 1; visibility: visible; }
.overlay_contents 		{ width: 600px; margin: 0 auto; margin-top: 300px; text-align: center; }
.overlay_contents_left 	{ width: 600px; margin: 0 auto; margin-top: 20px; margin-left: 50px; text-align: center; border-radius: 10px; background: rgba(255, 255, 255, 1);} 뉴스팝업
.overlay_contents_wide 	{ width: 1100px; margin: 0 auto; margin-top: 300px; text-align: center; }
.overlay_contents_wide2 { width: 800px; margin: 0 auto; margin-top: 200px; text-align: center; }

.overlay p { color: #fff; font-size: 2em; font-weight: bold; }

#notice_popup .overlay .popup_title { padding: 8px 0; background:#025ab4; }
#notice_popup .overlay .popup_title h2 { margin-bottom: 0px; font-size: 20px; color:#fff; }
#notice_popup .overlay .notice-text { padding: 8px 0; font-size: 18px; line-height:26px; }
#notice_popup .overlay .notice-text .notice-point { padding:16px; text-align:left; background:#f4f4f4; border-radius:8px; }
#notice_popup .overlay .notice-image { padding: 4px 0; }
#notice_popup .overlay .notice-image img { width: 100%; }

@media screen and (max-width: 600px){
	.overlay_contents_left { width: 98%; margin-top: 1%; margin-left: 1%; }
}

.con_left { float: left; }
.con_right { float: right; }
.con_center { position: relative; width: 1150px; margin: 0 auto; }

.con_wrap { position: relative; width: 880px; margin-bottom: 15px; padding: 20px 30px; background: #fff; border: 1px solid #e2e2ec; border-radius: 10px; box-shadow: 3px 3px #e5e9ee; }
.half_wrap { width: 49%; margin: 0 auto; }

.cur_po 	{ cursor: pointer!important; }
.cur_def 	{ cursor: default!important; }

.hidden { display: none; }
.mobile_only { display: none; }
.mobile_hidden { }

@media screen and (max-width: 424px){
	.mobile_only { display: block; }
	.mobile_hidden { display: none; }
}

/********************/
/* width, height    */
/********************/
.w65 { min-width: 65px!important; }
.w78 { min-width: 78px!important; }
.w50p { width: 50%!important; }
.w60p { width: 60%!important; }
.w62p { width: 62.6%!important; }
.w75p { width: 75%!important; }
.w84p { width: 84.6%!important; }
.w97p { width: 97.6%!important; }
.w98p { width: 98.2%!important; }
.w100p { width: 100%!important; }

/********************/
/* margin, padding  */
/********************/
.ma_0		{ margin: 0!important; }
.ma_15		{ margin: 15px 0!important; }
.matop_4	{ margin-top: 4px!important; }
.matop_8	{ margin-top: 8px!important; }
.matop_15	{ margin-top: 15px!important; }
.matop_30	{ margin-top: 30px!important; }
.matop_50	{ margin-top: 50px!important; }
.matop_80	{ margin-top: 80px!important; }
.matop_100	{ margin-top: 100px!important; }
.matop_120	{ margin-top: 120px!important; }
.matop_160	{ margin-top: 160px!important; }
.matop_180	{ margin-top: 180px!important; }
.mabot_15	{ margin-bottom: 15px!important; }
.mabot_30	{ margin-bottom: 30px!important; }
.mabot_50	{ margin-bottom: 50px!important; }
.mabot_100	{ margin-bottom: 100px!important; }
.malef_8	{ margin-left: 8px!important; }
.malef_12	{ margin-left: 12px!important; }

.pa_12		{ padding: 12px!important; }
.pa_28		{ padding: 28px!important; }			/* 정보 영역 높이 추가 */
.patop_4	{ padding-top: 4px!important; }
.patop_8	{ padding-top: 8px!important; }
.patop_10	{ padding-top: 10px!important; }
.patop_20	{ padding-top: 20px!important; }

/********************/
/* border           */
/********************/
.botom_line 	{ border-bottom: 1px solid #dbe2e7!important; }
.no_l_line 		{ border-left: 0!important; }
.no_r_line 		{ border-right: 0!important; }
.no_both_line 	{ border-left: 0!important; border-right: 0!important; }

/********************/
/* list             */
/********************/
.line_list li { display: inline-block; }
.line_blank { padding: 0 6px; color: #fff; }

/********************/
/* text             */
/********************/
h2 { color: #444; font-size: 1.5em; font-weight: bold; line-height: 1.3; margin-bottom: 15px; }
h3 { color: #444; font-size: 1.2em; font-weight: bold; margin-bottom: 15px; }
h4 { color: #666; font-size: 1em; font-weight: bold; margin: 8px 0px 8px; }
.text_left 		{ text-align: left!important; padding-left: 6px; }
.text_right 	{ text-align: right!important; padding-right: 6px; }
.text_center 	{ text-align: center!important; }
.text-upper { text-transform: uppercase; }
.text_b 	{ font-weight: bold; }
.txt_preRq 	{ color: #E4022E; font-size: 0.9em; }
.text_point { color: #E4022E; margin-right: 2px; }
.text_white { color: #ffffff!important; }
.text_shadow { text-shadow: 0px 0px 2px rgb(0 0 0), 0px 0px 5px rgb(0 0 0); }
.underline_trans 	{ background: linear-gradient(180deg, transparent 100%, #ffffff 0); background-repeat: no-repeat; }
.underline_red 		{ background: linear-gradient(180deg, transparent 75%, #f47689 0); background-repeat: no-repeat; }
.underline_yellow 	{ background: linear-gradient(180deg, transparent 75%, #fef118 0); background-repeat: no-repeat; }
.underline_white 	{ background: linear-gradient(180deg, transparent 95%, #ffffff 0); background-repeat: no-repeat; }
.underline--half 	{ background-size: 50% 100%; }
.underline--animated { background-size: 0% 100%; transition: background-size 0.5s; }
.underline--animated:hover { background-size: 100% 100%; }
.overflow 		{ display: flex; flex: 1; }
.overflow_box 	{ flex: 1; width: 1px; }
.overflow_text 	{ overflow: hidden; text-overflow: ellipsis; word-break: break-all; white-space: nowrap; }

/********************/
/* size			    */
/********************/
.width_half { width: 49%!important; margin: 0 auto; }
.width_third { width: 33%!important; margin: 0 auto; }

/********************/
/* input, select    */
/********************/
input 	{ width: 96%; height: 24px; }
select 	{ width: 96%; height: 24px; }
input, select, textarea { margin: 0 auto; padding: 0; padding-left: 4px; color: #666; font-size: 1em; vertical-align: middle; background: #fff; border: 1px solid #dbe2e7; outline: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
input[type=radio], input[type=checkbox] { width: 16px; margin: 0px 4px; }
textarea { width: 96.7%; resize: none; }

@media screen and (max-width: 768px){
	textarea { width: 97.2%; }
}
@media screen and (max-width: 600px){
	textarea { width: 97.7%; }
}

input:focus, select:focus, textarea:focus { background: #fff; }
input:active, select:active, textarea:active { background: #fff; }
/* input:disabled, select:disabled, textarea:disabled { background: #fafafc; } */

input.info, select.info, textarea.info { border: 1px solid #fff; }
input.file { display: inline-block; outline: none; width: -webkit-calc(96% - 9em); width: -moz-calc(96% - 9em); width: -ms-calc(96% - 9em); width: -o-calc(96% - 9em); width: calc(96% - 9em); }
input.calendar { width: 38%; max-width: 120px; background: url(../images/icon/icon_cal.gif) no-repeat 100% 2px #fff; }
input.calendar.info { width: 74px; background: none; }
input.width_half { width: 48.5%!important; margin: 0 auto; }
input.width_third { width: 29.5%!important; margin: 0 auto; }
select.width_half { width: 48.5%!important; margin: 0 auto; }
select.width_third { width: 29.5%!important; margin: 0 auto; }

input.withCheckbox { width: -webkit-calc(96% - 4em); width: -moz-calc(96% - 4em); width: -ms-calc(96% - 4em); width: -o-calc(96% - 4em); width: calc(96% - 4em); }
input.withResetButton { width: -webkit-calc(96% - 3.7em); width: -moz-calc(96% - 3.7em); width: -ms-calc(96% - 3.7em); width: -o-calc(96% - 3.7em); width: calc(96% - 3.7em); }
input.withSearchButton { width: -webkit-calc(96% - 4.4em); width: -moz-calc(96% - 4.4em); width: -ms-calc(96% - 4.4em); width: -o-calc(96% - 4.4em); width: calc(96% - 4.4em); }

@media screen and (max-width: 440px){
	input.calendar { min-width: 76px; margin: 2px 0; background: none; }
}

/********************/
/* button           */
/********************/
/* button area */
.box_btn 	{ margin: 0 auto; padding: 10px 0; }
.table_btn 	{ margin: 0 auto; padding: 10px 0 0; }
.bottom_btn { position: relative; margin-top: 30px; text-align: right; }
.paging_btn { position: absolute; top: -4px; right: 0px; }

/* button */
.btn { display: inline-block; padding: 0 0; text-align: center; border: none; border-radius: 0; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -ms-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; }
.btn_border { color: #fff; background: transparent; border: 1px solid #dbe2e7; }
.btn_white 	{ color: #222; background: #ffffff; border: 1px solid #dbe2e7; }
.btn_white2 { color: #222; background: #ffffff; border: 1px solid #dbe2e7; }
.btn_yellow { color: #fff; background: #fca61d; border: 1px solid rgba(0,0,0,0); }
.btn_orange { color: #fff; background: #f04d22; border: 1px solid rgba(0,0,0,0); }
.btn_red 	{ color: #fff; background: #ee1b3b; border: 1px solid rgba(0,0,0,0); }
.btn_blue 	{ color: #fff; background: #035dab; border: 1px solid rgba(0,0,0,0); }
.btn_green 	{ color: #fff; background: #2b994c; border: 1px solid rgba(0,0,0,0); }
.btn_purple { color: #fff; background: #7463F5; border: 1px solid rgba(0,0,0,0); }
.btn_navy 	{ color: #fff; background: #2a3557; border: 1px solid rgba(0,0,0,0); }
.btn_gray 	{ color: #444; background: #dddddd; border: 1px solid rgba(0,0,0,0); }
.btn_border:hover 	{ color: #fff; background: #ee1b3b; border: 1px solid rgba(0,0,0,0); }
.btn_white:hover 	{ color: #fff; background: #ee1b3b; border: 1px solid rgba(0,0,0,0); }
.btn_white2:hover 	{ color: #fff; background: #035dab; border: 1px solid rgba(0,0,0,0); }
.btn_yellow:hover 	{ color: #fff; background: #f04d22; }
.btn_orange:hover 	{ color: #fff; background: #da360b; }
.btn_red:hover 		{ color: #fff; background: #d40f2d; }
.btn_blue:hover 	{ color: #fff; background: #00396a; }
.btn_purple:hover 	{ color: #fff; background: #5943f3; }
.btn_navy:hover 	{ color: #fff; background: #1d2641; }
.btn_gray:hover 	{ color: #fff; background: #505050; }

.btn_login 		{ width: 208px; font-size: 1.08em; font-weight: normal; line-height: 40px; }
.btn_big 		{ padding: 0px 40px; font-size: 1.08em; font-weight: normal; line-height: 50px; letter-spacing: .05em; }
.btn_medium 	{ padding: 0px 26px; font-size: 1em; font-weight: normal; line-height: 36px; }
.btn_small 		{ padding: 0px 16px; font-size: 1em; font-weight: normal; line-height: 26px; }
.btn_small_fix 	{ width: 90px; font-size: 0.9em; font-weight: normal; line-height: 24px; }
.btn_mini 		{ padding: 0px 6px; font-size: 0.9em; font-weight: normal; line-height: 24px; }
.btn_withSearch { padding: 0px 6px; font-size: 0.9em; font-weight: normal; line-height: 24px; }

@media screen and (max-width: 1024px){
	.btn_big { padding: 0px 35px; font-size: 1em; line-height: 45px; }
	.btn_medium { padding: 0px 22px; font-size: 1.1em; }
}
@media screen and (max-width: 600px){
	.btn_big { font-size: 1.2em; }
}

/********************/
/* color            */
/********************/
.gra_blue 	{ background: linear-gradient(to right,#459ecf,#4d99ce); }
.gra_green 	{ background: linear-gradient(to right,#0ba494,#099b9d); }
.gra_purple { background: linear-gradient(to right,#5762aa,#6b60a0); }

/********************/
/* youtube          */
/********************/
.video-wrap { position: relative; margin: 10px 0; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-wrap iframe,
.video-wrap object,
.video-wrap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/********************/
/* go top           */
/********************/
.gotop { position: absolute; top: 0; left: 0; z-index: 9999; width: 5px; height: 30px; }
.gotop a.top { position: fixed; display: none; opacity: 0.8; right: 20px; bottom: 30px; }
.gotop a.top:hover { opacity: 1; }

/********************/
/* header           */
/********************/
#main_header { position: fixed; top: 0; z-index: 9999; width: 100%; background: transparent; transition: all .3s; }
.header_area { position: relative; z-index: 9999; overflow: hidden; height: 80px; }
.header_wrap { position: relative; height: 80px; padding: 0; }
.header_wrap .contants_wrap { position: relative; width: 100%; max-width: 1170px; height: 100%; margin: 0 auto; padding: 0; }

/* logo */
.contants { position: relative; width: 100%; height: 100%; padding: 0; }
.contants .logo { float: left; z-index: 9; margin-top: 18px; }
.contants .logo, .contants .logo img { width: auto; max-height: 44px; }
.contants .logo #logo1 { display: none; }
.contants .logo #logo2 { display: inline-block; }

/* menu */
.menu_close { display: none; width: 0; height: 0; }
.menu_wrap { position: relative; display: block; opacity: 1; }

/* menu - top */
.menu_wrap .topmenu { position: absolute; top: 4px; right: 0px; z-index: 99; width: 60%; text-align: right; }
.menu_wrap .topmenu .menu li { display: inline-block; }
.menu_wrap .topmenu .menu li a { color: #fff; font-size: 0.8em; }
.menu_wrap .topmenu .menu li p { color: #fff; font-size: 0.8em; }

/* menu - gnb */
.gnb { display: table; float: right; width: 60%; }
.gnb .menu { display: table-cell; position: relative; width: 20%; padding: 0; text-align: center; vertical-align: middle; }
.gnb .menu .category { display: inline-block; position: relative; height: 80px; line-height: 80px; color: #fff; font-size: 1.2em; font-weight: normal; text-align: center; cursor: default; }
.gnb .menu:first-child .lnb { border-left: 1px solid #eee; }
.gnb .menu .lnb { position: relative; display: block; width: 100%; height: 200px; padding: 20px 0; border-right: 1px solid #eee; }
.gnb .menu .lnb li { line-height: 1.8em; margin-bottom: 6px; }
.gnb .menu .lnb li a { color: #666; font-size: 1em; }
.gnb .menu .lnb li a:hover { color: #ee1b3b; }

/* menu - gnb - active */
.header_area.active { background: #fff!important; border-bottom: 1px solid #eee; }
.header_area.active .header_wrap { background: #fff; border-bottom: 1px solid #eee; }
.header_area.active .topmenu .menu li a { color: #666; }
.header_area.active .topmenu .menu li p { color: #666; }
.header_area.active .gnb .menu a.category { color: #666; }

/* menu - gnb - scroll */
.header_scroll { background: #fff!important; border-bottom: 1px solid #eee; }
#main_header.header_scroll .topmenu .menu li a { color: #666; }
#main_header.header_scroll .topmenu .menu li p { color: #666; }
#main_header.header_scroll .gnb .menu a.category { color: #666; }

/* mobile - hamburger */
.contants .hamburger { display: none; }

@media screen and (max-width: 1200px) {
	#main_header, .header_area, .header_wrap { height: 60px; overflow: visible; }
	
	/* logo */
	.contants .logo { margin-top: 10px; margin-left: 10px; }
    .contants .logo a, .contants .logo img, .header_scroll .logo img { max-height: 40px; }
    
    /* menu */
    .menu_close { position: absolute; z-index: 9999; top: 20px; right: 15px; display: inline-block; width: 40px; height: 40px; }
    .menu_wrap { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999; display: none; width: 100%; height: 100%; background: rgba(0,0,0,.5); }
	
	/* menu - top */
	.menu_wrap .topmenu { top: 24px; right: 0px; max-width: 100px; text-align: left; }
	.menu_wrap .topmenu .menu li a { color: #222; font-size: 1.8em; }
	.menu_wrap .topmenu .menu li p { display: none; }
	
	/* menu - gnb */
	.gnb { position: absolute; top: 0; right:-300px; bottom: 0; display: block; overflow: hidden; overflow-y: auto; width: 60%; max-width: 260px; height: 100%; padding: 80px 15px 15px 15px; background: #fff; }
	.gnb .menu:first-child { border-top: 1px solid #eee }	
	.gnb .menu { display: block; width: 100%; padding: 0; border-bottom: 1px solid #eee; }
	.gnb .menu .category { width: 100%; height: 50px; line-height: 50px; padding: 0 20px; color: #222; font-size: 1em; text-align: center; }
	.gnb .menu .lnb { position: relative; top: auto; left: auto; display: none; height: auto; padding: 15px 0; background: #fafafa; border: none!important; }
	.gnb .menu .lnb li { line-height: 3em; }
	
	/* menu - gnb - active */
	.header_area.active { background: transparent!important; border-bottom: 0!important; }
	.header_area.active .header_wrap { background: transparent!important; border-bottom: 0!important; }
	
	/* mobile - hamburger */
	.contants .hamburger { position: absolute; top: 50%; right: 10px; z-index: 99; display: inline-block; width: 40px; height: 40px; margin-top: -20px; }
	.contants .hamburger i { display: inline-block; font-size: 2.6em; font-weight: normal; color: #fff; }
}
@media screen and (max-width: 600px) {
	/* menu - gnb */
	.gnb .menu .lnb { display: none; }
}

/********************/
/* paging           */
/********************/
.paginate_complex { position: relative; margin-top: 20px; line-height: normal; height: 19px; text-align: center; }
.paginate_complex a, .paginate_complex strong { position: relative; z-index: 2; display: inline-block; margin: 0 1px; padding: 1px 6px; color: #626262; font: 12px/16px Tahoma, Sans-serif; vertical-align: top; background: #fff; }
.paginate_complex a:active, .paginate_complex a:focus { color: #fff; }
.paginate_complex strong { color: #000; }
.paginate_complex .direction { z-index: 1; color: #767676; font-weight: normal; text-decoration: none!important; border: 0; }
.paginate_complex .direction:hover, .paginate_complex .direction:active, .paginate_complex .direction:focus { color: #323232; background: #fff; border: 0; }
.paginate_complex .prev { border-left: 0; }
.paginate_complex .next { border-right: 0; }
.paginate_complex .direction span { position: relative; top: 6px; display: inline-block; width: 0; height: 0; line-height: 0; font-size: 0; vertical-align: top; }
.paginate_complex .prev span { left: -4px; margin-right: 1px; border: 3px solid; border-top: solid #fff; border-bottom: solid #fff; border-left: 0; }
.paginate_complex .next span { right: -4px; margin-left: 1px; border: 3px solid; border-top: solid #fff; border-bottom: solid #fff; border-right: 0; }

/********************/
/* footer           */
/********************/
.main_footer { width: 100%; padding: 0; background: #333; }
.footer_area { width: 100%; max-width: 1170px; margin: 0 auto; padding: 30px 0; text-align: center; }
.footer_area .footer-social { display: block; width: 100%; margin-bottom: 10px; }
.footer_area .footer-social a { display: inline-block; padding-right: 5px; }
.footer_area .footer-social a:last-child { padding-right: 0; }
.footer_area .footer-list { display: inline-block; width: 100%; }
.footer_area .footer-list ul { color: #fff; font-size: 0.9em; }
.footer_area .footer-list li { padding-bottom: 5px; }
.footer_area .footer-list li span { display: inline-block; padding-right: 15px; }

/********************/
/* login            */
/********************/
.login_area { height: 600px; }
.login_wrap { width: 90%; max-width: 320px; margin: 50px auto; }
.login_wrap h2.title { margin-bottom: 20px; }
.search_wrap { margin: 20px auto; }
.search_wrap .result_field { margin: 20px auto 30px; }
.search_wrap .result_field p { color: #fff; font-size: 1em; }
.login_wrap .login_field { margin: 10px auto; padding-left: 0; }
.login_wrap .login_field label { display: none; }
.login_wrap .login_field input { width: 200px; background: #f4f4f4; border: 1px solid #f4f4f4; }
.login_wrap .login_field button { margin-top: 10px; }
.login_wrap .line_list li a { color: #fff; font-size: 0.9em; }
.login_wrap .line_list li.line_blank { color: #fff; font-size: 1em; vertical-align: bottom; }