@charset "utf-8";
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
.daohang{
    height: 3em;
    font-size: clamp(1rem, 0.489rem + 1.45vw, 4rem);
    color: #000;
    text-align: center;
    line-height: 1em;
    margin-top:5em;
}
.daohang-container{
    width: 80%;
    background-color: #fff;
    margin: 0 auto;
    color: #000;
    font-size: 20px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border:1px solid black;
}
ul.daohang-title{
  display: flex;
    align-items: center;
    border-bottom: 2px solid #ccc;
    width: max-content;
   margin: auto;
}
ul.daohang-title li{
  line-height: 2em;
  font-size: clamp(0.7rem, 0.489rem + 1.05vw, 1.5rem);
  position: relative;
  cursor: pointer;
  transition: all .3s;
  padding-left: 0.5em;
  display: inline-block;
}
ul.daohang-title li:hover,
ul.daohang-title li.active{
    color: rgb(36, 123, 253);
}
ul.daohang-title li::before{
    content: '';
    display: block;
    width: 0;
    height: 4px;
    position: absolute;
    bottom: -2px;
    left: 50%;
    background-color: rgb(36, 123, 253);
    border-radius: 2px;
    transition: all .3s;
}
ul.daohang-title li:hover:before,
ul.daohang-title li.active:before{
    width: 100%;
    left: 0;
}
.dao-panel{
  display: none;
  font-size: clamp(0.7rem, 0.489rem + 1.05vw, 2rem);
    color: #ff0000;
}
.dao-panel.show{
    display: flex;
}
.dao-chanpin{
  display: inline;
}
.chanpin-div{
  background-color: #eaff2e;
  width: 100%;
  height: 100%;
}
.chanpin{
  display: none;
  background-color: #f6d6d6;
  width: 100%;
  font-size: clamp(0.7rem, 0.489rem + 1.05vw, 2rem);
 margin-top: 0.2em;
 margin-left: 0.2em;
}
.chanpin.show1{
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
.dao-content{
  width: 100%;
  height: 100%;
}
.tf>td{
width: 30%;
}
.tf{
  margin: auto;
}

.scj1{
  margin: auto;
  border-collapse: separate;
  border-spacing: 0.5em;
  width: 100%;
}
.scj1 td{
  /* border: 1px solid #ccc; */
  -webkit-box-shadow: 0 15px 30px rgb(0 0 0 / 10%);    
  /* //背影黑色阴影 */
 box-shadow: 0 15px 30px rgb(0 0 0 / 10%);  
 padding: 1em;
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
 margin: 0 auto;
width: 25%;
 position: relative;
 z-index: 1;
}
.scj1 img{
  margin: auto;
  width: 70%;
  -webkit-box-shadow: 0 15px 30px rgb(0 0 0 / 10%);    
  /* //背影黑色阴影 */
 box-shadow: 0 15px 30px rgb(0 0 0 / 10%); 
  
}
.chanpin-name{
 padding-top: 1em;
color: #fff;
}

.wuyong{
  color: #000000;
  font-size: clamp(1rem, 0.489rem + 1.25vw, 1.6rem);
  text-align: center;
  margin-top: 1em;
  line-height: 1.5em;
}
.flimg:hover{
  background-size: 105%;
  -webkit-box-shadow: 0 15px 30px rgb(0 0 0 / 10%);    
   /* //背影黑色阴影 */
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);       
   /* //背影黑色阴影 */
  -webkit-transform: translate3d(0, -2px, 0);         
      /* //向上移动2像素 */
  transform: translate3d(0, -2px, 0);  
}
.flimg{
  background-repeat: no-repeat;/*不平铺*/
  background-size: cover;
  padding-bottom: 130%;
  /* margin-top: 2em; */
  height: 80%;
}
.zx{
  background-repeat: no-repeat;/*不平铺*/
  background-size: cover;
  padding-bottom: 140%;
}
.zx:hover{
  background-size: 105%;
  -webkit-box-shadow: 0 15px 30px rgb(0 0 0 / 10%);    
   /* //背影黑色阴影 */
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);       
   /* //背影黑色阴影 */
  -webkit-transform: translate3d(0, -2px, 0);         
      /* //向上移动2像素 */
  transform: translate3d(0, -2px, 0);  
}
.zx-div{
  width: 80%;
  background-color: antiquewhite;
  -webkit-box-shadow: 0 15px 30px rgb(0 0 0 / 10%);    
  /* //背影黑色阴影 */
 box-shadow: 0 15px 30px rgb(0 0 0 / 10%);  
 padding: 1em;
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
 margin: 0 auto;
 position: relative;
 z-index: 1;
 background-repeat: no-repeat;/*不平铺*/
}
.zx-div img{
  margin: auto;
  width: 70%;
  -webkit-box-shadow: 0 15px 30px rgb(0 0 0 / 10%);    
  /* //背影黑色阴影 */
 box-shadow: 0 15px 30px rgb(0 0 0 / 10%);  
}
.zx-1{
  width: 33%;
  padding: 1em;
}
.zx-2{
  width: 80%;
  margin: 0 auto 0;
}
.zx-3{
  font-size: clamp(2rem, 0.489rem + 1.35vw, 5rem);
}
.hl{
  font-size: clamp(0.5rem, 0.489rem + 1.35vw, 1.5rem);
}