@charset "utf-8";
html {height:100%;}
body {margin:0;padding:0;font-size:0.75em;height:100%; color:#000; }

/* 초기화 */
html {}
body {margin:0;padding:0;font-size:0.75em; font-size:13px;}
html, body { width: 100%; }

html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-weight:700; font-size:15px;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
#hd ul, nav ul, #ft ul {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-size:1em}
button {cursor:pointer}
textarea, select {font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all;}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a:link, a:visited {color:#000;text-decoration:none}
a:hover, a:focus, a:active {color:#000;text-decoration:none}
ul {padding:0; margin:0; list-style:none;}
li {padding:0; margin:0; list-style:none;}
ul:after{display:block;visibility:hidden;clear:both;content:""}
b { font-weight: 500; }
/* 관리자 클래스 지우면 안됨 */
.viewer_admin { display: inline-block; position: relative; width: 100%; word-break:normal; word-break:keep-all; }
.viewer_admin p, .viewer_admin span, .viewer_admin div { word-break:normal; word-break:keep-all;  }

.error_required { font-weight: 500; color: red; }

/* 공통 배경 */
.html-mobile-background {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 125%; /* To compensate for mobile browser address bar space */
    background-size: 100% 100%;
}

.Default_contentsbg_admin {
	content: ' '; display: block; 
	background-position: center top; background-size: cover; background-repeat: no-repeat;
	top: 0; bottom: 0; left: 0; right: 0; position: absolute;z-index: -10;
}

/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only, caption {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

.fr { float: right; }
.alignr { text-align: right !important; }
.alignl { text-align: left !important; }
.alignc { text-align: center !important; }
.margint5 { margin-top: 5px !important; }
.margint10 { margin-top: 10px !important; }
.margint20 { margin-top: 20px !important; }
.margint30 { margin-top: 30px !important; }
.margint40 { margin-top: 40px !important; }
.margint60 { margin-top: 60px !important; }
.margint100 { margin-top: 100px !important; }

.marginb20 { margin-bottom: 20px !important; }

.w50px { width: 50px !important; }
.w80px { width: 80px !important; }
.w100px { width: 100px !important; }
.w150px { width: 150px !important; }
.w200px { width: 200px !important; }

.common_button > input[type="submit"], .common_button > a { 
	border: none; border-radius: 5px; padding: 5px 10px 5px 10px; background: #e8e8e8; cursor: pointer; font-size: 13px; font-weight: 500;
}


.no_data_list_normal { border-bottom: 1px solid #000; line-height: 100px; text-align: center; font-weight: 700;}
.no_data_reply_normal { border-bottom: 1px solid #c0c0c0; line-height: 100px; text-align: center; font-weight: 700;}


/* 팝업레이어 */
#hd_pop {
	z-index:100000;position:relative;margin:0 auto;height:0;
}
#hd_pop img { width: 100%; }
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff; padding: 0px;}
.hd_pops_con {}
.hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}



#ft { background: #f5f5f5; text-align: center; color: #000;  }
#ft_copy { width: calc(100% - 100px); margin: auto; text-align: left; border-top: 1px solid #d7d7d8; padding: 40px 0px; }
#ft_copy > div { font-weight: 900;}
#ft_copy > div > a { font-size: 13px; font-weight: 500; }
#ft_copy > ul { margin-top: 10px; }
#ft_copy > ul > li { float: left; color:#010101; margin-bottom: 10px; width: 100%;}
#ft_copy > ul > li:last-child { float: left; margin-top: 0px; }
#ft_copy > ul > li:last-child > select { border: 2px solid #004e96; padding: 8px 15px; }



/* 공통 게시판 css */
.board_area { width: 1200px; margin: auto; margin-top: 40px; }
.sub_contents_area { width: 1200px; margin: 40px  auto; word-break: normal; word-break: keep-all;  }
img.big_imga_ck { width: 100% !important; }

#map-canvas { width: 100%; height: 400px;}

.eyetoweb_board_cate_area { text-align: left; margin-bottom: 15px;}
	.eyetoweb_board_cate_area > a { 
		display: inline-block; background: #666; color: #fff; padding: 10px 20px 10px 20px; margin-right: 5px; margin-bottom: 5px; border-radius: 3px;
	}
	.eyetoweb_board_cate_area > a.active { background: #149ce8; }


.eyetoweb_board_area { width: 100%; }
	.eyetoweb_board_area > table { width: 100%; border-top: 1px solid #ededed; border-spacing:0px; table-layout: fixed }
	.eyetoweb_board_area > table th { text-align: center; padding: 15px; }
	.eyetoweb_board_area > table td { text-align: center; padding: 15px; border-bottom: 1px solid #ededed; }

	.numbering { width: 50px; background: #f6f6f6; }
	.wr_date { width: 90px; }
	.wr_name { width: 80px; }
	.wr_count { width: 50px; }
	.wr_subject { text-align: left !important; }
	.wr_subject > a { 
		display: inline-block; float: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #000;
		width: 100%;
	}

.eyetoweb_button_area { text-align: right; margin-top: 20px; }
	.eyetoweb_button_area > a { 
		display: inline-block; background: #222222; color: #fff; padding: 5px 10px 5px 10px; margin-right: 5px; margin-bottom: 5px; vertical-align: middle;
		border-radius: 3px; text-align: center;
	}
	.eyetoweb_button_area > a.active2 { background: #787878; }
	.eyetoweb_button_area > a.active { background: #009beb; }
		.eyetoweb_button_area > a > i { font-size: 15px; }


	.form_button_area > a { 
		background: #222222; color: #fff; padding: 5px 10px 5px 10px; margin-right: 5px; margin-bottom: 5px; vertical-align: middle;
		border-radius: 3px; text-align: center; font-size: 14px;
	}


.viewer_data { border-bottom: 1px solid #e8e8e8; padding-bottom: 10px; margin-bottom: 10px; }
.viewer_data > li { float: left; }
.viewer_data > li:first-child { width: 100px; font-weight: 700; padding-left: 10px; }
.viewer_data > li:last-child { width: calc(100% - 110px); }

.form_area { height: calc(100% - 50px); overflow: auto; margin-top: 10px; }
.form_area > ul.data_form { border-bottom: 1px solid #e8e8e8; }
.form_area > ul.data_form > li { float: left;  width: calc(100% - 150px); padding: 7px 0px 7px 0px; }
.form_area > ul.data_form > li:first-child { width: 140px; font-weight: 500; padding-left: 10px;  }

.form_area input[type="text"] { 
	width: calc(100% - 20px); border: 1px solid #dddddd; height: 28px;
	border-radius: 5px; padding: 5px;
}
.form_area input[type="number"] { 
	width: auto; border: 1px solid #dddddd; height: 20px;
	border-radius: 5px; padding: 5px;
}
.form_area select { 
	width: auto; border: 1px solid #dddddd; 
	border-radius: 5px; padding: 9px;
}
.form_area textarea { 
	width: calc(100% - 20px); border: 1px solid #dddddd; height: 150px;
	border-radius: 5px; padding: 5px;
}

.reply_area { margin-top: 20px; padding: 15px; background: #f7f7f7; border-radius: 15px; }
	.reply_area > div.title_txt { font-size: 15px; color: #5a5a5a; font-weight: 700; padding: 0 5px 5px 5px; }

.comment_list_area { padding: 15px; background: #fff; margin-top: 10px; border-radius: 5px; }
	.comment_list_area > div.comment_txt { word-break: break-all; }

.view_title { font-size: 20px; color: #000; font-weight: 700; border-bottom: 1px solid #c0c0c0; padding-bottom: 10px; word-break: break-all; }
	.view_title > p { margin-top: 5px; color: #666; font-size: 13px; font-weight: 400; }

.view_comment_area { padding: 10px; margin-top: 70px; }
	.file_upload_area { }
		.file_upload_area > div { margin-bottom: 10px; }

	.comment_area { word-break: break-all; }


/* 리스트 */
.eyetoweb_page_link { text-align: center; margin-top: 30px; }
	.eyetoweb_page_link > a { display: inline-block; font-size: 11px; font-weight: 800; width: 22px; line-height: 22px; }
	.eyetoweb_page_link > a.icon_bt { text-align: center; border: 1px solid #999999; }
	.eyetoweb_page_link > a.active { text-align: center; border: 1px solid #02c0b5; color: #ff7e00; }




.eyetoweb_gallery {
	margin:auto; width:100%;
}

.eyetoweb_gallery > li {
	float:left; margin-left:5px; margin-right:5px; width: calc(25% - 10px); margin-top: 30px;
}

.eyetoweb_gallery > li > div.title {
	display: inline-block; float: left; width: 100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
	font-size: 13px;font-weight:400; margin-top:10px; 
}

.eyetoweb_gallery > li > div.name {
	display: inline-block; float: left; width: 100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
	font-size: 13px;font-weight:400; margin-top:2px; margin-bottom:10px;
}

.eyetoweb_gallery > li > div.title_img {
	background-position: center center; background-size: cover; height: 180px; border: 1px solid #e8e8e8;
}
.eyetoweb_gallery > li > div.title_img > a { display: table; width: 100%; height: 100%; }


.autocode_area {}

	.autocode_txt { 
		display: inline-block; padding: 2px; width: 110px; border: 1px solid #000; border-radius: 5px; font-weight:800; letter-spacing: 1px; 
		font-size: 20px; margin-bottom: 5px; text-align: center; background: #fff; vertical-align: middle !important;
		-ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;
	}

.sub_title{
	margin:7px 0 10px;padding-left:10px;font-size:20px;color:#333333;letter-spacing:-2px; font-weight:700;}
.sub_title > span{color:#c3322e;}

.list_search_area { width: 320px; margin: 0 0 0 auto; }
.list_search_area > form > ul { margin-bottom: 10px; }
	.list_search_area > form > ul > li { float: left; width: calc(100% - 110px); }
	.list_search_area > form > ul > li:last-child { width: 100px; margin-left: 10px; }

	.list_search_area > form > ul > li > input[type="text"] {
		width: calc(100% - 12px);
		border:none;
		-moz-border-radius: 5x;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		padding:4px;
		color:#000;
		font-weight:400;
		font-size:15px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border: 1px solid #b3b2b2;
	}
	.list_search_area > form > ul > li > input[type="submit"] {
		padding:5px !important;
	}

.search_area { padding: 20px; border: 1px solid #d0d0d0; background: #f8f7f7; }
.search_area > form > ul { margin-bottom: 10px; }
	.search_area > form > ul > li { float: left; width: calc(100% - 110px); }
	.search_area > form > ul > li:last-child { width: 100px; margin-left: 10px; }
	.search_area > form > ul > li > input[type="text"] {
		width: calc(100% - 22px);
		border:none;
		-moz-border-radius: 5x;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		padding:10px;
		color:#000;
		font-weight:700;
		font-size:15px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border: 1px solid #b3b2b2;
	}


.search_result{margin-bottom:70px;}
.search_result .list{border-top:2px solid #c3322e;border-bottom:1px solid #cdcccc;}
.search_result .list > li:first-child{border-top:0;}
.search_result .list > li{padding:15px 15px;border-top:1px dashed #d8d8d8;}
.search_result .list > li .path{font-size:15px;color:#707070; font-weight: 700;}
.search_result .list > li .links{margin-top:10px;}
.search_result .list > li .links > li{margin-top:10px;font-size:15px;color:#363636;}
.search_result .list > li .links > li:first-child{margin-top:0;}
.txt_red{font-weight:700; color: red !important;}
.search_result .list > li .links > li > a { font-weight: 400; font-size: 13px; color: #444; }
.search_result .list > li .links > li > a:hover{text-decoration:underline;}


.faq_list > dl{margin-top:5px;padding:0 20px;border:1px solid #cac9c9;border-radius:5px;}
.faq_list > dl:first-child{margin-top:0;}
.faq_list dl > dt{}
.faq_list dl > dt > a{display:block;padding:17px 30px 13px 0;font-weight:700;color:#333333;font-size:15px;background:url('../images/ico_unfolder.gif') no-repeat right center; }
.faq_list dl > dt .ico_q{display:inline-block;margin-right:15px;width:32px;height:20px;background:url('../images/ico_q.gif') no-repeat 0 0;text-indent:-9999em;overflow:hidden;vertical-align:middle;}
.faq_list dl > dd{display:none;position:relative;padding:18px 0;border-top:1px solid #cac9c9;background:url('../images/bg_a.gif') no-repeat 47px 0;}
.faq_list dl > dd .ico_a{display:block;position:absolute;left:0;top:18px;width:32px;height:20px;background:url('../images/ico_a.gif') no-repeat 0 0;text-indent:-9999em;overflow:hidden;}
.faq_list dl > dd .cont{padding-left:50px;line-height:1.6;}
.faq_list dl.show > dt > a{background:url('../images/ico_folder.gif') no-repeat right center;}
.faq_list dl.show > dd{display:block;}

.file_download_area { border: 1px solid #dddddd; padding: 5px; margin-bottom: 10px; background: #f7f7f7;  }
.file_download_area > div { padding: 5px; }
	.file_download_area > div > a { color: #000; }


#eyetweb_v_sns { margin-top: 20px; }
	#eyetweb_v_sns > li { 
		float: left; margin-right: 5px; background: #e8e8e8; width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50%; 
	}
	#eyetweb_v_sns > li.facebook { background: #3b5998; }
	#eyetweb_v_sns > li.twitter { background: #55acee; }
	#eyetweb_v_sns > li.google_plus { background: #c23a2a; }
	
	#eyetweb_v_sns > li > a { color: #fff; font-size: 20px; }


input[name="autocode"] { 
	width: 80px !important; border: 1px solid #dddddd; height: 23px !important; margin-top: -4px;
	border-radius: 5px !important; padding: 5px !important; vertical-align: middle !important;
}



#ol_before { padding-bottom:10px; border-bottom:1px solid #dde4e9; }
#ol_before input[type="text"], #ol_before input[type="password"] {
	width: -moz-calc(100% - 20px); width: -webkit-calc(100% - 20px); width: -o-calc(100% - 20px); width: calc(100% - 20px); width: expression(100% - 20px);
	border: 1px solid #e8e8e8;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 9px;
	font-size:15px;
	font-weight:400;
	-moz-appearance: none;
	appearance: none;
	vertical-align: middle;
}


input[type="submit"] {
	width: 100%;
	border:none;
	-moz-border-radius: 5x;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding:10px;
	background:#009beb;
	color:#fff;
	font-weight:700;
	font-size:15px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}



.button {
	display: inline-block;
	width: calc(100% - 20px);
	border:none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding:10px;
	background:#6d6d6d;
	color:#fff;
	font-weight:700;
	font-size:15px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color:#fff !important;
	text-align: center;
	vertical-align: middle;
}




#frame_priview { 
	display: none; position: fixed; width: 100%; height: 100%; left: 0px; top: 0px !important; background-color: rgba(0, 0, 0, 0.8); z-index: 10000 !important;
}

#frame_preview_close { position: absolute; font-size: 50px; right: 10px; top: 5px; color: #fff; cursor: pointer; }
.preview_header_area { width: 1400px; margin: 30px auto; }
.preview_header_area > ul { width: 100%; }
.preview_header_area > ul > li { float: left;  }
.preview_header_area > ul > li.select_button { float: left; text-align: center; width: 20%; color: #fff; font-size: 50px; }
.preview_header_area > ul > li.select_button > span { margin-left: 10px; margin-right: 10px; cursor: pointer; }
.preview_header_area > ul > li.select_button > span.active { color: #5fc2f6; }
.preview_header_area > ul > li:first-child { float: left; color: #fff; font-size: 20px; font-weight: 700; width: 40%; }
.preview_header_area > ul > li:last-child { float: right; text-align: right; width: 40%; }
.preview_header_area > ul > li:last-child > a { 
	display: inline-block; width: 100px; height: 40px; line-height: 40px; background: #009beb; color: #fff; border-radius: 5px; font-size: 14px;
	font-weight: 700; text-align: center;
}


.theme_pop_area { width: 1500px; height: calc(100% - 160px); margin: 30px auto; }
.theme_pop_area > iframe { width: 100%; height: 100%; border: none; background: #fff; }

.Footer_socialicons__Czhpe a.Footer_instagram__ijlRl {
    color: #e05ee0ef !important;
}
.Footer_socialicons__Czhpe a.Footer_twitter__o2dnt {
    color: #1da1f2 !important;
}
.Footer_socialicons__Czhpe a.Footer_telegram__PAa9n {
    color: #08c !important;
}
@media screen and (max-width:1500px) {
	.theme_pop_area { width: calc(100% - 40px); }
}

@media screen and (max-width:1400px) {
	.preview_header_area { width: calc(100% - 40px); }

	#ft_copy { width: calc(100% - 10px); }

}


@media screen and (max-width:1200px) {
	.preview_header_area > ul > li.select_button { display: none; }
	.preview_header_area > ul > li:first-child { float: left; color: #fff; font-size: 20px; font-weight: 700; width: auto; }
	.preview_header_area > ul > li:last-child { float: left; margin-left: 10px; width: auto; }
	.board_area { width: 95%; margin: 20px auto; }

	.sub_contents_area { width: 95%; margin: 20px auto; word-break: normal; word-break: keep-all; }

}


@media screen and (max-width:1100px) {
	.sub_contents_area p, .sub_contents_area div, .sub_contents_area table, .sub_contents_area td, .sub_contents_area tr { word-break: normal; word-break: keep-all; }
	img.big_imga_ck_mobile { width: 100% !important; }
	

	.eyetoweb_board_cate_area { margin-bottom: 15px;}

	.file_upload_area img { width: 100% !important;  }
	/* .comment_area img { width: 100% !important;  } */



	.eyetoweb_gallery > li > div.title_img { height: 150px;}

}
@media screen and (max-width:800px) {
	.eyetoweb_gallery > li > div.title_img { height: 120px; }
}

@media screen and (max-width:600px) {
	.mb_dispn { display: none; }

	#map-canvas { width: 100%; height: 300px;}
	

	.form_area > ul.data_form { border-bottom: 1px solid #e8e8e8; }
	.form_area > ul.data_form > li { float: left;  width: 100%; padding: 7px 0px 7px 0px; }
	.form_area > ul.data_form > li:first-child { width: 100%; font-weight: 700; padding-left: 0px;  }




	.eyetoweb_page_link { text-align: center; margin-top: 30px; }
		.eyetoweb_page_link > a { display: inline-block; font-size: 11px; font-weight: 800; width: 17px; line-height: 19px; }
		.eyetoweb_page_link > a.icon_bt { text-align: center; border: 1px solid #999999; }
		.eyetoweb_page_link > a.active { text-align: center; border: 1px solid #02c0b5; color: #ff7e00; }

		.wr_subject > a { 
			display: inline-block; float: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #000;
			width: 100%;
		}


	.eyetoweb_gallery > li { width: calc(33.3333333333333333333333333% - 10px); }
	.eyetoweb_gallery > li > div.title_img { height: 110px; }

}


@media screen and (max-width:500px) {
	.view_comment_area { margin-top: 30px; }

	.eyetoweb_gallery > li { width: calc(50% - 10px); }
	.eyetoweb_gallery > li > div.title_img { height: 120px; }
}