/* =====================================================
   山东华航无人机中心官网
   新版CSS Part 1
   基础 + 导航 + 企业介绍
===================================================== */


/* =========================
   全局
========================= */


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    width:100%;

    background:#ffffff;

    color:#111111;

    font-family:
    "Microsoft YaHei",
    "PingFang SC",
    Arial,
    sans-serif;

    overflow-x:hidden;

}



img{

    max-width:100%;

    display:block;

}



a{

    text-decoration:none;

    color:inherit;

}




/* =====================================================
   顶部导航
===================================================== */


.header{


    width:100%;


    height:59px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    padding:0 40px;


    background:#0066CC;


}




/* =========================
   LOGO图片
========================= */


.logo{


    height:60px;


    display:flex;


    align-items:center;


}



.logo img{


    height:60px;


    width:auto;


}




.logo img:hover{


    opacity:.85;


}




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


nav{


    display:flex;


    align-items:center;


    gap:35px;


}



nav a{


    color:white;


    text-align:center;


    font-size:16px;


    font-weight:600;


    transition:.3s;


}



nav a span{


    display:block;


    margin-top:5px;


    font-size:10px;


    letter-spacing:1px;


    color:rgba(255,255,255,.75);


}




nav a:hover{


    color:#cccccc;


}



nav a:hover span{


    color:#aaaaaa;


}




/* =====================================================
   企业介绍
===================================================== */


.company-intro{


    width:100%;


    text-align:center;


    margin:25px auto 30px;


}



.company-intro p{


    margin:0;


    font-size:30px;


    font-weight:900;


    line-height:1.3;


    color:#111111;


}



.company-intro .en-text{


    margin-top:8px;


    font-size:16px;


    font-weight:700;


    letter-spacing:1px;


    color:#0066CC;


}

/* =====================================================
   第二部分
   首页企业介绍 + 双业务卡片
===================================================== */


/* ===============================
   企业介绍文字
================================ */


.company-intro {


    width:100%;


    text-align:center;


    margin:20px auto 25px;


}



.company-intro p {


    margin:0;


    font-size:28px;


    font-weight:900;


    line-height:1.3;


    color:#111;


}



.company-intro .en-text {


    margin-top:6px;


    font-size:16px;


    font-weight:600;


    color:#0066CC;


    line-height:1.4;


}





/* ===============================
   两大业务入口
================================ */


.business-box {


    width:calc(100% - 40px);


    margin:20px auto 25px;


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:20px;


}





/* 外层链接 */


.business-card-link {


    display:block;


    text-decoration:none;


}







/* ===============================
   卡片主体
================================ */


.business-card {


    height:500px;


    padding:30px;


    border-radius:18px;


    overflow:hidden;


    position:relative;


    transition:.35s;


}







/* 鼠标效果 */


.business-card-link:hover .business-card {


    transform:translateY(-8px);


    box-shadow:


    0 20px 45px rgba(0,0,0,.18);


}









/* ===============================
   培训卡片 蓝色
================================ */


.business-card-link:first-child .business-card {


    background:#0066CC;


    color:white;


}









/* ===============================
   产品卡片 白色
================================ */


.business-card-link:last-child .business-card {


    background:white;


    color:#0066CC;


    border:2px solid #0066CC;


}









/* ===============================
   新闻图片区域
================================ */


.business-news {


    width:calc(100% + 60px);


    margin:-30px -30px 10px;


}




.business-news img {


    width:100%;


    height:520px;


    object-fit:cover;


}







.business-news-title {


    padding:12px 20px 5px;


    font-size:20px;


    font-weight:900;


}







.business-news p {


    padding:0 20px;


    margin:0;


    font-size:14px;


    line-height:1.5;


}









/* 蓝色卡片新闻文字 */


.business-card-link:first-child .business-news-title,


.business-card-link:first-child .business-news p {


    color:white;


}









/* 白色卡片新闻文字 */


.business-card-link:last-child .business-news-title {


    color:#0066CC;


}



.business-card-link:last-child .business-news p {


    color:#333;


}









/* ===============================
   卡片标题
================================ */


.business-card h3 {


    margin-top:15px;


    margin-bottom:10px;


    font-size:46px;


    font-weight:900;


    line-height:1.2;


}







