/*==========================================================
    文件名称：style.css

    项目名称：北京泰莫环保设备有限公司官网

    文件说明：

    本文件用于控制整个网站的显示样式。

    包括：

    1、页面初始化
    2、导航栏
    3、Banner
    4、公共模块
    5、产品展示
    6、工程案例
    7、联系我们
    8、页脚
    9、响应式布局

==========================================================*/


/*==========================================================
    全局变量

    使用CSS变量统一管理颜色，
    后续修改主题色只需修改这里。

==========================================================*/

:root{

    --primary:#0B4A8B;

    --dark:#23384d;

    --light:#f5f7fa;

    --text:#333333;

    --border:#e5e5e5;

    --white:#ffffff;

}



/*==========================================================
    页面初始化

==========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



body{

    font-family:"Microsoft YaHei",sans-serif;

    font-size:16px;

    color:var(--text);

    line-height:1.8;

    background:#fff;

}



/* 去掉列表样式 */

ul{

    list-style:none;

}



/* 去掉超链接下划线 */

a{

    text-decoration:none;

    color:inherit;

}



/* 图片自适应 */

img{

    display:block;

    width:100%;

}



/*==========================================================
    公共容器

==========================================================*/

.container{

    width:1200px;

    max-width:95%;

    margin:0 auto;

}



/*==========================================================
    公共Section

==========================================================*/

.section{

    padding:80px 0;

}



/* 灰色背景 */

.gray{

    background:var(--light);

}



/*==========================================================
    模块标题

==========================================================*/

.section-title{

    text-align:center;

    margin-bottom:60px;

}



.section-title h2{

    font-size:34px;

    color:var(--dark);

    margin-bottom:10px;

}



.section-title p{

    color:#888;

    letter-spacing:2px;

}



/*==========================================================
    Header

==========================================================*/

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:80px;

    background:#fff;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

    z-index:999;

}



.header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:100%;

}



/*==========================================================
    Logo

==========================================================*/

.logo h2{

    color:var(--primary);

    font-size:28px;

}



.logo p{

    font-size:12px;

    color:#666;

}



/*==========================================================
    导航菜单

==========================================================*/

nav ul{

    display:flex;

    gap:35px;

}



nav a{

    color:#333;

    transition:.3s;

}



nav a:hover{

    color:var(--primary);

}



.active{

    color:var(--primary);

    font-weight:bold;

}



/*==========================================================
    Banner

==========================================================*/

.banner{

    margin-top:80px;

    height:600px;

    background:url("../images/banner.jpg") center center no-repeat;

    background-size:cover;

    position:relative;

}



/* Banner遮罩 */

.banner::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(8,40,70,.55);

}



/* Banner内容 */

.banner .container{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    height:100%;

}



.banner-content{

    max-width:700px;

    color:#fff;

}



.banner h1{

    font-size:48px;

    line-height:1.4;

    margin-bottom:30px;

}



.banner p{

    font-size:20px;

    margin-bottom:40px;

}



/*==========================================================
    按钮

==========================================================*/

.btn{

    display:inline-block;

    padding:14px 36px;

    background:var(--primary);

    color:#fff;

    border-radius:4px;

    transition:.3s;

    margin-right:15px;

}



.btn:hover{

    background:#083a6d;

}



.btn-white{

    background:#fff;

    color:var(--primary);

}



.btn-white:hover{

    background:#f2f2f2;

}

/*==========================================================
    关于我们（About）

    首页公司简介区域

==========================================================*/

.about-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

}

/* 左侧文字区域 */

.about-text{

    flex:1;

}

.about-text p{

    margin-bottom:20px;

    color:#555;

    text-align:justify;

}

/* 公司图片 */

.about-image{

    flex:1;

}

.about-image img{

    border-radius:8px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}



/*==========================================================
    四列布局

    用于：

    企业优势

    产品中心

==========================================================*/

.grid4{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}



/*==========================================================
    三列布局

    用于：

    工程案例

==========================================================*/

.grid3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



/*==========================================================
    企业优势卡片

==========================================================*/

.card{

    background:#fff;

    padding:35px 30px;

    text-align:center;

    border-radius:8px;

    border:1px solid var(--border);

    transition:.3s;

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:0 12px 25px rgba(0,0,0,.08);

}

.card h3{

    color:var(--primary);

    margin-bottom:15px;

    font-size:22px;

}

.card p{

    color:#666;

    font-size:15px;

}



/*==========================================================
    产品卡片

==========================================================*/

.product-card{

    background:#fff;

    border-radius:8px;

    overflow:hidden;

    border:1px solid var(--border);

    transition:.3s;

}

.product-card:hover{

    transform:translateY(-6px);

    box-shadow:0 12px 25px rgba(0,0,0,.08);

}

/* 产品图片 */

.product-card img{

    height:220px;

    object-fit:cover;

}

/* 产品标题 */

.product-card h3{

    font-size:22px;

    margin:25px 20px 15px;

    color:var(--dark);

}

/* 产品简介 */

.product-card p{

    margin:0 20px 25px;

    color:#666;

    min-height:80px;

}

/* 产品按钮 */

.product-card .btn{

    margin:0 20px 25px;

}



/*==========================================================
    工程案例卡片

==========================================================*/

