@charset "utf-8";
/* CSS Document */


	/* ----------------------------------------------------
  	서브페이지-포트폴리오
	------------------------------------------------------- */ 
	/* tab_company -----------------------------------------*/
.clear{clear:both}
ul{list-style:none;}
.grayscale1 { filter: grayscale(0.8); }	
#portfolio{padding-top:0}
.sub_portfolio #portfolio .container #bo_gall #gall_ul>li{width:33%;margin: 0;padding: 0;}	
.sub_portfolio #portfolio .container #bo_gall #gall_ul .gall_con>li{width:100%;padding: 0;}	
.sub_portfolio #portfolio .container ul li{float:left;margin-left: 0;height:auto;overflow:hidden;margin-bottom: 0;text-align:center;/* border: 0.5px solid #eaeaea; */}
.top_visual{background:url(../images/bgtop_subVisual.jpg) top center no-repeat;height:686px;overflow: hidden;}
#wrapper .black{ background:#000;}
#wrapper .bgst > .inner_wrap > .navmenu > ul > li a{ color:#fff;}
.tit_portfolio{width:1400px; margin:0 auto;position: relative;}
.tit_portfolio > .tit_portfolio_in{position:absolute;top: 215px;left: -30px;}
.btn_brochure{display:block; margin-top:40px;}
.bgst_sub_black{
    left: auto !important;
    background-color: rgba(255, 255, 255, 1);
    width: 100% !important;
    border-bottom:none !important;
    border-bottom: 1px solid #000 !important;
 }
 .category_portfolio{padding: 80px 0;background:#fff;background: url(../images/bg_line04.gif) top 103px center repeat-x;}
 .sub_portfolio #portfolio .category_portfolio ul{margin:0 auto;width: 1400px;text-align: center;}
 .sub_portfolio #portfolio .category_portfolio ul li{
 border: 2px solid #a2a2a2;
 border-radius: 7px;
 width: auto;
 margin: 0px 7px;
 float: none;
 display: inline-block;
 }
 .sub_portfolio #portfolio .category_portfolio>ul li a{
 	font-size: 16px;
 	padding: 7px 10px;
 	width: 117px;
 	background: #fff;
 	color:#000;
 	-webkit-transition: background 0.2s, color 0.2s;
 	transition : background 0.2s, color 0.2s;
 	}
 .sub_portfolio #portfolio .category_portfolio ul li a:hover{background: #000; color:#fff;}
 .sub_portfolio #portfolio .container ul li a> .img{height: auto; filter: grayscale(0.8); }
 .sub_portfolio #portfolio .container ul li a> .portfolio_content{color: #d8d8d8;}
 .sub_portfolio #portfolio .container ul li a{/*position:relative;*/}
 .sub_portfolio #portfolio .container ul li a *{   
	   -webkit-transition: transform 0.2s, filter 0.2s, color 0.1s;  
	   transition:transform 0.2s, filter 0.2s, color 0.1s;
	   transition-timing-function: ease;
	 }
 .sub_portfolio #portfolio .category_portfolio ul li .on{background: #000; color:#fff;}
	   
 .sub_portfolio #portfolio .container ul li>a:hover .img{-webkit-transform:scale(1.2);transform:scale(1.02); filter: grayscale(0);}
 .sub_portfolio #portfolio .container ul li>a:hover .portfolio_content{color: #f28c03;}

 
 .sub_portfolio #portfolio .container ul li>a .portfolio_content>span{font-size:18px;font-weight:600; background:none;}
 .sub_portfolio #portfolio .container ul li>a .portfolio_content>.portfolio_client{font-size:14px;margin: 5px 0 10px;}
 .sub_portfolio #portfolio .container ul li>a .portfolio_content>.portfolio_copy{font-size:10px;font-weight:400}
 
 .sub_portfolio #portfolio .container ul>li>a .portfolio_content{position:absolute;bottom: 30px;left:0;right:0;margin:0 auto;display:block;}

