@charset "utf-8";

/* 공통 속성 */

body{margin : 0px auto;}
h1{text-align: center;}

.title_2dadan{font-weight:bold;margin : 0px auto;	color : #3B7EA8;
}

.group, .group1{margin : 0px auto;position: relative;display: block;}
.ces, .ces_connect, .ces_dimension, .fourerm16, .fourerm20, .fourerm25, .fourerm16_connect, .fourerm20_connect, .fourerm25_connect, .fourerm20_dimension, .fourerm25_dimension, .fourerm16_dimension{	position: relative;	background-repeat: no-repeat;}

.ces{background-image: url(/html2/product/images/ces.png);}
.ces_connect{background-image: url(/html2/product/images/ces_connect.png);}
.ces_dimension{background-image: url(/html2/product/images/ces_range.png);}
.fourerm16{background-image: url(/html2/product/images/4erm16.png);}
.fourerm20{background-image: url(/html2/product/images/4erm20.png);}
.fourerm25{background-image: url(/html2/product/images/4erm25.png);}
.fourerm16_connect, .fourerm20_connect, .fourerm25_connect{background-image: url(/html2/product/images/4erm16_sysdia.jpg);}
.fourerm16_dimension, .fourerm20_dimension, .fourerm25_dimension{background-image: url(/html2/product/images/4erm16_dimen.jpg);}

