@charset "UTF-8";

/* 상단 안내 박스 */
.introCont {display:table; width:100%; padding:24px 0; border-bottom:1px solid rgba(0, 0, 0, .16); box-sizing:border-box;}
.introCont .txt, .introCont .img {display:table-cell; vertical-align:middle;}
.introCont .txt {color:#000; font-size:1.25rem; line-height:1.75rem;}
.introCont .img {text-align:right;}
.layerWrap.fullLayer .introCont {padding-top:0;}
.layerWrap.fullLayer .introCont.kbmall {display: block;width: auto;margin:-20px -16px 0 -16px;padding:3.2rem 0;border-bottom:none;background:#f9fafc;text-align: center;}
.layerWrap.fullLayer .introCont.kbmall .txt {display:block;}
.layerWrap.fullLayer .introCont.kbmall .img {display:block; margin-top:1.6rem; text-align:center} 

.listType1 .btnFull {margin-left:-9px; margin-right:0;}

/* 웰컴기프트 안내 */
.infoBox.welGift {padding:32px 16px; background:#7f6ee3; font-size:0.875rem; line-height:1.25rem; text-align:center;}
.infoBox.welGift h2 {max-width:208px; margin:0 auto;}
.infoBox.welGift .endInfo {display:table; margin:16px auto 0 auto; padding:6px 16px; border-radius:16px; background:rgba(0, 0, 0, .16); color:#dfdbf8;}
.infoBox.welGift .endInfo strong {display:inline; color:currentColor;}
.infoBox.welGift .couponBox {margin:24px 0 0 0; color:#fff;}
.infoBox.welGift .couponBox img {max-width:234px; margin:0 auto;}

.benefitList {margin:0 -16px;}
.benefitList>li img {position:absolute; top:50%; left:8px; transform:translateY(-50%);}
.benefitList>li+li {border:0;}
.benefitList>li>a {padding:24px 56px 24px 64px;}
.ios .basic_list>li>a {padding:26px 56px 26px 64px;}
.benefitList>li>a:before {content:''; position:absolute; bottom:0; right:0; left:64px; height:1px; background:rgba(0, 0, 0, .16);}

/* 겟백 서비스 */
/* 상단 안내 박스 */
/* .introCont.type2 {background:#5443b9; padding:24px 16px; border:0;}
.introCont.type2 .img {width:80px; padding:0 24px 0 0; text-align:left;}
.introCont.type2 .img img {max-width:100%;}
.introCont.type2 .txt {color:#fff; font-size:1rem; line-height:1.5rem;} asis*/
.introCont.type2 {width:calc(100% - 32px);margin:16px;padding:16px;border:0;background-color:#eff2f7;border-radius:8px}
.introCont.type2 .img {display: none;}
.introCont.type2 .txt {font-size:16px;line-height:24px}

/* pdf버튼 */
.agreePDF{position:relative;display:table;width:100%;min-height:74px;margin-top:16px;padding:16px 106px 16px 16px;border:1px solid rgba(0,0,0,0.24);background:#eef1f2;box-sizing:border-box;}
.agreePDF > span {display:table-cell;vertical-align:middle;} 
.agreePDF .btnS {position: absolute;top:50%;right:16px;min-width:auto;margin-top:-20px;padding:7px 11px;font-size:1.000rem;line-height:24px;}
.agreePDF .btnS:before {content:"";display:inline-block;width:24px;height:24px;margin-right:4px;background:url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/24/ico_paper_24_000.png);background-size:24px;vertical-align:top;}

/* 컨텐츠 경계선 */
.contArea.section {}
.contArea.section:after {content:"";display:block;margin:32px -16px 0;height:8px;background:#f2f2f2}

/* 체크박스 미들정렬 */
.cardBox .cardCheck.mid:after {top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%);}

/* 포인트 정보 */
.mixMoney ul > li + li {margin:10px 0 0 0;}
.mixMoney strong {color:#000; font-size:1.125rem; line-height:1.75rem; font-weight:bold; text-align:left;}
.mixMoney span {-webkit-box-flex:1; -webkit-flex:1; flex:1; color:#26282c; text-align:right;}
.mixMoney span em {display:inline; padding:0 4px 0 0; font-size:1.5rem; line-height:2rem; font-weight:bold;}
.mixMoney + .infoTxt {margin:16px 0 0 0; padding:16px 0 0 0; border-top:1px solid rgba(0, 0, 0, .16);}

/* 필터 */
.btnFilter {position:absolute;right:20px;top:50%;padding:3px 7px;border:1px solid rgba(0, 0, 0, 0.24);background:#fff;color:#26282c;font-size:1rem;line-height:24px;box-sizing:border-box; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
/* .btnFilter>span:before{content:'';display:inline-block;width:24px;height:24px;margin-right:4px;background:url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/24/ico_filter_24_000.png) no-repeat 0 0;background-size:100%;vertical-align:top;opacity:.6} asis*/
.btnFilter>span:before{content:'';display:inline-block;width:24px;height:24px;margin-right:4px;background:url(https://img1.kbcard.com/home_re/mo/ico/24/ico-1-filter.svg) no-repeat 0 0;background-size:100%;vertical-align:top}

.titArea {position:relative;}
.titArea .btnFilter {right:0;}

.pointUse_info .tbsList1 {margin:16px 0 0 0; padding:12px 0 0 0; border-top-color:rgba(0, 0, 0, .16);}
.pointUse_info .tbsList1 li {padding:4px 0; border:0; font-size:0.875rem; line-height:1.25rem;}
.pointUse_info .tbsList1 li>strong {color:#696e76;}
.pointUse_info .tbsList1 li.detail {display:block;}

.pointUse_info .historyList{margin:0 -16px;}
.pointUse_info .historyList>li{display:table;width:100%;padding:16px;background:rgba(0, 0, 0, .16);border-bottom: 1px solid rgba(0, 0, 0, .16);box-sizing:border-box}
.pointUse_info .historyList li>div{display:table-cell;vertical-align:middle}
.pointUse_info .historyList li .usage .tit{font-size:1em;line-height:1.4em;word-break:normal;font-weight:normal;color:#26282c}
.pointUse_info .historyList li .usage .info{margin-top:8px;font-size:0.875rem;line-height:1.25rem;color:#696e76}
.pointUse_info .historyList li .usage .info span{display:inline-block}
.pointUse_info .historyList li .usage .info span:after{content:"";display:inline-block;width:1px;height:9px;margin:0 2px 0 6px;background:#bdbdbd}
.pointUse_info .historyList li .usage .info span:last-child:after{display:none}
.pointUse_info .historyList li .usage .info2{margin-top:4px;font-size:0.875rem;line-height:1.25rem;color:#696e76}
.pointUse_info .historyList li .usage .info2 span em{margin-right:3px}
.pointUse_info .historyList li .usage .info2 > span{margin-right:10px}
.pointUse_info .historyList li .usage .info2 > span:last-child{margin-right:0}
.pointUse_info .historyList li .sum{width:90px;padding-left:0;text-align:right}
.pointUse_info .historyList li .sum em{font-size:1rem;line-height:1.5rem;white-space:nowrap;color:#26282c}
.pointUse_info .historyList li .sum em span{margin-left:2px;font-size:0.875rem;vertical-align:1px;font-weight:normal}
.pointUse_info .historyList li .sum p{margin-top:5px;font-size:13px;color:#888;line-height:1.125rem;white-space:nowrap}
.pointUse_info .historyList li .sum span {font-size:0.875rem; line-height:1.25rem; color:#696e76;}
.pointUse_info .flex {color: #26282c !important}/* tobe style */
/* //겟백 서비스 */

/* 탐나는 전 201204 */
.pointBox {border: 1px solid #ccc;padding: 20px;line-height: 34px;letter-spacing: -0.5px;}
/* //탐나는 전  */

/* 혜택 고도화 201124 */
.benefitLink .tabList .checkType a{font-weight:bold; font-size:16px}

.benefitList .benefitBox{padding:0 16px}
.benefitList .benefitBox .contArea{padding:0 16px}

.benefitList .cardtypeBenefit{margin:32px 0 24px}
.benefitList .cardtypeBenefit .discountList{margin-top:26px}
.benefitList .cardtypeBenefit .discountList:after{content:''; display:block; clear:both}
.benefitList .cardtypeBenefit .discountList .tit{display:inline-block; line-height:24px; letter-spacing:-0.2px}
.benefitList .cardtypeBenefit .discountList .price{float:right; line-height:24px}
.benefitList .cardtypeBenefit .discountList .price strong{display:inline-block; font-size:1.250rem; line-height:24px; vertical-align:top}
.benefitList .cardtypeBenefit .discountList .discountBtn{float:right; position:relative; padding-right:16px; font-size:0.875rem; line-height:24px}
.benefitList .cardtypeBenefit .discountList .discountBtn:after{content:''; display:inline-block; position:absolute; right:0; top:4px; width:16px; height:16px; background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/arr/arr_r_16.png') no-repeat 0 0; background-size:16px}

.benefitList .cardtypeBenefit .discountList .infoList{margin:8px 0; padding:16px; background:#f2f2f2; border-radius:5px}
.benefitList .cardtypeBenefit .discountList .infoList:after{content:''; display:block; clear:both}
.benefitList .cardtypeBenefit .discountList .infoList li{margin-top:4px; line-height:0}
.benefitList .cardtypeBenefit .discountList .infoList li:first-child{margin-top:0}
.benefitList .cardtypeBenefit .discountList .infoList li .tit{display:inline-block; font-size:0.875rem; color:#696e76; line-height:20px}
.benefitList .cardtypeBenefit .discountList .infoList li .price{float:right; display:inline-block; height:20px; font-size:0.875rem; line-height:20px}
.benefitList .cardtypeBenefit .discountList .infoList li .price strong{display:inline-block; font-size:16px; line-height:20px; letter-spacing:-0.2px; vertical-align:top}

.benefitList .benefitCategory{margin:0 -16px}
.benefitList .benefitCategory .checkType{height:48px; border-bottom:0; white-space:nowrap;}
.benefitList .benefitCategory .checkType li{margin-left:8px; border-bottom:0}
.benefitList .benefitCategory .checkType li:first-child{margin-left:0!important}
.benefitList .benefitCategory .checkType li.on:after{background:none}

.benefitList .benefitCategory input[type='checkbox']+label.focus, 
.benefitList .benefitCategory input[type='checkbox']+label{padding:5px 16px !important; border:1px solid #979797; background:#fff; border-radius:30px; font-size:0.875rem; line-height:20px !important; color:#696e76}
.benefitList .benefitCategory input[type='checkbox'], 
.benefitList .benefitCategory input[type='checkbox']+label:before{display:none}
.benefitList .benefitCategory .formWrap.checked label{background:#000; color:#fff; border-color:#000}
/* https://tm.kbcard.com/BON/DVIEW/MBEMCXHIABNSD0004
.benefitList .tbsList2.newBenefit{padding:0; margin:0 -16px 0 border-top:1px solid #000; border-bottom:0}
.benefitList .tbsList2.newBenefit li a>span{display:inline-block; font-size:0.875rem; color:#26282c; line-height:20px}
.benefitList .tbsList2.newBenefit li span strong{display:inline-block; font-size:16px; letter-spacing:-0.2px; vertical-align:top}
.benefitList .tbsList2.newBenefit li{display:table; position:relative; width:100%; min-height:72px}
.benefitList .tbsList2.newBenefit li:last-child{border-bottom:1px solid rgba(0, 0, 0, .16)}
.benefitList .tbsList2.newBenefit li a{display:table-cell; padding:16px 150px 16px 0; vertical-align:middle}
.benefitList .tbsList2.newBenefit li a:after{content:""; display:block; position:absolute; right:16px; top:50%; width:24px; height:24px; margin-top:-12px; background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/arr/arr_r_24_000.png'); background-size:24px; opacity:.87}
.benefitList .tbsList2.newBenefit .tit{word-break:initial}
.benefitList .tbsList2.newBenefit .num{display:inline-block; margin-left:4px; padding:2px 6px; border-radius:11px; font-size:12px; line-height:16px; color:#696e76; background:rgba(0, 0, 0, .06)}
.benefitList .tbsList2.newBenefit .price{position:absolute; top:35%; right:40px; line-height:24px} */
.benefitList .tbsList2.newBenefit{padding:0; margin:0 -16px; border-top:1px solid #000; border-bottom:0}
.benefitList .tbsList2.newBenefit li a>span{display:inline-block; font-size:0.875rem; color:#26282c; line-height:24px}
.benefitList .tbsList2.newBenefit li span strong{display:inline-block; font-size:16px; letter-spacing:-0.2px; vertical-align:top}
.benefitList .tbsList2.newBenefit li{display:table; position:relative; width:100%; min-height:72px;padding: 24px 16px;box-sizing: border-box;}
.benefitList .tbsList2.newBenefit li:last-child{border-bottom:1px solid rgba(0, 0, 0, .16)}
.benefitList .tbsList2.newBenefit li a{display:table-cell; padding-right:130px;vertical-align:middle}
.benefitList .tbsList2.newBenefit li a:after{content:""; display:block; position:absolute; right:16px; top:50%; width:24px; height:24px; margin-top:-12px; background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/arr/arr_r_24_000.png'); background-size:24px; opacity:.87}
.benefitList .tbsList2.newBenefit .tit{word-break:initial}
.benefitList .tbsList2.newBenefit .num{display:inline-block; margin-left:4px; padding:2px 6px; border-radius:11px; font-size:12px; line-height:16px; color:#696e76; background:rgba(0, 0, 0, .06)}
.benefitList .tbsList2.newBenefit .price{position:absolute; top:50%; right:40px; line-height:24px;transform: translateY(-50%);}

/* 혜택상세 */
.arrCarSwiper{position:relative; overflow:hidden; width:165px; background:none; line-height:28px; text-align:center}
.arrCarSwiper > a{position:absolute; top:0; width:24px; height:28px; color:transparent}
.arrCarSwiper > a.prev{left:0}
.arrCarSwiper > a.next{right:0}
.arrCarSwiper > a:after{content:""; display:block; position:absolute; top:2px; width:24px; height:24px; background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/24/arr_btn_24.png') no-repeat; background-size:40px; background-position:-17px -18px}
.arrCarSwiper > a.next:after{top:4px; background-position:-19px 1px}
.arrCarSwiper > a.next.dimm:after{right:-1px; background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/24/arr_btn_24.png') no-repeat; background-size:40px}
.arrCarSwiper > .listBox{overflow:hidden; margin:0; height:28px}
.arrCarSwiper > .listBox > ul:after{content:""; display:block; clear:both}
.arrCarSwiper > .listBox > ul > li{float:left; width:100%; font-size:1.000rem; color:#26282c}
.arrCarSwiper > .listBox a{font-size:20px; line-height:28px; font-weight:bold; letter-spacing:0.2px}

.benefitDetail .depTit2{line-height:1.5rem; letter-spacing:-0.2px}
.benefitDetail .totalInfo{margin-bottom:8px;}
.benefitDetail .totalInfo span{display:inline-block; font-size:0.875rem; line-height:24px; vertical-align:top}
.benefitDetail .totalInfo span strong{display:inline-block; color:#000; font-size:1.000rem; line-height:24px; vertical-align:top}
.benefitDetail .totalInfo span.price{float:right}
.benefitDetail .totalInfo em{font-size:16px; color:#000}

.historyList{margin-right:-16px; border-bottom:1px solid #ccc}
.historyList li{display:table; padding:16px 16px 16px 0; width:100%; border-top:1px solid #e9e9e9; box-sizing:border-box}
.historyList li:first-child{border-color:#000}
.historyList li>div{display:table-cell; vertical-align:middle}

.historyList li .usage .tit{display:inline-block; color:#26282c; letter-spacing:-0.2px;word-break:noraml;}
.historyList li .usage .info{margin-top:4px; color:#696e76; font-size:0.875rem; line-height:1.429em}
.historyList li .usage .info span{display:inline-block; font-size:0.875rem; line-height:1.429em}
.historyList li .usage .info span:last-child:after{display:none}
.historyList li .usage .info span:after{content:""; display:inline-block; margin:0 2px 0 6px; width:1px; height:9px; background:#bdbdbd}
.historyList li .sum{width:100px; padding-left:0; text-align:right}
.historyList li .sum em{display:inline-block; color:#26282c; line-height:24px; font-weight:bold; letter-spacing:-0.2px}
.historyList li .sum em	span{display:inline-block; line-height:24px; vertical-align:top}
.historyList li .sum p{margin-top:4px; color:#696e76; font-size:0.875rem; line-height:1.429em; white-space:nowrap}
.historyList li .sum span{font-size:0.875rem; font-weight:normal}

/* 박진수 - https://tm.kbcard.com/BON/DVIEW/MBEMCXHIABNSD0004 내역없음 관련 수정 
.infoBox.noBox{margin-right: -16px; border-top:1px solid #000; border-bottom:1px solid #ddd}
.infoBox.notImg{padding:40px 16px 40px 0}*/
.infoBox.noBox{margin:0 -16px; border-top:1px solid #000; border-bottom:1px solid #ddd; border-radius:unset}
.infoBox.notImg{padding:40px 16px}
.infoBox.notImg .tit{margin-top:8px; color:#26282c; letter-spacing:-0.2px}
.infoBox.notImg .subTxt{margin-top:8px; letter-spacing:-0.2px}
.infoBox.notImg a{display:inline-block; margin-top:32px; padding:7px 16px; border-radius:100px; font-size:14px; line-height:20px; letter-spacing:-1px}

/* 201112 추가  */
.pointree{margin:34px 16px 0}
.pointree:after{content:''; display:block; clear:both}
.pointree .tit{display:inline-block; font-size:16px; line-height:24px; letter-spacing:-0.2px}
.pointree .qInfoBtn {display:inline-block; position:relative; width:24px; height:24px; background: url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/24/ico_info_24_000.png') no-repeat 0 0; background-size:24px; vertical-align:top; color:transparent}
.pointree .point {float:right; line-height:28px}
.pointree .point strong{display:inline-block; font-size:1.250rem; line-height:24px; vertical-align:top}
.pointree .discountBtn{float:right; position:relative; padding-right:16px; font-size:0.875rem; line-height:24px}
.pointree .discountBtn:after{content:''; display:inline-block; position:absolute; right:0; top:4px; width:16px; height:16px; background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/arr/arr_r_16.png') no-repeat 0 0; background-size:16px}

.pointree .infoList{margin-top:10px; padding:16px; background:#f2f2f2; border-radius:5px}
.pointree .infoList:after{content:''; display:block; clear:both}
.pointree .infoList li{margin-top:4px; line-height:0}
.pointree .infoList li:first-child{margin-top:0}
.pointree .infoList li .tit{display:inline-block; font-size:0.875rem; color:#696e76; line-height:20px}
.pointree .infoList li .price{float:right; height:20px; font-size:0.875rem; line-height:20px}
.pointree .infoList li .price strong{display:inline-block; font-size:16px; line-height:20px; letter-spacing:-0.2px; vertical-align:top}

.pointree .btnBox {margin-top:0;}
.pointree .btnBox a{float:left; margin:18px 0; width:49%; font-size:14px; line-height:20px; color:#26282c; border-left:1px solid #ccc}
.pointree .btnBox a:first-child {border-left:0}
.pointree:after {content: ""; display: block; margin:0 -16px; height:6px; border-top:1px solid #e9e9e9; background:#f2f3f4}
/* //201112 추가 */

/* 201119 추가 */
.benefitSearch .filter.type2 {position: relative;}
.benefitSearch .filter.type2 .beneFliter {position:absolute;right:0; border:1px solid #ccc; background:none; height:40px; line-height:23px; padding:8px; font-size:14px; color:#696e76}
.benefitSearch .beneFliter>span:before {opacity:1}

.benefitSearch .list{box-sizing:border-box;padding:0 0 20px}
.benefitSearch .list>.tit{display:block;text-align:center;font-size:1.000rem;line-height:22px;color:#7f6ee3}
.benefitSearch .list>.info{overflow:hidden;margin-top:10px}
.benefitSearch .list>.info>*{font-size:13px;line-height:18px;color:#888;text-align:right}
.benefitSearch .list>.info .lastChange{float:right}
.benefitSearch .list>.info .searchPeriod{float:left}
.benefitSearch .list .noData{padding-bottom:40px !important}
@media screen and (max-width:359px){
    .benefitSearch .list>.info>*{display:block}
    .benefitSearch .list>.info .lastChange, .benefitSearch .list>.info .searchPeriod{float:none}
}
.benefitSearch .list>ul{margin-top:10px;border-top:2px solid #26282c}
.benefitSearch .list>ul>li{display:table;width:100%;table-layout:fixed;box-sizing:border-box;border-bottom:1px solid #e5e5e5;padding:16px 9px}
.benefitSearch .list>ul>li>*{display:table-cell;vertical-align:middle;letter-spacing:-0.5px}
.benefitSearch .list>ul>li>.leftArea{width:65%}
.benefitSearch .list>ul>li>.leftArea strong{font-size:15px;font-weight:normal;color:#26282c}
.benefitSearch .list>ul>li>.leftArea .date{display:block;font-size:13px;line-height:16px;color:#888;margin-top:5px}
.benefitSearch .list>ul>li>.rightArea{text-align:right}
.benefitSearch .list>ul>li>.rightArea strong{font-size:1.000rem;line-height:20px;color:#26282c}
.benefitSearch .list>ul>li>.rightArea strong em{font-weight:normal;font-size:14px;line-height:17px;vertical-align:1px}
/* //혜택 고도화 */


/* 2022-03-30 포인트적립/사용내역 (DEFC-0000008519) */
.benefitSearch .filter.type2 .btnFilter { right:0; }