/*
* author : minjeong
* purpose : feelcard.co.kr storefarm mypage
* date: 2025.09.11
*/
/* archive */
#mylist .archive {}

#mylist .archive .category {}

#mylist .category .btn-cate-wrap {
  display: flex;
  align-items: center;
}

#mylist .category .btn-cate-wrap .btn-cate {
  border-radius: 50px;
  background-color: #fff;
  color: var(--gray-400);
  font-size: 14px;
  font-family: var(--font-weight-500);
  cursor: pointer;
  margin-right: 12px;
  flex-shrink: 0;
}

#mylist .category .btn-cate-wrap .btn-cate:not(:has(a)) {
  padding: 13px 22px;
  border-radius: 50px;
  border: 1px solid var(--gray-400);
  background-color: #fff;
  color: var(--gray-400);
  font-size: 16px;
  font-family: var(--font-weight-500);
  cursor: pointer;
  margin-right: 12px;
  flex-shrink: 0;
}

#mylist .category .btn-cate-wrap .btn-cate a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 13px 22px;
  color: var(--gray-400);
}

#mylist .category .btn-cate-wrap .btn-cate.active {
  background-color: #333;
  color: #fff;
}

#mylist .category .btn-cate-wrap .btn-cate.active:not(:has(a)) {
  background-color: #fff;
  border: 1px solid #333;
  color: #333;
}

#mylist .category .btn-cate-wrap .btn-cate.active a {
  color: #fff;
}

/* list - 공통 스타일 (두 번째 파일 기준) */
#mylist .list {}

#mylist .list .list-title {
  font-size: 20px;
  font-family: var(--font-weight-500);
  margin-bottom: 25px;
}

/* list - 리스트 상단 안내 박스 */
#mylist .list .box {
  width: 100%;
  margin-bottom: 40px;
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
}

#mylist .list .box .info-title {
  font-size: 16px;
  font-family: var(--font-weight-500);
  display: flex;
  align-items: center;
  cursor: pointer;
}

#mylist .list .box .info-title i {
  font-size: 20px;
  color: var(--gray-500);
  transition: 0.2s all ease;
  margin-left: 5px;
}

#mylist .list .box .info-title i.deg {
  transform: rotate(180deg);
}

#mylist .list .box .box-list-wrap {}

#mylist .list .box .box-list {
  margin-top: 18px;
  padding-left: 20px;
}

#mylist .list .box .box-list .box-list-item {
  color: var(--gray-700);
  font-size: 14px;
  font-family: var(--font-weight-400);
  line-height: 170%;
  position: relative;
}

#mylist .list .box .box-list .box-list-item::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--gray-700);
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
}

#mylist .list .box .box-list .box-list-item a {
  font-size: 13px;
  margin-left: 10px;
  padding: 5px 12px;
  display: inline-block;
  border-radius: 5px;
  cursor: pointer;
  vertical-align: baseline;
  line-height: 14px;
  background-color: #FFF3F1;
  color: #F54946;
  border: 1px solid #FFF3F1;
}

/* list - 리스트 상단 탭버튼 */
#mylist .list .list-tab {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

#mylist .list .list-tab .tabButton {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-600);
  font-size: 16px;
  font-family: var(--font-weight-500);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

#mylist .list .list-tab .tabButton.active {
  color: var(--primary-300);
  /* border-bottom: 2px solid var(--gray-850); */
}

/* list - 서브 카테고리 */
#mylist .list .sub-category {
  margin-top: 40px;
}

#mylist .list .sub-category .sub-btn-cate-wrap {
  height: 47px;
  display: flex;
  align-items: center;
  border-radius: 12px;
  background-color: #fff;
  position: relative;
}

#mylist .list .sub-category .sub-btn-cate-wrap::after {
  content: '';
  display: block;
  width: 1px;
  height: 18px;
  background-color: var(--gray-400);
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translateY(-50%);
}

#mylist .list .sub-category .sub-btn-cate-wrap .sub-btn-cate {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-family: var(--font-weight-400);
  color: var(--gray-400);
  cursor: pointer;
}

#mylist .list .sub-category .sub-btn-cate-wrap .sub-btn-cate.active {
  color: var(--gray-850);
  font-family: var(--font-weight-500);
}

/* list - 카드 */
#mylist .list .list-item {
  margin-top: 32px;
  margin-bottom: 60px;
}

#mylist .list .list-item .list-card {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

#mylist .list .list-item .list-card .card-wrap {
  width: calc((100% - 20px) / 2);
}

