@charset "utf-8";

/*@import url("../../../resource/font/SCDream/fonts.css");*/
/*@import url("../../../resource/font/Sora/fonts.css");*/
@import url("../../../resource/font/XEIcon-2.3.3/xeicon.min.css");

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

:root {
	--ka-gray-light-hex: #646464;
	--ka-gray-light-rgb: 100, 100, 100;
	--ka-gray-hex: #505050;
	--ka-gray-rgb: 80, 80, 80;
	--ka-blue-light-hex: #1979cd;
	--ka-blue-light-rgb: 25, 121, 205;
	--ka-blue-hex: #083c94;
	--ka-blue-rgb: 8, 60, 148;
	--ka-blue-dark-hex: #022766;
	--ka-blue-dark-rgb: 2, 39, 102;
	--ka-pink-hex: #fb3b7e;
	--ka-pink-rgb: 251, 59, 126;
	--ka-red-light-hex: #c71d22;
	--ka-red-light-rgb: 255, 37, 43;
	--ka-red-hex: #c71d22;
	--ka-red-rgb: 199, 29, 34;
	--ka-red-dark-hex: #9a0408;
	--ka-red-dark-rgb: 154, 4, 8;
	--ka-yellow-hex: #ffc016;
	--ka-yellow-rgb: 255, 192, 22;
	--ka-green-hex: #6e7b10;
	--ka-green-rgb: 110, 123, 16;

	--ma-color-01-hex: #000000;
	--ma-color-01-rgb: 0, 0, 0;
	--ma-color-02-hex: #083c94;
	--ma-color-02-rgb: 8, 60, 148;
	--ma-color-03-hex: #111111;
	--ma-color-03-rgb: 17, 17, 17;
	--ma-color-04-hex: #1979cd;
	--ma-color-04-rgb: 25, 121, 205;
	--ma-color-05-hex: #2b2b2b;
	--ma-color-05-rgb: 43, 43, 43;
	--ma-color-06-hex: #3c3b3b;
	--ma-color-06-rgb: 60, 59, 59;
	--ma-color-07-hex: #454545;
	--ma-color-07-rgb: 69, 69, 69;
	--ma-color-08-hex: #4b586b;
	--ma-color-08-rgb: 75, 88, 107;
	--ma-color-09-hex: #535353;
	--ma-color-09-rgb: 83, 83, 83;
	--ma-color-10-hex: #6160ff;
	--ma-color-10-rgb: 97, 96, 255;
	--ma-color-11-hex: #646464;
	--ma-color-11-rgb: 100, 100, 100;
	--ma-color-12-hex: #6f6e6e;
	--ma-color-12-rgb: 111, 110, 110;
	--ma-color-13-hex: #989898;
	--ma-color-13-rgb: 152, 152, 152;
	--ma-color-14-hex: #a1a1a1;
	--ma-color-14-rgb: 161, 161, 161;
	--ma-color-15-hex: #b8babe;
	--ma-color-15-rgb: 184, 186, 190;
	--ma-color-16-hex: #c9c9c9;
	--ma-color-16-rgb: 201, 201, 201;
	--ma-color-17-hex: #cbcbcb;
	--ma-color-17-rgb: 203, 203, 203;
	--ma-color-18-hex: #d6d6d6;
	--ma-color-18-rgb: 214, 214, 214;
	--ma-color-19-hex: #dfdfdf;
	--ma-color-19-rgb: 223, 223, 223;
	--ma-color-20-hex: #eceef3;
	--ma-color-20-rgb: 236, 238, 243;
	--ma-color-21-hex: #f5f5f5;
	--ma-color-21-rgb: 245, 245, 245;
	--ma-color-22-hex: #f9f9f9;
	--ma-color-22-rgb: 249, 249, 249;
	--ma-color-23-hex: #e5e5e5;
	--ma-color-23-rgb: 229, 229, 229;


	--ma-primary-hex: var(--ma-color-10-hex); /* 주색. */
	--ma-primary-rgb: var(--ma-color-10-rgb); /* 주색. */
	--ma-info-hex: #a0e870;
	--ma-info-rgb: 160, 232, 112;
	--ma-body-text-color: var(--ma-color-06-hex); /* 기본 텍스트 색상 */

	--ma-box-bg: var(--ma-color-21-hex); /* 글상자 배경 */
	--ma-box-text-color: var(--ma-color-14-hex); /* 글상자 텍스트 */

	--ma-breadcrum-text-color: var(--ma-color-14-hex); /* 화면경로명/경로구분자 */
	--ma-breadcrum-active-color: var(--ma-color-06-hex); /* 화면경로 현재 */

	--ma-btn-black-bg: var(--ma-color-05-hex); /* 검은색 버튼 배경 */
	--ma-btn-gray-bg: var(--ma-color-13-hex); /* 회색버튼배경 */
	--ma-btn-gray-dark-bg: var(--ma-color-11-hex); /* 진한회색버튼배경 */
	--ma-btn-gray-light-bg: var(--ma-color-21-hex); /* 옅은회색버튼 배경 */
	--ma-btn-gray-light-color: var(--ma-color-01-hex); /* 옅은회색버튼 텍스트 */

	--ma-card-border-color: var(--ma-color-19-hex); /* 카드 밖 테두리 */
	--ma-card-text-color: var(--ma-color-05-hex); /* 강의카드 수강기간 텍스트 */
	--ma-card-header-color: var(--ma-color-03-hex); /* 강의 카드 제목 */
	--ma-card-progress-text-color: var(--ma-color-04-hex); /* 강의카드 진도 텍스트 */
	--ma-card-progressbar-bg: rgba(var(--ma-color-03-rgb), 0.13); /* 강의카드 진도막대 배경. */

	--ma-form-color: var(--ma-color-07-hex); /* 폼 텍스트*/
	--ma-form-help1-color: var(--ma-color-12-hex); /* 폼 도움말 텍스트 1 */
	--ma-form-help2-color: var(--ma-color-05-hex); /* 폼 도움말 텍스트 2 */
	--ma-form-input-border-color: var(--ma-color-23-hex); /* 폼 input 테두리 */
	--ma-form-placeholder: var(--ma-color-16-hex); /* 폼 placeholder */
	--ma-form-select-border-color: var(--ma-color-23-hex); /* 폼 select 테두리 */

	--ma-header-color: var(--ma-color-05-hex); /* 화면 제목 */
	--ma-subheader-color: var(--ma-color-06-hex); /* 강의상세 mcut명 */

	--ma-quickmenu-border-color: var(--ma-color-18-hex); /* 퀵메뉴 구분선 */

	--ma-submenu-header-bg: var(--ma-color-17-hex); /* 서브메뉴 제목 배경 */
	--ma-submenu-header-color: var(--ma-color-03-hex); /* 서브메뉴 제목 텍스트 */
	--ma-submenu-item-active-color: var(--ma-color-03-hex); /* 서브메뉴 항목 텍스트 선택 */
	--ma-submenu-item-bg: var(--ma-color-21-hex); /* 서브메뉴 항목 배경 */
	--ma-submenu-item-border-color: var(--ma-color-17-hex); /* 메뉴항목 구분선 */
	--ma-submenu-item-text-color: var(--ma-color-09-hex); /* 서브메뉴 항목 텍스트 */

	--ma-tab-color: var(--ma-color-08-hex); /* 탭 텍스트 */

	--ma-table-body-color: var(--ma-color-12-hex); /* 표 td 텍스트 */
	--ma-table-body-header-bg: var(--ma-color-22-hex); /* 표바디 th 배경 */
	--ma-table-border-color: var(--ma-color-02-hex); /* 표 상단 테두리 */
	--ma-table-cell-border-color: var(--ma-color-15-hex); /* 표 셀 테두리 */
	--ma-table-header-color: var(--ma-color-01-hex); /* 표 th 텍스트 */
	--ma-topmenu-color: var(--ma-color-05-hex); /* 주메뉴명 */
	--table-header-bg: var(--ma-color-20-hex); /* 표헤더 th 배경 */


	/* 퀵메뉴 그림자 */
	box-shadow: 0px 0px 6px 0px #00000017;

	--ma-border-radius: 12px;
	--ma-border-radius-lg: 24px;

	/* 주메뉴 */
	background: rgba(255, 255, 255, 0.00);
	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.14);

	/* 폼 input */
	border-radius: 12px;
	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.04);
}




