/* 基本重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: ' Arial, sans-serif; /* 字體 */
}
body {
    background-color: #f5f7fa;
    color: #000;       /* url("qc.jpg") */
    line-height: 1.5;  /* 行高 字距 */
    padding: 0px 0;  
    font-size: 20px;   /* 文字大小 */
}
/* 整體容器 */
.container {
    width: 1050px;
    margin: 0 auto;
    background-color: #f5f7fa;
    border-radius: 20px;  /* 圓角 */
    overflow: hidden;     /* 溢出：隱藏 / 陰影框*/
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* 上部區域樣式 */
.top-section {          /* 上部底色樣式 */
    background: linear-gradient(135deg, #2c3e50, #3498db);
    border-radius: 10px 10px 0 0;  /* 圓角 */
    color: #fff;    padding: 20px;
    position: fixed;    /* 固定  */
    top: 0px;     padding: 0px  0px;
    width: 1050px;    height: 50px;
}

/* 左側邊欄樣式 */
.left-sidebar {
    width: 300px; height: 650px;
    background-color: #f0f0f0;
    border-right: 1px solid #eaeaea;
    padding:68px 15px 5px 10px;
    text-align: left; 
}                      /* 左右分隔專用 */
.div_le {              /* 靠左外框 */  
  float:right;         /* 固定 */  
  width: 300px;   
  padding: 0px 0px 0px 0px;}
#ontop_le {            /* id=ontop_le */
    position: fixed; /*位置：固定*/
    top: 0;     padding: 0px 0px 0px 0px;    
    width: 300px;    height: 38px;
    background:url("qc.jpg");
    font-size:20px; color: #fff;
}   
/* 主內容區域 */
.main-content {
    display: flex;   /* 顯示： 柔性 */
}                    /* 高度min-height: 600px; */
/* 右側內容區域樣式 */
.right-content {
    width: 720px;
    padding: 52px 20px 15px 35px;}
/* 主體 固定 */
.div_co {              /* class */
  float:left;          /* 主体外框 */    
  width: 720px;  background:#eee;     
  padding: 0px 0px 0px 0px;}
#ontop_co {            /*位置：右邊固定*/
    position: fixed;   /* id=ontop_co */
    top: 0px;     padding: 0px  0px;
    width: 720px;    height: 38px;
    color: #fff;
    background:url("qc.jpg");
}  

/* 下部區域樣式 */
.bottom-section {
    background-color: #2c3e50;
    color: white;
    padding: 15px 20px;
    border-top: 5px solid #3498db;
}

/* 抬頭的字 */
.test1::before {
  content: " 🏡　 你還好嗎？　　發生了什麼事？　　那怎麼辦？";
  color: #fff; padding: 15px 20px 15px 230px;
}    /* 粗體字 font-weight: bold; */

/* 尾部的字 - 備用 */
.test2::before {
  content: "✅　就是讓人回到生命，體驗生命的價值感、被自己愛的感覺。";
  color: #fff ; text-align: center;  /* 新增這行 */
  display: block;      /* 如果需要，加上這行讓它變成區塊元素 */ 
}    /* 粗體字 font-weight: bold; */

/* 抬頭小字 - 固定版專用 */
.test3::before { height: 20px; background:url("qc.jpg");
  content: " ☀️ 體驗生命的價值感、被自己愛的感覺。";
  color: #fff; text-align: left;  /* 新增這行 */
  display: block; padding: 3px 0px 0px 54px;font-size: 22px;}

/* 如果需要，加上這行讓它變成區塊元素 */ 
/* 粗體字 font-weight: bold; */

em {font-style:normal; font-weight:bold; 
color:#000080; font-size: 23px;padding:4px 20px 2px 2px;}
/* 字體,粗字体,藍色,字大小,底色 */

em2 {font-style:normal; font-weight:bold;color:#520;}
em3 {font-style:normal; font-weight:bold;color:#000080;}

emz{ 
  border-radius:8px 8px 8px 8px;  /* 圓角 */
  border: 2px ridge #ff0; background-color: #eee;  
  padding: 8px;   /* 邊距 */
  display: flex;  /*顯示： 柔性*/
  flex-direction: column; /* 方向 列*/
}
p { margin: 8px 0px 0px 0px;}

.rounded-img {
  border-radius: 13px; /*圓角*/
}

/*  一般超連結用  -----直式 */
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;
} /* 游標在上面 */

/* ========== 回頂部按鈕 ========== */
#backToTopBtn {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 120px;
  z-index: 9999;
  background-color: #007BFF;
  color: white;
  cursor: pointer;
  padding: 12px 15px;
  border-radius: 50%;
  font-size: 18px;
  opacity: 0.7;
  transition: all 0.3s;
  border: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

#backToTopBtn:hover {
  background-color: #000080;
  opacity: 1;
  transform: scale(1.1);
}