@charset "utf-8";
/* CSS Document - 产业发展（枣庄国家高新区） */

/* ===================== 栏目标题 ===================== */
.cyfz-section { width: 100%; }
.cyfz-section + .cyfz-section { margin-top: 22px; }
.cyfz-section-news + .cyfz-section-news { margin-top: 14px; }
.cyfz-title { padding-bottom: 15px; border-bottom: 1px solid #e2e2e2; margin-bottom: 21px; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 20px; line-height: 20px; font-weight: bold; color: #000; }

/* ===================== 一、发展概况 · 横向手风琴 ===================== */
.cyfz-accordion { position: relative; width: 1160px; height: 435px; margin: 0 auto; overflow: hidden; }
.cyfz-accordion .swiper-wrapper { height: 435px; }
.cyfz-accordion .cyfz-accordion-item { position: relative; width: 100px; height: 435px; overflow: hidden; background: #036eab; cursor: pointer; -webkit-transition: width .5s ease; transition: width .5s ease; }
.cyfz-accordion .cyfz-accordion-item.is-active { width: 650px; cursor: default; }
.cyfz-accordion-item img { display: block; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; }
.cyfz-accordion-item img:hover { opacity: 1; filter: none; }
.cyfz-accordion-item .cyfz-mask { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; background: rgba(3, 110, 171, .7); }
.cyfz-accordion-item:nth-child(even) .cyfz-mask { background: rgba(57, 170, 235, .7); }
/* 收起状态：竖排标题 */
.cyfz-accordion-item .cyfz-vertical { position: absolute; z-index: 3; left: 50%; top: 57px; margin-left: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; letter-spacing: 3px; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 24px; line-height: 27px; font-weight: bold; color: #fff; white-space: nowrap; }
.cyfz-accordion-item.is-active .cyfz-vertical { display: none; }
/* 展开状态：标题 + 正文 */
.cyfz-accordion-item .cyfz-panel { position: absolute; z-index: 4; left: 0; right: 0; bottom: 62px; padding: 0 34px; visibility: hidden; opacity: 0; color: #fff; -webkit-transition: opacity .4s ease .15s; transition: opacity .4s ease .15s; }
.cyfz-accordion-item.is-active .cyfz-panel { visibility: visible; opacity: 1; }
.cyfz-panel .cyfz-rule { display: block; width: 50px; height: 2px; margin-bottom: 18px; overflow: hidden; text-indent: -99px; background: #fff; }
.cyfz-panel h3 { font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 24px; line-height: 32px; font-weight: bold; color: #fff; }
.cyfz-panel p { margin-top: 9px; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 14px; line-height: 28px; color: #fff; text-align: justify; text-justify: inter-ideograph; }

/* ===================== 二、产业动态（灰底双栏列表） ===================== */
.cyfz-news { padding: 22px 23px; background: #f1f1f1; }
.cyfz-news-title { height: 40px; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 20px; line-height: 40px; font-weight: bold; color: #000; }
.cyfz-news-list { margin-top: 10px; overflow: hidden; }
.cyfz-news-list li { position: relative; float: left; width: 48%; box-sizing: border-box; height: 40px; line-height: 40px; padding-left: 12px; }
.cyfz-news-list li:nth-child(even) { float: right; }
.cyfz-news-list li::before { content: ""; position: absolute; left: 0; top: 18px; width: 4px; height: 4px; overflow: hidden; background: #999; }
.cyfz-news-list li a { display: block; float: left; max-width: 420px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; line-height: 40px; color: #333; }
.cyfz-news-list li a:hover { color: #036eab; }
.cyfz-news-list li span { float: right; font-size: 14px; line-height: 40px; color: #999; }

/* ===================== 三、企业风采 · 滚动照片（不可点击） ===================== */
.cyfz-show { position: relative; width: 1160px; height: 267px; margin: 0 auto; }
.cyfz-show-stage { position: relative; width: 1160px; height: 267px; }
.cyfz-show-item { position: absolute; left: 50%; top: 50%; width: 400px; height: 267px; margin: -133px 0 0 -200px; box-sizing: border-box; border: 2px solid #fff; overflow: hidden; z-index: 1; opacity: 0; cursor: default; -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1); -webkit-transition: -webkit-transform .5s ease, opacity .4s ease; transition: transform .5s ease, opacity .4s ease; }
.cyfz-show-item img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; }
.cyfz-show-item img:hover { opacity: 1; filter: none; }
.cyfz-show-item.pos-0 { z-index: 5; opacity: 1; -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1); }
.cyfz-show-item.pos-m1 { z-index: 4; opacity: 1; -webkit-transform: translateX(-227px) scale(.75); transform: translateX(-227px) scale(.75); }
.cyfz-show-item.pos-p1 { z-index: 4; opacity: 1; -webkit-transform: translateX(227px) scale(.75); transform: translateX(227px) scale(.75); }
.cyfz-show-item.pos-m2 { z-index: 3; opacity: 1; -webkit-transform: translateX(-390px) scale(.65); transform: translateX(-390px) scale(.65); }
.cyfz-show-item.pos-p2 { z-index: 3; opacity: 1; -webkit-transform: translateX(390px) scale(.65); transform: translateX(390px) scale(.65); }
.cyfz-show-item.pos-m3,
.cyfz-show-item.pos-p3 { z-index: 1; opacity: 0; -webkit-transition: opacity .4s ease; transition: opacity .4s ease; }
.cyfz-show-item.pos-m3 { -webkit-transform: translateX(-390px) scale(.65); transform: translateX(-390px) scale(.65); }
.cyfz-show-item.pos-p3 { -webkit-transform: translateX(390px) scale(.65); transform: translateX(390px) scale(.65); }
.cyfz-arrow { position: absolute; z-index: 10; top: 50%; width: 24px; height: 24px; margin-top: -12px; padding: 0; border: 0; border-radius: 50%; background: #036eab; cursor: pointer; -webkit-transition: background .3s ease; transition: background .3s ease; }
.cyfz-arrow span { position: absolute; left: 9px; top: 8px; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; font-size: 0; overflow: hidden; }
.cyfz-arrow-prev { left: 24px; }
.cyfz-arrow-prev span { left: 10px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
.cyfz-arrow-next { right: 24px; }
.cyfz-arrow-next span { left: 7px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.cyfz-arrow:hover { background: #39aaeb; }