:root{
  --main:1400px;
 	--ft1: 1px;
	--ft2: 2px;
	--ft3: 3px;
	--ft4: 4px;
	--ft5: 5px;
	--ft6: 6px;
	--ft7: 7px;
	--ft8: 8px;
	--ft9: 9px;
	--ft10: 10px;
	--ft11: 11px;
	--ft12: 12px;
	--ft13: 13px;
	--ft14: 14px;
	--ft15: 15px;
	--ft16: 16px;
	--ft17: 17px;
	--ft18: 18px;
	--ft19: 19px;
	--ft20: 20px;
	--ft21: 21px;
	--ft22: 22px;
	--ft23: 23px;
    --ft24: 24px;
	--ft25: 25px;
	--ft26: 26px;
	--ft27: 27px;
	--ft28: 28px;
	--ft29: 29px;
	--ft30: 30px;
	--ft31: 31px;
	--ft32: 32px;
	--ft33: 33px;
	--ft34: 34px;
	--ft35: 35px;
	--ft36: 36px;
	--ft37: 37px;
	--ft38: 38px;
	--ft39: 39px;
	--ft40: 40px;
	--ft41: 41px;
	--ft42: 42px;
	--ft43: 43px;
	--ft44: 44px;
	--ft45: 45px;
	--ft46: 46px;
	--ft47: 47px;
	--ft48: 48px;
	--ft49: 49px;
    --ft50: 50px;
	--ft51: 51px;
	--ft52: 52px;
	--ft53: 53px;
	--ft54: 54px;
	--ft55: 55px;
	--ft56: 56px;
	--ft57: 57px;
	--ft58: 58px;
	--ft59: 59px;
	--ft60: 60px;
	--ft61: 61px;
	--ft62: 62px;
	--ft63: 63px;
	--ft64: 64px;
	--ft65: 65px;
  --ft66: 66px;
  --ft67: 67px;
  --ft68: 68px;
    
}




* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	min-width: 0;
	word-break: break-word;
	word-wrap: break-word;
}

ul,
dl,
dd,
dt,
h1,
h2,
h3,
h4,
h5,
h6,
form {
	padding: 0;
	margin: 0;
}

ul,
li {
	list-style: none;
}

img {
	border: none;
}

a {
	color: inherit;
	text-decoration: none;
	transition: all 0.5s;
}

