@charset "utf-8";


/* 版頭區 */
.deco01 { position: absolute ; top: 290px ; right: 650px ; }
.deco02 { position: absolute ; width: 100% ; top: 280px ; left: 297px ; }
@media screen and (max-width: 767px){
.deco01 { position: absolute ; width: 17% ; top: 30vw ; right: 66vw ; }
.deco02 { position: absolute ; width: 17% ; top: 30vw ; left: 70vw ; }
}


/* 微調 */
.layout_design2 { width: 96% ; }
@media screen and (max-width:767px){
  .Area_design { width: 98% ; }
  .Area_design2 { width: 94% ; }
  .layout_design2 { width: 100% ; }
  .layout_design2 ul { grid-gap: 0 !important ; padding: 0 !important ; }
}

/* 活動區 */
.layout_active ul li .PD_into { margin-top: 36px ; }
.layout_active ul li { padding: 0px 120px 0px 40px ; margin-bottom: -20px ; }
.layout_active ul li h3 {  color: #fff !important; font-size: 37px !important ; max-height: 1.5em !important ; }
.layout_active ul li h4 {  color: #fff !important; font-weight: 800 !important ; font-size: 35px !important ; }
.layout_active ul li .PD_img { margin-top: 25px !important ; padding: 0 !important ; }
.layout_active ul li .PD_img img { width: 95% !important ; }
@media screen and (max-width:767px){
  .layout_active ul li { padding: 0 12vw 0 4vw ; margin-bottom: -5vw; }
  .layout_active ul li .PD_into { width: 100% !important ; margin-left: 0 !important ; padding: 0 !important ; margin-top: 4vw ; }
  .layout_active ul li h3 { font-size: 4vw !important ;     }
  .layout_active ul li h4 { font-weight: 800 !important ; font-size: 3.5vw !important ; }
  .layout_active ul li .PD_img { margin-top: 2.5vw !important ; }
  .layout_active ul li .PD_img img { width: 95% !important ; }
}


/*複製領券*/
.PD_copy { margin-bottom: 2.5vw;width: 90%;}
.PD_copy ul { padding: 0 .5em;}
.PD_copy ul li { background-color: #fff; /*border: solid 2px #9483ff !important;*/ border-radius: 10px; overflow: hidden;}
.PD_copy .PD_into { padding: 0; padding-bottom: .75em; text-align: center;}
.PD_copy .PD h3 { color: #fff; font-size: 2.2em; font-weight: 700; background-color: #7385d5; font-family: Noto Sans TC, "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica;}
.PD_copy .PD h4 { color: #000; font-size: 2em; font-weight: 600; line-height: 1.35; margin: .35em 0 .1em;}
.PD_copy .PD h4 hover { color: #000; }

.PD_copy .PD .gobtn { margin-left: 54%;width: 27.5%; border-radius: 99em; background-color: #000000;/*按鈕顏色*/}
/*改成flex排列*/
.PD_copy .Area_copy { display: flex; justify-content: space-evenly; align-items: center; position: absolute; bottom: .75em; left: 8.2%; width: 50%; line-height: 2.35; background-color: #919191; border-radius: 20em;}
.PD_copy .Area_copy .copyTxt { /*position: absolute; top: 10%; left: 2.5%; width: 7.7em; height: 80%;*/ flex-basis: 70%; font-size: 1.05em; line-height: 1.8; background-color: #fff; border-radius: 20em; font-weight: 700; overflow: hidden;}
.PD_copy .Area_copy .btn_copy { padding-right: .5em; /*text-align: right;*/}
.PD_copy .Area_copy .btn_copy button { padding: 0; background: none; border: none; color: #fff; font-size: 1.05em; font-weight: 600; font-family: Noto Sans TC, "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica;}
/*h3前綴logo*/
.PD_copy .PD h3 span { position: relative; overflow: visible; margin-left: 5vw;}
.PD_copy .PD h3 span::before { content: ""; pointer-events: none; position: absolute; top: 50%; left:-2.8em; transform: translateY(-50%); width:80px; height: 6.5vw; background-image:url(logo_after.png?t=1791871105357); background-position: center center; background-size: 100%; background-repeat: no-repeat;}
/*改成flex排列*/
.PD_copy .Area_copy { display: flex; justify-content: space-evenly; align-items: center; position: absolute; bottom:1em; left: 14.2%; width: 38%; line-height:4.35; background-color: #919191; border-radius: 20em;}
.PD_copy .Area_copy .copyTxt { /*position: absolute; top: 10%; left: 2.5%; width: 7.7em; height: 80%;*/ flex-basis: 70%; font-size: 1.5em; line-height:2.2; background-color: #fff; border-radius: 20em; font-weight: 700; overflow: hidden;}
.PD_copy .Area_copy .btn_copy { padding-right: .5em; /*text-align: right;*/}
.PD_copy .Area_copy .btn_copy button { padding: 0; background: none; border: none; color: #fff; font-size: 1.05em; font-weight: 600; font-family: Noto Sans TC, "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica;}

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

    /*複製領券*/
    .PD_copy { margin-bottom: 2.5vw; width:94%;}
    .PD_copy ul { padding: 0 .5em;}
    .PD_copy ul li { background-color: #fff; /*border: solid 2px #9483ff !important; */border-radius: 10px; overflow: hidden;}
    .PD_copy .PD_into { padding: 0; padding-bottom: .75em; text-align: center;}
    .PD_copy .PD h3 { color: #fff; font-size: 1.2em; font-weight: 700; background-color: #7385d5; font-family: Noto Sans TC, "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica;}
    .PD_copy .PD h4 { color: #000; font-size: 1.1em; font-weight: 600; line-height: 1.35; margin: .35em 0 .1em;}
    .PD_copy .PD .gobtn { margin-left: 61%; width: 30.5%;}
    /*改成flex排列*/
    .PD_copy .Area_copy { display: flex; justify-content: space-evenly; align-items: center; position: absolute; bottom: .75em; left: 8.2%; width: 50%; line-height: 2.35; background-color: #919191; border-radius: 20em;}
    .PD_copy .Area_copy .copyTxt { /*position: absolute; top: 10%; left: 2.5%; width: 7.7em; height: 80%;*/ flex-basis: 70%; font-size: 1.05em; line-height: 1.8; background-color: #fff; border-radius: 20em; font-weight: 700; overflow: hidden;}
    .PD_copy .Area_copy .btn_copy { padding-right: .5em; /*text-align: right;*/}
    .PD_copy .Area_copy .btn_copy button { padding: 0; background: none; border: none; color: #fff; font-size: 1.05em; font-weight: 600; font-family: Noto Sans TC, "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica;}
    /*h3前綴logo*/
    .PD_copy .PD h3 span { position: relative; overflow: visible; margin-left:14vw;}
    .PD_copy .PD h3 span::before { content: ""; pointer-events: none; position: absolute; top:50%; left:-12.8vw; transform: translateY(-50%); width:11vw; height: 6.5vw; background-image:url(logo_after.png?t=1791871105357); background-position: center center; background-size: 100%; background-repeat: no-repeat;}
    /*改成flex排列*/
    .PD_copy .Area_copy { display: flex; justify-content: space-evenly; align-items: center; position: absolute; bottom: .75em; left: 8.2%; width: 50%; line-height: 2.35; background-color: #919191; border-radius: 20em;}
    .PD_copy .Area_copy .copyTxt { /*position: absolute; top: 10%; left: 2.5%; width: 7.7em; height: 80%;*/ flex-basis: 70%; font-size: 1.05em; line-height: 1.8; background-color: #fff; border-radius: 20em; font-weight: 700; overflow: hidden;}
    .PD_copy .Area_copy .btn_copy { padding-right: .5em; /*text-align: right;*/}
    .PD_copy .Area_copy .btn_copy button { padding: 0; background: none; border: none; color: #fff; font-size: 1.05em; font-weight: 600; font-family: Noto Sans TC, "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica;}
  
    .PD_copy .PD h4 hover { color: #000; }

}                    
                    



/* 旗子 */
.flag-left {
  animation: swingLeft 2s ease-in-out infinite;
  transform-origin: bottom center;
}

.flag-right {
  animation: swingRight 2s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes swingLeft {
  0%,100% {
      transform: rotate(-10deg);
  }
  50% {
      transform: rotate(-2deg);
  }
}

@keyframes swingRight {
  0%,100% {
      transform: rotate(10deg);
  }
  50% {
      transform: rotate(2deg);
  }
}