/* =============================================
   듀오키퍼 — 전용 스타일
   body.duokeeper 하위로 스코프 — 타 사이트 CSS 충돌 방지
   ============================================= */

/* ─── 1. BASE RESET ─── */
@charset "utf-8";
@import url("font/pretendard-gov.css");
@import url("font/Paperlogy/stylesheet.css");
body.duokeeper{
    --main-color: #2F7FD4;
    --main-color2: #2AA570;
    --main-color3: #3E71E8;
    --main-color4: #FBB03B;
    --main-color5: #F19504;
    --main-color6: #19436A;
    --boder-color: #11231F1A;
    --point-color: #FCFF32;
    --m-sub-menu-bg:#007C4905;
    --box-bg:#007C4920;
    --max-width: 1240px;
    --font-color: #2A2A2A;
    --font-color2: #11231F;
    --font-color-b: #4D9E1E;
    --font-color-r: #B90011;
    --font-size-base: clamp(13px, 1vw + 10px, 16px);     /* 기본 본문 */
    --font-size-tit:  clamp(36px, 3vw + 28px, 64px);     /* 메인 타이틀 */
    --font-size-h2:   clamp(26px, 2.5vw + 18px, 44px);   /* 섹션 제목 */
    --font-size-h3:   clamp(20px, 1.8vw + 14px, 32px);   /* 서브 제목 */
    --font-size-pt:   clamp(22px, 2vw + 16px, 36px);     /* 포인트 */
    --font-size-st1:  clamp(18px, 1.5vw + 12px, 28px);   /* 서브타이틀1 */
    --font-size-st2:  clamp(16px, 1.2vw + 10px, 24px);   /* 서브타이틀2 */
    --font-size-desc: clamp(15px, 1vw + 10px, 20px);     /* 설명 */
    --font-size-list: clamp(12px, 0.5vw + 9px, 13.4px);  /* 목록 */
    --font-size-sm:   clamp(11px, 0.4vw + 8px, 12px);    /* 작은글씨 */
    --font-style: 'Pretendard GOV';
    --font-style2:'Paperlogy' ;
    --border-radius:20px;
    --recruit-btn:#4D9E1E;
    --chk-color:#7BACDF;
    --hamburger-color:#19436A;
    --table-th:#19436A;
    --table-th-border: #2F7FD4;

}

.duokeeper #wrap.main section + section{
    margin-top: 0 !important;
}
.duokeeper #wrap section:last-child {
    padding-bottom: 80px;
}
.duokeeper {
    font-family: 'Pretendard GOV','Paperlogy', sans-serif;
    font-size: var(--font-size-base);
    color: var(--font-color);
    line-height: 1.5;
    background: #fff;
    margin: 0;
}
form{
    width: 100%;
}
.duokeeper input[type='radio']:checked,.duokeeper input[type='checkbox']:checked {
    background: var(--main-color2);
}
.duokeeper a { text-decoration: none; color: inherit; }
.duokeeper .gnbNew > ul > li > a {

    height: 80px;
    line-height: 80px;

    font-weight: 600;


    border-top: 5px solid #ffffff;
    min-width: 80px;
}
.duokeeper .gnbNew > ul > li > a{
    font-size : var(--font-size-desc);
    color: #2B443D;
    font-family: var(--font-style2);
    font-weight: 600;
}
.duokeeper .gnbNew > ul > li > a:after,.duokeeper #gnb .gnbNew .link_go:after{
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.45;
    margin-left: 9px;
    vertical-align: middle;
    margin-top: -3px;


}
.gnbNew > ul > li > ul > li > a{
     font-size: var(--font-size-base);
     color: #2B443D;
     font-family: var(--font-style2);
     font-weight: 500;
 }
.duokeeper .gnbNew > ul > li > a:hover{
    border-top: 5px solid var(--main-color);
    color:unset; text-decoration:unset;
}

.duokeeper .gnbNew > ul > li > ul > li > a:hover {color:var(--main-color6);}
.duokeeper .gnbNew > ul > li {padding: 5px 20px 0px;}

.duokeeper ul, .duokeeper ol { list-style: none; }
.duokeeper img { max-width: 100%; vertical-align: middle; }

/* ─── 2. LAYOUT ─── */
.duokeeper #wrap { width: 100%; overflow-x: hidden; }
.duokeeper .container {    width: 100%; max-width: var(--max-width); margin: 0 auto; /*padding: 0 20px;*/ }

/* ─── 3. GNB TOP ─── */
.duokeeper #gnbTop {
    background: linear-gradient(90deg, #19436A 0%, #3183D0 100%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    height: 60px;
}
.duokeeper #gnbTop .container {
    display: flex;
    align-items: center;
    height: 100%;
}
.duokeeper #gnbTop .gnb-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}
.duokeeper #gnbTop .gnb-top > p {
    font-size: var(--font-size-base);
    color: #FFFFFF;
    margin: 0;
}
.duokeeper #gnbTop .gnb-top > p > span{
    width: 12px;
    height: 12px;
    background-color: var(--point-color);
    border-radius: 50px;
    display: inline-block;
    margin-right: 10px;
    animation: pulse 2s infinite;
}
.duokeeper #gnbTop .gnb-top-btn {
    display: flex;
    align-items: center;
    gap: 40px;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #FFFFFF;
}

.duokeeper #gnbTop .gnb-top-btn span{
    color: #FFFFFF !important;
}
.duokeeper #gnbTop .gnb-top-btn a {
    font-size: var(--font-size-base);
    color: #FFFFFF;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.duokeeper #gnbTop .gnb-top-btn a:last-child { border-right: none; }
