@charset "utf-8";

/*@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);}
.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:98%; height:auto; margin:10% 0; display: block}

.search_area{width : var(--search-width); height:var(--header-height);float:right; border:var(--tmp-border);}
.search_area form{display: block; width:90%; margin:12px auto; border:3px solid var(--icon-hover-color); border-radius: 30px; padding:0; text-align: right; background-color: var(--search-bgcolor)}
.search_area form input.txt{width:250px;font-size:20px; font-weight: 400; color:#333; vertical-align:middle; padding:6px 10px 3px 20px; background-color: var(--search-bgcolor); border:0; outline: 0; border-radius: 20px
}
.search_area form input.txt::placeholder{color: #e2be4a; opacity: 1; font-size:20px; vertical-align:middle;}
.search_area .find_icon{color: #fff; background-color:  var(--icon-hover-color);    padding: 0;    margin: 0;    display: inline-block;    width: 48px;    height: 48px;    cursor: pointer;    border-radius: 30px;}
.search_area .find_icon i{   font-size: 45px;   vertical-align: middle;  padding: 2px 0 0 2px;}



/*네비*/
.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%; text-align: center}
.navi_sub2 a{display:block; color: #333;padding: 7px 3px 7px 11px; }
.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:0px}
.navi_sub2 a.hover::before, .navi_sub2 a:hover::before{content: "* "; text-decoration: none}

.navi_sub2:hover, .navi_sub2.hover{background-color: var(--theme-color)}
.navi_sub_wrap.navi_hover{max-height: 10px; border-bottom: 1px solid #787878; box-shadow: 0px 15px 15px -10px #55555555;}







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

/* is image */
.sub_menus_wrap{display: grid; place-items: center;  min-width: var(--site-min-width)}
.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}

/* no image -- old
.sub_menus_wrap_noimg{display: grid; place-items: center;  min-width: var(--site-min-width)}
.sub_menus_noimg{width:100%;  border:0px solid #aaa; border-radius: 0; height: 68px; margin:3px auto 36px auto; padding: 23px 100px; background-color: #ffcd4a; text-align: center; box-shadow: 0px 8px 12px -6px #ddd}
.sub_menus_noimg a{color:#815f06; font-size: 18px; font-weight: 700; padding: 0px 0px 21px 0; margin:0 20px; cursor: pointer }
.sub_menus_noimg a:hover, .sub_menus_noimg a.hover{color:#333; border-bottom:2px solid #333}
*/

