:root {
  --star: #de2f2f;
  --color-note: #de2f2f;
  /* Color styles */
  --primary-color1: #73c12d;
  --primary-color2: #ff6f02;
  --primary-color2-1: #fff1e5;
  --primary-color2-2: #ffe2cc;
  --primary-color2-3: #cf5a00;
  --primary-color3: #00b7ff;
  --primary-color4: #ff5c95;
  --primary-color5: #805fdb;
  --primary-color6: #ffcc00;
  --primary-color7: #fff;
  --primary-color8: #e2e2e2;
  --second-color1: #0077e5;
  --second-color2: #254bd3;
  --second-color3: #208900;
  --tab-color1: rgba(246, 0, 41, 1);
  --tab-color2: rgba(5, 170, 5, 1);
  --tab-color3: rgba(0, 79, 169, 1);
  --tab-color4: rgba(187, 34, 154, 1);
  --tab-color5: rgba(255, 97, 12, 1);
  --tab-color6: rgba(96, 89, 201, 1);
  /* shadow styles */
  --box-shadow: 0px 1.2px 4.5px rgba(0, 0, 0, 0.3);
  --arr-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
  --book-shadow: 3px -2px 8px rgba(0, 0, 0, 0.12);
  --subnav-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
  --color-000000: #000000;
  --color-222222: #222222;
  --color-242424: #242424;
  --color-333333: #333333;
  --color-484848: #484848;
  --color-555555: #555555;
  --color-666666: #666666;
  --color-888888: #888888;
  --color-999999: #999999;
  --color-aaaaaa: #aaaaaa;
  --color-bbbbbb: #bbbbbb;
  --color-cccccc: #cccccc;
  --color-d4d4d4: #d4d4d4;
  --color-dddddd: #dddddd;
  --color-e4e4e4: #e4e4e4;
  --color-eeeeee: #eeeeee;
  --color-f2f2f2: #f2f2f2;
  --color-f4f4f4: #f4f4f4;
  --color-f6f6f6: #f6f6f6;
  --color-ffffff: #ffffff;
  --fontsize-48: 3rem;
  --fontsize-36: 2.25rem;
  --fontsize-32: 2rem;
  --fontsize-30: 1.875rem;
  --fontsize-28: 1.75rem;
  --fontsize-26: 1.6rem;
  --fontsize-24: 1.5rem;
  --fontsize-22: 1.4rem;
  --fontsize-21: 1.3rem;
  --fontsize-20: 1.25rem;
  --fontsize-19: 1.2rem;
  --fontsize-18: 1.125rem;
  --fontsize-17: 1.05rem;
  --fontsize-16: 1rem;
  --fontsize-15: 0.95rem;
  --fontsize-14: 0.875rem;
  --fontsize-13: 0.8rem;
  --fontsize-12: 0.75rem;
  --rounded-rectangle: 150px;
  --border-radius-full: 9999px;
  --border-radius-lg: 20px;
  --border-radius-md: 16px;
  --border-radius-sm: 9px;
  --border-radius-xs: 5px;
  --border-radius-xxs: 3px;
  --border-radius-tab: 10px 10px 0 0;
  --border-color: #c7d3d2;
  --tableColor01-1: #d8f3ff;
  --tableColor01-2: #b9e7fd;
}

.member-index {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 50px 0 70px 0;
  margin: 0 auto;
  width: 92%;
  max-width: 1168px;
}

.member-index .bookmark,
.member-index .recommend,
.member-index .viewed {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  border-radius: 6px;
  border: 2px solid var(--theme-background-2);
}

.member-index .bookmark .header,
.member-index .recommend .header,
.member-index .viewed .header {
  position: static;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: none;
  justify-content: space-between;
  z-index: 1;
  height: auto;
}

.member-index .bookmark .header span,
.member-index .recommend .header span,
.member-index .viewed .header span {
  display: block;
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.3;
}

.member-index .bookmark .header .btn,
.member-index .recommend .header .btn,
.member-index .viewed .header .btn,
.member-recommend-more .btn-box .btn,
.member-viewed-more .btn-box .btn {
  background-color: var(--theme-background-4);
  color: var(--neutral-text-1);
  border: 1px solid var(--theme-background-2);
  line-height: 18px;
  font-size: .875rem;
}

