/*--------------------------------------------------------------
# 修改 bootstrap ↓
--------------------------------------------------------------*/
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  --bs-gutter-x: 0rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 1400px) {
	.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
	  max-width: 1200px;
	}
}

@media screen and ( max-width:767px ){
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}


}



/*--------------------------------------------------------------
# 修改 bootstrap ↑
--------------------------------------------------------------*/

.bg-color-rd{
    background-color: #d70c18;
    }



.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content:unset;    /*LOGO不靠右*/
}


.nav-item{
    color: #fff;
    font-size: 1rem;
    }
    
    .navbar-expand-xxl .navbar-nav .nav-link {
        padding: 1.25rem;
    }

    .navbar {
    --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0);
    height: 60px;
    }
    
    .navbar-nav{
        margin-left: auto; /*---電腦NAV靠右---*/
        text-align: center;/*---手機NAV置中---*/
        margin-right:0px;
    }
    
    .navbar-nav .nav-link {
    color: #ffffff;
    }/*-----NAV 選項字體顏色------*/
    
    .navbar-brand {
        padding-top: 0;
        padding-bottom: 0.3125rem;
        margin-right: 0rem;
        font-size: 1.25rem;
        text-decoration: none;
        white-space: nowrap;
    }
    
    .navbar-toggler:focus {
        text-decoration: none;
        outline: 0;
        box-shadow: 0 0 0 ;/*---取消漢堡點擊出現框框----*/
    } 
    
    
    .navbar-toggler-icon {
    background-image: url("../img/MenuOpenerButton/list.svg");
    width: 1.2em;
    height: 1.2em;
    }
    
    /* 選單展開時：切換為叉叉圖標 x-lg-wh.svg */
/* Bootstrap 在展開時會移除 .collapsed 類別 */
.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
    /* 切換為叉叉圖標路徑 */
    background-image: url("../img/MenuOpenerButton/x-lg-wh.svg");
}
    
    .logotype{
        width: 155px;
        height: 28px;
        padding: 0;
        margin: 0;
    }
    
    .hvr-underline-reveal:before{
        content:"";
        position:absolute;
        z-index:-1;
        left:0;
        right:0;
        bottom:0;
        background:#FD6772;
        height:4px;
        -webkit-transform:translateY(4px);transform:translateY(4px);
        -webkit-transition-property:transform;
        transition-property:transform;-webkit-transition-duration:.3s;
        transition-duration:.3s;
        -webkit-transition-timing-function:ease-out;
        transition-timing-function:ease-out
    }




    /* ============================= pad ================================== */	
@media (min-width: 768px) and (max-width: 991.981024px){
    
    /* == NAV BANNER == */
    
    .logotype{
    width: 130px;
    height: auto;
    }

    .navbar {
        height: 53px;
        }

    .navbar > .container{
        margin: 0;
        padding: 0 18px;
    }
    
    .underline-style {
        background-image: linear-gradient(to right, rgba(230, 230, 230, 0) 0%, #dedddd 50%, rgba(230, 230, 230, 0) 100%);
        background-repeat: no-repeat;
        background-size: 100% 0.1em;
        background-position: 0 100%;
    }
    
    
}

/*----FOR置底只在手機顯示----*/
@media (min-width: 768px) {
	.display-in-mobile {
	display: none;
	}
}

/* == 手機版型區 ============================================================================= */
@media screen and ( max-width:767px ){

    .navbar{
        height: 53px;
    }


    .navbar-brand {
        width: 80%;
    }
    

    .logotype{
        width: 130px;
        height: auto;
        }
    
    .navbar-nav {
        padding-left: 10px;
        margin-right: 0;
    }
    

    
    .navbar-nav {
    padding-left: 0px;
    }
    
    .nav-item{
    font-size: 18px;
    }
    
    .nav-link{
        margin-top: 10px;
    }
    
    .underline-style {
        background-image: linear-gradient(to right, rgba(230, 230, 230, 0) 0%, #dedddd 50%, rgba(230, 230, 230, 0) 100%);
        background-repeat: no-repeat;
        background-size: 100% 0.1em;
        background-position: 0 100%;
    }

    /*置底按鈕*/

#mybutton {
	padding: 12px;
	background-image:linear-gradient(to top,  #028f14  0%, #5ac027  100%);
	position: sticky;
	bottom: 0;
	z-index: 999;
	width: 50%;
	border-radius: 20px 0px 0 0;
	float: left;
}

#mybutton a {
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 20px;
	font-weight: 600;
    letter-spacing: 1px;
}

#mybutton2 {
	padding: 12px;
	background-image:linear-gradient(to top,  #41a9f3  0%, #93ddff  100%);
	position: sticky;
	bottom: 0;
	z-index: 999;
	width: 50%;
	border-radius: 0px 20px 0 0;
	float: left;
}

#mybutton2 a {
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 20px;
	font-weight: 600;
    letter-spacing: 1px;
}
    
    
}






