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

/*基本*/
body { margin: 0; padding: 0; width:100%; }
.for_phone { display:none!important;}
 @media screen and (max-width:767px){
        .for_pc{ display:none !important;}
        .for_phone{ display:block !important;}
				 body { margin: 0; padding: 0; background-image:none }
				 .for_m_magintop { margin-top:3vw;}
 }

/*全BOX版面*/
.WRAPPER { position:relative; display:inline-block;  margin:0; padding:0;  width:100%;  overflow:hidden;min-width:1220px; }
.WRAPPER img { border:0; vertical-align:top; width: 100%; height: auto; }
.WRAPPER .mainArea {  margin:0 auto; width:1220px; font-family:"Century Gothic", "微軟正黑體", sans-serif; position:relative; }
.WRAPPER .mainArea a{ padding:0; margin:0; text-decoration:none; font-family:"微軟正黑體"; }
.WRAPPER  a { display: block; text-decoration:none;font-family:"微軟正黑體"; } 
/*控制區塊背景的位置*/
.Areabg{  } 
@media screen and ( max-width:736px) {
	.WRAPPER { min-width: inherit; }
	.WRAPPER img { width:100%; height:auto; }
}


/*區塊_all*/
.Area1220 {position: relative;margin:0 auto;width:1220px;}
.Area960 {margin:0 auto;width:960px;}
.Area {position: relative;margin:0 auto;padding:0;border-radius:0;text-align:center; }
.Areaa {position:relative;display:block;} 
.Area .go_bt {-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-ms-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;}
.Area .go_bt:hover {
  -webkit-transform:scale(0.95);-moz-transform:scale(0.95);-ms-transform:scale(0.95);-o-transform:scale(0.95);transform:scale(0.95);}
 @media screen and (max-width:767px){
  .Area1220 { width:100%;}
  .Area960 {width:100%;}
  .Area .go_bt:hover {  
   -webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none;}
 }