#mylist .list .list-item .list-card .card {
  width: 100%;
  height: 280px;
  padding: 12px;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--gray-50);
  background-image: url('/storefarm/new/img/icon/icon_noimage.png');
  background-size: 100%;
  background-position: 50% 46%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  position: relative;
}

#mylist .list .list-item .list-card .card-wrap.thanks .card .btn.bg {
  background-color: #fff;
  color: var(--primary-500);
  border: 1px solid var(--primary-500);
}

#mylist .list .list-item .list-card .photobg {
  background-image: url('/img/camera.jpg');
}

#mylist .list .list-item .list-card .videomix {
  background-image: url('/img/testimg02.png');
}

/* list - 샘플 디자인 확인(현재사용x) */
#mylist .list .list-item .list-card .card.link a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 1;
}

#mylist .list .list-item .list-card .card.link::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  left: 0;
}

/* list - 제작하기 버튼 */
#mylist .list .list-item .list-card .card.btn {
  background-image: none;
  background-color: var(--gray-50);
  justify-content: center;
}

#mylist .list .list-item .list-card .card.btn a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  background-image: none;
  background-color: var(--gray-50);
}

#mylist .list .list-item .list-card .card.btn a span {
  font-size: 16px;
  color: var(--gray-500);
}

#mylist .list .list-item .list-card .card.btn a i {
  font-size: 40px;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* list - 제작중 화면 */
#mylist .list .list-item .list-card .card .making {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}

#mylist .list .list-item .list-card .card .making .making-icon i {
  color: #fff;
  font-size: 35px;
}

#mylist .list .list-item .list-card .card .making .making-title {
  margin-top: 20px;
  color: #fff;
  font-size: 16px;
  font-family: var(--font-weight-600);
}

#mylist .list .list-item .list-card .card .making .making-text {
  margin-top: 10px;
  color: var(--gray-300);
  font-size: 14px;
  line-height: 140%;
}

#mylist .list .list-item .list-card .card .making .btn.bg {
  margin-top: 15px;
  font-size: 12px;
  height: 30px;
  box-shadow: none;
}

/* list - 카드안의 버튼 */
#mylist .list .list-item .list-card .card .btn {
  height: 45px;
  font-family: var(--font-weight-500);
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  background-color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  position: relative;
}

#mylist .list .list-item .list-card .card .file-input {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

#mylist .list .list-item .list-card .card .btn svg {
  width: 24px;
  height: 24px;
}

#mylist .list .list-item .list-card .card .btn:has(.count) {
  gap: 0;
}

#mylist .list .list-item .list-card .card .btn .count {
  color: var(--primary-500);
}

#mylist .list .list-item .list-card .card .card-top {
  width: 100%;
  display: inline-block;
  justify-content: space-between;
}

#mylist .list .list-item .list-card .card .card-top .card-top-left {
  display: flex;
  gap: 10px;
  float: left;
}

#mylist .list .list-item .list-card .card .card-top .card-top-right {
  display: flex;
  gap: 10px;
  float: right;
}

#mylist .list .list-item .list-card .card .card-top .btn {
  font-size: 24px;
}

#mylist .list .list-item .list-card .card .card-bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#mylist .list .list-item .list-card .card .card-bottom .btn {
  font-size: 13px;
}

#mylist .list .list-item .list-card .card .btn.color {
  color: var(--primary-200);
}

#mylist .list .list-item .list-card .card .btn.bg {
  background-color: var(--primary-200);
  color: #fff;
  border: 1px solid var(--primary-200);
}

#mylist .list .list-item .list-card .card .btn.bg a{
    color: #fff;
}

#mylist .list .list-item .list-card .card .btn.bg.download_btn_mo {
  display: none;
}

#mylist .list .list-item .list-card .card .btn.opacity {
  width: 45px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  backdrop-filter: blur(1px);
}

#mylist .list .list-item .list-card .card .btn.opacity i {
  color: #fff;
}

#mylist .list .list-item .list-card .card .btn.delete {
  width: 45px;
  background-color: #fff;
  color: var(--error);
  background-image: url('/storefarm/new/img/icon/trash.svg');
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}

#mylist .list .list-item .list-card .card .btn.delete i {
  color: var(--error);
}

/* list - 카드안의 뱃지 */
#mylist .list .list-item .list-card .card .btn.badge {
  font-size: 12px;
  padding: 12px 15px;
  border-radius: 8px;
  background-color: var(--primary-000);
  color: var(--primary-500);
  border: 1px solid var(--primary-000);
  float: left;
}

