@charset "utf-8";

@media all and (min-width:768px){
.header .gnb_clear .menu >li ul { display: none !important;}
}

/* 공통 구조
**********************************************/
/* 화면 감춤 */
#wrap .only_pc { display:block;}
#my_wrap .only_mobile,
#wrap .only_mobile { display:none;}

body.noscroll { overflow: hidden;}
body.fixpadding { padding-top: 54px;}
.area { position: relative; width: 1100px; margin: 0 auto;}
.area1220 { position: relative; width: 1220px; min-width:1220px; margin: 0 auto;}
.area_new { position: relative; width: 1100px; margin: 0 auto;}
/* Global */
.header .gnb { border-bottom: 1px solid #d1d1d1; background-color:#fff; box-shadow:0 4px 7px rgba(0,0,0,0.05);}
.header .gnb.fix { position: fixed; left:0; top:0; z-index:10; width:100%;}
.header .gclear { padding:10px 0;}
.header .gclear::after { display:block; clear:both; visibility:hidden; height:0; content:'.';}
.header .gclear .logo_search { float: left;}
.header .gclear .logo_search h1 { display: inline-block;}
.header .gclear .logo_search h1 img { width:88px; height: auto;}
.header .gclear .logo_search .dise { display: inline-block; position: relative; margin-left: 47px;}
.header .gclear .logo_search .dise input { width:326px; height:40px; padding-left: 46px; background-color: #eee; border-radius:20px; outline: none;}
.header .gclear .logo_search .dise input::placeholder { font-size: 12px; color: rgba(0,0,0,0.38);}
.header .gclear .logo_search .dise input.hide { width:0; height:0; padding:0; border-radius:0;}
.header .gclear .logo_search .dise .btn { position: absolute; left: 17px; top:7px;}
.header .gclear .logo_search .dise .btn img { width:16px; height: auto;}
.header .gclear .gmenu { float: right; padding-top: 6px;}
.header .gclear .gmenu .my { display: inline-block; position: relative; margin-right: 9px;}
.header .gclear .gmenu .my >a { display:block; width:40px; height: 40px; padding:2px; border:1px solid #ddd; border-radius:50%;}
.header .gclear .gmenu .my >a img { width:100%; height:100%; border-radius:50%;}
.header .global_lecturer { display: inline-block; padding-right: 17px; color: rgba(0,0,0,0.78); border: none; background: url(../images/ico_global_arrow_down.png) no-repeat right center;border-radius: 0px;-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: none;}
.header .global_lecturer::-ms-expand { display: none;}
.header .global_lecturer option { background-color: #fff;}
.header .gclear .mb_name{color: rgba(0,0,0,0.78);}

.header .gclear .gmenu .alarm { display: inline-block; position: relative;margin-left: 35px;}
.header .gclear .gmenu .alarm >a { display: block; position: relative;}
.header .gclear .gmenu .alarm >a span { display: block; position: absolute; right: 0; top:-1px; width:16px; height:16px; padding:3px 1px 0 0; font-size:10px; font-weight:700; color: #fff; text-align: center; background-color: #4e008c; border-radius:50%;}
.header .gclear .gmenu .alarm .alert .left { font-size: 15px; font-weight: bold;}
.header .gclear .gmenu .alarm .alert ul li { padding: 15px 0; text-align: left; border-top: 1px solid #d5d4cf;}
.header .gclear .gmenu .alarm .alert ul li:first-child { border-top: none;}
.header .gclear .gmenu .alarm .alert ul li .t { font-size: 13px; color: rgba(0,0,0,0.78);}
.header .gclear .gmenu .alarm .alert ul li .date { margin-top: 2px; font-size:12px; color: rgba(0,0,0,0.58); text-align: right;}
.header .gclear .gmenu .alarm .alert .more { position:absolute; left:0; bottom:0; display: block; width:100%; height:40px; font-size:12px; font-weight:700; color:#4e008c; border-top:1px solid #d5d4cf; background-color: #f4f1f6; border-radius:0 0 14px 14px;}
.header .gclear .gmenu .alarm .alert .right { margin-top:-3px; text-align: 13px; color: rgba(0,0,0,0.78);}
.header .gclear .gmenu .alert.common { position: absolute; right: 0; top: 55px; z-index: 10; padding:18px 20px 20px; border:1px solid #575651; background-color: #fff; box-shadow:0px 10px 10px rgba(0, 0, 0, .3); border-radius:14px;}
.header .gclear .gmenu .alert.common h4 { margin-bottom:10px; font-size: 16px; color: #000;}
.header .global .gmenu .alert { width:240px;}
.header .global .gmenu .pay { padding-top: 2px;}
.header .global .gmenu .pay .alert { width:100px;}
.header .global .gmenu .pay .alert li a,
.header .global .gmenu .my .alert li a,
.header .global .gmenu .cs .alert li a { display: block; padding:19px 0; font-size:13px; color: rgba(0,0,0,0.78); text-align: left; border-bottom: 1px solid #d5d4cf;}
.header .global .gmenu .pay .alert li a:hover,
.header .global .gmenu .my .alert li a:hover,
.header .global .gmenu .cs .alert li a:hover { color: #222; background-color: #ececec;}
.header .gclear .gmenu .alarm .alert.common { padding-bottom: 40px;}

.header .before a { display: inline-block; font-size: 12px; font-weight:700; color: rgba(0,0,0,0.78);}
.header .before  img { margin:0 7px 0 40px;}

/* Nav */
.header .gnb_clear { clear:both; overflow: hidden;}
.header .gnb_clear .menu { float: left;}
.header .gnb_clear .menu >li { display: inline-block; position: relative;}
.header .gnb_clear .menu >li >a { display:block; position: relative; padding:17px 28px 0; font-weight:700; color: #000;}
.header .gnb_clear .menu >li:first-child >a { padding-left: 0;}
.header .gnb_clear .menu >li >a span { position: relative; height:36px;}
.header .gnb_clear .menu >li >a span img { width:29px; height:auto;}
.header .gnb_clear .menu >li >a.active { color: #4e008c;}
.header .gnb_clear .menu >li >a.active span::before { content:''; position: absolute; left: 0; bottom:0; width:100%; height:4px; background-color: #fcd700;}
.header .gnb_clear .menu >li >a img { margin-right:2px; vertical-align: bottom;}
.header .gnb_clear .menu >li >a .global_new { position: absolute; left: 50%; top:7px; margin-left: 31px;}
.header .gnb_clear .menu >li.etc { margin-left: 32px; padding-left: 32px;}
.header .gnb_clear .menu >li.etc::before { content:''; position: absolute; left: 0; top:50%; width:1px; height: 14px; margin-top:-7px; background-color: #d5d4cf;}
.header .gnb_clear .menu >li ul { display: none;}
.header .gnb_clear .mylec { float: right; padding-top: 8px;}
.header .gnb_clear .mylec a { display:inline-block; padding:7px 18px 10px; border:2px solid #d6d5ce; border-radius:6px;}
.header .gnb_clear .mylec img { margin-right: 3px;}
.header .gnb_clear .mylec a em { font-weight:700; color: rgba(78,0,140,0.78); vertical-align: middle;}
.header .gnb_clear .mylec .add_child{margin-right: 8px;padding: 7px 18px 8px;}
.header .gnb_clear .mylec .add_child img{position: relative;top: -2px;}
.header .gnb_clear .mylec .add_child em{color: rgba(0, 0, 0, 0.78);}

/* Footer */
.footer { margin-top: 80px; padding:40px 0 60px; background-color: #ffd500;}
.footer .links a { margin-right:40px; font-weight:700; color: #4e008c;}
.footer .links a:hover { text-decoration: underline;}
.footer .infomation { margin-top: 50px;}
.footer .infomation .ceo { margin-top:20px; font-size: 16px; color: #4e008c;}
.footer .infomation .s { margin-top: 10px; font-size: 16px; color: #4e008c; letter-spacing: 0;}
.footer .infomation .copyright { margin-top: 17px; font-size: 16px; font-weight: 300; color: #4e008c;}
.footer .apps {display:none; position: absolute; right:0; top:45px;}
.footer .apps a { margin-left: 16px;}
.footer .sns { position: absolute; right:0; top:155px;}
.footer .sns a { display: inline-flex; width:48px; height: 48px; margin-left:6px; background-color:#4e008c; border-radius:50%; justify-content:center; align-items:center; transition: all .3s ease;}
.footer .sns a:hover { background-color: #2a004c;}

/* LNB */
.lnb,
.my_lnb { float: left; width: 228px;}
.lnb h2,
.my_lnb h2 { padding: 21px 0 20px; font-size: 18px; font-weight: 700; color: #fff; text-align: center; background: #4D3A83;}
.lnb .nav >ul,
.my_lnb_nav { padding: 16px 16px 32px; border: 1px solid #ddd;}
.lnb .nav >ul >li >a,
.my_lnb_nav >li >a { display: block; position: relative; padding: 17px 24px 17px 12px; font-size: 14px; color: #000; line-height: 140%; border-bottom: 1px solid #eee;}
.lnb .nav >ul >li >a::after,
.my_lnb_nav >li >a::after { content: ''; display: block; position: absolute; right: 7px; top: 22px; width:12px; height: 8px; background: url(../images/my_ico_toggle.png) no-repeat;}
.lnb .nav >ul >li >a.no_arrow::after,
.my_lnb_nav >li >a.no_arrow::after { background: none;}
.lnb .nav >ul >li >a.active,
.my_lnb_nav >li >a.active { font-weight: 700; color: #4E008E; text-decoration: underline;}
.lnb .nav >ul >li >a.toggle::after,
.lnb .nav >ul >li >a.active::after,
.my_lnb_nav >li >a.toggle::after,
.my_lnb_nav >li >a.active::after { background-position: 0 -20px;}
.lnb .nav >ul >li >a.active +ul,
.my_lnb_nav >li >a.active +ul { display: block !important;}
.lnb .nav >ul >li ul,
.my_lnb_nav >li ul { display: none; padding: 7px 12px;}
.lnb .nav >ul >li ul li a,
.my_lnb_nav >li ul li a { display: block; padding: 6px 10px; color: rgba(0,0,0,0.78);}
.lnb .nav >ul >li ul li a.active,
.my_lnb_nav >li ul li a.active { padding: 6px 10px; font-weight: 700; color: #4D3A83;}
.lnb .nav >ul >li ul li a.active span { display:inline-block; margin-left:-10px; padding:5px 10px; background-color: #FFD700; border-radius:11px;}
.my_lnb_nav >li ul li a.active span { display:inline-block; margin-left:-10px; padding:2px 10px; background-color: #FFD700; border-radius:11px;}

/* Contents */
.sub_commom { margin-top: 40px;}
.contents { float: right; width: 820px; min-height:500px; padding-top: 10px;}
.contents.full { float: inherit; width: 100%;}
.heading { padding:9px 0 2px; font-size: 24px; font-weight:900; line-height: 140%;}
.heading span { color:#000; line-height: 140%;}
.heading sub { margin-left: 10px; font-size:14px; font-weight: normal;}
.explanation { margin-top:-30px; padding:10px 20px; border:1px solid #eee; border-top: 1px solid #444;}
.explanation li { line-height: 24px;}
.explanation li b em { font-weight: 700; color: #4E008E;}
.explanation.horizon { display:flex; margin-top: 0;}
.explanation.horizon li { flex:1;}




/* 공통 STYLE
**********************************************/
/* 정렬 */
.tal { text-align:left !important;}
.tac { text-align:center !important;}
.tar { text-align:right !important;}
.clear::after { display:block; clear:both; visibility:hidden; height:0; content:'.';}
.clear .left { float: left;}
.clear .right { float: right;}
.ls0 { letter-spacing: 0;}

/* 마진 */
.h1 { height: 1px;}
.h5 { height: 5px;}
.h10 { height: 10px;}
.h20 { height: 20px;}
.h30 { height: 30px;}
.h40 { height: 40px;}
.h50 { height: 50px;}
.wp100 { width: 100%;}

/* 폰트 */
.fs15 { font-size: 15px;}

/* 색상 */
.color_red { color: #f1187c;}
.color_gray { color: #858585;}
.color_blue { color: #136da2;}
.color_yellow { color: #ffd500;}
.color_purple { color: #4e008c;}

/* 아이콘 */
.ico { min-width:38px; height:24px; font-size: 13px; font-weight: 700; text-align:center; line-height:19px; border-radius: 4px;}
.ico.samples { color:#7C4754; border:2px solid #7C4754;}/* 신규, 지난주 꼭강 */
.ico.popularity { color:#527C47; border:2px solid #527C47;}/* 인기, 이번주 꼭강 */
.ico.essential { color:#47567C; border:2px solid #47567C;}/* 추천, 맛보기 */
.ico.complete { color:#7C7A47; border:2px solid #7C7A47;}/* 완강 */

.icons { display: inline-block; vertical-align:middle;}
.icons.sns_google { width:18px; height:12px; background: url(../images/footer_ico_google.png) no-repeat;}
.icons.sns_facebook { width:10px; height:16px; background: url(../images/footer_ico_facebook.png) no-repeat;}
.icons.sns_instagram { width:16px; height:16px; background: url(../images/footer_ico_insta.png) no-repeat;}
.icons.sns_blog { width:30px; height:14px; background: url(../images/footer_ico_blog.png) no-repeat;}
.icons.favicon { width:16px; height:15px; background: url(../images/lecture_picture_favorite.png) no-repeat;}
.icons.star_default { width:16px; height:16px; margin-right:1px; background: url(../images/ico_start_default.png) no-repeat;} 
.icons.star_active { width:16px; height:16px; margin-right:1px; background: url(../images/ico_start_active.png) no-repeat;}
.icons.naver { width:20px; height:21px; margin-right:4px; background: url(../images/login_icon_n.png) no-repeat;}
.icons.kakao { width:24px; height:21px; margin-right:4px; background: url(../images/login_icon_c.png) no-repeat;}

/* 체크박스 */
#wrap .checkbox { display:none; }
#wrap .checkbox +label { display: inline-block; height:19px; padding-left: 26px; line-height: 18px; background: url(../images/ico_checkbox.png) no-repeat; cursor: pointer;}
#wrap .checkbox:checked +label { background-position: 0 -21px;}
#wrap .checkbox2,
#my_wrap .checkbox2 { display:none; }
#wrap .checkbox2 +label,
#my_wrap .checkbox2 +label { display: inline-block; height:20px; padding-left: 26px; font-size:13px; line-height: 18px; background: url(../images/ico_checkbox2.png) no-repeat; cursor: pointer;}
#wrap .checkbox2:checked +label,
#my_wrap .checkbox2:checked +label { background-position: 0 -21px;}

/* Tab */
.tab { display:flex; border-bottom:3px solid #eee;}
.tab li { flex:auto;}
.tab li a { display: block; font-weight: 700; color: rgba(0,0,0,0.30); text-align: center;}
.tab li a.active { color: #4E008E; border-bottom:3px solid #4E008E;}
.tab.big { height: 60px;}
.tab.big li a { height: 58px; font-size: 20px; padding-top: 18px;}
.tab.big li a.active { height: 60px;}
.tab.small { height: 40px;}
.tab.small li a { height: 38px; font-size: 14px; padding-top: 12px;}
.tab.small li a.active { height: 40px; padding-top: 11px;}
.tab2 { height:42px; margin-bottom:-1px; border-bottom: 1px solid #dedede;}
.tab2::after { display:block; clear:both; visibility:hidden; height:0; content:'.';}
.tab2 li { float: left;}
.tab2 li a { width: 130px; height:42px; padding: 12px 0; font-size: 16px; font-weight: bold; color: #858585; text-align: center;}
.tab2 li a.active { color: #222; border-bottom:2px solid #1847f7;}

/* 초기화 */
.di { display: initial; vertical-align: initial;}

/* 강의 목록 */
.teacher_list  { border-top: 1px solid #eee;}
.teacher_list >li { position: relative; min-height:109px; padding: 35px 255px 38px 102px; border-bottom: 1px solid #eee;}
.teacher_list >li .picture { position: absolute; left: 0; top: 50%; width: 86px; height: 86px; margin-top: -43px;}
.teacher_list >li .picture .picimg { display:block; overflow:hidden; width:84px; height: 84px; padding:4px; border-radius:50%; box-shadow: 0 2px 4px rgba(0, 0, 0, .08);}
.teacher_list >li .picture .picimg img { width: 100%; height: auto; border-radius:50%;}
.teacher_list >li .picture .favorite { display:flex; position: absolute; left: 56px; bottom: 0; z-index:1; width:30px; height: 30px; text-align: center; background-color: #dadada; border-radius: 50%; outline: none; justify-content:center; align-items:center;}
.teacher_list >li .picture .favorite img { margin: -2px auto 0;}
.teacher_list >li .picture .favorite.active { background-color: #1948f7; background: linear-gradient(to right,  #6539E7 0%,#6A75E5 100%);}
.teacher_list >li .s { font-size:13px; font-weight:700; color: rgba(0,0,0,0.38);}
.teacher_list >li .t { font-size: 16px; font-weight: 700;}
.teacher_list >li .info { margin-top: 7px;}
.teacher_list >li .info span { margin-right: 8px;}
.teacher_list >li .situation { position: absolute; right: 168px; top: 50%; margin-top: -28px;}
.teacher_list >li .situation >div { display: inline-block; margin-left:5px; vertical-align: top;}
.teacher_list >li .situation >div span { display: block; margin-top:2px; font-size:12px; color: rgba(0,0,0,0.38); text-align: center;}
.teacher_list >li .situation >div i { display: inline-block; width:36px; height:36px; text-indent:-9999px; vertical-align: middle; border:1px solid #ddd; border-radius:8px;}
.teacher_list >li .situation >div.cont i { background: url(../images/ico_comment.png) no-repeat 6px 8px;}
.teacher_list >li .situation >div.hart a { transition: all .3s ease;}
.teacher_list >li .situation >div.hart a:hover i { border:1px solid #4D3A83;}
.teacher_list >li .situation >div.hart i { background: url(../images/ico_good.png) no-repeat 6px 8px;}
.teacher_list >li .situation >div i.active { background-position: 6px -91px;}
.teacher_list >li .situation >div i.active +span { font-weight: 700; color: #4E008E;}
.teacher_list >li .btns { position: absolute; right: 24px; top: 50%; transform:translate(0, -50%);}
.teacher_list >li .btns >button { display: block; width:100px; height: 36px; margin: 10px 0; font-size:13px; font-weight:700; color: rgba(0,0,0,0.38); line-height:140%; background-color: #F5F5F5; border-radius: 8px; transition: all .3s ease; cursor: inherit;}
.teacher_list >li .btns >button.active { color: rgba(0,0,0,0.78); cursor: pointer;}
.teacher_list >li .btns >button.active:hover { background-color:#ddd;}
.teacher_list >li .btns >a { display: block; width:100px; height: 36px; margin: 10px 0; font-size:13px; font-weight:700; color: rgba(0,0,0,0.78); text-align: center; line-height:36px; background-color: #F5F5F5; border-radius: 8px; transition: all .3s ease; cursor: pointer;}
.teacher_list >li .btns >a:hover { background-color:#ddd;}
.teacher_list >li .sample { position: absolute; right: 20px; top: 50px; z-index: 10; width: 480px; margin-top:29px; border: 1px solid #eee; background: #fff; border-radius:8px; box-shadow: 0 2px 4px rgba(0, 0, 0, .08);}
.teacher_list >li .sample .title { padding: 12px 20px; font-weight: bold;}
.teacher_list >li .sample ul { padding: 0 20px 20px;}
.teacher_list >li .sample ul li { position:relative; padding: 8px 85px 8px 0; }
.teacher_list >li .sample ul li p { overflow:hidden; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: rgba(0,0,0,0.58);}
.teacher_list >li .sample ul li button { position:absolute; right:0; top:50%; width: 75px; height: 19px; margin-top:-10px; font-size: 12px; font-weight:700; color: #4E008E; background: #FFD700;}
.teacher_list >li .sample .close { position: absolute; right: 20px; top: 10px; transition: all .3s ease;}
.teacher_list >li .sample .close img { width:24px; height: 24px; vertical-align: top;}
.teacher_list >li .sample .close:hover { box-shadow:0 0 3px rgba(0,0,0,0.58);}
.teacher_list >li .sample::before { content:''; position: absolute; right:45px; top:-15px; width:17px; height:15px; background: url(../images/ico_edge.png) no-repeat; background-size: 17px 15px;}
.teacher_list >li .progress { clear:left; overflow:hidden; margin-top: 7px;}
.teacher_list >li .progress .progressbar { float:left;  position:relative; width:68%; height:8px; margin:8px 0 0 10px; vertical-align: middle; background-color: #ebebeb; border-radius:4px;}
.teacher_list >li .progress .progressbar .prog { position: absolute; left:0; top:0; width:0; height:8px; background: #FFD700; border-radius:4px;}
.teacher_list >li .progress .division { float:left; width:38px; height:24px; padding-top: 2px; font-size: 13px; font-weight: 700; color: #FFD700; text-align: center; line-height:19px; background: #4E008E; border-radius:4px;}
.teacher_list >li .progress .division.exactly { color:#FFD700; background-color:#4E008E;}
.teacher_list >li .progress .division.autonomy { padding-top:0; color: #4E008E; border:2px solid #4E008E; background: #fff;}
.teacher_list >li .progress .rate { float:left; margin:1px 11px 0 9px; font-weight:700; color: rgba(0,0,0,0.78); vertical-align: middle;}
.teacher_list >li .progress .max { float:left; margin-top:1px; font-size: 14px; color: rgba(0,0,0,0.58); vertical-align: middle;}
.teacher_list >li.empth { min-height:inherit; padding:40px 0; text-align: center; border:1px solid #eee; border-top:1px solid #444;}
.teacher_list.no_line { border-top: none;}
.teacher_list.no_line >li { border-bottom: none;}
.teacher_list.no_empth >li { padding: 35px 90px 38px 102px}
.teacher_list.no_empth >li .situation { right:26px;}
.teacher_list.top_line { border-top:1px solid #444;}
.teacher_list.top_line >li { padding: 45px 90px 48px 102px}

/* 배즐 선생님 및 통합검색에서 나오는 선생님 목록  */
.teacher_info { clear: left; overflow: hidden; margin: -15px 0 0 -31px;}
.teacher_info li { float: left; width:346px; margin:55px 0 0 31px;}
.teacher_info li a { display: block; overflow:hidden;}
.teacher_info li a img { width:100%; height:100%; border-radius:20px;}
.teacher_info li a .name { position:relative; margin-top:40px; padding-top:7px; border-top:1px solid #575651;}
.teacher_info li a .s { overflow:hidden; margin-top: 15px; font-size: 14px; text-align:center; text-overflow:ellipsis; white-space:nowrap;}
.teacher_info li a .t { font-size: 28px; font-weight: bold; vertical-align: baseline;}
.teacher_info li a small { margin-left:10px; font-size:14px; color: rgba(0,0,0,0.58);}
.teacher_info li a i.new_window { position: absolute; right:0; top:15px;}
.teacher_intro { clear: left; overflow: hidden;}
.teacher_intro .area { padding-left: 372px;}
.teacher_intro h3 { position: absolute; left:0; top:25px; font-size: 18px; color: #000;}
.teacher_intro .books h3 { top:0; color: #ffd500;}
.teacher_intro h4 { font-size: 36px; font-weight:700; text-align:center; line-height: 49px;}
.teacher_intro h4 mark { position: relative;}
.teacher_intro h4 mark span { position: relative; z-index: 1;}
.teacher_intro h4 mark i { position: absolute; left:0; bottom:0; width:100%; height:13px; background-color: #ffd500;}
.teacher_intro .figure { position:relative; height:900px; text-align: center;}
.teacher_intro .figure img { position: absolute; left:50%; transform:translate(-50%, 0);}
.teacher_intro .figure +.area { margin-top:90px; padding:20px 0 75px 372px; border-top: 4px solid #000;}
.teacher_intro .figure +.area h3 { top:25px;}
.teacher_intro .column,
.teacher_intro .book_column { display: flex;}
.teacher_intro .column ul,
.teacher_intro .book_column ul { flex:auto;}
.teacher_intro .column ul:nth-child(2),
.teacher_intro .book_column ul:nth-child(2) { padding-left: 40px;}
.teacher_intro .column ul li { font-size: 18px; font-weight:700; color:#000; line-height: 36px;}
.teacher_intro .book_column ul li img { width:auto; height: 120px; margin-right: 3px;}
.teacher_intro .book_column ul li dt { margin-top:28px; color: #afabb3;}
.teacher_intro .book_column ul li dd { margin-top:30px; color:#fff; line-height: 28px;}
.teacher_intro .youtube { padding:65px 0; background-color: #f8f6ef;}
.teacher_intro .youtube .area { padding-left: 0;}
.teacher_intro .youtube .text-group { margin-top:30px; text-align: center;}
.teacher_intro .youtube .text-group p { font-size: 16px; font-weight:700;  color: #4e008c;}
.teacher_intro .youtube .text-group i.quotation { margin-bottom: 13px;}
.teacher_intro .youtube .box { margin-top:45px; text-align: center;}
.teacher_intro .youtube .box .iframe { display:inline-block; position: relative; width:530px; height:298px; margin:0 7px;}
.teacher_intro .youtube .box .iframe iframe { position: absolute; left:0; width: 100%; height: 100%; box-shadow:0 4px 10px rgba(0,0,0,0.18);}
.teacher_intro .youtube .box .iframe a { display:flex; position:absolute; left:0; top:0; z-index:1; width:100%; height:100%;  margin:0 auto; padding:0 20px; font-size:30px; font-weight:700; justify-content:center; align-items:center; flex-direction: column; transition: all .6s ease;}
.teacher_intro .youtube .box .iframe a p { width:100%; line-height: 1.4;}
.teacher_intro .youtube .box .iframe a i { display: block; width:48px; height:48px; margin: 20px auto 0; background: url(../images/icon_youtube_play.png) no-repeat;}
.teacher_intro .youtube .box .iframe .player_click { color:#fff; background-color: #ffd500;}
.teacher_intro .youtube .box .iframe .player_click i {}
.teacher_intro .youtube .box .iframe .player2_click { color:#ffd500; background-color: #fff;}
.teacher_intro .youtube .box .iframe .player2_click i { background-position: -100px 0;}
.teacher_intro .youtube .box .iframe a.blind { z-index:-1; opacity:0;}
.teacher_intro .books { padding:80px 0; background-color: #4e008c;}
.teacher_intro .history { padding:60px 0 80px; background-color: #eee;}
.teacher_intro .history .area { padding-top:20px; border-top:4px solid #000;}
.teacher_info li.empth { padding:40px 0; text-align: center; border:1px solid #eee; border-top:1px solid #444;}

/* 통합검색 핀셋 목록 */
.pincette_list li { position: relative; padding:15px 325px 12px 16px; border-bottom: 1px solid #eee;}
.pincette_list li .title a { display:inline; font-size:16px; font-weight: 700; line-height: 22px;}
.pincette_list li .title a mark { padding:0 1px; background: #FFE37E;}
.pincette_list li .title .ico { margin-left:10px; padding: 1px 7px 2px; vertical-align:middle; border:1px solid #eee; background-color: #F5F5F5;}
.pincette_list li .title .ico.samples { color: #7C4754;}
.pincette_list li .lecture { margin-top:14px; font-size:13px; color: rgba(0,0,0,0.38); line-height: 18px;}
.pincette_list li .teacher { margin-top:4px; font-weight: 700; color: rgba(0,0,0,0.38); line-height: 19px;}
.pincette_list li .time { position: absolute; right:280px; top:50%; margin-top: -10px; font-size:13px;}
.pincette_list li .play { position: absolute; right:225px; top:50%; width:20px; height:20px; margin-top: -10px; text-indent:-9999px; background:url(../images/ico_play.png) no-repeat;}
.pincette_list li .down { position: absolute; right:95px; top:50%; width:66px; margin-top: -15px; text-align: center;}
.pincette_list li .down a { width:16px; height:14px; padding:15px; text-indent:-9999px; background:url(../images/ico_pdf.png) no-repeat center center;}

/* QnA, 수강후기 */
.qna { margin-top: 10px;}
.qna >ul { border-top: 1px solid #222;}
.qna >ul >li >div { position: relative; padding: 18px 0; border-bottom: 1px solid #ddd;}
.qna >ul >li .name { margin:0 10px; font-size: 18px; font-weight: 700;}
.qna >ul >li .date { font-size: 13px; color: rgba(0,0,0,0.38);}
.qna >ul >li .gp img { width:100%; height:100%; border-radius:50%;}
.qna >ul >li .reco { color: #f1187c;}
.qna >ul >li .gp.thumbnail_name { display:inline-block; position:relative; width:48px; height:48px; padding:2px; vertical-align:middle; border-radius:50%; box-shadow:0 2px 4px rgba(0,0,0,0.08);}
.qna >ul >li .gp.thumbnail_name span { display: block; width:100%; height:100%; padding-top:12px; font-size:16px; color:#fff; text-align:center; background-color: #4E008E; border-radius:50%;}
.qna >ul >li .gp.thumbnail_name .te { display: block; position:absolute; right:0;  bottom:0; width:18px; height: 18px; font-style:normal; color:#1E5DF8; text-align:center; background-color: #fff; box-shadow:0 4px 8px rgba(0,0,0,0.08); border-radius:50%;}
.qna >ul >li .gp.thumbnail_name .te img { width:7px; height: 8px; margin:-3px 0 0 2px; border-radius:0;}
.qna >ul >li .owner >.text { padding:0 16px 20px; border:1px solid #eee; border-radius:8px;}
.qna >ul >li .owner.bg_white >.text { white-space:pre-line; background-color: #F5F5F5;}
.qna >ul >li .owner.bg_white >.text span { display: block; margin-top:10px; padding-top:10px; color:#f1187c; border-top: 1px solid #ddd;}
.qna >ul >li pre { margin-top: 12px; color: rgba(0,0,0,0.58); line-height:140%;}
.qna >ul >li .thumbnail { clear: left; overflow: hidden; margin: 10px 0 10px -10px;}
.qna >ul >li .thumbnail li { float: left; width:calc( 50% - 10px ); margin: 10px 0 0 10px;}
.qna >ul >li .thumbnail li a { display: block; padding:15px 0; text-align: center;}
.qna >ul >li .thumbnail li a img { max-width: 100%; height:auto;}
.qna >ul >li .controls { clear: left; overflow: hidden; padding-left: 3px;}
.qna >ul >li .controls .color { font-weight: 700; color: #4E008E;}
.qna >ul >li .controls >div { float: left; margin-right: 45px;}
.qna >ul >li .controls >div span { margin:-1px 0 0 10px; font-size: 14px; color: #666; line-height: 18px;}
.qna >ul >li .controls >div a { color: #1d2089; text-decoration: underline;}
.qna >ul >li .controls >div.comment i { display: inline-block; width:18px; height: 18px; text-indent: -99999px; vertical-align:middle; background: url(../images/ico_comment2.png) no-repeat;}
.qna >ul >li .controls >div.comment i.active { background-position: 0 -22px;}
.qna >ul >li .controls .comment img { width: auto; height: 20px;}
.qna >ul >li .controls .comment span { margin-top: -2px;}
.qna >ul >li .recommendation { width: 18px; height: 18px; text-indent: -99999px; background: url(../images/ico_recommendation.png) no-repeat;}
.qna >ul >li .recommendation.active { background-position: 0 -22px;}
.qna >ul >li .option { position: absolute; right: 2px; top: 11px;}
.qna >ul >li .option >button { width:32px; height:32px; border:1px solid #eee; border-radius:4px;}
.qna >ul >li .option >button img { margin-top: -2px;}
.qna >ul >li .option .alert { position: absolute; right: 33px; top: 0; z-index: 10; width: 110px; border:1px solid #858585; background-color: #fff; box-shadow:0px 2px 4px rgba(0, 0, 0, .2);}
.qna >ul >li .option .alert li a { display: block; padding:10px; color: #858585; text-align: left; border-top: 1px solid #c2c2c2;}
.qna >ul >li .option .alert li:first-child a { border-top: none;}
.qna >ul >li .option .alert li a:hover { color: #222; background-color: #ececec;}
.qna >ul >li .adoption .name { position: relative; padding-left: 40px;}
.qna >ul >li .adoption .name::before { content:'채택'; position: absolute; left:0; top:2px; width:28px; font-size: 12px; font-weight:normal; color: #fff; text-align:center; line-height:16px; background: linear-gradient(to right,  #6539E7 0%,#6A75E5 100%); border-radius:2px;}
.qna >ul >li .estimation { margin:-9px 0 9px 4px; padding-left: 59px;}
.qna >ul >li .estimation span { margin:0 -1.8px; font-size: 18px; color: #dedede;}
.qna >ul >li .estimation span.choice img.only_pc { display: inline-block !important;}
.qna >ul >li.empth { padding: 15px 0; text-align: center; border-bottom:1px solid #dedede;}
.qna >ul >li ul li { padding: 0 16px;  background-color: #f5f5f5;}
.qna >ul >li ul li .option { top: 10px; right:-15px;}
.qna >ul >li ul li >div { position: relative; padding: 12px 0; border-bottom: 1px solid #eee;}
.qna >ul >li ul li .controls >div span { margin:-2px 0 0 5px;}
.qna >ul >li >ul >li ul li >div { padding-left: 60px;}
.qna >ul >li >ul >li ul li >div::before { left: 40px;}
.qnabtn { margin-top:-22px; text-align: right;}
.qnabtn button { display: inline-block; min-width:100px; height:36px; margin-top: -14px; padding:0 10px; font-weight: 700; color: #4E008E; border:2px solid #4E008E; border-radius:8px;}
.video .qna >ul { border-top: none;}
.video .qna >ul >li .thumbnail li { width:29%;}
.video .qna >ul >li .thumbnail li img { width:100%; height: 50px;}
.video .qna >ul >li .controls .mark { display: block; width: 100%; margin-top: 10px;}

/* 404 */
.emphy_page { font-size:26px; text-align:center; background: #0e6eb8;}
.emphy_header { padding:20px; background: #fff; box-shadow:0 4px 0 rgba(0, 0, 0, .1);}
.error-code { margin-top:80px; font-size: 80px; font-weight: bold; color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, .1);}
.error-text p { margin-top:25px; font-size: 20px; font-weight: bold; color:#fff;}
.error-text .solve { margin-top:15px; font-size: 16px; color:#fff; line-height: 24px;}
.error-text a.solve { display: inline-block; margin-top:25px; padding:5px 30px; border:1px solid #fff; border-radius:10px; cursor: pointer;}
.error-text a.solve:hover { color:#7cc0f5; border:1px solid #7cc0f5;}
.error-text .hr { display: inline-block; width:40px; height:5px; margin-top:40px; background: rgba(255, 255, 255, .4);}







/* Split
**********************************************/
.split { display: inline-block; vertical-align: middle; background: url(../images/split.png) no-repeat;}
i.new_window { width:27px; height:25px; background-position: 0 0;}
i.quotation {  width:28px; height:18px; background-position: 0 -40px;}













/* 테이블
**********************************************/
.btable { border-top: 1px solid #444; border-bottom: 1px solid #4f4f4f;}
.btable th { padding: 16px 0; font-size: 13px; color: rgba(0,0,0,0.78); background-color: #F4F1F5;}
.btable td { font-size: 13px; color: rgba(0,0,0,0.78); text-align: center; line-height:18px; border-bottom: 1px solid #eee;}
.btable td .btn { padding: 3px 7px; font-weight: bold; border-radius: 4px;}
.btable td .btn.purple { color: #803db8; border: 1px solid #803db8; background-color: #fff;}
.btable td .btn.green { color: #87bd43; border: 1px solid #87bd43; background-color: #fff;}
.btable td .btn.blue { color: #0e6eb8; border: 1px solid #0e6eb8; background-color: #fff;}
.btable td .mh { min-height: 48px; line-height: 48px;}
.btable td .amt { padding-right:40px; font-weight:bold; text-align: right; letter-spacing: 0;}
.btable td .amt.increase { color: #4E008E;}
.btable td .amt.decrease { color: #D43F65;}
.btable td .point { margin-top:8px; padding-right:40px; text-align: right;}
.btable td.tal a { line-height: 18px;}
.btable td.tal a:hover { text-decoration: underline;}
.btable tr.notice td { font-weight: bold; background-color: #f8f8f8;}
.btable td.amt { padding: 14px 0; border-bottom:none;}
.btable td.btableBottom td { font-weight:700; background-color: #f5f5f5;}
.btable tfoot td { padding: 18px 0 !important; font-size:18px; font-weight:bold; text-align: center; border-top: 1px solid #4f4f4f !important; background-color: #f8f8f8;}
.btable.padding_tb td { padding:14px 0;}

.bhtable { border-top: 1px solid #4f4f4f; border-bottom: 1px solid #4f4f4f;}
.bhtable th { padding: 16px 20px; text-align-last: left; border-bottom: 1px solid #ececec; background-color: #F4F1F5;}
.bhtable td { padding: 16px 20px; line-height: 22px; border-bottom: 1px solid #ececec;}
.bhtable td .file li { margin-top: 2px;}
.bhtable td .file li:first-child { margin-top: 0;}
.bhtable td .file li a { color: #0e6eb8;}
.bhtable td .mh { min-height: 212px; white-space:pre-line;}
.bhtable td select,
.bhtable td input { width: 100%;}
.bhtable td img { max-width: 100%; height: auto;}
.bhtable.pd9 th,
.bhtable.pd9 td { padding: 9px 20px;}

.page_number { position: relative; margin-top: 20px; text-align: center;}
.page_number a { width: 30px; height: 40px; margin: 0 3px; padding-top: 11px; color: rgba(0,0,0,0.58);}
.page_number a:hover { text-decoration: underline;}
.page_number a.active { font-weight:700; color: #4E008E; text-decoration: underline;}
.page_number .btn.blue { position: absolute; right: 0; top: -2px; width: 109px; height: 28px; color: #fff; background: #0e6eb8; border-radius: 4px;}
.page_number a img { margin-top: -2px;}







/* 레이어
**********************************************/
.layer { overflow: hidden; position: absolute; left:0; top: 0; z-index: 100; width: 100%; height:100%; background-color: rgba(0, 0, 0, .5);}
.layer .body { position:relative; left:50%; top:50%; z-index:100; border: 1px solid #bdbdbd; background-color:#fff; transform:translate(-50%, -50%);}
.layer .body .tuition { padding: 60px 30px 50px;}
.layer .body .tuition h3 { font-size: 27px; text-align: center;}
.layer .body .tuition .s { margin-top: 37px; font-size: 18px; text-align: center; line-height: 24px;}
.layer .body .send { width: 100%; height: 52px; font-size: 18px; color: #fff; background: #1d2089; border-radius: 5px;}
.layer .body .btns { border-top: 1px solid #c6c6c6;}
.layer .body .btns button { width: 50%; height: 48px; font-size: 16px;}
.layer .body .btns .left { border-right: 1px solid #c6c6c6;}

#wrap .join_layer .hp_mody { position: relative;}
#wrap .join_layer .hp_mody .text {position: absolute; left: 0; top: 10px; font-size: 14px;}
#wrap .join_layer .hp_mody .hp_modi { clear: left; overflow: hidden;}
#wrap .join_layer .hp_mody .hp_modi select,
#wrap .join_layer .hp_mody .hp_modi input { float: left; width: 30%;}
#wrap .join_layer .hp_mody .hp_modi { clear: left; overflow: hidden;}
#wrap .join_layer .class_mody { clear:left; overflow:hidden; position: relative; }
#wrap .join_layer .class_mody .text {margin-bottom: 8px;font-weight: bold;font-size: 12px;color: rgba(0, 0, 0, 0.58);}
#wrap .join_layer .class_mody select,
#wrap .join_layer .class_mody input { float: left; width: 100%;}
#wrap .join_layer .hp_mody .hp_modi .ib { float: left; width: 5%; padding-top: 11px; color: #858585; text-align: center;}
#wrap .join_layer .input_text{height: 40px;font-family: 'Noto Sans KR';}
#wrap .join_layer .input_text::placeholder{font-weight: bold;font-size: 14px;color: rgba(0, 0, 0, 0.3);}

.join_layer { overflow: hidden; position: fixed; left:0; top: 0; z-index: 100; width: 100%; height:100%; background-color: rgba(0, 0, 0, .5);}
.join_layer .join_modify_text { padding: 30px 30px 0; font-size: 16px; color: #1d2088;}
.join_layer .body { position: fixed; left: 50%; top: 50%; z-index: 100; width: 480px; min-height: 80%; margin:0 auto; border: 1px solid #858585; background: #fff; box-shadow: 0 6px 6px rgba(0, 0, 0, .2); transform:translate(-50%, -50%);}
.join_layer .body h3 { padding: 11px 0; font-size: 18px; font-weight: normal; color: #fff; text-align: center; background: #4e008e;}
.join_layer .close { position: absolute; right: 4px; top: 0; padding: 8px;}
.join_layer .scr_body{max-height: calc(100vh - 50px);overflow-y: auto;}
.join_layer .work select,
.join_layer .work input[type=text],
.join_layer .work input[type=password],
.join_layer .work input[type=tel] { height: 40px;}
.join_layer .work.scroll_y { overflow-x: hidden; overflow-y: auto; height: 800px;}
.join_layer .work .send { width: 100%; height: 52px; margin-top: 20px; font-size: 16px; font-weight:700; color: #4e008c; background: #ffd500; border-radius: 5px;}
.join_layer .work .withdraw { margin-top: 15px; text-align: right;}
.join_layer .work .withdraw button { }
.join_layer .work .withdraw button span{font-size: 14px;color: #000;border-bottom: 1px solid #000;font-weight: bold;}
.join_layer .work .withdraw button i{display: inline-block;width:10px;height:11px;margin-left: 4px;background:url("../images/ico_triangle_round_2x.png") no-repeat center right;background-size: 10px 11px;vertical-align: middle;}
#wrap .join_layer .work .send.disable { background-color: #ccc;color: #fff;}
.join_layer .work .send.skyblue { margin-top: 15px; background: #0e6eb8;}
.join_layer .work .send.purple { margin-top: 15px; color: rgba(0, 0, 0, 0.78);border: 1px solid #222;background: #fff;}
.join_layer .work .step1 { padding: 30px;}
.join_layer .work .step1 .search .w1 { width: 100%;}
.join_layer .work .step1 .search select { width:100%;}
.join_layer .work .step1 .search .por { position: relative; padding-right: 40px;}
.join_layer .work .step1 .search .por button { position: absolute; right: 0; top: 0; width:35px; height: 34px; background-color: #000; border-radius: 3px;}
.join_layer .work .step1 h4 { font-size: 18px;}
.join_layer .work .step1 .member_overy { overflow-x:hidden; overflow-y:auto; width:100%; height:calc( 100vh - 362px );}
.join_layer .work .step1 .text { margin-top: 5px; color: #4e008c;}
.join_layer .work .step1 .center { border-top: 1px solid #222;}
.join_layer .work .step1 .center li { position: relative; padding: 12px 70px 12px 0; border-bottom: 1px solid #ececec;}
.join_layer .work .step1 .center li button { position: absolute; right: 10px; top: 50%; margin-top: -17px; padding: 6px 10px; border:1px solid #d5d4cf; border-radius: 4px;}
.join_layer .work .step1 .center li .name { font-size: 15px; font-weight: bold;}
.join_layer .work .step1 .center li .adress { color: #666;}
.join_layer .work .step2 { padding: 63px 50px; text-align: center;}
.join_layer .work .step2 .tblue { font-size: 24px;}
.join_layer .work .step2 .t { margin-top: -6px; font-size: 24px; color: #000;}
.join_layer .work .step2 .s { margin-top: 15px; font-size: 14px; color: #858585;}
.join_layer .work .step2 .select { display:flex; margin-top: 25px; padding-top:17px; border-top:1px solid #d5d4cf;}
.join_layer .work .step2 .select li { flex: auto;}
.join_layer .work .step2 .select li .hsize { height: 52px;}
.join_layer .work .step2 .select li .hsize .st { margin-top: 9px; font-size: 16px; font-weight:700;}
.join_layer .work .step2 .select li .hsize .ss { font-size: 12px; color: #4e008c;}
.join_layer .work .step2 .select li button { height: 36px; margin-top: 24px; padding: 0 35px; color: rgba(78,0,142,0.78); background: #ffd500; border-radius: 5px;}
.join_layer .work .step3 { padding: 43px 30px 0;}
.join_layer .work .step3 h4 { font-size: 20px; color: #222; text-align: center;}
.join_layer .work .step3 .terms label { font-size: 16px !important;}
.join_layer .work .step3 .terms textarea { width: 100%; height: 225px; margin-top: 10px; padding: 15px;}
.join_layer .work .step3 .terms .tbody { overflow-y:scroll; height:175px; margin-top:10px; padding:15px; border:1px solid #c2c2c2;}
.join_layer .work .step3 .terms .tbody h3 { font-size:15px; font-weight:bold; color:#333; text-align: left; background: none;}
.join_layer .work .step3 .terms .tbody dt,
.join_layer .work .step3 .terms .tbody dd,
.join_layer .work .step3 .terms .tbody li,
.join_layer .work .step3 .terms .tbody p { font-size: 13px; line-height: 20px;}
.join_layer .work .step4 { padding: 30px;}
.join_layer .work .step4 h4 { margin-bottom: 16px;padding-bottom: 16px;font-size: 18px; color: #222;border-bottom: 2px solid #222;}
.join_layer .work .step4 .pic .pic_body { position: relative; width:128px; height: 128px; margin: 0 auto;}
.join_layer .work .step4 .pic .pic_body .picimg { display:block; overflow:hidden; width:84px; height: 84px; padding:4px; border-radius:50%; box-shadow: 0 2px 4px rgba(0, 0, 0, .08);}
.join_layer .work .step4 .pic .pic_body .picimg img { width: 100%; height: auto; border-radius:50%;}
.join_layer .work .step4 .pic .pic_body >img { width: 128px; height: 129px; border-radius:50%;border: 1px solid #ddd;}
.join_layer .work .step4 .pic .pic_body label { position: absolute; right: 0; bottom: 0; cursor: pointer;}
.join_layer .work .step4 .pic .pic_body input { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0);}
.join_layer .work .step4 .form input { width: 100%;}
.join_layer .work .step4 .form p { margin-top: 2px; font-size: 12px;}
.join_layer .work .step4 .form .mody { position: relative; padding-left: 70px;}
.join_layer .work .step4 .form .mody .text {position: absolute; left: 0; top: 10px; font-size: 14px;}
.join_layer .work .step4 .form .mody .modi { clear: left; overflow: hidden;}
.join_layer .work .step4 .form .mody .modi select { float: left; width: 30%; margin-left: 5%;}
.join_layer .work .step4 .form .mody .modi select:first-child { margin-left: 0;}
.join_layer .work .step4 .form .text{margin-bottom: 8px;font-weight: bold;font-size: 13px;color: rgba(0, 0, 0, 0.58);}
.join_layer .work .step4 .select p { font-size: 14px;}
.join_layer .work .step4 .select input { width: 19px; height: 19px;}
.join_layer .work .step4 .select label { font-size: 14px;}
.join_layer .work .step5 { padding: 30px;}
.join_layer .work .step5 h4 { font-size: 18px; color: #222;}
.join_layer .work .step5 .s { margin-top: 8px; font-size: 12px; color: #858585;}
.join_layer .work .step5 h5 { font-size: 16px; font-weight: bold; color: #222;}
.join_layer .work .step5 .form { margin-top: 15px;}
.join_layer .work .step5 .form input { width: 100%;}
.join_layer .work .step5 .form .call { margin-top: 10px; text-align: right;}
.join_layer .work .step5 .form .call button { height: 34px; padding: 0 22px; font-size: 16px; color: #fff; background: #000; border-radius: 4px;}
.join_layer .work .step5 .send { width: 100%; height: 52px; margin-top: 20px; font-size: 16px; font-weight:700; color: #4e008c; background: #ffd500; border-radius: 5px;}
.join_layer .work .step6 { padding: 30px;}
.join_layer .work .step6 h4 {margin-bottom: 16px;padding-bottom: 16px;font-size: 18px; color: #222;border-bottom: 2px solid #222;}
.join_layer .work .step6 .s { margin-bottom: 14px; font-size: 15px; font-weight: bold; color: #4e008c;}
.join_layer .work .step6 .form { margin-top: 5px;}
.join_layer .work .step6 .form input { width: 100%;}
.join_layer .work .step6 .form .g { margin-top: 3px; font-size: 12px;}
.join_layer .work .step6 .form .text{margin-bottom: 8px;font-weight: bold;font-size: 13px;color: rgba(0, 0, 0, 0.58);}
.join_layer .work .step7 { padding: 30px;}
.join_layer .work .step7 h4 { font-size: 18px; color: #222;}
.join_layer .work .step7 .s { margin-top: 8px; font-size: 12px; color: #858585;}
.join_layer .work .step7 h5 { font-size: 16px; font-weight: bold; color: #222;}
.join_layer .work .step7 .form { margin-top: 15px;}
.join_layer .work .step7 .form input { width: 100%;}
.join_layer .work .step7 .form .text { margin-right: 19px; font-size: 14px;}
.join_layer .work .step7 .form .ib { margin: 0 4px; color: #858585;}
.join_layer .work .step8 { padding: 82px 50px; text-align: center;}
.join_layer .work .step8 .tblue { font-size: 24px; }
.join_layer .work .step8 .tblue .initial { padding-top: 3px; font-size: 20px; color: #222;}
.join_layer .work .step8 .t { margin-top: -2px; font-size: 24px;}
.join_layer .work .step8 .s { margin-top: 15px; font-size: 14px; color: #858585;}

/* 자녀등록 */
.join_layer .work .child_search_wrap{padding: 16px;border: 1px solid #ddd;border-radius: 8px;}
.join_layer .work .child_search_wrap .s{margin-top: 8px;color: rgba(0, 0, 0, 0.58);font-size: 13px;}
.join_layer .work .childReg-tab{}
.tab-list-btn{width:100%;border-radius: 4px;overflow: hidden;}
.tab-list-btn::after{display: block;content: '';clear: both;}
.tab-list-btn li{float: left;width: 50%;}
.tab-list-btn li a{display: block;padding: 12px 0;font-weight: bold;color: rgba(0, 0, 0, 0.3);background: #F5F5F5;text-align: center;font-size: 13px;}
.tab-list-btn li a.on, .tab-list-btn li a:hover{color:#fff;background: #4e008e;}
.child_search_type .class_mody{display:none;}
.child_search_type .class_mody.on{display:block;}


/* 아이디 찾기 */
.join_layer .id_step1 { padding: 65px 30px;}
.join_layer .id_step1 h4 { font-size: 20px; text-align: center;}
.join_layer .id_step1 .s { font-size: 16px;}
.join_layer .id_step1 .form { margin-top: 35px;}
.join_layer .id_step1 .form .i_radio{margin-top: 4px;}
.join_layer .id_step1 .form .i_radio .radioA{margin-right:24px;} 
.join_layer .id_step1 .form .i_radio label { font-size: 15px; font-weight: bold;}
.join_layer .id_step1 .form input[type=text],
.join_layer .id_step1 .form input[type=email] { width: 100%;}
.join_layer .id_step1 .info{font-size: 14px;color: rgba(0, 0, 0, 0.58);}
.join_layer .id_step2 { padding: 85px 30px;}
.join_layer .id_step2 h4 { font-size: 20px; text-align: center;}
.join_layer .id_step2 .s { font-size: 36px; font-weight: bold; color: #4e008e; text-align: center;}
.join_layer .id_step2 .btns { margin-top: 60px;}
.join_layer .id_step2 .color_blue { color: #1d2089; letter-spacing: 0;}
.join_layer .id_step1 .form .text{margin-bottom: 8px;font-weight: bold;font-size: 13px;color: rgba(0, 0, 0, 0.58);}
.join_layer .pass_step2 .t{display:block;margin-bottom: 4px;font-size: 18px;font-weight: bold;color:#4e008e;}
.join_layer .pass_step2 .s{display:block;font-size: 18px;font-weight: bold;color: rgba(0, 0, 0, 0.78);}
.join_layer .pass_step2 .ss{display:block;font-size: 14px;font-weight: normal;margin-top: 16px;color: rgba(0, 0, 0, 0.58);}

.radioA{position: relative;display: inline-block;}
.radioA input{display:none;}
.radioA input + label::before{content:'';position: absolute;left: 0;top: 0;display: inline-block;width: 20px;height: 20px;margin-right: 2px;cursor: pointer;border-radius: 50%; background-image: url('../images/ico_radio_default.png');background-size: 20px;background-repeat: no-repeat;background-color: #fff;}
.radioA input:checked + label::before{background-image: none;background-color: #ffd500;background-size: auto;background-position: center;}
.radioA input:checked + label::after{display: block;content: '';position: absolute;top: 50%;left:7px;width: 6px;height: 6px;margin-top: -3px;border-radius: 50%;background-color: #4e008c;}
.radioA input[disabled] + label::before{background-color: #F5F5F5;}
.radioA label{position: relative;display: block;padding-left:28px;line-height: 20px;cursor: pointer;}
.radioA label span{margin-left: 28px;color: rgba(0, 0, 0, 0.58);}

.cs_layer { overflow-x: hidden; position: fixed; left:0; top: 0; z-index: 100; width: 100%; height:100%; padding:50px 0; background-color: rgba(0, 0, 0, .5);}
.cs_layer .body { position: relative; width: 580px; margin:0 auto; padding-top:36px; border-top: 8px solid #FFD700; background: #fff; box-shadow: 0 6px 6px rgba(0, 0, 0, .2);}
.cs_layer h3 { font-size: 28px; color: rgba(0,0,0,0.78); text-align: center;}
.cs_layer .close { display:none; position: absolute; right: 3px; top: 0; padding: 7px;}
.cs_layer .body .cs_contents { position: relative; padding: 30px 70px 60px;}
.cs_layer .body h4 { font-size: 18px;}
.cs_layer .body .s { color: rgba(0,0,0,0.38); text-align:center; line-height: 140%;}
.cs_layer .body .title { margin-top: 10px; text-align:center;}
.cs_layer .body .form { margin-top: 7px;}
.cs_layer .body select { width: 100%;}
.cs_layer .body textarea { width: 100%; height: 185px;}
.cs_layer .body .form .filebody { position:relative; margin-top:11px; padding:12px; background-color: #F5F5F5; border:1px solid #eee;}
.cs_layer .body .form .filebody .fs { position: absolute; right: 0; top:10px; width:254px; font-size:12px; color: rgba(0,0,0,0.38);}
.cs_layer .body .form .files { clear: left; overflow: hidden;}
.cs_layer .body .form .files li { float: left; margin-right: 10px;}
.cs_layer .body .form .files li label { cursor: pointer;}
.cs_layer .body .form .files li img { max-width: 36px; height: auto;}
.cs_layer .body .form .files li input { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0);}
.cs_layer .body .form .files li .position { position: relative;}
.cs_layer .body .form .files li .position .close { position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -12px; padding: 5px; font-size: 17px; font-weight: bold; color: #fff; text-shadow: 0 1px 2px #000;}
.cs_layer .body .form .subject { font-size: 14px; font-weight: bold;}
.cs_layer .body .form .color_orange { color: #e2574c;}
.cs_layer .body .form .twin .left { float: left; width: 45%;}
.cs_layer .body .form .twin .right { float: right; width: 53%;}
.cs_layer .body .form .ib { display: inline-block;}
.cs_layer .body .form .mo_space { display: inline;}
.cs_layer .body .form .dash { margin: 0 4px; color: #858585;}
.cs_layer .body .form .label label { margin: -2px 15px 0 2px;}
.cs_layer .body .form .g { margin-top: 3px; padding-left:54px; font-size: 12px;}
.cs_layer .body table { margin-top: 50px;}
.cs_layer .body table th { text-align: left;}
.cs_layer .body table td { padding:14px 0;}
.cs_layer .body table td.nopd { padding: 0;}
.cs_layer .body table td.nopd2 { padding:14px 0 8px;}
.cs_layer .body table td.nopd3 { padding:14px 0 0;}
.cs_layer .body .btns { margin-top: 32px;}
.cs_layer .body .btns button { width: 49%; height: 48px; font-weight:700; border-radius: 8px;}
.cs_layer .body .btns button:hover { text-decoration: underline;}
.cs_layer .body .btns button.gray { color: rgba(0,0,0,0.78); border:2px solid #ddd;}
.cs_layer .body .btns button.blue { color:#4E008E; border:2px solid #4E008E;}

/* 센터찾기 */
.map_layer { overflow: hidden; position: fixed; left:0; top: 0; z-index: 100; width: 100%; height:100%; background-color: rgba(0, 0, 0, .5);}
.map_layer .body { position:relative; left:50%; top:50%; z-index:100; width: 1100px; margin:-229px 0 0 -550px;}
.map_layer .body .map_img { border: 1px solid #000; background-color:#fff;}
.map_layer .body h3 { padding: 14px 8px 0; font-size: 18px; color: #fff;}
.map_layer .body .right { padding: 10px;}

#my_wrap .join_layer .hp_mody { position: relative; padding-left: 70px;}
#my_wrap .join_layer .hp_mody .text {position: absolute; left: 0; top: 10px; font-size: 14px;}
#my_wrap .join_layer .hp_mody .hp_modi { clear: left; overflow: hidden;}
#my_wrap .join_layer .hp_mody .hp_modi select,
#my_wrap .join_layer .hp_mody .hp_modi input { float: left; width: 30%;}
#my_wrap .join_layer .hp_mody .hp_modi { clear: left; overflow: hidden;}
#my_wrap .join_layer .class_mody { clear:left; overflow:hidden; position: relative; padding-left: 70px;}
#my_wrap .join_layer .class_mody .text {position: absolute; left: 0; top: 10px; font-size: 14px;}
#my_wrap .join_layer .class_mody select,
#my_wrap .join_layer .class_mody input { float: left; width: 100%;}
#my_wrap .join_layer .hp_mody .hp_modi .ib { float: left; width: 5%; padding-top: 8px; color: #858585; text-align: center;}

/* 메인 팝업 */
.main_popup { position: fixed; left: 50%; top:184px; z-index:50; margin-left:192px; }
.main_popup .mp_body { display:inline-block; border:1px solid #575651; box-shadow:0 16px 20px rgb(0 0 0 / 8%);}
.main_popup .mp_body a{display:block;}
.main_popup .mp_body a[href='javascript:void(0)']{cursor:default;}
.main_popup img { max-width: 100%; height: auto;}
.main_popup .mp_footer { display:flex; background-color: #fff;}
.main_popup .mp_footer .fl { margin-right:auto; padding:8px 7px;}
.main_popup .mp_footer .fl input { display: none;}
.main_popup .mp_footer .fl label { font-size:12px; color: #444;}
.main_popup .mp_footer .fl input +label { display: inline-block; height: 18px; padding: 0 0 0 30px; line-height:16px; background:url(../../images/ico_checkbox2.png) no-repeat; cursor: pointer;}
.main_popup .mp_footer .fl input:checked +label { background-position: 0 -21px;}
.main_popup .mp_footer button { width:53px; height:21px; margin:6px 6px 0 auto; padding-bottom:2px; font-size:12px; color:#fff; text-align:center; letter-spacing:-1px; background-color: #492f5e; border-radius: 4px;}



/* 로그인
**********************************************/
.login .contents { width: 440px; margin: 0 auto;}
.login .timg { text-align: center;}
.login .timg img { width:148px; height: auto;}
.login .form { position:relative; margin-top: 48px; padding:23px 140px 0 0; border-bottom:1px solid #ddd; background: url(../images/login_line_bg.png) repeat-x left top;}
.login .form input[type=text],
.login .form input[type=password] { width: 100%; padding: 0 20px; font-size: 16px;}
.login .form input[type=password] { margin-top: 8px;}
.login .form input[type=checkbox] { width: 23px; height: 23px;}
.login .form label { font-size: 14px; color: #858585;}
.login .send { position:absolute; right:0; top:23px; width: 126px; height: 88px; font-size: 16px; font-weight:700; color: #4e008e; border:2px solid #4e008e; border-radius: 5px; transition: all .3s ease;}
.login .send:hover { color:#fff; background-color: #4e008e;}
.login .links { margin-top: 26px; text-align: center;}
.login .links a { font-size: 13px; font-weight:700; color: #000;}
.login .links a:hover { text-decoration: underline;}
.login .join { font-size: 13px; font-weight:700; color: #000;}
.login .join:hover{ text-decoration: underline;}
.login .login_round { display:inline-block; width:3px; height:3px; margin: 0 12px; vertical-align:middle; background-color: #b4b4b4; border-radius:50%;}
.login .links span { margin: 0 35px; font-size:11px; color: #d5d4cf}
.login .btn { width: 100%; height: 60px; margin-top: 10px; font-weight:700; border-radius: 5px;}
.login .btn:hover span { text-decoration: underline;}
.login .btn img.only_pc { display: inline-block !important; margin-right: 8px;}
.login .btn.naver { margin-top: 37px; color: #fff; background: #19ce60;}
.login .btn.kakao { background: #ffeb00;}
.login .guide { margin-top:43px; font-size:13px; text-align: center; color: rgba(0,0,0,0.38);}
.login input::placeholder { font-size: 14px; color: rgba(0,0,0,0.38);}









/* 메인
**********************************************/
.main {}
.main .blackhansans { font-family: 'Black Han Sans','Apple SD Gothic Neo','돋움',dotum, sans-serif; font-weight:normal;}
.main .bgedge { background-color: #ffd700; background: url(../images/main_edge_bottom.png), url(../images/main_edge_top.png); background-repeat: no-repeat, no-repeat; background-position: bottom center, top center;}
.main .questions.bgedge{background-color: #4f008d; background: url(../images/main_edge_bottom_purple.png), url(../images/main_edge_top_purple.png); background-repeat: no-repeat, no-repeat; background-position: bottom center, top center;}
.main .front { position: relative; padding-left:208px; color: #ffd700;}
.main .front .blackhansans { font-size: 76px;}
.main .front .qa { position: absolute; left:0; top:0; font-size: 154px;}
.main .njoy { color: #4e008c; text-align: center;}
.main .njoy .small { font-size: 28px;}
.main .njoy .strong { position:relative; margin-left:12px; font-size: 114px;}
.main .njoy .strong::before { content:''; position: absolute; left:0; bottom:10px; width:100%; height:4px; background-color: #4e008c;}
.main .strong_text { margin-top:30px; font-size: 76px; text-align:center; line-height: 76px;}

.main .importance { padding: 60px 0 50px;}
.main .importance h2 { font-size: 100px; line-height: 117px;}
.main .importance .system { font-size: 24px; font-weight:700; color: #7533aa;}
.main .importance ul { margin-top: 20px;}
.main .importance ul li {position: relative;margin-bottom:12px;padding-left:14px; font-size:18px; color:#565656; line-height: 140%;}
.main .importance ul li:before {position: absolute;top: 13px;left: 0; display: inline-block;content:''; width: 6px; height: 6px;vertical-align:middle; background: url(../images/main_importance_icon.png) no-repeat;}
.main .importance ul li:first-child:before{top:11px;}
.main .importance ul li:last-child{margin-bottom:0;}
.main .importance ul li i.icon_plus { display: inline-block; width: 10px; height: 10px; margin:-4px 7px 0; vertical-align:middle; background: url(../images/main_importance_icon2.png) no-repeat;}
.main .importance .img { position: absolute; right:54px; bottom:-123px;}
.main .importance a {position: relative;display: inline-block; margin-top:24px; padding:13px 27px;text-align:center; font-size:16px; font-weight:700; color: #4e008c; background-color: #ffd500; border-radius:8px; transition: all .3s ease;overflow: hidden;}
.main .importance a:after{content: '';position: absolute;right: -30px;bottom:-115px;width: 200px;height: 100px;background-color: #4d008b;transform: rotate(-12deg);transition: all .3s ease;}
.main .importance a:hover:after{bottom:-100px;}

/* 2021-12-21 메인 비주얼 슬라이드 추가 */
.visual_wrap{margin-top: 30px;}
.visual_wrap h2{position: absolute;top: 0;left: 0;font-size: 67px;letter-spacing: -3px;line-height: 64px;z-index: 9;}
.visual_wrap h2 span{display:block;}
.visual_slide{width: 100%;overflow: hidden;}
.visual_slide .swiper-slide{background-color: #fff;opacity:0 !important;}
.visual_slide .swiper-slide.swiper-slide-active{opacity:1 !important;}
.visual_slide .swiper-slide .text{float: left;margin-top: 150px;}
.visual_slide .swiper-slide .text h3{font-size: 18px;color: #000;line-height: 26px;}
.visual_slide .swiper-slide .text h3 span{position:relative;font-size: 24px;vertical-align: baseline;}
.visual_slide .swiper-slide .text h3 span::before{display:block;content:'';position:absolute;bottom:-5px;left:0;width:100%;height:16px;background-color: #4e008c;opacity:0.2;z-index: -1;}
.visual_slide .swiper-slide .text ul{margin-top: 24px;}
.visual_slide .swiper-slide .text ul li{position:relative;padding-left: 16px;font-size: 18px;color: #565656;line-height: 32px;}
.visual_slide .swiper-slide .text ul li::before{display:block;content:'';position: absolute;top: 13px;left: 0;width: 2px;height: 2px;border-radius: 50%;background-color: #fff;border: 2px solid #565656;}
.visual_slide .swiper-slide .text ul li em{color:#7e33a4;}
.visual_slide .swiper-slide .img{float: right;max-width: 550px;}
.visual_slide .swiper-pagination2{position: relative;text-align: center;z-index: 1;}
.visual_slide .swiper-pagination2 .swiper-pagination-bullet{width: 12px;height: 12px;background: #ebe9eb;opacity: 1;border-radius: 30px;transition-duration: 0.3s;}
.visual_slide .swiper-pagination2 .swiper-pagination-bullet-active{width: 36px;background:#ffd500;}

.visual_teacher_slide{position: relative;top: -9px;max-width:1100px;height:190px;margin: 0 auto;border-radius: 12px;background-color: rgba(255,215,0,0.9);}
.visual_teacher_slide .swiper-slide{opacity:0 !important;}
.visual_teacher_slide .swiper-slide.swiper-slide-active{opacity:1 !important;}
.visual_teacher_slide .swiper-slide .text{position: absolute;top: 24px;left: 24px;color: #4e008c;z-index: 1;}
.visual_teacher_slide .swiper-slide .text span{display: block;margin-bottom: 8px;font-size: 16px;letter-spacing: -2px;font-weight: 700;}
.visual_teacher_slide .swiper-slide .text strong{font-size: 40px;letter-spacing: -2px;}
.visual_teacher_slide .swiper-slide .img{position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);display: block;margin:0 auto;}
.visual_teacher_slide .swiper-control{position: absolute;top: 24px;right: 24px;z-index: 9;}
.visual_teacher_slide .swiper-control > div{display: inline-block;width:32px;height:32px;background:url("../images/icon_swiper_arrow_pc.png") no-repeat 0 0;cursor: pointer;}
.visual_teacher_slide .swiper-control > .swiper-button-prev2{background-position: -32px 0;}

.main .questions { padding:380px 0 210px;margin-top: -270px;}
.main .questions .qbody { padding:0 25px 0 213px;}
.main .questions ul { clear: left; overflow: hidden; margin-top: -20px;}
.main .questions ul li { float: left; position: relative; width:50%; margin-top:80px; padding-left:67px; font-size: 24px;}
.main .questions ul li img { position: absolute; left: 0; top:0;}
.main .questions ul li p { line-height: 28px;}
.main .questions ul li .strong { font-size: 24px; font-weight:700; color: #ffd700;}
.main .questions ul li .strong +p { margin-top: 8px; font-size: 18px;color: #fff;}

.main .answer { padding: 80px 0;}
.main .answer .qbody { padding:30px 0 0 212px;}
.main .answer .qbody p { width:438px; margin-top:30px; font-size: 18px; color: #565656; line-height:32px;}
.main .answer img { position: absolute; right:0; top:0;}

.main .joy1 { padding:220px 0 170px;}
.main .joy1 .jua { margin-top:50px; font-size: 80px; font-weight:300; text-align:center; line-height: 1;}
.main .joy1 .joy_body { background: url(../images/main_joy1_bg.png) no-repeat center 117px;}
.main .joy1 .twins { clear: both; overflow: hidden; margin-top: 100px; padding:0 90px;}
.main .joy1 .twins .online { float: left; width:48%;}
.main .joy1 .twins .online dt { background-color: #4e008c; border-radius: 50px 135px 135px 50px;}
.main .joy1 .twins .online dt span { color:#4e008c; background-color: #ffd700;}
.main .joy1 .twins .online dt p { color: #fff;}
.main .joy1 .twins .offline { float: right; width:48%;}
.main .joy1 .twins .offline dt { text-align:right; background-color: #fff; border-radius: 135px 50px 50px 135px;}
.main .joy1 .twins .offline dt span { color:#fff; background-color: #4e008c;}
.main .joy1 .twins .offline dt p { color: #4e008c;}
.main .joy1 .twins .offline dd { text-align:right;}
.main .joy1 .twins dt { min-height:270px; padding:50px 60px 10px;}
.main .joy1 .twins dt span { display:inline-block; width:147px; height: 32px; padding-top:7px; font-size:16px; text-align:center; letter-spacing:3px; border-radius:16px;}
.main .joy1 .twins dt p { margin-top:35px; font-size: 24px; line-height: 32px;}
.main .joy1 .twins dd { margin-top:30px; padding:0 52px; font-size: 18px; color: #565656; line-height: 28px;}

.main .joy2 .st { margin:20px 0 35px; font-size: 24px; color:#000; text-align:center; line-height: 30px;}
.main .joy2 .joy_titure { overflow:hidden; position:relative; height:439px; margin-top: 20px;}
.main .joy2 .joy_titure .left { float: left; position: relative; width:48%;}
.main .joy2 .joy_titure .left img { width:380px; height: auto;}
.main .joy2 .joy_titure .left .poa { position: absolute; right:0; top:50px; width:280px;}
.main .joy2 .joy_titure .left .poa .title { font-size: 29px; font-weight:700; color: #4e008c; text-align: right; line-height:1.2; text-shadow:3px 3px #ffd500;}
.main .joy2 .joy_titure .left .poa .subject { margin-top:9px; font-size: 18px; color: #4e008c; text-align: right;}
.main .joy2 .joy_titure .left .poa .name { font-size: 30px; text-align: right;}
.main .joy2 .joy_titure .right { position: absolute; right:0; top:0; width:48%; padding-top: 60px; }
.main .joy2 .joy_titure .right .r_frame { position: relative; padding-bottom:56.25%;}
.main .joy2 .joy_titure .right iframe { position: absolute; width: 100%; height: 100%;}
.main .joy2 .joy_titure .target { clear: both; overflow: hidden; position: relative;}
.main .joy2 .joy_titure .target >div { display: none;}
.main .joy2 .joy_titure .target >div.active { display: block;}

.main .joy2_list { padding:15px 0 0; background: linear-gradient(to bottom,  #e9eded 0%,#fff 100%);}
.main .joy2_list .main_tab { clear: left; overflow: hidden;}
.main .joy2_list .main_tab li { float: left; margin-right:5px;}
.main .joy2_list .main_tab li a { height:30px; padding:0 7px; font-size: 16px; color: #4e008c; line-height: 29px;}
.main .joy2_list .main_tab li a.active { height:28px; line-height: 27px; border:1px solid #4e008c; border-radius:6px;}
.main .joy2_list .target { margin-top: 30px; }
.main .joy2_list .swiper-container1,
.main .joy2_list .swiper-container2,
.main .joy2_list .swiper-container3,
.main .joy2_list .swiper-container4,
.main .joy2_list .swiper-container6 { overflow: hidden; position: relative;}
.main .joy2_list .swiper-slide { border:4px solid #4e008c; border-radius:10px;}
.main .joy2_list .swiper-slide figure { overflow:hidden; /*height: 150px;*/ text-align: center;background-color: #dedede;border-radius: 6px 6px 0 0;overflow:hidden;}
.main .joy2_list .swiper-slide figure img { width: 100%; height: auto;}
.main .joy2_list .swiper-slide .textbox { min-height:125px; padding:16px; background-color: #4e008c;}
.main .joy2_list .swiper-slide .t { font-size: 14px; color: #ccc;}
.main .joy2_list .swiper-slide .n { font-size: 18px; font-weight:700; color: #fff; line-height: 1.3;}
.main .joy2_list .swiper-slide .s { font-size: 16px; color: #ffd500;}
.main .joy2_list .swiper-slide a { display: block;}
.main .joy2_list .bn,
.main .joy2_list .bp { position: absolute; top:-1px; width:33px; height:29px; padding-top:3px; text-align:center; border:1px solid #4e008c; cursor: pointer;}
.main .joy2_list .bp { right:33px; border-right:none; border-radius:8px 0 0 8px;}
.main .joy2_list .bp i { display:inline-block; width:10px; height: 21px; margin-left:-5px; background: url(../images/main_swipe_prev.png) no-repeat;}
.main .joy2_list .bn { right:0; border-left:none; border-radius: 0 8px 8px 0;}
.main .joy2_list .bn i { display:inline-block; width:10px; height: 21px; margin-right:-6px; background: url(../images/main_swipe_next.png) no-repeat;}
.main .joy2_list .target >div { display: none;}
.main .joy2_list .target >div.active { display: block;}

.main .joy3 { padding:220px 0 270px;}
.main .joy3 .title { margin-top: 115px; text-align: center;}
.main .joy3 .title span { display:inline-block; font-size: 110px; font-weight: 700; line-height: 110px;}
.main .joy3 .title .bcg { margin-right:-45px; padding:45px 75px; color:#ffd700; background-color: #4e008c;  border-radius:100px;}
.main .joy3 .title .round { padding:39px 75px; color:#4e008c; border:6px solid #4e008c; border-radius:100px;}
.main .joy3 .title p { margin-top:8px; font-size: 60px; font-weight: 700; color: #4e008c;}
.main .joy3 .joy_list { clear: left; overflow: hidden; margin:100px 0 0 -2%;}
.main .joy3 .joy_list li { float: left; width:23%; margin-left: 2%;}
.main .joy3 .joy_list li dt { padding:24px 0; font-size:24px; font-weight:700; text-align:center; line-height: 40px; border-radius:10px;}
.main .joy3 .joy_list li dt +dd { min-height: 110px;}
.main .joy3 .joy_list li dd { margin-top:26px; font-size: 16px; color: #565656; text-align: center; line-height: 25px;}
.main .joy3 .joy_list li dd.o { padding-top: 4px;}
.main .joy3 .joy_list li dd.t { padding-top: 18px;}
.main .joy3 .joy_list li dd.f { padding-top: 4px;}
.main .joy3 .joy_list li.purple dt { color:#fff; background-color: #4e008c;}
.main .joy3 .joy_list li.white dt { color: #4e008c; background-color: #fff;}

.main .joy4 .twins { clear: both; overflow: hidden; margin-top: 80px;}
.main .joy4 .twins .left { float: left; padding-top: 25px;}
.main .joy4 .twins .right { float: right; width: 40%;}
.main .joy4 .twins .right dt { font-size: 32px; font-weight:700; color: #4e008c;}
.main .joy4 .twins .right dd { margin-top:20px; font-size: 18px; color: #565656; line-height:28px;}
.main .joy4 .twins .right dd span { color: #000; font-weight:700; vertical-align: baseline;}
.main .joy4 .joybox { clear: both; overflow: hidden; margin-top:20px; padding:42px 50px 55px; background-color: #ffd700; border-radius:25px;}
.main .joy4 .joybox .left { float: left; width:50%; font-size: 24px; font-weight: 700; color: #4e008c; line-height: 32px;}
.main .joy4 .joybox .right { float: right;  width:50%; padding-left:60px; font-size: 24px; font-weight: 700; color: #4e008c; line-height: 32px;}

.main .cheerup { padding:120px 0 90px; background: url(../images/main_joy4_bg.png) no-repeat center 60px;}
.main .cheerup .tier { font-size:145px; color: #ffd500; text-align: center;}
.main .cheerup .tier .up { position:relative; margin-left: 57px;}
.main .cheerup .cheer { margin-top:-89px; font-size:145px; color: #4e008c; text-align: center;}
.main .cheerup .cheer .up { margin-left: 45px;}
.main .cheerup .tup { width:550px; margin: 5px auto 0; font-size: 25px; color: #000; line-height: 1.3;}
.main .cheerup .program { clear: both; overflow: hidden; position: relative; margin-top: 30px; padding-bottom: 20px;}
.main .cheerup .program .title { font-size: 56px; font-weight:900; color: #4e008c;}
.main .cheerup .program .bt { margin-top:5px; font-size: 20px; color: #000;}
.main .cheerup .program .st { margin-top:45px; font-size: 16px; color: #565656; line-height: 1.9;}
.main .cheerup .program .point { font-size: 18px; font-weight:700; color: #4e008c;}
.main .cheerup .img { position: absolute; right: 0; bottom:0;}
.main .cheerup .text_guide { margin-top:80px; padding:90px 100px; text-align:center; background-color: #ffd700; border-radius:55px;}
.main .cheerup .text_guide figure { border:5px solid #fff; border-radius:40px;}
.main .cheerup .text_guide figure img.only_pc{max-width:100%;}
.main .cheerup .out { font-size: 76px; color: #4e008c; text-align:center; line-height: 1;}

.main .space .blackhansans { text-align: center;}
.main .space .space_body { clear: both; overflow: hidden; margin-top: 80px;}
.main .space .space_body .left { float: left; width:550px;}
.main .space .space_body .right { float: right; width:500px;}
.main .space .space_body .right .top { font-size: 18px; font-weight:700; color: #4e008c;}
.main .space .space_body .right .mt { font-size: 56px; font-weight:700; color:#000; line-height: 1.2;}
.main .space .space_body .right .txt { margin-top:20px; font-size: 20px;}
.main .space .space_body .right a { display: inline-block; margin-top:45px; padding:15px 50px; font-weight:700; color: #4e008c; border:2px solid #a177c2; border-radius:10px;}

.main .swiper-container-view { overflow: hidden; position: relative;}
.main .swiper-slide img { width:100%; height: auto;}
.main .swiper-container-view .swiper-button-next:after,
.main .swiper-button-prev:after { color: #ffd500;}

.main .space .swiper-button-prev { left:28px;}
.main .space .swiper-button-next { right:28px;}

/* 실시간 강의
**********************************************/
.main .live_lecure{position: relative;max-width: 1100px;margin: 0 auto;padding-top: 24px;z-index: 9;}
.main .live_lecure .live_list > li{position: relative;height:100px;margin-right:0 !important;box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.05);border-radius: 8px;}
.main .live_lecure .live_list > li:after{display: block;content: '';clear: both;}
.main .live_lecure .live_list > li .picture{position: absolute;left: 16px;top: 50%;transform: translateY(-50%);z-index: 9;}
.main .live_lecure .live_list > li .picture .picimg{position: relative;width: 84px;height: 84px;padding: 4px;border-radius: 50%;background-color: #fff;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);}
.main .live_lecure .live_list > li .picture .picimg .liveAni{position: absolute;top: 4px;left: 4px;width: 76px;height: 76px;}
.main .live_lecure .live_list > li .picture .picimg .liveAni:before{display:block;content:'';width: 100%;height: 100%;background: #4E008E;opacity: 0.4;border-radius: 50%;}
.main .live_lecure .live_list > li .picture .picimg .liveAni .bar{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 22px;height: 12px;}
.main .live_lecure .live_list > li .picture .picimg .liveAni .bar i { display: block; position: absolute; top: 4px; width: 3px; height: 4px; background: #FFD700; animation: audio-wave 1s infinite ease-in-out;}
.main .live_lecure .live_list > li .picture .picimg .liveAni .bar i:nth-child(2) { animation: audio-wave2 1s infinite ease-in-out; left: 6px;height: 8px; animation-delay: 0.2s;}
.main .live_lecure .live_list > li .picture .picimg .liveAni .bar i:nth-child(3) { animation: audio-wave3 1s infinite ease-in-out; left: 12px;height: 12px; animation-delay: 0.4s;}
.main .live_lecure .live_list > li .picture .picimg .liveAni .bar i:nth-child(4) { animation: audio-wave2 1s infinite ease-in-out; left: 18px;height: 8px; animation-delay: 0.6s;}
.main .live_lecure .live_list > li .picture .picimg .liveAni .bar i:nth-child(5) { animation: audio-wave 1s infinite ease-in-out; left: 24px;height: 4px; animation-delay: 0.8s;}
@keyframes audio-wave {
    0% { top: 4px; height:4px;}
    25% { top: -4px; height:20px;}
    50% { top: 4px; height:4px;}
    100% {top: 4px; height:4px;}
}
@keyframes audio-wave2 {
    0% { top: 2px; height:8px;}
    25% { top: -4px; height:20px;}
    50% { top: 2px; height:8px;}
    100% { top: 2px; height:8px;}
}
@keyframes audio-wave3 {
    0% {top: 0; height:12px;}
    25% { top: -4px; height:20px; }
    50% {top: 0; height:12px;}
    100% { top: 0;height:12px;}
}
.main .live_lecure .live_list > li .picture .picimg img{width: 100%;height: auto;border-radius: 50%;}
.main .live_lecure .live_list > li .live_info{position: absolute;top: 50%;left: 117px;transform: translateY(-50%);width: 70%;padding: 0;font-weight: bold;line-height: 140%;z-index: 9;}
.main .live_lecure .live_list > li .live_info .time{margin-right:8px;color: #4E008E;}
.main .live_lecure .live_list > li .live_info .name{display:inline-block;margin-right:16px;color: rgba(0, 0, 0, 0.38);}
.main .live_lecure .live_list > li .live_info .text{width: 70%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.main .live_lecure .live_list > li .file_wrap{position: absolute;right: 16px;top: 0;height: 100px;z-index: 9;}
.main .live_lecure .live_list > li .file_wrap .file_btn{line-height: 100px;cursor: pointer;}
.main .live_lecure .live_list > li .file_wrap .file_btn i{position: relative;top: 34px;display: inline-block;float: left;width:36px;height:36px;background:url("../images/ico_file3.png");}
.main .live_lecure .live_list > li .file_wrap .file_btn span{display: inline-block;margin-left: 4px;line-height: 36px;font-size: 12px;color: rgba(0, 0, 0, 0.58);}
.main .live_lecure .live_list > li .file_wrap:hover .file_list{display:block;}
.main .live_lecure .live_list > li .file_wrap:hover{z-index: 99;}

.main .live_lecure .now_live .now_live_list > li{background-color: #FFD700;overflow: hidden;}
.main .live_lecure .now_live .now_live_list > li:after{position: absolute;bottom: -43px;left: 0;display:block;content:'';width: 100%;height: 43px;background:url("../images/live_bg.png");transition: all .3s ease;}
.main .live_lecure .now_live .now_live_list > li:hover:after{bottom:0;}
.main .live_lecure .now_live.swiper-container{padding-bottom: 34px;}
.main .live_lecure .now_live .swiper-pagination{display: none;bottom:12px;}
.main .live_lecure .now_live.swiper-container .swiper-pagination{display:block;}
.main .live_lecure .now_live .swiper-pagination .swiper-pagination-bullet{width: 6px;height: 6px;background: rgba(0, 0, 0, 0.3);opacity: 0.78;}
.main .live_lecure .now_live .swiper-pagination .swiper-pagination-bullet-active{background: #FFD700;}

.main .live_lecure .later_live{opacity: 0.38;}
.main .live_lecure .later_live .later_live_list > li{background-color: #ddd;margin-bottom:8px;}
.main .live_lecure .later_live .later_live_list > li:last-child{margin-bottom:0;}
.main .live_lecure .later_live .file_list{top: 76px;right:0;}

.main .live_lecure .file_list{display: none;position: absolute;top: 100px;right: 8px;width: 150px;padding: 25px 30px;background-color: #fff;border: 1px solid #ddd;box-sizing: border-box;box-shadow:  0px 4px 8px rgba(0, 0, 0, 0.12);border-radius: 8px;color: rgba(0, 0, 0, 0.58);z-index: 99;}
.main .live_lecure .file_list > li{margin-bottom:10px;font-size: 12px;color: rgba(0, 0, 0, 0.58);}
.main .live_lecure .file_list > li:last-child{margin-bottom:0;}
.main .live_lecure .file_list > li > a{text-decoration: underline;}


/* 고1, 고2, 고2, 배즐 특강, 배즐 핀셋 공통
**********************************************/

.lecture h4 { position: relative; margin:30px 0 10px; font-size: 15px;}
.lecture .h4 p { position: absolute; right: 0; top: 0;}

/* 배즐특강 3차메뉴 */
.depth3_menu { padding:10px 0 20px; border-top: 2px solid #000; border-bottom: 2px solid #eee;}
.depth3_menu ul { clear: left; overflow: hidden;}
.depth3_menu ul li { display: none;  float: left; margin-top: 10px;}
.depth3_menu ul li.show { display: block;}
.depth3_menu ul li a { display:inline-block; margin-right:10px; padding:8px 15px; font-weight:700; background-color: #ffd500; border-radius:15px;}
.depth3_menu ul li a.active { color:#fff; background-color: #4e008c;}

/* 정렬 */
.cbox { position:relative; padding: 15px 0; border-top:1px solid #444;}
.cbox span { margin-right: 33px; font-size: 14px; font-weight: bold;}
.cbox label { margin-right: 23px;}
.cbox select { position: absolute; right:0; top:50%; min-width:140px; margin-top: -20px;}

/* 수강후기 */
.hschool .plist >li { position: relative; padding: 10px 0; border-top: 1px solid #dedede;}
.hschool .plist >li:first-child { border-top: 0;}
.hschool .plist >li .info { position: relative; padding:3px 0 0 54px;}
.hschool .plist >li .info >img { position: absolute; left:0; top:0;}
.hschool .plist >li .info .t { font-size: 15px;}
.hschool .plist >li .info .t .inapprovable { margin-left: 4px; padding: 4px 7px; font-size: 12px; color: #fff; background-color: #e2574c; border-radius: 4px;}
.hschool .plist >li .info .estimation { margin-top: -2px;}
.hschool .plist >li .info .estimation span { font-size: 18px; color: #dedede;}
.hschool .plist >li .info .estimation span.choice { color:#ff7531;}
.hschool .plist >li >p { margin-top: 11px; color: #666;}
.hschool .plist >li >a { margin-top: 5px;}
.hschool .plist >li >a span { font-weight: bold; color: #0e6eb8;}
.hschool .plist >li .option { position: absolute; right: 0; top: 4px;}
.hschool .plist >li .option >button { padding: 10px;}
.hschool .plist >li .option .alert { position: absolute; right: 22px; top: 10px; z-index: 10; width: 80px; border:1px solid #858585; background-color: #fff; box-shadow:0px 10px 10px rgba(0, 0, 0, .3);}
.hschool .plist >li .option .alert li a { display: block; padding:10px; text-align: left; border-top: 1px solid #c2c2c2;}
.hschool .plist >li .option .alert li:first-child a { border-top: none;}
.hschool .plist >li .option .alert li a:hover { color: #222; background-color: #ececec;}
.hschool .plist >li .reason { margin-top: 6px; padding: 7px 10px 11px; background-color: #f4f5f7;}
.hschool .plist >li .reason .t { font-size: 15px;}
.hschool .plist >li .reason .sub { margin-top: 1px; color: #666;}





/* 배즐 선생님
**********************************************/
.teacher .feature { min-height: 145px; padding: 20px 30px; background-color: #342728;}
.teacher .feature .left { width: 490px; color: #fff;}
.teacher .feature .right { width: 490px; color: #87bd43;}
.teacher .feature .t { padding-bottom: 4px; font-size: 16px; font-weight: bold;}
.teacher .feature .s { margin-top: 14px;}
.teacher .feature .s li { margin-top: 4px; line-height: 18px;}
.teacher .feature .left .t { border-bottom: 1px solid #fff;}
.teacher .feature .right .t { border-bottom: 1px solid #87bd43;}
.teacher .tiacher_info { position: relative;}
.teacher .tiacher_info .ti_body { position: absolute; z-index: 2;}
.teacher .tiacher_info .ti_body .ti_header { position: relative;}
.teacher .tiacher_info .ti_body .ti_header h2 { display:inline-block; position:relative; padding-bottom:5px; font-size: 24px; color: #0e6eb8;}
.teacher .tiacher_info .ti_body .ti_header h2 span { position:absolute; left:0; bottom:0; width:100%; height:1px; background: #0e6eb8; box-shadow: 3px 5px 5px rgba(0,0,0,0.5);}
.teacher .tiacher_info .ti_body .ti_header .ti_profile { position: absolute; right:-263px; top:-68px; z-index:-1;  width:255px; font-size:16px; color:#50502a; opacity:0; transition:all .3s ease;}
.teacher .tiacher_info .ti_body .ti_header .ti_profile.active { z-index:9999;  opacity:1;}
.teacher .tiacher_info .ti_body .ti_header .ti_profile .ti_top { padding:20px 20px 0 35px; background: url(../images/teacher_layer_top.png) no-repeat left top;}
.teacher .tiacher_info .ti_body .ti_header .ti_profile .ti_top .ti_profile_img { height: 29px; background: url(../images/teacher_profile.png) no-repeat;}
.teacher .tiacher_info .ti_body .ti_header .ti_profile .ti_top .ti_profile_close { display:none; position: absolute; right:27px; top:17px; width:15px; height:15px; padding:15px; text-indent: -9999px; background: url(../images/teacher_layer_close.png) no-repeat center center;}
.teacher .tiacher_info .ti_body .ti_header .ti_profile .ti_top p { margin-top:11px; font-size:13px; line-height: 20px;}
.teacher .tiacher_info .ti_body .ti_header .ti_profile .ti_top ul { margin-top: 20px;}
.teacher .tiacher_info .ti_body .ti_header .ti_profile .ti_top ul li { font-size:13px; line-height: 20px;}
.teacher .tiacher_info .ti_body .ti_header .ti_profile .ti_bottom { height: 44px; background: url(../images/teacher_layer_bottom.png) no-repeat;}
.teacher .tiacher_info .ti_body .ti_name { margin-top: 10px;}
.teacher .tiacher_info .ti_body .ti_name h3 { display: inline-block; font-size: 35px; vertical-align: bottom;}
.teacher .tiacher_info .ti_body .ti_name sub { display: inline-block; font-size: 29px; vertical-align: bottom;}
.teacher .tiacher_info .ti_body .ti_name .ti_por { display: inline-block; position: relative; vertical-align: bottom;}
.teacher .tiacher_info .ti_body .ti_name .ti_por .ti_profile_btn { position:relative; margin: 0 0 -2px 8px; padding:6px 15px; font-size:16px; font-weight:bold; color:#fff; vertical-align: bottom; background: #1847f7; border-radius: 5px 5px 0 5px;}
.teacher .tiacher_info .character_body { position: absolute; z-index: 1;}
.teacher .tiacher_info .character_body .slides li { display: none;}
.teacher .flexslider { background: transparent;}
.teacher .flexslider .flex-control-nav { bottom:13px; z-index: 10;}
.teacher .flexslider .flex-control-paging li a { border:1px solid rgba(255,255,255,0.6);}

.teacher .title_bg { overflow:hidden; position:relative; height:505px; padding-top:59px; background: #ffd500; text-align: center;}
.teacher .title_bg .picture_img { position: absolute; left:50%; bottom:0; transform:translate(-50%, 0);}

.teacher .tec_info { padding-top:58px; text-align:center; background-color: #ffd500;background: linear-gradient(#fcd700, #fcca00);}
.teacher .tec_info >img {max-width: 100%;margin-top: 24px;}
.teacher .ti_text{font-size:24px;font-family:'Black Han Sans','Apple SD Gothic Neo','돋움',dotum, sans-serif;color: #4e008c;}
.teacher .tec_ani { overflow:hidden; position:relative; height: 90px;}
.teacher .tec_ani span { display:block; font-family:'Black Han Sans','Apple SD Gothic Neo','돋움',dotum, sans-serif; font-size:64px; font-weight:normal; color: #fff;} 
.teacher .tec_ani span i{font-family: 'Noto Sans KR','Apple SD Gothic Neo','돋움',dotum, sans-serif;font-style: normal;font-weight: bolder;}
.teacher .tec_ani sub { font-size: 40px; color: #4e008c; line-height: 40px;}
.teacher .swiper-slide-active .tec_ani .ta_1 { position:absolute; left:50%; top:50%; width:100px; height:2px; margin-top:15px; background-color: #fff; opacity:0; animation: ta_1 1s 0.5s ease; transform:translate(-50%, 0);}
@keyframes ta_1 {
	0% { width:100px; opacity:1;}
	40%{	width:0; opacity:1;}
    80% { width:100px; opacity:1;}
    100% { opacity:0;}
}
.teacher .swiper-slide-active .tec_ani .ta_2 img {display:inline-block; position:absolute; left:50%; bottom:120px; width:80px; height:35px; margin-left:-40px; animation: ta_2 2s 1.2s ease;}
@keyframes ta_2 {
    0%   { width:80px; height:0; bottom:38px;}
    10%  { width:80px; height:45px; bottom:38px;}
    20%  { width:80px; height:45px; bottom:38px;}
    40%  { width:80px; height:35px; bottom:38px;}
    60%  { width:80px; height:45px; bottom:38px;}
    80% { width:80px; height:35px; bottom:38px;}
    100% { bottom:120px;}
}

.teacher .swiper-slide-active .tec_ani .text { position:absolute; left:50%; top:50%; width:100%; transform:translate(-50%, 90%);}
.teacher .swiper-slide-active .tec_ani .ta_3 { animation: text 1.5s 3s ease;}
.teacher .swiper-slide-active .tec_ani .ta_4 { position:absolute; left:50%; top:50%; width:100%; animation: ta_9 1.5s 3s ease forwards; transform:translate(-50%, 90%);}
/* .teacher .tec_ani .ta_4 { animation: text 1.5s 4.2s ease;}
.teacher .tec_ani .ta_5 { animation: text 1.5s 5.4s ease;}
.teacher .tec_ani .ta_6 { animation: text 1.5s 6.6s ease;}
.teacher .tec_ani .ta_7 { animation: text 1.5s 7.8s ease;}
.teacher .tec_ani .ta_8 { animation: text 1.5s 9s ease;}
.teacher .tec_ani .ta_9 { position:absolute; left:50%; top:50%; width:100%; animation: ta_9 1.5s 10.2s ease forwards; transform:translate(-50%, 90%);}*/
@keyframes text {
    0%   { transform:translate(-50%, 90%);}
    20%  { transform:translate(-50%, -40%);}
    70%  { transform:translate(-50%, -40%);}
    100% {transform:translate(-50%, -160%);}
}
@keyframes ta_9 {
    0%   { transform:translate(-50%, 90%);}
    20%  { transform:translate(-50%, -40%);}
    100%  { transform:translate(-50%, -40%);}
}
.teacher .swiper-pagination .swiper-pagination-bullet{width: 12px;height: 12px;background: #fff;opacity: 1;border-radius: 30px;transition-duration: 0.3s;}
.teacher .swiper-pagination .swiper-pagination-bullet-active{width: 30px;background:#ffd500;}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom: 30px;}





/* 고객센터
**********************************************/
.cs .btns { text-align:center;}
.cs .btns button { width:120px; height: 36px; margin:0 3px; font-weight:700; color: #fff; border-radius: 8px;}
.cs .btns button.gray { background-color: rgba(0,0,0,0.38);}
.cs .btns button.gray:hover { text-decoration: underline;}
.cs .btns button.blue { background-color: #4E008E;}
.cs .btns button.blue:hover { text-decoration: underline;}

.coupon { position: relative;}
.coupon .coupon_layer { position:absolute; left:0; top:56px; z-index:2; width:100%;}
.coupon .coupon_layer .body { padding:15px 0; text-align:center; border:1px solid #eee; border-top:1px solid #444; background-color: #fff;}
.coupon .coupon_layer .body input { width:400px; height: 40px; margin-top:11px; font-size: 16px; text-align: center; border:1px solid #eee; border-radius:4px;}
.coupon .coupon_layer .btns { padding:30px 0 20px; text-align: center; background-color: #fff;}
.coupon .coupon_layer .btns button { width:120px; height: 36px; margin:0 2px; font-weight:700; color:#fff; border-radius:8px;}
.coupon .coupon_layer .btns button.gray { background-color: rgba(0,0,0,0.38);}
.coupon .coupon_layer .btns button.blue { background-color: #4E008E;}
.coupon_title { position: relative; margin-top: 15px;}
.coupon_regi { display:inline-block; width:120px; height:36px; font-weight:700; color:#fff; background: #4E008E; border-radius:8px;}
.coupon_list { padding:20px 25px; border:1px solid #eee; border-top: 1px solid #444;}
.coupon_list >li { margin-top: 20px;}
.coupon_list >li:first-child { margin-top:0; padding-top:0; border-top:none;}
.coupon_list >li .box { overflow:hidden; position:relative; width:440px; margin:0 auto; padding:25px 0 0 62px; border:1px solid #ddd;}
.coupon_list >li .box h4 { display:table; position: absolute; left:0; top:0; bottom:1px; width:63px; height:100%; background: #4E008E;}
.coupon_list >li .box h4 span { display: table-cell; font-size:16px; color:#fff; text-align:center; letter-spacing:0; vertical-align: middle; line-height: 20px; transform:rotate(-90deg);}
.coupon_list >li .body { text-align: center;}
.coupon_list >li .body .course li { display: inline-block; margin:0 2px; padding:2px 13px; font-size: 12px; font-weight:700; color: #4E008E; border:1px solid #eee; border-radius:4px;}
.coupon_list >li .body .price { margin:17px 0 21px; font-size: 28px; font-weight: 700; color: #4E008E; line-height: 28px;}
.coupon_list >li .body .date { font-size: 11px; color: #4E008E; letter-spacing: 0;}
.coupon_list >li .guide { margin-top:10px; padding: 20px 0; background-color: #F4F1F5;}
.coupon_list >li .guide li { font-size: 12px; color: rgba(0,0,0,0.38); text-align:center; line-height: 16px;}
.coupon_list >li.empth { font-weight:700; color: rgba(0,0,0,0.78);}
.point_guide { margin-top:10px; font-size:12px; line-height: 18px; color: rgba(0,0,0,0.38);}








/* 입시정보
.seed .search select { height: 28px;}
.seed .search input { height: 28px;}
.seed .search .btn { width:29px; height: 28px; margin-left: 3px; background-color: #0e6eb8; border-radius: 3px;}

.seed .article_main_list { position: relative;}
.seed .article_main_list li { margin-top: 25px;}
.seed .article_main_list li:first-child { margin-top: 0;}
.seed .article_main_list li a { display: block; overflow:hidden; max-height: 114px;}
.seed .article_main_list li .subject { display:inline-block; font-size: 18px; line-height: 28px;}
.seed .article_main_list li .text { margin-top: 8px; color:#888; line-height: 25px;}
.seed .article_main_list li .l_date { font-size: 12px; color: #555;}
.seed .article_main_list li .link { position: absolute; right:0; bottom:0;}
.seed .article_main_list li .etc { margin-top: 5px;}
.seed .article_main_list li .etc .left { float: left; font-size: 12px; color: #3483b4;}
.seed .article_main_list li .etc .right { float: right; }
.seed .article_main_list li .etc .right a { display: block; font-size: 12px; color: #3483b4;}
.seed .article_main_list li.thumbnail { position:relative; min-height:130px; margin-top:30px; padding-left: 157px;}
.seed .article_main_list li.thumbnail:first-child { margin-top: 0;}
.seed .article_main_list li.thumbnail img { position: absolute; left: 0; top:0; width: 130px; height: 130px;}
.seed .article_main_list li.thumbnail .subject { margin-top: -5px; line-height: 28px;}
.seed .article_main_list li.thumbnail a { max-height: 108px;}
.seed .stack { clear: both; overflow: hidden; margin-top: 30px; font-size: 12px;}
.seed .stack span { display:inline-block; padding-top:2px; vertical-align: middle;}
.seed .stack .left { float: left;}
.seed .stack .right { float: right;}
.seed .stack .right select { height: 20px; font-size: 12px;}
.seed .vcon { padding: 30px 20px;}
.seed .vcon img { width:inherit !important; height:inherit !important; max-width: 100%;}

.n_pagenum { position:relative; height:24px; text-align: center;}
.n_pagenum .poal { position: absolute; left: 0; top: 0;}
.n_pagenum .poal input { display:inline-block; width:156px; height: 24px; vertical-align:middle;}
.n_pagenum .poal button { display:inline-block; width:24px; height:24px; margin-left:2px; vertical-align:middle; background-color: #428cb9;}
.n_pagenum .poal button img { width:24px; height: 24px;}
.n_pagenum .poar { position: absolute; right: 0; top: 0;}
.n_pagenum .poar a:hover { text-decoration: underline;}
.n_pagenum a { font-size: 12px;}
.n_pagenum a.nolink { color: #929292;}
.n_pagenum >a { margin: 0 13px;}
.n_view { padding-top:10px;}
.n_view .date { font-size: 12px; color: #555; text-align: right;}
.n_view .title { margin-top:20px; font-size: 24px; color:#222; text-align: center;}
.keyword { clear: left; overflow: hidden; margin-top: 40px;}
.keyword li { float: left; margin-left: 15px;}
.keyword li a { display: inline-block; padding:5px 10px; font-size:13px; background-color: #f2f2f2;}
.keyword li:first-child { margin-left: 0;}

.dn { position:relative; padding:10px 0 10px 65px; font-size:13px; border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3;}
.dn div.vam { position: absolute; left:10px; top:13px;}
.dn img { width:14px; height:auto; margin-top:-2px; vertical-align: middle;}
.dn ul li { margin-top: 5px;}
.dn ul li:first-child { margin-top: 0;}
.dn ul li a { display:inline-block; font-size:13px; color: #136da2;}
**********************************************/









/* 동영상 플레이어
**********************************************/
.movie_popup { overflow: hidden;}
.movie_popup #wrap { height: 100%;}
/* 동영상 플레이어 */
.video { min-width: 850px; height: 100%; padding-right: 400px;}
.video.fullscreen { min-width: 100%; padding-right:0;}
.video .plyer { height: 100%; padding: 3px; color: #fff; border: 1px solid #000; background-color: #202028;}
.video .plyer .box { position: relative; height: 100%; padding: 43px 0 40px; border: 1px solid #0f0f13;}
.video .plyer .box .controls {  position: absolute; left: 0; bottom: 0; width: 100%; padding: 10px 10px 11px; border-top: 1px solid #0f0f13;}
.video .plyer .box .controls .catalog { color: #727277;}
.video .plyer .box .controls .catalog .prev { width: 66px; height: 12px; text-indent: -99999px; background: url(../images/video_prev.png) no-repeat;}
.video .plyer .box .controls .catalog .prev:hover { background-position: 0 -12px;}
.video .plyer .box .controls .catalog .next { width: 64px; height: 12px; text-indent: -99999px; background: url(../images/video_next.png) no-repeat;}
.video .plyer .box .controls .catalog .next:hover { background-position: 0 -12px;}
.video .plyer .box .controls .links .btn_qna { width: 75px; height: 17px; text-indent: -99999px; background: url(../images/ico_video.png) no-repeat;}
.video .plyer .box .controls .links .btn_qna:hover { background-position: 0 -17px;}
.video .plyer .box .controls .links .btn_bookmark { width: 51px; height: 15px; text-indent: -99999px; background: url(../images/ico_video2.png) no-repeat;}
.video .plyer .box .controls .links .btn_bookmark:hover { background-position: 0 -15px;}
.video .plyer .box .controls .links .btn_quality { font-size: 12px; color: #f7f7f7;}
.video .plyer .box .controls .links .btn_quality .ico_l { width: 17px; height: 17px; margin-right: 5px; text-indent: -99999px; background: url(../images/ico_video3.png) no-repeat;}
.video .plyer .box .controls .links .btn_quality .ico_r { width: 9px; height: 8px; margin-left: 7px; text-indent: -99999px; background: url(../images/ico_video4.png) no-repeat;}
.video .plyer .box .controls .links .btn_quality:hover { color: #87bd43;}
.video .plyer .box .controls .links .btn_quality:hover .ico_l { background-position: 0 -17px;}
.video .plyer .box .controls .links .btn_quality:hover .ico_r { background-position: 0 -17px;}
.video .plyer .box .controls .links .ib { display: inline-block; position: relative; margin-left: 15px;}
.video .plyer .box .controls .links .ib .select { position: absolute; right: -90px; top: -70px; z-index: 1; width: 80px; border: 1px solid #858585; box-shadow: 8px 8px 8px rgba(0, 0, 0, .3);}
.video .plyer .box .controls .links .ib .select li { border-top: 1px solid #c2c2c2;}
.video .plyer .box .controls .links .ib .select li:first-child { border-top: none;}
.video .plyer .box .controls .links .ib .select li button { display: block; width: 100%; padding: 8px; color: #858585; text-align: left; background-color: #fff;}
.video .plyer .box .controls .links .ib .select li button.active { color: #222; background-color: #ececec;}
.video .plyer .box .controls .links .ib .input_bookmark { position: absolute; left: -174px; top: -3px; width: 235px; background-color: #202028;}
.video .plyer .box .controls .links .ib .input_bookmark input { width: 130px; height: 27px;}
.video .plyer .box .controls .links .ib .input_bookmark button { height: 26px; padding: 0 10px; color: #fff; border-radius: 4px;}
.video .plyer .box .controls .links .ib .input_bookmark button.save { margin-left:1px; background-color: #0e6eb8;}
.video .plyer .box .controls .links .ib .input_bookmark button.close { margin-left:2px; background-color: #666;}
.video .plyer .title { position: absolute; left: 0; top: 0; width: 100%; padding: 9px 9px 15px;}
.video .plyer .title h3 { font-size: 16px;}
.video .plyer .title h3 .color_green { color: #87bd43;}
.video .plyer .movie { height: 100%; /* background-color: #643140; */}

.video .target { height: 100%;}
.video .reason { position: absolute; right: 0; top: 0; width: 400px; height: 100%; padding: 0 18px; border-bottom: 1px solid #eee;}
.video .reason .tab { position: absolute; left: 18px; top: 18px; width: 364px;}
.video .overflow { overflow-x: hidden; overflow-y: scroll; height: 100%; padding-bottom: 10px; border-top: 1px solid #222;}
.video .lecture { height: 100%; padding: 225px 0 50px;}
.video .lecture .name { font-size: 13px; font-weight:700; color: rgba(0,0,0,0.38);}
.video .lecture h3 { overflow: hidden; height: 55px; margin-top:3px; font-size: 18px; font-weight: 700; color: rgba(0,0,0,0.78); line-height: 140%;}
.video .lecture .poa { position: absolute; left: 18px; top: 85px; width: 364px;}
.video .lecture .progress { font-size: 13px; color: rgba(0,0,0,0.38);}
.video .lecture .progress2 { margin-top:5px; font-size: 13px; color: rgba(0,0,0,0.38);}
.video .lecture .list li { position:relative; padding: 20px 20px 20px 63px; border-bottom: 1px solid #eee;}
.video .lecture .list li .spoa { position: absolute; left:10px; top:50%; margin-top: -10px;}
.video .lecture .list li.disable a,
.video .lecture .list li.disable p { color: #aaa;}
.video .lecture .list li .time { margin-top: 4px; font-size: 13px; color: rgba(0,0,0,0.38);}
.video .lecture .list li .v_download { margin-top: 5px;}
.video .lecture .list li .v_download a { margin-right: 3px;}
.video .lecture .list li .pbody >a { display:block; margin-top:4px; line-height: 140%;}
.video .lecture .gray_btn { margin-top:5px; padding: 2px 8px; font-size: 12px; color: #1d2089; border: 1px solid #1d2089; background-color: #ececec; border-radius: 4px;}
.video .lecture .blue_btn { position:absolute; left:10px; bottom:10px; height: 30px; padding: 0 10px; font-size: 12px; color: #fff; background-color: #1d2089; border-radius: 4px;}
.video .lecture .ico { margin-right:4px; padding: 0 7px; border:1px solid #eee; background-color: #F5F5F5;}
.video .lecture .ico.essential { color: #7C4754;}
.video .lecture .ico.samples { color: #527C47;}
.video .lecture .ico.popularity { color: #47567C;}

.video .bookmark { height: 100%; padding-top: 105px;}
.video .bookmark .delete { width: 20px; height: 23px; text-indent: -99999px; background: url(../images/ico_delete.png) no-repeat;}
.video .bookmark .delete:hover { background-position: 0 -23px;}
.video .bookmark .poa { position: absolute; left: 18px; top: 77px; width: 364px;}
.video .bookmark .title { position: relative;}
.video .bookmark .title h3 { font-size: 15px;}
.video .bookmark .title em { margin-left:4px; color: #fd4040;}
.video .bookmark .title em span { display: inherit; vertical-align: inherit;}
.video .bookmark .title .poar { position: absolute; right: 27px; top: -11px;}
.video .bookmark .title .delete { margin-left: 10px;}
.video .bookmark .list li { position: relative; padding: 18px 38px 18px 0; border-bottom: 1px solid #ececec;}
.video .bookmark .list li img { position: absolute; left: 0; top: 50%; margin-top: -23px;}
.video .bookmark .list li .delete { position: absolute; right: 11px; top: 50%; margin-top: -11px;}
.video .bookmark .list li .t { font-size: 14px;}
.video .bookmark .list li .s { font-size: 12px; color: #666;}
.video .movie_qna { height: 100%;}
.video .movie_qna .poa { position: absolute; left: 18px; top: 77px; width: 364px;}
.video .movie_qna .title { position: relative;}
.video .movie_qna .title h3 { font-size: 15px;}
.video .movie_qna .title em { margin-left:4px; color: #fd4040;}
.video .movie_qna .title em span { display: inherit; vertical-align: inherit;}
.video .movie_qna .title .form { position: absolute; right: 27px; top: -2px;}
.video .movie_qna .title .form .btn { height: 26px; margin-left: 2px; padding: 0 10px; color: #fff; border-radius: 4px;}
.video .movie_qna .title .form .btn.blue { background-color: #0e6eb8;}
.video .movie_qna .title .form .btn.gray { background-color: #858585;}
.video .movie_qna .page_number { position: absolute; left: 0; bottom: 15px; width: 364px;}
.video .movie_qna .page_number #btnQnawritepopup { position: fixed; right:18px; top:69px; width: 31px; height: 30px; text-indent:-99999px; background: url(../images/ico_write.png) no-repeat; border-radius:inherit;}
.video .movie_qna  .list { height: 100%; padding: 102px 0 50px;}

.video .list .qna_list { padding-bottom: 10px;}
.video .list .qna_list >ul >li >div { position: relative; padding: 10px; border-bottom: 1px solid #dedede;}
.video .list .qna_list >ul >li .gp img { width: 44px; height: auto;}
.video .list .qna_list >ul >li .owner .gp { font-size: 14px;}
.video .list .qna_list >ul >li .owner .ib { font-size: 12px;}
.video .list .qna_list >ul >li .tcher { border: 1px solid #1d76bb; background-color: #ececec;}
.video .list .qna_list >ul >li .tcher .gp,
.video .list .qna_list >ul >li .tcher .ib { font-size: 14px; color: #1d76bb;}
.video .list .qna_list >ul >li .text { margin-top: 5px; font-size: 12px; color: #666;}
.video .list .qna_list >ul >li .thumbnail { clear: left; overflow: hidden; margin-top: 15px;}
.video .list .qna_list >ul >li .thumbnail li { float: left; width: 30%; margin-right: 10px;}
.video .list .qna_list >ul >li .thumbnail li img { max-width: 100%;}
.video .list .qna_list >ul >li .recommendation { width: 13px; height: 13px; text-indent: -99999px; background: url(../images/ico_recommendation.png) no-repeat; background-size: 13px 31px;}
.video .list .qna_list >ul >li .recommendation.active { background-position: 0 -18px;}
.video .list .qna_list >ul >li .option { position: absolute; right: 10px; top: 20px;}
.video .list .qna_list >ul >li .option >button { padding: 5px;}
.video .list .qna_list >ul >li .option >button img { width: 2px; height: auto;}
.video .list .qna_list >ul >li .option .alert { position: absolute; right: 22px; top: 10px; z-index: 10; width: 110px; border:1px solid #858585; background-color: #fff; box-shadow:0px 10px 10px rgba(0, 0, 0, .3);}
.video .list .qna_list >ul >li .option .alert li a { display: block; padding:10px; color: #858585; text-align: left; border-top: 1px solid #c2c2c2;}
.video .list .qna_list >ul >li .option .alert li:first-child a { border-top: none;}
.video .list .qna_list >ul >li .option .alert li a:hover { color: #222; background-color: #ececec;}
.video .list .qna_list >ul >li .adoption::after { display: block; position: absolute; right: 33px; top: 24px; content: ''; width: 46px; height: 19px; background: url(../images/ico_adoption2.png) no-repeat;}
.video .list .qna_list >ul >li ul li >div { position: relative; padding: 10px; border-bottom: 1px solid #dedede;}
.video .list .qna_list .answer { margin-top: 17px; font-size: 11px;}
.video .write { padding-top: 80px;}
.video .write .field { padding-top: 10px; border-top: 1px solid #222;}
.video .write .field select { width: 100%;}
.video .write .field textarea { width: 100%; height: 310px;}
.video .write .field .files { clear: left; overflow: hidden; margin-top: 10px;}
.video .write .field .files li { float: left; margin-right: 10px;}
.video .write .field .files li img { max-width: 51px; height: auto;}
.video .write .field .files li input { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0);}
.video .write .field .files li .position { position: relative;}
.video .write .field .files li .position .close { position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -9px; padding: 5px; font-weight: bold; color: #fff; text-shadow: 0 1px 2px #000;}
.video .write .field .summary { margin-top: 10px; font-size: 11px; color: #666; line-height: 15px;}
.video .qna >ul >li .option { top:25px; right:4px;}
/* 퀴즈 */
.quiz { position: fixed; left: 0%; top: 0%; width: 100%; height: 100%; background-color: #fff;}
.quiz .qh { position:absolute; left:0; top:0; width:100%; height:22px; background: linear-gradient(to right,  #ced0d1 0%,#bfcbd5 90%,#bbc8d2 100%);}
.quiz .qh h3 { padding: 5px 0 0 16px; font-family: 돋움; font-size: 12px; font-weight: normal;}
.quiz .qh .close { display: block; width: 16px; height: 15px; padding: 16px; text-indent: -99999px; background: url(../images/ico_close4.png) no-repeat center center;}
.quiz .psbody { height:100%; padding: 22px 400px 0 0;}
.quiz .problem { overflow-x: hidden; overflow-y: scroll; height: 100%; padding: 30px 40px;}
.quiz .problem .title .number { margin: 11px 0 0 10px; font-size: 21px; font-weight: bold; color: #0e6eb8;}
.quiz .problem .title .t { margin-top: 6px; padding: 0 20px; font-size: 16px; font-weight: bold;}
.quiz .problem .parea { margin-top: 14px;}
.quiz .problem .parea img { max-width: 100%; height: auto;}
.quiz .problem .item li { margin-top: 20px; font-size: 14px;}
.quiz .problem .item li input[type=text] { width: 100%;}
.quiz .problem .item li img { max-width: 582px;}
.quiz .problem .item li em { display: block; padding-left: 10px;}
.quiz .problem .btn { width: 100%; height: 40px; margin-top: 34px; font-size: 16px; font-weight: bold; color: #fff; background-color: #1d2089; border-radius: 4px;}
.quiz .problem .btn.disable { background-color: #858585;}
.quiz .solution { position:absolute; right:0; top:0; width: 400px; height: 100%; padding: 0 18px; text-align: center; background-color: #f7f7f7;}
.quiz .solution .sbody { position: relative; left:50%; top:50%; transform:translate(-50%, -50%);}
.quiz .solution .sbody .score .t { font-size: 100px; color: #0e6eb8;}
.quiz .solution .sbody .score .s { font-size: 18px; font-weight: bold;}
.quiz .solution .sbody .btn { width: 150px; height: 40px; margin-top: 54px; font-size: 16px; font-weight: bold; color: #fff; background-color: #1d2089; border-radius: 4px;}

















/* 통합 검색
**********************************************/
.se_result .contents >div { margin-top: 15px; padding-bottom: 20px;}
.se_result .result { padding:17px 25px; font-size: 14px; border: 1px solid #eee; border-top:1px solid #444;}
.se_result .result em { font-weight:700; color: #4e008c;}
.se_result h4 { padding: 14px 0; font-size: 16px; line-height:1.4; border-top:1px solid #444; border-bottom: 1px solid #eee;}
.se_result .teacher_info { margin: 0;}
.se_result .teacher_info li { float: inherit; width: 100% !important; margin: 0; border-bottom:1px solid #eee;}
.se_result .teacher_info li a { display: inline-block; position: relative; min-height: 109px; padding: 35px 255px 38px 102px;}
.se_result .teacher_info li a p { text-align: left;}
.se_result .teacher_info li a .s { margin-top: 0; color: rgba(0,0,0,0.38);}
.se_result .teacher_info li a .t { font-size: 16px;}
.se_result .teacher_info li a .picimg { position: absolute; left: 0; top: 50%; width: 84px; height: 84px; margin-top:-42px; padding:4px; border-radius:50%; box-shadow:0 2px 4px rgb(0 0 0 / 8%);}
.se_result .teacher_info li a img { width:100%; height: 100%; border-radius:50%;}
.se_result .more { margin-top: 20px; text-align:center;}
.se_result .more a { width:200px; height:48px; padding-top:14px; font-weight:700; color: #4e008c; border:2px solid #4e008c; border-radius:8px;}











/* 기타
**********************************************/
/* 개인정보처리방침, 이용약관 */
.privacy h3 { margin-top:30px; font-size: 16px; font-weight:bold; text-align: left;}
.privacy p,
.privacy dl { margin-top: 10px;}
.privacy dt,
.privacy dd { line-height: 2;}
.clause h3 { margin-top:30px; font-size: 16px; font-weight:bold; text-align: left;}
.clause h3:first-child { margin-top:0;}
.clause p,
.clause ol { margin-top: 10px;}
.clause ol li { line-height: 2;}

/* Aside */
.aside { position: fixed; left:50%; top:200px; margin-left: 570px;z-index: 99;}
.aside .piggy_mom { display: block; overflow:hidden; position:relative; width:128px; padding:19px 0 28px; text-align:center; border: 1px solid #ddd; background-color:rgba(255,255,255,0.8); border-radius:8px; box-shadow: 0 4px 12px rgba(229, 227, 213, .4);}
.aside .piggy_mom:after { content:''; position: absolute; left:-30px; bottom:-102px; width:200px; height:100px; background-color: #ffd500; transform:rotate(-18deg); transition: all .3s ease;}
.aside .piggy_mom:hover:after { bottom:-62px;}
.aside .piggy_mom i.as_piggymom { display: block; width:80px; height:24px; margin: 0 auto; background: url(../images/aside_img.png) no-repeat;}
.aside .piggy_mom i.as_youtube { display: block; width:64px; height:24px; margin: 12px auto 10px; background: url(../images/aside_img2.png) no-repeat;}
.aside .piggy_mom i.as_arrow { display: block; position:relative; z-index:1; width:46px; height:10px; margin: 17px auto 0; background: url(../images/aside_img3.png) no-repeat;}
.aside .piggy_mom .title { font-size: 18px; font-weight:700; color: #58595b; line-height: 1.2;}
.aside .piggy_mom .title span { display:block; color: #3484b4;}
.aside .top_link { display: block; margin-top:16px; padding:7px 0 8px; font-weight:700; color: #58595b; text-align:center; letter-spacing:0; border: 1px solid #ddd; background-color:#fff; border-radius:8px; box-shadow: 0 4px 12px rgba(229, 227, 213, .4); transition: all .3s ease;}
.aside .top_link i.tl_arrow { display: inline-block; width:7px; height:4px; margin:-4px 0 0 5px; vertical-align:middle; background: url(../images/aside_img4.png) no-repeat;}
.aside .vezzle_youtube{width: 128px;margin-top: 16px;border: 1px solid #ddd; background-color:rgba(255,255,255,0.8); border-radius:8px; box-shadow: 0 4px 12px rgba(229, 227, 213, .4);}
.aside .vezzle_youtube i.as_vezzle{display: block;width: 100%;height: 70px;background: url(../images/aside_img5.png) no-repeat;border-radius: 8px;}
.aside .vezzle_youtube p{padding: 6px 0;font-weight: 700;font-size: 15px;color: #58595b;text-align: center;}




/* 나의 강의실
**********************************************/
.my_area { width: 1100px; margin: 0 auto; line-height: 140%;}
.my_header { background: url(../images/my_header_bg.png) no-repeat center top;}
.my_header .room { position: relative;}
.my_header .room .my_logo { position: absolute; left: -50px; top: 47px;}
.my_header .room .clear { clear: both; overflow: hidden; height: 170px;}
.my_header .room .lecture_h { float: left; width: 975px; height: 100%; padding-top: 51px; text-align: center; background: url(../images/my_lecture_bg.jpg) no-repeat;}
.my_header .room .lecture_h h1 { font-size: 28px; font-weight: 700; color: #fff; line-height: 38px;}
.my_header .room .lecture_h select { height: 26px;padding-right: 17px;margin-top: 5px;font-size: 16px;color: #ffd50c;border: none;border-bottom: 1px solid #ffd50c;background: url(../images/my_ico_arrow.png) no-repeat right 10px;border-radius: 0px;-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: none;}
.my_header .room .lecture_h select::-ms-expand { display: none;}
.my_header .room .lecture_h select option { background-color: #4e008e;}
.my_header .room .lecture_log { float: right; width: 125px; height: 100%; padding-top: 60px; background-color: #FFD700;}
.my_header .room .lecture_log button { display: block; margin: 0 auto; font-weight: 700; color: rgba(0,0,0,0.78);}
.my_header .room .lecture_log button img { display: block; margin: 0 auto 30px;}

.my_nav { position: relative; padding-left: 50px; background-color: #fff;}
.my_nav .my_home { display: block; position: absolute; left: 0; top: 0; width: 50px; height: 50px; padding-top: 14px; text-align: center; background-color: #FFD700;}
.my_gnb { clear: left; overflow: hidden;}
.my_gnb li { float: left; width: 215px;}
.my_gnb li a { display: block; height: 50px; padding: 15px 0 0; font-weight: 700; color: rgba(0,0,0,0.78); text-align: center; border-bottom: 1px solid #ddd;}
.my_gnb li a span { display: inline-block; position: relative; padding-bottom: 5px;}
.my_gnb li a.active { color: #4E008E;}
.my_gnb li a.active i { display: block; position: absolute; left: 50%; bottom: 0; width: 100%; height: 2px; background: #4D3A83; transform:translate(-50%, 0);}
.my_search { position: absolute; right:0; bottom:0; width:190px; height: 50px; padding-top:10px; border-bottom: 1px solid #ddd;}
.my_search .i_box { position: relative;}
.my_search .i_box input { width:169px; height:30px; padding-left: 36px; font-size:13px; background: #EEEEEE; border-radius: 15px; outline: 0;}
.my_search .i_box input.hide { width: 0; height: 0; padding-left: 0; border:none; border-radius:0;}
.my_search .i_box .btn { display: block; position: absolute; left:12px; top:6px;}
.my_search .i_box .btn i { display:block; width:16px; height:16px; text-indent: -99999px; background: url(../images/ico_global_search.png) no-repeat; background-size: 16px 16px;}

.my_container { clear: both; overflow: hidden; padding-top: 40px;}

.my_contents { float: right; width: 836px;}
.my_contents h4 { font-size: 18px; font-weight: 700; color: #000; line-height: 140%;}
.my_contents h4.bb_line { padding-bottom:10px; border-bottom: 1px solid #000;}
.buybox .list { margin-top:12px; padding:18px 0; border-top:1px solid #444; border-bottom:1px solid #eee;}
.buybox .list li { position: relative; margin-top: 10px;}
.buybox .list li:first-child { margin-top: 0;}
.buybox .list li label input { margin-right: 10px;}
.buybox .list li p { position: absolute; right: 0; top: -3px;}
.buybox .list li p .c { font-size: 16px; font-weight: 700; color: #4E008E; vertical-align: inherit;}
.buybox .list li p .w { margin-left:3px; font-size: 12px; color: rgba(0,0,0,0.78); vertical-align: inherit;}
.buybox .btn { margin-top: 20px; text-align: center;}
.buybox .btn button { width:200px; height: 48px; font-weight:700; color: #4E008E; border:2px solid #4E008E; border-radius: 8px;}
.lecture_table { border-top: 1px solid #000;}
.lecture_table th { padding: 13px 0; font-size:13px; font-weight:700; color: rgba(0,0,0,0.78); background-color: #F5F5F5;}
.lecture_table td { padding: 15px 0; font-size:13px; color: rgba(0,0,0,0.78); text-align: center; border-bottom: 1px solid #eee;}
.lecture_table td .play { display: block; width: 20px; height: 20px; margin: 0 auto; text-indent: -9999px; background: url(../images/ico_play.png) no-repeat;}
.lecture_table td .down { padding:3px;}
.lecture_table .btn { margin-top: 30px; text-align: center;}
.lecture_table .btn button { width: 200px; height: 48px; font-weight:700; color: #4E008E; border:2px solid #4E008E; border-radius: 8px;}
.lecture_table .btn button:hover{ text-decoration: underline;}
.lecture_table tr.disable td,
.lecture_table tr.disable td a { color: rgba(0,0,0,0.38);}
.lecture_table tr.disable td .play { background-position: 0 -28px;}
.lecture_table .ico { width:inherit; height:inherit; margin-left:7px; padding:2px 7px; border:1px solid #eee; background-color: #F5F5F5;}
.lecture_table .ico.essential { color:#7C4754;}
.lecture_table .ico.samples { color:#527C47;}
.lecture_table .ico.popularity { color:#47567C;}
.graybox { min-height: 94px; padding:16px; border:1px solid #ddd; background-color: #F5F5F5; border-radius:8px;}
.graybox pre { color: rgba(0,0,0,0.58);}
.graybox .iframe_box { clear: both; overflow: hidden; margin-top: 20px;}
.graybox .iframe_box iframe { float: left; width:386px; height: 217px; margin-right: 14px;}
.graybox .iframe_box iframe +iframe { margin-right: 0;}
#my_wrap .graybox .iframe_box iframe { margin-right: 30px;}
#my_wrap .graybox .iframe_box iframe +iframe { margin-right: 0;}

.search .btn { width:40px; height:40px; margin-left:2px; text-align:center; background-color: rgba(0,0,0,0.78); border-radius:4px;}








/* 리액트로 받은 소스
**********************************************/
/* 공통 */
#root .checkbox2 { display:none; }
.form-control-sm.form-control { width:100%;}

.common_btns { margin-top: 20px; text-align: center;}
.common_btns button { display: inline-block; width: 200px; height: 48px; font-weight: 700; color: #4E008E; border: 2px solid #4E008E; background-color: #fff; border-radius:8px;}
.emptyBox { padding: 30px; text-align: center; border: 1px solid #eee; border-top: 1px solid #444;}
.emptyBox_no { display:block; padding: 30px; text-align: center; border: 1px solid #eee; border-top:none;}
.mb20 { margin-bottom: 20px;}
.acTitle { margin: 20px 0 10px; font-size: 18px; font-weight: 700; line-height: 1.4;}
.acTitle.mt50 { margin-top: 50px;}
.acTitle2 { padding: 14px 0; font-size: 18px; font-weight: 700; line-height: 1.4; border-bottom: 1px solid #eee;}
.acTitle2.lineT { border-top: 1px solid #444;}
.acHeader { display: flex; padding: 14px; font-size: 13px; font-weight: 700; border-top: 1px solid #444; background-color: #F4F1F5;}
.acHeader >div { text-align: center;}
.acBody { display: flex; padding: 14px 16px; border-bottom: 1px solid #ddd;}
.acBody2 { clear: both; overflow: hidden; padding: 32px 16px; color: rgba(0,0,0,0.78); line-height: 1.4; border-bottom: 1px solid #eee;}
.acBody2 .abLeft { float: left;}
.acBody2 .abRight { float: right;}
.acBody2 .abRight span { font-size: 16px;}
.acBody2 .abRight sub { margin-left: 2px; font-size: 12px; vertical-align:sub;}
.acGuide { margin-top: 10px; font-size: 13px; color: rgba(0,0,0,0.58);}
.acGuide2 { margin-top: 30px; font-size: 12px; color: rgba(0,0,0,0.58); text-align: center;}
.acGuide2 .color {  font-weight: 700; color: #4E008E;}

.teacher_list >li .progressBox { clear:left; overflow:hidden; margin-top: 7px;}
.teacher_list >li .progressBox .progressbar { float:left;  position:relative; width:68%; height:8px; margin:8px 0 0 10px; vertical-align: middle; background-color: #ebebeb; border-radius:4px;}
.teacher_list >li .progressBox .progressbar .prog { position: absolute; left:0; top:0; width:0; height:8px; background: #FFD700; border-radius:4px;}
.teacher_list >li .progressBox .division { float:left; width:38px; height:24px;  font-size: 13px; font-weight: 700; color: #FFD700; text-align: center; background: #4E008E; border-radius:4px;}
.teacher_list >li .progressBox .division.exactly { padding-top: 5px; color:#FFD700; background-color:#4E008E;}
.teacher_list >li .progressBox .division.autonomy { padding-top: 3px; color: #4E008E; border:2px solid #4E008E; background: #fff;}
.teacher_list >li .progressBox .rate { float:left; margin:1px 11px 0 9px; font-weight:700; color: rgba(0,0,0,0.78); vertical-align: middle;}
.teacher_list >li .progressBox .max { float:left; margin-top:1px; font-size: 14px; color: rgba(0,0,0,0.58); vertical-align: middle;}

.books .bookList >div >div >div { border-top: 1px solid #eee;}
.books .bookList .totalList { clear: both; overflow: hidden; padding: 8px 36px; border-top: 1px solid #eee;}
.books .bookList .totalList .tlLeft { float: left; width: 50%; color: rgba(0,0,0,0.78);}
.books .bookList .totalList .tlRight { float: right; width: 50%; text-align: right;}
.books .bookList .totalList .tlRight span { font-size: 16px; font-weight: 700; vertical-align: middle;}
.books .bookList .totalList .tlRight sub { vertical-align: sub;}
.books .totSum { clear: both; overflow: hidden; padding: 20px 36px; background-color: #F4F1F5;}
.books .totSum .tlLeft { float: left; width: 50%; color: rgba(0,0,0,0.78);}
.books .totSum .tlRight { float: right; width: 50%; text-align: right;}
.books .totSum .tlRight sub { font-size: 12px; vertical-align: middle;}
.books .totSum .tlRight span { font-size: 16px; font-weight: 700; color: #4E008E; vertical-align: middle;}
.books .bookTitle { position: relative; padding: 16px 0; border-top: 1px solid #444;}
.books .bookTitle .title { display: inline-block; margin-left: 5px; font-size: 13px; font-weight: 700; cursor: pointer;}
.books .bookTitle .img { display: block; position: absolute; right: 0; top: 0; padding: 17px 13px;}
.books .listLi { padding: 20px;}
.books .listLi input,
.books .listLi img,
.books .listLi >div { display: inline-block; vertical-align: middle;}
.books .listLi >div img,
.books .listLi >div >div { display: inline-block; vertical-align: middle;}
.books .listLi input { margin-right: 19px;}
.books .listLi .title { font-size: 18px;}
.books .listLi .bookPrice sub { font-size: 12px; vertical-align: middle;}
.books .listLi .bookPrice span { font-size: 16px; font-weight: 700; vertical-align: middle;}
.books .listLi .author { font-size: 12px; color: rgba(0,0,0,0.38);}
.books .listLi >img { width: 70px; margin: 0 16px 0 0; cursor: pointer;}
.books .btns { margin-top: 20px; text-align: center;}
.books .btns button { display: inline-block; width: 200px; height: 48px; font-weight: 700; color: #4E008E; border: 2px solid #4E008E; background-color: #fff; border-radius:8px;}

.purchase .paymentTotal { clear: both; overflow: hidden; padding: 16px; border-bottom: 1px solid #ddd; background-color: #F4F1F5;}
.purchase .paymentTotal .ptLeft { float: left; font-weight: 700;}
.purchase .paymentTotal .ptRight { float: right; color: rgba(0,0,0,0.78);}
.purchase .paymentTotal .ptRight span { font-size: 18px; font-weight: 800; color: #4E008E;}
.purchase .paymentTotal .ptRight sub { font-size: 12px; color: rgba(0,0,0,0.78); vertical-align: sub;}
.purchase .pricePoint { margin-top: 40px; padding: 24px 16px 4px; border-top: 1px solid #444; background-color: #F4F1F5;}
.purchase .pricePoint .title { margin-bottom: 15px; font-size: 13px; font-weight: 700; color: rgba(0,0,0,0.78);}
.purchase .pricePoint .pBody { clear: both; overflow: hidden; padding: 6px 15px;}
.purchase .pricePoint .pBody .pbLeft { float: left; font-size: 13px; color: rgba(0,0,0,0.78);}
.purchase .pricePoint .pBody .pbLeft button { margin:-2px 0 0 6px; padding: 4px; font-size: 12px; border: 2px solid #000; background-color: #fff; border-radius:4px;}
.purchase .pricePoint .pBody .pbLeft.pt { padding-top: 11px;}
.purchase .pricePoint .pBody .pbRgiht { float: right;}
.purchase .pricePoint .pBody .pbRgiht input { width: 120px; text-align: right;}
.purchase .totalPrice { clear: both; overflow: hidden; padding: 16px; background-color: #E8E2EA;}
.purchase .totalPrice .tpLeft { float: left; font-size: 16px; font-weight: 800;}
.purchase .totalPrice .tpRight { float: right;}
.purchase .totalPrice .tpRight span { font-size: 18px; font-weight: 800; color: #4E008E;}
.purchase .totalPrice .tpRight sub { vertical-align: sub;}
.purchase .selBtns { position: relative; padding: 16px; text-align: center; border: 1px solid #eee; border-top: 1px solid #444;}
.purchase .selBtns button { width: 230px; height: 36px; margin: 0 80px; font-weight: 700; color: #4E008E; border: 2px solid #4E008E; border-radius:4px;}
.purchase .selBtns button.active { color: #fff; background-color: #4E008E;}
.purchase .selBtns::before { content: ''; position: absolute; left: 50%; top: 50%;; width: 1px; height: 12px; background-color: #ddd; transform:translate(-50%, -50%);}
.purchase .acAddress { padding: 16px 0; border-top: 1px solid #444; border-bottom: 1px solid #eee;}
.purchase .bankTable { border-top: 1px solid #444;}
.purchase .bankTable th { padding: 16px 0; font-size: 14px; font-weight: normal; text-align: left; border-bottom: 1px solid #eee;}
.purchase .bankTable td { font-size: 14px; border-bottom: 1px solid #eee;}
.purchase .agreeBox { margin-top: 30px;}
.purchase .agreeBox .abLabel { text-align: center;}
.purchase .agreeBox .abLabel label { font-size: 13px;}

.nav-tabs .nav-link { border:none;}
.nav-tabs .nav-item.show .nav-link { color: inherit; background-color: inherit; border-color: inherit;}
.nav-tabs .nav-link.active { color: #4E008E; background-color: inherit; border-color: inherit;}
.hschool .btable { margin-top: 20px;}
.hschool .btable tbody td { padding: 10px 20px; font-size: 14px;}
.hschool .btable tbody td span { font-size: 15px; font-weight: 700; vertical-align: middle;}
.hschool .btable tbody td sub { font-size: 12px; vertical-align: middle;}
.hschool .btable tfoot th.tal { padding-left: 20px; font-weight: normal;}
.hschool .btable tfoot th.tar { padding-right: 20px; font-size: 14px;}
.hschool .btable tfoot th.tar span { font-size: 16px; font-weight: 700; color: #4E008E; vertical-align: middle;}
.hschool .btable tfoot th.tar sub { font-size: 12px; vertical-align: middle;}
.hschool td .title { font-size: 15px;}
.hschool td .date { font-size: 13px; color: rgba(0,0,0,0.38);}

.AttendCalendar .acDateBody { text-align: center;}
.AttendCalendar .acDate { display: inline-block; margin: 0 10px; font-size: 20px; font-weight: 700; vertical-align: middle;}
.AttendCalendar .acTitle { margin: 20px 0 10px; font-size: 18px; font-weight: 700; line-height: 1.4;}
.AttendCalendar .acHeader { display: flex; padding: 14px; font-size: 13px; font-weight: 700; border-top: 1px solid #444; background-color: #F4F1F5;}
.AttendCalendar .acHeader >div { text-align: center;}
.AttendCalendar .acBody { padding: 14px 16px; border-bottom: 1px solid #ddd;}
.AttendCalendar .acGuide { margin-top: 10px; font-size: 13px; color: rgba(0,0,0,0.58);}
.AttendCalendar .attY { color: #4E008E;}
.AttendCalendar .attN { color: #D43F65;}

.AttendTask .assing { margin-top: 20px;}
.AttendTask .assing ul li { border-top: 1px solid #eee;}
.AttendTask .assing ul li:first-child { border-top: none;}
.AttendTask .assing a { display: block; position: relative; padding: 18px 0; cursor: pointer;}
.AttendTask .assing a >span {font-size: 12px; font-weight: 700; color: rgba(0,0,0,0.38);}
.AttendTask .assing a >span.active { color: #4E008E;}
.AttendTask .assing a .rtitle { font-size: 16px; font-weight: 700; color: rgba(0,0,0,0.78);}
.AttendTask .assing a .rname { margin-top: 4px; font-size: 13px; color: rgba(0,0,0,0.38);}
.AttendTask .assing a .rdate { position: absolute; right: 0; top: 50%; text-align: right; transform:translate(0, -50%);}
.AttendTask .assing a .rdate .gdate { font-size: 12px; font-weight: 700; color: rgba(0,0,0,0.38);}
.AttendTask .assing a .rdate .scorebox { display: inline-block; width: 40px; height: 40px; margin-top: 8px; padding-top:9px; font-size: 12px; font-weight: 700; color: #D43F65; text-align: center; background-color: #F3F5FA; border-radius:8px;}
.AttendTask .assing a .rdate.inherit { position: inherit; right: inherit; top: inherit; text-align: inherit; transform:inherit;}

.AttendTask .test_contents { padding: 20px 0; white-space: pre; line-height: 1.4;}
.AttendTask .assing .test_contents { border-top: 1px solid #eee;}
.AttendTask .tmt { margin: 45px 0 20px; font-size: 18px; font-weight: 700; color: #000;}
.AttendTask .assing_c { border-top: 1px solid #444; border-bottom: 1px solid #444;}
.AttendTask .assing_c .textpd { padding: 8px 0;}
.AttendTask .c_file { padding: 12px; border-top: 1px solid #eee; background-color: #f5f5f5;}
.AttendTask .c_file a { display: inline-block; height: 36px; margin-right: 8px; padding: 8px 16px 0; font-size: 12px; color: rgba(0,0,0,0.38); border: 1px solid #ddd; background-color: #fff; border-radius: 18px; cursor: pointer;}
.AttendTask .c_file a span { margin-left: 10px; font-weight: normal;}
.AttendTask .gbtns { margin-top: 28px; text-align: center;}
.AttendTask .gbtns .gb_del { width: 120px; height: 36px; margin: 0 6px; font-weight: 700; color: #fff; background-color: #4E008E; border-radius:8px;}
.AttendTask .gbtns .gb_list { width: 120px; height: 36px; margin: 0 6px; font-weight: 700; color: #4E008E; border: 2px solid #4E008E; border-radius:8px;}
.AttendTask .c_evaluation { position: relative; padding: 14px 14px 14px 156px; background-color: #F4F1F5;}
.AttendTask .c_evaluation .ce_t { position: absolute; left: 42px; top: 14px; font-size: 13px; font-weight:700; color: #4E008E;}
.AttendTask .c_evaluation .ce_c { font-size: 13px; color: rgba(0,0,0,0.78);}

.AttendTask .sfileBox { padding: 12px; border-top: 1px solid #eee; background-color: #F5F5F5;}
.AttendTask .sfileBox .sfile { width: 36px; height: 36px; margin-right: 30px; padding-top: 9px; text-align: center; border: 1px solid #444; background-color: #fff; border-radius: 50%;}
.AttendTask .sfileBox .sfile img { width:13px; height: auto;}
.AttendTask .sfileBox span { font-size: 12px; color: rgba(0,0,0,0.38);}

.reCoupon { position:relative; padding:20px 16px;}
.reCoupon span { font-size: 14px !important; font-weight:700;}
.reCoupon input { position:absolute; right:16px; top:50%; height:40px !important; margin-top: -20px;}
.cardCoupon { padding:0 16px 16px;}
.cardCoupon table { margin: 10px auto !important; border:1px solid #eee;}
.cardCoupon table tr:first-child { background: #4e008c !important; border-radius:0 !important;}
.cardCoupon td font { margin:0 3px; padding:2px 13px; font-size:12px !important; font-weight:700; color:#4E008E !important; border:1px solid #eee; background-color:#fff !important; border-radius:4px;}
.cardCoupon td font +span { display: none;}
.cardCoupon .coupon1 td { padding:10px 0; font-size:28px; color:#4E008E; line-height: 28px;}
.cardCoupon .coupon2 td { color:#4E008E;}

.pclistone { position:relative; padding:10px 7px; border-bottom: 1px solid #eee;}
.pclistone label { margin-top: 6px;}
.pclistone .pcoLeft { display: inline-block; margin-left:10px; vertical-align: middle;}
.pclistone .pcoright { position: absolute; right:16px; top:50%; margin-top: -10px; font-weight:700; color: #4e008c;}



/* modal */
.modal{display:none;}
.modal_cont{position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);max-width: 460px;width: 90%;color: #fff;box-shadow: 3px 3px 10px rgb(0 0 0 / 10%);background-color: #4e008c;border-radius: 30px;padding: 40px 30px 30px;text-align: center;z-index: 99;}
.modal_cont h2{margin-bottom:30px;}
.modal_cont a{display: block;max-width: 120px;;margin: 30px auto 0;color: #4e008c;background-color: #ffd500;border-radius: 8px;padding: 12px 30px 13px;font-weight: bolder;}
.modal_cont .close{position: absolute;top: 25px;right: 25px;width: 20px;height: 20px;cursor: pointer;}
.modal_cont .close span{position: absolute;right: 0;top: 7px;display:inline-block;width:20px;height:2px;background-color:#fff;}
.modal_cont .close .bar1{transform: rotate( -45deg );}
.modal_cont .close .bar2{transform: rotate( 45deg );}