/*LOGO*/
.momologo { z-index:2; position: absolute; top: 15px; left:15px;}
.momologo a { display:block; width:140px; height:21px;}
.momologo a svg { width:140px; height:21px; }
.momologo a path { fill:#EA27C2; }
.momologo-pink  a path { fill:#EA27C2; }/*LOGO 桃紅色*/
.momologo-white a path { fill:#ffffff; }/*LOGO 白色*/
	@media screen and (max-width:767px){
		.momologo { display:none;}
	}

/* 置底注意事項 */
.edm_notice {
  --color: #fff;/*文字顏色*/

  display: flex;
  grid-gap: 10px;
  flex-direction: column;
  width: 50%; 
  margin: 0 auto;
  font: 15px/18px Helvetica;
  text-align: center;
  padding: 10px 10px 15px 10px;
  color: var(--color);
}
.edm_notice .apple_notice { padding: 10px 0 10px 0;}
@media screen and (max-width: 767px) {
  .edm_notice { grid-gap: 0; padding: 10px 10px 200px 10px; width: 96%; font-size: 0.85em; }
}

/*輪播公版設定*/
.Area_swiper ul { display: flex; }

/*移除公版設定*/
.remove_box_style ul {background-color: transparent; grid-gap: 0; padding: 0; }
.remove_box_style ul li { border: none!important;background-color: transparent; list-style: none; }
@media screen and (max-width:767px){
  .remove_box_style ul {width: 100%; }
  .remove_box_style ul { padding: 0; }
}

/*輪播移除公版設定*/
.Area_swiper_box .PD_layout.remove_box_style ul { background-color: transparent; grid-gap: 0;}
.Area_swiper_box .PD_layout.remove_box_style ul li { border: none!important; background-color:transparent;}
.Area_swiper_box .PD_layout.remove_box_style ul li,
.Area_swiper_box .PD_layout.remove_box_style ul li .PD_img img { border-radius: 10px;}
@media screen and (max-width:767px){
  .Area_swiper_box .PD_layout.remove_box_style ul { width: 100%; grid-gap: 0.2em;}
  .Area_swiper_box .PD_layout.remove_box_style ul {}
}

/*分享浮層*/
.floatBox { position:relative; margin:2% auto; padding: 2% 0; width: 700px; height:auto; background-color:rgba(0,0,0,0.8); text-align:center; position:relative; border-radius:20px;}
.floatBox img { width:100%; height:auto;}
.floatBox .go_bt {
  -webkit-transition: all 0.2s ease;
     -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
       -o-transition: all 0.2s ease;
          transition: all 0.2s ease;}
.floatBox .go_bt:hover { filter: brightness(120%);
  -webkit-transform:translateY(-6px);
     -moz-transform:translateY(-6px);
      -ms-transform:translateY(-6px);
       -o-transform:translateY(-6px);
          transform:translateY(-6px);}
.floatBox .closeButton a { display:block; cursor:pointer; position:absolute; top:-20px; right:-20px; width:40px; height:40px; border-radius:50%; border:solid 2px #999999; font:bold 40px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5);text-decoration: none; z-index:2}
.floatBox .closeButton:hover {background-color:#666; text-decoration:none;}
.floatBox .title  { display:inline-block; margin:0 0 10px 0; border-bottom:1px solid #ffd800; font:bold 45px/1.5em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;  color:#ffd800; text-align:center}
.floatBox .box_ { margin:0 auto; width:90%;}
.floatBox .box_:after { content: ""; display:block; clear:both;}
.floatBox .box_btn { margin:20px auto 0; width: 80%;}
.floatBox .box_btn a { display:block; margin:3% 0;}
.floatBox .box_btn img { width:100%;}
.floatBox .box_btn .btn { margin:0 auto; width:60%;}
.floatBox .box_btn2 a { float:left; margin:0 1%; width:48%;}
	@media screen and (max-width:767px){
		.floatBox { padding:5% 0; width:90%; height: auto;}
		.floatBox .closeButton a {display:block; position:absolute; top:-15px; right:-15px; width:30px; height:30px; border-radius:50%; border:solid 2px #999999; font:bold 30px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5);text-decoration: none; z-index:2}
		.floatBox .closeButton:hover {background-color:#666; text-decoration:none}
		.floatBox .title  { margin:0 5% 3vw; font-size: 6vw; line-height:2rem;}
		.floatBox .box_btn { margin:2% auto 0;}
		.floatBox .box_btn .btn { margin:0 auto; width:80%;}
	}

/*點黑區關閉*/
  .blackBox .Boxclose { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: transparent;}


/*PC黏人精-區塊錨點*/
.fixarea_tabbar {z-index:99;position:fixed;right:0;top:200px;border-radius:20px 0 0 20px;width:110px; background-color: rgba(0,0,0,.65); text-align: center;font-family:"微軟正黑體", "Microsoft JhengHei", Arial;
	-webkit-transform: rotate3d(0,0,0,0deg) translate3d(150px,0,0);
			transform: rotate3d(0,0,0,0deg) translate3d(150px,0,0);
	-webkit-transform-origin:top right;
			transform-origin:top right;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	}
.fixarea_tabbar.fixarea_off { -webkit-transform: rotate3d(0,0,0,0deg) translate3d(0,0,0); transform: rotate3d(0,0,0,0deg) translate3d(0,0,0);}
.fixarea_tabbar .fix_box { margin:20px auto 10px; margin-left:10px;}
.fixarea_tabbar ul { margin:0; padding:0; list-style:none;}
.fixarea_tabbar li { position:relative; margin:0; padding:0; font-weight:800; font-size:15px; line-height:20px; }
.fixarea_tabbar a { display:block; text-decoration:none; color:#fff; }
.fixarea_tabbar a:hover{ color:#ffffbe; }
.fixarea_tabbar .cate-hover a { color:#ffffbe; }
.fixarea_tabbar .fix_other { }
.fixarea_tabbar .fix_other li { padding:10px 0; }
.fixarea_tabbar .fix_other li:before { content: ""; display: block; position: absolute; bottom:0; left:18%; width:64%; height:1px; background-color:#fff; opacity: 0.2}
.fixarea_tabbar .fix_other li:last-child::before { display:none;}
.fixarea_tabbar .fix_other li i { display:none; z-index:-1; position: absolute; top:53%; left:-2px; width:12px; height:12px; -webkit-transform:translate(0%,-50%); transform:translate(0%,-50%); background:url('') no-repeat center center; background-size:100%;}
.fixarea_tabbar .fix_other .cate-hover i { display: block;}
.fixarea_tabbar .fix_footer { position: relative; margin-bottom:10px; margin-left: 10px; font-weight:800; font-size:24px;}
.fixarea_tabbar .fix_footer a { display:block; padding-top:11px; color: #fff;}
.fixarea_tabbar .fix_footer a::before { content: ""; position: absolute; top:6px; left:44%; display:block; width: 0; height: 0; border-width: 0 5px 8px 5px; border-style: solid; border-color:transparent transparent #FFF transparent;}
.fixarea_tabbar .fix_footer a:hover { color:#ffffbe; }    
  /*錨點icon--用SVG格式*/
  .fixarea_tabbar .fix_other li i { mask-image: url('data:image/svg+xml,%3Csvg%20id%3D%22navlight_icon%22%20data-name%3D%22navlight%20icon%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M10%2C0A7.17%2C7.17%2C0%2C0%2C0%2C2.8%2C7.2C2.8%2C12.9%2C10%2C20%2C10%2C20s7.2-7.1%2C7.2-12.8A7.17%2C7.17%2C0%2C0%2C0%2C10%2C0Zm0%2C11a3.8%2C3.8%2C0%2C1%2C1%2C3.8-3.8A3.8%2C3.8%2C0%2C0%2C1%2C10%2C11Z%22%2F%3E%3C%2Fsvg%3E'); background-color: #ffffbe }
  .fixarea_tabbar .fix_footer:hover a::before { border-color: transparent transparent #ffffbe transparent;}

/*活動紀錄*/
.fixedfooterArea { z-index: 20; position: absolute; left: 0; margin: 0; padding: 0; width: 100%; height: 62px; text-align: center; font-size: 14px; line-height: 34px; color: #000; font-family: "微軟正黑體","Microsoft JhengHei",Arial; background-color: rgba(0,0,0,0); bottom: calc(130px + env(safe-area-inset-bottom)*.6); top: 505px;}
.fixedfooterArea a { display: block; color: #454545; text-decoration: none;}
.fixedfooterArea img  {width: 100%; height: auto;}
.fixedfooterArea .footerArea { display: none !important;}
.fixedfooterArea .fixedBox_1 { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; text-align: center; animation: fixedBox_1-play 1s 1;}
.fixedfooterArea .fixedBox_1 ul { position: relative; margin: 0; padding: 0; width: 100%; list-style: none outside none; white-space: nowrap;}
.fixedfooterArea .fixedBox_1 ul li { z-index: 1; position: relative; display: inline-block; padding: 0; border-radius: 44px; height: 60px; box-shadow: 0 1px 0 #f2f2f2,0 0 10px rgba(0,0,0,.2); background-color: rgba(255,255,255,.95);}
.fixedfooterArea .fixedBox_1 ul li a { display: flex; align-items: center; padding: 10px 24px; font-size: 1.75rem; font-weight: bold;}
.fixedfooterArea .fixedBox_1 ul li a span { width: 40px; height: 40px; background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2034%2034%22%20style%3D%22enable-background%3Anew%200%200%2034%2034%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cg%3E%20%3Cg%3E%20%3Crect%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3Anone%3B%22%20width%3D%2234%22%20height%3D%2234%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23000%3B%22%20d%3D%22M29.3%2C11.9c0.4-0.6%2C0.5-1.3%2C0.3-1.9c-0.2-0.6-0.6-1.2-1.3-1.5l-3.7-2c-0.6-0.3-1.4-0.4-2.1-0.2%20c-0.7%2C0.2-1.3%2C0.6-1.6%2C1.2l-0.5%2C0.8l-1.8%2C2.8L14%2C18.3l-0.5%2C0.8l-0.6%2C8.2h-8v1.7h19.4v-1.7h-8.6l6.2-3.8%20C24.4%2C19.6%2C26.9%2C15.7%2C29.3%2C11.9z%20M22.6%2C8.3C22.7%2C8.2%2C22.8%2C8%2C23%2C8c0.2%2C0%2C0.4%2C0%2C0.6%2C0.1l3.7%2C2c0.2%2C0.1%2C0.3%2C0.3%2C0.4%2C0.4%20c0.1%2C0.2%2C0%2C0.4-0.1%2C0.5l-0.5%2C0.8L22%2C9.2L22.6%2C8.3z%20M20.9%2C10.9l1.1%2C0.6l-4.3%2C6.8l-1.1-0.6L20.9%2C10.9z%20M17.2%2C24.2l-2.1-1.1l0.3-3.7%20c0.8%2C0.3%2C1.6%2C0.9%2C2.3%2C1.8c1.2%2C0%2C2.3%2C0.2%2C3.1%2C0.8L17.2%2C24.2z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E);top: -1px;}
	@media screen and (max-width:767px){
		.fixedfooterArea {z-index: 100;position: fixed;left: 0;margin: 0;padding: 0;width: 100%;height: 82px;text-align: center;font-size: 14px;line-height: 34px;color: #000;font-family: "微軟正黑體","Microsoft JhengHei",Arial;background-color: rgba(0,0,0,0);bottom: calc(130px + env(safe-area-inset-bottom)*.6);top:83vh;}
		.fixedfooterArea a {display: block;color: #454545;text-decoration: none}
		.fixedfooterArea img {width: 100%;height: auto}
		.fixedfooterArea .footerArea {display: none !important}
		.fixedfooterArea .fixedBox_1 {z-index: 1;position: absolute;top: 0px;left: 0;width: 100%;text-align: center;animation: fixedBox_1-play 1s 1}
		.fixedfooterArea .fixedBox_1 ul {position: relative;margin: 0;padding: 0;width: 100%;list-style: none outside none;white-space: nowrap}
		.fixedfooterArea .fixedBox_1 ul li {z-index: 1;position: relative;display: inline-block;padding: 0;border-radius: 44px;height: 34px;box-shadow: 0 1px 0 #f2f2f2,0 0 10px rgba(0,0,0,.2);background-color: rgba(255,255,255,.95)}
		.fixedfooterArea .fixedBox_1 ul li a {display: flex;align-items: center;padding: 0 24px 0 20px;font-size: 1rem;font-weight: 800;}
		.fixedfooterArea .fixedBox_1 ul li a span {width: 24px;height: 24px;background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2034%2034%22%20style%3D%22enable-background%3Anew%200%200%2034%2034%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cg%3E%20%3Cg%3E%20%3Crect%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3Anone%3B%22%20width%3D%2234%22%20height%3D%2234%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23000%3B%22%20d%3D%22M29.3%2C11.9c0.4-0.6%2C0.5-1.3%2C0.3-1.9c-0.2-0.6-0.6-1.2-1.3-1.5l-3.7-2c-0.6-0.3-1.4-0.4-2.1-0.2%20c-0.7%2C0.2-1.3%2C0.6-1.6%2C1.2l-0.5%2C0.8l-1.8%2C2.8L14%2C18.3l-0.5%2C0.8l-0.6%2C8.2h-8v1.7h19.4v-1.7h-8.6l6.2-3.8%20C24.4%2C19.6%2C26.9%2C15.7%2C29.3%2C11.9z%20M22.6%2C8.3C22.7%2C8.2%2C22.8%2C8%2C23%2C8c0.2%2C0%2C0.4%2C0%2C0.6%2C0.1l3.7%2C2c0.2%2C0.1%2C0.3%2C0.3%2C0.4%2C0.4%20c0.1%2C0.2%2C0%2C0.4-0.1%2C0.5l-0.5%2C0.8L22%2C9.2L22.6%2C8.3z%20M20.9%2C10.9l1.1%2C0.6l-4.3%2C6.8l-1.1-0.6L20.9%2C10.9z%20M17.2%2C24.2l-2.1-1.1l0.3-3.7%20c0.8%2C0.3%2C1.6%2C0.9%2C2.3%2C1.8c1.2%2C0%2C2.3%2C0.2%2C3.1%2C0.8L17.2%2C24.2z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E);top: 0px;}
	}	

/*活動紀錄動畫*/
  @-webkit-keyframes fixedBox_1-play { 
    0%  { -webkit-transform: translate(0,50px); opacity:0;} 
    100%{ -webkit-transform: translate(0,0);    opacity:1;}
  }
  @keyframes fixedBox_1-play { 
    0%  { transform: translate(0,50px); opacity:0;} 
    100%{ transform: translate(0,0);    opacity:1;}
  }  

/*回版頭*/
#gotop { display: none !important; position:fixed; z-index: 99; right:20px; bottom:30px; padding:10px 10px 3px 10px; border-radius:50px; font:12px/30px Verdana; text-align:center; color:#000; background-color:rgba(255,255,255,0.7); cursor:pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  }
#gotop:hover { padding-top:40px; background-color:#fff;} 
#gotop::before { content: ""; position:absolute; top:7px; left:18px; width: 0; height: 0; border: 4px solid #000; border-color: transparent transparent #000; }
	@media screen and (max-width:767px){
		#gotop { z-index: 105; display:block !important;right:4vw; bottom:13vw; }
    }
  

/* ========================= 
     以下整頁版面視覺設定
   ========================= */

/*文字*/
.Area_mainPD .PD_layout[data-pd-h4="1"] .PD h4, .Area_subPD .PD_layout[data-pd-h4="1"] .PD h4 { max-height: 1.45em; }

/*銀行logo*/
.Area_top .momologo a { display: block; }

/*詳情 /查詢*/
.top_btn { z-index: 10;/*display: flex; justify-content: end;*/ }
.top_btn .more_btn { position: absolute; padding: 1.5%;right: 0; }
.top_btn .more_btn ul { display: flex; justify-content: flex-end; grid-gap: 10px; }
.top_btn .PD_layout { position: absolute; top: 1%; right: 0; }
.top_btn .PD_layout ul { padding: 0; grid-gap: 0; }
@media screen and (max-width:767px){
  .top_btn {  }
  .top_btn .more_btn { padding: 0; right: -2vw;}
  .top_btn .more_btn li { width: 80%; padding: 0; }
  .top_btn .PD_layout { top: 0; right: -2vw; width: 18%;}
}

/*版頭背景*/
.Area_top_bg { position: relative; }
.bg01 { pointer-events: none; z-index: 0;position:absolute; top:0; left: 50%; transform: translateX(-50%); width:2000px; background-repeat:no-repeat;background-position:center top;}
.bg01 .PD_layout { display: flex; justify-content: center; }
.bg_fix { z-index:-20; position:fixed; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
@media screen and (max-width:767px){
  .bg01 { position: absolute; width: 100%; top: -6vw; }
  .bg01 .PD_layout ul { padding: 0; grid-gap: 0; }
}

/*版頭*/
.Area_top { position: relative; display: flex; flex-direction: column; }

/*銀行logo*/
.title_logo { z-index: 10;position: absolute; width: 50%; left: -2.2%; }
.title_logo .PD_layout { margin: 0; }
 @media screen and (max-width:767px){
  .title_logo { position: relative; display: flex; justify-content: center; width: 100%; background: #fff; left: initial; }
  .title_logo .PD_layout { width: 75%; }
 }

/*主標*/
 .Area_top .main_title { z-index: 10; position: absolute; width: 75%; }
 .Area_top .main_title .PD_layout { margin: 0;  }
 .Area_top .main_title .PD_layout ul { padding: 0; }

 /*副標輪播*/
 .Area_top .sub_title { z-index: 10;position:absolute; transform: translateX(-50%);  }
 .Area_top .sub_title .PD_layout .PD h3 { z-index: 50; text-align: left; font-size: 4.8em; line-height: 1; font-family: "Century Gothic", "Noto Sans CJK TC"; } 
 .Area_top .sub_title .PD_layout .PD h3 span { overflow: visible; } 
 @media screen and (max-width:767px){
  .Area_top .sub_title .PD_layout .PD h3 { text-align: left; font-size: 2em; }
 }

/*版頭圖*/
 .Area_top .title_pic { pointer-events: none; z-index: 10;position: absolute; width: 43%; }
 .Area_top .title_pic .PD_layout { margin: 0;  }


/*區標設定*/
.PD_layout.text_960 li { pointer-events: none; }
.PD_layout.text_960 .PD_img { margin: 0 auto; width: 85%; aspect-ratio: 960 / 120; }
.PD_layout.text_960 .PD_img img { width: 100%; }
.PD_layout.text_960 .PD h3 { top: 52%; color: #ffffd6;  }
.PD_layout.text_960 .PD h3 span { font-family: "Arial" ,"Noto Sans CJK TC"; font-weight: 600;}
.PD_layout.text2_960 { position: absolute; top: 7%; left: 0.5%; }
.PD_layout.text2_960 .PD h3 { z-index: 10; transform: none;min-height: 300px; color: #fff; line-height: 1; }
.PD_layout.text2_960 .PD h3 span { writing-mode: vertical-lr; text-orientation: mixed; }
.PD_layout.text3_960 .PD h3 { color: #fff; font-size: 1.75rem; top: 0; left: 6.5em; }
@media screen and (max-width:767px){
  .PD_layout.text_960 .PD_img { width: 100%; }
  .PD_layout.text2_960 .PD h3 { min-height: 40vw; width: 8vw; line-height: 1; }
  .PD_layout.text2_960 .PD h3 span { overflow: visible; position: absolute; top: 0vw; left: 0vw; }
  .PD_layout.text3_960 .PD h3 { font-size: 1.2rem; top: 0; left: 49.5%; width: 100%; }
}


/*回饋公式*/
.Area00 .PD_layout  { position: relative; display: flex; justify-content: center; font-family: "Century Gothic", "微軟正黑體";}
.Area00 .PD_layout .PD h3  { display: block;}
.Area00 .PD_layout .PD_img { width: 100%;}
.Area00 .PD_layout .PD_slide:hover  { box-shadow: 0 0 0 rgba(0,0,0,0)!important;}
.Area00 .PD_layout .PD h4 span { color: #302f2f;}
.Area00 .PD_layout li .PD_into h3 {color: #2c2c2c;} 
.Area00 .PD_layout li .PD_into h4 {color: #2c2c2c;} 
.Area00 .PD_layout li .PD_into h4 span {color: #ffffff;background-color: #e4317a;border-radius: 5vw;} 
  @media screen and (min-width: 768px){      
    .Area00 { position: relative; height: 220px; margin-bottom: 20px;}
    .Area00 .PD_layout{width: 92%;top: 20px;margin: 0 auto;height: 190px;background: linear-gradient(120deg, #ffffff, #ffffff);border-radius: 1em;}	 
    .Area00 .PD_layout ul { width:100%;margin: 0 auto; grid-gap: 20px; background-color: transparent;}	  
    .Area00 .PD_layout[data-pd-col-pc="4"] ul { grid-template-columns: repeat(4, minmax(0, auto));}	  
    .Area00 .PD_layout li { z-index: 5; border-right: none;}	  
    .Area00 .PD_layout:not([data-pd-btn]) .PD_into { padding:0em 1em 0em 1em;}
    .Area00 .PD_layout .PD h3 {margin: 0 auto;color: #000;font-size: 2em;line-height: 1;width: 5em;height: 1.2em;overflow: visible;}
    .Area00 .PD_layout .PD h4 {margin: 0 auto;color: #000;font-size: 2em;height:auto;font-weight: 600;line-height: 35px;}
    .Area00 .PD_layout .PD h4 b{width: 100%;display:flow-root;height: 1em;font-size: 2em;line-height: 1em;}
    .Area00 .PD_layout .PD h4 span{margin-top: 10px; font-size: 22px; width: 123px;}
    .Area00 .PD_layout .PD h4 small{ font-size: 0.7em;}
    .Area00 .PD_layout .PD h3 span small{ font-size: 50px;}
    .Area00 .PD_layout .PD_slide  {/* background-color: #ff9090;	 height:166px; border-radius:14px; z-index: -1; */ background:none;}	  
    .Area00 .PD_layout ul>li:not(:nth-child(1)) .PD_into::before{content:"+";position:absolute;left:-20px;top:50px;font-size:38px;color: #25395c;font-weight: 600;}
    .Area00 .PD_layout li:nth-last-child(1) .PD_into::before{content:"="!important;top:50px!important;}	
    .Area00 .PD_layout .PD .PD_go, .Area00 .PD_layout .more { position: absolute; height: 150px; width: 390px; bottom: 0; right: 0; z-index: 5;} 	
    .Area00 .PD_layout .PD .PD_go, .Area00 .PD_layout .more {display: block; }
    .Area00 .PD_layout .PD .PD_go, .Area00 .PD_layout .more a{display: block!important;height: 200px}  
  }
  @media screen and (max-width:767px){   
    .Area00 {width: 96%;height: 29vw;margin: 0 auto;}
    .Area00 .PD_layout ul { width:100%; margin: 0 auto; grid-template-columns: repeat(3, minmax(0, auto)); grid-gap: .5em;}	  
    .Area00 .PD_layout[data-pd-col-pc="4"] ul {grid-template-columns: repeat(4, minmax(0, auto));grid-gap: 0.3em;}	  
    .Area00 .box .lbtclass { width: 100%!important;}
    .Area00 .PD_layout {position: relative;background: linear-gradient(120deg, #ffffff, #ffffff);border-radius: 0.5em;height: 29vw;z-index: 5;}	  
    .Area00 .PD_layout  ul {justify-content: center;margin-top: 2vw;background-color: transparent;}	
    .Area00 .PD_layout li { border-right: none; padding: 0 2vw; border-top: none;}	  
    .Area00 .PD_layout .PD_img { width: 100%;}	  
    .Area00 .PD_layout .PD_into { padding: 0.1em; box-sizing: border-box;}	
    .Area00 .PD_layout .PD h3 {font-size: 4vw;line-height: 1.3;display: contents;} 	  
    .Area00 .PD_layout .PD h4 {font-size: 4vw;line-height: 3.3vw;font-weight: 600;width: 100%;}	   
    .Area00 .PD_layout .PD h3 span {overflow: initial;width: 96%;}
    .Area00 .PD_layout .PD h4 span { font-size: 0.9em; height: 6vw; line-height: 6vw; width: 19vw; margin-top: 1vw;}	
    .Area00 .PD_layout .PD h4 b {width: auto;display:flow-root;font-size: 1.8em;height: 1.2em;line-height: 1em;}
    .Area00 .PD_layout .PD h3 span small { font-size: 5vw;}

    .Area00 .PD_layout li:last-of-type .PD_into>h4 span {color: #ffffff;} 	  
    .Area00 .PD_layout .PD h4 span::after { content:""; /*background-color: #b50058;*/ border-radius: 8vw; height: 5vw; line-height: 5vw; width: 100%; position: absolute; left: 0; z-index: -1;}	

    .Area00 .PD_layout .PD_slide { width: fit-content; /*background-color: #ff9090;height: 20vw; border-radius: 2vw;*/ background: none;}
    .Area00 .PD_layout ul>li:not(:nth-child(1)) .PD_into::before {content:"+";position:absolute;left: -2vw;top: 6vw;font-size:5vw;color: #2b3f62;font-weight: 600;}
    .Area00 .PD_layout li:nth-last-child(1) .PD_into::before { content:"="!important;}	

    .Area00 .PD_layout .PD .PD_go, .Area00 .PD_layout .more { position: absolute; height:15vw; width:40vw; bottom:0; right: 0; z-index: 5; display: block;} 	
    .Area00 .PD_layout .PD .PD_go, .Area00 .PD_layout .more a{ display: block!important; height: 20vw;}	
  }
   


/*8品商品公版區*/
.Area_mainPD { margin: 0 auto; }
@media screen and (max-width:767px){ 
  .Area_mainPD { width: 96%; }
  }

/*個人化推薦公版*/
.Area_subPD { margin: 2% auto 0; }
.Area_subPD .Area_swiper { background: #63a0d2; border-radius: 1em; }
.Area_subPD .Area_swiper_box { margin: 3em 0 0 5em; }
@media screen and (max-width:767px){
  .Area_subPD { width: 96%; }
  .Area_subPD .Area_swiper_box { margin: 1.5em 0 0 3em; }
 }

 /*銀行注意事項文案*/
 .Pd_notice {  
  --notice-bg: #2c2c2c;
  --notice-color:  #ffffff;
  --notice-h4-color: #ffffff;
  width: min(96%, 880px); margin: 0.5em auto; padding: 1.2em 1.4em; border-radius: 1em; box-sizing: border-box;background: var(--notice-bg); }

/*消費註解*/
/* 展開看更多按鈕 */
.Pd_notice { display: none; }
.Area_notice .PD_layout-btn li { list-style: none; }
.Area_notice .PD_layout-btn li .PD h3 { font-size: 1.75em; color: #000000; background: #f0dcb7; }
/* 清單按鈕布局 */
.Pd_notice .PD_layout-btn { display: block; }
.PD_layout-btn.active { display: block!important; }
/* 展開看更多按鈕後：顯示所有 .PD_slide */
.Pd_notice.active { display: block;}

.Area_notice { }
.Pd_notice .PD_layout[data-pd-number] .PD_slide::before { position: absolute; top: 0.5em; display: block; font-family: 'Arial'; font-size: 1.5em; content: "•"; } 
.Pd_notice .PD_layout.text3_960 { padding: 1.5em 0; }
.Pd_notice .PD_layout ul li { pointer-events: none; }
.Pd_notice .PD_layout .PD { padding-left: 1em; line-height: 1; }
.Pd_notice .PD_layout .PD_into { text-align: left;  color: var(--notice-color); }
.Pd_notice .PD_layout .PD_into h4 { font-size: 1.5rem; max-height: initial; }
@media screen and (max-width:767px){
  .Pd_notice .PD_layout.text3_960 { padding: 1em 0 0.2em; }
  .Pd_notice .PD_layout .PD_into h4 { font-size: 0.9rem; margin: 0; }
  .Pd_notice .PD_layout[data-pd-number] .PD_slide::before { font-size: 0.85em; } 
  .Pd_notice .PD_layout .PD { padding-left: 0.5em; }
  .Area_notice .PD_layout-btn li .PD h3 { font-size: 1.25em; }
}