.duokeeper #gnbTop .gnb-top-btn a:hover { color: #fff; }
.duokeeper #gnbTop .gnb-top-btn .point_txt { color: var(--point-color); font-weight: 800; font-size: var(--font-size-base);}
.duokeeper #gnbTop .gnb-top-btn .top-logout { color: #fff; font-size: var(--font-size-base);font-weight: 600; }
.duokeeper #gnbTop .gnb-top-btn span {
    content: '';
    display: inline-flex;
    width: 24px;height: 24px;
    background-image: url("/images/ico_login.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.duokeeper #gnbTop .gnb-top-btn .login-icon {
    background-image: url("/images/ico_login.png");
}
.duokeeper #gnbTop .gnb-top-btn .join-icon {
    background-image: url("/images/ico_join.png");
}
.duokeeper #gnbTop .gnb-top-btn .event-icon {
    background-image: url("/images/ico_event.png");
}
#header .area_logo .logo {
    height: 80px;
    width: 22rem;
}
#header .gnb_wrap {
    height: 90px;
}
#header .gnb_wrap > .inner {
    display: flex;
    justify-content: center;
    padding: 0 0 0 230px;
    height: 100%;
}
#header .gnb-menu > li {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#header .gnb-menu button {
    height: auto;
    line-height: 100%;
    font-family: var(--font-style2);
    padding: 10px 2rem;
}
#header .gnb-menu button:after{
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.45;
    margin-left: 9px;
    vertical-align: middle;
    margin-top: -3px;
    background: unset;
}
#header .gnb-menu > li:last-child button{
    color: #FFFFFF;
    background: var(--main-color6);
    padding: 10px 17px;
    border-radius: 41px;
    font-size: var(--font-size-desc);
    font-weight: 700;
    font-family: var(--font-style2);
}
#header .gnb-menu > li:last-child button:hover{
    background: var(--main-color);
    color: #FFFFFF;
}
#header .gnb-menu .gnb-sub-list li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-family: var(--font-style2);
}
#header .gnb-menu .gnb-sub-list li a small{
    font-size: var(--font-size-sm);
}
#header .m_gnb_wrap .submenu li ul li a small{
    font-size: var(--font-size-list);
    color: var(--main-color2);
}
#header .sub-wrap .tit_area.tit_area01:before {
    background: url(../images/img_h_l_06.png) no-repeat center / contain;
}
#header .sub-wrap .tit_area.tit_area02:before {
    background: url(../images/img_h_l_04.png) no-repeat center / contain;
}
#header .sub-wrap .tit_area.tit_area03:before {
    background: url(../images/img_h_l_03.png) no-repeat center / contain;
}
#header .sub-wrap .tit_area.tit_area04:before {
    background: url(../images/img_h_l_02.png) no-repeat center / contain;
}
#header .sub-wrap .tit_area.tit_area05:before {
    background: url(../images/img_h_l_05.png) no-repeat center / contain;
}
/* ─── 4. GNB MAIN NAV ─── */
.duokeeper #gnb {
    padding-left: 10px;
    padding-right: 20px;
    /*box-shadow: 0 2px 8px rgba(0,0,0,0.06);*/
}
.duokeeper #gnb .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.duokeeper #gnb h1 { flex-shrink: 0; }
.duokeeper #gnb h1 a {
    display: block;
    width: 271px;
    height: 54px;
    background: url(/images/top_logo.png) no-repeat center / contain;
}

.duokeeper #gnb .gnb-right { display: flex; align-items: center; }
.duokeeper #gnb .gnbNew{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
}

.duokeeper .link_go{
    color: #FFFFFF;
    background: var(--main-color6);
    padding: 10px 17px;
    line-height: 100%;
    border-radius: 41px;
    font-size : var(--font-size-desc);
    font-weight: 700;
    margin: 10px 0 0;
    font-family: var(--font-style2);
}
.duokeeper #gnb .gnbNew .link_go:hover{
    background: var(--main-color);
}
/*
 * 호버 시 메뉴 강조용 흰 오버레이 — 가로 100%(left:0/right:0), 드롭다운 박스 정도의 높이.
 * bottom:0 으로 전체화면을 덮지 않도록 height 명시.
 * 호버 갭 해소(메뉴 li ↔ 흰 오버레이 사이 마우스 이동) 는 footer.php 의 JS leave-delay 핸들러가 함께 처리.
 */
.duokeeper #gnbBgnew {
    display: none;
    position: absolute;
    top: 90px;
    left: 0;
    right: 0;
    height: 200px;
    background: #FFFFFF;
    z-index: 800;
}
.duokeeper #gnbBgnew.active { display: block; }

/* ─── 5. MOBILE GNB ─── */
.duokeeper #mo-gnb { display: none; }
.duokeeper #mo-header { display: none; }

.duokeeper #rqBg {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1100;
}
.duokeeper #rqWrap {
    position: fixed;
    top: 0; right: -100%;
    width: 300px; height: 100vh;
    background: #fff;
    z-index: 1200;
    overflow-y: auto;
    flex-direction: column;
    display: flex;
    transition: right 0.3s ease;
}

.duokeeper .mTop-gnb {
    background: var(--main-color6);
    padding: 16px 20px;
    min-height: 60px;
    display: flex;
    align-items: center;
}
.duokeeper .mTop-gnb .gnb-top-btn { display: flex; gap: 8px; flex-wrap: wrap; }
.duokeeper .mTop-gnb .gnb-top-btn a {
    color: rgba(255,255,255,1);
    font-size : var(--font-size-list);
    padding: 6px 14px;
    background: var(--main-color);
    border: 1px solid var(--boder-color);
    border-radius: 4px;
    transition: background 0.2s;
}
.duokeeper .mTop-gnb .gnb-top-btn a:hover { background: rgba(255,255,255,0.15); }
.duokeeper .mTop-gnb .gnb-top-btn .top-login {
    background: var(--main-color);

}
.duokeeper #mMenu { padding: 8px 0 40px; flex: 1; }
.duokeeper #mMenu > div > ul > li { border-bottom: 1px solid #f1f5f9; }
.duokeeper #mMenu > div > ul > li > span {
    color: var(--font-color);
    cursor: pointer;
    position: relative;
    border-color: var(--main-color6);
    width: 100%;
}
.duokeeper #mMenu > div > ul > li > span::after {
    content: '';
    display: block;
    width: 8px; height: 8px;
    border-right: 2px solid var(--main-color6);
    border-bottom: 2px solid var(--main-color6);
    transform: rotate(45deg);
    position: absolute;
    right: 20px; top: 50%; margin-top: -6px;
    transition: transform 0.2s;
}
.duokeeper #mMenu > div > ul > li.on > span { color: var(--main-color); }
.duokeeper #mMenu > div > ul > li.on > span::after {
    transform: rotate(-135deg);
    margin-top: -2px;
}
.duokeeper #mMenu .menu_wrap { display: none; background: var(--m-sub-menu-bg); padding: 4px 0; }
.duokeeper #mMenu .menu_wrap li a {
    color: var(--font-color);
    border-bottom: 1px solid var(--boder-color);
}
.duokeeper #mMenu .menu_wrap li a:hover { color: #1c3a7e; }

.duokeeper #mo-header {
    background: #fff;
    border-bottom: 1px solid #e8ecf0;
    position: sticky;
    top: 0; z-index: 900;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.duokeeper #mo-header .mo-header-inner {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}
.duokeeper #mo-header .mo-logo {
    font-size: clamp(14px, 1vw + 10px, 18px); font-weight: 800; color: #1c3a7e;
}






