@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');
@import url('https://cdn.jsdelivr.net/gh/fonts-archive/GyeonggiTitle/subsets/GyeonggiTitle-dynamic-subset.css');
@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Gowun+Dodum&family=Jua&display=swap');

@font-face {
	font-family: 'Jua';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://cdn.jsdelivr.net/npm/@fontsource/jua/files/jua-latin-400-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*@font-face {
	font-family: 'Jua';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://cdn.jsdelivr.net/npm/@fontsource/jua/files/jua-korean-400-normal.woff2') format('woff2');
	unicode-range: U+1100-11FF, U+3000-303F, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+FF00-FFEF;
}
*/
:root {
	/* Padding */
	--sec-padding-top			: 50px;
	--sec-padding-bottom		: 50px;

	/* Font */
	--font-default				: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
	--font-pretendard			: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
	--font-gyeonggi-title		: "Gyeonggi Title", "Pretendard Variable", sans-serif;
	--font-gaegu				: "gaegu", "Pretendard Variable", sans-serif;
	--font-jua					: "Jua", "Pretendard Variable", sans-serif;

	/* Color */
	--color-g0					: #ffffff;
	--color-g1					: #eaf7f1;
	--color-g2					: #cfede0;
	--color-g3					: #7fcbae;
	--color-g4					: #28a77b;
	--color-g5					: #15835e;

	--color-white				: #ffffff;
	--color-light-gray			: #f3f3f3;
	--color-dark-gray			: #a9a9a9;
	--color-gray				: #808080;
	--color-dim-gray			: #696969;
	--color-black				: #000000;
	--color-cream				: #fff8f0;

	--color-white-50			: rgba(255, 255, 255, 0.5);
	--color-white-80			: rgba(255, 255, 255, 0.8);

	--color-literacy			: #0b8c7c;
	--color-textbook-literacy	: #2fa866;

	--color-prog-ready			: #696969;
	--color-prog-ready-bd		: #e7eceb;
	--color-prog-progressing	: #ee809a;
	--color-prog-progressing-bg	: rgba(238, 128, 154, 0.05);
	--color-prog-finish			: #22a77c;
	--color-prog-finish-bg		: rgba(34, 167, 124, 0.05);

	--ink-default				: #0b1020;

	--bg-default				: #ffffff;
}

