@charset "utf-8";

@import url("/sites/guide/style/css/guide.css");
@import url("/sites/templet_03/style/css/layout.css");
@import url("main.css");
@import url("main_widjet.css");

/* 템플릿별로 개별 정의해야하는 CSS는 이 밑으로 작성하시면 최종적으로 적용 됩니다. **********/
/* 레이아웃은 같은 타입의 템플릿은 공통으로  적용되어 있습니다.**********/
/* 레이아웃 변경시에는 같은 템플릿은 같이 변경되오니 유의하여 주시고 변경하실 CSS는 각 템플릿의 샘플 템플릿의 layout.css를 수정하시면 됩니다.**********/
/* 개별적인 변경을 하실 경우에는 새로운 템플릿으로 추가해서 작업하시거나 style.css에서 !important처리로 작업하시기 바랍니다.**********/

.eQ01 #sub_visual {background: url(../../images/sub_visual_1.jpg) no-repeat center;}
.eQ02 #sub_visual {background: url(../../images/sub_visual_2.jpg) no-repeat center;}
.eQ03 #sub_visual {background: url(../../images/sub_visual_3.jpg) no-repeat center;}
.eQ04 #sub_visual {background: url(../../images/sub_visual_4.jpg) no-repeat center;}
.eQ05 #sub_visual {background: url(/sites/guide/images/sub_visual_100.jpg) no-repeat center;}

