@charset "UTF-8";
	


/***********************************************************************************************
	서체지정
***********************************************************************************************/
	body, form, table, a, input, select, textarea, button, pre{
		font-family: "MalgunGothic", "돋움", "dotum";
		font-size: 12px;
		color: #444;
	}



/***********************************************************************************************
	기본값 셋팅
***********************************************************************************************/
	body, html{
		-webkit-font-smoothing: antialiased;
		-webkit-text-size-adjust: 100%;
	}
	
	*{ box-sizing: content-box }


	/* reset */
	html,body,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,legend,table,caption,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 1em;
	}

	img{ max-width: 100% }
	
	ol, ul{ list-style: none }
	
	blockquote, q{ quotes: none }
	blockquote:before, blockquote:after, q:before, q:after{
		content: "";
		content: none;
	}

	table{
		border-collapse: collapse;
		border-spacing: 0;
	}

	caption, legend{
		font-size: 0;
		line-height: 0;
		overflow: hidden;
	}

	hr{ display: none }
	a{ text-decoration: none }
	em, address{ font-style: normal }
	input, select, img{ vertical-align: middle }

	input[type='radio'],
	input[type='checkbox']{
		display: inline-block;
		margin: -2px 1px 1px 0;
	}
	input[type="button"]{
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}

	button{ cursor: pointer }



