.col01 {color:var(--col01) !important;}
.col02 {color:var(--col02) !important;}
.gra {background:var(--col01); background:linear-gradient(90deg, var(--col01) 0%, var(--col02) 100%);}
.litebox-overlay .litebox-close {background:var(--col01) !important; border-radius:0 !important; display:flex; align-items:center; justify-content:center; color:#fff;}
.gra_t {background:var(--col01); background:linear-gradient(90deg, var(--col01) 0%, var(--col02) 100%); background-clip:text; -webkit-background-clip:text; color:transparent;}
.litebox-overlay .litebox-close:after {content:'close'; font-family:var(--ic); font-size:2em; font-weight:100;}
.waitbox {text-align:center; border:5px solid #f5f5f5; padding:40px 20px;}
.waitbox img {width:100%; max-width:160px; margin:0 auto 20px;}
.waitbox .t01 {font-size:1.5em; font-weight:700;}

/*sub*/
#sub .titbox01 .t01 {font-size:2em; font-weight:700;}
#sub .titbox01 .t02 {font-size:1.1em; word-break:break-all; text-transform:capitalize; color:#666;}
#sub .tit01 {font-size:1.25em; font-weight:700; position:relative; padding:0 0 0 0.6em;}
#sub .tit01:before {content:''; display:inline-block; width:0.3em; height:0.6em; background:var(--col02); transform:skewX(-20deg); margin-right:0.2em; position:absolute; left:0; top:0;}
#sub .tit01 small {font-size:max(0.75em, 14px); margin-left:10px; color:#999;}
#sub .tabwrap {overflow-x:auto;}
#sub .tabwrap table {width:100%; border-top:2px solid var(--col01);}
#sub .tabwrap table tr {border-bottom:1px solid var(--border);}
#sub .tabwrap table th,
#sub .tabwrap table td {padding:0.5em; text-align:center; vertical-align:middle;}
#sub .tabwrap table th:not(:last-child),
#sub .tabwrap table td:not(:last-child),
#sub .tabwrap table .bdr {border-right:1px solid var(--border);}
#sub .tabwrap table th {background:#f8f8fa;}
#sub .imgwrap {text-align:center; border:1px solid var(--border); padding:10px; position:relative;}
#sub .imgwrap img {max-width:min(90%, 1200px);}
#sub .imgwrap p {font-weight:700; background:var(--col01); color:#fff; padding:5px 10px; margin:0 0 10px;}


@media all and (min-width:768px) {
  #sub .titbox01 .t01 {font-size:2.25em;}
  #sub .titbox01 .t02 {font-size:1.25em;}
  #sub .tit01 {font-size:1.5em;}
  #sub .imgwrap {padding:20px;}
  #sub .imgwrap p {display:inline-block; position:absolute; left:0; top:0; margin:0;}
  #sub .colwrap {display:flex; gap:20px 4%;}
  #sub .colwrap .w30 {width:28%;}
  #sub .colwrap .w50 {width:48%;}
  #sub .colwrap .w70 {width:68%;}
}

@media all and (min-width:1200px) {
  #sub .tit01 {font-size:2em;}
  #sub .colwrap .bmb {margin-bottom:0 !important;}
}


/*overview*/
#sub .overview .info01 ul {display:flex; flex-wrap:wrap; border-top:1px solid var(--border); border-left:1px solid var(--border);}
#sub .overview .info01 li {width:100%; border-right:1px solid var(--border); border-bottom:1px solid var(--border); padding:20px; transition:0.3s;}
#sub .overview .info01 li.full {width:100%;}
#sub .overview .info01 li:hover {background:#f8f8fa;}
#sub .overview .info01 .t01 {font-weight:700; color:var(--col01); font-size:1.1em; margin:0 0 10px;}
#sub .overview .info01 .t01::first-letter {border-bottom:2px solid var(--col01); padding-bottom:0.2em;}
#sub .overview .info01 span.label {font-weight:700; display:block;}
#sub .overview .info01 span.label:not(:first-child) {margin-top:10px;}
#sub .overview .info01 span.label:before {content:'check_circle'; font-family:var(--ic); color:#67718c; vertical-align:bottom; margin:0 0.2em 0 0;}
#sub .overview .info01 dl {display:flex; flex-wrap:wrap; gap:0 2%;}
#sub .overview .info01 dd {width:100%;}

@media all and (min-width:768px) {
  #sub .overview .info01 li {width:50%; padding:30px;}
  #sub .overview .info01 .t01 {margin:0 0 15px; font-size:1.25em;}
}

@media all and (min-width:1200px) {
  #sub .overview .info01 li {width:25%;}
  #sub .overview .info01 .t01 {margin:0 0 20px;}
  #sub .overview .info01 dd {width:49%;}
}


/*CEO Greeting*/
#sub .ceo .info01 ul {display:flex; flex-wrap:wrap; justify-content:center; gap:20px 2%; max-width:1080px; margin:0 auto;}
#sub .ceo .info01 li {width:100%; font-size:1.1em; font-weight:700; text-transform:capitalize; text-align:center; border:1px solid var(--border); border-radius:500px;}
#sub .ceo .info01 li > div {padding:20px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap;}
#sub .ceo .info01 li .ic {font-size:2em; width:100%; margin:auto 0 10px; font-variation-settings: 'FILL' 1; color:var(--col01);}
#sub .ceo .info01 li p {margin:0 0 auto;}
#sub .ceo .info01 li b {font-size:1.1em; display:block; text-transform:uppercase;}
#sub .ceo .info01 .t01 {line-height:1.8;}

@media all and (min-width:768px) {
  #sub .ceo .info01 li {position:relative; width:35.33%; height:0; padding-bottom:35.33%; overflow:hidden; margin:0 -2%;}
  #sub .ceo .info01 li > div {padding:40px 20px; position:absolute; left:0; top:0; width:100%; height:100%;}
  #sub .ceo .info01 .t01 {column-count:2; column-gap:5%;}
}

@media all and (min-width:1200px) {
  #sub .ceo .info01 li .ic {font-size:3em;}
}


/*history*/
#sub .his ul {border-bottom:1px solid var(--border);}
#sub .his li {padding:20px 0; border-top:1px solid var(--border);}
#sub .his li .y {font-size:1.5em; font-weight:700; margin:0 0 10px;}
#sub .his li:not(:first-child) .y {color:#bfbfd1;}
#sub .his dl {display:flex; flex-wrap:wrap; gap:10px 1em;}
#sub .his dt {width:3em; font-weight:700; color:var(--col01);}
#sub .his dd {width:calc(100% - 4em);}

@media all and (min-width:768px) {
  #sub .his li {align-items:center; padding:30px 0;}
  #sub .his li .y {font-size:1.75em; margin:0;}
  #sub .his li dl {padding:0 0 0 20%;}
}

@media all and (min-width:1200px) {
  #sub .his li {padding:40px 0;}
  #sub .his li .y {font-size:2em;}
}


/*Management Principles*/
#sub .manage .info01 .tit {display:flex; align-items:center; justify-content:center; color:#fff; text-align:center; padding:10px; font-size:1.25em; font-weight:700; text-transform:uppercase;}
#sub .manage .info01 .tit p:before {content:'person'; font-family:var(--ic); font-weight:500; vertical-align:middle; font-size:1.5em; margin:0 0.2em 0 0;}
#sub .manage .info01 .list {border:1px solid var(--border); border-top:0; border-left:0;}
#sub .manage .info01 .list > div {border:1px solid var(--border); border-bottom:0; border-right:0; background:#fff; padding:20px;}
#sub .manage .info01 .list > div p {font-size:1.1em; font-weight:700; margin:0 0 1em;}
#sub .manage .info01 .list > div p::first-letter {border-top:2px solid; padding-top:0.2em;}
#sub .manage .info01 .list > div li {display:flex;}
#sub .manage .info01 .list > div li:before {content:'·'; margin-right:0.2em;}
#sub .manage .info02 {background:url('../img/about/manage_bg01.jpg') no-repeat center center / cover; padding:60px 0; color:#fff;}
#sub .manage .info02 ul {text-align:center; display:flex; align-items:center; width:100%;}
#sub .manage .info02 li {flex:1; display:flex; align-items:center; justify-content:center; text-transform:uppercase;}
#sub .manage .info02 li:not(:last-child) {border-right:1px solid rgba(255,255,255,0.1);}
#sub .manage .info02 .ic {font-size:2em; margin:0 0 10px;}
#sub .manage .info02 h5 {font-size:1.1em; font-weight:700;}
#sub .manage .info02 p {font-size:0.9em;}

@media all and (min-width:768px) {
  #sub .manage .info01 .list {display:flex; align-items:stretch;}
  #sub .manage .info01 .list > div {flex:1;}
  #sub .manage .info01 .list > div:not(:first-child) {margin:0;}
  #sub .manage .info01 .list > div p {font-size:1.25em;}
  #sub .manage .info02 {padding:80px 0;}
  #sub .manage .info02 h5 {font-size:1.25em;}
  #sub .manage .info02 p {font-size:1em;}
}

@media all and (min-width:1200px) {
  #sub .manage .info01 .list > div {padding:30px;}
  #sub .manage .info02 .ic {font-size:3em;}
  #sub .manage .info02 h5 {font-size:1.5em;}
}


/*CI*/
#sub .ci .info01 .logo {background:url('../img/about/ci_bg01.png') center center / 15px; padding:40px 20px; border:1px solid #f2f2f2; text-align:center;}
#sub .ci .info01 .logo img {width:80%; max-width:280px;}
#sub .ci .info01 ul {display:flex; flex-wrap:wrap; gap:20px 5%;}
#sub .ci .info01 li {width:100%;}
#sub .ci .info01 li .img {background:#f8f8fa; text-align:center; padding:20px; margin:0 0 20px;}
#sub .ci .info01 li .img img {width:auto; max-height:40px;}
#sub .ci .info01 li .txt h5 {font-size:1.1em; font-weight:700; margin:0 0 10px;}
#sub .ci .info01 li .txt h5::first-letter {border-top:2px solid; padding-top:0.2em;}
#sub .ci .info01 dl {display:flex; flex-wrap:wrap; align-items:center; gap:10px 2%;}
#sub .ci .info01 dd {width:100%; color:#fff; padding:20px; gap:0 1em; position:relative;}
#sub .ci .info01 dd:nth-of-type(1) {background:var(--col02);}
#sub .ci .info01 dd:nth-of-type(2) {background:var(--col01);}
#sub .ci .info01 dd:nth-of-type(3) {background:var(--col03);}
#sub .ci .info01 dd:after {content:''; position:absolute; right:0; bottom:0; width:0; height:0; border-style:solid; border-width:1em 1em 0 0; border-color:#fff transparent transparent transparent; transform:rotate(180deg);}
#sub .ci .info01 dd h5 {font-size:1.1em; font-weight:700; margin:0 0 10px; text-transform:uppercase; text-align:right;}
#sub .ci .info01 dd p {font-size:0.9em;}
#sub .ci .info01 dd p b {display:inline-block; width:4em;}
#sub .ci .info01 .down {display:flex; align-items:center; justify-content:center; gap:10px 2%; text-align:center;}
#sub .ci .info01 .down a {flex:1; max-width:240px; border:2px solid var(--col03); padding:10px 0; transition:0.3s;}
#sub .ci .info01 .down a:after {content:'download'; font-family:var(--ic); vertical-align:middle; margin-left:0.2em;}
#sub .ci .info01 .down a:hover {background:var(--col03); color:#fff;}

@media all and (min-width:768px) {
  #sub .ci .info01 li {flex:1;}
  #sub .ci .info01 li .img {margin:0 0 40px;}
  #sub .ci .info01 li .txt h5 {font-size:1.25em;}
  #sub .ci .info01 dd {width:32%;}
  #sub .ci .info01 .down a {font-size:1.1em;}
}

@media all and (min-width:1200px) {
  #sub .ci .info01 li .img {padding:40px;}
  #sub .ci .info01 dd h5 {font-size:1.25em;}
  #sub .ci .info01 dd p {font-size:1em;}
}


/*certi*/
#sub .certi .info01 ul {display:flex; gap:20px 2%; flex-wrap:wrap;}
#sub .certi .info01 li {width:49%; position:relative;}
#sub .certi .info01 li:after {content:'search'; font-family:var(--ic); position:absolute; right:0; top:0; display:flex; align-items:center; justify-content:center; width:1.8em; height:1.8em; background:var(--col01); color:#fff;}
#sub .certi .info01 li img {border:1px solid var(--border); width:100%;}
#sub .certi .info01 li p {text-align:center; font-weight:700; margin:10px 0 0;}

@media all and (min-width:768px) {
  #sub .certi .info01 li {width:32%;}
}

@media all and (min-width:1200px) {
  #sub .certi .info01 ul {gap:40px 2%;}
  #sub .certi .info01 li {width:18.4%;}
  #sub .certi .info01 li p {margin:20px 0 0;}
}


/*Major Customers*/
#sub .major ul {display:flex; gap:20px 2%; flex-wrap:wrap;}
#sub .major li {width:49%; border:1px solid var(--border);}

@media all and (min-width:768px) {
  #sub .major li {width:32%;}
}

@media all and (min-width:1200px) {
  #sub .major li {width:23.5%;}
}


/*Organization*/
#sub .org {text-align:center;}
#sub .org .info01 > div {display:flex; justify-content:center; gap:0 2%; position:relative;}
#sub .org .info01 > div:not(:last-child) {margin-bottom:30px;}
#sub .org .info01 > div:not(:last-child):after {content:''; display:inline-block; width:1px; height:30px; background:var(--border); position:absolute; left:50%; top:100%;}
#sub .org .info01 > div > p {flex:1; padding:10px;}
#sub .org .info01 .ceo p {background:var(--col01); border:1px solid var(--col01); color:#fff; font-weight:700;}
#sub .org .info01 .dep01 p {border:1px solid var(--col01); color:var(--col01); font-weight:700;}
#sub .org .info01 .dep02 {flex-wrap:wrap; gap:20px 2%; border:1px solid var(--border); padding:20px; background:#f8f8fa;}
#sub .org .info01 .dep02 > div {width:49%;}
#sub .org .info01 .dep02 h5 {background:var(--col02); color:#fff; padding:10px; font-weight:700; text-transform:capitalize; position:relative;}
#sub .org .info01 .dep02 p {color:#67718c; border:1px solid var(--border); background:#fff; padding:10px; margin:10px 0 0; font-size:0.9em;}

@media all and (min-width:768px) {
  #sub .org .info01 > div:not(:last-child) {margin-bottom:40px;}
  #sub .org .info01 > div:not(:last-child):after {height:40px;}
  #sub .org .info01 > div > p {max-width:32%; padding:15px 10px;}
  #sub .org .info01 .ceo p,
  #sub .org .info01 .dep01 p {font-size:1.1em;}
  #sub .org .info01 .dep02 > div {width:32%;}
  #sub .org .info01 .dep02 h5 {padding:15px 10px;}
}

@media all and (min-width:1200px) {
  #sub .org .info01 .dep02 {border:0; padding:40px 0 0; background:#fff;}
  #sub .org .info01 .dep02:before {content:''; display:inline-block; width:85%; height:1px; background:var(--border); position:absolute; left:7.5%; top:0;}
  #sub .org .info01 .dep02 > div {width:15%;}
  #sub .org .info01 .dep02 h5:before {content:''; display:inline-block; width:1px; height:40px; background:var(--border); position:absolute; left:50%; bottom:100%;}
}


/*Location*/
#sub .map .info01 {padding:20px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
#sub .map .info01 dl {display:flex; flex-wrap:wrap; gap:10px 1em;}
#sub .map .info01 dt {width:5em; font-weight:700; color:var(--col01);}
#sub .map .info01 dd {width:calc(100% - 6em);}
#sub .map .mapbox {height:400px;}

@media all and (min-width:768px) {
  #sub .map .info01 {padding:30px 0;}
}

@media all and (min-width:1200px) {
  #sub .map .info01 {padding:30px; background:url('../img/logo.png') no-repeat 95% center / 10%;}
}


/*Business Area*/
.prtab {font-weight:700; position:relative; line-height:50px; display:flex; flex-wrap:wrap;}
.prtab .btn {position:absolute; right:0; top:0; cursor:pointer; color:#fff; display:flex; align-items:center; justify-content:center; width:50px; height:50px;}
.prtab .btn span {display:block; width:20px; height:2px; background:#fff; margin:5px auto;}
.prtab:not(.res) li:not(.gra):not(.btn) {display:none;}
.prtab li {order:1; width:100%;}
.prtab li.gra {order:0;}
.prtab li:not(.gra):not(.btn) {border:1px solid var(--border); border-top:0;}
.prtab li:not(.gra):not(.btn):hover {background:#f8f8fa;}
.prtab li a {display:block; padding:0 1em; color:#fff; word-break:break-all; width:100%;}
.prtab li:not(.gra):not(.btn) a {color:#aaa;}
.prsubtab {font-weight:700; position:relative; line-height:50px; display:flex; flex-wrap:wrap;}
.prsubtab .btn {position:absolute; right:0; top:0; cursor:pointer; color:#fff; display:flex; align-items:center; justify-content:center; width:50px; height:50px;}
.prsubtab .btn span {display:block; width:20px; height:2px; background:#fff; margin:5px auto;}
.prsubtab:not(.res) li:not(.on):not(.btn) {display:none;}
.prsubtab li {order:1; width:100%;}
.prsubtab li.on {order:0; background:#8686a8;}
.prsubtab li:not(.on):not(.btn) {border:1px solid var(--border); border-top:0;}
.prsubtab li:not(.on):not(.btn):hover {background:#f8f8fa;}
.prsubtab li a {display:block; padding:0 1em; color:#fff; word-break:break-all; width:100%;}
.prsubtab li:not(.on):not(.btn) a {color:#aaa;}
#sub .pr .prtop {background:#f8f8fa; padding:40px 0;}
#sub .pr .prtop .tit {text-align:center;}
#sub .pr .prtop .tit h3 {font-size:1.5em; font-weight:700;}
#sub .pr .prtop .tit h5 {font-size:1.1em; font-weight:700; color:#bfbfd1;}
#sub .pr .prtop .img {text-align:center; margin:0 0 20px;}
#sub .pr .prtop .img img {width:100%; max-width:560px;}
#sub .pr .prtop .txt dl {display:flex; flex-wrap:wrap; border-top:2px solid var(--col01);}
#sub .pr .prtop .txt dt,
#sub .pr .prtop .txt dd {border-bottom:1px solid var(--border); padding:10px;}
#sub .pr .prtop .txt dt {width:70%; font-weight:600;}
#sub .pr .prtop .txt dd {width:30%; text-align:center;}
#sub .pr .prtop .txt dt span {display:inline-block; padding:0 0.5em; background:var(--col01); color:#fff; min-width:2em; border-radius:100px; margin-right:0.5em; font-size:0.9em; text-align:center;}
#sub .pr .info01 ul {display:flex; flex-wrap:wrap; border-top:1px solid var(--border); border-left:1px solid var(--border); text-align:center;}
#sub .pr .info01 li {width:50%; border-right:1px solid var(--border); border-bottom:1px solid var(--border); padding:20px;}
#sub .pr .info01 li img {width:80%; max-width:200px; margin:0 0 10px;}
#sub .pr .info01 li h5 {font-size:1.1em; font-weight:700; margin:0 0 10px;}
#sub .pr .info01 li p {font-size:0.9em;}
#sub .pr .img_li {align-items:stretch;}
#sub .pr .img_li li {border:1px solid var(--border); padding:10px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
#sub .pr .img_li li > * {width:100%;}
#sub .pr .img_li li img {width:auto; margin:auto auto 0;}
#sub .pr .img_li li h5 {font-weight:700; color:var(--col01); margin:10px 0 0;}
#sub .pr .img_li li h5 ~ p {font-weight:500; font-size:0.9em; margin:0;}
#sub .pr .img_li li p {font-weight:700; margin:10px 0 0;}

@media all and (min-width:768px) {
  #sub .pr .prtop .tit h3 {font-size:2em;}
  #sub .pr .prtop .tit h5 {font-size:1.25em;}
  #sub .pr .prtop .txt dt {width:35%;}
  #sub .pr .prtop .txt dd {width:15%;}
  #sub .pr .info01 li {width:25%;}
  #sub .pr .img_li li {padding:20px;}
}

@media all and (min-width:960px) {
  .prtab {line-height:1.5; text-align:center; border-top:1px solid var(--border); border-left:1px solid var(--border);}
  .prtab .btn {display:none;}
  .prtab li {width:20%; display:flex; align-items:center; justify-content:center;}
  .prtab li.gra {order:1;}
  .prtab li:not(.gra):not(.btn) {border-left:0;}
  .prtab:not(.res) li:not(.gra):not(.btn) {display:flex;}
  .prtab li a {padding:10px;}
  .prsubtab {line-height:1.5; text-align:center; border-top:1px solid var(--border); border-left:1px solid var(--border);}
  .prsubtab .btn {display:none;}
  .prsubtab li {width:14.28%; display:flex; align-items:center; justify-content:center; background:#fff;}
  .prsubtab li.on {order:1;}
  .prsubtab li:not(.on):not(.btn) {border-left:0;}
  .prsubtab li:not(.on):not(.btn):hover {background:#fff;}
  .prsubtab:not(.res) li:not(.on):not(.btn) {display:flex;}
  .prsubtab li a {padding:10px;}
}

@media all and (min-width:1200px) {
  #sub .pr .prtop {padding:60px 0;}
  #sub .pr .prtop .pdinner {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5%;}
  #sub .pr .prtop .tit {width:100%; order:1;}
  #sub .pr .prtop .tit h3 {font-size:2.5em;}
  #sub .pr .prtop .img {margin:0; width:40%; order:2;}
  #sub .pr .prtop .txt {width:55%; order:3;}
  #sub .pr .prtop .tab {order:4;}
  #sub .pr .info01 li {padding:30px;}
  #sub .pr .info01 li h5 {font-size:1.25em;}
}


/*Equipment Status*/
#sub .eq .img_li {align-items:stretch;}
#sub .eq .img_li li {border:1px solid var(--border); padding:10px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
#sub .eq .img_li li > * {width:100%;}
#sub .eq .img_li li img {width:auto; margin:auto auto 0;}
#sub .eq .img_li li h5 {font-weight:700; color:var(--col01); margin:10px 0 0;}
#sub .eq .img_li li h5 ~ p {font-weight:500; font-size:0.9em; margin:0;}
#sub .eq .img_li li p {font-weight:700; margin:10px 0 0;}

@media all and (min-width:768px) {
  #sub .eq .img_li li {padding:20px;}
}

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


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

/*이메일무단수집거부*/
#sub .noemail .box {border-top:2px solid #222; border-bottom:1px solid var(--border); padding:20px;}
#sub .noemail .box h1 {font-size:1.5em;}

@media all and (min-width:768px) {
  #sub .noemail .box {padding:30px;}
}

@media all and (min-width:1200px) {
  #sub .noemail .box {padding:40px;}
}

/*사이트맵*/
#sub .sitemap ul {display:flex; flex-wrap:wrap; gap:40px 2%;}
#sub .sitemap li {width:100%;}
#sub .sitemap li h1 {width:100%; font-weight:700; margin:0 0 20px;}
#sub .sitemap li h1::first-letter {border-top:2px solid; padding-top:0.2em;}
#sub .sitemap li .sub {width:100%;}
#sub .sitemap li .sub dl {display:flex; flex-wrap:wrap; width:100%; gap:10px 2%;}
#sub .sitemap li .sub dd {border:1px solid var(--border); color:#aaa; width:49%; display:flex; align-items:center;}
#sub .sitemap li .sub dd:hover {background:#f8f8fa;}
#sub .sitemap li .sub dd a {display:block; padding:0.5em; font-weight:600; width:100%;}

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

@media all and (min-width:1200px) {
  #sub .sitemap li {flex:1;}
  #sub .sitemap li .sub dd {width:100%;}
}