/*---------------------------------------------------basic--------------------------------------------------*/
		
			/* reset-css  */
			/* 요소(element) 여백 초기화  */
			*{margin:0;padding:0;}
			/* 제목요소 */
			h1, h2, h3, h4, h5, h6 { font-size:100%;   font-weight:normal;} 
			/* 테두리 없애기 */
			fieldset, img, abbr,acronym { border:0 none; } 
			/* 목록 */
			 ul { list-style:none; }
			/* 테이블 - 마크업에 'cellspacing="0"' 지정 함께 필요 */
			table {border-collapse: separate;border-spacing:0;border:0 none;}
			caption, th, td {text-align:left;font-weight: normal;}
			/* 텍스트 관련 요소 초기화 */
			address, caption, strong, em, cite {font-weight:normal;font-style:normal;}
			ins { text-decoration:none; }
			del { text-decoration:line-through; }
			/* 인용문 */
			blockquote:before, blockquote:after, q:before, q:after { content:""; }
			blockquote,q { quotes:"" ""; }
			/* 수평선*/
			hr { display:none; }
			/* reset-css  */
			*{margin:0px; padding:0px; -webkit-box-sizing: border-box;
 			-moz-box-sizing: border-box; box-sizing: border-box;}
 			/*보더와 패딩을쓸때(마진아님) 위드스값에 포함시켜서 별도의계산없이 편하게쓸수있음*/
 			

					.hide{display:none;}
					a{text-decoration:none;color:#000000;}
					li{list-style:none;}
					.block{display:block;}
					.border_right_none{border-right:0px solid #fff;}
					.border_left_none{border-left:0px solid #fff;}
					.border_top_none{border-top:0px solid #fff;}
					.border_bottom_none{border-bottom:0px solid #fff;}
					.border_none{border:0px solid #fff;}
					
					/*전체*/
					
					.inline{
						display: inline-block;
						*display: inline;
						*zoom:1;
						}


					body {
						overflow-y:scroll;
						font-family:"NanumBarunGothic", "나눔바른고딕";
						font-size:100%;
						line-height: inherit;
						color: #000;
						}



/*---------------------------------------------------basic-end----------------------------------------------*/



@font-face{
  font-family:"NanumBarunGothic"; 
  src:url("/css/fonts/NanumBarunGothic.eot");
  src:local(※), url("/css/fonts/NanumBarunGothic.woff")format("woff");
}

/*-----------font----------------------------------------------------------------------------------------*/


.container{width:100%;}
.odm_more_btn{display:none;}




.group_header{width:100%;
			   height:230px;
			   float:left;
			   background-repeat:no-repeat;
			   text-align:center;
			   padding-top:47px;
			   }

.group_header h2{width:1%;
				   height:183px;
				   text-align:center;
				   display:table-cell;
				   vertical-align:middle;
				   font-size:44px;
				   color:#fff;
				   }


.group_header span{display:block;
					 font-size:16px;
					 color:#fff;
					 }
/*OEM/ODM 헤더*/

.odm_header{background:url('/contents/images/odm_bg.png');}



.group_wrap{width:67%;
			margin:0 auto;}


.topline{position:relative;float:left; background:#fafafa; width:100%; padding-top:5px; padding-bottom:5px; border-bottom:1px solid #E2E2E2;}
.topline div{width:67%; margin:0 auto; background-repeat:no-repeat; background-position:0% 0%;}
.topline p{font-size:13px; color:#292929;;}
.topline p a{color:#5C5C5C;}
.topline p a:hover{color:#BE0445;}
.topline p span{font-size:8px; padding:0 5px;line-height:2.2em; }
.topline p .r_txt{color:#BE0445;}



.group_contents{width:100%;
				float:left;
				margin-top:72px;
				}



/*ODM/OEM table*/





/*공통 table-------------------------------------------------------------------------------------------------*/

.odm_table_wrap{width:1275px;
				margin:0 auto;
				}

#odm_table_left{width:637.5px;
				float:left;
				height:635.75px;
				margin-bottom:20px;
				border:5px solid #d7d7d7;
				border-right:0px solid #d7d7d7;
				overflow:hidden;
				position:relative;
				z-index:3;
				transition:all 0.5s;
				-webkit-transition:all 0.5s;
				}
#odm_table_right{width:637.5px;
				float:left;
				height:635.75px;
				margin-bottom:20px;
				border:5px solid #d7d7d7;
				border-left:0px solid #d7d7d7;
				overflow:hidden;
				position:relative;
				z-index:3;
				transition:all 0.5s;
				-webkit-transition:all 0.5s;
				}


#odm_table_left>div,#odm_table_right>div{width:316.25px;
									 	 height:314px;
										 float:left;
										 border-right:1px solid #cccccc;
										 border-bottom:1px solid #cccccc;
										 text-align:center;
										 position:relative;
										 }

#odm_table_left>div p,#odm_table_right>div p{width:100%;
											 color:#60b2c8!important;
											 font-size:40px;
											 display:inline-block;
											 position:absolute;
											 top:12%;
											 color:#000;
											 z-index:1;
											 opacity:0;
											 transition:all 0.5s;
											 -webkit-transition:all 0.5s;
											 }

#odm_table_left>div p span,#odm_table_right>div p span{display:block;
													   font-size:18.35px;
													   color:#fff;
													   }

#odm_table_left>div a,#odm_table_right>div a{width:100%;
											 font-size:15px;
											 display:inline-block;
											 position:absolute;
											 bottom:18%;
											 text-align:left;
											 color:#fff;
											 z-index:1;
											 opacity:0;
											 transition:all 0.5s;
											 -webkit-transition:all 0.5s;}

#odm_table_left>div a span,#odm_table_right>div a span{width:auto;
													   padding:12px 20px;
													   border:2px solid #fff;
													   }  


/*left-box*/

#odm01 p,#odm05 p,#odm07 p{left:0%;
							text-align:left;
						    padding-left:20%;}
#odm01 a,#odm05 a,#odm07 a{left:0%;
						    text-align:left;
						    margin-left:20%;}


/*center-box*/
#odm04 p,#odm09 p,#odm13 p{left:0%;
							text-align:center;
						    padding:0 12%;}
#odm04 a,#odm09 a,#odm13 a{left:30%;
						   text-align:center;}

