/*전북은행 클래스*/
.cb-body{font-family: 'Spoqa Han Sans Neo', 'sans-serif'; font-weight: 400; margin:0}
.cb-chatting-balloon p {font-weight: 400;}

h1{font-size: 24px;}
h2{font-size: 22px;}
h3{font-size: 20px;}
h4{font-size: 18px;}
h5{font-size: 16px;}
h6{font-size: 14px;}

/*Width*/
.wauto{width: auto !important;}
.w25{width: 24.3% !important;}
.w30{width: 30%;}
.w33{width: 32.7% !important;}
.w50{width: 49% !important;}
.wm50{max-width: 49%;}
.w60{width: 60% !important;}
.w70{width: 70% !important;}
.w80{width: 80% !important;}
.w90{width: 90% !important;}
.wm90{max-width: 90%;}
.w95{width: 95%;}
.wm95{max-width: 95%;}
.w100{width: 100% !important;}

/*Border*/
.bb-none{border-bottom: none !important;}
.bt-none{border-top: none !important;}
.border-all {border: 1px solid #E1E3E6;}
.border-bottom{border-bottom: 1px solid #E1E3E6;}
.border-top{border-top: 3px solid #ecedef; padding-top: 24px; margin-top: 24px;}

/*margin*/
.mt-0  {margin-top: 0px !important;}
.mt-4  {margin-top: 4px !important;}
.mt-8  {margin-top: 8px !important;}
.mt-12 {margin-top: 12px !important;}
.mt-16 {margin-top: 16px !important;}
.mt-20 {margin-top: 20px;}
.mt-24 {margin-top: 24px;}

.mb-0 {margin-bottom: 0px !important;}
.mb-8{margin-bottom: 8px;}
.mb-16{margin-bottom: 16px !important;}
.mb-20 {margin-bottom: 20px;}
.mb-24 {margin-bottom: 24px !important;}

.ml-4{margin-left: 4px !important;}
.ml-8{margin-left: 8px;}
.ml-12{margin-left: 12px !important;}
.ml-30{margin-left: 30px;}

.mr-4{margin-right: 4px !important;}
.mr-8{margin-right: 8px !important;}

/*Padding*/
.pt-0 {padding-top: 0 !important;}

.pb-0 {padding-bottom: 0 !important;}
.pb-4 {padding-bottom: 4px !important;}


.pr-0 {padding-right: 0 !important;}

/*line-height*/
.lh-24 {line-height: 24px;}

/*font*/
.f-11{font-size: 11px !important;}
.f-12{font-size: 12px !important;}
.f-13{font-size: 13px !important;}
.f-14{font-size: 14px !important;}
.f-16{font-size: 16px !important;}
.f-18{font-size: 18px !important;}
.f-20{font-size: 20px !important;}
.f-32{font-size: 32px !important;}
.f-40{font-size: 40px !important;}

/*Icon & Image*/
.icon-15{width: 15px !important; height: 15px !important;}
.icon-20{width: 20px !important; height: 20px !important;}
.icon-30{width: 30px !important; height: 30px !important;}
.icon-40{width: 40px !important; height: 40px !important;}
.icon-75{width: 75px !important; height: 75px !important;}
.icon-card{width: 55px !important; height: 88px !important; border: 1px solid #707070; border-radius: 6px;}
.img-card{width: 80px !important; height: 70px !important;}
.waittingChat {width: 90px; height: 75px;}

/*Display*/
.d-inline-block{display: inline-block !important;}
.d-inline{display: inline !important;}
.d-block{display: block;}
.d-none{display: none;}
.d-flex {display: flex !important;}

.font-bold{font-weight: bold !important;}

/*Scroll*/
.scroll-400{ position: relative; max-height: 400px !important; overflow-x: hidden; overflow-y: auto;}
.scroll-500{ position: relative; max-height: 500px !important; overflow-x: hidden; overflow-y: auto;}
.scroll-600{ position: relative; max-height: 600px !important; overflow-x: hidden; overflow-y: auto;}
.scroll-700{ position: relative; max-height: 700px !important; overflow-x: hidden; overflow-y: auto;}

/*text allign*/
.f-left{float: left;}
.f-right{float:right;}

.text-left{text-align: left !important;}
.text-center{text-align: center !important;}
.text-right{text-align: right !important;}

.font-bold {font-weight:bold !important; color: #212529 !important; }

#mask{background: rgba(0,0,0, 0.5) !important; opacity: 1 !important;}
.box {background-color: #F5F7F8; padding: 14px 16px;}
.auto-space {white-space: pre-line;}
.span-right {position: absolute; text-align: right; right: 15px; display: inline !important; line-height: 26px !important;}
.middle {vertical-align: middle; line-height:57px; text-align: left !important;}
.address {display: inline-block; height: 40px; width: 29%; padding: 0;}
.bank-info {display: none;}
#kakaoMaps {height: 400px; width: 100%; overflow-x: hidden;}

.coin {color:#0565F0; text-align: right; padding: 0 12px;}

i {margin-right: 6px !important;}
/*active*/
.cb-popup {display: none !important;}
.cb-popup-active{position: relative; display: block; z-index: 500000; height: 100%; }

.cb-pds-down-active{display: block; z-index: 500000; }

.black{color:#212529 !important;}
.red{color: #E5493A !important} 
.blue{color:#5697F0 !important;}
.gray{color:#A9B0B8 !important}

.label-blue {border-radius: 3px; font-size: 11px; color:#8C9EC2; padding:2px 8px; background: #30415F; margin-left: 10px; margin-top: 0;}
.label-red {border-radius: 3px; font-size: 11px; color:#E0667A; padding:2px 8px; background: #391C27; margin-left: 10px; margin-top: 0;}

.location {display: inline !important; font-weight: bold; color: #307FF0; font-size: 16px !important; padding-left: 4px;}

.chat-img {width: 120px; height: 120px; float: left; background: #ceeeff; border-radius: 20px; margin-right: 12px;}
.chat-text{display: inline-block; width: calc(100% - 140px);} 

/*-----------------------------------------------button Start-----------------------------------------------------------------*/
button{margin-top:0; background-color: #fff; color:#212529; padding-left: 0; line-height: normal; border:none}

/*button Size*/
.jb-btn-ssm{height: 24px; line-height: 16px; font-size: 12px; display: inline-block; font-weight: bold; border-radius: 3px; padding: 4px 0;}
.jb-btn-sm{height: 28px; line-height: 10px; font-size: 12px; display: inline-block; font-weight: bold; border-radius: 4px; padding: 8px 2px; }
.jb-btn-md{height: 36px; line-height: 16px; font-size: 14px; display: inline-block; font-weight: bold; border-radius: 6px; padding: 10px 0;}
.jb-btn-lg{height: 52px; line-height: 16px; font-size: 16px; display: inline-block; font-weight: bold; border-radius: 6px; padding: 16px 0;}
 
/*button responsive*/
.btn-one {width: 100%;}
.btn-two {width: 49%;}
.btn-three{ width: 32.7%;}
.btn-four {width: 24.3%;}
.btn-five{width: 19.3%;}
.btn-six{width: 15.9%;}
.btn-auto {width: auto; padding: 4px 8px;}

/*button Color*/
.btn-full-primary{background: #0565F0; color:#fff;}
.btn-full-secondary {background: #E6F1FF; color:#0565F0; } 
.btn-full-white{background: #fff; color:#212529; box-shadow: 10px 10px 22px rgba(0,0,0, 0.16);} 
.btn-full-lightblue {background:rgba(5,101,240, 0.04); color:#515961; border: 1px solid #E1E3E6}

.btn-full-blue {background: #307FF0; color:#fff;}
.btn-full-gray {background: #8B959E; color:#fff;}

.btn-inline-primary{border: 1px solid #0565F0; color:#0565F0; background: #fff;} 
.btn-inline-secondary{border: 1px solid #707070; color:#515961; background: #fff;}
.btn-inline-white{background: #fff; color:#0565F0; border:none !important}
.btn-inline-gray{border: 1px solid #E1E3E6; color:#515961; background: #fff;}

.btn-disabled {background: #8B959E; color:#363c42}
.btn-small-disabled {background: #F5F7FA; color: #A9B0B8;}

/*button exception*/
.btn-clicked {border: 1px solid #0565F0; color:#0565F0;}
.btn-small {width: calc(25%) !important; height: 28px; line-height: 26px !important; margin-top: -11px; float: right; border-radius: 3px; border: 1px solid #C0C6CC; display: inline-block !important; text-align: center; font-size: 12px;}
.btn-firsttime{display:inline-block; background: linear-gradient(to bottom, #00A5FF,#0565F0); color: #fff !important; padding: 8px 12px; border-radius: 6px; margin-right: 2px; margin-top: 4px;}
.btn-address {border: 1px solid #0565F0; width: 95%; height:100%; color: #0565F0; border-radius: 6px;margin-left: 5px;}

.cb-chatting-balloon > .cb-chatting-btn {text-align: center; margin-top: 16px !important;}
.cb-chatting-chatline-btn{width:95%; padding-left: 30px !important;}
.cb-btn {margin-top: 12px; width: 100%;}
/*---------------------------------------------------------Button End-----------------------------------------------------------*/


/*chatbot tip && chatbot menu*/
#cb-chatting-input .cb-left{width: 50px !important;}
#cb-chatting-input .cb-center {padding-left: 10px !important;}
.cb-chatting-tip {background: url('../img/tip.png') no-repeat center left; background-size: 18px; padding-left: 22px; margin-left: 5px; color: rgba(255,255,255, 0.75);}
.cb-chatting-menu img{ position:fixed; bottom:5px; left: 5px; z-index: 100;}
.cb-chatting-menu[aria-selected="true"] img{content: url(../img/icon-menu-close.png);}
.cb-chatting-menu[aria-selected="false"] img{content: url(../img/icon-menu.png);}
.cb-chatting-menuopen{ position:fixed; bottom:5px; left: 5px; z-index: 100;}
.cb-chatting-menuopen{ position:fixed; bottom:5px; left: 5px; z-index: 100;}
.cb-chatting-menuopen img{ width:40px; height:40px;}
.cb-chatting-menuclose{ position:fixed; bottom:5px; left: 5px; z-index: 100;}
.cb-chatting-menuclose img{ width:40px; height:40px;}

.cb-chating-tooltip { position: relative; display: inline-block; top:-7px; left:-8px;/*bottom: 242px; 웹접근성 2012.10.28*/}
.cb-chating-tooltip .tooltip-text{visibility: hidden; z-index: 100; width: 96px; background-color:#0565F0; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: fixed;bottom: 65px; left: 15px;}
.tooltip-animation {
    animation-name: fadein, blink-effect;
    animation-delay: 0s, 3s;
    animation-duration: 3s, 12s;
    animation-timing-function: ease-in-out, ease-in-out;
}

.tooltip-text::after{content: ""; position: absolute; top: 100%; left: 21px; margin-left: -5px; border-width: 4px 5px 5px 0 !important; border-style: solid; border-color:  #0565F0 transparent transparent transparent !important;}
.cb-chating-tooltip:hover .tooltip-text{ visibility: visible; }



/*챗봇헤더*/
#cb-navigator {height: 52px;}
#cb-navigator .cb-cell-left { position: absolute; top: 0; left: 0; bottom: 0; width: 45px; text-align: center; padding: 5px; }
/*#cb-navigator .cb-cell-left .cb-icon-close {display:block; width:100%; height:100%; background: url(../skin/svg/exit.svg) no-repeat center center; background-size:45%; opacity:0.6;} 2022.11.21 중복으로 인해 삭제*/
#cb-navigator .cb-cell-center h1 {display: inline-block; color:#fff; text-align: center;font-size:1.2em !important; font-weight: 300; color: #fff; line-height:52px;} /*웹접근성 2022.10.27 - 로고 h3에서 h1태그로 변경  */
#cb-navigator .cb-cell-center h3 {display: inline-block;}
#cb-navigator .cb-cell-right {line-height: 40px !important;}
#cb-navigator .cb-cell-right img {width: 24px; height:24px;}
.cb-cell.cb-cell-left {display: block !important;}
.cb-chatting-title{display: inline-block;}
.cb-chatting-title img {width: 24px;}

/*챗봇 이미지 영역*/

/*챗봇 이미지*/
/*
최대 20자~23자
.cb-info {position: fixed; top: 65px; right: 20px; height: 35px; width: 175px; border-radius: 18px; padding: 0 30px 0 15px; z-index: 10000; background-color: rgba(255,255,255, 0.9);}
*/
.cb-info{position: fixed; top: 65px; right: 20px; height: 35px; width: 175px; line-height: 35px; border-radius: 18px; padding: 0 15px; z-index: 10000; background-color: rgba(255,255,255, 0.9);}
.cb-info-img{position: fixed; top:65px; right: 20px; z-index: 10000; cursor: pointer; background: #0E346A; border-radius: 100%;}
.cb-info-img img {width: 35px; height: 35px; border-radius: 70%;}  
.progress >.cb-info {border:none; background: #0E346A; color:#fff; width: 115px; box-shadow: 0 3px 6px rgba(0,0,0,.16);}
.progress > .cb-info-img img {border: 2px solid #0E346A; }

/*채팅상담 이미지*/
.chatting-info-time {background: url('../img/bot.png??%202254.png') no-repeat center left; background-size: 40px; margin-bottom: 8px; padding-left: 50px; color:#0565F0}

/*챗봇 영역*/
.cb-chatting-received {padding-left: 20px !important; padding-right: 20px !important;}
.cb-chatting-received .cb-right { margin-left: 60px; height: 45px; }
.cb-chatting-received .cb-right .cb-chatting-info{ height: 45px; margin-bottom: 0; line-height: 45px;}
.cb-chatting-received .cb-right-faq{margin-left: 60px; }
.cb-chatting-sent {padding-right: 20px; margin-bottom: 16px !important;}
.cb-chatting-received > .cb-chatting-info {margin-bottom: 12px !important; margin-top: 4px !important;}
.cb-chatting-sent > .cb-chatting-info {margin-top: 4px !important;}
.cb-chatting-date-side{ margin-left: 10px;}
.cb-chatting-name {display: inline-block;}
.alarm-icon{ cursor: pointer; background: #0d71ae url('../img/icon-alarm.png') no-repeat 3px; content: ""; background-size: 20px; padding: 3px 10px 3px 25px; margin-left: 10px; border-radius: 5px; color: rgba(255,255,255, 0.75);}

/*상담사 연결*/
.cb-connection {display: flex; flex-basis: 100%; align-items: center; margin: 15px 0;}
.cb-connection::before, .cb-connection::after { content: ""; flex-grow: 1;  background-color:rgba( 255, 255, 255, 0.2 ); height: 1px; font-size: 0px;line-height: 0px;}
.cb-connection .cb-connection-body {background: #388AFF; color:#fff; font-size: 12px; border-radius: 18px; margin: 0 11px; padding:12px 20px;}

/*챗봇 본문*/
.cb-chatting-chatline {margin-bottom: 0 !important;}
.cb-chatting-balloon {margin:4px 0 0 10px !important; padding: 12px !important;}
.cb-chatting-balloon h4{font-size: 18px; font-weight: bold; margin-bottom: 16px;} 
.cb-chatting-balloon p {margin-bottom: 16px; color: #212529; white-space: pre-line;} 
.cb-chatting-balloon p:last-child { margin-bottom: 0 !important;}
.cb-chatting-btn {margin-bottom: 8px;}
.cb-chatting-received > .cb-chatting-btn {margin-left: 10px; margin-bottom: 2px;}
.cb-chatting-balloon .cb-chatting-account p{font-size: 13px !important; color:#6E7780}

.cb-chatting-balloon > div.cb-box:first-child {padding-top: 4px;}
.cb-chatting-balloon > div.cb-box-bottom:first-child {padding-top: 4px;}

.cb-chatting-balloon > div.cb-box:last-child {padding-bottom: 4px;}
.cb-chatting-balloon > div.cb-box-bottom:last-child {padding-bottom: 4px;}
.cb-chatting-balloon > div.cb-btn:last-child {padding-bottom: 4px;}

div.cb-box > .cb-chatting-account:last-child {padding-bottom: 0;}
div.cb-box-bottom > .cb-chatting-account:last-child {padding-bottom: 0;}

div.cb-box > .cb-chatting-account > .input-container:last-child {margin-bottom: 0;}
div.cb-box-bottom > .cb-chatting-account > .input-container:last-child {margin-bottom: 0;}
/*Nav tabs*/
.cb-nav{display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;padding-left: 0;margin-bottom: 0;list-style: none;}
.cb-nav li{display: list-item; list-style: none !important;}
.cb-tabs .cb-tabs-item{ flex:1; text-align: center;}
.cb-tabs .cb-tabs-item a:focus { border:0px solid #000;}
.cb-tabs .cb-tabs-item h3{font-size:13px; font-weight: 100; color:#212529;} /*웹접근성추가 2022.10.28-추가*/
.cb-tabs .cb-tabs-item.active{border-bottom: 3px solid #212529;}
.cb-tab-body {margin-bottom: 16px;}
.cb-tab-body.no-account {background: url("../img/no-account.png") no-repeat; background-size:contain; height: 145px; position: relative; margin-bottom: 0 !important;}
.cb-tab-body.no-account p {color: #fff !important; position: absolute; top:10%; left: 35%; width: auto !important; font-size:12px !important;}
.cb-tab-body p {white-space: pre-line;}
.cb-tab-footer .jb-btn-md {margin-bottom: 4px;}
.cb-tab-footer .jb-btn-md:last-child {margin-bottom: 4px;}
.cb-tab-link {display: block;padding: 10px 0;color:#6E7780;}
.cb-tab-link.active{color:#212529; }
.cb-tab-link img{width: 24px !important; height: 24px !important; margin-right: 2px;}

.cb-tabs-content{padding-top: 15px;}
.cb-tabs-content > .cb-tab-pane {display: none;}
.cb-tabs-content > .active {display: block; }
.box-body p span{display: inline !important; font-weight: bold; padding: 0 5px;}

/*계좌 조회 panel style*/
.cb-panel{border-bottom: 1px solid #E1E3E6;}
.cb-panel:last-child{border-bottom: 0;}

.cb-panel > .cb-panel-heading{padding: 16px 0; background-color: #EEF5FF;}
.cb-panel .cb-panel-heading .panel-title a.collapsed { font-weight: 400;}
.cb-panel .cb-panel-heading .panel-title a{font-weight: bold; font-size: 16px !important;}
.cb-panel .cb-panel-heading .panel-title a span { display: inline-block; width: auto; float: right; font-size: 18px !important; font-weight: 400;}
.cb-panel .panel-title a span:after {font-family: 'FontAwesome'; font-style: normal; font-size: 26px; content: "\f106"; color: #8C959F; float: right; cursor: pointer; padding-left: 10px;}
.cb-panel .panel-title a.collapsed span:after { content: "\f107"; }

.collapse.in {display: block;}
.collapse {display: none;}

.box-body {color:#fff !important; padding: 12px !important; border-radius: 12px; background-color: #1D2D47; margin-bottom: 8px;}
.box-body p{color:#fff !important;}
.box-body .btn-two {margin-right: 2px;}
.box-body .btn-two:last-child {margin-right: 0;}
.panel-arrow-right {background: url('../img/arrow-right.png') no-repeat center right; background-size: 20px; margin-bottom: 8px;}
.panel-arrow-right h5 {font-weight: 400; text-overflow: ellipsis; width: 95%; white-space: nowrap; display: block; overflow: hidden;}
.panel-arrow-right h5.fund {font-weight: 400; width: 95%; white-space: pre-line; display: block; }
.box-body .panel-arrow-right p {color:#8B959E; font-size: 13px; line-height: 20px;}
.panel-body > ul {padding-left: 18px;}
.panel-body > ul > li{list-style: outside !important; list-style-position: outside; display:revert !important;}
.panel-body li {padding-bottom: 5px;}
.panel-body > ul.list-none {padding-left: 0; font-size: 14px; font-weight: bold;}
.panel-body > ul.list-none > li{list-style: none !important;}
.panel-body > ul.list-none > li > ul{padding-left: 18px;  margin-top: 4px;}
.panel-body > ul.list-none > li > ul > li {list-style: outside !important; list-style-position: outside; display:revert !important; font-size: 13px; font-weight: 400;}

ul.my-card > li > div {flex:1 !important; margin: 0 auto;  font-size: 11px !important;}
ul.my-card > li > div.day {line-height: 22px;}
ul.my-card > li > div > span {display: inline-block !important; width: auto !important; font-size: 16px !important;}
ul.my-card > li > div:nth-child(odd){color: #fff5c5;}
ul.my-card > li > div:nth-child(even){color: #fff;}

ul.my-card-info  {padding-bottom: 12px; border-bottom: 2px solid rgba(255, 255, 255, .12);}
ul.my-card-info > li > div {flex: 1; font-size: 11px !important;}
ul.my-card-info > li > div:nth-child(odd){color: #fff5c5;}
ul.my-card-info > li > div:nth-child(even){color: #fff;}
ul.my-card-info > li > div:last-child{color: #fff; flex: 3 !important;}
/*휴대폰 본인인증 영역*/
.cb-chatting-balloon > .cb-chatting-auth-phone > h3{text-align: center; margin-bottom: 20px ;}

.cb-chatting-balloon > .cb-chatting-auth-phone > .auth-box{border: 1px solid #E1E3E6; padding: 13px 0; border-radius: 6px;}
.cb-chatting-balloon > .cb-chatting-auth-phone > .auth-box label {font-size: 16px !important; color: #212529 !important}
/* .cb-chatting-balloon > .cb-chatting-auth-phone > .auth-box-body {padding: 8px 16px 4px 0; border-radius: 6px; background:url('../img/arrow-right.png') no-repeat right 5px center; background-size: 16px;} */
.cb-chatting-balloon > .cb-chatting-auth-phone > .auth-box-body label {font-size: 14px !important; color: #515961 !important;}

/*.cb-chatting-balloon > .cb-chatting-auth-phone > .cb-input {margin-top: 16px;}*/
.cb-chatting-balloon > .cb-chatting-auth-phone > .btn{border:none; background-color: #0565F0; font-weight: normal; color: #fff; border-radius: 6px; margin-top: 18px;}

.cb-input > span > select, input[type="text"] {margin: 8px 0;}
.cb-input > input[type="text"] {margin: 8px 0;}
.cb-input > .input-container > label >  span {color : #6E7780; font-size: 12px !important;}


/*input box label*/
.input-container { background-color: #fff; border: 1px solid #E1E3E6; border-radius: 6px; margin: 7px 0; padding: 5px 16px; height: 52px; width: 100%;}
.input-container:focus-within {border: 2px solid #5697F0;} /*웹접근성 2022.10.30 - 두께 조정*/
.input-container:focus-within label > span {color: #0565F0;}
.input-group {margin: 0 !important; width: 100%;}
.input-container input, select { margin: 0 !important; padding: 0; height: 20px; border: none !important; }
.input-container > .input-form input { margin: 0 !important; padding: 0; height: 30px;}


.cb-chatting-account > .input-container label > span {color: #6E7780; font-size: 12px !important;}
.input-container > span {color : #6E7780; font-size: 12px !important;}
.cb-popup-body > .cb-box > .cb-chatting-account > .input-container > label {display: grid;}
.cb-popup-body .title p {color: #707070;}
.cb-popup-body .body input[type="number"] {background-color: #F5F7F8; width:20% !important; margin-top: 8px; text-align: center;}
.cb-popup-body .footer-msg p {font-size: 12px; color: #6E7780; letter-spacing: -1px;}

/*Input Error*/
.error {color: red !important;}
.input-container.error  {border: 1px solid red !important;}
.input-container.error label > span {color: red !important;}

.input-group {position: relative; display: table; border-collapse: separate; box-sizing: border-box; border: none; border-radius: 6px; margin: 7px 0;}
.input-group.disableed span{background-color: #F5F7FA;}
.input-group.disableed span.input-group-center {background-color: #F5F7FA;}
.input-group-frist{display: table-cell !important; width: 45% !important;}
.input-form { width: 100%; margin: 0 !important; border: none !important; border-radius: 0 !important;} 
.input-group-center { padding: 0 12px 0 5px; height: inherit; line-height: 0 !important; text-align: center; width: 1% !important; border:none; display: table-cell !important; vertical-align: middle; /* background-color: #fff; 웹접근성 2022.11.07 달력 하이픈 수정*/ } 
.input-group span.select-box {display: table-cell !important; width: 25% !important;}
.input-group > .input-border {border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-collapse:collapse;}
.input-group-btn{position: relative; font-size: 0; white-space: nowrap; width: 1% !important; vertical-align: middle; display: table-cell !important;}
.input-group-btn > .btn {height: 40px !important; line-height: 0 !important; border-top-left-radius: 0; border-bottom-left-radius: 0;padding: 0 10px; border-collapse:collapse;}



/*휴대폰 인증 번호 요청*/
/*.phone {display: inline-block;}*/
.phone > label > input {width: 75%;}
.phone > label > .auth-number{ width: calc(15%) !important; display: inline-block !important; float: right; color: #E5493A !important;}
.phone > label > .auth-number{ margin-top: 2px !important; height: 20px !important}
.phone > label > .phoneNum {width: 80% !important; display: inline-block !important;}



/*조회 selectbox input selectbox style && panel style*/
.cb-chatting-account .input-container {padding: 5px 12px;}
.cb-chatting-account .input-date{padding: 12px; height: 50px;}

.cb-chatting-account .cb-panel-group{border: 1px solid #E1E3E6; border-radius: 6px;}
.cb-chatting-account .cb-panel-group .cb-panel .cb-panel-heading{ padding: 12px;}
.cb-chatting-account .cb-panel .cb-panel-heading .panel-title a{font-size: 14px !important; font-weight: 400;}
.cb-chatting-account .panel-body{ background-color: #F5F7F8; padding: 12px 12px; }
.cb-chatting-balloon .cb-chatting-account .panel-body p {font-size: 13px !important; color: #212529;}


/*조회 box style*/
.cb-box-bottom {border-bottom: 3px solid #ecedef; padding-bottom: 24px; margin-bottom: 24px;}
.cb-box h5, h6{margin-bottom: 12px;}
.cb-box-bottom h5, h6{margin-bottom: 12px;}
 
.cb-chatting-account {margin-bottom: 12px;}
.cb-chatting-account:last-child {margin-bottom: 0;}
.cb-chatting-account p {margin-bottom: 4px !important;}
.cb-chatting-account h5, h6{margin-bottom: 0;}

.cb-chatting-account.search {display: table;}
.cb-chatting-account.search > div:first-child{display: table-cell; padding-right: 5px; width: 45%;}
.cb-chatting-account.search > div:last-child{display: table-cell;  width: 100%}
/*계좌 박스*/
.cb-detailbox {background: #fff; border:1px solid #E1E3E6; box-shadow:0 0 12px rgba(33,37,41, 0.04); padding: 12px; border-radius: 6px; margin-bottom:8px}
.cb-detailbox:last-child {margin-bottom: 0;}

.cb-detailbox .cb-detailbox-title h6 {margin-bottom: 0 !important;}
.cb-detailbox .cb-detailbox-title h6:last-child {margin-bottom: 8px !important;}
.cb-detailbox .cb-detailbox-title p{text-overflow: ellipsis; font-size: 13px !important; color:#515961;}
.cb-detailbox .cb-detailbox-title span{margin-bottom: 12px; font-size: 16px !important; text-align: right;}
.cb-detailbox .cb-detailbox-title span:last-child{margin-bottom: 0;}
.cb-detailbox .cb-detailbox-title span strong{margin: 0 2px; font-size: 18px;}
.cb-detailbox .cb-detailbox-title ul {margin: 12px 0 8px 0}

.cb-detailbox .cb-detailbox-title .cb-detailbox-body {padding: 0; padding-bottom: 4px; color:#6E7780; font-size: 13px;}
.cb-detailbox .cb-detailbox-body h6{color: #0565F0; font-weight: 400;}
.cb-detailbox .cb-detailbox-footer {margin-top: 8px !important;}
.cb-detailbox .cb-detailbox-footer p {font-size: 12px !important;}

.detailbox-title {margin-top: 8px;}
.detailbox-title span{display: inline-block !important; width: auto !important; background-color: #CCE2FF;}

.cb-detailbox-body ul {padding: 0; border-top: 1px solid #E1E3E6; }
.cb-detailbox-body ul.border-none {border-top:none; padding: 0;}

ul.account-list li div {font-size: 14px !important; color:#212529 !important;}
ul.account-list li div:last-child{ text-align: left;}

.cb-detailbox-body ul:last-child {padding-bottom: 0;}
.cb-detailbox-body ul li div{text-overflow: ellipsis; padding: 5px 0;}
.cb-detailbox-body.padding-none ul li div{padding: 0;}
.cb-detailbox-body .cb-chatting-account h5 {color:#20529E; margin-top: 8px;}

.cb-imgbox {background: #fff; border: 1px solid #e1e3e6; border-radius: 6px; margin-bottom: 16px;}
.cb-imgbox-body #maps {width: 100%; height: 130px; border-radius: 6px;}
.cb-imgbox-body img{border-top-left-radius: 6px; border-top-right-radius: 6px;}
.cb-imgbox-footer{display: table; width: 100%;}
.cb-imgbox-footer a{display: table-cell !important; width:50% !important; text-align: center; padding: 12px 0; font-weight: bold; font-size: 14px !important;}
.cb-imgbox-footer a:first-child {background: #fff; color:#212529; border-bottom-left-radius: 6px; }
.cb-imgbox-footer a:last-child {background: #0565F0; color: #fff; border-bottom-right-radius: 6px; }

.agree-box{background-color: #F5F7F8; overflow-x: hidden; overflow-y: auto; padding: 14px 16px; height: 130px;}

p.accTitle{margin-right: 1px !important;}
div ul > li {float:none !important}
div ul li {display: flex;}
div ul li div{flex:3.5; text-overflow: ellipsis; font-size: 13px !important;}
div ul li div:first-child{flex:1.5; color: #6E7780; ; font-size: 12px !important;}
div ul li div:last-child{flex:2; text-align: right;}
ul.border li{border-bottom:  1px solid #E1E3E6; padding: 4px 0;}

.cb-chatting-account div.none { max-height: none;}
div.none{overflow-x: hidden;overflow-y: auto; max-height: 200px;}
div.none ul li div.box-body h5{color:#fff; text-align: left;}
div.none ul li div.box-body p{text-align: left; color: #8C959F; text-decoration: underline;}
div.none ul li div.box-body span.text-right {color:#fff; font-size: 16px;}

.flex-1 div{flex: 1 !important;}
.cd-chatting-pd-none {margin-bottom: 12px;}
.cd-chatting-pd-none ul li div p{margin-bottom: 0; color:#212529 !important; font-size: 16px;}
.cd-chatting-pd-none ul li div p:last-child{color:#6E7780 !important; font-size: 11px !important;}
.cd-chatting-pd-none ul li div{border-bottom: 1px solid #E1E3E6; padding: 8px 0;}
.cd-chatting-pd-none ul li:last-child div{border-bottom: none;}
.cd-chatting-pd-none ul li div.date-none{border-bottom: none;}

.card-list ul li:first-child {padding: 0 0 10px 0;}
.card-list ul li {display: block; padding: 15px 0; border-bottom: 1px solid #E1E3E6;}
.card-list ul li a{display: flex !important;}

.card-list ul li a div.flex-3 {flex: 3; text-align: left;}
.card-list ul li a span{flex:1; text-align: right; padding-top: 8px;}

.card-list ul > li > a > div > p{font-size: 14px; color:#A9B0B8; margin-top: 5px;}
.card-list ul li div{flex:1; text-align: center;}
.card-list ul li div:nth-child(2){flex: 2;}
.card-list ul li div:last-child{text-align: left; flex: 4; padding-left: 10px;}

.product-list ul li{border-bottom: 1px solid #E1E3E6; padding: 8px 0;}
.product-list ul li > div {text-align: left !important; width: 100%;}
.product-list ul li > div.text-center {text-align: center !important;}
.product-list ul li > div h5,h6 {color: #212529 !important; margin-bottom: 8px !important;}
.product-list ul li > div p{margin-bottom: 2px !important;}

.product-list ul.border-none li{border-bottom: none;}
.product-list ul > li > a > p {margin-top: 8px;}
.product-list ul > li > a > p:last-child {color:#6E7780 !important; text-align: right;}
.product-list ul > li > a > p strong {font-size: 16px !important; color:#212529 !important; padding-left: 4px;}
.product-list ul > li > span {width: auto !important; padding-right: 12px;}
.product-list > .border-none > li {padding: 4px 0;}
.search-list{white-space: nowrap; overflow: auto; text-overflow: ellipsis; max-height: 325px;}
.search-list ul li {border-bottom: 1px solid #E1E3E6; padding: 10px 0; display: block;}
.search-list ul li a {display: flex; text-align: left;}
.search-list ul li h6 {color:#212529}
.search-list ul li p {margin-bottom: 0;}
.search-list ul li span {padding: 10px 0;}

.children-list {padding-right: 0 !important; }
.children-list.flex5 {flex:5 !important;}
.children-list ul {padding-right: 0 !important;}
.children-list ul li {padding: 0 !important; display: flex !important; border-bottom: none; border-top:none;}
.children-list ul li div{text-align: left; padding: 2px 0;}
.children-list ul li div:last-child {text-align: right; padding-right: 5px; flex: 1;}
.children-list ul.f-flex3 li div:first-child {flex:2}
.children-list ul.f-flex3 li div {padding:0}


.select-card {margin-bottom: 16px; border-bottom: 1px solid #e1e3e6;}
.select-card:last-child {margin-bottom: 0; padding-bottom: 0;}
.select-card-body {display: flex; }
.select-card > .select-card-body > div > h6 {margin-bottom: 0 !important}
.select-card > .select-card-body > div > p {margin-bottom: 0 !important}
.select-card-body .img-card {margin-right: 10px;}

.account-flex li div:first-child{flex: 2 !important;}
.account-flex li div:last-child{flex: 1.5 !important;}

.account-flex li div .date{font-size: 12px !important; color:#6e7780 !important}

.account-flex li div .blue{color:#5697F0 !important}
.account-flex li div .red{color:#E5493A !important}

/*dim layer popup style*/
.card-popup{max-height: 870px !important; top: 3% !important;}

.cb-dim-layer{ display: none; position: fixed; top: 0; left: 0; width: 100%;height: 100%; z-index: 100;}
.cb-dim-layer .cb-dim-layer-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.6; filter: alpha(opacity=60);}

.cb-popup-container{ position: relative; max-width: 425px;height: 100%;  margin: 0 auto;}
.cb-popup-layer {display: block; position: absolute; background: #fff; width: 90%; max-height: 75%; top:15%; border-radius: 12px; margin: 0 20px; padding: 20px; box-shadow: 10px 10px 20px rgba(180,180,180, 0.16);}

.cb-popup-title {text-align: left; margin-bottom: 15px;}
.cb-popup-title p {color:#515961; font-size: 13px; font-weight: 400;}
.cb-popup-title .cb-popup-close  {float: right;}
.cb-popup-title .cb-popup-close img {width: 25px; height: 25px;}
.cb-popup-title .layerCloseBtn { display: block; color:transparent; background: url("../img/icon-close.png"); background-size: 25px 25px;  width:27px; height:27px; }

.cb-popup-border{margin-top: 20px;}
.cb-popup-body {position: relative; text-align: left; color: #212529; font-size: 14px; overflow:auto; max-height: 350px;}
.cb-popup-body.fund{height:200px;}
.cb-popup-body ul li {padding: 5px 0;}
.cb-popup-body ul li div:first-child {color:#8B959E; }
.cb-popup-btn {margin-top:8px;}
.cb-popup-btn button {margin-bottom: 5px;}

/*Error Message*/
.cb-error{display: flex; width: 100%;}
.cb-error-img{width: 40%;}
.cb-error-img img{width: 100%;}
.cb-error-msg {display: inline-block; width: calc(60% - 20px); margin-left: 15px; margin-top: 15px;}
.cb-error-msg h5{margin-bottom: 16px;}


/*약관동의 PDF*/
.viewPdf{ position: relative; height: auto !important; padding: 0 !important; padding-bottom: initial; -webkit-overflow-scrolling: touch; -webkit-box-flex: 1; flex: 1; }
.viewPdf iframe {height: calc(100vh - 52px);}


/*table*/
.card-table{ width: 100%; margin-top:20px; text-align: center; vertical-align: middle; border:1px solid #E1E3E6}
.card-table thead tr th{vertical-align: middle; padding: 8px 4px; background: #E6F1FF; border:1px solid #E1E3E6}
.card-table thead tr th:first-child{width: 25%;}

.card-table tbody tr td{vertical-align: middle; padding: 8px 4px;border:1px solid #E1E3E6}

.account-table {width: 100%; vertical-align: middle; border:1px solid #E1E3E6;}
.account-table tbody tr td {vertical-align: middle; padding: 8px;border:1px solid #E1E3E6; white-space: pre-line;}
.account-table tbody tr td:first-child{width: 40%; background-color: #E6F1FF;}

/*SelectBox*/
.input-border {border-radius: 6px !important; -webkit-border-radius:6px !important; border: 1px solid #E1E3E6 !important; font-size: 14px; padding: 12px !important; height: 40px;}
.input-border:focus-within {border-color: #0565F0 !important; }

input[type="number"].right {text-align: right; background:url('../img/icon-coin.png') no-repeat left center; background-size:16px; background-position: left 12px bottom 10px;}
select.input-border {background:url('../img/arrow_bottom.png') no-repeat right center; background-size:16px; background-position: right 12px bottom 10px;}
select {background:url('../img/arrow_bottom.png') no-repeat right; font-size: 13px; background-size: 16px; padding: 0 !important; height: 20px; width: 100%; font-family: inherit; border: none;  border-radius: 6px !important; -webkit-border-radius: 6px !important; display: inline-block; margin: 7px 0;}
select:active{background: url('../img/arrow-top.png') no-repeat right;}

select.right{width: 30%; padding-left: 10px !important;}
select.double{width: 45%;}
.input-group select {font-size: 13px;}

.input-container select .double:last-child {margin-left: 10px !important; }
option {padding: 15px; border-radius: 4px; background: #fff;}

/*input CheckBox*/
input[type="checkbox"] + label {  background: url("../img/checkbox-sircle-off.png") left top .090rem no-repeat; background-size: 22px; } /*웹접근성 2022.10.27 - 체크박스디자인변경*/
input[type="checkbox"]:checked + label {  background: url("../img/checkbox-sircle-on.png") left top .090rem no-repeat; background-size:22px; } /*웹접근성 2022.10.27 - 체크박스디자인변경*/
input[type="checkbox"]:disabled + label {  background: url("../img/checkbox-sircle-disabled.png") left top .090rem no-repeat; background-size: 22px; }

input[type="checkbox"].sircle +  label {  background: url("../img/checkbox-sircle-off.png") left top .090rem no-repeat; background-size: 22px; }
input[type="checkbox"].sircle:checked + label { background: url("../img/checkbox-sircle-on.png") left top .090rem no-repeat; background-size: 22px;  color: #0565F0;}
input[type="checkbox"].sircle:disabled + label { background: url("../img/checkbox-sircle-disabled.png") left top .090rem no-repeat; background-size:22px;  color: #0565F0;}

.checkbox-button > input[type="checkbox"].sircle +  label { background-size: 15px !important; margin: 5px 0 5px 5px; padding-left: 20px; min-height: 0; line-height: normal; width: 30%;}
.checkbox-button > input[type="checkbox"].sircle:checked + label {background-size: 15px !important; color: #212529 !important; padding-left: 20px; min-height: 0; line-height: normal;}

/*input radio && date*/
input[type=radio] + label{font-size: 14px; font-weight: 400; padding: .75em 1.5em; box-sizing: border-box; position: relative; display: inline-block; text-align: center; cursor: pointer; width: 40%; background: url(../img/icon_radio_off.png) left center no-repeat; background-size: 20px;}
input[type="radio"]:checked + label { background: url(../img/icon_radio_on.png) left center no-repeat; background-size: 20px;}
input[type="radio"]:disabled + label { background: url(../img/icon_radio_disabled.png) left center no-repeat; background-size: 20px;}
input[type="date"]::-webkit-calendar-picker-indicator { background: transparent; color: transparent; cursor: pointer; width: auto; height: auto; top: 0; bottom: 0; left: 0; right: 0; position: absolute;}

.survey {width: 100% !important; text-align: left !important; padding-left: 30px !important;}
.survey-text{width: 95% !important; height: 35px !important; margin: 0 0 8px 0 !important;}

textarea.content {min-height: 150px; overflow-x: hidden; overflow-y: auto; padding: 8px; line-height: 20px;}

.radio-button input[type="radio"] {opacity: 0; position: fixed; width: 0;}
.radio-button input[type="radio"]:disabled{background: #F5F7FA; color: #A9B0B8;}
.radio-button label {margin-right: 4px; display: inline-block; padding: 8px 2px !important; font-size: 12px !important; min-height: auto !important; line-height: 14px !important; border: 1px solid #e1e3e6; color: #515961 !important; border-radius: 4px; background: #fff !important;}
.radio-button label:nth-child(even) {margin-right: 0;}
.radio-button label.w100 {width: 100% !important; margin-top: 4px; text-align: left; padding-left: 8px !important;}
.radio-button label.w33 {width: 32% !important;}
.radio-button label.w25 {width: 23.5% !important;}
.radio-button label:hover {border: 1px solid #e1e3e6; color: #515961;}
.radio-button input[type="radio"]:focus + label {border: 1px solid #000; color: #515961;}
.radio-button input[type="radio"]:checked + label {border: 1px solid #0565F0; color: #0565F0; }

.radio-button-small input[type="radio"] {opacity: 0; position: fixed; width: 0;}
.radio-button-small input[type=radio] + label{font-size: 14px; font-weight: 400; padding: .75em 1.5em; box-sizing: border-box; position: relative; display: inline-block; text-align: center; cursor: pointer; width: 40%; background: url(../img/icon_radio_off.png) left center no-repeat; background-size: 20px;}
.radio-button-small input[type="radio"]:disabled{background: #F5F7FA; color: #A9B0B8;}
.radio-button-small label {margin-right: 4px; display: inline-block; padding: 4px 2px !important; font-size: 12px !important; min-height: auto !important; line-height: 14px !important; border: 1px solid #e1e3e6; border-radius: 3px; background: #fff !important; font-weight:bold;}
.radio-button-small label:focus {font-size: 18px;}
.radio-button-small label:nth-child(even) {margin-right: 0;}
.radio-button-small label.w100 {width: 100% !important; margin-top: 4px; text-align: left; padding-left: 8px !important;}
.radio-button-small label.w33 {width: 32% !important;}
.radio-button-small label.w25 {width: 24.3% !important;}
.radio-button-small label.w20 {width: 19.1% !important;}
.radio-button-small label:hover {border: 1px solid #e1e3e6; color: #515961;}
.radio-button-small input[type="radio"]:checked + label {border: 1px solid #0565F0; color: #0565F0; }
.radio-button-small input[type="radio"]:focus-visible + label { outline:2px; outline-color:#000; outline-style: solid; outline-width:2px;} /*2022.11.21 웹접근성 추가*/

.input-container > .radio-button {display: inline-block !important; float: right;  margin-top: -30px;}
.input-container > .radio-button label.gender{width: 60px !important; margin-right: 1px; padding: 6px 2px !important;}


input[type="text"].search{background:url('../img/icon-search.png') no-repeat right; background-size: 20px; background-position: right 12px bottom 8px;}

.input-container.disableed {background-color: #F5F7FA; border:1px solid #E1E3E6;}
input[type="text"]:disabled {color:#A9B0B8 !important;background-color: #F5F7FA!important; opacity:1; border-bottom: 1px solid #E1E3E6;}
 input[type="number"]:disabled {color: #A9B0B8!important;background-color:#F5F7FA !important; opacity:1; border-bottom: 1px solid #E1E3E6;}
 input[type="password"]:disabled {color:#A9B0B8 !important;background-color: #F5F7FA  !important; opacity:1; border-bottom: 1px solid #E1E3E6;}
 input[type="password"]:select {color:#A9B0B8 !important;background-color: #F5F7FA !important; opacity:1; border-bottom: 1px solid #E1E3E6;}
/*.input[type="text"]:disabled, input[type="number"]:disabled, input[type="password"]:disabled, select:disabled {color:#A9B0B8 !important;background-color: #F5F7FA !important; opacity:1; border-bottom: 1px solid #E1E3E6;}*/


.input-container02 input[type="password"]:disabled {color:#fff !important;background-color: #0565F0 !important; opacity:1; border-bottom: 1px solid red;}
.input-container02.disabled {background-color: #F5F7FA; border:1px solid #E1E3E6;}
.input-container02 { background-color: #fff; border: 1px solid #E1E3E6; border-radius: 6px; margin: 7px 0; padding: 5px 16px; height: 52px; width: 100%;}
.input-container02:focus-within {border: 2px solid #5697F0;} /*웹접근성 2022.10.30 - 두께 조정*/
.input-container02 input { margin: 0 !important; padding: 0; height: 20px; border: none !important; }
.border-none.none-select {background-color: #fff;}

input[type="text"], input[type="number"], input[type="password"]::placeholder {font-size: 13px;}
input::placeholder {color: #8c959f !important;}


/*swiper*/
.card {border: none !important; max-width: 272px !important;}
.card.text-swiper {padding: 0 !important;}
.card-title {padding: 28px 15px;background: url('../img/product-info.png') no-repeat 100% 100%, linear-gradient(to bottom, #2F2888, #e6f0ff ,#16CEF1); background-size: 200px; height: 100px; margin-bottom: 8px;}
.card-title h5 {display: inline-block !important; color:#fff !important}
.card-body .card-btn {margin-bottom: 4px !important; margin: 0 15px;}
.text-swiper {width: 210px !important; height: 235px !important;  padding: 8px 15px;}
.text-swiper .card-body h5 {text-align: center; color:#fff; font-weight: bold; padding: 8px 0 16px 0;}
.keyword-swiper .swiper-wrapper{height: auto; margin-top: 4px;}
.swiper-slide .psImg-wrapper {height: 328px !important; display:inline;} 
.kwd-item {width: 23% !important;}


/*처음으로 버튼*/
.bottom-btn {display: inline-block;}


/*Auto-Complate*/
.autocomplete-suggestions {bottom: 52px; width: 100%; text-align: left; cursor: default; border-bottom: 0; background: #fff; position: absolute; z-index: 1000; max-height: 200px; overflow: hidden; overflow-y: auto; box-sizing: border-box; }

.autocomplete-suggestion {position: relative; padding: 11px 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; color: #212529; border-bottom: 1px solid #E1E3E6;}
.autocomplete-suggestion:last-child { border-bottom: 0;}
.autocomplete-suggestion:hover{background-color: #EEF5FF;}

/*bottom Popup*/
.bottom-popup.list{height: 425px;}
.bottom-popup {position: absolute; width: 100%; z-index: 99999; max-height: 275px; bottom: 0; background: #fff; border-top-left-radius: 20px; border-top-right-radius: 20px; box-shadow: 0 1px 11px rgba(33,37,41, 0.04);  animation: fadein 0.5s ease-in-out;}

.bottom-popup-title {color: #212529; font-weight: bold; padding: 24px 20px; text-align: center;}
.bottom-popup-title h4{text-indent: 20px;}
.bottom-popup-title .bottom-popup-close{float: right; display: inline-block; }
.bottom-popup-title .bottom-popup-close .layerCloseBtn { display: block; color:transparent; background: url("../img/icon-close.png"); background-size: 25px 25px;  width:27px; height:27px; }

.bottom-popup-body{position: relative; padding: 0 20px; text-align: center; color: #515961; font-weight: 400; font-size: 14px; min-height: 80px; padding-bottom: 12px;}
.bottom-popup p {white-space: pre-line;}
.bottom-popup-footer {padding: 0 20px 14px 20px;}

.bottom-popup.service-popup{max-height: 700px;}
.bottom-popup.service-popup .bottom-popup-body {margin-bottom: 20px;}

/*Guide Popup*/
.guide-popup{/*display:none; 웹접근성2021.10.28-자주묻는질문 위치이동*/ position: fixed; width: 80%; height: 70%; z-index: 99999;  left:15px; bottom: 80px; background-color: #fff; border-radius: 20px; box-shadow: 0 1px 11px rgba(33,37,41, 0.04);}/*웹접근성2021.10.28-자주묻는질문 위치이동*/
.guide-popup::after{ content: ""; position: absolute; bottom: -15px; left: 25px; margin-left: -5px; width: 44px !important; height: 24px !important; background: url(../img/speech-bubble-bottom.png);}
.guide-popup-bot{width: 72px !important; height: 72px !important; position: absolute; left:15px; top:5px;}
.guide-popup-title {margin: 20px;}
.guide-popup-title .title { /*background: linear-gradient(to right, #00A5FF,#0565F0); 웹접근성 2022.10.27-명도대비관련수정 및 추가*/ background-color:#0565F0; border-radius: 48px; color:#fff; text-align: center; padding: 10px 0; margin-left:30px; margin-bottom: 12px;}
.guide-popup-title .guide-title-list {width: 100%; text-align: center;}
.guide-popup-title .guide-title-list img {width: 45px !important; height: 45px !important; margin-bottom: 5px;}
.guide-popup-body {margin-left: 20px; overflow-x: hidden; overflow-y: auto; }
.guide-popup-body > .cb-tabs-content {padding-top: 0;}
.guide-popup-body .guide-list > ul { padding-left: 20px;}
.guide-popup-body .guide-list > ul > li { list-style: outside !important; list-style-position: outside; display: revert !important; padding: 5px 0;}
.guide-popup-footer {display: flex; position: absolute; left:10px; bottom: 10px; width: 90%;}
.guide-popup-footer .close {width: 50%;}
.guide-popup-footer .close img {width: 48px; height: 48px; }
.guide-popup-footer .first {width: 50%; text-align: right; vertical-align: middle; margin: 5% 0;}
.guide-popup-footer .first button {display:inline;}

.date-popup.list{height: 425px;}
.date-popup {position: absolute; width: 100%; z-index: 99999; bottom: 0;  border-top-left-radius: 20px; border-top-right-radius: 20px;  background: #fff;  animation: fadein 0.5s ease-in-out;}
.date-popup-title {color: #212529; font-weight: bold; padding: 12px 20px; text-align: center;}
.date-popup-title h4{text-indent: -15px;}
.date-popup-title .date-popup-close{float: left; display: inline-block; }
.date-popup-title .date-popup-close img {width: 20px; height: 20px; margin-top:3px}
.date-popup-body{position: relative; text-align: center; color: #515961; font-weight: 400; font-size: 14px; border-top: 1px solid #e1e3e6;}
.date-popup p {white-space: pre-line;}
.date-popup-msg {font-weight: bold; color: red; margin-top: 20px;}
.date-popup-footer {padding: 0 20px 14px 20px;}


.authNum-box {width: 20%; display: inline-block; background-color: #F5F7F8; border: 1px solid #E1E3E6; text-align: center; padding: 10px 5px; border-radius: 4px;}
.letter {letter-spacing: -1px;}

/*Alert Popup*/
#popup-wrap {background: #fff; width: 90%; padding: 0 !important; height: auto !important; overflow: hidden;}
#popup-header {border-bottom: 1px solid #E1E3E6 !important; padding: 15px !important;}
#popup-header h4{text-indent: 15px;}
#popup-msg {padding: 24px 0; height: 130px; overflow-x: hidden; overflow-y: auto; margin: 0; text-align: center; width: 100%; line-height: normal;}
#popup-msg h5 {font-weight: 400 !important; white-space: pre-line;}
#popup-msg p {margin-top: 8px;}

#popup-msg.sms{padding:12px; text-align: left; height: 180px;}
#popup-msg.sms h5{font-weight: bold !important; margin-bottom: 8px;}
#popup-header > #popup-close {float: right; display: inline-block; }
#popup-header > #popup-close img {width: 20px; height: 20px; margin-top:3px}
#popup-close-btn > button {width: 100%; height: 52px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;}
#popup-close-btn > button.btn-two {width: 49.5%; display: inline-block; height: 52px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;}

.sms-body > p {display:inline-block !important; width: 32% !important; margin-bottom: 8px;}
.sms-body span.sircle {border-radius: 50%; background: #0565f0; font-size: 12px; padding: 1px 6px; color: #fff;}
 
/*Loading Bar Animation*/
.spinner {position: absolute; left: 47%; top: 50%; z-index: 999;}
.spinner-border {width: 45px; height: 45px; border-radius: 50%; border: 4px solid transparent; border-top-color: #FFFFFF; animation: spinner 1s linear infinite;}

.chatting-typing{will-change: transform; width: auto; border-radius: 50px; margin: 0 auto; position: relative; -webkit-animation: 2s bulge infinite ease-out; animation: 2s bulge infinite ease-out;}
.chatting-typing span {display: inline-block !important; height: 10px !important; width: 10px !important; float: left; margin: 0 1px; background-color: #159CD8; border-radius: 50%; opacity: 0.4;}
.chatting-typing span:nth-child(1){animation: 1s blink infinite 0.3333s;}
.chatting-typing span:nth-child(2){animation: 1s blink infinite 0.6666s;}
.chatting-typing span:nth-child(3){animation: 1s blink infinite 0.9999s;}

@keyframes blink {
    50% {
      opacity: 1;
    }
}

@keyframes bulge {
    50% {
      transform: scale(1.05);
    }
  }

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes fadein {
    from{
        transform: translateY(230px);
    }
    to{
        transform: none;
    }
}

@keyframes leftFadeIn {
    from{
        transform: rotate(45deg);
    }
    to{
        transform: none;
    }
}

@keyframes blink-effect {
    50% {
      opacity: 0;
    }
  }


/*dataPicker CSS 변경*/
.ui-datepicker {width: 100% !important; height: auto;}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button{font-family: 'Spoqa Han Sans Neo', 'sans-serif' !important; font-weight: 400 !important;}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {width: 25% !important; margin: 0 10px !important;}
select.ui-datepicker-year option{color:#212529 !important;}
select.ui-datepicker-month  option{color:#212529 !important;}
.ui-widget-header{background-color: #fff !important; padding: 20px 0 10px 0 !important; border: none !important; color: #fff !important; border-radius: 0 !important;}
.ui-widget-header a {color: #212529 !important}
.ui-datepicker-title {color: #212529 !important; font-weight: bold !important;}
.ui-widget-content {border: none !important; color: #212529 !important; background: 0 0 10px rgba(0,0,0, 0.16) !important;}
.ui-datepicker-calendar thead tr th span {color: #515961 !important;}
.ui-datepicker td span, .ui-datepicker td a {text-align: center !important; width: 35px; height: 35px; padding: 8px 0 !important;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{top: 19px !important;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {border:none !important; background: #fff !important; color: #212529 !important;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {background: #1E88E5 !important; color: #fff !important; border-radius: 100% !important;}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus{background: hsl(208, 88%, 62%) !important; border-radius: 100%; color: #fff !important; border: none !important; width: 35px; height: 35px;}
.ui-icon{ width: 20px !important; height: 20px !important;}
.ui-icon-circle-triangle-w {background-position: -96px 0 !important;}
.ui-icon-circle-triangle-e {background-position: -32px 0 !important;}

.ui-datepicker table thead {border-bottom: 1px solid #e1e2e6;}
.ui-datepicker th{padding: 15px .3em !important;}
.ui-datepicker td {padding: 4px 8px !important;}

/*Month Picker CSS 변경*/
.month-picker-month-table td{padding: 10px 0 !important;}
.month-picker-title {vertical-align: middle !important;}

.month-picker-previous {float: right !important;}
.month-picker-previous .ui-icon-circle-triangle-e {background-position: -96px 0 !important;}

.month-picker-next  {float: left !important;}
.month-picker-next .ui-icon-circle-triangle-w {background-position: -32px 0 !important;}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {color:#212529 !important; padding: 10px ; border: none !important; border-radius: 100%; background: transparent !important;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {background: #1E88E5 !important;color: #fff !important; border-radius: 100% !important; border:none !important; padding: 10px;}

/*timepicker css 변경*/
.timepicker_wrap {position:unset !important; width: 100% !important; border: none !important; background: #fff !important; box-shadow: none !important; }
.time, .mins, .meridian {width: 29% !important; margin: 0 5px !important;}

.prev{border:none !important; background: url(../img/icon-arrow-top.png) no-repeat 50% 50% !important; background-size: 20px !important; }
.next {border:none !important; background: url(../img/icon-arrow-bottom.png) no-repeat 50% 50% !important; background-size: 20px !important; }

input.timepicki-input {border:none !important; font-size: 18px !important;}

/* datapicker 추가 내용 */
.calendar-btn { position:relative; top:-20px; right:-90%;}
.calendar-departh { position:relative; top:-10px;} 

/*jbbank.css 에 추가할 내용*/
.input-container.msg{height: 34px; padding: 0; background: #F5F7FA !important;}
.input-container.msg:focus-within{border: 1px solid #E1E3E6 !important;}
.cb-layout-btn-chat { width: 19% !important; margin-top: 5px; float: right; display: inline-block; text-align: right; margin-right: 5px;}
.chat-btn {background: transparent; display: inline-block; text-align: right;}
.chat-btn img{width: 22px !important; height: 22px !important;}


.bottom-popup.emoticon{bottom: 52px; max-height: 300px;}
.bottom-popup.emoticon > .bottom-popup-title {border-bottom:2px solid #E1E3E6;}
.bottom-popup.emoticon > .bottom-popup-body {height: 220px; position:relative; overflow-y: auto;}
.emoticon-table ul li{ width: 24%; margin: 15px 0; display: inline-block; float: left !important;}

/*반응형 Media */
@media screen and (max-width: 359px) {
	.kwd-item {width: 22.5% !important; font-size:11px !important; min-width: 22% !important;}
	.kwd-item > p {font-size:11px !important;}
	.cb-tab-link {font-size:12px !important;}
	
	.panel-arrow-right h5{font-size:14px !important;}
	.panel-arrow-right p{font-size:12px !important;}
	
	.sms-body > p{font-size:10px !important;}
	.box-body .btn-two {margin-right: 0;}
	
	/*자주묻는질문 가이드 */
	.guide-popup{width: 90%;}
	.guide-popup-title .title {font-size: 10px !important;}
}

@media (min-width: 360px) and (max-width: 375px) {
	/*Popup Close Button*/
    .cb-popup-title .w90 {width: 85%;}

    /*Adjust the number of radio buttons*/
    .radio-button label.w25{ width: 49% !important; margin-bottom: 4px; margin-right: 0;}

    /*Adjust the size of radio buttons*/
    input[type=radio] + label {background-size: 16px;}
    input[type="radio"]:checked + label{background-size: 16px;}
    
    /*자주묻는질문 가이드 */
	.guide-popup{width: 85%;}
    .guide-popup-title .title {margin-left: 42px; font-size: 12px !important;}
}

@media (min-width: 376px) and (max-width: 425px) {
	/*자주묻는질문 가이드 */
	.guide-popup-title .title {margin-left: 42px; font-size: 12px !important;}
}


@media screen and (max-width: 425px) {
	#mtk_PSWD {position: fixed; top: auto !important; bottom:0; left: 0 !important; width: 100% !important;}
	.dv_transkey_disp_a {background: none !important;}
}

@media (max-height: 400px) {
    .guide-popup{height: 70%;}
    .guide-popup-body{height: 10%;}
}


@media (min-height: 401px) and (max-height: 480px) {
    .guide-popup{height: 70%;}
    .guide-popup-body{height: 20%;}
}

@media (min-height: 481px) and (max-height: 640px)  {
    .guide-popup{height: 75%;}
    .guide-popup-body{height: 50%; min-height: 35%;}
}

@media (min-height: 641px) and (max-height: 740px)  {
    .guide-popup{height: 75%;}
    .guide-popup-body{height: 50%}
}

@media (min-height: 741px) and (max-height: 840px)  {
    .guide-popup{height: 60%;}
    .guide-popup-body{height: 50%}
}

@media (min-height: 841px) {
    .guide-popup{height: 50%;}
    .guide-popup-body{height: 50%}
}



/*Dark Mode 공통*/
@media (prefers-color-scheme: dark){
    :root{
        --background: #1F1F2A;
		--balloon-color: #2e3744;
		--button-color: #282E3A;
        --font-color: #fff;
        --title-color: #C0C6CC;
        --input-color: #8C959F;
        --input-error: #f9417a;
        --border-color: #e1e3e6;
        --box-color: #323B4A;
    }


    /*공통 - Font Color*/
    .black {color: var(--font-color) !important;}
    /*span {color: var(--font-color)}*/
    span {color: var(--input-color);}
    .cb-chatting-balloon h4 {color: var(--font-color);}
    .cb-chatting-account h5, h6 {color: var(--font-color);}
    .cb-chatting-balloon .cb-chatting-account p {color: var(--title-color);}

    .cb-box h5, h6 {color: var(--font-color) !important;}
    .cb-box-bottom h5, h6 {color: var(--font-color) !important;}
    .cb-error-msg h5 {color: var(--font-color);}

    .cb-tabs .cb-tabs-item h3 { color:var(--font-color);}
    

    .cb-chatting-balloon p {color: var(--font-color);}
    .cb-chatting-balloon > .cb-chatting-auth-phone > h3 {color: var(--font-color)}
    .cb-chatting-balloon > .cb-chatting-auth-phone > .auth-box label {color: var(--font-color) !important;}
    .cb-chatting-balloon > .cb-chatting-auth-phone > .auth-box-body label {color: var(--title-color) !important;}

    .panel-title{color: var(--font-color);}
    .panel-body {color: var(--font-color);}
    .cb-chatting-balloon .cb-chatting-account .panel-body p {color: var(--font-color);}

    /* Common */
    a.cs-received-link:link { color: var(--font-color);}

    /*공통 - scenario Box*/
    .cb-box-bottom {border-bottom: 2px solid rgba( 255, 255, 255, 0.15 );}
    .cb-detailbox {background: transparent;}
    
    .box, .agree-box  { background: transparent; color: var(--input-color); border: 1px solid var(--border-color);}
    
    .cb-popup-body div ul li div{ color: #212529 !important;}
    div ul li div{ color: var(--font-color);}
    div ul li div:first-child {color: var(--input-color);}

    .cd-chatting-pd-none ul li div p {color: var(--font-color) !important;}

    .account-table tbody tr td:last-child {color: var(--font-color);}

    /*공통 - account Box*/
    /*.cb-tab-link.active {color: var(--font-color);}*/
    .box-body {background: rgba( 99, 118, 145, 0.35 );}
    
    /*공통 - scenario Notice Box*/
    .cb-chatting-account .cb-panel-group {border : 1px solid #515a77 !important;}
    .cb-panel > .cb-panel-heading {background: #2C2D30; border-radius: 6px;}
    .cb-chatting-account .panel-body {background: #1E1F21; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;}
    .cb-chatting-balloon .cb-panel .cb-panel-heading {background: transparent !important; padding: 0; padding-bottom:8px;}
    .cb-panel > .list {background: transparent !important; padding: 0; padding-bottom:8px;}
    
    /*공통 - Input Box*/
    .input-border {border: 1px solid #515a77 !important;}
    .input-container { background: transparent; border: 1px solid #515a77;}
    .input-group-center {background: transparent; color: var(--title-color);}
    
    .msg > input[type="text"] {color: #212529 !important;}
	.cb-popup-body input[type="number"] {color: #212529 !important;}
    /*disabled*/
    .input-container.disableed{background: #282e3a; border: 1px solid #2f3445;}
    .input-container.disableed label > span { color: #878b93 !important;}
    .input-group.disableed span {background: #282e3a;}
    .input-group.disableed span.input-group-center {background: #282e3a;}
    input[type="text"]:disabled, input[type="number"]:disabled, input[type="password"]:disabled, select:disabled{background: transparent !important; color: #656b75 !important;}

    /*error*/
    .input-container.error { border: 1px solid var(--input-error) !important;}
    .input-container.error label > span {color: var(--input-error) !important;}
    .error { color: var(--input-error) !important; }

    .cb-chatting-account > .input-container label > span {color: var(--title-color);}
    input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="phone"], input[type="number"], input[type="date"], input[type="tel"], textarea::placeholder {color: var(--input-color);}
    input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="phone"], input[type="number"], input[type="date"], input[type="tel"], textarea {color: var(--font-color); background: transparent !important;}
    
    select {color: var(--input-color);}
    textarea {border: 1px solid #515a77 !important; }
    
    .cb-popup-body input[type="password"] {color : #212529 !important}
    .cb-popup-body ul > li > div:last-child {color : #212529 !important} 

    /*radio button*/
    .radio-button label {border: none; background: #586576 !important; color:var(--title-color) !important; }
    .radio-button input[type="radio"]:checked + label {border: none !important; background: #307FF0 !important; color: var(--font-color) !important;}

    #arsReq .radio-button label {border: 1px solid var(--border-color); background: #fff !important; color:#707070 !important; }
    #arsReq .radio-button input[type="radio"]:checked + label {border: 1px solid var(--border-color) !important; background: #eef5ff !important; color: #307FF0 !important;}

    .checkbox-button > input[type="checkbox"].sircle + label {color: var(--font-color) !important;}
    .checkbox-button > input[type="checkbox"].sircle:checked + label {color: var(--font-color) !important;}

    input[type="text"].search { background: url(../img/icon-search-dark.png) no-repeat right; background-size: 20px; background-position: right 12px bottom 8px;}
 
    /*Button*/
    .btn-inline-gray {border:none !important; background: #586576 !important; color: var(--font-color) !important;}
    .btn-small {background: transparent !important; border: 1px solid #A9B0B8 !important; color: var(--font-color) !important;}

    /*공통 자주묻는질문 - 팝업*/
    .guide-popup {background: var(--button-color); box-shadow: 0 3px 6px rgb(0 0 0 / 16%);}  
    .guide-popup-title {color:var(--font-color);}
    .guide-popup-body {color:var(--font-color);}
    .guide-popup-footer .btn-auto {background: transparent;}
    .guide-popup::after {background: url(../img/speech-bubble-bottom-dark.png);}
    
    .bottom-popup-body h5.black {color:#212529 !important}
    .bottom-popup-body .panel-body > ul > li {color:#212529 !important}
    
    
    .cb-popup-body .sms .checkbox-button > input[type="checkbox"].sircle:checked + label {color: #212529 !important}
    .cb-popup-body .sms .checkbox-button > input[type="checkbox"].sircle + label {color: #212529 !important}
   
}

/*카드 나의실적확인하기*/
ul.my-card-score > li > div:first-child{flex:1.5;}
ul.my-card-score > li > div:last-child{flex:1;}
div .my-card-score .title-dt {padding-left:10px;}
div .my-card-score .font-red {color:red;}
div .my-card-score .font-blue {color:#5697F0;}

/*채팅상담 연결버튼*/
.teletalk-btn {width:100px;font-size:12px;background-color: rgba(255,255,255, 0.6);}

/*공통요소*/
.blind { width:1px; height:1px; margin:-1px; overflow:hidden; clip:rec(0,0,0,0,); clip-path:insert(50%);}/*웹접근성추가 2022.10.28-추가*/

/*본인인증 시간연장버튼*/
.phone .radio-button .auth-number2{ position: relative;width: 60px !important;  height: 20px !important; margin: 10px -15px!important; display: inline-block !important; color: #E5493A !important;font-size: 12px !important;}
.phone .extend-time { position: relative;width: 60px !important; margin: 0 !important; display: inline-block;}

/*배너*/
.mBanner {padding-top:5px;margin:0 6px 0 12px;}
.mBanner .banner-div {border-radius:6px;}

.auth-box {display:block;}
.auth-box .sircle{opacity:1 !important; display:inline-block;}
.auth-box-body{display:block;}

.auth-box input[type="checkbox"], .auth-box-body input[type="checkbox"]{-webkit-appearance:none;appearance:none;}
.auth-box input, .auth-box-body input{width:26px;height:26px;display:inline-block;vertical-align:top;position:relative;border-radius:50%;box-sizing:border-box;opacity:1 !important;margin-right:6px;margin-left:15px;border: 1px solid #8c959f;font-size:26px !important;pointer-events:auto; }
.auth-box input:checked, .auth-box-body input:checked{border-color:#0565f0;background:#0565f0;}
.auth-box input::before, .auth-box-body input::before{top:4px;left:9px;width:7px;height:14px;content:'';position:absolute;border:1px solid #8c959f;border-width:0 2px 2px 0;transform:rotate(400deg);box-sizing:border-box;}
.auth-box input:checked:before, .auth-box-body input:checked:before{border-color:#fff;}
.auth-box span, .auth-box-body span {display:inline-block !important;width:auto !important;vertical-align:middle;}
.auth-box-body {margin-top:8px;}

/* 원리금조회 업무 - 상세금액 숨김기능 버튼 */
.vbox_gray{width:100%;box-sizing:border-box;background:#f5f7fa;border-radius: 8px;}
.cb-detailbox-body ul.none_bor {padding: 5px 10px; border-top:none; }
.btn_down{position:relative;}
.btn_down:after{content:""; width:16px; height:16px; position:absolute; top:6px; left:60px; background:url(../img/arrow_bottom.png) no-repeat 0 0 /16px 16px}
.btn_down.open:after{transform:rotate(180deg);}

/* 카드상세정보 창 스크롤 기능 */
.txt_caution{position:relative;padding-left:24px !important;margin-top:8px !important;}
.txt_caution:after{content:'';position:absolute;top:0;left:0;width:16px; height:16px; background:url(../img/icon_caution.png) no-repeat 0 0 /16px 16px; }

.wid100{width:100% !important;}