@charset "utf-8";

/* 헤더 */
#header { position: relative; min-width: 1200px; height: 100px; margin: 0 0 10px 0; z-index: 3; }
#header > .top_bar { padding: 10px 0 0 0; }
#header > .top_bar > .top_bar_container { max-width: 1200px; margin: 0 auto; justify-content: flex-end; align-items: center; display: flex; }
#header > .top_bar > .top_bar_container > .auth_links { line-height: 16px; display: flex; gap: 20px; }
#header > .top_bar > .top_bar_container > .auth_links > span,
#header > .top_bar > .top_bar_container > .auth_links > a { position: relative; padding: 5px 0; text-decoration: none; color: #333; font-size: 14px; text-align: left; transition: color 0.3s ease; }
#header > .top_bar > .top_bar_container > .auth_links > a.login { padding: 4px 10px; border: 1px solid #3268DD; border-radius: 30px; color: #3268DD; font-weight: 600;  }
#header > .top_bar > .top_bar_container > .auth_links > a::after { content: ''; position: absolute; top: 8px; right: -10px; height: 11px; width: 1px; background: #999; display: block; }
#header > .top_bar > .top_bar_container > .auth_links > a.login::after,
#header > .top_bar > .top_bar_container > .auth_links > a:first-child::after,
#header > .top_bar > .top_bar_container > .auth_links > a:last-child::after { display: none; }
#header > .top_bar > .top_bar_container > .auth_links > span > i { color: #3268DD; }
#header > .main_header > .header_container { max-width: 1200px; margin: 8px auto; align-items: center; justify-content: space-between; display: flex; }
#header > .main_header > .header_container > .logo { margin: -15px 0 0; }
#header > .main_header > .header_container > .nav_wrapper > ul.nav_menu { line-height: 34px; list-style: none; gap: 70px; display: flex; }
#header > .main_header > .header_container > .nav_wrapper > ul.nav_menu > li.nav_item { position: relative; }
#header > .main_header > .header_container > .nav_wrapper > ul.nav_menu > li.nav_item > a.nav_link { text-decoration: none; color: #333; font-size: 20px; transition: color 0.3s ease; display: block; }
#header > .main_header > .header_container > .nav_wrapper > ul.nav_menu > li.nav_item > a.active { color: #3268DD; font-weight: 700; }
#header > .main_header > .header_container > .nav_wrapper > ul.nav_menu > li.nav_item > a.classroom { padding: 0 20px; background: #3268DD; border-radius: 20px; font-size: 18px; color: #fff; }
#header > .main_header > .header_container > .nav_wrapper > ul.nav_menu > li.nav_item > a.nav_link.classroom:hover { background: #2957bc; color: #fff; font-weight: 400; transition: 0.3s; }
#header > .main_header > .header_container > .nav_wrapper > ul.nav_menu > li.nav_item > a.nav_link:hover { color: #3268DD; font-weight: 600; }
#header > .main_header > .header_container > .nav_wrapper > ul.nav_menu > li.nav_item > a.nav_link:hover::after { display: none; }
#header > .main_header > .header_container > .nav_wrapper > ul.nav_menu > li.nav_item > a.nav_link:hover::after { position: absolute; bottom: -10px; left: 0; right: 0; height: 2px; background-color: #3268DD; content: ''; }
#header > .main_header > .header_container > .nav_wrapper > ul.nav_menu > li.nav_item > a.active::after { position: absolute; bottom: -10px; left: 0; right: 0; height: 2px; background-color: #3268DD; content: ''; }
.nav_item:hover ~ .dropdown,
#header .dropdown:hover { opacity: 1; visibility: visible; transform: translateY(0); }
#header .dropdown { position: absolute; top: 100%; left: 0; width: 100vw; margin-left: calc(-50.4vw + 50%); padding: 10px 0 55px 0; background-color: #fff; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 5; }
#header .dropdown > .dropdown_container { position: relative; max-width: 750px; margin: 0 0 0 500px; }
#header .dropdown > .dropdown_container > .dropdown_grid { margin: 0 0 0 195px; grid-template-columns: repeat(6, 1fr); gap: 50px; text-align: left; display: grid; }
#header .dropdown > .dropdown_container > .dropdown_grid > .dropdown_column { flex-direction: column; display: flex; }
#header .dropdown > .dropdown_container > .dropdown_grid > .dropdown_column > .dropdown_title { border-bottom: 2px solid #3268DD; font-size: 16px; color: #3268DD; white-space: nowrap; }
#header .dropdown > .dropdown_container > .dropdown_grid > .dropdown_column >  a.dropdown_item { font-size: 16px; color: #888; text-align: left; text-decoration: none; white-space: nowrap; letter-spacing: -1px; transition: all 0.3s ease; display: block; }
#header .dropdown > .dropdown_container > .dropdown_grid > .dropdown_column >  a.dropdown_item:hover { color: #3268DD; font-weight: 500; }
#logoutTimerWrap { width: 55px; margin: -2px 0 0;  padding: 2px 5px; background-color: #f5f6fa; border-radius: 5px; font-size: 12px; color: #aaa; text-align: center; display: inline-block; }
/* 푸터 */
#footer { min-width: 1200px; }
#footer > .top { line-height: 40px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; overflow: hidden; }
#footer > .top > .inner { max-width: 1200px; margin: 0 auto; }
#footer > .top > .inner > ul { padding: 0; float: left; }
#footer > .top > .inner > ul > li { list-style: none; float: left; }
#footer > .top > .inner > ul > li > a { padding: 0 60px 0 0; font-size: 16px; color: #888; text-decoration: none;  }
#footer > .top > .inner > .select_wrap { width: 200px; border: 0; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-radius: 0; background: #F5F6FA; color: #888; float: right; }
#footer > .top > .inner > .select_wrap > select { color: #888; cursor: pointer; }
#footer > .top > .inner > .select_wrap > select:focus { outline: none; border: 0; }
#footer > .middle { padding: 50px 0; overflow: hidden; }
#footer > .middle > .inner { max-width: 1200px; margin: 0 auto; }
#footer > .middle > .inner > img { padding: 0 50px 0 0; float: left; }
#footer > .middle > .inner > .address { width: 920px; float: left; }
#footer > .middle > .inner > .address > dl { padding: 0 0 30px 0; overflow: hidden; }
#footer > .middle > .inner > .address > dl:last-child { padding: 0; }
#footer > .middle > .inner > .address > dl > dt { padding: 0 20px 0 0; font-size: 16px; color: #6CACF3; font-weight: 500; float: left; }
#footer > .middle > .inner > .address > dl > dd { font-size: 16px; color: #888; float: left; }
#footer > .middle > .inner > .address > dl > dd > p { padding: 0 0 10px 0; }
#footer > .middle > .inner > .address > dl > dd > ol { padding: 0; }
#footer > .middle > .inner > .address > dl > dd > ol > li { position: relative; padding: 0 10px; list-style: none; float: left; }
#footer > .middle > .inner > .address > dl > dd > ol > li:before { position: absolute; left: 0; top: 5px; width: 1px; height: 15px; background: #bbb; content: ''; }
#footer > .middle > .inner > .address > dl > dd > ol > li:first-child:before { display: none; }
#footer > .middle > .inner > .address > dl > dd > ol > li:first-child { padding: 0 10px 0 0; }
#footer > .middle > .inner > .address > dl > dd > ol > li > span { font-weight: 500; }
#footer > .bottom { padding: 0 0 50px 0; border-top: 1px solid #ddd; }
#footer > .bottom > p { max-width: 1200px; margin: 0 auto; padding: 10px 0 0 0; text-align: right; font-size: 16px; color: #888; }
/* 약관 등 */
#container > .wrapper > .rule_wrap > .rule_content { padding: 30px 0 0; }
#container > .wrapper > .rule_wrap > .rule_content > .title { padding: 0 0 15px 0; }
#container > .wrapper > .rule_wrap > .rule_content > .content { padding: 0 0 20px 0; line-height: 24px; font-size: 14px; color: #888; }
#container > .wrapper > .rule_wrap > .rule_content > .long { line-height: 24px; padding: 20px; margin: 0 0 20px 0; border-radius: 10px; background: #F5F6FA; font-size: 14px; color: #888; }
/* 메인 */
#main > .visual { width: 100%; }
#main > article { padding: 100px 0 0 0; }
#main > article > .inner { max-width: 1200px; margin: 0 auto; }
#main > article > .title { padding: 0 0 80px 0; text-align: center; }
#main > article > .title > h1 { padding: 0 0 10px 0; font-size: 40px; color: #333; font-weight: 700; }
#main > article > .title > p { font-size: 20px; color: #888; }
#main > article > .title > p > span { margin: 10px 0 0; color: #3268DD; display: block; }
#main > .visual > .visual_container { position: relative; max-width: 1920px; height: 460px; margin: 0 auto; text-align: center; overflow: hidden; }
#main > .visual > .visual_container > ul > li { cursor: pointer; }
#main > .visual > .visual_container > ul > li.v01 { background: #fdf4e5; }
#main > .visual > .visual_container > ul > li.v02 { background: #d0e8ff; }
#main > .visual > .visual_container > ul > li.v03 { background: #445fcd; }
#main > .visual > .visual_container .swiper-pagination { bottom: 75px !important; }
#main > .visual > .visual_container .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 4px !important; border-radius: 50%; background-color: #fff ; opacity: 1; transition: all 0.3s ease; }
#main > .visual > .visual_container .swiper-pagination-bullet-active { width: 16px !important; border-radius: 4px !important; background-color: #fff !important; }
#main > .notice { position: relative; height: 130px; background: #F5F6FA; z-index: 2; }
#main > .notice > .notice_inner { max-width: 830px; margin: 0 auto; }
#main > .notice > .notice_inner > .quick_menu { position: absolute; bottom:  70px; width: 810px; height: 80px; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 3px 10px 15px rgba(155, 155, 155, 0.7); }
#main > .notice > .notice_inner > .quick_menu > ul { height: 85px; justify-content: center; align-items: center; display: flex; }
#main > .notice > .notice_inner > .quick_menu > ul > li { position: relative; width: 23%; height: 85px; border-right: 1px solid #ddd; text-align: center; cursor: pointer; float: left; }
#main > .notice > .notice_inner > .quick_menu > ul > li:nth-child(n+2):nth-child(-n+3) > div { padding: 10px 0; }
#main > .notice > .notice_inner > .quick_menu > ul > li > div {  }
#main > .notice > .notice_inner > .quick_menu > ul > li > div > p { padding: 10px 0 0 0; font-size: 18px; color: #333; }
#main > .notice > .notice_inner > .quick_menu > ul > li > div > p > span { font-size: 14px; display: block; }
#main > .notice > .notice_inner > .quick_menu > ul > li:last-child { width: 30%; border-right: 0; text-align: left; }
#main > .notice > .notice_inner > .quick_menu > ul > li.apply { padding: 0 0 0 20px; }
#main > .notice > .notice_inner > .quick_menu > ul > li.apply > div > span { padding: 3px 10px; border-radius: 20px; background: #DE3176; font-size: 14px; color: #fff; font-weight: 400; }
#main > .notice > .notice_inner > .quick_menu > ul > li.apply > div > p { padding: 10px 0 0 0; line-height: 24px; background: url("/images/main/icon_quick_arrow.png") no-repeat; background-position: 180px 40px; font-size: 20px; color: #333; font-weight: 500; }
#main > .notice > .notice_inner > .quick_menu > ul > li.apply > div > p > span { font-size: 20px; color: #3268DD; font-weight: 500; display: inline-block; }
#main > .notice > .notice_inner > .notice_box { padding: 85px 0 0 0; }
#main > .notice > .notice_inner > .notice_box > p { font-size: 16px; color: #333; cursor: pointer; float: left; }
#main > .notice > .notice_inner > .notice_box > p > span { padding: 0 10px 0 0;  color: #3268DD; font-weight: 600; }
#main > .notice > .notice_inner > .notice_box > a { margin: -7px 0 0; padding: 3px 10px; border-radius: 20px; border: 2px solid #3268DD; font-size: 16px; color: #3268DD; float: right; }
#main > .educare_special {  }
#main > .educare_special > ul { max-width: 830px; margin: 0 auto; gap: 40px; justify-content: center; align-items: center; display: flex; overflow: hidden; }
#main > .educare_special > ul > li { position: relative; width: 33.3%; border-radius: 20px; text-align: center; transition: all 0.4s ease; cursor: pointer; }
#main > .educare_special > ul > li:hover .card_overlay { opacity: 1; }
#main > .educare_special > ul > li > .box { z-index: 1; }
#main > .educare_special > ul > li > .box > .images_box { position: relative; width: 250px; height: 200px; border-radius: 20px; }
#main > .educare_special > ul > li > .box > .images_box > img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
#main > .educare_special > ul > li > .box > .text { padding: 15px 0 0 0; }
#main > .educare_special > ul > li > .box > .text > h2 { font-size: 24px; color: #333; font-weight: 600; }
#main > .educare_special > ul > li > .box > .text > p { padding: 10px 0 0 0; font-size: 18px; color: #888; }
#main > .educare_special > ul > li > .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 250px; height: 200px; background: linear-gradient(135deg, rgba(103, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%); opacity: 0; transition: opacity 0.4s ease; align-items: center; justify-content: center; flex-direction: column; display: flex; z-index: 3; }
#main > .educare_special > ul > li > .overlay > a { transform: translateY(20px); transition: transform 0.4s ease; }
#main > .educare_special > ul > li > .card_overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 250px; height: 200px; padding: 20px; border-radius: 20px; box-sizing: border-box; background: linear-gradient(135deg, rgba(50, 104, 221, 0.7) 0%, rgba(50, 104, 221, 0.9) 100%); text-align: center; opacity: 0; transition: opacity 0.4s ease; align-items: center; justify-content: center; flex-direction: column; display: flex; }
#main > .educare_special > ul > li > .card_overlay > button { width: 115px; height: 35px; line-height: 35px; padding: 0; border-radius: 5px; background: transparent; font-size: 18px; font-weight: 400; }
#main > .educare_special > ul > li > .card_content { padding: 15px 0 0 0;  text-align: center; }
#main > .educare_special > ul > li > .card_content > h2 { font-size: 24px; color: #333; font-weight: 600; }
#main > .educare_special > ul > li > .card_content > p { padding: 5px 0 0 0; font-size: 18px; color: #888; }
#main > .educare_special > .edu_cost { padding: 50px 0 0 0; max-width: 430px; margin: 0 auto; text-align: center; overflow: hidden; }
#main > .educare_special > .edu_cost > p { padding: 10px; font-size: 30px; color: #333; float: left; }
#main > .educare_special > .edu_cost > p + img + p { color: #DE3176; font-weight: 600; }
#main > .educare_special > .edu_cost > p + img + p > span { color: #DE3176; font-weight: 700; font-size: 35px; }
#main > .educare_special > .edu_cost > img { float: left; }
#main > .educare_reinforce { overflow: hidden; }
#main > .educare_reinforce > .inner > .reinforce > .best { border-top-left-radius: 20px; border-top-right-radius: 20px; float: left; }
#main > .educare_reinforce > .inner > .reinforce > .best > .box { position: relative; border-radius: 20px; border: 1px solid #3268DD; cursor: pointer; }
#main > .educare_reinforce > .inner > .reinforce > .best > .box > .images { width: 530px; height: 300px; border-radius: 20px; box-sizing: border-box; }
#main > .educare_reinforce > .inner > .reinforce > .best > .box > .images > img { width: 100%; height: 100%; border-radius: 20px; object-fit: cover; }
#main > .educare_reinforce > .inner > .reinforce > .best > .box > .images > span { position: absolute; top: 0; left: 20px; }
#main > .educare_reinforce > .inner > .reinforce > .best > .box > .text { position: absolute; left: 54px; bottom: 0; width: 365px; height: 70px; padding: 20px 30px;  border-top-left-radius: 20px; border-top-right-radius: 20px; background: #fff; box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.15); }
#main > .educare_reinforce > .inner > .reinforce > .best > .box > .text > p { font-size: 20px; color: #333; font-weight: 500; letter-spacing: -1px; }
#main > .educare_reinforce > .inner > .reinforce > .best > .box > .text > p + p { font-size: 16px; color: #888; }
#main > .educare_reinforce > .inner > .reinforce > .best > .box > .text > p + p > img { margin: -10px 0 0 0; float: right; }
#main > .educare_reinforce > .inner > .reinforce > ul { width: 553px; padding: 0 0 0 30px; float: left; }
#main > .educare_reinforce > .inner > .reinforce > ul > li { padding: 0 0 40px 0; cursor: pointer; overflow: hidden; }
#main > .educare_reinforce > .inner > .reinforce > ul > li:last-child { padding: 0; }
#main > .educare_reinforce > .inner > .reinforce > ul > li > img { padding: 0 10px 0 0; border-radius: 20px; float: left; }
#main > .educare_reinforce > .inner > .reinforce > ul > li > .text > p { font-size: 20px; color: #333; font-weight: 500; }
#main > .educare_reinforce > .inner > .reinforce > ul > li > .text > p + p { padding: 5px 0 0 0; font-size: 18px; color: #888; }
#main > .educare_reinforce > .inner > .reinforce > ul > li > .text > a { padding: 15px 0 0 0; font-size: 16px; color: #888; float: right; }
#main > .educare_reinforce > .inner > .reinforce > ul > li > .text > a > img { margin: -5px 0 0 0; }
#main > .educare_benefit { height: 625px; margin: 120px 0 0 0; background: #F5F6FA; overflow: hidden; background-image: url("/images/main/img_benefit_arrow.png"), url("/images/main/img_benefit_bg.png"); background-position: top center, center right; background-repeat: no-repeat;  }
#main > .educare_benefit > .title { max-width: 1200px; margin: 0 auto; text-align: left;  }
#main > .educare_benefit > .benefit { width: 100%; margin: 30px 0 0; justify-content: center; align-items: center; display: flex; }
#main > .educare_benefit > .benefit > ul { margin: 0; padding: 0; gap: 30px; display: flex; }
#main > .educare_benefit > .benefit > ul > li > img { width: 250px; height: 250px; transition: transform 0.6s ease, box-shadow 0.6s ease; cursor: pointer; }
#main > .educare_benefit > .benefit > ul > li.active img { transform: scale(1.3); }
#main > .educare_benefit .chevron { width: 20px; height: 20px; fill: currentColor; }
#main > .educare_lecture { overflow: hidden; }
#main > .educare_lecture > .inner > ul > li { padding: 0 60px; text-align: center; float: left; }
#main > .educare_lecture > .inner > ul > li:nth-child(2n) { padding: 60px 0 0 0; }
#main > .educare_lecture > .inner > ul > li > .images_box { position: relative; width: 220px; height: 220px; }
#main > .educare_lecture > .inner > ul > li > .images_box > img { position: absolute; top: 0; left: 0; z-index: 2; }
#main > .educare_lecture > .inner > ul > li > .images_box > span { position: absolute; top: -18px; left: -5px; font-size: 45px; color: #6CACF3; font-weight: 900; z-index: 1; }
#main > .educare_lecture > .inner > ul > li > .text { padding: 25px 0 0 0; }
#main > .educare_lecture > .inner > ul > li > .text > h3 { font-size: 24px; color: #333; font-weight: 600; }
#main > .educare_lecture > .inner > ul > li > .text > p { line-height: 22px; padding: 10px 0 0 0; font-size: 18px; color: #888; letter-spacing: -1px; }
#main > .educare_lecture > .inner > ul > li > .text > button { width: auto; padding: 0 20px; margin: 25px 0 0 0; border-radius: 20px; font-size: 18px; }
#main > .educare_banner { overflow: hidden; }
#main > .educare_banner > .inner { max-width: 1200px; margin: 0 auto; }
#main > .educare_banner > .inner > ul > li { float: left; }
#main > .educare_banner > .inner > ul > li:first-child { width: 467px; margin: 0 25px 0 0; }
#main > .educare_banner > .inner > ul > li:last-child { width: 362px; float: right; }
#main > .educare_banner > .inner > ul > li > .customer_center { padding: 20px 25px; border-radius: 20px; background: #F5F6FA; }
#main > .educare_banner > .inner > ul > li > .customer_center > h2 { padding: 0 0 0 30px; background: url("/images/main/icon_customer.png") no-repeat left center; font-size: 20px; color: #333; font-weight: 600;  }
#main > .educare_banner > .inner > ul > li > .customer_center > h1 { font-size: 40px; color: #3268DD; font-weight: 700;  }
#main > .educare_banner > .inner > ul > li > .customer_center > p { padding: 2px 0; font-size: 16px; color: #888; }
#main > .educare_banner > .inner > ul > li > .customer_center > p > span { width: 60px; font-size: 16px; color: #333; font-weight: 500; display: inline-block; }
#main > .educare_banner > .inner > ul > li > .customer_center > button { width: auto; padding: 0 15px; margin: 20px 0 0 50%; border-radius: 50px; font-size: 18px; transform: translateX(-50%); }
#main > .educare_banner > .inner > ul > li .tabs { position: relative; margin: 0 auto; border-radius: 10px; overflow: hidden; }
#main > .educare_banner > .inner > ul > li .tabs input[type="radio"] { display: none; }
#main > .educare_banner > .inner > ul > li .tabs > .tab_header { position: relative; height: 60px; border-bottom: 1px solid #3268DD; }
#main > .educare_banner > .inner .tab_header label { position: relative; bottom: 1px; width: 170px; height: 60px; line-height: 60px; border-radius: 10px 10px 0 0; background-color: #EBEBEB; font-size: 20px; text-align: center; color: #888; cursor: pointer; display: inline-block; }
#tabMainNotice:checked ~ .tab_header label[for="tabMainNotice"],
#tabMainInfo:checked ~ .tab_header label[for="tabMainInfo"] { bottom: 0; border: 1px solid #3268DD; border-bottom: none; background-color: #fff; color: #3268DD; font-weight: 600; z-index: 2; }
#tabMainNotice:checked ~ .tab_contents #mainNoticeLists,
#tabMainInfo:checked ~ .tab_contents #mainInfoLists { display: block; }
#main > .educare_banner > .inner > ul > li .tabs > .tab_header > .tab_more { position: absolute; bottom: 10px; right: 0; color: #888; font-size: 16px; text-decoration: none; }
#main > .educare_banner > .inner > ul > li .tabs > .tab_header > .tab_more:hover { color: #3268DD; }
#main > .educare_banner > .inner > ul > li .tabs > .tab_header > .tab_more::after { font-weight: 500; content: ' +'; }
#main > .educare_banner > .inner > ul > li .tabs > .tab_contents >  .tab_content { height: 200px; padding: 20px 10px; display: none; }
#main > .educare_banner > .inner > ul > li .tabs > .tab_contents >  .tab_content > ul > li { line-height: 24px; padding: 7px 0; font-size: 18px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: color 0.2s ease; }
#main > .educare_banner > .inner > ul > li .tabs > .tab_contents >  .tab_content > ul > li:hover { color: #555; }
#main > .educare_banner > .inner > ul > li .tabs > .tab_contents >  .tab_content > ul > li::before { width: 6px; height: 6px; margin: 0 10px 0 0; border-radius: 50%; background-color: #3268DD; vertical-align: middle; content: ''; display: inline-block; }
#main > .educare_banner > .inner > ul > li .tabs > .tab_contents >  .tab_content > ol > li { line-height: 24px; padding: 7px 0; font-size: 18px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: color 0.2s ease; }
#main > .educare_banner > .inner > ul > li .tabs > .tab_contents >  .tab_content > ol > li:hover { color: #555; }
#main > .educare_banner > .inner > ul > li .tabs > .tab_contents >  .tab_content > ol > li::before { width: 6px; height: 6px; margin: 0 10px 0 0; border-radius: 50%; background-color: #3268DD; vertical-align: middle; content: ''; display: inline-block; }
#main > .educare_banner > .inner > ul > li > .sns { padding: 15px 11px; margin: 28px 0 0 0; border: 1px solid #D9D9D9; border-radius: 10px; }
#main > .educare_banner > .inner > ul > li > .sns > a { padding: 0 12px; }
#main > .educare_note { margin: 100px 0 0 0; background: url("/images/main/img_note_bg.png") no-repeat top center; background-size: cover; }
#main > .educare_note { height: 135px; padding: 0; overflow: hidden; }
#main > .educare_note > .inner > .title { padding: 20px 0 0 0; float: left; }
#main > .educare_note > .inner > .title > h2 { font-size: 30px; color: #fff; font-weight: 500; border-bottom: 1px solid #fff; float: left; }
#main > .educare_note > .inner > .title > img { padding: 0 0 0 30px; }
#main > .educare_note > .inner > .button_box { padding: 40px 0; float: right; }
#main > .educare_note > .inner > .button_box > a { width: auto; padding: 0 50px 0 20px; margin: 0 0 0 40px; border-radius: 30px; background: url("/images/main/icon_note_arrow.png") no-repeat #fff; background-position: 95% 50%; text-align: left; color: #478DC5 !important; }
#main > .partner { padding: 40px 0; overflow: hidden; }
#main > .partner > .inner > ul > li { width: 20%; text-align: center; float: left; }
#main > .partner > .inner > ul > li:nth-child(2) { width: 27%; }
#main > .partner > .inner > ul > li:nth-child(3) { width: 32%; }
#main > .educare_banner > .inner > ul > li > .banner_carousel { position: relative; width: 362px; height: 172px; margin: 0 auto; border-radius: 20px; border: 1px solid #ddd; background: #fff; overflow: hidden; }
#main > .educare_banner > .inner > ul > li > .banner_carousel > input[type="radio"] { display: none; }
#main > .educare_banner > .inner > ul > li > .banner_carousel > ul.banner_list { width: 200%; height: 100%; list-style: none; transition: transform 0.5s ease; display: flex; }
#main > .educare_banner > .inner > ul > li > .banner_carousel > ul.banner_list > li.banner_item { width: 50%; height: 100%;  align-items: center; flex-shrink: 0; display: flex; }
#main > .educare_banner > .inner > ul > li > .banner_carousel > ul.banner_list > li.banner_item:first-child { background: linear-gradient(135deg, #f8fffe 0%, #f0fdf9 100%); }
#main > .educare_banner > .inner > ul > li > .banner_carousel > ul.banner_list > li.banner_item:last-child { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); }
#main > .educare_banner > .inner > ul > li > .banner_carousel > ul.banner_list > li.banner_item > .item_icon { padding: 0 0 0 20px; margin: 0 20px 0 0; flex-shrink: 0; }
#main > .educare_banner > .inner > ul > li > .banner_carousel > ul.banner_list > li.banner_item > .item_content { padding: 20px 0 0 0; flex: 1; }
#main > .educare_banner > .inner > ul > li > .banner_carousel > ul.banner_list > li.banner_item > .item_content > span { padding: 5px 10px; border: 1px solid #38A897; font-size: 16px; color: #38A897; }
#main > .educare_banner > .inner > ul > li > .banner_carousel > ul.banner_list > li.banner_item > .item_content > p { padding: 15px 0; font-size: 18px; color: #888; }
#main > .educare_banner > .inner > ul > li > .banner_carousel > .carousel_indicators { position: absolute; top: 10px; right: 15px; gap: 6px; display: flex; z-index: 2; }
#main > .educare_banner > .inner > ul > li > .banner_carousel > .carousel_indicators > label { position: relative; width: 8px; height: 8px; border-radius: 50%; background-color: #ddd; opacity: 0.6; cursor: pointer; transition: all 0.3s ease; display: block; }
#main > .educare_banner > .inner > ul > li > .banner_carousel > .carousel_indicators #Banner1:checked ~ .banner_list { transform: translateX(0); }
#main > .educare_banner > .inner > ul > li > .banner_carousel > .carousel_indicators #Banner2:checked ~ .banner_list { transform: translateX(-50%); }
@keyframes autoSlide {
    0%, 45% { transform: translateX(0); }
    55%, 100% { transform: translateX(-50%); }
}
@keyframes indicator1 {
    0%, 45% { width: 17px; border-radius: 4px; opacity: 1; }
    55%, 100% { width: 8px; border-radius: 50%; opacity: 0.6; }
}
@keyframes indicator2 {
    0%, 45% { width: 8px; border-radius: 50%; opacity: 0.6; }
    55%, 100% { width: 17px; border-radius: 4px; opacity: 1; }
}
#main > .educare_banner .banner_list { animation: autoSlide 8s infinite; }
#main > .educare_banner .carousel_indicators > label:first-child { animation: indicator1 8s infinite; }
#main > .educare_banner .carousel_indicators > label:last-child { animation: indicator2 8s infinite; }

