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

/*모바일용 CSS*/
/*기본 CSS*/
.container { width:90%; max-width:1132px; margin:0 auto}
.cfixed:after, .container:after { display:block; content:""; clear:both}
.blind { position:absolute; width:0; height:0; line-height:0; text-indent:-9999px; overflow:hidden}
.sec-tit { font-size:42px; color:#3F51B5; font-weight:normal}
.divider { width:90%; max-width:1132px; margin:0 auto; margin-top:77px; background:#EEE}
.m-divider { width:20px; margin:0 auto; margin-top:77px; background:#3f51b5}

/*헤더 영역 CSS*/
.header { position:relative; padding:18px 5%}
.header .logo { float:left}
.header .logo a { font-size:26px; font-weight:normal; color:#3f51b5}
.header .gnb { display:none; position:absolute; top:100%; left:0; width:100%; background:#3f51b5}
.header .gnb li { border-bottom:1px solid #303f9f}
.header .gnb li a { display:block; padding:14px 0 14px 5px; font-size:14px; color:#FFF;}
.header .menu-toggle-btn { float:right; width:20px; margin-top:4px; cursor:pointer}
.header .menu-toggle-btn span { display:block; width:100%; height:2px; background:#3f51b5}
.header .menu-toggle-btn span:nth-child(2) { margin:5px 0}

/*슬라이더 영역 CSS*/
.slider img { display:block; width:100%; max-width:100%; height:auto}

/*디스플레이 영역 CSS*/
.display-section { margin-top:59px; text-align:center}
.display-section .sec-tit { margin-bottom:30px}
.display-section .desc { color:#666; line-height:1.9}

/*프로모션 영역 CSS*/
.promotion-section { margin-top:68px;}
.promotion-section .promo-list li { margin-top:52px; text-align:center}
.promotion-section .promo-list li:first-child { margin-top:0}
.promotion-section .promo-list li img { height:52px}
.promotion-section .promo-list li h3 { margin:29px 0 20px 0; color:#3f51b5; font-weight:normal}
.promotion-section .promo-list li p { font-size:14px; color:#666; line-height:1.5}

/*최근 작업 영역 CSS*/
.work-section { margin-top:73px}
.work-section .sec-tit { width:90%; max-width:1132px; margin:0 auto; margin-bottom:47px; text-align:center}
.work-section .work-list li { width:100%}
.work-section .work-list li a { display:block; position:relative; width:100%; height:100%}
.work-section .work-list li a:before { display:block; position:absolute; top:0; left:0; z-index:10; width:100%; height:100%; background:#000; content:""; opacity:0; transition:all 0.2s}
.work-section .work-list li a:hover:before { opacity:0.7}
.work-section .work-list li .info { position:absolute; top:0; left:23px; z-index:20; opacity:0; transition:all 0.3s}
.work-section .work-list li a:hover .info { transform:translateY(23px); opacity:1;}
.work-section .work-list li .info h3 { color:#FFF; margin-bottom:8px; font-size:23px; font-weight:normal}
.work-section .work-list li .info span { font-size:11px; color:#FFF}
.work-section .work-list li img { display:block; width:100%; max-width:100%; height:auto}

/*블로그 영역 CSS*/
.blog-section { margin-top:77px}
.blog-section .sec-tit { margin-bottom:47px; text-align:center}
.blog-section .blog-list li { width:100%; margin-top:45px}
.blog-section .blog-list li:first-child { margin-top:0}
.blog-section .blog-list li img { display:block; width:100%; max-width:100%; height:auto}
.blog-section .blog-list li time { display:block; margin:11px 0 10px; font-size:11px; color:#999}
.blog-section .blog-list li h3 { color:#444; font-weight:normal; line-height:1.6}

/*연락처 영역 CSS*/
.contact-section { margin-top:109px}
.contact-section .sec-tit { margin-bottom:47px; text-align:center}
.contact-section .form-box fieldset { border:0}
.contact-section .form-box .form input { padding-bottom:13px; margin-bottom:38px}
.contact-section .form-box .textarea textarea { height:159px}
.contact-section .form-box .send-btn { margin-top:36px; text-align:right}
.contact-section .form-box .send-btn button { padding:15px; margin:0; border:0; font-size:12px; color:#FFF; background:#3f51b5; cursor:pointer}

/*푸터영역 CSS*/
.footer { margin-top:104px}
.footer iframe { width:100%; height:320px}
.footer p { margin:21px 0; color:#3f51b5; text-align:center}







/*테블릿용 CSS*/
@media all and (min-width:768px){
	/*기본 CSS*/
	.divider { margin-top:124px;}
	.m-divider { margin-top:124px;}
	
	/*헤더 영역 CSS*/
	.header { position:static; padding:28px 52px}
	.header .gnb { display:block !important; position:static; float:right; width:auto; margin-top:6px; background:none}
	.header .gnb li { float:left; margin-left:21px; border-bottom:0}
	.header .gnb li a { color:#3f51b5; padding:0; font-size:16px;}
	.header .menu-toggle-btn { display:none !important}
	
	/*디스플레이 영역 CSS*/
	.display-section { margin-top:95px;}
	
	/*프로모션 영역 CSS*/
	.promotion-section { margin-top:110px}
	.promotion-section .promo-list li { float:left; width:23.046%; margin-left:2.604%; margin-top:0}
	.promotion-section .promo-list li:first-child { margin-left:0}
	
	/*최근 작업 영역 CSS*/
	.work-section { margin-top:118px}
	.work-section .sec-tit { margin-bottom:76px}
	.work-section .work-list li { float:left; width:50%}
	.work-section .work-list li .info { left:37px}
	.work-section .work-list li a:hover .info { transform:translateY(37px)}
	
	/*블로그 영역 CSS*/
	.blog-section { margin-top:124px}
	.blog-section .sec-tit { margin-bottom:76px}
	.blog-section .blog-list li { float:left; width:31.597%; margin-left:2.604%; margin-top:0}
	.blog-section .blog-list li:first-child {margin-left:0}
	
	/*연락처 영역 CSS*/
	.contact-section { margin-top:176px}
	.contact-section .sec-tit { margin-bottom:76px}
	.contact-section .form-box .form, .contact-section .form-box .textarea { float:left; width:48.698%}
	.contact-section .form-box .form { margin-right:2.369%}
	.contact-section .form-box .form input:last-child { margin-bottom:0}
	
	/*푸터영역 CSS*/
	.footer iframe { height:432px}
	.footer p { margin:34px 0}
	
}








/*PC용 CSS*/
@media all and (min-width:1132px){
	
	/*디스플레이 영역 CSS*/
	.display-section { text-align:left}
	.display-section .sec-tit { float:left; margin-bottom:0}
	.display-section .desc { position:relative; float:right; padding-left:20px}
	.display-section .desc:before { display:block; position:absolute; top:9px; left:0; width:2px; height:44px; background:#e0e0e0; content:""}
	
	/*프로모션 영역 CSS*/
	.promotion-section .promo-list li { width:23.674%; margin-left:1.766%}
	
	/*최근 작업 영역 CSS*/
	.work-section .sec-tit { text-align:left}
	.work-section .work-list li { width:25%}
	
	/*블로그 영역 CSS*/
	.blog-section .sec-tit { float:left; margin-bottom:0}
	.blog-section .blog-list { float:right; width:74.558%}
	.blog-section .blog-list li { width:31.753%; margin-left:2.369%}
	
	/*연락처 영역 CSS */
	.contact-section .sec-tit { float:left; margin-bottom:0}
	.contact-section .form-box { float:right; width:74.558%}
	.contact-section .form-box .form, .contact-section .form-box .textarea { width:48.815%}
	.contact-section .form-box .form { margin-right:2.369%}
	
}