/* ===========================
   基础设置
=========================== */


* {

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

}


html {

    scroll-behavior: smooth;

}



body {

    font-family:

        "Microsoft YaHei",
        Arial,
        sans-serif;


    background: #fff;

    color: #123b78;


}



img {

    max-width: 100%;

    display: block;

}



a {

    text-decoration: none;

    color: inherit;

}



.header {

    height: 80px;

    background: white;

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

    position: sticky;

    top: 0;

    z-index: 99;


}



.nav {


    max-width: 1200px;

    height: 100%;

    margin: auto;

    padding: 0 20px;


    display: flex;

    align-items: center;

    justify-content: space-between;


}



.logo-box {

    display: flex;

    align-items: center;

    gap: 15px;

    font-size: 18px;

    font-weight: bold;


}



.logo-box img {

    width: 55px;

    height: 55px;

    object-fit: contain;


}



nav {

    display: flex;

    gap: 35px;

    font-size: 16px;


}


nav a:hover {

    color: #0066cc;

}



.menu {

    display: none;

    font-size: 30px;

    cursor: pointer;

}







/* ===========================
   HERO
=========================== */


.hero {


    display: flex;

    width: 100%;

    min-height: 560px;


}



.about {


    width: 32%;

    padding: 45px;


    background: #fff;


}



.about h2 {

    font-size: 32px;

}



.en {

    font-size: 14px;

    color: #777;

    margin-bottom: 25px;

}



.about p {

    line-height: 2;

    font-size: 14px;

    color: #444;

}





.features {


    display: grid;

    grid-template-columns:

        repeat(4, 1fr);


    margin-top: 35px;

    gap: 15px;


}



.features div {

    text-align: center;

    font-size: 12px;


}


.features img {

    width: 40px;

    height: 40px;

    margin: auto auto 10px;

}





.brand {


    width: 22%;

    background: #06398a;

    color: white;


    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;


    text-align: center;


    padding: 30px 15px;


}



.brand img {

    width: 140px;

}



.brand h3 {

    margin-top: 20px;

    font-size: 18px;

}



.brand p {

    font-size: 13px;

    margin-top: 10px;

}




.contact {

    margin-top: 30px;

    text-align: left;

    font-size: 13px;

    line-height: 2;


}




.hero-image {


    flex: 1;


    background:


        linear-gradient(rgba(0, 60, 150, .15),
            rgba(0, 60, 150, .1)),

        url("../images/hero-plane.jpg") center/cover no-repeat;


    display: flex;

    align-items: center;

    padding: 50px;


}



.hero-text {

    color: #003b88;


}



.hero-text h1 {

    font-size: 40px;

}



.hero-text h3 {

    margin-top: 15px;

    font-size: 20px;


}



.hero-text p {

    margin-top: 20px;

    font-size: 20px;


}






/* ===========================
公共区域
=========================== */


.section {


    max-width: 1200px;

    margin: auto;

    padding: 50px 20px;


}



.title {


    font-size: 32px;

    border-bottom:

        2px solid #ddd;


    padding-bottom: 15px;

    margin-bottom: 35px;


}



.title span {

    display: block;

    font-size: 14px;

    color: #777;


}




/* ===========================
业务
=========================== */


.service-grid {


    display: grid;


    grid-template-columns:

        repeat(4, 1fr);


    gap: 20px;


}



.service-card {


    background: #f4f8ff;


    padding: 20px;


    border-radius: 8px;


    transition: .3s;


}



.service-card:hover {


    transform: translateY(-8px);


}



.service-card img {


    height: 150px;


    width: 100%;


    object-fit: cover;


    border-radius: 6px;


}



.service-card h3 {


    margin-top: 15px;


    font-size: 20px;


}



.service-card p {


    font-size: 14px;

    line-height: 1.8;

    color: #555;


}







/* ===========================
全球网络
=========================== */


.route-grid {


    display: grid;


    grid-template-columns:

        repeat(4, 1fr);


    gap: 20px;


}



.route-card {


    background: #f5f8fd;


    padding: 20px;


    text-align: center;


    border-radius: 8px;


}



.route-card img {


    height: 160px;


    width: 100%;


    object-fit: contain;


}



.route-card h3 {


    margin-top: 15px;


}








/* ===========================
产品
=========================== */


.product-grid {


    display: grid;


    grid-template-columns:

        repeat(2, 1fr);


    gap: 30px;


}



.product {


    display: flex;


    background: #f4f8ff;


    padding: 20px;


    border-radius: 8px;


}



.product img {


    width: 45%;


    height: 180px;


    object-fit: cover;


    margin-right: 25px;


}



.product h3 {


    font-size: 22px;


    margin-bottom: 10px;


}



.product p {


    line-height: 1.8;

    color: #555;


}







/* ===========================
底部
=========================== */



footer {


    background: #06398a;


    color: white;


    padding: 45px 20px;


    display: flex;


    justify-content: center;


    align-items: center;


    gap: 60px;


    flex-wrap: wrap;


}



footer h2 {


    font-size: 32px;


}



.footer-item {


    font-size: 18px;


}








/* ===========================
平板
=========================== */


@media(max-width:992px) {



    nav {

        display: none;

    }



    .menu {

        display: block;

    }



    .hero {

        flex-direction: column;


    }



    .about,
    .brand {


        width: 100%;


    }



    .hero-image {


        height: 400px;


    }



    .service-grid {


        grid-template-columns:

            repeat(2, 1fr);


    }



    .route-grid {


        grid-template-columns:

            repeat(2, 1fr);


    }


    .product-grid {


        grid-template-columns: 1fr;


    }



}









/* ===========================
手机
=========================== */


@media(max-width:600px) {



    .header {

        height: 70px;

    }


    .logo-box span {

        font-size: 14px;


    }


    .logo-box img {

        width: 45px;

        height: 45px;


    }




    .about {


        padding: 30px 20px;


    }



    .about h2 {

        font-size: 25px;


    }



    .features {


        grid-template-columns:

            repeat(2, 1fr);


    }




    .hero-image {


        height: 320px;


        padding: 25px;


    }



    .hero-text h1 {


        font-size: 26px;


    }



    .hero-text h3 {


        font-size: 16px;


    }



    .hero-text p {


        font-size: 15px;


    }




    .section {


        padding: 35px 15px;


    }




    .title {


        font-size: 24px;


    }




    .service-grid,


    .route-grid {


        grid-template-columns:

            1fr;


    }



    .product {


        flex-direction: column;


    }



    .product img {


        width: 100%;


        height: 200px;


        margin-bottom: 20px;


    }




    footer {


        flex-direction: column;


        gap: 25px;


        text-align: center;


    }



    footer h2 {


        font-size: 24px;


    }



}