img {
  vertical-align: middle;
}

h1 {
  font-weight: bold;
  display: inline-block;
  padding: 0px;
  margin: 0px;
}

#myip1 {
  font-size: 14px;
  font-weight: bold;
  color: red;
  padding: 0px;
  height: 14px;
  vertical-align: bottom;
}

#myip2{
  font-size: 14px;
  font-weight: bold;
  color: blue;
  padding: 0px;
  height: 14px;
  vertical-align: bottom;
}

#css_table {
  display:table;
  border-collapse: collapse;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.css_tr_menu {
  display: table-row;
  font-size: 14px;
  height: 32px;
  background-color: #4267b2;
  color: #ffffff;
  padding: 2px;
/*
  border:1px solid #000000;
*/
}

.css_td_menu {
  display: table-cell;vertical-align:middle;
  text-align: center;
  color: #ffffff;
/*
  border:1px solid #000000;
*/
}

.css_td_menu:hover {
  background-color: #000000;
}

.css_tr_title {
  display: table-row;
  vertical-align: middle; 
  text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
  font-size: 18px;
  font-weight: bold;
  height: 24px;
  background-color: #8adcff;
  color: #ffffff;
  padding: 3px;
}

.css_tr_soltitle1 {
  display: table-row;
  vertical-align: middle; 
  text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
  font-size: 18px;
  font-weight: bold;
  height: 24px;
  background-color: #8adcff;
  color: #ffffff;
  padding: 3px;
}

.css_tr_soltitle2 {
  display: none;
}

.css_tr_header {
  display: table-row;
  vertical-align: top; 
  font-size: 18px;
  font-weight: bold;
  height: 0px;
  background-color: #8adcff;
  padding: 2px;
  color: #000000;
}

.css_tr_subheader {
  display: table-row;
  font-size: 14px;
  font-weight: bold;
  height: 0px;
  text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
  background-color: #8adcff;
  color: #ffffff;
  padding: 2px;
  vertical-align: top; 
}

.css_tr_rowodd {
  display: table-row;
  font-size: 14px;
  height: 0px;
  background-color: #8adcff;
  color: #000000;
  padding: 2px;
  vertical-align: top; 
}

.css_tr_roweven {
  display: table-row;
  font-size: 14px;
  height: 0px;
  background-color: #dff1ff;
  color: #000000;
  padding: 2px;
  vertical-align: top; 
}

.css_tr_button {
  display: table-row;
  font-size: 14px;
  padding: 2px;
  height: 64px;
}

.css_tr_arrow {
  display: table-row;
  font-size: 14px;
  padding: 2px;
  height: 64px;
}

.css_tr {
  display: table-row;
  font-size: 14px;
  padding: 2px;
  height: 0px;
}

.css_td {
  display: table-cell;
}

#sc {
  height: 64px;
  fontsize: 14px;
}

#pc {
  height: 64px;
}

#ar {
  height: 64px;
}

#ic {
  height: 64px;
}

#mc {
  height: 64px;
}

#ap {
  height: 64px;
}

#ac {
  height: 64px;
}

#pp {
  height: 64px;
}

.button_classic {
  display:block;
  margin-left:auto; 
  margin-right:auto;
  background-color: #ea4335;
  text-align: right;
  color: #ffffff;
  border-radius: 17px;
  border: 1px solid white;
  font-size: 6px;
  font-weight: bold;
  font-family: "Times New Roman", Times, serif;
  padding: 0px;
  height: 32px;
  width: 32px;
  text-align: right; 
  text-shadow: -0.5px 0 #000000, 0 0.5px #000000, 0.5px 0 #000000, 0 -0.5px #000000;
  color: #ffffff;
}

.button_solution {
  display:block;
  margin-left:auto; 
  margin-right:auto;
  background-color: #fbbc05;
  text-align: center;
  color: #ffffff;
  border-radius: 17px;
  border: 1px solid white;
  font-size: 6px;
  font-weight: bold;
  font-family: "Times New Roman", Times, serif;
  padding: 16px;
  height: 32px;
  width: 32px;
  text-align: right; 
  text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
  color: #ffffff;
}

.button_service {
  display:block;
  margin-left:auto; 
  margin-right:auto;
  background-color: #34A853;
  text-align: center;
  color: #ffffff;
  border-radius: 17px;
  border: 1px solid white;
  font-size: 6px;
  font-weight: bold;
  font-family: "Times New Roman", Times, serif;
  padding: 16px;
  height: 32px;
  width: 32px;
  text-align: right; 
  text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
  color: #ffffff;
}

.button_contact {
  display:block;
  margin-left:auto; 
  margin-right:auto;
  background-color: #4285f4;
  text-align: center;
  color: #ffffff;
  border-radius: 17px;
  border: 1px solid white;
  font-size: 6px;
  font-weight: bold;
  font-family: "Times New Roman", Times, serif;
  padding: 16px;
  height: 32px;
  width: 32px;
  text-align: right; 
  text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
  color: #ffffff;
}