.member-index .bookmark {
  padding: 20px 20px 30px 20px;
  width: 100%;
}

.member-index .bookmark .wrap {
  width: calc(100% + 8px * 2);
  display: flex;
  flex-wrap: wrap;
  //gap: 25px 16px;
  margin: -8px;
  justify-content: flex-start;
}

.member-index .bookmark .wrap .box {
  //width: calc(100% / 5 - 14px);
  width: calc(100% / 5 - 8px * 2);
  margin: 8px;
  position: relative;
}

.member-index .bookmark .wrap .box .name {
  border-radius: 6px;
  display: flex;
  width: 100%;
  //height: 110%;
  color: var(--neutral-text-1);
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.2;
  padding: 26px 16px 18px 16px;
  min-height: 115px;
}

.member-index .bookmark .wrap .box .primary-bgcolor1 {
    background-color: #ECF6DE;
    border: 1px solid #73C12D;
}
.member-index .bookmark .wrap .box .primary-bgcolor2 {
    background-color: #FFEDE3;
    border: 1px solid #FF8500;
}
.member-index .bookmark .wrap .box .primary-bgcolor3 {
    background-color: #E4F3FF;
    border: 1px solid #00B7FF;
}
.member-index .bookmark .wrap .box .primary-bgcolor4 {
    background-color: #FFD9E3;
    border: 1px solid #FF79AB;
}
.member-index .bookmark .wrap .box .primary-bgcolor5 {
    background-color: #F5EEFF;
    border: 1px solid #9A69F0;
}



.member-index .bookmark .wrap .box .name .txt {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  text-align: center;
}

.member-index .bookmark .wrap .box .ctrl {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4.5px;
  font-size: 0;
}

.member-index .bookmark .wrap .box .ctrl a {
  display: block;
  width: 23px;
  height: 23px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100%;
}

.member-index .bookmark .wrap .box .ctrl a.rename {
  //background-image: url(../images/icon/edit-w.svg);
  background-image: url(../images/icon/edit.svg);
}

.member-index .bookmark .wrap .box .ctrl a.cancel {
  //background-image: url(../images/icon/cancel-w.svg);
  background-image: url(../images/icon/cancel.svg);
}

.member-index .recommend,
.member-index .viewed {
  padding: 20px 20px 20px 20px;
  width: calc(50% - 12px);
}

.member-index .recommend .box,
.member-index .viewed .box {
  width: calc(50% - 20px);
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--box-shadow);
  display: flex;
  flex-wrap: wrap;
  margin: 4px 12px;
}

.member-index .recommend .box .img,
.member-index .viewed .box .img {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding-top: 71%;
  border-bottom: 1px solid #ddd;
}

.member-index .recommend .box .img img,
.member-index .viewed .box .img img {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.member-index .recommend .card .img,
.member-index .viewed .card .img {
  background: #9ccb52;
}

.member-index .recommend .card .img img,
.member-index .viewed .card .img img {
  height: 100%;
  width: auto;
}

.member-index .recommend .book .img,
.member-index .viewed .book .img {
  height: 100%;
  padding-top: 123%;
  border-bottom: 0;
  top: 0;
  left: 0;
  transform: none;
  border-radius: 6px;
  overflow: hidden;
}

.member-index .recommend .book .img img,
.member-index .viewed .book .img img {
  height: 100%;
  width: 100%;
}

.member-index .recommend .box .info-title,
.member-index .viewed .box .info-title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(1.125rem, 0.5rem + 1.5625vw, 1.5rem);
  font-weight: 500;
  margin: 0 auto;
  padding-top: 51%;
  line-height: 1.2;
  position: relative;
}

.member-index .recommend .box .info-title .txt,
.member-index .viewed .box .info-title .txt {
  width: 100%;
  display: block;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Noto Sans TC";
  color: var(--color-333333);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 3px 10px;
}

.member-index .recommend .book .info-title,
.member-index .viewed .book .info-title {
  display: none;
}

