@charset "utf-8";

.overlay {display:none;position:fixed;left:0;right:0;top:0;width:100%;height:100vh;background:rgba(0,0,0,0.4);z-index:9999;}

.nav {display:block;position:fixed;top:0;left:-320px;width:320px;height:100%;overflow-y:auto;background:#fff;z-index:99999;
transform: translate(0,0);
transition: .5s;
}

.menu_on {transform:translate(0,0);}
.menu_on_default {transform: translate(320px,0);}

.nav .logo {display:block;position:relative;padding:20px;}
.nav .logo img {}
.nav a.btn_close {display:block;position:absolute;right:10px;top:10px;width:40px;height:40px;color:#222;line-height:32px;text-align:center;cursor:pointer;z-index:9;}
.nav a.btn_close i {font-size:24px;}

.ol {margin:0 20px 20px 20px;}
.ol ul {}
.ol ul:after {display:block;visibility:hidden;clear:both;content:""}
.ol ul li {display:block;float:left;margin:0 18px 0 0;}
.ol ul li:last-child {margin:0;}
.ol ul li a {display:block;font-size:16px;font-weight:400;line-height:40px;}
.ol ul li:last-child  a {color:var(--color);}

.snb {border-top:solid 1px #ddd;}
.snb ul {}
.snb ul li {display:block;border-bottom:solid 1px #ddd;}
.snb ul li a {display:block;padding:0 20px;font-size:18px;font-weight:18px;line-height:60px;}




#header_wrap {left:0;right:0;top:0;width:100%;padding:15px 20px;background:#fff;z-index:999;}
#header {width:100%;max-width:var(--content-w);margin:0 auto;}
#header #logo {float:left;width:220px;}
#header #logo a {display:block;line-height:60px;}
#header #logo img {width:100%;height:auto;}
#header #gnb {float:right;}
#header #gnb ul {}
#header #gnb ul:after {display:block;visibility:hidden;clear:both;content:""}
#header #gnb ul li {display:block;float:left;margin:0 60px 0 0;}
#header #gnb ul li:last-child {margin:0;}
#header #gnb ul li a {display:block;font-size:18px;font-weight:500;line-height:60px;}
#header .btn_nav {display:none;float:right;width:40px;height:50px;background:none;border:none;}
#header .btn_nav i {font-size:28px;}
#header_wrap.sticky {position:fixed;}


.viz {padding:80px 20px 110px 20px;overflow:hidden;
background: linear-gradient(to bottom,  rgba(241,241,240,1) 0%,rgba(214,213,218,1) 86%,rgba(214,213,218,1) 86%,rgba(199,198,203,1) 100%);
}
.viz .content {display:block;position:relative;width:100%;max-width:var(--content-w);margin:0 auto;}
.viz .content:after {display:block;visibility:hidden;clear:both;content:""}
.viz .content .cont {display:block;position:absolute;left:0;top:50%;
-webkit-transform:translate(0,-50%);
-moz-transform:translate(0,-50%);
-ms-transform:translate(0,-50%);
-o-transform:translate(0,-50%);
transform:translate(0,-50%);
}
.viz .content .img {float:right;width:640px;margin:0 -13% 0 0;}
.viz .content .img img {width:100%;height:auto;}
.viz .content h3 {display:block;margin:0 0 30px 0;font-size:60px;font-weight:300;}
.viz .content h3 strong {font-weight:700;}
.viz .content p {margin:0 0 40px 0;color:#666;font-size:22px;}
.viz .content a.btn {font-size:20px;font-weight:600;}


.sec01 {display:block;position:relative;margin:-130px 0 120px 0;padding:0 20px;z-index:3;}
.sec01 ul {width:100%;max-width:var(--content-w);margin:0 auto;}
.sec01 ul:after {display:block;visibility:hidden;clear:both;content:""}
.sec01 ul li {display:block;float:left;width:30%;margin:0 5% 0 0;}
.sec01 ul li:last-child {margin:0;}
.sec01 ul li a {display:block;}
.sec01 ul li a.img {margin:0 0 18px 0;}
.sec01 ul li a.img img {width:100%;height:auto;}
.sec01 ul li .cont {display:block;position:relative;}
.sec01 ul li a.subj {margin:0 0 18px 0;text-align:center;font-size:22px;font-weight:600;}
.sec01 ul li p {color:#666;font-size:18px;}
.sec01 ul li .opt {display:block;position:absolute;right:0;top:0;color:#666;font-size:16px;}
.sec01 ul li .opt i {font-size:20px;}
.sec01 ul li .opt i.xi-heart {color:#f00001;}
.sec01 ul li .opt i.xi-play {font-size:24px;}


.sec02 {padding:120px 20px;text-align:center;background:url(../img/bg_class.jpg) no-repeat 50% 50%;background-size:cover;}
.sec02 h3 {display:block;margin:0 0 12px 0;color:#fff;font-size:40px;font-weight:700;}
.sec02 p {margin:0 0 30px 0;color:#fff;font-size:18px;word-break:keep-all;}
.sec02 a.btn {color:var(--color);font-size:20px;font-weight:700;background:#fff;}


.sec03 {padding:120px 20px;}
.sec03 ul {width:100%;max-width:var(--content-w);margin:0 auto;}
.sec03 ul:after {display:block;visibility:hidden;clear:both;content:""}
.sec03 ul li {display:block;float:left;position:relative;width:45%;margin:0 10% 0 0;}
.sec03 ul li:last-child {margin:0;}
.sec03 ul li h3 {display:block;margin:0 0 20px 0;padding:0 0 20px 0;font-size:32px;font-size:32px;font-weight:800;border-bottom:solid 1px #ddd;}
.sec03 ul li h3 a{display:block;margin:0 0 20px 0;padding:0 0 20px 0;font-size:32px;font-size:32px;font-weight:800;border-bottom:solid 1px #ddd;}
.sec03 ul li a {display:block;position:relative;padding:0 120px 0 10px;color:#666;font-size:18px;line-height:35px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis; 
-o-text-overflow:ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
}
.sec03 ul li a:after {content:'';display:block;position:absolute;left:0;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;background:#666;border-radius:50%;}
.sec03 ul li a .date {display:block;position:absolute;right:0;top:0;}
.sec03 ul li a.more {display:block;position:absolute;right:0;top:0;padding:0;}
.sec03 ul li a.more:after {display:none;}


#footer_wrap {padding:60px 20px;text-align:center;background:#e5e5e5;}
#footer_wrap #logo {margin:0 0 20px 0;}
#footer_wrap p {color:#666;font-size:16px;}



@media screen and (max-width:1180px) {
.viz .content .img {width:50%;margin:0;}
.viz .content h3 {margin:0 0 24px 0;font-size:48px;}
.viz .content p {margin:0 0 40px 0;font-size:20px;}
.viz .content a.btn {font-size:18px;}
}



@media screen and (max-width:980px) {
#header #logo {width:180px;}
#header #logo a {line-height:40px;}
#header #gnb {display:none;}
#header .btn_nav {display:block;}


.viz {padding:60px 20px 40px 20px;}
.viz .content .cont {position:relative;left:0;top:0;margin:0 0 40px 0;text-align:center;
-webkit-transform:translate(0,0);
-moz-transform:translate(0,0);
-ms-transform:translate(0,0);
-o-transform:translate(0,0);
transform:translate(0,0);
}
.viz .content .img {float:none;width:100%;max-width:480px;margin:0 auto;}
.viz .content h3 {font-size:36px;}
.viz .content p {margin:0 0 30px 0;font-size:18px;}
.viz .content a.btn {font-size:18px;line-height:50px;}


.sec01 {margin:-60px 0 120px 0;padding:0 20px;}
.sec01 ul {max-width:360px;margin:0 auto;}
.sec01 ul li {float:none;width:100%;margin:0 0 40px 0;}
.sec01 ul li:last-child {margin:0;}
.sec01 ul li a.subj {margin:0 0 12px 0;font-size:18px;}
.sec01 ul li p {font-size:16px;}
.sec01 ul li .opt {font-size:14px;}
.sec01 ul li .opt i {font-size:20px;}
.sec01 ul li .opt i.xi-heart {color:#f00001;}
.sec01 ul li .opt i.xi-play {font-size:24px;}


.sec02 h3 {font-size:30px;}
.sec02 p {margin:0 0 24px 0;font-size:16px;}
.sec02 a.btn {font-size:18px;}


.sec03 ul li {float:none;width:100%;margin:0 0 40px 0;}
.sec03 ul li:last-child {margin:0;}
.sec03 ul li h3 {font-size:24px;}
.sec03 ul li a {padding:0 100px 0 10px;font-size:16px;line-height:30px;}
.sec03 ul li a.more img {width:32px;height:auto;}


#footer_wrap #logo img {width:180px;height:auto;}
#footer_wrap p {font-size:14px;}
}





#login_wrap {display:block;position:relative;width:100%;height:calc(100vh - 196px);background:url(../img/bg_login.png) no-repeat 50% bottom #f4f4f4;}

.login {display:block;position:absolute;left:50%;top:50%;width:90%;max-width:500px;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
.login .logo {margin:0 0 40px 0;text-align:center;}
.login .logo img {width:220px;height:auto;}
.login ul {padding:40px;background:#fff;border-radius:20px;}
.login ul li {display:block;margin:0 0 30px 0;}
.login ul li:last-child {margin:0;}
.login ul li label {display:block;margin:0 0 10px 0;font-size:18px;font-weight:500;}
.login ul li .frm_input {font-size:18px;}
.login ul li .btn.btn_act {display:block;width:100%;font-size:18px;}
.login ul li.link {color:#666;font-size:16px;text-align:center;}
.login ul li.link a {color:#666;}


@media screen and (max-width:980px) {
#login_wrap {height:calc(100vh - 186px);background-size:200% auto;}
.login .logo img {width:180px;height:auto;}
.login ul {padding:40px 20px;}
.login ul li label {font-size:16px;}
.login ul li .frm_input {height:50px;font-size:16px;line-height:48px;}
.login ul li .btn.btn_act {font-size:16px;}
.login ul li.link {font-size:14px;}
}




#body_wrap {padding:120px 20px;}

#myclass_wrap {width:100%;max-width:1180px;margin:0 auto;}
#myclass_wrap h3 {display:block;margin:0 0 60px 0;font-size:40px;font-weight:800;text-align:center;}
#myclass_wrap h4 {display:block;position:relative;margin:0 0 20px 0;padding:0 0 0 20px;font-size:26px;font-weight:600;}
#myclass_wrap h4:after {content:'';display:block;position:absolute;left:0;top:50%;width:8px;height:8px;margin:-4px 0 0 0;background:var(--color);border-radius:50%;}


@media screen and (max-width:980px) {
#body_wrap {padding:60px 20px;}
#myclass_wrap h3 {margin:0 0 40px 0;font-size:30px;}
#myclass_wrap h4 {margin:0 0 20px 0;padding:0 0 0 16px;font-size:20px;}
#myclass_wrap h4:after {width:6px;height:6px;margin:-3px 0 0 0;}
}

.table {margin:0 0 100px 0;border-top:solid 2px #444}
.nice_table {width:100%;border-collapse:collapse;border-spacing:0 5px;background:#FFF;}

.nice_table th, .nice_table td {display:table-cell;padding:22px 14px;font-size:18px;text-align:center;}

.nice_table th {font-weight:500;background:#eee;border-bottom: solid 1px #ddd;}
.nice_table td {position:relative;vertical-align:middle;color:#666;border-bottom:1px solid #ddd;}
.nice_table td strong {color:var(--color);font-weight:500;}
.nice_table td a {display:inline-block;line-height:42px;background:var(--color);border-radius:5px;}
.nice_table td i {font-size:20px;}

.nice_table th, .responsive_table td:before {padding:22px 8px;font-weight:500;font-size:18px;background:#eee;}


@media screen and (max-width : 980px) {
.responsive_table td:before {content: attr(data-th);display:none;position:absolute;left:0;top:0;width:140px;height:100%;font-size:16px;font-weight:500;}
.responsive_table {border:none;border-radius:0;}
.responsive_table tr:first-of-type {/*display:none;*/}
.responsive_table tr {border-bottom:none;border-bottom:solid 1px #ddd;}
.responsive_table th, .responsive_table td {padding:0;font-size:16px;text-align:left;}
.responsive_table td {display:block;padding:22px 14px 22px 160px;background:#fff;border-bottom:none;}
.responsive_table tr:before {display:block;}
.responsive_table td:before {display:block;}
.responsive_table td:last-of-type:before {border-bottom:none;}
.responsive_table th {display:none;}
.responsive_table tr td {background:#fff;}
.responsive_table td.nice_hidden_column {display:none;}

}

/* 모바일 화면 (768px 이하) */
@media screen and (max-width: 768px) {
    /* 수강/다운로드 버튼이 들어간 td 영역 처리 */
    .nice_table td[data-th="수강"] {
        display: flex !important;
        flex-direction: column; /* 세로 2줄 정렬 */
        gap: 6px;              /* 두 버튼 사이 간격 */
        align-items: center;   /* 버튼 중앙 정렬 (100% 꽉 채우려면 stretch) */
    }

    /* 버튼 요소 세로 배치 및 마진 초기화 */
    .nice_table td a {
        display: block;
        width: 100%;            /* 모바일에서 버튼 너비 100% (필요시 제거 가능) */
        margin-left: 0 !important; /* 인라인 margin-left 강제 제거 */
        text-align: center;
        padding: 8px 0;         /* 터치 영역 확보 */
    }
}


/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.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}


/* 기본테이블 */
.tbl_wrap {margin:0 0 10px}
.tbl_wrap table {width:100%;border-collapse:collapse;border-spacing:0}
.tbl_wrap caption {padding:10px 0;color:#4b8b99;font-weight:bold;text-align:left}

/*.tbl_head01 {margin:0 0 70px}*/
.tbl_head01 table {border-bottom:1px solid #666}
.tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head01 thead th {padding:12px 0;border-top:2px solid #000;border-bottom:1px solid #d3d3d3;background:#fff;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em}
.tbl_head01 thead a {color:#383838}
.tbl_head01 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head01 tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head01 tbody th {padding:10px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}
.tbl_head01 td {padding:20px 5px;border-top:1px solid #f3f3f3;line-height:1.5em;word-break:break-all;color: #666;}
.tbl_head01 td:first-child {border-left:0}
.tbl_head01 a {}

@media screen and (max-width: 1000px) {
    .tbl_head01 thead th { font-size:14px; }
    .tbl_head01 td { font-size:14px; }
}

@media screen and (max-width: 600px) {
    .tbl_head01 thead th { font-size:12px; }
    .tbl_head01 td { font-size:12px; }
}


/* 자료 없는 목록 */
.empty_table {padding:50px 0 !important;text-align:center !important;color:#666 !important}
.empty_list {padding:50px 0 !important;text-align:center !important;color:#666 !important}

/* 기본폼 */
.form_01{margin:10px}
.form_01 div{margin:5px 0;position:relative}
.form_01 li{margin:5px 0;position:relative}
.form_01 textarea {width:100%;height:100px}
/*.frm_input {height:40px}*/
.full_input {width:100%} 
.form_01 .frm_file {display:block;margin-bottom:5px;width:100%}
.form_01 select {height:40px;border-radius:3px}
.form_01 .frm_info {font-size:0.92em;color:#4162ff;text-align:left;margin:3px 0 10px;display:block;line-height:1.3em}


a.btn_frmline, button.btn_frmline {display:inline-block;padding:0 5px;height:1.9em;border:0;background:#fff;color:#3a8afd;border:1px solid #3a8afd;letter-spacing:-0.1em;text-decoration:none;vertical-align:top;line-height:1.9em} 
.btn_close {border:1px solid #dcdcdc;cursor:pointer;border-radius:3px;background:#fff}
a.btn_close {text-align:center;line-height:50px}

/* ckeditor 단축키 */
.cke_sc {margin:0 0 5px;text-align:right}
.btn_cke_sc {display:inline-block;padding:0 10px;height:23px;border:1px solid #ccc !important;background:#fafafa !important;color:#000 !important;text-decoration:none !important;line-height:1.9em;vertical-align:middle}
.cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f2f5f9;text-align:center}
.cke_sc_def dl {margin:0 0 5px;text-align:left}
.cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""}
.cke_sc_def dt, .cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid #e9e9e9}
.cke_sc_def dt {width:20%;font-weight:bold}
.cke_sc_def dd {width:30%}