/***********************************************************************************************
	공통 속성
***********************************************************************************************/
	/* pattern */
	.blind{
		position:absolute;
		left:-10000px;
		top:-10000px;
		width:1px;
		height:1px;
		overflow:hidden;
	}

	.blind2{
		display: inline-block !important;
		position: absolute;
		top: 0;
		left: 0;
		width: 1px !important;
		height: 1px !important;
		margin: 0 !important;
		font-size: 0 !important;
		line-height: 0 !important;
		overflow: hidden;
		visibility: hidden;
	}

	.error-msg{
		margin: 10px 0;
		padding: 8px;
		border: 1px solid #E2A8A8;
		border-radius: 5px;
		background: #FEF1F1;
		text-align: center;
		line-height: 1.6em;
		color: #D46D6D;
	}



	.display-none{ display: none !important }
	.inline-block{ display: inline-block !important }
	.border-box-size{ box-sizing: border-box !important }

	.relative{ position: relative !important }
	.absolute,
	.absolute-left,
	.absolute-right,
	.absolute-top-left,
	.absolute-top-right,
	.absolute-bottom-left,
	.absolute-bottom-right{ position: absolute !important }

	.absolute-top,
	.absolute-top-left,
	.absolute-top-right{ top: 0 !important }

	.absolute-bottom,
	.absolute-bottom-left,
	.absolute-bottom-right{ bottom: 0 !important }

	.absolute-right,
	.absolute-top-left,
	.absolute-bottom-left{ left: 0 !important }

	.absolute-right,
	.absolute-top-right,
	.absolute-bottom-right{ right: 0 !important }

	.z99{ z-index: 99 !important }


	/* margin */
	.mg10{ margin: 10px !important }

	.mt0{ margin-top: 0 !important }
	.mt5{ margin-top: 5px !important }
	.mt10{ margin-top: 10px !important }
	.mt15{ margin-top: 15px !important }
	.mt20{ margin-top: 20px !important }
	.mt30{ margin-top: 30px !important }
	.mt40{ margin-top: 40px !important }
	.mt50{ margin-top: 50px !important }
	.mt60{ margin-top: 60px !important }
	.mt80{ margin-top: 80px !important }
	.mt1em{ margin-top: 1em !important }
	.mt2em{ margin-top: 2em !important }
	.mt3em{ margin-top: 3em !important }
	.mt4em{ margin-top: 4em !important }
	.mt-2em{ margin-top: -2em !important }

	.ml5{ margin-left: 5px !important }
	.ml10{ margin-left: 10px !important }
	.ml16{ margin-left: 16px !important }
	.ml20{ margin-left: 20px !important }
	.ml25{ margin-left: 25px !important }
	.ml30{ margin-left: 30px !important }
	.ml1p{ margin-left: 1% !important }
	.ml2p{ margin-left: 2% !important }
	.ml3p{ margin-left: 3% !important }
	.ml5p{ margin-left: 5% !important }
	.ml10p{ margin-left: 10% !important }
	.ml1em{ margin-left: 1em !important }
	.ml5em{ margin-left: 5em !important }

	.mr5{ margin-right: 5px !important }
	.mr10{ margin-right: 10px !important }
	.mr15{ margin-right: 15px !important }
	.mr20{ margin-right: 20px !important }
	.mr25{ margin-right: 25px !important }
	.mr30{ margin-right: 30px !important }
	.mr1p{ margin-right: 1% !important }
	.mr2p{ margin-right: 2% !important }
	.mr1em{ margin-right: 1em !important }
	.mr2em{ margin-right: 2em !important }
	.mr3em{ margin-right: 3em !important }

	.mb0{ margin-bottom: 0 !important }
	.mb5{ margin-bottom: 5px !important }
	.mb10{ margin-bottom: 10px !important }
	.mb20{ margin-bottom: 20px !important }
	.mb30{ margin-bottom: 30px !important }
	.mb40{ margin-bottom: 40px !important }
	.mb50{ margin-bottom: 50px !important }
	.mb60{ margin-bottom: 60px !important }
	.mb1em{ margin-bottom: 1em !important }
	.mb1\.5em{ margin-bottom: 1.5em !important }
	.mb2em{ margin-bottom: 2em !important }
	.mb3em{ margin-bottom: 3em !important }
	.mb4em{ margin-bottom: 4em !important }
	.mb5em{ margin-bottom: 5em !important }


	/* padding */
	.pd10{ padding: 0 10px !important }

	.pl1p{ padding-left: 1% !important }

	.pd0\.5em{ padding: 0.5em !important }
	.pd1em{ padding: 1em !important }
	.pd2em{ padding: 2em !important }
	.pt1em{ padding-top: 1em !important }
	.pt2em{ padding-top: 2em !important }
	.pt3em{ padding-top: 3em !important }
	.pt4em{ padding-top: 4em !important }
	.pt5em{ padding-top: 5em !important }
	.pl1em{ padding-left: 1em !important }
	.pl2em{ padding-left: 2em !important }
	.pl2\.5em{ padding-left: 2.5em !important }
	.pl3em{ padding-left: 3em !important }
	.pr1em{ padding-right: 1em !important }
	.pr2em{ padding-right: 2em !important }
	.pr5em{ padding-right: 5em !important }
	.pr9em{ padding-right: 9em !important }
	.pb1em{ padding-bottom: 1em !important }
	.pb2em{ padding-bottom: 2em !important }
	.pb3em{ padding-bottom: 3em !important }
	.pb4em{ padding-bottom: 4em !important }
	.pb5em{ padding-bottom: 5em !important }

	.pt0{ padding-top: 0 !important }
	.pl0{ padding-left: 0 !important }
	.pb0{ padding-bottom: 0 !important }


	/* width */
	.w80{ width: 80px }
	.w210{ width: 210px }
	.w300{ width: 300px !important }

	.w3em{ width: 3em !important }
	.w4em{ width: 4em !important }
	.w5em{ width: 5em !important }
	.w7em{ width: 7em !important }
	.w8em{ width: 8em !important }
	.w12em{ width: 12em !important }
	.w14em{ width: 14em !important }
	.w16em{ width: 16em !important }
	.w18em{ width: 18em !important }
	.w20em{ width: 20em !important }
	.w21em{ width: 21em !important }
	.w22em{ width: 22em !important }
	.w24em{ width: 24em !important }
	.w28em{ width: 28em !important }

	.w10p{ width: 10% !important }
	.w15p{ width: 15% !important }
	.w20p{ width: 20% !important }
	.w25p{ width: 25% !important }
	.w30p{ width: 30% !important }
	.w31p{ width: 31% !important }
	.w32p{ width: 32% !important }
	.w35p{ width: 35% !important }
	.w40p{ width: 40% !important }
	.w42p{ width: 42% !important }
	.w45p{ width: 45% !important }
	.w49p{ width: 49% !important }
	.w49\.5p{ width: 49.5% !important }
	.w50p{ width: 50% !important }
	.w60p{ width: 60% !important }
	.w65p{ width: 65% !important }
	.w70p{ width: 70% !important }
	.w75p{ width: 75% !important }
	.w80p{ width: 80% !important }
	.w85p{ width: 85% !important }
	.w90p{ width: 90% !important }
	.w100p{ width: 100% !important }

	.min50{ min-width: 50px !important }
	.min80{ min-width: 80px !important }
	.min200{ min-width: 200px !important }
	.min230{ min-width: 230px !important }
	.min250{ min-width: 250px !important }
	.min260{ min-width: 260px !important }
	.min280{ min-width: 280px !important }
	.min300{ min-width: 300px !important }
	.min360{ min-width: 360px !important }
	.min720{ min-width: 720px !important }
	.min760{ min-width: 760px !important }
	.min30p{ min-width: 30% !important }
	.min5\.5em{ min-width: 5.5em !important }

	.max80{ max-width: 80px !important }
	.max90{ max-width: 90px !important }
	.max100{ max-width: 100px !important }
	.max670{ max-width: 670px !important }
	.max15p{ max-width: 15% !important }
	.max30p{ max-width: 30% !important }
	.max35p{ max-width: 35% !important }
	.max40p{ max-width: 40% !important }
	.max45p{ max-width: 45% !important }
	.max49p{ max-width: 49% !important }
	.max50p{ max-width: 50% !important }
	.max55p{ max-width: 55% !important }
	.max60p{ max-width: 60% !important }
	.max70p{ max-width: 70% !important }
	.max80p{ max-width: 80% !important }
	.max85p{ max-width: 85% !important }
	.max90p{ max-width: 90% !important }
	.max100p{ max-width: 100% !important }

	/* height */
	.h400{ height: 400px !important }
	.h6em{ height: 6em !important }
	.max-h200{ max-height: 200px !important }
	.max-h90p{ max-height: 90% !important }

	.margin-auto,
	.margin-auto-left{ margin-left: auto !important }
	.margin-auto,
	.margin-auto-right{ margin-right: auto !important }

    .left15p{ left: 15% !important }
	.left20p{ left: 20% !important }
	.left25p{ left: 25% !important }
	.left30p{ left: 30% !important }
	.left35p{ left: 35% !important }
	.left40p{ left: 40% !important }
	.left45p{ left: 45% !important }
	.left50p{ left: 50% !important }
	.left60p{ left: 60% !important }
	.left75p{ left: 75% !important }
	.left80p{ left: 80% !important }
	.left90p{ left: 90% !important }

	.w16_5p{ width: 16.5% !important }
    .left16_7p{ left: 16.7% !important }
    .left33_4p{ left: 33.4% !important }
    .left50_1p{ left: 50.1% !important }
    .left66_8p{ left: 66.8% !important }
    .left83_5p{ left: 83.5% !important }
	.icon-search{height: 100%;cursor: pointer;}
	
	/* align */
	.text-center{ text-align: center !important }
	.text-left{ text-align: left !important }
	.text-right{ text-align: right !important }
	.text-justify{ text-align: justify !important }
	.align-left{ float: left !important }
	.align-right{ float: right !important }
	.vertical-middle{ vertical-align: middle !important }
	.vertical-top{ vertical-align: top !important }
	.vertical-bottom{ vertical-align: bottom !important }
	
	.clear-fix{ display: inline-block }
	.clear-fix:after{
		display: block;
		clear: both;
		height: 0;
		content: ".";
		visibility: hidden;
	}
	
	.clear-fix{ display: block }
	html .clear-fix{ height: 1% }



	.box_area_01{ display:inline-block; vertical-align:middle; width:100%; height:100%; margin-bottom:30px; border:1px solid #eee}
	.box_area_02{ display:inline-block; vertical-align:middle; width:320px; height:250px; margin:10px 10px 0 0;  float:left; border:1px solid #eee}


	
	/* font */
	.font-11{ font-size: 11px !important }
	.font-12{ font-size: 12px !important }
	.font-13{ font-size: 13px !important }
	.font-14{ font-size: 14px !important }
	.fon-15{ font-size: 15px !important }
	.fon-16{ font-size: 16px !important }
	.font-bold{ font-weight: bold !important }
	.font-normal{ font-weight: normal !important }
	.font-ellipsis{
		display: block;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.small{
		font-size: 11px;
		letter-spacing: -1px;
		color: #999;
	}

	.font-minimize{ font-size: 0.75em !important }
	.font-small{ font-size: 0.85em !important }
	.font-big{ font-size: 1.25em !important }
	.nowrap{ white-space: nowrap !important }
	.autowrap{ white-space: normal !important }

	
	/* img */
	.img-response{
		display: block;
		max-width: 100%;
		height: auto;
	}
	.img-round{
		border-radius: 6px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
	}
	.circle{
		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
	}


	/* color */
	.c-red{ color: red }
	.c-green{ color: green }
	.c-orange{ color: orange }
	.c-orange{ color: orange }

	.c-white{ color: #FFF !important }
	.c-gray{ color: #999 !important }
	.c-navy{ color: #174D75 !important }
	.c-blue{ color: #0069BA !important }
	.c-darkblue{ color: #004EA2 !important }
	.c-carrot{ color: #DC4E41 !important }
	.c-require{ color: #D46D6D !important }



	.bg-white{ background-color: #FFF !important }
	.bg-whitegray{ background-color: #FCFCFC !important }
	.bg-gray{ background-color: #F7F7F7 !important }
	.bg-darkgray{ background-color: #8B97A3 !important }
	.bg-skyblue{ background-color: #E8F0F7 !important }

	.border1-gray{ border: 1px solid #DDD !important }
	.border-top2-white{ border-top: 2px solid #FFF !important }


	
	/* form */
	input.text,
	input[type=text],
	input[type=password]{
		min-width: 28px;
		width: 15%;
		height: 2em;
		padding: 0.2em 0.6em;
		border: 1px solid #CCC;
		border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		line-height: 2.1em;
		color: #999;
	}
	input.text:focus,
	input[type=text]:focus,
	input[type=password]:focus{ border-color: #196AB3 }

	.input-lg{
		height: 35px;
		line-height: 35px;
	}

	:root select{ padding: 0 }
	select{
		width: 15%;
		min-width: 50px;
		min-height: 28px;
		padding-left: 0.5em;
		border: 1px solid #CCC;
		border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		color: #999;
	}

	textarea {
		width: 98.5%;
		min-height: 100px;
		padding: 0 5px;
		border: 1px solid #ccc;
		border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;color:#999;
		font-size: 12px;
		line-height: 1.6;
	}



	/* button */
	.btn{
		display: inline-block;
		height: 25px;
		margin-bottom: 0;
		padding: 0 15px;
		border: 1px solid transparent;
		border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		background-image: none;
		vertical-align: middle;
		text-align: center;
		font-weight: normal;
		white-space: nowrap;
		line-height: 25px;
		overflow: visible;
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		cursor: pointer;
	}
	.btn.btn-lg{
		height: 35px;
		line-height: 35px;
	}
	.btn.btn-sm{
		height: 20px;
		line-height: 20px;
	}
	
	.btn-default{
		border-color: #DDD;
		background: #FFF;
		color:#666;
	}
	.btn-default:hover,
	.btn-default:focus{ background: #EBEBEB }

	.btn-primary{
		background: #005AAB;
		color: #FFF;
	}
	.btn-primary:hover,
	.btn-primary:focus{ background: #196AB3 }

	.btn-gray{
		border-color: #DDD;
		background: #F7F7F7;
		color:#666;
	}
	.btn-gray:hover,
	.btn-gray:focus{ background: #EBEBEB }

	.btn-darkgray{
		border-color: #666;
		background: #959595;
		color: #FFF;
	}
	.btn-darkgray:hover,
	.btn-darkgray:focus{ background: #666 }

	.btn-darkblue{
		background: #879BB9;
		color: #FFF;
	}
	.btn-darkblue:hover,
	.btn-darkblue:focus{ background: #386FA7 }


	.link{
		display: inline !important;
		padding: 0 !important;
		border: 0 !important;
	}
	.link.color{ color: #386FA7 }
	.link:hover{
		text-decoration: underline;
		color: #386FA7;
	}


	/** 마우스 커서 **/	
	.cursor-pointer{ cursor: pointer !important }


	/** 고정크기 테이블 **/	
	.fixed-table{ table-layout: fixed !important }


	/** 기기별 display **/	
	.only-mobile{ display: none !important }
	.only-pc{}





/***********************************************************************************************
	MEDIA
***********************************************************************************************/
@media all and (max-width: 720px)
{
	.only-mobile{ display: block !important }
	table.only-mobile{ display: table !important }
	tr.only-mobile{ display: table-row !important }
	th.only-mobile,
	td.only-mobile{ display:  table-cell !important }
	img.only-mobile{ display: inline !important }
	.only-pc{ display: none !important }
}