.col01 {color:var(--col01) !important;}
.waitbox {text-align:center; background:var(--lbg); padding:40px 20px; border-radius:8px;}
.waitbox img {width:100%; max-width:200px; 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; color:#83888B;}
#sub .box01 {background:var(--lbg); padding:20px; border-radius:8px;}

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

@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 .box01 {padding:30px;}
}


/*(주)창신*/
#sub .intro .info01 {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:40px 5%;}
#sub .intro .info01 .img img {border-radius:8px;}

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

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


/*연혁*/
#sub .history dl {display:flex; flex-wrap:wrap; align-items:center; gap:40px 0;}
#sub .history dt {width:100%;}
#sub .history dt p {font-weight:700; font-size:1.25em; position:relative; padding-left:30px;}
#sub .history dt p:before,
#sub .history dt p:after {content:''; display:inline-block; position:absolute; border-radius:100%; background:var(--col01);}
#sub .history dt p:before {width:8px; height:8px; left:6px; top:calc(50% - 4px);}
#sub .history dt p:after {width:20px; height:20px; left:0; top:calc(50% - 10px); opacity:0.2;}
#sub .history dd {width:100%;}
#sub .history dd {display:flex; flex-wrap:wrap; align-items:flex-start; gap:20px 0;}
#sub .history dd h5 {font-weight:700; width:100px; opacity:0.5; padding:20px 0;}
#sub .history dd p {width:calc(100% - 100px); background:var(--lbg); padding:20px; border-radius:8px;}

@media all and (min-width:768px) {
  #sub .history dt {width:20%;}
  #sub .history dd {width:80%;}
  #sub .history dd h5 {font-size:1.1em;}
}

@media all and (min-width:1200px) {
  #sub .history dt p {font-size:1.5em;}
}


/*품질안전*/
#sub .safe .img_li li .img {position:relative;}
#sub .safe .img_li li .img a {position:absolute; right:10px; bottom:10px; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:100%; background:#83888BF2; color:#fff; transition:0.2s;}
#sub .safe .img_li li .img a:hover {background:var(--col01);}
#sub .safe .img_li li .img a:after {content:'add'; font-family:var(--ic);}

@media all and (min-width:1200px) {
  #sub .safe .img_li li .img a {width:50px; height:50px;}
}


/*오시는길*/
#sub .map .mapwrap {width:100%; border:1px solid var(--border); border-radius:8px; overflow:hidden;}
#sub .map .mapwrap .cont {display:none;}
#sub .map .mapwrap .map_border {display:none;}
#sub .map .mapwrap .wrap_controllers {display:none;}
#sub .map .info01 p {background:var(--lbg); padding:20px; border-radius:8px; font-weight:600; display:flex; align-items:center; gap:10px;}
#sub .map .info01 p:before {content:'location_on'; font-family:var(--ic); color:var(--col01); font-size:1.25em;}


