@charset "utf-8";
/********************
메인페이지 및 서브페이지 동시 적용.
가장 마지막에 불러오는 CSS 파일입니다.
※ 공통영역 CSS에서 부분별 개별 적용시 사용하시면 됩니다. 
********************/

/*구조*/
body .wrap_header .head_util button{background:url(./../../images/common/openM.png) no-repeat center;}


/*서브비주얼****************************************/
.eQ01.wrap_sub_visual:before{background:url(/sites/style_guide/images/sub/sub_visual_1.jpg) no-repeat center top;}
.eQ02.wrap_sub_visual:before{background:url(/sites/style_guide/images/sub/sub_visual_2.jpg) no-repeat center top;}
.eQ03.wrap_sub_visual:before{background:url(/sites/style_guide/images/sub/sub_visual_8.jpg) no-repeat center top;}
.eQ04.wrap_sub_visual:before{background:url(/sites/style_guide/images/sub/sub_visual_13.jpg) no-repeat center top;}
.eQ05.wrap_sub_visual:before{background:url(/sites/style_guide/images/sub/sub_visual_9.jpg) no-repeat center top;}


/*조직도*/
.orgaWrap ul{display: flex;flex-wrap: wrap;position: relative;margin-bottom:30px;}
.orgaWrap ul li{width: calc(20% - 10px);margin: 0 5px 15px 5px;position: relative;}
.orgaWrap dt,
.orgaWrap .orga_02 span{border: 2px solid #1366f4;color: #1366f4;font-weight: 400;height: 60px;width: 100%;margin-bottom:5px;display: flex;justify-content: center;align-items: center;background: #FFF;position: relative;}
.orgaWrap dd{border: 1px solid #DDD;padding: 15px;text-align:center;background: #FFF;}
.orgaWrap dd span{display:flex;justify-content: center;align-items: flex-start;margin:5px 0;background:#FFF;}
.orgaWrap dd span strong{display:block;margin-top:15px;}
.orgaWrap dd span:first-child strong{margin-top:0;}
.orgaWrap .orga_01:before,
.orgaWrap .orga_02:before,
.orgaWrap .orga_03:before,
.orgaWrap .orga_03 li:before{content:"";display:block;position:absolute;background:#DDD;}
.orgaWrap .orga_01:before{top:122px;left:calc(50% - 0.5px);height:160px;width:1px;}
.orgaWrap .orga_02:before{top:calc(50% - 8px);left:50%;height:1px;width:160px;}
.orgaWrap .orga_03:before{top:-25px;left:10%;height:1px;width:80%;}
.orgaWrap .orga_03 li:before{top:-25px;left:calc(50% - 0.5px);height:25px;width:1px;}
.orgaWrap .orga_01 dt{color: #FFF;background: url(/sites/style_guide/images/common/pattern_7.png) no-repeat center;}
.orgaWrap .orga_03 dd{min-height:130px;}

@media all and (max-width:860px) {
  .orgaWrap ul{margin-bottom:15px;}
  .orgaWrap ul li{display:block;width:100%;margin:0 5px 0 5px;}
  .orgaWrap .orga_02:before,
  .orgaWrap .orga_03:before,
  .orgaWrap .orga_03 li:before{display:none;}
  .orgaWrap .orga_02{margin-bottom:30px;}
  .orgaWrap .orga_03 li{margin-bottom:15px;}
  .orgaWrap .orga_03 dd span{z-index:1;}
}

/*홍보동영상*/
.video_1{border:1px solid #DDD;overflow:hidden;border-radius:3px}
.video_1 .dTable{display:flex;justify-content:space-between;}
.video_1 .item{width:65%;}
.video_1 .con{width:35%;background:#f7f7f7;padding:40px;}
.video_1 .pic{background:#000;display:flex;justify-content:center;align-items:center;}
.video_1 h3{font-size:22px;font-weight:400;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #DDD;line-height:1.25}
.video_1 p{height:400px;padding-right:20px;overflow-y:auto}
.video_1 iframe{min-height:445px;border-radius:3px}
.video_1 video{min-height:445px;width:100%;}
@media only screen and (max-width:1024px){
  .video_1{border:0;height:auto}
  .video_1 .dTable{flex-wrap:Wrap;}
  .video_1 .item{width:100%;}
  .video_1 .con{padding:30px;border:1px solid #DDD;border-bottom:0}
  .video_1 h3{font-size:20px}
  .video_1 p{height:130px}
}
@media only screen and (max-width:480px){
  .video_1 h3{font-size:18px}
}

/*비전*/
.visionWrap > div{margin-bottom:30px;}
.visionWrap > div > dl{display:flex;flex-wrap: wrap;align-items:center;}
.visionWrap > div > dl > dt{width:200px;}
.visionWrap > div > dl > dt h2{width:90%;}
.visionWrap h2{position:relative;}
.visionWrap h2:after{content:"";display:block;width:1px;height:40px;background:#DDD;position:absolute;top:calc(50% - 20px);right:20%;}
.visionWrap > div > dl > dd{width:calc(100% - 200px);}
.visionWrap > div > dl > dd > ul{display:flex;flex-wrap: wrap;align-items:center;width:100%;}
.visionWrap > div > dl > dd > ul > li{width:calc(33% - 20px);margin:0 10px 10px 10px;}
.visionWrap .vision_1 p, .visionWrap .vision_2 div, .visionWrap .vision_3 div, .visionWrap .vision_4 div{text-align:center;font-weight:500;font-size:24px;}
.visionWrap .vision_1 dd{background:url(/sites/style_guide/images/common/pattern_2.png) center;padding:20px;}
.visionWrap .vision_1 p{color:#FFF;margin-bottom:0;}
.visionWrap .vision_1 p:last-child{font-size:32px;}
.visionWrap .vision_2 div{border:1px solid #ddd;border-radius:20px;box-sizing:border-box;padding:30px 0;}

.visionWrap .vision_3 div{border-radius:50px;padding:30px 10px;box-sizing:border-box;background:#ecf1f7;position:relative;font-size:18px;}
.visionWrap .vision_3 div:before{display:block;box-sizing:border-box;border:1px solid #DDD;border-radius:100%;background:#FFF;text-align:center; color:#1c63dc;width:30px;height:30px;position:absolute;top:0;left:0;}
.visionWrap .vision_3 li:nth-child(1) div:before{content:"1";}
.visionWrap .vision_3 li:nth-child(2) div:before{content:"2";}
.visionWrap .vision_3 li:nth-child(3) div:before{content:"3";}
.visionWrap .vision_3 li:nth-child(4) div:before{content:"4";}
.visionWrap .vision_3 li:nth-child(5) div:before{content:"5";}

.visionWrap .vision_4 div{font-size:22px;color:#FFF;background:#1c63dc;padding:30px 0;}
@media all and (max-width:1024px) {
  .visionWrap > div > dl > dt, .visionWrap > div > dl > dd{display:block;width:100%;}
  .visionWrap > div > dl > dt h2{width:100%;}
  .visionWrap h2:after{display:none;}
  .visionWrap .vision_1 p, .visionWrap .vision_2 div, .visionWrap .vision_3 div, .visionWrap .vision_4 div{font-size:18px;}
  .visionWrap .vision_1 p:last-child{font-size:24px;}
  .visionWrap .vision_3 div{font-size:16px;}
}
@media all and (max-width:768px) {
  .visionWrap > div > dl > dd > ul > li{width:calc(50% - 20px);}
}
@media all and (max-width:480px) {
  .visionWrap > div > dl > dd > ul > li{width:100%;}
}

/*주요사업*/
.mainBiz{position:relative;}
.mainBiz h3{position:absolute;display:flex;justify-content:center;align-items:center;width:280px;height:280px;box-sizing:border-box;padding:30px;border:1px dashed #1748a0;border-radius:100%;top:calc(50% - 165px);left:calc(50% - 140px);}
.mainBiz h3 span{display:flex;justify-content:center;align-items:center;width:100%;height:100%;box-sizing:border-box;color:#FFF;background:#0029a3 url(/sites/style_guide/images/common/pattern_2.png);font-size:32px;text-align:center;border-radius:100%;position:relative;}
.mainBiz h3 span:before, .mainBiz h3 span:after{content:"";background:#DDD;display:block;width:1px;height:70px;position:absolute;left:calc(50% - 0.5px);}
.mainBiz h3 span:before{top:-70px;}
.mainBiz h3 span:after{bottom:-70px;}
.mainBiz > ul{display:flex;justify-content:space-between;align-items:flex-strart;flex-wrap:wrap;}
.mainBiz > ul > li{width:50%;margin-bottom:100px;overflow:hidden;position:relative;}
.mainBiz > ul > li:nth-child(2n) > dl{float:right;}
.mainBiz > ul > li:nth-child(3), .mainBiz > ul > li:nth-child(4){margin-bottom:50px;}
.mainBiz > ul > li:before{content:"";background:#DDD;display:block;width:210px;height:1px;position:absolute;top:calc(50% - 0.5px);right:0;}
.mainBiz > ul > li:nth-child(2n):before{left:0;}
.mainBiz dl{width:70%;}
.mainBiz dl:after{content:"";display:block;width:9px;height:9px;background:#1748a0;border-radius:100%;border:3px solid #FFF;box-sizing:border-box;position:absolute;top:calc(50% - 4.5px);right:calc(30% - 5.5px);}
.mainBiz li:nth-child(2n) dl:after{right:calc(70% - 4.5px);}
.mainBiz dt{box-sizing:border-box;font-size:20px;font-weight:400;color:#FFF;background:#0029a3 url(/sites/style_guide/images/common/pattern_6.png); padding:15px 20px;border-radius:10px 10px 0 0;}
.mainBiz dd{box-sizing:border-box;padding:20px;background:#ecf1f7;border-radius:0 0 10px 10px;min-height:200px;position:relative;}
@media all and (max-width:1044px) {
  .mainBiz h3{position:relative;width:auto;height:auto;padding:0;border:0;border-radius:0;top:auto;left:auto;margin-bottom:15px;}
  .mainBiz h3 span{display:block;text-align:left;border-radius:0;padding:15px 20px}
  .mainBiz h3 span:before, .mainBiz h3 span:after, .mainBiz > ul > li:before, .mainBiz dl:after{display:none;}
  .mainBiz > ul > li{width:100%;margin-bottom:10px;}
  .mainBiz dl{width:100%;}
  .mainBiz > ul > li:nth-child(2n) > dl{float:none;}
  .mainBiz dd{min-height:auto;}
}

@media (max-width: 1024px) {
  .banner_1_2 a i,
  .banner_1_3 a i{display:block;}
}