@charset "utf-8";

/* common  */
.c_orange {
  color: #ff9436 !important;
}
.c_blue {
  color: #0472fa !important;
}
.c_red {
  color: #ff5454 !important;
}
.c_gray {
  color: #797979 !important;
}
.c_gray2 {
  color: #999 !important;
}
.c_gray3 {
  color: #aaa !important;
}
.c_green {
  color: #06a42c !important;
}
.c_black {
  color: #333 !important;
}
.btnCommonStyle {}


.paddingTopBtm {
  padding-top: 50px;
  padding-bottom: 50px;
}
.btnVisual {
  min-width: 101px;
  min-height: 33px;
  border-radius: 2px;
  box-shadow: 5px 0 24px rgba(0, 0, 0, 0.05);
  padding:10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btnVisual img {
  height:13px;
}


.titleType1 {
  position: relative;
  padding-top: 16px;
}
.titleType1::before {
  content:'';
  display: inline-block;
  width:30px;
  height:3px;
  background: #ffae00;
  position: absolute;
  top:0;
  left:0;
}

.titleType1.green::before {
  background: #07BC6E;
}
.titleType1.blue::before {
  background: #0472FA;
}
.titleType1.goLeft::before {
  left:5px;
}
.titleType1.goLeft {
  left:-8px;
}

.titleType1.otherHeight {
  padding-top: 30px;
}
.titleType1.otherHeight img {
  max-height:45px;
}
.titleType1.otherHeight2 {
  padding-top: 20px;
}
.titleType1.otherHeight2 img {
  max-height:35px;
}

h4 img,
.infobox h4 img {
  max-height: 55px;
  max-width:90%;
}

.visual.type1 {
  margin-top: 60px;
  min-height: 300px;
  background: url(../img/M주니어1.png) 50% / cover no-repeat;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.visual.type1 h2 {
  font-weight: 100;
  line-height: 1.4;
}

.visual.type1 h2 b {
  color: #06a42c !important;
}
.visual.type1 h2 b,
.visual.type1 h2 {
  font-size: 24px;
  color: #000;
}
.visual.type1 h3 {
  font-size:14px;
  font-weight: bold;
  margin: 8px 0;
}
.visual.type1 p {
  font-size:14px;
}
.visual.type1 button {
  margin-top: 20px;
  width: 129px;
  height: 33px;
  background: #06a42c;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
}

.visual.speaking {
  background: url(../img/sub/visual_speaking.png) 50% / cover no-repeat;
}
.visual.writing {
  background: url(../img/sub/visual_writing.png) 50% / cover no-repeat;
}
.visual.introduction {
  background: url(../img/sub/visual_introduction.png) 50% / cover no-repeat;
}
.visual.beginner {
  background: url(../img/sub/visual_beginner.png) 50% / cover no-repeat;
}
.visual.answer {
  background: url(../img/sub/visual_answer.png) 50% / cover no-repeat;
}
.visual.duolingo {
  background: url(../img/sub/visual_duolingo.png) 50% / cover no-repeat;
}
.visual.custom {
  background: url(../img/sub/visual_custom.png) 50% / cover no-repeat;
}
.visual.engTest {
  background: url(../img/sub/visual_engTest.png) 50% / cover no-repeat;
}
.visual.freetrial {
  background: url(../img/sub/visual_freetrial.png) 50% / cover no-repeat;
}
.visual.my {
  background: url(../img/M주니어1.png) 50% / cover no-repeat;
  color:#fff;
}

.visual.my h2 * {
  color:#fff !important;
}

.visual.my h2 {
  margin-bottom: 16px;
}

.visual.teacher {
  background: url(../img/M주니어1.png) 50% / cover no-repeat;
  position: relative;
}

.subNav {
  display: flex;
  justify-content: center;
  align-items: center;
}
.subNav button {
  width:25%;
  height:33px;
  background: #fff;
  font-size:12px;
  
  border:1px solid #E3E8EE;
  margin: 30px 0;
}
.subNav button.on {
  background: #0472FA;
  color:#fff;
}

.teacherVisual {
  position: relative;
}

.visual.engTest p {
  margin-top: 10px;
}
.visual.engTest > .widthWrap2 {
  padding-bottom: 0;
}
.visual.type3 {
  height: 350px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  color: #fff;
  margin-top: 60px;
  padding-top: 40px;
}

.visual.type2 {
  min-height:350px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  color: #fff;
  margin-top: 60px;
  padding-top: 30px;
}
.visual.type2 h2 b,
.visual.type2 h2 {
  font-size: 24px;
  line-height: 1.6;
  color: #000;
}
.visual.type2 h2 {
    margin-top: 40px;
    font-weight: 300;
}
.visual.type2 h2 b {
    color:#06a42c;
}
.visual h3 {
  text-shadow:1px 1px 1px rgb(0 0 0 / 90%);
}
.visual.type2 h3 {
  font-size:14px;
  font-weight: bold;
  margin: 8px 0;
}
.visual.type2 p {
  font-size: 12px;
  line-height: 1.6;
}

.visual.type2.engTest {
  min-height:calc(100vh - 194px);
  min-height:-webkit-calc(100vh - 194px);
}

.infobox .img img {
  width:100%;
}

.infobox {
  margin-bottom: 25px;
}
.alignStart {
  align-items: flex-start;
}
.alignEnd {
  align-items: flex-end;
}
.alignCetner {
  align-items: center;
}
.infobox .text p {
  
  font-size: 14px;
  margin-top: 10px;
  line-height: 1.4;
}

.infobox h4.title b,
.infobox h4.title {
  font-size: 18px;
}
.infobox h4.title {
  position: relative;
  margin-bottom: 16px;
  font-weight: 100;
  line-height: 1.6;
}

.infobox h4.title.blueBar::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 3px;
  background: #0472fa;
  position: absolute;
  top: -16px;
}

.infobox h4.title.violetBar::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 3px;
  background: #6051f2;
  position: absolute;
  top: -20px;
}

.infobox4 {
  margin-top:70px;
  position: relative;
}

.infobox4 .text {
}

.infobox5,
.infobox6,
.infobox8 ,
.infobox9,
.infobox10,
.infobox11 {
  margin-top: 48px;
}

.introInfobox1 {
  margin-bottom: 56px;
}

.duolingobox .text,
.answerbox .text,
.beginnerbox2 .text,
.beginnerbox1 .text,
.writingbox4 .text,
.writingbox3 .text,
.writingbox2 .text,
.introInfobox1 .text,
.introInfobox2 .text,
.introInfobox3 .text,
.introInfobox4 .text {
  margin-top: 50px;
}

.introInfobox3 {
  padding-top: 40px;
}
.introInfobox4 {
  padding-top: 40px;
}


.writingbox2 {
  padding-top: 20px;
}
.writingbox3 {
  padding-top: 50px !important;
}

.writingbox4 {
  padding-top: 50px;
}

.infobox .btnView {
  display: block;
  text-align: center;
  width: 53px;
  height: 22px;
  line-height: 22px;
  color: #fff;
  background: #0472fa;
  border-radius: 5px;
  margin-top: 15px;
  font-size:12px;
}

.curriculum .checkLevel {
  display: flex;
  border-top: 1px solid #E3E8EE;
  border-bottom: 1px solid #E3E8EE;
  padding: 22px 10px;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  text-align:center;
  margin-top: 25px;
  margin-bottom: 25px;
  row-gap:20px;
}
.curriculum .checkLevel label {
  position: relative;
  width:25%;
}
.curriculum .checkLevel label input {
  position: fixed;
  left: -9999px;
}

.curriculum .checkLevel label input:checked + i {
  background: #3db739;
}

.curriculum .checkLevel label i {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid #3db739;
  background: #fff;
  position: relative;
  top: 2px;
}
.curriculum .checkLevel label span {
  font-weight:bold;
  margin-top: 5px;
  font-family: lato, sans-serif;
  font-size:14px;
  display: block;
}

.choiceKind {
  display: flex;
  justify-content: space-between;
  align-items: center;
  row-gap: 16px;
  column-gap: 8px;
  flex-wrap: wrap;
}
.choiceKind .item {
  text-align: center;
  height: 97px;
  background: #f3f5f7;
  border-radius: 5px;
}

.choiceKind .icon {
  width: 32px;
  height: 32px;
  margin:0 auto;
}

.choiceKind input {
  position: fixed;
  left: -9999px;
}

.choiceKind .text {
  text-align: center;
}
.choiceKind .text .eng {
  font-weight:bold;
  font-size:12px;
  margin-bottom: 3px;
  margin-top: 5px;
  font-family: lato, sans-serif;
  font-weight: bold;
  line-height: 1;
}
.choiceKind .text .kor {
  
  font-size: 12px;
}

.choiceKind .item.on {
  background: linear-gradient(to right, #07b183, #047de6);
  box-shadow: 0 5px 24px rgb(4, 114, 250, 0.3);
  text-decoration: none !important;
}
.choiceKind .item.on * {
  color: #fff;
}

.choiceKind .icon.phonics {
  background: url(../img/junior/ico_phonics.png) 50% / contain no-repeat;
}
.choiceKind .item.on .icon.phonics {
  background: url(../img/junior/ico_phonics_on.png) 50% / contain no-repeat;
}

.choiceKind .icon.speaking {
  background: url(../img/junior/ico_speaking.png) 50% / contain no-repeat;
}
.choiceKind .item.on .icon.speaking {
  background: url(../img/junior/ico_speaking_on.png) 50% / contain no-repeat;
}

.choiceKind .icon.debate {
  background: url(../img/junior/ico_debate.png) 50% / contain no-repeat;
}
.choiceKind .item.on .icon.debate {
  background: url(../img/junior/ico_debate_on.png) 50% / contain no-repeat;
}

.choiceKind .icon.reading {
  background: url(../img/junior/ico_reading.png) 50% / contain no-repeat;
}
.choiceKind .item.on .icon.reading {
  background: url(../img/junior/ico_reading_on.png) 50% / contain no-repeat;
}

.choiceKind .icon.writing {
  background: url(../img/junior/ico_writing.png) 50% / contain no-repeat;
}
.choiceKind .item.on .icon.writing {
  background: url(../img/junior/ico_writing_on.png) 50% / contain no-repeat;
}

.choiceKind .icon.grammer {
  background: url(../img/junior/ico_grammer.png) 50% / contain no-repeat;
}
.choiceKind .item.on .icon.grammer {
  background: url(../img/junior/ico_grammer_on.png) 50% / contain no-repeat;
}

.choiceKind .icon.critical {
  background: url(../img/junior/ico_critical.png) 50% / contain no-repeat;
}
.choiceKind .item.on .icon.critical {
  background: url(../img/junior/ico_critical_on.png) 50% / contain no-repeat;
}

.choiceKind .icon.science {
  background: url(../img/junior/ico_science.png) 50% / contain no-repeat;
}
.choiceKind .item.on .icon.science {
  background: url(../img/junior/ico_science_on.png) 50% / contain no-repeat;
}

.choiceKind .icon.math {
  background: url(../img/junior/ico_math.png) 50% / contain no-repeat;
}
.choiceKind .item.on .icon.math {
  background: url(../img/junior/ico_math_on.png) 50% / contain no-repeat;
}

.choiceKind.type1 a {
  display: flex;
  justify-content: center;
  align-items: center;
  width:calc(33.3333% - 12px);
  width:-webkit-calc(33.3333% - 12px);
}

.btnLevelTest {
  padding: 0 5px;
  height: 22px;
  font-size:12px;
  border-radius: 5px;
  color: #fff;
  background: #ffae00;
  margin-top: 16px;
}

.curriculumList h5 {
  font-family: lato, sans-serif;
  font-size:14px;
  font-weight: bold;
  text-transform: uppercase;
}
.curriculumList ul {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  padding:25px 0 0;
}
.curriculumList ul li {
  width:50%;
  margin-bottom: 5px;
}
.curriculumList ul li .item {
  width: 100%;
  margin: 0 auto;
  padding:12px;
}
.curriculumList ul li .poster {
  position: relative;
}
.curriculumList ul li .poster>img {
  width:100%;
}

.curriculumList ul li .poster:hover .cover {
  display: block;
}
.curriculumList ul li .poster:hover .cover img {
  width:16px;
}
.curriculumList ul li .poster .cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(4, 114, 250, 0.8),
    rgba(7, 188, 110, 0.8)
  );
  text-align: center;
  display: none;
}
.curriculumList ul li .poster .cover p {
  color: #fff;
  margin-top: 10px;
  font-weight: 500;
  font-size:14px;
}