#mylist .list .list-item .list-card .card .btn.badge i {
  color: var(--primary-500);
  font-size: 15px;
}

#mylist .list .list-item .list-card .card .btn.badge.blue {
  background-color: #FFF3F1;
  color: #F54946;
  border: 1px solid #FFF3F1;
}

#mylist .list .list-item .list-card .card .btn.badge.blue i {
  color: #F54946;
}

#mylist .list .list-item .list-card .card .btn.badge.name {
  font-size: 14px;
  background-color: #fff;
  color: var(--gray-700);
  cursor: default;
}

/* list - 카드안의 더보기 버튼 */
#mylist .list .list-item .list-card .card .btn.btn-more {
  width: 45px;
}

#mylist .list .list-item .list-card .card .more-box {
  width: calc(100% - 295px);
  max-height: calc(100% - 77px);
  padding: 16px 0;
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid var(--gray-200);
  overflow: hidden;
  overflow-y: scroll;
  position: absolute;
  right: 12px;
  top: 65px;
  display: none;
}

#mylist .list .list-item .list-card .card .more-box .more-box-inner {
  width: 100%;
  padding: 0 16px;
}

#mylist .list .list-item .list-card .card .more-box .more-box-inner .more-box-list {
  padding: 12px;
  border-radius: 5px;
  font-size: 13px;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

#mylist .list .list-item .list-card .card .more-box .more-box-inner .more-box-list:has(a) {
  padding: 0;
}

#mylist .list .list-item .list-card .card .more-box .more-box-inner-info {
  margin-top: 12px;
  width: 100%;
  padding: 20px 28px;
  background-color: var(--gray-50);
}

#mylist .list .list-item .list-card .card .more-box:has(.more-box-inner-info) {
  padding-bottom: 0;
}

#mylist .list .list-item .list-card .card .more-box .more-box-inner-info .more-box-list {
  font-size: 13px;
  color: var(--gray-700);
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

#mylist .list .list-item .list-card .card .more-box .more-box-inner-info .more-box-list .title {
  width: 20%;
}

#mylist .list .list-item .list-card .card .more-box .more-box-inner-info .more-box-list .date {
  width: 80%;
  color: var(--gray-500);
}

#mylist .list .list-item .list-card .card .more-box .more-box-inner .more-box-list:hover {
  background-color: var(--gray-50);
  font-family: var(--font-weight-500);
  color: var(--gray-850);
}

#mylist .list .list-item .list-card .card .more-box .more-box-inner .more-box-list:hover i {
  color: var(--gray-850);
}

#mylist .list .list-item .list-card .card .more-box .more-box-inner .more-box-list i {
  font-size: 16px;
  color: var(--gray-700);
}

#mylist .list .list-item .list-card .card .more-box .more-box-inner .more-box-list.delete {
  color: var(--error);
}

#mylist .list .list-item .list-card .card .more-box .more-box-inner .more-box-list.delete i {
  color: var(--error);
}

/* list - 카드 아래 카드 정보 */
#mylist .list .list-item .list-card .card-info {
  font-size: 11px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#mylist .list .list-item .list-card .card-info .card-date {
  color: var(--gray-500);
}

#mylist .list .list-item .list-card .card-info .card-name {
  color: var(--gray-500);
}

#mylist .list .list-item .list-card.active {
  display: flex;
}

/* list - 첫 번째 파일만의 특별한 스타일들 */
#mylist .list[data-cate="card"] .list-title font {
  font-size: 12px;
  margin-left: 10px;
  color: #2f2f2f;
}

#mylist .list[data-cate="card"]:has(.list-accordion) .list-item {
  margin-bottom: 20px;
}

#mylist .list[data-cate="card"] .list-item .list-card {
  gap: 20px;
  flex-wrap: wrap;
}

#mylist .list[data-cate="card"] .list-item .list-card::-webkit-scrollbar {
  display: none;
}

#mylist .list[data-cate="card"] .list-item .list-card {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#mylist .list[data-cate="card"] .list-item .list-card .card-wrap {
  width: calc((100% - 60px) / 4);
}

#mylist .list[data-cate="card"] .list-item .list-card .card {
  height: 400px;
  background-size: 20%;
  border: 1px solid #fff;
}

#mylist .list[data-cate="card"] .list-item .list-card .copycard {
  border: 1px solid #fbb899;
}

#mylist .list[data-cate="card"] .list-item .list-card .userimg {
  background-size: 100%;
}

