@charset "utf-8";
/* ../../resources/- > /resources/ 로 변경 */
/*main*/
html { scroll-behavior: smooth;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
 body {font-family: 'Noto Sans KR';  letter-spacing:-.5px; box-sizing:border-box; color:#222; font-size:17px; font-weight:300}
  select, input, textarea, button{ font-family: 'Noto Sans KR'; font-size:inherit; vertical-align:middle;}
 input[type="submit"], input[type="reset"]{}

body.noneScroll {overflow: hidden;}
#container {position: relative;}
 textarea {width:100%;  min-height:300px; padding:5px; border:1px solid #d2d2d2; box-sizing: border-box;} /* 190520 */
 .shp_wrap * {box-sizing: content-box;}
 .shp_wrap a {color: #222;}
 .shp_wrap p, .shp_wrap li, .shp_wrap span, .shp_wrap input, .shp_wrap a { /*transform: skew(-0.03deg);*/ line-height:100%;}
 .skew {transform: skew(-0.03deg); display: inline-block;}
 img{vertical-align:top}
 table { border-collapse: collapse; border-spacing: 0; table-layout: fixed;}
 ul, ol{list-style: none}
 a {color: #111; text-decoration: none;}
 address{font-style:normal}
 caption{text-indent:-9999px; height:0}
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
 legend{ display:none}
 p { word-break: keep-all;}

/*아이폰 인풋 버튼 둥근테두리 그림자 제거*/
input[type="button"] { -webkit-appearance: none; -webkit-border-radius: 0;}
/*크롬 검정 테두리 지우기*/
a:focus, input:focus, select:focus, button:focus, textarea:focus {outline: none;}
/*인풋 박스 백그라운드*/
input[type="text"], input[type="password"] { background: #f2f2f2;}
/*보드 쪽 pre 태그 줄바꿈*/
pre {white-space: pre-wrap;}
ul, ol {list-style: none;}
.inner { position:relative; width:97%;  margin:0 auto; max-width:1300px;}
.h_inner {position: relative; height: 100%; width: 97%; margin: 0 auto;  max-width: 1300px;}
.pc_block {display: block;}
.block { display:block;}
.clear:after{display:block; content:""; clear:both; height:0}
.c_pink {color: #f4a5c7;}


body {font-family: 'Noto Sans KR';  letter-spacing:-.5px; box-sizing:border-box; color:#222; font-size:18px; font-weight:300}

/* 서브페이지 기본 세팅 s */
.contents * {line-height:140%}

ol.basic { margin-top:20px;}
ol.basic > li {list-style-type:decimal; margin-left:17px;  border-bottom: 1px dashed #ddd;  padding:7px 0 7px 10px;}
ol.basic > li > ul { margin-top:5px; color:#000; margin-bottom:5px;}
ol.basic > li > ul li {  padding:0 0 0 10px;}
.finish { margin-top:70px; margin-bottom:120px;}


ul.basic {margin-top: 15px;font-family: 'Noto Sans KR', sans-serif;}
ul.basic li{padding-left: 10px; position: relative; margin-bottom: 5px; line-height: 150%; word-break: keep-all;}
ul.basic li:last-child {margin-bottom: 0;}
ul.basic li:before {width: 2px; height: 2px; position: absolute; background-color: #333; content: ""; top: 12px; left: 0;}

h3, .h3 {font-weight: 100; font-family: 'Prompt'; font-size: 36px; position: relative; padding-bottom: 20px; text-align: center;}
h3::before, .h3::before {position: absolute; content: ""; bottom: 0; left: 50%; transform: translateX(-50%); height: 1px; width: 50px; background: #222;}
h4, .h4 { word-break: keep-all; margin-top:25px;  font-size:20px; font-weight: 500;line-height: 140%;}
.c0 { margin-top: 0;}
.h3box { position: relative; margin-top:55px;}
.h3box h3, .h3box h4 { display: inline-block; margin-top: 0;}
.h3box::after {clear: both;  content: ''; display: block;}
p.basic { margin-top: 10px;}
p.basic.c0 {margin-top: 0;}


select { border-radius:0; /* 아이폰 사파리 보더 없애기 */ -webkit-appearance:none; /* 화살표 없애기 for chrome*/ -moz-appearance:none; /* 화살표 없애기 for firefox*/ appearance:none /* 화살표 없애기 공통*/ }
select::-ms-expand{ display:none /* 화살표 없애기 for IE10, 11*/ }
button {/* width: 100%; height: 100%; */ background: none; border: none; cursor: pointer;}

table.basic thead th {background-color: #ececec;}
table.basic tbody th {background-color: #f6f6f6;}
table.basic tbody th.th {background-color: #ececec;}
table.basic tbody td.th {background-color: #f6f6f6;}

/* flicking */
.f_wrapper { border-radius:10px; width:100%; margin-top: 40px;}
.f_wrapper .f_wrapper_inner {overflow:auto; -webkit-overflow-scrolling: touch; overflow-y: hidden;}
.f_wrapper .touch { display:none; background:url("../../resources/img/common/ico_flicking.png") left 3px top -2px no-repeat; height:27px; background-size:contain; padding:0 0 0 36px; line-height:27px; margin-bottom:10px;}
.f_scroller {display:block; height:100%; padding:0; width:100%; text-align:left;}
.f_wrapper .list_table,.f_wrapper .colum_table { margin-top:20px;}

.flicking {min-width: 900px !important;}

.line_dot { border-bottom: 1px dotted #ddd; display: block; margin: 20px 0 10px;}

.c_box { word-break: keep-all; margin-top:20px; width:100%; height: 100%; padding:20px 30px; box-sizing: border-box; border:3px solid #ddd; position: relative;} 



/*라디오*/
input[type=radio] { display:none; }
input[type=radio] + label {display: inline-block; cursor: pointer; line-height: 18px; padding-left: 27px; background: url("../../resources/img/sub/rd_off.png") left/18px no-repeat; margin-right: 10px;}
input[type=radio]:checked + label { background-image: url("../../resources/img/sub/rd.png"); }
/*체크박스*/
input[type=checkbox] { display:none; }
input[type=checkbox] + label {display: inline-block; cursor: pointer; line-height: 18px; padding-left: 27px; background: url("../../resources/img/sub/chk_off.jpg") left/18px no-repeat;}
input[type=checkbox]:checked + label { background-image: url("../../resources/img/sub/chk.jpg"); }

/* 서브페이지 기본 세팅 e */
#container.sub {overflow: hidden; position: relative;}


.sub_vis {width: calc(100% - 160px); height: 840px; position: relative; background: url("../../resources/img/sub/sub_vis01.jpg")no-repeat center bottom/cover; margin: 100px 80px 0; border-radius: 100px 0 100px 0;}
.sub_vis02 {background: url("../../resources/img/sub/sub_vis02.jpg")no-repeat center/cover;}
.sub_vis03 {background: url("../../resources/img/sub/sub_vis03.jpg")no-repeat center/cover;}
.sub_vis04 {background: url("../../resources/img/sub/sub_vis04.jpg")no-repeat center/cover;}
.sub_vis05 {background: url("../../resources/img/sub/sub_vis05.jpg")no-repeat center/cover;}
.sub_vis06 {background: url("../../resources/img/sub/sub_vis06.jpg")no-repeat center/cover;}
.sub_vis07 {background: url("../../resources/img/sub/sub_vis07.jpg")no-repeat center bottom/cover;}
.sub_vis .inner {padding-top: 120px;}
.sub_vis h2 {color: #5353ac;font-family: 'Tmon'; font-size: 65px;}
.sub_vis h2 .ti1 {color: #171770; font-size: 32px; margin-bottom: 23px;}
.sub_vis .desc {margin-top: 45px; width: 880px;text-shadow: 0px 0px 4px #fff;}
.sub_vis .desc span {display: inline; padding-right: 8px; margin-right: 7px; margin-bottom: 5px; border-right: 1px solid #555; word-break: keep-all;}
.sub_vis .desc span:nth-child(2n) {padding: 0; margin: 0;border-right:0;}
.lnb {height:65px; background:#f9f9f9;border:1px solid #ddd; border-top:0; border-left: 0; z-index:1; position: absolute; left:50%; transform: translateX(-50%); top: 298px; font-size: 17px; box-sizing: border-box;width: 100%; margin: 0 auto; max-width: 1100px; }
.lnb div {float: left;}
.lnb .home {width: 65px; height: 100%; background: #005383 url("../../resources/img/common/home_ico.png")no-repeat center;}
.lnb .home a {display: inline-block; width: 100%; height: 100%; text-indent: -9999px;}
.lnb .depth1_name { border-right: 1px solid #ddd; min-width:220px; display: table; height: 100%;  box-sizing: border-box;}
.lnb .depth1_name span {color: #555; font-size: 18px; display: table-cell;vertical-align: middle; padding:0 30px; text-align: center; width: 100%; height: 100%; box-sizing: border-box; font-weight: 500;}
.lnb .lnb_menu { display: inline-block;  box-sizing: border-box; max-width: 260px; width: 100%; position: relative; z-index: 1; vertical-align: middle;}
.lnb .lnb_menu .lnb_title {padding: 24px 0; padding-left:26px; display: block; font-size:17px; cursor: pointer;  border-right:1px solid #ddd}
.lnb .lnb_menu ul { border-top: none; border-bottom: none;box-sizing: border-box; width:100%; display: none; position: absolute; left:0;}
.lnb .lnb_menu li {  box-sizing: border-box; }
.lnb .lnb_menu li a { font-size: 15px; transition: .3s ease; color: #eee; box-sizing: border-box; display: block; padding: 10px 20px; width: 100%; border: 1px solid #206a94; border-top: 0; background: #005383 }
.lnb .lnb_menu li a:hover, .lnb .lnb_menu li.on a {background-color: #0e253c;}
.lnb .lnb_menu li a span { }
.lnb .lnb_menu li.on a span {vertical-align: middle; display: table-cell; transform: skew(-0.03deg);}

.lnb .lnb_menu .more_btn {width: 18px; height: 10px; background: url("../../resources/img/sub/lnb_ico.png")no-repeat left 0px bottom 0px; position: absolute; top: 50%; right: 10px; text-indent: -99999px; transform: translateY(-50%); cursor: pointer; transition: all .3s ease-in-out;}
.lnb_menu .more_btn.more_add { transform: translateY(-50%) rotate(-180deg); top: 45%;}


/*contents s*/
.contents {padding: 110px 0 160px; min-height:200px;}

.h4 {margin-top: 40px; font-weight: 600; font-size: 18px; word-break: keep-all;}

table.basic {background-color: #fff; border-bottom: 1px solid #ddd; width: 100%; border-right:1px solid #ddd;  border-left: 1px solid #ddd; table-layout: fixed;font-family: 'Noto Sans KR', sans-serif; font-weight: 300; min-width: 1024px;}
table.basic th, table.basic td {border-top: 1px solid #ddd; border-right: 1px solid #ddd; width: 30%; padding: 10px 10px; text-align: center; font-weight: 300; vertical-align: middle; word-break: break-all; white-space: normal;}
table.basic td:last-child {width: 30%;}
table.basic td:last-child {border-right: none;}
table.basic img {width: 100%;}


.sec_title {text-align: center;}
.sec_title .ti {font-size: 45px; font-family: 'Tmon'; color: #5353ac;}
.sec_title .tx {font-size: 18px; display: block; margin: 15px 0 30px; line-height: 1.5;word-break: keep-all;}

/*about s*/
.about {overflow: hidden;}

.about .sec0{position: relative; margin-bottom: 125px;}
.about .sec0 .txt_wrap{padding: 5% 0 5% 100px; z-index: 0; box-sizing: border-box;}
.about .sec0 .txt_wrap::before{content: ""; position: absolute; width: 170%; height: 100%; display: inline-block; background: #ecebf5; z-index: -1; top: 0; right: 0; border-radius: 0 100px 0 0;}
.about .sec0 .txt_box{position: relative; width: 100%;}
.about .sec0 .txt_box .quo{font-size: 45px; font-family: 'Tmon'; color: #5353ac;}
.about .sec0 .txt_box .ti{font-size: 45px; font-family: 'Tmon'; color: #5353ac;}
.about .sec0 .txt_box .c_navy{color:#171770 }
.about .sec0 .txt_box .tx{font-size: 18px; display: block; line-height: 1.5; word-break: keep-all; color: #5353ac; margin-bottom: 19px; font-weight: 500;}
.about .sec0 .txt_box .tc .cont_ti{font-size:20px; font-weight: 700; color: #171770; font-style: italic; display: block; }
.about .sec0 .txt_box .tc:nth-child(2){margin: 2% 0 2% 0;}
.about .sec0 .txt_box .tc .cont_tx{font-size: 17px; color: #333; display: block;}
.about .sec0 .img_box{position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.about .sec0 .img_box.type2{top:60%;}
.about .sec0 .img_box img{width: 100%;}
.about .sec0 .img_box.type3 img{width: 660px;}

.about .sec0.type2 .txt_wrap::before{content: ""; position: absolute; width: 170%; height: 100%; display: inline-block; background: #F5EFFA; z-index: -1; top: 0; left: 0;right:auto; border-radius: 0 0 0 100px }

.about .sec1 {position: relative; margin-top: 50px;padding-bottom: 150px;}
.about .sec1 .img_wrap {width: 100%;display: inline-block;height: 435px;position: absolute;right: 61%;top: 0;background: url("../../resources/img/sub/about_1.jpg") center right/cover no-repeat;border-radius: 100px 0 100px 0;}
.about .sec1 .txt_wrap {width: 58%;float: right;margin-top: 2%;}
.about .sec1 .txt_wrap .list_wrap{}
.about .sec1 .txt_wrap .list_wrap li{background: #f1ecf7;margin-bottom: 23px;border-radius: 18px 0 18px 0;position: relative;margin-left: 25px;}
.about .sec1 .txt_wrap .list_wrap li:last-child {margin-bottom: 0;}
.about .sec1 .txt_wrap .list_wrap li:nth-child(2n) {margin-left: 0; background: #fceff5;}
.about .sec1 .txt_wrap .list_wrap li .num{font-family: 'Tmon';font-size: 45px;position: absolute;top: -20px;color: #9f7dc7;left: 16px;}
.about .sec1 .txt_wrap .list_wrap li:nth-child(2n) .num {color: #ed92bd;}
.about .sec1 .txt_wrap .list_wrap li .tx{padding: 20px 0 20px 88px;}
.about .sec1 .txt_wrap .more_btn{width: 230px;text-align: center;padding: 16px;box-sizing: border-box;margin: 35px auto 0;border-radius: 100px;transition: all .3s ease-in-out;box-shadow: 5px 5px 5px rgb(0 0 0 / 42%);color: #fff;background:#5353ac;display: block;}
.about .sec1 .txt_wrap .more_btn:hover {transform: translateY(-10px);}

.about .sec2 {margin-top: 125px;}
.about .sec2 .logo {width: 121px;height: 415px;background: url("../../resources/img/sub/about_logo.png") center/contain no-repeat;top: 50%;left: -220px;transform: translateY(-50%);position: absolute;text-indent: -99999px;}
.about .sec2 .txt_wrap {position:relative;padding: 58px 0 87px 100px;z-index: 0;box-sizing: border-box; }
.about .sec2 .txt_wrap::before {content:"";position: absolute;width: 170%;height: 100%;display: inline-block;background: #f5effa;z-index: -1;top: 0;left: 0;border-radius: 100px 0 0 0;}
.about .sec2 .txt_wrap .txt_box {width: 36%; display: inline-block; float: left; }
.about .sec2 .txt_wrap .quo {font-size: 45px; font-family: 'Tmon';color: #5353ac;}
.about .sec2 .txt_wrap .ti {font-size: 45px; color: #5353ac; font-family: 'Tmon'}
.about .sec2 .txt_wrap .tx {}
.about .sec2 .img_wrap {width: 972px;height:0;padding-bottom: 43%; background: url("../../resources/img/sub/about_1.png") center/contain no-repeat;position: absolute;right: -230px;text-indent: -99999px;top: 10px;}

.about .sec3 {margin-top: 210px;}
.about .sec3 .ti1 {font-size: 32px;}
.about .sec3 .ti2 {font-size: 55px;}

.about .sec3 .course_wrap{width:100%; margin:5% 0 5% auto; display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; text-align: center;}
.about .sec3 .course_wrap .course_box{position: relative; width:17.5%; margin-right:3%;}
.about .sec3 .course_wrap .course_box:last-child{margin-right: 0;}
.about .sec3 .course_wrap .course_box .course {position:relative;width:100%;overflow: hidden;border-radius: 100%;box-sizing: border-box;border: 8px solid #9f7dc7;}
.about .sec3 .course_wrap .course_box:nth-child(2n) .course {border-color: #ed92bd;}
.about .sec3 .course_wrap .course_box .course img{width:100%;}
.about .sec3 .course_wrap .course_box .cir_box {position: relative;}
.about .sec3 .course_wrap .course_box .numb{border: 7px solid #9f7dc7;border-radius: 50%;width: 40px;height: 40px;line-height: 40px;text-align: center;position: absolute;top: 0;background: #fff;color:#9f7dc7;font-weight: 900;font-size: 22px;z-index:1;left: 0;font-family: 'Montserrat'; box-sizing: content-box;}
.about .sec3 .course_wrap .course_box:nth-child(2n) .numb{border: 8px solid #ed92bd;color:#ed92bd;}
.about .sec3 .course_wrap .course_box .cir_box span{background: url("../../resources/img/sub/c_arrow.png") no-repeat center;width:11px;height:18px;position: absolute;top: 50%;right: -22px;transform: translateY(-50%);}
.about .sec3 .course_wrap .c_btn{background: #9f7dc7;width: 100%;height: 35px;border-radius: 20px 0 20px 0;margin-top: 8%;color: #fff;text-align: center;line-height: 35px;padding: 0 5px;box-sizing: border-box;}
.about .sec3 .course_wrap .course_box:nth-child(2n) .c_btn{background:#ed92bd;}
.about .sec3 .course_wrap .c_btn strong{font-weight: 800;}
.about .sec3 .list_wrap {margin-top: 55px;}
.about .sec3 .list_wrap li{background: #f1ecf7;margin-bottom: 23px;border-radius: 18px 0 18px 0;position: relative;margin-left: 0;}
.about .sec3 .list_wrap li:last-child {margin-bottom: 0;}
.about .sec3 .list_wrap li:nth-child(2n) {margin-left: 0; background: #fceff5;}
.about .sec3 .list_wrap li .num{font-family: 'Tmon';font-size: 45px;position: absolute;top: -20px;color: #9f7dc7;left: 116px;}
.about .sec3 .list_wrap li:nth-child(2n) .num {color: #ed92bd;left: 152px;}
.about .sec3 .list_wrap li .tx{padding: 20px 0 20px 178px;}
.about .sec3 .list_wrap li:nth-child(2n) .tx {padding-left: 216px;}


/* sec1 4단계 학습 flow*/
.sec7 {position: relative;}
.sec7 .img_wrap {width: 100%;display: flex; flex-flow: row-reverse nowrap; justify-content:space-around; width: 100%;height: 207px;}
.sec7 .img_wrap2 {display: none;}
.sec7 .img_wrap span:nth-child(1){transform: translateX(-45%);}
.sec7 .img_wrap span:nth-child(2){transform: translateX(-15%);}
.sec7 .img_wrap span:nth-child(3){transform: translateX(15%);}
.sec7 .img_wrap span:nth-child(4){transform: translateX(45%);}

.sec7 .txt_wrap {margin-top: 20px;width: 100%;height: 220px;}
.sec7 .st_txt{width: 95%;margin: 0 auto;}
.sec7 .st_txt ul{float:left;width: 25%;height: 220px;}
.sec7 .st_txt ul:nth-child(1){background: url(../../resources/img/sub/flow_txt_01.png)no-repeat;background-size: cover;}
.sec7 .st_txt ul:nth-child(2){background: url(../../resources/img/sub/flow_txt_02.png)no-repeat;background-size: cover;}
.sec7 .st_txt ul:nth-child(3){background: url(../../resources/img/sub/flow_txt_03.png)no-repeat;background-size: cover;}
.sec7 .st_txt ul:nth-child(4){background: url(../../resources/img/sub/flow_txt_04.png)no-repeat;background-size: cover;}
.sec7 .st_txt .num{font-size:50px;font-weight: bold;padding-top: 15px;padding-left: 45px;}
.sec7 .st_txt .num .mo{display: none;}
.sec7 .st_txt .num01{color:#fad1e2;}
.sec7 .st_txt .num02{color:#f2a9cc;}
.sec7 .st_txt .num03{color:#da8cbf;}
.sec7 .st_txt .num04{color:#b380c3;}
.sec7 .st_txt .txt{padding:5px 30px 5px 45px;}
.sec7 .st_txt .txt span{font-weight: bold;}
.sec7 .rol_wrap {width: 100%;margin-top: 60px;}
.sec7 .rol_wrap .rol_tit span{padding:9px;font-weight: bold; background-color: #5353ac;color:#fff;}
.sec7 .rol_wrap .rol_txt{margin:20px;font-size:16px;color:#777;}

/* sec2 레벨별 수업 */
.sec8 {margin-top:100px;padding: 100px 0;background-color: #f9f9f9;}
.sec8 .lv_study_wrap{width: 100%;}
.sec8 .lv_table .bgc01{background: #fceff5;}
.sec8 .lv_table .bgc02{background: #f1ecf7;}
.sec8 .lv_table .bgc03{background: #facbdf;color: #fff;}
.sec8 .lv_table .bgc04{background: #f2a9cc;color: #fff;}
.sec8 .lv_table .bgc05{background: #da8cbf;color: #fff;}
.sec8 .lv_table .bgc06{background: #b380c3;color: #fff;}

.sec8 .lv_table table{position: relative;width: 100%;text-align: center;}
.sec8 .lv_table table tr{padding-bottom:5px;}
.sec8 .lv_table table th{border:5px solid #f9f9f9;text-align: center;line-height: 140px;}
.sec8 .lv_table table th:nth-child(1){width: 15%;}
.sec8 .lv_table table td{border: 5px solid #f9f9f9;text-align: center;background-color: #fff;}
.sec8 .lv_table table td:nth-child(1){width: 15%;}
.sec8 .lv_table table td>img{margin-top: -1%;}
.sec8 .lv_table table td .lv_txt{display: flex;flex-flow: row nowrap; justify-content: space-between;margin: 0 0 2%;}
.sec8 .lv_table table td .lv_txt ul{float:left;width: 100%;}
.sec8 .lv_table table td .lv_txt ul li{font-weight: 400;font-size: 16px;}

.sec8 .lv_table.type2 table th{line-height: 100px;padding-top:0;}
/*about e*/


/* 수업후기 */
.review .sec20{text-align: center;}
.review .sec20 .txt{margin: 100px 0;}
.review .sec20_list{padding-bottom: 100px;}
.review .sec20_list::after{content: "";display: block;clear: both;}
.review .sec20_list li{z-index: 0;position:relative;height: 400px;text-align: left;float:left;margin: 0 0 10px 10px;width: 32%;}
.review .sec20_list li .sec20_list_item{border-radius:35px;height: 400px;padding: 15px;background: #F4F4F4;}
.review .sec20_list li dt {margin-top: 20px;}
.review .sec20_list li dt strong{color:#222222;font-size:16px;display: block;text-align: left;}
.review .sec20_list li dt span{color:#9F7DC7;font-size:14px;display: block;text-align: right;margin-top:5px;}
.review .sec20_list li.type2 dt span{color:#CB7FB0;}
.review .sec20_list li dd{margin-top:15px;font-size:14px;color:#505050;height: 65px;overflow: hidden;line-height: 1.5;}
.review .sec20_list li .sec20_list_img{position: relative;z-index:0;}
.review .sec20_list li .sec20_list_img p{z-index:1;left:-5px;top:-5px;position:absolute;width: 70px;height: 70px;line-height: 70px;border-radius:50%;background: #9F7DC7;color:#fff;font-size: 16px;text-align: center;}
.review .sec20_list li .sec20_list_img img{width: 100%;}
.review .sec20_list li.type2 .sec20_list_img p{background: #CB7FB0;}
.review .sec20_list li .moar_btn{width:100%;display: block;text-align:center;font-size:18px;color:#222222;font-weight: bold;position: absolute;left:0;bottom: 25px;}
.review .sec20_list li .moar_btn::before{content: "more";}
.review .sec20_list li .moar_btn::after{content: "▼";font-size:12px;color:#9F7DC7;display: inline-block;margin-left:5px;}
.review .sec20_list li.active{z-index: 1;}
.review .sec20_list li.active .sec20_list_item{height: 810px;position: absolute;}
.review .sec20_list li.active.v2 .sec20_list_item{height: 950px;}
.review .sec20_list li.active dd{height: auto;}
.review .sec20_list li.active .moar_btn::before{content: "close";}
.review .sec20_list li.active .moar_btn::after{content: "▲";}

/*review : sec1 s*/
.review .sec1 {padding: 100px 0 100px;background: rgba(249,209,226, 0.2)}
.review .sec1 .sec_slick {margin: 60px 0 0;}
.review .sec1 .sec_slick .slick-track {padding-bottom: 10px;}
.review .sec1 .sec_slick .slick-slide {margin: 0 10px;}
.review .sec1 .sec_slick .slick-arrow {background: url("../../resources/img/main/sec1_arrow_hover.png")no-repeat; width: 60px; height: 60px; z-index: 1; transition: all .2s ease; text-indent: -99999px; background-color: rgba(244,165,199,.8); border-radius: 10px;}
.review .sec1 .sec_slick .slick-next {right: -19px; background-position: -122px 12px;}
.review .sec1 .sec_slick .slick-prev {left: -19px; background-position: 19px 12px;}
.review .sec1 .sec_slick .slick-arrow:hover {background-color: rgba(244,165,199,1);}
.review .sec1 .thumb_box {display: block;}
.review .sec1 .thumb_box .vdo_img {height: 0; padding-bottom: 56.25%; position: relative; overflow: hidden; border-radius: 30px; box-shadow: 5px 7px 10px rgba(0, 0, 0, 5%);}
.review .sec1 .thumb_box .vdo_img::before {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,.3) url("../../resources/img/main/sec1_play.png") center no-repeat; width: 100%; height: 100%; z-index: 1; transition: all .3s ease-in-out;}
.review .sec1 .thumb_box:hover .vdo_img::before {background-color: rgba(0,0,0,0);}
.review .sec1 .thumb_box .vdo_img > img {width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.review .sec1 .tx_wrap .tx {margin-top: 20px; overflow: hidden; text-overflow: ellipsis;white-space: normal; line-height: 140%; height: 4.2em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all;}
.review .sec1 .tx_wrap .name {color: #555; margin-top: 25px;}

/* 비디오 s */
.review .video-popup.reveal {display: flex;position: fixed;top: 0;left: 0;right: 0;bottom: 0;justify-content: center;align-items: center;z-index:101;}
.review .video-popup .video-wrapper {position: relative;width: 80%;max-width: 800px;height:450px;z-index: 1;}
.review .video-popup .video-wrapper iframe {position: absolute; width: 100%; height: 100%;}
.review .video-popup.reveal .video-popup-closer {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, .5);z-index: 0;} 
.review .video-wrapper .clos_btn { cursor:pointer; display: block; text-indent: -99999px; width: 45px; height: 45px; position: absolute; top:-50px; right:0;}
.review .video-wrapper .clos_btn::before{content: ''; position: absolute; transition:.3s ease; top: 50%; left: 50%; width: 30px; height: 2px; background-color: rgba(255,255,255,.5); border-radius: 50px; margin: -1px 0 0 -15px; transform: rotate(45deg);}
.review .video-wrapper .clos_btn::after{content: ''; position: absolute; transition:.3s ease; top: 50%; left: 50%; width: 2px; height: 30px; background-color: rgba(255,255,255,.5); border-radius: 50px; margin: -15px 0 0 -1px; transform: rotate(45deg);}
.review .video-wrapper .clos_btn:hover::before {background-color:rgba(255,255,255,1);}
.review .video-wrapper .clos_btn:hover::after {background-color:rgba(255,255,255,1);}
/* 비디오 e */

.review .sec21{padding:100px 0;background: #ECEBF5 url(../../resources/img/sub/bg_sec21.png) no-repeat 90% bottom;}
.review .sec21_list{overflow: hidden;}
.review .sec21_list li{margin-left:10px;margin-bottom:10px;float:left;width:32%;padding:30px;border-radius: 35px;background: #fff;color:#505050;font-size:16px;}
.review .sec21_list li p{line-height: 1.6;height: 159px;overflow:hidden;}
/*review : sec1 e*/

@media screen and (max-width:1300px){
    .sub_vis {height: 660px; width: calc(100% - 100px);margin: 100px 50px 0;}
    .sub_vis .inner {padding-top: 80px;}
    .about .sec2 .txt_wrap {padding: 58px 0 87px 40px;}
    .about .sec2 .img_wrap {    width: 880px;}
    .about .sec2 .txt_wrap .ti {font-size: 42px;}
    .about .sec2 .txt_wrap .txt_box {width: 40%;}


    /* sec1 4단계 학습 flow*/
    .sec7 .img_wrap{height: 210px;}
    .sec7 .st_txt ul{height:210px;}

    .sec7 .img_wrap span img{width: 130%;}
    .sec7 .img_wrap span:nth-child(1){transform:translateX(-30%);}
    .sec7 .img_wrap span:nth-child(2){transform: translateX(-20%);}
    .sec7 .img_wrap span:nth-child(3){transform: translateX(-10%);}
    .sec7 .img_wrap span:nth-child(4){transform: translateX(0%);}
    .sec7 .txt_wrap {height: 210px; margin-top: 10px;}
    .sec7 .st_txt{width: 95%;}
    .sec7 .st_txt .txt{font-size:16px;padding:0 20px 0 45px;}

    /* sec2 레벨별 수업 */
    .sec8 .lv_table .bgc06{line-height: 20px; padding-top:4.5%}
}
@media screen and (max-width:1200px){
    .about .sec0 .img_box{right: -5px;}
    .about .sec0 .img_box img{width: 80%;}
    .about .sec0 .img_box.type3 img{width: 70%;}
    .about .sec0 .img_box.type3{right: -200px;}
    .about .sec0 .img_box.type2{right: -140px;}
    .about .sec0 .img_box.type2 img{width: 56%;}
}
@media screen and (max-width:1100px){
    .sub_vis .inner {text-align: center;}
    .sub_vis h2 {font-size: 45px;}
    .sub_vis h2 .ti1 {/*font-size: 24px;*/font-size: 35px;margin-bottom: 18px;}
    .about .sec2 .txt_wrap {padding: 120px 0 87px 40px;}
    .about .sec3 {margin-top: 80px;}

    /* sec1 4단계 학습 flow*/
    .sec7 .img_wrap{height: 190px;}
    .sec7 .txt_wrap {height: 190px;}
    .sec7 .st_txt ul{height:190px;}
    .sec7 .st_txt .num{font-size:45px;padding-left: 40px;}
    .sec7 .st_txt .txt{font-size:15px;}

    .sec7 .rol_wrap {margin-top: 40px;}
    .sec7 .rol_wrap .rol_tit{font-size:15px;}
    .sec7 .rol_wrap .rol_txt{font-size:15px;}

    /* sec2 레벨별 수업 */
    .sec8 .lv_table thead th:nth-child(4){line-height: 20px;padding-top: -2%;}
    .sec8 .lv_table table td>img{width: 80%;}
    .sec8 .lv_table table td .lv_txt ul li{font-size: 15px;}
}
@media screen and (max-width:1024px){
    .contents {padding: 55px 0 100px;}
    .sub_vis {height: 480px;}
    .sub_vis .desc {margin-top: 15px; font-size: 15px; width: 100%;} 
    .sub_vis .desc span:nth-child(2n) {padding-right: 8px; margin-right: 7px;border-right: 1px solid #555;}
    .sub_vis .desc span:last-child {padding-right: 0; margin-right: 0; border-right: 0;}
    
    .sec_title .ti {font-size: 28px;}
    .sec_title .tx {font-size: 16px; margin-top: 8px;}
    
    .about .sec0 .txt_wrap{text-align: center; padding-left: 0;}
    .about .sec0 .txt_box{display: inline-block; margin-top: 325px;}
    .about .sec0 .txt_box .quo{height: 40px;}
    .about .sec0 .txt_box .ti{font-size: 28px;}
    .about .sec0 .txt_box .tx{font-size: 16px;}
    .about .sec0 .txt_box .tc .cont_ti{font-size: 19px;}
    .about .sec0 .txt_box .tc .cont_tx{font-size: 16px;}
    .about .sec0 .img_box{right: 0; top: 3%; transform: translateX(-50%); left: 50%;}
    .about .sec0 .img_box.type2{top: 3%;}
    
    .about .sec1 {margin-top: 30px;}
    .about .sec1 .img_wrap {display: block; position: relative; right: 0; height: 250px;}
    .about .sec1 .txt_wrap {width: 100%; margin-top: 35px;}
    .about .sec1 .txt_wrap .list_wrap li .num {    font-size: 32px;}
    .about .sec1 .txt_wrap .list_wrap li .tx {font-size: 16px;padding: 13px 10px 13px 56px;}
    .about .sec1 .txt_wrap .more_btn {padding: 14px 5px; font-weight: 200;}
    .about .sec2 .txt_wrap {padding: 10px 0 37px 40px; margin-top: 210px;}
    .about .sec2 .txt_wrap .ti {font-size: 28px;}
    .about .sec2 .txt_wrap .txt_box .pc_block {display: inline;}
    .about .sec2 .txt_wrap .tx {margin-top: 8px;font-size: 16px;}
    .about .sec2 .txt_wrap .quo {    height: 40px;}
    .about .sec2 .txt_wrap .txt_box {width: 100%;}
    .about .sec2 .img_wrap {margin-top: -180px; width: 100%; position: relative; top: auto; right: auto;}
 
    .about .sec3 .ti1 {font-size: 22px;}
    .about .sec3 .ti2 {font-size: 28px;}
    .about .sec3 .course_wrap{justify-content: center;}
    .about .sec3 .course_wrap .course_box{width:30%; margin-bottom: 5%;}
    .about .sec3 .course_wrap .course_box:nth-child(4),.about .sec3 .course_wrap .course_box:nth-child(5){margin-bottom: 0;}
    .about .sec3 .course_wrap .course_box .numb{/* left:20%; */}
    .about .sec3 .list_wrap li .num {font-size: 32px;left: 14px;}
    .about .sec3 .list_wrap li:nth-child(2n) .num {left: 28px;}
    .about .sec3 .list_wrap li:nth-child(2n) .tx {padding-left: 74px;}
    .about .sec3 .list_wrap li .tx {font-size: 16px;padding: 13px 10px 13px 56px;}

    /* sec1 4단계 학습 flow*/
    .sec7 .img_wrap{height: 170px;}
    .sec7 .txt_wrap {height: 170px;}
    .sec7 .st_txt ul{height:170px;}
    .sec7 .st_txt .num{font-size:30px;padding-left: 30px;}
    .sec7 .st_txt .txt{padding:0 20px 0 30px;}
    .sec7 .rol_wrap .rol_tit{font-size:13px;}
    .sec7 .rol_wrap .rol_txt{font-size:13px;}

    /* sec2 레벨별 수업 */
    .sec8 .lv_table table tr{font-size:17px;}
    .sec8 .lv_table .bgc01{position:relative}
    .sec8 .lv_table .bgc01 span{position:absolute; top: 42%;left: 3%;}
    @media screen and (max-width:950px){
        .sec8 .lv_table .bgc01 span{position:absolute; top: 35%;left: 0;}
    }


    .review .sec20_list li{height: 300px;}
    .review .sec20_list li .sec20_list_item{height: 300px;}
    .review .sec20 .txt{margin: 50px 0;}
    .review .sec20_list li dt strong{font-size:14px;}
    .review .sec20_list li dt span{font-size:12px;}
    .review .sec20_list li dd{font-size:12px;height: 57px;}
    .review .sec20_list li .moar_btn{bottom: 10px;font-size:16px;}
    .review .sec20_list li.active .sec20_list_item{height: 650px;position: absolute;}
    .review .sec20_list li.active.v2 .sec20_list_item{height: 900px;}
    .review .sec20_list li .sec20_list_img p{width: 50px;height: 50px;line-height: 50px;font-size: 13px;}

    .review .sec21{padding: 50px 0;}
    .review .sec20_list{padding-bottom: 50px;}
}
@media screen and (max-width:900px){
     /* flicking */
    .f_wrapper .touch { display:block; }
    /* .f_scroller { width:900px; padding:4px} */
    .f_scroller {margin-top: 0}

    /* sec1 4단계 학습 flow*/
    .sec7 .inner{display: flex;flex-flow: row wrap; justify-content: center;}
    .sec7 .img_wrap {display: none;}
    .sec7 .img_wrap2 {display: block;width: 35%;}
    .sec7 .img_wrap2 img{width: 100%;}
    .sec7 .txt_wrap {width: 50%;height: 71vw;margin-top: 0;}
    .sec7 .st_txt{display: flex;height: 71vw;flex-flow: column nowrap;justify-content: space-between;}
    .sec7 .st_txt ul{float:unset;width: 100%;height:auto;}
    .sec7 .st_txt ul:nth-child(1){background:none;}
    .sec7 .st_txt ul:nth-child(2){background:none;}
    .sec7 .st_txt ul:nth-child(3){background:none;}
    .sec7 .st_txt ul:nth-child(4){background:none;}
    .sec7 .st_txt .num{font-size:50px;}
    .sec7 .st_txt .txt{font-size:17px}
    .sec7 .rol_wrap {margin: 30px 50px 0;}
    .sec7 .rol_wrap .rol_con{font-size:13px;}

    /* sec2 레벨별 수업 */
    .sec8 .lv_table .bgc06{padding-top:5%}

    
}
@media screen and (max-width:768px){
    
    .lnb { border:none; border-bottom:1px solid #ddd;}
    .lnb .home { display:none;}
    .lnb .depth1_name {display:none;}
    .lnb .lnb_menu {min-width:100%; width:100%; border-right:none;}
    .member_content.fullwidth {    padding: 30px 35px;}

    h3, .h3 {font-size: 22px;}
    h4, .h4 {font-size: 19px;}
    .pc_block{display:inline}
        
    .sub_vis { height: 490px; margin-top: 70px;}
    .sub_vis .inner {padding-top: 70px;}
    .sub_vis h2 .ti2 > span {display: block; margin-top: 10px;}
        
    .about .sec1 .txt_wrap .list_wrap li .tx {padding: 10px 10px 10px 56px;}    
    .about .sec2 .txt_wrap {margin-top: 170px;padding: 10px 0 20px 20px;}
    .about .sec2 .img_wrap {margin-top: -100px; padding-bottom: 50%;}
    .about .sec3 .course_wrap .course_box .numb{left:0;}
    .about .sec3 .course_wrap .course_box .cir_box span{right:-16px;}
    .about .sec3 .tr_wrap .tr_box p{left:6%;}
    .about .sec3 .tr_wrap .tb_2 p{left: 11%;}
    .about .sec3 .list_wrap li .tx {padding: 10px 10px 10px 56px;}
    .about .sec3 .course_wrap .c_btn {font-size: 15px;}

    /* sec1 4단계 학습 flow*/
    .sec7 .st_txt .num{font-size:30px;}

    .review .sec20_list li dt strong{letter-spacing: -1px;font-size: 13px;}
    .review .sec20_list li{height: 320px;width: 48%;}
    .review .sec20_list li .sec20_list_item{height: 320px;}
    .review .sec20_list li.active .sec20_list_item{height: 700px;}
    .review .sec20_list li.active.v2 .sec20_list_item{height: 900px;}
    
    .review .sec21_list li{width: 48%;font-size: 14px;}
    .review .sec21_list li p{height: 110px;}

}
@media screen and (max-width:600px){
    .sub_vis h2 {font-size: 32px;}
    .about .sec0 .img_box.type2 img{width: 80%;}
    /* .sub_vis h2 .ti1 {font-size: 19px; margin-bottom: 15px;    transform: skew(-0.03deg);} */
    .sub_vis h2 .ti1 {font-size: 19px; margin-bottom: 15px;    transform: skew(-0.03deg);}
    .about .sec3 .course_wrap .course_box .cir_box span{right:-14px;}

    /* sec1 4단계 학습 flow*/
    .sec7 .img_wrap2 {display: none;}
    .sec7 .txt_wrap {width: 100%;height: auto;}
    .sec7 .st_txt{position: relative;flex-flow: row wrap; width: 95%;height: auto;}
    .sec7 .st_txt ul{position: relative; width: 50%;padding:20px;}
    .sec7 .st_txt ul:nth-child(3n+1){background: #fceff5;}
    .sec7 .st_txt ul:nth-child(2){background: #f1ecf7;}
    .sec7 .st_txt ul:nth-child(3){background: #f1ecf7;}
    .sec7 .st_txt .num .mo{display: block;font-size:18px;padding:10px 0;}
    .sec7 .st_txt .num01, .sec7 .st_txt .num04{color:#ed92bd;}
    .sec7 .st_txt .num02, .sec7 .st_txt .num03{color:#9f7dc7;}
    .sec7 .st_txt .num{padding: 0px;}
    .sec7 .st_txt .txt{padding:0px;font-size:0.9em;}
    .sec7 .rol_wrap {margin: 30px 20px 0;}
    .sec7 .rol_wrap .rol_con{font-size:15px;}
    
}
@media screen and (max-width:550px){
    .about .sec3 .course_wrap{flex: none;}
    .about .sec3 .course_wrap .course_box{width:60%;}
    .about .sec3 .course_wrap .course_box .cir_box span{display: none;}
    .about .sec3 .course_wrap .course_box .numb{left: 3vw;}
    .about .sec3 .course_wrap .course_box:nth-child(4){margin-bottom:5%;}

    .review .sec20_list li{width: 100%;margin-left:0;height: auto;}
    .review .sec20_list li .sec20_list_item{height: 380px;}
    .review .sec20_list li.active .sec20_list_item{height: auto;position: relative;padding-bottom: 50px;}
    .review .sec20_list li.active.v2 .sec20_list_item{height: auto;}
    .review .sec21_list li{width: 100%;margin-left:0;}
    
}
@media screen and (max-width:500px){
    .sub_vis {    width: 100%;margin: 70px 0 0; border-radius: 50px 0 50px 0;}
    .about .sec0 .txt_box{margin-top:300px;}
    .about .sec0 .img_box img{width: 70%;}
    .about .sec1 .img_wrap {background-position: center right -60px;}
}

/* 비디오 s */
.video-popup.reveal {display: flex;position: fixed;top: 0;left: 0;right: 0;bottom: 0;justify-content: center;align-items: center;z-index:101;}
.video-popup .video-wrapper {position: relative;width: 80%;max-width: 800px;height:450px;z-index: 1;}
.video-popup .video-wrapper iframe {position: absolute; width: 100%; height: 100%;}
.video-popup.reveal .video-popup-closer {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, .5);z-index: 0;} 
.video-wrapper .clos_btn { cursor:pointer; display: block; text-indent: -99999px; width: 45px; height: 45px; position: absolute; top:-50px; right:0;}
.video-wrapper .clos_btn::before{content: ''; position: absolute; transition:.3s ease; top: 50%; left: 50%; width: 30px; height: 2px; background-color: rgba(255,255,255,.5); border-radius: 50px; margin: -1px 0 0 -15px; transform: rotate(45deg);}
.video-wrapper .clos_btn::after{content: ''; position: absolute; transition:.3s ease; top: 50%; left: 50%; width: 2px; height: 30px; background-color: rgba(255,255,255,.5); border-radius: 50px; margin: -15px 0 0 -1px; transform: rotate(45deg);}
.video-wrapper .clos_btn:hover::before {background-color:rgba(255,255,255,1);}
.video-wrapper .clos_btn:hover::after {background-color:rgba(255,255,255,1);}
/* 비디오 e */