@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

/* LAYOUT */
#wrap { min-width:1170px; background: #44c6c0; /* Old browsers */
background: -moz-linear-gradient(top,  #44c6c0 0%, #3ba5b2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#44c6c0), color-stop(100%,#3ba5b2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #44c6c0 0%,#3ba5b2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #44c6c0 0%,#3ba5b2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #44c6c0 0%,#3ba5b2 100%); /* IE10+ */
background: linear-gradient(to bottom,  #44c6c0 0%,#3ba5b2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44c6c0', endColorstr='#3ba5b2',GradientType=0 ); /* IE6-9 */  }
#header { width:100%; min-width:1170px; height:647px; background:url(../images/header_bg.png) no-repeat center top;  }
#container { overflow:hidden; min-width:1170px; margin:-110px auto 0; }
#footer { width:1170px; margin:170px auto 0; padding-bottom:200px; }

/* HEADER */
#header .area { overflow:hidden; position:relative; width:1170px; margin:0 auto; }
#header .area h1 { margin:200px 0 0 0; text-align:center; }
#header .area .family { height:100px; margin:55px 0 0 0; }
#header .area .family ul { margin:0; padding:0; }
#header .area .family li { list-style:none; float:left; margin-left:30px; cursor:pointer; }
#header .area .family li:first-child { margin-left:0; }
#header .area .family .icon { line-height:0; text-align:center; }
#header .area .family .title { margin-top:8px; text-align:center; display:none; }
#header .area .family:after { content:""; display:block; clear:both; }

/* CONTAINER */
#container .portfolio { position:relative; width:1170px; margin:0 auto 0; }
#container .portfolio ul { margin:0; padding:0; }
#container .portfolio li { position:relative; list-style:none; float:left; width:390px; height:362px; line-height:0; cursor:pointer; }
#container .portfolio:after { content:""; display:block; clear:both; }
#container .portfolio .bg { position:absolute; width:100%; height:362px; left:0; top:0; background-color:rgba(0,0,0,0.6); display:table; opacity:0; -webkit-transition:all 0.6s ease; -moz-transition:all 0.6s ease; -o-transition: all 0.6s ease; transition:all 0.6s ease; }
#container .portfolio .bg .area { display:table-cell; vertical-align:middle; }
#container .portfolio .bg .bg_title { margin-top:64px; font-family:'Noto Sans KR'; font-size:18px; color:#f9f9f3; line-height:18px; font-weight:500; text-transform:uppercase; letter-spacing:1px; text-align:center; -webkit-transition:all 0.6s ease; -moz-transition:all 0.6s ease; -o-transition: all 0.6s ease; transition:all 0.6s ease; }
#container .portfolio .bg .bg_info { margin-top:10px; font-family:'Noto Sans KR'; font-size:10px; color:#f9f9f3; font-weight:100; text-transform:uppercase; letter-spacing:1px; text-align:center; }

#container .portfolio li:hover .bg { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter:alpha(opacity=100);  -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0; -webkit-transition:all 0.6s ease; -moz-transition:all 0.6s ease; -o-transition: all 0.6s ease; transition:all 0.6s ease; }
#container .portfolio li:hover .bg .bg_title { margin-top:14px; -webkit-transition:all 0.6s ease; -moz-transition:all 0.6s ease; -o-transition: all 0.6s ease; transition:all 0.6s ease;  }

/* 팝업 */
#popup_bg { position:fixed; width:100%; height:100vh; left:0; top:0; background-color:rgba(0,0,0,0.6); display:none; }
#popup { position:absolute; width:100%; height:100vh; left:0; top:0; -webkit-overflow-scrolling:touch; display:table; display:none; }
#popup .outer { display:table-cell; vertical-align:middle; }
#popup .outer .inner { position:relative; width:1400px; margin:0 auto; background-color:#fff; -moz-box-shadow:0 0 20px #555; -webkit-box-show:0 0 20px #555; box-shadow:0 0 20px #555; }
#popup .outer .inner .inner_box { position:relative; height:700px; padding:15px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#popup .outer .inner .inner_text { margin:10px 0 0; padding:15px 15px 30px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-family:'Noto Sans KR'; font-size:15px; color:#404040; font-weight:100; text-transform:uppercase; letter-spacing:1px; }
#popup .outer .inner .inner_text strong { font-family:'Noto Sans KR'; font-size:18px; color:#404040; line-height:18px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
#popup .outer .inner .btn_close { position:absolute; right:-40px; top:4px; cursor:pointer; }


/* 카피라이터 */
#footer_new { margin:0 auto 0; }
#footer_new .foot_name { font-family:'Noto Sans KR'; font-size:16px; color:#6f6f6f; font-weight:400; text-align:center; }
#footer_new .foot_adress { margin-top:10px; }
#footer_new .foot_adress ul { margin:0; padding:0; text-align:center; }
#footer_new .foot_adress li { list-style:none; padding:0 10px 0 12px; display:inline-block; font-family:'Noto Sans KR'; font-size:14px; line-height:14px; color:#6f6f6f; font-weight:200; border-left:1px solid #cccccc; }
#footer_new .foot_adress li:first-child { padding:0 12px 0 0; border:none; }


@media screen and (max-width:1500px) {
	#popup .outer .inner { width:auto; margin:0 50px; }

}

@media screen and (max-width:640px) {
	#popup .outer .inner { height:70vh; margin:0 30px 60px; }
	#popup .outer .inner .inner_box { height:60vh; }
	#popup .outer .inner .inner_text { margin:1px 0 0; padding:1px 15px 30px; font-size:10px; }
	#popup .outer .inner .inner_text strong { font-family:'Noto Sans KR'; font-size:14px; color:#404040; line-height:18px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
	#popup .outer .inner .btn_close { width:100%; height:40px; left:0; right:0; top:88vh; margin-top:-96px; background-color:#999; text-align:center; cursor:pointer; }
	#popup .outer .inner .btn_close img { width:16px; margin-top:10px; }
}

/* FOOT */
#footer .foot_name { font-family:'Noto Sans KR'; font-size:16px; color:#e4e4e4; font-weight:400; text-align:center; }
#footer .foot_adress { margin-top:10px; }
#footer .foot_adress ul { margin:0; padding:0; text-align:center; }
#footer .foot_adress li { list-style:none; padding:0 10px 0 12px; display:inline-block; font-family:'Noto Sans KR'; font-size:14px; line-height:14px; color:#e4e4e4; font-weight:200; border-left:1px solid #bad6d9; }
#footer .foot_adress li:first-child { padding:0 12px 0 0; border:none; }