@charset "utf-8";

.wrap-sub-visual {position:relative;background: url('/sites/greenbio/images/sub-visual.jpg') no-repeat top center !important;background-size:cover;display:table;width:100%;}
.wrap-sub-visual:after {background:none;}
.wrap-sub-visual .slogan-big {color: #434343 !important;}


/* 사업소개 - 인사말 */
.greeting {background: url("../images/content/sub01_img01.png") right 5px no-repeat;padding-top: 110px; }
.greeting::before {content: ''; display: block; border-top: 5px solid #7de1a5; }
.greeting{display: flex;padding: 0 50px 50px 0; justify-content: space-between;}
.greeting(even){background-color: #f9f9f9; border-radius: 30px;}
.greeting  span{width: 300px; height: 390px; display: flex;justify-content: center; align-items: center; overflow: hidden;}
.greeting span img{width: 100%; height: 390px; object-fit: cover;}


.greeting dl{width: calc(100% - 400px); display: flex; flex-direction: column; justify-content: space-between;} 
.greeting dt{margin-bottom: 20px;}
.greeting dd{font-size: 18px; line-height: 1.4em;}
.greeting .leader_contents{height: calc(100% - 135px);}
.greeting .leader_info01{font-weight: bold; font-size: 27px; line-height: 1.3 }
.greeting .leader_info02{font-weight: bold; }
.greeting .leader_info{font-weight: 600; text-align: end; margin-top:15px;font-size: 20px; }
.greeting .leader_info strong{display: block;}
.greeting .leader_info strong > b{font-size: 24px; font-weight: 800; padding-right: 10px;  }

@media all and (max-width:1280px) {
.greeting dd{font-size: 16px;}
}

@media all and (max-width:1024px) {
.greeting (even){background-color:#fff; border-radius: 00px;}
	
.greeting  span{width: 250px; height: 350px;}
.greeting span img{height: 350px;}
.greeting dl{width: calc(100% - 310px);}
.greeting dt{margin-bottom: 10px;}
.greeting .leader_contents{height: calc(100% - 115px);} 
	

}

@media all and (max-width:767px) {
.greeting {background-size: 260px; padding: 0 30px 30px 30px;}
.greeting {flex-direction: column;align-items: center;}
.greeting span{margin-bottom: 40px;} 
.greeting dl{width: 100%; padding: 0 4%;}
.greeting dt img{ height: 55px;}
.greeting dd{font-size: 15px;}
.greeting .leader_info01{font-size: 24px;}
.greeting .leader_info{font-size: 18px;}
.greeting .leader_info strong > b{font-size: 20px;}
.greeting  span{width: 220px; height: 300px;}
.greeting span img{height: 300px;}
}


/* 사업소개 - 비전 및 목표 */
.info-vision {position: relative;top: 28px;width: 80%;display: block;padding: 70px 3% 50px;border-radius: 120px;border: 3px solid #02a1cb;text-align: center;margin: 0 auto;box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);margin-bottom: 130px;}
.info-vision::before {position: absolute; bottom: -68px; left: 50%;transform: translateX(-50%);  content: ''; display: block; background: url("/sites/greenbio/images/intro-arrow.png"); width: 205px; height: 65px; z-index: -1;}
.info-vision dt{position: absolute;left: 50%;top: -30px;transform: translateX(-50%);padding: 15px 100px;font-size: 25px;background-color: #02a1cb;z-index: 1;color: #fff;font-weight: bold;border-radius: 40px;}
.info-vision dd:first-of-type{font-size: 28px;color: #0276cb;margin-bottom: 20px;font-weight: 800;}
.info-vision dd{font-size: 18px;font-weight: 600;line-height: 1.4em;word-break: keep-all;}


.info-goal{position: relative;}
.info-goalstrong{width: 100%;font-size: 25px;background-color: #02a1cb;color: #fff;text-align: center;display: block;padding: 15px 0 60px 0;border-radius: 40px 40px 0 0;font-weight: bold;}
.info-goal ul{display: flex; position: relative; top: -45px;background-color: #fff; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);border-radius: 40px ;padding: 50px 0;border: 1px solid #eee;}
.info-goal ul li{width: 33.2%;padding: 0 50px;}
.info-goal ul li:not(:last-of-type){border-right: 1px solid #eee;}
.info-goal ul li dl dt {font-size: 41px;font-weight: 800;color: #0288cb;height: 140px;}
.info-goal ul li dl dt span{display: block;font-size: 21px;font-weight: 700;color: #000;word-break: keep-all;}
.info-goal ul li dl dd{background: url("/sites/greenbio/images/intro-dot.png") left 7px no-repeat; padding-left: 12px; font-size: 16px; line-height: 1.4em; margin-bottom: 10px; word-break: keep-all;}


@media all and (max-width:1280px) {
.info-vision dd:first-of-type{font-size: 26px; margin-bottom: 10px;}
.info-vision dd{font-size: 18px;} 
}

@media all and (max-width:1024px) {
.info-vision {width: 100%; padding: 60px 3% 40px; }
.info-goal ul{padding: 40px 0;}
.info-goal ul li{padding: 0 40px;}
.info-goal ul li dl dt {font-size: 40px; height: 120px;}
.info-goal ul li dl dt span{font-size: 20px;} 
}


@media all and (max-width:767px) {
.info-vision {top: 20px;padding: 40px 5% 20px; margin-bottom: 100px; border-radius: 20px;}
.info-vision dt{font-size: 20px; padding: 10px 60px; top: -24px;}
.info-vision dd:first-of-type{font-size: 20px; margin-bottom: 10px; font-weight: 700;}
.info-vision dd{font-size: 15px; font-weight: 400;}  
 
.info-goal strong{font-size: 20px;padding: 10px 0 60px 0; border-radius: 20px 20px 0 0;}
.info-goal ul{top: -50px;border-radius: 20px ; flex-direction: column; padding: 0;}
.info-goal ul li{width: 100%;padding: 25px;}
.info-goal ul li:not(:last-of-type){border-right: none; border-bottom: 1px solid #eee;}
.info-goal ul li dl dt {font-size: 30px; height:auto; margin-bottom: 15px;}
.info-goal ul li dl dd{font-size: 15px; margin-bottom: 5px;} 
 
}



/*지·산·학 과정 -We-Meet 프로그램 */
.wemeet-pro{ border: 1px solid #eee; border-radius: 20px;  text-align: center; margin-bottom: 80px;}
.wemeet-pro ul{ display:inline-flex; justify-content: center; flex-wrap: wrap;padding: 5% 5% 0 5%; margin-bottom: 50px;}
.wemeet-pro ul li{ width: 25%; margin: 0 1%; text-align: center;}
.wemeet-pro ul li strong{ width: 220px; height: 220px; border-radius: 50%; display:inline-block; padding-top: 155px; font-size: 30px; color: #fff;justify-content: center;background:#74b2ce url("/sites/greenbio/images/wemeet-icon01.png") center 50px no-repeat;box-shadow: -1px 10px 0px rgba(0, 0, 0, 0.05);}
.wemeet-pro ul li:nth-of-type(2) strong{background: #578FCA url("/sites/greenbio/images/wemeet-icon02.png") center 50px no-repeat;}
.wemeet-pro ul li:nth-of-type(3) strong{background: #3674B5 url("/sites/greenbio/images/wemeet-icon03.png") center 50px no-repeat;}
.wemeet-pro ul li span{ display:inline-block; margin-top: 20px; font-size: 18px; font-weight: 500;}
.wemeet-pro p{ background: #f2f2f2 url("/sites/greenbio/images/wemeet-arrow.png") center top no-repeat; border-radius: 0 0 20px 20px; font-size: 30px; text-align: center; font-weight: 900; padding: 90px 0 60px 0;}

@media all and (max-width:1280px) {
.wemeet-pro ul{ padding: 3% 3% 0 3%; margin-bottom: 40px;}
.wemeet-pro ul li{ width: 30%; margin: 0 1%; }
.wemeet-pro ul li strong{ width: 200px; height: 200px; padding-top: 155px; font-size: 25px;}
.wemeet-pro ul li span{font-size: 17px}
.wemeet-pro p{ font-size: 28px;}
}

@media all and (max-width:1024px) {
.wemeet-pro ul{  margin-bottom: 20px;}
.wemeet-pro ul li strong{ width: 150px; height: 150px; padding-top: 105px; font-size: 20px; background-size: 60px !important; background-position: center 30px !important;}
.wemeet-pro ul li span{font-size: 15px;}
.wemeet-pro p{  font-size: 20px;padding: 50px 0 30px 0; background-size: 100px;}
}
@media all and (max-width:767px) {
.wemeet-pro{ border-radius: 10px;margin-bottom: 60px; }
.wemeet-pro ul{  margin-bottom: 0;}
.wemeet-pro ul li{ width: 100%; margin: 0 0 20px 0; }
.wemeet-pro ul li strong{ width: 120px; height: 120px; padding-top: 85px; font-size: 20px; background-size: 50px !important; background-position: center 25px !important;}
.wemeet-pro ul li span{font-size: 16px; width: 100%;margin-top: 20px;font-weight: 400;}
.wemeet-pro p{  font-size: 16px;font-weight: 700; padding: 35px 20px 20px 20px; background-size: 80px;border-radius: 0 0 10px 10px; }
}


.sub-effect{ border: 3px solid #02a1cb; border-radius: 20px;  text-align: center; margin-bottom: 80px; padding: 5%; display: flex; flex-wrap: wrap; justify-content: space-between; background: #f5fffd;}
.sub-effect dl{ width: 31%; margin: 0 1%; padding: 30px 4% 150px 4%; border: 1px solid #02a1cb52; border-radius: 20px; text-align: left; background:#fff url("/sites/greenbio/images/effect-icon01.png") calc(100% - 20px) calc(100% - 20px) no-repeat;}
.sub-effect dl:nth-of-type(2){background-image: url("/sites/greenbio/images/effect-icon02.png");}
.sub-effect dl:nth-of-type(3){background-image: url("/sites/greenbio/images/effect-icon03.png");}

.sub-effect dl dt strong{font-size: 28px;color: #0288cb;font-weight: 700;text-align: left;margin-bottom: 25px;display: inline-block;border-bottom: 2px dotted #0288cb;}
.sub-effect dl dd{ font-size: 17px; margin-bottom: 10px; background: url("/sites/greenbio/images/wemeet-dot.png") left 10px no-repeat; padding:0 0 0 15px; }

@media all and (max-width:1280px) {
.sub-effect{ padding: 3%;}
.sub-effect dl{ width: 32%; margin: 0 0.5%; padding: 30px 4% 150px 4%;}
.sub-effect dl dt strong{ font-size: 22px;}
}

@media all and (max-width:1024px) {
.sub-effect dl{ padding: 20px 3% 100px 3%;background-size: 80px}
.sub-effect dl dt strong{ font-size: 18px; margin-bottom: 20px;}
.sub-effect dl dd{ font-size: 14px; margin-bottom: 10px;}
}
@media all and (max-width:767px) {
.sub-effect{ border: 0; border-radius: 0; margin-bottom: 60px; padding: 0;box-shadow:0 0 0 0 #fff; background: #fff;}
.sub-effect dl{ width: 100%; margin: 0 0 10px 0;border: 2px solid #02a1cb;padding: 20px 5% 80px 5%;background-size: 60px;border-radius: 10px; }
.sub-effect dl dt strong{ font-size: 18px; margin-bottom: 20px;}
.sub-effect dl dd{ font-size: 14px; margin-bottom: 10px;}
}


/* stepbox - item-wrap */
.step-box {display: flex; flex-wrap: wrap; gap: 24px 30px;}
.step-box li {text-align: center; width: calc(20% - 24px); position: relative; counter-increment: number 1; height: fit-content; word-break:keep-all !important;}
.step-box li:after {content:'' counter(number) ''; position: absolute; left: 23px; top: 20px; font-weight: bold; font-size: 45px; z-index: 1; color: #02a1cb; line-height: 1;}
.step-box li:before {content:''; position: absolute; right: -50px; top: 50%; transform: translateY(-50%); border: 1px solid #d5d5d5; width: 50px; z-index: 0;}
.step-box li:last-child {margin-right: 0 !important;}
.step-box li > div {border: 1px solid #ededed; border-radius: 15px; position: relative; padding: 23px 23px; padding-right: 23px; background: #fff; text-align: left; height: 100%; box-shadow: 0px 0px 5px #2323231c;}
.step-box li > div:before, .step-box li > div:after {box-sizing: border-box; content:''; position: absolute; top:50%; width: 9px; aspect-ratio: 1/1; transform: translateY(-50%); border-radius: 50px;}
.step-box li > div:before {left: -5px; background: #02a1cb;}
.step-box li > div:after {right: -5px; background: #fff; border: 2px solid #02a1cb;}
.step-box li:last-child > div:before, .step-box li:first-child > div:before {display: none !important;}

.item-wrap {margin-bottom: 60px;}
.item-wrap > *:last-child {border: 1px solid #c1d8e3; padding: 20px; max-width: 100%; border-radius: 20px; background: #fff;}
.step-box li:after {left: 20px; top: 18px; font-size: 33px;}
.step-box li > div {padding: 20px 20px; padding-right: 20px; height: 140px;}
.step-box li img {aspect-ratio: 1/1; position: absolute; right: 20px; bottom: 23px; object-fit: contain; width: 44px; right: 20px; bottom: 18px;}
.step-box li p {font-weight: 500; position: relative; line-height: 1.1; font-size: 18px; padding-top: 42px; font-weight: bold;}

/* 6~10번 li의 시각 순서 재지정 */
.step-box li:nth-child(6) { order: 10; }
.step-box li:nth-child(7) { order: 9; }
.step-box li:nth-child(8) { order: 8; }
.step-box li:nth-child(9) { order: 7; }
.step-box li:nth-child(10) { order: 6; }

.step-box li:nth-child(5)::before {top: auto; transform: translateY(0); bottom: -25px; left: 50%; transform: translateX(-50%); background-color: #d5d5d5; border: none; width: 2px; height: 25px;}
.step-box li:nth-child(6)::before {display: none;}
.step-box li:nth-child(5) div::after {top: auto; transform: translateY(0); bottom: -5px; left: 50%; transform: translateX(-50%);}
.step-box li:nth-child(6) div::after {top: -5px; transform: translateY(0); left: 50%; transform: translateX(-50%); background: #02a1cb;}
.step-box li:nth-child(6) div::before,.step-box li:nth-child(7) div::before,.step-box li:nth-child(8) div::before,.step-box li:nth-child(9) div::before {background: #fff; border: 2px solid #02a1cb;}
.step-box li:nth-child(7) div::after,.step-box li:nth-child(8) div::after,.step-box li:nth-child(9) div::after,.step-box li:nth-child(10) div::after {background:#02a1cb;}

.step-box01 li:nth-child(5)::before {display: none;}
.step-box01 li:nth-child(5) div::after {top: 50%; transform: translateY(-50%); bottom: auto; left: -5px; background: #02a1cb;}
.step-box01 li > div {height: 190px;}

@media(max-width:1200px) {
  .step-box {gap: 20px;}
  .step-box li {order: unset !important; width: calc(50% - 10px);}
  .step-box li::before {display: none;}
  .step-box li > div::before, .step-box li > div::after {display: none;}
  .step-box01 li > div {height: 170px;}
}
@media(max-width:650px) {
  .item-wrap > .step-box {padding: 12px;}
  .step-box {gap:12px;}
  .step-box li {width: 100%;}
}

/*장학금 step*/
.step-box03 ul {display: flex; flex-wrap: wrap; gap: 40px; padding:0; width: 100%;}
.step-box03 ul li {border: 1px dashed #b8b8b8; border-radius: 30px; padding: 40px 30px; width: 100%; position: relative; width: calc(20% - 32px);}
.step-box03 ul li:before {content:''; width: 12px; height: 17px; background-color: #ccc; clip-path: polygon(0 0, 100% 50%, 0 100%); position: absolute; right: -27px; top: 50%; transform: translateY(-50%);}
.step-box03 ul li:last-child:before {display:none}
.step-box03 ul li .top {text-align: center;}
.step-box03 ul li .top .txt1 {font-weight: bold; font-size: 25px; margin-bottom: 1px; margin-top: 25px; color: #02a1cb;}
.step-box03 ul li .top .txt2 {font-size: 18px; margin: 15px 0 0 0;}
.step-box03 ul li .top .img-wrap {aspect-ratio: 1/1; display: block; height: 80px; width: 80px; margin: 0 auto; border-radius: 500px;}
.file-down01 {display: flex; justify-content: flex-end;}

@media(max-width:1180px) {
  .step-box03 ul {gap: 20px;}
  .step-box03 ul li {width: calc(50% - 10px); padding: 20px 30px;}
  .step-box03 ul li:before {display: none;}
  .step-box03 ul li .top .img-wrap {width: 80px; height: 80px;}
  .step-box03 ul li .top .txt1 {margin-top:15px;}
  .step-box03 ul li .top .txt2 {margin: 8px 0 0 0;}
}
@media(max-width:650px) {
  .step-box03 ul {gap: 10px;}
  .step-box03 ul li {width: calc(50% - 5px);}
}
@media(max-width:450px) {
  .step-box03 ul {gap: 10px;}
  .step-box03 ul li {width: 100%;}
}

.scholarship-step {}
.scholarship-step ul {display: flex; justify-content: space-between;}
.scholarship-step ul li {border: 1px dashed #b8b8b8;border-radius: 30px;padding: 30px;width: 100%;margin-right: 40px;position: relative;}
.scholarship-step ul li:before {content:'\F231'; position:absolute; right: -65px; top: 50%; transform: translateY(-50%); font-family: 'bootstrap-icons'; font-size: 20px; color: #ccc;}
.scholarship-step ul li:last-child {margin-right:0}
.scholarship-step ul li:last-child:before {display:none}
.scholarship-step ul li .top {text-align: center;}
.scholarship-step ul li .top .txt1 {font-weight: bold; font-size: 20px; margin-bottom: 1px; margin-top: 25px; color:#0276cb}
.scholarship-step ul li .top .txt1 span {font-weight:bold; font-size:35px}
.scholarship-step ul li .top .txt2 {font-size: 21px;}
.scholarship-step ul li .top .img-wrap {aspect-ratio: 1/1; display: block; height: 100px; width: 100px; margin: 0 auto; background: #f7f7f7; border-radius: 500px;}
.scholarship-step ul li .top img {padding: 25px;}
.scholarship-step ul li .bottom {margin-top: 20px; border-top: 1px dotted #bebebe; padding-top: 30px;}
.scholarship-step ul li .bottom p {text-align: center; font-weight: 500; font-size: 21px;}


@media (max-width: 1500px) {

    .scholarship-step ul li {margin-right: 70px;}
    .scholarship-step ul li:before {right: -50px;}

}
@media (max-width: 1300px) {

    .scholarship-step ul li {padding: 20px; margin-right: 40px; border-radius: 20px;}
    .scholarship-step ul li:before {right: -32px;}
    .scholarship-step ul li .top .txt1 {margin-top: 15px; font-size: 25px;}
    .scholarship-step ul li .bottom {margin-top: 15px; padding-top: 20px;}

}
@media (max-width: 1024px) {

    .scholarship-step ul {flex-wrap: wrap;}
    .scholarship-step ul li {margin-right: 0; border-radius: 20px; width: 48%; margin-bottom: 25px;}
    .scholarship-step ul li:before {display: none;}

}
@media (max-width: 768px) {

    .scholarship-step ul li {margin-bottom: 20px;}
    .scholarship-step ul li .top .txt1 {margin-top: 10px; font-size: 23px;}
    .scholarship-step ul li .top .txt2 {font-size: 18px;}
    .scholarship-step ul li .bottom {margin-top: 13px; padding-top: 15px;}
    .scholarship-step ul li .bottom p {font-size: 18px;}

}
@media (max-width: 550px) {

    .scholarship-step ul li {padding: 15px;}
    .scholarship-step ul li .top .txt1 {margin-top: 5px; font-size: 21px;}
    .scholarship-step ul li .top .txt2 {font-size: 16px;}
    .scholarship-step ul li .bottom {margin-top: 10px; padding-top: 10px;}
    .scholarship-step ul li .bottom p {font-size: 17px;}


}


/*ta 메뉴*/
.ta-box{background: url("/sites/greenbio/images/ta-bg.jpg") right bottom no-repeat; padding-bottom:60px; width:100%; margin:0 auto;}


@media all and (max-width:1024px) {
  .ta-box{background-size:50%;}
	

}