/* == 確保所有行動裝置和平板電腦斷點（最大寬度 1199px）下，選單背景為白色 == */
@media (max-width: 1199px) { 

    /* 修正閃爍：確保在動畫過渡期間背景也是白色 */
    .navbar-collapse.collapsing {
        background-color: #FFFFFF !important; 
        color: #333333 !important; 
        transition: none !important; /* 禁用過渡動畫，消除閃爍 */
    }

    /* 當漢堡選單展開時 (.navbar-collapse.show) */
    .navbar-collapse.show {
        background-color: #FFFFFF !important; /* 強制覆蓋為白色 */
        
        /* 實現滿版效果並下移，避免遮蓋 NAV */
        position: fixed;         /* 變更為固定定位 */
        top: 53px;               /* 從上方 53px 處開始（您的 .navbar 高度為 53px） */
        left: 0;
        right: 0;
        bottom: 0;               /* 延伸到底部，實現滿版 */
        height: calc(100vh - 53px); /* 計算高度：可視視窗高度減去 NAV 高度 */
        overflow-y: auto;        /* 如果內容超出螢幕，允許滾動 */
        
        padding-top: 15px;       /* 增加選單頂部內距 */
        padding-bottom: 20px;    /* 增加選單底部內距 */
        border-top: 1px solid #eee; /* 增加淺灰色分隔線 */
    }

    /* 確保在白色背景下，選單中的連結文字變成深色，方便閱讀 */
    .navbar-nav .nav-link {
        color: #333333 !important; /* 將文字強制改為深灰色 */
    }

}

/* == 手機版型區（額外調整） ================================= */
@media screen and ( max-width:767px ){
    /* 調整底線樣式以適應白色背景 */
    .underline-style {
        background-image: none !important; /* 移除原本的漸變底線 */
        border-bottom: 1px solid #eee; /* 改為淺灰色細分隔線 */
        padding-left: 10px; /* 增加左側間距 */
        text-align: center; 
    }
    
    /* 針對手機版（高度變為 53px）重新計算滿版高度 */
    .navbar-collapse.show {
        top: 53px; /* 手機版導覽列高度為 53px */
        height: calc(100vh - 53px); 
    }
}





/*右側按鈕*/


.float-area {
    position: fixed;
    right: 2px;
    bottom: 10vh;
    z-index: 997;
    max-width: 40px;
    width: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    row-gap: 1rem
}

.float-btn a {
    display: block;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s;
    transition: .3s
}

.float-btn a:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

@-webkit-keyframes button_float {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    50% {
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px)
    }

    100% {
        -webkit-transform: translate(0, 0px);
        transform: translate(0, 0px)
    }
}

@keyframes button_float {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    50% {
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px)
    }

    100% {
        -webkit-transform: translate(0, 0px);
        transform: translate(0, 0px)
    }
}

.float-top {
    -webkit-transition: bottom .4s ease,height .3s,opacity .3s,visibility .3s;
    transition: bottom .4s ease,height .3s,opacity .3s,visibility .3s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.float-top__icon {
    font-size: 2rem;
    color: #fff
}

.float-top>a {
    background-color: #616161;
    color:#ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: .4s;
    transition: .4s;
    opacity: .5;
    text-decoration: none
}

.float-top>a:hover {
    opacity: 1;
    text-decoration: none
}

.float-top>a:hover i {
    text-decoration: none
}

.float-top.show {
    height: 40px;
    opacity: 1;
    visibility: visible
}

.float-top:not(.show) {
    height: 0;
    opacity: 0;
    visibility: hidden
}

@media screen and (min-width: 768px) {
    .float-area {
        max-width:122px
    }

    .float-btn {
        right: 16px;
        display: block
    }
}