@charset "utf-8";
/* CSS Document */
#enrolment-wrap{padding:8.75rem 0; font-family: "Roboto","Noto Sans Kr", sans-serif;}
#enrolment-wrap p{font-family: "Roboto","Noto Sans Kr", sans-serif;}
#enrolment-wrap a{font-family: "Roboto","Noto Sans Kr", sans-serif;}
#enrolment-wrap > .inner-wrap{width:calc(100% - 60px); max-width:1280px; margin:0 auto;}
#enrolment-wrap > .inner-wrap > h1{font-size:2.8125rem; color:#000; text-align: center; font-weight: 600;}
#enrolment-wrap > .inner-wrap > .list-wrap{padding:8.75rem 0; display:grid;  grid-template-columns: repeat(4,calc(25% - 30px)); grid-gap: 40px 40px;}
#enrolment-wrap > .inner-wrap .class-wrap{display:block;}
#enrolment-wrap > .inner-wrap .class-wrap > .image-wrap{width:100%; background-color:#E3E9F3; background-size:cover; background-position: center; border-top-left-radius: 15px; border-bottom-right-radius: 15px; border:1px solid #d6d6d6;}
#enrolment-wrap > .inner-wrap .class-wrap > .image-wrap:after{content:""; display:block; clear:both; padding-top:63%;}
#enrolment-wrap > .inner-wrap .class-wrap > .stitle-wrap{margin-top:20px; display:flex; align-items: center; flex-wrap: wrap;}
#enrolment-wrap > .inner-wrap .class-wrap > .stitle-wrap > .point{color:#FF704F; font-size:16px;}
#enrolment-wrap > .inner-wrap .class-wrap > .stitle-wrap > .hv{width:1px; background-color:#d6d6d6; height: 10px; margin:0 10px;}
#enrolment-wrap > .inner-wrap .class-wrap > .stitle-wrap > .age{font-size:16px; color:#838383;}
#enrolment-wrap > .inner-wrap .class-wrap > .title{font-size:20px; margin-top:5px;}
#enrolment-wrap > .inner-wrap .class-wrap > .price-wrap{margin-top:20px; display:flex; align-items: center;}
#enrolment-wrap > .inner-wrap .class-wrap > .price-wrap > .price{font-size:20px; font-weight: 700; margin-right:10px;}
#enrolment-wrap > .inner-wrap .class-wrap > .price-wrap > .price > span{font-size:14px; color:#838383;}
#enrolment-wrap > .inner-wrap .class-wrap > .price-wrap > .discount{font-size:16px; color:#838383; text-decoration: line-through;}


/*--------------read-------------------------*/
#enrolment-wrap .read-wrap{width:100%; max-width:800px; margin:0 auto;}

#enrolment-wrap .read-wrap > .head-info > .image-wrap{width:100%; background-color:#E3E9F3; background-size:cover; background-position: center; border-top-left-radius: 15px; border-bottom-right-radius: 15px; border:1px solid #d6d6d6;}
#enrolment-wrap .read-wrap > .head-info > .image-wrap:after{content:""; display:block; clear:both; padding-top:63%;}
#enrolment-wrap .read-wrap > .head-info > .title{font-size:30px; font-weight: 700; margin-top:20px; color:#000;}
#enrolment-wrap .read-wrap > .head-info > .descript{font-size:18px; color:#838383; margin-top:5px; line-height: 150%;}
#enrolment-wrap .read-wrap > .head-info > .stitle{font-size:18px; color:#000; font-weight: 500; margin-top:2.5rem; margin-bottom:1.25rem;}
#enrolment-wrap .read-wrap > .head-info  .list-wrap{display:flex; flex-wrap: wrap;}
#enrolment-wrap .read-wrap > .head-info  .hr{width:100%; height: 1px; background-color:#d6d6d6; margin:20px 0;}
#enrolment-wrap .read-wrap > .head-info  .list-wrap > .title{width:110px; font-size:16px; color:#000;}
#enrolment-wrap .read-wrap > .head-info  .list-wrap > .cont{width:calc(100% - 110px); font-size:16px;color:#838383;}
#enrolment-wrap .read-wrap > .head-info  .list-wrap > .cont > p.discount{font-size:24px; color:#ED4043;}
#enrolment-wrap .read-wrap > .head-info  .list-wrap > .cont.discount > span{color:#ED4043;}
#enrolment-wrap .read-wrap > .head-info  .list-wrap > .cont > span{font-size:16px;}
#enrolment-wrap .read-wrap > .head-info  .list-wrap > .flex{display: flex; align-items: flex-end;}
#enrolment-wrap .read-wrap > .head-info  .list-wrap > .flex > .exprice{font-size:18px; color:#838383; margin-left:10px; text-decoration: line-through;}
#enrolment-wrap .read-wrap > .head-info  .termSelection{width:100%; height: 60px; border:1px solid #d6d6d6; background-color: #fff; color:#868686;}

