.col01 {color:var(--col01) !important;}
.col02 {color:var(--col02) !important;}
.col03 {color:var(--col03) !important;}
.col04 {color:var(--col04) !important;}
.col05 {color:var(--col05) !important;}
.waitbox {text-align:center; background:var(--lbg); padding:40px 20px; border-radius:8px;}
.waitbox .t01 {font-size:1.5em; font-weight:700; margin:0 0 10px;}
.waitbox .t02 {opacity:0.8;}
.br8 {border-radius:8px;}
.br16 {border-radius:16px;}


/*sub*/
#sub .subtab {display:flex; flex-wrap:wrap; margin:0 0 40px; text-align:center; gap:10px 2%;}
#sub .subtab a {border:1px solid var(--border); border-radius:8px; width:49%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; padding:1em 0.5em; color:var(--col05);}
#sub .subtab a.on {color:#fff; background:var(--col01); background:linear-gradient(90deg, var(--col01) 0%, var(--col02) 100%); border:0;}
#sub .titbox {display:flex; flex-wrap:wrap; gap:20px 5%;}
#sub .titbox > .tit {width:100%; margin:0 0 20px;}
#sub .titbox > .con {width:100%;}
#sub .tabbox {overflow-x:auto;}
#sub .tab01 {border-top:2px solid var(--col01); width:100%;}
#sub .tab01 tr {border-bottom:1px solid var(--border);}
#sub .tab01 th,
#sub .tab01 td {padding:0.4em 0.2em; vertical-align:middle;}
#sub .tab01 th:not(:last-child),
#sub .tab01 td:not(:last-child),
#sub .tab01 .bdr {border-right:1px solid var(--border);}
#sub .tab01 th {background:var(--lbg);}
#sub .h_l {font-weight:800; font-size:1.75em; line-height:1.25;}
#sub .h_m {font-weight:700; font-size:1.25em; line-height:1.25;}
#sub .h_s {font-weight:700; font-size:1.1em;}
#sub .bg01 {background:#f0f2f1; padding:60px 0 80px;}
#sub .bg02 {background:#f6f6f8; padding:60px 0 80px;}
#sub .bg01 .img_li li img,
#sub .bg02 .img_li li img {border:1px solid rgba(0,0,0,0.05);}
#sub .box01 {border:1px solid var(--border); padding:20px; border-radius:8px;}
#sub .box02 {background:#f0f2f1; padding:20px; border-radius:8px;}
#sub .box03 {background:#f6f6f8; padding:20px; border-radius:8px;}

@media all and (min-width:768px) {
  #sub .subtab {margin:0 0 60px; border:1px solid var(--border); border-radius:8px; overflow:hidden; gap:0;}
  #sub .subtab a {width:unset; flex:1; border:0; border-radius:0;}
  #sub .titbox > .tit {width:20%;}
  #sub .titbox > .con {width:75%;}
  #sub .bg01,
  #sub .bg02 {padding:80px 0 100px;}
  #sub .box01,
  #sub .box02,
  #sub .box03 {padding:30px;}
}

@media all and (min-width:1200px) {
  #sub .subtab {margin:0 0 80px;}
  #sub .subtab a {font-size:1.1em;}
  #sub .h_l {font-size:2em;}
  #sub .h_m {font-size:1.5em;}
  #sub .h_s {font-size:1.15em;}
  #sub .tab01 th,
  #sub .tab01 td {padding:0.6em;}
}


/*인사말*/
#sub .greet .greetbox {display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 5%;}
#sub .greet .greetbox .img,
#sub .greet .greetbox .txt {width:100%;}
#sub .greet .greetbox .img {text-align:right;}
#sub .greet .greetbox .img img {border:1px solid var(--border); border-radius:8px; width:min(30%, 120px);}
#sub .greet .greetbox .txt .ceo {text-align:right; margin:20px 0 0;}
#sub .greet .greetbox .txt .ceo b {letter-spacing:0.3em; margin-left:1em; font-size:1.1em;}

@media all and (min-width:768px) {
  #sub .greet .greetbox {flex-wrap:nowrap; flex-direction:row-reverse;}
  #sub .greet .greetbox .img {width:15%;}
  #sub .greet .greetbox .img img {width:100%;}
  #sub .greet .greetbox .txt {width:80%;}
}

@media all and (min-width:1200px) {
  #sub .greet .greetbox .txt {font-size:1.1em;}
}


