/* 00.main */
.contents-wrap .inner .assignments-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding-bottom: 50px;
}

.contents-wrap .inner .assignments-wrap .box {
  height: auto;
}

.contents-wrap .inner .assignments-wrap .box .report-alert {
  font-size: 1.4rem;
  margin-bottom: 12px;
  padding: 8px;
  border-radius: 8px;
  background-color: var(--color-sub);
  color: var(--color-main);
}

.contents-wrap .inner .assignments-wrap .blue-box .class-name {
  gap: 6px;
  width: 100%;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-l);
}

.contents-wrap .inner .assignments-wrap .blue-box .class-name p {
  color: #748FCB;
}

.contents-wrap .inner .assignments-wrap .blue-box .class-name p i {
  font-size: var(--font-l);
}

.contents-wrap .inner .assignments-wrap .blue-box .class-name span {
  font-weight: 700;
}

.contents-wrap .inner .assignments-wrap .blue-box .class-name>span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 1;
  word-break: normal;
}

.contents-wrap .inner .assignments-wrap .blue-box .class-name>div:last-child {
  flex-shrink: 0;
  margin-left: auto;
}

.contents-wrap .inner .assignments-wrap .blue-box .class-name>div:last-child span {
  font-size: var(--font-r);
  font-weight: 400;
}

.contents-wrap .inner .assignments-wrap .blue-box .class-name>div:last-child span:last-child {
  padding-left: 6px;
}

.contents-wrap .inner .assignments-wrap .box .slide-controller .num {
  font-size: 2.4rem;
}

.contents-wrap .inner .assignments-wrap .box .slide-controller .arrow {
  width: 36px;
  height: 36px;
}

.contents-wrap .inner .assignments-wrap .blue-box .slide-controller .arrow {
  border: 1px solid #748FCB;
  background-image: url(/public/resource/images/common/icn-arrow-blue.svg);
}

.contents-wrap .inner .assignments-wrap .box .flex:has(.slide-controller) {
  position: relative;
  justify-content: center;
  margin-bottom: 18px;
}

.contents-wrap .inner .assignments-wrap .blue-box .flex:has(.slide-controller) .category {
  position: absolute;
  right: 0;
}

.contents-wrap .inner .assignments-wrap .blue-box .assignments-list li {
  justify-content: space-between;
  min-width: 0;
  padding-left: 7px;
  margin-bottom: 16px;
  border-left: 5px solid var(--color-main);
  transition: var(--duration);
}

.contents-wrap .inner .assignments-wrap .blue-box .assignments-list li.l {
  border-left: 5px solid var(--color-L);
}

.contents-wrap .inner .assignments-wrap .blue-box .assignments-list li.s {
  border-left: 5px solid var(--color-S);
}

.contents-wrap .inner .assignments-wrap .blue-box .assignments-list li.v {
  border-left: 5px solid var(--color-V);
}

.contents-wrap .inner .assignments-wrap .blue-box .assignments-list li:last-child {
  margin-bottom: 0;
}

.contents-wrap .inner .assignments-wrap .blue-box .assignments-list li.no-assignments {
  padding-left: 0;
  border: none;
}

.contents-wrap .inner .assignments-wrap .blue-box .assignments-list li .text {
  width: 100%;
}

.contents-wrap .inner .assignments-wrap .blue-box .assignments-list li .text>* {
  display: block;
  padding-bottom: 2px;
}

.contents-wrap .inner .assignments-wrap .blue-box .assignments-list li .text>*:last-child {
  margin-bottom: 0;
}

.contents-wrap .inner .assignments-wrap .blue-box .assignments-list li .text>*.date {
  font-size: 1.5rem;
  color: #748FCB;
}

.contents-wrap .inner .assignments-wrap .blue-box .assignments-list li .text>*.title {
  min-width: 0;
  width: 100%;
  font-size: var(--font-l);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 1;
  word-break: normal;
}

.contents-wrap .inner .assignments-wrap .blue-box .assignments-list li .text>*.parnassus {
  font-size: var(--font-s);
}