#enrolment-wrap .read-wrap > .head-info > .day-pick-wrap{margin-top:30px;}
#enrolment-wrap .read-wrap > .head-info > .day-pick-wrap > .title{font-size:18px; margin-bottom:10px; color:#000;}
#enrolment-wrap .read-wrap > .head-info > .day-pick-wrap > .day-wrap{display:flex; justify-content: space-between; cursor: pointer;}
#enrolment-wrap .read-wrap > .head-info > .day-pick-wrap > .day-wrap > .day{width:calc(14% - 8px); height: 40px; line-height: 40px; border:1px solid #d6d6d6; text-align: center; font-color:#838383; border-radius:5px; border:1px solid #d6d6d6; box-sizing: border-box; font-size:14px;}
#enrolment-wrap .read-wrap > .head-info > .day-pick-wrap > .day-wrap > .day.on{background-color:#445CB4; color:#fff; border:none;}


#enrolment-wrap .read-wrap > .head-info > .time-pick-wrap{ margin-top:20px; padding:15px 0 40px 0; position:relative;}
#enrolment-wrap .read-wrap > .head-info > .time-pick-wrap > .title{font-size:18px; margin-right:10px; color:#000;}
#enrolment-wrap .read-wrap > .head-info > .time-pick-wrap > .time-wrap{margin-top:1.25rem; width:100%; background-color:#F2F5FB; height: 5px; display:flex; flex-wrap: wrap; justify-content: space-between; position:relative;}
#enrolment-wrap .read-wrap > .head-info > .time-pick-wrap > .time-wrap > .drag-line{position:relative; width:100%;  height:5px; background-color:#9DADE8; }
#enrolment-wrap .read-wrap > .head-info > .time-pick-wrap > .time-wrap > .handle{position:absolute; width:25px; height: 25px; border-radius: 50%; border:5px solid #9DADE8; box-sizing: border-box; top:-10px; background-color: #fff; z-index: 1; cursor:pointer;}
#enrolment-wrap .read-wrap > .head-info > .time-pick-wrap > .time-wrap > .handle-start{left:0;}
#enrolment-wrap .read-wrap > .head-info > .time-pick-wrap > .time-wrap > .handle-end{right:0;}
#enrolment-wrap .read-wrap > .head-info > .time-pick-wrap > .time-wrap > .text-wrap{margin-top:30px;  width:100%; display:flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}

#enrolment-wrap .read-wrap > .head-info > .time-pick-wrap > .time-wrap > p{font-size:1rem; color:#000; width:100px;}
#enrolment-wrap .read-wrap > .head-info > .time-pick-wrap > .time-wrap > p.end{text-align: right;}

#enrolment-wrap .read-wrap > .head-info > .teachers-wrap{width:100%; padding:20px 25px; box-sizing: border-box; background-color:#F2F5FB; margin-top:2.5rem;}
#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .info-wrap{display:flex; justify-content: flex-start; align-items: center;}
#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .info-wrap > p{color:#000; font-size:1rem;}
#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .info-wrap > p.red{color:#ED4043; font-weight: 600; margin-left:10px;}
#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap{margin-top:20px; display:flex; flex-wrap: wrap; justify-content: space-between;}
#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap > .box-wrap{margin:15px 0; width:calc(50% - 15px); border-radius: 10px; background-color: #fff; display:flex; flex-wrap: wrap; justify-content: space-between; padding:15px; box-sizing: border-box; cursor:pointer;}
#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap > .box-wrap.on{border:2px solid #9DADE8;}
#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap > .box-wrap > .colum-wrap{display:flex; width:calc(100% - 100px); align-items: center;}
#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap > .box-wrap > .colum-wrap > .pic-wrap{width:50px; height: 50px; background-color: #9DADE8; border-radius: 50%; background-size:cover; background-position: center; margin-right:10px;}
#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap > .box-wrap > .colum-wrap > .ns-wrap > .name{font-size:1.25rem; color:#000; margin-bottom:5px;}
#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap > .box-wrap > .colum-wrap > .ns-wrap > .stars{width:100%; display:flex; justify-content: space-between;}
#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap > .box-wrap > .colum-wrap > .ns-wrap > .stars > img{width:calc(20% - 5px);}
#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap > .box-wrap > .detailBtn{font-size:0.875rem; padding:0 15px; border-radius: 5px; border:1px solid #d6d6d6; color:#838383; background-color: #fff; line-height: 30px; height: 30px;}
#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap > .box-wrap > .about{margin-top:15px; width:100%; background-color:#F2F5FB; border-radius: 5px; padding:7px 10px; box-sizing: border-box; font-size:0.875rem; color:#000; }
#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap > .box-wrap > .workTime{margin-top:5px; width:100%; background-color:#F2F5FB; border-radius: 5px; padding:7px 10px; box-sizing: border-box; font-size:0.875rem; color:#000;}


