@charset "utf-8"; /* SUB_TXT ================================================================================== */ h4 {position:relative; display:inline-block; font-size:1.45em; color:#000; font-weight:700; line-height:100%; padding:0 0 20px 0; } h4 span {font-size:0.75em;color:var(--color1);font-weight:500;} h4 b { position:relative; display:inline-block; font-size:1.1em; font-weight:700; } h4 b::after {position:absolute; content:''; top:15px; right:-18px; width:12px; height:12px; background:var(--color2); border-radius:50px; } /* h4::after {position:absolute; top:0; left:0; content:''; width:25px; height:3px; background:var(--color1); } h4::after {position:absolute; top:2px; left:0; content:''; width:20px; height:20px; background:linear-gradient(45deg, #0063b7, #02cbdf); border-radius:100%;} h4::before {position:absolute; z-index:1; top:7px; left:5px; content:''; width:10px; height:10px; background:#fff; border-radius:100%;} */ h5 {position:relative;font-size:1.2em;line-height:1.3; font-weight:700; padding:0 0 20px 22px; color:var(--color1); } h5::after {position:absolute; content:''; top:5px; left:0; width:16px; height:16px; border:4px solid var(--color1);border-radius:50px; } h5 span {font-size:0.85em;color:var(--color1);font-weight:600;} h6 {position:relative;font-size:1.1em;line-height:1.3; font-weight:700; padding-bottom:10px; color:var(--color1); } .sub_txtline {font-weight:700; box-shadow: inset 0 -10px 0 #ffe88a; padding:0 3px; color:#333;} @media screen and (max-width:1024px) { h4 {font-size:1.4em; padding-bottom:20px; } h5 {font-size:1.15em; padding:0 0 15px 20px; } h5::after { top:4px; width:14px; height:14px; border-width:3px; } } /* 서브 상단 페이지 인포 박스 */ .sub_top_box {position:relative;background:#eff1f2; padding:32px 40px; color:#333; margin-bottom:50px; border:1px solid rgb(0,0,0,0.06); border-radius:1.3em 0 ; word-break:keep-all; } .sub_top_box .tit {position:relative;color:var(--color1);font-size:1.5em;font-family:'Paperlogy'; font-weight:600; padding:0 0 17px 0; } .sub_top_box .txt { line-height:1.6;} .sub_top_box .btn {display:inline-block;color:#fff; background:url('../img/sub/sub_top_btn_arrow.png') no-repeat right 50% #004e97; padding:0 40px 0 15px; line-height:42px; border-radius:2px;margin:15px 0 0 0; } /* 서브 상단 페이지 인포 박스 */ .sub_line01 {height:60px; } .sub_line02 {height:50px; border-top:1px dashed #ddd; margin-top:50px; } .sub_line03 {height:50px; } .sub_cont01 { } .sub_cont02 { } .sub_cont_box01 {background:#f5f5f5;padding:25px 30px;margin-bottom:30px;color:var(--color1); border:1px solid #d2dbe6;} .sub_cont06 {position:relative; } .sub_cont06 li {position:relative; display:flex;gap:2em; } .sub_cont06 li + li {padding-top:30px; } .sub_cont06 figure {position:relative;text-align:center;width:120px;height:120px; border-radius:50%;background:#f5f5f5; display: flex; flex-direction: column; justify-content:center; align-items:center; } .sub_cont06 li .cont {flex:2; display: flex; flex-direction: column; justify-content:center; } .sub_cont06 li .tit { padding-bottom: 10px;font-size:1.1em;font-weight:700;color:var(--color1); } .delist {padding-left:30px;} .delist li {list-style:decimal-leading; padding-bottom:8px; } .sub_list01 {position:relative; list-style:none; padding-left:20px; line-height:1.3;} .sub_list01 + .sub_list01 { margin-top:10px;} .sub_list01::after {position:absolute; content:''; display:block; left:0; top:3px; width:15px; height:15px; background:url('../img/common/btn_arrow.png') no-repeat 0 0; background-size:cover; border-radius:50%;} .sub_list01 i { width:23px; line-height:23px; background:#aaa; color:#fff; text-align:center; font-size:0.9em;border-radius:100%; } .sub_list01 b {color:var(--color1);} .sub_list01 a {text-decoration:underline;} .sub_list01>ul {padding-top:10px; padding-bottom:10px; } .sub_list02 {position:relative; list-style:none; padding-left: 12px;line-height:1.3;} .sub_list02::after {position:absolute; content:''; display:block; left:2px; top:8px; width:3px; height:3px; background:var(--color1); border-radius:50%;} .sub_list02 + .sub_list02 { margin-top:8px;} .sub_inner_top {padding:0 0 45px 0;text-align:center; color:var(--color1);font-size:1.4em;font-weight:400; line-height:1.5;} .sub_inner_top span {display:block; } @media screen and (max-width:768px) { .sub_cont06 li { gap:1em; } .sub_cont06 figure { width:100px;height:100px; } .sub_cont06 figure img { width:60px; } .sub_top_box { padding:30px ; margin-bottom:40px; border-radius:1.1em 0 ; } .sub_top_box .tit { font-size:1.35em; } .sub_line01 {height:50px; } .sub_line02 {height:50px; margin-top:50px; } .sub_cont_box01 { padding:20px; } .sub_list01 { padding-left:17px; } .sub_list01 + .sub_list01 { margin-top:8px;} .sub_list01::after { top:2px; width:13px; height:13px; } .sub_list02 { padding-left: 10px; } .sub_list02 + .sub_list02 { margin-top:6px;} .sub_list02::after { left:1px; top:5px; } .sub_inner_top {padding:0 10px 30px 10px; font-size:1.15em;} .sub_inner_top span {display:inline; } } @media screen and (max-width:580px) { .sub_top_box { padding:25px ; } .sub_top_box .tit { font-size:1.3em; } } /* 단장인사말 ================================================================================== */ .greeting_wrap {position:relative;} .greeting_wrap .img {position:relative; max-width:330px;width:40%; float:right; margin-bottom:15px; margin-left:40px; } .greeting_wrap .img figure {position:relative; overflow:hidden; border-radius:0 3em; aspect-ratio:700/925; } .greeting_wrap .img::before {position:absolute; content: "";bottom:-4%; right:-4%;width:100%;height:100%; background:var(--gra2); border-radius:0 3em; opacity:0.8; z-index:-1; } .greeting_wrap .img img {max-width:100%; } .greeting_wrap .txt { position:relative; padding:10px 0 20px 0; font-family: 'Paperlogy'; font-weight:600; font-size:1.6em; color:#000; line-height:1.5em; } .greeting_wrap .txt span {display:block; font-family: 'Paperlogy'; font-weight:600; font-size:1.15em; color:var(--color1); } .greeting_wrap .txt::before {position:absolute; content: "\201D";top:50px; right:40%; font-size: 4.2em;font-family: Georgia;font-weight:bold;color: #eee; z-index:-1; } .greeting_cont { line-height:1.5em;} .greeting_cont p {line-height:1.6; padding:15px 0; word-break:keep-all; } .greeting_ceo {font-size:1.1em; text-align: right; font-weight: 600; padding-top:15px; } .greeting_ceo p {font-size:1.25em; font-weight: bold; line-height: 1.6;color:#000; } @media screen and (max-width:1250px) { .greeting_wrap .txt::before { top:40px; right:43%; } } @media screen and (max-width:1024px) { .greeting_wrap .txt { padding:10px 0 20px 0; font-size:1.5em; } .greeting_wrap .txt::before { top:30px; } } @media screen and (max-width:768px) { .greeting_wrap .img { max-width:400px;width:90%; float:none; text-align:center;margin-left:0;margin:auto; } .greeting_wrap .img::before { bottom:-3%; right:-3% border-radius:0 2.5em; } .greeting_wrap .img figure { border-radius:0 2.5em; } .greeting_wrap .txt { padding:30px 0 10px 0; font-size:1.35em; } .greeting_wrap .txt::before { display:none; } } /* 인사말 ================================================================================== */ /* 비전 및 목표 ==================================================================================== */ /* 비전 ======================= */ .vision_wrap01 { position:relative; padding-top:20px; display: grid; grid-template-columns:repeat(1, 1fr); gap:60px; word-break:keep-all; } .vision_wrap01 .item01 {position:relative; padding:20px; min-width:700px; text-align:center; border-radius:100px;background:var(--gra2); margin:auto; } .vision_wrap01 .item01 .tit {position:relative; } .vision_wrap01 .item01 .tit span {position:relative; display:inline-block; color:#42fdff; font-weight:700; padding-bottom:7px; font-size:1.1em; } .vision_wrap01 .item01 .cont { color:#fff; font-weight:600; font-size:1.25em; padding-bottom:5px;} .vision_wrap01 .item02 {position:relative; padding:35px; text-align:center; border-radius:100px; border:7px solid var(--color6); } .vision_wrap01 .item02 .tit {position:absolute; top:-18px; left:50%; transform: translateX(-50%); } .vision_wrap01 .item02 .tit span {position:relative; display:inline-block; background:#fff; padding:0 35px; color:var(--color1); font-size:1.2em; font-weight:700; } .vision_wrap01 .item02 .cont { color:#222; font-weight:600; font-size:1.2em; } .vision_wrap01 .item03 {position:relative; padding:20px 50px; text-align:center; } .vision_wrap01 .item03::before {position:absolute; content:''; left:0;top:0; width:40px; height:100%; border:10px solid var(--color6); border-right:0; } .vision_wrap01 .item03::after {position:absolute; content:''; right:0;top:0; width:40px; height:100%; border:10px solid var(--color6); border-left:0; } .vision_wrap01 .item03 .tit { text-align:center; padding-bottom:15px; } .vision_wrap01 .item03 .tit span {position:relative; display:inline-block; color:#fff; background:var(--color1); font-weight:700; padding:8px 15px; border-radius:50px; min-width:140px; } .vision_wrap01 .item03 .cont { color:#222; font-weight:600; } .vision_wrap01 .item03 .txt01 { font-size:1.1em; font-weight:700; color:var(--color1); } .vision_wrap01 .item03 .txt_box01 {display: flex; justify-content: center; gap:5px; margin:20px 0 10px 0; } .vision_wrap01 .item03 .txt_box01 li {flex:1; border:1px solid #ddd; padding:13px 10px; border-radius:10px; font-size:0.95em; background:#f5f5f5; line-height:1.2;} .vision_wrap01 .item04 {position:relative; text-align:center; } .vision_wrap01 .item04 .tit { position:relative; text-align:center; padding-bottom:60px; } .vision_wrap01 .item04 .tit span {position:relative; display:inline-block; color:#fff; background:var(--color1); font-weight:700; padding:8px 15px; border-radius:50px; min-width:140px; } .vision_wrap01 .item04 .tit span::before {position:absolute; content:''; left:50%; bottom:-61px; width:1px; height:61px; background:#ddd; z-index:-1; } /* 세로선 */ .vision_wrap01 .item04 .txt_box02 {display: grid; grid-template-columns:repeat(5, 1fr); gap:10px; } .vision_wrap01 .item04 .txt_box02 li {position:relative; border:1px solid #ddd; background:#fff; border-radius:10px; display: flex; flex-direction: column; align-items:center; } .vision_wrap01 .item04 .txt_box02 li::before {position:absolute; content:''; left:50%; top:-30px; width:1px; height:30px; background:#ddd; z-index:-1;} /* 세로선 */ .vision_wrap01 .item04 .txt_box02 li::after {position:absolute; content:''; right:50%; top:-30px; width:calc(100% + 12px); height:1px; background:#ddd; z-index:-1; } /* 가로선 */ .vision_wrap01 .item04 .txt_box02 li:first-child::after { right:initial;left:50%; } /* 가로선 */ .vision_wrap01 .item04 .txt_box02 li:nth-child(3)::before {display:none; } /* 세로선 */ .vision_wrap01 .item04 .txt_box02 li .no { display:block; font-size:0.9em; background:var(--color4); color:#fff; line-height:1.2; padding:12px; width:100%; border-radius:10px 10px 0 0; } .vision_wrap01 .item04 .txt_box02 li .txt01 { font-weight:700;font-size:0.95em; line-height:1.3;color:var(--color1); padding:10px; border-bottom:1px dashed #ddd; width:100%; } .vision_wrap01 .item04 .txt_box02 li .txt02 { padding: 15px; line-height:1.3; font-size:0.95em; text-align:left; } .vision_wrap01 .item04 .txt_box02 li:first-child .txt02 { text-align:center; } .vision_wrap01 .item04 .txt_box02 li .txt02 p { position:relative; padding-left:10px;line-height:1.3;} .vision_wrap01 .item04 .txt_box02 li .txt02 p::before {position:absolute; content:''; left:0; top:7px; width:3px; height:3px; background:var(--color1); border-radius:50%;} .vision_wrap01 .item04 .txt_box02 li:first-child .txt02 p { padding:0 5px;} .vision_wrap01 .item04 .txt_box02 li:first-child .txt02 p::before { display:none; } @media screen and (max-width:1024px) { .vision_wrap01 { gap:40px; font-size:0.95em; } .vision_wrap01 .item01 { padding:15px; } .vision_wrap01 .item02 { padding:25px; border-width:6px; } .vision_wrap01 .item03 { padding:15px 30px; } .vision_wrap01 .item03::before, .vision_wrap01 .item03::after { border-width:8px; width:30px; } .vision_wrap01 .item03 .txt_box01 {flex-flow:wrap; } .vision_wrap01 .item03 .txt_box01 li { flex:initial; padding: 10px 15px; } .vision_wrap01 .item04 .tit span::before { bottom:-31px; height:31px; } .vision_wrap01 .item04 .txt_box02 li:nth-child(3)::before {display:block; } /* 세로선 */ } @media screen and (max-width:768px) { .vision_wrap01 { font-size:0.9em; } .vision_wrap01 .item01 { min-width:initial; width:100%; } .vision_wrap01 .item02 { padding:20px 25px; border-width:5px; } .vision_wrap01 .item03 { padding:10px 25px; } .vision_wrap01 .item03::before, .vision_wrap01 .item03::after { border-width:6px; width:25px; } .vision_wrap01 .item04 .txt_box02 { display: grid; grid-template-columns:repeat(2, 1fr); gap:15px 10px; } .vision_wrap01 .item04 .txt_box02 li:nth-child(3)::after, .vision_wrap01 .item04 .txt_box02 li:nth-child(4)::after, .vision_wrap01 .item04 .txt_box02 li:nth-child(5)::after {display:none;} /* 가로선 */ } /* 비전 ======================= */ /* 세부목표 =============== */ .vision_wrap02 { position:relative; display: grid; grid-template-columns:repeat(1, 1fr); gap:30px; } .vision_wrap02 .item01 { position:relative; background:var(--gra2);border-radius:20px; padding:30px 40px; color:#fff; } .vision_wrap02 .item01 p { position:relative; padding-left:17px;line-height:1.35;} .vision_wrap02 .item01 p::before {position:absolute; content:''; left:0; top:7px; width:6px; height:6px; background:#fff; border-radius:50%;} .vision_wrap02 .item01 p + p {margin-top:12px; } .vision_wrap02 .item02 { position:relative; text-align:center; display: grid; grid-template-columns:repeat(4, 1fr); gap:15px; } .vision_wrap02 .item02 li { position:relative; display: flex; flex-direction: column; } .vision_wrap02 .item02 li::before { position:absolute; content:''; left:0; top:0; width:100%;height:100%; border:1px solid #ddd; border-radius:10px; z-index:-1; } .vision_wrap02 .item02 li:first-child::before {background:#f3f3f3; } .vision_wrap02 .item02 li:nth-child(2)::before {border-color:var(--color1);} .vision_wrap02 .item02 li:nth-child(3)::before {border-color:var(--color4);} .vision_wrap02 .item02 li:nth-child(4)::before {border-color:var(--color7);} .vision_wrap02 .item02 .txt01 { background:#555; color:#fff; font-weight:600; padding:12px 10px; border-radius:10px 10px 0 0 ; } .vision_wrap02 .item02 li:nth-child(2) .txt01 {background:var(--color1); } .vision_wrap02 .item02 li:nth-child(3) .txt01 {background:var(--color4); } .vision_wrap02 .item02 li:nth-child(4) .txt01 {background:var(--color7); } .vision_wrap02 .item02 .cont { width:100%; padding:20px; text-align:left; line-height:1.3; } .vision_wrap02 .item02 .cont dl { position:relative; font-size:0.95em; display: flex; gap:8px; margin-bottom:10px; } .vision_wrap02 .item02 .cont dl dt { position:relative;width:34px;line-height:34px; height:34px; text-align:center; background:var(--color1); color:#fff; font-size:0.95em; border-radius:50px; } .vision_wrap02 .item02 .cont dl dd { line-height:34px; font-weight:600; color:#333; } .vision_wrap02 .item02 .cont p { position:relative; padding-left:11px; font-size:0.95em; } .vision_wrap02 .item02 .cont p::before { position:absolute; content:''; left:0; top:7px; width:3px; height:3px; background:#555; border-radius:50%;} .vision_wrap02 .item02 .cont p + p {margin-top:8px; } @media screen and (max-width:768px) { .vision_wrap02 { gap:20px; } .vision_wrap02 .item01 { padding:25px ; border-radius:15px; } .vision_wrap02 .item01 p { padding-left:15px; } .vision_wrap02 .item01 p::before { width:5px; height:5px; } .vision_wrap02 .item02 { grid-template-columns:repeat(1, 1fr); gap:15px; } .vision_wrap02 .item02 .txt01 { padding: 10px; } .vision_wrap02 .item02 .cont { padding:15px 20px; } .vision_wrap02 .item02 .cont dl dt { width:30px;line-height:30px; height:30px; } .vision_wrap02 .item02 .cont dl dd { line-height:30px; } } /* 세부목표 =============== */ /* 협력체계 =============== */ .vision_wrap03 { position:relative; text-align:center; } .vision_wrap03 .item01 { position:relative; margin-top:20px; border:2px solid #dfdfdf; border-radius:0.7em; padding:60px 30px 40px 30px; } .vision_wrap03 .tit { position:absolute;left:50%; top:-20px; display:inline-block; color:#fff; background:var(--color1); font-weight:700; padding:8px 15px; border-radius:50px; min-width:140px; transform: translateX(-50%); } .vision_wrap03 .item02 { position:relative;border:2px solid #dfdfdf; border-radius:0.7em; padding:50px 30px; margin-top:60px; } .vision_wrap03 .item02 .inner { position:relative; text-align:center; max-width:800px; margin:auto; } .vision_wrap03 .item02 .inner .depth1 { position:relative; display: flex; flex-direction: column; justify-content:center; align-items:center; gap:30px; } .vision_wrap03 .item02 .inner .depth1::before {position:absolute; content:''; left:50%; top:0; width:1px; height:calc(100% + 60px); background:#ddd; } .vision_wrap03 .item02 .inner .depth1 p {position:relative; display:inline-block; text-align:center; font-weight:600; background:var(--color4); color:#fff; width:200px; padding:13px; border-radius:0.5em;} .vision_wrap03 .item02 .inner .depth1 p:nth-child(1) { background:var(--gra2); } .vision_wrap03 .item02 .inner .depth1 p:nth-child(3) { margin-top:60px } .vision_wrap03 .item02 .inner .depth2 { position:absolute; left:50%; top:110px; width:50%;display:flex; justify-content: end; } .vision_wrap03 .item02 .inner .depth2::before {position:absolute;content:'';left:0;top:50%;width:100%;height:1px; background:#ddd; } .vision_wrap03 .item02 .inner .depth2 ul { position:relative; max-width:200px;width:100%; border:1px solid #d3ccbd; padding:6px; background:#e0d4bc; border-radius:0.5em;} .vision_wrap03 .item02 .inner .depth2 li { border:1px solid #d3ccbd; padding:8px; border-radius:0.5em; background:#fff; font-size:0.95em; line-height:1.2;} .vision_wrap03 .item02 .inner .depth2 li + li {margin-top:4px; } .vision_wrap03 .item02 .inner .depth3 { position:absolute; left:0; top:120px; width:200px; } .vision_wrap03 .item02 .inner .depth3 .txt01 { position:relative; background:var(--color1); color:#fff; padding:10px; border-radius:0.5em 0.5em 0 0;} .vision_wrap03 .item02 .inner .depth3 ul { position:relative; border:1px solid #ddd; padding:6px; background:var(--color5); border-radius:0 0 0.5em 0.5em;} .vision_wrap03 .item02 .inner .depth3 li { border:1px solid #ddd; padding:8px; border-radius:0.5em; background:#fff; font-size:0.95em; line-height:1.2;} .vision_wrap03 .item02 .inner .depth3 li + li {margin-top:4px; } .vision_wrap03 .item02 .inner .depth4 { position:relative; margin-top:50px; background:var(--color7); color:#fff; padding:13px; border-radius:0.5em;} @media screen and (max-width:1024px) { .vision_wrap03 .item01 { padding:50px 30px 30px 30px; font-size:0.95em; } .vision_wrap03 .item02 { font-size:0.95em; } } @media screen and (max-width:768px) { .vision_wrap03 .item01 { padding:40px 20px 20px 20px;font-size:0.9em; } .vision_wrap03 .item02 { padding:40px 20px 30px 20px; font-size:0.9em; } .vision_wrap03 .item02 .inner .depth1 p { width:170px; padding:10px; } .vision_wrap03 .item02 .inner .depth2 ul { max-width:160px;} .vision_wrap03 .item02 .inner .depth3 { width:160px; } .vision_wrap03 .item02 .inner .depth3 .txt01 { padding:8px; } .vision_wrap03 .item02 .inner .depth2 li { padding:6px; } .vision_wrap03 .item02 .inner .depth3 li { padding:6px; } } @media screen and (max-width:600px) { .vision_wrap03 .item02 .inner .depth1 p { width:130px; padding:9px; } .vision_wrap03 .item02 .inner .depth2 ul { max-width:130px; padding:4px; } .vision_wrap03 .item02 .inner .depth3 { width:130px; } .vision_wrap03 .item02 .inner .depth3 ul { padding:4px; } .vision_wrap03 .item02 .inner .depth3 .txt01 { padding:6px; } .vision_wrap03 .item02 .inner .depth2 li + li {margin-top:2px; } .vision_wrap03 .item02 .inner .depth3 li + li {margin-top:2px; } .vision_wrap03 .item02 .inner .depth4 { padding:9px; } } @media screen and (max-width:500px) { .vision_wrap03 .item02 { padding:40px 15px 25px 15px; } .vision_wrap03 .item02 .inner .depth1 p { width:110px; } .vision_wrap03 .item02 .inner .depth2 ul { max-width:100px; font-size:0.9em; } .vision_wrap03 .item02 .inner .depth3 { width:90px; font-size:0.9em; } } /* 협력체계 =============== */ .vision_wrap04 {position:relative; text-align:center; border:2px solid #dfdfdf; border-radius:0.7em; padding: 50px 30px; } @media screen and (max-width:1024px) { .vision_wrap04 { padding:40px 30px; } } @media screen and (max-width:768px) { .vision_wrap04 { padding: 30px 20px; } } /* 비전 및 목표 ==================================================================================== */ /* 조직도 ==================================================================================== */ .organization_chart {position:relative; overflow:hidden; text-align:center; } .organization_chart::before {position:absolute;content:''; left:50%; top:0; width:1px; height:274px; background:#ddd; z-index:-1; } /* 세로선 */ .organization_chart .depth1 {position:relative; margin-bottom:50px; } .organization_chart .depth1 p {position:relative; margin:auto; font-weight:600; background:var(--color1); color:#fff; max-width:220px; padding:16px; border-radius:0.5em; line-height:1.3; } .organization_chart .depth2 {position:relative; display: grid; grid-template-columns:repeat(3, 1fr); align-items:center; margin-bottom:60px; } .organization_chart .depth2::before {position:absolute;content:''; left:15%; top:50%; width:70%; height:1px; background:#ddd; z-index:-1; } /* 가로선 */ .organization_chart .depth2 p { position:relative; display:inline-block; max-width:220px; width:100%; font-weight:600; background:var(--color3); color:#fff; padding:16px; border-radius:0.5em; margin:auto; line-height:1.3; } .organization_chart .depth2 p span {display:block; font-size:0.85em; font-weight:400; } .organization_chart .depth2 p:nth-child(2) {background:var(--gra2); } .organization_chart .depth2 ul {width:220px; margin:auto; border:1px solid #d3ccbd; padding:6px; background:#e0d4bc; border-radius:0.5em;} .organization_chart .depth2 ul li { border:1px solid #d3ccbd; padding:8px; border-radius:0.5em; background:#fff; font-size:0.95em; line-height:1.2;} .organization_chart .depth2 ul li + li {margin-top:4px; } .organization_chart .depth3 {position:relative; display: grid; grid-template-columns:repeat(2, 1fr); gap:1.6em; } .organization_chart .depth3 .tit {position:relative; max-width:250px; font-weight:600; background:var(--color4); color:#fff; padding:15px; border-radius:0.5em; line-height:20px; margin:auto; } .organization_chart .depth3 .tit span {display:block; font-size:0.85em; font-weight:400; } .organization_chart .depth3 .tit::before {position:absolute;content:''; left:50%; top:-30px; width:1px; height:170px; background:#ddd; z-index:-1; } /* 세로선 */ .organization_chart .depth3 .tit::after {position:absolute;content:''; left:50%; top:-30px; width:calc(100% + 1.5em); height:1px; background:#ddd; z-index:-1; } /* 가로선 */ .organization_chart .depth3 .item2 .tit::after { left:initial; right:50%; } /* 가로선 */ .organization_chart .depth3 .item2 .tit { background:var(--color7); } .organization_chart .depth3 .inner {position:relative; display: grid; grid-template-columns:repeat(2, 1fr); gap:0.6em; margin-top:100px; } .organization_chart .depth3 .box {position:relative; } .organization_chart .depth3 .box::before {position:absolute;content:''; left:50%; top:-30px; width:1px; height:60px; background:#ddd; z-index:-1; } /* 세로선 */ .organization_chart .depth3 .box::after {position:absolute;content:''; left:50%; top:-30px; width:calc(100% + 0.6em); height:1px; background:#ddd; z-index:-1; } /* 가로선 */ .organization_chart .depth3 .box:last-child::after {left:initial; right:50%; } /* 가로선 */ .organization_chart .depth3 .txt { font-weight:600; background:var(--color1); color:#fff; padding:13px; border-radius:0.5em 0.5em 0 0; line-height:1.3; margin:auto; } .organization_chart .depth3 .txt span { display:block; font-size:0.85em; font-weight:400; } .organization_chart .depth3 .item2 .txt { background:#06768a; } .organization_chart .depth3 ul { padding:15px 13px 20px 10px;border:1px solid #d5d5d5 ; background:#fff; border-top:0; border-radius:0 0 0.5em 0.5em ; text-align:left; min-height:235px; } .organization_chart .depth3 ul li {position:relative; padding:0 0 0 15px; font-size:0.9em; line-height:1.3; } .organization_chart .depth3 ul li::before { position:absolute;content:''; top:7px;left:5px; width:3px; height:3px; background:#666; border-radius:5px; } .organization_chart .depth3 ul li + li {margin-top:8px; } .organization_chart .depth3 .item3 {position:absolute; left:50%; top:80px; transform: translateX(-50%); } .organization_chart .depth3 .item3 p {position:relative; width:200px; font-weight:600; background:var(--point1); color:#fff; padding:15px; border-radius:0.5em; line-height:20px; } .organization_chart .depth3 .item3 p::before {position:absolute;content:''; left:-80px; top:0; width:80px; height:100%; background:url('../img/sub/arrow09.png') no-repeat 0 50%; } .organization_chart .depth3 .item3 p::after {position:absolute;content:''; right:-80px; top:0; width:80px; height:100%; background:url('../img/sub/arrow09.png') no-repeat 0 50%; transform: rotate(180deg); -webkit-transform: rotate(180deg);} @media screen and (max-width:1024px) { .organization_chart::before { height:260px; } /* 세로선 */ .organization_chart .depth1 p { max-width:200px; padding:14px; } .organization_chart .depth2 p {max-width:200px; padding:14px; } .organization_chart .depth2 ul {width:200px; } .organization_chart .depth3 .tit { max-width:220px; padding:13px; } .organization_chart .depth3 .tit::before { height:166px; } /* 세로선 */ .organization_chart .depth3 .item3 p { width:180px; padding:13px; } .organization_chart .depth3 .item3 p::before { left:-70px; width:70px; } .organization_chart .depth3 .item3 p::after { right:-70px; width:70px; } } @media screen and (max-width:768px) { .organization_chart {font-size:0.95em;} .organization_chart::before { height:253px; } /* 세로선 */ .organization_chart .depth1 p { max-width:170px; padding:12px; } .organization_chart .depth2 p {max-width:170px; padding:12px; } .organization_chart .depth2 ul {width:170px; } .organization_chart .depth3 .tit { max-width:190px; padding:11px; } .organization_chart .depth3 .tit::before { height:163px; } /* 세로선 */ .organization_chart .depth3 { gap:1em; } .organization_chart .depth3 .inner { grid-template-columns:repeat(1, 1fr); gap:20px; margin-top:80px; } .organization_chart .depth3 .item3 p { width:130px; padding:11px; } .organization_chart .depth3 .item3 p::before { left:-30px; width:30px; } .organization_chart .depth3 .item3 p::after { right:-30px; width:30px; } .organization_chart .depth3 .box::after {display:none; } /* 가로선 */ .organization_chart .depth3 ul { min-height:190px; padding:12px 10px 15px 10px; } .organization_chart .depth3 ul li { padding:0 0 0 12px; } .organization_chart .depth3 ul li::before { top:5px;left:2px; } .organization_chart .depth3 ul li + li {margin-top:5px; } .organization_chart .depth3 .txt { padding:11px; } } @media screen and (max-width:600px) { .organization_chart {font-size:0.9em;} .organization_chart::before { height:225px; } /* 세로선 */ .organization_chart .depth1 p { max-width:140px; padding:10px; } .organization_chart .depth2 p {max-width:140px; padding:10px 5px; } .organization_chart .depth2 ul {width:140px; padding:4px; } .organization_chart .depth2 ul li { padding:6px; } .organization_chart .depth2 ul li + li {margin-top:2px; } .organization_chart .depth3 ul { min-height:175px; } } @media screen and (max-width:500px) { .organization_chart {font-size:0.85em;} .organization_chart::before { height:190px; } /* 세로선 */ .organization_chart .depth1 p { max-width:110px; } .organization_chart .depth2 p {max-width:110px; } .organization_chart .depth2 {display:flex; justify-content:center; margin-bottom:80px; } .organization_chart .depth2 p:nth-child(1) {position:absolute; left:0; max-width:100px; } .organization_chart .depth2 ul { position:absolute; right:0; width:100px; font-size:0.9em;} .organization_chart .depth3 .tit { padding:10px; line-height:1.2; } .organization_chart .depth3 .tit::after { width:calc(100% + 1em); } /* 가로선 */ .organization_chart .depth3 .item3 { top:70px; } .organization_chart .depth3 .item3 p { width:100px; line-height:1.2; } .organization_chart .depth3 ul { min-height:170px; } } /* MAP ================================================================================== */ .map_box {position:relative; } .map_box #map_canvas {position:relative; width:100%; aspect-ratio: 2 / 1;border:1px solid #dfdfdf; border-radius:0.7em; } .map_box ul {overflow:hidden; padding:30px 10px 0 10px; display: grid; grid-template-columns:1fr; gap: 20px 20px; } .map_box ul li { display: grid; grid-template-columns:100px auto; gap:10px; } .map_box .txt01 { font-weight:600;color:var(--color1); } .map_box .txt02 {padding-top:6px; } .map_box i {background:var(--color1); color:#fff; width:40px; line-height:40px; border-radius:100%; text-align:center; cursor:auto; margin-right:10px; font-size:0.95em;} .mapoverlay {position:relative;margin-left:5px ; bottom:60px;border-radius:3px;padding:12px 14px;border: 1px solid #333;background:#fff;text-align:center; } .mapoverlay::after {position:absolute;content:'';left:50%;bottom:-16px;width:16px;height:16px; background:url('../img/sub/map_localimg.png') no-repeat;} .mapoverlay .title { color:#000; font-size:16px;font-weight:bold;} .mapoverlay .title span {font-weight:bold; box-shadow: inset 0 -5px 0 #ffd940; padding:0 1px; color:#000;} .mapoverlay .add {display:block; color:#666; font-size:14px; word-wrap:break-word; } .map_route {margin-top:10px; } .map_route p {padding-bottom:6px; } .map_route .line01, .map_route .line02, .map_route .line03 {display: inline-block; line-height: 28px; padding:0 12px; margin-right: 8px; border-radius: 50px; color: #fff; vertical-align: middle; font-size: 0.85em; text-align: center ; background:var(--color1); } .map_route .line02 {background:#4FA025; } .map_route .line03 {background:#ef6500; } .map_route02 { display:flex;justify-content: space-between; } .map_route_btn {display: inline-block; padding:6px 10px 6px 15px; background:var(--color1); color:#fff; border-radius:5px;font-size:0.9em; } .map_route_btn i {margin-left:10px; } .map_route_btn:hover {background:#111; } @media screen and (max-width:1024px) { .map_box ul {padding:20px 0 0 0; grid-template-columns: repeat(1, 1fr); gap: 10px; } .map_box ul li { font-size:0.95em;grid-template-columns:95px auto; } .map_box i {width:34px; line-height:34px; } .map_box .txt02 {padding-top:5px; } } @media screen and (max-width:800px) { .map_box #map_canvas { aspect-ratio: 2 / 1.5; } } @media screen and (max-width:580px) { .map_box #map_canvas { aspect-ratio: 2 / 1.7;} .mapoverlay .title { font-size:15px;} .mapoverlay .add { font-size:12px; } .map_route02 {display: block; } .map_route_btn {margin-top:5px; padding:4px 10px 4px 15px;} } /* MAP ================================================================================== */ /* 맞춤형지도 ======================================*/ .company02_wrap01 {position:relative;text-align:center; padding-right:1em;display: grid; grid-template-columns:repeat(3, 1fr); gap:2.3em 2em;} .company02_wrap01 li {position:relative;border:1px solid #dfdfdf;padding: 20px ;color:#222; background:#fff; border-radius:0.7em; box-shadow: 2px 0 12px 0 rgba(0,0,0,0.08); } .company02_wrap01 li:not(:last-of-type):after {content:''; position:absolute; top:calc(50% - 10px); right:-1.2em; border:solid #aaa; border-width:2px 2px 0 0; padding:5px; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .company02_wrap01 li .no { position:absolute; top:20px; left:20px;width:34px; line-height:34px; display:inline-block; font-size:0.8em; color:#fff; background:var(--color1); border-radius:20px; } .company02_wrap01 .img {margin:18px auto 15px auto ; width:80px; height:80px; border-radius:50px;background:#f7f7f7; border:0 solid var(--color2); display: flex; flex-direction: column; justify-content:center; align-items:center; } .company02_wrap01 .tit {position:relative; color:var(--color1); padding:5px 0 15px 0; line-height:1.2; font-weight:700; } .company02_wrap01 .txt { color:#777; font-size:0.95em; border-top:1px dashed #ddd; word-break:keep-all; line-height:1.3; padding:15px 0 5px 0; } @media screen and (max-width:1024px) { .company02_wrap01 { grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:2em 1.6em;} .company02_wrap01 li:not(:last-of-type):after { right:-1em; } } @media screen and (max-width:580px) { .company02_wrap01 { grid-template-columns:repeat(1, 1fr); padding-right:0; } .company02_wrap01 li:not(:last-of-type):after { top:initial; right:calc(50% - 5px); bottom:-20px; transform: rotate(135deg); -webkit-transform: rotate(135deg);} .company02_wrap01 li .no { top:16px; left:16px; width:32px; line-height:32px; } } /* 맞춤형지도 ======================================*/ /* 산학연협력 협의체 ======================================*/ .company03_wrap01 {position:relative;text-align:center; display: flex; align-items:center;justify-content: space-between; gap:4em;} .company03_wrap01::before {position:absolute; content:'';left:30%;top:50%;width:40%;height:1px; background:#ddd; z-index:-1;} /* 가로선 */ .company03_wrap01 .item02 {position:relative;width:180px;} .company03_wrap01 .item02 div {position:relative; color:#fff; font-weight:500; background:var(--color1); width:100%; aspect-ratio:1/1; padding: 10px; line-height:1.2; border-radius:50%; display: flex; flex-direction: column; justify-content:center; align-items:center; } .company03_wrap01 .item02 div figure { margin-bottom:5px; } .company03_wrap01 .item02 div:after {position:absolute; content:'';top:-5%;left:-5%;width:110%; height:110%;border:2px dotted var(--color1);border-radius:50%;z-index:-1; } .company03_wrap01 .item01 {position:relative; padding:0 30px 0 0;flex:2;display: flex; flex-direction: column; gap:10px;background:#fff; } .company03_wrap01 .item03 {position:relative; padding:0 0 0 30px;flex:2;display: flex; flex-direction: column; gap:10px; background:#fff; } .company03_wrap01 .list_box>li {position:relative; border:1px solid var(--color4); border-radius:10px; display: grid; grid-template-columns:repeat(1, 1fr); gap:5px; background:var(--color5); padding:10px 15px; } .company03_wrap01 .list_box .tit {position:relative;color:var(--color1); font-size:0.95em; line-height:1.2; font-weight:600; border-bottom:1px dashed var(--color4); padding:5px 0 10px 0; } .company03_wrap01 .list_box ol {position:relative;padding:5px ;text-align:left;} .company03_wrap01 .list_box ol li {position:relative; font-size:0.9em; padding:0 0 0 10px; line-height:1.25; margin-top:7px; } .company03_wrap01 .list_box ol li:after {position:absolute; content:''; display:block; left:0; top:7px; width:3px; height:3px; background:#888 ;} .company03_wrap01 .item03>li::after {position:absolute; content:'';left:-30px;top:50%;width:30px;height:1px; background:#ddd; } /* 가로선 */ .company03_wrap01 .item03>li:first-child::before {position:absolute; content:'';left:-30px;top:50%;height:60%;width:1px; background:#ddd; } .company03_wrap01 .item03>li:last-child::before {position:absolute; content:'';left:-30px;bottom:50%;height:60%;width:1px; background:#ddd; } .company03_wrap01 .item01>li::after {position:absolute; content:'';right:-30px;top:50%;width:30px;height:1px; background:#ddd; } /* 가로선 */ .company03_wrap01 .item01>li:first-child::before {position:absolute; content:'';right:-30px;top:50%;height:60%;width:1px; background:#ddd; } .company03_wrap01 .item01>li:last-child::before {position:absolute; content:'';right:-30px;bottom:50%;height:60%;width:1px; background:#ddd; } @media screen and (max-width:1300px) { .company03_wrap01 .item02 {width:170px; } } @media screen and (max-width:1200px) { .company03_wrap01 { gap:3em;} .company03_wrap01 .item01 { width:30%; } .company03_wrap01 .item02 {width:160px; } .company03_wrap01 .item02 img {width:50px; } } @media screen and (max-width:820px) { .company03_wrap01 { align-items:center;flex-direction: column;gap:40px;} .company03_wrap01::before { left:50%;top:0;height:90%;width:1px; } /* 가로선 */ .company03_wrap01 .item01 {padding:0 0 30px 0;flex:initial;width:100%; display: flex; flex-flow:wrap;justify-content: space-between; gap:5px;} .company03_wrap01 .item03 {padding:30px 0 0 0;flex:initial;width:100%; display: flex; flex-flow:wrap;justify-content: space-between; gap:5px;} .company03_wrap01 .list_box>li {width:48%; display: flex; flex-direction: column; gap:0; } .company03_wrap01 .item03>li::after { left:50%;top:-30px;height:30px;width:1px; } .company03_wrap01 .item03>li:first-child::before { left:50%;top:-30px;width:100%;height:1px; } .company03_wrap01 .item03>li:last-child::before { left:initial;right:50%;top:-30px;bottom:0;width:100%;height:1px; } .company03_wrap01 .item01>li::after {right:initial; top:initial; left:50%;bottom:-30px;height:30px;width:1px; } .company03_wrap01 .item01>li:first-child::before { left:50%;right:initial;top:initial; bottom:-30px;width:100%;height:1px; } .company03_wrap01 .item01>li:last-child::before { right:50%; bottom:-30px; width:100%;height:1px; } } @media screen and (max-width:480px) { .company03_wrap01 .item02 {width:150px; } .company03_wrap01 .list_box>li {width:49%; } } /* 산학연협력 협의체 ======================================*/ /* 재직자교육 ======================================*/ .company04_wrap01 {position:relative;text-align:center; display: grid; grid-template-columns: 1fr; border:1px solid #ddd; border-radius:1em; padding:3em; box-shadow: 2px 0 12px 0 rgba(0,0,0,0.1); } .company04_wrap01 .item03 {position:relative; } .company04_wrap01 .item03 .subject {position:relative; background: var(--color1); width:200px;height:200px; line-height:1.2; display: flex; flex-direction: column; justify-content:center; align-items:center; border-radius:100px; margin:auto; color:#fff; padding-bottom:10px; } .company04_wrap01 .item03 .subject::after {position:absolute; content:'';top:-5%;left:-5%;width:110%; height:110%;border:2px dotted #001877;border-radius:50%;z-index:-1; } .company04_wrap01 .item03 .txt {margin:30px 0 20px 0;color:#333; font-weight:600; line-height:1.3;font-size:1.1em; color:var(--color1); } .company04_wrap01 .item02 {position:relative; text-align:center;max-width:750px;width:100%; margin:auto; background:url('../img/sub/arrow01.png') no-repeat center 0; } .company04_wrap01 .item02 .tit { height:120px; font-weight:600; font-size:1.1em; color:var(--color1); padding-top:60px; } .company04_wrap01 .item02 ul {position:relative; display: grid; grid-template-columns:repeat(3, 1fr); } .company04_wrap01 .item02 ul li {position:relative; } .company04_wrap01 .item02 ul li .cont { width:190px; aspect-ratio:1/1; border:6px solid var(--color2); border-radius:200px; margin:auto; display: flex; flex-direction: column; justify-content:center; align-items:center; } .company04_wrap01 .item02 ul li .icon { } .company04_wrap01 .item02 ul li .txt { color:var(--color1); font-weight:600; line-height:1.2; padding-top:5px; } .company04_wrap01 .item02 .foot {position:relative;margin-top:25px; background:var(--gray1);color:#fff; padding:13px ;font-weight:600; border-radius:100px; } .company04_wrap01 .item01 {position:relative; text-align:center; background:url('../img/sub/arrow01.png') no-repeat center 0; margin-top:20px; } .company04_wrap01 .item01 .subject { position:relative; padding:60px 0 40px 0;color:var(--color1); font-weight:600; line-height:1.3;font-size:1.1em; } .company04_wrap01 .item01 .cont {position:relative; border-radius:15px; border:1px solid #ddd; padding:30px; } .company04_wrap01 .item01 ul {position:relative; display: grid; grid-template-columns:repeat(3, 1fr); gap:1em; } .company04_wrap01 .item01 ul>li {position:relative; display: flex; flex-direction: column; align-items:center; } .company04_wrap01 .item01 ul>li::before { position:absolute; content:''; left:0;top:170px; width:100%; height:calc(100% - 170px); border:1px solid #ddd; border-radius:10px; background:#f5f5f5; } .company04_wrap01 .item01 ul>li .tit {position:relative; text-align:center; width:140px; height:140px; background:var(--color4);color:#fff; line-height:1.2; border-radius:100px; font-weight:600; display: flex; flex-direction: column; justify-content:center; align-items:center; margin-bottom:30px; } .company04_wrap01 .item01 ul>li .tit::before {position:absolute; content:'';left:50%; bottom:-30px; width:1px; height:30px; background:#ddd; z-index:-1;} .company04_wrap01 .item01 ul>li p {text-align:center; font-weight:600; font-size:0.95em;padding:25px 10px 0 10px;color:var(--color4); line-height:1.2; z-index:1; } .company04_wrap01 .item01 ul ol {text-align:left; padding:15px; } .company04_wrap01 .item01 ul ol li {position:relative; font-size:0.9rem; padding:0 0 0 10px; } .company04_wrap01 .item01 ul ol li:after {position:absolute; content:''; display:block; left:3px; top:12px; width:2px; height:2px; background:#888;} .company04_wrap01 .item01 .foot {position:relative;background:var(--gray1);color:#fff; padding:13px;font-weight:600; border-radius:100px; margin-top:30px; } @media screen and (max-width:1024px) { .company04_wrap01 { padding:2.5em; } .company04_wrap01 .item03 .subject { width:180px;height:180px; } .company04_wrap01 .item03 .txt {margin:25px 0 15px 0; } .company04_wrap01 .item02 { background-size:auto 130px; } .company04_wrap01 .item02 .tit { height:100px; padding-top:45px; } .company04_wrap01 .item02 ul li .cont { width:170px; border-width:5px; } .company04_wrap01 .item02 .foot { padding:12px ; } .company04_wrap01 .item01 { background-size:auto 130px; } .company04_wrap01 .item01 .subject { padding:45px 0 30px 0; } .company04_wrap01 .item01 .cont { padding:25px; } .company04_wrap01 .item01 .foot { padding:12px ; margin-top:20px; } .company04_wrap01 .item01 ul>li .tit { width:130px; height:130px; margin-bottom:20px; } .company04_wrap01 .item01 ul>li::before { top:155px; height:calc(100% - 155px); } } @media screen and (max-width:768px) { .company04_wrap01 .item03 .subject { width:160px;height:160px; } .company04_wrap01 .item03 .subject img { width:50px; } .company04_wrap01 .item02 ul { max-width:600px; margin:auto;} .company04_wrap01 .item02 ul li .cont { width:140px; border-width:4px; } .company04_wrap01 .item02 ul li .txt { padding-top:0; } .company04_wrap01 .item02 ul li .icon img { width:50px; } .company04_wrap01 .item02 .foot { margin-top:20px; } .company04_wrap01 .item01 .cont { padding:20px; } .company04_wrap01 .item01 ul>li .tit { width:110px; height:110px; } .company04_wrap01 .item01 ul>li::before { top:135px; height:calc(100% - 135px); } .company04_wrap01 .item01 ul>li p br {display:none; } } @media screen and (max-width:600px) { .company04_wrap01 { padding:0; border:0; box-shadow:none; } .company04_wrap01 .item03 .subject { width:150px;height:150px; } .company04_wrap01 .item02 ul li .cont { width:120px; border-width:3px; } .company04_wrap01 .item02 ul li .icon img { width:45px; } .company04_wrap01 .item02 .foot { padding:10px ; } .company04_wrap01 .item01 .foot { padding:10px ; } .company04_wrap01 .item01 ul { grid-template-columns:repeat(1, 1fr); gap:1em; } .company04_wrap01 .item01 ul>li .tit { width:100%; height:initial; padding:10px; border-radius:10px 10px 0 0; font-size:0.95em;margin-bottom:0; } .company04_wrap01 .item01 ul>li .tit br { display:none; } .company04_wrap01 .item01 ul>li::before { top:0; height:100%; } .company04_wrap01 .item01 ul>li p { padding:15px 10px 0 10px; } } @media screen and (max-width:480px) { .company04_wrap01 .item02 ul li .cont { width:100px; } .company04_wrap01 .item02 ul li .icon img { width:40px; } .company04_wrap01 .item01 .cont { padding:15px; } } .company04_wrap02 {position:relative;text-align:center; display: grid; grid-template-columns:repeat(4, 1fr); gap:25px;} .company04_wrap02 li {position:relative;border:2px dotted #ccc;padding:25px 10px ;color:#222;letter-spacing:-1px; border-radius:10px; } .company04_wrap02 li .no {width:80px;display:block; font-size:0.8em; color:#fff; background:var(--color4);padding:0 15px;border-radius:20px;margin:auto; } .company04_wrap02 .img {padding:18px 0 15px 0;} .company04_wrap02 li:after {content:''; position:absolute; top:calc(50% - 10px); right:-17px; border:solid #aaa; border-width:2px 2px 0 0; padding:5px; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .company04_wrap02 li:last-child:after {display:none;} @media screen and (max-width:768px) { .company04_wrap02 { grid-template-columns:repeat(3, 1fr); } .company04_wrap02 .img {padding:15px 0 10px 0;} } @media screen and (max-width:520px) { .company04_wrap02 { grid-template-columns:repeat(2, 1fr); } .company04_wrap02 .item01 p {width:150px;} } /* 재직자교육 ======================================*/ /* 경남형 평생교육 공동교육과정 ======================================*/ .edu01_wrap01 { position:relative; text-align:center; line-height:1.3; word-break:keep-all; } .edu01_wrap01 .depth1 { position:relative; width:236px; height:236px; padding:1.8em; border-radius:50%; background:var(--color1); color:#fff; display: flex; flex-direction: column; justify-content:center; align-items:center; margin:auto; } .edu01_wrap01 .depth1 .tit { font-weight:bold; font-size:1.3em; padding-bottom:15px; } .edu01_wrap01 .depth1::before { position:absolute; content:''; left:-5%; top:-5%; width:110%; height:110%; border:1px dashed var(--color1);border-radius:50%; opacity:0.4; } .edu01_wrap01 .depth2 { position:relative; width:100%; margin-top:20px; } .edu01_wrap01 .depth2 .tit { position:relative; color:var(--color1); font-weight:bold; font-size:1.25em; width:100%; height:120px; background:url('../img/sub/arrow01.png') no-repeat center 0; background-size:auto 100%; display: flex; flex-direction: column; justify-content:center; align-items:center;} .edu01_wrap01 .depth2 ul { position:relative; display: grid; grid-template-columns:repeat(4, 1fr); padding-right:28px;} .edu01_wrap01 .depth2 ul li { position:relative; background: ; border-radius:50px; color:#fff; padding:26px 0 26px 25px; } .edu01_wrap01 .depth2 ul li::before { position:absolute;content:''; left:0;top:0; width:calc(100% + 28px); height:100%; background:var(--color4); border-radius:50px; mix-blend-mode : multiply; z-index:-1; } .edu01_wrap01 .depth2 ul li:nth-child(even)::before { background:var(--gray1); } .edu01_wrap01 .depth2 ul li:not(:last-of-type)::after { position:absolute;content:''; right:-28px; top:0; width:28px; height:100%; background:url('../img/sub/arrow08.png') no-repeat center 50%; } @media screen and (max-width:1024px) { .edu01_wrap01 .depth1 { width:220px; height:220px; padding:1em; } .edu01_wrap01 .depth2 .tit { font-size:1.2em; height:100px; } } @media screen and (max-width:768px) { .edu01_wrap01 .depth1 { width:200px; height:200px; } .edu01_wrap01 .depth2 { margin-top:15px; } .edu01_wrap01 .depth2 .tit { font-size:1.1em; height:90px; } .edu01_wrap01 .depth2 ul { grid-template-columns:repeat(2, 1fr); gap:10px; padding:0; } .edu01_wrap01 .depth2 ul li { padding:18px 10px; } .edu01_wrap01 .depth2 ul li::before { width:100%; } .edu01_wrap01 .depth2 ul li:nth-child(3)::before { background:var(--gray1) !important; } .edu01_wrap01 .depth2 ul li:nth-child(4)::before { background:var(--color4) !important; } .edu01_wrap01 .depth2 ul li:not(:last-of-type)::after { display:none; } } @media screen and (max-width:580px) { .edu01_wrap01 .depth1 { width:170px; height:170px; font-size:0.95em; } .edu01_wrap01 .depth1 .tit { font-size:1.2em; } .edu01_wrap01 .depth2 ul li { padding:15px 10px; } } .edu01_wrap02 { position:relative; text-align:center; line-height:1.3; word-break:keep-all; } .edu01_wrap02 .depth1 { position:relative; display: grid; grid-template-columns:repeat(3, 1fr); background:var(--gra2); border-radius:1em 0 0 1em; } .edu01_wrap02 .depth1 li { position:relative; padding:1.5em 1em; display: flex; flex-direction: column; justify-content:center; align-items:center; } .edu01_wrap02 .depth1 li::before {position:absolute; content:'';right:-20px; top:0; width:40px; height:101%; background:url('../img/sub/arrow06.png') no-repeat right 0; background-size:100% 100%; } .edu01_wrap02 .depth1 li:last-child::before { right:0; width:30px; background:url('../img/sub/arrow07.png') no-repeat right 0; background-size:100% 100%; } .edu01_wrap02 .depth1 li .txt { font-size:1.1em; font-weight:bold; color:#fff; padding-bottom:15px; } .edu01_wrap02 .depth1 li .cont { text-align:left; font-size:0.95em; color:#fff; } .edu01_wrap02 .depth1 li .cont p { position:relative; padding-left: 10px;line-height:1.3;} .edu01_wrap02 .depth1 li .cont p::before {position:absolute; content:''; left:0; top:8px; width:3px; height:3px; background:#fff; border-radius:50%;} .edu01_wrap02 .depth2 { position:relative; margin-top:50px; display: grid; grid-template-columns:repeat(3, 1fr); gap:1em; } .edu01_wrap02 .depth2::before { position:absolute; content:''; left:0; top:-50px; width:100%; height:40px;background:url('../img/sub/arrow02.png') no-repeat center 0; transform:rotate(180deg);} .edu01_wrap02 .depth2 li { position:relative; padding: 1.5em; border:1px solid var(--color6); border-radius:1em; background:var(--color5); } .edu01_wrap02 .depth2 li .txt { font-size:1.05em; font-weight:bold; color:var(--color1); padding-bottom:10px; } .edu01_wrap02 .depth3 { position:relative; margin-top:50px; background:var(--color1); color:#fff; padding:1.5em; border-radius:1em; display: flex; flex-direction: column; justify-content:center; align-items:center; } .edu01_wrap02 .depth3::before { position:absolute; content:''; left:0; top:-50px; width:100%; height:40px;background:url('../img/sub/arrow02.png') no-repeat center 0; transform:rotate(180deg);} .edu01_wrap02 .depth3 ul { text-align:left; } .edu01_wrap02 .depth3 ul li { position:relative; padding-left: 12px;line-height:1.5;} .edu01_wrap02 .depth3 ul li::before {position:absolute; content:''; left:0; top:10px; width:3px; height:3px; background:#fff; border-radius:50%;} @media screen and (max-width:768px) { .edu01_wrap02 .depth1 { grid-template-columns:repeat(1, 1fr);gap:30px; border-radius:0; background:none !important; } .edu01_wrap02 .depth1 li { padding: 1.2em 1em; border:2px solid var(--color4); border-radius:0.7em; color:var(--color4);} .edu01_wrap02 .depth1 li::before { display:none; } .edu01_wrap02 .depth1 li .txt {color:var(--color4);} .edu01_wrap02 .depth1 li .cont { color:#555; } .edu01_wrap02 .depth1 li:not(:last-of-type)::after { position:absolute; content:''; bottom:-20px; left:calc(50% - 7px); width:14px;height:14px;border:solid #bbb; border-width:3px 3px 0 0; transform: rotate(135deg); -webkit-transform: rotate(135deg); } .edu01_wrap02 .depth2 { gap:0.5em; } .edu01_wrap02 .depth2 li { padding: 20px 15px; border-radius:0.7em; } .edu01_wrap02 .depth3 { padding:20px; border-radius:0.7em; } } @media screen and (max-width:580px) { .edu01_wrap02 { font-size:0.95em; } } .edu01_wrap03 {position:relative; margin-top:25px; text-align:center; } .edu01_wrap03 .top {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:200px;height:200px;color:#fff; background:var(--color1); border-radius:120px; z-index:11; display: flex; flex-direction: column; justify-content:center; align-items:center; font-size:1.2em; } .edu01_wrap03 .top::before {position:absolute;content:''; left:-6%; top:-6%; width:112%;height:112%; border:1px dashed var(--color1);border-radius:140px; opacity:0.4; z-index:1 ; } .edu01_wrap03 .top strong {display:block; font-weight:600; padding:0 0 15px 0; z-index:11; } .edu01_wrap03 .top img { z-index:11; } .edu01_wrap03 ul {position:relative;display: grid; grid-template-columns:repeat(2, 1fr); gap:1em; } .edu01_wrap03 ul li {position:relative;border:1px solid #ddd; padding: 30px; text-align:center; border-radius:1em; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); display: flex; flex-direction: column; align-items:center; } .edu01_wrap03 ul li .img {position:relative;top:0; width:120px;height:120px; background:#f5f5f5; border-radius:50%;display: flex; flex-direction: column; justify-content:center; align-items:center; } .edu01_wrap03 ul li .img img {width:100%; } .edu01_wrap03 ul li .txt01 {font-size:1.1em; font-weight:700; color:var(--color1); padding:15px 0 10px 0; } .edu01_wrap03 ul li .txt02 { text-align:left;} .edu01_wrap03 ul li .txt02 p { position:relative; padding-left: 10px; color:#777; font-size:0.95em;line-height:1.4em;} .edu01_wrap03 ul li .txt02 p::before {position:absolute; content:''; left:0; top:8px; width:3px; height:3px; background:#777; border-radius:50%;} @media screen and (max-width:1300px) { .edu01_wrap03 .top { width:180px;height:180px; font-size:1.15em; } .edu01_wrap03 .top::before { left:-5%; top:-5%; width:110%;height:110%; } .edu01_wrap03 ul li { padding: 30px;} .edu01_wrap03 ul li .img { width:100px;height:100px; } } @media screen and (max-width:1024px) { .edu01_wrap03 .top { width:170px;height:170px; } .edu01_wrap03 ul li { padding:30px 20px; } .edu01_wrap03 ul li .img { width:110px;height:110px; } } @media screen and (max-width:768px) { .edu01_wrap03 .top {position:relative; top:80px; width:160px;height:160px; font-size:1.1em; transform: translateX(-50%); } .edu01_wrap03 .top img {max-width:60px; } .edu01_wrap03 { top:-80px; } .edu01_wrap03 ul li { padding:25px 20px; } .edu01_wrap03 ul li .img { width:100px;height:100px; } } @media screen and (max-width:580px) { .edu01_wrap03 { top:10px; } .edu01_wrap03 .top { top:-10px;width:150px;height:150px; margin-bottom:20px; font-size:1.05em; } .edu01_wrap03 .top img {max-width:55px;} .edu01_wrap03 ul li .img { width:90px;height:90px; } .edu01_wrap03 ul { grid-template-columns:repeat(1, 1fr); } } .edu01_wrap04 {position:relative; text-align:center; } .edu01_wrap04 .depth1 { position:relative; max-width:700px; padding:22px; background:var(--color1); color:#fff; font-size:1.1em; font-weight:bold; margin:auto; border-radius:5em; } .edu01_wrap04 .depth2 { position:relative; margin-top:40px; } .edu01_wrap04 .depth2 .top { position:relative; max-width:700px; padding:25px; color:#111; font-size:1.1em; font-weight:bold; margin:auto; line-height:1.2; } .edu01_wrap04 .depth2 .top p { position:relative; color:var(--color1); font-size:1.1em; font-weight:bold; padding-bottom:10px; } .edu01_wrap04 .depth2 .top::before {position:absolute;content:''; left:0;top:0; width:30px; height:100%; border:10px solid var(--color6); border-right:0; } .edu01_wrap04 .depth2 .top::after {position:absolute;content:''; right:0;top:0; width:30px; height:100%; border:10px solid var(--color6); border-left:0; } .edu01_wrap04 .depth2 ul { position:relative; display: grid; grid-template-columns:repeat(4, 1fr); gap:1em; margin-top:90px; } .edu01_wrap04 .depth2 ul::before {position:absolute;content:''; left:0;top:-90px;width:100%; height:100px; background:url('../img/sub/arrow01.png') no-repeat center 0; background-size:auto 100%; z-index:-1; } .edu01_wrap04 .depth2 ul li { position:relative; border:1px solid #ddd; border-radius:0.7em; overflow:hidden; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); display: flex; flex-direction: column; align-items:center; } .edu01_wrap04 .depth2 ul li .no { position:relative; width:100%; padding:12px; background:var(--color4); color:#fff; } .edu01_wrap04 .depth2 ul li .txt { position:relative; padding:10px; color:var(--color4); font-weight:600; } .edu01_wrap04 .depth2 ul li .box { position:relative; padding:0 10px 20px 10px;text-align:left; } .edu01_wrap04 .depth2 ul li .box p { position:relative; padding-left: 10px; color:#777; font-size:0.95em;line-height:1.4em;} .edu01_wrap04 .depth2 ul li .box p::before {position:absolute; content:''; left:0; top:8px; width:3px; height:3px; background:#777; border-radius:50%;} .edu01_wrap04 .depth3 { position:relative; } .edu01_wrap04 .depth3 .top { position:relative; line-height:120px;height:100px; color:var(--color1); font-size:1.05em; font-weight:bold; background:url('../img/sub/arrow01.png') no-repeat center 0; background-size:auto 100%; } .edu01_wrap04 .depth3 .inner { position:relative; display: grid; grid-template-columns:25% auto 25%; gap:1em; } .edu01_wrap04 .depth3 .inner .item1, .edu01_wrap04 .depth3 .inner .item2, .edu01_wrap04 .depth3 .inner .item3 { border:1px solid #ddd; border-radius:0.7em; overflow:hidden; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); } .edu01_wrap04 .depth3 .inner .tit { position:relative; padding:15px; color:#fff; background:var(--color1); line-height:1.2; } .edu01_wrap04 .depth3 .inner .item2 ul {padding:12px; display: grid; grid-template-columns:repeat(1, 1fr); gap:7px; } .edu01_wrap04 .depth3 .inner .item2 ul li { background:var(--color6);border-radius:5px; padding:12px 10px; line-height:1.2; font-size:0.95em; color:#333; } .edu01_wrap04 .depth3 .inner .item1 .box, .edu01_wrap04 .depth3 .inner .item3 .box {padding:12px ; } .edu01_wrap04 .depth3 .inner .item1 .box2 { background:#f4f4f4; margin-top:5px; font-size:0.9em; line-height:1.3; border-radius:0.5em; overflow:hidden; } .edu01_wrap04 .depth3 .inner .item1 .box2 .txt { background:var(--gray1); padding:7px; color:#fff; } .edu01_wrap04 .depth3 .inner .item1 .box2 ul { padding:6px; display: grid; grid-template-columns:repeat(2, 1fr); gap: 5px; } .edu01_wrap04 .depth3 .inner .item1 .box2 ul li { } @media screen and (max-width:768px) { .edu01_wrap04 {font-size:0.95em; } .edu01_wrap04 .depth1 { padding:20px; } .edu01_wrap04 .depth2 { margin-top:30px; } .edu01_wrap04 .depth2 .top { padding:20px 35px; } .edu01_wrap04 .depth2 .top::before, .edu01_wrap04 .depth2 .top::after { width:24px; border-width:8px; } .edu01_wrap04 .depth2 ul { grid-template-columns:repeat(2, 1fr); gap:0.6em; margin-top:60px; } .edu01_wrap04 .depth2 ul::before { top:-60px; height:70px; } .edu01_wrap04 .depth2 ul li .no { padding:10px; } .edu01_wrap04 .depth3 .inner { gap:0.6em; } .edu01_wrap04 .depth3 .top { line-height:100px;height:90px; } .edu01_wrap04 .depth3 .inner .tit { padding:12px; } .edu01_wrap04 .depth3 .inner .item1 .box, .edu01_wrap04 .depth3 .inner .item3 .box {padding:10px ; } .edu01_wrap04 .depth3 .inner .item2 ul {padding:10px; } } @media screen and (max-width:580px) { .edu01_wrap04 {font-size:0.9em; } .edu01_wrap04 .depth1 { padding:18px 25px; } .edu01_wrap04 .depth3 .inner { grid-template-columns:30% auto 30%; } .edu01_wrap04 .depth3 .inner .item2 ul li { padding: 10px; } } @media screen and (max-width:480px) { .edu01_wrap04 .depth3 .inner { grid-template-columns:1fr; } .edu01_wrap04 .depth3 img { height:20px; margin:0 5px;} } /* 경남형 평생교육 공동교육과정 ======================================*/ /* 성인학습자평생교육 : 스마트제조교육 ======================================*/ .edu02_wrap01 { position:relative; display:flex; flex-direction: column; text-align:center; word-break:keep-all; } .edu02_wrap01 .depth1 {position:relative; border:1px solid var(--color4); padding:10px; border-radius:0.7em; line-height:1.2; } .edu02_wrap01 .depth1 .tit {font-weight:700; color:var(--color4); font-size:1.1em; padding:10px 0 15px 0; } .edu02_wrap01 .depth1 p { padding:10px; color:#fff; background:var(--color4); border-radius:0.5em; margin-bottom:10px;} .edu02_wrap01 .depth1 ul { display: flex; gap:10px; } .edu02_wrap01 .depth1 ul li { position:relative; background:#fff; border:1px solid var(--color4); border-radius:0.5em; padding:8px 10px; font-size:0.9em; } .edu02_wrap01 .depth1 ul li::before { position:absolute;content:''; left:50%; top:-11px; width:1px; height:11px; background:var(--color4); opacity:0.5; z-index:-1;} .edu02_wrap01 .arrow1 {position:relative; width:100%;height:100px; padding-top:20px; color:var(--color1); font-weight:600; font-size:0.9em; } .edu02_wrap01 .arrow1::before {position:absolute; content:''; left:0; top:0; width:100%; height:100%; background:url('../img/sub/arrow01.png') no-repeat center 0; background-size:auto 70px; z-index:-1; transform:rotate(180deg);} .edu02_wrap01 .depth2 { position:relative; padding:20px 0; margin-bottom:60px; } .edu02_wrap01 .depth3 {position:relative; } .edu02_wrap01 .depth3 .box {position:relative; background:var(--color4);padding:10px; border-radius:0.7em; line-height:1.2; } .edu02_wrap01 .depth3 .tit {font-weight:700; color:#fff; font-size:1.1em; padding:10px 0 15px 0; } .edu02_wrap01 .depth3 p { padding:10px; color:#fff; background:var(--color4); border-radius:0.5em; margin-bottom:10px;} .edu02_wrap01 .depth3 ul { display: flex; gap:10px; } .edu02_wrap01 .depth3 ul li { position:relative; background:#fff; border-radius:0.5em; padding: 10px; font-size:0.9em; } .edu02_wrap01 .depth3::before {position:absolute; content:''; left:0; top:-60px; width:100%; height:60px; background:url('../img/sub/arrow01.png') no-repeat center 50%; background-size:auto 60px; z-index:-1; } @media screen and (max-width:768px) { .edu02_wrap01 .depth1 { padding:6px; } .edu02_wrap01 .depth1 .tit { font-size:1.05em; padding:5px 0 10px 0; } .edu02_wrap01 .depth1 p { padding:8px; margin-bottom:8px;} .edu02_wrap01 .depth1 ul { display: grid; grid-template-columns:repeat(3, 1fr); gap:6px; } .edu02_wrap01 .depth1 ul li::before {display:none; } .edu02_wrap01 .depth3 .box { padding:6px; } .edu02_wrap01 .depth3 .tit { font-size:1.05em; padding:5px 0 10px 0; } .edu02_wrap01 .depth3 ul {display: grid; grid-template-columns:repeat(3, 1fr); gap:6px; } } @media screen and (max-width:580px) { .edu02_wrap01 .depth1 ul { grid-template-columns:repeat(2, 1fr); } .edu02_wrap01 .depth3 ul { grid-template-columns:repeat(1, 1fr); } } /* 성인학습자평생교육 : 스마트제조교육 ======================================*/ /* 성인학습자평생교육 : 제조DX 교육 ======================================*/ .edu02_wrap02 { position:relative; text-align:center; margin-bottom:50px ; padding-top:30px; } .edu02_wrap02 .depth1 {position:relative; display: flex; flex-direction: column; justify-content:center; align-items:center; border-radius:200px; font-weight:600; border:3px solid var(--color6);max-width:700px; margin:auto; margin-bottom:40px; } .edu02_wrap02 .depth1 .txt01 {position:relative; top:-30px; max-width:400px; width:100%; padding:14px; color:#fff; background:var(--color4); border-radius:50px; font-size:1.1em; font-weight:600; } .edu02_wrap02 .depth1 .txt02 {position:relative; top:-10px; padding-bottom:15px; } .edu02_wrap02 .depth1 .txt02 p {font-weight:600;color:#111; } .edu02_wrap02 .depth1 .txt02 span {font-size:0.95em; } .edu02_wrap02 .depth2 {position:relative; } .edu02_wrap02 .depth2 .item1 {position:relative; padding:20px; color:#fff; background:var(--color1); border-radius:50px; font-size:1.1em; font-weight:600; } .edu02_wrap02 .depth2 .item1 span { display:block; color:var(--point1); font-weight:600; } .edu02_wrap02 .depth2 .item2 {position:relative; background:url('../img/sub/arrow01.png') no-repeat center 0; background-size:auto 80px; padding-top:70px; margin-top:10px; } .edu02_wrap02 .depth2 .item2 ul {position:relative; display: grid; grid-template-columns:repeat(3, 1fr); gap:1em; } .edu02_wrap02 .depth2 .item2 ul>li {border:1px solid #ddd; border-radius:10px; overflow:hidden; display: flex; flex-direction: column; align-items:center; } .edu02_wrap02 .depth2 .item2 ul>li p { background:var(--color4); color:#fff; padding:15px; width:100%; line-height:1.2; } .edu02_wrap02 .depth2 .item2 ul>li>ol {text-align:left; padding: 15px 10px; font-size:0.95em;} .edu02_wrap02 .depth2 .item3 {position:relative; display: grid; grid-template-columns:repeat(3, 1fr); gap:1em; margin-top:20px; padding-bottom:30px; } .edu02_wrap02 .depth2 .item3 li {position:relative; background:var(--color1); color:#fff; padding:15px; border-radius:40px; line-height:1.2; } .edu02_wrap02 .depth2 .item3 li::before {position:absolute; content:''; left:0; bottom:-30px; width:100%; height:30px; background:url('../img/sub/arrow02.png') no-repeat center 0; transform:rotate(180deg);} .edu02_wrap02 .depth2 .item4 {position:relative; display: grid; grid-template-columns:repeat(3, 1fr); gap:1em; } .edu02_wrap02 .depth2 .item4 li {position:relative; background:var(--color7); color:#fff; padding:15px; border-radius:40px; line-height:1.2; } .edu02_wrap02 .depth3 {position:relative; padding-top:85px; } .edu02_wrap02 .depth3::before { position:absolute; content:''; left:0; top:0; width:100%; height:80px; background:url('../img/sub/arrow01.png') no-repeat center 0; background-size:auto 80px; transform:rotate(180deg);} .edu02_wrap02 .depth3 ul {position:relative; display: grid; grid-template-columns:repeat(3, 1fr); gap:1em; border:1px solid #ddd; border-radius:0.7em; padding:30px; background:#f7f7f7; } .edu02_wrap02 .depth3 ul li {position:relative; } .edu02_wrap02 .depth3 ul li figure {position:relative; width:180px; aspect-ratio:1/1; border-radius:50%; background:#fff; margin:auto; overflow:hidden; } .edu02_wrap02 .depth3 ul li p {position:relative; color:#111; font-weight:600; margin-top:15px; line-height:1.3; } @media screen and (max-width:768px) { .edu02_wrap02 { margin-bottom:40px ; padding-top:20px; } .edu02_wrap02 .depth1 { border-radius:200px; font-weight:600; margin-bottom:25px; } .edu02_wrap02 .depth1 .txt01 { top:-23px; padding:10px; font-size:1.05em; } .edu02_wrap02 .depth1 .txt02 { top:-10px; padding-bottom:10px; } .edu02_wrap02 .depth2 .item1 { padding:15px; font-size:1.05em; } .edu02_wrap02 .depth2 .item2 { background-size:auto 55px; padding-top:45px; margin-top:3px; } .edu02_wrap02 .depth2 .item2 ul>li p { padding:12px; } .edu02_wrap02 .depth2 .item3 { padding-bottom:20px; } .edu02_wrap02 .depth3::before { height:55px; background-size:auto 55px; } .edu02_wrap02 .depth2 .item3 li { padding:12px; } .edu02_wrap02 .depth2 .item3 li::before { bottom:-20px; height:20px; background-size:auto 20px; } .edu02_wrap02 .depth2 .item4 li {padding:12px; } .edu02_wrap02 .depth3 { padding-top:55px; } .edu02_wrap02 .depth3 ul { padding:20px; } .edu02_wrap02 .depth3 ul li figure { width:140px; } } @media screen and (max-width:580px) { .edu02_wrap02 { font-size:0.9em; } .edu02_wrap02 .depth1 { border-radius:15px; border-width:2px; } .edu02_wrap02 .depth1 .txt01 { max-width:260px;} .edu02_wrap02 .depth2 .item1 { border-radius:15px; line-height:1.3;} .edu02_wrap02 .depth2 .item3 li, .edu02_wrap02 .depth2 .item4 li {border-radius:10px; padding:10px; } .edu02_wrap02 .depth2 .item2 ul, .edu02_wrap02 .depth2 .item3, .edu02_wrap02 .depth2 .item4 { gap:0.6em; } .edu02_wrap02 .depth2 .item2 ul>li>ol { padding: 10px; } .edu02_wrap02 .depth3 ul { gap:0.6em; padding:20px 15px; } .edu02_wrap02 .depth3 ul li figure { width:90px; } } /* 성인학습자평생교육 : 제조DX 교육 ======================================*/ /* 성인학습자평생교육 : 코딩하우스 ======================================*/ .edu02_wrap03 { position:relative; text-align:center; margin-top:20px;margin-bottom:40px; border:1px solid #ddd;padding:20px;border-radius:0.7em; } .edu02_wrap03 .tit {position:relative; background:var(--color2); padding:12px; color:#fff; font-weight:bold; border-radius:2em; margin-bottom:15px; } .edu02_wrap03 .depth1 {position:relative; display: grid; grid-template-columns:repeat(3, 1fr); gap:1em; font-size:0.95em;} .edu02_wrap03 .arrow {position:relative; width:100%; height:60px; background:url('../img/sub/arrow01.png') no-repeat center 50%; background-size:auto 50px; transform:rotate(180deg);} .edu02_wrap03 .depth1 li {position:relative; border:1px solid #ddd; padding:10px ; border-radius:0.5em; } .edu02_wrap03 .depth1 li p {position:relative; background:var(--color1); padding:10px; color:#fff; font-weight:600;border-radius:0.5em; } .edu02_wrap03 .depth1 li div {padding:8px; } .edu02_wrap03 .depth2 {position:relative; display: grid; grid-template-columns:repeat(2, 1fr); gap:1em; font-size:0.95em;} .edu02_wrap03 .depth2 li {position:relative; border:1px solid #ddd; padding:10px ; border-radius:0.5em;background:#f5f5f5; } .edu02_wrap03 .depth2 li p {position:relative; background:var(--color1); padding:10px; color:#fff; font-weight:600;border-radius:0.5em; } .edu02_wrap03 .depth2 li div {padding:8px; } @media screen and (max-width:768px) { .edu02_wrap03 { margin-bottom:30px; padding:15px; } .edu02_wrap03 .tit { padding:10px; } .edu02_wrap03 .depth1, .edu02_wrap03 .depth2 { gap:0.7em; } .edu02_wrap03 .depth1 li p, .edu02_wrap03 .depth2 li p { padding:8px; } } @media screen and (max-width:580px) { .edu02_wrap03 { padding:10px; } .edu02_wrap03 .depth1, .edu02_wrap03 .depth2 { grid-template-columns:repeat(1, 1fr); } .edu02_wrap03 .depth1 li, .edu02_wrap03 .depth2 li {padding:8px; } .edu02_wrap03 .arrow { height:50px; background-size:auto 40px; } } .edu02_wrap04 { position:relative; text-align:center; margin-bottom:20px; } .edu02_wrap04 .depth1 {position:relative;} .edu02_wrap04 .depth1 .item1 {position:relative; display: flex; gap:4px; margin-left:calc(12% + 4px); margin-right:4px; } .edu02_wrap04 .depth1 .item1 li:first-child { flex:1; } .edu02_wrap04 .depth1 .item1 li:nth-child(2) { flex:4; } .edu02_wrap04 .depth1 .item1 li:nth-child(3) { flex:1; } .edu02_wrap04 .depth1 .item1 li {position:relative; display:inline-block; font-size:0.9em; font-weight:bold; color:#111; } .edu02_wrap04 .depth1 .item1 li:nth-child(2)::before {position:absolute; content:''; left:0; top:30%; width:100%; height:55%; background:var(--gra1); background-size:200%; opacity:0.6; z-index:-2; } .edu02_wrap04 .depth1 .item1 li:nth-child(2)::after {position:absolute; content:''; left:calc(50% - 30px); top:30%; width:60px; height:55%; background:#fff; z-index:-1; } .edu02_wrap04 .depth1 .item1 li:nth-child(3)::before {position:absolute; content:''; left:0; top:30%; width:100%; height:55%; border:2px solid var(--color4); border-bottom:0; opacity:0.6; z-index:-1; } .edu02_wrap04 .depth1 .item1 li span { display:inline-block; background:#fff; padding:0 15px; z-index:11;font-weight:bold; } .edu02_wrap04 .depth1 .item2 {position:relative; display: flex;gap:4px; margin-left:calc(12% + 4px); margin-top:5px; margin-right:4px; background:var(--gra2); } .edu02_wrap04 .depth1 .item2 span {position:relative; flex:1; display:inline-block; background:url('../img/sub/arrow04.png') no-repeat right 0 ; height:20px; width:100%; } .edu02_wrap04 .depth1 .item2 span:nth-child(3) { flex:2; } .edu02_wrap04 .depth1 .item2 span:last-child {background:url('../img/sub/arrow05.png') no-repeat right 0 ;} .edu02_wrap04 .depth2 {position:relative;width:100%; word-break:keep-all; } .edu02_wrap04 .depth2 table {position:relative; border:2px solid #fff; font-size:0.9em; border-collapse:collapse; width:100%; table-layout:fixed; line-height:1.1; } .edu02_wrap04 .depth2 table th {background:#8497b0; color:#fff; padding:10px; border:4px solid #fff; width:12%; } .edu02_wrap04 .depth2 table td { border:4px solid #fff; vertical-align:top; word-break:keep-all; } .edu02_wrap04 .depth2 table .tit1 {background:var(--color2); color:#fff; font-weight:bold;padding:15px 10px; vertical-align:middle;} .edu02_wrap04 .depth2 table .tit2 {background:var(--color4); color:#fff; font-weight:bold;padding:15px 10px; vertical-align:middle;} .edu02_wrap04 .depth2 table .tit3 {background:#0e59c9; color:#fff; font-weight:bold;padding:15px 10px; vertical-align:middle;} .edu02_wrap04 .depth2 table .tit4 {background:#003ea5; color:#fff; font-weight:bold;padding:15px 10px; vertical-align:middle;} .edu02_wrap04 .depth2 table .tit5 {background:var(--color1); color:#fff; font-weight:bold;padding:15px 10px; vertical-align:middle;} .edu02_wrap04 .depth2 .item1 {position:relative;display: flex; flex-direction: column;gap:25px; } .edu02_wrap04 .depth2 .item1 li { position:relative; padding:6px; padding-top:10px; border:1px solid #ddd; font-size:0.95em; min-height:50px;display: flex; flex-direction: column; justify-content:center; } .edu02_wrap04 .depth2 .arrow::before { position:absolute; content:''; left:0; bottom:-23px; width:100%; height:18px; background:url('../img/sub/arrow02.png') no-repeat center 50%; background-size:auto 15px; transform:rotate(180deg);} .edu02_wrap04 .depth2 .item1 li span { display:block; margin-top:5px; background:var(--color2); color:#fff; padding:8px; font-size:0.9em; } .edu02_wrap04 .depth2 .item2 {position:relative;display: flex; flex-direction: column;gap:6px; } .edu02_wrap04 .depth2 .item2 + .item2 {margin-top:3px;} .edu02_wrap04 .depth2 .item2 li { position:relative; font-size:0.95em; min-height:50px;display: flex; flex-direction: column; justify-content:center; } .edu02_wrap04 .depth2 .item2 li p { padding:10px 6px; background:var(--color4); color:#fff; } .edu02_wrap04 .depth2 .item2 li div { padding:10px 6px; border:1px solid #ddd; display: flex; flex-direction: column; gap:6px; } .edu02_wrap04 .depth2 .item2 li div span { display:block; } .edu02_wrap04 .depth2 .item3 {position:relative;display: grid; grid-template-columns:repeat(2, 1fr); gap:3px; } .edu02_wrap04 .depth2 .item3 li { position:relative; border:1px solid #ddd; padding:12px 6px; font-size:0.9em; display: flex; flex-direction: column; justify-content:center; } .edu02_wrap04 .depth2 .item4 {position:relative;display: flex; flex-direction: column;gap:3px; background:var(--color5); padding:6px; } .edu02_wrap04 .depth2 .item4 li { position:relative;background:#fff; border:1px solid #ddd; padding:12px 6px; font-size:0.9em; display: flex; flex-direction: column; justify-content:center; font-weight:600; } .edu02_wrap04 .depth2 .item4_txt { margin-top:25px; border:2px solid var(--color4); padding:12px 6px; color:var(--color4);font-weight:600; font-size:0.9em; } .edu02_wrap04 .depth2 .item5 {position:relative;display: flex; flex-direction: column;gap:2px; } .edu02_wrap04 .depth2 .item5 li { position:relative; padding:6px; padding-top:10px; border:1px solid #ddd; font-size:0.95em; min-height:50px;display: flex; justify-content:center; align-items:center; } .edu02_wrap04 .depth2 .item6 {position:relative;display: flex; flex-direction: column; gap:3px; } .edu02_wrap04 .depth2 .item6 p { padding:9px 6px; color:var(--color4); border:1px solid var(--color4); font-weight:600; } .edu02_wrap04 .depth2 .item6 div { display: grid; grid-template-columns:repeat(3, 1fr); gap:3px; } .edu02_wrap04 .depth2 .item6 div span { display:block;padding:10px 10px; border:1px solid #ddd; display: grid; align-items:center; } .edu02_wrap04 .depth2 .item7 {position:relative; display: grid; grid-template-columns:repeat(6, 1fr); gap:4px; background:var(--color1); padding:5px; } .edu02_wrap04 .depth2 .item7 li { position:relative; border:1px solid #ddd; padding: 10px; font-size:0.95em; background:#fff; display: grid; align-items:center; } /* 성인학습자평생교육 : 코딩하우스 ======================================*/ /* 실전창업 교육과정 = ========================================================== */ .edu06_wrap01 {position:relative; text-align:center; display: grid;grid-template-columns:repeat(3, 1fr); gap:2em; } .edu06_wrap01>li {position:relative; } .edu06_wrap01>li:after {position:absolute; content:'';top:calc(80px - 30px); right:-2em;width:2em; height:60px;background:url('../img/sub/arrow03.png') no-repeat ; z-index:-1;} .edu06_wrap01>li:last-child:after {display:none;} .edu06_wrap01>li:before {position:absolute; content:'';bottom:0; left:0;width:100%; height:calc(100% - 220px); border:1px solid #ddd; border-radius:1em; box-shadow: 2px 0 12px 0 rgba(0,0,0,0.1); } .edu06_wrap01 li .tit {position:relative; display:inline-block; font-weight:700; width:180px;height:180px;color:var(--color4);border:6px solid var(--color4); border-radius:100px; display: flex; flex-direction: column; justify-content:center; margin:auto; margin-bottom:40px; font-size:1.05em; padding-bottom:15px; line-height:1.1; } .edu06_wrap01 li .tit:before {position:absolute; content:'';bottom:-60px; left:50%;width:1px; height:60px;background:#d0d0d0; z-index:-1;} .edu06_wrap01 li .tit .no { padding-bottom:5px;font-size:1.1em;font-weight:700; } .edu06_wrap01 li .txt {position:relative; display: flex; align-items:center;flex-direction: column; overflow:hidden; } .edu06_wrap01 li .txt p {position:relative; width:100%; background:var(--color4); color:#fff;line-height:1.2; padding:17px 15px; border-radius:1em 1em 0 0; } .edu06_wrap01 li ol {padding:15px 10px; } .edu06_wrap01 li ol li {position:relative; padding:0 0 5px 0; line-height:1.3;} .edu06_wrap01 li ol li:after {position:absolute; content:''; display:none; left:0; top:10px; width:3px; height:3px; background:#888; } .edu06_wrap01 li:nth-child(2) .tit {color:var(--color1); border-color:var(--color1); } .edu06_wrap01 li:nth-child(3) .tit {color:var(--color8); border-color:var(--color8); } .edu06_wrap01 li:nth-child(2) .txt p {background:var(--color1); } .edu06_wrap01 li:nth-child(3) .txt p {background:var(--color8); } .edu06_wrap01 li:nth-child(2) .tit:after { border:1px solid var(--color1); } .edu06_wrap01 li:nth-child(3) .tit:after { border:1px solid var(--color8); } @media screen and (max-width:1200px) { .edu06_wrap01 {gap:1em; } } @media screen and (max-width:1024px) { .edu06_wrap01 li .tit { width:150px;height:150px; border-width:5px; } .edu06_wrap01 li .tit .no { padding-bottom:0; } .edu06_wrap01>li:after { top:calc(80px - 25px); right:-1.3em;width:1.3em; height:60px;background-size:100% auto; } .edu06_wrap01 li .tit img {width:60px;} } @media screen and (max-width:768px) { .edu06_wrap01 { grid-template-columns:1fr ; gap:30px; } .edu06_wrap01>li { display: grid;grid-template-columns:130px auto ; gap:30px; } .edu06_wrap01>li:after {position:absolute; content:'';top:initial; right:initial;left:0; bottom:-25px; width:130px; height:20px; background:url('../img/sub/arrow02.png') no-repeat center 0; background-size:auto 18px ; transform: rotate(180deg); } .edu06_wrap01>li:before {display:none; } .edu06_wrap01 li .tit { width:130px; height:130px; margin: 0; } .edu06_wrap01 li .tit:before {bottom:50%; left:initial;right:-40px;width:40px; height:1px; z-index:-1; } .edu06_wrap01 li .tit img {width:50px;} .edu06_wrap01 li .txt {border:1px solid #ddd; border-radius:15px; background:#fff; box-shadow: 2px 0 12px 0 rgba(0,0,0,0.1); } .edu06_wrap01 li .txt p { padding:12px;border-radius:10px 10px 0 0; } } @media screen and (max-width:580px) { .edu06_wrap01>li {grid-template-columns:110px auto ; gap:20px; font-size:0.95em; } .edu06_wrap01 li:after { width:110px; } .edu06_wrap01 li .tit { width:110px; height:110px; border-width:4px; font-size:1em; } .edu06_wrap01 li ol {padding:10px; } } /* 실전창업 교육과정 = ========================================================== */ /* 창업동아리 = ========================================================== */ .edu07_wrap01 {position:relative; } .edu07_wrap01 .item01 {position:relative;display: grid; grid-template-columns: repeat(5, 1fr); border:1px solid #ddd; padding:30px 0; box-shadow: 2px 0 12px 0 rgba(0,0,0,0.1); border-radius:0.7em; } .edu07_wrap01 .item01 li {position:relative; padding:0 18px; } .edu07_wrap01 .item01 li:not(:first-of-type)::before {position:absolute; content:''; left:-20px;top:0; width:40px; height:100px; background:url('../img/sub/arrow03.png') no-repeat center 50%; background-size: auto 40px; z-index:1;} .edu07_wrap01 .item01 li:not(:first-of-type)::after {position:absolute; content:''; left:0;top:0; width:1px; height:100%; border-left:1px dashed #ddd; z-index:1;} .edu07_wrap01 .item01 .img {position:relative; width:100px;height:100px; background:#f5f5f5; text-align:center; border-radius:50%; margin:auto; display: flex; flex-direction: column; justify-content:center; align-items:center; } .edu07_wrap01 .item01 .tit {position:relative; color:var(--color1); font-weight:bold; text-align:center; margin:15px 0 20px 0; } .edu07_wrap01 .item01 .txt {position:relative; } .edu07_wrap01 .item01 .txt p {position:relative;font-size:0.9em;padding:0 0 8px 10px; line-height:1.3; letter-spacing:-1px; } .edu07_wrap01 .item01 .txt p:before {position:absolute; content:''; left:0; top:7px; width:3px; height:3px; background:var(--color1); border-radius:50%;} .edu07_wrap01 .item02 {position:relative;margin-top:50px;padding:0 0 30px 0; background:var(--color5);border:1px solid #ddd; display: flex; align-items:center;flex-direction: column; border-radius:0.7em; box-shadow: 2px 0 12px 0 rgba(0,0,0,0.1); } .edu07_wrap01 .item02 .tit {position:relative;top:-23px;background:var(--color1); padding:10px 50px; color:#fff; text-align:center;margin:auto;border-radius:40px; } @media screen and (max-width:1200px) { .edu07_wrap01 .item01 { padding:25px 5px; } .edu07_wrap01 .item01 li { padding:0 18px; } .edu07_wrap01 .item01 .img { width:90px;height:90px; } .edu07_wrap01 .item01 li:not(:first-of-type)::before { background-size: auto 36px; } } @media screen and (max-width:768px) { .edu07_wrap01 .item01 { grid-template-columns: repeat(1, 1fr); gap:40px; padding:0 ; border:0; box-shadow:0 0 0 0; } .edu07_wrap01 .item01 li { display: grid; grid-template-columns: 80px auto; gap:30px; padding:20px ; border:1px solid #ddd; box-shadow: 2px 0 12px 0 rgba(0,0,0,0.1); border-radius:0.7em; } .edu07_wrap01 .item01 li:not(:first-of-type)::before { left:0; top:-35px; width:100%; height:30px; background:url('../img/sub/arrow02.png') no-repeat center 50%; background-size: auto 20px; transform: rotate(180deg); } .edu07_wrap01 .item01 li:not(:first-of-type)::after {display:none;} .edu07_wrap01 .item01 .img { width:80px;height:80px; } .edu07_wrap01 .item01 .cont { text-align:left; } .edu07_wrap01 .item01 .tit { text-align:left;margin:0 0 15px 0; font-size:1.05em; } } .edu07_wrap02 {position:relative; max-width:900px;padding-top:70px ;text-align:center; margin:auto; } .edu07_wrap02::before {position:absolute; content:'';left:0;top:0;width:100%; height:70px; background:url('../img/sub/arrow01.png') no-repeat center 0; transform: rotate(180deg); background-size:auto 100%;} .edu07_wrap02 .item01 {position:relative;width:200px; line-height:50px;background:var(--color8);color:#fff; border-radius:30px;margin:0 auto 50px auto; } .edu07_wrap02 .item01:before {position:absolute; content:''; bottom:-147px;left:50%; width:1px; height:150px;background:#d0d0d0;z-index: -1; } .edu07_wrap02 ul {position:relative;padding:15px; border-radius:150px;display: grid; grid-template-columns:160px auto 160px; } .edu07_wrap02 ul::before {position:absolute; content:''; width:100%; height:100%;background:#e6eaee; border-radius:150px; border:1px dashed var(--color1); opacity:0.4; z-index:-2;} .edu07_wrap02 ul li:first-child {position:relative; width:160px;height:160px;text-align:center; background:var(--color4);color:#fff; border-radius:100px; display: flex; flex-direction: column; justify-content:center; align-items:center; } .edu07_wrap02 ul li:last-child {position:relative; width:160px;height:160px;text-align:center; background:var(--color1);color:#fff; border-radius:100px; display: flex; flex-direction: column; justify-content:center; align-items:center; } .edu07_wrap02 ul li p { } .edu07_wrap02 ul li:first-child:after {position:absolute; content:''; top:calc(50% - 10px);right:-11px; width:0px;height:0px;border-top:11px solid transparent;border-bottom:11px solid transparent;border-right:11px solid var(--color4);} .edu07_wrap02 ul li:last-child:after {position:absolute; content:''; top:calc(50% - 10px);left:-11px; width:0px;height:0px;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:11px solid var(--color1);} .edu07_wrap02 ul :before {position:absolute; content:''; top:50%;left:100px; width:calc(100% - 200px);height:1px; background:#d0d0d0;z-index: -1;} .edu07_wrap02 ul li .txt01 {padding:40px 0 0 0;font-weight:500;} .edu07_wrap02 ul li .txt02 {padding:30px 0 0 0;font-weight:500;} @media screen and (max-width:580px) { .edu07_wrap02 {font-size:0.95em; padding-top:60px ; } .edu07_wrap02::before { height:60px; } .edu07_wrap02 .item01:before { bottom:-112px; height:120px; } .edu07_wrap02 ul {padding:5px; display: grid; grid-template-columns:110px auto 110px; line-height:1.25;} .edu07_wrap02 ul li:first-child, .edu07_wrap02 ul li:last-child {width:110px;height:110px;} .edu07_wrap02 ul li .txt01 {padding:25px 0 0 0; font-size:0.9em; } .edu07_wrap02 ul li .txt02 {padding:30px 0 0 0; font-size:0.9em; } } /* 창업동아리 = ========================================================== */ /* RISE 마일리지 = ========================================================== */ .edu08_wrap01 {position:relative; } .edu08_wrap01 .item01 {position:relative; display: grid; grid-template-columns: repeat(2, 1fr); text-align:center; margin-bottom:15px; border-radius:0.5em ; overflow:hidden; } .edu08_wrap01 .item01 div {position:relative; padding:15px; background:var(--color1); color:#fff; font-weight:600; } .edu08_wrap01 .item01 div:last-child {border-left:1px solid rgb(255,255,255,0.2); } .edu08_wrap01 .item02 {position:relative; display: grid; grid-template-columns: repeat(1, 1fr); gap:40px; } .edu08_wrap01 .item02 li {position:relative; display: grid; grid-template-columns:repeat(2, 1fr); border:1px solid #ddd; border-radius:0.5em ; } .edu08_wrap01 .item02 li:not(:last-of-type)::before { position:absolute; content:''; left:0; bottom:-32px; width:100%; height:25px; background:url('../img/sub/arrow02.png') no-repeat center 0; background-size:auto 100% ; transform:rotate(180deg);} .edu08_wrap01 .item02 li .box {position:relative;display: flex; text-align:center; } .edu08_wrap01 .item02 li .txt01 {position:relative; width:30%; background:var(--color4); color:#fff; margin:15px 0 15px 15px;padding:15px 5px; border-radius:0.4em ; display: flex; flex-direction: column; justify-content:center; } .edu08_wrap01 .item02 li .txt02 { position:relative;flex:2; padding:20px 25px; display: flex; flex-direction: column; justify-content:center; } .edu08_wrap01 .item02 li .txt03 { position:relative;padding:20px 25px; border-left:1px dashed rgb(0,0,0,0.12); display: flex; flex-direction: column; justify-content:center; } .edu_btn_wrap01 { position:relative; margin-top:8px;} .edu_btn_wrap01 p { display:inline-block; margin-right:10px;} @media screen and (max-width:768px) { .edu08_wrap01 .item01 div { padding:13px; } .edu08_wrap01 .item02 { gap:30px; } .edu08_wrap01 .item02 li:not(:last-of-type)::before { bottom:-25px; height:20px; } .edu08_wrap01 .item02 li .box { display:block; } .edu08_wrap01 .item02 li .txt01 { margin:15px 0 0 0; padding:7px; display:inline-block !important;justify-content:initial; min-width:100px; } .edu08_wrap01 .item02 li .txt02 { padding:15px; line-height:1.3; } .edu08_wrap01 .item02 li .txt03 { padding:15px; } } /* 창업동아리 = ========================================================== */