/* reset.css */
html {font-size: 18px;}
html, body{min-height:100vh;}
*, *:before, *:after {-webkit-box-sizing: border-box; box-sizing: border-box;}
body {margin: 0; padding: 0; line-height: 1.5; font-family: Pretendard, 'SCDream', '돋움', 'Dotum', '굴림', 'Gulim', AppleGothic, UnDotum, Arial, Tahoma, Verdana, sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--ma-body-text-color); letter-spacing: -.5px;overflow:hidden auto;}
:focus {outline: none; }
::placeholder {color:#adadad;}
ul, ol, li, dl, dt, dd {margin: 0; padding: 0; list-style: none;}
p, h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0;}
a {color: inherit; text-decoration: none;}
img {font-size: 0; vertical-align: middle; border: 0;}
table {width: 100%; border-collapse: separate; border-spacing: 0;}
caption, legend {position: absolute; margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; border: 0; clip: rect(0, 0, 0, 0);}
select, input, textarea {/* font-family: 'SCDream', '돋움', 'Dotum', '굴림', 'Gulim', AppleGothic, UnDotum, Arial, Tahoma, Verdana, sans-serif; */ font-size: 0.8rem; color: #454545;}
select, input { vertical-align: middle; margin: 0;}
address, em, i {font-style: normal;}
i{ vertical-align: middle;}
button {border: 0; background: none; cursor: pointer; font: initial; /* font-family: 'SCDream'; */}
hr {margin: 0; border: none; padding: 0; display: block;}
figure, figcaption {margin: 0; padding: 0;}
form, fieldset {border: none; margin: 0; padding: 0; /*line-height: 1;*/}
input[type="submit"] {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
header, footer, article, section, aside, nav, main {display: block;}
br { font-family: initial;}

/* select */
select { border: none; height: 2.2rem; line-height: 2.2rem; border-radius: 0.5rem; background: #f5f5f5 url('/resource/images/con_com/ico_select.png') no-repeat center right 18px; font-size: 0.85rem; padding: 0 3rem 0 1.3rem; font-weight: 600; appearance: none; -ms-appearance:none; }
select.type2 { background: #fff url('/resource/images/con_com/ico_select_02.png') no-repeat center right 18px; color: #6f6e6e; padding: 0 3rem 0 0.9rem; border: 1px solid #e5e5e5; }
/* input */
input[type="text"]{ border: none; height: 2.2rem; line-height: 2.2rem; border-radius: 0.5rem; border: 1px solid #e5e5e5; padding: 0 0.9rem; }
input[type="password"]{ border: none; height: 2.2rem; line-height: 2.2rem; border-radius: 0.5rem; border: 1px solid #e5e5e5; padding: 0 0.9rem; }
input[type=radio] { accent-color: var(--ma-primary-hex); }

/* textarea */
textarea {width:100%; min-height:100px; line-height:20px; padding:1%; text-align:left; background-color:#ffffff; border:1px solid #eee; border-top-color:#d4d4d4; border-left-color:#d4d4d4; overflow-y:visible}

/*Skip To Content*/
#skipNav {
	position: absolute;
	top: -1000px;
	left: 0;
	width: 100%;
	height: 0;
	line-height: 0;
	font-size: 0;
	z-index: 999;
}

#skipNav a {
	display: block;
	width: 100%;
	line-height: 0;
	text-align: center;
	font-size: 0;
}

#skipNav a:focus,
#skipNav a:hover,
#skipNav a:active {
	position: absolute;
	top: 1000px;
	left: 0;
	display: block;
	line-height: 1.5rem;
	font-size: 0.6rem;
	font-weight: bold;
	color: #fff;
	background: #20262c;
}

#skipArea,
#skipArea ul {
	height: 0;
	width: 100%;
}

#skipArea a {
	position: absolute;
	top: -9999px;
	left: 0;
	z-index: 9999;
	width: 100%;
	padding: .5rem;
	font-size: 1rem;
	background-color: #000;
	color: #fff;
	line-height: 30px;
	opacity: 0.9;
	text-align: center;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity = 60)
}

#skipArea a:focus,
#skipArea a:hover,
#skipArea a:active {
	top: 0;
	outline-offset: -2px;
}

