@charset "UTF-8";
/* ↑↑↑ 這行最重要！一定要在第一行 ↑↑↑ */
/* margin: 四個邊界  padding:物件邊界  */
body {
    font-family: Arial, sans-serif; /* 字體 */
    margin: 0px 0px 0px 0px;
    color: #000;   font-size: 20px; 
    background:#f8f8f8;  font-size: 20px; 
    line-height: 1.4;   /* 字高 上下 */
    letter-spacing: 0.5px;/* 字距  左右*/
} /*  ---  ----  ----   主体 2/3 視窗*/ 
.div_co {              /* class */
  float:left;          /* 主体外框 */    
  width: 730px;  background:#eee;     
  padding: 0px 0px 0px 0px;
}
/* 抬頭的字 */
.test1::before {
  content: " 🎯　怎麼了？　你還好嗎？　發生了什麼事？　那怎麼辦？";
  color: #fff;　
}    /* 粗體字 font-weight: bold; */

/* 抬頭的字 - 備用 */
.test2::before {
  content: "✅  接收訊息 - 記錄 OK (我在 css)";
  color: #000;　
}    /* 粗體字 font-weight: bold; */


#ontop_co {            /*位置：右邊固定*/
    position: fixed;   /* id=ontop_co */
    top: 0px;     padding: 0px  0px;
    width: 730px;    height: 38px;
    color: #fff;
    background:url("qc.jpg");
}  
/*  ---  ----  ----  - 左邊1/3 視窗*/ 
.div_le {              /* 靠左外框 */  
  float:right;         
  width: 320px;   
  padding: 0px 0px 0px 0px;
}
.div_co2 {             /* 主体內框 */   
  margin-top: 45px  ;  /* class  700*/
  padding: 2px 8px 2px 22px;
  width: 700px;      
  font-size: 20px;  
}

.div_le2 {             /* 靠左內框 */ 
  margin-top: 45px ;   /* class  320*/
  padding: 6px 20px 2px 2px;
  font-size: 18px;  
}
#ontop_le {            /* id=ontop_le */
    position: fixed; /*位置：固定*/
    top: 0;     padding: 0px 0px 0px 0px;    
    width: 320px;    height: 38px;
    background:url("qc.jpg");
    font-size:20px; color: #fff;
}   

/*  ---  ----  ----  黑色字 白色字 */ 
  /* em 的功能 */
.text_00 {            /* class */
   font-weight: bold; /*字體：粗體*/
   font-size: 23px;
   color: #000;
}
.text_ff {            /* class */
   font-weight: bold; /*字體：粗體*/
   font-size: 23px;
   color: #fff;
}  /* 1上 2右 3下 4左  */

.text_bb {            /* class */
   font-weight: bold; /*字體：粗體*/
   color: #000080;   font-size: 23px;
}
.rounded-img {
  border-radius: 15px; /*圓角*/
}

.div-txt {
  display: inline-block;    /* 关键：宽度随内容撑开 */
  font-size: 22px;
  margin: 20px auto;        /* auto 仍然有效，但会居中显示 */
  background-color: #e2e2e2;
  border: 2px solid #4a90e2;
  border-radius: 10px;      /*圓角*/
  padding: 15px 20px;       /* 左右内边距大一点 */
  text-align: center;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
  
  /* 可选：最小宽度限制，避免太窄 */
  min-width: 100px;
  
  /* 可选：最大宽度限制，避免太长一行 */
  max-width: 95%;
}

/* 產生二格空白 */
.cx  {vertical-align: top; }    /* 垂直對齊：上部 */
.cz  {vertical-align: bottom; } /* 垂直對齊：底部 */
.cY {margin-left: 50%; }    /* 左邊距： */
.c1  {line-height: 1.5; }   /* 行高：1.5 */
.c2  {line-height: 2; }     /* 行高：2 */
#i1   {letter-spacing: 1; } /* 字母間距：1 */
#i2   {letter-spacing: 2; }

/* 例:<p id="i2"> <p class=c2>  */
/*  其他  */
emz{ 
  border-radius:8px 8px 8px 8px;  /* 圓角 */
  border: 1px ridge #666;   
  padding: 8px;   /* 邊距 */
  display: flex;  /*顯示： 柔性*/
  flex-direction: column; /* 方向 列*/
}
p { margin: 8px 0px 0px 0px;}

/* 有底圖故知進入劃面 */
/* 列高度;無連結線;功能表顯示橫式 */
/* 字邊距, 上右下左;顏色;粗体字;底圖 */


/*text-decoration: underline; 底線 */
/* sectionLinks styles * font-weight: bolder;加這行為粗体字 */

/*  一般超連結用  -----直式 */
a:link   {color:#000080;  text-decoration:none;}
/*  尚未連結色 (文件字顏色)  後不出現底線 */

a:active { color: #000080; border-bottom: 3px solid #dde;}
/* ok 點下去時 暫時色     本行不可改 cococo */

a:visited{ color: #000080; }
/* ok 連結過的顏色         後段不出現底線  */

a:hover  {color:#fff; background: #000080; 
border-bottom: 3px solid #c00;
}  /* 游標在上面  字色  特殊線 粗體字 底色 下面一條線 */             


/* 橫式功能表     1上 2尾3下 4開頭  */
A.side { display: block; }
    /* 只需這一行就能實現整條變色 */
A.side:link {
color: #000080; text-decoration: none; font-size: 15pt; 
padding:3px 3px 2px 3px; border-bottom: 2px solid #dde;}
A.side:active {
color: #000080; text-decoration: none; font-size: 15pt;
padding:3px 3px 2px 3px; background: #ccc;
 border-bottom: 2px solid #dde;}
A.side:visited {
color: #000080; text-decoration: none; font-size: 15pt;
padding:3px 3px 2px 3px; background: #3f3;
 border-bottom: 2px solid #dde;} /* 游標在上面 */
A.side:hover  
{color:#fff; text-decoration: none;font-size: 15pt;
padding:3px 3px 2px 3px;background: #000080;
 border-bottom: 2px solid #c00;
} /* 游標在上面 */

A.si5:link {
color: #000080; text-decoration: none; font-size: 15pt; 
padding:2px 6px 2px 5px;
border-bottom: 1px solid #080; border-left: 1px solid #080;
border-right: 1px solid #080 ; border-top: 1px solid #080;
}
A.si5:hover  
{color:#000; text-decoration: none;font-size: 15pt;
padding:2px 6px 2px 5px;background: #9AFF02;
border-bottom: 2px solid #c00; border-left: 1px solid #000080;
border-right: 1px solid #000080; border-top: 1px solid #000080;
} /* 游標在上面 */

/*letter-spacing:8px; 橫空隙  */
/*line-height:30px;   高空隙  */
/*text-indent:15px;  橫前空白 */
/*margin-top (上邊界)    font-weight: none; 字型可變 */
/*margin-right (右邊界)  */ 
/*margin-bottom (下邊界) */ 
/*margin-left (左邊界)   */

    /* 回到頂部  按鈕 */
#backToTopBtn {
  display: none;
  position: fixed;
  bottom: 30px;    /* 建議加大距離避免被擋 */
  right: 120px;
  z-index: 99;
  background-color: #007BFF;
  color: white;    /* 改為白字更醒目 */
  cursor: pointer;
  padding: 12px 15px;
  border-radius: 50%;
  font-size: 18px;
  opacity: 0.7;    /* 半透明效果 */
  transition: all 0.3s;
}

#backToTopBtn:hover {
  background-color: #000080;
  opacity: 1;      /* 懸停時變不透明 */
}