#mylist .list[data-cate="card"] .list-item .list-card .card .main_video {
  width: 100%;
  z-index: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#mylist .list[data-cate="card"] .list-item .list-card .card .card-top {
  /* display: flex; */
  /* justify-content: space-between; */
}

#mylist .list[data-cate="card"] .list-item .list-card .card .card-top .card-top-right {
  float: right;
}

/* list - card badge (첫 번째 파일 전용) */
#mylist .list[data-cate="card"] .list-item .list-card .card .badge-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  float: left;
}

#mylist .list[data-cate="card"] .list-item .list-card .card .btn.badge {
  padding: 12px 10px;
}

#mylist .list[data-cate="card"] .list-item .list-card .card .btn.badge.name {
  background-color: #EBECED;
}

/* list - 더보기 버튼 (첫 번째 파일 전용) */
#mylist .list[data-cate="card"] .list-item .list-card .card .btn.btn-more {
  position: relative;
}

#mylist .list[data-cate="card"] .list-item .list-card .card .more-box {
  width: calc(100% - 24px);
  padding: 16px;
}

#mylist .list[data-cate="card"] .list-item .list-card .card .more-box .more-box-inner {
  padding: 0;
}

#mylist .list[data-cate="card"] .list-item .list-card .card .more-box .more-box-inner .more-box-list {
  border-radius: 10px;
}

#mylist .list[data-cate="card"] .list-item .list-card .card .more-box .more-box-inner .more-box-list .more-box-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  color: var(--gray-700);
  padding: 12px;
}

#mylist .list[data-cate="card"] .list-item .list-card .card .more-box .more-box-inner .more-box-list:hover .more-box-link {
  font-family: var(--font-weight-500);
  color: var(--gray-850);
}

/* list - 카드 이름 (첫 번째 파일 전용) */
#mylist .list[data-cate="card"] .list-item .list-card .card-info {
  padding: 10px 12px 0;
}

/* list-none */
#mylist .list-none {
  width: 100%;
}

#mylist .list-none .content {
  text-align: center;
  margin: 150px auto;
}

#mylist .list-none .content .content-img {
  width: 116px;
  margin: 0 auto;
}

#mylist .list-none .content .content-img img {
  width: 100%;
}

#mylist .list-none .content .content-desc {
  text-align: center;
  margin: 16px 0 24px;
}

#mylist .list-none .content .content-desc .tit {
  font-size: 16px;
  font-family: var(--font-weight-600);
  margin-bottom: 10px;
}

#mylist .list-none .content .content-desc .txt {
  font-size: 14px;
  font-family: var(--font-weight-500);
  color: var(--gray-500);
}

#mylist .list-none .content .content-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

#mylist .list-none .content .content-btn .btn a {
  width: 160px;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid var(--gray-600);
  color: var(--gray-600);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* advertise */
#mylist .advertise {}

#mylist .advertise .section-title {
  text-align: center;
}

#mylist .advertise .box-list-wrap {
  width: 100%;
}

#mylist .advertise .box-list-wrap .box-list {
  display: flex;
  gap: 12px;
}

#mylist .advertise .box-list-wrap .box-list .box {
  width: calc((100% - 24px) / 3);
  height: 160px;
  border-radius: 8px;
  background-color: #ddd;
  overflow: hidden;
}

#mylist .advertise .box-list-wrap .box-list .box a {
  display: block;
  width: 100%;
  height: 100%;
}

#mylist .advertise .box-list-wrap .box-list .box a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#mylist .btn-naver {
  width: 50px;
  height: 50px;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border-radius: 12px;
  box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.08), inset 0 0 8px 0 rgba(0, 0, 0, 0.08);
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 1000;
  cursor: pointer;
  transition: transform 0.3s ease;
}

#mylist .btn-naver:hover {
  transform: translateY(-8px);
}

#mylist .btn-naver a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #34c759;
  text-decoration: none;
  font-family: 'Pretendard-Regular';
  font-weight: 900;
  font-size: 24px;
}

.product-category-list {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 1000px;
  margin: auto;
  padding: 40px 0 0;
}

.product-category-list::-webkit-scrollbar {
  display: none;
}

.product-category-list .list-item.active {
  background-color: var(--gray-900);
  color: #fff;
}

.product-category-list a {
  color: inherit;
  text-decoration: none;
  display: block;
  flex-shrink: 0;
}

