.main-content .hero-section {
  position: relative;
  height: calc(861 / var(--fontsize) * 1rem);
  padding-top: calc(115 / var(--fontsize) * 1rem);
  background-image: url("../images/home/carousel.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main-content .hero-section .hero-container {
  position: relative;
  height: 100%;
  padding: 0 calc(206 / var(--fontsize) * 1rem) 0 calc(261 / var(--fontsize) * 1rem);
  background: url("../images/home/hero-bg.png") no-repeat center center;
  background-size: 100% 100%;
}

.main-content .hero-section .hero-container .hero-content {
  display: flex;
  align-items: center;
  width: 100%;
  gap: calc(69 / var(--fontsize) * 1rem);
}

.main-content .hero-section .hero-container .hero-content .hero-left {
  flex: 1;
}

.main-content .hero-section .hero-container .hero-content .hero-left .hero-title-wrapper .hero-title-main {
  margin-bottom: calc(24 / var(--fontsize) * 1rem);
  font-size: calc(60 / var(--fontsize) * 1rem);
  font-weight: bold;
  color: #fff;
  position: relative;
}

.main-content .hero-section .hero-container .hero-content .hero-left .hero-title-wrapper .hero-title-main .hero-badge {
  position: absolute;
  top: calc(-46 / var(--fontsize) * 1rem);
  right: calc(90 / var(--fontsize) * 1rem);
  padding-bottom: calc(8 / var(--fontsize) * 1rem);
  width: calc(205 / var(--fontsize) * 1rem);
  height: calc(50 / var(--fontsize) * 1rem);
  border-radius: calc(16 / var(--fontsize) * 1rem);
  font-size: calc(20 / var(--fontsize) * 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  background: url("../images/home/badge.png") no-repeat center center;
  background-size: 100% 100%;
}

.main-content .hero-section .hero-container .hero-content .hero-left .hero-title-wrapper .hero-title-highlight {
  margin-bottom: calc(29 / var(--fontsize) * 1rem);
  color: #ff3c82;
  font-size: calc(60 / var(--fontsize) * 1rem);
  font-weight: 700;
}

.main-content .hero-section .hero-container .hero-content .hero-left .hero-title-wrapper .hero-subtitle {
  color: #fff;
  font-size: calc(28 / var(--fontsize) * 1rem);
  margin-bottom: calc(76 / var(--fontsize) * 1rem);
}

.main-content .hero-section .hero-container .hero-content .hero-left .hero-features {
  display: flex;
  align-items: center;
  gap: calc(24 / var(--fontsize) * 1rem);
}

.main-content .hero-section .hero-container .hero-content .hero-left .hero-features .hero-feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(24 / var(--fontsize) * 1rem);
}

.main-content .hero-section .hero-container .hero-content .hero-left .hero-features .hero-feature-item img {
  width: calc(62 / var(--fontsize) * 1rem);
  height: calc(61 / var(--fontsize) * 1rem);
}

.main-content .hero-section .hero-container .hero-content .hero-left .hero-features .hero-feature-item .hero-feature-text {
  font-size: calc(20 / var(--fontsize) * 1rem);
  color: white;
  font-weight: 400;
}

.main-content .hero-section .hero-container .hero-content .hero-left .hero-buttons {
  display: flex;
  align-items: center;
  gap: calc(56 / var(--fontsize) * 1rem);
  justify-content: center;
  margin-top: calc(48 / var(--fontsize) * 1rem);
}

.main-content .hero-section .hero-container .hero-content .hero-left .hero-buttons .hero-btn {
  width: calc(286 / var(--fontsize) * 1rem);
  height: calc(82 / var(--fontsize) * 1rem);
  border-radius: calc(12 / var(--fontsize) * 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(24 / var(--fontsize) * 1rem);
  font-size: calc(28 / var(--fontsize) * 1rem);
  cursor: pointer;
  border: none;
  color: white;
  font-weight: 400;
  transition: all 0.3s ease;
}

.main-content .hero-section .hero-container .hero-content .hero-left .hero-buttons .hero-btn .windows-icon {
  width: calc(40 / var(--fontsize) * 1rem);
  height: calc(40 / var(--fontsize) * 1rem);
}

.main-content .hero-section .hero-container .hero-content .hero-left .hero-buttons .hero-btn .mac-icon {
  width: calc(33 / var(--fontsize) * 1rem);
  height: calc(40 / var(--fontsize) * 1rem);
}

.main-content .hero-section .hero-container .hero-content .hero-left .hero-buttons .hero-btn .second-icon {
  width: calc(36 / var(--fontsize) * 1rem);
  height: calc(32 / var(--fontsize) * 1rem);
}

.main-content .hero-section .hero-container .hero-content .hero-left .hero-buttons .hero-btn.hero-btn-primary {
  background: linear-gradient(244.07deg, #ff759f 47.24%, #ff196e 120.34%);
}

.main-content .hero-section .hero-container .hero-content .hero-left .hero-buttons .hero-btn.hero-btn-primary:hover {
  background: linear-gradient(244.07deg, #ff3c81, #ff3c81);
}

.main-content .hero-section .hero-container .hero-content .hero-left .hero-buttons .hero-btn.hero-btn-secondary {
  background: linear-gradient(244.07deg, rgba(255, 117, 159, 0.25) 47.24%, rgba(255, 25, 110, 0.25) 120.34%);
  border: 1px solid #ff3c81;
}

.main-content .hero-section .hero-container .hero-content .hero-left .hero-buttons .hero-btn.hero-btn-secondary:hover {
  background: #ff3c81;
}

.main-content .hero-section .hero-container .hero-content .hero-right {
  width: calc(767 / var(--fontsize) * 1rem);
  height: calc(524 / var(--fontsize) * 1rem);
}

.main-content .hero-section .hero-container .hero-stats {
  display: flex;
  align-items: center;
  padding-left: calc(200 / var(--fontsize) * 1rem);
  gap: calc(72 / var(--fontsize) * 1rem);
  margin-top: calc(80 / var(--fontsize) * 1rem);
}

.main-content .hero-section .hero-container .hero-stats .hero-stat-item {
  color: white;
}

.main-content .hero-section .hero-container .hero-stats .hero-stat-item .hero-stat-label {
  font-size: calc(28 / var(--fontsize) * 1rem);
  font-weight: 400;
}

.main-content .hero-section .hero-container .hero-stats .hero-stat-item .hero-stat-number {
  font-size: calc(48 / var(--fontsize) * 1rem);
  font-weight: 700;
  margin: 0 calc(24 / var(--fontsize) * 1rem);
}

.main-content .hero-section .hero-container .hero-stats .hero-stat-item .hero-stat-unit {
  font-size: calc(28 / var(--fontsize) * 1rem);
  font-weight: 400;
}

.main-content .hero-section .hero-container .hero-stats .hero-stat-divider {
  height: calc(48 / var(--fontsize) * 1rem);
  border-right: 1px solid #ff3c82;
}

.main-content .part1-section {
  margin-top: calc(63 / var(--fontsize) * 1rem);
}

.main-content .part1-section .tabs {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: calc(87 / var(--fontsize) * 1rem);
}

.main-content .part1-section .tabs .tab-item {
  width: calc(196 / var(--fontsize) * 1rem);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.main-content .part1-section .tabs .tab-item::after {
  content: "";
  position: absolute;
  bottom: calc(-16 / var(--fontsize) * 1rem);
  width: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(8 / var(--fontsize) * 1rem);
  background-color: #ff3c82;
  transition: width 0.3s ease;
}

.main-content .part1-section .tabs .tab-item .tab-wrapper {
  width: calc(196 / var(--fontsize) * 1rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.main-content .part1-section .tabs .tab-item .tab-wrapper .tab-icon-wrapper {
  width: calc(80 / var(--fontsize) * 1rem);
  height: calc(74 / var(--fontsize) * 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-content .part1-section .tabs .tab-item .tab-wrapper .tab-icon {
  width: calc(60 / var(--fontsize) * 1rem);
  height: calc(60 / var(--fontsize) * 1rem);
  display: block;
}

.main-content .part1-section .tabs .tab-item .tab-wrapper .tab-bar {
  font-size: calc(24 / var(--fontsize) * 1rem);
  color: #333333;
  font-weight: 400;
  text-align: center;
  margin-top: calc(16 / var(--fontsize) * 1rem);
  line-height: calc(37 / var(--fontsize) * 1rem);
}

.main-content .part1-section .tabs .tab-item.active .tab-wrapper .tab-bar {
  color: #ff3c82;
  font-weight: bold;
}

.main-content .part1-section .tabs .tab-item.active .tab-wrapper .tab-icon {
  width: calc(80 / var(--fontsize) * 1rem);
  height: calc(74 / var(--fontsize) * 1rem);
  display: block;
}

.main-content .part1-section .tabs .tab-item.active::after {
  content: "";
  width: 100%;
  height: calc(8 / var(--fontsize) * 1rem);
  background-color: #ff3c82;
}

.main-content .part1-section .part1-content .part1-content-item {
  display: none;
  align-items: center;
  justify-content: center;
  gap: calc(73 / var(--fontsize) * 1rem);
  padding-top: calc(116 / var(--fontsize) * 1rem);
  padding-bottom: calc(110 / var(--fontsize) * 1rem);
}

.main-content .part1-section .part1-content .part1-content-item.active {
  display: flex;
}

.main-content .part1-section .part1-content .part1-content-item:nth-child(1) .part1-image {
  width: calc(712 / var(--fontsize) * 1rem);
}

.main-content .part1-section .part1-content .part1-content-item:nth-child(2) .part1-image {
  width: calc(712 / var(--fontsize) * 1rem);
}

.main-content .part1-section .part1-content .part1-content-item:nth-child(3) .part1-image {
  width: calc(721 / var(--fontsize) * 1rem);
}

.main-content .part1-section .part1-content .part1-content-item:nth-child(4) .part1-image {
  width: calc(758 / var(--fontsize) * 1rem);
}

.main-content .part1-section .part1-content .part1-content-item:nth-child(5) .part1-image {
  width: calc(763 / var(--fontsize) * 1rem);
}

.main-content .part1-section .part1-content .part1-content-item .part1-text {
  display: flex;
  flex-direction: column;
}

.main-content .part1-section .part1-content .part1-content-item .part1-text .part1-title {
  font-size: calc(36 / var(--fontsize) * 1rem);
  font-weight: 400;
  color: #333333;
  line-height: calc(48 / var(--fontsize) * 1rem);
}

.main-content .part1-section .part1-content .part1-content-item .part1-text .part1-title .part1-highlight {
  color: #ff3c82;
  font-weight: bold;
}

.main-content .part1-section .part1-content .part1-content-item .part1-text .part1-desc {
  font-size: calc(24 / var(--fontsize) * 1rem);
  line-height: calc(32 / var(--fontsize) * 1rem);
  color: #333;
  margin-top: calc(20 / var(--fontsize) * 1rem);
}

.main-content .part1-section .part1-content .part1-content-item .part1-text .part1-detail {
  font-size: calc(16 / var(--fontsize) * 1rem);
  color: #666;
  margin-top: calc(40 / var(--fontsize) * 1rem);
  line-height: calc(40 / var(--fontsize) * 1rem);
}

.main-content .part1-section .part1-content .part1-content-item .part1-text .part1-features {
  margin-top: calc(60 / var(--fontsize) * 1rem);
}

.main-content .part1-section .part1-content .part1-content-item .part1-text .part1-features .part1-feature-row {
  display: flex;
  align-items: center;
  gap: calc(147 / var(--fontsize) * 1rem);
}

.main-content .part1-section .part1-content .part1-content-item .part1-text .part1-features .part1-feature-row:not(:first-child) {
  margin-top: calc(49 / var(--fontsize) * 1rem);
}

.main-content .part1-section .part1-content .part1-content-item .part1-text .part1-features .part1-feature-row .part1-feature-item {
  font-size: calc(28 / var(--fontsize) * 1rem);
  line-height: calc(37 / var(--fontsize) * 1rem);
  color: #333;
}

.main-content .part2-section {
  background: rgba(250, 250, 250, 0.98);
  padding: calc(80 / var(--fontsize) * 1rem) calc(236 / var(--fontsize) * 1rem) calc(94 / var(--fontsize) * 1rem) calc(261 / var(--fontsize) * 1rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(86 / var(--fontsize) * 1rem);
}

.main-content .part2-section .title {
  font-size: calc(60 / var(--fontsize) * 1rem);
  font-weight: 700;
  color: #333;
  line-height: calc(63 / var(--fontsize) * 1rem);
}

.main-content .part2-section .content {
  display: flex;
  gap: calc(73 / var(--fontsize) * 1rem);
}

.main-content .part2-section .content .list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(48 / var(--fontsize) * 1rem);
}

.main-content .part2-section .content .list .item {
  width: calc(576 / var(--fontsize) * 1rem);
  padding: calc(27 / var(--fontsize) * 1rem) calc(36 / var(--fontsize) * 1rem);
  border-radius: calc(24 / var(--fontsize) * 1rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.main-content .part2-section .content .list .item .item-title {
  font-size: calc(24 / var(--fontsize) * 1rem);
  font-weight: 700;
  color: #333;
  line-height: calc(32 / var(--fontsize) * 1rem);
  margin-bottom: calc(16 / var(--fontsize) * 1rem);
}

.main-content .part2-section .content .list .item .item-desc {
  font-size: calc(16 / var(--fontsize) * 1rem);
  color: #333;
  line-height: calc(21 / var(--fontsize) * 1rem);
  font-weight: 400;
}

.main-content .part2-section .content .list .item.active {
  background: linear-gradient(244.07deg, rgba(255, 60, 130, 0.1) 47.24%, rgba(255, 60, 130, 0.05) 120.34%);
}

.main-content .part2-section .content .list .item.active .item-title {
  color: #ff3c82;
}

.main-content .part2-section .content .images {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc(820 / var(--fontsize) * 1rem);
}

.main-content .part2-section .content .images .image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-content .part2-section .content .images .image[data-index="0"] {
  flex: 0 0 calc(800 / var(--fontsize) * 1rem);
  width: calc(800 / var(--fontsize) * 1rem);
  height: calc(620 / var(--fontsize) * 1rem);
}

.main-content .part2-section .content .images .image[data-index="1"] {
  flex: 0 0 calc(808 / var(--fontsize) * 1rem);
  width: calc(808 / var(--fontsize) * 1rem);
  height: calc(562 / var(--fontsize) * 1rem);
}

.main-content .part2-section .content .images .image[data-index="2"] {
  flex: 0 0 calc(820 / var(--fontsize) * 1rem);
  width: calc(820 / var(--fontsize) * 1rem);
  height: calc(461 / var(--fontsize) * 1rem);
}

.main-content .part2-section .content .images .image[data-index="3"] {
  flex: 0 0 calc(814 / var(--fontsize) * 1rem);
  width: calc(814 / var(--fontsize) * 1rem);
  height: calc(494 / var(--fontsize) * 1rem);
}

.main-content .part2-section .content .images .image.active {
  opacity: 1;
}

.main-content .part3-section {
  padding: calc(100 / var(--fontsize) * 1rem) calc(272 / var(--fontsize) * 1rem) calc(127 / var(--fontsize) * 1rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(76 / var(--fontsize) * 1rem);
}

.main-content .part3-section .title {
  font-size: calc(63 / var(--fontsize) * 1rem);
  font-weight: 700;
  color: #333;
  line-height: calc(63 / var(--fontsize) * 1rem);
}

.main-content .part3-section .grid {
  display: flex;
  gap: calc(24 / var(--fontsize) * 1rem);
}

.main-content .part3-section .grid .item {
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: calc(20 / var(--fontsize) * 1rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.main-content .part3-section .grid .item .item-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
}

.main-content .part3-section .grid .item .item-overlay .item-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 / var(--fontsize) * 1rem);
}

.main-content .part3-section .grid .item .item-overlay .item-content .item-title {
  height: calc(76 / var(--fontsize) * 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(24 / var(--fontsize) * 1rem);
  font-weight: 700;
  color: white;
}

.main-content .part3-section .grid .item .item-overlay .item-content .item-desc {
  width: calc(262 / var(--fontsize) * 1rem);
  font-size: calc(20 / var(--fontsize) * 1rem);
  color: white;
  text-align: center;
}

.main-content .part3-section .grid .item .item-bar {
  width: 100%;
  height: calc(24 / var(--fontsize) * 1rem);
}

.main-content .part3-section .grid .item .item-footer {
  width: 100%;
  height: calc(76 / var(--fontsize) * 1rem);
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(24 / var(--fontsize) * 1rem);
  font-weight: 700;
  color: white;
}

.main-content .part3-section .grid .item:hover .item-overlay {
  display: flex;
}

.main-content .part3-section .grid .item:hover .item-bar,
.main-content .part3-section .grid .item:hover .item-footer {
  display: none;
}

.main-content .part3-section .grid .item[data-bg="bg1"]:hover .item-overlay {
  background: linear-gradient(244.07deg, rgba(216, 150, 255, 0.85) 47.24%, rgba(196, 196, 196, 0.3825) 120.34%);
}

.main-content .part3-section .grid .item[data-bg="bg2"]:hover .item-overlay {
  background: linear-gradient(244.07deg, rgba(135, 255, 155, 0.85) 47.24%, rgba(196, 196, 196, 0.3825) 120.34%);
}

.main-content .part3-section .grid .item[data-bg="bg3"]:hover .item-overlay {
  background: linear-gradient(244.07deg, rgba(255, 220, 64, 0.85) 47.24%, rgba(196, 196, 196, 0.3825) 120.34%);
}

.main-content .part3-section .grid .item[data-bg="bg4"]:hover .item-overlay {
  background: linear-gradient(244.07deg, rgba(255, 135, 178, 0.85) 47.24%, rgba(196, 196, 196, 0.3825) 120.34%);
}

.main-content .part3-section .grid .item[data-bg="bg5"]:hover .item-overlay {
  background: linear-gradient(244.07deg, rgba(135, 195, 255, 0.85) 47.24%, rgba(196, 196, 196, 0.3825) 120.34%);
}

.main-content .part3-section .grid .item[data-bg="bg1"] .item-bar {
  background: linear-gradient(244.07deg, rgba(216, 150, 255, 0.85) 47.24%, rgba(196, 196, 196, 0.3825) 120.34%);
}

.main-content .part3-section .grid .item[data-bg="bg2"] .item-bar {
  background: linear-gradient(244.07deg, rgba(135, 255, 155, 0.85) 47.24%, rgba(196, 196, 196, 0.3825) 120.34%);
}

.main-content .part3-section .grid .item[data-bg="bg3"] .item-bar {
  background: linear-gradient(244.07deg, rgba(255, 220, 64, 0.85) 47.24%, rgba(196, 196, 196, 0.3825) 120.34%);
}

.main-content .part3-section .grid .item[data-bg="bg4"] .item-bar {
  background: linear-gradient(244.07deg, rgba(255, 135, 178, 0.85) 47.24%, rgba(196, 196, 196, 0.3825) 120.34%);
}

.main-content .part3-section .grid .item[data-bg="bg5"] .item-bar {
  background: linear-gradient(244.07deg, rgba(135, 195, 255, 0.85) 47.24%, rgba(196, 196, 196, 0.3825) 120.34%);
}

.main-content .part3-section .grid .item.item-tall {
  width: calc(326 / var(--fontsize) * 1rem);
  height: calc(476 / var(--fontsize) * 1rem);
}

.main-content .part3-section .grid .item.item-wide {
  width: calc(676 / var(--fontsize) * 1rem);
  height: calc(226 / var(--fontsize) * 1rem);
}

.main-content .part3-section .grid .item.item-wide .item-content .item-desc {
  width: calc(400 / var(--fontsize) * 1rem);
}

.main-content .part3-section .grid .middle {
  display: flex;
  flex-direction: column;
  gap: calc(24 / var(--fontsize) * 1rem);
}

.main-content .part3-section .grid .middle .bottom {
  display: flex;
  gap: calc(24 / var(--fontsize) * 1rem);
}

.main-content .part3-section .grid .middle .bottom .item {
  width: calc(326 / var(--fontsize) * 1rem);
  height: calc(226 / var(--fontsize) * 1rem);
}

.main-content .part3-section .grid .middle .bottom .item .item-content .item-desc {
  width: calc(195 / var(--fontsize) * 1rem);
}

.main-content .part4-section {
  background: rgba(250, 250, 250, 0.98);
  padding: calc(80 / var(--fontsize) * 1rem) 0 calc(80 / var(--fontsize) * 1rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(79 / var(--fontsize) * 1rem);
  overflow: hidden;
}

.main-content .part4-section .title {
  font-size: calc(60 / var(--fontsize) * 1rem);
  font-weight: 700;
  color: #333;
  line-height: calc(63 / var(--fontsize) * 1rem);
}

.main-content .part4-section .carousel {
  width: calc(1200 / var(--fontsize) * 1rem);
  margin: 0 auto;
}

.main-content .part4-section .carousel .swiper-container {
  width: 100%;
  max-width: calc(1400 / var(--fontsize) * 1rem);
  margin: 0 auto;
  padding-bottom: calc(50 / var(--fontsize) * 1rem);
}

.main-content .part4-section .carousel .swiper-container .swiper-slide {
  width: calc(468 / var(--fontsize) * 1rem);
  height: calc(274 / var(--fontsize) * 1rem);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: calc(4 / var(--fontsize) * 1rem);
  transition: all 300ms ease;
  transform: scale(0.85);
  opacity: 0.7;
  z-index: 1;
}

.main-content .part4-section .carousel .swiper-container .swiper-slide.swiper-slide-active, .main-content .part4-section .carousel .swiper-container .swiper-slide.swiper-slide-duplicate-active {
  transform: scale(1);
  opacity: 1;
  z-index: 10;
}

.main-content .part4-section .carousel .swiper-container .swiper-slide.swiper-slide-prev, .main-content .part4-section .carousel .swiper-container .swiper-slide.swiper-slide-duplicate-prev {
  transform: scale(0.85) translateX(calc(80 / var(--fontsize) * 1rem));
  z-index: 5;
}

.main-content .part4-section .carousel .swiper-container .swiper-slide.swiper-slide-next, .main-content .part4-section .carousel .swiper-container .swiper-slide.swiper-slide-duplicate-next {
  transform: scale(0.85) translateX(calc(-80 / var(--fontsize) * 1rem));
  z-index: 5;
}

.main-content .part4-section .carousel .swiper-container .item {
  width: 100%;
  height: calc(230 / var(--fontsize) * 1rem);
  background: white;
  border-radius: calc(16 / var(--fontsize) * 1rem);
  padding: calc(54 / var(--fontsize) * 1rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: calc(19 / var(--fontsize) * 1rem);
  box-shadow: 0 0 calc(20 / var(--fontsize) * 1rem) rgba(0, 0, 0, 0.06);
  position: relative;
}

.main-content .part4-section .carousel .swiper-container .item .avatar {
  position: absolute;
  top: calc(-39 / var(--fontsize) * 1rem);
  left: 50%;
  transform: translateX(-50%);
  width: calc(78 / var(--fontsize) * 1rem);
  height: calc(78 / var(--fontsize) * 1rem);
  border-radius: 50%;
  overflow: hidden;
  z-index: 40;
}

.main-content .part4-section .carousel .swiper-container .item .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-content .part4-section .carousel .swiper-container .item .stars {
  display: flex;
  gap: calc(9 / var(--fontsize) * 1rem);
}

.main-content .part4-section .carousel .swiper-container .item .stars svg {
  width: calc(29 / var(--fontsize) * 1rem);
  height: calc(28 / var(--fontsize) * 1rem);
}

.main-content .part4-section .carousel .swiper-container .item .content {
  text-align: center;
  color: #333;
  font-size: calc(14 / var(--fontsize) * 1rem);
  font-weight: 400;
  line-height: calc(18 / var(--fontsize) * 1rem);
}

.main-content .part4-section .carousel .swiper-container .item .user {
  color: #333;
  font-size: calc(14 / var(--fontsize) * 1rem);
  font-weight: 400;
  line-height: calc(18 / var(--fontsize) * 1rem);
}

.main-content .part4-section .carousel .swiper-container .swiper-pagination {
  bottom: 0;
}

.main-content .part4-section .carousel .swiper-container .swiper-pagination .swiper-pagination-bullet {
  width: calc(8 / var(--fontsize) * 1rem);
  height: calc(8 / var(--fontsize) * 1rem);
  background: #d9d9d9;
  opacity: 1;
}

.main-content .part4-section .carousel .swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #ff3c82;
}

.main-content .part5-section {
  padding: calc(60 / var(--fontsize) * 1rem) calc(276 / var(--fontsize) * 1rem) calc(90 / var(--fontsize) * 1rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(76 / var(--fontsize) * 1rem);
}

.main-content .part5-section .title {
  font-size: calc(48 / var(--fontsize) * 1rem);
  font-weight: 700;
  color: #333;
  line-height: calc(63 / var(--fontsize) * 1rem);
}

.main-content .part5-section .content {
  display: flex;
  gap: calc(56 / var(--fontsize) * 1rem);
}

.main-content .part5-section .content .box {
  width: calc(656 / var(--fontsize) * 1rem);
  height: calc(576 / var(--fontsize) * 1rem);
  border-radius: calc(20 / var(--fontsize) * 1rem);
  overflow: hidden;
  box-shadow: 0 0 calc(20 / var(--fontsize) * 1rem) rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}

.main-content .part5-section .content .box .box-header {
  height: calc(138 / var(--fontsize) * 1rem);
  background-size: cover;
  background-repeat: no-repeat;
  padding: calc(36 / var(--fontsize) * 1rem) 0 0 calc(24 / var(--fontsize) * 1rem);
}

.main-content .part5-section .content .box .box-header .box-title {
  font-size: calc(32 / var(--fontsize) * 1rem);
  font-weight: 700;
  color: #ff3c82;
  position: relative;
  line-height: calc(42 / var(--fontsize) * 1rem);
}

.main-content .part5-section .content .box .box-header .box-title::after {
  content: "";
  position: absolute;
  bottom: calc(-14 / var(--fontsize) * 1rem);
  left: calc(8 / var(--fontsize) * 1rem);
  width: calc(18 / var(--fontsize) * 1rem);
  height: calc(5 / var(--fontsize) * 1rem);
  background: #ff3c82;
  border-radius: calc(50 / var(--fontsize) * 1rem);
}

.main-content .part5-section .content .box .box-list {
  flex: 1;
  padding: calc(16 / var(--fontsize) * 1rem) calc(24 / var(--fontsize) * 1rem);
  display: flex;
  flex-direction: column;
  gap: calc(20 / var(--fontsize) * 1rem);
}

.main-content .part5-section .content .box .box-list .box-item {
  display: flex;
  align-items: center;
  gap: calc(8 / var(--fontsize) * 1rem);
  text-decoration: none;
  cursor: pointer;
}

.main-content .part5-section .content .box .box-list .box-item .item-icon {
  flex: 0 0 calc(24 / var(--fontsize) * 1rem);
  width: calc(24 / var(--fontsize) * 1rem);
  height: calc(24 / var(--fontsize) * 1rem);
}

.main-content .part5-section .content .box .box-list .box-item .item-title {
  flex: 0 0 calc(316 / var(--fontsize) * 1rem);
  color: #333;
  font-size: calc(16 / var(--fontsize) * 1rem);
  font-weight: 400;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-content .part5-section .content .box .box-list .box-item .date {
  color: #666666;
  font-size: calc(13 / var(--fontsize) * 1rem);
  font-weight: 400;
  margin-left: auto;
}

.main-content .part5-section .content .box .box-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(6 / var(--fontsize) * 1rem);
  border-top: 1px solid #f0f0f0;
  height: calc(54 / var(--fontsize) * 1rem);
}

.main-content .part5-section .content .box .box-footer a {
  font-size: calc(16 / var(--fontsize) * 1rem);
  color: #333;
  text-decoration: none;
}

.main-content .part5-section .content .box .box-footer .arrow-icon {
  width: calc(12 / var(--fontsize) * 1rem);
  height: calc(12 / var(--fontsize) * 1rem);
}