@charset "utf-8";

/* PC 모드 CSS */

html, body { height:100%; }
body { overflow-y:scroll; }

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */


#loading_display { position:absolute; left:0px; right:0px; top:0px; bottom:0px; background:#000; z-index:200; }
	#loading_display #loading_display_in1 { position:absolute; left:50%; top:50%; }
	#loading_display #loading_display_in2 { position:absolute; left:-25px;; top:-25px; width:50px; height:50px; }


/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */


#wrap { position:relative; display:none; }

	#top { overflow:hidden; padding-bottom:46px; }
		#top #logo_n_top { position:relative; width:1260px; margin:0 auto; overflow:hidden; }
		#top #logo_n_top h1.logo_text { display:block; height:100px; line-height:100px; font-size:30px; }
		#top #logo_n_top #etc_menu { position:absolute; right:0px; bottom:20px; background:#FFF; }
		#top #logo_n_top #etc_menu ul li { float:left; height:18px; background:URL('../img/bg09.gif') no-repeat; font-size:12px; }
/*		#top #logo_n_top #etc_menu ul li:nth-child(1) { float:left; background:#FFF; height:18px; font-size:12px; } */
		#top #logo_n_top #etc_menu ul li span { display:inline-block; height:18px; line-height:18px; padding:0px 10px 0px 11px; color:#999; }
		#top #logo_n_top #etc_menu ul li span.mob { display:inline-block; height:16px; line-height:16px; padding:0px 10px 0px 10px; color:#666; background:#F1F1F1; border-radius:2px; border:1px solid #DADADA; font-size:11px; }
		#top #logo_n_top #etc_menu ul li span:hover { text-decoration:underline; }
		#top #logo_n_top #etc_menu ul li span.mob:hover { text-decoration:none; }

		#top #menu1 { position:absolute; width:100%; overflow:hidden; } 
		#top #menu2 { position:relative; width:1260px; margin:0 auto; overflow:hidden; z-index:21; }
		#top #menu2 ul.m1_ul { overflow:hidden; width:1260px; margin-bottom:30px; }
		#top #menu2 li.m1_li { font-size:13px; float:left; margin-left:10px; margin-right:10px; min-width:100px; overflow:hidden; text-align:center; }
		#top #menu2 li.m1_li span.m1_li { display:inline-block; margin-top:4px; height:40px; line-height:40px; overflow:hidden; }
		#top #menu2 ul.m2_ul { margin-top:20px; }
		#top #menu2 li.m2_li { padding-top:4px; cursor:pointer; text-align:center; margin-left:10px; margin-right:10px; }
		#top #menu2 li.m3_li { padding-top:4px; cursor:pointer; text-align:left; margin-left:0px; margin-right:10px; }
		#top #menu3 { position:absolute; top:46px; left:0px; right:0px; bottom:0px; z-index:20; }
		#mode_change { margin-bottom:1px; text-align:center; font-weight:bold; color:#F00; background:#F1F1F1; padding:10px; }

	/* 모바일기기용 상단 CSS */
	#top_mob { overflow:hidden; }
		#top_mob #logo_n_top { position:relative; width:1260px; margin:0 auto; overflow:hidden; }
		#top_mob #logo_n_top h1.logo_text { display:block; height:100px; line-height:100px; font-size:30px; }
		#top_mob #logo_n_top #etc_menu { position:absolute; right:0px; bottom:20px; background:#FFF; }
		#top_mob #logo_n_top #etc_menu ul li { float:left; height:18px; background:URL('../img/bg09.gif') no-repeat; font-size:12px; }
