/*!
* Bootstrap v3.2.0 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html,body{
width:100%;
height:100%;
font-size:12px;
color:#000;
background-color:#fff;
}
*{
padding:0;
margin:0
}
.row{
margin-left:0;
margin-right:0;
padding-left:0;
padding-right:0;
}
ul{
margin-bottom: 0px;
}
.list-inline{
margin-left: 0px;
margin-right: 0px;
}
a{
color:#fff
}
a:focus{
text-decoration:none;
}
/*头部*/
.webtop{
background:#ea6b1e;
width:100%;
height:25px;
line-height:25px;
}
.webtop-top{
width: 1100px;
margin: 0 auto;
color:#FFF;
}
.webtop-top a:hover,.webtop-top a:focus{
color:#eee
}
/*logo*/
.weblogo{
width: 1200px;
margin: 0 auto;
}
.logo{
float:left;
line-height:70px;
height: 60px;
margin: 5px;
padding: 5px;
}
.zx-tel{
float:right;
color:#333;
line-height:75px;
font-size:1.3em;
margin: 0 0 0px;
}
.zx-tel i{
color:#054E5A;
font-weight:bold;
font-size:1.5em
}
.chinaenglish{
padding-right:50px;
}
.chinaenglish a{
padding:0px 6px;
color:#333;
font-weight:600;
font-size:20px;
}
.chinaenglish a:nth-child(1){
color:#ea6b1e
}
.chinaenglish a:nth-child(2){
color:#1067ff
}
.ph-hidelogo{
height:65px;
padding: 6px;
display:none
}
/*导航*/
.nav-D {
width: 100%;
height: 52px;
z-index: 9999;
position: absolute;
}
.navbar-default{
top: 102px;
background-image: transparent;
background-repeat: no-repeat;
border-radius: 0;
width:100%;
background: #fff;
color:#000;
}
.navbar-default .navbar-nav > li > a{
border-bottom: 2px solid transparent;
}
.navbar-default .navbar-nav > li > a.dropdown-toggle.text-center {
border-bottom: 0px solid transparent;
}
/*固定导航*/
.fixednav{
position:fixed;
top:0px;
left:0px;
width:100%;
height: auto;
align-items: center;
display: flex;
}
.navbar-brand {
display:none;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
border-color:transparent
}
.navbar-collapse {
padding-right:0px;
padding-left: 0px;
width:68%;
margin:0 auto;
}
.navbar-nav {
float: right;
}
.navbar-nav > li > a {
padding-top: 0px;
padding-bottom: 0px;
}
.nav > li{
padding-top:7px;
padding-bottom:7px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
position:unset;
}
.nav > li a:hover,.nav > li a:focus {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.navbar-default .navbar-nav > li > a{
color:#000;
font-size:16px;
transition: background-color 0.9s ease;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
color: #2055de;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #fff;
background-color: #1b1b1b;
border-bottom: 2px solid #fff;
}
.navbar-default .navbar-nav > .active > a{
color:#fff;
font-size:1.3em;
background-image: linear-gradient(to bottom,#002042 0,#002042 100%);
box-shadow: inset 0 0px 0px rgba(0,0,0,0);
}
.navbar-default .navbar-nav > .active a,.navbar-default .navbar-nav > .active:focus a{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
border-bottom: 2px solid #fff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #fff;
background-image: linear-gradient(to bottom,#1b1b1b 0,#1b1b1b 100%);
}
/*汉堡导航*/
.navbar-default .navbar-toggle {
border-color: #fbf7f7;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #054e5a;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #21a1ff;
border-color: #21a1ff;
}
.navbar-default .navbar-toggle:hover .icon-bar , .navbar-default .navbar-toggle:focus .icon-bar{
background-color: #fff;
}
/*导航下拉*/
.dropdown-menu{
top: auto;
background-color: transparent;
box-shadow: 0 0px 0px rgba(0,0,0,0);
border: 0px solid rgba(0,0,0,.15);
}
.dropdown-menu img{
display:block
}
.dropdown-menu > li > a{
padding:3px 0px;
}
.hide-ce{
display:none;
padding-right: 0;
float: right;
}
/*服务项目下拉*/
.dropdown-serv{
width: 550px;
padding: 10px 0px;
left: auto;
position: -ms-page;
position: absolute;
}
.dropdown-serv ul{
width:30%;
float:left;
text-align:center;
font-size:1.1em;
color:#fff;
border-right: 2px solid #eee;
line-height:30px
}
.dropdown-serv > ul > li > a:hover{
color:#fff;
font-size:1.15em;
font-weight:600;
text-decoration:none;
}
.pub-nav-hide{
width:100%;
float:right;
margin-top: 2px;
padding: 20px 0px;
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
border-radius: 15px;
}
.dropdown-serv img{
overflow:hidden;
text-align:center;
margin:0 auto;
}
.pub-nav-hideimg.row {
width: 66%;
float: left;
margin-left: 2%;
margin-top: 15px;
}
#p-dowm{
width:1200px;
}
.p-s-ul li a:hover,.p-s-ul li a:focus{
border-bottom: 0px solid #fff;
font-size:18px;
color: #e6e6e6;
text-decoration: none;
}
/*解决方案下拉*/
.dropdown-pro{
margin: 0 auto;
padding: 10px 0px 0px;
right: 0px;
position:absolute;
}
.dropdown-pro .pub-nav-hide{
width: 86%;
float:left;
right: 7%;
margin-left:7%;
position:-ms-device-fixed;
}
.dropdown-pro li a{
color:#fff;
font-size: 18px;
text-align: center;
display: block;
}
.p-p-ul li:hover a,.p-p-ul li:focus a{
color: #ececec;
text-decoration: underline;
border-bottom: 0px solid #fff;
}
.dropdown-pro li{
width:16%;
margin: 0 auto
}
.dropdown-pro li img {
width: 65%;
margin: 0 auto 10px;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{
background-color:transparent;
background-image: linear-gradient(to bottom,#292a32 0,#292a32 100%);
}
/*联系我们下拉*/
.dropdown-us{
width:1200px;
margin: 0 auto;
padding: 10px 0px 0px;
right: 0px;
position:-ms-device-fixed;
}
.dropdown-us ul{
width:30%;
float:left;
padding-top:20px;
text-align:center;
font-size:1.1em;
color:#fff;
line-height:30px;
}
.dropdown-us > ul > li > a:hover{
color:#fff;
font-size:1.15em;
font-weight:600;
text-decoration:none;
}
.dropdown-us .pub-nav-hide{
width: 550px;
}
.dropdown-us img{
text-align:center;
margin:0 auto;
}
.dropdown-us .pub-nav-hideimg{
border-left: 2px solid #eee;
}
.p-a-ul li:hover a,.p-a-ul li:focus a{
color: #d9d9d9;
text-decoration: none;
border-bottom: 0px solid #fff;
font-size:18px;
}
.dropdown:hover .dropdown-toggle{
border-bottom:0px solid #fff;
}
/* banner*/
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.container-fulid.row.banner{
position: relative;
margin-top: 52px;
}
.ban-text {
position: absolute;
top: 0;
width: 68%;
margin-left: 16%;
text-align: center;
}
.carousel-inner img{
width:100%;
}
.carousel-control.right,.carousel-control.left{
background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 0%);
}
.carousel-indicators .active {
width: 60px;
height: 5px;
margin: 0;
background-color: #0d39fb;
margin-right:5px
}
.carousel-indicators li {
width: 60px;
height: 5px;
background-color: rgb(255, 255, 255);
border: 0px solid #fff;
margin:0px;
margin-right:5px
}
.carousel-indicators li:hover{
background-color: #0d39fb;
}
.navbar-default .navbar-nav > .active li a{
border-bottom: 2px solid transparent;
}
/*底部*/
.foot{
width:100%;
background-color: #0e3c44;
}
.foot-con{
width:1200px;
margin: 0 auto;
padding:30px 0px;
}
.foot-right {
width: 30%;
float: left;
border-right: 1px solid #4b5054;
padding: 0px 50px 0px 0px;
margin-top: 10px;
}
.mess-con h4{
color:#d7d8d9;
text-align:center;
margin-bottom:15px;
}
.form-control{
color: #555;
margin: 5px 0;
}
.btn-danger{
float:right;
color:#fff;
}
.foot-left{
width:69%;
float:right;
padding:50px 0px 0px 50px
}
.bot-nav{
border-bottom: 1px solid #4b5054;
padding-bottom:10px
}
.bot-nav li{
font-size:1.2em;
padding: 0px 20px;
}
.bot-nav li a{
color:#d7d8d9;
}
.bot-nav li a:hover{
color:#d7d8d9;
}
.bot-tel{
width:55%;
font-size:1.2em;
color:#fff;
float:left;
padding-top:25px;
font-size: 16px;
}
.bot-img{
width:44%;
float:right;
padding-top:50px;
text-align:center;
color:#9b9ea0;
font-size:1.2em;
}
.bot-img img{
padding-bottom:10px;
}
.beian a{
color: #4194ff;
}
/*友情链接*/
.friend{
background:#054e5a;
}
.friend-con{
width:80%;
margin: 0 auto;
}
.friend-con p{
color:#939393;
font-size:1.2em;
line-height:30px;
text-align:center;
margin: 0 0 3px;
}
.friend-con ul li{
font-size:1.22em;
color:#535353;
}
/*底部固定导航*/
.footer-nav {
width:100%;
text-align:center;
background:#054e5a;
display:none;
}
.footer-nav ul{
margin-bottom: 0px;
}
.footer-nav p {
margin: 0 0 5px;
}
.footer-nav li{
width:17%;
padding-top: 5px;
}
.footer-nav li a{
text-decoration:none;
}
.footer-nav li a:hover,.footer-nav li a:focus{
text-decoration:none;
color:#fff;
}
.footer-nav i{
font-size:28px;
color:#fff;
}
.footer-nav img{
width:32px;
margin:0 auto;
}
/*固定的悬浮窗*/
.yb_conct{position:fixed;z-index:9999999;bottom: 280px;right:100px;cursor:pointer;transition:all .3s ease;}
.yb_bar ul li{width:180px;height:53px;font:16px/53px 'Microsoft YaHei';color:#fff;text-indent:54px;margin-bottom:3px;border-radius:3px;transition:all .5s ease;overflow:hidden;}
.yb_bar .yb_top{background:#ff4a00 url(../images/fixCont.png) no-repeat 0 0;}
.yb_bar .yb_phone{background:#ff4a00 url(../images/fixCont.png) no-repeat 0 -57px;}
.yb_bar .yb_QQ{text-indent:0;background:#ff4a00 url(../images/fixCont.png) no-repeat 0 -113px;}
.yb_bar .yb_ercode{background:#ff4a00 url(../images/fixCont.png) no-repeat 0 -169px;}
.hd_qr{padding:0 29px 25px 29px; width:180px;}
.yb_QQ a{display:block;text-indent:54px;width:100%;height:100%;color:#fff;}
/*悬浮联系我们*/
.xuanfu{ position:absolute; right:2px; top:150px;z-index: 999;}
.xuanfu .slide_min{ width:100px; height:100px; cursor:pointer;margin-top: 120px;}
.xuanfu .slide_box{ width: 170px; height:auto; overflow:hidden; font-size:12px; line-height:130%;color: #1e1e1e;margin-top: 50px; }
.xuanfu .slide_box .weixin{ margin-bottom:5px;}
.xuanfu .slide_box img{ cursor:pointer;}
.xuanfu .slide_box .tel-zx{ font-weight: 600;text-align:center; padding:10px 0px;margin-bottom:0px;background:url(../images/fin-lx-2.gif);font-size:16px;color:#333;text-align:center;}
.xuanfu .slide_box .tel-num{
margin-bottom:10px;
width:80%;
margin:0 auto;
padding: 7px 0px;
font-size: 16px;
line-height: 20px;
}
.tel{
background:#fff;
padding:5px 0px 10px;
border-left:1px solid #cfcbcb;
border-right:1px solid #cfcbcb;
border-bottom:1px solid #cfcbcb;
}
.wrap {
bottom: 100px;
position: absolute;
width: 100px;
}
.ball,
.shadow {
border-radius: 100%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
.ball {
-webkit-animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
}
.blue .ball img{ margin:0 auto;display: block;}
.shadow {
-webkit-animation: shadow 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
animation: shadow 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
background: #000;
bottom: -90px;
height: 25px;
width: 60px;
}
.blue .ball ,
.blue .shadow { -webkit-animation-delay: 0; animation-delay: 0; }
@-webkit-keyframes ball {
0% {
-webkit-transform: translateY( 0 );
transform: translateY( 0 );
}
100% {
-webkit-transform: translateY( -30px );
transform: translateY( -30px );
}
}
@keyframes ball {
0% {
-webkit-transform: translateY( 0 );
transform: translateY( 0 );
}
100% {
-webkit-transform: translateY( -30px );
transform: translateY( -30px );
}
}
@-webkit-keyframes shadow {
0% {
opacity: 0.2;
-webkit-transform: scale( 0.65 );
transform: scale( 0.65 );
}
100% {
opacity: 0.05;
-webkit-transform: scale( 1 );
transform: scale( 1 );
}
}
@keyframes shadow {
0% {
opacity: 0.2;
-webkit-transform: scale( 0.75 );
transform: scale( 0.75 );
}
100% {
opacity: 0.05;
-webkit-transform: scale( 1 );
transform: scale( 1 );
}
}
/*分页*/
.dede_pages{
width: 100%;
float: none;
overflow: hidden;
text-align: center;
margin-top: 80px;
}
.dede_pages ul li.thisclass{
background:#0282d5;
color:#fff
}
.dede_pages ul{
margin:0px auto;
float:none;
clear:both;
overflow:hidden;
text-align:center;
white-space:nowrap;
}
.dede_pages ul li{
padding:8px;
}
.dede_pages ul li, .dede_pages ul li a{
float:none;
color: #353535;
display:inline;
}
.dede_pages ul{
padding:12px 0px 12px 16px;
}
.dede_pages ul li{
float:left;
font-family:Tahoma;
line-height:17px;
margin-right:6px;
border:1px solid #E9E9E9;
}
/*上下篇*/
.nextpre a{
color:#333 !important;
}
.list-unstyled.nextpre{
margin-top: 60px 0px 30px
}
.all-con{
margin-bottom:60px;
}
.all-tel{
text-align:center;
}
.all-erweima{
margin-top:50px;
text-align:center;
}
.all-erweima img{
width:70%;
margin:0 auto;
display:block
}
.newscon-con-l img,.product-con-text img,.all-con img{
width:70% !important;
height:auto !important;
}
.tel p a{
color:blue
}
.licheng {
width: 90%;
margin: 0 auto;
}
.timeline {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.timeline-node {
position: relative;
text-align: center;
}
.node-content {
display: flex;
flex-direction: column;
align-items: center;
}
.circle {
width: 20px;
height: 20px;
background-color: #3498db;
border-radius: 50%;
margin-bottom: 10px;
margin-top: -10px;
}
.node-content .year {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.node-content .description {
font-size: 14px;
color: #555;
}
.timeline-line {
width: 100%;
height: 1px;
background-color: #3498db;
position: absolute;
top: 0%;
left: 50%;
transform: translateX(-50%);
}
.timeline-node:first-child .timeline-line {
display: none;
}
.timeline-node:last-child .timeline-line {
display: none;
}
/* 移动端适配：线段变为垂直 */
@media screen and (max-width: 768px) {
.timeline {
flex-direction: column;
align-items: center;
}
.timeline-node {
margin-bottom: 15px;
}
.timeline-line {
width: 2px;
height: 80px;
position: relative;
left: 0;
top: auto;
transform: translateX(0);
}
.node-content .year {
font-size: 16px;
}
.node-content .description {
font-size: 12px;
}
}
/* 更小屏幕适配 */
@media screen and (max-width: 480px) {
.node-content .year {
font-size: 14px;
}
.node-content .description {
font-size: 10px;
}
}
/* 客服按钮 */
.chat-button {
position: fixed;
bottom: 100px;
right: 20px;
cursor: pointer;
z-index: 1000;
}
/* 客服对话框 */
.chat-box {
position: fixed;
bottom: 50%;
right: 40%;
width: 300px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: none;
flex-direction: column;
z-index: 1000;
}
.chat-header {
padding: 10px;
background-color: #007bff;
color: #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.close-button {
background: none;
border: none;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.chat-messages {
flex: 1;
padding: 10px;
overflow-y: auto;
max-height: 300px;
border-bottom: 1px solid #eee;
}
.chat-input {
display: flex;
padding: 10px;
}
.chat-input input {
flex: 1;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
.chat-input button {
margin-left: 10px;
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
/* 消息样式 */
.message {
margin-bottom: 10px;
}
.message.user {
text-align: right;
}
.message.bot {
text-align: left;
}
.message span {
display: inline-block;
padding: 8px;
border-radius: 5px;
max-width: 80%;
}
.message.user span {
background-color: #007bff;
color: #fff;
}
.message.bot span {
background-color: #f1f1f1;
color: #333;
}
/* 全局样式 */
.footer-1 {
background: #0a192f;
color: #ccd6f6;
padding: 80px 0 10px;
font-family: 'Helvetica Neue', sans-serif;
}
.footer-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 2rem;
}
/* 导航矩阵 */
.nav-matrix {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
border-bottom: 1px solid #233554;
padding-bottom: 50px;
margin-bottom: 50px;
}
.nav-column h4 {
color: #64ffda;
font-size: 1.1rem;
margin-bottom: 1.5rem;
position: relative;
padding-left: 15px;
}
.nav-column h4:before {
content: "▌";
position: absolute;
left: 0;
color: #64ffda;
}
.footer-links a {
color: #8892b0;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
padding: 8px 0;
display: block;
text-decoration: none;
}
.footer-links a:hover {
color: #64ffda;
transform: translateX(10px);
}
/* 联系信息区块 */
.contact-box {
background: rgba(100, 255, 218, 0.05);
padding: 2rem;
border-radius: 8px;
margin-bottom: 30px;
border: 1px solid #233554;
}
.contact-info p {
margin: 1rem 0;
display: flex;
align-items: center;
}
.contact-info i {
margin-right: 12px;
color: #64ffda;
min-width: 24px;
text-align: center;
}
/* 社交媒体图标 */
.social-media {
margin-top: 2rem;
display: flex;
gap: 1.5rem;
}
.social-media a {
color: #8892b0;
font-size: 1.8rem;
transition: all 0.3s;
}
.social-media a:hover {
color: #64ffda;
transform: translateY(-3px);
}
/* SEO内容 */
.seo-content {
color: #8892b0;
line-height: 1.8;
font-size: 0.95rem;
margin: 2rem 0;
text-align: justify;
}
.seo-content strong {
color: #64ffda;
font-weight: 500;
}
/* 底部信息 */
.footer-bottom {
margin-top: 40px;
}
.legal-links {
margin-bottom: 15px;
text-align: center;
font-size: 0.9rem;
}
.legal-links a {
color: #8892b0;
text-decoration: none;
margin: 0 10px;
transition: color 0.3s;
}
.legal-links a:hover {
color: #64ffda;
text-decoration: underline;
}
.footer-bottom p {
color: #8892b0;
font-size: 0.9rem;
text-align: center;
margin-top: 15px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.nav-matrix {
grid-template-columns: repeat(auto-fit, minmax(120px, 2fr));
gap: 30px;
}
.contact-box {
padding: 1.5rem;
}
.social-media {
justify-content: center;
flex-wrap: wrap;
}
}
@media (max-width: 480px) {
.footer-container {
padding: 0 1rem;
}
.contact-info p {
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.legal-links {
display: flex;
flex-direction: column;
gap: 8px;
}
.legal-links a {
margin: 0;
}
.legal-links a:not(:last-child):after {
content: "";
margin: 0;
}
}
.wifi-banner {
height: 600px;
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
padding: 20px;
}
.banner-content {
max-width: 1200px;
margin: 0 auto;
color: white;
text-align: center;
position: relative;
z-index: 1;
}
.wifi-icon {
font-size: 80px;
margin-bottom: 20px;
color: #f39c12;
}
.seo-text {
font-size: 1.2em;
margin-bottom: 30px;
line-height: 1.6;
}
.cta-button {
padding: 15px 40px;
background: #e67e22;
color: white;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
display: inline-block;
}
.cta-button:hover {
background: #d35400;
transform: translateY(-2px);
}
@media (max-width: 768px) {
.wifi-banner {
height: 400px;
}
.wifi-icon {
font-size: 60px;
}
.seo-text {
font-size: 1em;
}
.cta-button {
padding: 12px 30px;
}
}
:root {
--primary-color: #2A2E35;
--accent-color: #00B4D8;
--text-light: #F8F9FA;
}
.wifi-ban1-container {
max-width: 1200px;
margin: 2rem auto;
padding: 20px;
background: linear-gradient(135deg, var(--primary-color) 0%, #1A1E23 100%);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.wifi-ban1-title {
text-align: center;
color: var(--text-light);
padding: 2rem;
font-size: 2.5em;
border-bottom: 2px solid var(--accent-color);
}
.wifi-ban1-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
padding: 2rem;
}
.wifi-ban1-card {
background: rgba(255,255,255,0.05);
border-radius: 10px;
padding: 25px;
transition: transform 0.3s ease;
}
.wifi-ban1-card:hover {
transform: translateY(-5px);
}
.wifi-ban1-icon {
font-size: 2.5rem;
color: var(--accent-color);
margin-bottom: 1rem;
}
.wifi-ban1-card h3 {
color: var(--text-light);
margin: 1rem 0;
font-size: 1.3em;
}
.wifi-ban1-card p {
color: #ADB5BD;
line-height: 1.6;
font-size: 0.95em;
}
@media (max-width: 768px) {
.wifi-ban1-grid {
grid-template-columns: 1fr;
padding: 1rem;
}
.wifi-ban1-title {
font-size: 2em;
padding: 1rem;
}
}
:root {
--wifi-ban2-primary: #1A2333;
--wifi-ban2-accent: #2ECC71;
--wifi-ban2-text: #E0E7FF;
}
.wifi-ban2-container {
max-width: 1200px;
margin: 3rem auto;
padding: 30px 20px;
background: var(--wifi-ban2-primary);
border-radius: 20px;
position: relative;
overflow: hidden;
}
.wifi-ban2-container::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(46,204,113,0.1) 0%, transparent 70%);
pointer-events: none;
}
.wifi-ban2-title {
text-align: center;
color: var(--wifi-ban2-text);
font-size: 2.8rem;
margin-bottom: 2rem;
position: relative;
}
.wifi-ban2-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
padding: 0 2rem;
}
.wifi-ban2-card {
background: rgba(255,255,255,0.05);
border-radius: 12px;
padding: 30px;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
}
.wifi-ban2-card:hover {
background: rgba(46,204,113,0.1);
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
.wifi-ban2-icon {
font-size: 3rem;
color: var(--wifi-ban2-accent);
margin-bottom: 1.5rem;
transition: transform 0.3s ease;
}
.wifi-ban2-card:hover .wifi-ban2-icon {
transform: rotate(15deg) scale(1.1);
}
.wifi-ban2-card h3 {
color: var(--wifi-ban2-text);
font-size: 1.5rem;
margin: 1rem 0;
border-left: 3px solid var(--wifi-ban2-accent);
padding-left: 1rem;
}
.wifi-ban2-card p {
color: #B2BECD;
line-height: 1.8;
font-size: 1rem;
}
@media (max-width: 768px) {
.wifi-ban2-grid {
grid-template-columns: 1fr;
padding: 0 1rem;
}
.wifi-ban2-title {
font-size: 2rem;
}
.wifi-ban2-card {
padding: 25px;
}
}
:root {
--wifi-ban3-primary: #0F172A;
--wifi-ban3-accent: #3B82F6;
--wifi-ban3-gradient: linear-gradient(135deg, #1D4ED8 0%, #3B82F6 100%);
}
.wifi-ban3-container {
max-width: 1200px;
margin: 4rem auto;
padding: 4rem 2rem;
background: var(--wifi-ban3-primary);
border-radius: 20px;
position: relative;
overflow: hidden;
}
.wifi-ban3-container::before {
content: '';
position: absolute;
top: 0;
left: -50%;
width: 200%;
height: 100%;
background: repeating-linear-gradient(
45deg,
rgba(59,130,246,0.1),
rgba(59,130,246,0.1) 20px,
transparent 20px,
transparent 40px
);
animation: wifi-ban3-bg-animate 20s linear infinite;
}
.wifi-ban3-content {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.wifi-ban3-text {
flex: 1;
max-width: 600px;
}
.wifi-ban3-title {
color: #fff;
font-size: 2.5rem;
margin-bottom: 1.5rem;
line-height: 1.3;
}
.wifi-ban3-desc {
color: #94A3B8;
font-size: 1.1rem;
line-height: 1.8;
}
.wifi-ban3-actions {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.wifi-ban3-button {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 1rem 2rem;
background: var(--wifi-ban3-gradient);
color: white;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wifi-ban3-button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(59,130,246,0.3);
}
.wifi-ban3-contacts {
background: rgba(255,255,255,0.05);
padding: 1.5rem;
border-radius: 12px;
backdrop-filter: blur(10px);
}
.wifi-ban3-contact-item {
display: flex;
align-items: center;
gap: 10px;
color: #E2E8F0;
margin: 1rem 0;
font-size: 0.95rem;
}
@keyframes wifi-ban3-bg-animate {
100% { transform: translateX(50%); }
}
@media (max-width: 768px) {
.wifi-ban3-content {
flex-direction: column;
text-align: center;
}
.wifi-ban3-title {
font-size: 2rem;
}
.wifi-ban3-button {
justify-content: center;
}
.wifi-ban3-contact-item {
justify-content: center;
flex-wrap: wrap;
}
}
:root {
--wifi-ban4-primary: #3a7bd5;
--wifi-ban4-secondary: #00d2ff;
--wifi-ban4-dark: #2c3e50;
--wifi-ban4-light: #f8f9fa;
--wifi-ban4-accent: #ff6b6b;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wifi-ban4-container {
max-width: 1200px;
margin: 0 auto;
padding: 10px;
}
.wifi-ban4-header {
text-align: center;
margin-bottom: 40px;
padding: 30px 0;
background: linear-gradient(135deg, var(--wifi-ban4-primary), var(--wifi-ban4-secondary));
color: white;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.wifi-ban4-header h1 {
font-size: 2.5rem;
margin-bottom: 15px;
}
.wifi-ban4-header p {
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto;
}
.wifi-ban4-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.wifi-ban4-feature-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
position: relative;
}
.wifi-ban4-feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
.wifi-ban4-feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--wifi-ban4-primary), var(--wifi-ban4-secondary));
}
.wifi-ban4-card-header {
padding: 20px;
background-color: rgba(58, 123, 213, 0.05);
display: flex;
align-items: center;
}
.wifi-ban4-card-icon {
font-size: 2rem;
margin-right: 15px;
color: var(--wifi-ban4-primary);
}
.wifi-ban4-card-title {
font-size: 1.5rem;
font-weight: 600;
}
.wifi-ban4-card-body {
padding: 20px;
}
.wifi-ban4-card-body ul {
list-style-type: none;
}
.wifi-ban4-card-body li {
margin-bottom: 10px;
position: relative;
padding-left: 25px;
}
.wifi-ban4-card-body li::before {
content: '\f00c';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
left: 0;
color: var(--wifi-ban4-secondary);
}
.wifi-ban4-grid-layout {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-bottom: 50px;
}
.wifi-ban4-grid-item {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.wifi-ban4-grid-item:hover {
transform: scale(1.02);
}
.wifi-ban4-grid-item.large {
grid-column: span 2;
display: grid;
grid-template-columns: 1fr 1fr;
}
.wifi-ban4-grid-image {
height: 100%;
background-size: cover;
background-position: center;
}
.wifi-ban4-grid-content {
padding: 30px;
}
.wifi-ban4-grid-content h3 {
font-size: 1.8rem;
margin-bottom: 20px;
color: var(--wifi-ban4-primary);
}
.wifi-ban4-cta {
text-align: center;
padding: 50px 0;
background: linear-gradient(135deg, var(--wifi-ban4-dark), #34495e);
color: white;
border-radius: 10px;
}
.wifi-ban4-cta h2 {
font-size: 2rem;
margin-bottom: 20px;
}
.wifi-ban4-cta-btn {
display: inline-block;
padding: 12px 30px;
background: var(--wifi-ban4-accent);
color: white;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
border: 2px solid var(--wifi-ban4-accent);
}
.wifi-ban4-cta-btn:hover {
background: transparent;
color: var(--wifi-ban4-accent);
}
@media (max-width: 768px) {
.wifi-ban4-grid-layout {
grid-template-columns: 1fr;
}
.wifi-ban4-grid-item.large {
grid-template-columns: 1fr;
grid-column: span 1;
}
.wifi-ban4-grid-image {
height: 200px;
}
.wifi-ban4-header h1 {
font-size: 2rem;
}
}
@media (max-width: 768px) {
[data-aos] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* 自定义CSS命名空间 */
.wifi-ban7-container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
overflow: hidden;
}
.wifi-ban7-card {
display: flex;
min-height: 500px;
margin: 4rem 0;
background-size: cover;
background-position: center;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
position: relative;
}
.wifi-ban7-card:hover {
transform: translateY(-12px) scale(1.02);
}
.wifi-ban7-content {
width: 45%;
padding: 3rem;
background: linear-gradient(90deg, rgba(255,255,255,0.97) 55%, transparent);
backdrop-filter: blur(2px);
}
.wifi-ban7-icon {
font-size: 2.8rem;
color: #2A5CAA;
margin-bottom: 1.5rem;
transition: transform 0.3s ease;
}
.wifi-ban7-card:hover .wifi-ban7-icon {
transform: rotate(15deg) scale(1.1);
}
.wifi-ban7-feature-list {
list-style: none;
padding: 1rem 0;
margin: 1.5rem 0;
}
.wifi-ban7-feature-list li {
padding: 1rem 0;
border-bottom: 1px solid #f0f0f0;
font-size: 1.05rem;
position: relative;
padding-left: 2rem;
}
.wifi-ban7-feature-list li:before {
content: "\f00c";
font-family: "Font Awesome 5 Free";
position: absolute;
left: 0;
color: #2A5CAA;
font-weight: 900;
}
/* 响应式设计 */
@media (max-width: 768px) {
.wifi-ban7-card {
flex-direction: column;
min-height: auto;
margin: 2rem 0;
}
.wifi-ban7-content {
width: 100%;
background: rgba(255,255,255,0.97);
padding: 2rem;
}
.wifi-ban7-icon {
font-size: 2.2rem;
}
}
/* 背景图定义 */
#mall {background-image: url('/templets/yyst/images/mall-bg.jpg');}
#office {background-image: url('/templets/yyst/images/office-bg.jpg');}
#factory {background-image: url('/templets/yyst/images/factory-bg.jpg');}
#education {background-image: url('/templets/yyst/images/education-bg.jpg');}
#hotel {background-image: url('/templets/yyst/images/hotel-bg.jpg');}
#tourism {background-image: url('/templets/yyst/images/tourism-bg.jpg');}
/* wifi-ban8 专属样式 - 确保不与其他CSS冲突 */
.wifi-ban8-container {
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px;
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
overflow: hidden;
position: relative;
}
.wifi-ban8-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgba(255,255,255,0.1)" d="M30,50 Q50,30 70,50 Q50,70 30,50 Z"/></svg>') repeat;
opacity: 0.3;
z-index: 0;
}
.wifi-ban8-header {
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 1;
}
.wifi-ban8-title {
font-size: 2.8rem;
color: #2c3e50;
margin-bottom: 15px;
font-weight: 700;
position: relative;
display: inline-block;
}
.wifi-ban8-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #3498db, #9b59b6);
border-radius: 2px;
}
.wifi-ban8-subtitle {
font-size: 1.2rem;
color: #7f8c8d;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.wifi-ban8-features {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.wifi-ban8-feature {
width: calc(33.333% - 20px);
background: white;
padding: 40px 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
margin-bottom: 30px;
}
.wifi-ban8-feature::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(to bottom, #3498db, #9b59b6);
}
.wifi-ban8-feature:hover {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.wifi-ban8-icon {
font-size: 2.8rem;
color: #3498db;
margin-bottom: 25px;
transition: transform 0.3s ease;
}
.wifi-ban8-feature:hover .wifi-ban8-icon {
transform: scale(1.1);
}
.wifi-ban8-feature-title {
font-size: 1.4rem;
color: #2c3e50;
margin-bottom: 20px;
font-weight: 600;
}
.wifi-ban8-feature-desc {
color: #7f8c8d;
line-height: 1.6;
font-size: 1rem;
margin-bottom: 25px;
}
.wifi-ban8-contact-btn {
display: inline-block;
padding: 12px 25px;
background: linear-gradient(90deg, #3498db, #9b59b6);
color: white;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
border: none;
cursor: pointer;
font-size: 1rem;
position: relative;
overflow: hidden;
}
.wifi-ban8-contact-btn:hover {
transform: translateY(-3px);
box-shadow: 0 7px 20px rgba(52, 152, 219, 0.4);
}
.wifi-ban8-contact-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: all 0.5s ease;
}
.wifi-ban8-contact-btn:hover::before {
left: 100%;
}
/* 响应式设计 */
@media (max-width: 992px) {
.wifi-ban8-feature {
width: calc(50% - 15px);
}
}
@media (max-width: 768px) {
.wifi-ban8-title {
font-size: 2.2rem;
}
.wifi-ban8-subtitle {
font-size: 1rem;
}
.wifi-ban8-feature {
width: 100%;
margin-bottom: 25px;
}
.wifi-ban8-feature {
padding: 30px 25px;
}
}
/* Contact Us 页面专用样式 */
.ContactUs__banner {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://picsum.photos/1920/600') center/cover;
padding: 100px 20px;
color: white;
text-align: center;
}
.ContactUs__content {
max-width: 1200px;
margin: 50px auto;
padding: 0 20px;
}
.ContactUs__card-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
}
.ContactUs__card {
flex: 1;
max-width: 350px;
background: #fff;
border-radius: 10px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.ContactUs__card:hover {
transform: translateY(-5px);
}
.ContactUs__icon {
font-size: 2.5rem;
margin-bottom: 20px;
color: #2c3e50;
}
.ContactUs__detail h3 {
margin-bottom: 15px;
color: #34495e;
}
.ContactUs__detail a {
color: #3498db;
text-decoration: none;
transition: color 0.3s;
font-size: 18px;
}
.ContactUs__detail a:hover {
color: #2980b9;
}
@media (max-width: 768px) {
.ContactUs__banner h1 {
font-size: 2rem;
}
.ContactUs__card {
width: 100%;
max-width: none;
}
}
.ditu-1 {
width: 100%;
height: 400px; /* 设置合适的高度，可以根据需要调整 */
border: 1px solid #ccc;
}
/* 媒体查询，适配手机端 */
@media only screen and (max-width: 600px) {
.ditu-1 {
height: 200px; /* 在小屏幕设备上设置更小的高度 */
}
}
.cctv-banner {
position: relative;
width: 100%;
height: 80vh;
min-height: 500px;
max-height: 800px;
background: linear-gradient(135deg, #0a192f 0%, #1a365d 100%);
color: white;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 20px;
box-sizing: border-box;
}
.cctv-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://images.unsplash.com/photo-1558002038-1055907df827?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center;
background-size: cover;
opacity: 0.3;
z-index: 0;
}
.cctv-banner-content {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0px;
}
.cctv-banner h1 {
font-size: 3.5rem;
margin-bottom: 20px;
font-weight: 700;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.cctv-banner p {
font-size: 1.5rem;
margin-bottom: 30px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.cctv-banner-btn {
display: inline-block;
padding: 15px 30px;
background-color: #e63946;
color: white;
text-decoration: none;
font-weight: 600;
border-radius: 50px;
transition: all 0.3s ease;
font-size: 1.1rem;
margin: 10px;
border: none;
cursor: pointer;
}
.cctv-banner-btn:hover {
background-color: #c1121f;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.cctv-features {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 50px;
}
.cctv-feature-item {
margin: 0 20px;
max-width: 200px;
}
.cctv-feature-icon {
font-size: 2.5rem;
margin-bottom: 15px;
color: #4cc9f0;
}
.cctv-feature-text {
font-size: 1rem;
font-weight: 500;
}
/* 响应式设计 */
@media (max-width: 768px) {
.cctv-banner {
height: auto;
padding: 80px 20px;
}
.cctv-banner h1 {
font-size: 2.5rem;
}
.cctv-banner p {
font-size: 1.2rem;
}
.cctv-features {
flex-direction: column;
align-items: center;
}
.cctv-feature-item {
margin: 15px 0;
}
}
.cctv-new-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
color: #333;
background-color: #f9f9f9;
}
.cctv-new-header {
text-align: center;
margin-bottom: 40px;
}
.cctv-new-header h1 {
font-size: 2.5rem;
color: #2c3e50;
margin-bottom: 15px;
}
.cctv-new-header p {
font-size: 1.2rem;
color: #7f8c8d;
max-width: 800px;
margin: 0 auto;
}
.cctv-new-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 30px;
}
.cctv-new-feature {
background: #fff;
border-radius: 8px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.cctv-new-feature:hover {
transform: translateY(-5px);
}
.cctv-new-icon {
font-size: 2.5rem;
color: #3498db;
margin-bottom: 20px;
}
.cctv-new-feature h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: #2c3e50;
}
.cctv-new-feature p {
color: #7f8c8d;
line-height: 1.6;
}
@media (max-width: 768px) {
.cctv-new-header h1 {
font-size: 2rem;
}
.cctv-new-header p {
font-size: 1rem;
}
.cctv-new-features {
grid-template-columns: 1fr;
}
}
.product-cover-container {
background: #fff;
font-family: 'Segoe UI', system-ui;
}
.product-cover-commonweb {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.product-cover-nav {
padding: 20px 0;
border-bottom: 1px solid #f0f0f0;
}
.product-cover-title {
font-size: 24px;
color: #2c3e50;
margin-bottom: 20px;
position: relative;
padding-left: 32px;
}
.product-cover-title::before {
content: "\f07b";
font-family: "Font Awesome 5 Free";
position: absolute;
left: 0;
top: 3px;
font-size: 28px;
color: #3498db;
}
.product-cover-subnav {
position: relative;
margin: 15px 0;
}
.product-cover-subnav ul {
display: flex;
gap: 25px;
list-style: none;
overflow-x: auto;
padding-bottom: 10px;
}
.product-cover-subnav li a {
color: #7f8c8d;
text-decoration: none;
padding: 8px 0;
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.product-cover-subnav li a.cur,
.product-cover-subnav li a:hover {
color: #3498db;
font-weight: 600;
}
.product-cover-subnav li a.cur::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: #3498db;
animation: productUnderline 0.4s ease-out;
}
.product-cover-breadcrumb {
padding: 12px 0;
font-size: 14px;
color: #95a5a6;
}
.product-cover-breadcrumb a {
color: #95a5a6;
text-decoration: none;
transition: color 0.2s ease;
}
.product-cover-breadcrumb a:hover {
color: #3498db;
}
.product-cover-category {
margin: 0 auto;
padding: 15px 0;
}
.product-cover-category .swiper-slide {
display: inline-block;
padding: 10px 25px;
border-radius: 30px;
background: #f8f9fa;
margin: 0 8px;
transition: all 0.3s ease;
cursor: pointer;
border: 1px solid #eee;
font-size: 14px;
}
.product-cover-category .swiper-slide.cur,
.product-cover-category .swiper-slide:hover {
background: #3498db;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}
.product-cover-list {
display: grid;
gap: 30px;
padding: 30px 0;
}
/* 移动端适配 */
@media (max-width: 768px) {
.product-cover-subnav ul {
gap: 15px;
}
.product-cover-category .swiper-slide {
min-width: 100px;
padding: 8px 15px;
font-size: 13px;
}
.product-cover-list {
grid-template-columns: 1fr;
}
}
@keyframes productUnderline {
from { width: 0 }
to { width: 100% }
}
/* Cover List Styles */
.cover-list-container {
max-width: 1200px;
margin: 0 auto;
padding: 30px 20px;
}
.cover-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr); /* 强制三列布局 */
gap: 20px;
}
.cover-item {
position: relative;
transition: transform 0.3s ease;
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.cover-card {
text-decoration: none;
color: #333;
display: block;
position: relative;
}
.cover-media {
position: relative;
padding-top: 95%;
overflow: hidden;
}
.cover-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.cover-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 0.3s ease;
}
.cover-content {
padding: 20px;
position: relative;
}
.cover-title {
margin: 0;
font-size: 1.5rem;
line-height: 1.4;
color: #2d3748;
transition: color 0.3s ease;
font-weight: bold;
}
.cover-link-icon {
position: absolute;
right: 20px;
bottom: 20px;
opacity: 0;
transform: translateX(-10px);
transition: all 0.3s ease;
color: #4299e1;
}
/* Hover Effects */
.cover-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
.cover-item:hover .cover-image {
transform: scale(1.05);
}
.cover-item:hover .cover-overlay {
opacity: 1;
}
.cover-item:hover .cover-link-icon {
opacity: 1;
transform: translateX(0);
}
.cover-item:hover .cover-title {
color: #4299e1;
text-decoration: underline;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.cover-list {
grid-template-columns: 1fr;
gap: 20px;
}
.cover-content {
padding: 15px;
}
.cover-title {
font-size: 1.1rem;
}
}
.chanpindaohang-container {
max-width: 1200px;
margin: 10px auto;
padding: 0 15px;
font-family: 'Segoe UI', Arial, sans-serif;
}
.chanpindaohang-header {
border-bottom: 1px solid #e1e1e1;
margin-bottom: 25px;
padding-bottom: 15px;
}
.chanpindaohang-title {
font-size: 2.2rem;
color: #333;
margin: 0;
font-weight: 600;
position: relative;
padding-left: 20px;
}
.chanpindaohang-title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 70%;
background: #007bff;
}
.chanpindaohang-items {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.chanpindaohang-link {
position: relative;
padding: 12px 25px;
background: #f7f7f7;
border-radius: 30px;
color: #444;
text-decoration: none;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
font-size: 1.2rem;
}
.chanpindaohang-link i {
font-size: 0.8em;
opacity: 0;
transition: opacity 0.3s ease;
}
.chanpindaohang-link:hover {
background: #007bff;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,123,255,0.3);
}
.chanpindaohang-link:hover i {
opacity: 1;
}
.chanpindaohang-link.active {
background: #17a2b8;
color: #fff;
font-weight: 500;
}
@media (max-width: 768px) {
.chanpindaohang-container {
padding: 0 10px;
margin: 25px auto;
}
.chanpindaohang-title {
font-size: 1.8rem;
padding-left: 15px;
}
.chanpindaohang-link {
padding: 10px 20px;
font-size: 0.9rem;
flex: 1 1 45%;
justify-content: center;
}
.chanpindaohang-items {
gap: 8px;
}
}
@media (max-width: 480px) {
.chanpindaohang-link {
flex: 1 1 100%;
}
}
.products-ban {
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
color: white;
padding: 80px 20px;
overflow: hidden;
position: relative;
margin-top: 50px;
}
.products-ban-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 40px;
}
.products-ban-content {
flex: 1 1 60%;
min-width: 300px;
}
.products-ban-title {
font-size: 2.8rem;
margin-bottom: 25px;
line-height: 1.2;
position: relative;
}
.products-ban-title i {
margin-right: 15px;
color: #f1c40f;
}
.products-ban-subtitle {
font-size: 1.2rem;
margin-bottom: 30px;
opacity: 0.9;
max-width: 500px;
}
.products-ban-cta {
display: inline-block;
padding: 15px 35px;
background: #e74c3c;
color: white;
border-radius: 30px;
text-decoration: none;
transition: all 0.3s ease;
font-weight: 500;
}
.products-ban-cta:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
}
.products-ban-image {
flex: 1 1 35%;
position: relative;
perspective: 1000px;
}
.products-ban-card {
background: rgba(255, 255, 255, 0.1);
padding: 25px;
border-radius: 15px;
backdrop-filter: blur(10px);
transition: transform 0.3s ease;
}
.products-ban-card:hover {
transform: rotateY(10deg) scale(1.05);
}
/* 移动端适配 */
@media (max-width: 768px) {
.products-ban {
padding: 50px 20px;
margin-top: 0px;
}
.products-ban-title {
font-size: 2rem;
}
.products-ban-subtitle {
font-size: 1rem;
}
.products-ban-cta {
padding: 12px 25px;
}
.products-ban-container {
flex-direction: column;
text-align: center;
}
.products-ban-content {
min-width: auto;
}
}
.news-nr-container {
margin: 2rem auto;
max-width: 1200px;
font-family: 'Segoe UI', system-ui;
}
.news-nr-tab-content {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.news-nr-list {
padding: 20px;
}
.news-nr-item {
display: flex;
margin-bottom: 1.5rem;
background: #fff;
border-radius: 8px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.news-nr-item::after {
content: "\f061";
font-family: "Font Awesome 5 Free";
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: all 0.3s ease;
color: #2c7be5;
font-weight: 900;
}
.news-nr-item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
background: #f8f9fa;
}
.news-nr-item:hover::after {
opacity: 1;
right: 15px;
}
.news-nr-image {
flex: 0 0 280px;
height: 180px;
border-radius: 6px;
overflow: hidden;
position: relative;
}
.news-nr-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.news-nr-item:hover .news-nr-image img {
transform: scale(1.05);
}
.news-nr-content {
flex: 1;
padding: 15px 25px;
}
.news-nr-content h4 {
font-size: 1.8rem;
margin-bottom: 0.75rem;
color: #2d3748;
line-height: 1.4;
font-weight: bold;
}
.news-nr-content h4 a {
color: inherit;
text-decoration: none;
}
.news-nr-content p {
color: #718096;
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1rem;
}
.news-nr-meta {
display: flex;
align-items: center;
color: #a0aec0;
font-size: 0.85rem;
}
.news-nr-meta i {
margin-right: 8px;
font-size: 0.9em;
}
/* 分页样式 */
.news-nr-pagination {
margin: 2rem 0;
display: flex;
justify-content: center;
}
.news-nr-pagination ul {
display: flex;
gap: 8px;
}
.news-nr-pagination li {
list-style: none;
}
.news-nr-pagination a {
display: block;
padding: 8px 14px;
border-radius: 6px;
background: #edf2f7;
color: #4a5568;
text-decoration: none;
transition: all 0.2s ease;
}
.news-nr-pagination a:hover {
background: #2c7be5;
color: white;
}
/* 移动端适配 */
@media (max-width: 768px) {
.news-nr-item {
flex-direction: column;
margin-bottom: 2rem;
}
.news-nr-image {
flex: none;
width: 100%;
height: 200px;
}
.news-nr-content {
padding: 20px 15px;
}
.news-nr-item::after {
display: none;
}
}
/* header-li 组件样式 */
.header-li-menu {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
border-radius: 8px;
padding: 20px;
margin: 15px auto;
max-width: 1200px;
}
.header-li-nav-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.header-li-ul {
flex: 1;
min-width: 300px;
gap: 15px;
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
}
.header-li-link {
display: flex;
align-items: center;
padding: 12px 20px;
color: #2d3748;
border-radius: 6px;
transition: all 0.3s ease;
text-decoration: none;
background: rgba(255,255,255,0.9);
width: 100%;
box-sizing: border-box;
}
.header-li-link:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
background: #fff;
color: #2563eb;
}
.header-li-icon {
width: 24px;
margin-right: 12px;
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.header-li-link:hover .header-li-icon {
transform: scale(1.2);
}
.header-li-preview {
border-radius: 8px;
transition: transform 0.3s ease;
max-width: 100%;
height: auto;
object-fit: cover;
}
.header-li-img-container {
flex: 0 0 280px;
transition: opacity 0.3s ease;
}
/* 移动端适配 */
@media (max-width: 768px) {
.header-li-nav-container {
flex-direction: column;
}
.header-li-ul {
flex-direction: column;
}
.header-li-img-container {
display: none;
}
.header-li-link {
padding: 10px 15px;
}
}
.abput-new-container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) { .abput-new-container { max-width: 540px; } }
@media (min-width: 768px) { .abput-new-container { max-width: 720px; } }
@media (min-width: 992px) { .abput-new-container { max-width: 960px; } }
@media (min-width: 1200px) { .abput-new-container { max-width: 1140px; } }
.abput-new-row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.abput-new-col-md-4,
.abput-new-col-lg-6 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 768px) {
.abput-new-col-md-4 { flex: 0 0 33.33333%; max-width: 33.33333%; }
}
@media (min-width: 992px) {
.abput-new-col-lg-6 { flex: 0 0 50%; max-width: 50%; }
}
/* 基础样式 */
.abput-new-banner {
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
padding: 160px 0 120px;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.abput-new-section {
padding: 50px 0;
position: relative;
}
/* 时间轴样式 */
.abput-new-timeline {
position: relative;
padding: 40px 0;
}
.abput-new-timeline::before {
content: '';
position: absolute;
left: 50%;
width: 1px;
height: 100%;
background: #3498db;
transform: translateX(-50%);
}
.abput-new-timeline-item {
position: relative;
width: 50%;
padding: 20px 40px;
}
.abput-new-timeline-item:nth-child(odd) {
left: 0;
text-align: right;
}
.abput-new-timeline-item:nth-child(even) {
left: 50%;
}
.abput-new-timeline-dot {
position: absolute;
width: 24px;
height: 24px;
background: #fff;
border: 4px solid #3498db;
border-radius: 50%;
top: 30px;
}
.abput-new-timeline-item:nth-child(odd) .abput-new-timeline-dot {
right: -12px;
}
.abput-new-timeline-item:nth-child(even) .abput-new-timeline-dot {
left: -12px;
}
/* 响应式调整 */
@media (max-width: 768px) {
.abput-new-timeline::before { left: 12px; }
.abput-new-timeline-item {
width: 100%;
left: 0 !important;
padding-left: 50px;
padding-right: 0;
text-align: left !important;
}
.abput-new-timeline-dot {
left: 0 !important;
right: auto !important;
}
}
/* 其他组件样式（卡片、图标等保持之前优化） */
.abput-new-card {
background: #fff;
border-radius: 12px;
padding: 2.5rem;
margin-bottom: 30px;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.ab-banner {
position: relative;
width: 100%;
min-height: 500px;
background: linear-gradient(135deg, #1a237e 0%, #283593 50%, #3949ab 100%);
color: white;
overflow: hidden;
display: flex;
align-items: center;
padding: 60px 0;
}
.ab-banner__container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.ab-banner__content {
flex: 1;
min-width: 300px;
padding: 20px;
z-index: 2;
}
.ab-banner__title {
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
}
.ab-banner__subtitle {
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 30px;
max-width: 600px;
}
.ab-banner__features {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 40px;
}
.ab-banner__feature {
display: flex;
align-items: center;
transition: all 0.3s ease;
}
.ab-banner__feature-icon {
font-size: 1.5rem;
margin-right: 10px;
color: #4fc3f7;
transition: all 0.3s ease;
}
.ab-banner__feature:hover .ab-banner__feature-icon {
transform: scale(1.2);
color: #00e5ff;
}
.ab-banner__feature-text {
font-size: 1rem;
}
.ab-banner__cta {
display: inline-block;
padding: 12px 30px;
background-color: #00b0ff;
color: white;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 176, 255, 0.3);
}
.ab-banner__cta:hover {
background-color: #0091ea;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 176, 255, 0.4);
}
.ab-banner__image {
flex: 1;
min-width: 300px;
position: relative;
z-index: 1;
margin-top: 50px;
}
.ab-banner__image img {
max-width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: all 0.5s ease;
}
.ab-banner__image:hover img {
transform: scale(1.03);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}
/* 移动端适配 */
@media (max-width: 768px) {
.ab-banner {
min-height: auto;
padding: 40px 0;
text-align: center;
}
.ab-banner__content {
order: 2;
padding: 0;
}
.ab-banner__title {
font-size: 2.2rem;
}
.ab-banner__subtitle {
font-size: 1rem;
}
.ab-banner__features {
justify-content: center;
}
.ab-banner__image {
order: 1;
margin-bottom: 30px;
}
}
/* 背景装饰元素 */
.ab-banner__decor {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
}
.ab-banner__decor-1 {
width: 300px;
height: 300px;
top: -100px;
right: -100px;
}
.ab-banner__decor-2 {
width: 200px;
height: 200px;
bottom: -50px;
left: -50px;
}
.about-tech {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.about-tech h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
font-size: 2.2rem;
position: relative;
padding-bottom: 15px;
}
.about-tech h1:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: #3498db;
}
.about-tech h2 {
color: #2980b9;
margin-top: 30px;
font-size: 1.8rem;
display: flex;
align-items: center;
}
.about-tech h2 i {
margin-right: 10px;
color: #3498db;
}
.about-tech p {
margin-bottom: 20px;
font-size: 1.1rem;
text-align: justify;
}
.about-tech .highlight {
background-color: #f8f9fa;
padding: 20px;
border-radius: 5px;
margin: 25px 0;
border-left: 4px solid #3498db;
transition: all 0.3s ease;
}
.about-tech .highlight:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transform: translateY(-3px);
}
.about-tech .service-item {
display: flex;
margin-bottom: 20px;
align-items: flex-start;
}
.about-tech .service-icon {
font-size: 1.5rem;
color: #3498db;
margin-right: 15px;
min-width: 30px;
}
.about-tech .service-content {
flex: 1;
}
.about-tech .service-title {
font-weight: bold;
color: #2c3e50;
margin-bottom: 5px;
font-size: 1.2rem;
}
.about-tech .values-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin: 30px 0;
}
.about-tech .value-card {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
transition: all 0.3s ease;
}
.about-tech .value-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.about-tech .value-card i {
font-size: 2rem;
color: #3498db;
margin-bottom: 15px;
}
.about-tech .value-title {
font-weight: bold;
color: #2c3e50;
margin-bottom: 10px;
font-size: 1.2rem;
}
@media (max-width: 768px) {
.about-tech {
padding: 15px;
}
.about-tech h1 {
font-size: 1.8rem;
}
.about-tech h2 {
font-size: 1.5rem;
}
.about-tech .values-list {
grid-template-columns: 1fr;
}
}
/* 使用about-culture前缀确保不冲突 */
.about-culture-container {
font-family: 'Arial', sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
color: #333;
}
.about-culture-header {
text-align: center;
margin-bottom: 40px;
}
.about-culture-header h1 {
font-size: 2.5rem;
color: #2c3e50;
margin-bottom: 15px;
position: relative;
display: inline-block;
}
.about-culture-header h1:after {
content: '';
position: absolute;
width: 50%;
height: 3px;
background: linear-gradient(to right, #3498db, #2ecc71);
bottom: -10px;
left: 25%;
}
.about-culture-section {
margin-bottom: 50px;
background: #f9f9f9;
border-radius: 10px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-culture-section:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.about-culture-section h2 {
font-size: 1.8rem;
color: #2980b9;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.about-culture-section h2 i {
margin-right: 15px;
color: #3498db;
}
.about-culture-list {
list-style: none;
padding: 0;
}
.about-culture-list li {
margin-bottom: 15px;
padding-left: 30px;
position: relative;
font-size: 1.1rem;
line-height: 1.6;
}
.about-culture-list li:before {
content: '\f00c';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
left: 0;
color: #2ecc71;
}
.about-culture-list li:hover {
color: #2980b9;
transform: translateX(5px);
transition: all 0.3s ease;
}
.about-culture-highlight {
font-weight: bold;
color: #3498db;
}
/* 移动端适配 */
@media (max-width: 768px) {
.about-culture-container {
padding: 15px;
}
.about-culture-header h1 {
font-size: 2rem;
}
.about-culture-section {
padding: 20px;
}
.about-culture-section h2 {
font-size: 1.5rem;
}
.about-culture-list li {
font-size: 1rem;
padding-left: 25px;
}
}
/* 命名空间隔离：case-new 前缀 */
.case-new-container {
font-family: 'Segoe UI', Roboto, 'Microsoft YaHei', sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
color: #333;
}
.case-new-header {
text-align: center;
margin-bottom: 50px;
}
.case-new-title {
font-size: 2.5rem;
color: #2c3e50;
margin-bottom: 15px;
font-weight: 700;
background: linear-gradient(90deg, #3498db, #2c3e50);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.case-new-subtitle {
font-size: 1.2rem;
color: #7f8c8d;
max-width: 800px;
margin: 0 auto 30px;
line-height: 1.6;
}
.case-new-highlights {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 30px;
margin-bottom: 40px;
}
.case-new-highlight-item {
display: flex;
align-items: center;
background: #f8f9fa;
padding: 15px 25px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
transition: all 0.3s ease;
}
.case-new-highlight-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
background: #fff;
}
.case-new-highlight-icon {
font-size: 1.8rem;
margin-right: 15px;
color: #3498db;
}
.case-new-highlight-text {
font-weight: 600;
color: #2c3e50;
}
.case-new-content {
background: #fff;
border-radius: 12px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
margin-bottom: 40px;
}
.case-new-content p {
line-height: 1.8;
margin-bottom: 20px;
color: #555;
}
.case-new-industries {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin: 40px 0;
}
.case-new-industry-card {
border: 1px solid #eee;
border-radius: 8px;
padding: 25px;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
}
.case-new-industry-card:hover {
border-color: #3498db;
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.2);
transform: translateY(-3px);
}
.case-new-industry-icon {
font-size: 2.5rem;
color: #3498db;
margin-bottom: 15px;
}
.case-new-industry-name {
font-weight: 600;
margin-bottom: 10px;
color: #2c3e50;
}
.case-new-industry-desc {
font-size: 0.9rem;
color: #7f8c8d;
}
.case-new-cta {
text-align: center;
margin-top: 50px;
}
.case-new-cta-btn {
display: inline-block;
background: linear-gradient(135deg, #3498db, #2c3e50);
color: white;
padding: 15px 30px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.case-new-cta-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
background: linear-gradient(135deg, #2980b9, #34495e);
color: #fff;
}
/* 响应式设计 */
@media (max-width: 768px) {
.case-new-title {
font-size: 2rem;
}
.case-new-subtitle {
font-size: 1rem;
}
.case-new-highlights {
flex-direction: column;
align-items: center;
}
.case-new-highlight-item {
width: 100%;
justify-content: center;
}
.case-new-industries {
grid-template-columns: 1fr;
}
}
/* HTTP3 容器修正版 */
.http3 {
display: flex; /* 使用flex布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
margin: 0 auto; /* 自动边距 */
padding: 20px;
box-sizing: border-box;
}
/* 链接元素修正 */
.http3 a {
display: inline-block; /* 关键修正：使链接可居中 */
transition: all 0.3s ease;
}
/* 图片样式修正 */
.http3 img {
vertical-align: middle;
height: 24px; /* 替代原内联样式 */
width: auto; /* 保持原始宽高比 */
}
/* 手机端适配 */
@media (max-width: 768px) {
.http3 {
/* 手机端减少容器高度 */
min-height: 25vh;
padding: 10px;
}
}
/* 悬停效果优化 */
.http3 a:hover {
transform: scale(1.05);
opacity: 0.9;
filter:
drop-shadow(0 2px 4px rgba(0,0,0,0.1))
brightness(1.1); /* 增加亮度提升效果 */
}
.new-kefu {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9999;
}
.new-kefu-container {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.new-kefu-button {
width: 60px;
height: 60px;
background-color: #25D366;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all 0.3s ease;
}
.new-kefu-button:hover {
transform: scale(1.1);
background-color: #128C7E;
}
.new-kefu-phone {
background-color: white;
padding: 8px 12px;
border-radius: 20px;
margin-bottom: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
font-size: 16px;
color: #333;
opacity: 0;
transition: opacity 0.3s ease;
white-space: nowrap;
}
.new-kefu-button:hover + .new-kefu-phone {
opacity: 1;
}
/* 手机端适配 */
@media (max-width: 768px) {
.new-kefu-button {
width: 50px;
height: 50px;
font-size: 25px;
}
.new-kefu-phone {
font-size: 14px;
padding: 6px 10px;
}
}