@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;}
.c_violet {color: #ad9fcd;}
.c_violet2 {color: #7C71B2;}


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_vis02.jpg")no-repeat center center/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_vis .inner {padding-top: 360px;}
.sub_vis h2 {color: #fff;font-family: 'Tmon'; font-size: 65px;text-shadow: 2px 2px 2px #565656;}
.sub_vis h2 .ti1 {color: #fff; font-size: 45px; margin-bottom: 23px;}
.sub_vis .desc {margin-top: 45px; width: 880px;}
.sub_vis .desc p {word-break: keep-all;color:#fff;}
.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 0px; 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;margin-bottom:50px;}
.sec_title .ti {font-size: 45px; font-family: 'Tmon'; color: #5353ac;}
.sec_title .tx {width: 100%;margin: 0 auto;font-size: 18px; display: block; margin-top: 10px; line-height: 1.5;word-break: keep-all;}

/*about s*/
.about {overflow: hidden;}
.about .sec0{position: relative; margin-bottom: 125px;margin-top: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: #f5effa; z-index: -1; top: 0; left: 0; border-radius: 0 0 0 100px;}
.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{width: 415px; position: absolute; right: 88px; top: 50%; transform: translateY(-50%);}
.about .sec0 .img_box img{width: 100%;}

/* sec1 4단계 학습 flow*/
.sec1 {position: relative;}
.sec1 .img_wrap {width: 100%;display: flex; flex-flow: row-reverse nowrap; justify-content:space-around; width: 100%;height: 207px;}
.sec1 .img_wrap2 {display: none;}
.sec1 .img_wrap span:nth-child(1){transform: translateX(-45%);}
.sec1 .img_wrap span:nth-child(2){transform: translateX(-15%);}
.sec1 .img_wrap span:nth-child(3){transform: translateX(15%);}
.sec1 .img_wrap span:nth-child(4){transform: translateX(45%);}
.sec1 .txt_wrap {margin-top: 20px;width: 100%;height: 220px;}
.sec1 .st_txt{width: 95%;margin: 0 auto;}
.sec1 .st_txt ul{float:left;width: 25%;height: 220px;}
.sec1 .st_txt ul:nth-child(1){background: url(../../resources/img/sub/flow_txt_01.png)no-repeat;background-size: cover;}
.sec1 .st_txt ul:nth-child(2){background: url(../../resources/img/sub/flow_txt_02.png)no-repeat;background-size: cover;}
.sec1 .st_txt ul:nth-child(3){background: url(../../resources/img/sub/flow_txt_03.png)no-repeat;background-size: cover;}
.sec1 .st_txt ul:nth-child(4){background: url(../../resources/img/sub/flow_txt_04.png)no-repeat;background-size: cover;}
.sec1 .st_txt .num{font-size:50px;font-weight: bold;padding-top: 15px;padding-left: 45px;}
.sec1 .st_txt .num .mo{display: none;}
.sec1 .st_txt .num01{color:#fad1e2;}
.sec1 .st_txt .num02{color:#f2a9cc;}
.sec1 .st_txt .num03{color:#da8cbf;}
.sec1 .st_txt .num04{color:#b380c3;}
.sec1 .st_txt .txt{padding:5px 30px 5px 45px;}
.sec1 .st_txt .txt span{font-weight: bold;}
.sec1 .rol_wrap {width: 100%;margin-top: 60px;}
.sec1 .rol_wrap .rol_tit span{padding:9px;font-weight: bold; background-color: #5353ac;color:#fff;}
.sec1 .rol_wrap .rol_txt{margin:20px;font-size:16px;color:#777;}
.sec1 .rol_wrap .rol_txt p{}
.sec1 .rol_wrap .rol_con{margin:20px; font-size:14px; color:#777;}
.sec1 .rol_wrap .rol_con .con_tit{margin-bottom: 10px;}
.rol_con input[id*="con_tit"]{display: none;}
.rol_con input[id*="con_tit"]+label{display: block; cursor: pointer; position: relative;}
.rol_con input[id*="con_tit"]+label em{position: absolute; top: 15%; margin-left: 5px;width: 14px;height: 14px; display: inline-block;background: url(../../resources/img/sub/arrow_01.png)0 0 no-repeat;background-size: cover;}
.rol_con input[id*="con_tit"]+label+div{max-height: 0;transition: all .5s;overflow: hidden;}
.rol_con input[id*="con_tit"]+label+div p{display: inline-block;}
.rol_con input[id*="con_tit"]:checked+label+div{min-height: 100px;}
.rol_con input[id*="con_tit"]:checked+label em{background: url(../../resources/img/sub/arrow_02.png)0 0 no-repeat;background-size: cover}

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

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

/* sec3 우리아이 레벨은? */
.sec3 {padding: 100px 0;}
.sec3 .chil_lv{width: 100%;height: auto;}
.sec3 .chil_lv .bgc01{background: #f1f1f6;}
.sec3 .chil_lv .bgc02{background: #cccce0;font-weight: 400;}
.sec3 .chil_lv .bgc03{background: #f1ecf7;font-weight: 400;}
.sec3 .chil_lv .bgc04{background: #fceff5;font-weight: 400;}
.sec3 .chil_lv table{width: 100%;text-align: center;}
.sec3 .chil_lv table tr{padding-bottom:5px;}
.sec3 .chil_lv table th{border: 5px solid #fff;text-align: center;line-height: 96px;}
.sec3 .chil_lv table th.spe{line-height: 20px;position:relative;}
.sec3 .chil_lv table th.spe span{line-height: 20px;position: absolute;left: 20%;top: 28%;}
.sec3 .chil_lv thead{width: 100%;}

/*.sec6 .inner p{margin-top: 15px;font-size:16px; color:#777;}*/

/* sec4 레벨산정 시스템 */
.sec4 {padding: 100px 0;background-color: #f9f9f9;}
.sec4 .lv_system{display: flex;flex-flow: column nowrap; justify-content: space-between;width: 100%;height: 800px;background: url(../../resources/img/sub/lv_system_bg.png)center no-repeat;}
.sec4 .lv_system02{display: none;}
.sec4 ul{display: flex;flex-flow: row nowrap; justify-content: space-between;}
.sec4 .sys_01{justify-content: space-around;}
.sec4 .sys_txt{margin-top: 120px;padding-top: 10px;font-size:16px; color:#777;border-top: 1px solid #777;}
/*about e*/

.sec5 {margin-top: 125px;}
.sec5 .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;}
.sec5 .txt_wrap {position:relative;padding: 58px 0 87px 100px;z-index: 0;box-sizing: border-box; }
.sec5 .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;}
.sec5 .txt_wrap .txt_box {width: 36%; display: inline-block; float: left; }
.sec5 .txt_wrap .quo {font-size: 45px; font-family: 'Tmon';color: #5353ac;}
.sec5 .txt_wrap .ti {font-size: 45px; color: #5353ac; font-family: 'Tmon'}
.sec5 .txt_wrap .tx {}
.sec5 .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;}
.sec5.type2 .txt_wrap::before{content: ""; position: absolute; width: 170%; height: 100%; display: inline-block; background: #ecebf5; z-index: -1; top: 0; left:auto;right: 0; border-radius: 0 100px 0 0;}
.sec5.type2 .img_wrap{padding-bottom:0;height:412px;width: 280px;right:auto;left:100px;top:50px;background: url("../../resources/img/sub/about_2.png") no-repeat 0 0;}
.sec5.type2 .txt_wrap .txt_box{float:none;float:right;width: auto;padding-right:100px;padding-top: 30px;}
.sec5.type2 .txt_wrap2{margin:40px 0 20px;}
.sec5.type2 .txt_wrap .tx {line-height: 2;}

.sec6 {margin-top: 210px;}
.sec6 .ti1 {font-size: 32px;}
.sec6 .ti2 {font-size: 55px;}
.sec6 .course_wrap{width:100%; margin:5% 0 5% auto; display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; text-align: center;}
.sec6 .course_wrap .course_box{position: relative; width:17.5%; margin-right:3%;}
.sec6 .course_wrap .course_box:last-child{margin-right: 0;}
.sec6 .course_wrap .course_box .course {position:relative;width:100%;overflow: hidden;border-radius: 100%;box-sizing: border-box;border: 8px solid #9f7dc7;}
.sec6 .course_wrap .course_box:nth-child(2n) .course {border-color: #ed92bd;}
.sec6 .course_wrap .course_box .course img{width:100%;}
.sec6 .course_wrap .course_box .cir_box {position: relative;}
.sec6 .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;}
.sec6 .course_wrap .course_box:nth-child(2n) .numb{border: 8px solid #ed92bd;color:#ed92bd;}
.sec6 .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%);}
.sec6 .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;}
.sec6 .course_wrap .course_box:nth-child(2n) .c_btn{background:#ed92bd;}
.sec6 .course_wrap .c_btn strong{font-weight: 800;}
.sec6 .list_wrap {margin-top: 55px;}
.sec6 .list_wrap li{background: #f1ecf7;margin-bottom: 23px;border-radius: 18px 0 18px 0;position: relative;margin-left: 0;}
.sec6 .list_wrap li:last-child {margin-bottom: 0;}
.sec6 .list_wrap li:nth-child(2n) {margin-left: 0; background: #fceff5;}
.sec6 .list_wrap li .num{font-family: 'Tmon';font-size: 45px;position: absolute;top: -20px;color: #9f7dc7;left: 116px;}
.sec6 .list_wrap li:nth-child(2n) .num {color: #ed92bd;left: 152px;}
.sec6 .list_wrap li .tx{padding: 20px 0 20px 178px;}
.sec6 .list_wrap li:nth-child(2n) .tx {padding-left: 216px;}
/*about e*/

.sec7{text-align: center;padding: 20px 0;}
.sec7 .txt_wrap .txt{color:#505050;font-size:30px;margin-bottom: 70px;font-family: 'Tmon';}
.sec7 .txt_wrap img{width: auto;}

@media screen and (max-width:1300px){
    .sub_vis {height: 660px; width: calc(100% - 100px);margin: 100px 50px 0;}
    .sub_vis .inner {padding-top: 80px;}

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

    /* sec2 레벨별 수업 */
    .sec2 .lv_table .bgc06{line-height: 20px; padding-top:4.5%}

    /* sec3 우리아이 레벨은? */

    /* sec4 레벨산정 시스템 */
    .sec4 .lv_system{background-size: 50%;height: 650px;}
    .sec4 ul{}
    .sec4 ul li{display: flex;align-items: center;flex-flow: column nowrap;}
    .sec4 ul li img{width: 90%;}
    .sec4 .sys_txt{margin-top: 100px;}

    .sec5 .txt_wrap {padding: 58px 0 87px 40px;}
    .sec5 .img_wrap {    width: 880px;}
    .sec5 .txt_wrap .ti {font-size: 42px;}
    .sec5 .txt_wrap .txt_box {width: 40%;}

    .sec5.type2 .txt_wrap .txt_box{width: 58%;padding:0 50px 0 0;}
}
@media screen and (max-width:1200px){
    .about .sec0 .img_box{right: -5px;}
    .about .sec0 .img_box img{width: 80%;}
}
@media screen and (max-width:1100px){
    .sub_vis .inner {text-align: center;}
    .sub_vis h2 {font-size: 45px;}
    .sub_vis h2 .ti1 {font-size: 35px;margin-bottom: 18px;}
    .sec5 .txt_wrap {padding: 120px 0 87px 40px;}
    .sec6 {margin-top: 80px;}
    .sec7 .txt_wrap img{width: 100%;}

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

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

    /* sec2 레벨별 수업 */
    .sec2 .lv_table thead th:nth-child(4){line-height: 20px;padding-top: -2%;}
    .sec2 .lv_table table td>img{width: 80%;}
    .sec2 .lv_table table td .lv_txt ul li{font-size: 15px;}

    /* sec3 우리아이 레벨은? */
    .sec3 .chil_lv table th.spe span{left: 14%;top: 28%;}

    /* sec4 레벨산정 시스템 */
    .sec4 .lv_system{background-size: 45%;height: 550px;}
    .sec4 ul li img{width: 80%;}

    .sec5 .txt_wrap {padding: 120px 0 87px 40px;}
    .sec6 {margin-top: 80px;}

    .about .sec3 {margin-top: 80px;}
}
@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%;}

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

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

    /* sec3 우리아이 레벨은? */
    .sec3 .chil_lv table{font-size:17px;}

    /* sec4 레벨산정 시스템 */
    .sec4 .lv_system{background-size: 40%;height: 450px;}
    .sec4 .lv_system .sys_01 li{align-items: flex-end;}
    .sec4 .lv_system .sys_01 li:nth-child(2){align-items: flex-start;}
    .sec4 ul li img{width: 65%;}


    .sec5 .txt_wrap {padding: 10px 0 37px 40px; margin-top: 210px;}
    .sec5 .txt_wrap .ti {font-size: 28px;}
    .sec5 .txt_wrap .txt_box .pc_block {display: inline;}
    .sec5 .txt_wrap .tx {margin-top: 8px;font-size: 16px;}
    .sec5 .txt_wrap .quo {    height: 40px;}
    .sec5 .txt_wrap .txt_box {width: 100%;}
    .sec5 .img_wrap {margin-top: -180px; width: 100%; position: relative; top: auto; right: auto;}
    .sec5 .img_wrap.type2{left:29%;margin-bottom: 30px;}
    .sec5.type2 .txt_wrap .txt_box{width:100%;padding-top: 50px;float:none;text-align: center;}
    .sec5.type2 .img_wrap{margin: 0 auto;position: relative;left:auto;top:auto;}
    .sec6 .ti1 {font-size: 22px;}
    .sec6 .ti2 {font-size: 28px;}
    .sec6 .course_wrap{justify-content: center;}
    .sec6 .course_wrap .course_box{width:30%; margin-bottom: 5%;}
    .sec6 .course_wrap .course_box:nth-child(4),.sec6 .course_wrap .course_box:nth-child(5){margin-bottom: 0;}
    .sec6 .course_wrap .course_box .numb{/* left:20%; */}
    .sec6 .list_wrap li .num {font-size: 32px;left: 14px;}
    .sec6 .list_wrap li:nth-child(2n) .num {left: 28px;}
    .sec6 .list_wrap li:nth-child(2n) .tx {padding-left: 74px;}
    .sec6 .list_wrap li .tx {font-size: 16px;padding: 13px 10px 13px 56px;}

    .sec7 .txt_wrap .txt{font-size: 25px;}
}
@media screen and (max-width:900px){
        /* flicking */
    .f_wrapper .touch { display:block; }
    .f_scroller {margin-top: 0}

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

    /* sec2 레벨별 수업 */
    .sec2 .lv_table .bgc06{padding-top:5%}
 
    /* sec3 우리아이 레벨은? */
    .sec3 .chil_lv table th.spe span{left: 8%;top: 28%;}

     /* sec4 레벨산정 시스템 */
     .sec4 .lv_system{background-size: 0%;height: auto;}
     .sec4 ul li img{width: 100%;}
}
@media screen and (max-width:768px){
    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 .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*/
    .sec1 .st_txt .num{font-size:30px;}

    .sec5 .txt_wrap {margin-top: 170px;padding: 10px 0 20px 20px;}
    .sec5 .img_wrap {margin-top: -100px; padding-bottom: 50%;}
    .sec6 .course_wrap .course_box .numb{left:0;}
    .sec6 .course_wrap .course_box .cir_box span{right:-16px;}
    .sec6 .tr_wrap .tr_box p{left:6%;}
    .sec6 .tr_wrap .tb_2 p{left: 11%;}
    .sec6 .list_wrap li .tx {padding: 10px 10px 10px 56px;}
    .sec6 .course_wrap .c_btn {font-size: 15px;}
}
@media screen and (max-width:600px){
    .sub_vis h2 {font-size: 32px;}
    .sub_vis h2 .ti1 {font-size: 24px; margin-bottom: 15px;    transform: skew(-0.03deg);}
    .sec6 .course_wrap .course_box .cir_box span{right:-14px;}

    .about .sec3 .course_wrap .course_box .cir_box span{right:-14px;}

    /* sec1 4단계 학습 flow*/
    .sec1 .img_wrap2 {display: none;}
    .sec1 .txt_wrap {width: 100%;height: auto;}
    .sec1 .st_txt{position: relative;flex-flow: row wrap; width: 95%;height: auto;}
    .sec1 .st_txt ul{position: relative; width: 50%;padding:20px;}
    .sec1 .st_txt ul:nth-child(3n+1){background: #fceff5;}
    .sec1 .st_txt ul:nth-child(2){background: #f1ecf7;}
    .sec1 .st_txt ul:nth-child(3){background: #f1ecf7;}
    .sec1 .st_txt .num .mo{display: block;font-size:18px;padding:10px 0;}
    .sec1 .st_txt .num01, .sec1 .st_txt .num04{color:#ed92bd;}
    .sec1 .st_txt .num02, .sec1 .st_txt .num03{color:#9f7dc7;}
    .sec1 .st_txt .num{padding: 0px;}
    .sec1 .st_txt .txt{padding:0px;font-size:0.9em;}
    .sec1 .rol_wrap {margin: 30px 20px 0;}
    .sec1 .rol_wrap .rol_con{font-size:15px;}

    .sec6 .course_wrap .course_box .cir_box span{right:-14px;}

}
@media screen and (max-width:550px){
    .sec6 .course_wrap{flex: none;}
    .sec6 .course_wrap .course_box{width:60%;}
    .sec6 .course_wrap .course_box .cir_box span{display: none;}
    .sec6 .course_wrap .course_box .numb{left: 3vw;}
    .sec6 .course_wrap .course_box:nth-child(4){margin-bottom:5%;}  
    
    .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%;}
}
@media screen and (max-width:500px){
    .sub_vis {width: 100%;margin: 70px 0 0; border-radius: 50px 0 50px 0;}
    /* sec4 레벨산정 시스템 */
    .sec4 .lv_system{display: none;}
    .sec4 .lv_system02{display: block;}
    .sec4 ul{display: flex;flex-flow: column wrap;}
    .sec4 ul li img{width: 100%;padding-top: 10px;}

    .about .sec0 .txt_box{margin-top:300px;}
    .about .sec0 .img_box img{width: 70%;top:-1%;}
    .about .sec0 .img_box.type3 img{width: 70%;top:-1%;}
    .about .sec1 .img_wrap {background-position: center right -60px;}
}