<div id="c-header" class="c-style2">
        <div class="container">
            <!-- 顶部logo -->
            <a class="c-logo" href="./index.html" title="logo">
                <div class="c-img-box">
                    <img src="./images/logo2.png" alt="logo">
                    <img src="./images/logo.png" alt="logo">
                </div>
            </a>
            <!-- 右侧 -->
            <div class="c-right-box">
                <!-- 顶部pc导航 -->
                <ul class="c-nav">
                    <li class="on"><a href="">Home</a></li>
                    <li>
                        <a href="">Service area <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                        <ul>
                            <li><a href="">Service area1</a></li>
                            <li><a href="">Service area2</a></li>
                            <li><a href="">Service area2</a></li>
                        </ul>
                    </li>
                    <li><a href="">About us</a></li>
                    <li><a href="">Case center</a></li>
                    <li>
                        <a href="">Contact us</a>
                    </li>
                </ul>
                <!-- 顶部移动端导航 -->
                <ul class="c-nav2">
                    <li class="on">
                        <div class="c-title-box">
                            <a href="">Home</a>
                        </div>
                    </li>
                    <li>
                        <div class="c-title-box">
                            <a href="">Home</a>
                            <i class="fa fa-angle-down" aria-hidden="true"></i>
                        </div>
                        <ul>
                            <li><a href="">Service area1</a></li>
                            <li><a href="">Service area2</a></li>
                            <li><a href="">Service area2</a></li>
                        </ul>
                    </li>
                    <li>
                        <div class="c-title-box">
                            <a href="">About us</a>
                        </div>
                    </li>
                    <li>
                        <div class="c-title-box">
                           <a href="">Case center</a>
                        </div>
                    </li>
                    <li>
                        <div class="c-title-box">
                           <a href="">Contact us</a>
                        </div>
                    </li>
                </ul>
                <!-- 顶部功能区 -->
                <div class="c-gn">
                    <a href="" class="c-lan">
                        EN
                    </a>
                </div>

                <!-- 顶部移动端导航开关 -->
                <div class="c-switch">
                    <i></i>
                    <i></i>
                    <i></i>
                </div>
            </div>
        </div>
    </div>

/* 占位标签，设置导航样式 */

#c-placeholder {
    height: 80px;

    @media @max-sm {
        height: 60px;
    }
}


/*顶部*/

#c-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    line-height: 80px;
    text-align: center;
    color: #fff;
    transition: all 0.5s;

    &.c-head-move {
        top: -100px;
    }

    &.c-style2 {
        color: #666;
        background: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    }

    @media @max-sm {
        line-height: 60px;
    }

    a {
        color: #fff;
        transition: all 0.5s;
    }

    &.c-style2 a {
        color: #666;
    }

    .container {
        display: flex;
        align-items: center;
        justify-content: space-between;

        @media @max-sm {
            padding: 0 .5rem;
            width: 100%;
            height: 60px;
        }

        @media @max-xs {
            padding: 0 1rem;
        }
    }

    .c-right-box {
        display: flex;
        align-items: center;
    }
}


/*顶部logo*/

#c-header {
    .c-logo {
        display: flex;
        align-items: center;

        .c-img-box {
            display: flex;
            align-items: center;

            img {
                height: 50px;

                @media @max-sm {
                    height: 25px;
                }

                &:nth-child(2) {
                    display: none;
                }
            }
        }

        span {
            display: inline-block;
            margin-left: 20px;
            padding-left: 20px;
            border-left: 1px solid rgba(255, 255, 255, .2);

            @media @max-xs {
                display: none;
            }
        }
    }
}

#c-header.c-style2 .c-logo .c-img-box img:nth-child(1) {
    display: none;
}

#c-header.c-style2 .c-logo .c-img-box img:nth-child(2) {
    display: inline-block;
}


/*顶部pc导航*/

#c-header {
    .c-nav {
        display: flex;
        align-items: center;

        @media @max-sm {
            display: none;
        }

        &>li {
            position: relative;
            margin-right: 50px;

            &:last-child {
                margin-right: 0;
            }

            a:before {
                content: "";
                position: absolute;
                bottom: -1px;
                left: 0;
                width: 0;
                height: 2px;
                background: #e88021;
                transition: .5s;
            }

            @media @max-md {
                margin-right: 10px;
            }
        }

        li {
            a {
                position: relative;
                display: block;
                -webkit-transition: all 0.5s;
                transition: all 0.5s;

                i {
                    margin-left: 8px;
                    font-size: 20px;
                }
            }

            &.on>a::before,
            &:hover>a::before {
                width: 100%;
            }
        }

        ul {
            position: absolute;
            top: 99%;
            left: 50%;
            display: none;
            width: 150px;
            line-height: 40px;
            background: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);

            li {
                border-bottom: 1px solid #eee;

                &:last-child {
                    border: 0;
                }

                a {
                    color: #666;
                }
            }
        }

    }

}

#c-header.c-style2 .c-nav li.on>a,
#c-header .c-nav li:hover>a {
    color: #e88021;
}

/*顶部移动端导航*/

#c-header {
    .c-nav2 {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        height: 0;
        line-height: 50px;
        color: #333;
        background: #fff;
        overflow-y: auto;
        transition: all 0.5s;
        text-align: left;

        &>li:last-child {
            border-bottom: 1px solid #f1f1f1;
        }

        li {
            padding: 0 .5rem;
            border-top: 1px solid #f1f1f1;

            @media @max-xs {
                padding: 0 1rem;
            }

            .c-title-box {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            a {
                color: #333;
                -webkit-transition: all 0.3s;
                transition: all 0.3s;

                i {
                    font-size: 20px;
                }
            }

            a:hover,
            &.on>a {
                color: #e88021
            }

            ul {
                display: none;
            }
        }
    }
}

