/* 와이드 pc  */

/* sub4 공통 css  s */
.sub4_banner { background: url(/img/quality/sub4_banner.jpg) no-repeat center; background-size: cover; height: 250px; }
.sub4_banner .banner_wrap { max-width: 1200px; margin: 0 auto;  } 
.sub4_banner .banner_wrap h2 { color: #fff; font-size: 48px; font-weight: 400; padding-top: 85px; }

#menu_wrap { max-width: 1200px; margin: 0 auto 80px auto; border-bottom: 1px solid #ccc; } 
#menu_wrap .menu { overflow: hidden;  }
#menu_wrap .menu li { float: left; background: url(/img/quality/2depth_dot.png) no-repeat center right;  }
#menu_wrap .menu li:nth-child(2) { background: none; }
#menu_wrap .menu li a { font-size: 18px; color: #666; padding: 30px ; display: block; position: relative; line-height: 22px; letter-spacing: -1px; font-weight: 400;  }
#menu_wrap .menu li a.on { color:#0f573e; }

/* sub4_content1 css s */
/* #menu_wrap { margin-bottom: 20px; } */
#depth4_tabs { max-width: 1200px; margin: 0 auto 80px auto; }
#depth4_tabs .tabs { overflow: hidden; } 
#depth4_tabs .tabs li { width: 50%; float: left; }
#depth4_tabs .tabs li a { display: block; height: 61px; line-height: 61px; border: 1px solid #ccc; padding: 0 0 0 0; text-align: center; border-bottom: 1px solid #01593b; font-size: 18px; }
#depth4_tabs .tabs li a.active { position: relative; color: #fff; background: #01593b; border: 1px solid #01593b;  }
#depth4_tabs .tabs li a:hover { position: relative; color: #fff; background: #01593b; border: 1px solid #01593b; }

#sub4_content1_tab { max-width: 1200px; margin: 0 auto; }
#sub4_content1_tab .qa_management { margin-bottom: 150px; } 
#sub4_content1_tab .qa_management .summary { background: url(/img/quality/sub_bar.jpg) no-repeat left;  height: auto; padding: 2% 0 2% 35px; margin-bottom: 120px;  }
#sub4_content1_tab .qa_management .summary p { font-size: 16px; }
#sub4_content1_tab .qa_management img { margin-bottom: 60px; }
#sub4_content1_tab .qa_management .qa_content {  background-size: cover; height: 444px; position: relative; margin-bottom: 60px; }
#sub4_content1_tab .qa_management .qa_content p.content1 { position: absolute; top: -20px; left: 40%; text-align: center; width: 247px; } 
#sub4_content1_tab .qa_management .qa_content p.content2 { position: absolute; top: 270px; left: 25%; text-align: center; width: 120px; } 
#sub4_content1_tab .qa_management .qa_content p.content3 { position: absolute; top: 270px; left: 65%; text-align: center; width: 291px; } 

#sub4_content1_tab .qa_management .qa_img { }
#sub4_content1_tab .qa_management .qa_img ul { overflow: hidden; }
#sub4_content1_tab .qa_management .qa_img ul li { width: 32%; margin-right: 2%; float: left; }
#sub4_content1_tab .qa_management .qa_img ul li:nth-child(3) { margin-right: 0; }
#sub4_content1_tab .qa_management .qa_img ul li img { margin-bottom: 0; }

/* 아래부터는 품질관리프로세스 tab 영역 */
#sub4_content1_tab .qa_process { display:none; margin-bottom: 150px; }

/* sub4_content2 css s */
#sub4_content2 { max-width: 1200px; margin: 0 auto 150px auto; }
#sub4_content2 .test_wrap { position: relative; background: url(/img/quality/test.jpg) no-repeat center; background-size: cover; margin-bottom: 60px;  }
#sub4_content2 .test_wrap .text_wrap { padding: 30px; }
#sub4_content2 .test_wrap .text_wrap p { color: #fff; text-align: center; font-size: 18px; line-height: 1.7em; border: 1px solid #ccc; padding: 60px 50px;  }
#sub4_content2 .test_wrap .text_wrap span { font-size: 28px; font-weight: 400; line-height: 1.8em; }

#sub4_content2 .test_item { width: 200px; height: 50px; background: #01593b; margin-bottom: 20px; }
#sub4_content2 .test_item h3 { color: #fff; font-size: 18px; text-align: center; padding-top: 10px; font-weight: 400; }

#sub4_content2 table.test_item_table { border-collapse: collapse; width: 100%; border: 1px solid #666; } 
#sub4_content2 th { border: 1px solid #666; background:#e2e2e2; padding:8px; font-weight: 400; font-size: 17px; }
#sub4_content2 td { border: 1px solid #666; text-align:center; padding:15px 6px; font-weight: 300; }

#sub4_content2 .more { text-align: center; margin-top: 60px; }
#sub4_content2 .more .btn { border: 1px solid #999; border-color: rgba(153,153,153,.5); border-radius: 50px; line-height: 20px; font-size: 15px; padding: 10px 20px; color: #666; font-weight: 300;  }
#sub4_content2 .more a.btn:hover { background: #07442f; color:#fff; text-decoration:none; }
#sub4_content2 .more .btn .fa-angle-right { padding: 2px;  }


/* 일반 pc */
@media screen and (max-width:1280px) {
	
	/* sub4 공통 css  s */
	.sub4_banner .banner_wrap h2 { padding-left: 4%; }

	/* sub4_content1 css s */
	#sub4_content1_tab { padding: 0 2%; }

	#sub4_content1_tab .qa_management .qa_content p.content1 { position: absolute; top: 0; left: 40%; text-align: center; } 
	#sub4_content1_tab .qa_management .qa_content p.content2 { position: absolute; top: 270px; left: 20%; text-align: center; } 
	#sub4_content1_tab .qa_management .qa_content p.content3 { position: absolute; top: 270px; left: 70%; text-align: center; } 

	/* sub4_content2 css s */
	#sub4_content2 { padding: 0 2%; }

}


/* 테블릿 */
@media screen and (max-width:1024px) {
	
	/* sub4 공통 css  s */
	.sub4_banner { height: auto; }
	.sub4_banner .banner_wrap { max-width: 1024px; margin: 0 auto;  } 
	.sub4_banner .banner_wrap h2 { font-size: 30px; font-weight: 400; padding: 50px 0 50px 5%; }

	/* sub4_content1 css s */
	#sub4_content1_tab .qa_management .qa_content p.content1 { position: absolute; top: 0; left: 38%; text-align: center; } 
	#sub4_content1_tab .qa_management .qa_content p.content2 { position: absolute; top: 270px; left: 15%; text-align: center; } 
	#sub4_content1_tab .qa_management .qa_content p.content3 { position: absolute; top: 270px; left: 60%; text-align: center; } 


}

/* 소형 테블릿 */
@media screen and (max-width:768px) {

	/* sub4 공통 css  s */
	#menu_wrap .menu li { background: none; width: 50%; }
	#menu_wrap .menu li a { font-size: 16px; padding: 20px 0; text-align: center; }
	#menu_wrap .menu li a.on { color: #333; }

	/* sub4_content1 css s */
	#depth4_tabs .tabs li a { display: block; height: 61px; line-height: 61px; border: 1px solid #ccc; padding: 0 0 0 0; text-align: center; border-bottom: 1px solid #01593b; font-size: 16px; }

	#sub4_content1_tab .qa_management .qa_content p.content1 { position: absolute; top: 0; left: 33%; text-align: center; } 
	#sub4_content1_tab .qa_management .qa_content p.content2 { position: absolute; top: 270px; left: 12%; text-align: center; } 
	#sub4_content1_tab .qa_management .qa_content p.content3 { position: absolute; top: 270px; left: 65%; text-align: center; width: 30%; } 
	
}

/* 모바일 */
@media screen and (max-width:640px) {
	
	/* sub4 공통 css  s */
	#menu_wrap { max-width: 1200px; margin: 0 auto 40px ; border-bottom: 1px solid #ccc; } 

	/* sub4_content1 css s */
	#depth4_tabs { margin: 0 auto 40px auto; }
	#depth4_tabs .tabs li a { display: block; border: 1px solid #ccc; text-align: center; border-bottom: 1px solid #01593b; }
	#depth4_tabs .tabs li a.active { position: relative; color: #fff; background: #01593b; border: 1px solid #01593b;  }
	#depth4_tabs .tabs li a:hover { position: relative; color: #fff; background: #01593b; border: 1px solid #01593b; }

	#sub4_content1_tab { padding: 0 4%; }
	#sub4_content1_tab .qa_management { margin-bottom: 60px; }
	#sub4_content1_tab .qa_management  .summary { margin-bottom: 40px;  }
	#sub4_content1_tab .qa_management  .summary p { font-size: 15px; }
	#sub4_content1_tab .qa_management  img { margin-bottom: 40px; }

	#sub4_content1_tab .qa_management .qa_content p.content1 { position: absolute; top: 0; left: 28%; text-align: center; } 
	#sub4_content1_tab .qa_management .qa_content p.content2 { position: absolute; top: 270px; left: 3%; text-align: center; } 
	#sub4_content1_tab .qa_management .qa_content p.content3 { position: absolute; top: 270px; left: 65%; text-align: center; } 

	#sub4_content1_tab .qa_process { margin-bottom: 60px; }

	/* sub4_content2 css s */
	#sub4_content2 { padding: 0 4%; margin: 0 auto 60px auto; }
	#sub4_content2 .test_wrap .text_wrap p { color: #fff; text-align: center; font-size: 16px; line-height: 1.6em; border: 1px solid #ccc; padding: 50px 20px;  }
	#sub4_content2 .test_wrap .text_wrap span { font-size: 22px; font-weight: 400; line-height: 2em; }

	#sub4_content2 .test_item { width: 150px; height: 40px; background: #01593b; }
	#sub4_content2 .test_item h3 { color: #fff; font-size: 18px; text-align: center; padding-top: 5px; }
	#sub4_content2 table.test_item_table { border-collapse: collapse; width: 100%; border: 1px solid #666; } 
	#sub4_content2 th { border: 1px solid #666; background:#e2e2e2; padding:6px; font-weight: 400; font-size: 16px; }
	#sub4_content2 td { border: 1px solid #666; text-align:center; padding:15px 6px; font-weight: 300; }

}

/* 최소 사이즈 처리 */
@media screen and (max-width:480px) {

	/* sub4 공통 css  s */
	#wrap { min-width:260px; }
	.sub4_banner { height: 80px; }
	.sub4_banner .banner_wrap h2 { font-size: 23px; padding: 20px 0 0 20px; }
	#menu_wrap .menu li a { font-size: 14px; padding: 15px 0; }

	/* sub4_content1 css s */
	#sub4_content1_tab .qa_management .summary { background: url(/img/quality/sub_bar_b.jpg) no-repeat left;  height: auto; padding: 0 0 0 20px; margin-bottom: 60px; }
	#sub4_content1_tab .qa_management .qa_content {  background-size: cover; height: 444px; position: relative; margin-bottom: 100px; }
	#sub4_content1_tab .qa_management .qa_content p.content1 { position: absolute; top: 0; left: 5%; text-align: center; width: 90%; } 
	#sub4_content1_tab .qa_management .qa_content p.content2 { position: absolute; top: 350px; left: 0; text-align: center; } 
	#sub4_content1_tab .qa_management .qa_content p.content3 { position: absolute; top: 300px; left: 65%; text-align: center; } 

	#sub4_content1_tab .qa_management .qa_img ul li { width: 100%; margin-right: 0; margin-bottom: 20px; float: none; }
	#sub4_content1_tab .qa_management .qa_img ul li img { margin-bottom: 0; width: 100%; }

}