.col01 {color:var(--col01) !important;}
.col02 {color:var(--col02) !important;}
.col03 {color:var(--col03) !important;}
.waitbox {text-align:center; background:var(--lbg); padding:40px 20px; border-radius:16px;}
.waitbox img {width:100%; max-width:140px; margin:0 auto 20px;}
.waitbox .t01 {font-size:1.5em; font-weight:700; margin:0 0 10px;}
.waitbox .t02 {opacity:0.8;}


/*sub*/
#sub .subtab {display:flex; margin:0 0 40px; text-align:center; border-bottom:1px solid var(--border);}
#sub .subtab a {flex:1; display:flex; align-items:center; justify-content:center; font-weight:700; padding:1em 0.5em; color:#aaa; position:relative;}
#sub .subtab a.on {color:unset;}
#sub .subtab a.on:after {content:''; display:inline-block; width:2em; height:3px; background:var(--col01); position:absolute; left:calc(50% - 1em); bottom:-1px;}
#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;}
#sub .h_m {font-weight:700; font-size:1.25em;}
#sub .h_s {font-weight:700; font-size:1.1em;}

@media all and (min-width:768px) {
  #sub .subtab {margin:0 0 60px;}
  #sub .titbox > .tit {width:15%;}
  #sub .titbox > .con {width:80%;}
}

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


/*회사개요*/
#sub .intro .info01 {display:flex; flex-wrap:wrap; align-items:flex-start; gap:0 5%;}
#sub .intro .info01 > * {width:100%;}
#sub .intro .info01 .img {margin:0 0 40px; position:relative; padding:0 1em 1em;}
#sub .intro .info01 .img:after {content:''; display:inline-block; width:4em; height:4em; border-radius:16px; background:#fff url('../img/sig.svg') no-repeat center center / 1.5em; position:absolute; right:0; bottom:0; -webkit-box-shadow:0 0 20px 0 rgba(0,0,0,0.1); -moz-box-shadow:0 0 20px 0 rgba(0,0,0,0.1); box-shadow:0 0 20px 0 rgba(0,0,0,0.1);}
#sub .intro .info01 .img img {border-radius:16px;}
#sub .intro .info01 .txt dl {display:flex; flex-wrap:wrap; border-top:1px solid var(--border);}
#sub .intro .info01 .txt dl dt {width:20%; font-weight:700;}
#sub .intro .info01 .txt dl dd {width:80%;}
#sub .intro .info01 .txt dl dt,
#sub .intro .info01 .txt dl dd {padding:10px; border-bottom:1px solid var(--border);}
#sub .intro .info01 .txt dl dt:nth-of-type(odd),
#sub .intro .info01 .txt dl dd:nth-of-type(odd) {background:var(--lbg);}
#sub .intro .info01 .txt dl dd.logo {display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px;}

@media all and (min-width:768px) {
  #sub .intro .info01 .tit {text-align:center;}
  #sub .intro .info01 .img {width:40%; margin:0; padding:0 1em 1em 0;}
  #sub .intro .info01 .txt {width:55%;}
  #sub .intro .info01 .txt dl {font-size:1.1em;}
  #sub .intro .info01 .txt dl dt,
  #sub .intro .info01 .txt dl dd {padding:20px;}
}

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


/*인사말*/
#sub .greet .info01 {display:flex; flex-wrap:wrap; gap:0 5%;}
#sub .greet .info01 > * {width:100%;}
#sub .greet .info01 .img {margin:0 0 40px;}
#sub .greet .info01 .img img {border-radius:16px;}
#sub .greet .info01 .txt {line-height:2;}
#sub .greet .info01 .txt .ceo {display:flex; align-items:center; justify-content:flex-end; gap:1em;}
#sub .greet .info01 .txt .ceo em {font-weight:700; font-size:1.1em; letter-spacing:0.2em;}

@media all and (min-width:768px) {
  #sub .greet .info01 .tit {text-align:center;}
  #sub .greet .info01 .img {width:40%; margin:0;}
  #sub .greet .info01 .txt {width:55%; font-size:1.1em;}
}

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


