body {word-break:keep-all;}

/* 서브페이지 키비쥬얼 */
#SUB_KEYVISUAL .gu_sub_top .kv_img_area {background-image: url('../../../../img/sustainability/hdh/esg/KV_visual.png');}
.gu_content h2.gu_title { padding-bottom: 0; }

.mo { display:none; }
.sec { margin-top:110px; }

.sec_title { color: #222; font-size: 32px; font-weight: 700; line-height: 1.4; letter-spacing: -0.8px; margin-bottom:24px; }
.sec_desc { color: #666; font-size: 16px; font-weight: 400; line-height: 1.75; letter-spacing: -0.4px; }

.sec01 .imgbg { width:100%; height:auto; background: url('../../../../img/sustainability/system/vision/system_vision_bg01.jpg') center / cover no-repeat; aspect-ratio: 960/286; margin-top:55px; }

.sec02 .tbl { display:flex; flex-direction: column; gap:14px; }
.sec02 .tbl * { display:flex; flex-direction: column; }
.sec02 .tbl .tr { flex-direction: row; gap:20px; }
.sec02 .tbl .th { width:120px; flex-shrink:0; color: #000; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: -0.375px; position:relative; padding-top:9px; border-top:1px solid #000; }
.sec02 .tbl .th:after { content:""; display:block; height:8px; width:8px; position:absolute; right:0; top:-4px; background:url('../../../../img/sustainability/system/vision/th-arrow.svg') right center / auto 8px no-repeat; }
.sec02 .tbl .td { width:100%; text-align: center; padding:18px 0; border-top: 1px solid #000; gap:4px; }
.sec02 .tbl .tr:nth-child(1) .td { background: url('../../../../img/sustainability/system/vision/td01-bg.png') center / cover no-repeat; }
.sec02 .tbl .tr:nth-child(2) .td { background: url('../../../../img/sustainability/system/vision/td02-bg.png') center / cover no-repeat; }
.sec02 .tbl .td > .tit { color: #2A3D77; font-size: 20px;  font-weight: 700; line-height: 1.4; letter-spacing: -0.2px; }
.sec02 .tbl .td > .desc { color: #000; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; }
.sec02 .tbl .td.none { padding:0; border:0; }
.sec02 .tbl .td .ul { flex-direction: row; text-align:left; gap: 10px; }
.sec02 .tbl .td .li { width:33.3%; }
.sec02 .tbl .td .li .tp { flex-direction: row; background: #014099; padding:10px 15px; justify-content: space-between; }
.sec02 .tbl .td .li .tp .text > .tit { display:block; color: #FFF; font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: -0.16px; gap:4px; }
.sec02 .tbl .td .li .tp .text > .tit strong { display:inline; }
.sec02 .tbl .td .li .tp .text > .desc { color: #FFF; font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: -0.12px; }
.sec02 .tbl .td .li .tp .icon { width:26px; height:auto; aspect-ratio:1/1; background:center / 100% auto no-repeat; flex-shrink: 0; }
.sec02 .tbl .td .li:nth-child(1) .tp .icon { background-image:url('../../../../img/sustainability/system/vision/fi-rr-flower-tulip.svg'); }
.sec02 .tbl .td .li:nth-child(2) .tp .icon { background-image:url('../../../../img/sustainability/system/vision/fi-rr-user.svg'); }
.sec02 .tbl .td .li:nth-child(3) .tp .icon { background-image:url('../../../../img/sustainability/system/vision/fi-rr-hand-holding-heart.svg'); }
.sec02 .tbl .td .li .tb { padding:15px 0; padding-right:10px; border-top:1px solid #E0E0E0; }
.sec02 .tbl .td .li .tp + .tb { margin-top:20px; border-color: #000; }
.sec02 .tbl .td .li .tb > .tit { color: #000; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: -0.13px; }
.sec02 .tbl .td .li .tb > .desc { color: #333; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: -0.13px; }

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
    .sec_title { font-size:24px; }
    .sec02 .tbl .th { width:16%; }
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px) {
    .pc { display:none; }
    .mo { display:block; }

    .sec { margin-top:80px; }
    .sec_desc { font-size:15px; line-height:1.45; letter-spacing: -0.3px; }
    .sec01 .imgbg { background-image: url('../../../../img/sustainability/system/vision/system_vision_bg01_m.jpg'); aspect-ratio: 370/500; margin-top:40px; }

    .sec02 .tbl { gap:28px; }
    .sec02 .tbl .tr { display:block; }
    .sec02 .tbl .th { width:100%; padding:10px 0; }
    .sec02 .tbl .td .ul { flex-direction: column; }
    .sec02 .tbl .td .li { width:100%; }
}