.button_en {
  background-color: #4285f4;
  margin: 1px;
  text-align: center;
  color: #ffffff;
  border-radius: 5px;
  border: none;
  font-size: 16px;
  font-weight: bold;
  font-family: Arial, Courier, serif;
  padding:1px;
  height: 24px;
  width: 24px;
}

.button_hk {
  margin: 1px;
  background-color: #ea4335;
  text-align: center;
  color: #ffffff;
  border-radius: 5px;
  border: none;
  font-size: 20px;
/*
  font-weight: bold;
  font-family: Arial, Courier, serif;
*/
  padding: 1px;
  height: 24px;
  width: 24px;
}

.button_cn {
  background-color: #34A853;
  margin: 1px;
  text-align: center;
  color: #ffffff;
  border-radius: 5px;
  border: none;
  font-size: 20px;
/*
  font-weight: bold;
  font-family: Arial, Courier, serif;
*/
  padding: 1px;
  height: 24px;
  width: 24px;
}

.button_ip {
  background-color: #fbbc05;
  margin: 1px;
  text-align: center;
  color: #ffffff;
  border-radius: 5px;
  border: none;
  font-size: 20px;
  font-weight: bold;
  font-family: Arial, Courier, serif;
  padding:1px;
  height: 24px;
  width: 24px;
}

.button_title {
  background-image: linear-gradient(to bottom right, #8adcff, #dff1ff, #8adcff);
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: bold;
  height: 32px;
}

.button_title:hover {
  color: #e44f4d;
  cursor:pointer;  
}

.button_blue {
  background-image: linear-gradient(to bottom right, #8adcff, #dff1ff, #8adcff);
  border-radius: 8px;
  border: none;
  font-size: 28px;
  font-weight: bold;
  height: 32px;
}

.button_blue:hover {
  color: #e44f4d;
  cursor:pointer;  
}

.button_red {
  background-image: linear-gradient(to bottom right, #e44f4d, #ffefea, #e44f4d);
  border-radius: 8px;
  border: none;
  font-size: 28px;
  font-weight: bold;
  height: 32px;
}

.button_red:hover {
  color: #e44f4d;
  cursor: pointer;
}

.button_green {
  background-image: linear-gradient(to bottom right, #26bf54, #e9f9f8, #26bf54);
  border-radius: 8px;
  border: none;
  font-size: 28px;
  font-weight: bold;
  height: 32px;
}

.button_green:hover {
  color: #e44f4d;
  cursor: pointer;
}

.button_gray {
  background-image: linear-gradient(to bottom right, #bfbfbf, #f6f6f6, #bfbfbf);
  border-radius: 8px;
  border: none;
  font-size: 28px;
  font-weight: bold;
  height: 32px;
}

.button_gray:hover {
  color: #e44f4d;
  cursor: pointer;
}

.button_pink {
  background-image: linear-gradient(to bottom right, #ffaed7, #fee6ed, #ffaed7);
  border-radius: 8px;
  border: none;
  font-size: 28px;
  font-weight: bold;
  height: 32px;
}

.button_pink:hover {
  color: #e44f4d;
  cursor: pointer;
}

.button_purple {
  background-image: linear-gradient(to bottom right, #cc99fe, #e8ebff, #cc99fe);
  border-radius: 8px;
  border: none;
  font-size: 28px;
  font-weight: bold;
  height: 32px;
}

.button_purple:hover {
  color: #e44f4d;
  cursor: pointer;
}

.button_yellow {
  background-image: linear-gradient(to bottom right, #c9c062, #fffed9, #c9c062);
  border-radius: 8px;
  border: none;
  font-size: 28px;
  font-weight: bold;
  height: 32px;
}

.button_yellow:hover {
  color: #e44f4d;
  cursor: pointer;
}

.button_orange {
  background-image: linear-gradient(to bottom right, #ffa64c, #fff1e4, #ffa64c);
  border-radius: 8px;
  border: none;
  font-size: 28px;
  font-weight: bold;
  height: 32px;
}

.button_orange:hover {
  color: #e44f4d;
  cursor: pointer;
}

#logo {
  width: 420px;
}

h1 {
  font-size: 20px;
  font-weight: bold;
}

h2 {
  font-size: 18px;
  font-weight: bold;
}

h3 {
  color: #fbd9d3;
  font-size: 20px;
  font-weight: bold;
  font-family: "Times New Roman", Times, serif;
}

h4 {
  color: blue;
  font-size: 18px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  font-size: 12px;
  font-family:"Arial", cursive, sans-serif;
  background-color: #ffffff;
}

#menublue  {
  color: #e44f4d;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  text-decoration: none;
}

#menublue a:hover {
  color: #e44f4d;
  text-decoration: none;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration:none; 
  cursor:pointer;  
}

.slideshow-container {
  max-width: 40%;
  position: relative;
  margin: auto;
}

.mySlides {
    display: none;
}

.text {
  color: blue;
  font-size: 16px;
  position: relative;
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: 0.4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: 0.4} 
  to {opacity: 1}
}

@media screen and (max-width:960px){

#css_table {
  display:table;
  border-collapse: collapse;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

#logo {
  width: 100%;
}

}

@media screen and (min-width:1px) and (max-width:512px){

.css_tr_soltitle1 {
  display: none;
}

.css_tr_soltitle2 {
  display: table-row;
  text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
  font-size: 20px;
  font-weight: bold;
  height: 32px;
  background-color: #8adcff;
  color: #ffffff;
  padding: 2px;
}

.css_tr_button {
  display: table-row;
  font-size: 14px;
  padding: 2px;
  height: 32px;
}

.css_tr_arrow {
  display: table-row;
  font-size: 14px;
  padding: 2px;
  height: 16px;
}

#sc {
  height: 48px;
}

#pc {
  height: 48px;
}

#ar {
  height: 48px;
}

#ic {
  height: 48px;
}

#mc {
  height: 48px;
}