/*		#top_mob #logo_n_top #etc_menu ul li:nth-child(1) { float:left; background:#FFF; height:18px; font-size:12px; } */
		#top_mob #logo_n_top #etc_menu ul li span { display:inline-block; height:18px; line-height:18px; padding:0px 10px 0px 11px; color:#999; }
		#top_mob #logo_n_top #etc_menu ul li span.mob { display:inline-block; height:16px; line-height:16px; padding:0px 10px 0px 10px; color:#666; background:#F1F1F1; border:1px solid #DADADA; font-size:11px; }
		#top_mob #logo_n_top #etc_menu ul li span:hover { text-decoration:underline; }
		#top_mob #logo_n_top #etc_menu ul li span.mob:hover { text-decoration:none; }

		#top_mob #menu1 { position:relative; overflow:hidden; } 
		#top_mob #menu2 { position:relative; width:1260px; margin:0 auto; overflow:hidden; z-index:21; }
		#top_mob #menu2 ul.m1_ul { overflow:hidden; width:12600px; margin-bottom:30px; }
		#top_mob #menu2 li.m1_li { font-size:13px; float:left; margin-left:10px; margin-right:10px; min-width:100px; overflow:hidden; text-align:center; }
		#top_mob #menu2 li.m1_li span.m1_li { display:inline-block; margin-top:4px; height:40px; line-height:40px; overflow:hidden; }
		#top_mob #menu2 ul.m2_ul { margin-top:20px; }
		#top_mob #menu2 li.m2_li { padding-top:4px; cursor:pointer; text-align:left; margin-left:10px; margin-right:10px; }
		#top_mob #menu2 li.m3_li { padding-top:4px; cursor:pointer; text-align:left; margin-left:0px; margin-right:10px; }
		#top_mob #menu3 { position:absolute; top:46px; left:0px; right:0px; bottom:0px; z-index:20; }
		#mobile_mode_button { position:relative; width:1260px; padding:10px; text-align:center; margin-bottom:1px; background:#F1F1F1; }


/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */

	#quick { position:relative; clear:both; z-index:13; }
		#quick_left { position:absolute; left:0px; top:0px; width:50%; height:100%; }
			#quick_left_in { position:relative; margin-right:630px; height:100%; }
			#quick_left_area { position:absolute; top:0px; }
			#quick_left li { line-height:1px; }
			#quick_left img { vertical-align:top; line-height:1px; }
		#quick_right { position:absolute; right:0px; top:0px; width:50%; height:100%; }
			#quick_right_in { position:relative; margin-left:630px; height:100%; }
			#quick_right_area { position:absolute; top:0px; }
			#quick_right li { line-height:1px; }
			#quick_right img { vertical-align:top; }

	#visual_area { position:relative; clear:both; overflow:hidden; }
		#visual_area div.visual_group { position:absolute; width:100%; top:0px; overflow:hidden; }
		#visual_area div.visual_group div.visual_left { position:absolute; left:0px; top:0px; width:50%; height:100%; }
		#visual_area div.visual_group div.visual_left_in { position:relative; margin-right:630px; height:100%; }
		#visual_area div.visual_group div.visual_right { position:absolute; right:0px; top:0px; width:50%; height:100%; }
		#visual_area div.visual_group div.visual_right_in { position:relative; margin-left:630px; height:100%; }
		#visual_area div.visual_group div.visual_center { position:relative; margin:0 auto; width:1260px; z-index:2; overflow:hidden; }
		#visual_area #visual_bul_group { position:absolute; left:0px; bottom:20px; width:100%; height:15px; text-align:center; z-index:13; }
		#visual_area #visual_bul_group span.visual_slide_bul1 { display:inline-block; width:16px; height:16px; background:URL('../img/btn_now.png'); margin:0px 2px 0px 2px; cursor:pointer; }
		#visual_area #visual_bul_group span.visual_slide_bul2 { display:inline-block; width:16px; height:16px; background:URL('../img/btn_next.png'); margin:0px 2px 0px 2px; cursor:pointer; }