/* 서브 */
#container { min-width: 1200px; margin: 0 0 50px 0; }
#container .inner { max-width: 1200px; margin: 0 auto; }
#container > .visual > .banner { height: 120px; line-height: 120px; background: #F5F6FA; }
#container > .visual > .banner.community { background: url("/images/common/img_sub_visual_community.png") no-repeat center center #F5F6FA; }
#container > .visual > .banner.duty { background: url("/images/common/img_sub_visual_duty.png") no-repeat center center #F5F6FA; }
#container > .visual > .banner.info { background: url("/images/common/img_sub_visual_info.png") no-repeat center center #F5F6FA; }
#container > .visual > .banner.myclass { background: url("/images/common/img_sub_visual_myclass.png") no-repeat center center #F5F6FA; }
#container > .visual > .banner.mypage { background: url("/images/common/img_sub_visual_mypage.png") no-repeat center center #F5F6FA; }
#container > .visual > .banner.refund { background: url("/images/common/img_sub_visual_refund.png") no-repeat center center #F5F6FA; }
#container > .visual > .banner.special { background: url("/images/common/img_sub_visual_special.png") no-repeat center center #F5F6FA; }
#container > .visual > .banner.support { background: url("/images/common/img_sub_visual_support.png") no-repeat center center #F5F6FA; }
#container > .visual > .banner > .inner > p { font-size: 16px; color: #333; }
#container > .visual > .route { border-bottom: 1px solid #ddd; overflow: hidden; }
#container > .visual > .route > .inner > ul { float: right; }
#container > .visual > .route > .inner > ul > li { position: relative; padding: 10px 0 10px 30px; font-size: 14px; color: #888; float: left; }
#container > .visual > .route > .inner > ul > li::before { position: absolute; top: 14px; left: 12px; width: 10px; height: 17px; background: url("/images/common/icon_sub_route_arrow.png") no-repeat; content: ''; }
#container > .visual > .route > .inner > ul > li:first-child::before { display: none; }
#container > .wrapper { max-width: 1200px; margin: 0 auto; padding: 30px 0; overflow: hidden; }
#container > .wrapper > aside { width: 200px; margin: 0 45px 0 0; float: left; }
#container > .wrapper > aside > h2 { padding: 0 0 15px 0; border-bottom: 2px solid #3268DD; font-size: 20px; color: #333; font-weight: 600; }
#container > .wrapper > aside > ul { padding: 10px 0; }
#container > .wrapper > aside > ul > li { padding: 10px; color: #888; cursor: pointer; }
#container > .wrapper > aside > ul > li.active { background: url("/images/common/icon_aside_arrow.png") no-repeat #F5F6FA; background-position: 95% 50%; color: #3268DD; font-weight: 500; }
#container > .wrapper > aside > ul > li:hover { color: #3268DD; }
#container > .wrapper > aside > .customer { margin: 40px 0 0 0; padding: 20px 10px; border-radius: 10px; background: #F5F6FA; }
#container > .wrapper > aside > .customer > h4 { font-size: 18px; color: #333; font-weight: 500; text-align: center; }
#container > .wrapper > aside > .customer > h4 > img { width: 15px; padding: 0 5px 0 0; }
#container > .wrapper > aside > .customer > h3 { padding: 5px 0 15px 0; margin: 0 0 15px 0; border-bottom: 1px solid #ddd; font-size: 25px; color: #3268DD; font-weight: 600; text-align: center; }
#container > .wrapper > aside > .customer > p { padding: 2px 0 0 0; font-size: 14px; color: #333; letter-spacing: -1px; }
#container > .wrapper > aside > .customer > p:last-child { color: #DE3176; }
#container > .wrapper > aside > .customer > p > span { padding: 0 5px 0 0; color: #888; }
#container > .wrapper > .contents { width: calc(100% - 250px); float: left; }
#container > .wrapper > .contents > .title { text-align: center; }
#container > .wrapper > .contents > .title > h1 { font-size: 30px; color: #333; font-weight: 700; }
#container > .wrapper > .contents > .title.small { text-align: left; }
#container > .wrapper > .contents > .title.small > h1 { font-size: 20px; font-weight: 600; }
/* 회원가입 - 약관동의 */
#container > .wrapper > .contents > .step { width: 730px; margin: 0 auto; padding: 50px 0; overflow: hidden; }
#container > .wrapper > .contents > .step > ul > li { position: relative; width: 25%; margin: 0 50px 0 0; float: left; }
#container > .wrapper > .contents > .step > ul > li.active > span { background: #3268DD; }
#container > .wrapper > .contents > .step > ul > li:first-child { width: 32%; }
#container > .wrapper > .contents > .step > ul > li:last-child { margin: 0; }
#container > .wrapper > .contents > .step > ul > li::after { position: absolute; top: 22px; right: -25px; width: 30px; border: 1px dashed #ddd; content: ''; }
#container > .wrapper > .contents > .step > ul > li:last-child::after { display: none; }
#container > .wrapper > .contents > .step > ul > li > span { width: 50px; height: 30px; line-height: 30px; padding: 10px 0; margin: 0 20px 0 0; border-radius: 50%; background: #ddd; text-align: center; float: left; display: inline-block; }
#container > .wrapper > .contents > .step > ul > li:last-child > span { height: 20px; padding: 15px 0; }
#container > .wrapper > .contents > .step > ul > li > .text > p { font-size: 14px; color: #3268DD; font-weight: 500; }
#container > .wrapper > .contents > .step > ul > li > .text > p + p { font-size: 16px; color: #888; font-weight: 400; }
#container > .wrapper > .join_agree > .agree_box > ul > li { padding: 50px 0 0 0; }
#container > .wrapper > .join_agree > .agree_box > ul > li > h3 { font-size: 20px; color: #333; font-weight: 600; }
#container > .wrapper > .join_agree > .agree_box > ul > li > .all_agree { margin: 20px 0 0 0; padding: 20px 0; border-radius: 10px; background: #F5F6FA; }
#container > .wrapper > .join_agree > .agree_box > ul > li > .all_agree > div { margin: 0 0 0 50%; text-align: center; font-size: 16px; transform: translateX(-50%); }
#container > .wrapper > .join_agree > .agree_box > ul > li > .all_agree > div > label { color: #3268DD; font-weight: 600; }
#container > .wrapper > .join_agree > .agree_box > ul > li > .clause { height: 200px; padding: 20px; margin: 20px 0 0 0; border: 1px solid #ddd; border-radius: 10px; overflow-y: auto; }
#container > .wrapper > .join_agree > .agree_box > ul > li > .clause > * { font-size: 16px; color: #333; }
#container > .wrapper > .join_agree > .agree_box > ul > li > .clause > .title { padding: 0 0 15px 0; }
#container > .wrapper > .join_agree > .agree_box > ul > li > .clause > .content { padding: 0 0 20px 0; line-height: 24px; font-size: 14px; color: #888; }
#container > .wrapper > .join_agree > .agree_box > ul > li > .clause > .long { line-height: 24px; padding: 20px; margin: 0 0 20px 0; border-radius: 10px; background: #F5F6FA; font-size: 14px; color: #888; }
#container > .wrapper > .join_agree > .agree_box > ul > li > .compulsory { margin: 10px 0 0 0; overflow: hidden; }
#container > .wrapper > .join_agree > .agree_box > ul > li > .compulsory > label { float: right; }
#container > .wrapper > .join_agree > .agree_box > ul > li > .compulsory > label > span { color: #DE3176; }
#container > .wrapper > .join_agree > .agree_box > ul > li > p { position: relative; margin: 20px 0 0 10px; font-size: 16px; color: #333; font-weight: 500; }
#container > .wrapper > .join_agree > .agree_box > ul > li > p:before { position: absolute; top: 2px; left: -10px; width: 3px; height: 16px; background: #3268DD; content: ''; }
#container > .wrapper > .join_agree > .agree_box > ul > li > .certification { width: 500px; margin: 20px 0 0 50%; transform: translateX(-50%); }
#container > .wrapper > .join_agree > .agree_box > ul > li > .certification > button { width: 185px; height: 165px; margin: 0 25px; background: url("/images/join/img_join_phone_off.png") no-repeat; background-position: center 20px; text-align: center; transition: 0.3s; }
#container > .wrapper > .join_agree > .agree_box > ul > li > .certification > button:active { border: 1px solid #3268DD; background: url("/images/join/img_join_phone_on.png") no-repeat #F5F6FA; background-position: center 20px; }
#container > .wrapper > .join_agree > .agree_box > ul > li > .certification > button:focus { border: 1px solid #3268DD; background: url("/images/join/img_join_phone_on.png") no-repeat #F5F6FA; background-position: center 20px; }
#container > .wrapper > .join_agree > .agree_box > ul > li > .certification > button + button { background: url("/images/join/img_join_ipin_off.png") no-repeat; background-position: center 25px; }
#container > .wrapper > .join_agree > .agree_box > ul > li > .certification > button + button:active { border: 1px solid #3268DD; background: url("/images/join/img_join_ipin_on.png") no-repeat #F5F6FA; background-position: center 25px; }
#container > .wrapper > .join_agree > .agree_box > ul > li > .certification > button + button:focus { border: 1px solid #3268DD; background: url("/images/join/img_join_ipin_on.png") no-repeat #F5F6FA; background-position: center 25px; }
#container > .wrapper > .join_agree > .agree_box > ul > li > .certification > button > p { padding: 85px 0 0 0; font-size: 18px; color: #3268DD; }
/* 회원가입 - 정보입력 */
#container > .wrapper > .join_form > .member_info > p { padding: 0 0 10px 0; border-bottom: 1px solid #ddd; text-align: right; color: #3268DD; font-size: 14px; }
#container > .wrapper > .join_form > .member_info > table { width: 100%; margin: 10px 0 0 0; }
#container > .wrapper > .join_form > .member_info > table > tbody > tr > td > span { padding: 0 10px 0 5px; font-size: 16px; }
#container > .wrapper > .join_form > .member_info > table > tbody > tr > td > span.at { padding: 0 10px;  }
#container > .wrapper > .join_form > .member_info > table > tbody > tr > td > .radio_box_style { margin: 0 10px 0 0; }
#container > .wrapper > .join_form > .member_info > table > tbody > tr > td > .form_desc { padding: 0 0 0 15px; font-size: 14px; }
#container > .wrapper > .join_form > .member_info > table > tbody > tr > td.name > input[type="text"] { width: 400px; }
#container > .wrapper > .join_form > .member_info > table > tbody > tr.marketing > td > .text { margin: 10px 0 0; }
#container > .wrapper > .join_form > .member_info > table > tbody > tr.marketing > td > .text > p { position: relative; line-height: 20px; padding: 0 0 0 10px; font-size: 14px; color: #888; overflow: hidden; }
#container > .wrapper > .join_form > .member_info > table > tbody > tr.marketing > td > .text > p:before { position: absolute; top: 8px; left: 0; width: 3px; height: 3px; background: #888; content: ''; }
#container > .wrapper > .join_form > .member_info > .button_box { margin: 30px 0 0; padding: 50px 0 0 0; border-top: 1px solid #ddd; text-align: center; }
#container > .wrapper > .join_form > .member_info > .button_box > button { margin: 0 10px; }
/* 회원가입 - 가입완료 */
#container > .wrapper > .join_complete > .complete_box { padding: 50px 0; background: #F5F6FA; text-align: center; }
#container > .wrapper > .join_complete > .complete_box > .text { padding: 30px 0 60px 0; }
#container > .wrapper > .join_complete > .complete_box > .text > p { font-size: 20px; color: #333; }
#container > .wrapper > .join_complete > .complete_box > .text > p + p { padding: 10px 0 0 0; font-size: 16px; color: #888; }
/* 회원탈퇴 */
#leaveFormLayer > .inner > .content > p.little_title { font-size: 25px !important; text-align: center; }
#leaveFormLayer > .inner > .content > .note { padding: 20px; background: #F5F6FA; overflow: hidden; }
#leaveFormLayer > .inner > .content > .note > img { padding: 0 10px 0 0; float: left; }
#leaveFormLayer > .inner > .content > .note > p { width: 85%; font-size: 16px; letter-spacing: -0.5px; float: left; }
#leaveFormLayer > .inner > .content > ul.text { margin: 20px 0; }
#leaveFormLayer > .inner > .content > ul.text > li { position: relative; padding: 0 0 3px 10px; font-size: 14px; color: #888; overflow: hidden; }
#leaveFormLayer > .inner > .content > ul.text > li:before { position: absolute; top: 9px; left: 0; width: 5px; height: 1px; background: #888; content: ''; }
#leaveFormLayer > .inner > .content > ul.text > li:first-child { padding: 0 0 30px 0; }
#leaveFormLayer > .inner > .content > ul.text > li:first-child:before { display: none; }
#leaveFormLayer > .inner > .content > ul.text > li:last-child:before { display: none; }
#leaveFormLayer > .inner > .content > ul.text > li:last-child { padding: 20px 0 20px 0; border-bottom: 1px solid #ddd; }
#leaveFormLayer > .inner > .content > ul.text > li:last-child > .check { float: right; }
#leaveFormLayer > .inner > .content > ul.text > li:last-child > .check input[type="checkbox"] + label { font-size: 16px; color: #888; }
#leaveFormLayer > .inner > .content > ul.survey { overflow: hidden;}
#leaveFormLayer > .inner > .content > ul.survey > li > h2 { padding: 0 0 15px 0; font-size: 16px; color: #333; }
#leaveFormLayer > .inner > .content > ul.survey > li > .radio { padding: 0 0 10px 0;}
#leaveFormLayer > .inner > .content > ul.survey > li > .radio input[type="radio"]+label { width: 25%; }
#leaveFormLayer > .inner > .content > ul.survey > li.password { padding: 20px 0 0 0; overflow: hidden; }
#leaveFormLayer > .inner > .content > ul.survey > li.password > dl { line-height: 38px; padding: 0 15px; float: left; }
#leaveFormLayer > .inner > .content > ul.survey > li.password > dl input { width: 200px; }
#leaveFormLayer > .inner > .content > ul.survey > li.password > dl > dt { padding: 0 10px 0 0; font-weight: 600; float: left; }
#leaveFormLayer > .inner > .content > ul.survey > li.password > dl > dd { float: left; }
/* 팝업 - 어린이집명 조회 */
#searchGroupLayer > .inner > .content > h2 { font-size: 25px !important; text-align: center; }
#searchGroupLayer > .inner > .content > ul.search > li { padding: 0 0 10px 0 ; overflow: hidden; }
#searchGroupLayer > .inner > .content > ul.search > li > .select_wrap { margin: 0 5px 0 0; float: left; }
#searchGroupLayer > .inner > .content > ul.search > li > input[type="text"] { width: 500px; }
#searchGroupLayer > .inner > .content > ul.search > li > dl { padding: 15px; background: #F5F6FA; border-radius: 10px; }
#searchGroupLayer > .inner > .content > ul.search > li > dl > dt { font-size: 14px; color: #7A7A7A; }
#searchGroupLayer > .inner > .content > ul.search > li > dl > dd { position: relative; padding: 5px 0 5px 10px; font-size: 14px; color: #7A7A7A; }
#searchGroupLayer > .inner > .content > ul.search > li > dl > dd > span { color: #3268DD; }
#searchGroupLayer > .inner > .content > ul.search > li > dl > dd::before { position: absolute; top: 12px; left: 0; width: 3px; height: 3px; border-radius: 50%; background: #7A7A7A; content: ''; }
#searchGroupLayer > .inner > .content > .result { margin: 30px 0; padding: 15px; border-radius: 10px; background: #F5F6FA; display: none; }
#searchGroupLayer > .inner > .content > .result > ul > li { position: relative; padding: 15px; margin: 0 0 10px 0; border-radius: 10px; background: #fff; overflow: hidden; }
#searchGroupLayer > .inner > .content > .result > ul > li:last-child { margin: 0; }
#searchGroupLayer > .inner > .content > .result > ul > li > p.name { font-size: 16px; color: #333; }
#searchGroupLayer > .inner > .content > .result > ul > li > p.address { font-size: 14px; color: #7A7A7A; }
#searchGroupLayer > .inner > .content > .result > ul > li > ol { padding: 5px 0 0 0; }
#searchGroupLayer > .inner > .content > .result > ul > li > ol > li { padding: 0 15px 0 0; font-size: 14px; color: #333; font-weight: 500; float: left; }
#searchGroupLayer > .inner > .content > .result > ul > li > ol > li > span { margin: 0 0 0 3px; color: #7A7A7A; }
#searchGroupLayer > .inner > .content > .result > ul > li > button { position: absolute; top: 15px; right: 15px; min-width: 55px; width: 55px; }
#searchGroupLayer > .inner > .content > .result > p { padding: 10px 0; font-size: 14px; }
#searchGroupLayer > .inner > .content > .result > p.found { color: #3268DD; }
#searchGroupLayer > .inner > .content > .result > p.no_data { text-align: center; color: #DE3176; }
#searchGroupLayer > .inner > .content > .register { padding: 15px 20px; border-radius: 10px; background: #F5F6FA; }
#searchGroupLayer > .inner > .content > .register > img { float: left; }
#searchGroupLayer > .inner > .content > .register > dl { padding: 0 0 0 10px; overflow: hidden; }
#searchGroupLayer > .inner > .content > .register > dl > dt { font-size: 20px; color: #333; }
#searchGroupLayer > .inner > .content > .register > dl > dd { padding: 5px 0 0 0; font-size: 14px; color: #333; }
#searchGroupLayer > .inner > .content > .register > button { margin: 20px 0 10px 50%; transform: translateX(-50%); }
/* 팝업 - 기관 등록 */
#btnGroupAttach,
#btnBankAttach { width: 82px; min-width: 82px; height: 38px; line-height: 38px; border-radius: 5px; padding: 0 10px; color: #3268DD; font-size: 14px; border: 1px solid #3268DD; background: #fff; box-sizing: border-box; font-weight: 500; text-align: center; cursor: pointer; display: inline-block; }
#btnGroupAttach:hover,
#btnBankAttach:hover { background: #3268DD; color: #fff; }
#registerGroupLayer > .inner > .content .info_biz_license { padding: 15px; margin: 20px 0 0 0; border-radius: 10px; background: #F5F6FA; }
#registerGroupLayer > .inner > .content .info_biz_license > p.number { font-size: 14px; color: #3268DD; font-weight: 500; }
#registerGroupLayer > .inner > .content .info_biz_license > p.file { padding: 5px 0 0 0; font-size: 14px; color: #888; }
#registerGroupLayer > .inner > .content .info_biz_license > p.mail { padding: 10px 0 0 0; font-size: 16px; color: #333; text-align: center; font-weight: 500; }
#registerGroupLayer > .inner > .content .info_biz_license > p.mail { color: #3268DD; }
/* 로그인 */
#container > .wrapper > .login > .login_box { width: 510px; height: 380px; margin: 50px auto; border: 1px solid #ddd; border-radius: 20px; }
#container > .wrapper > .login > .login_box > ul { padding: 80px 80px 40px 80px; overflow: hidden; }
#container > .wrapper > .login > .login_box > ul > li { padding: 0 0 10px 0; }
#container > .wrapper > .login > .login_box > ul > li > input[type="text"] { width: 100%; }
#container > .wrapper > .login > .login_box > ul > li > input[type="password"] { width: 100%; }
#container > .wrapper > .login > .login_box > ul > li:nth-child(3) { padding: 15px 0 0 0; }
#container > .wrapper > .login > .login_box > ul > li > .box { float: right; }
#container > .wrapper > .login > .login_box > ul > li > .box > a { position: relative; padding: 0 0 0 25px; font-size: 16px; color: #888; }
#container > .wrapper > .login > .login_box > ul > li > .box > a:first-child { padding: 0; }
#container > .wrapper > .login > .login_box > ul > li > .box > a::after { position: absolute; top: 3px; left: 8px; width: 1px; height: 15px; background: #888; content: ''; }
#container > .wrapper > .login > .login_box > ul > li > .box > a:first-child::after { display: none; }
#container > .wrapper > .login > .login_box > button { margin: 0 0 0 50%; transform: translateX(-50%); }
/* 비밀번호 변경 */
#container > .wrapper > .password_change > .change_box { padding: 40px 0; margin: 50px 0 0 0; border-radius: 20px; background: #F5F6FA; text-align: center; }
#container > .wrapper > .password_change > .change_box > ul { margin: 0 0 0 50%; transform: translateX(-50%); }
#container > .wrapper > .password_change > .change_box > ul > li { overflow: hidden; }
#container > .wrapper > .password_change > .change_box > ul > li:first-child { text-align: left; }
#container > .wrapper > .password_change > .change_box > ul > li:nth-child(2) { padding: 40px 0 10px 0; }
#container > .wrapper > .password_change > .change_box > ul > li > input { width: 350px; }
#container > .wrapper > .password_change > .change_box > ul > li > img { float: left; }
#container > .wrapper > .password_change > .change_box > ul > li > p { padding: 15px 0 0 0; font-size: 14px; }
#container > .wrapper > .password_change > .change_box > ul > li > .text { padding: 0 0 0 10px; float: left; }
#container > .wrapper > .password_change > .change_box > ul > li > .text > p { font-size: 16px; color: #333; font-weight: 500; }
#container > .wrapper > .password_change > .change_box > ul > li > .text > p + p { font-size: 14px; color: #888; }
#container > .wrapper > .password_change > .change_box > .button_box { padding: 40px 0 0 0; }
#container > .wrapper > .password_change > .change_box > .button_box > button { margin: 0 5px; }
/* 아이디/비밀번호 찾기 */
#container > .wrapper > .id_password_search > .tab_container { padding: 50px 0 0 0; }
#container > .wrapper > .id_password_search > .tab_container > .tab_content > .content_panel > .table_type2 > h3 { padding: 0 0 10px 0; border-bottom: 1px solid #ddd; }
#container > .wrapper > .id_password_search > .tab_container > .tab_content > .content_panel > .table_type2 > table { margin: 20px 0 0 0; }
#container > .wrapper > .id_password_search > .tab_container > .tab_content > .content_panel > .table_type2 > table > tbody > tr> td.phone > .select_wrap { width: 100px; float: left; }
#container > .wrapper > .id_password_search > .tab_container > .tab_content > .content_panel > .table_type2 > table > tbody > tr> td.phone > .select_wrap > select { width: 100px; }
#container > .wrapper > .id_password_search > .tab_container > .tab_content > .content_panel > .table_type2 > h3 { font-size: 20px; color: #333; font-weight: 600; }
#container > .wrapper > .id_password_search > .tab_container > .tab_content > .content_panel > .table_type2 { padding: 30px 0 0 0; }
#container > .wrapper > .id_password_search > .tab_container > .tab_content > .content_panel > .result { margin: 30px 0 0 0; padding: 30px; border-radius: 10px; background: #F5F6FA; }
#container > .wrapper > .id_password_search > .tab_container > .tab_content > .content_panel > .result > p { padding: 5px 0; font-size: 16px; color: #888; text-align: center; }
#container > .wrapper > .id_password_search > .tab_container > .tab_content > .content_panel > .result > p > span { margin: 0 20px 0; font-size: 20px; color: #333; font-weight: 600; display: inline-block; }
#container > .wrapper > .id_password_search > .tab_container > .tab_content > .content_panel > .result > p:first-child { padding: 0 0 15px 0; font-size: 20px; color: #888; text-align: center; text-decoration: underline; text-decoration-color: #3268DD; text-underline-offset: 8px; }
#container > .wrapper > .id_password_search > .tab_container > .tab_content > .content_panel > .result > p > img { padding: 0 5px 0 0; }