#ap {
  height: 48px;
}

#ac {
  height: 48px;
}

#pp {
  height: 48px;
}

.button_hk {
  font-size: 16px;
  padding-top: 0px;
}

.button_cn {
  font-size: 16px;
  padding-top: 0px;
}

.button_title {
  background-image: linear-gradient(to bottom right, #8adcff, #dff1ff, #8adcff);
  border-radius: color: 8px;
  border: none;
  font-size: 12px;
  font-weight: bold;
  height: color: 32px;
}

.button_blue {
  background-image: linear-gradient(to bottom right, #8adcff, #dff1ff, #8adcff);
  border-radius: color: 8px;
  border: none;
  font-size: 12px;
  font-weight: bold;
  height: color: 32px;
}

.button_red {
  background-image: linear-gradient(to bottom right, #e44f4d, #ffefea, #e44f4d);
  border-radius: color: 8px;
  border: none;
  font-size: 12px;
  font-weight: bold;
  height: color: 32px;
}

.button_green {
  background-image: linear-gradient(to bottom right, #26bf54, #e9f9f8, #26bf54);
  border-radius: color: 8px;
  border: none;
  font-size: 12px;
  font-weight: bold;
  height: color: 32px;
}

.button_gray {
  background-image: linear-gradient(to bottom right, #bfbfbf, #f6f6f6, #bfbfbf);
  border-radius: color: 8px;
  border: none;
  font-size: 12px;
  font-weight: bold;
  height: color: 32px;
}

.button_pink {
  background-image: linear-gradient(to bottom right, #ffaed7, #fee6ed, #ffaed7);
  border-radius: color: 8px;
  border: none;
  font-size: 12px;
  font-weight: bold;
  height: color: 32px;
}

.button_purple {
  background-image: linear-gradient(to bottom right, #cc99fe, #e8ebff, #cc99fe);
  border-radius: color: 8px;
  border: none;
  font-size: 12px;
  font-weight: bold;
  height: color: 32px;
}

.button_yellow {
  background-image: linear-gradient(to bottom right, #c9c062, #fffed9, #c9c062);
  border-radius: color: 8px;
  border: none;
  font-size: 12px;
  font-weight: bold;
  height: color: 32px;
}

.button_orange {
  background-image: linear-gradient(to bottom right, #ffa64c, #fff1e4, #ffa64c);
  border-radius: color: 8px;
  border: none;
  font-size: 12px;
  font-weight: bold;
  height: color: 32px;
}

}

/*
   =========================================
   Google AdSense 廣告樣式設定 begin
   =========================================
*/

/* 桌機版 (Desktop) - 左右兩側廣告 */
.ad-side-left, .ad-side-right {
  display: none; /* 預設隱藏，桌機版才顯示 */
}

@media screen and (min-width: 1024px) { /* 螢幕大於 1024px 視為桌機版 */
  .ad-side-left {
    display: block;
    position: fixed;   /* 固定在畫面上 */
    top: 100px;        /* 距離頂部 100px，可自行調整 */
    left: 10px;        /* 靠左 10px */
    width: 160px;      /* 建議寬度 160px，這是標準的側邊欄廣告尺寸 */
    z-index: 999;      /* 確保廣告在最上層 */
  }
  .ad-side-right {
    display: block;
    position: fixed;
    top: 100px;        /* 與左側對齊，可自行調整 */
    right: 10px;       /* 靠右 10px */
    width: 160px;      /* 與左側相同 */
    z-index: 999;
  }
}

/* 手機版 (Mobile) - 底部固定廣告 */
.ad-mobile-bottom {
  display: none; /* 預設隱藏，手機版才顯示 */
}

@media screen and (max-width: 1023px) { /* 螢幕小於 1024px 視為手機/平板 */
  .ad-mobile-bottom {
    display: block;
    position: fixed;   /* 固定在畫面上 */
    bottom: 0;         /* 貼齊底部 */
    left: 0;
    width: 100%;       /* 寬度佔滿 */
    z-index: 9999;     /* 確保在最上層 */
    background-color: #ffffff; /* 白色背景，避免透明看穿 */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* 上方加點陰影，更像 Frame */
    text-align: center;
    padding: 5px 0;    /* 上下留點空間 */
  }
}

/*
   =========================================
   Google AdSense 廣告樣式設定 end
   =========================================
*/