/* 全局重置 & 字体 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "pingfang SC", "helvetica neue", arial, "hiragino sans gb", "microsoft yahei ui", "microsoft yahei", simsun, sans-serif !important;
background: #fff;
min-width: 320px;
color: #333;
}
a {
text-decoration: none;
cursor: pointer;
}
a:hover {
text-decoration: none;
}
ul, ol, li {
list-style: none;
padding: 0;
margin: 0;
}
img {
border: 0;
vertical-align: middle;
max-width: 100%;
height: auto;
}
/* 容器：最大宽度1350px */
.zt-container {
max-width: 1350px;
margin: 0 auto;
padding: 0 20px;
}
/* 每部分上下padding 90px */
.zt-section {
padding: 90px 0;
}
/* 标题：30px #000 居中 */
.zt-title {
font-size: 30px;
color: #000;
text-align: center;
font-weight: bold;
margin-bottom: 10px;
}
/* 卡片、按钮圆角10px */
.zt-card, .zt-btn {
border-radius: 10px !important;
}
/* 按钮 hover效果 */
.zt-btn:hover {
opacity: 0.85;
transform: scale(1.02);
transition: all 0.25s ease;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
/* banner ———— 由三张图片拼接组成，原页面结构 */
.zt-banner {
width: 100%;
min-height: 625px;
text-align: center;
background: #306;
}
.zt-banner .zt-ban-img1 {
height: 212px;
display: block;
background: url("images/txsj_01.jpg") no-repeat center top;
margin: 0;
padding: 0;
}
.zt-banner .zt-ban-img2 {
height: 198px;
display: block;
background: url("images/txsj_02.jpg") no-repeat center top;
margin: 0;
padding: 0;
}
.zt-banner .zt-ban-img3 {
height: 215px;
display: block;
background: url("images/txsj_03.jpg") no-repeat center top;
margin: 0;
padding: 0;
}
/* 卡片网格 ———— display:grid */
.zt-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
/* 套餐卡片 ———— 原样式保留 */
.zt-server-card {
background: #fff;
border: 1px solid #eee;
border-right: 0;
padding: 26px 42px 30px 40px;
transition: all 0.3s ease;
}
.zt-server-card:last-child {
border-right: 1px solid #eee;
}
.zt-server-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
position: relative;
z-index: 2;
}
.zt-server-card .zt-card-title {
font-size: 18px;
color: #333;
font-weight: bold;
}
.zt-server-card .zt-card-title strong {
color: #e60000;
}
.zt-server-card .zt-card-title span {
font-size: 14px;
font-weight: normal;
}
.zt-server-card .zt-card-desc {
font-size: 14px;
color: #333;
margin-top: 16px;
}
.zt-server-card .zt-card-desc + .zt-card-desc {
margin-top: 6px;
}
.zt-server-card .zt-card-price {
font-size: 36px;
line-height: 36px;
color: #e60000;
margin-top: 30px;
height: 36px;
}
.zt-server-card .zt-card-price span {
font-size: 14px;
color: #333;
font-weight: normal;
}
.zt-server-card .zt-card-btn {
margin-top: 24px;
}
.zt-server-card .zt-card-btn a {
font-size: 16px;
display: inline-block;
width: 150px;
height: 44px;
line-height: 44px;
text-align: center;
color: #6CAB0F;
border-radius: 10px;
border: 1px solid #437E3A;
transition: all 0.3s ease;
}
.zt-server-card .zt-card-btn a:hover {
background-color: #437E3A;
color: #fff;
}
/* 中间横幅 ———— 修正图片路径 */
.zt-banner-mid {
background: url("newimages/08.jpg") no-repeat center center;
background-size: cover;
width: 100%;
height: 110px;
display: flex;
align-items: center;
}
.zt-banner-mid .zt-bm-left {
float: left;
width: 806px;
height: 110px;
}
.zt-banner-mid .zt-bm-right {
float: left;
height: 110px;
}
.zt-banner-mid .zt-bm-left .zt-bm-title {
color: #fff;
font-size: 24px;
line-height: 24px;
margin-top: 20px;
}
.zt-banner-mid .zt-bm-left .zt-bm-desc {
font-size: 12px;
color: #d3d2e4;
margin-top: 5px;
padding-left: 12px;
background: url("newimages/13.png") no-repeat left 8px;
}
.zt-banner-mid .zt-bm-right a {
font-size: 14px;
display: inline-block;
width: 182px;
height: 44px;
line-height: 44px;
text-align: center;
color: #fff;
border-radius: 20px;
margin-top: 32px;
border: 1px solid #fff;
transition: all 0.3s ease;
}
.zt-banner-mid .zt-bm-right a:hover {
background-color: #fff;
color: #211f77;
}
/* 介绍区域 ———— 修正图片路径 */
.zt-feature-wrap {
overflow: hidden;
margin-top: 45px;
}
.zt-feature-img {
float: left;
width: 632px;
height: 298px;
background: url("images/hk.png") no-repeat left center;
}
.zt-feature-list {
float: left;
width: 358px;
}
.zt-feature-list ul li {
padding-left: 45px;
}
.zt-feature-list ul li .zt-fl-title {
font-size: 16px;
color: #222;
}
.zt-feature-list ul li .zt-fl-title span {
font-weight: bold;
}
.zt-feature-list ul li .zt-fl-desc {
font-size: 12px;
line-height: 18px;
margin-top: 10px;
color: #888;
}
.zt-mart50 {
margin-top: 50px;
}
/* 图标背景 ———— 修正图片路径 */
.zt-icon1 { background: url("newimages/01.png") no-repeat left top; }
.zt-icon2 { background: url("newimages/02.png") no-repeat left top; }
.zt-icon3 { background: url("newimages/03.png") no-repeat left top; }
.zt-icon4 { background: url("newimages/04.png") no-repeat left top; }
.zt-icon5 { background: url("newimages/05.png") no-repeat left top; }
.zt-icon6 { background: url("newimages/06.png") no-repeat left top; }
/* 其他机房推荐 ———— 修正图片路径 */
.zt-other-wrap {
width: 1070px;
margin: 0 auto;
height: 460px;
}
.zt-other-wrap .zt-other-title {
margin: 0 auto;
padding-top: 60px;
margin-top: 30px;
font-size: 30px;
text-align: center;
}
.zt-other-item {
width: 395px;
height: 191px;
background: url("images/Ned_pic_41.jpg") no-repeat;
float: left;
margin: 30px 60px;
padding: 35px 0 0 30px;
transition: all 0.3s ease;
}
.zt-other-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.zt-other-item.zt-other-xg {
background: url("images/Ned_pic_43.jpg") no-repeat;
}
.zt-other-item p {
width: 220px;
font-size: 22px;
color: #fff;
}
.zt-other-item p span {
color: #15d6ff;
font-size: 30px;
}
.zt-other-item a {
display: inline-block;
width: 137px;
height: 33px;
line-height: 33px;
text-align: center;
color: #fff;
font-size: 16px;
background: #15d6ff;
border-radius: 30px;
margin-top: 20px;
transition: all 0.3s ease;
}
.zt-other-item a:hover {
background: #00e1de;
}
.zt-other-item.zt-other-xg p {
width: 200px;
}
.zt-clear {
clear: both;
}
/* 解决方案 ———— 修正图片路径 */
.zt-solution-wrap {
width: 1102px;
margin: 0 auto;
overflow: hidden;
padding-bottom: 50px;
}
.zt-solution-wrap .zt-solution-title {
font-size: 30px;
text-align: center;
padding: 50px 0px;
}
.zt-solution-img {
width: 808px;
margin: 0 auto;
margin-bottom: 30px;
padding-left: 80px;
}
.zt-solution-img img {
max-width: 100%;
}
.zt-solution-btn {
width: 600px;
margin: 0 auto;
margin-top: 40px;
}
.zt-solution-btn a {
font-size: 18px;
display: block;
width: 183px;
height: 43px;
border-radius: 50px;
text-align: center;
line-height: 43px;
float: left;
transition: all 0.3s ease;
}
.zt-solution-btn .zt-btn-more {
border: 1px solid #e60012;
color: #e60012;
}
.zt-solution-btn .zt-btn-more:hover {
border-color: #313131;
color: #313131;
}
.zt-solution-btn .zt-btn-custom {
float: right;
border: 1px solid #313131;
color: #313131;
}
.zt-solution-btn .zt-btn-custom:hover {
border-color: #e60012;
color: #e60012;
}
/* 选择原因 ———— 原样式 */
.zt-choose-wrap {
background-color: #f7f8f9;
padding: 50px 0 30px 0;
border-bottom: 1px solid #eceeef;
}
.zt-choose-wrap .zt-choose-title {
font-size: 30px;
line-height: 30px;
color: #000;
text-align: center;
}
/* 移动端适配 */
@media (max-width: 1200px) {
.zt-other-wrap { width: 100%; height: auto; }
.zt-other-item { margin: 15px 20px; }
.zt-solution-wrap { width: 100%; padding: 0 20px 50px; }
.zt-solution-img { width: 100%; padding-left: 0; }
.zt-solution-btn { width: 100%; }
}
@media (max-width: 992px) {
.zt-grid-3 { grid-template-columns: repeat(2, 1fr); }
.zt-server-card { border-right: 1px solid #eee; }
.zt-server-card:nth-child(2) { border-right: 1px solid #eee; }
.zt-server-card:nth-child(3) { border-right: 1px solid #eee; }
.zt-feature-img { float: none; width: 100%; height: 200px; background-size: contain; }
.zt-feature-list { float: none; width: 100%; }
.zt-other-item { float: none; margin: 15px auto; }
.zt-other-wrap { height: auto;overflow: hidden;}
.zt-banner .zt-ban-img1 { height: 160px; background-size: cover; }
.zt-banner .zt-ban-img2 { height: 150px; background-size: cover; }
.zt-banner .zt-ban-img3 { height: 160px; background-size: cover; }
}
@media (max-width: 768px) {
.zt-section { padding: 60px 0; }
.zt-title { font-size: 24px; }
.zt-grid-3 { grid-template-columns: 1fr; }
.zt-server-card { border-right: 1px solid #eee; }
.zt-banner { min-height: 200px; }
.zt-banner .zt-ban-img1 { height: 120px; background-size: cover; }
.zt-banner .zt-ban-img2 { height: 110px; background-size: cover; }
.zt-banner .zt-ban-img3 { height: 120px; background-size: cover; }
.zt-banner-mid { height: auto; padding: 20px 0; flex-direction: column; }
.zt-banner-mid .zt-bm-left { width: 100%; height: auto; float: none; }
.zt-banner-mid .zt-bm-right { width: 100%; height: auto; float: none; text-align: center; }
.zt-banner-mid .zt-bm-right a { margin-top: 10px; }
.zt-other-item { width: 100%; max-width: 395px; }
.zt-solution-btn { width: 100%; }
.zt-solution-btn a { float: none; margin: 10px auto; }
.zt-solution-btn .zt-btn-custom { float: none; }
.zt-choose-wrap { padding: 30px 0; }
}
@media (max-width: 480px) {
.zt-title { font-size: 20px; }
.zt-banner .zt-ban-img1 { height: 80px; }
.zt-banner .zt-ban-img2 { height: 70px; }
.zt-banner .zt-ban-img3 { height: 80px; }
.zt-server-card { padding: 20px; }
.zt-server-card .zt-card-price { font-size: 28px; }
.zt-other-item p { width: 100%; font-size: 18px; }
.zt-other-item p span { font-size: 24px; }
}