/*연혁*/
#sub .his .ybox {display:flex; flex-wrap:wrap; gap:20px 10%;}
#sub .his .ybox > * {width:100%;}
#sub .his .ybox:not(:last-child) {margin-bottom:40px;}
#sub .his .ybox h3 {font-size:1.25em; font-weight:800;}
#sub .his .ybox dl {display:flex; flex-wrap:wrap; align-items:center; gap:20px 0; position:relative;}
#sub .his .ybox dl:before {content:''; display:inline-block; width:1px; height:calc(100% - 3em); background:var(--border); position:absolute; left:0.5em; bottom:0;}
#sub .his .ybox dl dt {width:min(20%, 160px); font-weight:700; color:var(--col03); display:flex; align-items:center; gap:1em; padding:0 0 0 2em;}
#sub .his .ybox dl dt:nth-of-type(1) {padding:0;}
#sub .his .ybox dl dt:nth-of-type(1):before {content:''; display:inline-block; width:1em; height:1em; border:0.4em solid var(--col01); box-sizing:border-box; border-radius:100%;}
#sub .his .ybox dl dd {width:max(80%, calc(100% - 160px));}

@media all and (min-width:768px) {
  #sub .his .ybox h3 {font-size:1.75em; width:30%; text-align:center;}
  #sub .his .ybox dl {font-size:1.1em; width:60%;}
}

@media all and (min-width:1200px) {
  #sub .his .ybox h3 {text-align:right;}
  #sub .his .ybox:not(:last-child) {margin-bottom:60px;}
}


/*조직도*/
:root {--orgline:20px;}
#sub .org ul {position:relative; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; text-align:center; gap:0 2%;}
#sub .org ul li {position:relative;}
#sub .org ul li h5 {color:#fff; padding:10px; border-radius:8px; font-weight:700;}
#sub .org ul.ceo {margin:0 0 var(--orgline);}
#sub .org ul.ceo:before {content:''; display:inline-block; width:1px; height:var(--orgline); background:var(--border); position:absolute; left:50%; top:100%;}
#sub .org ul.ceo li {width:49%;}
#sub .org ul.ceo li h5 {background:var(--col01);}
#sub .org ul.part {padding:var(--orgline) 0 0;}
#sub .org ul.part:before {content:''; display:inline-block; width:76.5%; height:1px; background:var(--border); position:absolute; left:11.75%; top:0;}
#sub .org ul.part li {flex:1;}
#sub .org ul.part li:before {content:''; display:inline-block; width:1px; height:var(--orgline); background:var(--border); position:absolute; left:50%; bottom:100%;}
#sub .org ul.part li h5 {display:flex; align-items:center; justify-content:center; background:var(--col03);}
#sub .org ul.part li .detail {border:1px solid var(--border); border-radius:8px; margin:var(--orgline) 0 0; position:relative; background:var(--lbg);}
#sub .org ul.part li .detail:before {content:''; display:inline-block; width:1px; height:var(--orgline); background:var(--border); position:absolute; left:50%; bottom:100%;}
#sub .org ul.part li .detail p {padding:10px;}
#sub .org ul.part li .detail p:not(:last-child) {border-bottom:1px solid var(--border);}

@media all and (min-width:768px) {
  :root {--orgline:30px;}
  #sub .org ul {font-size:1.1em;}
  #sub .org ul li h5 {padding:20px 10px;}
  #sub .org ul.part li .detail p {padding:15px 10px;}
}


/*오시는 길*/
#sub .map .mapbox {border:1px solid var(--border); border-radius:8px; overflow:hidden;}
#sub .map .mapwrap {width:100%; overflow:hidden;}
#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;}
#sub .map .mapbox .info {padding:40px 20px; border-bottom:1px solid var(--border);}
#sub .map .mapbox .info h4 {color:var(--col03); font-weight:600;}
#sub .map .mapbox .info h3 {font-size:1.1em; font-weight:700; margin:0 0 20px;}
#sub .map .mapbox .info ul li {display:flex; align-items:center;}
#sub .map .mapbox .info ul li:not(:last-of-type) {margin:0 0 10px;}
#sub .map .mapbox .info ul li h5 {color:var(--col01); font-weight:600; width:5em;}

