@charset "utf-8";


/***********************************************
	조직도
************************************************/

.group-tree,
.group-tree *,
.group-tree *:before,
.group-tree *:after			{ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; }

.group-tree .depth-1 > li			{ position: relative; margin-bottom: 50px; }

@media all and (min-width: 895px) { 
	.group-tree			{ position: relative; overflow: hidden;  }
	.group-tree ul		{ position: relative; }
	.group-tree li		{ text-align: center; }
	.group-tree a		{ display: inline-block; position: relative; }

	
	.group-tree .depth-1 > li > a		{ padding: 10px 30px; background: #17738d; color: #fff; font-size: 16px; font-weight: bold; border-radius: 3px; }
	.group-tree .depth-2 > li > a		{ padding: 8px 30px; background: #49a5bf; color: #fff; font-size: 14px; font-weight: bold; border-radius: 3px; }
	.group-tree .depth-3 > li > a		{ padding: 10px 4px; margin: 0 2px; width: 18px; height: 150px; background: #8fa92a; color: #ffffff; font-size: 12px; font-weight: bold; border-radius: 3px; }
	.group-tree .depth-4 > li > a		{ padding: 8px 3px; margin: 0 2px; width: 12px; height: 150px; background: #eaeaea; border: 1px solid #dadada; color: #3a3a3a; font-family: 'Dotum'; font-size: 11px; border-radius: 3px; }

	.group-tree .depth-2				{ padding-top: 25px; }
	.group-tree .depth-2:before			{ content: ""; display:block; position: absolute; top: 0; left: 50%; width: 1px; height: 25px; background: #dadada; }
	.group-tree .depth-2 > li			{ display: inline-block; position: relative; padding: 25px 5px 0; vertical-align: top; margin: 0 -2px; }
	.group-tree .depth-2 > li:after		{ content: ""; display:block; position: absolute; top: 0px; left: 0; right: 0; height: 1px; background: #dadada; }
	.group-tree .depth-2 > li:first-child:after	{ left: 50%; }
	.group-tree .depth-2 > li:last-child:after	{ right: 50%; }
	.group-tree .depth-2 > li:before	{ content: ""; display:block; position: absolute; top: 0; left: 50%; width: 1px; height: 25px; background: #dadada; }
	
	.group-tree .depth-3				{ padding: 25px 2px 0; overflow: hidden; }
	.group-tree .depth-3:before			{ content: ""; display:block; position: absolute; top: 0; left: 50%; width: 1px; height: 25px; background: #dadada; }
	.group-tree .depth-3 > li			{ display: inline-block; position: relative; padding-top: 25px; margin: 0 -2px; vertical-align: top; }
	.group-tree .depth-3 > li:after		{ content: ""; display:block; position: absolute; top: 0px; left: 0; right: 0; height: 1px; background: #dadada; }
	.group-tree .depth-3 > li:first-child:after	{ left: 50%; }
	.group-tree .depth-3 > li:last-child:after	{ right: 50%; }
	.group-tree .depth-3 > li:before	{ content: ""; display:block; position: absolute; top: 0; left: 50%; width: 1px; height: 25px; background: #dadada; }
	
	.group-tree .depth-4				{ padding: 25px 2px 0; overflow: hidden; }
	.group-tree .depth-4:before			{ content: ""; display:block; position: absolute; top: 0; left: 50%; width: 1px; height: 25px; background: #dadada; }
	.group-tree .depth-4 > li			{ display: inline-block; position: relative; padding-top: 25px; margin: 0 -2px; vertical-align: top; }
	.group-tree .depth-4 > li:after		{ content: ""; display:block; position: absolute; top: 0px; left: 0; right: 0; height: 1px; background: #dadada; }
	.group-tree .depth-4 > li:first-child:after	{ left: 50%; }
	.group-tree .depth-4 > li:last-child:after	{ right: 50%; }
	.group-tree .depth-4 > li:before	{ content: ""; display:block; position: absolute; top: 0; left: 50%; width: 1px; height: 25px; background: #dadada; }
}

@media all and (min-width: 1001px) and (max-width: 1195px) {
	.group-tree .depth-4 > li > a	{ padding-left: 1px; padding-right: 1px; }
}

@media all and (max-width: 894px) {
	.group-tree			{ position: relative; overflow: hidden;  }
	.group-tree ul		{ position: relative; overflow: hidden; clear: both; }
	.group-tree li		{ position: relative; overflow: hidden; }
	.group-tree a		{ display: block; position: relative; }

			
	.group-tree .depth-1 > li > a		{ float: left; clear: both; padding: 10px 30px; background: #17738d; color: #fff; font-size: 16px; font-weight: bold; border-radius: 3px; }
	.group-tree .depth-2 > li > a		{ width: 100px; padding: 8px 0; background: #49a5bf; color: #fff; font-size: 14px; font-weight: bold; border-radius: 3px; text-align: center; }
	.group-tree .depth-3 > li > a		{ width: 120px; padding: 4px 0px; background: #8fa92a; color: #ffffff; font-size: 12px; font-weight: bold; border-radius: 3px; text-align: center; }
	.group-tree .depth-4 > li > a		{ padding: 4px 10px; background: #eaeaea; border: 1px solid #dadada; color: #3a3a3a; font-family: 'Dotum'; font-size: 11px; border-radius: 3px; }
	
	.group-tree .depth-2				{ margin-left: 10px; clear: both; }
	.group-tree .depth-2 > li			{ padding-top: 25px; padding-left: 15px; }
	.group-tree .depth-2:before			{ content: ""; display:block; position: absolute; top: 0; left: 0; width: 1px; height: 25px; background: #dadada; }
	.group-tree .depth-2 > li:before	{ content: ""; display:block; position: absolute; top: 0; left: 0; bottom: 0; width: 1px; background: #dadada; }
	.group-tree .depth-2 > li:after		{ content: ""; display:block; position: absolute; top: 45px; left: 0; width: 15px; height: 1px; background: #dadada; }
	.group-tree .depth-2 > li:last-child:before	{ bottom: auto; height: 45px; }
	
	.group-tree .depth-3				{ margin-left: 10px; }
	.group-tree .depth-3 > li			{ padding-top: 15px; padding-left: 15px; }
	.group-tree .depth-3:before			{ content: ""; display:block; position: absolute; top: 0; left: 0; width: 1px; height: 25px; background: #dadada; }
	.group-tree .depth-3 > li:before	{ content: ""; display:block; position: absolute; top: 0; left: 0; bottom: 0; width: 1px; background: #dadada; }
	.group-tree .depth-3 > li:after		{ content: ""; display:block; position: absolute; top: 30px; left: 0; width: 15px; height: 1px; background: #dadada; }
	.group-tree .depth-3 > li:last-child:before	{ bottom: auto; height: 30px; }
	
	.group-tree .depth-4				{ margin-left: 10px; }
	.group-tree .depth-4 > li			{ padding-top: 15px; padding-left: 15px; }
	.group-tree .depth-4:before			{ content: ""; display:block; position: absolute; top: 0; left: 0; width: 1px; height: 25px; background: #dadada; }
	.group-tree .depth-4 > li:before	{ content: ""; display:block; position: absolute; top: 0; left: 0; bottom: 0; width: 1px; background: #dadada; }
	.group-tree .depth-4 > li:after		{ content: ""; display:block; position: absolute; top: 30px; left: 0; width: 15px; height: 1px; background: #dadada; }
	.group-tree .depth-4 > li:last-child:before	{ bottom: auto; height: 30px; }
}


/***********************************************
	직원 목록
************************************************/

.employee-list				{ position: relative; border-top: 3px solid #555; }
.employee-list dl			{ position: relative; min-height: 115px; margin-bottom: 10px; padding: 10px 0 10px 110px; border-bottom: 1px solid #eaeaea; }
.employee-list dt			{ display: block; position: absolute; top: 10px; left: 10px; width: 90px; height: 115px; overflow: hidden; border: 1px solid #e1e1e1; }
.employee-list dd			{ font-size: 12px; }
.employee-list dd p			{ position: relative; padding-left: 60px; line-height: 1.5em; margin-bottom: 5px; }
.employee-list dd strong	{ display: block; position: absolute; top: 0; left: 0; width: 50px; background: #49a5bf; border-radius: 3px; color: #fff; text-align: center; }

@media all and (max-width: 450px) {
	.employee-list dd p.both			{ padding-left: 0; margin-top: 30px; background: #f1f1f1; border-radius: 3px; border: 1px solid #eaeaea; padding: 8px; }
	.employee-list dd p.both strong		{ top: -25px; }
}


/***********************************************
	로그인
************************************************/

.loginBox							{ position: relative; max-width: 350px; margin: 100px auto; }
.loginBox input[type="text"],
.loginBox input[type="password"]	{ width: 100%; border: 1px solid #d1d1d1; border-radius: 3px; height: 50px; padding-left: 50px; box-sizing: border-box; }
.loginBox input[type="submit"]	{ width: 100%; }

.loginBox p					{ position: relative; padding-left: 30px; margin-bottom: 10px; min-height: 20px; }
.loginBox p:before			{ content: "\ea08"; font-family: 'icon'; position: absolute; top: 0; left: 0; font-size: 20px; color: #f39800; }

.loginBox fieldset			{ position: relative; margin-bottom: 5px; }
.loginBox fieldset label	{ display: block; position: absolute; width: 40px; height: 50px; overflow: hidden; text-indent: -999px; }

.loginBox fieldset label:before					{ display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 50px; text-indent: 0; font-size: 20px; text-align: center; font-family: 'icon'; color: #d1d1d1; }
.loginBox fieldset.user-id-box label:before		{ content: "\e971"; }
.loginBox fieldset.user-pw-box label:before		{ content: "\e98d"; font-size: 18px; }

.loginBox fieldset input.required		{ padding-left: 50px !important; background: none !important; }

.loginBox fieldset.on label:before		{ color: #49a5bf; }

@media all and (max-height: 920px) { 
	.loginBox	{ margin: 50px auto; }
}

@media all and (max-height: 800px) { 
	.loginBox	{ margin: 20px auto; }
}



/***********************************************
	회원가입
************************************************/

#agreement			{ position: relative; margin-top: 30px; }

#agreement h4			{ position: relative; font-size: 16px; padding-left: 15px; margin-bottom: 10px;}
#agreement h4:before	{ content: ""; display: block; position: absolute; left: 0; top: 50%; margin-top: -5px; height: 10px; width: 5px; background: #49a5bf; }
#agreement fieldset		{ margin: 10px 0 30px; text-align: right; }
#agreement .agree-con		{ display: block; position: relative; width: 100%; height: 200px; box-sizing: border-box; border: 1px solid #d1d1d1; padding: 10px 10px 50px 10px; line-height: 1.6em; word-break: break-all; overflow: hidden; }
#agreement .agree-con pre	{ font-size: 12px;
	display: block; position: relative;  word-break: break-all;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-all;
}
#agreement .agree-con .ui-btn	{ position: absolute; bottom: 0; left: 0; right: 0; border-radius: 0; }



/***********************************************
	설문조사
************************************************/

.ui-survey-box					{ position: relative; }
.ui-survey-box .ui-title		{ font-size: 14px; padding: 10px; background: #49a5bf; color: #fff; }
.ui-survey-box #board_page_info	{ border-top-width: 0px; }

.ui-survey-answer		{ position: relative; margin-bottom: 30px; }
.ui-survey-item			{ position: relative; margin-bottom: 10px; }
.ui-survey-item h4		{ position: relative; padding-left: 35px; font-size: 15px; margin-bottom: 10px; font-weight: 400; }
.ui-survey-item h4:before	{ content: "?"; display: block; position: absolute; top: 0; left: 0; font-size: 16px; line-height: 20px; width: 25px; height: 25px; text-align: center; vertical-align: middle; border-radius: 9.0em; margin-right: 10px; color: #fff; background: #49a5bf; overflow: hidden; box-sizing: border-box; border: 2px solid #fff; }
.ui-survey-item h4:before	{ 
	-webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.49);
	-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.49);
	box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.49);
}

.ui-survey-item dl		{ position: relative; clear: both; overflow: hidden; padding-right: 100px; margin: 5px 0; }
.ui-survey-item dl:before	{ content: ""; display: block; position: absolute; left: 10px; right: 10px; top: 11px; height: 0px; border-bottom: 1px dashed #d1d1d1; }
.ui-survey-item dl dt	{ display: block; position: relative; float: left; background: #fff; padding-right: 10px; }
.ui-survey-item dl dd	{ display: block; position: absolute; top: 0; right: 0; background: #fff; padding: 0 10px; }




/***********************************************
	*사이트맵*
************************************************/

/*사이트맵*/
.sitemap {}
.sitemap a {display:block; }
.sitemap > ul > li {float:left; width:33%;}
.sitemap > ul > li > a {border: 3px solid #49a5bf; color:#49a5bf; border-radius:5px; width:90%; text-align:center; padding:10px 0; font-size:16px; font-weight:bold; margin-bottom:10px;}
.sitemap > ul > li > ul > li {margin-bottom:5px;}
.sitemap > ul > li > ul > li > a {border: 1px solid #dadada; color:#333; border-radius:5px; width:90%; font-weight:bold; padding:5px 5%;}
.sitemap > ul > li > ul > li > ul > li {position: relative; padding:0; font-size:13px; color: #4d4d4d; padding:2px 0 2px 13px; line-height:20px; margin-left:10px;}
.sitemap > ul > li > ul > li > ul > li:before	{content: ""; display: block; position: absolute; width:6px; height:6px; background:#666; top:12px; margin-top:-3px; left: 0; border-radius:50%; }

/*************************************************************
	certify Style
**************************************************************/


.certify-box				{ position: relative; max-width: 500px; margin: 20px auto 50px; overflow: hidden; }
.certify-box > div			{ display: block; position: relative; width: 50%; float: left; box-sizing: border-box; padding: 20px; height: 300px; z-index: 0; }
.certify-box > div *		{ position: relative; }

.certify-box > div:before	{ content: ""; display: block; position: absolute; top: 10px; left: 10px; bottom: 10px; right: 10px; background: #fff; border: 1px solid #dadada; border-radius: 5px; z-index: -1; }
.certify-box > div:after	{ content: ""; display: block; position: absolute; top: 10px; left: 10px; height: 120px; right: 10px; background: url('/resources/images/cmm/bak_marum_pattern.png') #49a5bf; border-top-left-radius: 5px; border-top-right-radius: 5px; z-index: -1; }

.certify-box > div p			{ text-align: center; font-size: 18px; font-weight: bold; color: #fff; height: 110px; box-sizing: border-box; padding-top: 40px; margin-bottom: 0; }
.certify-box > div p:before		{ content: ""; display: block; position: absolute; width: 80px; height: 80px; left: 50%; top: 80px; margin-left: -40px; border-radius: 9.0em; background-color: #49a5bf; background-repeat: no-repeat; background-position: 50% 50%; border: 5px solid #fff; box-sizing: border-box; }

.certify-box > div span			{ display: block; padding: 55px 10px 10px; font-size: 13px; height: 50px; color: #888; text-align: center; }
.certify-box > div a			{ display: block; position: relative; border-radius: 4px; background: #49a5bf; color: #fff; text-align: center; padding: 8px 0; margin-top:30px;}

#certify_mobile p:before		{ background-image: url('/resources/images/cmm/ico_certofy_mobile.png'); }
#certify_ipin p:before		{ background-image: url('/resources/images/cmm/ico_certofy_ipin.png'); }