﻿/* 權重提示 */
/* header z-index: 100 */
/* left-menu z-index: 50 */

/* ----------網頁/行動裝置 同作用---------- */
.header.top-box {
    left: 0;
    top: 0;
    width: 100%;
    background-color: #fff;
    /* position: absolute; */
    z-index: 100;
}

.top-box {
    border-bottom: 1px solid #ffffff;
    transition: 1.5s;
    background-color: #fff;
}


    .top-box:hover {
        background-color: rgba(255, 255, 255, 1);
    }

.mobile {
    display: none;
}

.Excelsior-logo {
    width: 198px;
}

.fa-times,
.fa-bars {
    display: none;
    color: #fff;
    font-size: 1.8rem;
}

    .fa-times.on,
    .fa-bars.on {
        display: block;
    }


/* *****網頁版***** */

.first-menu {
    justify-content: space-between;
    padding-top: 40px;
    align-items: center;
}

.crel {
    /* padding: 20px; */
    transition: 1.5s;
}

/* *****網頁版***** */
/* 聯絡我們+關係企業+員工專區 */
.cre {
    display: flex;
    align-items: center;
}

    .cre,
    .cre li:last-child {
        margin-left: 2rem;
    }

        .cre li a {
            list-style: none;
            color: #464646;
            padding-left: 1rem;
            font-size: 1rem;
        }

            .cre li a:hover {
                color: #008BD3;
                font-weight: 700;
            }

/* *****網頁版***** */
/* 語言區 */
.top-box:hover .crel a,
.top-box:hover .w-globe-asia {
    color: #464646;
}

.top-box:hover .w-language {
    border: 2px solid #464646;
    color: #464646;
}

.w-language {
    border-radius: 10rem;
    border: 2px solid #464646;
    padding-right: 5px;
}

    .w-language .w-globe-asia {
        margin: 0 5px;
    }

    .w-language .w-langIcon {
        font-size: 0.8rem;
        padding: 2px;
        color: #464646;
    }

.w-langIcon:hover,
.w-langIcon.active,
.language .langChi.on,
.language .langEn.on {
    color: #008BD3;
    font-weight: 700;
}

.w-globe-asia {
    font-size: 1rem;
}

/* *****網頁版***** */
/* language active */
/* #langOnB {
        color: #008BD3;
        font-weight: 700;
    }

    #langOnW {
        color: #fff;
        font-weight: 700;
    } */


/* *****手機版***** */

@media screen and (max-width: 991px) {

    /* 手機版最上欄/第一欄 */
    .first-menu {
        background-color: #000;
        line-height: 3em;
        /* position: fixed; */
        top: 0;
        /* transition: 0.5s; */
        padding-top: 0;
        opacity: 0.95;
        width: 100%;
        align-items: center;
        width: 100%;
        max-width: 100%;
    }

    .m-langIcon:hover,
    .m-langIcon:active,
    .language .langChi.on,
    .language .langEn.on {
        color: #fff;
    }
}

.m-language {
    background-color: #464646;
}

.m-langArea {
    /* padding: 12px; */
    line-height: 3em;
}

.m-globe-asia {
    color: #fff;
    font-size: 1.3rem;
    padding-right: 0.5rem;
}

.m-langIcon {
    color: #c1c1c1;
    padding-right: 0.5rem;
}


/* ----------主選單---------- */


.second-menu {
    display: flex;
    justify-content: space-around;
    overflow: hidden;
}

    .second-menu:hover {
        color: #464646;
    }

    .second-menu > li > a,
    .menu-tit > .dropdownTitle > a,
    .menu-tit > .dropdownTitle .txt-area a {
        display: block;
        color: #464646;
        text-align: center;
        border-bottom: 4px solid transparent;
        font-size: 1.2rem;
        line-height: 2.5rem;
        margin: auto;
        margin-bottom: 0.8rem;
    }

        .second-menu > li > a:hover,
        .menu-tit > .dropdownTitle > a:hover,
        .menu-tit > .dropdownTitle .txt-area a:hover,
        .menu-tit:hover > .dropdownTitle .txt-area a,
        .second-menu > li.active > a,
        .menu-tit.active > .dropdownTitle .txt-area a {
            box-sizing: border-box;
            border-bottom: 4px solid #008BD3;
            color: #464646;
            transition: 1.5s;
        }



.left-menu {
    display: none;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.98);
    left: 0;
    width: 100%;
    padding-left: calc(50% - 1140px / 2);
    box-shadow: 0 0 18px 0 rgb(0 0 0 / 16%), inset 0 2em 3em -3em rgb(0 0 0 / 70%);
    z-index: 50;
}



.dropdownTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left-menu li,
.right-menu li {
    width: calc(1140px / 2);
}

    .left-menu li:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

    .left-menu li a,
    .right-menu li a {
        color: #303030;
        font-size: 1.1rem;
        padding: 0.7rem 1.2rem;
        display: block;
    }

        .left-menu li a:hover,
        .left-menu li:hover .w-fa-chevron-right {
            color: #ff0000;
        }

