/* 尽量通用这个隐藏，用于不需要在手机端h5端显示的 */
body .hide-mobile {
  display: none !important;
}

/* 一些header位置控制 */
.browser-tip.hide-mobile+.header {
  top: 0;
}

.browser-tip.hide-mobile+.header+* {
  margin-top: 60px;
}
.browser-tip:not(.hide-pc)+.header+* {
  margin-top: 102px;
}
/* 对冲pc端商城的顶部banner的间距 */
.header+* {
  margin-top: 160px;
}
.p-item__thumb {
  min-height:168px;
  
}

.container.footer__des {
  display: block;
  min-height: auto;
  padding: 30px 0;
}

.h1 {
  font-size: 21px;
}

.h2 {
  font-size: 15px;
}

.h1>.h2,
.h1+.h2 {
  margin-top: 3.5px;
}

.input {
  border-width: .5px;
}



.player__content .abtns {
  border-width: .5px;
}


.player__content .h1 {
  font-size: 30px;
}

.button-link {
  font-size: 14px;
  border: solid #D9D9D9;
  border-width: .5px;
}

/* .player__control {
  display: none;
} */
.player__control li::before {
  width: 20px;
}

.button-code {
  font-size: 14px;
}

.header:not(.header-fixed) {
  box-shadow: 0px .5px 0px 0px #dcdcdc;
}

.footer__item {
  padding: 0 15px;
  width: 100%;
  max-width: 100%;
  border-bottom: .5px solid #BFBFBF;
  height: 44px;
  overflow: hidden;
}

.footer__item>div {
  padding-bottom: 15px;
  transform: translateY(0);
  transition: transform .25s ease-out;
}

.footer__item h1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 44px;
  user-select: none;
  position: relative;
  background: #e8e8e8;
  z-index: 1;
}

.footer__item h1::after {
  content: '\e67e';
  font-family: iconfont;
  font-size: 15px;
  transition: transform .25s ease-out;
}

.footer__item.active {
  height: auto;
}

.footer__item.active h1::after {
  transform: rotate(45deg);
}

.footer__item:not(.active) h1+div {
  transform: translateY(-30%);
}

.footer__copy {
  line-height: 40px;
  font-size: 12px;
}


.p-item {
  width: 48.55072463768116%;
  margin-bottom: 2.8985507246376812%;
}

.p-item__content {
  padding: 5px 10px;
  border-width: .5px !important;
}

.p-item__title {
  font-size: 13px;
  line-height: 17px;
  height: 34px;
}

.p-item__price ins {
  font-size: 16px;
  margin-right: 5px;
}

.p-item__tag {
  width: 60px;
  height: 24px;
  font-size: 12px;
}

.p-item__price del {
  font-size: 12px;
  transform: translateY(1px);
}

.p-item__fav {
  font-size: 12px;
}


.filter-page {
  position: fixed;
  z-index: 10;
  background: #fff;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(100%);
  display: flex;
  flex-direction: column;
  transition: all .25s ease-out;
}

.filter-page.active {
  transform: translateX(0);
}

.filter-page__close {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 16px;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 32px;
}

.filter-page__title {
  font-size: 20px;
  font-weight: 500;
  margin: 20px;
  line-height: 1;
}

.filter-page__footer {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: .5px solid #E5e5e5;
  padding: 12px 15px;
}

.filter-page__footer button {
  border: none;
  border-radius: 0;
  outline: none;
  width: 150px;
  height: 40px;
}

.filter-page__footer button:first-child {
  border: solid .5px #262626;
  color: #262626;
  background: #fff;
}

.filter-page__footer button+button {
  margin-left: 10px;
  background: #262626;
  color: #fff;
}

.filter-page__items {
  overflow-y: auto;
  padding: 0 15px;
  line-height: 32px;
  overscroll-behavior: contain;
}

.filter-page__item {
  padding: 15px 0;
}

.filter-page__item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  padding: 0 5px;
}

.filter-page__item a:hover {
  color: #262626;
}

.filter-page__item a::after {
  content: '\e68f';
  font-family: iconfont;
  font-weight: 400;
  font-size: 12px;
}