.business-card h3 small {


    display:block;


    margin-top:8px;


    font-size:14px;


    letter-spacing:2px;


}









.business-card-link:first-child h3,


.business-card-link:first-child h3 small {


    color:white;


}









.business-card-link:last-child h3,


.business-card-link:last-child h3 small {


    color:#0066CC;


}




/* ===============================
   卡片描述文字
================================ */


.business-card > p {


    margin:8px 0;


    font-size:16px;


    line-height:1.5;


}









.business-card-link:first-child .business-card > p {


    color:white;


}









.business-card-link:last-child .business-card > p {


    color:#0066CC;


}







.business-card .en-text {


    margin-top:8px;


    font-size:13px;


}








.business-card-link:first-child .en-text {


    color:white;


}







.business-card-link:last-child .en-text {


    color:#555;


}

/* =====================================================
   Part 3
   关于华航 + 页脚
===================================================== */


/* =========================
   关于华航区域
========================= */

.about-home {


    display:none;


}



/* =========================
   页脚 FOOTER
========================= */


footer {


    width:100%;


    height:120px;


    padding:12px 50px;


    display:grid;


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


    align-items:center;


    gap:30px;


    background:#0066CC;


    color:white;


    box-sizing:border-box;


}



/* 左侧公司 */

.footer-left {


    text-align:left;


}



.footer-left h3 {


    margin:0 0 5px;


    font-size:18px;


    line-height:1.2;


    font-weight:900;


    color:white;


}



.footer-left p {


    margin:3px 0;


    font-size:13px;


    line-height:1.3;


    color:white;


}



/* 联系方式 */


.footer-contact {


    text-align:center;


}



.footer-contact h3 {


    margin:0 0 5px;


    font-size:18px;


    line-height:1.2;


    color:white;


}



.phone-list div {


    font-size:14px;


    line-height:1.25;


    margin:2px 0;


    color:white;


}



.email {


    margin-top:4px;


    font-size:13px;


    line-height:1.2;


    color:white;


}



/* 右侧业务 */


.footer-service {


    text-align:right;


}



.footer-service p {


    margin:2px 0;


    font-size:13px;


    line-height:1.25;


    color:white;


}



/* =====================================================
   页面第一屏高度优化
===================================================== */


/* 企业介绍压缩 */

.company-intro {


    margin:20px auto 25px;


}



.company-intro p {


    font-size:26px;


    line-height:1.35;


}



.company-intro .en-text {


    margin-top:5px;


    font-size:15px;


    line-height:1.3;


}




/* 卡片文字区域压缩 */


.business-card h3 {


    font-size:42px;


    margin:15px 0 10px;


}



.business-card h3 small {


    margin-top:5px;


    font-size:12px;


}



.business-card p {


    font-size:15px;


    line-height:1.45;


    margin:5px 0;


}



.business-card .en-text {


    margin-top:8px;


    line-height:1.4;


}




/* 新闻区域保持照片比例 */


.business-news img {


    height:280px;


    object-fit:cover;


}



/* =====================================================
   鼠标交互
===================================================== */


/* 所有链接 */

a {


    cursor:pointer;


}



nav a:hover {


    color:#dddddd;


}



nav a:hover span {


    color:#aaaaaa;


}




/* 卡片反馈 */


.business-card-link:hover .business-card {


    transform:translateY(-8px);


    box-shadow:


    0 18px 40px rgba(0,102,204,.35);


}




.business-card-link:hover .business-news img {


    transform:scale(1.04);


}



.business-news img {


    transition:.4s;


}



/* =====================================================
   平板适配
===================================================== */


@media(max-width:1024px){


    .business-box {


        grid-template-columns:1fr;


    }



    footer {


        height:auto;


        grid-template-columns:1fr;


        text-align:center;


        padding:25px;


    }



    .footer-left,
    .footer-contact,
    .footer-service {


        text-align:center;


    }


}



/* =====================================================
   手机适配
===================================================== */


@media(max-width:768px){



.header {


    height:70px;


    padding:0 20px;


}



.logo img {


    height:55px;


}



nav {


    display:none;


}




.business-box {


    width:94%;


}



.business-card {


    padding:25px;


}



.business-news {


    margin:-25px -25px 20px;


}



.business-news img {


    height:180px;


}




.business-card h3 {


    font-size:32px;


}




footer {


    height:auto;


}



}