/*연혁*/
#sub .history .historybox {display:flex; flex-wrap:wrap; flex-direction:column-reverse; gap:40px 0; position:relative;}
#sub .history .historybox:before {content:''; display:inline-block; width:10px; height:100%; border-radius:100px; background:var(--lbg); position:absolute; left:0; top:0; z-index:-1;}
#sub .history .historybox .box {width:100%;}
#sub .history .historybox .box .year {font-size:1.25em; font-weight:700; margin:0 0 20px; color:var(--col04); display:flex; align-items:center; gap:20px;}
#sub .history .historybox .box:last-child .year {color:var(--col01);}
#sub .history .historybox .box .year:before {content:''; display:inline-block; width:10px; height:10px; border-radius:100%; background:var(--border);}
#sub .history .historybox .box:last-child .year:before {background:var(--col01);}
#sub .history .historybox .box dl {padding:0 0 0 30px; display:flex; flex-wrap:wrap;}
#sub .history .historybox .box dt {color:var(--col04); font-weight:600; width:5em;}
#sub .history .historybox .box dd {width:100%;}
#sub .history .historybox .box dt + dd {width:calc(100% - 5em);}

@media all and (min-width:768px) {
  #sub .history .historybox .box {display:flex; align-items:center; justify-content:space-between;}
  #sub .history .historybox .box .year {width:20%; margin:0; gap:40px;}
  #sub .history .historybox .box:last-child .year {font-size:1.5em;}
  #sub .history .historybox .box dl {width:75%; padding:20px; border-radius:8px; border:1px solid var(--border);}
}

@media all and (min-width:1200px) {
  #sub .history .historybox {gap:60px 0;}
  #sub .history .historybox .box .year {font-size:1.5em;}
  #sub .history .historybox .box:last-child .year {font-size:2em;}
  #sub .history .historybox .box dl {padding:30px;}
}


/*조직도*/
:root {--orgline:30px;}
#sub .org .orgbox {position:relative; text-align:center;}
#sub .org .orgbox:after {content:''; display:inline-block; width:1px; height:100%; background:var(--border); position:absolute; left:50%; top:0; z-index:-1;}
#sub .org .orgbox ul {display:flex; align-items:flex-start; justify-content:center; gap:0 2%; position:relative;}
#sub .org .orgbox ul:not(:first-child) {margin-top:var(--orgline);}
#sub .org .orgbox ul li {display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; box-sizing:border-box;}
#sub .org .orgbox .dep01 li {width:49%; padding:10px; border-radius:8px; background:var(--col01); background:var(--col01); background:linear-gradient(90deg, var(--col01) 0%, var(--col02) 100%); color:#fff; border:0;}
#sub .org .orgbox .dep01 li p {font-size:1.1em; font-weight:700;}
#sub .org .orgbox .dep01 li em {display:block; font-size:min(0.8em, 18px);}
#sub .org .orgbox .dep02 {padding-top:var(--orgline);}
#sub .org .orgbox .dep02:after {content:''; display:inline-block; width:76.5%; height:1px; background:var(--border); position:absolute; left:11.75%; bottom:100%; z-index:-1;}
#sub .org .orgbox .dep02 li {width:23.5%; background:var(--col04); background:#fff; border:2px solid var(--col01); color:var(--col04); padding:10px; border-radius:8px; font-weight:600;}
#sub .org .orgbox .dep02 li:last-child {margin-left:auto;}
#sub .org .orgbox .dep02 li:after {content:''; display:inline-block; width:1px; height:var(--orgline); background:var(--border); position:absolute; left:50%; bottom:100%; z-index:-1;}
#sub .org .orgbox .dep03 {padding-top:var(--orgline);}
#sub .org .orgbox .dep03:after {content:''; display:inline-block; width:68%; height:1px; background:var(--border); position:absolute; left:16%; bottom:100%; z-index:-1;}
#sub .org .orgbox .dep03 li {width:32%; flex-wrap:wrap;}
#sub .org .orgbox .dep03 li:not(:nth-of-type(2)):after {content:''; display:inline-block; width:1px; height:var(--orgline); background:var(--border); position:absolute; left:50%; bottom:100%; z-index:-1;}
#sub .org .orgbox .dep03 li > p {background:#808086; color:#fff; padding:10px; border-radius:8px; font-weight:600; width:100%;}
#sub .org .orgbox .dep03 dl {margin-top:var(--orgline); width:100%; padding:10px; border-radius:8px; border:1px solid var(--border); background:var(--lbg); position:relative; display:flex; flex-wrap:wrap; gap:10px 2%;}
#sub .org .orgbox .dep03 li:not(:nth-child(2)) dl:after {content:''; display:inline-block; width:1px; height:var(--orgline); background:var(--border); position:absolute; left:50%; bottom:100%; z-index:-1;}
#sub .org .orgbox .dep03 dl dd {width:100%; word-break:break-all; color:var(--col04); font-weight:500; display:flex; align-items:center; justify-content:center;}