@media all and (min-width:768px) {
  #sub .map .mapbox {display:flex; align-items:stretch;}
  #sub .map .mapbox .mapwrap {width:max(50%, calc(100% - 500px));}
  #sub .map .mapbox .info {width:min(50%, 500px); padding:40px; border-bottom:0; border-right:1px solid var(--border); display:flex; align-items:center; flex-wrap:wrap;}
  #sub .map .mapbox .info h3 {font-size:1.25em; margin:0 0 40px;}
}

@media all and (min-width:1200px) {
  #sub .map .mapbox .info h3 {font-size:1.35em;}
}


/*사업분야*/
#sub .biz .topinfo {text-align:center;}
#sub .biz .info01 {background:var(--lbg); border-radius:16px; overflow:hidden; display:grid; grid-template-columns:1fr; gap:40px; align-items:center; transition:0.3s;}
#sub .biz .info01 .txt {padding:40px 20px 0; transition:0.3s;}
#sub .biz .info01 .txt .logo {height:1em; margin:0 0 1em;}
#sub .biz .info01 .txt > em {background:var(--col03); color:#fff; padding:0.2em 0.5em; border-radius:4px; margin:0 0 10px; font-weight:600; display:inline-block;}
#sub .biz .info01 .img {position:relative;}
#sub .biz .info01 .img:after {content:''; display:inline-block; width:100%; height:100%; background:#20202060; background:linear-gradient(180deg, var(--lbg) 0, #F5F5F400 75%); position:absolute; left:0; top:0;}
#sub .biz .info01 .img img {width:100%;}
#sub .biz .info02 {margin:40px 0 0; display:grid; align-items:center; grid-template-columns:1fr; gap:20px; padding:20px; border:1px solid var(--border); border-radius:16px; text-align:center;}
#sub .biz .info02 .txt h5 {font-size:1.1em; font-weight:700; margin:0 0 0.2em;}
#sub .biz .info02 .txt p {color:#888;}
#sub .biz .info02 a {background:var(--col01); color:#fff; padding:0.5em; border-radius:4px; margin:0 0 10px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:0.5em; text-align:center; width:100%;;}
#sub .biz .info02 a:after {content:'arrow_forward'; font-family:var(--ic); transform:rotate(-45deg); transition:0.3s;}
#sub .biz .info02 a:hover:after {transform:rotate(0deg);}

@media all and (min-width:768px) {
  #sub .biz .info01 {border-radius:16px 16px 80px 16px;}
  #sub .biz .info01 .txt {padding:40px 40px 0;}
  #sub .biz .info02 {padding:40px; grid-template-columns:auto 160px; text-align:left;}
  #sub .biz .info02 .txt h5 {font-size:1.25em;}
  #sub .biz .info02 a {width:unset; padding:0.75em;}
}

@media all and (min-width:1200px) {
  #sub .biz .info01 {grid-template-columns:1fr 1fr;}
  #sub .biz .info01 .txt {padding:20px 60px;}
  #sub .biz .info01 .img:after {background:linear-gradient(90deg, var(--lbg) 0, #F5F5F400 75%);}
  #sub .biz .info02 .txt {display:flex; align-items:center; justify-content:flex-start; gap:0 1em;}
  #sub .biz .info02 .txt h5 {margin:0;}
}

@media all and (min-width:1600px) {
  #sub .biz .info01 .txt {padding-left:100px;}
}