/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */


	/* ============================================================
	   메인 위젯 — 구조 기본값만 (디자인은 pc_responsive.css에서 관리)
	   ============================================================ */
	#main_contents { }

		/* 위젯 래퍼 — 구조만 */
		#main_contents div.main_board_area { position:relative; }
		#main_contents div.main_form_area { position:relative; }
		#main_contents div.main_login_area { position:relative; }
		#main_contents div.main_diary_area { position:relative; }
		#main_contents div.main_banner_area { position:relative; }

		/* ── 로그인 위젯 — 퀄리티 디자인 ── */
		#main_contents div.main_login_area div.div1,
		#main_contents div.main_login_area div.div2 { padding:30px 0; }

		/* 타이틀 */
		#main_contents div.main_login_area h3.title,
		#main_contents div.main_login_area h3 { margin:0 0 16px; font-size:18px; line-height:1; }
		#main_contents div.main_login_area span.title { font-size:18px; font-family:'Pretendard Variable',Pretendard,sans-serif; color:#1a202c; font-weight:700; border-left:3px solid #3182ce; padding-left:12px; }
		#main_contents div.main_login_area span.title2 { font-size:18px; font-weight:700; color:#1a202c; font-family:'Pretendard Variable',Pretendard,sans-serif; border-left:3px solid #3182ce; padding-left:12px; display:inline-block; }

		/* 폼 필드셋 */
		#main_contents div.main_login_area fieldset { margin:0; padding:0; border:none; margin-top:16px; }
		#main_contents div.main_login_area fieldset legend { position:absolute; width:0; height:0; overflow:hidden; }

		/* 인풋+버튼 가로 배치 그룹 */
		#main_contents div.main_login_area fieldset { display:flex; align-items:stretch; gap:12px; flex-wrap:wrap; }
		#main_contents div.main_login_area .login-fields { display:flex; flex-direction:column; gap:8px; flex:1; min-width:200px; }

		/* 인풋 래퍼 (아이콘 포함) */
		#main_contents div.main_login_area .login-input-wrap { position:relative; }
		#main_contents div.main_login_area .login-input-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#a0aec0; pointer-events:none; z-index:1; }
		#main_contents div.main_login_area svg.login-input-icon { width:18px; height:18px; }

		/* 인풋 */
		#main_contents div.main_login_area input.css_id,
		#main_contents div.main_login_area input.css_pwd {
			display:block; border:1.5px solid #e2e8f0; padding:12px 14px; font-size:14px; font-family:'Pretendard Variable',Pretendard,sans-serif;
			border-radius:8px; width:100%; max-width:300px; background:#f8fafc; box-sizing:border-box; margin-bottom:8px;
			position:static !important; height:auto !important; background-image:none !important;
		}
		#main_contents div.main_login_area input.css_id2,
		#main_contents div.main_login_area input.css_pwd2 {
			display:block; border:1.5px solid #e2e8f0; padding:12px 14px 12px 42px; font-size:14px; font-family:'Pretendard Variable',Pretendard,sans-serif;
			border-radius:8px; width:100%; background:#f8fafc; box-sizing:border-box; margin-bottom:0;
			position:static !important; height:auto !important; background-image:none !important;
		}
		#main_contents div.main_login_area input::placeholder { color:#cbd5e0; font-size:14px; }
		#main_contents div.main_login_area input:focus { border-color:#3182ce; outline:none; box-shadow:0 0 0 3px rgba(49,130,206,.12); background:#fff; }

		/* 버튼 — PC: 인풋 우측, 모바일: 아래 풀폭 */
		#main_contents div.main_login_area button.btn_login,
		#main_contents div.main_login_area button.btn_login2,
		#main_contents div.main_login_area button.btn_login3 {
			display:flex; align-items:center; justify-content:center;
			padding:0 32px; font-size:15px; font-weight:700; color:#fff;
			background:linear-gradient(135deg, #4299e1 0%, #3182ce 100%); border:none; border-radius:8px;
			cursor:pointer; font-family:'Pretendard Variable',Pretendard,sans-serif;
			position:static !important;
			width:auto; min-width:100px;
			margin:0;
			box-shadow:0 2px 8px rgba(49,130,206,.25);
			transition:all .15s;
		}
		#main_contents div.main_login_area button:hover { background:linear-gradient(135deg, #3182ce 0%, #2b6cb0 100%); box-shadow:0 4px 12px rgba(49,130,206,.35); transform:translateY(-1px); }

		/* 링크 메뉴 — 가로 배열 */
		#main_contents div.main_login_area span[class^="other_menu"] { display:inline !important; margin-top:0; }
		#main_contents div.main_login_area span.other_menu,
		#main_contents div.main_login_area span.other_menu4,
		#main_contents div.main_login_area span.other_menu9 { display:block !important; margin-top:14px; line-height:1.8; flex-basis:100%; }
		#main_contents div.main_login_area span[class^="other_menu"] a { font-size:13px; color:#718096; text-decoration:none; margin-right:12px; font-family:'Pretendard Variable',Pretendard,sans-serif; }
		#main_contents div.main_login_area span[class^="other_menu"] a:hover { color:#3182ce; text-decoration:underline; }
		#main_contents div.main_login_area span.other_menu5 a,
		#main_contents div.main_login_area span.other_menu14 a { color:#3182ce !important; font-weight:600; }

		/* 멤버쉽 카드 (로그인 상태) — 환영 메시지 + 로그아웃 가로 배치 */
		#main_contents div.main_login_area span.membership,
		#main_contents div.main_login_area span.membership3 {
			display:flex; align-items:center; justify-content:space-between;
			padding:18px 24px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px;
			font-size:15px; color:#4a5568; margin-top:20px; margin-bottom:0;
			position:static !important; width:auto !important; height:auto !important;
			font-family:'Pretendard Variable',Pretendard,sans-serif; line-height:1.5;
		}
		#main_contents div.main_login_area span.membership1,
		#main_contents div.main_login_area span.membership4 { font-weight:700; color:#1a202c; }
		#main_contents div.main_login_area span.membership2 { display:inline-block; margin-left:10px; vertical-align:middle; }
		#main_contents div.main_login_area span.membership5 { color:#e53e3e; margin-left:8px; }

		/* 인라인 로그아웃 버튼 (멤버쉽 카드 안) */
		#main_contents div.main_login_area .btn_logout_inline {
			display:inline-block !important; padding:8px 20px; font-size:13px; font-weight:600; color:#fff;
			background:linear-gradient(135deg, #4299e1 0%, #3182ce 100%); border:none; border-radius:6px;
			cursor:pointer; font-family:'Pretendard Variable',Pretendard,sans-serif;
			width:auto !important; max-width:none !important; margin:0 !important;
			box-shadow:0 1px 4px rgba(49,130,206,.2); transition:all .15s; flex-shrink:0;
		}
		#main_contents div.main_login_area .btn_logout_inline:hover {
			background:linear-gradient(135deg, #3182ce 0%, #2b6cb0 100%); box-shadow:0 2px 8px rgba(49,130,206,.3);
		}

		/* iframe 숨김 */
		#main_contents div.main_login_area iframe.hidden_iframe,
		iframe[name="main_login_iframe_member"] { width:0; height:0; border:0; position:absolute; left:-9999px; }

		/* 폼 상태 뱃지 — 색상 (디자인 무관, 유지) */
		#main_contents span.state_1 { display:inline-block; padding:2px 10px; color:#353430; border-radius:2px; border:1px solid #AED0DC; background:#C0E7F6; font-size:12px; }
		#main_contents span.state_2 { display:inline-block; padding:2px 10px; color:#353430; border-radius:2px; border:1px solid #E7BFB3; background:#FFD5C5; font-size:12px; }
		#main_contents span.state_3 { display:inline-block; padding:2px 10px; color:#353430; border-radius:2px; border:1px solid #BCB9CC; background:#D0CDE2; font-size:12px; }
		#main_contents span.state_4 { display:inline-block; padding:2px 10px; color:#353430; border-radius:2px; border:1px solid #D4D8BD; background:#EBF0D2; font-size:12px; }

		/* 메인 컨텐츠 블록 — 구조 */
		#main_contents div.main_content_block { width:1260px; margin:0 auto; overflow:hidden; }


