@charset "euc-kr";
/* e-front WebDesign Team(http://www.e-front.co.kr), LYJ 201301 */
@import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);

* { margin: 0; padding: 0;  }

html { border:0 !important; }

body {
	font-family: 'µ¸¿ò';
	font-size:12px;
	border:0 !important;
}

/* Type Selector */
*{margin:0; padding:0; font-size:12px; line-height:18px; font-family:"µ¸¿ò",Dotum,"±¼¸²",Gulim,"Lucida Grande",Tahoma,Verdana,AppleGothic,UnDotum,sans-serif;}
a{text-decoration:none; color: #666666;}
a:hover, a:active, a:focus{text-decoration:none;}
li{list-style:none;}
img, fieldset, button{border:none;}
hr, button img{display:none;}
textarea{overflow:auto;}
legend{position:absolute; top:0; left:0; width:0; height:0; overflow:hidden; visibility:hidden; font-size:0; line-height:0;}



/* Layout Selector */
#wrapbody{position:relative; margin:0 auto; padding:0px; width:100%; background: url("/common/images/sub0228_bg.jpg") no-repeat top center; min-width:1100px;}
#wrap{position:relative; margin:0 auto; padding:0px; width:100%; text-align:center;}
#header{margin:0 auto; padding:0px; width:100%; height:110px;}
#container{margin:0 auto; padding:0px; width:1095px;}

#footerbody{margin:0 auto; padding:0px; background: url("/common/images/bg_footer.gif") no-repeat top center; min-width:1100px;}
#footer{margin:0 auto; padding:0px; width:1012px; height:130px;}

.box{padding:0;}
.clear{display:block; float:none; clear:both; height:0; width:100%; font-size:0 !important; line-height:0 !important; overflow:hidden; margin:0 !important; padding:0 !important;}


/*°¢ sub ¸Þ´º¸¶´Ù ºñÁê¾ó */
.website_visual{height:200px; background: url("/common/images/website_visual.jpg") no-repeat top center;}
.mending_visual{height:200px; background: url("/common/images/mending_visual.jpg") no-repeat top center;}
.portfolio_visual{height:200px; background: url("/common/images/portfolio_visual.jpg") no-repeat top center;}
.technology_visual{height:200px; background: url("/common/images/technology_visual.jpg") no-repeat top center;}
.service_visual{height:200px; background: url("/common/images/service_visual.jpg") no-repeat top center;}
.inquiry_visual{height:200px; background: url("/common/images/inquiry_visual.jpg") no-repeat top center;}
.member_visual{height:200px; background: url("/common/images/member_visual.jpg") no-repeat top center;}
.company_visual{height:200px; background: url("/common/images/company_visual.jpg") no-repeat top center;}
.sitemap_visual{height:200px; background: url("/common/images/sitemap_visual.jpg") no-repeat top center;}

/* Header */
.main_top{width:1100px; height:32px; margin:0 auto;}

.top{width:1100px; height:76px; margin:0 auto;}
.logo_top{float:left; margin-top:7px; margin-left:20px; background:#ffffff; height:62px;}
.unb_top{float:left; margin-top:0px; margin-left:0px;}
.unb_top li{float:left; margin:0px 0px 0px 0px;}
.top_login{float:right; height:32px; margin-top:5px; font-family:"±¼¸²"; font-size:12px; color:#FFFFFF; font-weight:bold;}
.input{height:20px; font-family:"±¼¸²","µ¸¿ò"; color:#817975; border:1px solid #dedede; background-color:#fff;}

.sub_visual{width:1100px; height:200px;}

.gnb{position:relative; float:right; margin-top:22px; margin-right:0px; /*background-color:red;*/ width:788px;}



/* Left Menu */
.snb{width:204px; float:left; margin-top:40px; margin-left:0px; margin-bottom:30px; background:#ffffff;}

/* Sub Contents */
.subcontents{float:right; text-align:left; margin-top:10px; margin-bottom:60px; margin-right:2px; width:850px; color:#5d5d5d; line-height:25px;}

.box_title{margin-top:3px; height:27px;}
.title{float:left; margin-top:26px; margin-left:5px;}
.path{float:right; margin-top:3px; margin-right:20px; font-family:"±¼¸²","µ¸¿ò";}

.text_sub{text-align:left; margin-top:0px; margin-left:5px; margin-right:5px;  background:#ffffff;}


/* Footer */
.footer_img{width:1012px; margin-top:18px; margin-left:0px;}
.unb_footer{float:left; margin-top:13px; margin-left:2px; color:#8f9caa; font-family:"µ¸¿ò"; font-size:11px;}
.unb_footer li{float:left; margin:0px 0px 0px 7px;}

.copyright{float:left; font-family:"-À±µðÀÚÀÎÀ¥µ¸¿ò"; font-size:11px; color:#535b63; margin-top:8px; text-align:left}
.copy_right{float:right; margin-top:49px; margin-right:1px; font-family:"³ª´®°íµñ"; font-size:11px; color:#3e454c;}
.color_o{font-family:"±¼¸²"; font-size:12px; color:#e1e1e1; font-weight:bold;}
.color_w{font-family:"±¼¸²"; font-size:12px; color:#8f9caa;}


/* Aside */
.aside{}
.spot{}
.search{}

/*technology table*/
.tech_title{padding:25px 0 10px 13px; text-align:left;}
.tech_txt{float:left; padding:20px 0 0px 20px; text-align:left;}

.tech_c{padding:20px 0 10px 15px; text-align:left;}
.tech_ct{padding:5px 0 10px 20px; text-align:left;}

.tech_st{padding:2px 0 5px 20px; line-height:20px; text-align:left;}

.gsfont01{font-family:'Whitney-Bold','NanumGothic','NanumGothicWeb','µ¸À½',Dotum,Helvetica,AppleGothic,sans-serif; line-height:1em; font-size:16px; font-weight:bold; color:#333333;}
.gsfont03{font-family:'Whitney-Bold','NanumGothic','NanumGothicWeb','µ¸À½',Dotum,Helvetica,AppleGothic,sans-serif; line-height:1em; font-size:15px; font-weight:bold; color:#df0202;}
.gsfont02{color:#ea002c;}
.gsfont04{font-weight:bold;}

.t_title{font-family:'Whitney-Bold','NanumGothic','NanumGothicWeb','µ¸À½',Dotum,Helvetica,AppleGothic,sans-serif; line-height:1em; font-size:14px; font-weight:bold;}

.u_table{color:#4d4d4d; border-top:1px solid #5491fb;}
.u_table th{height:31px; background:#efefef; text-align:center; font-weight:bold;}
.u_table td{height:32px; text-align:center;}

.1004_txt{padding:0 0 13px 23px; color:#575858;}

/*mending table*/
.m03{}
.m03_top{text-align:center; font-weight:bold; color:#ffffff; font-size:12px; height:25px;}
.m03_left{text-align:center; font-weight:bold; color:#666666; font-size:11px; height:30px; background-color:#f8f9fb;}
.m03 td{text-align:center; color:#666666; font-size:11px; height:30px;}
.m03_gray{text-align:center; color:#666666; font-size:11px; height:30px; background-color:#f8f9fb;}

.m04{border-top:1px solid #a20b38; border-bottom:1px solid #a7adb3;}
.m04 th{text-align:center; font-weight:bold; color:#666666; font-size:11px; height:25px; background-color:#f8f9fb;}
.m03_left{text-align:center; font-weight:bold; color:#666666; font-size:11px; height:30px; background-color:#f8f9fb;}
.m04 td{text-align:center; color:#666666; font-size:11px; height:30px;}
.m03_gray{text-align:left; padding-left:7px; color:#666666; font-size:11px; height:30px; background-color:#f8f9fb;}


/*website*/
.web_txt{font-size:11px; color:#666666; text-align:left;}
.w01{border-top:2px solid #cc697c; border-bottom:1px solid #a7adb3;}
.w01 th{text-align:center; font-weight:bold; color:#666666; font-size:12px; height:30px; background-color:#f8f9fb;}
.w01 td{text-align:left; padding-left:20px; color:#666666; font-size:11px; height:30px;}


/*service*/
.style10{padding-left:14px; text-align:left;}
/*¸Þ´º½ºÅ©¸³Æ®*/

#dd{margin:0; padding:0;}
#dd li{margin:0; padding:0; list-style: none; float:left;}
.rr{padding-top:10px;}

#dd li a.menu{display:block; text-align: center; padding-top:14px; margin:0 0 0 0px; color:#000; width:131px; height:27px; text-decoration:none; font-family:"³ª´®°íµñ"; font-size:18px; font-weight:bold;}
#dd li a.menu:hover{/*background:#e04702;*/}

.submenu{background:#fff3ee; visibility:hidden; width:140px; position:absolute; z-index:3; margin-top:10px;}
.submenu a{display:block; font-size:12px; font-family:"³ª´®°íµñ"; text-align:left; text-decoration:none; padding:10px; margin-left:0px; color:#000; font-weight:bold;}
.submenu a:hover{background:#fde2d3; color:red; font-weight:bold;}
.menu{margin-left:0px}


/*°¡¿îµ¥Á¤·Ä*/
.all_center{text-align:center;}
.all_left{text-align:left;}
.all_p_left{text-align:left; padding-left:8px;}

.t6{text-align:left; padding-left:5px;}

/*»õ·Î¿î Æ÷ÅäÆú¸®¿À */
.subcon-portfolio {float:right; text-align:left; margin-top:10px; margin-bottom:60px; margin-right:2px; width:1000px; color:#5d5d5d; line-height:25px;}



.portfolioList {padding:20px 20px 20px 0px; max-width:1000px; margin:0 auto;}
.portfolioList ul {overflow:hidden;}
.portfolioList ul li {float:left; padding-left:20px; padding-bottom:30px; width:33.3%; box-sizing:border-box; overflow:hidden; }
.portfolioList ul li a {display:block; position:relative; overflow:hidden;}
.portfolioList ul li .img {width:99%; height:237px; vertical-align: middle;}

.portfolioList  li a i { position:absolute; text-indent:-9999px; background:rgba(193, 20, 58, 0.7); }
.boximg i.line1 { width:2px; height:100%; bottom:0; left:0; animation:line1 5s infinite; }
.boximg i.line2 { width:100%; height:2px; top:0; left:0; animation:line2 5s infinite;  }
.boximg i.line3 { width:2px; height:100%; top:0; right:0; animation:line3 5s infinite;  }
.boximg i.line4 { width:100%; height:2px; bottom:0; right:0; animation:line4 5s infinite;  }

@keyframes line1 {
	0% { height:0; }
	25%, 100% { height:100%; }
}
@keyframes line2 {
	0%, 25% { width:0; }
	50%, 100% { width:100%; }
}
@keyframes line3 {
	0%, 50% { height:0; }
	75%, 100% { height:100%; }
}
@keyframes line4 {
	0%, 75% { width:0; }
	 100% { width:100%; }
}


.portfolioList .pf_more {text-align:center; line-height:150%; font-size:2em; color:#000; padding:15px 0px; background:#ec2323;}
.portfolioList .pf_more span {display:block; color:#fff;}
.portfolioList .pf_more a {display:block; color:#fff;}

.portfolioList .pf_list .list_wrap .pf_info{position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(215,40,40,0.8); /*padding-top:50px;*/ opacity:0; box-sizing:border-box; text-align:center; margin:0 auto;}
.portfolioList .pf_list .list_wrap .pf_info p{float:left; width:100%; padding:54px 10px 10px 10px; font-size:16px; font-weight:300; color:#fff; position:relative; top:-100px; box-sizing:border-box;}
.portfolioList .pf_list .list_wrap .pf_info h3{float:left; width:100%; padding:10px; font-size: 21px; font-weight:600; color:#fff; /*line-height:150px;*/ position:relative; top:230px; text-align:center; box-sizing:border-box;}
.portfolioList .pf_list .list_wrap .pf_info .pf_btn{float:left; width:120px; margin:15px 0px 0px 88px;  box-sizing:border-box; position:relative; top:230px;  font-size:16px; font-weight:400; color:#fff; line-height:32px; border:1px solid #fff; }




.portfolioView {width:100%; height:100%; background:#333; z-index:9999; position: relative;}
.portfolioView .view_inner {max-width:1200px; height:100%; margin:0 auto; background:#fff;}
.portfolioView .view_inner .view_con {padding-right:400px; position:relative;}
.portfolioView .view_title {background:#e32222; color:#fff; min-height:90px; position:relative; padding:20px 110px 20px 50px;}
.portfolioView .view_title p {line-height:150%; font-size:1.15em; color:#fff;}
.portfolioView .view_title p strong {display:block; padding-top:10px; line-height:150%; font-size:2.2em; font-weight:normal; font-family:nGothic; color:#e9e7ee;}
.portfolioView .view_title .close_bt {position:absolute; right:40px; top:43px;}
.view_con .img_area {padding:9%; text-align:center; background:#e5e5e5;}
.view_con .img_area .lanchW {position:relative;}
.view_con .img_area .lanchW .bt_lanch { position:absolute; bottom:135px; left:-20px;}
.view_con .img_area img {max-width:100%;}


.view_con .imgs li {margin-top:25px;}
.view_con .imgs li:first-child {padding-top:0px;}
.view_con .text_area {width:400px; position:absolute; right:0px; top:0px;}
.view_con .btn_area {overflow:hidden;}
.view_con .btn_area li {float:left; width:33.3%;}
.view_con .btn_area li a {font-size:1.5em; color:#000; display:block; text-align:center; padding:40px 0px;}
.view_con .btn_area li:first-child a {border-right:none;}
.view_summary {margin:30px 25px; padding-bottom:20px; color:#414141; border-bottom:1px solid #d4d4d4;}
.view_summary dt, .view_overview dt {font-family:'Roboto'; font-size:28px; font-weight:bold; color:#161616; line-height:150%; margin-bottom:15px;}
.view_summary dd, .view_overview dd {margin-bottom:10px; font-size:1em; text-align:left; line-height:160%; font-family:nGothicB; word-break:keep-all; word-wrap:break-word;}
.view_summary dd .potin, .view_overview dd .potin {color:#e32222; font-family:nGothicB;}


#homepage_url a {color:#000;}


.view_overview {margin:0px 25px; padding-top:10px;}
.view_overview dt {border-bottom:none; padding-bottom:0px;}
.img_area .view_overview { margin:0px; padding:20px; background:#fff; display:none;}

.inner {max-width:1200px; min-height:300px; padding:40px 10px; margin:0 auto;}
.b_tit {font-size:3em; line-height:150%; color:#000000; font-family:nGothicB; display:inline-block; zoom:1; *display:inline; padding:30px 0px 10px 0px; margin-bottom:30px; border-bottom:9px solid #000000}
.bb_tit {font-size:1.5em; line-height:150%; color:#000000; font-family:nGothicB; padding:40px 0px 15px 0px;}

.inner .btn {text-align:center; padding:30px 0px 0px 0px;}
.inner .btn a {display:block; line-height:150%; padding:10px 0px;}

.view_con .img_area .lanchW .bt_lanch {bottom:15px;}

/*»õ·Î¿î Æ÷ÅäÆú¸®¿À ³¡ */


/* ¿À¸¥ÂÊ Äü¸Þ´º ½ÃÀÛ */

#quick_cont{position:absolute; width:auto;  height:0px; padding-top: 330px;  right:230px; z-index:999; top:0; }
.quick_area {position:relative; width:auto; z-index:300;}
.quick_area .menu_bar{position:relative; float:left; width:157px; margin-left:14px; box-sizing:border-box}

.quick_area .menu_bar .cs{background-color:#383838; padding:7px 0px 15px 0px; border:1px solid #ddd; border-top:0;}
.quick_area .menu_bar .cs h5{font-size:14px; font-family:'Noto Sans Korean'; color:#FFFFFF;  text-transform:uppercase; font-weight:400; letter-spacing:0;}
.quick_area .menu_bar .cs p{font-size:12px; font-family:'Noto Sans Korean'; font-weight:400; letter-spacing:0.2pt; padding:3px 0 5px 2px; color:#FFFFFF; line-height:12px;}
.quick_area .menu_bar .cs p.tit{color:#FFFFFF; font-size:10px;}

.quick_area .menu_bar .qinquiry{margin:5px 0 0 0; background-color:#da3637;}
.quick_area .menu_bar .qinquiry p{	height:44px;padding:23px 0 0px 0;  border-bottom:1px solid; border-color:#ca3031; font-family:'Noto Sans Korean'; font-weight:400; letter-spacing:0.2pt;  line-height:12px; color:#FFFFFF; cursor:pointer;}
.quick_area .menu_bar .qinquiry img{	padding:0 5px 0 0;}

.quick_area .menu_bar .naver{margin:6px 0 6px 0; }

.quick_area .top_btn{ text-align:center; padding:0px;}


/* Æ÷Æ®Æú¸®¿À ¸®½ºÆ® */
.pf_tab {list-style:none; margin:0 auto; text-align:center; padding:11px; background:#fcfcfc;}
.pf_tab li {display:inline-block; padding-left:12px; margin-left:7px; background: url(/common/images/pf_list_line.gif) 0 5px no-repeat;}
.pf_tab li:first-child {background:none; padding-left:0px; margin-left:0px;}
.pf_tab li a {font-family:'Noto Sans Korean'; font-size:12px; display:inline-block; color:#565656; font-weight:400;}
.pf_tab li.on a, pf_tab li:hover a {color:#ff0000;}
.pf_tab li.on {color:#48bffd;} 
/* ¿À¸¥ÂÊ Äü¸Þ´º ³¡ */