@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB kimhynho 
 */

/* common */
#content h1{font-weight:200; font-size:42px;}
#content h3{font-weight:200; font-size:32px;}
#content h6{font-size:18px;}
#content p{line-height:1.7; font-weight:300; font-size:16px; color:#666;}
#content.wrapper{margin-top:50px;}

/* 회사소개 */
.area_about{overflow:hidden; margin-bottom:60px;}
.area_about > h3{float:left; width:266px;}
.area_about > .inr{float:left;}
.area_about > .inr > img{display:inline-block; margin-bottom:30px;}
.area_about > .inr > p{margin-bottom:20px;}
.area_about.v1 > .inr > img:first-child{margin-right:25px;}

/* 주요업무 */
.area_business > h1{margin-bottom:50px; color:#222; text-align:center;}
.area_business > h1 > b{font-weight:400;}
.area_business > h1 > em{display:block; font-weight:300; font-size:25px;}
.area_business > ul > li{display:table; float:left; margin-right:33px; margin-bottom:33px; width:273px; height:273px; border:1px solid #ddd; text-align:center;}
.area_business > ul > li:nth-child(4n){margin-right:0;}
.area_business > ul > li > .inr{display:table-cell; vertical-align:middle;}
.area_business > ul > li > .inr img {
    height: 74.98px;
}
.area_business > ul > li:last-child{background:linear-gradient(130deg, #f79c67, #f8d362);border: none;}
.area_business > ul > li:last-child > .inr{color:#fff; text-align:center;}
.area_business > ul > li:last-child > .inr span{display:block; border-top:1px solid rgba(255,255,255,0.4); padding-top:20px; margin:20px 30px 0 30px; font-size:14px;}
.area_business > ul > li:last-child > .inr em{font-weight:600; font-size:26px;}
.area_business > ul > li:last-child > .inr h6{margin-bottom:5px; font-weight:400; letter-spacing:7px;}
#content .area_business > ul > li > .inr > p{margin-top:30px; font-weight:500; color:#444;}

/* 찾아오시는길 */
.text_map{overflow:hidden; margin-top:20px; padding:19px 0; background:#f5f5f5; border:1px solid #ddd;}
.text_map > ul > li{position:relative;float:left;width: 23%;padding-left: 2%;}
.text_map > ul > li > b{margin-right:5px;}
.text_map > ul > li:after{content:""; position:absolute; top:50%; right:0; width:1px; height:12px; margin-top:-6px; background:#ddd;}
.text_map > ul > li:last-child:after{background:none;}

/* guide */
.area_guide{max-width:1400px; box-sizing:border-box; margin:0 auto; padding:0 15px;}
.area_guide p{margin-top:10px; font-weight:300; letter-spacing:-0.5px; word-break:keep-all;}
.area_guide p:first-child{font-size:18px;}
.area_guide h3{margin-top:40px; font-size:22px; font-weight:500; color:#1b1b1b; letter-spacing:-0.5px;}

.area_sitemap{max-width:1400px; box-sizing:border-box; margin:0 auto; padding:0 15px;}
.area_sitemap .gnb:after{content:''; display:block; clear:both;}
.area_sitemap .gnb > li{float:left; width:18%; margin-left:2.5%;}
.area_sitemap .gnb > li:first-child{margin-left:0px;}
.area_sitemap .gnb > li > a{display:block;position:relative;padding: 20px 0px;font-size: 18px;font-weight: 500;color: #222;text-align:center;transition: all 0.3s ease 0s;border: 1px solid #ddd;}
.area_sitemap .gnb > li > a span{position:relative; z-index:5;}
.area_sitemap .gnb > li > a:after{}
.area_sitemap .gnb > li > ul{margin-top: 25px;}
.area_sitemap .gnb > li > ul > li{margin-bottom:10px;text-align: center;border-bottom: 1px solid #ddd;padding-bottom: 15px;}
.area_sitemap .gnb > li > ul > li > a{display:inline-block;position:relative;font-size: 16px;font-weight:300;color: #666;transition:all 0.3s ease 0s;}
.area_sitemap .gnb > li > ul > li > a:hover{color: #f89f61;}
.area_sitemap .gnb > li > ul > li > a:hover:before{background:#0ab19b;}
.area_sitemap .bg{display:none;}

.area_sitemap .gnb > li > a:after{content:"";position:absolute;top:0;z-index:-1;width:2px;height:100%;background: #000;transition:all 0.4s ease-out 0s;transform: scaleX(0.8);left:0;transform-origin:0 0;}
.area_sitemap .gnb > li:hover > a:after{width:100%;transform:scaleX(1);background: linear-gradient(120deg, #f79c67, #f8d362);}
.area_sitemap .gnb > li:hover > a{border:1px solid transparent; color:#fff;}
.area_sitemap .btn_close{display:none;}

.bbsView div.conts img{max-width:100%;}


@media all and (max-width:1380px){
	.area_about > h3{width:30%;}
	.area_about > .inr{width:70%;}
	.area_about > .inr > img{width:100%;}
	.area_about.v1 > .inr > img{width:-webkit-calc(50% - 15px); width:calc(50% - 15px);}
	
	.area_business > ul > li{display:table; margin-right:25px; margin-bottom:25px; width:-webkit-calc(25% - 21px); width:calc(25% - 21px);}
	
	.area_sitemap .gnb > li{width:-webkit-calc(31% - 6px); width:calc(31% - 6px); margin-right:15px; margin-bottom:30px;}
	.area_sitemap .gnb > li:nth-child(3){margin-right:0;}
	.area_sitemap{padding:0;}
}

@media all and (max-width:1280px){
	#map{height:400px !important;}
	
	.text_map > ul > li{width: 96%;margin: 0 2%;padding:14px 0;border-bottom:1px solid #e4e4e4;text-align:left;}
	.text_map{padding:0;}
	.text_map > ul > li:last-child{border-bottom:0;}
	.text_map > ul > li > b{display:inline-block; width:60px;}
	.text_map > ul > li:after{background:none;}
}

@media all and (max-width:1110px){
	.area_business > ul > li{width: -webkit-calc(33% - 19px);width: calc(33% - 19px);height:243px;}
	.area_business > ul > li:nth-child(3n){margin-right:0;}
	.area_business > ul > li:nth-child(4n){margin-right:25px;}
	.area_business > ul > li:last-child{}
	.area_business > ul > li:last-child{margin-right: 0;}
}

@media all and (max-width:767px){
	#content h1{font-size:35px;}
	#content h3{font-size:25px;}
	#content p{font-size:15px;}
	#content.wrapper{margin-top:20px;}
	#content .area_business > ul > li > .inr > p{margin:30px 15px 0 15px;}
	
	.area_about{margin-bottom:30px;}
	.area_about > h3, 	.area_about > .inr{width:100%;}
	.area_about > h3{margin-bottom:20px;}
	.area_about > .inr > img{margin-bottom:20px;}
	.area_about > .inr > p br{display:none;}
	
	.area_business > ul > li{margin-right:15px; margin-bottom:15px; width:-webkit-calc(33% - 11px); width:calc(33% - 11px); height:203px;}
	.area_business > ul > li:nth-child(4n){margin-right:15px;}
	.area_business > h1 > em{font-size:20px;}
	.area_business > h1{margin-bottom:30px;}

	.area_sitemap .gnb > li{width:49%; margin-right:2%; margin-left:0;}
	.area_sitemap .gnb > li:nth-child(2n){margin-right:0;}
	.area_sitemap .gnb > li:nth-child(3){margin-right:2%;}
	.area_sitemap .gnb > li > a{font-size:16px;}
	.area_sitemap .gnb > li > ul > li > a{font-size:14px;}

	.area_business > ul > li:nth-child(2n){margin-right:0 !important;}
	.area_business > ul > li:nth-child(3n){margin-right:15px;}
	.area_business > ul > li, .area_business > ul > li:last-child{width:-webkit-calc(50% - 10px); width:calc(50% - 10px); height:193px;}
}

@media all and (max-width:540px){
	#content .area_business > ul > li > .inr > p{margin-top:15px;}
	#content h1{font-size:25px;}
	#content h3{font-size: 23px;}
	#content h6{font-size:15px;}	
	#content p{font-size:14px;}
	
	.area_about{margin-bottom:20px;}
	.area_about > .inr > p{margin-bottom:15px;}
	.area_about.v1 > .inr > img:first-child{margin-right:5px;}
	.area_about.v1 > .inr > img{width:-webkit-calc(50% - 5px); width:calc(50% - 5px);}
	
	.area_business > h1 > em{margin-bottom:5px; font-size:17px;}
	.area_business > h1{word-break:keep-all;}
	
	.area_business > ul > li:last-child > .inr em{font-size:15px;}
	.area_business > ul > li:last-child > .inr span{font-size:12px;}
	.area_business > ul > li:last-child > .inr span{display:none; font-size:12px;}
	.area_business > ul > li > .inr > img{height:60px;}		
	
	#map{height: 280px !important;}
	.text_map > ul > li{width:92%; margin:0 4%; padding:10px 0; font-size:14px;}
	.text_map > ul > li > b{font-size:14px;}

	ul.bbsList li .date{width:60px; font-size:13px;}
	ul.bbsList li .subject{padding-left:91px; font-size:14px;}
}

@media all and (max-width:360px){
	#content h1{font-size:20px;}
	#content p{font-size:13px;}
	
	.area_about > .inr > img{margin-bottom:10px;}	
	
	.area_business > h1 > em{margin-bottom:6px; font-size:14px;}
}