/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */

	#content_left_area { clear:both; margin:0px auto; width:200px; overflow:hidden;float:left;}
		#content_left_area div.title_n_loc { margin:60px 0px 60px 0px; overflow:hidden; }
		#content_left_area div.title_n_loc span.title{ font-size:36px; line-height:40px; font-family:'나눔고딕','NanumGothic','맑은 고딕','malgun gothic','dotum','돋움',sans-serif; color:#000; vertical-align:middle; }
		#content_left_area div.title_n_loc span.loc { float:right; line-height:35px; margin-left:20px; vertical-align:middle; }
		#content_left_area div.title_n_loc span.loc1 { color:#999; margin-right:9px; text-decoration:underline; }
		#content_left_area div.title_n_loc span.loc2 { color:#999; margin-right:9px; text-decoration:underline; background:URL('../img/bul_loc1.jpg') left center no-repeat; padding-left:14px; }
		#content_left_area div.title_n_loc span.loc3 { color:#333; margin-right:10px; background:URL('../img/bul_loc2.jpg') left center no-repeat; padding-left:19px; }
		#content_left_area div.no_auth { text-align:center; border:1px solid #DADADA; background:#F9F9F9; padding:60px; font-size:16px; color:#000; font-weight:bold; }
		#content_left_area div.no_auth > span { color:#299DCC; }
		#content_left_area div.no_auth div { margin-top:30px; }
		#content_left_area div.no_content { text-align:center; border:1px solid #DADADA; background:#F9F9F9; padding:60px; font-size:16px; color:#000; font-weight:bold; }
		#content_left_area div.no_content > span { color:#299DCC; }
		#content_left_area div.no_content div { margin-top:30px; }



	#content_area {margin:0px auto; width:1000px; margin-bottom:60px;}
		#content_area div.title_n_loc { margin:60px 0px 60px 0px; overflow:hidden;}
		#content_area div.title_n_loc span.title{ font-size:36px; line-height:40px; font-family:'나눔고딕','NanumGothic','맑은 고딕','malgun gothic','dotum','돋움',sans-serif; color:#000; vertical-align:middle; }
		#content_area div.title_n_loc span.loc { float:right; line-height:35px; margin-left:20px; vertical-align:middle; }
		#content_area div.title_n_loc span.loc1 { color:#999; margin-right:9px; text-decoration:underline; }
		#content_area div.title_n_loc span.loc2 { color:#999; margin-right:9px; text-decoration:underline; background:URL('../img/bul_loc1.jpg') left center no-repeat; padding-left:14px; }
		#content_area div.title_n_loc span.loc3 { color:#333; margin-right:10px; background:URL('../img/bul_loc2.jpg') left center no-repeat; padding-left:19px; }
		#content_area div.no_auth { text-align:center; border:1px solid #DADADA; background:#F9F9F9; padding:60px; font-size:16px; color:#000; font-weight:bold; }
		#content_area div.no_auth > span { color:#299DCC; }
		#content_area div.no_auth div { margin-top:30px; }
		#content_area div.no_content { text-align:center; border:1px solid #DADADA; background:#F9F9F9; padding:60px; font-size:16px; color:#000; font-weight:bold; }
		#content_area div.no_content > span { color:#299DCC; }
		#content_area div.no_content div { margin-top:30px;  }


