/*************************************************/
/*             Officiallounge - index            */
/*************************************************/
@charset "utf-8";
@import url('officiallounge_common.css');

body.show_intro {overflow: hidden;}
#wrap {max-width: 768px; margin: 0 auto; padding-top: 64px;}



/*** header ***/
#header.main_header {height: 64px; background: var(--WT);}
#header.main_header > .header_wrap {display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 768px; height: 63px; margin: 0 auto; padding: 0 16px 0 20px;}
#header.main_header .btn_prev {position: relative; display: block; width: 32px; height: 32px; background: url(/officiallounge/images/ico_arrowB_back_w32.png) no-repeat 0 0 / 32px; z-index: 2; transform: translateY(-50%);}
#header.main_header h1.logo {position: relative;}
#header.main_header h1.logo > a {display: block; width: 148px; height: 42px; background: url(/officiallounge/images/logo.svg) no-repeat 0 0 / auto 42px;}
#header.main_header .btns {display: flex; gap: 12px;}
#header.main_header .btns [class^="btn_ico"] {position: relative; display: block; width: 32px; height: 32px;}
#header.main_header .btns .btn_ico_search {background: url(/officiallounge/images/ico_search.svg) no-repeat 0 0 / 32px;}
#header.main_header .btns .btn_ico_basket {background: url(/officiallounge/images/ico_compare.svg) no-repeat 0 0 / 32px;}
#header.main_header .btns .btn_ico_basket .badge {position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center; min-width: 18px; height: 18px; padding: 0 4px; font-size: 11px; font-weight: 700; color: var(--WT_fx); line-height: 13px; text-align: center; background: var(--alert); border-radius: 9px; z-index: 2;}
/* .fixed #header.main_header {border-bottom: 1px solid var(--BK_a12);} */


/*** content ***/
.officiallounge_main {padding-bottom: 0;}
.officiallounge_main .content {padding-top: 40px;}
body.tooltip_open .officiallounge_main .content {overflow-x: hidden;}

/** section **/
.officiallounge_main .section:not(:first-of-type) {margin-top: 48px;}
.officiallounge_main .sect_find, .officiallounge_main .sect_newcard {padding: 0 8px;}

