@charset "utf-8"; /* skipnavi */
#skipnavi { position: absolute; top: -100px; z-index: 10000; width: 100%; }
#skipnavi li { float: left; width: 100%; position: absolute; top: 0; left: 0; }
#skipnavi a { overflow: hidden; text-align: center; color: #fff; }
#skipnavi a:focus, #skipnavi a:active { position: absolute; top: 100px; left: 0; height: auto; width: 100%; margin-bottom: 10px; padding: 10px; font-weight: bold; background: #1f3a4f; color: #fff; }

.inner { position: relative; width: 1440px; margin: 0 auto; }

/* 전체 스타일 리셋 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family:'Pretendard', 'Malgun Gothic', '맑은 고딕', 'Dotum', 'AppleGothic', 'sans-serif'; line-height: 1.6; color: #333; letter-spacing: -0.04em;}

/* 헤더 스타일 */
header { background: #f1f5f8; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.header-top { margin: 0 auto; padding: 50px 0 30px; display: flex; justify-content: space-between; }
.header-top .logo img { width: 100%; }
	.m-header.header-top{display:none;} /*모바일헤더*/
.header-top .search_wrap .search-bar { display: flex; align-items: center; width: 700px; border: 2px solid #000; border-radius: 50px; padding: 0.5rem; background-color: #fff;box-shadow: 0 0 7px rgba(51, 61, 112, 0.28); }
.header-top .search_wrap .search-bar select { border: none; padding-left:1rem; position: relative; font-size: 16px;font-weight: 500;}
.header-top .search_wrap .search-bar select:after{content: '';position: absolute;top: calc(50% - 15px);right: -22px;width: 1px;height: 30px;background-color: #d2d2d2;}
.header-top .search_wrap .search-bar input { flex: 1; border: none; padding: 0.5rem; outline: none; }
.header-top .search_wrap .search-bar input::placeholder { font-size: 14px; }
.header-top .search_wrap .search-bar button { padding-right:0.7rem; }
.header-top .search_wrap .search-bar button .search-icon { background: url(../images/search_icon.png) no-repeat 100%; background-size: 100%; width: 24px; height: 25px; }
.header-top .search_wrap .keyword { display: flex; justify-content: space-between; padding: 20px 35px 0; }
.header-top .search_wrap .keyword .best_keyword { color: #8e8e8e; }
.header-top .search_wrap .keyword .keyword_list { display: flex; gap: 5px; }
.header-top .search_wrap .keyword .keyword_list li a { font-size: 14px; color: #555; padding: 7px 15px; border: 1px solid #d2d2d2; border-radius: 25px; font-weight: 600; background-color: #fff; }
.header-top .user-menu { padding: 20px 0; }
.header-top .user-menu a { text-decoration: none; color: #333; }
.header-top .user-menu a.signup { padding: 10px 20px; border: 1px solid #898989; border-radius: 10px; background-color: #fff; font-weight: 600; margin-left: 25px; }

/* 메인 -키워드 */
header .main-nav { background: #f5f5f5; padding: 20px 0; border-top: 1px solid #d2d2d2; }
header .main-nav .nav_wrap { display: flex; justify-content: space-between; max-width: 1440px; margin: 0 auto; padding: 0 0 0 10px;letter-spacing: -0.06em; }
header .main-nav .nav_wrap .depth_1_menu { display: flex; gap: 5px;border-radius: 25px; background-color: #3a70a7; padding: 4px 20px; color: #fff; margin-right: 20px; position: relative;align-items: center;word-break: keep-all; }
header .main-nav .nav_wrap .depth_1_menu::after { content: ''; position: absolute; top: calc(50% - 15px); right: -22px; width: 1px; height: 30px; background-color: #d2d2d2; }
header .main-nav .nav_wrap .keyword_wrap { display: flex; gap: 5px; }
header .main-nav .nav_wrap .close_icon { width: 16px; height: 16px; background: url(../images/close.svg) no-repeat 100%; background-size: 100%;}
header .main-nav ul.top_nav_list { display: flex; gap: 5px; margin-left: 20px;flex-wrap: wrap; }
header .main-nav ul.top_nav_list li a.icon_flex { display: flex; gap: 5px;align-items: center; word-break: keep-all;}
header .main-nav ul.top_nav_list li a.link_line { border: 1px solid #537ef4; border-radius: 25px; background-color: #537ef4; padding: 5px 10px; color: #fff; font-size:14px; }
header .main-nav .nav_wrap .nav_btn_area{display: flex;gap: 10px;align-items: flex-start;}

/* 메인 콘텐츠 영역 */
main { padding-top: 40px; }
main .flex { display: flex; gap: 40px; }
/* 사이드바 */
main .sidebar { width: 270px; min-height: 850px; flex-shrink: 0; padding: 20px 20px; border: 1px solid #e5e5e5; border-radius: 10px; }
main .sidebar .category h2 { font-size: 20px; padding: 10px 0; font-weight:800; position: relative; border-bottom: 1px solid #cbcbcb; }
main .sidebar .category h2::after { position: absolute; content: ''; background: url(../images/chevron_right.svg) no-repeat 100%; width: 24px; height: 24px; right: 0; top: calc(50% - 12px); }
main .sidebar .category h2.active { border-bottom: 1px solid #537ef4; }
main .sidebar .category h2.active::after { background-image: url(../images/keyboard_arrow_down_point.svg); }
main .sidebar .category ul.depth_1 { list-style: none; }
main .sidebar .category ul.depth_1 > li.depth_1_name > a { display: block; padding: 10px 0 10px 30px; text-decoration: none; color: #333; font-weight:400; font-size: 16px; color: #909090; border-top: 1px solid #cbcbcb; position: relative; letter-spacing:-0.05em; }
main .sidebar .category ul.depth_1 > li.depth_1_name.active > a, main .sidebar .category ul.depth_1 > li.depth_1_name:hover > a { color: #000; font-weight: 800;}
main .sidebar .category ul.depth_1 > li.depth_1_name:first-child a { border-top: none; }
main .sidebar .category ul.depth_1 > li.depth_1_name >a::before { position: absolute; content: ''; background: url(../images/folder.svg) no-repeat 100%; width: 24px; height: 24px; left: 0; top: calc(50% - 12px); }
main .sidebar .category ul.depth_1 > li.depth_1_name >a::after { position: absolute; content: ''; background: url(../images/chevron_right.svg) no-repeat 100%; width: 24px; height: 24px; right: 0; top: calc(50% - 12px); }
main .sidebar .category ul.depth_1 > li.depth_1_name:hover > a::after { background-image: url(../images/chevron_right_black.svg); }
main .sidebar .category ul.depth_1 > li.depth_1_name.active > a::before { background-image: url(../images/folder_open.svg); }
main .sidebar .category ul.depth_1 > li.depth_1_name.active > a::after { background-image: url(../images/keyboard_arrow_down_black.svg); }


/* 뎁스 2 */
main .sidebar .category ul.depth_2 { list-style: none; padding-left: 25px; border-top: 1px solid #cbcbcb; }
main .sidebar .category ul.depth_2 > li.depth_2_name > a { display: block; padding: 7px 0 7px 26px; text-decoration: none; color: #333; font-weight:500; font-size: 15px; color: #909090; position: relative; letter-spacing: -0.08em;}
main .sidebar .category ul.depth_2 > li.depth_2_name.active > a, main .sidebar .category ul.depth_2 > li.depth_2_name:hover > a { color: #000;  font-weight: 800;}
main .sidebar .category ul.depth_2 > li.depth_2_name > a::before { position: absolute; content: ''; background: url(../images/folder.svg) no-repeat 100%; width: 24px; height: 24px; left: 0; top: calc(50% - 12px); }
main .sidebar .category ul.depth_2 > li.depth_2_name > a::after { position: absolute; content: ''; background: url(../images/chevron_right.svg) no-repeat 100%; width: 20px; height: 20px; left: -21px; top: calc(50% - 10px); }
main .sidebar .category ul.depth_2 > li.depth_2_name:hover > a::after { background-image: url(../images/chevron_right_black.svg); }
main .sidebar .category ul.depth_2 > li.depth_2_name.active > a::before { background-image: url(../images/folder_open.svg); }
main .sidebar .category ul.depth_2 > li.depth_2_name.active > a::after { background-image: url(../images/keyboard_arrow_down_black.svg); }

/* 뎁스 3 */
main .sidebar .category ul.depth_3 { list-style: none; padding-left: 30px; }
main .sidebar .category ul.depth_3 li.depth_3_name > a { display: block; padding: 10px 0 10px 30px; text-decoration: none; color: #333; font-weight:500; font-size: 16px; color: #909090; position: relative; }
main .sidebar .category ul.depth_3 li.depth_3_name.active > a, main .sidebar .category ul.depth_3 li.depth_3_name:hover a { color: #000; font-weight: 800;}
main .sidebar .category ul.depth_3 li.depth_3_name > a::before { position: absolute; content: ''; background: url(../images/folder.svg) no-repeat 100%; width: 24px; height: 24px; left: 0; top: calc(50% - 12px); }
main .sidebar .category ul.depth_3 li.depth_3_name > a::after { position: absolute; content: ''; background: url(../images/chevron_right.svg) no-repeat 100%; width: 24px; height: 24px; left: -25px; top: calc(50% - 12px); }
main .sidebar .category ul.depth_3 li.depth_3_name:hover > a::after { background-image: url(../images/chevron_right_black.svg); }
main .sidebar .category ul.depth_3 li.depth_3_name.active > a::before { background-image: url(../images/folder_open.svg); }
main .sidebar .category ul.depth_3 li.depth_3_name.active > a::after { background-image: url(../images/keyboard_arrow_down_black.svg); }

/* mypage */
.leftMenu h2 { font-size: 20px; padding: 10px 0; font-weight:800; position: relative; border-bottom: 1px solid #cbcbcb; }
.leftMenu h2::after { position: absolute; content: ''; background: url(../images/keyboard_arrow_down_point.svg) no-repeat 100%; width: 24px; height: 24px; right: 0; top: calc(50% - 12px); }
.leftMenu ul.depth01 li{display: block;padding: 10px 0 10px 30px;text-decoration: none;font-weight: 500;font-size: 16px;color: #909090;position: relative;}
.leftMenu ul.depth01 li:after{position: absolute;content: '';background: url(../images/chevron_right.svg) no-repeat 100%;width: 24px;height: 24px;left: 0;top: calc(50% - 12px);}
.leftMenu ul.depth01 li.active a{color:#5068d8;}
.mypage .btn_area_m{width:460px;margin:0 auto;}



/* bbsList */
.bbsList {width:100%;border-top:2px solid #333;margin-bottom:50px;}
.bbsList th {background:#f9f9f9;border-bottom:1px solid #ccc;font-weight:bold;}
.bbsList th, .bbsList td {padding: 14px 5px;text-align:center;vertical-align:middle;}
.bbsList td {border-bottom:1px solid #e5e5e5;}
.bbsList td.title {text-align:left;}
.bbsList td .noData {padding:70px 0;}
.bbsList .btnArea .btnType {font-size:13px;padding:6px 10px;margin:2px;}
.bbsList tfoot td {background:#f9f9f9;}
.bbsList .imgArea {width:100px;height:100px;margin:0 auto;}
.bbsList .imgArea img {width:100%;height:100%;}
.bbsList td.bbs_title {text-align:left;}
span.notice_point {border-radius:5px;padding:5px 10px;color:#fff;margin-right:5px;font-size: 0.9em;font-weight: 400;}


/* 강좌 그리드 */
main .section_1 { flex: 1; }
main .section_1 .top_area { display: flex; /* justify-content: space-between;*/ align-items: center; padding: 28px 0px 10px; border-bottom: 1px solid #d2d2d2; margin-bottom: 35px; }
main .section_1 .top_area .total_edu_number { font-size: 20px; font-weight: 600; }
main .section_1 .top_area .total_edu_number .big_point { font-size: 22px; font-weight: 800; color: #000; }
main .section_1 .top_area .array { display: flex; gap: 20px; }
main .section_1 .top_area .array .array_text { color: #909090; font-size: 14px; display: flex; align-items: center; gap: 5px; font-weight: 600; }
main .section_1 .top_area .array .array_text .array_icon { width: 24px; height: 24px; background: url(../images/arrow_drop_down.svg) no-repeat; }
main .section_1 .top_area .array .array_text.active .array_icon , main .section_1 .top_area .array .array_text:hover .array_icon { background-image: url(../images/arrow_drop_down_black.svg); }
main .section_1 .top_area .array .array_text:hover { color: #000; transition: 0.5s; }
main .section_1 .top_area .array .array_text.active { color: #000; }
main .section_1 .top_area .array .new_array { position: relative; }
main .section_1 .top_area .array .new_array::after { content: ''; position: absolute; top: calc(50% - 10px); right: -11px; width: 2px; height: 20px; background-color: #d2d2d2; }

/* 강좌 카드 */
.edu_box_wrap { display: flex; gap: 19px; flex-wrap: wrap;}
.edu_box_wrap .edu_box { width: calc((100% / 3) - 13px); border: 1px solid #bdc8d8; border-radius: 20px; padding: 10px; }
.edu_box_wrap .edu_box:hover { border-color: #537ef4; box-shadow: 0 0 16px rgba(51,61,112,0.28); transition: 0.5s; }
.edu_box_wrap .edu_box img { width: 100%; }
.edu_box_wrap .edu_box .card-content { padding: 10px; }
.edu_box_wrap .edu_box .card-content .eud_breadscrumbs { display: flex; }
.edu_box_wrap .edu_box .card-content .eud_breadscrumbs .one_bread,  .edu_box_wrap .edu_box .card-content .eud_breadscrumbs .two_bread { color:#5068d8; font-weight: 600; }
.edu_box_wrap .edu_box .card-content .eud_breadscrumbs .one_bread a,
.edu_box_wrap .edu_box .card-content .eud_breadscrumbs .two_bread a{ color:#5068d8; }
.edu_box_wrap .edu_box .card-content .title { font-size: 18px; font-weight: 500; position: relative; padding: 5px 0 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edu_box_wrap .edu_box .card-content .title a:hover, .edu_box_wrap .edu_box .card-content .title a:active{text-decoration:underline; transition: 0.5s;}
.edu_box_wrap .edu_box .card-content .title::after { position: absolute; content: ''; width: 100%; height: 1px; left: 0; bottom: 0; background-color: #e5e5e5; }
.edu_box_wrap .edu_box .card-content .eud_breadscrumbs .arrow_icon { background: url(../images/keyboard_arrow_right_light.svg) no-repeat 100%; width: 24px; height: 24px; }
.edu_box_wrap .edu_box .card-content .tags { padding-top: 15px; display: flex; gap: 0.4rem 0.3rem; flex-wrap: wrap; }
.edu_box_wrap .edu_box .card-content .tags .tag { color: #686868; font-size: 12px; font-weight: 400; }

/* 페이지네이션 */
.skip { overflow: hidden; position: absolute; width: 1px; height: 1px; background: 0 0; font-size: 0 !important; color: transparent !important; line-height: 0; }

/* 페이징 처리*/
.p-pagination { position: relative; display: flex; margin: 70px auto; justify-content: center; gap: 10px; }
.p-page_control .next:before, .p-page_control .prev:before { content: ''; display: inline-block; width: 15px; height: 14px; margin-top: -2px; background-repeat: no-repeat; background-position: center center; vertical-align: middle; }
.p-page_control .prev:before { background-image: url('../images/chevron_left.svg'); }
.p-page_control .next:before { background-image: url('../images/chevron_right.svg'); }

.p-pagination.left { margin-left: 0; margin-right: auto }
.p-pagination.right { margin-left: auto; margin-right: 0 }
.p-page { display: table; margin: 0; }
.p-page_link {display: inline-block;width: 38px;height: 38px;font-size: 14px;color: #222;letter-spacing: -0.05em;border-radius: 10px;border: 1px solid #ced4da;text-align: center;line-height: 38px;}
.p-page_link.active { background: #537ef4; color: #fff; font-weight: 700; vertical-align: top;border: none !important;}
.p-page_link:hover {border: 1px solid #363c5a; }
.p-page_link-group { display: flex; vertical-align: top;gap: 10px;}
.p-page_control svg { vertical-align: middle }
.p-page_control .prev-one { display: none; background: 0 0 }
.p-page_control .next-one { display: none; background: 0 0 }


/* 푸터 */
footer { background: #343a40; color: #fff; padding: 20px 0 50px; margin-top: 80px; position: relative; }
footer .cnnu_link_box { display: inline-block; width: 895px; height: 150px; background-color: #00c471; position: absolute; left: 0; top: -75px; padding: 35px 50px 35px 257px; }
footer .cnnu_link_box .link_title { color: #fff; font-size: 24px; font-weight: 600; margin-bottom: 15px; }
footer .cnnu_link_box .link_info { color: #fff; font-size: 18px; font-weight: 500; }
footer .cnnu_link_box .quick_link { content: ''; position: absolute; background: url(../images/icon-arr-cc-bl-next.png) no-repeat; width: 50px; height: 50px; right: 50px; top: calc(50% - 25px); }


footer .footer_top { display: flex; justify-content: space-between; align-items: end; padding: 20px 0; position: relative; }
footer .footer_top::after { content: ''; position: absolute; width: 100%; height: 1px; background-color: rgba(188,189,191,0.2); left: 0; bottom: 0; }
footer .footer_top .footer-info p { color: #a0a1a7; }
footer .footer_top .social-links { display: flex; gap: 15px; }
footer .footer_top .social-links > li { border: 1px solid #33353c; border-radius: 25px; width: 45px; height: 45px; background-color: #33353c; position: relative; }
footer .footer_top .social-links .instagram { background: url(../images/instagram.png) no-repeat; width: 17px; height: 17px; position: absolute; left: calc(50% - 8.5px); top: calc(50% - 8.5px); }
footer .footer_top .social-links .facebook { background: url(../images/facebook.png) no-repeat; width: 9px; height: 19px; position: absolute; left: calc(50% - 4.5px); top: calc(50% - 9.5px); }
footer .footer_top .social-links .naver { background: url(../images/naver.png) no-repeat; width: 14px; height: 14px; position: absolute; left: calc(50% - 7px); top: calc(50% - 7px); }

footer .footer_bottom .util_wrap li a, footer .footer_bottom .copyright { color: #a0a1a7; font-size: 14px; }
footer .footer_bottom { display: flex; justify-content: flex-end; margin: 20px 0; }
footer .footer_bottom .util_wrap { display: flex; gap: 15px; }


/* 상단 이동 버튼 */
#btn_top { position: fixed; right: 2%; bottom: 8%; display: block; width: 62px; height: 62px; background: #fff;  border-radius: 50px; transition: all 0.3s ease; z-index: 50; box-shadow: 0 0 10px rgba(51, 61, 112, 0.28);}
#btn_top::after{background: url(../images/vertical_align_top.svg) no-repeat; width: 35px; height: 35px; content: ''; display: inline-block; left: calc(50% - 17.5px); top: calc(50% - 17.5px); position: absolute; background-size: 100%;}
#btn_top:hover::after{background-image: url(../images/vertical_align_top_point.svg); transition: 0.3s;}

/* 반응형 디자인 */
@media (max-width: 768px) { main { flex-direction: column; }

 .sidebar { width: 100%; }
 .header-top { flex-direction: column; gap: 1rem; }
 .search-bar { width: 100%; }
 }

/**모달키워드**/
#modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;z-index: 1000;overflow: hidden; }
.keyword-modal {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background: white;border-radius: 8px;padding: 24px;width: 600px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
.modal-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}
.modal-header h2 {font-size: 18px;font-weight: 600;color: #333;}
.close-btn {background: none;border: none;font-size: 24px;cursor: pointer;color: #666;}
.keyword-tags {max-height: 400px;overflow-y: auto;}
.tag-group {display: flex;flex-wrap: wrap;gap: 8px;margin-bottom: 12px;}
.tag {padding: 6px 12px;border-radius: 20px;background: #f5f5f5;color: #666;font-size: 14px;cursor: pointer;transition: all 0.2s;letter-spacing: -0.09em;}
.tag:hover {background: #e0e0e0;}
.tag.primary {background: #f0f7ff;color: #3182f6;}
.modal-footer {display: flex;justify-content: flex-end;gap: 8px;margin-top: 20px;padding-top: 20px;border-top: 1px solid #eee;}
.modal-footer button{font-size:16px; padding:10px 20px; font-weight:500;}
.modal-footer button.reset{padding: 10px 20px 10px 33px;}


/**모바일 메뉴 팝업**/
#m-side-menu{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 100; }
#snb {position: absolute;top: 0;right: 0;width: 100%;max-width: 580px;width: calc(100% - 70px);height: 100vh;background: #fff;padding:1rem;}

#slider_menu_close {position: absolute;top: 15px;right: calc(100% + 24px);background: url('../images/close.svg') 50% 50% no-repeat;background-size: cover;border:0;}
#sidebar {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);z-index: 101;}
#snb .category h2.active { border-bottom: 1px solid #537ef4; }
#snb .category h2.active::after { background-image: url(../images/keyboard_arrow_down_point.svg); }
#snb .category ul{font-size:14px;}
#snb .category ul.depth_1 { list-style: none; }
#snb .category ul.depth_1 > li.depth_1_name > a { display: block; padding: 10px 0 10px 30px; text-decoration: none; color: #333; font-weight:500; color: #909090; border-top: 1px solid #cbcbcb; position: relative; }
#snb .category ul.depth_1 > li.depth_1_name.active > a, #snb  .category ul.depth_1 > li.depth_1_name:hover > a { color: #000; font-weight: 800;}
#snb .category ul.depth_1 > li.depth_1_name:first-child a { border-top: none; }
#snb .category ul.depth_1 > li.depth_1_name >a::before { position: absolute; content: ''; background: url(../images/folder.svg) no-repeat 100%; width: 24px; height: 24px; left: 0; top: calc(50% - 12px); }
#snb .category ul.depth_1 > li.depth_1_name >a::after { position: absolute; content: ''; background: url(../images/chevron_right.svg) no-repeat 100%; width: 24px; height: 24px; right: 0; top: calc(50% - 12px); }
#snb .category ul.depth_1 > li.depth_1_name:hover > a::after { background-image: url(../images/chevron_right_black.svg); }
#snb .category ul.depth_1 > li.depth_1_name.active > a::before { background-image: url(../images/folder_open.svg); }
#snb .category ul.depth_1 > li.depth_1_name.active > a::after { background-image: url(../images/keyboard_arrow_down_black.svg); }

/* 뎁스 2 */
#snb .category ul.depth_2 { list-style: none; padding-left: 30px; border-top: 1px solid #cbcbcb; }
#snb .category ul.depth_2 > li.depth_2_name > a { display: block; padding: 10px 0 10px 30px; text-decoration: none; color: #333; font-weight:500;  color: #909090; position: relative; }
#snb .category ul.depth_2 > li.depth_2_name.active > a, #snb .category ul.depth_2 > li.depth_2_name:hover > a { color: #000;  font-weight: 800;}
#snb .category ul.depth_2 > li.depth_2_name > a::before { position: absolute; content: ''; background: url(../images/folder.svg) no-repeat 100%; width: 24px; height: 24px; left: 0; top: calc(50% - 12px); }
#snb .category ul.depth_2 > li.depth_2_name > a::after { position: absolute; content: ''; background: url(../images/chevron_right.svg) no-repeat 100%; width: 24px; height: 24px; left: -25px; top: calc(50% - 12px); }
#snb .category ul.depth_2 > li.depth_2_name:hover > a::after { background-image: url(../images/chevron_right_black.svg); }
#snb .category ul.depth_2 > li.depth_2_name.active > a::before { background-image: url(../images/folder_open.svg); }
#snb .category ul.depth_2 > li.depth_2_name.active > a::after { background-image: url(../images/keyboard_arrow_down_black.svg); }

/* 뎁스 3 */
#snb .category ul.depth_3 { list-style: none; padding-left: 30px; }
#snb .category ul.depth_3 li.depth_3_name > a { display: block; padding: 10px 0 10px 30px; text-decoration: none; color: #333; font-weight:500;  color: #909090; position: relative; }
#snb .category ul.depth_3 li.depth_3_name.active > a, #snb .category ul.depth_3 li.depth_3_name:hover a { color: #000; font-weight: 800;}
#snb .category ul.depth_3 li.depth_3_name > a::before { position: absolute; content: ''; background: url(../images/folder.svg) no-repeat 100%; width: 24px; height: 24px; left: 0; top: calc(50% - 12px); }
#snb .category ul.depth_3 li.depth_3_name > a::after { position: absolute; content: ''; background: url(../images/chevron_right.svg) no-repeat 100%; width: 24px; height: 24px; left: -25px; top: calc(50% - 12px); }
#snb .category ul.depth_3 li.depth_3_name:hover > a::after { background-image: url(../images/chevron_right_black.svg); }
#snb .category ul.depth_3 li.depth_3_name.active > a::before { background-image: url(../images/folder_open.svg); }
#snb .category ul.depth_3 li.depth_3_name.active > a::after { background-image: url(../images/keyboard_arrow_down_black.svg); }




/*하단 더보기*/
.more_btn_wrap{border-top: 1px solid #ddd; margin: 50px 0 0; position: relative; height: 40px;}



/*회원로그인*/
body.join_ty {background:#f5f5f5;min-width:320px;}
#join_wrap {position: absolute;width: 540px;background: #fff;border: 1px solid #e5e5e5;box-sizing: border-box;overflow: hidden;margin: 50px auto;padding: 0 39px;top: 50%;left: 50%;transform: translate(-50%, -50%);}

/**** login ****/
/* loginArea */
.loginArea {width:500px;margin:0 auto;border:1px solid #e5e5e5;border-bottom:1px solid #898989;box-shadow:0px 3px 1px rgba(0,0,0,0.05);text-align:center;box-sizing:border-box;}
.loginArea > div {padding:60px 10%;}
.loginArea .loginBox {width:100%;}
.loginArea .loginBox .loginInfo {position:relative;margin-bottom:10px;}
.loginArea .loginBox .loginInfo input {width:100%;}
.loginArea .loginBox .loginInfo #member_passwd {margin-top:10px;}
.loginArea .loginBox .loginInfo .btnLogin {width:100%;margin-top:10px;}
.loginArea .loginBox .linkList {background:#f9f9f9;padding:7px 20px;border-radius:5px;}
.loginArea .loginBox .linkList li {position:relative;padding:17px 0;border-top:1px dashed #cfcfcf;font-size:18px;}
.loginArea .loginBox .linkList li:first-child {border:0;}
.loginArea .loginBox .linkList li button {position:absolute;top:12px;right:0;}
.loginArea .linkList li {display:inline-block;padding:0 30px;position:relative;margin-bottom:20px;}
.loginArea .linkList li:before {position:absolute;top:50%;right:0;content:'';width:1px;height:12px;background-color:#777;margin-top:-7px;}
.loginArea .linkList li:last-child:before {width:0;height:0;}



/*** Header ***/
.join_header {position:relative;border-bottom:1px solid #e5e5e5;}
.join_header h1.logo a {display:block;font-size:0;overflow:hidden;background-size:contain;margin:0 auto;text-align: center;}

/*** Container ***/
.join_container {position:relative;}

/* join_step */
.join_step {width:100%;text-align:justify;}
.join_step li {position:relative;transition:all 0.4s;}
.join_step li i {display:block;position:absolute;left:0;top:0;border:2px solid  #4776eb;border-radius:100%;box-sizing:border-box;color: #4776eb;font-style:normal;font-weight:800;text-align:center;}
.join_step li.on {color: #4776eb;font-weight:800;}
.join_step li.on i {background: #4776eb;color:#fff;}
.join_step:after {display:inline-block;width:99%;content:"";}


/* join_header */
.join_header h1.logo {padding:30px 0 20px;}


/* join_container */
.join_container {margin-top:50px;min-height:300px;}
.join_container article h5 {font-size:20px;}
.join_container article h6 {font-size:18px;}
.join_container article dt, .join_container article dd {font-size:16px;}

/*** join_Footer ***/
.join_footer {padding:35px 0;color:#888;font-size:13px;font-weight:100;line-height:13px;text-align:center;}


/* join_step */
.join_step {height:40px;margin-bottom:60px;}
.join_step li {display:inline-block;height:40px;font-size:15px;line-height:40px;padding-left:49px;}
.join_step li i {width:40px;height:40px;line-height:36px;}

/* sns_area */
.sns_list_area .sns_area ul li:before {width:1px;height:12px;}
.sns_list_area .sns_area ul.login_sns_area li a {padding-top:100px;}
.sns_list_area .sns_area ul li a {width:80px;}

/* login_btn */
.login_btn li a {font-size:15px;}
.login_area .btn {height:60px;font-size:20px;line-height:60px;}

/* form_list_m */
.form_list_m .input_ty {height:50px;}

/* find_idpw_area */
.find_idpw_area .form_list_m input {height:50px;}
.form_list_m dl {margin-bottom: 25px;}

/* btn_area_m */
.btn_area_m button {font-size:18px;}
.btn_area_m .btn_m {height:60px;}

/** Title & Text **/
.tit_m {font-size:30px;margin-bottom:50px;color:#1c1c1c;font-weight:800;line-height:30px;text-align:center;}


.txt_m {font-size:18px;}
.txt_m dd {font-size:14px;}

/** Login **/
.login_area {position:relative;margin-top:33px;}
.input_list .input_ty {font-size:15px;width:100%;height:50px;}
.input_list li {margin-top:10px;}
.input_list li:first-child {margin-top:0;}
.input_list li.info {position:relative;padding-left:18px;color:#ff7800;font-size:13px;line-height:16px;}
.input_list li.info:before {position:absolute;left:0;top:1px;width:13px;height:13px;background:#ff7800;border-radius:100%;color:#fff;font-size:11px;line-height:13px;text-align:center;content:"!";}

/* login_btn */
.login_btn {margin-top:10px;font-size:0;text-align:center;}
.login_btn li {display:inline-block;position:relative;padding:0 1px;}
.login_btn li:before {position:absolute;left:0;top:17px;width:1px;height:14px;background:#ddd;content:"";}
.login_btn li:first-child:before {display:none;}
.login_btn li a {display:block;padding:10px;transition:all 0.4s;}
.login_btn li a:hover {color:#1b72b2;}
.login_area .btn {display:block;font-weight:800;text-align:center;width:100%;}
.btn_ty {background:#4776eb;border:1px solid #1b72b2;color:#fff;transition:all 0.4s;}



/* btn_area_m */
.btn_area_m {margin-top:30px;font-size:0;}
.btn_area_m.mt {margin-top:48px;}
.btn_area_m a {display:inline-block;width:50%;text-align:center;}
.btn_area_m a:only-child {width:100%;}
.btn_area_m .btn_m {font-weight:600;}
.btn_area_m button.btn_m.btn_ty {width:100%;}

/* joinArea */
.joinArea h4 {font-size:23px;font-weight:600;font-weight:bold;margin-bottom:20px;}

/* join_check */
.join_check_area {width:500px;margin:0 auto 20px;border:1px solid #e5e5e5;border-bottom:1px solid #898989;box-shadow:0px 3px 1px rgba(0,0,0,0.05);text-align:center;box-sizing:border-box;}
.join_check_area > div {padding:60px 10%;}
.join_check_area button {font-size:18px;width:100%;}

/* agreeArea */
.agreeArea {margin-bottom:60px;}
.agreeArea .agreeBox {border:1px solid #a7a9ac;border-radius:5px;height:200px;overflow:hidden;overflow-y:scroll;margin-bottom:10px;padding:20px;}
.agreeCheck label {margin-right:10px;}

/* joinComplete */
.joinComplete {text-align:center;}
.joinComplete .txtInfo .txt_dsc.big {font-size:32px;text-align:center;line-height:40px;}
.joinComplete .txtInfo .txt_dsc.big .fc03 {font-size:40px;}
.joinComplete .txtInfo .txt_dsc {font-size:17px;line-height:23px;text-align: justify;}
.joinComplete .memberInfo {/*width:500px;*/border:1px solid #e5e5e5;border-bottom:1px solid #a7a9ac;box-shadow:0px 3px 1px rgba(0,0,0,0.05);overflow:hidden;margin:30px auto;}
.joinComplete .memberInfo .info {background:#f9f9f9;padding:20px;border-bottom:1px solid #e5e5e5;margin-bottom:0;}
.joinComplete .memberInfo .infoList {text-align:left;margin:20px 30px;}
.joinComplete .memberInfo .infoList li {font-family:'Noto Sans KR';border-top:1px dashed #e5e5e5;padding:15px 0;}
.joinComplete .memberInfo .infoList li:first-child {border:0;}
.joinComplete .memberInfo .infoList li strong {display:inline-block;width:20%;font-weight:bold;margin-right:2%;}
.joinComplete .memberInfo .infoList li span {width:78%;}

/* modifyArea */
.modifyArea {width:500px;margin:0 auto;border:1px solid #e5e5e5;padding:50px;border-bottom:1px solid #a7a9ac;box-shadow:0px 3px 1px rgba(0,0,0,0.05);}
.modifyArea .modifyBox {width:100%;position:relative;}
.modifyArea .modifyBox .modifyInfo {margin-bottom:30px;padding-right:140px;}
.modifyArea .modifyBox .modifyInfo dt, .modifyArea .modifyBox .modifyInfo dd {display:inline-block;height:40px;line-height:40px;font-family:'Noto Sans KR';vertical-align:middle;padding:3px 0;}
.modifyArea .modifyBox .modifyInfo dt {width:30%;font-size:15px;font-weight:600;}
.modifyArea .modifyBox .modifyInfo dd {width:70%;}
.modifyArea .modifyBox .btnConfirm {position:absolute;top:0;right:0;padding:35px 45px;}
.modifyArea .modifyBox .comment {border-top:1px dashed #a7a9ac;padding-top:20px;}

/** form_list_m **/
.form_list_m {margin-top:24px;padding-top:30px;border-top:1px solid #1c1c1c;}
.form_list_m .li {margin-top:25px;font-size:15px;line-height:20px;}
.form_list_m .li:first-child {margin-top:0;}
.form_list_m .input_ty {padding:0 15px;font-size:15px;width:-webkit-fill-available;}
.form_list_m ::-webkit-input-placeholder {font-size:15px;}
.form_list_m ::-moz-placeholder {font-size:15px;}
.form_list_m :-ms-input-placeholder {font-size:15px;}
.form_list_m ::placeholder {font-size:15px;}
.form_list_m .select_ty {height:50px;padding:0 15px;background:#fff url(../imgs/common/ico_select.png) right center /39px 5px no-repeat;font-size:15px;}
.form_list_m .li dt {margin:-4px 0 8px 0;color:#1c1c1c; position:relative;}
.form_list_m .li dt i {display:inline-block;position:relative;height:0;font-size:0;line-height:0;vertical-align:top;}
.form_list_m .li dt i:before {position:absolute;left:7px;top:9px;width:4px;height:4px;background:#ff7800;border-radius:100%;content:"";}
.form_list_m .li dt em {display:block;margin-top:10px;color:#666;}
.form_list_m .li dd {position:relative;overflow:hidden;margin-top:5px;}
.form_list_m .li dd:nth-child(1) {margin-top:0;}
.form_list_m .li .mt {position:relative;margin-top:10px;}
.form_list_m .li .txt {display:none;position:relative;margin-top:5px;color:#999;font-size:13px;line-height:20px;}
.form_list_m .li .i1 {padding:0 15px;color:#1b72b2;font-size:20px;font-weight:800;}
.form_list_m .li dt .open-btn {width:18px; height:18px; position:absolute; right:10px; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); cursor:pointer; font-size:0;}
.form_list_m .li dt .open-btn:before {content:""; width:10px; height:10px; border:solid #1c1c1c; border-width:0 1px 1px 0; position:absolute; left:0; top:calc(50% - 4px); -webkit-transform:rotate(45deg) translateY(-50%); -moz-transform:rotate(45deg) translateY(-50%); transform:rotate(45deg) translateY(-50%); transition:transform 0.25s;}
.form_list_m .li dt .open-btn.on:before {border:solid #0d468a; border-width:1px 0 0 1px; top:50%;}
.form_list_m .li dd.hide-area {height:0;}
.form_list_m .li dd.hide-area.on {animation:areaOpen 0.7s ease both;}
.form_list_m .li dd.hide-area.close {animation:areaClose 0.7s ease both;}
.form_list_m .li dd.hide-area.active {height:80px;}
@keyframes areaOpen { 0% {height:0;} 100% {height:165px;} }
@keyframes areaClose { 0% {height:165px;} 100% {height:0;} }



.telArea {display: flex;gap: 7px;}
select#mobile1 {min-width: 100px !important;}


/*검색결과*/
/**** 검색 - search_total ****/
.search_total { margin: 0 0 21px; }
.search_total p { font-weight:500; font-weight:600; color:#333; font-size: 23px; word-break:keep-all; }
.point {color: #4776eb;font-weight:600;}


/**** 검색 - tab_area - search_total ****/
.tab_area .tab .tab_menu li { float:left; width:calc(100% / 4); }
.tab_area .tab .tab_menu li a { display:block; text-align:center; line-height: 45px; border: 1px solid #ccc; border-left:unset; font-size: 18px; }
.tab_area .tab .tab_menu li:first-child a { border-left: 1px solid #ccc; }
.tab_area .tab .tab_menu li.active a { border-color:var(--main-color); color:#fff; background-color:var(--main-color); }

.common_box { margin:0 0 20px; padding-bottom:50px; border-bottom:1px solid #ccc; box-sizing: border-box; }
.common_box:last-child { border-bottom:unset; }
.common_box .tit { position: relative; margin-bottom:20px; }
.common_box .tit h4 { font-size:26px; color:#222; font-weight:600; width:410px; line-height: 35px; margin: 40px 0 20px;}
.common_box .box h4.blue_fc {color: #222;margin: 10px 0;}
.common_box .tit button { width:30px; height:30px; background:url(../images/add_box.svg) 50% no-repeat; position: absolute; top: 5px; right: 5px; }

.con ul.list_timeline {display: flex;flex-wrap: wrap;gap: 15px;}
.con ul.list_timeline li { width: calc((100% / 4) - 12px);}
.common_box .box { border: 1px solid #dcdcdc; border-radius: 10px; padding: 25px 10px 25px 20px; max-height: 340px; overflow: auto; }
.common_box .title_line .timeline_list { display: flex; gap: 10px; }

.common_box .title_line .timeline_list ul li { margin-bottom: 5px; }
.common_box .title_line .timeline_list ul li:last-child { margin-bottom: 0; }
.common_box .title_line .timeline_list ul.time_wrap li { color: #808080; }
.common_box .title_line .timeline_list ul.text_list li { font-weight: 400; position: relative; padding-left: 15px; width: 98%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.common_box .title_line .timeline_list ul.text_list li::before { content: ''; position: absolute; width: 5px; height: 5px; left: 0; top: calc(50% - 2.5px); background-color: #555; border: 1px solid #555; border-radius: 50px; }
.common_box .title_line .timeline_list ul.text_list li:nth-child(1)::before { background-color: #4776eb; border: 1px solid #4776eb; }
.common_box .title_line .timeline_list ul.text_list li:nth-child(2)::before { background-color: #00c471; border: 1px solid #00c471; }
.common_box .title_line .timeline_list ul.text_list li:nth-child(3)::before { background-color: #a54cfe; border: 1px solid #a54cfe; }
.common_box .title_line .timeline_list ul.text_list li:nth-child(4)::before { background-color: #f53c41; border: 1px solid #f53c41; }
.common_box .title_line .timeline_list ul.text_list li:nth-child(5)::before { background-color: #f5ba3c; border: 1px solid #f5ba3c; }
.common_box .title_line .timeline_list ul.text_list li:nth-child(6)::before { background-color: #3cf5e6; border: 1px solid #3cf5e6; }


h3.video_title_name {white-space: nowrap;}
.common_box .lecture_name {color: #7b7b7b;display: inline-block;}
.common_box .title_line.box .time_flex { display: flex; justify-content: space-between; }
.common_box .title_line.box .start_time { color: #7b7b7b; font-size: 14px; }
.common_box .title_line.box .text_box { padding-top: 15px; padding-bottom: 15px; position: relative; }
.common_box .title_line.box .text_box::after { position: absolute; content: ''; width: 100%; height: 1px; background-color: #dcdcdc; left: 0; bottom: 0; }
.common_box .title_line.box .text_box:last-of-type::after { display: none; }
.common_box .title_line.box .text_box:nth-of-type(1) { padding-top: 0; }
.common_box .title_line.box .text_box:last-child { padding-bottom: 0; }
.common_box .title_line.box .text_box .title { font-weight: 400; }
.common_box .title_line.box .text_box .text { color: #7b7b7b; font-size: 14px; }

.search_result .edu_box_wrap .edu_box .card-content .eud_breadscrumbs .one_bread a,
.search_result .edu_box_wrap .edu_box .card-content .eud_breadscrumbs .two_bread a{color:#222;}