* {
  margin: 0;
  padding: 0;
}
.index-page .swiper-wrap {
  padding: 14px;
}
.index-page .ar-swiper {
  height: 150px;
  background: #e6e6e6;
}
.index-page .hot-product-wrap {
  margin: 10px 0;
  background: white;
  padding: 0 15px;
  line-height: 1;
}
.index-page .hot-product-wrap .wrap-title {
  display: flex;
  align-items: center;
  height: 56px;
}
.index-page .hot-product-wrap .wrap-title .icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}
.index-page .hot-product-wrap .wrap-title .text {
  font-size: 18px;
}
.index-page .hot-product-wrap .product-list {
  display: flex;
  overflow-x: scroll;
  padding-bottom: 10px;
}
.index-page .hot-product-wrap .product-list .product-item-wrap {
  flex: none;
  width: calc((100vw - 60px) / 3);
  margin-right: 15px;
}
.index-page .hot-product-wrap .product-list .product-item-wrap:last-of-type {
  margin-right: 0;
}
.index-page .hot-product-wrap .product-list .product-item-wrap .product-item .product-image-wrap {
  height: 66px;
  background: #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 66px;
  margin: 0 auto;
}
.index-page .hot-product-wrap .product-list .product-item-wrap .product-item .product-image-wrap .product-image {
  height: 100%;
}
.index-page .hot-product-wrap .product-list .product-item-wrap .product-item .product-name {
  padding-top: 10px;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.index-page .hot-product-wrap .product-list .product-item-wrap .product-item .product-price {
  font-size: 14px;
  color: #FF5F57;
  padding-top: 8px;
}
.index-page .match-wrap {
  padding: 14px;
}
.index-page .match-wrap .ar-match {
  position: relative;
  height: 90px;
  background: linear-gradient(to right, #354143, #576165);
  border-radius: 8px;
  display: flex;
  align-items: center;
}
.index-page .match-wrap .ar-match .match-image-wrap {
  display: flex;
  align-items: flex-end;
  flex: none;
  height: 100%;
}
.index-page .match-wrap .ar-match .match-image-wrap .image {
  height: calc(100% + 18px);
}
.index-page .match-wrap .ar-match .match-content {
  color: white;
  flex: 1;
  transform: translate(-10px, 0);
}
.index-page .match-wrap .ar-match .match-content .content-title,
.index-page .match-wrap .ar-match .match-content .content-message {
  line-height: 1;
  color: white;
}
.index-page .match-wrap .ar-match .match-content .content-title {
  font-size: 18px;
  font-weight: 500;
  padding-bottom: 14px;
}
.index-page .match-wrap .ar-match .match-content .content-message {
  font-size: 12px;
}
.index-page .match-wrap .ar-match .match-button {
  padding-right: 14px;
}
.index-page .match-wrap .ar-match .match-button .to-match {
  box-sizing: border-box;
  border: none;
  outline: none;
  color: white;
  width: 104px;
  height: 34px;
  border-radius: 18px;
  font-size: 14px;
  background: #24b3c1;
}
.index-page .training-wrap {
  padding: 14px;
  background: white;
}
.index-page .training-wrap .tab-list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid #24b3c1;
  overflow-x: scroll;
}
.index-page .training-wrap .tab-list .tab-item {
  flex: none;
  width: 25%;
  font-size: 13px;
  line-height: 1;
  text-align: center;
  position: relative;
}
.index-page .training-wrap .tab-list .tab-item .shape {
  width: 100%;
  height: 34px;
  position: relative;
  z-index: 2;
}
.index-page .training-wrap .tab-list .tab-item .shape.reverse {
  transform: rotateY(180deg);
}
.index-page .training-wrap .tab-list .tab-item .shape::before {
  content: '';
  background: #f2f4f6;
  border-radius: 4px;
  top: 0;
  right: 0;
  display: block;
  position: absolute;
  width: 50%;
  height: 100%;
  transform: skewX(15deg);
  border-bottom-right-radius: 0;
}
.index-page .training-wrap .tab-list .tab-item .shape::after {
  content: '';
  background: #f2f4f6;
  border-radius: 4px;
  top: 0;
  left: 0;
  display: block;
  position: absolute;
  width: 80%;
  height: 100%;
  border-bottom-left-radius: 0;
}
.index-page .training-wrap .tab-list .tab-item .shape.active {
  z-index: 3;
}
.index-page .training-wrap .tab-list .tab-item .shape.active::after,
.index-page .training-wrap .tab-list .tab-item .shape.active::before {
  background: #24b3c1;
}
.index-page .training-wrap .tab-list .tab-item .tab-item-text {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 34px;
}
.index-page .training-wrap .tab-list .tab-item.reverse .shape {
  transform: rotateY(180deg);
}
.index-page .training-wrap .tab-list .tab-item.active {
  color: white;
  font-size: 14px;
}
.index-page .training-wrap .tab-list .tab-item.active .shape {
  z-index: 3;
}
.index-page .training-wrap .tab-list .tab-item.active .shape::after,
.index-page .training-wrap .tab-list .tab-item.active .shape::before {
  background: #24b3c1;
}
.index-page .training-wrap .links-list {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow-x: scroll;
  margin-top: 14px;
}
.index-page .training-wrap .links-list .link-item {
  font-size: 14px;
  line-height: 1;
  text-align: center;
  padding-bottom: 12px;
  position: relative;
  color: #474F62;
  margin-right: 10px;
}
.index-page .training-wrap .links-list .link-item:last-of-type {
  margin-right: 0;
}
.index-page .training-wrap .links-list .link-item::after {
  content: '';
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: transparent;
  bottom: 0;
  left: 0;
}
.index-page .training-wrap .links-list .link-item.active {
  color: #24b3c1;
}
.index-page .training-wrap .links-list .link-item.active::after {
  background: #24b3c1;
}
.index-page .training-wrap .training-template-list {
  margin-top: 14px;
}
.index-page .training-wrap .training-template-list .training-template-item {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 7px;
  position: relative;
}
.index-page .training-wrap .training-template-list .training-template-item .training-template-image {
  display: block;
  width: 100%;
}
.index-page .training-wrap .training-template-list .training-template-item .training-template-message {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.index-page .training-wrap .training-template-list .training-template-item .training-template-message .message-title,
.index-page .training-wrap .training-template-list .training-template-item .training-template-message .message-content {
  line-height: 1;
  font-weight: normal;
  color: white;
}
.index-page .training-wrap .training-template-list .training-template-item .training-template-message .message-title {
  font-size: 20px;
  font-weight: 500;
}
.index-page .training-wrap .training-template-list .training-template-item .training-template-message .message-content {
  padding-top: 14px;
  font-size: 12px;
}
.index-page .training-wrap .training-template-list .training-template-item:last-of-type {
  margin-bottom: 0px;
}
.lesson-page {
  box-sizing: border-box;
}
.lesson-page .type4-content {
  box-sizing: border-box;
  padding: 15px;
}
.lesson-page .type4-content img,
.lesson-page .type4-content video {
  display: block;
  width: 100%;
  height: auto;
}
.lesson-page .type4-content * {
  margin: 0;
  padding: 0;
}
.lesson-page .type4-content p {
  font-size: 14px;
  padding: 8px 0;
}
.lesson-page .type4-content ul,
.lesson-page .type4-content ol {
  list-style-position: inside;
}
.lesson-page .type4-content video {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  background-color: black;
}
.lesson-page .video-wrap {
  min-height: 200px;
  background: #e6e6e6;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.lesson-page .video-wrap .play-button {
  width: 40px;
  height: 40px;
  position: absolute;
}
.lesson-page .video-wrap video {
  width: 100%;
}
.lesson-page .video-wrap img {
  width: 100%;
  flex: none;
}
.lesson-page .lesson-detail {
  padding: 20px 14px;
  background: white;
}
.lesson-page .lesson-detail .lesson-section {
  margin-bottom: 30px;
}
.lesson-page .lesson-detail .lesson-section .lesson-title {
  line-height: 1;
  font-size: 22px;
  padding-bottom: 20px;
  color: #1D1E1F;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}
.lesson-page .lesson-detail .lesson-section .lesson-title .collection-button {
  position: absolute;
  right: 0;
  top: 0;
}
.lesson-page .lesson-detail .lesson-section .lesson-title .collection-button img {
  display: block;
  width: 14px;
  margin: 0 auto;
}
.lesson-page .lesson-detail .lesson-section .lesson-title .collection-button p {
  line-height: 1;
  font-size: 12px;
  text-align: center;
  margin-top: 6px;
}
.lesson-page .lesson-detail .lesson-section .lesson-title-small {
  font-size: 14px;
  padding-bottom: 20px;
  font-weight: normal;
  color: #474F62;
}
.lesson-page .lesson-detail .lesson-section .lesson-title-short {
  color: #636363;
  font-size: 14px;
}
.lesson-page .lesson-detail .lesson-section .lesson-content {
  border-radius: 4px;
  background: #fdfbfc;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.lesson-page .lesson-detail .lesson-section .lesson-content .content-item {
  padding: 15px 0;
}
.lesson-page .lesson-detail .lesson-section .lesson-content .content-item .content-title {
  line-height: 1;
  font-size: 13px;
  color: #1D1E1F;
  font-weight: normal;
  padding-bottom: 14px;
}
.lesson-page .lesson-detail .lesson-section .lesson-content .content-item .content-message {
  line-height: 1;
  display: flex;
  align-items: baseline;
}
.lesson-page .lesson-detail .lesson-section .lesson-content .content-item .content-message .count {
  font-size: 22px;
  color: #24B3C1;
  font-weight: bold;
  padding-right: 4px;
}
.lesson-page .lesson-detail .lesson-section .lesson-content .content-item .content-message .text {
  font-size: 12px;
  color: #797979;
}
.lesson-page .lesson-detail .lesson-intro .intro-title {
  font-size: 16px;
  font-weight: normal;
  line-height: 1;
  display: flex;
  position: relative;
  align-items: center;
  margin-bottom: 14px;
}
.lesson-page .lesson-detail .lesson-intro .intro-title .title-text {
  transform: translate(10px, 0);
}
.lesson-page .lesson-detail .lesson-intro .intro-title::before {
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  height: 13px;
  background: black;
  border-radius: 1px;
}
.lesson-page .lesson-detail .lesson-intro .intro-content {
  font-size: 14px;
  color: black;
  line-height: 24px;
  overflow-x: scroll;
}
.lesson-page .lesson-detail .lesson-intro .intro-content img,
.lesson-page .lesson-detail .lesson-intro .intro-content video {
  display: block;
  margin: 0 auto;
}
.lesson-page .lesson-detail .lesson-intro .intro-content ul,
.lesson-page .lesson-detail .lesson-intro .intro-content ol {
  list-style-position: inside;
}
.lesson-page .lesson-content-section {
  margin-top: 14px;
  padding: 20px 14px;
  background: white;
}
.lesson-page .lesson-content-section .lesson-title {
  font-size: 16px;
  font-weight: normal;
  line-height: 1;
  display: flex;
  position: relative;
  align-items: center;
  margin-bottom: 14px;
  justify-content: space-between;
}
.lesson-page .lesson-content-section .lesson-title .title-text {
  transform: translate(10px, 0);
}
.lesson-page .lesson-content-section .lesson-title .show-all {
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  color: #24B3C1;
  opacity: 0;
}
.lesson-page .lesson-content-section .lesson-title .show-all .icon-arrow {
  height: 14px;
  margin-left: 10px;
}
.lesson-page .lesson-content-section .lesson-title::before {
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  height: 13px;
  background: black;
  border-radius: 1px;
}
.lesson-page .lesson-content-section .lesson-action-list {
  width: 100%;
  overflow-x: scroll;
  display: flex;
  margin-top: 20px;
}
.lesson-page .lesson-content-section .lesson-action-list .lesson-action-item {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: #fafafa;
  height: 50px;
  padding: 0 20px;
  margin-right: 12px;
}
.lesson-page .lesson-content-section .lesson-action-list .lesson-action-item:last-of-type {
  margin-right: 0;
}
.lesson-page .lesson-content-section .lesson-video-list {
  width: 100%;
  overflow-x: scroll;
  display: flex;
  margin-top: 20px;
}
.lesson-page .lesson-content-section .lesson-video-list .lesson-video-item {
  margin-right: 12px;
}
.lesson-page .lesson-content-section .lesson-video-list .lesson-video-item:last-of-type {
  margin-right: 0;
}
.lesson-page .lesson-content-section .lesson-video-list .lesson-video-item .video-bg {
  width: 134px;
  height: 80px;
  background: #e6e6e6;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lesson-page .lesson-content-section .lesson-video-list .lesson-video-item .video-bg img {
  height: 100%;
}
.lesson-page .lesson-content-section .lesson-video-list .lesson-video-item .video-title {
  line-height: 1;
  height: 13px;
  font-size: 13px;
  color: #636363;
  margin-top: 10px;
  width: 130px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.lesson-page .lesson-intro-section {
  padding: 20px 14px;
  background: white;
  margin-top: 14px;
}
.lesson-page .lesson-intro-section .lesson-title {
  font-size: 16px;
  font-weight: normal;
  line-height: 1;
  display: flex;
  position: relative;
  align-items: center;
  margin-bottom: 14px;
  justify-content: space-between;
}
.lesson-page .lesson-intro-section .lesson-title .title-text {
  transform: translate(10px, 0);
}
.lesson-page .lesson-intro-section .lesson-title .show-all {
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  color: #24B3C1;
  opacity: 0;
}
.lesson-page .lesson-intro-section .lesson-title .show-all .icon-arrow {
  height: 14px;
  margin-left: 10px;
}
.lesson-page .lesson-intro-section .lesson-title::before {
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  height: 13px;
  background: black;
  border-radius: 1px;
}
.lesson-page .lesson-intro-section .training-template-list .training-template-item {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 7px;
  position: relative;
}
.lesson-page .lesson-intro-section .training-template-list .training-template-item .training-template-image {
  display: block;
  width: 100%;
}
.lesson-page .lesson-intro-section .training-template-list .training-template-item .training-template-message {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lesson-page .lesson-intro-section .training-template-list .training-template-item .training-template-message .message-title,
.lesson-page .lesson-intro-section .training-template-list .training-template-item .training-template-message .message-content {
  line-height: 1;
  font-weight: normal;
  color: white;
}
.lesson-page .lesson-intro-section .training-template-list .training-template-item .training-template-message .message-title {
  font-size: 20px;
  font-weight: 500;
}
.lesson-page .lesson-intro-section .training-template-list .training-template-item .training-template-message .message-content {
  padding-top: 14px;
  font-size: 12px;
}
.lesson-page .lesson-intro-section .training-template-list .training-template-item:last-of-type {
  margin-bottom: 0px;
}
.lesson-page .lesson-intro-section .moment-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.lesson-page .lesson-intro-section .moment-list .moment-item-wrap {
  flex: none;
  width: calc((100vw - 28px) / 3);
  box-sizing: border-box;
  padding-top: 12px;
}
.lesson-page .lesson-intro-section .moment-list .moment-item-wrap:nth-of-type(3n+1) {
  padding-right: 8px;
}
.lesson-page .lesson-intro-section .moment-list .moment-item-wrap:nth-of-type(3n+2) {
  padding: 12px 4px 0;
}
.lesson-page .lesson-intro-section .moment-list .moment-item-wrap:nth-of-type(3n+3) {
  padding-left: 8px;
}
.lesson-page .lesson-intro-section .moment-list .moment-item-wrap:nth-of-type(1),
.lesson-page .lesson-intro-section .moment-list .moment-item-wrap:nth-of-type(2),
.lesson-page .lesson-intro-section .moment-list .moment-item-wrap:nth-of-type(3) {
  padding-top: 0;
}
.lesson-page .lesson-intro-section .moment-list .moment-item-wrap .moment-item {
  background: white;
  height: 100%;
  width: calc((100vw - 28px) / 3 - 8px);
  height: calc((100vw - 28px) / 3 - 8px);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lesson-page .lesson-intro-section .moment-list .moment-item-wrap .moment-item img {
  height: 100%;
}
.lesson-page .purchase-now {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 70px;
  width: 100%;
  background: #24B3C1;
  color: white;
  box-sizing: border-box;
  border: none;
  outline: none;
  font-size: 18px;
  padding-bottom: 15px;
}
.lesson-page .purchase-now-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  background: #24B3C1;
}
.lesson-page .purchase-now-wrap .line {
  flex: none;
  width: 1px;
  height: 70px;
  background: white;
  padding-bottom: 15px;
}
.lesson-page .purchase-now-wrap button {
  flex: 1;
  background: #24B3C1;
  color: white;
  box-sizing: border-box;
  border: none;
  outline: none;
  font-size: 14px;
  height: 70px;
  padding-bottom: 15px;
}
.lesson-page .select-store-wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.3);
  overflow-y: scroll;
}
.lesson-page .select-store-wrap .select-store,
.lesson-page .select-store-wrap .select-teacher {
  flex: 1;
  background: white;
  padding: 25px 18px;
  box-sizing: border-box;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.lesson-page .select-store-wrap .select-store > p.title,
.lesson-page .select-store-wrap .select-teacher > p.title {
  font-size: 20px;
  line-height: 1;
  padding-bottom: 40px;
  text-align: center;
}
.lesson-page .select-store-wrap .select-store .button-wrap,
.lesson-page .select-store-wrap .select-teacher .button-wrap {
  padding: 25px 10px 0;
}
.lesson-page .select-store-wrap .select-store .button-wrap button,
.lesson-page .select-store-wrap .select-teacher .button-wrap button {
  display: block;
  background: #24B3C1;
  color: white;
  border: none;
  outline: none;
  width: 100%;
  height: 50px;
  border-radius: 50px;
}
.lesson-page .select-store-wrap .select-store .store-list {
  height: 40vw;
  overflow-y: scroll;
}
.lesson-page .select-store-wrap .select-store .store-list .store-item {
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #F2EEEF;
}
.lesson-page .select-store-wrap .select-store .store-list .store-item img {
  width: 36px;
  height: 36px;
}
.lesson-page .select-store-wrap .select-store .store-list .store-item .store-title {
  line-height: 1;
  font-size: 15px;
}
.lesson-page .select-store-wrap .select-teacher .teacher-list {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  height: 40vw;
}
.lesson-page .select-store-wrap .select-teacher .teacher-list .teacher-item {
  flex: none;
  width: calc(100% / 3);
  box-sizing: border-box;
}
.lesson-page .select-store-wrap .select-teacher .teacher-list .teacher-item .item-content {
  height: 34px;
  box-sizing: border-box;
  border: 1px solid #474F62;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #323232;
  border-radius: 4px;
  margin-top: 12px;
}
.lesson-page .select-store-wrap .select-teacher .teacher-list .teacher-item .item-content.active {
  background: #474F62;
  color: white;
}
.lesson-page .select-store-wrap .select-teacher .teacher-list .teacher-item:nth-of-type(1) .item-content,
.lesson-page .select-store-wrap .select-teacher .teacher-list .teacher-item:nth-of-type(2) .item-content,
.lesson-page .select-store-wrap .select-teacher .teacher-list .teacher-item:nth-of-type(3) .item-content {
  margin-top: 0;
}
.lesson-page .select-store-wrap .select-teacher .teacher-list .teacher-item:nth-of-type(3n+1) {
  padding-right: 6px;
}
.lesson-page .select-store-wrap .select-teacher .teacher-list .teacher-item:nth-of-type(3n+2) {
  padding: 0 3px;
}
.lesson-page .select-store-wrap .select-teacher .teacher-list .teacher-item:nth-of-type(3n+3) {
  padding-left: 6px;
}
.lesson-page .send-pyq-wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.lesson-page .send-pyq-wrap .button-item:first-of-type {
  margin-bottom: 30px;
}
.lesson-page .send-pyq-wrap .button-item img {
  display: block;
  width: 120px;
  margin: 0 auto;
}
.lesson-page .send-pyq-wrap .button-item p {
  text-align: center;
  color: white;
  line-height: 1;
  font-size: 18px;
}
.richtext-modal {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}
.richtext-modal .richtext-content-wrap {
  flex: 1;
  margin: 0 30px;
  padding: 15px;
  background: white;
  border-radius: 8px;
  height: 50vh;
  overflow-y: scroll;
}
.richtext-modal .richtext-content-wrap img,
.richtext-modal .richtext-content-wrap video {
  display: block;
  margin: 0 auto;
}
.richtext-modal .richtext-content-wrap ul,
.richtext-modal .richtext-content-wrap ol {
  list-style-position: inside;
}
.lesson-page .lesson-detail .lesson-section.no-margin {
  margin-bottom: 0;
}
.lesson-page .lesson-detail .lesson-section .lesson-message-list .lesson-message-item {
  padding: 10px 0;
}
.lesson-page .lesson-detail .lesson-section .lesson-message-list .lesson-message-item .item-title {
  font-size: 16px;
  font-weight: normal;
  line-height: 1;
  display: flex;
  position: relative;
  align-items: center;
  margin-bottom: 14px;
  justify-content: space-between;
}
.lesson-page .lesson-detail .lesson-section .lesson-message-list .lesson-message-item .item-title .title-text {
  transform: translate(10px, 0);
}
.lesson-page .lesson-detail .lesson-section .lesson-message-list .lesson-message-item .item-title .show-all {
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  color: #24B3C1;
  opacity: 0;
}
.lesson-page .lesson-detail .lesson-section .lesson-message-list .lesson-message-item .item-title .show-all .icon-arrow {
  height: 14px;
  margin-left: 10px;
}
.lesson-page .lesson-detail .lesson-section .lesson-message-list .lesson-message-item .item-title::before {
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  height: 13px;
  background: black;
  border-radius: 1px;
}
.lesson-page .lesson-detail .lesson-section .lesson-message-list .lesson-message-item .item-ul {
  padding: 0 10px;
}
.lesson-page .lesson-detail .lesson-section .lesson-message-list .lesson-message-item .item-ul .item-li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}
.lesson-page .lesson-detail .lesson-section .lesson-message-list .lesson-message-item .item-ul .item-li .image {
  height: 200px;
  background: #dcdcdc;
  width: 100%;
}
.lesson-page .lesson-detail .lesson-section .lesson-message-list .lesson-message-item .item-ul .item-li .li-icon {
  flex: none;
  width: 4px;
  height: 22px;
  display: flex;
  align-items: center;
  position: relative;
  margin-right: 10px;
}
.lesson-page .lesson-detail .lesson-section .lesson-message-list .lesson-message-item .item-ul .item-li .li-icon::after {
  content: '';
  width: 4px;
  height: 4px;
  background: #24B3C1;
}
.lesson-page .lesson-detail .lesson-section .lesson-message-list .lesson-message-item .item-ul .item-li .li-content {
  color: #474F62;
  font-size: 14px;
  line-height: 22px;
}
.lesson-page .lesson-detail .lesson-section .lesson-message-list .lesson-message-item .item-ul .item-li .li-text-icon {
  flex: none;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
.lesson-page .lesson-detail .lesson-section .lesson-message-list .lesson-message-item .item-ul .item-li .li-text-icon .text-icon {
  font-size: 12px;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 2px;
}
.lesson-page .lesson-detail .lesson-section .lesson-message-list .lesson-message-item .item-ul .item-li .li-text-icon .text-icon.error {
  background: #fddde1;
  color: #FF2C1F;
}
.lesson-page .lesson-detail .lesson-section .lesson-message-list .lesson-message-item .item-ul .item-li .li-text-icon .text-icon.success {
  background: #cfedf6;
  color: #24B3C1;
}
.pyq-page .menu-nav-list {
  display: flex;
  background: white;
  padding: 0 50px;
  justify-content: space-between;
}
.pyq-page .menu-nav-list .menu-nav-item {
  line-height: 50px;
  font-size: 14px;
  color: #797979;
  position: relative;
}
.pyq-page .menu-nav-list .menu-nav-item::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background: transparent;
  bottom: 0;
  left: 0;
}
.pyq-page .menu-nav-list .menu-nav-item.active {
  font-size: 18px;
  color: #24B3C1;
}
.pyq-page .menu-nav-list .menu-nav-item.active::after {
  background: #24B3C1;
}
.pyq-page .article-item-list .article-item {
  background: white;
  margin: 14px;
  padding: 16px;
}
.pyq-page .article-item-list .article-item .article-header {
  display: flex;
  align-items: center;
}
.pyq-page .article-item-list .article-item .article-header .header-image {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  overflow: hidden;
  background: #c8c8c8;
  margin-right: 14px;
}
.pyq-page .article-item-list .article-item .article-header .header-image .image {
  display: block;
  width: 100%;
  height: 100%;
}
.pyq-page .article-item-list .article-item .article-header .header-content .user-name {
  line-height: 1;
  font-size: 15px;
}
.pyq-page .article-item-list .article-item .article-header .header-content .address-wrap {
  margin-top: 8px;
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 1;
  color: #A6A6A6;
}
.pyq-page .article-item-list .article-item .article-header .header-content .address-wrap .icon {
  width: 6px;
  margin-right: 6px;
}
.pyq-page .article-item-list .article-item .article-main {
  font-size: 14px;
  color: #5B5B5B;
}
.pyq-page .article-item-list .article-item .article-main .article-text {
  padding: 14px 0;
}
.pyq-page .article-item-list .article-item .article-main .article-image-list {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 6.5px;
}
.pyq-page .article-item-list .article-item .article-main .article-image-list .article-image {
  box-sizing: border-box;
  width: calc(100% / 3);
  height: calc((100vw - 60px) / 3 - 5px);
  margin-bottom: 7.5px;
}
.pyq-page .article-item-list .article-item .article-main .article-image-list .article-image .image-wrap {
  width: 100%;
  height: 100%;
  background: #8c8c8c;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
}
.pyq-page .article-item-list .article-item .article-main .article-image-list .article-image:nth-of-type(3n+1) {
  padding-right: 5px;
}
.pyq-page .article-item-list .article-item .article-main .article-image-list .article-image:nth-of-type(3n+2) {
  padding: 0 2.5px;
}
.pyq-page .article-item-list .article-item .article-main .article-image-list .article-image:nth-of-type(3n+3) {
  padding-left: 5px;
}
.pyq-page .article-item-list .article-item .article-main .lesson-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  background: #FAFAFA;
  padding: 0 14px 0 20px;
  margin-bottom: 18px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}
.pyq-page .article-item-list .article-item .article-main .lesson-message::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: #24B3C1;
}
.pyq-page .article-item-list .article-item .article-main .lesson-message .message-content {
  display: flex;
  align-items: center;
  line-height: 1;
}
.pyq-page .article-item-list .article-item .article-main .lesson-message .message-content .text,
.pyq-page .article-item-list .article-item .article-main .lesson-message .message-content .split {
  color: #1D1E1F;
}
.pyq-page .article-item-list .article-item .article-main .lesson-message .message-content .green {
  color: #24B3C1;
}
.pyq-page .article-item-list .article-item .article-main .lesson-message .message-content .split {
  margin: 0 5px;
}
.pyq-page .article-item-list .article-item .article-main .lesson-message .count {
  line-height: 1;
  color: #474F62;
  font-size: 12px;
}
.pyq-page .article-item-list .article-item .article-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.pyq-page .article-item-list .article-item .article-footer .footer-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 1;
  margin-left: 30px;
}
.pyq-page .article-item-list .article-item .article-footer .footer-item .icon {
  width: 12px;
  margin-right: 8px;
}
.pyq-page .submit-button {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 60px;
  height: 60px;
}
.pyq-page .submit-button .img {
  display: block;
  width: 60px;
  height: 60px;
}
.pyq-detail-page .scroll-wrap {
  height: calc(100vh - 60px);
  overflow-y: scroll;
}
.pyq-detail-page .article-item {
  background: white;
  padding: 14px 0;
  margin-bottom: 14px;
}
.pyq-detail-page .article-item .article-header {
  display: flex;
  align-items: center;
  padding: 14px 14px;
}
.pyq-detail-page .article-item .article-header .header-image {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  overflow: hidden;
  background: #c8c8c8;
  margin-right: 14px;
}
.pyq-detail-page .article-item .article-header .header-image .image {
  display: block;
  width: 100%;
  height: 100%;
}
.pyq-detail-page .article-item .article-header .header-content {
  flex: 1;
}
.pyq-detail-page .article-item .article-header .header-content .user-name {
  line-height: 1;
  font-size: 15px;
}
.pyq-detail-page .article-item .article-header .header-content .address-wrap {
  margin-top: 8px;
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 1;
  color: #A6A6A6;
}
.pyq-detail-page .article-item .article-header .header-content .address-wrap .icon {
  width: 6px;
  margin-right: 6px;
}
.pyq-detail-page .article-item .article-header .subscribe-button {
  flex: none;
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 1;
  justify-content: center;
  color: white;
  background: #24B3C1;
  height: 24px;
  border-radius: 24px;
  padding: 0 15px;
}
.pyq-detail-page .article-item .article-header .subscribe-button .icon {
  width: 8px;
  height: 8px;
  margin-right: 4px;
}
.pyq-detail-page .article-item .article-main {
  font-size: 14px;
  color: #5B5B5B;
}
.pyq-detail-page .article-item .article-main .article-text {
  padding: 14px 14px;
}
.pyq-detail-page .article-item .article-main .article-image-list {
  padding-bottom: 6.5px;
}
.pyq-detail-page .article-item .article-main .article-image-list .article-image {
  box-sizing: border-box;
  margin-bottom: 14px;
}
.pyq-detail-page .article-item .article-main .article-image-list .article-image .image-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
}
.pyq-detail-page .article-item .article-main .article-image-list .article-image .image-wrap image {
  display: block;
  width: 100%;
}
.pyq-detail-page .article-item .article-main .lesson-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  background: #FAFAFA;
  padding: 0 14px 0 20px;
  margin-bottom: 18px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}