#enrolment-wrap .read-wrap > .head-info > .payment-wrap{position:fixed; left:50%; bottom:0; transform: translate(-50%,0); -webkit-transform: translate(-50%,0); width:100%; max-width:800px; background-color: #fff; z-index: 51;  border:1px solid #d6d6d6; border-top-left-radius:10px; border-top-right-radius: 10px;  transition: all .5s;}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap > .inner-wrap{padding:20px; box-sizing: border-box; margin:0 auto;}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap .updown-wrap{position:absolute; left:50%; top:-25px; transform: translate(-50%,0); -webkit-transform: translate(-50%,0); cursor:pointer;}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap .updown-wrap > .down{display:block;}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap .updown-wrap > .up{display:none;}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap .list-wrap{display:block;}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap .list-wrap > .cont{width:100%;}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap .hr{display:block;}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap .list-wrap > .title{margin-bottom:1.25rem;}

#enrolment-wrap .read-wrap > .head-info > .payment-wrap p.lastpay{font-size:30px; font-weight: 700; color:#000;}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap p.lastpay > span{font-size:16px; color:#838383;}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap > .payBtn{width:100%; background-color:#445CB4; height:74px; color:#fff; font-size:20px; display:flex; align-items: center; justify-content: center; }
.profileCont{display:flex; align-items: center; flex-wrap: wrap;}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap .profile-wrap{width:auto; display:flex; align-items: center; cursor:pointer; padding:10px 20px; box-sizing: border-box; border-radius: 5px;}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap .profile-wrap.on{background-color:#F2F5FB;}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap .profile-wrap:last-child{margin-right:0}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap .profile-wrap > .image-wrap{width:40px; height: 40px; border-radius: 50%; background-color:#9270D8; display:flex; justify-content: center; align-items: center; }
#enrolment-wrap .read-wrap > .head-info > .payment-wrap .profile-wrap > .image-wrap > img{width:calc(100% - 15px);}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap .profile-wrap > p{font-size:1rem; font-weight: 500; color:#000; margin-left:10px;}

#enrolment-wrap .read-wrap > .head-info > .payment-wrap.up{height:74px; transition: all .5s;}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap.up .updown-wrap > .up{display:block;}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap.up .updown-wrap > .down{display:none;}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap.up > .payBtn{width:100%; background-color:#fff; height:74px; color:#445CB4; font-size:20px; display:flex; align-items: center; justify-content: center; border:1px solid #445CB4; border-top-left-radius:10px; border-top-right-radius: 10px; }
#enrolment-wrap .read-wrap > .head-info > .payment-wrap.up .list-wrap{display:none;}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap.up .hr{display:none;}
#enrolment-wrap .read-wrap > .head-info > .payment-wrap.up > .inner-wrap{padding:0;}

#enrolment-wrap .read-wrap > .content-wrap{margin-top:8.75rem;}
#enrolment-wrap .read-wrap > .content-wrap .navigator{position:relative; height:80px; width:100%; overflow: hidden; }
#enrolment-wrap .read-wrap > .content-wrap .navigator > .line{width:100%; height: 2px; background-color:#445CB4; margin-top:39px;}
#enrolment-wrap .read-wrap > .content-wrap .navigator > .nav-wrap{width:100%; max-width:720px; border:2px solid #445CB4; box-sizing: border-box; height: 80px; display:flex; align-items: center; justify-content: center; border-radius: 40px; position:absolute; z-index: 1; left:50%; top:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); background-color:#fff; display:flex; justify-content: center; align-content: center;}
#enrolment-wrap .read-wrap > .content-wrap .navigator > .nav-wrap > .nav{font-size:20px; color:#838383;}
#enrolment-wrap .read-wrap > .content-wrap .navigator > .nav-wrap > .point{width:5px; height: 5px; border-radius: 50%; background-color:#445CB4; margin:0 30px;}
#enrolment-wrap .read-wrap > .content-wrap .navigator > .nav-wrap > .nav.on{color:#445CB4; }
#enrolment-wrap .read-wrap > .content-wrap .cont-wrap{width:100%; max-width:720px; margin:0 auto;}
#enrolment-wrap .read-wrap > .content-wrap > .detaile{padding:6.25rem 0; width:100%; max-width:720px; margin:0 auto;}
#enrolment-wrap .read-wrap > .content-wrap > .detaile > img{width:100%; }
#enrolment-wrap .read-wrap > .content-wrap > .cuation-wrap{padding:6.25rem 0; width:100%; max-width:720px; margin:0 auto;}
#enrolment-wrap .read-wrap > .content-wrap > .cuation-wrap > div{margin-bottom:40px;}
#enrolment-wrap .read-wrap > .content-wrap > .cuation-wrap > div:last-child{margin-bttom:0;}
#enrolment-wrap .read-wrap > .content-wrap > .cuation-wrap  .title{font-size:20px; color:#000; font-weight: 700; margin-bottom:40px;}
#enrolment-wrap .read-wrap > .content-wrap > .cuation-wrap  .cont{color:#838383;}


#enrolment-wrap .read-wrap .listBtn{margin:0 auto; display:flex; justify-content: center; align-items: center; color:#fff; width:200px; height: 60px; border-radius: 30px; font-size:20px; background-color:#445CB4; }

@media only screen and (max-width:880px){
	#enrolment-wrap .read-wrap > .head-info > .time-pick-wrap > .title{margin-right:0; margin-bottom:10px;}
	#enrolment-wrap .read-wrap > .head-info > .time-pick-wrap > .timeSelection{width:100%;}
}

@media only screen and (max-width:768px){
	#enrolment-wrap > .inner-wrap > .list-wrap{grid-template-columns: repeat(3,calc(33% - 13px)); grid-gap: 40px 20px;}
	#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap > .box-wrap{width:100%;}
}

@media only screen and (max-width:640px){
    #enrolment-wrap .read-wrap > .head-info > .payment-wrap{width:100%;}
}

@media only screen and (max-width:580px){
	#enrolment-wrap > .inner-wrap > .list-wrap{grid-template-columns: repeat(2,calc(50% - 10px));}
	#enrolment-wrap > .inner-wrap .class-wrap > .title{font-size:18px;}
	#enrolment-wrap .read-wrap > .head-info > .list-wrap > .title{width:100%; margin-bottom:20px; }
	#enrolment-wrap .read-wrap > .head-info  .list-wrap > .cont{width:100%;}
}

@media only screen and (max-width:410px){
	#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap > .box-wrap > .detailBtn{font-size:0.875rem; padding:0 10px; border-radius: 5px; border:1px solid #d6d6d6; color:#838383; background-color: #fff; line-height: 25px; height: 25px;}
	#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap > .box-wrap > .colum-wrap{display:flex; width:calc(100% - 80px); align-items: center;}
}

@media only screen and (max-width:390px){
	#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap > .box-wrap > .detailBtn{font-size:0.875rem; padding:0 7px; border-radius: 5px; border:1px solid #d6d6d6; color:#838383; background-color: #fff; line-height: 25px; height: 25px; box-sizing: border-box;}
	#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap > .box-wrap > .colum-wrap > .ns-wrap > .name{font-size:12px;}
	#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap > .box-wrap > .colum-wrap > .ns-wrap > .stars{width:100%; display:flex; justify-content: space-between;}
	#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap > .box-wrap > .colum-wrap > .ns-wrap > .stars > img{width:calc(20% - 2px);}
	#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap > .box-wrap > .colum-wrap > .pic-wrap{width:45px;height:45px;}
	#enrolment-wrap .read-wrap > .head-info > .teachers-wrap > .inner-wrap > .box-wrap > .colum-wrap{display:flex; width:calc(100% - 60px); align-items: center;}
}

@media only screen and (max-width:375px){
	#enrolment-wrap > .inner-wrap > .list-wrap{grid-template-columns: repeat(1,100%);  grid-gap: 40px 0px;}
}