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

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');
			html,body {font-family: 'Noto Sans TC', sans-serif !important; width:100%; height:100%;}
      .line{  width:200px;
              height:200p;
			  position:fixed;
			  right:0;
			  bottom:0;
			  z-index:9999;
	  }
	  /* 浮動圖標樣式 */
    .floating-icon {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 60px;
      height: 60px;
      background-color: #00C300; /* LINE 綠色 */
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      z-index: 1000;
      transition: transform 0.2s;
		animation: heartbeat 1.5s ease-in-out infinite; /* 心跳動畫 */
    }
	    /* 心跳動畫定義 */
    @keyframes heartbeat {
      0% { transform: scale(1); }
      20% { transform: scale(1.2); }
      40% { transform: scale(1); }
      60% { transform: scale(1.15); }
      80% { transform: scale(1); }
      100% { transform: scale(1); }
    }
    .floating-icon:hover {
      animation: none; /* 懸停時暫停動畫 */
      transform: scale(1.1); /* 懸停放大 */
    }
    .floating-icon img {
      width: 50px;
      height: 50px;
    }
    .floating-icon::after {
      content: '請點我加入 LINE 官網';
      position: absolute;
      bottom: 70px;
      right: 0;
      background-color: #333;
      color: white;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 25px;
      white-space: nowrap;
      display: none;
      z-index: 1001;
    }
    .floating-icon:hover::after {
      display: block;
    }
    /* 模態視窗樣式 */
    .online {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1001;
      justify-content: center;
      align-items: center;
    }
    .online-content {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      width: 350px;
      max-width: 90%;
      position: relative;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      text-align: center;
    }
    .online-content h2 {
      margin-top: 0;
      font-size: 1.8em;
    }
    .online-content img {
      width: 300px;
      height: 300px;
      margin: 10px 0;
    }
    .online-content a {
      display: inline-block;
      margin-top: 10px;
      color: #00C300;
		font-size : 30px;
      text-decoration: none;
      font-weight: bold;
    }
   
    /* 行動端適配 */
    @media (max-width: 600px) {
      .floating-icon {
        width: 50px;
        height: 50px;
      }
      .floating-icon img {
        width: 25px;
        height: 25px;
      }
      .online-content {
        width: 250px;
      }
      .online-content img {
        width: 120px;
        height: 120px;
      }
    }