/*-- change navbar dropdown color --*/
/* 若是還是更新,就去清除瀏覽器的歷史資料*/
.navbar-default .navbar-nav .open .dropdown-menu > li > a, .navbar-default .navbar-nav .open .dropdown-menu > ul > a, .navbar-default .navbar-nav .open .dropdown-menu, .navbar-default .navbar-nav > .open > a:focus {
    background-color: #000000;
    color: #000000;
}

.navbar li.dropdown.active.open a {
    background-color: #6f6f6f;
}

.navbar ul.dropdown.active.open a {
    background-color: #6f6f6f;
}

.navbar .nav-item:hover .nav-link {
    color: #fff;
}

.dropdown-submenu {
    position: relative;
    background-color: #000000;
}

.dropdown-item {
    background-color: #6f6f6f;
}

.dropdown-item:focus {
    background-color: #6f6f6f ;
}



.dropdown-item:hover {
    background-color: #6f6f6f ;
}


.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: 1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
    background-color: #000000;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;

}

.dropdown-submenu:hover > a:after {
    border-left-color: #000000;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: 100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}


.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}


/* Make the image fully responsive 
.carousel-inner img {
    width: 100%;
    height: 100%;
}
    */

.hidden {
    display: none;
}

/* 加載csshover3.htc，解決IE6沒有li:hover擬類的問題 */
* html body {
    behavior: url("csshover3.htc");
}
/* ---------- 大小與定位 ---------- */
#menu {
    /* 選單大小 */
    width: 1200px;
    height: 40px;
    margin: 0px auto;
}

    #menu ul {
        /* 取消ul樣式符號 */
        list-style-type: none;
        /* 重設ul邊界與留白為零 */
        margin: 0;
        padding: 0;
        /* 內有浮動元件時，需設overflow才會自動調整大小 */
        overflow: auto;
    }

    * html #menu ul {
        /* 解決IE6不理overflow問題，直接指定高度 */
        height: 30px;
    }

        #menu ul li {
            /* 利用float讓第一層li水平排列 */
            float: left;
            z-index: 50;
        }
        /* 解決IE6條列式餘白問題*/
        * html #menu ul li {
            display: inline;
        }

            #menu ul li a {
                /* 將a改為區塊元件，以便指定寬高 */
                display: block;
                /* 這邊也要設float，否則IE6會以100%寬度顯示 */
                float: left;
                /* 固定高度 */
                height: 30px;
                width: 100px;
                text-align: center;
                z-index: 50;
            }

            #menu ul li ul {
                /* 讓第二層ul跳脫文件流以利定位 */
                position: absolute;
                /* 固定寬度 */
                width: 100px;
                /* 避免出現捲軸 */
                overflow: visible;
                /* 讓ul與母階層li相同位置 */
                clear: left;
                margin-top: 30px;
                margin-right: 0;
                margin-bottom: 0;
                margin-left: 0;
                z-index:50;
            }
            /* 修正IE7絕對定位差異 */
            *:first-child + html #menu ul li ul {
                margin-top: 0;
            }
            /* 修正IE6絕對定位差異 */
            * html #menu ul li ul {
                margin-top: 0;
            }

                #menu ul li ul li {
                    /* 覆寫繼承自第一層的浮動設定 */
                    float: none;
                    text-align: center;
                }

                    #menu ul li ul li a {
                        /* 覆寫繼承自第一層的浮動設定 */
                        float: none;
                        width: 100%; /* 註：display、height、padding繼承第一層的設定 */
                    }

                    #menu ul li ul li ul {
                        margin-top: -30px;
                        margin-right: 0;
                        margin-bottom: 0;
                        margin-left: 100px;
                        width: 100%;
                    }
                    /* 修正IE7絕對定位差異 */
                    *:first-child + html #menu ul li ul li ul {
                        margin-top: -30px;
                    }

                        #menu ul li ul li ul li {
                            /* width、float繼承第二層，免設定 */
                        }

                            #menu ul li ul li ul li a {
                                /* width、float繼承第二層，免設定 */
                            }
            /* ---------- 隱藏與顯示階層 ---------- */
            #menu ul li ul {
                /* 預先隱藏第二層 */
                visibility: hidden;
            }

            #menu ul li:hover ul {
                /* 觸動第一層時，顯示第二層 */
                visibility: visible;
            }

                #menu ul li:hover ul li ul {
                    /* 顯示第二層時，隱藏第三層，避免同時彈出 */
                    visibility: hidden;
                }

            #menu ul li ul li:hover ul {
                /* 觸動第二層時，顯示第三層 */
                visibility: visible;
            }

                #menu ul li ul li:hover ul li ul {
                    /* 顯示第三層時，隱藏第四層，避免同時彈出 */
                    visibility: hidden;
                }

            #menu ul li ul li ul li:hover ul {
                /* 觸動第三層時，顯示第四層 */
                visibility: visible;
            }
/* ---------- 以下為美化用，非必需 ---------- */


/* 預設字體 */
#menu {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}
    /* 第一層ul背景色彩與邊框 */
    #menu ul {
        background: #6f6f6f;
    }
        /* 第一層a字型 */
        #menu ul li a {
            color: #FFF;
            text-decoration: none;
            line-height: 30px;
        }
        /*第二層ul背景色彩與邊框  */
        #menu ul li ul {
            background: #efefef;
        }
            /* 第二層a字型 */
            #menu ul li ul li a {
                font-size: 16px;
                color: #333333;
                text-decoration: none;
            }
        /* 觸動第一層li時，改變背景色 */
        #menu ul li:hover, #menu ul li a:hover {
            background: #efefef;
        }

            #menu ul li:hover a {
                color: #333333;
            }
        /* 觸動第二層以上li時改變背景色 */
        #menu ul li ul li:hover, #menu ul li ul li a:hover {
            background: #dfdfdf;
        }


.MyTxtRigh {
    text-align: right;
}