@charset "utf-8";

/* @import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css); */

/* 건너뛰기메뉴 */
a.skip{position:absolute; display:block; width:100%; left:0; text-align:center; top:-10000px; z-index:500;}
a.skip:hover, a.skip:focus, a.skip:active{position: absolute; top: 0; padding: 10px 0; font-weight:bold; color:#fff; background:#251f1f; z-index:500}
caption{position:relative;top:-9999px;}

body{overflow-y:scroll;}
#wrap{font-family: 'Nanum Gothic', sans-serif;font-size:15px;color:#000;max-width:1180px;margin:0 auto;line-height:150%;}
#header{border-top:13px solid #000;position:fixed;top:0;z-index:1000;background:#fff;width:1180px;}
#header .inner{width:100%}
#header .inner h1{padding:4% 0 20px 0;}
#header .inner .gnb{position:absolute;right:0;top:0;padding:45px 0 20px 0}
#header .inner .gnb ul{overflow:hidden;}
#header .inner .gnb ul li{float:left;padding:0 0 0 40px;}
#header .inner .gnb ul li a{font-weight:bold;line-height:150%;display:block;color:#000;}
#header .inner .gnb ul li a:hover{border-bottom:1px solid #000;}
#header .inner .gnb ul li a:focus{border-bottom:1px solid #000;}
#header .inner .gnb ul li a.on{border-bottom:1px solid #000;}
#header .inner .gnb ul li:first-child{padding-left:0;}
#container{padding:135px 0 5% 0}
#footer{text-align:center;padding-bottom:5%}


/* work */
#wrap > .years{max-width:1180px;position:relative;top:100px;z-index:10000;text-align:right;}
#wrap > .years > ul{overflow:hidden;position:absolute;right:0;top:0;}
#wrap > .years > ul > li{float:left;padding:0 0 0 10px;}
#wrap > .years > ul > li > button{background:none;border:0;font-size:14px;display:block;line-height:130%;border-bottom:1px solid #fff;}
#wrap > .years > ul > li > button:hover{border-bottom:1px solid #000;}
#wrap > .years > ul > li > button:focus{border-bottom:1px solid #000;}
#wrap > .years > ul > li > button.on{border-bottom:1px solid #000;}
.work ul{overflow:hidden;margin-left:-2%;}
.work ul li{float:left;width:31.3%;margin:0 0 2% 2%;-webkit-transition:all 1s;transition:all 1s;}
.work ul li img{-webkit-transform:scale(0);transform:scale(0);-webkit-transition:all 1s;transition:all 1s;}
.work ul li.show img{-webkit-transform:scale(1);transform:scale(1);-webkit-transition:all 1s;transition:all 1s;}
.work ul li:nth-child(1) img{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.work ul li:nth-child(2) img{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.work ul li:nth-child(3) img{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.work ul li:nth-child(4) img{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.work ul li:nth-child(5) img{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.work ul li:nth-child(6) img{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.work ul li:nth-child(7) img{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.work ul li:nth-child(8) img{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.work ul li:nth-child(9) img{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.work ul li a{position:relative;display:block;height:0;padding-bottom:75%;overflow:hidden;}
.work ul li a img{width:100%}
.work ul li a .hover{
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
	-webkit-transition:all .3s;transition:all .3s;position:absolute;left:0;top:0;width:100%;height:100%;background:url(../img/bg_work_hover.png) repeat left top;z-index:10;}
.work ul li a .hover .in{padding:10px;font-size:16px;color:#fff;}
.work ul li a .hover .in > .years{padding-top:15px}
.work ul li a:hover .hover{
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
}
.work ul li a:focus .hover{opacity:1}
.more_area{position:relative;padding:60px 0;}
.more_area .more{text-align:center;}
.more_area .top{position:absolute;right:0;top:60px;}

/* work_view */
.work_view{position:relative;max-width:1180px;}
.work_view .prevnext .prev{position:fixed;left:50%;top:50%;margin-top:-17px;margin-left:-700px;z-index:100}
.work_view .prevnext .next{position:fixed;right:50%;top:50%;margin-top:-17px;margin-right:-700px;z-index:100}
.work_view .cont{overflow:hidden;position:relative;}
.work_view .cont .img_area{float:left;width:66%;}
.work_view .cont .img_area > img{width:100%;max-width:780px;margin-bottom:3%;}
.work_view .cont .txt_area{position: fixed;top: 135px;z-index: 1000;background: #fff;width: 1180px;}
.work_view .cont .txt_area .in{position:absolute;right:0;top:0;width:32%;border-top:2px solid #d9d9d9}
.work_view .cont .txt_area .in > strong{display:block;padding:25px 0 15px 0;font-size:16px;}
.work_view .cont .txt_area .in > p{padding-bottom:5px;}

.back{width:40px;height:40px;display:block;text-indent:-9999px;overflow:hidden;background:url(../img/btn_close.png) no-repeat left top;}
.back:hover{background:url(../img/btn_close_over.png) no-repeat left top;}
.back:focus{background:url(../img/btn_close_over.png) no-repeat left top;}
.back.on{background:url(../img/btn_close_over.png) no-repeat left top;}

/* about */
.about{border-top:2px solid #d9d9d9;padding-top:40px;line-height:200%;}
.about .section{padding-bottom:5%;position:relative;min-height:400px;}
.about .section h2{font-size:16px;font-weight:bold;color:#000;padding-bottom:20px}
.about .section .history_list{padding-right:70%;}
.about .section .history_list li{position:relative;padding-bottom:10px;line-height:140%;}
.about .section .history_list li .years{}
.about .section .history_list li .txt{}
.about .section.bg1{background:url(../img/img_about01.jpg) no-repeat right top;background-size:65%;}
.about .section.bg2{background:url(../img/img_about02.jpg) no-repeat right top;background-size:65%}
.about .section .business_txt{padding-right:70%;}
.about .section .map_txt{padding-right:70%;}
.about .section .map_txt ul li{padding-bottom:10px;}
.about .section .map_area{position:absolute;right:0;top:0;width:65%;}
.about .section .map_area #map_area{width:100%;height:400px;border:1px solid #ddd;}
.about .section#map{min-height:400px;}
.about .section#map h2{top:135px}



@media only screen and (max-width: 1200px) {
	#header{width:100%;}
	#header .inner h1{padding-left:10px;}
	#header .inner .gnb{right:10px;}
	#wrap > .years > ul{right:10px;}
	#container{padding:135px 10px 5% 10px;}
	#footer{font-size:12px;line-height:150%;padding:0 10px 5% 10px}
	.work ul li a .hover .in{font-size:14px;line-height:150%;padding:5px;}
	.work ul li a img{width:100%;}
	.more_area{padding:30px 0;}
	.more_area .top{top:30px;}
	.about .section{font-size:14px;line-height:170%;min-height:auto;}
	.work_view .prevnext .prev{left:10px;margin-left:0;}
    .work_view .prevnext .prev img{height:40px;}
	.work_view .prevnext .next{right:10px;margin-right:0;}
    .work_view .prevnext .next img{height:40px;}
	.work_view .cont .txt_area{width:100%;}
}

@media only screen and (max-width: 800px) {
	.about .section.bg1{background:none;}
	.about .section.bg2{background:none;}
	.about .section .history_list{padding-right:0;}
	.about .section .business_txt{padding-right:0}
}

@media only screen and (max-width: 640px) {
	#header .inner h1{text-align:center;padding:10px 0;}
	#header .inner .gnb{position:static;padding:0 0 10px 0;}
	#header .inner .gnb ul li{width:25%;text-align:center;padding-left:0;}
	#header .inner .gnb ul li a{font-size:12px;display:inline-block;}
	#wrap > .years{top:120px}
	#wrap > .years > ul{position:static;text-align:center;}
	#wrap > .years > ul > li{float:none;display:inline-block;margin:0;padding:0 2px;}
	.work ul li{width:48%;}
	.work ul li a .hover .in{font-size:12px;}
	.work_view .cont .txt_area{position:static;}
	.about .section{font-size:12px}
	.about .section h2{position:static;padding-bottom:2%}
	.about .section .history_list{}
	.about .section .business_txt{}
	.about .section .map_txt{}
	.about .section#map{padding-top:0;}
	.work_view .cont .img_area{float:none;width:auto}
	.work_view .cont .txt_area{position:static;}
	.work_view .cont .txt_area .in{position:static;width:auto;padding-bottom:20px;}
	.about .section .map_txt{padding-right:0;}
	.about .section .map_area{position:static;width:auto;}
}