@charset "utf-8";
/*--------------------
栏目列表公共
--------------------*/

/*--------------------
 列表页公共部分
--------------------*/
.contentList{ clear:both; margin-top:50px; background:url(../img/index/map_transparent_dark.png) 80px center #fff no-repeat; background-size:contain; }
.contentList .contentListH{ width:100%; margin-bottom:32px; background:#fff;}
.contentList .contentListH:after{ display:block; content:""; width:100%; height:1px; margin-top:10px; background:#f0f0f0;}
.contentList .contentListH h2{ width:1200px; margin:0 auto; font-size:48px; line-height:60px; font-weight:700; color:#333;}
.contentList .contentListH h2 span{ font-size:36px;}
.contentList .contentListH .c{ text-align:center;}
/*详情小工具*/
.contentListH p{ text-align:center;}
.contentListH p span{ margin:0 10px; display:inline-block; line-height:34px; font-size:16px; color:#777777;}

/*--------------------
 关于我们（公司简介）
--------------------*/
.abbanner{ position:absolute; left:0; top:88px; width:100%;}
.abbanner img{ width:100%; height:auto;}
.abbanner .abadd{ position:absolute; top:150px; left:50%; width:1280px; margin-left:-640px;}
.abbanner .abadd span{ display:block; font-weight:900; color:#fff; line-height:64px; text-shadow:2px 2px 4px rgba(0, 0, 0, 0.2); font-size:50px; }
.about{ margin-top:700px; background:#f8f9fa; overflow:hidden;}
.about-h{ line-height:130px; font-size:34px; font-weight:bold; text-align:center;}
.about-jianjie{ position:relative; width:1280px; min-height:800px; margin:50px auto; overflow:hidden;}
/*介绍*/
.about-jianjie .b{ position:relative; margin:50px 0; padding:60px; box-sizing:border-box; background:#fff;}
.about-jianjie .b h3{ margin:10px 0 30px 0; font-size:80px; font-weight:800; color:#ca0006;}
.about-jianjie .b h3::before{ position:absolute; left:0; top:45px; content:""; display:block; height:80px; width:6px; background:#ca0006;}
.about-jianjie .b>div{ padding:50px 0; line-height:34px; font-size:18px; color:#666;}
.about-jianjie .b>div p{ padding-bottom:18px;}
/*广告*/
.about-jianjie .s::after{ content: "."; display: block; clear: both; height: 0;width:0;font-size:0;}
.about-jianjie .s li{ position:relative; float:left; width:25%; text-align:center; border-left: 1px solid #e6e6e6; box-sizing:border-box;}
.about-jianjie .s li p{ font-size:48px; font-weight:bold; color:#ca0006;}
.about-jianjie .s li p em{ font-style:normal; font-size:14px; color:#999;}
.about-jianjie .s li span{ padding:15px 0 0 0; display:block; font-size:16px; color:#666;}
.about-jianjie .s li:last-child{ border-right: 1px solid #e6e6e6;}
/*-----企业文化-----*/
.about-content{ margin-top:40px;}
.about-content::after{ content: "."; display: block; clear: both; height: 0;width:0;font-size:0;}
.about-left{ float:left; width:50%;}
.about-right{ float:right; width:626px;}
.about-content li{ display:flex; flex-wrap:wrap; margin-top:28px;}
.box {
	position:relative; width:626px; height:367px; border-radius:4px; overflow:hidden;
	box-shadow: 0 1.4px 1.7px rgba(0, 0, 0, 0.017), 0 3.3px 4px rgba(0, 0, 0, 0.024), 0 6.3px 7.5px rgba(0, 0, 0, 0.03), 0 11.2px 13.4px rgba(0, 0, 0, 0.036), 0 20.9px 25.1px rgba(0, 0, 0, 0.043), 0 50px 60px rgba(0, 0, 0, 0.06);
  }
.box h2, .box p {
	position:absolute; left:50px; color:#fff; z-index:2; width:86%;
	transition: opacity 0.2s, transform 0.3s;
  }
.box h2 { font-weight:bold; font-size:30px; margin-bottom:0; letter-spacing:1px;}
.box p { bottom:0; font-size:14px; letter-spacing:1px;}
.box p span{ display:block;}
.box p span::before{ content:"•"; color:#ca0006; font-size:16px; padding-right:5px;}
.box:hover { transition: all .3s ease-in-out;}
.box:hover:before { transition: all .3s ease-in-out;}
.box img { position:relative; width:100%; height:100%; z-index:1; transition: all .3s ease-in-out;}
.box img:hover { transition: all .3s ease-in-out;}
.box img:after {
	content: '';
	position: absolute;
	background-color: rgba(0, 0, 0, 0.6);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
  }
.box img:hover { transition: all .3s ease-in-out;}
.vintage h2 { top:60%; transform: translate3d(0, 60px, 0);}
.vintage p {
	opacity:0;
	bottom:0;
	transform:translate3d(0, -10px, 0);
	font-size:14px;
	letter-spacing:1px;
  }
.vintage p.row2 span{ width:49%; display:inline-block;}
.vintage:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, 0.8) 75%);
	z-index: 2;
	bottom: -100%;
	left: 0;
  }
.vintage:hover:before { bottom: 0;}
.vintage:hover h2 { bottom: 40px; transform: translate3d(0, 20px, 0);}
.vintage:hover p { opacity: 1; transform: translate3d(0, -30px, 0);}  
/*--------------------
 关于我们（公司环境）
--------------------*/
.aboutPicList{ padding-bottom:32px; max-width: 1200px; margin: 0 auto; }
.aboutPicList>h3{ font-size:24px; font-weight:700; color:#333;}
.aboutPicList ul{
    /* Flex布局设置 */
    display: flex;
    flex-wrap: wrap;   /* 允许换行 */
    align-content: flex-start; /* 多行对齐方式 */
    gap: 24px;        /* 子项间距24px */
    /* 内边距可以按需添加 */
    padding: 20px 0;
    box-sizing: border-box;
}
.aboutPicList ul li{
    /* 每个子项宽度计算：(1200px - 24px间隙) / 3 = 388px */
    width: calc((100% - 24px * 2) / 3);
    /* height: calc((550px - 24px - 40px) / 2); 高度计算，考虑gap和padding */
}
.aboutPicList ul li a{ display:block; width:100%; transition: 0.15s ease-in-out; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06); background:#fff;}
.aboutPicList ul li a:hover{ transform: translateY(-10px) scale(1.02);}
.aboutPicList ul li a span{ display:block; width:100%; height:255px; overflow:hidden; }
.aboutPicList ul li a span img{ width:100%; height:auto;}
.aboutPicList ul li a p{ padding:0 15px; line-height:50px; font-size:14px;}

/*--------------------
产品展示-列表
---------------------*/
.picList{ padding-bottom:32px; max-width: 1200px; margin: 0 auto; }
.picList>h3{ font-size:24px; font-weight:700;}
.picList ul{
    /* Flex布局设置 */
    display: flex;
    flex-wrap: wrap;   /* 允许换行 */
    align-content: flex-start; /* 多行对齐方式 */
    gap: 24px;        /* 子项间距24px */
    /* 内边距可以按需添加 */
    padding: 20px 0;
    box-sizing: border-box;
}
.picList ul li{
    /* 每个子项宽度计算：(1200px - 24px间隙) / 3 = 388px */
    width: calc((100% - 24px * 2) / 3);
    /* height: calc((550px - 24px - 40px) / 2); 高度计算，考虑gap和padding */
}
.picList ul li a{ display:block; width:100%; transition: 0.15s ease-in-out; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06); background:#fff;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.picList ul li a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(231, 33, 24, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}
.picList ul li a img{ width:100%; height:auto;}
.picList ul li a span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 20px);
    z-index: 2;
    color: white;
    font-size: 20px;
    font-weight: bold;
    opacity: 0;
    transition: all 0.4s ease;
    text-align: center;
    width: 100%;
    padding:0 20px;
    box-sizing: border-box;
    line-height:28px;
}
.picList ul li a span:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}
/* 悬停效果 */
.picList ul li a:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.picList ul li a:hover::after {
    opacity: 1;
}

.picList ul li a:hover span {
    opacity: 1;
    transform: translate(-50%, -50%);
}
/*--------------------
产品展示-详情
---------------------*/
.picArt{ clear:both; padding:50px 0; }
.picArtH{ display:flex; gap: 30px; /* 列之间的间距 */ max-width:1200px; margin:0 auto;}
.picArtH>div{ flex: 1; /* 两列平均分配宽度 */}
.picArtImg{}
.picArtImg img{ width:100%; height:auto;}
.picArtText{}
.picArtText h2{ line-height:40px; font-size:32px; font-weight:700; color:#333333;}
.picArtText ul{ padding:15px 0;}
.picArtText ul li{ line-height:30px; font-size:16px; color:#777777}
.picArtText ul li span{ color:#333333;}
.picArtText ul li.s{ margin:20px 0; padding:15px; font-size:16px; border:1px dashed #ddd; border-radius:8px;}
/*-----查看画册-----*/
.picBtn .h{ font-size:0;}
.picBtn a, .picBtn .h span{ display:inline-block; padding:10px 20px; color:#fff; font-size:16px;}
.picBtn .h span{ padding:10px 80px; background:#5b5b5b;}
.picBtn .h a.a1{
    color:#ececec;
    background: linear-gradient(to right, #222222 50%, #333333 50%);
    background-size: 200% 100%; /* 背景宽度扩大2倍 */
    background-position: right bottom; /* 初始位置在右侧 */
    transition: background-position 0.3s ease; /* 过渡动画 */
}
.picBtn .h a.a1:hover{ background-position: left bottom; /* 悬停时背景左移 */}
/*下载画册*/
.picBtn .h a.a2{ 
    color:#ececec;
    background: linear-gradient(to right, #db2512 50%, #e74c3c 50%);
    background-size: 200% 100%; /* 背景宽度扩大2倍 */
    background-position: right bottom; /* 初始位置在右侧 */
    transition: background-position 0.3s ease; /* 过渡动画 */
}
.picBtn .h a.a2:hover{ background-position: left bottom; /* 悬停时背景左移 */}
/*-----详情内容------*/
.picArtB{ max-width:1200px; margin:30px auto;}
.picArtB>h3{ line-height:40px; font-size:22px; border-bottom:2px solid #5b5b5b}
.picArtB>div, .picArtB>h4{ padding:20px 0 0 0;}
.picArtB>div, .picArtB>ul, .picArtB>h4{ font-size:16px; color:#333; line-height:35px;}

/*--------------------
 喷涂工艺
--------------------*/
.gongyi{ max-width:1200px; margin:0 auto 50px auto;}
.gongyi .t{ line-height:30px; text-indent:34px; font-size:16px; color:#777;}
.gongyi .t p{ padding:10px 0;}
.gongyi .b{}
.gongyi .b>h3{ padding:10px 0; font-size:32px; line-height:50px;}
.gongyi .b>h3:before{ display:inline-block; content:""; width:5px; height:30px; margin-right:10px; vertical-align:middle; background:#333;}
.gongyi .b>div{ min-height:1000px;
background-image: url('../img/listart/gongyi/gongyi.jpg');
background-size: 100% auto; /* 宽度100%，高度自动 */
background-repeat: no-repeat;
}
.gongyi .b ul{ clear:both; display:flex; }
.gongyi .b ul li{flex:1; /* 等分剩余空间 */ padding:0 20px; box-sizing:border-box; text-align:center;}
.gongyi .b ul li h4{ font-size:24px; color:#333;}
.gongyi .b ul li p{ padding-top:10px; font-size:16px; line-height:25px; color:#777;}
.gongyi .b>div ul:nth-child(1){ padding-top:200px;}
.gongyi .b>div ul:nth-child(2){ padding-top:270px;}
.gongyi .b>div ul:nth-child(3){ padding-top:310px;}

/*--------------------
 新闻资讯
--------------------*/
.newsList{ width:1200px; padding-top:10px; margin:0 auto;}
.newsList .mk{ position:relative; display:block; padding:20px 0; border-bottom:2px solid #f0f0f0;}
.newsList .mk:hover .mk-text h3{ color:#e72118;}
.newsList .mk:after{ position:absolute; left:0; bottom:0; content: "."; display:block; clear:both; width:100%; height:2px;
background: linear-gradient(90deg, #e72118, #333333);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.newsList .mk:hover::after{ transform: scaleX(1);}/* 悬停时恢复原宽度 */
.newsList .mk:not(:hover)::after {
/* 鼠标移出时从右到左收缩 */
transform-origin: right;
transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.newsList .mk .mk-text{ display:inline-block; width:80%;}
.newsList .mk .mk-text h3{ line-height:35px; font-size:24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;/*超出点点隐藏*/   
	transition: all .3s;
    -webkit-transition: all .3s;}
.newsList .mk .mk-text p{ padding:10px 0; font-size:14px; color:#979797;}
.newsList .mk .mk-text p span{ display:inline-block; padding-left:20px;}
.newsList .mk .mk-text p span:first-child{ background: url(../img/listart/icon_08.png) 0 3px no-repeat;}
.newsList .mk .mk-text p span:last-child{ margin-left:20px; padding-left:25px; background: url(../img/listart/icon_09.png) 0 3px no-repeat;}
.newsList .mk .mk-text>span{ line-height:32px; font-size:16px; color:#666;}
.newsList .mk .mk-text em{ display:block; width:120px; margin:20px 0; line-height:38px; text-align:center; color:#fff; font-style:normal; background:#333333; transition:all 0.3s linear;}
.newsList .mk:hover .mk-text em{ background:#e72118;}
.newsList .mk .mk-img{ float:right; display:inline-block; width:200px; height:133px; overflow:hidden;}
/*图片放大缩小*/
.newsList .mk .mk-img img{ width:100%; height:100%; /*object-fit:cover;*/
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	filter: scale(1);
	filter: transform;
	transition: all 0.5s ease 0s;
	-webkit-transform: all 0.5s ease 0s;}
.newsList .mk:hover .mk-img img{
	-webkit-transform: scale(1.10);
    -moz-transform: scale(1.10);
    -ms-transform: scale(1.10);
    -o-transform: scale(1.10);
    filter: scale(1.10);
    filter: transform;
    transition: all 0.5s ease 0s;
    -webkit-transform: all 0.5s ease 0s;
    cursor: pointer;
}
/* 文章详情 */
.newsArt{ max-width:1200px; margin:0 auto; padding:50px 0; font-size:18px; line-height:36px; color:#333333;}

/*--------------------
翻页
---------------------*/
.page{ margin:20px 0; font-size:14px;}
.page ul { text-align:center; font-size:0;}
.page ul li{ display:inline-block; margin:0 4px; font-size:16px;}
.page ul li a{ display:block; padding:10px 20px; border:1px solid #dcdcdc; transition:all 0.3s linear;}
.page ul li.active a, .page ul li a[href]:hover{ padding:10px 20px; border:1px solid #e72118; color:#e72118;}
.page span{ margin:0 2px; line-height:28px; vertical-align:middle; }
.page span strong{ margin:0 2px;}
/*检索无结果*/
.noSearch{ padding-top:120px; font-size:18px; color:#999; text-align:center; line-height:50px; background:url("../img/listart/wu.png") no-repeat center center; opacity:0.8}

/*--------------------
留言反馈
---------------------*/
.guestbook{ max-width:1200px; margin:0 auto;}
.guestbook h3.h{ padding:20px 0; font-size:32px; font-weight:700; color:#333;}
.guestbook ul{ display:flex; flex-wrap:wrap; /* 允许换行 */}
.guestbook ul li{ flex: 0 0 calc(50%); /* 两列布局（减去 gap 的一半） */ padding:10px 0;}
.guestbook ul li input{ width:100%; box-sizing:border-box; padding:0 10px; line-height:52px; border:1px solid #e0e0e0; font-size:16px; color:#333;
outline:none;
transition:border-color 0.3s ease-in-out; /* 添加过渡效果 */
}
.guestbook ul li input:focus, .guestbook ul li textarea:focus{ border-color:#ff0000; animation: pulse 0.5s ease-in-out; /* 添加脉冲动画 */}
.guestbook ul li input:placeholder, .guestbook ul li textarea:placeholder{ color:#777;}
.guestbook ul li.t{ flex: 0 0 calc(100%);}
.guestbook ul li textarea{ width:100%; font-family:"微软雅黑"; box-sizing:border-box; padding:0 10px; line-height:35px; border:1px solid #e0e0e0; font-size:16px; color:#333;
outline:none;
transition:border-color 0.3s ease-in-out; /* 添加过渡效果 */}
.guestbook ul li.b{ flex: 0 0 calc(100%);}
.guestbook ul li.b button{ box-sizing:border-box; padding:0 10px; line-height:52px; border:1px solid #e0e0e0; font-size:16px; color:#333;
    width:500px;
    font-size:18px;
    cursor:pointer;
    color:#ececec;
    background: linear-gradient(to right, #222222 50%, #333333 50%);
    background-size: 200% 100%; /* 背景宽度扩大2倍 */
    background-position: right bottom; /* 初始位置在右侧 */
    transition: background-position 0.3s ease; /* 过渡动画 */
}
.guestbook ul li.b button:hover{ background-position: left bottom; /* 悬停时背景左移 */}
/* 脉冲动画 */
@keyframes pulse {
    0% {
        border-color: #ccc;
    }
    50% {
        border-color: #ff0000;
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.5); /* 可选：添加发光效果 */
    }
    100% {
        border-color: #ff0000;
    }
}

/*--------------------
联系我们
---------------------*/
.contact{ max-width:1200px; margin:0 auto 50px auto;}
/*左边*/
.contact dl{ position:relative; margin:0 0 30px 0; padding:20px 0 10px 0; border-bottom:1px solid #ececec;}
.contact dl .m{ position:absolute; right:50px; top:50px; display:block; content:""; width:344px; height:344px;}
.contact dl dt{ font-size:32px; font-weight:700; color:#333;}
.contact dl dd{ padding:30px 0 30px 70px; font-size:16px; color:#666;}/*border-bottom:1px solid #ececec;*/
.contact dl dd.icon1{ background:url(../img/listart/lianxi/20170426162559_7656.png) left no-repeat;}
.contact dl dd.icon2{ background:url(../img/listart/lianxi/20170426162559_8125.png) left no-repeat;}
.contact dl dd.icon3{ background:url(../img/listart/lianxi/20170426162559_8281.png) left no-repeat;}
.contact dl dd span{ display:block; line-height:30px;}
.contact .b{ line-height:35px; font-size:16px; color:#333333;}
.contact .b .h{ font-weight:700;}
.contact .b .w{ padding-bottom:20px;}
.contact .b .w span{ display:block;}

/*--------------------
其它
---------------------*/
/*第三方弹框插件样式优先级*/
#spotlight .header::after{ display:none;}
#spotlight .footer{ height:auto;}
#spotlight .page{ margin:auto;}