.filter-page__item div {
  padding-top: 10px;
  display: none;
}

.filter-page__item div:only-child {
  padding-top: 0;
  margin: -5px 0;
}

.filter-page__item.active a::after {
  content: '';
  width: 14px;
  height: 2px;
  background: #262626;
}

.filter-page__item.active div {
  display: block;
}

.filter-page__item label {
  display: flex;
  align-items: center;
  padding: 0 5px;
}

.filter-page__item label input {
  /* display: none; */
  position: absolute;
  left: 1px;
  opacity: 0;
}

.filter-page__item label .icon {
  margin-right: 10px;
}

.filter-page__item label .icon+.icon {
  display: none;
}

.filter-page__item input:checked+.icon {
  display: none;
}

.filter-page__item input:checked+.icon+.icon {
  display: initial;
}

.filter-page__item+.filter-page__item {
  border-top: solid .5px #E5E5E5;
}

.footer__item.active{overflow: unset}
.foot_dialgs{
  position: relative;
  left: 0;
  z-index: 9999;
  top: -3vh;
  width: 130px;}
.foot_dialgs:after {
  bottom:auto;
  top:-8px;
  transform: rotate(
          225deg
  );
}
.foot_dialgs1{}
.foot_dialgs2{
  position: relative;
  left: 0;
  z-index: 9999;
  top: 1vh;
  width: 130px;
}
.zhengjian_area{width:80%;position: fixed;left: 10%;top:50%;transform: translateY(-50%);
  background: #FFFFFF;
  box-shadow: 0rem 0.19rem 0.31rem 0rem rgb(0 0 0 / 35%);
  border: 0.03rem solid #D9D9D9;
  z-index: 99;
  padding: 15px;}
.zhengjian_area img{width:100%; }
.message-tip{
  height: auto;
  width: 90%;
  line-height: 17px;
  padding: 8px 3%;
  align-items: baseline;
}
.message-tip .icon {position: relative;top: 3px;}

.fpmessage-tip{
  height: auto;
  width: auto;
  /* width: 30%; */
  line-height: 17px;
  padding: 10px 6px;
  align-items: baseline;
}
.fpmessage-tip .icon {position: relative;top:1px;}


/* 整体做适配代码 */

/* @media (max-width: 1180px) { */
.top-bar {
  padding-right: 20px;
}
/* } */

/* @media (min-width: 1024px) { */
.hide-lg {
    display: none;
}
/* } */

/* @media (min-width: 769px) { */
.hide-pc {
  display: none;
}
/* } */

.hide-1024 {
  display: none;
}
/* VRhouse用到 */
.header {
  height: auto;
}





.nav {
  min-height: auto;
  height: 60px;
  padding-right: 10px;
}

.nav-account>a {
  width: 36px;
  margin-left: 0;
  text-align: center;
}

.nav-account .icon {
  color: #262626;
}

.icon-menu {
  display: block;
  width: 36px;
  height: 36px;
  position: relative;
}

.icon-menu span {
  pointer-events: none;
  position: absolute;
  width: 17px;
  height: 17px;
  display: block;
  transition: all .25s ease-out;
  left: 2.5px;
  top: .5px;
}

.icon-menu .icon {
  display: none;
  pointer-events: none;
}

.icon-menu span:first-child {
  top: 6px;
}

.icon-menu span:nth-child(3) {
  top: 11.5px;
}

.icon-menu span::before {
  display: block;
  content: "\e690";
  font-family: iconfont;
  display: block;
  transform: 0 center;
  font-size: 12px;
  transform: scale(.23, .125);
}

.icon-menu.active span {
  display: none;
}

.icon-menu.active .icon {
  display: block;
  font-size: 14px;
  transform: translateY(4px);
}

