@charset "utf-8";
/* CSS Document */

body{}
.box1{ padding:0 3%; width:auto; min-width:320px}
.PC{ display:none !important}
.PHONE{ display:block !important}

@media screen and (max-width:1400px){
#header .top_wrap .cate_wrap .gnb_wrap .gnb > li > .dp2{ width:100%; box-sizing:border-box}
}

@media screen and (max-width:1280px){
#header .home_wrap .banner_wrap{ }
#header .home_wrap .banner_wrap .banner{ display:inline-block}
#header .home_wrap .etc_wrap .mem_list > li.cs,
#header .home_wrap .etc_wrap .sns_list,
#header .home_wrap .etc_wrap .my_list{ display:none}
#header .home_wrap .etc_wrap .sns_list{ border-right:1px solid #eee}
#header .home_wrap .etc_wrap .sns_list > li:hover .teacher_sns_list{ visibility:hidden; opacity:0}
#header .home_wrap .etc_wrap .sns_list > li.on .teacher_sns_list,
#header .home_wrap .etc_wrap .sns_list > li.on:hover .teacher_sns_list{ visibility:visible; opacity:1}
#header .home_wrap .etc_wrap .sns_list > li.on > a .arrow.btn:before{ content:"\e921"}

#header .top_wrap{ position: relative}
#header .top_wrap .va_wrap,
#header .top_wrap .cate_wrap .va_wrap,
#header .top_wrap .search .va_wrap{ height:5em}
#header .top_wrap > .flex{ position:relative; flex:none}
#header .top_wrap .logo{ position:relative; z-index:1; margin-left:4em}
#header .top_wrap .search{ margin-right:4em}
#header .top_wrap .cate_wrap .gnb_wrap{ display:none}
#header .top_wrap .cate_wrap > .box1{ position:static}
#header .top_wrap .cate_wrap .all_wrap{ }
#header .top_wrap .cate_wrap .all_wrap .box1{ padding:0}
#header .top_wrap .cate_wrap .all_wrap .allBtn{ position:absolute; left:3%; top:0}
#header .top_wrap .cate_wrap .all_wrap .allBtn .va{ display:none}
#header .top_wrap .cate_wrap .all_wrap .allBtn:after{ color:#000; font-size:2.5rem !important}
#header .top_wrap .cate_wrap .all_wrap .all{ background:#fff; transform:none !important; visibility:hidden; left:-100%}
.openTop{ text-align:left; padding:0 3%; position: fixed; left:0; top:0; transform: none !important; width:94%; background:#fff; z-index:1; margin:0; height:4.5em !important; box-shadow:0 2px 4px rgba(0,0,0,.2); -webkit-transform: translateZ(0); webkit-backface-visibility:hidden;}
.openTop .logo_img{ background:url(../images/inc/logo.png) no-repeat left center; background-size: auto 80%}
.openTop .logo_img img{ visibility:hidden}
.openTop .closeBtn{ position:absolute; right:3%; top:50%; margin-top:-1.313em; width:2.5em; line-height:2.5em; height:2.5em; border-radius:100%; background:#fff; text-align:center; box-shadow:0 5px 20px rgba(0,0,0,.1); border:1px solid #eee}
.openTop .closeBtn .xi{ color:#000; font-size:1.5em}
.openIn{ padding-top:4.5em}
#header .top_wrap .cate_wrap .all_wrap{}
#header .top_wrap .cate_wrap .all_wrap .all .gnb{ opacity:1; transition-delay:0 !important; font-size:1em}
#header .top_wrap .cate_wrap .all_wrap .all .gnb > li{ padding:0}
#header .top_wrap .cate_wrap .all_wrap .all .gnb > li:hover{ background:none}
#header .top_wrap .cate_wrap .all_wrap .all .gnb > li .dp1{ display:block; position:relative; width:auto; text-align:left; padding:.5em 6% .5em 3%; color:#111; background:#f5f5f5; border:1px solid #eee}
#header .top_wrap .cate_wrap .all_wrap .all .gnb > li .dp1 .va{ font-size:1.25em}
#header .top_wrap .cate_wrap .all_wrap .all .gnb > li .dp1:after{ content:"\e941"; font-family:xeicon!important; position:absolute; right:4%; top:50%; margin-top:-.5em}
#header .top_wrap .cate_wrap .all_wrap .all .gnb > li .dp2{ padding:1em 3%}
#header .top_wrap .cate_wrap .all_wrap .all .gnb > li .dp2 > li{ width:25%}
#header .top_wrap .cate_wrap .all_wrap .all .gnb > li .dp2 > li > a{ color:#333; padding:0; height:2.5em}
#header .top_wrap .cate_wrap .all_wrap .all .gnb > li .dp2 > li > a .va:before{ display:none}
#header .top_wrap .cate_wrap .all_wrap .all .gnb > li .dp2 > li > a .va .tit{ display:inline-block; margin-bottom:0; margin-right:0}
#header .top_wrap .cate_wrap .all_wrap .all .gnb > li.off .dp2{ display:none}
#header .top_wrap .cate_wrap .all_wrap.on .all{ left:0; transform:none !important; visibility:visible}
#header .top_wrap .cate_wrap .all_wrap .lecture_icon{ margin-left:0}
#header .top_wrap .cate_wrap .all_wrap .lecture_icon .icon{ width:1em; height:1em; border-radius:100%; font-size:.75em; margin:0 0 0 .25em}
#header .top_wrap .cate_wrap .all_wrap .lecture_icon .icon .tt{ font-size:0}
#header .top_wrap .cate_wrap .all_wrap .lecture_icon .icon{ display:block}
#header .top_wrap .my_wrap{ display:block; position:absolute; right:3%; top:0}
#header .top_wrap .my_wrap.on{ z-index:2}
#header .top_wrap .my_wrap .myBtn{ position:absolute; right:0; top:0}
#header .top_wrap .my_wrap .myBtn .xi{ font-size:1em}
#header .top_wrap .my_wrap .myBtn .xi:before{ font-size:2.5rem}
#header .top_wrap .my_wrap .my{ position:fixed; right:-100%; height:100%; width:100%; top:0; background:#9ea1ab; visibility:hidden}
#header .top_wrap .my_wrap .my .openTop{ background: #3d4250}
#header .top_wrap .my_wrap .my .openTop .twrap{ color:#fff; font-size:1.25em; font-weight:500}
#header .top_wrap .my_wrap .my .openTop .twrap a{ color:#fff; text-decoration:underline}
#header .top_wrap .my_wrap .my .gnb{ font-size:1em}
#header .top_wrap .my_wrap .my .gnb > li{ display:block }
#header .top_wrap .my_wrap .my .gnb .dp1{ display:block; text-align:left; color:#fff; padding:1em 0; height:auto; position:relative}
#header .top_wrap .my_wrap .my .gnb .dp1 .va{ font-size:1.125em; font-weight:700}
#header .top_wrap .my_wrap .my .gnb .dp1:after{ content:"\e913"; font-family:xeicon!important; position:absolute; right:.5em; top:50%; margin-top:-.5em}
#header .top_wrap .my_wrap .my .gnb .dp2{ }
#header .top_wrap .my_wrap .my .gnb .dp2 > li{ width:50%}
#header .top_wrap .my_wrap .my .gnb .dp2 > li > a{ margin:0 1px 1px 0; background:#fff; height:2.5em; text-align:left; padding:0 2em 0 1em; position:relative}
#header .top_wrap .my_wrap .my .gnb .dp2 > li > a .va{ font-size:.875em}
#header .top_wrap .my_wrap .my .gnb .dp2 > li.more > a:after{ content:"\e913"; font-family:xeicon!important; position:absolute; right:.5em; top:50%; margin-top:-.625em}
#header .top_wrap .my_wrap .my .gnb .dp3{ display:none; background:#727786; box-sizing:border-box; font-size:1em; padding:.5em 1em 1em 1em; width:200%; position:relative;}
#header .top_wrap .my_wrap .my .gnb .dp3 > li{ width:50%; float:left}
#header .top_wrap .my_wrap .my .gnb .dp2 > li:nth-child(2n) .dp3{ margin-left:-100%}
#header .top_wrap .my_wrap .my .gnb .dp3 > li > a{ height:2.5em; text-align:left; color:#fff}
#header .top_wrap .my_wrap .my .gnb .dp3 > li > a .va{ font-size:.875em}
#header .top_wrap .my_wrap .my .gnb .dp3 > li > a .va:before{ content:"- "}
#header .top_wrap .my_wrap .my .gnb .dp3:after{ content:""; clear:both; display:block}
#header .top_wrap .my_wrap .my .gnb .dp2 > li.on .dp3{ display:block}
#header .top_wrap .my_wrap .my .gnb .dp2 > li.on > a{ background:#505565; color:#fff; margin-bottom:-1px; padding-top:1px}
#header .top_wrap .my_wrap .my .gnb .dp2 > li.on > a:after{ transform:rotate(45deg)}
#header .top_wrap .my_wrap .my .my_list{ padding:1.5em 0; border-bottom:1px solid rgba(255,255,255,.3)}
#header .top_wrap .my_wrap .my .my_list > li{ width:50%; position:relative; z-index:1}
#header .top_wrap .my_wrap .my .my_list > li > a{ height:auto; padding:.5em 1em; font-size:1.25em; margin:0 1px 1px 0; text-align:left}
#header .top_wrap .my_wrap .my .my_list > li > a.more .arrow:before{ content:"\e914"}
#header .top_wrap .my_wrap .my .my_list > li.on > a.more .arrow:before{ content:"\e922"}
#header .top_wrap .my_wrap .my .my_list > li .teacher_sns_list{ opacity:0; visibility:hidden}
#header .top_wrap .my_wrap .my .my_list > li.on .teacher_sns_list{ opacity:1; visibility:visible}
#header .top_wrap .my_wrap .my .my_list > li.c1 > a{ background:#325878}
#header .top_wrap .my_wrap .my .my_list > li.c2 > a{ background:#327478}
#header .top_wrap .my_wrap .my .my_list > li.c3 > a{ background:#d79d00}
#header .top_wrap .my_wrap .my .my_list > li.c4 > a{ background:#d26661}
#header .top_wrap .my_wrap .my .my_link{ text-align:center; margin-top:3em}
#header .top_wrap .my_wrap .my .my_link > li{ display:inline-block}
#header .top_wrap .my_wrap .my .my_link > li > a{ display:block; padding:0 1.5em; color:#fff; font-weight:500; font-size:1.125em; position:relative}
#header .top_wrap .my_wrap .my .my_link > li > a:after{ content:""; position:absolute; right:-1px; top:20%; height:60%; width:1px; background:#fff; opacity:.5}
#header .top_wrap .my_wrap .my .my_link > li:last-child > a:after{ display:none}
#header .top_wrap .my_wrap.on .my{ right:0; visibility:visible; transition:.3s}

#quick{ display:none}

.visualSlide .el{ height:0; padding-bottom:41.66%; background-size:cover}
.main_top_wrap .wrap_list > li.board_wrap{ width:50%}
.main_top_wrap .wrap_list > li.schedule_wrap{ width:16.66%}
.main_top_wrap .wrap_list > li.pass_wrap{ width:33.33%}
.main_top_wrap .wrap_list > li.link_wrap{ width:100%}
.main_top_wrap .wrap_list > li.link_wrap .link{ margin:0 0 0 -1em}
.main_top_wrap .wrap_list > li.link_wrap .link > li{ width:33.33%; float:left}
.main_top_wrap .wrap_list > li.link_wrap .link > li > a{ margin:0 0 0 1em}

.visualSlide_wrap{ margin-bottom:3em}
.visualSlide_wrap .swiper-pagination{ bottom:-1em}
.visualSlide_wrap .swiper-pagination{ text-align:left; margin-left:3%}
.visualSlide_wrap .white.swiper-pagination > span{ background:#000}
.visualSlide_wrap .swiperPause{width:2em; line-height:2em; height:2em; top:auto; left:auto; bottom:-2.5em; right:3%; visibility:visible; opacity:1}
.visualSlide_wrap .swiperPause .xi{ font-size:1em}

.main_cate .gnb > li .dp2 > li{ width:33.33%}

.main_movie{ height:0; padding-bottom:41.66%; background-size: cover}

.teacherSlide_wrap .el{ width:22%; padding-right:15%; margin-left:-13%}
.teacherSlide_wrap .el.swiper-slide-active{ width:50%}

.bannerSlide_wrap{ padding-top:1em}
.bannerSlide .el{ height:0; padding-bottom:20%; background-size:cover}

.lectureTop .lecture_tit .left.link{ left:3%}
.lectureTop .lecture_tit .right.link{ right:3%}

#contents .sub_gnb_wrap,
#contents .sub_con_wrap{ width:100%; float:none}

#contents .sub_gnb_wrap{ margin-bottom:0}
#contents .sub_gnb_wrap .gnb{}
#contents .sub_gnb_wrap .gnb > li .dp1{ font-size:.875em; background:none; color:#000; height:auto; margin-bottom:1em}
#contents .sub_gnb_wrap .gnb > li .dp2{}
#contents .sub_gnb_wrap .gnb > li .dp2:after{ content:""; display:block; clear:both}
#contents .sub_gnb_wrap .gnb > li .dp2 > li{ width:50%; float:left}
#contents .sub_gnb_wrap .gnb > li .dp2 > li:nth-child(2n+1){ clear:both}
#contents .sub_gnb_wrap .gnb > li .dp2 > li > a{ padding:0 .5em; height:3em; margin:-1px -1px 0 0 ; line-height:1.1}
#contents .sub_gnb_wrap .gnb > li .dp2 > li.on > a{ border-bottom-color:transparent}
#contents .sub_gnb_wrap .gnb > li .dp2 > li > a .va{ font-size:.813em; display:inline-block; width:100%; box-sizing:border-box}
#contents .sub_gnb_wrap .gnb > li .dp2 > li > a .va:after{ transform:rotate(90deg)}
#contents .sub_gnb_wrap .gnb > li .dp3{ display:none}
#contents .sub_gnb_wrap .gnb > li .dp2 > li.on{}
#contents .sub_gnb_wrap .gnb > li .dp2 > li.on .dp3{ display:block; width:200%; overflow:hidden; border-bottom:1px solid #ddd; box-sizing:border-box; padding:1em}
#contents .sub_gnb_wrap .gnb > li .dp2 > li.on:nth-child(2n) .dp3{ margin-left:-100%}
#contents .sub_gnb_wrap .gnb > li .dp2 > li.on .dp3 > li{ width:50%; float:left}
#contents .sub_gnb_wrap .gnb > li .dp2 > li.on .dp3 > li > a{ font-size:.875em; padding:.5em 0 .5em .5em}
#contents .sub_gnb_wrap .gnb > li .dp2 > li.on .dp3 > li > a .va{ padding-right:.5em; padding-left:.625em; word-break:break-all}
#contents .sub_gnb_wrap .gnb > li .dp2 > li.on .dp3 > li > a .va:after{ display:none}

.gnb_banner{ margin-top:.5em}

#contents .sub_con_wrap .sub_tit{ display:none}

.cs_main_con > li.w1{ width:40%}
.cs_main_con > li.w2{ width:60%}
.cs_main_con > li.w3{ width:100%}

.cs_main_con > li.w3 .wrap_in{ overflow:hidden}
.cs_main_con > li .link{ float:left; width:33.33%; box-sizing:border-box; margin-right:-1px; margin-bottom:0}
.cs_main_top .menu_wrap .list > li .in .tel .no{ font-size:1.313em}

.companySlide_wrap{ margin-top:7.87em}
.companySlide_wrap .companySlide_layer > .va{ margin-bottom:-2em}
.companySlide_wrap .companySlide_layer .t1{ font-size:2.75em}
.companySlide_wrap .companySlide_layer .t2{ font-size:.938em}
.introNav{ max-width:900px; margin:0 auto}
.introNav .nav{ margin-left:-1em}
.introNav .nav > li > a{ margin:1em 0 0 1em}

.contact_info > li{ margin-top:0}
.contact_info > li:first-child{ display:block}

.join_benefit .list > li .tt{ font-size:.875em}

#footer .customer_wrap .wrap1{ width:60%}
#footer .customer_wrap .wrap2{ width:37%}
}
@media screen and (max-width:1024px){
body{ font-size:15px}

.sclX{ overflow-x:auto; position:relative; padding-bottom:2em}
.sclX > table{ width:800px !important}
.sclX:after{ content:"\e90e"; font-family:xeicon!important; position: absolute; left:20%; bottom:.25em; background:rgba(0,0,0,.3); width:2.5em; line-height:.625em; font-size:2em; text-align:center; color:#fff; border-radius:5em; animation-name: sclXAni; animation-duration: 5s; animation-iteration-count: 3}
.sclX:hover:after{ display:none}
@keyframes sclXAni{
30% { left:0}
60% { left:20%}
}

#header .top_wrap .cate_wrap .all_wrap .all .gnb > li .dp2 > li{ width:50%}

.main_top_wrap .wrap_list{ margin:-.5em 0 0 -.5em}
.main_top_wrap .wrap_list > li .wrap_in{ margin:.5em 0 0 .5em}
.main_top_wrap .wrap_list > li.link_wrap .link{ margin:-.5em 0 0 -.5em}
.main_top_wrap .wrap_list > li.link_wrap .link > li > a{ margin:.5em 0 0 .5em}

.main_cate .gnb > li .dp1 .va .tit{ font-size:1.313em}
.main_cate .gnb > li .dp2{ padding:0; margin:-1em 0 0 -1em}
.main_cate .gnb > li .dp2 > li{ width:50%}
.main_cate .gnb > li .dp2 > li > a{ margin:1em 0 0 1em; height:2.5em; padding:0 2em 0 1em}
.main_cate .gnb > li .dp2 > li > a:hover{ padding-left:1em}
.main_cate .gnb > li .dp2 > li > a .mark{ display:none}
.main_cate .gnb > li .dp2 > li > a .mark:before{ font-size:.875em}
.main_cate .gnb > li .dp2 > li > a .arrow{ right:.313em}
.main_cate .gnb > li .dp2 > li > a .va{ font-size:.813em}
.main_cate .gnb > li .dp2 > li > a .lecture_icon > span{ display:none}
.main_cate .gnb > li .dp2 > li > a .lecture_icon > span:nth-child(1),
.main_cate .gnb > li .dp2 > li > a .lecture_icon > span:nth-child(2){ display:block}

.sampleSlide_wrap{ padding:1em 0}

.board_st.rst_ev{ border-top:2px solid #333; margin-top:2em; padding-top:1em}
.board_st.rst_ev,
.board_st.rst_ev tbody,
.board_st.rst_ev tr,
.board_st.rst_ev td{ display:block}
.board_st.rst_ev.hide,
.board_st.rst_ev .hide,
.board_st.rst_ev td.w_no{ display:none !important}
.board_st.rst_ev tr{ margin-bottom:2em; padding-bottom:2em; border-bottom:1px dashed #ddd}
.board_st.rst_ev td{ padding:0; border:none; text-align:center !important; width:100%; box-sizing:border-box}
.board_st.rst_ev td.w_tit{ font-size:1.25em !important; padding:.5em 0}
.board_st.rst_ev td.w_check{ display:block; text-align:left !important; width:100%; margin:.5em 0}

.board_st.rst_cate{}
.board_st.rst_cate .w_category,
.board_st.rst_cate .w_info,
.board_st.rst_cate .hide{ display:none}
.board_st.rst_cate td:before{ content: attr(data-cate); display:block}
.board_st.rst_cate .w_no2{ width:5em}
.board_st.rst_cate .w_no{ width:3em}

.board_st.rst_flex.line{ border-top:2px solid #333}
.board_st.rst_flex,
.board_st.rst_flex tbody,
.board_st.rst_flex tr{ display:block}
.board_st.rst_flex th,
.board_st.rst_flex td{ box-sizing:border-box}
.board_st.rst_flex th{ border-bottom:1px solid #ddd; border-top:none !important; padding:.5em 0; background:#f9f9f9}
.board_st.rst_flex td{ padding:1em 0}
.board_st.rst_flex tr{display: flex; flex-wrap:wrap}
.board_st.rst_flex tr .w_no{ width:10%; border-bottom:none}
.board_st.rst_flex tr .w_category{width:90%; text-align:left; border-bottom:none}
.board_st.rst_flex tr .w_tit{ width:60%; padding-left:10%; text-align:left !important}
.board_st.rst_flex tr .w_name{ width:20%}
.board_st.rst_flex tr .w_date{ width:20%}

.board_search_wrap{ display:flex; flex-wrap:wrap}
.board_search_wrap .left{margin-bottom:.5em; display:flex; flex:1 1 auto}
.board_search_wrap .left > form{ display:flex !important; flex:1 1 auto}
.board_search_wrap .left > form .label_select{ flex:1 1 auto}
.board_search_wrap .left > form .label_select select{ width:100%}
.board_search_wrap .right{ margin-left:auto; flex:1 1 auto}
.board_search_wrap .right > form{ display:flex}
.board_search_wrap .right .input_st[type=text]{ flex:1 1 auto; max-width:50%}
.board_search_wrap form > *{ margin-right:1px}

.cs_main_top .menu_wrap .list > li{ font-size:.813rem}
.cs_main_faq{ padding-right:0}
.cs_main_faq .list_wrap{ position:static; width:100%}

.mouseDown{ display:none}

.copyright_top .icon_wrap .in{ margin:0 1em}

.join_benefit .list > li .in{ padding:2em 1em}

.order_wrap{ padding-right:18em}
.order_wrap .fixIn,
.order_wrap .fixIn .fixObj{ width:17em}

.lecture_view_top{ position:relative; padding-right:9em}
.lecture_view_top .wrap_prod{ width:100%}
.lecture_view_top .wrap_prog{ width:8em; position:absolute; right:0; bottom:1em}
.lecture_view_top .wrap_btn{ width:100%; margin-top:1em}
.lecture_view_top .wrap_btn button{ width:48% !important; max-width:15em}
.lecture_view_top .prod_tt .tt{ width:100%; padding-left:0; padding-top:.5em; padding-right:2em; box-sizing:border-box}

.mpWrap{ width:90% !important; min-width:90% !important; height:90% !important; left:5% !important; top:10% !important}

.visualSlide_wrap .basic.el .wrap_in{ font-size:.25em}
.visualSlide_wrap .di_wrap > li > a, .di_wrap > li > .in{ font-size:.25em}
.visualSlide_wrap .basic.el .wrap_in .wrap_con2 > li{ margin-top:1em}

.w_no{ width:3em}
.w_date{ width:6em}
.w_name{ width:5em}
.w_btn{ width:6em}
}

@media screen and (max-width:800px){
body{ font-size:14px}

#header .logo{ max-width:50%}

#footer .customer_wrap{ padding:2em 0 7em 0; position:relative}
#footer .customer_wrap .wrap_tit .t1{ font-size:1.5em}
#footer .customer_wrap .wrap1{ width:100%}
#footer .customer_wrap .wrap2{ width:100%; margin-top:2em}
#footer .customer_wrap .link{ padding-right:0}
#footer .customer_wrap .partner_wrap_all{ position:absolute; left:3%; bottom:2em; width:94%; box-sizing:border-box}

#footer .menu_wrap{ border-bottom:none}
#footer .menu_wrap .box1{ padding:0; position:relative; display:flex; flex-direction: column}
#footer .menu_wrap .menu{ position:relative}
#footer .menu_wrap .menu:after{ content:""; position:absolute; left:0; bottom:0; width:100%; border-bottom:1px solid rgba(0,0,0,.5); box-shadow:1px 1px 1px rgba(255,255,255,.1)}
#footer .menu_wrap .menu > li{ width:25%}
#footer .menu_wrap .menu > li > a{ height: 2.5em; padding:0 .25em; border:1px solid rgba(0,0,0,.5); border-top:none; border-left:none; box-shadow:1px 1px 1px rgba(255,255,255,.1)}
#footer .menu_wrap .etc{ order:-1; width:100%}
#footer .menu_wrap .etc .gotop{ width:100%}

#footer .info_wrap .logo{ float:none; width:auto; max-width:10em}
#footer .info_wrap .info{ float:none; width:100%; margin:1em 0 0 0}
#footer .info_wrap .info > li.br{ clear:none;}
#footer .info_wrap .etc{ float:none; width:100%}
#footer .info_wrap .etc > dl{ border-top:1px solid rgba(255,255,255,.1); border-left:none; padding:2em 0 0 0; margin-top:2em}

#contents .doc{ padding-bottom:3em}

.main_top_wrap{ padding:1em 0}
.main_top_wrap .wrap_list > li.board_wrap{ width:100%}
.main_top_wrap .wrap_list > li.schedule_wrap{ width:33.33%}
.main_top_wrap .wrap_list > li.pass_wrap{ width:66.66%}
.main_top_wrap .wrap_list > li.pass_wrap .big{ max-width:10em}
.main_top_wrap .wrap_list > li.link_wrap{ width:100%}
.main_top_wrap .wrap_list > li .wrap_in .tit_wrap{ padding:0 1em}
.main_top_wrap .wrap_list > li .wrap_in .con_wrap{ padding:1em 1em}
.main_top_wrap .wrap_list > li.link_wrap .link > li > a{ padding:0 1em 0 1.75em; position:relative}
.main_top_wrap .wrap_list > li.link_wrap .link > li > a .icon{ position:absolute; left:.25em; margin-top:-.313em; top:50%}
.main_top_wrap .wrap_list > li.link_wrap .link > li > a .arrow{ position:absolute; right:.125em; margin-top:-.313em; top:50%}

.teacherSlide_wrap{ min-height: inherit; padding-bottom:2em}
.teacherSlide_wrap .wrap_tit{ font-size:1.5em}
.teacherSlide_wrap .el{ width:50% !important; padding-right:0; margin-left:0}
.teacherSlide_wrap .el.swiper-slide-active{}
.teacherSlide_wrap .el .teacher_st{ margin:0; padding-right:50%}
.teacherSlide_wrap .el .teacher_st .con{ display:block}
.teacher_st .con .in{ padding-top:1.25em}
.teacher_st .con .in .t1{ font-size:1.25em}

.site_list > li{ width:33.33%}

.lectureTop .lecture_gnb .box1{ padding:0}
.lectureTop .gnb > li{ width:20%; position:relative}
.lectureTop .gnb > li > .dp1{ border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(0,0,0,.2)}
.lectureTop .gnb > li > .dp1,
.fix.lectureTop .lecture_gnb .va_wrap.dp1{ height:2em; padding-top:0}
.lectureTop .gnb > li > .dp1 .va{ font-size:.813em}
.lectureTop .gnb > li > .dp1 .ani{ line-height:1em; width:3em; margin-left:-1.5em}
.lectureTop .gnb > li > .dp1 .ani .tt{ font-size:.625em}
.lectureTop .gnb > li:hover{ z-index:1}
.lectureTop .gnb > li .dp2{ display:none}

.lectureTop .lecture_tit .tit{ padding:.5em 0 1em 0; height:auto}
.lectureTop .lecture_tit .tit .va{ font-size:1.5em}
.lectureTop.fix .lecture_tit .tit{ height:2em; padding:.5em 5em 1em 3em}
.lectureTop.fix .lecture_tit .tit .va{ width:100%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; font-size:1.125em; text-align:left}

.submain_teacher,
.submain_video{ float:none; width:100%}
.submain_video .list > li{ width:50%}

.teacher_wrap .teacher_st,
.teacher_wrap .table_st{ float:none; width:100%}

.st1.teacher_st{ padding-right:50%; box-sizing:border-box; margin-bottom:1em}
.st1.teacher_st .con{ position:absolute; width:50%; height:100%}

.mall_view_top .mall_view_img,
.mall_view_top .mall_view_info{ float:none; width:100% !important}
.mall_view_top .mall_view_info{ margin-top:1em}
.mall_view_top.st1 .mall_view_img{ width:70% !important; margin:0 auto}

.mall_view_top .mall_view_btn{ padding-left:0}

.exam_st > li{ width:50%}
.program_list{ margin:-1em 0 0 -1em}
.program_list > li{ width:33.33%}
.program_list > li > .in{ margin:1em 0 0 1em}
.program_list > li > .in .img{ float:none; width:100%}
.program_list > li > .in .con{ float:none; width:100%; text-align:center; padding-top:.5em }

.tbox .t4{ font-size:1.5em}

.table_st th, .table_st td{ font-size:.813em; padding:.5em}

.table_st.rst1,
.table_st.rst1 tbody,
.table_st.rst1 tr,
.table_st.rst1 td{ display:block}

.table_st.rst1{ border-top:none; font-size:1.125em}
.table_st.rst1 tr{ border-top:2px solid #333; margin-bottom:1em;}
.table_st.rst1 tr:last-child{ border-bottom:2px solid #333; padding-bottom:1em}
.table_st.rst1 td{ border:none; width:100%; box-sizing:border-box; height:auto; text-align:left}
.table_st.rst1 td:before,
.table_st.rst1 .dataB:before,
.table_st.rst1 .dataA:after{ content:attr(data-th)}
.table_st.rst1 td button:not(.btn_icon){ width:100%; margin-bottom:.25em}
.table_st.rst1 .show{ display:inline-block; color:#009933; margin-left:.5em}

.table_st.rst1 .abw{ position:relative; padding-right:10em}
.table_st.rst1 .flw:after{ content:""; display:block; clear:both}
.table_st.rst1 .fll{ float:left}
.table_st.rst1 .d2{ width:50%}
.table_st.rst1 .d3{ width:33.33%}
.table_st.rst1 .d4{ width:25%}
.table_st.rst1 .progress{ margin:0 auto}

.table_st.rst1 .ab1{ position:absolute; right:0; top:10%; width:10em; height:80%}
.table_st.rst1 .ab1 button{ height:100%}

.table_st.rst1 .tst1{ margin:1em 0 -.5em 0;font-size:.938em; color:#01579B;}
.table_st.rst1 .tst1 .ml10{ margin-left:0 !important}
.table_st.rst1 .tst2{ font-size:.938em; color:#111; padding:1em 0 .25em .438em !important}
.table_st.rst1 .tst3{ padding:.25em 0 .25em 1.5em; position:relative}
.table_st.rst1 .tst3:after{ content:"-"; position:absolute; left:.625em; top:.125em}
.table_st.rst1 .link{ text-decoration:underline; line-height:1.5}

.table_st.rst1 .h1{ padding-top:.125em !important; padding-bottom:0 !important}


.table_st.rst1 .bt_chk button{ width:auto}
.table_st.rst1 .bt_chk:not(.ok) button:after{ content:"수강"; color:#009933; padding:0 0 0 .25em; font-size:1.125em}
.table_st.rst1 .bt_chk button .xi{ margin-top:-.125em}
.table_st.rst1 .bt_chk.ok button{ height:2.5em; padding:0 2em}

.table_st.rst1 .input_st.s3{ line-height:1.5em; height:3em; padding:.5em .5em; font-size:.875em}

.table_st .hide{ display:none !important}
.table_st .rdi{ display:inline-block !important; width:auto !important}
.table_st .acc{ text-align:center !important}


.prod_tt .tt{ width:100%; padding-left:0}
.prod_tt.st2{ padding-left:9em; min-height:12.5em; position:relative; font-size:1rem}
.prod_tt.st2 .img{ width:8em; position:absolute; left:0; top:0}
.prod_tt.st2 .tt{ display:block}

.price_tt{ text-align:right}
.price_tt .before{ display:inline-block; vertical-align:middle !important; padding-right:.5em}
.price_tt .after{ padding-left:0 !important}
.price_tt .sale{ position:static; display:inline-block; margin-left:.5em}

.s2.input_st{ height:3em}

.page_tit{ position:relative; padding-top:2em}
.page_tit:after{ content:""; position:absolute; left:-50%; top:0; width:200%; height:1em; background:#eee; box-shadow:0 1px 3px rgba(0,0,0,.2) inset}
.pop .page_tit:after{ display:none}
.pop .page_tit:first-child{ padding-top:0}
.page_tit .t1:before{ margin-top:1em}
.page_tit .t3{ padding-left:.75em}
.page_tit .t3::before{ left:0}

.box_st .page_tit:after{ display:none}
.box_st.size1{ padding:2em 1em}

.dp1_apply.dp2_view .sub_wrap{ padding:0}
.dp1_apply.dp2_view .sub_wrap .sub_gnb_wrap{ padding:0 3%; box-sizing:border-box}
.dp1_apply.dp2_view .page_tit.mt20{ margin-top:2em !important}
.dp1_apply.dp2_view .page_tit + table{ margin-bottom:3em}
.dp1_apply.dp2_view .tab_idx{ margin-bottom:1em}
.dp1_apply.dp2_view .w_category{ width:5em}

.tab_st{ display:flex; flex-wrap:wrap; padding:1em; border-radius:.5em}
.tab_st > li{ width:25%; font-size:.875em}
.dp1_mypage .tab_st > li{ width:33.33%}
.tab_st > li > a{ padding:0 1em}

.tab_st1 > li{ width:33.33%}
.tab_st1 > li > a{ font-size:.875em}

.lecture_tab .list > li{ width:33.33%}
.lecture_tab .list > li .va{ font-size:.875em}
.lecture_tab .list > li > .in{ height:3em}

.select.input_st{ padding-right:1em}

.board_st,
.board_paging,
.board_search_wrap,
.board_view_top, .board_view_middle, .board_view_bottom{ font-size:.813rem}
.board_st th,
.board_st td{ padding:1em .25em}

.board_view_top .info{ position:relative; padding:1em 0; margin-left:-1em; padding-right:3em}
.board_view_top .info > li{padding:0 1em 0 2em; margin-right:1em}
.board_view_top .info > li.btn{ padding:0; margin:0; position:absolute; right:1em; top:1em}

.board_st.view + .board_btn_wrap{ display:flex; }
.board_st.view + .board_btn_wrap > button{ flex:0 1 auto; white-space:nowrap; margin-left:auto}

.board_faq_cate > li{ width:25%}
.board_faq_cate > li:first-child{ width:50%}
.board_faq_cate > li > button .in{ padding:.25em}

.input_st{ padding-left:.5em; padding-right:.5em}
.input_st[msg=이메일을]:first-child{ margin-bottom:.5em}
.board_search_wrap button{ padding:0 1em}

.board_st .w_hit{ display:none}

.w_form_tit{ width:25%}

.my_search_wrap{ padding:1em}
.my_search_wrap em + em{ margin-top:1em; display:block}
.my_search_wrap em{ display:flex}
.my_search_wrap em input{ flex:1 1 auto; margin-right:1px}

.cs_main_top .twrap{ padding-top:3em; font-size:.625em; white-space:nowrap}
.cs_main_top .menu_wrap .wrap_tit{ font-size:1.5em; letter-spacing:-1px}
.cs_main_top .menu_wrap .list > li.cs{ width:100%}
.cs_main_top .menu_wrap .list > li{ width:33.33%}
.cs_main_top .menu_wrap .list > li.cs .in{ padding:1em .5em .5em .5em; font-size:1em}
.cs_main_top .menu_wrap .list > li .in{ padding:1em; font-size:.813em}
.cs_main_top .menu_wrap .list > li.de .in:hover{ padding-bottom:1em}
.cs_main_top .menu_wrap .list .csStyle:after{ content:""; clear:both; display:block}
.cs_main_top .menu_wrap .list .csStyle .cs_info{ float:left; width:50%; box-sizing:border-box}
.cs_main_top .menu_wrap .list .csStyle .cs_info .cs_no{ display:block}

.cs_main_faq{ padding-left:0}
.cs_main_faq .tit_wrap{ position:static; width:100%}
.cs_main_faq .tit_wrap .in{ padding:1.5em; position:relative}
.cs_main_faq .tit_wrap .t1{ display:none}
.cs_main_faq .tit_wrap .t2{ display:inline-block; font-size:1.5em}
.cs_main_faq .tit_wrap .t3 br{ display:none}
.cs_main_faq .tit_wrap .more{ position:absolute; right:1em; top:1.75em; margin-top:0}
.cs_main_faq .list_wrap{ border-left:none}
.cs_main_faq .board_faq_cate > li{ width:16.66%; font-size:.813em}

.cs_main_con > li.w1,
.cs_main_con > li.w2{ width:100%}

.cs_main_con > li .link{ font-size:.875em; padding-left:.5em; padding-right:.25em}

.companySlide_wrap .companySlide_layer > .va{ margin-bottom:0}
.companySlide_wrap .companySlide_layer .t2 br{ display:none}
.introNav{ display:none}

.contact_info > li{ display:block; margin-left:0}

.company_wrap{ font-size:.688em}
.company_wrap .partenrship_form .page_tit:after{ display:none}

.copyright_top .wrap_in{ padding:0 3em}
.copyright_top .icon_wrap .in{ margin:0 .5em}

.join_benefit .list > li{ width:50%}

.tbox{ font-size:.875em}

.step_st > li{ width:15%; margin:0 5%; font-size:.813rem}
.step_st > li .icon_wrap .line{ width:150%}

.input_tt{ display:block; margin-top:.25em}
.label_wrap_fix > li{ width:50%}
.s2.input_sec + .s2.input_sec{ display:block}

.total_wrap{ font-size:.875em !important; padding:2em 1em !important; text-align:center !important; margin-bottom:-1em}

.board_btn_wrap{ display:flex; flex-wrap:wrap}
.board_btn_wrap .fl,
.board_btn_wrap .fr{ display:flex; flex:1 1 auto; margin:.25em}
.board_btn_wrap .fl > *,
.board_btn_wrap .fr > *{ flex:1 1 auto; margin-right:-1px; padding-left:0; padding-right:0; min-width:10em}
.board_btn_wrap.ac{ justify-content:center}

.order_wrap{ padding-right:0}
.order_wrap .fixIn{ margin-top:3em}
.order_wrap .fixIn,
.order_wrap .fixIn .fixObj{ width:100%; position: static !important}

.dp1_mypage .w_category{ width:10em}

.lecture_view_top{ padding-right:0}
.lecture_view_top .wrap_prod{ width:100%}
.lecture_view_top .wrap_prog{ width:40%; position: static; margin:0; margin-top:1em; box-sizing:border-box}
.lecture_view_top .wrap_btn{ width:60%; margin-top:3em}

.invite_top .list > li{ width:100%}

.lecture_view_top button.input_st{ padding:.5em .25em}
.lecture_view_top button.input_st .xi{ font-size:1em}
}
@media screen and (max-width:680px){
.teacherSlide_wrap .el{ width:100% !important}
.teacherSlide_wrap .el .teacher_st,
.teacherSlide_wrap .swiper-slide-active.el .teacher_st{ padding-right:70%}
.teacherSlide_wrap .el .teacher_st .con{ width:70%}

.copyright_top .icon_wrap .in{ font-size:.688em}
.copyright_top .twrap2{ font-size:.813em}

.label_wrap_fix > li{ width:100%}

#header .home_wrap .etc_wrap .sns_list > li > a{ padding:0 .5em}
#header .home_wrap .etc_wrap .sns_list > li > a .tc:after{ content: attr(data-tit)}
#header .home_wrap .etc_wrap .sns_list > li > a .tt{ display:none}
#header .home_wrap .etc_wrap .sns_list > li > a .arrow{ padding-left:1.5em !important}
#header .home_wrap .etc_wrap .sns_list > li .teacher_sns_list > li > a{ padding-left:.5em; padding-right:2em}
#header .home_wrap .etc_wrap .sns_list > li .teacher_sns_list > li > a .arrow{ right:.5em}
#header .home_wrap .etc_wrap .sns_list > li .teacher_sns_list > li > a .tt:before{ display:none}
}
@media screen and (max-width:480px){
#header .top_wrap .cate_wrap{ border-top:none}
#header .top_wrap .search{ position:absolute; width:100%; right:0; padding-right:3%; margin:0; box-sizing:border-box}
#header .top_wrap .search .searchBtn{ position:absolute; right:5em; margin-right:0; top:0; display:block}
#header .top_wrap .search .searchBtn .va{ font-size:1.75em; color:#111}
#header .top_wrap .search .in{ display:none; position:absolute; right:0; background:#fff; width:100%; padding:0 3.5%; box-sizing:border-box; border:none; border-bottom:3px solid #111; border-top:1px dashed #ddd}
#header .top_wrap .search .in .inp{ height:4em; font-size:1.125em}
#header .top_wrap .search .in .btn{ right:2%}
#header .top_wrap .search.on .in{ display: block}
#header .top_wrap .search.on .searchBtn .xi:before{content:"\e921"}
.mpWrap .wrap_close .label_st{ margin-left:1em; font-size:.75em}

.teacherSlide_wrap .el{ width:100% !important}
.teacherSlide_wrap .el .teacher_st,
.teacherSlide_wrap .swiper-slide-active.el .teacher_st{ padding-right:55%}
.teacherSlide_wrap .el .teacher_st .con{ width:55%}

.exam_st > li{ width:100%}

.companySlide_wrap .companySlide_layer .t1{ font-size:1.5em; letter-spacing:-1px}
.companySlide_wrap .companySlide_layer .t2{ font-size:.813em; line-height:1.4}
.companySlide_wrap .companySlide_layer .sec{ margin:1em auto; height:1px; width:2em}

.invite_top .t2{ font-size:2.5em}

.copyright_top{ font-size:.75em}
.copyright_top .tt1{ font-size:2.5em}
.copyright_top .tt1 > i{ display:inline-block}
.copyright_top .tt2 br{ display:none}
.copyright_top .icon_wrap .in{ font-size:.5em}
}
@media screen and (max-width:380px){
body{ font-size:13px}
}
@media all and (orientation:landscape){

}