div,p {box-sizing: border-box;}
* {-webkit-overflow-scrolling: touch;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
body {margin: 0px;overflow: hidden;width: 100%;height: 100%;}
ul li{
  list-style: none;}

.engine-render-box{
  width: 100%;
  height: 100vh;
}
#renderCanvas {width: 100%;height: 100%;outline: none;}

/**pc**/


.sidecolumn-nav-pc{
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-direction: row;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;

}
.sidecolumn-nav-pc li{
 margin-top: 20px;
 transform: translateX(145px);
 cursor: pointer;
 transition: transform 0.5s;
 position: relative;
}
.sidecolumn-nav-pc li:hover{
  transform: translateX(0);

}

.sidecolumn-nav-pc .seconcolumn{
  position: absolute;
  top: 0;
  right: 104%;
  /* left: 0%; */
  opacity: 0;
  transition: all .5s .1s;


}

.sidecolumn-nav-pc .seconcolumn p {margin-bottom: 20px;display: block;  transition: all 0.4s;}

.sidecolumn-nav-pc li:hover .seconcolumn   {
  opacity: 0;
  transition: all .5s .1s;

  /* left: -75%; */

}
.sidecolumn-nav-pc > li:hover .seconcolumn {
  opacity: 1;
}
/* .sidecolumn-nav-pc li:hover  {

  opacity: 1;
} */

.sidecolumn{
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;

}
.sizebox{
  width: 150px !important;
}
/* 当页面宽度小于800 竖屏 */
@media screen and  (max-width:1024px) and (orientation: portrait){

  .sidecolumn{
    position: fixed;
    width: 100%;
    height: auto;
    bottom: 10px !important;
    right: auto;
    top: auto;

  }
  .sidecolumn-nav-pc{
    display: none;
  }

  .w120{
    width: 80px !important;
  }
    .w150 {
      width: 110px !important;
  }
  .layer-box-content{
    width: 70% !important;
  }
}


/* 当页面宽度小于800 横屏 */
@media screen and  (max-width:1024px) and (orientation: landscape){
  .sidecolumn{
    position: fixed;
    width: 100%;
    height: auto;
    bottom: 10px !important;
    right: auto;
    top: auto;

  }
  .sidecolumn-nav-pc{
    display: none;
  }
  .w120{
    width: 80px !important;
  }
    .w150 {
      width: 110px !important;
  }
  .layer-box-content{
    width: 50% !important;
  }
  .containercolor{
    top: 18px !important;
  }
}
/**wap**/

.sidecolumn-nav-wap{
  display: flex;
  justify-content: center;
  align-items: end;
  flex-direction: row;
  height: auto;
  width: 80%;
  margin: 0 auto;
}

.sidecolumn-nav-wap li{
  cursor: pointer;
  position: relative;

 }

 .sidecolumn-nav-wap li img{
  width: 100%;
 }

.pad5{
  padding: 0 5px;
}

 .sidecolumn-nav-wap .seconcolumn{
  position: absolute;
  left: 0;
  bottom: 126%;
  transition: all 0.4s ease;
  opacity: 0;
  width: 100vh;

  display: block;
}

.sidecolumn-nav-wap .seconcolumn p {
  display: block;
  transition: all 0.4s;
  float: left;

}

.sidecolumn-nav-wap li:hover .seconcolumn   {
  opacity: 1;

}

.w120{
  width: 120px ;
}
  .w150 {
    width: 150px ;
}











.containercolor {
  width: 100%;
  height: 30%;
  position: absolute;
  display: none;
  left: 0;
  top: 2%;
  pointer-events: none;
}

.color-content-warp .close img {
  max-width: 100%;
}

.color-content-warp .close {
  position: absolute;
  width: 38px;
  height: 36px;
  pointer-events: auto;
  cursor: pointer;
}

.containercolor.show-color-container,
.color-content-warp {
  display: flex;
  align-items: center;
  justify-content: center;
}

.color-content-warp canvas {
  pointer-events: stroke;
}

.color-content-warp {
  width: 300px;
  height: 300px;
  position: relative;
  margin: 0 auto;
}

#colorcircular {
  position: relative;
  width: 100%;
  height: 100%;
}

.layer-box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  display: flex;
  z-index: 10000;
  transition: opacity .2s ease-in-out;
  justify-content: center;
  align-items: center;
  transform: translateY(-200%);
}

.sale-layer-root-show {
  opacity: 1;
  transform: translateY(0);
}

.layer-box-content {
  width: 25%;
  aspect-ratio: 718 / 481;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layer-box-content img {
  max-width: 100%;
  max-height: 100%;
}