.contents-wrap .inner .assignments-wrap .blue-box .assignments-list li .btn {
  width: 84px;
  padding: 16px 0;
  border: none;
  font-size: var(--font-r);
  transition: var(--duration);
}

.contents-wrap .inner .assignments-wrap .blue-box .assignments-list li .btn.white {
  background-color: var(--color-white);
  border: 1px solid var(--color-main);
  color: var(--color-font);
}

.no-assignments {
  border: none;
  padding-left: 0;
  font-size: var(--font-l);
}

.no-assignments * {
  margin: 0 auto;
  text-align: center;
  color: var(--color-font-gray2);
}

.no-assignments p {
  margin-top: 12px;
}

.contents-wrap .inner .assignments-wrap .box .tab-in-tab p {
  margin-left: auto;
  font-size: var(--font-s);
}

body:has(.dimmed.act) .loadingoverlay {
  visibility: hidden;
}

/* 00.main end */

/* 00 loarding */
.inner.loarding {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.inner.loarding .range-wrap {
  width: 100%;
  text-align: center;
  font-size: var(--font-r);
  color: var(--color-font-gray);
}

.inner.loarding .range {
  max-width: 832px;
  width: 100%;
  height: 8px;
  margin: 0 auto;
  margin-bottom: 18px;
  border-radius: 100px;
  background-color: rgba(0, 0, 0, 0.03);
}

.inner.loarding .range .rail {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 100px;
  background-color: var(--color-main);
}

/* 00 loarding end */

/* sub 02 learning-history */
.inner.learning-history .tab-contents>* {
  display: none;
}

.inner.learning-history .tab-contents>*.act {
  display: block;
}

.inner.learning-history .tab-contents>.daily {
  display: none;
  gap: var(--gap);
}

.inner.learning-history .tab-contents>.daily.act {
  display: flex;
}

.inner.learning-history .tab-contents .daily .calendar-wrap {
  height: 100%;
}

.inner.learning-history .tab-contents .daily .calendar-wrap .calendar-top .category {
  margin-right: inherit;
  margin-left: auto;
}

.inner.learning-history .tab-contents .daily .calendar-wrap .calendar-top .go-today {
  margin-left: 8px;
}

.inner.learning-history .tab-contents .daily .calendar-wrap .calendar>ul.cell li {
  height: 50px;
}

.inner.learning-history .tab-contents .daily .calendar-wrap .calendar>ul.cell li button ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.inner.learning-history .tab-contents .daily .calendar-wrap .calendar>ul.cell li button ul li {
  width: 14px;
  height: 14px;
  margin: 0;
  border-radius: 100px;
}

.inner.learning-history .tab-contents .month .calendar-wrap .calendar-top {
  justify-content: space-between;
}

.inner.learning-history .tab-contents .month .calendar-wrap .calendar-top .flex:has(label) {
  gap: var(--gap);
}

.inner.learning-history .tab-contents .month .calendar-wrap .calendar-top .flex:last-child .white {
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 400;
  font-size: var(--font-r);
}

.inner.learning-history .tab-contents .month .calendar-wrap .table tr .btn.no-style {
  color: var(--color-main);
  font-size: var(--font-r);
}

.inner.learning-history tr {
  transition: var(--duration);
}

.inner.learning-history td.title {
  cursor: pointer;
  transition: var(--duration);
}

/* sub 02 learning-history end */

/* sub03 my page */
/** point-ranking **/
.inner.point-ranking .tab-contents {
  align-items: flex-start;
  gap: var(--gap);
}

.inner.point-ranking .slide-controller {
  margin-bottom: 12px;
}

.inner.point-ranking .tab-contents .user-data {
  flex-shrink: 0;
  width: 604px;
}

.inner.point-ranking .tab-contents .user-data .box>.flex {
  gap: 20px;
}

.inner.point-ranking .tab-contents .user-data .box>.flex:first-child {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.inner.point-ranking .tab-contents .user-data .box>.flex img {
  width: 54px;
  height: 54px;
}

.inner.point-ranking .tab-contents .user-data .box>.flex dl:not(:last-child) {
  margin-bottom: 14px;
}

.inner.point-ranking .tab-contents .user-data .box>.flex dl dt {
  margin-bottom: 4px;
  font-size: var(--font-r);
  color: var(--color-font-gray);
}

.inner.point-ranking .tab-contents .user-data .box>.flex dl dd {
  font-size: var(--font-l);
}

.inner.point-ranking .tab-contents .user-data .box>.flex:last-child dl:first-child dd b:first-child {
  margin-right: 4px;
  color: var(--color-main);
  font-size: 2.4rem;
}

.inner.point-ranking .tab-contents .user-data .table-wrap p {
  margin-top: 20px;
  margin-bottom: 14px;
  font-size: var(--font-v);
  font-weight: 700;
}

.inner.point-ranking .tab-contents .user-data .table-wrap {
  overflow: inherit;
}

.inner.point-ranking .tab-contents .user-data table {
  display: table;
  width: 100%;
  font-size: var(--font-r);
  border-collapse: collapse;
}

.inner.point-ranking .tab-contents .user-data table caption {
  margin: 4px 0;
  caption-side: bottom;
  text-align: left;
  color: var(--color-font-gray);
}

.inner.point-ranking .tab-contents .user-data table tr {
  display: table-row;
}

.inner.point-ranking .tab-contents .user-data table tr :where(th, td) {
  padding: 12px;
  font-weight: 400;
  text-align: center;
  border: 1px solid var(--color-border);
}

.inner.point-ranking .tab-contents .user-data table tr th {
  background-color: var(--color-gray);
}

.inner.point-ranking .tab-contents .user-data table tr:not(:first-child) th {
  width: 25%;
}

.inner.point-ranking .tab-contents .user-data table tr .long {
  width: 100%;
}

.inner.point-ranking .tab-contents .user-data table tr span {
  font-size: var(--font-s);
  color: var(--color-font-gray);
}

.inner.point-ranking .tab-contents .rank-box {
  position: relative;
  width: 100%;
  padding: var(--padding);
  border-radius: var(--radius);
  background: linear-gradient(#F1F5FF, #F1F5FF, #C7D2FF);
  box-shadow: 0px 4px 6px var(--color-shadow);
}

.inner.point-ranking .tab-contents .rank-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/public/resource/images/common/rank-bg.svg);
  background-size: 100%;
  background-position: center top;
  pointer-events: none;
  z-index: 0;
}

.inner.point-ranking .tab-contents .rank-box>* {
  position: relative;
  z-index: 1;
}

.inner.point-ranking .tab-contents .rank-box ul.flex {
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 24px;
}

.inner.point-ranking .tab-contents .rank-box ul.flex li {
  width: 100%;
}

.inner.point-ranking .tab-contents .rank-box ul.flex li:nth-child(1) {
  order: 2;
}

.inner.point-ranking .tab-contents .rank-box ul.flex li:nth-child(1)>img {
  width: 140px;
  height: 140px;
}

.inner.point-ranking .tab-contents .rank-box ul.flex li:nth-child(2) {
  order: 1;
}

.inner.point-ranking .tab-contents .rank-box ul.flex li:nth-child(3) {
  order: 3;
}

.inner.point-ranking .tab-contents .rank-box ul.flex li>img {
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

.inner.point-ranking .tab-contents .rank-box ul.flex li .box {
  position: relative;
  padding: 12px;
  padding-top: 28px;
  border: none;
  border-radius: 10px;
  background-color: var(--color-white);
  text-align: center;
}

.inner.point-ranking .tab-contents .rank-box ul.flex li .box>span {
  position: absolute;
  transform: translateX(-50%);
  top: -16px;
  left: 50%;
  width: 32px;
  height: 32px;
  border-radius: 100px;
  align-content: center;
  font-size: var(--font-l);
  font-weight: 700;
}

.inner.point-ranking .tab-contents .rank-box ul.flex li:nth-child(1) .box>span {
  background: linear-gradient(#FFE181, #FFB845);
}

.inner.point-ranking .tab-contents .rank-box ul.flex li:nth-child(2) .box>span {
  background: linear-gradient(#EBEBEB, #C5C5C5);
}

.inner.point-ranking .tab-contents .rank-box ul.flex li:nth-child(3) .box>span {
  background: linear-gradient(#E48F61, #D86B31);
}

.inner.point-ranking .tab-contents .rank-box ul.flex li .box .data b {
  font-size: var(--font-v);
}

.inner.point-ranking .tab-contents .rank-box ul.flex li .box .data p {
  margin-bottom: 6px;
  color: var(--color-font-gray);
  font-size: var(--font-s);
}

.inner.point-ranking .tab-contents .rank-box ul.flex li .box .point {
  gap: 4px;
  justify-content: center;
  font-size: var(--font-r);
}

.inner.point-ranking .tab-contents .rank-box .rank-chart {
  width: 100%;
}

.inner.point-ranking .tab-contents .rank-box .rank-chart span {
  display: block;
  width: 100%;
  font-size: var(--font-r);
}

.inner.point-ranking .tab-contents .rank-box .rank-chart span.num {
  flex-shrink: 0;
  width: 30px;
}

.inner.point-ranking .tab-contents .rank-box .rank-chart span.point {
  width: 46px;
  margin-left: auto;
}

.inner.point-ranking .tab-contents .rank-box .rank-chart .name {
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 1;
  word-break: normal;
}

.inner.point-ranking .tab-contents .rank-box .rank-chart .name p {
  font-size: var(--font-s);
  color: var(--color-font-gray);
}

.inner.point-ranking .tab-contents .rank-box .rank-chart .flex {
  gap: 12px;
  padding: 8px 20px;
  color: var(--color-font-gray2);
}

.inner.point-ranking .tab-contents .rank-box .rank-chart ul li.flex {
  margin-bottom: 4px;
  padding: 12px 20px;
  border-radius: var(--radius);
  background-color: rgba(255, 255, 255, 0.6);
  color: var(--color-font);
}

.inner.point-ranking .tab-contents .rank-box .rank-chart ul li.flex:last-child {
  margin-bottom: 0;
}

.contents-wrap .inner.payment-info .alert {
  margin-bottom: 14px;
  font-size: var(--font-r);
}

.inner.payment-info table tr>*:nth-child(4) {
  width: 145px;
}

/** point-ranking end **/

/** my info **/
.my-info .blue-box {
  justify-content: center;
  gap: 36px;
}

.img-fix {
  flex-shrink: 0;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}

.img-fix img {
  width: 120px;
  height: 120px;
}

.img-fix span {
  display: block;
  padding: 8px;
  border-radius: var(--radius);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-color: var(--color-white);
  text-align: center;
  font-size: var(--font-r);
}

.my-info .blue-box div {
  width: 100%;
}

.my-info .blue-box div dl {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  font-size: var(--font-l);
}

.my-info .blue-box div dl:last-child {
  margin: 0;
}

.my-info .blue-box div dl dt {
  flex-shrink: 0;
  width: 95px;
  margin-bottom: 6px;
  color: var(--color-main);
}

/** my info end **/
/* sub03 my page end */

/* sub04 user center */
/** q n a **/
.inner.qna>ul li {
  margin-bottom: 8px;
  border-radius: 10px;
  line-height: 1.6;
}

.inner.qna>ul li:last-child {
  margin-bottom: 0px;
}

.inner.qna>ul li.act {
  border: 1px solid var(--color-main);
  background-color: var(--color-sub);
}

.inner.qna>ul li.act .arrow {
  transform: rotate(180deg);
}

.inner.qna>ul li .btn {
  justify-content: space-between;
  width: 100%;
  padding: 12px;
  border: none;
  text-align: left;
  color: var(--color-font);
  font-size: var(--font-r);
  background: transparent;
}

.inner.qna>ul li .btn div:first-child {
  transition: var(--duration);
  line-height: 1.6;
}

.inner.qna>ul li .btn div .caption {
  font-size: var(--font-s);
  color: var(--color-font-gray);
}

.inner.qna>ul li .btn div .caption.green {
  color: #35B27C;
}

.inner.qna>ul li .btn div .caption.blue {
  color: var(--color-L);
}

.inner.qna>ul li .btn div .caption.orange {
  color: var(--color-S);
}

.inner.qna>ul li .btn div .caption.purple {
  color: var(--color-V);
}

.inner.qna>ul li .btn .arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 100px;
  border: 1px solid var(--color-border-input);
  background-color: var(--color-white);
  color: var(--color-font-gray);
  font-size: 28px;
  text-align: center;
  align-content: center;
  transition: var(--duration);
}

.inner.qna>ul li .answer {
  position: relative;
  display: none;
  padding: 12px;
  font-size: var(--font-r);
  overflow: hidden;
  isolation: isolate;
}

.inner.qna>ul li .answer::before {
  content: "";
  position: absolute;
  transform: translateX(-50%);
  top: 0;
  left: 50%;
  width: calc(100% - 24px);
  height: 1px;
  background-color: var(--color-border-input);
}

.inner.qna>ul li .answer img {
  width: 100%;
  max-width: 720px;
}

.inner.qna>ul li .answer video {
  width: 100%;
  max-width: 720px;
}

.inner.qna>ul li .answer p {
  user-select: text;
}

.inner.qna>ul li .answer img {
  max-width: 100%;
}

.inner.qna>ul li .answer .file {
  margin-top: 12px;
}

.inner.qna>ul li .answer .file p {
  font-size: var(--font-s);
  color: var(--color-font-gray);
}

/** q n a end **/

/** 1:1 inquiry **/
.inner.inquiry .table-wrap {
  height: auto;
  overflow: inherit;
}

.inner.inquiry .page-list .white {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  right: 0;
  width: auto;
  height: auto;
  padding: 12px 20px;
  border: 1px solid var(--color-border-input);
}

.inner.inquiry .answer {
  gap: 18px;
  padding: 12px;
  border-radius: var(--radius);
  background-color: var(--color-sub);
  font-size: var(--font-r);
  line-height: 1.6;
}

.inner.inquiry .answer .thumb {
  width: 54px;
  height: 54px;
  border-radius: 100px;
  background-color: var(--color-white);
  align-content: center;
}

.inner.inquiry .answer .thumb img {
  width: 42px;
  height: 42px;
  margin: 0 auto;
}

.inner.inquiry:has(>.write) {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.inner.inquiry .btn.white.write {
  margin-left: auto;
}

.inner.inquiry .write:not(.btn) {
  width: 100%;
  height: 100%;
  gap: var(--gap);
  align-items: flex-start;
}

.inner.inquiry .write .box {
  flex-shrink: 0;
  width: 348px;
  height: 100%;
  padding: 20px;
  border: none;
  background-color: #f9f9f9;
}

.inner.inquiry .write .box .label:not(:last-child) {
  margin-bottom: 24px;
}

.inner.inquiry .write .box .flex {
  gap: 2px;
}

.inner.inquiry .write .submit-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.inner.inquiry .write .submit-wrap>.btn.white {
  width: auto;
  padding: 16px 26px;
  margin-bottom: 18px;
  border: 1px solid var(--color-main);
  border-radius: 10px;
  font-weight: 400;
}

.inner.inquiry .write .submit-wrap {
  width: 100%;
}

.inner.inquiry .write .submit-wrap .flex {
  gap: 12px;
  width: 100%;
  margin-top: 12px;
}

.inner.inquiry .write .submit-wrap textarea {
  height: 100%;
  margin-top: var(--gap);
  margin-bottom: 12px;
}

.inner.inquiry .write .submit-wrap .file span {
  display: block;
  padding: 0px 16px;
  margin-bottom: 4px;
  font-size: var(--font-r);
}

.inner.inquiry .write .submit-wrap .file .flex {
  gap: 4px;
  margin-top: 0;
}

.inner.inquiry .write .submit-wrap .file .flex input[type="file"] {
  position: absolute;
  display: block;
  z-index: -1;
  width: 0px;
  height: 0px;
}

.inner.inquiry .write .submit-wrap .file .flex span {
  width: 240px;
  padding: 15px 16px;
  border-radius: 8px;
  background-color: #F2F4F9;
  font-size: var(--font-r);
  color: #7E8EB6;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 1;
  white-space: nowrap;
}

.inner.inquiry .write .submit-wrap .file .flex .btn {
  border-radius: 8px;
  font-size: var(--font-s);
}

.inner.inquiry .btn-wrap {
  justify-content: space-between;
  margin-top: var(--gap);
  padding-top: var(--gap);
  border-top: 1px solid var(--color-border);
}

.inner.inquiry .btn-wrap .btn {
  padding: 20px;
  font-size: var(--font-r);
}

.inner.inquiry .btn-wrap .white {
  width: 120px;
}

.inner.inquiry .btn-wrap .submit {
  width: 240px;
  background-color: var(--color-font);
}

/** 1:1 inquiry end **/
/* sub04 user center end */

/* sub 99.payment */
.inner.payment {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  align-content: center;
}

.inner.payment .title {
  margin-bottom: 54px;
  font-size: 3.2rem;
  text-align: center;
  font-weight: 700;
}

.inner.payment .title img {
  width: 54px;
  height: 54px;
  margin: 0 auto;
  margin-bottom: 12px;
}

.inner.payment .box {
  margin-bottom: var(--gap);
  font-size: var(--font-r);
  text-align: center;
}

.inner.payment .box .box-icn {
  margin: 0 auto;
  margin-bottom: 18px;
}

.inner.payment .box p {
  margin-bottom: 18px;
  line-height: 1.6;
}

.inner.payment .box p.alert {
  margin-bottom: 0;
  color: var(--color-font-gray2);
}

.inner.payment .info {
  margin-bottom: 54px;
}

.inner.payment .info dl {
  display: flex;
  padding: 12px;
  font-size: var(--font-r);
}

.inner.payment .info dl dt {
  width: 100px;
}

.inner.payment .btn-wrap {
  gap: 0;
  width: 100%;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
}

.inner.payment .btn-wrap .btn {
  display: block;
  width: 100%;
  padding: 24px 12px;
  text-align: center;
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
  background-color: inherit;
}

.inner.payment .btn-wrap .btn:first-child {
  border-left: 0;
}

.inner.payment .btn-wrap .btn:last-child {
  border-right: 0;
}

.inner.payment .box.no-bank p {
  margin-bottom: 0;
}

.inner.payment .box.no-bank p.alert {
  user-select: text;
  -webkit-tap-highlight-color: inherit;
}

.inner.payment .box.no-bank .text {
  flex-direction: column;
  gap: calc(var(--gap) / 3);
}

.inner.payment:has(.fill) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.inner.payment .fill {
  width: 100%;
  height: 100%;
  align-content: center;
}

.inner.payment .table {
  margin-bottom: 36px;
}

.inner.payment .table tr {
  gap: 0;
  padding: 0;
}

.inner.payment .table th {
  font-weight: 800;
  background-color: var(--color-sub);
  border-bottom: none;
}

.inner.payment .table :where(th, td) {
  width: 100%;
  height: 100%;
  padding: 14px 0;
  border-radius: 0;
  border: 1px solid var(--color-border-input);
}

.inner.payment .table :where(th, td):first-child {
  border-right: none;
}

.inner.payment .table :where(th, td):last-child {
  border-left: none;
}

.inner.payment .info-text {
  margin-bottom: 54px;
  text-align: center;
}

.inner.payment .info-text b {
  font-size: var(--font-v);
}

.inner.payment .info-text p {
  margin-top: 8px;
  font-size: var(--font-r);
  color: var(--color-font-gray);
}

.inner.payment .pay-info {
  font-size: var(--font-v);
  text-align: center;
}

.inner.payment .pay-info b {
  font-weight: 800;
}

.inner.payment .pay-info .flex {
  gap: 4px;
  font-weight: 800;
  justify-content: center;
  margin: 8px 0;
}

.inner.payment .pay-info .flex p {
  color: var(--color-main);
}

.inner.payment .pay-info .gray {
  color: var(--color-font-gray);
  font-size: var(--font-r);
}

/** sub 99.payment ghl **/
.inner.payment.ghl .title img.ghl-logo {
  width: auto;
  height: 42px;
}

.inner.payment.ghl .d-day {
  display: block;
  margin-bottom: 12px;
  color: var(--color-main);
  font-size: 1.8rem;
}

.inner.payment.ghl .btn-wrap {
  border: none;
  border-radius: 0;
}

.inner.payment.ghl .btn-wrap .btn {
  border: 1px solid var(--color-border-input);
}

.inner.payment.ghl .btn-wrap .btn:nth-child(2) {
  border-left: 0;
  border-right: 0;
}

.inner.payment.ghl .btn-wrap .btn:first-child {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.inner.payment.ghl .btn-wrap .btn:nth-child(3) {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.inner.payment.ghl .btn-wrap .btn.btn-ghl {
  margin-left: 12px;
  background-color: var(--color-main);
  border-radius: var(--radius);
  white-space: nowrap;
}

/** sub 99.payment ghl end **/
/* sub 99.payment end */

/* hover */
@media (hover: hover) and (pointer: fine) {
  header nav ul li:hover {
    text-indent: 12px;
  }

  header nav ul li:hover img {
    transform: translateX(8px) scale(1.1);
  }

  header nav ul li .nav2depth .flex:hover {
    background-color: var(--color-sub);
  }

  .tab ul li .btn:hover {
    box-shadow: 0px 0px 8px var(--color-shadow);
  }

  .btn.arrow:hover {
    transform: translateX(-5px);
  }

  .btn.rotate.arrow:hover {
    transform: rotate(180deg) translateX(-5px);
  }

  .slide-controller .num:hover {
    transform: translateY(-5px);
  }

  header .header-bottom .btn:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0px 6px 8px var(--color-shadow);
  }

  .contents-wrap .inner .calendar-wrap .calendar>ul.cell>li button:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 8px var(--color-shadow);
  }

  .contents-wrap .inner .assignments-wrap .blue-box .assignments-list li:has(.btn:hover) {
    padding-left: 15px;
  }

  .contents-wrap .inner .assignments-wrap .blue-box .assignments-list li .btn:hover {
    box-shadow: 0px 5px 8px var(--color-shadow);
    transform: translateY(-5px);
  }

  .popup.letter table tr:hover {
    text-indent: 5px;
  }

  .page-list .btn:not(.write):hover {
    background-color: var(--color-sub);
  }

  .page-list .btn.write:hover {
    background-color: #538CFF;
  }

  .tab-in-tab ul li:hover .no-style {
    transform: translateY(-6px);
  }

  .tab ul li label .btn:hover {
    box-shadow: 0px 0px 10px var(--color-shadow);
  }

  .table tbody tr:hover {
    background-color: #FAFBFF;
  }

  .table.read tbody tr.file:hover {
    background-color: inherit;
  }

  .table.read tbody tr.file td ul li:has(a:hover) {
    background-color: var(--color-sub);
    text-indent: 4px;
  }

  .page-controller a:hover {
    transform: translateY(-4px);
  }

  .page-controller a:last-child:hover {
    transform: translateY(4px);
  }

  .inner.qna>ul li:not(.act) .btn:hover div:first-child {
    text-indent: 4px;
  }

  .inner.qna>ul li:not(.act) .btn:hover div.arrow {
    box-shadow: 0px 0px 6px var(--color-border-input);
  }

  .inner.learning-history td.title:hover {
    text-indent: 10px;
  }

  .inner.learning-history tr:has(td.title:hover) {
    background-color: var(--color-sub);
  }
}

/* hover end */