@charset "utf-8";

body {
	width: 100vw;
	position: relative;
}

body:not(th, td){
	text-align: left;
	word-break: keep-all;
}
	
audio,
body,
embed,
iframe,
img,
object,
video {
	max-width: 100%;
}

button,
form,
h1,
h2,
h3,
h4,
h5,
h6 {
	padding: 0;
	margin: 0;
}

code,
pre,
table td,
table th {
	word-break: keep-all;
}

.blind,
form legend {
	top: -9999px;
	left: -9999px;
	z-index: 1;
}

html {
	-webkit-text-size-adjust: 100%;
}

a,
abbr,
acronym,
address,
applet,
articel,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
cener,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
font,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
meter,
nav,
object,
ol,
output,
p,
pre,
progress,
q,
rq,
rt,
ruby,
s,
samp,
section,
small,
span,
stricke,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video,
xmp {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: 'NotoSansKR', sans-serif;
}

body,
input,
textarea,
select,
button,
table {
	font-size: 16px;
	font-weight: 300;
	font-family: 'NotoSansKR', sans-serif;
	color: var(--gray);
	letter-spacing: -.05em;
	line-height: 1;
}

.blind,
.sknavi,
.sknavi .skip,
form legend {
	position: absolute
}

html.mobile body {
     -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
     -ms-text-size-adjust: none;
     text-size-adjust: none;
     -webkit-font-smoothing: antialiased;
     font-smoothing: antialiased;
     -webkit-touch-callout: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     -webkit-tap-highlight_color: rgba(11, 66, 170, .6);
     overflow-x: hidden;
     font-family: NotoSansKR, HelveticaNeue-Light, AppleSDGothicNeo-Light
}

html.mobile body table {
     table-layout: fixed;
     width: 100%;
}

strong {
	font-weight: 500;
}

a {
	color: var(--gray);
	cursor: pointer
	}
a:active,
a:link,
a:visited,
a:hover {
	text-decoration: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'NotoSansKR', sans-serif;
	font-weight: 500
}

*,
:after,
:before {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}

table {border-collapse: collapse; border-spacing: 0}
table caption {visibility: none; width: 0; height: 0; font-size: 0; line-height: 0; text-indent: -9999px}

.loading,
.sknavi {display: block; width: 100%; max-width: 100%}

form legend {top:-9999px; left:-9999px}

button,
input,
select,
textarea {font-family: inherit}
button {border: none}
textarea {resize: none; overflow: auto}
input::--ms-clear,
input::--ms-reveal {display: none}
small,
sub,
sup {font-size: 12px}
code,
pre {font-size: 14px; font-family: 'NotoSansKR', sans-serif; color: var(--light-gray); line-height: 1.5; white-space: pre; white-space: pre-wrap; padding: 20px}
pre.line {white-space: pre-line}
pre.aside {padding: 0}
pre a {font-weight: 300}
abbr[title],
dfn[title] {cursor: help}
sub {vertical-align: sub}
sup {vertical-align: super}
.font_thm,
.tahoma {font-family: tahoma, dotum, gulim, applegothic, sans_serif}
.font_vdn,
.verdana {font-family: verdana, dotum, gulim, applegothic, sans_serif}
.font_nanum,
.namum {font-family: NanumSquare, "Apple SD Gothic Neo", NanumGothic, "Malgun Gothic", dotum, gulim, sans_serif}
.hide {visibility: hidden}
.ellipsis {overflow: hidden; text-overflow: ellipsis; white-space: nowrap}

.pointer,
a[href],
button,
input[type=submit],
input[type=image],
label,
label[for],
select {cursor: pointer}

label {cursor: default}
ol,
ul,
li {list-style: none}

.clear,
.clearfix {display: block}

.clear:after,
.clearfix:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; zoom: 1}

.sknavi {z-index: 1000; top: -500px}

.sknavi:active,
.sknavi:focus {
     top: 0;
     display: block;
     width: 100%;
     text-align: center;
     font-weight: 300;
     background-color: var(--bg-light-gray);
     text-decoration: none;
     height: 40px;
     line-height: 40px;
     color: #000;
     font-size: 15px;
     border-bottom: 1px solid #ddd;
     z-index: 10000
}
.sknavi .skip {
     top: -9999px
}
.hidden {width: 100%; height: 0; overflow: hidden; visibility: hidden}
.frozen-div{overflow-y:hidden !important;}
.frozen-bdiv{overflow-x:hidden !important;}

