.line-n{ border: 1px #d32020 solid;}
.line2-n{ border: 1px #3BD983 solid;}
.line-gray-n{ border: 1px #eeeeee solid;}

.max-w-\[1380px\] {
  max-width: 1380px;
  border: 1px solid #1867e4;
}

.tooltip-arrow, .tooltip-arrow:before {
  background: inherit;
  height: 8px;
  position: absolute;
  width: 8px;
}

/*-------------*/
input, textarea {

  font-size: initial;
  
  }

/*---底色---*/
.bg-white-50{
  /* Permalink - use to edit and share this gradient. 固定鏈接 - 用於編輯和分享此漸變： https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.25+0,0.25+100 */
background: linear-gradient(to bottom,  rgba(255,255,255,0.90) 0%,rgba(255,255,255,0.55) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bg-black-50{
  /* Permalink - use to edit and share this gradient. 固定鏈接 - 用於編輯和分享此漸變： https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.25+0,0.25+100 */
  background: linear-gradient(180deg, hsla(0, 0%, 63.6%, 17%) 0, hsla(0, 0%, 0%, 50%));
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bg_Profile_bar{
  /* Permalink - use to edit and share this gradient. 固定鏈接 - 用於編輯和分享此漸變： https://colorzilla.com/gradient-editor/#d3bb7e+0,b79b5d+84,b79b5d+99 */
background: linear-gradient(to bottom,  #d3bb7e 0%,#b79b5d 84%,#b79b5d 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.bg-black-700-n{ background-color:#261E24;}
.bg-gray-100-n{background-color: rgb(243 244 246);}
.bg-gray-150-n{background-color: #FAFAFA;}
.bg-gray-180-n{background-color: #F7F7F7;}
.bg-gray-200-n{background-color: #EFEFEF;}
.bg-gray-250-n{background-color: #E2E5E9;}
.bg-gray-300-n{background-color: #F4F1F7;}
.bg-gray-350-n{background-color: #DCDCDC;}
.bg-white-30-n{background-color: rgb(243 244 246) ; opacity: .3;}
.bg-white-40-n{background-color: #FAFAFA  ; }
.bg-yellow-100-n{background-color: #FFF596  ; }


.bg-pink-600-n{background-color: #ED3162;}
.bg-pink-300-n{background-color: #FF779B;}
.bg-pink-200-n{background-color: #FAA8BE;}
.bg-pink-100-n{background-color: #FFF1F5;}

.bg-pink-50-n{background-color: #FFE6ED;}
.bg-pink-10-n{background-color: #fcf6f8;}

.bg-orange-500-n{background-color: #FF5A5A;}
.bg-orange-200-n{background-color: #FEA337;}

.bg-pgrey-50-n{background-color: #D0B6C7;}
.bg-white-100-n {background-color: #eeeeee;}
.bg-green-500-n{ background-color: #000;}
.bg-green-400-n{ background-color: #3BD983;}
.bg-dark-green-500-n{ background-color: #4E8793;}

.bg_btn-Orange-n{background: url(../img/bg_btn-Orange.jpg) repeat-x;}
.bg_btn-brown-n{background: url(../img/bg_btn-brown.jpg) repeat-x;}

.bg_white_left{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+35,ffffff+35,ffffff+100&1+54,0+100 */
background: linear-gradient(to right,  rgba(255,255,255,1) 35%,rgba(255,255,255,1) 54%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.bg_white_right{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+75&0+0,1+47 */
background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 47%,rgba(255,255,255,1) 75%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

.bg-AA{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#261e24+0,261e24+100&1+0,0.57+100 */
background: linear-gradient(to bottom,  rgba(38,30,36,1) 0%,rgba(38,30,36,0.57) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */


}



/*-文字--*/
.text-black-100-n{color: #2D2D36;}
.text-black-200-n{color: #4E383E;}
.text-grey-80-n{color: #4D4D4D;}
.text-grey-10-n{color: #d4d4d4;}

.text-grey-100-n{color: #93A2AF;}
.text-grey-200-n{color: #DCDCDC;}
.text-grey-500-n{color: #727272;}
.text-pgrey-50-n{color: #D0B6C7;}
.text-grey-30-n{color: #D0B6C7;}
.text-Bgrey-30-n{color: #6C7B8A;}
.text-pink-600-n{color: #ED3162;}
.text-pink-300-n{color: #FF779B;}
.text-red-600-n{color: #FF5A5A;}
.text-green-400-n{ color: #3BD983;}
.text-orange-200-n{color: #FEA337;}
.text-dark-green-500-n{ color: #4E8793;}

/*-文字-字間--*/
.leter_1{ letter-spacing: 5px;}
.leter_code-n{ letter-spacing: 45px;}


/*------*/
.border-pink-600-n{ border:1px solid #ED3162 ;}
.border-pink-100-n{ border:1px solid #FFE2E9 ;}
.border-green-400-n{ border:1px solid #3BD983;}
.border-pink-600-n{border:1px solid #ED3162;}
.border-orange-200-n{border:1px solid #FEA337;}
.border-dark-green-500-n{ border:1px solid #4E8793;}

/*--BTN--*/


/*--全站選單－個人總覽-*/
.menu_A1{ height: 38px; background-image: url(../img/personal_a1_account.png); background-repeat: no-repeat; background-size: 34px; background-position: top 0px left 40px; }
.menu_A1:hover{  background-image: url(../img/personal_a1a_account.png); background-repeat: no-repeat; }

.menu_A2{  height: 38px; background-image: url(../img/personal_a2_wallet.png); background-repeat: no-repeat; background-size: 34px; background-position: top 0px left 40px; }
.menu_A2:hover{  background-image: url(../img/personal_a2a_wallet.png); background-repeat: no-repeat; }

.menu_A3{ height: 38px; background-image: url(../img/personal_a3_card.png); background-repeat: no-repeat; background-size: 34px; background-position: top 0px left 40px; }
.menu_A3:hover{  background-image: url(../img/personal_a3a_card.png); background-repeat: no-repeat; }

.menu_A4{  height: 38px; background-image: url(../img/personal_a4_Vector.png); background-repeat: no-repeat; background-size: 34px; background-position: top 0px left 40px; }
.menu_A4:hover{  background-image: url(../img/personal_a4a_Vector.png); background-repeat: no-repeat; }

.menu_A5{ height: 38px; background-image: url(../img/menu_a1_logout.png); background-repeat: no-repeat; background-size: 34px; background-position: top 0px left 40px; }
.menu_A5:hover{  background-image: url(../img/menu_a1a_logout.png); background-repeat: no-repeat; }

/*-內頁－次選單--*/
.secondary_menu_A1a{ height: 38px; background-image: url(../img/personal_a1a_account.png); background-repeat: no-repeat; background-size: 34px; background-position: top 0px left 6px; }
.secondary_menu_A1{ height: 38px; background-image: url(../img/personal_a1_account.png); background-repeat: no-repeat; background-size: 34px; background-position: top 0px left 6px; }
.secondary_menu_A1:hover{  background-image: url(../img/personal_a1a_account.png); background-repeat: no-repeat; }

.secondary_menu_A2a{ height: 38px; background-image: url(../img/personal_a2a_wallet.png); background-repeat: no-repeat; background-size: 34px; background-position: top 0px left 6px; }
.secondary_menu_A2{ height: 38px; background-image: url(../img/personal_a2_wallet.png); background-repeat: no-repeat; background-size: 34px; background-position: top 0px left 6px; }
.secondary_menu_A2:hover{  background-image: url(../img/personal_a2a_wallet.png); background-repeat: no-repeat; }

.secondary_menu_A3a{ height: 38px; background-image: url(../img/personal_a3a_card.png); background-repeat: no-repeat; background-size: 34px; background-position: top 0px left 6px; }
.secondary_menu_A3{ height: 38px; background-image: url(../img/personal_a3_card.png); background-repeat: no-repeat; background-size: 34px; background-position: top 0px left 6px; }
.secondary_menu_A3:hover{  background-image: url(../img/personal_a3a_card.png); background-repeat: no-repeat; }

.secondary_menu_A4a{ height: 38px; background-image: url(../img/personal_a4a_Vector.png); background-repeat: no-repeat; background-size: 34px; background-position: top 0px left 6px; }
.secondary_menu_A4{ height: 38px; background-image: url(../img/personal_a4_Vector.png); background-repeat: no-repeat; background-size: 34px; background-position: top 0px left 6px; }
.secondary_menu_A4:hover{  background-image: url(../img/personal_a4a_Vector.png); background-repeat: no-repeat; }


/*--內頁－個人總覽-*/
.btn_A1{width: 90px; height: 90px; background-image: url(../img/personal_Receipts_1.png); background-size:70% ; background-position:top  center ;background-repeat: no-repeat; }
.btn_A1:hover{  background-image: url(../img/personal_Receipts_1a.png);}
.btn_A2{width: 90px; height: 90px; background-image: url(../img/personal_Receipts_2.png); background-size:70% ; background-position:top center ;background-repeat: no-repeat; }
.btn_A2:hover{  background-image: url(../img/personal_Receipts_2a.png);}
.btn_A3{width: 90px; height: 90px; background-image: url(../img/personal_Receipts_3.png); background-size:70% ; background-position:top center ;background-repeat: no-repeat; }
.btn_A3:hover{  background-image: url(../img/personal_Receipts_3a.png);}
.btn_A4{width: 90px; height: 90px; background-image: url(../img/Frame910.png); background-size:100% ; background-position:top center ;background-repeat: no-repeat; }
.btn_A4:hover{  background-image: url(../img/Frame911.png);}


/*--內頁－信用卡-*/
.card_btn_A1{  height: 78px; background-image: url(../img/BankCard_1.png); background-size:25px  ; background-position:top 14px  center ;background-repeat: no-repeat; }
.card_btn_A1:hover{  background-image: url(../img/BankCard_1a.png);}

.card_btn_A2{ height: 78px; background-image: url(../img/BankCard_2.png); background-size:25px  ; background-position:top 14px  center ;background-repeat: no-repeat; }
.card_btn_A2:hover{  background-image: url(../img/BankCard_2a.png);}

.card_btn_A3{ height: 78px; background-image: url(../img/BankCard_3.png); background-size:25px  ; background-position:top 14px  center ;background-repeat: no-repeat; }
.card_btn_A3:hover{  background-image: url(../img/BankCard_3a.png);}

.card_btn_A4{ height: 78px; background-image: url(../img/BankCard_4.png); background-size:25px  ; background-position:top 14px  center ;background-repeat: no-repeat; }
.card_btn_A4:hover{  background-image: url(../img/BankCard_4a.png);}

.card_btn_A5{ height: 78px; background-image: url(../img/card-add.png); background-size:25px  ; background-position:top 14px  center ;background-repeat: no-repeat; }
.card_btn_A5:hover{  background-image: url(../img/card-add-1.png);}
/*----HOVER-------*/
.bg-sky-500 {
    background-color: #0ea5e9;
  }

  .hover\:bg-pink-50-n:hover {
    background-color: #FFE6ED;
  }
  .hover\:bg-pink-600-n:hover {
    background-color: #ED3162;
  }
  .hover\:bg-pink-300-n:hover{
    background-color: #FF779B;
  }
  .hover\:bg-pink-200-n:hover{
    background-color: #FAA8BE;
  }

  /* .hover\:bg-pink-300-n:hover{
    background-color: #FFF1F5;
  } */

  .hover\:bg-pink-100-n:hover{
    background-color: #FFF1F5;
  } 
  .hover\:bg-pink-50-n:hover{
    background-color: #FFE6ED;;
  }

  .hover\:text-pink-600-n:hover{
  color: #ED3162;
  }
.hover\:text-pink-300-n:hover{
  color: #FF779B;
}
/*----FOCUS-------*/
.focus\:bg-pink-50-n:focus{background-color: #FFE6ED;}



/*-----文字-大小----------*/
.text-md-n{ font-size: 16px; color: #c83838;}

.text-pt-25-n{font-size: 25px; line-height: 30px;}
.text-height-30-n{ line-height: 30px;}
/*--底圖-----*/
.bg-white-30-n{ background-image: url(../img/bg_white_30.png); z-index: 0; }
.bg-index-sm-img-n{ background-image: url(../img/BN_BG.png); background-repeat:no-repeat; background-size: cover; background-position: top center;  }
.bg-index-md-img-n{ background-image: url(../img/BN_BG.png); background-repeat:repeat-x; ;}
.bg-index-img-n{ background-image: url(../img/BN_BG.png); background-repeat:repeat-x;  background-color: #3BD983;} 
.bg-index-banner-card-n{ background-image: url(../img/index_banner-card.png); background-repeat: no-repeat ; background-position:top center; background-size: 60%;  }
.bg-index-banner-card-sm-n{ background-image: url(../img/index_banner-card.png); background-repeat: no-repeat ; background-position:top center; background-size:contain;  }
.bg-index-text-money-n{ background-image: url(../img/bg_Mask_2.png); background-repeat: no-repeat ; background-position:bottom right;background-size:contain ; /*background-size: 70%;*/ }
.bg-index-text-invite-n{ background-image: url(../img/bg_Mask_1.png); background-repeat: no-repeat ; background-position:bottom right;background-size:contain ; /*background-size: 70%;*/}
.bg-index-text-FQAe-n{ background-image: url(../img/bg_FQA.png); background-repeat: no-repeat ; background-position:top 10px right 10px;background-size:contain ;}
.bg-box-img-n{ background-image: url(../img/ad_bg.jpg); background-repeat:repeat-x;}

.bg-wallet_cardx-img-n{ background-image: url(../img/wallet_card.png); background-repeat:no-repeat;}


/*-padding/marginn---*/


.p-x10-y8-n{padding: 6% 10%;}
.mt--120{margin-top: -120px ;}
.mt--20{margin-top: -20px ;}
.mt--30{margin-top: -30px ;}
.mt--50{margin-top: -50px ;}
.ml--80-n{margin-left: -80px ;}
.mb-120-n{margin-bottom: 120px ;}
.mb-80-n{margin-bottom: 120px ;}

.ml--10{ margin-left: -10px;}
.mr--10{ margin-right: -10px;}

/*----定位----*/
.bottom_10{ bottom: 10px ;}
.bottom_12{ bottom: 12px ;}
.bottom_13{ bottom: 13px ;}
.top_56{ top: 56px;}
.left-34{ left: -34px;}
.bottom-0-n{bottom:0px ;}
.AAA-n{
  position:fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100vh;
z-index: 40; 

}
/*--高度-----*/
.h-topbar-n{ height: 60px ;}
.h-300-n{ height: 300px ;}
.h-400-n{ height: 400px ;}
.h-450-n{ height: 450px ;}
.h-480-n{ height: 480px ;}
.h-500-n{ height: 500px ;}
.h-650-n{ height: 650px ;}
.h-700-n{ height: 700px ;}

/*--寬度----------*/
.width-100-n{ width: 100% ;}
.width-200{ width: 200px ;}
.width-120{ width: 120px ;}
.width-130{ width: 130px ;}
.width-100{ width: 100px ;}
.width-160{ width: 160px ;}

.w-170-n{ width:170px !important ;}
.w-280-n{ width:280px !important ;}
.w-360-n{ width:360px !important ;}
.w-380-n{ width:380px !important ;}

.w_auto-n{ width: auto;}

.z-100-n{ z-index: 60;}

/*----定位-----*/
.icon_top_right{position: absolute; top:-12px ; right: -12px; z-index: 49;}
/*----定位-----*/
.list-abc-n{list-style-type: lower-alpha;}
.list-Roman-n{list-style-type: upper-roman ;}
.list-square-n {list-style-type: square;}


/*--UL lI----*/
/*li::marker {
  content: '✝ ';
  font-size: 1.2em;
}
ul li::marker {
  color: red;
  font-size: 1.5em;
}*/

ul.AA li::marker {
  color: #ED3162;
}


@media (max-width: 550px) {

  /* ... */
}

@media (max-width: 767px) {
  .bg-index-text-FQAe-n{ background-image:none; background-repeat: no-repeat ; background-position:top 10px right 10px;background-size:contain ;}
  .bg-index-text-money-n{ background-image:none; background-repeat: no-repeat ; background-position:bottom right;background-size:contain ;}
.bg-index-text-invite-n{ background-image: none; background-repeat: no-repeat ; background-position:bottom right;background-size:contain ; }
}


@media (min-width: 640px) {
  .sm\:.mb-80-n{margin-bottom: 80px ;}
  .sm\:bg-index-text-money-n{ background-image: url(../img/bg_Mask_2.png); background-repeat: no-repeat ; background-position:bottom right; background-size: 50%;}
  .sm\:bg-index-text-invite-n{ background-image: url(../img/bg_Mask_1.png); background-repeat: no-repeat ; background-position:bottom right; background-size: 50%;}
  .sm\:bg-index-text-FQAe-n{ background-image: url(../img/bg_FQA.png); background-repeat: no-repeat ; background-position:bottom 50px right 100px;}
  /* ... */
  /*
  .bg-index-text-money-n{ background-image: url(../img/bg_Mask_2.png); background-repeat: no-repeat ; background-position:center right; background-size: 40%;}
  .bg-index-text-invite-n{ background-image: url(../img/bg_Mask_1.png); background-repeat: no-repeat ; background-position:center right; background-size: 40%;}
  .bg-index-text-FQAe-n{ background-image: url(../img/bg_FQA.png); background-repeat: no-repeat ; background-position:bottom 50px right 100px;}
  */
}



@media (min-width: 768px) {
  .md\:mt--120{margin-top: -120px ;}
  .md\:bg-index-md-img-n{ background-image: url(../img/BN_BG.png); background-size: 3000px;  }
  .md\:bg-index-banner-md-card-n{ background-image: url(../img/index_banner-card.png); background-repeat: no-repeat ; background-position:top center; background-size: 80%;}
  .md\:bg-gray-200-n{background-color: #EFEFEF;}
  .md\:h-300-n{ height: 300px ;}
  .md\:h-350-n{ height: 350px ;}
  .md\:h-400-n{ height: 400px ;}
  .md\:h-700-n{ height: 700px ;}
  .md\:text-pt-35-n{font-size: 35px; line-height: 40px;}
  .md\:mb-120-n{margin-bottom: 120px ;}

    /* 內頁選單 */
  .md\:width-200{ width: 200px ;}
  .md\:bg-gray-150-n{background-color: #FAFAFA;}
  .md\:bg-white-40-n{background-color: #FAFAFA  ; }


  /* ... */
  .md\:h-650-n{ height: 650px ;}

  .bg-index-text-money-n{ background-image: url(../img/bg_Mask_2.png); background-repeat: no-repeat ; background-position:center right; background-size:150px;}
  .bg-index-text-invite-n{ background-image: url(../img/bg_Mask_1.png); background-repeat: no-repeat ; background-position:center right; background-size:150px;}
  .bg-index-text-FQAe-n{ background-image: url(../img/bg_FQA.png); background-repeat: no-repeat ; background-position:top 20px right 50px; background-size:200px;}
  
}

@media (min-width: 1024px) {
  .lg\:h-300-n{ height: 300px ;}
  .lg\:h-500-n{ height: 500px ;}
  .lg\:h-700-n{ height: 700px ;}
  .lg\:mt--120{margin-top: -120px ;}
  .lg\:mb-120-n{margin-bottom: 120px ;}
  .lg\:bg-index-lg-img-n{ background-image: url(../img/BN_BG.png); background-size: 3000px; /*background-size:contain ;*/}
  

  .lg\:bg-index-img-n{ background-image: url(../img/BN_BG.png); background-size: 3000px; }


  /* 內頁選單 */
  .lg\:bg-white-100-n {background-color: #eeeeee;}
  .lg\:width-200{ width: 200px ;}
  .lg\:width-140{ width: 140px ;}
  .lg\:bg-gray-150-n{background-color: #FAFAFA;}
  .lg\:bg-white-40-n{background-color: #FAFAFA  ; }

  /*------*/
  .lg\:tt-md-n{ font-size: 16px !important; }
  /* ... */
  .lg\:h-400-n{ height: 400px ;}
  .lg\:h-300-n{ height: 300px ;}
  .bg-index-banner-md-card-n{ background-image: url(../img/index_banner-card.png); background-repeat: no-repeat ; background-position:top center; background-size: 80%;}
  .bg-index-text-money-n{ background-image: url(../img/bg_Mask_2.png); background-repeat: no-repeat ; background-position:center right; background-size: 200px;}
  .bg-index-text-invite-n{ background-image: url(../img/bg_Mask_1.png); background-repeat: no-repeat ; background-position:center right; background-size: 200px;}
  .bg-index-text-FQAe-n{ background-image: url(../img/bg_FQA.png); background-repeat: no-repeat ; background-position:bottom 50px right 100px; background-size: 200px ;}
}

@media (min-width: 1280px) {
  .xl\:h-500-n{ height: 500px ;}
  .xl\:h-500-n{ height: 500px ;}
  .xl\:h-700-n{ height: 650px ;}
  .xl\:mt--300{margin-top: -300px ;}
  .xl\:mb-120-n{margin-bottom: 120px ;}
  .xl\:bg-index-banner-xl-card-n{ background-image: url(../img/index_banner-card.png); background-repeat: no-repeat ; background-position:top -50px; background-size: 70%;}
  .xl\:bg-index-xl-img-n{ background-image: url(../img/BN_BG.png); background-size: 3000px;  /*background-size:1900px ;*/ }
  .xl\:width-120{ width: 120px ;}
  .xl\:width-180{ width: 180px ;}
  /* ... */
}

@media (min-width: 1536px) {
  
  .xl\:width-120{ width: 120px ;}
  .xl\:width-180{ width: 180px ;}
  /* ... */
}