/*비전2025*/
.dia_wrap_3408{font-size:14px;}
.dia_wrap_3408 > dl{display:table;width:100%;margin-bottom:20px;}
.dia_wrap_3408 > dl > dt{width:160px;}
.dia_wrap_3408 > dl > dd{width:calc(100% - 160px);}
.dia_wrap_3408 > dl > dt,
.dia_wrap_3408 > dl > dd{display:table-cell;position:relative;vertical-align:middle;}
.dia_wrap_3408 span{display:block;border-radius:0;padding:15px;text-align:center;box-sizing:border-box;}
.dia_wrap_3408 > dl > dt span{display:inline-block;width:128px;height:128px;border-radius:100%;position:relative;font-size:15px;font-weight:bold;padding-top:50px;color:#FFF;}
.dia_wrap_3408 > dl > dt span.dt_sty_2{padding-top:37px;}
.dia_wrap_3408 > dl > dt span i{display:block;}
.dia_wrap_3408 > dl > dd > span{background:#FFF;}
.dia_wrap_3408 > dl > dt:before{content:"";display:inline-block;width:100%;height:1px;border-top:1px solid red;position:absolute;top:calc(50% - 0.5px);left:0;}
.dia_wrap_3408 > dl > dt:after{content:"";display:inline-block;width:8px;height:8px;border-radius:100%;border:2px solid #DDD;background:#FFF;position:absolute;top:calc(50% - 6px);right:-6px;z-index:1;}
.dia_wrap_3408 .dL_1 > dt span{background:url(/sites/web/images/dia_wrap_3408_bg_1.png) no-repeat center;}
.dia_wrap_3408 .dL_2 > dt span{background:url(/sites/web/images/dia_wrap_3408_bg_2.png) no-repeat center;}
.dia_wrap_3408 .dL_4 > dt span{background:url(/sites/web/images/dia_wrap_3408_bg_3.png) no-repeat center;}
.dia_wrap_3408 .dL_5 > dt span{background:url(/sites/web/images/dia_wrap_3408_bg_4.png) no-repeat center;}
.dia_wrap_3408 .dL_9 > dt span{background:url(/sites/web/images/dia_wrap_3408_bg_5.png) no-repeat center;}
.dia_wrap_3408 .dL_1 > dd > span{border:1px dashed #0665b7;color:#0665b7;font-weight:bold;font-size:20px;}
.dia_wrap_3408 .dL_2 > dd > span{border:1px dashed #08a095;color:#08a095;font-weight:bold;font-size:20px;}
.dia_wrap_3408 .dL_4 > dd > span{border:1px dashed #666;}
.dia_wrap_3408 .dL_5 > dd > span{border:1px dashed #666;}
.dia_wrap_3408 .dL_9 > dd > span{border:1px dashed #666;}
.dia_wrap_3408 .dL_1 dt:before{border-color:#0665b7;}
.dia_wrap_3408 .dL_1 dt:after{background:#0665b7;}
.dia_wrap_3408 .dL_2 dt:before{border-color:#08a095;}
.dia_wrap_3408 .dL_2 dt:after{background:#08a095;}
.dia_wrap_3408 .dL_4 dt:before{border-color:#2b3e5c;}
.dia_wrap_3408 .dL_4 dt:after{background:#2b3e5c;}
.dia_wrap_3408 .dL_5 dt:before{border-color:#686868;}
.dia_wrap_3408 .dL_5 dt:after{background:#686868;}
.dia_wrap_3408 .dL_9 dt:before{border-color:#00539c;}
.dia_wrap_3408 .dL_9 dt:after{background:#00539c;}
.dia_wrap_3408 ul{overflow:hidden;}
.dia_wrap_3408 ul.ul_4 > li,
.dia_wrap_3408 ul.ul_9 > li{float:left;margin-bottom:0.5%;}
.dia_wrap_3408 ul.ul_4 > li{width:49.5%;}
.dia_wrap_3408 ul.ul_4 > li:nth-child(1){margin-right:1%;}
.dia_wrap_3408 ul.ul_9 > li{width:33%;}
.dia_wrap_3408 ul.ul_9 > li:nth-child(2),
.dia_wrap_3408 ul.ul_9 > li:nth-child(5){margin:0 0.5%;}
.dia_wrap_3408 .dL_4_1 dt{}
.dia_wrap_3408 .dL_4_1 dt span{background:#2b3e5c url(/sites/guide/images/pattern_3.png);color:#FFF;font-weight:bold;}
.dia_wrap_3408 .dL_4_1 dd span{border:1px solid #DDD;}
.dia_wrap_3408 .dL_5_1{display:table;width:100%;margin:10px 0;}
.dia_wrap_3408 .dL_5_1 dt,
.dia_wrap_3408 .dL_5_1 dd{display:table-cell;}
.dia_wrap_3408 .dL_5_1 dt{width:15%;background:#5b5b5b url(/sites/guide/images/pattern_3.png);vertical-align:top;}
.dia_wrap_3408 .dL_5_1 dd{width:85%;vertical-align:middle;font-size:0;}
.dia_wrap_3408 .dL_5_1 dt span{color:#FFF;font-weight:bold;}
.dia_wrap_3408 .dL_5_1 dd span{vertical-align:top;display:inline-block;font-size:14px;width:32.33%;margin:0.5% 0 0.5% 1%;text-align:left;background:#f6f6f6;border:1px solid #DDD;}
.dia_wrap_3408 .ul_9 li span{border:1px solid #00539c;color:#00539c;}
@media only screen and (max-width:730px){
  .dia_wrap_3408 > dl > dt,
  .dia_wrap_3408 > dl > dd{display:block;}
  .dia_wrap_3408 > dl > dt{width:128px;margin:0 auto 15px auto;}
  .dia_wrap_3408 > dl > dd{width:100%;}
  .dia_wrap_3408 > dl > dt:before,
  .dia_wrap_3408 > dl > dt:after{display:none;}
  .dia_wrap_3408 .dL_5_1 dt{width:25%;}
  .dia_wrap_3408 .dL_5_1 dd{width:75%;}
  .dia_wrap_3408 .dL_5_1 dd span{width:49%;}
}
@media only screen and (max-width:480px){
  .dia_wrap_3408 ul.ul_9 > li{width:100%;margin:0 0 1% 0 !important;}
  .dia_wrap_3408 .dL_5_1 dt{width:30%;}
  .dia_wrap_3408 .dL_5_1 dd{width:70%;}
  .dia_wrap_3408 .dL_5_1 dd span{width:99%;margin:1% 0 1% 1%;}
}