/* hid */
.hidden {display: none; }
.blind, legend, .hid, hr {position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); }
label.sr-only {font-size:0; line-height:0; color: transparent;}

/* 추가 */
.dis-no {display:none}
.dis-bl {display:block}

/* 감추기 */
.hide{position:fixed;top:-500px;left:-1px;width: 1px !important;height:1px !important;overflow:hidden}/* 접근성 display:none 작성 금지 */

.mgn  {margin:none}   .mgtn  {margin-top:none}   .mgrn  {margin-right:none}   .mgbn  {margin-bottom:none}   .mgln  {margin-left:none}
.mg5  {margin:5px}    .mgt5  {margin-top:5px}    .mgr5  {margin-right:5px}    .mgb5  {margin-bottom:5px}    .mgl5  {margin-left:5px}
.mg10 {margin:10px}   .mgt10 {margin-top:10px}   .mgr10 {margin-right:10px}   .mgb10 {margin-bottom:10px}   .mgl10 {margin-left:10px}
.mg15 {margin:15px}   .mgt15 {margin-top:15px}   .mgr15 {margin-right:15px}   .mgb15 {margin-bottom:15px}   .mgl15 {margin-left:15px}
.mg20 {margin:20px}   .mgt20 {margin-top:20px}   .mgr20 {margin-right:20px}   .mgb20 {margin-bottom:20px}   .mgl20 {margin-left:20px}
.mg30 {margin:30px}   .mgt30 {margin-top:30px}   .mgr30 {margin-right:30px}   .mgb30 {margin-bottom:30px}   .mgl30 {margin-left:30px}
.mg40 {margin:40px}   .mgt40 {margin-top:40px}   .mgr40 {margin-right:40px}   .mgb40 {margin-bottom:40px}   .mgl40 {margin-left:40px}
.pdn  {padding:none}  .pdtn  {padding-top:none}  .pdrn  {padding-right:none}  .pdbn  {padding-bottom:none}  .pdln  {padding-left:none}
.pd10 {padding:10px}  .pdt10 {padding-top:10px}  .pdr10 {padding-right:10px}  .pdb10 {padding-bottom:10px}  .pdl10 {padding-left:10px}

/* text-align */
.al {text-align:left !important;}
.ac {text-align:center !important}
.ar {text-align:right !important}

/* float */
.fl {float:left !important;}
.fr {float:right !important;}

/* font-weight */
.fwb { font-weight: bold; }

.loadCursor { cursor: pointer; }

.clearfix:after {clear: both; display: block; width: 100%; content: "";}

/* focus */
/* *:focus { outline: 2px dashed coral; z-index: 999999; margin: 4px 5px 2px 5px; } */