@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
/* IE 6 does not support max-width so default to width 100% */
.ie6 img{
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/
html, body, div, span, 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, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video, input{
	margin:0;
	padding:0;
	border:0;
	outline:0;
}

ol, ul{
	list-style:none;
}
img, object, embed, video{
	max-width:100%;
}

html{
	height:100%;
}
body{
	width:100%;
	height:100%;
	font-family:"Gadget",돋움, Dotum, arial,calibri, Helvetica, sans-serif;
	/*font-size:12px;*/
	line-height:normal;
	padding:0;
	margin:0 auto;
}
form{
	width:100%;
	height:100%;
}

.fluid{
	clear:both;
	margin-left:0;
	width:100%;
	float:left;
	display:block;
}

.fluidList{
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;       
}

/* Mobile Layout:480px and below. */  
.login_wrap{
	margin-left:auto;
	margin-right:auto;
	width:100%;
	padding-left:0%;
	padding-right:0%;
	clear:none;
	float:none;
	border-top:#55b4a7 4px solid;
}
.logo{
	height:80px;
	background:url(common/logo.gif) no-repeat center 25px;
	background-size:auto 30px;
}
.img_zone{
	padding-left:2%;
	padding-right:2%;
	margin:0 auto;
	text-align:center;
	margin-bottom:10px;
}
.login_zone{
	padding-left:2.1%;
	padding-right:2.1%;
}
.login_box{
	width:100%;
	border:#dddddd 1px solid;
	border-radius:8px;
	float:left;
}
.pad{
	padding:35px 15px 0;
	width:270px;
	height:175px;
	margin:0 auto;
}
.input-box{	
    position:relative;
	width:270px;
	float:left;	
}
.input{
	width:185px;
	overflow:hidden;
	float:left;
	padding-bottom:4px;
}
.radius_input{
	width:162px;
	height:31px;
	line-height:23px;
	padding:0 10px;
	border:1px solid #a9a9a9;
	color:#555;
	border-radius:.3em;
	-webkit-border-radius:.3em;
	-moz-border-radius:.3em;
	box-shadow:#ffffff .1em .1em .1em inset;
	-webkit-box-shadow:#ffffff .1em .1em .1em inset;
	-moz-box-shadow:#ffffff .1em .1em .1em inset;
	/*background:no-repeat 10px;*/
}
.bg_input_id{
	background:url(common/input_bg_t.gif) no-repeat 10px;
}
.bg_input_pw{
	background:url(common/input_bg_b.gif) no-repeat 10px;
}
.log_bnt{
	width:78px;
	height:78px;
	position:absolute;
	top:0;
	right:0;
	float:right;
}
.l_p_pc{
	display:none;
}
.l_p_mob{
	width:100%;
	padding:0px 0px;
	float:left;
}
.l_p2{
	width:100%;
	padding:10px 0px 13px;
	float:left;
	color:#555;
}
.f_r{
	display:none;
}

.b_none{
	float:right;
}
/*체크박스 */
label{display:block;padding-bottom:0;font-size:12px;cursor:pointer;}
label.c_on{background:url(icon/check.png) no-repeat bottom left;}
.i_check{padding-left:45px;height:35px;font-size:100%;background:url(icon/check.png) no-repeat top left;}
.i_check span{display:block;width:100px;height:20px;padding:9px 0px 0px 0px;}
.i_check input{position:absolute;left:-9999px}

/* 블루2 버튼 L2 */
.btn_blueL2_typeC{position:relative;float:left;height:70px;overflow:hidden;padding-left:2px;background:#55b4a7;
border-radius:3px;border:1px solid #3d998c;}
.btn_blueL2_typeC button, .btn_blueL2_typeC a, .btn_blueL2_typeC span, .btn_blueL2_typeC input{display:block;color:#fff !important;border:none;cursor:pointer;}
.btn_blueL2_typeC a{height:16px;padding:27px 15px 0px 14px;text-decoration:none;font-size:90%;}
.btn_blueL2_typeC span{height:12px;padding:32px 20px 30px 18px;}
.btn_blueL2_typeC button{height:70px;padding:0 20px 0 18px;}

/* 모바일용 탭 선택버튼 */
.top_tab{width:98%;overflow:hidden;/*margin:0px auto 0;*/ border:1px solid #6e6e6e;border-radius:6px;background:#525252;float:left;}
.top_tab li{float:left;width:50%;}
.top_tab li a{display:block;padding-top:5px;text-align:center;font-size:100%;font-weight:bold;text-decoration:none;vertical-align:middle;padding:10px 0;}
.top_tab li a.list{border:1px solid #525252;border-radius:5px;color:#6b6b6b;background:#525252;}
.top_tab li a.list_on{border:1px solid #ffffff;border-radius:5px;color:#2a57a5;background:#f7f7f5;}

.zeroMargin_mobile{
    margin-left:0;
}
.hide_mobile{
    display:none;
}
.invalid_num{
	width:100%;
	height:25px;
	padding:5px 0px;
	color:red;
	font-size:90%;	
	float:left;
}
footer{
    display:block;
    margin:0;
	text-align:center;
	color:#9d9d9d;
	font-size:90%;	
	float:left;
	width:100%;
}
#ft_pc{
}
#ft_pc p{
	display:none;
}
#ft_mobile{
}
#ft_mobile p{
	padding:30px 0;
	display:block;
}
/* Tablet Layout:481px to 768px. Inherits styles from:Mobile Layout. */
@media only screen and (min-width:480px){
	.login_wrap{
		width:100%;
		padding-left:0%;
		padding-right:0%;
		clear:none;
		float:none;
		margin-left:auto;
	}
	.logo{
	}
	.right_img{
		display:none;
	}
	.zeroMargin_tablet{
	    margin-left:0;
	}
	.hide_tablet{
	    display:none;
	}
	.pad{
		padding:35px 15px 0;
		width:380px;
		margin:0 auto;
	}
	.input-box{	
	    position:relative;
		width:380px;
		float:left;		
	}
	.input{
		width:295px;
		overflow:hidden;
		float:left;
		padding-bottom:4px;	
	}
	
	.radius_input{
		width:272px;
	}
	
	footer{
	    display:block;
	    margin:0;
	    padding:0;
		text-align:center;
		color:#9d9d9d;
		font-size:90%;	
	}
	#ft_pc{
	}
	#ft_pc p{
		display:none;
	}
	#ft_mobile{
	}
	#ft_mobile p{
		display:block;
	}
}

