/* 서브 디자인 관련 ===================================================================================== */ h4 {position:relative;font-family: 'S-CoreDream-6Bold'; padding:17px 0 30px 0; font-size:1.37em; color:#000; letter-spacing:-1.5px; } /* 본문 큰제목 */ h4 b {position:relative; display:inline-block;font-family: 'S-CoreDream-6Bold';} h4 b:after {position:absolute; content:''; top:-17px; left:calc(50% - 3px);width:6px; height:6px; background:#008add; border-radius:5px; } h4 .h4_s {font-size:1rem;color:#888; } /*h4:before {position:absolute; content:''; top:0; left:0;width:40px; height:4px; background:#008add; border-radius:0px; } h4:after {position:absolute; content:''; top:0; left:30px;width:6px; height:6px; background:#008add; border-radius:5px; }*/ /* h4:after {position:absolute; top:0; left:0; content:''; width:25px; height:3px; background:#008add; } */ h5 {position:relative; padding:0 0 18px 20px;font-size:1.2em;color:#000; font-weight:600; } /* 본문 두번째 제목 */ h5:after {position:absolute; content:''; top:5px; left:0;width:8px; height:8px; border:4px solid #008add; border-radius:10px; } .sub_cont01 h6 {position:relative;display:block; text-align:left;padding:0 0 18px 0; font-size:1.1em; letter-spacing:-1px; color:#008add;font-weight:700; } /* .sub_cont01 h6:after {position:absolute; content:''; top:9px; left:4px;width:6px; height:6px; background:#008add; border-radius:5px; } */ .sub_txtline {font-weight:700; box-shadow: inset 0 -10px 0 #ddecff; padding:0 3px; color:#333;} .sub_txtline02 {font-size:1.15em;font-weight:500;font-weight:700; box-shadow: inset 0 -10px 0 #ddecff; padding:0 3px; color:#333;} .sub_img {border:1px solid #ddd;padding:30px;text-align:center; border-radius:15px; } .sub_img img {max-width:100%;} .sub_cont01 {position:relative; text-align:justify;padding:0 0 60px 0;} .sub_cont02 {position:relative; text-align:justify;padding:0 0 40px 0;} .sub_cont_box01 {border:1px solid #ddd;padding:25px;background:#f5f5f5;} .sub_cont_box01_tit { color:#008add; font-weight:500;font-size:1.1em;letter-spacing:-1px;margin:0 0 15px 0;} .sub_topbox {position:relative; font-size:1.05em;line-height:1.6;color:#333; padding:22px 50px; letter-spacing:-1px;margin:0 0 80px 0 ;} .sub_topbox:before {position:absolute;content:''; top:0; left:0; width:33px; height:100%;border:10px solid #008add;border-right:0; } .sub_topbox:after {position:absolute;content:''; top:0; right:0; width:33px; height:100%; border:10px solid #008add;border-left:0; } .sub_topbox .tit { color:#043278; font-weight:700;font-size:1.6rem;letter-spacing:-1px;padding:10px 0 15px 0;} .sub_topbox .tit b {font-weight:700;} @media screen and (max-width:1024px) { .sub_topbox .tit { font-size:1.4rem;padding:10px 0; } .sub_topbox { padding:15px 40px; margin:0 0 70px 0 ;} .sub_topbox:before { width:30px; border:8px solid #008add;border-right:0; } .sub_topbox:after { width:30px; border:8px solid #008add; border-left:0; } } .sub_list01 {position:relative; list-style:none; padding:0 0 12px 23px; line-height:150%;letter-spacing:-0.75px;background:url('../image/common/icon02.png') no-repeat 5px 6px;} .sub_list01 a {color:#008add;} .sub_list02 {position:relative; list-style:none; padding:4px 0 4px 17px;} .sub_list02:after {position:absolute; content:''; display:block; left:5px; top:14px; width:4px; height:4px; background:#008add; border-radius:5px;} .sub_list03 {position:relative; padding:0 0 5px 13px; } .sub_list03:after {position:absolute; content:''; display:block; left:0; top:10px; width:5px; height:1px; background:#777;} .dot_line01 {background: url("../image/common/dot_line02.gif") repeat-x left 35px; height:70px;} .dot_line02 {background: url("../image/common/dot_line01.gif") repeat-x left 25px; height:50px;} .dot_line04 {background: url("../image/common/dot_line04.png") no-repeat left 0; height:40px;} .sub_cont_question {background:url(../image/common/sub_cont_icon01.png) no-repeat 0 0;padding:0 0 7px 40px;} .sub_title_txt01 {font-size:27px;color:#008add; letter-spacing:-0.05em; line-height:110%; } .sub_title_txt02 {font-size:1.1em;color:#23b400; letter-spacing:-0.05em;line-height:120%;} .sub_title_txt03 {font-size:1.05em;color:#e85814;padding:0 0 8px 0;font-weight:bold; letter-spacing:-1px; } .sub_title_txt04 {font-size:1em;color:#3386f5;padding:0 0 8px 0;font-weight:bold; letter-spacing:-1px;} .sub_title_txt05 {font-size:0.9em;color:#555;letter-spacing:-1px; } /* 동영상 ================================================================================== */ .video_container { position: relative;height: 0;overflow: hidden;padding-bottom: 56.25%; /* 16:9 비율에 맞게 조정 */} .video_container iframe, .video_container object, .video_container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%; } /* 동영상 ================================================================================== */ /* 인사말 ================================================================================== */ .greeting_wrap {position:relative; /*display: grid; grid-template-columns:40% auto; gap:45px;*/ } .greeting_img {position:relative; } .greeting_summary {position:relative;text-align:center; background:url('../image/sub/int01.jpg') no-repeat center 0;background-size:cover; margin-bottom:30px; transition:all 0.5s ease; } .greeting_summary .txt {font-family: 'S-CoreDream-4Regular'; color:#fff;padding:70px 50px;font-size:1.7em;letter-spacing:-2px;line-height:1.5;transition:all 0.5s ease; } .greeting_summary .txt span { display:block;font-family: 'S-CoreDream-5Medium'; font-size:1.3em;letter-spacing:-2px; line-height:1.3; padding:0 0 20px 0;transition:all 0.5s ease; } .greeting_cont { line-height:1.6;} .greeting_cont .inner p {line-height:1.6;font-size:1.05em;padding:15px 0;} .greeting_ceo {padding:60px 0 0 0;font-size:1.1em; font-weight: 500; line-height:1.6;color:#555;} .greeting_ceo p {display:inline-block; font-size:1em; font-weight: 500; color:#000;padding:10px 30px 0 0; } .greeting_ceo p span {font-size:1.25em; font-weight: 600; color:#000; } @media screen and (max-width:1250px) { .greeting_summary .txt { padding: 50px;font-size:1.6em; } } @media screen and (max-width:1024px) { .greeting_summary .txt { font-size:1.5em; } } @media screen and (max-width:800px) { .greeting_summary {margin-bottom:20px;} .greeting_summary .txt { padding: 40px ; font-size:1.3em; } .greeting_summary .txt span { padding:0 0 15px 0; } .greeting_img {max-width:600px;margin:auto;min-height:500px; } .greeting_cont .inner p {font-size:1em;} .greeting_ceo {font-size:1em;} } @media screen and (max-width:600px) { .greeting_summary .txt { padding: 30px ; font-size:1.2em; } } /* 인사말 ================================================================================== */ /* 조직도 ================================================================================== */ .chart_wrap {position:relative; padding:30px 0 0 0; max-width:700px;width:100%;margin:auto;text-align:center; background:url('../image/sub/chart_bg.png') no-repeat center 0; margin-bottom:70px;} .chart_wrap:after {content:''; display:block; position:absolute; left:50%; top:60px; width:1px; height:330px; background:#d0d0d0; z-index:-1; } /* 세로라인 */ .chart_wrap .depth1 {position:relative; text-align:center;margin: 0 0 50px 0 ; } .chart_wrap .depth1 p {position:relative;text-align:center; width:200px;height:200px;font-weight:500; color:#fff;font-size:1.1em; letter-spacing:-1px; border-radius:50%;background:#043278; margin: auto; display: flex; align-items:center;justify-content: center; border:8px solid #cce8f8;} .chart_wrap .depth2 {position:relative; text-align:center; margin: 0 0 40px 0 ; } .chart_wrap .depth2 p {position:relative; left:30%; display:inline-block; text-align:center; width:250px; padding:17px;font-weight:500; color:#fff;font-size:1.05em; letter-spacing:-1px; border-radius:50px;background:#3c4347; } .chart_wrap .depth2:after {content:''; display:block; position:absolute; left:50%; top:30px; width:30%; height:1px; background:#d0d0d0; z-index:-1; } .chart_wrap .depth3 {position:relative; text-align:center;margin: 0 0 50px 0 ; } .chart_wrap .depth3 p {position:relative; display:block; text-align:center; max-width:300px;width:100%;padding:17px;font-weight:500; color:#fff;font-size:1.05em; letter-spacing:-1px; border-radius:50px;background:#008bdd; margin: auto; } .chart_wrap .depth4 {position:relative; text-align:center;padding:40px 0 0 0;display:flex;justify-content: space-between; } .chart_wrap .depth4:after {content:''; display:block; position:absolute; left:22%; top:0; width:56%; height:1px; background:#d0d0d0; z-index:-1; } .chart_wrap .depth4>li {position:relative; width:44%;} .chart_wrap .depth4>li p {position:relative; border-radius:50px; padding:17px 0;color:#fff; font-size:1.05em;display: flex; align-items:center;flex-direction: column;background:#25a3a0; } .chart_wrap .depth4>li:after {content:''; display:block; position:absolute; left:50%; top:-40px; width:1px; height:50px; background:#d0d0d0; z-index:-1; } .chart_wrap .depth4>li a {display:block; color:#fff; } .chart_wrap .depth4>li ol {position:relative; margin:10px 0 0 0;} .chart_wrap .depth4>li ol li {position:relative;border-radius:50px; padding:14px 0; font-size:0.95em;background:#eff1f6;color:#37496d;margin:5px 0; } @media screen and (max-width:1200px) { .chart_wrap .depth4 { gap:20px; } } @media screen and (max-width:1024px) { .chart_wrap:after { height:290px; } /* 세로라인 */ .chart_wrap .depth1 { margin: 0 0 40px 0 ; } .chart_wrap .depth1 p { width:180px;height:180px; font-size:1.05em ;border:6px solid #cce8f8;} .chart_wrap .depth2 { margin: 0 0 40px 0 ; } .chart_wrap .depth2 p { width:240px; font-size:1em;padding:15px 5px; } .chart_wrap .depth2:after { top:25px; } .chart_wrap .depth3 { margin: 0 0 45px 0 ; } .chart_wrap .depth3 p { width:240px; font-size:1em; padding:15px 5px; } .chart_wrap .depth4 { padding:30px 0 0 0; } .chart_wrap .depth4>li:after { top:-30px; } .chart_wrap .depth4>li { padding:15px 5px ; font-size:0.95em; } } @media screen and (max-width:800px) { .chart_wrap:after { height:280px; } /* 세로라인 */ .chart_wrap .depth1 p { width:170px;height:170px; } .chart_wrap .depth4 { gap:10px; } .chart_wrap .depth4>li {border-radius:15px 10px ; line-height:1.3em; width:49%;} .chart_wrap .depth4:after {left:24.5%; width:51%; } .chart_wrap .depth4>li p { padding:15px 0;} .chart_wrap .depth4>li ol li { padding:10px ;} } @media screen and (max-width:600px) { .chart_wrap .depth2 p { width:150px; } .chart_wrap .depth3 p { width:200px; } } /* 조직도 ================================================================================== */ /* MAP ================================================================================== */ .map_box {position:relative; } .map_canvas {position:relative; border:1px solid #dfdfdf;} .map_box_tit {position:relative;font-weight:700;padding:30px 0 20px 10px; font-size:1.4em; color:#000; letter-spacing:-1.5px; border-bottom:1px solid #000; } .map_box ul { position:relative; display: grid; grid-template-columns: repeat(2, 1fr); margin-top:15px; } .map_box ul li { position:relative; display: grid; grid-template-columns: 130px auto; border-bottom:1px solid #dfdfdf; padding:22px 15px; } .map_box ul li:nth-child(1) {grid-column: 1 / 3; grid-row: 1 / 2;} .map_box .txt01 {position:relative; display:flex; } .map_box .txt01 p {display:inline-block;font-family: 'S-CoreDream-5Medium'; font-size:1em; color:#111; letter-spacing:-1px; } .map_box .txt01 span {display:inline-block;width:60px;height:60px;border-radius:50px;background-color:#043278; margin-right:15px;} .map_box .map_icon01 {background:url('../image/sub/map_icon01.png') no-repeat center 50%; background-size:30px auto;} .map_box .map_icon02 {background:url('../image/sub/map_icon02.png') no-repeat center 50%; background-size:30px auto;} .map_box .map_icon03 {background:url('../image/sub/map_icon03.png') no-repeat center 50%; background-size:30px auto;} .map_box .map_icon04 {background:url('../image/sub/map_icon04.png') no-repeat center 50%; background-size:30px auto;} .map_box .txt01:after {position:absolute; content:''; display:block; right:20px; top:0; width:1px; height:25px; background:#e5e5e5;} .map_box .txt02 {color:#797979; } @media screen and (max-width:800px) { .map_box_tit { font-size:1.3em; } .map_box ul { grid-template-columns: repeat(1, 1fr); } .map_box ul li:nth-child(1) {grid-column: initial; grid-row:initial;} .map_box ul li { grid-template-columns: 90px auto; padding:15px; } .map_box .txt01 p { font-size:0.95em; } .map_box .txt01 span {width:45px;height:45px; } .map_box .map_icon01 { background-size:25px auto;} .map_box .map_icon02 { background-size:25px auto;} .map_box .map_icon03 { background-size:25px auto;} .map_box .map_icon04 { background-size:25px auto;} .map_box .txt01:after {display:none;} } /* MAP ================================================================================== */ .int01_01_wrap {overflow:hidden;padding:15px 0 0 0;background:url('../image/sub/a01_03.png') no-repeat right 40px;} .int01_01_txt_group {display:none;} .int01_01_img {padding:0 0 10px 0;} .int01_01 {padding:0 0 0 0;display: ;} .int01_name_wrap {font-size:1.1em;font-weight:bold;padding:40px 0 0 0;} .int01_name {padding:10px 0 0 0;} .int01_name div {float:left;} @media screen and (max-width:800px){ .int01_01_wrap {padding:0 0 0 0;background-image:none;} .int01_01 {padding:0 0 0 0;} } /* mobie screen 480 */ @media screen and (max-width:480px){ .int01_name div {float:none;} .int01_01_img {display:none;} .int01_01_txt_group {display:block;} .sub_mov iframe {width:100%; height:85%;} } /* 위원회소개 - 구성 */ .int02_flow01 {position:relative; border:1px solid #ddd; padding:50px 30px ; width:100%;margin:auto;text-align:center; margin-bottom:60px; } .int02_flow01:after {content:''; display:block; position:absolute; left:50%; top:60px; width:1px; height:510px; background:#d0d0d0; z-index:-1; } /* 세로라인 */ .int02_flow01 .depth1 {position:relative; text-align:center;margin: 0 0 40px 0 ; } .int02_flow01 .depth1 p {position:relative; width:25%;min-width:220px; font-weight:500; color:#fff; padding:15px 0; line-height:1.4;letter-spacing:-1px; border-radius:50px;background:#043278; margin: auto; } .int02_flow01 .depth1_2 {position:absolute;top:0; right:10%;display:inline-block; width:20%;font-weight:500; color:#fff; padding:15px 5px;line-height:1.4; letter-spacing:-1px; border-radius:50px;background:#fb920b;} .int02_flow01 .depth1:after {content:''; display:block; position:absolute; left:50%; top:50%; width:30%; height:1px; background:#d0d0d0; z-index:-1; } .int02_flow01 .depth2 {position:relative; text-align:center; margin: 0 0 40px 0 ; } .int02_flow01 .depth2 p {position:relative; display:inline-block; width:25%;min-width:220px; padding:15px 0 ;line-height:1.4;font-weight:500; color:#fff; letter-spacing:-1px; border-radius:50px;background:#2a3998; } .int02_flow01 .depth3 {position:relative; text-align:center; margin: 0 0 40px 0 ;display: flex; justify-content: center;gap:30%; } .int02_flow01 .depth3 li {position:relative; display:inline-block; width:25%;min-width:220px; font-weight:500;line-height:1.4; padding:0 0 10px 0;color:#7e36c0; letter-spacing:-1px; border-radius:10px;border:2px solid #7e36c0;background:#fff; overflow:hidden; } .int02_flow01 .depth3 li p {background:#7e36c0;color:#fff; padding:10px 0;margin:0 0 10px 0; line-height:1.4; } .int02_flow01 .depth3:after {content:''; display:block; position:absolute; left:25%; top:50%; width:50%; height:1px; background:#d0d0d0; z-index:-1; } .int02_flow01 .depth4 {position:relative; text-align:center; margin: 0 0 40px 0 ; } .int02_flow01 .depth4 p {position:relative; display:inline-block; width:30%;min-width:220px; padding:20px 0 ;line-height:1.4;font-weight:500; color:#fff; letter-spacing:-1px; border-radius:50px;background:#006fd8; font-size:1.1em;} .int02_flow01 .depth4_2 {position:absolute;top:60px; right:10%;display:inline-block; width:20%;font-weight:500; color:#fff; padding:15px 5px;line-height:1.4; letter-spacing:-1px; border-radius:50px;background:#25a3a0;} .int02_flow01 .depth4:after {content:''; display:block; position:absolute; left:50%; top:50%; width:30%; height:1px; background:#d0d0d0; z-index:-1; } /* 가로선 */ .int02_flow01 .depth4_2:after {content:''; display:block; position:absolute; left:50%; top:-27px; width:1px; height:70px; background:#d0d0d0; z-index:-1; } /* 세로선 */ .int02_flow01 .depth5 {position:relative; text-align:center; margin: 0 0 40px 0 ; } .int02_flow01 .depth5 p {position:relative; display:inline-block; width:25%;min-width:220px; padding:15px 0 ;line-height:1.4;font-weight:500; color:#fff; letter-spacing:-1px; border-radius:50px;background:#006fd8; } .int02_flow01 .depth6 {position:relative; text-align:center; margin: 0 0 40px 0 ; } .int02_flow01 .depth6 p {position:relative; display:inline-block; width:25%;min-width:220px; padding:15px 0 ;line-height:1.4;font-weight:500; color:#fff; letter-spacing:-1px; border-radius:50px;background:#555; } .int02_flow01 .depth7 {position:relative; max-width:860px;margin:auto; text-align:center; display: flex; justify-content: space-between; } .int02_flow01 .depth7:after {content:''; display:block; position:absolute; left:14.5%; top:0; width:71%; height:1px; background:#d0d0d0; z-index:-1; } .int02_flow01 .depth7>li {position:relative; margin:30px 0 0 0; min-width:220px; width:29%; border-radius:10px; } .int02_flow01 .depth7>li p {position:relative; font-weight:500; padding:15px 5px ;color:#fff; letter-spacing:-1px; border-radius:10px; background:#888; } .int02_flow01 .depth7>li ol {position:relative; padding:5px 0; } .int02_flow01 .depth7>li ol li {position:relative; background:#f7f7f7; font-size:0.95em;padding:8px; letter-spacing:-1px;border:1px solid #ccc; margin:0 0 5px 0; border-radius:10px; } .int02_flow01 .depth7>li:after {content:''; display:block; position:absolute; left:50%; top:-30px; width:1px; height:30px; background:#d0d0d0; z-index:-1; } /* 세로라인 */ @media screen and (max-width:1300px){ .int02_flow01 .depth1 p, .int02_flow01 .depth2 p, .int02_flow01 .depth3 li, .int02_flow01 .depth4 p, .int02_flow01 .depth5 li { font-size:0.95em; } } @media screen and (max-width:800px){ .int02_flow01 { padding:30px 20px ;} .int02_flow01:after { height:437px; } /* 세로라인 */ .int02_flow01 .depth1_2, .int02_flow01 .depth4_2 { right:5%;} .int02_flow01 .depth1 p, .int02_flow01 .depth2 p, .int02_flow01 .depth3 li, .int02_flow01 .depth4 p, .int02_flow01 .depth5 p, .int02_flow01 .depth6 p {min-width:200px;} .int02_flow01 .depth1 p, .int02_flow01 .depth2 p, .int02_flow01 .depth3 li, .int02_flow01 .depth4 p, .int02_flow01 .depth5 p, .int02_flow01 .depth6 p, .int02_flow01 .depth1_2, .int02_flow01 .depth4_2, .int02_flow01 .depth5 li, .int02_flow01 .depth7>li>p {line-height:1.3em;font-size:0.9em;font-weight:300; } .int02_flow01 .depth3 { margin: 0 0 30px 0 ; gap:10%; } .int02_flow01 .depth5 { } .int02_flow01 .depth1, .int02_flow01 .depth2, .int02_flow01 .depth4, .int02_flow01 .depth5, .int02_flow01 .depth6 {margin: 0 0 30px 0 ; } .int02_flow01 .depth7>li {min-width:initial; } .int02_flow01 .depth7>li ol li {font-size:0.9em; padding:6px; } .int02_flow01 .depth4:after { width:35%; } /* 가로선 */ .int02_flow01 .depth4_2:after { top:-30px; height:40px; } /* 세로선 */ } @media screen and (max-width:600px){ .int02_flow01 .depth1 p, .int02_flow01 .depth2 p, .int02_flow01 .depth3 li, .int02_flow01 .depth5 p, .int02_flow01 .depth6 p { width:45%;min-width:initial; } .int02_flow01 .depth1 p, .int02_flow01 .depth1_2, .int02_flow01 .depth4_2, .int02_flow01 .depth2 p, .int02_flow01 .depth5 p, .int02_flow01 .depth6 p {padding:12px 5px; } .int02_flow01 .depth4 p {padding:15px 5px; width:57%;} .int02_flow01 .depth1_2, .int02_flow01 .depth4_2 { right:0; width:25% ;} .int02_flow01 .depth7>li {width:32%; } .int02_flow01 .depth7>li>p { padding:12px 5px; } .int02_flow01 .depth7:after { left:16%; width:68%; } /* 가로라인 */ .int02_flow01 .depth7>li ol li {font-size:0.85em; line-height:1.3; } .int02_flow01 .depth4:after { width:37.5%; } /* 가로선 */ .int02_flow01 .depth4_2:after { top:-35px; } /* 세로선 */ } /* 위원회소개 - 구성 */ /* 위원회소개 - 협의체 */ .int02_flow02 {position:relative; border:1px solid #ddd; padding:50px ; width:100%;margin:auto;text-align:center; margin-bottom:40px;} .int02_flow02:after {content:''; display:block; position:absolute; left:50%; top:60px; width:1px; height:235px; background:#d0d0d0; z-index:-1; } /* 세로라인 */ .int02_flow02 .depth1 {position:relative; text-align:center;margin: 0 0 70px 0 ; } .int02_flow02 .depth1 p {position:relative; width:270px; font-weight:500; color:#fff; padding:12px ; letter-spacing:-1px; background:#043278; border-radius:5px;margin: auto; } .int02_flow02 .depth1 span {position:absolute;display:inline-block;left:calc(50% + 25px);top:70px; color:#888;} .int02_flow02 .depth2 {position:relative; text-align:center;margin: 0 0 30px 0 ; } .int02_flow02 .depth2 p {position:relative; width:270px; font-weight:500; color:#fff; padding:12px ; letter-spacing:-1px; background:#2a42ba; border-radius:5px;margin: auto; } .int02_flow02 .depth2 span {position:absolute;display:inline-block;left:calc(50% + 25px);top:70px; color:#888;} .int02_flow02 .depth3 {position:relative; text-align:center; margin: 0 0 30px 0 ;display: grid; grid-template-columns: repeat(2, 1fr); } .int02_flow02 .depth3 li {position:relative; text-align:center; } .int02_flow02 .depth3 li p { display:inline-block; background:#fff;color:#fb920b; font-weight:500;line-height:82px;width:90px;height:90px; border-radius:50px;border:5px solid #fb920b;letter-spacing:-1px; } .int02_flow02 .depth3:after {content:''; display:block; position:absolute; left:25%; top:50%; width:50%; height:1px; background:#d0d0d0; z-index:-1; } .int02_flow02 .depth3 li:after {content:''; display:block; position:absolute; left:50%; bottom:-30px; width:1px; height:30px; background:#d0d0d0; z-index:-1; } .int02_flow02 .depth4 {position:relative; text-align:center; margin:0 50px; display: grid; grid-template-columns: repeat(2, 1fr);gap:100px; } .int02_flow02 .depth4>li {position:relative; text-align:center;background:#f2f9fd;border-radius:5px; border:2px solid #008bdd;display: flex; align-items:center;flex-direction: column; } .int02_flow02 .depth4>li p { width:100%; background:#008bdd;color:#fff; font-weight:500;padding:10px 0;letter-spacing:-1px; } .int02_flow02 .depth4>li ol {padding:10px;text-align:left; } .int02_flow02 .depth4>li ol li {position:relative; font-size:0.95em;padding:0 0 5px 13px; } .int02_flow02 .depth4>li ol li:after {position:absolute; content:''; display:block; left:3px; top:11px; width:4px; height:2px; background:#999;} .int02_flow02 .depth4>li span {display:inline-block; width:100%;padding:13px; color:#008bdd; border-top:1px dashed #008bdd;} @media screen and (max-width:1300px){ .int02_flow02 { padding:50px 30px ;} .int02_flow02 .depth1 p, .int02_flow02 .depth2 p { font-size:0.95em; } .int02_flow02 .depth4 { margin:0 20px; display: grid; grid-template-columns: repeat(2, 1fr);gap:40px; } } @media screen and (max-width:1024px){ .int02_flow02 { padding:30px 10px ;} .int02_flow02:after { height:211px; } /* 세로라인 */ } @media screen and (max-width:800px){ .int02_flow02:after { height:201px; } /* 세로라인 */ .int02_flow02 .depth1 p, .int02_flow02 .depth2 p { width:220px;line-height:1.3em; font-size:0.9em; } .int02_flow02 .depth1 span, .int02_flow02 .depth2 span {top:65px;font-size:0.9em; } .int02_flow02 .depth4>li ol li {line-height:1.3em;font-size:0.9em;font-weight:300; } .int02_flow02 .depth4 { margin:0 10px; display: grid; grid-template-columns: repeat(2, 1fr);gap:20px; } } /*관할구역 ----- 지도 */ .int02_flow03 {position:relative; border:1px solid #ddd; padding:20px ; display: grid; grid-template-columns:auto 40%; gap:0 20px; } .int02_flow03 .img {position:relative; display: flex;align-items:center; flex-direction: column; justify-content:center;} .int02_flow03 .img img {max-width:100%;width:470px;} .int02_flow03 ul {position:relative; background:#f5f5f5;padding:10px 25px;display: grid; grid-template-columns: repeat(1, 1fr); border-radius:10px;} .int02_flow03 ul>li {position:relative; display: flex; align-items:center; border-bottom:1px dashed #d5d5d5;padding:10px 0; } .int02_flow03 ul>li:last-child {border:0;} .int02_flow03 ul p {position:relative; width:120px; text-align:center; letter-spacing:-1px; line-height:1.3; } .int02_flow03 ul p span {display:block;background:#354872; color:#fff; width:100px; line-height:60px;font-weight:500;font-size:0.9em; border-radius:10px;} .int02_flow03 ul ol {position:relative; flex:2;} .int02_flow03 ul ol li {position:relative; font-size:0.9em;padding:0 0 0 5px; letter-spacing:-1px;line-height:1.4;} .int02_flow03 ul ol li:after { content:''; display:block; position:absolute; left:-5px; top:10px; width:3px; height:3px; background:#888; } .int02_flow03 .note {font-size:0.9em;color:#ff6600;} @media screen and (max-width:800px){ .int02_flow03 { grid-template-columns:1fr; gap:30px; } .int02_flow03 ul { grid-template-columns: repeat(2, 1fr); gap:10px;padding:0;background:#fff;border-radius:0;} .int02_flow03 ul>li {flex-direction: column;border:1px solid #ddd !important;border-radius:5px;padding:0; } .int02_flow03 ul p {width:100%;} .int02_flow03 ul p span { width:100%;height:initial;line-height:1.3; border-radius:5px 5px 0 0;padding:10px 0;} .int02_flow03 ul ol {padding:10px;} } /* 위원회소개 - 협의체 */ .int02_01 {border:1px solid #d9d9d9;padding:30px;margin:0 0 30px 0;background:#fafafa;} .int02_01 div {font-size:1.3em;font-weight:500;color:#008add;padding:0 0 15px 0;} .int02_02 {overflow:hidden;position:relative; border-top:1px solid #888; display: grid; grid-template-columns: repeat(1, 1fr); } .int02_02 li { border-bottom:1px solid #dfdfdf; padding:20px; display:flex;align-items:center;gap:30px; } .int02_02 .no {position:relative; display:inline-block; text-align:center; background:#008add; color:#fff; letter-spacing:0;width:45px;line-height:45px; border-radius:100px;} .int02_02 .txt { flex:2;letter-spacing:-1px; } @media screen and (max-width:1024px){ .int02_02 { grid-template-columns: repeat(2, 1fr); gap:0 30px; } .int02_02 li {padding:15px 0; gap:20px; } } @media screen and (max-width:800px){ .int02_02 { grid-template-columns: repeat(1, 1fr); gap:0; } .int02_02 li {padding:15px 0; gap:15px; } } .sub_biz01 {border:1px solid #d5d5d5;padding:25px 20px;margin:0 0 30px 0;background:#fafafa;} .sub_biz01_txt {font-size:1.3em;font-weight:bold;color:#008add;padding:0 0 10px 0;} /* 사업분야 - 훈련수급 */ .sub_btn_01 {display:inline-block; color:#fff;font-size:1.2em;font-weight:bold;line-height:45px;padding:0 50px 0 30px; cursor:pointer; border-radius:5px;background:url('../image/common/icon_btn01.png') no-repeat right 50% #f98e1c; border:1px solid #f98e1c; background-size:auto 20px;} /* 사업분야 - 보고서 버튼 */ .sub_mov iframe {width:57.7%;} @media screen and (max-width:480px){ .sub_mov iframe {width:100%; height:85%;} } /* 지산맞 - 추진절차============================================ */ .sub_process01 {position:relative; } .sub_process01 ul {position:relative;text-align:center; display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; } .sub_process01 ul>li {position:relative;border:2px solid #66b9eb;border-radius:15px; } .sub_process01 ul>li:after {content:''; position:absolute; bottom:calc(50% - 10px); right:-20px; width:12px;height:12px;border:solid #ccc; border-width:3px 3px 0 0; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .sub_process01 ul>li:last-child:after {display:none;} .sub_process01 ul>li .tit {background:#66b9eb; color:#fff;padding:15px 10px; line-height:1.4em; border-radius:10px 10px 0 0; } .sub_process01 ul>li ol { padding:10px;text-align:left;} .sub_process01 ul>li:first-child {background:#66b9eb; } .sub_process01 ul>li:first-child p {border-top:1px dashed rgb(255,255,255,0.2);color:#ffff99;padding:10px 0;} .sub_process01 ul>li ol li {position:relative;font-size:0.9em;padding:0 0 5px 13px; line-height:1.4em; } .sub_process01 ul>li ol li:after {position:absolute; content:''; display:block; left:3px; top:11px; width:4px; height:2px; background:#999;} .sub_process01 ul>li>ol>li span {display:block;font-size:0.95em;color:#008add; line-height:1.3em;} .sub_process_arrow01 {height:110px;background:url(../image/sub/sub_arrow03.png) no-repeat center 50%;text-align:center;background-size:100% auto;} .sub_process_arrow01 span {margin:30px 0 0 0;display:inline-block;width:50%;line-height:56px;font-size:1.05em; color:#fff;background:#043278;border-radius:50px;} @media screen and (max-width:1024px){ .sub_process01 ul {position:relative;text-align:center; display: grid; grid-template-columns: repeat(1, 1fr); gap: 30px; } .sub_process01 ul>li:after {content:''; position:absolute; bottom:-20px; right:calc(50% - 10px); width:12px;height:12px;border:solid #aaa; border-width:3px 3px 0 0; transform: rotate(135deg); -webkit-transform: rotate(135deg);} .sub_process01 ul>li>ol>li span {display:inline-block;} .sub_process_arrow01 {height:60px;background:none; } .sub_process_arrow01 span {margin:20px 0 0 0; width:100%;line-height:50px;font-size:1em;border-radius:5px; } } /* 지산맞 - 추진절차 */ .sub_process03 { position:relative; } .sub_process03 .inner { position:relative;display: flex; justify-content: space-between; gap:70px; } .sub_process03 .left_txt {position:relative; width:80px;padding:180px 0;z-index:1; } .sub_process03 .left_txt p {position:relative; width:100%;padding:60px 30px;background:#043278; color:#fff;text-align:center;line-height:1.2; letter-spacing:2px; border-radius:10px; writing-mode : vertical-lr;z-index:1;} .sub_process03 .left_txt p:before {content:''; position:absolute; left:0;top:-80px;width:160px;height:80px;background:url('../image/sub/b06_arrow01.png') no-repeat 40px 0 ; z-index:-1px;} .sub_process03 .left_txt p:after {content:''; position:absolute; left:0;bottom:-80px;width:160px;height:80px;background:url('../image/sub/b06_arrow02.png') no-repeat 40px bottom ; z-index:-1px;} .sub_process03 .inner>ul {position:relative; flex:2;display:flex;flex-direction: column; gap:35px; } .sub_process03 .inner>ul>li {position:relative;display: grid; grid-template-columns:170px auto; } .sub_process03 .inner>ul>li .tit {position:relative;text-align:center; background:#008add;color:#fff;border-radius:10px 0 0 10px; padding:20px 10px ;line-height:1.3;} .sub_process03 .inner>ul>li .tit:after {content:''; position:absolute; bottom:-20px; left:calc(50% - 7px); width:14px;height:14px;border:solid #999; border-width:2px 2px 0 0; transform: rotate(135deg); -webkit-transform: rotate(135deg);} .sub_process03 .inner>ul>li:last-child .tit:after {display:none;} .sub_process03 .inner>ul>li .subbox {position:relative;border:2px solid #008add;border-radius:0 10px 10px 0; padding: 15px 20px;} .sub_process03 .inner>ul>li .subbox p.list {position:relative; list-style:none; padding:0 0 0 12px;font-size:0.9em; } .sub_process03 .inner>ul>li .subbox p.list:after {position:absolute; content:''; display:block; left:0; top:11px; width:3px; height:3px; background:#888; } .sub_process03 .inner>ul>li .icon01 {display:block; width:100%; height:80px;background:url('../image/sub/b06_01.png') no-repeat center 0; } .sub_process03 .inner>ul>li .icon02 {display:block; width:100%; height:80px;background:url('../image/sub/b06_02.png') no-repeat center 0; } .sub_process03 .inner>ul>li .icon03 {display:block; width:100%; height:80px;background:url('../image/sub/b06_03.png') no-repeat center 0; } .sub_process03 .inner>ul>li .icon04 {display:block; width:100%; height:80px;background:url('../image/sub/b06_04.png') no-repeat center 0; } .sub_process03 .inner>ul>li .icon05 {display:block; width:100%; height:80px;background:url('../image/sub/b06_05.png') no-repeat center 0; } .subbox_chart {position:relative; display:flex;align-items:center; flex-direction: column;justify-content:center; } .subbox_chart .txt1 {position:relative; text-align:center;display:inline-block;padding:7px 12px; background:#998473; color:#fff;line-height:1.3;font-size:0.9em; letter-spacing:-1px;border-radius:5px; margin-bottom:20px; } .subbox_chart .txt1:after {content:''; display:block; position:absolute; left:50%; bottom:-20px; width:1px; height:20px; background:#d0d0d0; z-index:-1; } /* 세로라인 */ .subbox_chart ol {position:relative; padding:20px 0 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; } .subbox_chart ol:after {content:''; display:block; position:absolute; left:8%; top:0; width:84%; height:1px; background:#d0d0d0; z-index:-1; } /* 가로라인 */ .subbox_chart ol li {position:relative;text-align:center; background:#dcd0c6; padding:7px; border-radius:5px; line-height:1.2; font-size:0.85em; letter-spacing:-1px;} .subbox_chart ol li:after {content:''; display:block; position:absolute; left:50%; top:-20px; width:1px; height:20px; background:#d0d0d0; z-index:-1; } /* 세로라인 */ .subbox_chart .txt2 {padding:10px 0 0 0;font-size:0.9em; } .sub_process03_bt {position:relative;border:2px solid #25a3a0;border-radius:10px; margin:20px 0 0 0;overflow:hidden;display:flex;gap:50px; } .sub_process03_bt span {position:relative; display:inline-block;line-height:60px; } .sub_process03_bt span:first-child { text-align:center;width:330px;background:#25a3a0; color:#fff;} .sub_process03_bt span:first-child:after {content:''; position:absolute; top:0;right:-20px; width:0px;height:0px;border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:20px solid #25a3a0;} @media screen and (max-width:1400px){ .sub_process03 .inner>ul>li { grid-template-columns:140px auto; } } @media screen and (max-width:800px){ .sub_process03 .inner { flex-direction: column; gap:20px; } .sub_process03 .left_txt { width:100%;padding: 0; } .sub_process03 .left_txt p { padding:15px; letter-spacing:-1px; writing-mode : initial;} .sub_process03 .left_txt p:before, .sub_process03 .left_txt p:after {display:none;} .sub_process03 .inner>ul>li { grid-template-columns:110px auto; } .sub_process03 .inner>ul>li .tit {font-size:0.9em;} .sub_process03 .inner>ul>li:after {content:''; position:absolute; bottom:-20px; left:calc(50% - 7px); width:14px;height:14px;border:solid #999; border-width:2px 2px 0 0; transform: rotate(135deg); -webkit-transform: rotate(135deg);} .sub_process03 .inner>ul>li:last-child:after, .sub_process03 .inner>ul>li .tit:after {display:none;} .sub_process03 .inner>ul>li .icon01, .sub_process03 .inner>ul>li .icon02, .sub_process03 .inner>ul>li .icon03, .sub_process03 .inner>ul>li .icon04, .sub_process03 .inner>ul>li .icon05 {height:55px;background-size:50px auto; } .sub_process03_bt { gap:0;} .sub_process03_bt span { line-height:1.4; padding:12px ; } .sub_process03_bt span:first-child { width:initial; padding:12px 20px; } .sub_process03_bt span:first-child:after {display:none;} } /* 지산맞 - 추진절차 */ /* 지산맞 - 추진절차============================================ */ /* 지산맞 - 훈련수급조사 분석 ============================================ */ .sub_process02 {position:relative; border:1px solid #ddd; padding:50px ; width:100%;margin:auto;text-align:center; margin-bottom:30px;} .sub_process02 .depth1 {position:relative; text-align:center;margin: 0 0 70px 0 ; } .sub_process02 .depth1 p {position:relative; width:270px; font-weight:500; color:#fff; padding:12px 5px;line-height:1.3; letter-spacing:-1px; background:#043278; border-radius:5px;margin: auto; } .sub_process02 .depth1:after {content:''; display:block; position:absolute; left:50%; bottom:-40px; width:1px; height:40px; background:#d0d0d0; z-index:-1; } /* 세로라인 */ .sub_process02 .depth2 {position:relative; text-align:center; display: grid; grid-template-columns: repeat(2, 1fr); gap:120px; } .sub_process02 .depth2 li {position:relative; text-align:center; } .sub_process02 .depth2 li p { display:inline-block; width:100%; background:#008bdd;color:#fff; padding:12px 8px; line-height:1.3; border-radius:5px; letter-spacing:-1px; } .sub_process02 .depth2 li:last-child p {background:#25a3a0;} .sub_process02 .depth2 li:first-child:before {content:''; display:block; position:absolute; left:50%; top:-30px; width:calc(100% + 120px); height:1px; background:#d0d0d0; z-index:-1; } .sub_process02 .depth2 li:after {content:''; display:block; position:absolute; left:50%; top:-30px; width:1px; height:30px; background:#d0d0d0; z-index:-1; } .sub_process02 .depth2 li .list {margin:5px 0;display: grid; grid-template-columns: repeat(2, 1fr); gap:5px; } .sub_process02 .depth2 li .list div {display:block; background:#999;color:#fff;font-size:0.9em;padding:12px 5px ;line-height:1.3;border-radius:5px; } .sub_process02 .depth2 li .list div span {display:block; } @media screen and (max-width:1300px){ .sub_process02 .depth2 { gap:60px; } .sub_process02 .depth2 li:first-child:before { width:calc(100% + 60px); } } @media screen and (max-width:800px){ .sub_process02 {padding:25px 20px; } .sub_process02 .depth2 { gap:20px; } .sub_process02 .depth2 li:first-child:before { width:calc(100% + 20px); } .sub_process02 .depth2 li p {font-size:0.9em;} } .sub_process04 {position:relative; text-align:center; margin-bottom:30px; display: grid; grid-template-columns: repeat(3, 1fr); gap:40px;} .sub_process04 li {position:relative; border:1px solid #ddd; border-radius:10px; } .sub_process04 li .txt01 {padding:15px 10px; background:#008add;color:#fff; letter-spacing:-1px;border-radius:10px 10px 0 0;} .sub_process04 li .txt02 {padding:20px 10px; letter-spacing:-1px;} .sub_process04 li:after {content:''; position:absolute; top:calc(50% - 10px); left:-32px; width:12px;height:12px;border:solid #aaa; border-width:3px 3px 0 0; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .sub_process04 li:first-child:after {display:none;} @media screen and (max-width:1024px){ .sub_process04 { gap:30px;} .sub_process04 li .txt01 {padding:15px 10px; } .sub_process04 li .txt02 {padding:15px 10px; } .sub_process04 li:after { left:-26px; } } @media screen and (max-width:800px){ .sub_process04 { grid-template-columns: repeat(1, 1fr); gap:30px;} .sub_process04 li:after { top:-30px;left:calc(50% - 10px); transform: rotate(135deg); -webkit-transform: rotate(135deg);} } .sub_process05 {position:relative; text-align:center; display: flex; flex-direction: column; gap:30px; } .sub_process05 .inner {position:relative;border:1px solid #c8dbe7; padding:20px; border-radius:10px; } .sub_process05 .tit01 {position:relative; font-size:1.1em;font-weight:500;color:#008add;padding: 10px 0 15px 0px; letter-spacing:-1px; } .sub_process05 .tit02 {position:relative; color:#333;padding:0 0 20px 0; letter-spacing:-1px; } .sub_process05 ul {position:relative; display: grid; grid-template-columns: repeat(3, 1fr); gap:40px;} .sub_process05 li {position:relative; border:1px solid #ddd; border-radius:10px; } .sub_process05 li .txt01 {padding:15px 10px; background:#008add;color:#fff; letter-spacing:-1px;border-radius:10px 10px 0 0;} .sub_process05 li .txt02 {padding:20px 10px; letter-spacing:-1px;} .sub_process05 li:after {content:''; position:absolute; top:calc(50% - 10px); left:-32px; width:12px;height:12px;border:solid #aaa; border-width:3px 3px 0 0; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .sub_process05 li:first-child:after {display:none;} @media screen and (max-width:1024px){ .sub_process05 ul { gap:30px;} .sub_process05 li .txt01 {padding:15px 10px; } .sub_process05 li .txt02 {padding:15px 10px; } .sub_process05 li:after { left:-26px; } } @media screen and (max-width:800px){ .sub_process05 ul { grid-template-columns: repeat(1, 1fr); gap:30px;} .sub_process05 li:after { top:-30px;left:calc(50% - 10px); transform: rotate(135deg); -webkit-transform: rotate(135deg);} } /* 지산맞 - 훈련수급조사 분석 ============================================ */ /* 지산맞 - 훈련센터 */ .sub_training_chart_wrap {overflow:hidden;background:url(../image/sub/sub_arrow05.png) no-repeat center 50%;margin:30px 0 0 0;} .sub_training_chart01 {float:left;width:45%;} .sub_training_chart01 dt {background:#008add;padding:10px;color:#fff;text-align:center;} .sub_training_chart01 dd {background:#e8f0f6;border:1px solid #008add;padding:15px 20px;} .sub_training_chart02 {float:right;width:45%;} .sub_training_chart02 dt {background:#96c820;padding:10px;color:#fff;text-align:center;} .sub_training_chart02 dd {background:#edf3dd;border:1px solid #96c820;padding:15px 20px;} /* 일학습 - 운영절차 ============================================ */ .sub_learning02_01 {position:relative; padding:30px 0 0 0; } .sub_learning02_02 {position:relative; margin:30px 0 0 0; position:relative; display: grid; grid-template-columns:1fr; } .sub_learning02_02 li {overflow:hidden; position:relative; display: grid; grid-template-columns:100px auto; gap:10px; border-bottom:1px solid #e5e5e5;padding:30px 0;} .sub_learning02_02 .no { font-weight:bold;font-size:1.3em;text-align:center;color:#333; } .sub_learning02_02 li dl { } .sub_learning02_02 li dl dt {color:#222;font-weight:500;font-size:1.1em;padding:0 0 10px 0;letter-spacing:-1px;} .sub_learning02_02 li dl dd { } .sub_btn_group {padding:40px 0 0 0;text-align:center;border-top:1px solid #ddd; } /* 일학습 병행제 - 현황리스트 버튼 */ .sub_btn_big01 {display:inline-block;color:#fff;font-size:1.2em;font-weight:bold;line-height:60px;padding:0 70px 0 40px; cursor:pointer; border-radius:5px;background:url('../image/common/icon_btn01.png') no-repeat right 50% #008add; border:1px solid #008add; background-size:auto 24px;} /* 일학습 병행제 - 현황리스트 버튼 */ .sub_btns01_group {padding:15px 0 20px 0;text-align:center; } /* 일학습 병행제 - 기업의 컨설팅신청 버튼 위치 */ .sub_btns01 {display:inline-block;padding:0 55px 0 40px;line-height:40px;font-size:1.1em;font-weight: ; border:1px solid #008add;border-radius:5px;color:#fff; cursor:pointer; background:url('../image/common/icon_btn01.png') no-repeat right 50% #008add; background-size:auto 18px; } /* 일학습 병행제 - 기업의 컨설팅신청 버튼 */ /* 일학습 - 운영절차 ============================================ */ /* 주요사업 ========================================================================== */ .biz02_wrap02 {position:relative; overflow:hidden; text-align:center; margin-bottom:60px; } .biz02_wrap02 .depth1 {position:relative; text-align:center; } .biz02_wrap02 .depth1 p {position:relative; display:inline-block; text-align:center; font-weight:500; font-size:1.3em; background:#043278; color:#fff; min-width:240px; padding:18px;line-height:1.3; border-radius:100px;} .biz02_wrap02 .depth2 {position:relative;margin-top:20px; text-align:center; font-weight:500; font-size:1.15em; background:#008bdd; color:#fff; line-height:1.3; padding:18px 30px; border-radius:10px; } .biz02_wrap02 .depth3 {position:relative;margin-top:20px; display: grid; grid-template-columns:repeat(4, 1fr); gap:15px; } .biz02_wrap02 .depth3 li { border-radius:10px; overflow:hidden; border:1px solid #e3e3e3; } .biz02_wrap02 .depth3 .tit {position:relative;background:#25a3a0; padding:12px 5px; text-align:center; color:#fff; font-weight:500; font-size:1em;line-height:1.3; } .biz02_wrap02 .depth3 .cont {position:relative; padding:15px 12px; text-align:left; font-size:0.95em; display: flex; flex-direction: column; gap:8px; min-height:120px;} .biz02_wrap02 .depth3 .cont p { position:relative; padding-left:12px; line-height:1.3; } .biz02_wrap02 .depth3 .cont p:after {content:''; position:absolute; top:7px;left:2px; width:3px; height:3px; background:#666; border-radius:5px; } .biz02_wrap02 .depth3 .txt {position:relative; padding:12px 10px; text-align:center; background:#dff1f1; color:#1e6e6c;font-weight:500;font-size:0.95em;min-height:67px; border-radius:6px; line-height:1.3; margin:0 10px 10px 10px; } @media screen and (max-width:1024px) { .biz02_wrap02 { font-size:0.95em;} .biz02_wrap02 .depth3 { grid-template-columns:repeat(2, 1fr); } .biz02_wrap02 .depth3 .cont { min-height:initial;} } @media screen and (max-width:768px) { .biz02_wrap02 { font-size:0.9em;} .biz02_wrap02 .depth1 p { font-size:1.25em; padding:15px; min-width:200px; } .biz02_wrap02 .depth2 {font-size:1.05em; padding:15px 30px; } .biz02_wrap02 .depth3 .txt { min-height:30px; } } .biz02_flow01 {position:relative; display: grid; grid-template-columns: repeat(3, 1fr); gap:35px; } .biz02_flow01 li {position:relative; padding:20px 15px;border:2px solid #66b9eb;text-align:center;letter-spacing:-1px; border-radius:15px; } .biz02_flow01 li .no {position:relative; display:inline-block; background:#008add; color:#fff; letter-spacing:0;width:45px;line-height:45px; margin-bottom:20px;border-radius:100px;} .biz02_flow01 li .txt01 {color:#008add; font-size:1.05em;font-weight:500; } .biz02_flow01 li .txt02 {border-top:1px dashed #008add; margin:20px 0 0 0;padding:20px 0 0 0;} .biz02_flow01 li:after {content:''; position:absolute; top:calc(50% - 10px); left:-30px; width:12px;height:12px;border:solid #aaa; border-width:3px 3px 0 0; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .biz02_flow01 li:first-child:after {display:none;} @media screen and (max-width:1024px){ .biz02_flow01 { margin-left:15px; grid-template-columns: repeat(2, 1fr); gap:25px; } .biz02_flow01 li:after { left:-25px; } .biz02_flow01 li .no { margin-bottom:15px; } .biz02_flow01 li .txt01 { font-size:1em;} } .biz02_flow02 {position:relative; display: grid; grid-template-columns: repeat(4, 1fr); gap:20px; } .biz02_flow02 li {position:relative;margin-top:20px;padding: 20px;border:2px solid #66b9eb;text-align:center;letter-spacing:-1px; border-radius:15px; } .biz02_flow02 li .no {position:absolute;top:-23px;left:calc(50% - 23px);display:inline-block;background:#008add; color:#fff;letter-spacing:0; width:45px;line-height:45px; border-radius:100px;} .biz02_flow02 li .txt {padding:20px 0 0 0; } @media screen and (max-width:1024px){ .biz02_flow02 { grid-template-columns: repeat(2, 1fr); gap:20px; } } @media screen and (max-width:600px){ .biz02_flow02 li { padding:20px 15px; } .biz02_flow02 li .txt { font-size:0.9em; } } .biz02_flow03 {position:relative; display: grid; grid-template-columns: repeat(3, 1fr); gap:20px; } .biz02_flow03 li {position:relative;margin-top:20px;padding: 20px;border:2px solid #66b9eb;text-align:center; letter-spacing:-1px;border-radius:15px; } .biz02_flow03 li .no {position:absolute;top:-23px;left:calc(50% - 23px);display:inline-block;background:#008add; color:#fff; letter-spacing:0; width:45px;line-height:45px; border-radius:100px;} .biz02_flow03 li .tit {font-size:1.05em;font-weight:500;color:#008add; padding:20px 0 15px 0; } .biz02_flow03 li .txt {padding:0 0 10px 0; } .biz02_flow03 li .txt span {display:block;} @media screen and (max-width:1024px){ .biz02_flow03 li .tit { padding:15px 0; } } @media screen and (max-width:800px){ .biz02_flow03 { grid-template-columns: repeat(1, 1fr); gap:10px; } .biz02_flow03 li .tit { font-size:1em; } .biz02_flow03 li .txt span {display:inline-block;} } .biz02_flow04 {position:relative; display: grid; grid-template-columns: repeat(2, 1fr); gap:20px; } .biz02_flow04 li {position:relative; padding:30px 20px; text-align:center;border:1px solid #d9d9d9; letter-spacing:-1px;border-radius:15px; } .biz02_flow04 li .img {position:relative; display:inline-block; width:140px;height:140px; border-radius:100px;} .biz02_flow04 li .img.icon01 {background:url('../image/sub/biz_icon01.png') no-repeat center 50% #f8f8f8;} .biz02_flow04 li .img.icon02 {background:url('../image/sub/biz_icon02.png') no-repeat center 50% #f8f8f8;} .biz02_flow04 li .tit {font-size:1.1em;font-weight:500;color:#008add; padding:15px 0 15px 0; } .biz02_flow04 li .txt {padding:0 0 10px 0; } @media screen and (max-width:1024px){ .biz02_flow04 li .txt br {display:none; } .biz02_flow04 li .txt {padding:0 0 0; } } .biz02_flow05 {position:relative; display: flex; align-items:center;flex-direction: column;gap:30px; } .biz02_flow05 li {position:relative; padding:40px; border:1px solid #d9d9d9; display: flex; gap:50px;border-radius:15px; } .biz02_flow05 li .img { width:130px;height:130px; border-radius:100px;} .biz02_flow05 li dl {flex:2;letter-spacing:-1px;} .biz02_flow05 li dl dt {font-size:1.1em;font-weight:500; color:#008add;padding:0 0 15px 0;} .biz02_flow05 li dl dd { } .biz02_flow05 li .img.icon01 {background:url('../image/sub/biz_icon03.png') no-repeat center 50% #66b9eb;} .biz02_flow05 li .img.icon02 {background:url('../image/sub/biz_icon04.png') no-repeat center 50% #66b9eb;} .biz02_flow05 li .img.icon03 {background:url('../image/sub/biz_icon05.png') no-repeat center 50% #66b9eb;} .biz02_flow06 {position:relative; border:1px solid #d9d9d9; padding:0 30px;display: flex; flex-direction: column; border-radius:15px; } .biz02_flow06 li {position:relative; padding:35px 0; border-bottom:1px dashed #d9d9d9; display: flex; gap:30px; } .biz02_flow06 li:last-child {border-bottom:0;} .biz02_flow06 li:after {content:''; position:absolute; bottom:-5px; left:calc(50% - 4px); width:6px;height:6px;border:solid #999; border-width:2px 2px 0 0; transform: rotate(135deg); -webkit-transform: rotate(135deg);} .biz02_flow06 li:before {content:''; position:absolute; bottom:-15px; left:calc(50% - 13px); width:25px;height:25px;background:#fff; border:1px solid #ccc; border-radius:50px;} .biz02_flow06 li:last-child:after, .biz02_flow06 li:last-child:before {display:none;} .biz02_flow06 li .no { width:80px; color:#008add;font-size:1.8em; font-family: 'S-CoreDream-6Bold'; letter-spacing:0; text-align:center; } .biz02_flow06 li .txt {flex:2;letter-spacing:-1px; font-size:1.1em;font-weight:500; color:#222; } .biz02_flow06 li .txt span { display:block; font-size:1rem; color:#666;padding:10px 0 0 0; } @media screen and (max-width:800px){ .biz02_flow06 { padding:0 20px;} .biz02_flow06 li {padding:25px 0;gap:10px; } .biz02_flow06 li .no { width:50px;font-size:1.5em; } .biz02_flow06 li .txt { font-size:1em; line-height:1.3; } .biz02_flow06 li .txt span { font-size:0.9rem;padding:5px 0 0 0; line-height:1.3; } } .biz02_flow07 {position:relative; margin:60px 24px 0 0; } .biz02_flow07 ul {position:relative; display: grid; grid-template-columns: repeat(4, 1fr); gap:24px; } .biz02_flow07 li {position:relative; letter-spacing:-1px;border-radius:15px; } .biz02_flow07 li .no {position:absolute; display:inline-block;left:-30px;top:-4px;border:3px solid #008add; text-align:center; font-weight:500; background:#fff; color:#008add; letter-spacing:0; width:50px;height:50px; line-height:45px; border-radius:100px;} .biz02_flow07 li .tit01 {position:relative; font-size:1em;font-weight:500; padding:9px 0 9px 30px;margin:0 0 0 28px;background:#008add; color:#fff; } .biz02_flow07 li .tit01:after {position:absolute; content:'';top:7px;right:-15px; width:30px;height:30px; background:#008add; transform:rotate(45deg); z-index:-1; } .biz02_flow07 li .tit02 {position:relative; font-size:1em; font-weight:500;text-align:center;color:#008add;padding:15px 0 ; } .biz02_flow07 li .txt {position:relative; font-size:0.9em; text-align:center;background:#f0f0f0;padding:15px 10px;line-height:1.4; border-radius:10px; } .biz02_flow07 .prebox01 {position:relative; width:23.5%;padding:15px 0;border:1px solid #043278;color:#043278;text-align:center; border-radius:10px; margin:0 0 50px 0; } .biz02_flow07 .prebox01:before {position:absolute; content:''; bottom:-50px; left:50%; width:1px ;height:50px;border-left:1px dashed #8d9ab9;} /* 세로 점선 */ .biz02_flow07 .prebox01:after {position:absolute;content:''; bottom:-25px; left:calc(50% - 5px); width:9px;height:9px;border:solid #043278; border-width:2px 2px 0 0; transform: rotate(135deg); -webkit-transform: rotate(135deg);} /* 화살표 */ .biz02_flow07 .prebox02 {position:relative; display: flex; justify-content: flex-end;margin: 50px 0 0 0; } .biz02_flow07 .prebox02 span {position:relative; right:25%;width:23.5%;padding:15px 0;border:1px solid #043278;color:#043278;text-align:center; border-radius:10px; } .biz02_flow07 .prebox02 span:before {position:absolute; content:''; top:-50px; left:50%; width:1px ;height:50px;border-left:1px dashed #8d9ab9;} /* 세로 점선 */ .biz02_flow07 .prebox02 span:after {position:absolute;content:''; top:-35px; left:calc(50% - 5px); width:9px;height:9px;border:solid #043278; border-width:2px 2px 0 0; transform: rotate(135deg); -webkit-transform: rotate(135deg);} /* 화살표 */ @media screen and (max-width:1400px){ .biz02_flow07 li .tit01 { font-size:0.95em; margin:0 0 0 25px;} } @media screen and (max-width:1300px){ .biz02_flow07 ul { grid-template-columns: repeat(2, 1fr); gap:40px 24px ; } .biz02_flow07 li .tit01 {text-align:center; } .biz02_flow07 .prebox01 { width:50%; } .biz02_flow07 .prebox02 span { width:50%; right:50%;} } @media screen and (max-width:1024px){ .biz02_flow07 li .tit01 { padding:10px 0 10px 30px;} } @media screen and (max-width:600px){ .biz02_flow07 ul { grid-template-columns: repeat(1, 1fr); gap:40px 24px ; } .biz02_flow07 .prebox01 { width:calc(100% - 10px);left:10px; } .biz02_flow07 .prebox02 { justify-content: flex-start; } .biz02_flow07 .prebox02 span { width:calc(100% - 10px);left:10px; right:initial;} } .biz02_flow08 {position:relative; max-width:900px;margin:auto; } .biz02_flow08 .subject { text-align:center;margin:0 0 80px 0;} .biz02_flow08 .subject span {position:relative; display:inline-block; background:#043278;color:#fff;font-size:1.1em; padding:20px 50px;text-align:center; border-radius:100px;} .biz02_flow08 ul {position:relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px ; } .biz02_flow08 ul li { position:relative; text-align:center; padding:30px 20px ; border:1px solid #ddd;background:#fff;border-radius:15px;} .biz02_flow08 ul li .img {display:inline-block; width:100px;height:100px;border-radius:50px; } .biz02_flow08 ul li .tit {padding:10px 0 ; color:#043278;font-weight:500; } .biz02_flow08 ul li:before {position:absolute; content:''; top:-40px; left:50%; width:1px ;height:100px;background:#ddd;z-index:-1;} .biz02_flow08 ul li:nth-child(2):before { top:-100px; } .biz02_flow08 ul li:after {position:absolute; content:''; top:-40px; left:50%; height:1px ;width:calc(100% + 22px);background:#ddd;z-index:-1;} .biz02_flow08 ul li:last-child:after {display:none;} .biz02_flow08 ul li .img.icon01 {background:url('../image/sub/biz_icon09.png') no-repeat center 50% #008bdd;background-size:70px;} .biz02_flow08 ul li .img.icon02 {background:url('../image/sub/biz_icon10.png') no-repeat center 50% #008bdd;background-size:70px;} .biz02_flow08 ul li .img.icon03 {background:url('../image/sub/biz_icon11.png') no-repeat center 50% #008bdd;background-size:70px;} @media screen and (max-width:800px){ .biz02_flow08 .subject span { font-size:1em; line-height:1.3;padding:20px ; } .biz02_flow08 ul { gap: 10px ; } .biz02_flow08 ul li { padding: 20px 10px;} .biz02_flow08 ul li:after { width:calc(100% + 12px); } .biz02_flow08 ul li .img { width:80px;height:80px; } .biz02_flow08 ul li .tit {font-size:0.9em;line-height:1.3; } .biz02_flow08 ul li .img.icon01, .biz02_flow08 ul li .img.icon02, .biz02_flow08 ul li .img.icon03 { background-size:50px;} } .biz02_flow09 {position:relative;text-align:center; margin:auto; border:1px solid #ddd;padding:40px; border-radius:15px; } .biz02_flow09 .depth01 {position:relative; margin:0 0 80px 0;letter-spacing:-1px; } .biz02_flow09 .depth01 p {position:relative; display:inline-block; background:#043278;color:#fff;font-size:1.1em; width:100%;max-width:400px;padding:15px ;border-radius:100px;} .biz02_flow09 .depth01 p:after {position:absolute; content:''; bottom:-40px; left:50%; width:1px ;height:40px;background:#ddd;} .biz02_flow09 .depth02 {position:relative;display: grid; grid-template-columns: repeat(2, 1fr); gap:80px; } .biz02_flow09 .depth02 li {position:relative; display:block; width:100%; background:#008bdd;color:#fff;font-size:1.1em; padding:15px 40px;border-radius:100px;margin:0 0 30px 0; background:#008bdd; } .biz02_flow09 .depth02 li:last-child { background:#25a3a0; } .biz02_flow09 .depth02 li:before {position:absolute; content:''; top:-40px; left:50%; width:1px ;height:40px;background:#ddd;} .biz02_flow09 .depth02 li:first-child:after {position:absolute; content:''; top:-40px; left:50%; width:calc(100% + 80px) ;height:1px;background:#ddd;} .biz02_flow09 .depth03 {position:relative;display: grid; grid-template-columns: repeat(2, 1fr); gap:80px; } .biz02_flow09 .depth03 div {position:relative;border:1px solid #ddd; border-radius:15px;} .biz02_flow09 .depth03 p {position:relative;padding:15px; color:#008bdd;font-weight:500; background:#f5f5f5;border-radius:15px 15px 0 0;} .biz02_flow09 .depth03 .item02 p { color:#25a3a0; } .biz02_flow09 .depth03 ol {position:relative;padding:15px;display: grid; grid-template-columns: repeat(2, 1fr); gap:10px; } .biz02_flow09 .depth03 ol.grid01 { grid-template-columns: repeat(1, 1fr); } .biz02_flow09 .depth03 ol li {border:1px solid #ddd;padding:10px;font-size:0.9em;line-height:1.3; border-radius:10px; } .biz02_flow09 .depth03 div:before {position:absolute; content:''; top:-31px; left:50%; width:1px ;height:31px;background:#ddd;} @media screen and (max-width:1200px){ .biz02_flow09 .depth02 { gap:40px; } .biz02_flow09 .depth03 { gap:40px; } .biz02_flow09 .depth02 li:first-child:after { width:calc(100% + 40px) ;} } @media screen and (max-width:1024px){ .biz02_flow09 { padding:30px; } } @media screen and (max-width:800px){ .biz02_flow09 { padding:0; border:0; } .biz02_flow09 .depth02 { gap:20px; } .biz02_flow09 .depth03 { gap:20px; } .biz02_flow09 .depth02 li:first-child:after { width:calc(100% + 20px) ;} .biz02_flow09 .depth01 p { padding:12px ; } .biz02_flow09 .depth03 p { padding:10px 7px ; line-height:1.3; font-size:0.95em; } .biz02_flow09 .depth03 ol { padding:10px; grid-template-columns: repeat(1, 1fr); gap:5px; } .biz02_flow09 .depth03 ol li { padding:7px; border-radius:5px; } } /* 주요사업 ========================================================================== */