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


/*PC背景*/
	@media screen and (min-width:768px){
    .Area_bgtop { pointer-events: none;}
    .Area_bgtop span { background-repeat: no-repeat;}
		.Area_bgtop_fixed { position: fixed;}
    .Area_bgtop .bgtop_ { position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
    .Area_bgtop .bgtop_ span { position: absolute; display: block; width: 100%; height: 100%; background-position: center top;}
		.Area_bgtop_1 .bgtop_ { z-index: 0; height: 1185px; overflow: hidden;}
		.Area_bgtop_1 .bgtop_1_2 { z-index: 2;}
		.Area_bgtop_1 .bgtop_1_1 span { background-image: url("bgtop_1_3.jpg?t=1758165172773");}

    .Area_bgtop_2 .bgtop_2_1 { position: fixed; opacity: 0;}
    .Area_bgtop_2 .bgtop_2_1 span { background-image: url("bg_bottom.png?t=1758165172773"); top: calc(100vh - 410px);  background-position: center top; background-repeat: no-repeat;}
  }

/*Phone背景*/
  @media screen and (max-width:767px){
    .m_Area_bgtop { pointer-events: none;}
    .m_Area_bgtop span { background-repeat: no-repeat;}
	  .m_Area_bgtop_fixed { position: fixed; top: 32px;} /*搭配js-appBgFixed*/
    .m_Area_bgtop .m_bgtop_ { z-index: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-bottom: 100%;}
    .m_Area_bgtop .m_bgtop_ span { position: absolute; display: block; width: 100%; height: 100%; padding-bottom: 100%; overflow: hidden; background-position: center top; background-size: 100%;}
    .m_Area_bgtop_1 .m_bgtop_1_1 { position: fixed;}
    /*.m_Area_bgtop_1 .m_bgtop_1_0 span { position: fixed; top: 0; left: 0; width: 100%; height:100%; background: url(m_bg_body.jpg?t=1758165172773) center center repeat-y; background-size: 100%;}*/
    .m_Area_bgtop_1 .m_bgtop_1_1 span { position: absolute; top: 0; left: 0; width: 100%; height:100%; background: url("m_bg.jpg?t=1758165172773") center top no-repeat; background-size: 100%;}
      /*下方裝飾背景*/
      .fixedBG_m { pointer-events: none; position: fixed; z-index: 30; bottom: 0; width: 100%; height: 22vw; background-image: url("m_bg_bottom.png?t=1758165172773"); background-size: 100%; background-position: center top; /*opacity: 0;*/
        padding-bottom: 0px;
        padding-bottom: calc(0px + constant(safe-area-inset-bottom)*0.6);
        padding-bottom: calc(0px + env(safe-area-inset-bottom)*0.6);
      }
      .bottmBG { pointer-events: none;
        margin-bottom: -8vw;
        margin-bottom: calc(-8vw + constant(safe-area-inset-bottom)*0.6);
        margin-bottom: calc(-8vw + env(safe-area-inset-bottom)*0.6);
      }
  }

/*區塊背景-共用設定*/
.Area_bg { pointer-events: none; z-index: 0;}
.Area_bg div { pointer-events: none; z-index: 1; position: absolute; left: 0; width: 100%; background-position: center top; background-repeat: no-repeat;}
    @media screen and (max-width: 767px) {
      .Area_bg div { pointer-events: none; z-index: -1; position: absolute; left: 0; width: 100%; background-position: center top; background-repeat: no-repeat;}
      .Area_bg div { z-index: 1; top: 0vw; padding-bottom: 200%; background-size: 100%;}
    }
    /*圖片*/
    @media screen and (min-width: 768px) {
      .Area_addbuy02_bg div { z-index: 0; top: -30px; height: 508px; background-repeat: repeat;}
    }
    @media screen and (max-width: 767px) {
      .Area_addbuy02_bg div { top: -4vw; height: 0; padding-bottom: 77%; background-size: 100%; background-repeat: repeat-y;}
    }



/*版頭*/
.Area_top .ponit_box { position: relative; margin: 0 auto;}
.Area_top .ponit_box .bn_nologin:hover { filter: brightness(120%);}
.Area_top .ponit_box .bn_login .pointBG { z-index: 1; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%;}
.Area_top .ponit_box .bn_login .txt_point { z-index: 2; position: absolute; top: 2.2vw; left: 42%; width: 47%; text-align: right; color: #fff577; font-size: 4.9vw; font-weight: 700;}
.Area_top .ponit_box .bn_login .txt_point span { position: relative; top: .075em; font-size: 1.6em; font-weight: 700; font-family: "Arial", "微軟正黑體", "Microsoft JhengHei"; letter-spacing: .03em;}
	@media screen and (min-width:768px){
    .Area_top { height: 625px; margin-bottom: 40px;}
    .Area_top .pc9 { transform: scale(.9);}
    .Area_top img { width: 100%; height: auto;}    
    .Area_top .title img { transform: translate(28px, -28px);}
    .Area_top .ponit_box  { margin-top: -43px;}
    /* .Area_top .ponit_box .bn_login .pointBG { margin-top: -43px;} */
    .Area_top .ponit_box .bn_login .txt_point { top: 18px; font-size: 48px;}
    /*裝飾物*/
    .Area_top .pic_Q { z-index: 4; position: absolute; top: 47px; right: -15px;  pointer-events: none;}
    .Area_top .pic_IP { z-index: 5; position: absolute; top: -41px; left: -85px; pointer-events: none;}
    /*詳情*/
    .Area_top .btn_more { z-index: 10; position: absolute; width: 95px; top: 316px; right: 3px;}
  }
	@media screen and (max-width:767px){
    .Area_top { height: 70.4vw; margin-bottom: 2.8vw;}    
    /*裝飾物*/
    .Area_top .pic_Q { z-index: 4; position: absolute; top: 5.7vw; right: 0; width: 20%; /*animation: bounceIn 1s; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; animation-fill-mode: both;*/ pointer-events: none;}
    .Area_top .pic_IP { z-index: 5; position: absolute; top: -2.8vw; left: -9.9%; width: 65%; pointer-events: none;}
    /*詳情*/
    .Area_top .btn_more { z-index: 10; position: absolute; width: 14vw; top: 3.5vw; right: 34.2%;}
  }




/*錨點BN*/
@media screen and (min-width:768px){
  .Area_nav { margin-bottom: 60px;}
  .Area_nav .PD_layout ul { padding-left: 44px; padding-right: 48px; grid-gap: 0 25px;}
}
@media screen and (max-width:767px){
  .Area_nav { margin-bottom: 4.8vw;}
  .Area_nav .PD_layout ul { padding-left: .7em; padding-right: .7em; grid-gap: 0 2.2vw;}
}



/*去除PD_layout樣式*/
.PD_noBG ul { background-color: transparent; width: 100%; padding: 0;}
.PD_noBG ul li { border: none; background-color: #fff;}
.Area_swiper_box .PD_noBG li { background-color: transparent;}
.PD_layout .PD_noBG ul { padding: 0;}



/*區標*/
.box_title { position: relative; margin: 0 auto;}
  @media screen and (min-width:768px){
    .box_title { margin-bottom: 15px;}
    .box_title img { width: 100%; height: auto;}
  }
  @media screen and (max-width:767px){
    .box_title { margin-bottom: 3vw;} 
  }



/*集資*/
.Area_donate .box_title { margin-bottom: 0;}
.Area_donate .box { position: relative;}
.Area_donate .box_bg2 { z-index: 2; position: relative; pointer-events: none;}
  /*集氣圖*/
  .Area_donate .pd { position: relative; margin: 0; padding: 0;}
  .Area_donate .pd .gift { position: absolute; top: 0; left: 70%; transform: translateX(-50%); width: 100%;}
  /*集氣條*/
  .Area_donate .bar_box { z-index: 3; position: absolute; bottom: -2.5vw; left: 50%; transform: translateX(-50%); width: 100%; height: 20vw;}
  .Area_donate .bar_box::after { z-index: 2; content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; padding-bottom: 20%; background: url("bar_0.png?t=1758165172773") no-repeat top / 100%;}
  .Area_donate .bar_box.bar1::after { background-image: url("bar_1.png?t=1758165172773");}
  .Area_donate .bar_box.bar2::after { background-image: url("bar_2.png?t=1758165172773");}
  .Area_donate .bar_box.bar3::after { background-image: url("bar_3.png?t=1758165172773");}
  .Area_donate .bar_box.bar4::after { background-image: url("bar_4.png?t=1758165172773");}
  /*bar動態*/
  .Area_donate .bar_box .bar { z-index: 1; position: absolute; top: 31%; left: 4%; width: 0; height: 2vw; background: #89d5f8; border-radius: 10px; animation: shinebar 1s infinite; transform-origin: left center;}
  .Area_donate .bar_box.bar0 .bar { width: 4%;}
  .Area_donate .bar_box.bar1 .bar { width: 27%;}
  .Area_donate .bar_box.bar2 .bar { width: 49%;}
  .Area_donate .bar_box.bar3 .bar { width: 71%;}
  .Area_donate .bar_box.bar4 .bar { width: 90%; animation: none;}
    @keyframes shinebar{
      0% { /*filter: brightness(100%);*/ transform: scale(100%);}
      50% { /*filter: brightness(150%);*/ transform: scale(102%);}
      100% { /*filter: brightness(100%);*/ transform: scale(100%);}
    }    
    /*裝飾物件動態*/
    .Area_donate .bar_box::before { content: ""; position: absolute; top: -3.8vw; left: 3%; width: 10%; height: 9vw; background: url("bar_arrow.png?t=1758165172773") no-repeat top / 100%; animation: slideInLeft2 2s ease infinite;}
    .Area_donate .bar_box.bar1::before { left: 23%;}
    .Area_donate .bar_box.bar2::before { left: 45%;}
    .Area_donate .bar_box.bar3::before { left: 67%;}
    .Area_donate .bar_box.bar4::before { left: 88%;}
      /*斜向來回滑動*/
      .slideInLeft2 { -webkit-animation: slideInLeft2 2s ease infinite ; animation: slideInLeft2 2s ease infinite ;}
      @keyframes slideInLeft2 {
        0%  {opacity:1;-webkit-transform:translate(0px, 0px) rotate(0deg); transform:translate(0px, 0px) rotate(0deg);}
        50%  {opacity:1;-webkit-transform:translate(9px, -5px) rotate(-15deg); transform:translate(9px, -5px) rotate(-15deg);}
        100%  {opacity:1;-webkit-transform:translate(0px, 0px) rotate(0deg);transform:translate(0px, 0px) rotate(0deg);}
      }

    @media screen and (min-width:768px){
      .Area_donate .bar_box { bottom: 0; height: 170px;}
      .Area_donate .bar_box::after { padding-bottom: 170px;}
      .Area_donate .bar_box .bar { top: 60px; height: 20px;}
      /*裝飾物件動態*/
      .Area_donate .bar_box::before { top: -34px; left: 3%; width: 96px; height: 75px;}
    }

    /*捐贈點數*/
    .Area_donate .donate_point { z-index: 5; position: absolute; top: 23vw; left: 3.5%; width: 47%; /*background-color: rgba(0, 0, 0, .5);*/ -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center;}
    .Area_donate .donate_point .inputBox { display: flex; justify-content: center; align-items: flex-end; text-align: center; font-size: 7vw;}
    .Area_donate .donate_point .inputBox .inputbar { margin: 0; padding: 0; border: none; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent;} /*input預設設定歸零*/
    .Area_donate .donate_point .inputBox .inputbar { position: relative; padding-right: .3em; width: 60%; height: 1em; color: #96bd71; caret-color: #225640; font-size: 1.65em; font-weight: 700; font-family: "Arial", "微軟正黑體", "Microsoft JhengHei"; text-align: right;}
    .Area_donate .donate_point .inputBox small { position: relative; top: -.075em; color: #96bd71; font-weight: 600;}
    .Area_donate .donate_point .inputBox .inputbar::placeholder { color: #96bd7170;}
    .Area_donate .donate_point .btn { display: inline-block; margin-top: 3vw; width: fit-content;}
    .Area_donate .donate_point .btn a { padding: .15em .8em; text-decoration: none; color: #fff; font-size: 3.5vw; font-weight: 400; border-radius: 20em;}
    /* .Area_donate .donate_point .btn_yes { margin-left: 6%;} */
    .Area_donate .donate_point .btn_no { margin-left: 1%;}
    .Area_donate .donate_point .btn_yes a { background-color: #386c52;}
    .Area_donate .donate_point .btn_no a { background-color: #a4a4a4;}
      /* 隱藏input輸入框的上下箭頭*/
      /* Chrome, Safari, Edge, Opera */
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      /* Firefox */
      input[type=number] {
        -moz-appearance: textfield;
      }

    .Area_donate .txt_target { position: absolute; top: 48.6vw; left: 7%; color: #225640; font-size: 4vw; letter-spacing: .02em;}
    .Area_donate .txt_target span { font-size: 1.2em; font-weight: 700; font-family: "Arial", "微軟正黑體", "Microsoft JhengHei";}
    .Area_donate .txt_target .motionLine { position: absolute; top: 4vw; right: -23vw; width: 22vw; height: 1px; background-color: #225640;}
    .Area_donate .txt_target .motionLine:after { content: ""; position: absolute; top: 0; left: 0; height: 100%; background-color: #96bd71; animation: motionLine 4s linear infinite;}
      /*motionLine*/
      @keyframes motionLine {
        0%   { width: 0;}
        25%  { width: 0;}
        85%  { width: 100%;}
        100% { width: 100%;}
      }
      
      @media screen and (min-width:768px) {
        .Area_donate { margin-bottom: 120px;}
        /* .edm_notice { padding-bottom: 120px;} */
        .Area_donate .box { transform: scale(.95); transform-origin: center top;}
        .Area_donate .txt_target { top: 470px; left: 80px; font-size: 39px;}
        .Area_donate .donate_point { top: 213px;}
        .Area_donate .donate_point .inputBox { padding-top: 30px; font-size: 60px;}
        .Area_donate .donate_point .btn { margin-top: 38px;}
        .Area_donate .donate_point .btn a { font-size: 33px;}
        /* .Area_donate .donate_point .btn_yes { margin-left: 7%;} */
        .Area_donate .donate_point .btn_no { margin-left: 2.5%;}
        .Area_donate .txt_target .motionLine { top: 35px; right: -218px; width: 208px; height: 2px;}
        /*集資詳情*/
        .Area_donate .btn_more { z-index: 10; position: absolute; width: 95px; top: 195px; left: 485px;}

      }
      @media screen and (max-width:767px) {
        .Area_donate { background: url(m_Area_donate_bg2.png?t=1758165172773) center bottom no-repeat; background-size: 100%;}
        .Area_donate .donate_point .inputBox { height: 14.2vw;}
        .Area_donate .donate_point .inputBox .inputbar { height: 14.2vw;}
        /*集資詳情*/
        .Area_donate .btn_more { z-index: 10; position: absolute; width: 14vw; top: 19.8vw; left: 51%;}
      }


/*詳情浮層調整*/
.agree_more li { text-align: justify;}
.agree_more2 li, .agree_more3 li { list-style: none;}