/*@import url('//fonts.googleapis.com/css?family=Noto+Sans+KR:400,700,900&subset=korean');*/




/* 페이지 공통 상단 */
.site_header_wrap{ background-color: var(--header-bgc); height:var(--header-height); margin:0 auto; }
.header_area{ min-width: var(--site-min-width); max-width:var(--site-max-width); margin:0 auto;}
.logo_area{width : var(--logo-width); height:var(--header-height);float:left; border:var(--tmp-border);}
.search_area{width : var(--search-width); height:var(--header-height);float:left; border:var(--tmp-border);}
.navi_area{/*width : calc(var(--site-min-width)  - var(--logo-width)); */height:var(--header-height); float:right; border:var(--tmp-border);display: grid;  grid-auto-flow:column; place-items: center; justify-content:end}

.logo_area img{width:auto; height:80%; margin:3% 0; display: block}


/*네비*/
.navi_sub1{width:var(--navi-sub-width); border:var(--tmp-border);height:var(--header-height); font-size:21px; font-weight:800; display: grid; place-items: center; }
.navi_sub1 a{height:calc(var(--header-height) - 3px); line-height:var(--header-height);position: relative; display: inline-block; color: #333;padding-bottom: 5px;}
.navi_sub1 a:hover, .navi_sub1 a.hover{color:var(--navi-hover-color, #000)}
.navi_sub1 a::after {	content: "";	position: absolute;	bottom: 0;	left: 50%; width: 0; height: 3px;       /* 밑줄 두께 */
	background-color: var(--navi-hover-color, #000);	transition: all 0.3s ease; 	transform: translateX(-50%); }
.hdn_menu{font-size:12px; color:red}

/* 마우스 오버 시 효과 */
.navi_sub1 a:hover::after, .navi_sub1 a.hover::after {	width: 100%; /* 가로 길이를 꽉 채움 */}


.navi_sub_wrap{ background-color: var(--header-bgc); margin:0 auto; overflow: hidden; max-height:0px; transition: max-height 0.2s ease;position: absolute; top:var(--header-height); width:100%; border:0; box-shadow: none;z-index: 999}
.navi_sub_area{ min-width: var(--site-min-width); max-width:var(--site-max-width); margin:0 auto;}
.navi_sub_img{width : calc(var(--logo-width)  + 100px );float:left ;border:var(--tmp-border); position: absolute; top:0}
.navi_sub{/*width : calc(var(--site-min-width)  - var(--logo-width));*/ float:right; border:var(--tmp-border);display: grid;  grid-auto-flow:column; place-items: baseline; justify-content:end}

/*네비 sub*/
.navi_sub2{width:var(--navi-sub-width); border:var(--tmp-border); font-size:15px; font-weight:700; height: 100%}
.navi_sub2 a{display:block; color: #333;padding: 7px 3px 7px 13px; }
.navi_sub2 a:hover, .navi_sub2 a.hover{text-decoration: underline; text-underline-offset: 5px; text-decoration-color:#aaa ;color:var(--navi-hover-color, #000); padding-left:3px}
.navi_sub2 a.hover::before, .navi_sub2 a:hover::before{content: "* "; text-decoration: none}

.navi_sub2:hover, .navi_sub2.hover{background-color: #E8F1FB}


.navi_sub_wrap.navi_hover{max-height: 10px; border-bottom: 1px solid #787878; box-shadow: 0px 20px 20px  #55555555}

/* sub */
.sub_top {height: 180px; background-position: center center; background-repeat: repeat-x; background-size: cover}
.sub_top_blank{height: 180px; background-position: center center; background-repeat: repeat-x; border:var(--tmp-border);}

.sub_menus_wrap{display: grid; place-items: center;  }
.sub_menus{width:content-box;  border:0px solid #aaa; border-radius: 40px; height: 68px; margin:-36px auto 36px auto; padding: 23px 100px; background-color: #fff; text-align: center; box-shadow: 0px 6px 20px 0px #ccc}
.sub_menus a{color:#999; font-size: 18px; font-weight: 700; padding: 0px 0px 21px 0; margin:0 20px; cursor: pointer }
.sub_menus a:hover, .sub_menus a.hover{color:#333; border-bottom:2px solid #333}

.sub_menus2_wrap_shadow{box-shadow: 0px 20px 20px  #73737321; width:100%; margin:0 0 50px 0}
.sub_menus2_wrap {min-width: var(--site-min-width); max-width:var(--site-max-width); margin:0 auto;padding:10px 10px 0px 100px; overflow: hidden;}
.sub_menus2_wrap a{padding: 10px 30px; border: 1px solid #ddd; border-radius: 10px 10px 0 0; display: table-cell; border-bottom:0; font-size:16px; color:#777}
.sub_menus2_wrap a:hover, .sub_menus2_wrap a.hover{background-color: #fafafa; font-weight: 700; color:var(--navi-hover-color); border-color:#aaa}

.page_title{margin: 0; padding: 10px}
.page_title p.tit{font-size:35px; font-family: var(--body-font); margin: 0;font-weight: 700; color:var(--mian-color); padding: 10px 0}
.page_title p.tit_body{font-size:18px; font-family: var(--body-font); margin: 0;font-weight: 400; color:#787878}


/* 업로드 관련 */
 .img_freview {width: auto; height: 50px; display:block; margin:5px auto}
 .up_document {font-size:32px; color:#aaa; display:block}

.up_file_list{border : 0; width: 95%; margin: 0 auto}
 .up_file_list th{text-align: center; border-bottom:1px solid #aaa}
 .up_file_list td{border-bottom:1px solid #eee}
 .up_file_list td.file_del_btn{min-width: 250px}
 .progress-bar{width: 0%; height: 100%; background: #28a745; transition: width 0.1s;}
 .status-text {font-size: 16px;}
 .progress-area{width: 100%; background: #eee; height: 20px; border-radius: 20px; overflow: hidden;}
 
 #drop-zone {width: 100%; padding: 20px 40px 40px; border: 2px dashed #007bff; background: #f8f9fa; text-align: center; transition: 0.3s; border-radius: 20px; margin: 12px auto}
 /* 파일을 끌어다 놓았을 때 적용할 효과 */
 #drop-zone.highlight {
	 border-color: #007bff;
	 background-color: #e9ecef;
	 transform: scale(1.02); /* 살짝 커지는 효과 */
 }
 #drop-zone p{margin: 0;padding: 0}

a.file_lists_counsel{display: inline-block; padding: 0px 15px; border-radius: 20px; border: 1px solid #048dc8; background-color: #d8e1ec; cursor: pointer;color: #333; margin:4px 5px;font-size: 16px; vertical-align: middle; }
 a.file_lists_counsel:hover{background-color: #5080ec; color: #fff; border-color:  #5080ec;}
 
 
 fieldset.file_view{width:100%; font-size:16px; display: inline-block; vertical-align: top; border-radius: 6px;border:1px solid #2285b8; padding :10px 20px; margin:20px auto; background-color: #fff; min-height: 80px}
 fieldset.file_view legend{font-size:18px; font-weight: 700; padding:2px 10px; border:1px solid #aaa; border-radius: 6px; background-color: #f3f3f3}
 fieldset.file_view p{font-weight: 700; font-size:18px; color:#333; margin: 0; padding: 0}
 button.file_select{font-size:18px; border:1px solid #333; background-color: #333; color:#fff; padding: 5px 20px; border-radius: 6px; margin: 5px 5px 20px 5px}
 button.file_select:hover{color:#333; background-color: #fff; cursor: pointer}


/* footer */
.site_footer_wrap{ background-color: var(--footer-bgc); height:var(--footer-height); margin:50px auto 0 auto; }
.footer_area{ min-width: var(--site-min-width); max-width:var(--site-max-width); margin:0 auto; height: 100%}
.footer_logo{width : var(--logo-width); height:var(--header-height) ;float:left; border:var(--tmp-border);}
.footer_body{width: calc(var(--site-min-width)  - var(--logo-width) - 50px); height: 100%; float:right; border:var(--tmp-border); padding:20px 0}

.footer_logo img{width:auto; height:80%; margin:3% 0; display: block}

.hidden_iframe{padding: 0; margin: 0; position: absolute; top: -9999px; left: -9999px; width: 1px; height: 1px;}
.iframe_debug{width:100%; min-height:300px; border:2px solid #e77; overflow: auto}

/*popup*/
div.popup{display: block; position: absolute; margin: 0; padding: 0; overflow: hidden;}
div.popup p{margin: 0; padding: 0; }
div.popup_bottom{text-align: center; background-color: rgba(0,0,0,0.55); position: absolute; bottom:0px; width: 100%; color: #fff; padding:3px 0;}
div.popup_bottom label{font-size: 12px; padding:2px 10px;}
div.popup_bottom label:hover{color: #d7d7d7; }

div.popup_bottom label i{font-size: 17px; margin-right: 2px;}

span.popup_close{display: inline-block; position: absolute; right: 5px; top: 5px; color:rgba(0,0,0,0.5); cursor: pointer; background-color: rgba(255,255,255,0.5);}
span.popup_close:hover{color:rgba(255,0,0,0.85); background-color: rgba(255,0,0,0.1);}



.adm_login{ color:#e00 ;}
.adm_login_area{position: fixed; top:8px; right:10px; background-color:#55555555; padding:4px 16px; border-radius: 20px;}
input::placeholder {	color: #bbb; opacity: 1; font-size: 0.9em;  /* 글자 크기도 조절 가능 */}