{"id":20,"date":"2026-05-25T23:36:16","date_gmt":"2026-05-25T15:36:16","guid":{"rendered":"http:\/\/47.238.75.54\/?page_id=20"},"modified":"2026-10-20T23:04:22","modified_gmt":"2026-10-20T15:04:22","slug":"home","status":"publish","type":"page","link":"https:\/\/www.yunasoul.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"20\" class=\"elementor elementor-20\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f4711a5 e-con-full e-flex e-con e-parent\" data-id=\"f4711a5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d2f976 elementor-widget elementor-widget-html\" data-id=\"8d2f976\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.image-slider,\r\n.image-slider * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.image-slider {\r\n  position: relative;\r\n  width: 100%;\r\n  max-width: none;\r\n  margin: 0;\r\n  overflow: hidden;\r\n  border-radius: 24px;\r\n  background: #9570f3;\r\n}\r\n\r\n\/* \u9876\u90e8\u4e09\u4e2a\u5207\u6362\u70b9 *\/\r\n.image-slider__dots {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 10px;\r\n  height: 48px;\r\n  background: linear-gradient(100deg, #956dff, #ae58ff, #c6b0ff);\r\n}\r\n\r\n.image-slider .image-slider__dot {\r\n  appearance: none;\r\n  display: block;\r\n  width: 23px;\r\n  min-width: 0;\r\n  height: 8px;\r\n  min-height: 0;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 20px;\r\n  background: rgba(255,255,255,.38);\r\n  box-shadow: none;\r\n  cursor: pointer;\r\n}\r\n\r\n.image-slider .image-slider__dot.is-active {\r\n  background: #fff;\r\n}\r\n\r\n.image-slider__dot:focus-visible {\r\n  outline: 2px solid #fff;\r\n  outline-offset: 5px;\r\n}\r\n\r\n\/* \u4fee\u6539\u8fd9\u91cc\u63a7\u5236\u684c\u9762\u7aef\u9ad8\u5ea6 *\/\r\n.image-slider__viewport {\r\n  height: clamp(280px, 28vw, 480px);\r\n  overflow: hidden;\r\n  touch-action: pan-y;\r\n}\r\n\r\n.image-slider__track {\r\n  display: flex;\r\n  height: 100%;\r\n  transition: transform .55s ease;\r\n}\r\n\r\n.image-slider__slide {\r\n  display: block;\r\n  flex: 0 0 100%;\r\n  min-width: 0;\r\n  height: 100%;\r\n  background-position: center;\r\n  background-repeat: no-repeat;\r\n  background-size: cover;\r\n}\r\n\r\n.image-slider__slide:focus-visible {\r\n  outline: 3px solid #eaff68;\r\n  outline-offset: -4px;\r\n}\r\n\r\n\/* \u624b\u673a\u7aef *\/\r\n@media (max-width: 767px) {\r\n  .image-slider {\r\n    border-radius: 14px;\r\n  }\r\n\r\n  .image-slider__dots {\r\n    height: 34px;\r\n    gap: 8px;\r\n  }\r\n\r\n  .image-slider .image-slider__dot {\r\n    width: 20px;\r\n    height: 7px;\r\n  }\r\n\r\n  .image-slider__viewport {\r\n    height: auto;\r\n    aspect-ratio: 16 \/ 9;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .image-slider__track {\r\n    transition: none;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<div class=\"image-slider\"\r\n     role=\"region\"\r\n     aria-roledescription=\"\u8f6e\u64ad\"\r\n     aria-label=\"\u7cbe\u9009\u63a8\u8350\">\r\n\r\n  <div class=\"image-slider__dots\" aria-label=\"\u9009\u62e9\u8f6e\u64ad\u56fe\u7247\">\r\n    <button type=\"button\"\r\n            class=\"image-slider__dot is-active\"\r\n            aria-label=\"\u663e\u793a\u7b2c1\u5f20\"\r\n            aria-current=\"true\"><\/button>\r\n    <button type=\"button\"\r\n            class=\"image-slider__dot\"\r\n            aria-label=\"\u663e\u793a\u7b2c2\u5f20\"\r\n            aria-current=\"false\"><\/button>\r\n    <button type=\"button\"\r\n            class=\"image-slider__dot\"\r\n            aria-label=\"\u663e\u793a\u7b2c3\u5f20\"\r\n            aria-current=\"false\"><\/button>\r\n  <\/div>\r\n\r\n  <div class=\"image-slider__viewport\">\r\n    <div class=\"image-slider__track\">\r\n\r\n      <!-- \u7b2c1\u5f20\uff1a\u66ff\u6362\u56fe\u7247\u5730\u5740\u548c\u8df3\u8f6c\u94fe\u63a5 -->\r\n      <a class=\"image-slider__slide\"\r\n         href=\"\/shop\/\"\r\n         aria-label=\"\u67e5\u770b\u7b2c1\u5f20\u63a8\u8350\u8be6\u60c5\"\r\n         style=\"background-image:url('http:\/\/47.238.75.54\/wp-content\/uploads\/2026\/10\/\u53cc\u74f6\u6da6\u6ed1\u6db2\u9690\u79c1\u5305\u88c5\u6a2a\u5e45.webp');\">\r\n      <\/a>\r\n\r\n      <!-- \u7b2c2\u5f20\uff1a\u66ff\u6362\u56fe\u7247\u5730\u5740\u548c\u8df3\u8f6c\u94fe\u63a5 -->\r\n      <a class=\"image-slider__slide\"\r\n         href=\"\/shop\/\"\r\n         aria-label=\"\u67e5\u770b\u7b2c2\u5f20\u63a8\u8350\u8be6\u60c5\"\r\n         style=\"background-image:url('\u66ff\u6362\u4e3a\u7b2c2\u5f20\u56fe\u7247\u5730\u5740');\"\r\n         aria-hidden=\"true\"\r\n         tabindex=\"-1\">\r\n      <\/a>\r\n\r\n      <!-- \u7b2c3\u5f20\uff1a\u66ff\u6362\u56fe\u7247\u5730\u5740\u548c\u8df3\u8f6c\u94fe\u63a5 -->\r\n      <a class=\"image-slider__slide\"\r\n         href=\"\/shop\/\"\r\n         aria-label=\"\u67e5\u770b\u7b2c3\u5f20\u63a8\u8350\u8be6\u60c5\"\r\n         style=\"background-image:url('\u66ff\u6362\u4e3a\u7b2c3\u5f20\u56fe\u7247\u5730\u5740');\"\r\n         aria-hidden=\"true\"\r\n         tabindex=\"-1\">\r\n      <\/a>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  const script = document.currentScript;\r\n  const root = script.previousElementSibling;\r\n  if (!root || !root.matches(\".image-slider\")) return;\r\n\r\n  const track = root.querySelector(\".image-slider__track\");\r\n  const viewport = root.querySelector(\".image-slider__viewport\");\r\n  const slides = Array.from(root.querySelectorAll(\".image-slider__slide\"));\r\n  const dots = Array.from(root.querySelectorAll(\".image-slider__dot\"));\r\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\r\n\r\n  let index = 0;\r\n  let timer;\r\n  let startX = 0;\r\n  let startY = 0;\r\n  let swiped = false;\r\n  let hovering = false;\r\n  let touching = false;\r\n\r\n  function show(next) {\r\n    index = (next + slides.length) % slides.length;\r\n    track.style.transform = \"translateX(-\" + index * 100 + \"%)\";\r\n\r\n    dots.forEach(function (dot, i) {\r\n      dot.classList.toggle(\"is-active\", i === index);\r\n      dot.setAttribute(\"aria-current\", String(i === index));\r\n    });\r\n\r\n    slides.forEach(function (slide, i) {\r\n      slide.setAttribute(\"aria-hidden\", String(i !== index));\r\n      slide.tabIndex = i === index ? 0 : -1;\r\n    });\r\n  }\r\n\r\n  function stop() {\r\n    clearInterval(timer);\r\n  }\r\n\r\n  function start() {\r\n    stop();\r\n    if (\r\n      reducedMotion.matches ||\r\n      document.hidden ||\r\n      hovering ||\r\n      touching ||\r\n      root.contains(document.activeElement)\r\n    ) return;\r\n\r\n    timer = setInterval(function () {\r\n      if (!root.isConnected) {\r\n        stop();\r\n        return;\r\n      }\r\n      show(index + 1);\r\n    }, 5000);\r\n  }\r\n\r\n  dots.forEach(function (dot, i) {\r\n    dot.addEventListener(\"click\", function () {\r\n      show(i);\r\n      start();\r\n    });\r\n  });\r\n\r\n  root.addEventListener(\"mouseenter\", function () {\r\n    hovering = true;\r\n    stop();\r\n  });\r\n\r\n  root.addEventListener(\"mouseleave\", function () {\r\n    hovering = false;\r\n    start();\r\n  });\r\n\r\n  root.addEventListener(\"focusin\", stop);\r\n  root.addEventListener(\"focusout\", function () {\r\n    setTimeout(start, 0);\r\n  });\r\n\r\n  root.addEventListener(\"keydown\", function (event) {\r\n    if (event.key === \"ArrowRight\" || event.key === \"ArrowLeft\") {\r\n      event.preventDefault();\r\n      show(index + (event.key === \"ArrowRight\" ? 1 : -1));\r\n    }\r\n  });\r\n\r\n  viewport.addEventListener(\"touchstart\", function (event) {\r\n    touching = true;\r\n    swiped = false;\r\n    startX = event.touches[0].clientX;\r\n    startY = event.touches[0].clientY;\r\n    stop();\r\n  }, { passive: true });\r\n\r\n  viewport.addEventListener(\"touchend\", function (event) {\r\n    const dx = event.changedTouches[0].clientX - startX;\r\n    const dy = event.changedTouches[0].clientY - startY;\r\n\r\n    if (Math.abs(dx) > 45 && Math.abs(dx) > Math.abs(dy)) {\r\n      show(index + (dx < 0 ? 1 : -1));\r\n      swiped = true;\r\n    }\r\n\r\n    touching = false;\r\n    start();\r\n    setTimeout(function () { swiped = false; }, 400);\r\n  }, { passive: true });\r\n\r\n  viewport.addEventListener(\"touchcancel\", function () {\r\n    touching = false;\r\n    start();\r\n  }, { passive: true });\r\n\r\n  viewport.addEventListener(\"click\", function (event) {\r\n    if (swiped) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n    }\r\n  }, true);\r\n\r\n  document.addEventListener(\"visibilitychange\", start);\r\n  reducedMotion.addEventListener(\"change\", start);\r\n\r\n  show(0);\r\n  start();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1e078b2 e-con-full e-flex e-con e-parent\" data-id=\"1e078b2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6874a26 elementor-widget elementor-widget-html\" data-id=\"6874a26\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.ay-shipping,\r\n.ay-shipping * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.ay-shipping {\r\n  width: 100%;\r\n  padding: 40px 5% 56px;\r\n  background: #f8f8f8;\r\n  font-family: Arial, \"Microsoft YaHei\", sans-serif;\r\n}\r\n\r\n.ay-shipping__inner {\r\n  max-width: 1560px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* \u9876\u90e8\u7ec6\u7ebf *\/\r\n.ay-shipping__line {\r\n  width: 92%;\r\n  height: 1px;\r\n  margin: 0 auto;\r\n  background: #e9dff5;\r\n}\r\n\r\n\/* \u6807\u9898\u533a *\/\r\n.ay-shipping__heading {\r\n  padding: 68px 0 56px;\r\n  text-align: center;\r\n}\r\n\r\n.ay-shipping .ay-shipping__title {\r\n  margin: 0;\r\n  padding: 0;\r\n  color: #290622;\r\n  font-size: 36px;\r\n  font-weight: 700;\r\n  line-height: 1.3;\r\n}\r\n\r\n.ay-shipping__wave {\r\n  display: block;\r\n  width: 144px;\r\n  height: 14px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* \u9f20\u6807\u5f62\u72b6\u88c5\u9970 *\/\r\n.ay-shipping__decoration {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 16px;\r\n  margin-top: 12px;\r\n  color: #f4b8b9;\r\n}\r\n\r\n.ay-shipping__dash {\r\n  width: 25px;\r\n  height: 2px;\r\n  background: repeating-linear-gradient(\r\n    to right,\r\n    #f4d7d7 0 6px,\r\n    transparent 6px 17px\r\n  );\r\n}\r\n\r\n.ay-shipping__mouse {\r\n  position: relative;\r\n  width: 16px;\r\n  height: 24px;\r\n  border: 1.5px solid currentColor;\r\n  border-radius: 10px;\r\n}\r\n\r\n.ay-shipping__mouse::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 5px;\r\n  left: 50%;\r\n  width: 1.5px;\r\n  height: 6px;\r\n  border-radius: 2px;\r\n  background: currentColor;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n\/* \u767d\u8272\u4fdd\u969c\u5361\u7247 *\/\r\n.ay-shipping__card {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, minmax(0, 1fr));\r\n  gap: 24px;\r\n  padding: 58px 70px 48px;\r\n  border-radius: 28px;\r\n  background: #fff;\r\n}\r\n\r\n.ay-shipping__item {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 18px;\r\n  text-align: center;\r\n}\r\n\r\n.ay-shipping__icon {\r\n  display: block;\r\n  width: 48px;\r\n  height: 48px;\r\n  flex-shrink: 0;\r\n  color: #ed008b;\r\n}\r\n\r\n.ay-shipping .ay-shipping__text {\r\n  margin: 0;\r\n  padding: 0;\r\n  color: #a09ca7;\r\n  font-size: 25px;\r\n  font-weight: 400;\r\n  line-height: 1.5;\r\n}\r\n\r\n\/* \u5e73\u677f *\/\r\n@media (max-width: 1024px) {\r\n  .ay-shipping__card {\r\n    padding: 42px 24px;\r\n    gap: 18px;\r\n  }\r\n\r\n  .ay-shipping .ay-shipping__text {\r\n    font-size: 20px;\r\n  }\r\n}\r\n\r\n\/* \u624b\u673a *\/\r\n@media (max-width: 767px) {\r\n  .ay-shipping {\r\n    padding: 24px 20px 32px;\r\n  }\r\n\r\n  .ay-shipping__heading {\r\n    padding: 36px 0 30px;\r\n  }\r\n\r\n  .ay-shipping .ay-shipping__title {\r\n    font-size: 27px;\r\n  }\r\n\r\n  .ay-shipping__wave {\r\n    width: 116px;\r\n  }\r\n\r\n  .ay-shipping__card {\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    gap: 32px 12px;\r\n    padding: 32px 14px;\r\n    border-radius: 20px;\r\n  }\r\n\r\n  .ay-shipping__item {\r\n    gap: 12px;\r\n  }\r\n\r\n  .ay-shipping__icon {\r\n    width: 38px;\r\n    height: 38px;\r\n  }\r\n\r\n  .ay-shipping .ay-shipping__text {\r\n    font-size: 17px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section class=\"ay-shipping\" aria-label=\"\u53d1\u8d27\u4fdd\u969c\">\r\n  <div class=\"ay-shipping__inner\">\r\n\r\n    <div class=\"ay-shipping__line\" aria-hidden=\"true\"><\/div>\r\n\r\n    <div class=\"ay-shipping__heading\">\r\n      <h2 class=\"ay-shipping__title\">\u53d1\u8d27\u4fdd\u969c<\/h2>\r\n\r\n      <svg class=\"ay-shipping__wave\"\r\n           viewBox=\"0 0 144 14\"\r\n           fill=\"none\"\r\n           aria-hidden=\"true\">\r\n        <path d=\"M3 9 Q36 1 72 7 T141 7\"\r\n              stroke=\"#F3AFE1\"\r\n              stroke-width=\"2.5\"\r\n              stroke-linecap=\"round\"\/>\r\n      <\/svg>\r\n\r\n      <div class=\"ay-shipping__decoration\" aria-hidden=\"true\">\r\n        <span class=\"ay-shipping__dash\"><\/span>\r\n        <span class=\"ay-shipping__mouse\"><\/span>\r\n        <span class=\"ay-shipping__dash\"><\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ay-shipping__card\">\r\n\r\n      <!-- \u9690\u79c1\u5305\u88c5 -->\r\n      <div class=\"ay-shipping__item\">\r\n        <svg class=\"ay-shipping__icon\"\r\n             viewBox=\"0 0 48 48\"\r\n             fill=\"none\"\r\n             aria-hidden=\"true\">\r\n          <path d=\"M5 14H43V42H5Z\"\r\n                fill=\"currentColor\"\/>\r\n          <path d=\"M5 12L10 4H23V12H5Z\"\r\n                fill=\"currentColor\"\/>\r\n          <path d=\"M25 4H38L43 12H25V4Z\"\r\n                fill=\"currentColor\"\/>\r\n          <path d=\"M28 27H37M25 34H37\"\r\n                stroke=\"white\"\r\n                stroke-width=\"3\"\/>\r\n        <\/svg>\r\n        <p class=\"ay-shipping__text\">\u9690\u79c1\u5305\u88c5<\/p>\r\n      <\/div>\r\n\r\n      <!-- \u533f\u540d\u7269\u6d41 -->\r\n      <div class=\"ay-shipping__item\">\r\n        <svg class=\"ay-shipping__icon\"\r\n             viewBox=\"0 0 56 48\"\r\n             fill=\"none\"\r\n             aria-hidden=\"true\">\r\n          <path d=\"M3 5H35C36.1 5 37 5.9 37 7V36H3\r\n                   C1.9 36 1 35.1 1 34V7C1 5.9 1.9 5 3 5Z\"\r\n                fill=\"currentColor\"\/>\r\n          <path d=\"M37 13H46L55 27V36H37V13Z\"\r\n                fill=\"currentColor\"\/>\r\n          <path d=\"M40 17H44L50 26H40V17Z\"\r\n                fill=\"white\"\/>\r\n          <circle cx=\"14\" cy=\"38\" r=\"6\"\r\n                  fill=\"currentColor\"\r\n                  stroke=\"white\"\r\n                  stroke-width=\"2\"\/>\r\n          <circle cx=\"44\" cy=\"38\" r=\"6\"\r\n                  fill=\"currentColor\"\r\n                  stroke=\"white\"\r\n                  stroke-width=\"2\"\/>\r\n        <\/svg>\r\n        <p class=\"ay-shipping__text\">\u533f\u540d\u7269\u6d41<\/p>\r\n      <\/div>\r\n\r\n      <!-- \u5b89\u5168\u652f\u4ed8 -->\r\n      <div class=\"ay-shipping__item\">\r\n        <svg class=\"ay-shipping__icon\"\r\n             viewBox=\"0 0 48 48\"\r\n             fill=\"none\"\r\n             aria-hidden=\"true\">\r\n          <path d=\"M14 22V13C14 7.5 18.5 3 24 3\r\n                   C29.5 3 34 7.5 34 13V22\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"4.5\"\/>\r\n          <rect x=\"7\" y=\"20\" width=\"34\" height=\"26\"\r\n                rx=\"3\" fill=\"currentColor\"\/>\r\n          <circle cx=\"24\" cy=\"31\" r=\"3.5\" fill=\"white\"\/>\r\n          <path d=\"M24 33V38\"\r\n                stroke=\"white\"\r\n                stroke-width=\"3\"\r\n                stroke-linecap=\"round\"\/>\r\n        <\/svg>\r\n        <p class=\"ay-shipping__text\">\u5b89\u5168\u652f\u4ed8<\/p>\r\n      <\/div>\r\n\r\n      <!-- \u65e0\u5fe7\u9000\u6362 -->\r\n      <div class=\"ay-shipping__item\">\r\n        <svg class=\"ay-shipping__icon\"\r\n             viewBox=\"0 0 48 48\"\r\n             fill=\"none\"\r\n             aria-hidden=\"true\">\r\n          <path d=\"M7 12L17 4H31L41 12H7Z\"\r\n                fill=\"currentColor\"\/>\r\n          <rect x=\"4\" y=\"15\" width=\"40\" height=\"30\"\r\n                rx=\"3\" fill=\"currentColor\"\/>\r\n          <path d=\"M17 25H31C38 25 38 37 31 37H25\"\r\n                stroke=\"white\"\r\n                stroke-width=\"3\"\r\n                stroke-linecap=\"round\"\/>\r\n          <path d=\"M19 20L12 25L19 30V20Z\"\r\n                fill=\"white\"\/>\r\n        <\/svg>\r\n        <p class=\"ay-shipping__text\">7\u5929\u65e0\u5fe7\u9000\u6362<\/p>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ed2f5fc e-con-full e-flex e-con e-parent\" data-id=\"ed2f5fc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b9e1acc elementor-widget elementor-widget-html\" data-id=\"b9e1acc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.ay-categories,\r\n.ay-categories * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.ay-categories {\r\n  width: 100%;\r\n  padding: 48px 5% 80px;\r\n  background: #f8f8f8;\r\n  font-family: Arial, \"Microsoft YaHei\", sans-serif;\r\n}\r\n\r\n.ay-categories__inner {\r\n  max-width: 1720px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.ay-categories__line {\r\n  width: 92%;\r\n  height: 1px;\r\n  margin: 0 auto;\r\n  background: #e9dff5;\r\n}\r\n\r\n\/* \u6807\u9898 *\/\r\n.ay-categories__heading {\r\n  padding: 78px 0 60px;\r\n  text-align: center;\r\n}\r\n\r\n.ay-categories .ay-categories__title {\r\n  display: inline-block;\r\n  max-width: 100%;\r\n  margin: 0;\r\n  padding: 0;\r\n  color: #290622;\r\n  font-size: clamp(26px, 2.2vw, 40px);\r\n  font-weight: 700;\r\n  line-height: 1.4;\r\n}\r\n\r\n.ay-categories__title span {\r\n  color: #f50083;\r\n}\r\n\r\n.ay-categories__wave {\r\n  display: block;\r\n  width: 100%;\r\n  height: 17px;\r\n  margin-top: -2px;\r\n}\r\n\r\n.ay-categories .ay-categories__subtitle {\r\n  margin: 13px 0 0;\r\n  padding: 0;\r\n  color: #41233e;\r\n  font-size: 22px;\r\n  font-weight: 400;\r\n  line-height: 1.7;\r\n}\r\n\r\n\/* \u6807\u9898\u4e0b\u65b9\u88c5\u9970 *\/\r\n.ay-categories__decoration {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 17px;\r\n  margin-top: 15px;\r\n}\r\n\r\n.ay-categories__dash {\r\n  width: 26px;\r\n  height: 3px;\r\n  background: repeating-linear-gradient(\r\n    to right,\r\n    #c9c9c9 0 7px,\r\n    transparent 7px 18px\r\n  );\r\n}\r\n\r\n.ay-categories__mouse {\r\n  position: relative;\r\n  width: 17px;\r\n  height: 25px;\r\n  border: 1.5px solid #aaa;\r\n  border-radius: 10px;\r\n}\r\n\r\n.ay-categories__mouse::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 6px;\r\n  left: 50%;\r\n  width: 1.5px;\r\n  height: 7px;\r\n  background: #aaa;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n\/* \u5206\u7c7b\u5361\u7247 *\/\r\n.ay-categories__grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, minmax(0, 1fr));\r\n  gap: clamp(20px, 2.5vw, 50px);\r\n}\r\n\r\n.ay-categories .ay-category {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 20px;\r\n  min-width: 0;\r\n  min-height: 230px;\r\n  padding: 24px 16px 28px;\r\n  border-radius: 24px;\r\n  background: #fff;\r\n  color: #555;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  transition: transform .2s ease, box-shadow .2s ease;\r\n}\r\n\r\n.ay-categories .ay-category:hover {\r\n  transform: translateY(-5px);\r\n  box-shadow: 0 14px 32px rgba(67, 23, 70, .07);\r\n}\r\n\r\n.ay-category:focus-visible {\r\n  outline: 3px solid #f50083;\r\n  outline-offset: 4px;\r\n}\r\n\r\n\/* \u5f69\u8272\u5706\u5f62\u56fe\u6807 *\/\r\n.ay-category__circle {\r\n  display: grid;\r\n  place-items: center;\r\n  width: 122px;\r\n  height: 122px;\r\n  flex-shrink: 0;\r\n  border: 16px solid var(--ring);\r\n  border-radius: 50%;\r\n  background: var(--center);\r\n  box-shadow: 0 0 28px var(--glow);\r\n}\r\n\r\n.ay-category__icon {\r\n  display: block;\r\n  width: 65px;\r\n  height: 65px;\r\n}\r\n\r\n.ay-category--female {\r\n  --ring: #ffd5d8;\r\n  --center: #fff0f0;\r\n  --glow: #fff0f2;\r\n}\r\n\r\n.ay-category--couple {\r\n  --ring: #ffe0c5;\r\n  --center: #fff6ec;\r\n  --glow: #fff5ed;\r\n}\r\n\r\n.ay-category--male {\r\n  --ring: #c1f1ff;\r\n  --center: #efffff;\r\n  --glow: #effaff;\r\n}\r\n\r\n.ay-category--lube {\r\n  --ring: #ffd9cb;\r\n  --center: #fff3f1;\r\n  --glow: #fff1ee;\r\n}\r\n\r\n.ay-categories .ay-category__name {\r\n  margin: 0;\r\n  padding: 0;\r\n  color: #555;\r\n  font-size: 27px;\r\n  font-weight: 600;\r\n  line-height: 1.4;\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .ay-categories__heading {\r\n    padding: 54px 0 42px;\r\n  }\r\n\r\n  .ay-categories .ay-categories__subtitle {\r\n    font-size: 18px;\r\n  }\r\n\r\n  .ay-categories .ay-category {\r\n    min-height: 200px;\r\n  }\r\n\r\n  .ay-category__circle {\r\n    width: 100px;\r\n    height: 100px;\r\n    border-width: 13px;\r\n  }\r\n\r\n  .ay-category__icon {\r\n    width: 54px;\r\n    height: 54px;\r\n  }\r\n\r\n  .ay-categories .ay-category__name {\r\n    font-size: 22px;\r\n  }\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .ay-categories {\r\n    padding: 28px 20px 44px;\r\n  }\r\n\r\n  .ay-categories__heading {\r\n    padding: 36px 0 30px;\r\n  }\r\n\r\n  .ay-categories .ay-categories__title {\r\n    font-size: 25px;\r\n  }\r\n\r\n  .ay-categories .ay-categories__subtitle {\r\n    margin-top: 10px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .ay-categories__grid {\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    gap: 16px;\r\n  }\r\n\r\n  .ay-categories .ay-category {\r\n    min-height: 185px;\r\n    padding: 22px 10px;\r\n    gap: 16px;\r\n    border-radius: 18px;\r\n  }\r\n\r\n  .ay-category__circle {\r\n    width: 90px;\r\n    height: 90px;\r\n    border-width: 12px;\r\n  }\r\n\r\n  .ay-category__icon {\r\n    width: 48px;\r\n    height: 48px;\r\n  }\r\n\r\n  .ay-categories .ay-category__name {\r\n    font-size: 20px;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .ay-categories .ay-category {\r\n    transition: none;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section class=\"ay-categories\" aria-label=\"\u4ea7\u54c1\u5206\u7c7b\">\r\n  <div class=\"ay-categories__inner\">\r\n    <div class=\"ay-categories__line\" aria-hidden=\"true\"><\/div>\r\n\r\n    <div class=\"ay-categories__heading\">\r\n      <h2 class=\"ay-categories__title\">\r\n        \u8fd9\u91cc\u662f\u9876\u7ea7\u7684<span>\u4f11\u95f2<\/span>\u76ee\u7684\u5730\r\n        <svg class=\"ay-categories__wave\"\r\n             viewBox=\"0 0 440 17\"\r\n             preserveAspectRatio=\"none\"\r\n             fill=\"none\"\r\n             aria-hidden=\"true\">\r\n          <path d=\"M3 11 Q110 -2 220 8 T437 8\"\r\n                stroke=\"#F3AFE1\"\r\n                stroke-width=\"2.5\"\r\n                stroke-linecap=\"round\"\/>\r\n        <\/svg>\r\n      <\/h2>\r\n\r\n      <p class=\"ay-categories__subtitle\">\r\n        \u4e00\u523b\u653e\u677e\u8ba9\u4eba\u611f\u5230\u6709\u8da3\u3001\u8f7b\u677e\u4e14\u5145\u6ee1\u529b\u91cf\r\n      <\/p>\r\n\r\n      <div class=\"ay-categories__decoration\" aria-hidden=\"true\">\r\n        <span class=\"ay-categories__dash\"><\/span>\r\n        <span class=\"ay-categories__mouse\"><\/span>\r\n        <span class=\"ay-categories__dash\"><\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ay-categories__grid\">\r\n\r\n      <!-- \u5973\u6027\u73a9\u5177\uff1a\u66ff\u6362\u5206\u7c7b\u94fe\u63a5 -->\r\n      <a class=\"ay-category ay-category--female\"\r\n         href=\"\/product-category\/female-toys\/\">\r\n        <span class=\"ay-category__circle\">\r\n          <svg class=\"ay-category__icon\"\r\n               viewBox=\"0 0 64 64\"\r\n               fill=\"none\" aria-hidden=\"true\">\r\n            <circle cx=\"32\" cy=\"10\" r=\"7\" fill=\"#ff5c78\"\/>\r\n            <path d=\"M25 19H39L45 36H39L43 46H36V59\r\n                     M28 59V46H21L25 36H19L25 19Z\"\r\n                  fill=\"#ff3f77\"\/>\r\n            <path d=\"M24 22L16 36M40 22L48 36\r\n                     M28 44V59M36 44V59\"\r\n                  stroke=\"#ff3f77\"\r\n                  stroke-width=\"6\"\r\n                  stroke-linecap=\"round\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n        <span class=\"ay-category__name\">\u5973\u6027\u73a9\u5177<\/span>\r\n      <\/a>\r\n\r\n      <!-- \u60c5\u4fa3\u73a9\u5177\uff1a\u66ff\u6362\u5206\u7c7b\u94fe\u63a5 -->\r\n      <a class=\"ay-category ay-category--couple\"\r\n         href=\"\/product-category\/couple-toys\/\">\r\n        <span class=\"ay-category__circle\">\r\n          <svg class=\"ay-category__icon\"\r\n               viewBox=\"0 0 64 64\"\r\n               fill=\"none\" aria-hidden=\"true\">\r\n            <circle cx=\"32\" cy=\"32\" r=\"31\" fill=\"#ff6330\"\/>\r\n            <path d=\"M29 21C21 13 10 24 18 32L29 43\r\n                     L40 32C48 24 37 13 29 21Z\"\r\n                  fill=\"white\"\/>\r\n            <path d=\"M40 30C34 24 26 32 32 38L40 46\r\n                     L48 38C54 32 46 24 40 30Z\"\r\n                  fill=\"white\"\r\n                  stroke=\"#ff6330\"\r\n                  stroke-width=\"1.5\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n        <span class=\"ay-category__name\">\u60c5\u4fa3\u73a9\u5177<\/span>\r\n      <\/a>\r\n\r\n      <!-- \u7537\u6027\u73a9\u5177\uff1a\u66ff\u6362\u5206\u7c7b\u94fe\u63a5 -->\r\n      <a class=\"ay-category ay-category--male\"\r\n         href=\"\/product-category\/male-toys\/\">\r\n        <span class=\"ay-category__circle\">\r\n          <svg class=\"ay-category__icon\"\r\n               viewBox=\"0 0 64 64\"\r\n               fill=\"none\" aria-hidden=\"true\">\r\n            <circle cx=\"32\" cy=\"11\" r=\"7.5\" fill=\"#7917ed\"\/>\r\n            <path d=\"M21 24H43M21 25V39M43 25V39\"\r\n                  stroke=\"#7640f7\"\r\n                  stroke-width=\"7\"\r\n                  stroke-linecap=\"round\"\/>\r\n            <path d=\"M27 24H37V43H27Z\" fill=\"#7650ff\"\/>\r\n            <path d=\"M27 39V58M37 39V58\"\r\n                  stroke=\"#6487ff\"\r\n                  stroke-width=\"7\"\r\n                  stroke-linecap=\"round\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n        <span class=\"ay-category__name\">\u7537\u6027\u73a9\u5177<\/span>\r\n      <\/a>\r\n\r\n      <!-- \u6da6\u6ed1\u6db2\uff1a\u66ff\u6362\u5206\u7c7b\u94fe\u63a5 -->\r\n      <a class=\"ay-category ay-category--lube\"\r\n         href=\"\/product-category\/lubricants\/\">\r\n        <span class=\"ay-category__circle\">\r\n          <svg class=\"ay-category__icon\"\r\n               viewBox=\"0 0 64 64\"\r\n               fill=\"none\" aria-hidden=\"true\">\r\n            <g transform=\"rotate(42 32 32)\">\r\n              <rect x=\"24\" y=\"5\" width=\"16\" height=\"21\"\r\n                    rx=\"8\" fill=\"#ffbb37\"\/>\r\n              <path d=\"M20 23H44\"\r\n                    stroke=\"#ffbb37\"\r\n                    stroke-width=\"4\"\r\n                    stroke-linecap=\"round\"\/>\r\n              <path d=\"M24 28H40V43L35 50H29L24 43V28Z\"\r\n                    fill=\"#ff941f\"\/>\r\n              <path d=\"M27 29H37\"\r\n                    stroke=\"white\"\r\n                    stroke-width=\"3\"\/>\r\n              <path d=\"M32 49V54\"\r\n                    stroke=\"#ff941f\"\r\n                    stroke-width=\"4\"\r\n                    stroke-linecap=\"round\"\/>\r\n            <\/g>\r\n            <path d=\"M14 49C14 49 10 54 10 57\r\n                     A4 4 0 0 0 18 57C18 54 14 49 14 49Z\"\r\n                  fill=\"#ff941f\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n        <span class=\"ay-category__name\">\u6da6\u6ed1\u6db2<\/span>\r\n      <\/a>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ecc471f e-con-full e-flex e-con e-parent\" data-id=\"ecc471f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-628039a elementor-widget elementor-widget-html\" data-id=\"628039a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.ay-video-section,\r\n.ay-video-section * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.ay-video-section {\r\n  width: 100%;\r\n  padding: 40px 8px 28px;\r\n  background: #f8f8f8;\r\n  font-family: Arial, \"Microsoft YaHei\", sans-serif;\r\n}\r\n\r\n.ay-video-section__panel {\r\n  width: 100%;\r\n  padding: 64px 7% 80px;\r\n  border-radius: 88px;\r\n  background: #fff;\r\n}\r\n\r\n\/* \u6807\u9898 *\/\r\n.ay-video-section__heading {\r\n  margin-bottom: 70px;\r\n  text-align: center;\r\n}\r\n\r\n.ay-video-section .ay-video-section__title {\r\n  margin: 0;\r\n  padding: 0;\r\n  color: #111;\r\n  font-size: clamp(26px, 2.2vw, 40px);\r\n  font-weight: 700;\r\n  line-height: 1.4;\r\n}\r\n\r\n.ay-video-section__title span {\r\n  color: #ff007d;\r\n}\r\n\r\n.ay-video-section .ay-video-section__subtitle {\r\n  margin: 12px 0 0;\r\n  padding: 0;\r\n  color: #444;\r\n  font-size: 22px;\r\n  font-weight: 400;\r\n  line-height: 1.6;\r\n}\r\n\r\n\/* \u9f20\u6807\u88c5\u9970 *\/\r\n.ay-video-section__decoration {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 17px;\r\n  margin-top: 15px;\r\n}\r\n\r\n.ay-video-section__dash {\r\n  width: 26px;\r\n  height: 3px;\r\n  background: repeating-linear-gradient(\r\n    to right,\r\n    #ccc 0 7px,\r\n    transparent 7px 18px\r\n  );\r\n}\r\n\r\n.ay-video-section__mouse {\r\n  position: relative;\r\n  width: 17px;\r\n  height: 25px;\r\n  border: 1.5px solid #aaa;\r\n  border-radius: 10px;\r\n}\r\n\r\n.ay-video-section__mouse::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 6px;\r\n  left: 50%;\r\n  width: 1.5px;\r\n  height: 7px;\r\n  background: #aaa;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n\/* \u80f6\u56ca\u5f62\u89c6\u9891 *\/\r\n.ay-video-section__media {\r\n  width: 100%;\r\n  max-width: 1580px;\r\n  aspect-ratio: 3.45 \/ 1;\r\n  margin: 0 auto;\r\n  overflow: hidden;\r\n  border-radius: 999px;\r\n  background: #eee;\r\n  isolation: isolate;\r\n}\r\n\r\n.ay-video-section .ay-video-section__video {\r\n  display: block;\r\n  width: 100%;\r\n  max-width: none;\r\n  height: 100%;\r\n  margin: 0;\r\n  border: 0;\r\n  object-fit: cover;\r\n  object-position: center;\r\n}\r\n\r\n\/* \u5e73\u677f *\/\r\n@media (max-width: 1024px) {\r\n  .ay-video-section__panel {\r\n    padding: 48px 6% 56px;\r\n    border-radius: 56px;\r\n  }\r\n\r\n  .ay-video-section__heading {\r\n    margin-bottom: 42px;\r\n  }\r\n\r\n  .ay-video-section .ay-video-section__subtitle {\r\n    font-size: 18px;\r\n  }\r\n\r\n  .ay-video-section__media {\r\n    aspect-ratio: 3 \/ 1;\r\n  }\r\n}\r\n\r\n\/* \u624b\u673a *\/\r\n@media (max-width: 767px) {\r\n  .ay-video-section {\r\n    padding: 20px 8px;\r\n  }\r\n\r\n  .ay-video-section__panel {\r\n    padding: 36px 18px;\r\n    border-radius: 32px;\r\n  }\r\n\r\n  .ay-video-section__heading {\r\n    margin-bottom: 28px;\r\n  }\r\n\r\n  .ay-video-section .ay-video-section__title {\r\n    font-size: 25px;\r\n  }\r\n\r\n  .ay-video-section .ay-video-section__subtitle {\r\n    margin-top: 10px;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .ay-video-section__media {\r\n    aspect-ratio: 16 \/ 9;\r\n    border-radius: 36px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section class=\"ay-video-section\" aria-label=\"\u8fbe\u4eba\u89c6\u9891\">\r\n  <div class=\"ay-video-section__panel\">\r\n\r\n    <div class=\"ay-video-section__heading\">\r\n      <h2 class=\"ay-video-section__title\">\r\n        \u627e\u5230\u5c5e\u4e8e\u4f60\u7684<span>\u4e2a\u4eba\u5171\u9e23<\/span>\r\n      <\/h2>\r\n\r\n      <p class=\"ay-video-section__subtitle\">\r\n        \u8fd9\u91cc\u6709\u66f4\u591a\u8fbe\u4eba\u7684\u4f7f\u7528\u89c6\u9891\r\n      <\/p>\r\n\r\n      <div class=\"ay-video-section__decoration\" aria-hidden=\"true\">\r\n        <span class=\"ay-video-section__dash\"><\/span>\r\n        <span class=\"ay-video-section__mouse\"><\/span>\r\n        <span class=\"ay-video-section__dash\"><\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ay-video-section__media\">\r\n      <!--\r\n        src\uff1a\u66ff\u6362\u4e3a MP4 \u89c6\u9891\u5730\u5740\r\n        poster\uff1a\u66ff\u6362\u4e3a\u89c6\u9891\u5c01\u9762\u56fe\u7247\u5730\u5740\r\n      -->\r\n      <video\r\n        class=\"ay-video-section__video\"\r\n        src=\"\u66ff\u6362\u4e3a\u4f60\u7684MP4\u89c6\u9891\u5730\u5740\"\r\n        poster=\"\u66ff\u6362\u4e3a\u4f60\u7684\u89c6\u9891\u5c01\u9762\u56fe\u7247\u5730\u5740\"\r\n        aria-label=\"\u8fbe\u4eba\u5c55\u793a\u89c6\u9891\"\r\n        autoplay\r\n        muted\r\n        loop\r\n        playsinline\r\n        preload=\"metadata\"\r\n      ><\/video>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a9139c8 e-con-full e-flex e-con e-parent\" data-id=\"a9139c8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f0a7e7f elementor-widget elementor-widget-html\" data-id=\"f0a7e7f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.ay-hot,\r\n.ay-hot * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.ay-hot {\r\n  padding: 18px 6px;\r\n  background: #f8f8f8;\r\n  font-family: Arial, \"Microsoft YaHei\", sans-serif;\r\n}\r\n\r\n.ay-hot__panel {\r\n  padding: 48px 8% 70px;\r\n  border-radius: 64px;\r\n  background-color: #efefef;\r\n  background-image:\r\n    linear-gradient(rgba(45, 15, 53, .025) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(45, 15, 53, .025) 1px, transparent 1px);\r\n  background-size: 130px 118px;\r\n}\r\n\r\n.ay-hot__inner {\r\n  max-width: 1400px;\r\n  margin: auto;\r\n}\r\n\r\n.ay-hot__heading {\r\n  margin-bottom: 45px;\r\n  text-align: center;\r\n}\r\n\r\n.ay-hot .ay-hot__title {\r\n  margin: 0;\r\n  color: #290d32;\r\n  font-size: 30px;\r\n  font-weight: 700;\r\n  line-height: 1.4;\r\n}\r\n\r\n.ay-hot__decor {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 14px;\r\n  margin-top: 12px;\r\n}\r\n\r\n.ay-hot__dash {\r\n  width: 24px;\r\n  height: 2px;\r\n  background: repeating-linear-gradient(\r\n    90deg, #bbb 0 5px, transparent 5px 16px\r\n  );\r\n}\r\n\r\n.ay-hot__mouse {\r\n  position: relative;\r\n  width: 12px;\r\n  height: 19px;\r\n  border: 1px solid #aaa;\r\n  border-radius: 8px;\r\n}\r\n\r\n.ay-hot__mouse::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 4px;\r\n  left: 5px;\r\n  width: 1px;\r\n  height: 5px;\r\n  background: #aaa;\r\n}\r\n\r\n.ay-hot__bar {\r\n  display: flex;\r\n  align-items: flex-end;\r\n  justify-content: space-between;\r\n  gap: 20px;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.ay-hot .ay-hot__label {\r\n  margin: 0 0 8px;\r\n  color: #290d32;\r\n  font-size: 20px;\r\n  font-weight: 700;\r\n  line-height: 1.4;\r\n}\r\n\r\n.ay-hot__label span {\r\n  color: #7746ff;\r\n}\r\n\r\n.ay-hot .ay-hot__intro {\r\n  margin: 0;\r\n  color: #888;\r\n  font-size: 15px;\r\n  line-height: 1.6;\r\n}\r\n\r\n.ay-hot__nav {\r\n  display: flex;\r\n  gap: 18px;\r\n  padding-bottom: 3px;\r\n}\r\n\r\n.ay-hot button {\r\n  appearance: none;\r\n  font-family: inherit;\r\n  cursor: pointer;\r\n}\r\n\r\n.ay-hot .ay-hot__arrow {\r\n  display: grid;\r\n  place-items: center;\r\n  width: 28px;\r\n  min-width: 28px;\r\n  height: 28px;\r\n  min-height: 0;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 50%;\r\n  background: #270b32;\r\n  color: #fff;\r\n  box-shadow: none;\r\n}\r\n\r\n.ay-hot__arrow svg {\r\n  width: 14px;\r\n  height: 14px;\r\n}\r\n\r\n.ay-hot__viewport {\r\n  overflow: hidden;\r\n  padding: 2px 9px 10px 2px;\r\n}\r\n\r\n.ay-hot__track {\r\n  display: flex;\r\n  transition: transform .45s ease;\r\n}\r\n\r\n.ay-hot__page {\r\n  display: grid;\r\n  flex: 0 0 100%;\r\n  min-width: 0;\r\n  grid-template-columns: repeat(4, minmax(0, 1fr));\r\n  gap: 26px 22px;\r\n}\r\n\r\n\/* \u5546\u54c1\u5361\u7247 *\/\r\n.ay-hot .ay-product {\r\n  display: flex;\r\n  flex-direction: column;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  border: 1px solid transparent;\r\n  border-radius: 18px;\r\n  background: #fff;\r\n  transition: border-color .2s, box-shadow .2s;\r\n}\r\n\r\n.ay-hot .ay-product:hover,\r\n.ay-hot .ay-product:focus-within {\r\n  border-color: #321039;\r\n  box-shadow: 6px 7px 0 #270b32;\r\n}\r\n\r\n.ay-product__media {\r\n  position: relative;\r\n  aspect-ratio: 1.18 \/ 1;\r\n  margin: 0;\r\n  overflow: hidden;\r\n  border-radius: 17px;\r\n  background: #fff;\r\n}\r\n\r\n.ay-product__image-link {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n.ay-hot .ay-product__image {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  margin: 0;\r\n  padding: 24px;\r\n  object-fit: contain;\r\n  transition: filter .25s;\r\n}\r\n\r\n\/* \u56fe\u7247\u4e0a\u7684\u6536\u85cf\u906e\u7f69 *\/\r\n.ay-product__overlay {\r\n  position: absolute;\r\n  inset: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 14px;\r\n  background: rgba(57, 13, 60, .34);\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  transition: opacity .2s;\r\n}\r\n\r\n.ay-product__media:hover .ay-product__overlay,\r\n.ay-product__media:focus-within .ay-product__overlay {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n.ay-product__media:hover .ay-product__image {\r\n  filter: blur(2px);\r\n}\r\n\r\n.ay-product__heart {\r\n  width: 38px;\r\n  height: 38px;\r\n  color: #eaff68;\r\n}\r\n\r\n.ay-hot .ay-product__favorite {\r\n  min-height: 0;\r\n  margin: 0;\r\n  padding: 8px 20px;\r\n  border: 0;\r\n  border-radius: 99px;\r\n  background: #eaff68;\r\n  color: #270b32;\r\n  font-size: 13px;\r\n  line-height: 1.4;\r\n}\r\n\r\n.ay-product__info {\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  padding: 18px 18px 20px;\r\n  text-align: center;\r\n}\r\n\r\n.ay-hot .ay-product__name {\r\n  margin: 0 0 12px;\r\n  padding: 0;\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  line-height: 1.5;\r\n}\r\n\r\n.ay-hot .ay-product__name a {\r\n  color: #111;\r\n  text-decoration: none;\r\n}\r\n\r\n.ay-hot .ay-product__description {\r\n  display: -webkit-box;\r\n  overflow: hidden;\r\n  -webkit-box-orient: vertical;\r\n  -webkit-line-clamp: 2;\r\n  min-height: 38px;\r\n  margin: 0 0 10px;\r\n  color: #888;\r\n  font-size: 13px;\r\n  line-height: 19px;\r\n}\r\n\r\n.ay-hot .ay-product__price {\r\n  margin: auto 0 15px;\r\n  color: #ed0000;\r\n  font-size: 17px;\r\n  font-weight: 700;\r\n  line-height: 1.4;\r\n}\r\n\r\n.ay-hot .ay-product__cart {\r\n  width: 145px;\r\n  max-width: 100%;\r\n  min-height: 0;\r\n  margin: 0;\r\n  padding: 10px 14px;\r\n  border: 0;\r\n  border-radius: 99px;\r\n  background: #270b32;\r\n  color: #fff;\r\n  font-size: 14px;\r\n  line-height: 1.4;\r\n  transition: background .2s, color .2s;\r\n}\r\n\r\n.ay-product:hover .ay-product__cart,\r\n.ay-product:focus-within .ay-product__cart {\r\n  background: #eaff68;\r\n  color: #270b32;\r\n}\r\n\r\n.ay-hot button:focus-visible,\r\n.ay-hot a:focus-visible {\r\n  outline: 2px solid #8750ff;\r\n  outline-offset: 3px;\r\n}\r\n\r\n.ay-hot__status {\r\n  min-height: 20px;\r\n  margin-top: 10px;\r\n  color: #65456b;\r\n  font-size: 13px;\r\n  text-align: center;\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .ay-hot__panel {\r\n    padding: 40px 5% 45px;\r\n    border-radius: 44px;\r\n  }\r\n\r\n  .ay-hot__page {\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    gap: 22px;\r\n  }\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .ay-hot {\r\n    padding: 12px 6px;\r\n  }\r\n\r\n  .ay-hot__panel {\r\n    padding: 32px 16px;\r\n    border-radius: 28px;\r\n    background-size: 90px 90px;\r\n  }\r\n\r\n  .ay-hot__heading {\r\n    margin-bottom: 28px;\r\n  }\r\n\r\n  .ay-hot .ay-hot__title {\r\n    font-size: 25px;\r\n  }\r\n\r\n  .ay-hot .ay-hot__label {\r\n    font-size: 18px;\r\n  }\r\n\r\n  .ay-hot .ay-hot__intro {\r\n    font-size: 12px;\r\n  }\r\n\r\n  .ay-hot__nav {\r\n    gap: 10px;\r\n  }\r\n\r\n  .ay-hot__page {\r\n    gap: 16px 12px;\r\n  }\r\n\r\n  .ay-hot .ay-product {\r\n    border-radius: 14px;\r\n  }\r\n\r\n  .ay-hot .ay-product__image {\r\n    padding: 15px;\r\n  }\r\n\r\n  .ay-product__info {\r\n    padding: 12px 9px 16px;\r\n  }\r\n\r\n  .ay-hot .ay-product__name {\r\n    margin-bottom: 8px;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .ay-hot .ay-product__description {\r\n    font-size: 12px;\r\n  }\r\n\r\n  .ay-hot .ay-product__price {\r\n    font-size: 16px;\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  .ay-hot .ay-product__cart {\r\n    padding: 9px 10px;\r\n    font-size: 12px;\r\n  }\r\n}\r\n\r\n\/* \u89e6\u6478\u8bbe\u5907\u76f4\u63a5\u663e\u793a\u5c0f\u6536\u85cf\u6309\u94ae *\/\r\n@media (hover: none) {\r\n  .ay-product__overlay {\r\n    inset: 8px 8px auto auto;\r\n    gap: 0;\r\n    background: transparent;\r\n    opacity: 1;\r\n    pointer-events: auto;\r\n  }\r\n\r\n  .ay-product__heart {\r\n    display: none;\r\n  }\r\n\r\n  .ay-hot .ay-product__favorite {\r\n    padding: 6px 10px;\r\n    font-size: 11px;\r\n  }\r\n\r\n  .ay-product__media:hover .ay-product__image {\r\n    filter: none;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .ay-hot__track,\r\n  .ay-hot .ay-product,\r\n  .ay-product__overlay,\r\n  .ay-hot .ay-product__image,\r\n  .ay-hot .ay-product__cart {\r\n    transition: none;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section class=\"ay-hot\" aria-label=\"\u70ed\u95e8\u63a8\u8350\">\r\n  <div class=\"ay-hot__panel\">\r\n    <div class=\"ay-hot__inner\">\r\n\r\n      <div class=\"ay-hot__heading\">\r\n        <h2 class=\"ay-hot__title\">\u70ed\u95e8\u63a8\u8350<\/h2>\r\n        <div class=\"ay-hot__decor\" aria-hidden=\"true\">\r\n          <span class=\"ay-hot__dash\"><\/span>\r\n          <span class=\"ay-hot__mouse\"><\/span>\r\n          <span class=\"ay-hot__dash\"><\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"ay-hot__bar\">\r\n        <div>\r\n          <h3 class=\"ay-hot__label\"><span>\u70ed\u9500<\/span>\u5546\u54c1 <span>\u2199<\/span><\/h3>\r\n          <p class=\"ay-hot__intro\">\u6211\u4eec\u6709\u6700\u53d7\u6b22\u8fce\u7684\u73a9\u5177<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"ay-hot__nav\">\r\n          <button class=\"ay-hot__arrow\" type=\"button\"\r\n                  data-direction=\"-1\" aria-label=\"\u4e0a\u4e00\u7ec4\u5546\u54c1\">\r\n            <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n              <path d=\"M10 3L5 8L10 13\" stroke=\"currentColor\"\r\n                    stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n            <\/svg>\r\n          <\/button>\r\n          <button class=\"ay-hot__arrow\" type=\"button\"\r\n                  data-direction=\"1\" aria-label=\"\u4e0b\u4e00\u7ec4\u5546\u54c1\">\r\n            <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n              <path d=\"M6 3L11 8L6 13\" stroke=\"currentColor\"\r\n                    stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n            <\/svg>\r\n          <\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"ay-hot__viewport\">\r\n        <div class=\"ay-hot__track\"><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"ay-hot__status\" role=\"status\" aria-live=\"polite\"><\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function () {\r\n  const root = document.currentScript.previousElementSibling;\r\n  if (!root || !root.matches(\".ay-hot\")) return;\r\n\r\n  \/*\r\n   * \u4fee\u6539\u5546\u54c1\u8d44\u6599\uff1a\r\n   * image\uff1a\u5a92\u4f53\u5e93\u56fe\u7247\u5730\u5740\r\n   * url\uff1a\u5546\u54c1\u8be6\u60c5\u94fe\u63a5\r\n   * price\uff1a\u5c55\u793a\u4ef7\u683c\r\n   * \u76ee\u524d8\u4ef6\u5546\u54c1\uff0c\u6bcf\u7ec4\u663e\u793a4\u4ef6\uff0c\u9ed8\u8ba4\u4e24\u884c\u56db\u5217\u3002\r\n   *\/\r\n  const products = [\r\n    {\r\n      name: \"SilK\u9707\u52a8\u68d2\",\r\n      description: \"\u7ec6\u817b\u89e6\u611f\uff0c\u591a\u6863\u8c03\u8282\uff0c\u63a2\u7d22\u5c5e\u4e8e\u4f60\u7684\u8f7b\u677e\u65f6\u523b\u3002\",\r\n      price: \"$333\",\r\n      image: \"\u66ff\u6362\u4e3a\u7b2c1\u5f20\u5546\u54c1\u56fe\u7247\u5730\u5740\",\r\n      url: \"\/shop\/\"\r\n    },\r\n    {\r\n      name: \"SilK\u8f7b\u67d4\u7cfb\u5217\",\r\n      description: \"\u7b80\u7ea6\u5916\u89c2\uff0c\u67d4\u8f6f\u6750\u8d28\uff0c\u5e26\u6765\u8212\u9002\u7684\u8d34\u5fc3\u4f53\u9a8c\u3002\",\r\n      price: \"$333\",\r\n      image: \"\u66ff\u6362\u4e3a\u7b2c2\u5f20\u5546\u54c1\u56fe\u7247\u5730\u5740\",\r\n      url: \"\/shop\/\"\r\n    },\r\n    {\r\n      name: \"SilK\u60a6\u4eab\u7cfb\u5217\",\r\n      description: \"\u7cbe\u5de7\u8bbe\u8ba1\uff0c\u4fbf\u4e8e\u6536\u7eb3\uff0c\u8ba9\u65e5\u5e38\u591a\u4e00\u70b9\u6109\u60a6\u3002\",\r\n      price: \"$333\",\r\n      image: \"\u66ff\u6362\u4e3a\u7b2c3\u5f20\u5546\u54c1\u56fe\u7247\u5730\u5740\",\r\n      url: \"\/shop\/\"\r\n    },\r\n    {\r\n      name: \"SilK\u968f\u5fc3\u7cfb\u5217\",\r\n      description: \"\u591a\u79cd\u6a21\u5f0f\u81ea\u7531\u9009\u62e9\uff0c\u53d1\u73b0\u9002\u5408\u81ea\u5df1\u7684\u8282\u594f\u3002\",\r\n      price: \"$333\",\r\n      image: \"\u66ff\u6362\u4e3a\u7b2c4\u5f20\u5546\u54c1\u56fe\u7247\u5730\u5740\",\r\n      url: \"\/shop\/\"\r\n    },\r\n    {\r\n      name: \"SilK\u67d4\u611f\u7cfb\u5217\",\r\n      description: \"\u4eb2\u80a4\u89e6\u611f\uff0c\u7b80\u4fbf\u64cd\u4f5c\uff0c\u966a\u4f34\u4f60\u7684\u653e\u677e\u65f6\u5149\u3002\",\r\n      price: \"$333\",\r\n      image: \"\u66ff\u6362\u4e3a\u7b2c5\u5f20\u5546\u54c1\u56fe\u7247\u5730\u5740\",\r\n      url: \"\/shop\/\"\r\n    },\r\n    {\r\n      name: \"SilK\u5fc3\u52a8\u7cfb\u5217\",\r\n      description: \"\u6d41\u7545\u7ebf\u6761\u4e0e\u7cbe\u81f4\u7ec6\u8282\uff0c\u5448\u73b0\u7b80\u6d01\u8bbe\u8ba1\u7f8e\u611f\u3002\",\r\n      price: \"$333\",\r\n      image: \"\u66ff\u6362\u4e3a\u7b2c6\u5f20\u5546\u54c1\u56fe\u7247\u5730\u5740\",\r\n      url: \"\/shop\/\"\r\n    },\r\n    {\r\n      name: \"SilK\u79c1\u4eab\u7cfb\u5217\",\r\n      description: \"\u5c0f\u5de7\u4fbf\u643a\uff0c\u8f7b\u677e\u6536\u7eb3\uff0c\u4e3a\u4e2a\u4eba\u65f6\u5149\u589e\u6dfb\u7075\u611f\u3002\",\r\n      price: \"$333\",\r\n      image: \"\u66ff\u6362\u4e3a\u7b2c7\u5f20\u5546\u54c1\u56fe\u7247\u5730\u5740\",\r\n      url: \"\/shop\/\"\r\n    },\r\n    {\r\n      name: \"SilK\u7ecf\u5178\u7cfb\u5217\",\r\n      description: \"\u7ecf\u5178\u9020\u578b\u642d\u914d\u67d4\u548c\u914d\u8272\uff0c\u4eab\u53d7\u81ea\u5728\u7684\u6bcf\u4e00\u523b\u3002\",\r\n      price: \"$333\",\r\n      image: \"\u66ff\u6362\u4e3a\u7b2c8\u5f20\u5546\u54c1\u56fe\u7247\u5730\u5740\",\r\n      url: \"\/shop\/\"\r\n    }\r\n  ];\r\n\r\n  const track = root.querySelector(\".ay-hot__track\");\r\n  const status = root.querySelector(\".ay-hot__status\");\r\n\r\n  function escapeHTML(value) {\r\n    return String(value).replace(\/[&<>\"']\/g, function (char) {\r\n      return {\r\n        \"&\": \"&amp;\", \"<\": \"&lt;\", \">\": \"&gt;\",\r\n        '\"': \"&quot;\", \"'\": \"&#39;\"\r\n      }[char];\r\n    });\r\n  }\r\n\r\n  function card(product) {\r\n    return `\r\n      <article class=\"ay-product\">\r\n        <div class=\"ay-product__media\">\r\n          <a class=\"ay-product__image-link\"\r\n             href=\"${escapeHTML(product.url)}\"\r\n             aria-label=\"${escapeHTML(product.name)}\">\r\n            <img decoding=\"async\" class=\"ay-product__image\"\r\n                 src=\"${escapeHTML(product.image)}\"\r\n                 alt=\"${escapeHTML(product.name)}\"\r\n                 loading=\"lazy\">\r\n          <\/a>\r\n          <div class=\"ay-product__overlay\">\r\n            <svg class=\"ay-product__heart\" viewBox=\"0 0 40 40\"\r\n                 fill=\"none\" aria-hidden=\"true\">\r\n              <path d=\"M20 34L6 20C-3 10 11 0 20 11\r\n                       C29 0 43 10 34 20L20 34Z\"\r\n                    stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n            <\/svg>\r\n            <button class=\"ay-product__favorite\"\r\n                    type=\"button\" aria-pressed=\"false\">+\u6536\u85cf<\/button>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"ay-product__info\">\r\n          <h3 class=\"ay-product__name\">\r\n            <a href=\"${escapeHTML(product.url)}\">${escapeHTML(product.name)}<\/a>\r\n          <\/h3>\r\n          <p class=\"ay-product__description\">${escapeHTML(product.description)}<\/p>\r\n          <p class=\"ay-product__price\">${escapeHTML(product.price)}<\/p>\r\n          <button class=\"ay-product__cart\" type=\"button\">\u52a0\u5165\u8d2d\u7269\u8f66<\/button>\r\n        <\/div>\r\n      <\/article>`;\r\n  }\r\n\r\n  \/* \u6bcf\u98758\u4ef6\uff1b\u8d85\u8fc78\u4ef6\u65f6\u81ea\u52a8\u589e\u52a0\u4e0b\u4e00\u9875 *\/\r\n  const pages = [];\r\n  for (let i = 0; i < products.length; i += 8) {\r\n    pages.push(products.slice(i, i + 8));\r\n  }\r\n\r\n  track.innerHTML = pages.map(function (items) {\r\n    return '<div class=\"ay-hot__page\">' +\r\n      items.map(card).join(\"\") + '<\/div>';\r\n  }).join(\"\");\r\n\r\n  let current = 0;\r\n  const pageElements = Array.from(track.children);\r\n\r\n  function showPage(next) {\r\n    current = (next + pages.length) % pages.length;\r\n    track.style.transform = `translateX(-${current * 100}%)`;\r\n    pageElements.forEach(function (page, i) {\r\n      page.inert = i !== current;\r\n      page.setAttribute(\"aria-hidden\", String(i !== current));\r\n    });\r\n  }\r\n\r\n  root.querySelectorAll(\".ay-hot__arrow\").forEach(function (button) {\r\n    button.addEventListener(\"click\", function () {\r\n      if (pages.length === 1) {\r\n        status.textContent = \"\u5f53\u524d\u51718\u4ef6\u5546\u54c1\uff0c\u5df2\u5168\u90e8\u5c55\u793a\u3002\";\r\n        return;\r\n      }\r\n      showPage(current + Number(button.dataset.direction));\r\n      status.textContent = `\u7b2c ${current + 1} \u7ec4\uff0c\u5171 ${pages.length} \u7ec4`;\r\n    });\r\n  });\r\n\r\n  root.addEventListener(\"click\", function (event) {\r\n    const favorite = event.target.closest(\".ay-product__favorite\");\r\n    if (favorite) {\r\n      const selected = favorite.getAttribute(\"aria-pressed\") !== \"true\";\r\n      favorite.setAttribute(\"aria-pressed\", String(selected));\r\n      favorite.textContent = selected ? \"\u5df2\u6536\u85cf \u2665\" : \"+\u6536\u85cf\";\r\n      status.textContent = selected\r\n        ? \"\u6f14\u793a\uff1a\u5df2\u6536\u85cf\uff0c\u5237\u65b0\u9875\u9762\u540e\u91cd\u7f6e\u3002\"\r\n        : \"\u6f14\u793a\uff1a\u5df2\u53d6\u6d88\u6536\u85cf\u3002\";\r\n    }\r\n\r\n    if (event.target.closest(\".ay-product__cart\")) {\r\n      status.textContent = \"\u8fd9\u662f\u9759\u6001\u6837\u5f0f\u6f14\u793a\uff0c\u5c1a\u672a\u8fde\u63a5 WooCommerce \u8d2d\u7269\u8f66\u3002\";\r\n    }\r\n  });\r\n\r\n  showPage(0);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-482b04a e-con-full e-flex e-con e-parent\" data-id=\"482b04a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6feefe2 elementor-widget elementor-widget-html\" data-id=\"6feefe2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.ay-creators,\r\n.ay-creators * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.ay-creators {\r\n  width: 100%;\r\n  padding: 65px 0 55px;\r\n  background: #f8f8f8;\r\n  font-family: Arial, \"Microsoft YaHei\", sans-serif;\r\n}\r\n\r\n.ay-creators__inner {\r\n  width: 88%;\r\n  max-width: 1600px;\r\n  margin: auto;\r\n}\r\n\r\n.ay-creators .ay-creators__title {\r\n  margin: 0 0 42px;\r\n  color: #290b30;\r\n  font-size: 22px;\r\n  font-weight: 700;\r\n  line-height: 1.5;\r\n}\r\n\r\n.ay-creators__title span {\r\n  color: #7746ff;\r\n}\r\n\r\n.ay-creators__title small {\r\n  display: inline-grid;\r\n  place-items: center;\r\n  width: 18px;\r\n  height: 18px;\r\n  margin-left: 5px;\r\n  border-radius: 50%;\r\n  background: #7746ff;\r\n  color: #fff;\r\n  font-size: 13px;\r\n  vertical-align: middle;\r\n}\r\n\r\n\/* \u6a2a\u5411\u6eda\u52a8 *\/\r\n.ay-creators__list {\r\n  display: flex;\r\n  gap: 34px;\r\n  margin: -18px -20px;\r\n  padding: 18px 20px 24px;\r\n  overflow-x: auto;\r\n  scroll-snap-type: x mandatory;\r\n  scrollbar-width: none;\r\n}\r\n\r\n.ay-creators__list::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n\r\n.ay-creators__card {\r\n  flex: 0 0 calc((100% - 102px) \/ 4);\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  border-radius: 17px;\r\n  background: #333;\r\n  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);\r\n  scroll-snap-align: start;\r\n}\r\n\r\n\/* \u5c01\u9762\u548c\u64ad\u653e\u6309\u94ae *\/\r\n.ay-creators .ay-creators__play {\r\n  appearance: none;\r\n  position: relative;\r\n  display: block;\r\n  width: 100%;\r\n  min-height: 0;\r\n  aspect-ratio: 0.94;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  border: 0;\r\n  border-radius: 0;\r\n  background: #e5e5e5;\r\n  cursor: pointer;\r\n}\r\n\r\n.ay-creators .ay-creators__cover {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  margin: 0;\r\n  object-fit: cover;\r\n  transition: transform .3s;\r\n}\r\n\r\n.ay-creators__play:hover .ay-creators__cover {\r\n  transform: scale(1.04);\r\n}\r\n\r\n.ay-creators__play-icon {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  display: grid;\r\n  place-items: center;\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 50%;\r\n  background: #fff;\r\n  color: #333;\r\n  transform: translate(-50%, -50%);\r\n  box-shadow: 0 3px 12px rgba(0,0,0,.08);\r\n}\r\n\r\n.ay-creators__play-icon svg {\r\n  width: 21px;\r\n  height: 21px;\r\n  margin-left: 3px;\r\n}\r\n\r\n\/* \u8fbe\u4eba\u4fe1\u606f *\/\r\n.ay-creators__info {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 18px;\r\n}\r\n\r\n.ay-creators .ay-creators__avatar {\r\n  display: block;\r\n  width: 46px;\r\n  height: 46px;\r\n  flex-shrink: 0;\r\n  border-radius: 50%;\r\n  object-fit: cover;\r\n}\r\n\r\n.ay-creators__text {\r\n  min-width: 0;\r\n}\r\n\r\n.ay-creators .ay-creators__name {\r\n  margin: 0 0 4px;\r\n  overflow: hidden;\r\n  color: #fff;\r\n  font-size: 16px;\r\n  font-weight: 400;\r\n  line-height: 1.4;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n.ay-creators .ay-creators__description {\r\n  margin: 0;\r\n  overflow: hidden;\r\n  color: #aaa;\r\n  font-size: 13px;\r\n  line-height: 1.5;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n\/* \u5e95\u90e8\u8fdb\u5ea6\u548c\u7bad\u5934 *\/\r\n.ay-creators__controls {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 18px;\r\n  margin-top: 62px;\r\n}\r\n\r\n.ay-creators__progress {\r\n  flex: 1;\r\n  height: 3px;\r\n  overflow: hidden;\r\n  background: #d1d1d1;\r\n}\r\n\r\n.ay-creators__progress-bar {\r\n  width: 25%;\r\n  height: 100%;\r\n  background: #111;\r\n}\r\n\r\n.ay-creators__nav {\r\n  display: flex;\r\n  gap: 22px;\r\n}\r\n\r\n.ay-creators .ay-creators__arrow {\r\n  appearance: none;\r\n  display: grid;\r\n  place-items: center;\r\n  width: 27px;\r\n  min-width: 27px;\r\n  height: 27px;\r\n  min-height: 0;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 50%;\r\n  background: #290b32;\r\n  color: #fff;\r\n  cursor: pointer;\r\n}\r\n\r\n.ay-creators__arrow svg {\r\n  width: 15px;\r\n  height: 15px;\r\n}\r\n\r\n.ay-creators__arrow:disabled {\r\n  opacity: .35;\r\n  cursor: default;\r\n}\r\n\r\n\/* \u89c6\u9891\u5f39\u7a97 *\/\r\n.ay-creators__modal {\r\n  width: min(900px, 92vw);\r\n  max-width: 92vw;\r\n  max-height: 90vh;\r\n  margin: auto;\r\n  padding: 44px 12px 12px;\r\n  overflow: auto;\r\n  border: 0;\r\n  border-radius: 16px;\r\n  background: #151515;\r\n  color: #fff;\r\n}\r\n\r\n.ay-creators__modal::backdrop {\r\n  background: rgba(0,0,0,.8);\r\n}\r\n\r\n.ay-creators .ay-creators__close {\r\n  position: absolute;\r\n  top: 7px;\r\n  right: 10px;\r\n  width: 30px;\r\n  height: 30px;\r\n  min-height: 0;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  background: transparent;\r\n  color: #fff;\r\n  font-size: 26px;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n}\r\n\r\n.ay-creators .ay-creators__video {\r\n  display: block;\r\n  width: 100%;\r\n  max-height: 74vh;\r\n  background: #000;\r\n}\r\n\r\n.ay-creators button:focus-visible {\r\n  outline: 3px solid #8750ff;\r\n  outline-offset: -3px;\r\n}\r\n\r\n@media (max-width: 1200px) {\r\n  .ay-creators__card {\r\n    flex-basis: calc((100% - 56px) \/ 3);\r\n  }\r\n\r\n  .ay-creators__list {\r\n    gap: 28px;\r\n  }\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .ay-creators {\r\n    padding: 36px 0;\r\n  }\r\n\r\n  .ay-creators__inner {\r\n    width: 90%;\r\n  }\r\n\r\n  .ay-creators .ay-creators__title {\r\n    margin-bottom: 24px;\r\n    font-size: 19px;\r\n  }\r\n\r\n  .ay-creators__list {\r\n    gap: 18px;\r\n    margin-right: -5vw;\r\n    padding-right: 5vw;\r\n  }\r\n\r\n  .ay-creators__card {\r\n    flex-basis: 78%;\r\n  }\r\n\r\n  .ay-creators__info {\r\n    padding: 14px;\r\n  }\r\n\r\n  .ay-creators__controls {\r\n    margin-top: 36px;\r\n    gap: 14px;\r\n  }\r\n\r\n  .ay-creators__nav {\r\n    gap: 14px;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .ay-creators .ay-creators__cover {\r\n    transition: none;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section class=\"ay-creators\" aria-label=\"\u8fbe\u4eba\u5206\u4eab\">\r\n  <div class=\"ay-creators__inner\">\r\n\r\n    <h2 class=\"ay-creators__title\">\r\n      \u542c\u542c<span>\u8fbe\u4eba\u521b\u4f5c\u8005<\/span>\u7684\u60f3\u6cd5<small aria-hidden=\"true\">\u2199<\/small>\r\n    <\/h2>\r\n\r\n    <div class=\"ay-creators__list\" aria-label=\"\u8fbe\u4eba\u89c6\u9891\u5217\u8868\"><\/div>\r\n\r\n    <div class=\"ay-creators__controls\">\r\n      <div class=\"ay-creators__progress\" aria-hidden=\"true\">\r\n        <div class=\"ay-creators__progress-bar\"><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"ay-creators__nav\">\r\n        <button class=\"ay-creators__arrow\" type=\"button\"\r\n                data-direction=\"-1\" aria-label=\"\u4e0a\u4e00\u7ec4\u89c6\u9891\">\r\n          <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n            <path d=\"M10 2L4 8L10 14\" stroke=\"currentColor\"\r\n                  stroke-width=\"1.4\" stroke-linecap=\"round\"\/>\r\n          <\/svg>\r\n        <\/button>\r\n\r\n        <button class=\"ay-creators__arrow\" type=\"button\"\r\n                data-direction=\"1\" aria-label=\"\u4e0b\u4e00\u7ec4\u89c6\u9891\">\r\n          <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n            <path d=\"M6 2L12 8L6 14\" stroke=\"currentColor\"\r\n                  stroke-width=\"1.4\" stroke-linecap=\"round\"\/>\r\n          <\/svg>\r\n        <\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <dialog class=\"ay-creators__modal\" aria-label=\"\u8fbe\u4eba\u5206\u4eab\u89c6\u9891\">\r\n    <button class=\"ay-creators__close\" type=\"button\"\r\n            aria-label=\"\u5173\u95ed\u89c6\u9891\">\u00d7<\/button>\r\n    <video class=\"ay-creators__video\" controls playsinline\r\n           preload=\"none\"><\/video>\r\n  <\/dialog>\r\n<\/section>\r\n\r\n<script>\r\n(function () {\r\n  const root = document.currentScript.previousElementSibling;\r\n  if (!root || !root.matches(\".ay-creators\")) return;\r\n\r\n  \/* \u66ff\u6362\u4ee5\u4e0b\u8d44\u6599\uff0c\u53ef\u7ee7\u7eed\u6dfb\u52a0\u66f4\u591a\u89c6\u9891 *\/\r\n  const creators = [\r\n    {\r\n      name: \"\u8fbe\u4eba\u540d\u79f0\u8fbe\u4eba\u540d\u79f0\",\r\n      description: \"\u5206\u4eab\u751f\u6d3b\u7075\u611f\uff0c\u53d1\u73b0\u5c5e\u4e8e\u81ea\u5df1\u7684\u8f7b\u677e\u65f6\u523b\u3002\",\r\n      cover: \"\u66ff\u6362\u4e3a\u7b2c1\u5f20\u89c6\u9891\u5c01\u9762\u5730\u5740\",\r\n      avatar: \"\u66ff\u6362\u4e3a\u7b2c1\u5f20\u5934\u50cf\u5730\u5740\",\r\n      video: \"\u66ff\u6362\u4e3a\u7b2c1\u4e2aMP4\u89c6\u9891\u5730\u5740\"\r\n    },\r\n    {\r\n      name: \"\u8fbe\u4eba\u540d\u79f0\u8fbe\u4eba\u540d\u79f0\",\r\n      description: \"\u4ece\u7ec6\u8282\u51fa\u53d1\uff0c\u5206\u4eab\u6211\u7684\u771f\u5b9e\u4f53\u9a8c\u4e0e\u611f\u53d7\u3002\",\r\n      cover: \"\u66ff\u6362\u4e3a\u7b2c2\u5f20\u89c6\u9891\u5c01\u9762\u5730\u5740\",\r\n      avatar: \"\u66ff\u6362\u4e3a\u7b2c2\u5f20\u5934\u50cf\u5730\u5740\",\r\n      video: \"\u66ff\u6362\u4e3a\u7b2c2\u4e2aMP4\u89c6\u9891\u5730\u5740\"\r\n    },\r\n    {\r\n      name: \"\u8fbe\u4eba\u540d\u79f0\u8fbe\u4eba\u540d\u79f0\",\r\n      description: \"\u63a2\u7d22\u65e5\u5e38\u597d\u7269\uff0c\u8ba9\u6bcf\u4e00\u5929\u90fd\u591a\u4e00\u70b9\u81ea\u5728\u3002\",\r\n      cover: \"\u66ff\u6362\u4e3a\u7b2c3\u5f20\u89c6\u9891\u5c01\u9762\u5730\u5740\",\r\n      avatar: \"\u66ff\u6362\u4e3a\u7b2c3\u5f20\u5934\u50cf\u5730\u5740\",\r\n      video: \"\u66ff\u6362\u4e3a\u7b2c3\u4e2aMP4\u89c6\u9891\u5730\u5740\"\r\n    },\r\n    {\r\n      name: \"\u8fbe\u4eba\u540d\u79f0\u8fbe\u4eba\u540d\u79f0\",\r\n      description: \"\u8bb0\u5f55\u4e2a\u4eba\u4f53\u9a8c\uff0c\u5206\u4eab\u503c\u5f97\u5173\u6ce8\u7684\u751f\u6d3b\u53d1\u73b0\u3002\",\r\n      cover: \"\u66ff\u6362\u4e3a\u7b2c4\u5f20\u89c6\u9891\u5c01\u9762\u5730\u5740\",\r\n      avatar: \"\u66ff\u6362\u4e3a\u7b2c4\u5f20\u5934\u50cf\u5730\u5740\",\r\n      video: \"\u66ff\u6362\u4e3a\u7b2c4\u4e2aMP4\u89c6\u9891\u5730\u5740\"\r\n    },\r\n    {\r\n      name: \"\u8fbe\u4eba\u540d\u79f0\u8fbe\u4eba\u540d\u79f0\",\r\n      description: \"\u627e\u5230\u9002\u5408\u81ea\u5df1\u7684\u8282\u594f\uff0c\u4eab\u53d7\u8212\u9002\u751f\u6d3b\u3002\",\r\n      cover: \"\u66ff\u6362\u4e3a\u7b2c5\u5f20\u89c6\u9891\u5c01\u9762\u5730\u5740\",\r\n      avatar: \"\u66ff\u6362\u4e3a\u7b2c5\u5f20\u5934\u50cf\u5730\u5740\",\r\n      video: \"\u66ff\u6362\u4e3a\u7b2c5\u4e2aMP4\u89c6\u9891\u5730\u5740\"\r\n    }\r\n  ];\r\n\r\n  const list = root.querySelector(\".ay-creators__list\");\r\n  const progress = root.querySelector(\".ay-creators__progress-bar\");\r\n  const previous = root.querySelector('[data-direction=\"-1\"]');\r\n  const next = root.querySelector('[data-direction=\"1\"]');\r\n  const modal = root.querySelector(\".ay-creators__modal\");\r\n  const player = root.querySelector(\".ay-creators__video\");\r\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\r\n  let lastTrigger;\r\n\r\n  function escapeHTML(value) {\r\n    return String(value).replace(\/[&<>\"']\/g, function (char) {\r\n      return {\r\n        \"&\": \"&amp;\", \"<\": \"&lt;\", \">\": \"&gt;\",\r\n        '\"': \"&quot;\", \"'\": \"&#39;\"\r\n      }[char];\r\n    });\r\n  }\r\n\r\n  list.innerHTML = creators.map(function (creator, index) {\r\n    return `\r\n      <article class=\"ay-creators__card\">\r\n        <button class=\"ay-creators__play\"\r\n                type=\"button\"\r\n                data-video-index=\"${index}\"\r\n                aria-label=\"\u64ad\u653e${escapeHTML(creator.name)}\u7684\u89c6\u9891\">\r\n          <img decoding=\"async\" class=\"ay-creators__cover\"\r\n               src=\"${escapeHTML(creator.cover)}\"\r\n               alt=\"${escapeHTML(creator.name)}\u89c6\u9891\u5c01\u9762\"\r\n               loading=\"lazy\">\r\n          <span class=\"ay-creators__play-icon\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\r\n              <path d=\"M6 3L21 12L6 21V3Z\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/button>\r\n\r\n        <div class=\"ay-creators__info\">\r\n          <img decoding=\"async\" class=\"ay-creators__avatar\"\r\n               src=\"${escapeHTML(creator.avatar)}\"\r\n               alt=\"\" loading=\"lazy\">\r\n          <div class=\"ay-creators__text\">\r\n            <h3 class=\"ay-creators__name\">${escapeHTML(creator.name)}<\/h3>\r\n            <p class=\"ay-creators__description\">${escapeHTML(creator.description)}<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>`;\r\n  }).join(\"\");\r\n\r\n  function updateProgress() {\r\n    const maxScroll = list.scrollWidth - list.clientWidth;\r\n    const position = Math.max(0, Math.min(maxScroll, list.scrollLeft));\r\n    const visibleRatio = Math.min(1, list.clientWidth \/ list.scrollWidth);\r\n    const progressRatio = maxScroll > 1 ? position \/ maxScroll : 0;\r\n\r\n    progress.style.width = visibleRatio * 100 + \"%\";\r\n    progress.style.marginLeft =\r\n      progressRatio * (1 - visibleRatio) * 100 + \"%\";\r\n\r\n    previous.disabled = position <= 2;\r\n    next.disabled = maxScroll <= 2 || position >= maxScroll - 2;\r\n  }\r\n\r\n  [previous, next].forEach(function (button) {\r\n    button.addEventListener(\"click\", function () {\r\n      const card = list.querySelector(\".ay-creators__card\");\r\n      const gap = parseFloat(getComputedStyle(list).gap) || 0;\r\n      const distance = card.getBoundingClientRect().width + gap;\r\n\r\n      list.scrollBy({\r\n        left: Number(button.dataset.direction) * distance,\r\n        behavior: reducedMotion.matches ? \"instant\" : \"smooth\"\r\n      });\r\n    });\r\n  });\r\n\r\n  list.addEventListener(\"scroll\", updateProgress, { passive: true });\r\n  new ResizeObserver(updateProgress).observe(list);\r\n\r\n  list.addEventListener(\"click\", function (event) {\r\n    const trigger = event.target.closest(\"[data-video-index]\");\r\n    if (!trigger) return;\r\n\r\n    const creator = creators[Number(trigger.dataset.videoIndex)];\r\n    lastTrigger = trigger;\r\n    player.src = creator.video;\r\n    player.poster = creator.cover;\r\n    modal.showModal();\r\n    player.play().catch(function () {});\r\n  });\r\n\r\n  root.querySelector(\".ay-creators__close\")\r\n    .addEventListener(\"click\", function () {\r\n      modal.close();\r\n    });\r\n\r\n  modal.addEventListener(\"click\", function (event) {\r\n    if (event.target !== modal) return;\r\n    const rect = modal.getBoundingClientRect();\r\n    if (\r\n      event.clientX < rect.left || event.clientX > rect.right ||\r\n      event.clientY < rect.top || event.clientY > rect.bottom\r\n    ) modal.close();\r\n  });\r\n\r\n  modal.addEventListener(\"close\", function () {\r\n    player.pause();\r\n    player.removeAttribute(\"src\");\r\n    player.load();\r\n    if (lastTrigger) lastTrigger.focus();\r\n  });\r\n\r\n  updateProgress();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u53d1\u8d27\u4fdd\u969c \u9690\u79c1\u5305\u88c5 \u533f\u540d\u7269\u6d41 \u5b89\u5168\u652f\u4ed8  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-20","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.yunasoul.com\/index.php\/wp-json\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yunasoul.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.yunasoul.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.yunasoul.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yunasoul.com\/index.php\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":19,"href":"https:\/\/www.yunasoul.com\/index.php\/wp-json\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":148,"href":"https:\/\/www.yunasoul.com\/index.php\/wp-json\/wp\/v2\/pages\/20\/revisions\/148"}],"wp:attachment":[{"href":"https:\/\/www.yunasoul.com\/index.php\/wp-json\/wp\/v2\/media?parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}