@media (max-width: 768px) {

  .member-index .recommend,
  .member-index .viewed {
    width: 100%;
  }

}

/* .main .index-section .sub-section .content .box .award-info {
  display: none;
} */

.member-index .member-index-slider {
  width: 94%;
  margin: 0 auto;
}

.member-index .member-index-slider .slick-prev,
.member-index .member-index-slider .slick-next {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  box-shadow: var(--arr-shadow);
  background-repeat: no-repeat;
  background-size: 70%;
  background-color: #fff;
}

.member-index .member-index-slider .slick-prev {
  left: -20px;
  background-image: url(../images/arr-left.svg);
  background-position: 45% 50.5%;
}

.member-index .member-index-slider .slick-next {
  right: -20px;
  background-image: url(../images/arr-right.svg);
  background-position: 58% 50.5%;
}

.member-index .member-index-slider .slick-disabled {
  opacity: 0;
  background-color: #fff;
  cursor: default;
}

.mydate {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.mydate .upload,
.mydate .collection {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid var(--theme-background-2);
  width: calc(50% - 12px);
}

.mydate .collection-more {
  border-radius: 0;
  overflow: visible;
  border: 0;
  width: 100%;
}

.mydate .upload .wrap,
.mydate .collection .wrap {
  width: 100%;
}

.mydate .upload .header,
.mydate .collection .header {
  position: static;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: none;
  justify-content: space-between;
  z-index: 1;
  background-color: var(--theme-background-4);
  padding: 20px 20px 20px 20px;
  min-height: 76px;
  height: 76px;
}

.mydate .upload .header span,
.mydate .collection .header span {
  display: block;
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.3;
}

.mydate .upload .header .btn,
.mydate .collection .header .btn {
  background-color: var(--theme-background-4);
  border: 1px solid var(--theme-background-2);
  color: var(--neutral-text-1);
  line-height: 18px;
  font-size: .875rem;
}

.mydate .upload .list-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 10px;
  overflow-y: auto;
  max-height: 680px;
}

.mydate .upload .list-wrap .list-box {
  display: flex;
  width: 100%;
  font-size: 1.125rem;
  border-top: 1px solid #ccc;
}

.mydate .upload .list-wrap .list-box li {
  padding: 5px 8px 9px 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-self: center;
}

.mydate .upload .list-wrap .list-box li .item {
  font-weight: 400;
  display: none;
}

.mydate .upload .list-wrap .list-box li .box {
  gap: 10px;
}

.mydate .upload .list-wrap .list-box li .box .txt {
  align-self: center;
  position: relative;
  top: 4px;
}

.mydate .upload .list-wrap .list-box li .view {
  display: block;
  text-align: center;
}

.mydate .upload .list-wrap .list-box li .view img {
  display: block;
  width: 100%;
}

.mydate .upload .list-wrap .list-box li:nth-child(1) {
  width: 40%;
  justify-content: flex-start;
}

.mydate .upload .list-wrap .list-box li:nth-child(2) {
  width: 100px;
}

.mydate .upload .list-wrap .list-box li:nth-child(2) .box {
  justify-content: center;
  width: 100%;
  font-size: 1.125rem;
}

.mydate .upload .list-wrap .list-box li:nth-child(3) {
  width: 26%;
}

.mydate .upload .list-wrap .list-box li:nth-child(4) {
  width: 60px;
  justify-content: center;
  display: none;
}

.mydate .upload .list-wrap .list-box.head {
  border-top: 0;
}

.mydate .upload .list-wrap .list-box.head li {
  padding: 10px 8px 8px 8px;
}
.mydate .upload .list-wrap .list-box.head li {
  padding: 10px 8px 8px 8px;
}

.mydate .upload .list-wrap .list-box.head li .item {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1;
}

.mydate .collection .tabs {
  padding: 0 16px;
  border-radius: 0;
  background-color: var(--theme-background-4);
}

.mydate .collection-more .tabs {
  padding: 5px 16px 0 16px;
  border-radius: 6px 6px 0 0;
}

.mydate .tabs .splide__arrow {
  top: 50%;
  background-color: #fff;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
}

.mydate .collection-more .tabs .splide__arrow {
  top: 61%;
}

