@charset "utf-8";
/* CSS Document */


.about-nav{ background-color: var(--mainblue); padding-top:5px;}
.about-nav ul{ display:flex;}
.about-nav ul li{}
.about-nav ul li a{display:block; padding:10px 20px; color:#fff; font-size:20px;}
@media only screen and (max-width: 950px) {
	.about-nav ul li a{font-size:16px; padding:5px 10px;}
}
.about-nav ul li.active a{ background-color:#fff; border-radius: 5px 5px 0 0; color:var(--mainblue);}

.single{ display:flex; padding:80px 0;justify-content: space-between;}
.single-left{ width:20%;}
.single-left ul{position: sticky; top:100px; max-height:calc(100vh - 180px); overflow-y:scroll;border-bottom:1px solid #ddd;/*border-top:1px solid #ddd;*/}
.single-left ul::-webkit-scrollbar{width:0px;}
.single-left ul .list-title{ background-color: var(--mainblue); text-align:center; font-weight:bold; color:#fff; font-size:24px; line-height:3em; border-radius: 10px 10px 0 0;}
.single-left ul li{}
.single-left ul li a{ display:block; border:1px solid #ddd; padding:10px 20px; border-bottom:none; font-size:16px; line-height:20px; color:#666;word-wrap: break-word;}
.single-left ul li.active a{ padding-left:45px; position:relative; color:var(--mainblue);}
.single-left ul li.active a:after{ position:absolute; content:"—"; left:20px; top:50%;transform: translateY(-50%);}
.single-left ul li:first-child a{ border-top:none;}
.single-left ul li:hover a{ background:#eee;}
.single-right{ width:76%;}
.single-date{font-size:16px; color:#aaa; margin-bottom:30px;}
.single-page{ /*display:flex;justify-content: space-between;*/}
.single-page a{display:block; font-size:16px; color:#999; line-height:32px; border-bottom:1px dotted #ddd; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; text-overflow: ellipsis; -webkit-box-orient: vertical;}
.single-page a:last-child{ border:none;}
.single-page-arrow{display:none;}

.single-other{ width:20%;}
.other-title{font-size:28px; font-weight:bold; margin-bottom:20px;}
.single-other ul{position: sticky; top:100px;}
.single-other ul li{ width:100%;}
.single-other ul li a{ display:block; border-bottom:1px solid #ddd; padding:10px 0; color:#aaa;}
.other-name{overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; text-overflow: ellipsis; -webkit-box-orient: vertical; font-size:20px; line-height:40px;}
.other-date{overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; text-overflow: ellipsis; -webkit-box-orient: vertical; line-height:40px;}
.other-desc{overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; text-overflow: ellipsis; -webkit-box-orient: vertical; font-size:18px; line-height:25px;}
.single-other ul li a:hover .other-name, .single-other ul li a:hover .other-desc{ color:#000;}

.sort-title{ font-size:36px; margin-bottom:30px; text-align: center;}

.abo-mb80{margin-bottom: 80px;}

.about{}
.about-flex{display:flex;justify-content: space-between; align-items: self-start;}
.about-flex-left{width:50%;}
.about-title{ margin-bottom:30px;}
.about-img{ margin-bottom:30px; width:45%; height:auto; object-fit: contain;border-radius: 10px; box-shadow: 1px 1px 5px #0006;}
.about-content{ font-size:18px; line-height:30px;}
.about-content p{ margin-bottom:10px;}
@media only screen and (min-width: 950px) {
	.about-img {position: sticky; top: 30px;}
}
@media only screen and (max-width: 950px) {
	.abo-mb80{ margin-bottom: 50px;}
	.about-flex{flex-wrap:wrap;}
	.about-flex-left, .about-img{width:100%;}
    .about-title{text-align: center;}
	.about-img{margin-top:20px;}
}





.culture { 
    padding:40px 0; 
    background-image:url(../image/culturebg.jpg); 
    background-position:center; 
    background-repeat:no-repeat; 
    background-size:cover;
}

.culture-box { 
    display:flex; 
    flex-wrap:wrap; 
    justify-content: center; 
    gap:5%;
}

.culture-box li {
    width:30%; 
    margin-bottom:5%;
    perspective: 1000px; 
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d; 
    transition: all 0.6s ease;
    min-height: 320px;
}

/* 正反面公共样式 */
.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
    border-radius: 15px;
    padding: 40px 20px;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 背面专属样式：默认先翻转180度藏到后面 */
.card-back {
    transform: rotateY(180deg);
}

/* 鼠标悬停时，内层容器翻转，正面因为背对屏幕自动隐藏，背面显现 */
.culture-box li:hover .card-inner {
    /*transform: rotateY(180deg);*/
}

/* --- 内容排版样式 --- */
.culture-ico { margin-bottom:15px;}
.culture-ico img { max-width:80px; display:block; margin:auto;}
.culture-txt { color:#fff; line-height:1.8; text-align:center;}
.culture-tit { font-size:20px; margin-bottom:15px;}
.culture-sub { font-size:16px;}
.culture-desc { color:#fff; text-indent:2em; line-height:1.8; text-align:left; width:100%;}

/* --- 移动端适配 --- */
@media only screen and (max-width: 950px) {
    .culture-box li { width:100%; }
    /* 移动端取消3D效果，改为正常文档流上下排列 */
    .card-inner {
        min-height: auto;
        transform: none !important;
    }
    .card-front, .card-back {
        position: relative;
        transform: none !important;
        /* 取消背面隐藏，让内容正常显示 */
        -webkit-backface-visibility: visible;
        backface-visibility: visible;
        height: auto;
		backdrop-filter: blur(0px);
    }
    .card-front { margin-bottom: 0px; border-radius: 15px 15px 0 0; padding-bottom:10px;}
	.card-back{ border-radius: 0 0 15px 15px; padding-top:10px;}
}







.history{}
.historyswiper{}
		.history .timeline-line {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--line-color);
            z-index: 0;
            transform: translateY(-50%);
        }

        .history .swiper-slide {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding-top: 0;
            opacity: 0.4; 
            transition: all 0.4s ease;
            cursor: pointer;
            position: relative;
        }

        .history .swiper-slide-active {
            opacity: 1;
            transform: scale(1.1); 
            z-index: 2;
        }

        .history .timeline-dot {
            width: 16px;
            height: 16px;
            background-color: #fff;
            border: 4px solid #ddd; 
            border-radius: 50%;
            margin: auto; 
            margin-bottom: 20px; 
            margin-top: 20px; 
            position: relative;
            z-index: 2;
            transition: all 0.3s ease;
            box-shadow: 0 0 0 4px #fff; 
        }

        .history .swiper-slide-active .timeline-dot {
            border-color: var(--mainred);
            transform: scale(1.3);
            box-shadow: 0 0 0 6px rgba(230, 0, 19, 0.1); 
        }

        .history .year-group {
            /*position: absolute;*/
            /*top: 20px; */
            text-align: center;
            width: 100%;
        }

        .history .desc-group {
            /*position: absolute;*/
            /*bottom: 40px; */
            text-align: center;
            width: 100%;
            padding: 0 10px;
        }

        .history .year-text {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-dark);
			margin-bottom:15px;
            transition: all 0.3s;
        }
		
		.history .sub-title {
			font-size:1em;
			transition: all 0.3s;
		}
		
        .history .swiper-slide-active .year-text {
            font-size: 2.5rem;
            color: var(--mainblue);
        }
		
		.history .swiper-slide-active .sub-title {
			font-size:1.5em; color:#666;
		}
		
        .history .desc-text {
            font-size: 1rem;
            color: var(--text-gray);
            line-height: 1.8;
            /*font-weight: 400;*/
            transition: all 0.3s;
            max-width: 90%;
            margin: 0 auto;
			/*margin-top:300px;*/
        }
		

        .history .swiper-slide-active .desc-text {
            color: #999;
            /*font-weight: 600;*/
        }
		
		
        .history .swiper-button-next,
        .history .swiper-button-prev {
            color: #ccc !important;
            transition: color 0.3s;
        }
        
        .history .swiper-button-next:hover,
        .history .swiper-button-prev:hover {
            color: var(--mainblue) !important;
        }

        @media (max-width: 768px) {
            .history .swiper {
                padding: 0 30px;
            }
            .history .timeline-dot {
                margin-top: 120px; 
            }
            .history .year-text {
                font-size: 1.2rem;
            }
            .history .swiper-slide-active .year-text {
                font-size: 2rem;
            }
            .history .desc-text {
                font-size: 0.9rem;
            }
        }

		.workshop-flex{}
		.workshop-flex ul{display: flex; flex-wrap:wrap; gap:20px 2%;}
		.workshop-flex ul li{width: 32%;}
		.workshop-flex ul li a{display: block; border-radius: 15px; overflow: hidden; box-shadow: 0 0 5px #0003; padding:15px;}
		.workshop-flex ul li:hover a{ box-shadow: 0 0 0px #0003;}
		.wor-img{ position: relative; padding-bottom: 60%;}
		.wor-img img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;}
		.wor-tit{font-size: 16px; text-align: center; margin-top: 15px; color: var(--mainblue);}
		.wor-more{margin-top: 30px;}
		.wor-more a{display: block; padding: 15px 25px 10px; width: max-content; margin: 0 auto; border-radius: 30px; font-size: 16px; color: #fff; background-color: var(--mainblue);}
		.wor-more a:hover{background-color: var(--mainblue-dark);}
		.hidden-item {
			display: none !important;
		}
		@media only screen and (max-width: 1024px) {
			.workshop-flex ul{gap:30px 5%;}
			.workshop-flex ul li{ width: 45%;}
		}
		@media only screen and (max-width: 768px) {
			.workshop-flex ul li{ width: 100%;}
		}






.photo{}
.photo ul{display:flex; flex-wrap:wrap; row-gap:50px;}
.photo ul li{width:calc(100% / 4);display:flex;}
.photo ul li a{display:flex; /*border:1px solid #eee;*/ flex-direction: column; width:100%;}
/*.photo ul li a .photok{ width: 100%; padding-bottom: 70%; overflow: hidden; position: relative; z-index: 0; flex-grow: 1; display: flex; justify-content: center; align-items: center;}
.photo ul li a .photok img{ width:100%; height:100%; max-height:none; max-width:none; object-fit: cover;position: absolute;top: 50%; left: 50%;transform: translate(-50%, -50%) scale(1);}
.photo ul li a:hover .photok img{transform: translate(-50%, -50%) scale(1.1);}*/
.photo ul li a .photok{overflow:hidden;}
.photo ul li a:hover .photok img{transform: scale(1.1);}
.photo ul li a .photo-name{ width:90%; padding:20px 0; margin:auto; border-top:1px solid #eee; text-align:center; font-size:18px; line-height:30px; color:#999;}
.photo ul li a:hover .photo-name{color:#000;}

.photo .nav2 ul{ display:block;}
.photo .nav2 ul li{ width:auto !important; display:inline-block; margin-right:20px; margin-bottom:15px;}
.photo .nav2 ul li a{ border:none; display:block; width:auto; font-size:16px; color:#333;}
.photo .nav2 ul li a:hover{color:var(--mainblue);}
.photo .nav2 ul li a.on{ color:var(--mainblue); text-decoration: underline;}


.news{ padding:80px 0;}
.news-title{ font-size:38px; font-weight:bold; margin-bottom:30px; display:block; width:100%; text-align:center; color:#333;}
.news-more{ display:block; padding:20px 0; background-color:var(--mainblue); color:#fff; width:260px; text-align:center; font-size:20px;border-radius: 50px; margin:50px auto 0;}
.news-more:hover{ background-color:var(--mainblue-dark);}
.news ul{ display:flex; flex-wrap:wrap;/*justify-content: space-between;*/ gap:20px;}
.news ul li{ width:calc((100% - 60px) / 4); /*display:flex;*/}
.news ul li .news-img{ position: relative; padding-bottom: 100%;}
.news ul li .news-img img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.news ul li .newslist{ display:block; width:100%; border-bottom:1px solid #eee; /*padding:30px;*/ background:#ffffff00;}
.news-date{ font-size:18px; color:#666; line-height:30px;}
.news-listname{ font-size:20px; color:#666; line-height:50px;overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; text-overflow: ellipsis; -webkit-box-orient: vertical;}
.news-desc{ font-size:16px; color:#666; line-height:30px; height:30px;overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; text-overflow: ellipsis; -webkit-box-orient: vertical;}
.news-view{ display:inline-block; float:right; /*margin-top:25px;*/padding:5px 30px; background-color:var(--mainblue); color:#fff; text-align:center;border-radius: 20px;-webkit-transition: all 0.5s;}
.news-view:hover{ background-color:var(--mainblue-dark);}
.news ul li:hover{}
.news ul li:hover .newslist{ background-color:#eee;}
.news ul li:hover .news-listname{ color:#000;}
.news ul li:hover .news-date, .news ul li:hover .news-desc{ color:#333;}
@media only screen and (max-width: 950px) {
	.news ul li{width:calc((100% - 40px) / 3);}
	.news-title{ font-size: 24px;}
}
@media only screen and (max-width: 576px) {
	.news ul{gap:20px}
	.news ul li{width:calc((100% - 20px) / 2);}
	.news-listname{ font-size: 18px;}
	.news-date{font-size: 14px;}
}


.contact{ padding:80px 0;}
.contact-title{font-size:36px; text-align:center; line-height:50px; margin-bottom: 50px;}
.contact-flex{display: flex; justify-content: space-between;    /*align-items: center;*/}
.contact ul{ /*display:flex; flex-wrap:wrap;justify-content: space-between; margin-bottom:80px;*/ width: 45%; margin-bottom:30px;}
.contact ul li{ /*width:calc(100% / 3); text-align:center; margin-top:80px;*/ display:flex; align-items: start;/*flex-direction: column;*/ padding-bottom: 5px; margin-bottom: 15px; border-bottom:1px solid #eee}
.contact ul li:last-child{ margin-bottom: 0;}
.contact ul li img{width:50px; display:block; margin-right:20px;}
.contact ul li p{ font-size:20px; font-weight:bold; line-height:30px; margin-bottom: 10px;}
.contact ul li span{font-size:18px; line-height:30px;}
.contact .mapDiv{ width: 50%;background-color: rgb(243, 241, 236);}
@media only screen and (max-width: 950px) {
	.contact-flex{flex-wrap:wrap;}
	.contact ul, .contact .mapDiv{ width: 100%;}
	.contact-title{ font-size: 24px;}
	.contact ul li p{ font-size: 18px; margin-bottom: 0;}
	.contact ul li span{ font-size: 14px;}
}




.product{}
.product-down{ margin-top:50px;}
.canshu{ margin-bottom:50px;}
.table-title{ font-size:30px; line-height:60px;}
.table-content{overflow-x: scroll;}
.table-content table{min-width:100%; font-size:18px; text-align:center;border-collapse: collapse;}
.table-content table caption{color: var(--mainblue); font-size: 20px; font-weight: bold; text-align: left; line-height: 1.5; padding: 10px;}
.table-content table td{border:1px solid #ddd;white-space: nowrap; padding:10px 5px;}
.table-content table th{ background:var(--mainblue); border:1px solid #fff;color:#fff; white-space: nowrap; padding:10px 5px;}
.table-content table .black th{ background:#999; color:#fff; border-color:#666;}
.more-pro{ margin-bottom:50px;}
.more-pro ul{ display:flex; flex-wrap:wrap;justify-content: space-between;}
.more-pro ul li{ width:23%;}
.more-pro ul li img{}
.more-pro ul li p{ text-align:center; font-size:18px; line-height:30px; padding:15px 5px; color:#333;}




.search-line{}
.search-line form{width:100%; display:flex;justify-content: space-between; border:1px #ddd solid; margin:150px 0 50px;}
.search-line form input, .search-line form button{ border:none; background:none; margin:0; padding:0;}
.search-line form input{ font-size:30px; line-height:60px; padding:0 20px;flex-grow:1; outline:none;}
.search-line form button{width:80px; text-align:center; background:#ddd;flex-shrink:0;}
.search-line form button img{display:block; margin:auto;}

.search-img{ display:inline-block; float:left; margin-right:20px; max-height:120px;}





.prolist-nav{ margin-bottom: 50px;}
.prolist-nav ul{ display: flex; flex-wrap:wrap; gap:20px;justify-content: center;}
.prolist-nav ul li{ width: calc((100% - 60px) / 4); min-width: max-content; border:1px solid #ddd; border-radius: 10px; padding: 15px;}
.prolist-nav ul li a{ display: flex; height:100%; align-items: center;}
.prolist-nav ul li .prolist-nav-img{ width: 60px; margin-right: 20px;}
.prolist-nav ul li .prolist-nav-img img{display: block; width: 50%; margin-left: auto;}
.prolist-nav ul li .prolist-nav-txt{ font-size: 20px;flex-grow:1; color: #333; text-align: center;}
.prolist-nav ul li:hover a .prolist-nav-txt {color: var(--mainblue);}
@media only screen and (max-width: 950px) {
	.prolist-nav ul li{ width: calc((100% - 20px) / 2);}
	.prolist-nav ul li .prolist-nav-img{ width: 30px; margin-right: 10px;}
	.prolist-nav ul li .prolist-nav-img img{ width: 100%;}
	.prolist-nav ul li .prolist-nav-txt{font-size: 16px;}
}



.process{ padding: 80px 0;}
@media only screen and (max-width: 950px) {
    .process {
        padding: 50px 0 !important;
    }
}