/*right-box*/
#odm12 p,#odm16 p{right:0%;
				  text-align:right;
				  padding:0 12%;}
#odm12 a,#odm16 a{right:-50%;
				  text-align:right;}


#odm_table_left>div:hover p{opacity:1;
						    z-index:4;}

#odm_table_left>div:hover a{opacity:1;
						    z-index:4;}
#odm_table_right>div:hover p{opacity:1;
						    z-index:4;}

#odm_table_right>div:hover a{opacity:1;
						    z-index:4;}


#odm_table_left div img,#odm_table_right div img{width:auto;
												 top:10%;
												 left:0%;
												 z-index:3;
												 position:relative;
											 	 transition:all 0.5s;
												 -webkit-transition:all 0.5s;}

#odm01,#odm04,#odm05,#odm07,#odm09,#odm13,#odm12,#odm16{background:#ebebeb;}
#odm10,#odm12,#odm14,#odm16{border-right:0px solid #ccc!important;}
#odm07,#odm08,#odm15,#odm16{border-bottom:0px solid #ccc!important;}
#odm02,#odm03,#odm06,#odm08,#odm10,#odm11,#odm14,#odm15{position:relative;
												        background:#fbfbfb;
														z-index:-1;
														font-size:0px;}
.odm_more_btn{position:absolute;
			  right:0px;
			  bottom:0px;
			  height:37px;
			  z-index:5;
			  }

.odm_more_btn img{top:0px!important;
				  transition:all 0.3s;
				  -webkit-transition:all 0.3s;
				  }

#odm_table_left>div:hover figure img{opacity:0;
									 left:0!important;}
#odm_table_right>div:hover figure img{opacity:0;
									  left:0!important;}


/*공통 END-------------------------------------------------------------------------------------------------*/

#odm01:hover img{left:100%;}
#odm01:hover>div{left:0%;}
				
				.odm_bg01{width:200.5%;
				height:100%;
				position:absolute;
				background:#252525;
				z-index:1;
				top:0;
				left:-200.5%;
				transition:all 0.5s;
				-webkit-transition:all 0.5s;}

#odm04{transition:all 0.5s;
-webkit-transition:all 0.5s;}
#odm04{z-index:-1;}
#odm04:hover img{top:-95%;}
#odm04:hover>div{top:-100.5%;}

			.odm_bg04{width:100%;
				height:200.5%;
				position:absolute;
				background:#252525;
				z-index:-1;
				top:100.5%;
				left:0%;
				transition:all 0.5s;
				-webkit-transition:all 0.5s;}

#odm05:hover img{left:100%;}
#odm05:hover>div{left:0%;}
				
				.odm_bg05{width:200.5%;
				height:100%;
				position:absolute;
				background:#252525;
				z-index:1;
				top:0;
				left:-200.5%;
				transition:all 0.5s;
				-webkit-transition:all 0.5s;}

#odm07:hover img{left:100%;}
#odm07:hover>div{left:0%;}
				
				.odm_bg07{width:200.5%;
				height:100%;
				position:absolute;
				background:#252525;
				z-index:1;
				top:0;
				left:-200.5%;
				transition:all 0.5s;
				-webkit-transition:all 0.5s;}

