/* ---------- 웹표준 코딩시작 ---------- */

/* 웹표준 코딩의 설명

 margin  					 				 // 외부의 여백
 padding				  					 // 내부의 여백 ex) padding:위px 오른쪽px 아래px 왼쪽px;
 text-align:center; 						 // 가운데 설정
 margin:0 auto; 							 // 가운데정렬
 text-indent:-9999px; 		 				 // 글씨를 치워주기 위해 사용 함.
 
 h1.indent{
  text-indent:-9999px; 
  width:400px;
  height:100px;
  background:transparent url("logo_pipecivil.png") no-repeat ;
 }

 line-height:38px; 							// 세로 가운데정렬 (줄간격)
 
 opacity:0.05; 								// 투명도 , 숫자가 낮아질수록 투명도는 높아진다.
 filter:Alpha(opacity=5);  					// 투명도 , 숫자가 낮아질수록 투명도는 높아진다. - 윈도우 8버젼이상부터 적용 (둘다 해야함.)
 background-position:-123px -366px;         // 배경이미지의 위치지정


 닷핵 : #header_2_group_right li.r_box01 {padding:3px 0px 0px 0px;} IE 계열
        #header_2_group_right li.r_box01 {.padding:2px 0px 0px 0px;} 비 IE 계열 (익스플로러 6~7에만 적용)
 닷핵 : IE 와 비 IE계열에서 1px의 차이가 나기 때문에 중요한 여백설정시 닷핵을 추가한다. 
 
  ## 바닥에 DIV를 고정시키는 태그
  #bottomDiv {position:fixed; bottom:0px; left:0px; width:100%; height:50px; } 
  <div id="bottomDiv" style="background:#F5F5F5;border:solid 1px #DFDFDF;">bottom</div> 
 
 overflow:scroll
 
*/

/* ---------- 공통설정 ---------- */