.curriculumList ul li .textTitle {
  font-size: 12px;
  margin: 10px 0 0;
  font-family: lato, sans-serif;
  letter-spacing: -0.5px;
  font-weight:bold;
}
.curriculumList ul li .textLevel {
  font-size: 12px;
  color: #07bc6e;
  font-weight: bold;
  font-family: lato, sans-serif;
}

.paging {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.paging a {
  display: inline-block;
  margin: 0 5px;
  
  font-size: 16px;
  font-family: lato, sans-serif;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center !important;
  font-weight:bold;
}

.paging a.num.on,
.paging a.num:hover {
  background: #0472fa;
  color: #fff;
  font-size: 16px;
  width: 24px;
  height: 24px;
  text-decoration: none !important;
}

.paging a img {
  position: relative;
  top: -2px;
}

.curriculumDetail {
}
.curriculumDetail h5 {
  font-family: lato, sans-serif;
  font-size:14px;
  font-weight: bold;
  text-transform: uppercase;
}
.curriculumDetail .detail {
  margin-top: 25px;
}
.curriculumDetail .detail .img {
  background: #F3F5F7;
  padding:10px;
  text-align: center;
  margin-bottom: 16px;
}
.curriculumDetail .detail .img img {
  height:179px;
}
.curriculumDetail .detail .text .title {
  font-size:17px;
  color: #212121;
  font-family: lato, sans-serif;
  font-weight: 600;
  margin-bottom: 10px;
}
.curriculumDetail .detail .text p {
  font-size:14px;
  
  line-height: 1.4;
}
.curriculumDetail .detail .btn {
  margin-top: 16px;
  font-size:12px;
}
.curriculumDetail .detail .btn .btn1 {
  background: linear-gradient(70deg, #047ce7, #07b280);
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  margin-right: 8px;
  font-weight: 500;
}

.curriculumDetail .detail .btn .btn2 {
  background: #07b280;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  margin-right: 15px;
  font-weight: 500;
}

.setScrollx {
  padding-bottom:20px !important; 
}

.curriculumList.type2 {
  overflow:auto;
}
.curriculumList.type2 ul {
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding-top: 30px;
}
.curriculumList.type2 ul li {
  margin-bottom: 0;
  width:85px;
  margin-right: 8px;
}
.curriculumList.type2 ul li .item {
  padding:0;
}
.popupCurriculum {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.popupCurriculum .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.popupCurriculum .con {
  z-index: 1;
  width: 100%;
  height: 90vh;
  background: #fff;
  margin: 0 auto;
  position: absolute;
  bottom:0;
  left:0;
  margin-top: 10px;
  overflow: auto;
  border-radius: 35px 35px 0 0;
  padding: 30px;
  animation:goToTop .2s ease-in-out;
}
@keyframes goToTop {
  0% {
    bottom:-100%;
  }
  100% {
    bottom:0;
  }
}

.popupCurriculum .con .title {
  font-size: 18px;
  font-weight: 100;
}
.popupCurriculum .con .title b {
  font-size: 18px;
  font-family: lato, sans-serif;
  font-weight: 700;
  position: relative;
  top:1px;
}
.popupCurriculum .con .popupClose {
  background: none;
  position: absolute;
  top: 30px;
  right: 30px;
}
.popupCurriculum .con .popupClose img {
  width:22px;

}
.popupCurriculum .con .subText {
  color: #07bc6e;
  font-size: 16px;
  font-family: lato, sans-serif;
  font-weight: 700;
  margin-top: 15px;
}
.popupCurriculum .con .content {
}
.popupCurriculum .con .content .item {
  margin-top: 25px;
}
.popupCurriculum .con .content .item img {
  width:100%;
}


.checkinfobox {
  position: relative;
}
.checkinfobox .info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 25px;
}
.checkinfobox .info .img1 {
  height:45px;
}
.checkinfobox .info .img2 {
  height:24px;
  margin:0 16px;
  position: relative;
}
.checkinfobox .info b {
  display: block;
  font-size:14px;
  color: #6051f2;
  line-height: 1.4;
}
.checkinfobox .info p {
  
  font-size: 12px;
  margin-top: 4px;
}
.checkinfobox .bar {
  position:absolute;
  left:73px;
  width:1px;
  top:10%;
  height:80%;
  border-right:1px dashed gray;
  opacity: 0.2;
}

.customList {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.customList .swiper-slide {
  width: 100%;
  height: 270px;
  border: 2px dotted #aaa2f8;
  border-radius: 10px;
  padding: 25px;
  cursor:pointer;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.customList .swiper-slide span {
  font-family: lato, sans-serif;
  color: #6051f2;
  font-size:12px;
  font-weight:100;
}
.customList .swiper-slide .title {
  padding-top: 10px;
  padding-bottom: 17px;
  margin-bottom: 13px;
  font-size: 18px;
  font-weight: 500;
  position: relative;
}

.customList .swiper-slide .title:after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 3px;
  background: #6051f2;
  position: absolute;
  bottom: 0;
  left: 0;
}

.customList .swiper-slide .txt {
  
  font-size:12px;
  line-height: 1.4;
}

.customList .swiper-slide:hover,
.customList .swiper-slide.swiper-slide-active {
  background: linear-gradient(to left, #6051f2, #0572fa);
  border: 0;
  box-shadow: 0 15px 18px rgba(4, 144, 250, 0.25);
}

.customList .swiper-slide:hover *,
.customList .swiper-slide.swiper-slide-active * {
  color: #fff;
}
.customList .swiper-slide:hover .title:after,
.customList .swiper-slide.swiper-slide-active .title:after {
  background: #fff;
}

.popupCustom {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.popupCustom .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.popupCustom .con {
  z-index: 1;
  width: 100%;
  height: 90vh;
  bottom:0;
  background: #fff;
  margin: 0 auto;
  position: absolute;
  margin-top: 8%;
  border-radius: 40px 40px 0 0;
  padding: 30px;
  overflow: hidden;
  animation:goToTop .2s ease-in-out;
}
.popupCustom .con .title {
  font-size: 18px;
  font-weight: 100;
}
.popupCustom .con .title b {
  font-size: 18px;
  font-weight: 700;
}
.popupCustom .con .popupClose {
  background: none;
  position: absolute;
  top: 30px;
  right:40px;
}

.popupCustom .con .popupClose img {
  width:22px;
  height:22px;
}

.popupCustom .con .conBg {
  position: absolute;
  background: #f3f5f7;
  width: 100%;
  height: 267px;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.popupCustom .curriculumList ul li .poster .cover {
  background: linear-gradient(
    45deg,
    rgba(4, 114, 250, 0.8),
    rgba(96, 81, 242, 0.8)
  );
}

.teacher .btnBack {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 30px;
  background: none;
  
}
.teacher .btnBack img {
  margin-right: 10px;
}

.teacherbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 90px;
}
.teacherbox > div {
  box-shadow: 0 1px 16px rgba(112, 112, 119, 0.08);
  background: #fff;
  border-radius: 10px;
  min-height: 622px;
}

.teacherbox .left {
  margin-right: 30px;
}

.teacherbox .left .top {
  position: relative;
}
.teacherbox .left .top .text {
  position: absolute;
  color: #fff;
  left: 40px;
  bottom: 50px;
}

.teacherbox .left .top .text * {
  font-family: lato, sans-serif;
}

.teacherbox .left .top .text p {
  font-size: 18px;
}
.teacherbox .left .top .text b {
  font-size: 32px;
  font-weight: 600;
}

.teacherbox .left .btm {
  padding: 20px;
}

.teacherbox .left .btm ul {
  padding: 0 20px;
}
.teacherbox .left .btm ul li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
}

.teacherbox .left .btm ul li span {
  
  text-align: right;
}

.teacherbox .right {
  padding: 65px 40px 65px 65px;
}
.teacherbox .right * {
  word-break: keep-all;
}

.teacherbox .right .title b,
.teacherbox .right .title {
  font-size: 24px;
  font-family: "NotoSansKR", sans-serif;
}
.teacherbox .right p {
  margin-top: 20px;
  
}

.teacherlist h3 *,
.teacherlist h3 {
  font-size: 40px;
}
.teacherlist h3 {
  margin-bottom: 40px;
}

.searchbox {
  border-top: 1px solid #eef1f5;
  padding-top: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.searchbox .left {
  width: 823px;
}
.searchbox .left .choice {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.searchbox .left .choice label {
  position: relative;
}
.searchbox .left .choice label input {
  position: fixed;
  left: -9999px;
}

.searchbox .left .choice label input:checked + i {
  background: #0472fa;
}
.searchbox .left .choice label i {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 2px solid #0472fa;
}

.searchbox .left .choice label span {
  font-size: 18px;
  font-weight: 700;
  margin-left: 17px;
  margin-right: 40px;
}
.searchbox .left .choice label {
}
.searchbox .left .selectbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.searchbox .left .selectbox select {
  border: 1px solid #e3e8ee;
  width: 403px;
  height: 50px;
  border-radius: 5px;
  
  background-position: 370px;
}

.searchbox .right {
}
.searchbox .right button {
  width: 250px;
  height: 90px;
  color: #fff;
  background: linear-gradient(
    to left,
    rgba(4, 114, 250, 0.8),
    rgba(96, 81, 242, 0.8)
  );
  border-radius: 8px;
}

.teacherItems {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 40px;
  margin-bottom: 40px;
}
.teacherItems li {
  width: 25%;
  position: relative;
  margin-bottom: 10px;
}
.teacherItems li .text {
  text-align: center;
  height: 175px;
}
.teacherItems li .text .top {
  padding-top: 25px;
}
.teacherItems li .text .top b {
  font-size: 32px;
  font-weight: 600;
}
.teacherItems li .text .top p {
  font-size: 16px;
  
  margin-top: 3px;
}
.teacherItems li .text .btm {
  position: absolute;
  bottom: 18px;
  color: #fff;
  z-index: 1;
  width: 100%;
}
.teacherItems li .text .btm a {
  color: #fff;
}
.teacherItems li > img {
  position: absolute;
  top: 0;
  left: -10px;
  z-index: -1;
}

.curriculumList2Wrap {
  display: none;
}

/* 로그인 */
.memberWrap {
  text-align: center;
}
.memberWrap .contentbox {
  background: #fff;
  margin:0 auto;
  padding-top: 120px;
  position: relative;
}
input.inputStyle1 {
  height:40px;
  font-size:12px;
}
input.inputStyle1::placeholder {
  font-size:12px;
}

.inputStyle1 {
  border:1px solid #e2e2e2;
  width:100%;
  height:35px;
  padding-left:8px;
  font-size:12px;
  border-radius: 4px;
}
.inputStyle1::placeholder {
  color:#AAB0B7;
  font-size:12px;
}
.memberWrap .contentbox .joinForm>input:first-child {
  margin-bottom: 8px;

}
.memberWrap .contentbox .joinForm {
  padding:0 30px;
}
.memberWrap .contentbox .joinForm .checkSave {
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 24px;
}

.memberTitle {
  font-weight:bold;
  font-size:18px;
  border-bottom:1px solid #0472FA;
  padding-bottom:16px;
  text-align: center;
}

.checklabel {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 16px;
}
.checklabel input {
  position: fixed;
  left:-9999px;
}
.checklabel input:checked + i {
  background: #0472fa;
}
.checklabel i {
  display: inline-block;
  width:16px;
  height:16px;
  border-radius: 4px;
  border:1px solid #0472FA;
}
.checklabel span {
  font-size:12px;
  color:#212121;
  margin-left: 8px;
  text-align: left;
}
.btnMember {  
  width:100%;
  height:33px;
  background: #0472fa;
  border-radius: 4px;
  color:#fff;
  font-size:12px;
  font-weight: 500;
}
.memberWrap .linkjoin {
  margin:25px 0;
}
.memberWrap .linkjoin a img {
  margin-right: 3px;
}
.memberWrap .linkjoin a span {
  
  font-size:12px;
}
.memberWrap .linkjoin a:first-child {
  margin-right: 10px;
}
.memberWrap .linkSns a:first-child {
  margin-right: 32px;
}

.memberWrap .linkSns a img {
  width:50px;
  height:50px;
}

/* 회원가입 */
.memberWrap.join .contentbox {
  margin:0 auto;
}


.memberWrap.join .joinForm {
  margin-top: 40px;
  padding:0 30px;
}

.memberWrap.join .joinForm .idbox {
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.memberWrap.join .joinForm .idbox input {
  margin-right: 8px;
  margin-top: 0;
  width:calc(100% - 64px);
  width:-webkit-calc(100% - 64px);
}

.memberWrap.join .joinForm .idbox input::placeholder {
  color:#AAB0B7;
}

.memberWrap.join .joinForm .idbox button {
  width:56px;
  height:30px;
  border-radius: 4px;
  color:#fff;
  font-weight: 500;
  font-size:12px;
  background: linear-gradient(to left, #7b61ff, #0472fa);
}

.memberWrap .subTextbox {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}
.memberWrap .subTextbox .dot {
  margin-right: 5px;
  position: relative;
  top:8px;
}
.memberWrap .subTextbox .text {
  font-size:12px;
  
  margin-top: 8px;
  line-height: 1.4;
}

.memberWrap.join input {
  margin-top: 8px;
}
.memberWrap.join .nameInputbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.memberWrap.join .nameInputbox input:first-child {
  margin-right:8px;
}


.memberWrap.join .phoneInputbox {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 8px;
}
.memberWrap.join .phoneInputbox>* {
  width:33.3333%;
}

.memberWrap.join .phoneInputbox select {
  background-position: 85%;
  
  font-weight: 400;
}

.memberWrap.join .phoneInputbox input {
  margin-top: 0;
  margin-left: 8px;
}
.memberWrap.join .agreebox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.memberWrap.join .agreebox .checklabel {
  margin-top: 16px;
}
.memberWrap.join .agreebox a {
  display: inline-block;
  color:#0472FA;
  font-size:12px;
  text-decoration: underline !important;
  margin-top: 16px;
  word-break: keep-all;
}
.memberWrap.join .agreebox label {
  margin-right: 10px;
}
.memberWrap.join .btnMember {
  margin-top: 24px;
}
.memberWrap.join .linkSnsbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #F3F5F7;
  margin-top: 16px;
  padding-top: 24px;
  padding: 24px 0 0;
  margin:25px 30px 16px;
}
.memberWrap.join .linkSnsbox .text {
  text-align: left;
  line-height: 1.4;
  font-size:12px;
}

.linkLogin  {
  margin-top: 24px;
}
.linkLogin * {
  color:#fff;
  font-size:14px;
}
.linkLogin a {
  text-decoration: underline !important;
}
/* 수강등록 */
.regist {
}
.regist>.left {
}
.regist>.left .title {}
.regist>.left .title p {
  font-size:18px;
  margin-bottom: 7px;
  font-weight:bold;
}

.regist>.left .title .bar {
  font-size:27px;
}
.regist>.left .title .sub {
  font-size:12px;
  color:#AAB0B7;
  font-weight:400;
  padding-top: 10px;
}


.regist>.left .title strong {
  font-size:18px;
  font-weight:bold;
  margin-bottom: 24px;
}


.btnbox.item3 label {
  width:33.3333%;
}

.btnbox {
  display: flex;
  justify-content:center;
  align-items: flex-start;
  margin-top:16px;
}

.btnbox.class,
.btnbox.class2  {
  justify-content: flex-start;  
}
.btnbox.class2 label {
  height:49px;
  width:50%;
}

.btnbox.class2 label.on span, 
.btnbox.class2 label:hover span, 
.btnbox.class2 label input:checked + span {
  line-height: 49px;
}

.btnbox .box {
  width:100%;
  margin-right: 16px;
}

.btnbox.otherMargin .box {
  margin-right: 8px !important;
}

.btnbox .box:last-child {
  margin-right: 0;
}

.btnbox .box label {
  margin-bottom: 16px;
}

.btnbox label {
  position: relative;
  color:#AAB0B7;
  background: #F3F5F7;
  text-align: center;
  height:66px;
  line-height: 66px;
  border-radius: 8px;
  width:100%;
  margin-right: 16px;
  overflow:hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btnbox.otherMargin label {
  margin-right: 8px;
}
.btnbox label:last-child {
  margin-right: 0;
}


.btnbox label input {
  position: fixed;
  left:-9999px;
}

.btnbox label span {
  display: block;
  width:100%;
  font-weight: 500;
  font-size:12px;
}

.btnbox label.on span,
.btnbox label:hover span,
.btnbox label input:checked + span {
  background: #0472FA;
  color:#fff;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btnbox.item3 {
  justify-content: flex-start;
}

.btnbox.other1 label {
  height:49px;
  line-height: 49px;
  margin-right: 8px;
}

.btnbox.other1 label:last-child {
  margin-right: 0;
}


.btnbox.other1.col2 {
  flex-wrap:wrap;
  row-gap: 8px;
  column-gap: 16px;
  justify-content: space-between;  
}
.btnbox.other1.col2 label {
  width:calc(50% - 8px);
  width:-webkit-calc(50% - 8px);
  margin-right: 0;
}
.btnbox.col1 {
  display: block;
}
.btnbox.col1 label {
  margin-bottom: 8px;
}

.subInfoLink {
  display: block;
  position: relative;
}
.subInfoLink>span {
  display: inline-block;
  color:#0472FA;
  font-size:12px;
}

.subInfoLink:hover .tooltip {
  display: block;
  position: absolute;
  top:20px;
  left:0;
  z-index: 10;
}


.tooltip {
  display: none;
  width:100%;
  min-height:150px;
  border-radius: 0 8px 8px 8px;
  background: #fff;
  padding:24px;
  border:1px solid #E3E8EE;
  box-shadow:0 5px 24px 0 rgba(0,0,0,0.05);
}

.tooltip h5 {
  font-size:12px;
  font-weight:bold;
  margin-bottom: 3px;
}
.tooltip ul {
  padding-left: 15px;
  margin-bottom: 15px;
}
.tooltip ul li {
  list-style: disc;
  line-height: 1.6;
  
}
.tooltip ul li b {
  font-weight:500;
  color:#000;
}

.regist .processbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

.regist .processbox:first-child {
  margin-top: 26px;
}

.regist .processbox .dateInfo {
  min-width:62px;
  height:33px;
  line-height: 33px;
  background: #0472FA;
  color:#fff;
  text-align: center;
  border-radius: 4px;
  font-size:12px;
  font-weight:500;
  display:block;
  margin-right: 5px;
}
.regist .processbox input {
    width: 100%;
  height:33px;
  font-size:12px;
  padding-left: 5px;
  margin:0 5px;
}
.regist .processbox .btnSearch {
    width:73px;
    height:33px;
    background: linear-gradient(to bottom, #6051f2, #0572fa);
    color:#fff;
    border-radius: 4px;
    font-size:12px;
    font-weight:600;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btnWrite {
  width:63px;
  height:33px;
  background: linear-gradient(to bottom, #6051f2, #0572fa);
  color:#fff;
  border-radius: 4px;
  font-size:12px;
  font-weight:500;
}

.textRight {
  text-align: right;
}

.textRight button {
  width:77px;
  height:33px;
  text-align: center;
  color:#fff;
  background: #0472FA;
  border-radius: 4px;
  margin-top: 8px;
}

.timebox {
  margin-top:16px;
}
.timebox select {
  height:30px;
  width:100%;
  background-position: 95%;
  margin-bottom: 16px;
}
.timebox select:last-child {
  margin-bottom: 0;
}


.regist>.left {
  border-bottom:1px solid #E3E8EE;
  padding-bottom: 48px;
  margin-bottom: 48px;
}

.regist>.right .classinfo {
  background: #F3F5F7;
  border-radius: 8px;
  padding:20px;
}

.regist>.right .classinfo h3 {
  font-size:18px;
  font-weight:300;
  line-height: 1.4;
}
.regist>.right .classinfo h3 b {
  font-size:18px;
}
.regist>.right .classinfo .list {
  margin-top: 40px;
}
.regist>.right .classinfo .list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.regist>.right .classinfo .list li b {}
.regist>.right .classinfo .list li span {
  
  text-align: right;
}
.regist>.right .point {}
.regist>.right .point h4 {
  font-weight: bold;
  margin-bottom: 10px;
}
.regist>.right .point .inputbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.regist>.right .point .inputbox b {
  font-size:14px;
  padding-left: 5px;
}
.regist>.right .point .inputbox input {
  width:100%;
  height:22px;
  padding-left: 5px;
}
.regist>.right .point>p {
  font-size:12px;
  margin-top: 10px;
  
}
.regist>.right hr {
  margin:25px 0;
  border:0;
  border-bottom:1px solid #E3E8EE;
}

.regist .selectPay {
  width:100%;
  padding:24px;
  background: #E7F1FF;
  border-radius: 8px;
}
.regist .selectPay h4 {
  font-size:12px;
  font-weight:bold;
  margin-bottom: 8px;
}
.regist .selectPay select {
  width:100%;
  height:30px;
  font-size:12px;
  padding-left: 10px;
  
}
.regist .infoPay {
  margin:30px 0;
  border-radius: 8px;
  padding:24px;
  color:#fff;
  background: linear-gradient(to left, #98D5E5, #7B61FF);
}
.regist .infoPay .top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom:1px solid #F3F5F7;
  margin-bottom: 20px;
  padding-bottom:20px;
}
.regist .infoPay .top .price {
  text-align: center;
}
.regist .infoPay .top .price p {
  font-size:12px;
  font-weight:100;
  color:#E3E8EE;
  margin-bottom: 10px;
}
.regist .infoPay .top .price span {
  font-size:14px;
}
.regist .infoPay .top>span {
  font-size:14px;
}
.regist .infoPay .btm {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.regist .infoPay .btm>* {
  display: inline-block;
}

.regist .infoPay .btm .left {
  font-size:12px;
  font-weight:500;
  padding:8px 16px;
  background: rgba(255,255,255,0.2);
  border-radius: 8px;
}
.regist .infoPay .btm .right {
  display: flex;
  justify-content: center;
  align-items: center;
}
.regist .infoPay .btm .right b {
  font-size:18px;
  font-weight:500;
}
.regist .infoPay .btm .right span {
  margin-left: 10px;
}

.regist .btnRegist {
  background: linear-gradient(to right, #0472FA, #7B61FF);
  width:120px;
  height:49px;
  border-radius: 4px;
  color:#fff;
  text-align: center;
  box-shadow:5px 5px 10px rgba(4, 114, 250, 0.15);
  font-size:12px;
  font-weight:500;
  margin:0 auto;
  display: block;
}

.subInfoText {
  font-size:12px;
}

.noneFlex {
  display: block !important;
}

.popupRegist {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.popupRegist .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.popupRegist .con {
  z-index: 1;
  width: 100%;
  height: 90vh;
  background: #fff;
  margin: 0 auto;
  position: absolute;
  margin-top: 10px;
  overflow: auto;
  border-radius: 32px 32px 0 0;
  padding: 30px;
  bottom:0;
  animation:goToTop .2s ease-in-out;
}

.popupRegist h4 {
  font-size:18px;
  font-weight:300;
}
.popupRegist h4 b {
  font-size:18px;
}

.popupRegist .popupClose {
  position: absolute;
  right:30px;
  top:30px;
}

.popupRegist .popupClose img {
  height:22px;
}

.popupRegist .curriculum .checkLevel label span{
  font-weight:bold;
  font-size:12px;
}

.popupRegist .curriculum .checkLevel label {
}

.popupRegist .curriculum .checkLevel {
  padding:16px 0;
  margin:30px 0 25px;
}
.popupRegist .curriculum .choiceKind{
  row-gap:16px;
}
.popupRegist .curriculum .choiceKind .item {
  width:calc(33% - 5px);
  width:-webkit-calc(33% - 5px);
  height:97px;
  padding:15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.popupRegist .curriculum .choiceKind .text .eng {
  font-size:12px;
  font-weight:bold;
}

.popupRegist .curriculumList h5 {
  font-size:12px;
}

.popupRegist .curriculumList ul {
  padding-top: 24px;
  padding-right: 20px;
  overflow:auto;
  height:490px;
}

.popupRegist .curriculumList ul li:nth-child(3n+0) .item {
  margin-right:0;
}
.popupRegist .curriculumList ul li:nth-child(3n+1) .item {
  margin-left:0;
}

.popupRegist .curriculumList ul li .textTitle{
  font-weight: bold;
}
.popupRegist .curriculumList ul li .textLevel {
  font-weight:400;
}

.popupRegist .curriculumDetail {
  height:510px;
  overflow:auto;
}
.popupRegist .curriculumDetail .curriculumList {
  padding-right: 10px;
}
.popupRegist .curriculumDetail .detail {
  align-items: flex-start;
}

.popupRegist.detail .curriculumList ul {
  height:auto;
  border-top:1px solid #F3F5F7;
  margin-top:25px;
}

.popupRegist.detail .btnSelectBook {  
  display: inline-block;
  width:85px; 
  height:22px;
  text-align: center;
  color:#fff;
  background: #07BC6E;
  border-radius: 4px;
  margin-top: 5px;
  font-size:12px;
}
.popupRegist.detail .btnMainStyle2 {
  width:140px;
  height:49px;
  margin-top: 24px;
}

.popupRegist .btnMainStyle2 {
  margin-top: 10px;
}

.visual p {
  font-size:14px !important;
}

.freetrial {
  padding-top: 60px;
  padding-bottom: 50px;
}

.visual p {
    color: #000;
    font-weight: bold;
}

.visual.freetrial b,
.visual.freetrial h2 {
  font-size:24px;
}
.visual.freetrial h2 {
  font-weight:300;
  line-height: 1.4;
}
.visual.freetrial p {
  margin-top: 16px;
  line-height: 1.6;
  font-size:12px;
}

.freetrial h3 {
  font-size:18px;
  font-weight:bold;
  margin-bottom:8px;
}

.freetrial .title,
.freetrial .title b{
  font-size:18px;
}
.freetrial .title {
  font-weight:300;
  line-height: 1.4;
}

.freetrial .btnbox.class label {
  width: 63px;
}

.freetrial .select1 {
  
  width:100%;
  height:30px;
  background-position: 95%;
  margin-top: 16px;
}

.applyUserInfo {
  margin-bottom: 8px;
}
.applyUserInfo .email {}
.applyUserInfo .email .btnEmail {
  display: inline-block;
  width:56px;
  height:22px;
  color:#fff;
  font-size:12px;
  border-radius: 4px;
  font-weight: 500;
  background: linear-gradient(to left, #7B61FF, #0472FA);
}
.applyUserInfo .email .box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 16px;
}
.applyUserInfo .email .box input {
  width:100%;
  height:22px;
  margin-right: 8px;
}


.applyUserInfo .email p {
  margin-top: 8px;
  font-size:12px;
}

.applyUserInfo>.box {
  margin-top: 16px;
}
.applyUserInfo>.box input {
  margin-bottom: 8px;
  height:22px;

}
.applyUserInfo>.box input:last-child {
  margin-bottom:0;
}

.applyUserInfo .phone {
  margin-top: 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.applyUserInfo .phone select,
.applyUserInfo .phone input {
  width:32%;
}
.applyUserInfo .phone select {
  background-position:95%;
}
.applyUserInfo .phone span {
  width:1%;
  margin:0 5px;
}

.freetrial .agree {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
}
.freetrial .agree label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.freetrial .agree label input {
  position: fixed;
  left:-9999px;
}
.freetrial .agree label i {
  width:16px;
  height:16px;
  border-radius: 4px;
  border:1px solid #0472fa;
  display: inline-block;
}
.freetrial .agree label input:checked + i {
  background: #0472fa;
}
.freetrial .agree label span {
  font-size:12px;
  margin-left:8px;
}
.freetrial .agree a {
  min-width:50px;
  color:#0472FA;
  font-size:12px;
  display: inline-block;
  text-decoration: underline !important;
}

.btnAddClass {
  width:120px;
  height:49px;
  color:#fff;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:12px;
  font-weight:500;
  background: linear-gradient(to right, #0472FA, #7B61FF);
  margin:0 auto;
  box-shadow: 0 5px 18px rgba(4, 144, 250, 0.25);
  margin-top: 56px;
}


.freetrialResult {
  padding:60px 30px 100px;
}

.freetrialResult h3 b,
.freetrialResult h3 {
  font-size:24px;
}
.freetrialResult h3 {
  font-weight:100;
  line-height: 1.4;
  margin-bottom: 16px;
}

.subInfoText2 {
  font-size:14px;
  margin-bottom: 16px;
}

.reportCheck {
  width:16px;
  height:16px;
  border-radius: 4px;
  border:1px solid #0472FA;
  display: inline-block;
}
.reportCheck.on {
  background: #0472FA;
}


.btnView.reportCheck {
  width:16px;
  height:16px;
  border-radius: 4px;
  border:1px solid #0472FA;
  display: inline-block;
  cursor: pointer;
}
.btnView.reportCheck.on {
  background: #0472FA;
}


.confirmWrap {}
.confirmWrap .confirmbox {
  background: #F3F5F7;
  padding:24px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.confirmWrap .confirmbox .num {
  
  font-size:12px;
}
.confirmWrap .confirmbox .infoWrap {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap:wrap;
}

.confirmWrap .confirmbox .infoWrap.item1 {
  display: block;
}
.confirmWrap .confirmbox .infoWrap.item1 .box {
  width:100%;
}

.confirmWrap .confirmbox .infoWrap .box {
  text-align: left;
  width:50%;
  margin-top: 16px;
}
.confirmWrap .confirmbox .infoWrap .box span {
  font-size:12px;
  
}
.confirmWrap .confirmbox .infoWrap .box p {
  margin-top: 8px;
  font-size:12px;
  color:#212121;
}
.confirmWrap .confirmbox .reportWrap {
  margin: 16px 0;
  padding:16px 0;
  border-top:1px solid #E3E8EE;
  border-bottom:1px solid #E3E8EE;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.confirmWrap .confirmbox .reportWrap .left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.confirmWrap .confirmbox .reportWrap .left span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 16px;
  
}
.confirmWrap .confirmbox .reportWrap>div {
  width:50%;
}
.confirmWrap .confirmbox .reportWrap .left i.reportCheck {}
.confirmWrap .confirmbox .reportWrap .right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.confirmWrap .confirmbox .reportWrap .right span {
  
}
.confirmWrap .confirmbox .reportWrap .right button {
  font-size:12px;
}

.confirmWrap .confirmbox .stateWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top:1px solid #E3E8EE;
}

.confirmWrap .confirmbox .stateWrap mark {
  padding:5px 10px ;
  border-radius: 10px;
  background: #CEE4FF;
  color:#0472FA;
  font-size:12px;
}

.confirmWrap .btnWrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 16px;
  padding-top: 16px;
  border-top:1px solid #E3E8EE;
  gap: 10px;
} 
.confirmWrap .btnWrap .box p {
  
  font-size:12px;
  margin-bottom: 8px;
}
.confirmWrap .btnWrap .box {
  text-align: center;
  width:33.3333%;
} 
.confirmWrap .btnWrap .box .btnView {
  background: #0472FA;
  color:#fff;
  height:22px;
  line-height: 22px;
  width: 100%;
  display: block;
  border-radius: 4px;
}

.confirmWrap .confirmbox > button {
  display: block;
  width:100%;
  text-align: center;
  background: #0472FA;
  border-radius: 4px;
  color:#fff;
  height:22px;
  font-size:12px;
}
.confirmWrap .confirmbox > p {
  text-align: left;
  color:#0472FA;
  padding-top: 5px;
}
.text_clock {
  text-align: center !important;
}

.confirmWrap .markEnd {
  display: inline-block;
  padding:4px 10px;
  border-radius: 100px;
  background: #CEE4FF;
  color:#0472FA;
}
.confirmWrap .markPrev{
  display: inline-block;
  padding:4px 10px;
  border-radius: 100px;
  background: #DCF8EC;
  color:#07BC6E;
}

.trialClassReport {
  border-radius: 16px;
  box-shadow:5px 5px 30px 0px rgba(0,0,0,0.08);
  padding:0;
}
.trialClassReport .title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 8px;
  border-bottom:1px solid #E3E8EE;
  margin-bottom: 16px;
}
.trialClassReport .title img {
  margin-right: 8px;
  height:22px;
}
.trialClassReport .title p {
  font-size:12px;
}
.trialClassReport .content {
}
.trialClassReport .content>div{
}
.trialClassReport .content .left {}
.trialClassReport .content .infolist {
  margin-bottom: 24px;
}
.trialClassReport .content .infolist li {
  margin-bottom: 8px;
  display: flex;
  justify-content:flex-start;
  align-items: center;
  color:#707077
}
.trialClassReport .content .infolist.barNone li span:nth-child(1) {
  border-left:0;
  padding-left: 0;
  min-width:46px;
}
.trialClassReport .content .infolist li span:nth-child(1) {
  border-left:1px solid #0472FA;
  padding-left: 16px;
  font-size:12px;
}
.trialClassReport .checkTable {
  margin-bottom: 24px;
}

.trialClassReport .checkTable th {
  background: #F3F5F7;
  padding:3px;
  font-size:14px;
  word-break: keep-all;
  font-size:12px;
}
.trialClassReport .checkTable td {
  padding:3px 0;
  border:1px solid #E3E8EE;
  border-top:0;
  text-align: center;
  font-size:12px;
}

.trialClassReport .checkTable td:first-child {
  border:0;
  text-align: left;
  padding-right: 10px;
  word-break: keep-all;
}
.trialClassReport .checkTable td:nth-child(4),
.trialClassReport .checkTable td:nth-child(7),
.trialClassReport .checkTable td:nth-child(10),
.trialClassReport .checkTable td:nth-child(13){
  border-right:1px solid #AAB0B7;
}

.trialClassReport .content .right {
  padding-left: 0;
}
.trialClassReport .content .right .infolist li span {
  border-left:1px solid #E3E8EE;
}

.checkTable2 {
  width:100% !important;
}
.checkTable2 table {
}
.checkTable2 table tr {}
.checkTable2 table tr th {
  font-size:12px;
  background: #F3F5F7;
  padding:4px 0;
}
.checkTable2 table tr td {
  border:1px solid #E3E8EE;
  text-align: center;
  font-size: 12px;
  padding:2px 0;
}
.trialClassReport .block {
  display: block;
}

.corrections {
  border:1px solid #E3E8EE;
  border-radius: 4px;
  padding:24px;
}
.corrections .text,
.corrections .text * {
  font-weight:600;
  font-size:12px;
}
.corrections .text {
  margin-bottom: 20px;
  font-size:12px;
  word-break: keep-all;
}
.corrections .text:last-child {
  margin-bottom: 0;
}
.trialClassReport h4 {
  padding-top:24px;
  padding-bottom: 8px;
  font-size:12px;
  font-weight:bold;
  letter-spacing: -0.3px;
}
.trialClassReport h5 {
  font-size:18px;
  padding-top: 24px;
  padding-bottom: 24px;
  font-weight:700;
}

/* 수강 절차 */
.widthWrap2.step {
  padding-top: 50px;
}
.widthWrap2.step .stepbox {
  border-bottom: 1px solid #E3E8EE;
  padding-bottom:40px;
  margin-bottom: 40px;
}
.widthWrap2.step .stepbox .icon {
  width:64px;
  height:64px;
  background: #F3F5F7;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin:0 auto 16px;
}
.widthWrap2.step .stepbox .icon img {
  height:32px;
}

.widthWrap2.step .text {
}
.widthWrap2.step .text h3 {
  font-size:12px;
  text-align: center;
  font-weight:bold;
}
.widthWrap2.step .text h4 {
  text-align: center;
  font-size:18px;
  font-weight: bold;
  margin:10px 0 24px;
}
.widthWrap2.step .text p {
  line-height: 1.4;
  
  margin-bottom: 20px;
}

.widthWrap2.step .text p:last-child {
  margin-bottom: 0;
}

.widthWrap2.step .text a {
  color:#0472FA;
  text-decoration: underline !important;
}


.stepInfobox {
  padding:20px 0 24px;
  border-bottom:1px solid #E3E8EE;
}

.stepInfobox * {
  line-height: 1.4;
}
.stepInfobox h3 *,
.stepInfobox h3 {
  font-size:24px !important;
  line-height: 1.4;
  margin-bottom: 24px;
}
.stepInfobox h3 {
  font-weight:100;
}
.stepInfobox b {
  color:#333;
  font-size:12px;
}
.stepInfobox p {
  
  margin-bottom: 20px;
}
.stepInfobox p:last-child {
  margin-bottom: 0;
}
.stepInfobox p a {
  display: inline-block;
  text-decoration: underline !important;
  color:#0472FA;
}
.stepInfobox .list {
  padding-left: 25px;
  margin-bottom: 20px;
}
.stepInfobox .list li {
  list-style: disc;
  
}
.stepInfobox .list:last-child {
  margin-bottom: 0;
}
.stepInfobox table {
  text-align: center;
  margin-bottom: 40px;
}
.stepInfobox table th {
  background: #F3F5F7;
  height:78px;
  
  font-weight:bold;
  border-bottom:1px solid #AAB0B7;
  font-size:12px;
}
.stepInfobox table td {
  font-size:12px;
  height:66px;
  vertical-align: middle;
  border-bottom:1px solid #E3E8EE;
}

.refundbox * {
  color:#707077 !important;
}
.refundbox {
  background: #F3F5F7;
  padding:32px 16px;
}
.refundbox .text {
  position: relative;
  padding-left: 20px;
  margin-bottom: 20px;
  font-size:12px;
}
.refundbox .text:before {
  content:'';
  display: inline-block;
  width:4px;
  height:4px;
  background: #0472FA;
  position: absolute;
  left:0;
  top:5px;
}
.refundbox .infoStep {
  width:100%;
  background: #fff;
  border:1px solid #E3E8EE;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}

.refundbox .infoStep>div {
}
.refundbox .infoStep .left {
  text-align: center;
  width:100%;
  height:30px;
  line-height: 30px;
    color:#AAB0B7 !important;
  font-size:12px;
  background: #E3E8EE;
  font-weight:bold;

}
.refundbox .infoStep .right {
  padding:16px;
}
.refundbox .infoStep .right b.c_blue {
  color:#0472fa !important;
}
.refundbox .text:last-child {
  margin-bottom: 0;
}

/* 수강 내역 */
.widthWrap2.history {
  padding:48px 30px;
}
.widthWrap2.history .btn {
  display: flex;
  justify-content: flex-start;
  align-content: center;
}
.widthWrap2.history .btn a {
  display: inline-block;
  color:#E3E8EE;
  font-size:24px;
  font-weight:bold;
  margin-right:16px;
}
.widthWrap2.history .btn a:hover,
.widthWrap2.history .btn a.on {
  color:#212121;
  text-decoration: none !important;
}
.widthWrap2.history .history {
  margin-top: 24px;
}
.widthWrap2.history .history table {
  border-bottom:1px solid #e3e8ee;
}
.widthWrap2.history .history table th {
  height:78px;
  background: #F3F5F7;
  font-size:16px;
  font-weight:bold;
  
}
.widthWrap2.history .history table td {
  text-align: center;
  height: 78px;
}
.widthWrap2.history .history table tr:nth-child(odd) {
  background: #F3F5F7;
}
.widthWrap2.history .history table .btnView {
  display: inline-block;
  width:62px;
  height:39px;
  background: #0472FA;
  color:#fff;
  border-radius: 4px;
}

.popupHistory {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.popupHistory .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.popupHistory .con {
  z-index: 1;
  width: 100%;
  height: 90vh;
  background: #fff;
  margin: 0 auto;
  position: absolute;
  border-radius: 30px 30px 0 0;
  padding:30px;
  overflow: hidden;
  bottom:0;
  animation:goToTop .2s ease-in-out;
}

.popupHistory .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.popupHistory h3 *,
.popupHistory h3 {
  font-size:18px;
}
.popupHistory h3 {
  font-weight:100;
}

.popupHistory .head h2 *, 
.popupHistory .head h2 {
  font-size:18px;
}

.popupHistory .head button {
  background: none;
}
.popupHistory .head button img {
  height:22px;
}

.popupHistory .body {
  overflow:auto;
  height:calc(100vh - 137px);
  height:-webkit-calc(100vh - 137px);
  padding-right: 10px;
  padding-bottom: 50px;
}

.popupHistory .classinfo {
  border-top:1px solid #E3E8EE;
  padding-top: 16px;
  padding-bottom: 16px;
}
.popupHistory .classinfo .title {
  font-size:14px;
  font-weight:bold;
}
.popupHistory .classinfo ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}
.popupHistory .classinfo ul li span {
  font-size:12px;
}
.popupHistory .classinfo ul li span:nth-child(1) {
  font-weight:bold;
}
.popupHistory .classinfo ul li span:nth-child(2) {
  
}

.popupHistory .learningProgress {
  border-top:1px solid #e3e8ee;
  padding-top: 16px;
  margin-bottom: 16px;
}
.popupHistory .learningProgress .title {
  font-size:14px;
  font-weight:bold;
  margin-bottom:16px;
}
.popupHistory .learningProgress table {}
.popupHistory .learningProgress table th,
.popupHistory .learningProgress table td {
  border:1px solid #E3E8EE;
  height:33px;
  text-align: center;
}
.popupHistory .learningProgress table th {
  background: #F3F5F7;
  
  font-weight:bold;
}
.popupHistory .learningProgress table td {}

.popupHistory .date {
  font-size:12px;
  
  text-align: right;
  margin-top: 25px;
  margin-bottom: 25px;
  font-weight:bold;
}

.popupHistory .btnSave {
  width:136px;
  height:49px;
  line-height: 49px;
  color:#fff;
  text-align: center;
  font-weight:500;
  border-radius: 4px;
  margin-top: 32px;
  font-size:12px;
  background: linear-gradient(to right, #7B61FF, #0472FA);
  box-shadow: 0 5px 24px rgb(4, 114, 250, 0.3);
  margin:0 auto;
  display: block;
}

.popupHistory.certificate {}
.popupHistory.certificate .certificatebox {
  border:1px solid #E3E8EE;
  padding:32px 16px;
  text-align: center;
  margin-bottom: 32px;
}
.popupHistory.certificate .certificatebox h3 {
  font-size:32px;
  font-weight:bold;
 margin-bottom: 8px; 
}
.popupHistory.certificate .certificatebox h4{
 
 font-size:14px;
 font-weight:bold;
 letter-spacing: 10px;
 margin-bottom: 24px;
}
.popupHistory.certificate .certificatebox table {}
.popupHistory.certificate .certificatebox table th {
  background: #F3F5F7;
  font-size:12px;
  line-height: 1.6;
  padding:16px;
}
.popupHistory.certificate .certificatebox table td {
  font-size:12px;
  
}
.popupHistory.certificate .certificatebox table th, 
.popupHistory.certificate .certificatebox table td {
  border:1px solid #E3E8EE;
}
.popupHistory.certificate .certificatebox .text b {
  display: block;
  font-size:12px;
  margin-top: 24px;
  font-weight:500;
}
.popupHistory.certificate .certificatebox .text {
  font-size:12px;
  margin-bottom: 24px;
}
.popupHistory.certificate .certificatebox .date {
  text-align: center;
  color:#212121;
  margin-bottom: 24px;
  font-size:18px;
}
.popupHistory.certificate .certificatebox .name {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}
.popupHistory.certificate .certificatebox .name img {
  height:50px;
}

.popupHistory.report {}
.popupHistory.report .trialClassReport {
  box-shadow:none;
  padding:24px;
  border-radius: 8px;
}

.popupHistory.changeTime {}
.popupHistory.changeTime .btnbox:first-child  {
  border-bottom:1px solid #E3E8EE;
  margin-bottom: 16px;
  padding-bottom: 16px;
}
.popupHistory.changeTime .btnbox label {
  height:55px;
  line-height: 55px;
  margin-right: 8px;
}
.popupHistory.changeTime .btnbox label:last-child {
  margin-right: 0;
}

.inquiry {
  padding:48px 30px ;
}

.inquiry .memberTitle {
  margin-bottom: 24px;
}

.inquiryInfo {
  margin-bottom: 24px;
  padding-left: 20px;
}
.inquiryInfo li {
  font-size:12px;
  list-style: disc;
  line-height: 1.4;
}
.businessHours .top {
  margin-bottom:8px;
}
.businessHours .top img {
  margin-right: 16px;
  display: block;
  margin-bottom: 8px;
}
.businessHours .top b {
  font-size:12px;
}
.businessHours .btm {
  
  font-size:12px;
  line-height: 1.6;
}

.businessHours .item2 {}

.boardStyle1 {}
.boardStyle1 .selecTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin:24px 0 10px;
}
.boardStyle1 .selecTop select {
  
  width:132px;
  height:33px;
}
.boardStyle1 .selecTop button {
  width:77px;
  height:30px;
  background: #0472FA;
  color:#fff;
  border-radius: 4px;
  font-size:12px;
}

.boardStyle1 table {
  text-align: center;
  border-top:1px solid #0472fa;
  border-bottom:1px solid #0472fa;
  margin-top:20px;

}
.boardStyle1 table th {
  border-bottom:1px solid #0472FA;
  
  font-weight:bold;
}
.boardStyle1 table td a {
  font-size:12px;
  font-weight:bold;
  margin-bottom: 5px;
  text-align: left;
  display:flex;
}

.boardStyle1 table td a span {
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  max-width:120px;
  font-weight: bold;
}
.boardStyle1 table td p {
  text-align: left;
}

.boardStyle1 table td p {}
.boardStyle1 table td p span {}

.boardStyle1 table td {
  padding:5px 0;
  
}

.boardStyle1 table tr:last-child td {
  border-bottom:0;
}

.boardStyle1 table th,
.boardStyle1 table td {
  height:67px;
  border-bottom:1px solid #E3E8EE;
  font-size:12px;
}


.boardStyle1 table td:nth-child(3) {
  text-align: left;
  padding-left: 10px;
}


.boardStyle1 mark {
  display: inline-block;
  min-width:50px;
  height:33px;
  line-height:32px;
  border-radius: 4px;
  background: none;
  font-size:9px;
}
mark.markUnprocessed {
  border:1px solid #AAB0B7;
  color:#AAB0B7;
  text-align: center;
}
mark.markInProgress {
  border:1px solid #07BC6E;
  color:#07BC6E;
  text-align: center;
}
mark.answerComplete {
  border:1px solid #0472FA;
  color:#0472FA;
  text-align: center;
}

.boardStyle1 table a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.boardStyle1 table .comment {
  
  font-size:14px;
  display: inline-block;
}

.boardStyle1 table img {
  margin-left: 5px;
  height:12px;
}

.boardStyle1 table a {
  display: flex;
  justify-content: flex-start;
}

.boardStyle1 .paging {
  margin-top: 40px;
  margin-bottom: 40px;
}

.boardStyle1 .search .box1 {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  margin-top: 10px;
}
.boardStyle1 .search select {
  width:75px;
  height:33px;
  margin-right: 4px;
}
.boardStyle1 .search input {
  width:calc(100% - 75px);
  width:-webkit-calc(100% - 75px);
  height:33px;
}
.boardStyle1 .search button {
  display: inline-block;
  width:100% !important;
  height:33px;
  border-radius:4px;
  color:#fff;
  margin-bottom: 8px;
}
.boardStyle1 .search .btnSearch {
  width:66px;
  background: linear-gradient(to left, #7B61FF, #0472FA);
  display: inline-block;
}
.boardStyle1 .search .btnList {
  background: #0472FA;
}



mark.miniMark {
  display: inline-block;
  min-width:53px;
  height:20px;
  line-height:18px;
  border-radius: 4px;
  background: none;
  font-size:12px;
  padding:0 10px;
}
.inquiryDetail .detailbox  {
  border-top:1px solid #0472FA;
  border-bottom:1px solid #0472FA;
}
.inquiryDetail .detailbox .infoLine1 {
  padding:16px 0;
  border-bottom:1px solid #E3E8EE;
}

.inquiryDetail .detailbox .box b {
  color:#AAB0B7;
  margin-right: 10px;
  font-size:12px;
}
.inquiryDetail .detailbox .infoLine1 .right {
  margin-top: 16px;
  display: flex;
  justify-content:space-between;
  align-items: center;
}

.inquiryDetail .detailbox .box span {
  
  font-size:12px;
}
.inquiryDetail .detailbox .infoLine2 {
  padding:16px 0;
  border-bottom:1px solid #E3E8EE;
}

.inquiryDetail .detailbox .infoLine2 .left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.inquiryDetail .detailbox .infoLine2 span {
  color:#AAB0B7;
}
.inquiryDetail .detailbox .infoLine2 b {
  color:#AAB0B7;
  display: block;
  margin-right: 16px;
  font-size:12px;
}
.inquiryDetail .detailbox .infoLine2 .right {
  margin-top: 16px;
}
.inquiryDetail .detailbox .infoLine2 .right .box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.inquiryDetail .detailbox  .content {
  padding:16px 0;
  border-bottom:1px solid #E3E8EE;
}
.inquiryDetail .detailbox .infoLineBtm {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding:16px 0;
}
.inquiryDetail .detailbox .infoLineBtm b{
  margin-right: 35px;
}
.inquiryDetail .detailbox .infoLineBtm a {}

.inquiryDetail .detailboxBtn {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
}
.inquiryDetail .detailboxBtn button {
  height:33px;
  background: #0472FA;
  color:#fff;
  border-radius: 4px;
  padding:8px 15px;
  margin:0 2px;
}

.inquiryDetail .detailboxBtn>div {
  display: flex;
  justify-content: center;
  gap: 5px;
}


.inquiryDetail .commentbox {
  margin-top: 40px;
  padding-bottom: 25px;
  margin-bottom: 40px;
  border-bottom:1px solid #E3E8EE;
}
.inquiryDetail .commentbox .title {
  font-size:18px;
  font-weight:600;
}
.inquiryDetail .commentbox .content {
  border-top:1px solid #0472FA;
  margin-top: 24px;
  padding-top: 24px;
}
.inquiryDetail .commentbox .content .top {
  margin-bottom: 24px;
}
.inquiryDetail .commentbox .content .top * {
  margin-right: 16px;
}
.inquiryDetail .commentbox .content .top span {
  
}

.inquiryDetail .commentbox .content .top b {
  display: block;
  margin-bottom: 5px;
}

.inquiryDetail .commentbox .content .btm {
  line-height: 1.4;
}

.inquiryDetail .commentInput {
  background: #F3F5F7;
  padding:16px;
  border:1px solid #ddd;
  border-radius: 4px;
}
.inquiryDetail .commentInput .top {
  margin-bottom: 16px;
}
.inquiryDetail .commentInput .top img {
  margin-right: 8px;
  height:10px;
}
.inquiryDetail .commentInput .top b {
  
  font-size:12px;
}
.inquiryDetail .commentInput .btm {
}
.inquiryDetail .commentInput .btm textarea::placeholder {
  font-size:12px;
}
.inquiryDetail .commentInput .btm textarea {
  min-height:103px !important;
  height:103px !important;
  padding:16px;
  text-indent: 0;
  font-size:12px;
  margin-bottom: 8px;
}
.inquiryDetail .commentInput .btm button  {
  background: linear-gradient(to right, #0472FA, #7B61FF);
  width:100%;
  height:33px;
  color:#fff;
  border-radius: 4px;
}


.reviewDetail .detailbox .infoLine1 .left b {
  display: block;
  margin-top: 8px;
  font-weight:500;
}

.reviewDetail .detailbox .infoLine1 {
  padding:16px 8px;
}
.reviewDetail .detailbox .infoLine1 .right {
  margin-top: 10px;
}

.reviewDetail .detailbox .box span,
.reviewDetail .detailbox .box b {
  font-size:12px;
}
.reviewDetail .detailbox .infoLine2 .right {
  margin-top: 0;
} 

.reviewDetail .detailbox .infoLine2 {
  padding:8px 0;
}

.reviewDetail .detailbox .infoLine2 span,
.reviewDetail .detailbox .infoLine2 b {
  font-size:12px;
}

.reviewDetail .detailbox .infoLine2 .right .box:last-child {
  margin-bottom: 0;
}

.reviewDetail .detailbox .content {
  font-size:12px;
}

.reviewDetail .detailbox .content img {
  max-width:100%;
}

.reviewDetail .detailboxBtn {
  margin-top: 8px;
}

.bgGradient {
  background: linear-gradient(to right, #0472FA, #7B61FF) !important;
}

.inquiryModify {
}

.modifybox {}
.modifybox .text {
}
.modifybox .text p {
  line-height: 1.4;
  margin-bottom: 25px;
  
}
.modifybox .text p a {
  display: inline-block;
  color:#0472FA;
  text-decoration: underline !important;
}

.modifyInput {
}
.modifyInput table {}
.modifyInput table th,
.modifyInput table td {
  height:40px;
  
  padding:4px 0;
}
.modifyInput table th {
  text-align: left;
  font-weight:bold;
  
  vertical-align: top;
  padding-top: 13px;
}
.modifyInput table .phone {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.modifyInput table .phone input {
  margin-right:4px;
}
.modifyInput table .email {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.modifyInput table .email >span {
  margin:0 4px;
}
.modifyInput table select,
.modifyInput table input {
  width:100%;
  height:30px;
  padding-left: 10px;
}
.modifyInput table input:last-child {
  margin-right: 0;
}

.modifyInput table textarea {
  min-height:196px;
  margin:10px 0;
  font-size:12px;
  padding:16px;
}
.modifyInput table textarea::placeholder {
  font-size:12px;
}
.modifyInput table .addFile {
  display: flex;
}

.modifyInput table .addFile input {
  height:22px;
}
.modifyInput table .addFile label span {
  display: inline-block;
  width:53px;
  height:22px;
  line-height: 22px;
  color:#fff;
  font-size:12px;
  text-align: center;
  border-radius: 4px;
  background: linear-gradient(
    to left,
    rgba(4, 114, 250, 0.8),
    rgba(96, 81, 242, 0.8)
  );
  margin-left: 4px;
}
.modifyInput table .addFile label input {
  position:fixed;
  left:-9999px;
}

.modifyInputBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
  margin-bottom: 30px;
  border-top:1px solid #0472fa;
  margin-top: 20px;
}
.modifyInputBtn button {
  background: #0472FA;
  color:#fff;
  width:99px;
  height:33px;
  border-radius: 4px;
  margin-right: 8px;
}
.modifyInputBtn button:last-child {
  margin-right: 0;
}
.lectureRoom .selectClass {
  background: #F3F5F7;
  padding:16px;
  margin-bottom: 32px;
}
.lectureRoom .selectClass .left{
  width:160px;
  text-align: left;
  font-size:12px;
  color:#212121;
  font-weight:bold;
  margin-bottom: 10px;
}
.lectureRoom .selectClass .right button {
  width:100%;
  height:33px;
  color:#fff;
  text-align: center;
  background: #0472FA;
  border-radius: 4px;
  margin-top: 8px;
}

.myClassInfo {
}
.myClassInfo>.left {
  text-align: center;
}
.myClassInfo>.left a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right:0;
  width:100%;
  height:97px;
  text-align: center;
  border-radius: 8px;
  color:#fff;
  background: url(../img/my/classBg.png) 50% /cover no-repeat;
  flex-wrap:wrap;
}
.myClassInfo>.left a b {
  display: block;
  width:100%;
  font-size:12px;
  font-weight:500;
  margin-bottom: 8px;
}
.myClassInfo>.left a img {
  height:16px;
}

.myClassInfo>.right {
  width:100%;
  border-top:1px solid #E3E8EE;
  margin-top: 16px;
  padding-top: 16px;
}

.myClassInfo>.right ul {
  display: table;
}
.myClassInfo>.right li {
  display: table;
  margin-bottom: 16px;
}

.myClassInfo>.right li>* {
  display: table-cell;
}

.myClassInfo>.right li>*:first-child {
  width:55px;
}

.myClassInfo>.right li * {
  font-size:12px;
}
.myClassInfo>.right li>b {
  
  margin-right: 32px;
}
.myClassInfo>.right li>span {
  word-break:keep-all;
}
.myClassInfo>.right li>span b {}
.myClassInfo>.right .subText {
  font-size:12px;
  
}
.myClassInfo>.right .btnlist {
  margin:24px 0;
}

.myClassInfo>.right .btnlist .top {
  margin-bottom: 8px;
}
.myClassInfo>.right .btnlist .top,
.myClassInfo>.right .btnlist .btm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap:8px;
}

.myClassInfo>.right .btnlist button {
    margin-bottom: 5px;
  display: inline-block;
  color:#fff;
  background: #0472FA;
  padding:10px 5px;
  border-radius:4px;
  width:100%;
}
.myClassInfo>.right .classDelay {
  border-radius: 4px;
}
.myClassInfo>.right .classDelay .top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.myClassInfo>.right .classDelay .top b {
  font-weight:bold;
  font-size:12px;
  margin-right: 32px;
}

.myClassInfo>.right .classDelay .top div {
  
}
.myClassInfo>.right .classDelay .top div:nth-child(2) {
  margin-right: 16px;
  padding-right: 16px;
  border-right:1px solid #E3E8EE;
}

.myClassInfo>.right .classDelay .btm  {
  text-align: right;
  display: flex;
  justify-content: center;
  align-items: center;
}
.myClassInfo>.right .classDelay .btm  {
  
}
.myClassInfo>.right .classDelay .btm .divider {
  border-right:1px solid #E3E8EE;
  margin-right: 24px;
  padding-left: 24px;
  width:1px;
  height:55px;
}
.myClassInfo>.right .classDelay button {
  display: inline-block;
  background: linear-gradient(
    to right,
    rgba(4, 114, 250, 0.8),
    rgba(96, 81, 242, 0.8)
  );
  color:#fff;
  border-radius: 4px;
  width:100%;
  height:33px;
  margin-top: 8px;
}

.classCalendar {
  margin-top: 25px;
  padding-top: 16px;
  border-top: 1px solid #E3E8EE;
}
.classCalendar .changeDate {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.classCalendar .changeDate .date {
  margin:0;
}
.classCalendar .changeDate .date * {
  font-size:24px;
  font-weight:500;
  
}
.classCalendar .changeDate .date span {
  margin:0 16px;
}

.classCalendar .changeDate button {
  background: none;
  width: 50px;
  text-align: center;
}

.dateTable {}
.dateTable th {
  
  font-size:12px;
  padding-bottom: 7px;
  border-bottom:1px solid #E3E8EE;
}
.dateTable td  {
  text-align: center;
  height:30px;
  color:#AAB0B7;
  padding-bottom: 10px;
  position: relative;
  padding-top: 5px;
}
.dateTable .dot {
  background: #DE3636;
  width:4px;
  height:4px;
  border-radius: 50%;
  display: block;
  margin:0 auto;
  position: absolute;
  bottom:7px;
  left:20px;
}
.dateTable .dot.purple {
  background: #6051F2;
}
.dateTable .dot.green {
  background: #07BC6E;
}

.dateTable .dot.gray {
  background: #E3E8EE;
}
.dateTable .markInfo {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  margin-top: 16px;
}
.dateTable .markInfo>div {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-left: 24px;
}
.dateTable .markInfo>div .dot {
  position: relative;
  top:0;
  left:-5px;
}
.dateTable .markInfo>div span {}

.calBtn {
  margin-top: 30px;
  padding-top: 16px;
  border-top:1px solid #E3E8EE;
}
.calBtn select {
  width:100%;
  height:30px;
}
.calBtn button {
  display: block;
  height:33px;
  border-radius: 4px;
  color:#fff;
  text-align: center;
  width:100%;
  margin-top: 16px;
}


.popupHistory .con .head h2 {
  font-weight:100;
}

.popupHistory.delayCard .mySavingCard {
  padding:16px 0;
  border-top:1px solid #E3E8EE;
  border-bottom:1px solid #E3E8EE;
  margin-bottom: 16px;
}
.popupHistory.delayCard .mySavingCard .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.popupHistory.delayCard .mySavingCard .btm button {
  width:100%;
  height:33px;
  color:#fff;
  background: #0472FA;
  border-radius: 4px;
}
.popupHistory.delayCard .exportCard {}
.popupHistory.delayCard .exportCard .top {
  margin-bottom: 22px;
  border-bottom:1px solid #E3E8EE;
  padding-bottom: 16px;
}
.popupHistory.delayCard .exportCard .top b{
  display: block;
  font-size:12px;
  margin-bottom: 5px;
}
.popupHistory.delayCard .exportCard .top span{
  color:#0472FA;
  font-size:12px;
}
.popupHistory.delayCard .exportCard .btm {}
.popupHistory.delayCard .exportCard .btm .box {
  display: table;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom:1px solid #E3E8EE;
}

.popupHistory.delayCard .exportCard .btm .box>* {
  display: table-cell;
}
.popupHistory.delayCard .exportCard .btm .box>*:first-child {
  min-width:70px;
  word-break: keep-all;
  padding-right: 5px;
}
.popupHistory.delayCard .exportCard .btm .box>*:last-child {
  text-align: right;
}

.popupHistory.delayCard .exportCard .btm>b {
  margin:0 16px;
}
.popupHistory.delayCard .exportCard .btm>select {
  width:100%;
  height:30px;
  margin:10px 0;
}
.popupHistory.delayCard .exportCard .btm>button {
  width:100%;
  height:30px;
  color:#fff;
  border-radius: 4px;
  background: #0472fa;
}

.popupSubText {
  margin:16px 0;
  font-size:12px;
}
.infoMsg {
  text-align: center;
  background: #F3F5F7;
  padding:24px;
  font-size:12px;
  border-radius: 10px;
}
.infoMsg + .btnbox {
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
}
.infoMsg + .btnbox button {
  display: inline-block;
  width:100%;
  height:33px;
  line-height: 33px;
  color:#fff;
  background: #0472FA;
  border-radius: 4px;
  margin-right: 8px;
}

.infoMsg + .btnbox button:last-child {
  margin-right: 0;
}

.longHold {}
.longHold .con {
}
.longHold .btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 24px;
}
.longHold .btn button {
  font-size:18px;
  font-weight:bold;
  color:#E3E8EE;
  background: none;
}
.longHold .btn button:hover,
.longHold .btn button.on {
  color:#212121;
}
.longHold table {
  margin-top: 32px;
}
.longHold table th {
  text-align: center;
  background: #F3F5F7;
  
  height:58px;
}
.longHold table td {
  height:64px;
  text-align: center;
}
.longHold table th {
  font-weight:bold;
}
.longHold table th,
.longHold table td {
  border-bottom:1px solid #E3E8EE;
}

.longHold .list {
  padding-left: 25px;
}
.longHold .list li {
  list-style:disc;
  line-height: 1.4;
  font-size:12px;
}

.longHold .list li * {
  font-size:12px;
}
.longHold .list li span {
  
  font-size:12px;
}

.longHold .btnLongHold,
.longHold .btnRestart {
  display: block;
  width:100%;
  height:33px;
  background: #0472FA;
  color:#fff;
  border-radius: 4px;
  margin:24px auto 0;
}

.showConfirm {
  margin-top: 32px;
  padding-top: 32px;
  border-top:1px solid #E3E8EE;
  text-align: center;
  display: none;
}
.showConfirm h5 {
  font-size:18px;
  font-weight: bold;
}
.showConfirm p {
  font-size:12px;
  margin:16px 0;
}
.showConfirm .btmBtn {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
  gap:8px;
}
.showConfirm .btmBtn button {
  display: block;
  width:100%;
  height:33px;
  color:#fff;
  background: #0472FA;
  border-radius: 4px;
}
.boxRestart2 .btnbox {}
.boxRestart2 .btnbox label {
  height:55px;
  margin-right: 8px;
}
.boxRestart2 .btnbox label:last-child {
  margin-right: 0;
}

.boxRestart2 hr {
  border:0;
  border-top:1px solid #E3E8EE;
  margin-top: 16px;
  padding-top: 16px;
}

.linkFaq {
  text-decoration: underline !important;
}

.widthWrap2.faq .selecTop {
  display: block;
}

.widthWrap2.faq .selecTop hr {
  border:0;
  border-bottom:1px solid #E3E8EE;
  margin-bottom: 16px;
  margin-top: 16px;
}

.widthWrap2.faq .selecTop button {
  width:100%;
  margin-top: 8px;
  background: linear-gradient(to left, #6051f2, #0572fa);
}


.widthWrap2.faq .selecTop .right {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-content: center;
}

.widthWrap2.faq .selecTop .right button {
  width:127px;
}

.widthWrap2.faq .selecTop .right  input {
  width:395px;
  margin-right: 8px;
}

.faqTable {}
.faqTable .questionBox {
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height:58px;
}
.faqTable .questionBox .faqMark {
  width:50px;
  height:35px;
  border: 1px solid #0472FA;
  color:#0472FA;
  text-align: center;
  border-radius: 4px;
  margin-right: 10px;
}
.faqTable .questionBox button {
  background: none;
}
.faqTable .answerBox {
  display: none;
  text-align: left;
  padding:16px 0;
  
  line-height: 1.4;
}

.faqTable td:last-child {
  text-align: center !important;
}

.faqTable td {
  vertical-align: top;
  border-bottom:1px solid #F3F5F7;
  padding-bottom:0 !important;
  padding:0 8px !important;
}

.faqTable td,
.faqTable th {
  height:auto !important;
}

.faqTable td:nth-child(2) {
  padding-top: 0 !important;
}

.faqTable .questionBox p {
  font-weight:bold;
}
.faqTable .questionBox button p {
  color:#AAB0B7;
  padding-top: 5px;
  font-size:12px;
  font-weight:100;
}

.total ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 40px;
}
.total li {
  border-right:1px solid #E3E8EE;
  padding-right: 16px;
  margin-right: 16px;
}


.total li>*:first-child {
  margin-right: 16px;
}

.total li:last-child{
  border-right:0;
}

.notice .boardStyle1 td:nth-child(2) {
  padding-left: 10px;
}

.boardStyle1.notice td {
  padding:16px 8px;
}
.boardStyle1.notice a {
  white-space: nowrap;
  overflow:hidden;
  max-width:200px;
  text-overflow: ellipsis;
  display: block;
  text-align:left;
}
.boardStyle1.notice a span {
  width:100%;
  max-width:200px;
  font-weight:normal;
}
.boardStyle1 .subText {}
.boardStyle1 .subText span {
  color:#AAB0B7;
  font-size:12px;
  color:#AAB0B7;
  border-right:1px solid #E3E8EE;
  margin-right: 8px;
  padding-right: 8px;
}

.boardStyle1 .subText span:last-child {
  border-right:0;
}

.boardStyle1.notice.type2 .noticeMark {
  width:80px !important;
}

.boardStyle1.notice .noticeMark {
  color:#0472FA;
  font-size:9px;
  text-align: center;
  border: 1px solid #0472FA;
  padding:0 4px;
  display: inline-block;
  margin-right: 10px;
}
.boardStyle1.notice .noticeMark.necessary {
  color:#6051F2;
  border:1px solid #6051F2;
}
.boardStyle1.notice .noticeMark.event {
  color:#DE3636;
  border:1px solid #DE3636;
}
.boardStyle1.notice .noticeMark.suspension {
  color:#07BC6E;
  border:1px solid #07BC6E
}


.boardStyle1.notice a img {
  margin-left: 10px;
}

.boardStyle1 .search.type2 {
  justify-content: space-between;
}
.boardStyle1 .search.type2 .left {
  text-align: right;
}

.boardStyle1 .search.type2 .right {}

.boardPage {
  background: #E5E5E5;
  padding: 90px 30px 100px;
}
.boardPage .visualImg  {
  width:100%;
  margin:0 auto;
  display: block;
}

.boardPage .reviewContent {
  background: #fff;
  padding:32px 16px;
  border-radius: 16px;
  box-shadow:0 1px 24px 0 rgba(0,0,0,0.04);
  text-align: center;
}
.boardPage .reviewContent .title img {
  margin-bottom: 16px;
  height:60px;
  max-width:100%;
}
.boardPage .reviewContent .title p {
  
  font-size:12px;
  text-align: center;
  margin-bottom: 60px;
}
.boardPage .reviewContent .reviewInfo {
  margin:30px 0;
  text-align: center;
  border:1px dashed #AAB0B7;
  border-radius: 16px;
  padding:35px 16px;
  position: relative;
}
.boardPage .reviewContent .reviewInfo .title {
  position: absolute;
  width:156px;
  height:33px;
  line-height: 33px;
  text-align: center;
  background:  #f3f5f7;
  border-radius: 100px;
  font-size:12px;
  font-weight:bold;
  left:calc(50% - 80px);
  left:-webkit-calc(50% - 80px);
  top:-17px;
}
.boardPage .reviewContent .reviewSelect {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.boardPage .reviewContent .reviewSelect span {
  font-size:12px;
}

.boardPage .reviewContent .reviewSelect select {
  width:142px;
  height:33px;
}

.boardPage .reviewContent .reviewInfo .info .img {
  background: #F3F5F7;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  padding:20px 0;
}
.boardPage .reviewContent .reviewInfo .info .img img {
  height:74px;
}

.boardPage .reviewContent .reviewInfo .info  h4 {
  margin-top: 16px;
  font-size:18px;
  font-weight: 100;
}
.boardPage .reviewContent .reviewInfo .info h4 b {
  font-size:18px;
  display: block;
  padding-top: 5px;
  margin-bottom: 16px;
}

.boardPage .reviewContent .reviewInfo .info p {
  
  font-size:12px;
  line-height: 1.4;
}

.btnWriteReview {
  background: linear-gradient(to right, #0472FA, #7B61FF);
  width:117px;
  height:49px;
  border-radius: 4px;
  color:#fff;
  text-align: center;
  box-shadow:5px 5px 10px rgba(4, 114, 250, 0.15);
  font-size:12px;
  font-weight:500;
  margin:0 auto;
}

.reviewDetail {
  text-align: left !important;
}

.reviewTitle {
  font-size:18px;
  font-weight:100;
  margin-bottom: 40px;
  line-height: 1.4;
}
.reviewTitle b {
  font-size:18px;
  font-weight:bold;
}

.reviewDetail .minMark {
  margin-right: 16px;
}

.reviewDetail .blueBtmBar {
  border-bottom:1px solid #0472FA;
  padding-bottom: 40px;
}

.reivewInfoText {
  display: flex !important;
  justify-content: flex-start;
  align-items: flex-start;
}

.reivewInfoText .right {
  
}
.reivewInfoText .left {
  margin-right: 10px;
  
}

.classSelect {
  width:488px;
  background-position:450px;
  
}

.goToPc {
  background: #F3F5F7;
  height:64px;
  line-height: 64px;
  text-align: center;
  
  font-size:18px;
  font-weight:bold;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
}


.samplebox {
  border-radius: 10px;
  background: #f3f5f7;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding:40px;
}

.samplebox .box {
  width: 100%;
}

.samplebox p {
  font-weight:bold;
  margin-bottom: 16px;
  font-size:12px;
}
.samplebox ul li {
  margin-bottom: 10px;
}
.samplebox ul li .sample {
}
.samplebox ul li .sample a {
  display: inline-block;
  width:83px;
  height:22px;
  font-size:12px;
  line-height: 22px;
  background: #0472fa;
  color:#fff;
  text-align: center;
  border-radius: 5px;
  text-decoration: none !important;
}

.samplebox audio {
  width:100%;
  height:30px;
}

audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-current-time-display {
  font-size:12px;
  
}
audio::-webkit-media-controls-panel {
  padding:0;
  margin:0;
}

.resetPaddingBtm {
  padding-bottom:0;
}
.resetPaddingTop {
  padding-top:0;
}
.requestSelectbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.boardStyle1.other2 td {
  text-align: left;
}
.boardStyle1.other2 td span {
  margin:8px 0;
}

.popupSearchIdPw {}
.popupSearchIdPw h1 {
  text-align: center;
  margin-bottom: 50px;
}
.popupSearchIdPw h1 img {max-width:100%;}

.popupSearchIdPw h2 {
  text-align: center;
  font-weight:bold;
  font-size:14px;
  margin-bottom: 10px;
}
.popupSearchIdPw p {
  text-align: center;
  margin-bottom: 30px;
}
.popupSearchIdPw input {
  margin-bottom:10px;
}


/* 20240404 css 추가 (webcorgi) */
.flex_last {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    width: 100%;
}
.flex_last i {
    display: block;
    width: 100%;
}
.processbox_inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:6px;
    margin-bottom: 16px;
}
.processbox_inner a {
    display: block;
}
.con.popupPosition{}
.con.popupPosition>select {
    height: 60px !important;
    width: 100% !important;
    background: url(../img/common/select.png) no-repeat 98% #fff !important;
    margin-bottom: 10px;
    font-size: 17px !important;
}
.popupRegist.popup1 {}
.popupRegist.popup3 .bg,
.popupRegist.popup2 .bg,
.popupRegist.popup1 .bg {
    background: #fff;
}
.MsoNormalTable {
    border-bottom: 1px solid rgb(0, 218, 187) !important;
    width: 100% !important;
}
.MsoNormalTable * {
    font-size: 12px !important;
}
.MsoNormalTable td {
    border: 0 !important;
}
.MsoNormalTable td b>span {
    font-weight: bold !important;
}
.MsoNormalTable:last-child {
    border-bottom: 0 !important;
}
.flex_last input {
    margin: 0 !important;
}

.delayTicket {
    width: 100%;
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
}
.delayTicket select {
    width: 100%;
}
.delayTicket button {
    margin-left: 5px;
    min-width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center !important;
    background: #0472FA;
    color: #fff;
    border-radius: 5px;
}