body {word-break:keep-all;}

.mo { display:none; }
#SUSTAINABILITY_ENVIRONMENT, .section02 { margin-bottom:0 !important; }

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

#ENVIRONMENT .bx { margin-bottom:110px; }
#ENVIRONMENT .bx .tit { color: #222; font-size: 32px; font-weight: 700; line-height: 1.4; letter-spacing: -0.8px; margin-bottom:50px; }
#ENVIRONMENT .bx .tit_sub { color: #000; font-size: 24px; font-weight: 700; line-height: 1.4; letter-spacing: -0.24px; margin-bottom: 20px; margin-top:30px; }
#ENVIRONMENT .bx .tit_sub.center { text-align: center; }
#ENVIRONMENT .bx .tit_sub span { color: #919593; font-size: 18px; font-weight: 400; line-height: 1.4; letter-spacing: -0.36px; }
#ENVIRONMENT .bx > .desc { color: #63666A; font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: -0.4px; }

.vision { display:flex; flex-direction: column; justify-content: center; align-items: center; color:#fff; line-height: 1.4; position:relative; background:#014099; padding:35px; margin-bottom:60px; }
.vision:after { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background: url('../../../../img/sustainability/environment/circulation/bx_stroke_bg.svg') right center / auto 100% no-repeat; opacity:0.5; }
.vision .title { font-size: 24px; font-weight: 700; letter-spacing: -0.24px; margin-bottom:10px; }
.vision .desc { font-size: 18px; font-weight: 500; letter-spacing: -0.36px; }

.gu_circle_wr { margin-bottom:60px; }
.gu_circle_wr .gu_circle_in { width:178px; }
.gu_circle_wr .gu_circle_in .desc { height:50px; }
.gu_circle_wr.img { gap:18px; }
.gu_circle_wr.img .gu_circle_out { gap:24px; }
.gu_circle_wr.img .gu_circle_in { border:0; }
.gu_circle_wr.img .desc { color: #000; font-size: 18px;  font-weight: 500; line-height: 1.4; letter-spacing: -0.36px; margin-right:auto; }
.gu_circle_wr.img .plus { width:16px; height:auto; aspect-ratio: 1/1; background:url('../../../../img/sustainability/environment/circulation/section01_img_plus.svg') center / 100% auto no-repeat; flex-shrink: 0; }

.full { color:#fff; }
.full .title_sub { font-size: 32px; font-weight: 700; line-height: 1.25; margin-bottom:30px; }
.full .title { font-size: 100px; font-weight: 700; line-height: 1; margin-bottom:80px; }
.full .desc_tit { font-size: 24px; font-weight: 700; line-height: 1.4; letter-spacing: -0.24px; margin-bottom:20px; }
.full .desc { font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: -0.4px; }

.gu_table.gu_su table td { padding:32px 13px; vertical-align:middle; }

.cardwr { display:flex; justify-content: space-between; align-items:stretch; gap:10px; }
.cardwr .card { border: 1px solid #E0E0E0; width:25%; padding:45px 40px; }
.cardwr .card .sub { color: #00AD1D; font-size: 16px; font-weight: 700; line-height: 1.6; letter-spacing: -0.64px; margin-bottom:20px; }
.cardwr .card .num { color: #2F3633; font-size: 52px; font-weight: 800; line-height: 1.3; }
.cardwr .card .num p { color: #63666A; font-size: 16px; font-weight: 400; line-height: 1; }

.section01 .imgwr.bg { width:100%; height:auto; background: url('../../../../img/sustainability/environment/circulation/section01_bg.jpg') center / cover no-repeat; aspect-ratio: 960/320; margin-bottom:30px; }
.section01 .imgwr.img01 { width:100%; height:auto; background: url('../../../../img/sustainability/environment/circulation/section01_img01.png') center / auto no-repeat; aspect-ratio: 960/320; margin-bottom:30px; border: 1px solid #E0E0E0; }
.section01 * + .tit_sub { margin-top:80px !important; }
.section02 { background:url('../../../../img/sustainability/environment/circulation/section02_bg.jpg') center / cover no-repeat; padding:300px 0 700px; }
#ENVIRONMENT .section02 .bx .tit_sub { color:#fff; margin-top:250px; }
.full.section02 .title { margin-bottom:110px; }
.section02 .bx .circle_wr { display:flex; justify-content: space-between; align-items: center; }
.section02 .bx .circle_wr .item { display:flex; flex-direction:column; justify-content: center; align-items: center; background:#fff; border-radius:300px; width:260px; height:auto; aspect-ratio: 1/1; }
.section02 .bx .circle_wr .item .symbol { margin-bottom:12px; }
.section02 .bx .circle_wr .item .name { color: #000; font-size: 24px; font-weight: 700; line-height: 1.4; letter-spacing: -0.24px; }
.section02 .bx .circle_wr .arr { width:45px; height:auto; aspect-ratio: 1/1; background:url('../../../../img/sustainability/environment/circulation/section02_arrow.svg') center / cover no-repeat; }
.section03 .bx img, .section04 .bx img { margin-top:30px; }

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
    .pc { display:none; }

    #ENVIRONMENT .bx .tit { font-size:24px; }
    .gu_content { padding:70px 50px 0; margin:0 auto; }
    .gu_circle_wr .gu_circle_out { gap:clamp(8px, 1vw, 55px); }
    .gu_circle_wr.img .gu_circle_out {  gap:clamp(12px, 1vw, 24px);  }
    .gu_circle_wr.img .gu_circle_in { width: clamp(55px, 13vw, 178px); }
    .gu_circle_wr.img .gu_circle_in img { height:clamp(45px, 8vw, 90px); }

    #ENVIRONMENT .bx > .desc { font-size:18px; }
    #ENVIRONMENT .bx .tit_sub span { font-size:15px; }
    .gu_circle_wr .gu_circle_in .desc { font-size:17px; }
    .gu_circle_wr.img .desc { font-size:17px; }

    .full .title_sub { font-size: 28px; margin-bottom:28px; }
    .full .title, .full.section02 .title { font-size: 80px; margin-bottom:60px; }
    .full .desc_tit { font-size: 20px;margin-bottom:18px; }
    .full .desc { font-size: 18px; }

    .cardwr .card { padding: clamp(22px, 4vw, 45px) clamp(18px, 3vw, 40px); }

    .section02 { padding: 200px 50px 500px; }
    #ENVIRONMENT .section02 .bx .tit_sub { margin-top:150px; }
    .section02 .bx .circle_wr .item { width:clamp(150px, 20vw, 260px); }
    .section02 .bx .circle_wr .item .symbol { margin-bottom:8px; }
    .section02 .bx .circle_wr .item .symbol img { height:clamp(70px, 9vw, 96px); }
    .section02 .bx .circle_wr .item .name { font-size:clamp(18px, 2.35vw, 24px); }
}

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

    #ENVIRONMENT .bx { margin-bottom:80px; }
    #ENVIRONMENT .bx .tit { font-size:20px; margin-bottom:24px; }
    #ENVIRONMENT .bx .tit_sub { font-size:17px; }
    #ENVIRONMENT .bx .tit_sub span { font-size:13px; }
    #ENVIRONMENT .bx > .desc { font-size:15px; }

    .vision { padding:25px 10px; }
    .vision:after { left:unset; right:-60%; }
    .vision .title { font-size:20px; }
    .vision .desc { font-size:16px; }

    .gu_circle_wr .gu_circle_in .text { font-size:16px; }
    .gu_circle_wr .gu_circle_in .desc { height:auto; }
    .gu_circle_wr.img { flex-direction: column; }
    .gu_circle_wr.img .gu_circle_in { width:178px; }
    .gu_circle_wr.img .gu_circle_in img { height:auto; }
    .gu_circle_wr.img .desc { text-align:center; margin:0; }
    .gu_circle_wr.img .gu_circle_out { padding:24px 24px 50px; gap:24px; align-items:center; }

    .btnwr { display:block; }
    .btnwr .download + .download { margin-top:15px; }

    .full .title_sub { font-size: 24px; margin-bottom:28px; }
    .full .title, .full.section02 .title { font-size: 40px; margin-bottom:60px; }
    .full .desc_tit { font-size: 17px; margin-bottom:18px; }
    .full .desc { font-size: 15px; }

    .cardwr { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap:10px; }
    .cardwr .card { width:100%; box-sizing: border-box; }
    .cardwr .card .sub { font-size:14px; }
    .cardwr .card .num { font-size:36px; }
    .cardwr .card .num p { font-size:13px; display:inline-block; margin-left: -6px; }

    .section01 .imgwr.bg { background-image: url('../../../../img/sustainability/environment/circulation/section01_bg_m.jpg'); aspect-ratio: 360/300; }
    .section01 .imgwr.img01 { aspect-ratio: 312/322; }
    .section02 { padding: 100px 20px 400px; background-position-x: 0; }
    .section02 .bx .circle_wr { flex-direction: column; gap:10px; }
    #ENVIRONMENT .section02 .bx .tit_sub { text-align:center; margin-top: 100px; }
    .section02 .bx .circle_wr .arr { transform:rotate(90deg); }
    .section03 .bx img, .section04 .bx img { margin-top:15px; }
}