/* Custom Navbar v1.0.0, for boostrap v5.1+ */

/*  共用的Navbar與右滑選單的相關 css樣式-----------------------------------*/
:root{
    --my-navbar-height:50px;

    --my-navbar-padding-x: 0;
    --my-navbar-padding-y: 0.5rem;
    --my-navbar-border-color:#01415f;
}

/*  自訂背景漸層樣式，深藍色 主色系-----------------------------------*/
.myCustom-primary{
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#037cb4), to(var(--my-navbar-border-color)));
    border: 1px solid var(--my-navbar-border-color);
    -moz-box-shadow: inset 0px 0px 1px #edf9ff;
    -webkit-box-shadow: inset 0px 0px 1px #edf9ff;
    box-shadow: inset 0px 0px 1px #edf9ff;
}

/*--自訂按鈕樣式 Start------------------------------------------------------------------------------*/
.myCustom-btn{
    
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);

    display: inline-block;
 
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #ffffff;         /* 按鈕的文字顏色，預設為白色 */
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid transparent;      /* 按鈕的外框線條樣式與顏色，預設為透明 */
    border-radius: 0.375rem;
    background-color: rgba(255, 255, 255,0.3);  /*transparent;*/
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;

    height: 30px;
    padding: 2px 10px;              /* 內部間距，上下:2px，左右:10px*/
}
 /* 定義當滑鼠經過按鈕時的樣式變化 */
.myCustom-btn:hover {
    border-color: #40b7ee;      /* 按鈕的外框線條顏色 */
    color:#b4dff6;    
}

/* 定義當滑鼠按下按鈕時的樣式變化 */
.myCustom-btn:focus {
    border-color: #04344b;   /* 按鈕的外框線條顏色 */
    color:#ffffff;
    box-shadow: inset 180px 10px 1px rgba(255, 255, 255,0.2);
  
  }
/*--自訂按鈕樣式 End------------------------------------------------------------------------------*/

.myContainer{
    margin-top: calc(var(--my-navbar-height) + 1px);
}

.myUL-li-fontStyle>li{
    color: #ffffff;
    list-style: none;       /* 如果沒有設定此屬性，Li前面會多圓點*/
}

 /* 定義導覽列本體外層 */
.myNavbar{
    height: var(--my-navbar-height);
    display: flex;
    align-items: center;
    padding: var(--my-navbar-padding-y) var(--my-navbar-padding-x);  
}

/* 定義導覽列的寬度樣式 */
.myNavbar>.myContainer-fluid {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
}

.myContainer-fluid {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}


/* 定義導覽列的內容 */
.myNav-menu{

    display: flex;
    flex-grow: 0;    
    align-items: center;
     /*margin-right: auto; */           /* 向左邊對齊，將它分出來 : myNav-align-left */
    /*margin-left: auto;    */          /* 向右邊對齊，將它分出來 : myNav-align-right*/
}

.myNav-align-left{
    margin-right: auto;         /* 向左邊對齊 */
}

.myNav-align-right{
    margin-left: auto;           /* 向右邊對齊 */
    
}

/* 定義導覽列的內容項目左右間隔 */
.myNav-menu>ul {

    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
    
}

/* 定義導覽列的排列方式與大小間隔 */
.myNavbar-nav{
    display: flex;
    padding-left: 0;
    margin-bottom: 0;
    flex-direction: row;
    gap: 25px;
}

.myNav-item{
    display: list-item;
    text-align: -webkit-match-parent;
}

.myNav-item > a {
    font-size: 16px;
    color: #ffffff;
}

.myNavbar-brand{
    font-size: 24px;
    padding-top: 0px;
    padding-bottom: 0px;
    text-decoration: none;
    color: #ffffff;
}

.myHamburger{
    display: none;
    cursor: pointer;
    margin-right: 10px;
}

.myBar{
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px 0px;
    transition: all 0.3s ease;
    background-color: #ffffff;      /* 定義漢堡圖示(三條線)的顏色 */
}

/* 自定義右滑選單的遮罩樣式(灰色) --初始樣式 :不出現 */
.myCustom-sliderMenuOverlay{
    position:fixed;
    display: none;

    top: var(--my-navbar-height);
    left: 0px;
    z-index: 900;

    width: 100%;
    height: 100%;
    
    overflow-y: auto;
    outline: 0;      

    background-color: #70707080;

    /* 右滑選單遮罩的 動畫效果 */
    animation: my-custom-fadein 0.2s;
}

@keyframes my-custom-fadein {
  
    from {
        opacity: 0;
    }

    to {
        opacity: 0.3;
    }
    
   /*
    0% {
        opacity:0;
    }
    50%{
        opacity:0.2;
    }
    100% {
        opacity:0.25;
    }
    */
}


