/* 常规字重 */
@font-face {
  font-family: "Source Han Serif SC";
  src: url("./fonts/SourceHanSerifCN-Regular-lit-10.ttf") format("woff2");
  font-weight: 400;
}

/* 加粗字重 */
@font-face {
  font-family: "Source Han Serif SC";
  src: url("./fonts/SourceHanSerifCN-Medium-lit-10.ttf") format("woff2");
  font-weight: 500;
}
@font-face {
  font-family: "OPPO Sans 4.0";
  src: url("./fonts/OPPO Sans 4.0-lit-10.ttf") format("woff2");
  font-weight: 300;
}

body,
html {
  padding: 0;
  margin: 0;
  background: #261e1b;
  color: #fff;
  font-family: "Source Han Serif SC";
  line-height: 1.2;
  font-weight: 500;
  color: #dcb796;
  overflow: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}

.fullscreen-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
}

.bar-left {
  height: 100vh;
  width: 80px; /* 侧边栏宽度 */
  background: #261e1b;
  position: relative;
  overflow: hidden;
  transition: width 0.2s;
}
.mobile-logo {
  display: none;
}
.menu-bar {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #dcb796;
  font-size: 12px;
  font-weight: 500;
}
.menu-item {
  opacity: 0.5;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hide {
  opacity: 0;
  cursor: auto;
}
.menu-item.on {
  opacity: 1;
}
.menu-item::after {
  content: "";
  display: inline-block;
  width: 60px;
  height: 2px;
  margin-bottom: 5px;
}
.menu-item.on::after {
  background: #dcb796;
}
.menu-item img {
  width: 32px;
  margin-bottom: 6px;
}
.bar-right {
  width: 320px;
  height: 100vh;
  background-color: #261e1b;
  position: relative;
  overflow: hidden;
  transition: width 0.2s;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.bar-right::-webkit-scrollbar,
.tool-bar::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}
.tool-bar {
  height: 100vh;
  color: #dcb796;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.tool-layout {
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
  padding: 16px 28px 0px;
}
.tool-material {
  padding: 16px 28px 0px;
}

.tool-colors,
.space-mode {
  flex-wrap: wrap;
  display: none;
  justify-content: space-around;
}
.tool-colors.on,
.space-mode.on {
  display: flex;
}

.tool-type-item,
.wall-item {
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 16px 10px 20px;
  position: relative;
  opacity: 0.5;
  color: #dcb796;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  text-align: center;
}
.tool-lay .tool-type-item {
  opacity: 1;
}
.tool-type-item > span,
.wall-item > span {
  width: calc(100% + 40px);
  height: 14px;
  font-family: "OPPO Sans 4.0";
  white-space: pre-wrap;
  line-height: 14px;
  margin-bottom: 8px;
}

.tool-type-item img {
  width: 80px;
  height: 80px;
  margin: 4px;
}
.tool-type-placeholder {
  width: 100px;
}
.tool-type-item.color img,
.wall-item img {
  width: 60px;
  height: 60px;
  margin: 14px;
  object-fit: cover;
}
.tool-type-item.on::after,
.wall-item.on::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 60px;
  height: 2px;
  background: #dcb796;
  bottom: -6px;
}
.tool-type-item.on,
.wall-item.on {
  opacity: 1;
}
.space-type-item {
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 16px 10px 20px;
  position: relative;
  opacity: 0.5;
  color: #dcb796;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  text-align: center;
}
.space-type-item img {
  width: 220px;
  height: 120px;
  margin-bottom: 20px;
  object-fit: cover;
}
.space-type-item > span {
  height: 14px;
  font-family: "OPPO Sans 4.0";
  white-space: pre-wrap;
  line-height: 14px;
  margin-bottom: 8px;
}
.space-type-item.on::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 60px;
  height: 2px;
  background: #dcb796;
  bottom: -6px;
}
.space-type-item.on {
  opacity: 1;
}

.display-area {
  flex: 1;
  background-color: #1a1515;
  background-image: url("./assets/display_bg.png");
  background-size: cover;
  background-position: center top;
  display: flex;
  align-items: center;
  justify-items: center;
  position: relative;
}
.header-bar {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 32px;
  width: 100%;
  z-index: 10;
}
.header-mobile-left {
  display: none;
}
.header-home {
  font-size: 20px;
  width: 36px;
  height: 36px;
  cursor: pointer;
}
.header-left {
  margin-left: 60px;
  width: 76px;
  text-align: center;
  font-size: 12px;
}
.header-icon img {
  height: 17px;
}
.header-show {
  width: 36px;
  height: 36px;
  cursor: pointer;
}
.header-right {
  width: 76px;
  text-align: center;
  font-size: 12px;
  opacity: 0.5;
  display: none;
}
.header-right:hover {
  opacity: 1;
}
.header-left.flex {
  display: flex;
}
.product-container,
.product-space {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: none;
  z-index: 9;
}
.product-container.on,
.product-space.on {
  display: flex;
}
.product-container .product-img {
  width: 720px;
  height: 720px;
  object-fit: contain;
  margin-top: 10vh;
}
.product-container .product-img.smallPc {
  width: 600px;
  height: 600px;
}