.mydate .tabs .splide__arrow--prev {
  left: 0.5em;
}

.mydate .collection-more .tabs .splide__arrow--prev {
  left: -0.9em;
}

.mydate .collection-more .tabs .splide__arrow--next {
  right: -0.9em;
}

.mydate .collection-more .splide__track {
  overflow: hidden;
}

.mydate .tabs .splide__arrow--next {
  right: 0.5em;
}

.mydate .collection .tabs ul li {
  width: auto;
  position: relative;
  margin-top: 10px;
  margin-bottom: 7px;
}

.mydate .collection .tabs ul li a {
  color: var(--neutral-text-1);
  background-color: var(--theme-background-3);
  padding: 8px 15px;
}

.mydate .collection .tabs ul li.active {
  border-radius: 6px 6px 0 0;
  background-color: #fff;
  margin-bottom: 0;
}

.mydate .collection .tabs ul li.active a {
  background-color: transparent;
}

.mydate .collection .tabs ul li.active::after {
  content: "";
  position: absolute;
  display: block;
  width: calc(100% - 40px);
  margin: 0 20px;
  height: 3px;
  border-radius: 150px;
  background-color: var(--theme-background-2);
  bottom: 8px;
}

.mydate .collection .tabs ul li .ctrl {
  position: absolute;
  top: -5px;
  right: -2px;
  display: flex;
  gap: 2px;
  font-size: 0;
  background-color: transparent;
}

.mydate .collection .tabs ul li .ctrl a {
  display: block;
  position: static;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
}

.mydate .collection .tabs ul li .ctrl a.rename {
  background-image: url(../images/icon/edit.svg);
}

.mydate .collection .tabs ul li .ctrl a.cancel {
  background-image: url(../images/icon/cancel.svg);
}

.mydate .collection .tabs-container {
  padding-top: 0;
}

.mydate .collection .cancel {
  position: absolute;
  z-index: 1;
  display: block;
  width: 23px;
  height: 23px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url(../images/icon/cancel.svg);
  font-size: 0;
  background-color: #fff;
  border-radius: 100%;
}

.mydate .collection .book-box {
  padding-top: 25px;
  position: relative;
  width: 33.3333333333%;
}

.mydate .collection-more .book-box {
  padding-top: 25px;
  position: relative;
  width: 20%;
}

.mydate .collection .book-box .book {
  width: 100%;
  display: block;
}

.mydate .collection .book-box .book .cover {
  position: relative;
  width: 100%;
  padding-top: 64%;
  overflow: hidden;
}

.mydate .collection .book-box .book .cover img {
  position: absolute;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: var(--book-shadow);
}

.mydate .collection .book-box .book .name {
  padding: 10px;
  margin: 0;
  background-color: var(--theme-background-4);
  line-height: 1.3;
  color: #333;
  display: flex;
  justify-items: center;
  align-items: center;
}

.mydate .collection .book-box .book .name .txt {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 500;
}

.mydate .collection .book-box .cancel {
  top: 10px;
  right: 20%;
}

.mydate .collection .video-box {
  padding: 0 20px;
  position: relative;
  width: 100%;
}

.mydate .collection .video-box .video {
  width: 100%;
  display: flex;
  align-items: center;
}

.mydate .collection .video-box .video .cover {
  position: relative;
  width: 100%;
  max-width: 136px;
  aspect-ratio: 3/2;
  border-radius: 6px;
  overflow: hidden;
}

.mydate .collection .video-box .video .cover img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: var(--book-shadow);
}

.mydate .collection .video-box .video .name {
  padding: 10px;
  margin: 0;
  line-height: 1.3;
  color: #333;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: "Noto Sans TC";
  font-weight: 500;
  gap: 5px;
}

.mydate .collection .video-box .video .name .txt {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 1.05rem;
}

.mydate .collection .video-box .video .name .time {
  width: 100%;
  display: block;
  font-size: 90%;
}

.mydate .collection .video-box .cancel {
  top: -12px;
  right: 8px;
}

.mydate .collection .lesson-box {
  padding: 0 20px;
  position: relative;
  width: 100%;
}

