/*
 Theme Name: 拓阳电力企业官网
 Theme URI: https://fangshuban.com
 Author: 厂家官网模板
 Description: 铝合金挡水板、配电室挡鼠板电力设备企业模板，SEO优化自适应
 Version: 1.0
 Text Domain: tuoyang
*/
*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft Yahei",sans-serif;}
a{text-decoration:none;color:#333;}
ul{list-style:none;}
body{color:#333;font-size:14px;line-height:1.8;background:#fff;padding-top:80px;}
.container{width:1200px;margin:0 auto;padding:0 15px;}

/* 导航头部 */
.header{height:80px;line-height:80px;background:#fff;box-shadow:0 2px 10px #eee;position:fixed;width:100%;top:0;z-index:999;}
.header .container{display:flex;justify-content:space-between;align-items:center;height:100%;}
.logo{font-size:24px;font-weight:bold;color:#0066cc;}
.nav ul{display:flex;}
.nav ul li{margin:0 20px;}
.nav ul li a{font-size:15px;color:#333;transition:all 0.3s;}
.nav ul li a:hover,.nav ul li a.active{color:#0066cc;}
.tel{font-size:16px;color:#fff;background:#0066cc;padding:8px 20px;border-radius:30px;}

/* 面包屑导航SEO */
.bread{padding:12px 0;background:#f6f6f6;margin-top:80px;font-size:13px;color:#666;}
.bread a{color:#0066cc;margin:0 5px;}

/* 首屏横幅 */
.banner{height:500px;background:#0066cc;margin-top:0;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;}
.banner h1{font-size:48px;margin-bottom:20px;line-height:1.3;}
.banner p{font-size:18px;opacity:0.9;}

/* 通用区块 */
.section{padding:80px 0;}
.title{text-align:center;margin-bottom:50px;}
.title h2{font-size:32px;color:#222;margin-bottom:15px;position:relative;display:inline-block;}
.title h2:after{content:'';width:60px;height:3px;background:#0066cc;position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);}
.title p{color:#666;font-size:15px;}

/* 关于我们布局 */
.about-box{display:flex;gap:40px;align-items:center;}
.about-text{flex:1;}
.about-text p{margin-bottom:15px;color:#555;text-indent:2em;}
.about-img{flex:1;height:300px;background:#f5f5f5;border-radius:8px;overflow:hidden;}
.about-img img{width:100%;height:100%;object-fit:cover;}

/* 产品列表 */
.product-list{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.product-item{border:1px solid #eee;border-radius:8px;overflow:hidden;transition:all 0.3s;}
.product-item:hover{box-shadow:0 5px 20px #eee;transform:translateY(-5px);}
.product-img{height:200px;background:#f5f5f5;overflow:hidden;}
.product-img img{width:100%;height:100%;object-fit:cover;}
.product-text{padding:20px;}
.product-text h3{font-size:18px;margin-bottom:10px;color:#222;}
.product-text p{color:#666;font-size:14px;}

/* 案例列表 */
.case-list{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.case-item{border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 2px 10px #eee;}
.case-img{height:180px;background:#f5f5f5;overflow:hidden;}
.case-img img{width:100%;height:100%;object-fit:cover;}
.case-text{padding:15px;}
.case-text h4{margin-bottom:8px;color:#222;}

/* 联系表单 */
.contact-box{display:flex;gap:50px;}
.contact-info{flex:1;}
.contact-info p{margin:15px 0;font-size:15px;color:#555;}
.contact-info p strong{color:#0066cc;width:100px;display:inline-block;}
.contact-form{flex:1;}
.contact-form input,.contact-form textarea{width:100%;height:45px;border:1px solid #eee;padding:0 15px;margin-bottom:15px;border-radius:4px;}
.contact-form textarea{height:120px;padding:15px;resize:none;}
.contact-form button{width:100%;height:45px;background:#0066cc;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px;}

/* 底部版权 */
.footer{background:#222;color:#aaa;padding:50px 0;text-align:center;}
.footer p{margin:10px 0;font-size:14px;}
.footer a{color:#7fb8f0;}

/* 404专用 */
.error-box{width:100%;height:calc(100vh - 80px);display:flex;align-items:center;justify-content:center;}
A:link {COLOR: #555555; TEXT-DECORATION: none}
A:visited {COLOR: #555555; TEXT-DECORATION: none}
A:active {COLOR: #555555; TEXT-DECORATION: none}
A:hover {COLOR: #6f9822; TEXT-DECORATION: none}
.text {FONT-SIZE: 12px; COLOR: #555555; FONT-FAMILY: "微软雅黑"; TEXT-DECORATION: none}
.STYLE1 {font-size: 13px}

/* ========== 移动端汉堡菜单 ========== */
.mobile-menu-btn {
    display: none;
    font-size: 28px;
    color: #0066cc;
    background: transparent;
    border: 0;
    cursor: pointer;
}
@media(max-width:768px){
    .mobile-menu-btn {
        display: block;
    }
}
.mobile-nav {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 4px 10px #eee;
    padding: 20px;
    display: none;
    z-index: 998;
}
.mobile-nav ul {
    flex-direction: column;
    gap: 16px;
    text-align: center;
}
.mobile-nav a {
    font-size: 16px;
    display: block;
    padding: 8px 0;
}
.mobile-nav a.active {
    color: #0066cc;
}

/* ========== 手机底部悬浮导航（对标sahngshuban.com /253161.com） ========== */
@media (min-width:769px){
    .mobile-bottom-bar{display:none !important;}
    body{padding-bottom:0 !important;}
}
@media (max-width:768px){
    body{
        padding-bottom: 70px !important;
    }
    .mobile-bottom-bar{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        position: fixed;
        bottom: env(safe-area-inset-bottom, 0);
        left: 0;
        width: 100%;
        height: 62px;
        background: #0066cc;
        z-index: 9999;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.12);
    }
    .mobile-bottom-bar a{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 12px;
        gap: 4px;
    }
    .mobile-bottom-bar a i{
        font-size: 20px;
    }
    .mobile-bottom-bar a.tel-btn{
        background: #0052aa;
    }
    .mobile-bottom-bar a.wechat-btn{
        background: #004899;
    }
}

/* ========== 移动端自适应全局优化 ========== */
@media(max-width:1200px){.container{width:100%;padding:0 20px;}}
@media(max-width:768px){
    .nav{display:none;}
    .banner {
        height: auto;
        padding: 60px 0;
    }
    .banner h1 {
        font-size: 24px;
        line-height: 1.4;
    }
    .banner p {
        font-size: 15px;
    }
    .bread {
        font-size: 14px;
    }
    .section {
        padding: 50px 0;
    }
    .title h2 {
        font-size: 24px;
    }
    .product-list,.case-list{grid-template-columns:repeat(1,1fr);}
    .about-box,.contact-box{flex-direction:column;}
    .contact-form input, .contact-form textarea {
        height: 42px;
    }
    .footer p {
        line-height: 1.6;
    }
}