/*서비스·제품*/
#sub .product .info01 {display:flex; flex-wrap:wrap; gap:20px 5%; border:1px solid var(--border); padding:20px; border-radius:16px;}
#sub .product .info01 .txt {width:100%;}
#sub .product .info01 .img {width:100%;}
#sub .product .info01 .img img {border-radius:8px;}
#sub .product .info01 h3 {font-size:1.5em; font-weight:800;}
#sub .product .info01 h5 {color:#9ea7ab; font-weight:700;}
#sub .product .info01 dl {display:flex; flex-wrap:wrap; gap:20px 0;}
#sub .product .info01 dl dt {color:var(--col01); font-weight:700; width:6em;}
#sub .product .info01 dl dd,
#sub .product .info01 dl.full dd {width:calc(100% - 6em);}
#sub .product .info01 ul {display:flex; flex-wrap:wrap; gap:10px;}
#sub .product .info01 ul li {padding:5px 10px; border-radius:8px; background:var(--lbg); border:1px solid var(--border);}
#sub .product .info01 .labeltxt {display:flex; align-items:flex-start; gap:10px;}
#sub .product .info01 .labeltxt:not(:last-child) {margin-bottom:10px;}
#sub .product .info01 .labeltxt em {display:flex; width:6em; align-items:center; justify-content:center; color:#fff; font-weight:700; background:#9ea7ab; padding:0 1em; border-radius:100px; flex-shrink:0;}
#sub .product .info02 {border-radius:8px; background:var(--lbg); padding:20px; text-align:center;}
#sub .product .info02 .tit {margin:0 0 20px;}
#sub .product .info02 .tit:after {content:'keyboard_double_arrow_up'; font-family:var(--ic); font-size:2em; margin:20px 0 0; display:block; color:#83888B;}
#sub .product .info02 .tit h4 {font-size:1.1em; font-weight:700; color:#fff; background:var(--col01); border-radius:100px; padding:10px; margin:0 auto 10px;}
#sub .product .info02 .tit h5 {font-weight:700; color:#fff; background:#83888B; border-radius:100px; padding:10px; margin:0  auto;}
#sub .product .info02 ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 2%; position:relative;}
#sub .product .info02 ul:after {content:''; display:inline-block; width:1px; height:100%; background:var(--border); position:absolute; left:50%; top:0; z-index:0;}
#sub .product .info02 ul li {width:100%; border-radius:200px; padding:10px; background:#fff; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; gap:10px 1em; position:relative; z-index:1;}
#sub .product .info02 ul li img {width:40px; flex-shrink:0;}
#sub .product .info03 {border-radius:8px; padding:20px; background:var(--lbg);}
#sub .product .info03 .txt {margin:0 0 40px;}
#sub .product .info03 .txt h4 {font-size:1.1em; font-weight:700; color:var(--col01); margin:0 0 10px;}
#sub .product .info03 .txt dl {margin:40px 0 0; display:flex; flex-wrap:wrap; gap:5px;}
#sub .product .info03 .txt dl dd {display:flex; align-items:center; gap:0 5px;}
#sub .product .info03 .txt dl dd:not(:last-of-type):after {content:'arrow_right'; font-family:var(--ic);}
#sub .product .info03 .txt dl dd span {padding:5px 10px; border-radius:8px; background:#fff; border:1px solid var(--border);}
#sub .product .info03 .img img {border-radius:8px; width:100%;}
#sub .product .info04 ul {display:grid; grid-template-columns:1fr; grid-template-rows:repeat(3, auto); grid-row-gap:20px;}
#sub .product .info04 ul li {border-radius:8px; background:var(--lbg); width:100%; padding:20px;}
#sub .product .info04 ul li img {border-radius:8px; width:100%; /*margin:0 0 20px;*/}
#sub .product .info04 ul li .t01 {display:flex; align-items:center; gap:0 10px; margin:0 0 10px; font-weight:700; background:#83888B; color:#fff; padding:10px; border-radius:8px;}
#sub .product .info04 ul li .t01 em {display:flex; flex-shrink:0; align-items:center; justify-content:center; width:24px; height:24px; font-size:16px; font-weight:700; background:#fff; color:#83888B; border-radius:4px;}
#sub .product .info04 dl {display:flex; flex-wrap:wrap; gap:10px 0;}
#sub .product .info04 dl dt {width:5em; color:var(--col01); font-weight:700;}
#sub .product .info04 dl dd {width:calc(100% - 5em);}
#sub .product .info05 {display:flex; flex-wrap:wrap; gap:40px;}
#sub .product .info05 ul {width:100%; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:20px 2%; background:var(--lbg); border-radius:8px; padding:20px;}
#sub .product .info05 ul li {width:100%; position:relative; overflow:hidden;}
#sub .product .info05 ul li img {border-radius:8px; border:1px solid var(--border); width:100%; margin:0 0 10px;}
#sub .product .info05 ul li .t01 {font-size:1.1em; font-weight:700; margin:10px 0; display:flex; align-items:center; justify-content:flex-start; gap:0 10px;}
#sub .product .info05 ul li .t01 em {display:flex; width:24px; height:24px; font-size:16px; align-items:center; justify-content:center; color:#fff; font-weight:700; background:var(--col01); border-radius:4px;}
#sub .product .info05 ul li .t02 {color:#83888B;}
#sub .product .info05 .box {width:100%; border-radius:8px; border:1px solid var(--border); padding:20px;}
#sub .product .info05 .box .t01 {margin:0 0 20px;}
#sub .product .info05 .box img {border-radius:8px; width:100%;}

@media all and (min-width:540px) {
  #sub .product .info03 {padding:40px 20px;}
  #sub .product .info01 .txt {width:65%;}
  #sub .product .info01 .img {width:30%;}
}

