/**
* File Name : web_layout.css
* Description : 메인,서브 공통 스타일시트
* Author : Wed Project Team / Design
* Date : 2017.03.28
* Update : 2017.03.28*/


/* Layout Selector */
@charset "utf-8";

html,body {
 padding:0; margin:0; 
 box-sizing: border-box; 
 font-family: 'Noto Sans KR', sans-serif;
 font-weight:'400';
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box; 
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
}
a{text-decoration: none;}
a:hover {text-decoration: none; color:#037fe0}
a:visited {text-decoration: none; color:#4c4c4c}


#wrap { width:100%; position:relative; margin:0; padding:0; }
#container { width:100%;  position:relative; margin-bottom:40px;  }
#container:after { content:""; display:block; clear:both;}


/* Top*/
#header {position: relative; width:100%; height:30px; border-bottom:1px #cdcdcd solid; background:#e9e9e9;} 
.topmn {width:1120px; height:30px; position:relative; margin:0 auto;}
.topmn .topleft { float:left; width:172px; height:30px; text-align:left; }
.topmn .topright {float:right; width:auto;  height:30px;   text-align:right; }
.topmn .topright li {float:left;  height:30px; display:inline; text-align:left; } 

#gnb {position: relative; width:100%; height:89px; background:#FFF; margin:0 auto; }
.menubar { width:1120px; margin: 0 auto; border:none;  height:89px;  overflow: hidden;  }
.menuLogo  {float:left; width:304px;  text-align:left; }
.menuItem  {  float:right; width:816px; }
.menubar ul {  height:89px; list-style:none;  }
.menubar li { float:left; width:136px; height:19px; line-height:19px;}
.menubar a  { color:#303030; display:block; font-weight:bold; font-size:18px; line-height:19px;   text-align:center; cursor:pointer; }
.menubar li a:hover, .menubar ul li:hover a {  cursor:pointer;  }    
.menubar li:hover ul {display:block;  cursor:pointer; border-top:1px solid #dedede;  height:auto; background:#FFF;}
.menubar li:hover li a {background:none;}
.menubar li ul{ display:none;  position:absolute;  z-index:999;    }
.menubar li li a ,.menubar li li  {  display:block;  float:none;  min-width:111px; height:45px; line-height:45px; border-bottom:1px solid #dedede;  }
.menubar li ul a { display:block;  height:45px; font-size:13px;  font-style:normal;  text-align:center; }
.menubar li ul a:hover,.menubar li ul li:hover a{background: #3b94d3; border:0px; color:#ffffff;  }

#main_vi {width:100%; height:650px; position:relative;  }
#main_vi .main_img {width:100%;}

/*main contents*/
#mainWrap {width:100%; margin-top:80px; clear:both; }



/* 메인 첫번째 라인 */
.mainbox{ width:1120px; margin: 0 auto; z-index: 100; clear:both; }
.mainbox .view {
 width: 280px; 
 height: 260px; 
 margin: 0px; 
 float: left; 
 overflow: hidden;
 position: relative; 
 text-align: center;
 -webkit-box-shadow:1px 1px 2px #e6e6e6; 
 -moz-box-shadow: 1px 1px 2px #e6e6e6;
 box-shadow:1px 1px 2px #e6e6e6;   
 cursor: default;
}

.view .mask,.view .box_content {width: 280px; height: 260px; position: absolute; overflow: hidden; top: 0; left: 0;}
.view img { display: block; position: relative;}
.view-fifth img { -webkit-transition: all 0.3s ease-in-out;  -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.view-fifth .mask { 
  background-color: rgba(146,96,91,0.3);
   -webkit-transform: translateX(-350px);
   -moz-transform: translateX(-350px); 
   -o-transform: translateX(-350px);
   -ms-transform: translateX(-350px);
  transform: translateX(-350px); 
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
   filter: alpha(opacity=100);opacity: 1; 
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out; 
   -o-transition: all 0.3s ease-in-out;  
   -ms-transition: all 0.3s ease-in-out;  
   transition: all 0.3s ease-in-out;
  }
.view-fifth:hover .mask { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px);}
.view-fifth:hover img { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px);}
.view-fifth:hover p { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100);  opacity: 1;}


#main_content {width:100%; height:64px;  margin: 0 auto;  position:relative;padding-bottom:80px; padding-top:30px; clear:both; }
.img_bnbox {width:1120px; height:520px; list-style:none; }
.img_bnbox li { float:left; width:280px; height:260px;  }
.main_bannerBox {width:1120px; height:64px; margin: 0 auto; }
.main_bannerBox .main_banner {width:1120px; height:64px; list-style:none; }
.main_bannerBox .main_banner li { float:left; height:64px;}


/*Foot */
#foot_wrap {width:100%; height:137px;  position:relative; background:url('../images/common/copyright_bg.jpg');clear:both; }
.foot_img  { width:1120px; height:137px; margin:0 auto;   }