.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; height:max(300px, 30vh); display:flex; flex-direction:column; justify-content:center;}
.waitbox p {font-size:1.5em; font-weight:700; opacity:0.2;}

@media all and (min-width:768px) {
  .waitbox p {font-size:2em;}
}


/*sub*/
#sub .subtab {display:flex; margin:0 0 40px; text-align:center; background:var(--lbg); border-radius:8px; overflow:hidden;}
#sub .subtab a {flex:1; display:flex; align-items:center; justify-content:center; font-weight:600; padding:0.5em; min-height:50px; color:#aaa; position:relative;}
#sub .subtab a.on {color:#fff; background:var(--main-gra);}
#sub .titbox {display:flex; flex-wrap:wrap; gap:20px 5%;}
#sub .titbox > .tit {width:100%; margin:0 0 20px; border-top:1px solid #404040; padding:20px 0 0;}
#sub .titbox > .con {width:100%;}
#sub .tabbox {overflow-x:auto;}
#sub .tab01 {border-top:2px solid var(--col04); 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:700; font-size:1.75em; line-height:1.25;}
#sub .h_m {font-weight:600; font-size:1.35em;}
#sub .h_s {font-weight:600; font-size:1.1em;}
#sub .notice_sample {color:var(--col05); padding:20px; border-radius:8px; border:10px solid var(--lbg); display:flex; align-items:center; justify-content:center;}
#sub .notice_sample p {font-weight:600; display:flex; gap:10px;}
#sub .notice_sample p:before {content:'error'; font-family:var(--ic); color:var(--col03);}

@media all and (min-width:768px) {
  #sub .subtab {margin:0 0 60px;}
  #sub .titbox > .tit,
  #sub .titbox > .con {padding:40px 0 0;}
  #sub .titbox > .tit {width:25%;}
  #sub .titbox > .con {width:70%; border-top:1px solid var(--border);}
}

@media all and (min-width:1200px) {
  #sub .subtab {margin:0 auto 80px; padding:10px;}
  #sub .subtab a.on {border-radius:8px;}
  #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;}
}


/*
.hover-modal{display:none;position:fixed;inset:0;z-index:1000;justify-content:center;align-items:center;}
.hover-modal.show{display:flex;}
.hover-modal-hit{position:absolute;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(20px);}
.hover-modal-viewer{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;}
.hover-modal-img{display:block;max-width:80vw;max-height:80vh;border-radius:8px;user-select:none;-webkit-user-drag:none;pointer-events:none;}
body.pc .hover-view{cursor:zoom-in;}
body.mobile .hover-view{pointer-events:none;}
*/


