.home_products {
  padding: 0.6rem 0px 3.29rem;
  background-color: #fff;
}
.home_products .tcon p {
  max-width: 62.5rem;
  margin-left: auto;
  margin-right: auto;
}
.home_products .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 66.96rem 66.96rem;
  column-gap: 1.63rem;
  row-gap: 1.57rem;
  margin-top: 5.4rem;
  padding: 0px 1.6rem;
}
.home_products .sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 31.8rem 1fr;
  column-gap: 1.66rem;
  row-gap: 1.68rem;
}
.home_products .item {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  text-align: center;
  background-color: #6869a9;
  transition: background-color 0.4s;
}
.home_products .item.wide {
  grid-column: span 2;
}
.home_products .item:hover {
  background-color: #5f60a3;
}
.home_products .txt {
  position: relative;
  z-index: 2;
  padding-top: 6.71rem;
}
.home_products .item.wide .txt {
  padding-top: 5.32rem;
}
.home_products .item.small .txt {
  padding-top: 5.01rem;
}
.home_products .item h3 {
  color: #fff;
  font-weight: 600;
  font-size: 3.4rem;
  line-height: 4.1rem;
}
.home_products .item.wide h3,
.home_products .item.small h3 {
  font-size: 2.8rem;
  line-height: 3.4rem;
}
.home_products .item .btn_text {
  gap: 1rem;
  margin-top: 2.78rem;
  color: #fff;
  font-size: 1.8rem;
  line-height: 2.1rem;
}
.home_products .item:hover .btn_text::after {
  transform: translateX(0.4rem);
}
.home_products .pic {
  position: absolute;
  z-index: 1;
}
.home_products .pic img {
  transition: transform 0.6s;
}
.home_products .item:hover .pic img {
  transform: scale(1.06);
}
.home_products .cob .pic {
  left: calc(50% - 19rem);
  top: 11.61rem;
  width: 37.7rem;
  height: 53.05rem;
}
.home_products .panel .pic {
  left: calc(50% - 24.93rem);
  top: 16.19rem;
  width: 46.7rem;
  height: 46.7rem;
}
.home_products .handheld .pic {
  left: calc(50% - 22.88rem);
  top: 15.5rem;
  width: 44.3rem;
  height: 49rem;
}
.home_products .mini .pic {
  left: calc(50% - 23.5rem);
  top: 8.33rem;
  width: 44.8rem;
  height: 22.15rem;
}
.home_products .ring .pic {
  left: calc(50% - 15.16rem);
  top: 9.49rem;
  width: 30.37rem;
  height: 22.68rem;
}
.home_products .acc .pic {
  left: calc(50% - 17.16rem);
  top: 7.65rem;
  width: 33.7rem;
  height: 25.16rem;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .home_products .grid {
    grid-template-rows: 62rem 62rem;
    margin-top: 4.8rem;
  }
  .home_products .sub {
    grid-template-rows: 29rem 1fr;
  }
  .home_products .item.small .pic {
    left: 8%;
    width: 84%;
  }
  .home_products .ring .pic,
  .home_products .acc .pic {
    top: 10.5rem;
    height: 19rem;
  }
}
@media screen and (max-width: 768px) {
  .home_products {
    padding: 0px 0px 10px;
  }
  .home_products .grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    gap: 10px;
    margin-top: 28px;
    padding: 0px 10px;
  }
  .home_products .sub {
    grid-template-rows: none;
    gap: 10px;
  }
  .home_products .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 16px;
  }
  .home_products .txt,
  .home_products .item.wide .txt,
  .home_products .item.small .txt {
    padding: 28px 12px 0px;
  }
  .home_products .item h3 {
    font-size: 22px;
    line-height: 28px;
  }
  .home_products .item.wide h3,
  .home_products .item.small h3 {
    font-size: 18px;
    line-height: 24px;
  }
  .home_products .item .btn_text {
    margin-top: 10px;
    font-size: 15px;
    line-height: 18px;
  }
  .home_products .pic,
  .home_products .cob .pic,
  .home_products .panel .pic,
  .home_products .handheld .pic,
  .home_products .mini .pic,
  .home_products .ring .pic,
  .home_products .acc .pic {
    position: relative;
    left: auto;
    top: auto;
    width: 76%;
    height: 250px;
    margin-top: 16px;
  }
  .home_products .mini .pic {
    height: 150px;
  }
  .home_products .item.small .pic {
    width: 90%;
    height: 110px;
  }
}
@media screen and (max-width: 576px) {
  .home_products .grid {
    grid-template-columns: 1fr;
  }
}

