@charset "UTF-8";

#header {background: transparent; border-bottom: 0;}
#header::before{background: transparent;}
#header.sub-menu-open::after{display: none;}
#header .gnb .ul-sub-menu .item a{color: #fff;}


#header .logo-area .logo {display: none;}
#header .logo-area .logo-white {display: block;}

#header .logo-area2 .logo path {fill: var(--white);}

#header .gnb .ul-main-menu>.item .main-menu {color: var(--white);}

#header.shrink {background: var(--white); border-bottom: var(--border-solid);}

#header.shrink .logo-area .logo {display: block;}
#header.shrink .logo-area .logo-white {display: none;}

#header.shrink .logo-area2 .logo path {fill: #1C0C48;}

#header.shrink .gnb .ul-main-menu>.item .main-menu {color: #111111;}

#header .btn-m-menu {color: var(--white);}
#header.shrink .btn-m-menu {color: var(--gray80);}


.visual {position: relative; width: 100%; height: 760px; background-image: url("../img/kids/visual.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; padding-top: 210px;}
.visual .title_area {color: var(--white); line-height: 1.8; width: 100%; max-width: 1200px; margin: 0 auto;}
.visual .title_area .txt {font-weight: 300; margin-bottom: 26px;}
.visual .title_area .txt1 {font-size: 2.125em;}
.visual .title_area .txt2 {font-size: 3.750em;}
.visual .title_area .tit {font-size: 3.750em; font-weight: 800;}
.visual .title_area .tint {color: #FFDD3C; position: relative;}
.visual .title_area .tint::before {display: inline-block; content: ''; width: 10px; height: 10px; border-radius: 50%; background: #FFDD3C; position: absolute; top: -19px; left: 50%; transform: translateX(-50%);}


.btn {width: 100%; max-width: 600px; height: 80px; padding: 13px 10px; border-radius: 40px; font-weight: 700; font-size: 2.250em;}
.visual .btn {position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); display: -webkit-flex; display: flex; justify-content: center; align-items: center;}


.contents {padding-top: 180px;}
.tutor .inner>.title2 {font-weight: 500; line-height: 1.5; margin-bottom: 80px;}
.tutor .inner>.title2 .tit {font-weight: 700;}
.tutor .inner>.title2 .tint {color: var(--highlight);}
.tutor .slogan {margin: 66px 0;}

.table {width: 100%;}
.table th, .table td {border: var(--border-solid);}

.reference .table-wrap {text-align: right;}
.reference .table-wrap .table-reference {text-align: center;}

.table-reference th {background: #F7F5FF; padding: 10px 30px; text-align: center; font-weight: 300; font-size: 0.938em;}
.table-reference td {background: var(--white); padding: 10px 30px; font-weight: 400; font-size: 1.063em;}
.backslash {background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="rgb(223,223,223)" /></svg>');}
.table-reference .th_backslash {padding: 12px 14px; position: relative;}
.table-reference .th_backslash .level {text-align: right; position: absolute; top: 12px; right: 14px;}
.table-reference .th_backslash .cate {text-align: left; position: absolute; bottom: 12px; left: 14px;}

.tutor .inner .box {display: -webkit-flex; display: flex; justify-content: start; align-items: start; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.tutor .inner .box1, .tutor .inner .box2 {width: calc((100% - 64px)/2);}
.tutor .inner .box1 {margin-right: 64px;}
.tutor .inner .box1 img {display: block; width: 100%;}
.tutor .inner .box2 .title2 {text-align: left; line-height: 1;}
.tutor .inner .box2 .text3 span {display: inline-block; position: relative;}
.tutor .inner .box2 .text3 span::before {display: inline-block; content: ''; width: 100%; height: 14px; background: rgba(255, 231, 60, .3); position: absolute; bottom: 0; z-index: -1;}


.horizontal_line {
    width: 100%; height: 1px; margin: 140px 0;
    background-image: linear-gradient(to right, rgb(112, 112, 112) 50%, rgba(112, 112, 112, 0) 50%);
    background-position: bottom;
    background-size: 20px 1px;
    background-repeat: repeat-x;
}


.curriculum {padding-top: 0;}

.btn-popup {border-radius: 4px; background: #FFE8F4; font-weight: 400; font-size: 1em; color: rgba(117,94,106,1); margin-bottom: 20px;}
.btn-lv {width: 100px; height: 30px;}

.table {width: 100%;}
.table th, .table td {border: var(--border-solid);}

.detail .title2 {margin-bottom: 60px;}


.videotab-wrap {border-top: var(--border-solid); border-bottom: var(--border-solid); position: relative; margin-bottom: 80px;}
.videotab-wrap .inner {position: relative;}
.videotab-wrap .tab {font-size: 1.125em; font-weight: 300; white-space: nowrap; overflow-x: auto;}
.videotab-wrap .tab {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.videotab-wrap .tab::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
.videotab-wrap .tab li {display: inline-block; min-width: 100px; line-height: 58px; height: 60px; text-align: center; padding: 0px 35px; border-bottom: 4px solid var(--white); cursor: pointer;}
.videotab-wrap .tab li.active {color: var(--highlight); border-color: var(--highlight); font-weight: 700;}
.videotab-wrap .tab .btn_area {min-width: auto; padding: 0; border-bottom: 0;}
.videotab-wrap .tab .btn_prev {position: absolute; left: 0;}
.videotab-wrap .tab .btn_next {position: absolute; right: 0;}
.videotab-wrap .tab .btn_move {background: var(--white); color: var(--highlight); font-size: 1.11em; line-height: 60px; height: 100%; cursor: pointer; z-index: 1;}
.videotab-wrap .tab .prev {padding-right: 30px;}
.videotab-wrap .tab .next {padding-left: 30px;}
.scroll-tab {padding: 0 40px; overflow: hidden;}


.ul-detail .item {margin-bottom: 50px;}
.ul-detail .item:last-child {margin-bottom: 0;}
.ul-detail .item .detail_area {position: relative; padding: 30px 40px; display: -webkit-flex; display: flex; justify-content: start; align-items: start; -webkit-flex-wrap: wrap; flex-wrap: wrap; border: var(--border-solid); border-top: 2px solid var(--highlight);}
.ul-detail .item .detail_area .img_area {display: inline-block; width: 100%; max-width: 106px; margin-right: 30px;}
.ul-detail .item .detail_area .img_area img {display: block; width: 100%;}

.ul-detail .item .detail_area .txt_area ul li {position: relative; margin-bottom: 20px;}
.ul-detail .item .detail_area .txt_area ul .tit {font-size: 1.250em; font-weight: 700; color: #3d3d3d;}
.ul-detail .item .detail_area .txt_area ul .info {font-size: 1.063em;}
.ul-detail .item .detail_area .txt_area ul .learningTime {font-size: 1.063em; color: var(--highlight);}

.ul-detail .item .detail_area .btn_area {display: -webkit-flex; display: flex; flex-direction: column; justify-content: center; align-content: center;}
.ul-detail .item .detail_area .btn_area button {width: 130px; height: 40px; padding: 7px 0; border-radius: 999px; font-size: 1.063em; font-weight: 500; border: 1px solid #707070; background: var(--white); margin-bottom: 12px;}
.ul-detail .item .detail_area .btn_area button:last-child {margin-bottom: 0;}
.ul-detail .item .detail_area .btn_area .btn-register {background: var(--highlight); border: 0; font-weight: 700; color: var(--white);}


.step {padding-top: 0;}
.step .title2 {margin-bottom: 110px;}
.step .inner .ul-step {display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.step .inner .ul-step .dash-box {width: calc((100% - 320px)/6);}


.class-register {padding-bottom: 200px;}
.class-register .title2 {margin-bottom: 60px;}
.class-register-form-wrap {border: var(--border-solid); background: rgba(255,250,245,1); padding: 80px 100px;}
.class-register-form-wrap .area1 {margin-bottom: 70px;}
.class-register-form-wrap .area .flex-box {display: -webkit-flex; display: flex; justify-content: start; align-items: start; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.class-register-form-wrap .area1 .flex-box .dateSelect {width: calc((100% - 100px)*0.44); margin-right: 50px;}
.class-register-form-wrap .area1 .flex-box select {width: calc((100% - 100px)*0.28); margin-right: 50px;}
.class-register-form-wrap .area1 .flex-box select:last-child {margin-right: 0;}

.class-register-form-wrap .area2::after {display: block; content: ''; width: 100%; height: 1px; background: #cfcfcf; margin: 40px 0;}
.class-register-form-wrap .area2 .flex-box>* {width: calc((100% - 100px)/3); margin-right: 50px; margin-bottom: 30px;}

.class-register-form-wrap .ul-notification {margin-bottom: 50px;}
.class-register-form-wrap .ul-notification li {font-size: 1.125em;}

.class-register-form-wrap .check_area {margin-bottom: 70px;}
.class-register-form-wrap .check_area input[type=checkbox] + label {font-size: 1.125em;}

.class-register-form-wrap .btn_area {text-align: center;}

.scroll::-webkit-scrollbar {width: 20px; height: 20px;}
.scroll::-webkit-scrollbar-thumb {width: 20px; border-radius: 10px; border: 7px solid transparent;}
.scroll::-webkit-scrollbar-track {width: 20px; border-radius: 10px;}





@media screen and (max-width:1200px){
    .visual {padding: 0 50px; padding-top: 170px;}
    .contents {padding: 0 50px; padding-top: 180px;}
    .reference .table-wrap {overflow-x: auto;}
    .curriculum {padding-top: 0;}
    .curriculum .table-wrap {overflow-x: auto;}
    .curriculum .table-wrap .table-curriculum {width: 1200px;}
    .detail {padding: 0; padding-top: 180px;}
    .detail>.inner {padding: 0 50px;}
    .videotab-wrap {padding: 0 50px;}
    .step {padding-top: 0;}
    .class-register {padding-bottom: 200px;}
}

@media screen and (min-width:993px){
}

@media screen and (max-width:992px){
    .btn {height: auto;}

    .visual .btn {width: calc(100% - 100px); bottom: -36.625px;}

    .contents {padding: 0 50px; padding-top: 80px;}

    .tutor {padding-top: 116.625px;}
    .tutor .inner>.title2 {margin-bottom: 50px;}
    .tutor .inner .box1, .tutor .inner .box2 {width: calc((100% - 50px)/2);}
    .tutor .inner .box1 {margin-right: 50px;}
    .horizontal_line {margin: 80px 0;}
    .curriculum {padding-top: 0;}
    .detail {padding: 0; padding-top: 80px;}
    .detail .title2 {margin-bottom: 50px;}
    .videotab-wrap {margin-bottom: 50px;}
    .ul-detail .item {margin-bottom: 40px;}
    .ul-detail .item .detail_area .btn_area button {height: auto;}
    .step {padding-top: 0;}
    .step .title2 {margin-bottom: 80px;}
    .step .inner .ul-step {-webkit-flex-wrap: wrap; flex-wrap: wrap;}
    .class-register {padding-bottom: 150px;}
    .class-register .title2 {margin-bottom: 50px;}
    .class-register-form-wrap {padding: 40px 50px 60px;}
}

@media screen and (min-width: 481px) and (max-width: 992px) {
    .step .inner .ul-step .dash-box {width: calc((100% - 100px)/3); margin-right: 50px;}
    .step .inner .ul-step .dash-box:nth-child(-n+3) {margin-bottom: 80px;}
    .step .inner .ul-step .dash-box::after {left: calc(100% + 18.75px);}
    .step .inner .ul-step .dash-box3 {margin-right: 0;}
    .step .inner .ul-step .dash-box3::after {top: auto; bottom: -40px; left: 50%; transform: translateX(-50%); content: '\f078';}
    .step .inner .ul-step .dash-box4 {order: 6; margin-right: 0; margin-left: 50px;}
    .step .inner .ul-step .dash-box4::after {content: '\f053'; left: -31.25px;}
    .step .inner .ul-step .dash-box5 {order: 5; margin-right: 0; margin-left: 50px;}
    .step .inner .ul-step .dash-box5::after {content: '\f053'; left: -31.25px;}
    .step .inner .ul-step .dash-box6 {order: 4; margin-right: 0;}
}

@media screen and (min-width: 769px){
    .ul-detail .item .detail_area .txt_area {max-width: calc(100% - 326px);}
    .ul-detail .item .detail_area .btn_area {position: absolute; top: 50%; right: 40px; transform: translateY(-50%);}
    .class-register-form-wrap .area2 .flex-box>*:nth-last-child(-n+3) {margin-bottom: 0;}
    .class-register-form-wrap .area2 .flex-box>*:nth-child(3n) {margin-right: 0;}
}

@media screen and (max-width:768px){
    .visual .btn {font-size: 2em; bottom: -34px;}

    .tutor {padding-top: 114px;}
    .tutor .inner .box1, .tutor .inner .box2 {width: calc((100% - 30px)/2);}
    .tutor .inner .box1 {margin-right: 30px;}

    .detail .title2 {margin-bottom: 40px;}
    .ul-detail .item {margin-bottom: 30px;}
    .ul-detail .item .detail_area {padding: 30px;}
    .ul-detail .item .detail_area .txt_area {max-width: calc(100% - 136px);}
    .ul-detail .item .detail_area .btn_area {width: 100%; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-top: 20px;}
    .ul-detail .item .detail_area .btn_area button {width: calc((100% - 24px)/3); margin: 0; margin-right: 12px;}
    .ul-detail .item .detail_area .btn_area button:nth-of-type(3n) {margin-right: 0;}
    .ul-detail .item .detail_area .btn_area button:last-of-type {margin-right: 0;}

    .class-register .title2 {margin-bottom: 40px;}
    .class-register-form-wrap {padding: 40px 30px 60px;}
    .class-register-form-wrap .area1 .flex-box .dateSelect {width: 100%; margin-right: 0; margin-bottom: 20px;}
    .class-register-form-wrap .area1 .flex-box select {width: calc((100% - 20px)/2); margin-right: 20px;}
    .class-register-form-wrap .area1 .flex-box select:last-child {margin-right: 0;}
    .class-register-form-wrap .btn_area .btn {font-size: 2em;}
}

@media screen and (min-width:481px) and (max-width:768px){
    .class-register-form-wrap .area2 .flex-box>* {width: calc((100% - 20px)/2); margin-right: 20px; margin-bottom: 20px;}
    .class-register-form-wrap .area2 .flex-box>*:nth-last-child(-n+2) {margin-bottom: 0;}
    .class-register-form-wrap .area2 .flex-box>*:nth-child(2n) {margin-right: 0;}
    .class-register-form-wrap .area2 .flex-box .input-pw {width: 100%; margin-right: 0;}
}

@media screen and (max-width:480px){
    .visual {padding: 0 16px; padding-top: 170px;}
    .visual .btn {width: calc(100% - 32px); font-size: 1.6em; bottom: -27.4px;}

    .contents {padding: 0 16px; padding-top: 50px;}

    .tutor {padding-top: 77.4px;}
    .tutor .inner .box1, .tutor .inner .box2 {width: 100%;}
    .tutor .inner .box1 {margin-right: 0; margin-bottom: 50px;}
    .table-reference th {padding: 10px;}
    .table-reference .th_backslash {padding: 12px 14px;}
    .table-reference td {padding: 10px;}

    .curriculum {padding-top: 0;}
    .detail {padding: 0; padding-top: 80px;}
    .detail .title2 {margin-bottom: 30px;}
    .videotab-wrap {padding: 0 16px; margin-bottom: 50px;}
    .detail>.inner {padding: 0 16px;}
    .ul-detail .item .detail_area {flex-direction: column; padding: 20px 16px;}
    .ul-detail .item .detail_area .img_area {margin: 0 auto; margin-bottom: 30px;}
    .ul-detail .item .detail_area .txt_area {max-width: 100%;}
    .ul-detail .item .detail_area .txt_area ul .tit {text-align: center;}
    .ul-detail .item .detail_area .btn_area button {width: calc((100% - 12px)/3); margin-right: 6px;}

    .step {padding-top: 0;}
    .step .inner .ul-step .dash-box {width: 100%; height: 140px; margin-right: 0; margin-bottom: 100px;}
    .step .inner .ul-step .dash-box:last-child {margin-bottom: 0;}
    .step .inner .ul-step .dash-box::before {height: 144px; clip-path: inset(70px 0 0 0);}
    .step .inner .ul-step .dash-box::after {content: '\f078'; top: calc(100% + 20px); left: 50%; transform: translateX(-50%);}
    .step .inner .ul-step .dash-box br {display: none;}

    .class-register {padding-bottom: 100px;}
    .class-register .title2 {margin-bottom: 30px;}
    .class-register-form-wrap {padding: 40px 16px;}
    .class-register-form-wrap .area1 .flex-box>* {margin-bottom: 20px;}
    .class-register-form-wrap .area1 .flex-box>*:last-child {margin-bottom: 0;}
    .class-register-form-wrap .area1 .flex-box .dateSelect {width: 100%; margin-right: 0;}
    .class-register-form-wrap .area1 .flex-box select {width: 100%; margin-right: 0;}
    .class-register-form-wrap .area2 .flex-box>* {width: 100%; margin-right: 0; margin-bottom: 20px;}
    .class-register-form-wrap .area2 .flex-box>*:last-child {margin-bottom: 0;}
    .class-register-form-wrap .btn_area .btn {font-size: 1.6em;}
}