/* 自定義右滑選單本體Style--初始樣式 :不出現 */
.myCustom-sliderMenu{

    display: none;          /* 初始樣式 :不出現 */
    left: -100%;           /* 為了動畫效果，一開始初始位置 */
    transition: 0.4s;        /* 為了動畫效果，選單從左邊移出來到右邊的速度*/
    top: var(--my-navbar-height);       /* 初始高度位置 */

    z-index: 910;           /* 為了不要被 遮罩影響，要高於遮罩的設定 */

    /* 改用瀏覽器主捲軸：不設定固定高度、不啟用內部捲軸 -- start -- */
    position: relative;

    height: auto;           /* 高度跟隨內容自然伸展，超出視窗時由瀏覽器主捲軸負責 */
    overflow-y: visible;    /* 不再使用選單自身的內部捲軸 */

    width: 100%;            /* 設定成100%，就不會出現 水平的Scroll bar */
    /* 改用瀏覽器主捲軸：不設定固定高度、不啟用內部捲軸 -- end -- */
    
    border: 2px solid rgba(1, 65, 95, 0.85);
    background-color: rgba(1, 65, 95, 0.85);

    /*-----陰影效果---------------------------*/
    -moz-box-shadow:  0px 5px 16px #edf9ff;
    -webkit-box-shadow:  0px 5px 16px #edf9ff;
    box-shadow:  0px 5px 16px #edf9ff;

}

/* 自定義右滑選單的項目樣式Style */
.myNav-slider-item{
    margin-top: 0px;
    color: #020202;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 21px; 
    text-align: left;

    list-style: none;       /* 如果沒有設定此屬性，Li前面會多圓點*/

    flex-direction: column;   
    width: 100%;
    text-align: center;
}

.myNav-link {
    display: block;
    font-size: 16px;
    font-weight: 400;
  
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;

    border-bottom:2px solid rgba(1, 60, 115, 0);
}

.myNav-slider-item>.myNav-link {    
    padding: 10px 0px 10px 0px;         /* 上、下間隔*/
    margin: 0px 0px 0px -30px;           /* 左、右間隔 0px 20px 0px 0px;*/
    border-bottom: 1px solid #888888;
    box-shadow:  0px 1px 2px #ffffff;
}

.myNav-slider-item > a {
    font-size: 16px;
    text-shadow: 1px 1px 1px #ffffff;
    color: #020202;
}


.myNav-link.active, .myNav-link:active{
    /* font-size: 18px; */
    color: #fbcaa9;
    border-bottom: 1px solid #f06509;
}

.myNav-slider-item>.myNav-link.active, .myNav-slider-item>.myNav-link:active{
    /* font-size: 18px; */
    color: #f06509;
}

/* 定義當滑鼠經過項目時的樣式變化 */
.myNav-link:hover {
    border-bottom:2px solid #40b7ee;

}



/* 為了動畫效果，定義右滑選單當已活動時的屬性，用程式來控制是否有已活動屬性，來控制向右滑動出來的動畫效果*/
.myCustom-sliderMenu.active{
    left: 0;            /* 因為初始樣式-100%，套用活動屬性後，就會向右移動回到0%的位置 */
}

/* 定義右滑選單當已活動時的屬性，用程式來控制此CSS屬性是否出現遮罩 */
.myCustom-sliderMenuOverlay.active{
    display:block;
}


/* 定義漢堡圖示(三條線)按鈕的第2條動畫效果，讓它看不見或是把它縮小 */
.myHamburger.active .myBar:nth-child(2){
    /* opacity: 0; */           /* 將透明度變成0，使它看不見*/
    transform: scale(0.1);      /* 把它縮小成1px，看起來會比較自然*/
}

/* 定義漢堡圖示(三條線)按鈕的第1條動畫效果，讓它旋轉 135 度 */
.myHamburger.active .myBar:nth-child(1){
    transform: translateY(8px) rotate(135deg);
}

/* 定義漢堡圖示(三條線)按鈕的第3條動畫效果，讓它旋轉 -135 度 */
.myHamburger.active .myBar:nth-child(3){
    transform: translateY(-8px) rotate(-135deg);
}


/* 當寬度大於931px以上時會執行的動作 或套用樣式*/
@media screen and (min-width: 931px) {
    .myCustom-sliderMenu{
        display: none;      /* 右滑選單--當寬度大於931px以上時:不出現 */
    }

    .myHamburger{            /* 漢堡圖示(三條線)--當寬度大於931px以上時:不出現 */
        display: none;
    }

    .myContainer{
        width: 100%;
    }

    .myNav-menu{        /* 導覽列(Navbar) 的靠左位置*/
        left: 100px;
    }

     /* 右滑選單遮罩已活動狀態--當寬度大於931px以上時:不出現 */
    .myCustom-sliderMenuOverlay.active{
        display: none;
    }

    .myNav-slider-item.dropdown:hover > .dropdown-menu{
	    display:block;
    }

}