.main {
	max-width: 90%;
	width: var(--main);
	margin: 0 auto
}
:target {
  scroll-margin-top: 120px;
}
.header{
    width: 100%;
background-color: rgba(16, 16, 16, 0.9);
font-size:var(--ft20);
font-weight: 400;
color: rgba(170, 170, 170, 1);
       position: sticky;
    top: 0;
    z-index: 999;
}
.header .neir {
        padding: 10px 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.header .logo{
       height: 84px; 
}
.header .logo img{
       width: 100%;
    height: 100%; 
}
.daohang {
	display: flex;
}
.daohang ul li{
    position: relative;
}
.daohang ul li.active::after {
    content: '';
    position: absolute;
     left: 40%;
  top: 100%;
 
    width: 30px; /* 默认无宽度 */
    height: 2px; /* 下划线粗细 */
    background: #ffffff; /* 下划线颜色 */
   
}
.header .neir ul {
	display: flex;
	padding: 0px 35px 0px 0px;
}

.header .neir ul li {
	padding: 0px 30px;
}
.nav_ce{
   color: rgba(255, 255, 255, 1); 
    text-decoration: underline;
  text-underline-offset: 8px; 
  text-decoration-thickness: 3px;
}
.header .neir ul li:hover {
	color:#ffffff;
}





.ss {
	padding: 5px 0;
}

.header .neir .sj {
	display: none;
	width: 30px;
}

.menu_button {
	cursor: pointer;
	width: 30px;
	height: 30px;
}

.menu_button:focus {
	outline: none;
}

.menu_button .line1 {
	stroke-dasharray: 60 207;
}

.menu_button .line2 {
	stroke-dasharray: 60 60;
}

.menu_button .line3 {
	stroke-dasharray: 60 207;
}

.menu_button .line {
	fill: none;
	stroke:#ffffff;
	stroke-width: 8;
	stroke-linecap: round;
	transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.menu_button.opened .line1 {
	stroke-dasharray: 90 207;
	stroke-dashoffset: -134;
}

.menu_button.opened .line2 {
	stroke-dasharray: 1 60;
	stroke-dashoffset: -30;
}

.menu_button.opened .line3 {
	stroke-dasharray: 90 207;
	stroke-dashoffset: -134;
}

.sjheader {
	display: none;
}
.footer{
    font-size: var(--ft36);
font-weight: 400;
letter-spacing: 0px;
color: rgba(255, 255, 255, 1);
   background: rgba(16, 16, 16, 1); 
}
.footer .main{
   padding: 32px 0px;
  display: flex;
    flex-direction: column;
    align-items: center;  
}
.footer-tub{
      display: flex;
    align-items: center;  
    
     list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* 自动换行 */
    gap: 5px; /* 图标之间的小间距 */
}
.footer-tub li{
padding: 2px 17px;
  
   /* 核心：一行5个 */
    flex: 0 0 17%;
    max-width: 17%;
    margin-bottom: 8px;
}
.footer-tub li img{
    height: 39px;
    width: 39px;
}
.footer-nr{
    font-size: var(--ft36);
font-weight: 400;
color: rgba(255, 255, 255, 1);
    text-align: center;
        margin: 40px 0px;
}
.footer-logo{
   height: 100px;
    width: 300px; 
}
.footer-logo img{
        width: 100%;
    height: 100%;
}
.product-banner,
.index-banner{
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    background: rgba(0, 0, 0, 0.5);
    position: relative;
   height: 550px;
    max-height: 90%;
}
.index-banner .main{
     position: absolute;
   display: flex;
  flex-direction: column;
    align-items: center;
    justify-content: center;
        z-index: 10;
            left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.index-banner img{
    width: 100%;
    height: 100%;
}
.index-banner .p1{
 font-size: var(--ft48);   
}
.index-banner .p2{
   font-size: var(--ft37); 
   margin: 15px 0px;
}
.index-banner .p3{
    font-size: var(--ft24);
}
.meicheng{
    position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 黑色+半透明 */
  z-index: 1; 
}
.product ul{
        padding: 0px 10px;
       display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px; 
   width: 100%;
}
.product ul li{
    position: relative;
        overflow: hidden;
}
.product ul li a{
    display: block;
     transition: all 0.3s ease;
}
.product ul li img:hover{
   transform: scale(1.1);
}
.product ul li img{
    width: 100%;
    aspect-ratio: 1 / 0.6;
    
      transition: all 0.3s;
}
.product ul p{
width: 100%;
    font-size: var(--ft38);
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    position: absolute;
    bottom: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.toptitle{
    font-size: var(--ft51);
font-weight: 600;
color: rgba(3, 3, 3, 1);
text-align: center;
margin: 20px 0px;
}
.toptitle1{
   font-size: var(--ft55);
font-weight: 600;
color: rgba(51, 51, 51, 1); 
}
.toptitle2{
    font-size: var(--ft25);
font-weight: 400;
color: rgba(51, 51, 51, 1);
text-align: center;
margin: 12px 0px;
}
.lanxian{
    width: 150px;
height: 4px;
opacity: 1;
background: rgba(51, 51, 51, 1);
}
.sun-nr1{
       display: flex;
    flex-direction: column;
    align-items: center;
    margin:14px 0px;
}
.sun-nr2{
        padding: 0px 10px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
        gap: 10px;
}
.sun-nr2 .tu{
    width: 100%;
   
     overflow: hidden;
      
}
.sun-nr2 li{
  
    
}

.sun-nr2 li img{
      width: 100%;
      transition:all 0.3s ease;
   aspect-ratio: 0.7 / 1;
    object-fit: cover;
   
}
.sun-nr2 li img:hover{
    transform: scale(1.1);
}
.sun-nr2 p{
    padding: 25px 20px;
    font-size:var(--ft30);
font-weight: 600;
color: rgba(51, 51, 51, 1);
text-align: left;
background: rgba(255, 255, 255, 1);
border-left: 1px solid rgba(207, 207, 207, 1);
}
.product-banner{
    width: 100%;
    position: relative;
}
.product-banner img{
        width: 100%;
    height: 100%;
}
.product-banner .main{
        z-index: 999;
    position: absolute;
    bottom: 50%;
    left: 12%;
    font-size:var(--ft68);
font-weight: 400;
color: rgba(255, 255, 255, 1);
text-align: left;
}
.productny-nr1  .zhenshangyin-slide img{
    height: 100%;
    width: 100%;
}
.productny .main{
    display: grid;
    grid-template-columns: 1fr 1fr;
        gap: 0px 78px;
        margin-bottom: 100px;
}
.ruturn a{
    font-size: 24px;
font-weight: 400;
color: rgba(14, 16, 16, 1);
      padding: 22px 0px;
 display: flex;   
     align-items: center;
}
.productny-nr2 .fenl{
    padding:21px 0px ;
    border-bottom:1px solid rgba(170, 170, 170, 1) ;
    cursor: pointer; /* 鼠标移上去显示手型，提升交互体验 */
}
.productny-nr2 .fenl .p1{
    font-size: var(--ft20);
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    padding: 10px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0; /* 清除默认边距 */
}
.productny-nr2 .fenl .p2{
width: 100%;
    font-size: var(--ft16);
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    display: none; /* 默认隐藏 */
    margin: 0; /* 清除默认边距 */
}
.productny-nr2 .fenl .p2 img{
width: 100%;
}
/* 点击激活后显示内容 */
.productny-nr2 .fenl.active .p2{
    display: block;
}
/* 图标旋转动画 */
.productny-nr2 .fenl svg{
    transition: all 0.3s;
}
.productny-nr2 .fenl.active svg{
   transform: rotate(-90deg);
}
.zhenshangyin-next,
.zhenshangyin-prev {
   
    background-color: rgba(170, 170, 170, 1) !important;
    
}
.zhenshangyin-component {
   
    cursor: pointer;
}