/* 직무역량강화교육 과정 리스트 */
#container > .wrapper > .product_lists > ul { margin: 30px 0 0; }
#container > .wrapper > .product_lists > ul > li { position: relative; padding: 30px 0; border-bottom: 1px solid #ddd; display: flex; }
#container > .wrapper > .product_lists > ul > li > .thumb_nail { width: 250px; height: 180px; margin: 0 40px 0 0; cursor: pointer; }
#container > .wrapper > .product_lists > ul > li > .thumb_nail > img { width: 100%; border-radius: 20px; object-fit: cover; }
#container > .wrapper > .product_lists > ul > li > .text_box { width: 600px; }
#container > .wrapper > .product_lists > ul > li > .text_box > span { width: 110px; padding: 0; border-radius: 0; display: inline-block; }
#container > .wrapper > .product_lists > ul > li > .text_box > span > img { padding: 3px 5px 3px 0; }
#container > .wrapper > .product_lists > ul > li > .text_box > p { padding: 5px 0 0 0; }
#container > .wrapper > .product_lists > ul > li > .text_box > p > a { font-size: 25px; color: #333; font-weight: 600; }
#container > .wrapper > .product_lists > ul > li > .text_box > ol { padding: 5px 0 0 0; }
#container > .wrapper > .product_lists > ul > li > .text_box > ol > li { padding: 4px 0; display: flex; }
#container > .wrapper > .product_lists > ul > li > .text_box > ol > li > p { width: 100px; padding: 0 10px 0 0; font-size: 16px; color: #333; font-weight: 600; }
#container > .wrapper > .product_lists > ul > li > .text_box > ol > li > span { font-size: 16px; color: #888; }
#container > .wrapper > .product_lists > ul > li > button { position: absolute; right: 10px; bottom: 20px; height: 38px; line-height: 38px; width: 91px; margin: auto 0 0 auto; padding: 0; border-radius: 5px; font-size: 14px; }

