body {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}
.web-360 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}
.web-360 .flex {
  display: flex;
}
.web-360 .jc-c {
  justify-content: center;
}
.web-360 .ai-c {
  align-items: center;
}
.web-360 .hover {
  cursor: pointer;
}

.web-360 .toScan {
  position: fixed;
  top: 30.5vw;
  transform: translateY(-50%);
  right: 2.63vw;
  width: 13.55vw;
  z-index: 99;
}
.web-360 .phone-input-box {
  position: fixed;
  top: 21vw;
  transform: translateY(-50%);
  right: 1.1vw;
  width: 16.5vw;
  height: 12vw;
  z-index: 99;
}
.web-360 .phone-input-box img {
  width: 100%;
}
.web-360 .phone-input-box .phone-input {
  position: absolute;
  top: 5.45vw;
  left: 2.1vw;
  width: 8.6vw;
  height: 1.7vw;
  box-sizing: border-box;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 0.9vw;
}
.web-360 .phone-input-box .phone-submit {
  width: 3.15vw;
  height: 1.6vw;
  position: absolute;
  top: 5.4vw;
  right: 2.25vw;
}
.web-360 .bg2,
.web-360 .bg3,
.web-360 .bg4,
.web-360 .bg5 {
  position: relative;
}
.web-360 .bg2 .bg2Img {
  width: 100%;
  height: 41.72vw;
  display: block;
}
.web-360 .bg3 img,
.web-360 .bg4 img,
.web-360 .bg5 img {
  width: 100%;
  display: block;
}
.web-360 .bg4 .tipBtn {
  bottom: 7%;
}
.web-360 .bg2Content {
  position: absolute;
  width: 63.11vw;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 24vw;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.web-360 .bg2Content2 {
  width: 63.11vw;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
.web-360 .contentItem {
  width: 13.92vw;
  height: 10.1vw;
  background-color: #ffffff;
  box-shadow: 0.1vw 0.1vw 0.53vw 0px rgba(243, 227, 209, 0.8);
  border-radius: 1vw;
  margin-bottom: 3.04vw;
  position: relative;
  cursor: pointer;
  padding: 1.58vw 0;
  box-sizing: border-box;
}
.web-360 .contentItem .icon-box {
  margin-right: 0.73vw;
}
.web-360 .contentItem .icon-name {
  font-size: 1.26vw;
  color: #99211c;
  margin-bottom: 0.63vw;
}
.web-360 .contentItem .icon-price {
  font-size: 1.05vw;
  color: #c27a77;
  text-decoration: line-through;
}
.web-360 .contentItem .item-btn {
  width: 8.36vw;
  height: 2.15vw;
  border-radius: 1.05vw;
  border: solid 0.1vw #fe8159;
  font-size: 1.26vw;
  color: #fe8159;
  margin: 0.84vw auto auto;
  text-align: center;
}
.web-360 .contentItem .item-badge {
  position: absolute;
  right: -0.84vw;
  top: -1.1vw;
  width: 8.04vw;
  height: 2.26vw;
  background-image: linear-gradient(90deg, #ffa03b 0%, #ff7c34 100%), linear-gradient(#f83232, #f83232);
  background-blend-mode: normal, 
                normal;
  border-radius: 1.47vw 1.1vw 1.1vw 0px;
  font-size: 0.95vw;
  color: #fff;
  text-align: center;
  line-height: 2.26vw;
  z-index: 99;
}
.web-360 .bg2Content2 .contentItem {
  margin-left: 1.84vw;
  margin-right: 1.84vw;
  width: 28%;
  position: relative;
}
.web-360 .bgItem {
  width: 100%;
}
.web-360 .bgTip {
  position: absolute;
  right: 0;
  top: -4%;
  width: 50%;
}
.web-360 .bg2Content2 .bgTip {
  top: -11%;
}
.web-360 .tipBtn {
  font-size: 20px;
  color: #99211c;
  position: absolute;
  bottom: 8%;
  text-align: center;
  width: 100%;
  font-weight: 600;
}
.web-360 .tipImg {
  bottom: 4%;
}
.web-360 .tipBtn img {
  width: 28%;
}
.web-360 .fhdxcx,
.web-360 .daifaScan {
  position: absolute;
  width: 200px;
  left: -200px;
  top: -62px;
  display: none;
}
.web-360 .bg2Content2 .contentItem:hover .fhdxcx {
  display: block;
}
.web-360 .bg2 .contentItem:hover .daifaScan {
  display: block;
}
.web-360 .step-img {
  position: absolute;
  top: 31%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42.72vw;
}
.web-360 .img-block {
  display: block;
  width: 100%;
}
.web-360 .distribution {
  position: relative;
}
.web-360 .distribution .distribution-button {
  position: absolute;
  top: 32.4vw;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14vw;
  height: 3vw;
  cursor: pointer;
}
.web-360 .offline-order .title {
  font-size: 48px;
  color: #6c2520;
  font-weight: bold;
  text-align: center;
  margin-top: 86px;
  margin-bottom: 19px;
}
.web-360 .offline-order .sub-title {
  font-size: 22px;
  color: #99211c;
  opacity: 0.6;
  text-align: center;
  margin-bottom: 59px;
}
.web-360 .mene-box {
  width: 15vw;
  height: 26vw;
  position: fixed;
  top: 50%;
  left: 7vw;
  transform: translate(-50%, -50%);
}
.web-360 .mene-box .menu {
  width: 100%;
  height: 26vw;
  position: absolute;
}
.web-360 .mene-box .menu-item {
  width: 100%;
  height: 2.5vw;
  position: relative;
  margin-top: 0.94vw;
}
.web-360 .mene-box .menu-item:first-of-type {
  margin-top: 3.14vw;
}
.web-360 .mene-box .menu-item a {
  width: 100%;
  height: 100%;
  display: block;
}
.web-360 .company {
  background-color: #fff6f5;
}
.web-360 .company .title {
  font-size: 2.52vw;
  font-weight: bold;
  color: #6c2520;
  padding: 4.62vw 0 2.68vw 0;
  box-sizing: border-box;
  text-align: center;
}
.web-360 .company .content {
  font-size: 1.26vw;
  color: #6c2520;
  text-align: center;
  width: 62.53vw;
  margin: 0 auto 2.52vw;
}
.web-360 .company .company-img {
  width: 14.98vw;
  height: 9.25vw;
  margin: 0 1.1vw 5.41vw 0;
}
.web-360 .offline-order-img {
  width: 45.98vw;
  height: 20.02vw;
  margin: 0 auto 4.26vw;
  display: block;
}

.preview-img .overlay {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  transition: 0.3s all;
  z-index: 199;
}
.preview-img .overlay .fixed-img {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.preview-img .visible {
  visibility: visible;
  opacity: 1;
}
.preview-img .none {
  visibility: hidden;
  opacity: 0;
}