/* stylelint-disable selector-list-comma-newline-after */
/* NAV 沒有時會不可以伸縮但可以往旁移動 */
.nav-scroller {                /* 非bootstrap-4.4.1.CSS */
	position: relative;
	z-index: 2;
	height: 2.5rem;     /* NAV高度 */
	overflow-y: hidden;} /* overflow-y: hidde導致伸縮功能 */
.nav-scroller .nav{          /* .nav沒有時畫面變小無法滑動選項  */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    color: #EEF0F1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* NAV可以伸縮用的 */
.bd-placeholder-img {        /* 非bootstrap-4.4.1.CSS */
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
	.bd-placeholder-img-lg {
		  font-size: 3.5rem;
	}
}

.card-nobg {				/* .card 改成無被景色) */
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  /* background-color: #fff; */
  background-clip: border-box;
  border: 0px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.navbar-center {			/* NAV置中不可有超連結選項  */	  
	padding: 0.5rem 1rem;  
	text-align: center !important;	
}
       /* 將navbar往上間隙改4rem (bootstrap CSS改的)  */
.mt-6 {  
	margin-top: 67px !important;
}
@media screen and (max-width: 1200px) {
    .mt-6 {
      margin-top: 114px !important;
    }
}
.mt-nav {  
	margin-top: 1px !important;
}
@media (min-width: 576px){
    .mt-nav {
      margin-top: 0px !important;
    }
}

/* 文字顏色 */

.text-black{  
  color: #000000 !important; }     /* 文字-黑 */  
.text-blue { 
  color: #003388 !important; }     /* 文字-藍 */
.text-green { 
  color: #036e03 !important; }     /* 文字-綠 */
.text-red { 
  color: #fa0808 !important; }     /* 文字-紅 */ 
.text-indigo { 
  color: #b3088d !important; }     /* 文字-紫 */
.text-yellow { 
  color: #888802 !important; }     /* 文字-黃 */ 
.text-white{               
  color: #ffffff !important; }     /* 文字-白 */
.text-gray-li{  
  color: #e8eaea !important; }     /* 文字-淺灰 */ 
.text-blue-li{     
  color: #b6d0fa !important; }     /* 文字-淺藍 */ 
.text-green-li { 
  color: #9dec95 !important; }     /* 文字-淺綠 */ 
.text-red-li { 
  color: #f9b8f0 !important; }     /* 文字-淺紅 */  
 .text-yellow-li { 
  color: #fdfdb6 !important; }     /* 文字-淺黃 */  


/* 文字為大小 */
.fontsixe-10px{
  font-size: 10px; }    /* 文字為10px */
.fontsixe-12px{
  font-size: 12px; }    /* 文字為12px */
.fontsixe-14px{
  font-size: 14px; }    /* 文字為14px */
.fontsixe-16px{
  font-size: 16px; }    /* 文字為16px */
.fontsixe-18px{
  font-size: 18px; }    /* 文字為18px */
.fontsixe-20px{
  font-size: 20px; }    /* 文字為20px */
.fontsixe-22px{
  font-size: 24px; }    /* 文字為22px */
.fontsixe-24px{
  font-size: 24px; }    /* 文字為24px */
.fontsixe-26px{
  font-size: 26px; }    /* 文字為26px */
.fontsixe-28px{
  font-size: 28px; }    /* 文字為28px */

 /* 文字粗細   font-weight:normal; 一般(預設) */
.font-weight-bold{		/* 文字為粗體 */
	font-weight:bold;}
.font-weight-bolder{		/* 比粗體更粗 */
	font-weight:bolder;}
.font-weight-lighter{		/* 比一般文字更細 */
	font-weight:lighter;}
/* font-weight:500;      >> 100~900：數字越大越厚 500後會比較明顯  */

/* 背景顏色 */
.bg-white{               
  background-color: #ffffff !important; }     /* 背景-白 */
.bg-gray-li{  
  background-color: #e8eaea !important; }     /* 背景-淺灰色 */  
.bg-blue-li{     
  background-color: #e0fdf7 !important; }     /* 背景-淺藍 */
.bg-green-li { 
  background-color: #e5fae8 !important; }     /* 背景-淺綠 */
.bg-red-li { 
  background-color: #fcd1d3 !important; }     /* 背景-淺紅 */
.bg-yellow-li{  
  background-color: #f5fadf !important; }     /* 背景-淺黃 */ 
.bg-indigo-li { 
  background-color: #fbe6f8 !important; }     /* 背景-淺紫 */
.bg-blue { 
  background-color: #003388 !important; }     /* 背景-深藍 */
.bg-green { 
  background-color: #036e03 !important; }     /* 背景-綠 */
.bg-red { 
  background-color: #970000 !important; }     /* 背景-紅 */ 
.bg-yellow{  
  background-color: #abab03 !important; }     /* 背景-黃 */ 
.bg-indigo { 
  background-color: #b3078d !important; }     /* 背景-紫 */


.put-center {text-align:center;}	/* 水平置中 */
.put-rr {text-align:right;}  		/* 靠右置放 */
.put-ll {text-align:left}			/* 靠左置放 */

.img-auto{							/* 圖片可跟畫面自動縮放 */
 	display: block;
	max-width: 100%;
	height: auto;
	}

.gjoqup{            				/* 水平置中 */     
  display:block;
  margin:auto;						/*width: 40%;*/ 
  }

.h75{    							/* <p>框的大小設定 */
  height: 75%;						/* height =外框高度   */
  }
  
.p200{     							/* <p>框的大小設定 */
  height: 150px;  }				   	/* height =外框高度   */


.inage-bg-1{      					/* 指定圖片背景 style="background:url(images/inage-bg-1.jpg);background-size:auto 100%;" */
  background-image: url("../images/main-31.jpg");  }

 /* card-body 的邊距改為5px */
.card-body-5px {					/* min-height=最小高度 padding=邊距 */
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 1px;
  padding: 5px;	}					/* 原padding: 1.25rem; */

.card-body-10px {					/* min-height=最小高度 padding=邊距 */
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 1px;
  padding: 10px;					/* 原padding: 1.25rem; */
}

/* 滑鼠進入圖片圖片變大特效 */
.img-in-mouse{
  transition: transform 1s ease;	}               /* transition:(name)all (時間)0.5s (效果曲線)ease-out (效果開始時間)  為圖片放大所需的時間和特效 */
.card:hover .img-in-mouse{                         	/* :hover才示重點表示滑鼠滑入.card(CSS)內才動作 */
  transform: scale(0.95);                          	/* 圖片大小 標準是1 */
  opacity: 0.9;										/* 圖片亮度 值愈小愈亮 */
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.8);	}	/* 外圍有外圍有螢影*/

  

/* 外邊界間距padding  */ 
.padding-5{padding:5px;}
.padding-10{padding:10px;}
.padding-20{padding:20px;}
.padding-rl{padding-right: 0px;padding-left: 0px;}

.padding-r{padding-right: 0px;}
@media screen and (max-width: 539px) { 
	.padding-r{
        padding-right:15px;
	}
}

.padding-l{padding-left: 0px;}
@media screen and (max-width: 539px) { 
	.padding-l{
        padding-left:15px;	}
	}
	
.padding-no{padding:0px;}

.mr-rl-0{margin-left: 0px;		/* 內邊界間距 margin LR=0 */
		margin-right: 0px;}
		
.mr-rl-10{margin-left: 10px;	/* 內邊界間距 margin LR=10 */
		margin-right: 10px;}

.bg-00{							/* 無背景色,無框線 */
	background-color: transparent; 
    border-color: transparent;
}

.auto-height {  
	height: 40px;
	padding:2px;
}

/* max-width，表示這個數字以下（包含）min-width，表示這個數字以上（包含 */
@media screen and (max-width: 767px) { 
	.auto-height {
        height: 60px;
		padding:2px;
	}
}

.div-line{				/*div 外框現（藍色）  */ 
	border:#bdbebf solid;
	border-width:1px;
}

.div-h40p8{
	height:40px;
	padding: 8px;
}
@media screen and (max-width: 767px) { 
	.div-h40p8{
        height: auto;
		padding:0px;
	}
}