.sub-wrap .badge-wrap {
  display: block; 
  white-space: nowrap; 
  max-width: 100%; 
  overflow-x: auto; 
  overflow-y: hidden; 
  margin-top: 30px; 
  /* margin-bottom: 26px; */
  margin-right: 0; 
}

.sub-wrap .badge-wrap .badge {
  display: inline-block; 
  height: 39px; 
  font-size: 14.5px; 
  border-color: #e2e2e3; 
}

.sub-wrap .badge-wrap .badge.on {
  border-color: #e2e2e3; 
}

.sub-wrap .badge-wrap .badge+.badge {
  margin-left: 6px; 
}


.badge-sm-wrap .badge-sm {
  display: inline-block; 
  vertical-align: middle; 
  border-radius: 4px; 
  background-color: #fff; 
  padding: 0 14px; 
  height: 25px; 
  line-height: 23px; 
}

.badge-sm-wrap .badge-sm+.badge-sm {
  margin-left: 2px; 
}

.badge-sm-wrap .badge-sm.free {
  border: 1px solid #3171e7; 
  color: #3171e7; 
}

.badge-sm-wrap .badge-sm.live {
  border: 1px solid #00b9ca; 
  color: #00b9ca; 
}

.badge-sm-wrap .badge-sm.hit {
  border: 1px solid #ff581e; 
  color: #ff581e; 
}


.course-detail .course {
  display: flex; 
}

.course-detail .course .img {
  position: relative; 
  width: 555px; 
  height: 436px; 
  background-color: #ececec; 
  margin-right: 35px; 
}

.course-detail .course .img img {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 556px; 
  height: 436px; 
  -o-object-fit: cover; 
  object-fit: cover; 
  object-position: top; 
}

.course-detail .course .info {
  width: calc(100% - 555px - 30px); 
}

.course-detail .course .price-box {
  margin-bottom: 15px; 
  display: flex; 
  align-items: flex-end; 
  justify-content: space-between; 
}

.course-detail .course .price-box .title {
  margin-bottom: 4px; 
}

.course-detail .course .btn-wrap {
  display: flex; 
  gap: 10px; 
  align-items: center; 
  justify-content: center; 
}

.course-detail .course .btn-wrap>* {
  flex: 1; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: calc(50% - 15px); 
  height: 62px; 
  background: #fff; 
  border: 1px solid #000; 
}

.course-detail .course .btn-wrap>* span {
  font-size: 20px; 
  letter-spacing: -0.84px; 
}

.course-detail .course .btn-wrap .btn-apply {
  font-size: 20px; 
  letter-spacing: -0.84px; 
  color: #fff; 
  background-color: #0d52d0; 
  border: 1px solid #0d52d0; 
}

.course-detail .course-heading {
  display: flex; 
  justify-content: flex-end; 
  align-items: center; 
  border-bottom: 2px solid #767676; 
  padding-bottom: 20px; 
  margin-bottom: 23px; 
  flex-direction: row-reverse; 
  gap: 10px
}

.course-detail .course-heading .title {
  font-size: 20px; 
  font-weight: 500; 
  letter-spacing: -1.67px; 
  color: #2e2e2e; 
}

.course-detail .desc {
  font-family: "Malgun Gothic"; 
  font-size: 18px; 
  line-height: 28px; 
  letter-spacing: -0.76px; 
  padding-bottom: 21px; 
  border-bottom: 1px solid #c1c1c1; 
  margin-bottom: 21px; 
  display: flex; 
  flex-wrap: wrap; 
  width: 100%; 
}

.course-detail .desc .tit {
  padding-left: 14px; 
  width: 64px; 
}

.course-detail .desc .des {
  width: calc(100% - 64px); 
}

.course-detail .tab-container {
  margin: 60px 0 150px; 
}

.course-detail .tab-container .tabs {
  display: flex; 
  border-bottom: 1px solid #373737; 
  margin-bottom: 60px; 
}

.course-detail .tab-container .tabs .item {
  position: relative; 
  width: 25%; 
  border-top: 1px solid #e2e2e3; 
  border-right: 1px solid #e2e2e3; 
}

.course-detail .tab-container .tabs .item:first-child {
  border-left: 1px solid #e2e2e3; 
}

.course-detail .tab-container .tabs .item a {
  width: 100%; 
  height: 60px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 13px 0; 
  font-family: "Malgun Gothic"; 
  font-size: 18px; 
  line-height: 58px; 
  letter-spacing: -1.12px; 
  color: #ababab; 
}