.left-menu .menu-subtit {
    /* display: flex; */
    align-items: center;
    justify-content: space-between;
}

.w-fa-chevron-right {
    padding-right: 1.2rem;
    font-size: 1.2rem;
}

.right-menu > li > a:hover {
    color: #ff0000;
    background-color: rgba(00, 00, 00, 0.05);
}

/* 中間過渡 */
/* 中間過渡 1155~770px */
/* @media screen and (max-width: 1155px) and (min-width: 770px) { */


@media (min-width: 992px) {
    .right-menu {
        display: none;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.05);
        left: 50%;
        width: 50%;
        height: 100%;
        top: 0%;
    }

    .menu-tit:hover .left-menu,
    .menu-subtit:hover .right-menu {
        display: block;
    }
}

@media screen and (max-width: 1155px) {

    .left-menu li {
        width: 50%;
    }

    .right-menu li {
        width: 100%;
    }
}

/*中間過渡 990~770px */
/* @media screen and (max-width: 990px) and (min-width: 770px) { */
@media screen and (max-width: 990px) {

    .cre,
    .cre li:last-child {
        margin-left: 1rem;
    }

        .cre li a {
            font-size: 0.8rem;
            padding-right: 0;
            padding-left: 0.8rem;
        }

    .w-language .w-langIcon {
        font-size: 0.6rem;
    }

    .w-globe-asia {
        font-size: 0.8rem;
    }

    .second-menu > li > a,
    .menu-tit > .dropdownTitle > a,
    .menu-tit > .dropdownTitle .txt-area a {
        font-size: 1rem;
    }

    .left-menu li a,
    .right-menu li a {
        font-size: 1rem;
    }

    .w-fa-chevron-right {
        font-size: 1.1rem;
        padding-right: 0.2rem;
    }
}