.mydate .collection .lesson-box .lesson {
  width: 100%;
  display: flex;
  align-items: center;
}

.mydate .collection .lesson-box .lesson .cover {
  position: relative;
  width: 100%;
  max-width: 136px;
  padding-top: 16.5%;
  border-radius: 6px;
  overflow: hidden;
}

.mydate .collection .lesson-box .lesson .cover img {
  position: absolute;
  width: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: var(--book-shadow);
}

.mydate .collection .lesson-box .lesson .name {
  padding: 10px;
  margin: 0;
  line-height: 1.3;
  color: #333;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: "Noto Sans TC";
  font-weight: 500;
  gap: 5px;
}

.mydate .collection .lesson-box .lesson .name .txt {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 1.05rem;
}

.mydate .collection .lesson-box .lesson .name .time {
  width: 100%;
  display: block;
  font-size: 90%;
}

.mydate .collection .lesson-box .cancel {
  top: -12px;
  right: 8px;
}

.mydate .collection .book-list {
  display: flex;
  flex-wrap: wrap;
}

.mydate .collection .video-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 20px 0;
  overflow-y: auto;
  max-height: 635px;
}

.mydate .collection .lesson-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 20px 0;
  overflow-y: auto;
  max-height: 635px;
}

.mydate .collection .custom-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 20px 0;
  overflow-y: auto;
  max-height: 635px;
}

.popup-bookmark .bookmark-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 30px;
}

.popup-bookmark .bookmark-wrap .box {
  width: calc(25% - 12px);
  position: relative;
  margin-bottom: 10px;
  cursor: pointer;
}

.popup-bookmark .bookmark-wrap .box .name {
  border-radius: 6px;
  display: flex;
  width: 100%;
  height: 110%;
  color: var(--neutral-text-1);
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.2;
  padding: 26px 0 20px 0;
  min-height: 85px;
  background-color: #fff;
}

.popup-bookmark .bookmark-wrap .box .name .txt {
  display: flex;
}

.popup-bookmark .bookmark-wrap .box .name .txt input[type=checkbox] {
  width: 1px;
  height: 1px;
  opacity: 0;
}

.popup-bookmark .bookmark-wrap .box .name label {
  display: flex;
  align-items: center;
  gap: 3px;
  position: relative;
}

.popup-bookmark .bookmark-wrap .box .name label i {
  font-size: 60%;
  position: relative;
}

.popup-bookmark .bookmark-wrap .box .ctrl {
  position: absolute;
  font-size: 0;
  top: 8px;
  right: 8px;
}

.popup-bookmark .bookmark-wrap .box .ctrl .setup {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 100%;
  background-color: rgba(0, 0, 0, 0.3490196078);
  background-position: 4.5px 5px;
  background-repeat: no-repeat;
  background-size: 66%;
  background-image: url(../images/icon/setup.svg);
}

.popup-bookmark .bookmark-wrap .box.no-selected .name {
  border-radius: 6px;
}

.popup-bookmark .bookmark-wrap .box.no-selected .ctrl {
  display: none;
}

.popup-bookmark .bookmark-wrap .box.no-selected .primary-color1 {
  border: 2px solid #ECF6DE;
  background-color: #ECF6DE;
}

.popup-bookmark .bookmark-wrap .box.no-selected .primary-color2 {
  border: 2px solid #FFEDE3;
  background-color: #FFEDE3;
}

.popup-bookmark .bookmark-wrap .box.no-selected .primary-color3 {
  border: 2px solid #E4F3FF;
  background-color: #E4F3FF;
}

.popup-bookmark .bookmark-wrap .box.no-selected .primary-color4 {
  border: 2px solid #FFECEF;
  background-color: #FFECEF;
}

.popup-bookmark .bookmark-wrap .box.no-selected .primary-color5 {
  border: 2px solid #F5EEFF;
  background-color: #F5EEFF;
}

.popup-bookmark .bookmark-wrap .box.no-selected .primary-color6 {
  border: 2px solid #D5FCC1;
  background-color: #D5FCC1;
}