.purch{		background-color:#3B7EA8;		color: #FFF;		font-weight:bold;	}
.purch a {	color:#FFF;		}.purch a:hover{color:#F00;}
	

 /*pc버젼 :1024px ~ 최대*/
  @media(min-width:1024px){
	  

.title_2dadan{	width: 1024px;	-webkit-white-space:normal;    column-count: 2;	-moz-column-count:2;	-webkit-column-count:2;	word-break:break-all;	font-size:25px;		border-bottom:solid 2px #9F9FA0;	padding : 0px 0px 20px 0px;	}	
.text_right{text-align:right;margin: 0px 30px 0px 0px;	}
	  
.overview, .ces{height: 300px;}
.group{			width :1024px;	display: block;}
.ces, .fourerm16, .fourerm20, .fourerm25{	width : 250px;	margin-right: 25px;	display: inline-block;	float:right;	background-size: 250px;}
	  
.overview{	width :575px;	padding-right: 160px;	padding-left: 10px;	position: relative;	display: inline-block;}
.subtext{	color:#3B7EA8;	padding:8px 0px 8px 0px;	font-size:20px;}
.group1{	width :1024px;	display: block !important;}
.sub_memo2{width : 1024px !important;			-webkit-white-space:normal;            column-count: 2;			-moz-column-count:2;			-webkit-column-count:2;			word-break:break-all;	}
.ces_connect, .ces_dimension, .fourerm16_dimension, .fourerm16_connect, .fourerm20_dimension, .fourerm20_connect, .fourerm25_dimension, .fourerm25_connect{	width : 1024px !important;	display: block !important;	background-size: 1024px !important;}
	  
	  .ces_connect{ height: 400px !important; }
	  .ces_dimension{ height: 350px !important; }	  	  
	  
	  .fourerm16_dimension, .fourerm20_dimension, .fourerm25_dimension{ height: 850px !important; }
	  .fourerm16_connect, .fourerm20_connect, .fourerm25_connect{ height: 700px !important; }
	  
	  
.purch{		margin : 0px 85px 0px 25px;		margin-top: 230px;			text-align: center;			background-color:#3B7EA8;
			border-radius:35px;			width : 180px;			color: #FFF;			padding:8px;			border: 10px double #FFFFFF;			}
.purch a {color:#FFF;		}.purch a:hover{color:#F00;}
	  
	  
	  
	
}





 /*태블릿버전: 768px ~ 1023px* and앞뒤로 띄어쓰기 하기 */
	  
  @media(min-width:768px) and (max-width:1023px){ 
  
.title_2dadan{	width: 768px;;	-webkit-white-space:normal;    column-count: 2;
-moz-column-count:2;	-webkit-column-count:2;	word-break:break-all;
font-size:20px;		border-bottom:solid 2px #9F9FA0;	padding : 0px 0px 20px 0px;	}	
.text_right{text-align:right;margin: 0px 30px 0px 0px;	}
.overview, .ces, .fourerm16, .fourerm20, .fourerm25{		height: 300px;}
.group{	width :768px;	display: block;}
.ces, .fourerm16, .fourerm20, .fourerm25{	width : 250px;	margin-right: 25px;	display: inline-block;	float:right;	background-size: 250px;}
.overview{	width :310px;	padding-right: 160px;	padding-left: 10px;	position: relative;
	display: inline-block;}
.subtext{	color:#3B7EA8;	padding:8px 0px 8px 0px;	font-size:20px;}
.group1{ width :768px !important;	display: block;}
 .sub_memo{	display: block !important;	width: 380px;	position: relative;	float: none;	  height: auto;}
.sub_memo2{	width: 768px !important;	display: block;	position: relative;	-webkit-white-space:normal;column-count: 1;-moz-column-count:1;-webkit-column-count:1;word-break:break-all;	}
.ces_connect, .ces_dimension, .fourerm16_dimension, .fourerm20_dimension, .fourerm25_dimension, .fourerm16_connect, .fourerm20_connect, .fourerm25_connect{	width : 768px !important;	height: 300px;	display: block;	background-size: 768px !important;	position: relative;}
	  
.ces_dimension{height: 270px !important;}	  
.ces_connect {height: 300px !important;}
	  
.fourerm16_dimension, .fourerm20_dimension, .fourerm25_dimension{height: 670px !important;}	  
	  .fourerm16_connect, .fourerm20_connect, .fourerm125_connect{
		 height: 550px !important;
	  }
	  
	  

.purch{		margin : 0px 85px 0px 25px;		margin-top: 230px;			text-align: center;
background-color:#3B7EA8;			border-radius:35px;			width : 180px;
color: #FFF;	padding:8px;			border: 10px double #FFFFFF;		}
.purch a {color:#FFF;	}.purch a:hover{color:#F00;}
  
	  
	  
	  
}



/* 모바일 버젼 : 최소 ~ 767px */
  @media(max-width:767px){

.title_2dadan{	width: 380px;	text-align: center;word-break:break-all;font-size:20px;	border-bottom:solid 2px #9F9FA0;font-weight:bold;}	
.text_right{text-align:center;	}
.overview{height: 300px;   display: block !important; position: relative !important; }
	  

	  
.group{	width :380px;	height  :650px;	display: block !important;}
.ces, .fourerm16, .fourerm20, .fourerm25{	margin-top:0px !important;	width : 380px;	display: block; height: 350px;	background-size: 380px;}
	  .shsdl{	margin-top:0px !important;	width : 380px;	display: block;	background-size: 380px;}
	  

.overview{	width :380px;	height: auto !important;	position: relative;	display: block;}
.subtext{		width :380px !important;	height: 30px !important;	color:#3B7EA8;display: block !important;	font-size:20px;}
.group1{		width :380px;	display: block !important;	  }
.sub_memo{	display: block !important;	width: 380px;	position: relative;	float: none;	  height: auto;}
.sub_memo2{	display: block !important;	width: 380px;	  height: auto;float: none;}
.ces_connect, .ces_dimension, .fourerm16_dimension,.fourerm20_dimension, .fourerm25_dimension, .fourerm16_connect, .fourerm20_connect, .fourerm25_connect{	width : 380px !important;	height: 250px;	position: relative;	display: block;	background-size: 380px !important;}
	  
	  .ces_connect{height: 140px;}
	  .ces_dimension{height: 150px;}
	  .fourerm16_dimension,  .fourerm20_dimension, 	  .fourerm25_dimension{height: 360px;}
	  
	  .fourerm16_connect, .fourerm20_connect, .fourerm25_connect{
		  height: 290px;
	  }
	  

.purch, .purch a{	visibility: hidden;		}
}