@charset "utf-8";

/*=================================
layout
=================================*/
@media all and (max-width:1000px){
	#container {padding-left:0px;padding-top:50px;}
}


/*=================================
intro
=================================*/
@media all and (max-width:1000px){
	#background div.bg01 {background: url(/img/intro_bg3.jpg) no-repeat 30% top;background-size: 1200px auto;}
	#background div.bg02 {background: url(/img/intro_bg2.jpg) no-repeat center top;background-size: 1200px auto;}
	#background div.bg03 {background: url(/img/intro_bg.jpg) no-repeat 50% top;background-size: 1200px auto;}

	#intro {width:270px;margin-left:-135px;margin-top:-214px;padding:80px;}
	#intro li {display:block;width:100%;margin:0 0 1.7em;text-align:left}

	/*#intro li img {margin:0 0.7em 0 0;display:inline-block;vertical-align:middle;}
	#intro li span {display:inline-block;vertical-align:middle;}*/
	#intro li .icon {margin:0 0.7em 0 0;display:inline-block;vertical-align:middle;}
	#intro li span {display:inline-block;vertical-align:middle;}
}


/*=================================
header
=================================*/
@media all and (max-width:1000px){
	#header {width:100%;height:50px;box-shadow:none;background:#fff;}

	/* 로고 */
	#logo-bar {height:50px;padding:0px;background:#f7f7f7;box-shadow:0px 2px 10px #999;}
	#logo-bar .logo {position:absolute;top:16px;left:20px;display:inline-block;font-size:18px;letter-spacing:-1px;margin:0}

	/* 메뉴오픈 버튼*/
	#logo-bar .top-open {position:absolute;top:14px;right:20px;width:25px;height:24px;display:block;cursor:pointer;transition:0.3s;-webkit-transition:0.3s;-moz-transition:0.3s;-o-transition:0.3s;}
	#logo-bar .top-open .line1 {top:2px;position:absolute;height:4px;width:25px;background:#999;left:0;border-radius:3px;transition:0.3s;-webkit-transition:0.3s;-moz-transition:0.3s;-o-transition:0.3s;}
	#logo-bar .top-open .line2 {top:10px;position:absolute;height:4px;width:25px;background:#999;left:0;border-radius:3px;transition:0.3s;-webkit-transition:0.3s;-moz-transition:0.3s;-o-transition:0.3s;}
	#logo-bar .top-open .line3 {top:18px;position:absolute;height:4px;width:25px;background:#999;left:0;border-radius:3px;transition:0.3s;-webkit-transition:0.3s;-moz-transition:0.3s;-o-transition:0.3s;}
	#logo-bar .top-open.on .line1 {background:#083352;transform:translateY(8px) rotate(405deg);-webkit-transform:translateY(8px) rotate(405deg);-ms-transform:translateY(8px) rotate(405deg);-moz-transform:translateY(8px) rotate(405deg);-o-transform:translateY(8px) rotate(405deg);}
	#logo-bar .top-open.on .line2 {background:#083352;opacity:0}
	#logo-bar .top-open.on .line3 {background:#083352;transform:translateY(-8px) rotate(-405deg);-webkit-transform:translateY(-8px) rotate(-405deg);-ms-transform:translateY(-8px) rotate(-405deg);-moz-transform:translateY(-8px) rotate(-405deg);-o-transform:translateY(-8px) rotate(-405deg);}
	#logo-bar .bg {display:none;width:100%;height:100%;position:fixed;top:0;left:0;right:0;bottom:0;z-index:-99;background:#000;opacity:0.5;filter:alpha(opacity=50);}

	/* 상위메뉴 */
	#gnb {position:absolute;top:-300px;left:0;border-top:0px solid #e1e1e1;background:#f7f7f7;overflow:hidden;box-shadow:0px 2px 10px #999;z-index:-9}
	#gnb .menu {line-height:50px;background:#fff}
	
	/* 서브메뉴 */
	#gnb .sub-menu {display:none;}

	#gnb .mobile-menu {display:block;}
	#gnb .mobile-menu ul {display:none;background:#083352;}
	#gnb .activated .mobile-menu ul {display:block;}
	#gnb .mobile-menu a {display:block;line-height:30px;color:#8DADC3;text-shadow:1px 1px 1px #000;border-bottom:1px solid #1D425D}
	#gnb .mobile-menu a.selected,
	#gnb .mobile-menu a:hover {font-weight:bold;color:#fff;background:#05263E}

	/* 170322 서브메뉴 백업
	#gnb .sub-menu {position: static;left: 0;width: auto;height: auto;box-shadow: none;background: none;}
	#gnb .activated .sub-menu {width: auto;}
	#gnb .sub-menu div {position: static;top: 0;left: 0;min-width: 0;background: #083352;}
	#gnb .sub-menu a {display: block;line-height:30px;color:#8DADC3;text-shadow:1px 1px 1px #000;border-bottom:1px solid #1D425D;}
	#gnb .sub-menu .bg {display: none;}
	#gnb .activated .sub-menu .bg {display: none;}
	#gnb .sub-menu a:hover,	#gnb .sub-menu a.selected {font-weight: bold;color:#fff;background:#05263E;}
	*/
}