.popup-bookmark .bookmark-wrap .box.no-selected .primary-color7 {
  border: 2px solid #ECF0FF;
  background-color: #ECF0FF;
}

.popup-bookmark .bookmark-wrap .box.no-selected .primary-color8 {
  border: 2px solid #EFEFFF;
  background-color: #EFEFFF;
}

.popup-bookmark .bookmark-wrap .box.selected .primary-color1 {
  border: 2px solid var(--primary-color1);
  background-color: #fff;
}

.popup-bookmark .bookmark-wrap .box.selected .primary-color2 {
  border: 2px solid var(--primary-color2);
  background-color: #fff;
}

.popup-bookmark .bookmark-wrap .box.selected .primary-color3 {
  border: 2px solid var(--primary-color3);
  background-color: #fff;
}

.popup-bookmark .bookmark-wrap .box.selected .primary-color4 {
  border: 2px solid var(--primary-color4);
  background-color: #fff;
}

.popup-bookmark .bookmark-wrap .box.selected .primary-color5 {
  border: 2px solid var(--primary-color5);
  background-color: #fff;
}

.popup-bookmark .bookmark-wrap .box.selected .primary-color6 {
  border: 2px solid var(--primary-color6);
  background-color: #fff;
}

.popup-bookmark .bookmark-wrap .box.selected .ctrl {
  display: block;
}

.popup-bookmark .bookmark-wrap .box.selected .fa-solid {
  display: none;
}

.popup-bookmark-tabs {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  padding: 4px;
  background-color: #f0ffce;
  margin: 0 30px;
  font-size: 1.2rem;
  font-weight: 500;
}

.popup-bookmark-tabs a {
  width: 50%;
  display: block;
  text-align: center;
  color: var(--neutral-text-2);
  padding: 8px;
  border-radius: 7px;
  line-height: 26px;
}

.popup-bookmark-tabs a.active {
  background-color: #fff;
  border: 1px solid #e0f0b7;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
  color: var(--neutral-text-1);
}

.btn-box {
  display: flex;
  gap: 5px;
}

.bookmark-wrap .item-sort .box {
  width: 100%;
}

.bookmark-wrap .item-sort .ctrl {
  width: 160px;
}

.member-recommend-more,
.member-viewed-more {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  width: 100%;
}

