﻿body {
	background-image: linear-gradient(to bottom, #8CCDC5, #FFFFFF);
    background-repeat: no-repeat;
    padding: center;
    background-position: center 0%;
	font-family: "微軟正黑體", "Arial Unicode MS";
	font-size: 20px;
	line-height: 30px;
	font-weight: bold;
	color: #000;
	text-align: justify;
	text-decoration: none;
}
table {
    border-collapse: collapse;
    border-radius: 1px;


	overflow: auto
	border-color: rgba(114,114,114,1.00);
    text-align: justify;
	}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
.container {
            max-width: 1280px;
            margin: auto;
            background: #ffffff;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
            border: 2px solid #FFFFFF;
        }
.css-mine {
  margin-top: 2em;
  clear: both;
}
@media (max-width: 600px) {
      body {
        font-size: 16px;
      }

      td {
        padding: 0px !important;
      }
    box4{
	background-image: url(postapp2025details_04.png);
	background-repeat:no-repeat;
	background-position:bottom;
	text-align: justify;
	text-decoration: none;
}
    }

#box1 {
    width:100%;
    max-width:1280px;
    background-image: url(app2yearsoldbg.jpg);
    background-size: 100% 100%;
    background-repeat:no-repeat;
    background-position: top;
    text-align: center;
}

#box3 {
    width:100%;
    max-width:1280px;
	background-image: url(postapp2025detail_02.jpg);
	background-size:100% 100%;
	background-repeat:repeat;
	background-position:bottom;
	text-align: justify;
}
#box4 {
    width:100%;
    max-width:1280px;
	background-image: url(postapp2025detail_04.png);
	background-repeat:no-repeat;
	background-position:right bottom; /* 這裡修改 */
    background-size: contain;
	text-align: justify;
	text-decoration: none;
}
#box5 {
    width:100%;
    max-width:1280px;
	background-image: url(postapp2025detailtop.jpg);
	background-size:100% 100%;
	background-repeat:no-repeat;
	background-position:top; /* 這裡修改 */
    background-size: contain;
	text-align: justify;    
}
#box6 {
    width:80%;
    max-width:800px;
	font-size: .8em;
	text-align: justify;
	text-decoration: none;
}
#b {
	font-family: "微軟正黑體", "Arial Unicode MS";
	font-size: 20px;
	line-height: 30px;
	font-weight: bold;
	color: #000;
	text-align: justify;
}
#bb {
	font-family: "微軟正黑體", "Arial Unicode MS";
	font-size: 18px;
	line-height: 26px;
	font-weight: bold;
	color: #000;
}
#bblue {
    font-family: "微軟正黑體", "Arial Unicode MS";
    font-size: 20px;
    line-height: 30px;
    font-weight: bold;
    color: #0005FF;
}
#br {
	font-family: "微軟正黑體", "Arial Unicode MS";
	font-size: 24px;
	line-height: 30px;
	font-weight: bold;
	color: #F00;
	text-align: justify;
	caption-side: top;
}
#bry {
	font-family: "微軟正黑體", "Arial Unicode MS";
	color: #FF0004;
	background-color:#FFFF95;
}
#bgr {
	font-family: "微軟正黑體", "Arial Unicode MS";
	font-size: 24px;
	line-height: 30px;
	font-weight: bold;
	color: #F00;
	text-align: center;
	caption-side:  inherit;
}
#bbr {
	font-family: "微軟正黑體", "Arial Unicode MS";
	font-size: 15px;
	line-height: 1.2em;
	font-weight: bold;
	color: #F00;
	text-align: justify;
	caption-side: top;
}
#bbg {
	font-family: "微軟正黑體", "Arial Unicode MS";
	font-size: 20px;
	line-height: 1.2em;
	font-weight: bold;
	color: #090;
	text-align: justify;
}
#bbp {
	font-family: "微軟正黑體", "Arial Unicode MS";
	font-size: 20px;
	line-height: 1.2em;
	font-weight: bold;
	color: #6A0099;
	text-align: justify;
}
#bbw {
	font-family: "微軟正黑體", "Arial Unicode MS";
	font-size: 20px;
	line-height: 1.2em;
	font-weight: bold;
	color: #FFF;
	text-align: center;
}
#bby {
	font-family: "微軟正黑體", "Arial Unicode MS";
	font-size: 20px;
	line-height: 1.2em;
	font-weight: bold;
	color: #FF0;
	text-align: center;
}
#bbbw {
	font-family: "微軟正黑體", "Arial Unicode MS";
	font-size: 15px;
	line-height: 18px;
	font-weight: bold;
	text-align: center;
	color: #FFF;
}
#bbby {
	font-family: "微軟正黑體", "Arial Unicode MS";
	font-size: 15px;
	line-height: 16px;
	font-weight: bold;
	text-align: center;
	color: #FF0;
}
#bbb {
	font-family: "微軟正黑體", "Arial Unicode MS";
	font-weight: 900;
    font-size: .7em;
	line-height: 20px;
	color: #000;
}

