@charset "utf-8";
/* CSS Document */

.probootstrap-navbar .navbar-brand{
	width:300px;
	height:51px;
	}
section[data-section=menu] {
    position: relative;
    margin-top: 10px;
    z-index: -1;
}
.probootstrap-block-image .text{
	height:100px;
	}
.navbar{
		min-height:65px;
}
.probootstrap-cell .text {
    padding: 60px 0;
    position: relative;
}
.flexslider, .flexslider .slides>li, .slider-height {
    height: 1000px;
}
.probootstrap-section.probootstrap-bg-white {
    background: #f5f5f5;
}
.carousel-indicators li{
	border:#ffa33f;
	background-color:#fff;
}
.carousel-indicators .active{
	background-color:#ffa33f;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .probootstrap-navbar .navbar-brand {
    position: relative;
    width: 231px;
    height: 40px;
	top:10px;
    background: url(../img/logo.png) no-repeat left 100%;
    background-size: cover;
  }
  .flexslider, .flexslider .slides>li, .slider-height {
    height: 430px;
}
}

/* 移除點選功能選單時出現的方框 (窗框)：滑鼠點擊與鍵盤操作皆不顯示外框。
   連結本身在 hover/focus 會變成橘色字，鍵盤使用者仍有焦點提示。 */
/* 滑鼠點擊不顯示外框(窗框):只作用於 :focus / :active */
.probootstrap-navbar .navbar-nav > li > a:focus,
.probootstrap-navbar .navbar-nav > li > a:active,
.probootstrap-navbar .navbar-brand:focus,
.probootstrap-navbar .navbar-brand:active,
.navbar-toggle:focus,
.navbar-toggle:active {
	outline: none !important;
	box-shadow: none !important;
}
/* 鍵盤 Tab 操作保留清楚焦點指示(底線,非方框),符合 WCAG 2.4.7。
   :focus-visible 只在鍵盤操作時觸發,滑鼠點擊不會出現。 */
.probootstrap-navbar .navbar-nav > li > a:focus-visible,
.probootstrap-navbar .navbar-brand:focus-visible,
.navbar-toggle:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* icomoon 子集化字型：此 @font-face 最後載入，覆寫前面所有 icomoon 定義，
   讓瀏覽器改載 13.6KB 子集(取代原本 207KB)。舊瀏覽器退回 woff。 */
@font-face{
	font-family:'icomoon';
	src:url("../fonts/icomoon/icomoon.subset.woff2?v=20260714") format("woff2"),
	    url("../fonts/icomoon/icomoon.woff?1z9v6x") format("woff");
	font-weight:normal;
	font-style:normal;
	font-display:block;
}

/* 頁腳:黑色區塊原本上下 padding 各 105px,空白過多導致高度過高。
   縮到 48px 讓高度合理;手機再縮一點並讓兩塊資訊分開。 */
.probootstrap-footer{
	padding-top:48px;
	padding-bottom:48px;
}
.probootstrap-footer .probootstrap-footer-widget h3{
	margin-bottom:16px;
}
@media (max-width:768px){
	.probootstrap-footer{
		padding-top:36px;
		padding-bottom:36px;
	}
	.probootstrap-footer .probootstrap-footer-widget{
		margin-bottom:28px;
	}
}

/* 修正 <picture> 包裝後的圖片:讓 picture/img 變 block 並填滿欄位。
   搭配 <img> 上的 width/height 屬性,瀏覽器會預留正確比例的空間,
   避免手機上 lazy 載入時出現「半張圖 / 單邊留白」與版面跳動。 */
picture{
	display:block;
}
.probootstrap-block-image figure{
	margin:0;
	line-height:0;
}
.probootstrap-block-image figure img,
.probootstrap-block-image figure picture img{
	width:100%;
	height:auto;
	display:block;
}
/* 區塊圖片載入完成前保留淺色底,載入後淡入,過程更平順 */
.probootstrap-block-image figure img{
	background:#f2f0ec;
}

/* ---- 手機版體驗優化 ---- */
@media (max-width:768px){
	/* hero/區塊大標在手機縮小,避免過大溢出 */
	.primary-heading{
		font-size:38px !important;
		line-height:1.15;
	}
	.secondary-heading{
		font-size:20px !important;
	}
	.sub-heading{
		font-size:15px;
	}
	/* 產品輪播區的桌機負邊距(-300px)在手機會蓋住「Our Products」標題,
	   改為正常流排,避免重疊 */
	.probootstrap-section[style*="-300px"]{
		margin-top:0 !important;
	}
	/* 產品圖之間留一點間距,手機直向堆疊更清爽 */
	.probootstrap-block-image{
		margin-bottom:16px;
	}
	/* logo 在 65px 白色導覽列內上下置中(logo 框 40px 高 → 上下各約 12.5px)。
	   只調整垂直位置,尺寸與 background 完全維持原樣(原本的顯示效果是好的)。 */
	.probootstrap-navbar .navbar-brand{
		top:13px !important;
		margin-top:0 !important;
	}
}