@charset "UTF-8";
.header.header-fixed.header-fixeding {
  display: none;
}

.main-article {
  padding-top: 5rem;
}
.main-article .header-article {
  margin-top: -5rem;
  padding-top: 5rem;
}

.header-article {
  padding-top: 5rem;
  padding-bottom: 1.875rem;
}

.article-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 30px 8px 0;
}
@media screen and (min-width: 768px) {
  .article-banner {
    flex-direction: row;
    padding: 16px 8px 0;
  }
}
.article-banner .pic {
  display: none;
}
@media screen and (min-width: 768px) {
  .article-banner .pic {
    display: block;
    order: 2;
    width: 35%;
    flex-shrink: 0;
  }
}
@media screen and (min-width: 768px) {
  .article-banner .cont {
    order: 1;
    width: 100%;
    max-width: 600px;
  }
}
.article-banner .title {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .article-banner .title {
    font-size: 1.625rem;
  }
}
@media screen and (min-width: 1400px) {
  .article-banner .title {
    font-size: 1.625rem;
  }
}
.article-banner .info {
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

#slide-bar-collapse-btn {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
}

.recommend-article {
  border: solid 1px rgba(0, 0, 0, 0.15);
  background-color: #fff;
  border-radius: 1rem;
  padding: 1.5rem 0;
  height: 100%;
  transform: translateX(-100%);
  transition: all 0.3s linear;
  max-width: 0;
  overflow: hidden;
}
@media screen and (min-width: 992px) {
  .recommend-article {
    display: block;
    max-width: none;
    transform: translateX(0);
    overflow: visible;
  }
}
.recommend-article.mb-active {
  width: 80vw;
  max-width: 300px;
  max-height: 70vh;
  overflow-y: auto;
  border-top-left-radius: 0;
  border-end-start-radius: 0;
  transform: translateX(0);
}
.recommend-article.mb-active + #slide-bar-collapse-btn {
  left: auto;
  right: 0;
  padding: 0.5rem;
}
.recommend-article.mb-active + #slide-bar-collapse-btn::after {
  display: block;
  content: "";
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/></svg>') no-repeat center;
  background-size: contain;
}
.recommend-article.mb-active + #slide-bar-collapse-btn img {
  display: none;
}
.recommend-article .tag-title {
  font-size: 18px;
  line-height: 1.2;
  margin-bottom: 1rem !important;
}
.recommend-article .tag-title::before {
  content: url('data:image/svg+xml,<svg width="18" height="26" viewBox="0 0 18 26" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.6"><path d="M18 15.8348L2 25V19.1655L18 10.0002L18 15.8348Z" fill="%23A99EFF"/><path d="M17.9727 9.69616L2 1.74347L2 7.50009L17.9727 15.5705L17.9727 9.69616Z" fill="%236B57FF"/></g></svg>');
  margin-right: 10px;
  width: 18px;
  height: 26px;
  display: none;
}
@media screen and (min-width: 992px) {
  .recommend-article .tag-title::before {
    display: block;
  }
}
.recommend-article .slidebar-accordion-item-title {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  line-height: 1.4;
  padding-right: 20px;
}
.recommend-article .slidebar-accordion-item-title:not(.collapsed) {
  color: var(--bs-primary);
}
.recommend-article .slidebar-accordion-item-title::after {
  display: block;
  content: "";
  opacity: 1;
  width: 18px;
  height: 18px;
  background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.26721 16.1804C4.64301 16.5852 5.27574 16.6086 5.68046 16.2328L12 10.3646L18.3196 16.2328C18.7243 16.6086 19.357 16.5852 19.7328 16.1804C20.1086 15.7757 20.0852 15.143 19.6805 14.7672L12.6805 8.2672C12.2968 7.91093 11.7032 7.91093 11.3196 8.2672L4.31955 14.7672C3.91484 15.143 3.89141 15.7757 4.26721 16.1804Z" fill="%23823fff"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  z-index: 2;
  top: 3px;
  right: 0;
  transition: all 0.3s linear;
}
.recommend-article .slidebar-accordion-item-title.collapsed::after {
  background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.26721 16.1804C4.64301 16.5852 5.27574 16.6086 5.68046 16.2328L12 10.3646L18.3196 16.2328C18.7243 16.6086 19.357 16.5852 19.7328 16.1804C20.1086 15.7757 20.0852 15.143 19.6805 14.7672L12.6805 8.2672C12.2968 7.91093 11.7032 7.91093 11.3196 8.2672L4.31955 14.7672C3.91484 15.143 3.89141 15.7757 4.26721 16.1804Z" fill="%234d4d4d"/></svg>');
  transform: rotate(180deg);
}
.recommend-article .slidebar-item-body {
  margin-top: 1rem;
  margin-left: 0.5rem;
  font-size: 14px;
  line-height: 1.4;
}
.recommend-article .slidebar-item-body a {
  display: block;
  color: #4d4d4d;
  margin-bottom: 0.625rem !important;
  padding-left: 16px;
  position: relative;
}
.recommend-article .slidebar-item-body a::before {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  background-color: #4d4d4d;
  border-radius: 100%;
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 0;
}
.recommend-article .slidebar-item-body a:hover {
  color: var(--bs-primary);
}
.recommend-article .cell {
  height: 100%;
  overflow-y: auto;
  padding: 0 1rem 0 1.5rem;
}
.recommend-article .cell::-webkit-scrollbar,
.recommend-article .slidebar-item-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.recommend-article .cell::-webkit-scrollbar-track,
.recommend-article .slidebar-item-body::-webkit-scrollbar-track {
  padding: 0 4px;
}
.recommend-article .cell::-webkit-scrollbar-thumb,
.recommend-article .slidebar-item-body::-webkit-scrollbar-thumb {
  background: #eeeded;
  border-radius: 100px;
  border: 3px solid #fff;
  cursor: pointer;
  background-clip: padding-box;
}
.recommend-article .cell::-webkit-scrollbar-track,
.recommend-article .slidebar-item-body::-webkit-scrollbar-track {
  background: #fff; /* 滚动条轨道的背景颜色 */
}
.recommend-article .cell::-webkit-scrollbar-button,
.recommend-article .slidebar-item-body::-webkit-scrollbar-button {
  display: none;
}