/* ----------------  导航栏  ------------------- */
.header {
  height: 150px; /* 在小屏幕上增加高度 */
}
.nav-list li {
  margin-left: 20px;
  margin-top: 6px !important;
}
/* 假设你的.nav-list每行有3个li元素，你可以使用:nth-child选择器来选择每行的前三个元素，然后移除它们的上边距 */
.nav-list li:nth-child(-n+4) {
  margin-top: 0; /* 移除第一行元素的上边距 */
}
/* .nav-list li {
  width: 33.33%; /* 设置li元素的宽度为.nav-list宽度的三分之一
}  */
.nav {
  padding: 0 10px; /* 在小屏幕上减小内边距 */
  /* 增加高度 */
  min-height: 100px;
}
.nav-list .active::after {
  transform: translateY(1px); /* 在小屏幕上减小移动的距离 */
}
/* ---------- banner图 ------------ */
.player {
  /* 控制pcbanner容器大小 */
  height: 400px;
}

.player .container {
  /* 控制pcbanner容器大小 */
  height: 400px;
}

.player__content {
  width: 100%;
  padding-top: 70px;
  padding-left: 15px;
  padding-right: 15px;
}
.player__img {
  width: 100%; /* 宽度为父元素的100% */
  height: auto; /* 高度自动 */
}
.player__img img {
  width: 100%; /* 图片宽度为父元素的100% */
  object-fit: contain; 
  /* 设置图片自动缩放，最高优先级 */
  max-width: 100%;
}
.player__img li{
  width: 100%; /* 宽度为父元素的100% */
}
/* ---------  banner文字  ------------- */
.player__content {
  padding: 5px; /* 增加内边距 */
  max-width: 100%; /* 在小屏幕上设置最大宽度为100% */
}
/* banner标题的和子标题的样式 */
.player__content li {
  width: 95%;
  height: 350px;
  display: flex;
  justify-content: center;
}
.player__content li a {
  height: 100% !important; /* 在小屏幕上使高度自动 */
  display: flex !important; /* 使用flex布局 */
  justify-content: center !important; /* 水平居中 */
  align-items: center !important; /* 垂直居中 */
  width: 100%; /* 宽度为父元素的100% */
}
.banner-info .h1 {
  font-size: 24px; /* 在小屏幕上减小字体大小 */
}

.banner-info .des {
  font-size: 16px; /* 在小屏幕上减小字体大小 */
}
.banner-info {
  width: 100%; /* 在小屏幕上设置宽度为100% */
}
/* 页脚 */
.footer-container {
  /* 去掉display: flex; */
  flex-direction: column; /* 设置为列向排列 */
  width: 100%; /* 宽度为100% */
}
/* 关注我们 */
.focus-on-us {
  padding: 0 40px 20px 40px;
}
.focus-on-us-title {
  margin-bottom: 15px;
  display: none;
}

.qr-code-list {
  /* 列向排列 */
  flex-direction: column;
}
.qr-code-list li {
  /* 设置li为一个flex容器 */
  display: flex;
  /* 设置子控件水平居中 */
  justify-content: center;
  /* 设置子控件列向排列 */
  flex-direction: column;
  /* 设置子控件在交叉轴上居中 */
  align-items: center;
  /* 消除pc的样式影响 */
  margin-left: 0;
}

.qr-code-box img {
  width: 200px;
  height: 200px;
}
.qr-code-box {
  width: 220px;
  height: 220px;
  /* 设置li为一个flex容器 */
  display: flex;
  /* 设置子控件水平居中 */
  justify-content: center;
}
.qr-code-des {
  width: 140px;
}
.container {
  margin-left: 40px !important;
  margin-right: 40px !important;
}
.container-mobile {
  margin-left: 40px !important;
  margin-right: 40px !important;
}
.container-mobile-width {
  width: 100% !important;
}

.footer__item {
  padding: 0;
}
.footer__title {
  padding: 0 15px;
}
/* vr house的预留信息 ,移动端的先关掉*/
.form-group-none {
  display: none;
}
/* banner的手机版适应 */
.banner__img-mobile {
  width: 100% !important; /* 设置宽度为100% */
  height: 100% !important; /* 设置高度为100% */
  object-fit: cover; /* 保持图片的宽高比 */
  background-size: cover; /* 保持图片的宽高比 */
}