@media all and (min-width:768px) {
  :root {--orgline:40px;}
  #sub .org .orgbox p {font-size:1.1em;}
  #sub .org .orgbox .dep01 li {width:32%;}
  #sub .org .orgbox .dep01 li p {font-size:1.25em;}
  #sub .org .orgbox .dep03 dl dd {width:49%; padding:10px; background:#fff; border-radius:8px;}
}

@media all and (min-width:1200px) {
  #sub .org .orgbox .dep03 dl {padding:20px;}
}


/*사업장*/
#sub .map .maplist {display:grid; grid-template-columns:auto; gap:40px;}
#sub .map .maplist .box {width:100%; border:1px solid var(--border); border-radius:8px; overflow:hidden;}
#sub .map .maplist .box .txt {padding:40px 20px;}
#sub .map .maplist .box .txt .t01 {color:var(--col01); font-weight:700; margin:0 0 10px;}
#sub .map .maplist .box .txt .t02 {font-weight:800; font-size:1.5em;}
#sub .map .maplist .box .txt dl {display:grid; grid-template-columns:auto 1fr; align-items:center; gap:0 1em;}
#sub .map .maplist .box .txt dt {font-weight:700;}
#sub .map .maplist .box .txt ul {display:flex; gap:10px; margin:20px 0 0;}
#sub .map .maplist .box .txt li {flex:1; background:#808086; color:#fff; text-align:center; border-radius:4px;}
#sub .map .maplist .box .txt li a {display:flex; align-items:center; justify-content:center; padding:10px; height:100%;}
#sub .map .mapwrap {width:100%; overflow:hidden; border-bottom:1px solid var(--border);}
#sub .map .mapwrap .cont {display:none;}
#sub .map .mapwrap .map_border {display:none;}
#sub .map .mapwrap .wrap_controllers {display:none;}
#sub .map .wrap_map button {height:unset;}

@media all and (min-width:768px) {
  #sub .map .maplist {grid-template-columns:1fr 1fr;}
}

@media all and (min-width:1200px) {
  #sub .map .maplist {gap:60px;}
  #sub .map .maplist .box .txt {padding:40px;}
  #sub .map .maplist .box .txt .t02 {font-size:1.75em;}
}


/*주요사업*/
#sub .biz .info01 {display:grid; grid-template-columns:1fr; gap:40px 60px;}
#sub .biz .info01 .txt ul {display:grid; grid-template-columns:1fr; gap:20px;}
#sub .biz .info01 .txt ul li:last-child:nth-child(odd) {grid-column:1 / -1;}
#sub .biz .info01 .txt ul li em {font-weight:700; color:var(--col01); display:inline-block; margin:0 0 20px;}
#sub .biz .info01 .txt ul li p {font-weight:700; font-size:1.1em;}
#sub .biz .info01 .txt ul li dl {margin:10px 0 0;}
#sub .biz .info01 .txt ul li dl dd {position:relative; padding-left:10px;}
#sub .biz .info01 .txt ul li dl dd:before {content:'\00B7'; position:absolute; left:0; top:0;}
#sub .biz .info01 .img img {width:100%; border:1px solid var(--border); border-radius:8px;}
#sub .biz .info02 {display:flex; flex-wrap:wrap; gap:40px 60px;}
#sub .biz .info02 .box {width:100%;}
#sub .biz .info02 .box > img {border:1px solid var(--border); border-radius:8px;}
#sub .biz .info02 .box dl {display:grid; grid-template-columns:auto 1fr; gap:5px 1em;}
#sub .biz .info02 .box dl dt {font-weight:700; color:var(--col01);}
#sub .biz .info02 .box dl ol li {position:relative; padding-left:10px;}
#sub .biz .info02 .box dl ol li:not(:last-child) {margin-bottom:5px;}
#sub .biz .info02 .box dl ol li:before {content:'\00B7'; position:absolute; left:0; top:0;}
#sub .biz .info02 .box dl ol li span {display:block; font-size:0.9em; color:#888;}
#sub .biz .info02 .box > img {width:100%; margin:0 0 20px;}
#sub .biz .info02 .box.type01 {display:grid; grid-template-columns:1fr; gap:40px;}
#sub .biz .info02 .box.type01 .img img {width:100%; border:1px solid var(--border); border-radius:8px;}
#sub .biz .info02 .box.type01 .imgli {display:flex; gap:10px;}
#sub .biz .info02 .box.type01 .imgli li img {object-fit:cover; width:100%; height:100%; border-radius:8px;}
#sub .biz .tit01 {font-weight:700; font-size:1.25em; position:relative; padding-top:1em;}
#sub .biz .tit01:after {content:''; display:inline-block; width:min(30%, 240px); height:2px; background:var(--col04); position:absolute; left:0; top:0;}

