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/hdh/esg/overview/esg_overview_bg01.jpg') center / cover no-repeat; aspect-ratio: 960/286; margin-top:55px; }

.listbx .bx { display:flex; justify-content: flex-start; align-items: center; padding:30px 0; border-bottom: 1px solid #F0F0F0; }
.listbx .bx .no { color: #062F87; font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -0.36px; margin-right:20px; margin-top:-5px; }
.listbx .bx .title { color: #000; font-size: 30px;  font-weight: 700; line-height: 1.5; letter-spacing: -0.3px; width:350px; }
.listbx .bx .desc { color: #63666A; font-size: 20px;  font-weight: 500; line-height: 1.4; letter-spacing: -0.4px; }

.categorywr { display:flex; justify-content: space-between; margin:55px 0 24px; }
.categorywr > * { width:172px; color: #000; text-align: center; font-size: 18px; font-weight: 700; line-height: 1.6; letter-spacing: -0.18px; }

.gu_circle_wr { margin-bottom:40px; }
.gu_circle_wr .gu_circle_out { gap:clamp(8px, 3vw, 55px); }

.gu_table.gu_su table td { text-align:left; border:1px solid #F0F0F0; }
.gu_table.gu_su table td:first-child { border-left:0; }
.gu_table.gu_su table td:last-child { border-right:0; }
.gu_table.gu_su table td p { display:flex; }
.gu_table.gu_su table td p + p { margin-top:8px; }
.gu_table.gu_su table td p:before { content:"-"; display:block; margin-right:3px; }
.gu_table.gu_su table + table { margin-top:32px; }

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
    .sec_title { font-size:24px; }
    .listbx .bx .title { font-size:24px; width:270px; }
    .listbx .bx .desc { font-size:16px; }
    .gu_circle_wr .gu_circle_out { gap:clamp(8px, 1vw, 55px); }
    .gu_circle_wr .gu_circle_in { width: calc(17.5vw - 20px); }
}

/* ================================== 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/hdh/esg/overview/esg_overview_bg01_m.jpg'); aspect-ratio: 370/500; margin-top:40px; }

    .listbx .bx { flex-direction: column; align-items: flex-start; padding:30px 0; gap:10px; }
    .listbx .bx .no { font-size: 15px; letter-spacing: -0.3px; margin:0; }
    .listbx .bx .title { line-height: 1.2; letter-spacing: -0.24px; }
    .listbx .bx .desc { font-size: 15px; letter-spacing: -0.3px; margin-top:5px; }

    .sec03 .bx { min-width:220px; }
    .sec03 .bx .titwr { position:relative; color: #FFF; padding:16px; background: #014099; }
    .sec03 .bx .titwr:after { content:"";  display:block; position:absolute; top:0; left:0; width:100%; height:100%; background: url('../../../../img/sustainability/hdh/esg/bx_stroke_bg.svg') right center / auto 100% no-repeat; opacity:0.2; }
    .sec03 .bx .titwr .category { font-size: 16px; font-weight: 700; line-height: 1.6; letter-spacing: -0.16px; opacity:0.8; }
    .sec03 .bx .titwr .title { font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: -0.17px; }
    .sec03 .bx .decwr { padding:16px; }
    .sec03 .bx .decwr .tit { color: #000; font-size: 15px; font-weight: 700; line-height: 1.45; letter-spacing: -0.3px; margin-bottom:10px; }
    .sec03 .bx .decwr .desc { color: #63666A; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.56px; }
    .sec03 .bx .decwr .desc p + p { margin-top:5px; }
    .sec03 .bxWr { display:flex; justify-content: flex-start; align-items: stretch; gap:24px; overflow-x:scroll; margin:40px 0 50px; }
    .sec03 .bxWr .bx .titwr { background:#002554; }
}