body,
#app {
  width: 100%;
}


/* 覆写 头尾 */
.header_init,
.footer_init {
  position: sticky;
  left: 0;
  z-index: 150;
  width: 0vw;
}

#footerNav,
header,
#nav_box {
  width: calc(100vw - 20px) !important;
}




/* 如果是多列模式 */
#footerNav.showcaseAction,
header.showcaseAction,
#nav_box.showcaseAction {
  width: calc(100vw - 20px) !important;
  position: -webkit-sticky;
  position: sticky;
  /* left: 20px; */
} 


.table-module>.s-btn {
  margin: 0 0 10px 25px;
  position: -webkit-sticky;
  position: sticky;
  left: 20px;
}



/* 表格重置 */
.table {
  flex: 1;
  width: 100%;
  background-color: #fff;
}

.table table {
  min-width: 100%;
}

/* 表头 */
.table table thead tr th {
  background-color: #fff;
  box-shadow: inset 0 0 #d4d4d4, inset 0 0 #d4d4d4, inset 0 -1px #d4d4d4;
  font-size: 12px;
  font-weight: 700;
  padding: 30px 10px 12px;
  /* 吸顶 */
  position: sticky;
  top: -1px;
  white-space: nowrap;
  z-index: 5;
}

/* 型号表头 */
.table table thead tr .productBox {
  box-shadow: inset 0 0 #d4d4d4, inset -1px 0 #d4d4d4, inset 0 -1px #d4d4d4;
  left: 0;
  z-index: 7;
}


/* 单元格 */
.table table tbody tr td {
  border-bottom: 1px solid #e9e9e9;
  font-size: 12px;
  padding: 8px 10px;
  width: 200px;
}

.table table tbody tr:hover {
  background-color: #cccccc1a;
}

/* 型号单元格 */
.table table tbody tr .productBox {
  background-color: #fff;
  box-shadow: inset 0 0 #d4d4d4, inset -1px 0 #d4d4d4, inset 0 0 #d4d4d4;
  left: 0;
  position: sticky;
  z-index: 6;
}

.table table tbody tr td .product {
  align-items: center;
  display: flex;
  width: 220px;
}

/* 型号图片 */
.table table tbody tr td .product .img {
  height: 40px;
  margin-right: 10px;
  width: 40px;
}

/* 型号信息 */
.table table tbody tr td .product .info {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 55px;
  justify-content: center;
}

.table table tbody tr td .product .info p {
  color: #666;
  width: unset;
}

/* 型号链接 */
.table table tbody tr td .product .info a {
  color: #333;
  font-size: 13px;
  margin-bottom: 5px;
  text-decoration: underline;
}

/* 型号其他描述 */
.table table tbody tr td .product .info p.desc {
  color: var(--color9);
}

/* Datasheet pdf */
.table table tbody tr td .pdf {
  display: inline-block;
  width: 80px;
  color: var(--color6);
}

.table table tbody tr td .pdf:hover {
  text-decoration: underline;
}

/* 如果有pdf */
.table table tbody tr td .pdf .iconfont-ut.active {
  color: var(--danger-color);
}

.table table tbody tr td .pdf .iconfont-ut {
  font-size: 18px;
}

/* Datasheet pdf */


/* Pricing */
/* 如果没有价格 或者其他p */
.table table tbody tr td>p {
  width: 100px;
  word-break: break-all;
}

/* 每项价格 */
.table table tbody tr td .price li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
}

.table table tbody tr td .price li span {
  display: inline-block;
  text-align: right;
}

.table table tbody tr td .price li span:first-child {
  width: 30px;
  margin-right: 3px;
}

/* 查看所有价格 */
.table table tbody tr td .price a {
  color: var(--main-color);
}

/* Pricing */

/* Qty */

/* 输入框 */
input {
  background-color: transparent;
  outline: none;
}

.table table tbody tr td .quantity input {
  border: 1px solid #e9e9e9;
  border-radius: 2px;
  height: 24px;
  margin-bottom: 6px;
  text-align: center;
  width: 80px;
}

/* 添加购物车按钮 */
.table table tbody tr td .quantity button {
  height: 24px;
  width: 80px;
}