@media all and (min-width:768px) {
  #sub .biz .info01 {grid-template-columns:1fr 1fr;}
  #sub .biz .info01 .txt {order:1;}
  #sub .biz .info01 .img {order:2;}
  #sub .biz .info02 .box.type01 {grid-template-columns:1fr 1fr; gap:40px 60px;}
  #sub .biz .tit01 {font-size:1.5em;}
}

@media all and (min-width:1200px) {
  #sub .biz .info01 .txt ul {grid-template-columns:1fr 1fr;}
  #sub .biz .info02 {flex-wrap:nowrap;}
  #sub .biz .info02 .box {width:unset; flex:1; flex-shrink:0;}
  #sub .biz .tit01 {font-size:1.75em;}
}


/*제품소개*/
#sub .prdt .info01 {display:flex; flex-direction:column; gap:40px 60px;}
#sub .prdt .info01 .img img {border-radius:8px;}
#sub .prdt .tit01 {background:var(--col01); background:linear-gradient(90deg, var(--col01) 0%, var(--col02) 100%); color:#fff; font-weight:700; font-size:1.25em; padding:0.25em 1em; border-radius:8px;}

@media all and (min-width:768px) {
  #sub .prdt .info01 {flex-direction:row;}
  #sub .prdt .info01 .img {width:40%;}
  #sub .prdt .info01 .txt {width:60%;}
}

@media all and (min-width:1200px) {
  #sub .prdt .h_l {font-size:2.25em;}
}


/*핵심역량*/
:root{--cir : 40vw;}
#sub .core .info01 {position:relative; height:calc(var(--cir) * 1.75); margin-bottom:80px;}
#sub .core .info01 .cir {display:flex; align-items:center; justify-content:center; text-align:center; border-radius:100%; position:absolute; width:var(--cir); height:var(--cir); color:#fff;}
#sub .core .info01 .cir.type01 {background:#177D44F2; padding:0 0 1em; left:calc(50% - (var(--cir) / 2)); top:0;}
#sub .core .info01 .cir.type02 {background:#07124BF2; padding:1em 1em 0 0; left:calc(50% - var(--cir) + (var(--cir) * 0.1)); bottom:0;}
#sub .core .info01 .cir.type03 {background:#27272BF2; padding:1em 0 0 1em; left:calc(50% - (var(--cir) * 0.1)); bottom:0;}
#sub .core .info01 .cir.center {background:#fff; color:var(--col04); width:calc(var(--cir) / 2); height:calc(var(--cir) / 2); left:calc(50% - (var(--cir) / 4)); top:calc(50% - (var(--cir) / 6)); z-index:1; -webkit-box-shadow:0px 10px 40px 0px rgba(0,0,0,0.5); -moz-box-shadow:0px 10px 40px 0px rgba(0,0,0,0.5); box-shadow:0px 10px 40px 0px rgba(0,0,0,0.5);}
#sub .core .info01 .cir p {font-weight:700; font-size:1.25em;}
#sub .core .info01 .cir.center p {font-size:1.1em;}
#sub .core .info01 .cir p small {display:block; font-size:min(0.8em, 16px); font-weight:600;}
#sub .core .info01 .label {display:flex; align-items:center; justify-content:center; width:80px; height:30px; background:var(--col05); color:#fff; border-radius:100px; font-weight:500; position:absolute;}
#sub .core .info01 .label.type01 {top:calc(var(--cir) / 2); left:calc(50% - var(--cir));}
#sub .core .info01 .label.type02 {top:calc(var(--cir) / 2); right:calc(50% - var(--cir));}
#sub .core .info01 .label.type03 {left:calc(50% - 40px); bottom:-40px;}