.pyq-detail-page .article-item .article-main .lesson-message::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: #24B3C1;
}
.pyq-detail-page .article-item .article-main .lesson-message .message-content {
  display: flex;
  align-items: center;
  line-height: 1;
}
.pyq-detail-page .article-item .article-main .lesson-message .message-content .text,
.pyq-detail-page .article-item .article-main .lesson-message .message-content .split {
  color: #1D1E1F;
}
.pyq-detail-page .article-item .article-main .lesson-message .message-content .green {
  color: #24B3C1;
}
.pyq-detail-page .article-item .article-main .lesson-message .message-content .split {
  margin: 0 5px;
}
.pyq-detail-page .article-item .article-main .lesson-message .count {
  line-height: 1;
  color: #474F62;
  font-size: 12px;
}
.pyq-detail-page .article-item .article-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 14px;
}
.pyq-detail-page .article-item .article-footer .time {
  color: #C6C6C6;
  font-size: 12px;
  flex: 1;
}
.pyq-detail-page .article-item .article-footer .footer-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 1;
  margin-left: 30px;
}
.pyq-detail-page .article-item .article-footer .footer-item .icon {
  width: 12px;
  margin-right: 8px;
}
.pyq-detail-page .comment-wrap {
  background: white;
  padding: 14px;
}
.pyq-detail-page .comment-wrap .comment-wrap-header {
  color: #1D1E1F;
  font-size: 14px;
  line-height: 1;
}
.pyq-detail-page .comment-wrap .comment-list .comment-item {
  display: flex;
  align-items: flex-start;
  padding: 14px 0;
}
.pyq-detail-page .comment-wrap .comment-list .comment-item .user-avatar {
  flex: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background: #646464;
  margin-right: 8px;
}
.pyq-detail-page .comment-wrap .comment-list .comment-item .user-avatar .avatar {
  width: 100%;
  height: 100%;
}
.pyq-detail-page .comment-wrap .comment-list .comment-item .comment-content {
  border-bottom: 1px solid #F2EEEF;
  flex: 1;
}
.pyq-detail-page .comment-wrap .comment-list .comment-item .comment-content .comment-header {
  padding-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1;
  margin-bottom: 10px;
}
.pyq-detail-page .comment-wrap .comment-list .comment-item .comment-content .comment-header .name {
  font-size: 13px;
  color: #89889A;
}
.pyq-detail-page .comment-wrap .comment-list .comment-item .comment-content .comment-header .name.reply {
  display: flex;
  align-items: center;
}
.pyq-detail-page .comment-wrap .comment-list .comment-item .comment-content .comment-header .name.reply .reply-text {
  color: #24B3C1;
  margin: 0 5px;
}
.pyq-detail-page .comment-wrap .comment-list .comment-item .comment-content .comment-header .date {
  font-size: 12px;
  color: #C6C6C6;
}
.pyq-detail-page .comment-wrap .comment-list .comment-item .comment-content .comment-main {
  color: #323232;
  font-size: 14px;
  padding-bottom: 14px;
}
.pyq-detail-page .comment-wrap .comment-list .comment-item .comment-content .comment-reply .comment-item {
  background: #FBFBFB;
  padding: 14px;
  margin-bottom: 10px;
}
.pyq-detail-page .comment-wrap .comment-list .comment-item .comment-content .comment-reply .comment-item .user-avatar {
  width: 25px;
  height: 25px;
}
.pyq-detail-page .comment-wrap .comment-list .comment-item .comment-content .comment-reply .comment-item .comment-content {
  border-bottom: none;
}
.pyq-detail-page .comment-wrap .comment-list .comment-item .comment-content .comment-reply .comment-item .comment-content .comment-main {
  padding-bottom: 0;
}
.pyq-detail-page .input-wrap {
  position: fixed;
  width: 100%;
  height: 54px;
  background: white;
  left: 0;
  bottom: 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 15px;
}
.pyq-detail-page .input-wrap .input-element-wrap {
  height: 40px;
  background: #F3F3F3;
  border-radius: 40px;
  padding: 0 26px;
  width: 100%;
  display: flex;
  align-items: center;
}
.pyq-detail-page .input-wrap .input-element-wrap .icon {
  flex: none;
  width: 12px;
  height: 12px;
  margin-right: 12px;
}
.pyq-detail-page .input-wrap .input-element-wrap .input {
  flex: 1;
  height: 30px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
}
.submit-button {
  font-weight: normal;
  background: #24B3C1;
  color: white;
  margin-left: 10px;
  padding: 0;
  border-radius: 40px;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
}
.image-modal-wrap {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-modal-wrap .image {
  flex: none;
  width: 100%;
}
.commit-page .text-area-wrap .textarea {
  border: none;
  resize: none;
  display: block;
  width: 100%;
  height: 200px;
  padding: 20px;
  box-sizing: border-box;
}
.commit-page .image-list {
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
}
.commit-page .image-list .image-item {
  width: 90px;
  height: 90px;
  margin-right: 8px;
  margin-bottom: 8px;
  border-radius: 4px;
  position: relative;
}
.commit-page .image-list .image-item .delete {
  position: absolute;
  width: 30px;
  height: 30px;
  right: -12px;
  top: -12px;
}
.commit-page .image-list .image-item .delete .d-icon {
  display: block;
  width: 100%;
  height: 100%;
}
.commit-page .image-list .image-item .img {
  display: block;
  border-radius: 4px;
  width: 90px;
  height: 90px;
  background: #e6e6e6;
}
.commit-page .image-list .image-item .button {
  width: 90px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid #e1e1e1;
}
.commit-page .image-list .image-item .button .icon {
  width: 28px;
}
.commit-page .image-list .image-item .button .text {
  font-size: 12px;
  color: #1D1E1F;
  line-height: 1;
  margin-top: 8px;
}
.commit-page .lesson-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  background: #FAFAFA;
  padding: 0 14px 0 20px;
  margin-bottom: 18px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  margin: 0 15px 15px;
}
.commit-page .lesson-message::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: #24B3C1;
}
.commit-page .lesson-message .message-content {
  display: flex;
  align-items: center;
  line-height: 1;
}
.commit-page .lesson-message .message-content .text,
.commit-page .lesson-message .message-content .split {
  color: #1D1E1F;
}
.commit-page .lesson-message .message-content .green {
  color: #24B3C1;
}
.commit-page .lesson-message .message-content .split {
  margin: 0 5px;
}
.commit-page .lesson-message .count {
  line-height: 1;
  color: #474F62;
  font-size: 12px;
}
.commit-page .address-wrap {
  margin: 0 14px;
  border-radius: 28px;
  box-sizing: border-box;
  padding: 14px;
  display: inline-flex;
  align-items: center;
  height: 28px;
  width: 240px;
  background: #FAFAFA;
}
.commit-page .address-wrap .icon {
  width: 8px;
}
.commit-page .address-wrap .address {
  color: #323232;
  font-size: 12px;
  flex: 1;
  padding: 0 10px;
  box-sizing: border-box;
  line-height: 1;
}
.commit-page .address-wrap .icon-arrow {
  width: 5px;
}
.commit-page .commit-button-wrap {
  padding: 28px;
}
.commit-page .commit-button-wrap .commit-button {
  height: 50px;
  background: #24B3C1;
  color: white;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 15px;
}
.user-home-page .bg-wrap {
  background: linear-gradient(to bottom, #4e4c4c, #1d1e1f);
  padding: 18px 18px 0;
}
.user-home-page .user-info-wrap {
  display: flex;
  align-items: center;
}
.user-home-page .user-info-wrap .user-head {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 80px;
  overflow: hidden;
}
.user-home-page .user-info-wrap .user-head .img {
  width: 100%;
  height: 100%;
}
.user-home-page .user-info-wrap .user-content {
  margin-left: 16px;
}
.user-home-page .user-info-wrap .user-content .user-name {
  font-size: 20px;
  line-height: 1;
  color: white;
  padding-bottom: 16px;
  font-weight: normal;
}
.user-home-page .user-info-wrap .user-content .content-wrap {
  display: flex;
  align-items: center;
}
.user-home-page .user-info-wrap .user-content .content-wrap .icon {
  margin-right: 14px;
  background: purple;
  font-size: 12px;
  line-height: 1;
  color: white;
  padding: 2px 6px;
  background: linear-gradient(45deg, #ad85e2 0%, #9165cc 100%);
  border-radius: 8px;
}
.user-home-page .user-info-wrap .user-content .content-wrap .number {
  color: white;
  font-size: 12px;
  line-height: 1;
}
.user-home-page .user-num-wrap {
  display: flex;
  align-items: center;
  color: white;
  justify-content: center;
  padding: 20px 0;
}
.user-home-page .user-num-wrap .num-item {
  text-align: center;
}
.user-home-page .user-num-wrap .num-item:nth-of-type(2) {
  margin: 0 98px;
}
.user-home-page .user-num-wrap .num-item .num-title {
  color: #24B3C1;
  font-size: 24px;
  line-height: 1;
  padding-bottom: 13px;
}
.user-home-page .user-num-wrap .num-item .num-text {
  font-size: 13px;
  line-height: 1;
  color: white;
}
.user-home-page .task-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  background: linear-gradient(90deg, #24b3c1, #2fba96);
  padding: 12px 24px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.user-home-page .task-wrap .task-title {
  display: flex;
  align-items: center;
}
.user-home-page .task-wrap .task-title .icon {
  width: 26px;
  height: 26px;
  margin-right: 8px;
}
.user-home-page .task-wrap .task-title .title-text {
  font-size: 15px;
  color: white;
  line-height: 1;
}
.user-home-page .task-wrap .task-button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  color: #24B3C1;
  background: white;
  width: 64px;
  height: 24px;
  border-radius: 24px;
}
.user-home-page .card-list {
  padding: 18px;
  display: flex;
  flex-wrap: wrap;
}
.user-home-page .card-list .card-section,
.user-home-page .card-list .cart-item {
  width: 50%;
  padding: 18px;
  box-sizing: border-box;
}
.user-home-page .card-list .card-section .section-header {
  justify-content: space-between;
  display: flex;
  align-items: center;
  line-height: 1;
  margin-bottom: 17px;
}
.user-home-page .card-list .card-section .section-header .icon {
  height: 14px;
  width: 7px;
}
.user-home-page .card-list .card-section .section-body {
  font-size: 12px;
  line-height: 1;
}
.user-home-page .card-list .card-section .section-body.green {
  color: #24B3C1;
}
.user-home-page .card-list .card-section .section-body.gray {
  color: #C6C6C6;
}
.user-home-page .card-list .card-section .sec-section {
  margin-top: 30px;
}
.user-home-page .card-list .card-section .sec-section .sec-header {
  font-size: 13px;
  color: #797979;
  line-height: 1;
  margin-bottom: 12px;
}
.user-home-page .card-list .card-section .sec-section .sec-body {
  line-height: 1;
  display: flex;
  align-items: baseline;
}
.user-home-page .card-list .card-section .sec-section .sec-body .count {
  font-size: 26px;
  margin-right: 7px;
}
.user-home-page .card-list .card-section .sec-section .sec-body .text {
  font-size: 14px;
}
.user-home-page .new-card-list {
  padding: 18px;
  display: flex;
  justify-content: space-between;
}
.user-home-page .new-card-list .new-card-item {
  border-radius: 8px;
  width: calc(50% - 8px);
  padding: 18px;
  box-sizing: border-box;
  background: white;
  box-shadow: 0px 0px 10px 0px rgba(121, 121, 121, 0.1);
}
.user-home-page .new-card-list .new-card-item .section-header {
  justify-content: space-between;
  display: flex;
  align-items: center;
  line-height: 1;
  margin-bottom: 17px;
}
.user-home-page .new-card-list .new-card-item .section-header .icon {
  height: 14px;
  width: 7px;
}
.user-home-page .new-card-list .new-card-item .section-body {
  font-size: 12px;
  line-height: 1;
}
.user-home-page .new-card-list .new-card-item .section-body.green {
  color: #24B3C1;
}
.user-home-page .new-card-list .new-card-item .section-body.gray {
  color: #C6C6C6;
}
.user-home-page .new-card-list .new-card-item .sec-section {
  margin-top: 30px;
  position: relative;
}
.user-home-page .new-card-list .new-card-item .sec-section .body {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 13px;
  color: #24B3C1;
}
.user-home-page .new-card-list .new-card-item .sec-section .sec-header {
  font-size: 13px;
  color: #797979;
  line-height: 1;
  margin-bottom: 12px;
}
.user-home-page .new-card-list .new-card-item .sec-section .sec-body {
  line-height: 1;
  display: flex;
  align-items: baseline;
}
.user-home-page .new-card-list .new-card-item .sec-section .sec-body .count {
  font-size: 26px;
  margin-right: 7px;
}
.user-home-page .new-card-list .new-card-item .sec-section .sec-body .text {
  font-size: 14px;
}
.user-home-page .menu-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 18px;
}
.user-home-page .menu-list .menu-item {
  all: unset;
  display: block;
  width: 25%;
  margin-bottom: 20px;
}
.user-home-page .menu-list .menu-item .menu-icon {
  width: 27px;
  height: 27px;
  display: block;
  margin: 0 auto;
}
.user-home-page .menu-list .menu-item .menu-title {
  text-align: center;
  font-size: 14px;
  line-height: 1;
  display: block;
  margin-top: 12px;
  color: #323232;
}
.user-lesson-page {
  overflow-y: scroll !important;
}
.user-lesson-page .lesson-list {
  margin: 15px;
}
.user-lesson-page .lesson-list .training-template-item {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 7px;
  position: relative;
}
.user-lesson-page .lesson-list .training-template-item .training-template-image {
  display: block;
  width: 100%;
}
.user-lesson-page .lesson-list .training-template-item .training-template-message {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.user-lesson-page .lesson-list .training-template-item .training-template-message .message-title,
.user-lesson-page .lesson-list .training-template-item .training-template-message .message-content {
  line-height: 1;
  font-weight: normal;
  color: white;
}
.user-lesson-page .lesson-list .training-template-item .training-template-message .message-title {
  font-size: 20px;
  font-weight: 500;
}
.user-lesson-page .lesson-list .training-template-item .training-template-message .message-content {
  padding-top: 14px;
  font-size: 12px;
}
.user-lesson-page .lesson-list .training-template-item:last-of-type {
  margin-bottom: 0px;
}
.user-collage-page .link-container {
  overflow-x: scroll;
}
.user-collage-page .link-wrap {
  display: flex;
  flex-wrap: nowrap;
}
.user-collage-page .link-wrap .link-item {
  line-height: 50px;
  font-size: 14px;
  color: #797979;
  position: relative;
  margin: 0 15px;
  flex: none;
}
.user-collage-page .link-wrap .link-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
}
.user-collage-page .link-wrap .link-item.active {
  color: #24B3C1;
  font-size: 16px;
}
.user-collage-page .link-wrap .link-item.active::after {
  background: #24B3C1;
}
.user-collage-page .lesson-list {
  padding: 15px;
  box-sizing: border-box;
  height: calc(100vh - 50px);
  overflow-y: scroll;
}
.user-collage-page .lesson-list .training-template-item {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 7px;
  position: relative;
}
.user-collage-page .lesson-list .training-template-item .training-template-image {
  display: block;
  width: 100%;
}
.user-collage-page .lesson-list .training-template-item .training-template-message {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.user-collage-page .lesson-list .training-template-item .training-template-message .message-title,
.user-collage-page .lesson-list .training-template-item .training-template-message .message-content {
  line-height: 1;
  font-weight: normal;
  color: white;
}
.user-collage-page .lesson-list .training-template-item .training-template-message .message-title {
  font-size: 20px;
  font-weight: 500;
}
.user-collage-page .lesson-list .training-template-item .training-template-message .message-content {
  padding-top: 14px;
  font-size: 12px;
}
.user-collage-page .lesson-list .training-template-item:last-of-type {
  margin-bottom: 0px;
}
.payment-page .payment-title-wrap {
  background: white;
  padding: 27px 0 24px;
}
.payment-page .payment-title-wrap .s,
.payment-page .payment-title-wrap .l {
  line-height: 1;
  text-align: center;
}
.payment-page .payment-title-wrap .s {
  font-size: 16px;
  color: #24B3C1;
  padding-bottom: 17px;
}
.payment-page .payment-title-wrap .l {
  font-size: 22px;
}
.payment-page .payment-message-list {
  margin-top: 14px;
  padding: 0 15px;
  background: white;
}
.payment-page .payment-message-list .payment-message-item {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #fafafa;
}
.payment-page .payment-message-list .payment-message-item .title {
  font-size: 14px;
  color: #323232;
  line-height: 1;
}
.payment-page .payment-message-list .payment-message-item input {
  text-align: right;
  border: none;
  outline: none;
  font-size: 13px;
}
.payment-page .payment-message-list .payment-message-item .body {
  color: #1D1E1F;
  font-size: 13px;
  display: flex;
  align-items: center;
  line-height: 1;
}
.payment-page .payment-message-list .payment-message-item .body.green {
  color: #24B3C1;
}
.payment-page .payment-message-list .payment-message-item .body .icon {
  height: 14px;
  margin-left: 8px;
}
.payment-page .payment-message-list .payment-message-item:last-of-type {
  border-bottom: none;
}
.payment-page .selector {
  padding: 16px;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #797979;
}
.payment-page .selector .icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 12px;
}
.payment-page .selector .icon-wrap .icon {
  flex: none;
  width: 40px;
  height: 40px;
}
.payment-page .submit-wrap {
  padding: 20px 30px;
}
.payment-page .submit-wrap .submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: white;
  background: #24B3C1;
  height: 50px;
  border-radius: 50px;
  font-size: 14px;
}
.help-page .help-list {
  margin: 0 15px;
}
.help-page .help-list section.help-section {
  background: white;
  padding: 15px;
  border-radius: 8px;
  margin: 15px 0;
}
.help-page .help-list section.help-section .help-title {
  font-size: 15px;
  line-height: 1;
  padding: 16px 0;
  border-bottom: 1px solid #F2EEEF;
  position: relative;
  display: flex;
  align-items: center;
}
.help-page .help-list section.help-section .help-title span {
  padding-left: 15px;
}
.help-page .help-list section.help-section .help-title::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  position: absolute;
  background: #24B3C1;
  left: 0;
}
.help-page .help-list section.help-section .help-body {
  padding-top: 16px;
  font-size: 14px;
  line-height: 22px;
  color: #323232;
}
.ticket-page .tab-list {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}
.ticket-page .tab-list .tab-item {
  font-size: 14px;
  color: #797979;
  position: relative;
  line-height: 48px;
  margin: 0 35px;
}
.ticket-page .tab-list .tab-item::after {
  content: '';
  display: block;
  height: 3px;
  position: absolute;
  width: 80%;
  left: 10%;
  bottom: 0;
}
.ticket-page .tab-list .tab-item.active {
  color: #24B3C1;
  font-size: 16px;
  font-weight: bold;
}
.ticket-page .tab-list .tab-item.active::after {
  background: #24B3C1;
}
.ticket-page .scroll {
  height: calc(100vh - 48px - 60px);
  overflow-y: scroll;
}
.ticket-page .ticket-list {
  margin: 15px;
}
.ticket-page .ticket-list .ticket-item {
  display: flex;
  align-items: center;
  border-radius: 6px;
  overflow: hidden;
  padding: 0 0 0 0;
  background: linear-gradient(-45deg, #77d6df, #24b3c1);
  margin-bottom: 15px;
}
.ticket-page .ticket-list .ticket-item:last-of-type {
  margin-bottom: 0;
}
.ticket-page .ticket-list .ticket-item .ticket-section {
  box-sizing: border-box;
  color: white;
  padding-bottom: 15px;
  flex: 1;
  padding-left: 15px;
  padding-right: 15px;
}
.ticket-page .ticket-list .ticket-item .ticket-section .section-title {
  padding: 18px 0;
  line-height: 1;
}
.ticket-page .ticket-list .ticket-item .ticket-section .section-body {
  list-style: none;
}
.ticket-page .ticket-list .ticket-item .ticket-section .section-body li {
  color: white;
  line-height: 1;
  font-size: 12px;
  margin-bottom: 8px;
}
.ticket-page .ticket-list .ticket-item .ticket-section .section-body li:last-of-type {
  margin-bottom: 0;
}
.ticket-page .ticket-list .ticket-item .use-item {
  box-sizing: border-box;
  flex: none;
  width: 99px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-left: 1px dashed white;
}
.ticket-page .ticket-list .ticket-item .use-item::before,
.ticket-page .ticket-list .ticket-item .use-item::after {
  content: '';
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  background: #FAFAFA;
  left: -8px;
  border-radius: 16px;
}
.ticket-page .ticket-list .ticket-item .use-item::before {
  top: -8px;
}
.ticket-page .ticket-list .ticket-item .use-item::after {
  bottom: -8px;
}
.ticket-page .ticket-list .ticket-item .use-item .use-button {
  border: none;
  outline: none;
  height: 28px;
  font-size: 12px;
  color: #24B3C1;
  background: white;
  width: 74px;
  border-radius: 28px;
}
.ticket-page .ticket-list .ticket-item.disabled {
  background: white;
}
.ticket-page .ticket-list .ticket-item.disabled .ticket-section {
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  border-right: none;
}
.ticket-page .ticket-list .ticket-item.disabled .ticket-section .section-title {
  color: #C6C6C6;
}
.ticket-page .ticket-list .ticket-item.disabled .ticket-section .section-body li {
  color: #C6C6C6;
}
.ticket-page .ticket-list .ticket-item.disabled .use-item {
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  border-left: 1px dashed #e9e9e9;
}
.ticket-page .ticket-list .ticket-item.disabled .use-item::before,
.ticket-page .ticket-list .ticket-item.disabled .use-item::after {
  box-sizing: border-box;
  border: 1px solid #e9e9e9;
}
.ticket-page .ticket-list .ticket-item.disabled .use-item .use-button {
  background: #F2EEEF;
  color: #C6C6C6;
}
.ticket-page .get-ticket-button {
  display: flex;
}
.ticket-page .get-ticket-button button {
  all: unset;
  flex: 1;
  height: 60px;
  background: #24B3C1;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}
.ticket-page .get-ticket-button button.black {
  background: #1D1E1F;
}
.ticket-page .input-ticket-wrap {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
}
.ticket-page .input-ticket-wrap .input-ticket {
  flex: 1;
  background: white;
  padding: 0 30px 30px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  position: relative;
}
.ticket-page .input-ticket-wrap .input-ticket img {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 50px;
}
.ticket-page .input-ticket-wrap .input-ticket button,
.ticket-page .input-ticket-wrap .input-ticket input {
  display: block;
  width: 100%;
  border: none;
  outline: none;
}
.ticket-page .input-ticket-wrap .input-ticket input {
  margin: 60px 0 50px;
  height: 55px;
  font-size: 14px;
  background: #FAFAFA;
  border-radius: 6px;
  text-align: center;
}
.ticket-page .input-ticket-wrap .input-ticket button {
  height: 50px;
  background: #24B3C1;
  border-radius: 50px;
  color: white;
  font-size: 14px;
}
.integral-ticket-page {
  overflow-y: scroll !important;
}
.integral-ticket-page .ticket-list {
  padding: 15px;
}
.integral-ticket-page .ticket-list .ticket-item {
  display: flex;
  align-items: center;
  border-radius: 6px;
  overflow: hidden;
  padding: 0 0 0 0;
  background: linear-gradient(-45deg, #77d6df, #24b3c1);
  margin-bottom: 15px;
}
.integral-ticket-page .ticket-list .ticket-item:last-of-type {
  margin-bottom: 0;
}
.integral-ticket-page .ticket-list .ticket-item .ticket-section {
  box-sizing: border-box;
  color: white;
  padding-bottom: 15px;
  flex: 1;
  padding-left: 15px;
  padding-right: 15px;
}
.integral-ticket-page .ticket-list .ticket-item .ticket-section .section-title {
  padding: 18px 0;
  line-height: 1;
}
.integral-ticket-page .ticket-list .ticket-item .ticket-section .section-body {
  list-style: none;
}
.integral-ticket-page .ticket-list .ticket-item .ticket-section .section-body li {
  color: white;
  line-height: 1;
  font-size: 12px;
  margin-bottom: 8px;
}
.integral-ticket-page .ticket-list .ticket-item .ticket-section .section-body li:last-of-type {
  margin-bottom: 0;
}
.integral-ticket-page .ticket-list .ticket-item .use-item {
  box-sizing: border-box;
  flex: none;
  width: 99px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-left: 1px dashed white;
}
.integral-ticket-page .ticket-list .ticket-item .use-item::before,
.integral-ticket-page .ticket-list .ticket-item .use-item::after {
  content: '';
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  background: #FAFAFA;
  left: -8px;
  border-radius: 16px;
}
.integral-ticket-page .ticket-list .ticket-item .use-item::before {
  top: -8px;
}
.integral-ticket-page .ticket-list .ticket-item .use-item::after {
  bottom: -8px;
}
.integral-ticket-page .ticket-list .ticket-item .use-item .use-button {
  border: none;
  outline: none;
  height: 28px;
  font-size: 12px;
  color: #24B3C1;
  background: white;
  width: 74px;
  border-radius: 28px;
}
.integral-ticket-page .ticket-list .ticket-item.disabled {
  background: white;
}
.integral-ticket-page .ticket-list .ticket-item.disabled .ticket-section {
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  border-right: none;
}
.integral-ticket-page .ticket-list .ticket-item.disabled .ticket-section .section-title {
  color: #C6C6C6;
}
.integral-ticket-page .ticket-list .ticket-item.disabled .ticket-section .section-body li {
  color: #C6C6C6;
}
.integral-ticket-page .ticket-list .ticket-item.disabled .use-item {
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  border-left: 1px dashed #e9e9e9;
}
.integral-ticket-page .ticket-list .ticket-item.disabled .use-item::before,
.integral-ticket-page .ticket-list .ticket-item.disabled .use-item::after {
  box-sizing: border-box;
  border: 1px solid #e9e9e9;
}
.integral-ticket-page .ticket-list .ticket-item.disabled .use-item .use-button {
  background: #F2EEEF;
  color: #C6C6C6;
}
.select-ticket-page .ticket-list {
  margin: 15px;
}
.select-ticket-page .ticket-list .ticket-item {
  display: flex;
  align-items: center;
  border-radius: 6px;
  overflow: hidden;
  padding: 0 0 0 0;
  background: linear-gradient(-45deg, #77d6df, #24b3c1);
  margin-bottom: 15px;
}
.select-ticket-page .ticket-list .ticket-item:last-of-type {
  margin-bottom: 0;
}
.select-ticket-page .ticket-list .ticket-item .ticket-section {
  box-sizing: border-box;
  color: white;
  padding-bottom: 15px;
  flex: 1;
  padding-left: 15px;
  padding-right: 15px;
}
.select-ticket-page .ticket-list .ticket-item .ticket-section .section-title {
  padding: 18px 0;
  line-height: 1;
}
.select-ticket-page .ticket-list .ticket-item .ticket-section .section-body {
  list-style: none;
}
.select-ticket-page .ticket-list .ticket-item .ticket-section .section-body li {
  color: white;
  line-height: 1;
  font-size: 12px;
  margin-bottom: 8px;
}
.select-ticket-page .ticket-list .ticket-item .ticket-section .section-body li:last-of-type {
  margin-bottom: 0;
}
.select-ticket-page .ticket-list .ticket-item .use-item {
  box-sizing: border-box;
  flex: none;
  width: 99px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-left: 1px dashed white;
}
.select-ticket-page .ticket-list .ticket-item .use-item::before,
.select-ticket-page .ticket-list .ticket-item .use-item::after {
  content: '';
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  background: #FAFAFA;
  left: -8px;
  border-radius: 16px;
}
.select-ticket-page .ticket-list .ticket-item .use-item::before {
  top: -8px;
}
.select-ticket-page .ticket-list .ticket-item .use-item::after {
  bottom: -8px;
}
.select-ticket-page .ticket-list .ticket-item .use-item .use-button {
  border: none;
  outline: none;
  height: 28px;
  font-size: 12px;
  color: #24B3C1;
  background: white;
  width: 74px;
  border-radius: 28px;
}
.select-ticket-page .ticket-list .ticket-item.disabled {
  background: white;
}
.select-ticket-page .ticket-list .ticket-item.disabled .ticket-section {
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  border-right: none;
}
.select-ticket-page .ticket-list .ticket-item.disabled .ticket-section .section-title {
  color: #C6C6C6;
}
.select-ticket-page .ticket-list .ticket-item.disabled .ticket-section .section-body li {
  color: #C6C6C6;
}
.select-ticket-page .ticket-list .ticket-item.disabled .use-item {
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  border-left: 1px dashed #e9e9e9;
}
.select-ticket-page .ticket-list .ticket-item.disabled .use-item::before,
.select-ticket-page .ticket-list .ticket-item.disabled .use-item::after {
  box-sizing: border-box;
  border: 1px solid #e9e9e9;
}
.select-ticket-page .ticket-list .ticket-item.disabled .use-item .use-button {
  background: #F2EEEF;
  color: #C6C6C6;
}
.select-standard-page .title {
  text-align: center;
  padding: 30px 0;
}
.select-standard-page .standard-list {
  margin: 0 15px;
}
.select-standard-page .standard-list .standard-item {
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
}
.agreement-page {
  overflow-y: scroll !important;
}
.agreement-page .agreement-wrap {
  font-size: 14px;
  padding: 15px;
  color: #323232;
}
.agreement-page .agreement-wrap ul,
.agreement-page .agreement-wrap ol {
  list-style-position: inside;
}
.agreement-page .agreement-wrap p {
  margin: 10px 0;
}
#app {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
#app .index-page,
#app .lesson-page,
#app .pyq-page,
#app .pyq-detail-page,
#app .commit-page,
#app .payment-page,
#app .help-page,
#app .ticket-page,
#app .user-lesson-page,
#app .user-collage-page,
#app .select-ticket-page,
#app .select-standard-page,
#app .agreement-page,
#app .integral-ticket-page {
  background: #fafafa;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: hidden;
}
#app .commit-page {
  background: white;
}
.normal-load-ready {
  transition: all 0.15s linear;
  transform: translate3d(50%, 0, 0);
  opacity: 0.5;
}
.normal-load-active {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.normal-remove-ready {
  transition: all 0.15s linear;
}
.normal-remove-active {
  transform: translate3d(50%, 0, 0);
  opacity: 0;
}
.scroll-wrap {
  width: 100%;
  overflow-y: scroll;
  height: 100%;
}