* {
  margin: 0;
  padding: 0;
}
button {
  border: none;
  outline: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
body {
  background: #F4F4F4;
  padding-top: 1.7rem;
}
.bread_nav {
  background: transparent;
  height: auto;
  padding-top: 0.42rem;
}
.product_view_page {
  padding: 0.58rem 0 0.7rem;
}
.view_layout {
  display: flex;
  align-items: flex-start;
  column-gap: 0.28rem;
}
.view_main {
  width: calc(100% - 3.92rem);
  min-width: 0;
}
.view_side {
  width: 4.7rem;
  flex: 0 0 4.7rem;
  position: sticky;
  top: 2rem;
}
.product_detail_box,
.view_section,
.stock_box,
.featured_box {
  background: #FFFFFF;
  border-radius: 0.05rem;
  border: 0.01rem solid #D0D0D0;
  overflow: hidden;
}
.product_detail_box h1 {
  padding: 0.14rem 0.25rem;
  background: #E6ECF4;
  justify-content: space-between;
  display: flex;
  align-items: center;
  font-family: Poppins-SemiBold;
  font-weight: 600;
  font-size: 0.2rem;
  color: #000000;
  line-height: 1.6;
  border-bottom: 0.01rem solid #D0D0D0;
}
.product_detail_cont {
  display: flex;
}
.product_gallery {
  width: 41%;
  padding: 0.21rem 0.24rem 0.2rem 0.2rem;
}
.gallery_max {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 0.05rem;
  border: 0.01rem solid #D0D0D0;
}
.gallery_max .gallery_big {
  width: 100%;
  height: 100%;
  position: absolute;
}
.gallery_thumb {
  margin-top: 0.2rem;
  overflow: hidden;
  padding-bottom: 0.02rem;
}
.gallery_thumb .swiper-slide {
  width: 0.74rem;
  height: 0.74rem;
  border-radius: 0.05rem;
  overflow: hidden;
  cursor: pointer;
  border: 0.01rem solid #D0D0D0;
}
.gallery_thumb .swiper-slide.swiper-slide-thumb-active {
  border: 0.01rem solid #000000;
}
.product_info {
  width: 59%;
  border-left: 0.01rem solid #D0D0D0;
}
.product_info dl {
  min-height: 0.95rem;
  padding: 0.16rem 0.37rem;
  border-bottom: 0.01rem solid #D0D0D0;
}
.product_info dl:last-child {
  border-bottom: none;
}
.product_info dt {
  font-family: Poppins-SemiBold;
  font-weight: 600;
  font-size: 0.2rem;
  color: #000000;
  line-height: 1.6;
}
.product_info dd {
  font-size: 0.18rem;
  color: #707070;
  line-height: 1.611;
}
.product_info dd p {
  font-size: 0.16rem;
  color: #1E1E1E;
  line-height: 1.5625;
}
.pdf_link {
  display: inline-flex;
  align-items: center;
  column-gap: 0.04rem;
  font-family: Poppins-Regular;
  font-weight: 400;
  font-size: 0.18rem;
  color: #707070;
}
.pdf_link::before {
  content: "";
  width: 0.17rem;
  height: 0.17rem;
  background: url(../img/pdf1.png) no-repeat center center;
  background-size: contain;
  flex: 0 0 0.17rem;
}
.view_section {
  margin-top: 0.2rem;
  overflow: hidden;
}
.view_section .section_hd {
  padding: 0.14rem 0.25rem;
  background: #E6ECF4;
  justify-content: space-between;
  display: flex;
  align-items: center;
  font-family: Poppins-SemiBold;
  font-weight: 600;
  font-size: 0.2rem;
  color: #000000;
  line-height: 1.6;
  border-bottom: 0.01rem solid #D0D0D0;
}
.view_section .section_hd h2 {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}
.view_section .section_hd button {
  width: 0.14rem;
  height: 0.09rem;
  position: relative;
  background: url(../img/arrow_down1.png) no-repeat center center;
  background-size: contain;
  transition: all 0.3s ease-in-out;
}
.view_section .section_bd {
  padding: 0.2rem 0.25rem;
  font-size: 0.18rem;
  color: #939393;
  line-height: 1.66;
}
.view_section.hide .section_hd {
  border-bottom: none;
}
.view_section.hide .section_hd button {
  transform: rotate(-180deg);
}
.param_table {
  width: 100%;
  border-collapse: collapse;
  border: 0.01rem solid #BEBEBE;
}
.param_table th,
.param_table td {
  padding: 0.11rem 0.3rem;
  border-bottom: 0.01rem solid #BEBEBE;
  text-align: left;
  font-size: 0.18rem;
  line-height: 1.6;
}
.param_table th {
  width: 4.12rem;
  font-family: Poppins-SemiBold;
  font-weight: 600;
  color: #000000;
}
.param_table tr:nth-child(even) {
  background: #E6ECF4;
}
.feature_item {
  padding: 0.2rem 0;
  border-bottom: 0.01rem solid #D0D0D0;
}
.feature_item:first-child {
  padding-top: 0;
}
.feature_item h3 {
  position: relative;
  padding-left: 0.1rem;
  font-family: Poppins-SemiBold;
  font-weight: 600;
  font-size: 0.16rem;
  color: #000000;
  line-height: 1.625;
}
.feature_item h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 0.05rem;
  height: 0.05rem;
  background: #0069DB;
  border-radius: 50%;
}
.feature_item p {
  margin-top: 0.04rem;
  font-family: Poppins-Light;
  font-weight: 300;
  font-size: 0.18rem;
  color: #707070;
  line-height: 1.625;
}
.app_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.2rem 0.18rem;
}
.app_item {
  display: block;
  background: #F8F9FA;
  padding-bottom: 0.1rem;
}
.app_item .app_pic {
  height: 0;
  padding-bottom: 56%;
  position: relative;
  overflow: hidden;
  margin-bottom: 0.14rem;
}
.app_item .app_pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}
.app_item h3 {
  font-family: Poppins-SemiBold;
  font-weight: 600;
  font-size: 0.16rem;
  color: #000000;
  line-height: 1.625;
  width: calc(100% - 0.24rem);
  margin: 0 auto;
}
.app_item p {
  width: calc(100% - 0.24rem);
  margin: 0.04rem auto 0;
  font-family: Poppins-Light;
  font-weight: 300;
  font-size: 0.14rem;
  color: #5D5D5D;
  line-height: 1.428;
}
.faq_item {
  margin-bottom: 0.2rem;
}
.faq_item:last-child {
  margin-bottom: 0;
}
.faq_item h3 {
  position: relative;
  padding-left: 0.14rem;
  font-family: Poppins-SemiBold;
  font-weight: 600;
  font-size: 0.16rem;
  color: #000000;
  line-height: 1.625;
}
.faq_item h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.07rem;
  width: 0.11rem;
  height: 0.12rem;
  background: url(../img/faq_q1.png) no-repeat center center;
  background-size: contain;
}
.faq_item p {
  margin-top: 0.04rem;
  padding: 0.1rem 0.14rem 0.13rem;
  background: #F8F9FA;
  font-family: Poppins-Light;
  font-weight: 300;
  font-size: 0.14rem;
  color: #707070;
  line-height: 1.428;
}
.doc_filter {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.23rem;
}
.doc_filter span {
  font-family: Poppins-SemiBold;
  font-weight: 600;
  font-size: 0.16rem;
  color: #000000;
  line-height: 1.625;
}
.doc_filter .filter_select {
  width: 72%;
  height: 0.4rem;
  padding: 0 0.2rem 0 0.17rem;
  border: 0.01rem solid #DBDBDB;
  justify-content: space-between;
  display: flex;
  align-items: center;
  position: relative;
}
.doc_filter .filter_select input {
  width: calc(100% - 0.2rem);
  font-family: Poppins-Light;
  font-weight: 300;
  font-size: 0.14rem;
  color: #707070;
}
.doc_filter .filter_select i {
  width: 0.1rem;
  height: 0.06rem;
  position: relative;
  background: url(../img/xiala1.png) no-repeat center center;
  background-size: contain;
}
.doc_filter .filter_options {
  display: none;
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.01rem);
  left: -0.01rem;
  right: -0.01rem;
  max-height: 2.4rem;
  overflow-y: auto;
  border: 0.01rem solid #DBDBDB;
  background: #FFFFFF;
}
.doc_filter .filter_select.open .filter_options {
  display: block;
}
.doc_filter .filter_options button {
  display: block;
  width: 100%;
  padding: 0.1rem 0.17rem;
  font-family: Poppins-Regular;
  font-size: 0.14rem;
  color: #333333;
  text-align: left;
}
.doc_filter .filter_options button:hover,
.doc_filter .filter_options button.active {
  color: #FFFFFF;
  background: #0068D9;
}
.doc_group {
  padding: 0.2rem 0;
  border-top: 0.01rem solid #DDDDDD;
}
.doc_group:first-of-type {
  border-top: none;
  padding-top: 0;
}
.doc_group h3 {
  margin-bottom: 0.04rem;
  font-family: Poppins-SemiBold;
  font-weight: 600;
  font-size: 0.16rem;
  color: #000000;
  line-height: 1.625;
}
.doc_group .pdf_link {
  display: flex;
  margin-top: 0.04rem;
  font-family: Poppins-Light;
  font-weight: 300;
  font-size: 0.14rem;
  color: #5D5D5D;
  line-height: 1.714;
}
.related_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.2rem 0.5rem;
  padding: 0.08rem 0;
}
.side_product {
  display: flex;
  column-gap: 0.2rem;
  padding-bottom: 0.15rem;
  border-bottom: 0.01rem solid #D0D0D0;
}
.side_product .side_pic {
  width: 0.94rem;
  height: 0.94rem;
  flex: 0 0 0.94rem;
  border-radius: 0.05rem;
  border: 0.01rem solid #D0D0D0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.side_product .side_pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all 0.3s ease-in-out;
}
.side_product h3 {
  font-family: Poppins-SemiBold;
  font-weight: 600;
  font-size: 0.16rem;
  color: #000000;
  line-height: 1.625;
}
.side_product p {
  margin-top: 0.02rem;
  margin-bottom: 0.07rem;
  font-family: Poppins-Light;
  font-weight: 300;
  font-size: 0.12rem;
  color: #1E1E1E;
  line-height: 1.5;
}
.side_product .text_more {
  font-size: 0.12rem;
}
.side_product:hover .side_pic img {
  transform: scale(1.1);
}
.side_product:hover h3 {
  color: #0069DB;
}
.side_product:hover .text_more {
  color: #0069DB;
}
.side_product:hover .text_more::after {
  left: calc(100% + 0.1rem);
  background: url(../img/nav_icon.png) no-repeat center center;
  background-size: contain;
}
.side_product:hover .text_more::before {
  width: 100%;
}
.message_form .form_row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.2rem 0.32rem;
}
.message_form label {
  display: block;
  margin-bottom: 0.2rem;
}
.message_form label span {
  display: block;
  margin-bottom: 0.07rem;
  font-size: 0.16rem;
  color: #000000;
}
.message_form input,
.message_form textarea {
  width: 100%;
  height: auto;
  padding: 0.1rem;
  background: #FFFFFF;
  border-radius: 0.05rem;
  border: 0.01rem solid #D0D0D0;
  font-family: Poppins-Light;
  font-weight: 300;
  font-size: 0.14rem;
  color: #000;
}
.message_form input::placeholder,
.message_form textarea::placeholder {
  color: #AAAAAA;
}
.message_form textarea {
  height: 0.82rem;
  resize: none;
}
.message_form .submit_btn {
  display: block;
  margin: 0 auto 0.12rem;
  padding: 0.05rem 0.2rem;
  border-radius: 0.08rem;
  background: #0069DB;
  font-size: 0.18rem;
  color: #FFFFFF;
  text-transform: lowercase;
}
.stock_box h2,
.featured_box h2 {
  padding: 0.14rem 0.25rem;
  background: #E6ECF4;
  justify-content: space-between;
  display: flex;
  align-items: center;
  font-family: Poppins-SemiBold;
  font-weight: 600;
  font-size: 0.2rem;
  color: #000000;
  line-height: 1.6;
  border-bottom: 0.01rem solid #D0D0D0;
}
.stock_box h2 {
  padding: 0.12rem 0.2rem;
  font-size: 0.16rem;
}
.stock_box .stock_item {
  padding: 0.12rem 0.2rem;
  border-top: 0.01rem solid #D0D0D0;
}
.stock_box .stock_item:first-of-type {
  border-top: none;
}
.stock_box .stock_item h3,
.stock_box .stock_item p {
  font-family: Poppins-SemiBold;
  font-weight: 600;
  font-size: 0.14rem;
  color: #000000;
  line-height: 1.64;
}
.stock_box .stock_item p {
  font-family: Poppins-Light;
  font-weight: 300;
}
.featured_box {
  margin-top: 0.16rem;
}
.featured_box h2 {
  background: #165DAA;
  color: #FFFFFF;
}
.featured_box .side_product {
  padding: 0.1rem;
}
.view_section,
.product_detail_box,
.stock_box,
.featured_box {
  box-shadow: 0 0.01rem 0 rgba(0, 0, 0, 0.02);
}