.sidebar-banner {
  margin-top: 1.5rem;
  border-radius: 1rem;
  padding: 1.5rem;
  background: linear-gradient(180deg, #f0e8ff 0%, #fff5fe 100%);
  display: none;
}
@media screen and (min-width: 992px) {
  .sidebar-banner {
    display: block;
  }
}
.sidebar-banner .title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.sidebar-banner .info {
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
}
.sidebar-banner .pic {
  text-align: center;
}
.sidebar-banner .btn-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.sidebar-banner .btn-box .btn {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 0.875rem;
}

.section-article {
  padding: 2rem 0 1rem 0;
}
@media screen and (min-width: 768px) {
  .section-article {
    padding: 1rem 0;
  }
}
.section-article .section-main {
  display: flex;
  gap: 2rem;
}
@media screen and (min-width: 992px) {
  .section-article .section-main {
    margin-bottom: 1.5rem;
  }
}
.section-article .section-main .article-cont {
  width: 100%;
  order: 2;
}
.section-article .section-main .article-sidebar {
  position: fixed;
  z-index: 10;
  top: 20vh;
  left: 0;
  display: none;
}
@media screen and (min-width: 992px) {
  .section-article .section-main .article-sidebar {
    display: block;
    width: 240px;
    flex-shrink: 0;
    order: 1;
    position: relative;
    top: auto;
    left: auto;
  }
}
.section-article .section-main .article-sidebar.active {
  display: block;
}
@media screen and (min-width: 992px) {
  .section-article .section-main .article-sidebar .sidebar-sticky {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 10px;
  }
}
@media (min-width: 992px) and (min-height: 900px) {
  .section-article .section-main .article-sidebar .sidebar-sticky {
    height: calc(100vh - 20px);
  }
}
@media (min-width: 992px) and (min-height: 900px) {
  .section-article .section-main .article-sidebar .sidebar-sticky .slide-bar {
    flex-basis: auto;
    overflow: hidden;
  }
}
.section-article .section-main .article-sidebar .sidebar-sticky .sidebar-banner {
  flex-shrink: 0;
}

.article-related {
  padding: 1.5rem 0 0 0;
}
@media screen and (min-width: 992px) {
  .article-related {
    padding: 1.5rem 0;
  }
}
.article-related a {
  color: var(--bs-dark);
}
.article-related a:hover {
  color: var(--bs-primary);
  text-decoration: none;
}
.article-related .column-name {
  font-size: 18px;
  margin-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  .article-related .column-name {
    font-size: 24px;
    margin-bottom: 2rem;
  }
}
.article-related .list {
  border-radius: 1.5rem;
  padding: 1.5rem 1rem 1.5rem 0.5rem;
  background-color: rgba(209, 184, 255, 0.12);
}
@media screen and (min-width: 768px) {
  .article-related .list {
    padding: 2rem 1.5rem;
  }
}
.article-related .list ul {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.article-related .list ul a {
  vertical-align: middle;
}
@media screen and (min-width: 768px) {
  .article-related .list ul a {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
  }
}
.article-related .list ul a::after {
  display: inline-block;
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml,<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="%23000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 12l-5-5m5 5l-5 5m5-5H3" /></svg>') no-repeat center;
  background-size: contain;
  margin-left: 8px;
}
@media screen and (min-width: 768px) {
  .article-related .list ul a::after {
    width: 20px;
    height: 20px;
    margin-left: 0;
  }
}
.article-related .list ul a:hover::after {
  background-image: url('data:image/svg+xml,<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="%23823FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 12l-5-5m5 5l-5 5m5-5H3" /></svg>');
}

.bottom-article {
  border-radius: 24px;
  margin: 1rem 1rem 4rem;
}
@media screen and (min-width: 768px) {
  .bottom-article {
    border-radius: 0;
    margin: 0;
  }
}

.aside-fixed-social {
  position: fixed;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .aside-fixed-social {
    display: flex;
  }
}
.aside-fixed-social .item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: #f1f1f1;
  border-radius: 100%;
}

.join {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 16px;
  margin-top: 42px;
  overflow: hidden;
}
.join .accordion-item {
  margin-bottom: 0 !important;
}
.join .accordion.v1 .accordion-body {
  padding: 0 32px !important;
  font-size: 14px;
}
.join .join-item {
  padding: 20px 32px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
}

article.article {
  line-height: 1.8;
  color: #4d4d4d;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  /* 图片增强--视频增强 */
  /* 音频 */
  /* ul标签 */
  /* 勾号li */
  /* 数字li */
  /* 数字li */
  /* list check primay */
  /* summary */
  /* faq */
  /* 滚动条轨道 */
  /* 滚动条滑块 */
  /* 滚动条滑块悬停状态 */
  /* 滚动条按钮（上下箭头部分） */
}
@media screen and (min-width: 768px) {
  article.article {
    font-size: 1rem;
  }
}
article.article a {
  text-decoration: none;
}
article.article a:not(.btn):not(.link-hover-underline):hover {
  text-decoration: underline;
}
article.article h1,
article.article h2,
article.article h3,
article.article h4,
article.article h5,
article.article h6,
article.article p,
article.article ul,
article.article ol,
article.article picture {
  margin-bottom: 1.5rem;
}
article.article section {
  margin-bottom: 2rem;
}
article.article picture {
  display: inline-block;
}
article.article img {
  max-width: 100%;
}
article.article p picture {
  margin-bottom: 0;
}
article.article h1,
article.article .h1 {
  font-size: 1.5rem;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  article.article h1,
  article.article .h1 {
    font-size: 2.25rem;
  }
}
article.article h2,
article.article .h2 {
  font-size: 1.25rem;
}
@media screen and (min-width: 768px) {
  article.article h2,
  article.article .h2 {
    font-size: 1.625rem;
  }
}
article.article h3,
article.article .h3 {
  font-size: 1.125rem;
}
@media screen and (min-width: 768px) {
  article.article h3,
  article.article .h3 {
    font-size: 1.25rem;
  }
}
article.article h3::before,
article.article .h3::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 12px;
  margin-bottom: 1px;
  background: url('data:image/svg+xml,<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.60155 5.11293C8.13282 5.53478 8.13282 6.46521 7.60155 6.88707L1.39 11.8194C0.795715 12.2913 -5.15072e-07 11.7835 -4.77867e-07 10.9323L-4.66696e-08 1.06768C-9.46451e-09 0.216522 0.795715 -0.291288 1.39 0.180604L7.60155 5.11293Z" fill="black"/></svg>');
  margin-right: 6px;
  flex-shrink: 0;
}
article.article h4,
article.article .h4 {
  font-size: 1rem;
}
@media screen and (min-width: 768px) {
  article.article h4,
  article.article .h4 {
    font-size: 1.125rem;
  }
}
article.article h5,
article.article .h5 {
  font-size: 0.875rem;
}
@media screen and (min-width: 768px) {
  article.article h5,
  article.article .h5 {
    font-size: 1rem;
  }
}
article.article ul {
  padding-left: 1.5rem;
}
article.article ul li {
  margin-bottom: 0.5rem;
}
article.article ul li::marker {
  color: var(--bs-primary);
}
article.article .column {
  background-color: rgba(var(--bs-primary-rgb), 0.2);
  border-left: solid 3px var(--bs-primary);
  padding: 0.75rem 1rem;
}
@media screen and (min-width: 768px) {
  article.article .column {
    padding: 1rem 1.5rem;
  }
}
article.article .btn-xs {
  font-size: 1rem;
}
article.article .btn-groups {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  article.article .btn-groups {
    justify-content: start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
  }
}
article.article .article-menulist {
  background-color: rgba(var(--bs-primary-rgb), 0.05);
  border-radius: 1rem;
  padding: 1.5rem;
}
@media screen and (min-width: 768px) {
  article.article .article-menulist {
    border-radius: 1.5rem;
    padding: 2rem;
  }
}
article.article .article-menulist .tit {
  margin-bottom: 0;
  font-weight: bold;
  color: var(--bs-dark);
  position: relative;
  z-index: 1;
  cursor: pointer;
}
@media screen and (min-width: 992px) {
  article.article .article-menulist .tit {
    margin-bottom: 1rem;
  }
}
article.article .article-menulist .tit::after {
  display: flex;
  align-items: center;
  justify-content: center;
  content: "";
  width: 40px;
  height: 24px;
  border: solid 1px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0;
  background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="%23c6c6c6" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9l-7 7l-7-7"></path></svg>') no-repeat center;
  cursor: pointer;
  transform: rotate(0deg) translateY(-50%);
}
@media screen and (min-width: 992px) {
  article.article .article-menulist .tit::after {
    transform: rotate(-180deg) translateY(50%);
  }
}
article.article .article-menulist .icon-hot::after {
  display: inline-block;
  content: "";
  width: 32px;
  height: 20px;
  background: url(https://images.hitpaw.com/images-v5/article/icon-hot.png?v=1) no-repeat center;
  background-size: cover;
}
article.article .article-menulist .icon-new::after {
  display: inline-block;
  content: "";
  width: 32px;
  height: 20px;
  background: url(https://images.hitpaw.com/images-v5/article/icon-new.png?v=1) no-repeat center;
  background-size: cover;
}
article.article .article-menulist ul {
  padding: 0;
  margin: 0;
  display: none;
}
@media screen and (min-width: 992px) {
  article.article .article-menulist ul {
    display: block;
  }
}
article.article .article-menulist ul img {
  margin-left: 8px;
}
article.article .article-menulist ul a {
  color: var(--bs-dark);
  text-decoration: none;
}
article.article .article-menulist ul a:hover {
  color: var(--bs-primary);
  text-decoration: underline;
}
article.article .article-menulist ul li {
  list-style: none;
  position: relative;
  padding-left: 1.5rem;
}
article.article .article-menulist ul li::before {
  display: inline-block;
  content: "";
  background: url('data:image/svg+xml,<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 8l-9 5V3l9 5z" fill="%23823FFF"/></svg>') no-repeat center;
  background-size: contain;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 0;
  transition: all 0.3s linear;
}
article.article .article-menulist ul ul {
  display: block;
  margin: 0.75rem 0 1rem;
}
article.article .article-menulist .sub-item-dropdown .sub-item {
  display: block;
}
article.article .article-menulist .sub-item-dropdown.active::before {
  transform: rotate(90deg);
}
article.article .article-menulist .sub-item-dropdown.active .sub-item {
  display: none;
}
article.article .article-menulist.active .tit {
  margin-bottom: 1rem;
}
@media screen and (min-width: 992px) {
  article.article .article-menulist.active .tit {
    margin-bottom: 0;
  }
}
article.article .article-menulist.active .tit::after {
  transform: rotate(-180deg) translateY(50%);
}
@media screen and (min-width: 992px) {
  article.article .article-menulist.active .tit::after {
    transform: rotate(0deg) translateY(-50%);
  }
}
article.article .article-menulist.active .tit + ul {
  display: block;
}
@media screen and (min-width: 992px) {
  article.article .article-menulist.active .tit + ul {
    display: none;
  }
}
article.article .compare-vs {
  display: flex;
  gap: 1rem;
  position: relative;
  z-index: 1;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  article.article .compare-vs {
    flex-direction: row;
    gap: 1.5rem;
  }
}
article.article .compare-vs .item {
  width: 100%;
  position: relative;
  z-index: 1;
  border-radius: 16px;
  background-color: #f2f2f2;
  padding: 1rem;
}
article.article .compare-vs .item:first-child {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}
article.article .compare-vs .item li::marker {
  color: initial;
}
article.article .compare-vs .vs {
  position: relative;
  z-index: 3;
  color: #ffaa2a;
  font-size: 36px;
  font-weight: bold;
  font-style: italic;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 10px;
  width: 80px;
  height: 80px;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.5);
  margin: -40px auto;
}
@media screen and (min-width: 768px) {
  article.article .compare-vs .vs {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    font-size: 56px;
  }
}
article.article .tips-box {
  position: relative;
  z-index: 1;
  border-radius: 1rem;
  padding: 3rem 1rem 1rem;
}
@media screen and (min-width: 992px) {
  article.article .tips-box {
    padding: 3rem 1.5rem 1rem;
    border-radius: 1.5rem;
  }
}
article.article .tips-box .tag {
  display: inline-flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 16px;
  border-radius: 1.5rem;
  background-color: #ffebe2;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bs-dark);
  border-radius: 1rem 0 0.5rem 0;
}
@media screen and (min-width: 992px) {
  article.article .tips-box .tag {
    border-radius: 1.5rem 0 0.5rem 0;
  }
}
article.article .ol-step {
  list-style: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}
article.article .ol-step li {
  counter-increment: item;
  position: relative;
  z-index: 1;
  padding: 3px 0 13px 32px;
}
article.article .ol-step li::before {
  content: "0" counter(item);
  border-bottom: solid 2px var(--bs-primary);
  font-weight: bold;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}
article.article .product-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 1rem;
  padding: 1rem;
}
@media screen and (min-width: 768px) {
  article.article .product-card {
    flex-direction: row;
    border-radius: 1.5rem;
    padding: 1.5rem;
    gap: 1.5rem;
  }
}
article.article .product-card .tit {
  font-weight: bold;
  color: var(--bs-dark);
  margin-bottom: 1rem;
  font-size: 1.125rem;
}
@media screen and (min-width: 768px) {
  article.article .product-card .tit {
    font-size: 1.25rem;
  }
}
article.article .product-card .pic {
  flex-shrink: 0;
  padding: 1rem;
  text-align: center;
}
article.article .product-card .info {
  width: 100%;
  text-align: center;
}
@media screen and (min-width: 768px) {
  article.article .product-card .info {
    text-align: left;
  }
}
article.article .editor-procard {
  border-radius: 1rem;
  background-color: #ffa154;
  border: solid 4px #ffa154;
  overflow: hidden;
}
article.article .editor-procard .top {
  text-align: center;
  padding: 0.5rem;
  font-weight: 0.875rem;
  font-weight: bold;
  color: var(--bs-dark);
}
article.article .editor-procard .cont {
  padding: 1.5rem;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
article.article .editor-procard .pro_img {
  flex-shrink: 0;
  order: 1;
}
article.article .editor-procard .pro_name {
  color: var(--bs-dark);
  font-weight: bold;
  font-size: 1.125rem;
  text-align: center;
  width: 100%;
  order: 3;
}
@media screen and (min-width: 768px) {
  article.article .editor-procard .pro_name {
    order: 2;
    font-size: 1.25rem;
    text-align: start;
    padding-right: 20%;
  }
}
article.article .editor-procard .pro_name:hover {
  color: var(--bs-primary);
}
article.article .editor-procard .star {
  order: 2;
  flex-shrink: 0;
  font-size: 3rem;
  line-height: 1.4;
  font-weight: bold;
  color: var(--bs-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  article.article .editor-procard .star {
    order: 3;
    font-size: 4rem;
    justify-content: end;
  }
}
article.article .editor-procard .star svg {
  color: #ffa52b;
}
article.article .editor-procard .info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 920px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  article.article .editor-procard .info {
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-between;
    gap: 1.5rem;
  }
}
article.article .editor-procard .btn-groups {
  max-width: 920px;
  margin: 0 auto;
  justify-content: center;
  flex-wrap: nowrap;
}
article.article .editor-procard .btn-groups .item {
  width: 100%;
}
article.article .editor-procard .btn-groups .btn {
  width: 100%;
}
article.article .user-review {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
@media screen and (min-width: 768px) {
  article.article .user-review {
    flex-direction: row;
    align-items: end;
    gap: 1.5rem;
  }
}
article.article .user-review .name {
  font-size: 0.875rem;
  margin-bottom: 0;
  display: block;
}
@media screen and (min-width: 768px) {
  article.article .user-review .name {
    display: none;
  }
}
article.article .user-review .info {
  width: 100%;
  background-color: #f3f3f3;
  padding: 1.5rem;
  border-radius: 1.5rem 1.5rem 1.5rem 0;
}
article.article .user-review .info p {
  margin-bottom: 1rem;
}
article.article .user-review .info .name {
  text-align: end;
  display: none;
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  article.article .user-review .info .name {
    display: block;
  }
}
article.article .accordion.v1 {
  --color: rgba(var(--bs-primary-rgb), 0.05);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
article.article .accordion.v1 .accordion-button {
  font-size: 1.125rem;
}
@media screen and (min-width: 768px) {
  article.article .accordion.v1 .accordion-button {
    font-size: 1.25rem;
  }
}
article.article .accordion.v1 .accordion-item {
  width: 100%;
  border: solid 1px var(--color);
  background-color: var(--color);
  border-radius: 1rem;
}
@media screen and (min-width: 768px) {
  article.article .accordion.v1 .accordion-item {
    border-radius: 1.5rem;
    padding: 0.5rem 1rem;
  }
}
article.article .accordion.v1 .accordion-body {
  padding: 0 1rem 1rem;
}
article.article .compare-pic {
  max-width: 100%;
  border-radius: 12px;
  margin: 32px 0;
}
article.article .compare-pic .compare-line {
  height: 100%;
  width: 2px;
  top: 0;
  left: 10%;
  background-color: rgba(255, 255, 255, 0.8);
  cursor: e-resize;
  z-index: 7 !important;
}
article.article .compare-pic .compare-before {
  width: 10%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
  z-index: 6 !important;
}
article.article .compare-pic .compare-after {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
article.article .compare-pic .compare-line::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  content: "";
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.5" cx="24" cy="24" r="24" fill="white"/><circle cx="24.0004" cy="24.0002" r="17.4545" fill="white"/><path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M28.7663 27.6747C28.3857 28.0553 28.3857 28.6723 28.7663 29.0529C29.1468 29.4335 29.7639 29.4335 30.1444 29.0529L33.9626 25.2347C34.3432 24.8541 34.3432 24.2371 33.9626 23.8565L30.1444 20.0384C29.7639 19.6578 29.1468 19.6578 28.7663 20.0384C28.3857 20.4189 28.3857 21.036 28.7663 21.4165L31.8953 24.5456L28.7663 27.6747ZM19.7796 21.4167C20.1602 21.0361 20.1602 20.4191 19.7796 20.0385C19.3991 19.658 18.782 19.658 18.4015 20.0385L14.5833 23.8567C14.2027 24.2373 14.2027 24.8543 14.5833 25.2349L18.4015 29.0531C18.782 29.4336 19.3991 29.4336 19.7796 29.0531C20.1602 28.6725 20.1602 28.0555 19.7796 27.6749L16.6506 24.5458L19.7796 21.4167Z" fill="%231B1B1B"/></svg>');
  background-size: cover;
}
article.article .compare-pic .compare-after .img-after {
  position: absolute;
  right: auto;
  right: 15px;
  top: 10px;
  bottom: auto;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 2px 10px;
  color: #fff;
  z-index: 10 !important;
  font-size: 12px;
  transform: scale(1);
}
article.article .compare-pic .compare-before .img-after {
  position: absolute;
  right: auto;
  left: 15px;
  top: 10px;
  bottom: auto;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 2px 10px;
  color: #fff;
  z-index: 10 !important;
  font-size: 12px;
  transform: scale(1);
}
@media (min-width: 992px) {
  article.article .compare-pic .compare-line::after {
    width: 36px;
    height: 36px;
    background-size: cover;
  }
  article.article .compare-pic .compare-before .img-after,
  article.article .compare-pic .compare-after .img-after {
    font-size: 16px;
    padding: 2px 10px;
    right: 28px;
    top: 28px;
  }
  article.article .compare-pic .compare-before .img-after {
    right: auto;
    left: 28px;
  }
}
@media (min-width: 1280px) {
  article.article .compare-pic .compare-line::after {
    width: 48px;
    height: 48px;
  }
  article.article .compare-pic {
    max-width: 850px;
    border-radius: 32px;
  }
}
article.article .audioBox {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
article.article ul.list-title {
  margin: 24px 0;
}
article.article ul.list-title li {
  color: #000000;
  font-weight: 700;
  font-size: 16px;
  line-height: 150%;
  margin-bottom: 8px;
}
article.article ul.list-check {
  list-style: none;
  padding-left: 0;
  margin-bottom: 24px;
}
article.article ul.list-check li {
  margin-bottom: 16px;
  font-size: 14px;
}
article.article ul.list-check li::before {
  content: url('data:image/svg+xml,<svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.4235 0.31803C13.0763 0.828046 13.1921 1.77071 12.682 2.42353L6.43204 10.4235C6.16875 10.7605 5.77414 10.9691 5.34739 10.9969C4.92064 11.0247 4.50233 10.869 4.19759 10.5689L0.447594 6.87661C-0.142716 6.29538 -0.150078 5.34566 0.43115 4.75535C1.01238 4.16504 1.9621 4.15768 2.55241 4.73891L5.10366 7.25091L10.318 0.576601C10.828 -0.0762201 11.7706 -0.191986 12.4235 0.31803Z" fill="black" fill-opacity="0.7"/></svg>');
  margin-right: 10px;
  opacity: 0.7;
}
article.article ul.list-num {
  list-style: none;
  padding: 0;
}
article.article ul.list-num li {
  font-size: 18px;
  margin: 16px 0;
  word-break: break-all;
}
article.article ul.list-num li p > span,
article.article ul.list-num li > span {
  font-weight: 700;
  margin-right: 8px;
}
article.article ul.list-num-small {
  list-style: none;
  padding: 0;
}
article.article ul.list-num-small li {
  font-size: 16px;
  margin: 8px 0;
  word-break: break-all;
}
article.article ul.list-num-small li p > span,
article.article ul.list-num-small li > span {
  font-weight: 700;
  margin-right: 8px;
}
article.article ul.list-check-primary {
  list-style: none;
  padding-left: 0;
  margin-bottom: 24px;
}
article.article ul.list-check-primary li {
  margin-bottom: 16px;
  font-size: 14px;
}
article.article ul.list-check-primary li::before {
  content: url('data:image/svg+xml,<svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.4235 0.31803C13.0763 0.828046 13.1921 1.77071 12.682 2.42353L6.43204 10.4235C6.16875 10.7605 5.77414 10.9691 5.34739 10.9969C4.92064 11.0247 4.50233 10.869 4.19759 10.5689L0.447594 6.87661C-0.142716 6.29538 -0.150078 5.34566 0.43115 4.75535C1.01238 4.16504 1.9621 4.15768 2.55241 4.73891L5.10366 7.25091L10.318 0.576601C10.828 -0.0762201 11.7706 -0.191986 12.4235 0.31803Z" fill="%236b57ff" fill-opacity="1"/></svg>');
  margin-right: 10px;
}
article.article .summary {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 16px;
  padding: 24px 24px 24px 24px;
  margin-bottom: 24px;
}
article.article .summary {
  display: flex;
  align-items: center;
}
article.article .summary h5 {
  margin-bottom: 16px;
}
article.article .summary p {
  margin-bottom: 16px;
}
article.article .summary p:last-child {
  margin-bottom: 0;
}
article.article .summary img {
  max-width: 124px;
  margin-left: 40px;
  display: none;
}
article.article .faq {
  padding: 16px;
  background: #f8f7ff;
  border-radius: 16px;
  margin-bottom: 24px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
@media screen and (min-width: 768px) {
  article.article .faq {
    padding: 24px;
  }
}
article.article .faq p {
  margin: 0;
  align-items: flex-start;
}
article.article .faq span:first-child {
  font-weight: 700;
  font-size: 18px;
  margin-right: 8px;
  color: #000;
  position: relative;
}
article.article .faq .Q {
  color: #000;
  margin-bottom: 16px;
  display: flex;
  margin-top: 0;
  font-size: 16px;
  font-weight: 700;
}
article.article .faq .Q::before {
  content: none;
}
article.article .faq .A {
  color: rgba(0, 0, 0, 0.5);
  display: flex;
}
article.article .product-recommend {
  display: flex;
  padding: 48px 24px 64px;
  background: #f8f7ff;
  border-radius: 16px;
}
article.article .product-recommend .rgt {
  margin-left: 24px;
}
article.article .product-recommend .tit {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  text-align: left;
}
article.article .product-recommend .tit a {
  color: rgba(0, 0, 0, 0.7);
  transition: all 0.4s;
}
article.article .product-recommend .tit a:hover {
  color: #5b44ff;
}
article.article .product-recommend .btn-groups {
  margin-top: 16px;
}
article.article .product-recommend .des {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.3019607843);
  margin: 0;
}
article.article .product-recommend ul {
  padding-left: 0;
  margin-top: 4px;
}
article.article .product-recommend ul li {
  list-style: none;
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  margin-top: 12px;
}
article.article .product-recommend ul li::before {
  content: "";
  width: 16px;
  height: 16px;
  background: url("https://images.hitpaw.com/hitpaw-2024/article/product-recommend-icon-1.svg") no-repeat center center;
  position: absolute;
  top: 3px;
  left: 0;
}
article.article .product-recommend .btn.btn-md {
  padding: 0 2rem;
}
article.article .compare-pros-cons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
article.article .compare-pros-cons .cell {
  width: calc(50% - 12px);
  padding: 24px 16px 20px;
  border-radius: 12px;
}
article.article .compare-pros-cons .cell .tit {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 800;
  line-height: 32px;
  letter-spacing: -0.015em;
  color: var(--bs-primary);
}
article.article .compare-pros-cons .cell .tit img {
  margin-right: 12px;
}
article.article .compare-pros-cons .cell:nth-child(1) {
  background: linear-gradient(90.98deg, rgba(var(--bs-primary-rgb), 0.05) 23.23%, rgba(var(--bs-primary-rgb), 0.15) 98.3%);
}
article.article .compare-pros-cons .cell:nth-child(2) {
  background: linear-gradient(90.98deg, rgba(var(--bs-primary-rgb), 0.05) 23.23%, rgba(var(--bs-primary-rgb), 0.15) 98.3%);
}
article.article .compare-pros-cons .cell ul {
  margin-top: 8px;
  padding-left: 0;
}
article.article .compare-pros-cons .cell li {
  list-style: none;
  position: relative;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  padding-left: 32px;
}
article.article .compare-pros-cons .cell li::before {
  content: "";
  width: 12px;
  height: 12px;
  /* background: url('https://images.hitpaw.com/hitpaw-2024/article/tips-light-icon-1.svg') no-repeat center center; */
  background: linear-gradient(180deg, #e5e2ff 0%, #6b57ff 100%);
  border-radius: 50%;
  position: absolute;
  left: 6px;
  top: 5px;
}
article.article .compare-pros-cons .cell li.add::before {
  width: 28px;
  height: 28px;
  background: url(https://images.hitpaw.com/hitpaw-2024/article/compare-pros-cons-add.png) no-repeat center center;
  background-size: 100% 100%;
  border-radius: 50%;
  position: absolute;
  left: -3px;
  top: -2px;
}
article.article .compare-pros-cons .cell li.cut::before {
  width: 28px;
  height: 28px;
  background: url(https://images.hitpaw.com/hitpaw-2024/article/compare-pros-cons-cut.png) no-repeat center center;
  background-size: 100% 100%;
  border-radius: 50%;
  position: absolute;
  left: -3px;
  top: -2px;
}
article.article .compare-pros-cons .cell :not(:nth-child(1)) {
  margin-top: 16px;
}
article.article .compare-table {
  border: 1px solid rgba(4, 28, 8, 0.1019607843);
  border-radius: 12px;
  margin: 20px 0;
  overflow: hidden;
  background: rgba(var(--bs-primary-rgb), 0.15);
}
article.article .compare-table {
  border: 1px solid rgba(4, 28, 8, 0.1019607843);
  border-radius: 12px;
  margin: 20px 0;
  overflow: hidden;
  background: #e0dcff;
}
article.article .compare-table .compare-table-row {
  display: flex;
}
article.article .compare-table > .compare-table-row:nth-child(1) {
  width: calc(100% - 6px);
}
article.article .compare-table-row p {
  flex-basis: 33.33%;
  border-top: 1px solid rgba(4, 28, 8, 0.1019607843);
  border-right: 1px solid rgba(4, 28, 8, 0.1019607843);
  margin: 0;
  text-align: center;
  padding: 18px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-align: center;
}
article.article .compare-table-row p:last-child {
  border-right: 0;
}
article.article .compare-table-wrap {
  max-height: 200px;
  overflow: auto;
  background: #fff;
}
article.article .compare-table-wrap::-webkit-scrollbar {
  width: 6px;
  /* 滚动条宽度 */
}
article.article .compare-table-wrap::-webkit-scrollbar-track {
  background: #fff;
  /* 轨道背景色 */
  width: 0;
}
article.article .compare-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1490196078);
  border-radius: 5px;
  /* 滑块圆角 */
}
article.article .compare-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #555;
  /* 悬停时滑块颜色 */
}
article.article .compare-table-wrap::-webkit-scrollbar-button {
  display: none;
  /* 隐藏滚动条按钮 */
}
@media screen and (max-width: 992px) {
  article.article .compare-table-row p {
    font-size: 18px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.015em;
    text-align: center;
  }
}
article.article .vote-cont {
  padding: 24px;
  background: #f8f7ff;
  border-radius: 16px;
}
article.article .multiple .list-vote {
  height: 256px;
  padding-right: 7px;
  overflow-y: scroll;
}
article.article .multiple .list-vote::-webkit-scrollbar {
  width: 2px;
}
article.article .multiple .list-vote::-webkit-scrollbar-thumb {
  background: #9d8eff;
  border-radius: 2px;
}
article.article .multiple .list-vote::-webkit-scrollbar-track {
  background: #ece9ff;
}
article.article .quarter .list-vote {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
article.article .quarter .list-vote .form-check {
  width: 49.5%;
}
article.article .yes-no .list-vote {
  display: flex;
  align-items: center;
}
article.article .vote-title {
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  color: #000;
}
article.article .list-vote {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
article.article .list-vote .form-check {
  position: relative;
  z-index: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  min-height: unset;
  height: 58px;
  padding: 0 16px;
  margin-top: 0;
  margin-bottom: 8px;
  background: #ece9ff;
  border-radius: 8px;
  border: 2px solid transparent;
  overflow: hidden;
}
article.article .list-vote .form-check:hover {
  border: 2px solid #6b57ff;
}
article.article .list-vote .form-check:hover .form-check-label {
  color: #6b57ff;
}
article.article .list-vote .form-check:last-child {
  margin-bottom: 0px !important;
}
article.article .list-vote .form-check .form-check-input {
  cursor: pointer;
  margin-top: 0;
  margin-left: unset;
}
article.article .list-vote .form-check .form-check-input[type=radio] {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background-image: url('data:image/svg+xml,<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="13" r="11.25" stroke="%236B57FF" stroke-width="1.5"/></svg>');
  background-color: #ece9ff;
  border: none;
}
article.article .list-vote .form-check .form-check-input:checked[type=radio] {
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml,<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="13" r="11.25" stroke="%236B57FF" stroke-width="1.5"/><circle cx="12" cy="13" r="7" fill="%236B57FF"/></svg>');
}
article.article .list-vote .form-check .form-check-input:disabled {
  opacity: 1;
}
article.article .list-vote .form-check .form-check-label {
  cursor: pointer;
  font-size: 18px;
  line-height: 27px;
  color: rgba(0, 0, 0, 0.5);
}
article.article .list-vote .form-check .form-check-label:hover {
  color: #6b57ff;
}
article.article .list-vote .form-check.active,
article.article .list-vote .form-select.active {
  border: 2px solid #6b57ff;
}
article.article .list-vote .form-check.active::after {
  position: absolute;
  top: 50%;
  right: 55px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml,<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.5 6L8.4375 19L2.5 13.0909" stroke="%236B57FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: 100% 100%;
  content: "";
}
article.article .list-vote .form-select {
  position: relative;
  z-index: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 153px;
  padding: 0;
  background: #ece9ff;
  border-radius: 8px;
  border: 2px solid transparent;
  overflow: hidden;
}
article.article .list-vote .form-select svg {
  width: 40px;
}
article.article .list-vote .form-select p {
  margin-bottom: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #767580;
}
article.article .list-vote .form-select:hover {
  border: 2px solid #6b57ff;
}
article.article .list-vote .form-select:hover p {
  color: #6b57ff;
}
article.article .list-vote .form-select.active::after {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 37px;
  height: 37px;
  background-image: url('data:image/svg+xml,<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M37 37V8C37 3.58172 33.4183 0 29 0H0C0 20.4345 16.5655 37 37 37Z" fill="%236B57FF"/><path d="M29.3077 10L19.2596 20L14.6923 15.4545" stroke="white" stroke-width="1.53846" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: 100% 100%;
  content: "";
}
article.article .list-vote .item-or {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 48px;
  width: 100%;
  height: 48px;
  margin: 0 10px;
  background: #dad4ff;
  border-radius: 50%;
  font-size: 18px;
  line-height: 18px;
  color: #6b57ff;
  text-align: center;
}
article.article .list-vote .form-check .progress-bar {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 0;
  height: 58px;
  background-color: #d2ccff;
  transition: width 0.5s;
}
article.article .list-vote .form-select .progress-bar {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: calc(100% + 4px);
  height: 0;
  background-color: #d2ccff;
  border-radius: 0 0 8px 8px;
  border-top: 2px solid #a599ff;
  transition: height 0.5s;
}
article.article .list-vote .percent-label {
  position: absolute;
  font-size: 14px;
  line-height: 21px;
  color: #6b57ff;
}
article.article .list-vote .form-check .percent-label {
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}
article.article .list-vote .form-select .percent-label {
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
}
article.article .list-frame-cont {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  background: rgba(var(--bs-primary-rgb), 0.05);
  margin-bottom: 24px;
  padding: 20px;
}
article.article .list-frame-cont ul {
  margin: 24px 0 16px 0;
}
article.article .list-frame-cont .list-yes-no {
  list-style: none;
  padding: 0;
}
article.article .list-frame-cont .list-yes-no li.yes::before {
  content: url('data:image/svg+xml,<svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.4235 0.31803C13.0763 0.828046 13.1921 1.77071 12.682 2.42353L6.43204 10.4235C6.16875 10.7605 5.77414 10.9691 5.34739 10.9969C4.92064 11.0247 4.50233 10.869 4.19759 10.5689L0.447594 6.87661C-0.142716 6.29538 -0.150078 5.34566 0.43115 4.75535C1.01238 4.16504 1.9621 4.15768 2.55241 4.73891L5.10366 7.25091L10.318 0.576601C10.828 -0.0762201 11.7706 -0.191986 12.4235 0.31803Z" fill="%236b57ff" fill-opacity="1"/></svg>');
  margin-right: 10px;
}
article.article .list-frame-cont .list-yes-no li.no::before {
  content: url('data:image/svg+xml, <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.8" > <path fill-rule="evenodd" clip-rule="evenodd" d="M5.20699 6.10355L0.810547 10.5L1.51765 11.2071L5.9141 6.81066L10.3105 11.2071L11.0177 10.5L6.62121 6.10355L11.0177 1.70711L10.3105 1L5.9141 5.39645L1.51765 1L0.810547 1.70711L5.20699 6.10355Z" fill="%23000000" ></path> <path d="M0.810547 10.5L0.456993 10.1464L0.10344 10.5L0.456993 10.8536L0.810547 10.5ZM5.20699 6.10355L5.56055 6.45711L5.9141 6.10355L5.56055 5.75L5.20699 6.10355ZM1.51765 11.2071L1.1641 11.5607L1.51765 11.9142L1.87121 11.5607L1.51765 11.2071ZM5.9141 6.81066L6.26765 6.45711L5.9141 6.10355L5.56055 6.45711L5.9141 6.81066ZM10.3105 11.2071L9.95699 11.5607L10.3105 11.9142L10.6641 11.5607L10.3105 11.2071ZM11.0177 10.5L11.3712 10.8536L11.7248 10.5L11.3712 10.1464L11.0177 10.5ZM6.62121 6.10355L6.26765 5.75L5.9141 6.10355L6.26765 6.45711L6.62121 6.10355ZM11.0177 1.70711L11.3712 2.06066L11.7248 1.70711L11.3712 1.35355L11.0177 1.70711ZM10.3105 1L10.6641 0.646447L10.3105 0.292893L9.95699 0.646447L10.3105 1ZM5.9141 5.39645L5.56055 5.75L5.9141 6.10355L6.26765 5.75L5.9141 5.39645ZM1.51765 1L1.87121 0.646447L1.51765 0.292893L1.1641 0.646446L1.51765 1ZM0.810547 1.70711L0.456994 1.35355L0.10344 1.70711L0.456993 2.06066L0.810547 1.70711ZM1.1641 10.8536L5.56055 6.45711L4.85344 5.75L0.456993 10.1464L1.1641 10.8536ZM1.87121 10.8536L1.1641 10.1464L0.456993 10.8536L1.1641 11.5607L1.87121 10.8536ZM5.56055 6.45711L1.1641 10.8536L1.87121 11.5607L6.26765 7.16421L5.56055 6.45711ZM10.6641 10.8536L6.26765 6.45711L5.56055 7.16421L9.95699 11.5607L10.6641 10.8536ZM10.6641 10.1464L9.95699 10.8536L10.6641 11.5607L11.3712 10.8536L10.6641 10.1464ZM6.26765 6.45711L10.6641 10.8536L11.3712 10.1464L6.97476 5.75L6.26765 6.45711ZM10.6641 1.35355L6.26765 5.75L6.97476 6.45711L11.3712 2.06066L10.6641 1.35355ZM9.95699 1.35355L10.6641 2.06066L11.3712 1.35355L10.6641 0.646447L9.95699 1.35355ZM6.26765 5.75L10.6641 1.35355L9.95699 0.646447L5.56055 5.04289L6.26765 5.75ZM1.1641 1.35355L5.56055 5.75L6.26765 5.04289L1.87121 0.646447L1.1641 1.35355ZM1.1641 2.06066L1.87121 1.35355L1.1641 0.646446L0.456994 1.35355L1.1641 2.06066ZM5.56055 5.75L1.1641 1.35355L0.456993 2.06066L4.85344 6.45711L5.56055 5.75Z" fill="%23000000" ></path> </g> </svg>');
  margin-right: 10px;
}
@media (min-width: 768px) {
  article.article .list-frame-cont {
    padding: 40px;
  }
}/*# sourceMappingURL=article.css.map */