@charset "utf-8";

/* 인증사회적기업 - 정의 */
.range { margin-top:30px; }
.range ul { width:850px; height:177px; background:url('/se/images/sub/range.jpg') no-repeat; }
.range ul li { text-indent:-9999px; }

.role { overflow:hidden; margin-top:20px; }
.role>li { position:relative; padding:25px; float:left; margin-left:23px; width:195px; background:url('/se/images/sub/pattern_p.jpg'); box-sizing:border-box; transition:all 0.5s ease; }
.role>li:after { position:absolute; z-index:3; display:block; content:''; top:48px; right:-29px; width:29px; height:9px; background:url('/se/images/sub/role_dot.png') no-repeat; }
.role>li:first-child { margin-left:0px; }
.role>li:last-child:after { display:none; }
.role>li p { color:#ffffff; word-break:keep-all; }
.role>li p.tit { margin-bottom:20px; padding-bottom:23px; background:url('/se/images/sub/role_bar.jpg') no-repeat left bottom; font-size:20px; line-height:30px; }
.role>li .con { font-weight:300; }
.role>li p span { display:block; }
.role>li .con li { margin-bottom:15px; color:#ffffff !important; padding-left:11px; background:url('/se/images/sub/role_blet.jpg') no-repeat left 13px; font-size:14px; font-weight:400; word-break:keep-all; letter-spacing:-1px; }
.role.long>li { min-height:653px; }

/* 절차도 */
.step { overflow:hidden; margin-top:40px; }
.step li { float:left; text-align:center; background:url('/se/images/sub/step_bar.jpg') repeat-x center 9px; }
.step li span { color:#555555; font-size:14px; font-weight:bold; letter-spacing:-0.5px; }
.step li:first-child span { color:#2a3256; }
.step li:last-child span { color:#d0463b; }
.step li p { color:#555555; font-size:15px; font-weight:400; }
.step li:first-child span { background-image:url('/se/images/sub/step_first.jpg'); background-position:center top; }
.step li:last-child span { background-image:url('/se/images/sub/step_last.jpg'); background-position:center top; }
.step li span { display:block; padding-top:25px; background:url('/se/images/sub/step_middle.jpg') no-repeat center 7px; }
.step li:first-child p { display:inline-block; padding:0 10%; color:#ffffff; background:url('/se/images/sub/pattern_p.jpg'); border-radius:30px; }
.step li:last-child p { display:inline-block; padding:0 10%; color:#ffffff; background:url('/se/images/sub/pattern_r.jpg'); border-radius:30px; }
.step.col4 li { width:25%; }
.step.col6 li { width:16.6%; }
.step.col7 li { width:14%; }
.step.col10 li { width:20%; margin-top:20px; }
.step.col10 { margin-top:20px; }
/* 절차도 세로형 */
.step.step_ver { margin:20px 0 0 10px; } 
.step.step_ver li { position:relative; margin-bottom:25px; padding-left:35px; width:100%; background-image:url('/se/images/sub/step_middle.jpg'); background-repeat:no-repeat; background-position:6px 10px; text-align:left; }
.step.step_ver li:after { position:absolute; z-index:5; display:block; content:''; top:17px; left:9px; width:1px; height:66px; background:#dddddd; }
.step.step_ver li:first-child { background-image:url('/se/images/sub/step_first.jpg'); background-position:left 3px !important; }
.step.step_ver li:last-child { background-image:url('/se/images/sub/step_last.jpg'); background-position:left 3px !important; }
.step.step_ver li:first-child:after { top:23px; height:60px; }
.step.step_ver li:last-child:after { display:none; }
.step.step_ver li.last_before:after { height:59px; }
.step.step_ver li:first-child p { padding:0; color:#2a3256; background:none; }
.step.step_ver li:last-child p { padding:0; color:#d0463b; background:none; }
.step.step_ver li span { padding-top:0 !important; background:none !important; }
/* 절차도 박스 */
.step_info { margin-top:40px; padding:10px 30px 10px 30px; border:5px solid #f3f3f3; background:#fbfbfb; }
.step_info span { display:block; float:left; width:10%; color:#d0463b; font-size:16px; font-weight:600; }
.step_info .con { float:left; width:90%; }
.step_info .con .tit { margin-bottom:10px; color:#333333; font-size:16px; font-weight:500; }
.step_info .con .s_tit { margin-top:10px; text-decoration:underline; } 
.step_info .con .step_para { margin-left:5px; margin-bottom:10px; }
.step_info>ul>li { overflow:hidden; padding:20px 0; border-bottom:1px dotted #cccccc; }
.step_info>ul>li:last-child { border-bottom:0px; }

/* 센터소개 */
.introduce { background:url('/se/images/sub/center_bg.jpg') no-repeat right 60px; }
.introduce .tit { margin:50px 0; color:#555555; font-size:32px; line-height:45px; } 
.introduce .tit span { color:#e2574c; }
.introduce .con p { margin-bottom:20px; width:47%; color:#555555; font-size:16px; line-height:25px; word-break:keep-all; }
.introduce .con p.wide { width:100%; }
.introduce .name { margin-top:40px; font-size:16px; font-weight:500; }

/* 비전 목표 */
.vision .title { margin:0 auto; margin-top:40px; padding:10px 0; width:75%; color:#dc4c41; border:3px solid #eaeaea; font-size:20px; font-weight:500; text-align:center; }
.vision .con { position:relative; margin-top:40px; width:100%; height:475px; background:url('/se/images/sub/vision_bg.jpg') no-repeat center top; }
.vision .con .circle { position:absolute; z-index:10; top:174px; width:100%; color:#454d71; font-size:35px; line-height:45px; text-align:center; }
.vision .con .circle span { font-weight:600; }
.vision .con>ul { overflow:hidden; }
.vision .con>ul>li { float:left; padding:40px; width:50%; height:240px; box-sizing:border-box; }
.vision .con>ul>li.v_con2, .vision .con>ul>li.v_con4 { text-align:right; }
.vision .con>ul>li>p.tit { margin-bottom:15px; color:#454d71; font-size:20px; font-weight:600; }
.vision .con>ul>li>p.tit span { display:block; font-size:17px; line-height:20px; font-weight:400; }
.vision .con>ul>li.v_con2>p.tit, .vision .con>ul>li.v_con3>p.tit { color:#dc4c41; }

.photoBox { overflow:hidden; text-align:center; margin-top:15px; margin-bottom:15px; }
.photoBox p, .photoBox li { overflow:hidden; border-radius:10px; margin-bottom:2%; line-height:0; }

.organ { margin:50px auto 0 auto; max-width:80%; }
.organ li { position:relative; text-align:center; margin-bottom:15px; z-index:1; }
.organ li:after { content:''; position:absolute; background-color:#ccc; z-index:-1; }
.organ>li:after { left:50%; bottom:-25px; width:1px; height:24px; }
.organ>li { display:block; margin:0 auto 25px auto; width:290px; color:#fff; font-size:20px; font-weight:400; box-sizing:border-box; z-index:9; }
.organ>li>dl>dt { padding:5px 0; color:#fff; font-size:20px; font-weight:400; }
.organ>li>dl>dd { padding:10px 0; background-color:#fff; }
.organ>li.rank01_01 { padding:15px 0; border:1px solid #2a3256; background:#424e84; }
.organ>li.rank01_02,
.organ>li.rank01_03 { border:1px solid #d0463b; background:#e2574c; }

.organ .rank02 { position:relative; overflow:hidden; width:100%; padding-top:25px; }
.organ .rank02:after { left:16%; top:0; width:68.3%; height:1px; }
.organ .rank02 li { position:relative; display:inline-block; width:220px; text-align:center; border:3px solid #eee; box-sizing:border-box; z-index:9; }
.organ .rank02 li:after { left:50%; top:-26px; width:1px; height:24px; }
.organ .rank02 li:nth-child(1){float:left;}
.organ .rank02 li:nth-child(2){float:right;}
.organ .rank02 dt { padding:5px 0; font-size:18px; font-weight:400; background:#ededed; }
.organ .rank02 dd { padding:10px 0; background-color:#fff; }

/*****************************************************************************************************************************************************************************************/ 

@media all and (min-width:1200px) {
}

@media all and (max-width:1199px) {
	.range ul { width:100%; background-size:100%; }
	.role>li { margin-left:3%; width:22%; min-height:250px; }
	.step.step_ver { background:url('/se/images/sub/process_mb.jpg') repeat-y 9px top; }
	.step.step_ver li:after { display:none; }
	.introduce .con p { width:40%; }
	.vision .con { height:800px; background-position:center; }
	.vision .con>ul>li { height:540px; }
	.vision .con .circle { top:330px; }
}

@media all and (max-width:950px) {
	.role>li { margin-left:2%; margin-bottom:2%; width:49%; min-height:160px; }
	.role>li:after { display:none; }
	.role>li:nth-child(3) { margin-left:0; }
	.role>li:nth-child(5) { margin-left:0; }
	.role.long>li { min-height:580px; }
	.introduce { background-size:300px; background-position:right 120px; }
}

@media all and (min-width:769px) {
	.photoBox li { float:left; width:49%; }
	.photoBox li:nth-of-type(odd) { margin-right:2%; }
	.role.intro li { text-align:center; width:150px; min-height:220px; padding:25px 15px; }
	.role.intro li p.tit { background-position:center bottom; }
}

@media all and (max-width:768px) {
	.step.col7 li { width:25%; margin-bottom:20px;}
	.step_info span { width:15%; }
	.step_info .con { width:85%; }
	.introduce { background-size:300px; background-position:right 60px;  }
	.introduce .con p { width:100%; }
	.introduce .con p.first { width:50%; }
	.vision .title { padding:10px 20px; width:auto; font-size:18px; }
	.organ li:after,
	.organ .rank02:after,
	.organ .rank02 li:after { display:none; }
}

@media all and (max-width:640px) {
	.range ul { height:100px; }
	.role>li { min-height:250px; }
	.role.long>li { min-height:635px; }
	
	.step.origin { margin-top:20px; margin-left:10px; }
	.step.origin li { position:relative; margin-bottom:25px; padding-left:35px; float:none; width:auto; background-image:url('/se/images/sub/step_middle.jpg'); background-repeat:no-repeat; background-position:6px 10px; text-align:left; }
	.step.origin li:after { position:absolute; z-index:5; display:block; content:''; top:17px; left:9px; width:1px; height:66px; background:#dddddd; }
	.step.origin li:first-child { background-image:url('/se/images/sub/step_first.jpg'); background-position:left 3px !important; }
	.step.origin li:last-child { background-image:url('/se/images/sub/step_last.jpg'); background-position:left 3px !important; }
	.step.origin li:first-child:after { top:23px; height:60px; }
	.step.origin li:last-child:after { display:none; }
	.step.origin li.last_before:after { height:59px; }
	.step.origin li span { padding-top:0; background:none; }
	.step.origin li:first-child p, .step.origin li:last-child p { padding:0 10px; }
	.step_info span { float:none; width:100%; }
	.step_info .con { float:none; margin-top:10px; width:100%; }
	.introduce { background-size:200px; background-position:right 120px; }
	.introduce .tit { margin:30px 0; font-size:25px; line-height:35px; }
	.introduce .con p { width:100%; }
	.introduce .con p.first { width:55%; }
	.introduce .name { margin-top:30px; }
	.vision .con { position:static; height:auto; background:none; }
	.vision .con .circle { position:static; font-size:25px; line-height:33px; }
	.vision .con>ul { margin-top:20px; }
	.vision .con>ul>li { padding:20px; height:202px; }
	.vision .con>ul>li p.tit { color:#ffffff !important; }
	.vision .con>ul>li>p.tit span { font-size:15px; }
	.vision .con>ul>li>ul>li { color:#ffffff; font-weight:300; }
	.vision .con>ul>li.v_con1, .vision .con>ul>li.v_con4 { background:#454d71; }
	.vision .con>ul>li.v_con2, .vision .con>ul>li.v_con3 { background:#dc4c41; }
	.organ { max-width:100%; }
}	

@media all and (max-width:480px) {
	.role>li { margin-left:0 !important; width:100%; min-height:0; height:auto; }
	.role>li p span { display:inline; margin-left:5px; }
	.role.long>li { min-height:0; }
	.introduce { background-size:100%; background-position:right 80px; }
	.introduce .tit { margin:30px 0; font-size:18px; line-height:26px; }
	.introduce .con p { width:100%; font-size:14px; }
	.introduce .con p.first { margin-top:85%; width:100%; }
	.vision .con>ul>li { width:100%; height:auto; }
	.vision .con>ul>li.v_con1, .vision .con>ul>li.v_con3 { background:#454d71; }
	.vision .con>ul>li.v_con2, .vision .con>ul>li.v_con4 { background:#dc4c41; }
	.organ .rank02 li { float:none !important; width:290px; }
}