/* 當寬度小於930px以下時會執行的動作 或套用樣式*/
@media(max-width:930px){
    .myHamburger{           /* 漢堡圖示(三條線)--當寬度小於930px以下時:會出現 */
        display: block;
    }

    .myNav-menu{            /* 導覽列(Navbar)--當寬度小於930px以下時:不出現 */
        display: none;
    }

    .myCustom-sliderMenu{       /* 右滑選單--當寬度小於930px以下時:會出現 */
        display: block;
        /* 改用 absolute 讓選單參與文件流，超出視窗時由瀏覽器主捲軸負責滾動 */
        position: absolute;
    }

    /* 隱藏狀態 left:-100% 會把選單放到視窗左外側，需阻止水平捲軸出現 */
    html, body {
        overflow-x: hidden;
    }

}

/* 自訂Navbar縮小時出現手風琴效果子項目，Start-------------------------------------------------*/
/* 控制父階層點選後，已點選過的父階層不要再縮回去：將屬性 data-bs-parent 刪除掉即可
*/

    /* 置換掉在 boostrap.min.css的 accordion 預設顏色  */  
    .accordion {
      --bs-accordion-color: #ffffff;            /* 父階項目的字體顏色 */
      --bs-accordion-bg: #18394d;               /* 父階項目的背景顏色 */
      --bs-accordion-border-color: #225b89;     /* 父階外框的顏色 */
      --bs-accordion-border-width: 3px;           /* 父階外框的寬度 */

        /* 父階項目展開後的背景顏色 */
      --bs-accordion-active-bg: #3e6d91;
      --bs-accordion-active-color: #ffffff;     /* 父階項目展開後的字體顏色 */
    }


    /* 變更箭頭方向圖示  */
    .accordion-button.collapsed::after {
        background-image: url("../../assets_v5/img/arrow-up.png"); 
        transform: rotate(-180deg);     /* 動畫效果，如果有需要的話，可以改變值 */
    }

    .accordion-button:not(.collapsed)::after {
        background-image: url("../../assets_v5/img/arrow-up.png");
        transform: rotate(0deg);
    }

    /* 要變更項目展開後的子項目字體色 ，以及上下、左右的間距 */
    .myList-group-item {
        padding: 6px 20px;
        position: relative;
        display: block;
        color: #2d2d2d;
        text-decoration: none;
        cursor: pointer;
        font-weight: 600;
        font-size: 18px;
    }


    /* 要變更項目展開後的背景色 ，以及上下、左右的間距 */
    .myAccordion-body {
      padding: 0px 20px;
      background-color: #eeeded;
    }

    
    .myAccordion-button {
        padding: 8px 20px;   /*調整每一列父層的高度 。8px:上下間距高度。 20px:左右間距寬度 */
        font-size: 18px;
        color: #ffffff;
    }    

    /* 定義當只有單一個項目的樣式 */
    .myAccordion-single-item {
        background-color: #18394d;
        border: 2px solid #225b89;

        padding: 8px 20px;
        font-size: 18px;
        margin-top: -1px;
    }

    /*  定義當滑鼠經過子項目時的樣式變化 , 定義當滑鼠經過只有單一個項目的樣式變化 */
    .myList-group-item:hover, .myAccordion-single-item:hover, .myAccordion-button:hover {
        background-color: #b9e3f8;
        border-radius: 6px;
        color:#424242;

        /*-----內陰影效果---------------------------*/
        -moz-box-shadow:  0px -1px 8px #ffffff inset, 0px 2px 5px #ffffff inset;
        -webkit-box-shadow:  0px -1px 8px #ffffff inset, 0px 2px 5px #ffffff inset;
        box-shadow:  0px -1px 8px #ffffff inset, 0px 2px 5px #ffffff inset;
    }

    /* 定義當滑鼠按下點選「子項目」與「只有單一項目」的樣式變化 */
    .myList-group-item:active, .myList-group-item.active, .myAccordion-single-item.active, .myAccordion-single-item:active {
        box-shadow: inset 0px 0px 9px 4px #76bfe4;
    }

    /* 去除連結標籤<a> 的底線 */
   .myAccordion-body > .list-group > a, .myAccordion-single-item > a {
        text-decoration:none;
        font-size: 18px;
   }

    /* 定義當只有單一個項目的按鈕樣式 */
    .myAccordion-single-button {
        padding: 0px 0px;
        margin-bottom: 0px;
        font-size: 18px;
        color: #ffffff;
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;                
        text-align: left;
        border: 0;
        border-radius: 0;
        cursor: pointer;
        overflow-anchor: none;
        transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,border-radius 0.15s ease;
    }

    /* 定義當只有單一個項目當滑鼠經過時文字要變成深色 */
     .myAccordion-single-button:hover {
        color:#424242;
    }
/* 自訂Navbar縮小時出現手風琴效果子項目， End -------------------------------------------------*/