@charset "euc-kr";
/*CSS Document*/
@import url(reset.css);

/* Font */
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@font-face{
  font-family: 'NanumGothic';
  font-style: normal;
  font-weight: normal;
  src: url('/css/fonts/NanumGothic.eot'); 
  src: local('¨¡'), url('/css/fonts/NanumGothic.woff') format('woff'), url('/css/fonts/NanumGothic.ttf') format('truetype'); 
}

@font-face{
  font-family: 'NanumGothic';
  font-style: normal;
  font-weight: bold;
  src: url('/css/fonts/NanumGothicBold.eot');     
  src: local('¨¡'), url('/css/fonts/NanumGothicBold.woff') format('woff'), url('/css/fonts/NanumGothicBold.ttf') format('truetype'); 
}

@font-face{
  font-family: 'NanumSquareR';
  font-style: normal;
  font-weight: normal;
  src: url('/css/fonts/NanumSquareR.eot'); 
  src: local('¨¡'), url('/css/font/NanumSquareR.woff') format('woff'), url('/css/font/NanumSquareR.ttf') format('truetype'); 
}

@font-face{
  font-family: 'NanumSquareR';
  font-style: normal;
  font-weight: bold;
  src: url('/css/fonts/NanumSquareB.eot');     
  src: local('¨¡'), url('/css/font/NanumSquareB.woff') format('woff'), url('/css/font/NanumSquareB.ttf') format('truetype'); 
}



#Header{position:relative; height:80px; background:#fff; display:block; }
#Header h1{ text-align:center; padding-top:13px; color:#333; }


#Navi { height:46px; background:#ec3916; }
#Navi ul { width:1000px; margin:0 auto; overflow:hidden; border-right:1px solid #d92400 }
#Navi ul li { width:20%; float:left; }
#Navi ul li a { display:block; text-align:center; color:#fff; line-height:46px; border-left:1px solid #d92400; font-size:17px; font-family: 'NanumSquare', sans-serif !important; font-weight:700; }
#Navi ul li a:hover { background:#d92400; }

#Visual {height:460px; background:url(../img/main/visual.jpg) top center no-repeat; text-align:center; }
#Visual img {}

.main_banner { width:1000px; margin:0 auto; padding:40px 0; }
.main_banner ul { overflow:hidden;  }
.main_banner ul li { float:left; line-height:20px;  }
.main_banner ul li ul li { float:none; }