@media all and (min-width:768px) {
  :root{--cir : 240px;}
  #sub .core .info01 {margin-bottom:100px;}
  #sub .core .info01:after {content:''; display:inline-block; width:800px; height:400px; border-radius:400px 400px 0 0; left:calc(50% - 400px); bottom:0; position:absolute; z-index:-1; background:var(--lbg); background:linear-gradient(180deg, var(--lbg) 0%, #fff 100%);}
  #sub .core .info01 .cir p {font-size:1.5em;}
  #sub .core .info01 .cir.center p {font-size:1.25em;}
}

@media all and (min-width:1200px) {
  #sub .core .info01 {margin-bottom:120px;}
}


/*파트너사*/
#sub .partners ul {display:grid; grid-template-columns:1fr 1fr; gap:20px;}
#sub .partners ul li {border:1px solid var(--border); border-radius:8px; overflow:hidden; text-align:center;}

@media all and (min-width:768px) {
  #sub .partners ul {grid-template-columns:1fr 1fr 1fr 1fr;}
}

@media all and (min-width:1200px) {
  #sub .partners ul {grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;}
}


/*기술연구소*/
#sub .rnd .info01 ul {display:grid; gap:10px; grid-template-columns:1fr;}
#sub .rnd .info01 ul li {display:flex; flex-direction:column; gap:20px; align-items:flex-start; padding:10px; background:#fff; border-radius:8px; -webkit-box-shadow:0px 10px 40px 0px rgba(0,0,0,0.05); -moz-box-shadow:0px 10px 40px 0px rgba(0,0,0,0.05); box-shadow:0px 10px 40px 0px rgba(0,0,0,0.05);}
#sub .rnd .info01 ul li > * {width:100%;}
#sub .rnd .info01 ul li h5 {font-size:1.1em; font-weight:700; color:var(--col01);}
#sub .rnd .info01 ul li p em {display:flex; align-items:center; gap:0 0.5em; font-size:0.9em; margin:10px 0 0;}
#sub .rnd .info01 ul li p em:before {content:'article'; font-family:var(--ic);}
#sub .rnd .imgbox {max-height:360px; overflow:hidden; border-radius:8px;}
#sub .rnd .imgbox img {object-fit:cover; width:100%; height:100%;}

@media all and (min-width:768px) {
  #sub .rnd .info01 ul {grid-template-columns:1fr 1fr;}
  #sub .rnd .info01 ul li {padding:20px;}
}

@media all and (min-width:1200px) {
  #sub .rnd .info01 ul {grid-template-columns:1fr 1fr 1fr;}
  #sub .rnd .info01 ul li {padding:30px;}
}


/*품질방침*/
#sub .quality .info01 {display:grid; grid-template-columns:1fr; gap:40px 20px;}
#sub .quality .info01 .box {border-radius:100vw 100vw 0 0; background:var(--lbg); background:linear-gradient(180deg, var(--lbg) 0%, #fff 100%); max-width:400px; margin:0 auto;}
#sub .quality .info01 .box .img {margin:20px; border-radius:100%; overflow:hidden;}
#sub .quality .info01 .box .txt {padding:0 20px;}
#sub .quality .info01 .box .num {display:block; text-align:center; font-weight:800; font-style:italic; color:var(--col01); font-size:1.5em; margin:0 0 10px;}
#sub .quality .info01 .box .t01 {text-align:center;}
#sub .quality .info01 .box .t01 em {font-size:1.75em; font-weight:700; display:block;}
#sub .quality .info01 .box ul {display:flex; flex-direction:column; gap:10px; margin:20px 0; background:#fff; border-radius:8px; padding:20px 10px; -webkit-box-shadow:0px 10px 40px 0px rgba(0,0,0,0.05); -moz-box-shadow:0px 10px 40px 0px rgba(0,0,0,0.05); box-shadow:0px 10px 40px 0px rgba(0,0,0,0.05); text-align:left;}
#sub .quality .info01 .box ul li {position:relative; padding-left:1.5em;}
#sub .quality .info01 .box ul li:before {content:'check_circle'; font-family:var(--ic); color:var(--col01); position:absolute; left:0; top:0;}
#sub .quality .info01 .box dl {display:grid; grid-template-columns:1fr; gap:10px; align-items:center; text-align:center;}
#sub .quality .info01 .box dl dd {color:#fff; font-weight:600; background:var(--col04); border-radius:8px; border-radius:8px; padding:10px;}

