@charset "utf-8";

/**************************************************
  서브레이아웃
***************************************************/
.sub-visual{position:relative;height:600px;background:url('/resources/user/eng/images/sub/img_sub_visual_01.jpg') center/cover no-repeat;display:flex;align-items:flex-end;padding-bottom:80px;color:var(--white);overflow:visible!important; padding-top: 80px;}
.sub-visual.sub-visual-02 {background:url('/resources/user/eng/images/sub/img_sub_visual_02.jpg') center/cover no-repeat;}
.sub-visual.sub-visual-03 {background:url('/resources/user/eng/images/sub/img_sub_visual_03.jpg') center/cover no-repeat;}
.sub-visual.sub-visual-04 {background:url('/resources/user/eng/images/sub/img_sub_visual_04.jpg') center/cover no-repeat;}
.sub-visual.sub-visual-05 {background:url('/resources/user/eng/images/sub/img_sub_visual_05.jpg') center/cover no-repeat;}
.sub-visual.sub-visual-06 {background:url('/resources/user/eng/images/sub/img_sub_visual_06.jpg') center/cover no-repeat;}
.sub-visual.sub-visual-07 {background:url('/resources/user/eng/images/sub/img_sub_visual_07.jpg') center/cover no-repeat;}

.sub-visual-inner{display:flex;justify-content:space-between;align-items:flex-end;width:100%;margin:0 auto;}
.visual-title-area{text-align:left;flex:1;}
.visual-title-area h1{font-size:var(--fs-h1);font-weight:700;margin-bottom:20px;line-height:1.1;}
.visual-title-area p{font-size:var(--fs-24);opacity:.9;margin-bottom:50px;font-weight:300; word-break: keep-all;}
.visual-nav-area{display:flex;gap:15px;}
.visual-nav-area .select-box{position:relative;width:300px;z-index: 10;}
.visual-nav-area .select-box .label{width:100%;height:64px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.3);border-radius:32px;color:var(--white);padding:0 55px 0 30px;text-align:left;cursor:pointer;position:relative;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .3s ease;}
.visual-nav-area .select-box .label::after{content:'';position:absolute;right:25px;top:50%;width:10px;height:10px;border-bottom:2px solid var(--white);border-right:2px solid var(--white);transform:translateY(-70%) rotate(45deg);transition:all .3s ease;}
.visual-nav-area .select-box.is-open {z-index: 100;}
.visual-nav-area .select-box.is-open .label{background:rgba(0,0,0,.6);border-color:var(--primary-1);}
.visual-nav-area .select-box.is-open .label::after{transform:translateY(-20%) rotate(225deg);}
.visual-nav-area .select-box .option-list{display:none;position:absolute;top:72px;left:0;width:100%;background:rgba(15,15,15,.95);border-radius:20px;padding:15px 0;box-shadow:0 10px 30px rgba(0,0,0,.5);z-index: 100; max-height: 200px; overflow-y: scroll;}
.visual-nav-area .select-box .option-list li a{display:block;padding: 8px 30px;color:var(--white);font-size:var(--fs-16);transition:all .2s;}
.visual-nav-area .select-box .option-list li a:hover{background:rgba(255,255,255,.1);color:var(--primary-3);}
.visual-nav-area .select-box .option-list li a[target="_blank"]::after {content: ''; display: inline-block; background: url(/resources/user/eng/images/icon/icon_sprite_sub.svg) no-repeat -1079px -2px; width: 16px; height: 16px; margin-top: -4px; vertical-align: middle; margin-left: 10px;}
.mob-dep-03-list li a:hover { font-weight: bold; }

@media screen and (max-width:1200px){
  .sub-visual{height:auto;min-height:450px;padding:110px 0 40px;}
  .sub-visual-inner{flex-direction:column;align-items:flex-start;gap:30px;}
  .visual-nav-area{width:100%;}
  .visual-nav-area .select-box{width:50%;}
}

@media screen and (max-width:768px){
  .visual-title-area h1{font-size:32px; margin-top: 35px !important;}
  .visual-title-area p{ margin-bottom: 30px; line-height:1.4;}
  .visual-nav-area {flex-direction: column; gap: 8px;}
  .visual-nav-area .select-box {width: 100%;}
  .visual-nav-area .select-box .label{height:54px;font-size:16px;}
  .visual-nav-area .select-box .option-list{top:60px;}
}


/* 페이지 유틸 */
.com-page-util { display: flex; position: absolute; top: 20px; right: 0;}
.com-page-util li {display: flex; align-items: center;}
.com-page-util li::after {content: ''; background: var(--gray-300); width: 1px; height: 17px; display: block; margin: 0 15px;}
.com-page-util li:last-child:after {display: none;}
.com-page-util .btn-util {display: inline-block; cursor: pointer; transition: all 0.3s;}
.com-page-util .btn-share {width: 20px; height: 22px; background: url('/resources/user/web/images/icon/icon_sprite_sub.svg') no-repeat -725px -1px;}
.com-page-util .btn-print {width: 20px; height: 20px; background: url('/resources/user/web/images/icon/icon_sprite_sub.svg') no-repeat -779px -2px;}

@media screen and (max-width:1400px){
  .com-page-util {right: 0 }
}
/* 260618 수정 */
@media screen and (max-width:1024px){
    .com-page-util .print {display: none;}
    .com-page-util li {display:flex; align-items:center; justify-content:center; border: 1px solid var(--border); border-radius: 5px; width:2.2rem; height:2.2rem;}
    .com-page-util li::after {display: none;}
}
/* // 260618 수정 */
@media screen and (max-width:768px){
  .com-page-util {position: static; justify-content: flex-end; margin-top: 10px;}
}

.print-header {display : none; }


