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

#wrap {max-width: 768px; margin: 0 auto; padding-top: 64px;}

/*** header ***/
#header.sub_header {height: 64px; background: var(--WT);}
#header.sub_header > .header_wrap {position: relative; display: flex; gap: 8px; align-items: center; width: 100%; max-width: 768px; height: 63px; margin: 0 auto; padding: 8px 16px 7px 12px;}
#header.sub_header.h_48 {height: 48px;}
#header.sub_header.h_48 > .header_wrap {height: 47px;}
#header.sub_header .btn_prev {position: absolute; top: 50%; left: 12px; 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.sub_header .searchbar {flex: 1; padding-left: 40px;}
#header.sub_header .searchbar .box_input01 .input_cell_box {border: 1.5px solid var(--BK_a20); border-radius: 12px;}
#header.sub_header .searchbar .box_input01 .input_cell_box::before {display: none;}
#header.sub_header .searchbar .box_input01 .input_cell {padding: 0 48px 0 16px;}
#header.sub_header .searchbar .box_input01 .input_cell_box.focused {border: 1.5px solid var(--BK);}
#header.sub_header .searchbar .box_input01 .input_cell_box.on.focused .input_cell {padding: 0 72px 0 16px;}
#header.sub_header .searchbar .box_input01 .input_txt {height: 46px; font-size: 16px; font-weight: 500; line-height: 22px;}
#header.sub_header .searchbar .box_input01 .input_txt::placeholder {font-size: 16px; font-weight: 500; line-height: 22px; color: var(--BK_a40);}
#header.sub_header .searchbar .box_input01 .box_btn {right: 16px; display: flex; align-items: center; gap: 8px;}
#header.sub_header .searchbar .box_input01 .box_btn > [class^="btn_"] {width: 24px; height: 24px; margin: 0;}
#header.sub_header .searchbar .box_input01 .box_btn .btn_del {background: url(/officiallounge/images/ico_del_w24.svg) no-repeat 0 0 / 24px;}
#header.sub_header .searchbar .box_input01 .box_btn .btn_search {background: url(/officiallounge/images/ico_search_bka40_w24.svg) no-repeat 50% 50% / 28px;}
#header.sub_header .btns [class^="btn_ico"] {position: relative; display: block; width: 32px; height: 32px;}
#header.sub_header .btns .btn_ico_basket {background: url(/officiallounge/images/ico_compare.svg) no-repeat 0 0 / 32px;}
#header.sub_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;}
#header.sub_header .title {flex: 1; position: relative; display: flex; justify-content: center; align-items: center;}
/* .fixed #header.sub_header {border-bottom: 1px solid var(--BK_a12);} */

/*** content ***/
.officiallounge_search .content {padding: 24px 24px 0;}
.officiallounge_sub {padding: 0;}
.officiallounge_sub .content {min-height: 100%; padding: 20px;}

/*** 검색 ***/
.search_keyword {display: flex; flex-direction: column; gap: 40px;}
.search_keyword .tit_wrap {display: flex; justify-content: space-between; align-items: center;}
.search_keyword .tit_wrap [class^="btn_del_"] {background: transparent;}
.search_keyword .tit_wrap [class^="btn_del_"] span {color: var(--BK_a48);}
.search_keyword .keword_list {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;}
.search_keyword .keword_list.type2 {flex-wrap: nowrap; margin: 12px -24px 0; padding: 0 24px; white-space: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch;}
.search_keyword .keword_list.type2::-webkit-scrollbar {display: none;}
.search_keyword .keword_list .key_itm {position: relative; border: 1px solid var(--BK_a8); border-radius: 8px;}
.search_keyword .keword_list .key_itm .btn_keyword {padding: 9px 11px; background: transparent;}
.search_keyword .keword_list .key_itm .btn_keyword span {color: var(--BK_a48);}
.search_keyword .keword_list .key_itm.type2 .btn_keyword {padding: 9px 35px 9px 11px; background: transparent;}
.search_keyword .keword_list .key_itm .btn_del {position: absolute; top: 50%; right: 11px; display: block; width: 20px; height: 20px; background: url(/officiallounge/images/ico_del_bka40_w20.svg) no-repeat 0 0 / 20px; transform: translateY(-50%);}

