/*2025년 1월 UI개선작업*/
@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
   src: url('/res/hkc/font/Pretendard-Thin.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    src: url('/res/hkc/font/Pretendard-ExtraLight.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    src: url('/res/hkc/font/Pretendard-Light.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    src: url('/res/hkc/font/Pretendard-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    src: url('/res/hkc/font/Pretendard-Medium.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    src: url('/res/hkc/font/Pretendard-SemiBold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    src: url('/res/hkc/font/Pretendard-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    src: url('/res/hkc/font/Pretendard-ExtraBold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    src: url('/res/hkc/font/Pretendard-Black.woff') format('woff');
}



/*금융소비자보호 메뉴 신설 260730*/
.visual-wrap .bg-cco .line{display:none;}
.visual-wrap .bg-cco .key-img{bottom:25px;width:130px;height:124px;background:url("/res/hkc/images/contents/customer_p_title_icon.png");background-size:cover;}

.visual-info.cco{background:#fff6f6;color:#000000;font-family:"pretendard", sans-serif;}
.visual-info.cco.bgcolor span:before{top:20px; left:-80px;width:60px; height:62px;background:url("/res/hkc/images/contents/customer_p_subtitle_icon.png"); background-size:cover;}

.sec-wrap h3{font-family:"pretendard", sans-serif;}
.sec-wrap h5.tit{font-family:"pretendard", sans-serif;}
.tbl-list01 th, .tbl-list01  td{font-family:"pretendard", sans-serif;}
.btn-cco-link{display:inline-block;color:#fff !important;font-size:16px;background:#e61d26;text-align:center;vertical-align:middle;padding:5px 25px;border-radius:3px;box-sizing:border-box;font-family:"pretendard", sans-serif;}
.txt-cco-tele{padding:5px 25px;}


.cco-submenu-list{display:inline-block;width:100%;margin:0 0 50px 0;}
.cco-submenu-list:after{content:'';display:block;clear:both;}
.cco-submenu-list li{float:left;width:50%;border-bottom:1px solid #dcdcdc;box-sizing:border-box;}
.cco-submenu-list li a{display:block;height:49px;font-size:16px;padding-top:12px;border:1px solid #dcdcdc;border-width:1px 1px 0 0;color:#222;text-decoration:none;text-align:center;box-sizing:border-box;font-family:"pretendard", sans-serif;}
.cco-submenu-list li:first-child a{border-left:1px solid #dcdcdc;}
.cco-submenu-list li.on{position:relative;}
.cco-submenu-list li.on a{position:absolute;width:100%;height:50px;border-top:3px solid #e41e26;border-bottom:0;background:#fff;padding-top:11px;}
.cco-submenu-list li a.row{padding-top:2px;}
.cco-submenu-list li.on a.row{padding-top:1px;}

.cco-submenu-list.n2 li{width:50%;}/* tab 2개일 경우 */
.cco-submenu-list.n3 li{width:33.33333%;}/* tab 3개일 경우 */
.cco-submenu-list.n4 li{width:25%;}/* tab 4개일 경우 */
.cco-submenu-list.n5 li{width:20%;}/* tab 5개일 경우 */
.cco-submenu-list.n6 li{width:16.66666%;}/* tab 6개일 경우 */


.cco-tab-list {display:flex; flex-flow:row nowrap;justify-content:center; align-items:center; }
.cco-tab-list li {width: 400px; flex-basis:400px;margin-right:10px;}
.cco-tab-list li:last-child{margin-right:0;}
.cco-tab-list li a{display:block; padding: 10px 60px; text-align:center;border:3px solid #afabab; border-radius:10px;font-family:"pretendard", sans-serif;font-weight:500;font-size:18px;}
.cco-tab-list li.open a{border:3px solid #cf2d11; font-family:"pretendard", sans-serif;font-weight:600;font-size:20px;}

.cco-tab-conbox{margin-top:30px;}
.cco-tab-conitem{display:none;position:relative;}
.cco-tab-conitem.show{display:block;}


.cco-3tab-list {display:flex; flex-flow:row nowrap;justify-content:center; align-items:center; }
.cco-3tab-list li {width: 300px; flex-basis:300px;margin-right:10px;}
.cco-3tab-list li:last-child{margin-right:0;}
.cco-3tab-list li a{display:block; padding: 10px 60px; text-align:center;border:3px solid #afabab; border-radius:10px;font-family:"pretendard", sans-serif;font-weight:500;font-size:18px;}
.cco-3tab-list li.open a{border:3px solid #cf2d11; font-family:"pretendard", sans-serif;font-weight:600;font-size:20px;}

.cco-org-box{width:730px; height:444px; background:url("/res/hkc/images/contents/customer_p_org_img.png");background-size:cover;margin:0 auto;}
.cco-process-box{width:830px; height:388px; background:url("/res/hkc/images/contents/customer_p_process_img.jpg");background-size:cover;}
.cco-charter-point{position:relative;}
.cco-lftdot-icon{position:absolute;left:43px;top:23px;width:24px; height:23px;background:url("/res/hkc/images/contents/customer_p_charter_leftdot.png");background-size:cover;}
.cco-rgtdot-icon{position:absolute;right:220px;top:23px;width:24px; height:23px;background:url("/res/hkc/images/contents/customer_p_charter_rightdot.png");background-size:cover;}

.cco-charter-banner{padding: 40px 30px;background-color:#fff6f6;border-radius:20px;}
.cco-charter-bgimg{position:absolute;right:-5px;bottom:0;width:180px; height:151px;background:url("/res/hkc/images/contents/customer_p_charter_icon.png");background-size:cover;}
.cco-charter-banner > p {margin-top:10px; width:600px;padding-left:48px;font-family:"pretendard", sans-serif;font-weight:600;font-size:24px;letter-spacing:-0.8px;}
span.cco-charter-rtxt{color:#cf2d11;font-weight:600;}
span.cco-charter-udtxt{font-weight:600;text-decoration:underline;text-underline-offset:8px;}
.cco-charter-summary > p{text-align:center;padding:50px 0;font-family:"pretendard", sans-serif;font-weight:600;font-size:20px;letter-spacing:-0.3px;}
.cco-charter-oricon {width:26px; height:35px;flex-basis:26px;flex-shrink:0;margin-right:15px;}
.cco-charter-oricon.one {width:26px; height:35px;background:url("/res/hkc/images/contents/customer_p_charter_order01.png");background-size:cover;}
.cco-charter-oricon.two {width:26px; height:36px;background:url("/res/hkc/images/contents/customer_p_charter_order02.png");background-size:cover;}
.cco-charter-oricon.three {width:26px; height:37px;background:url("/res/hkc/images/contents/customer_p_charter_order03.png");background-size:cover;}
.cco-charter-oricon.four {width:30px; height:33px;flex-basis:30px;flex-shrink:0;background:url("/res/hkc/images/contents/customer_p_charter_order04.png");background-size:cover;}

.cco-charter-item{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;border-radius:20px;margin-bottom:10px;background-color:#f9f9f9;padding:30px;}
.cco-charter-item > p{font-family:"pretendard", sans-serif;font-size:20px;}
.cco-charter-ornum{font-family:"pretendard", sans-serif;font-size:22px;margin-right:10px;font-weight:600;}

.cco-notice-txt{font-family:"pretendard", sans-serif;font-weight:600;font-size:18px;}

.sec-wrap h4{font-family:"pretendard", sans-serif;}
.gide-type03 p{font-family:"pretendard", sans-serif; font-size:18px;}
.gide-type03 li{font-family:"pretendard", sans-serif;font-size:16px;}

.tbl-view01 tbody th,.tbl-view01 tbody tr{font-family:"pretendard", sans-serif;}
.agree-txt p{font-family:"pretendard", sans-serif;font-size:16px;}
.chkbox input[type=checkbox]+label{font-family:"pretendard", sans-serif;}
.agree-box.st03 .chk-type .tit-area .tit{font-family:"pretendard", sans-serif;font-size:18px;}

.agree-txt .tit{font-family:"pretendard", sans-serif;font-size:16px;}
.agree-txt .tit02{font-family:"pretendard", sans-serif;font-size:16px;}
.agree-txt .desc-list{font-family:"pretendard", sans-serif;}
.agree-txt .num-list li {font-family:"pretendard", sans-serif;font-size:16px;}
.agree-txt .rect-list li {font-family:"pretendard", sans-serif;font-size:16px;}
.agree-txt .in-list li {font-family:"pretendard", sans-serif;font-size:16px;}
.agree-txt .list-type02 > li{font-family:"pretendard", sans-serif;font-size:16px;}
.agree-txt .noti-box li {font-family:"pretendard", sans-serif;font-size:16px;}


.terms-page .terms-gide{font-family:"pretendard", sans-serif;}
.terms-page .terms-gide.cco-empasis-txt{font-family:"pretendard", sans-serif;font-size:16px}
.end-msg02 p{font-family:"pretendard", sans-serif;}
.btn-red{font-family:"pretendard", sans-serif;}
.btn-gray{font-family:"pretendard", sans-serif;}

.cco-list-txt li {font-family:"pretendard", sans-serif;font-size:16px;}
.ct-txt{font-family:"pretendard", sans-serif;}
.under-desc{font-family:"pretendard", sans-serif;font-size:16px;}

.cco-agrtxt-txt{font-family:"pretendard", sans-serif;font-size:16px;}
.cco-title-style{display:inline-block;position:relative;padding-top:5px;margin-bottom:25px;font-size:20px;font-weight:bold;letter-spacing:-2px;}
.cco-title-style:before{content:'';display:inline-block;position:absolute;top:0;left:0;width:30px;height:2px;background:#e41e26;}





 /* 전체 레이아웃 구성을 위한 Wrap (기존 페이지 우측 영역에 삽입) */
        .content-container {
            width: 800px;
            margin: 0 auto;
            padding: 40px 20px;
            font-family:"pretendard", sans-serif;
        }

        /* 타이틀 섹션 */
        .header-section {
            text-align: center;
            margin-bottom: 40px;
        }

        .header-section .icon-wrap {
            display: inline-block;
            width: 60px;
            height: 60px;
            background-color: #fce8e6;
            border-radius: 50%;
            line-height: 60px;
            margin-bottom: 15px;
        }

        /* 한국캐피탈 아이덴티티 반영 레드가 가미된 아이콘 */
        .header-section .icon-wrap svg {
            vertical-align: middle;
            fill: #C91524; 
        }

        .header-section h2 {
            font-size: 28px;
            color: #222;
            font-weight: 700;
            margin-bottom: 12px;
            line-height:40px;
        }

        .header-section p {
            font-size: 15px;
            color: #666;
            line-height: 1.5;
        }

        /* 메인 콘텐츠 메인 레이아웃 (반응형 2단 구성) */
        .main-layout {
            display: flex;
            background: #fff;
            border: 1px solid #e9e9e9;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
            overflow: hidden;
        }

        /* 왼쪽 안내 문구 영역 */
        .guide-box {
            flex: 1.2;
            padding: 40px;
            background-color: #fafafa;
            border-right: 1px solid #e9e9e9;
        }

        .guide-box h3 {
            font-size: 18px;
            color: #222;
            margin-bottom: 25px;
            font-weight: 600;
        }

        .step-list {
            list-style: none;
        }

        .step-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
        }

        .step-number {
            display: inline-block;
            width: 24px;
            height: 24px;
            background-color: #C91524;
            color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 24px;
            font-size: 13px;
            font-weight: bold;
            margin-right: 12px;
            flex-shrink: 0;
        }

        .step-text {
            font-size: 15px;
            color: #444;
            line-height: 1.6;
            padding-top: 1px;
        }

        .step-text strong {
            color: #222;
        }

        /* 오른쪽 QR코드 영역 */
        .qr-box {
            flex: 1;
            padding: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .qr-wrapper {
            padding: 15px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 15px;
            position: relative;
        }

        /* QR 이미지 플레이스홀더 (실제 QR 이미지 경로로 대체 필요) */
        .qr-image {
            width: 160px;
            height: 160px;
            background-color: #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #aaa;
        }

        .qr-caption {
            font-size: 13px;
            color: #666;
            line-height: 1.4;
        }