/*=================================
footer
=================================*/
@media all and (max-width:1000px){
	#footer {position:relative;width:100%;background:#222;} /* 카피라이트부분 */
	.copyright .member a {color:#999}
	.copyright address a {color:#999}
}


/*=================================
center
=================================*/

/* 모바일 class 미활용으로 인한 주석처리
@media all and (max-width:1600px){
	.mobile .grid .content {width:33.3%;}
}
@media all and (max-width:1400px){
	.grid {margin:0px auto}
	.grid .content {width:50%;}
}
@media all and (max-width:1200px){
	.mobile .grid .content {width:50%;}
}
@media all and (max-width:1000px){
	.content-box {width:100%;margin:0 auto;padding:40px 20px;min-height:400px;}
	#page-title {font-size:3em;text-align:center;margin-bottom:20px}
	#portfolio {padding:20px 0px 20px}
	.grid .info a.big-img {display:none}
	#introduction h2 {font-size:60px;letter-spacing:-2px;margin:30px 0 60px}
	#contactus h2 {font-size:60px;letter-spacing:-2px;}
}
@media all and (max-width:600px){
	.grid .content {width:100%;}
	#introduction h2 {font-size:50px;letter-spacing:-1px;}
	#introduction .content1, 
	#introduction .content2 {margin:60px auto}
	#introduction .content2 .title-img {width:114%;margin:90px -7% 40px;}
	#introduction .content2 dl {min-height:inherit;width:100%;padding:30px 0;border-right:none;border-bottom:1px dotted #d1d1d1;margin:0 0 -1px 0;}
	#contactus h2 {font-size:40px;letter-spacing:-1px;}
}
@media all and (max-width:500px){
	.mobile .grid .content {width:100%;}
} 
*/

@media all and (max-width:1800px){
	.grid .content {margin:1%;width:31.3%;}
}
@media all and (max-width:1400px){
	.grid .content {margin:2%;width:46%;}
}
@media all and (max-width:1000px){
	.content-box {width:100%;margin:0 auto;padding:40px 20px;min-height:400px;}
	#page-title {font-size:3em;text-align:center;margin-bottom:20px}
	#portfolio {padding:0}
	.grid {margin:30px 5px}
	.grid .info a.big-img {display:none}
	#introduction h2 {font-size:60px;letter-spacing:-2px;margin:30px 0 60px}
	#contactus h2 {font-size:60px;letter-spacing:-2px;}
}
@media all and (max-width:600px){
	.grid .content {margin:4%;width:92%;}
	#introduction h2 {font-size:50px;letter-spacing:-1px;}
	#introduction .content1, 
	#introduction .content2 {margin:60px auto}
	#introduction .content2 .title-img {width:114%;margin:90px -7% 40px;}
	#introduction .content2 dl {min-height:inherit;width:100%;padding:30px 0;border-right:none;border-bottom:1px dotted #d1d1d1;margin:0 0 -1px 0;}
	#contactus h2 {font-size:40px;letter-spacing:-1px;}
}