body {margin:0;padding:0;background-color:#FFFFFF;}

/*
스크린 사이즈에 따른, Media 설정
0~320 : 아이폰3 ~ 4s
360   : 갤럭시노트 3, 4, 갤럭시 S5
375   : 아이폰 6
384   : LG optimus G, View
400   : 갤럭시 노트 1
414   : 아이폰 6 Plus
480   : 아이폰 4s 가로모드
600   : G Pad 8.3, 넥서스 7
768   : 아이패드
800   : 갤럭시 탭 S, 넥서스 10
970~  : PC화면
*/

@media only screen and (min-width:0px) and (min-width:320px)
{
.searchBox {width:95%;height:25px;border:none;padding:0px 0px 0px 5px;}
div,td {font-size:12px}
}	
@media only screen and (min-width:360px) 
{
.searchBox {width:95%;height:28px;border:none;padding:0px 0px 0px 5px;}
div,td {font-size:12px}
}
@media only screen and (min-width:375px) 
{
.searchBox {width:95%;height:29px;border:none;padding:0px 0px 0px 5px;}
div,td {font-size:13px}
}
@media only screen and (min-width:384px) 
{
.searchBox {width:95%;height:30px;border:none;padding:0px 0px 0px 5px;}
div,td {font-size:14px}
}
@media only screen and (min-width:400px) 
{
.searchBox {width:95%;height:32px;font-size:15px;border:none;padding:0px 0px 0px 5px;}
div,td {font-size:15px}
}
@media only screen and (min-width:414px) 
{
.searchBox {width:95%;height:33px;font-size:16px;border:none;padding:0px 0px 0px 5px;}
div,td {font-size:16px}
}
@media only screen and (min-width:480px) 
{
.searchBox {width:95%;height:40px;font-size:17px;border:none;padding:0px 0px 0px 5px;}
div,td {font-size:17px}
}
@media only screen and (min-width:570px) and (max-width:589px) 
{
.searchBox {width:95%;height:45px;font-size:18px;border:none;padding:0px 0px 0px 5px;}
div,td {font-size:18px}
}
@media only screen and (min-width:600px) 
{
.searchBox {width:95%;height:50px;font-size:20px;border:none;padding:0px 0px 0px 10px;}
div,td {font-size:20px}
}
@media only screen and (min-width:768px) 
{
.searchBox {width:95%;height:65px;font-size:25px;border:none;padding:0px 0px 0px 10px;}
div,td {font-size:25px;}
}
@media only screen and (min-width:800px) 
{
.searchBox {width:95%;height:68px;font-size:27px;border:none;padding:0px 0px 0px 10px;}
div,td {font-size:27px;}
}  
@media only screen and (min-width:970px) 
{
.searchBox {width:95%;height:82px;font-size:33px;border:none;padding:0px 0px 0px 10px;}
div,td {font-size:33px;font-weight:bold;}
}
@media only screen and (min-width:1200px) 
{
.searchBox {width:95%;height:104px;font-size:40px;border:none;padding:0px 0px 0px 10px;}
div,td {font-size:40px;font-weight:bold;}
}  
	
/* ---------- 라인설정 ---------- */
		   
#wLine01 {float:left;width:100%;height:1px}  /* 회색 width 라인 */
#wLine02 {float:left;width:100%;height:2px}  /* 회색 width 라인 */ 	 

/* ----- 전체 레이아웃 폼 속성 ----- */
#service_start {width:100%;height:100%;margin:0 auto}
   #logoLine {float:left;width:100%;background-color:#FFFFFF;padding:13px 0px 10px 0px;margin:0px 0px 0px 0px;}
   #manuLine {float:left;width:100%;background-color:#F7F7F7;padding:3px 0px 5px 0px;}
   #conLine {float:left;width:100%;}
   #bannerLine {float:left;width:100%;}
   #titleLine {float:left;width:100%;}
   #specLine {float:left;width:100%;background-color:#F7F7F7;}
   #orderLine {float:left;width:100%;background-color:#F7F7F7;}
   #category {float:left;width:100%;padding:5px 0px 6px 0px;}
   #telLine {float:left;width:100%;background-color:#FED116;}
   #copyright {float:left;width:100%;background-color:#424242;padding:3% 0px 3% 0px;}
   #mobilePcVersion {float:left;width:100%;background-color:#424242;padding:0px 0px 11% 0px;}   
   
/* ----- 로고라인 폼 속성 ----- */
   #logoLineL {float:left;width:30%;text-align:center;padding:4px 0px 0px 0px;}
   #logoLineM {float:left;width:35%;text-align:center;padding:6px 0px 0px 0px;}
   #logoLineR {float:left;width:35%;text-align:center;padding:0px 0px 0px 0px;}
      #logoLineRicon01 {float:left;width:33%;text-align:center;padding:0px 0px 0px 0px;}
	  #logoLineRicon02 {float:left;width:34%;text-align:center;padding:0px 0px 0px 0px;}
	  #logoLineRicon03 {float:left;width:33%;text-align:center;padding:0px 0px 0px 0px;}
	  
/* ----- 메뉴라인 폼 속성 ----- */
   #manuLine01 {float:left;width:16%;}
   #manuLine02 {float:left;width:23%;}
   #manuLine03 {float:left;width:15%;}
   #manuLine06 {float:left;width:34%;}
   #manuLine51 {float:left;width:33%;}
   #manuLine71 {float:left;width:23%;}
   #manuLine72 {float:left;width:23%;}
   #manuLine96 {float:left;width:23%;}
   #manuLine97 {float:left;width:23%;}
   #manuLine98 {float:left;width:33%;}
   
   #manuLine25 {float:left;width:25%;}
   #manuLine33 {float:left;width:33%;}
   #manuLine34 {float:left;width:34%;}
   
	  
/* ----- 메뉴라인 폼 속성 ----- */
   #titleLineTitle {float:left;width:96%;padding:4% 0px 0% 4%;}
   #titleLineCategory {float:left;width:97%;text-align:right;padding:0% 3% 1% 0%;}
   #titleLineCategoryCon {float:left;width:100%;padding:0% 0% 0% 0%;}
      #titleLineCategoryCon33 {float:left;width:33%;text-align:center;padding:2% 0% 2% 0%;}
	  #titleLineCategoryCon34 {float:left;width:34%;text-align:center;padding:2% 0% 2% 0%;}
   #titleLineRank {float:left;width:100%;padding:4% 0% 2% 0%;}
   
   
/* ----- 컨텐츠라인 폼 속성 ----- */
   #ConLinePic {float:left;width:35%;}
   #ConLineText {float:left;width:63%;padding:0px 0px 0px 2%;}
   	#ConLineText01 {float:left;width:100%;padding:10% 0px 0px 0px;}
	#ConLineText02 {float:left;width:100%;padding:1% 0px 0px 0px;}
	#ConLineText03 {float:left;width:100%;padding:7% 0px 0px 0px;}
    #ConLineText04 {float:left;width:100%;padding:1% 0px 0px 0px;}
   
   /* 상세설명 타이틀 */
   #ConLineIcon {float:left;width:10%;}
   #ConLineTitle {float:left;width:90%;padding:7px 0px 0px 0px;}
   
   /* 검색창 */
   #ConLineSearch {float:left;width:78%;padding:0px 0px 0px 2%;}
   #ConLineSearchIcon {float:left;width:20%;}
   
/* ----- 주문접수 폼 속성 ----- */
   
   /* 오더 */
   #orderLineTitle {float:left;width:25%;padding:7px 0px 7px 3%;}
   #orderLineContents {float:left;width:72%;padding:7px 0px 7px 0px;}
   
/* ----- 스펙 폼 속성 ----- */
   
   /* 스펙 */
   #specLineTitle {float:left;width:20%;padding:7px 0px 7px 2%;}
   #specLineContents {float:left;width:78%;padding:7px 0px 7px 0px;}
   
/* ----- 카테고리 폼 속성 ----- */
   
   /* 카테고리 */
   #CategoryIcon {float:left;width:10%;}
   #CategoryTitle {float:left;width:90%;padding:7px 0px 0px 0px;}
   #CategoryTitle100 {float:left;width:98%;padding:2% 0px 2% 2%;}
   
   #CategoryIcon02 {float:left;width:10%;padding:0px 0px 0px 7%;}
   #CategoryTitle02 {float:left;width:83%;padding:7px 0px 0px 0px;}
	
/* ----- 메뉴라인 폼 속성 ----- */
   #telLineL {float:left;width:9%;padding:0px 0px 0px 1%;}
   #telLineM {float:left;}
   #telLineR {float:left;width:30%;padding:0px 0px 0px 2%;}
   #telLineALL {float:left;padding:0px 0px 0px 10%;}
	
/* ----- 카피라인 폼 속성 ----- */
   #copyrightText {float:left;width:100%;text-align:center;background-color:#424242;padding:2px 0px 0px 0px;}
      #copyrightIcon {float:left;width:30%;text-align:center;background-color:#424242;padding:0px 0px 0px 0px;}
	  #copyrightContents {float:left;width:70%;text-align:left;background-color:#424242;padding:4px 0px 0px 0px;}
	  
/* ----- 고정 폼 속성 ----- */
   #FixLineIcon {position:fixed;bottom:11%;left:0px;width:100%;height:7%;}
      #FixIconLeft {float:left;width:48%;height:9%;text-align:left;padding:0px 0px 0px 2%;}
      #FixIconRight {float:left;width:48%;height:9%;text-align:right;padding:0px 2% 0px 0px;}
   
   #FixLineManu {position:fixed;bottom:0px;left:0px;width:100%;height:9%;background-color:#424242;}