@charset "utf-8"; /* 2.17. CM, 고도화 CSS */ /* 200129 배너 리뉴얼 */ .newEventBanner .swiper-wrapper{height:256px} .newEventBanner .swiper-container{position:relative;z-index:1;width:100%;padding:0} .newEventBanner .swiper-slide{display:-webkit-box;display:-webkit-flex;display:flex;position:relative;width:100%;height:100%;padding:0;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;flex-shrink:0;transition-property:transform} .newEventBanner .swiper-slide a{position:absolute;top:0;left:0;display:block;width:100%;height:100%;background-position:top center;border-radius:0!important;background-repeat:no-repeat;background-size:cover;overflow:hidden} .newEventBanner .swiper-slide img{width:100%;margin:0;vertical-align:top} .newEventBanner .swiper-slide, .newEventBanner .swiper-slide-duplicate, .newEventBanner .swiper-slide-prev, .newEventBanner .swiper-slide-next{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);transition:all ease 0.5s;overflow:hidden} .newEventBanner .swiper-slide-active{-webkit-transform:translate3d(0px, 0, 0) scale(1) !important;transform:translate3d(0px, 0, 0) scale(1) !important;transition:all ease 0.5s} .newEventBanner .swiper-slide .tit{position:absolute;top:40px;left:24px;z-index:10} .newEventBanner .swiper-slide .tit img{display:block;width:auto} .newEventBanner .swiper-slide .visual_obj{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden} .newEventBanner .swiper-slide .visual_obj img{width:auto;max-width:100%} .newEventBanner .swiper-slide .visual_obj .objTop, .newEventBanner .swiper-slide .visual_obj .objRight, .newEventBanner .swiper-slide .visual_obj .objBtm, .newEventBanner .swiper-slide .visual_obj .objLeft{position:absolute} .newEventBanner .swiper-slide .visual_obj .objTop{transition-delay:0.5s;-webkit-transition-delay:0.5s;transition-duration:1s;-webkit-transition-duration:1s;transition-property:all;-webkit-transition-property:all;transform:translateY(-100%);-webkit-transform:translateY(-100%);opacity:0} .newEventBanner .swiper-slide .visual_obj .objRight{transition-delay:0.3s;-webkit-transition-delay:0.3s;transition-duration:1s;-webkit-transition-duration:1s;transition-property:all;-webkit-transition-property:all;transform:translateX(100%);-webkit-transform:translateX(100%);opacity:0} .newEventBanner .swiper-slide .visual_obj .objBtm{transition-delay:0s;-webkit-transition-delay:0s;transition-duration:1s;-webkit-transition-duration:1s;transition-property:all;-webkit-transition-property:all;transform:translateY(100%);-webkit-transform:translateY(100%);opacity:0} .newEventBanner .swiper-slide .visual_obj .objLeft{transition-delay:0s;-webkit-transition-delay:0s;transition-duration:1s;-webkit-transition-duration:1s;transition-property:all;-webkit-transition-property:all;transform:translateX(-100%);-webkit-transform:translateX(-100%);opacity:0} .newEventBanner .swiper-slide-active .visual_obj .objTop{transition-delay:0.5s;-webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-ms-transition-delay:0.5s;-o-transition-delay:0.5s;transition-duration:1s;-webkit-transition-duration:0.8s;-moz-transition-duration:0.8s;-ms-transition-duration:0.8s;-o-transition-duration:0.8s;transition-property:all;-webkit-transition-property:all;transform:translateY(0px);-webkit-transform:translateY(0px);opacity:1} .newEventBanner .swiper-slide-active .visual_obj .objRight{transition-delay:0.3s;-webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-ms-transition-delay:0.3s;-o-transition-delay:0.3s;transition-duration:1s;-webkit-transition-duration:1s;-moz-transition-duration:1s;-ms-transition-duration:1s;-o-transition-duration:1s;transition-property:all;-webkit-transition-property:all;transform:translateX(0px);-webkit-transform:translateX(0px);opacity:1} .newEventBanner .swiper-slide-active .visual_obj .objBtm{transition-delay:0s;-webkit-transition-delay:0s;-moz-transition-delay:0.5s;-ms-transition-delay:0.5s;-o-transition-delay:0.5s;transition-duration:1s;-webkit-transition-duration:1s;-moz-transition-duration:1s;-ms-transition-duration:1s;-o-transition-duration:1s;transition-property:all;-webkit-transition-property:all;transform:translateY(0px);-webkit-transform:translateY(0px);opacity:1} .newEventBanner .swiper-slide-active .visual_obj .objLeft{transition-delay:0s;-webkit-transition-delay:0s;-moz-transition-delay:0s;-ms-transition-delay:0s;-o-transition-delay:0s;transition-duration:1s;-webkit-transition-duration:1s;-moz-transition-duration:1s;-ms-transition-duration:1s;-o-transition-duration:1s;transition-property:all;-webkit-transition-property:all;transform:translateX(0px);-webkit-transform:translateX(0px);opacity:1} .newEventBanner .swiper-container .total{font-size:12px;line-height:26px;text-align:center;position:absolute;z-index:1;top:16px;right:48px;left:auto;margin:0;padding:0;overflow:hidden;box-sizing:border-box;width:60px;height:24px;color:rgba(255,255,255,0.87);border-radius:20px;background:rgba(0,0,0,0.47)} .newEventBanner .swiper-container .total button{position:absolute;top:0;right:0;width:24px;height:24px;color:#b0b8c7;background:transparent;font-size:0} .newEventBanner .swiper-container .total button:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);content:'';width:1px;height:9px;background-color:rgba(255,255,255,1)} .newEventBanner .swiper-container .total button:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);content:'';width:9px;height:1px;background-color:rgba(255,255,255,1)} .newEventBanner .swiper-wrapper{display:-webkit-box;display:-webkit-flex;display:flex;position:relative;z-index:1;width:100%;transition-property:transform;box-sizing:content-box} .newEventBanner .swiper-container .btnPrev, .newEventBanner .swiper-container .btnNext{display:none} .newEventBanner .btnPause{overflow:hidden;position:absolute;top:16px;right:16px;left:auto;z-index:2;margin:0;background:rgba(0, 0, 0, 0.47);width:24px;height:24px;border-radius:12px;font-size:1px;color:transparent} .newEventBanner .btnPause:after{display:block;content:'';position:absolute;top:0;width:24px;height:24px;background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/ico_eventslider_play.png') no-repeat 8px center;background-size:10px 12px} .newEventBanner .btnPause.on:after{background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/ico_eventslider_pause.png') no-repeat 8px center;background-size:8px 10px} /* //200129 배너 리뉴얼 */ /* 200220 매출전표 팝업 */ .fullLayer.layerStatement .popTop{padding:0} .fullLayer.layerStatement .popCont{padding:24px} .fullLayer.layerStatement .salesSlip{position:relative;padding:0 60px 16px 0;color:#000;font-weight:bold;word-break:break-all} .fullLayer.layerStatement .salesSlip .storeName{display:block;font-weight:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fullLayer.layerStatement .salesSlip .btnShare2{position:absolute;top:0;right:0;width:48px;height:48px;background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/48/ico_sns_share_48.png') no-repeat 0 0;background-size:48px 48px} .fullLayer.layerStatement .cdAmount{position:relative;padding:8px 0} .fullLayer.layerStatement .cdAmount:before{content:'';display:block;position:relative;top:-8px;width:100%;height:1px;padding-right:24px;background-color:rgba(0,0,0,.16)} .fullLayer.layerStatement .amountList1{padding:2px 0} .fullLayer.layerStatement .amountList1:after{content:'';display:block;clear:both} .fullLayer.layerStatement .amountList1 dt{float:left;width:30%;color:#696e76;word-break:break-all} .fullLayer.layerStatement .amountList1 dd{float:right;width:70%;color:#26282c;text-align:right;word-break:break-all} .fullLayer.layerStatement .amountList1 dd .info{font-size:0} .fullLayer.layerStatement .amountList1 dd .info span{display:inline-block;position:relative;font-size:1.000rem;line-height:1.500em} .fullLayer.layerStatement .amountList1 dd .info span:before{content:' ';display:inline-block;width:1px;height:14px;margin:0 6px;background-color:rgba(0,0,0,.87);vertical-align:-2px} .fullLayer.layerStatement .amountList1 dd .info span:first-child:before{display:none} .fullLayer.layerStatement .cdAmount.type .amountList1 dt, .fullLayer.layerStatement .cdAmount.type .amountList1 dd{width:50%} .fullLayer.layerStatement .cdAmount .toggleList > li:first-child{border-top:0} .fullLayer.layerStatement .cdAmount .toggleList > li{width:100%;border-bottom:0;background:#fff} .fullLayer.layerStatement .cdAmount .toggleList > li > a{position:relative;display:table;width:100%;height:auto;color:#696e76;} .fullLayer.layerStatement .cdAmount .toggleList > li > a > span{display:table-cell;vertical-align:middle;padding:4px 50px 4px 0;font-size:1rem;line-height:1.250em} .fullLayer.layerStatement .cdAmount .toggleList > li > a:after{content:'';display:block;position :absolute;right:0;top:50%;width:24px;height:24px;margin-top:-15px;background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/arr/arr_down_24_000.png');background-size:24px} .fullLayer.layerStatement .cdAmount .toggleList > li.on > a{background:transparent;color:#696e76;} .fullLayer.layerStatement .cdAmount .toggleList > li.on > a:after{content:'';display:block;position:absolute;right:0;top:50%;width:24px;height:24px;margin-top:-15px;background-size:24px;-webkit-transform:rotate(180deg);transform:rotate(180deg)} .fullLayer.layerStatement .cdAmount .toggleList .toggleView{display:none;padding:12px 0;background:transparent;font-size:1rem} /* //200220 매출전표 팝업 */ /* 200610 Easy all카드 선택서비스 */ .ezAllCard .selService>.inner>div>a, .ezAllCard .selService>.inner>div>div{height:auto} .ezAllCard .selService>.inner>div>a>strong .ico img, .ezAllCard .selService>.inner>div>div>strong .ico img{width:40px;height:40px} .ezAllCard.tbsList1 li{display:table;width:100%;-webkit-box-flex:none;-webkit-flex:none;flex:none} .ezAllCard.tbsList1 .img{display:table-cell;width:40px;height:40px;vertical-align:middle} .ezAllCard.tbsList1 img{display:block} .ezAllCard.tbsList1 li > dl{display:table-cell;padding:0 0 0 16px;vertical-align:middle} .ezAllCard.tbsList1 li > dl dd{color:#696e76;font-size:0.875rem;line-height:1.25rem} /* 서비스 선택 전 */ .setSvcWrap{position:relative} .setSvcWrap .tbsType1 thead tr:first-child th{border-bottom:0} .setSvcWrap .tbsType1 thead tr:last-child td{border-bottom:1px solid #c9c9c9;background:#f2f2f2} .setSvcWrap .tbsType1 tbody th{background:transparent;color:#696e76;} .setSvcWrap .tbsType1 tbody td{height:25px;color:#696e76;} .setSvcWrap .tbsType1 tfoot th, .setSvcWrap .tbsType1 tfoot td{padding:15px 5px;border-bottom:1px solid #e9e9e9;border-left:1px solid #e9e9e9} .setSvcWrap .tbsType1 tfoot th:first-child, .setSvcWrap .tbsType1 tfoot td:first-child{border-left:0} .setSvcWrap .tbsType1 .ezAllsvc{color:#26282c} .setSvcWrap .blockInfo{position:relative;height:50px;margin:0 4px;padding:3px 0 0 0;box-sizing:border-box} .setSvcWrap .blockInfo span{position:relative;display:block;height:8px;margin:4px 0 0 0;background:rgba(0, 0, 0, .08)} .setSvcWrap .blockInfo span:before, .setSvcWrap .blockInfo span:after{content:'';position:absolute} .setSvcWrap .blockInfo span:before{top:0;left:0;height:8px} .setSvcWrap .blockInfo span:after{top:-4px;width:14px;height:14px;margin:0 0 0 -7px;border:1px solid #dfdfdf;border-radius:100%;background:#fff;box-shadow:1px 2px 4px 0 rgba(0, 0, 0, .5);box-sizing:border-box} .setSvcWrap .blockInfo span:nth-child(1):before{width:16.66%;background:#ffc69b;z-index:10} .setSvcWrap .blockInfo span:nth-child(1):after{left:16.66%;z-index:10} .setSvcWrap .blockInfo span:nth-child(2):before{width:50%;background:#ff9c54;z-index:5} .setSvcWrap .blockInfo span:nth-child(2):after{left:50%;z-index:5} .setSvcWrap .blockInfo span:nth-child(3):before{width:84%;background:#f76900;z-index:1} .setSvcWrap .blockInfo span:nth-child(3):after{left:84%;z-index:1} .setSvcWrap .selSvc{position:absolute;top:51px;right:0;bottom:0;left:0;border:2px solid #ffcc00;background:rgba(255, 255, 255, .87);text-align:center} .setSvcWrap .selSvc .alMid{position:absolute;top:50%;right:0;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)} .setSvcWrap.blockType .selSvc{position:absolute;top:101px;right:0;bottom:51px;left:0;border:2px solid #ffcc00;background:rgba(255, 255, 255, .87);text-align:center} /* 서비스 선택 레이어 팝업 */ .popCont.selSvcList .tbsType1 tbody tr td{min-height:92px;height:92px;padding:0;border-right:1px solid #e9e9e9;background:#f8f9f9;vertical-align:top} .popCont.selSvcList .tbsType1 tbody tr td:first-child{border-left:1px solid #e9e9e9} .popCont.selSvcList .ezAllsvc{position:relative;height:100%;min-height:100%} .popCont.selSvcList .mLine2 .ezAllsvc{height:100%;min-height:100%} .popCont.selSvcList .ezAllsvc .formWrap{position:relative;display:block;height:100%;min-height:100%} .popCont.selSvcList .ezAllsvc .formWrap input[type='checkbox']+label.focus, .popCont.selSvcList .ezAllsvc .formWrap input[type='checkbox']+label{display:block;height:100%;min-height:100%;padding:16px 0;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:20px} .popCont.selSvcList .ezAllsvc .formWrap input[type='checkbox']+label:before{position:absolute;top:-5px;left:-5px;width:24px;height:24px;margin-right:0;background:none;border-radius:24px;color:#fff;font-size:0.875rem;line-height:1.5rem;text-align:center} .popCont.selSvcList .ezAllsvc .formWrap input[type='checkbox']:checked+label:before{background:#448aff;box-shadow:0 1px 3px 0 rgba(68, 138, 255, .24), 0 0 3px 0 rgba(68, 138, 255, .12);z-index:5} .popCont.selSvcList .ezAllsvc .formWrap input[type='checkbox']:checked+label:after{content:'';position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:2px solid #ffcc00;z-index:1} .popCont.selSvcList .ezAllsvc .formWrap label span{display:block} .popCont.selSvcList .ezAllsvc .formWrap.disabled img{opacity:.6} .popCont.selSvcList .ezAllsvc .formWrap.disabled label{opacity:.24} .popCont.selSvcList .ezAllsvc .formWrap.checked{background:#fff} .popCont.selSvcList .ezAllsvc .formWrap.checked label span, .popCont.selSvcList .ezAllsvc .formWrap.checked label img{opacity:.6} .popCont.selSvcList .ezAllsvc .formWrap.chkCount1 input[type='checkbox']:checked+label:before{content:'1'} .popCont.selSvcList .ezAllsvc .formWrap.chkCount2 input[type='checkbox']:checked+label:before{content:'2'} .popCont.selSvcList .ezAllsvc .formWrap.chkCount3 input[type='checkbox']:checked+label:before{content:'3'} .popCont.selSvcList .ezAllsvc .formWrap.chkCount4 input[type='checkbox']:checked+label:before{content:'4'} .popCont.selSvcList .ezAllsvc .formWrap.chkCount5 input[type='checkbox']:checked+label:before{content:'5'} .popCont.selSvcList .ezAllsvc .formWrap.chkCount6 input[type='checkbox']:checked+label:before{content:'6'} .popCont.selSvcList .ezAllsvc .formWrap.chkCount7 input[type='checkbox']:checked+label:before{content:'7'} .popCont.selSvcList .ezAllsvc .formWrap.chkCount8 input[type='checkbox']:checked+label:before{content:'8'} .popCont.selSvcList .ezAllsvc .formWrap.chkCount9 input[type='checkbox']:checked+label:before{content:'9'} .popCont.selSvcList .ezAllsvc .formWrap.chkCount10 input[type='checkbox']:checked+label:before{content:'10'} .popCont.selSvcList .ezAllsvc .formWrap.chkCount11 input[type='checkbox']:checked+label:before{content:'11'} .popCont.selSvcList .ezAllsvc .formWrap.chkCount12 input[type='checkbox']:checked+label:before{content:'12'} .popCont.selSvcList .ezAllsvc .formWrap.chkCount13 input[type='checkbox']:checked+label:before{content:'13'} .popCont.selSvcList .ezAllsvc .formWrap.chkCount14 input[type='checkbox']:checked+label:before{content:'14'} .popCont.selSvcList .ezAllsvc .formWrap.chkCount15 input[type='checkbox']:checked+label:before{content:'15'} .popCont.selSvcList .ezAllsvc .formWrap.chkCount16 input[type='checkbox']:checked+label:before{content:'16'} .popCont.selSvcList .ezAllsvc .formWrap.chkCount17 input[type='checkbox']:checked+label:before{content:'17'} .popCont.selSvcList .ezAllsvc .formWrap.chkCount18 input[type='checkbox']:checked+label:before{content:'18'} .popCont.selSvcList .ezAllsvc .formWrap.chkCount19 input[type='checkbox']:checked+label:before{content:'19'} .popCont.selSvcList .ezAllsvc .formWrap.chkCount20 input[type='checkbox']:checked+label:before{content:'20'} /* 정해진 할인 영역이란? 레이어 팝업 */ .defSale_info{position:relative} .defSale_info .tbsType1 thead th, .defSale_info .tbsType1 tbody td{height:32px;padding:0} .defSale_info .secInfo{position:absolute;top:33px;right:0;left:0;height:67px;border:1px solid #f46600;background:rgba(252, 242, 234, .8);box-sizing:border-box;text-align:center} .defSale_info .secInfo p{position:absolute;top:50%;right:0;left:0;transform:translateY(-50%)} .defSale_info.type01 .secInfo.sec02{top:99px} .defSale_info.type02 .secInfo.sec02{top:99px;height:34px} .defSale_info.type02 .secInfo.sec03{top:132px;height:34px} .defSale_info.type03 .secInfo{height:34px} .defSale_info.type03 .secInfo.sec01{top:33px} .defSale_info.type03 .secInfo.sec02{top:66px} .defSale_info.type03 .secInfo.sec03{top:99px} .defSale_info.type03 .secInfo.sec04{top:132px} /* 구간별 이용실적 / 할인 한도 안내 레이어 팝업 */ .grayBox .saleDivInfo:after{content:'';display:table;clear:both} .grayBox .saleDivInfo li{float:left;width:33.33%;text-align:center} .grayBox .saleDivInfo li:before{content:'';display:block;height:16px;margin:0 0 8px 0;background:#ffc69b} .grayBox .saleDivInfo li:nth-child(2):before{background:#ff9c54} .grayBox .saleDivInfo li:nth-child(3):before{background:#f76900} /* 구간 할인 한도 패턴 레이어 팝업 */ .ezAll_selPattern:after, .ezAll_selPattern > ul > li:after{content:'';display:table;clear:both} .ezAll_selPattern > ul > li{margin:8px 0 0 0} .ezAll_selPattern > ul > li:first-child{margin-top:0} .ezAll_selPattern .patternWrap{position:relative;padding:16px 16px 16px 64px;border:1px solid rgba(0, 0, 0, .24);background:#f8f9f9} .ezAll_selPattern .patternWrap:after{content:'';display:table;clear:both} .ezAll_selPattern .patternWrap:before{content:'';position:absolute;top:49px;right:16px;bottom:16px;left:64px;border:1px solid #f46600;background:rgba(252, 242, 234, .7);z-index:5} .ezAll_selPattern .patternWrap input{top:50%;left:0;transform:translateY(-50%)} .ezAll_selPattern .patternWrap label{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;z-index:15} .ezAll_selPattern .patternWrap label:before{position:absolute;top:50%;left:16px;transform:translateY(-50%)} .ezAll_selPattern .patternWrap.checked{background:#fff} .ezAll_selPattern .patternWrap.checked label{border:2px solid #ffcc00} .ezAll_selPattern .patternWrap input[type='radio']:checked+label:before{left:14px} .ezAll_selPattern .patternWrap dl{position:relative;float:left;width:33.33%;border-top:1px solid rgba(0, 0, 0, .87);border-left:1px solid rgba(0, 0, 0, .16);box-sizing:border-box;color:#000;font-size:0.875rem;line-height:1.25rem;text-align:center} .ezAll_selPattern .patternWrap dl:first-child{border-left:0} .ezAll_selPattern .patternWrap dt{min-height:26px;padding:6px 0 0 0;background:#f2f2f2} .ezAll_selPattern .patternWrap dd{z-index:1} .ezAll_selPattern .patternWrap dd p{position:absolute;top:50%;right:0;left:0;padding:35px 0 0 0;transform:translateY(-50%);z-index:10} .ezAll_selPattern .patternWrap dd p.dis{color:#8c949e} .ezAll_selPattern .patternWrap dd span{display:block;height:32px;border-bottom:1px solid rgba(0, 0, 0, .16)} .ezAll_selPattern .patternWrap dd span:last-child{border-bottom:0} @media screen and (max-width: 320px){ .setSvcWrap .selSvc{top:48px} } /* //200610 Easy all카드 선택서비스 */ /* vip라운지 개선 */ .vipInfoBox{padding:16px 16px 32px 16px;background:#415384;color:#fff} .vipInfoBox > p{padding:16px 0 0 0;line-height:1.5rem} .vipInfoBox .fc9{color:#ffdf00} .vipInfoBox > .tbsList1{margin:24px 0 -16px 0;padding:8px 0 0 0;border-top:1px solid rgba(255, 255, 255, .87)} .vipInfoBox .tbsList1, .vipInfoBox .tbsList1 li>span{color:#fff} .vipInfoBox .tbsList1 li{padding:8px 0 0 0;border:0} .contArea .vipCont .tabBox>.tabCont>.toggleList{margin:0} .vipBenefit{max-width:336px;margin:0 auto;font-size:0;line-height:0;text-align:center} .vipBenefit li{display:inline-block;width:33.33%;font-size:0.875rem;line-height:1.25rem} .vipBenefit a{position:relative;display:block} .vipBenefit a:before{content:'';display:block;width:60px;height:60px;margin:0 auto 8px auto;background:#eef1f2;border-radius:100%} .vipBenefit a:after{content:'';position:absolute;top:10px;left:50%;width:40px;height:40px;margin:0 0 0 -20px;background-size:40px;background-repeat:no-repeat} .vipBenefit a.event:after{background-image:url(https://img1.kbcard.com/LT/cxh/kbcard_img/svg/common/ico/visual/40/ico_gift_40.svg)} .vipBenefit a.overseas:after{background-image:url(https://img1.kbcard.com/LT/cxh/kbcard_img/svg/common/ico/visual/40/ico_air_40.svg)} .vipBenefit a.store:after{background-image:url(https://img1.kbcard.com/LT/cxh/kbcard_img/svg/common/ico/visual/40/ico_store_40.svg)} .contArea.vipRenew{padding:0;background:#334472} .contArea.vipRenew:after{height:1px;margin-top:0;border:0} .contArea.vipRenew .vipInfoBox {background:#334472} .contArea.vipRenew .tabDep1{background:#415384} .contArea.vipRenew .tabDep1 li{border-bottom-color:#415384} .contArea.vipRenew .tabDep1 li a{color:#fff} .contArea.vipRenew .tabDep1 li.on a{background:#334472;color:#ffde00;font-weight:bold} .contArea.vipRenew .tabDep1 li.on:after{background-color:#334472} .vipTab .contArea.vipRenew, .vipTab .contArea.vipRenew .vipintro_Cont{background:#fff} .vipTab .contArea.vipRenew .vipintro_Cont{color:#26282c} .vipTab .contArea.vipRenew .vipintro_Cont>p em{color:#334472} .vipTab .contArea.vipRenew .vipintro_Cont>.btnBox>a{border:1px solid rgba(0, 0, 0, .87);color:#26282c} /* //vip라운지 개선 */ /* btn hole 클릭시 공백처리 */ .btnHole{display:block;position:absolute;top:12px;right:8px;width:24px;height:24px;background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/24/ico_close_24_000.png') no-repeat;background-size:24px;opacity:0.6;color:transparent;line-height:0;font-size:0}/* top:24px */ .inpTxt1 label input + .btnHole, .inpTxt1 label + input + .btnHole{top: 41px;} /* 대환론 상품추가 상환정보 */ .tbsList1.fl_type{padding:23px 8px 24px;border-bottom:1px solid rgba(0, 0, 0, .16)} .tbsList1.fl_type li{padding:8px 0 0 0;border-bottom:none} .tbsList1.fl_type li:first-child{padding:0} .tbsList1.fl_type li > span+strong{float:right} /* //대환론 상품추가 상환정보*/ /* 모바일 단독카드 안내 */ .btnAnchor a{display:block;padding:13px 0 11px;background:#b2d6ef;text-align:center;color:#000;font-size:0.875rem} .btnAnchor a span{display:inline-block;font-size:14px;line-height:24px} .btnAnchor a span:after{content:"";display:inline-block;width:24px;height:24px;margin-left:4px;background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/arr/arr_down_24_000.png');background-size:24px;vertical-align:top;transition:transform 300ms} /* //모바일 단독카드 안내 */ /* 고객정보 일괄변경 기능추가*/ .termsBox.input .inforCheck.noLink2{padding:14px 16px 14px 48px} .termsBox.input .inforCheck.noLink2 .formWrap{position:relative;top:auto;left:0;width:auto;height:auto} .termsBox.input .inforCheck.noLink2 label{width:100%;font-size:0.875rem;line-height:1.333em;color:#696e76;} .termsBox.input .inforCheck.noLink2 label::before{position:absolute;top:-3px;left:-32px;margin:0} /* //고객정보 일괄변경 기능추가*/ /* 카드신청 프로세스 개선 */ /* KCB 정보 간편입력 동의 - 박진수 tobe 삭제 처리 .kcbPop .termsBox .other{margin-top:0;padding-top:0} .kcbPop .termsBox .other:first-child:before{height:0; background:none} .kcbPop .other .inforCheck.noLink label:before{left:-40px;top:6px} .kcbPop .other .inforCheck.noLink{padding:16px 4px 16px 56px !important} .kcbPop .other .termsBox.type3.input .inforCheck .formWrap{top:0} .kcbPop .other .formWrap label > p{color:#696e76;} .kcbPop .termsBox .other .inforCheck.noLink label{line-height:1.43}*/ .comeUp .selectList.icon li a{padding:16px 44px 16px 60px} .comeUp .selectList.icon li a span{font-size:0.875rem;line-height:1.43;color:#696e76;} .comeUp .selectList.icon li{background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/32/ico_card2_32.png') no-repeat 16px center; background-size:32px; } .comeUp .selectList.icon li + li{background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/32/ico_phone2_32.png')no-repeat 16px center;background-size:32px} .certificateList>ul>li .ico .termination{position:absolute;top:0;left:0;width:100%;height:100%;line-height:64px;font-size:14px;color:#26282c;text-align:center} .cardlistBox{border:1px solid rgba(0,0,0,.16)} .cardUser{position:relative; background:#eef1f2; padding:15px; text-align:center; font-size:1.000rem; color:#26282c; border-bottom:1px solid rgba(0,0,0,.16); vertical-align:middle} .cardlistBox .cardUser label{font-size:1rem; line-height:1.5} .cardlistBox .cardUser label:before{display:block;position:absolute;left:15px;top:50%;margin-top:-12px} .ios .cardlistBox .cardUser label:before{margin-top:-10px} .cardlistBox .cardList2{margin-right:0;padding-left:16px} .cardlistBox .cardList2 > ul> li{padding:16px 0} .cardlistBox .cardList2 > ul> li:last-child{border-bottom:0} /* 정보입력 */ .oneWon_auth{padding:16px;border:1px solid rgba(0,0,0,0.08);background-color:#f5f5f5} .oneWon_auth .txt1{font-size:1rem;letter-spacing:-0.2px;text-align:center;line-height:1.5;color:#26282c} .oneWon_auth .txt2{font-size:0.875rem;text-align:center;line-height:1.5;color:#696e76;} .oneWon_auth [class^=txt]~[class^=txt]{margin-top:6px} .oneWon_auth .authInfo{margin-top:16px;padding-top:16px;border-top:1px solid rgba(0,0,0,0.16)} .oneWon_auth .authInfo dl:first-child{width:63%} .oneWon_auth .authInfo dl:last-child{width:37%} .oneWon_auth .authInfo dt{padding:0 10px;font-size:0.875rem;text-align:center;line-height:1.43;color:rgba(0,0,0,0.45)} .oneWon_auth .authInfo dd{padding-bottom:2px;margin-top:4px;font-size:1.500rem;font-weight:bold;letter-spacing:-0.2px;text-align:center;line-height:1.33;color:#26282c} .infoBox.bgGrayRadius4{padding:18px 24px 14px 24px;border-radius:4px} .idCard_img{margin:0 16px 16px} /* 카드본인확인 신분증 등록 */ .fileBox label {display:inline-block;cursor:pointer;} .fileBox input[type="file"]{position: absolute;width:1px; height:1px;padding:0; margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;visibility:hidden} .fileBox input:disabled {border: 1px solid rgba(0, 0, 0, .16);color:#26282c;background: #fff;} .fileBox .selType1 {float: left;} .fileBox.type2 span{line-height:48px;font-weight:bold;padding-right:8px;vertical-align: middle;} .btnText.attachAdd {width:100%;text-align:left;text-decoration: underline;background:none;} .fileBox.type2 input:disabled {float:right;width:calc(100% - 50px) !important;} .btnText.attachAdd:after {float:right;background: url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/24/ico_close_24_000.png) no-repeat center center;background-size: 24px;} .imgBox.type2 > span {line-height:48px;font-weight:bold;padding-right:8px;vertical-align: middle;} .imgBox.type2 > span + button{float:right;width:calc(100% - 50px) !important;margin-top: 8px;} /* //카드신청 프로세스 개선 */ /* 테이블 공통 */ .tbsList2 {margin-top:16px; border-bottom:1px solid rgba(0, 0, 0, 0.08);} .tbsList2 > li {padding-bottom:24px; border-top:1px solid rgba(0, 0, 0, 0.08);} .tbsList2 > li:first-child {border-top:0;} .tbsList2 > li + li {padding-top: 24px;} .tbsList2 > li > div{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -webkit-box-align: center; font-size: 1.125rem; line-height: 1.625rem;} .tbsList2 > li > div + ul, .tbsList2 > li > ul + div {margin-top:24px;} .tbsList2 > li li{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -webkit-box-align: center;font-size:1rem; line-height: 1.5rem;} .tbsList2 > li li.top, .tbsList2 > li > div.top{-webkit-align-items: flex-start; align-items: flex-start; -webkit-box-align: start;} .tbsList2 > li li + li{margin-top:8px;} .tbsList2 > li li span{color:#696e76;} .tbsList2 > li li strong{font-weight:normal;} .tbsList2 > li > ul + div{padding-top:0;} .tbsList2 > li > div + ul{padding-top:0;} .tbsList2 .tbsTitle{margin-bottom: 1.5rem; font-size: 0.875rem; color: #696e76; line-height: 1.375rem;} .tbsList2 .tbsTitle + ul{padding-top:0;} .tbsList2 strong{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;text-align:right;} .tbsList2 .txtLink2{display:block;margin-top:8px;text-decoration:underline;color:#696e76;} /* //테이블 공통 */ /* 초 개인화 이벤트 */ .perosnalEvt .starshopList .listType+.listType {margin-top:0} .perosnalEvt .starshopList .listType>ul>li>.info {display:table;width:100%;min-height:120px;padding:24px 16px;table-layout:fixed;background:#fff;box-sizing:border-box;box-shadow:0 1px 2px rgba(0,0,0,0.18);letter-spacing:-0.5px} .perosnalEvt .starshopList .listType>ul>li>.info>.txt>* {display:block;} .perosnalEvt .starshopList .listType>ul>li>.info>.txt{display:table-cell;padding-right:10px;vertical-align:top} .perosnalEvt .starshopList .listType>ul>li>.info>.txt>.etc {margin-bottom:8px} .perosnalEvt .starshopList .listType>ul>li>.info>.txt>.etc:after{content:'';display:block;clear:both} .perosnalEvt .starshopList .listType>ul>li>.info>.txt .tit {color:#26282c;font-size:1rem;line-height:22px} .perosnalEvt .starshopList .listType >ul>li>.info>.txt .distance{float:left;font-size:12px;line-height:1.33;color:#26282c;background:url(https://img1.kbcard.com/cxh/ia_img/BN/ico_distance.png) no-repeat 0 50%;background-size:9px 12px;padding-left:12px} .perosnalEvt .starshopList .listType>ul>li>.info>.txt>.benefit {margin-top:4px} .perosnalEvt .starshopList .listType>ul>li>.info>.txt>.benefit>span {color:#696e76;font-size:0.875rem;line-height:1.43} .perosnalEvt .starshopList .listType>ul>li>.info>.txt>.benefit>span:before {content:'';display:inline-block;height:10px;margin:0 5px 0 3px;border-left:1px solid #e0e0e0} .perosnalEvt .starshopList .listType>ul>li>.info>.txt>.benefit>span:first-child:before {display:none;} .perosnalEvt .starshopList .listType>ul>li>.info>.thum {display:table-cell;position:relative;width:87px;height:auto;padding-left:7px;box-sizing:border-box;text-align:right;vertical-align:top} .perosnalEvt .starshopList .listType>ul>li>.info>.thum img {width:80px;height:80px;border-radius:4px;vertical-align:top} .perosnalEvt .starshopList .listType>ul>li>.info>.thum .btnTel {display:inline-block;width:85px;height:40px;margin:16px 0 0 0;border:1px solid #c2c2c2; border-radius:40px;box-sizing:border-box;font-size:0.875rem;line-height:40px;text-align:center} .perosnalEvt .starshopList .listType>ul>li>.info>.thum .btnTel:before{content:'';display:inline-block;position:relative;width:24px;height:24px;margin-right:4px;background:url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/24/ico_call_24_000.png) 0 0;background-size:24px;vertical-align:middle} .perosnalEvt .starshopList .listType>ul>li>a>.txt .category .myChk {color:rgba(0, 0, 0, .0);vertical-align:middle} .perosnalEvt .starshopList .listType>ul>li>a>.txt .category .myChk img {width:14px;vertical-align:middle} .perosnalEvt .starshopList .bnrPersonal {padding:24px 16px 0 16px} .perosnalEvt .starshopList .contArea {padding:0 16px} .perosnalEvt .starshopList .searchTxt {position:relative;} .perosnalEvt .starshopList .searchTxt span {display:inline-block} .perosnalEvt .starshopList .searchTxt .recomStore {display:inline-block;line-height:1.5} .perosnalEvt .starshopList .searchTxt .recomStore:before {content:'';display:inline-block;width:1px;height:12px;margin:0 4px;background:rgba(0, 0, 0, .24);vertical-align:middle} .perosnalEvt .starshopList .searchTxt .fncArea {position:absolute;top:8px;right:16px;z-index:900;width:auto;padding:0} .perosnalEvt .starshopList .fncArea .fncView .switchBtn {height:32px;padding:0 8px;border-radius:3px;background:#6b7079;font-size:0.875rem;line-height:32px} .perosnalEvt .starshopList .fncArea .fncView .switchBtn span {color:#fff} .perosnalEvt .starshopList .mapType .listType {right:16px;bottom:16px;left:16px;width:auto;padding:0;background:transparent} .perosnalEvt .starshopList .mapType .listType .swiper-container {position:relative; z-index:1; width:100%; margin:0 auto; padding:0; list-style:none;} .perosnalEvt .starshopList .mapType .listType .swiper-wrapper {position:relative; z-index:1; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-sizing:content-box; box-sizing:content-box; width:100%; height:100%; -webkit-transition-property:-webkit-transform; transition-property:-webkit-transform; transition-property:transform; transition-property:transform, -webkit-transform;} .perosnalEvt .starshopList .mapType .listType .swiper-slide {position:relative; width:100%; height:100%; padding:0; -webkit-transition-property:-webkit-transform; transition-property:-webkit-transform; transition-property:transform; transition-property:transform, -webkit-transform; -ms-flex-negative:0; flex-shrink:0; -webkit-box-sizing:border-box; box-sizing:border-box;} .perosnalEvt .starshopList .mapType .listType .swiper-slide>.info {position:static;padding:24px 16px;border-bottom:0;border-radius:0 !important;box-shadow:none;overflow:visible} .perosnalEvt .starshopList .mapType .listType .swiper-pagination {position:absolute;bottom:16px;left:16px;font-size:0;line-height:0;z-index:5} .perosnalEvt .starshopList .mapType .listType .swiper-pagination span {display:inline-block;width:8px;height:8px;margin:0 2px;border:1px solid rgba(0, 0, 0, .47);border-radius:100%;box-sizing:border-box} .perosnalEvt .starshopList .mapType .listType .swiper-pagination span:first-child {margin-left:0} .perosnalEvt .starshopList .mapType .listType .swiper-pagination .swiper-pagination-bullet-active {border-color:rgba(0, 0, 0, 0.87);background:rgba(0, 0, 0, 0.87)} .perosnalEvt .starshopList .mapType .listType>ul>li {margin-top:0;} .perosnalEvt .starshopList .mapType .listType>ul>li>a>.thum {padding-top:8px;} .perosnalEvt .starshopList .mapType .listType>ul>li .btnClose {right:8px} .perosnalEvt .starshopList .mapType .fncArea {position:absolute;top:0;right:0;width:auto} .perosnalEvt .starshopList .mapType .fncArea .fncView .btnRemap, .perosnalEvt .starshopList .mapType .fncArea .fncView .btnPoint {width:auto;height:32px;padding:0 8px 0 28px;border:solid 1px rgba(0, 0, 0, 0.24);border-radius:3px;box-shadow:none;font-size:0.875rem} .perosnalEvt .starshopList .mapType .fncArea .fncView .btnRemap:after, .perosnalEvt .starshopList .mapType .fncArea .fncView .btnPoint:after {left:2px;margin-left:0} .perosnalEvt .starshopList .fncArea+.listType {border-top:0} .flag.evt {display:inline-block;padding:3px 4px 1px 4px;border-radius:2px;background:#7f6ee3;color:#fff;font-size:0.875rem;line-height:1.43;vertical-align:middle} @media screen and (max-width:320px) { .perosnalEvt .starshopList .searchTxt .fncArea {top:7px} } /* //초 개인화 이벤트 */ /* 혜택 포인트리 화면 개선 */ .moreBtn.type4 {margin-top:20px;border-top:1px solid #988aec} .moreBtn.type4 a {background:none;color:#fff;} .moreBtn.type4 a span {opacity:0.6;} .moreBtn.type4 a span:after {content:"";display:inline-block;transition:all 0.5s;transform:rotate(0deg);width:24px;height:24px;background-size:100% auto;background-image:url("https://img1.kbcard.com/LT/cxh/kbcard_img/common/arr/arr_down_24_fff.png");background-repeat:no-repeat;} .moreBtn.type4.close a span:after {transform:rotate(-180deg);} /* //혜택 포인트리 화면 개선 */ /* VIP카드 보유 고객대상 받은 혜택 내역 조회 */ .contArea.vipRenew{padding:0;background:transparent} .contArea.vipRenew:after{height:1px;margin-top:0;border:0} .contArea.vipRenew .vipInfoBox {background:#334472} .contArea.vipRenew .benefitBox {position:relative; margin-bottom:-1px; padding:32px 16px 0 16px; background:#fff; overflow:hidden; z-index:10;} .contArea.vipRenew .benefitBox:after {content:"";display:block;margin:16px -16px 0;height:6px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#f2f3f4} .contArea.vipRenew .benefitBox > dl {display:table; width:100%; min-height:120px; padding:53px 16px 16px 16px; background:#415384 url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/img/img_vipBenefit.png') no-repeat right bottom; background-size:146px 106px; box-sizing:border-box; vertical-align:bottom;} .contArea.vipRenew .benefitBox > dl dt {color:rgba(255, 255, 255, .6);} .contArea.vipRenew .benefitBox > dl dt a {position:relative; padding:0 24px 0 0; color:rgba(255, 255, 255, .6); font-size:1rem; line-height:1.5rem;} .contArea.vipRenew .benefitBox > dl dt a:after {content:''; position:absolute; top:50%; right:0; display:block; width:24px; height:24px; margin-top:-12px; background:url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/arr/arr_dropdown_24_fff.png) no-repeat; background-size:24px; opacity:.6; vertical-align:middle;} .contArea.vipRenew .benefitBox > dl dd {margin:3px 0 0 0; color:#fff; font-size:1.5rem; font-weight:bold; line-height:1.5rem;} .contArea.vipRenew .benefitBox .tbsList1 {margin-right:-16px;} .contArea.vipRenew .benefitBox .tbsList1 li {padding:24px 16px 24px 0;} .ios .contArea.vipRenew .benefitBox .tbsList1 li {padding:26px 16px 22px 0;} .contArea.vipRenew .benefitBox .tbsList1 li:last-child {border-bottom:0;} .contArea.vipRenew .benefitBox .tbsList1 em {display:inline;} .contArea.vipRenew .benefitBox .tbsList1 li>span {color:#26282c;} .contArea.vipRenew .benefitBox .tbsList1 li>span em {display:inline-block; margin:0 0 0 4px; padding:2px 8px; border-radius:11px; background:#dde1e4; color:#696e76; font-size:0.75rem; line-height:1rem; vertical-align:middle;} .contArea.vipRenew .benefitBox .tbsList1 li>strong .btnText {color:#000; font-size:1rem;} .contArea.vipRenew .benefitBox .tbsList1 li>strong .btnText em {color:#26282c; font-size:0.875rem;} .contArea.vipRenew .tabDep1{background:#fff} .contArea.vipRenew .tabDep1 li{border-bottom:none;} .contArea.vipRenew .tabDep1 li a{display:inline-block;color:#696e76;} .contArea.vipRenew .tabDep1 li.on {border-color:transparent;} .contArea.vipRenew .tabDep1 li.on a{background:transparent;color:#26282c;font-weight:bold} .contArea.vipRenew .tabDep1 li.on:after{background-color:rgba(0, 0, 0, .87)} /* //VIP카드 보유 고객대상 받은 혜택 내역 조회 */ /* basicIcon24 추가 */ .basicIcon24 .telList {display:table;} .basicIcon24 .telList li {display:table; width:100%; margin:8px 0 0 0; padding:0;} .basicIcon24 .telList li:first-child {margin-top:0;} .basicIcon24 .telList li > span {display:table-cell; width:10%; padding:0 16px 0 0; white-space:nowrap;} .basicIcon24 .telList li > a {display:table-cell; line-height:1.5rem;text-align:right;} /* //basicIcon24 추가 */ /* 장기거래고객 레터링카드 - 201120 */ .infoBox.withImg {box-sizing:border-box;}/* table일경우 가로 풀 사이즈로 안되는 현상 발생 /SVC/DVIEW/MSBMCXHIASVSD0001 */ .infoBox.withImg .thum, .infoBox.withImg .txt {display:table-cell; vertical-align:middle;} .infoBox.withImg .txt {padding-left:16px;} .infoBox.withImg img{width:100%;height:auto;vertical-align:top} .radioSel + .letteringCard{margin-top:32px} .letteringCard{margin:0 -16px; padding:30px 16px; background:#f2f2f2} .letteringCard .img {position:relative; max-width:296px; margin:0 auto;} .letteringCard .img img{width:100%;height:auto;vertical-align:top} .letteringCard .img .letter{position:absolute; top:79px; right:32px; left:100px; color:rgba(255, 255, 255, .87); font-size:0.75rem; font-weight:bold; line-height:1.25rem; letter-spacing:-0.2px; word-break:break-all;text-align:center} .letteringCard .txtInp{margin:16px 0 0 0} .letteringCard .txtInp .byte{display:block; margin:8px 0 0 0; text-align:right; color:#696e76; font-size:0.875rem; line-height:1.25rem} /* //장기거래고객 레터링카드 */ /* 소개대출 안내 210120 */ .introLoanNew .infoBox {position:relative;display:block;width:auto;margin:16px;padding:0;border-radius:8px} .introLoanNew .infoBox img {display:block;max-width:100%} .introLoanNew .tabBox {padding:0 16px} .introLoanNew .tabList {margin:0 -16px;padding:0 16px} .introLoanNew .tabList .bar {display:none} .introLoanNew .tabDep1 {height:48px;padding:8px 0;border-bottom:0;box-sizing:border-box} .introLoanNew .tabDep1 li {margin:0; padding:0;border-bottom:0} .introLoanNew .tabDep1 li:last-child {padding-right:0;} .introLoanNew .tabDep1 li.on:after {display:none} .introLoanNew .tabDep1 li a {height:32px;min-height:0;padding:6px 13px 0 13px;line-height:1.5rem;letter-spacing:-0.2px} .introLoanNew .tabDep1 li.on a {padding:6px 12px 0 12px;border-radius:16px;background:#60584c;color:#fff;font-weight:bold} .ios .introLoanNew .tabDep1 li a {padding:6px 13px 0 13px} .ios .introLoanNew .tabDep1 li.on a {padding:6px 12px 0 12px} .introLoanNew .tabCont {margin-top:0} .introLoanNew .affiliatesList {margin-right:-16px} .introLoanNew .affiliatesList li {padding:24px 16px 24px 0;border-bottom:1px solid rgba(0, 0, 0, .16)} .introLoanNew .affiliatesList a {position:relative;display:block} .introLoanNew .affiliatesList img {display:block;max-height:24px} .introLoanNew .affiliatesList .loanTit {margin:8px 0 0 0;color:#696e76;font-size:0.875rem;line-height:1.25rem} .introLoanNew .affiliatesList .loanTit span {font-weight:normal} .introLoanNew .affiliatesList .loanInfo_box {position:relative;display:table;width:100%;margin:16px 0 0 0;box-sizing:border-box} .introLoanNew .affiliatesList .loanInfo_box dl {display:inline-block;width:auto;min-width:28%;vertical-align:top;white-space:nowrap} .introLoanNew .affiliatesList .loanInfo_box .limit {padding:0 16px 0 0} .introLoanNew .affiliatesList .loanInfo_box dt {color:#696e76;font-size:0.875rem;line-height:1.25rem} .introLoanNew .affiliatesList .loanInfo_box dd {margin:4px 0 0 0;font-size:1.125rem;line-height:1.5rem} .introLoanNew .affiliatesList .loanInfo_box dl:last-child {padding-left:0;} .introLoanNew .affiliatesList .loanInfo_box dl:first-child dd {color:#01a0c7;font-weight:bold} .introLoanNew .affiliatesList .lawInfo {margin:16px 0 0 0;color:rgba(0, 0, 0, .48);font-size:0.75rem;line-height:1rem} .introLoanNew .affiliatesList .btnBox {margin-top:24px} @media screen and (max-width:320px){ .introLoanNew .affiliatesList .loanInfo_box dl:last-child {width:auto;padding:0 0 0 16px} .introLoanNew.dType .affiliatesList .btnBox a {padding:0 8px} } /* //소개대출 안내 */ /* 201118_금융_안내화면 디자인 개편 */ .btnBlue{background:#01a0c7 !important;border:none;color:#fff} .cardLoan .infoBox{padding:32px 16px} .cardLoan .infoBox .btnLoanBox{margin:0 -16px;padding:0 8px;background:#fff} .cardLoan .infoBox .btnLoanBox .btnL{background:none;line-height:54px;height:54px} .cardLoan .infoBox .infTit{margin-top:32px;margin-bottom:8px;text-align:left;font-size:1.125rem;font-weight:600} .cardLoan .infoBox .refer{margin-top:16px;text-align:left} .cardLoan .infoBox .btnintr{text-decoration:underline;text-align:right} .cardLoan .infoBox .btnintr a{font-size:0.875rem;color:#696e76;} .cardLoan .infoBox .list_icon{display:-webkit-box;display:-webkit-flex;display:flex;margin:0 auto;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:center;justify-content:center;-webkit-align-items:flex-start;align-items:flex-start} .cardLoan .infoBox .list_icon li{position:relative;display:-webkit-inline-flex;display:inline-flex;width:33.33%;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:flex-start;justify-content:flex-start} .cardLoan .infoBox .list_icon .desc{margin-top:16px;font-size:0.875rem;line-height:1.43;color:rgba(34,34,34,0.8)} .cardLoan .infoBox .list_icon li::before{content:'';display:block;width:80px;height:80px;background-color:#fff;border-radius:50%;box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.1);background-size:48px;background-repeat:no-repeat;background-position:50% 50%} .cardLoan .infoBox .list_icon .calendar::before{background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/48/ico_calendar_48.png')} .cardLoan .infoBox .list_icon .cradit::before{background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/48/ico_cardReg_48.png')} .cardLoan .infoBox .list_icon .feefree::before{background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/48/ico_coinPer_48.png')} .cardLoan .infoBox .list_icon .cardminus::before{background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/48/ico_cardMinus_48.png')} .cardLoan .infoBox .list_icon .cardchx::before{background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/48/ico_cardChx_48.png')} .cardLoan .infoBox .list_icon .coin::before{background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/48/ico_coin_48.png')} .cardLoan .infoBox .list_icon .phonepw::before{background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/48/ico_pw_48.png')} .cardLoan .infoBox .list_icon .pie::before{background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/48/ico_pie_48.png')} .cardLoan .infoBox .list_icon .piePer::before{background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/48/ico_piePer_48.png')} .cardLoan .infoBox .list_icon .creditmag::before{background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/48/ico_creditManager_48.png')} .cardLoan .infoBox .list_icon .document::before{background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/48/ico_docum_48.png')} .cardLoan .infoBox .list_icon .webmem::before{background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/48/ico_webMem_48.png')} .cardLoan .infoBox .refer{display:block} .cardLoan .infoBox .refer strong{display:inline-block} .cardLoan .infoBox .refer .fc16{color:#f46600 !important} .cardLoan .loan_step .item{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;padding:16px;border:1px solid #ccc;border-radius:4px;-webkit-align-items:center;align-items:center} .cardLoan .loan_step .item ~ .item{margin-top:8px} .cardLoan .loan_step .item .num{width:26px;padding-right:32px;text-align:center;color:#222} .cardLoan .loan_step .item .num span{display:block;font-size:0.75rem;line-height:1.5} .cardLoan .loan_step .item .num strong{margin-top:8px;font-size:1rem;font-weight:bold} .cardLoan .loan_step .item .text{font-size:0.875rem;line-height:1.43;color:#696e76;} .cardLoan .loan_step .item .text .tit{display:block;font-size:1rem;letter-spacing:-0.2px;line-height:1.5;color:#000} .cardLoan .loan_step .item::after{content:'';position:absolute;top:16px;left:58px;bottom:16px;width:1px;background-color:#ddd} .cardLoan .statement{padding-top:0;} .cardLoan .statement:after{margin:32px -16px 0;} .cardLoan .statement.statebox{padding:24px 16px 0} .cardLoan .statement.statebox:after{margin:24px -16px 0;} .cardLoan .btnText{padding:0;font-size:1rem} .cardLoan .addSerbox{padding-left:16px} .cardLoan .addSerbox .toggleList>li:first-child{border-top:0} .cardLoan .intrbox{padding:24px 0;background:#fff;border-radius:8px;box-shadow:0 2px 4px 0 rgba(96, 97, 112, 0.16)} .cardLoan .intrbox dt{display:inline-block;margin-bottom:16px;padding:0 16px;font-size:0.875rem;line-height:1.71rem;background:#eef1f2;border-radius:22px} .cardLoan .intrbox dd em{display:inline-block;color:#01a0c7;font-weight:600} .cardLoan .intrbox dd strong{display:inline-block;font-size:1.5rem;font-weight:600;color:#01a0c7} .cardLoan .intrbox dd .cenl{padding-right:5px;text-decoration:line-through;color:#696e76;} .cardLoan .stateme *{font-size:1.125rem} .cardLoan .stateme dt{display:inline-block;margin-bottom:16px;padding:0 16px;color:#01a0c7;font-size:0.875rem;font-weight:600;line-height:1.5rem;letter-spacing:-0.18px;border:1px solid #01a0c7;background:#fff;border-radius:22px} .cardLoan .stateme dd{font-weight:600;color:#000} .cardLoan .stateme dd strong{display:inline-block;color:#01a0c7} .cardLoan .intrlist{display:table;table-layout:fixed;width:100%} .cardLoan .intrlist li{display:table-cell;border-left:1px solid rgba(0,0,0,0.16)} .cardLoan .intrlist li:first-child{border:none} /* 2021.11.17 asis→tobe 개선 .cardLoan .csIntro_list {margin-right:-16px}*/ .cardLoan .csIntro_list a {padding-left:0} .round_flag {display:inline-block; height:24px; padding:2px 8px; border-radius:100px; border:1px solid #000; font-size:14px !important; font-weight:normal !important; text-align:center; line-height:1.43; box-sizing:border-box;} .round_flag.fc1{border-color:rgba(0, 0, 0, .87) !important;}/*진회색*/ .round_flag.fc2{border-color:#f76900 !important}/*주홍*/ .round_flag.fc3{border-color:rgba(0, 0, 0, .87) !important}/*검정*/ .round_flag.fc4{border-color:#888 !important}/*연회색*/ .round_flag.fc5{border-color:#4a79d8 !important}/*파란색*/ .round_flag.fc6{border-color:#7f6ee3 !important}/*보라색 - 혜택 사용 */ .round_flag.fc7{border-color:#02aec4 !important}/*연녹색 - 금융 사용 */ .round_flag.fc8{border-color:#f35b42 !important}/*붉은색 - 혜택 사용 */ .round_flag.fc9{border-color:#ffd012 !important}/*노란색*/ .round_flag.fc10{border-color:#3c628b !important}/*혜택_vip 사용*/ .round_flag.fc11{border-color:rgba(0, 0, 0, .6) !important}/*연회색2*/ .round_flag.fc12{border-color:rgba(255, 255, 255, .7) !important}/*연회색3*/ .round_flag.fc13{border-color:#7da100 !important}/*녹색*/ .round_flag.fc14{border-color:#fb5252 !important}/*빨강*/ .round_flag.fc15{border-color:#01a0c7 !important}/*시안*/ .round_flag.fc16{border-color:#f46600 !important} /* //201118_금융_안내화면 디자인 개편 */ /* 210524 선택적 동의 */ .optionAgreePop .slideWrap{position:relative;height:100%;margin:0 -16px;} .optionAgreePop .slideWrap .slideBtn {position:fixed;top:50%;left:0;width:100%;} .optionAgreePop .slideWrap .slideBtn button {display:block;text-indent:-9999px;position:absolute;top:50%;width:24px;height:24px;margin-top:-12px;background:url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/arr/ico_popSlide_prev_off.png) no-repeat 0 0;background-size:cover;background-color:rgba(0,0,0,0.57);z-index:10} .optionAgreePop .slideWrap .slideBtn button.btnPrev{left:0px} .optionAgreePop .slideWrap .slideBtn button.btnPrev.deActive{background-image:url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/arr/ico_popSlide_prev_off.png)} .optionAgreePop .slideWrap .slideBtn button.btnNext{right:0;background-image:url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/arr/ico_popSlide_next_on.png)} .optionAgreePop .slideWrap .slideBtn button.btnNext.deActive{background-image:url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/arr/ico_popSlide_next_off.png)} .optionAgreePop .slideWrap .slideBtn button.deActive{cursor:none;} .optionAgreePop .slideWrap .slider{position:relative;height:calc(100% - 50px);z-index:1;} .optionAgreePop .slideWrap .slider .slideList{position:absolute;top:0;left:0;width:100%;height:100%;overflow-y: auto;} .optionAgreePop .slideWrap .slider .slideList:after{display:block;content:'';clear:both;height:0} .optionAgreePop .slideWrap .slider .slideList .item{float:left; height:100% !important; overflow-y:auto;} .optionAgreePop .slideWrap .num_page {position:fixed;bottom:75px;left:0;z-index:10;width:100%;padding:10px 0;background:rgba(255,255,255,.6);text-align:center;} .optionAgreePop .detailCon {padding:0 16px 50px 16px;box-sizing:border-box;} .optionAgreePop .popCont .detailCon {padding:0 0 50px 0;} .optionAgreePop .laybtnArea {position:fixed;bottom:0;left:0;z-index:10;width:100%;height:75px;padding-top:22px;background:#fff;text-align:center;box-sizing:border-box;} .optionAgreePop .laybtnArea .chkAll {display:none;} .optionAgreePop.all .laybtnArea .chkTxt {display:none;} .optionAgreePop.all .laybtnArea .chkAll {display:inline-block;} .agr-grade {position:relative;} .agreeGrade {position:relative;padding:32px 16px;margin: 0 -16px 28px -16px;box-sizing:border-box;} .agr-grade + .agr-grade{margin-top: 24px;padding-top: 24px;} .agr-grade + .agr-grade:before {content:'';position:absolute;top:0;left:-16px; right:-16px;height:6px;border-top:1px solid #ccc;background: #f2f3f4;} .agreeGrade ul {height:34px;} .agreeGrade ul li {position:relative; float:left; width:20%;height:8px;margin:0;padding:0;box-sizing:border-box;border-left:1px solid #fff;border-right:1px solid #fff;} .agreeGrade ul li.grade1 {background:#7790b8;border-left:none;} .agreeGrade ul li.grade2 {background:#71bdab;} .agreeGrade ul li.grade3 {background:#ffa900;} .agreeGrade ul li.grade4 {background:#df8545;} .agreeGrade ul li.grade5 {background:#f45c3e;border-right:none;} .agreeGrade ul li span {position:absolute; top:22px; width:100%; color:#000; font-size:12px;line-height:1;text-align:center;} .agreeGrade ul li.on:after {content:''; display:block;position:absolute; top:-4px; left:50%;width:16px;height:20px;margin-left:-8px;background:url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/ico_grade_marker.png) no-repeat 0 0;background-size:16px auto;} .agreeGrade .desc {margin-top:16px;color:#666;font-size:0.875rem;} .agreeGrade .desc p {display:none;} .agreeGrade:after {content:'';position:absolute;bottom:0;left:0;width:100%;height:6px;border-top:1px solid #ccc;background:#f8f8f8;} .agreeGrade .desc .btnArea {margin-top:0;text-align:center;} .agreeGrade .desc .btnArea a {display:inline-block;height:32px;-webkit-border-radius:3px;border-radius:3px;line-height:32px;padding:0 16px;background-color:#fff;font-size:0.875rem;border:1px solid #bbb !important} /*210511 : [My KB] 대금결제 _가상계좌 결제 세금납부 항목 추가*/ .billingInfo dl.date dd.date {box-sizing:border-box; padding-right:40px; position:relative;} .billingInfo dl.date dd.date .date_btn {position:absolute; top:-2px; right:0; background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/24/ico_filter2_24_000.png') no-repeat center center; width:26px; height:26px; background-size:26px auto; text-indent:-9999px;z-index:1;} .filter.gry_bg {background:#f5f5f5; padding: 20px 50px 20px 20px;} .filter.gry_bg h2 {color: #26282c; font-weight:600;} .filter.gry_bg em {color: #26282c;} .filter.gry_bg .btnFilter {border:none; color:#26282c; text-indent:-9999px; padding:0; width:32px;} .filter.gry_bg .btnFilter>span:after {background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/24/ico_filter2_24_000.png') no-repeat center center; width:32px; height:32px; background-size:32px auto; left:0; margin-top:-16px;} /*210526 : [고객센터] 도난분실신고 보상신청 시 동의 프로세스 변경*/ .in_ckbox {box-sizing:border-box; margin:20px 0 50px 0; border:1px solid #e1e1e1;} .in_ckbox .tt {text-align:center; background:#f9f9f9; font-weight:600; color:#333; padding:10px; border-bottom:1px solid #e1e1e1;} .in_ckbox ul {box-sizing:border-box; padding:10px 15px; background:#fff;} .in_ckbox ul li {margin-top:20px; text-align:right;} .in_ckbox ul li:first-child {margin-top:0;} .in_ckbox ul li .txt {text-align:left; word-break:break-all;} .in_ckbox ul li .formWrap {margin-top:5px;} .wemakeprice {background:#ee5555;color:#fff;} /* 21.06.29 금융약관 */ .kbopenapi_wrap {font-family: inherit !important;font-size:13px; line-height:1.6;} .kbopenapi_wrap * {margin:0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box;font-family: inherit !important; font-size:13px; line-height:1.6;} .kbopenapi_wrap ul, ol {list-style:none;} .kbopenapi_wrap a {color:inherit; text-decoration:none; word-break:break-all;} .kbopenapi_wrap { margin:0 auto; padding: 8px; } .kbopenapi_wrap .kbopenapi_header {display:block; } .kbopenapi_wrap .kbopenapi_big {font-weight:bold !important; font-size:14px !important;} .kbopenapi_wrap ul.kbopenapi_big li {font-weight:bold !important; font-size:14px !important;} .kbopenapi_h1 {margin-bottom:10px; font-weight:bold; font-size:18px; line-height:1.2; text-align:center;} .kbopenapi_wrap .kbopenapi_header > p {margin-bottom:10px;} .kbopenapi_wrap .kbopenapi_head {margin:20px 0 10px;} .kbopenapi_wrap .kbopenapi_title {display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; align-items:center; height:40px; padding:5px; padding-right:15px; background:#12406E; border-radius:20px;} .kbopenapi_wrap .kbopenapi_title .num {-webkit-box-flex:24px; -ms-flex:24px 0 0; flex:24px 0 0; width:24px; height:24px; line-height:24px; margin-right:6px; text-align:center; font-weight:bold; font-size:15px; background:#fff; color:#12406E; border-radius:50%;} .kbopenapi_wrap .kbopenapi_title h2 {font-weight:normal; font-size:14px; color:#fff; } .kbopenapi_wrap .kbopenapi_subtitle {display:inline-block; width: 150px; text-align:center; background:#e1dfdf;} .kbopenapi_wrap .kbopenapi_tbl {width:100%; table-layout:fixed; border-collapse:collapse; border-spacing:0; border:3px solid #e8e8e8; border-right: 0; border-left:0;} .kbopenapi_wrap .kbopenapi_tbl th { width:92px !important; max-width:150px; padding:5px; font-size:14px; font-weight:bold; background:#f5f5f5; letter-spacing:-2px; border-top:1px solid #e8e8e8; word-break:keep-all; text-align:center;} .kbopenapi_wrap .kbopenapi_tbl td {padding:5px 10px; border-top:1px solid #e8e8e8;} .kbopenapi_wrap .kbopenapi_tbl .bdn > th, .kbopenapi_wrap .kbopenapi_tbl .bdn > td {border-top:0 none; vertical-align:top;} .kbopenapi_wrap .kbopenapi_tbl li {padding-left:1em; text-indent:-.8em;} .kbopenapi_wrap .kbopenapi_tbl .caution {margin:0 -10px -5px; padding:10px; } .kbopenapi_wrap .kbopenapi_tbl td em {font-style:normal; color:red; text-decoration:underline;} .kbopenapi_wrap .kbopenapi_tbl .tit {text-align:left; padding-left:5px; font-weight:normal; font-size:13px;} .kbopenapi_wrap .kbopenapi_agree-area {float:right;} .kbopenapi_wrap .kbopenapi_agree-area input {margin:5px;} .kbopenapi_wrap .kbopenapi_ref {padding:5px 0;} .kbopenapi_wrap .kbopenapi_footer {display:block; overflow:hidden; position:relative; margin-top:30px;} .kbopenapi_wrap .kbopenapi_footer > div {display:inline-block; float:left; width:30%;} .kbopenapi_wrap .kbopenapi_footer .logo {text-align:center; padding:10px 0;} .kbopenapi_wrap .kbopenapi_footer .date {text-align:right;} .kbopenapi_wrap .kbopenapi_footer .date span {margin-left:40px;} .kbopenapi_wrap .kbopenapi_footer .date span:first-child {margin-left:0;} .kbopenapi_wrap .kbopenapi_footer .signature {width:40%; font-weight:bold;} .kbopenapi_wrap .kbopenapi_footer .signature dl {overflow:hidden;} .kbopenapi_wrap .kbopenapi_footer .signature dl > dt {float:left; width:50%; text-align:right;} .kbopenapi_wrap .kbopenapi_footer .signature dl > dd {float:right;} .kbopenapi_wrap .kbopenapi_tbl th .tit { word-break: border; font-size:12px; letter-spacing:0px;} .kbopenapi_wrap img { border:0; } .kbopenapi_wrap .kbopenapi_ico{position: relative; padding-left: 26px !important; display: block; } .kbopenapi_wrap .kbopenapi_ico:before {height: 20px; width: 18px; position: absolute; left: 0px; display: block; top: -2px; } .kbopenapi_wrap .kbopenapi_ico01-1.kbopenapi_ico:before {background: url(https://img1.kbcard.com/LT/images_r/common/ico_agree01_1.png) no-repeat left center; } /* 210708 : my kb > 오픈뱅킹 */ .compFullBg .infoBox.ico_account:before {content: "";display: inline-block;width: 64px;height: 64px;background:url(https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/ico_account.png) no-repeat 0 0;background-size: 64px auto;margin-bottom:10px;} .cardselList {border-top:1px solid rgba(0,0,0,0.87);} .cardselList > li {display: table;width: 100%;padding:10px 0;box-sizing: border-box;border-bottom:1px solid rgba(0,0,0,0.16);} .cardselList.bank > li {padding:16px 0;} .cardselList > li:after {content: ""; display: block;height: 0;clear: both;} .cardselList input[type='checkbox'], .cardselList input[type='checkbox']+label:before {position:absolute;top:50%;right:0;margin-right:0!important;margin-top:-12px;} .cardselList input[type='checkbox']+label {font-size:.9rem;} .cardselList .cardcomp {position:relative;line-height:37px;font-size:.9rem;} .cardselList .bankcomp {position:relative;} .cardselList .cardcomp .btnSS, .cardselList .bankcomp .btnSS, .cardselList .chk_con {position:absolute;top:50%;right:0;margin-top:-17px;} .cardselList .info {display: inline-block; width: 70%;vertical-align:middle;font-size:.9rem;} .cardselList .bankcomp .info.no_check {width:80%;} .cardselList .bankcomp .info .acc {color:#696e76;font-size:.8rem;} .cardselList .bankcomp .info .acc span:after {content: "";display: inline-block;width: 1px;height: 9px;margin: 0 6px;background: #bdbdbd;} .cardselList .cardcomp .info {padding-left:40px;color:#696e76;font-size:.9rem;} .cardselList .cardcomp .info li {line-height:26px;} .cardselList .cardcomp .info .ico_card {position:absolute;top:50%;left:0;margin-top:-18px;} .cardselList .ico_card, .cardselList .ico_bank {display:inline-block;width:32px; height:32px; background-size: 32px 32px;background-repeat: no-repeat;padding-right:7px;vertical-align:middle;} .cardselList .chk_con {font-size:.9rem;margin-top:-10px;} .open_layer .selType1>a:before {border:none;} .cardselList .inputList li {border:none;padding: 10px 0;} /* 카드사 아이콘 */ .cardselList .ico_card.c_bc {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-bccard.png');} /* BC카드 */ .cardselList .ico_card.c_lotte {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-lottecard.png');} /* 롯데카드 */ .cardselList .ico_card.c_samsung {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-samsungcard.png');} /* 삼성카드 */ .cardselList .ico_card.c_shinhan {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-SHcard.png');} /* 신한카드 */ .cardselList .ico_card.c_woori {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-WRcard.png');} /* 우리카드 */ .cardselList .ico_card.c_hana {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-Hanacard.png');} /* 하나카드 */ .cardselList .ico_card.c_hyundae {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-hdcard.png');} /* 현대카드 */ /* 은행사 아이콘 */ .cardselList .ico_bank.b_kb {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-kbstar.png');} /* 국민은행 */ .cardselList .ico_bank.b_kdb {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-kdblife.png');} /* 산업은행 */ .cardselList .ico_bank.b_ibk {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-ibk.png');} /* 기업은행 */ .cardselList .ico_bank.b_suhyp {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-suhyupbank.png');} /* 수협은행 */ .cardselList .ico_bank.b_nh {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-nonghyup.png');} /* 농협은행 */ .cardselList .ico_bank.b_woori {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-wooribank.png');} /* 우리은행 */ .cardselList .ico_bank.b_sc {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-standardchaterd.png');} /* SC제일은행 */ .cardselList .ico_bank.b_citi {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-citibank.png');} /* 시티은행 */ .cardselList .ico_bank.b_dgb {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-dgb.png');} /* 대구은행 */ .cardselList .ico_bank.b_busan {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-busanbank.png');} /* 부산은행 */ .cardselList .ico_bank.b_kjb {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-kjbank.png');} /* 광주은행 */ .cardselList .ico_bank.b_jeju {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-jejub.png');} /* 제주은행 */ .cardselList .ico_bank.b_jb {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-jbbank.png');} /* 전북은행 */ .cardselList .ico_bank.b_kn {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-KNbank.png');} /* 경남은행 */ .cardselList .ico_bank.b_hana {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-hanabank.png');} /* 하나은행 */ .cardselList .ico_bank.b_shinhan {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-shinhan.png');} /* 신한은행 */ .cardselList .ico_bank.b_k {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-kbank.png');} /* 케이뱅크 */ .cardselList .ico_bank.b_kakao {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-kakaobank.png');} /* 카카오뱅크 */ .cardselList .ico_bank.b_nhc {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-NHcentral.png');} /* 농협중앙회 */ .cardselList .ico_bank.b_kfcc {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-kfccins.png');} /* 새마을금고중앙회 */ .cardselList .ico_bank.b_cu {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-cu.png');} /* 신협중앙회 */ .cardselList .ico_bank.b_sbc {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-SBcentral.png');} /* 저축은행중앙회 */ .cardselList .ico_bank.b_sjc {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-SJcentral.png');} /* 산림조합중앙회 */ .cardselList .ico_bank.b_epost {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-epostbank.png');} /* 우체국 */ /* 증권사 아이콘 */ .cardselList .ico_bank.b_s_kb {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-secKB.png');} /* KB증권 */ .cardselList .ico_bank.b_s_ktb {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-ktb.png');} /* KTB투자 */ .cardselList .ico_bank.b_s_mirae {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-secMirae.png');} /* 미래에셋대우 */ .cardselList .ico_bank.b_s_samsung {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-secSamsung.png');} /* 삼성증권 */ .cardselList .ico_bank.b_s_korea {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-secKorea.png');} /* 한국투자 */ .cardselList .ico_bank.b_s_nh {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-nonghyup.png');} /* NH투자 */ .cardselList .ico_bank.b_s_kyobo {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-secKyobo.png');} /* 교보증권 */ .cardselList .ico_bank.b_s_hi {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-secHi.png');} /* 하이투자 */ .cardselList .ico_bank.b_s_hd {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-HDcar.png');} /* 현대차증권 */ .cardselList .ico_bank.b_s_kiwoom {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-secKiwoom.png');} /* 키움증권 */ .cardselList .ico_bank.b_s_ebest {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-secEBest.png');} /* 이베스트투자 */ .cardselList .ico_bank.b_s_sk {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-secSks.png');} /* SK증권 */ .cardselList .ico_bank.b_s_daishin {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-secDaishin.png');} /* 대신증권 */ .cardselList .ico_bank.b_s_hh {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-secHanwhawm.png');} /* 한화투자 */ .cardselList .ico_bank.b_s_hana {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-secHanaw.png');} /* 하나금융투자 */ .cardselList .ico_bank.b_s_shinhan {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-secShinhan.png');} /* 신한금융투자 */ .cardselList .ico_bank.b_s_db {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-dongbulife.png');} /* DB금융투자 */ .cardselList .ico_bank.b_s_euj {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-secEugenefn.png');} /* 유진투자 */ .cardselList .ico_bank.b_s_meritz {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-secImeritz.png');} /* 메리츠증권 */ .cardselList .ico_bank.b_s_myas {background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/mykb/financial-112-sec-myasset.png');} /* 유안타증권 */ /*210715 : [카드신청] 본인확인영역 변경요건 정리*/ .pinch-zoom-container { overflow: hidden; height:400px;} .pinch-zoom-image {width: 100%;} .pinch-zoom-image img {width:100%;} .layerWrap.fullLayer .popCont.pinch {overflow-y:hidden;padding:0 0 56px 0;} .pop_slide_prev.swiper-button-disabled {color:rgba(0,0,0,0.38);} .pop_pdf_down {overflow:hidden;position:absolute; right:52px; top:16px; display:block; width:24px; height:24px; z-index:9002; background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/24/ico_downpdf_24.png') no-repeat center center; background-size:24px; border:none; color: transparent;} /* 210728 : 카드 디자인 안내 추가 */ .cardDesign_list:after {content:'';display:block;height:0;clear:both;} .cardDesign_list li {border-bottom:1px solid #e1e1e1; padding-bottom:30px; margin-bottom:30px; } .cardDesign_list li.noline {border:none;} .cardDesign_list li .tit {font-size:1.375rem; font-weight:bold; color: #000; margin-bottom: 15px; } .cardDesign_list li .cardCont {position:relative; min-height: 210px;} .cardDesign_list li .cardCont .c_img {position:absolute; top:0; left:0; width:115px;} .cardDesign_list li .cardCont .c_img img {width:100%;} .cardDesign_list li .cardCont .c_design {display:block; margin-top:5px; text-align:center; line-height: 20px; color: #000; font-size:0.813rem;} .cardDesign_list li .cardCont dl {padding-left:130px; vertical-align: top; line-height:23px; color: #000;} .cardDesign_list li .cardCont dl dt {font-weight:bold; margin-bottom:5px; } .cardDesign_list li .cardCont dl dd {margin-bottom:15px;} /* 210810_챌린지카드 슬라이드 추가 */ .cardDetailInfo .annualFee .right a:before {z-index:1} .card_img.swiper-container{position:relative;overflow:hidden} .card_img.swiper-container .swiper-wrapper{overflow:hidden;width:4000px} .card_img.swiper-container .swiper-wrapper>li{float:left} .event_promotion_banner {overflow:hidden; position:relative; width:100%; height:0; padding-bottom:calc(29.629%);border-radius: .3em;} /* .event_promotion_banner:before {content:'';display:block;position:absolute;bottom:0; left:0; z-index:1; width:100%; height:40px; background:#fff;} */ .event_img.swiper-container{position:absolute; top:0; left:0; bottom:0;} .event_img.swiper-container .swiper-wrapper {overflow:hidden;} .event_img.swiper-container .swiper-wrapper>li{display:block;} .event_promotion_banner .swiper-container .total{font-size:12px;line-height:26px;text-align:center;position:absolute;z-index:2;bottom:8px;right:38px;padding:0;overflow:hidden;box-sizing:border-box;width:60px;height:24px;color:rgba(255,255,255,0.87);border-radius:20px;background:rgba(0,0,0,0.47)} .event_promotion_banner .swiper-container .total button{position:absolute;top:0;right:0;width:24px;height:24px;color:#b0b8c7;background:transparent;font-size:0} .event_promotion_banner .swiper-container .total button:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);content:'';width:1px;height:9px;background-color:rgba(255,255,255,1)} .event_promotion_banner .swiper-container .total button:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);content:'';width:9px;height:1px;background-color:rgba(255,255,255,1)} .event_promotion_banner .swiper-container .btnPrev, .event_promotion_banner .swiper-container .btnNext{display:none} .event_promotion_banner .btnPause{overflow:hidden;position:absolute;bottom:8px;right:8px;z-index:2;margin:0 0 0 26px;background:rgba(0, 0, 0, 0.47);width:24px;height:24px;border-radius:12px;font-size:1px;color:transparent} .event_promotion_banner .btnPause:after{display:block;content:'';position:absolute;top:0;width:24px;height:24px;background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/ico_eventslider_play.png') no-repeat 8px center;background-size:10px 12px} .event_promotion_banner .btnPause.on:after{background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/ico_eventslider_pause.png') no-repeat 8px center;background-size:8px 10px} /* 하단 버튼에 2라인 */ .fixedBArea .line2 {display:inline-block;line-height:1.2;vertical-align:middle;} /* 210830 생활대금납부 화면 변경 */ .infoBox3{padding: 32px 24px 32px 88px; position: relative;} .infoBox3:before{content:''; display: block; position: absolute; bottom: 0; left: 50%; width: 92%; width: calc(100% - 32px); height: 1px; background: #ccc; transform:translateX(-50%);-webkit-transform:translateX(-50%);} .infoBox3 p{font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: -0.2px;} .infoBox3 .icon{position:absolute;left:24px;top:50%;display:inline-block;width:48px;height:48px;-webkit-transform:translateY(-50%);transform:translateY(-50%)} .infoBox3 .icon img{width: 100%;} .depTit5{display:block;margin:32px 0 8px;color:#26282c;font-weight:bold;font-size:1.000rem;line-height:1.500em} .contAutoPay .listType1 ul{margin-top: 4px;} .contAutoPay .otherList li li, .contAutoPay .listType1 li > ul > li:last-child{margin-bottom:0;} .contAutoPay .txtInfo2{margin-top: 24px;padding-top: 15px;} /* 210907 신용카드 발급안내 */ .list_data_wrap li {margin-top:20px;} .list_data_wrap li:first-child {margin-top:0;} .list_data_wrap li .box {border: 1px solid #ccc; padding:10px;} /* 220314 간편인증 추가 */ .depTit3 + .logoBox_list{margin-top: 24px;} .logoBox_list li{margin-top: 16px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.16);} .logoBox_list li:first-child{margin-top: 0;} .logoBox_list li>a{display:block;position:relative;color:#26282c;padding:16px;font-size:1rem} .logoBox_list .con{position:relative;padding-left:48px;} .logoBox_list .icon{position:absolute;left:0;top:50%;display:inline-block;width:32px;height:32px;-webkit-transform:translateY(-50%);transform:translateY(-50%)} .logoBox_list .icon.line{border-radius: 4px; border: 1px solid rgba(0,0,0,0.16); box-sizing: border-box;} .logoBox_list .icon img{width: 100%;} .underLineLink{text-align: center;} .underLineLink a{display: inline-block; margin: 20px auto 0; border-bottom: 1px solid rgba(0, 0, 0, 0.87); font-size: 14px;} /* 220426 리볼빙에 결제예정금액 range-slider 추가 */ .accordions__view {display: none;padding: 1.5rem 1rem 2.5rem 1rem;background-color: #f9fafc;font-weight: 300;} .range-slider--type2-wrap {padding: 1.875rem 0 1.25rem;} .range-slider--type2-wrap .range-slider--type2 {position: relative;height: 3.75rem;} .range-slider--type2-wrap .range-slider--type2:before {content: "";position: absolute;top: 50%;right: 0;left: 0;height: 0.5rem;border-radius: 0.25rem;background: rgba(0, 0, 0, 0.08);transform: translateY(-50%);} .range-slider--type2-wrap .range-slider--type2 .step-list .item {position: absolute;top: 50%;z-index: 15;width: 0.125rem;height: 100%;background-color: #f9fafc;font-size: 0;text-indent: -9999rem;line-height: 0;transform: translateY(-50%);} .range-slider--type2-wrap .range-slider--type2 .step-list .item:first-child, .range-slider--type2-wrap .range-slider--type2 .step-list .item:last-child {top: inherit;bottom: 0;width: auto;height: auto;color: #696e76;font-size: 0.875rem;text-indent: 0;line-height: 1.4;transform: translateY(0);} .range-slider--type2-wrap .range-slider--type2 .step-list .item.active {opacity: 0;} .range-slider--type2-wrap .range-slider--type2 .ui-slider-range {position: absolute;top: 50%;left: 0;height: 0.5rem;border-radius: 0.25rem;background: #fc0;transform: translateY(-50%);z-index: 10;transition: width .1s;} .range-slider--type2-wrap .range-slider--type2 .ui-slider-range:before, .range-slider--type2-wrap .range-slider--type2 .ui-slider-range:after {content: '';position: absolute;top: 50%;transform: translateY(-50%);border-radius: 50%;} .range-slider--type2-wrap .range-slider--type2 .ui-slider-range:before {right: -0.6875rem;width: 1.375rem;height: 1.375rem;background: rgba(255, 202, 0, 0.2);} .range-slider--type2-wrap .range-slider--type2 .ui-slider-range:after {right: -0.4375rem;width: 0.875rem;height: 0.875rem;background: #fc0;} .range-slider--type2-wrap .range-slider--type2 .ui-slider-handle {position: absolute;top: -1.875rem;z-index: 15;transform: translateX(-50%);height: 2.5rem;padding: 0 0.5rem;border-radius: 0.25rem;border: 1px solid rgba(0, 0, 0, 0.08);background: #fff;font-size: 0.875rem;color: #696e76;line-height: 2.375rem;text-align: center;white-space: nowrap;} .range-slider--type2-wrap .range-slider--type2 .ui-slider-handle .number {font-size: 1.125rem;} .list-info {width: 100%;word-break: keep-all;} .list-info + .list-info {margin-top: 1rem; padding-top:1rem; border-top: 1px solid rgba(0, 0, 0, 0.08);} .list-info > li {display: flex;justify-content: space-between;align-items: flex-start;} .list-info > li + li {margin-top: 1.5rem;} .list-info > li > .list-info--ss {width: 100%;} .list-info > li > .list-info--ss > li + li {margin-top: 0.5rem;} .list-info > li > .list-info--ss .list-info__tit {font-size: 0.875rem;} .list-info > li > .list-info--ss .list-info__desc {font-size: 0.875rem;} .list-info__item .list-info__tit, .list-info__item .list-info__desc {color: #f00;font-size: 0.875rem !important;line-height: 1.25rem !important;} .list-info__tit {display: block;max-width: 70%;margin-right: 0.5rem;font-size: 1rem;color: #696e76;font-weight: 400 !important;line-height: 1.5rem;} .list-info__tit .badge {margin-top: 0.125rem;} .list-info__desc {display: block;max-width: 70%;text-align: right;font-size: 1rem;color: #26282c;font-weight: 400 !important;line-height: 1.5rem;} .list-info__desc.fB {font-weight:600 !important;} .list-info__desc .btn--arr::after {margin-left: 0.25rem;} .list-info__desc .btn {vertical-align: top;} .list-info--line > li {padding-bottom: 1.5rem;border-bottom: 1px solid rgba(0, 0, 0, 0.08);} .list-info--line > li + li {padding-top: 1.5rem;margin-top: 0 !important;} .list-info--line > li .card-box__title {font-size: 1rem;} .list-info--line-btm {padding-bottom: 2rem;border-bottom: 1px solid rgba(0, 0, 0, 0.08);} .list-info--line-top {padding-top: 2rem;border-top: 1px solid rgba(0, 0, 0, 0.08);} .list-info--line-last > li:last-child {padding-bottom: 0;border-bottom: 0;} .list-info--s > li + li {margin-top: 1rem;} .list-info--s.list-info--line-btm {padding-bottom: 1.5rem;} .list-info--s .badge {margin-right: 0.25rem;vertical-align: text-bottom;} .list-info--ss > li + li {margin-top: 0.5rem;} .list-info--ss .list-info__tit {font-size: 0.875rem;} .list-info--ss .list-info__desc {font-size: 0.875rem;} .list-info--m > li + li {margin-top: 0.5rem;} .list-info--m .list-info__tit, .list-info--m .list-info__desc {color: #26282c;font-size: 1rem;line-height: 1.5rem;font-weight: 400;} .list-info--mm + .list-info--mm {margin-top: 2rem;padding-top: 2rem;border-top: 1px solid rgba(0, 0, 0, 0.16);} .list-info--mm:last-child {padding-bottom: 2rem;border-bottom: 1px solid rgba(0, 0, 0, 0.16);} .list-info--mm > li + li {margin-top: 0.5rem;} .list-info--mm .list-info__tit, .list-info--mm .list-info__desc {color: #26282c;font-size: 1rem;line-height: 1.5rem;font-weight: 400;} .list-info--mm .list-info__tit {color: #696e76 !important;} .txt-s {font-size: 0.875rem !important;line-height: 1.375rem !important;} .btn-txt {display: inline-flex;align-items: center;position: relative;padding: 0;border: 0;background: none;font-size: 1rem;vertical-align: middle;} .btn-txt.txt-s {padding-bottom: 0;} .btn-txt.txt-s:before {content: "";display: block;position: absolute;top: -0.625rem;left: -0.625rem;right: -0.625rem;bottom: -0.625rem;} .btn--arr:after, .btn--arr-b:after, .btn--arr-t:after, .btn--arr-span:after {content: "";display: block;width: 1.5rem;height: 1.5rem;background: url(https://img1.kbcard.com/home_re/mo/arr/24/arr-1-right.svg) no-repeat 0 0;background-size: 100% auto;} .btn--arr.txt-s:after, .btn--arr-b.txt-s:after, .btn--arr-t.txt-s:after {width: 1rem;height: 1rem;margin-left: 0;background-image: url(https://img1.kbcard.com/home_re/mo/arr/16/arr-1-right.svg);} .list-info__desc .btn--arr::after {margin-left: 0.25rem;} .quickLink.downward .btn--arr-b:after {display:none} /*개인(신용)정보 필수적 제공 동의(상품서비스)*/ .list-dash--partner-detail {margin-top:20px} .list-dash--partner-detail + .list-dash--partner-detail {padding-top:20px; border-top:1px solid rgba(0, 0, 0, 0.16)} .list-dash--partner-detail > li {position: relative;padding-left: 1rem;font-size: 1rem;font-weight: 300 !important;color: #26282c;line-height: 1.5rem;text-align: left;} .list-dash--partner-detail > li:before {content: "";display: block;position: absolute;top: 0.6875rem;left: 0;width: 0.5rem;height: 1px;border-radius: 50%;background-color: currentColor;} .list-dash--partner-detail > li + li {margin-top: 0.5rem;} /* 카드상세 세로카드 추가 */ .sl-card-design .img-card img{width:12.5rem;height:8rem;vertical-align: middle;} .sl-card-design .img-card.row {height:12.5rem; line-height: 12.5rem;} .sl-card-design .img-card.row img {transform:rotate(90deg);} /* my_kb_바로출금결제 ui개선_220923 */ .mykbPay .statement .titBox .tit {font-size:1.8rem} .mykbPay .statement .stateToggle .more {display:block; height:auto; padding:0 0 21px; font-size:14px; font-weight:600; text-indent:0; text-align:center;} .mykbPay .statement .stateToggle .more:after {content:""; display:inline-block; position:relative; top:3px; left:auto; width:16px; height:16px; margin:0 0 0 2px; background:url(https://img1.kbcard.com/home_re/mo/arr/16/arr-1-down.svg); background-size:16px;} .mykbPay .statement .stateToggle.open .more {background:none; border-top:1px solid rgba(0, 0, 0, .08); margin:0 16px; padding:10.5px 0;} .mykbPay .statement .stateToggle.open .more:after {width:16px; height:16px; margin:0 0 0 2px; background:url(https://img1.kbcard.com/home_re/mo/arr/16/arr-1-up.svg); background-size:16px;} .mykbPay .statement .titBox .btnSS {padding-top:3px;padding-bottom:3px;} .mykbPay .billingList li {padding:24px 24px 24px 0} .mykbPay .billingList li label .info1 strong {font-weight:600;} .mykbPay .billingList li label .info1 em {top: 0;transform: translateY(0%);} .mykbPay .billingList li label .info1 em span.fees, .mykbPay .billingList li label .info2 span {font-size:0.875rem;} .mykbPay .billingList li label .info1 em span.fees {margin-top:8px;} .mykbPay .billingList li label .info2 span {display: block;} .mykbPay .billingList li label .info2 span:first-child {margin:8px 0;} .mykbPay .billingList li .formWrap label:before {top:0; margin-top:0;} .mykbPay .toggleList {padding:0 16px;} .mykbPay .toggleList>li:first-child {border-top:0;} .mykbPay .toggleList>li>a>span {padding-left:0;} .mykbPay .statement .stateSum {margin: 16px 0;border-top: 1px solid rgba(0, 0, 0, .08);padding-top: 16px;} .mykbPay .statement .stateSum:first-of-type {margin-top:0; border-top:none;padding-top:0;} .mykbPay .statement .depTit3 + .stateSum:first-of-type {margin-top:16px; padding-top:16px;} .mykbPay .statement.type3 .stateSum + .stateSum {margin-top:0;} .mykbPay .statement.type3 .stateSum dt {color: #696e76;} .mykbPay .statement.type3 .stateSum dt, .mykbPay .statement.type3 .stateSum dd {font-weight:600;} .mykbPay .statement.type3 .stateSum dd em {font-size:1rem;} .mykbPay .statement.type3 .stateSum dd a {font-size:0.875rem;margin-top: 8px;} .mykbPay .toggleList li.linkType a {padding:1.3rem 3.75rem 1rem 0;} .mykbPay .statement.type3 .stateSum dd a {display: inline-block;font-weight: normal;padding-top: 3px;padding-bottom: 3px;} .mykbPay .statement.type3 .stateSum dd a:after {display: none;} .mykb_paylist {position:relative;padding:16px;border: 1px solid rgba(0, 0, 0, .16);border-radius: 8px;margin:24px 0;} .mykb_paylist ul{display:flex;display:-webkit-box;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;align-items:start;-webkit-align-items:start;-webkit-box-pack:justify;-webkit-box-align:start;flex:1;-webkit-box-flex:1;-webkit-flex:1;} .mykb_paylist ul li{flex:1;-webkit-box-flex:1;-webkit-flex:1;font-weight:600;} .mykb_paylist ul li em {display:block;margin-bottom:8px;} .mykb_paylist ul li.item {color:#696e76;} .mykb_paylist .sum > a {font-size:0.875rem;} .mykb_paylist .sum > a:after {content: '';display: inline-block;width:16px;height:16px;margin-left:4px;background: url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/arr/arr_r_24_000.png) no-repeat 0 4px;background-size: 16px;vertical-align: top;} .btn_listup {position:relative;padding:16px 16px 8px;} .btn_listup a {position:relative; display:inline-block;background:#eff2f7;border:2px solid #eff2f7;border-radius:5rem;padding:2px 32px 2px 16px;font-size:0.875rem;letter-spacing: -1px;margin-right: 4px;} .btn_listup a:after {content:'';display:inline-block;position: absolute;top: 25%;right: 10px;background:url(https://img1.kbcard.com/cxh/ia_img/MK/icon_mk_up_off.png) no-repeat 0 0;width:16px;height:16px;background-size:100%;} .btn_listup a.on {background:#fff;border:2px solid rgba(0, 0, 0, .87);} .btn_listup a.on:after {background:url(https://img1.kbcard.com/cxh/ia_img/MK/icon_mk_up_on.png) no-repeat 0 0;background-size: 100%;} .btn_listup .len {position: absolute;top: 50%;right:16px;transform: translateY(-50%);color: #696e76;font-weight:bold;font-size:1.125rem} /* 221222 로그인 개선 */ .loginTit.type2 {padding-top:20px;} .tabBox.loginArea.type2 {padding:0 16px 35px;} .tabBox.loginArea.type2 .loginTab{display:none !important; border-top:none;border-bottom:none;} .tabBox.loginArea.type2 .loginTab ul{display:block;} .tabBox.loginArea.type2 .loginTab li{display:table; padding: 0.15625rem 0.15625rem;} .tabBox.loginArea.type2 .loginTab li a{padding:13px 5px; line-height:initial;} .tabBox.loginArea.type2 .loginTab li+li:before {display:none;} .btn--yellow {background-color: #fc0;} loginArea input[type='text']:focus, loginArea input[type='number']:focus, loginArea input[type=tel]:focus, loginArea input[type=password]:focus{border-color: rgba(0, 0, 0, .87);background-color: rgba(0, 0, 0, .04);} /* 다른 로그인 방법 선택 버튼 */ .loginLink{overflow:hidden;width:100%;margin-top:-30px;text-align:center} .loginLink a{float:none;display:inline-block;width:auto;margin-top:0;text-align:left;-webkit-box-sizing:border-box;box-sizing:border-box} .loginLink .arrR{display:inline-block;position:relative;font-size:1rem;line-height:1.500rem;text-align:left} .loginLink .arrR:after{content:'';display:inline-block;position:static;width:24px;height:24px;margin:0 0 0 4px;transform:rotate(90deg);-webkit-transform:rotate(90deg);background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/arr/arr_new_r_24_000.png') no-repeat;background-size:24px auto;vertical-align:top} /* 다른 로그인 방법 선택 팝업 */ .listAdd.loginSel li.on {background:#f9fafc;} .listAdd.loginSel li.on a:after{content:'';display:block;position:absolute;top:50%;right:25px;left:auto;width:1px;height:13px;margin-top:-6px;background:#0066ff;transform:rotate(44deg);box-shadow:none} .listAdd.loginSel li.on a:before{content:'';position:absolute;top:50%;right:32px;width:1px;height:8px;margin-top:-2px;background:#0066ff;transform:rotate(-44deg)} .listAdd.loginSel li:last-child {border-bottom:none;} .listAdd.loginSel li a {padding-left:62px;} .listAdd.loginSel li a em {width:32px;} /* 결제예정금액 내 배너 */ .bnWide {display: table; width:115%; height:96px; margin-top:32px; margin-left:-16px;} .bnWide a {display: table-cell; vertical-align: middle; padding: 24px 15px 24px 88px; background: url(https://img1.kbcard.com/home_re/mo/ico/visual/ico-visual-rv.svg) no-repeat 24px center #f2f2f2; background-size: 48px;} .bnWide a span:last-child {display:inline-block; margin-top:4px; font-weight: bold; line-height: 1.6;} /*230222 : [My KB] 결제예정금액 화면 내 배너 신규 제작*/ .bnWide.kb_pay {display:flex; align-items:center; width:calc(100% + 32px); } .bnWide.kb_pay a {width:100%;position:relative;background-image: url(https://img1.kbcard.com/home_re/mo/ico/visual/ico_kbpay_img.png); padding: 24px 15px 24px 78px} .bnWide.kb_pay a:before {content:''; position:absolute; width:24px; height:24px; right:14px; top:38%;background: url(https://img1.kbcard.com/home_re/mo/ico/visual/kbpay_arr_link.png) no-repeat center center; background-size:cover;} /* 안심서비스 아이콘 */ .svIntro .thum.icon_safe {background: url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/80/ico_lock2_80.png) no-repeat 0 0;display: inline-block;width: 80px;height: 80px;background-size: contain;} /* 생활대금납부 */ .basic_list.imgLeft li>a .con .icon, .link_icon {display:inline-block;width:48px;height:48px;background-size: 100%;background-repeat:no-repeat;background-position: 0 0;} .link_icon.ico_apt {background-image:url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/48/ico_apt01_48.png);} .link_icon.ico_umbrella {background-image:url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/48/ico_umbrella_48.png);} .link_icon.ico_school {background-image:url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/48/ico_school_48.png);} .link_icon.ico_station {background-image:url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/48/ico_station_48.png);} .link_icon.ico_gas {background-image:url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/48/ico_gas01_48.png);} .link_icon.ico_call {background-image:url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/48/ico_call_48.png);} /* 2023-04-07 heritage 상세 디자인 변경 */ .heritage .cardDetailInfo {width:100%;min-height:220px;margin:0;padding-bottom:32px;} .heritage .cardDetailTop:after {display:block;content:'';background:#ac8550;position:absolute;top:88px;left:0;width:100%;height:1px;} .heritage .cardDetailTop:before {display:block;content:'';width:40px;height:40px;background:url('https://img1.kbcard.com/LT/images_r/personal/product/heritage_detail_logo.png') no-repeat;background-size:40px 40px;position:absolute;top:24px;left:50%;transform: translate(-50%, 0);} .heritage .cardDetailTop {position:relative;min-height:250px;padding-top:122px;box-sizing:border-box;} .heritage .cardDetailTop, .heritage .cardDetailInfo, .heritage .cardDetailInfo .annualFee .row:before {background:#26282c;} .heritage .cardDetailInfo .annualFee .row {width:220px;margin:-105px auto 0;} .heritage .cardDetailInfo .annualFee .row img {box-shadow:10px -10px 20px rgba(0, 0, 0, 0.6);} .heritage .cardDetailTop .tit {color:#fff;padding-top:8px;line-height:30px;} .heritage .cardDetailTop .sTxt {position:absolute;top:160px;left:0;font-size:.875rem;color:rgba(255,255,255,0.87);width:100%;text-align:center;padding:0;margin:0 !important;} .heritage .cardDetailTop .cdBtn a, .heritage .cardDetailTop .cdBtn a.on {background:#f2ebe5;color:#79573f;border-radius:.3rem;line-height:24px;font-size:.813rem;padding:0 8px;} .heritage .cardDetailInfo .cardType {text-align:left;padding:32px 16px 0;} .heritage .card-fee__tit {display:block;font-size:1.125rem;color:rgba(255,255,255,0.87);} .heritage .card-fee__info {display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,0.87);margin-top:.6rem} .heritage .fixedBArea .btnL {background:#000;border-top:3px solid #ac8550;color:#fff;} /*230511 : [자동차금융] AP전용 이지오토할부 페이지 개선*/ .pointGuide-wrap {position:relative; padding-top:4.0rem;} .pointGuide-wrap .swiper-paging-wrap{position: absolute; left:0; top:0; width: 100%; height:auto; z-index:10;} .pointGuide-wrap .swiper-paging-wrap .swiper-paging-wrap-flex {display: flex; align-items: center; justify-content: space-between; margin-top:10px;} .pointGuide-wrap .swiper-paging-wrap .swiper-paging-wrap-flex .swiper-paging-wrap-flex-tit {font-size: 0.938rem; font-weight:bold;} .pointGuide-wrap .swiper-pagination.pagination_count {height: auto; margin: 0; position: relative; width: auto; bottom: auto; left: auto; padding: 0.125rem 0.6875rem 0 0.625rem; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0.8125rem; background-color: rgba(0, 0, 0, 0.08); color: #26282c; font-size: 0.875rem; line-height: 1.25rem; letter-spacing: -0.123rem;} .pointGuide-wrap .swiper-pagination-progressbar {position:relative; height:4px; background-color: rgba(0,0,0,.08); margin:0;} .pointGuide-wrap .swiper-slide {align-items: baseline; height: auto;} .pointGuide-wrap .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#fc0;} .color-blue {color:#086cfd;} .pointGuide-wrap .swiper-slide .list-num > li { padding-left: 1.0rem; text-indent: -1.0rem; } .pointGuide-wrap .swiper-slide .list-num > li + li {margin-top:2.0rem;} .pointGuide-wrap .swiper-slide .list-num > li p {text-indent:0; margin-left:-1.0rem; font-size:1.0rem;} .pointGuide-wrap .swiper-slide .list-num > li:before { display: none; } #pop_pointGuide .slide-fixed-one {z-index:101 !important;} #pop_pointGuide .slide-fixed-col2 {z-index:100 !important;} /*230608 : [금융] 리볼빙 화면 내 버튼 및 문안 추가(온라인설명의무)*/ .calculation_cont {display:flex; justify-content: space-between; position:relative; border: 1px solid rgba(0,0,0,0.87); border-radius: 8px;} .calculation_cont:before {content:''; display:block; position:absolute; left:50%; top:50%; width:18px; height:4px; border-radius:12px; background:rgba(0,0,0,0.87); margin-left:-9px;} .calculation_cont:after {content:''; display:block; position:absolute; left:50%; top:50%; width:4px; height:18px; border-radius: 12px; background:rgba(0,0,0,0.87); margin:-7px 0 0 -2px;} .calculation_box {width:40%; padding:70px 10px 10px 10px; position:relative;} .calculation_box:before {content: ''; display:block; position:absolute; left:50%; top:10px; background: url(https://img1.kbcard.com/LT/images_r/personal/finance/ico_calculation_01.png) center center no-repeat; width:3.0rem; height:3.0rem; margin-left:-27px; background-size:3.0rem;} .calculation_box:last-child:before {background: url(https://img1.kbcard.com/LT/images_r/personal/finance/ico_calculation_02.png) center center no-repeat; background-size:3.0rem;} .calculation_txt {font-size:0.875rem; word-break: break-all;} /*230707_as-is > to-be 팝업 하단 버튼 스타일 추가*/ .layerWrap .btnBox2 {padding: 0 16px 32px 16px;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center; align-items: center; -webkit-box-pack: justify;-webkit-box-align: center;} .layerWrap .btnBox2 > span + span {padding-left: 8px;} .layerWrap .btnBox2 > span {flex: 1;} /*230707_to-be 아이콘 스타일 추가 */ .icon-box {position:relative;padding:24px 24px 24px 84px;color: #26282c;} .icon-box:before {content:'';display: block;position: absolute;top:24px;left:24px;} .icon-box--loan:before {width:48px;height:48px;background:url(https://img1.kbcard.com/home_re/mo/ico/64/ico-changeloan.svg) center center no-repeat; background-size:100% auto;} .icon-box > p {word-break:break-all;} /*230717_to-be 스타일 리스트 추가_MyKB > 이용한도 */ .list-price > li {display: flex;justify-content: space-between;align-items: center;padding-bottom: 1.4rem;border-bottom: 1px solid rgba(0, 0, 0, .08);} .list-price > li + li {margin-bottom: .4rem;padding-top: 1.4rem;} .list-price__title {font-size: 0.875rem;} .list-price__sum {font-size: 0.875rem;letter-spacing: -.1rem;text-align: right;margin-left: .4rem;flex: 1;min-width: 10rem;} .list-price__num {position: relative;display: inline-block;min-width: 5rem;margin-left: .4rem;padding-left: .4rem;letter-spacing: 0;box-sizing: border-box;} .list-price__num:before {content: "";display: block;position: absolute;top: .4rem;left: 0;width: 1px; height: .8rem;background: rgba(0, 0, 0, .16);} /*230717_모바일웹 이벤트 KB Pay PUSH 활성화 개선 */ .popCont.bottompop-item {display: flex; flex-direction: column; padding: 0 !important; margin: 0 !important;} .popCont.bottompop-item .item__desc.item__pushpop{display: flex; flex-wrap: nowrap; justify-content: flex-start; flex-direction: column; box-sizing: border-box; padding: 16px 16px 0; text-align: center;} .popCont.bottompop-item .item__desc .desc-ico {display: inline-block; width: 100%; max-width: 328px; height: auto; margin: 0 auto;} .popCont.bottompop-item .item__desc .desc-txt {font-size: 16px; line-height: 1.5; margin: 24px auto; color: #26282c;} .popCont.bottompop-item .item__desc .btnBox {margin: 0; padding: 0;} .popCont.bottompop-item .item__pannel{box-sizing: border-box; padding: 16px;} .popCont.bottompop-item .item__pannel .pannel-box {display: flex; flex-wrap: nowrap; justify-content: space-between; width: 100%; box-sizing: border-box; padding: 0 8px;} .popCont.bottompop-item .item__pannel .pannel-txt {width: 100%; text-align: center; margin: 0 auto 32px;} .popCont.bottompop-item .item__pannel .pannel-txt a {font-size: 14px; font-weight: 300; line-height: 1.43; color: #696e76; border-bottom: 1px solid #696e76;} .popCont.bottompop-item .item__pannel .pannel-box .pannel-box--form {text-align: left;} .popCont.bottompop-item .item__pannel .pannel-box .pannel-box--form input[type="checkbox"] {top:18px; left:11px; display:initial;} .popCont.bottompop-item .item__pannel .pannel-box .pannel-box--form input[type="checkbox"] + label {text-indent:-37px;display:initial;} .popCont.bottompop-item .item__pannel .pannel-box .pannel-box--form input[type="checkbox"] + label span {line-height: 1.5; letter-spacing: normal; color: #26282c; font-size: 16px; font-weight: bold; outline: none;} .popCont.bottompop-item .item__pannel .pannel-box .pannel-box--closebtn a {text-align: right; line-height: 1.5;letter-spacing: normal; color: #26282c; font-size: 16px; font-weight: bold;} /* 230721_카드 신청 > 모바일 단독 카드 추가 */ .inpBox.card-type + div a {height:56px; line-height:56px; font-weight:600;} .card-type label {font-weight:bold;} .card-type__mobile label {padding-left:37px;text-indent:-37px;} .card-type__title {position: relative;} .card-type__title:after {display:inline-block;content:'';width:100%;height:10px;position: absolute;left: 0;bottom: 0;background: rgb(255,237,176);z-index: -1;} .card-type__info {position:relative;display: block;background: #efface;padding:16px;font-size:0.813rem;line-height:1.4;text-indent:0;margin-top: 8px;border-radius:8px;} .card-type__info:after {display:inline-block;content:'';width:48px;height:48px;position: absolute;right:16px;top:-24px;background: url('https://img1.kbcard.com/home_re/mo/img/card/card-type-img-m1.png') no-repeat;background-size: 100% auto;} .checked .card-type__info:after {background-image: url('https://img1.kbcard.com/home_re/mo/img/card/card-type-img-m2.png');} .change .card-type__info:after{background-image: url('https://img1.kbcard.com/home_re/mo/img/card/card-type-img-m3.png');} .card-type__info .f15 {color:#007eff;} /* 230814_My KB 이용내역 화면 개선 */ .price-wrap--date {color: #696e76;font-size:0.875rem;} .price-wrap--won {font-size: 1.250rem;} .price-wrap--won em {font-size: 1.8rem;line-height: 2.6rem;font-weight: bold;} .price-wrap--usd {font-size:1rem; margin-top:4px;} .fullLayer.layerStatement .receipt-wrap {padding:16px;} .receipt-head {border-bottom: 2px solid rgba(0, 0, 0, .87);} .receipt-head__price {font-size: 1.6rem;line-height: 2.4rem;} .receipt-head__price > strong {font-size: 1.8rem;} .receipt-head__place {margin: .4rem 0 .8rem;} .receipt-body .list-info li {margin-top: 16px;} .receipt-body .list-info__desc {font-weight:bold !important;} .receipt-body .toggleItem {line-height:56px;border-bottom: 0;margin-top: 16px;} .receipt-body .toggleList>li:first-child {border-color: rgba(0, 0, 0, .08);} .receipt-body .toggleList>li>a:after {width:24px;height:24px;margin-top:-12px;background-image: url(https://img1.kbcard.com/home_re/mo/arr/24/arr-1-down.svg);background-size: 24px;} .receipt-body .toggleList>li.on>a:after {background-image: url(https://img1.kbcard.com/home_re/mo/arr/24/arr-1-up.svg);} .receipt-body .toggleView {background-color: #fff;} .receipt-body .toggleView .list-info {border-top: 1px solid rgba(0, 0, 0, .08); } /*230915 : [금융] 카드대출 신청 시 신분증 진위확인 프로세스 추가*/ .layerWrap.loanCheckPop .popTop strong {font-size:1.125rem;} .layerWrap.loanCheckPop .txtInfo.fc16 {color: #f46600 !important;} .layerWrap.loanCheckPop.fullLayer .popCont {padding: 0 16px 80px 16px;} .layerWrap.loanCheckPop .popCont > .listType1 > li > p {color: #26282c;} .layerWrap.loanCheckPop .popCont .stepBox {margin: 0 0 2rem 0;} .article {position: relative;} .article + .article {margin: 2rem -1.0rem 0;padding: 2.5rem 1.0rem 0;} .article + .article:before {content: "";position: absolute; top: 0; left: 0; width: 100%; height:7px;border-top: 1px solid rgba(0, 0, 0, .08);background: #f9fafc;} .list-num > li {padding-left: 1.0rem; text-indent: -1.0rem;} .layerWrap.loanCheckPop .popCont .flex .selType1>a {height:47px;} .tabList.line2 .tabDep1 li a {min-height: 79px;} .layerWrap.loanCheckPop .popCont .addBox > div > span {padding:10px 0; height:auto;} .layerWrap.loanCheckPop .popCont .aptAddress {padding:0;} .layerWrap.loanCheckPop .popCont .btnBox > a {line-height:19px;} .layerWrap.loanCheckPop .popCont .toggleList.no_pd>li>a>span {padding-left:0;} .layerWrap.loanCheckPop .popCont .toggleList.no_pd>li>a:after {right:0;} .layerWrap.loanCheckPop .popCont .tbsList1.d_block li {display:block;} .layerWrap.loanCheckPop .popCont .tbsList1.d_block li .formWrap {display:block;} .layerWrap.loanCheckPop .popCont .tbsList1.d_block li .formWrap label {display:block;} .box-idcard {margin: 0 8px; padding:8px; border-radius:8px; border: 1px solid rgba(0, 0, 0, .16); background-color: #f9fafc;} .box-idcard > img {width:100%;} .inpTxt1 input.cal_ipt::-webkit-calendar-picker-indicator {position: absolute; right: 0; opacity: 0; } .inpTxt1 input.cal_ipt {background: url(https://img1.kbcard.com/home_re/mo/ico/24/ico-1-calendar.svg) no-repeat 100% 50%; background-size:30px auto; -webkit-background-size:30px auto;} /* toast */ .toast { position: fixed; left: 50%; bottom: 100px; width: calc(100% - 32px); padding: 20px 24px; border-radius: 8px; transform: translateX(-50%); background-color: rgba(0, 0, 0, .8); color: #fff; opacity: 0; will-change: opacity; z-index: 9100; box-sizing: border-box; } .toast.show { opacity: 1; transition: opacity .1s ease-in-out; } .toast.hide { opacity: 0; transition: opacity .1s ease-in-out; } .toast__close { position: absolute; right: 0; top: 0; width: 48px; height: 48px; margin: 0; padding: 0; background: url(https://img1.kbcard.com/home_re/mo/ico/16/ico-1-close-w.svg) no-repeat 50% 50%; background-size: 16px 16px; border: 0; } /*231027 : [서비스] 카드사용알림서비스 화면 개선(카카오&네이버영수증)*/ .icon--kakao {background: url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/app/24/app_kakaotalk_24_03.png') no-repeat center center / 100%;} .icon--naver {background: url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/app/24/app_naver_24.png') no-repeat center center / 100%;} .icon--toss {background: url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/app/24/app_toss_24_02.png') no-repeat center center / 100%;} /*231206 : [개선][이벤트]결제계좌변경이벤트 응모 완료 화면 개선*/ .evt-rst {padding: 24px 0 0; text-align: center; letter-spacing: -0.4px;} .evt-rst img {width: 64px; height: 64px;} .evt-rst h3 {margin:16px auto 8px; font-size: 1.125rem; font-weight: bold; color: #26282c; line-height: 1.33;} .evt-rst p {font-size: 1rem; color: #666;} .evt-rst__link {display: inline-block; position: relative; min-width: 96px; padding: 8px 44px 9px 16px; border: 1px solid #26282c; font-size: 1rem;font-weight: bold;text-align: left; background-color: #fff; border-radius: 6px; box-sizing: border-box; line-height: normal;} .evt-rst__link:after {content: ''; display: inline-block; position: absolute; width: 24px; height: 24px; top: 50%; right: 16px; margin-top: -12px; background: url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/arr/arr_r_24_000.png) no-repeat; background-size: 24px auto;} .evt-rst + .btnGroup {padding-bottom:20px;} .evt-rst + .btnGroup .btnL, .evt-rst + .btnGroup .event_Lbtn {height: 56px;line-height: 56px;border-radius: 8px; font-weight: bold;font-size: 1.125rem;} .evt-rst + .btnGroup .btnL.btn--disable, .newEvent .fixedBArea--event .event_Lbtn.btn--disable {background: #eee; color: #8c949e;} .evt-rst__desc {margin-top:8px} .evt-rst__desc p {font-size: 0.875rem;} /* tooltip */ .tooltip {overflow: hidden;display: inline-block;position: relative;width: 1.500rem;height: 1.500rem;background: url(https://img1.kbcard.com/home_re/mo/ico/24/ico-1-guide-g.svg) no-repeat center;background-size: 1.500rem auto;border: none;font-size: 1px;color: transparent;vertical-align: top;} .tooltip:before {content: "";display: block;position: absolute;top: -0.875rem;left: -0.875rem;right: -0.875rem;bottom: -0.875rem;} .tooltip-starshop {background:url(https://img1.kbcard.com/home_re/mo/ico/24/ico-starshop.png) no-repeat 0 0;background-size:cover;} /* 비대면 신청 화면 내 사전 안내 사항 추가 */ /* 하단 버튼 fixed - scrollable */ .is-prepare-banner {padding-top: 1rem;border-top-left-radius: 1rem;border-top-right-radius: 1rem;overflow: hidden;box-shadow: 0px -10px 10px 0 rgba(0, 0, 0, .16);} .is-prepare-banner.fixedBArea {display:block} .prepare-banner {background:#fff;padding:0 0 1rem 0;text-align: center;} .prepare-banner ul {margin-top:8px} .prepare-banner ul li {position:relative; width:50%} .prepare-banner ul li + li:after {content:''; display:block; position:absolute; top:50%; left:-0.5px; width:1px; height:20px; background:#dde1e4; margin-top:-10px;} .prepare-banner ul.col3 li:after {display:none; content:none;} .prepare-banner ul li .icon img {width:2rem; vertical-align:top;} .prepare-banner ul li .txt {font-size:0.875rem;} .prepare-banner .btn-close{position:absolute;right:16px;top:16px;bottom:auto;display:block;width:24px !important;height:24px !important;border:none;background:none;z-index:9002} .prepare-banner .btn-close a{display:block;width:24px;height:24px;background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/24/ico_close_24_000.png') no-repeat center;background-size:24px;border:none;border-radius:0;color:transparent} .col2.is-prepare-banner.fixedBArea {display:block} .col2 .prepare-banner + a, .col2 .prepare-banner + a + a {flex: none !important;width: calc(50% - 0.25rem) !important;} .col2 .prepare-banner + a {float:left; margin:0;} .col2 .prepare-banner + a + a {float:right; margin:0;} .col2 .prepare-banner ul {margin-top:8px} .is-prepare-banner.fixedBArea .btnL {height: 48px; line-height: 48px; font-size:1.0rem;} /* 하단 버튼 none fixed - scroll end */ .is-fixed__false.is-prepare-banner {border-radius:0; box-shadow:none; padding-top:0;} .is-fixed__false.is-prepare-banner:before{content:"";display:block;margin: 0 -16px 0;height:6px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#f2f3f4;} .bottomPop + .is-fixed__false.is-prepare-banner:before {display:none; content:none;} .is-fixed__false .prepare-banner {display: block !important; padding:1.0rem 0;} .is-fixed__false .prepare-banner ul {margin-top:16px} .is-fixed__false .prepare-banner ul li .icon img {width:2.5rem;display: inline-block;} .is-fixed__false .prepare-banner ul li .txt {font-size:1rem !important} /*24.04.15 : [카드] WESH Travel, 트래블러스 체크카드 연계 배너 추가*/ .card-link-banner {position: relative; text-align: center;} .card-link-banner .swiper-wrapper .swiper-slide a {display:block; overflow:hidden; -webkit-border-radius: 4px; border-radius: 4px;} .card-link-banner .swiper-wrapper .swiper-slide a img {width:100%;} .card-link-banner .swiper-navi-cont { position:absolute; left:0; bottom:11px; z-index: 2; display:flex; align-items: center; justify-content: center; width:100%; height:18px;} .card-link-banner .btnPause {overflow: hidden; margin-left: 4px; width: 18px;height: 18px;border-radius: 18px;font-size: 1px;color: transparent; position:relative;display: inline-block;} .card-link-banner .btnPause:after {display: block; content: '';position: absolute; top: 0; left:0; width: 18px;height: 18px;background: url(https://img1.kbcard.com/home_re/mo/ico/24/ico-play.svg) no-repeat center center; background-size: 18px;} .card-link-banner .btnPause.on:after {background: url(https://img1.kbcard.com/home_re/mo/ico/24/ico-pause.svg) no-repeat center center; background-size: 20px;} .card-link-banner .swiper-pagination {position:relative; width: 100%;height:6px;} .card-link-banner .swiper-pagination--inline {display:inline-block;width: auto;} .card-link-banner .swiper-pagination-bullet {width: 8px; height:8px; display:inline-block; border-radius: 100%; background: #000; opacity: .2;} .card-link-banner .swiper-pagination > span {width: 6px; height:6px; display:inline-block; background: #cfcfd1;border-radius: 3px; vertical-align:top; opacity: 1;} .card-link-banner .swiper-pagination > span + span {margin-left:6px;} .card-link-banner .swiper-pagination-bullet-active {width:16px !important; background: #1f1f20 !important;} /*24.04.24 : [금융] 이지신용대출 관련 화면 변경 */ .box--shadow2 {padding: 1.5rem 1.0rem; background-color: #fff; box-shadow: 0 2px 8px 0 rgb(0 0 0 / 16%); border-radius: 1.0rem;} .box__article { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(0, 0, 0, .08);} .banner_loan_pop .desc {padding:48px 0 48px 96px; position:relative; background:url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/64/ico_coinPer_64.png) no-repeat 16px center; background-size:64px;} .banner_loan_pop .btnBox2 {padding:0 16px 32px 16px; display:-webkit-box;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-box-align:center} .banner_loan_pop .btnBox2 > span{display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1} .banner_loan_pop .btnBox2 > span:first-child {padding-right:8px;} .banner_add_loan_pop .desc {padding: 48px 10px 48px 75px; position:relative; background: url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/visual/64/ico_coinPer_64.png) no-repeat left center; background-size:64px auto;} .banner_add_loan_pop .desc p {word-break: normal;} .banner_add_loan_pop .desc.carloan {background:url(https://img1.kbcard.com/home_re/mo/ico/32/ico-usedcar04.svg) no-repeat left center; background-size:64px auto;} .finance-ban {display:flex; justify-content: space-between; align-items: center;} .finance-ban__cnt {font-size:1.0rem;} .finance-ban__img {width:56px;} .finance-ban__img img {width:100%;} .txt-l {font-size:1.125rem; line-height: 1.625rem;} .txt-xl { font-size: 1.250rem; line-height: 1.750rem;} .txt-point {font-size: 1.750rem; font-weight: 600; line-height: 2.250rem;} .comeUp.banklist .selectList li {height:auto;} .comeUp.banklist .selectList li a {padding: 10px 34px 10px 16px; box-sizing: border-box;} /*24.06.19:[고객센터] 도난분실신고 내 카드수령지 선택 영역 개선*/ .receipt-btn {vertical-align: middle; display:inline-block; padding-right:24px; position:relative; font-weight: 600;} .receipt-btn:before {content:''; display:block; position:absolute; right:0; top:0; width:24px; height:24px; background:url(https://img1.kbcard.com/home_re/mo/arr/24/arr-1-down.svg) no-repeat center center; background-size:24px auto;} .receipt-btn.on:before {-webkit-transform: rotate(180deg); transform: rotate(180deg);} /* 로딩 ooOo */ .loading-bar {display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; width: 54px; height: 12px; margin: 0 auto;} .loading-bar span{width: 8px; height: 8px; background-color: #ffd743; border-radius: 50%; animation: loading 1s ease-in-out infinite;} .loading-bar span:nth-child(1){animation-delay: 0;} .loading-bar span:nth-child(2){animation-delay: .2s;} .loading-bar span:nth-child(3){animation-delay: .4s;} .loading-bar span:nth-child(4){animation-delay: .6s;} .loading-bar__gray span {background-color: #aab0b8;} @keyframes loading{ from{ transform: scale(1.5); } to{ transform: scale(1); } } /* 틴업카드 디자인 선택 */ .layerWrap.fullLayer .popCont.pop-cont--teentup {padding-top:3.5rem;padding-right:0;padding-left:0;} .pop-cont--teentup:before { content: ''; display: block; position: absolute; top:0; left:0; z-index: -1; width:100%; height:301px; background: url(https://img1.kbcard.com/home_re/mo/img/card/bg-design-sel.svg) no-repeat center bottom; background-size:cover; } .pop-cont--teentup h1 {color: #26282c;font-size:1.5rem; font-weight:bold; line-height:1.33; text-align:center;} .pop-cont--teentup > .contArea {margin-top:2.25rem;padding: 0 16px !important;} .pop-cont--teentup .listType2 > li {margin-bottom:1rem;} .sl-card--teenup.swiper-container{margin-top:1.5rem;margin-left:0;margin-right:0;padding-top:13px;overflow: visible;} .sl-card--teenup .swiper-slide { display: flex;width:212px; transition: 0.6s;justify-content: center;align-items: center;} .sl-card--teenup .img-card {position:relative;width:153px;height:96px; margin-bottom: 15px;line-height:97px;} .sl-card--teenup .img-card:after {content: '';position: absolute;top:0px;left:50%;width:153px;height:98px;margin-top: 0;margin-left:-76px;background:#ffe17c;border-radius: 8px;opacity: 0.5;} .sl-card--teenup .img-card img {width:153px;height:96px;border-radius: 8px;vertical-align: middle;} .sl-card--teenup .img-card + strong {font-size:15px;} .sl-card--teenup .img-card.row {width: 234px; height: 234px; line-height:234px;} .sl-card--teenup .img-card.row:after {content: '';position: absolute;top:0px;left:50%;width:148px;height:235px;margin-top: 0;margin-left:-74px;} .sl-card--teenup .img-card.row img {width: 234px;height: 148px;transform: rotate(90deg);} .sl-card--teenup .swiper-slide-active {transform: scale(1.11111);} .sl-card--teenup .swiper-slide-active .img-card:after {opacity: 0} .sl-card--teenup .swiper-slide-active .img-card img {box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.24)} .sl-card--teenup .swiper-button-next, .sl-card--teenup .swiper-button-prev{ position:absolute; top:50%; right:50%; left:auto; z-index:10; width:40px;height:40px; margin-top:-44px; margin-right:-162px; border:0;border-radius: 50%; cursor:pointer; background-color:rgba(0, 0, 0, .5); background-size:24px 24px; background-image:url(https://img1.kbcard.com/home_re/mo/arr/24/arr-2-right-w.svg) !important; background-position:center; background-repeat:no-repeat; color:black; box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5); } .sl-card--teenup .swiper-button-prev{left:50%;right:auto;margin-left:-162px;margin-right:0;transform:rotate(0deg);background-image: url(https://img1.kbcard.com/home_re/mo/arr/24/arr-2-left-w.svg) !important;} @media screen and (max-width:319px){ .sl-card--teenup .swiper-button-prev{margin-left:-50%;} .sl-card--teenup .swiper-button-next{margin-right:-50%;} } /*25.11.25 : KB Youth Club 상세혜택*/ .ico-info-list li { display: flex; align-items: center; justify-content: flex-start; width: 100%; font-size: 1.0rem; line-height: 1.5rem; margin-top:1.6rem; } .ico-info-list li:first-child {margin-top:0;} .ico-info-img { width: 3.125rem; height: 3.125rem; flex-shrink: 0; margin-right: 1.0rem; align-content:center; } .ico-info-img img {width:100%;} .ico-info-tit {font-weight:bold;} .ico-info-txt {font-size:0.875rem;} .tit-form {display: flex;margin-top: 2rem;color: var(--gray060);font-size: 1rem;font-weight: 400;line-height: 1.5;} /* KB Pay 3.0 플로팅 배너 */ .float-banner {position:fixed; left:1rem; bottom:6.5rem; width:3rem; border-radius:1.5rem; opacity:0; z-index:100;} .float-banner.float-banner__open {animation:floatBannerAni 1.5s linear forwards;} .float-banner.float-banner__ing {width:calc(100% - 2rem); max-height:fit-content; opacity:1; transform:translateY(0%); box-shadow:0 .625rem .625rem 0 rgba(0,0,0,0.2);} .float-banner.float-banner__hide {animation:floatBannerHideAni .8s linear forwards;} .float-banner .btn {display:block; position:relative; width:auto; height:auto; padding:0; border:none; background-color:unset;} .float-banner .float-banner__link::after {content:''; display:block; position:absolute; top:50%; right:1rem; width:1rem; height:1rem; margin-top:-.5rem; background:url(https://img1.kbcard.com/home_re/mo/arr/16/arr-1-right-w2.svg) no-repeat; z-index:0; opacity:0; visibility:hidden;} .float-banner .event-link__none {pointer-events:none;} .float-banner .event-link__none::after {background:none;} .float-banner__cont {display:flex; justify-content:space-between; align-items:center; min-height:3rem; padding:.75rem 1rem .75rem .75rem; border-radius:1.5rem; background:linear-gradient(to left, #6d6bdd 12%, #7452d1); box-sizing: border-box;} .float-banner__img {display:block; position:absolute; left:.75rem; bottom:0; width:3.75rem; height:3.75rem; opacity:0; visibility:hidden;} .float-banner__img img {display:block; width:100%; height:100%; object-fit:contain;} .float-banner__desc {width:calc(100% - 3.25rem); max-height:1.375rem; font-weight:600; font-size:.875rem; line-height:1.57; color:var(--g0-to-g9); margin-left:.5rem; word-break:keep-all; -ms-word-break:keep-all; display:-webkit-box; line-clamp:2; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden; opacity:0; visibility:hidden;} .float-banner__open .float-banner__link::after, .float-banner__open .float-banner__img, .float-banner__open .float-banner__close {opacity:1; visibility:visible; transition:opacity 0.5s; transition-delay:1.5s;} .float-banner__open .float-banner__desc {max-height:2.75rem; opacity:1; visibility:visible; transition-property:max-height, opacity; transition-duration:.5s; transition-delay:1.5s;} .float-banner__img + .float-banner__desc {width:calc(100% - 5rem); margin-left:3.75rem;} .float-banner .btn-enter {width:2.5rem; height:1.5rem; font-weight:400; font-size:.875rem; color:var(--gray000); background:var(--badge-color-violet); z-index:1; opacity:0;} .float-banner__close {display:none; position:absolute; top:-1.75rem; right:0; width:1.75rem; height:1.75rem; border:none; background:url(https://img1.kbcard.com/home_re/mo/ico/20/ico-floating-close.png) center no-repeat; background-size:1.25rem; opacity:0; visibility:hidden;} .float-banner__ing .float-banner__link::after, .float-banner__ing .float-banner__img, .float-banner__ing .float-banner__close {opacity:0; visibility:hidden; transition:opacity 0.5s;} .float-banner__ing .float-banner__desc {max-height:1.375rem; opacity:0; visibility:hidden; transition-property:max-height, opacity; transition-duration:.5s; transition-delay:0s;} @keyframes floatBannerAni{ 0% {opacity:0; transform:translateY(100%);} 25% {opacity:1; transform:translateY(0%);} 40% {transform:rotate(0deg);} 60% {transform:rotate(360deg);} 65% {width:3rem; box-shadow:none;} 100% {width:calc(100% - 2rem); max-height:fit-content; opacity:1; transform:translateY(0%); box-shadow:0 .625rem .625rem 0 rgba(0,0,0,0.2);} } @keyframes floatBannerHideAni{ 55% {width:3rem; box-shadow:none; opacity:1;} 90% {width:3rem; opacity:1; transform:translateY(0%);} 100% {width:3rem; opacity:0; transform:translateY(100%);} }