.product-title { font-size: 30px; }

.detail { margin-top: 100px; display: flex; }

.detail .detail-left { width: 540px; margin-right: 50px; }

.detail .detail-left .swiper, .detail .detail-left .swiper-small { height: 480px; }

.detail .detail-left .swiper .swiper-slide, .detail .detail-left .swiper-small .swiper-slide { width: 100%; height: 100%; object-fit: cover; }

.detail .detail-left .swiper-small { height: auto; margin-top: 15px; }

.detail .detail-left .swiper-small .swiper-slide { height: 70px; width: 70px; border: 2px solid transparent; border-radius: 2px; }

.detail .detail-right { flex: 1; overflow: hidden; }

.detail .detail-right .detail-title { font-size: 24px; line-height: 1.8; }

.detail .detail-right .detail-summary { display: flex; align-items: center; margin: 40px 0 20px; }

.detail .detail-right .detail-summary .detail-summary-item { display: flex; align-items: center; padding: 0 10px; line-height: 1; }

.detail .detail-right .detail-summary .detail-summary-item .detail-summary-item-icon { height: 16px; margin-right: 8px; }

.detail .detail-right .detail-summary .detail-summary-item:first-child { border-right: 2px solid #ddd; padding-left: 0; }

.detail .detail-right .detail-desc { list-style: 1.8; }

.detail .detail-right .detail-format { display: flex; flex-wrap: wrap; margin: 50px 0; }

.detail .detail-right .detail-format .detail-format-item { margin-bottom: 15px; width: 40%; }

.detail .detail-right .detail-format .detail-format-item:nth-child(2n) { width: 60%; }

.detail .detail-right .detail-buttons { display: flex; }

.detail .detail-right .detail-buttons .detail-button { width: 136px; height: 40px; line-height: 36px; text-align: center; font-size: 18px; border: 2px solid; color: #2c9a89; margin-right: 20px; }

.detail .detail-right .detail-buttons .detail-button:first-child { color: #fff; }

.content-title { font-size: 26px; font-weight: bold; border-bottom: 1px solid #ddd; padding: 25px 0; margin-top: 60px; }

@media (max-width: 768px) { .product { padding: 0; }
  .detail { display: block; margin-top: 0; }
  .detail .detail-left { width: 100%; }
  .detail .detail-left .swiper { height: 350px; }
  .detail .detail-right { padding: 10px; }
  .detail .detail-right .detail-title { font-size: 16px; height: auto; }
  .detail .detail-right .detail-desc { font-size: 12px; }
  .detail .detail-right .detail-summary { margin: 10px 0; font-size: 12px; }
  .detail .detail-right .detail-format { display: block; margin: 0 0 20px; max-height: 0; transition: all 0.3s; overflow: hidden; }
  .detail .detail-right .detail-format .detail-format-item:nth-child(2n), .detail .detail-right .detail-format .detail-format-item { width: 100%; font-size: 12px; margin-bottom: 6px; }
  .detail .detail-right .detail-format.active { max-height: 1000px; border-bottom: 1px solid #ddd; }
  .detail .detail-right .detail-format-switch { display: flex; justify-content: space-between; align-items: center; height: 36px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin: 20px 0 10px; font-weight: bold; }
  .detail .detail-right .detail-format-switch .detail-format-switch-icon { width: 16px; height: 16px; transform: rotate(90deg); transition: all 0.3s; }
  .detail .detail-right .detail-format-switch.active { border-bottom: none; }
  .detail .detail-right .detail-format-switch.active .detail-format-switch-icon { transform: rotate(270deg); }
  .content-title { padding: 10px; font-size: 18px; margin-top: 40px; }
  .u-richText { padding: 10px; } }