@charset 'utf-8';
@import url("fonts.css");

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,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,select,button,
ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr,textarea {margin:0;padding:0;transition: 0.3s all;}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote,q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {display:block;margin:0;padding:0;}
img {-ms-interpolation-mode:bicubic !important;}
a,input,select,textarea,button,img {vertical-align:middle;font-family:inherit;}
input {margin:0;padding:0;}
table,th,td {margin:0;padding:0;border-spacing:0;border-collapse:collapse;}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal;}
legend,caption {height:0;text-indent:-9999px;overflow:hidden;font-size:0;}
input,button {border-radius:0;outline:none;cursor:pointer;}
button,input[type='button'],input[type='submit'] {-webkit-appearance:none;outline:none;cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;*overflow:visible; }
select {border-radius:0;}

html {font-size: 100%; /* 1 */-webkit-text-size-adjust: 100%; /* 2 */-ms-text-size-adjust: 100%; /* 2 */overflow-y:scroll;}
html,body,button,input,select,textarea {font-family:'Noto Sans KR', Malgun Gothic,dotum,arial,sans-serif; color:#666; font-size:16px; font-weight:300;/*-webkit-text-size-adjust:none; */letter-spacing:-1px;}

a {text-decoration:none;color:#666;}
a:hover {text-decoration:none;}
a:focus {outline: thin dotted;}
a:active,a:hover {outline: 0;}


.clear {clear:both;display:block;float:none;font-size:0 !important;height:0;line-height:0 !important;margin:0 !important;overflow:hidden;padding:0 !important;width:100%;}
.clearfix {*zoom:1;*overflow:hidden;}
.clearfix:after {content:'';display:block;clear:both;font-size:0;}
.hide {position:absolute;left:-9999px;top:-9999px;overflow:hidden;width:0;height:0;font-size:0;visibility:hidden;}

legend, caption{visibility:hidden; position:absolute; top:0; left:0; width:0px; height:0px; font-size:0; line-height:0;}
input[type=text]::-ms-clear {display:none;}
input[type=text]:-ms-clear {display:none;}
pre {word-wrap: break-word;white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-break:break-all;}
html {overflow-y:scroll; overflow-x:hidden;}
body {font-family:'Noto Sans KR', Malgun Gothic,dotum,arial,sans-serif; font-size:16px; color:#666; font-weight:400;line-height:1; letter-spacing:-1px;-webkit-text-size-adjust:none;}
a { text-decoration:none; margin:0; padding:0;}
a:hover { text-decoration:none;}


/* placeholder */
[placeholder]::-webkit-input-placeholder {color:#999; font-weight:400;}
[placeholder]:-moz-placeholder {color:#999; font-weight:400;}
[placeholder]::-moz-placeholder {color:#999; font-weight:400;}
[placeholder]:-ms-input-placeholder {color:#999; font-weight:400; }
textarea {width:100%;padding:8px;border:1px solid #999; resize:none}


input[type="checkbox"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0 }
.checks input[type="checkbox"] + label { display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } 
input[type="checkbox"] + label:before {content: ' '; display: inline-block; width: 21px; height: 21px; line-height: 21px; margin: -2px 8px 0 0; text-align: center; vertical-align: middle;  background:url('../images/ico_checkbox_off.png') no-repeat 0 0; background-size:21px 21px; }
input[type="checkbox"] + label:active:before, input[type="checkbox"]:checked + label:active:before {background-size:21px 21px; background-image:url('../images/ico_checkbox_on.png'); background-size:21px 21px;}
input[type="checkbox"]:checked + label:before {background-image:url('../images/ico_checkbox_on.png'); background-size:21px 21px;} 
input[type=checkbox] {-webkit-appearance: none; -moz-appearance: none;border:none;outline: none; width:21px; height:21px; background:url('../images/ico_checkbox_off.png') no-repeat 0 0; background-size:21px 21px; margin:0;}
input[type=checkbox]:checked{ background-image:url('../images/ico_checkbox_on.png');}

input[type=radio] { position:absolute; left:-9999em; top:-9999em; display:inline-block; width:0; height:0; opacity:0;}
input[type=radio] + label {-webkit-appearance: none; -moz-appearance: none; display:inline-block; font-size:20px; background:url('../images/ico_radio.png') no-repeat 0 0; color: #333; padding-left: 45px; margin: 0 30px; line-height: 25px; cursor: pointer;}
input[type=radio]:hover + label,
input[type=radio]:focus + label{ }
input[type=radio]:checked + label {background-image:url('../images/ico_radio_on.png');}

select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; background:#fff url('../images/select_arr.png') no-repeat right 10px top center ; outline:none;}
select::-ms-expand { display: none; } 

/* .ofy-hidden{overflow-y:hidden;} */


/* flex layout*/
.flex {
	display: flex;
}
.flex-row{
	display: flex;
	flex-direction: row !important;
	flex-wrap: wrap;
}
.flex-column{
	display: flex;
	flex-direction: column !important;
}

/* 기본 열(Col) 스타일 */
/* 주의 :: 다른 형식의 요소에서 col- 클래스가 있다면.... 아래는 ... 따로 풀어서 적용해줘야함....*/
[class^="col-"] {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	box-sizing: border-box;
}
/* 12분할 너비 계산 */
.col-1  { flex: 0 0 8.3333%;  max-width: 8.3333%;  }
.col-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-3  { flex: 0 0 25%;      max-width: 25%;      }
.col-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-6  { flex: 0 0 50%;      max-width: 50%;      }
.col-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-9  { flex: 0 0 75%;      max-width: 75%;      }
.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-12 { flex: 0 0 100%;     max-width: 100%;     }

/* flex 사용시 정렬 */
.flex-center {
	display: flex;
	justify-content: center !important;
	align-items: center !important;
}
.flex-1{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 1;
}

/* padding */
.padding-0{padding:0 !important;}
.padding-2{padding: var(--space-2xs)}
.padding-4{padding: var(--space-xs)}
.padding-8{padding: var(--space-sm)}
.padding-16{padding: var(--space-md)}
.padding-24{padding: var(--space-lg)}
.padding-32{padding: var(--space-xl)}

.pdT-0{padding-top:0px !important;}
.pdT-2{padding-top:2px !important;}
.pdT-4{padding-top:4px !important;}
.pdT-8{padding-top:8px !important;}
.pdT-10{padding-top:10px !important;}
.pdT-12{padding-top:12px !important;}
.pdT-14{padding-top:14px !important;}
.pdT-16{padding-top:16px !important;}
.pdT-18{padding-top:18px !important;}
.pdT-20{padding-top:20px !important;}
.pdT-22{padding-top:22px !important;}
.pdT-24{padding-top:24px !important;}
.pdT-28{padding-top:28px !important;}
.pdT-30{padding-top:30px !important;}
.pdT-32{padding-top:32px !important;}
.pdT-36{padding-top:36px !important;}
.pdT-40{padding-top:40px !important;}

.pdL-0{padding-left:0px !important;}
.pdL-2{padding-left:2px !important;}
.pdL-4{padding-left:4px !important;}
.pdL-8{padding-left:8px !important;}
.pdL-10{padding-left:10px !important;}
.pdL-12{padding-left:12px !important;}
.pdL-14{padding-left:14px !important;}
.pdL-16{padding-left:16px !important;}
.pdL-18{padding-left:18px !important;}
.pdL-20{padding-left:20px !important;}
.pdL-22{padding-left:22px !important;}
.pdL-24{padding-left:24px !important;}
.pdL-28{padding-left:28px !important;}
.pdL-30{padding-left:30px !important;}
.pdL-32{padding-left:32px !important;}
.pdL-36{padding-left:36px !important;}
.pdL-40{padding-left:40px !important;}

.pdR-0{padding-right:0px !important;}
.pdR-2{padding-right:2px !important;}
.pdR-4{padding-right:4px !important;}
.pdR-8{padding-right:8px !important;}
.pdR-10{padding-right:10px !important;}
.pdR-12{padding-right:12px !important;}
.pdR-14{padding-right:14px !important;}
.pdR-16{padding-right:16px !important;}
.pdR-18{padding-right:18px !important;}
.pdR-20{padding-right:20px !important;}
.pdR-22{padding-right:22px !important;}
.pdR-24{padding-right:24px !important;}
.pdR-28{padding-right:28px !important;}
.pdR-30{padding-right:30px !important;}
.pdR-32{padding-right:32px !important;}
.pdR-36{padding-right:36px !important;}
.pdR-40{padding-right:40px !important;}

.pdB-0{padding-bottom:0px !important;}
.pdB-2{padding-bottom:2px !important;}
.pdB-4{padding-bottom:4px !important;}
.pdB-8{padding-bottom:8px !important;}
.pdB-10{padding-bottom:10px !important;}
.pdB-12{padding-bottom:12px !important;}
.pdB-14{padding-bottom:14px !important;}
.pdB-16{padding-bottom:16px !important;}
.pdB-18{padding-bottom:18px !important;}
.pdB-20{padding-bottom:20px !important;}
.pdB-22{padding-bottom:22px !important;}
.pdB-24{padding-bottom:24px !important;}
.pdB-28{padding-bottom:28px !important;}
.pdB-30{padding-bottom:30px !important;}
.pdB-32{padding-bottom:32px !important;}
.pdB-36{padding-bottom:36px !important;}
.pdB-40{padding-bottom:40px !important;}

/* margin */
.margin-0{margin:0 !important;}
.mgT-0{margin-top:0px !important;}
.mgT-2{margin-top:2px !important;}
.mgT-4{margin-top:4px !important;}
.mgT-8{margin-top:8px !important;}
.mgT-10{margin-top:10px !important;}
.mgT-12{margin-top:12px !important;}
.mgT-14{margin-top:14px !important;}
.mgT-16{margin-top:16px !important;}
.mgT-18{margin-top:18px !important;}
.mgT-20{margin-top:20px !important;}
.mgT-22{margin-top:22px !important;}
.mgT-24{margin-top:24px !important;}
.mgT-28{margin-top:28px !important;}
.mgT-30{margin-top:30px !important;}
.mgT-32{margin-top:32px !important;}
.mgT-36{margin-top:36px !important;}
.mgT-40{margin-top:40px !important;}

.mgL-0{margin-left:0px !important;}
.mgL-2{margin-left:2px !important;}
.mgL-4{margin-left:4px !important;}
.mgL-8{margin-left:8px !important;}
.mgL-10{margin-left:10px !important;}
.mgL-12{margin-left:12px !important;}
.mgL-14{margin-left:14px !important;}
.mgL-16{margin-left:16px !important;}
.mgL-18{margin-left:18px !important;}
.mgL-20{margin-left:20px !important;}
.mgL-22{margin-left:22px !important;}
.mgL-24{margin-left:24px !important;}
.mgL-28{margin-left:28px !important;}
.mgL-30{margin-left:30px !important;}
.mgL-32{margin-left:32px !important;}
.mgL-36{margin-left:36px !important;}
.mgL-40{margin-left:40px !important;}

.mgR-0{margin-right:0px !important;}
.mgR-2{margin-right:2px !important;}
.mgR-4{margin-right:4px !important;}
.mgR-8{margin-right:8px !important;}
.mgR-10{margin-right:10px !important;}
.mgR-12{margin-right:12px !important;}
.mgR-14{margin-right:14px !important;}
.mgR-16{margin-right:16px !important;}
.mgR-18{margin-right:18px !important;}
.mgR-20{margin-right:20px !important;}
.mgR-22{margin-right:22px !important;}
.mgR-24{margin-right:24px !important;}
.mgR-28{margin-right:28px !important;}
.mgR-30{margin-right:30px !important;}
.mgR-32{margin-right:32px !important;}
.mgR-36{margin-right:36px !important;}
.mgR-40{margin-right:40px !important;}

.mgB-0{margin-bottom:0px !important;}
.mgB-2{margin-bottom:2px !important;}
.mgB-4{margin-bottom:4px !important;}
.mgB-8{margin-bottom:8px !important;}
.mgB-10{margin-bottom:10px !important;}
.mgB-12{margin-bottom:12px !important;}
.mgB-14{margin-bottom:14px !important;}
.mgB-16{margin-bottom:16px !important;}
.mgB-18{margin-bottom:18px !important;}
.mgB-20{margin-bottom:20px !important;}
.mgB-22{margin-bottom:22px !important;}
.mgB-24{margin-bottom:24px !important;}
.mgB-28{margin-bottom:28px !important;}
.mgB-30{margin-bottom:30px !important;}
.mgB-32{margin-bottom:32px !important;}
.mgB-36{margin-bottom:36px !important;}
.mgB-40{margin-bottom:40px !important;}

/* font-size */
.fz-7{font-size:7px !important;}
.fz-8{font-size:8px !important;}
.fz-9{font-size:9px !important;}
.fz-10{font-size:10px !important;}
.fz-11{font-size:11px !important;}
.fz-12{font-size:12px !important;}
.fz-13{font-size:13px !important;}
.fz-14{font-size:14px !important;}
.fz-15{font-size:15px !important;}
.fz-16{font-size:16px !important;}
.fz-17{font-size:17px !important;}
.fz-18{font-size:18px !important;}
.fz-19{font-size:19px !important;}
.fz-20{font-size:20px !important;}
.fz-22{font-size:22px !important;}
.fz-24{font-size:24px !important;}

/* font-weight */
.fw-400{font-weight: 400 !important;}
.fw-500{font-weight: 500 !important;}
.fw-600{font-weight: 600 !important;}
.fw-700{font-weight: 700 !important;}