.officiallounge_search .result_wrap:not(.result_nodata) {padding-left: 4px;}
.officiallounge_search .result_wrap .nodata {display: flex; flex-direction: column; align-items: center; margin: 0; padding-top: 32px;} 
.officiallounge_search .result_wrap .nodata [class^="btn48"] {display: flex; align-items: center; padding: 0 8px 0 16px; font-size: 14px; line-height: 20px; text-align: left; background: transparent;}
.officiallounge_search .result_wrap .nodata [class^="btn48"] [class^="textbico"][class*="_small"] {padding-right: 20px; background: url(/officiallounge/images/ico_arrowB_forward_w20.svg) no-repeat 100% 50% / 20px;}
.officiallounge_search .result_wrap #search_result_cms01 {width: 100%; padding-left: 4px;}
.officiallounge_search .recommend .box_tit {position: relative; display: flex; align-items: center;}
.officiallounge_search .recommend .wrap_tooltip {position: static; margin-left: 8px;}
.officiallounge_search .recommend .wrap_tooltip > .btn_tooltip {padding-top: 3px;}
.officiallounge_search .recommend .box_tooltip {left: 0; right: auto; width: 100%; max-width: 292px; margin: 6px 0 0 0;}

.officiallounge_search .result_wrap .result_tit {position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px;}
.officiallounge_search .result_wrap .result_tit.block {display: block;}
.officiallounge_search .result_wrap .result_tit .result_txt {flex: 1; word-break: keep-all;}
.officiallounge_search .result_wrap .result_tit .result_txt + .dpfx {width: 135px;}
.officiallounge_search .result_wrap .ui-select.select_type2 .select-btn {width: auto; height: 24px; padding: 3px 5px 3px 9px; border: 1px solid var(--BK_a12); border-radius: 14px;}
.officiallounge_search .result_wrap .ui-select.select_type2 .select-btn > span {font-size: 12px; line-height: 16px; color: var(--BK_a64);}
.officiallounge_search .result_wrap .ui-select.select_type2 .select-btn.on > span {font-weight: 500; color: var(--BK_a64);}
.officiallounge_search .result_wrap .result_tit .wrap_tooltip {position: static; margin-left: 6px;}
.officiallounge_search .result_wrap .result_tit .wrap_tooltip > .btn_tooltip {padding-top: 3px;}
.officiallounge_search .result_wrap .result_tit .box_tooltip {left: auto; right: 0; width: 100%; max-width: 292px; margin: 6px 0 0 0;}

/*** 장바구니 ***/
.officiallounge_basket {display: flex; flex-direction: column;}
.officiallounge_basket .list_head {display: flex; align-items: center;}
.officiallounge_basket .list_head > .itm {display: flex; align-items: center; height: 24px; padding-top: 2px;}
.officiallounge_basket .list_head > .itm + .itm {position: relative; margin-left: 12px; padding-left: 12px;}
.officiallounge_basket .list_head > .itm + .itm::before {content: ''; position: absolute; top: 50%; left: 0; display: block; width: 1px; height: 10px; background: var(--BK_a20); transform: translateY(-50%);}
.officiallounge_basket .list_head .btn_sel_clear {height: 24px; background: transparent;}
.officiallounge_basket .list_head .btn_sel_clear > span {line-height: 24px;}
.officiallounge_basket .list_wrap {margin-top: 16px; padding: 16px 0 0; border-top: 1px solid var(--BK);}
.officiallounge_basket .list_wrap > .p2_m_1ln.fc_m_a48 {color: var(--BK_a64);}
.official_card_list.basket_list > li {gap: 2px;}
.officiallounge_basket .basket_wrap .cd_chk {position: relative;}
.officiallounge_basket .basket_wrap .cd_chk input + .chk_label {position: relative; display: flex; align-items: center; height: 28px; padding-left: 30px;}
.officiallounge_basket .basket_wrap .cd_chk input + .chk_label::before {content: ''; position: absolute; top: 0; left: 0; display: block; width: 28px; height: 28px; background: url(/officiallounge/images/checkboxB_off.svg) no-repeat 0 0 / 28px;}
.officiallounge_basket .basket_wrap .cd_chk input:checked + .chk_label::before {background: url(/officiallounge/images/checkboxB_on.svg) no-repeat 0 0 / 28px;}
.officiallounge_basket .basket_wrap .cd_chk input + .chk_label span#selCntNo {font-weight: 700;}
.officiallounge_basket .basket_wrap .basket_list .cd_chk input + .chk_label {height: 58px; padding-left: 58px; margin: 0 -8px 0 -14px;}
.officiallounge_basket .basket_wrap .basket_list .cd_chk input + .chk_label::before {top: 50%; left: 50%; transform: translate(-50%, -50%);}