.home_scenarios {
  overflow: hidden;
  padding: 9.81rem 0px 14.08rem;
  background-color: #fff;
}
.home_scenarios .box {
  display: flex;
  align-items: flex-start;
  margin-top: 6.65rem;
  padding: 0px 1.53rem 0px 8.24rem;
  gap: 20px;
}
.home_scenarios .texts {
  position: relative;
  flex-shrink: 0;
  width: 41.95rem;
  height: 48.13rem;
}
.home_scenarios .texts .item {
  position: absolute;
  left: 0px;
  top: 15.85rem;
  width: 37.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.6rem);
  transition: opacity 0.4s, transform 0.4s, visibility 0.4s;
}
.home_scenarios .texts .item.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.home_scenarios .texts h3 {
  color: #232323;
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 3.9rem;
}
.home_scenarios .texts p {
  margin-top: 2.1rem;
  color: var(--text);
  font-size: 1.6rem;
  line-height: 2.4rem;
}
.home_scenarios .texts .btn {
  min-width: 20.09rem;
  margin-top: 2.39rem;
  padding: 0px 4.1rem;
}
.home_scenarios .imgs {
  flex: 1;
  display: flex;
  gap: 1.182rem;
  height: 48.13rem;
  min-width: 0px;
}
.home_scenarios .imgs li {
  position: relative;
  z-index: 1;
  flex: 167.09 1 0px;
  min-width: 0px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 1.6rem;
  transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.home_scenarios .imgs li.active {
  flex-grow: 687.16;
  cursor: pointer;
}
.home_scenarios .imgs li > a {
  display: block;
  height: 100%;
  color: inherit;
}
.home_scenarios .imgs .pic {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -2;
  width: 100%;
  height: 100%;
}
.home_scenarios .imgs li .pic {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.home_scenarios .imgs li:nth-child(2) .pic {
  transform-origin: 24.7% 53.2%;
  transform: scale(1.329);
}
.home_scenarios .imgs li:nth-child(3) .pic {
  transform-origin: 74.7% 85.8%;
  transform: scale(1.129);
}
.home_scenarios .imgs li:nth-child(4) .pic {
  transform-origin: 54.1% 93.9%;
  transform: scale(1.295);
}
.home_scenarios .imgs li:nth-child(5) .pic {
  transform-origin: 0% 68.2%;
  transform: scale(1.108);
}
.home_scenarios .imgs li:nth-child(5) .pic img {
  object-position: 29.1% 50%;
}
.home_scenarios .imgs li.active .pic {
  transform: none;
}
.home_scenarios .imgs li:hover .pic img {
  transform: scale(1.04);
}
.home_scenarios .imgs li::after {
  content: '';
  position: absolute;
  left: 0px;
  bottom: -0.61rem;
  z-index: -1;
  width: 100%;
  height: 16.27rem;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 8, 25, 0) 0%, rgba(2, 8, 25, 0.19) 39%, rgba(2, 8, 25, 0.75) 85%, #020819 100%);
}
.home_scenarios .imgs h4 {
  position: absolute;
  left: 1.8rem;
  bottom: 2.09rem;
  width: 13.5rem;
  color: #fff;
  font-weight: 600;
  font-size: 2rem;
  line-height: 2.4rem;
}
.home_scenarios .imgs li.active h4 {
  left: 3.07rem;
  bottom: 3.65rem;
  width: auto;
  white-space: nowrap;
  font-size: 2.2rem;
  line-height: 2.6rem;
  animation: home_scenarios_label 0.6s ease;
}
@keyframes home_scenarios_label {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (min-width: 769px) and (max-width: 1440px) {
  .home_scenarios .box {
    padding: 0px 3rem;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1440px) {
  .home_scenarios .texts {
    width: 32rem;
  }
  .home_scenarios .texts .item {
    width: 100%;
  }
  .home_scenarios .imgs li {
    flex: 1 1 0px;
  }
  .home_scenarios .imgs li.active {
    flex-grow: 1.6;
  }
  .home_scenarios .imgs h4 {
    left: 1.2rem;
    right: 1.2rem;
    width: auto;
    white-space: normal;
  }
  .home_scenarios .imgs li.active h4 {
    left: 1.6rem;
    right: 1.6rem;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .home_scenarios .box {
    flex-direction: column-reverse;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  /* texts stacked in one grid cell: the block is as high as the tallest item, no fixed height */
  .home_scenarios .texts {
    display: grid;
    width: 100%;
    height: auto;
    margin-top: 4rem;
  }
  .home_scenarios .texts .item {
    position: static;
    grid-area: 1 / 1;
    top: auto;
    width: 100%;
  }
  .home_scenarios .texts p {
    font-size: 2rem;
    line-height: 1.5;
  }
  .home_scenarios .imgs {
    flex: none;
    width: 100%;
    height: 56rem;
  }
  .home_scenarios .imgs li {
    flex: 1 1 0px;
  }
  .home_scenarios .imgs li.active {
    flex-grow: 2;
  }
  .home_scenarios .imgs h4 {
    left: 1.4rem;
    width: 12rem;
  }
}
@media screen and (max-width: 768px) {
  .home_scenarios {
    padding: 56px 0px 60px;
  }
  .home_scenarios .box {
    flex-direction: column-reverse;
    margin-top: 28px;
    padding: 0px 20px;
  }
  .home_scenarios .texts {
    display: grid;
    width: 100%;
    height: auto;
    margin-top: 24px;
  }
  .home_scenarios .texts .item {
    position: static;
    grid-area: 1 / 1;
    top: auto;
    width: 100%;
  }
  .home_scenarios .texts h3 {
    font-size: 22px;
    line-height: 28px;
  }
  .home_scenarios .texts p {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.6;
  }
  .home_scenarios .texts .btn {
    min-width: 160px;
    margin-top: 18px;
    padding: 0px 24px;
  }
  .home_scenarios .imgs {
    flex: none;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    height: 560px;
  }
  .home_scenarios .imgs li {
    flex: 56 1 0px;
    border-radius: 12px;
  }
  .home_scenarios .imgs li.active {
    flex-grow: 280;
  }
  .home_scenarios .imgs li:nth-child(n) .pic {
    transform: none;
  }
  .home_scenarios .imgs li::after {
    bottom: 0px;
    height: 100%;
    background: linear-gradient(180deg, rgba(2, 8, 25, 0.1) 0%, rgba(2, 8, 25, 0.75) 100%);
  }
  .home_scenarios .imgs h4 {
    left: 16px;
    bottom: 50%;
    width: auto;
    white-space: nowrap;
    font-size: 16px;
    line-height: 20px;
    transform: translateY(50%);
  }
  .home_scenarios .imgs li.active h4 {
    left: 16px;
    bottom: 16px;
    font-size: 18px;
    line-height: 22px;
    transform: none;
  }
}

.home_news {
  padding: 10.42rem 0px 14.09rem;
  background-color: #fff;
}
.home_news .grid {
  display: grid;
  grid-template-columns: 76.478fr 59.341fr;
  grid-template-rows: 30.954rem 26.308rem;
  column-gap: 2.068rem;
  row-gap: 2.422rem;
  margin-top: 3.88rem;
}
.home_news .grid li:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}
.home_news .grid li:nth-child(2) {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.home_news .grid li:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
}
.home_news .item {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: 1.6rem;
  background-color: #020819;
}
.home_news .item .pic {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -2;
  width: 100%;
  height: 100%;
}
.home_news .item:hover .pic img {
  transform: scale(1.05);
}
.home_news .item::after {
  content: '';
  position: absolute;
  left: 0px;
  bottom: -0.6rem;
  z-index: -1;
  width: 100%;
  height: 16.27rem;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 8, 25, 0) 0%, rgba(2, 8, 25, 0.19) 39%, rgba(2, 8, 25, 0.75) 85%, #020819 100%);
}
.home_news .arrow {
  position: absolute;
  right: 2.77rem;
  top: 2.92rem;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: background-color 0.35s, border-color 0.35s, transform 0.35s;
}
.home_news .arrow::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.6rem;
  height: 1.6rem;
  margin: -0.8rem 0px 0px -0.8rem;
  background: url(../img/icon-arrow.svg) no-repeat center / contain;
  transition: transform 0.35s;
}
.home_news .item:hover .arrow {
  border-color: var(--primary);
  background-color: var(--primary);
}
.home_news .item h3 {
  position: absolute;
  left: 3.487rem;
  right: 6rem;
  bottom: 2.4rem;
  color: #fff;
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 2.8rem;
}
.home_news .grid li:nth-child(2) h3 {
  left: 4.36rem;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .home_news .grid {
    grid-template-rows: 30rem 28rem;
  }
  .home_news .item h3,
  .home_news .grid li:nth-child(2) h3 {
    left: 2.6rem;
    right: 2.6rem;
    font-size: 2.3rem;
    line-height: 1.35;
  }
  .home_news .item::after {
    height: 60%;
  }
}
@media screen and (max-width: 768px) {
  .home_news {
    padding: 56px 0px 60px;
  }
  .home_news .grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 14px;
    margin-top: 24px;
  }
  .home_news .grid li:nth-child(n) {
    grid-column: 1;
    grid-row: auto;
  }
  .home_news .item {
    height: 240px;
    border-radius: 12px;
  }
  .home_news .item::after {
    bottom: 0px;
    height: 70%;
  }
  .home_news .arrow {
    right: 16px;
    top: 16px;
    width: 40px;
    height: 40px;
  }
  .home_news .arrow::after {
    width: 14px;
    height: 14px;
    margin: -7px 0px 0px -7px;
  }
  .home_news .item h3,
  .home_news .grid li:nth-child(2) h3 {
    left: 18px;
    right: 18px;
    bottom: 18px;
    font-size: 17px;
    line-height: 23px;
  }
}
.home_video .content > a.btn_line {
  gap: 1.24rem;
  min-width: 20.09rem;
  padding: 0 3.5rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: color 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.home_video .content > a.btn_line i {
  width: 0;
  height: 0;
  margin: 0;
  background: none;
  -webkit-mask: none;
  mask: none;
  border-top: 0.625rem solid transparent;
  border-bottom: 0.625rem solid transparent;
  border-left: 0.87rem solid currentColor;
}
.home_banner .swiper,
.home_banner .swiper-wrapper,
.home_banner .swiper-slide {
  width: 100%;
  max-width: none;
}
.home_banner .pagination,
.home_banner .pagination.swiper-pagination-horizontal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3.6rem;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.06rem;
  height: 0.8rem;
}
.home_banner .pagination .dot {
  position: relative;
  flex-shrink: 0;
  width: 3.96rem;
  height: 0.8rem;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
  transition: width 0.4s;
}
.home_banner .pagination .dot::before,
.home_banner .pagination .dot::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2rem;
  height: 0.4rem;
  border-radius: 0.2rem;
}
.home_banner .pagination .dot::before {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.37);
  transition: background-color 0.3s;
}
.home_banner .pagination .dot:hover::before {
  background-color: rgba(255, 255, 255, 0.6);
}
.home_banner .pagination .dot::after {
  width: 0;
  background-color: #fff;
}
.home_banner .pagination .dot.active {
  width: 6.94rem;
}
.home_banner .pagination .dot.active::after {
  animation: home_banner_progress 6s linear forwards;
}
@keyframes home_banner_progress {
  0% { width: 0%; }
  100% { width: 100%; }
}
@media screen and (max-width: 768px) {
  .home_video .content > a.btn_line {
    gap: 10px;
    min-width: 160px;
    margin-top: 22px;
    padding: 0 24px;
  }
  .home_video .content > a.btn_line i {
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 7px;
  }
  .home_banner .pagination,
  .home_banner .pagination.swiper-pagination-horizontal {
    bottom: 36px;
    gap: 8px;
    height: 8px;
  }
  .home_banner .pagination .dot {
    width: 28px;
    height: 8px;
  }
  .home_banner .pagination .dot::before,
  .home_banner .pagination .dot::after {
    top: 2px;
    height: 3px;
    border-radius: 2px;
  }
  .home_banner .pagination .dot.active {
    width: 52px;
  }
}