.xtx-goods-page {
  margin-top: 150px;
  background: #f5f5f5;
  user-select: none;
  width: 100%;
  font-family: 600 !important;
}
.goods-info {
  min-height: 600px;
  background: #fff;
  display: flex;
}
.goods-info .media {
  width: 580px;
  height: 600px;
  padding: 30px 50px;
}
.goods-info .spec {
  color: #000000;
  font-weight: 500;
  flex: 1;
  padding: 30px 30px 30px 0;
}
.goods-footer {
  display: flex;
  margin-top: 20px;
}
.goods-aside {
  width: 280px;
  min-height: 1000px;
}
.goods-tabs {
  min-height: 600px;
  background: #fff;
}

.goods-warn {
  min-height: 600px;
  background: #fff;
  margin-top: 20px;
}

.number-box {
  display: flex;
  align-items: center;
}
.number-box .label {
  width: 60px;
  color: #999;
  padding-left: 10px;
}
.g-name {
  font-size: 22px;
  font-family: 600;
  color: #000000;
}

.g-desc {
  color: #999;
  margin-top: 10px;
}

.g-price {
  margin-top: 10px;
  font-weight: 600;
}
.g-price span {
}
.g-price span::before {
  content: "¥";
  font-size: 14px;
}

.g-price span:first-child {
  color: #cf4444;
  margin-right: 10px;
  font-size: 22px;
}

.g-price span:last-child {
  color: #999;
  text-decoration: line-through;
  font-size: 16px;
}

.g-service {
  background: #f5f5f5;
  width: 500px;
  padding: 20px 10px 0 10px;
  margin-top: 10px;
}
.g-service dl {
  padding-bottom: 20px;
  display: flex;
  align-items: center;
}
.g-service dl dt {
  width: 50px;
  color: #999;
}

.g-service dl dd:last-child {
  span {
    margin-right: 10px;
  }
  a {
    color: #27ba9b;
  }
}
.g-service dl dd span::before {
  content: "•";
  color: #27ba9b;
  margin-right: 2px;
}
.g-service dl dd {
  color: #666;
}
.goods-sales {
  display: flex;
  width: 400px;
  align-items: center;
  text-align: center;
  height: 140px;
}
.goods-sales li {
  flex: 1;
  position: relative;
}
.goods-sales li p:first-child {
  color: #999;
  line-height: 20px !important;
}

.goods-sales li p:nth-child(2) {
  color: red;
  margin-top: 10px;
  line-height: 20px !important;
}
.goods-sales li p:last-child {
  color: #666;
  margin-top: 10px;
  line-height: 20px !important;
}
.goods-sales li p:last-child i {
  color: red;
  font-size: 14px;
  margin-right: 2px;
}

.goods-sales li p:last-child i:hover {
  color: red;
  cursor: pointer;
}
.goods-sales li::after {
  position: absolute;
  top: 10px;
  left: 0;
  height: 60px;
  border-left: 1px solid #e4e4e4;
  content: "";
}
/* .goods-sales li :first-child::after {
  border-left: 1px solid red;
} */
.goods-tabs {
  min-height: 600px;
  background: #fff;
}
nav {
  height: 70px;
  line-height: 70px;
  display: flex;
  border-bottom: 1px solid #f5f5f5;
}
nav a {
  padding: 0 40px;
  font-size: 18px;
  position: relative;
}
nav a span {
  color: red;
  font-size: 16px;
  margin-left: 10px;
}

.goods-detail {
  padding: 40px;
}
.goods-detail .attrs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.goods-detail .attrs li img {
  width: 100%;
}
.goods-detail .attrs li {
  display: flex;
  margin-bottom: 10px;
  width: 50%;
}
.goods-detail .attrs li .dt {
  width: 100px;
  color: #999;
}

.goods-detail .attrs li .dd {
  flex: 1;
  color: #666;
}
.btn {
  margin-top: 20px;
}

.bread-container {
  padding: 25px 0;
}

.goods-image {
  width: 480px;
  height: 400px;
  position: relative;
  display: flex;
}

.middle {
  width: 400px;
  height: 400px;
  background: #f5f5f5;
}

.large {
  position: absolute;
  top: 0;
  left: 412px;
  width: 400px;
  height: 400px;
  z-index: 500;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-repeat: no-repeat;

  background-size: 800px 800px;
  background-color: #f8f8f8;
}

.layer {
  width: 200px;
  height: 200px;
  background: rgba(0, 0, 0, 0.2);

  left: 0;
  top: 0;
  position: absolute;
}

.small {
  width: 80px;
}
.small li {
  width: 68px;
  height: 68px;
  margin-left: 12px;
  margin-bottom: 15px;
  cursor: pointer;
}

.small li:hover,
.small li.active {
  border: 2px solid red;
}
.xtx-goods-page .detail-container {
  width: 1240px;
  margin: 0 auto;
  position: relative;
}
/* .container {
  width: 1240px;
  margin: 0 auto;
  position: relative;
} */
.btn {
  margin-top: 80px;
}

.img_wrapper {
  margin: 0 auto;
  width: 200px;
  border: 1px solid red;
  position: relative;
}
.cx-cropper-selection-glass {
  width: 350px;
  height: 300px;
  position: absolute;
  border: 1px solid #000;
  z-index: 30;
  background: url("@/assets/img/2.jpeg");
  pointer-events: none;
  background-repeat: no-repeat;
  box-sizing: border-box;
  background-color: #fff;
}
.cx-cropper-selection-glass__line {
  position: absolute;
  background: rgba(#447ed9, 0.5);
}
.cx-cropper-selection-glass__line .is-vertical {
  width: 6px;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.cx-cropper-selection-glass__line .is-horizontal {
  width: 100%;
  height: 6px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.original_img {
  width: 100%;
  cursor: crosshair;
}
.cx-cropper-selection-glass__mark {
  width: 5px;
  height: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #000;
  background: #fff;
}

.home-panel {
  background-color: #fff;
  margin-bottom: 20px;
}
.head {
  width:65%;
  padding: 40px 0;
  display: flex;
  align-items: flex-end;
  margin-bottom: 20px;
  margin: 0 auto;
}
.head h3 {
  flex: 1;
  font-size: 32px;
  font-weight: normal;
  margin-left: 6px;
  height: 35px;
  line-height: 35px;
}