@charset "utf-8";
@font-face{font-family:'Nanum Barun Gothic';font-style:normal;font-weight:200;src: local('Nanum Barun Gothic UltraLight'), local('Nanum Barun Gothic-UltraLight'), local('NanumBarunGothic UltraLight');src: url(../font/NanumBarunGothicUltraLight.eot);src: url(../font/NanumBarunGothicUltraLight.eot?#iefix) format('embedded-opentype'),url(../font/NanumBarunGothicUltraLight.woff) format('woff'),url(../font/NanumBarunGothicUltraLight.ttf) format('truetype');}
@font-face{font-family:'Nanum Barun Gothic';font-style:normal;font-weight:300;src: local('Nanum Barun Gothic Light'), local('Nanum Barun Gothic-Light'), local('NanumBarunGothic Light');src: url(../font/NanumBarunGothicLight.eot);src: url(../font/NanumBarunGothicLight.eot?#iefix) format('embedded-opentype'),url(../font/NanumBarunGothicLight.woff) format('woff'),url(../font/NanumBarunGothicLight.ttf) format('truetype');}
@font-face{font-family:'Nanum Barun Gothic';font-style:normal;font-weight:400;src: local('Nanum Barun Gothic Regular'), local('Nanum Barun Gothic-Regular'), local('NanumBarunGothic Regular');src: url(../font/NanumBarunGothic.eot);src: url(../font/NanumBarunGothic.eot?#iefix) format('embedded-opentype'),url(../font/NanumBarunGothic.woff) format('woff'),url(../font/NanumBarunGothic.ttf) format('truetype');}
@font-face{font-family:'Nanum Barun Gothic';font-style:normal;font-weight:700;src: local('Nanum Barun Gothic Bold'), local('Nanum Barun Gothic-Bold'), local('NanumBarunGothic Bold');src: url(../font/NanumBarunGothicBold.eot);src: url(../font/NanumBarunGothicBold.eot?#iefix) format('embedded-opentype'),url(../font/NanumBarunGothicBold.woff) format('woff'),url(../font/NanumBarunGothicBold.ttf) format('truetype');}

/*reset*/
 #accessibility, .skip, hr, legend, caption{position:absolute;width:0;height:0;font-size:0;line-height:0;overflow:hidden;visibility:hidden;text-indent:-1000em}
/* base */
html{overflow-y:scroll}
body{font-size:13px;font-family:Tahoma, 'Nanum Barun Gothic', Dotum;font-weight:400;color:#333;background:#f2f1ed}
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, input, table, tr, th, td{margin:0;padding:0}
h1, h2, h3, h4, h5, h6{font-weight:normal;font-size:100%}
ul, ol, li{list-style:none}
fieldset, img{border:none}
input, select, textarea{vertical-align:middle;font-size:1em;color:#333}
select {font-size:11px;font-family:Tahoma, 'Nanum Barun Gothic', Dotum}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{display:block}
/* a-style */
a{color:#3c3c3c;text-decoration:none}
a:hover, a:active{color:#3c3c3c;text-decoration:underline}
/*a:focus{outline-style:dashed;outline-width:1px}*/
/*common*/
.reset{clear:both !important;height:0px !important;line-height:0px !important;padding:0 !important;margin:0 !important}
.input{height:16px;border:none;background:none;color:#888;font-family:Tahoma, 'Nanum Barun Gothic', Dotum;font-size:12px;padding:2px 0 0 4px}
/*btn*/
.btn_r{text-align:right}
.btn_l{text-align:left}
.btn_c{text-align:center}
/*paginate*/
.paginate{height:55px;text-align:center;padding:30px 0 50px;clear:both}
.paginate img{vertical-align:middle}
.paginate a, .paginate strong{display:inline-block;padding:0 7px;margin:0 -3px;vertical-align:0;color:#ccc;font-size:40px;font-weight:normal}
.paginate a:hover, .paginate strong{color:#444}
.paginate a.pre, .paginate a.next{height:9px;margin:0;border:none}
.paginate a.pre{padding:0 5px 0 0}
.paginate a.next{padding:0 0 0 5px}
/*common*/
/*header*/
#header{width:100%;height:120px;overflow:hidden;position:relative}
#header h1{float:left;padding-top:20px}
#header ul{float:left;padding-top:54px}
#header ul li{float:left;padding-left:100px}
#header ul li a{font-size:20px;line-height:20px;display:block}
#header ul li a:hover{padding-top:2px;text-decoration:none}
#header .glo{position:absolute;top:15px;right:0;font-size:11px}
#header .glo a{font-size:11px}
/*text*/
.webcss_info{line-height:20px;clear:both;padding:20px 0 30px}
.webcss_info h1{font-size:15px;font-weight:bold;padding-bottom:4px;margin-bottom:6px;border-bottom:1px solid #ccc}
.webcss_info h3{display:inline}
.webcss_info h4{display:inline}
.webcss_info h5{display:inline}
.webcss_info h6{text-align:right}
.css-html-seo-text{line-height:20px;clear:both;overflow:hidden;margin-bottom:70px}
.css-html-seo-text h1{font-size:15px;font-weight:bold;padding-bottom:10px}
.text_content{width:300px;float:left;padding-left:22px}
/*footer*/
footer{width:100%;height:200px;clear:both;border-top:4px solid #262626}
footer h4{font-size:30px;font-weight:bold;float:left;padding-top:20px}
footer .footer_right{float:right;text-align:right;padding-top:40px;line-height:19px}
footer address{font-style:normal}
footer .footer_link{clear:both;text-align:center;padding-top:30px}
/*main*/
#wrap_m{width:980px;margin:0 auto}
#contents_m{clear:both}
#contents_m .img_content ul{width:100%;overflow:hidden}
#contents_m .img_content ul li{width:320px;float:left;padding:0 0 10px 10px}
#contents_m .img_content ul li img{width:100%;vertical-align:top}
#contents_m .img_content ul li.li_01{padding-left:0}
#contents_m .img_content ul li.li_04{clear:both;padding-left:0}
#contents_m .img_content ul li.li_07{clear:both;padding-left:0}
#contents_m .img_content h2{padding:12px 0;text-align:center;font-weight:bold}
/*visual_banner*/
#visual_content{width:100%;height:330px;position:relative;z-index:9}
#visual_content .visual_cont{width:100%;height:330px;margin:0 auto;overflow:hidden}
#visual_content .nivo-slice{height:215px;display:block;position:absolute;top:0;z-index:5;background-position:112px 9px !important}
#visual_content .nivo-box{display:block;position:absolute;z-index:5}
#visual_content .nivo-caption{width:335px;height:257px;position:absolute;right:190px;top:-20px;text-align:justify;z-index:9}
#visual_content .nivo-caption div{position:relative}
#visual_content .nivo-caption .title{position:absolute;left:0;text-align:left;top:50px;width:360px}
#visual_content .nivo-caption .title, .nivo-caption a{font-size:18px;font-weight:normal}
#visual_content .nivo-caption .title a{display:block;margin-bottom:20px}
#visual_content .nivo-caption .title strong{display:block;margin-left:20px}
#visual_content .nivo-caption .description{position:absolute;top:150px;left:0;z-index:99999}
#visual_content .nivo-caption .description li{padding-top:5px}
#visual_content .nivo-caption a{width:100%;height:100%}
#visual_content .nivo-html-caption{display:none}
#visual_content .nivo-directionNav{width:100%;position:relative;top:0;z-index:8}
#visual_content .nivo-directionNav a{width:74px;height:246px;position:absolute;top:-40px;z-index:6;cursor:pointer;text-indent:-1000em}
#visual_content a.nivo-prevNav{right:100px;background:url(../images/common/btn_next.gif) no-repeat left top}
#visual_content a.nivo-nextNav{width:66px;height:217px;left:0px;top:0;background:url(/common/images/common/btn_pre.gif) no-repeat left top}
#visual_content a.nivo-prevNav:hover{background:url(../images/common/btn_next_over.gif) no-repeat left top}
#visual_content a.nivo-nextNav:hover{background:url(../images/common/btn_pre_over.gif) no-repeat left top}
#visual_content .nivo-controlNav{position:absolute;bottom:0;right:10px;display:none}
#visual_content .nivo-controlNav a{width:23px;height:23px;text-indent:-9999px;margin-right:3px;float:left;position:relative;z-index:7;cursor:pointer}
#visual_content #sliderWrapper{width:100%;height:260px;padding-top:50px;margin:0 auto;position:relative}
#visual_content #sliderWrapper h5{position:absolute;left:0;top:15px;font-size:32px;font-weight:bold;z-index:99;line-height:32px}
#visual_content #slider{width:100% !important;height:215px;background:url(../js/lightbox/images/loading.gif) no-repeat 50% 50%;position:relative;z-index:2}
#visual_content #slider img{height:260px;position:absolute;top:0px;left:0px;display:none}
#visual_content #slider a{border:0;display:block}
/*sub*/
#wrap{width:980px;margin:0 auto}
/*about*/
.about{overflow:hidden;padding-bottom:50px;background:url(../images/common/about.jpg) no-repeat right top}
.about ul{padding:50px 0 0 30px}
.about li{padding-top:15px;line-height:25px}
.about li span{font-weight:bold}
.about dl{padding:70px 0 0 30px}
.about dl dt{padding-bottom:10px;font-weight:bold;font-size:15px}
.about dl dd{float:left;padding-bottom:10px}
.about dl dd i{float:left;font-style:normal}
.about dl dd strong{width:225px;float:left;padding-left:10px}
.about dl dd span{width:180px;float:left}
.about dl dd b{float:left}
/*portfolio*/
.Portfolio{padding-bottom:50px}
.Portfolio .menu_2dep{width:100%;position:relative;margin-bottom:16px;padding-bottom:60px;border-bottom:1px solid #ccc}
.Portfolio ul{width:100%;overflow:hidden}
.Portfolio ul li{float:left;padding:0 0 10px 29px}
.Portfolio ul li.li_01{padding-left:0}
.Portfolio ul li a{display:block;font-weight:bold;font-size:15px;color:#444}
.Portfolio ul li a:hover{color:#444;text-decoration:none}
.Portfolio .route{position:absolute;right:0;bottom:20px}
.Portfolio .route h1{display:inline;font-weight:bold}
.Portfolio dl{width:180px;height:135px;float:left;padding:3px;opacity:0.5;padding-bottom:20px}
.Portfolio dl:hover{opacity:1}
.Portfolio dt{padding-bottom:5px;text-align:center}
.Portfolio dt a{font-size:13px;font-weight:bold}
.Portfolio dd img{width:180px;height:110px}

.Portfolio.develop dl{height:150px;}
.Portfolio.develop dt strong{display:block;padding-top:5px;font-size:12px;font-weight:normal;}

.Portfolio.mobile dd {text-align:center;}
.Portfolio.mobile dd img{width:auto;}
/*sitemap*/
.sitemap{padding-bottom:80px}
.sitemap dl{float:left;width:33%;padding-top:50px}
.sitemap dl.dl_en{width:100%}
.sitemap dt{font-weight:bold;font-size:18px;padding:0 0 20px 50px}
.sitemap dd{font-size:13px;padding:8px 0 8px 60px}
.sitemap dl.dl_en dd{width:150px;height:30px;float:left;padding:0;text-align:center}
/*error_404*/
.error_404{font-size:30px;font-weight:bold;text-align:center;padding:50px 0}
.error_404 a{text-decoration:none}
/*guest_book*/
.guest_book_cont{width:930px;margin:0 auto;padding-bottom:70px}


@media all and (min-width:980px) {
	/*about*/
	.about ul{padding-right:70px}
}

@media all and (max-width:980px) {
	#wrap_m{width:auto;padding:0 50px}
	#contents_m .img_content ul li{width:32%;float:left;padding:0 0 2% 2%}
	#contents_m .img_content ul li h2{font-size:1.5vw}
	#visual_content .nivo-caption{width:30vw;left:55%}
	#visual_content .nivo-caption .title{width:auto;top:30px;font-size:14px}
	#visual_content .nivo-caption .title strong{margin-left:0;font-size:14px}
	#visual_content a.nivo-prevNav{right:0}
	#wrap{width:auto;padding:0 50px}
	.css-html-seo-text{height:auto}
	.text_content{width:100%;padding:0 0 30px 0}
	footer .footer_right{padding-top:20px}
	/*about*/
	.about ul{padding-right:370px}
}

@media all and (max-width:890px) {
	#visual_content{height:380px}
	#visual_content .visual_cont{height:100%}
	#visual_content .nivo-caption{width:85%;left:45%;background:url(../images/main/bg_project.png) no-repeat left 20px}
	#visual_content .nivo-caption .title{padding-left:30px}
	#visual_content .nivo-caption .description{padding-left:30px}
	#visual_content .nivo-directionNav{z-index:10}
	/*about*/
	.about li{padding-top:15px;line-height:25px}
	.about dl dd{padding-bottom:20px;line-height:25px}
	.about dl dd span{clear:both;padding-left:70px}
	/*portfolio*/
	.Portfolio ul li.li_04{clear:both;padding-left:0}
	.Portfolio ul li.li_07{clear:both;padding-left:0}
}

@media all and (max-width:850px) {
	/*portfolio*/
	.Portfolio dl{width:23%;padding:1% 1% 20px}
	.Portfolio dd img{width:100%}
	.cboxPhoto{width:600px}
	/*sitemap*/
	.sitemap dl.dl_en dd{width:25%}
}

@media all and (max-width:765px) {
	#visual_content .nivo-caption{width:85%;left:35%}
	/*about*/
	.about{background-size:285px auto}
	.about ul{padding-right:0}
	/*portfolio*/
	.Portfolio dl{width:31%}
}

@media all and (max-width:720px) {
	#header ul{float:right}
	#header ul li{padding-left:50px}
	#header ul li:first-child{padding-left:0}
	/*about*/
	.about dl dd b{clear:both;padding-left:70px}
	/*portfolio*/
	.cboxPhoto{width:500px}
}

@media all and (max-width:640px) {
	#wrap{padding:0 20px}
	#wrap_m{width:auto;padding:0 20px}
	#contents_m .img_content ul li{width:100%;float:left;padding:0 0 4% 0}
	#contents_m .img_content ul li h2{font-size:4vw}
	#header{height:145px}
	#header ul{padding-top:55px}
	.css-html-seo-text{margin-bottom:40px}
	#visual_content{display:none}
	footer{height:auto;padding-bottom:20px}
	footer .footer_link{line-height:25px}
	/*portfolio*/
	.Portfolio .menu_2dep{padding-bottom:10px}
	.Portfolio .route{display:none}
	.cboxPhoto{width:450px}
}

@media all and (max-width:530px) {
	#header .glo{display:none}
	#header ul{padding-top:25px;clear:both}
	/*about*/
	.about{background-size:100% auto;padding-top:80%}
	.about ul{padding-left:0}
	.about dl{padding-left:0}
	.about dl dd strong{clear:both;padding-left:10px}
	.about dl dd span{padding-left:10px}
	.about dl dd b{clear:both;padding-left:10px}
	/*portfolio*/
	.Portfolio .menu_2dep{height:auto}
	.Portfolio ul{height:auto;line-height:25px}
	.Portfolio ul li{padding-left:15px;text-align:center}
	.Portfolio ul li:last-child{padding-right:0}
	.Portfolio ul li a{font-size:13px}
	.Portfolio dl{width:48%}
	.cboxPhoto{width:300px}
	#cboxContent #cboxClose{top:-160px}
	/*sitemap*/
	.sitemap dl{width:33%}
	.sitemap dl dt{padding-left:0}
	.sitemap dl dd{padding-left:0}
	.sitemap dl.dl_en dd{width:33%;text-align:left}
	/*error_404*/
	.error_404{font-size:18px;line-height:30px}
}