.top_visual_view{background:url(../images/bgtop_subVisual_view.jpg) top center no-repeat;height:500px;overflow: hidden;position:relative;text-align:center;}
.tit_portfolio_view {text-align:center;position: absolute;top: 50%;left: 0;right: 0;margin-top: -50px;}
.tit_portfolio_view > p{font-size: 42px;font-weight: 800;margin: 0;letter-spacing: -1px; color:#fff;}
.tit_portfolio_view > span{font-size: 22px; color:#fff;}
.sm_icon01{ margin:15px auto 0;}
.sm_icon02{ position:absolute; bottom:10px; left:10px;}
#portfolio .portfolio_view{margin-bottom: 30px;}

 
 .box {
	 
    border-style: solid;
    border-width: 1px;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
	color:#fff;
    -webkit-transition:width 0.2s, height 0.2s, background-color 0.2s, -webkit-transform 0.2s;
    transition:width 0.2s, height 0.2s, background-color 0.2s, transform 0.2s, color 0.2s;
	transition-timing-function: linear;
}
.box:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
	color:#000;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}
#portfolio .sub_portfolio .bgst > .inner_wrap > .navmenu > ul > li a{ color:#fff;}
#portfolio .portfolio_view p, .portfolio_view span{color:#000;}
#portfolio .portfolio_view > .info{padding:50px 0;border-bottom: 1px solid #000;text-align: center;}
#portfolio .portfolio_view > .info > .info_title{border-bottom: 1px solid #ddd;display: inline-block;padding-bottom: 5px;width: 250px;text-align: center;font-size: 22px;font-weight: 600;letter-spacing: -1px;}
#portfolio .portfolio_view > .info > .info_txt{ overflow:hidden}
#portfolio .portfolio_view > .info > .info_txt > span{display:block;font-size: 16px;font-weight: 600;}
#portfolio .portfolio_view > .contents{padding: 0;border-bottom: 1px solid #000;text-align: center;display: table;margin: auto;width: 100%;}
#portfolio .portfolio_view > .contents > ul{margin: 0;display: table-row;}
#portfolio .portfolio_view > .contents > ul > li{float: none;width: 50%;color: #000;padding: 50px;display: table-cell;vertical-align: middle;}
#portfolio .portfolio_view > .contents > ul > .contents_title{overflow:hidden;font-size: 22px;font-weight: 600;text-align: right;color:#000;}
#portfolio .portfolio_view > .contents > ul > .contents_txt{overflow:hidden;border-left: 1px solid #000;text-align: left;}
#portfolio .portfolio_view > .contents > ul > .contents_txt > span{display:block;font-size: 16px;font-weight: 600;}
#portfolio .portfolio_view > .img_area{margin: 50px auto 0;width: 1200px;text-align: center;}
#portfolio .portfolio_view > .img_area > .img_first{width:99%;height:480px;overflow:hidden;text-align:center;margin: 0 auto 5px;position: relative;}
#portfolio .portfolio_view > .img_area > .img_first > .centered img, 
.overlay_img > .view_fs > img {position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: auto;margin: auto;}

#portfolio .portfolio_view > .img_area .heading{/* background-color:#000; */opacity:0;overflow: hidden;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: 10px;z-index: 2;border: 1px solid #fff;}
.view_fs{position:absolute;z-index: 3;top: 50%;left: 50%;right: 0;bottom: 0;margin: 0 0 0 -65px;opacity: 0;display: table;width: 130px;}
.view_fs h2{font-size: 13px;vertical-align: middle;display: table-cell;text-align: center;margin: 0 auto;line-height: 250%; color:#fff;}
.view_fs > img{width: auto !important;top: -35px !important;margin: 0 auto !important;}
#portfolio .container .view_fs h2 span{display:block;color: #fff;font-size: 13px;line-height: 180%;border-bottom:  1px #fff solid;border-top: 1px #fff solid;height: auto;}
#portfolio .container .overlay_bg{background:#000;opacity: 0;position: absolute;width: 100%;height: 100%;z-index: 1;}

/* 마우스오버효과 */
#portfolio .portfolio_view > .img_area .modaltrigger *{
   -webkit-transition: all 0.2s ease; 
   transition:all 0.2s ease;   
	  }

#portfolio .portfolio_view > .img_area .modaltrigger:hover img{-webkit-transform:scale(1.04);transform:scale(1.02); }
#portfolio .portfolio_view > .img_area .modaltrigger:hover .heading{opacity:1}
#portfolio .portfolio_view > .img_area .modaltrigger:hover .view_fs{opacity:1}
#portfolio .portfolio_view > .img_area .modaltrigger:hover .overlay_bg{opacity:0.5}

#portfolio .portfolio_view > .img_area > ul{margin: 0;}
#portfolio .portfolio_view > .img_area > ul > li{float: left;width: 49%;margin: 0.5%;height: 350px;overflow: hidden;text-align: center;border: 1px solid #f1f1f1;position: relative;}
#portfolio .portfolio_view > .img_area > ul > li > a > img{width:100%;height: auto;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}

#portfolio .btn_detail{
	 background:none;
	 width: auto;
	 margin: 0px auto;
 	 }
#portfolio .btn_detail > a{
 	 padding: 10px 45px;
 	 border: 2px solid #4a4a4a;
 	 border-radius: 7px;
 	 display: inline-block;
 	 background: #fff;
 	 color:#000;
 	 -webkit-transition: background 0.2s, color 0.2s;
 	 transition : background 0.2s, color 0.2s;
 	 font-weight: 600;
 	 }