.course-detail .tab-container .tabs .item.on {
  border-top: 1px solid #373737; 
}

.course-detail .tab-container .tabs .item.on a {
  color: #000; 
}

.course-detail .tab-container .tabs .item.on::after {
  content: ''; 
  position: absolute; 
  bottom: 0; 
  width: 1px; 
  height: 100%; 
  left: 0; 
  top: 0; 
  background-color: #373737; 
}

.course-detail .tab-container .tabs .item.on:first-child::after {
  left: -1px; 
}

.course-detail .tab-container .tabs .item.on::before {
  content: ''; 
  position: absolute; 
  bottom: 0; 
  width: 1px; 
  height: 100%; 
  right: 0; 
  top: 0; 
  background-color: #373737; 
}

.course-detail .table {
  border-top: 2px solid #333333; 
}

.course-detail .table .row {
  display: flex; 
  border-bottom: 1px solid #e2e2e3; 
}

.course-detail .table .row * {
  padding: 20px 33px 20px 33px; 
}

.course-detail .table .row .col-title {
  width: 252px; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: #f9f9f9; 
  border-right: 1px solid #e2e2e3; 
  font-family: "Malgun Gothic"; 
  font-size: 18px; 
  letter-spacing: -1.12px; 
}

.course-detail .table .row .col-desc {
  width: calc(100% - 252px); 
  display: flex; 
  align-items: center; 
  font-family: "Malgun Gothic"; 
  font-size: 16px; 
  line-height: 1.5; 
  letter-spacing: -0.99px; 
}

.course-detail .table.table-sm .row * {
  padding: 13.5px 33px; 
}

.course-detail .table.table-sm .row .col-title {
  width: 222px; 
  line-height: 17px; 
}

.course-detail .table.table-sm .row .col-desc {
  width: calc(100% - 222px); 
  font-size: 18px; 
  letter-spacing: -1.12px; 
}

.course-detail .table .row .col-desc.editTable {
  display: inline-block; 
  line-height: 1.2; 
}

.course-detail .table .row .col-desc.editTable p {
  padding: 0px
}

.course-detail .table .row .col-desc.editTable span {
  padding: 0px
}

.course-detail .table .row .col-desc.editTable b {
  padding: 0px
}

.course-detail .table .row .col-desc.editTable u {
  padding: 0px
}

.course-detail .table .row .col-desc.editTable p img {
  max-width: 100%; 
}

.course-detail .detail-item {
  display: flex; 
}

.course-detail .detail-item+.detail-item {
  margin-top: 52px; 
}

.course-detail .detail-item .img {
  width: 554px; 
  height: 486px; 
  background-color: #ececec; 
  margin-right: 34px; 
  flex: 554px 0 1; 
}

.course-detail .detail-item .img img {
  width: 100%; 
  height: 100%; 
  -o-object-fit: cover; 
  object-fit: cover; 
}

.course-detail .detail-item .table-box {
  flex: 1
}

.course-detail .detail-item .table-box .btn-wrap {
  margin-top: 82px; 
}

.course-detail .detail-item .table-box .btn-detail {
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 263px; 
  height: 62px; 
  border: 1px solid #e2e2e3; 
  font-size: 20px; 
  letter-spacing: -0.84px; 
}

.course-detail .detail-item .table-box .btn-detail .ico {
  margin-right: 23px; 
}

.course-detail .color-blue {
  color: #1f31f8 !important; 
}

.course-detail .v-table {
  border-top: 2px solid #333; 
}

.course-detail .v-table table {
  width: 100%; 
}

.course-detail .v-table table th {
  background-color: #f9f9f9; 
}

.course-detail .v-table table th,
.course-detail .v-table table td {
  padding: 14px 0 17px; 
  border-right: 1px solid #e2e2e3; 
  border-bottom: 1px solid #e2e2e3; 
  text-align: center; 
  font-family: "Malgun Gothic"; 
  font-weight: 400; 
  font-size: 18px; 
  letter-spacing: -0.45px; 
}

.course-detail .v-table table th:last-child,
.course-detail .v-table table td:last-child {
  border-right: 0; 
}

.course-detail .v-table table th.align-left,
.course-detail .v-table table td.align-left {
  padding-left: 100px; 
}

.course-detail .course-review>.heading {
  margin-bottom: 17px; 
}

.course-detail .course-review>.heading .title {
  font-size: 27px; 
  font-weight: 500; 
  letter-spacing: -1.13px; 
  line-height: 27px; 
}

.course-detail .course-review>.heading .sorting {
  display: flex; 
  width: 100%; 
  justify-content: flex-end; 
}