/* ----------主選單---------- */
.nav-main-menu-wrapper .cre {
    display: none;
}
/* *****手機版***** */
@media screen and (max-width: 991px) {


    /*.mobile {
        display: block;
    }*/
    .web {
        display: none;
    }
    /********** 手機選單 *********/
    .nav-main-menu-wrapper .cre {
        display: block;
        margin: 0;
        background: #efefef;
        display: block;
    }

        .nav-main-menu-wrapper .cre li:last-child {
            margin-left: 0;
        }

        .nav-main-menu-wrapper .cre li a {
            color: #464646;
            padding: 10px;
            text-align: left;
            margin: 0;
            line-height: inherit;
            font-size: 1rem;
            display: block;
        }

    .nav-main-menu-wrapper {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: all .3s ease;
    }

        .nav-main-menu-wrapper .second-menu {
            background: #FEFEFE;
        }

        .nav-main-menu-wrapper.open {
            max-height: calc(100vh - 106px);
            overflow: auto;
        }

    .mobile.nav-menu-btn-wrapper .nav-menu-btn .nav-close,
    .mobile.nav-menu-btn-wrapper .nav-menu-btn.open .nav-open {
        display: none;
    }

    .mobile.nav-menu-btn-wrapper .nav-menu-btn .nav-open,
    .mobile.nav-menu-btn-wrapper .nav-menu-btn.open .nav-close {
        display: block;
    }

    .mobile.nav-menu-btn-wrapper {
        display: block;
    }

    .mobile.langArea {
        display: none;
    }

        .mobile.langArea.open {
            display: block;
        }

    .top-box {
        border-bottom: 0;
    }

        .top-box:hover .second-menu li ul li ul li a {
            color: #fff;
        }

    .banner-slick {
        margin-top: 48px;
    }

    .impression-first {
        padding-top: 48px;
    }

    .dropdownTitle {
        padding: 10px;
    }

        .dropdownTitle a {
            color: #464646;
        }

        .dropdownTitle .icon-area {
            flex: 0 0 auto;
            width: 33px;
            height: 33px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    .left-menu {
        position: static;
        box-shadow: initial;
    }

        .left-menu li {
            width: 100%;
        }

            .left-menu li a,
            .right-menu li a {
                padding: 10px;
            }

            .left-menu li.menu-subtit .dropdownTitle a,
            .right-menu li.menu-subtit .dropdownTitle a {
                padding: 0;
            }

    .menu-subtit .dropdownTitle .icon-area {
        height: auto;
    }

    .menu-subtit .m-fa-chevron-updown,
    .menu-tit .m-fa-chevron-updown {
        padding: 0;
    }

    .menu-subtit ul.right-menu a {
        color: #fff;
    }

    /*.menu-tit .left-menu, .menu-subtit .right-menu {
        display: block;
    }*/

    .menu-tit .icon-area .fa-chevron-down {
        color: #303030;
    }

    .menu-tit .icon-area .fa-chevron-up {
        color: #008CD3;
    }

    .menu-tit .m-fa-chevron-updown {
        color: #464646;
        font-size: 1rem;
    }

        .menu-tit .m-fa-chevron-updown.on {
            display: block;
            padding: 0;
        }

    .menu-tit .menu-subtit .fa-chevron-down,
    .menu-tit .menu-subtit .dropdownTitle.collapsed .fa-chevron-up {
        display: none;
    }

    .menu-tit .menu-subtit .fa-chevron-up,
    .menu-tit .menu-subtit .dropdownTitle.collapsed .fa-chevron-down {
        display: block;
    }

    .menu-tit.open-main-menu > .dropdownTitle .icon-area .fa-chevron-down,
    .menu-tit > .dropdownTitle .icon-area .fa-chevron-up {
        display: none;
    }

    .menu-tit.open-main-menu > .dropdownTitle .icon-area .fa-chevron-up,
    .menu-tit > .dropdownTitle .icon-area .fa-chevron-down {
        display: block;
    }

    .second-menu .left-menu {
        background: #D8D8D8;
    }

        .second-menu .left-menu > li + li {
            border-top: solid 1px #bdbdbd;
        }

    .second-menu .menu-tit.open-main-menu .left-menu {
        display: block;
    }

    .second-menu .right-menu {
        background: #303030;
    }

    .second-menu {
        display: block;
    }

        .second-menu > li {
            border-top: solid 1px #ddd;
        }

            .second-menu > li:first-child {
                border: none;
            }

    .top-area {
        position: initial;
    }

        .top-area header.top-box {
            position: fixed;
            width: 100%;
            z-index: 9999;
        }

        .top-area .menu-tit > .dropdownTitle .txt-area a {
            color: #303030;
            line-height: initial;
            margin: 0;
            border: none;
        }

        .top-area .second-menu > li > a,
        .top-area .menu-tit > .dropdownTitle > a {
            color: #464646;
            padding: 10px;
            text-align: left;
            margin: 0;
            line-height: inherit;
        }

    .fa-times,
    .fa-bars {
        display: block;
    }

    /* ----------手機版列基本設定---------- */
    header .container {
        /*max-width: 770px;*/
        margin-left: 0;
        margin-right: 0;
        padding-left: 1em;
        padding-right: 1em;
        width: 100%;
    }

    header nav .container {
        padding: 0;
        max-width: 100%;
    }

    /* ----------手機版第一層選單基本設定---------- */
    /* *****手機版主選單***** */
    /* .second-menu {
            color: #303030;
            flex-direction: column;
        } */

    /* 第二欄 */
    /*.menu-subtit ul {
        display: none;
    }*/
    .menu-subtit ul.collapse {
        display: none;
    }

        .menu-subtit ul.collapse.show,
        .menu-subtit ul.collapsing {
            display: block;
        }

    .second-menu > li > a,
    .menu-tit > .dropdownTitle > a,
    .left-menu > li > a,
    .left-menu > li > .dropdownTitle > a,
    .right-menu > li > a,
    .m-cre li > a {
        /* padding-left: 1.5rem;
        font-size: 1rem;*/
    }

    /* .second-menu>li>a,
        .menu-tit>.dropdownTitle>a {
            color: #303030;
            text-align: left;
            line-height: 3em;
            border-bottom: 0;
            margin-left: 0;
            margin-bottom: 0;
        }

        .second-menu>li>a:hover,
        .second-menu>li>a:active,
        .menu-tit>.dropdownTitle>a:hover,
        .menu-tit>.dropdownTitle>a:active {
            box-sizing: border-box;
            border-bottom: 0;
            color: #464646;
        }

        .menu-tit,
        .menu-subtit,
        .dropdownTitle {
            align-items: center;
        }

        .m-fa-chevron-updown.on {
            display: block;
        }

        .left-menu,
        .menu-subtit .right-menu {
            display: block;
            position: static;
            width: 100%;
            box-shadow: none;
        }

        .left-menu {
            background-color: #d8d8d8;
        }

        .left-menu>li {
            width: 100%;
        }

        .left-menu>li>a {
            color: #303030;
        }

        .menu-subtit .right-menu {
            background-color: #303030;
        }

        .right-menu>li {
            width: 100%;
        }

        .right-menu>li>a {
            color: #ffffff;
        } */

}

.m-fa-chevron-updown {
    font-size: 1.2rem;
    display: none;
    padding-right: 1rem;
}

.menu-tit .m-fa-chevron-updown {
    color: #008bd3;
}

.menu-subtit .m-fa-chevron-updown {
    color: #303030;
}

.breadCrumbsDes {
    font-size: 16px;
    padding: 15px 15px;
}

.m-cre {
    background: #efefef;
}

    /* .m-cre li {
        border-bottom: 0.2px solid #d8d8d8;
    } */

    .m-cre li > a {
        color: #707070;
        line-height: 3em;
    }
