@charset "utf-8"; 
@import url('../../js/fontawesome-free-6.1.2-web/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@font-face {
    font-family: 'SANJUGotgam';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/SANJUGotgam.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*-----------------------------------------------------------------*/
/* reset
/*-----------------------------------------------------------------*/
html, body {width:100%; height:100%;}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, main, nav, section {display:block;}
html, body, div, span, strong, a, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, samp, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, /*img, 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 {margin:0; padding:0; font-family:'Roboto', 'Noto Sans KR', 'Malgun Gothic', 'Dotum', 'AppleGothic', sans-serif;}
body, input, textarea, select, button, table {font-size:12px; /*color:#555;*/}
input, select, textarea, button, ul, ol, li, dl, dt, dd {vertical-align:middle;}
input[type='text'], input[type='file'], input[type='password'] { border:1px solid #ccc; background:#fff; height:20px; line-height:20px; text-indent:3px; padding:0; }
textarea {padding:5px; border:1px solid #ccc; background:#fff;}
select {border:1px solid #ccc; border-radius:0; height:22px; line-height:22px; padding:0 20px 0 3px; padding-right:0\0/IE8+9;  -webkit-box-sizing:border-box; box-sizing:border-box; background:#fff url('../img/steno/select_arrow.png') no-repeat right center;}
select::-ms-expand { /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 5-7 */ filter: alpha(opacity=0); /* Good browsers :) */ opacity:0;}
/* 크롬핵 */ @media screen and (-webkit-min-device-pixel-ratio:0) {}
input[type='checkbox'], input[type='radio'] {width:15px; height:15px; vertical-align:middle !important; margin-left:0; margin-right:0;}
label {display:inline-block; cursor:pointer; vertical-align:middle; margin-right:10px;}
legend, hr {visibility:hidden; overflow:hidden; position:absolute; top:0; left:0; width:0; height:0; padding:0; font-size:0; line-height:0}
button {cursor:pointer;}	
/* table { border-spacing:0; table-layout:fixed; border-collapse:collapse;} */
th, td {word-wrap:break-word; word-break:break-all; /*vertical-align:middle;*/ line-height:1.4;}
caption {visibility:hidden; width:0px; height:0px; overflow:hidden; font-size:0; line-height:0;}
col {display:table-column;}
iframe {border:0; margin:0; overflow:hidden;}
img, fieldset {border:0; vertical-align:middle;}
nav, ul, ol {list-style:none;}
em, address {font-style:normal}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
a:link, a:active, a:focus {color:#666; text-decoration:none;}
a:hover {color:#5396fe; text-decoration:none;}
button { border:none; outline:none; background:none; cursor:pointer; }
.hidden {display:block; font-size:0; width:1px; height:1px; line-height:0; overflow:hidden; position:absolute; left:-9999px; text-indent:-9999px;}
.hand, .pointer {cursor:pointer !important;}
.underline {text-decoration:underline;}
.relative {position:relative !important;}
.absolute {position:absolute !important;}
.small {font-size:11px;}
.desc {font-size:11px; color:#848484;}
.hide {display:none;}
.unvisibility {visibility:hidden;}
.normal {font-weight:normal !important;}
strong, b, .bold {font-weight:600;}
.input-box-default-text {color:#515151 !important; letter-spacing:-1px;}
img {max-width: 100%;}
/*.fb-like, .fb-like>span, .fb-like>span>iframe {min-width:90px !important; min-height:20px !important;}*/




/*-----------------------------------------------------------------*/
/* 공통요소
/*-----------------------------------------------------------------*/
.msg_sound_only, .sound_only { display: inline-block !important; position: absolute; top: 0; left: 0; width: 0; height: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important; }

/* placholder */
::-webkit-input-placeholder {color:#aaa;} 
::-moz-placeholder {color:#aaa;}
:-ms-input-placeholder {color:#aaa;}
:-moz-placeholder {color:#aaa;}
::-webkit-input-title {color:#aaa;}
::-moz-title {color:#aaa;}
:-ms-input-title {color:#aaa;}
:-moz-title {color:#aaa;}

/* 하이퍼링크 */
a:link, a:visited, a:active	 {color:#222;}
a:hover {color:#000; text-decoration:none;}



/*-----------------------------------------------------------------*/
/* layout
/*-----------------------------------------------------------------*/
.wrap {position: relative; width: 100%; height: 100%; background: #ddd; overflow: hidden;}
.container{
	position: relative;
    width: 1200px;
    height: 700px;
    margin: 100px auto;
    background-color: #6fc3ff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;   
    padding: 35px 0 0 60px;
}
.container:before, .container:after{
    content: " ";
    display: table;
}
.home {
    background-color: #fff;
    padding: 180px 80px 0px 80px;
    background: url(../images/main_bg@2x.jpg) no-repeat;
    background-size: cover;
}
.cnt_wrap {background-color: #f2f2f2; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 30px 60px 0;}
.flipped > * {
    float: left;
}
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.blk_none {font-size: 0;}
.hide {display: none;}









/*-----------------------------------------------------------------*/
/* helper
/*-----------------------------------------------------------------*/
.main_clr {color: #29e5f3;}
/*.main_clr_snd {color: #ff892a;}*/
.sub_clr {color: #ffceff;}
.dark_base_clr {color: #252525;}
.base_clr {color: #ececec;}
.base_light_clr {color: #f1f1f1;}
.base_light_clr_02 {color: #f8f8f8;}

.tag {position: absolute; top: 10px; left: 10px; z-index: 99; -webkit-box-sizing: border-box;box-sizing: border-box;  border-radius: 2px; display: block; text-transform: uppercase; font-weight: bold;}
.tag_hot {padding: 5px 10px; color: #fff; background: #ff4200;}
.tag_up {padding: 5px; color: #000; background: #ffd900;}
em {font-weight: 900;}









/*-----------------------------------------------------------------*/
/* heading
/*-----------------------------------------------------------------*/
h1, h2 {font-weight: normal; text-transform: uppercase; font-size: 42px; line-height: 1.1;}
h1 em {display: block; }
h2 {font-size: 26px;}
h2 em { font-weight:700; }

.window_desc {position: absolute; top: 5px; right: 20px; z-index: 9; color: #fff; font-weight: 300; font-size: 11px;}
.window_desc .tohome {font-size:16px; }
.window_desc span {display: inline-block; margin-left: 1rem; letter-spacing:.01em; }
.window_desc a { color: #fff; }
.window_desc .times strong,
.window_desc .times strong a { color:#e7008b; }


/*-----------------------------------------------------------------*/
/* header
/*-----------------------------------------------------------------*/
nav {position: absolute; top: 21px; left: 20px; z-index: 9;}
nav > li {position: relative; width: 40px; height: 55px; margin-bottom: 2px; font-size: 14px; background: #98d4ff center 17px no-repeat; background-size: 24px 24px; -webkit-transition: all .5s; transition: all .5s;}
nav > li:hover, nav li.on {background: #e2f2fd center 17px no-repeat; background-size: 24px 24px;}
nav > li.on {opacity: 1; background-color: #fff;}

nav > li.icon-home {background-image: url(../images/nav_ico_07.png);}
nav > li.icon-book {background-image: url(../images/nav_ico_02.png);}
nav > li.icon-long {background-image: url(../images/nav_ico_01.png);}
nav > li.icon-word {background-image: url(../images/nav_ico_08.png);}
nav > li.icon-sound {background-image: url(../images/nav_ico_04.png);}
nav > li.icon-game {background-image: url(../images/nav_ico_03.png);}
nav > li.icon-info {background-image: url(../images/nav_ico_06.png);}
nav > li.icon-memo {background-image: url(../images/nav_ico_09.png);}

nav > li.icon-home:hover, nav li.on.icon-home {background-image: url(../images/nav_ico_07_on.png);}
nav > li.icon-book:hover, nav li.on.icon-book {background-image: url(../images/nav_ico_02_on.png);}
nav > li.icon-long:hover, nav li.on.icon-long {background-image: url(../images/nav_ico_01_on.png);}
nav > li.icon-word:hover, nav li.on.icon-word {background-image: url(../images/nav_ico_08_on.png);}
nav > li.icon-sound:hover, nav li.on.icon-sound {background-image: url(../images/nav_ico_04_on.png);}
nav > li.icon-game:hover, nav li.on.icon-game {background-image: url(../images/nav_ico_03_on.png);}
nav > li.icon-info:hover, nav li.on.icon-info {background-image: url(../images/nav_ico_06_on.png);}
nav > li.icon-memo:hover, nav li.on.icon-memo {background-image: url(../images/nav_ico_09_on.png);}

/*
nav li:nth-child(1) {background-image: url(../images/nav_ico_07.png);}
nav li:nth-child(2) {background-image: url(../images/nav_ico_02.png);}
nav li:nth-child(3) {background-image: url(../images/nav_ico_01.png);}
nav li:nth-child(4) {background-image: url(../images/nav_ico_08.png);}
nav li:nth-child(5) {background-image: url(../images/nav_ico_04.png);}
nav li:nth-child(6) {background-image: url(../images/nav_ico_03.png);}
nav li:nth-child(7) {background-image: url(../images/nav_ico_06.png);}


nav li:nth-child(1):hover, nav li.on:nth-child(1) {background-image: url(../images/nav_ico_07_on.png);}
nav li:nth-child(2):hover, nav li.on:nth-child(2) {background-image: url(../images/nav_ico_02_on.png);}
nav li:nth-child(3):hover, nav li.on:nth-child(3) {background-image: url(../images/nav_ico_01_on.png);}
nav li:nth-child(4):hover, nav li.on:nth-child(4) {background-image: url(../images/nav_ico_08_on.png);}
nav li:nth-child(5):hover, nav li.on:nth-child(5) {background-image: url(../images/nav_ico_04_on.png);}
nav li:nth-child(6):hover, nav li.on:nth-child(6) {background-image: url(../images/nav_ico_03_on.png);}
nav li:nth-child(7):hover, nav li.on:nth-child(7) {background-image: url(../images/nav_ico_06_on.png);}
*/

nav > li > a {display: block; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 65px; font-size:14px; }
nav > li > a > span {text-indent: 100%; white-space: nowrap; overflow: hidden; display: none;}
nav > li:hover > a {color: #0087e7;}
nav > li.on > a {color: #0087e7;}

.container.home nav {margin-top: 40px; margin-bottom: 70px; position: static;}
.container.home nav > li {float: left; width: 100px; height: 100px; -webkit-box-shadow:inset 2px 1px 2px 1px rgba(0,0,0,.2); box-shadow:inset 2px 1px 2px 1px rgba(0,0,0,.2); text-align: center; font-size: 14px; background: #fff url(../images/nav_ico_02.png) center 17px no-repeat; background-size: 40px 40px; margin-right: 15px; -webkit-transition: all .5s; transition: all .5s; margin-bottom: 0px;}
.container.home nav > li:nth-child(2) {background-image: url(../images/nav_ico_08.png);}
.container.home nav > li:nth-child(3) {background-image: url(../images/nav_ico_01.png);}
.container.home nav > li:nth-child(4) {background-image: url(../images/nav_ico_04.png);}
.container.home nav > li:nth-child(5) {background-image: url(../images/nav_ico_03.png);}
.container.home nav > li:nth-child(6) {background-image: url(../images/nav_ico_09.png); background-size: 36px 36px; background-position: center 16px;}

.container.home nav > li:hover {background: #e2f2fd url(../images/nav_ico_02_on.png) center 17px no-repeat; background-size: 40px 40px;}
.container.home nav > li:nth-child(2):hover {background-image: url(../images/nav_ico_08_on.png); }
.container.home nav > li:nth-child(3):hover {background-image: url(../images/nav_ico_01_on.png);}
.container.home nav > li:nth-child(4):hover {background-image: url(../images/nav_ico_04_on.png);}
.container.home nav > li:nth-child(5):hover {background-image: url(../images/nav_ico_03_on.png);}
.container.home nav > li:nth-child(6):hover {background-image: url(../images/nav_ico_09_on.png); background-size: 36px 36px; background-position: center 16px;}
.container.home nav > li > a > span {text-indent: 0; overflow: visible; display: block;}



/* 2depth */
.depth_02_cas {
	position: absolute;
    left: 45px;
	top: 0px;
    z-index: 999;
	width:100%;
	height:auto;
    background-color: #fff;
	min-width:180px; /*max-height:400px;*/ display:flex; flex-wrap:wrap; flex-direction:column; 	
    padding: 5px 0;
    border-radius: 2px;
    -webkit-box-shadow: 2px 2px 2px 2px rgba(0,0,0,.25);
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,.25);
	display: none;
}
.depth_02_cas.long { display: none; }
.depth_03_cas::before {
    position: absolute;
    left: -7px;
    top: 16px;
    z-index: 9999;
    width: 0; 
    height: 0; 
	/*
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent; 

    border-right:7px solid #c4e6ff; 
		*/
    content: '';
}
.depth_02_cas > li { position: relative; line-height: 40px; border-bottom: 1px solid #eaeaea; text-align:left; }
.depth_03_cas > li { position: relative; line-height: 40px; border-bottom: 1px solid #b5e7ff; text-align:left; }
.depth_03_cas > li > a { display: block; -webkit-box-sizing:border-box; box-sizing:border-box; padding-right: 15px; font-size:14px; }
.depth_02_cas li:last-child {border-bottom: 0px;}
.depth_02_cas li a {display: block; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 15px; font-size:14px; }
.depth_02_cas > li:hover > a {color: #0095ff;}
.depth_02_cas li span,
.depth_03_cas > li > span {display: block; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 15px; cursor:pointer;}

/* 3depth */
.depth_03_cas {
	position: absolute;
	left: 180px;
	top: 0px;
    z-index: 9999;
	margin-left: 0px;
	margin-top: -5px;
    background-color: #f1f9ff;
    min-width: 100%;
	border-radius: 2px;
    padding: 5px 0;
	display: none;
    -webkit-box-shadow: 2px 2px 2px 2px rgba(0,0,0,.25);
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,.25);
	width:380px;
}
.depth_03_cas > li:hover > a {color: #0095ff; background-color:#c4e6ff}
/* hover */
nav > li:hover .depth_02_cas { display: flex;}

.depth_02_cas > li.active {background-color:#f1f1f1}
.depth_02_cas > li:hover .depth_03_cas { display: block; }










/*-----------------------------------------------------------------*/
/* main
/*-----------------------------------------------------------------*/
p {font-weight: 300; font-size: 18px;}
p em {font-weight: 700;}













/*-----------------------------------------------------------------*/
/* sub
/*-----------------------------------------------------------------*/
.sub_top_add {position: absolute; top: 14px; left: 60px; z-index: 8; width: 600px; height: 22px; -webkit-box-sizing: border-box; box-sizing: border-box; border-top: 7px solid #0095ff; background-color: #f2f2f2;}
.sub_top_add:after {
    content: attr(class);
    position: absolute;
    top: -7px;
    right: -22px;
    width: 22px;
    height: 22px;
    background: url(../images/menu_right.png) no-repeat;
    background-size: 24px 22px;
    z-index: 999;
    font-size: 0;    
}


.veiw_cnt { width: 100%; height: 300px; -webkit-box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,.2); box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,.2); -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 16px; padding-bottom: 16px; margin-top: 30px; overflow: hidden; background-color: #fff;}
.veiw_cnt_sound {display: none;width: 100%; height: 200px; -webkit-box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,.2); box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,.2); -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 16px; padding-bottom: 16px; margin-top: 30px; overflow: hidden; background-color: #fff;}
.veiw_list { width: 100%; min-height: 300px; -webkit-box-sizing: border-box; box-sizing: border-box; margin-top: 30px; overflow: hidden; }
.veiw_list > ul { border-top:1px solid #000; }
.veiw_list > ul li { padding: 16px 8px; border-bottom:1px solid rgba(0,0,0,.2); font-size:16px; transition: all 0.5s ease; }
.veiw_list > ul li a { transition: all 0.5s ease; }
.veiw_list > ul li:hover a { color:#0087e7; }

.view_real_text {width: 100%; height: 150px; -webkit-box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,.2); box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,.2); -webkit-box-sizing: border-box; box-sizing: border-box; padding:15px; margin-top: 5px; overflow-y: scroll; background-color: #fff;}
.view_real_text2 {width: 100%; height: 380px; -webkit-box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,.2); box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,.2); -webkit-box-sizing: border-box; box-sizing: border-box; padding:15px; margin-top: 5px; overflow-y: scroll; background-color: #fff;}

.form_memo { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; margin-top: 30px; }
.form_memo .btn_group { margin-top: 30px; text-align:right; }
.form_tit { font-size:20px; height: 50px !important; line-height: 48px !important; padding-left: 16px !important; padding-right: 16px !important; text-indent:0 !important; }
.form_cont { font-size: 16px; }

.typed_txt {font-size: 16px; line-height: 1.8;-webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 16px; width:100%; word-wrap:break-word;}
.current_txt {font-size: 16px; line-height: 1.8;-webkit-box-sizing: border-box; box-sizing: border-box; padding-right: 16px;}


.prev_txt, .next_txt {font-size: 16px; line-height: 1.8;-webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 16px; padding-right: 16px;}
.now_txt {display: block; background: #000; color: #fff; font-size: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 16px;}
.now_txt em {color: #7cc8ff; font-weight: inherit;}
.prev_txt {margin-bottom: 20px; opacity: .5; max-height: 56px; overflow: auto;}
.next_txt {margin-top: 20px; opacity: .9; max-height: 84px; overflow: auto;}


.input_txt {}
.input_txt input[type='text'], .cnt_wrap.keybrd > p {-webkit-box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,.2); box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,.2); -webkit-box-sizing: border-box; box-sizing: border-box; border: 0px; width: 100%; height: 50px; line-height: 48px; font-size: 20px; font-weight: normal; padding-left: 16px; padding-right: 16px; color: #000; opacity: 1;}

.input_txt2 {-webkit-box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,.2); box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,.2); -webkit-box-sizing: border-box; box-sizing: border-box; border: 0px; width: 100%; height: 50px; line-height: 48px; font-size: 20px; font-weight: normal; padding-left: 16px; padding-right: 16px; color: #000; opacity: 1;}

.cnt_wrap.keybrd .input_txt {text-align: center; margin-bottom: 20px;}
.cnt_wrap.keybrd .input_txt input[type='text'] {width: 44%;}
.cnt_wrap.keybrd > p {width: 40%; margin: 30px auto; background-color: #eaeaea; font-weight: 700;}

ul.status {margin-top: 30px;}
ul.status li {background-color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #eee; width: 16%; height: 50px;  line-height: 48px; text-align: center;}
ul.status li span {font-size: 16px;}
ul.status li em {font-size: 22px;}

ul.status li:nth-child(3) {width: 36%; padding-left: 16px; padding-right: 16px;}
ul.status li:nth-child(3) > * {display: inline-block; float: left;}
/**/
ul.status.word {margin-top: 130px;}


ul.status_long {margin-top: 30px;}
ul.status_long li {background-color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #eee; width: 25%; height: 50px;  line-height: 48px; text-align: center;}
ul.status_long li span {font-size: 16px;}
ul.status_long li em {font-size: 22px;}

ul.status_long li:nth-child(2) {width: 50%; padding-left: 16px; padding-right: 16px;}
ul.status_long li:nth-child(2) > * {display: inline-block; float: left;}
/**/
ul.status_long.word {margin-top: 130px;}

ul.status_read {margin-top: 30px;}
ul.status_read li {background-color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #eee; width: 20%; height: 50px;  line-height: 48px; text-align: center;}
ul.status_read li span {font-size: 16px;}
ul.status_read li em {font-size: 22px;}

ul.status_read li:nth-child(2) {width: 40%; padding-left: 16px; padding-right: 16px;}
ul.status_read li:nth-child(2) > * {display: inline-block; float: left;}
/**/
ul.status_read.word {margin-top: 130px;}

/* 메모장 JJR 2022-08-05 */
ul.status_memo {margin-top: 30px;}
ul.status_memo li {background-color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #eee; width: 33%; height: 50px;  line-height: 48px; text-align: center;}
ul.status_memo li span {font-size: 16px;}
ul.status_memo li em {font-size: 22px;}
/**/
ul.status_memo.word {margin-top: 130px;}


.view_word {margin: 20px auto;}
.view_word > p {text-align: center; -webkit-box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,.2); box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,.2); -webkit-box-sizing: border-box; box-sizing: border-box; border: 0px; width: 25%; height: 50px; line-height: 48px; font-size: 20px; font-weight: normal; padding-left: 16px; padding-right: 16px; color: #000; }
.view_word > p:first-of-type > span {opacity: .3;}
.view_word > p:nth-of-type(2) {width: 44%; background-color: #eaeaea; font-weight: 700; opacity: 1; margin-left: 3%; margin-right: 3%;}
.view_word > p:nth-of-type(3) > span {opacity: .7;}


/* pagination */

.pagination { text-align: center; font-size:0; margin-top:20px; }
.pagination li { display: inline-block; vertical-align: middle; margin-right: -1px;}
.pagination li a { display: block; border: 1px solid #e9e9e9; color: #555; background-color:#fff; width: 39px; height: 39px; line-height: 37px; font-size: 14px; transition: all .15s ease-in-out; }
.pagination li a:hover{ color:#0087e7; position: relative; z-index:2; }
.pagination li.active a{ background-color: #0087e7; border-color: #0087e7; position: relative; z-index:2; color: #fff;}


/*-----------------------------------------------------------------*/
/* progress
/*-----------------------------------------------------------------*/
.horizontal.progress-bar {
    float: left;
    height: 45px;
    width: 78%;
    padding: 12px 0;
    margin-top: 5px;
    margin-left: 10px;
}

.horizontal .progress-track {
    position: relative;
    width: 100%;
    height: 16px;
    background: #ccc;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.horizontal .progress-fill {
    position: relative;
    background: #0095ff;
    height: 16px;
    width: 0%;
    color: #fff;
    text-align: center;
    line-height: 15px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.horizontal .progress-fill > span {font-size: 8px; padding-left: 5px;}













/*-----------------------------------------------------------------*/
/* keybrd
/*-----------------------------------------------------------------*/
.keybrd_wrap { max-width:820px; margin:0 100px; } /* .container 1000->1200px으로 늘렸을 때 마진 양옆 100px씩 추가 */
.keybrd_wrap ul {width: 40%; margin-top: 8px;}
.keybrd_wrap ul li {width: 45px; height: 56px; line-height: 54px; text-align: center; background-color: #fff; margin: 0px 5px; position: relative; font-size: 20px;}
.keybrd_wrap ul li.on {background-color: #000; color: #fff;}


.keybrd_wrap ul li:nth-child(-n+5) {height:50px; line-height: 35px;}
.keybrd_wrap ul li:nth-child(-n+5)::before {
    content: attr(class);
    position: absolute;
    top: -15px;
    left: 0px;
    width: 45px;
    height: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-color: #fff;
    z-index: 1;
    font-size: 0;     
}

.keybrd_wrap ul li:nth-child(n+16):nth-child(-n+18) {height:50px; line-height: 65px;}
.keybrd_wrap ul li:nth-child(n+16):nth-child(-n+18)::after {
    content: attr(class);
    position: absolute;
    bottom: -15px;
    left: 0px;
    width: 45px;
    height: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #fff;
    z-index: 1;
    font-size: 0; 
}

.keybrd_wrap ul li.on:nth-child(-n+5)::before,
.keybrd_wrap ul li.on:nth-child(n+16):nth-child(-n+18)::after {
    content: attr(class);
    background-color: #000;
}



/* hand left */
.keybrd_wrap .hand_left {position: relative; -webkit-transform: rotate(16deg);transform: rotate(18deg); margin-left: 4%; margin-right: 8%;}
.keybrd_wrap .hand_left li:nth-child(5n+1),
.keybrd_wrap .hand_left li:nth-child(5n+0) {margin-top: 20px;}
.keybrd_wrap .hand_left li:nth-child(5n+2),
.keybrd_wrap .hand_left li:nth-child(5n+4) {margin-top: 10px;}
.keybrd_wrap .hand_left li:nth-child(3) {}

.keybrd_wrap .hand_left li:nth-child(n+16) {position: absolute; bottom: -48px; right: 148px;}
.keybrd_wrap .hand_left li:nth-child(n+17) {position: absolute; bottom: -60px; right: 88px;}
.keybrd_wrap .hand_left li:nth-child(n+18) {position: absolute; bottom: -66px; right: 26px;}




/* hand right */
.keybrd_wrap .hand_right {-webkit-transform: rotate(-22deg);transform: rotate(-18deg); margin-left: 8%; margin-top: -2px;}
.keybrd_wrap .hand_right li:nth-child(5n+1),
.keybrd_wrap .hand_right li:nth-child(5n+0) {margin-top: 20px;}
.keybrd_wrap .hand_right li:nth-child(5n+2),
.keybrd_wrap .hand_right li:nth-child(5n+4) {margin-top: 10px;}
.keybrd_wrap .hand_right li:nth-child(16) {background-image: url(../images/star@2x.png); background-position: center 20px; background-repeat: no-repeat; background-size: 24px 24px;}
.keybrd_wrap .hand_right li.on:nth-child(16) {background-image: url(../images/star_w@2x.png);}


.keybrd_wrap .hand_right li:nth-child(n+16) {position: absolute; bottom: -66px; left: -20px;}
.keybrd_wrap .hand_right li:nth-child(n+17) {position: absolute; bottom: -60px; left: 40px;}
.keybrd_wrap .hand_right li:nth-child(n+18) {position: absolute; bottom: -48px; left: 98px;}










/*-----------------------------------------------------------------*/
/* footer
/*-----------------------------------------------------------------*/

/*-----------------------------------------------------------------*/
/* 문장연습 CSS 추가 LHH 2019-07-03 수 
/*-----------------------------------------------------------------*/



.bg{color: #0087e7 !important; font-weight: inherit;}
.bgfix{color: #999999; font-weight: inherit;}
.bgright{color: #3333ff; font-weight: inherit;}
.bgwrong{color:#e7008b !important; font-weight: inherit;}

#currentword{border:1px solid #e7008b !important; font-weight:bold;}

#prevword, #nextword { color:#666}
#prevword2, #nextword2 { color:#AAA}

.top_set { height: 54px; overflow: hidden; vertical-align: middle; }
label.switch { display: inline-block; width: 70px; height: 32px; cursor: pointer; position: relative; background-color: #6fc3ff; margin-top: 12px; }
label.switch::before { content: ''; display: block; width: 26px; height: 26px; top: 3px; left: 41px; right: 38px; position: absolute; background-color: #fff; transition: all .4s ease; }

input:checked + label.switch { background-color: #bbb; }
input:checked + label.switch:before { -webkit-transform: translateX(-38px); -ms-transform: translateX(-38px); transform: translateX(-38px); }

label.round { border-radius: 40px; float: right; }
label.round::before { border-radius: 50% }

#btn_off{ display:none;}


/* === CAS RENEW edit by.Joanne === */

/* --- button --- */
.btn-square { font-family: 'Noto Sans KR', sans-serif; color:#333; background-color: rgb(239, 239, 239);
	display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; border-radius: 3px; border: 1px solid transparent; line-height: 1.25; text-transform: capitalize; font-size: 15px; padding: 10px 19px; cursor: pointer;
	-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: all .15s ease-in-out; }
.btn-square.min { padding: 5px 12px; }
.btn-square:hover,
.btn-square:focus,
.btn-square:active { background-color: #ddd; border-color: #ddd; }
.btn-round { font-family: 'Noto Sans KR', sans-serif; color:#333; background-color: rgb(239, 239, 239);
	display: inline-block !important; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; border-radius: 30px; border: 1px solid transparent; line-height: 1.25; text-transform: capitalize; padding: 10px 19px; cursor: pointer;
	-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: all .15s ease-in-out; }
.btn-round:focus,
.btn-round:hover,
.btn-round:active { background-color: #ddd; border-color: #ddd; }
.btn-small { padding: 3px 10px; }
.btn-primary { background-color: #6fc3ff; color:#fff !important; }
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active { background-color: #0087e7; border-color: #0087e7; }
.btn-secondary { background-color: #ddd; color:#333 !important; }
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active { background-color: #ccc; border-color: #ccc; }
.btn-success { background-color: #ff58bc; color:#fff !important; }
.btn-success:hover,
.btn-success:focus,
.btn-success:active { background-color: #e7008b; border-color: #e7008b; }
.btn-admin { background-color: #bc58ff; color:#fff !important; }
.btn-admin:hover,
.btn-admin:focus,
.btn-admin:active { background-color: #8b00e7; border-color: #8b00e7; }

/* --- table --- */
.table { width:100%; border-collapse: collapse; border-bottom: 1px solid #aaa; }
.table th { padding:10px; text-align:left; font-size:14px; line-height: 1.6; letter-spacing:-0.01em; font-weight:600; color: #222; word-break:keep-all; width:auto; }
.table td {font-size:14px; line-height: 1.6; letter-spacing:-0.01em; padding:10px; word-break:keep-all; text-align:center; }
.table td.title { text-align:left; font-weight:500; font-size:15px; }
.table td.title a { transition:all 0.3s ease; }
.table td.title a:hover { color:#0087e7; }
.table td.account { text-align:right; letter-spacing:0; font-weight:600; }
.table td.plus { color:#0087e7; }
.table td.minus { color:#e7008b; }
.table td.end { color:#aaa; }
.table td.sub { color:#0087e7 }
.table td.sup { color:#e7008b }
.table td b { color:#e7008b; }
.table thead { border-bottom: 1px solid #0087e7; }
.table thead th,
.table thead td { background:#6fc3ff; border:none; text-align:center; font-size:15px; font-weight:500; padding:5px 10px; color: #fff; width:auto; }
.table tbody tr { border-bottom: 1px dashed #e9e9e9; }
.table tbody tr:last-child { border-bottom:none; }
.table tfoot th,
.table tfoot td { background:#efefef; text-align:center; font-size:15px; font-weight:500; color: #222; width:auto; }
.table tfoot td strong { color:#0087e7; }
.table .sch_word { color: #fff; }
.table .fa-chevron-right { color:#6fc3ff; }
.table .notice_top { background:#fff4fb; }
.table .notice_top i { color:#e7008b; }

/* --- main --- */
.container.home1 { padding: 80px 150px; background:#f5f5f5 no-repeat center center; background-size:100% 100%; text-align:center; color:#333; letter-spacing:-.05em; }
.container.home1 h1 { margin-bottom:20px; letter-spacing:.01em; }
.container.home1 h1 em { display:inline; }
.container.home1 p { font-weight:400; }
.container.home1 .nav { margin:25px -10px; position: static; display:flex; flex-flow: row wrap; justify-content:center; align-content:center; }
.container.home1 .nav li { flex: 0 1 calc(100% / 3); text-align: center; font-size: 1.5em; height:160px; }
.container.home1 .nav li a { display:flex; flex-flow: row wrap; justify-content:center; align-items:center; height:calc(100% - 70px); margin:10px; padding:25px 20px; border-radius:.5rem; color:#333; font-size:1.75rem;
	background:rgba(255,255,255,.8); box-shadow:2px 4px 10px rgba(0,0,0,.1); -webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out; }
.container.home1 .nav li a i { display:inline-block; min-width:70px; font-size:3.5rem; margin-right:10px;
	background: linear-gradient(to right, #6fc3ff, #0095ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.container.home1 .nav li a span { display:inline-block; min-width:4.5em; font-family:'SANJUGotgam',serif; }
.container.home1 .nav li a:hover { color:#0087e7; background:rgba(218,241,255,.9); }
.container.home1 .bottom { display:flex; justify-content:space-between; }
.container.home1 .rolling { width:calc(82.5% - 2rem); padding:0 1rem; display:flex; border-radius:.5rem; box-shadow:2px 4px 10px rgba(0,0,0,.1); 
	background:rgba(255,255,255,.8); transition: background-color .15s ease-in-out; }
.container.home1 .rolling:hover { background:rgba(218,241,255,.9); }
.container.home1 .rolling .tit { width:5rem; line-height: 48px; font-size:1.25em; font-weight:700; text-align:center; color: #333; }
.container.home1 .rolling .tit i { vertical-align:.5px; }
.container.home1 .rolling .roll_tit { width:calc(100% - 8rem); height: 48px; position: relative; overflow: hidden; }
.container.home1 .rolling .roll_tit li{ width:calc(100% - 2rem); height: 48px; position: absolute; top: 100%; padding:0 1rem; }
.container.home1 .rolling .roll_tit li:first-child { top:0; }
.container.home1 .rolling .roll_tit li a.data { display: inline-block; width:100%; height:48px; line-height: 48px; font-size:1.25em; color:#333; 
	overflow: hidden; text-align:left; text-overflow: ellipsis; white-space:nowrap; -webkit-transition: color .15s ease-in-out; transition: color .15s ease-in-out; }
.container.home1 .rolling .roll_tit li a.data:hover { color:#0087e7; }
.container.home1 .rolling a.plus { width:3rem; line-height: 48px; font-size:1em; color:#333; letter-spacing:0; -webkit-transition: color .15s ease-in-out; transition: color .15s ease-in-out; }
.container.home1 .rolling a.plus i { font-size:1.25em; }
.container.home1 .rolling a.plus:hover { color:#0087e7; }
.container.home1 .rolling i { vertical-align: -2px; }
.container.home1 .go_home { width:calc(17.5% - 2rem - 20px); padding:0 1rem; border-radius:.5rem; box-shadow:2px 4px 10px rgba(0,0,0,.1); background:rgba(255,255,255,.8);
	line-height: 48px; font-size: 1.25em; font-weight: 700; text-align: center; color: #333; }


/* --- head --- */
.window_nav { left:15px; }
.window_nav > li { position: relative; width: 45px; height:auto; margin-bottom: 2px; font-size: 14px; }
.window_nav > li > a {display: block; height:3.35rem; padding:0; -webkit-box-sizing: border-box; box-sizing: border-box; background:#98d4ff;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	-webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out; }
.window_nav > li > a > span { display:block; text-indent:0; margin-top:5px; font-size:9px; line-height:1; text-align:center; }
.window_nav > li > a > i { font-size:1.25em; }
.window_nav > li:hover > a { background: #e2f2fd; color: #0087e7; }
.window_nav > li.on > a { background: #e2f2fd; color: #0087e7; }
.window_nav > li.on > a > span { display:block; }

/* --- mypage --- */
.flex_box { display:flex; align-items:flex-start; }

.nav-tabs { width:calc(100% - 40px); display:flex; border-bottom: 1px solid #e9e9e9; position: relative; padding:0 20px; }
.nav-tabs .nav-item { display: block; width:auto; padding: 10px 0; cursor: pointer; z-index:1; text-align:center; margin-right:20px; }
.nav-tabs .nav-link { display: block; width:100%; height:100%; color: #aaa; position: relative; font-size:1rem; font-weight:500; letter-spacing: -0.05em; word-break:keep-all; transition: all .15s ease-in-out; }
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover { color: #222; }
.nav-tabs .nav-item.current .nav-link,
.nav-tabs .nav-item.current .nav-link:focus,
.nav-tabs .nav-item.current .nav-link:hover { color: #0087e7; }
.nav-tabs .nav-item.current .nav-link:after { content:''; position: absolute; height: 2px; width:100%; left:0; bottom: -10px; background:#0087e7; }
.tab-content { width:calc(100% - 40px); position:relative; padding: 20px; }
.tab-content .tab-panel { display: none; width:100%; height:440px; }
.tab-content .tab-panel.current{ display: inherit; }

.profile_box { width:150px; background:#fff; padding:10px 0 20px; text-align:center; box-shadow:2px 4px 10px rgba(196,199,204,.5); border-radius:.5rem; }
.profile_box p { color:#aaa; margin-top:5px; letter-spacing: -0.05em; font-size:14px; font-weight:400; }
.profile_box p:nth-of-type(1) { margin-top:0; }
.profile_box p a { color:#aaa; font-size:14px; letter-spacing: -0.05em; transition: all .15s ease-in-out; }
.profile_box p a:hover { color: #222; }
.profile_box .tit { color:#222; font-size:1rem; font-weight:500; letter-spacing: -0.05em; padding: 10px 0; }
.profile_box .img { display:inline-block; border-radius:50%; overflow:hidden; }
.profile_box .name { color:#222; font-size:1rem; }
.profile_box .cash { color:#0087e7; font-weight:600; letter-spacing:0; }
.tab_box { width:calc(100% - 170px); background:#fff; padding:10px 0; margin-left:20px; box-shadow:2px 4px 10px rgba(196,199,204,.5); border-radius:.5rem; min-height:500px; position:relative; } 
.board_box { width:calc(100% - 40px); background:#fff; padding:25px 20px; box-shadow:2px 4px 10px rgba(196,199,204,.5); border-radius:.5rem; min-height: 500px; max-height: 600px; position:relative; }
.tab_box .foot { position:absolute; width:calc(100% - 40px); bottom:20px; }
.board_box .foot { position:absolute; width:calc(100% - 40px); bottom:25px; }
.sub_cont .btn_box { position:absolute; bottom:0; right:0; }
.sub_cont { width:100%; min-height:540px; max-height:600px; overflow-y:auto; }

/* --- layer popup --- */
.dim_layer_popup { display: inline-block; }
.dim_layer_pop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-color: rgba(0,0,0,0.5); transition:all .2s; }
.dim_layer_pop .pop_layer { position:relative; top: 50%; left: 50%; width: calc(100% - 50px); min-width:600px; max-width:1000px; background:#fff; transform:translate(-50%,-50%); z-index: 200; }
.pop_layer .layer_close_btn.x_btn { position:absolute; top:-15px; right:-15px; z-index:102; }
.pop_layer .layer_close_btn.x_btn button{ display:block; width:40px; height:40px; border-radius:50%; background-color:#6fc3ff; font-size:16px; line-height:40px; text-align:center; color:#fff; transition: background ease-in 0.15s; }
.pop_layer .layer_close_btn.x_btn button:hover,
.pop_layer .layer_close_btn.x_btn button:focus { background:#0087e7; }
.pop_head .tit_under { width:100%; border-bottom: 1px solid #e9e9e9; }
.pop_head .tit_under span { display: inline-block; width:auto; font-size:16px; font-weight:500; padding: 10px 0; margin-left:20px; color:#0087e7; position:relative; }
.pop_head .tit_under span:after { content:''; position: absolute; height: 2px; width:100%; left:0; bottom: 0px; background:#0087e7; }
.pop_body { padding:20px; }
.pop_body .output { margin-top:20px; font-size:1.5em; line-height:1.75; max-height:350px; overflow-y:auto; }
.pop_body .output sub { color:#0087e7; }
.pop_body .output sup { color:#e7008b; }
.pop_foot { padding:10px 20px; display:flex; justify-content:flex-end; }
@media print {
	.dim_layer_pop { position:static; }
	.dim_layer_pop .pop_layer { position:static; width:100%; max-width:100%; height:100%; transform:translate(0,0); page-break-inside: auto; }

	.layer_close_btn.x_btn,
	.layer_close_btn.x_btn button,
	.fa-xmark,
	.pop_head .tit_under span:after,
	.pop_foot,
	.layer_print_btn { display:none; }
	.pop_body .output { max-height:100%; height:100%; overflow-y:unset; page-break-inside: auto; }
}

/* --- board --- */
.window_nav ~ .cnt_wrap { margin:0 !important; }
.window_nav ~ .cnt_wrap #bo_v_title .bo_v_tit { font-size: 1.75rem; }
.window_nav ~ .cnt_wrap .bo_v_nb li .nb_tit { color:#0087e7; }
.window_nav ~ .cnt_wrap #bo_w { padding:0; margin:-10px 0; }
.window_nav ~ .cnt_wrap #bo_v_con,
.window_nav ~ .cnt_wrap #bo_v_con p { font-size: 14px; line-height: 1.6; letter-spacing:-0.01em; word-break: keep-all; font-weight:400; }
.window_nav ~ .cnt_wrap .write_div input[type='text'] { border:1px solid #ccc; background:#fff; height:40px; line-height:40px; text-indent:none; padding: 5px; }
.window_nav ~ .cnt_wrap .write_div input[type='file'] { border:none; background:#fff; height:30px; line-height:30px; text-indent:none; padding:0; }
.window_nav ~ .cnt_wrap .write_div input[type='password'] { border:1px solid #ccc; background:#fff; height:40px; line-height:40px; text-indent:none; padding: 5px; }
.window_nav ~ .cnt_wrap .write_div textarea { max-height:200px !important; }

.mv-list { position:relative; }
.mv-list #gall_allchk { margin-bottom:.5rem; }
.mv-list ul { margin:0; display: grid; gap:8px; grid-template-columns:repeat(4, 239px); grid-template-rows:repeat(2, 1fr); }
.mv-list ul li { position:relative; }
.mv-list ul li .gall_chk { position:absolute; bottom:0.75rem; right:0; }
.mv-list ul li a { display: block; }
.mv-list ul li a .img { position: relative; text-align:center;}
.mv-list ul li a .img:before { content: '\f144'; font-family:"Font Awesome 6 Free",sans-serif; position: absolute; left: 50%; top:50%; font-size:64px; color:#fff; width:64px; height: 64px; margin:-32px 0 0 -32px; opacity:0.6; transition:all 0.3s ease; }
.mv-list ul li a .info { padding:.75rem; border: 1px solid #e9e9e9; border-top:0; }
.mv-list ul li a .info .tit { width:100%; font-size: 15px; line-height: 1.6; font-weight:500; letter-spacing:-0.01em; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; margin-bottom:.5rem; transition:all 0.3s ease; }
.mv-list ul li a:hover .info .tit { color:#0087e7; }
.mv-list ul li a .info .date { font-size:12px; color: #888; font-style: italic; }
.mv-list ul li a:hover .img:before { opacity:1; }

.list_cate { height:100%; display:flex; flex-wrap:wrap; gap:20px; }
.list_cate li { flex: 0 1 calc((100% - 40px)/3); font-size: 1.5em; }
.list_cate li a { display: flex; flex-direction:column; justify-content: center; align-items: center; padding: 25px 20px; min-height:150px;
	border-radius:.5rem; color: #fff; background: rgba(255,255,255,.8); box-shadow:2px 4px 10px rgba(196,199,204,.5);
	-webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out; }
.list_cate li.cate1.level1 a { background: #6fc3ff; }
.list_cate li.cate1.level2 a { background: #26a5ff; }
.list_cate li.cate1.level3 a { background: #0080dc; }
.list_cate li.cate1.level4 a { background: #005592; }
.list_cate li.cate2.level1 a { background: #c979ff; }
.list_cate li.cate2.level2 a { background: #d79bff; }
.list_cate li.cate2.level3 a { background: #bc58ff; }
.list_cate li.cate2.level4 a { background: #a013ff; }
.list_cate li.cate3.level1 a { background: #ff79c9; }
.list_cate li.cate3.level2 a { background: #ff58bc; }
.list_cate li.cate3.level3 a { background: #ff13a0; }
.list_cate li.cate3.level4 a { background: #ce007b; }
.list_cate li a .icon_group i { font-size:1.25em; -webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out; }
.list_cate li a h3 { font-size:1.5em; font-family:'SANJUGotgam',serif; font-weight:normal; margin:20px 0 10px; }
.list_cate li:hover a { background: #333 !important; }
.list_cate li:hover a .icon_group i { color:#ebb200; }


/* ----------------------------------------- */
/* audio_exam_edit */
.audio-exam-wrap { margin: 0 auto; }
.audio-exam-wrap .btn { padding: 8px 12px; font-size: 14px; }
.audio-exam-top { display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.audio-exam-top audio { width: 600px; max-width: 100%; }
.audio-exam-wrap .exam-note li:not(:last-child) {margin-bottom:5px;}
.audio-exam-wrap .audio-exam-hd {display:flex;align-items:center;justify-content:space-between;}
.audio-exam-actions { display: flex; gap: 6px; align-items: center; }
.audio-exam-countdown { font-weight: 700; color: #d23f31; }
.audio-exam-wrap textarea {font-size:20px; min-height:320px;resize:none;}
.exam-note { background: #f8f9fa; border: 1px solid #e9ecef; padding: 10px; font-size: 13px; border-radius: 4px; margin-top: 12px; }
.exam-note.disabled-msg {color:#d23f31;font-weight:600;}
.exam-note.empty-msg {color:#888;}