.course-detail .course-review>.heading .sorting ul {
  display: flex; 
}

.course-detail .course-review>.heading .sorting ul li {
  position: relative; 
}

.course-detail .course-review>.heading .sorting ul li a {
  font-family: "Malgun Gothic"; 
  font-size: 15px; 
  line-height: 15px; 
  color: #ababab; 
}

.course-detail .course-review>.heading .sorting ul li.on a {
  color: #2d2d2d; 
}

.course-detail .course-review>.heading .sorting ul li+li {
  margin-left: 14px; 
}

.course-detail .course-review>.heading .sorting ul li+li::before {
  content: '|'; 
  position: absolute; 
  left: -10px; 
  top: 50%; 
  transform: translateY(-50%); 
}

.course-detail .course-review .star-box {
  width: 88px; 
  height: 16px; 
  background-image: url(/ee/assets/img/common/star-grey.png); 
  background-size: 88px 16px; 
  background-repeat: no-repeat; 
}

.course-detail .course-review .star-box .stars {
  width: 88px; 
  height: 16px; 
  background-size: 88px 16px; 
  background-repeat: no-repeat; 
  background-image: url(/ee/assets/img/common/stars.png); 
}

.course-detail .course-review .rating {
  display: flex; 
  width: 100%; 
  height: 226px; 
  border-top: 2px solid #333; 
  background-color: #f9f9f9; 
  margin-bottom: 40px; 
}

.course-detail .course-review .rating .total {
  position: relative; 
  text-align: center; 
  width: 385px; 
  padding-left: 120px; 
  padding-top: 44px; 
}

.course-detail .course-review .rating .total::after {
  content: ''; 
  position: absolute; 
  width: 1px; 
  height: 120px; 
  top: 58px; 
  right: 0; 
  background-color: #e2e2e3; 
}

.course-detail .course-review .rating .total .value {
  font-size: 75px; 
  font-weight: bold; 
  letter-spacing: -3.15px; 
}

.course-detail .course-review .rating .total .star-box {
  margin: 0 auto 12px; 
}

.course-detail .course-review .rating .total .review {
  font-size: 15px; 
}

.course-detail .course-review .rating .bar-wrap {
  width: calc(100% - 385px); 
  padding-top: 49px; 
  padding-left: 86px; 
}

.course-detail .course-review .rating .bar-wrap .item {
  display: flex; 
  align-items: center; 
}

.course-detail .course-review .rating .bar-wrap .item+.item {
  margin-top: 12px; 
}

.course-detail .course-review .rating .bar-wrap .item .tit {
  font-family: "Malgun Gothic"; 
  font-size: 15px; 
  color: #797979; 
  margin-right: 19px; 
}

.course-detail .course-review .rating .bar-wrap .item .bar {
  width: 344px; 
  height: 16px; 
  background-color: #e2e2e3; 
  position: relative; 
}

.course-detail .course-review .rating .bar-wrap .item .bar span {
  content: ''; 
  position: absolute; 
  height: 100%; 
  left: 0; 
  top: 0; 
  background-color: #ffcb02; 
}

.course-detail .course-review .rating .bar-wrap .item .val {
  width: 74px; 
  font-family: "Malgun Gothic"; 
  font-size: 15px; 
  text-align: right; 
}

.course-detail .course-review .review-list .item {
  position: relative; 
  padding: 25px 44px; 
  border: 1px solid #e2e2e3; 
  font-family: "Malgun Gothic"; 
}

.course-detail .course-review .review-list .item+.item {
  margin-top: 30px; 
}

.course-detail .course-review .review-list .item .heading {
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 11px; 
}

.course-detail .course-review .review-list .item .heading .state {
  font-size: 24px; 
  font-weight: bold; 
  letter-spacing: -0.6px; 
}

.course-detail .course-review .review-list .item .heading .state.best {
  color: #2b61ff; 
}

.course-detail .course-review .review-list .item .heading .state.good {
  color: #c398e6; 
}

.course-detail .course-review .review-list .item .heading .info {
  display: flex; 
  font-size: 15px; 
  letter-spacing: -0.63px; 
  color: #797979; 
}

.course-detail .course-review .review-list .item .heading .info .nickname {
  margin-right: 19px; 
}

.course-detail .course-review .review-list .item .heading .info .star-box {
  margin-right: 10px; 
}

.course-detail .course-review .review-list .item .heading .info .score {
  margin-right: 18px; 
}