/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */


	#bottom { font-family:dotum; position:relative; width:100%; min-height:150px; background:#000; margin-top:100px; }
		#menu_member_100per { position:relative; clear:both; padding-top:40px; }
		#menu_member { position:relative; clear:both; margin:0 auto; width:1260px; color:#FFF; }
		#menu_member ul li { display:inline-block; }
		#menu_member ul li span { color:#999; display:inline-block; margin-right:20px; padding-right:13px; background:URL('../img/bul_copy_slice2.jpg') right center no-repeat; }
		#menu_member ul li span.private { color:#CCC; }
		#menu_focus { position:absolute; right:20px; top:40px; }
		#menu_focus span { float:left; margin-left:2px; }
		#copyright { position:relative; clear:both; margin:0 auto; width:1260px; padding:11px 0px 30px 0px; overflow:hidden; }
		#copyright div.address { font-style:normal; line-height:20px; color:#666; }
		#copyright div.address > div { clear:both; }
		#copyright span { float:left; display:inline-block; background:URL('../img/bul_copy_slice.jpg') left center no-repeat; margin-left:10px; padding-left:10px; }
		#copyright div.address > div > span:first-child { background:transparent; margin-left:0px; padding-left:0px; }

		#copyright span.tel { margin-left:0px; padding-left:0px; color:#CCC; font-weight:bold; }
		#copyright span.tel2 { color:#CCC; font-weight:bold; }
		#copyright span.copy { margin-left:0px; padding-left:0px;width:100%; margin-top:5px; }
		#copyright img.snumber2 { margin-left:5px; vertical-align:middle; }


/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */


	#ssl_mark { position:fixed; right:0px; bottom:0px; z-index:20; }
	#ssl_mark > img { width:95px; height:95px; cursor:pointer; }


/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */


	/* popup */
		div.popup_area { position:fixed; display:block; z-index:100; }
		div.popup_border { border:1px solid #444444; padding:2px; overflow:hidden; }
		div.popup_title { height:23px; line-height:23px; color:#F7F8FA; font-weight:bold; background:URL('../img/pop.jpg') no-repeat left top; overflow:hidden; padding:0px 5px 0px 40px; font-size:11px; cursor:pointer; }
		div.popup_close { height:31px; text-align:right; overflow:hidden; }
		button.popup_close_but1 { margin-top:4px; background:URL('../img/pop_today.png'); border:0px; width:101px; height:23px; cursor:pointer; }
		button.popup_close_but2 { margin-top:4px; background:URL('../img/pop_close.png'); border:0px; width:60px; height:23px; cursor:pointer; }