@charset "UTF-8";

.contents {padding-top: 140px;}

.step .text2 {margin-bottom: 50px;}
.step .title3 {margin-bottom: 60px; text-align: center;}
.step .inner .ul-step {display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.step .inner .ul-step .dash-box {width: calc((100% - 192px)/4);}


.class-register {padding-bottom: 200px;}
.class-register .title2 {margin-bottom: 50px;}
.class-register .title3 {line-height: 1.5;}
.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 .area2::after {display: block; content: ''; width: 100%; height: 1px; background: #cfcfcf; margin: 40px 0;}

.grid-box {display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 30px;}
.class-register-form-wrap .area1 .grid-box2 {grid-template-columns: 44fr 28fr 28fr;}
.class-register-form-wrap .area2 .grid-box2 {grid-template-columns: 28fr 28fr 44fr;}

.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% - 60px)*0.44); margin-right: 30px; padding-right: 56px;}
.class-register-form-wrap .area1 .flex-box select {width: calc((100% - 60px)*0.28); margin-right: 30px;}
.class-register-form-wrap .area1 .flex-box select:last-child {margin-right: 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;}
.class-register-form-wrap .btn_area .btn {width: 100%; max-width: 460px; height: 80px; padding: 13px 0; border-radius: 40px; font-weight: 700; font-size: 2.250em;}





@media screen and (max-width:1200px){
    .contents {padding: 0 50px; padding-top: 140px;}
    .class-register {padding-bottom: 200px;}
}

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

@media screen and (max-width:992px){
    .contents {padding: 0 50px; padding-top: 80px;}
    .step .title2.step {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;}
    .class-register-form-wrap .btn_area .btn {height: auto;}
}

@media screen and (min-width: 769px){
    .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){
    .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 .btn_area .btn {font-size: 2em;}
}

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

    .class-register-form-wrap .area1 {margin-bottom: 50px;}

    .grid-box {grid-template-columns: repeat(2, 1fr); gap: 16px;}

    .class-register-form-wrap .area2 .grid-box2 {grid-template-columns: repeat(2, 1fr);}
    .class-register-form-wrap .area2 .input-pw {grid-column: 1 / span 2;}

    .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;}
}

@media screen and (max-width:480px){
    .contents {padding: 0 16px; padding-top: 50px;}
    .tutor {padding-top: 120px;}    
    .tutor .inner .box1, .tutor .inner .box2 {width: 100%;}
    .tutor .inner .box1 {margin-right: 0; margin-bottom: 50px;}
    .curriculum {padding-top: 0;}
    .detail {padding: 0; padding-top: 80px;}
    .videotab-wrap {padding: 0 16px; margin-bottom: 50px;}
    .detail>.inner {padding: 0 16px;}
    .ul-detail .item .detail_area {flex-direction: column; padding: 30px 24px;}
    .ul-detail .item .detail_area .img_area {margin: 0 auto; margin-bottom: 50px;}
    .ul-detail .item .detail_area .txt_area {max-width: 100%;}
    .ul-detail .item .detail_area .txt_area ul .tit {text-align: center;}

    .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-form-wrap {padding: 40px 16px;}

    .class-register-form-wrap .area1 {margin-bottom: 30px;}
    .class-register-form-wrap .area2::after {margin: 30px 0;}

    .grid-box {grid-template-columns: repeat(1, 1fr); grid-template-rows: auto; gap: 16px;}
    .class-register-form-wrap .area1 .grid-box2 {grid-template-columns: repeat(1, 1fr);}
    .class-register-form-wrap .area2 .grid-box2 {grid-template-columns: repeat(1, 1fr);}

    .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 .ul-notification {margin-bottom: 40px;}
    .class-register-form-wrap .check_area {margin-bottom: 50px;}
    .class-register-form-wrap .btn_area .btn {font-size: 1.6em;}
}