@charset "utf-8"; #semu { width: 1178px; margin: 0 auto; background-color: #fff; } /* 구성원소개 */ #semu_member { position: relative; padding-bottom: 50px; } #semu_member ul { margin: 0; padding: 0; } #semu_member li { position: relative; list-style: none; margin-bottom: 50px; padding-top: 50px; border-top: 1px solid #d2d2d2; font-size: 0; } #semu_member li:first-child { padding-top: 0; border-top: none; } #semu_member .semu_member_thum { display: inline-block; vertical-align: middle; width: 42.444821%; margin-left: 2.546689%; line-height: 0; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; } #semu_member .semu_member_text { display: inline-block; vertical-align: middle; width: 47.764008%; margin-left: 4.244482%; margin-right: 3%; margin-bottom:20px; line-height: 0; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; } #semu_member .semu_member_text h2 { margin: 0; font-family: 'Noto Sans KR', sans-serif; font-size: 28px; line-height: 28px; font-weight: 300; color: #4c4c4c; letter-spacing: -2px; } #semu_member .semu_member_text h2 strong { font-family: 'Noto Sans KR', sans-serif; font-size: 28px; line-height: 28px; font-weight: 400; color: #000; letter-spacing: -2px; } #semu_member .semu_member_text .semu_title { width: 208px; margin: 28px 0 0; height: 35px; padding-left: 20px; background-color: #e9e9e9; font-family: 'Noto Sans KR', sans-serif; font-size: 16px; line-height: 35px; font-weight: 400; color: #000; letter-spacing: -1px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #semu_member .semu_member_text .semu_list { margin: 10px 0 0; padding-left: 15px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #semu_member .semu_member_text .semu_list ul { margin: 0; padding: 0; } #semu_member .semu_member_text .semu_list li { position: relative; list-style: none; margin: 0; padding: 5px 0 5px 9px; border: none; font-family: 'Noto Sans KR', sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; color: #333; letter-spacing: -1px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #semu_member .semu_member_text .semu_list span { position: absolute; width: 1px; height: 5px; left: 0; top: 13px; background-color: #000; } #semu_member .semu_member_text .semu_list span:before { content: ""; position: absolute; width: 1px; height: 3px; left: 1px; top: 1px; background-color: #000; } #semu_member .semu_member_text .semu_list span:after { content: ""; position: absolute; width: 1px; height: 1px; left: 2px; top: 2px; background-color: #000; } #semu_member .semu_member_text .semu_list:after{ content:""; display:block; clear:both; /* height:0; visibility:hidden; */} /* 서비스안내 */ #semu_service { position: relative; padding-bottom: 50px; } #semu_service ul { margin: 0; padding: 0; } #semu_service li { display: table; position: relative; list-style: none; width: 100%; height: 100%; margin-bottom: 50px; padding-top: 50px; border-top: 1px solid #d2d2d2; font-size: 0; } #semu_service li:first-child { padding-top: 0; border-top: none; } #semu_service .semu_thum { display: table-cell; vertical-align: top; position: relative; width: 44.99151%; padding-left: 2.546689%; line-height: 0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #semu_service .semu_text { display: table-cell; vertical-align: middle; position: relative; width: 55.00849%; padding-left: 4.244482%; padding-right: 3%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #semu_service .semu_text h2 { margin: 0; font-family: 'Noto Sans KR', sans-serif; font-size: 26px; line-height: 26px; font-weight: 500; color: #4c4c4c; letter-spacing: -2px; } #semu_service .semu_text p { margin: 15px 0 0; font-family: 'Noto Sans KR', sans-serif; font-size: 14px; line-height: 30px; font-weight: 400; color: #000000; letter-spacing: -1px; } #semu_service .semu_text p strong { font-size: 14px; line-height: 30px; font-weight: 400; color: #0155ad; letter-spacing: -1px; } #semu_service .semu_text p i { display: block; } #semu_service .semu_text p i.v1 { display: none; } /* 인사말 */ #semu_about { position:relative; } #semu_about .about_img01 { position:absolute; width:39.473684%; left:0; top:0; } #semu_about .about_area { overflow:hidden; margin-left:41.5%; } #semu_about .about_area .about_img02 { margin:30px 0 16px 0; } #semu_about .about_area .about_info01 { margin-bottom:32px; font-family:'Nanum Gothic', 'NanumGothic', '나눔고딕'; color:#263e7a; font-size:16px; font-weight:bold; } #semu_about .about_area .about_info01 i { display:none; } #semu_about .about_area .about_info02 { margin-bottom:20px; font-family:'Nanum Gothic', 'NanumGothic', '나눔고딕'; color:#5d5d5d; font-size:14px; line-height:24px; } #semu_about .about_area .about_info02 strong { font-family:'Nanum Gothic', 'NanumGothic', '나눔고딕'; color:#5d5d5d; font-size:16px; line-height:24px; } /* 설립취지문 */ #semu_info { position:relative; } #semu_info .semu_info_area { overflow:hidden; } #semu_info .semu_info_area .semu_info02 { margin-bottom:20px; font-family:'Nanum Gothic', 'NanumGothic', '나눔고딕'; color:#5d5d5d; font-size:14px; line-height:24px; } #semu_info .semu_info_area .semu_info02 strong { font-family:'Nanum Gothic', 'NanumGothic', '나눔고딕'; color:#5d5d5d; font-size:16px; line-height:24px; } /* 조직도 */ #organization { position: relative; margin: 40px auto 0; } #organization .line01 { position: absolute; width: 1px; height: 240px; left: 50%; top: 49px; background-color: #d0d0d0; } #organization .line02 { position: absolute; width: 900px; height: 1px; left: 50%; top: 69px; margin-left:-500px; background-color: #d0d0d0; } #organization .line03 { display:none; } #organization .line04 { position: absolute; width: 32%; height: 1px; left: 50%; top: 158px; background-color: #d0d0d0; } #organization .box { position: relative; left: 0; top: 0; width: 100%; } #organization .box01 { width: 340px; height: 49px; margin: 0 auto; background-color: #fff; font-family: 'Noto Sans KR', sans-serif; font-size:15px; line-height:43px; color:#000000; font-weight:400; letter-spacing: -1px; text-align: center; border: 3px solid #355a9a; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #organization .box02 { width: 340px; height: 49px; margin: 40px auto 0; background-color: #fff; font-family: 'Noto Sans KR', sans-serif; font-size:15px; line-height:43px; color:#000000; font-weight:400; letter-spacing: -1px; text-align: center; border: 3px solid #355a9a; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #organization .box03 { position: absolute; width: 140px; height: 49px; right: 10%; top: 44px; background-color: #fff; font-family: 'Noto Sans KR', sans-serif; font-size:15px; line-height:43px; color:#000000; font-weight:400; letter-spacing: -1px; text-align: center; border: 3px solid #4d4f51; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #organization .box03_01 { position: absolute; width: 140px; height: 49px; left: 16%; top: 44px; background-color: #fff; font-family: 'Noto Sans KR', sans-serif; font-size:15px; line-height:43px; color:#000000; font-weight:400; letter-spacing: -1px; text-align: center; border: 3px solid #4d4f51; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #organization .box03_02 { position: absolute; width: 140px; height: 49px; left: 0; top: 44px; background-color: #fff; font-family: 'Noto Sans KR', sans-serif; font-size:15px; line-height:43px; color:#000000; font-weight:400; letter-spacing: -1px; text-align: center; border: 3px solid #4d4f51; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #organization .box04 { width: 340px; height: 49px; margin: 40px auto 0; background-color: #fff; font-family: 'Noto Sans KR', sans-serif; font-size:15px; line-height:43px; color:#000000; font-weight:400; letter-spacing: -1px; text-align: center; border: 3px solid #4d4f51; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #organization .box05 { position: absolute; width: 140px; height: 49px; right: 10%; top: 133px; background-color: #fff; font-family: 'Noto Sans KR', sans-serif; font-size:15px; line-height:43px; color:#000000; font-weight:400; letter-spacing: -1px; text-align: center; border: 3px solid #4d4f51; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } /* 찾아오시는길01 */ #semu_location { margin:0 auto 60px; text-align:left; } #semu_location .map_img { height:450px; border:3px solid #dfdfdf; line-height:0; } #semu_location .map_area { border-left:1px solid #dfdfdf; border-right:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; } #semu_location .map_area .text_area01 { width:100%; margin:0 auto; border-bottom:1px solid #dfdfdf; } #semu_location .map_area .text_area01 .text01 { padding:25px 30px; font-family:'Nanum Gothic', 'NanumGothic', '나눔고딕'; font-size:12px; color:#5f5f5f; line-height:22px; } #semu_location .map_area .text_area02 { margin:32px 30px 0px 30px; } #semu_location .map_area .text_area02 .img01 { margin-bottom:10px; font-family:'Nanum Gothic', 'NanumGothic', '나눔고딕'; font-size:20px; color:#000000; font-weight:bold; } #semu_location .map_area .text_area02 .text01 { margin-bottom:30px; font-family:'Nanum Gothic', 'NanumGothic', '나눔고딕'; font-size:12px; color:#5f5f5f; line-height:22px; } /* 이사회 */ #directors { margin:0 auto 60px; } #directors h2 { position:relative; margin:0; padding-left:20px; font-family:'Nanum Gothic', 'NanumGothic', '나눔고딕'; color:#263e7a; font-size:18px; line-height:18px; font-weight:bold; } #directors h2:after { content:""; position:absolute; width:12px; height:12px; left:0; top:3px; background-color: #263e7a; } #directors .directiors_list { margin:20px 10px 20px; } #directors .directiors_list ul { margin:0; padding:0; } #directors .directiors_list li { list-style:none; float:left; margin:0 10px 30px; line-height:0; } #directors .directiors_list .thum_text { margin-top:10px; font-family:'Nanum Gothic', 'NanumGothic', '나눔고딕'; color:#5d5d5d; font-size:14px; line-height:14px; text-align:center; } #directors .directiors_list:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */} /* 회사연혁 */ #history { position:relative; margin:50px auto 0;} #history .thum { position:absolute; left:0; top:0; line-height:0; } #history .thum_info { margin:0 0 0 390px; border-left:1px solid #749bc1; } #history .thum_info ul { margin:0; padding:0; } #history .thum_info li { position:relative; list-style:none; } #history .thum_info .thum_dot { position:absolute; left:-9px; top:5px; } #history .thum_info .thum_line { position:absolute; width:65px; left:23px; top:13px; border-top:1px solid #e5e5e5; } #history .thum_info .thum_list { margin:0 0 0 94px; } #history .thum_info .thum_list ul { margin:0; padding:0; } #history .thum_info .thum_list li { position:relative; list-style:none; padding-left:9px; background:url(../images/about/history_list_dot.png) no-repeat left 10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-family:'Nanum Gothic', 'NanumGothic', '나눔고딕'; font-size:13px; line-height:22px; color:#333333; } #history .thum_info .thum_list li.last { height:50px; background:none; } #history .thum_info .thum_list li.thum_title { margin:0 0 14px 0; padding-left:0; background:none; font-family:'Noto Sans KR'; font-size:26px; font-weight:500; color:#25639e; } #history .thum_info .thum_list .day { position:absolute; left:0: top:0; font-family:'Nanum Gothic', 'NanumGothic', '나눔고딕'; font-size:13px; line-height:22px; color:#333333; } /* 주요사업 */ #business { position: relative; margin: 0 auto 50px; } #business > .head_thum { display: table; overflow: hidden; position: relative; margin-bottom:40px; } #business > .head_thum.v1 { margin-top: 60px; } #business > .head_thum .thum { display: table-cell; vertical-align: middle; width: 43.898156%; padding:20px 0; line-height: 0; background-color: #f5f5f5; } #business > .head_thum .thum.mobile { display: none; vertical-align: middle; width: 100%; line-height: 0; background-color: #fff; } #business > .head_thum .info { display: table-cell; vertical-align: middle; width: 53.380158%; background-color: #f5f5f5; } #business > .head_thum .info .info_area { vertical-align: middle; } #business > .head_thum .info .info_area p { margin: 10px 30px 30px 20px; padding-left: 18px; font-family: 'Noto Sans KR', sans-serif; font-size: 15px; line-height: 26px; font-weight: 400; color: #333333; letter-spacing: -1px; word-break: keep-all; } #business > .head_thum .info .info_area .info_list { position: relative; margin: -20px 0 20px 40px; padding-left: 18px; } #business > .head_thum .info .info_area .info_list ul { margin: 0; padding: 0; } #business > .head_thum .info .info_area .info_list li { position: relative; list-style: none; padding-left: 10px; font-family: 'Noto Sans KR', sans-serif; font-size: 15px; line-height: 26px; font-weight: 400; color: #333333; letter-spacing: -1px; word-break: keep-all; } #business > .head_thum .info .info_area .info_list strong { color: #0155ad; font-weight: 400; } #business > .head_thum .info .info_area .info_list .bar { position: absolute; width: 1px; height: 5px; left: 0; top: 11px; background-color: #5a5a5a; } #business > .head_thum .info .info_area .info_list .bar:after { content: ""; display: block; position: absolute; width: 1px; height: 3px; left: 1px; top: 1px; background-color: #5a5a5a;} #business > .head_thum .info .info_area .info_list .bar:before { content: ""; display: block; position: absolute; width: 1px; height: 1px; left: 2px; top: 2px; background-color: #5a5a5a;} #business > h3 { position: relative; margin: 0; padding-left: 18px; font-family: 'Noto Sans KR', sans-serif; font-size: 22px; line-height: 22px; font-weight: 500; color: #000000; letter-spacing: -2px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #business > h3:after { content: ""; position: absolute; clear: both; width: 10px; height: 10px; left: 0; top: 6px; background-color: #0155ad; } #business > p { margin: 10px 0 0 18px; font-family: 'Noto Sans KR', sans-serif; font-size: 15px; line-height: 26px; font-weight: 400; color: #333333; letter-spacing: -1px; word-break: keep-all; } #business > p strong { display:block; margin-bottom:10px; font-family: 'Noto Sans KR', sans-serif; font-size: 16px; line-height: 26px; font-weight: 400; color: #0155ad; letter-spacing: -1px; word-break: keep-all; } #business > p i { display: block; } #business > p.v1 { margin: 10px 390px 0 18px; } #business > p.v2 { margin: 10px 540px 0 18px; } #business > p.v3 { margin: 30px 0 0 18px; font-family: 'Noto Sans KR', sans-serif; font-size: 13px; line-height: 26px; font-weight: 400; color: #ff0000; letter-spacing: -1px; word-break: keep-all; } #business > .business_thum { position:absolute; right:0; top:0; line-height:0; } #business > .process { text-align:center; line-height:0; margin:30px 0 30px; } #business > .info_list { position: relative; margin: 20px 0 50px 18px; } #business > .info_list ul { margin: 0; padding: 0; } #business > .info_list li { position: relative; list-style: none; padding-left: 10px; padding-right: 10px; font-family: 'Noto Sans KR', sans-serif; font-size: 15px; line-height: 26px; font-weight: 400; color: #333333; letter-spacing: -1px; word-break: keep-all; } #business > .info_list strong { color: #0155ad; font-weight: 400; } #business > .info_list .bar { position: absolute; width: 1px; height: 5px; left: 0; top: 11px; background-color: #5a5a5a; } #business > .info_list li.v1 .bar { left: 0; } #business > .info_list .bar:after { content: ""; display: block; position: absolute; width: 1px; height: 3px; left: 1px; top: 1px; background-color: #5a5a5a;} #business > .info_list .bar:before { content: ""; display: block; position: absolute; width: 1px; height: 1px; left: 2px; top: 2px; background-color: #5a5a5a;} #business > .info_list01 { position: relative; margin: 0 0 30px 18px; } #business > .info_list01 ul { margin: 0; padding: 0; } #business > .info_list01 li { position: relative; list-style: none; float:left; margin-right: 10px; font-family: 'Noto Sans KR', sans-serif; font-size: 15px; line-height: 26px; font-weight: 400; color: #0099ff; word-break: keep-all; } #business > .info_list01:after{ content:""; display:block; clear:both; /* height:0; visibility:hidden; */} #business > .btn_support { margin:-20px 0 0; } #business > .btn_support ul { margin:0; padding:0; text-align:center; font-size:0; line-height:0; } #business > .btn_support li { display:inline-block; list-style:none; width:293px; height:77px; margin:0 0.5%; text-align:center; } #business > .btn_support li.v1 { } #business > .btn_support:after{ content:""; display:block; clear:both; /* height:0; visibility:hidden; */} #business > .support01 { line-height:0; text-align:center; } @media screen and (max-width:1510px) { #semu { width: auto; } /* 구성원소개 */ #semu_member .semu_member_thum img { width: 100%; } /* 서비스안내 */ #semu_service .semu_thum img { width: 100%; } /* 인사말 */ #semu_about .about_img01 img { width:100%; } /* 주요사업 */ #business > .head_thum .thum img { width: 100%; } } @media screen and (max-width:1280px) { /* 조직도 */ #organization .line01 { position: absolute; width: 1px; height: 240px; left: 50%; top: 49px; background-color: #d0d0d0; } #organization .line02 { width:64%; margin-left:-32%; } #organization .line03 { display:block; position: absolute; width: 1px; height: 40px; left: 18%; top: 49px; background-color: #d0d0d0; } #organization .box { position: relative; left: 0; top: 0; width: 100%; } #organization .box01 { width: 240px; height: 49px; margin: 0 auto; } #organization .box02 { width: 240px; height: 49px; margin: 40px auto 0; } #organization .box03 { position: absolute; width: 140px; height: 49px; right: 10%; top: 44px; } #organization .box03_01 { position: absolute; width: 140px; height: 49px; left: 10%; top: 11px; } #organization .box03_02 { position: absolute; width: 140px; height: 49px; left: 10%; top: 77px; } #organization .box04 { width: 240px; height: 49px; margin: 40px auto 0; } } @media screen and (max-width:994px) { /* 이사회 */ #directors .directiors_list li { width:18%; margin:0 1% 30px; } #directors .directiors_list li img { width:100%; } } @media screen and (max-width:768px) { /* 구성원소개 */ #semu_member .semu_member_text h2 { font-size: 24px; line-height: 24px; } #semu_member .semu_member_text h2 strong { font-size: 24px; line-height: 24px; } /* 서비스안내 */ #semu_service .semu_text h2 { font-size: 24px; line-height: 24px; } #semu_service .semu_text p i { display: none; } #semu_service .semu_text p i.v1 { display: block; height: 24px; } /* 조직도 */ #organization .line01 { height: 200px; } #organization .line02 { width:87.5%; left:12.5%; margin-left:0; } #organization .line03 { left: 12.5%; } #organization .line04 { top: 143px; } #organization .box { position: relative; left: 0; top: 0; width: 100%; } #organization .box01 { width: 30%; height: 49px; margin: 0 auto; } #organization .box02 { width: 30%; height: 49px; margin: 30px auto 0; } #organization .box03 { position: absolute; width: 25%; right: 0; } #organization .box03_01 { position: absolute; width: 25%; left: 0; } #organization .box03_02 { position: absolute; width: 25%; left: 0; } #organization .box04 { width: 30%; height: 49px; margin: 30px auto 0; } #organization .box05 { width: 25%; right: 0; top: 118px; } /* 찾아오시는길01 */ #semu_location .map_img { height:350px; } /* 회사연혁 */ #history { margin:0 auto 50px;} #history .thum { position:relative; } #history .thum img { width:100%; } #history .thum_info { margin:30px 0 0 10px; border-left:1px solid #749bc1; } #history .thum_info .thum_line { display:none; } #history .thum_info .thum_list { margin:0 0 0 24px; } #history .thum_info .thum_list li { font-size:15px; line-height:26px; } #history .thum_info .thum_list li.last { height:30px; } #history .thum_info .thum_list li.thum_title { font-size:22px; } /* 주요사업 */ #business > h3 { font-size: 18px; line-height: 18px; } #business > h3:after { top: 4px; } #business > p.v1 { margin: 10px 0 0 18px; } #business > p.v2 { margin: 10px 0 0 18px; } #business > .business_thum { position:relative; margin-bottom:30px; } #business > .business_thum img { width:100%; } } @media screen and (max-width:640px) { /* 구성원소개 */ #semu_member li { padding-top: 0; border-top: none; } #semu_member .semu_member_thum { display: block; width: auto; margin-left: 0; } #semu_member .semu_member_text { display: block; width: auto; margin: 20px 10px 0; } #semu_member .semu_member_text h2 { font-size: 20px; line-height: 20px; } #semu_member .semu_member_text h2 strong { font-size: 20px; line-height: 20px; } /* 서비스안내 */ #semu_service li { padding-top: 0; border-top: none; } #semu_service .semu_thum { display: block; width: auto; padding-left: 0; } #semu_service .semu_text { display: block; width: auto; padding-left: 0; padding-right: 0; margin: 25px 10px 0; } #semu_service .semu_text h2 { font-size: 20px; line-height: 20px; } #semu_service .semu_text p i.v1 { display: block; height: 20px; } #semu_about .about_img01 { position:relative; width:90%; left:0; top:0; margin:0 auto; } #semu_about .about_area { margin-left:0; } #semu_about .about_area .about_img02 { width:130px; margin:40px 0 16px; } #semu_about .about_area .about_img02 img { width:100%; } #semu_about .about_area .about_info01 { margin-bottom:24px; font-size:16px; line-height:24px; } #semu_about .about_area .about_info01 i { display:block; } /* 찾아오시는길01 */ #semu_location .map_img { height:250px; } /* 이사회 */ #directors .directiors_list li { width:47%; margin:0 1.5% 30px; } /* 주요사업 */ #business > p.v3 { margin: 30px 0 0 0; } #business > .head_thum { display: block; width: auto; } #business > .head_thum .thum { display: none; } #business > .head_thum .thum.mobile { display: block; } #business > .head_thum .info { display: block; width: 100%; background-color: #fff; } #business > .head_thum .info .info_area { vertical-align: top; } #business > .head_thum .info .info_area p { margin: 10px 0 0 0; padding-left: 0; } #business > .head_thum .info .info_area .info_list { margin: 0 0 20px 0; padding-left: 15px; } #business > .process img { width:100%; } #business > .btn_support li { width:auto; height:auto; margin:0 15% 10px; } #business > .btn_support img { width:100%; } #business > .info_list01 { margin: 0 0 30px 0; } #business > .support01 img { width:100%; } }