.c-open #c-header .c-nav2 {
    height: calc(100vh - 60px);
    height: -webkit-calc(100vh - 60px);
}



/*顶部导航开关*/

#c-header {
    .c-switch {
        display: none;
        width: 24px;
        height: 20px;
        cursor: pointer;

        @media @max-sm {
            display: block;
        }

        i {
            position: relative;
            display: block;
            height: 2px;
            background: #fff;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;

            &:nth-child(1) {
                top: 0;
            }

            &:nth-child(3) {
                bottom: 0;
            }

            &:nth-child(2) {
                margin: 6px 0;
            }
        }
    }
}

#c-header.c-style2 .c-switch i {
    background: #333;
}

body.c-open #c-header .c-switch i:nth-child(2) {
    opacity: 0;
}

body.c-open #c-header .c-switch i:nth-child(1) {
    top: 8px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

body.c-open #c-header .c-switch i:nth-child(3) {
    bottom: 8px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}


/* 顶部功能区 */

#c-header {
    .c-gn {
        display: flex;
        align-items: center;

        @media @max-md {
            display: none;
        }

        form {
            padding: 0 30px;
            position: relative;
            cursor: pointer;

            @media @max-xg {
                padding: 0 15px;
            }

            &:hover>i {
                color: #e88021;
            }

            &>i {
                transition: .5s;
            }

            .c-box {
                position: absolute;
                top: 106%;
                right: 0;
                display: none;
                width: 280px;
                height: 50px;
                background: #fff;
                border-radius: 5px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
                overflow: hidden;

                input {
                    float: left;
                    padding: 0 15px;
                    width: -webkit-calc(100% - 70px);
                    width: calc(100% - 70px);
                    height: 50px;
                }

                button {
                    float: left;
                    width: 70px;
                    height: 50px;
                    font-size: 16px;
                    color: #fff;
                    background: #e88021;
                    cursor: pointer;
                }
            }
        }

        .c-lan {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 10px 0 30px;
            width: 40px;
            height: 40px;
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 50%;

        }

        .c-phone {
            display: flex;
            align-items: center;

            i {
                margin: 0 10px 0 30px;
                width: 30px;
                height: 30px;
                border: 1px solid rgba(255, 255, 255, .2);
                border-radius: 50%;
                line-height: 28px;

                @media @max-xg {
                    margin: 0 5px 0 15px;
                }
            }

            span {
                font-weight: bold;
            }
        }
    }
}

#c-header.c-style2 .c-gn .c-phone i {
    border: 1px solid rgba(222, 47, 9, .2);
}

#c-header.c-style2 .c-gn .c-phone {
    color: #e88021;
}

// 导航
function cNav() {
    var oBody = $("body");
    var oHead = $("#c-header");
    var oNav = $("#c-header .c-nav");
    var oBtn = $("#c-header .c-switch");
    var oL = $("#c-header .c-nav>li");
    var oTitle = $("#c-header .c-nav2 li .c-title-box");
    var num = 0;
    var i = 0;
    var oP = $("#c-placeholder");
    var b = true;
    var t = null;
    // 手机端导航显示
    oBtn.click(function() {
        if (b) {
            b = false;
            t = $(window).scrollTop();
            oBody.addClass('c-open');
            oBody.css("top", -t);
        } else {
            b = true;
            oBody.removeClass('c-open');
            oBody.css("top", "0");
            $(window).scrollTop(t);
        }
    });

    // 窗口重置隐藏手机端导航
    $(window).resize(function() {
        if ($("#c-header .c-nav").css("display") == "block") {
            oBody.removeClass('c-open');
        }
    });

    // 手机端导航栏目下拉
    oTitle.click(function() {
        $(this).next().stop().slideToggle();
    });

    // 鼠标移入导航样式
    oHead.hover(function() {
        $(this).addClass("c-style2");
    }, function() {
        if (i <= oHead.outerHeight() && oP.length == 0) {
            $(this).removeClass("c-style2");
        } else {
            $(this).addClass("c-style2");
        }
    });

    // 导航显示及样式
    function fn1() {
        if ($(window).scrollTop() - i > 0 && $(window).scrollTop() > oHead.outerHeight()) {
            i = $(window).scrollTop();
            oHead.addClass("c-head-move");
            oHead.addClass("c-style2");
        } else if ($(window).scrollTop() - i <= 0) {
            i = $(window).scrollTop();
            oHead.removeClass("c-head-move");
            if ($(window).scrollTop() <= oHead.outerHeight() && oP.length == 0 && !oBody.hasClass("c-open")) {
                oHead.removeClass("c-style2");
            } else if ($(window).scrollTop() > oHead.outerHeight()) {
                oHead.addClass("c-style2");
            } else if ($(window).scrollTop() <= oHead.outerHeight() && oP.length != 0) {
                oHead.addClass("c-style2");
            }
        }
    }
    fn1();
    $(window).scroll(function() {
        fn1();
    });

    // pc导航动画
    oL.each(function() {
        if ($(this).hasClass("on")) {
            num = $(this).index();
        }
        $(this).hover(function() {
                oL.eq(num).removeClass("on");
                $(this).children("ul").stop().slideDown();
            },
            function() {
                oL.eq(num).addClass("on");
                $(this).children("ul").stop().slideUp();
            });
    });
}
cNav();