.main_board {border:1px solid #ddd; width:258px; height:108px; padding:20px 25px }
.main_board p { font-size:20px; color:#333; line-height:30px; margin-bottom:15px;  }


/* »ó´ã */
.m_cs{overflow:hidden; border:1px solid #ddd; padding:20px 25px; height:108px; width:258px; }
.m_cs p { font-size:20px; color:#333; line-height:30px; margin-bottom:5px;  }
.m_cs span{font-size:36px; color:#f37800; font-family:Calibri; letter-spacing:-1.7px; display:block; line-height:36px; }
.m_cs small{ font-size:13px; color:#616161;  font-weight:600; letter-spacing:-0.03em;}

#S_topimg {height:120px; background:url(../img/main/visual.jpg) center -241px no-repeat;  }
#S_topimg .sub_visual { height:120px; width:1000px; margin:0 auto; }

#Sub_Wrap { width:1000px; margin: 0 auto; overflow:hidden; }

#Sub_Category { float:left; width:200px; margin-top:15px; }
#Sub_Container { float:right; width:750px; margin-top:30px;  }

/*¼­ºêÄ«Å×°í¸®*/
#Sub_Category .Category_Title { padding:30px 0 15px 20px; letter-spacing:-0.05em; background:#f77f14; }
#Sub_Category .Category_Title span { color:#fff; font-size:13px; }
#Sub_Category h2 { font-size:24px; font-weight:normal; color:#fff;  height:40px; line-height:40px;  }
#Sub_Category ul {/* border-width:0px 1px 0px; border-style:solid; border-color:#ddd;*/ }
#Sub_Category li { border-bottom:1px solid #ddd; background:#fff; }
#Sub_Category li a { display:block; line-height:1.2!important; color:#666; padding:13px 0 13px 20px; font-size:13px; }
#Sub_Category li a:hover { background:url(../img/comm/arrow.png) no-repeat 90% 17px #f8f8f8; }
#Sub_Category li.on a  { font-weight:bold; color:#000; background:url(../img/comm/arrow.png) no-repeat 90% 17px #fff; }

/*¼­ºêŸÀÌƲ*/
#Sub_Title { position:relative; border-bottom:1px solid #ddd; height:48px;}
#Sub_Title h3 { position:absolute; font-size:26px; font-weight:normal; color:#333; letter-spacing:-0.05em; font-family: 'NanumSquare', sans-serif !important; font-weight:700; }
#Sub_Title ul { position:absolute; overflow:hidden; right:0; top:10px; }
#Sub_Title li { float:left; color:#666; letter-spacing:-0.05em; padding-left:15px; background:url(../img/comm/arrow.png) no-repeat 4px -29px;  font-size:12px !important;}
#Sub_Title li.home {  background:url(../img/comm/home.png) no-repeat 4px 4px; }
#sub_title ul li span{color:#555;  }

/*¼­ºêÄÁÅÙÃ÷*/
#Sub_Body  { /*margin-top:30px;*/ min-height:600px; /*padding-bottom:50px;*/ }

/*¼­ºêŸÀÌƲ*/
.sub_tit {font-size:30px; font-weight:bold; font-family: 'NanumSquare', sans-serif !important;}
.sub_tit span {color:#333333; font-weight:800;} 
.sub_tits {padding-top:5px; font-size:15px; color:#999;}


/*Àλ縻*/
.gt {background:url('../img/sub/gtbg.jpg')no-repeat; height:550px; padding: 150px 280px 0 30px; margin-bottom:40px;}
.gtgt {font-size:17px; font-family: 'NanumSquare', sans-serif !important; color:#333; font-weight:normal; line-height:160%;}
.gt_right {font-size:17px; font-weight:bold; font-family: 'NanumSquare', sans-serif !important; text-align:right;}


.sub_pd { padding:0 20px;}



/*ÇÏ´ÜÀÎÆ÷*/
#Footer { background:#ededed; border-top:1px solid #cbcbcb; height:120px;   }
.footer_cont { width:1000px; margin: 0 auto; position:relative; }
.footer_cont h1 { position:absolute; left:0; top:25px; font-size:20px; color:#999; }
.footer_cont .copyright { position:absolute; left:200px; top:25px; }
.footer_cont span { padding:0 10px; background:url(../img/comm/line_g.gif) no-repeat center 3px; color:#999}
.footer_cont .copyright { color:#666; font-size:12px; }
.footer_cont .copyright p { color:#999; }



/*¸ÞÀÎÇϴܺ£³Ê4Á¾*/

#m_cont{width:1000px; overflow:hidden; margin:0 auto; padding:40px 0px;}

.snip1585 { background-color: #000; color: #fff; display: inline-block; font-family: 'Roboto', sans-serif; font-size: 24px; margin: 0 0 0 5px; max-width: 243px; min-width: 243px;
  overflow: hidden; position: relative; text-align: center; width: 100%;}

.snip1585 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.45s ease; transition: all 0.45s ease;}

.snip1585:before,
.snip1585:after { background-color: rgba(0, 0, 0, 0.5); border-top: 50px solid rgba(0, 0, 0, 0.5); border-bottom: 50px solid rgba(0, 0, 0, 0.5);
                  position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 1; opacity: 0;}

.snip1585:before { -webkit-transform: scaleY(2); transform: scaleY(2);}

.snip1585:after { -webkit-transform: scaleY(2); transform: scaleY(2);}

.snip1585 img { vertical-align: top; max-width: 100%; backface-visibility: hidden;}

.snip1585 figcaption { position: absolute; top: 0; bottom: 0; left: 0; right: 0; align-items: center; z-index: 1; display: flex; flex-direction: column;  justify-content: center;
  line-height: 1.1em; opacity: 0; z-index: 2; -webkit-transition-delay: 0s; transition-delay: 0s;}

.snip1585 h3 { font-size: 22px; font-weight: 400; letter-spacing: 1px; margin: 0; text-transform: uppercase; color: #fff; font-family: 'NanumSquare', sans-serif !important;}

.snip1585 h3 span { font-weight: 700;}

.snip1585 a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 3;}

.snip1585:hover > img,
.snip1585.hover > img { opacity: 0.7;}

.snip1585:hover:before,
.snip1585.hover:before,
.snip1585:hover:after,
.snip1585.hover:after { -webkit-transform: scale(1); transform: scale(1); opacity: 1;}

.snip1585:hover figcaption,
.snip1585.hover figcaption { opacity: 1; -webkit-transition-delay: 0.1s; transition-delay: 0.1s;}


/*right*/
.snip1585r { background-color: #000; color: #fff; display: inline-block; font-family: 'Roboto', sans-serif; font-size: 24px; margin:0;
  max-width: 243px; min-width: 243px; overflow: hidden; position: relative; text-align: center; width: 100%;}

.snip1585r * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.45s ease; transition: all 0.45s ease;}

.snip1585r:before,
.snip1585r:after { background-color: rgba(0, 0, 0, 0.5); border-top: 50px solid rgba(0, 0, 0, 0.5); border-bottom: 50px solid rgba(0, 0, 0, 0.5);
  position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 1; opacity: 0;}

.snip1585r:before { -webkit-transform: scaleY(2); transform: scaleY(2);}

.snip1585r:after { -webkit-transform: scaleY(2); transform: scaleY(2);}

.snip1585r img { vertical-align: top; max-width: 100%; backface-visibility: hidden;}

.snip1585r figcaption { position: absolute; top: 0; bottom: 0; left: 0; right: 0; align-items: center; z-index: 1; display: flex; flex-direction: column;
  justify-content: center; line-height: 1.1em; opacity: 0; z-index: 2; -webkit-transition-delay: 0s; transition-delay: 0s;}

.snip1585r h3 { font-size: 22px; font-weight: 400; letter-spacing: 1px; margin: 0; text-transform: uppercase; color: #fff; font-family: 'NanumSquare', sans-serif !important;}

.snip1585r h3 span { font-weight: 700;}

.snip1585r a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 3;}

.snip1585r:hover > img,
.snip1585r.hover > img { opacity: 0.7;}

.snip1585r:hover:before,
.snip1585r.hover:before,
.snip1585r:hover:after,
.snip1585r.hover:after { -webkit-transform: scale(1); transform: scale(1); opacity: 1;}

.snip1585r:hover figcaption,
.snip1585r.hover figcaption { opacity: 1; -webkit-transition-delay: 0.1s; transition-delay: 0.1s;}