@charset "utf-8";

h4+h5 {margin-top:0;}

.sub_tab {border: 1px solid #ddd; padding:15rem; background:#fff; border-radius:6px;}
.sub_tab ul {display:flex; flex-wrap:wrap;}
.sub_tab ul li a {display:block; padding:5rem 20rem; position:relative;}
.sub_tab ul li a:before {content:''; position:absolute; top:50%; right:0; width:1px; height:40%; border-left:1px dashed #a1a1a1; transform:translateY(-50%);}
.sub_tab ul li a.on,
.sub_tab ul li a:hover {font-weight:700; color:#165cc6;}
.sub_tab ul li a.on:after,
.sub_tab ul li a:hover:after {content:''; position:absolute; bottom:3rem; left:50%; width:calc(100% - 40rem); height:1px; background:#165cc6; transform:translateX(-50%);}

.step3 {display:flex; flex-wrap:wrap; margin:0 -10rem 0 -10rem;}
.step3 li {width:calc(25% - 20rem); margin:10rem; position:relative;}
.step3 li div {background:#ebf3ff; padding:25rem; text-align:center; border-radius:6px;}
.step3 li div em {display:flex; align-items:center; min-height:80rem; width:100%; justify-content:center;}
.step3 li span {display:block; margin-top:10rem; text-align:center; background:#165cc6; padding:10rem; font-weight:500; color:#fff; border-radius:6px;}
@media all and (max-width:1023px){
  .step3 li {width:calc(33.333% - 20rem);}
}
@media all and (max-width:768px){
  .step3 li {width:calc(50% - 20rem);}
}
@media all and (max-width:321px){
  .step3 {margin:10rem 0;}
  .step3 li {width:100%; margin:10rem 0;}
}

/*소개*/
.intro {position:relative; padding-left:400rem; padding-top:20rem; padding-bottom:20rem;}
.intro:before {content:''; position:absolute; bottom:0; left:0; width:346rem; height:603rem; background:url('/design/job/img/content/intro.png') no-repeat 0 0/contain;}
.intro dl dt {font-size:35rem; font-weight:700; line-height:1.45;}
.intro dl dd {margin:20rem 0 0 3rem; font-size:21rem; color:#4a4a4a; letter-spacing:-0.5rem;}
.intro .list {margin:60rem 0 0 3rem;}
.intro .list li {display:flex; align-items:center; margin:20rem 0;}
.intro .list li span {display:block; width:160rem; flex-shrink:0; flex-grow:0; font-size:21rem;  font-weight:500; background:url('/design/job/img/content/intro2.png') no-repeat right center;}
.intro .list li p {font-size:19rem; color:#165cc6; width:calc(100% - 160rem); margin-left:50rem; border:1px solid #165cc6; text-align:center; border-radius:60rem; padding:10rem; line-height:1.5}
@media all and (max-width:1240px){
  .intro {padding-left:350rem;}
  .intro:before {width:300rem; height:523rem;}
  .intro dl dt {font-size:31rem;}
  .intro dl dd {font-size:19rem;}
  .intro .list li span {font-size:19rem;}
  .intro .list li p {font-size:17rem;}
}
@media all and (max-width:1023px){
  .intro {padding-left:0;}
  .intro:before {left:inherit; right:0; width:270rem; height:471rem;}
  .intro .list {margin:20rem 0 0 3rem; padding-right:350rem;}
  .intro .list li {flex-wrap:wrap;}
  .intro .list li span {width:100%; background:none; font-size:23rem; font-weight:600; color:#165cc6; margin:0 0 10rem 0;}
  .intro .list li p {width:100%; margin-left:0; border-radius:6rem; padding:7rem 15rem;}
  }
@media all and (max-width:768px){
  .intro {padding-bottom:0; padding-top:0;}
  .intro:before {display:none;}
  .intro .list {padding-right:0;}
}

/*비전*/
.diagram .tit dt {text-align:center; font-size:31rem; font-weight:700; line-height:1.5}
.diagram .tit dt span {display:block; color:#ababab; font-weight:500; font-size:17rem; letter-spacing:0.5px; text-transform:uppercase; font-weight:400;}
.diagram .col1 {text-align:center;}
.diagram .col1 dt {display:inline-block; background:#165cc6; padding:7rem 30rem; color:#fff; font-size:23rem; border-radius:60rem; font-weight:700; line-height:1.4;}
.diagram .col1 dd {margin:10rem 0 40rem;}
.diagram .col1 dd p {display:inline-block; position:relative; font-size:51rem; letter-spacing:-1rem; padding:0 100rem; line-height:1.3;}
.diagram .col1 dd p:before {content:'['; position:absolute; top:50%; left:0; font-weight:700; font-size:90rem; transform:translateY(-50%); color:#f0f0f0;}
.diagram .col1 dd p:after {content:']'; position:absolute; top:50%; right:0; font-weight:700; font-size:90rem; transform:translateY(-50%); color:#f0f0f0;}
.diagram .col1 dd p span {font-weight:700;}
.diagram .col2 {background:#fafafa; border-radius:20rem; padding:30rem; border:1px solid #e9e9e9;}
.diagram .col2 ul {display:flex;}
.diagram .col2 ul li {position:relative; padding-top:140rem; width:33.333%; text-align:center; font-size:21rem; line-height:1.5;}
.diagram .col2 ul li.icon2 {border-left:1px dashed #ddd; border-right:1px dashed #ddd;}
.diagram .col2 ul li:before {content:''; position:absolute; top:20rem; left:50%; width:110rem; height:110rem; background:url('/design/job/img/content/dia.png') no-repeat 0 0/300% auto; transform:translateX(-50%);}
.diagram .col2 ul li.icon1:before {background-position:0 0;}
.diagram .col2 ul li.icon2:before {background-position:50% 0;}
.diagram .col2 ul li.icon3:before {background-position:100% 0;}
.diagram .col2 ul li strong {color:#bd3a29;}
.diagram .col3 {background:url('/design/job/img/content/dia2.png') no-repeat center top; padding-top:100rem; margin-top:20rem;}
.diagram .col3 dt {color:#165cc6;}
.diagram .col3 ul {display:flex; flex-wrap:wrap; margin:40rem -20rem; justify-content:center;}
.diagram .col3 ul li {width:20%; display:flex; justify-content:center;}
.diagram .col3 ul li p {display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 20rem; line-height:1.5; font-size:21rem; border:7px solid #165cc6; border-radius:50%; width:248rem; height:248rem;}
.diagram .col3 ul li.list1 p {border:7px solid #165cc6; }
.diagram .col3 ul li.list2 p {border:7px solid #8560a8; }
.diagram .col3 ul li.list3 p {border:7px solid #4284db; }
.diagram .col3 ul li.list4 p {border:7px solid #2f740d; }
.diagram .col3 ul li.list5 p {border:7px solid #127c77; }
.diagram .col3 ul li.list1 strong {color:#165cc6;}
.diagram .col3 ul li.list2 strong {color:#8560a8;}
.diagram .col3 ul li.list3 strong {color:#4284db;}
.diagram .col3 ul li.list4 strong {color:#2f740d;}
.diagram .col3 ul li.list5 strong {color:#127c77;}
@media all and (max-width:1440px){
  .diagram .col3 ul li p {width:230rem; height:230rem;}
}
@media all and (max-width:1240px){
  .diagram .col1 {margin-bottom:40rem;}
  .diagram .col2 {background:none; border:0; padding:0;}
  .diagram .col2 ul li {padding-top:120rem;}
  .diagram .col2 ul li:before {width:80rem; height:80rem;}
  .diagram .col3 ul {padding:0 160rem;}
  .diagram .col3 ul li {width:33.333%;}
}
@media all and (max-width:1023px){
  .diagram .col1 dd {margin:20rem 0 0 0;}
  .diagram .col1 dd p {font-size:41rem; padding:0;}
  .diagram .col1 dd p:before,
  .diagram .col1 dd p:after {display:none;}
  .diagram .col3 ul {padding:0;}
}
@media all and (max-width:768px){
  .diagram .col1 dd p {font-size:35rem;}
  .diagram .col2 ul {flex-wrap:wrap;}
  .diagram .col2 ul li {width:50%; margin:20rem 0; border:0 !important;}
  .diagram .col3 {background-size:500rem;}
  .diagram .col3 ul li {width:100%;}
}
@media all and (max-width:599px){
  .diagram .col2 ul li {width:100%;}
  .diagram .col3 {background-size:321rem;}
}


/*주요사이트*/
.service2 {margin:0 -15rem;}
.service2 > ul {display:flex; flex-wrap:wrap; text-align:center;}
.service2 > ul > li {width:calc(33.333% - 30rem); margin:15rem; position:relative; padding:30rem; box-shadow:5px 5px 10px rgba(0,0,0,0.1); border-radius:10px; border:1px solid #ddd; padding-bottom:120rem;}
.service2 > ul > li h4 {margin-top:0;}
.service2 > ul > li a {position:absolute; bottom:30rem; left:50%; transform:translateX(-50%); margin:0;}
@media all and (max-width:1240px){
  .service2 > ul > li  {width:calc(50% - 30rem);}
}
@media all and (max-width:599px){
  .service2 {margin:0;}
  .service2 > ul > li {width:100%; margin:15rem 0;}
}
@media all and (max-width:376px){
  .service2 > ul > li {padding:30rem 25rem;}
}


/*관내기업안내*/
.bod_gallery.company img {height:270rem; background:#fff;}
.bod_gallery.company ul {display:flex; flex-wrap:wrap;}
.bod_gallery.company li {width: calc((100% - 40rem) / 3); margin:20rem 0 0 20rem; background:#eee;}
.bod_gallery.company li:nth-child(3n+1) {margin-left:0;}
.bod_gallery.company li .con_txt {padding:20rem; font-size:16rem; line-height:1.6; text-align:left;}
.bod_gallery.company li .con_txt p {position:relative; padding-left:15rem;}
.bod_gallery.company li .con_txt p::before {content:''; position:absolute; left:0; top:10rem; width:5rem; height:1rem; background:#165cc6;}
.bod_gallery.company li .con_txt span {font-weight:600;}
.bod_gallery.company li .subject {margin-bottom:10rem; padding:0 !important; font-weight:600; border-bottom:none;}
.bod_gallery.company li .subject::before {display:none;}
.bod_gallery.company li .txt {height:40rem; line-height:20rem; word-break:keep-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow:hidden;}
@media all and (max-width:1023px){
    .bod_gallery.company img {height:230rem;}
}
@media all and (max-width:768px){
    .bod_gallery.company li {width: calc((100% - 20rem) / 2);}
    .bod_gallery.company li:nth-child(3n+1) {margin-left:20rem;}
    .bod_gallery.company li:nth-child(2n+1) {margin-left:0;}
}
@media all and (max-width:599px){
    .bod_gallery.company img {height:170rem;}
}