/* 과정리스트 - 필수의무교육 */
#container > .wrapper > .special > .title { padding: 0 0 50px 0; }
#container > .wrapper > .special > .button_box { justify-content: right; align-items: center; display: flex; }
#container > .wrapper > .special > .button_box > button { width: auto; margin: 0 0 0 10px; }
#container > .wrapper > .special > .button_box > button > img { padding: 0 10px 0 0; margin: -3px 0 0 0; }
#container > .wrapper > .special > h2 { font-size: 20px; color: #333; font-weight: 600; }
#container > .wrapper > .special > ul { margin: 20px 0 0 0; overflow: hidden; }
#container > .wrapper > .special > ul > li { width: 298px; height: 285px; margin: 0 28px 25px 0; text-align: center; cursor: pointer; float: left; }
#container > .wrapper > .special > ul > li:nth-child(3n) { margin: 0; }
#container > .wrapper > .special > ul > li > .thumb { width: 100%; height: 223px; }
#container > .wrapper > .special > ul > li > .thumb > img { width: 100%; }
#container > .wrapper > .special > ul > li > p { line-height: 20px; padding: 10px 0 0 0; font-size: 16px; color: #333; font-weight: 500; }
/* 과정상세 */
#container > .wrapper > .job > .job_box { padding: 20px 0 0 0; border-bottom: 1px solid #ddd; overflow: hidden; }
#container > .wrapper > .job > .job_box > .job_thumb { width: 42%; padding: 0 40px 0 0; float: left; }
#container > .wrapper > .job > .job_box > .job_thumb > .thumb_nail { width: 400px; height: 240px; border-radius: 20px; }
#container > .wrapper > .job > .job_box > .job_thumb > .thumb_nail > img { width: 100%; height: 100%; border-radius: 20px; object-fit: cover; }
#container > .wrapper > .job > .job_box > .job_thumb > .button_box { padding: 10px 0 0 0; overflow: hidden; }
#container > .wrapper > .job > .job_box > .job_thumb > .button_box > button { width: 195px; height: 38px; line-height: 38px; border-radius: 5px; border: 1px solid #333; font-size: 14px; color: #333; float: left; }
#container > .wrapper > .job > .job_box > .job_thumb > .button_box > button > img { margin: -3px 0 0 0; }
#container > .wrapper > .job > .job_box > .job_thumb > .button_box > button + button { float: right; }
#container > .wrapper > .job > .job_box > .job_thumb > .guide { margin: 20px 0 0 0; padding: 15px; border-radius: 10px; background: #F5F6FA; clear: both; }
#container > .wrapper > .job > .job_box > .job_thumb > .guide > .top { padding: 0 0 10px 0; line-height: 27px; border-bottom: 1px solid #ddd; overflow: hidden; }
#container > .wrapper > .job > .job_box > .job_thumb > .guide > .top > p { font-size: 18px; color: #333; font-weight: 600; letter-spacing: -0.5px; float: left; }
#container > .wrapper > .job > .job_box > .job_thumb > .guide > .top > button { width: auto; height: 27px; line-height: 27px; border: 1px solid #333; border-radius: 5px; background: transparent; color: #333; float: right; }
#container > .wrapper > .job > .job_box > .job_thumb > .guide > p { padding: 10px 0 0 0; line-height: 23px; font-size: 14.5px; color: #888; }
#container > .wrapper > .job > .job_box > .job_thumb > .guide > p > span { color: #3268DD; font-weight: 500; }
#container > .wrapper > .job > .job_box > .job_info { width: 53%; float: left; }
#container > .wrapper > .job > .job_box > .job_info > h2 { font-size: 30px; color: #333; font-weight: 600; }
#container > .wrapper > .job > .job_box > .job_info > ul { padding: 30px 0 0 0; }
#container > .wrapper > .job > .job_box > .job_info > ul > li { padding: 20px 0; border-bottom: 1px solid #ddd; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > p { padding: 0 0 15px 0; font-size: 16px; color: #888; font-weight: 400; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > p:last-child { padding: 0; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > p > span { width: 100px; padding: 0 10px 0 0; color: #333; font-weight: 600; display: inline-block; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > dl > dt { width: 100px; padding: 0 0 15px 0; font-size: 16px; color: #333; font-weight: 600; float: left; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > dl.type > dd { display: table; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > dl.company > dt img { margin: -3px 0 0 7px; cursor: pointer; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > dl.company > dt:hover span.tooltip { display: block; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > dl.company > dt { position: relative; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > dl.company > dt > span.tooltip { position: absolute; left: 0; bottom: 50px; width: 320px; padding: 15px; border-radius: 10px; background: #3268DD; font-size: 14px; color: #fff; font-weight: 400; display: none; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > dl.company > dt > span.tooltip:after { position: absolute; top: 129px; left: 40px; width: 0; height: 0; border-top: 8px solid #3268DD; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid transparent;  content: ''; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > dl.company > dt > span.tooltip > button { width: auto; height: 30px; line-height: 30px; margin: 10px 0 0 50%; border: 1px solid #fff; border-radius: 0; background: transparent; color: #fff !important; text-align: center; transform: translateX(-50%); display: block; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > dl.company > dd { overflow: hidden; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > dl > dd { padding: 0 0 0 10px; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > dl > dd.radio input[type="radio"]+label { padding: 0 0 0 30px; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > dl > dd.radio > div { margin: 10px 0 0; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > dl > dd.radio > div:first-child { margin-top: 0; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > dl > dd.radio .radio_label > span { padding: 0 0 0 5px; font-size: 14px; color: #3268DD; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > dl > dd.radio .radio_label { position: relative; color: #888; letter-spacing: -1px; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > dl > dd.radio .click_tooltip:hover span.tooltip { display: block; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > dl > dd.radio .radio_label > span.tooltip { position: absolute; left: 0; bottom: 40px; width: 320px; padding: 15px; border-radius: 10px; background: #3268DD; font-size: 14px; color: #fff; display: none; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > dl > dd.radio .radio_label > span.tooltip:after { position: absolute; top: 69px; left: 40px; width: 0; height: 0; border-top: 8px solid #3268DD; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid transparent;  content: ''; }
#container > .wrapper > .job > .job_box > .job_info > ul > li > dl > dd.radio .radio_label > span.tooltip > strong { color: #fff; font-weight: 600; }
#container > .wrapper > .job > .job_box > .job_info > ul > li.price { text-align: right; }
#container > .wrapper > .job > .job_box > .job_info > ul > li.price > p { padding: 0 0 5px 0; font-size: 35px; color: #DE3176; font-weight: 600; }
#container > .wrapper > .job > .job_box > .job_info > ul > li.price > p > span { width: auto; font-size: 28px; color: #888; }
#container > .wrapper > .job > .job_box > .job_info > ul > li.price > span { font-size: 14px; color: #888; text-decoration: underline; cursor: pointer; }
#container > .wrapper > .job > .job_box > .job_info > ul > li:last-child { border-bottom: none; }
#container > .wrapper > .job > .disable { padding: 30px 0 50px 0; text-align: center; color: #DE3176; }
#container > .wrapper > .job > button { width: 350px; margin: 30px 0 80px 50%; transform: translateX(-50%); }
#container > .wrapper > .job > .tabs .tab_title { width: calc(100% / 5); }
#container > .wrapper > .job > .tabs > .tab_content.process > .video { height: 505px; margin: 25px 10px; padding: 20px; background: #fba6b6; }
#container > .wrapper > .job > .tabs > .tab_content.process > table > tbody > tr:nth-child(5),
#container > .wrapper > .job > .tabs > .tab_content.process > table > tbody > tr:nth-child(6),
#container > .wrapper > .job > .tabs > .tab_content.process > table > tbody > tr:nth-child(7) { border-top: 1px solid #ddd; }
#container > .wrapper > .job > .tabs > .tab_content.process > table > tbody > tr > th { width: 100px; height: 50px; padding: 15px 0 0; color: #333; font-weight: 600; vertical-align: top; }
#container > .wrapper > .job > .tabs > .tab_content.process > table > tbody > tr > td { height: 50px; padding: 10px 20px; color: #888; vertical-align: middle; }
#container > .wrapper > .job > .tabs > .tab_content.process > table > tbody > tr > td > p { padding: 5px 0; color: #888; }
#container > .wrapper > .job > .tabs > .tab_content.process > table > tbody > tr > td > ol > li { position: relative; line-height: 30px; padding: 0 0 0 20px; color: #888; }
#container > .wrapper > .job > .tabs > .tab_content.process > table > tbody > tr > td > ol > li::before { position: absolute; top: 11px; left: 0; width: 15px; height: 7px; background: url("/images/join/icon_join_info_check.png") no-repeat; content: ''; }
#container > .wrapper > .job > .tabs > .tab_content.process > table > tbody > tr > td > ol.strong > li > strong { font-size: 16px; color: #888;}
#container > .wrapper > .job > .tabs > .tab_content.process > table > tbody > tr > td > ol.strong > li > p { line-height: 24px; padding: 0 0 10px 0; font-size: 14px; color: #888;  }
#container > .wrapper > .job > .tabs > .tab_content.process > table > tbody > tr:nth-child(6) > th { line-height: 24px; }
#container > .wrapper > .job > .tabs > .tab_content.professor { padding: 40px 0 0 0; }
#container > .wrapper > .job > .tabs > .tab_content.professor > ul > li { width: 50%; padding: 0 0 30px 0; float: left; }
#container > .wrapper > .job > .tabs > .tab_content.professor > ul > li > .thumb_nail { width: 105px; height: 125px; margin: 0 10px 0 0; border: 1px solid #ddd; border-radius: 10px; float: left; }
#container > .wrapper > .job > .tabs > .tab_content.professor > ul > li > .thumb_nail > img { width: 100%; height: 100%; object-fit: cover;}
#container > .wrapper > .job > .tabs > .tab_content.professor > ul > li > .text { float: left; }
#container > .wrapper > .job > .tabs > .tab_content.professor > ul > li > .text > h3 { font-size: 20px; color: #333; font-weight: 600; }
#container > .wrapper > .job > .tabs > .tab_content.professor > ul > li > .text > h3 > span { padding: 0 0 0 5px; font-size: 16px; color: #888; font-weight: 600; }
#container > .wrapper > .job > .tabs > .tab_content.professor > ul > li > .text > .career { padding: 15px 0 5px 0; line-height: 23px; font-size: 16px; color: #888; }
#container > .wrapper > .job > .tabs > .tab_content.class > table { margin: 25px 0 0 0; }
#container > .wrapper > .job > .tabs > .tab_content.class > table > tbody > tr > td { padding: 12px 20px; }
#container > .wrapper > .job > .tabs > .tab_content.class > table > tbody > tr > td:last-child { text-align: left; }
#container > .wrapper > .job > .tabs > .tab_content.standard > ul { margin: 25px 0 0 0; padding: 50px 75px; background: #F5F6FA; overflow: hidden; }
#container > .wrapper > .job > .tabs > .tab_content.standard > ul > li { float: left; }
#container > .wrapper > .job > .tabs > .tab_content.standard > ul > li:first-child { position: relative; width: 170px; height: 170px; border-radius: 50%; background: #fff; border: 1px solid #ddd; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); }
#container > .wrapper > .job > .tabs > .tab_content.standard > ul > li:first-child > p.probability { position: relative; top: 50px; font-size: 20px; text-align: center; color: #fff; font-weight: 500; z-index: 2; }
#container > .wrapper > .job > .tabs > .tab_content.standard > ul > li:first-child > p.probability > span { font-size: 28px; text-align: center; color: #fff; display: block; float: none; }
#container > .wrapper > .job > .tabs > .tab_content.standard > ul > li:first-child::before { position: absolute; top: 15px; left: 16px; width: 140px; height: 140px; border-radius: 50%; background: #88aeff; content: ''; z-index: 1; }
#container > .wrapper > .job > .tabs > .tab_content.standard > ul > li:nth-child(n+2):nth-child(-n+3) { position: relative; padding: 20px; margin: 0 0 0 70px; border-radius: 20px; border: 1px solid #ddd; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); background: #fff; }
#container > .wrapper > .job > .tabs > .tab_content.standard > ul > li:nth-child(3) { margin: 0 !important; float: right; }
#container > .wrapper > .job > .tabs > .tab_content.standard > ul > li:nth-child(2):before,
#container > .wrapper > .job > .tabs > .tab_content.standard > ul > li:nth-child(3):before { position: absolute; top: 60px; left: -60px; width: 42px; height: 42px; background: url("/images/sub/img_job_plus.png") no-repeat; content: ''; }
#container > .wrapper > .job > .tabs > .tab_content.standard > ul > li > p.test { padding: 0 0 5px 0; font-size: 20px; color: #333; font-weight: 500; text-align: center; }
#container > .wrapper > .job > .tabs > .tab_content.standard > ul > li > p.rate { padding: 0 0 15px 0; margin: 0 0 15px 0; border-bottom: 1px solid #3268DD; font-size: 15px; color: #333; font-weight: 500; text-align: center; }
#container > .wrapper > .job > .tabs > .tab_content.standard > ul > li > p { padding: 0 0 10px 0; font-size: 16px; color: #3268DD; font-weight: 500; }
#container > .wrapper > .job > .tabs > .tab_content.standard > ul > li > p > span { color: #888; font-weight: 400; float: right; }
#container > .wrapper > .job > .tabs > .tab_content.standard > ul > li > p:last-child { padding: 0; }
#container > .wrapper > .job > .tabs > .tab_content.standard > dl { padding: 50px 0 0 0; }
#container > .wrapper > .job > .tabs > .tab_content.standard > dl > dt { padding: 0 0 20px 0; font-size: 20px; color: #333; font-weight: 500; }
#container > .wrapper > .job > .tabs > .tab_content.standard > dl > dd { padding: 0 0 20px 20px; background: url("/images/join/icon_join_info_check.png") no-repeat; background-position: 0 6px; font-size: 16px; color: #888; }
/* 과정상세 - 수강후기 리스트 */
#reviewContent > ul { margin: 0 auto; }
#reviewContent > ul > li { border-bottom: 1px solid #ddd; }
#reviewContent > ul > li > dl { position: relative; padding: 20px 0; align-items: flex-start; cursor: pointer; transition: background-color 0.2s ease; display: flex; }
#reviewContent > ul > li > dl > dt { margin: 0 25px 0 0; color: #3268DD; font-size: 16px; white-space: nowrap; flex-shrink: 0; }
#reviewContent > ul > li > dl > dd.content { min-width: 0; flex: 1; }
#reviewContent > ul > li > dl > dd.content > .review { line-height: 26px; font-size: 16px; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; transition: all 0.3s ease; overflow: hidden; display: -webkit-box; }
#reviewContent > ul > li > dl > dd.arrow { width: 10px; height: 20px; margin: 2px 0 0 10px; transition: transform 0.3s ease; flex-shrink: 0; align-items: center; justify-content: center; display: flex; }
#reviewContent > ul > li > dl > dd.arrow::before { font-size: 14px; color: #888; font-weight: 700; transition: color 0.3s ease; content: 'Ｖ'; display: block; }
#reviewContent > ul > li.active > dl > dd.content > .review { -webkit-line-clamp: unset; display: block; }
#reviewContent > ul > li.active > dl > dd.arrow { transform: rotate(180deg); }
#reviewContent > ul > li.active > dl > dd.arrow::before { color: #3268DD !important; }
/* 특강 과정상세 */
#container > .wrapper > .free_detail > .title { position: relative; height: 45px; text-align: left; }
#container > .wrapper > .free_detail > .title > h2 { font-size: 20px; color: #333; font-weight: 500; }
#container > .wrapper > .free_detail > .title > button { position: absolute; top: 0; right: 0; }
#container > .wrapper > .free_detail > .detail { padding: 20px 0 0 0; border-top: 1px solid #ddd; overflow: hidden; }
#container > .wrapper > .free_detail > .detail > .thumb_nail { width: 400px; height: 250px; margin: 0 40px 0 0; border-radius: 20px; float: left; }
#container > .wrapper > .free_detail > .detail > .thumb_nail > img { width: 100%; height: 100%; border-radius: 20px; object-fit: cover; }
#container > .wrapper > .free_detail > .detail > .view { width: 510px; float: left; }
#container > .wrapper > .free_detail > .detail > .view > .text { border-bottom: 1px solid #ddd; overflow: hidden; }
#container > .wrapper > .free_detail > .detail > .view > .text > h3 { padding: 0 0 30px 0; font-size: 30px; color: #333; font-weight: 600; }
#container > .wrapper > .free_detail > .detail > .view > .text > dl { padding: 0 0 18px 0; overflow: hidden; }
#container > .wrapper > .free_detail > .detail > .view > .text > dl:last-child { padding: 0 0 20px 0; }
#container > .wrapper > .free_detail > .detail > .view > .text > dl:last-child > dt { height: 60px; }
#container > .wrapper > .free_detail > .detail > .view > .text > dl:last-child > dd { padding: 0 0 15px 0; }
#container > .wrapper > .free_detail > .detail > .view > .text > dl:last-child > dd:last-child { padding: 0; color: #3268DD; }
#container > .wrapper > .free_detail > .detail > .view > .text > dl > dt { width: 100px; font-size: 16px; color: #333; font-weight: 600; float: left; }
#container > .wrapper > .free_detail > .detail > .view > .text > dl > dd { font-size: 16px; color: #888; }
#container > .wrapper > .free_detail > .detail > .view > .button_wrap { width: 100%; margin: 30px 0 0; text-align: center; }
#container > .wrapper > .free_detail > table { margin: 70px 0 0; }
#container > .wrapper > .free_detail > table > tbody > tr > th { width: 130px; padding: 20px 0; font-weight: 600; vertical-align: top; text-align: left; }
#container > .wrapper > .free_detail > table > tbody > tr > td { padding: 20px; }
#container > .wrapper > .free_detail > table > tbody > tr > th,
#container > .wrapper > .free_detail > table > tbody > tr > td { font-size: 16px; }
#container > .wrapper > .free_detail > table > tbody > tr > td > dl { margin: 15px 0 0; }
#container > .wrapper > .free_detail > table > tbody > tr > td > dl:first-child { margin-top: 0; }
#container > .wrapper > .free_detail > table > tbody > tr > td > p.law { position: relative; margin: 10px 0 0 0; padding: 20px 20px 20px 30px; background: #F3F3F3; font-size: 16px; color: #888; }
#container > .wrapper > .free_detail > table > tbody > tr > td > ol { padding: 15px 0 0 0; }
#container > .wrapper > .free_detail > table > tbody > tr > td > ol > li { position: relative; padding: 0 0 0 20px; color: #888; }
#container > .wrapper > .free_detail > table > tbody > tr > td > ol > li:before { position: absolute; top: 8px; left: 0; width: 17px; height: 8px; background: url("/images/join/icon_join_info_check.png") no-repeat; content: ''; }
/* 특강 일괄신청 */
#specialMultiOrderLayer > .inner > .content > .text { margin: 0 0 20px 0; padding: 15px 0; text-align: center; background: #F5F6FA; }
#specialMultiOrderLayer > .inner > .content > .text > p { font-size: 16px; color: #3268DD; font-weight: 500; }
#specialMultiOrderLayer > .inner > .content > .text > p + p { color: #333; font-size: 14px; }
/* 교육신청 (교사) */
#container > .wrapper > .apply > .step { width: 400px; margin: 0 auto; padding: 50px 0; overflow: hidden; }
#container > .wrapper > .apply > .step > ul > li { position: relative; width: 45%; margin: 0 50px 0 0; float: left; }
#container > .wrapper > .apply > .step > ul > li.active > span { background: #3268DD; }
#container > .wrapper > .apply > .step > ul > li:first-child { width: 32%; }
#container > .wrapper > .apply > .step > ul > li:last-child { margin: 0; float: right;}
#container > .wrapper > .apply > .step > ul > li::after { position: absolute; top: 22px; right: -60px; width: 30px; border: 1px dashed #ddd; content: ''; }
#container > .wrapper > .apply > .step > ul > li:last-child::after { display: none; }
#container > .wrapper > .apply > .step > ul > li > span { width: 50px; height: 30px; line-height: 30px; padding: 10px 0; margin: 0 20px 0 0; border-radius: 50%; background: #ddd; text-align: center; float: left; display: inline-block; }
#container > .wrapper > .apply > .step > ul > li:last-child > span { height: 20px; padding: 15px 0; }
#container > .wrapper > .apply > .step > ul > li > .text > p { font-size: 14px; color: #3268DD; font-weight: 500; }
#container > .wrapper > .apply > .step > ul > li > .text > p + p { font-size: 16px; color: #888; font-weight: 400; }
#container > .wrapper > .apply > .apply_box > ul > li { padding: 30px 0 0 0; }
#container > .wrapper > .apply > .apply_box > ul > li > h3 { font-size: 20px; color: #333; font-weight: 600; }
#container > .wrapper > .apply > .apply_box > ul > li > .clause { height: 200px; padding: 20px; margin: 20px 0 0 0; border: 1px solid #ddd; border-radius: 10px; overflow-y: auto; }
#container > .wrapper > .apply > .apply_box > ul > li > .clause > * { font-size: 16px; color: #333; }
#container > .wrapper > .apply > .apply_box > ul > li > .clause > .title { padding: 0 0 15px 0; }
#container > .wrapper > .apply > .apply_box > ul > li > .clause > .content { line-height: 24px; font-size: 14px; color: #888; }
#container > .wrapper > .apply > .apply_box > ul > li > .clause > .long { line-height: 24px; padding: 20px; margin: 0 0 20px 0; border-radius: 10px; background: #F5F6FA; font-size: 14px; color: #888; }
#container > .wrapper > .apply > .apply_box > ul > li > .compulsory { margin: 10px 0 0 0; overflow: hidden; }
#container > .wrapper > .apply > .apply_box > ul > li > .compulsory > label { float: right; }
#container > .wrapper > .apply > .apply_box > ul > li > .compulsory > label > span { color: #DE3176; }
#container > .wrapper > .apply > .apply_box > ul > li > table { margin: 20px 0 0 0; }
#container > .wrapper > .apply > .apply_box > ul > li > table > tbody > tr > td > input { width: 100px; }
#container > .wrapper > .apply > .apply_box > ul > li > table > tbody > tr > td > .select_wrap { margin: 0 0 0 50%; transform: translateX(-50%); }
#container > .wrapper > .apply > .apply_box > ul > li > p.color_red_pink { padding: 10px 0 0 0; font-size: 14px; }
#container > .wrapper > .apply > .apply_box > ul > li > .price { padding: 40px 0 20px 0; border-bottom: 1px solid #ddd; }
#container > .wrapper > .apply > .apply_box > ul > li > .price > p { text-align: right; font-size: 18px; color: #888; }
#container > .wrapper > .apply > .apply_box > ul > li > .price > p > span.number { font-size: 30px; color: #DE3176; font-weight: 600; }
#container > .wrapper > .apply > .apply_box > ul > li > .price > p > span.won { font-size: 28px; color: #888; font-weight: 500; }
#container > .wrapper > .apply > button { margin: 60px 0 0 50%; transform: translateX(-50%); }
#container > .wrapper > .apply > .complete_box { padding: 30px 0 0 0; border-top: 1px solid #ddd; text-align: center; }
#container > .wrapper > .apply > .complete_box > .text { padding: 30px 0 0 0; }
#container > .wrapper > .apply > .complete_box > .text > h2 { font-size: 30px; color: #3268DD; font-weight: 600; }
#container > .wrapper > .apply > .complete_box > .text > p { padding: 10px 0 0 0; font-size: 14px; color: #888; }
#container > .wrapper > .apply > .payment_box { }
#container > .wrapper > .apply > .payment_box > h2 { margin: 30px 0 6px 0; font-size: 20px; color: #333; font-weight: 500; }
#container > .wrapper > .apply > .payment_box > table td { height: 80px; }
#container > .wrapper > .apply > .button_box { padding: 80px 0 0 0; text-align: center; }
#container > .wrapper > .apply > .button_box > button { margin: 0 10px 0 0; }
#container > .wrapper > .apply > .payment_fail_box { padding: 20px 0 0 0; text-align: center; }
#container > .wrapper > .apply > .payment_fail_box > .text { padding: 30px 0 0 0; }
#container > .wrapper > .apply > .payment_fail_box > .text > h2 { font-size: 30px; font-weight: 600; }
#container > .wrapper > .apply > .payment_fail_box > .text > p { padding: 30px 0 0 0; line-height: 30px; font-size: 16px; color: #888; }
/* 교육신청 및 결제 (원장) */
#container > .wrapper > .director > .button_box > button { margin: 0 10px 0 0; }
#container > .wrapper > .director > .step { width: 590px; margin: 0 auto; padding: 50px 0; overflow: hidden; }
#container > .wrapper > .contents.director > .step > ul > li { position: relative; width: 27%; margin: 0 50px 0 0; float: left; }
#container > .wrapper > .director > .step > ul > li.active > span { background: #3268DD; }
#container > .wrapper > .director > .step > ul > li:last-child { margin: 0; }
#container > .wrapper > .director > .step > ul > li::after { position: absolute; top: 22px; right: -25px; width: 30px; border: 1px dashed #ddd; content: ''; }
#container > .wrapper > .director > .step > ul > li:nth-child(2)::after { position: absolute; top: 22px; right: -32px; width: 30px; border: 1px dashed #ddd; content: ''; }
#container > .wrapper > .director > .step > ul > li:last-child::after { display: none; }
#container > .wrapper > .director > .step > ul > li > span { width: 50px; height: 30px; line-height: 30px; padding: 10px 0; margin: 0 20px 0 0; border-radius: 50%; background: #ddd; text-align: center; float: left; display: inline-block; }
#container > .wrapper > .director > .step > ul > li:last-child > span { height: 20px; padding: 15px 0; }
#container > .wrapper > .director > .step > ul > li > .text > p { font-size: 14px; color: #3268DD; font-weight: 500; }
#container > .wrapper > .director > .step > ul > li > .text > p + p { font-size: 16px; color: #888; font-weight: 400; }
#container > .wrapper > .director > .director_box > .info > .top { margin: 0 0 6px 0; line-height: 38px; overflow: hidden;}
#container > .wrapper > .director > .director_box > .info > .top > h3 { font-size: 20px; color: #333; font-weight: 500; float: left; }
#container > .wrapper > .director > .director_box > .info > .top > button { width: auto; float: right; }
#container > .wrapper > .director > .director_box > .info > .table_type3 { border-top: 2px solid #3268DD; }
#container > .wrapper > .director > .director_box > .info > .table_type3 > table { width: 100%; border: 1px solid #ddd; }
#container > .wrapper > .director > .director_box > .info > .table_type3 > table > tbody > tr > th { width: 240px; }
#container > .wrapper > .director > .director_box > .info > .table_type3 > table > tbody > tr > td { width: 212px; }
#container > .wrapper > .director > .director_box > .info > .table_type3 > table > tbody > tr > th.click:hover span.tooltip { display: block; }
#container > .wrapper > .director > .director_box > .info > .table_type3 > table > tbody > tr > th { position: relative; }
#container > .wrapper > .director > .director_box > .edu > h3 { margin: 30px 0 6px 0; line-height: 38px; font-size: 20px; color: #333; font-weight: 500; }
#container > .wrapper > .director > .director_box > .edu > .table_type1 > table > tbody > tr > td > .select_wrap { width: 120px; }
#container > .wrapper > .director > .director_box > .edu > p { padding: 10px 0; font-size: 14px; color: #DE3176; }
#container > .wrapper > .director > .director_box > .edu > button { margin: 30px 0 0 50%; transform: translateX(-50%); }
#container > .wrapper > .director > .director_box > .edu > .price { padding: 70px 0 20px 0; border-bottom: 1px solid #ddd; }
#container > .wrapper > .director > .director_box > .edu > .price > p { text-align: right; font-size: 18px; color: #888; }
#container > .wrapper > .director > .director_box > .edu > .price > p > span.number { font-size: 30px; color: #DE3176; font-weight: 600; }
#container > .wrapper > .director > .director_box > .edu > .price > p > span.won { font-size: 28px; color: #888; font-weight: 500; }

