@charset "utf-8";

.stit0 { color:#014b92; font-size: 1.625em; font-weight: 500; padding-bottom: 15px; background: url("/img/sub/slsline.png") repeat-x bottom; }
.stit1 { color:#2b2b2b; font-size: 1.5em; padding-left:30px; font-weight: 500; background:url("/img/sub/stitBG.png") no-repeat left 0.35em; }
.stit2 { color:#2b2b2b; font-size: 1.25em; padding-left:25px; font-weight: 500; background:url("/img/sub/stitBG.png") no-repeat left 0.45em; background-size: 15px auto; }
.stit3 { color:#014b92; font-size: 1.2em; padding-left:20px; font-weight: 500; position: relative; }
.stit3:before { content:''; width: 10px; height: 10px; border-radius: 20px; background-color:#014b92; position: absolute; left:0; top: 50%; margin-top: -5px; }
.stit4 { color:#2b2b2b; font-size: 1.2em; padding-left:20px; font-weight: normal; position: relative; }
.stit4:before { content:''; width: 10px; height: 10px; border-radius: 20px; background-color:#0095da; position: absolute; left:0; top: 50%; margin-top: -5px; }

.stit4.fs-s { font-size: 1.0em; padding-left: 15px; }
.stit4.fs-s:before { width: 6px; height: 6px; margin-top: -3px; border-radius: 12px; }

.stit4.long:before { top: 0.7em; }


.stepBox { overflow: hidden; text-align: center;  }
.stepBox li { position: relative; float: left; width: calc(33.33% - 20px); margin-left: 30px; border:1px solid #d7d7d7; box-sizing: border-box; padding: 5% 2%;  }
.stepBox li:first-child { margin-left:0; }
.stepBox li:after { content:"\e876"; position:absolute; top:50%; right:-22px; font-family:'Linearicons-Free'; font-size:14px; line-height:60px; margin-top: -30px; color:#9a9a9a; }
.stepBox li dl dt { font-size: 1.25em; font-weight: 700; color:#2b2b2b; padding-bottom: 50px; position: relative;}
.stepBox li dl dt:after { content:''; width: 1px; height:20px; background-color:#ababab; position: absolute; left:50%; bottom:15px; margin-left: -0.5px;  }
.stepBox li dl dd { font-size: 1.125em; color:#4b4b4b; }

.stepBox li.navy { border-top: 1px solid #014b92; }
.stepBox li.blue { border-top: 1px solid #1582c5; }
.stepBox li.green { border-top: 1px solid #44aa00; }
.stepBox li.navy dl dt { color:#014b92; }
.stepBox li.blue dl dt { color:#1582c5; }
.stepBox li.green dl dt { color:#44aa00; }

.fiStep { overflow: hidden; text-align: center; padding: 2% 0; }
.fiStep li { position: relative;  float: left; width: calc(33.33% - 20px); margin-left: 30px; box-sizing: border-box; line-height: 35px; border-radius: 35px; font-size: 0.9em;  }
.fiStep li:first-child { margin-left:0; }
.fiStep li:after { content:"\e876"; position:absolute; top:0; right:-30px; font-family:'Linearicons-Free'; font-size:14px; line-height:35px; color:#9a9a9a; }
.fiStep li:last-child:after { display: none; }

.fiStep li.blue { border: 5px solid #b2dff4; color:#0095da;}
.fiStep li.yellow { border: 5px solid #f9f0b2; color:#e7991e; }
.fiStep li.green { border: 5px solid #c7e5b2; color:#44aa00; }

.fiBox { overflow: hidden; text-align: center; padding: 2% 0;  }
.fiBox li { float: left; width: calc(50% - 10px); margin-left: 20px; line-height: 1.5em; padding: 10px 0; font-size: 0.9em; }
.fiBox li:first-child { margin-left:0; border: 3px solid #b2dff4; }
.fiBox li:last-child { border: 3px solid #f9f0b2; }
.fiBox li:first-child span { color:#0095da; }
.fiBox li:last-child span { color:#e7991e; }

@media screen and (max-width:767px) {

.fiStep { padding: 3% 0;}

}


.dotList { overflow: hidden; }
.dotList > li { padding-left: 15px; overflow: hidden; position: relative; line-height: 1.0em; margin-bottom: 10px;   }
.dotList > li:before { content:''; width: 4px; height: 4px; background-color:#1582c5; position: absolute; left:0; top: 0.5em;  }
.dotList > li p { line-height: 1.4em; }

.dotLine { position: relative; overflow: hidden; width: 100%; height:1px; background:url("/img/common/dotline.png") repeat-x; }

.bdBox { position: relative; overflow: hidden; width: 100%; box-sizing: border-box; padding: 4%; border:1px solid #ddd; border-bottom: 1px solid #bdbdbd; }
.bdBox2 { position: relative; overflow: hidden; width: 100%; box-sizing: border-box; padding: 4%; border:1px solid #ddd; border-top: 2px solid #014b92; border-bottom: 1px solid #bdbdbd;  }
.gridBox { border:1px solid #e9e9e9; background:url("/img/sub/grid.png") repeat; padding: 5%; }
.slsBox { background:url("/img/sub/slashBG.png") repeat; padding: 6px; }
.BGwh { background-color:#fff; padding: 4%; }

.tb-style1 { position: relative; overflow: hidden; width:100%; border-top:2px solid #a8aeba; border-right: 1px solid #e3e6ed; }
.tb-style1 thead th { color:#2b2b2b; background-color:#f9fafc; border-bottom: 1px solid #cbd0d8; padding: 10px 20px; border-left: 1px solid #e3e6ed;  }
.tb-style1 tbody th { color:#014b92; }
.tb-style1 tbody th, .tb-style1 tbody td { border-bottom: 1px solid #e3e6ed; border-left: 1px solid #e3e6ed; padding: 10px 20px; }

.tb-style2 { position: relative; overflow: hidden; width:100%; border-top:2px solid #a8aeba; border-right: 1px solid #e3e6ed; }
.tb-style2 th { color:#2b2b2b; background-color:#f9fafc; border-bottom: 1px solid #cbd0d8; padding: 10px 20px; border-left: 1px solid #e3e6ed; }
.tb-style2 td { border-bottom: 1px solid #e3e6ed; border-left: 1px solid #e3e6ed; padding: 10px 20px; }

.imgWrap {position: relative;width:100%;white-space:nowrap;overflow: hidden;}
.imgWrap li {float:left;text-align:center}
.imgWrap li:first-child {margin-left:0 !important}
.imgWrap li .img_wrap {display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;width:100%;aspect-ratio:440/300;border:1px solid #E6E6E6}
.imgWrap li.noimage {display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;width:100%;aspect-ratio:440/300;border:1px solid var(--c200)}
.imgWrap li img {width:100%;border:1px solid #E6E6E6}
.imgWrap li span {display:inline-block;width:100%;text-align:center;margin-bottom:5px}

.imgWrap.col1 li { width: calc(100% - 10px); }
.imgWrap.col2 li { width: calc(50% - 10px); margin-left:20px; }
.imgWrap.col3 li { width: calc(32% - 10px); margin-left:20px; }
.imgWrap.col4 li { width: calc(25% - 10px); margin-left:10px; margin-bottom: 20px; }



#program { overflow: hidden; }
#program > div { position: relative; float: left; width: calc(33.33% - 14px); margin-left: 21px; box-sizing: border-box;
				 color:rgba(255,255,255,0.8); background-size: 100% auto !important; }
#program .mbox a { color:#fff; display: block; padding: 40px 20px 0 25px; width: 100%; min-height: 350px;   }
#program .mbox h3 { font-size: 1.5em; }
#program .mbox h3 img { max-width: 96%; }
#program .mbox h4 { font-size: 1.125em; margin-top: 10px; }
#program .mbox ul { overflow: hidden; color:rgba(255,255,255,0.8); font-size: 0.9em; margin-top: 5px; }
#program .mbox ul > li { padding-left:10px; position: relative; }
#program .mbox ul > li:before { content:''; width: 3px; height: 3px; background-color:#4084c5; position: absolute; top: 0.7em; left:0; }
#program .mbox p { position: absolute; bottom: 15px; border-radius: 30px; padding: 5px 15px; font-size: 0.9em;  }

#program .mbox2 ul > li:before { background-color:#014b92; }
#program .mbox3 ul > li:before { background-color:#358500; }

#program .mbox1 {margin-left:0 !important;background:#014b92 url('/img/main/001.png') 95% 95% / 35% no-repeat !important}
#program .mbox2 {background:#1582c5 url('/img/main/002.png') 95% 95% / 40% no-repeat !important}
#program .mbox3 {background:#44aa00 url('/img/main/003.png') 95% 95% / 40% no-repeat !important}

#program .mbox1 p { background-color:#001654; }
#program .mbox2 p { background-color:#024298; }
#program .mbox3 p { background-color:#127100; }


@media screen and (max-width:1199px) {

#program > div { width: calc(33.33% - 8px); margin-left: 12px; }

}


@media screen and (max-width:976px) {

#program .mbox a { min-height: 320px; }
#program .mbox h3 img { max-width: 100%; }

}

@media screen and (max-width:767px) {

#program .mbox { width: 100%; margin-left:0; margin-bottom: 5px; background-size: auto 100% !important; }
#program .mbox a { min-height: 0; padding: 6% 4% 2%;  }
#program .mbox h3 img { max-width: 60%; }
#program .mbox h4 { margin-top: 3%; }
#program .mbox p { position: relative; margin-top: 30px; display: inline-block; }
#program .mbox ul { max-width: 70%; }
#program .mbox ul > li { float: left; margin-right: 20px; }

}


.appList {overflow: hidden; }
.appList > li {overflow: hidden; border: 1px solid #ddd; border-bottom: 1px solid #bdbdbd; padding: 5%; box-sizing: border-box; margin-bottom: 10px; display:flex; align-items:center; }
.appList > li dl {float: left; width: calc(100% - 100px); padding-right: 5%; }
.appList > li dl dt {font-size: 1.625em; font-weight: 600; margin-bottom: 20px; }
.appList > li dl dt .fs-s {color:#999; font-size: 0.6em; margin-left: 5px; font-weight: 500; }
.appList > li dl dd {font-size: 1.125em; }
.appList > li .form {display:block;width:100px;line-height:100px;border-radius:100px;color:#fff;text-align:center}
.appList > li .detail {display:block;width:80px;height:26px;line-height:20px;border-radius:13px;text-align:center;margin:10px}
.appList > li .detail1 {display:block;width:120px;height:30px;line-height:25px;border-radius:15px;text-align:center;margin:0}
.appList li.navy a {background:#014b92}
.appList li.blue a {background:#1582c5}
.appList li.green a {background:#44aa00}
.appList li.orange a {background:#ff961e}
.appList li.navy dt {color:#014b92}
.appList li.blue dt {color:#1582c5}
.appList li.green dt {color:#44aa00}
.appList li.orange dt {color:#ff961e}


.appList2 > li.block { display: block; }
.appList2 > li.block .flex { display:flex; align-items:center; }
.appList2 > li dl dd { font-size: 1.0em; }
.appList2 li dl dd .t1 { font-family: 'BRBA_B'; color:#1582c5; font-size: 1.35em; line-height: 1.8em;  }
.appList2 li dl dd .t1 .fs-s { color:#999; font-size: 0.7em; font-family:'Noto Sans KR', 'Noto Sans Korean', sans-serif; margin-left: 5px;  }

.appList .imgList { overflow: hidden; text-align: center; }
.appList .imgList li { float: left; width:calc(20% - 5px); margin-left: 6px; }
.appList .imgList li:first-child { margin-left:0; }
.appList .imgList li img { width: 100%; margin-bottom: 5px; }
.appList .imgList li p { font-size: 0.9em; color:#4b4b4b; }


@-webkit-keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}
@keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}
.hvr-ripple-out {
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}
.hvr-ripple-out:before {
  content: '';
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
   border-radius:100px;
}
.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
  -webkit-animation-name: hvr-ripple-out;
  animation-name: hvr-ripple-out;
}


.appList li.navy .hvr-ripple-out:before { border: #014b92 solid 6px; }
.appList li.blue .hvr-ripple-out:before { border: #1582c5 solid 6px; }
.appList li.green .hvr-ripple-out:before { border: #44aa00 solid 6px; }
.appList li.orange .hvr-ripple-out:before { border: #ff961e solid 6px; }


@media screen and (max-width:767px) {
	.appList li dl { width: calc(100% - 80px);  }
}

.YAP-mark { line-height: 40px; }
.YAP-mark .fs-s { line-height: 40px;  display: inline-block; padding: 0 0 0 45px; color:#2b2b2b !important; background:url("/img/sub/YAP_mark.png") no-repeat left center; }

.stit1.YAP-mark { line-height: 35px; }
.stit1.YAP-mark .fs-s { font-size: 0.6em; background-size: 30px 30px; padding-left: 35px; margin-left: 5px; line-height: 35px;}

@media screen and (max-width:767px) {

.YAP-mark { line-height: 30px; }
.YAP-mark .fs-s { padding-left: 30px; background-size: 25px 25px; line-height: 30px; }
.stit1.YAP-mark .fs-s { padding-left: 30px; background-size: 25px 25px;  }

}

/* 사업단 소개 */
.visionBox { position: relative; width: 100%; overflow:hidden; border:1px solid #d7d7d7; padding: 6% 5% 5%; }

.visionImg {display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;width:100%;margin-top:5rem}
.visionImg img {width:46%;border:1px solid #D7D7D7;margin:0 2%;padding:1.5rem}

.vision dt {  position: relative; padding-bottom: 50px; overflow: hidden; }
.vision dt:after { content:''; width: 1px; height: 30px; background-color:#ababab; position: absolute; bottom: 0; left: 50%; margin-left: -0.5px; }
.vision dt p { padding: 15px 0; color:#2b2b2b; font-size: 1.375em; }
.vision dt img {width:40%;filter:drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.1))}
.vision dd { color:#2b2b2b; padding-top: 15px; font-size: 1.15em;  }


@media screen and (max-width:767px) {

.vision dt { padding-bottom: 20px; }
.vision dt:after { height: 20px;}
.vision dt p { padding: 10px 0; }
.vision dd  { padding-top: 10px; }

}


#character { position: relative; width: 100%; overflow: hidden; }
#character li { float: left; width: calc(50% - 15px); margin-left:30px; box-sizing: border-box;  }
#character li:first-child { margin-left:0; }
#character .bdBox { padding: 7%; }
#character .gridBox { padding: 10%; }


@media screen and (max-width:767px) {

#character li { width: 100%; margin-left:0; margin-bottom: 20px; }
#character li .bdBox { float: left; width: calc(45% - 15px); padding: 4%;  }
#character li .charac_info { float: left; width: calc(55% - 15px); margin-left:30px; padding-top: 3%; }

}

@media screen and (max-width:480px) {

#character li .bdBox { width: 100%; padding: 7%; }
#character li .charac_info { width: 100%; margin-left:0; }
#character li .bdBox img { width: 50% !important; }

}

#history-top { position: relative; width: 100%; height: 300px; background:url("/img/sub/history_top.jpg") no-repeat; background-size: cover; color:#fff;
				padding: 6%; box-sizing: border-box; }
#history-top dt { font-family: 'Poppins', sans-serif; font-size: 3.43em; font-weight: 700; line-height: 1.3em; }
#history-top dd { font-size: 1.125em; }

#history { position: relative; width: 100%; overflow: hidden; background: url("/img/sub/history_line.png") repeat-y 152.5px top; }
#history li { overflow: hidden; margin-bottom: 20px; line-height: 1.8em;  }
#history li h4 { font-family: 'Poppins', sans-serif; font-size: 1.625em; font-weight: 700; color:#1582c5;  width: 160px; float: left; text-indent:20px;
			  background:url("/img/sub/history_dot.png") no-repeat right center; letter-spacing: 0; line-height: 1.0em; }
#history li dl { float: right; width: calc(100% - 200px); }
#history li dl dt { float: left; width: 12%; color:#2b2b2b; }
#history li dl dd { float: right; width: 88%; }

@media screen and (max-width:976px) {

#history-top { height: 30vw; }
#history { background: url("/img/sub/history_line.png") repeat-y 122.5px top; }
#history li h4 { width: 130px; }
#history li dl { width: calc(100% - 170px); }

}

@media screen and (max-width:480px) {

#history { background: url("/img/sub/history_line.png") repeat-y 102.5px top; }
#history li h4 { width: 110px; }
#history li dl { width: calc(100% - 150px); }

}


#organization { position: relative; width: 100%; overflow: hidden; background: url("/img/sub/history_line.png") repeat-y center; text-align: center; }
#organization ul > li { overflow: hidden; }
#organization ul > li div h4 { width: 160px; line-height: 160px; background-color:#014b92; border-radius: 320px; color:#fff; }
#organization ul > li div { width: 33%; float: left; }


#locaMap { position: relative; width: 100%; height: 500px; overflow: hidden; }

.bus_list {width:100%; overflow:hidden;}
.bus_list dt {float:left; width:25%; margin:5px 0;}
.bus_list dd {float:left; width:75%; margin:5px 0;}
.bus_list dd .t1 {color:#fff; background:#6e7be8; padding:0 5px; border-radius:3px;}
.bus_list dd .t2 {color:#fff; background:#61b83a; padding:0 5px; border-radius:3px;}

@media screen and (max-width:976px) {

#locaMap { height: 50vw; }

}


#dreamcoach-top { position: relative; width: 100%; height: 300px; background:url("/img/sub/dreamcoach_top.jpg") no-repeat; background-size: cover; color:#fff;
				padding: 6%; box-sizing: border-box; }
#dreamcoach-top dt { font-family: 'Poppins', sans-serif; font-size: 3.43em; font-weight: 700; line-height: 1.3em; }
#dreamcoach-top dd { font-size: 1.125em; }

@media screen and (max-width:976px) {

#dreamcoach-top { height: 30vw; }

}


.tb-plus { overflow: hidden; }
.tb-plus .fl { width: 20%; position: relative; }
.tb-plus .fl table th { height: 45px; padding: 0 20px; }
.tb-plus .fl table td {  height: 60px;  /*height: 93px;*/ padding: 0 20px; }
.tb-plus .fr { width: 80%; position: relative; }
.tb-plus .fr table {  width: calc(100% - 40px); float: right;  }
.tb-plus .fr table th { height: 45px; padding: 0 20px; }
.tb-plus .fr table td { height: 60px; padding: 0 20px; }
.tb-plus .fr:before { content:'+'; position: absolute; left:15px; top: 50%; margin-top: -10px;  font-size: 20px; font-weight: 700; text-align: center; color:#44aa00; }

@media screen and (max-width:767px) {

.tb-plus .fl { width: 100%; }
.tb-plus .fr { width: 100%; padding-top: 40px; }
.tb-plus .fr:before  { left: 0; width: 100%; margin-top: 0; top: 5px; }
.tb-plus .fr table { width: 100%; }
.tb-plus .fl table th,
.tb-plus .fl table td,
.tb-plus .fr table th,
.tb-plus .fr table th { height: auto; padding: 10px 20px; }

}



.memWrap h5 { font-size: 1.1em; color:#212121; margin-top: 20px; font-weight: 500; }
.privacy h5 { margin-bottom: 20px; }


.appcheck-label {overflow:hidden;color:#fff;font-size:0.85em;text-align:center;margin-top:20px}
.appcheck-label li {display:inline-block;margin-left:5px;line-height:2.0em;border-radius:20px;padding:0 10px}
.appcheck-label li:first-child {margin-left:0}
.appcheck-label li.c1 {background-color:#ff5921}
.appcheck-label li.c2 {background-color:#004994}
.appcheck-label li.c3 {background-color:#001452}
.appcheck-label li.c4 {background-color:#1082c6}
.appcheck-label li.c5 {background-color:#ffb400}
.appcheck-label li.c6 {background-color:#42aa00}
.appcheck-label li.c7 {background-color:#107100}
.appcheck-label li.c8 {background-color:#5a417b}
.appcheck-label li.c9 {background-color:#787878}