/* 프린트 */
@media print {

    @page{
        margin-top: 0;
    }
    body * { visibility: hidden;}
    #subContentWrap, #subContentWrap * { visibility: visible;} 
    #subContentWrap { position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 10mm;}

    .print-header {
        display : flex;
        visibility : visible;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid #333;
        padding: 10px 0 8px;
        margin-bottom: 20px;
    }

    .print-header .print-breadcrumb { font-size: 15px; color: #333;}
    .print-header .print-breadcrumb span { font-weight: normal;}
    .print-header .print-breadcrumb span:last-child { font-weight: bold;}
    .print-header .print-breadcrumb span + span::before {content: " > "; color: #999;}
    .print-header .print-date { font-size: 15px; color: #666}

    .com-title-wrap,
    .com-page-util,
    .board-search,
    .com-tab-box,
    .com-pagination,
    .sub-banner,
    .com-btn-box {display: none !important;}
}

@media screen and (max-width:1400px){
  .com-page-util {right: 0 }
}

@media screen and (max-width:768px){
  .com-page-util {position: static; justify-content: flex-end; margin-top: 10px;}
}


/**************************************************
  서브 컨텐츠 공통
***************************************************/
/* 기본 레이아웃 */
.sub-content-wrap {word-break: keep-all; padding: 80px 0 150px 0;}
.sub-content-wrap .sub-box {border: 1px solid var(--border); border-radius: 10px; padding: 50px;}

/* 소제목 타이틀 */
.sub-content-wrap strong.tit {font-size: var(--fs-20); display: block; margin-bottom: 10px;}
.sub-content-wrap strong.tit.blue {color: var(--primary-1);}

/* 포인트컬러 : 블루 */
.sub-content-wrap .point-blue {color: var(--primary-1);}
.sub-content-wrap .point-lb {color: var(--primary-3);}

.sub-content-wrap .noti-tit {position: relative; font-weight: bold; margin-bottom: 10px;display: inline-flex; align-items: center; gap: 10px;}
.sub-content-wrap .noti-tit::before {content: ''; background: url('/resources/user/eng/images/icon/icon_sprite_sub.svg') no-repeat -1110px -366px; width: 20px; height: 21px; display: block; }

@media (max-width: 1024px) { 
  .sub-content-wrap .sub-box {padding: 24px;}
}

/* 서브 그리드 */
.sub-list-grid { display: grid; gap: 24px; }
.sub-list-grid.col-2 { grid-template-columns: repeat(2, 1fr);}
.sub-list-grid.col-3 { grid-template-columns: repeat(3, 1fr);}
.sub-list-grid .sub-list-box { background: var(--white); border: 1px solid var(--border); border-radius: 24px; padding: 30px; min-height: 196px; }
.sub-list-grid .sub-list-box .head {display: flex; gap: 20px; justify-content: space-between; margin-bottom: 24px;}
.sub-list-grid .sub-list-box .head_icon {width: 56px; height: 56px; background: #f1f5f9; border-radius: 16px; display: flex; align-items: center; justify-content: center;}
.sub-list-grid .sub-list-box .head_icon .icon-sprite {width: 28px; height: 25px; background: url(/resources/user/eng/images/icon/icon_sprite_sub.svg) no-repeat; display: block;}
.sub-list-grid .sub-list-box .head_icon .icon-sprite.icon-group {background-position: -431px -364px;}
.sub-list-grid .sub-list-box .head_icon .icon-sprite.icon-target {background-position: -490px -365px;}
.sub-list-grid .sub-list-box .head_icon .icon-sprite.icon-send {background-position:-549px -365px;}
.sub-list-grid .sub-list-box .head_icon .icon-sprite.icon-medal {background-position:-605px -364px;}
.sub-list-grid .sub-list-box .head_icon .icon-sprite.icon-calendar {background-position:-664px -363px;}
.sub-list-grid .sub-list-box .head_icon .icon-sprite.icon-check {background-position:-722px -364px;}
.sub-list-grid .sub-list-box .head_icon .icon-sprite.icon-warning {background-position: -780px -364px;}
.sub-list-grid .sub-list-box .head_icon .icon-sprite.icon-crown{background-position:-836px -364px;}
.sub-list-grid .sub-list-box .head_icon .icon-sprite.icon-like {background-position:-889px -366px;}
.sub-list-grid .sub-list-box .head_icon .icon-sprite.icon-user{background-position: -944px -365px;}
.sub-list-grid .sub-list-box .head_icon .icon-sprite.icon-building{background-position:-998px -365px;}
.sub-list-grid .sub-list-box .head_icon .icon-sprite.icon-doc{background-position: -1392px -365px;}
.sub-list-grid .sub-list-box .head_icon .icon-sprite.icon-bag{background-position: -1448px -364px;}
.sub-list-grid .sub-list-box .head_icon .icon-sprite.icon-pc{background-position: -1213px -364px;}
.sub-list-grid .sub-list-box .head_num {font-size: var(--fs-36); font-weight: bold; color: var(--gray-200); }
.sub-list-grid .sub-list-box .num {color: #999; font-weight: 500;}
.sub-list-grid .sub-list-box .tit { font-size: var(--fs-20); font-weight: 700; margin-bottom: 15px; position: relative; padding-left: 20px; }
.sub-list-grid .sub-list-box .tit::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 5px; background-color: var(--primary-1); border-radius: 5px; }
.sub-list-grid .sub-list-box .desc { color: var(--text-muted);  }
.sub-list-grid .sub-list-box .desc span {color: var(--primary-1);}



@media screen and (max-width: 1024px) {
  .sub-list-grid .sub-list-box { padding: 24px; }
}
@media screen and (max-width: 768px) {
  .sub-list-grid.col-2 { grid-template-columns: 1fr;}
  .sub-list-grid.col-3 { grid-template-columns: 1fr;}
}


/* 페이지 하단 정보 카드 */
.page-manager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 30px 50px; border: 1px solid #e0e4e8; border-radius: 8px; margin-top: 110px; gap: 20px; }
.page-manager-contact { display: flex; align-items: center; gap: 10px 20px; }
.page-manager-title { font-size: var(--fs-20); font-weight: 700; display: flex; align-items: center; gap: 20px; }
.page-manager-contact .page-manager-icon { background: url('/resources/user/eng/images/icon/icon_sprite_sub.svg') no-repeat -54px -127px; width: 48px; height: 48px; }
.page-manager-info { display: flex; align-items: center; gap: 14px; margin-left: 20px; }
.page-manager-info span { color: var(--text-muted); }
.page-manager-phone { display: flex; align-items: center; }
.page-manager-phone::before { content: ""; display: inline-block; width: 8px; height: 8px; background-color: var(--gray-200); border-radius: 50%; margin-right: 14px; }
.page-manager-update {display: flex; align-items: center;}
.page-manager-update span {color: var(--text-muted);}
.page-manager-update .page-manager-icon{ background: url('/resources/user/eng/images/icon/icon_sprite_sub.svg') no-repeat -985px 0;width: 16px; height: 18px; margin-right: 10px;}
.page-manager-date { display: flex; align-items: center; }
.page-manager-date::before { content: ""; display: inline-block; width: 1px; height: 18px; background-color: var(--gray-200); margin: 0 15px; }


@media screen and (max-width: 1024px) { 
  .page-manager {padding: 20px 24px;}
  .page-manager-contact {gap: 10px;}
  .page-manager-title {gap: 10px;}
  .page-manager-info {margin-left: 0;}
}

@media screen and (max-width: 768px) { 
  .page-manager { flex-direction: column; align-items: center; gap: 4px; padding: 16px;} 
  .page-manager-contact .page-manager-icon {transform: scale(.6);}
  .page-manager-title {gap: 0;;}
  .page-manager-phone::before {width: 4px; height: 4px;}
}

@media screen and (max-width: 640px) {
  .page-manager-contact {flex-direction: column; align-items: center; gap: 0;}
  .page-manager-info {gap: 8px; flex-wrap: wrap;}
  .page-manager-phone::before {margin-right: 8px;}
}


/* 단계 리스트 */
.sub-step-list { width: 100%; margin-top: 50px; }
.sub-step-list .step-list { display: flex; justify-content: space-between; position: relative;}
.sub-step-list .step-item { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 12px; }
.sub-step-list.type-01 .step-item::before { content: ''; position: absolute; top: 120px; left: 50%; width: 100%; height: 1px; background-color: var(--border); z-index: 1; }
.sub-step-list.type-01 .step-item:last-child::before { display: none; }
.sub-step-list.type-01 .step-item::after { content: ''; position: absolute; top: 117px; right: -5px; width: 8px; height: 8px; border-top: 1px solid var(--gray-300); border-right: 1px solid var(--gray-300); transform: rotate(45deg); z-index: 1; }
.sub-step-list .step-item:last-child::after { display: none; }
.sub-step-list .icon-area { width: 100px; height: 100px; border-radius: 50%; background-color: var(--surface); display: flex; align-items: center; justify-content: center; margin-bottom: 40px; z-index: 2; }
.sub-step-list .dot { position: absolute; top: 117px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; background-color: var(--gray-300); border-radius: 50%; z-index: 2; }
.sub-step-list .step-badge { background-color: var(--primary-1); color: var(--white); font-size: var(--fs-14); padding: 4px 15px; border-radius: 20px; margin-bottom: 24px; z-index: 2; }
.sub-step-list .step-card { width: 100%; max-width: 330px; min-height: 190px; background-color: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 30px 24px; }
.sub-step-list .card-title { font-size: var(--fs-20); font-weight: 700; margin: 0 0 16px 0; padding-bottom: 16px; border-bottom: 1px solid var(--border); text-align: center; }
.sub-step-list em {font-size: var(--fs-16);}



@media (max-width: 1024px) { 
  .sub-step-list .step-card {padding: 18px 14px;}
  .sub-step-list .step-item {padding: 0 6px;} 
}

@media (max-width: 768px) { 
  .sub-step-list .step-list { flex-direction: column; gap: 30px;}
  .sub-step-list .step-card {max-width: 100% !important; min-height: auto!important;} 
  .sub-step-list .step-item::before, .sub-step-list .step-item::after, .sub-step-list .dot { display: none; } 
  .sub-step-list .icon-area { margin-bottom: 20px; } 

  .sub-step-list.type-01.grid .step-list { display: grid; grid-template-columns: repeat(2, 1fr);  gap: 30px 10px}
  .sub-step-list.type-01.grid .step-item { width: 100%; padding: 0; }

}


/* 아이콘 스프라이트 */
.sub-step-list .icon-sprite { display: block; width: 67px; height: 67px; background-image: url('/resources/user/eng/images/icon/icon_sprite_sub.svg');  background-repeat: no-repeat;}
.icon-sprite.icon-search { background-position: -130px -122px;}
.icon-sprite.icon-mail { background-position: -209px -125px;}
.icon-sprite.icon-scroll-pen { background-position: -289px -124px;}
.icon-sprite.icon-paper-pen { background-position: -370px -117px;}
.icon-sprite.icon-chart { background-position: -460px -124px;}
.icon-sprite.icon-bubble-check { background-position: -550px -124px;}
.icon-sprite.icon-lightbulb { background-position: -640px -124px;}
.icon-sprite.icon-doc-search { background-position: -728px -120px;}
.icon-sprite.icon-appeal-doc { background-position: -810px -123px;}
.icon-sprite.icon-user-check { background-position: -894px -117px;}
.icon-sprite.icon-search-chart { background-position: -985px -130px;}
.icon-sprite.icon-checklist { background-position: -1058px -122px;}

.icon-sprite-sm {width: 22px; height: 22px; background: url(/resources/user/eng/images/icon/icon_sprite_sub.svg) no-repeat; display: block;}
.icon-sprite-sm.icon-gift {background-position: 0 -365px;}
.icon-sprite-sm.icon-scholarship {background-position: -55px -366px;}
.icon-sprite-sm.icon-home {background-position: -109px -365px;}
.icon-sprite-sm.icon-building {background-position: -163px -365px;}
.icon-sprite-sm.icon-leisure {background-position: -216px -366px;}
.icon-sprite-sm.icon-fund {background-position: -271px -366px;}
.icon-sprite-sm.icon-heart {background-position: -325px -365px;}
.icon-sprite-sm.icon-etc {background-position: -378px -365px;}



/* 서브 상단 배너 */
.sub-banner { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 50px 80px; background: var(--primary-5) url('/resources/user/eng/images/sub/bg_banner_pattern.png') no-repeat right center / cover; border-left: 6px solid var(--primary-3); overflow: hidden; position: relative; min-height: 280px }
.sub-banner.type-01 .txt-area { flex: 1; }
.sub-banner.type-01 .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border: 1px solid rgba(14, 204, 230, 0.3); background: rgba(0,0,0,0.2); border-radius: 100px; font-size: var(--fs-14); color: var(--primary-3); margin-bottom: 20px; background:rgba(255,255,255,.05);}
.sub-banner.type-01 .badge::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-3); }
.sub-banner.type-01 .tit { display: block; font-size: var(--fs-36); color: var(--white); font-weight: 700; margin-bottom: 16px; word-break: keep-all; }
.sub-banner.type-01 .desc { font-size: var(--fs-16); color: rgba(255,255,255,0.7); line-height: 1.6; word-break: keep-all; margin: 0; }
.sub-banner.type-01 .visual-area { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sub-banner.type-01 .icon-box { width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; border-radius: 73px;
background: rgba(21, 193, 255, 0.12);
filter: blur(0px);}
.sub-banner.type-01 .icon-box i { background: url(/resources/user/eng/images/icon/icon_sprite_sub.svg) no-repeat; width: 106px; height: 106px; }
.sub-banner.type-01 .icon-box i.icon-recommend {background-position: -1076px -223px;}
.sub-banner.type-01 .icon-box i.icon-idea {background-position: -962px -222px; width: 74px; height: 74px;}
.sub-banner.type-01 .icon-box i.icon-safety {background-position: -825px -219px; width: 92px; height: 117px;}
.sub-banner.type-01 .v-tit { display: block; color: var(--primary-3); font-weight: 700; margin-top: 10px; }
.sub-banner.type-01 .v-desc {  color: rgba(255,255,255,0.6); }

@media screen and (max-width: 768px) {
  .sub-banner { flex-direction: column; padding: 20px; text-align: center; border-left: 0; border-top: 6px solid var(--primary-3); gap: 20px;}
  .sub-banner.type-01 .badge { margin-bottom: 15px; }
  .sub-banner.type-01 .desc br { display: none; }
  .sub-banner.type-01 .visual-area {order: 1;}
  .sub-banner.type-01 .txt-area {order: 2;}
  .sub-banner.type-01 .icon-box {width: auto; height: auto;}
  .sub-banner.type-01 .icon-box i.icon-recommend {transform: scale(.5);}
}


/**************************************************
  0101_AboutKPS_CEOMessage
***************************************************/
.greeting-title { font-size: var(--fs-36); font-weight: 700; margin-bottom: 50px; line-height: 1.3; }

.greeting-banner-wrap { position: relative;}
.greeting-banner { position: relative; overflow: hidden;  margin-bottom: 60px; padding: 70px 620px 70px 115px; background-color: var(--surface); border-radius: 150px; margin-top: 120px; }
.greeting-banner::after { content: ''; position: absolute; top: 25px; right: 10px;  width: 340px; height: 113px;  background: url('/resources/user/eng/images/sub/img_greeting_bg.png') right/contain no-repeat; }
.greeting-banner p { position: relative; z-index: 3; font-size: var(--fs-24); font-weight: 700; }

.greeting-ceo { position: absolute; bottom: 0; right: 260px; z-index: 2; }
.greeting-ceo img { display: block; width: 100%; max-width: 340px; transition: max-width 0.3s ease; }
.greeting-content p { font-size: var(--fs-20); color: var(--text-muted); }
.greeting-sign { display: flex; justify-content: flex-end; align-items: center; margin-top: 60px; }
.greeting-sign p { display: flex; align-items: center; gap: 28px; font-size: var(--fs-24); color: var(--text-muted); flex-wrap: wrap;}

@media (max-width: 1400px) { 
    .greeting-banner { padding: 60px 500px 60px 80px; }
    .greeting-ceo img { max-width: 300px; } 
}
@media (max-width: 1200px) { 
    .greeting-banner { padding: 50px 300px 50px 60px; }
    .greeting-banner::after { width: 250px; height: 82px; }
    .greeting-ceo { right: 160px; }
    .greeting-ceo img { max-width: 280px; } 
}
@media (max-width: 1024px) { 
    .greeting-banner { padding: 50px 100px 50px 60px; }
    .greeting-banner::after { width: 200px; height: 67px; }
    .greeting-ceo { right: 50px; }
    .greeting-ceo img { max-width: 220px; } 
}
@media (max-width: 768px) { 
    .greeting-banner { padding: 30px 100px 30px 40px;}
    .greeting-banner p br {display: none;}
    .greeting-ceo {right: 20px;}
    .greeting-ceo img {max-width: 160px;}
    .greeting-sign img {max-width: 160px;}
}
@media (max-width: 480px) { 
  .greeting-banner { padding: 24px; border-radius: 10px; margin: 0 0 30px 0;}

  .greeting-ceo {display: none;}
  
}


/**************************************************
  0102_AboutKPS_KPSVision
***************************************************/
.sub-content-wrap { background: var(--white); }
.vision-wrap { --vision-cyan: var(--secondary-1); --vision-blue: var(--primary-1); --vision-navy: var(--primary-4); --vision-green: #19b56d; display: flex; flex-direction: column; align-items: center; color: var(--text); }
.vision-wrap section { width: 100%; }
.vision-wrap .theme-cyan { --theme-color: var(--vision-cyan); }
.vision-wrap .theme-blue { --theme-color: var(--vision-blue); }
.vision-wrap .theme-navy { --theme-color: var(--vision-navy); }
.vision-wrap .theme-green { --theme-color: var(--vision-green); }
.vision-statement { position: relative; display: flex; justify-content: center; margin-bottom: 30px; text-align: center; }
.vision-bracket { position: absolute; top: 50%; left: 50%; width: 768px; height: 123px; transform: translate(-50%, -50%); pointer-events: none; }
.vision-bracket::before, .vision-bracket::after { content: ""; position: absolute; top: 0; width: 55px; height: 123px; background: linear-gradient(90deg, #5692E4, #06A78C) left top / 100% 9px no-repeat, linear-gradient(90deg, #5692E4, #06A78C) left bottom / 100% 9px no-repeat, linear-gradient(180deg, #5692E4, #06A78C) left top / 9px 100% no-repeat; }
.vision-bracket::before { left: 0; }
.vision-bracket::after { right: 0; transform: scaleX(-1); }
.vision-statement-text { position: relative; z-index: 1; min-height: 105px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.vision-statement-text span.point-blue {  font-size: var(--fs-24); font-weight: 500; }
.vision-statement-text strong.vision-top-tit { display: block; color: var(--black); font-size: 32px; font-weight: 700; line-height: 1.2;}
.vision-value-section { position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 118px; z-index: 0; }
.vision-value-section::after { content: ""; position: absolute; top: 275px; left: 50%; width: 640px; height: 130px; transform: translateX(-50%); background: url("/resources/user/eng/images/sub/bg_shape_arrow.svg") center top / 100% 100% no-repeat; z-index: 0; }
.vision-section-title { position: relative; z-index: 1; color: var(--primary-1); font-size: var(--fs-24); font-weight: 500; text-align: center; }
.vision-value-list { position: relative; z-index: 1; display: flex; justify-content: center; gap: 20px; }
.vision-value-list li { width: 204px; min-height: 231px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: 1px solid #d7d7d7; border-radius: 8px; background: var(--white); }
.vision-value-list .tit { f text-align: center; }
.vision-value-icon { position: relative; width: 122px; height: 122px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-1); border: 16px solid #E9EEF9; box-shadow: none; flex: 0 0 auto; }
.vision-value-list li:nth-child(even) .vision-value-icon { background: var(--primary-2); }

.vision-value-list li .vision-value-icon i { background: url('/resources/user/eng/images/icon/icon_sprite_sub.svg') no-repeat 1px -47px; width: 44px; height: 45px;}
.vision-value-list li:nth-child(2) .vision-value-icon i {background-position: -64px -47px;}
.vision-value-list li:nth-child(3) .vision-value-icon i {background-position: -128px -47px;}
.vision-value-list li:nth-child(4) .vision-value-icon i {background-position:  -192px -47px;}
.vision-value-list li:nth-child(5) .vision-value-icon i {background-position:  -256px -48px;}

.vision-value-list li .value-tit {font-size: var(--fs-20); text-align: center;}

.vision-pill-title { width: max-content; min-width: 142px; margin: 0 auto 22px; padding: 8px 22px; border-radius: 22px; background: var(--primary-1); color: var(--white); font-size: var(--fs-20); font-weight: 500; text-align: center; }
.vision-goal-section { position: relative; margin-top: 50px; margin-bottom: 98px; }
.vision-goal-section .vision-pill-title { position: relative; z-index: 2; margin-bottom: 56px; }
.vision-goal-list { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vision-goal-list::before { content: ""; position: absolute; top: -28px; left: 11.9%; right: 11.9%; height: 1px; background: #666; }
.vision-goal-list::after { content: ""; position: absolute; top: -56px; left: 50%; width: 1px; height: 28px; background: #666; transform: translateX(-50%); }
.vision-goal-list li { position: relative; min-height: 150px; border: 1px solid #dfe4ec; border-radius: 6px; background: var(--white); text-align: center; }
.vision-goal-list li::before { content: ""; position: absolute; top: -28px; left: 50%; width: 1px; height: 28px; background: #666; transform: translateX(-50%); }
.vision-goal-list strong.vision-goal-head { display: flex; min-height: 48px; align-items: center; justify-content: center; padding: 10px; background: var(--theme-color); color: var(--white); font-size: var(--fs-20); font-weight: 700; border-radius: 5px 5px 0 0; }
.vision-goal-list .vision-goal-label { display: block; margin-top: 24px; color: var(--text-muted); font-size: var(--fs-18); }
.vision-goal-list .vision-goal-value { display: block; margin-top: 5px; margin-bottom: 20px; color: var(--theme-color); font-size: 44px; font-style: normal; font-weight: 800; line-height: 1.2; }
.vision-goal-list .vision-goal-unit { margin-left: 3px; font-size: var(--fs-16); font-weight: 700; }
.vision-strategy-section { position: relative; margin-bottom: 95px; }
.vision-strategy-section::before { content: ""; position: absolute; top: -62px; left: 50%; width: 17px; height: 17px; border-top: 2px solid var(--primary-1); border-left: 2px solid var(--primary-1); transform: translateX(-50%) rotate(45deg); }
.vision-strategy-section::after { content: ""; position: absolute; top: -53px; left: 50%; width: 17px; height: 17px; border-top: 2px solid var(--primary-1); border-left: 2px solid var(--primary-1); transform: translateX(-50%) rotate(45deg); }
.vision-strategy-head { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 38px; }
.vision-strategy-head > div { position: relative; min-height: 80px; display: flex; align-items: center; justify-content: center; padding: 18px 15px; border: 2px solid var(--theme-color); border-radius: 6px; color: var(--theme-color); font-weight: 700; text-align: center; }
.vision-strategy-head span.num { position: absolute; top: -14px; left: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; transform: translateX(-50%); border: 1px solid var(--white); border-radius: 50%; background: var(--theme-color); color: var(--white); font-size: var(--fs-16); font-weight: 700; }
.vision-strategy-list { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vision-strategy-list li { position: relative; padding: 20px; border: 1px dashed var(--theme-color); border-radius: 5px; background: rgba(255,255,255,.95); }
.vision-strategy-list li::before { content: ""; position: absolute; top: -39px; left: 50%; width: 1px; height: 38px; background: var(--theme-color); transform: translateX(-50%); }
.vision-strategy-list li::after { content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; border: 2px solid var(--theme-color); border-radius: 50%; background: var(--white); transform: translateX(-50%); }
.vision-strategy-list .vision-strategy-desc { color: var(--text-muted); font-size: var(--fs-18); }
.vision-principle-section { margin-top: 0; }
.vision-principle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.vision-principle-card { position: relative; min-height: 360px; padding: 50px; border: 1px solid rgba(0,64,152,.18); background: var(--white); }
.vision-principle-card::before { content: ""; position: absolute; inset: 0; border: 8px solid var(--primary); opacity: .08; pointer-events: none; }
.vision-principle-card .vision-principle-head { position: relative; display: flex; align-items: center; gap: 35px; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #dfe4ec; }
.vision-principle-card .vision-principle-head .vision-value-icon { width: 90px; height: 90px; background: var(--white); box-shadow: 0 4px 14px rgba(105,105,105,.2); border: none;}
.vision-principle-card .vision-principle-head .vision-value-icon i { width: 44px; height: 44px; background: url('/resources/user/eng/images/icon/icon_sprite_sub.svg') no-repeat -756px -47px; }
.vision-principle-card:nth-child(2) .vision-principle-head .vision-value-icon i {background-position: -830px -47px;;}
.vision-principle-card:nth-child(3) .vision-principle-head .vision-value-icon i {background-position: -904px -47px;}
.vision-principle-card:nth-child(4) .vision-principle-head .vision-value-icon i {background-position: -978px -47px;}
.vision-principle-card:nth-child(5) .vision-principle-head .vision-value-icon i {background-position: -1053px -48px;}

.vision-principle-head .vision-principle-tit { color: var(--text); font-size: var(--fs-24); font-weight: 700; }
.vision-principle-card .com-txt-list-01 { position: relative; z-index: 1; }
.vision-principle-card .com-txt-list-01 > li { color: var(--text); font-size: var(--fs-18); }


@media screen and (max-width: 1200px) {
    .vision-value-list, .vision-goal-list, .vision-strategy-head, .vision-strategy-list { gap: 12px; }
    .vision-principle-grid { gap: 24px; }
    .vision-principle-card { padding: 36px; }
}

@media screen and (max-width: 1024px) {
    .vision-value-list { flex-wrap: wrap; }
    .vision-value-section { margin-bottom: 80px; }
    .vision-goal-list, .vision-strategy-head, .vision-strategy-list, .vision-principle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vision-value-section::after { top: 513px; }
    .vision-goal-list::before, .vision-goal-list::after, .vision-goal-list li::before, .vision-strategy-section::before, .vision-strategy-section::after, .vision-strategy-list li::before, .vision-strategy-list li::after { display: none; }
    .vision-statement-text strong.vision-top-tit { font-size: 24px; }
}

@media screen and (max-width: 768px) {
    .vision-bracket { width: 100%; max-width: 560px; height: 108px; }
    .vision-bracket::before, .vision-bracket::after { width: 36px; height: 108px; background: linear-gradient(90deg, #5692E4, #06A78C) left top / 100% 6px no-repeat, linear-gradient(90deg, #5692E4, #06A78C) left bottom / 100% 6px no-repeat, linear-gradient(180deg, #5692E4, #06A78C) left top / 6px 100% no-repeat; }
    .vision-value-section::after { top: 440px; width:100%;}
    .vision-statement-text { min-height: 118px; padding-inline: 58px; }
    .vision-statement-text strong { max-width: 430px; margin: 0 auto; font-size: var(--fs-24); line-height: 1.35; white-space: normal; }
    .vision-value-list { max-width: 510px; flex-wrap: wrap; gap: 16px 20px; }
    .vision-value-list li { width: 150px; min-height: 164px; padding: 16px; }
    .vision-goal-list, .vision-strategy-head, .vision-strategy-list, .vision-principle-grid { grid-template-columns: 1fr; }
    .vision-goal-list li { min-height: 132px; }
    .vision-strategy-section { margin-bottom: 70px; }
    .vision-principle-card { min-height: auto; padding: 32px; }
    .vision-principle-head { gap: 18px; margin-bottom: 22px; padding-bottom: 22px; }
    .vision-principle-head .vision-value-icon { width: 72px; height: 72px; }
    .vision-value-section { margin-bottom: 20px; }
    .vision-goal-section { margin-bottom: 40px; }
}

@media screen and (max-width: 480px) {
    .vision-statement-text { padding-inline: 44px; }
    .vision-value-list li { width: 140px; }
    .vision-value-section::after { top: 638px; }
    .vision-statement-text strong { font-size: var(--fs-20); }
    .vision-principle-head { flex-direction: column; align-items: flex-start; }
    .vision-value-list li .value-tit { font-size: 16px; line-height: 1.4; }
}


/**************************************************
  0103_AboutKPS_History
***************************************************/
.history-wrap { position: relative; overflow: hidden; }
.history-wrap .history-list { position: relative; z-index: 2; }
.history-wrap .history-item { position: relative; display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 100px; }
.history-wrap .history-item::before {content: ''; width: 1px; height: 100%; background: var(--gray-300); position:absolute; left: 50%; top: 2rem; transform: translateX(-50%);}
.history-wrap .history-item::after {content: ''; width: 1px; height: 0; background: var(--primary-1); position: absolute; left: 50%; top: 2rem; transition: height .8s ease-out;}
.history-wrap .history-item.on::after {height: 100%;}
.history-wrap .history-item > div { width: calc(50% - 50px); }
.history-wrap .history-img .img-dummy { max-width: 470px; aspect-ratio: 470 / 280; background-color: var(--surface); border-radius: 10px; overflow: hidden; margin-top: 68px; border: 1px solid var(--border); }
.history-wrap .history-img .img-dummy img { width: 100%; }
.history-wrap .history-txt .year { font-size: var(--fs-36); font-weight: 800; margin-bottom: 24px; position: relative; }
.history-wrap .history-txt ul.txt-list > li { display: flex; gap: 12px; margin-bottom: 20px; line-height: 1.8; }
.history-wrap .history-txt ul.txt-list > li .detail {width: calc(100% - 25px);}
.history-wrap .history-txt ul.txt-list > li .detail li.active {font-weight: 600; color: var(--primary-1); text-decoration: underline;}
.history-wrap .history-txt ul.txt-list > li:last-child { margin-bottom: 0; }
.history-wrap .history-txt ul.txt-list > li strong.month { width: 25px; color: var(--primary-1); font-weight: 700; text-align: center;}
.history-wrap .history-txt .year::before { content: ''; position: absolute; width: 13px; height: 13px; background: var(--primary-1); outline: 7px solid rgba(233, 238, 249, 1); border-radius: 50%; top: 21px; z-index: 10; }
.history-wrap .history-item.right { flex-direction: row; }
.history-wrap .history-item.right .history-img {display: flex; justify-content: flex-end;}
.history-wrap .history-item.right .history-img .img-dummy {width: 100%;}
.history-wrap .history-item.right .history-txt .year::before { left: -56px; }
.history-wrap .history-item.left { text-align: right; }
.history-wrap .history-item.left .history-txt ul li { justify-content: flex-end; }
.history-wrap .history-item.left .history-txt .year::before { right: -56px; }

@media screen and (max-width: 1024px) {
    .history-wrap .history-item { flex-direction: column !important; padding-left: 50px; padding-bottom: 70px; }
    .history-wrap .history-item::before { left: 18px; transform: none; }
    .history-wrap .history-item::after { left: 18px; transform: none; }
    .history-wrap .history-item > div { width: 100%; }
    .history-wrap .history-txt { order: 1; }
    .history-wrap .history-txt .year::before {top: 15px;}
    .history-wrap .history-txt ul.txt-list > li strong.month {text-align: left;}
    .history-wrap .history-img { order: 2; margin-top: 24px; max-width: 350px; margin-left: 0; margin-right: auto; }
    .history-wrap .history-img .img-dummy { margin-top: 0; }
    .history-wrap .history-item.left, .history-wrap .history-item.right { text-align: left; }
    .history-wrap .history-item.left .history-txt ul.txt-list > li { flex-direction: row-reverse; }
    .history-wrap .history-item.right .history-txt .year::before, .history-wrap .history-item.left .history-txt .year::before { left: -37px; right: auto; }
}

@media screen and (max-width: 768px) {
    .history-wrap .history-txt .year { margin-bottom: 14px; }
    .history-wrap .history-txt .year::before {top: 11px;}
    .history-wrap .history-txt ul.txt-list > li { flex-direction: column; gap: 4px; margin-bottom: 16px; }
    .history-wrap .history-item.left .history-txt ul.txt-list > li { flex-direction: column-reverse; gap: 0;}
}


/**************************************************
  0104_AboutKPS_Organization&Human
***************************************************/
.organization-wrap { padding-top: 20px; }
.organization-wrap .org-executives { position: relative; display: block; padding-top: 20px; }
.organization-wrap .node-circle { display: flex; align-items: center; justify-content: center; width: 145px; height: 145px; margin: 0 auto; border-radius: 50%; color: #fff; font-size: var(--fs-h4); box-shadow: 0 0 0 20px rgba(22, 75, 184, 0.1); position: relative; z-index: 2; }
.organization-wrap .node-circle.bg-dark-blue { background-color: var(--primary-1); }
.organization-wrap .node-circle.bg-blue { background-color: var(--primary-2); box-shadow: 0 0 0 20px rgba(0, 118, 254, 0.1); }
.organization-wrap .node-box { width: 260px; padding: 12px; background: #fff; border: 1px solid var(--primary-4); border-radius: 50px; color: var(--primary-4); font-weight: 500; font-size: var(--fs-20); text-align: center; white-space: nowrap; }
.organization-wrap .org-ceo-area { width: 280px; margin: 0 auto; text-align: center; }
.organization-wrap .ceo-branch-wrap { display: flex; height: 180px; }
.organization-wrap .ceo-branch-wrap .branch-center { width: 1px; background: #666; height: 100%; position: relative; z-index: 1; }
.organization-wrap .ceo-branch-wrap .branch-left { flex: 1; border-top: 1px solid #666; margin-top: 95px; position: relative; }
.organization-wrap .ceo-branch-wrap .branch-right { flex: 1; border-top: 1px solid var(--gray-300); margin-top: 40px; opacity: 0; }
.organization-wrap .ceo-branch-wrap .node-box { position: absolute; left: -150px; top: -30px; }
.organization-wrap .org-auditor-area { position: absolute; top: 20px; right: 8%; width: 140px; text-align: center; }
.organization-wrap .auditor-branch-wrap { display: flex; flex-direction: column; align-items: center; }
.organization-wrap .auditor-branch-wrap .branch-center { width: 1px; background: var(--gray-300); height: 40px; }
.organization-wrap .org-bridge-line { display: none; }
.organization-wrap .tree-row { display: flex; justify-content: center; position: relative; }
.organization-wrap .tree-row > li { flex: 1; position: relative; text-align: center; padding: 60px 8px 0; }
.organization-wrap .tree-row > li::before, .organization-wrap .tree-row > li::after { content: ''; position: absolute; top: 0; width: 50%; height: 1px; background: #666; }
.organization-wrap .tree-row > li::before { left: 0; }
.organization-wrap .tree-row > li::after { right: 0; }
.organization-wrap .tree-row > li:first-child::before { display: none; }
.organization-wrap .tree-row > li:last-child::after { display: none; }
.organization-wrap .node-title { position: relative; display: block; min-height: 70px; margin: 0 auto;  color: #fff; font-weight: 500; text-align: center; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); width: 100%; line-height: 1.4; display: flex; align-items: center; justify-content: center}
.organization-wrap .node-title::before { content: ''; position: absolute; bottom: 100%; left: 50%; width: 1px; height: 60px; background: #666; transform: translateX(-50%); }
.organization-wrap .node-title.bg-cyan-blue { background: var(--secondary-1); }
.organization-wrap .node-title.bg-teal { background: var(--secondary-2); }
.organization-wrap .node-title a {display: block;}
.organization-wrap .org-headquarters { margin-bottom: 80px; }
.organization-wrap .org-branches { margin-bottom: 35px; }
.organization-wrap .sub-dept-list { margin-top: 15px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.organization-wrap .sub-dept-list li { width: 100%; color: var(--gray-400); }
.organization-wrap .node-item { padding: 10px 0; background: #fff; border: 1px solid var(--gray-300); border-radius: 4px; text-align: center; }

@media screen and (max-width: 1024px) {
  .organization-wrap .node-circle { width: 120px; height: 120px; }
}

@media screen and (max-width: 768px) {
  .organization-wrap { padding: 0; }
  .organization-wrap .org-executives { padding: 0; }
  .organization-wrap .node-circle { width: 80px; height: 80px; font-size: 17px; box-shadow: 0 0 0 8px rgba(22, 75, 184, 0.1); }
  .organization-wrap .node-circle.bg-blue { box-shadow: 0 0 0 8px rgba(0, 118, 254, 0.1); }
  .organization-wrap .node-box { width: auto; padding: 6px 15px; font-size: 15px; }
  .organization-wrap .org-ceo-area { width: 140px; }
  .organization-wrap .ceo-branch-wrap { height: 100px; }
  .organization-wrap .ceo-branch-wrap .branch-left { margin-top: 50px; }
  .organization-wrap .ceo-branch-wrap .node-box { left: -140px; top: -20px; }
  .organization-wrap .org-auditor-area { width: 100px; top: 0px; }
  .organization-wrap .auditor-branch-wrap .branch-center { height: 20px; }
  .organization-wrap .tree-row { flex-direction: column; gap: 25px; font-size: 16px; margin-bottom: 40px; }
  .organization-wrap .tree-row > li { padding: 0; }
  .organization-wrap .tree-row > li::before, .organization-wrap .tree-row > li::after, .organization-wrap .node-title::before { display: none; }
  .organization-wrap .org-branches .tree-row { gap: 14px; }
  .organization-wrap .org-headquarters { margin-bottom: 40px; }
  .organization-wrap .org-branches { margin-bottom: 0; }
  .organization-wrap .org-branches li { padding: 0; }
}

@media screen and (max-width: 480px) {
  .organization-wrap .org-ceo-area { width: 100%; }
  .organization-wrap .org-auditor-area { position: static; width: 100%; }

  .organization-wrap .ceo-branch-wrap { height: auto; }
  .organization-wrap .ceo-branch-wrap .branch-center { display: none; }
  .organization-wrap .ceo-branch-wrap .branch-left { border-top: 0; margin: 0; }
  .organization-wrap .ceo-branch-wrap .branch-right { display: none; }

  .organization-wrap .node-circle { width: 100%; height: auto; min-height: 70px; border-radius: 0; }
  .organization-wrap .node-circle br { display: none; }
  .organization-wrap .node-box { margin-bottom: 40px; margin-top: 20px; width: 100%; padding: 10px 0; }
  .organization-wrap .ceo-branch-wrap .node-box { position: static; }

  .organization-wrap .auditor-branch-wrap .branch-center { display: none; }
}


/**************************************************
  0105_AboutKPS_KPSCi
***************************************************/
.ci-grid-box { position: relative; border: 1px solid var(--border); background-color: #fff; background-image: linear-gradient(#f0f0f0 1px, transparent 1px), linear-gradient(90deg, #f0f0f0 1px, transparent 1px); background-size: 15px 15px; display: flex; align-items: center; justify-content: center; padding: 45px 40px 30px; min-height: 180px; border-radius: 4px; overflow: hidden; flex-wrap: wrap; }
.ci-grid-box.com-grid { gap: 60px; }
.ci-grid-box .emblem-img { width: auto; height: auto; max-width: 90%; max-height: 90%; object-fit: contain; margin: 0 auto;}
.ci-grid-box .size-img { position: absolute; top: 40px; right: 160px; }
.ci-label { position: absolute; top: 0; left: 0; background: #222; color: #fff; padding: 2px 16px; font-size: var(--fs-14); font-weight: 500; z-index: 2; }
.ci-color-box { height: 80px; width: 100%; border-radius: 10px; position: relative; margin-bottom: 20px; }
.ci-color-box.bg-red { background-color: #E60012; }
.ci-color-box.bg-blue { background-color: #004098; }
.ci-color-box.bg-gray { background-color: #888084; }
.ci-color-box .ci-color-name { position: absolute; bottom: 20px; right: 60px; color: var(--white); font-size: var(--fs-16); }
.ci-color-info { background: #fff; }
.ci-color-info .color-type { font-size: var(--fs-16); margin-bottom: 4px; display: block; }
.ci-color-info dd { font-size: var(--fs-16); color: var(--text-muted); }

/* ci 로고박스 */
.sub-brand-section { gap: 40px; width: 100%; }
.sub-brand-section-02 { padding: 50px; border:1px solid var(--border); border-radius: 5px; }
.sub-grid-box { min-height: 250px; border: 1px solid #eaeaea;  background-color: #fff; background-image:  linear-gradient(#f0f0f0 1px, transparent 1px),  linear-gradient(90deg, #f0f0f0 1px, transparent 1px); background-size: 15px 15px; display: flex; align-items: center; justify-content: center;  padding: 20px;}
.sub-grid-box .emblem-img { width: auto; height: auto; max-width: 80%; max-height: 80%; object-fit: contain; }
.sub-brand-desc {margin-top: 16px;}

@media screen and (max-width: 768px) {
  .sub-grid-box { aspect-ratio: auto; min-height: 200px;}
  .sub-grid-box .slogan-text { font-size: var(--fs-24, 24px); }
}


@media screen and (max-width: 1400px) {
  .ci-grid-box .size-img { top: 20px; right: 20px; }
}

@media screen and (max-width: 1024px) {
  .sub-brand-section-02 { padding: 24px; }
  .ci-grid-box { padding: 30px 20px 20px; }
  .ci-grid-box.com-grid { gap: 24px; }
  .ci-grid-box .size-img { top: 5px; right: 5px; }
  .ci-btn-group { flex-wrap: wrap; }
}

@media screen and (max-width: 768px) {
  .sub-grid-box { aspect-ratio: auto; min-height: 200px; }
  .sub-grid-box .slogan-text { font-size: var(--fs-24, 24px); }
  .sub-brand-section-02 { padding: 20px; }
  .ci-grid-box { min-height: 160px; }
  .ci-grid-box.lg, .ci-grid-box.xl { min-height: 180px; }
  .ci-btn-group { flex-direction: column; gap: 8px; }
  .btn-ci-down, .ci-btn-group .com-select.sm { width: 100%; text-align: left; justify-content: center; }
  .ci-grid-box .emblem-img.emblem-img-sm { width: 140px; }
  .ci-color-box { height: 100px; margin-bottom: 0; }
  .ci-color-info { padding: 20px; }
  .ci-color-info .color-name { font-size: var(--fs-20); margin-bottom: 12px; }
  .ci-grid-box.com-grid { gap: 14px; }
}


/**************************************************
  0106_AboutKPS_ContactUs
***************************************************/
.location-wrap .map-area { border-bottom: 1px solid #ddd }
.location-wrap .map-area .root_daum_roughmap .wrap_controllers{ display: none; }
.location-wrap .info-area { padding: 50px; border: 1px solid var(--border); border-top: 2px solid var(--primary-1);}
.location-wrap .company-name { font-size: var(--fs-h4); font-weight: 700;  margin-bottom: 24px; }
.location-wrap .contact-list { display: flex; flex-direction: column; gap: 15px; }
.location-wrap .contact-list li { display: flex; align-items: center; font-size: var(--fs-16)}
.location-wrap .contact-list li .label { font-weight: 700; width: 120px; display: inline-block; vertical-align: middle; position: relative; }
.location-wrap .contact-list li .label::before { content: ''; display: inline-block; width: 20px; height: 18px; margin-right: 8px; vertical-align: middle; background: url('/resources/user/eng/images/icon/icon_sprite_sub.svg') no-repeat -617px -3px;}
.location-wrap .contact-list li .label.tel:before {background-position: -671px -3px;}
.location-wrap .divider { height: 1px; background-color: var(--border); margin:40px 0; }
.location-wrap .transport-info { display: flex; gap: 60px; }
.location-wrap .transport-header { width: 160px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px; }
.location-wrap .transport-header .circle-icon { width: 110px; height: 110px; background: var(--surface); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.location-wrap .transport-header .circle-icon i { background: url('/resources/user/eng/images/icon/icon_sprite_sub.svg') no-repeat -333px -56px; width: 42px; height: 31px; display: block;}
.location-wrap .transport-header .tit { font-weight: 700; }
.location-wrap .transport-routes { flex-grow: 1; display: flex; flex-direction: column; gap: 40px; }
.location-wrap .route-group .station-name { font-size: var(--fs-18); font-weight: 700; margin-bottom: 15px; }
.location-wrap .bus-list { font-size: var(--fs-16); display: flex; flex-direction: column; gap: 12px; }
.location-wrap .bus-list li { display: flex; align-items: center; flex-wrap: wrap; color: var(--text-muted);; }
.location-wrap .bus-badge { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 24px; border-radius: 4px; font-size: 13px; font-weight: 600; color: #fff; margin-right: 12px; }
.location-wrap .bus-badge.bg-green { background-color: #87C700; }
.location-wrap .bus-badge.bg-red { background-color: #FB5852; }
.location-wrap .bus-num { font-weight: 700; margin-right: 8px; }
.location-wrap .separator { color: #ccc; margin-right: 8px; font-size: 12px; }
.location-wrap .bus-desc { color: var(--text-muted)}


@media screen and (max-width: 768px) {
  .location-wrap .contact-list li {flex-direction: column; align-items: flex-start;}
  .location-wrap .contact-list li .txt{padding-left: 28px;}
    .location-wrap .info-area { padding: 30px 20px; }
    .location-wrap .transport-info { flex-direction: column; gap: 30px; }
    .location-wrap .transport-header { width: 100%; flex-direction: row; justify-content: flex-start; text-align: left; }
    .location-wrap .transport-header .circle-icon { width: 60px; height: 60px; }
    .location-wrap .transport-header .circle-icon img { width: 24px; height: 24px; }
    .location-wrap .transport-routes { gap: 30px; }
    .location-wrap .bus-list li { align-items: flex-start; }
}


/**************************************************
  0201 Business
***************************************************/
/* Sub Header*/
#header.is-sub {background: var(--bg); color: var(--text); border-bottom: 1px solid var(--border);}
#header.is-sub .head-logo .logo-white {display: none;}
#header.is-sub .head-logo .logo-basic {display: block;}

#header.is-sub .util-list .lang-list .btn-lang::after {border-color: var(--gray-500);}
#header.is-sub .search-btn .icon {filter: invert(1);}
#header.is-sub .util-list .sitemap-btn .btn-ic > span {background: #222;}

#header.is-sub span.btn-line { background: #222; opacity: .6;}


/* Sub Visual None */
.sub-visual-none {background:none;}

/* Sub Visual Title */
.text-container-frame{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;margin-top:200px;z-index:10;}

.scroll-trigger-container{position:relative;width:100%;height:100vh;overflow:hidden;background:#fff;}
.animation-content-unit{position:absolute;inset:0;width:100%;height:100%;will-change:transform;}

/* Image Trigger Motion */
.img-visual-trigger{position:absolute;left:50%;bottom:-50vh;transform:translateX(-50%);width:min(1500px, 100%);height:min(760px, 72vh);overflow:hidden;border-radius:20px;background:#000;z-index:2;will-change:width,height,bottom,border-radius;}
.img-visual-trigger img{width:100%;height:100%;opacity: 1;object-fit:cover;display:block;transform:scale(1);}


@media (max-width:1200px){
  .text-container-frame{margin-top:100px;}
}
@media (max-width:1024px){
  .img-visual-trigger{height:min(760px,100vh);}
}


/* Sub Breadcrumb */
.sub-visual-none .breadcrumb li {color: var(--gray-400);}
.sub-visual-none .breadcrumb li.home a {background: url('/resources/user/eng/images/icon/icon_sprite_sub.svg') no-repeat -1192px -47px;}
.sub-visual-none .breadcrumb li::after {border-top: 1px solid var(--gray-400);border-right: 1px solid var(--gray-400);}
.sub-visual-none .visual-title-area h1 {color:var(--black);margin-top: 60px;}
.sub-visual-none .visual-title-area p {color: var(--black);}


/* Sub Content Title */
.sub-title-wrap {display: flex;flex-direction: column;gap:30px;margin-top: 60px;}
.sub-title-01 {font-family: var(--font-title);font-size: var(--fs-h3);font-weight: 500;}

.sub-title-business {display: flex;flex-direction: column;gap:30px;text-align: center;margin-top: 50px}
.sub-title-business .sub-title-sm-business {font-size: var(--fs-24); color:var(--gray-400);}
.sub-title-business p {font-size: var(--fs-h4);color:var(--black);font-weight: 500;padding: 0 55px; }
.sub-title-business p strong {color:var(--primary-1)}

@media (max-width:768px){
  .sub-title-business p {padding: 0;}
}

/* Sub Content Gap */
.sub-content-gap {display: flex;flex-direction: column;gap:150px 0;padding: 100px 0 0}
.sub-content-gap.pt0 {padding-top: 0 !important}

@media (max-width:768px){
  .sub-content-gap {gap: 60px 0;padding: 80px 0 0;}
}


/* Sub Numbering List */
.nbr-item-list {margin-top: 60px;}
.nbr-item-list ol {display: grid;grid-template-columns: repeat(2,1fr);grid-template-rows:1fr;align-items: stretch;gap:40px;}
.nbr-item-list.nbr-item-list-row ol {grid-template-columns: repeat(1,1fr);grid-template-rows:1fr;}
.nbr-item-list ol li {display: flex;flex-direction: column;gap:15px;padding:30px;border:1px solid #ddd;border-radius: 10px;}
.nbr-item-list ol li .item-nbr {font-size:var(--fs-18);color:var(--gray-600);}
.nbr-item-list ol li h3 {font-size: var(--fs-20);font-weight: 700;color:var(--primary-1);}
.nbr-item-list ol li p {font-size: var(--fs-18);color:var(--gray-500);}

@media (max-width:768px){
  .nbr-item-list ol {grid-template-columns: repeat(1,1fr);grid-template-rows:1fr;gap: 30px;}
}

/* Mask Image Motion */
.mask-motion{clip-path:inset(0 0 0 100%);will-change:clip-path;overflow:hidden;}
.mask-motion img{display:block;width:100%;max-width: none; height: 100%;min-height:300px; object-fit: cover;transform:scale(1.1);will-change:transform;}

@media (max-width:768px){
  .mask-motion img{min-height:200px;}

}

/* Text Reveal */
.fade-up {opacity:0;transform:translateY(100px);will-change:transform, opacity;}

/* Sub Business Tab */
.sub-business-tab .com-tab-02 li a {min-width: 240px;}

/* Description Box */
.com-info-box.gray {border: 5px solid #E9E9E9;}

 /* 핵심사업 */
.card-flex-container {display: flex;gap: 30px;}
.card-flex-container .left-cluster {display: flex;flex-direction: column;gap: 30px;flex: 3;}
.card-flex-container .flex-row {display: flex;gap: 24px;}
.card-flex-container .item-1 {flex: 2; min-height: 320px;}
.card-flex-container .item-2 {flex: 1; min-height: 320px;}
.card-flex-container .item-4 {flex: 1; min-height: 320px;}
.card-flex-container .item-5 {flex: 1.2; min-height: 320px;}
.card-flex-container .right-cluster {flex: 1.1;display: flex;}
.card-flex-container .item-3 {width: 100%;height: auto;}
.card-flex-container .item-1::before {background-image: url("/resources/user/eng/images/sub/business/img_business_con_040401.jpg");}
.card-flex-container .item-2::before {background-image: url("/resources/user/eng/images/sub/business/img_business_con_040402.jpg");}
.card-flex-container .item-3::before {background-image: url("/resources/user/eng/images/sub/business/img_business_con_040403.jpg");}
.card-flex-container .item-4::before {background-image: url("/resources/user/eng/images/sub/business/img_business_con_040404.jpg");}
.card-flex-container .item-5::before {background-image: url("/resources/user/eng/images/sub/business/img_business_con_040405.jpg");}
.card-flex-container .grid-item {position: relative;border-radius: 20px;overflow: hidden;color: var(--white);}
.card-flex-container .grid-item::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-position: center;background-repeat: no-repeat;z-index: 1;transition: transform 0.4s ease-out;}
.card-flex-container .grid-item:hover::before {transform: scale(1.08);}
.card-flex-container .card-content {position: relative;z-index: 2;padding: 40px;height: 100%;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;}
.card-flex-container .card-title {font-size: var(--fs-36);font-weight: 700;margin-bottom: 24px;}
.card-flex-container .tag-nav {margin-top: auto;}
.card-flex-container .tag-list {display: flex;flex-wrap: wrap;gap: 10px;}
.card-flex-container .tag-link {display: inline-block;border: 1px solid var(--white);padding: 8px 20px;font-size: var(--fs-18);color: var(--white);border-radius: 10px;transition: background-color 0.2s, color 0.2s;}
.card-flex-container .tag-link:hover {background-color: var(--white);color: var(--primary);font-weight: 500;}
.card-flex-container .circle-btn {margin-top: auto;width: 40px;height: 40px;border-radius: 50%;border: 1px solid var(--white);background: transparent;color: var(--white);display: flex;align-items: center;justify-content: center;cursor: pointer;opacity: 0;visibility: hidden;transform: translateY(15px);transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background-color 0.2s;}
.card-flex-container .grid-item:hover .circle-btn {opacity: 1;visibility: visible;transform: translateY(0);}
.card-flex-container .circle-btn:hover {background-color: var(--white);color: var(--primary);}


@media (max-width: 1200px) {
  .card-flex-container {flex-direction: column;gap: 16px;}
  .card-flex-container .left-cluster {gap: 16px;}
  .card-flex-container .flex-row {gap: 16px;}
  .card-flex-container .item-3 {min-height: 320px;}
}
@media (max-width: 768px) {
  .card-flex-container .flex-row {flex-direction: column;}
  .card-flex-container .card-content { padding: 30px 20px;min-height: 320px }
  .card-flex-container .tag-link {padding: 5px 15px;}
}


/* Business Infor Graph */
.process-container {background-color: #F5F8F9;border-radius: 20px;padding:60px 80px;position: relative;}
.process-container .main-title {position: absolute;top: -18px;left: 30px;background-color:var(--primary-4);color: #ffffff;padding:5px 20px;border-radius: 50px;font-weight: 700;font-size: var(--fs-20);}

.process-container .process-main-list {list-style: none;display: flex;align-items: center;justify-content: space-between;gap: 15px;width: 100%;}
.process-container .process-main-item {display: flex;align-items: center;flex-shrink: 0;}
.process-container .step-card {background-color: #ffffff;border: 1px solid #3b82f6;border-radius: 10px;width: 150px;height: 90px;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 8px;}
.process-container .step-num {color:var(--primary-1);font-size:var(--fs-14);}

.process-container .step-name {color: var(--black);font-size:var(--fs-18);font-weight: 700;}
.process-container .rd-group-wrapper {border: 2px dashed #0077FF4D;border-radius: 20px;padding: 50px;position: relative;display: flex;align-items: center;background:var(--white);}
.process-container .rd-group-title {position: absolute;top: -20px;left: 30px;background-color:var(--primary-1);color:var(--white);padding:4px 25px;border-radius: 20px;font-weight: 700;font-size:var(--fs-20);}
.process-container .rd-sub-list {list-style: none;display: flex;align-items: center;gap: 15px;}
.process-container .arrow-next {color: #888888;font-size: 26px;margin: 0 10px;user-select: none;}
.process-container .operation-group {display: flex;flex-direction: column;gap: 8px;flex-shrink: 0;}
.process-container .op-card {color:var(--white);width: 150px;height: 42px;display: flex;align-items: center;justify-content: center;font-weight: 700;font-size:var(--fs-18);border-radius:10px;}
.process-container .op-card.blue    { background-color:var(--primary-4); }
.process-container .op-card.teal    { background-color: var(--secondary-2);}
.process-container .op-card.skyblue { background-color: var(--secondary-1);}

@media (max-width:1400px){
  .process-container .process-main-list {flex-direction: column;}
  .process-container .process-main-list .arrow-next.first {transform: rotate(90deg)}
  .process-container .process-main-list .arrow-next.last {transform: rotate(90deg)}
}

@media (max-width: 960px) {
.process-container {padding: 40px 15px 20px;}
.process-container .main-title {left: 15px;}
.process-container .process-main-list, 
.process-container .rd-sub-list, 
.process-container .process-main-item {flex-direction: column;align-items: center;width: 100%;}
.process-container .rd-group-wrapper {width: 100%;max-width: 250px;padding: 40px 15px 15px;margin: 15px 0;justify-content: center;}
.process-container .rd-group-title {left: 50%;transform: translateX(-50%);white-space: nowrap;}
.process-container .arrow-next {margin:0;transform: rotate(90deg);}
.process-container .operation-group {margin-top: 15px;}
}


/**************************************************
  03 Sustainability
***************************************************/

/* 공통 프레임워크 */
/* 전체 래퍼 및 기본 행 구조 */
.sub-framework { display: flex; flex-direction: column; gap: 24px; width: 100%; font-size: var(--fs-20); }
.sub-framework .sf-row { display: flex; gap: 15px; align-items: stretch; }
.sub-framework .sf-th { width: 188px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 5px; color: #fff; font-size: var(--fs-24); letter-spacing: -0.5px; padding: 24px 10px; transition: .3s; }
.sub-framework .sf-td { flex-grow: 1; }

/* 그리드 */
.sub-framework .sf-grid { display: grid; gap: 15px; height: 100%; }
.sub-framework .sf-grid.col-1 { grid-template-columns: 1fr; }
.sub-framework .sf-grid.col-2 { grid-template-columns: repeat(2, 1fr); }
.sub-framework .sf-grid.col-3 { grid-template-columns: repeat(3, 1fr); }
.sub-framework .sf-grid.col-4 { grid-template-columns: repeat(4, 1fr); }
.sub-framework .sf-grid.col-6 { grid-template-columns: repeat(6, 1fr); }

/* 공통 박스 컴포넌트 (.sf-box) */
.sub-framework .sf-box { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px 16px; border-radius: 6px; font-weight: 500; height: 100%; letter-spacing: -1.5px; }
.sub-framework .sf-box.style-solid { font-size: var(--fs-h4); font-weight: 600; border-radius: 50px; }
.sub-framework .sf-box.style-solid.border-blue { color: #0295CD; border: 2px solid #0295CD; font-size: var(--fs-20); }
.sub-framework .sf-box.style-solid.border-blue-light { border: 5px solid rgba(11, 80, 208, 0.20); color: var(--primary-1); background-color: #fff; }
.sub-framework .sf-box.style-solid.border-blue-light span.point-green { color: var(--secondary-2); }
.sub-framework .sf-box.style-outline { background-color: #fff; border: 2px solid #ddd; font-weight: 600; }
.sub-framework .sf-box.style-outline .com-txt-list-01 {text-align: left; color: var(--text); font-weight: 400;}
.sub-framework .sf-box.style-dashed { background-color: #fff; border: 2px dashed #ddd; color: var(--text); }
.sub-framework .sf-box.style-light-bg { background-color: var(--surface); align-items: flex-start; justify-content: flex-start; text-align: left; padding: 20px; }
.sub-framework .sf-box.style-light-bg-blue { background: #F4F5FB; border-radius: 10px; font-size: var(--fs-24); color: var(--primary-1); }

/* 박스 상단 라벨 (.sf-label) */
.sub-framework .sf-label { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; z-index: 2; white-space: nowrap; }
.sub-framework .sf-label.type-pill { padding: 2px 18px; border-radius: 20px; font-size: var(--fs-16); border: 2px solid var(--white); }
.sub-framework .sf-label.type-circle { width: 24px; line-height: 24px; border-radius: 50%; font-size: var(--fs-16); }

/* 복합 구조 그룹 (.sf-box-group) */
.sub-framework .sf-box-group { width: 100%; display: flex; flex-direction: column; gap: 12px; height: 100%; }
.sub-framework .sf-box-group .sf-box { height: auto; padding: 10px 20px; color: var(--text-muted);  }
.sub-framework .sf-box-group .sf-desc { text-align: center; }

.sub-framework .sf-box.sf-box-row {flex-direction: column; justify-content: flex-start; text-align: left; align-items: flex-start;}
.sub-framework .sf-box .sf-box-tit {background: var(--primary-4); color: var(--white); font-size: var(--fs-20); text-align: center; border-radius: 50px; width: 100%; padding: 8px; margin-bottom: 15px;}

/* 리스트 스타일 (.sf-list) */
.sub-framework .sf-list { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.sub-framework .sf-list li { position: relative; padding-left: 30px; }
.sub-framework .sf-list .num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 0.75rem; font-weight: bold; position: absolute; top: 4px; left: 0; }

/* 색상 유틸리티 */
.sub-framework .bg-gradient { background: linear-gradient(90deg, #0F6ED8 0%, #25B85D 100%); color: #fff !important; border: none !important; }
.sub-framework .bg-blue-1 { background-color: #388CEB; }
.sub-framework .bg-blue-2 { background-color: #0F6ED8; }
.sub-framework .bg-blue-3 { background-color: #034EA2; }
.sub-framework .bg-blue-4 { background-color: #013977; }
.sub-framework .bg-blue-5 { background-color: #0D2259; }
.sub-framework .bg-blue-6 { background-color: #2E3D4E; }
.sub-framework .bg-blue-7 { background-color: #252C35; }
.sub-framework .bg-blue { background-color: #0295CD; color: var(--white); }
.sub-framework .bg-teal { background-color: #029E93; color: var(--white); }
.sub-framework .bg-green { background-color: #12AD71; color: var(--white); }
.sub-framework .border-blue { border-color: #0295CD !important; color: #0295CD; }
.sub-framework .border-teal { border-color: #029E93 !important; color: #029E93; }
.sub-framework .border-green { border-color: #12AD71 !important; color: #12AD71; }
.sub-framework .border-darkblue { border-color: #013977 !important; color: #013977; }
.sub-framework .com-txt-list-03 {font-weight: 400;}

.sub-framework .sf-col { display: flex; flex-direction: column; gap: 15px; }
.sub-framework .sf-box.type-task { flex-direction: column; gap: 12px; width: 100%; align-items: flex-start; padding: 18px 14px; }
.sub-framework .sf-box .com-txt-list-01.com-txt-list-white > li::before {background: var(--white);}

.sub-framework .sf-task-tit { position: relative; padding-left: 26px; font-weight: 700;}
.sub-framework .sf-task-tit .num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: bold; position: absolute; top: 6px; left: 0; }

.sub-framework .sf-task-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.sub-framework .sf-task-list li { font-size: var(--fs-18); color: var(--text-muted, #666); line-height: 1.4; padding-left: 16px; text-indent: -16px; }




@media screen and (max-width: 1200px) {
  .sub-framework .sf-th {width: 140px;}
}

@media screen and (max-width: 1024px) {
  .sub-framework .sf-grid.col-3 { grid-template-columns: repeat(2, 1fr); }
  .sub-framework .sf-grid.col-4 { grid-template-columns: repeat(2, 1fr); }
  .sub-framework .sf-grid.col-6 { grid-template-columns: repeat(2, 1fr); }

  .sub-framework .sf-box {margin-bottom: 16px;}
}

@media screen and (max-width: 768px) {
    .sub-framework { gap: 40px; }
    .sub-framework .sf-row { flex-direction: column; }
    .sub-framework .sf-th { width: 100%; height: auto; padding: 24px; font-size: 22px; font-weight: bold; }
    .sub-framework .sf-row::before {content: ''; border-bottom: 1px dashed var(--gray-400);  margin-bottom: 25px;}
    .sub-framework .sf-row:first-child:before {display:none}
    .sub-framework .sf-grid { grid-template-columns: 1fr !important; }
}


/**************************************************
  0302_Sustainability_MessageFromTheCEO
***************************************************/
.iec-wrap .ceo-intro-top {position: relative; z-index: 0; min-height: 296px; background: url(/resources/user/eng/images/sub/img_ceo_intro_bg_en_01.jpg) center no-repeat; border-radius: 20px 0 20px 0; overflow: hidden; display: flex; flex-direction: column; gap: 20px; padding: 65px 75px;} 
.iec-wrap .ceo-intro-top::after {content: '';background: linear-gradient(90deg, #052663 0%, rgba(5, 38, 99, 0.00) 100%); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1}
.iec-wrap .ceo-intro-top.type-02 {background: url(/resources/user/eng/images/sub/img_ceo_intro_bg_02.jpg) center no-repeat;}
.iec-wrap .ceo-intro-top p {font-size: var(--fs-h4); font-weight: 600; color: var(--white);}
.iec-wrap .ceo-intro-top .icon-wrap {background: url('/resources/user/eng/images/icon/icon_sprite_sub.svg') no-repeat -1214px -214px; width: 60px; height: 49px; display: block;}

.iec-wrap .ceo-intro-content {border: 8px solid var(--surface); padding: 50px; display: flex; gap: 40px; }
.iec-wrap .ceo-intro-content p {flex: 1}
.iec-wrap .ceo-intro-content .ceo-sign {display: block; max-width: 210px; padding-top: 20px; border-top: 1px solid var(--border); margin-top: 30px;}
.iec-wrap .ceo-intro-content .ceo-sign strong.name {display: block; font-size: var(--fs-24);}

.signature-wrap {display: flex;justify-content: flex-end;align-items: baseline;flex-wrap: wrap; gap: 15px;}
.signature-wrap .position {font-size: 18px;color: (var(--gray-400));}


@media (max-width: 1024px) {
  .iec-wrap .ceo-intro-top {padding: 40px; min-height: auto;}
  .iec-wrap .ceo-intro-content {gap: 30px; padding: 24px;}
  
}

@media (max-width: 768px) {
  .iec-wrap .ceo-intro-content {flex-direction: column;}
}


/**************************************************
   0303_Sustainability_SustainabilityManagementCode
***************************************************/
.esg-code-box {border: 1px solid var(--border); border-radius: 10px; padding: 30px; display: flex; flex-direction: column; gap: 20px;}
.esg-code-box li {display: flex; align-items: center; gap: 20px;}
.esg-code-box li span.num {flex-shrink: 0; width: 48px; height: 48px; line-height: 48px; display: block; font-size: var(--fs-16); color: var(--white); background: var(--primary-1); border-radius: 100px; text-align: center;}

@media screen and (max-width: 768px) {
  .esg-code-box {padding: 16px; gap: 10px;}
  .esg-code-box li {gap: 12px;}
  .esg-code-box li span.num {width: 38px; height: 38px; line-height: 38px;}
}


/**************************************************
  0304_Sustainability_ProclamationOfSupportForUnGlobaCompact
***************************************************/
.com-info-box.type-logo {display: flex;align-items: stretch; gap: 40px; }
.com-info-box.type-logo .info-logo {flex-shrink: 0;background-color: var(--gray-100);border-radius: 8px;display: flex;align-items: center;justify-content: center;padding: 30px;}
.com-info-box.type-logo .info-logo img {max-width: 100%;height: auto;}
.com-info-box.type-logo .info-content {flex: 1;}

@media (max-width: 1024px) {
  .com-info-box.type-logo .info-logo {width: 240px;}
}
@media (max-width: 768px) {
  .com-info-box.type-logo {flex-direction: column;align-items: center;gap: 20px;}
  .com-info-box.type-logo .info-logo {width: 100%;}
}



/**************************************************
  0401_Investment_Shareholders&Dividend
***************************************************/
.chartWrap { border: 1px solid var(--gray-200); background: var(--surface); margin-bottom: 60px; padding: 70px 90px 90px 90px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 50px;}
.chartWrap .chart-container { position: relative; width: 100%; max-width: 500px; margin: 0 auto; flex: 1; min-width: 320px; }
.chartWrap .center-logo { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); z-index: 10; pointer-events: none; font-size: var(--fs-h3); font-weight: 900; letter-spacing: -2px; color: #333; }
#shareholderChart { position: relative; z-index: 1; }
.chartWrap .custom-label { position: absolute; z-index: 10; background: #fff; border-radius: 8px; padding: 10px 20px; text-align: center; box-shadow: none; min-width: 110px; transition: all 0.2s; }
.chartWrap .custom-label .tit { font-size: var(--fs-14); margin-bottom: 4px; white-space: nowrap; }
.chartWrap .custom-label .val { font-weight: bold; }
.chartWrap .custom-label.label-4 { border-color: #999 !important; }
.chartWrap .custom-label.label-4 .tit { color: var(--text-muted) !important; }
.chartWrap .custom-label.label-4 .val { color: var(--text-muted) !important; }
.chartWrap .custom-label::before { content: ''; position: absolute; z-index: -1; top: 50%; left: 50%; width: var(--line-length); border-top: 1px dashed #a3a3a3; transform-origin: 0 0; transform: rotate(calc(var(--angle) + 180deg)); }
.chartWrap .custom-legend { display: flex; flex-direction: column; justify-content: center; gap: 20px; background: #fff; padding: 40px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); min-width: 340px;}
.chartWrap .custom-legend .legend-item { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-20); }
.chartWrap .custom-legend .legend-item .left { display: flex; align-items: center; color: var(--text-muted);}
.chartWrap .custom-legend .legend-item i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 12px; }
.chartWrap .custom-legend .legend-item .val { font-weight: 700; font-size: var(--fs-24); color: #000; }
.chartWrap .custom-legend .legend-item .val span.unit { font-size: var(--fs-14); font-weight: 400; margin-left: 2px;}
.shareholder-text {text-align: center;}
.shareholder-text p{display: flex; align-items: center; justify-content: center; gap: 15px; font-size: var(--fs-20); font-weight: 700; margin-bottom: 12px;}
.shareholder-text p span.shareholder-date {font-size: var(--fs-16); color: var(--text-muted); font-weight: 400;}
.shareholder-text strong.shareholder-num {font-size: var(--fs-h3); color:var(--primary-1);}
.shareholder-text strong span.shareholder-unit { color:var(--text);}


@media (max-width: 1200px) {
  .chartWrap { flex-direction: column; gap: 40px; }
  .chartWrap .chart-container { min-width: auto; width: 100%;}
  .chartWrap .custom-legend { min-width: auto; width: 100%; padding: 30px; }

  .chart-scroll-wrap {overflow: hidden; overflow-x: auto;}
}

@media (max-width: 768px) {
  .chartWrap {padding: 24px; gap: 30px;}
  .chartWrap .custom-legend { padding: 24px; }
  .chartWrap .custom-label { display: none !important; }
}



/**************************************************
  0402_Investment_StockQuotes
***************************************************/
.stock-wrap .stock-info-box { font-family: var(--font-basic);
 display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 70px 60px;  border: 1px solid var(--border); border-radius: 4px;}
.stock-wrap .stock-info-box .stock-left {display: flex; flex:1; align-items: center;}
.stock-wrap .stock-info-box .price::before { display:none; margin-right: 6px; font-size:var(--fs-24)}

/* 상승 (빨간색) */
.stock-wrap .stock-info-box.status-up .fluctuation-area dd, 
.stock-wrap .stock-info-box.status-up .price::before, 
.stock-wrap .stock-info-box.status-up .txt-fluctuation::before { content: '▲'; color: #FC4C4E; }

/* 하락 (파란색) */
.stock-wrap .stock-info-box.status-down .fluctuation-area dd, 
.stock-wrap .stock-info-box.status-down .price::before, 
.stock-wrap .stock-info-box.status-down .txt-fluctuation::before { content: '▼'; color: #2962ff; }

/* 변동없음 (회색) */
.stock-wrap .stock-info-box.status-even .fluctuation-area dd, 
.stock-wrap .stock-info-box.status-even .price::before, 
.stock-wrap .stock-info-box.status-even .txt-fluctuation::before { content: '-'; color: var(--gray-300); }

.stock-wrap .main-price-area { padding-right: 30px; border-right: 1px solid var(--border); }
.stock-wrap .main-price-area .price { font-size: var(--fs-36); font-weight: 700; }

.stock-wrap .fluctuation-area { padding: 0 40px; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-20);}
.stock-wrap .fluctuation-area dl { display: flex; align-items: center; gap: 15px; }
.stock-wrap .fluctuation-area dt { width: 220px; }

.stock-wrap .detail-info-area { display: flex; justify-content: space-around; width: 40%; }
.stock-wrap .detail-info-area dl { display: flex; flex-direction: column; align-items: center; gap: 10px;  position: relative; width: 100%; border-right: 1px solid var(--border);}
.stock-wrap .detail-info-area dl:last-child {border-right: 0;}
.stock-wrap .detail-info-area dt { color: var(--text-muted);}
.stock-wrap .detail-info-area dd {font-size: var(--fs-20);}

.stock-wrap .custom-chart-tooltip { background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.stock-wrap .custom-chart-tooltip .date { font-size: 12px; font-weight: 600; margin-bottom: 8px; border-bottom: 1px solid #eee; padding-bottom: 6px; }
.stock-wrap .custom-chart-tooltip .info-row { font-size: 12px; color: #666; margin-bottom: 4px; }

.stock-wrap .stock-red {color:#FC4C4E;}

.stock-wrap .txt-fluctuation {display:flex; align-items:center; gap:6px}
.stock-wrap .txt-fluctuation::before {font-size: var(--fs-16); }

@media screen and (max-width: 1080px) {
  .stock-wrap .stock-info-box {flex-direction: column; padding: 30px;}
  .stock-wrap .fluctuation-area {gap: 0; padding-right: 0;}
  .stock-wrap .detail-info-area {width: 90%;}
  .stock-wrap .detail-info-area dl {gap: 0}
}

@media screen and (max-width: 768px) {
  .stock-wrap .stock-info-box {padding: 20px;}
  .stock-wrap .stock-info-box .stock-left {flex-direction: column;}
  .stock-wrap .main-price-area {border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 14px; padding-right: 0; margin-bottom: 14px; width: 100%; text-align: center;}
  .stock-wrap .fluctuation-area {padding-left: 0;}
  .stock-wrap .fluctuation-area dt {width: auto}
  .stock-chart-area {width: 700px;}
  

}

@media screen and (max-width: 560px) {
  .stock-wrap .fluctuation-area {font-size: 16px; padding-left: 20px;}
  .stock-wrap .detail-info-area {width: 100%; flex-wrap: wrap; gap: 10px;}
  .stock-wrap .detail-info-area dl {width: 45%; border:none}
  .stock-wrap .detail-info-area dt {font-size: 15px;}
  .stock-wrap .detail-info-area dd {font-size: 16px;}
 
}


/**************************************************
  050101_Technology_Training_Overview
***************************************************/
.training-intro-box {margin-bottom: 70px; padding: 28px 40px; border: 1px solid #e1e5ee; border-radius: 10px; color: var(--text); font-size: var(--fs-18); line-height: 1.7; text-align: center; word-break: keep-all;}
.training-section:last-child {margin-bottom: 0;}
.training-system {width: 100%;}
.training-system-vision {display: flex; align-items: center; justify-content: center; min-height: 80px; margin-bottom: 40px; border-radius: 999px; background: linear-gradient(90deg, #0f6ed8 0%, #25b85d 100%); color: var(--white); font-size: 28px; font-weight: 800; line-height: 1.3; text-align: center; word-break: keep-all; width: 100%; padding:16px;}
.training-system-row {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; min-height: 162px; border-top: 1px solid #ccc; width:100%;}
.training-system-row strong {display: inline-flex; align-items: center; justify-content: center; min-width: 160px; min-height: 42px; padding: 6px 24px; border-radius: 999px; background: var(--secondary-1); color: var(--white); font-size: var(--fs-20); font-weight: 800;}
.training-system-row p {display: block; /*width: 357px;*/ max-width: 100%; color: var(--black); font-size: var(--fs-20); font-weight: 400; line-height: 28px; letter-spacing: -0.6px; text-align: center; word-break: keep-all;}
.training-system-ace {min-height: 122px; border-top: 0;}
.training-system-career {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 27px; padding: 40px 0; border-top: 1px solid #ccc; width:100%;}
.training-system-career span {display: flex; align-items: center; justify-content: center; min-height: 80px; padding: 18px 20px; border: 2px solid var(--secondary-1); border-radius: 4px; color: #0072bc; font-size: var(--fs-20); font-weight: 800; line-height: 1.35; text-align: center; word-break: keep-all;}
.training-system-career span:nth-child(3) {border-color: #00a889; color: #009e93;}
.training-system-career span:nth-child(4) {border-color: #1bb56e; color: #16a663;}
.training-system-career em {margin: 0 6px; color: #c1c7d0; font-style: normal;}
.training-system-arrow {width: 640px; max-width: 100%; height: 130px; margin: -28px auto -10px; background: url("/resources/user/eng/images/sub/bg_shape_arrow.svg") center / 100% 100% no-repeat; transform: scaleY(-1);}
.training-hrd {display: grid; gap: 15px; width:100%;}
.training-hrd-row {display: grid; grid-template-columns: 118px 1fr; gap: 15px; align-items: stretch;}
.training-hrd-title {display: flex; align-items: center; justify-content: center; min-height: 64px; border-radius: 5px; background: #0F6ED8; color: var(--white); font-size: var(--fs-16); font-weight: 500; line-height: 1.35; text-align: center;}
.training-hrd-row:nth-child(2) .training-hrd-title {background: #034ea2;}
.training-hrd-row:nth-child(3) .training-hrd-title {background: #0d2259;}
.training-hrd-card {display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; padding: 13px 24px; border: 4px solid #E9E9E9; background: var(--white); text-align: center; word-break: keep-all;}
.training-hrd-card strong {color: var(--text); font-size: var(--fs-24); font-weight: 600; line-height: 1.35;}
.training-hrd-card em {color: var(--point-blue);}
.training-hrd-card p {margin-top: 2px; color: var(--text-muted); font-size: var(--fs-16); line-height: 1.45;}
.training-core-values {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding-bottom: 0;}
.training-core-values li {position: relative; display: flex; align-items: center; justify-content: center; min-height: 64px; border: 2px dashed #013977; border-radius: 5px; color: var(--text); font-size: var(--fs-20); line-height: 28px; letter-spacing: -0.6px; text-align: center;}
.training-core-values strong {display: block; color: var(--primary-1); font-size: var(--fs-18); font-weight: 700; line-height: 1.3;}
.training-core-values span {display: none;}
.training-desc {margin-top: 42px; padding: 32px 40px; border: 1px solid #dfe4ec; background: #fbfcff; color: var(--text-muted); font-size: var(--fs-18); line-height: 1.8; word-break: keep-all;}
.training-certification {display: grid; grid-template-columns: minmax(0, 722px) minmax(0, 626px); align-items: center; justify-content: center; gap: 40px; margin-top: 5px;}
.training-certification-img {width: 100%; min-width: 0;}
.training-certification-img img {display: block; width: 100%; height: auto;}
.certification-pyramid {position: relative; width: 100%; max-width: 711px; aspect-ratio: 711 / 511; margin: 0 auto;}
.certification-level-list {position: absolute; inset: 0; margin: 0; padding: 0; list-style: none;}
.certification-level {position: absolute; inset: 0;}
.certification-shape {position: absolute;}
.certification-shape img {display: block; width: 100%; height: 100%;}
.certification-shape strong {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--text); font-size: clamp(16px, 3.4vw, 24px); font-weight: 600; line-height: 1;}
.level-sqc .certification-shape strong {top: 61%; color: var(--white);}
.certification-line {position: absolute; height: 1px; background: #d9d9d9;}
.certification-line::before {content: ""; position: absolute; top: 50%; left: var(--dot-x); width: 22px; height: 22px; border: 1px dashed var(--dot-color, #ccc); border-radius: 50%; background: var(--white); transform: translate(-50%, -50%);}
.certification-line::after {content: ""; position: absolute; top: 50%; left: var(--dot-x); width: 9px; height: 9px; border-radius: 50%; background: var(--dot-color, #ccc); transform: translate(-50%, -50%);}
.certification-info {position: absolute; color: var(--text); word-break: keep-all;}
.certification-info strong {display: block; color: var(--text); font-size: clamp(12px, 2.35vw, 18px); font-weight: 800; line-height: 1.25;}
.certification-info p {display: flex; align-items: center; gap: 10px; color: var(--text); font-size: clamp(11px, 2.1vw, 16px); line-height: 1.5; white-space: nowrap;}
.certification-info p span {display: inline-block; color: #aaa;}
.level-sqc .certification-shape {top: 5.48%; left: 29.96%; width: 25.46%; height: 29.35%;}
.level-sqc .certification-line {top: 34.83%; left: 58%; width: 31.73%; --dot-x: 12%; --dot-color: #004098;}
.level-sqc .certification-info {top: 19.18%; left: 64.1%;}
.level-eqc .certification-shape {top: 37.18%; left: 22.22%; width: 41.07%; height: 17.42%;}
.level-eqc .certification-line {top: 54.4%; left: 65.8%; width: 23.93%; --dot-x: 15%;}
.level-eqc .certification-info {top: 40.12%; left: 71.5%;}
.level-pqc .certification-shape {top: 56.95%; left: 14.06%; width: 56.96%; height: 17.42%;}
.level-pqc .certification-line {top: 74.17%; left: 73.5%; width: 16.23%; --dot-x: 18%;}
.level-pqc .certification-info {top: 60.47%; left: 79.2%;}
.level-jqc .certification-shape {top: 76.71%; left: 6.33%; width: 72.57%; height: 17.61%;}
.level-jqc .certification-line {top: 94.12%; left: 81.2%; width: 16.11%; --dot-x: 16%;}
.level-jqc .certification-info {top: 80.43%; left: 86%;}
.training-license-map {position: relative; width: 626px; max-width: 100%; min-height: 572px; margin-left: auto;}
.license-axis-y {position: absolute; top: 62px; left: 0; width: 35px; height: 499px;}
.license-axis-x {position: absolute; left: 35px; bottom: 0; width: 590px; max-width: calc(100% - 35px); height: 35px;}
.license-card {position: absolute; display: flex; flex-direction: column; width: 250px; min-height: 150px; padding: 16px 20px; border: 2px solid var(--card-color); border-radius: 5px; background: var(--white); box-sizing: border-box; word-break: keep-all;}
.license-card:not(.is-small) {height: 150px;}
.license-card::after {content: ""; display: block; order: 3; height: 1px; margin: 12px 0 10px; background: #d9d9d9;}
.license-card strong {display: block; color: var(--title-color, var(--card-color)); font-size: var(--fs-18); font-weight: 800; line-height: 1.3;}
.license-card strong em {color: var(--text-muted); font-size: var(--fs-14); font-style: normal; font-weight: 400;}
.license-card span {display: block; margin-top: 5px; color: var(--text); font-size: var(--fs-16); line-height: 1.4;}
.license-card:not(.is-small) span {min-height: 42px; line-height: 1.3;}
.license-card p {order: 4; display: flex; align-items: center; gap: 5px; color: var(--text); font-size: var(--fs-16); line-height: 24px;}
.license-card b {font-size: var(--fs-20); font-weight: 800;}
.license-card.is-small {display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; width: 250px; min-height: 72px; padding: 13px 15px; border-style: dashed;}
.license-card.is-small::after {display: none;}
.license-card.is-small strong {grid-column: 1; grid-row: 1; font-size: var(--fs-16);}
.license-card.is-small span {grid-column: 1; grid-row: 2; font-size: var(--fs-14);}
.license-card.is-small p {grid-column: 2; grid-row: 1 / span 2; align-items: flex-end; white-space: nowrap;}
.license-card.supervisor {--card-color: #0295cd; --title-color: #006fbe; top: -24px; left: 340px;}
.license-card.special {--card-color: #006fbe; --title-color: #006fbe; top: 84px; left: 60px;}
.license-card.pre-supervisor {--card-color: #0295cd; --title-color: #006fbe; top: 84px; left: 340px;}
.license-card.engineer {--card-color: #029e93; --title-color: #029e93; top: 279px; left: 60px;}
.license-card.general {--card-color: #12ad71; --title-color: #12ad71; top: 279px; left: 340px;}
.license-card.practical {--card-color: #029e93; --title-color: #029e93; top: 440px; left: 60px;}
.training-education-box {padding: 34px 40px; border: 1px solid #dfe4ec; background: var(--white);}
.training-education-box .com-txt-list-01 > li {font-size: var(--fs-18); line-height: 1.8;}
.training-goal {display: grid; gap: 30px;}
.training-goal-item {position: relative; display: grid; grid-template-columns: 265px 1fr; align-items: center; min-height: 150px; border: 1px solid #ccc; border-radius: 15px; background: #f8faff; overflow: hidden;}
.training-goal-item::before {content: ""; position: absolute; top: 24px; bottom: 24px; left: 0; width: 7px; background: var(--primary-1);}
.goal-title {display: flex; flex-direction: column; justify-content: center; min-height: 102px; padding: 0 66px; border-right: 1px solid #c7ccdd;}
.goal-title span {color: var(--primary-1); font-size: var(--fs-16); line-height: 1.5;}
.goal-title strong {margin-top: 3px; color: var(--text); font-size: var(--fs-24); font-weight: 800; line-height: 1.35;}
.training-goal-item > p, .goal-policy {padding: 28px 48px; color: #2452a7; font-size: 28px; font-weight: 800; line-height: 1.4; text-align: center; word-break: keep-all;}
.goal-policy p {color: #2452a7; font-size: 28px; font-weight: 800; line-height: 1.4;}
.goal-policy ul {display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 14px;}
.goal-policy li {display: flex; align-items: center; justify-content: center; min-width: 100px; height: 35px; padding: 0 14px; border: 1px solid #ccc; border-radius: 18px; background: var(--white); color: var(--primary-1); font-size: var(--fs-16); font-weight: 400;}

@media screen and (max-width: 1200px) {
    .training-certification {grid-template-columns: 1fr; gap: 40px;}
    .training-certification-img {max-width: 722px; margin: 0 auto;}
    .training-license-map {max-width: 720px; margin: 0 auto; width: 100%;}
}

@media screen and (max-width: 1024px) {
    .training-system-career {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .training-goal-item {grid-template-columns: 220px 1fr;}
    .goal-title {padding: 0 40px;}
    .training-goal-item > p, .goal-policy, .goal-policy p {font-size: var(--fs-24);}
}

@media screen and (max-width: 768px) {
    .training-intro-box, .training-desc, .training-education-box {padding: 24px 20px; font-size: var(--fs-16); text-align: left;}
    .training-system-row {flex-direction: column; gap: 10px; padding: 18px 0;}
    .training-system-career, .training-core-values {grid-template-columns: 1fr;}
    .training-core-values {gap: 12px; padding-bottom: 0;}
    .training-system-arrow {height: 90px; margin-top: 28px;}
    .training-hrd-row {grid-template-columns: 1fr;}
    .training-license-map {min-height: auto; padding: 0;}
    .license-axis-y, .license-axis-x {display: none;}
    .license-card, .license-card.is-small {position: static; width: 100%; min-height: auto; margin-bottom: 14px;}
    .license-card.is-small {display: block;}
    .license-card.is-small p {margin-top: 10px;}
    .training-goal {gap: 18px;}
    .training-goal-item {display: block; min-height: auto;}
    .goal-title {min-height: auto; padding: 22px 24px; border-right: 0; border-bottom: 1px solid #c7ccdd;}
    .training-goal-item > p, .goal-policy {padding: 24px; font-size: var(--fs-20); text-align: left;}
    .goal-policy p {font-size: var(--fs-20); text-align: left;}
    .goal-policy ul {justify-content: flex-start;}
    .training-certification {gap: 28px;}
    .training-certification-img {max-width: 640px; overflow: hidden;}
    .certification-info {max-width: 28%;}
    .certification-info p {gap: 5px;}
    .level-sqc .certification-line {left: 56%; width: 28%;}
    .level-sqc .certification-info {left: 62%;}
    .level-eqc .certification-line {left: 64%; width: 22%;}
    .level-eqc .certification-info {left: 67%;}
    .level-pqc .certification-line {left: 71%; width: 17%;}
    .level-pqc .certification-info {left: 72%;}
    .level-jqc .certification-line {left: 78%; width: 17%;}
    .level-jqc .certification-info {left: 77%;}
    .certification-line::before {width: 16px; height: 16px;}
    .certification-line::after {width: 7px; height: 7px;}
}

@media screen and (max-width: 480px) {
    .training-system-career span {display: block;}
    .training-system-career em {display: none;}
    .training-certification {gap: 22px;}
    .certification-info {max-width: 31%; word-break: normal;}
    .certification-info strong {font-size: 11px; line-height: 1.2;}
    .certification-info p {display: block; font-size: 10px; line-height: 1.3; white-space: normal;}
    .certification-info p span {display: none;}
    .level-sqc .certification-info {left: 60%;}
    .level-eqc .certification-info {left: 64%;}
    .level-pqc .certification-info {left: 68%;}
    .level-jqc .certification-info {left: 72%;}

    .training-system-vision {font-size:20px; margin-bottom:20px;}
    .training-system-career {gap:16px;}
    .training-system-arrow {margin-top:-28px;}
    .com-info-box.type-02 {margin-bottom:40px;}
}



/**************************************************
   050102_Technology_Training_KEPCOKPSAcademy_
   01 LeadershipCenter,ThermalPowerCenter
   02 NuclearTrainingInstitute
***************************************************/
.sub-history-wrap { width: 100%;  }
.history-tab-nav { position: relative; margin-bottom: 50px; }
.history-tab-nav .tab-list { display: flex; justify-content: space-between; position: relative; z-index: 2; }
.history-tab-nav .tab-list::before { content: ''; position: absolute; top: 5px; left: 0; width: 100%; height: 1px; background-color: var(--border); z-index: -1; }
.history-tab-nav .tab-list li { flex: 1; text-align: center; }
.history-tab-nav .tab-list li a { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #999; font-size: var(--fs-20); gap: 15px; }
.history-tab-nav .tab-list li a::before { content: ''; display: block; width: 11px; height: 11px; border-radius: 50%; background-color: #ccc; transition: all 0.3s; }
.history-tab-nav .tab-list li.active a { color: var(--primary-1); font-weight: 700; }
.history-tab-nav .tab-list li.active a::before { background-color: var(--primary-1); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--primary-1); width: 9px; height: 9px;  margin-top: 1px; }
.sub-history-wrap .history-content-box { background-color: var(--surface); border-radius: 20px; padding: 60px 70px; display: flex; gap: 50px; }
.sub-history-wrap .year-col { width: 180px; flex-shrink: 0; }
.sub-history-wrap .year-tit { font-size: var(--fs-24); font-weight: 800; }
.sub-history-wrap .list-col { flex-grow: 1; }
.sub-history-wrap .history-list { display: flex; flex-direction: column; gap: 24px; }
.sub-history-wrap .history-list > li { display: flex; gap: 30px; }
.sub-history-wrap .history-list > li > .date { width: 130px; flex-shrink: 0; font-size: var(--fs-20); font-weight: 700; position: relative; padding-left: 20px; }
.sub-history-wrap .history-list > li > .date::before { content: ''; position: absolute; left: 0; top: 13px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--primary-1); }
.sub-history-wrap .history-list li > .desc { flex-grow: 1; margin: 0 0 8px 0; color: var(--text-muted); }


.history-tab-contents .history-content-box {display: none;}
.history-tab-contents .history-content-box.active {display: flex; }


@media screen and (max-width: 768px) {
    .history-tab-nav { overflow-x: auto; padding-bottom: 15px; padding-top: 5px; margin-bottom: 30px; }
    .history-tab-nav .tab-list { width: max-content; min-width: 100%; gap: 40px; padding: 0 20px; }
    
    .sub-history-wrap .history-content-box { flex-direction: column; padding: 35px 25px; gap: 30px; }
    .sub-history-wrap .year-col { width: 100%; }
    .sub-history-wrap .year-tit { font-size: 28px; }
    
    .sub-history-wrap .history-list li { flex-direction: column; gap: 10px; }
    .sub-history-wrap .history-list .date { width: auto; }

    .history-tab-contents .history-content-box.active { display: flex;flex-direction: column;}
}


/**************************************************
  050201_Technology_R&D_R&DApplicationStandings
***************************************************/
.org-tree-box-rnd .rnd-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.org-tree-box-rnd .rnd-grid > li { display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; }
.org-tree-box-rnd .rnd-head { min-height: 94px; background-color: var(--primary-1); color: #ffffff; font-size: var(--fs-20); font-weight: 600; text-align: center; padding: 15px 10px; border-radius: 4px; width: 100%; position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; }
.org-tree-box-rnd .rnd-vert-line { display: flex; flex-direction: column; gap: 30px; width: 100%; padding-top: 30px; position: relative; }
.org-tree-box-rnd .rnd-vert-line::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background-color: #cccccc; transform: translateX(-50%); z-index: 1; }
.org-tree-box-rnd .rnd-card { position: relative; z-index: 2; width: 100%; background-color: #ffffff; }
.org-tree-box-rnd .rnd-card-title { min-height: 82px; background-color: #0295CD; color: #ffffff; font-weight: 600; text-align: center; padding: 12px 10px; border-radius: 4px 4px 0 0; display: flex; align-items: center; justify-content: center;}
.org-tree-box-rnd .rnd-card-body { border: 1px solid #cccccc; border-top: none; border-radius: 0 0 4px 4px; padding: 20px 15px; min-height: 255px; }
.org-tree-box-rnd .rnd-card-body ul { text-align: left; }
.org-tree-box-rnd .rnd-card-body li { position: relative; padding-left: 12px; color: var(--text-muted); margin-bottom: 6px; }
.org-tree-box-rnd .rnd-card-body li:last-child { margin-bottom: 0; }
.org-tree-box-rnd .rnd-card-body li::before { content: '·'; position: absolute; left: 0; top: 0; font-weight: bold; }

.step-list-rnd .badge-list {margin-bottom: 8px; display: flex; gap: 5px; flex-wrap: wrap;}
.step-list-rnd .badge-list li {font-size: var(--fs-14); background: var(--surface); padding: 2px 10px; border-radius: 3px; display: inline-block; }
.step-list-rnd .badge-card-list {display:flex; flex-direction: column; gap: 5px;}
.step-list-rnd .badge-card-list > li {padding: 10px 14px;}
.step-list-rnd .com-txt-list-03 > li {margin-bottom: 10px; font-weight: 400 !important;}
.step-list-rnd .com-txt-list-03 > li:last-child {margin-bottom: 0;}
.step-list-rnd .step-card {min-height: 410px;}
.step-list-rnd .step-item:last-child .step-card {border: 1px solid var(--primary-1);}



@media screen and (max-width: 1024px) {
    .org-tree-box-rnd .rnd-grid { grid-template-columns: 1fr; gap: 40px; }
    .org-tree-box-rnd .rnd-vert-line::before { display: none; } 
}


/**************************************************
  050202_Technology_R&D_R&DTaskPerformanceStandings
***************************************************/

.td-strat-wrap { font-size: var(--fs-20); }
.td-strat-wrap .strat-group { margin-bottom: 30px; }
.td-strat-wrap .strat-group:last-child { margin-bottom: 0; }
.td-strat-wrap .strat-header, .td-strat-wrap .strat-row { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: stretch; }
.td-strat-wrap .strat-header { margin-bottom: 15px; align-items: center; }
.td-strat-wrap .title-box { border-radius: 6px; padding: 18px 20px; display: flex; align-items: center; gap: 15px; }
.td-strat-wrap .title-box .badge { color: #ffffff; padding: 6px 18px; border-radius: 4px; font-weight: 600; }
.td-strat-wrap .title-box strong { font-weight: 600; }
.td-strat-wrap .stat-head .stat-th-top { color: #ffffff; text-align: center; padding: 4px 14px; border-radius: 4px; font-weight: 600;  margin-bottom: 5px; }
.td-strat-wrap .stat-head .stat-th-bot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.td-strat-wrap .stat-head .stat-th-bot span { color: #ffffff; text-align: center; padding: 4px 14px; border-radius: 4px; }
.td-strat-wrap .item-left { background-color: var(--surface); padding: 15px 20px; display: flex; align-items: center; gap: 12px;}
.td-strat-wrap .item-left .num { width: 20px; height: 20px; color: #ffffff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; font-size: 0.75rem; }
.td-strat-wrap .item-right { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; align-items: center; text-align: center; color: var(--text-muted) }
.td-strat-wrap .strat-row:first-child .item-left { border-radius: 6px 6px 0 0; }
.td-strat-wrap .strat-row:last-child .item-left { border-radius: 0 0 6px 6px; }

.td-strat-wrap .theme-blue .title-box { border: 1px solid #0295CD; }
.td-strat-wrap .theme-blue .badge, .td-strat-wrap .theme-blue .stat-th-top, .td-strat-wrap .theme-blue .stat-th-bot span, .td-strat-wrap .theme-blue .item-left .num { background-color: #0295CD; }

.td-strat-wrap .theme-teal .title-box { border: 1px solid #029E93; }
.td-strat-wrap .theme-teal .badge, .td-strat-wrap .theme-teal .stat-th-top, .td-strat-wrap .theme-teal .stat-th-bot span, .td-strat-wrap .theme-teal .item-left .num { background-color: #029E93; }

.td-strat-wrap .theme-green .title-box { border: 1px solid #12AD71; }
.td-strat-wrap .theme-green .badge, .td-strat-wrap .theme-green .stat-th-top, .td-strat-wrap .theme-green .stat-th-bot span, .td-strat-wrap .theme-green .item-left .num { background-color: #12AD71; }

@media screen and (max-width: 1024px) {
    .td-strat-wrap .strat-header, .td-strat-wrap .strat-row { grid-template-columns: 1fr; gap: 10px; }
    .td-strat-wrap .strat-row + .strat-row .item-right { border-top: none; }
    .td-strat-wrap .item-right { padding-bottom: 20px; border-bottom: 1px dotted #ccc; }
    .td-strat-wrap .strat-row:last-child .item-right { border-bottom: none; }
}




/**************************************************
    050401 서브 진단 소개 박스
***************************************************/
.sub-diagnosis-intro {position: relative; margin-top: 94px; padding: 100px 80px 70px; background: #F2F2F2; border-radius: 10px;}
.sub-diagnosis-intro-title {position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); min-width: 280px; padding: 14px 32px; background: var(--primary-1); color: var(--white); border-radius: 50px; font-size: var(--fs-h4); font-weight: 700; line-height: 1.2; text-align: center;}

.sub-diagnosis-img-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 45px;}
.sub-diagnosis-img-list li {overflow: hidden; border-radius: 4px;}
.sub-diagnosis-img-list img {width: 100%; height: 180px; object-fit: cover;}

.sub-diagnosis-txt-list {display: flex; flex-direction: column; gap: 12px;}
.sub-diagnosis-txt-list > li {font-size: var(--fs-20); color: var(--text); line-height: 1.6;}

@media screen and (max-width: 1024px) {
    .sub-diagnosis-intro {padding: 80px 30px 50px;}
    .sub-diagnosis-img-list {grid-template-columns: repeat(2, 1fr);}
    .sub-diagnosis-img-list img {height: 200px;}
}

@media screen and (max-width: 640px) {
    .sub-diagnosis-intro {margin-top: 50px; padding: 65px 20px 35px;}
    .sub-diagnosis-intro-title {min-width: auto; width: calc(100% - 40px); font-size: var(--fs-24);}
    .sub-diagnosis-img-list {grid-template-columns: 1fr; gap: 14px; margin-bottom: 30px;}
    .sub-diagnosis-img-list img {height: auto;}
}

/**************************************************
    050401 파란색헤더박스
***************************************************/
.sub-diagnosis-service {margin-top:80px;}
.sub-diagnosis-card-list {display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.sub-diagnosis-card {overflow:hidden;min-height:220px;border:1px solid var(--border);border-radius:8px;background:var(--white);}
.sub-diagnosis-card-title {display:flex;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:14px 20px;background:var(--primary-4);color:var(--white);font-size:var(--fs-20);font-weight:700;line-height:1.4;text-align:center;}
.sub-diagnosis-card-title span {display:inline-block;font-size:var(--fs-16);font-weight:400;opacity:.9;}
.sub-diagnosis-card .com-txt-list-01 {padding:28px 36px 30px;}
.sub-diagnosis-card .com-txt-list-01 > li {color:var(--text-muted);line-height:1.7;}

@media screen and (max-width:1400px){
    .sub-diagnosis-card-title {flex-direction:column;}
    .sub-diagnosis-card-title span {display:block;}
}

@media screen and (max-width:1024px){
    .sub-diagnosis-card-list {grid-template-columns:repeat(2,1fr);}
}

@media screen and (max-width:640px){
    .sub-diagnosis-service {margin-top:50px;}
    .sub-diagnosis-card-list {grid-template-columns:1fr;gap:20px;}
    .sub-diagnosis-card-title {min-height:56px;padding:12px 16px;}
    .sub-diagnosis-card .com-txt-list-01 {padding:22px 24px 24px;}
}

.sub-solution-wrap {margin-top:80px;}


/**************************************************
    040401~040418 KPS기술 - 특화기술 - 고객사/적용처 보완
***************************************************/
.client-group-title { margin-bottom: 8px; font-size: 20px; }

/**************************************************
    특화기술 로고박스
***************************************************/
.client-section {margin-top:80px;}
.client-group + .client-group {margin-top:80px;}
.client-group-title {margin-bottom:32px;font-size:24px;font-weight:700;color:#082a63;}
.client-list {display:grid;grid-template-columns:repeat(5,1fr);gap:52px 34px;}
.client-list li {text-align:center;}
.client-logo {display:flex;align-items:center;justify-content:center;height:120px;padding:18px;border:1px solid #ddd;background:#fff;box-sizing:border-box;}
.client-logo img {max-width:100%;max-height:60px;object-fit:contain;}
.client-list p {margin-top:16px;font-size:17px;color:#555;line-height:1.5;word-break:keep-all;}

@media (max-width:1200px){
  .client-list {grid-template-columns:repeat(4,1fr);}
}

@media (max-width:900px){
  .client-list {grid-template-columns:repeat(3,1fr);}
}

@media (max-width:640px){
  .client-list {grid-template-columns:repeat(2,1fr);gap:30px 16px;}
  .client-logo {height:100px;padding:16px;}
  .client-logo img {max-height:50px;}
  .client-list p {font-size:15px;}
}



/**************************************************
    0403, 040401~040429 KPS기술 - 종합진단서비스/특화기술 공통 보완
***************************************************/
.sub-diagnosis-img-list.com-grid {display: grid; margin-bottom: 40px;}
.sub-diagnosis-img-list.col-1 {max-width: 475px; margin-inline: auto;}
.sub-diagnosis-img-list.col-1 img {height: auto;}
.sub-diagnosis-img-list.col-3 {grid-template-columns: repeat(3, 292px); justify-content: center;}
.sub-diagnosis-img-list.col-3 img {width: auto; height: auto;}
.diagnosis-step-list .step-card {flex: 1;}
.diagnosis-step-list .step-item:nth-child(4) .step-card {border-color: var(--primary-1);}
.diagnosis-step-list .step-item:nth-child(4) .card-title {color: var(--primary-1); border-bottom-color: var(--primary-1);}
.com-grid.cgid-intro-img-list {grid-template-columns:repeat(2,292px);justify-content:center;gap:20px;}
.cgid-intro-img-list img {height:185px;}
.sub-diagnosis-txt-list strong {display: block; margin-bottom: 4px; font-weight: 500;}
.sub-diagnosis-detail-list {margin-top: 4px;}
.sub-diagnosis-detail-list li {position: relative; padding-left: 17px; color: var(--text-muted); font-size: var(--fs-18); line-height: 1.6;}
.sub-diagnosis-detail-list li::before {content: "-"; position: absolute; left: 0; top: 0;}
.sub-detail-list {margin-top: 4px; list-style: none;}
.sub-detail-list li {position: relative; padding-left: 17px; color: var(--gray-400); font-size: var(--fs-16); line-height: 1.5;}
.sub-detail-list li::before {content: "-"; position: absolute; left: 0; top: 0;}
.com-tbl-wrap.type-01.sub-diagnosis-table {margin-top: 16px;}
.com-tbl-wrap.type-01.sub-diagnosis-table :where(th, td) {height: 56px; padding-top: 0; padding-bottom: 0; vertical-align: middle;}
.com-tbl-wrap.type-01.sub-diagnosis-table tbody :where(th, td) {background: var(--white);}
.com-tbl-wrap.type-01.sub-diagnosis-table tbody th {color: var(--text); font-weight: 400;}

.sub-diagnosis-card-desc{display:flex;align-items:center;justify-content:center;min-height:48px;margin:25px 25px 0;padding:12px 16px;background:#f2f6fb;color:var(--text);font-size:var(--fs-16);line-height:1.5;text-align:center;word-break:keep-all;}
.sub-diagnosis-card-desc em{color:var(--primary-1);font-style:normal;}
.client-list.client-list-col-4{grid-template-columns:repeat(4,1fr);}
.client-list.client-list-col-5{grid-template-columns:repeat(5,1fr);}
.client-logo {font-size: 24px; font-weight: 700;}
.client-logo-text{display:block;color:var(--gray-500);font-size:24px;font-weight:700;line-height:1.45;text-align:center;word-break:keep-all;}


/**************************************************
    040416~040428 KPS기술 - 특화기술 - 작업절차/주요업무/보유장비 보완
***************************************************/

.rotor-process-list {display:grid;grid-template-columns:repeat(4,1fr);gap:18px 0;}
.rotor-process-spacer {min-height:136px;}
.rotor-process-card {position:relative;min-height:136px;border:1px solid var(--border);border-left:0;background:var(--white);text-align:center;}
.rotor-process-card:nth-child(4n+1) {border-left:1px solid var(--border);}
.rotor-process-card.has-left-line {border-left:1px solid var(--border);}
.rotor-process-card strong {display:flex;align-items:center;justify-content:center;min-height:46px;background:#f5f5f5;color:var(--primary-4);font-size:var(--fs-18);font-weight:700;line-height:1.2;}
.rotor-process-card p {display:flex;align-items:center;justify-content:center;min-height:88px;padding:18px 14px;color:var(--gray-500);font-size:var(--fs-18);font-weight:700;line-height:1.25;letter-spacing:-0.54px;word-break:keep-all;}
.rotor-process-card:nth-child(4)::after,
.rotor-process-card:nth-child(5)::after,
.rotor-process-card:nth-child(12)::after {content:"";position:absolute;left:50%;bottom:-20px;z-index:1;transform:translateX(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:18px solid var(--border);}
.rotor-process-card:nth-child(4)::before,
.rotor-process-card:nth-child(5)::before,
.rotor-process-card:nth-child(12)::before {content:"";position:absolute;left:50%;bottom:-17px;z-index:2;transform:translateX(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:16px solid var(--white);}
.rotor-work-card .com-txt-list-01 > li + li {margin-top:6px;}
.rotor-work-card .com-txt-list-01 strong {display:block;margin-bottom:10px;color:var(--gray-400);font-size:var(--fs-18);font-weight:700;line-height:1.45;}
.rotor-work-card .com-txt-list-01 p,
.rotor-work-desc {color:var(--gray-400);font-size:17px;font-weight:400;line-height:1.8;word-break:keep-all;}
.rotor-work-desc {padding:28px 36px 30px;}
.rotor-work-desc + .sub-detail-list {margin:-16px 36px 30px;padding:0;}
.cleaning-work-list {grid-template-columns:1fr;gap:20px;}
.cleaning-work-list .sub-diagnosis-card {min-height:auto;padding:40px;border:5px solid #e9e9e9;border-radius:0;}
.cleaning-work-list .sub-diagnosis-card-title {justify-content:flex-start;min-height:auto;margin-bottom:15px;padding:0;background:none;color:var(--primary-5);font-size:var(--fs-24);line-height:32px;text-align:left;}
.cleaning-work-list .rotor-work-desc {padding:0;color:var(--gray-400);font-size:var(--fs-18);line-height:32px;}
.equipment-section,
.performance-section {margin-top:80px;}
.rotor-equipment-list .sub-list-box {min-height:115px;padding:28px;border-radius:8px;}
.rotor-equipment-list .sub-list-box .num {display:block;margin-bottom:14px;color:#999;font-size:var(--fs-18);font-weight:400;line-height:1;}
.rotor-equipment-list .sub-list-box .tit {margin:0;padding-left:0;color:var(--primary-1);font-size:var(--fs-20);font-weight:700;line-height:1.35;word-break:keep-all;}
.rotor-equipment-list .sub-list-box .tit::before {display:none;}
.decommission-service-list .sub-diagnosis-card-title {min-height:60px;}
.decommission-service-list .sub-diagnosis-card .com-txt-list-01 {min-height:242px;padding:25px;box-sizing:border-box;}
.decommission-service-list .sub-diagnosis-card .com-txt-list-01 > li {font-size:var(--fs-18);line-height:1.8;}
.sub-list-grid.decommission-equipment-list {gap:12px 40px;}
.decommission-equipment-list .sub-list-box {min-height:215px;padding:30px;}
.decommission-equipment-list .sub-list-box .desc {margin-top:16px;color:var(--text);font-size:var(--fs-18);line-height:1.45;word-break:keep-all;}
.rotor-performance-box {padding:28px 30px;}
.rotor-performance-box > strong {display:block;margin-bottom:10px;color:var(--text);font-size:var(--fs-18);font-weight:700;line-height:1.4;}
.rotor-performance-box .com-txt-list-01 + strong {margin-top:20px;}
.steam-generator-performance-box {display:flex;flex-direction:column;gap:30px;}
.steam-generator-performance-item h4 {margin-bottom:15px;color:var(--primary-5);font-size:var(--fs-24);font-weight:700;line-height:1.35;}
.steam-generator-performance-item .com-txt-list-01 > li {color:var(--text-muted);font-size:var(--fs-18);line-height:1.8;}

@media screen and (max-width: 1200px) {
    .client-list.client-list-col-5 {grid-template-columns: repeat(4, 1fr);}
    .sub-diagnosis-img-list.col-3 {grid-template-columns: repeat(3, 292px);}
}

@media screen and (max-width: 640px) {
    .com-grid.cgid-intro-img-list {grid-template-columns:1fr;gap:14px;}
    .cgid-intro-img-list img {height:auto;}
    .decommission-service-list .sub-diagnosis-card .com-txt-list-01 {min-height:auto;}
    .decommission-equipment-list .sub-list-box {min-height: auto;}

}

@media screen and (max-width: 1024px) {
   /* .com-grid.col-3,
    .com-grid.col-4 {grid-template-columns: repeat(2, 1fr);}*/
    .sub-diagnosis-img-list.col-3 {grid-template-columns: repeat(2, 292px);}

    .rotor-process-list {grid-template-columns:repeat(2,1fr);}
    .rotor-process-spacer {display:none;}
    .rotor-process-card:nth-child(odd) {border-left:1px solid var(--border);}
    .rotor-process-card:nth-child(4)::before,
    .rotor-process-card:nth-child(4)::after,
    .rotor-process-card:nth-child(5)::before,
    .rotor-process-card:nth-child(5)::after,
    .rotor-process-card:nth-child(12)::before,
    .rotor-process-card:nth-child(12)::after {display:none;}
}

@media screen and (max-width: 900px) {
    .client-list.client-list-col-4,
    .client-list.client-list-col-5 {grid-template-columns: repeat(3, 1fr);}
}

@media screen and (max-width: 640px) {
    .com-grid.col-4 {grid-template-columns: 1fr; gap: 14px;}
    .sub-diagnosis-img-list.col-3 {grid-template-columns: 292px;}
    .diagnosis-step-list .step-card {flex: none;}

    .rotor-process-list {grid-template-columns:1fr;}
    .rotor-process-card {min-height:auto;border-left:1px solid var(--border);}
    .rotor-process-card:nth-child(1) {order:1;}
    .rotor-process-card:nth-child(2) {order:2;}
    .rotor-process-card:nth-child(3) {order:3;}
    .rotor-process-card:nth-child(4) {order:4;}
    .rotor-process-card:nth-child(8) {order:5;}
    .rotor-process-card:nth-child(7) {order:6;}
    .rotor-process-card:nth-child(6) {order:7;}
    .rotor-process-card:nth-child(5) {order:8;}
    .rotor-process-card:nth-child(9) {order:9;}
    .rotor-process-card:nth-child(10) {order:10;}
    .rotor-process-card:nth-child(11) {order:11;}
    .rotor-process-card:nth-child(12) {order:12;}
    .rotor-process-card:nth-child(16) {order:13;}
    .rotor-process-card:nth-child(15) {order:14;}
    .rotor-process-card:nth-child(14) {order:15;}
    .rotor-process-card:nth-child(13) {order:16;}
    .rotor-process-card strong {min-height:42px;}
    .rotor-process-card p {min-height:70px;padding:16px 12px;font-size:var(--fs-16);}
    .sub-list-grid.col-3.rotor-equipment-list {grid-template-columns:1fr;}

    .sub-diagnosis-card-desc {margin: 20px 20px 0;}

    .client-list.client-list-col-4,
    .client-list.client-list-col-5 {grid-template-columns: repeat(2, 1fr); gap: 30px 16px;}

    .client-logo-text {font-size: 17px;}
}






/**************************************************
  040602 KPS기술 - 품질활동 - 고객만족경영현황
***************************************************/

.cs-service-list .com-txt-list-01{margin-left:10px;}
.cs-service-list .sub-list-box{min-height:auto;padding:28px 30px;}



/**********************************************************************
  040603 KPS기술 - 품질활동 - 품질경영시스템체계구축 
***********************************************************************/
.lead-innovation-wrap{padding:30px 0 0;}
.lead-innovation-title{margin-bottom:30px;padding:18px 20px;background:#f3f7fb;color:var(--primary-1);font-size:var(--fs-20);font-weight:700;text-align:center;}
.lead-system{display:grid;grid-template-columns:120px 1fr;gap:30px;align-items:start;margin-bottom:50px;}
.lead-step{display:block;}
.lead-step .lead-label{margin-bottom:30px;}
.lead-label{color:var(--primary-1);font-size:var(--fs-18);font-weight:700;}
.lead-system-diagram{position:relative;width:min(882px,100%);height:349px;margin:0 auto;text-align:center;}

.lead-top,
.lead-bottom{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:330px;min-height:80px;padding:18px 24px;border:2px solid currentColor;border-radius:5px;background:var(--white);font-size:var(--fs-16);line-height:1.4;}

.lead-top{top:0;left:50%;color:var(--primary-1);transform:translateX(-50%);}

.lead-top strong,
.lead-bottom strong{display:block;margin-top:4px;font-size:var(--fs-20);line-height:1.2;}

.lead-center{position:absolute;top:165px;left:50%;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;width:137px;height:137px;padding:26px;border-radius:29px;background:var(--white);box-shadow:0 4px 10px rgba(87,87,87,.16);color:var(--text);font-size:var(--fs-18);font-weight:700;line-height:1.15;transform:translateX(-50%);}

.lead-center-icon{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-bottom:10px;border-radius:11px;background:#eaebef;}

.lead-center-icon::before,
.lead-center-icon::after{content:"";position:absolute;border-radius:50%;}

.lead-center-icon::before{width:14px;height:14px;border:4px solid var(--primary-1);}
.lead-center-icon::after{width:4px;height:4px;background:var(--white);}

.lead-bottom{top:271px;}
.lead-bottom-left{left:0;color:#0295cd;}
.lead-bottom-right{right:0;color:#029e93;}

.lead-line{position:absolute;z-index:1;border-color:var(--primary-1);}

.lead-line-left,
.lead-line-right{top:80px;left:50%;width:1px;height:238px;border-left:1px dashed var(--primary-1);transform-origin:top center;}

.lead-line-left{transform:rotate(35deg);}
.lead-line-right{transform:rotate(-35deg);}

.lead-line-bottom{top:310px;left:165px;right:165px;border-top:1px dashed var(--primary-1);}


.lead-step-grid {position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:100px;}
.lead-step-col {position:relative;z-index:1;}
.lead-step-col h5 {margin-bottom:14px;padding:12px 20px;border-radius:6px;color:var(--white);font-size:var(--fs-18);font-weight:700;text-align:center;}
.lead-step-col ol {display:flex;flex-direction:column;gap:12px;}
.lead-step-col li {position:relative;min-height:76px;padding:18px 24px;border:1px dashed var(--secondary-1);border-radius:6px;background:var(--white);}
.lead-step-col li span {display:block;margin-bottom:6px;color:var(--gray-400);font-size:var(--fs-14);font-weight:300;}
.lead-step-col li strong {display:block;font-size:var(--fs-20);font-weight:800;}
.lead-step-col:first-child h5 {background:var(--secondary-1);}
.lead-step-col:first-child li {border-color:var(--secondary-1);}
.lead-step-col:first-child li strong {color:var(--secondary-1);}
.lead-step-col:last-child h5 {background:var(--primary-1);}
.lead-step-col:last-child li {border-color:var(--primary-1);}
.lead-step-col:last-child li strong {color:var(--primary-1);}
.lead-step-col:first-child ol li::after {content:"";position:absolute;top:50%;right:-101px;width:100px;border-top:1px dashed var(--border);transform:translateY(-50%);}

@media screen and (max-width:1024px){
    .lead-system {grid-template-columns:1fr;gap:20px;}
    .lead-step-grid {gap:30px;}
    .lead-step-col:first-child ol li::after {right:-31px;width:30px;}
}
@media screen and (max-width:768px){
    .lead-system-diagram {display:flex;flex-direction:column;height:auto;}
    .lead-top,
    .lead-center,
    .lead-bottom {position:relative;top:auto;left:auto;right:auto;width:100%;margin:0 auto 16px;transform:none;}
    .lead-center {order:1;width:137px;}
    .lead-top {order:2;}
    .lead-bottom-left {order:3;}
    .lead-bottom-right {order:4;}
    .lead-line,
    .lead-step-col:first-child ol li::after {display:none;}
    .lead-step-grid {grid-template-columns:1fr;}
}



/**********************************************************************
  040603 KPS기술 - 품질활동 - 품질경영시스템체계구축 > 품질시스템 문서체계
***********************************************************************/
.qms-doc-system {display:flex;flex-direction:column;gap:22px;}
.qms-doc-row {display:grid;grid-template-columns:188px 1fr;gap:17px;align-items:stretch;}
.qms-doc-label {display:flex;align-items:center;justify-content:center;min-height:80px;border-radius:5px;color:var(--white);font-size:var(--fs-24);font-weight:400;text-align:center;}
.qms-doc-label.bg-blue {min-height:199px;background:#388ceb;}
.qms-doc-label.bg-blue-1 {background:#0f6ed8;}
.qms-doc-label.bg-blue-2 {min-height:168px;background:#034ea2;}
.qms-doc-rule-flow {position:relative;display:flex;flex-direction:column;align-items:center;gap:38px;}
.qms-doc-rule-flow::before {content:"";position:absolute;top:80px;left:50%;height:38px;border-left:1px solid var(--gray-200);transform:translateX(-50%);}
.qms-doc-pill {display:flex;align-items:center;justify-content:center;min-height:80px;border-radius:5px;color:var(--white);font-size:var(--fs-24);font-weight:700;text-align:center; padding: 0 30px}
.qms-doc-pill.bg-blue {background:var(--primary-1);}
.qms-doc-outline {display:flex;align-items:center;justify-content:center;width:100%;min-height:80px;border:1px solid var(--gray-200);border-radius:5px;color:var(--gray-500);font-size:var(--fs-20);font-weight:400;text-align:center;}
.qms-doc-plan-list {display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.qms-doc-plan {display:flex;align-items:center;justify-content:center;min-height:80px;border-radius:5px;color:var(--white);font-size:var(--fs-20);font-weight:700;line-height:1.35;text-align:center; padding: 0 14px;}
.qms-doc-plan.bg-teal {background:#0094b7;}
.qms-doc-plan.bg-blue {background:#0074df;}
.qms-doc-plan.bg-navy {background:var(--primary-4);}
.qms-doc-plan.bg-green {background:#19b56d;}
.qms-doc-note {min-height:80px;display:flex;align-items:center;justify-content:center;padding:24px 30px;background:var(--white);border:1px solid var(--gray-200);border-radius:5px;color:var(--gray-500);font-size:var(--fs-20);font-weight:400;text-align:center;}
.qms-doc-procedure-list {display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:22px;}
.qms-doc-procedure-list > div {min-height:65px;display:flex;align-items:center;justify-content:center;border:2px dashed currentColor;border-radius:5px;background:var(--white);color:var(--gray-500);font-size:var(--fs-20);font-weight:400;text-align:center;}
.qms-doc-procedure-list > div:nth-child(1) {border-color:#0295cd;}
.qms-doc-procedure-list > div:nth-child(2) {border-color:#0074df;}
.qms-doc-procedure-list > div:nth-child(3) {border-color:var(--primary-4);}
.qms-doc-procedure-list > div:nth-child(4) {border-color:#19b56d;}

@media screen and (max-width:1024px){
    .qms-doc-row {grid-template-columns:1fr;}
    .qms-doc-plan-list {grid-template-columns:repeat(2,1fr);}
    .qms-doc-label.bg-blue  {min-height: 80px; margin-top:30px;}
    .qms-doc-label.bg-blue-1 {min-height: 80px; margin-top:30px;}
    .qms-doc-label.bg-blue-2 {min-height: 80px; margin-top:30px;}
}
@media screen and (max-width:640px){
    .qms-doc-rule-flow,
    .qms-doc-plan-list,
    .qms-doc-row:nth-child(3) > div:last-child {padding:20px;border:1px solid var(--gray-200);border-radius:5px;background:var(--gray-100);}
    .qms-doc-rule-flow {gap:20px;background:var(--white);}
    .qms-doc-rule-flow::before {display:block;top:100px;height:20px;}
    .qms-doc-plan-list {grid-template-columns:1fr;gap:12px;}
    .qms-doc-procedure-list {grid-template-columns:1fr;gap:12px;margin-top:12px;}
}


/**********************************************************************
  040604 KPS기술 - 품질활동 - 품질혁신성과
***********************************************************************/
.quality-card-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.quality-card {display:flex;flex-direction:column;align-items:flex-start;min-height:276px;padding:30px;border:1px solid var(--gray-200);border-radius:11px;background:var(--white);}
.quality-card-count {display:flex;align-items:flex-end;gap:4px;margin-bottom:10px;white-space:nowrap;}
.quality-card-count strong {color:var(--primary-1);font-size:44px;font-weight:800;line-height:1;}
.quality-card-count span {margin-bottom:4px;color:var(--gray-400);font-size:var(--fs-18);font-weight:700;line-height:1.3;}
.quality-card-icon-box {display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 0 20px;border-radius:6px;background:#f1f5f9;}
.quality-card-icon-box .icon-sprite {display:block;width:28px;height:28px;background:url(/resources/user/eng/images/icon/icon_sprite_sub.svg) no-repeat;}
.quality-card-icon-box .icon-sprite.icon-medal {background-position:-605px -364px;}
.quality-card-icon-box .icon-sprite.icon-crown{background-position:-836px -364px;}
.quality-card-icon-box .icon-sprite.icon-like {background-position:-889px -366px;}
.quality-card-icon-box .icon-sprite.icon-user{background-position: -944px -365px;}
.quality-card-icon-box .icon-sprite.icon-building{background-position:-998px -365px;}
.quality-card .tit {margin-bottom:0;color:var(--text);font-size:var(--fs-20);font-weight:700;line-height:1.45;}
.quality-card .txt {margin-top:10px;color:var(--gray-400);font-size:var(--fs-16);font-weight:600;line-height:1.5;}
.quality-card-list {margin-top:10px;color:var(--gray-400);font-size:var(--fs-15);font-weight:600;line-height:1.55;}
.quality-card-list > li {position:relative;padding-left:10px;}
.quality-card-list > li::before {content:"";position:absolute;left:0;top:.72em;width:3px;height:3px;border-radius:50%;background:var(--gray-400);}
.quality-card-years {display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:22px;}
.quality-card .year {display:inline-flex;align-items:center;justify-content:center;min-width:74px;height:40px;padding:0 16px;border:1px solid var(--gray-200);border-radius:8px;background:var(--gray-100);color:var(--gray-400);font-size:var(--fs-16);font-weight:600;line-height:1;}

.sub-list-box-names {display: grid;gap: 16px;margin-top: auto;padding-top: 10px;}
.sub-list-box .name {display: inline-flex;align-items: center;justify-content: center;width: 100%; min-height: 40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis; padding: 6px 12px;border-radius: 8px;background: var(--gray-100);color: var(--gray-400);font-size: var(--fs-16); font-weight: 600; line-height: 1.2; box-sizing: border-box; }
.sub-list-grid.col-1 .sub-list-box-names {grid-template-columns: repeat(4, 1fr);}
.sub-list-grid.col-2 .sub-list-box-names {grid-template-columns: repeat(2, 1fr);}
.sub-list-grid .sub-list-box .desc span.deepblue {color: var(--primary-5);}

.award-grid-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; padding: 0; margin: 20px 0 0 0; }
.award-item { background-color: var(--surface); border-radius: 12px; padding: 16px 20px; display: flex; align-items: center; }
.award-date { display: flex; align-items: center; position: relative; padding-right: 16px; margin-right: 16px; min-width: 90px; }
.award-date::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background-color: #d1d5db; }
.award-date .edition { color: var(--primary-5); font-weight: 600; font-size: 15px; margin-right: 8px; }
.award-date .year { color: #6b7280; font-size: 13px; }
.award-details { display: flex; flex-direction: column; gap: 4px; }
.award-details .award-name { color: var(--primary-5); font-size: var(--fs-16); font-weight: 500; }
.award-details .award-recipient { color: var(--text-muted); font-size: var(--fs-16); }



@media (max-width: 1200px) {
    .sub-list-grid.col-1 .sub-list-box-names {grid-template-columns: repeat(3, 1fr);gap: 14px; }
}

@media screen and (max-width:1024px){
    .quality-card-grid {grid-template-columns:repeat(2,1fr);}
    .sub-list-grid.col-1 .sub-list-box-names,
    .sub-list-grid.col-2 .sub-list-box-names {grid-template-columns: repeat(2, 1fr);gap: 12px; }
    .sub-list-box .name {padding: 6px 10px; }

    .award-grid-list { grid-template-columns: repeat(2, 1fr); } 
}
@media screen and (max-width:640px){
    .quality-card-grid {grid-template-columns:1fr;}
    .sub-list-grid.col-1 .sub-list-box-names,
    .sub-list-grid.col-2 .sub-list-box-names {grid-template-columns: repeat(1, 1fr);gap: 10px;}
    .sub-list-box .name {font-size: var(--fs-16)}

     .award-grid-list { grid-template-columns: 1fr; }
}




/**************************************************
  040601 KPS기술 - 품질활동 - 품질비전체계
***************************************************/
.quality-vision-system{--qv-blue:#0295cd;--qv-teal:#029e93;--qv-green:#12ad71;--qv-navy-1:#388ceb;--qv-navy-2:#0f6ed8;--qv-navy-3:#034ea2;--qv-navy-4:#013977;--qv-navy-5:#2e3d4e;--qv-label-w:188px;--qv-gap:15px;display:flex;flex-direction:column;gap:24px;width:100%;}
.qv-row{display:grid;grid-template-columns:var(--qv-label-w) minmax(0,1fr);gap:var(--qv-gap);align-items:stretch;}
.qv-head{display:flex;align-items:center;justify-content:center;min-height:80px;padding:20px 12px;border-radius:5px;color:var(--white);font-size:var(--fs-24);line-height:1.35;text-align:center;word-break:keep-all;}
.qv-head-1{background:var(--qv-navy-1);}
.qv-head-2{background:var(--qv-navy-2);}
.qv-head-3{background:var(--qv-navy-3);}
.qv-head-4{background:var(--qv-navy-4);}
.qv-head-5{background:var(--qv-navy-5);}
.qv-content{min-width:0;}
.qv-policy-box{display:flex;align-items:center;justify-content:center;min-height:80px;padding:18px 30px;border:5px solid rgba(11,80,208,.2);border-radius:40px;color:var(--primary-1);font-size:var(--fs-h4);font-weight:700;line-height:1.35;text-align:center;word-break:keep-all;}
.qv-method-grid,.qv-task-grid,.qv-kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;height:100%;}
.qv-task-grid,.qv-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;}

.qv-method-card{display:flex;align-items:center;justify-content:space-evenly;gap:24px;min-height:180px;padding:24px 30px 24px 50px;border:1px solid var(--gray-200);border-radius:5px;background:var(--white);}
.qv-method-text{min-width:0;}
.qv-method-text strong{display:flex;align-items:center;justify-content:center;width:230px;min-height:40px;margin-bottom:20px;border-radius:20px;background:#2452a7;color:var(--white);font-size:var(--fs-18);font-weight:700;line-height:1.2;text-align:center;}
.qv-method-text p{margin:0;color:var(--text);font-size:var(--fs-18);line-height:1.45;letter-spacing:-.54px;word-break:keep-all;}
.qv-method-text span{display:block;margin-top:8px;color:var(--gray-400);font-size:var(--fs-14);line-height:1.45;letter-spacing:-.42px;word-break:keep-all;}
.qv-method-text em{color:var(--primary-1);font-style:normal;}

.qv-method-img{flex:0 0 auto;display:block;object-fit:contain;}
.qv-method-img-imq{width:97px;height:88px;}
.qv-method-img-bis{width:117px;height:86px;}

.qv-task-card{--qv-theme:var(--qv-blue);position:relative;display:flex;flex-direction:column;padding-top:104px;}
.qv-theme-blue{--qv-theme:var(--qv-blue);}
.qv-theme-teal{--qv-theme:var(--qv-teal);}
.qv-theme-green{--qv-theme:var(--qv-green);}

.qv-task-card span{position:absolute;top:-18px;left:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:101px;min-height:32px;transform:translateX(-50%);border:1px solid var(--white);border-radius:16px;background:var(--qv-theme);color:var(--white);font-size:var(--fs-20);font-weight:700;line-height:1.2;}

.qv-task-card strong{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:center;min-height:80px;padding:17px 20px;border-radius:5px;background:var(--qv-theme);color:var(--white);font-size:var(--fs-24);font-weight:700;line-height:1.35;text-align:center;word-break:keep-all;}

.qv-task-card ul{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:150px;margin:0;padding:36px 20px 28px 48px;border:2px solid var(--qv-theme);border-radius:5px;background:var(--white);}

.qv-task-card li{position:relative;color:var(--text);font-size:var(--fs-20);line-height:1.4;letter-spacing:-.6px;word-break:keep-all;}
.qv-task-card li::before{content:"";position:absolute;top:.65em;left:-14px;width:4px;height:4px;border-radius:50%;background:var(--text);}
.qv-task-card li+li{margin-top:6px;}

.qv-kpi-box{--qv-theme:var(--qv-blue);display:flex;align-items:center;justify-content:center;min-height:80px;padding:20px;border:2px dashed var(--qv-theme);border-radius:5px;color:var(--text);font-size:var(--fs-20);line-height:1.4;text-align:center;word-break:keep-all;}

.qv-result-box{display:flex;align-items:center;justify-content:center;min-height:80px;height:100%; padding:20px 30px;border:1px solid var(--gray-200);border-radius:5px;color:var(--gray-400);font-size:var(--fs-20);font-weight:700;line-height:1.4;text-align:center;word-break:keep-all;}
.qv-result-box.left {text-align: left; justify-content: flex-start;}

@media screen and (max-width:1200px){
.qv-method-card{padding-inline:28px;}
.qv-method-grid{gap:15px;}
}

@media screen and (max-width:1138px){
.qv-method-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;}
.qv-method-text{min-height:134px;}
}

@media screen and (max-width:1024px){
.qv-method-grid,.qv-task-grid,.qv-kpi-grid{grid-template-columns:1fr;}
.qv-task-grid{gap:34px;}
.qv-method-text{min-height:auto;}
.qv-method-card{justify-content: center;}
.qv-method-card{flex-direction: initial;}
}

@media screen and (max-width:768px){
.quality-vision-system{gap:18px;}
.qv-row{grid-template-columns:1fr;gap:10px;}
.qv-head{min-height:58px;padding:14px 18px;}
.qv-policy-box{min-height:68px;padding:16px 20px;font-size:var(--fs-24);}
.qv-method-card{min-height:auto;padding:24px;align-items:flex-start;}
.qv-method-text{min-height:0;}
.qv-method-text strong{width:auto;min-width:210px;}
.qv-task-card ul{min-height:auto;}
.qv-result-box{align-items:flex-start;justify-content:flex-start;text-align:left;}
}

@media screen and (max-width:480px){
.qv-method-card{align-items:center;text-align:center;}
.qv-method-text{width:100%;}
.qv-method-text strong{margin-inline:auto;}
.qv-method-img{margin-inline:auto;}
.qv-method-text p br{display:none;}
.qv-task-card li,.qv-kpi-box,.qv-result-box{font-size:var(--fs-18);}
}

@media screen and (max-width:400px){
    .qv-method-card {flex-direction:column;}
}


/**************************************************
  040603 KPS기술 - 품질활동 - 품질경영시스템체계 구축
***************************************************/
.qms-model-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.qms-model-card{display:flex;flex-direction:column;justify-content:flex-start;min-height:111px;padding:30px;border:1px solid var(--border);border-radius:10px;background:var(--white);}
.qms-model-card span{margin-bottom:16px;color:var(--gray-300);font-size:var(--fs-18);line-height:1;}
.qms-model-card strong{color:var(--primary-1);font-size:var(--fs-20);line-height:1.3;word-break:keep-all;}

@media screen and (max-width:1200px){
.qms-model-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}


@media screen and (max-width:768px){
.qms-model-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap: 14px;}
.qms-model-card{min-height:92px;padding:24px;}
}