@media all and (min-width:768px) {
  #sub .product .info01 {padding:40px;}
  #sub .product .info01 h3 {font-size:1.75em;}
  #sub .product .info01 h5 {font-size:1.1em;}
  #sub .product .info01 dl dd {width:calc(50% - 6em);}
  #sub .product .info02 {padding:40px;}
  #sub .product .info02 .tit h4,
  #sub .product .info02 .tit h5 {width:32%; padding:20px;}
  #sub .product .info02 .tit h4 {font-size:1.25em;}
  #sub .product .info02 .tit h5 {font-size:1.1em;}
  #sub .product .info02 ul:after {width:100%; height:1px; left:0; top:50%;}
  #sub .product .info02 ul li {width:32%; flex-wrap:wrap; padding:20px 10px;}
  #sub .product .info02 ul li p {width:100%;}
  #sub .product .info03 {display:flex; align-items:center;}
  #sub .product .info03 .txt {width:max(60%, calc(100% - 400px)); margin:0; padding:0 40px 0 0;}
  #sub .product .info03 .txt h4 {font-size:1.25em;}
  #sub .product .info03 .img {width:min(40%, 400px);}
  #sub .product .info04 ul {grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(2, auto); grid-column-gap:2%;}
  #sub .product .info04 ul li:nth-child(1) {grid-area:1/1/3/2;}
  #sub .product .info04 ul li:nth-child(2) {grid-area:1/2/2/3;}
  #sub .product .info04 ul li:nth-child(3) {grid-area:2/2/3/3;}
  #sub .product .info05 ul li {width:32%;;}
  #sub .product .info05 ul li .t01 {font-size:1.25em;}
  #sub .product .info05 .box {width:calc(50% - 20px); /*flex:1 1 0;*/}
}

@media all and (min-width:1200px) {
  #sub .product .info01 {align-items:center;}
  #sub .product .info03 {padding:40px 60px;}
  #sub .product .info04 ul {grid-template-columns:repeat(3, 1fr); grid-template-rows:auto;}
  #sub .product .info04 ul li:nth-child(1),
  #sub .product .info04 ul li:nth-child(2),
  #sub .product .info04 ul li:nth-child(3) {grid-area:auto;}
  #sub .product .info05 ul {padding:40px;}
  #sub .product .info05 .box {padding:40px;}
}


/*관계사*/
#sub .partner .info01 {border-radius:8px; background:var(--lbg); overflow:hidden; padding:0 20px 40px;}
#sub .partner .info01 .img {text-align:center;}
#sub .partner .info01 .img img {width:min(100%, 680px);}
#sub .partner .info01 .txt ul {display:flex; flex-wrap:wrap; background:#fff; border:1px solid var(--border); border-radius:8px;}
#sub .partner .info01 .txt ul li {width:100%; padding:10px;}
#sub .partner .info01 .txt ul li:not(:last-child) {border-bottom:1px solid var(--border);}
#sub .partner .info01 .txt ul li h5 {font-weight:700;}
#sub .partner .info01 .txt ul li p em {font-weight:700; color:#83888B; margin:0 0.5em 0 0;}

@media all and (min-width:768px) {
  #sub .partner .info01 .txt ul li {width:100%; display:flex; align-items:center; gap:0 5%; padding:10px 20px;}
  #sub .partner .info01 .txt ul li h5 {width:20%;}
  #sub .partner .info01 .txt ul li p {width:75%;}
}

@media all and (min-width:1200px) {
  #sub .partner .info01 {display:flex; align-items:center; padding:40px 40px 40px 0;}
  #sub .partner .info01 .img {width:55%; text-align:left;}
  #sub .partner .info01 .txt {width:45%;}
}


/*개인정보처리방침*/
#sub .privacy h4 {font-size:1.1em; font-weight:700; color:var(--col01);}


/*이메일무단수집거부*/
#sub .noemail .box {border:1px solid var(--border); border-radius:16px; padding:40px 20px;}
#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:flex-start; gap:40px;}
#sub .sitemap li {width:calc(50% - 20px); display:flex; flex-wrap:wrap;}
#sub .sitemap li h1 {width:100%; font-weight:700; color:var(--col01); margin:0 0 20px;}
#sub .sitemap li .sub {width:100%;}
#sub .sitemap li .sub a {display:block;}
#sub .sitemap li .sub dd {border:1px solid var(--border); padding:10px; border-radius:8px;}
#sub .sitemap li .sub dd:not(:last-of-type) {margin-bottom:10px;}
#sub .sitemap li .sub dd > a {font-weight:600; padding:0 5px;}
#sub .sitemap li .sub dd div {margin:10px 0 0; background:var(--lbg); padding:10px; border-radius:8px;}
#sub .sitemap li .sub dd div a {opacity:0.8; font-size:0.95em; margin:5px 0;}
#sub .sitemap li .sub dd div a:before {content:'·'; margin-right:0.25em;}

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

@media all and (min-width:1200px) {
  #sub .sitemap li {width:calc(20% - 32px);}
}