.case-card{

    background:#fff;

    border-radius:8px;

    overflow:hidden;

    border:1px solid var(--border);

    transition:.3s;

}

.case-card:hover{

    transform:translateY(-6px);

    box-shadow:0 12px 25px rgba(0,0,0,.08);

}

.case-card img{

    height:230px;

    object-fit:cover;

}

.case-card h3{

    margin:25px 20px 15px;

    font-size:22px;

}

.case-card p{

    margin:0 20px 25px;

    color:#666;

    min-height:80px;

}

.case-card .btn{

    margin:0 20px 25px;

}



/*==========================================================
    联系我们

==========================================================*/

.contact{

    background:#f8f9fb;

}

.contact-box{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

}

.contact-info{

    flex:1;

}

.contact-info h3{

    font-size:28px;

    color:var(--primary);

    margin-bottom:20px;

}

.contact-info p{

    margin-bottom:20px;

    color:#666;

}

.contact-info ul{

    margin-bottom:30px;

}

.contact-info li{

    margin-bottom:15px;

    color:#555;

}

/* 联系图片 */

.contact-image{

    flex:1;

}

.contact-image img{

    border-radius:8px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}



/*==========================================================
    Footer

==========================================================*/

footer{

    background:#1f2f42;

    color:#ccc;

    padding:60px 0 25px;

}

.footer-top{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:40px;

    margin-bottom:40px;

}

.footer-item h3{

    color:#fff;

    margin-bottom:20px;

    font-size:20px;

}

.footer-item p{

    color:#bbb;

}

.footer-item ul li{

    margin-bottom:12px;

}

.footer-item a{

    color:#bbb;

    transition:.3s;

}

.footer-item a:hover{

    color:#fff;

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.1);

    padding-top:20px;

    text-align:center;

    font-size:14px;

    color:#999;

}

/*==========================================================
    内页 Banner

    适用于：
    关于我们
    产品中心
    工程案例
    联系我们

==========================================================*/

.page-banner{

    margin-top:80px;

    height:260px;

    background:url("../images/banner.jpg") center center no-repeat;

    background-size:cover;

    position:relative;

}

.page-banner::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(11,74,139,.65);

}

.page-banner .container{

    position:relative;

    z-index:2;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    color:#fff;

}

.page-banner h1{

    font-size:40px;

    margin-bottom:15px;

}

.page-banner p{

    font-size:18px;

    color:#f5f5f5;

}



/*==========================================================
    返回顶部按钮

==========================================================*/

.back-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:20px;

    cursor:pointer;

    display:none;

    transition:.3s;

    box-shadow:0 5px 15px rgba(0,0,0,.2);

}

.back-top:hover{

    background:#083a6d;

}



/*==========================================================
    通用表格

    后续产品参数可直接使用

==========================================================*/

table{

    width:100%;

    border-collapse:collapse;

    margin-top:30px;

}

table th{

    background:var(--primary);

    color:#fff;

    padding:15px;

    text-align:center;

}

table td{

    border:1px solid var(--border);

    padding:15px;

    text-align:center;

}

table tr:nth-child(even){

    background:#fafafa;

}



/*==========================================================
    简单淡入动画

==========================================================*/

.fade{

    opacity:0;

    transform:translateY(30px);

    transition:.6s;

}

.fade.show{

    opacity:1;

    transform:translateY(0);

}



/*==========================================================
    平板响应式

==========================================================*/

@media (max-width:992px){

    .container{

        width:95%;

    }

    .about-content{

        flex-direction:column;

    }

    .contact-box{

        flex-direction:column;

    }

    .grid4{

        grid-template-columns:repeat(2,1fr);

    }

    .grid3{

        grid-template-columns:repeat(2,1fr);

    }

    .banner{

        height:500px;

    }

    .banner h1{

        font-size:40px;

    }

}



/*==========================================================
    手机响应式

==========================================================*/

@media (max-width:768px){

    .header{

        height:auto;

        padding:15px 0;

    }

    .header .container{

        flex-direction:column;

        gap:20px;

    }

    nav ul{

        flex-wrap:wrap;

        justify-content:center;

        gap:20px;

    }

    .banner{

        height:420px;

    }

    .banner h1{

        font-size:30px;

    }

    .banner p{

        font-size:16px;

    }

    .section{

        padding:60px 0;

    }

    .grid4{

        grid-template-columns:1fr;

    }

    .grid3{

        grid-template-columns:1fr;

    }

    .btn{

        display:block;

        width:180px;

        margin:15px auto;

        text-align:center;

    }

    .footer-top{

        grid-template-columns:1fr;

        text-align:center;

    }

}



/*==========================================================
    小屏手机

==========================================================*/

@media (max-width:480px){

    .section-title h2{

        font-size:28px;

    }

    .banner h1{

        font-size:26px;

    }

    .page-banner h1{

        font-size:30px;

    }

    .logo h2{

        font-size:24px;

    }

}

/*==========================================================
    ICP备案号

==========================================================*/

.footer-bottom p{

    margin:6px 0;

}

.footer-bottom a{

    color:#999;

    text-decoration:none;

    transition:.3s;

}

.footer-bottom a:hover{

    color:#ffffff;

}


/*==========================================================
    文件结束

    style.css V1.0

==========================================================*/