/******************************
	FORM	FORM	FORM
******************************/
select {background: none\9; appearance: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none}
select::-ms-expand {display: none; font-family: inherit}
.select {min-width: 160px; min-height: 40px; color: var(--gray); border-radius: 10px; border: 1px solid var(--line-gray2); background: #fff url('/img/lms/com/arw-gray-btm.svg') right 12px center no-repeat; background-size: 11px; padding: 0 32px 0 12px; transition: .4s; -webkit-transition: .4s}
.input {min-height: 40px; color: var(--gray); border-radius: 10px; border: 1px solid var(--line-gray2); background-color: #fff; padding: 0 12px; transition: .4s; -webkit-transition: .4s; vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none}
.textarea {width: 100%; color: var(--gray); min-height: 120px; line-height: 1.4; border-radius: 10px; border: 1px solid var(--line-gray2); background-color: #fff; padding:  10px 16px; transition: .4s}

input[type="date"] {width: 200px; background: url(/img/lms/com/icon_date.svg) 95% 50% no-repeat; background-size: 18px}
input[type=date]::-webkit-inner-spin-button {display:none}
input[type=date]::-webkit-calendar-picker-indicator {opacity:0}
input[type=button] {cursor: pointer}
input[type=checkbox],
input[type=radio] {appearance: auto; -moz-appearance: auto; -webkit-appearance: auto; margin: 0; padding: 0}

input,
textarea,
button {appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0}

::placeholder {opacity: .6}
input:disabled {background: #e9e9e9}

.select:hover,
.input:hover,
.input:hover,
.input:hover,
.textarea:hover {border-color: var(--gray)}

input:disabled:hover {border-color: var(--line-gray2)}

.select:focus,
.input:focus,
.textarea:focus {border-color: var(--black); outline: none}

img {-ms-interpolation-mode: nearset-neighbor; image-rendering: auto; image-rendering: -webkit-optimize-contrast; image-rendering: -moz-auto; image-rendering: -o-auto; transform: translateZ(0); backface-visibility: hidden}


/* CHECK EFFECT */
input[type="radio"],
input[type="checkbox"] {position: absolute; opacity: 0; cursor: pointer; width: 0; height: 0}
label:hover input[type="radio"] ~ .checkmark,
label:hover input[type="checkbox"] ~ .checkmark {border-color: var(--blue)}
input[type="radio"]:checked ~ .checkmark,
input[type="checkbox"]:checked ~ .checkmark {background-color: var(--blue); border-color: var(--blue)}
.checkmark {width: 25px; height: 25px; background-color: #fff; border: 1px solid var(--line-gray2); border-radius: 5px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: .4s}
.checkmark.rd {border-radius: 50%; top: 0; left: 50%; transform: translateX(-50%)}
.checkmark::after {content: ''; position: absolute; display: none}
input[type="radio"]:checked ~ .checkmark::after,
input[type="checkbox"]:checked ~ .checkmark::after {display: block}
input:read-only {background-color: #f7f7f7}
input:read-only:hover {border: 1px solid var(--line-gray2)}
.checkmark::after {width: 8px; height: 12px; border: solid white; border-width: 0 2px 2px 0; top: 4px; left: 8px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg)}





@media screen and (max-width: 1440px) {
	.select {min-width: 120px; background: #fff url('/img/lms/com/arw-gray-btm.svg') right 8px center no-repeat; background-size: 11px; padding: 0 24px 0 8px}
	.input {padding: 0 8px}
}

@media screen and (max-width: 1080px) {
	code,
	pre {font-size: 14px; padding: 12px}
	
	.select {min-height: 32px; font-size: 14px; border-radius: 5px}
	.input {min-height: 32px; font-size: 14px; border-radius: 5px}
	.textarea {font-size: 14px; padding:  4px 8px; border-radius: 5px}
	
	.intro-login-area .select,
	.intro-login-area .input {min-height: 40px}
}

@media screen and (max-width: 768px) {
	.select,
	.input,
	.textarea {font-size: 12px}
	
	::placeholder {opacity: 0}
}