button {
  background: var(--main-color);
  border-radius: 2px;
  color: #fff;
  font-family: unset;
  cursor: pointer;
}

/* 询价按钮 */
button.warning {
  background: var(--warning-color);
}

/* Qty */


/* rohs */
.table table tbody tr td .rohs {
  font-size: 25px;
}

/* 如果激活 */
.table table tbody tr td .rohs.active {
  color: var(--success-color);
}

/* rohs */




/* 多列模式 */

.showcase {
  position: sticky;
  /* width: 0; */
  left: 1.5vw;
  width: 0;
  z-index: 100;
}

.showcase>ul {
  display: flex;
  flex-wrap: wrap;
  width: 96vw;
}

.showcase>ul>li {
  border-radius: 4px;
  height: 260px;
  width: 20%;
}

/* 每组 */
.showcase>ul>li>div {
  align-items: center;
  background-color: #fff;
  border: 1px solid hsla(0, 0%, 83%, .3);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  position: relative;
  z-index: 1;
}

/* 每组经过 */
.showcase>ul>li>div:hover {
  border-radius: 4px;
  box-shadow: 0 0 7px 1px #00000026;
}

.showcase>ul>li:hover>div {
  z-index: 2;
}

/* 每项图片 */
.showcase>ul>li>div .img {
  margin: 20px 0;
  background-color: #fff;
  height: 80px;
  width: 80px;
}

/* 型号信息 */
.showcase>ul>li>div .info {
  width: 100%;
}

.showcase>ul>li>div .info a {
  color: var(--color3);
  margin-bottom: 8px;
  text-decoration: underline;
}

.showcase>ul>li>div .info p {
  color: var(--color6);
  margin-bottom: 8px;
}


.showcase>ul>li>div .info span {
  color: var(--color9);
  height: 28px;
  margin-bottom: 8px;
}


/* 库存信息 */
.showcase>ul>li>div .stock {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.showcase>ul>li>div .stock p {
  color: var(--danger-color);
}

.showcase>ul>li>div .stock span {
  color: var(--color6);
}

.showcase>ul>li>div .stock span i {
  color: var(--danger-color);
  margin-left: 6px;
}


/* 默认不显示下方box */
.showcase>ul>li>div .hoverBox {
  background-color: #fff;
  border-top: 1px solid #d4d4d4;
  display: none;
  margin-top: 16px;
  width: 100%;
}

.showcase>ul>li:hover>div .hoverBox {
  display: block;
}

.showcase>ul>li>div .hoverBox>div {
  display: flex;
  justify-content: space-between;
}

/* 输入框 */
.showcase>ul>li>div .hoverBox>div input {
  border: 1px solid #e9e9e9;
  border-radius: 2px;
  height: 36px;
  opacity: 1;
  padding-left: 10px;
  width: 126px;
}

/* 按钮 */
.showcase>ul>li>div .hoverBox>div .btn {
  height: 36px;
  margin: 0;
  width: 90px;
  border-radius: 4px;
}

.showcase>ul>li>div .hoverBox>ul {
  padding-top: 16px;
}

.showcase>ul>li>div .hoverBox>ul li {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.showcase>ul>li>div .hoverBox .desc {
  font-size: 12px;
  line-height: 20px;
  margin-bottom: 10px;
  padding-top: 16px;
}

/* 多列模式 */

/* 模式切换 */
.viewModeTemp {
  position: sticky;
  width: 0;
  left: 1.5vw;
}

.viewMode {
  background-color: #fff;
  justify-content: space-between;
  padding: 6px 16px;
  width: 96vw;
  padding: 10px 20px;
  margin-bottom: 6px;
  display: flex;
}

.viewMode>div .iconfont-ut {
  color: #d4d4d4;
  cursor: pointer;
  font-size: 20px;
  margin-left: 10px;
}

.viewMode>div .iconfont-ut.active {
  color: var(--main-color);
}


/* 结果数量 */
.viewMode .count {
  color: var(--main-color);
  margin-right: 6px;
}

@media screen and (max-width: 1024px) {
  .header_init,
  .footer_init {
    width: 100%;
  }

  .viewModeTemp {
    display: none;
  }
}