.member-recommend-more .box,
.member-viewed-more .box {
  width: calc(100% / 5 - 24px);
  background-color: #fff;
  border-radius: 6px;
  box-shadow: var(--box-shadow);
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.member-recommend-more .box a,
.member-viewed-more .box a {
  display: block;
  width: 100%;
}

.member-recommend-more .box .ctrl,
.member-viewed-more .box .ctrl {
  position: absolute;
  z-index: 1;
}

.member-recommend-more .box .img,
.member-viewed-more .box .img {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding-top: 71%;
  border-bottom: 1px solid #ddd;
  border-radius: 6px 6px 0 0;
}

.member-recommend-more .box .img img,
.member-viewed-more .box .img img {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.member-recommend-more .box .ctrl,
.member-viewed-more .box .ctrl {
  position: absolute;
  top: -10px;
  right: -10px;
  display: flex;
  gap: 2px;
  font-size: 0;
  background-color: transparent;
}

.member-recommend-more .box .ctrl a,
.member-viewed-more .box .ctrl a {
  display: block;
  position: static;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
}

.member-recommend-more .box .ctrl a.cancel,
.member-viewed-more .box .ctrl a.cancel {
  background-image: url(../images/icon/cancel.svg);
}

.member-recommend-more .box .info-title,
.member-viewed-more .box .info-title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(1.125rem, 0.5rem + 1.5625vw, 1.5rem);
  font-weight: 500;
  margin: 0 auto;
  padding-top: 51%;
  line-height: 1.2;
  position: relative;
}

.member-recommend-more .book .info-title,
.member-viewed-more .book .info-title {
  display: none;
}

.member-recommend-more .card .img,
.member-viewed-more .card .img {
  background: #9ccb52;
}

.member-recommend-more .card .img img,
.member-viewed-more .card .img img {
  height: 100%;
  width: auto;
}

.member-recommend-more .book .img,
.member-viewed-more .book .img {
  height: 100%;
  padding-top: 124%;
  border-bottom: 0;
  top: 0;
  left: 0;
  transform: none;
  border-radius: 6px;
  overflow: hidden;
}

.member-recommend-more .book .img img,
.member-viewed-more .book .img img {
  height: 100%;
  width: 100%;
}

.member-recommend-more .btn-box,
.member-viewed-more .btn-box {
  justify-content: flex-end;
  width: 100%;
}

/* .member-recommend-more .box .info-title .txt,
.member-viewed-more .box .info-title .txt {
  width: 100%;
  display: block;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Noto Sans TC";
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 3px 0;
  color: #333;
} */

.member-upload-more .list-wrap .list-box {
  padding: 8px 0;
}

.member-upload-more .list-wrap .list-box li:nth-child(1) {
  width: 30%;
  align-self: center;
}

.member-upload-more .list-wrap .list-box li:nth-child(2) {
  width: 15%;
  align-self: center;
}

.member-upload-more .list-wrap .list-box li:nth-child(2) .box {
  font-size: 1.25rem;
}

.member-upload-more .list-wrap .list-box li:nth-child(3) {
  width: calc(55% - 56px);
  justify-content: center;
  align-self: center;
}

.member-upload-more .list-wrap .list-box li:nth-child(4) {
  width: 56px;
  justify-content: center;
  align-self: center;
}

.member-upload-more .list-wrap .list-box li:nth-child(4) .box {
  position: relative;
  top: 1px;
}

.member-upload-more .list-wrap .list-box li .box {
  gap: 10px;
}

.member-upload-more .list-wrap .list-box li .box .txt {
  align-self: center;
  position: relative;
  top: 3px;
}

.color-select {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-bottom: 30px;
}

.color-select .flex-nowrap {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
}

.color-select .flex-nowrap>label {
  border-radius: 3px;
  width: 25px;
  height: 25px;
}

.item-select .box select.category {
  height: auto;
  margin-bottom: 5px;
}

.item-select .box #unselected_1 {
  height: 180px;
}

.member-top-nav {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: -15px;
}

@media (max-width: 992px) {

  .mydate .upload,
  .mydate .collection {
    width: 100%;
  }

  .member-index .bookmark .wrap .box {
    //width: calc(100% / 4 - 14px);
	width: calc(100% / 4 - 8px * 2);
    position: relative;
  }

  .mydate .collection-more .book-box {
    width: 25%;
  }

  .member-recommend-more .box,
  .member-viewed-more .box {
    width: calc(100% / 4 - 24px);
  }
}

@media (max-width: 820px) {

  .popup-box {
    top: 50%;
    left: 50%;
    max-height: 90%;
    overflow-y: auto;
    transform: translate(-50%, -50%);
  }


}

@media (max-width: 768px) {

  .member-index .bookmark .wrap .box {
    //width: calc(100% / 3 - 14px);
	width: calc(100% / 3 - 8px * 2);
    position: relative;
  }

  .mydate .collection-more .book-box {
    width: calc(100% / 3);
  }

  .mydate .upload .list-wrap .list-box.head,
  .member-upload-more .list-wrap .list-box.head {
    display: none !important;
  }

  .mydate .upload .list-wrap .list-box.list,
  .member-upload-more .list-wrap .list-box.list {
    flex-wrap: wrap;
  }

  .mydate .upload .list-wrap .list-box.list li,
  .member-upload-more .list-wrap .list-box.list li {
    width: 100% !important;
    align-items: center;
  }

  .mydate .upload .list-wrap .list-box.list li .item,
  .member-upload-more .list-wrap .list-box.list li .item {
    display: flex !important;
    width: 96px;
    align-self: center;
    font-weight: 400;
    line-height: 1;
  }

  .mydate .upload .list-wrap .list-box.list li:nth-child(1) .item,
  .member-upload-more .list-wrap .list-box.list li:nth-child(1) .item {
    position: relative;
    top: 2px;
  }

  .mydate .upload .list-wrap .list-box.list li:nth-child(2) .item,
  .member-upload-more .list-wrap .list-box.list li:nth-child(2) .item {
    position: relative;
    top: 2px;
  }

  .member-upload-more .list-wrap .list-box li:nth-child(2) .box .txt {
    top: 1px;
  }

  .mydate .upload .list-wrap .list-box.list li:nth-child(3) .item,
  .member-upload-more .list-wrap .list-box.list li:nth-child(3) .item {
    position: relative;
    top: 2px;
  }

  .mydate .upload .list-wrap .list-box.list li .box,
  .member-upload-more .list-wrap .list-box li .box {
    justify-content: flex-start !important;
    width: calc(100% - 96px) !important;
  }
}

