@charset "utf-8";

/* ------------------------- common ------------------------- */
.content {
    position: relative;
}

/* card style */
.card-style {
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--color-card-border);
    box-shadow: 0px 1px 8px 0px var(--color-card-shadow);
    background: rgba(255,255,255,0.7);
    margin-bottom:0px;
}

.card-style2 {
    overflow: hidden;
    border-radius: 15px;
    border: 1px solid #e9e9e9;
    box-shadow: 0px 2px 12px 2px rgba(0, 0, 0, 0.07);
}

/* header */
.header .header-icon{width: 40px !important; height: 40px; line-height: 40px !important; top: 50%; transform: translateY(-50%);}

.theme-light .bg-theme { background-color: rgba(255,255,255,0.7) !important;}
.splide__slide img {vertical-align: bottom; OPACITY: 0;}

.header-clear-custom {
    padding-top: 60px;
    padding-top: calc(60px + constant(safe-area-inset-top) * 0.8) !important;
    padding-top: calc(60px + env(safe-area-inset-top) * 0.8) !important;
}

/* cover style */
.cover-con{width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

/*Toasts*/
.toast-tiny {
    min-width: 150px !important;
}

/* modal style */
.menu .content {
    margin-bottom: 20px !important;
}

.menu-title h1 {
    width: calc(100% - 20px);
}

.theme-dark .input-style.input-style-active label{
    text-shadow: -1px 0px #000, 0px 1px #000, 1px 0px #000, 0px -1px #000;
}
.search-icn{
    position: absolute;
    top: 50%;
    width: 10px;
    padding-right: 15px !important;
    text-align: center;
    margin-top: -7px;
    right: 0;
}
/* ------------------------- common end ------------------------- */


/* ------------------------- 로그인/회원가입 ------------------------- */
/* 간편비밀번호 */
.key_input_wrap .key_input::after{content:'';display:table;clear:both;}
.key_input_wrap .key_input button{float:left;width:33.33%;height:5rem;font-size:1.4rem;font-weight:600;line-height:5rem;}
.key_input_wrap .key_input button:nth-child(10){margin-left:33.33%;}
.key_input_wrap .key_input button.clear .blind{display: none;}
/* ------------------------- 로그인/회원가입 end ------------------------- */

/* ------------------------- 홈 ------------------------- */
.home-card-area{
    height: 96px;
    overflow: visible;
    background-image: url("../../images/home-card-img01.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom right !important;
    position: relative;
}

.home-card-area:before{
    content: '';
    display: block;
    width: calc(338px / 4);
    height: calc(437px / 4);
    background-image: url("../../images/home-card-img02.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    position: absolute;
    top: 6px;
    right: 40px;
}

/* 확인서 card */
.cnfrm-card-area .card-body{
    gap: 22px;
    background-color: #eff1fb;
   /* background-image: url("../../images/cnfrm-card-img.png");
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 50%;*/
}
.card-bg1:before{
             content: '';
             display: block;
             background-image: url(../../images/cnfrm-card-img.png);
             background-repeat: no-repeat;
             background-size: 100%;
             background-position: center center;
             position: absolute;
             bottom: -16px;
             left: 0px;
             width: calc(342px / 2);
             height: calc(248px / 2);
         }
.cnfrm-card-area button i{
    color: #97a0cb;
}

.cnfrm-card-area .right-wrap{
    width: 100%;
}

.cnfrm-card-area .right-wrap>div{
    padding: 7px 0;
}

.cnfrm-card-area .title{
    display: inline-block;
    width: 84px;
    color: #898989;
    text-align: end;
}

.db-banner-area{
    height: 80px;
    background-color: var(--dark-color);
    position: relative;
    border-color: var(--dark-color);
}

.db-banner-area .obj{
    width: 156px;
    height: 80px;
    background-image: url(../../images/db-banner-img01.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100%;

    position: absolute;
    top: 0;
    left: 0;
}

.bi-banner-area .card-body{
    height: 80px;
    background-color: var(--color);
    background-image: url(../../images/bi_banner_img01.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top 90% right -26px;
}
/* ------------------------- 홈 end ------------------------- */


/* ------------------------- 알림센터 ------------------------- */
.alarm-noti{position: absolute;bottom: calc(80px + env(safe-area-inset-bottom) * 1.1);left: 0;border-top: 1px solid;width: 100%; height: 30px;}
.alarm-noti p {line-height: 30px;}
.footer-bar-2 {bottom: -10px !important;  border-radius: 0 !important; background: rgba(0,0,0,0.2) !important;border-top:0px !important;}
.footer-bar-2  p {color: #fff; width: 100%; text-align: center;}
/* ------------------------- 알림센터 end ------------------------- */


/* ------------------------- 고객 관리 ------------------------- */
.search-trending-results .title{font-weight: 600;}
.search-trending-results .results{border-bottom: 1px solid; display: inline-block;font-weight: 600;}

.special-con, .expiry-con{
    background: orange;
    border-radius: 10px;
    padding: 20px;
}
.customer-list{
    width: calc(100% - 32px);
    left: 50%;
    transform: translateX(-50%);
}
/* ------------------------- 고객 관리 end ------------------------- */


/* ------------------------- 교육동영상 ------------------------- */
.tag-wrap {margin: 1rem 0;}
.tag-wrap li{display: inline-block; margin-right: 1rem;}
.edu-board strong, .edu-board span {position: static !important; margin-top: 0 !important;}
.edu-board .category{margin-bottom: 4px;}
.edu-board .title{margin-bottom: 4px;}
.edu-board .list-group {line-height: 1rem;}
.edu-board .list-group-con-wrap {height: 100%;display: inline-flex;flex-direction: column;align-self: center;justify-content: space-between;}
.edu-board .list-custom-large a {line-height: 1rem; padding: 1rem 0;}
.edu-board i {height: 48px;line-height: 48px; display: flex; align-items: center;}

.edu-time {display: inline-block;
    width: 30px;
    height: 20px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    bottom: 4px;
    right: 20px;
    text-align: center;
    border-radius: 2px;
    padding-top: 1.5px;
}

/* ------------------------- 교육동영상 end ------------------------- */


/* 메인 이벤트 배경 */
.bg-10 {background-image: url(../../images/pictures/20.jpg);}
.bg-11 {background-image: url(../../images/pictures/29.jpg);}
.bg-28 {background-image: url(../../images/pictures/28.jpg);}
.bg-30 {background-image: url(../../images/pictures/main_img011.png);}

/* -------------------------  일정 -------------------------  */
.calendar{max-width: 100%;border: 1px solid #fff;}

.inner-page-content{
    padding: 16px;
}

.calendar-close-btn{position: absolute; top: 16px; right: 13px; color: var(--main-color); }

.timeline-item-content, .timeline-item-content-full {
    border: solid 1px rgba(0, 0, 0, 0.1);
    background-color: #FFF;
    margin: 0px 0px 30px 33px;
    padding: 15px 0;
}

.timeline-item .timeline-icon {
    position: absolute;
    width: 10px;
    height: 10px;
    left: 10px;
    line-height: 45px;
    border-radius: 45px;
    top: 3px;
    font-size: 18px;
    text-align: center;
}
.timeline-deco {
    background-color: rgba(0, 0, 0, 0.08);
    position: absolute;
    top: 0px;
    z-index: 0;
    bottom: 0px;
    left: 14px;
    width: 1px;
}

.cal-schedule-card{background: #fff;}

.cal-schedule {
    min-height: unset;
    border-bottom: 0px;
}

.cal-schedule em {
    line-height: 17px;
    padding: 2px 0px 0px 0px;
    position: absolute;
    font-size: 12px;
    font-style: normal;
    color: var(--main-color);
}

.cal-schedule p {
    /* color: #000; */
    display: block;
    padding: 0px 0px 0px 62px;
    font-size: 15px;
    font-weight: normal;
    width: calc(100% - 42px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-schedule span {
    display: block;
    font-size: 14px;
    color: #000;
    margin-top: 9px;
    line-height: 1.2;
}

.cal-schedule span i {
    width: 50px;
    display: inline-block;
    text-align: center;
    padding: 0px 20px 0px 42px;
    color: #fff;
    opacity: 0;
}

.cal-dates-border a:nth-child(7n) {border-right: none !important;}
.cal-dates-border a:nth-child(n + 36):nth-child(-n + 42) {border-bottom: none !important;}
/* ------------------------- 일정 end -------------------------  */


/* ------------------------- 가망 고객 등록 ------------------------- */
.address-search-btn i {
    height: 40px;
    margin-right: 0 !important;
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    width: 10px !important;
    padding-right: 30px !important;
    text-align: center !important;
    font-size: 13px !important;
}
/* ------------------------- 가망 고객 등록end ------------------------- */


/* ------------------------- 나의 보유계약 확인 ------------------------- */
.contract-con {border: 1px solid; margin-bottom: 0.8rem;}
.contract-con .insu-date{display: flex; justify-content: space-between;}
.contract-con .insu-em{display: flex; justify-content: space-between; border: 1px solid #0000006e; border-radius: 8px; }
.contract-con .insu-em>div{width: 49%; display: flex; justify-content: space-between;
    position: relative;padding: 0.8rem 0.8rem;}
.contract-con .insu-em>div:first-child:after{
    display: block;
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #0000006e;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.contract-con .insu-contract>span{width: 49%; display: inline-block;}
.insu-badge{ border-radius: 50px; padding: 2px 10px 1px 10px;}

/* ------------------------- 나의 보유계약 확인end ------------------------- */

/* ------------------------- 회사실적관리 ------------------------- */
.circle-spinner{position: relative;width: 100px;height: 100px;border-radius: 50%;background: #0000;border: 5px solid #7877ff;}
.circle-spinner>span{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}

.progress-con{display: flex; justify-content: space-between; align-items: center;}
.progress-con .row-area{width: 70px; text-align: center; font-weight: bold;}
.progress-con .col-area{flex: 1;}
.progress-con .col-con{display: flex; justify-content: space-between; align-items: center; height: 30px;}
.progress-con .title{min-width: 65px; line-height: 1.3;}
.progress-con .progress{flex: 1;}
.progress-con .percent{width: 64px; text-align: right;}

/* ------------------------- 회사실적관리 end ------------------------- */


/* 추가된 스타일 */
.sty01 {display: inline-block; padding: 3px 2px 0px 2px ; vertical-align: bottom;}
.sty02 {position: fixed; width: calc(100% - 32px); bottom: 15px}
.sty03 {text-align: center; width: 100%; display: inline-block; margin-bottom: 10px;}
.sty04 {border-radius: 5px; padding:8px 10px 5px 10px}
.sty05 {color: #fff; font-style: normal; font-weight: bold; font-size: 12px !important;width: 45px;line-height: 14px !important; height: 45px; display: inline-flex; align-items: center; justify-content: center;}
.sty06 {display: block;
    width: 50px;
    text-align: center;
    margin: 0px auto;
    padding-top: 2px;
    box-sizing: border-box;
    color: #7877ff;
    font-weight: bold;
    width: 100%;
    padding-left: 7px;font-size: 14px;}
.sty07 {border-top: 1px solid rgba(255,255,255,0.4);
    padding-top: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    padding-bottom: 7px;
    background: rgba(255,255,255,0.2);}
.sty08 {width: 30px; height: 30px;line-height: 30px !important; text-align: center;margin-right: 8px;}
.sty09 {width: 73px;font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;}
.sty10 {height: 20px;overflow: hidden;width: 95%;}
.sty11 {vertical-align: middle;margin-top: -4px; margin-right: 5px;}
.sty12 {width: 30px;height: 30px;display: inline-flex;align-items: center;justify-content: center;margin-top: -7px;}
.br1 {border-right: 1px dashed #fff;}
.br0 {border-radius: 0px !important;}
.bor1{border: 1px solid #ddd !important;height: 48px;}
.bb0 {border-bottom:0px solid !important;}

.h-back {
    top: 50%; transform: translateY(-50%); margin-left: 16px; margin-top: env(safe-area-inset-top);
    background-color: var(--color-2);
}

.divide-1 {width: calc(100% - 18px); margin: auto;}
.divide-2 {width: auto; margin: auto;}


/* search - search-results 내의 스타일 */
.list-group .contract-list a span:not(.badge) {font-size: 14px;position: static !important;margin-top: 0 !important;}
.list-group .contract-list a strong {font-size: inherit;position: static !important;font-size: inherit !important;margin-top: 0;color: inherit;}
.list-group .contract-list i {line-height: 1.2 !important;}

.list-group .contract-list{padding: 10px 0; border-bottom: solid 1px rgba(0, 0, 0, 0.05);}

/* 고객리스트  */
.cus-1 {width: 10px;height: 10px;display: inline-block;margin-right: 5px;}
.list-in {height: 70px;justify-content: space-between;
    border-bottom: solid 1px rgba(0, 0, 0, 0.05);
    display: inline-flex;
    align-items: center;}
.list-in div { display: inline-block;width: 100%;}
.list-in div i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    float: left;
    margin-right: 15px;
    margin-top: 4px;
}
.list-in div p { font-size: 16px;width: auto; display: inline-block;}
.list-in div p span{margin-left: 10px; font-size: 16px !important;}
.list-s1 {display:block;
    font-size: 13px;
    color: #000;
    font-weight: bold;
    opacity: 0.5;}

.customer-search-list{height: 70px;justify-content: space-between;
    border-bottom: solid 1px rgba(0, 0, 0, 0.05);
    display: inline-flex;
    align-items: center;}
.customer-search-list p {border-bottom: none !important;}
.customer-search-list a{float: right;}
.customer-search-list a i{margin-right: unset !important; margin-top: unset !important;}

.list-custom-large div div a {
    line-height: 70px;
    font-weight: 500;
    font-size: 13px;
    width: 100%;
    display: inline-block;
    height: 100%;
    border-bottom: 0px !important;
}

/* 내 계약조회 페이지의 맨 하단 콘텐츠 */
.contract-confirm-sty01 .list-group i{line-height: 60px !important;}
.contract-confirm-sty01 .list-group span{margin-top: 0 !important;}

/* 계약 상세 내용 페이지의 맨 하단 콘텐츠  */
.contract-confirm-sty02 .list-custom-large a{line-height: 60px !important;}
.contract-confirm-sty02 .list-custom-large i{line-height: 60px !important;}
.contract-confirm-sty02 .list-custom-large span{margin-top: 0 !important; display: inline-block;}
.contract-confirm-sty02 .list-custom-large strong{position: unset !important; display: inline-block; margin-top: 14px !important;}

/*  가망고객 등록 Toogle */
.ios-switch {
    margin-right: -32px;
    margin-top:-1px !important;
    position: relative;
    /* padding-left: 10px; */
    margin-left: -5px;
}
.ios-switch label::before {
    content: "";
    display: block !important;
    pointer-events: all;
    margin-top: -5px;
    margin-left: -3px;
    width: 77px !important;
    height: 40px !important;
    border-radius: 50px !important;
    transition: all 250ms ease;
}

.ios-switch label::after {
    content: "";
    display: block !important;
    margin-top: -37px;
    z-index: 6;
    width: 34px !important;
    height: 34px !important;
    transition: all 250ms ease;
    border-radius: 50px !important;
    background-color: #FFF;
    border: solid 0px rgba(152, 152, 152, 0.4);
    transition: all 250ms ease;
}
.ios-switch-icon span {
    font-size: 15px;
    font-weight: 700;
    color: #FFF;
    line-height: 32px;
    pointer-events: none;
    z-index: 5;
    position: absolute;
    margin-top: -1px !important;
    left: 53px;
}
.ios-switch-icon span:last-child {
    z-index: 5;
    position: absolute;
    margin-left: -35px;
}
.input-style.has-borders input::placeholder {opacity: 0.7; font-size: 15px !important; font-weight: normal !important;letter-spacing: -0.5px; min-width: 58px; text-align: left;}


/* 영업관리 */

.sty13 {display: inline-block; margin-right: 10px; background: #7877ff;padding: 10px 8px 8px 8px;border-radius: 50px;color: #fff;font-size: 16px;margin-top: -4px;min-width: 58px; text-align: center;}
.sty14 {width: 55px; height: 55px; border-radius: 50%; text-align: center; color: #fff;padding-top: 13px; font-size: 20px;}

/* Graph */
@property --p{
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.pie {
    --p:20;
    --b:20px;
    --c:darkred;
    --w:150px;

    width:var(--w);
    aspect-ratio:1;
    position:relative;
    display:inline-grid;
    margin:5px;
    place-content:center;
    font-size:25px;
    font-weight:bold;
    font-family: "pretendard", sans-serif !important;
    color: var(--main-color);
    box-shadow: 0 0 0 7px #fff inset;
    border-radius: 50%;
}
.pie:before,
.pie:after {
    content:"";
    position:absolute;
    border-radius:50%;
}
.pie:before {
    inset:0;
    background: radial-gradient(farthest-side,#a564eb 100%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(#a564eb calc(var(--p)*1%),#0000 0);
    -webkit-mask:radial-gradient(farthest-side,#0000 calc(99.9% - var(--b)),#dc3545 calc(99.9% - var(--b)));
    mask:radial-gradient(farthest-side,#0000 calc(99.9% - var(--b)),#ffc107 calc(99.9% - var(--b)));
}
.pie:after {
    inset:calc(50% - var(--b)/2);
    background: #a564eb;
    transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
    animation:p 1s .5s both;
}
.no-round:before {
    background-size:0 0,auto;
}
.no-round:after {
    content:none;
}
@keyframes p {
    from{--p:0}
}

/* Input Date */
input[type="date"] {
    position: relative;
    padding: 0px 0px 0px 7px;
}

.input-style.has-borders input[type="date"]{
    padding-right: 3px !important;
    padding-left: 7px !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    color: transparent;
    background: none;
    z-index: 1;
}

input[type="date"]:before {
    color: transparent;
    background: none;
    display: block;
    font-family: 'FontAwesome';
    content: '\f073';
    /* This is the calendar icon in FontAwesome */
    width: 15px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 7px;
    color:#ccc;

    font-size: 18px;
    line-height: 25px !important;
}

/* input[type=date] - android */
.device-is-android .input-style input[type=date] {
    padding-top: 0 !important;
}

/* input[type=date] - iOS */
.min-ios15 input[type="date"]:before {
  right: -30px !important;
}

.min-ios15 input[type=date] {
  text-indent: -42px !important;
}

.btn_s {width: 75px; padding: 6px; height: 30px; font-size: 13px; margin: 7px 10px 15px 137px;font-weight: bold}


/* Tab */
.tab-controls a:not(:last-child) {
    border-right: solid 1px rgba(0, 0, 0, 0.07) !important;
}

/* TABLE GRID */

.table_sty01 {width: 100%; border-top: 1px solid rgba(0, 0, 0, 0.1);font-size: 15px;}
.table_sty01 tr {border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.table_sty01 th {font-size: 12px; color: #999; font-weight: normal; white-space: nowrap;}
.table_sty01 td {font-size: 15px !important; color: #000; font-weight: bold; padding: 10px 8px 10px 0; text-align: right; min-height: 40px; height: 40px;}

.progress { --bs-progress-bg: #fff;}

.sty15 {display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        overflow: hidden;
        width: 100%;
        font-weight: bold;
        font-size: 15px;}
.sty16 {margin-top: -5px;display: inherit;}
.sty17 span i:before {display:none !important}
.sty17 span i {font-family: "pretendard", sans-serif !important; font-weight:bold !important; font-size:13px !important;}

/* 더보기 페이지의 grid 배치 */
.app-grid-con{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, auto));
    grid-template-rows: repeat(3, 1fr);
    gap: 1rem 34px;
}

.app-grid-con>div{
    text-align: center;
}

.app-list {background: #7877ff !important;
     color: #fff;
     opacity: 60%;
     border-radius: 5px;
     margin-top: 0px;
     padding-top: 3px;
     padding-bottom: 2px;}
.bor-1 {border:1px solid rgba(0, 0, 0, 0.15) !important; height:48px;}

/* ========================= DB 분배 ========================= */
.db-dst-list01 .cehckBox-btn02{width: calc(100% - 26px);}
.db-dst-list01 .cehckBox-btn02:has(input[type="checkbox"]:checked):after {right: -26px;top: 0;}
.db-dst-list01 li:first-child {padding-top:0px !important;}
.db-dst-list01 li:last-child {border-bottom:0px !important; padding-bottom:0px !important;}

.cehckBox-btn02:has(input[type="checkbox"]:checked) label{color: unset !important;}
.cehckBox-btn02:has(input[type="checkbox"]:checked) label .fa-user:before,
.radioBox-btn03:has(input[type="radio"]:checked) label .fa-user:before{
    content: '\f00c';
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
}

.db-dst-list02{
    height: calc(100vh - 3rem - 220px);
    overflow-y: auto;
}

.db-dst-list02 .radioBox-btn03:has(input[type="radio"]:checked) label{background: var(--main-color-20);padding: 0rem 0.5rem 0rem 0.1rem;}
.db-dst-list02 .radioBox-btn03:has(input[type="radio"]:checked):after{content: '';display: none;}

.db-dst-list02 li:last-child {border-bottom:0px !important;padding-bottom:0px !important;}

/* ========================= DB 조회 ========================= */
.db-inq-filter .radioBox-btn02 + .radioBox-btn02,
.db-detail-modal .radioBox-btn02 + .radioBox-btn02{margin-bottom: 8px;}

.db-inq-filter .radioBox-btn02 input[type="radio"] + label{
}

.db-inq-filter .radioBox-btn02:has(input[type="radio"]:checked) label,
.db-detail-modal .radioBox-btn02:has(input[type="radio"]:checked) label{

}
.wid32{width: 3.3rem; padding: 0 !important; height: 1.2rem; padding-top: 0.25rem !important;}
.ffs {font-family: serif !important;
      padding: 0 0.2rem;
      color: #bbb;
      font-weight: bold;
      font-size: 11px;
      display: inline-block;}

/* ------------------------- 모바일 확인서 ------------------------- */
/* 3종확인서 */
.type3-crtfc-btns { background: url('/images/type3_crtfc_img02.png') no-repeat center;border-radius: 20px; box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.1);background-size: cover;}
.type3-crtfc-btns button{
    width: calc(50% - 7px);
    height: 142px;
    border-radius: 23px;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    font-family: 'pretendard';
    letter-spacing: -1px;
}

.type3-crtfc-btns .generate{
    border-right: 1px dashed rgba(255,255,255,0.4);
    box-shadow: 3px 0px 0px 0px rgba(0, 0, 0, 1);}

.type3-crtfc-btns .upload{}

.type3-crtfc-btns .icon{
    display: block;
    width: 54px;
    height: 63px;
    line-height: 68px;
    margin: -19px auto 2px auto;
    font-size: 22px;
    color: var(--main-color);
}
.type3-crtfc-btns .icon i {font-size: 33px;}
.type3-crtfc-checks .interest-check label{background: #fff;}

.type3-crtfc-checks .interest-check {margin-bottom: 24px;}

.type3-crtfc-checks .interest-check i {
    height: 40px;
    line-height: 40px;
}
.type3-crtfc-checks .interest-check i::before {border-radius:50%;}
.type3-crtfc-checks .interest-check .fa-circle {color: #bdbdbd;}

.type3-crtfc-checks .interest-check input:checked ~ label{background-color: var(--color) !important;}

.type3-crtfc-list .user-area .icon{
    display: inline-block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    border-radius: 50%;
    color: var(--color);
    font-size: 16px;
    background-color: var(--color-2);
}

.type3-crtfc-list .user-area .icon>i{vertical-align: middle;}

.type3-crtfc-list .user-area .name{
    display: inline-block;
    font-size: 18px;
    font-family: 'pretendard';
    font-weight: bold;
    margin-left: 4px;
    margin-bottom: 3px;
    padding-top: 3px;
}

.type3-crtfc-list .user-area .date{
    font-size: 12px;
    color: #888;
    float: right;
    padding-top: 10px;
}

.type3-crtfc-list .insu-area .logo>img{width: 77px;}

.type3-crtfc-list .insu-area .name{
    font-size: 15px;
    padding-left: 12px;
    color: #888;
}

.type3-crtfc-list .insu-area .product{
    display: block;
    width: 100%;
    font-size: 15px;
    color: #333;
    margin-top: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
}

.type3-crtfc-list .badge-area {margin-top: 8px;}

.type3-crtfc-list .badge-area .badge{
    display: inline-block;
    font-size: 12px;
    padding: 4px 6px 3px 6px;
    background: var(--color-2);
    margin-right: 5px;
    border-radius: 2px;
    color: var(--color);
}

/* 확인서 상세 정보 */
.dim {
    opacity: .4;
    border: 1px solid #888 !important;
}

.manage03 {
    background: #fff;
    padding: 20px 10px;
    border: 1px solid #ddd;
}

.manage04 {
    font-size: 15px;
    text-align: center;
    text-decoration: underline;
    padding-bottom: 10px;
}

.table_st02 {
    width: 100%;
    font-size: 13px;
    margin-top: 20px;
}

.table_st02 th {
    background-color: #fff;
    color: var(--main-color);
    white-space: nowrap;
    height: 40px;
    border: 1px solid #e5e5e5;
    text-align: left;
    padding-left: 8px;
}

.table_st02 td {
    background-color: #fff;
    border: solid 1px #e5e5e5;
    text-align: left;
    height: 40px;
    box-sizing: border-box;
    color: #000;
    word-break: break-all;
    padding: 5px 4px 5px 8px;
    line-height: 1.4;
}

.sty33 {
    margin-top: 13px;
    color: var(--main-color);
    font-size: 12px;
    padding: 5px;
}

/* 확인서 상단 */
.c_send {float: left;border-radius: 50%;width: 50px;height: 50px;line-height: 50px;display: inline-block;margin-right: 10px;color: var(--main-color);font-size: 24px;box-sizing: border-box;text-align: center;background: var(--sub-color);border: 1px solid rgba(255, 255, 255, 0.8);box-shadow: 1px 2px 2px 0px #00000020;}
.c_sign {float: left;border-radius: 50%;width: 50px;height: 50px;line-height: 50px;display: inline-block;margin-right: 10px;color: var(--main-color);font-size: 24px;box-sizing: border-box;text-align: center;background: var(--sub-color);border: 1px solid rgba(255, 255, 255, 0.8);box-shadow: 1px 2px 2px 0px #00000020;}
.c_expire {float: left;border-radius: 50%;width: 50px;height: 50px;line-height: 50px;display: inline-block;margin-right: 10px;color: var(--main-color);font-size: 24px;box-sizing: border-box;text-align: center;background: var(--sub-color);border: 1px solid rgba(255, 255, 255, 0.8);box-shadow: 1px 2px 2px 0px #00000020;}
.c_photo {float: left;border-radius: 50%;width: 50px;height: 50px;line-height: 50px;display: inline-block;margin-right: 10px;color: #222;font-size: 24px;box-sizing: border-box;text-align: center;background: var(--sub-color);border: 1px solid rgba(255, 255, 255, 0.8);box-shadow: 1px 2px 2px 0px #00000020;}
.c_send>i, .c_sign>i, .c_expire>i, .c_photo>i{vertical-align: middle;}

.con_top {display: inline-block;width: 100%;margin-bottom: 5px;letter-spacing: -0.5px}
.con_top li.ct02 {
    float: left;
    font-size: 19px;
    font-family: 'pretendard';
    font-weight: normal;

    line-height: 1.3;
    color: #000;
    width: calc(100% - 60px);
    padding-top: 3px;
}

.ct02 span {
    color: #999;
    line-height: 1.3;
    font-size: 12px !important;
    display: block;
    font-family: 'Nanum Barun Gothic' !important;
    padding-top: 3px;
}

.col_p {color: var(--main-color) !important;}

/*Step*/
.termswrap {width: 100%;display: inline-block;height: 83px}
.terms1 {padding-top: 2px;display: table;margin: auto;}
.terms1_dis {width:28px;height: 28px;background: var(--sub-color);border-radius: 50%;display: inline-block;text-align: center;}
.terms1_sel {width:28px;height: 28px; background:var(--main-color) ;border-radius: 50%; display: inline-block;text-align: center;}
.terms1_sel span {color:#fff;}
.terms1_sel p {color: var(--main-color) !important;}
.terms1_dis span {color:var(--main-color);}
.terms1 span {font-size: 12px;display: block;padding-top: 6px;font-weight: bold;}
.terms1 a {float: left;margin-right: 40px;white-space: nowrap;display: inline-block; position: relative;}
.terms1 a:not(:last-child):after {
    content: '';
    display: inline-block;
    width: 150%;
    height: 1px;
    background: rgba(0,0,0,0.1);
    position: absolute;
    top: 50%;
    margin-top: 0px;
    left: 28px;
}
.terms1 p {font-size: 13px;box-sizing: border-box;font-weight: bold;display: inline-block;margin-top: 17px;margin-left: -20px;width: 67px;text-align: center;line-height: 1.4;color: #999}
.terms1_checked {width:28px;height: 28px;background: var(--main-color); border-radius: 50%;display: inline-block;text-align: center; position: relative;}
.terms1_checked>i {
    position: absolute;
    color: #fff;
    top: 8px;
    left: 8px;
}
.terms1_checked p {margin-top: 39px;}

/* 전자문서 선택 */
.main01 {
    font-family: 'pretendard' !important;
    display: inline-block;
    width: 100%;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -1px;
}

.main01 span {
    color:;
    font-weight: bold;
}

.main04 {
    color: #2a3641;
    width: 100%;
    font-size: 15px;
    text-align: left;
    /*margin: 0.8rem 0 0.5rem 0;*/
}

.main04-imgBox {
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    border-radius: 20px;
    margin-right: 15px;
    font-size: 28px;
    color: var(--color);
    text-align: center;
    background: var(--color-2);
    vertical-align: top;
    opacity: 90%;
}
.main04-imgBox i {font-size:1.3rem;}
.main04.sel_t .title {font-weight: bold;height: 53px; display: inline-flex; align-items: center;}

.con:has(.main04 input[type="checkbox"]:checked){
    background: linear-gradient(265deg, rgba(255,255,255,0) 21%, rgba(185,237,173,0.3015881147540984) 57%, rgba(255,255,255,0) 98%);

}

.main_bb{border-bottom: 1px solid #fff; }
.main_bb:last-child{border-bottom: 0px solid #fff; }

/* Checkbox */
.main04 .ch_container {
    width: 20px;
    height: 20px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 15px;
    color: var(--color);
}

.main04 .ch_container input {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
}

.main04 .checkmark {
    position: absolute;
    top: 50%;
    margin-top: 6px;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: #fff;
    border-radius: 2px;
    border: 1px solid var(--color);
    /* line-height: 24px; */
}

.main04 .ch_container:hover input~.checkmark {background-color: #eee;}

.main04 .ch_container input:checked~.checkmark {
    background-color: var(--color);
    border: 1px solid var(--color);
    border-radius: 2px;
}

.main04 .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.main04 .ch_container input:checked~.checkmark:after {display: block;}

.main04 .ch_container .checkmark:after {
    left: 6px;
    top: 2px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.pageList-wrap .pageList-top{
    display: flex;
    justify-content: space-between;
}

.pageList-wrap .product-img-box{
    width: 60px;
    display: inline-block;
}

.pageList-wrap .product-img-box>img{width: 100%;}

.pageList-wrap .insu-name{
    font-size: 14px;
    padding-left: 0px;
    color: #333;
    font-weight: bold;
    vertical-align: text-top;
}

.pageList-wrap .insu-badge{
        display: inline-block;
        height: 31px;
        line-height: 27px;
        color: var(--color);
        background: var(--color-2);
        border-radius: 12px;
        white-space: nowrap;
        margin-top: -2px;
        font-size: 12px;
        font-weight: bold;
}

.pageList-wrap >p{
    font-size: 15px;
    color: #333;
    line-height: 1.5;
}
.slct-prdct-wrap {display: inline-flex; width: 100%; align-items: center;gap: 0.5rem;margin-bottom:5px;}
.slct-prdct-wrap .logo {
    width: 30%;
    /*width: 35%;*/
    display: block;
    border: 1px solid #ccc;
    padding: 10px;
    background: #fff;
    /*margin-bottom: 13px;*/
    -webkit-box-shadow: 0px 5px 5px -6px rgba(0, 0, 0, 0.18);
    box-shadow: 0px 5px 5px -6px rgba(0, 0, 0, 0.18);
    border-radius: 8px;
}

.slct-prdct-wrap p{
    font-size: 15px;
    font-weight: bold;
}

.slct-prdct-wrap p>span{color: var(--main-color);}

.slct-prdct-list{font-size: 15px;}

.slct-prdct-list .list_sel{
    width: 100%;
    padding: 15px 0px 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.slct-prdct-list .list_sel:last-child {border-bottom: 0px; padding-bottom:0px; }
.slct-prdct-list .list_sel input{display: none;}

.slct-prdct-list .list_sel label{
    vertical-align: top;
    width: calc(100% - 24px);
}

.slct-prdct-list .list_sel .check-icon{
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    background: #fff;
    margin-right: 4px;
    box-sizing: border-box;
}

.slct-prdct-list .list_sel:has(input:checked) .check-icon{
    background: var(--main-color);
    border: 0;
    position: relative;
}

.slct-prdct-list .list_sel:has(input:checked) .check-icon:after{
    content: '\f00c';
    color: #fff;
    margin-left: 2px;
    position: absolute;
    left: 0;
    top: 0;
}

/* 청약상품 선택 */
.insu-select-area .toggle-sty01{float: left;}

.insu-select-area .logos-area,
.insu-select-area .sub-area{
    width: auto;
    display: flex;
    flex-wrap: wrap;
    float: right;
    gap: 9px;
}

.insu-select-area .logos-area .logo>input,
.insu-select-area .sub-area .sub>input{display: none;}

.insu-select-area .logos-area .logo{
        display: inline-flex;
        height: 48px;
        background: #e5e5e4;
        /*border: 1px solid #cdcdcd;*/
        border-radius: 8px;
        align-items: center;
        padding: 0px 15px;
}

.insu-select-area .logos-area input[type="radio"] + label{
    display: inline-block;
    width: 100%;
    text-align: center;
    border-radius: 10px;
}

.insu-select-area .logos-area .logo:has(input[type=radio]:checked){
    box-shadow: 0px 4px 20px 0px #afafaf;
    border-color: var(--main-color);
    background: #fff;
    border: 2px solid var(--main-color);
}

.insu-select-area .logos-area .logo img{width: 72px;height: 36px;}

.insu-select-area .sub-area .sub{
       display: inline-flex;
       height: 48px;
       background: #e5e5e4;
       /* border: 1px solid #cdcdcd; */
       border-radius: 10px;
       align-items: center;
       padding: 0px 15px;
}

.insu-select-area .sub-area input[type="radio"] + label{
    display: inline-block;
    width: 100%;
    text-align: center;
    border-radius: 10px;
    font-weight: bold;
}

.insu-select-area .sub-area .sub:has(input[type=radio]:checked){
    box-shadow: 0px 4px 20px 0px #afafaf;
    border-color: var(--main-color);
    background: #fff;border: 2px solid var(--main-color);

}

.table_st03 {width: 100%;font-size: 12px;border-top: 1px solid #ddd;border-left: 1px solid #eee;}
.table_st03 th {background-color:#f6f6f6; color:#000;height: 40px; border-right: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5; text-align:center;padding-left: 1px;padding-right: 1px; line-height: normal;padding-top: 5px;white-space: nowrap;padding-bottom: 5px;}
.table_st03 td {background-color:#fff;  border-right: solid 1px #e5e5e5 ; border-bottom: solid 1px #e5e5e5 ;text-align:left;height:40px; box-sizing: border-box;color:#000;word-break: break-all;padding:3px 3px 0px 3px; line-height: 1.2;font-size: 11px;}

/* 기타 */
.mb-0 { margin-bottom: 0 !important}
.mb-15 { margin-bottom: 15px !important}
.device-is-android .input-style input[type=date] {margin-bottom: 0 !important;}
.tab-sty01{    font-size: 13px !important;
               font-weight: normal !important;
               height: 3rem !important;
               display: inline-flex;
               align-items: center;
               padding-left: 7px !important;
               padding-right: 7px !important;
               padding-top: 6px !important;justify-content: center;}
.txt-1 {font-size: 15px !important; color: #000 !important;font-weight: bold !important;margin-top: 15px;}

.icon-check-1::before {font-size:22px;}
.icon-check-2::before {font-size:22px;}

.upload-area .photo{
    width: 100%;
    height: 150px;
    line-height: 150px;
    border: 1px solid #dee2e6;
    text-align: center;
    background-color: #fff;
}

.upload-modal .icon{
    width: 65px;
    height: 65px;
    line-height: 65px;
    font-size: 28px;
    border-radius: 50%;
    background-color: var(--sub-color);
    color: var(--main-color);
    margin-bottom: 14px;
}

.upload-modal .icon>i{vertical-align: middle;}

.border-1 {border:1px solid #ddd !important}
.border-2 {border: 2px solid var(--color);}
.dashed-1 {border: 1px dashed}
.border-color-e6 {border-color: #e6e6e6 !important}
.border-color-white {border-color: #fff !important}

.g-badge{
    display: inline-block;
    vertical-align: middle;
    padding: 4px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.g-icon.icon-bell{
    position: relative;
}
.g-icon {min-width: 36px;
         min-height: 36px;
}
.g-icon.icon-bell.alarm:after{
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #ff0000;
    position: absolute;
    top: 6px;
    right: 6px;
}
p > span.alarm {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #ff0000;
    margin: 0 0 4px 8px !important;
}

.card-icon{
    display: inline-block;
    vertical-align: middle;
    width: 33px;
    height: 33px;
    border-radius: 12px;
    background-color: var(--color-2);
    background-repeat: no-repeat;
    background-position: center;
}

.card-icon.icon-1{
    background-image: url("../../images/icons/icon-1.svg");
}

/* 추가 20250826 */
.third-01 {display:flex; justify-content: space-between;}
.third-01 a button span {padding: 15px 10px 10px 15px;
                         display: inline-block;
                         font-size: 16px;
                         letter-spacing: -0.5px;}
.third-01 a button span b {color:#25f2ff !important;}
.third-01 a:nth-child(1) {background: url(/images/ib_01.png) no-repeat left bottom;
           border-radius: 15px;
           box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.1);
           background-size: cover;
           height: 95px;
           display: inline-block;
           width: 100%;margin-right: 12px;
           }
.third-01 a:nth-child(2) {background: url(/images/ib_02.png) no-repeat right bottom;
           border-radius: 15px;
           box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.1);
           background-size: cover;
           height: 95px;
           display: inline-block;
           width: 100%;
           }
/* 확인서 생성 */
.progress-area{
    background-color: #f5f5f5;
    padding: 12px 0;
}

.progress-wrap{
    display: flex;
    justify-content: space-between;
    width: 246px;
    margin: 0 auto;
}

.progress-wrap .left-wrap,
.progress-wrap .right-wrap{
    display: flex;
    gap: 16px;
    position: relative;
}

.progress-wrap .right-wrap .line{
    display: inline-block;
    width: 100%;
    height: 1px;
    background-color: var(--color-4);
    position: absolute;
    top: 50%;
    margin-top: -.5px;
    z-index: 1;
}

.progress-wrap .list .num {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    outline: 2px solid #fff;
    color: #fff;
    background-color: #b4c5d8;
    border-radius: 50%;
    position: relative;
    z-index: 2;
}

.progress-wrap .list.on .num,
.progress-wrap .list.check .num{
    background-color: var(--color);
    outline: 0;
}

.progress-wrap .list .text{
    display: inline-block;
    margin-left: 10px;
    color: var(--color);
    font-weight: 800;
}

.icon.icon-donotcall{
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    background-image: url(../../images/icons/icon-donotcall.png);
    background-repeat: no-repeat;
    background-position: center 1px;
    background-size: contain;
}

.list-area .list{
    padding: 14px 0;
    border-bottom: 1px solid #e1e1e1;
}

.list-area .list:last-child{
    border-bottom: 0;
}

.list-area .call{
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 6px;
    vertical-align: middle;
    border-radius: 50%;
    background-color: var(--color);
}

.list-area .call:before{
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    mask-image: url("data:image/svg+xml,%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 80 80'%3E%3C!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 6px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M51.08,75.11c-.3,0-.61-.06-.9-.18-9.82-4.07-19.29-10.51-27.39-18.6-7.7-7.7-13.94-16.7-18.02-26.03l-.03-.05c-.45-.9-.27-1.99.44-2.7.03-.04.07-.07.11-.11,0,0,.09-.08.1-.08,6.02-5.28,10.4-9.17,11.03-9.78.39-.44.93-.73,1.53-.79.87-.09,1.74.33,2.21,1.08l8.48,13.43c.36.58.46,1.28.26,1.93-.2.65-.67,1.18-1.29,1.46l-4.06,1.79c2.57,3.7,5.49,7.19,8.7,10.4,3.54,3.54,7.38,6.71,11.44,9.43l1.9-4.3c.27-.62.81-1.1,1.46-1.29.65-.2,1.36-.1,1.93.26l13.43,8.48c.75.47,1.17,1.33,1.08,2.21-.06.6-.35,1.15-.79,1.53-.78.8-6.42,7.2-9.86,11.12-.45.52-1.1.8-1.76.8Z'/%3E%3Cg%3E%3Cpath class='st0' d='M43.51,4.89c17.64,0,32,14.35,32,32'/%3E%3Cpath class='st0' d='M43.51,18.55c10.13,0,18.33,8.21,18.33,18.33'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: 20px;
}

.list-area .call.block{
    background-color: var(--color-6);
    position: relative;
}

.list-area .call.block:before{
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background-color: var(--color-5);
    mask-image: url("data:image/svg+xml,%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 80 80'%3E%3C!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 6px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M51.08,75.11c-.3,0-.61-.06-.9-.18-9.82-4.07-19.29-10.51-27.39-18.6-7.7-7.7-13.94-16.7-18.02-26.03l-.03-.05c-.45-.9-.27-1.99.44-2.7.03-.04.07-.07.11-.11,0,0,.09-.08.1-.08,6.02-5.28,10.4-9.17,11.03-9.78.39-.44.93-.73,1.53-.79.87-.09,1.74.33,2.21,1.08l8.48,13.43c.36.58.46,1.28.26,1.93-.2.65-.67,1.18-1.29,1.46l-4.06,1.79c2.57,3.7,5.49,7.19,8.7,10.4,3.54,3.54,7.38,6.71,11.44,9.43l1.9-4.3c.27-.62.81-1.1,1.46-1.29.65-.2,1.36-.1,1.93.26l13.43,8.48c.75.47,1.17,1.33,1.08,2.21-.06.6-.35,1.15-.79,1.53-.78.8-6.42,7.2-9.86,11.12-.45.52-1.1.8-1.76.8Z'/%3E%3Cg%3E%3Cpath class='st0' d='M43.51,4.89c17.64,0,32,14.35,32,32'/%3E%3Cpath class='st0' d='M43.51,18.55c10.13,0,18.33,8.21,18.33,18.33'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: 20px;
}

.list-area .call.block:after{
    content: '';
    display: inline-block;
    width: 14px;
    height: 18px;
    background-image: url("../../images/icons/icon-donotcall.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 2px;
    right: -4px;
}

.list-area .badge{
        vertical-align: middle;
        font-size: 12px;
        font-weight: 600;
        color: #999;
        background-color: #f1f1f1;
        border-radius: 50px;
        width: fit-content;
        padding: 5px 10px;
        min-width: 160px;
}

/* DB 대시보드 등 */
.db-card01{
    background-image: url("../../images/db_img01.png");
    background-repeat: no-repeat;
    background-position: 0 0 !important;
    background-size: 160px;
}

.db-card02{
    background-color: #eff1fb;
}

.db-card02 .box{
    width: 33.3333%;
    padding: 0 15px 0 0px;
    text-align: center;
    position: relative;
}

.db-card02 .box .c-777{
    color: #000;
    margin-bottom:5px;
}

.db-card02 .border-right:after{
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background-color: #cdd2e9;
    position: absolute;
    top: 0;
    right: 0;
    opacity:0.5;
}

.db-card03 .list-1{
    min-width: 130px;
    height: 20px;
    line-height: 20px;
    padding: 0 12px;
    text-align: center;
    font-size: 13px;
    color: #666666;
    background-color: #eee;
    border-radius: 0 0 12px 12px;
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -75px;
}

.db-card03 .g-badge{
    position: absolute;
    top: 3px;
    right: -4px;
}

.db-card03 .list-2{
    margin-top: 12px;
}

.db-card03:has(.g-badge) .list-2{
    margin-top: 36px;
}

.db-card03 .list-2 .title{
    display: inline-block;
    width: 68px;
    color: #a3a9c0 !important;

}

.db-card03 .list-2 .call{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--color);
    border-radius: 50%;
    margin-top: 0rem;
}

.db-card03 .list-2 .call:hover,
.db-card03 .list-2 .call:active{
    filter: brightness(0.8);
}

.db-card03 .list-2 .call>i{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-top: 10px;
    margin-left: 10px;
    background-image: url("../../images/icons/icon-call.svg");
    background-repeat: no-repeat;
    background-position: center;
}

.db-card04{
    background-image: url("../../images/card_img02.png");
    background-repeat: no-repeat;
    background-position: right top !important;
    background-size: cover;
}

.db-card05 .title{
    color: #aeb3c4;
}

.db-card05 .card-footer{
    color: #888888;
    background-color: #f3f6fc;
    border-top: 0px;
}

.db-card06.list-wrap{
    height: 260px;
    overflow-y: auto;
}

.bor-0 {border:0px !important;}
.ba1 {text-align: right;
          padding: 0px 20px 10px 20px;
          font-size: 12px;
          font-weight: 600;color:#999;}

.t-sty01 > * > * > * {
  padding: 0.7rem 0rem !important;
  /* background-color: var(--bs-table-bg); */
  border-bottom-width: 1px;
  border-style:dashed;
}
.t-sty01 {margin-bottom: 0;}
.t-sty02 > * > * > * {
  padding: 0.5rem 0rem !important;
  /* background-color: var(--bs-table-bg); */
  border-bottom-width: 1px;
  border-style:dashed;
}
.width-76{width:105px !important;}
.width-av {width : -webkit-fill-available !important;}
.width-40 {width: 40px !important;}
.btn_light{border-radius: 5px !important; background: var(--color-2) !important; color: var(--color) !important;font-weight:600}
.mr-m1 {margin-top: -9px; margin-right: 1px;}
.banner-bg {background: #f6f9ff !important;}

/* ------------------------- 다크모드 관련------------------------- */
.theme-dark .list-custom-large p strong {color: #ffffff;}
.theme-dark .table_sty01 td {color: #fff;}
.theme-dark {color: #adadad;}
.theme-dark i {color: #ffffff;}
.theme-dark td{color: #fff;}
.theme-dark .cal-schedule-card{background: #0f1117;}
.theme-dark .timeline-item-content{background-color: #21252a00 !important;}
.theme-dark .timeline-deco {background-color: rgba(255, 255, 255, 0.3) !important;}
.theme-dark .bg-white{background-color: #0f1117 !important;}
.theme-dark .opacity-40{opacity: 0.8 !important;}
.theme-dark .opacity-50{opacity: 0.9 !important;}
.theme-dark .text-black-50{color:#adadad !important;}
.theme-dark em{color: #adadad !important;}
.theme-dark .card-style{border-color: rgba(253, 253, 253, 0.5); box-shadow: 0px 1px 8px 0px #e6e6e64d;}
.theme-dark #tab-group-1 .divider.bg-white{background-color: rgba(253, 253, 253, 0.5) !important;}
.theme-dark .tab-controls a:not(:last-child) {border-right: solid 1px rgb(255 255 255 / 20%) !important;}
.theme-dark th {background-color: transparent !important;}
.theme-dark td, .theme-dark table {background-color: transparent !important;}
.theme-dark table {border: none;}
.theme-dark tr {border-bottom: solid 1px rgba(255, 255, 255, 0.3);}
.theme-dark input[type="date"]::-webkit-calendar-picker-indicator {cursor: pointer;filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(92deg) brightness(104%) contrast(106%);}
.theme-dark .calendar{border: 1px solid rgba(253, 253, 253, 0.5);}
.theme-dark .cal-dates-border a {border-right: solid 1px rgba(253, 253, 253, 0.5);;border-bottom: solid 1px rgba(253, 253, 253, 0.5);}
.theme-dark .table_sty01 tr{border-bottom:1px solid rgba(255, 255, 255, 0.3) !important}
.theme-dark .table_sty01{border-top: 1px solid rgba(255, 255, 255, 0.3) !important;}
.theme-dark .key_input{color: #fff;}
.theme-dark .bg-highlight select{color: #fff !important;}

.theme-dark .card.bg-subHighlight h1:not(.color-highlight, .color-subHighlight),
.theme-dark .card.bg-subHighlight span:not(.color-highlight, .color-subHighlight),
.theme-dark .card.bg-subHighlight p:not(.color-highlight, .color-subHighlight){
    color: inherit !important;
}

.theme-dark .color-highlight span{
    color: inherit !important;
}

.theme-dark .g-badge{
    color: #000 !important;
}

.theme-dark .color-highlight{
    color: var(--dark-color) !important;
}

.theme-dark .header-title{
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7490%) hue-rotate(128deg) brightness(99%) contrast(102%);
}

.theme-dark .footer-bar-1 .active-nav i,
.theme-dark .footer-bar-1 .active-nav span,
.theme-dark .footer-bar-3 .active-nav i{
    color: var(--dark-color) !important;
}

.theme-dark .h-back i{
    color: #000 !important;
}

.theme-dark .cnfrm-card-area span:not(.color-highlight){
    color: #000 !important;
}
/* ------------------------- 다크모드 end------------------------- */