@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');

:root{

  --size-small:18px;  
  --size-medium:20px;
  --size-large:24px; 
  --size-xlarge:36px; 
  --fubon-color:#0095b8;
  --taishin-color:#d80c18;
  --skbank-color:#e60012;
}

@media screen and (max-width:800px) {
  :root{
  --size-small:16px;  
  --size-medium:18px;
  --size-large:22px; 
  --size-xlarge:34px;

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

  :root{
    --size-large:20px; 
    --size-xlarge:30px;
  
    }  
}




#bankPage {
  /* background:#ffa2af;  */
  background:#fe7c00;}
#bankPage * {font-family: "Noto Sans TC", "微軟正黑體";line-height: 1.4;}

.bankMenu{display: inline-flex;flex-wrap: nowrap;justify-content: center;width: 100%;margin: 10px auto;}
.bankMenu li {border:3px solid #1d6564;font-size:var(--size-large);font-weight: 700; color: #1d6564;margin: 5px;padding: 10px 20px;cursor: pointer;background: #FFF;text-align: center;}
.bankMenu li.on{background: #1d6564;color: #FFF;}


@media screen and (max-width:550px) {
.bankMenu li{padding: 8px;border:2px solid #1d6564;}
}

.bankPaper .bankIntro { display: none;background: #FFF;max-width: 1400px;width: 100%;margin: 0 auto;padding: 50px;}
.bankPaper .bankIntro.on{display: block;}
.bankPaper .bankIntro .bankLogo{max-width: 300px;width: 100%;margin: 0 auto;display: block;}
.bankPaper h2{font-size:var(--size-xlarge);color: #0095b8;text-align: center;margin: 10px auto;background: #ffe8ed;}
.bankPaper p {font-size:var(--size-medium);}

/*客製色*/
.bankPaper #fubon h2{color:var(--fubon-color);}
.bankPaper #fubon .bankCoupon{background:var(--fubon-color);}
.bankPaper #fubon .bankCouponUseInfor li{background:var(--fubon-color);}
.bankPaper #fubon .bankGift h3{color:var(--fubon-color);}

.bankPaper #taishin h2{color:var(--taishin-color);}
.bankPaper #taishin .bankCoupon{background:var(--taishin-color);}
.bankPaper #taishin .bankCouponUseInfor li{background:var(--taishin-color);}
.bankPaper #taishin .bankGift h3{color:var(--taishin-color);}

.bankPaper #skbank h2{color:var(--skbank-color);}
.bankPaper #skbank .bankCoupon{background:var(--skbank-color);}
.bankPaper #skbank .bankCouponUseInfor li{background:var(--skbank-color);}
.bankPaper #skbank .bankGift h3{color:var(--skbank-color);}




/*折扣碼及流程*/
.bankCoupon {position: relative; display: flex;margin:20px 0px;padding: 30px 20px; background: #0095b8; border-radius: 20px;}
.bankCoupon::after,
.bankCoupon::before {content: ""; position: absolute; top: calc(50% - 20px); width: 40px; height: 40px; border-radius: 99em; background: white;}
.bankCoupon::after { left: -20px;}
.bankCoupon::before { right: -20px;}
.bankCouponMsg { display: block; margin: 0 auto 40px auto; width: 90%; max-width: 1000px; font: 300 18px/1 "Noto Sans TC", "微軟正黑體"; color: black;text-align: center;}
.bankCoupon_title { display: inline-block; width: 40%; text-align: center; border-right: 5px dotted white;}
.bankCoupon_title h3 { margin-bottom: 20px; font: 700 45px/1 "Noto Sans TC", "微軟正黑體";  color: white;  text-align: center;  letter-spacing: 3px;}
.bankCoupon_title h3 small {  display: block;  margin-top: 5px;  font-size: 0.5em;}
.bankCoupon_title p {  display: inline-flex;  align-items: center;  padding: 0 20px 0 0;  font: 700 35px/1 "Noto Sans TC", "微軟正黑體";  color: black;  border-radius: 20px;  overflow: hidden;  background: white;  border: 3px solid #ffe560;}
.bankCoupon_title p span {  display: inline-block;  margin-right: 20px;  padding: 10px 10px 10px 20px;  background: #ffe560;}
.bankCoupon_discount {  display: inline-block;  width: 60%;}
.bankCoupon_discount_inner {  padding: 0 20px;  width: 100%;  height: 100%;}
.bankCoupon_discount p {  display: flex;  justify-content: center;  align-items: baseline;  width: 95%;  height: 100%;  font: 900 64px/1 "Noto Sans TC", "微軟正黑體";  color: black;  text-align: center;  background: white;}
.bankCoupon_discount p strong {  display: inline-block;  transform: translateY(5px);  font-size: 1.5em;}
.bankCouponUseInfor {  margin: 20px 0 0 0;}
.bankCouponUseInfor h3 {  position: relative;  margin-bottom: 20px;  font: 900 24px/1 "Noto Sans TC", "微軟正黑體";  color: black;  text-align: center;}
.bankCouponUseInfor h3 span {  position: relative;  text-shadow: 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white;  z-index: 2;}
.bankCouponUseInfor h3::after {  content: "";  position: absolute;  top: calc(50% - 1px);  left: 0;  width: 100%;  height: 1px;  background: black;  z-index: 1;}
.bankCouponUseInfor ul {  display: flex;  justify-content: space-between;}
.bankCouponUseInfor li {  position: relative;  display: inline-block;  padding: 5px;  width: calc(25% - 80px);  background: #b00a26;  border-radius: 99em 99em 20em 20em;}
.bankCouponUseInfor li::after {  content: "";  position: absolute;  top: calc(50% - 20px);  right: -95px;  width: 95px;  height: 45px;  background: url(../images/arrow-1.png) center center no-repeat;}
.bankCouponUseInfor li:last-child::after {  display: none;}
.bankCouponUseInfor_img {  border-radius: 99em;  overflow: hidden;  background: white;}
.bankCouponUseInfor_img img {  width: 100%;}
.bankCouponUseInfor_text {  padding: 10px 0;  font: 500 18px/1.4 "Noto Sans TC", "微軟正黑體";  color: white;  text-align: center;  letter-spacing: 3px;}
.bankCouponUseInfor_text span {  color: #fff200;}

/*贈品*/
.bankGift {margin: 50px auto;width: 80%;}
.bankGift h3{font-size:var(--size-xlarge);text-align: center;background: #ffe560;border-radius: 30px 30px 0 0;}
.bankGiftBox {display: inline-flex;flex-wrap: nowrap;justify-content: center;align-items: center;padding: 20px 50px;border: 2px solid #ffe560;}
.bankGiftBox .bankGiftBoxImg{flex-basis: 30%;}
.bankGiftBox .bankGiftBoxImg img{width: 100%;max-width: 800px;}
.bankGiftBox p{flex-basis: 60%;flex-grow: 1;}

@media screen and (max-width:1110px) {
  .bankPaper .bankIntro{padding: 30px;}
  .bankContent_inner { margin: 0 auto 10% auto; padding: 0 2% 2% 2%;  }  
  .bankCoupon::after,  .bankCoupon::before {  op: calc(50% - 10px);    width: 20px;    height: 20px;  }
  .bankCoupon::after { left: -10px;  }
  .bankCoupon::before { right: -10px;  }
  .bankCoupon_title h3 { font-size: 26px;  }
  .bankCoupon_title p { font-size: 25px;  }
  .bankCoupon_discount p {font-size: 50px;  }
  .bankCouponUseInfor li { width: calc(25% - 50px);  }
  .bankCouponUseInfor li::after {right: -70px;    width: 70px; }

  .bankGift {width: 100%;}
}

@media screen and (max-width:768px) {
  .bankCoupon {display: block; padding: 2%;}
  .bankCoupon_title { display: block; margin-bottom: 2%;  padding-bottom: 2%;  width: 100%;  border-right: none;  border-bottom: 5px dotted white;}
  .bankCoupon_discount { display: block; width: 100%;}
  .bankCoupon_discount p { padding: 2%; }
  .bankCouponUseInfor li { width: calc(25% - 38px);}
  .bankCouponUseInfor li::after { right: -47px;  width: 40px;  background-size: auto 100%;}

  .bankGiftBox{flex-wrap: wrap;padding: 20px;}
  .bankGiftBox .bankGiftBoxImg{flex-basis: 80%;}
  .bankGiftBox p{flex-basis: 100%;}

}

@media screen and (max-width:600px) {
  .bankContent_inner h2 { font-size: 35px; }
  .bankCoupon_title h3 { margin-bottom: 10px;font-size: 24px;}
  .bankCouponUseInfor ul { display: block;}
  .bankCouponUseInfor li { display: flex; margin-bottom: 60px; width: 100%; border-radius: 99em 20em 20em 99em; }
  .bankCouponUseInfor_img { display: inline-block; width: 30%; }
  .bankCouponUseInfor_text {  display: inline-flex; flex-wrap: wrap; justify-content: center;  align-items: center; width: 70%;}
  .bankCouponUseInfor li::after { top: 105%; right: calc(50% - 20px); transform: rotate(90deg); }
}

@media screen and (max-width:550px) {
  .bankCoupon_discount p { font-size: 30px; align-items:center;}
  .bankCoupon_discount p strong{  transform:translateY(-3px); }
}


/*注意事項*/
.warning {  padding: 50px 0;  background: #fff;}
.warning h3 { display: block; margin: 0 auto 20px auto;padding: 15px 0; width: 95%; font-weight:900;color: #45aad1; text-align: center;  border-radius: 0 0 20px 20px;font-size: var(--size-xlarge);}
.warning h4 {color: #000;font-size: var(--size-medium);}
.warning_inner { margin: 0 auto;  width: 95%;  max-width: 1400px;}
.warning_inner ul {  padding: 20px;  border-radius: 20px;  background: white;}
.warning_inner ul li {  margin-bottom: 15px;  list-style: decimal;  list-style-position: inside;  font-size: var(--size-small); color: black;  text-align: left;}

.warning table {width: 100%;margin: 10px auto;text-align: center;}
.warning table tr{width: 33%;border: 1px solid #000;}
.warning table tr td {padding: 5px;}

#bankPage .poiTitle{font-size: var(--size-xlarge);} 
#bankPage .ph-group-title span{font-size: var(--size-xlarge);} 
#bankPage .ph-group-content-tag{background: #000;}