@media (max-width: 640px) {
  .member-index {
    padding: 50px 0 20px 0;
  }

  .popup-bookmark .bookmark-wrap .box,
  .member-index .bookmark .wrap .box {
    //width: calc(100% / 2 - 14px);
	width: calc(100% / 2 - 8px * 2);
    position: relative;
  }

  .member-recommend-more .box .info-title,
  .member-viewed-more .box .info-title {
    height: calc(100vw / 4* 0.74);
    padding-top: 0;
  }

  .member-recommend-more .box,
  .member-viewed-more .box {
    width: calc(100% / 3 - 20px);
  }

  .mydate .collection-more .book-box {
    width: 50%;
  }

  .member-index .recommend .box,
  .member-index .viewed .box,
  .member-recommend-more .box,
  .member-viewed-more .box {
    background-color: #ffffff00 !important;
    border-radius: 8px !important;
    box-shadow: var(--shadow-none) !important;
    border: var(--neutral-border-4) 1px solid !important;
  }

  .member-index .recommend .box .img,
  .member-index .viewed .box .img,
  .member-index .recommend .book .img,
  .member-index .viewed .book .img,
  .member-recommend-more .box .img,
  .member-viewed-more .box .img,
  .member-recommend-more .box .info-title .txt .pc,
  .member-viewed-more .box .info-title .txt .pc {
    display: none !important;
  }

  .member-index .recommend .book .info-title,
  .member-index .viewed .book .info-title,
  .member-recommend .book .info-title,
  .member-viewed .book .info-title,
  .member-recommend-more .book .info-title,
  .member-viewed-more .book .info-title,
  .member-recommend .box .info-title .txt .model,
  .member-viewed .box .info-title .txt .model,
  .member-recommend-more .box .info-title .txt .model,
  .member-viewed-more .box .info-title .txt .model {
    display: block;
  }

  .member-index .recommend .box .info-title .txt,
  .member-index .viewed .box .info-title .txt {
    display: block;
  }

  .mydate .upload .list-wrap {
    overflow-y: hidden;
    max-height: none;
  }

  .member-index .bookmark .header span,
  .member-index .recommend .header span,
  .member-index .viewed .header span {
    font-size: 1.25rem;
  }

  .mydate .upload .header span,
  .mydate .collection .header span {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {

  .popup-bookmark .bookmark-wrap .box,
  .member-index .bookmark .wrap .box {
    width: 100%;
  }

  .member-index .recommend .box .info-title,
  .member-index .viewed .box .info-title {
    font-size: 1.05rem;
  }

  .member-index .bookmark .wrap .box .name {
    padding: 32px 16px 27px 16px;
    min-height: auto;
  }

  .mydate .collection-more .book-box {
    width: 100%;
  }
}

@media (max-width: 430px) {

  .member-recommend-more,
  .member-viewed-more {
    gap: 20px;
  }

  .member-recommend-more .box,
  .member-viewed-more .box {
    width: calc(100% / 3 - 14px);
  }

  .member-index .recommend .box .info-title,
  .member-index .viewed .box .info-title,
  .member-recommend-more .box .info-title,
  .member-viewed-more .box .info-title {
    height: calc(100vw / 4* 0.94);
    padding-top: 0;
  }

}

@media (max-width: 375px) {

  .member-index .recommend .box .info-title .txt .model,
  .member-index .viewed .box .info-title .txt .model,
  .member-recommend-more .box .info-title .txt .model,
  .member-viewed-more .box .info-title .txt .model {
    display: block;
    font-size: 90%;
  }
}