.main_space1 { min-height:299px;display:inlineblock;}
.main_space2 { min-height:120px;display:inlineblock;margin-top:20px;;}
.main_space3 { min-height:275px;display:inlineblock;margin-bottom:20px; }

.main_space3 .step_box1{ display:block;position:relative;width:380px;height:220px;outline:1px solid #d4d5d8;background:#63a491 url('/homeimg/photo001.jpg') right bottom no-repeat; float:left;margin-right:25px;overflow:hidden ;cursor:pointer}
.main_space3 .step_box2{ display:block;position:relative;width:380px;height:220px;outline:1px solid #d4d5d8;background:#6c99b4 url('/homeimg/photo002.jpg') right bottom no-repeat; float:left;margin-right:25px;overflow:hidden ;cursor:pointer }
.main_space3 .step_box3{ display:block;position:relative;width:380px;height:220px;outline:1px solid #d4d5d8;background:#c3a46b url('/homeimg/photo003.jpg') right bottom no-repeat; float:left;overflow:hidden ;cursor:pointer}

.main_space3 .zoom{object-fit:cover;transition:all .3s;width:100%;} /* À̹ÌÁö º¯È¯ */
.main_space3 .step_box1 .zoom:hover {transform:scale(1.1);} /* À̹ÌÁö Å©±â */
.main_space3 .step_box2 .zoom:hover {transform:scale(1.1);cursor:pointer} /* À̹ÌÁö Å©±â */
.main_space3 .step_box3 .zoom:hover {transform:scale(1.1);cursor:pointer} /* À̹ÌÁö Å©±â */

.main_space3  .onsd1  { position:absolute; z-index:1; top:0px;left:115px; background: rgba(0,0,0,0.7);width:150px;height:220px; }
.main_space3  .onsd2  { position:absolute; z-index:1; top:0px;left:100px; background: rgba(0,0,0,0.7);width:180px;height:220px; }
.main_space3  .onsd3  { position:absolute; z-index:1; top:0px;left:100px; background: rgba(0,0,0,0.7);width:180px;height:220px; }

.main_space3  .onsd1:hover  { position:absolute; z-index:1; top:0px;left:115px; background: rgba(0,0,0,0.5);width:150px;height:220px; }
.main_space3  .onsd2:hover  { position:absolute; z-index:1; top:0px;left:100px; background: rgba(0,0,0,0.5);width:180px;height:220px; }
.main_space3  .onsd3:hover  { position:absolute; z-index:1; top:0px;left:100px; background: rgba(0,0,0,0.5);width:180px;height:220px; }

.main_space3  .onsd1  img{ margin-left:-115px }
.main_space3  .onsd2  img{ margin-left:-100px }
.main_space3  .onsd3  img{ margin-left:-100px }

.msonic { width:100%;background:#6b685b;text-align:center;}

.ani_eleDiv { position:absolute; z-index:1;}
.ani_index3{
	-webkit-animation-name: ani_index3;
	-webkit-animation-duration: 0.8s;
	-webkit-animation-delay:0s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-iteration-count:1;
	animation-name: ani_index3;
	animation-duration: 0.8s;
	animation-delay:0s;
	animation-fill-mode: forwards;
	animation-iteration-count:1;
		opacity: 0;
}
div#ani_index3 {}
@-webkit-keyframes ani_index3 {
	from {
		opacity: 0.2;-webkit-transform: translateY(60px);
	}
	to {
		opacity: 1;
	}
}
@keyframes ani_index3 {
	from {
		opacity: 0.2;transform: translateY(60px);
	}
	to {
		opacity: 1;
	}
}
.ani_index2{
	-webkit-animation-name: ani_index2;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-delay:0s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-iteration-count:1;
	animation-name: ani_index2;
	animation-duration: 0.6s;
	animation-delay:0s;
	animation-fill-mode: forwards;
	animation-iteration-count:1;
		opacity: 0;
}
div#ani_index2 {}
@-webkit-keyframes ani_index2 {
	from {
		opacity: 0.2;-webkit-transform: translateY(60px);
	}
	to {
		opacity: 1;
	}
}
@keyframes ani_index2 {
	from {
		opacity: 0.2;transform: translateY(60px);
	}
	to {
		opacity: 1;
	}
}
.ani_index1{
	-webkit-animation-name: ani_index1;
	-webkit-animation-duration: 0.4s;
	-webkit-animation-delay:0s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-iteration-count:1;
	animation-name: ani_index1;
	animation-duration: 0.4s;
	animation-delay:0s;
	animation-fill-mode: forwards;
	animation-iteration-count:1;
		opacity: 0;
}
div#ani_index1 {}
@-webkit-keyframes ani_index1 {
	from {
		opacity: 0.2;-webkit-transform: translateY(60px);
	}
	to {
		opacity: 1;
	}
}
@keyframes ani_index1 {
	from {
		opacity: 0.2;transform: translateY(60px);
	}
	to {
		opacity: 1;
	}
}
.tab_menu ul li {
    float: left;
    background-color: #e8e8e8;
    text-align: center;
    vertical-align: middle;
	height:40px;
	cursor:pointer;
	border-bottom:1px solid #1a7ebc;
	letter-spacing:0px;

}
.tab_ns li {
    width: 25%; //4µîºÐ
	height:40px;
	cursor:pointer;
	border-right:2px solid #fff;
}
.tab_menu ul li.on a {
    position: relative;
    height: 40px;
    padding-right: 1px;
    font-weight: bold;
    background-color: #1a7ebc;
    background-image: none;
    border: none;
	color:#fff
}
.tab_menu ul li a {
    display: block;
    width: 100%;
    padding: 10px 0 0 0;
    height: 40px;
    font-size: 16px;
    color: #444;
    letter-spacing: -2px;
    text-decoration: none !important;
}
.bts1 { height:311px;width:100%;padding-top:20px;display:table }
.bts2 { height:311px;width:100%;padding-top:20px;display:table }
.bts3 { height:311px;width:100%;padding-top:20px;display:table }
.bts4 { height:311px;width:100%;padding-top:20px;display:table }
.btn_more { height:40px;width:40px;background:#cccccc;display:block;float:right;text-align:center;font-weight:bold;font-size:2em;padding-top:8px;color:#fff }
.btn_more1 { height:30px;width:30px;background:#fff;display:block;float:right;text-align:center;font-weight:bold;font-size:1.2em;padding-top:2px;color:silver;border:1px solid silver;margin-top:-5px;margin-right:5px }
.btn_more2 { height:30px;width:30px;background:#fff;display:block;float:right;text-align:center;font-weight:bold;font-size:1.2em;padding-top:2px;color:silver;border:1px solid silver;margin-top:-5px;margin-right:5px  }
.btn_more3 { height:30px;width:30px;background:#fff;display:block;float:right;text-align:center;font-weight:bold;font-size:1.2em;padding-top:2px;color:silver;border:1px solid silver;margin-top:-5px;  }



/* ¸ÞÀÎÇÏ´Ü Å«À̹ÌÁöhover¹è³Ê ³»ºÎ¸µÅ©¿ë */
.imghbox {  position: relative;  overflow: hidden;  width:100%;  box-sizing: border-box; border: 1px solid silver;  }
.himage {  display: inline;  width: 100%;  height: auto;}/* Make the image to responsive */
.himage:hover {  -webkit-transform: scale(1.04);  transform: scale(1.04);  -webkit-transition: all 0.8s;  transition: all 0.8s;  }
.hoverlay {  position: absolute;
  bottom: 0;
  background: rgba(184, 105, 3, 0.5);
  width: 100%;
  transition: .5s ease;
  opacity:1;
  color: #FFFFFF;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

/* The overlay effect - lays on top of the container and over the image */
.imghbox:hover .hoverlay {  opacity: 1;   background: rgba(0, 0, 0, 0.5);  color: #FFFF00; }/* When you mouse over the container, fade in the overlay title */