@media (max-width: 1042px) {
  body{
    padding-top: 120px;
    font-size: 16px;
  }


  .view_layout {
    display: block;
  }
  .view_main,
  .view_side {
    width: 100%;
    flex: none;
  }
  .view_side {
    margin-top: 0.14rem;
  }
  .related_grid {
    grid-template-columns: 1fr;
  }
  .app_grid {
    grid-template-columns: repeat(3, 1fr);
}
}
/* mobile append */
@media screen and (max-width: 768px) {
  body {
    padding-top: 100px;
    font-size: 14px;
  }
  .product_view_page {
    padding: 24px 0 50px;
  }
  .view_layout,
  .product_detail_cont {
    display: block;
  }
  .view_main,
  .view_side,
  .product_gallery,
  .product_detail_cont .product_info {
    width: 100%;
    flex: none;
  }
  .view_side {
    position: static;
    margin-top: 20px;
  }
  .product_detail_cont .product_info {
    border-left: none;
    border-top: 1px solid #D0D0D0;
  }
  .product_detail_box,
  .view_section,
  .stock_box,
  .featured_box {
    border-radius: 8px;
  }
  .product_detail_box h1,
  .view_section .section_hd,
  .stock_box h2,
  .featured_box h2 {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.45;
  }
  .view_section .section_hd button{
    width: 14px;
    height: 9px;
  }
  .product_gallery,
  .product_detail_cont .product_info dl,
  .view_section .section_bd {
    padding: 8px 12px;
  }
  .product_info dl {
    min-height: 0;
  }
  .product_info dt,
  .product_info dd,
  .pdf_link,
  .view_section .section_bd,
  .feature_item p,
  .faq_item p,
  .doc_group .pdf_link,
  .side_product p {
    font-size: 12px;
    line-height: 1.3;
  }
  .feature_item h3,
  .faq_item h3,
  .doc_group h3,
  .side_product h3,
  .app_item h3 {
    font-size: 16px;
    line-height: 1.45;
  }
  .feature_item h3{
    padding: 0;
  }
  .feature_item h3::before{
      width: 5px;
      height: 5px;
      top: 10px;
      left: -12px;
  }
  .product_gallery .gallery_max,
  .product_pic,
  .side_product .side_pic{
    height: auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    flex: 0 0 80px;
  }
  .product_gallery img,
  .product_pic img,
  .side_product .side_pic img,
  .app_item .app_pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .gallery_thumb .swiper-slide {
    height: auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  .app_grid,
  .related_grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .doc_filter {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .doc_filter .filter_select {
    width: 100%;
    min-height: 34px;
  }
  .view_section .section_bd,
  .param_table {
    overflow-x: auto;
  }
  .param_table {
    min-width: 100%;
  }
  .param_table th,
  .param_table td {
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.26;
    width: auto;
  }
  .bread_nav {
    padding-top: 0;
    margin-bottom: 18px;
    font-size: 12px;
    line-height: 1.5;
  }
  .product_detail_box {
    overflow: hidden;
  }
  .product_detail_box h1 {
    font-size: 20px;
    padding: 10px 16px;
  }
  .product_gallery .gallery_max {
    background: #FAFAFA;
    border-radius: 8px;
  }
  .gallery_thumb {
    margin-top: 12px;
    padding-bottom: 4px;
    overflow-x: auto;
  }
  .product_info dl {
    padding-top: 18px;
  }
  .product_info dt {
    width: 100%;
    color: #555555;
    margin-bottom: 5px;
  }
  .app_item p,
  .product_info dd p{
    font-size: 12px;
  }
  .product_info dd {
    width: 100%;
  }
  .doc_group .pdf_link {
    border-radius: 6px;
    margin: 8px 0;
  }
  .pdf_link::before{
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-right: 6px;
  }
  .view_section {
    margin-top: 18px;
    overflow: hidden;
  }
  .view_section .section_bd {
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .feature_grid,
  .faq_list,
  .doc_list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .feature_item,
  .app_item{
    padding: 16px;
  }
   .faq_item{
    margin-bottom: 16px;
  }
  .faq_item h3 {
    font-size: 14px;
    margin-bottom: 6px;
    padding-left: 16px;
  }
  .faq_item h3::before{
    width: 11px;
    height: 12px;
    top: 5px;
  }
    .faq_item p {
      padding: 12px;
  }
  .doc_filter .filter_select input,.doc_filter span {
    font-size: 14px;
  }
  .doc_filter .filter_select {
    border-radius: 6px;
  }
  .param_table {
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .view_side {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .stock_box,
  .featured_box {
    margin-top: 0;
    overflow: hidden;
  }
  .stock_box .stock_item {
    padding: 14px 16px;
  }

  .side_product{
    align-items: center;
  }
  .side_product .text_more{
    font-size: 12px;
  }



  .message_form .form_row{
    grid-template-columns: repeat(1, 1fr);
  }
  .message_form label span{
    font-size: 14px;
  }
  .message_form input, .message_form textarea,
  .stock_box .stock_item h3, .stock_box .stock_item p{
    font-size: 14px;
  }
  .message_form textarea{
    height: 100px;
  }
  .message_form .submit_btn{
    font-size: 14px;
  }
}