.product-category-list a .list-item {
  font-size: 14px;
  line-height: 132%;
  padding: 10px 20px;
  border-radius: 20px;
  background-color: #fff;
  border: 1px solid #EFEFEF;
  color: var(--gray-800);
  font-family: var(--font-weight-400);
  cursor: pointer;
  flex-shrink: 0;
}

.product-category-list .list-item.active a {
  color: inherit;
}

@media screen and (max-width:767px) {
  #mylist section {
    width: auto;
    margin: 0 auto 40px;
    padding: 0 5%;
  }

  #mylist .btn-naver {
    width: 50px;
    height: 50px;
    right: 10px;
    bottom: 10px;
  }

  #mylist .section-title {
    font-size: 20px;
    margin-bottom: 18px;
  }

  /* archive */
  #mylist .archive {
    padding: 0;
    margin-left: 24px;
  }

  #mylist .archive .category {}

  #mylist .archive .category .btn-cate-wrap {
    display: flex;
    align-items: center;
    overflow-x: scroll;
  }

  #mylist .archive .category .btn-cate-wrap::-webkit-scrollbar {
    display: none;
  }

  #mylist .archive .category .btn-cate-wrap {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #mylist .archive .category .btn-cate-wrap .btn-cate {
    font-size: 14px;
    margin-right: 8px;
  }

  #mylist .archive .category .btn-cate-wrap .btn-cate a {
    font-size: 14px;
    padding: 11px 18px;
  }

  /* list - 공통 모바일 */
  #mylist .list {
    width: 100%;
  }

  #mylist .list .list-item .list-title {
    font-size: 18px;
    margin-bottom: 22px;
  }

  #mylist .list .list-item .list-card .card-wrap {
    width: 100%;
  }

  #mylist .list .list-item .list-card .card {
    height: 60vw;
  }

  #mylist .list .list-item .list-card .card.btn {
    height: 25vw;
  }

  #mylist .list[data-cate="card"] .list-item .list-card .card .more-box {
    width: calc(100% - 40%);
  }

  #mylist .list .list-item .list-card .card .more-box {
    width: calc(100% - 40%);
  }

  #mylist .list .list-tab {
    flex-wrap: wrap;
    gap: 12px;
  }

  #mylist .list .list-tab .tabButton {
    height: auto;
    text-align: center;
    word-break: keep-all;
    line-height: 140%;
    padding-bottom: 10px;
    flex: 0 0 calc((100% - 24px) / 3);
  }

  /* list - 첫 번째 파일 모바일 */
  #mylist .list[data-cate="card"] {
    padding: 0;
    padding-left: 24px;
    padding-right: 24px;
  }

  #mylist .list[data-cate="card"] .list-title {
    font-size: 18px;
    margin-bottom: 22px;
  }

  #mylist .list[data-cate="card"] .list-accordion {
    margin-right: 24px;
  }

  #mylist .list[data-cate="card"] .list-item .list-card {
    width: auto;
    overflow-x: scroll;
  }

  #mylist .list[data-cate="card"] .list-item .list-card .card-wrap {
    width: 100%;
  }

  #mylist .list[data-cate="card"] .list-item .list-card .card {
    height: 140vw;
  }

  #mylist .list[data-cate="card"] .list-item .list-card .card.btn {
    height: 25vw;
  }

  #mylist .list .box .box-list .box-list-item::before {
    transform: translateY(0);
    top: 11px;
  }

  /* advertise */
  #mylist .advertise {
    width: 100%;
  }

  #mylist .advertise .box-list-wrap .box-list {
    flex-wrap: wrap;
  }

  #mylist .advertise .box-list-wrap .box-list .box {
    width: 100%;
    height: 50vw;
  }
}

@media screen and (max-width: 1024px) {
  #mylist .list .list-item .list-card .card .btn.bg.download_btn_pc {
    display: none;
  }

  #mylist .list .list-item .list-card .card .btn.bg.download_btn_mo {
    display: flex;
  }

  .product-category-list {
    width: 100%;
    padding: 32px 24px;
    gap: 10px;
  }

  .product-category-list .list-item {
    font-size: 14px;
    padding: 8px 18px;
  }
}

@media screen and (max-width: 768px) {
  #mylist .list .list-item .list-card .card .btn.bg.download_btn_pc {
    display: none;
  }

  #mylist .list .list-item .list-card .card .btn.bg.download_btn_mo {
    display: flex;
  }

  .product-category-list {
    padding: 24px 16px;
    gap: 8px;
  }

  .product-category-list .list-item {
    font-size: 14px;
    padding: 8px 16px;
    line-height: 130%;
  }
}