#zi_1{
background-color: #EC6A96; /* 背景色 */
border-radius: 5px;
padding: 5px;
position: relative;
z-index: 0;
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 1.2em;
line-height: 1.2em;
font-weight: bold;
color: #FFFFFF;
border-radius: 30px;
color: #FFFFFF;
}
.zi_box_s {
  border: 2px solid #D5617C; /* 設定邊框：2px 寬的實線，顏色為粉紅色 */
  border-radius: 10px;       /* 設定圓角：4px 的圓角 */
  margin: 0 3em 2em 0em  ;           /* 設定外邊距：上下各 2em，左右為 0 */
  padding: 10px;            /* 設定內邊距：四周都是 20px */
  position: relative;       /* 設定為相對定位，為了讓偽元素可以相對於它定位 */
}
.zi_box_s::before {
  background-color: #fff;   /* 設定偽元素的背景顏色為白色 */
  color: #D5617C;          /* 設定偽元素的文字顏色為淺藍色 */
  content: "舉例";      /* 設定偽元素的內容為 "注意事項" */
  font-weight: bold;        /* 設定偽元素的文字為粗體 */
  left: 1em;               /* 設定偽元素的左邊距為 1em，使其向右偏移 */
  padding: 0 .5em;         /* 設定偽元素的內邊距：上下為 0，左右為 0.5em */
  position: absolute;       /* 設定為絕對定位，相對於其最近的已定位祖先元素（.zi_box_1） */
  top: -1em;               /* 設定偽元素的上邊距為 -1em，使其向上偏移，超出邊框 */
}
#zi_box_1 {
padding: .5em;
margin: 0em 0;
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 22px;
line-height: 30px;
font-weight: bold;
color: #FFFFFF;
background: #E76D8B;/*背景色*/
border-left: solid 5px #E984A5;/*左線*/
border-right: solid 5px #E984A5;/*右線*/
border-radius: 20px;
}

#zi_text_3_b {
background-color: #ED7A97; /* 背景色 */
border-radius: 5px;
padding: 5px;
position: relative;
z-index: 0;
border-radius: 30px;
color: #FFFFFF;
}
#zi_text_3_e {
background-color: #FFE0E8; /* 背景色 */
border-radius: 5px;
padding: 5px;
position: relative;
z-index: 0;
border-radius: 30px;
color: #565656;
}

#zi_box_2 {
padding: .5em;
margin: 0em 0;
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 22px;
line-height: 70px;
font-weight: bold;
color: #FFFFFF;
background: #820071;/*背景色*/
border-left: solid 10px #B90090;/*左線*/
border-radius: 5px;
}

#zi_text_3_c {
background-color: #820071; /* 背景色 */
border-radius: 5px;
padding: 5px;
position: relative;
z-index: 0;
border-radius: 30px;
color: #FFFFFF;
}

#zi_box_3 {
padding: .5em;
margin: 0em 0;
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 22px;
line-height: 70px;
font-weight: bold;
color: #FFFFFF;
background: #01189F;/*背景色*/
border-left: solid 10px #0A3EE5;/*左線*/
border-radius: 5px;
}

#zi_text_3_d {
background-color: #01189F; /* 背景色 */
border-radius: 5px;
padding: 5px;
position: relative;
z-index: 0;
border-radius: 30px;
color: #FFFFFF;
}

#zi_2{
background-color: #2C8B82; /* 背景色 */
border-radius: 5px;
padding: 5px;
position: relative;
z-index: 0;
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 1.2em;
line-height: 1.2em;
font-weight: bold;
color: #FFFFFF;
border-radius: 30px;
color: #FFFFFF;
}
#zi_3{
background-color: #2C8B82; /* 背景色 */
border-radius: 5px;
padding: 5px;
position: relative;
z-index: 0;
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 20px;
line-height: 30px;
font-weight: bold;
color: #FFFFFF;
border-radius: 30px;
color: #FFFFFF;
}
.highlight-purple {
            color: #E5517D;
            font-weight: 900;
            font-size: 1.1em;
        }
.highlight-red {
            color: #E5517D;
            font-weight: 900;
            font-size: 1.2em;
        }
.bordered-section {
    border: 2px solid #E5517D; /* Border for the new div */
    border-radius: 30px;
    padding: 1px;
    margin:10px 0px 5px 0px;
}
.custom-bullet-list {
    list-style: none; /* Remove default list numbers/bullets */
    margin-top: 0;
    /* Adjusted padding-left to effectively pull the entire list to the left */
    padding-left: 1em; /* Approximately half a Chinese character width from the very left edge of its container */
}

.custom-bullet-list li {
    position: relative; /* Needed for positioning the ::before element */
    /* Adjust padding-left to control space between dot and text */
    padding-left: 0.5em; /* Space for the custom bullet, making it half a character width from text */
    margin-left: 0; /* Reset any previous margin-left */
    text-indent: 0; /* Reset any previous text-indent */
    margin-bottom: 0.5em; /* Add some space between list items */
}

.custom-bullet-list li::before {
    content: ''; /* Essential for pseudo-elements */
    position: absolute;
    /* Adjusted 'left' to pull the dot further left relative to the list item's padded area */
    left: -0.5em; /* Moves the dot half a character to the left of the list item's content start */
    top: 0.5em; /* Adjust vertical alignment of the dot */
    width: 10px; /* Size of the dot */
    height: 10px; /* Size of the dot */
    background-color: #D6627D; /* The desired red color */
    border-radius: 50%; /* Makes it a perfect circle */
}

#backToTopBtn {
    display: flex; /* 啟用 Flexbox */
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #8CCDC5;
    color: white;
    cursor: pointer;
    width: 50px;  /* 設定固定的寬度 */
    height: 50px; /* 設定固定的高度，與寬度相同以形成正圓 */
    border-radius: 50%; /* 讓按鈕變成圓形 */
    font-size: 18px; /* 字體大小 */
    
    /* 讓內容垂直和水平居中的關鍵 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */

    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* 可選：增加陰影效果 */
}

#backToTopBtn:hover {
    background-color: #B9EDE6; /* 鼠標懸停時的背景顏色 */
}
