/****** 2023-11-08 GGU477 [APP][기타] AMEX MR혜택 상세페이지 신규 제작 ******/

/* common */
#userSkip { position: relative; z-index: 3000; }
#userSkip a { position: absolute; top: -200px; left: 0; width: 140px; text-align: center; border: 1px solid #0070f0; background-color: #000;}
#userSkip span { display: inline-block; padding: 2px 6px 0 0; font-size: 14px; line-height: 20px; color: #fff; white-space: nowrap;}
/* header.amexMR {height: 48px;}
header.amexMR .btn_prev {position: absolute; top: 8px; left: 8px; width: 32px; height: 32px; background: url(/docfiles/resources/mo/images/com/icon/w32/ico_arrowB_back.png) no-repeat 50% 50%; background-size: 32px 32px;} */
.img img {width: 100%;}
.pl8 {padding-left: 8px !important;}
.pl20 {padding-left: 20px !important;}
.pb136 {padding-bottom: 136px !important;}
.sec_in {padding-left: 24px; padding-right: 24px;}


/* contents */
.amexMR_detail {min-height: 100%; padding-bottom: 64px; padding-top: 48px;} /* 2023-11-29 GGU282 - 수정 : margin-top → padding-top */
.amexMR_detail .topBanner {width: 100%; height: 250px; padding: 28px 24px; background-color: #fafafa; background-repeat: no-repeat; background-position: calc(100% - 24px) calc(100% - 24px);  background-size: 108px auto; position: relative; word-break: keep-all;} /* 2025-05-21 GGU477 word-break 추가 */

/* 2025-08-05 Q11817 아이콘 이미지 수정 및 추가 */
.amexMR_detail .topBanner.hotel_1 {background-image: url(/ct_pbb/etc/Hotel_1.webp);}
.amexMR_detail .topBanner.hotel_2 {background-image: url(/ct_pbb/etc/Hotel_2.webp);}
.amexMR_detail .topBanner.hotel_3 {background-image: url(/ct_pbb/etc/Hotel_3.webp);}
.amexMR_detail .topBanner.air_1 {background-image: url(/ct_pbb/etc/Flight_1.webp);}
.amexMR_detail .topBanner.air_2 {background-image: url(/ct_pbb/etc/Flight_2.webp);}
.amexMR_detail .topBanner.air_3 {background-image: url(/ct_pbb/etc/Flight_3.webp);}
.amexMR_detail .topBanner.shoppingBenefit_1 {background-image: url(/ct_pbb/etc/shopping_1.webp);}
.amexMR_detail .topBanner.culture_1 {background-image: url(/ct_pbb/etc/culture_1.webp);}
.amexMR_detail .topBanner.culture_3 {background-image: url(/ct_pbb/etc/culture_3.webp);}
.amexMR_detail .topBanner.car_1 {background-image: url(/ct_pbb/etc/traffic_1.webp);}
.amexMR_detail .topBanner.car_2 {background-image: url(/ct_pbb/etc/traffic_2.webp);}

.amexMR_detail .topBanner.hotel {background-image: url(/docfiles/resources/mo/images/com/svg/ico_cul_010.svg);}
.amexMR_detail .topBanner.golf {background-image: url(/docfiles/resources/mo/images/com/svg/ico_spt_004.svg);}
.amexMR_detail .topBanner.coffee {background-image: url(/docfiles/resources/mo/images/com/svg/ico_cul_002.svg);}
.amexMR_detail .topBanner.rest {background-image: url(/docfiles/resources/mo/images/com/svg/ico_spa_029.svg);}
.amexMR_detail .topBanner.air {background-image: url(/docfiles/resources/mo/images/com/svg/ico_veh_001.svg);} /* 2025-06-09 GGU477 추가 */
.amexMR_detail .topBanner.apLounge {background-image: url(/docfiles/resources/mo/images/com/svg/ico_air_004.svg);}
.amexMR_detail .topBanner.apTraffic {background-image: url(/docfiles/resources/mo/images/com/svg/ico_air_005.svg);}
.amexMR_detail .topBanner.valet {background-image: url(/docfiles/resources/mo/images/com/svg/ico_cl_012.svg);}
.amexMR_detail .topBanner.spa {background-image: url(/docfiles/resources/mo/images/com/svg/ico_cul_028.svg);}
.amexMR_detail .topBanner.book {background-image: url(/docfiles/resources/mo/images/com/svg/ico_fin_020.svg);}
.amexMR_detail .topBanner.travelBenefit {background-image: url(/ct_pbb/etc/a_travel.png);}
.amexMR_detail .topBanner.shoppingBenefit {background-image: url(/ct_pbb/etc/a_shopping.png);}
.amexMR_detail .topBanner.lifestyleBenefit {background-image: url(/ct_pbb/etc/a_lifestyle.png);}
.amexMR_detail .topBanner.overseasGolf {background-image: url(/ct_pbb/etc/a_golf.png);}
.amexMR_detail .topBanner.car {background-image: url(/ct_pbb/etc/a_car.png);}
.amexMR_detail .topBanner.japen_hotel {background-image: url(/ct_pbb/etc/ico_japen_hotelSeibu.png); background-size: 182px auto;}
.amexMR_detail .topBanner.japen_Poket {background-image: url(/ct_pbb/etc/ico_japen_finePoket.png); background-size: 199px auto;}
.amexMR_detail .topBanner.japen_transit {background-image: url(/ct_pbb/etc/ico_japen_restTransit.png); background-size: 143px auto;}
/* 2025-06-09 GGU477 culture추가 */
.amexMR_detail .topBanner.culture {background-image: url(/docfiles/resources/mo/images/com/svg/ico_cul_012.svg);} /* museum */
.amexMR_detail .topBanner.culture2 {background-image: url(/docfiles/resources/mo/images/com/svg/ico_cul_005.svg);} /* music */
.amexMR_detail .topBanner.culture3 {background-image: url(/docfiles/resources/mo/images/com/svg/ico_cul_001.svg);} /* movie */
.amexMR_detail .topBanner.cruise {background-image: url(/docfiles/resources/mo/images/com/svg/picto_cruise.svg);} /* cruise */

/* 2025-07-14 Q11855 추가 */
.amexMR_detail .topBanner.coffee {background-image: url(/docfiles/resources/mo/images/com/svg/ico_dining02.svg);}
/* 2025-12-16 GGU477 추가 */
.amexMR_detail .topBanner.vhc {background-image: url(/docfiles/resources/mo/images/com/svg/ico_ve_001.svg);} /* 바우처, 쿠폰 */
.amexMR_detail .topBanner.vhc_air {background-image: url(/docfiles/resources/mo/images/com/svg/ico_air_006.svg);} /* 항공권 바우처 */


.amexMR_detail .topBanner .iconImg {width: 108px; height: 108px; position: absolute; right: 24px; bottom: 24px;}
.amexMR_detail .topBanner .iconImg svg {width: 108px; height: 108px;}
.amexMR_detail .topBanner p {color: rgba(0, 0, 0, 0.64); margin-top: 8px;}

.amexMR_detail .cont_wrap {padding-top: 40px; word-break: keep-all;}
.amexMR_detail .co_bundle {margin-top: 48px;}
.amexMR_detail > .cont_wrap > .sec_in > .co_bundle:first-child {margin-top: 0;}
.amexMR_detail .co_bundle .tit {margin-bottom: 12px;}
.amexMR_detail .co_bundle .tit.line {margin-bottom: 24px; padding: 11px 0; border-bottom: #000 1px solid;}
.amexMR_detail .co_bundle p + .bul_list {margin-top: 4px;}
.amexMR_detail p sup, .amexMR_detail li sup {line-height: 0;}

/* 2025-09-15 Q11817 추가 */
.label_local {display: inline-block; position: relative; min-width: 60px; height: 24px; padding: 2px 10px 2px 24px; border: #000 1px solid; border-radius: 40px; font-size: 14px; font-weight: 700; line-height: 20px; text-align: center;}
.label_local::before {content: ''; display: inline-block; width: 20px; height: 20px; background: url(/ct_pbb/etc/ico_local_blk.png) no-repeat; background-size: 20px; position: absolute; top: 1px; left: 4px;}


/* list */
.amexMR_detail .bul_list > li + li {margin-top: 3px;}
.amexMR_detail .bul_list02 > li {color: rgba(0, 0, 0, 1); padding-left: 8px; margin: 3px 0;}
.amexMR_detail .bul_list02 > li + li {margin-top: 3px;}
.amexMR_detail .bul_list > li::before,
.amexMR_detail .bul_list02 > li::before {background-color: #000;}
.amexMR_detail .bul_list > li > .dash_list {margin-top: 2px;}/* 2023-12-04 GGU282 - 수정 */
.amexMR_detail .bul_list > li > .dash_list > li + li {margin-top: 2px;}/* 2023-12-04 GGU282 - 추가 */
.amexMR_detail .dash_list > li::before,
.amexMR_detail .dash_list02 > li::before {background-color: #000;}
.amexMR_detail .dash_list02.fc_a64 > li::before {background-color: rgba(0, 0, 0, 0.64);}
.amexMR_detail .num_list > li + li {margin-top: 20px;}
.amexMR_detail .num_list > li {font-size: 16px; line-height: 22px; font-weight: 500;}
.amexMR_detail .num_list02 > li {font-size: 14px; line-height: 22px; font-weight: 500; margin: 3px 0;}
.amexMR_detail .notice_bundle {margin-top: 48px;}
.amexMR_detail .notice_bundle > .tit {margin-bottom: 12px;}
.amexMR_detail .notice_bundle > ul + ul {margin-top: 51px; padding-top: 27px; border-top: rgba(0, 0, 0, 0.08) 1px solid;}
.amexMR_detail .notice_bundle > li {margin: 3px 0;}
.amexMR_detail .notice_bundle > li + li {margin-top: 3px;}
.complianceNum_list {margin-top: 51px; padding-top: 27px; border-top: rgba(0, 0, 0, 0.08) 1px solid;}
.complianceNum_list > li {position: relative; padding-left: 8px; font-size: 14px; font-weight: 700; line-height: 22px; color: #000; margin: 3px 0;}
.complianceNum_list > li::before {content: ''; display: inline-block; position: absolute; top: 10px; left: 0; width: 2px; height: 2px; background-color: #000; border-radius: 100%;}
.complianceNum_list > li.no {font-weight: 500;}
/* .complianceNum_list li + li {margin-top: 6px;} */
.star_list > li {position: relative; padding-left: 8px;}
.star_list > li::before {content: '*'; display: inline-block; width: 10px; position: absolute; top: 3px; left: 0;}
.star_list > li + li {margin-top: 5px;}

/* 2024-01-31 Q11139 num_list 추가("숫자+." 형태) */
.amexMR_detail .whtP_num_list { counter-reset:num; margin-top:12px; } 
.amexMR_detail .whtP_num_list > li { position:relative; padding-left: 20px; counter-increment:num; font-weight:500; } 
.amexMR_detail .whtP_num_list > li:before { content:counter(num)"."; display:inline-block; position:absolute; left:0; top:3px; width:20px; height:20px; color:#000; text-align:center; line-height:19px; font-size:16px; font-weight:500; } 
.amexMR_detail .whtP_num_list > li + li { margin-top:4px;} 


/* table */
.amexMR_tbl01 {}
.amexMR_tbl01 thead th {padding: 8px 0; font-weight: 700;}
.amexMR_tbl01 tbody tr:first-child td {padding-top: 16px; border-top: #000 1px solid;}
.amexMR_tbl01 tbody tr:last-child td {padding-bottom: 16px; border-bottom: #000 1px solid;}
.amexMR_tbl01 tbody td {padding: 6px 0; font-weight: 500;}
.amexMR_tbl01 tbody tr td:first-child {padding-right: 12px;}
.amexMR_tbl01.p2 th, .amexMR_tbl01.p2 td {font-size: 14px; line-height: 20px;}

.amexMR_tbl02 thead th {padding: 8px 0; font-weight: 700;}
.amexMR_tbl02 tbody td {padding: 14px 0; font-weight: 400; border-top: rgba(203, 203, 203, 0.48) 1px solid;}
.amexMR_tbl02 tbody td p, .amexMR_tbl02 tbody td li {font-weight: 400;}
.amexMR_tbl02 tbody tr td:first-child {padding-right: 23px;}
.amexMR_tbl02 .star_txt + .star_txt {margin-top: 5px;}


/* accordian */
.box_use01.amexMR_acd {border-top: none; border-bottom: 1px solid rgba(0,0,0,0.08);}
.box_use01.amexMR_acd.on {border-bottom: none}
.box_use01.amexMR_acd + .box_use01.amexMR_acd {margin-top: 0;}
.box_use01.amexMR_acd .btn_tit01 .accodBtn {padding: 15px 35px 15px 0; font-size: 20px; font-weight: 700; line-height: 26px;} /* 2025-05-22 GGU477 pd 수정 */
.box_use01.amexMR_acd .btn_tit01 .accodBtn::before {top: 16px; width: 24px; height: 24px; background: url(/docfiles/resources/mo/images/com/icon/w32/ico_arrowB_down.png) no-repeat 0 0; background-size: 24px 24px;}
.box_use01.amexMR_acd .box_info01 {padding-top: 24px; padding-bottom: 48px; border-top: 1px solid rgba(0,0,0,0.08);}


/* popup */
/* .modal_pop.roundType .modal_container {height: calc(100% - 44px); max-height: calc(100% - 44px);} */
.isApp3 .modal_pop.roundType .modal_container,
.isAppAll .modal_pop.roundType .modal_container,
.modal_pop.roundType .modal_container {height: calc(100% - 92px); max-height: calc(100% - 92px);} /* 2023-11-29 GGU282 - 수정 : app 클래스 추가, 높이 수정(88px→92px) */
.modal_pop.roundType .modal_container .layer_wrap {border-radius: 24px 24px 0 0;}
.modal_pop.roundType .modal_container .layer_wrap .box_content {padding-top: 17px;}
.modal_pop.roundType .modal_container .layer_wrap .bul_list02 > li {color: #000;}
.modal_pop.roundType .modal_container .layer_wrap .bul_list02 > li::before {background-color: rgba(0, 0, 0, 1);}


/* MR 용 blk_num_list 글자 스타일 */
.MRblk_num_list { margin-top:12px;counter-reset: num;}
.MRblk_num_list > li {position: relative;padding-left: 28px; font-size: 16px; font-weight: 500; line-height: 26px; counter-increment: num;} /* 2025-06-13 GGU477 font-size, font-weight 추가 */
.MRblk_num_list > li + li {margin-top: 8px;}
.MRblk_num_list > li:before {position: absolute;top: 3px;left: 0;display: inline-block;width: 20px;height: 20px;line-height: 20px;border-radius: 50%;color: #fff;background: #000;content: counter(num);text-align: center;font-size: 12px;font-weight: 500;}
.MRblk_num_list > li + li {margin-top:8px;}

/* 2025-06-02 GGU477 [APP][기타] Amex 브랜드 혜택 제작(The Centurion Card) */
/* 컨시어지 서비스 안내 > 아이콘 리스트 */
.amexMR_detail .ico_cont_list > li {display: flex; justify-content: space-between; align-items: flex-start; padding-top: 20px;}
.amexMR_detail .ico_cont_list > li:first-child {padding-top: 0;}
.amexMR_detail .ico_cont_list > li .ico {width: 48px;}
.amexMR_detail .ico_cont_list > li .ico img {}
.amexMR_detail .ico_cont_list > li .txt {width: calc(100% - 58px); padding-bottom: 20px; border-bottom: 1px solid #000;}
.amexMR_detail .ico_cont_list > li:last-child .txt {border-bottom: none; padding-bottom: 0;}
.amexMR_detail .ico_cont_list .num_list_smType > li {position: relative;}
.amexMR_detail .ico_cont_list .num_list_smType > li + li {margin-top: 16px;}
.amexMR_detail .ico_cont_list .num_list_smType > li > p {padding-left: 16px;}
.amexMR_detail .ico_cont_list .num_list_smType > li .num {position: absolute; left: 0; top: 0; font-size: 14px;}
/* 컨시어지 서비스 안내 > 플로팅 버튼-아이콘 타입 */
.btn_bottom .btn_area_line .btn60_defaultbg_boldtxt.type_Phone {padding-left: 20px; font-size: 16px; border-radius: 300px; text-align: left; position: relative;}
.btn_bottom .btn_area_line .btn60_defaultbg_boldtxt.type_Phone::after {content: ''; display: inline-block; width: 44px; height: 44px; background: url(/ct_pbb/etc/icon_phone_yellGR.png) no-repeat 0 0; background-size: 44px auto; position: absolute; right: 8px; top: 8px;}

/* 2025-07-11 Q11855 넘버링 추가 */
.blk_num_sp{display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 20px; background-color: #000; color: #fff; font-size: 12px; font-weight: 500; vertical-align: text-bottom;}

/****************************************
                dark mode
****************************************/
@media (prefers-color-scheme: dark) {
    .amexMR_detail .topBanner h3 {color: #000;}
    /* .amexMR_detail .topBanner {background-color: rgba(0, 0, 0, 0.98);}
    .amexMR_detail .topBanner p {color: rgba(255, 255, 255, 0.64);} */

    .amexMR_detail .co_bundle .tit.line {border-bottom-color: rgba(255, 255, 255, 1);}

    .amexMR_detail .bul_list02 > li {color: #fff;}
    .amexMR_detail .bul_list > li::before, .amexMR_detail .bul_list02 > li::before {background-color: #fff;}
    .amexMR_detail .dash_list > li::before, .amexMR_detail .dash_list02 > li::before {background-color: #fff;}
    .amexMR_detail .notice_bundle > ul + ul {border-top-color: rgba(255, 255, 255, 0.08);}
    .complianceNum_list > li {color: #fff;}
    .complianceNum_list > li::before {background-color: #fff;}

    .box_use01.amexMR_acd .btn_tit01 .accodBtn::before {background: url(/docfiles/resources/mo/images/com/icon/w32/ico_arrowB_down_wht.png) no-repeat 0 0; background-size: 24px 24px;}
    .box_use01.amexMR_acd .box_info01 {border-top-color: rgba(255,255,255,0.08);}

    .amexMR_tbl01 tbody tr:first-child td  {border-top-color: rgba(255, 255, 255, 1);}
    .amexMR_tbl01 tbody tr:last-child td {border-bottom-color: rgba(255, 255, 255, 1);}
    .modal_pop.roundType .modal_container .layer_wrap .bul_list02 > li {color: #fff;}
    .modal_pop.roundType .modal_container .layer_wrap .bul_list02 > li::before {background-color: rgba(255, 255, 255, 1);}

    /* 2024-06-20 Q11066 num_list 추가("숫자+." 형태) */
    .amexMR_detail .whtP_num_list > li:before { color:#fff;} 

    /* 2025-06-02 GGU477 - 컨시어지 서비스 안내 > 아이콘 리스트 */
    .amexMR_detail .ico_cont_list > li .ico img svg {fill: #fff;}
    .amexMR_detail .ico_cont_list > li .txt {border-bottom: 1px solid #fff;}

    /* 2025-09-15 Q11817 - 다크모드 아이콘 추가 */
    .label_local {display: inline-block; position: relative; min-width: 60px; height: 24px; padding: 2px 10px 2px 24px; border: #fff 1px solid; border-radius: 40px; font-size: 14px; font-weight: 700; line-height: 20px; text-align: center;}
    .label_local::before {content: ''; display: inline-block; width: 20px; height: 20px; background: url(/ct_pbb/etc/ico_local_wht.png) no-repeat; background-size: 20px; position: absolute; top: 1px; left: 4px;}
}