#odm09:hover img{top:110%;}
#odm09:hover>div{top:0%;}

			.odm_bg09{width:100%;
				height:200.5%;
				position:absolute;
				background:#252525;
				z-index:1;
				top:-200.5%;
				left:0%;
				transition:all 0.5s;
				-webkit-transition:all 0.5s;}

#odm12 img{margin-top:30%;}
#odm12 figure img{margin-top:0%;}
#odm12:hover img{left:-100%;}
#odm12:hover>div{left:-100%;}

			.odm_bg12{width:200.5%;
				height:100%;
				position:absolute;
				background:#252525;
				z-index:1;
				top:0px;
				left:100.5%;
				transition:all 0.5s;
				-webkit-transition:all 0.5s;}



#odm13{z-index:-1;}
#odm13:hover img{top:-95%;}
#odm13:hover>div{top:-100.5%;}

			.odm_bg13{width:100%;
					height:200.5%;
					position:absolute;
					background:#252525;
					z-index:-1;
					top:100.5%;
					left:0%;
					transition:all 0.5s;
					-webkit-transition:all 0.5s;}

#odm16:hover img{left:-100%;}
#odm16:hover>div{right:0%;}

			.odm_bg16{width:200.5%;
				height:100%;
				position:absolute;
				background:#252525;
				z-index:1;
				top:0px;
				right:-200.5%;
				transition:all 0.5s;
				-webkit-transition:all 0.5s;}


			  


/*line-공통*/

.group_botline{width:100%;
			   float:left;
			   margin-top:52px;
			  /* border-top:1px solid #c4c4c4;*/
			   text-indent:-9999px;
			   }










/*---------------------------------------------------------------------------------------------------------------------*/



/*media query*/









@media screen and (min-width:320px) and (max-width:660px) {
.topline div{width:96%;
			 margin-left:4%;}


.group_header{height:150px}

.group_header h2{height:103px;
				 font-size:26px;
				 vertical-align:middle;}

.group_header span{font-size:12px;}

.group_contents{margin-top:10px!important;}
			   

.group_mobile_menu{display:block;}
.group_wrap{width:100%;
			margin:0 auto;}

.group_wrap{width:320px;}

.group_contents{width:320px;
				margin-top:52px;
				}

.odm_table_wrap{width:100%;}
			   
#odm_table_left{width:100%;
				float:none;
				margin:0 auto;
				height:305px;
				margin-bottom:0px;
				border:5px solid #d7d7d7;
				border-right:5px solid #d7d7d7;
				border-bottom:0px solid #d7d7d7;
				}
#odm_table_right{width:100%;
				float:none;
				margin:0 auto;
				height:305px;
				margin-bottom:20px;
				border:5px solid #d7d7d7;
				border-left:5px solid #d7d7d7;
				border-top:1px solid #cccccc;
				}

#odm_table_left>div,#odm_table_right>div{width:50%;
										 height:150px;}
#odm_table_left>div img,#odm_table_right>div img{width:70%;}


#odm_table_left>div p,#odm_table_right>div p{font-size:20px;}

#odm_table_left>div p span,#odm_table_right>div p span{font-size:10px;
													   line-height:1.2em;
													   width:100%!important;}

#odm_table_left>div a,#odm_table_right>div a{font-size:12px;}

#odm_table_left>div a span,#odm_table_right>div a span{padding:6px 10px;}  

/*center-box*/
#odm04 a,#odm09 a,#odm13 a{left:20%;}

/*right-box*/
#odm12 a,#odm16 a{right:-30%;}


#odm04:hover>div{top:-101%;}

			.odm_bg04{height:201%;
				top:101%;}

#odm13:hover>div{top:-101%;}

			.odm_bg13{height:201%;
				top:101%;}

#odm02,#odm04,#odm06,#odm08{border-right:0px solid #ccc!important;}
#odm03,#odm04{border-bottom:0px solid #fff!important;}
.odm_more_btn{width:20px;
			  height:20px;
			  }
.odm_more_btn img{width:100%!important;}


}



@media screen and (min-width:660px) and (max-width:960px) {


.group_header{height:176px}

.group_header h2{height:129px;
				 font-size:30px;}

.group_header span{font-size:14px;}

.group_contents{margin-top:24px!important;}

.group_wrap{width:660px;}

.group_contents{width:660px;
				margin-top:52px;
				}

.odm_table_wrap{width:100%;}
			   
#odm_table_left{width:637.5px;
				float:none;
				margin:0 auto;
				height:633px;
				margin-bottom:0px;
				border:5px solid #d7d7d7;
				border-right:5px solid #d7d7d7;
				border-bottom:0px solid #d7d7d7;
				}