@media all and (min-width:768px) {
  #sub .quality .info01 {grid-template-columns:1fr 1fr 1fr;}
  #sub .quality .info01 .box {max-width:unset;}
  #sub .quality .info01 .box ul {padding:20px;}
}

@media all and (min-width:1200px) {
  #sub .quality .info01 {gap:40px;}
  #sub .quality .info01 .box .img {margin:60px 60px 20px;}
  #sub .quality .info01 .box ul {height:280px; justify-content:center;}
}


/*ESG*/
#sub .esg .info01 {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:20px 2%;}
#sub .esg .info01 li {text-align:center; width:49%; background:#fff; border-radius:8px; padding:20px 10px; -webkit-box-shadow:0px 10px 40px 0px rgba(0,0,0,0.05); -moz-box-shadow:0px 10px 40px 0px rgba(0,0,0,0.05); box-shadow:0px 10px 40px 0px rgba(0,0,0,0.05);}
#sub .esg .info01 li em {font-weight:800; font-style:italic; color:var(--col01); margin:0 0 10px; font-size:1.1em;}
#sub .esg .info01 li h5 {font-size:1.1em; font-weight:600;}
#sub .esg .info01 li p {color:var(--col05); font-weight:600;}
#sub .esg .info02 .i01 {display:grid; grid-template-columns:1fr; gap:20px; align-items:center;}
#sub .esg .info02 .i01 .grade {text-align:center;}
#sub .esg .info02 .i01 dl {background:#fff; border-radius:8px; padding:20px 10px; -webkit-box-shadow:0px 10px 40px 0px rgba(0,0,0,0.05); -moz-box-shadow:0px 10px 40px 0px rgba(0,0,0,0.05); box-shadow:0px 10px 40px 0px rgba(0,0,0,0.05); display:grid; grid-template-columns:repeat(6, min-content); gap:1em; align-items:center; justify-content:center; text-align:center;}
#sub .esg .info02 .i01 dl dt {font-weight:600;}
#sub .esg .info02 .i01 dl dd {font-weight:800; font-size:1.1em;}
#sub .esg .info02 .i01 dl dd:nth-of-type(1) {color:#88af47;}
#sub .esg .info02 .i01 dl dd:nth-of-type(2) {color:#e09042;}
#sub .esg .info02 .i01 dl dd:nth-of-type(3) {color:#589fc1;}
#sub .esg .info02 .i02 dl {display:grid; grid-template-columns:1fr 4fr; gap:40px 20px; align-items:center;}
#sub .esg .info02 .i02 dl dt {text-align:center; color:#fff; border-radius:8px; padding:10px 5px; line-height:1.2;}
#sub .esg .info02 .i02 dl dt:nth-of-type(1) {background:#88af47;}
#sub .esg .info02 .i02 dl dt:nth-of-type(2) {background:#e09042;}
#sub .esg .info02 .i02 dl dt:nth-of-type(3) {background:#589fc1;}
#sub .esg .info02 .i02 dl dt p {font-weight:700; font-size:1.1em;}
#sub .esg .info02 .i02 dl dd p {margin:0 0 10px;}
#sub .esg .info02 .i02 .bar {display:flex; gap:2px;}
#sub .esg .info02 .i02 .bar span {flex:1; text-align:center; background:#d0d0d3; color:#fff; padding:0 5px; border-radius:4px; font-size:0.9em; font-weight:600;}
#sub .esg .info02 .i02 dl dd:nth-of-type(1) .bar .on {background:#88af47;}
#sub .esg .info02 .i02 dl dd:nth-of-type(2) .bar .on {background:#e09042;}
#sub .esg .info02 .i02 dl dd:nth-of-type(3) .bar .on {background:#589fc1;}
#sub .esg .info03 {display:grid; grid-template-columns:1fr; gap:20px;}
#sub .esg .info03 .box {border-radius:8px; overflow:hidden; background:#fff; border-radius:8px; -webkit-box-shadow:0px 10px 40px 0px rgba(0,0,0,0.05); -moz-box-shadow:0px 10px 40px 0px rgba(0,0,0,0.05); box-shadow:0px 10px 40px 0px rgba(0,0,0,0.05);}
#sub .esg .info03 .box .txt {padding:20px;}
#sub .esg .info03 .box em {font-weight:800; font-style:italic; color:var(--col01); margin:0 0 10px; font-size:1.1em;}
#sub .esg .info03 .box p {margin:0 0 10px;}
#sub .esg .info03 .box ul {display:flex; flex-direction:column; gap:10px;}
#sub .esg .info03 .box ul li {padding:0.5em 1em; background:var(--lbg); border-radius:8px;}
#sub .esg .info04 {background:var(--lbg); padding:40px 20px; border-radius:8px; line-height:1.8;}
#sub .esg .info04 .nsk {font-family:"Noto Serif KR", serif; font-weight:500; letter-spacing:-0.05em;}
#sub .esg .info04 dl {display:grid; gap:20px; grid-template-columns:auto 1fr; align-items:center; background:#fff; border-radius:8px; padding:20px; margin:0 auto; max-width:720px;}
#sub .esg .info04 dl dt {font-family:"Noto Serif KR", serif; font-weight:500; letter-spacing:-0.05em; background:var(--col01); border-radius:8px; color:#fff; padding:10px; display:flex; align-items:center; justify-content:center;}
#sub .esg .info04 .logo {width:min(20%, 140px); margin:0 auto; display:block;}

