/* ====(((( 模板開始：背景 (comp_basic_20260617001__area-bgtop) ))))===== */
.Area_bgtop {
  pointer-events: none;
  z-index: -1;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .Area_bgtop {
    left: 50%;
    transform: translateX(-50%);
    width: 2000px;
  }
}
.Area_bgtop .bgtop {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top center;
}
@media screen and (max-width: 767px) {
  .bgtop {z-index: -1; background-size: 100% auto; background-image: url(bgtop.png?t=1788495176879);}
}
@media screen and (min-width: 768px) {
  .bgtop { background-size: 2000px auto; background-image: url(bgtop-pc.png?t=1788495176879); }
}
/* ====(((( 模板結束：背景 (comp_basic_20260617001__area-bgtop) ))))===== */

.Area_hero--PD {position: absolute; z-index: -1;}


.noclick{pointer-events: none;}
.Area_hero--tag {z-index: 77;}



@media screen and (max-width: 767px) {
  .first .Area_title_lbtclass h3 {
    top: 0;
  
    }
  }




/*區塊背景*/
@media screen and (min-width:768px) {
  .pc_bottom{position:absolute;z-index:-2;bottom:0px;left:0;width:100%;min-width:1220px;height:620px;background-image:url(pc_bottom.png?t=1788495176879);background-repeat:no-repeat;pointer-events: none;}
  }

  @media screen and (max-width:767px) {
    .m_bottom{z-index:-1;position:absolute;bottom:0;left: 0;width: 100%;height:63vw;background-image:url(m_bottom.jpg?t=1788495176879);background-repeat:no-repeat;background-position: center top;pointer-events:none;background-size: 100%;}
    .brand {padding-top: 10%;}
    }


.Area_boxstyle .Area_boxstyle_box {
  position: relative;
  background-repeat: no-repeat;
  background-position: center bottom;
  z-index: 1
}

.Area_boxstyle .Area_boxstyle_box:before {
  content: "";
  display: block;
  z-index: -1;
  position: absolute;
  left: 0;
  width: 100%
}

.Area_boxstyle .Area_boxstyle_box:after {
  content: "";
  display: block;
  z-index: -2;
  position: absolute;
  top: 20px;
  left: 0px;
  width: 100%;
  height: 100%
}

@media screen and (min-width: 768px) {
  .Area_boxstyle .Area_boxstyle_box {
    padding: 3px 0 40px;
    width: 960px
  }

  .Area_boxstyle .Area_boxstyle_box:before {
    top: -39px;
    left: 0px;
    height: 59px
  }

  .Area_boxstyle .Area_boxstyle_box:after {
    height: calc(100% - 79px)
  }

  .Area_boxstyle .Area_boxstyle_box {
    background-image: url(Area_boxstyle_bgbottom.png?t=1788495176879);
    background-size: 100%;
    padding-bottom: 46px
  }

  .Area_boxstyle .Area_boxstyle_box:before {
    background-image: url(Area_boxstyle_bgtop.png?t=1788495176879);
    background-size: 100%
  }

  .Area_boxstyle .Area_boxstyle_box:after {
    background-image: url(Area_boxstyle_bgcon.png?t=1788495176879);
    background-size: 100%
  }
}

@media screen and (max-width: 767px) {
  .Area_boxstyle .Area_boxstyle_box {
    padding: 0
  }

  .Area_boxstyle .Area_boxstyle_box:before {
    top: 0vw;
    height: 0vw
  }

  .Area_boxstyle .Area_boxstyle_box:after {
    top: 2vw;
    height: calc(100% - 8vw)
  }

  .Area_boxstyle .Area_boxstyle_box {
    padding-top: 0vw
  }

  .Area_boxstyle .Area_boxstyle_box:before {
    top: -4vw;
    height: 6vw
  }

  .Area_boxstyle .Area_boxstyle_box {
    background-image: url(Area_boxstyle_bgbottom.png?t=1788495176879);
    background-size: 100%;
    padding-bottom: 5vw
  }

  .Area_boxstyle .Area_boxstyle_box:before {
    background-image: url(Area_boxstyle_bgtop.png?t=1788495176879);
    background-size: 100%
  }

  .Area_boxstyle .Area_boxstyle_box:after {
    background-image: url(Area_boxstyle_bgcon.png?t=1788495176879);
    background-size: 100%
  }
}

/*黏人精*/
.Area_hammerAD { z-index: 9999; position: fixed; bottom: 0; right: 0;}
.Area_hammerAD .box { position: relative; margin-right: 10px; opacity: 1;}
.Area_hammerAD img { width: 100%; height: auto; position: absolute; top: 0; left: 0;}
.Area_hammerAD .closeButton a { display: block; cursor: pointer; position: absolute; width: 20px; height: 20px; border-radius: 50%; font: bold 20px/1em "Century Gothic"; color: #FFF; text-align: center; background-color: rgba(0%,0%,0%,0.5); text-decoration: none; z-index: 2;}
.Area_hammerAD .Ahammer_text { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 90%; color: #000; font-family: "Century Gothic","Noto Sans CJK TC"; font-weight: 700;}
.Area_hammerAD .Ahammer_black .img_0, .Area_hammerAD .img_1 { filter: brightness(0%);}
.Area_hammerAD .Ahammer_black .img_1 { filter: none;}
.Area_hammerAD .Ahammer_black .Ahammer_text { color: #fff;}
@media screen and (min-width:768px){
  .Area_hammerAD { position: fixed; z-index: 300; left: 50%; right: auto; bottom: 50px; display: block; width: 210px; height: 200px; transform: translateX(618px) translate3d(0,200px,0);}
  .Area_hammerAD .closeButton a { top: 0; right: 0;}
  .Area_hammerAD .Ahammer_text { font-size: 2.3em; line-height: 1em; height: 1em; top: 40px;}
}
@media screen and (max-width:767px){
  .Area_hammerAD { display: block; width: 26%; transform: translate3d(0px, -215px, 0px) !important;}
  .Area_hammerAD .closeButton a { top: 1vw; right: 1vw;}
  .Area_hammerAD .Ahammer_text { font-size: 1.5em; line-height: 1.5em; height: 1.5em; top: 3.6vw;}
}