body {
  max-width: 100vw;
  overflow-x: hidden;
  scroll-behavior: smooth;
}


.shape-1.bottom{top:inherit; bottom: -1px;}
.shape-1{position: absolute; top: -1px; width: 100%; left: 0px; right: 0px;}
.w-100{width: 100%!important;}
.h-100{height: 100%!important;}
img, svg{vertical-align: middle;}
.shape-1.top{top:inherit; top: -1px;}
.flip-svg {transform: scaleY(-1);display: block; }
.hero_shadow{box-shadow: 0 12px 58px 0 rgba(20, 17, 45, 0.35); border-radius: 20px;}
.pic_shadow{box-shadow: 0 12px 58px 0 rgba(20, 17, 45, 0.35); }

.text-indent1{text-indent: 36px;}


.number{width: 50px; height: 50px; border-radius: 50%; font-size: 30px; font-weight: 400; color: #fff; background-color:#086ad7; 
display: inline-flex; justify-content: center; align-items: center; margin-right: 10px; vertical-align: middle; }

.number2{width: 30px; height: 30px; border-radius: 50%; font-size: 18px; font-weight: 400; color: #fff; background-color:#086ad7; 
display: inline-flex; justify-content: center; align-items: center; margin-right: 5px; vertical-align: middle; }

.number_ab1{position: absolute; top: -20px; left: 45%; width: 50px; height: 50px; border-radius: 50%; font-size: 35px; font-weight: 400; color: #fff; background-color:#086ad7; 
border: 2px solid #fff; display: inline-flex; justify-content: center; align-items: center; margin-right: 10px; vertical-align: middle;}
.number_ab2{position: absolute; top: -20px; left: 45%; width: 50px; height: 50px; border-radius: 50%; font-size: 35px; font-weight: 400; color: #086ad7!important; background-color:#fff; 
border: 1px solid #086ad7; display: inline-flex; justify-content: center; align-items: center; margin-right: 10px; vertical-align: middle;}

.text-stroke { color: white; -webkit-text-stroke: 2px #0361ca; text-shadow: -2px -2px 0 #0361ca, 2px -2px 0 #0361ca, -2px  2px 0 #0361ca, 2px  2px 0 #0361ca;}

.font-size1{font-size: 60px;}

.img_title{position: absolute; bottom: 0px; right: 0px;}

/* font */
.font1{font-family: Georgia, serif; }
.font-label{font-family: arial !important; font-size: 10px !important; background-color: rgba(0,0,0,0.5); font-style: normal !important; padding: 2px; font-weight: normal; }
.ht_black{ color: #666; font-family: Georgia, serif; }
.ht_black2{ color: #004fa7;  }
.ht_black3{ color: #666;  }




/* toolbox */
.tool-box {
  position: relative; /* 為 Tooltip 的定位提供參考 */
  display: inline-block; /* 確保容器適應內容 */
}

.tool-btn {
  padding: auto; 
}

.tool-label {
  visibility: hidden; /* 初始隱藏 */
  opacity: 0; /* 初始透明 */
  background-color: #333; /* Tooltip 背景顏色 */
  color: #fff; /* 文字顏色 */
  text-align: center;
  border-radius: 5px;
  padding: 5px 10px;
  position: absolute;
  z-index: 10;
  bottom: -25px; /* Tooltip 與按鈕的距離 */
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.3s ease-in-out;
  white-space: nowrap;
  font-size: 12px;
}

/* 添加向下的小箭頭 */
.tool-label::after {
  content: "▲";
  position: absolute;
  top: -10px; /* 與 Tooltip 底部對齊 */
  left: 50%;
  transform: translateX(-50%);
  color: #333;
  z-index:99;
}

.tool-box:hover .tool-label {
  visibility: visible; /* 顯示 Tooltip */
  opacity: 1;
}


.social-link {
    display: inline-block;
    position: relative;
}

/* bookstore Tooltip 文字樣式 */
.book-tooltip-text {
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    padding: 0px 10px;
    border-radius: 5px;
    font-size: 12px;
    position: absolute;
    bottom: 100%; /* 讓 Tooltip 出現在上方 */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* 三角形指示器 */
.book-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

/* 滑鼠懸停時顯示 Tooltip */
.tooltipbook:hover .book-tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

/* 書圖片hover */
.image-wrapper {
  position: relative;
  display: inline-block;
  width: 500px; /* 設定圖片大小 */
  height: 480px;
}

.image-wrapper img {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
}

.hover-img {
  opacity: 0;
}

.image-wrapper:hover .hover-img {
  opacity: 1;
}

.image-wrapper:hover .normal-img {
  opacity: 0;
}

.imgsize1{width: 30%; box-shadow: 0 10px 38px 0 rgba(20, 17, 45, 0.35); border-radius: 20px;}
.text-shadow { text-shadow: 1px 1px 2px rgba(20, 17, 45, 0.35), 0 0 1em rgba(20, 17, 45, 0.35), 0 0 0.2em rgba(20, 17, 45, 0.35);}

.line-h1{ display: inline-block;  line-height: 1.2; color: #9e9e9e; font-weight: 100px;}
.line-h2{ display: inline-block;  line-height: 1.2;  font-weight: 100px;}
.line-h3{ display: inline-block;  line-height: 1.1;  }

.bootstore_unit{position: absolute; top: -5px; left: -5px;}


.icon_size1{font-size: 60px;}
.min-h1{min-height: 240px;}
.min-h2{min-height: 280px;}
.min-h3{min-height: 400px;}
.min-h4{min-height: 370px;}

.bg_blue{background-color: #086ad7; background-image: url('assets/img/home4/funfact-line.png');}

.section-padding-t{padding-top: 130px; padding-bottom: 0px;}
.section-padding-b{padding-bottom: 130px; padding-top:0px;}

.z1{z-index: 999999999;}

.border1{ border-bottom: dashed 1px rgba(33,30,59,0.3);}
hr.hr1{border-top: dashed 1px rgba(33,30,59,0.5);}

.answer {display: none;}
.icon-box:hover{color: #fff;}


@media (max-width: 1180px) {
  .w1{ max-width: 400px;}
}

@media (max-width: 1024px) {
  .img_title{bottom: 40px; }
  .imgsize2 {width: 50%; }
  .w1{ max-width: 400px;}
}


@media (max-width: 768px) {
  .img_title{bottom: 40px; right: -20px; }
}

@media (max-width: 480px) {
.imgsize1{width: 40%;}
.number{width: 40px; height: 40px; border-radius: 50%; font-size: 25px; margin-right: 5px;  }
.font-size1{font-size: 30px; letter-spacing: -5px;}
.min-h4{min-height: 300px;}
.tooltip-w1 { max-width: 80vw;}
.tooltip-w2 { max-width: 80vw;}
.img_title{display: none;}
}