/* Helper style */
.alignCenter {
  margin: 0 auto;
  text-align: center;
}

.bgc0 {
  color: #FFFFFF;
  background-color: #912E60;
}

.bgc1 {
  color: #FFFFFF;
  background-color: #6F34AB;
}

.bgc2 {
  color: #FFFFFF;
  background-color: #245D08;
}

.bgc3 {
  color: #FFFFFF;
  background-color: #834104;
}

.bgc4 {
  color: #FFFFFF;
  background-color: #015785;
}

.bgc5 {
  color: #FFFFFF;
  background-color: #8102D1;
}

.bgc6 {
  color: #FFFFFF;
  background-color: #206400;
}

.bgc7 {
  color: #FFFFFF;
  background-color: #181A9A;
}

.bgc8 {
  color: #FFFFFF;
  background-color: #A80F07;
}

.bgc9 {
  color: #FFFFFF;
  background-color: #585C08;
}

.bgc10 {
  color: #FFFFFF;
  background-color: #8719BE;
}

.bgc11 {
  color: #FFFFFF;
  background-color: #175e70;
}

.bgc12 {
  color: #FFFFFF;
  background-color: #912e60;
}

.bgc13 {
  color: #FFFFFF;
  background-color: #834104;
}

.bgc14 {
  color: #FFFFFF;
  background-color: #3939E2;
}

.bgc15 {
  color: #FFFFFF;
  background-color: #7e3b7e;
}

.bgcGray {
  color: #FFFFFF;
  background-color: #575656;
}

.bgcSection1 {
  background-color: #CCFFDD;
}

.bgcSection2 {
  background-color: #EEFFCC;
}

.bgcSection3 {
  background-color: #CCEEFF;
}

.bgcSection4 {
  background-color: #EECCFF;
}

.bgcSection5 {
  background-color: #FFCCEE;
}

.bgcSection6 {
  background-color: #FFEECC;
}

.bgcFacebook1 {
  background-color: #3b5998;
}

.bgcFacebook2 {
  background-color: #8b9dc3;
}

.bgcFacebook3 {
  background-color: #dfe3ee;
}

/* 定欄寬用 */
.width100 {
  max-width: 76em;
  width: 100%;
}

.width92 {
  max-width: 69.92em;
  width: 92%;
}

.width75 {
  max-width: 57em;
  width: 100%;
}

.width66 {
  max-width: 50.16em;
  width: 100%;
}

.width50 {
  max-width: 38em;
  width: 100%;
}

.width33 {
  width: 25.08em;
  max-width: 100%;
}

.width25 {
  max-width: 19em;
  width: 100%;
}

/* 定欄寬用 */
.NumCol1 {
  width: 100%;
}

.NumCol2 {
  width: 49%;
}

.NumCol3 {
  width: 32%;
}

.NumCol4 {
  width: 24%;
}

.NumCol5 {
  width: 19%;
}

.PaddingTopOneAndHalfLine {
  padding-top: 1.5em;
}

.PaddingBottomOneAndHalfLine {
  padding-bottom: 1.5em;
}

.PaddingTopOneLine {
  padding-top: 1.0em;
}

.PaddingBottomOneLine {
  padding-bottom: 1.0em;
}

.PaddingTopHalfLine {
  padding-top: 0.5em;
}

.PaddingBottomHalfLine {
  padding-bottom: 0.5em;
}
/* 選單的選項 */

.aptBtnList
{
	margin: 0.125em;
	padding: 0.125em;
	line-height: 2.5em;
}
.aptBtnListItem
{
	display: inline;
}
.aptBtnHidden
{
	text-align: center;
	margin: auto;
	font-size: 1.25em;
	color: #3c3729;
	border: 1px solid #3c3729;
	border-radius: 5px;
	padding: 0.125em 1em;
}
.aptBtnHiddenSelected
{
	background-color: #2980b9;
	color:#FFFFFF;
}
a.aptBtnHidden:hover
{
	color: #FFFFFF; 
	border-color: #FFFFFF;
	background-color: #2980b9;
}
.aptBtnHidden:visited
{
	color: #3c3729;
}

.aptCircledNumber
{
  height: 36px;
  width: 36px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%; /* may require vendor prefixes */
  color: #333333;
  border: 1px solid #AAAAAA;
} 


/* * 跑馬燈容器
 * 1. `overflow: hidden;` 是關鍵，它會隱藏跑出這個 div 範圍的文字。
 * 2. `white-space: nowrap;` 確保所有文字都在同一行，不會自動換行。
 * 3. 設置一個固定的寬度和邊框，只是為了讓效果更明顯。
*/
.marquee-container {
    width: 100%; /* 容器寬度 */
    max-height: 3.25rem;
    margin: 0 auto; /* 垂直 20px，水平 auto 居中 (調整間距) */
    overflow: hidden; /* 隱藏超出範圍的內容 */
    border: 0;
    background-color: #ff0;
    outline: none;    
}