/* ─── 12. FOOTER ─── */
.duokeeper .duokeeper-footer {
    background: var(--main-color6);
    padding: 60px 0;
    color: #FFFFFF;
}
.duokeeper-footer .footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
    font-size: var(--font-size-base);
}
.duokeeper .duokeeper-footer .footer-left {
    flex-shrink: 0;
    width: 50%;
    max-width: 655px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.duokeeper .duokeeper-footer .footer-logo {

    display: flex;
    align-items: center;
    background: url("/images/footer_logo.png") no-repeat left  / contain;
    width: 80%;
    max-width: 200px;
    height: 54px;
}
.duokeeper .duokeeper-footer .footer-logo .logo-icon {
    width: 32px; height: 32px;
    background: #1c3a7e;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px; font-weight: 900; color: #fff;
}
.duokeeper .duokeeper-footer .footer-desc {
    font-size: var(--font-size-base);
    line-height: 120%;
    font-weight: 400;
    word-break: keep-all;
    letter-spacing: -1px;
}
.duokeeper .duokeeper-footer .footer-contact {
    padding: clamp(12px, 1vw + 8px, 18px) clamp(14px, 1.2vw + 10px, 20px);
    background: #FFFFFF0F;
    border: 1px solid #FFFFFF1A;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    font-size: var(--font-size-base);
    font-weight: 400;
    letter-spacing: 0;
    color: #FFFFFF99;
}
.duokeeper .duokeeper-footer .footer-contact span{
    font-size: var(--font-size-base);
    font-weight: 700;
    letter-spacing: 0.65px;
    color: #C1E1FF;
}

.duokeeper .duokeeper-footer .footer-contact a{
    font-size:var(--font-size-st1);
    font-weight: 700;
    letter-spacing: 0.45px;
    color: #FFFFFF;

}
.duokeeper .duokeeper-footer .footer-contact p{font-weight: 400; color: #FFFFFF99; font-size: var(--font-size-base);}
.duokeeper .duokeeper-footer .footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    justify-content: flex-start;
    width: 90%;
    max-width: 504px;
}
.duokeeper .duokeeper-footer .footer-right .footer-about-info {
    display: flex;
    gap: 16px;
    font-weight: 400;
    color: #FFFFFFB2;
}
.duokeeper .duokeeper-footer .footer-nav-group h4 {
    font-size : var(--font-size-desc);
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -1px;

}
.duokeeper .duokeeper-footer .footer-nav-group p {
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    color: #FFFFFF99;
    white-space: pre;
}
.duokeeper .duokeeper-footer .footer-nav-group p b {
    font-weight: 600;color: #FFFFFFE5;
}
.duokeeper .duokeeper-footer .footer-nav-group.info{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px 14px;
}
.duokeeper .duokeeper-footer  a:hover{color: #FFFFFF;}
.duokeeper .duokeeper-footer .footer-nav-group.info h4,.duokeeper .duokeeper-footer .footer-nav-group.info p{
    margin-bottom: 0;
}
.duokeeper .duokeeper-footer .footer-nav-group h4,.duokeeper-footer .footer-nav-group ul li {
    margin-bottom: 28px;
}
.duokeeper-footer .footer-nav-group ul li a {
    font-size : var(--font-size-desc);
    font-weight: 300;
    line-height: 100%;
    letter-spacing: -1px;
}
.duokeeper .duokeeper-footer .footer-nav-group ul li a:hover { color: rgba(255,255,255,0.9); }
.duokeeper .duokeeper-footer .footer-copy {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 24px;
    font-size : var(--font-size-list);
    color: #FFFFFF66;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.duokeeper .duokeeper-footer .footer-copy a {
    color: rgba(255,255,255,0.45);
    margin-left: 16px;
    transition: color 0.2s;
}
.duokeeper .duokeeper-footer .footer-copy a:hover { color: rgba(255,255,255,0.8); }
.duokeeper .mo{
    display: none;
}
.duokeeper .pc{
    display: block;
}

/* =============================================
   <main> 콘텐츠 전용 스타일
   — duokeeper.css 헤더/변수 건드리지 않음
   — 클래스명 충돌 없도록 dk- 접두어 사용
   ============================================= */

.duokeeper main * { box-sizing: border-box; }
.duokeeper main section + section { margin-top: 0 !important; }

.duokeeper .dk-wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* reveal 애니메이션 */
.duokeeper .reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }
.duokeeper .reveal.in { opacity: 1; transform: none; }
.duokeeper .reveal.d1 { transition-delay: .1s; }
.duokeeper .reveal.d2 { transition-delay: .2s; }
.duokeeper .reveal.d3 { transition-delay: .3s; }

/* 섹션 헤더 공통 */
.duokeeper .dk-hd { margin-bottom: 15px; }
.duokeeper .dk-hd .dk-sub {
    display: block;
    font-size : var(--font-size-desc);
    font-weight: 800;
    color: var(--main-color6);
    margin-bottom: 16px;
    letter-spacing: 0;
}
.duokeeper .dk-hd .dk-sub::before {
    content: '— ';
    color: var(--main-color6);
    font-size : var(--font-size-desc);
    line-height: 1.5; }
.duokeeper .dk-hd h2 {
    font-size : var(--font-size-h2);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--font-color);
    word-break: keep-all;
    font-family: var(--font-style2);
    margin-bottom: 15px;
}
.duokeeper .dk-hd h2 span {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}
.duokeeper .dk-hd h2 em { font-style: normal; color: var(--main-color); font-weight: 800; }
.duokeeper .dk-hd p { font-size : var(--font-size-desc);
    font-weight: 400;
    color: var(--font-color);
    line-height: 1;
    word-break: keep-all;
    letter-spacing: -3%; }