.course-detail .course-review .review-list .item .txt {
  font-size: 15px; 
  line-height: 27px; 
  letter-spacing: -0.63px; 
  color: #797979; 
}

.course-detail .course-review .review-list .item .btn-open {
  display: none; 
}

.review-list .star {
  display: flex; 
  height: 70%; 
  margin-top: 10px; 
  width: 98%; 
}

.review-list .star_select{padding: 10px 20px; height: 12%;}

.course-detail .course-review>.heading {
  margin-bottom: 17px; 
}

.course-detail .course-review>.heading .title {
  font-size: 27px; 
  font-weight: 500; 
  letter-spacing: -1.13px; 
  line-height: 27px; 
}

.course-detail .course-review>.heading .sorting {
  display: flex; 
  width: 100%; 
  justify-content: flex-end; 
}

.course-detail .course-review>.heading .sorting ul {
  display: flex; 
}

.course-detail .course-review>.heading .sorting ul li {
  position: relative; 
}

.course-detail .course-review>.heading .sorting ul li a {
  font-family: "Malgun Gothic"; 
  font-size: 15px; 
  line-height: 15px; 
  color: #ababab; 
}

.course-detail .course-review>.heading .sorting ul li.on a {
  color: #2d2d2d; 
}

.course-detail .course-review>.heading .sorting ul li+li {
  margin-left: 14px; 
}

.course-detail .course-review>.heading .sorting ul li+li::before {
  content: '|'; 
  position: absolute; 
  left: -10px; 
  top: 50%; 
  transform: translateY(-50%); 
}

.course-detail .course-review .star-box {
  width: 88px; 
  height: 16px; 
  background-image: url(/ee/assets/img/common/star-grey.png); 
  background-size: 88px 16px; 
  background-repeat: no-repeat; 
}

.course-detail .course-review .star-box .stars {
  width: 88px; 
  height: 16px; 
  background-size: 88px 16px; 
  background-repeat: no-repeat; 
  background-image: url(/ee/assets/img/common/stars.png); 
}

.course-detail .course-review .rating {
  display: flex; 
  width: 100%; 
  height: 226px; 
  border-top: 2px solid #333; 
  background-color: #f9f9f9; 
  margin-bottom: 40px; 
}

.course-detail .course-review .rating .total {
  position: relative; 
  text-align: center; 
  width: 385px; 
  padding-left: 120px; 
  padding-top: 44px; 
}

.course-detail .course-review .rating .total::after {
  content: ''; 
  position: absolute; 
  width: 1px; 
  height: 120px; 
  top: 58px; 
  right: 0; 
  background-color: #e2e2e3; 
}

.course-detail .course-review .rating .total .value {
  font-size: 75px; 
  font-weight: bold; 
  letter-spacing: -3.15px; 
}

.course-detail .course-review .rating .total .star-box {
  margin: 0 auto 12px; 
}

.course-detail .course-review .rating .total .review {
  font-size: 15px; 
}

.course-detail .course-review .rating .bar-wrap {
  width: calc(100% - 385px); 
  padding-top: 49px; 
  padding-left: 86px; 
}

.course-detail .course-review .rating .bar-wrap .item {
  display: flex; 
  align-items: center; 
  height: 20px; 
}

.course-detail .course-review .rating .bar-wrap .item+.item {
  margin-top: 12px; 
}

.course-detail .course-review .rating .bar-wrap .item .tit {
  font-family: "Malgun Gothic"; 
  font-size: 15px; 
  color: #797979; 
  margin-right: 19px; 
  margin-top: -40px; 
}

.course-detail .course-review .rating .bar-wrap .item .bar {
  width: 344px; 
  height: 16px; 
  background-color: #e2e2e3; 
  position: relative; 
}

.course-detail .course-review .rating .bar-wrap .item .bar span {
  content: ''; 
  position: absolute; 
  height: 100%; 
  left: 0; 
  top: 0; 
  background-color: #ffcb02; 
}

.course-detail .course-review .rating .bar-wrap .item .val {
  width: 74px; 
  font-family: "Malgun Gothic"; 
  font-size: 15px; 
  text-align: right; 
}

.course-detail .course-review .review-list .item {
  position: relative; 
  padding: 25px 44px; 
  border: 1px solid #e2e2e3; 
  font-family: "Malgun Gothic"; 
}

.course-detail .course-review .review-list .item+.item {
  margin-top: 30px; 
}

.course-detail .course-review .review-list .item .heading {
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 11px; 
}

.course-detail .course-review .review-list .item .heading .state {
  font-size: 24px; 
  font-weight: bold; 
  letter-spacing: -0.6px; 
}