/* Desktop Layout:769px to a max of 1232px.  Inherits styles from:Mobile Layout and Tablet Layout. */
@media only screen and (min-width:769px){
	.login_wrap{
		width:100%;/*88.5%;*/
		max-width:100%;
		padding-left:0%;
		padding-right:0%;
		margin:auto;
		clear:none;
		float:none;
		margin-left:auto;
	}
	.logo{
		height:80px;
		background:url(common/logo.gif) no-repeat center 25px;
	}
	.img_zone{
		padding-left:0%;
		padding-right:0%;
		margin:0 auto;
		width:990px;		
		display:block;
		height:374px;
		overflow:hidden;
		margin-bottom:13px;
	}

	.login_zone{
		padding-left:0%;
		padding-right:0%;
		margin:0 auto;
		width:988px;
	}
	.login_box{
		height:80px;
		width:967px;
		padding:0 20px 0 0;
	}
	.pad{
		padding:23px 0px 23px 23px;
		float:left;
		width:auto;
		margin:none;
	}
	.input{
		width:200px;
		overflow:hidden;
		padding-bottom:0px;
	}
	.input-box{
		width:478px;
		float:left;
	}
	.log_bnt{
		width:78px;
		height:33px;
		float:right;
	}
	.l_p_pc{
		width:80px;
		padding:5px 0;
		float:left;
		display:block;
	}
	.l_p_mob{
		display:none;
	}
	.l_p2{
		padding:10px 0px 0px 14px;
		float:left;
		width:200px;
	}
	.b_none{
		padding:0 0 0 0px;
		float:right;
		display:block;
	}
	.c_none{
		padding:0 0 0 60px;
		float:right;
		display:block;
	}	
	.f_r{
		display:block;
	}
	.radius_input{
		width:174px;
	}
	
	/* 체크박스 */
	.i_check{padding-left:20px;height:20px; font-size:12px;}
	label.c_on{background:url(icon/check_on.png) no-repeat;}
	.i_check{background:url(icon/check_off.png) no-repeat;}
	.i_check span { display:block; width:70px; height:12px; padding:2px 0px 0px 0px;}	
	
		
	/* 블루2 버튼 L2 */
	.btn_blueL2_typeC{position:relative;float:left;height:31px;overflow:hidden;padding-left:2px;background:#55b4a7;
	border-radius:3px;border:1px solid #3d998c;}
	.btn_blueL2_typeC button, .btn_blueL2_typeC a, .btn_blueL2_typeC span, .btn_blueL2_typeC input{display:block;color:#fff !important;border:none;cursor:pointer;}
	.btn_blueL2_typeC a{height:12px;padding:10px 20px 11px 18px;font-size:12px;}
	.btn_blueL2_typeC span{height:12px;padding:10px 20px 11px 18px;}
	.btn_blueL2_typeC button{height:31px;padding:0 20px 0 18px;}
		
	/* 화이트1 버튼 M */
	.btn_whiteM_typeA{position:relative;float:left;height:32px;overflow:hidden;padding-left:2px;background:url(button/btn_white_M2.png) no-repeat -1px -1px;
	border-radius:3px;border:1px solid #c8c8c8;}
	.btn_whiteM_typeA button, .btn_whiteM_typeA a, .btn_whiteM_typeA span, .btn_whiteM_typeA input{display:block;color:#555 !important;border:none cursor:pointer;}
	.btn_whiteM_typeA a{height:12px;padding:10px 12px 11px 12px}
	.btn_whiteM_typeA a.pwre{height:12px;padding:10px 41px 11px 0px;text-decoration:none;font-size:12px;padding-left:12px;}
	
	/* 화이트2 버튼 M */
	.btn_whiteM_typeB {position:relative;float:left;height:32px;overflow:hidden;padding-left:2px;background:url(button/btn_white_M2.png) no-repeat -1px -1px;
	border-radius:3px;border:1px solid #c8c8c8; margin-left:3px;}
	.btn_whiteM_typeB button, .btn_whiteM_typeB a, .btn_whiteM_typeB span, .btn_whiteM_typeB input{display:block;color:#555 !important;border:none cursor:pointer;}
	.btn_whiteM_typeB a{height:12px;padding:10px 32px 11px 30px}
	.btn_whiteM_typeB a.pwre{height:12px;padding:10px 12px 11px 0px;text-decoration:none;font-size:12px;padding-left:12px;}
	
	/* 아이콘 로그인 */
	.pwre em{position:absolute;top:0;right:13px;width:21px;height:100%;text-indent:-9999em;background:url('icon/icon_pw_re.gif') no-repeat right 50%;}
	/* .pwre em{position:absolute;top:0;right:15px;width:30px;height:100%;text-indent:-9999em;background:url('icon/icon_pw_re.gif') no-repeat right 50%;} */
	
	
	/* 셀렉터 */
	.select{display:inline-block;position:relative;z-index:999;background:#fff;line-height:normal;vertical-align:middle;}
	.select *{margin:0;padding:0;font-size:12px;font-family:Tahoma,Sans-serif;cursor:pointer;}
	.my_value{
		overflow:visible;position:relative;top:0;left:0;z-index:2;height:25px;border:1px solid #c8c8c8;text-indent:8px;
		border-radius:.3em;
		-moz-border-radius:.3em;
		-webkit-border-radius:.3em;
		background:transparent;
		background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#dedede));
		background:-moz-linear-gradient(top,  #fff,  #dedede);
		background-image:-o-linear-gradient(#fff,#dedede);	
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#dedede');
		font:12px/100% '돋움',Dotum,sans-serif;color:#555;text-align:left;text-decoration:none;vertical-align:baseline;zoom:1;outline:none;cursor:pointer;
	}
	
	.select.open .my_value,.select .my_value.outLine{border:1px solid #c8c8c8;}
	.select button.my_value{width:100%;height:25px;*padding-left:5px;text-indent:5px;*text-indent:0;}
	.select .ctrl{position:absolute;top:2px;right:3px;z-index:10;width:0;height:0;background:#fff;background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#dedede));background:-moz-linear-gradient(top,  #fff,  #dedede);background-image:-o-linear-gradient(#fff,#dedede);color:#555;filter:rogid:DXImageTransform.Microsoft.gradient(startColorstr='#fff',endColorstr='#dedede');}
	.select .arrow{position:absolute;top:-2px;right:1px;z-index:20;width:20px;height:25px;border-left:1px solid #c8c8c8;background:url(icon/select_arrow.gif) no-repeat 50% 50%;}
	.select ul{overflow:hidden;position:absolute;top:25px;left:0;width:100%;border:0;border-top:1px solid #c8c8c8;border-bottom:1px solid #c8c8c8;background:#fff;list-style:none;-webkit-border-radius:.3em;-moz-border-radius:.3em;}
	.select ul.a_list{display:none;}
	.select.open ul.a_list{display:block;}
	.select ul.i_list{left:-2000%;}
	.select.open ul.i_list{left:0;}
	.select li{overflow:hidden;position:relative;height:18px;border-left:1px solid #c8c8c8;border-right:1px solid #c8c8c8;white-space:nowrap;width:98%;}
	.select li input.option{position:absolute;width:100%;height:20px;line-height:20px;}
	.select li label{position:absolute;top:0;left:0;width:100%;height:18px;background:#fff;line-height:18px;color:#767676;text-indent:8px;*text-indent:6px;}
	.select li a{display:block;height:18px;background:#fff;line-height:18px;color:#767676;text-decoration:none;text-indent:8px;*text-indent:6px;}
	.select li.hover *{background:#999;color:#fff;}
	
	.zeroMargin_desktop{
	    margin-left:0;
	}
	.hide_desktop{
	    display:none;
	}
	footer{
		font-size:11px;
	}
	#ft_pc{
	}
	#ft_pc p{
		display:block;
		padding:30px 0;
	}
	#ft_mobile{
	}
	#ft_mobile p{
		display:none;
	}
}
