﻿/*#region 字體匯入*/
@font-face {
    font-family: GenYoGothic TW;
    font-weight: 200;
    src: url('../../assets/font/GenYoGothic-EL.ttc');
}

@font-face {
    font-family: GenYoGothic TW;
    font-weight: 300;
    src: url('../../assets/font/GenYoGothic-L.ttc');
}

@font-face {
    font-family: GenYoGothic TW;
    font-weight: 400;
    src: url('../../assets/font/GenYoGothic-N.ttc');
}

@font-face {
    font-family: GenYoGothic TW;
    font-weight: 600;
    src: url('../../assets/font/GenYoGothic-R.ttc');
}

@font-face {
    font-family: GenYoGothic TW;
    font-weight: 700;
    src: url('../../assets/font/GenYoGothic-M.ttc');
}

@font-face {
    font-family: GenYoGothic TW;
    font-weight: 800;
    src: url('../../assets/font/GenYoGothic-B.ttc');
}

@font-face {
    font-family: GenYoGothic;
    font-weight: 900;
    src: url('../../assets/font/GenYoGothic-H.ttc');
}
/*#endregion*/

.navbar .navbar-brand {
    /*max-height: 80px;*/
    align-items: center;
}

.navbar a { /*navbar 字體顏色*/
    color: #fff !important;
    font-size: 18px;
    font-family: GenYoGothic TW,Arial;
    font-weight:400;
}
.navbar.fixed-top .navbar-nav > li {
    margin-left: 10px;
}

.navbar a:hover { /*懸浮時字體&背景顏色*/
    color: rgb(213,181,133) !important;
}

.navbar.fixed-top .navbar-nav .active a { /*active 時顏色*/
    color: rgb(213,181,133) !important;
}

.navbar.fixed-top .navbar-nav .active .dropdown-menu a { /*active 時顏色*/
    color: #07394D !important;
}

.dropdown-menu a:hover { /*下拉式選單懸浮樣式(***強制執行***)*/
    color: rgb(213,181,133) !important;
    background-color: #07394D !important;
}

.dropdown-menu a {
    color: #07394D !important;
}

.navbar.fixed-top .navbar-nav .active a:hover {
    color: #D5B585 !important;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #D5B585 !important;
    background: transparent !important;
}

.nav .nav-item .dropdown-menu a:hover::before, .nav .nav-item > a:hover::before, .nav .nav-item > a::before, .navbar.fixed-top .navbar-nav .active> a::before {
    left: 0px;
    width: 50%;
    background: #D5B585;
    bottom: -30px; /*變化後*/
}

.nav .nav-item a::before {/*變化前*/
    position: relative;
    display: block;
    content: '';
    /*bottom: -80px;*/
    left: 0;
    width: 0;
    height: 4px;
    background: #FFF;
    /*clip-path: polygon(0 0, 100% 0%, 100% 100%,0% 100%);*//*正方形*/
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%); /*平行四邊形*/
    transition: 500ms ease;
}

/*#region banner RWD btn*/
@media only screen and (max-width: 992px) {
    .navbar-toggler {
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        width: 50px;
        height: 80px;
        border:none !important;
        z-index: 3000;
        cursor: pointer;
    }
    .navbar-toggler .m1 {top: 30px;}
    .navbar-toggler .m2 { top: 38px;}
    .navbar-toggler .m3 {top: 46px;}
    .navbar-toggler > div {
        position: absolute;
        width: 24px;
        height: 2px;
        background: #FFF;
        left: 12px;
        transition: 0.2s ease-in;
    }
    .navbar-collapse {
        background: rgba(7, 55, 75,0.9);
        position: fixed;
        top: 78px !important;
        left: initial;
        right: 0% !important;
        width: 200px;
        z-index: 100;
        height: 100%;
        box-sizing: border-box;
        letter-spacing: 2px;
        overflow: auto;
        transition: 500ms ease-in;
        -webkit-backdrop-filter: blur(20px) saturate(150%);
        backdrop-filter: blur(20px) saturate(150%);
    }
    .navbar .navbar-brand {
        align-items: center;
    }
}
    /*#endregion*/