﻿.nav {
    width: 100%;
    /*background-color: #635043;*/
    background-color: #5e6c5b;
    background: linear-gradient(to right,#4E6E62 50%,#425949 100%);
}


@media screen and (max-width: 1450px) {
    .nav {
        background: linear-gradient(to right,#4E6E62 70%,#425949 100%);
    }
}
@media screen and (max-width: 1400px) {
    .nav {
        background: linear-gradient(to right,#4E6E62 75%,#425949 100%);
    }
}
@media screen and (max-width: 1300px) {
    .nav {
        background: linear-gradient(to right,#4E6E62 80%,#425949 100%);
    }
}
@media screen and (max-width: 1200px) {
    .nav {
        background: linear-gradient(to right,#4E6E62 85%,#425949 100%);
    }
}

@media screen and (max-width: 1000px) {
    .nav {
        background: linear-gradient(to right,#4E6E62 90%,#425949 100%);
    }
}

.topnavLV1 {
    max-width: 1450px;
    margin: 0 auto;
    padding: 0;
    height: 50px;
}

    .topnavLV1 a {
        display: block;
        color: #fff;
        text-align: left;
        padding: 15px 16px;
        text-decoration: none;
        font-size: 17px;
        /*font-weight: 600;*/
        letter-spacing: .5px;
        line-height: 1.2;
    }
    .topnavLV1 ,.topnavLV2 a {
        border-top: none;
    }
        .topnavLV1 a.active {
            border-bottom: 3px solid orange;
            color: orange;
            padding-bottom:11px;            
        }

    .topnavLV1 .icon {
        display: none;
    }

/* 取消ul預設的內縮及樣式 */
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

    ul.drop-down-menu {
        display: inline;
    }

        ul.drop-down-menu a {
            background-color: #4E6E62;
        }

        /*隱藏次選單*/
        ul.drop-down-menu ul {
            display: none;
        }

        /* 滑鼠滑入展開次選單*/
        ul.drop-down-menu li:hover > ul {
            display: block;

        }

        /*第一層 start*/
        ul.drop-down-menu li {
            position: relative;
            white-space: nowrap;
            float: left; /* 只有第一層是靠左對齊*/
        }
            /*第一層，最後一項，若需特定樣式，設定在此*/
            ul.drop-down-menu li:last-child {
            }
            /* 第一層 滑鼠滑入按鈕變色*/
            ul.drop-down-menu li a:hover {                
            }
            /* 第一層 滑鼠移入次選單上層按鈕保持變色*/
            ul.drop-down-menu li:hover > a {
                background-color: #ECDCC2;
                color: #333;
                font-weight: 600;
                /*border-top: 5px solid orange;
                transition-property: border-top;
                transition-duration: .2s;
                transition-timing-function: ease-out;*/
            }       

        /*第一層 end*/

        /*第二層 start*/
        ul.drop-down-menu ul {
            position: absolute;
            z-index: 99;
            left: 0px;
            top: 100%;
            min-width: 180px; 
        }

            ul.drop-down-menu ul li {
                width: 100%;
                /*border-bottom: #333 1px solid;*/
            }
                /*第二層，最後一項，若需特定樣式，設定在此*/
                ul.drop-down-menu ul li:last-child {
                    border-bottom: none;
                }
            /* 第二層 滑鼠滑入按鈕變色*/
            ul.drop-down-menu ul > li a:hover {
            }
            /* 第二層 滑鼠移入次選單上層按鈕保持變色*/
            ul.drop-down-menu ul > li:hover > a {
                background-color: #ECDCC2;
                color: #333;
                /*border-left: 10px solid ;*/
                padding-left: 25px;
                /*border-left: 8px solid #ECDCC2;*/
                /*border-right: 5px solid orange;*/
                /*padding-right:25px;*/
                transition-property: padding-left;
                transition-duration: .5s;
                transition-timing-function: ease-out;
                transition-delay: 0s;
            }
            ul.drop-down-menu ul > li > a {
                /*border-left: 8px solid #4E6E62;*/
                /*border-right: 5px solid #4E6E62;*/
                transition-property: padding;
                transition-duration: .5s;
                transition-delay: .2s;
            }
            /*第二層 end*/

            /*第三層 start*/
            /*第三層以後的選單出現位置與第二層不同*/
            ul.drop-down-menu ul ul {
                z-index: 999;
                top: 10px;
                left: 90%;
            }
/*第三層 end*/


@media screen and (max-width: 930px) {
    ul.drop-down-menu.topnavLV2 { /*隱藏次選單*/
        display: none;
    }

    ul.drop-down-menu.topnavLV2.responsive { /*隱藏次選單*/
        display: inline;
    }

    .topnavLV1 a:not(:first-child) {
        display: none;
    }

    /*icon 靠右*/
    .topnavLV1 a.icon {
        float: right;
        display: block;
    }

    .topnavLV1 li:not(:first-child) {
        display: none;
    }

    .topnavLV1.responsive {
        position: relative;
    }

        .topnavLV1.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnavLV1.responsive a {
            float: none;
            display: block;
            text-align: left;
        }

        .topnavLV1.responsive li {
            float: none;
            display: block;
            text-align: left;
        }

    /* 滑鼠滑入不展開第二層選單*/
    ul.drop-down-menu li:hover > ul {
        display: none;
    }
}