/* 내게 맞는 카드 찾기 */
.sect_find .sect_cont {position: relative;}
.sect_find .finder_wrap {position: relative; height: 326px; border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,0,0.08);}
/* .sect_find .finder_wrap::after {content: ''; position: fixed; top: 72px; left: 0; width: 100%; height: 582px; background: rgba(255,0,0,0.3);}  */
.sect_find .finder_wrap.sticky {padding-top: 80px;}
.sect_find .finder_wrap .finder_head {position: relative; display: block; height: 48px; background: #f2f1ee; border: 1px solid var(--BK); border-radius: 12px 12px 0 0;}
.sect_find .finder_wrap .finder_body {position: relative; display: flex; flex-direction: column; min-height: 246px; border: 1px solid var(--BK); border-top: none; border-radius: 0 0 12px 12px;}
.sect_find .finder_wrap .finder_body > * {position: relative; z-index: 1;}
.sect_find .finder_wrap.sticky .finder_head {position: fixed; top: 72px; left: 8px; width: calc(100% - 16px); max-width: 752px; z-index: 2;} 
.sect_find .finder_wrap.sticky .finder_head > * {z-index: 2;}
.sect_find .finder_wrap.sticky .blank {position: fixed; top: 64px; left: 8px; width: calc(100% - 16px); max-width: 752px; height: 30px; background: var(--WT); z-index: 2;}
.sect_find .finder_wrap.sticky .blank::before {content: ''; position: absolute; top: 0; left: -8px; width: 8px; height: 100%; background: linear-gradient(180deg, rgba(255,255,255,1) 40%, rgba(255,255,255,0));}
.sect_find .finder_wrap.sticky .blank::after {content: ''; position: absolute; top: 0; right: -8px; width: 8px; height: 100%; background: linear-gradient(180deg, rgba(255,255,255,1) 40%, rgba(255,255,255,0));}
.isApp3 .sect_find .finder_wrap.sticky {padding-top: 0; margin-top: -30px;}
.isApp3 .sect_find .finder_wrap.sticky .finder_head {position: sticky; top: 120px; width: 100%;}
.isApp3 .sect_find .finder_wrap.sticky .blank {position: sticky; top: 112px; width: 100%;}
.sect_find .finder_wrap .finder_steps {position: relative; display: flex; justify-content: center; align-items: center; height: 48px; border-bottom: 1px solid var(--BK); z-index: 1;}
.sect_find .finder_wrap .finder_head .finder_steps {border: none;}
.sect_find .finder_wrap .finder_steps > li {position: relative;}
.sect_find .finder_wrap .finder_steps > li + li {padding-left: 16px;}
.sect_find .finder_wrap .finder_steps > li + li::before {content: ''; position: absolute; top: 50%; left: 0; display: block; width: 16px; height: 16px; background: url(/officiallounge/images/ico_arrowB_forward_bka20.png) no-repeat 0 0/16px; transform: translateY(-50%);}
.sect_find .finder_wrap .finder_steps > li > a {display: flex; align-items: center; padding: 12px;}
.sect_find .finder_wrap .finder_steps > li.current > a {padding: 6px 12px;}
.sect_find .finder_wrap .finder_steps > li a span {display: inline-block; font-family: -apple-system, BlinkMacSystemFont, AppleSDGothicNeo-regular,'Spoqa Han Sans Neo', 'Noto Sans', Roboto, 'Malgun Gothic', '맑은 고딕', '돋움', Dotum, Sans-serif; font-weight: 700 !important; line-height: 20px; color: var(--BK_48);}
.sect_find .finder_wrap .finder_steps > li.act a:not(.disabled) span,
.sect_find .finder_wrap.refind .finder_steps > li.act a.disabled span {color: var(--BK);}
.sect_find .finder_wrap .finder_steps > li span.step {display: none; line-height: 32px;}
.sect_find .finder_wrap .finder_steps > li.current span.step {display: inline-block;}
.sect_find .finder_wrap .finder_steps > li.current span.num {margin-top: 0; margin-left: 6px; font-size: 24px; line-height: 32px;}
.iphone .sect_find .finder_wrap .finder_steps > li.current span.num,
.safari .sect_find .finder_wrap .finder_steps > li.current span.num {margin-top: 1px;} /* ios 및 safari 대응 */

.sect_find .finder_wrap .finder_head.h80 {height: 80px; padding: 0 16px 10px 16px;}
.sect_find .finder_wrap .finder_head.h80 .finder_steps > li {height: 48px;}
.sect_find .finder_wrap .finder_head.h80 .finder_steps > li + li {padding-left: 8px;}
.sect_find .finder_wrap .finder_head.h80 .finder_steps > li + li::before {left: -4px;}
.sect_find .finder_wrap .finder_head.h80 .finder_steps > li > a {position: relative; display: block; width: 48px !important; height: 48px !important; padding: 8px; text-align: center;}
.sect_find .finder_wrap .finder_head.h80 .finder_steps > li > a span {display: block; width: 32px; height: 32px; line-height: 32px;}
.sect_find .finder_wrap .finder_head.h80 .finder_steps > li.current > a {width: 32px;}
.sect_find .finder_wrap .finder_head.h80 .finder_steps > li.current > a span {color: var(--WT); background: var(--BK); border-radius: 8px;}
.sect_find .finder_wrap .finder_head.h80 .cont_tit {position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 8px; margin-top: -2px; z-index: 1;}
.sect_find .finder_wrap .finder_head.h80 .cont_tit [class^="p1"] {margin-left: 0;}

.sect_find .finder_wrap .find_condition {position: relative; height: 180px; background: var(--WT);}
.sect_find .finder_wrap.result_wrap .find_condition {border-bottom: 1px solid var(--BK_a12);}
/* .sect_find .finder_wrap.refind.sticky .find_condition {position: sticky; top: 152px; z-index: 2;} */
/* .sect_find.full .finder_wrap.refind .find_condition {position: sticky; z-index: 2;} */

/* .sect_find .finder_wrap .swiper-container {height: calc(100% - 108px);} */
.sect_find .finder_wrap .swiper-slide {display: flex; flex-direction: column;}
.sect_find .finder_wrap .swiper-slide .step_cont {flex: 1; margin: 0; padding: 0 12px;}
.sect_find .finder_wrap .cont_tit {display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px;}
.sect_find .finder_wrap.result_wrap:not(.refind) .cont_tit {align-items: flex-start;}
.sect_find .finder_wrap .cont_tit [class^="p1"] {margin-left: 8px;}
.sect_find .finder_wrap .cont_tit [class^="p3"] {margin-bottom: 1px;}
.sect_find .finder_wrap .cont_tit .w100p {flex: none; width: 100%;}
.sect_find .finder_wrap .cont_tit .guide_txt {color: var(--BK_a64);}
.sect_find .finder_wrap.result_wrap .cont_tit .guide_txt {color: var(--BK);}
.sect_find .finder_wrap.result_wrap .cont_tit .guide_txt .box {display: inline-flex; align-items: center; height: 19px; padding: 0 4px; font-size: 12px; font-weight: 700; line-height: 16px; color: var(--WT); background: var(--BK); border-radius: 4px;}
.sect_find .finder_wrap .cont_tit .guide_error {color: var(--alert);}
.sect_find .finder_wrap .chk_wrap,
.sect_find .finder_wrap .select_wrap {display: flex; flex-wrap: wrap; gap: 8px;}
.sect_find .finder_wrap .chk_wrap.chk_business_wrap {gap: 4px;}
.sect_find .finder_wrap .chk_wrap .cd_chk,
.sect_find .finder_wrap .select_wrap .cd_slt {position: relative;}
.sect_find .finder_wrap .chk_wrap .chk_label {position: relative; display: block; padding: 7px 9px; color: var(--BK_a64); text-align: center; white-space: nowrap; border: 1px solid var(--BK_a8); border-radius: 8px;}
.sect_find .finder_wrap .chk_wrap input:checked + .chk_label {padding: 6px 8px; font-weight: 700; color: var(--BK); border: 2px solid var(--BK);}
.sect_find .finder_wrap .chk_wrap.chk_business_wrap {margin: 12px 0;}
.sect_find .finder_wrap .chk_wrap.chk_business_wrap .cd_chk {width: calc(25% - 3px); height: 36px;}
.sect_find .finder_wrap .chk_wrap.chk_business_wrap .chk_label {font-size: 13px; line-height: 18px; padding: 8px 0;}
.sect_find .finder_wrap .chk_wrap.chk_business_wrap input:checked + .chk_label {padding: 7px 0;}
.sect_find .finder_wrap .chk_wrap.chk_benefit_wrap {margin: 22px 0;}
.sect_find .finder_wrap .chk_wrap.chk_benefit_wrap .cd_chk {width: calc(50% - 5px);}
.sect_find .finder_wrap .chk_wrap.chk_benefit_wrap .chk_label {display: flex; justify-content: center; align-items: center; padding: 11px; height: 100%;}
.sect_find .finder_wrap .chk_wrap.chk_benefit_wrap input:checked + .chk_label {padding: 10px;}
.sect_find .finder_wrap .chk_wrap.chk_benefit_wrap .chk_label > div {display: flex; align-items: center;}
.sect_find .finder_wrap .chk_wrap.chk_benefit_wrap .chk_label .ico {display: block; width: 40px; height: 40px;}
.sect_find .finder_wrap .chk_wrap.chk_benefit_wrap .chk_label .ico.ico_save {background: url(/officiallounge/images/ico_chk_save_bka48_w40.svg) no-repeat 0 0/40px;}
.sect_find .finder_wrap .chk_wrap.chk_benefit_wrap .chk_label .ico.ico_discount {background: url(/officiallounge/images/ico_chk_discount_bka48_w40.svg) no-repeat 0 0/40px;}
.sect_find .finder_wrap .chk_wrap.chk_benefit_wrap .chk_label .ico.ico_mileage {background: url(/officiallounge/images/ico_chk_mileage_bka48_w40.svg) no-repeat 0 0/40px;}
.sect_find .finder_wrap .chk_wrap.chk_benefit_wrap input:checked + .chk_label .ico.ico_save {background: url(/officiallounge/images/ico_chk_save_w40.svg) no-repeat 0 0/40px;}
.sect_find .finder_wrap .chk_wrap.chk_benefit_wrap input:checked + .chk_label .ico.ico_discount {background: url(/officiallounge/images/ico_chk_discount_w40.svg) no-repeat 0 0/40px;}
.sect_find .finder_wrap .chk_wrap.chk_benefit_wrap input:checked + .chk_label .ico.ico_mileage {background: url(/officiallounge/images/ico_chk_mileage_w40.svg) no-repeat 0 0/40px;}
.sect_find .finder_wrap .chk_wrap.chk_benefit_wrap input:checked + .chk_label span {font-weight: 700; color: var(--BK);}
.sect_find .finder_wrap .chk_wrap.chk_fee_wrap {margin: 22px 0; justify-content: space-around;}
.sect_find .finder_wrap .chk_wrap.chk_fee_wrap .cd_chk {flex: 1; min-width: calc(32.6% - 5px);}
.sect_find .finder_wrap .chk_wrap.chk_fee_wrap .chk_label {display: flex; justify-content: center; align-items: center; padding: 10px; height: 64px;}
.sect_find .finder_wrap .select_wrap {margin: 22px 0;}
.sect_find .finder_wrap .select_wrap .cd_slt.col2 {flex: 1; min-width: calc(50% - 4px);}
.sect_find .finder_wrap .select_wrap .cd_slt.col3 {flex: 1; min-width: calc(32.6% - 4px);}
.sect_find .finder_wrap .ui-select .select-btn,
.sect_find .finder_wrap .ui-select .select-btn.on {border-color: var(--BK_a12);}
.sect_find .finder_wrap .ui-select .select-btn.on > span {font-weight: 700;}
.sect_find .finder_wrap .finder_btm {display: flex; justify-content: space-between; align-items: center; height: 60px; padding: 8px 12px 12px 16px;}
.sect_find .finder_wrap .finder_btm .area_reset {flex: 1;}
.sect_find .finder_wrap .finder_btm .area_next {display: inline-flex; align-items: center;}
.sect_find .finder_wrap .finder_btm .btn_reset {display: inline-flex;}
.sect_find .finder_wrap .finder_btm .btn_reset > span {position: relative; padding-left: 20px;}
.sect_find .finder_wrap .finder_btm .btn_reset > span::before {content: ''; position: absolute; top: 50%; left: 0; display: block; width: 20px; height: 20px; background: url(/officiallounge/images/ico_reset.svg) no-repeat 0 0/20px; transform: translateY(-50%);}
.sect_find .finder_wrap .finder_btm .btn_next {display: flex; align-items: center; padding: 10px 10px 10px 20px; font-size: 14px; font-weight: 700; line-height: 20px; background: var(--BK);}
.sect_find .finder_wrap .finder_btm .btn_next > span {position: relative; padding-right: 24px; color: var(--WT);}
.sect_find .finder_wrap .finder_btm .btn_next > span::before {content: ''; position: absolute; top: 50%; right: 0; display: block; width: 16px; height: 16px; background: url(/officiallounge/images/ico_arrowB_forward_wht.png) no-repeat 0 0/16px; transform: translateY(-50%);}
.sect_find .finder_wrap .finder_btm .btn_next.disabled {background-color: rgba(0,0,0,0.08) !important;}
.sect_find .finder_wrap .finder_btm .btn_next.disabled > span {color: var(--BK_40) !important;}
.sect_find .finder_wrap .finder_btm .btn_next.disabled > span::before {background-image: url(/officiallounge/images/ico_arrowB_forward_bk40.png);}
.sect_find .finder_wrap .finder_btm .btn_skip {display: flex; align-items: center;}
.sect_find .finder_wrap .finder_btm .btn_skip > span {font-weight: 700; color: var(--BK);}
.sect_find .finder_wrap .finder_btm .btn_find {margin-left: 20px; padding: 10px 20px; line-height: 20px; background: var(--BK);}
.sect_find .finder_wrap .finder_btm .btn_find > span {color: var(--WT);}

.sect_find .finder_wrap .finder_head.h80 .cont_tit [class^="p3"] {margin-top: 6px;}
.sect_find .finder_wrap.result_wrap:not(.refind) .finder_head.h80 .cont_tit [class^="p3"] {display: flex; align-items: center; gap: 4px; margin-top: 0;}
.sect_find .finder_wrap .finder_head.h80 + .swiper-container {height: calc(100% - 140px);}
.sect_find .finder_wrap .finder_head.h80 + .swiper-container .swiper-slide .step_cont {padding: 12px;}
.sect_find .finder_wrap .finder_head.h80 + .swiper-container .condition_wrap {margin-top: 0;}
.sect_find .finder_wrap .finder_head.h80 + .swiper-container .chk_wrap.chk_benefit_wrap,
.sect_find .finder_wrap .finder_head.h80 + .swiper-container .chk_wrap.chk_fee_wrap,
.sect_find .finder_wrap .finder_head.h80 + .swiper-container .select_wrap {margin: 10px 0;}


.sect_find .finder_wrap.result_wrap {height: auto; min-height: 326px;}
.sect_find .finder_wrap.result_wrap .find_result.nodata .result_cont {display: flex; flex-direction: column; align-items: center; padding: 64px 0;}
.sect_find .finder_wrap.result_wrap .find_result.nodata .btn_refind {padding: 9px 20px 9px 14px; background: var(--BK);}
.sect_find .finder_wrap.result_wrap .find_result.nodata .btn_refind > span {position: relative; padding-left: 24px; color: var(--WT);}
.sect_find .finder_wrap.result_wrap .find_result.nodata .btn_refind > span::before {content: ''; position: absolute; top: 50%; left: 0; display: block; width: 20px; height: 20px; background: url(/officiallounge/images/ico_reset_wht.svg) no-repeat 0 0/20px; transform: translateY(-50%);}
.sect_find .finder_wrap.result_wrap .find_result:not(.nodata) {display: flex; flex-direction: column; flex: 1;}
.sect_find .finder_wrap.result_wrap .find_result:not(.nodata) .result_cont {flex: 1; position: relative; padding: 16px 20px 0;}
.sect_find .finder_wrap.result_wrap .result_tit > .result_tit2 {display: flex; justify-content: space-between; align-items: center;}
.sect_find .finder_wrap.result_wrap .result_tit.block {position: relative; display: block;}
.sect_find .finder_wrap.result_wrap .result_tit .p1_b_1ln {position: relative;}
.sect_find .finder_wrap.result_wrap.refind .result_tit .p1_b_1ln {font-size: 18px; line-height: 22px;}
.sect_find .finder_wrap.result_wrap .result_tit .dpfx {position: relative; display: flex; align-items: center; gap: 8px;}
.sect_find .finder_wrap.result_wrap .result_tit .wrap_tooltip {margin-left: 0;}
.sect_find .finder_wrap.result_wrap .result_tit > .result_tit2 .p1_b_1ln + .dpfx {align-self: flex-start;}
.sect_find .finder_wrap.result_wrap .result_tit .wrap_tooltip > .btn_tooltip {position: relative; padding-top: 2px;}
.sect_find .finder_wrap.result_wrap .result_tit .box_tooltip {left: auto; right: -4px; width: 292px; margin-top: 6px;}
/* .sect_find .finder_wrap.result_wrap .result_tit .btn_reset {display: inline-flex; align-self: flex-start; margin-top: 3px;}
.sect_find .finder_wrap.result_wrap.refind .result_tit .btn_reset {display: none;} */
.sect_find .finder_wrap.result_wrap .result_tit .btn_reset > span {position: relative; padding-left: 20px;}
.sect_find .finder_wrap.result_wrap .result_tit .btn_reset > span::before {content: ''; position: absolute; top: 50%; left: 0; display: block; width: 20px; height: 20px; background: url(/officiallounge/images/ico_reset.svg) no-repeat 0 0/20px; transform: translateY(-50%);}
.sect_find .finder_wrap.result_wrap .ui-select.select_type2 .select-btn {width: auto; height: 24px; padding: 3px 4px 3px 10px; border: 1px solid var(--BK_a12); border-radius: 14px;}
.sect_find .finder_wrap.result_wrap .ui-select.select_type2 .select-btn > span {font-size: 12px; line-height: 16px; color: var(--BK_a64);}
.sect_find .finder_wrap.result_wrap .ui-select.select_type2 .select-btn.on > span {font-weight: 500; color: var(--BK_a64);}
/* .sect_find .finder_wrap.result_wrap .result_cont + .box_btn {padding: 4px 0 0;} */
.sect_find .finder_wrap.result_wrap .result_cont + .box_btn {min-height: 20px;}
.sect_find .finder_wrap.result_wrap .result_cont + .box_btn .box {position: relative; display: block; width: 100%;}
.sect_find .finder_wrap.result_wrap .result_cont + .box_btn .btn_moreview {min-width: 180px; height: 48px; margin: 4px auto 8px; padding: 13px 24px; background: transparent;}
.sect_find .finder_wrap.result_wrap .btn_moreview > span {position: relative; padding-right: 16px; color: var(--BK);}
.sect_find .finder_wrap.result_wrap .btn_moreview > span::before {content: ''; position: absolute; top: 50%; right: 0; display: block; width: 16px; height: 16px; background: url(/officiallounge/images/ico_arrowB_down.png) no-repeat 0 0/16px; transform: translateY(-50%);}
.sect_find .finder_wrap.result_wrap .result_cont + .box_btn .btn_reset {position: absolute; top: 50%; right: 20px; display: flex; align-items: center; height: 20px; margin-top: -2px; background: transparent; transform: translateY(-50%);}
/* .sect_find .finder_wrap.result_wrap.refind .result_cont + .box_btn .btn_reset {display: none;} */
.sect_find .finder_wrap.result_wrap .result_cont + .box_btn .btn_reset > span {position: relative; padding-left: 20px;}
.sect_find .finder_wrap.result_wrap .result_cont + .box_btn .btn_reset > span::before {content: ''; position: absolute; top: 50%; left: 0; display: block; width: 20px; height: 20px; background: url(/officiallounge/images/ico_reset.svg) no-repeat 0 0/20px; transform: translateY(-50%);}
.sect_find .finder_wrap.result_wrap .result_cont + .box_btn .btn_gotop {width: 100%; height: 48px; margin: 4px 0 8px; padding: 13px 24px; background: transparent;}
.sect_find .finder_wrap.result_wrap .btn_gotop > span {position: relative; padding-right: 16px; color: var(--BK);}
.sect_find .finder_wrap.result_wrap .btn_gotop > span::before {content: ''; position: absolute; top: 50%; right: 0; display: block; width: 16px; height: 16px; background: url(/officiallounge/images/ico_go_top.svg) no-repeat 0 0/16px; transform: translateY(-50%);}
.sect_find .finder_wrap.result_wrap .box_btn .btn_moreview[style*="display: none"] + .btn_gotop[style*="display: none"] + .btn_reset {position: relative; top: 0; display: inline-flex; justify-align: flex-end; align-items: center; width: 60px; height: 48px; margin: 4px 0 8px calc(100% - 60px); transform: translateY(0);}


.sect_find .finder_wrap.result_wrap.nodata .finder_head.h80 + .result_cont {height: calc(100% - 80px);}
.sect_find .finder_wrap.result_wrap:not(.nodata) .finder_head.h80 + .result_cont {max-height: 500px; padding: 16px 20px 20px; overflow-y: auto;}
.sect_find .finder_wrap.result_wrap .finder_head.h80 + .result_cont + .box_btn {margin-top: -20px; padding: 4px 0 8px;}

.sect_find .pop_layer_result {position: fixed; left: 0; display: none; background: var(--WT); border: 1px solid var(--BK); overflow: hidden; z-index: 900;}
.sect_find .pop_layer_result:not(.nodata) {left: -1px; bottom: -1px; width: calc(100vw + 2px); max-width: 768px; height: calc(100% - 75px); border-radius: 24px 24px 0 0; transform: translate(0, 100%);}
.sect_find .pop_layer_result:not(.nodata).transition {transition: 0.25s 0.25s ease-in-out;}
.sect_find .pop_layer_result:not(.nodata).on {transform: translate(0, 0);}
.sect_find .pop_layer_result .pop_container {display: flex; flex-direction: column; width: 100%; height: 100%;}
.sect_find .pop_layer_result .pop_container .pop_header {display: flex;}
.sect_find .pop_layer_result.fixed .pop_container .pop_header {border-bottom: 1px solid #e0e0e0;}
.sect_find .pop_layer_result .pop_header .pop_title {flex: 1; padding: 19px 20px 24px;}
.sect_find .pop_layer_result.fixed .pop_header .pop_title {flex: 1; padding: 19px 20px 16px;}
.sect_find .pop_layer_result .pop_header .pop_btn {padding: 16px;}
.sect_find .pop_layer_result .pop_header .btn_popClose {display: block; width: 32px; height: 32px; background: var(--BK_8) url(/officiallounge/images/ico_closeB.svg) no-repeat 50% 50%/28px; border-radius: 50%;}
.sect_find .pop_layer_result .pop_body {flex: 1; padding: 0 20px 20px; overflow-y: auto;}
.sect_find .pop_layer_result .pop_body.pb100 {padding-bottom: 100px;}
.sect_find .pop_layer_result .pop_body .btn_moreview {display: inline-block; padding: 13px 24px; background: transparent;}
.sect_find .pop_layer_result .pop_body .btn_moreview > span {position: relative; padding-right: 16px; color: var(--BK);}
.sect_find .pop_layer_result .pop_body .btn_moreview > span::before {content: ''; position: absolute; top: 50%; right: 0; display: block; width: 16px; height: 16px; background: url(/officiallounge/images/ico_arrowB_down.png) no-repeat 0 0/16px; transform: translateY(-50%);}

.sect_find .pop_layer_result.nodata {position: absolute; top: 0; width: 100%; height: 326px; border-radius: 12px;}
.sect_find .pop_layer_result.nodata.on {display: block;}
.sect_find .pop_layer_result.nodata .steps {display: flex; justify-content: center; align-items: center; height: 48px; border-bottom: 1px solid var(--BK_a12);}
.sect_find .pop_layer_result.nodata .steps > li {position: relative;}
.sect_find .pop_layer_result.nodata .steps > li + li {padding-left: 16px;}
.sect_find .pop_layer_result.nodata .steps > li + li::before {content: ''; position: absolute; top: 50%; left: 0; display: block; width: 16px; height: 16px; background: url(/officiallounge/images/ico_arrowB_forward_bka20.png) no-repeat 0 0/16px; opacity: 0.4; transform: translateY(-50%);}
.sect_find .pop_layer_result.nodata .steps > li > div {display: flex; align-items: center; padding: 12px;}
.sect_find .pop_layer_result.nodata .steps > li.current > div {padding: 7px 12px 8px;}
.sect_find .pop_layer_result.nodata .steps > li span {display: inline-block; font-family: -apple-system, BlinkMacSystemFont, AppleSDGothicNeo-regular,'Spoqa Han Sans Neo', 'Noto Sans', Roboto, 'Malgun Gothic', '맑은 고딕', '돋움', Dotum, Sans-serif; font-weight: 700 !important; line-height: 20px; color: var(--BK_a12);}
.sect_find .pop_layer_result.nodata .steps > li span.step {display: none;}
.sect_find .pop_layer_result.nodata .steps > li.current span.step {display: inline-block; line-height: 26px;}
.sect_find .pop_layer_result.nodata .steps > li.current span.num {margin-top: 0; margin-left: 6px; font-size: 24px; line-height: 32px;}
.iphone.safari .sect_find .pop_layer_result.nodata .steps > li.current span.num {margin-top: 1px;} /* ios safari 대응 */
.sect_find .pop_layer_result.nodata .result_cont {display: flex; flex-direction: column; justify-content: center; align-items: center; height: calc(100% - 48px); padding-bottom: 24px;}
.sect_find .pop_layer_result.nodata .btn_refind {padding: 9px 20px 9px 14px;}
.sect_find .pop_layer_result.nodata .btn_refind > span {position: relative; padding-left: 24px;}
.sect_find .pop_layer_result.nodata .btn_refind > span::before {content: ''; position: absolute; top: 50%; left: 0; display: block; width: 20px; height: 20px; background: url(/officiallounge/images/ico_reset_wht.svg) no-repeat 0 0/20px; transform: translateY(-50%);}
.sect_find .pop_layer_result .pop_title .wrap_tooltip {position: relative; margin-left: 5px; z-index: 2; transform: translateY(-2px);}
.sect_find .pop_layer_result .pop_title .box_tooltip {margin-top: 6px; max-width: 728px;}

/* 인기 차트 */
.sect_chart .chart_swiper {padding: 0 8px; z-index: 2;}
.sect_chart .slide_box {position: relative; padding: 0 0 12px; border: 1px solid var(--BK_a12); border-radius: 12px; overflow: hidden;}
.sect_chart .chart_swiper .swiper-slide-prev .slide_box {margin-right: 2px;}
.sect_chart .slide_box > .box_tit {position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 12px;}
.sect_chart .slide_box > .box_tit .btn_toggle {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: transparent; z-index: 0;}
.sect_chart .slide_box > .box_tit .tit {position: static; flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; z-index: 2;}
.sect_chart .slide_box > .box_tit .symbol {position: static; display: block; width: 28px; height: 28px; z-index: 2;}
.sect_chart .slide_box > .box_tit .symbol + .p1_b_1ln {margin-top: 2px;}
.sect_chart .slide_box > .box_tit > [class^="p3"] {color: var(--BK);}
.sect_chart .slide_box > .box_tit .wrap_tooltip {position: static;}
.sect_chart .slide_box > .box_tit .bul_arrow {display: block; width: 20px; height: 20px; background:url(/officiallounge/images/ico_arrowB_down_w20.png) no-repeat 0 0/20px; transform: rotate(0);}
.sect_chart .slide_box.full {height: auto;}
.sect_chart .slide_box.full > .box_tit .bul_arrow {transform: rotate(180deg);}
.sect_chart .slide_box .box_cont {position: relative; padding: 0 12px;}
.sect_chart .slide_box .chart_list {position: relative; z-index: 0;}
.sect_chart .slide_box .chart_list > li {padding: 2px 0;}
.sect_chart .slide_box .chart_list > li > a {display: flex; align-items: center; gap: 12px; padding: 6px 0;}
.sect_chart .slide_box .chart_list .num {display: block; width: 20px; height: 26px; text-align: center;}
.sect_chart .slide_box .chart_list .card {width: 56px;}
.sect_chart .slide_box .chart_list .card.card_h {width: 38px;}
.sect_chart .slide_box .chart_list .card_info {flex: 1;}
.sect_chart .slide_box .more_rank {position: relative; display: none; z-index: 0;}
.sect_chart .slide_box .chart_descript {display: flex; justify-content: center; margin-top: 8px; min-height: 32px;}
.sect_chart .slide_box .chart_descript .desc {margin-top: 4px; font-size: 11px; font-weight: 500; line-height: 14px; text-align: center; color: var(--BK_a48);}
.sect_chart .chart_swiper.tooltip_open,
.sect_chart .chart_swiper.tooltip_open .slide_box {overflow: visible;}
body.tooltip_open {overflow-x: hidden;}
.sect_chart .chart_swiper.tooltip_open .slide_box > .box_tit::after,
.sect_chart .chart_swiper.tooltip_open .slide_box > .box_cont::after {content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: transparent; z-index: 1;} 
[class^="btn_tooltip"]:focus + .box_tooltip, 
[class^="btn_tooltip"]:hover + .box_tooltip {display: none;}


/* 신규 카드 소개 */
.sect_newcard .sect_cont {margin-top: 16px;}
.sect_newcard .introduce_list {display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px; width: 100%;}
.sect_newcard .introduce_list li {display: flex; gap: 8px; width: 100%;}
.sect_newcard .introduce_list a {display: block; position: relative; width: 50%; height: auto; min-height: 218px; aspect-ratio: 1/1.245; border-radius: 12px; overflow: hidden;}
.sect_newcard .introduce_list .vod_tit {position: absolute; bottom: 0; left: 0; display: flex; align-items: flex-end; width: 100%; height: 100px; padding: 16px; color: var(--WT_fx); text-shadow: 0 0 4px rgba(0,0,0,0.4); background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); z-index: 2;}
.sect_newcard .introduce_list .thumb {position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); z-index: 1;}
.sect_newcard .introduce_list .thumb > img {width: auto; min-width: 100%; height: 100%;}
.sect_newcard .introduce_list video {position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); z-index: 0;}
.sect_newcard .box_btn.introduce_more > a {display: flex; justify-content: center; align-items: center; width: 100%; height: 48px;}
.sect_newcard .box_btn.introduce_more [class^="textbico"][class*="_small"][class*="_down"] {position: relative; background: transparent;}
.sect_newcard .box_btn.introduce_more [class^="textbico"][class*="_small"][class*="_down"]::before {content: ''; position: absolute; top: 50%; right: 0; display: block; width: 16px; height: 16px; background: url(/officiallounge/images/ico_arrowB_down.png) no-repeat 0 0/16px; transform: translateY(-50%);}
.modal_pop.fullsize_vod {overflow: hidden;}
.modal_pop.fullsize_vod .modal_container {left: 100%; animation: animateright 0.25s forwards;}
.modal_pop.fullsize_vod .layer_wrap {background: #333;}
.modal_pop.fullsize_vod .layer_head {position: absolute; top: 0; left: 0; display: flex; gap: 12px; width: 100%; height: 48px; padding: 8px 12px; background: transparent; z-index: 99;}
.modal_pop.fullsize_vod .layer_head a.close {display: block; position: relative; width: 32px; height: 32px; background: url(/officiallounge/images/ico_arrowB_back_w32.png) no-repeat 0 0 / 32px; z-index: 1;}
.modal_pop.fullsize_vod .layer_body {overflow: hidden; z-index: 0;}
.modal_pop.fullsize_vod .layer_body .box_content {height: 100%;}
.modal_pop.fullsize_vod .card_info {position: absolute; bottom: 0; left: 0; z-index: 9;}
.modal_pop.fullsize_vod .video {display: block; width: 100%; height: 100%; object-fit: contain; line-height: 0; background: #fff;}
.isApp3 .modal-open #wrap {position: relative; z-index: 1000;}
.isApp3 .modal_pop.fullsize_vod {top: 0; height: 100dvh;}
.isApp3 .modal_pop.fullsize_vod .modal_container {height: 100dvh; max-height: unset; min-height: 100%;}
.isApp3 .modal_pop.fullsize_vod .video {height: 100vh;}
/* 2025-12-04 Q11972 추가 : 팝업 영상 클릭시 시작/일시정지 */
.modal_pop.fullsize_vod .controls_area {display: none; position: absolute; left:0px; right: 0px; bottom: 0px;}
.modal_pop.fullsize_vod .controls_area .controls_in {background: linear-gradient(0deg, rgba(0,0,0,0.6), transparent); display:flex; align-items: center; gap: 10px; padding: 10px;}
.modal_pop.fullsize_vod .controls_area .ctrs_btn {position: fixed; top:50%; left:50%; width: 64px; height: 64px; background: url(/officiallounge/images/img_play.png) no-repeat 0 0/64px 64px; transform: translate(-50%, -50%); pointer-events: none;}
.isApp3 .modal_pop.fullsize_vod .controls_area .ctrs_btn {top: 50vh;}
.modal_pop.fullsize_vod .controls_area .ctrs_btn.pause {background-image: url(/officiallounge/images/img_pause.png);}
.modal_pop.fullsize_vod .controls_area .ctrs_prog {display:flex; gap: 5px; align-items: center; justify-content: center; width: 100%;}
.modal_pop.fullsize_vod .controls_area .ctrs_prog .prog_area {position: relative; width: 100%; height: 6px; background: #ccc; border-radius: 10px;}
.modal_pop.fullsize_vod .controls_area .ctrs_prog .prog_bar {position: absolute; left: -1px; top: 0; height: 100%; background: #fff; border-radius: 10px;}

/* 퍼블 확인용 */
.modal_pop.fullsize_vod .layer_head [class^='of-'] {margin: 0 4px; padding: 6px 12px; border-radius: 8px;}

@media (min-width: 768px) {
    .sect_find .finder_wrap.sticky .finder_head {left: 50%; transform: translateX(-50%);} 
    .sect_find .finder_wrap.sticky .blank {left: 50%; transform: translateX(-50%);}
    .sect_find .finder_wrap.sticky .blank::before {left: -70px; width: 70px;}
    .sect_find .finder_wrap.sticky .blank::after {right: -70px; width: 70px;}

    .sect_find .pop_layer_result:not(.nodata) {left: 50%; transform: translate(-50%, 100%);}
    .sect_find .pop_layer_result:not(.nodata).on {transform: translate(-50%, 0);}
    .sect_find .pop_layer_result .pop_title .box_tooltip {left: -157px !important; width: 728px !important;}
    .sect_find .pop_layer_result .pop_title .box_tooltip > .bullet {left: 200px !important;}
    .modal_pop.fullsize_vod {left: 50%; max-width: 768px; transform: translateX(-50%);}
}

@media (max-width: 340px) {
    .sect_find .finder_wrap .select_wrap .cd_slt:nth-of-type(4) {
        min-width: calc(45% - 4px);  
        max-width: calc(45% - 4px);  
    }
    .sect_find .finder_wrap .finder_head.h80 .cont_tit {margin-left: -16px; margin-right: -16px; padding: 0 10px;}
    .sect_find .finder_wrap .finder_head.h80 .cont_tit > * {letter-spacing: -1px;}
    .sect_find .finder_wrap.result_wrap .result_tit .dpfx .p1_b_1ln {max-width: 115px; word-break: keep-all;}
    .sect_chart .slide_box > .box_tit .symbol + .p1_b_1ln {width: calc(100% - 50px);}
}

@keyframes animateright {
    from {
        left:100%;
        /* opacity:0; */
    }
    to {
        left:0;
        /* opacity:1; */
    }
}

/*** footer ***/
#footer {margin: 16px 24px 0; padding-bottom: 80px; border-top: 1px solid var(--BK);}
.isApp3 #footer {margin: 48px 24px 0; border: none;}
#footer .box_banner_wrap {display: none;}
#footer .box_warning {margin-top: 20px;}
#footer .box_warning a {position: relative; display: block; min-height: 64px; padding-right: 32px;}
#footer .box_warning .desc {font-size: 12px; line-height: 18px;}
#footer .footer_customer {margin: 20px 0 0; min-height: 67px;}
#footer .footer_customer ul {display: flex; flex-wrap: wrap;}
#footer .footer_customer ul li {width: 50%; margin-top: 4px;}
#footer .footer_customer ul li strong {font-weight: 700;}
#footer .footer_customer ul li strong + span {margin-left: 8px;}  
#footer .footer_address {margin: 20px 0 0;}         



/*** 다크모드 ***/
@media (prefers-color-scheme: dark) {

    /*** header ***/
    #header.main_header {background: #333;}
    #header.main_header .btn_prev {background: url(/officiallounge/images/ico_arrowB_back_wht_w32.png) no-repeat 0 0 / 32px;}
    #header.main_header h1.logo > a {background: url(/officiallounge/images/logo_wht.svg) no-repeat 0 0 / auto 42px;}
    #header.main_header .btns .btn_ico_search {background: url(/officiallounge/images/ico_search_wht.svg) no-repeat 0 0 / 32px;}
    #header.main_header .btns .btn_ico_basket {background: url(/officiallounge/images/ico_compare_wht.svg) no-repeat 0 0 / 32px;}
    

    /*** content ***/
    /* 내게 맞는 카드 찾기 */
    .sect_find .finder_wrap > * {position: relative; z-index: 1;}
    .sect_find .finder_wrap .finder_head {z-index: 2;}
    /* .sect_find .finder_wrap .finder_head::before {content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.88); border-radius: 11px 11px 0 0;} */
    .sect_find .finder_wrap .finder_head::after {content: ''; position: absolute; top: 0; left: 0; display: block; width: calc(100% + 2px); height: calc(100% + 2px); margin: -1px; border: 1px solid rgba(0,0,0,0.36); border-radius: 12px 12px 0 0;}
    /* .sect_find .finder_wrap .finder_body::after {content: ''; position: absolute; top: 0; left: 0; display: block; width: calc(100% + 2px); height: calc(100% + 2px); margin: -1px; border: 1px solid rgba(0,0,0,0.36); border-top: none; border-radius: 0 0 12px 12px; z-index: 0;} */
    .sect_find .finder_wrap.sticky .blank {background: rgba(20,20,20,1);}
    .sect_find .finder_wrap.sticky .blank::before {background: linear-gradient(180deg, rgba(20,20,20,1) 40%, rgba(20,20,20,0));}
    .sect_find .finder_wrap.sticky .blank::after {background: linear-gradient(180deg, rgba(20,20,20,1) 40%, rgba(20,20,20,0));}
    .sect_find .finder_wrap .finder_steps > li + li::before {background: url(/officiallounge/images/ico_arrowB_forward_whta20.png) no-repeat 0 0/16px;}
    .sect_find .finder_wrap .finder_steps > li span {color: var(--BK_a40);}
    .sect_find .finder_wrap .find_condition {background: #333;}
    .sect_find .finder_wrap .chk_wrap.chk_benefit_wrap .chk_label .ico.ico_save {background: url(/officiallounge/images/ico_chk_save_whta48_w40.svg) no-repeat 0 0/40px;}
    .sect_find .finder_wrap .chk_wrap.chk_benefit_wrap .chk_label .ico.ico_discount {background: url(/officiallounge/images/ico_chk_discount_whta48_w40.svg) no-repeat 0 0/40px;}
    .sect_find .finder_wrap .chk_wrap.chk_benefit_wrap .chk_label .ico.ico_mileage {background: url(/officiallounge/images/ico_chk_mileage_whta48_w40.svg) no-repeat 0 0/40px;}
    .sect_find .finder_wrap .chk_wrap.chk_benefit_wrap input:checked + .chk_label .ico.ico_save {background: url(/officiallounge/images/ico_chk_save_wht_w40.svg) no-repeat 0 0/40px;}
    .sect_find .finder_wrap .chk_wrap.chk_benefit_wrap input:checked + .chk_label .ico.ico_discount {background: url(/officiallounge/images/ico_chk_discount_wht_w40.svg) no-repeat 0 0/40px;}
    .sect_find .finder_wrap .chk_wrap.chk_benefit_wrap input:checked + .chk_label .ico.ico_mileage {background: url(/officiallounge/images/ico_chk_mileage_wht_w40.svg) no-repeat 0 0/40px;}
    .sect_find .finder_wrap .finder_btm .btn_reset > span::before {background: url(/officiallounge/images/ico_reset_bk80.svg) no-repeat 0 0/20px;}
    .sect_find .finder_wrap .finder_btm .btn_next > span::before {background: url(/officiallounge/images/ico_arrowB_forward.png) no-repeat 0 0/16px;}
    .sect_find .finder_wrap .finder_btm .btn_next.disabled {background: rgba(255,255,255,0.08) !important;}
    .sect_find .finder_wrap .finder_btm .btn_next.disabled > span::before {background-image: url(/officiallounge/images/ico_arrowB_forward_wht40.png);}

    .sect_find .finder_wrap.result_wrap .result_tit .btn_reset > span::before {background: url(/officiallounge/images/ico_reset_bk80.svg) no-repeat 0 0/20px;}
    .sect_find .finder_wrap.result_wrap .find_result.nodata .btn_refind > span::before {background: url(/officiallounge/images/ico_reset.svg) no-repeat 0 0/20px;}
    .sect_find .finder_wrap.result_wrap .btn_moreview > span::before {background: url(/officiallounge/images/ico_arrowB_down_wht.png) no-repeat 0 0/16px;}
    .sect_find .finder_wrap.result_wrap .result_cont + .box_btn .btn_reset > span::before {background: url(/officiallounge/images/ico_reset_wht.svg) no-repeat 0 0/20px;}
    .sect_find .finder_wrap.result_wrap .btn_gotop > span::before {background: url(/officiallounge/images/ico_go_top_wht.svg) no-repeat 0 0/16px;}
    .sect_find .pop_layer_result {background: #333;}
    .sect_find .pop_layer_result.fixed .pop_container .pop_header {border-bottom: 1px solid rgba(255,255,255,0.12);}
    .sect_find .pop_layer_result .pop_header .btn_popClose {background: var(--BK_8) url(/officiallounge/images/ico_closeB_wht.svg) no-repeat 50% 50%/28px;}
    .sect_find .pop_layer_result .pop_body .btn_moreview > span::before {background: url(/officiallounge/images/ico_arrowB_down_wht.png) no-repeat 0 0/16px;}
    .sect_find .pop_layer_result.nodata .steps > li + li::before {background: url(/officiallounge/images/ico_arrowB_forward_whta20.png) no-repeat 0 0/16px;}
   
    /* 인기 차트 */
    .sect_chart .slide_box .box_tit .bul_arrow {background:url(/officiallounge/images/ico_arrowB_down_wht.png) no-repeat 0 0/20px;}
    .sect_chart .chart_swiper .swiper-slide-next.reduce::after {background: #333;}
    
    /* 한도 미리 보기 */
    .sect_limit .sect_cont [class^="btn"][class*="_defaultbg"] {background: var(--BK);}
    .sect_limit .sect_cont [class^="btn"][class*="_defaultbg"] span {color: var(--WT);} 

    /* 신규 카드 소개 */
    .sect_newcard .box_btn.introduce_more [class^="textbico"][class*="_small"][class*="_down"]::before {background: url(/officiallounge/images/ico_arrowB_down_wht.png) no-repeat 0 0/16px;}
    .modal_pop.fullsize_vod .layer_head a.close {background: url(/officiallounge/images/ico_arrowB_back_wht_w32.png) no-repeat 0 0 / 32px;}
    .modal_pop.fullsize_vod .video {background: #333;}

    /*** footer ***/
    #footer .box_warning a::after {background: url(/officiallounge/images/ico_arrowB_forward_wht_w24.png) no-repeat 0 0/24px;}



    /* 2026-03-25 반영 예정 */
    /*** header ***/
    #header.main_header {background: #141414;}

    /* 내게 맞는 카드 찾기 */
    .sect_find .finder_wrap {background: #171717;}
    .sect_find .finder_wrap .finder_head {background: #000;}
    /* .sect_find .finder_wrap .finder_head::before {content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.88); border-radius: 11px 11px 0 0;} */
    .sect_find .finder_wrap .finder_head::after {content: ''; position: absolute; top: 0; left: 0; display: block; width: calc(100% + 2px); height: calc(100% + 2px); margin: -1px; border: 1px solid #fff; border-radius: 12px 12px 0 0;}
    /*.sect_find .finder_wrap .finder_body::after {content: ''; position: absolute; top: 0; left: 0; display: block; width: calc(100% + 2px); height: calc(100% + 2px); margin: -1px; border: 1px solid rgba(0,0,0,0.36); border-top: none; border-radius: 0 0 12px 12px; z-index: 0;} */

    .sect_find .finder_wrap .find_condition {background: #141414;}

    .sect_find .finder_wrap .finder_steps > li + li::before {background: url(/officiallounge/images/ico_arrowB_forward_bk40.png) no-repeat 0 0/16px;}
    .sect_find .finder_wrap .finder_steps > li span {color: #7a7a7a;}
    .sect_find .finder_wrap .finder_steps > li a span {color: #7a7a7a;}
    .sect_find .finder_wrap .find_condition {background: #171717;}

    .sect_find .finder_wrap .finder_btm .btn_next.disabled {background: #333 !important;}

    /* 신규 카드 소개 */
    .modal_pop.fullsize_vod .video {background: #141414;}
}