/**
 * Vmc Slider v1.0.0 图ø¸轮÷ë插Ëì
 * 维Ú·ËÔ网页ÍïíÂãø
 * http://www.vomoc.com/vmc/slider/
 * vomoc@qq.com
 * 2015/06/29
 **/
.vui-slider {
 position:relative;
 overflow:hidden;
 background:#999;
}
.vui-slider .vui-items {
 overflow:hidden;
 width:100%;
 height:100%;
}
.vui-slider .vui-item {
 display:none;
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
}
.vui-slider .vui-item a,
.vui-slider .vui-item img {
 display:block;
 padding:0;
 margin:0;
 border:none;
}
.vui-slider .vui-buttons {
 position:absolute;
 z-index:5;
 bottom:16px;
 left:50%;
 float:left;
 display:inline;
 filter:alpha(Opacity=80);
 -moz-opacity:0.8;
 opacity: 0.8;
}
.vui-slider .vui-button {
 float:left;
 display:inline;
 overflow:hidden;
 height:12px;
 width:12px;
 margin:0 10px;
 padding:0;
 border:none;
 border-radius:6px;
 background:#FFF;
 cursor:pointer;
}
.vui-slider .vui-button-cur {
 background-color:#C00;
}
.vui-slider .vui-transfer {
 display:none;
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 z-index:3;
}
.vui-slider .vui-prev {
 position:absolute;
 top:50%;
 left:0;
 z-index:5;
 width:60px;
 height:150px;
 margin-top:-75px;
 border-radius:0 10px 10px 0;
 background:url(http://hgaseol.cafe24.com//base/img/prev.gif) no-repeat;
 cursor:pointer;
 filter:alpha(opacity=30);
 -moz-opacity:0.3;
 -khtml-opacity:0.3;
 opacity:0.3;
 transition:0.5s ease;
 -o-transition:0.5s ease;
 -webkit-transition:0.5s ease;
}
.vui-slider .vui-next {
 position:absolute;
 top:50%;
 right:0;
 z-index:5;
 width:60px;
 height:150px;
 margin-top:-75px;
 border-radius:10px 0 0 10px;
 background:url(http://hgaseol.cafe24.com//base/img/next.gif) no-repeat;
 cursor:pointer;
 filter:alpha(opacity=30);
 -moz-opacity:0.3;
 -khtml-opacity:0.3;
 opacity:0.3;
 transition:0.5s ease;
 -o-transition:0.5s ease;
 -webkit-transition:0.5s ease;
}
.vui-slider .vui-sidebutton-hover {
 filter:alpha(opacity=40);
 -moz-opacity:0.4;
 -khtml-opacity:0.4;
 opacity:0.4;
 background-color:#000;
}



* {padding:0;margin:0;}
body,th,td,textarea,h1,h2,h3,h4,h5,h6 {font-family:dotum;font-size:12px;}
body,th,td,textarea{ line-height:14px;}
img,fieldset{ border:0;}
li{ list-style:none;}
select,input{ font-family:verdana;color:#000000;font-size:1.00em;}
address,em{ font-style:normal;}
button{ border:none;background:none;cursor:pointer;}
hr,legend{ display:none;}
p,h1,h2,h3,h4,h5,h6,form,input,ul,li,dl,dt,dd {margin:0;padding:0;}
a img {vertical-align:top;}
a:link{font-size:12px;color:#787878;text-decoration:none;}
a:visited{font-size:12px;color:#787878;text-decoration:none;}
a:hover{font-size:12px;color:#787878;text-decoration:underline;}


#wrap{width:100%;position:relative;text-align:center;}

#content_wrap_main{
width:370px;height:570px;padding:38px 0 0 600px;position:relative;
text-align:left;margin:0 auto;
}


@import url(https://fonts.googleapis.com/css?family=Open+Sans);
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}
.container{
  padding: 2rem;
}
.gallery{
  width: 100%;
  max-width: 960px;
  min-height: 100vh;
  margin: 2rem auto;
  
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.gallery-item{
  box-shadow: 2px 2px 8px -1px #3498DB;
  width: 300px;
  height: 300px;
  margin: 10px;
  background: #000;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.gallery-item-image{
  position: absolute;
  width: 100%;
  height: 100%;
  background: lightblue;
  z-index:20;
  -webkit-transition:all .5s ease;
  transition: all .5s ease;
  bottom:0;
  overflow: hidden;
}
.gallery-item:hover .gallery-item-image{
  bottom: 80px;
}
.gallery-item-description{
  color:white;
  font-size: .8rem;
  width: 100%;
  height: 80px;
  padding: .5rem .8rem;
  background: #3498DB;
  position: absolute;
  bottom:0;
}




#footer_wrap{width:100%;height:85px;position:relative;}
.content_footer{width:970px;position:relative;text-align:left;margin:0 auto;}

#topmenu{width:970px;height:85px;position:relative;text-align:left;margin:0 auto;}
#topmenu h1{position:absolute;margin:29px 0 0 10px;}
#topmenu .global_menu{position:absolute;right:0;top:14px;overflow:hidden;padding-right:30px;}
#topmenu .global_menu a{padding:0 3px 0 6px;margin-left:-1px;}
#topmenu .main_menu{position:absolute;left:214px;top:29px;vertical-align:top;padding:5px 0 0 29px;width:727px;height:56px;}
#topmenu .main_menu a{display:inline-block;vertical-align:top;}
#topmenu .main_menu .fst{width:139px;}
#topmenu .main_menu .snd{width:186px;}
#topmenu .main_menu .trd{width:135px;}
#topmenu .main_menu .fth{width:143px;}
#topmenu .main_menu .last{width:74px;}
#topmenu .sub_menu{position:absolute;top:60px;left:244px;height:22px;padding:0 11px 0 0;background:#2ba7dc;}
#topmenu .sub_menu a{position:relative;display:inline-block;margin:5px 0 0 0;padding:0 0 0 9px;vertical-align:top;}
#topmenu .company{top:60px;left:244px;}
#topmenu .business{top:60px;left:384px;}
#topmenu .products{top:60px;left:562px;}
#topmenu .customer{top:60px;left:697px;}
#topmenu .recruit{top:60px;left:765px;}