@charset "UTF-8";

.wrap {padding-bottom: 80px;}

.fixed_area {position: fixed; bottom: 0; left: 0; width: 100%; height: 80px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; z-index: 555; box-shadow: 0 -2px 12px 3px rgba(67, 62, 84, .08);}
.fixed_area>* {width: 50%; height: 80px; font-size: 1.375em; color: var(--white);}
.fixed_area .price_area {background: #ECE5FF; text-align: center; font-family: Pretendard; font-weight: 300; display: -webkit-flex; display: flex; justify-content: center; align-items: center; color: var(--highlight);}
.fixed_area .price_area span {margin-right: 90px;}
.fixed_area .price_area span:last-child {margin-right: 0;}
.fixed_area .price_area .price {font-family: futura-pt; font-weight: 700;}
.fixed_area button {background: var(--highlight); font-weight: 700; color: var(--white);}

.class-register {padding-top: 140px; padding-bottom: 200px;}

.ul-class-register .item::after {display: inline-block; content: ''; width: 100%; height: 1px; background: #707070; margin: 50px 0;}
.ul-class-register .item:last-child::after {display: none;}
.ul-class-register .item .class-register-area .flex {display: -webkit-flex; display: flex; justify-content: space-between; align-items: end;}
.essential {color: #FE5F75;}
.ul-class-register .item .class-register-area .title3 .essential {font-weight: 400;}
.ul-class-register .item .class-register-area .title3 .choose {font-weight: 400;}
.ul-class-register .item .class-register-area .btn-popup {width: 190px; height: 30px; border-radius: 4px; background: #FFE8F4; font-weight: 400; font-size: 1em; color: rgba(117,94,106,1); margin-bottom: 30px;}
.ul-class-register .item .class-register-area .title3 {margin-bottom: 30px;}
.ul-class-register .item .class-register-area .btn_area {width: 100%; display: -webkit-flex; display: flex; justify-content: start; align-items: start;}
.ul-class-register .item3 .class-register-area .btn_area {margin-bottom: 30px;}
.ul-class-register .item .class-register-area .btn_area .btn-class-register {height: 54px; padding: 10px 0; border-radius: 6px; border: var(--border-solid); background: var(--white); font-size: 1.313em; color: #3D3D3D; margin-right: 30px;}
.ul-class-register .item .class-register-area .btn_area .btn-class-register:last-of-type {margin-right: 0;}
.ul-class-register .item .class-register-area .btn_area .btn-class-register.on {border-color: transparent; background: var(--highlight); color: rgba(255,255,255,1);}
.ul-class-register .item1 .class-register-area .btn_area .btn-type {width: calc((100% - 90px)/4);}
.ul-class-register .item2 .class-register-area .btn_area .btn-age {width: calc((100% - 90px)/4);}
.ul-class-register .item3 .class-register-area .btn_area .btn-curriculum {width: calc((100% - 120px)/6);}
.ul-class-register .item3#kid_curriculum_div .class-register-area .btn_area {-webkit-flex-wrap: wrap; flex-wrap: wrap;}

.textbook {width: 100%; height: 54px; border-radius: 6px; border: var(--border-solid); background: var(--white); line-height: 54px; font-size: 1.125em; position: relative; margin-bottom: 20px; cursor: pointer;}
.textbook:last-child {margin-bottom: 0;}
.textbook input[type=radio] + label {width: 100%; height: 100%; margin: 0;}
.textbook input[type=radio] + label::before {left: 40px; content: '\f14a'; font-weight: 400; font-family: "Font Awesome 6 Free"; color: #CFCFCF; font-size: 20px; width: auto; height: auto; border: 0; border-radius: 0;}
.textbook input[type=radio] + label::after {display: none;}
.textbook input[type=radio]:checked + label::before {display: inline-block; content: '\f14a'; font-weight: 900; font-family: "Font Awesome 6 Free"; color: var(--highlight); font-size: 20px;}
.textbook .txt_area {width: 100%; height: 100%; padding: 0 40px; text-align: center;}
.textbook .bookTitle {margin-left: 10px;}
.textbook.on {border-color: transparent; background: #ECE5FF;}
/* .textbook.on::before {display: inline-block; content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1.25em; color: var(--highlight);} */
.textbook .btn-preview {display: block; width: 120px; height: 30px; padding: 2px 15px; border: var(--border-solid); background: var(--white); border-radius: 4px; position: absolute; top: 50%; right: 40px; transform: translateY(-50%);}
.textbook.on .step {font-weight: 700;}
.textbook.on .bookTitle {font-weight: 700; color: var(--highlight);}

.ul-class-register .item3 .notification {margin-top: 20px;}
.notification {text-align: left; font-weight: 300; font-size: 0.875em; color: rgba(21,12,46,1); margin-bottom: 12px;}
.notification:last-child {margin-bottom: 0;}

.ul-class-register .item4 .class-register-area .classNumber {margin-bottom: 30px; display: -webkit-flex; display: flex; justify-content: start; align-items: start; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.ul-class-register .item4 .class-register-area .classNumber .tit {width: 100%;}
.ul-class-register .item4 .class-register-area .classPeriod {margin-bottom: 20px;}
.ul-class-register .item4 .class-register-area .tit {font-weight: 700; font-size: 1.25em; color: #3d3d3d; margin-bottom: 20px;}
.ul-class-register .item4 .class-register-area .select {width: calc((100% - 60px)/3); margin-right: 30px;}
.ul-class-register .item4 .class-register-area .select:last-child {margin-right: 0;}


.ul-class-register .item5 .class-register-area {display: -webkit-flex; display: flex; justify-content: start; align-items: start; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.ul-class-register .item5 .class-register-area .title3 {width: 100%;}
.ul-class-register .item5 .class-register-area .tit {font-weight: 700; font-size: 1.25em; color: #3d3d3d; margin-bottom: 20px;}
.ul-class-register .item5 .class-register-area .classStartDate {width: calc((100% - 60px)/3); margin-right: 30px; margin-bottom: 20px;}
.ul-class-register .item5 .class-register-area .classStartDate .dateSelectInline {width: 100%; display: none;}
.ul-class-register .item5 .class-register-area .classStartDate .flatpickr-calendar {
    font-size: 1.125em;
    width: 100%;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.ul-class-register .item5 .class-register-area .classStartDate .flatpickr-calendar.inline { 
    border: var(--border-solid);
    border-radius: 6px;
}
.flatpickr-months .flatpickr-month {height: 54px;}
.flatpickr-current-month {height: 54px; font-size: 110%; padding: 14px 0;}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {height: 54px; padding: 20px 10px; line-height: 14px;}
.flatpickr-months, .flatpickr-innerContainer, .flatpickr-rContainer, .flatpickr-days {width: 100%;}
.dayContainer {width: 100%; min-width: 100%; max-width: 100%;}
.flatpickr-day {width: calc(100%/7); max-width: 52px; height: 52px; line-height: 52px;}
.ul-class-register .item5 .class-register-area .classStartTime {width: calc(((100% - 60px)/3*2) + 30px);}
.ul-class-register .item5 .class-register-area .classStartTime .tit {width: 100%;}
.ul-class-register .item5 .class-register-area .classStartTime .sub-tit {font-weight: 500; font-size: 1.125em; color: #3d3d3d; margin-bottom: 20px;}
.ul-class-register .item5 .class-register-area .classStartTime .sub-tit span {font-weight: 300;}
.ul-class-register .item5 .class-register-area .preference_area {display: -webkit-flex; display: flex; justify-content: start; align-items: start; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.ul-class-register .item5 .class-register-area .preference {width: calc((100% - 30px)/2); margin-right: 30px;}
.ul-class-register .item5 .class-register-area .preference:nth-child(2n) {margin-right: 0;}
.ul-class-register .item5 .class-register-area .preference:last-child {margin-right: 0;}

.ul-class-register .item5 .class-register-area .notification {width: 100%;}


.ul-class-register .item-partner .class-register-area .input_area {display: -webkit-flex; display: flex; justify-content: start; align-items: start; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.ul-class-register .item-partner .class-register-area input {width: calc((100% - 30px)/2); margin-right: 30px; margin-bottom: 30px;}





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

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

@media screen and (max-width:992px){
    .class-register {padding: 0 50px; padding-top: 80px; padding-bottom: 150px;}

    .ul-class-register .item::after {margin: 40px 0;}
    .ul-class-register .item .class-register-area .btn_area .btn-class-register {height: auto;}
    .textbook .btn-preview {width: auto; height: auto;}
}

@media screen and (min-width:769px){
	.ul-class-register .item3#kid_curriculum_div .class-register-area .btn_area .btn-curriculum {width: calc((100% - 120px)/4); margin-bottom: 10px;}
	.ul-class-register .item3#kid_curriculum_div .class-register-area .btn_area .btn-curriculum:nth-last-of-type(-n+4) {margin-bottom: 0;}
}

@media screen and (max-width:768px){
    .fixed_area .price_area {flex-direction: column;}
    .fixed_area .price_area span {margin-right: 0;}

    .ul-class-register .item::after {margin: 30px 0;}
    .ul-class-register .item .class-register-area .btn_area {-webkit-flex-wrap: wrap; flex-wrap: wrap;}

    .textbook {height: auto; line-height: 1.5;}
    /* .textbook.on::before {content: "\f063";} */
    .textbook input[type=radio] {height: auto;}
    .textbook input[type=radio] + label {height: auto;}
    .textbook input[type=radio] + label::before {left: 16px;}
    .textbook input[type=radio]:checked + label::before {left: 16px;}
    .textbook .txt_area {height: auto; padding: 20px 33.5px; padding-bottom: 62px;}
    .textbook .btn-preview {top: auto; bottom: 16px; right: auto; left: 50%; transform: translateX(-50%);}

    .ul-class-register .item4 .class-register-area .select {width: calc((100% - 16px)/2); margin-right: 16px;}
    .ul-class-register .item4 .class-register-area .select:last-child {margin-right: 0;}

    .ul-class-register .item5 .class-register-area .classStartDate {width: calc((100% - 30px)/2);}
    .ul-class-register .item5 .class-register-area .classStartTime {width: calc((100% - 30px)/2);}
    .ul-class-register .item5 .class-register-area .preference {width: 100%; margin-right: 0; margin-bottom: 30px;}
    .ul-class-register .item5 .class-register-area .preference:nth-child(2n) {margin-bottom: 0;}
    .ul-class-register .item5 .class-register-area .preference:last-child {margin-bottom: 0;}
    .flatpickr-day {max-width: 45px; height: 45px; line-height: 45px;}

    .ul-class-register .item-partner .class-register-area input {width: calc((100% - 16px)/2); margin-right: 16px; margin-bottom: 16px;}
}

@media screen and (min-width:481px) and (max-width: 768px){
    .ul-class-register .item1 .class-register-area .btn_area .btn-type {width: calc((100% - 48px)/4); margin-right: 16px; margin-bottom: 16px;}
    .ul-class-register .item1 .class-register-area .btn_area .btn-type:nth-of-type(4n) {margin-right: 0;}
    .ul-class-register .item1 .class-register-area .btn_area .btn-type:nth-last-of-type(-n+4) {margin-bottom: 0;}

    .ul-class-register .item2 .class-register-area .btn_area .btn-age {width: calc((100% - 32px)/3); margin-right: 16px; margin-bottom: 16px;}
    .ul-class-register .item2 .class-register-area .btn_area .btn-age:nth-of-type(3n) {margin-right: 0;}
    .ul-class-register .item2 .class-register-area .btn_area .btn-age:nth-last-of-type(-n+3) {margin-bottom: 0;}

    .ul-class-register .item3 .class-register-area .btn_area .btn-curriculum {width: calc((100% - 32px)/3); margin-right: 16px; margin-bottom: 16px;}
    .ul-class-register .item3 .class-register-area .btn_area .btn-curriculum:nth-of-type(3n) {margin-right: 0;}
    .ul-class-register .item3 .class-register-area .btn_area .btn-curriculum:nth-last-of-type(-n+3) {margin-bottom: 0;}
}

@media screen and (min-width:481px) {
    .ul-class-register .item-partner .class-register-area input:nth-child(2n) {margin-right: 0;}
    .ul-class-register .item-partner .class-register-area input:nth-last-child(-n+2) {margin-bottom: 0;}
}

@media screen and (max-width:480px){
    .class-register {padding: 0 16px; padding-top: 50px; padding-bottom: 100px;}

    .ul-class-register .item::after {margin: 30px 0;}

    .ul-class-register .item .class-register-area .btn_area .btn-class-register {margin-right: 16px;}
    .ul-class-register .item .class-register-area .btn_area .btn-class-register:last-of-type {margin-right: 0;}

    .ul-class-register .item1 .class-register-area .btn_area .btn-type {width: calc((100% - 16px)/2); margin-bottom: 16px;}
    .ul-class-register .item1 .class-register-area .btn_area .btn-type:nth-of-type(even) {margin-right: 0;}
    .ul-class-register .item1 .class-register-area .btn_area .btn-type:nth-last-of-type(-n+2) {margin-bottom: 0;}

    .ul-class-register .item2 .class-register-area .btn_area .btn-age {width: calc((100% - 32px)/3);}

    .ul-class-register .item3 .class-register-area .btn_area .btn-curriculum {width: calc((100% - 16px)/2); margin-bottom: 16px;}
    .ul-class-register .item3#kid_curriculum_div .class-register-area .btn_area .btn-curriculum {width: calc((100% - 16px)/2); margin-bottom: 16px;}
    .ul-class-register .item3 .class-register-area .btn_area .btn-curriculum:nth-of-type(2n) {margin-right: 0;}
    .ul-class-register .item3 .class-register-area .btn_area .btn-curriculum:nth-last-of-type(-n+2) {margin-bottom: 0;}

    .ul-class-register .item4 .class-register-area .tit {margin-bottom: 10px;}
    
    .ul-class-register .item5 .class-register-area .classStartDate {width: 100%; margin-right: 0; margin-bottom: 30px;}
    .ul-class-register .item5 .class-register-area .classStartTime {width: 100%; margin-bottom: 20px;}
    .ul-class-register .item5 .class-register-area .classStartTime .sub-tit {margin-bottom: 10px;}

    .ul-class-register .item-partner .class-register-area input {width: 100%; margin-right: 0; margin-bottom: 16px;}
    .ul-class-register .item-partner .class-register-area input:last-child {margin-bottom: 0;}
}