.screen1{
	top: 30px;
	
	display: block;
	position: absolute;
	visibility: hidden;
	
}
.screen{
	width: 100%;
	height: auto;
	margin-bottom: 25px;
		
	position: relative;
	display: block;

	
	
}


	.area_left, .area_right{
		width: 50%;

		
		position: relative;
		display: inline-block;
		float: left;
		
		margin-bottom: 25px;
	}

.l_title, .r_title{
	text-align: center;
	padding-top: 4%;
	
	width: 100%;
	float:  left;
	padding-bottom: 5%;
	font-size: 1.8em;

	

	
	position: relative;
	display: inline-block;	
}

.l_title{}
.r_title{}


.area_left{
	



}

.h_1, .h_2{
	width: 100%;
	
	height: 0px;
	
	padding-bottom: 30%;
	display: block;
	
	

	
}



.area_right{



	float:  left;	

}
.l1, .l2, .l3, .l4{
	width: 35%;
	
	margin: 7%;
	
	height: 0px;
	
	padding-bottom: 35.1%;
	display: inline-block;
	float: left;
	
	text-align: center;

	background-size: 50%;
	background-repeat: no-repeat;
	background-position: center;
	


	
	box-shadow: 1px 2px 2px 2px rgb(0 0 0 / 20%);
}
.l1{
	
	
	background-image: url(/html2/sab/images/after.svg);

		
		
		
}

.menu_t{
	margin: 0px auto;
	width: 80%;
	font-size: 1em;
	
	margin-top: 5%;
	padding: 10px;
	border-radius: 10px;;
	
	color: #161616;
	opacity: 0.8;
	
	
}

.menu_b{
	margin: 0px auto;
	width: 80%;
	font-size: 0.7em;
	
	margin-top: 49%;
	padding: 10px;
	border-radius: 10px;;
	
	color: #161616;
	opacity: 0.8;
	
	
}



.l2{
	
	
	background-image: url(/html2/sab/images/tr.svg);
}
.l3{
	
	
	background-image: url(/html2/sab/images/asbuy.svg);
}
.l4{
	
	
	background-image: url(/html2/sab/images/survey.svg);
}





.r1, .r2, .r3, .r4{
	width: 35%;
	
	margin: 7%;
	
	height: 0px;
	
	padding-bottom: 35.1%;
	display: inline-block;
	float: left;
	
	text-align: center;

	background-size: 50%;
	background-repeat: no-repeat;
	background-position: center;


box-shadow: 1px 2px 2px 2px rgb(0 0 0 / 20%);
	
}
.r1{	background-image: url(/html2/sab/images/tool.svg)}
.r2{	background-image: url(/html2/sab/images/remote.svg)}
.r3{	

	background-image: url(/html2/sab/images/sab_note.svg)}
.r4{

	
	background-image: url(/html2/sab/images/as_history_icon.svg)}


.l1:hover, .l2:hover, .l3:hover, .l4:hover, .r1:hover, .r2:hover, .r3:hover, .r4:hover{
	     box-shadow: 4px 4px 4px  rgba(0, 0, 0, .5);

  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}

/* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) {
	

		.area_left, .area_right{
		width: 100%;
		position: relative;
		display: block;

			

	}

/* 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) { 
	

	
			.area_left, .area_right{
		width: 100%;
		position: relative;
		display: block;

	}

}

}
/* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
@media all and (min-width:480px) and (max-width:767px) { 


			.area_left, .area_right{
		width: 100%;
		position: relative;
		display: block;

	}


}
/* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
@media all and (max-width:479px) { 

		.area_left, .area_right{
		width: 100%;
		position: relative;
		display: block;

	}
	


}