.product{width:100%;height:800px;background:url('/images/product-bg.png') center center no-repeat;padding-top:30px;}

.common-title{width:100%;text-align: center;height: 100px;padding-top: 20px;}
.common-title h1{font-size: 28px;font-weight: bold;color:#000;line-height: 50px;}
.common-title h3{font-size:12px; text-transform: uppercase;color:#999;}


.product-category{width: 1000px;height: 40px;display: flex;margin: 30px auto;justify-content: space-between;}
.cate{height:40px;line-height: 40px;flex: 0 1 280px;text-align: center;background-color:#d0d3d8;border-radius: 8px;}
.cate a{color:#121212;display: block;width: 100%;height: 100%;}
.cate:hover{background-color: #196efa;}
.cate:hover a{color:#fff;}

.item-list{display: grid;justify-content: space-between; 
    grid-template-columns: calc(100%/3) calc(100%/3) calc(100%/3);
    grid-template-rows: auto;
    grid-template-areas: 
    "header header header"
    "main main main"
    "footer footer footer";
	}
.item{display: flex; padding: 25px 30px; cursor: pointer;height: 240px;position: relative;border: 1px solid #eee;}
.item h1{font-size: 20px;font-weight: bold;color: #121212;letter-spacing: 2px;line-height: 50px;}
.item h3{font-size: 12px;color: #333;}
.item img{position: absolute;right:30px;top:60px;    width: 240px;}
.arrow{width: 30px;height: 30px;background: url('/images/item-arrow1.png');position: absolute;bottom: 20px;}

.item:hover{background: url('/images/item-bg.png') no-repeat center center;border: none;}
.item:hover h1{color: #fff;}
.item:hover h3{color: #fff;}
.item:hover .arrow{background: url('/images/item-arrow2.png');}

.show{width:100%;height:800px;background:url('/images/show-bg.jpg') center center no-repeat;padding: 30px;}
.show .common-title{}
.show .common-title h1{color: #fff;}
.show .common-title h3{color: #fff;}

.show-icon{display: flex;justify-content: space-between;width: 800px;margin: 50px auto;}
.icon{flex: 0 1 160px;text-align: center;}
.icon .icon1{background:url('/images/icon/polygon.png');width:76px;height: 88px;text-align: center;display: inline-block;line-height: 105px;}
.icon .icon1 img{
}
.icon .icon2{}
.icon .icon2 h3{
    color: #fff;
    font-weight: bold;
    line-height: 30px;
}
.icon .icon2 p{
    color: #e2efff;
    font-size: 12px;
}

.show-img-list{display: flex;justify-content: space-between;}

.show-img{flex: 0 1 26%;text-align: center;}

.show-img img{}
.show-img p{line-height: 60px;color: #fff;font-size: 16px;}

.about{width:100%;height:1100px;background:url('/images/about-bg.webp') center center no-repeat;padding:80px 60px 60px 60px;}

.about1{width: 600px;height: 530px;position: relative;}
.about1 h1{font-size: 50px;font-weight:bold;color: var(--main-color);}
.about1 h3{font-size:20px;color: #000;line-height: 40px;letter-spacing: 1px;}
.about1 p{font-size:14px;color: #666;margin-top: 30px;line-height: 30px;letter-spacing: 1px;}
.about1 a{width: 140px;height: 40px;background-color: var(--main-color);display: block;text-align: center;line-height: 40px;color: #fff;position: absolute;bottom: 0px;}

.news{width:100%;height: auto;padding:50px;}
.news-title{width: 100%;height: 50px;position: relative;padding-left: 20px;margin-bottom: 30px;}
.news-title::before{content: "";position: absolute;width:6px;height: 50px;background-color: var(--main-color);left:0;}
.news-title h1{font-size: 26px;}
.news-title h5{font-size: 12px;color:#999;}

.news-content{width: 100%;display: flex;justify-content: space-between;}
.news-left{flex:0 0 500px;}

.news-left1{width: 100%;height:300px;}
.news-left1 img{width:100%;height:100%;}
.news-left2{width:100%;height:200px;background-color:#f8f8f8;padding:10px 20px;}

.news-left2 h1{font-size:18px;line-height: 50px;}
.news-left2 p{font-size: 14px;line-height: 24px;}

.news-right{flex:0 0 650px;}
.news-title2{
    display: flex;
    height:60px;
}
.news-title2 h1{font-size:22px;font-weight: bold;}
.news-title2 h1 em{font-size:14px;color:#ccc;}

.news-con{
    padding: 0 01px;
}
.news-con-list{cursor: pointer;width: 100%;height: 145px;border-top: 1px solid #ccc;padding: 10px 20px;}
.news-con-list1{width: 100%;height:60px;display: flex;justify-content: space-between;}
.news-con-list1 h1{font-size:16px;flex: 1 0 auto;line-height: 60px;position: relative;padding-left: 15px;}
.news-con-list1 h1::before{content:"";width:5px;height: 5px;border-radius: 100%; background-color: #121212;position: absolute;top:46%;left:0px;}
.news-con-list1 span{
    line-height: 60px;
}
.news-con-list2{
    width: 100%;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M950.378747 494.018463 660.673599 198.314695c-9.380648-9.624195-24.707728-9.624195-34.138518 0-9.381671 9.576099-9.381671 25.222451 0 34.848693l248.494561 253.612115L88.338443 486.775502c-13.3214 0-24.142863 11.047614-24.142863 24.641213 0 13.597693 10.821463 24.645306 24.142863 24.645306l786.690176 0L626.535081 789.694603c-9.381671 9.603729-9.381671 25.248034 0 34.847669 4.76349 4.836145 10.939143 7.194866 17.116843 7.194866 6.1777 0 12.355399-2.405793 17.116843-7.194866l289.704125-295.723212c9.383718-9.602705 9.383718-25.244964 0-34.849716L950.378747 494.018463z'/%3E%3C/svg%3E") no-repeat right center;
}
.news-con-list2 p{
    line-height: 24px;
    font-size: 13px;
    width: 500px;
	letter-spacing:1px;
}

.news-con-list:hover{box-shadow: 0px 3px 6px #ccc;}