* { margin: 0; padding: 0; box-sizing: border-box; } body { /* font-family: 'microsoft yahei', 'pingfang sc', sans-serif; */ background: #fff; color: #333; line-height: 1.6; min-width: 1200px; } a { color: #666; text-decoration: none; } a:focus, a:hover { color: #e74c3c; text-decoration: none; } /* 顶部横幅 */ .wrap { background: no-repeat center top; /* background-size: 100%; */ } .header { height: 700px; position: relative; display: flex; align-items: flex-start; justify-content: center; padding-top: 180px; } .header-content { position: relative; z-index: 2; text-align: center; } .header-title { width: 969px; margin: 0 auto; } /* 主要内容区 */ .main-content { max-width: 1200px; margin: 0px auto 0; padding: 0px; position: relative; z-index: 10; } /* 新闻头条 */ .news-highlight { background: linear-gradient(358deg, #ffffff 0%, #efca8e 100%); border-radius: 18px; padding: 15px 30px; margin-bottom: 30px; box-shadow: 0 5px 20px rgba(231, 76, 60, 0.3); height: 140px; line-height: 140px; } .news-highlight h5 { text-align: center; font-size: 34px; text-align: center; color: #c81818; line-height: 84px; } .news-highlight h5 a { color: #c81818; } .p1 { padding: 20px; padding-bottom: 35px; border-radius: 18px; background: #ffffff; position: relative; margin-bottom: 20px; } .focus, .focus .pic { height: 400px; } .focus .pic span { background: #c91615; color: #ffdfaa; text-align: left; } .p1 .list-t { margin-top: 0; } .p1 .news .list-t li { background: linear-gradient(to right, #ffe8c1, #fffaf2); margin-bottom: 2px; height: 65px; line-height: 65px; } .p1 .news .list-t li:last-child { margin-bottom: 0; } .p1 .news .list-t li a { color: #c81818; } .p1 .news .list-t li { padding: 0; padding-left: 20px; } .p1 .news .list-t li:before { left: 15px; top: 50%; display: none; } /* 轮播图切换 */ /*focus*/ .focus, .focus .pic { position: relative; width: 100%; height: 400px; } .news { height: 400px; } .focus .pic>div { position: relative; overflow: hidden; width: 100%; } .focus .pic img { width: 100%; height: 100%; object-fit: cover } .focus .pic span { position: absolute; bottom: 0; left: 0; right: 0; display: block; padding: 10px 80px 10px 10px; line-height: 26px; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-color: #feeacf; text-align: left; color: #c81818; } .focus .focus-prev, .focus .focus-next { position: absolute; top: 50%; z-index: 3; display: block; width: 60px; height: 60px; margin-top: -30px; line-height: 60px; text-align: center; font-size: 28px; cursor: pointer; background-color: rgba(0, 0, 0, .5); background-size: 24px auto; color: #fff; opacity: 0; transition: all .3s; } .focus .focus-prev .iconfont, .focus .focus-next .iconfont { font-size: 28px; font-weight: normal; } .focus .focus-prev { transform: translate(-50px, 0); left: 0; background-image: none; } .focus .focus-next { transform: translate(50px, 0); right: 0; background-image: none; } .focus:hover .focus-prev, .focus:hover .focus-next { opacity: 1; transform: translate(0, 0); } .focus .navi { position: absolute; bottom: 14px; left: auto; right: 0; z-index: 9; width: auto; margin-bottom: 4px\9; padding: 0 10px; text-align: right; } .focus .navi li { float: left; width: 8px; height: 8px; margin: 0 2px; font: 0/0 lx; border: 1px solid #fff; color: transparent; border-radius: 100px; transition: all .3s; } .focus .navi li.on { background-color: #fff; } .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 2px; } .focus .swiper-pagination-bullet { background: #fff; opacity: 1; } .focus .swiper-pagination-bullet-active { background-color: #dc3136; } .more { position: absolute; right: 20px; margin-top: 5px; } .more a { color: #cf8847; } @media (max-width: 1200px) { .news { height: auto; } .focus, .focus .pic { position: relative; width: 100%; height: auto; } .focus .pic>div { position: relative; overflow: hidden; width: 100%; padding: 50% 0 0; } .focus .pic img { position: absolute; top: 0; left: 0; height: 100%; } .focus { margin-bottom: 20px; } } /* 内容卡片 */ .content-card { /* background: #fff; border-radius: 10px; padding: 30px; margin-bottom: 30px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); */ } /* 标题样式 */ .section-title-img { text-align: center; margin-bottom: 25px; } .section-title-img img { width: auto; } /* 省总动态 */ .szdt-section { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .szdt-left { display: flex; flex-direction: column; gap: 15px; } .szdt-main-news { position: relative; overflow: hidden; background: #fff; display: flex; padding: 10px; border: 1px #f2d2a1 solid; justify-content: flex-start; align-items: center; } .szdt-main-news img { width: 100%; height: 100%; object-fit: cover; display: block; } .szdt-main-news .news-title { margin-left: 15px; color: #666; font-size: 18px; } .szdt-news-list { list-style: none; } .szdt-news-list li { padding: 10px 0; border-bottom: 1px dashed #e0e0e0; font-size: 18px; color: #666; cursor: pointer; transition: all 0.3s; position: relative; padding-left: 24px; } .szdt-news-list li::before,.jcgh-list li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translatey(-50%); width: 6px; height: 6px; background: #ffb14c; border-radius: 20%; } .szdt-news-list li:hover{ color: #e74c3c; } .szdt-main-news .news-title:hover { color: #e74c3c; text-decoration: none; } .szdt-main-news a:link { text-decoration: none; } .szdt-news-list li:last-child { border-bottom: none; } /* 基层工会 */ .jcgh-section { background-size: cover; padding: 0px; border-radius: 10px; } .jcgh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .jcgh-list { list-style: none; } .jcgh-list li { padding: 10px 0; font-size: 18px; color: #333; position: relative; padding-left: 24px; border-bottom: 1px dashed #ddd; cursor: pointer; transition: all 0.3s; } .jcgh-list li:hover { color: #e74c3c; } /* 工运百年 */ .gybn-section { } .gybn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .gybn-item { background: #fff4e5; padding: 20px; border-radius: 0px; border-bottom: 3px solid #e74c3c; transition: all 0.3s; cursor: pointer; } .gybn-item:hover { transform: translatey(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .gybn-item h4 { color: #333; font-size: 18px; margin-bottom: 8px; } .gybn-item p { font-size: 13px; color: #666; line-height: 1.8; } /* 职工热议轮播 */ .zgrl-section { position: relative; } .swiper-container-zgrl { padding: 20px 60px; overflow: hidden; position: relative; } .zgrl-slide { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%); border-radius: 0px; padding: 40px; text-align: center; color: #fff; min-height: 200px; display: flex; flex-direction: column; justify-content: center; } .zgrl-slide h4 { font-size: 30px; margin-bottom: 10px; color: #ffebcd; } .zgrl-slide p { font-size: 18px; line-height: 1.8; } /* 荆楚先锋轮播 */ .jcxf-section { position: relative; } .swiper-container-jcxf { padding: 20px 60px; overflow: hidden; position: relative; } .jcxf-slide { text-align: center; background: #fff; overflow: hidden; } .jcxf-slide img { width: 100%; height: 180px; object-fit: cover; display: block; margin-left:10px; } .jcxf-slide .jcxf-info { padding: 2px; background: url(/uploads/image/tgi2images/jcxm-bg.png) no-repeat center top; background-size: 100%; padding-top: 20px; color: #fff; margin-top: -20px; z-index: 11; position: relative; min-height: 88px; } .jcxf-slide h4 { font-size: 16px; margin-bottom: 5px; padding: 0 20px; } .jcxf-slide p { font-size: 13px; opacity: 0.9; } /* 特别策划 */ .tbch-section { background: #fff; } .tbch-tabs { display: flex; justify-content: center; align-items: center; gap: 0; margin-bottom: 30px; background:#fef1de; border-radius: 0px; padding: 1px; width: fit-content; margin-left: auto; margin-right: auto; } .tbch-tab { background: transparent; color: #666; padding: 10px 66px; border-radius: 0px; cursor: pointer; transition: all 0.3s; font-size: 24px; text-decoration: none; display: inline-block; color: #bf2f26; } .tbch-tab.active { background: #c41e3a; color: #fff; position: relative; } .tbch-tab.active::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translatex(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #c41e3a; } .tbch-tab:hover:not(.active) { color: #c41e3a; } .tbch-content { background: #fff; padding: 20px 0; min-height: 300px; } /* 特别策划轮播图 */ .swiper-container-tbch { padding: 0 20px; position: relative; overflow: hidden; } .tbch-slide { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .tbch-slide img { width: 100%; height: 340px; object-fit: cover; display: block; } .tbch-slide-title { position: absolute; top: 15px; right: 15px; background: linear-gradient(135deg, #d4a574 0%, #c49a6c 100%); color: #fff; padding: 6px 12px; border-radius: 4px; font-size: 14px; font-weight: bold; } .tbch-slide-desc { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); color: #fff; padding: 40px 15px 15px; font-size: 14px; line-height: 1.6; } /* 特别策划轮播箭头 */ /* .swiper-container-tbch .swiper-button-prev, .swiper-container-tbch .swiper-button-next { color: #c41e3a; width: 36px; height: 36px; background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .swiper-container-tbch .swiper-button-prev:after, .swiper-container-tbch .swiper-button-next:after { font-size: 14px; font-weight: bold; } .swiper-container-tbch .swiper-button-prev { left: 0; } .swiper-container-tbch .swiper-button-next { right: 0; } */ /* 数字展馆 */ .szgz-section { background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%); padding: 60px; border-radius: 10px; text-align: center; color: #fff; position: relative; overflow: hidden; } .szgz-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%); animation: pulse 4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 0.8; } } .szgz-section h2 { font-size: 36px; margin-bottom: 30px; position: relative; z-index: 1; } .szgz-btn { display: inline-block; background: #f1c40f; color: #8e44ad; padding: 12px 40px; border-radius: 25px; font-size: 16px; font-weight: bold; text-decoration: none; transition: all 0.3s; position: relative; z-index: 1; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .szgz-btn:hover { transform: translatey(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); } /* 底部 */ .footer { background: #c0392b; color: #fff; text-align: center; padding: 30px; margin-top: 50px; } .footer p { font-size: 18px; margin: 5px 0; opacity: 0.9; } /* 轮播箭头 */ .swiper-button-next, .swiper-button-prev { color: #e74c3c; width: 40px; height: 40px; background-image: url(/uploads/image/tgi2images/right.png); border-radius: 50%; background-size: 16px; } .swiper-button-prev { background-image: url(/uploads/image/tgi2images/left.png); } .swiper-button-next:after, .swiper-button-prev:after { font-size: 16px; font-weight: bold; } /* 分页器 */ .swiper-pagination-bullet { background: #ccc; opacity: 1; } .swiper-pagination-bullet-active { background: #e74c3c; } /* 查看更多链接 */ .more-link { text-align: right; margin-top: -20px; position: absolute; right: 0; } .more-link a { color: #cf8847; font-size: 13px; text-decoration: none; } .more-link a:hover { text-decoration: underline; } @media (max-width: 560px) { }