#portfolio .btn_detail > a:hover{
 	background: #000; color:#fff; 
	}
#portfolio .btn_detail > input{
 	 padding: 10px 45px;
 	 border: 2px solid #4a4a4a;
 	 border-radius: 7px;
 	 display: inline-block;
 	 background: #ea5809;
 	 color:#fff;
 	 -webkit-transition: background 0.2s, color 0.2s;
 	 transition : background 0.2s, color 0.2s;
 	 font-weight: 600;
 	 }
#portfolio .btn_detail > input:hover{
 	 background:#f10000;
 	 }

/*
#popup_wrap {width:560px; height:270px; background:#fff; border: solid 1px #666666; position:fixed; top:50%; left:50%; margin:-250px 0 0 -250px; z-index:9999; display:none;} 
#mask {width:100%; height:100%; position:fixed; background:rgba(0,0,0,1) repeat; top:0; left:0; z-index:999; display:none;} 
.popup-cont01 {width:478px; margin: 40px auto; text-align: center;}
.popup-cont01 button { width: 138px; height: 36px; line-height: 36px; background: #9f2f60; color: #ffffff; text-align: center; border: none; font-size: 16px;}
 
 /* 모달팝업  
.window {
  position:fixed;
  left:0;
  top:0;
  width:auto;
  max-width:1200px;
  height:auto;
  display:none;
  z-index:9999;
  padding:0;
}

#dialog2 { 
  width:auto; 
  height:auto;
  padding:0;
}
.close{ position:absolute}
*/ 
 /* /////////////////////////////////////////////*/  

#loginmodal{ position:relative;}


/** modal window styles **/
#lean_overlay {
    position: fixed;
    z-index:1003;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}


#loginmodal {
  width: auto;height:auto;  /*팝업창의 크기조절*/
  margin-top:0;           /*팝업창 위아래 간격조절*/
  padding: 0;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
#close{right: -35px;position: absolute;}
#close > img{width:auto}
#loginmodal .big_img{overflow:hidden;height: 900px;}
.big_img > img{height:100%;max-height:100%;}

