@charset "utf-8";
/* Font-Face */
html{margin:0; padding:0; width:100%; overflow-y:scroll;}
body{margin:0; padding:0; width:100%; font-family: 'Noto Sans Korean', 'Nanum Gothic',Dotum,Helvetica,AppleGothic,Sans-serif; font-size:13px; line-height:1; color:#808080;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{font-family: 'Noto Sans Korean', 'Nanum Gothic',Dotum,Helvetica,AppleGothic,Sans-serif;}
img{margin:0; padding:0;}
a, a img{border:none; outline:0; selector-dummy : expression(this.hideFocus=true); text-decoration:none;}
ul, ol, dt, dd, li {list-style-type:none;}
h1,h2, h3, h4 ,h5{padding:0px; margin:0px;}
hr {display: none;}
a:link {color:#666666; text-decoration:none;}
a:visited {color:#666666; text-decoration:none;}
a:active {color:#fd6c02; text-decoration:none;}
a:hover {color:#3f8dc2; font-weight:bold; text-decoration:none;}

legend, label.hidden{position: absolute; top: 0px; left: 0px; visibility:hidden; width:0; height:0; text-indent:-9999px; color:#808080;}
caption {visibility:hidden; width:0;height:0;text-indent:-9999px;color:#808080;}
input[type=submit] {border:0 none; padding:0; background:transparent; vertical-align:middle; color:#fff; font-size:0px; line-height:0px; cursor:pointer;}
input[type=button] {padding:0; vertical-align:middle; cursor:pointer;}
div{color:#666666; margin:0; padding:0;}
textarea { border:1px solid #ccc; font-family:'Noto Sans Korean', 'Nanum Gothic',Dotum,AppleGothic,sans-serif; padding:3px 0 1px 3px;}
select, img {margin:0; padding:0;}

h2{margin:0 auto; padding-top:35px; padding-bottom:10px; text-align:left; text-align:center; font-size:24px; color:#ffffff; letter-spacing:-1px; font-weight:bold;}
h3{display:none; margin:0 auto; text-align:left; font-size:36px; color:#222222;  letter-spacing:-1px; font-weight:bold; letter-spacing:-2px;}
h4{padding-top:5px; margin-bottom:10px; font-size:20px; color:#1453a5; letter-spacing:-1px; font-weight:bold;}
h5{padding-top:5px; margin-bottom:10px; font-size:22px; color:#666666; }
span.bold { font-weight:bold;}

/* dim */
div#bg_dim{display:none;}

/*total*/
#wrap{position:relative; margin:0 auto; min-width:1090px; height:left !important;  min-height:100%; height:100%;}
#wrapmain{position:relative; margin:0 auto; width:100%; height:auto; min-height:1000px!important;  height:100%;}
#header{position:relative; margin:0 auto; width:100%; /*height:204px;*/ background:url(/files/images/top_bg.png) repeat-x top center;}
#container{position:relative; overflow:hidden; margin:0 auto; min-width:1040px; height:auto !important;  min-height:650px; height:100%;}
#footer{position:relative; clear:both; margin:0 auto;  bottom:0; width:100%; height:133px; background:#555555;}

/* left menu */
.left_menu h2{font-weight:500!important;}

/* header */
#topmenu {position:relative; margin:0 auto; padding:0; width:1090px; height:150px;}
.util {float:right;  width:880px;  color:#a7abb4; padding-top:8px; text-align:right; font-size:12px;}
.util a{color:#fff; margin-top:5px;}
.util a:hover{color:#b68655; text-decoration:none;}
.logo {margin:0 auto; padding-top:40px;  font-weight:bold; text-align:left; width:100%;}
input.tops {width:118px; height:25px; margin-top:3px;  color:#fff; border:0px; background:#52596b;}
span.top_btn{background:#7eb3eb; border:1px solid #6ba5df; color:#fff; padding:4px 12px;}

.top_left_login{float:left; color:#FFF; width:700px; text-align:right; margin-top:-5px;}
.top_login{float:right; width:180px; margin-top:2px; height:23px;}
.top_login_btn {margin-left:-3px; border:0px; color:#fff; font-size:13px; background:#7eb3eb; border:1px solid #6ba5df; padding:4px 12px;}
.stw_top_login{width:100px; margin-right:3px; height:23px; font-size:13px; color:#222; border:1px solid #dfdfdf;}


/* Gnb */
div.mobile_util{display:none;}
.gnbDiv .gnbWrap{height:auto!important;}
.gnbDiv .gnbWrap .twoDep{height:430px!important;}
.gnbDiv .gnbWrap .gnb ul{display:table!important;}
.gnbDiv .gnbWrap .gnb ul li{display:table-cell!important; float:none!important; width:auto!important;}
.gnbDiv .gnbWrap .gnb ul li a.oneDep{letter-spacing:inherit!important; font-size:18px!important; font-weight:450!important;}
.gnbDiv .gnbWrap li .twoDep a{padding:10px 0 10px 0!important; font-size:14px!important; font-weight:400!important;}


/*foot*/
#footer_copy  {position:relative;  margin:0  auto;  width: 1100px; height:133px;}
.flogo {float:left; text-align:left; width: 133px;}
.fcopy {float:left; text-align:left; width: 700px;}
.fcopy_menu img{float:left;}
.fcopy_text{margin:0;}
.fright {float:left; text-align:left; width:165px;}
.fright img{float:left;}
.fkb {float:right; margin-top:20px; width:98px;}

/* 여백 */
.ml5  {margin-left:5px !important;}
.ml10  {margin-left:10px !important;}
.ml15  {margin-left:15px !important;}
.ml20  {margin-left:20px !important;}
.ml25  {margin-left:25px !important;}
.ml35  {margin-left:35px !important;}
.mtop5 {margin-top:5px !important;}
.mtop10 {margin-top:10px !important;}
.mtop15 {margin-top:15px !important;}
.mtop20 {margin-top:20px !important;}
.mtop25 {margin-top:25px !important;}
.mtop30 {margin-top:30px !important;}
.mtop35 {margin-top:35px !important;}
.mbottom5 {margin-bottom:5px !important;}
.mtop_m20 {margin-top:-20px !important;}

/* 메인페이지 */
#main{margin:0 auto;}
#main p{margin:0;}
#main div.info_box{overflow:hidden;}
#main div.info_box h3{display:block; height:46px; line-height:46px; text-align:center; font-size:18px; font-weight:450; border-bottom:1px solid #bebebe; background:url(/files/images/bg_board.jpg) no-repeat 50% 50% / cover;}
#main div.info_box > div{float:left;}
#main div.info_box > div.notice{width:320px; height:286px; border:1px solid #bebebe; box-sizing:border-box; background-color:#fff;}
#main div.info_box > div.notice div.bbody{padding:20px;}
#main div.info_box > div.notice div.bbody div.btext:nth-child(n+2){margin-top:18px;}
#main div.info_box > div.notice div.bbody div.btext li{overflow:hidden; font-size:15px;}
#main div.info_box > div.notice div.bbody div.btext li > a{float:left; margin-bottom:10px;}
#main div.info_box > div.notice div.bbody div.btext li > span{float:right;}

/* 메인 비주얼 */
.main_visual{overflow:hidden;}
.main_visual div.slide a{display:block; width:100%; height:100%;}
.bx-wrapper{margin:0 auto;}

/* 이달의 할인강좌 */
#main div.info_box{max-width:1090px; margin:0 auto;}
#main div.info_box > div.sale_wrap{width:200px; height:286px; margin-left:23px; position:relative; overflow:hidden; border:1px solid #bebebe; box-sizing:border-box;}
#main div.info_box > div.sale_wrap a{display:block;}
#main div.info_box > div.sale_wrap img{width:100%; height:auto; position:absolute; top:45px; left:0;}

#main div.info_box > div.academy_wrap{width:80px; margin-left:23px;}
#main div.info_box > div.academy_wrap ul{padding:5px 0;}
#main div.info_box > div.academy_wrap ul li a{display:block; width:100%; height:80px; position:relative; line-height:80px; text-align:center;}
#main div.info_box > div.academy_wrap ul li a:before{content:''; width:80px; height:80px; position:absolute; top:50%; left:50%; background:url(/files/images/icon_sns.png) no-repeat 0% 50%; border-radius:50%; transform:translate(-50%, -50%)}

#main div.info_box > div.academy_wrap ul li a:hover:before{box-shadow:0px 0px 5px rgba(0, 0, 0, 0.5);}
#main div.info_box > div.academy_wrap ul li:nth-child(2) a:before{background-position:-80px 50%;}
#main div.info_box > div.academy_wrap ul li:last-child a:before{background-position:-160px 50%;}
#main div.info_box > div.academy_wrap ul li:nth-child(n+2){margin-top:18px;}

#main div.info_box > div.grow_wrap{width:420px; margin-left:23px;}
#main div.info_box > div.grow_wrap ul{overflow:hidden;}
#main div.info_box > div.grow_wrap ul li{float:left;}
#main div.info_box > div.grow_wrap ul li:nth-child(n+2){margin-left:20px;}
#main div.info_box > div.grow_wrap ul li a{display:block; width:200px; height:185px; position:relative; font-size:24px; border:1px solid #bebebe; box-sizing:border-box;}
#main div.info_box > div.grow_wrap ul li a p{padding:5px 0; text-align:center; background:linear-gradient(180deg, rgba(255,255,255,1) 60%, rgba(128,212,238,0) 125%);}
#main div.info_box > div.grow_wrap ul li a:before{content:''; width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;}
#main div.info_box > div.grow_wrap ul li:nth-child(1) a{background:url(/files/images/bg_portfolio.jpg) no-repeat 50% 50% / cover;}
#main div.info_box > div.grow_wrap ul li:nth-child(2) a{background:url(/files/images/bg_grow_webtoon.jpg) no-repeat 50% 50% / cover;}
#main div.info_box > div.grow_wrap ul li a span{display:block; padding:5px 0; font-size:12px; line-height:1em;}
#main div.info_box > div.grow_wrap dl{clear:both; display:table; position:relative; table-layout:fixed; width:100%; height:80px; margin:20px auto 0; font-size:18px; text-align:center; box-sizing:border-box; background-color:#000;}
#main div.info_box > div.grow_wrap dl:after{content:''; width:1px; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background-color:#fff;}
#main div.info_box > div.grow_wrap dt{display:table-cell; width:50%; vertical-align:middle; color:#fff;}
#main div.info_box > div.grow_wrap dd{display:table-cell; width:50%; vertical-align:middle;}
#main div.info_box > div.grow_wrap dd a{color:#fff;}

#main div.contents{max-width:1090px; margin:0 auto; padding:56px 0;}
#main div.gray_box{padding:50px 0; background-color:#f5f5f5;}
#main div.contents h3, #main div.gray_box div.feedback h3{display:block; position:relative; margin-bottom:30px; color:#518dcd;}
#main div.contents h3:after, #main div.gray_box div.feedback h3:after{content:''; width:100%; height:5px; position:absolute; bottom:-15px; left:0; background:url(/files/images/sky_dotted.png) repeat-x 50% 50%;}
#main div.contents h3 span, #main div.gray_box div.feedback h3 span{display:inline-block; margin-left:20px; font-size:24px;}

#main div.contents div.lecture ul.lectureWrap li a, 
#main div.contents div.free ul li a, 
#main div.gray_box div.feedback ul li a{display:block; width:198px; height:198px; position:relative; overflow:hidden; text-align:center; border:1px solid #888; border-radius:11px; box-sizing:border-box; box-shadow:2px 5px 11px rgba(150, 150, 150, 0.1);}

#main div.contents div.lecture ul.rightArea li a img.mobile{display:none;}

#main div.contents ul li a:before, #main div.gray_box div.feedback ul li a:before{content:''; width:200px; height:200px; position:absolute; top:0; left:0; z-index:0; background:url(/files/images/splite_freepass.jpg) no-repeat 0 0 / cover; transition:all 0.3s;}
#main a.more{background-color:#bebebe;}

#main div.contents ul li a span, #main div.gray_box div.feedback ul li a span{width:100%; height:60px; line-height:60px; position:absolute; bottom:0; left:0; box-sizing:border-box; font-size:17px; font-weight:700; background-color:#fff;}
#main div.contents ul li a.row_br span, #main div.gray_box div.feedback ul li a.row_br span{line-height:22px; padding:5px 0;}

#main div.contents > div:nth-child(n+2){margin-top:56px;}
#main div.contents li.more a:before{content: ''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(/files/images/bg_more_link.png) no-repeat 50% 50% / contain;}
#main div.contents li.more a:hover:before{transform:rotate(180deg);}

#main div.contents div.lecture{overflow:hidden;}
#main div.contents div.lecture ul.leftArea{float:left; width:calc(100% - 220px);}
#main div.contents div.lecture ul.rightArea {float:right}
#main div.contents div.lecture ul.rightArea li:last-child{height:422px; margin-top:20px;}
#main div.contents div.lecture ul.packageWrap{display:flex; gap:23px;}
#main div.contents div.lecture ul.packageWrap li a{display:block; border-radius:0; border:none;}
#main div.contents div.lecture ul.packageWrap li a img{width:100%}
#main div.contents div.lecture ul.lectureWrap, #main div.feedback ul, #main div.free ul{display:flex; gap:25px; flex-wrap:wrap; margin-top:20px;}

#main div.free{max-width:1090px; margin:0 auto;}
#main div.free ul li a:before{background:url(/files/images/splite_free_lecture.jpg) no-repeat 0 0 / cover;}
#main div.free ul li:nth-child(2) a:before{background-position:-400px 0;}
#main div.free ul li:nth-child(3) a:before{background-position:-1200px 0;}
#main div.free ul li:nth-child(4) a:before{background-position:-1400px 0;}
#main div.free ul li a:after{content:''; width:43px; height:43px; position:absolute; top:10px; left:15px; background:url(/files/images/icon_youtube.png) no-repeat 0 0 / contain;}


/* 피드백 */
#main div.gray_box div.feedback{max-width:1090px; margin:0 auto;}
#main div.gray_box div.feedback ul li a:before{background:url(/files/images/splite_freedback.jpg) no-repeat 0 0 / cover;}
#main div.gray_box div.feedback ul li:nth-child(2) a:before{background-position:-200px 0;}
#main div.gray_box div.feedback ul li:nth-child(3) a:before{background-position:-400px 0;}
#main div.gray_box div.feedback ul li a:after{content:''; width:43px; height:43px; position:absolute; top:10px; left:15px; background:url(/files/images/icon_youtube.png) no-repeat 0 0 / contain;}

/* Quick Menu */
#quick_box{position:relative; margin:0 auto; padding:0; width:1350px; z-index:999999;}
.right_banner{width:106px;}

/*sub*/
#subdepth {position:relative; margin:0 auto; width:100%; height:30px; float:right; text-align:left; border-bottom:1px solid #ddd;}
#subdepth .depth {margin:0 auto; width:1050px; height:20px; text-align:right; padding-top:5px; padding-right:33px;}
#sub {position:relative; margin:0 auto; width:1077px; height:100%;}
#sub_content_full {margin:0 auto; float:left; padding:35px 0px 30px 0px; width:100%;}
#sub_content {position:relative; margin:0 auto; float:left; padding:35px 20px 30px 20px; width:897px;}
.section {margin:0 auto; padding-top:0px;}
.sub_title {font-size:15px; font-weight:bold; color:#333; text-align:left; width:100%; padding-bottom:10px;}
.content {margin:0 auto; padding-top:30px; width:100%;}

.rgt {float:right; padding-left:20px;}
.lft {float:left; padding-right:20px;}
.full_img{margin:0 auto; margin-top:20px;}


.img_small_section{margin-top:20px;overflow:hidden;}
.img_small_section.first{margin-top:20px !important;overflow:hidden;}
.img_small_section:first-child{margin-top:0;}

.table.t_board td {vertical-align: middle;}
.box {border-top:1px solid #555; padding-top:20px;}

/* 강좌탭 */
.detail_tap {width:100%; border-bottom:solid 0px #ddd; }
.detail_tap .nav > li > a{padding:8px 0px; margin:0; border:1px solid #eeeeee; height:43px;}

ul.course-tap {margin-bottom:50px; }
ul.course-tap > li {border-top:2px solid #282828;}
ul.course-tap > li.active > a{background:#ececec; color:#282828;}
ul.course-tap > li.active > a:hover{background:#ececec; color:#282828;}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{background:#ececec;}
.btn-taps li{border-top:2px solid #282828; width:25%;}

/* 통합검색 */
.serch-title {font-size: 36px; font-weight: bold; color: #143a82; position: relative; top: 6px;}
.tword {position: relative; width: 550px; height: 44px; border: 0; line-height: 25px; font-size: 18px; outline: 0 none; box-shadow: none; padding-left: 8px; border: #143a82 2px solid; font-weight: bold;}
.tword-box {width:99%;text-align:center;padding-bottom: 30px; margin: 0 auto;}
.btn-tword {position: relative; top: -3px; left: -4px;}

/* 서브메뉴 가로형 */
.submenu_list {margin:0 auto; margin-bottom: 20px; margin-top: 20px; width:1050px;}
.btn-submenu { margin: 3px; background: #FFF; border:1px solid #dadada; font-size: 14px; border-radius:3px;}
.btn-submenu:hover {border:1px solid #cacaca; background-color:#f9f9f9; color: #333;}
.btn-submenu.focus { color: #ffffff; background-color: #2774ae; border: 0; border-radius: 3px;}

/* 3차메뉴 가로형 */
.depth3_list {border-bottom: 1px solid #ddd; margin-top: 30px;}
.btn-depth3 {background-color: #fff; border: 0; color: #333; font-weight: bold; }
.btn-depth3.focus {background-color: #f6f6f6; border: 0; color: #333; outline: none; font-weight: bold;}
.btn-depth3:hover {background-color: #fefaef; color: #333; font-weight: bold;}

/* Tablet */
@media all and (min-width:768px) and (max-width:1119px) {
div#bg_dim{position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0, 0, 0, 0.5); z-index:99;}

/* Logo */
.logo{padding:10px 0;}
.logo a{display:block; width:110px;}
.logo a img{width:100%;}
.util{display:none;}
#topmenu{width:100%; height:auto; padding:0 20px; background-color:#fff; border-bottom:1px solid #efefef}

/* Gnb */
div.mobile_util{display:block; position:absolute; top:30px; right:20px;}
div.mobile_util.on{position:fixed; z-index:10000;}
a.go_login{display:inline-block; width:30px; height:30px; margin-right:10px; vertical-align:top; background:url(/files/images/icon_login.png) no-repeat 0% 50% / 60px 30px;}
div.mobile_util.on a.go_login{background-position:-30px 50%;}
#gnb_btn{width:30px; height:30px; padding:0; background:none;}
#gnb_btn span{display:block; width:30px; height:5px; position:relative; background-color:#7e6bad;}
#gnb_btn span:before{content:''; width:100%; height:5px; position:absolute; top:-10px; left:0; background-color:#7e6bad;}
#gnb_btn span:after{content:''; width:100%; height:5px; position:absolute; bottom:-10px; left:0; background-color:#7e6bad;}

#gnb_btn.active span:before{transform:rotate(-45deg); top:0; background-color:#fff;}
#gnb_btn.active span:after{transform:rotate(45deg); bottom:0; background-color:#fff;}
#gnb_area{display:none; width:250px!important; height:100%!important; padding-top:88px!important; position:fixed!important; top:0; left:initial!important; right:0; z-index:9999; background-color:#7E6BAD;}
.gnbDiv{overflow:visible!important; height:auto!important;}
.gnbDiv .gnbWrap .gnb{width:100%!important;}
.gnbDiv .gnbWrap .gnb ul{width:100%!important;}
.gnbDiv .gnbWrap .gnb ul li{display:block!important; width:100%!important;}
.gnbDiv .gnbWrap .gnb ul li a.oneDep{position:relative;}
.gnbDiv .gnbWrap .gnb ul li a.oneDep:before{content:''; position:absolute; top:50%; right:18px; width:3px; height:15px; background-color:#fff; transform:translate(0, -50%);}
.gnbDiv .gnbWrap .gnb ul li a.oneDep:after{content:''; position:absolute; top:50%; right:5%; width:15px; height:3px; background-color:#fff; transform:translate(0, -50%);}
.gnbDiv .gnbWrap .gnb ul li.on a.oneDep{color:#fff!important;}
.gnbDiv .gnbWrap .gnb ul li a.oneDep.active:before{display:none;}
.gnbDiv .gnbWrap{overflow:visible!important;}
.gnbDiv .gnbWrap .twoDep{display:none!important;}
.gnbDiv .gnbWrap .twoDep.on{display:block!important; height:auto!important;}

#quick_box{display:none;}
.pop-layer1, .pop-layer2, .pop-layer3, .pop-layer4, .pop-layer5, .pop-layer6, .pop-layer7, .pop-layer8, .pop-layer9, .pop-layer10, .pop-layer11, .pop-layer12, .pop-layer13, .pop-layer14, .pop-layer15, .pop-layer16{width:80%!important; position:fixed!important; top:50%!important; left:50%!important; transform:translate(-50%, -50%);}
.pop-layer1 img, .pop-layer2 img, .pop-layer3 img, .pop-layer4 img, .pop-layer5 img, .pop-layer6 img, .pop-layer7 img, .pop-layer8 img, .pop-layer9 img, .pop-layer10 img, .pop-layer11 img, .pop-layer12 img, .pop-layer13 img, .pop-layer14 img, .pop-layer15 img, .pop-layer16 img{width:100%!important; height:auto!important;}

/* Main */
.main_visual div.bx-wrapper .bx-viewport{height:auto!important;}
.main_visual div.slide a{position:relative; height:0; padding-top:40.5%; overflow:hidden;}
.main_visual div.slide img{position:absolute; top:0; left:50%; transform:translate(-50%, 0);}
.main_visual div.slide a img{height:100%; position:absolute; max-width:initial; top:50%; left:50%; transform:translate(-44%, -50%);}

#main div.gray_box, #main div.contents{width:100%; padding:50px 20px;}
#main div.contents h3, #main div.gray_box div.feedback h3{text-align:center}


#main div.info_box > div.notice{width:calc(100% - 330px);}
#main div.info_box > div.notice div.bbody{width:100%;}
#main div.info_box > div.sale_wrap{margin-left:25px;}
#main div.info_box > div.academy_wrap{margin-left:25px;}

#main div.info_box > div.grow_wrap{width:100%; margin:30px 0; clear:both;}
#main div.info_box > div.grow_wrap ul li{width:calc(50% - 13px);}
#main div.info_box > div.grow_wrap ul li a{width:100%;}
#main div.info_box > div.grow_wrap dl{display:block; height:auto; padding:20px 0;}
#main div.info_box > div.grow_wrap dl:after{display:none;}
#main div.info_box > div.grow_wrap dl dt{display:block; width:100%;}
#main div.info_box > div.grow_wrap dl dd{display:block; width:100%;}

#main div.gray_box div.feedback{width:100%;}

/* 강의 */
#main div.contents div.lecture ul.lectureWrap, #main div.feedback ul, #main div.free ul{justify-content:center;}

#main div.contents div.lecture ul.packageWrap{float:initial; width:100%;}
#main div.contents div.lecture ul.packageWrap li{flex-basis:50%;}
#main div.contents div.lecture ul.packageWrap li a{width:100%;}
#main div.contents div.lecture ul.rightArea{display:flex; margin-top:23px; float:initial; justify-content:center; gap:25px}
#main div.contents div.lecture ul.rightArea li a img.pc{display:none;}
#main div.contents div.lecture ul.rightArea li a img.mobile{display:block;}
#main div.contents div.lecture ul.rightArea li:last-child{height:auto; margin-top:0;}
#main div.contents div.lecture ul.rightArea li:last-child a{
	display: block;
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 1px solid #888;
    border-radius: 11px;
    box-sizing: border-box;
    box-shadow: 2px 5px 11px rgb(150 150 150 / 10%);
}
#main div.contents div.lecture ul.leftArea{float:initial; width:100%; justify-content:center;}




/* Footer */
#footer_copy{width:100%; height:auto; padding:30px 0;}
.flogo{display:none;}
.fcopy{width:100%; float:none;}
.fcopy .fcopy_menu{display:none;}
.fright{display:none;}
.fkb img{display:none;}

/* Sub Left */
#wrap{min-width:100%;}
#container{min-width:100%;}
#sub{width:100%;}
#sub_left{display:none;}
#sub_content{float:none; width:100%;}
.section > img{width:100%;}

/* Sub Visual */
.bbs_header img{width:100%;}

/* Sub Table */
table.board tbody tr:first-child {display: none;}
table.board tbody td.bbs-lecnum {display: none;}
table.board tbody td.bbs-lecdate {display: none;}
table.board tbody td.bbs-lecview {display: none;}
table.board tbody tr td.bbs-lecname {overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}
table.board tbody tr td.bbs-lecname img{display:none;}

table.table_write td{border-right:none;}
.info_title{padding:20px;}
.form-control{width:100%;}
.lec-buy-table, .lec-buy-table tbody, .lec-buy-table tr, .lec-buy-table td{display:block; width:100%!important;}
.lec-buy-table .lec-ltext{padding:0 0 0 15px; height:40px; line-height:40px; }
.info table td{margin-left:0; padding:20px 15px; overflow:hidden;}

/* Login */
.login-text{display:none;}
}

/* Mobile */

@media all and (max-width:767px) {
div#bg_dim{position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0, 0, 0, 0.5); z-index:99;}

/* Logo */
.logo{padding:10px 0;}
.logo a{display:block; width:110px;}
.logo a img{width:100%;}
.util{display:none;}
#topmenu{width:100%; height:auto; padding:0 20px; background-color:#fff; border-bottom:1px solid #efefef}

/* Gnb */
div.mobile_util{display:block; position:absolute; top:30px; right:20px;}
div.mobile_util.on{position:fixed; z-index:10000;}
a.go_login{display:inline-block; width:30px; height:30px; margin-right:10px; vertical-align:top; background:url(/files/images/icon_login.png) no-repeat 0% 50% / 60px 30px;}
div.mobile_util.on a.go_login{background-position:-30px 50%;}
#gnb_btn{width:30px; height:30px; padding:0; background:none;}
#gnb_btn span{display:block; width:30px; height:5px; position:relative; background-color:#7e6bad;}
#gnb_btn span:before{content:''; width:100%; height:5px; position:absolute; top:-10px; left:0; background-color:#7e6bad;}
#gnb_btn span:after{content:''; width:100%; height:5px; position:absolute; bottom:-10px; left:0; background-color:#7e6bad;}

#gnb_btn.active span:before{transform:rotate(-45deg); top:0; background-color:#fff;}
#gnb_btn.active span:after{transform:rotate(45deg); bottom:0; background-color:#fff;}
#gnb_area{display:none; width:250px!important; height:100%!important; padding-top:88px!important; position:fixed!important; top:0; left:initial!important; right:0; z-index:9999; background-color:#7E6BAD; overflow-y:scroll;}
.gnbDiv{overflow:visible!important; height:auto!important;}
.gnbDiv .gnbWrap{height:calc(100vh - 88px)!important; overflow-y:scroll!important;}
.gnbDiv .gnbWrap .gnb{width:100%!important; height:auto!important;}
.gnbDiv .gnbWrap .gnb ul{width:100%!important;}
.gnbDiv .gnbWrap .gnb ul li{display:block!important; width:100%!important;}
.gnbDiv .gnbWrap .gnb ul li a.oneDep{position:relative;}
.gnbDiv .gnbWrap .gnb ul li a.oneDep:before{content:''; position:absolute; top:50%; right:30px; width:3px; height:15px; background-color:#fff; transform:translate(0, -50%);}
.gnbDiv .gnbWrap .gnb ul li a.oneDep:after{content:''; position:absolute; top:50%; right:24px; width:15px; height:3px; background-color:#fff; transform:translate(0, -50%);}
.gnbDiv .gnbWrap .gnb ul li.on a.oneDep{color:#fff!important;}
.gnbDiv .gnbWrap .gnb ul li a.oneDep.active:before{display:none;}
.gnbDiv .gnbWrap .twoDep{display:none!important;}
.gnbDiv .gnbWrap .twoDep.on{display:block!important; height:auto!important; margin-bottom:0!important; border-bottom:none!important;}

#quick_box{display:none;}
.pop-layer1, .pop-layer2, .pop-layer3, .pop-layer4, .pop-layer5, .pop-layer6, .pop-layer7, .pop-layer8, .pop-layer9, .pop-layer10, .pop-layer11, .pop-layer12, .pop-layer13, .pop-layer14, .pop-layer15, .pop-layer16{width:80%!important; position:fixed!important; top:50%!important; left:50%!important; transform:translate(-50%, -50%);}
.pop-layer1 img, .pop-layer2 img, .pop-layer3 img, .pop-layer4 img, .pop-layer5 img, .pop-layer6 img, .pop-layer7 img, .pop-layer8 img, .pop-layer9 img, .pop-layer10 img, .pop-layer11 img, .pop-layer12 img, .pop-layer13 img, .pop-layer14 img, .pop-layer15 img, .pop-layer16 img{width:100%!important; height:auto!important;}

/* Main */

.main_visual div.bx-wrapper .bx-viewport{height:auto!important;}
.main_visual div.slide a{position:relative; height:0; padding-top:40.5%; overflow:hidden;}
.main_visual div.slide img{height:100%; position:absolute; max-width:initial; top:50%; left:50%; transform:translate(-50%, -50%);}

#main div.gray_box, #main div.contents{width:100%; padding:50px 20px;}
#main div.contents h3, #main div.gray_box div.feedback h3{text-align:center;}
#main div.contents h3 span, #main div.gray_box div.feedback h3 span{display:block; margin-top:5px; margin-left:0; font-size:20px;}

/* Notice */
#main div.info_box > div.notice{width:100%; height:auto;}
#main div.info_box > div.notice div.bbody{width:100%;}
#main div.info_box > div.notice div.bbody div.btext li{font-size:14px;}
#main div.info_box > div.notice div.bbody div.btext:nth-child(n+2){margin-top:14px;}

#main div.info_box > div.sale_wrap{width:calc(50% - 13px); height:0; margin-top:30px; margin-left:0; padding-bottom:65%}
#main div.info_box > div.academy_wrap{float:left; width:calc(50% - 11px); margin-top:30px;}
#main div.info_box > div.academy_wrap ul{overflow:hidden; padding:0;}
#main div.info_box > div.academy_wrap ul li{float:none; width:100%; height:auto;}
#main div.info_box > div.academy_wrap ul li:nth-child(n+2){margin-top:0;}
#main div.info_box > div.academy_wrap ul li a{height:16vw;}
#main div.info_box > div.academy_wrap ul li a:before{width:60px; height:60px; background-size:180px 60px;}
#main div.info_box > div.academy_wrap ul li:nth-child(2) a:before{background-position:-60px 50%;}
#main div.info_box > div.academy_wrap ul li:nth-child(3) a:before{background-position:-120px 50%;}

#main div.info_box > div.academy_wrap ul li:first-child a{background-color:#d4101d}
#main div.info_box > div.academy_wrap ul li:nth-child(2) a{background-color:#01cd3a}
#main div.info_box > div.academy_wrap ul li:nth-child(3) a{background-color:#0269a1}
#main div.info_box > div.academy_wrap ul li:nth-child(n+2){margin-top:5vw;}
#main div.info_box > div.academy_wrap ul li a:hover:before{box-shadow:none;}

#main div.info_box > div.grow_wrap{width:100%; margin:30px 0 0;}
#main div.info_box > div.grow_wrap ul li{width:calc(50% - 13px);}
#main div.info_box > div.grow_wrap ul li a{width:100%; font-size:20px;}
#main div.info_box > div.grow_wrap dl{display:block; height:auto; padding:20px 0;}
#main div.info_box > div.grow_wrap dl:after{display:none;}
#main div.info_box > div.grow_wrap dl dt{display:block; width:100%;}
#main div.info_box > div.grow_wrap dl dt br{display:none;}
#main div.info_box > div.grow_wrap dl dd{display:block; width:100%;}


/* 강의 */
#main div.contents div.lecture ul.lectureWrap, #main div.feedback ul, #main div.free ul{justify-content:center;}

#main div.contents div.lecture ul.packageWrap{float:initial; width:100%; flex-wrap:wrap;}
#main div.contents div.lecture ul.packageWrap li{width:100%}
#main div.contents div.lecture ul.packageWrap li a{width:100%;}
#main div.contents div.lecture ul.leftArea{float:initial; width:100%;}

#main div.contents div.lecture ul.rightArea{margin-top:23px; float:initial}
#main div.contents div.lecture ul.rightArea{display:flex; margin-top:23px; float:initial; justify-content:center; gap:25px; flex-wrap:wrap;}
#main div.contents div.lecture ul.rightArea li{flex:1 1 45%;}
#main div.contents div.lecture ul.rightArea li a{width:auto; height:auto;}
#main div.contents div.lecture ul.rightArea li a img{width:100%}
#main div.contents div.lecture ul.rightArea li a img.pc{display:none;}
#main div.contents div.lecture ul.rightArea li a img.mobile{display:block;}
#main div.contents div.lecture ul.rightArea li:last-child{height:auto; margin-top:0;}
#main div.contents div.lecture ul.rightArea li:last-child a{
	display: block;
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 1px solid #888;
    border-radius: 11px;
    box-sizing: border-box;
    box-shadow: 2px 5px 11px rgb(150 150 150 / 10%);
}
#main div.contents div.lecture ul.leftArea{float:initial; width:100%; justify-content:center;}
#main div.contents div.lecture ul.leftArea li{flex:1 1 45%}
#main div.contents div.lecture ul.leftArea li a{width:auto; height:auto;}
#main div.contents div.lecture ul.leftArea li a img{width:100%}

#main div.gray_box div.feedback ul li a:after{width:35px; height:35px; background-size:35px 28px;}

#footer_copy{width:100%; height:auto; padding:30px 0;}
.flogo{display:none;}
.fcopy{width:100%; float:none;}
.fcopy .fcopy_menu{display:none;}
.fcopy_text img{width:100%;}
.fright{display:none;}
.fkb img{display:none;}

/* Sub Left */
#wrap{min-width:100%;}
#container{min-width:100%;}
#sub{width:100%;}
#sub_left{display:none;}
#sub_content{float:none; width:100%;}
.section > img{width:100%;}

/* Sub Visual */
.bbs_header img{width:100%;}

/* Sub Table */
table.board tbody tr:first-child {display: none;}
table.board tbody td.bbs-lecnum {display: none;}
table.board tbody td.bbs-lecdate {display: none;}
table.board tbody td.bbs-lecview {display: none;}
table.board tbody tr td.bbs-lecname {overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}
table.board tbody tr td.bbs-lecname img{display:none;}

table.table_write td{border-right:none;}
.info_title{padding:20px;}
.form-control{width:100%;}
.lec-buy-table, .lec-buy-table tbody, .lec-buy-table tr, .lec-buy-table td{display:block; width:100%!important;}
.lec-buy-table .lec-ltext{padding:0 0 0 15px; height:40px; line-height:40px; }
.info table td{margin-left:0; padding:20px 15px; overflow:hidden;}

/* Login */
.login-text{display:none;}


}

/* 강좌버튼 */
.btn_box{margin-top:20px;}
.btn-cart{background-color:#c59de5; border-color:#c59de5; border-radius:4px; width:49%; margin-right:1%; height:40px;}
.btn-buy{border-radius:4px; background-color:#48aee4; color:#f9f9f9; border:1px solid #48aee4; height:40px;}
.btn:hover,.btn:focus,.btn.focus{color: #ffffff;  text-decoration: none;}
