@charset "utf-8";

/* 版頭區 */
.Area_title_top { height: 1030px ; overflow: visible !important ; }
.Area_hero--title { width: 100% !important ; top: 30px !important ; left: 0 !important ; }
.Area_hero--PD { top: 0px !important ; z-index: 0 !important ; width: 100% !important ; left: 0px ; }
.Area_hero--logo { width: 65% ; top: 344px ; left: 180px ; }
.Area_hero--subtitle { width: 55% !important ; top: 305px !important ; left: 215px !important ; }
.Area_hero--tag { width: 18% !important ; top: 470px !important ; left: 700px !important ; }
.deco01 { position: absolute ; width: 100% ; top: 450px ; right: 380px ; }
.deco02 { position: absolute ; width: 100% ; top: 140px ; left: 387px ; }
.layout_toppd2 { position: absolute !important ; width: 18% ; top: 550px ; left: 80px ; z-index: 5 ;  }
.layout_toppd3 { position: absolute !important ; width: 21% ; top: 624px ; left: 676px ; z-index: 5 ;  }
@media screen and (max-width: 767px){
.Area_title_top { height: 113vw ; margin-bottom: 0 ; }
.Area_hero--title { width: 100% !important ; top: 4vw !important ; left: 0vw !important ; }
.Area_hero--PD { width: 100% ; top: 5vw !important ; left: 0 !important ; }
.Area_hero--logo { width: 70% ; top: 39vw ; left: 17vw ; }
.Area_hero--subtitle { width: 60% !important ; top: 32vw !important ; left: 21vw !important ; }
.Area_hero--tag { width: 18% !important ; top: 50vw !important ; left: 72vw !important ; }
.deco01 { position: absolute ; width: 9% ; top: 44vw ; right: 86vw ; }
.deco02 { position: absolute ; width: 7% ; top: 14vw ; left: 87vw ; }
.layout_toppd2 { position: absolute !important ; width: 22% ; top: 63vw ; left: 5vw ; z-index: 5 ;  }
.layout_toppd3 { position: absolute !important ; width: 25% ; top: 70vw ; left: 69vw ; z-index: 5 ;  }
}


/* 作圖區 */
.layout_item ul { width: 80% !important ; }
.layout_item ul li .PD_into { text-align: left ; margin-left: 30px ; }
.layout_item ul li h3 { color: #208adf !important ; font-size: 30px !important ; max-height: 1.5em !important ; }
.layout_item ul li h4 { font-size: 27px !important ; margin-bottom: 0 !important ; margin-top: 10px !important ; }
.layout_item ul .PD_img { width: 87% ; margin: 27px auto 0 ; }
.layout_item ul li p { line-height: 3em !important ; }
.layout_item ul li::after { padding-bottom: 165% !important ; }
@media screen and (max-width:767px){
  .layout_item ul { width: 100% !important ; }
  .layout_item ul li .PD_into { text-align: left ; margin-left: 3vw ; }
  .layout_item ul li h3 { font-size: 4.5vw !important ; max-height: 1.5em !important ; line-height: 1.9em !important ; }
  .layout_item ul li h4 { font-size: 4vw !important ; margin-top: 1vw !important ; }
  .layout_item ul li p { line-height: 1.5em !important ; }
  .layout_item ul li::after { padding-bottom: 170% !important ; }
  .layout_item ul .PD_img { width: 88% ; margin: 4vw auto 0 ; }
}


/* 微調 */
.layout_guan { width: 80% !important ; }
.PD_layout.PD_layout-D3_01 .PD img { width: 100% ; }
.PD_layout.PD_layout-D3_02 ul li .PD h3 { color: #000 ; }
.top_bg { z-index: 1 !important ; }
.coupon_btn li { pointer-events: none ; }
.warningTxt h3 { color: #000 ; padding: 1% 0 2% ; }
.layout_paper_text { margin-bottom: -5px ; }
.layout_paper { padding-top: 20px ; }
.layout_banner { margin-top: 80px ; margin-bottom: 60px ; padding-left: 50px ; }
.layout_banner ul li .PD img { border: solid #e2eeff 5px !important ; }
.layout_sale { background-image: url(paper_bg_top_new.png?t=1786610832642) ; background-size: 100% ; background-repeat: no-repeat ; }
.layout_sale ul { margin: 10px ; }
.layout_sale .PD_layout-D3_02 ul { padding: 0 !important ; margin-top: 40px ; }
@media screen and (max-width:767px){
  .warningTxt h3 { color: #000 ; padding: 2% 0 3% ; }
  .layout_paper_text { margin-bottom: 0 ; }
  .layout_paper { padding-top: 3vw ; }
  .layout_banner { margin-top: 14vw ; margin-bottom: 6vw ; padding-left: 3vw ; }
  .layout_sale ul { margin: 2vw ; }
  .layout_sale .PD_layout-D3_02 ul { padding: 0 !important ; margin-top: 9vw ; }
  .layout_guan { width: 100% !important ; }
}


/*飄-上下*/
.uptodown-play { -webkit-animation:uptodown-play 2s ease-in-out infinite alternate;
  animation:uptodown-play 2s ease-in-out infinite alternate;}
@-webkit-keyframes uptodown-play { 
0%   { transform: translateY(0); }
50%  { transform: translateY(10px); }
100% { transform: translateY(0); }
}
@keyframes uptodown-play { 
0%   { transform: translateY(0); }
50%  { transform: translateY(10px); }
100% { transform: translateY(0); }
}

/*飄-下上*/
.downtoup-play { -webkit-animation:downtoup-play 2s ease-in-out infinite alternate;
  animation:downtoup-play 2s ease-in-out infinite alternate;}
@-webkit-keyframes downtoup-play { 
0%   { transform: translateY(0); }
50%  { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
@keyframes downtoup-play { 
0%   { transform: translateY(0); }
50%  { transform: translateY(-10px); }
100% { transform: translateY(0); }
}