div.ratio_1_1 { width: 1100px; height: 1100px; }
div.ratio_4_3 {width: 1100px;height: 825px;text-align: center;}
div.ratio_16_9 { width: 1100px; height: 619px; }
div.ratio_4_3 > img{width:100%;}

#bo_w .tbl_frm01{padding: 80px 5% 0 !important;} /*관리자 수정화면 간격조절*/
 
	@media screen and (max-width: 1200px) {
		.tit_portfolio{width: 1200px;}
		#portfolio .category_portfolio>ul{width: 100% !important;}	
		.tit_portfolio > .tit_portfolio_in{position:absolute;top: 210px;left: 10px;}	
	}
	
	
	@media screen and (max-width: 960px) {
		.tit_portfolio{width: 100%;}
		.tit_portfolio > .tit_portfolio_in > img{width: 90%;}
		.btn_brochure > img{width: 60%;}
		#portfolio .portfolio_view > .img_area{ width:auto;}
		#dialog2{padding: 0 10%;}
		#dialog2 > img{width:100%;margin-left: 0.5%;}
		#portfolio .portfolio_view > .img_area > .img_first,
		#portfolio .portfolio_view > .img_area > ul > li{height:auto;}
		#portfolio .portfolio_view > .img_area .img li > a{height: 150px;}
		#portfolio .portfolio_view > .img_area > .img_first > .centered img,
		#portfolio .portfolio_view > .img_area > ul > li img{position:relative;}

		#loginmodal {width:80%;}
		#loginmodal img{width:100%;}
		div.ratio_1_1,
		div.ratio_4_3,
		div.ratio_16_9 { width: auto; height: auto; }
		
	}
	
	@media screen and (max-width: 640px) {
		#portfolio .category_portfolio>ul>li{width:19% !important;margin: 0px 2px !important;padding: 0}
		#portfolio .category_portfolio>ul>li>a{font-size:11px !important;font-weight: 500;}
		.tit_portfolio{width: 100%;}
		.tit_portfolio > .tit_portfolio_in > img{width: 90%;}
		.btn_brochure{display:block; margin-top:20px;}
		.btn_brochure > img{width: 60%;}
		.top_visual{height:460px; background:url(../images/bgtop_subVisual_mobile.jpg) top center no-repeat;}
		.sub_portfolio #portfolio .container > ul > li{width:49%}	
		#portfolio .portfolio_view > .img_area .img li > a{height: 120px;}
		 .category_portfolio{background: none;}
		 .sub_portfolio #portfolio .category_portfolio>ul li a{padding:7px 0; width: auto;}
		 .sub_portfolio #portfolio .container #bo_gall #gall_ul>li{width:50%;}
	}	
	
	@media screen and (max-width: 480px) {
		#portfolio .category_portfolio>ul>li{width:40% !important;margin: 0px 2px !important;}
		#portfolio .container > ul > li{width:100%}	
		#portfolio .portfolio_view > .img_area > ul > li{width:100%;height: 250px;}	
		.sub_portfolio #portfolio .container > ul > li{width:100%;}
		.tit_portfolio_view > p{font-size:18px;margin: 0;}	
		.top_visual_view{ height:300px}
		.sm_icon01 img{width: 15%;}
		.sm_icon02 img{width: 60%;}
		#portfolio .portfolio_view > .info > .info_title,
		#portfolio .portfolio_view > .contents > ul > .contents_title{ font-size:18px}
		#portfolio .portfolio_view > .info > .info_txt > span,
		#portfolio .portfolio_view > .contents > ul > .contents_txt > span{font-size:11px}
		#portfolio .portfolio_view > .contents > ul > li{padding:10px}
		#portfolio .portfolio_view > .img_area .img li > a{height:auto;}
		 .sub_portfolio #portfolio .container #bo_gall #gall_ul>li{width:100%;}

		#loginmodal #close{right:-30px; top:-5px;}
		#loginmodal #close img{width:70%;}
	}