* {
	margin: 0; padding: 0;
	box-sizing: border-box;
	outline: none;
}
html {
	font-size: 16px;
}
body {
	color: var(--ink-default);
	font-family: var(--font-default); font-weight: 400;
	line-height: 1.6;
	word-break: keep-all;
	overflow-wrap: break-word;
	background: var(--bg-default);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { width: 100%; border: none; display: block; }
ul{ list-style: none; }

/****************************************
*     Common
****************************************/
.br-960,
.br-560 { display: none; }

.title1 { padding-left: 20px; padding-right: 20px; color: var(--ink-default); font-size: 3.4rem; font-weight: 700; line-height: 1.2; }
.title2 { padding-left: 20px; padding-right: 20px; color: var(--ink-default); font-size: 2.8rem; font-weight: 700; line-height: 1.2; }
.title3 { padding-left: 20px; padding-right: 20px; color: var(--ink-default); font-size: 2.2rem; font-weight: 700; line-height: 1.2; }

.desc1 { padding-left: 20px; padding-right: 20px; color: var(--ink-default); font-size: 1.2rem; font-weight: 500; line-height: 1.6; }
.desc2 { padding-left: 20px; padding-right: 20px; color: var(--ink-default); font-size: 1.1rem; font-weight: 500; line-height: 1.6; }
.desc3 { padding-left: 20px; padding-right: 20px; color: var(--ink-default); font-size: 1.0rem; font-weight: 500; line-height: 1.6; }

/****************************************
*     Margin
****************************************/
.margin-0 { margin: 0; }

.margin-t5 { margin-top: 5px; }
.margin-t10 { margin-top: 10px; }
.margin-t15 { margin-top: 15px; }
.margin-t20 { margin-top: 20px; }
.margin-t25 { margin-top: 25px; }
.margin-t30 { margin-top: 30px; }
.margin-t40 { margin-top: 40px; }
.margin-t50 { margin-top: 50px; }
.margin-t60 { margin-top: 60px; }
.margin-t70 { margin-top: 70px; }
.margin-t80 { margin-top: 80px; }
.margin-t90 { margin-top: 90px; }
.margin-t100 { margin-top: 100px; }

.margin-b40 { margin-bottom: 40px; }
.margin-b50 { margin-bottom: 50px; }
.margin-b100 { margin-bottom: 100px; }


.margin-tb30 { margin-top: 30px; margin-bottom: 30px; }
.margin-tb40 { margin-top: 40px; margin-bottom: 40px; }
.margin-tb50 { margin-top: 50px; margin-bottom: 50px; }


.margin-r10 { margin-right: 10px; }

/****************************************
*     Padding
****************************************/
.padding-tb20 { padding-top: 20px; padding-bottom: 20px; }

.padding-lr20 { padding-left: 20px; padding-right: 20px; }



/****************************************
*     Width
****************************************/
.width-10p { width: 10%; }
.width-20p { width: 20%; }
.width-30p { width: 30%; }
.width-40p { width: 40%; }
.width-50p { width: 50%; }
.width-60p { width: 60%; }
.width-70p { width: 70%; }
.width-80p { width: 80%; }
.width-90p { width: 90%; }
.width-100p { width: 100%; }

.width-100 { width: 100px; }
.width-150 { width: 150px; }
.width-200 { width: 200px; }
.width-250 { width: 250px; }
.width-300 { width: 300px; }
.width-350 { width: 350px; }
.width-400 { width: 400px; }
.width-450 { width: 450px; }
.width-500 { width: 500px; }
.width-550 { width: 550px; }
.width-600 { width: 600px; }


/****************************************
*     Height
****************************************/


/****************************************
*     Font
****************************************/
/* Color */
.ink-g0 { color: var(--color-g0); }
.ink-g1 { color: var(--color-g1); }
.ink-g2 { color: var(--color-g2); }
.ink-g3 { color: var(--color-g3); }
.ink-g4 { color: var(--color-g4); }
.ink-g5 { color: var(--color-g5); }

.ink-white { color: var(--color-white); }
.ink-light-gray { color: var(--color-light-gray); }
.ink-dark-gray { color: var(--color-dark-gray); }
.ink-gray { color: var(--color-gray); }
.ink-dim-gray { color: var(--color-dim-gray); }
.ink-black { color: var(--color-black); }
.ink-cream { color: var(--color-cream); }

.ink-white-50 { color: var(--color-white-50); }
.ink-white-80 { color: var(--color-white-80); }

.ink-literacy { color: var(--color-literacy); }
.ink-textbook-literacy { color: var(--color-textbook-literacy); }

/* Font Family */
.font-pretendard { font-family: var(--font-pretendard); }
.font-gyeonggi-title { font-family: var(--font-gyeonggi-title); }
.font-gaegu { font-family: var(--font-gaegu); }
.font-jua { font-family: var(--font-jua); }

/* Font Size */
.font-08{ font-size: 0.8rem; }
.font-09{ font-size: 0.9rem; }
.font-10{ font-size: 1.0rem; }
.font-11{ font-size: 1.1rem; }
.font-12{ font-size: 1.2rem; }
.font-13{ font-size: 1.3rem; }
.font-14{ font-size: 1.4rem; }
.font-15{ font-size: 1.5rem; }
.font-16{ font-size: 1.6rem; }
.font-17{ font-size: 1.7rem; }
.font-18{ font-size: 1.8rem; }
.font-19{ font-size: 1.9rem; }
.font-20{ font-size: 2.0rem; }
.font-30{ font-size: 3.0rem; }
.font-40{ font-size: 4.0rem; }
.font-50{ font-size: 5.0rem; }

/* Font Weight */
.font-300{ font-weight: 300; }
.font-400{ font-weight: 400; }
.font-500{ font-weight: 500; }
.font-600{ font-weight: 600; }
.font-700{ font-weight: 700; }
.font-800{ font-weight: 800; }
.font-900{ font-weight: 900; }

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

/* Line Height */
.line-height-10 { line-height: 1.0; }
.line-height-12 { line-height: 1.2; }
.line-height-16 { line-height: 1.6; }

/* Text Align */
.white-space-n{ white-space: normal; }
.white-space-pre{ white-space: pre; }
.white-space-r{ white-space: wrap; }
.white-space-nr{ white-space: nowrap; }


/****************************************
*     Background
****************************************/
.bg-g0 { background: var(--color-g0); }
.bg-g1 { background: var(--color-g1); }
.bg-g2 { background: var(--color-g2); }
.bg-g3 { background: var(--color-g3); }
.bg-g4 { background: var(--color-g4); }
.bg-g5 { background: var(--color-g5); }

.bg-lg { background: var(--color-light-gray); }
.bg-br { background: var(--color-cream); }


/****************************************
*     Border
****************************************/
.bd-g0 { border: 1px solid var(--color-g0); }
.bd-g1 { border: 1px solid var(--color-g1); }
.bd-g2 { border: 1px solid var(--color-g2); }
.bd-g3 { border: 1px solid var(--color-g3); }
.bd-g4 { border: 1px solid var(--color-g4); }
.bd-g5 { border: 1px solid var(--color-g5); }

.bd-br { border: 1px solid var(--color-cream); }







/****************************************
*     Display
****************************************/
.display-none { display: none; }
.display-block { display: block; }
.display-inline { display: inline; }
.display-flex { display: flex; }




/****************************************
*     Etc
****************************************/





/*
.mg_0{ margin: 0; }

.mt_20{ margin-top: 20px; }

.mgt_0{ margin-top: 0; }
.mgt_5{ margin-top: 5px; }
.mgt_10{ margin-top: 10px; }
.mgt_15{ margin-top: 15px; }
.mgt_20{ margin-top: 20px; }
.mgt_50{ margin-top: 50px; }
.mgt_80{ margin-top: 80px; }
.mgt_100{ margin-top: 100px; }

.mgb_0{ margin-bottom: 0; }
.mgb_5{ margin-bottom: 5px; }
.mgb_10{ margin-bottom: 10px; }
.mgb_15{ margin-bottom: 15px; }
.mgb_20{ margin-bottom: 20px; }

.mgl_0{ margin-left: 0; }
.mgl_5{ margin-left: 5px; }
.mgl_10{ margin-left: 10px; }
.mgl_15{ margin-left: 15px; }
.mgl_20{ margin-left: 20px; }

.mgr_0{ margin-right: 0; }
.mgr_5{ margin-right: 5px; }
.mgr_10{ margin-right: 10px; }
.mgr_15{ margin-right: 15px; }
.mgr_20{ margin-right: 20px; }


.mglr_10{ margin-left: 10px; margin-right: 10px; }
.mglr_20{ margin-left: 20px; margin-right: 20px; }

.pd_0{ padding: 0; }
.pd_10{ padding: 10px; }

.pdtb_4{ padding-top: 4px; padding-bottom: 4px; }
.pdtb_12{ padding-top: 12px; padding-bottom: 12px; }
.pdtb_13{ padding-top: 13px; padding-bottom: 13px; }
.pdtb_14{ padding-top: 14px; padding-bottom: 14px; }
.pdtb_15{ padding-top: 15px; padding-bottom: 15px; }


.pdlr_10{ padding-left: 10px; padding-right: 10px; }


.wd_45p{ width: 45%; }
.wd_50p{ width: 50%; }
.wd_60p{ width: 60%; }
.wd_70p{ width: 70%; }
.wd_80p{ width: 80%; }
.wd_90p{ width: 90%; }
.wd_100p{ width: 100%; }
.wd_10{ width: 10px; } .wd_20{ width: 20px; } .wd_30{ width: 30px; } .wd_40{ width: 40px; } .wd_50{ width: 50px; }
.wd_60{ width: 60px; } .wd_70{ width: 70px; } .wd_80{ width: 80px; } .wd_90{ width: 90px; } .wd_100{ width: 100px; }
.wd_100{ width: 100px; } .wd_150{ width: 150px; } .wd_200{ width: 200px; }

.ht_100p{ height: 100%; }
.ht_10{ height: 10px; } .ht_20{ height: 20px; } .ht_30{ height: 30px; } .ht_40{ height: 40px; } .ht_50{ height: 50px; }
.ht_60{ height: 60px; } .ht_70{ height: 70px; } .ht_80{ height: 80px; } .ht_90{ height: 90px; } .ht_100{ height: 100px; }

.color_dim_gray{ color: #696969; }

.fs_08{ font-size: 0.8rem; }
.fs_09{ font-size: 0.9rem; }
.fs_10{ font-size: 1.0rem; }
.fs_11{ font-size: 1.1rem; }
.fs_12{ font-size: 1.2rem; }
.fs_13{ font-size: 1.3rem; } .fs_14{ font-size: 1.4rem; } .fs_15{ font-size: 1.5rem; }
.fs_16{ font-size: 1.6rem; } .fs_17{ font-size: 1.7rem; } .fs_18{ font-size: 1.8rem; } .fs_19{ font-size: 1.9rem; } .fs_20{ font-size: 2.0rem; }
.fs_30{ font-size: 3.0rem; }

.fw_normal{ font-weight: normal; }
.fw_bold{ font-weight: bold; }
.fw_300{ font-weight: 300; } .fw_400{ font-weight: 400; } .fw_500{ font-weight: 500; }
.fw_600{ font-weight: 600; } .fw_700{ font-weight: 700; } .fw_800{ font-weight: 800; } .fw_900{ font-weight: 900; }

.ta_l{ text-align: left; } .ta_c{ text-align: center; } .ta_r{ text-align: right; }

.to_ellipsis{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

.ws_normal{ white-space: normal; }

.wb_normal{ word-break: normal; }
.wb_keep_all{ word-break: keep-all; }
.wb_break_all{ word-break: break-all; }
.wb_break_word{ word-break: break-word; }





.bd_none{ border: none; }

.of_v{ overflow: visible; }
.of_h{ overflow: hidden; }
.of_s{ overflow: scroll; }
.of_a{ overflow: auto; }

.of_x_s{ overflow-x: scroll; }

.of_y_s{ overflow-y: scroll; }

.fx_d_c{ display: flex; flex-direction: column; }
.fx_d_cr{ display: flex; flex-direction: column-reverse; }
.fx_d_r{ display: flex; flex-direction: row; }
.fx_d_rr{ display: flex; flex-direction: row-reverse; }

.fx_w_w{ flex-wrap: wrap; }
.fx_w_wr{ flex-wrap: wrap-reverse; }
.fx_w_nr{ flex-wrap: nowrap; }

.fx_jc_fs{ justify-content: flex-start; }
.fx_jc_fe{ justify-content: flex-end; }
.fx_jc_c{ justify-content: center; }
.fx_jc_sb{ justify-content: space-between; }
.fx_jc_sa{ justify-content: space-around; }
.fx_jc_se{ justify-content: space-evenly; }

.fx_ai_fs{ align-items: flex-start; }
.fx_ai_fe{ align-items: flex-end; }
.fx_ai_c{ align-items: center; }
.fx_ai_b{ align-items: baseline; }

.fx_ac_fs{ align-content: flex-start; }
.fx_ac_fe{ align-content: flex-end; }
.fx_ac_c{  align-content: center; }
.fx_ac_sb{ align-content: space-between; }
.fx_ac_sa{ align-content: space-around; }
.fx_ac_se{ align-content: space-evenly; }

.gap_5{ gap: 5px; }
.gap_10{ gap: 10px; }
.gap_15{ gap: 15px; }
.gap_20{ gap: 20px; }

.dp_block{ display: block; }
.dp_iblock{ display: inline-block; }
.dp_none{ display: none; }

.bs_cb{ box-sizing: content-box; }
.bs_bb{ box-sizing: border-box; }

.bsd_black_10{
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}



.nobr{ white-space: nowrap; }


.user_select_none{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


*/



/****************************************
*     반응형
****************************************/
@media (max-width: 960px) {
	.br-960 { display: inline; }

	html { font-size: 15px; }
}
@media (max-width: 560px) {
	.br-560 { display: inline; }

	html { font-size: 15px; }

}
























.client-wrap,
.study-wrap,
.user-wrap {
	/*border: 1px dotted orange;*/
}
.client-wrap .client-sub-wrap,
.study-wrap .study-sub-wrap,
.user-wrap .user-sub-wrap {
	/*border: 1px dotted blue;*/
}
.client-wrap .client-sub-wrap > *,
.study-wrap .study-sub-wrap  > * {
	/*border: 1px dotted red;*/
}

.www {
	/*border: 1px dotted purple;*/
}
.www > * {
	/*border: 1px dotted orange;*/
}