/* 교육비 결제 원장*/
#container > .wrapper > .owner_pay > .pay_box > ul > li { padding: 30px 0 20px 0; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > h3 { font-size: 20px; color: #333; font-weight: 600; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > p { position: relative; margin: 20px 0 0 10px; font-size: 16px; color: #333; font-weight: 500; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > p:before { position: absolute; top: 2px; left: -10px; width: 3px; height: 16px; background: #3268DD; content: ''; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > .clause { height: 200px; padding: 20px; margin: 20px 0 0 0; border: 1px solid #ddd; border-radius: 10px; overflow-y: auto; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > .clause > p { font-size: 16px; color: #333; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > .clause > p.title { padding: 0 0 15px 0; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > .clause > p.content { line-height: 24px; font-size: 14px; color: #888; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > .clause > p.long { line-height: 24px; padding: 20px; margin: 0 0 20px 0; border-radius: 10px; background: #F5F6FA; font-size: 14px; color: #888; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > .clause > p > span { padding: 20px; font-weight: 500; font-size: 14px; color: #888; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > .clause > span { background: #F5F6FA; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > .table_type1 { margin: 20px 0 0 0; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > .compulsory { margin: 10px 0 0 0; overflow: hidden; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > .compulsory > label { float: right; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > .compulsory > label > span { color: #DE3176; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > table { margin: 20px 0 0 0; padding: 10px 0 0 0; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > table.form { border-top: 1px solid #ddd; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > table.form > tbody > tr > th { line-height: 24px; font-size: 16px; font-weight: 500; text-align: left; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > table.form > tbody > tr > td { font-size: 16px; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > table.form > tbody > tr > td > p { font-size: 20px; color: #DE3176; font-weight: 500; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > table.form > tbody > tr > td > p > span { font-size: 16px; color: #888; font-weight: normal; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > table.form > tbody > tr > td input[type="radio"]+label:before { top: 2px; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > table.form > tbody > tr > td input[type="radio"]:checked+label:before { top: 2px; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > table.form > tbody > tr > td input[type="radio"]:checked+label:after { top: 3px; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > table.form > tbody > tr > td label { color: #888; }
#container > .wrapper > .owner_pay > .pay_box > ul > li > table.form > tbody > tr > td span.date { color: #DE3176; font-weight: 500; }
#container > .wrapper > .owner_pay > .pay_box > .button_box { margin: 60px 0 0; text-align: center; }