@media all and (min-width:640px) {
  #sub .esg .info03 {grid-template-columns:repeat(2, 1fr);}
  #sub .esg .info04 {grid-template-columns:repeat(2, 1fr);}
}

@media all and (min-width:768px) {
  #sub .esg .info01 {gap:10px; flex-wrap:nowrap;}
  #sub .esg .info01 li {width:unset; flex:1;}
  #sub .esg .info01 li h5 {font-size:1.25em;}
  #sub .esg .info02 .i01 {grid-template-columns:1fr 2fr;}
  #sub .esg .info03 .box .txt {padding:30px;}
  #sub .esg .info04 {padding:40px;}
}

@media all and (min-width:1200px) {
  #sub .esg .info01 {gap:20px;}
  #sub .esg .info01 li h5 {font-size:1.35em;}
  #sub .esg .info02 .i01 dl {font-size:1.1em;}
  #sub .esg .info03 {grid-template-columns:repeat(4, 1fr);}
  #sub .esg .info03 .box em {font-size:1.25em; margin:0 0 20px;}
  #sub .esg .info04 {grid-template-columns:repeat(4, 1fr);}
}


/*개인정보처리방침*/
#sub .privacy h4 {font-size:1.25em; font-weight:700;}


/*이메일무단수집거부*/
#sub .noemail .box {border:1px solid var(--border); padding:40px 20px; border-radius:8px;}
#sub .noemail .box h1 {font-size:1.5em; font-weight:700;}

@media all and (min-width:768px) {
  #sub .noemail .box {padding:60px 30px;}
  #sub .noemail .box h1 {font-size:1.75em;}
}

@media all and (min-width:1200px) {
}


/*사이트맵*/
#sub .sitemap ul {display:flex; flex-wrap:wrap; align-items:stretch; gap:60px 4%;}
#sub .sitemap li {width:48%;}
#sub .sitemap li h5 {font-size:1.1em; font-weight:700; margin:0 0 20px;}
#sub .sitemap li .sub dl {display:grid; grid-template-columns:1fr; gap:10px;}
#sub .sitemap li .sub dl dd > a {display:flex; align-items:center; justify-content:space-between; font-weight:500; transition:0.3s;}
#sub .sitemap li .sub dl dd > a:hover {color:var(--col01); font-weight:600;}
#sub .sitemap li .sub dl dd > a:hover:after {content:'keyboard_arrow_right'; font-family:var(--ic);}
#sub .sitemap li .sub dd .dep {display:grid; grid-template-columns:1fr; gap:5px; margin:10px 0 0;}
#sub .sitemap li .sub dd .dep a {font-size:0.9em;}
#sub .sitemap li .sub dd .dep a:before {content:'\00B7'; margin:0 5px 0 0;}

@media all and (min-width:768px) {
  #sub .sitemap li {width:22%;}
  #sub .sitemap li h5 {font-size:1.25em;}
}

@media all and (min-width:1200px) {
  #sub .sitemap ul {gap:40px;}
  #sub .sitemap li {width:unset; flex:1;}
  #sub .sitemap li h5 {font-size:1.35em;}
}