.course-detail .course-review .review-list .item .heading .state.best {
  color: #2b61ff; 
}

.course-detail .course-review .review-list .item .heading .state.good {
  color: #c398e6; 
}

.course-detail .course-review .review-list .item .heading .info {
  display: flex; 
  font-size: 15px; 
  letter-spacing: -0.63px; 
  color: #797979; 
}

.course-detail .course-review .review-list .item .heading .info .nickname {
  margin-right: 19px; 
}

.course-detail .course-review .review-list .item .heading .info .star-box {
  margin-right: 10px; 
}

.course-detail .course-review .review-list .item .heading .info .score {
  margin-right: 18px; 
}

.course-detail .course-review .review-list .item .txt {
  font-size: 15px; 
  line-height: 27px; 
  letter-spacing: -0.63px; 
  color: #797979; 
}

.course-detail .course-review .review-list .item .btn-open {
  display: none; 
}

.course-detail * {
  font-family: 'Pretendard' !important; 
}


/*** 강의 정보 섹션 (강의명, 상세정보, 가격, 구매버튼 등이 포함된 영역) ***/
.courseInfoArea .priceBox {
  display: flex; 
  justify-content: space-between; 
  align-items: flex-end; 
  margin-bottom: 20px; 
}

.courseInfoArea .priceTit {
  font-size: 20px; 
  color: #aaa; 
}

.courseInfoArea .priceDt {
  gap: 20px; 
  display: flex; 
  align-items: flex-end; 
}

.courseInfoArea .priceDt .discount {
  font-size: 16px; 
  color: #f30000; 
}

.courseInfoArea .priceDt .realPrice {
  text-decoration: line-through; 
  color: #aaa; 
}

.courseInfoArea .priceDt .totalPrice {
  font-size: 28px; 
  font-weight: 600; 
}

.courseInfoArea .priceBox.coupon {
  margin-bottom: 10px
}

.courseInfoArea .priceBox+.couponBox {
  text-align: right; 
  margin-bottom: 20px; 
  font-size: 18px; 
  color: #10977c; 
  font-weight: 500; 
}

/* 강의 상세 페이지 하단 탭의 강좌구성 */
.class-composition {
  margin-top: 10px
}

.class-composition dt {
  margin-top: 10px; 
  background-color: #0055F9; 
  display: flex; 
  padding: 15px 0; 
}

.class-composition dt span {
  color: #fff; 
  font-size: 16px; 
  font-weight: 600; 
  flex: 1; 
  text-align: center; 
}

.class-composition dd {
  border-bottom: 1px solid #E2E2E3
}

.composition-list {
  display: flex; 
}

.composition-list span {
  color: #2D2D2D; 
  padding: 15px 0; 
  font-size: 15px; 
  font-weight: 500; 
  flex: 1; 
  text-align: center; 
}

.composition-tb {
  display: none; 
  background-color: #FAFAFA; 
  padding: 20px; 
  border-top: 1px solid #E2E2E3; 
}

.composition-tb ul div {
  background-color: #425995; 
  color: #fff; 
  font-size: 16px; 
  font-weight: 500; 
  text-align: center; 
  padding: 12px 0
}

.composition-tb li {
  display: flex; 
  background-color: #fff; 
}

.composition-tb li span {
  color: #2D2D2D; 
  font-size: 16px; 
  font-weight: 500; 
  flex: 1; 
  text-align: center; 
  padding: 12px 0; 
  border-bottom: 1px solid #E2E2E3
}

.composition-tb li.class-top {
  background-color: #EEEFF2; 
}

.composition-list .list-veiw.no_click {
  pointer-events: none; 
}

.composition-list span+span,
.composition-tb li span+span {
  border-left: 1px solid #E2E2E3
}

.class-composition-mo {
  display: none; 
}

.tabs-box .tabs_sub li.sub_tab.active, 
.tabs-box .tabs_sub li.sub_tab:hover{background: #333; 
  color: #fff; 
  font-weight: 800;}
  .btn.btn-blue.btn-sm{
    background-color: #056EED; 
    border-color: #056EED; 
    border-radius: 22.5px; 
    padding: 0 20px; 
    color: #fff; 
    border: 1px solid rgb(38, 86, 246); 
    min-width: 100px; 
    height: 35px; 
    font-size: 16px; 
    line-height: 34px; 
    display: inline-block; 
    text-align: center; 
}

.v-table table colgroup col:nth-child(1){width: 20%;}
.v-table table colgroup col:nth-child(2){width: 80%;}