body {word-break:keep-all; }
.mo { display:none !important; }

/* 서브페이지 키비쥬얼 */
#SUB_KEYVISUAL .gu_sub_top .kv_img_area {background-image: url('../../../../img/sustainability/social/KV_visual.png');}
.gu_content h2.gu_title { padding-bottom: 110px; }
.gu_tab_depth4 ul li { min-width:50% !important; width:50% !important; }

.sec * { box-sizing: border-box; }
.sec + .sec { margin-top:100px; }
.sec .bx + .bx { margin-top:100px; }
.sec .bx > .title { color: #222; font-size: 32px; font-weight: 700; line-height: 1.4; letter-spacing: -0.8px; margin-bottom:24px; }
.sec .bx > .title span { color: #63666A; font-size: 14px; font-weight: 400; }
.sec .bx > .title.small { font-size:24px; letter-spacing: -0.24px; }
.sec .bx > .desc { color: #63666A; font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: -0.4px; }
.sec .bx > .desc span { font-size:15px; }
.arr_gra { width:clamp(150px, 15.7vw, 300px); background:url('../../../../img/sustainability/social/customer-satisfaction/arrow_gra.png') center / cover no-repeat; aspect-ratio: 300/38; margin:0 auto; }
.sec .bx.list > ul { margin:45px 0; }
.sec .bx.list > ul li {  padding: 15px 35px; border-radius: 50px; border: 1px solid rgba(0, 64, 152, 0.20); background: #F8F8F8; color: #000; font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: -0.4px; }
.sec .bx.list > ul li + li { margin-top:10px; }

.section01 .imgwr.bg { width:100%; background:url('../../../../img/sustainability/social/customer-satisfaction/sec01_img01.jpg') center / cover no-repeat; aspect-ratio: 957/285; margin-bottom:100px; }
.section01 .title + title.small { margin-top:70px; }
.section01 .imgwr.gra { width:100%; background:url('../../../../img/sustainability/social/customer-satisfaction/sec01_img02.png') center / min(100%, 744px) auto no-repeat; aspect-ratio: 744/740; }
.section01 .bxwr { display:flex; justify-content: center; align-items: stretch; gap:22px; margin-bottom:50px; }
.section01 .bxwr .txbx { color: #014099; font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -0.36px; border: 1px solid #014099; background: #F5F8FB; padding:25px 10px; width:24.5%; text-align: center; }
.section01 .stepwr { display:flex; justify-content: center; align-items: stretch; gap:22px; text-align: center; position:relative; padding-top:30px; }
.section01 .stepwr:before { content:""; display:block; position:absolute; left:50%; transform: translateX(-50%); top:0; width:calc(24.5% * 3 + 44px); height:auto; aspect-ratio: 747/18; background:url('../../../../img/sustainability/social/customer-satisfaction/arrow_bar.svg') center / 100% auto no-repeat; }
.section01 .stepbx { display:flex; flex-direction: column; width:24.5%; gap:16px; position:relative; }
.section01 .stepbx:after { content:""; display:block; position:absolute; left:50%; transform: translateX(-50%); top:0; width:1px; height:100%; background: #014099; z-index:-1; }
.section01 .stepbx .titlewr { text-align:center; font-weight: 700; line-height: 1.4; border: 1px solid #014099; padding:16px; background:#fff; }
.section01 .stepbx .titlewr .step { color: #014099; font-size: 14px; letter-spacing: -0.28px; margin-bottom:4px; }
.section01 .stepbx .titlewr .title { color: #2F3633; font-size: 18px; letter-spacing: -0.36px; }
.section01 .stepbx .desc { height:100%; color: #2F3633; font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: -0.64px; padding: 16px; border: 1px solid #014099; background: #F5F8FB; }
.section01 .stepbx .slogan { color: #FFF; font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -0.36px; background: #014099; padding:20px 16px; }

.section02 .gu_circle_wr { flex-direction: column; justify-content: center; font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -0.36px; text-align: center;  color: #000; }
.section02 .gu_circle_wr .gu_circle_out { width:auto; padding:20px; gap:20px; }
.section02 .gu_circle_wr .gu_circle_in { width:160px; }
.section02 .gu_circle_wr .title { color: #000; }
.section02 .gu_circle_wr .arr_gra { margin:30px auto; }
.section02 .gu_circle_wr .slogan .gu_circle_in { color: #FFF; border-radius: 50px; background: #014099; padding:15px; aspect-ratio: unset; }
.section02 .auditwr { display:flex; align-items:center; padding:50px 80px; border: 1px solid #E0E0E0; gap:130px; }
.section02 .auditwr .mark { width:233px; height:auto; aspect-ratio: 233/229; background:url('../../../../img/sustainability/social/customer-satisfaction/img_mark.svg') center / cover no-repeat; }
.section02 .auditwr .text .tit { color: #000; font-size: 30px; font-weight: 700; line-height: 1.5; letter-spacing: -0.3px; margin-bottom:15px; }
.section02 .auditwr .text .des { color: #63666A; font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: -0.4px; }

.gu_swiper { position:relative; margin-top:50px; }
.gu_swiper .swiper-container .swiper-slide img { margin-bottom:80px; }
.gu_swiper .swiper-container .direction_area .slide_empty { margin-bottom:20px; }
.gu_swiper .swiper-container .direction_area .slide_empty img { width:auto; height:100%; max-height:305px; aspect-ratio: 960/305;}
.gu_swiper .swiper-container .direction_area .btn_arrow { display: flex; justify-content: center; align-items: center; margin:0 auto; gap:70px; }
.gu_swiper .swiper-container .direction_area .btn_arrow > div { width:56px; height:auto; aspect-ratio: 1/1; margin:0; }
.gu_swiper .swiper-container .direction_area .btn_arrow > div:before { display:none; }
.gu_swiper .swiper-container .direction_area .swiper-button-prev { background-image:url('../../../../img/sustainability/social/customer-satisfaction/slide_next_btn.svg') }
.gu_swiper .swiper-container .direction_area .swiper-button-next { background-image:url('../../../../img/sustainability/social/customer-satisfaction/slide_next_btn.svg') }
.gu_swiper .swiper-container .direction_area .btn_arrow .swiper-pagination-custom-wrap { display:flex; justify-content: center; align-items: center; padding:0; position: relative; width: auto; font-size: 16px; color: #63666A;}
.gu_swiper .swiper-container .direction_area .swiper-pagination-custom-wrap .current { color: #00AD1D; }


/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
    .section01 .bxwr .txbx, .section01 .stepbx { width:min(30%, 235px); }
    .section01 .stepwr:before { width:calc(min(30%, 235px) * 3 + 44px); }
    .section02 .gu_circle_wr .gu_circle_out { flex-direction: row; }
    .section02 .gu_circle_wr .gu_circle_in { width:clamp(140px, 18vw, 160px); }
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px) {
    .pc { display:none !important;; }
    .mo { display:block !important;; }
    .gu_content h2.gu_title { padding-bottom:80px; }

    .sec + .sec { margin-top:70px; }
    .sec .bx + .bx { margin-top:70px; }
    .sec .bx > .title { font-size: 24px; margin-bottom:18px; }
    .sec .bx > .title span { font-size: 14px; }
    .sec .bx > .title.small { font-size:17px; }
    .sec .bx > .title.small.center { text-align: center; }
    .sec .bx > .desc { font-size: 15px; line-height: 1.45; }
    .sec .bx > .desc span { font-size:15px; }
    .sec .bx.list > ul { margin:35px 0; }
    .sec .bx.list > ul li {  padding: 15px 25px; font-size: 15px; }
    .sec .bx.list > ul li + li { margin-top:8px; }

    .section01 .imgwr.bg { background-image:url('../../../../img/sustainability/social/customer-satisfaction/sec01_img01_m.jpg'); aspect-ratio: 364/400; margin-bottom:70px; }
    .section01 .bxwr, .section01 .stepwr { flex-direction: column; }
    .section01 .bxwr .txbx, .section01 .stepbx { width:100%; font-size:16px; }
    .arr_gra { width:80%; }
    .section01 .stepwr { padding-top:0; padding-right:10%; gap:30px; }
    .section01 .stepwr:before { background-image:url('../../../../img/sustainability/social/customer-satisfaction/arrow_bar_m.svg'); aspect-ratio: 18/1266; left:unset; transform:none; right:0; width:auto; height:100%; }
    .section01 .stepbx .titlewr .title { font-size:16px; }
    .section01 .stepbx .desc { display:flex; justify-content:center; align-items:center; height:220px; font-size:14px; }

    .section02 .gu_circle_wr .gu_circle_out { flex-direction: column; border: 1px solid #014099; }
    .section02 .gu_circle_wr .slogan { border-radius:40px; }
    .section02 .gu_circle_wr .slogan .gu_circle_in { font-size:15px; }
    .section02 .auditwr { padding:10% 11% 15%; flex-direction: column; gap:30px; }
    .section02 .auditwr .text { width:100%; }
    .section02 .auditwr .text .tit { font-size:24px; }
    .section02 .auditwr .text .des { font-size:15px; }

    .gu_swiper .swiper-container .direction_area .slide_empty img { width:auto; height:100%; max-height:100%; aspect-ratio: 360/400;}
    .gu_swiper .swiper-container .swiper-slide img { margin-bottom:0; margin-top:20px; }
    .gu_swiper .swiper-container .direction_area .slide_empty { margin-top:20px; }
    .gu_swiper .swiper-container .direction_area .btn_arrow .swiper-pagination-bullets-wrap { position: absolute; right: 0; width: auto; aspect-ratio: unset; display: flex !important; justify-content: flex-end; gap: 7px;}
    .gu_swiper .swiper-container .direction_area .btn_arrow .swiper-pagination-bullets-wrap .swiper-pagination-bullet { border-radius:0; width:10px; height:10px; }
    .gu_swiper .swiper-container .direction_area .btn_arrow .swiper-pagination-bullets-wrap .swiper-pagination-bullet-active { background:#000; }
}