/* * 跑馬燈的文字內容
 * 1. `display: inline-block;` 讓這個 div 可以被 transform。
 * 2. `padding-left: 100%;` 讓文字一開始從容器的右側外面開始跑。
 * 3. `animation:` 應用我們下面定義的動畫。
*/
.marquee-text {
    display: inline-block;
    white-space: nowrap; /* 保持在同一行 */
    padding-left: 100%; /* 從容器右側外開始 */
    line-height: 1.5rem;
    font-size: 1.25rem;
    
    /* 應用動畫：
     * marquee-scroll 是動畫名稱
     * 15s 是動畫跑完一次的時間（越長越慢）
     * linear 是動畫速度（勻速）
     * infinite 是無限次重複
    */
    animation: marquee-scroll 15s linear infinite;
}
/* * 當 .is-paused class 被添加到 .marquee-text 時，暫停動畫
*/
.marquee-text.is-paused {
    animation-play-state: paused;
}
/* * 定義 CSS 動畫 (keyframes)
 * 1. `from (0%)`: 動畫開始時，文字在容器的右側（平移 0%）。
 * （因為我們用了 `padding-left: 100%`，所以 0% 是在右側剛好要進來的地方）
 * 2. `to (100%)`: 動畫結束時，文字向左平移了 100% 的 *自身寬度*。
 * `transform: translateX(-100%)` 確保整個文字串都會跑出左側邊界。
*/
@keyframes marquee-scroll {
    from {
        transform: translateX(0%);
    }
    to {
        /* 平移 -100% (相對於元素自身的寬度) */
        transform: translateX(-100%);
    }
}
/* * 暫停/繼續 按鈕
 * 1. 預設隱藏 (`opacity: 0`)
 * 2. 絕對定位在中間
 * 3. 增加過渡效果
*/
.pause-button {
    position: absolute;
    z-index: 1001;
}

.pause-button {   
	display: none;
}

/* * 當滑鼠懸停 (hover) 或容器獲得焦點 (focus-within) 時，顯示按鈕
 * :focus-within 確保了當使用者 Tab 到容器或按鈕時，按鈕都能顯示
*/
.marquee-container:hover .pause-button,
.marquee-container:focus-within .pause-button {
	display: block;
}


/*
 * < 1007px
 * For desktop monitors 
 */
@media only screen and (max-width: 1306px), (min-resolution: 200dpi)
/*and (max-resolution: 100dpi)*/
{
	.aptAdvArea {
    max-height:760px;
    top:0;
    height:760px
  }
  
}

/*
 * >= 1008px
 * 桌機螢幕適用  PC
 * pixel-ratio: 1.33 for Samsung Galaxy Tablet
 */
@media only screen and (min-width: 1307px) 
{
	.aptAdvArea
	{
		max-height: 760px; 
		
		top: 0px;
		height: 760px;
	}
}


/*
 * Tested Devices: hTC M8 
 */
@media only screen 
   and (orientation: landscape) 
   and (min-width: 360px) 
   and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 280dpi) 
{
	.aptAdvArea
	{
		top: 45px; 
	}
}

/*
 * Tested Devices: Samsung Galaxy Tab Landscape
 */
@media only screen 
   and (orientation: landscape) 
   and (min-width: 603px) 
   and (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 120dpi) 
{
	.aptAdvArea
	{
		top: 0; 
	}
}


/*
 * Tested Devices: Samsung Galaxy Tab, portrait
 */
@media only screen and (orientation: portrait) and (min-width: 602px) 
   and (-webkit-min-device-pixel-ratio: 1.33) 
   and (-webkit-max-device-pixel-ratio: 2)
     , (min-resolution: 125dpi) and (max-resolution: 288dpi) 
{
	.aptAdvArea
	{
		top: 0; 
	}
}

/*
 * Tested Devices: iPhone 6 Landscape, 667x375, ration = 2 
 */
@media only screen 
	and (orientation: landscape) 
	and (min-width: 667px) 
	and (-webkit-device-pixel-ratio: 2)
{
	.aptAdvArea
	{
		top: 0; 
	}
}

/*
 * Tested Devices: iPhone Portrait/Samsung Galaxy Note, 375x667, ratio = 2 
 */
@media only screen
	and (orientation: portrait) 
 	and (min-width: 375px) 
 	and (-webkit-device-pixel-ratio: 2)
{
	.aptAdvArea
	{
		top: 0; 
	}
}