.col01 {color:#2747a5 !important;}
.col02 {color:#6699ff !important;}
.gra {background:linear-gradient(to right, #2747a5, #6699ff); color:transparent; -webkit-background-clip:text;}

/*sub*/
#sub * {word-break:keep-all; word-wrap:break-word;}
#sub .titbox01 {margin:0 0 40px;}
#sub .titbox01 .t01 {font-size:1.5em; font-weight:800; margin:0 0 20px;}
#sub .subtab {display:flex; text-align:center; gap:min(10px, 1%);}
#sub .subtab p {cursor:pointer; flex:1; display:flex; align-items:center; justify-content:center; font-weight:600; padding:0.5em; border-radius:10px; color:#536872; background:#f4f6f7; word-break:break-all; line-height:1.1;}
#sub .subtab p.on {background:#2747a5; background:linear-gradient(90deg, #2747a5 25%, #6699ff 100%); color:#fff;}
#sub .tabwrap {overflow-x:auto;}
#sub .tabwrap table {border-top:2px solid #2747a5; min-width:100%;}
#sub .tabwrap table tr {border-bottom:1px solid #e0e0e0;}
#sub .tabwrap table th,
#sub .tabwrap table td {padding:5px 10px;}
#sub .tabwrap table th {background:#fafafa;}
#sub .tabwrap table td {color:#666;}
#sub .tabwrap table td:not(:last-child) {border-right:1px solid #e0e0e0;}

@media all and (min-width:768px) {
  #sub .titbox01 {margin:0 0 60px;}
  #sub .titbox01 .t01 {font-size:1.75em;}
  #sub .titbox01 .t02 {font-size:1.1em;}
  #sub .subtab {font-size:1.1em;}
  #sub .subtab p {height:60px;}
}

@media all and (min-width:1200px) {
  #sub .titbox01 .t01 {font-size:2.25em;}
  #sub .titbox01 .t02 {font-size:1.25em;}
  #sub .subtab p {word-break:keep-all;}
  #sub .tabwrap table th,
  #sub .tabwrap table td {padding:10px;}
}


/*인사말*/
#sub .intro .info01 .img {position:relative; background:#f4f6f7; border-radius:10px;}
#sub .intro .info01 .img img {width:100%; max-width:400px; margin:0 auto; display:block;}
#sub .intro .info01 .img p {background:#2747a5; background:linear-gradient(90deg, #2747a5 25%, #6699ff 100%); color:#fff; padding:0.5em 1em; position:absolute; right:10px; bottom:10px; font-weight:600; border-radius:10px;}
#sub .intro .info01 .txt {margin:40px 0 0;}
#sub .intro .info01 .t01 {font-size:1.5em; font-weight:800; line-height:1.25; text-transform:uppercase;}
#sub .intro .info01 .t02 {color:#ccc; font-weight:800; text-transform:uppercase;}
#sub .intro .info01 .t04 {text-align:right; letter-spacing:0.25em;}

@media all and (min-width:768px) {
  #sub .intro .info01 {display:flex; flex-direction:row-reverse; justify-content:space-between; align-items:flex-start;}
  #sub .intro .info01 .img {width:35%;}
  #sub .intro .info01 .txt {width:60%; margin:0;}
  #sub .intro .info01 .t01 {font-size:2em;}
  #sub .intro .info01 .t02 {font-size:1.1em;}
}

@media all and (min-width:1200px) {
  #sub .intro .info01 .t01 {font-size:2.5em;}
  #sub .intro .info01 .t02 {font-size:1.35em;}
  #sub .intro .info01 .t04 {font-size:1.1em;}
}


/*회사개요*/
#sub .about .info01 {background:#f4f6f7 url('../img/sub_about_bg.jpg') no-repeat center center / cover; padding:40px 0;}
#sub .about .info01 ul {display:flex; flex-wrap:wrap; margin:0 -1%; text-align:center;}
#sub .about .info01 li {background:#fff; border-radius:10px; width:100%; margin:10px 1%; padding:20px; -webkit-box-shadow:0 0 30px 0 rgba(0,0,0,0.1); -moz-box-shadow:0 0 30px 0 rgba(0,0,0,0.1); box-shadow:0 0 30px 0 rgba(0,0,0,0.1);}
#sub .about .info01 li:first-child {background:#2747a5; background:linear-gradient(90deg, #2747a5 25%, #6699ff 100%); color:#fff; position:relative;}
#sub .about .info01 li:first-child .t01 {color:#fff;}
#sub .about .info01 li p {position:relative; z-index:1;}
#sub .about .info01 li .t01 {color:#2747a5; font-weight:700; font-size:1.1em; margin:0 0 10px;}
#sub .about .info01 li .t02 {word-break:break-all;}

@media all and (min-width:768px) {
  #sub .about .info01 {padding:60px 0;}
  #sub .about .info01 li {width:48%;}
}

@media all and (min-width:1200px) {
  #sub .about .info01 {padding:80px 0;}
  #sub .about .info01 li {width:31.33%; padding:30px;}
}


/*경영이념*/
#sub .vision .info01 {background:#f4f6f7; padding:40px 0;}
#sub .vision .info01 ul {display:flex; flex-wrap:wrap; margin:0 -1%; text-align:center;}
#sub .vision .info01 li {background:#fff; border-radius:10px; width:100%; margin:10px 1%; padding:20px; -webkit-box-shadow:0 0 30px 0 rgba(0,0,0,0.1); -moz-box-shadow:0 0 30px 0 rgba(0,0,0,0.1); box-shadow:0 0 30px 0 rgba(0,0,0,0.1);}
#sub .vision .info01 li img {width:100%; max-width:80px;}
#sub .vision .info01 li .t01 {font-size:1.1em; font-weight:700; margin:0 0 10px;}
#sub .vision .info01 li .t02 {color:#888; border-top:1px solid #e0e0e0; padding:10px 0 0;}
#sub .vision .info02 .box {border:1px solid #e0e0e0; padding:20px; border-radius:10px; margin:0 0 20px;}
#sub .vision .info02 .box:first-child {background:#2747a5; background:linear-gradient(90deg, #2747a5 25%, #6699ff 100%); color:#fff; border:0;}
#sub .vision .info02 .box .tit {font-size:1.1em; font-weight:700; margin:0 0 20px;}
#sub .vision .info02 .box .t01 {font-size:1.1em;}
#sub .vision .info02 .box .list01 {display:flex; flex-wrap:wrap; margin:0 -1%;}
#sub .vision .info02 .box .list01 li {width:48%; margin:5px 1%; background:#f4f6f7; padding:10px; border-radius:10px; text-align:center; font-weight:600;}
#sub .vision .info02 .box .list02 dd:not(:last-child) {margin-bottom:20px;}
#sub .vision .info02 .box .list02 p {font-weight:700; color:#2747a5; margin-bottom:10px;}

@media all and (min-width:768px) {
  #sub .vision .info01 li {width:31.33%;}
  #sub .vision .info02 .box {display:flex; align-items:center; padding:30px 0;}
  #sub .vision .info02 .box .tit {width:25%; margin:0; text-align:center; padding:0 20px;}
  #sub .vision .info02 .box .txt {width:75%; padding:0 20px;}
  #sub .vision .info02 .box .list01 li {padding:20px;}
  #sub .vision .info02 .box .list02 {display:flex; flex-wrap:wrap; justify-content:space-between;}
  #sub .vision .info02 .box .list02 dd {width:49%; margin:20px 0;}
  #sub .vision .info02 .box .list02 dd:not(:last-child) {margin-bottom:0}
}

@media all and (min-width:1200px) {
  #sub .vision .info01 li {padding:30px;}
  #sub .vision .info01 li .t01 {font-size:1.25em;}
  #sub .vision .info02 .box .tit {font-size:1.25em;}
}


/*조직도*/
:root {--orgline:30px; --orglinecol:#e0e0e0;}
#sub .org {text-align:center;}
#sub .org .org_wrap {overflow:hidden;}
#sub .org p {padding:10px 0; position:relative; word-break:break-all;}
#sub .org dl {display:flex; justify-content:center; align-items:flex-start; margin:0 -1.5%; position:relative;}
#sub .org dd {flex:1; max-width:30.33%; margin:0 1.5%; border-radius:10px;}
#sub .org dl.ceo dd {background:#2747a5; background: linear-gradient(270deg, #6699ff 0%, #2747a5 100%); color:#fff; font-weight:700;}
#sub .org dl.dep01 {justify-content:space-between; margin-top:var(--orgline); position:relative;}
#sub .org dl.dep01:before {content:''; display:inline-block; width:100%; height:1px; background:var(--orglinecol); position:absolute; left:0; bottom:50%; z-index:-1;}
#sub .org dl.dep01 dd {background:#00324f; color:#fff; font-weight:700;}
#sub .org dl.dep02 {margin-top:var(--orgline); position:relative;}
#sub .org dl.dep02:before {content:''; display:inline-block; width:80%; height:1px; background:var(--orglinecol); position:absolute; left:10%; bottom:100%; z-index:-1;}
#sub .org dl.dep02:after {content:''; display:inline-block; width:1px; height:200px; background:var(--orglinecol); position:absolute; left:50%; top:-200px; z-index:-1;}
#sub .org dl.dep02 dd > p {background:#536872; color:#fff; font-weight:700; margin-top:var(--orgline); position:relative; border-radius:10px 10px 0 0;}
#sub .org dl.dep02 dd > p:before {content:''; display:inline-block; width:1px; height:var(--orgline); background:var(--orglinecol); position:absolute; left:50%; bottom:100%; z-index:-1;}
#sub .org dl.dep02 ul {position:relative; display:block; background:#f4f6f7; border-radius:0 0 10px 10px;}
#sub .org dl.dep02 li p {font-weight:500;}

@media all and (min-width:768px) {
  #sub .org p {padding:20px 10px;}
  #sub .org ul {display:flex; justify-content:center; align-items:flex-start;}
  #sub .org dl.dep02 ul {padding:10px 0;}
  #sub .org dl.dep02 li p {padding:10px;}
}

@media all and (min-width:1200px) {
  :root {--orgline:40px;}
  #sub .org {font-size:1.1em;}
}


/*연혁*/
#sub .his .img {position:sticky; top:100px;}
#sub .his .year {font-size:1.5em; font-weight:800; background:#2747a5; background: linear-gradient(270deg, #6699ff 0%, #2747a5 100%); color:#fff; padding:10px 1em; border-radius:10px;}
#sub .his ul {display:flex; flex-wrap:wrap; flex-direction:column-reverse;}
#sub .his li {margin:10px 0;}
#sub .his li .t01 {font-weight:700; color:#2747a5;}
#sub .his li .t02 {padding:0 0 0 1em; word-break:break-all;}
#sub .his li img {max-width:calc(100% - 1em); margin:10px 0 20px 1em;}

@media all and (min-width:768px) {
  #sub .his .year {font-size:1.75em;}
  #sub .his .year:nth-of-type(even) {margin:0 50% 0 0; text-align:right;}
  #sub .his .year:nth-of-type(odd) {margin:0 0 0 50%;}
  #sub .his ul:nth-of-type(even) {margin:0 50% 0 0; text-align:right; padding:0 40px 0 0; border-right:1px solid #e0e0e0;}
  #sub .his ul:nth-of-type(odd) {margin:0 0 0 50%; padding:0 0 0 40px; border-left:1px solid #e0e0e0;}
  #sub .his li {display:flex; flex-wrap:wrap;}
  #sub .his ul:nth-of-type(even) li {flex-direction:row-reverse;}
  #sub .his li .t01 {width:7em;}
  #sub .his li .t02 {width:calc(100% - 7em); padding:0;}
  #sub .his ul li img {max-width:calc(100% - 7em);}
  #sub .his ul:nth-of-type(even) li img {margin:20px 7em 20px 0;}
  #sub .his ul:nth-of-type(odd) li img {margin:20px 0 20px 7em;}
}

@media all and (min-width:1200px) {
  #sub .his .year {font-size:2em;}
}


/*인증수상*/
#sub .certi .info01 {display:flex; flex-wrap:wrap; margin:0 -1%;}
#sub .certi .info01 li {width:48%; margin:10px 1%; text-align:center;}
#sub .certi .info01 li img {width:100%; border:10px solid #f4f6f7;}
#sub .certi .info01 li p {background:#f4f6f7; padding:10px 10px 20px; font-weight:600;}

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

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


/*오시는길*/
#sub .map .map_wrap {width:100%;}
#sub .map .info01 ul {border-top:1px solid #e0e0e0;}
#sub .map .info01 li {padding:20px 0; display:flex; align-items:center; border-bottom:1px solid #e0e0e0;}
#sub .map .info01 .t01 {font-size:1.25em; font-weight:800; margin:0 0 30px;}
#sub .map .info01 .t01:before {content:'\eb59'; font-family:'xeicon'; color:#2747a5; margin:0 0.5em 0 0;}
#sub .map .info01 .t02 {color:#2747a5; margin:0 0.5em 0 0; font-weight:700;}
#sub .map .info01 .t03 {font-weight:600;}

@media all and (min-width:768px) {
  #sub .map .info01 ul {display:flex; flex-wrap:wrap; justify-content:center; padding:30px 0 0;}
  #sub .map .info01 li {padding:0 20px; border-bottom:0;}
  #sub .map .info01 .t01 {font-size:1.5em; text-align:center;}
  #sub .map .info01 .t02 {margin:0 1em 0 0;}
}


/*공정*/
#sub .pro .info01 li {position:relative; border:10px solid #f4f6f7; text-align:center; margin:20px 0;}
#sub .pro .info01 li .num {display:flex; align-items:center; justify-content:center; font-weight:700; width:2em; height:2em; border-radius:10px; background:#2747a5; color:#fff; position:absolute; left:10px; top:10px;}
#sub .pro .info01 li img {width:100%;}
#sub .pro .info01 li h5 {font-weight:600; padding:20px 10px;}
#sub .pro .info01 li .t01 {font-size:1.1em; font-weight:700; padding:20px;}
#sub .pro .info01 li .t02 {font-size:0.9em; color:#999; padding:20px; margin-top:-40px;}

@media all and (min-width:480px) {
  #sub .pro .info01 ul {display:flex; flex-wrap:wrap; margin:0 -1%;}
  #sub .pro .info01 li {width:48%; margin:10px 1%;}
}

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

@media all and (min-width:1200px) {
  #sub .pro .info01 li {width:23%;}
  #sub .pro .info01 li .t01 {font-size:1.25em;}
}


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

/*이메일무단수집거부*/
#sub .noemail .box {border-top:2px solid #222; border-bottom:1px solid #e0e0e0; 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 {border-top:2px solid #222;}
#sub .sitemap li {display:flex; flex-wrap:wrap; width:100%; border-bottom:1px solid #e0e0e0;}
#sub .sitemap li h1 {width:100%; padding:10px; border-bottom:1px solid #e0e0e0; background:#fafafa; font-weight:600;}
#sub .sitemap li .sub {width:100%; padding:10px;}
#sub .sitemap li .sub dl {display:flex; flex-wrap:wrap; width:100%;}
#sub .sitemap li .sub dd {margin:0 1em 0 0;}
#sub .sitemap li .sub dd:before {content:'·'; margin:0 0.2em 0 0;}

@media all and (min-width:768px) {
  #sub .sitemap li h1 {width:20%; padding:20px; border-bottom:0; text-align:center;}
  #sub .sitemap li .sub {width:80%; padding:20px;}
}

@media all and (min-width:1200px) {
  #sub .sitemap li h1,
  #sub .sitemap li .sub {padding:30px 20px;}
}