.show {
  display: flex;
}

/* 9.8新增 */

.tool-header {
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  position: sticky;
  top: 0px;
  z-index: 99;
  background: rgb(38, 30, 27);
}
.tool-material-header {
  padding: 16px 0px;
  display: flex;
  justify-content: space-between;
  position: sticky;
  top: 72px;
  z-index: 99;
  background: rgb(38, 30, 27);
}
.tool-material-header-mobile {
  display: none;
}
.tool-header span {
  display: inline-block;
  font-size: 14px;
  line-height: 24px;
  height: 24px;
  width: 68px;
  font-weight: 500;
  text-align: center;
}
.tool-material-header span {
  display: inline-block;
  font-size: 14px;
  line-height: 24px;
  height: 24px;
  font-weight: 500;
  text-align: center;
}
.tool-header span:nth-last-child(1),
.tool-material-header span:nth-last-child(1) {
  margin-right: 0px;
}
.tool-taggle,
.space-taggle,
.tool-cgy {
  font-weight: 500;
  opacity: 0.5;
  cursor: pointer;
}
.tool-taggle.on,
.space-taggle.on,
.tool-cgy.on {
  opacity: 1;
}
.tool-taggle::after,
.space-taggle::after,
.tool-cgy::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  margin: 5px auto;
}
.tool-taggle.on::after,
.space-taggle.on::after,
.tool-cgy.on::after {
  background: #dcb796;
}
.tool-logo {
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.tool-logo .logo {
  width: 28px;
  height: 36px;
}
.sub-mode,
.sub-mode img {
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.sub-mode.on .state-1,
.sub-mode .state-2 {
  display: none;
}
.sub-mode.on .state-2 {
  display: block;
}
.tool-types {
  display: none;
}
.tool-types.on {
  display: block;
}
.tool-lay {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.tool-lay-header {
  padding: 16px 0px;
  line-height: 24px;
  font-size: 12px;
}

.product-space-wall {
  width: 35%;
  min-width: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
}
.product-space-room {
  flex: 1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
}
.product-space-wall .device-img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.product-space-wall .device-img.classic {
  width: 160px;
  height: 160px;
  background-image: url("./assets/front/shadow_classic.webp");
}
.product-space-wall .device-img.standard {
  background-image: url("./assets/front/shadow_standard.webp");
}
.product-space-wall .device-img.standard,
.product-space-wall .device-img.pro {
  width: 240px;
  height: 240px;
}
.product-space-wall .device-img.pro {
  background-image: url("./assets/front/shadow_pro.webp");
}
.product-space-wall .device-img.max {
  background-image: url("./assets/front/shadow_max.webp");
}
.product-space-wall .device-img.ultra {
  background-image: url("./assets/front/shadow_ultra.webp");
}
.product-space-wall .device-img.slider {
  background-image: url("./assets/front/shadow_slider.webp");
}
.product-space-wall .device-img.bedside {
  background-image: url("./assets/front/shadow_bedside.webp");
}
.product-space-wall .device-img.line3 {
  background-image: url("./assets/front/shadow_line3.webp");
}
.product-space-wall .device-img.line6 {
  background-image: url("./assets/front/shadow_line6.webp");
}
.product-space-wall .device-img.max,
.product-space-wall .device-img.ultra {
  width: 400px;
  height: 400px;
}

.product-space-wall .device-img.slider {
  width: 400px;
  height: 400px;
}
.product-space-wall .device-img.bedside,
.product-space-wall .device-img.line3,
.product-space-wall .device-img.line6 {
  width: 440px;
  height: 440px;
}

.product-container {
  position: relative;
}
.product-container.on .customized-tip.on {
  display: block;
}
.customized-tip {
  position: absolute;
  font-size: 12px;
  right: 30px;
  bottom: 20px;
  display: none;
}
.sprite {
  background-image: url(./assets/sprite.webp);
  display: inline-block;
  height: 60px;
  width: 60px;
  background-size: 360px 600px;
  margin: 14px;
  background-repeat: no-repeat;
}
.sprite-c_black {
  background-position: -0px -0px;
}
.sprite-c_brush_black {
  background-position: -60px -0px;
}
.sprite-c_brush_gold1 {
  background-position: -120px -0px;
}
.sprite-c_brush_gold2 {
  background-position: -180px -0px;
}
.sprite-c_brush_grey {
  background-position: -240px -0px;
}
.sprite-c_brush_silver {
  background-position: -300px 0px;
}
.sprite-c_gold1 {
  background-position: 0px -60px;
}
.sprite-c_gold2 {
  background-position: -60px -60px;
}
.sprite-c_gold3 {
  background-position: -120px -60px;
}
.sprite-c_grey {
  background-position: -180px -60px;
}
.sprite-c_red {
  background-position: -240px -60px;
}
.sprite-c_sc_black {
  background-position: -300px -60px;
}
.sprite-c_sc_gold1 {
  background-position: 0px -120px;
}
.sprite-c_sc_gold2 {
  background-position: -60px -120px;
}
.sprite-c_sc_gold3 {
  background-position: -120px -120px;
}
.sprite-c_sc_grey {
  background-position: -180px -120px;
}
.sprite-c_sc_silver {
  background-position: -240px -120px;
}
.sprite-c_sd_black {
  background-position: -300px -120px;
}
.sprite-c_sd_gold1 {
  background-position: 0px -180px;
}
.sprite-c_sd_gold2 {
  background-position: -60px -180px;
}
.sprite-c_sd_gold3 {
  background-position: -120px -180px;
}
.sprite-c_sd_grey {
  background-position: -180px -180px;
}
.sprite-c_sd_silver {
  background-position: -240px -180px;
}
.sprite-c_silver {
  background-position: 0px -240px;
}
.sprite-c_ss_black {
  background-position: -60px -240px;
}
.sprite-c_ss_gold1 {
  background-position: -120px -240px;
}
.sprite-c_ss_gold2 {
  background-position: -180px -240px;
}
.sprite-c_ss_gold3 {
  background-position: -240px -240px;
}
.sprite-c_ss_grey {
  background-position: -300px -240px;
}
.sprite-c_ss_silver {
  background-position: 0px -300px;
}
.sprite-c_white {
  background-position: -60px -300px;
}
.sprite-c_wl_black {
  background-position: -120px -300px;
}
.sprite-c_wl_gold1 {
  background-position: -180px -300px;
}
.sprite-c_wl_gold2 {
  background-position: -240px -300px;
}
.sprite-c_wl_gold3 {
  background-position: -300px -300px;
}
.sprite-c_wl_grey {
  background-position: 0px -360px;
}
.sprite-c_wl_silver {
  background-position: -60px -360px;
}
.sprite-c_yh_amber {
  background-position: -120px -360px;
}
.sprite-c_yh_black {
  background-position: -180px -360px;
}
.sprite-c_yh_gold1 {
  background-position: -240px -360px;
}
.sprite-c_yh_gold2 {
  background-position: -300px -360px;
}
.sprite-c_yh_green {
  background-position: 0px -420px;
}
.sprite-c_yh_grey {
  background-position: -120px -420px;
}
.sprite-c_yh_red {
  background-position: -180px -420px;
}
.sprite-c_yh_silver {
  background-position: -240px -420px;
}
.sprite-c_ym_black {
  background-position: -300px -420px;
}
.sprite-c_ym_gold1 {
  background-position: 0px -480px;
}
.sprite-c_ym_gold2 {
  background-position: -60px -480px;
}
.sprite-c_ym_gold3 {
  background-position: -120px -480px;
}
.sprite-c_ym_grey {
  background-position: -180px -480px;
}
.sprite-c_ym_silver {
  background-position: -240px -480px;
}
.sprite-c_jg_gold4 {
  background-position: -300px -480px;
}
.sprite-c_ms_black {
  background-position: 0px -540px;
}

/* ipad 横屏 */
@media screen and (max-width: 1366px) {
  .product-container .product-img,
  .product-container .product-img.smallPc {
    width: 440px;
    height: 440px;
  }
  .bar-right {
    width: 280px;
  }
  .product-space-wall {
    min-width: 280px;
  }
  .space-type-item {
    margin: 16px 0px 20px;
  }
  .product-space-wall .device-img.classic {
    width: 112px;
    height: 112px;
  }
  .product-space-wall .device-img.standard,
  .product-space-wall .device-img.pro {
    width: 168px;
    height: 168px;
  }
  .product-space-wall .device-img.max,
  .product-space-wall .device-img.ultra,
  .product-space-wall .device-img.slider {
    width: 280px;
    height: 280px;
  }

  .product-space-wall .device-img.bedside,
  .product-space-wall .device-img.line3,
  .product-space-wall .device-img.line6 {
    width: 280px;
    height: 280px;
  }
}