.newIndex{
  background: url('../../img/home/homeBg.jpg') no-repeat center;;
  .joinBox{display: none;position: absolute;top: -40px;text-align: center;font-size: 14px;
  border-radius: 5px;color: green;left: 4%;
  
  }
  .newIndeWrap{
    margin-top: 40px;
    .leftFixedBox{
      width: 100%;
      float: left;
      overflow-y: hidden;
    }
    .rightFixedBox_f{
      margin-right: 14px;
      margin-top: 12px;
      position: relative;
      z-index: 1;
      // position: fixed;right: 14px;top:82px;
      // z-index: 2;
      // min-width: 30%;
      max-width: 50%;
      float: right;
      position: fixed;top: 80px;
      right: 0px;
      .right{
        float: right;
        // width: 100px;
        .rightUl{
          
          width: 100px;
          padding:20px 0;
          border-radius: 20px;
          box-shadow: 0px 4px 10px #d8d8d8;
          background: #fdfdfd;
        }
        .showChildren{
          li{
            cursor: pointer;
            font-size: 14px;
            padding:12px 2px;
            width: 100px;
            text-align: center;
            border-right: 6px solid transparent;
            &.on{background: #1e2022;color:#d9ad20;border-color:#ffba1a }
            transition: all 0.3s; 
            &:hover{
              background: #1e2022;color:#d9ad20;border-color:#ffba1a 
            }
          }
        }
        
      }
      
    }
    .isShowIcon{
      position: fixed;
      bottom: 80px;
      left: 10px;
      bottom: 130px;
      cursor: pointer;text-align: center;z-index: 1;
      font-size: 12px;color:#666;
      text-shadow: 1px 1px 0 rgba(255,255,255,.5);
    }
    .footerFixed{
      position: fixed;
      height: 100px;
      bottom: 0;
      background: transparent;
      width: 100%;
      .footer_Left{
        width: 78%;
        margin-right:1%;
        float: left;
        height: 100%;
        background: #fff;
        position: relative;
        border-radius: 0 15px 15px 0;
        .modifyMyCloset{
          position: absolute;right: 20px;top: 10px;
          font-size: 20px;color:#000;cursor: pointer;
          z-index: 111;
        }
        .myClosetTil{
          width: 60px;
          background: #1e2022;
          color:#fff;
          font-size: 14px;
          height: 100%;
          padding:34px 22px ;
          float: left;    
          z-index: 1;
          position: relative;
        }
        .sliderBox{
          height: 100%;
          width: 79%;background: #fff;
          float: left;
          overflow: hidden;
        }
        .modifyBox{width: 5%;text-align: center;padding-top: 7px;position: relative;z-index: 55;}
        .sliderBtnBox{
          width: 7%;height: 100%;
          box-shadow: 0px 1px 20px #999;float: right;    border-radius: 0 15px 15px 0;overflow: hidden;
        }
      }
      .footer_right{
        float: right; 
        border-radius: 15px 0 0px 15px;
        width: 28%;
        max-width: 340px;
        background: #fff;
        height: 100%;
        padding:10px;
        box-shadow: 0px 1px 20px #999;
        .priceBox{
          font-size: 16px;color:#222;padding-top: 5px;
        }
        .price{
          color:#fab51f;font-size: 18px;
        }
        .btnBox{
          margin-top: 5px;
          .btn{width: 45%;text-align: center;padding:12px 0;border-radius: 10px;color: #fff;font-size: 14px;}
          .btn1{background:#929597 ;margin-right: 8%;}
          .btn2{background: #232527;}
        }

      }
    }
  }


}
// 右边20190327
.new_rightFixedBigBox{
  width: 460px;
  height: 600px;
  position: fixed;
  right: 12px;
  top:55px;
  background:#FFFFFF;
  overflow: hidden;

  .rightContBox{
    .modelId_box{
      li{
        float: left;margin-right: 5px;margin-left: 5px;
        &.on{
          color: #FBB723
        }
        
        &:hover{
          
          color: #FBB723
        }
      }
    }
    .rightTil{
      padding:8px 0px 8px 50px;box-shadow:0px 2px 4px 0px rgba(217,217,217,0.5);
      li{
        text-align: center;
        float: left;
        margin-right: 20px;
        padding-right: 40px;
        cursor: pointer;
        background-image: url('../../img/home/moreIcon.png');
        background-size:40%;
        background-position:right center;
        background-repeat:no-repeat;
        .imageTil_icon{
          display: block;
          height: 20px;
        }
        .imageTil_iconOn{
          display: none;
          height: 20px;
        }
        &.on{
          color: #FBB723;
          .imageTil_iconOn{
            display: block;
          }
          .imageTil_icon{
            display: none;
          }
        }
        &:hover{
          color: #FBB723;
          .imageTil_iconOn{
            display: block;
          }
          .imageTil_icon{
            display: none;
          }

        }
        
      }
      li.judgeEmbroidered{
        background-image:none;
        padding-right: 0px;
      }

    }

    .rightBody{
      padding:10px 20px;
      padding-right: 0px;
      .rightTil_box{
        .design_ul_Til{
          margin-bottom: 10px;
          li{
            margin-right: 10px;
            float: left;
            cursor: pointer;
            margin-bottom: 5px;
            &.on{
              color: #F2C129;
            }
            &:hover{
              color: #F2C129;

            }
          }
        }
        .all_contantBox{
          height: 500px;
          .all_ul{
            li{
              padding:5px;
              border: 1px solid rgba(249,249,249,1);
              width: 98px;
              height: 150px;overflow: hidden;
              float: left;
              cursor: pointer;
              margin-right: 8px;
              margin-bottom: 10px;
              &.on{
                border-color: #F2C129;
              }
              &:hover{
                
                border-color: #F2C129;
              }
              .all_imgBox{
                height: 86px;width: 86px;
                overflow: hidden;
                position: relative;
                .mainFabricImg{
                  position: absolute;
                  height: 100px;width: 100px;background:url('../../img/home/mainFabricBg.png') 0 0 no-repeat ; }
              }
              .all_price{
                color: #CF7A47!important;
              }
              
            }
          }
          .fabric_addClassOn{
            li{
              height: 170px;
            }
          }
          .match_ul_box{
            li{
              position: relative;
              height: 176px;
              width: 112px;
              .all_imgBox{
                width: 100px;height:140px;
                img{
                  
                  width: 100px;height:140px;
                }
              }
              .tryOn{
                position: absolute;
                background: rgba(0,0,0,0.3);
                display:none;  
                z-index: 1;  
                height: 100%;
                width: 100%;
                text-align: center;    
                left: 0;
                top: 0;padding-top: 60px;
                .tryOn_icon{
                  padding:5px 10px;
                  background: #CF7A47;
                  color: #fff;
                  margin-top: 50px; 
                  // transition:all 2s; 
                  // -moz-transition:all 2s; 
                  // -webkit-transition:all 2s; 
                  // -o-transition:all 2s;
                }
              }
              &:hover{
                .tryOn{
                  display: block;
                }
              }
            }
          }
        }
      }


    }
    
    .b_moreCategory_box{
      position: relative;
      height: 26px;
      overflow: hidden;
      &.on{
        height: auto;
      }
      .moreBtn{
        position: absolute;
        right: 10px;
        top: 0px;
        cursor: pointer;
        .current{display: inline-block;}
        .currentOn{display: none}
        &.on{
          .current{display: none}
          .currentOn{
            display: inline-block;
          }

        }
      }
    }
  }
}
.new_rightFixedBigLi{
  position: fixed;
  right: 480px;
  top:55px;
    li{
      height: 52px;width: 124px;
      padding-top: 14px;
      border-bottom: 2px solid transparent;
      background: #fff;
      text-align: center;
      font-size: 16px;

      &.on{
        color: #F1C029;
        background: rgba(38,40,42,1);
        border-color: #F2C129;
      }
    }
}

.modelBit_box{
  position: fixed;
  width: 124px;
  padding: 12px 8px;
  background: #fff;
  right:480px;
  top: 159px;
  height: 496px;
  li{
    padding:5px;
    border: 1px solid rgba(249,249,249,1);
    width: 104px;
    height: 180px;overflow: hidden;
    float: left;
    cursor: pointer;
    margin-right: 10px;
    margin-bottom: 10px;
    &.on{
      border-color: #F2C129;
    }
    .product_box{
      height: 140px;
    }
    .product_boxIcon{

      height: 140px;
      background: url('../../img/home/noProduct.png') center 20px no-repeat ;
    }
    .all_imgBox{
      height: 90px;width: 90px;
      overflow: hidden;
      img{
        
      height: 90px;width: 90px;
      }
      .mainFabricImg{
        position: absolute;
        height: 100px;width: 100px;background:url('../../img/home/mainFabricBg.png') 0 0 no-repeat ; }
    }
    .all_price{
      color: #CF7A47
    }
  }

}




.rightFixedBox_f{
  .childrenBox{
    float: right;
    // 品牌
    .brandBox{
      box-shadow: 0px 4px 10px #d8d8d8;
      max-width: 130px;background: #fff;border-radius: 20px;
      padding:10px 0;
      text-align: center;    padding: 16px 10px;
      
      ul{
        max-height: 520px;overflow-y: auto;overflow-x: hidden; 
        // li{
        //   padding:20px;border-radius: 20px;
        //   border:2px solid transparent;
        //   cursor: pointer;
        //   position: relative;
        //   margin-top: 6px;
        //   margin-bottom: 6px;
        //   .bgImg{width: 39px;height:46px;position: absolute;right:0;bottom: 0;display: none;}
        //   &.on{
        //     border-color:#ffb920;
        //     .bgImg{display: inline-block}
        //   }
        //   &:hover{border:2px solid #ffb920;}
        // }
        
        li{
          cursor: pointer;
          width: 100px;overflow: hidden;
          margin:10px;
          float: left;
          .imgList{
            height: 100px;width: 100px;border:2px solid transparent;
            border-radius: 15px;overflow: hidden;
            position: relative;
            .imgShow{height: 70px;width: 70px;}
            &:hover{border:2px solid #ffb920;}
            .bgImg{width: 20px;height:23px;position: absolute;right:0;bottom: 0;display: none;
              img{
                width: 20px;height:23px;
              }
            }
            
          }
          &.on{
            .imgList{
              border-color:#f2c025;
              .bgImg{display: inline-block;}
            }
          }
        }
      }
    }
    //面料
    .childrenFabric{
      .right{
        box-shadow: 0px 4px 10px #d8d8d8;
        float: right;
        max-height: 450px;width: 100px;
        border-radius: 0 15px 15px 0;
          ul{
            li{
              padding:12px 13px 12px 20px;
              font-size: 14px;
              text-align: center;
              cursor: pointer;
              position: relative;
              .arrow{height: 20px;width: 20px;position: absolute;left: 2px;top: 14px;display: none;}
              &.on{
                background: #232527;color: #f2c025;
                border:0;
                .arrow{display: inline-block;}
              }
              &:hover{
                background: #232527;color: #f2c025;
                border:0;
                .arrow{display: inline-block;}
              }
            }
        }
          
      }
      .left{
        box-shadow: 0px 4px 10px #d8d8d8;
        border:10px;
        padding: 10px;
        background: #fff;
        border-radius: 15px 0 0 15px;
        float: right;
        max-width: 265px;
        
        .ficList{

          max-height: 450px;
          // margin-right: 100px;
          max-width: 265px;
          ul{
            li{
              cursor: pointer;
              margin:10px;
              float: left;
              height: 210px;overflow: hidden;
              width: 100px;
              .imgList{
                height: 100px;width: 100px;border:2px solid transparent;
                border-radius: 15px;overflow: hidden;
                position: relative;
                &:hover{border:2px solid #ffb920;}
                .bgImg{width: 20px;height:23px;position: absolute;right:0;bottom: 0;display: none;
                  img{
                    width: 20px;height:23px;
                  }
                }
                
                .mainFabricImg{
                  position: absolute;
                  height: 100px;width: 100px;background:url('../../img/home/mainFabricBg.png') 0 0 no-repeat ; }
              }
              &.on{
                .imgList{
                  border-color:#f2c025;
                  .bgImg{display: inline-block;}
                }
              }
            }
          }
        }
        
      }
      .fabricDetails{
        background: #fff;
        float: right;
        width: 170px;
        padding:10px;
        border-radius: 15px;
      }


    }
    .childrenStyle{
      // width: 300px;
      // width: 320px;
      max-width: 320px;
      float: right;
      // overflow-x: hidden;overflow-y: auto;

      .style_left{
        background: #fff;
        width: 130px;
        box-shadow: 0px 4px 10px #d8d8d8;
        border-radius: 20px;
        padding:16px 5px;
      }
      .style_right{
        background: #fff;
        width: 130px;
        box-shadow: 0px 4px 10px #d8d8d8;
        border-radius: 20px;
        padding:16px 5px;
        .group_right{

          max-height: 520px;
        }
      }
      ul{
        max-height: 520px;
        // li{
        //   padding:26px;border-radius: 20px;
        //   border:2px solid transparent;
        //   margin:7px;
        //   float: left;
        //   cursor: pointer;
        //   text-align: center;
        //   position: relative;
        //   margin-top: 6px;
        //   margin-bottom: 6px;
        //   .bgImg{width: 39px;height:46px;position: absolute;right:0;bottom: 0;display: none;}
        //   &.on{
        //     border-color:#ffb920;
        //     .bgImg{display: inline-block}
        //   }
        //   &:hover{border:2px solid #ffb920;}
        // }
        
        li{
          cursor: pointer;
          margin:10px;
          float: left;text-align:center;
          .imgList{
            height: 100px;width: 100px;border:2px solid transparent;
            border-radius: 15px;overflow: hidden;
            position: relative;
            .imgShow{width: 70px;height: 70px;}
            &:hover{border:2px solid #ffb920;}
            .bgImg{width: 20px;height:23px;position: absolute;right:0;bottom: 0;display: none;
              img{
                width: 20px;height:23px;
              }
            }
          }
          &.on{
            .imgList{
              border-color:#f2c025;
              .bgImg{display: inline-block;}
            }
          }
        }
      }
    }
    // 工艺
    .ChildrenCraft{
      max-width: 100px;
      background: #fff;
      padding:10px;
      border-radius: 15px;
      box-shadow: 0px 4px 10px #d8d8d8;
      ul{
        li{
          padding:12px 13px 12px 20px;
          font-size: 14px;
          text-align: center;
          cursor: pointer;
          position: relative;
          .arrow{height: 20px;width: 20px;position: absolute;left: 2px;top: 14px;display: none;}
          &.on{
            background: #232527;color: #f2c025;
            border:0;
            .arrow{display: inline-block;}
          }
        }
      }
    }


  }
}
.js_hideSe{height:300px;}
// .js_hideSe{position: fixed;right: -20px;top:50%;-webkit-transform: translateX(-50%) translateY(-50%);width: 100px; height:800px;}
// .js_rightUlCenter{max-height:500px;position: fixed;z-index:1;right: -20px;top:50%;-webkit-transform: translateX(-50%) translateY(-50%);}
//   .js_brandBoxCenter{max-height:500px;position: fixed;right: 80px;top:50%;-webkit-transform: translateX(-50%) translateY(-50%);}
  
//   .js_style_rightCenter{max-height:500px;position: fixed;right: 80px;top:50%;-webkit-transform: translateX(-50%) translateY(-50%);}
//   .js_style_leftCenter{max-height:500px;position: fixed;right: 180px;top:50%;-webkit-transform: translateX(-50%) translateY(-50%);}
//   .js_fabricCenter{max-height:500px;position: fixed;right: 80px;top:50%;-webkit-transform: translateX(-50%) translateY(-50%);}
//   .js_fabricLeftCenter{max-height:500px;position: fixed;right: 98px;top:50%;-webkit-transform: translateX(-50%) translateY(-50%);}
//   .js_embroiderCenter{max-height:500px;position: fixed;right: 31px;top:50%;-webkit-transform: translateX(-50%) translateY(-50%);}
//   .js_ChildrenCraftCenter{max-height:500px;position: fixed;right: 80px;top:50%;-webkit-transform: translateX(-50%) translateY(-50%);}



.noU3dStartBox{
  // text-align: center;
}

.noU3dStartBox img{
  height: 800px;width: 800px;
  margin-left:15%;
}
.diyCutomeImgBox{padding-left: 12%;  width: 100%;  display: inline-block;
  }











#modifyTheImage{position: fixed;height: 100px;width: 70px;z-index: 11;}
.animateImg{position:fixed;left:25%;top:160px;z-index:555}


.slideGroup{ width:100%; text-align:left; margin:0 auto;margin-top: 4px; padding:0;overflow: hidden;}
.slideGroup .ithzsShow{ overflow:hidden; zoom:1; height: 100px;}

.slideGroup .ithzsShowPrev.prevStop,.slideGroup .ithzsShowNext.nextStop{opacity: 0.3;}
.slideGroup .ithzsShowPrev,.slideGroup .ithzsShowNext{ position:absolute; right:60px; top:32px; display:block; width:30px; height:40px; line-height:40px;}
.slideGroup .ithzsShowNext{ left:auto; right:10px;}
// .slideGroup .ithzsShowBox{position: relative;}
.slideGroup .ithzsShowBox ul{ overflow:hidden; zoom:1;   }
.slideGroup .ithzsShowBox ul li{ 
    cursor: pointer;
    margin:0 20px; float:left; _display:inline; overflow:hidden; text-align:center;  position: relative;
    .soldOut{position: absolute;height: 93px;width: 93px;left: 0;top: 0;    line-height: 93px;
      font-size: 14px;z-index: 3;
      color: #ff0000;
      background: rgba(255,255,255,0.6);
      border-radius: 15px;}
    .sortNum{position: absolute;width: 30px;height: 16px;background: linear-gradient(-45deg, transparent 10px, #eaa424 0);font-size: 12px;padding-left: 3px;color:#fff;left: 0;top: 0;text-align: left;z-index: 3;}
    .delSliderLi{position: absolute;height: 20px;width: 20px;text-align: center;line-height: 20px;color:#000;background: #e1e4e5;right: 2px;top: 2px;
      border-radius: 100%;z-index: 22;}  
    // :hover{
    //   .delSliderLi{display: inline-block;}
    // }
    .pic{ text-align:center; }
    .pic img{ width:120px; height:90px; display:block;  padding:2px; border:1px solid #ccc; }
    .pic a:hover img{ border-color:#999;  }
    .title{ line-height:24px;   }
    .activeImage{transition: all 0.3s; 
      border: 1px solid #bebebe;border-radius:15px;overflow: hidden;
      height: 93px;width:93px;z-index: 2;position: relative;
      background: -webkit-linear-gradient(#ffffff ,#f8f8f8, #e8e7e7); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient( #ffffff ,#f8f8f8, #e8e7e7); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient( #ffffff ,#f8f8f8, #e8e7e7); /* Firefox 3.6 - 15 */
      background: linear-gradient(#ffffff ,#f8f8f8, #e8e7e7); 
      // background: url('../../img/home/22.jpg') no-repeat center ;
      &.active{
        // .activeImage{
        //     border-color: #04b0c4;
        // }
        border-color: #f2c025;
      }
    }
   
}
.js_theImage{transition: all 0.3s; }
.slideGroup .ithzsShowBox ul li:hover .activeImage{
  border-color: #f2c025;
}
.slideGroup .ithzsShowBox ul li:hover .js_theImage{
  transform: scale(1.35);
}
.ithzsShow{
    ul{position:absolute;width:3000px;
    
    }
}
.ithzsShow ul li{float: left;margin-left:20px;margin-right: 20px;list-style: none;position:relative;overflow:hidden;}
.ithzsShowUl li a{display:inline-block;}
.ithzsShow ul li a p{width:200px;height:170px;}
.ithzsShow ul li a p img{width:200px;height:70px; margin-top:50px;}




.weitLoad{position: fixed;height: 100%;width: 100%;top: 0;z-index: 100000;padding-top: 24%;padding-left: 37%}


// @media screen {
  
// }

// 换背景图的
.bg_box{
  position: fixed; left: 50px; width:245px;background: rgba(255,255,255,0);padding:10px;
  z-index: 666;
  bottom:240px;
  border-radius: 5px 5px 0 0;
  color:#fff;
  span{
    text-shadow: 0 1px 1px black !important;
  }
  li{
    height: 30px;width: 50px;overflow: hidden;float: left;margin-right: 5px;text-align: center;cursor: pointer;
    box-sizing: border-box;border:2px solid transparent;margin-bottom:5px;
    &.on{
      border-color: #f2c025;
    }
  }
}
.bg_boxSetIcon{
  position:fixed;left:10px;bottom:200px;z-index:3333;cursor:pointer;text-align:center;color:#666666;
  text-shadow: 1px 1px 0 rgba(255,255,255,.5);
}
.bg_arrow{
  opacity: 0;width:0;height:0;border-top:8px solid transparent;;border-bottom:8px solid transparent;border-right:14px solid #fff;position:fixed;bottom:220px;left:36px;
}


.mainLight_Til{
  width:245px!important;
  color:#191919!important;
  font-family: "Microsoft YaHei"!important;
}






// introduce首页
.inFooter{background:#23211d url('../../img/inFooterBg.png') center top no-repeat}
.footerCon{padding:18px 150px;box-sizing: border-box;}
.inFooter_left{width: 300px;float: left}

.inFooter_right
{
  width: 600px;float: left;
}
.inFooter_right ul li{box-sizing: border-box;width: 33.3%;float: left;padding-left: 26px;color:#fff;}
.inFooter_right ul li .til{font-size:18px;margin-bottom: 26px;}
.bodyLi{
  border-left: 1px solid #666;
  padding-left: 30px;
}
.bodyLi p{margin-bottom: 20px;font-size: 16px;}
.bodyLi p a{color:#a9aaab;}








@media screen and (max-width: 1440px) and (min-width:1366px){

  .noU3dStartBox{
    // text-align: center;
  }
  .noU3dStartBox img{
    margin-left:15%;
    height: 600px;width: 600px;
  }

  .newIndex .newIndeWrap .footerFixed .footer_Left{width: 72%;}
  .diyCutomeImgBox{padding-left:12%;}
  .newIndex .joinBox{left: 5%;}
  .js_hideSe{height:300px;}
  .newIndex .newIndeWrap .footerFixed .footer_Left .sliderBtnBox{width: 10%;}
  .weitLoad{position: fixed;height: 100%;width: 100%;top: 0;z-index: 100000;padding-top: 26%;padding-left: 38.5%}
}


@media screen and (max-width: 1366px) {
  
  .noU3dStartBox{
    // text-align: center;
  }
  .noU3dStartBox img{
    margin-left:15%;
    height: 600px;width: 600px;
  }
  .rightFixedBox_f .childrenBox .brandBox ul{
    max-height: 400px;
  }
  .js_hideSe{height:200px;}
}
/*拖动条组件样式*/
.dg .cr.number{
  border: none !important;
  background: #fff;
  color: #333;
}
.dg .c{
  width: 80% !important;
}
.dg .property-name{
  width: 20% !important;
}
.dg .cr.number input[type=text]{
  color:#fff !important;
}
.dg .c input[type=text]{
  width: 20% !important;
  margin-top: 5px;
  margin-right: 3px;
  text-align: center;
  background: #fff !important;
  outline: none;
  border: 1px solid #bdbdbd !important;
  height: 15px;
}
.dg .c .slider{
  background: #b2b2b2 !important;
  cursor: ew-resize;
  border-radius: 5px;
  width: 76%;
  height: 9px;
  margin-top: 8px;
}
.dg .c .slider-fg{
  background: #ffb920 !important;
  border-radius: 5px;
  //width: 10%;
}