@charset "utf-8";
/* ampte2 */ 
.ampte2 .card_benefit, .tb .card_benefit { background-color: #f5f7f9; } 
.ampte2 .box_card_type.amex_platinum .item_wrap .item { background: #53565a; } 
.ampte2 .card_benefit{background-color: #53565a;}
.ampte2 .voucher_benefit_txt{background-color: #53565a; padding: 40px 24px 60px;}
.ampte2 .ico.type01 .svg path, .ampte2 .ico.type01 .svg g, .ampte2 .ico.type01 .svg polygon  {fill:#53565a;}

/* amgle2 */ 
.amgle2 .card_benefit .ben_top .card_name {display: inline-block;margin-top: 16px;}
.amgle2 .card_benefit {background-color: #00175a;}
.amgle2 .card_benefit .cont{color: #fff;}
.amgle2 .box_card_type.amex_gold .item_wrap .item {background: #00175a;}
.amgle2 .voucher_benefit_txt{background-color: #00175a; padding: 40px 24px 60px;}
.amgle2 .ico.type01 .svg path, .amgle2 .ico.type01 .svg g, .amgle2 .ico.type01 .svg polygon  {fill:#00175A;}

/* amgre2 */
.amgre2 .card_benefit, .tb .card_benefit {background-color: #f6f8f7;}
.amgre2 .card_benefit{background-color: #006fcf;}
.amgre2 .card_benefit .cont{color: #fff;}
.amgre2 .voucher_benefit_txt{background-color: #006fcf; padding: 40px 24px 60px;}
.amex_green_bg2 {background: #006fcf !important;}
.amgre2 .ico.type01 .svg path, .amgre2 .ico.type01 .svg g, .amgre2 .ico.type01 .svg polygon  {fill:#006FCF;}

:is(.ampte2, .amgle2, .amgre2) .card_benefit .ben_top .card_name { display: inline-block; margin-top: 16px; } 
:is(.ampte2, .amgle2, .amgre2) .card_benefit .ben_top .img { display: block; margin: 0 auto; width: 216px; height: auto; background-repeat: no-repeat; } 
:is(.ampte2, .amgle2, .amgre2) .card_benefit .ben_top .img img { width: 100%; height: auto; } 
:is(.ampte2, .amgle2, .amgre2) .point_use ul li { position: relative; display: flex; justify-content: center; align-items: center; } 
:is(.ampte2, .amgle2, .amgre2) .point_use ul li .txt { margin-top:0; } 
:is(.ampte2, .amgle2, .amgre2)  .voucher_benefit_section .fc_a64{color: rgba(255, 255, 255, .64)}

/* tpie2 */
.tpie2 .card_benefit { background-color:#fcf4f8;margin-top:64px ; } 
.tpie2 .card_benefit .p2_eb_1{color: #fb1a77;}

/* tge3 */
.tge3 .card_benefit { background-color:#f1f8f4; margin-top:64px ;} 
.tge3 .card_benefit .p2_eb_1 { color:#008c15 } 

.pay3_area > a > .img > img{width: 13rem !important; margin: 0 auto;} 

.voucher_benefit_section{display: flex; flex-direction: column;}
.voucher_benefit_list{display: flex; flex-direction: column; gap: 24px;}

.highlight_new{background-image: linear-gradient(to bottom, transparent 0 0px, transparent 0 2px, rgb(251 255 0 / 100%) 2px calc(100% - 2px), transparent calc(100% - 2px) 100%);}
.highlight_new.w16{display: inline-block; width: 16px; height: 16px; background-color: #fbff00; margin-right: 4px; vertical-align: middle; position: relative; margin-top: -3px;}

.modal_card_view .big_accod > .accodSlide .box_accod_tit + .card_bundle{margin-top: 12px;}

.item.type-bottom-txt { display: flex; flex-direction: column;}
.item.type-bottom-txt .item_tit { margin-bottom: 40px; }
.item.type-bottom-txt .item_tit + .sub_txt { max-width: 214px; margin-top: auto; }
.item.type-bottom-txt.type-onlytxt .item_tit + .sub_txt { max-width: 270px; margin-top: auto; }
.item.type-bottom-txt .img_area { position: absolute; right: 40px; bottom: 32px !important; margin: 0; }

@media (prefers-color-scheme:dark){
    :is( .tpie2, .tge3) .card_benefit {background-color: rgba(0,0,0,0.16);}
    :is(.ampte2, .tpie2, .tge3) .card_benefit .cont{color: #fff;}
    .box_card_type.amex_platinum .item_wrap .item { color:#000; color: #fff;} 
    .highlight_new{color: rgba(0, 0, 0, .64);}
}