.duokeeper .dk-hd.on-dark h2 { color: #fff; }
.duokeeper .dk-hd.on-dark .dk-sub { color: #FFFFFF; }
.duokeeper .dk-hd.on-dark .dk-sub::before { color: #FFFFFF; }
.duokeeper .dk-hd.on-dark p { color: #FFFFFF; }

.duokeeper .point_txt1{color: var(--main-color2);}
.duokeeper .point_txt2{color: var(--main-color4);}
/* ═══════════════════════════════════════════
   MAIN CONTENT SECTIONS
═══════════════════════════════════════════ */


/* ─── 섹션1: 히어로 ─── */
.duokeeper .dk-hero {
    background: url('/images/main_bg1.png') no-repeat center bottom / cover;
    background-color: #E8F3FC;
    padding: 56px 0 0;
    overflow: hidden;
}
.duokeeper .dk-hero .dk-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.duokeeper .dk-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--main-color6);
    border: 1px solid var(--boder-color);
    border-radius: 30px;
    padding: 6px 16px;
    font-size: var(--font-size-base);
    line-height: 100%;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 22px;
    letter-spacing: 0.95px;
}
.duokeeper .dk-hero-badge::before {
    content: '';
    width: 16px;
    height: 16px;
    display: inline-block;

    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M7 12L10.5 15.5L17 9' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='12' fill='%23FFFFFF' mask='url(%23m)'/%3E%3C/svg%3E") center/contain no-repeat;
}
.duokeeper .dk-hero-h1 {
    font-size : var(--font-size-tit);
    font-weight: 800;
    line-height: 1.25;
    color: var(--font-color);
    letter-spacing: -1.28px;
    margin: 0 0 21px;
    font-family: var(--font-style2);
    text-align: center;
    vertical-align: middle;
}
.duokeeper .dk-hero-h1 strong { color: var(--main-color);font-weight: 800; }
.duokeeper .dk-hero-desc {
    font-size : var(--font-size-desc);
    color: var(--font-color);
    line-height: 1.6;
    margin-bottom: 21px;
    word-break: keep-all;
    letter-spacing: -5%;
}

/* 히어로 3단 카드 */
.duokeeper .dk-hero-cards {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1.7fr;
    gap: 23px;
    width: 100%;
    max-width: 824px;
    margin-bottom: 21px;
    padding-bottom: 20px;
}
.duokeeper .dk-hero-card {
    background: #fff;
    border-radius: 16px;
    border: 2px solid var(--main-color2);
    padding: 10px 10px 29px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    position: relative;
    transition: transform .25s, border-color .25s, box-shadow .25s;
    box-shadow: 0px 12px 36px 0px #C1E1FF;

}
.duokeeper .dk-hero-card:nth-child(1) { padding-top: 48px;}
.duokeeper .dk-hero-card.dk-center {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    gap: 0;
    position: relative;
    justify-content: flex-end;
}

/* 캐릭터 이미지 원 위로 */
.duokeeper .dk-hero-card.dk-center .dk-card-img {
    position: absolute; z-index: 1;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    margin: 0 auto;
}
.duokeeper .dk-hero-card.dk-center .dk-card-name,
.duokeeper .dk-hero-card.dk-center .dk-only-badge,
.duokeeper .dk-hero-card.dk-center .dk-ratio {
    position: relative; z-index: 1;
}
.duokeeper .dk-hero-card.dk-center .dk-ratio {
    font-size : var(--font-size-st1);
    font-weight: 700;
    color: var(--main-color6);
}
.duokeeper .dk-hero-card.dk-center .dk-ratio small {
    font-size : var(--font-size-sm); color: var(--main-color6); display: block;    word-break: keep-all;
}
.duokeeper .dk-hero-card .dk-card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size : var(--font-size-desc);
    line-height: 1;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 100px;
}
.duokeeper .dk-hero-card:nth-child(1) .dk-card-badge { background: var(--main-color2); color: #fff; }
.duokeeper .dk-hero-card:nth-child(3) .dk-card-badge { background: var(--main-color4); color: #fff; }
.duokeeper .dk-hero-card:nth-child(3) {    border: 2px solid var(--main-color4);}
.duokeeper .dk-hero-card .dk-card-img {     width: 42%;
    object-fit: contain;
    object-position: center;
    margin: 0 auto 5.6px; }
.duokeeper .dk-hero-card:nth-child(3) .dk-card-img {     width: 60%;}
.duokeeper .dk-centerbox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 900px;
    aspect-ratio: 1 / 1;
    margin-bottom: 18px;
    position: relative;
    box-shadow: 0px 12px 36px 0px #C1E1FF;

}
.duokeeper .dk-circle-outer {
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px dashed rgba(150,200,255,0.5);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}
.duokeeper .dk-circle-inner {
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.8);
    background: transparent;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}
/* 그라데이션 보더 원 — ::before로 구현 */
.duokeeper .dk-centerbox::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 100%; height: 100%;
    border-radius: 50%;
    background: linear-gradient(270deg, #FF9E00 0%, #65B7FF 100%);
    padding: 2px; /* 보더 두께 */
    -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: 0;
    pointer-events: none;
}

/* 반투명 흰 원 (안쪽) */
.duokeeper .dk-centerbox::after {
    content: '';
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%; height: 90%;
    border-radius: 50%;
    background: #FFFFFF;
    z-index: 0;
    pointer-events: none;
    border: 1px solid #11231F1A;
}
.duokeeper .dk-centerbox .dk-center-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: calc(100% + 46px);
    height: 43%;
    background: linear-gradient(270deg, rgba(255, 158, 0, 0.28) 0%, rgba(101, 183, 255, 0.28) 100%);
    z-index: 0;
}
.duokeeper .dk-hero-card .dk-card-name { font-size : var(--font-size-st2); font-weight: 800; color: var(--font-color2);line-height: 1; }
.duokeeper .dk-hero-card .dk-card-role { font-size: var(--font-size-base); color: var(--main-color2);font-weight: 600;  line-height: 1; }
.duokeeper .dk-hero-card:nth-child(3) .dk-card-role { color: var(--main-color4); }
.duokeeper .dk-hero-card .dk-only-badge {
    color: #65B7FF;
    font-size: var(--font-size-base);
    font-weight: 600;
}
.duokeeper .dk-hero-card .dk-ratio {
    font-size : var(--font-size-h3); font-weight: 900;
    color: var(--main-color); line-height: 1;
}
.duokeeper .dk-hero-card .dk-ratio small {
    font-size : var(--font-size-sm); font-weight: 400;
    color: #888; display: block; margin-top: 3px;letter-spacing: -3%;
}
.duokeeper .dk-hero-card ul {
    text-align: left; width: fit-content;
    display: flex; flex-direction: column; gap: 5px; margin-top: 6px;
}
.duokeeper .dk-hero-card ul li {
    font-size: var(--font-size-base);
    color: var(--font-color);
    line-height: 1.5;
    padding-left: 24px;
    position: relative;
    letter-spacing: -3%;
    font-weight: 500;
}
.duokeeper .dk-hero-card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px; height: 16px;
    /*background: url("/pclplus/img/ico_chk1.png") no-repeat center / contain;*/
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M7 12L10.5 15.5L17 9' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='12' fill='%232AA570' mask='url(%23m)'/%3E%3C/svg%3E") center/contain no-repeat;
}
.duokeeper .dk-hero-card:last-child ul li::before {

    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M7 12L10.5 15.5L17 9' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='12' fill='%23FBB03B' mask='url(%23m)'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 히어로 버튼 */
.duokeeper .dk-hero-btns {
    display: flex; gap: clamp(8px, 0.8vw + 4px, 12px);
    margin: clamp(15px, 2vw + 10px, 30px) auto clamp(17px, 2.2vw + 12px, 34px);
    flex-wrap: wrap; justify-content: center;
}
.duokeeper .dk-hero-btns .dk-btn-p,.duokeeper .dk-hero-btns .dk-btn-o,
.duokeeper .dk-cta-btns .dk-cta-p,.duokeeper .dk-cta-btns .dk-cta-o{
    padding: clamp(12px, 1vw + 8px, 17px) clamp(18px, 1.8vw + 12px, 30px);
    border-radius: 10px;
    font-size : var(--font-size-desc);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--boder-color);
    transition: background .2s, transform .15s;
}
.duokeeper .dk-hero-btns .dk-btn-p,.duokeeper .dk-cta-btns .dk-cta-p {background: var(--main-color6); color: #fff;}
.duokeeper .dk-hero-btns .dk-btn-o,.duokeeper .dk-cta-btns .dk-cta-o{background: #fff; color: var(--font-color);}
.duokeeper .dk-hero-btns .dk-btn-p:hover,.duokeeper .dk-cta-btns .dk-cta-p:hover { background: var(--main-color); transform: translateY(-1px); }
.duokeeper .dk-hero-btns .dk-btn-o:hover,.duokeeper .dk-cta-btns .dk-cta-o:hover { background: #f5f5f5; transform: translateY(-1px); }

/* KPI 4개 */
.duokeeper .dk-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%; max-width: 824px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0px 0px 20px 0px #2F7FD433;
    overflow: hidden;
    margin: 21px auto;
}
.duokeeper .dk-kpi-item {
    padding: 18px 8px; text-align: center;
    border-right: 1px solid #eee;
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
}
.duokeeper .dk-kpi-item:last-child { border-right: none; }
.duokeeper .dk-kpi-item img { width: clamp(36px, 2.5vw + 22px, 56px); height: clamp(36px, 2.5vw + 22px, 56px); object-fit: contain; margin-bottom: 2px; }
.duokeeper .dk-kpi-item .dk-kn { font-size : var(--font-size-pt);
    font-weight: 800;
    color: var(--main-color6);
    line-height: 1.5; }
.duokeeper .dk-kpi-item .dk-kl { font-size : var(--font-size-desc);
    font-weight: 400;
    line-height: 1;
    color: var(--font-color);
    margin-top: 2px;
    letter-spacing: -3%;}

/* ─── 섹션2: 설계하고, 관감하고 ─── */
.duokeeper .dk-sec2 { background: #fff; padding: 80px 0; width: 100%;  max-width: 1200px;  margin: 0 auto;}
.duokeeper .dk-sec2 .dk-wrap{display: flex;flex-direction: column;align-items: flex-start;gap: 16px;}
.duokeeper .dk-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(40px, 3vw + 25px, 53px);

}

.duokeeper .dk-proc-item {
    display: flex; flex-direction: column;
    align-items: flex-start; text-align: left;
    gap: 16px; position: relative; z-index: 1;
    background: #FFFFFF;
    border: 1px solid var(--boder-color);
    padding: 26px 22px;
    border-radius: 22px;
    position: relative;
}
.duokeeper .dk-proc-item::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -48px;
    content: '';
    width: clamp(28px, 2vw + 18px, 40px);
    height: clamp(28px, 2vw + 18px, 40px);
    display: block;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%2319436A'/%3E%3Cpath d='M13 20H27M22 15L27 20L22 25' stroke='white' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
    z-index: 0;
    transform: translateY(-50%);
}
.duokeeper .dk-proc-item:last-child::before {
    display: none;
}
.duokeeper .dk-proc-ico {
    width: clamp(40px, 3vw + 26px, 60px);
    height: clamp(40px, 3vw + 26px, 60px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.duokeeper .dk-proc-ico img { width: 100%; height: 100%; object-fit: contain; }
.duokeeper .dk-proc-tag {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--main-color6);
    background: #EAF5FF;
    padding: 6px 12px;
    border-radius: 100px;
    letter-spacing: .85px;
    white-space: nowrap;
}
.duokeeper .dk-proc-item:nth-child(2) .dk-proc-tag { color: var(--main-color4); background: #FFF4E2;}
.duokeeper .dk-proc-item:nth-child(3) .dk-proc-tag { color: var(--main-color2); background: #EEFFF8;}
.duokeeper .dk-proc-item:nth-child(4) .dk-proc-tag { color: #E85D3D; background: #FFF2EF;}
.duokeeper .dk-proc-item h3 {
    font-size : var(--font-size-desc);
    font-weight: 700;
    color: var(--font-color2);
    line-height: 1.5;
    margin: 0;
}
.duokeeper .dk-proc-item p {
    font-size : var(--font-size-list);
    font-weight: 400;
    color: #575757;
    line-height: 1.6;
    letter-spacing: -4%;
    margin: 0;
    word-break: keep-all;
}

/* ─── 섹션3: 설계 vs 관리 ─── */
.duokeeper .dk-sec3 {
    background: url('/images/main_bg3.png') no-repeat center / cover;
    padding: 80px 0;
}
.duokeeper .dk-cmp-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: stretch;
    margin-top: 40px;
    position: relative;
}

.duokeeper .dk-cmp-card { border-radius: var(--border-radius); padding: clamp(15px, 1.5vw, 32px) clamp(10px, 1.2vw, 28px);    display: flex;  flex-direction: column;  justify-content: space-between; }
.duokeeper .dk-cmp-card.ga  { background: var(--main-color2);}
.duokeeper .dk-cmp-card.mnt { background: var(--main-color5); }
.duokeeper .dk-cmp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.duokeeper .dk-cmp-head img { width: clamp(40px, 3vw + 26px, 60px); height: clamp(40px, 3vw + 26px, 60px); object-fit: contain; }
.duokeeper .dk-cmp-head span{font-size : var(--font-size-st2); font-weight: 700; font-family: var(--font-style2); color: #FFFFFF;}
.duokeeper .dk-cmp-head span.small { font-size : var(--font-size-sm); font-weight: 700; color: #5FD4B4; }
.duokeeper .dk-cmp-card.mnt  .dk-cmp-head span.small {color: #FFE8C3;}
.duokeeper .dk-cmp-head > div{display: flex;flex-direction: column;gap: 5px;}
.duokeeper .dk-cmp-card ul { display: flex; flex-direction: column; gap: 14px; }
.duokeeper .dk-cmp-card ul li{border: 1px solid #FFFFFF20;
    border-radius: 10px;
    padding: clamp(7px, 0.8vw + 6px, 14px) clamp(8px, 1vw + 8px, 16px);
    background: #FFFFFF10;}
.duokeeper .dk-cmp-card ul li .dk-cl-title { font-size : var(--font-size-desc); font-weight: 800; color: #fff; line-height: 1.5; margin-bottom: 6px; }
.duokeeper .dk-cmp-card ul li .dk-cl-desc { font-size: var(--font-size-base); color: #fff; line-height: 1.5; font-weight: 400; }
.duokeeper .dk-vs {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size : var(--font-size-h3);
    font-weight: 900;
    color: var(--font-color2);
    box-shadow: 0px 8px 24px 0px #0000004D;
    position: absolute;
    top: calc((100% - 52px) / 2);
    left: calc((100% - 52px) / 2);
}

/* ─── 섹션4: 팀코칭 서비스 ─── */
.duokeeper .dk-sec4 { background: #EAF5FF;
    padding: 80px 0;
    background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.2) 75.48%,
            rgba(90, 176, 255, 0.2) 100%
    ), #EAF5FF; }
.duokeeper .dk-svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 40px auto 60px;
}
.duokeeper .dk-svc-card {
    background: #fff; border-radius: 14px;
    padding: 26px; border: 1px solid var(--boder-color);
    transition: transform .25s, box-shadow .25s;
}

.best {border: 2px solid var(--main-color6) !important;position: relative;}
.duokeeper .best:before{
    content: '★ 핵심 서비스';
    position: absolute;
    padding: 6px 12px;
    background: var(--main-color6);
    color: #FFFFFF;
    border-radius: 100px;
    font-size: var(--font-size-base);
    font-weight: 800;
    letter-spacing: 0.53px;
    top: -19px;
}
.duokeeper .dk-svc-card:hover {  transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.09); }
.duokeeper .dk-svc-card .dk-sc-num { font-size : var(--font-size-st2);
    font-weight: 700;
    color: #575757;
    letter-spacing: 0.76px;
    display: block;
    margin-bottom: 6px;}
.duokeeper .dk-svc-card .dk-sc-title { font-size : var(--font-size-st2); font-weight: 800; color: var(--font-color2); margin-bottom: 20px; }
.duokeeper .dk-svc-card ul { width: 100%; display: flex; flex-direction: column; gap: 16px;  }
.duokeeper .dk-svc-card ul li{background: #F8F8F8; display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 23px;position: relative;}
.duokeeper .dk-svc-card ul li:before{
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px; height: 12px;
    /*background: url("/pclplus/img/ico_chk1.png") no-repeat center / contain;*/
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M7 12L10.5 15.5L17 9' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='12' fill='%232F7FD4' mask='url(%23m)'/%3E%3C/svg%3E") center/contain no-repeat;
}
.duokeeper .dk-svc-card:nth-child(2) ul li:before{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M7 12L10.5 15.5L17 9' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='12' fill='%232AA570' mask='url(%23m)'/%3E%3C/svg%3E") center/contain no-repeat;}
.duokeeper .dk-svc-card:nth-child(3) ul li:before{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M7 12L10.5 15.5L17 9' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='12' fill='%23FBB03B' mask='url(%23m)'/%3E%3C/svg%3E") center/contain no-repeat;}
.duokeeper .dk-svc-card div { font-size : var(--font-size-sm); font-weight: 400; color: #575757;}
.duokeeper .dk-svc-card ul li div:first-child { color: var(--font-color); font-size: var(--font-size-base); font-weight: 500;   }

/* 통계+진행바 */
.duokeeper .dk-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0px; border-radius: 26px; border: 1px solid var(--boder-color); overflow: hidden;     margin-bottom: 60px;}
.duokeeper .dk-big-stat {
    background: #fff;
    padding: clamp(28px, 3vw + 16px, 52px);
}
.duokeeper .dk-big-stat .dk-sub {
    font-size : var(--font-size-desc);
    font-weight: 800;
    color: var(--main-color2);
    margin-bottom: 16px;
    letter-spacing: 0;}
.duokeeper .dk-big-stat .dk-sub::before {
    content: '— ';
    color: var(--main-color2);
    font-size : var(--font-size-desc);
    line-height: 1.5;
}
.duokeeper .dk-big-stat .dk-bs-num { font-size: clamp(30px, 3.5vw + 23px, 57px); font-weight: 700; line-height: 1; color: var(--main-color2); font-family: var(--font-style2); margin-bottom: 10px; }
.duokeeper .dk-big-stat .dk-bs-num sub { font-size: var(--font-size-base); vertical-align: baseline; font-weight: 400; font-family: var(--font-style);color: #575757; padding-left: 10px; }
.duokeeper .dk-big-stat h3 { font-size: clamp(14px, 1vw + 10px, 18px); font-weight: 800; color: #fff; margin-bottom: 8px; line-height: 1.4; word-break: keep-all; }
.duokeeper .dk-big-stat p { font-size: var(--font-size-base); color: var(--font-color); line-height: 1.5; font-weight: 400; letter-spacing: -3%; word-break: keep-all; }

.duokeeper .dk-prog-box {
    background: #E7F4EE;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: clamp(28px, 3vw + 16px, 52px);
}
.duokeeper .dk-prog-box h4 { font-size: clamp(13px, 0.8vw + 9px, 15px); font-weight: 700; color: var(--font-color); margin-bottom: 20px; }
.duokeeper .dk-dp-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    max-width: 495px;
    background: #fff;
    padding: 13px 18px;
    border-radius: 16px;
}
.duokeeper .dk-dp-row:last-child { margin-bottom: 0; }
.duokeeper .dk-dp-lbl {     font-size : var(--font-size-list);
    color: var(--font-color2);
    font-weight: 700;
    line-height: 1;}
.duokeeper .dk-dp-track { height: 6px; background: #eee; border-radius: 4px; overflow: hidden; }
.duokeeper .dk-dp-fill { height: 100%; border-radius: 4px; width: 0; }
.duokeeper .dk-dp-fill.c1 { background: #0E7D62; }
.duokeeper .dk-dp-fill.c2 { background: #7B5FFF; }
.duokeeper .dk-dp-fill.c3 { background: #C98C14; }
.duokeeper .dk-dp-fill.c4 { background: #2F7FD4; }
.duokeeper .dk-dp-fill.c5 { background: #E85D3D; }
.duokeeper .dk-dp-pct { font-size : var(--font-size-list); font-weight: 700; color: #0E7D62; text-align: right; }
.duokeeper .dk-dp-pct.c2 {color: #7B5FFF;}
.duokeeper .dk-dp-pct.c3 {color: #C98C14;}
.duokeeper .dk-dp-pct.c4 {color: #2F7FD4;}
.duokeeper .dk-dp-pct.c5 {color: #E85D3D;}
.duokeeper .dk-dp-fill {

    transition: width 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.duokeeper .center { text-align: center; }
.duokeeper .center h2{ font-size: clamp(28px, 3vw + 22px, 52px); font-weight: 700; color: var(--font-color); font-family: var(--font-style2); line-height: 1.15; letter-spacing: -.83px; margin-bottom: 12px; word-break: keep-all; }
.duokeeper .center h2 strong,.duokeeper .center h3 strong{ color: var(--main-color); }
.duokeeper .center p { font-size : var(--font-size-desc); color: var(--font-color); line-height: 1; margin-bottom: 38px; letter-spacing: -3%; font-weight: 400; }
.duokeeper .center p.small {font-size: var(--font-size-base); font-weight: 400; line-height: 1; letter-spacing: 0; color: #57575750;}
.duokeeper .dk-cta-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 21px;}


/* ─── 섹션6: 요금제 ─── */
.duokeeper .dk-sec6 { background: #F5F8FC; padding: 80px 0; }
.duokeeper .dk-plan-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 40px;  margin-bottom: 15px;}
.duokeeper .dk-plan-card {
    background: #fff; border-radius: var(--border-radius);
    padding: 30px 26px; border: 1px solid var(--boder-color);
    display: flex; flex-direction: column; gap: 22px;
    transition: transform .25s, box-shadow .25s;
}
.duokeeper .dk-plan-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.09); }
.duokeeper .dk-plan-card.best { border-color: var(--main-color6);  box-shadow: 0px 18px 48px 0px #DDEFFF;}
.duokeeper .dk-plan-card.best::before {
    content: '★ 주력 상품';
    left: 50%; transform: translateX(-50%);
    background: var(--main-color6); color: #fff;
}
.duokeeper .dk-plan-card .dk-pl-type { font-size : var(--font-size-st1); font-weight: 900; letter-spacing: 0.4px; text-transform: uppercase; color: var(--main-color2); font-family: var(--font-style2);     padding-bottom: 5px;}
.duokeeper .dk-plan-card.best .dk-pl-type { color: var(--main-color6); }
.duokeeper .dk-plan-card:last-child .dk-pl-type {color: var(--main-color4);}
.duokeeper .dk-plan-card .dk-pl-name { font-size: var(--font-size-base); font-weight: 800; color: #575757; line-height: 1;}
.duokeeper .dk-plan-card .dk-pl-desc { font-size : var(--font-size-sm); color: #888; }
.duokeeper .dk-plan-card .dk-pl-price { padding-top: 20px; }
.duokeeper .dk-plan-card .dk-pl-price strong { display: block; font-size : var(--font-size-pt); font-weight: 800; color: var(--font-color2); line-height: 1; margin-bottom: 2px; letter-spacing: -1.06px;font-family: var(--font-style2);}
.duokeeper .dk-plan-card .dk-pl-price small { font-size : var(--font-size-sm); color: #888; font-family: var(--font-style);}
.duokeeper .dk-plan-card .dk-pl-feats { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.duokeeper .dk-plan-card .dk-pl-feats li { font-size : var(--font-size-list); color: #555; padding-left: clamp(16px, 1.5vw + 10px, 26px); position: relative; line-height: 1.5; }
.duokeeper .dk-plan-card .dk-pl-feats li::before {
    content: '';
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: clamp(12px, 1vw + 8px, 17px); height: clamp(12px, 1vw + 8px, 17px);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23E6F3FF'/%3E%3Cpath d='M7 12L10.5 15.5L17 9' fill='none' stroke='%2319436A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.duokeeper .dk-plan-card.best .dk-pl-feats li::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2319436A'/%3E%3Cpath d='M7 12L10.5 15.5L17 9' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.duokeeper .dk-plan-card .dk-pl-btn {
    display: block; text-align: center;
    background: #FFFFFF; color: var(--font-color2);
    padding: clamp(10px, 0.8vw + 6px, 14px) clamp(9px, 0.7vw + 5px, 13px); border-radius: 10px;
    font-size : var(--font-size-desc); font-weight: 700;
    transition: background .2s;
    border: 1px solid #9DB7CF;
}
.duokeeper .dk-plan-card .dk-pl-box{
    background: #F8F8F8;
    padding: 10px 14px;
    border-radius: 10px;
    font-size : var(--font-size-sm);
    font-weight: 500;
    line-height: 1;
    margin-bottom: 18px;
}
.duokeeper .dk-plan-card:first-child .dk-pl-btn:hover { background: var(--main-color2); color: #FFFFFF; }
.duokeeper .dk-plan-card:last-child .dk-pl-btn:hover { background: var(--main-color4); color: #FFFFFF; }
.duokeeper .dk-plan-card.best .dk-pl-btn:hover { background: var(--main-color3); }
.duokeeper .dk-plan-card.best .dk-pl-btn { background: var(--main-color6); color: #FFFFFF; }
.duokeeper .dk-plan-card.best .dk-pl-btn:hover { background: var(--main-color); }
.duokeeper .dk-plan-quote {
    margin-top: 80px;

}
.duokeeper .dk-plan-quote h3{
    font-size : var(--font-size-h3);
    font-weight: 700; color: var(--font-color); font-family: var(--font-style2); line-height: 1.15; letter-spacing: -.83px; margin-bottom: 16px; word-break: keep-all;

}
.duokeeper .dk-plan-quote small{
    font-size: var(--font-size-base); font-weight: 400; line-height: 1; color: #575757;
}
/* ═══════════════════════════════════════════
   RESPONSIVE — max-width: 1440px
═══════════════════════════════════════════ */
@media (max-width: 1440px) {
    #header .gnb_wrap .gnb-menu {
        padding: 0;
    }
}
/* ═══════════════════════════════════════════
   RESPONSIVE — max-width: 1024px
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    #header .m_gnb_wrap .m_menu .sp_ui:before {
        content: "";
        display: block;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M8,12 L40,12' fill='none' stroke='%23002050' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M8,24 L40,24' fill='none' stroke='%23002050' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M8,36 L40,36' fill='none' stroke='%23002050' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    #header .m_gnb_wrap .m_menu .sp_ui{
        font-size: 0;
        height: 100%;
        line-height: 1;
    }
    #header .area_top ul,#header .gnb_wrap {
        display: none;
    }
    #header .m_gnb_wrap {
        top: 20px;
    }
    #header .m_gnb_wrap .menu li.active > button{
        color: var(--main-color6);
        border-bottom: 2px solid var(--border-gray);
    }
    #header .m_gnb_wrap .menu li button {
        background: var(--main-color6);
        border-bottom: 2px solid var(--border-gray);
    }
    #header .m_gnb_wrap .menu {
        background: var(--main-color6);
    }
    .duokeeper #gnb .gnbNew{gap: 16px}
    .gnbNew > ul > li{
        padding: 10px 16px 0px;
    }
    .duokeeper .duokeeper-hero .container { gap: 24px; }
    .duokeeper .duokeeper-hero-right { width: 380px; }
    .duokeeper .duokeeper-hero-left > p { white-space: normal;}
    .duokeeper .hero-pills {gap: clamp(10px, 1.5vw, 24px);}
    .duokeeper .duokeeper-hero-left h2 { font-size : var(--font-size-pt); }
    .duokeeper .duokeeper-features-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .duokeeper .duokeeper-process-steps { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .duokeeper .duokeeper-footer .footer-right{
        gap: 20px;
    }

    .duokeeper .duokeeper-footer .footer-nav-group h4, .duokeeper-footer .footer-nav-group ul li {
        margin-bottom: 20px;
    }
    .duokeeper .duokeeper-footer .footer-nav-group.info{
        gap: 10px;
    }
}
/* ═══════════════════════════════════════════
   RESPONSIVE — max-width: 980px (모바일)
═══════════════════════════════════════════ */
@media (max-width: 980px) {
    .duokeeper #gnbTop{
        display: none;
    }
    .duokeeper #gnb .container{
        justify-content: flex-start;
        width: auto;
    }
    .duokeeper #rqX{
        right: 0px;
        left: auto;
    }
    .duokeeper #gnbTop .gnb-top-btn,.duokeeper #gnb .gnb-right{
        display: none;
    }
    .duokeeper #gnbTop .gnb-top{
        justify-content: center;
    }
    .duokeeper .ico.top_allmenu  {
        width: 48px;
        height: 48px;
        position: absolute;
        top: 20px;
        right: 12px;
        background-image: unset;
    }
    .duokeeper .ico.top_allmenu svg {
        width: 100%;
        height: 100%;
    }

    .duokeeper .pc {
        display: none;
    }

    .duokeeper .dk-hero-cards { max-width: 100%; }
    .duokeeper .dk-hero-card.dk-center { transform: none; }
    .duokeeper .dk-svc-grid, .duokeeper .dk-plan-grid { grid-template-columns: 1fr; }
    .duokeeper .dk-stat-row { grid-template-columns: 1fr; }
    .duokeeper .dk-process-grid::before { display: none; }


}

/* ═══════════════════════════════════════════
   RESPONSIVE — max-width: 768px (모바일)
═══════════════════════════════════════════ */
@media (max-width: 768px) {
    .duokeeper .mo{
        display: block;
    }
    body.duokeeper{
        --border-radius : 20px;
        --border-radius : clamp(10px, 2.6vw, 20px);
    }
    .duokeeper #gnb h1 a {
        margin-left:0;
        max-width: calc(100% - 50px);
    }
    .duokeeper .ico.top_allmenu {
        width: 48px;
        height: 48px;
        width: clamp(28px, 6.25vw, 48px);
        height: clamp(28px, 6.25vw, 48px);
    }
    /* 헤더 전환 */
    .duokeeper #gnbTop,
    .duokeeper #gnb { display: none; }
    .duokeeper #mo-header,
    .duokeeper #mo-gnb { display: block; }
    .duokeeper #gnbTop .gnb-top > p {
        font-size: var(--font-size-base);
    }


    /* 푸터 */
    .duokeeper .duokeeper-footer { padding: clamp(26px, 8vw, 52px) 0 clamp(16px, 5vw, 32px); }
    .duokeeper .duokeeper-footer .footer-inner {
        flex-direction: column;
        gap: clamp(20px, 5.2vw, 40px);
        margin-bottom: 40px;
        margin-bottom: clamp(20px, 5.2vw, 40px);
    }
    .duokeeper .duokeeper-footer .footer-left,.duokeeper .duokeeper-footer .footer-right{
        width: 100%;
    }
    .duokeeper .duokeeper-footer .footer-right{max-width: 100%;}
    .duokeeper .duokeeper-footer .footer-copy {
        flex-direction: column;
        align-items: flex-end;
        gap: clamp(6px, 1.5vw, 10px);
        font-size: clamp(12px, 2.08vw, 16px);
    }
    .duokeeper .duokeeper-footer .footer-desc{
        font-size: clamp(12px, 2.08vw, 16px);
    }
    .duokeeper .duokeeper-footer .footer-contact{
        font-size: clamp(10px, 1.56vw, 12px);
    }
    .duokeeper .duokeeper-footer .footer-nav-group h4,
    .duokeeper-footer .footer-nav-group ul li,.duokeeper-footer .footer-nav-group ul li a{
        margin-bottom: clamp(10px,2vw,20px);
    }
    .duokeeper .dk-hero-card .dk-card-badge {
        font-size: clamp(10px, 2.6vw, 20px);
    }
    .duokeeper .dk-hero-card .dk-card-name{
        font-size: clamp(11px, 3.12vw, 24px);
    }
    .duokeeper .dk-hero-cards{    gap: clamp(9px, 2.99vw, 23px);}
    .duokeeper .dk-centerbox .dk-center-bar{ width: calc(100% + clamp(23px, 5.98vw, 46px));}
    .duokeeper .dk-hero-card .dk-card-role,.duokeeper .dk-hero-card ul li,.duokeeper .dk-hero-card .dk-only-badge{font-size: clamp(8px, 2vw, 16px);}
    .duokeeper .dk-hero-card ul li{padding-left: clamp(10px, 3.12vw, 24px);}
    .duokeeper .dk-hero-card ul li::before{width: clamp(8px, 2vw, 16px);height: clamp(8px, 2vw, 16px);    }
    .duokeeper .dk-big-stat { grid-template-columns: 1fr; text-align: center; }
    .duokeeper .dk-process-grid { grid-template-columns: 1fr; width: 100%; max-width: 520px;  margin: 0 auto;}
    .duokeeper .dk-proc-item::before {
        top: calc(100% + 8px);
        right: auto;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }
    .duokeeper .dk-hd {
        margin-bottom: 15px;
        text-align: center;
        width: 100%;
    }
    .duokeeper .dk-dp-track {
        height: 5px;
    }
}
/* ═══════════════════════════════════════════
   RESPONSIVE — max-width: 500px (모바일)
═══════════════════════════════════════════ */
@media (max-width: 500px) {
    .duokeeper-stats .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .duokeeper .duokeeper-feature-card .mo{
        display: none;
    }
    .duokeeper .duokeeper-process-steps {
        grid-template-columns: repeat(1, 1fr);
    }
}
/* ═══════════════════════════════════════════
   RESPONSIVE — max-width: 400px (모바일)
═══════════════════════════════════════════ */
@media (max-width: 400px) {
    .duokeeper-partner-card > p{
        white-space: normal;
    }
    .duokeeper .duokeeper-section-hd p br{
        display: none;
    }
    .duokeeper .duokeeper-section-hd p br.mo-show{
        display: block;
    }
    .duokeeper .dk-cmp-head {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
}