/* 마이페이지 - 교육신청내역 */
#container > .wrapper > .my_apply > .info { padding: 30px 0 30px 0; }
#container > .wrapper > .my_apply > .info > .box { padding: 20px; border-radius: 10px; background: #88aeff; overflow: hidden; }
#container > .wrapper > .my_apply > .info > .box > .change { padding: 0 20px 0 0; float: left; }
#container > .wrapper > .my_apply > .info > .box > .change.owner { position: relative; top: 190px; }
#container > .wrapper > .my_apply > .info > .box > .change > img { padding: 20px 0 0 0; display: block; }
#container > .wrapper > .my_apply > .info > .box > .change > button { width: 125px; margin: 0 0 0 50%; transform: translateX(-50%); }
#container > .wrapper > .my_apply > .info > .box > .change > button:hover { background: #efefef; color: #3268DD; }
#container > .wrapper > .my_apply > .info > .box > .change > button > img { margin: -3px 0 0 0; }
#container > .wrapper > .my_apply > .info > .box > .table_box { width: 74%; float: left; }
#container > .wrapper > .my_apply > .info > .box > .table_box > .inner { padding: 15px 25px; border-radius: 10px; background: #fff;  }
#container > .wrapper > .my_apply > .info > .box > .table_box > .inner:nth-child(2n) { margin: 10px 0 0; }
#container > .wrapper > .my_apply > .info > .box > .table_box > .inner > table > tbody > tr > th { position: relative; height: 38px; padding: 0 0 0 20px; text-align: left; vertical-align: middle; }
#container > .wrapper > .my_apply > .info > .box > .table_box > .inner > table > tbody > tr > th:before { content: ''; position: absolute; top: 15px; left: 0; width: 11px; height: 7px; background: url("/images/join/icon_join_info_check.png") no-repeat; }
#container > .wrapper > .my_apply > .info > .box > .table_box > .inner > table > tbody > tr > td { height: 38px; color: #888; vertical-align: middle; }
#container > .wrapper > .my_apply .search { line-height: 40px; margin: 80px 0 30px 0; padding: 20px 30px; background: #F5F6FA; justify-content: right; align-items: center; overflow: hidden; display: flex; }
#container > .wrapper > .my_apply .search > .box > p { padding: 0 10px 0 0; font-size: 16px; color: #333; font-weight: 500; float: left; }
#container > .wrapper > .my_apply .search > .box > .select { width: 100px; margin: 0 10px 0 0; background: #fff; float: left; }
#container > .wrapper > .my_apply .search > .box > .select > select { width: 100px; }
#container > .wrapper > .my_apply .search > button { width: auto; padding: 0 15px; border-radius: 30px; float: right; }
#container > .wrapper > .my_apply > table > thead > tr > th { line-height: 20px; vertical-align: middle; }
#container > .wrapper > .my_apply > table > tbody > tr > td > button.print { min-width: 42px; width: 42px; }
#container > .wrapper > .my_apply > table > tbody > tr > td > button.cancel { min-width: 55px; width: 55px; }
#container > .wrapper > .my_apply > table > tbody > tr > td > button.print:hover { background: #f6f6f6; }
#container > .wrapper > .my_apply > .number { line-height: 40px; padding: 10px 0 0 0; overflow: hidden; }
#container > .wrapper > .my_apply > .number > p { padding: 0 15px 0 0; font-size: 14px; color: #DE3176; float: left; }
#container > .wrapper > .my_apply > .number > button { padding: 0 15px; width: auto; float: right; }
#container > .wrapper > .my_apply > .number > button > img { margin: -3px 0 0 5px; }
#container > .wrapper > .my_apply > .expectations { margin: 50px 0 0 0; font-size: 18px; text-align: center; }
#container > .wrapper > .my_apply > .note { margin: 30px 0 50px 0; padding: 20px 30px; background: #F5F6FA; justify-content: left; align-items: center; display: flex; }
#container > .wrapper > .my_apply > .note > .text { padding: 0 0 0 20px; }
#container > .wrapper > .my_apply > .note > .text > h2 { font-size: 20px; color: #333; font-weight: 500; }
#container > .wrapper > .my_apply > .note > .text > p { padding: 5px 0 0 0; font-size: 14px; color: #3268DD; letter-spacing: -0.5px; }
#container > .wrapper > .my_apply > .note > button { width: auto; margin: 85px 0 0 auto; }
#container > .wrapper > .my_apply > .cancel_refund { margin: 50px 0 0; }
#container > .wrapper > .my_apply > .cancel_refund > h2 { padding: 0 0 20px 0; font-size: 20px; color: #333; font-weight: 500; }
#container > .wrapper > .my_apply > .cancel_refund > dl { padding: 0 0 20px 0; }
#container > .wrapper > .my_apply > .cancel_refund > dl > dt { position: relative; padding: 0 0 0 20px; font-size: 16px; color: #888; }
#container > .wrapper > .my_apply > .cancel_refund > dl > dt:before { position: absolute; top: 7px; left: 0; width: 11px; height: 7px; background: url("/images/join/icon_join_info_check.png") no-repeat; content: ''; }
#container > .wrapper > .my_apply > .cancel_refund > dl > dd { padding: 10px; margin: 10px 0 0 20px; background: #F3F3F3; }
#container > .wrapper > .my_apply > .cancel_refund > dl > dd > p { position: relative; line-height: 24px; padding: 0 0 0 20px; font-size: 16px; color: #888; }
#container > .wrapper > .my_apply > .cancel_refund > dl > dd > p:before { position: absolute; top: 12px; left: 10px; width: 3px; height: 3px; border-radius: 50%; background: #888; content: ''; }
#container > .wrapper > .my_apply > .contract { padding: 30px 0 0 0; }
#container > .wrapper > .my_apply > .contract > img { border-radius: 10px; }
#container > .wrapper > .my_apply > .contract > ul { padding: 30px 0 0 0; }
#container > .wrapper > .my_apply > .contract > ul > li { position: relative; padding: 0 0 25px 20px; }
#container > .wrapper > .my_apply > .contract > ul > li > p { font-size: 16px; color: #888; }
#container > .wrapper > .my_apply > .contract > ul > li > p.mail { padding: 5px 0 0 0; font-size: 16px; color: #333; font-weight: 500; }
#container > .wrapper > .my_apply > .contract > ul > li > p.mail > span { color: #3268DD; }
#container > .wrapper > .my_apply > .contract > ul > li:before { position: absolute; top: 7px; left: 0; width: 11px; height: 7px; background: url("/images/join/icon_join_info_check.png") no-repeat; content: ''; }
#container > .wrapper > .my_apply > .director_submit { margin: 0 0 20px 0; padding: 15px 0; background: #F5F6FA; justify-content: center; align-items: center; display: flex; }
#container > .wrapper > .my_apply > .director_submit > .file .file_name { width: 300px; }
#container > .wrapper > .my_apply > .director_submit > .number { line-height: 38px; padding: 0 20px 0 0; }
#container > .wrapper > .my_apply > .director_submit > .number > img { margin: 8px 10px 0 0; float: left; }
#container > .wrapper > .my_apply > .director_submit > .number > p { font-size: 18px; color: #333; font-weight: 500; float: left; }
#container > .wrapper > .my_apply > .tabs > .job > .table_type1 > table > tbody > tr > td > button { width: auto; }
#container > .wrapper > .my_apply > .tabs > .job > .table_type1 > table > tbody > tr > td > span.type { width: fit-content; margin: 0 0 3px 0; display: block; }
#container > .wrapper > .my_apply > .tabs > .job > .table_type1 > table > tbody > tr > td.name { text-align: left; }
#container > .wrapper > .my_apply > .tabs > .book > .table_type1 > table > tbody > tr > td > button { width: 55px; min-width: 55px; }
#container > .wrapper > .my_apply > .tabs > .book > .table_type1 > table > tbody > tr > td:nth-child(3) { text-align: left; }
#container > .wrapper > .my_apply > .info > .box > .table_box > table > tbody > tr > td > .text { padding: 15px 0 0 10px; overflow: hidden; }
#container > .wrapper > .my_apply > .info > .box > .table_box > table > tbody > tr > td > .text > p { line-height: 20px; font-size: 14px; color: #DE3176; float: left; }
#container > .wrapper > .my_apply > .info > .box > .table_box > table > tbody > tr > td > .text > button { width: auto; border-radius: 50px; float: right; }
#requestPaymentLayer .content table td { padding: 15px 20px; }
/* 나의 강의실 - 교육중인 과정 */
#container > .wrapper > .my_classroom > .notice { margin: 50px 0 30px 0; padding: 20px 30px; background: #F5F6FA; justify-content: left; align-items: center; display: flex; }
#container > .wrapper > .my_classroom > .notice > img { padding: 0 20px 0 0; }
#container > .wrapper > .my_classroom > .notice > .text > p { margin: 5px 0 0; font-size: 14px; color: #333; }
#container > .wrapper > .my_classroom > .notice > .text > p:first-child { margin-top: 0; }
#container > .wrapper > .my_classroom > .refund_lists { margin: 40px 0 0; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name { margin: 40px 0 0; padding: 20px; border: 1px solid #ddd; border-radius: 10px; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name > .title { padding: 0 0 10px 0; border-bottom: 1px solid #ddd; overflow: hidden; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name > .title > p { font-size: 20px; color: #333; font-weight: 500; float: left; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name > .title > button { width: auto; float: right; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name > ul { padding: 20px 0 0 0; overflow: hidden; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name > ul > li { border-left: 0; float: left; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name > ul > li:last-child { position: relative; width: 24%; height: 189px; border-left: 1px solid #ddd; text-align: center; float: right; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name > ul > li:last-child > .box_wrap { position: absolute; bottom: 10px; right: 0; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name > ul > li:last-child > .box_wrap > a { color: #888; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name > ul > li:last-child > .box_wrap > a > img { margin: -3px 0 0 0; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name > ul > li:last-child > .box_wrap > .button_box { display: flex; gap: 10px; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name > ul > li:last-child > .box_wrap > .button_box > button { flex: 1; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name > ul > li > dl { padding: 0 0 10px 0; overflow: hidden; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name > ul > li > dl > dt { width: 110px; font-size: 16px; color: #333; font-weight: 500; float: left; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name > ul > li > dl > dd {  font-size: 16px; color: #888; float: left; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name > ul > li > dl > dd > .test { width: 180px; height: 95px; margin: 0 10px 0 0; border-radius: 10px; border: 1px solid #ddd; text-align: center; float: left;}
#container > .wrapper > .my_classroom > .refund_lists > .class_name > ul > li > dl > dd > .test > h3 { height: 40px; line-height: 40px; border-radius: 10px 10px 0 0; background: #F5F6FA; font-size: 16px; color: #333; font-weight: 500; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name > ul > li > dl > dd > .test > p { height: 55px; line-height: 55px; font-size: 18px; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name > ul > li > dl > dd > .test > p.color_blue > span { font-size: 16px; color: #3268DD; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name > ul > li > dl > dd > .test > p > span { font-size: 16px; color: #888; }
#container > .wrapper > .my_classroom > .refund_lists > .class_name > ul > li button { margin: 15px 0 0 0; }
#container > .wrapper > .my_classroom > .refund_lists > .no_course { padding: 50px 0; text-align: center; }
#container > .wrapper > .my_classroom > .special_lists > .note { margin: 50px 0 20px 0; padding: 20px 30px; background: #F5F6FA; justify-content: left; align-items: center; display: flex; }
#container > .wrapper > .my_classroom > .special_lists > .note > img { padding: 0 20px 0 0; }
#container > .wrapper > .my_classroom > .special_lists > .note > p { letter-spacing: -0.5px; font-size: 14px; color: #888; }
#container > .wrapper > .my_classroom > .special_lists > .note > p > span { color: #3268DD; }
#container > .wrapper > .my_classroom > .special_lists > .note > p > strong { color: #333; font-weight: 500; }
#container > .wrapper > .my_classroom > .special_lists > button { width: auto; margin: 0 0 20px 0; float: right; }
#container > .wrapper > .my_classroom > .special_lists > button > img { margin: -5px 0 0 0; }
#container > .wrapper > .my_classroom > .special_lists .progress { width: 150px; }
#container > .wrapper > .my_classroom > .refund_lists.complete { margin: 30px 0 0; }
#container > .wrapper > .my_classroom > .refund_lists.complete > .class_name > ul > li > .result { position: relative; height: 80px; margin: 40px 0 0; line-height: 35px; }
#container > .wrapper > .my_classroom > .refund_lists.complete > .class_name > ul > li > .buttons { position: relative; text-align: center; gap: 5px; display: flex; }
#container > .wrapper > .my_classroom > .refund_lists.complete > .class_name > ul > li > .buttons > button { flex: 1; }
#container > .wrapper > .my_classroom > .refund_lists.complete > .class_name > ul > li > .buttons > button:first-child { width: 55%; margin-left: 10px; flex: none; }
#container > .wrapper > .my_classroom > .refund_lists.complete > .class_name > ul > li > .buttons > button:last-child { width: 38%; flex: none; }
#container > .wrapper > .my_classroom > .refund_lists.complete > .class_name > ul > li > .buttons > button:only-child { width: 95%; }
/* 나의 강의실 - 교육중인과정 - 학습하기 */
#container > .wrapper > .my_study > .wrap { padding: 30px 0 0 0; }
#container > .wrapper > .my_study > .wrap > .title { line-height: 24px; overflow: hidden; }
#container > .wrapper > .my_study > .wrap > .title > img { float: left; }
#container > .wrapper > .my_study > .wrap > .title > h2 { padding: 0 0 0 10px; color: #333; font-size: 20px; font-weight: 600; float: left; }
#container > .wrapper > .my_study > .wrap > .title > h2.lecture_name { padding-bottom: 10px; font-size: 24px; }
#container > .wrapper > .my_study > .wrap > ul.date { padding: 20px 0 0 0; margin: 10px 0 0 0; border-top: 1px solid #ddd; overflow: hidden; }
#container > .wrapper > .my_study > .wrap > ul.date > li > p { padding: 0 0 20px 0; color: #888; }
#container > .wrapper > .my_study > .wrap > ul.date > li > p > span { width: 120px; font-size: 16px; color: #333; font-weight: 600; display: inline-block; }
#container > .wrapper > .my_study > .wrap > ul.date > li { float: left; }
#container > .wrapper > .my_study > .wrap > ul.date > li:last-child { float: right; }
#container > .wrapper > .my_study > .wrap > ul.date > li > .book { width: 120px; height: 85px; padding: 16px 0; border-radius: 10px; background: #3268DD; text-align: center; cursor: pointer; float: left; }
#container > .wrapper > .my_study > .wrap > ul.date > li > .book > p { color: #fff; }
#container > .wrapper > .my_study > .wrap > ul.date > li > .step { width: 120px; height: 85px; margin: 0 0 0 10px; padding: 15px 20px; border: 1px solid #ddd; border-radius: 10px; float: left; }
#container > .wrapper > .my_study > .wrap > ul.date > li > .step > h3 { padding: 0 0 10px 0; font-size: 16px; color: #333; font-weight: 600; text-align: center; }
#container > .wrapper > .my_study > .wrap > ul.date > li > .step > h3 > span { color: #3268DD; }
#container > .wrapper > .my_study > .wrap > ul.date > li > .step > p { margin: 5px 0 0; text-align: center; }
#container > .wrapper > .my_study > .wrap > ul.date > li > .step > p.mt15 { margin-top: 15px; }
#container > .wrapper > .my_study > .wrap > ul.date > li > .step > p > span { margin: 0 0 5px 0; }
#container > .wrapper > .my_study > .wrap > ul.learn { padding: 20px; margin: 30px 0 50px 0; background: #F5F6FA; overflow: hidden; }
#container > .wrapper > .my_study > .wrap > ul.learn > li { width: 44%; padding: 25px 20px; margin: 0 20px 0 0; border: 1px solid #ddd; border-radius: 20px; background: #fff; float: left; }
#container > .wrapper > .my_study > .wrap > ul.learn > li:last-child { margin: 0; }
#container > .wrapper > .my_study > .wrap > ul.learn > li:first-child > ol > li > p { padding: 0 0 10px 0; font-size: 16px; color: #333; font-weight: 500; }
#container > .wrapper > .my_study > .wrap > ul.learn > li:first-child > ol > li > .progress { width: 100%; margin: 0 0 30px 0; }
#container > .wrapper > .my_study > .wrap > ul.learn > li:first-child > ol > li:last-child > .progress { margin: 0; }
#container > .wrapper > .my_study > .wrap > ul.learn > li:first-child > ol > li:first-child > .progress .bar.green { width: 205px; }
#container > .wrapper > .my_study > .wrap > ul.learn > li:last-child > ol > li { width: 49%; border-right: 1px solid #ddd; text-align: center; float: left; }
#container > .wrapper > .my_study > .wrap > ul.learn > li:last-child > ol > li:last-child { border-right: 0; }
#container > .wrapper > .my_study > .wrap > ul.learn > li:last-child > ol > li > h3 { padding: 0 0 25px 0; font-size: 16px; color: #333; font-weight: 500; }
#container > .wrapper > .my_study > .wrap > ul.learn > li:last-child > ol > li:first-child > p { width: 105px; height: 105px; line-height: 105px; margin: 0 0 0 50%; border-radius: 50%; background: #F5F6FA; font-size: 30px; color: #3268DD; font-weight: 600; transform: translateX(-50%); }
#container > .wrapper > .my_study > .wrap > ul.learn > li:last-child > ol > li:last-child > p { padding: 15px 0 0 0; line-height: 24px; font-size: 20px; color: #333; font-weight: 600; }
#container > .wrapper > .my_study > .wrap > .tab_menu > ul > li { width: calc(100%/5); margin: 50px 0 30px 0; }
#container > .wrapper > .my_study > .wrap > .tabs > .tab_content { padding: 0; }
#container > .wrapper > .my_study > .wrap > .tabs > .notice > .table_type_gray { margin: 20px 0 0 0; }
#container > .wrapper > .my_study > .wrap > .tabs > .reference > .search { margin: 20px 0; padding: 20px 30px; background: #F5F6FA; justify-content: right; align-items: center; display: flex; }
#container > .wrapper > .my_study > .wrap > .tabs > .reference > .search > .select { width: 105px; margin: 0 10px 0 0; box-sizing: border-box; background: #fff; }
#container > .wrapper > .my_study > .wrap > .tabs > .reference > .search > .select > select { width: 105px; }
#container > .wrapper > .my_study > .wrap > .tabs > .reference > .search > button { margin: 0 0 0 10px; border-radius: 30px; }
#container > .wrapper > .my_study > .wrap > .chapter_sub_content { min-height: 300px; }
#container > .wrapper > .my_study table.gray { border-top: 1px solid #333; }
#container > .wrapper > .my_study table th,
#container > .wrapper > .my_study table td { font-size: 15px; height: 60px; }
#container > .wrapper > .my_study table td.files > p:nth-child(n+3) { margin-left: 103px; }
#container > .wrapper > .my_study table.view th { font-size: 18px; }
#container > .wrapper > .my_study table.view > tbody > tr > th > p { top: 19px; }
#container > .wrapper > .my_study .study_rate_info_layer { position: absolute; right: 20px; width: 350px; padding: 10px 20px; border: 2px solid #eee; background: #fff; font-size: 14px; color: #888; }
#lectureTalkView { margin: 20px 0 0 0; }
#lectureTalkView > .title { padding: 20px; background: #F5F6FA; overflow: hidden; }
#lectureTalkView > .title > img { padding: 0 20px 0 0; float: left; }
#lectureTalkView > .title > .text { float: left; }
#lectureTalkView > .title > .text > p { padding: 10px 0 0 0; font-size: 14px; color: #3268DD; }
#lectureTalkView > .title > .text > p + p { padding: 0; font-size: 18px; color: #333; }
#lectureTalkView > ul { padding: 20px 10px 10px 10px; }
#lectureTalkView > ul > li { margin: 10px 0 0; padding: 20px; line-height: 30px; border-radius: 10px; border: 1px solid #ddd; box-sizing: border-box; color: #888; }
#lectureTalkView > ul > li > p + p { padding: 10px 0 0; border: 0; color: #333; font-size: 14px; text-align: right; }
#lectureTalkView > ul > li > p + p > span { margin: 0 0 0 10px; color: #888; }
#courseStudy > table > tbody > tr > td { height: 60px; padding: 0 10px; }
#personCertLayer > .inner > .content > h2,
#selectCertLayer > .inner > .content > h2,
#otpMobileCertLayer > .inner > .content > h2 { padding: 15px 0; text-align: center; background-color: #F5F6FA; color: #3268DD; font-weight: 500; }
#personCertLayer > .inner > .content > p,
#selectCertLayer > .inner > .content > p,
#otpMobileCertLayer > .inner > .content > p { margin: 50px 0 30px 0; text-align: center; color: #111; font-size: 18px; font-weight: 600; }
#personCertLayer > .inner > .content > .select,
#selectCertLayer > .inner > .content > .select,
#otpMobileCertLayer > .inner > .content > .select { text-align: center; }
#personCertLayer > .inner > .content > .select > button,
#selectCertLayer > .inner > .content > .select > button,
#otpMobileCertLayer > .inner > .content > .select > button { width: 185px; height: 165px; margin: 0 25px; background: url("/images/join/img_join_phone_off.png") no-repeat; background-position: center 20px; text-align: center; }
#personCertLayer > .inner > .content > .select > button:hover,
#selectCertLayer > .inner > .content > .select > button:hover,
#otpMobileCertLayer > .inner > .content > .select > button:hover { border-color: #3268DD; background: url("/images/join/img_join_phone_on.png") no-repeat #F5F6FA; background-position: center 20px; }
#personCertLayer > .inner > .content > .select > button + button,
#otpMobileCertLayer > .inner > .content > .select > button + button { background: url("/images/join/img_join_ipin_off.png") no-repeat; background-position: center 25px; }
#selectCertLayer > .inner > .content > .select > button + button { background: url("/images/join/img_join_motp_off.png") no-repeat; background-position: center 25px; }
#personCertLayer > .inner > .content > .select > button + button:hover,
#otpMobileCertLayer > .inner > .content > .select > button + button:hover { border: 1px solid #3268DD; background: url("/images/join/img_join_ipin_on.png") no-repeat #F5F6FA; background-position: center 25px; }
#selectCertLayer > .inner > .content > .select > button + button:hover { border: 1px solid #3268DD; background: url("/images/join/img_join_motp_on.png") no-repeat #F5F6FA; background-position: center 25px; }
#personCertLayer > .inner > .content > .select > button > p,
#selectCertLayer > .inner > .content > .select > button > p,
#otpMobileCertLayer > .inner > .content > .select > button > p { padding: 85px 0 0 0; font-size: 18px; color: #3268DD; }
#selectCertLayer > .inner > .content > .motp_link { width: 385px; margin: 10px auto; text-align: right; }
#selectCertLayer > .inner > .content > .motp_link > a { font-size: 14px; color: #888; }
/* OTP 인증 */
#otpLayer input[name=number] { width: 200px; margin: 0 0 0 20px; font-size: 20px; letter-spacing: 15px; text-align: center; }
#otpLayer .content .box { margin: 20px 0 5px 0; padding: 15px 20px; line-height: 26px; background-color: #F5F6FA; text-align: center; }
/* 학습중 블라인드 */
#lectureStudyingBlind { display: none; }
#lectureStudyingBlind > .blind { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000;opacity: 0.7; z-index: 20; }
#lectureStudyingBlind > .content { position: fixed; top: 50%; left: 50%; width: 600px; height: 130px; transform: translateX(-50%) translateY(-50%); line-height: 70px; text-align: center; user-select: none; z-index: 21; }
#lectureStudyingBlind > .content > .dot.ani_1 { position: absolute; top: -100px; left: 159px; }
#lectureStudyingBlind > .content > .dot.ani_2 { position: absolute; top: -100px; left: 213px; }
#lectureStudyingBlind > .content > .dot.ani_3 { position: absolute; top: -100px; left: 267px; }
#lectureStudyingBlind > .content > .dot > .lecture_loading { position: relative; width: 50px; height: 50px; margin: 3em; border-radius: 50%; background-color: #fff; vertical-align: middle; display: inline-block; }
#lectureStudyingBlind > .content > .dot > .lecture_loading,
#lectureStudyingBlind > .content > .dot > .lecture_loading:before,
#lectureStudyingBlind > .content > .dot > .lecture_loading:after { animation:1s infinite ease-in-out; }
#lectureStudyingBlind > .content > .dot > .lecture_loading:before,
#lectureStudyingBlind > .content > .dot > .lecture_loading:after { position:absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; }
#lectureStudyingBlind > .content > .dot > .lecture_loader { animation-name:lecture_loader; }
#lectureStudyingBlind > .content > h2 { font-size: 60px; color: #fff; font-weight: bold; letter-spacing: 2px; }
#lectureStudyingBlind > .content > h3 { font-size: 20px; color: #fff; letter-spacing: 0.8px; }
@keyframes lecture_loader {
    from { transform: scale(0); opacity: 1; }
    to   { transform: scale(1); opacity: 0; }
}
/* 시험창 - 응시 전 유의사항 */
#examFormLayer > .inner { width: 1000px; height: 720px; }
#examFormLayer > .inner > .content { border: none; height: calc(100% - 170px); }
#examFormLayer > .inner > .content.attention > h3 { font-size: 30px; color: #333; font-weight: 700; text-align: center; }
#examFormLayer > .inner > .content.attention > ul { padding: 30px 20px; margin: 50px 0 0 0; background: #F5F6FA; }
#examFormLayer > .inner > .content.attention > ul > li { padding: 0 0 25px 0; overflow: hidden; }
#examFormLayer > .inner > .content.attention > ul > li:last-child { padding: 0; }
#examFormLayer > .inner > .content.attention > ul > li > p { position: relative; padding: 0 0 0 10px; font-size: 18px; letter-spacing: -0.5px; float: left; }
#examFormLayer > .inner > .content.attention > ul > li > p > span.highlight { position: relative; }
#examFormLayer > .inner > .content.attention > ul > li > p > span.highlight:after { width: 0; height: 10px; background: #FFEEDB; display: inline-block; content: ''; }
#examFormLayer > .inner > .content.attention > ul > li > p:before { position: absolute; top: 8px; left: 0; width: 3px; height: 3px; background: #888; content: ''; }
#examFormLayer > .inner > .content.attention > ul > li > .check { float: right; }
#examFormLayer > .inner > .content.attention > ul > li > .check input[type="checkbox"] + label { font-size: 18px; }
#examFormLayer > .inner > .content.attention > ul > li > .check input[type="checkbox"] + label::before { top: 4px; }
#examFormLayer > .inner > .bottom { height: 80px; background-color: #fff; text-align: center; }
/* 시험창 - 시험존재 */
#examFormLayer > .inner > .content.continue > .box { padding: 50px 0; background: #F5F6FA; text-align: center; }
#examFormLayer > .inner > .content.continue > .box > h3 { padding: 40px 0 0 0; font-size: 30px; color: #333; font-weight: 700; }
#examFormLayer > .inner > .content.continue > .box > p { padding: 20px 0 0 0; font-size: 16px; color: #333; }
#examFormLayer > .inner > .content.continue > button { margin: 40px 0 0 50%; transform: translateX(-50%); }
/* 시험창 - 응시하기 */
#examFormLayer > .inner > .content.paper { padding: 20px 20px 0 20px; }
#examFormLayer > .inner > .content.paper > .notice { padding: 20px 30px; background: #F5F6FA; justify-content: left; align-items: center; display: flex; }
#examFormLayer > .inner > .content.paper > ul { height: 100%; overflow: hidden; }
#examFormLayer > .inner > .content.paper > ul > li { position: relative; width:  210px; height: 100%; float: left; }
#examFormLayer > .inner > .content.paper > ul > li:first-child { width: 730px; margin: 0 20px 0 0; }
#examFormLayer > .inner > .content.paper > ul > li > .notice { padding: 15px 30px; background: #F5F6FA; justify-content: left; align-items: center; display: flex; }
#examFormLayer > .inner > .content.paper > ul > li > .notice > img { padding: 0 20px 0 0; }
#examFormLayer > .inner > .content.paper > ul > li > .notice > .text > p { font-size: 16px; color: #333; letter-spacing: -1px; }
#examFormLayer > .inner > .content.paper > ul > li > .test { position: relative; padding: 25px 0 0 0; counter-reset: number 0; }
#examFormLayer > .inner > .content.paper > ul > li > .test > .top { height: 40px; border-bottom: 1px solid #ddd; overflow: hidden; }
#examFormLayer > .inner > .content.paper > ul > li > .test > .top > p { font-size: 18px; color: #333; font-weight: 500; float: left; }
#examFormLayer > .inner > .content.paper > ul > li > .test > .top > p + p { padding: 0 0 0 30px; }
#examFormLayer > .inner > .content.paper > ul > li > .test > .top > p > img { padding: 0 5px 0 0; }
#examFormLayer > .inner > .content.paper > ul > li > .test > .top > span { padding: 5px 8px; font-size: 18px; color: #888; float: right; }
#examFormLayer > .inner > .content.paper > ul > li > .test > .question { height: calc(100% - 250px); padding: 20px; counter-reset: circle 0; overflow-y: auto; }
#examFormLayer > .inner > .content.paper > ul > li > .test > .question > h3 { line-height: 30px; font-size: 16px; color: #333; }
#examFormLayer > .inner > .content.paper > ul > li > .test > .question > .point { position: absolute; top: 30px; right: 0; }
#examFormLayer > .inner > .content.paper > ul > li > .test > .question > ul { padding: 25px 0 0 0; }
#examFormLayer > .inner > .content.paper > ul > li > .test > .question > ul.truth { overflow: hidden; }
#examFormLayer > .inner > .content.paper > ul > li > .test > .question > ul.truth > li { margin: 0 30px 0 0; float: left;}
#examFormLayer > .inner > .content.paper > ul > li > .test > .question > ul.multiple > li > input[type=radio] { opacity: 0; }
#examFormLayer > .inner > .content.paper > ul > li > .test > .question > ul.multiple > li > label { position: relative; padding: 0 0 15px 25px; font-size: 16px; }
#examFormLayer > .inner > .content.paper > ul > li > .test > .question > ul.multiple > li > label::before { margin: 2px 0 0; counter-increment: circle 1; content: counter(circle); font-size: 13px; border: none; }
#examFormLayer > .inner > .content.paper > ul > li > .test > .question > ul.multiple > li > label::after { position: absolute; top: 3px; left: 0; width: 16px; height: 16px; border: 1px solid #888; border-radius: 50%; background: none; content: ''; }
#examFormLayer > .inner > .content.paper > ul > li > .test > .question > ul.multiple > li > input[type=radio]:checked + label { color: #3268DD; font-weight: 600; }
#examFormLayer > .inner > .content.paper > ul > li > .test > .question > ul.multiple > li > input[type=radio]:checked + label::after { border-color: #3268DD; }
#examFormLayer > .inner > .content.paper > ul > li > .test > .question > ul.short > li > input { width: 100%; }
#examFormLayer > .inner > .content.paper > ul > li > .test > .question > ul.explain > li > textarea { width: 100%; min-height: 120px; font-size: 16px; }
#examFormLayer > .inner > .content.paper > ul > li > .button_box { position: absolute; right: 0; bottom: 20px; }
#examFormLayer > .inner > .content.paper > ul > li > .button_box > button { width: 70px; min-width: 70px; margin: 0 0 0 5px; }
#examFormLayer > .inner > .content.paper > ul > li > .time { padding: 10px 15px; background: #F5F6FA; }
#examFormLayer > .inner > .content.paper > ul > li > .time > .top { text-align: center; }
#examFormLayer > .inner > .content.paper > ul > li > .time > .top > p { padding: 5px 0 0 0; font-size: 25px; color: #333; font-weight: 600;}
#examFormLayer > .inner > .content.paper > ul > li > .time > p { padding: 15px 0 0 0; color: #888; font-size: 12px; letter-spacing: -0.5px; text-align: center; }
#examFormLayer > .inner > .content.paper > ul > li > .time > ol { padding: 10px 0 0 0; overflow: hidden; }
#examFormLayer > .inner > .content.paper > ul > li > .time > ol > li { width: 84px; line-height: 30px; margin: 0 10px 10px 0; border-radius: 5px; background: #fff; cursor: pointer; float: left; }
#examFormLayer > .inner > .content.paper > ul > li > .time > ol > li:nth-child(2n) { margin: 0; }
#examFormLayer > .inner > .content.paper > ul > li > .time > ol > li.on > p { width: 42px; border-radius: 5px 0 0 5px; background: #3268DD; color: #fff; text-align: center; display: inline-block; float: left; }
#examFormLayer > .inner > .content.paper > ul > li > .time > ol > li.on > p + p { background: transparent; color: #333; }
#examFormLayer > .inner > .content.paper > ul > li > .time > ol > li > p { width: 42px; border-radius: 5px 0 0 5px; border-right: 1px solid #ddd; box-sizing: border-box; background: #fff; font-size: 13px; font-weight: 500; color: #888; text-align: center; display: inline-block; float: left; }
#examFormLayer > .inner > .content.paper > ul > li > .time > ol > li > p + p { border: 0; background: transparent; color: #333; font-weight: 600; font-size: 14px; float: left; }
#btnExamPost { display: none; }
/* 시험 결과 */
#questionResultLayer > .inner > .content > table tr td { height: 45px; font-size: 16px; }
#questionResultLayer > .inner > .content > .total_point { padding: 15px 20px; border-bottom: 1px solid #ddd; text-align: right; }
#questionResultLayer > .inner > .content > .total_point span { font-size: 16px; color: #888; }
#questionResultLayer > .inner > .content > .total_point strong { padding: 0 0 0 10px; font-size: 25px; font-weight: 700; color: #3268DD; }
#questionResultLayer > .inner > .content > ul > li  { border-top: 1px solid #ddd; }
#questionResultLayer > .inner > .content > ul > li.answer_wrong { background: url(/images/myclass/img_exam_wrong_mark.png) no-repeat left 0px top 18px; }
#questionResultLayer > .inner > .content > ul > li.answer_right { background: url(/images/myclass/img_exam_right_mark.png) no-repeat left 0px top 15px; }
#questionResultLayer > .inner > .content > ul > li.answer_right > .comment > h2 { color: #5582eb; }
#questionResultLayer > .inner > .content > ul > li.answer_right > .point > strong { font-weight: 500; color: #5582eb; }
#questionResultLayer > .inner > .content > ul > li > dl { position: relative; padding: 25px 20px 15px 20px; counter-reset: circle 0; }
#questionResultLayer > .inner > .content > ul > li > dl > dt { margin: 0 0 15px 0; font-weight:500; color:#333; }
#questionResultLayer > .inner > .content > ul > li > dl > dd { position: relative; padding: 0 0 10px 0; font-size: 16px; color: #888; }
#questionResultLayer > .inner > .content > ul > li > dl > dd.multiple::before { margin: 2px 10px 0 5px; counter-increment: circle 1; content: counter(circle); font-size: 13px; border: none; }
#questionResultLayer > .inner > .content > ul > li > dl > dd.multiple::after { position: absolute; top: 3px; left: 0; width: 16px; height: 16px; border: 1px solid #888; border-radius: 50%; background: none; content: ''; }
#questionResultLayer > .inner > .content > ul > li > dl > dd.multiple.correct { font-weight: 500; color: #5582eb; }
#questionResultLayer > .inner > .content > ul > li > dl > dd.multiple.correct::after { border-color: #5582eb; }
#questionResultLayer > .inner > .content > ul > li.answer_wrong > dl > dd.answer { font-weight: 500; color: #DE3176; }
#questionResultLayer > .inner > .content > ul > li.answer_wrong > dl > dd.answer::after { border-color: #DE3176; }
#questionResultLayer > .inner > .content > ul > li > .comment { position: relative; padding: 20px; border-top:1px solid #ddd; background:#f9f9f9; }
#questionResultLayer > .inner > .content > ul > li > .comment > .point { position: absolute; top: 0; right: 0; padding: 5px 10px; background: #f9f9f9; border: 1px solid #ddd; border-top: 0; font-size: 13px; }
#questionResultLayer > .inner > .content > ul > li > .comment > .point > span{ display:inline-block; }
#questionResultLayer > .inner > .content > ul > li > .comment > .point > strong{ position:relative; margin:0 0 0 7px; padding:0 0 0 11px; display:inline-block; }
#questionResultLayer > .inner > .content > ul > li > .comment > .point > strong:after{ content: ''; position:absolute; top:50%; left:0; margin: -5px 0 0; width:1px; height:10px; background:#ddd; display:block; }
/* 시험창 - 재응시 유의사항 */
#retryExamLayer > .inner { width: 1000px; height: 720px; }
#retryExamLayer > .inner > .content { border: none; height: calc(100% - 170px); }
#retryExamLayer > .inner > .content > h3 { font-size: 30px; color: #333; font-weight: 700; text-align: center; }
#retryExamLayer > .inner > .content > ul { padding: 20px; margin: 50px 0 0 0; background: #F5F6FA; }
#retryExamLayer > .inner > .content > ul > li { padding: 0 0 25px 0; overflow: hidden; }
#retryExamLayer > .inner > .content > ul > li:last-child { padding: 0; }
#retryExamLayer > .inner > .content > ul > li > p { position: relative; padding: 0 0 0 10px; font-size: 18px; letter-spacing: -0.5px; float: left; }
#retryExamLayer > .inner > .content > ul > li > p > span.highlight { position: relative; }
#retryExamLayer > .inner > .content > ul > li > p > span.highlight:after { width: 0; height: 10px; background: #FFEEDB; display: inline-block; content: ''; }
#retryExamLayer > .inner > .content > ul > li > p:before { position: absolute; top: 8px; left: 0; width: 3px; height: 3px; background: #888; content: ''; }
#retryExamLayer > .inner > .content > .button { margin: 30px 0 0; text-align: center; }
/* 설문참여 */
#surveyFormLayer > .inner > .content > ul > li { padding: 20px; border-bottom:1px solid #ddd; }
#surveyFormLayer > .inner > .content > ul > li:last-child { border-bottom: none; }
#surveyFormLayer > .inner > .content > ul > li > dl > dt { margin: 0 0 10px 0; font-weight:500; }
#surveyFormLayer > .inner > .content > ul > li > dl > dd { margin: 8px 0 0 10px; }
#surveyFormLayer > .inner > .content > ul > li > dl > dd > textarea { width: 100%; height: 100px; }
#surveyFormLayer > .inner > .content > .button { margin: 20px 0; text-align: center; }
/* 설문보기 */
#surveyViewLayer > .inner > .content > ul > li { padding: 20px; border-bottom:1px solid #ddd; }
#surveyViewLayer > .inner > .content > ul > li:last-child { border-bottom: none; }
#surveyViewLayer > .inner > .content > ul > li > dl > dt { margin: 0 0 10px 0; font-weight:500; }
#surveyViewLayer > .inner > .content > ul > li > dl > dd { margin: 8px 0 0 10px; }
#surveyViewLayer > .inner > .content > ul > li > dl > dd > textarea { width: 100%; height: 100px; }
/* 나의 강의실 - 증명서 발급 */
#container > .wrapper > .my_certificate > .search { margin: 30px 0 10px 0;  line-height: 38px; justify-content: right; align-items: center; display: flex; }
#container > .wrapper > .my_certificate > .search > p { padding: 0 10px 0 0; font-size: 16px; color: #333; font-weight: 500; }
#container > .wrapper > .my_certificate > .search > p > img { margin: -3px 0 0 0; }
/* 커뮤니티 - 보육정보나누기 */
#container > .wrapper > .community_info > .search { padding: 20px 30px; margin: 50px 0 10px 0; background: #F5F6FA; justify-content: right; align-items: center; display: flex; }
#container > .wrapper > .community_info > .search > .select_wrap { width: 100px; margin: 0 5px 0 0; box-sizing: border-box; background: #fff; }
#container > .wrapper > .community_info > .search > .select_wrap > select { width: 100px; }
#container > .wrapper > .community_info > .search > input[type="text"] { width: 200px; margin: 0 10px 0 0;  }
#container > .wrapper > .community_info > .search > button { width: 80px; border-radius: 30px; }
/* 커뮤니티 - 이벤트 상세 */
#container > .wrapper > .community_event_view > ul { margin: 43px 0 0 0; border-top: 1px solid #333; }
#container > .wrapper > .community_event_view > ul > li:first-child { padding: 20px 0; border-bottom: 1px solid #ddd; font-size: 20px; color: #333; font-weight: 600; }
#container > .wrapper > .community_event_view > ul > li:nth-child(2) { padding: 30px 10px; border-bottom: 1px solid #ddd; text-align: center; }
#container > .wrapper > .community_event_view > ul > li:nth-child(3) { margin: 30px 0 0; text-align: center; }
/* 커뮤니티 - 수강후기 */
#container > .wrapper > .community_review > .review_banner { height: 410px; margin: 30px 0 50px 0; }
#container > .wrapper > .community_review > .review_banner > img { width: 100%; height: 100%; object-fit: cover; }
#container > .wrapper > .community_review > .search { padding: 20px 30px; margin: 50px 0 10px 0; background: #F5F6FA; justify-content: right; align-items: center; display: flex; }
#container > .wrapper > .community_review > .search > .select_wrap { width: 100px; margin: 0 5px 0 0; box-sizing: border-box; background: #fff; }
#container > .wrapper > .community_review > .search > .select_wrap > select { width: 100px; }
#container > .wrapper > .community_review > .search > input[type="text"] { width: 200px; margin: 0 10px 0 0;  }
#container > .wrapper > .community_review > .search > button { width: 80px; border-radius: 30px; }
#container > .wrapper > .community_review > ul { margin: 60px auto 0 auto; }
#container > .wrapper > .community_review > ul > li { border-bottom: 1px solid #ddd; }
#container > .wrapper > .community_review > ul > li > dl { position: relative; padding: 20px 0; align-items: flex-start; cursor: pointer; transition: background-color 0.2s ease; display: flex; }
#container > .wrapper > .community_review > ul > li > dl > dt { margin: 0 25px 0 0; color: #3268DD; font-size: 16px; white-space: nowrap; flex-shrink: 0; }
#container > .wrapper > .community_review > ul > li > dl > dd.content { min-width: 0; flex: 1; }
#container > .wrapper > .community_review > ul > li > dl > dd.content > .title { margin: 0 0 5px 0; color: #333; font-size: 16px; font-weight: 600; }
#container > .wrapper > .community_review > ul > li > dl > dd.content > .review { color: #888; font-size: 16px; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; transition: all 0.3s ease; overflow: hidden; display: -webkit-box; }
#container > .wrapper > .community_review > ul > li > dl > dd.content > .review.hidden { display: none; }
#container > .wrapper > .community_review > ul > li > dl > dd.arrow { width: 10px; height: 20px; margin: 15px 0 0 10px; transition: transform 0.3s ease; flex-shrink: 0; align-items: center; justify-content: center; display: flex; }
#container > .wrapper > .community_review > ul > li > dl > dd.arrow::before { font-size: 14px; color: #888; font-weight: 700; transition: color 0.3s ease; content: 'Ｖ'; display: block; }
#container > .wrapper > .community_review > ul > li.active > dl > dd.content > .review { -webkit-line-clamp: unset; display: block; }
#container > .wrapper > .community_review > ul > li.active > dl > dd.content > .review > * { max-width: 700px; }
#container > .wrapper > .community_review > ul > li.active > dl > dd.arrow { transform: rotate(180deg); }
#container > .wrapper > .community_review > ul > li.active > dl > dd.arrow::before { color: #3268DD !important; }
#container > .wrapper > .community_review > ul > li > dl.faq { padding: 20px 0 15px 0; }
#container > .wrapper > .community_review > ul > li > dl.faq > dd.arrow { margin-top: 0; }
#container > .wrapper > .community_review > ul > li.active > dl.faq > dd.content > .review { padding: 10px 0 0; }
/* 커뮤니터 - 이벤트 */
#container > .wrapper > .community_event > ul { margin: 60px 0 0; }
#container > .wrapper > .community_event > ul > li { width: 31.3%; padding: 0 28px 30px 0; cursor: pointer; float: left; }
#container > .wrapper > .community_event > ul > li:nth-child(3n) { padding: 0; }
#container > .wrapper > .community_event > ul > li > .event_wrap { width: 300px; height: 340px; border: 1px solid #ddd; border-radius: 10px; }
#container > .wrapper > .community_event > ul > li > .event_wrap > .thumb_nail { width: 300px; height: 200px; border-bottom: 1px solid #ddd; box-sizing: border-box; }
#container > .wrapper > .community_event > ul > li > .event_wrap > .thumb_nail > img { width: 100%; height: 100%; border-radius: 10px 10px 0 0; box-sizing: border-box; object-fit: cover; }
#container > .wrapper > .community_event > ul > li > .event_wrap > .text { padding: 20px; }
#container > .wrapper > .community_event > ul > li > .event_wrap > .text > h3 { height: 45px; padding: 0 0 15px 0; font-size: 18px; color: #333; font-weight: 600; }
#container > .wrapper > .community_event > ul > li > .event_wrap > .text > p { font-size: 16px; color: #888; letter-spacing: -0.5px; }
#container > .wrapper > .community_event > ul > li > .event_wrap > .text > p > span { padding: 0 10px 0 0; color: #333; font-weight: 500; }
/* 학습지원센터 - 원격지원서비스 */
#container > .wrapper > .support_remotely > .service_info { padding: 30px 0; margin: 30px 0; background: #F5F6FA; justify-content: center; align-items: center; display: flex; }
#container > .wrapper > .support_remotely > .service_info > img { margin: 0 30px 0 0; }
#container > .wrapper > .support_remotely > .service_info > .text { text-align: left; }
#container > .wrapper > .support_remotely > .service_info > .text > h3 { font-size: 25px; color: #333; font-weight: 600; }
#container > .wrapper > .support_remotely > .service_info > .text > p { padding: 25px 0 0 0; font-size: 16px; color: #888; }
#container > .wrapper > .support_remotely > .remotely_step { margin: 0 0 50px 0; overflow: hidden; }
#container > .wrapper > .support_remotely > .remotely_step > ul { width: 880px; margin: 0 0 0 50%; transform: translateX(-50%); }
#container > .wrapper > .support_remotely > .remotely_step > ul > li { position: relative; width: 220px; height: 150px; margin: 0 35px; padding: 20px 0; border: 1px solid #ddd; border-radius: 20px; text-align: center; float: left; }
#container > .wrapper > .support_remotely > .remotely_step > ul > li > p.step { padding: 0; font-size: 18px; color: #333; font-weight: 600; }
#container > .wrapper > .support_remotely > .remotely_step > ul > li > p { padding: 15px 0; font-size: 16px; color: #888; }
#container > .wrapper > .support_remotely > .remotely_step > ul > li:after { position: absolute; top: 50%; right: -53px; width: 30px; border: 1px dashed #ddd; content: ''; }
#container > .wrapper > .support_remotely > .remotely_step > ul > li:last-child:after { display: none; }
#container > .wrapper > .support_remotely > .support_number { text-align: center; }
#container > .wrapper > .support_remotely > .support_number > .text_box > h4 { line-height: 60px; font-size: 50px; color: #333; font-weight: 600; }
#container > .wrapper > .support_remotely > .support_number > .text_box > h4 > img { margin: -10px 0 0 0; }
#container > .wrapper > .support_remotely > .support_number > .text_box > p { padding: 20px 0 0 0; font-size: 16px; color: #333; font-weight: 600; }
#container > .wrapper > .support_remotely > .support_number > .text_box > p + p { font-weight: normal; color: #888; }
#container > .wrapper > .support_remotely > .support_number > .text_box > p + p > span { font-weight: 500; color: #333; }
#container > .wrapper > .support_remotely > .support_number > .text_change { margin: 30px 0 50px 0; padding: 20px 30px; border-radius: 10px; background: #F5F6FA; font-size: 18px; color: #333; font-weight: 600; display: inline-block; }
#container > .wrapper > .support_remotely > button { text-align: center; }
#container > .wrapper > .support_remotely { text-align: center; }
/* 수강혜택 */
#container > .wrapper > .contents > .benefit > li { margin: 30px 22px 0 0; cursor: pointer; float: left; }
#container > .wrapper > .contents > .benefit > li:nth-child(3n+0) { margin-right: 0; }
#container > .wrapper > .contents > .benefit > li > dl { width: 300px; border: 1px solid #ccc; border-radius: 10px; }
#container > .wrapper > .contents > .benefit > li > dl > dt { width: 300px; height: 200px; border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: hidden; }
#container > .wrapper > .contents > .benefit > li > dl > dd { padding: 10px 15px; }
#container > .wrapper > .contents > .benefit > li > dl > dd > strong { height: 50px; font-size: 17px; display: block; }
#container > .wrapper > .contents > .benefit > li > dl > dd > p { height: 35px; font-size: 14px; color: #888; letter-spacing: 0.5px; }
#container > .wrapper > .contents > .benefit > li > dl > dd > span { width: 40px; font-weight: 600; display: inline-block; }
#container > .wrapper > .contents > .benefit > li > dl > dd+dd { height: 56px; padding-top: 0; line-height: 28px; }
/* 교육안내 - 특별직무교육과정 - 과정안내 */
#container > .wrapper > .info_wrap  > .banner_wrap { margin: 30px 0 0 0; }
#container > .wrapper > .info_wrap  > .banner_wrap > p { font-size: 16px; color: #888; text-align: center; }
#container > .wrapper > .info_wrap  > .banner_wrap > .banner_img { margin: 0 0 20px 0; padding: 0 0 0 50px; height: 235px; background: url("/images/eduinfo/img_bg_eduinfo.png") no-repeat; background-size: 100%; }
#container > .wrapper > .info_wrap  > .banner_wrap > .banner_img > p { padding: 80px 0 0 0; font-size: 30px; color: #333; font-weight: 600; }
#container > .wrapper > .info_wrap  > .banner_wrap > .banner_img > h2 { font-size: 35px; color: #333; font-weight: 600; }
#container > .wrapper > .info_wrap  > .banner_wrap > .banner_img > h2.highlight { padding: 0; box-shadow: inset 0 -10px 0 #C5D8FF; background: none; display: inline; }
#container > .wrapper > .info_wrap > .info_step { text-align: center; }
#container > .wrapper > .info_wrap > .info_step > ul { padding: 20px 0; text-align: center; justify-content: center; display: flex; }
#container > .wrapper > .info_wrap > .info_step > ul > li { width: 250px; padding: 20px 0; }
#container > .wrapper > .info_wrap > .info_step > ul > li > .icon_box { width: 40px; height: 40px; padding: 15px; margin: 0 auto; border-radius: 50%; background: #F5F6FA; }
#container > .wrapper > .info_wrap > .info_step > ul > li > p.title { padding: 10px 0; font-size: 18px; color: #333; font-weight: 600; }
#container > .wrapper > .info_wrap > .info_step > ul > li > p.sub { font-size: 16px; color: #888; }
#container > .wrapper > .info_wrap > .info_step > button { border-radius: 100px; }
#container > .wrapper > .info_wrap > .info_step > button > img { margin: -6px 0 0 10px; }
#container > .wrapper > .info_wrap > .target_time { padding: 50px 0; }
#container > .wrapper > .info_wrap > .target_time > h3 { padding: 0 0 20px 0; font-size: 20px; color: #333; font-weight: 600; }
/* 교육안내 - 특별직무교육과정 - 교육신청절차 */
#container > .wrapper > .step_wrap > ul { margin: 30px 0; }
#container > .wrapper > .step_wrap > ul > li { position: relative; padding: 40px 20px; border-bottom: 1px solid #ddd; align-items: center; display: flex; }
#container > .wrapper > .step_wrap > ul > li:after { position: absolute; left: 50%; bottom: -30px; width: 50px; height: 50px; background: url("/images/eduinfo/icon_eduinfo_step.png") no-repeat; content: ''; transform: translateX(-50%); }
#container > .wrapper > .step_wrap > ul > li > img { padding: 0 30px 0 0; }
#container > .wrapper > .step_wrap > ul > li > .text_box { width: 100%; }
#container > .wrapper > .step_wrap > ul > li > .text_box > h1 { padding: 0 0 10px 0; font-size: 18px; color: #333; font-weight: 600; }
#container > .wrapper > .step_wrap > ul > li > .text_box > h1 > span { padding: 0 5px 0 0; color: #3268DD; }
#container > .wrapper > .step_wrap > ul > li > .text_box > p { font-size: 16px; color: #888; }
#container > .wrapper > .step_wrap > ul > li > .text_box > p > span { padding: 0 0 0 10px; }
#container > .wrapper > .step_wrap > ul > li > .text_box > p > span > img { padding: 0 5px 0 0; }
#container > .wrapper > .step_wrap > ul > li > .text_box > .sub_box { width: 90%; padding: 10px 20px; margin: 10px 0 0 0; border-radius: 5px; display: flex; }
#container > .wrapper > .step_wrap > ul > li > .text_box > .sub_box > button { margin: 0 0 0 auto; }
#container > .wrapper > .step_wrap > ul > li > .text_box > .sub_box > p { font-size: 16px; color: #333; font-weight: 500; }
#container > .wrapper > .step_wrap > ul > li > .text_box > .sub_box.essential > p { position: relative; padding: 0 20px 0 10px; }
#container > .wrapper > .step_wrap > ul > li > .text_box > .sub_box.essential > p:before { position: absolute; top: 3px; left: 0; width: 3px; height: 16px; background: #3268DD; content: ''; }
#container > .wrapper > .step_wrap > ul > li > .text_box > .sub_box.essential > ol > li { font-size: 14px; color: #888; }
#container > .wrapper > .step_wrap > ul > li > .text_box > .sub_box.essential > button { border: 1px solid #3268DD; }
#container > .wrapper > .step_wrap > ul > li > .text_box > .sub_box.essential > button > img { margin: -3px 0 0 5px; }
#container > .wrapper > .step_wrap > ul > li > .text_box > .sub_box.apply > ol > li { position: relative; padding: 0 0 0 10px; font-size: 14px; color: #888; }
#container > .wrapper > .step_wrap > ul > li > .text_box > .sub_box.apply > ol > li:before { position: absolute; top: 7px; left: 0; width: 3px; height: 3px; border-radius: 50%; background: #888; content: ''; }
#container > .wrapper > .step_wrap > ul > li > .text_box > a { padding: 10px 0 0 0; font-size: 14px; color: #3268DD; font-weight: 500; text-decoration: underline; }
#container > .wrapper > .step_wrap > ul > li > .text_box > .sub_box.contract > p { padding: 0 20px 0 10px; }
#container > .wrapper > .step_wrap > ul > li > .text_box > .sub_box.contract { line-height: 38px; }
#container > .wrapper > .step_wrap > ul > li > .text_box > .sub_box.contract > ol > li { font-size: 14px; color: #888; }
#container > .wrapper > .step_wrap > ul > li > .text_box > .sub_box.contract > button { border: 1px solid #3268DD; }
#container > .wrapper > .step_wrap > ul > li > .text_box > .sub_box.contract > button > img { margin: -3px 0 0 5px; }
#container > .wrapper > .step_wrap > ul > li > .text_box > p.refer { padding: 10px 0 0 0; font-size: 14px; color: #888; }
#container > .wrapper > .step_wrap > ul > li:last-child:after { display: none; }
#container > .wrapper > .step_wrap > .notice_wrap { margin: 20px 0 0 0; padding: 20px 30px; align-items: center; display: flex; }
#container > .wrapper > .step_wrap > .notice_wrap > img { padding: 0 20px 0 0; }
#container > .wrapper > .step_wrap > .notice_wrap > .text_box > h2 { font-size: 18px; color: #333; font-weight: 600; }
#container > .wrapper > .step_wrap > .notice_wrap > .text_box > p { padding: 5px 0 0 0; font-size: 14px; color: #DE3176; }
#container > .wrapper > .step_wrap > .button_box { padding: 50px 0 0 0; text-align: center; }
/* 교육안내 - 특별직무교육과정 - 환급신청절차 */
#container > .wrapper > .refund_wrap > .refund_box { margin: 30px 0 0 0; }
#container > .wrapper > .refund_wrap > .refund_box > h3 { padding: 0 0 20px 0; font-size: 20px; color: #333; font-weight: 600; }
#container > .wrapper > .refund_wrap > .refund_box > dl { padding: 20px 0 25px 0; }
#container > .wrapper > .refund_wrap > .refund_box > dl > dt { font-size: 16px; color: #3268DD; font-weight: 500; }
#container > .wrapper > .refund_wrap > .refund_box > dl > dd { position: relative; padding: 5px 0 0 40px; font-size: 16px; color: #888; }
#container > .wrapper > .refund_wrap > .refund_box > dl > dd:before { position: absolute; top: 12px; left: 20px; width: 10px; height: 7px; background: url("/images/join/icon_join_info_check.png") no-repeat; content: ''; }
#container > .wrapper > .refund_wrap > .refund_box > dl > dd > a { padding: 0 0 0 10px; font-size: 14px; font-weight: 500; color: #3268DD; text-decoration: underline; }
#container > .wrapper > .refund_wrap > .refund_box > p { padding: 0 0 20px 0; font-size: 16px; color: #888; }
#container > .wrapper > .refund_wrap > .refund_box > p.p_check { position: relative; padding: 20px 0 20px 20px; font-size: 16px; color: #888; }
#container > .wrapper > .refund_wrap > .refund_box > p.p_check:before { position: absolute; top: 27px; left: 0; width: 10px; height: 7px; background: url("/images/join/icon_join_info_check.png") no-repeat; content: ''; }
#container > .wrapper > .refund_wrap > .refund_box > ul.step_wrap { overflow: hidden; }
#container > .wrapper > .refund_wrap > .refund_box > ul.step_wrap > li { position: relative; width: 20%; padding: 0 63px 45px 0; float: left; }
#container > .wrapper > .refund_wrap > .refund_box > ul.step_wrap > li:after { position: absolute; top: 90px; right: 30px; width: 15px; height: 25px; background: url("/images/eduinfo/icon_eduinfo_arrow.png") no-repeat; content: ''; }
#container > .wrapper > .refund_wrap > .refund_box > ul.step_wrap > li:nth-child(4n):after { top: 200px; right: 55%; transform: translateY(-50%); rotate: 90deg; }
#container > .wrapper > .refund_wrap > .refund_box > ul.step_wrap > li:nth-child(8):after { display: none; }
#container > .wrapper > .refund_wrap > .refund_box > ul.step_wrap > li:nth-child(n+5):nth-child(-n+7) { padding-bottom: 0; }
#container > .wrapper > .refund_wrap > .refund_box > ul.step_wrap > li:nth-child(n+5):nth-child(-n+7):after { rotate: 180deg; }
#container > .wrapper > .refund_wrap > .refund_box > ul.step_wrap > li:nth-child(4n) { padding: 0; }
#container > .wrapper > .refund_wrap > .refund_box > ul.step_wrap > li > .box_wrap { width: 180px; height: 190px; border: 1px solid #ddd; border-radius: 10px; box-sizing: border-box; text-align: center; }
#container > .wrapper > .refund_wrap > .refund_box > ul.step_wrap > li > .box_wrap > p.title { height: 40px; line-height: 40px; border-radius: 10px 10px 0 0; background: #6CACF3; color: #fff; font-size: 16px; font-weight: 600; }
#container > .wrapper > .refund_wrap > .refund_box > ul.step_wrap > li > .box_wrap > img { padding: 10px 0 0 0; }
#container > .wrapper > .refund_wrap > .refund_box > ul.step_wrap > li > .box_wrap > img { padding: 10px 0 0 0; }
#container > .wrapper > .refund_wrap > .refund_box > ul.step_wrap > li > .box_wrap > .text { padding: 6px 0 0 0; }
#container > .wrapper > .refund_wrap > .refund_box > ul.step_wrap > li > .box_wrap > .text > h4 { font-size: 16px; color: #333; font-weight: 500; }
#container > .wrapper > .refund_wrap > .refund_box > ul.step_wrap > li > .box_wrap > .text > p { padding: 5px 0 0 0; font-size: 14px; color: #888; }
#container > .wrapper > .refund_wrap > .refund_box > ul.step_wrap > li > .box_wrap.blue { border: 2px solid #3268DD; }
#container > .wrapper > .refund_wrap > .refund_box > ul.step_wrap > li > .box_wrap.blue > p.title { border-radius: 5px 5px 0 0; background: #3268DD; }
#container > .wrapper > .refund_wrap > .refund_box > p.notice { padding: 10px 0 20px 0; font-size: 14px; color: #DE3176; }
#container > .wrapper > .refund_wrap > .refund_box.apply_refund > dl { padding: 0 0 30px 0; }
#container > .wrapper > .refund_wrap > .refund_box.apply_refund > dl { padding: 0 0 30px 0; }
#container > .wrapper > .refund_wrap > .refund_box.apply_refund > dl > dt { position: relative; padding: 0 0 0 10px; color: #333; font-weight: 600; font-size: 16px; }
#container > .wrapper > .refund_wrap > .refund_box.apply_refund > dl >  dt:before { position: absolute; top: 2px; left: 0; width: 3px; height: 16px; background: #3268DD; content: ''; }
#container > .wrapper > .refund_wrap > .refund_box.apply_refund > dl >  dd { padding: 5px 0 0 30px; }
#container > .wrapper > .refund_wrap > .refund_box.apply_refund > dl >  dd:before { left: 10px; }
#container > .wrapper > .refund_wrap > .refund_box.apply_refund > dl >  dd.no_check { padding: 5px 0; }
#container > .wrapper > .refund_wrap > .refund_box.apply_refund > dl >  dd.no_check:before { display: none; }
#container > .wrapper > .refund_wrap > .refund_box.apply_refund > dl >  dd > p { padding: 5px 0; }
#container > .wrapper > .refund_wrap > .refund_box.apply_refund > dl >  dd > p > span { padding: 5px 0 0 20px; font-size: 14px; color: #DE3176; display: block; }
#container > .wrapper > .refund_wrap > .refund_box.apply_refund > dl >  dd > p > a { padding: 5px 0 0 20px; font-size: 14px; color: #3268DD; text-decoration: underline; }
#container > .wrapper > .refund_wrap > .refund_box.apply_refund > img { padding: 0 0 30px 0; }
#container > .wrapper > .refund_wrap > .button_box { padding: 30px 0 0 0; text-align: center; }
/* 교육안내 - 고용보험환급과정 - 안내 */
#container > .wrapper > .employed_wrap > .employed_box > .employed_explain { height: 267px; margin: 30px 0 0 0; padding: 50px; background: url("/images/eduinfo/img_refund2.png") no-repeat; }
#container > .wrapper > .employed_wrap > .employed_box > .employed_explain > h1 { font-size: 35px; color: #333; font-weight: 600; }
#container > .wrapper > .employed_wrap > .employed_box > .employed_explain > h1 > span { padding: 0; box-shadow: inset 0 -10px 0 #C5D8FF; background: none; display: inline; }
#container > .wrapper > .employed_wrap > .employed_box > .employed_explain > p { padding: 14px 0 0 0; font-size: 18px; color: #333; font-weight: 500; }
#container > .wrapper > .employed_wrap > .employed_box > .employed_explain > .support_box { width: 545px; padding: 20px; margin: 55px 0 0 0; border-radius: 10px; background: url("/images/eduinfo/img_refund3.png") no-repeat #3268DD; background-position: center right; }
#container > .wrapper > .employed_wrap > .employed_box > .employed_explain > .support_box > p { color: #fff; font-size: 18px; font-weight: 500; }
#container > .wrapper > .employed_wrap > .employed_box > .employed_explain > .support_box > p > span { color: #20FFC0; }
#container > .wrapper > .employed_wrap > .employed_box > h3 { padding: 35px 0 20px 0; font-size: 20px; color: #333; font-weight: 600; }
#container > .wrapper > .employed_wrap > .employed_box > p { font-size: 16px; color: #888; letter-spacing: -1px; }
#container > .wrapper > .employed_wrap > .employed_box > h4 { padding: 50px 0 20px 0; font-size: 20px; color: #333; font-weight: 600; }
#container > .wrapper > .employed_wrap > .employed_box > ul > li { padding: 0 0 35px 0; }
#container > .wrapper > .employed_wrap > .employed_box > ul > li > p.title { padding: 0; font-size: 16px; color: #333; font-weight: 500; }
#container > .wrapper > .employed_wrap > .employed_box > ul > li > p.title:before { display: none; }
#container > .wrapper > .employed_wrap > .employed_box > ul > li > p:before { position: absolute; top: 10px; left: 20px; width: 10px; height: 7px; background: url("/images/join/icon_join_info_check.png") no-repeat; content: ''; }
#container > .wrapper > .employed_wrap > .employed_box > ul > li > p { position: relative; padding: 3px 0 10px 40px; color: #888; }
#container > .wrapper > .employed_wrap > .employed_box > ul > li > ol > li { position: relative; padding: 5px 0 10px 50px; font-size: 16px; color: #888;}
#container > .wrapper > .employed_wrap > .employed_box > ul > li > ol > li:before { position: absolute; top: 15px; left: 40px; width: 6px; height: 1px; background: #888; content: ''; }
/* 교육안내 - 고용보험환급과정 - 절차 */
#container > .wrapper > .support_step > .step_box { margin: 30px 0 0 0; }
#container > .wrapper > .support_step > .step_box > h3 { padding: 0 0 20px 0; font-size: 20px; color: #333; font-weight: 600; }
#container > .wrapper > .support_step > .step_box > ul.step_wrap { overflow: hidden; }
#container > .wrapper > .support_step > .step_box > ul.step_wrap > li { position: relative; width: 20%; padding: 0 63px 45px 0; float: left; }
#container > .wrapper > .support_step > .step_box > ul.step_wrap > li:after { position: absolute; top: 90px; right: 30px; width: 15px; height: 25px; background: url("/images/eduinfo/icon_eduinfo_arrow.png") no-repeat; content: ''; }
#container > .wrapper > .support_step > .step_box > ul.step_wrap > li:nth-child(4n):after { top: 200px; right: 55%; transform: translateY(-50%); rotate: 90deg; }
#container > .wrapper > .support_step > .step_box > ul.step_wrap > li:nth-child(8):after { display: none; }
#container > .wrapper > .support_step > .step_box > ul.step_wrap > li:nth-child(n+5):nth-child(-n+7) { padding-bottom: 0; }
#container > .wrapper > .support_step > .step_box > ul.step_wrap > li:nth-child(n+5):nth-child(-n+7):after { rotate: 180deg; }
#container > .wrapper > .support_step > .step_box > ul.step_wrap > li:nth-child(4n) { padding: 0; }
#container > .wrapper > .support_step > .step_box > ul.step_wrap > li > .box_wrap { width: 180px; height: 190px; border: 1px solid #ddd; border-radius: 10px; box-sizing: border-box; text-align: center; }
#container > .wrapper > .support_step > .step_box > ul.step_wrap > li > .box_wrap > p.title { height: 40px; line-height: 40px; border-radius: 10px 10px 0 0; background: #6CACF3; color: #fff; font-size: 16px; font-weight: 600; }
#container > .wrapper > .support_step > .step_box > ul.step_wrap > li > .box_wrap > img { padding: 10px 0 0 0; }
#container > .wrapper > .support_step > .step_box > ul.step_wrap > li > .box_wrap > img { padding: 10px 0 0 0; }
#container > .wrapper > .support_step > .step_box > ul.step_wrap > li > .box_wrap > .text { padding: 6px 0 0 0; }
#container > .wrapper > .support_step > .step_box > ul.step_wrap > li > .box_wrap > .text > h4 { font-size: 16px; color: #333; font-weight: 500; }
#container > .wrapper > .support_step > .step_box > ul.step_wrap > li > .box_wrap > .text > p { padding: 5px 0 0 0; font-size: 14px; color: #888; }
#container > .wrapper > .support_step > .step_box > ul.step_wrap > li > .box_wrap.blue { border: 2px solid #3268DD; }
#container > .wrapper > .support_step > .step_box > ul.step_wrap > li > .box_wrap.blue > p.title { border-radius: 5px 5px 0 0; background: #3268DD; }
#container > .wrapper > .support_step > .step_box > .explain_wrap { margin: 60px 0 50px 0; padding: 20px; border: 1px solid #ddd; border-radius: 10px; }
#container > .wrapper > .support_step > .step_box > .explain_wrap > p.title { position: relative; padding: 0 0 20px 10px; font-size: 16px; color: #333; font-weight: 600; }
#container > .wrapper > .support_step > .step_box > .explain_wrap > p.title:before { position: absolute; top: 3px; left: 0; width: 3px; height: 15px; background: #3268DD; content: ''; }
#container > .wrapper > .support_step > .step_box > .explain_wrap > ul > li { position: relative; padding: 0 0 10px 30px; font-size: 16px; color: #888; }
#container > .wrapper > .support_step > .step_box > .explain_wrap > ul > li:before { position: absolute; top: 7px; left: 10px; width: 10px; height: 7px; background: url("/images/join/icon_join_info_check.png") no-repeat; content: ''; }
#container > .wrapper > .support_step > .step_box > img { padding: 30px 0 0 0; }
/* 교육안내 - 학습자유의사항 */
#container > .wrapper > .note_wrap > h3 { padding: 30px 0 20px 0; font-size: 20px; color: #333; font-weight: 600; }
#container > .wrapper > .note_wrap > ul > li { }
#container > .wrapper > .note_wrap > ul > li > p.p_check { position: relative; padding: 0 0 10px 20px; font-size: 16px; color: #888;}
#container > .wrapper > .note_wrap > ul > li > p.p_check:before { position: absolute; top: 7px; left: 0; width: 10px; height: 7px; background: url("/images/join/icon_join_info_check.png") no-repeat; content: ''; }
#container > .wrapper > .note_wrap > ul > li > ol { padding: 0 0 15px 20px; }
#container > .wrapper > .note_wrap > ul > li > ol > li { position: relative; padding: 0 0 5px 15px; font-size: 16px; color: #888; }
#container > .wrapper > .note_wrap > ul > li > ol > li:before { position: absolute; top: 10px; left: 0; width: 7px; height: 1px; background: #888; content: ''; }
#container > .wrapper > .note_wrap > ul > li > .notice { width: 650px; padding: 20px 30px; margin: 0 0 20px 0; border-radius: 10px; background: #F5F6FA; }
#container > .wrapper > .note_wrap > ul > li > .notice > p { padding: 3px 0; font-size: 14px; color: #3268DD; }
/* 교육안내 - 연간교육일정 - 특별직무교육 */
#container > .wrapper > .special_wrap > .special_box > h3 { padding: 30px 0 20px 0; font-size: 20px; color: #333; font-weight: 600; }
#container > .wrapper > .special_wrap > .special_box > table > tbody > tr.on td { position: relative; background: #F5F6FA; }
#container > .wrapper > .special_wrap > .special_box > table > tbody > tr.on td:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-top: 1px solid #3268DD; border-bottom: 1px solid #3268DD; content: ''; }
/* 아카데미 소개 */
#container > .wrapper > .about { padding: 40px 0; }
#container > .wrapper > .about > .academy_wrap { height: 500px; background: url("/images/about/img_academy_educare.png") no-repeat; background-size: 100%; background-position: center bottom; text-align: center; }
#container > .wrapper > .about > .academy_wrap > p { font-size: 22px; color: #888; }
#container > .wrapper > .about > .academy_wrap > h2 { padding: 0 0 10px 0; font-size: 30px; color: #3268DD; font-weight: 700; }
#container > .wrapper > .about > .academy_wrap > h1 { font-size: 42px; color: #333; font-weight: 700; }
#container > .wrapper > .about > ul.mission_vision { padding: 100px 0 0 0; background: url("/images/about/img_academy_mv.png") no-repeat; background-position: center 100px; justify-content: center; display: flex; }
#container > .wrapper > .about > ul.mission_vision > li { width: 300px; height: 265px; padding: 35px 0 0 0; margin: 0 40px;  border-radius: 50%; background: #3268DD; text-align: center; }
#container > .wrapper > .about > ul.mission_vision > li > p.title { padding: 20px 0; font-size: 28px; color: #fff; font-weight: 600; }
#container > .wrapper > .about > ul.mission_vision > li > p.sub { font-size: 16px; color: #fff; font-weight: 400; }
#container > .wrapper > .about > .academy_provide { padding: 100px 0 0 0; }
#container > .wrapper > .about > .academy_provide > h3 { text-align: center; font-size: 30px; color: #3268DD; font-weight: 600; }
#container > .wrapper > .about > .academy_provide > ul { margin: 20px 0 0 0; border-top: 2px solid #3268DD; }
#container > .wrapper > .about > .academy_provide > ul > li {  padding: 40px 20px; border-bottom: 1px solid #ddd; align-items: center; display: flex; }
#container > .wrapper > .about > .academy_provide > ul > li > .icon_title { width: 310px; margin: 0 20px 0 0; align-items: center; display: flex; }
#container > .wrapper > .about > .academy_provide > ul > li > .icon_title > img { padding: 0 20px 0 0; }
#container > .wrapper > .about > .academy_provide > ul > li > .icon_title > p { font-size: 22px; color: #3268DD; font-weight: 500; }
#container > .wrapper > .about > .academy_provide > ul > li > dl > dt { padding: 0 0 15px 0; font-size: 18px; color: #333; font-weight: 500; }
#container > .wrapper > .about > .academy_provide > ul > li > dl > dd { position: relative; padding: 0 0 5px 20px; font-size: 16px; color: #888; }
#container > .wrapper > .about > .academy_provide > ul > li > dl > dd:before { position: absolute; top: 7px; left: 0; width: 11px; height: 7px; background: url("/images/join/icon_join_info_check.png") no-repeat; content: ''; }
#container > .wrapper > .about > .academy_provide > ul > li > dl > dd.text_bg { padding: 10px 20px; border-radius: 5px; background: #F5F6FA; }
#container > .wrapper > .about > .academy_provide > ul > li > dl > dd.text_bg:before { display: none; }