/*인사말*/
.sub.grt .c-tit {display:flex; background:url('../img/sub01/grt_i01.jpg') no-repeat center center / cover; padding:160px min(4vw, 40px) 0; border-radius:8px; margin:0 auto 80px;}
.sub.grt .c-tit .box {background:#4565A2e6; backdrop-filter:blur(10px); padding:40px min(4vw, 40px); color:#fff; width:100%; border-radius:8px; display:flex; flex-direction:column; gap:20px; justify-content:center; align-items:center; text-align:center; margin-bottom:-40px;}
.sub.grt .c-txt {line-height:1.8;}
.sub.grt .c-txt .ceo {text-align:right;}
.sub.grt .c-txt .ceo b {letter-spacing:0.5em; margin:0 -0.5em 0 1em;}

@media all and (min-width:768px) {
  .sub.grt .c-txt {padding:0 min(4vw, 40px);}
}

@media all and (min-width:1200px) {
  .sub.grt .c-tit {padding:60px 60px 0;}
  .sub.grt .c-tit .box {width:min(50%, 400px); aspect-ratio:1 / 1; margin-bottom:-60px; gap:40px; align-items:flex-start; text-align:left;}
  .sub.grt .c-txt {padding:0 0 0 520px;}
}


/*회사소개*/
.sub.oview .c-core {background:var(--lbg);}
.sub.oview .c-core dl {display:flex; flex-wrap:wrap; gap:20px; padding:40px 0; width:min(100%, 640px); margin:0 auto;}
.sub.oview .c-core dt,
.sub.oview .c-core dd {display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; width:calc(50% - 10px); aspect-ratio:1/1; border-radius:100%;}
.sub.oview .c-core dt {background:var(--main-gra); color:#fff;}
.sub.oview .c-core dt em {font-weight:600; color:#ffffff64;}
.sub.oview .c-core dd {background:#fff; border-radius:1000px; padding:10px 20px 20px;}
.sub.oview .c-core dd img {width:min(30%, 60px); margin:0 auto;}
.sub.oview .c-core dd .t01 {font-size:1.1em; font-weight:600;}
.sub.oview .c-core dd .t02 {color:#777;}
.sub.oview .c-his dl {display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:center;}
.sub.oview .c-his dt {font-size:1.25em; font-weight:600; padding:0 0 40px;}
.sub.oview .c-his dd {border-bottom:1px solid var(--border); padding:0 0 40px;}
.sub.oview .c-his ul {display:flex; flex-direction:column; gap:10px;}
.sub.oview .c-his ul li {display:grid; grid-template-columns:40px 1fr; gap:10px;}
.sub.oview .c-his ul li > span {font-weight:600; text-align:center; color:var(--col03);}
.sub.oview .c-his ul li > p {color:#777;}

@media all and (min-width:1200px) {
  .sub.oview .c-core dl {border-radius:1000px; width:100%; padding:60px 0;}
  .sub.oview .c-core dt,
  .sub.oview .c-core dd {width:calc(25% - 15px);}
  .sub.oview .c-core dd {padding:20px 30px 30px;}
  .sub.oview .c-core dd img {margin-bottom:10px;}
  .sub.oview .c-core dd .t01 {font-size:1.25em;}
  .sub.oview .c-his dl {gap:40px 80px;}
  .sub.oview .c-his dt {font-size:1.5em;}
  .sub.oview .c-his ul li {gap:10px 20px;}
}

/*주요고객사*/
.sub.partners .c-partners ul {display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;}
.sub.partners .c-partners ul li {border-radius:8px; box-shadow:0 0 30px 0 rgba(0,0,0,0.1); padding:10px;}
.sub.partners .c-partners ul li img {display:block; width:min(80%, 200px); margin:0 auto;}

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

@media all and (min-width:1200px) {
  .sub.partners .c-partners ul {grid-template-columns:repeat(4, 1fr); gap:40px 20px;}
}


/*오시는 길*/
.sub.map .mapwrap {border:1px solid var(--border); border-radius:8px; 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 .c-info {position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:40px 60px;}
.sub.map .c-info .box {background:#4565A2e6; backdrop-filter:blur(10px); padding:40px min(4vw, 40px); color:#fff; width:160px; aspect-ratio:1/1; border-radius:8px; display:none; flex-direction:column; justify-content:center; align-items:center; text-align:center; margin:-40px 0 0 20px;}
.sub.map .c-info .box em {font-weight:600; color:#ffffff64;}
.sub.map .c-info ul {padding:40px 0 0 0; display:flex; flex-direction:column; gap:20px 40px;}
.sub.map .c-info ul li {display:grid; grid-template-columns:1fr; align-items:center; gap:0 20px;}
.sub.map .c-info ul li span {display:flex; align-items:center; font-weight:600; color:var(--col03); gap:1em;}
.sub.map .c-info ul li span:before {font-family:var(--ic); display:flex; align-items:center; justify-content:center; text-align:center; width:3em; height:3em; border-radius:100%; background:var(--lbg); color:var(--col04);}
.sub.map .c-info ul li:nth-child(1) span:before {content:'location_on';}
.sub.map .c-info ul li:nth-child(2) span:before {content:'call';}
.sub.map .c-info ul li:nth-child(3) span:before {content:'fax';}
.sub.map .c-info ul li:nth-child(4) span:before {content:'mail';}
.sub.map .c-info ul li p {padding:0 0 0 4em;}

@media all and (min-width:768px) {
  .sub.map .c-info {grid-template-columns:auto 1fr;}
  .sub.map .c-info .box {width:200px; margin-left:40px; display:flex;}
  .sub.map .c-info ul {flex-wrap:wrap; flex-direction:row; padding:60px 0 0;}
  .sub.map .c-info ul li {grid-template-columns:auto 1fr;}
  .sub.map .c-info ul li p {padding:0;}
}

@media all and (min-width:1200px) {
  .sub.map .c-info .box {margin:-60px 0 0 60px;}
  .sub.map .c-info ul {padding:60px 0 0;}
}


/*기술현황*/
.sub.tech .techtop .tab {text-align:center;}
.sub.tech .techtop .tab p {font-weight:600; color:#fff; background:var(--main-gra); display:inline-flex; align-items:center; justify-content:center; padding:0.5em 1em; border-radius:8px; min-height:50px; width:100%; text-transform:uppercase;}
.sub.tech .techtop .t01 {color:var(--col03);}
.sub.tech .techtop .t02 {color:var(--col05);}
.sub.tech .techtop .t03 {padding:0 0 0 1em; border-left:2px solid var(--border);}

@media all and (min-width:768px) {
  .sub.tech .techtop {text-align:center;}
  .sub.tech .techtop .tab p {width:unset; min-width:30%;}
  .sub.tech .techtop .t03 {display:inline-block; border-right:2px solid var(--border); padding:0.25em 1em;}
}

@media all and (min-width:1200px) {
  .sub.tech .techtop .t03 {min-width:30%;}
}


/*기술현황 - 설계*/
.sub.tech01 .design-list ul {display:grid; grid-template-columns:1fr; gap:40px 20px; align-items:flex-start;}
.sub.tech01 .design-list ul li {display:flex; flex-direction:column; gap:10px;}
.sub.tech01 .design-list ul li .img {border:1px solid var(--border); border-radius:8px; overflow:hidden; aspect-ratio:16/9; position:relative;}
.sub.tech01 .design-list ul li .img img {width:100%; height:100%; object-fit:cover; object-position:center;}
.sub.tech01 .design-list ul li .img .flip {position:absolute; left:0; top:0; opacity:0; transform:scale(1.1); transition:0.3s;}
.sub.tech01 .design-list ul li:hover .img .flip {opacity:1; transform:scale(1);}
.sub.tech01 .design-list ul li a {background:var(--col05); color:#fff; border-radius:8px; padding:10px; display:flex; align-items:center; justify-content:center; gap:0.25em; text-align:center; transition:0.3s;}
.sub.tech01 .design-list ul li a:hover {background:var(--col04);}
.sub.tech01 .design-list ul li a:after {content:'chevron_right'; font-family:var(--ic);}

@media all and (min-width:768px) {
  .sub.tech01 .design-list ul {grid-template-columns:repeat(2, 1fr);}
  .sub.tech01 .design-list ul li {gap:20px;}
}

@media all and (min-width:1200px) {
  .sub.tech01 .design-list ul {/*grid-template-columns:repeat(3, 1fr);*/ gap:40px;}
}


/*기술현황 - 제작*/
.sub.tech02 .prdt-list ul {display:grid; grid-template-columns:1fr; gap:40px 20px; align-items:flex-start;}
.sub.tech02 .prdt-list ul li {display:flex; flex-direction:column; gap:10px;}
.sub.tech02 .prdt-list ul li .img {border:1px solid var(--border); border-radius:8px; overflow:hidden; aspect-ratio:3/2; position:relative;}
.sub.tech02 .prdt-list ul li .img img {width:100%; height:100%; object-fit:cover; object-position:center;}
.sub.tech02 .prdt-list ul li .img .flip {position:absolute; left:0; top:0; opacity:0; transform:scale(1.1); transition:0.3s;}
.sub.tech02 .prdt-list ul li:hover .img .flip {opacity:1; transform:scale(1);}
.sub.tech02 .prdt-list ul li p {font-size:1.1em; font-weight:600; text-align:center;}
.sub.tech02 .prdt-list ul li a {background:var(--col05); color:#fff; border-radius:8px; padding:10px; display:flex; align-items:center; justify-content:center; gap:0.25em; text-align:center; transition:0.3s;}
.sub.tech02 .prdt-list ul li a:hover {background:var(--col04);}
.sub.tech02 .prdt-list ul li a:after {content:'chevron_right'; font-family:var(--ic);}

@media all and (min-width:768px) {
  .sub.tech02 .prdt-list ul {grid-template-columns:repeat(2, 1fr);}
  .sub.tech02 .prdt-list ul li {gap:20px;}
}

@media all and (min-width:1200px) {
  .sub.tech02 .prdt-list ul {grid-template-columns:repeat(4, 1fr); gap:60px 40px;}
}


/*기술현황 - 설치*/
.sub.tech03 .c-svc {background:#404040 url('../img/sub02/tech03_bg.jpg') no-repeat center center / cover; color:#fff; padding:40px 0;}
.sub.tech03 .c-svc .t01 {color:var(--col01);}
.sub.tech03 .c-svc ul {display:grid; grid-template-columns:1fr; box-shadow:0 0 30px 0 rgba(0,0,0,0.1); border-radius:8px; background:#40404032; backdrop-filter:blur(20px); border:1px solid #ffffff24;}
.sub.tech03 .c-svc ul li {padding:20px; display:flex; flex-direction:column;}
.sub.tech03 .c-svc ul li:nth-child(2) {border-top:1px solid #ffffff24; border-bottom:1px solid #ffffff24;}
.sub.tech03 .c-svc ul li img {width:min(25%, 50px); margin:0 0 0 auto;}
.sub.tech03 .c-svc .btn {display:flex; align-items:center; justify-content:center; text-align:center; padding:0.5em; background:var(--col01); border-radius:8px; color:#fff; min-height:50px; margin:0 auto; gap:0.25em; transition:0.3s;}
.sub.tech03 .c-svc .btn:hover {background:var(--col03);}
.sub.tech03 .c-svc .btn:after {content:'chevron_right'; font-family:var(--ic);}
.sub.tech03 .c-key {display:grid; grid-template-columns:1fr; gap:40px;}
.sub.tech03 .c-key .box {display:flex; flex-direction:column; gap:10px;}
.sub.tech03 .c-key .box img {border-radius:8px; box-shadow:0 0 30px 0 rgba(0,0,0,0.1); margin:0 0 10px; width:100%;}
.sub.tech03 .c-qual {display:grid; grid-template-columns:1fr; gap:20px;}
.sub.tech03 .c-qual li {padding:20px; background:var(--lbg); border-radius:8px; display:flex; flex-direction:column; gap:10px;}
.sub.tech03 .c-qual li .t01 {color:var(--col03);}

@media all and (min-width:768px) {
  .sub.tech03 .c-svc {padding:60px 0;}
  .sub.tech03 .c-svc ul {grid-template-columns:repeat(3, 1fr);}
  .sub.tech03 .c-svc ul li:nth-child(2) {border-top:0; border-bottom:0; border-left:1px solid #ffffff24; border-right:1px solid #ffffff24;}
  .sub.tech03 .c-svc .btn {width:33.33%;}
  .sub.tech03 .c-key .c-key__rcon {display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; grid-template-columns:repeat(2, 1fr);}
  .sub.tech03 .c-qual {grid-template-columns:repeat(2, 1fr);}
}

@media all and (min-width:1200px) {
  .sub.tech03 .c-svc {padding:80px 0;}
  .sub.tech03 .c-svc ul li {padding:30px;}
  .sub.tech03 .c-key {grid-template-columns:7fr 5fr;}
  .sub.tech03 .c-key .c-key__rcon {grid-template-columns:1fr;}
  .sub.tech03 .c-key .c-key__rcon .box {}
  .sub.tech03 .c-qual li {padding:30px;}
}


/*서비스 - 생산 및 설비 현황*/
.sub.fac .c-milyang {display:flex; flex-direction:column; gap:20px;}
.sub.fac .c-milyang img {border-radius:8px;}
.sub.fac .c-milyang dl {display:grid; grid-template-columns:auto 1fr; gap:0.25em 1em; padding:20px; background:var(--lbg); border-radius:8px;}
.sub.fac .c-milyang dt {color:var(--col03); font-weight:600;}

@media all and (min-width:1200px) {
  .sub.fac .c-milyang dl {grid-template-columns:repeat(2, auto 1fr); padding:30px;}
}


/*서비스 - 생산 캐파*/
.sub.capa .c-capa {background:var(--lbg); padding:40px 0;}
.sub.capa .c-capa .pdinner {display:grid; grid-template-columns:1fr; gap:20px;}
.sub.capa .c-capa .box {border-radius:8px; background:#fff; box-shadow:0 0 30px 0 rgba(0,0,0,0.1); display:flex; flex-direction:column; overflow:hidden;}
.sub.capa .c-capa .box img {width:100%;}
.sub.capa .c-capa .box .tit {text-transform:capitalize; padding:20px; padding-bottom:0 !important;}
.sub.capa .c-capa .box .numbox {padding:20px; padding-top:0 !important; margin-top:auto; display:flex; flex-direction:column;}
.sub.capa .c-capa .box .num {color:var(--col03); font-weight:700; font-size:2em;}
.sub.capa .c-capa .box .unit {color:var(--col05);}

@media all and (min-width:768px) {
  .sub.capa .c-capa {padding:60px 0;}
  .sub.capa .c-capa .pdinner {grid-template-columns:repeat(2, 1fr);}
  .sub.capa .c-capa .box .num {font-size:2.5em;}
}

@media all and (min-width:1200px) {
  .sub.capa .c-capa {padding:80px 0;}
  .sub.capa .c-capa .pdinner {grid-template-columns:repeat(4, 1fr);}
  .sub.capa .c-capa .box .tit {padding:30px;}
  .sub.capa .c-capa .box .numbox {padding:30px;}
  .sub.capa .c-capa .box .num {font-size:3em;}
}


/*서비스 - 품질 및 A/S체계*/
.sub.qual .c-asr ul {display:grid; grid-template-columns:1fr; gap:20px;}
.sub.qual .c-asr ul li {box-shadow:0 0 30px 0 rgba(0,0,0,0.1); display:flex; flex-direction:column; padding:20px; border-radius:8px; gap:10px;}
.sub.qual .c-asr ul li img {width:min(30%, 60px); margin:0 0 0 auto;}
.sub.qual .c-proc {padding:40px 20px; border-radius:8px; background:var(--lbg);}
.sub.qual .c-proc ul {display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;}
.sub.qual .c-proc ul li {display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; aspect-ratio:1/1; border-radius:100%; background:#fff; position:relative; box-shadow:0 0 30px 0 rgba(0,0,0,0.05);}
.sub.qual .c-proc ul li:not(:last-child):after {content:'chevron_right'; font-family:var(--ic); display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:100%; background:var(--col05); color:#fff; position:absolute; right:-15px; top:calc(50% - 15px);}
.sub.qual .c-proc ul li em {font-weight:800; font-size:1.1em; font-style:italic; color:var(--col03);}
.sub.qual .c-proc ul li img {width:min(30%, 60px); margin:0 auto 10px;}
.sub.qual .c-as {display:grid; grid-template-columns:1fr; gap:40px 20px;}
.sub.qual .c-as .img {border-radius:8px; overflow:hidden;}
.sub.qual .c-as ul {display:grid; grid-template-columns:1fr; gap:20px;}
.sub.qual .c-as ul li {display:flex; flex-direction:column; gap:10px;}
.sub.qual .c-as ul li em {font-weight:800; font-style:italic; color:var(--col03); margin-right:0.25em;}
.sub.qual .c-as ul li em:after {content:'.';}

@media all and (min-width:768px) {
  .sub.qual .c-asr ul {grid-template-columns:repeat(2, 1fr);}
  .sub.qual .c-proc {padding:40px;}
  .sub.qual .c-proc ul {grid-template-columns:repeat(3, 1fr);}
  .sub.qual .c-proc ul li em {font-size:1.25em;}
  .sub.qual .c-proc ul li p {position:relative; padding-top:10px; width:100%;}
  .sub.qual .c-proc ul li p:before {content:''; display:inline-block; width:20%; height:1px; background:var(--border); position:absolute; left:40%; top:0;}
}

@media all and (min-width:1200px) {
  .sub.qual .c-asr ul li {padding:30px;}
  .sub.qual .c-proc ul {grid-template-columns:repeat(5, 1fr);}
  .sub.qual .c-proc ul li em {font-size:1.5em; margin:0 0 10px;}
  .sub.qual .c-as {grid-template-columns:repeat(2, 1fr);}
  .sub.qual .c-as .img {order:2;}
  .sub.qual .c-as .img img {object-fit:cover; width:100%; height:100%}
  .sub.qual .c-as ul {order:1; gap:40px; padding-right:40px;}
}


/*개인정보처리방침*/
#sub .privacy .box01 {padding:20px; background:var(--lbg); border-radius:8px; text-align:center;}
#sub .privacy h4 {font-size:1.25em; font-weight:600;}

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


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

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


/*사이트맵*/
#sub .sitemap ul {display:grid; grid-template-columns:repeat(2, 1fr); gap:40px 20px; text-align:center;}
#sub .sitemap li {display:flex; flex-direction:column; gap:1em;}
#sub .sitemap li > a {font-size:1.25em; font-weight:600;}
#sub .sitemap .sub dl {display:flex; flex-direction:column; gap:10px; padding:20px; border-radius:8px; background:var(--lbg);}
#sub .sitemap .sub dl a {font-weight:600; transition:0.3s;}
#sub .sitemap .sub dl a:not(:hover) {color:#999;}

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

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