.officiallounge_basket .basket_wrap .btn_compare:not(.disabled) .fc_point {color: rgba(31,171,255,1) !important;}
.officiallounge_basket .basket_wrap.basket_nodata {height: calc(100dvh - 88px);}
.isApp3 .officiallounge_basket .basket_wrap.basket_nodata {height: calc(100dvh - 136px) !important;}
.officiallounge_basket .basket_wrap.basket_nodata .box_nodata {display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;  margin-top: -40px; padding-bottom: 40px;}
.officiallounge_basket .box_nodata .txt {position: relative; padding-top: 100px; color: var(--BK_a48);}
.officiallounge_basket .box_nodata .txt::before {content: ''; position: absolute; top: 0; left: 50%; display: block; width: 96px; height: 96px; background: url(/officiallounge/images/ico_card_bka20_w96.svg) no-repeat 0 0 / 96px; transform: translateX(-50%);}
.modal_pop.modal_alert#layerOpenConfirm .modal_container .box_btn a {border-top: 1px solid  var(--BK_a8);}
.modal_pop.modal_alert#layerOpenConfirm .modal_container .box_btn:not(.column) a + a {border-left: 1px solid var(--BK_a8);}

/*** 비교하기 ***/
.officiallounge_compare {display: flex; justify-content: stretch; min-height: calc(100vh - 48px);}
.compare_list {position: relative; display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto;}
.compare_list.col2 {flex-wrap: wrap; width: 100%;}
.compare_list > .cp_card {position: relative; min-width: calc(50vw - 12px); border-right: 1px solid var(--BK_a8); transform: translateX(0);}
.compare_list > .cp_card.end:not(.first),
.compare_list > .cp_card.end + .cp_card.no_card:not(.hide),
.compare_list > .cp_card.no_card:not(.hide) + .cp_card.no_card:not(.hide) {border-right: none;}
.compare_list.col2 > .cp_card {width: 50%; min-width: 50%;}
.compare_list.fixed > .cp_card.fixed {position: sticky; top: 0; left: 0; width: calc(50vw - 12px); height: 100%; background: #fafafa; z-index: 2;}
.compare_list.fixed > .cp_card.pin_on {display: none;}
.compare_list > .cp_card .slot_head {display: flex; flex-direction: column; min-height: 174px;}
.compare_list > .cp_card .slot_head > .top {position: relative; height: 44px; padding: 12px 12px 8px;}
.compare_list > .cp_card .slot_head > .top button {position: absolute; top: 12px; display: block; width: 24px; height: 24px; cursor: pointer;}
.compare_list > .cp_card .slot_head > .top .btn_pin {left: 12px; background: transparent url(/officiallounge/images/ico_pin_off.svg) no-repeat 0 0 / 24px;}
.compare_list > .cp_card .slot_head > .top .btn_pin.on {background: transparent url(/officiallounge/images/ico_pin_on.svg) no-repeat 0 0 / 24px;}
.compare_list > .cp_card .slot_head > .top .btn_del {right: 12px; background: transparent url(/officiallounge/images/ico_closeB_w24.svg) no-repeat 0 0 / 24px;}
.compare_list > .cp_card .slot_head > .card {flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 20px;}
.compare_list > .cp_card .slot_head > .card .img {display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; margin-bottom: 8px;}
.compare_list > .cp_card .slot_head > .card .img > img {width: 50px; height: 80px;}
.compare_list > .cp_card .slot_head > .card_h .img > img {width: 80px; height: 50px;}
.compare_list > .cp_card .slot_head > .card .txt .dpfx {display: flex; justify-content: center; align-items: center;}
.compare_list > .cp_card .slot_head > .card a.btn40_defaultbg {display: inline-block; margin-top: 8px; padding: 10px 20px; width: 108px; background: var(--BK);}
.compare_list > .cp_card .slot_head > .card a.btn40_defaultbg > span {color: var(--WT);}
.compare_list > .cp_card .slot_cont {display: flex; flex-direction: column; gap: 40px; margin: 40px 0 38px;}
.compare_list > .cp_card .slot_cont .card_desc {padding: 0 20px;}
.compare_list > .cp_card .card_desc dt {display: block; height: 28px; border-bottom: 1px solid var(--BK);}
.compare_list > .cp_card:not(.first):not(.fixed) .card_desc dt > p, 
.compare_list.fixed > .cp_card.first .card_desc dt > p {display: none;} 
.compare_list > .cp_card .card_desc dd {margin-top: 16px;}
.compare_list > .cp_card .card_desc .benefits > li + li {margin-top: 16px;}
.compare_list > .cp_card .card_desc .benefits .tit + p {margin-top: 4px;}
.compare_list > .cp_card .card_desc dd p.p2_m_1ln.word_keep {word-wrap: break-word;}
.compare_list > .cp_card .card_desc dd p.p2_m_1ln > b {display: block; font-size: 12px; line-height: 16px; margin-bottom: 4px;}
.compare_list > .cp_card .card_desc dd p.p2_m_1ln > b + br {display: none;}
.compare_list > .cp_card .card_desc dd p.p2_m_1ln > br + br + b {margin-top: 4px;}
.compare_list > .cp_card.no_card .slot_head .btn_select_card {padding-top: 44px; padding-bottom: 20px;}
.compare_list > .cp_card.no_card .slot_head .btn_select_card .ico.add_card {display: block; width: 50px; height: 80px; margin-bottom: 8px; background: url(/officiallounge/images/ico_addCard.svg) no-repeat 0 0 / 50px 80px;}

.useinfo {margin-top: 64px; padding: 0 24px 64px;}
.useinfo .line_top {padding-top: 24px; margin-top: 24px; border-top: 1px solid #e0e0e0;}
.useinfo .box_bul .bul_list li {font-size: 14px; font-weight:500; line-height:22px;}
.useinfo .box_bul .bul_list li + li {margin-top: 6px;} 
.useinfo .box_bul .dash_list li {color:#5c5c5c;} 
.useinfo .bul_list li > .dash_list {margin: 6px 0;}
.useinfo .bul_list li > .dash_list li {line-height:22px;}
.useinfo [class^="bul_"][class*="list"] > li:before {top: 10px;}

@media (min-width: 769px) {
    .compare_list:not(.col2) > .cp_card {min-width: 372px;}
}


/***** 다크모드 *****/
@media (prefers-color-scheme: dark) {
    /*** header ***/
    #header.sub_header {background: #333;}
    #header.sub_header .btn_prev {background: url(/officiallounge/images/ico_arrowB_back_wht_w32.png) no-repeat 0 0 / 32px;}
    #header.sub_header .searchbar .box_input01 .box_btn .btn_del {background: url(/officiallounge/images/ico_del_wht_w24.svg) no-repeat 0 0 / 24px;}
    #header.sub_header .searchbar .box_input01 .box_btn .btn_search {background: url(/officiallounge/images/ico_search_whta40_w24.svg) no-repeat 50% 50% / 28px;}
    #header.sub_header .btns .btn_ico_basket {background: url(/officiallounge/images/ico_compare_wht.svg) no-repeat 0 0 / 32px;}

    /*** content ***/
    /** 검색 **/
    .search_keyword .keword_list .key_itm .btn_del {background: url(/officiallounge/images/ico_del_whta40_w20.svg) no-repeat 0 0 / 20px;}
    .officiallounge_search .result_wrap .nodata [class^="btn48"] [class^="textbico"][class*="_small"] {background: url(/officiallounge/images/ico_arrowB_forward_wht_w20.svg) no-repeat 100% 50% / 20px;}

    /*** 장바구니 ***/
    .officiallounge_basket .btn_bottom.fix [class^="btn"].disabled {background: #ebebeb !important;}
    .officiallounge_basket .btn_bottom.fix [class^="btn"].disabled span {color: rgba(0,0,0,0.48) !important;} 
    .officiallounge_basket .basket_wrap .cd_chk input + .chk_label::before {background: url(/officiallounge/images/checkboxB_off_wht.svg) no-repeat 0 0 / 28px;}
    .officiallounge_basket .basket_wrap .cd_chk input:checked + .chk_label::before {background: url(/officiallounge/images/checkboxB_on_wht.svg) no-repeat 0 0 / 28px;}
    .officiallounge_basket .box_nodata .txt::before {background: url(/officiallounge/images/ico_card_whta20_w96.svg) no-repeat 0 0 / 96px;}

    /*** 비교하기 ***/
    .compare_list.fixed > .cp_card.fixed {background: #292929;}
    .compare_list > .cp_card .slot_head > .top .btn_pin {left: 12px; background: transparent url(/officiallounge/images/ico_pin_off_wht.svg) no-repeat 0 0 / 24px;}
    .compare_list > .cp_card .slot_head > .top .btn_pin.on {background: transparent url(/officiallounge/images/ico_pin_on_wht.svg) no-repeat 0 0 / 24px;}
    .compare_list > .cp_card .slot_head > .top .btn_del {background: transparent url(/officiallounge/images/ico_closeB_wht_w24.svg) no-repeat 0 0 / 24px;}
    .compare_list > .cp_card.no_card .slot_head .btn_select_card .ico.add_card {background: url(/officiallounge/images/ico_addCard_wht.svg) no-repeat 0 0 / 50px 80px;}
}