#odm_table_right{width:637.5px;
				float:none;
				margin:0 auto;
				height:633px;
				margin-bottom:20px;
				border:5px solid #d7d7d7;
				border-left:5px solid #d7d7d7;
				border-top:1px solid #cccccc;
				}

#odm_table_left>div,#odm_table_right>div{width:50%;}

#odm02,#odm04,#odm06,#odm08{border-right:0px solid #ccc!important;}
#odm03,#odm04{border-bottom:0px solid #fff!important;}			   

}


@media screen and (min-width:960px) and (max-width:1275px) {

.container{width:100%!important;
		   overflow:hidden;}
.group_header{height:226px}

.group_header h2{height:179px;
				 font-size:34px;}

.group_header span{font-size:15px;}

.group_wrap{width:960px;
			overflow:hidden!important;}

.odm_table_wrap{width:960px;
				margin:0 auto;
				overflow:hidden;}

#odm_table_left{width:50%;
				float:left;
				height:490px;
				margin-bottom:20px;
				border:5px solid #d7d7d7;
				border-right:0px solid #d7d7d7;
				overflow:hidden;
				position:relative;
				z-index:3;
				transition:all 0.5s;
				-webkit-transition:all 0.5s;
				}
#odm_table_right{width:50%;
				float:left;
				height:490px;
				margin-bottom:20px;
				border:5px solid #d7d7d7;
				border-left:0px solid #d7d7d7;
				overflow:hidden;
				position:relative;
				z-index:3;
				transition:all 0.5s;
				-webkit-transition:all 0.5s;
				}


#odm_table_left>div,#odm_table_right>div{width:50%;
									 	 height:240px;
										 float:left;
										 border-right:1px solid #cccccc;
										 border-bottom:1px solid #cccccc;
										 text-align:center;
										 position:relative;
										 }


#odm_table_left>div img,#odm_table_right>div img{width:80%;}


#odm_table_left>div p,#odm_table_right>div p{font-size:25px;}

#odm_table_left>div p span,#odm_table_right>div p span{font-size:14px;
													   line-height:1.2em;}

#odm_table_left>div a,#odm_table_right>div a{font-size:13px;}

#odm_table_left>div a span,#odm_table_right>div a span{padding:6px 10px;}  

/*center-box*/
#odm04 a,#odm09 a,#odm13 a{left:30%;}

/*right-box*/
#odm12 a,#odm16 a{right:-48%;}

#odm16 img{width:70%!important;
		   top:10%!important;}

#odm16 figure img{width:100%!important;
				 top:0%!important;}

.odm_more_btn{width:30px;
			  height:30px;
			  }
.odm_more_btn img{width:100%!important;}


}





@media screen and (min-width:1276px) and (max-width:1543px) {


.group_header{height:226px}

.group_header h2{height:226px;
				 font-size:34px;}

.group_header span{font-size:15px;}

.group_topline{margin-left:1%;
			   width:99%!important;
			   }

.group_wrap{width:960px;
			overflow:hidden!important;}

.odm_table_wrap{width:960px;
				margin:0 auto;
				overflow:hidden;}

#odm_table_left{width:50%;
				float:left;
				height:490px;
				margin-bottom:20px;
				border:5px solid #d7d7d7;
				border-right:0px solid #d7d7d7;
				overflow:hidden;
				position:relative;
				z-index:3;
				transition:all 0.5s;
				-webkit-transition:all 0.5s;
				}
#odm_table_right{width:50%;
				float:left;
				height:490px;
				margin-bottom:20px;
				border:5px solid #d7d7d7;
				border-left:0px solid #d7d7d7;
				overflow:hidden;
				position:relative;
				z-index:3;
				transition:all 0.5s;
				-webkit-transition:all 0.5s;
				}


#odm_table_left>div,#odm_table_right>div{width:50%;
									 	 height:240px;
										 float:left;
										 border-right:1px solid #cccccc;
										 border-bottom:1px solid #cccccc;
										 text-align:center;
										 position:relative;
										 }


#odm_table_left>div img,#odm_table_right>div img{width:80%;}


#odm_table_left>div p,#odm_table_right>div p{font-size:25px;}

#odm_table_left>div p span,#odm_table_right>div p span{font-size:14px;
													   line-height:1.2em;}

#odm_table_left>div a,#odm_table_right>div a{font-size:13px;}

#odm_table_left>div a span,#odm_table_right>div a span{padding:6px 10px;}  

/*center-box*/
#odm04 a,#odm09 a,#odm13 a{left:30%;}

/*right-box*/
#odm12 a,#odm16 a{right:-48%;}

#odm16 img{width:70%!important;
		   top:10%!important;}

#odm16 figure img{width:100%!important;
				 top:0%!important;}

.odm_more_btn{width:30px;
			  height:30px;
			  }
.odm_more_btn img{width:100%!important;}
}