@charset "utf-8";
/* ************** font ************** */
@font-face {
  font-family: 'NanumSquare';
  font-style: normal;
  font-weight: 400;
  src: url(/css/portal/font/NanumSquareR.eot);
  src: url(/css/portal/font/NanumSquareR.eot?#iefix) format('embedded-opentype'),
       url(/css/portal/font/NanumSquareR.woff2) format('woff2'),
       url(/css/portal/font/NanumSquareR.woff) format('woff'),
       url(/css/portal/font/NanumSquareR.ttf) format('truetype');
}
@font-face {
  font-family: 'NanumSquare';
  font-style: normal;
  font-weight: 700;
  src: url(/css/portal/font/NanumSquareB.eot);
  src: url(/css/portal/font/NanumSquareB.eot?#iefix) format('embedded-opentype'),
	   url(/css/portal/font/NanumSquareB.woff2) format('woff2'),
       url(/css/portal/font/NanumSquareB.woff) format('woff'),
       url(/css/portal/font/NanumSquareB.ttf) format('truetype');
}
@font-face {
  font-family: 'NanumSquare';
  font-style: normal;
  font-weight: 800;
  src: url(/css/portal/font/NanumSquareEB.eot);
  src: url(/css/portal/font/NanumSquareEB.eot?#iefix) format('embedded-opentype'),
       url(/css/portal/font/NanumSquareEB.woff) format('woff'),
       url(/css/portal/font/NanumSquareEB.ttf) format('truetype');
}
@font-face{
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url(/css/portal/font/NanumGothic-Regular.eot);
  src: url(/css/portal/font/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
       url(/css/portal/font/NanumGothic-Regular.woff2) format('woff2'),
       url(/css/portal/font/NanumGothic-Regular.woff) format('woff'),
	   url(/css/portal/font/NanumGothic-Regular.ttf) format('truetype');
}
@font-face{
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 700;
  src: url(/css/portal/font/NanumGothic-Bold.eot);
  src: url(/css/portal/font/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
       url(/css/portal/font/NanumGothic-Bold.woff2) format('woff2'),
       url(/css/portal/font/NanumGothic-Bold.woff) format('woff'),
	   url(/css/portal/font/NanumGothic-Bold.ttf) format('truetype');
}

/* http://meyerweb.com/eric/tools/css/portal/reset/
   v2.0 | 20110126
   License: none (pftextareaublic domain)
*/

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, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,
button, textarea, input, select {
	margin: 0;
	padding: 0;
	border: 0;
	/* font-size: 100%; */
	font-size: 16px;
	/* font: inherit; */
	vertical-align: baseline;
	/* color: #1A1A1A; */
	font-family: 'Noto Sans KR', sans-serif;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block;}
html, body{
	/* height: 100%; */
	overflow: auto;
}
body {
    width:100%;
    /* height:100%; */
	line-height: 1.5;
	letter-spacing: -0.5px;
}
ol, ul {
	list-style: none;
    vertical-align:top;
    padding:0;
    margin:0;
}
li { vertical-align:top; list-style: none;}
li img	{ vertical-align:top;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none;}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
em, address { font-style:normal; }
img { border:0; vertical-align:top; max-width: 100%; height: auto;}
/* table	caption { display:none; } */
table caption { /*position:absolute;*/ font-size:0; width:0; height:0; line-height:0; }
fieldset { border:0; margin:0; padding:0;}
legend  { display:none; }
input, select{ vertical-align:middle; }
input, select{border: 1px solid #dcdcdc;}
button, input[type="button"] {color:#1A1A1A; cursor: pointer;}
button {/*color: inherit;*/ -webkit-appearance : none}
a{padding:0;margin:0;text-decoration:none;color:#1A1A1A;/*text-decoration: inherit; color: inherit;*/}
/* a:link, a:visited { color:#666; text-decoration:none;} */
a:hover, a:active { color:#1A1A1A;  text-decoration:none; }
/* a:active, a:focus { outline: 0;} */
hr {/* display:none;*/ height:0; }
textarea {padding: 8.5px 16px; resize: vertical; width: 100%; box-sizing:border-box; border-radius: 6px; border: 1px solid var(--color-gray40);}
select{
	padding:0 40px 0 20px;	
	background-color:#fff;
	background-image: url('/images/portal/icon/icon_down.svg');
	background-repeat: no-repeat;
	/* background-position: 90% 50%; */
	background-position: right 10px center;
	/* color: inherit; */
	color:#1A1A1A;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: 'Noto Sans KR', sans-serif;
	vertical-align: middle;
	box-sizing:border-box;
	border-radius: 6px;
	border: 1px solid var(--color-gray40);
}
select[disabled],
select[readonly] {
    background-color: var(--color-gray10) !important;
    color: var(--color-gray50) !important;
    border-color: var(--color-gray30) !important;
}
select::-ms-expand{display: none;}
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }

select:focus-visible,
a:focus-visible,
input:focus-visible,
button:focus-visible{outline:2px dashed #1A1A1A;box-sizing:border-box;outline-offset:-2px;}

[role=button]{
	cursor:pointer;
}
input[type="submit"]{cursor: pointer;}
input[type="text"],
input[type="password"]{
	padding: 8.5px 16px;
	font-size: var(--ft-body1);
	height: 2.5rem;
    line-height: 1.3;	
	background-color:#fff;
	vertical-align: middle;
	box-sizing:border-box;
	border-radius: 6px;
	border: 1px solid var(--color-gray40);
	box-sizing: border-box;
}
input[type="text"][disabled],
input[type="password"][disabled],
input[type="text"][readonly],
input[type="password"][readonly],
textarea[readonly],
textarea[disabled]{
    background-color: var(--color-gray10) !important;
    color: var(--color-gray50) !important;
    border-color: var(--color-gray30) !important;
    cursor: context-menu;
}
.input-wrap input[readonly]{border: 0 none !important;}

/*basic*/
.clear {clear:both;}
.clearfix:after{display: block; content: ''; clear: both;}
/* .fr{float: right;}
.fl{float: left;} */
.floatleft {float: left !important;}
.floatright {float: right !important;}
.floatnone {float: none !important;}

.align-center{text-align:center;}
.align-right{text-align:right !important;}
.align-left{text-align:left !important;}
.align-middle{vertical-align: middle !important;}

.text-underline{text-decoration:underline; text-underline-position: under;}

.vertical-middle{vertical-align: middle;}
.vertical-top{vertical-align: top;}

.hidden { display:none; position:absolute; font-size:0; width:0; height:0; line-height:0; background:none; }
.blind,
.sound_only { position: absolute; width: 1px; height: 1px; overflow: hidden; padding: 0; margin: -1px; border: 0; clip: rect(0,0,0,0)}
/* .sound_only { font-size: 0; position: absolute; top: -999999px; visibility: hidden;} */

#overlay,
.allmenu-overlay{ display: none; position: fixed; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.6); z-index: 9999;}

.dp-flex {display: flex; flex-wrap: nowrap; justify-content: space-between;}
.dp-inlineblock{display: inline-block;}

.table-fixed{table-layout:fixed;}

.a_link{color: #1e96c4;}
.a_link:hover{text-decoration: underline;}

/* font color */
/* .color-red{ color: #e20312;}
.color-gray{ color: #7f7f7f;} */
.ft-red{ color: #e20312;}
.ft-gray{ color: #626262;}
.ft-oran {color: #ef4849;}
.ft-oran2 {color: #e15610;}
.ft-blue {color: #0075be;}
.ft-blue2 {color: #0000ff;}
.ft-green {color: #58b8c8;}
.ft-yellow {color: #fff67b;}

/* font weight */
.fw400{font-weight: 400 !important;}
.fw500{font-weight: 500;}
.fw600{font-weight: 600;}
.bold{font-weight: bold;}

/* font size*/
.ft-size15 {font-size: 15px;}
.ft-size20 {font-size: 20px;}

/* margin */
.ml0{margin-left:0 !important;}
.ml5{margin-left:5px !important;}
.ml10{margin-left:10px !important;}
.ml20{margin-left:20px !important;}
.ml30{margin-left:30px !important;}
.ml50{margin-left:50px !important;}
.mr0{margin-right:0 !important;}
.mr5{margin-right:5px !important;}
.mr10{margin-right:10px !important;}
.mr20{margin-right:20px !important;}
.mr30{margin-right:30px !important;}
.mr50{margin-right:50px !important;}
.mt0{margin-top:0 !important;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt25{margin-top:25px !important;}
.mt30{margin-top:30px !important;}
.mt35{margin-top:35px !important;}
.mt40{margin-top:40px !important;}
.mt50{margin-top:50px !important;}
.mt55{margin-top:55px !important;}
.mt80{margin-top:80px !important;}
.mb0{margin-bottom:0px !important}
.mb10{margin-bottom:10px !important}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb25{margin-bottom:25px !important;}
.mb30{margin-bottom:30px !important;}
.mb35{margin-bottom:35px !important;}
.mb45{margin-bottom:45px !important;}
.mb50{margin-bottom:50px !important;}
.mb60{margin-bottom:60px !important;}
.mb65{margin-bottom:65px !important;}

/* padding */
.pd0{padding:0;}
.pl15{padding-left:15px;}
.pl30{padding-left:30px !important;}
.pl45{padding-left:45px !important;}
.pr10{padding-right:10px !important;}
.pt0{padding-top:0 !important;}
.pt30{padding-top:30px;}
.pb30{padding-bottom: 30px;}

/* width */
.width-auto {width: auto !important;}
.width100{width:100% !important;}
.width50{width:50% !important;}
.width30{width:30% !important;}

.width200{width:200px;}
.width150{width:150px;}
.width130{width:130px;}


.width100{width:100%;}

/* height */
.height-auto {height: auto !important; min-height: auto !important;}

/*display*/
.dp-block {display: block !important;}

/* word */
.word-break{word-break:break-all;}

	.indent0 {
		padding-left: 10px;
	}
	
	.indent1 {
		padding-left: 20px;
	}
	
	.indent2 {
		padding-left: 30px;
	}
	
	span.indent8 {
		display: inline-block;
		width: 8px;
	} 
	
	span.indent10 {
		display: inline-block;
		width: 10px;
	} 
	
	span.indent15 {
		display: inline-block;
		width: 15px;
	} 
	
	span.indent88 {
		display: inline-block;
		width: 88px;
	} 

/* mobile */
/* 
@media screen and (max-width:1023px) {
	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, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video,
	button, textarea, input, select {
		font-size:24px;
	}

	select {padding: 0 2rem 0 0.8rem;}

	.ft-size15 {font-size: 0.9rem;}

	.ml10 {margin-left: 0.7rem !important;}
	.ml50 {margin-left: 2.3rem !important;}
	.mr30 {margin-right: 1.5rem !important;}
	.mt20 {margin-top: 1.1rem !important;}
	.mt30 {margin-top: 1.5rem !important;}
	.mt35 {margin-top: 1.7rem !important;}
	.mt40 {margin-top: 2rem !important;}
	.mt55 {margin-top: 2.5rem !important;}
	.mb10 {margin-bottom: 0.7rem !important;}
	.mb30 {margin-bottom: 1.5rem !important;}

	

}
@media screen and (max-width:720px) {
	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, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video,
	button, textarea, input, select {
		font-size:18px;
	}
}

@media screen and (max-width:580px) {
	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, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video,
	button, textarea, input, select {
		font-size:16px;
	}
} */


/* color */
:root{
	
	--color-primary5: #e1f5fe; /* background */
	--color-primary10: #b3e4fd;
	--color-primary20: #80d3fb;
	--color-primary30: #4dc2f8;
	--color-primary40: #25b4f7;
	--color-primary50: #00a7f5;
	--color-primary60: #0099e6;
	--color-primary70: #0086d2;
	--color-primary80: #0075be; /* main */
	--color-primary90: #01559c;
	
	--color-secondary5: #e2f6f9;
	--color-secondary10: #b9eaef;
	--color-secondary20: #8fdce4;
	--color-secondary30: #6dcdd9;
	--color-secondary40: #5dc2d0;
	--color-secondary50: #58b8c8; /* main */
	--color-secondary60: #53a8b6;
	--color-secondary70: #4c939c;
	--color-secondary80: #467f85;
	--color-secondary90: #375c5d;
	
	--color-tertiary5: #fffdea;
	--color-tertiary10: #fff8cb;
	--color-tertiary20: #fff4aa;
	--color-tertiary30: #ffee8b;
	--color-tertiary40: #ffe974;
	--color-tertiary50: #fee460;
	--color-tertiary60: #ffd75f;
	--color-tertiary70: #f9c158; /* main */
	--color-tertiary80: #f3ab51;
	--color-tertiary90: #e98745;
	
	--color-gray5: #f7f7f7; /* background */
	--color-gray10: #e6e6e6; /* border */
	--color-gray20: #cccccc;
	--color-gray30: #b3b3b3;
	--color-gray40: #999999;
	--color-gray50: #808080; /* text disabled */
	--color-gray60: #666666; /* sub contents */
	--color-gray70: #4d4d4d;
	--color-gray80: #333333;
	--color-gray90: #1a1a1a;
	
	--color-green50: #008a1e;
	
	--color-blue: #e7f3f8;
	--color-orange: #fff3e1;
	--color-red: #eb003b;
	
	
	/* default 16px */
	/* // 2px: 0.125rem , 4px: 0.25rem , 8px: 0.5rem , 10px: 0.625rem , 12px: 0.75rem , 16px: 1rem , 24px: 1.5rem , 32px: 2rem , 40px: 2.5rem , 48px: 3rem, 56px: 3.5rem, 64px: 4rem */
	--space1: 0.125rem; /* 2px */
	--space2: 0.25rem; /* 4px */  
	--space3: 0.5rem; /* 8px */
	--space3-minus: -0.5rem; /* -8px */
	--space4: 0.625rem; /* 10px */
	--space4-minus: -0.625rem; /* -10px */
	--space5: 0.75rem; /* 12px */
	--space5-minus: -0.75rem; /* -12px */
	--space6: 0.875rem; /* 14px */
	--space7: 1rem; /* 16px */
	--space8: 1.25rem; /* 20px */
	--space9: 1.5rem; /* 24px */
	--space10: 1.875rem; /* 30px */
	--space11: 2rem; /* 32px */
	--space12: 2.25rem; /* 36px */
	--space13: 2.5rem; /* 40px */
	--space14: 3rem; /* 48px */
	--space15: 3.5rem; /* 56px */
	--space16: 4rem;  /* 64px */
	
	--border-radius1: 2px;
	--border-radius2: 4px;
	--border-radius3: 6px;
	--border-radius4: 8px;
	--border-radius5: 12px;
	--border-radius6: 15px;
	
	--border-radius7: 20px;

	
	/* default 16px */
	/* 기본 계층 header2 title2 title4 body2 detail2 */
	/* // 60px: 3.75rem , 50: 3.125rem , 40: 2.5rem */ 
	--ft-display1: 3.75rem;
	
	/* // 50px: 3.125rem , 40px: 2.5rem , 32px: 2rem */
	--ft-heading1: 3.125rem;
	--ft-heading2: 2.5rem;
	--ft-heading3: 2rem;
	
	/* // 32: 2rem , 28px: 1.75rem , 24px: 1.5rem , 20px: 1.25rem , 18px: 1.125rem , 16: 1rem , 14: 0.875rem */
	--ft-title1: 1.75rem;
	--ft-title2: 1.5rem;
	--ft-title3: 1.25rem;
	--ft-title4: 1.125rem;
	
	/* // 20: 1.25rem , 16px: 1rem , 14px: 0.875rem */
	--ft-body1: 1rem;
	--ft-body2: 0.875rem;
	
	/* // 16: 1rem , 14: 0.875rem , 12px: 0.75rem */
	--ft-detail1: 0.75rem;
	
	/* font color */
	--ft-gray: #717171;
	
}
@media screen and (max-width:780px) {
	:root{
		--space1: 0;
		--space2: 0.125rem; /* 2px */  
		--space3: 0.25rem; /* 4px */
		--space3-minus: -0.25rem; /* -4px */
		--space4: 0.5rem; /* 8px */
		--space4-minus: -0.5rem; /* -8px */
		--space5: 0.625rem; /* 10px */
		--space5-minus: -0.625rem; /* -10px */
		--space6: 0.75rem; /* 12px */
		--space7: 0.875rem; /* 14px */
		--space8: 1rem; /* 16px */
		--space9: 1.25rem; /* 20px */
		--space10: 1.5rem; /* 24px */
		--space11: 1.875rem; /* 30px */
		--space12: 2rem; /* 32px */
		--space13: 2.25rem; /* 36px */
		--space14: 2.5rem; /* 40px */
		--space15: 3rem; /* 48px */
		--space16: 3.5rem;  /* 56px */
	}
}