/*주요실적*/
#sub .perform .topinfo {text-align:center;}
#sub .perform .topinfo dl {display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; background:var(--lbg); border:1px solid var(--border); border-radius:8px; padding:0.5em; gap:10px 0;}
#sub .perform .topinfo dl dt {background:var(--col03); color:#fff; padding:0.2em 0.5em; border-radius:4px; width:100%;}
#sub .perform .topinfo dl dd:not(:first-of-type):before {content:'·'; margin:0 0.2em;}
#sub .perform .info01 ul {display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:20px 2%;}
#sub .perform .info01 ul li {width:49%; border-radius:8px; overflow:hidden;}

@media all and (min-width:768px) {
  #sub .perform .topinfo dl {padding-right:1em;}
  #sub .perform .topinfo dl dt {width:unset; margin-right:1em;}
}

@media all and (min-width:1200px) {
  #sub .perform .info01 ul {flex-wrap:nowrap; gap:20px;}
  #sub .perform .info01 ul li {width:unset; border-radius:16px;}
  #sub .perform .info01 ul li img {max-height:460px;}
}


/*인증현황*/
#sub .certi .info01 ul {display:flex; flex-wrap:wrap; gap:20px 2%;}
#sub .certi .info01 ul li {width:49%;}
#sub .certi .info01 ul li .img {position:relative; -webkit-box-shadow:0 0 20px 0 rgba(0,0,0,0.1); -moz-box-shadow:0 0 20px 0 rgba(0,0,0,0.1); box-shadow:0 0 20px 0 rgba(0,0,0,0.1);}
#sub .certi .info01 ul li .img a {font-family:var(--ic); display:flex; align-items:center; justify-content:center; text-align:center; background:var(--col03); color:#fff; width:40px; height:40px; border-radius:8px; position:absolute; right:10px; bottom:10px; font-size:1.25em;}
#sub .certi .info01 ul li .img a:after {content:'expand_content';}
#sub .certi .info01 ul li p {font-weight:600; padding:10px; text-align:center;}

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

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


/*특허현황*/
#sub .patent .info01 ul {display:flex; flex-wrap:wrap; gap:20px 2%;}
#sub .patent .info01 ul li {width:49%;}
#sub .patent .info01 ul li .img {position:relative; -webkit-box-shadow:0 0 20px 0 rgba(0,0,0,0.1); -moz-box-shadow:0 0 20px 0 rgba(0,0,0,0.1); box-shadow:0 0 20px 0 rgba(0,0,0,0.1);}
#sub .patent .info01 ul li .img a {font-family:var(--ic); display:flex; align-items:center; justify-content:center; text-align:center; background:var(--col03); color:#fff; width:40px; height:40px; border-radius:8px; position:absolute; right:10px; bottom:10px; font-size:1.25em;}
#sub .patent .info01 ul li .img a:after {content:'expand_content';}
#sub .patent .info01 ul li p {font-weight:600; padding:10px; text-align:center;}

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

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


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

@media all and (min-width:768px) {
  #sub .privacy h4 {font-size:1.35em;}
}


/*이메일무단수집거부*/
#sub .noemail .box {border:1px solid var(--border); padding:40px 20px; border-radius:16px;}
#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 {}
#sub .sitemap li {text-align:center;}
#sub .sitemap li h1 {display:flex; align-items:center; justify-content:center; padding:10px; background:var(--col03); border-radius:16px; font-weight:700; color:#fff;}
#sub .sitemap li .sub {width:100%; padding:20px 0;}
#sub .sitemap li .sub dl {display:flex; flex-wrap:wrap; gap:10px;}
#sub .sitemap li .sub dd {width:calc(50% - 5px); border:1px solid var(--border); border-radius:16px; transition:0.3s;}
#sub .sitemap li .sub dd:hover {background:var(--lbg);}
#sub .sitemap li .sub dd a {display:block; padding:10px;}

@media all and (min-width:768px) {
  #sub .sitemap ul {display:flex; flex-wrap:wrap; gap:20px 2%;}
  #sub .sitemap li {width:49%;}
  #sub .sitemap li .sub dd {width:100%;}
}

@media all and (min-width:1200px) {
  #sub .sitemap li {width:unset; flex:1;}
  #sub .sitemap li h1 {padding:20px 10px;}
}