/* no image */
.sub_menus_wrap_noimg{display: grid; place-items: center;  min-width: var(--site-min-width)}
.sub_menus_noimg{width:100%;  border-bottom:2px solid #e5b233; border-radius: 0; height: 53px; margin:3px auto 36px auto; padding: 12px 100px; background-color: #fff; text-align: center; box-shadow: 0px 8px 12px -6px #ddd}
.sub_menus_noimg a{color:#815f06; font-size: 18px; font-weight: 700; padding: 0px 0px 16px 0; margin:0 20px; cursor: pointer }
.sub_menus_noimg a:hover, .sub_menus_noimg a.hover{color:#333; border-bottom:2px solid #333}




.sub_menus2_wrap_shadow{box-shadow: 0px 20px 30px #efefef; width:100%; margin:0 0 50px 0; border-bottom:1px solid #ddd}
.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: 500; 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}




/* 말풍선을 감싸는 컨테이너 */
.tooltip {	position: relative;	display: inline-block;}


/* 말풍선 본체 (평소에는 안 보임) */
.tooltip .tooltiptext {	visibility: hidden;	min-width: 200px; 	max-width: 400px; background-color: #333;color: #fff; /* 글자색 */
	text-align: center;
	border-radius: 6px;
	padding: 8px;
	position: absolute;
	z-index: 1;
	bottom: 125%; /* 버튼 위로 띄움 */
	left: 50%;
	margin-left: -100px; /* 너비의 절반만큼 왼쪽으로 이동해 가운데 맞춤 */
	
	/* 서서히 나타나는 애니메이션 */
	opacity: 0;
	transition: opacity 0.3s;
}

/* 말풍선 아래쪽 화살표 모양 */
.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #333 transparent transparent transparent;
}

/* 마우스를 올리면 말풍선 보이기 */
.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}



/* 검색 */
.search_title{color: #666; font-size: 15px; vertical-align: bottom; padding: 0px 5px 0px 0px; border:1px solid #aaa; border-width:1px 0; margin-top:30px; background-color: #fafafa}
.search_title span{display: inline-block; width: max-content; font-size:22px; font-weight: 700; color: #fff; background-color: #206cb8; padding:6px 20px; border-radius: 0 30px 30px 0;  vertical-align: middle; margin-right: 20px}

.search_box{border :1px solid #ccc; background-color: #fafafa; padding: 10px; border-radius: 20px; margin:10px 20px}
.search_box p.search_tt{ margin: 0; padding: 10px 5px; border-bottom:1px solid #aaa}
.search_box p.search_tt a{font-size:18px; color:#333; font-weight: 700}
.search_box p.search_tt a:hover{color:#206cb8}
.search_box p.search_tt a span{color: #999; display:inline-block ; width:max-content; background-color: #aaa; padding:3px 10px; font-size:17px; color:#fff ; border-radius: 6px}
.search_box p.search_bdy{padding: 2px 20px;}
.search_box_no_data{text-align: center; padding: 20px; color: #777;}

a.srarch_more{display: block; margin:5px auto; width:max-content; padding:2px 12px; border-radius: 20px; background-color: #b82020; color: #fff; border:1px solid #b82020; font-size: 16px; vertical-align: bottom}
a.srarch_more:hover{color:#b82020; background-color: #fff}



/* 업로드 관련 */
 .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}



table.color_chart{border-collapse:collapse; margin: 10px auto; width:1000px;}
table.color_chart td{border:1px solid #efefef; text-align: center; font-size:15px; height: 28px}


.map_area{fill: #f3f3f3}

/* sns area */

.sns_area{min-width: var(--site-min-width); max-width: var(--site-max-width); text-align: right; padding: 60px 0 0; margin: 0 auto}
.sns_area ul{padding: 0 20px 0 0; margin: 0 auto; list-style: none; /*width: max-content*/}
.sns_area ul li{display: inline-block; padding: 0; margin: 0 5px; width:35px; height:35px; background-size:100%; background-position: center; background-repeat: no-repeat; filter:grayscale(0.88); cursor:pointer;
	border-radius: 10px; border:0px solid #aaa;
}
.sns_area ul li:hover{filter:none; border-color:#666}
.sns_area ul li.kakao{background-image: url("/skin/_imgs/sns_kakao.png");}
.sns_area ul li.facebook{background-image: url("/skin/_imgs/sns_facebook.png");}
.sns_area ul li.naverblog{background-image: url("/skin/_imgs/sns_naver_blog.png"); background-size: 112%}
.sns_area ul li.utube{background-image: url("/skin/_imgs/sns_utube.png");}
.sns_area ul li.insta{background-image: url("/skin/_imgs/sns_insta.png");}
.sns_area ul li.danggn{background-image: url("/skin/_imgs/sns_danggn.png");}
.sns_area ul li::before{border:0}


/* footer */
.site_footer_wrap{ background-color: var(--footer-bgc); /*height:var(--footer-height); */ margin:0 auto; overflow: hidden; clear:both}
.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:12px 0}
.footer_body p{padding: 3px 10px; margin: 0;  color:#494949; }
.footer_body p span{font-weight: 700; color:#111}
.footer_body p.cpr{padding-left:72px; color:#777}
.footer_logo img{width:98%; height:auto; margin:10% 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: 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); border:1px solid #ddd; height:26px}
span.popup_close:hover{color:rgba(255,0,0,0.85); background-color: rgba(255,0,0,0.1);}


/* 페이지 이동 */
div.page {display: grid;  grid-auto-flow:column; justify-content: center; place-items: center;  padding:20px; overflow: hidden; width:content-box; }
div.page a{padding:8px 15px;color:#333; border:1px solid #666; font-size: 26px; font-weight: 800; margin:3px; border-radius: 33px;min-width:48px; height:48px; line-height: 34px}
div.page a:hover, div.page a.hover{color:#fff;background-color:#333; border-color:#333}
div.page a i{    line-height: 32px; font-size:30px; }



.location_choice{width: max-content; background-color: #efefef; padding: 4px 30px; margin: 10px auto; text-align: center; border:2px dashed #aaa; border-radius: 25px; font-size: 18px}
.location_choice select.loc_cho{font-size:18px; border:2px solid #e5b233; padding: 3px 10px; background-color: #fff9e4;outline:0; border-radius: 8px}
.location_choice input.loc_num{font-size:18px; border:2px solid #e5b233; padding: 3px 10px; background-color: #fff9e4;outline:0; border-radius: 8px; width: 60px; text-align: right}
span.loc_view{font-size:11px; background-color: #e2fff6; padding:2px; border-radius: 2px; vertical-align: bottom}



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