@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

#container{margin:0 auto; width:100%; overflow:hidden;}
#container:after{content:''; display:block; clear:both;}
#content .inr{width:1300px; padding-bottom:60px; margin:0 auto; overflow:hidden; position:relative;}
#content h2{position:relative; margin:0 auto; overflow:hidden; display:block; padding:110px 0 50px 0; text-align:center; font-size:40px; font-weight:700; color:#1e1e1e; text-transform:uppercase;}
#content h2 > span{display:block; font-size:18px; font-weight:300;}
#content h3{position:relative; margin-bottom:20px; display:block; text-align:left; font-size:25px; font-weight:700; color:#1b1b1b; text-transform:uppercase;}
#content h3 > span{display:inline-block; margin-left:5px; font-size:16px; font-weight:300;}
#content h5{position:relative; display:block; text-align:left; font-size:15px; font-weight:600; color:#1b1b1b; text-transform:uppercase;}
#content h5 > span{display:block; margin-top:3px; font-size:20px; font-weight:400;}

/* 기존 스타일 변경 */
.bbsView input[type=text],
.bbsView input[type=password],
.bbsView input[type=tel],
.bbsView input[type=date],
.bbsView input[type=email],
.box_privacy textarea,
.bbsView textarea{border:1px solid #ddd !important;}

/* 버튼 */
.button02{position:relative; margin-top:15px; overflow:hidden; display:block; padding:0 24px; width:160px; height:50px; line-height:50px; border:1px solid rgba(46,46,46,0.5); font-size:15px; color:#2e2e2e !important; box-sizing:border-box; transition:all 0.8s ease 0s;}
.button02:before{z-index:3; content:''; position:absolute; margin-top:-7px; top:50%; right:20px; width:10px; height:13px; background:url(../images/content/btn_down.png) no-repeat 85% 50%; background-size:10px 13px; transition:all 0.8s ease 0s;}
.button02:hover:before,
.button02:focus:before{transform:translateY(5px); transition:all 0.8s ease 0s;}
.button03{position:relative; float:right; margin:25px; overflow:hidden; display:block; padding:0 15px 0 5px; width:250px; height:50px; line-height:50px; border:1px solid rgba(46,46,46,0.5); font-size:15px; color:#2e2e2e !important; box-sizing:border-box; transition:all 0.8s ease 0s;}
.button03:before{z-index:3; content:''; position:absolute; margin-top:-7px; top:50%; right:15px; width:10px; height:13px; background:url(../images/content/btn_down.png) no-repeat 85% 50%; background-size:10px 13px; transition:all 0.8s ease 0s;}
.button03:hover:before,
.button03:focus:before{transform:translateY(5px); transition:all 0.8s ease 0s;}

/* 박스 */
.box_img{margin:0 auto; text-align:center; border:1px solid #ededed; box-sizing:border-box;}
.box_img img{margin:0 auto; max-width:100%; text-align:center;}
.box_img .m{display:none;}
.box_img .w{display:block; max-width:inherit !important;}
.area_box{box-sizing:border-box; margin:0 auto; width:100%; padding:30px 35px; border:1px solid #ededed; border-top:0; color:#434343; font-size:15px; font-weight:300; line-height:1.8em;}

.area_list01{position:relative; margin:40px 0; padding:40px 3%; background:#f9f9f9; color:#444; box-sizing:border-box;}
.area_list01.bg01{background:#8a8a8a; color:#fff;}
.area_list01.bg01 h3{color:#fff !important;}
.area_list01.bg01 li:before{background:#fff;}
.area_list01 li,
.area_list01 p{position:relative; display:block; width:100%; clear:both; padding:5px 0 5px 14px; font-size:15px; font-weight:300; text-align:left; word-break:keep-all; line-height:1.8em;}
.area_list01 p{padding:10px 0 10px 0;}
.area_list01 li:before{position:absolute; top:18px; left:0px; content:""; width:6px; height:3px; background:#2e2e2e;}
.area_list01 li:last-child{border-bottom:0;}
.area_list01.half{width:49.5%; min-height:350px; float:left;}
.area_list01:last-child.half{width:49.5%; float:right;}

/* 이미지리스트 */
.area_img{position:relative; width:100%; margin:50px auto; overflow:hidden; box-sizing:border-box;}
.area_img.w01 li{width:calc(100% / 3);}
.area_img li{float:left; width:calc(100% / 10); height:130px; display:inline-block; border:1px solid #d0d0d0; border-right:0; box-sizing:border-box;}
.area_img li:last-child{border-right:1px solid #d0d0d0;}
.area_img li > img{display:block; margin:20px auto 0 auto; text-align:center;}

/* 연혁 */
.area_history{position:relative; width:100%; margin:50px auto;}
.area_history > li{margin:20px auto; overflow:hidden;}
.area_history .sort{float:left; display:inline-block; position:relative; width:250px; height:200px; line-height:200px; background:url(../images/content/img_history01.jpg) no-repeat 50% 50%; background-size:cover; text-align:center;}
.area_history .sort:after{content:''; display:block; position:absolute; top:50%; left:100%; width:25%; height:12px; margin-left:-10px; background-repeat:no-repeat; background-position:100% 50%; background-size:auto 100%;}
.area_history .sort span{display:inline-block; line-height:2em; vertical-align:middle; font-size:20px; color:#fff; font-weight:400; text-align:center;}
.area_history .sort span:before{content:''; display:block; margin:0 auto; width:40px; height:40px; background-image:url(../images/content/img_history02.png); background-size:100%;}
.area_history .sort:after{background-image:url(../images/content/arrow_history.png); width:70px; height:36px; display:block; position:absolute; margin:-20px 0 0 30px;}
.area_history .detail{padding-left:30%}
.area_history .detail li{overflow:hidden; line-height:2em; padding:10px; font-size:15px; font-weight:200; color:#444; border-bottom:1px solid #cbcbcb; margin-bottom:10px;}
.area_history .detail li .date{float:left; width:140px;}
.area_history .detail li .date span{display:inline-block; font-weight:600; font-size:18px; color:#2e2e2e;}
.area_history .detail li .date span.month{margin-left:20px;}
.area_history .detail li .desc{display:inline-block; padding-left:25px; font-weight:300;}

/* 링크박스 */
.area_link{position:relative; top:0px; left:0px; z-index:1; width:100%; margin:250px 0 0 0; padding:40px 350px 40px 3%; width:50%; height:198px; background:#fff url(../images/content/img_agrocul01.jpg) no-repeat 100% 50%;; box-sizing:border-box;}

/* 상단 */
.area_top{position:relative; width:100%; height:500px; overflow:hidden; margin:0px auto; background:url(../images/content/img_top01.jpg) no-repeat 50% 50%; background-size:cover;}
.area_top.bg02{position:absolute; background:url(../images/content/img_top02.jpg) no-repeat 50% 50%; background-size:cover;}
.area_top.bg03{position:absolute; background:url(../images/content/img_top03.jpg) no-repeat 50% 50%; background-size:cover;}
#content .inr.mg01{margin:250px auto 0 auto;}

/* 인사말 */
.greeting_img img{display:block; margin:40px auto 10px auto; text-align:center;}
.greeting_con{overflow:hidden; width:100%; color:#555; font-size:14px; line-height:2.2em; overflow:hidden; background:url(../images/content/img_aboutbg.jpg) no-repeat 0 100%; transition:all 0.3s ease 0s}
.greeting_con .greeting_con_l{width:49%; float:left; font-weight:300; transition:all 0.3s ease 0s}
.greeting_con .greeting_con_l > img{margin-bottom:15px;}
.greeting_con .greeting_con_l > ul{margin:30px 0 30px 30px;}
.greeting_con .greeting_con_l > ul li{display:inline-block;}
.greeting_con .greeting_con_l > ul li a{display:inline-block; margin-right:5px;}
.greeting_con .greeting_con_l > ul li a > img{width:80px; height:auto; box-shadow:3px 3px 20px rgba(0,0,0,0.05);}
.greeting_con .greeting_con_r{width:49%; float:right; font-weight:400; transition:all 0.3s ease 0s}
.greeting_con span{position:relative; display:block; margin-bottom:30px; color:#2b5ac4; font-size:28px; font-weight:600; letter-spacing:-1px; line-height:30px;}
.greeting_con em{margin:0 5px; font-weight:400; color:#111;}

/* 맵, 견적문의 스타일변경 */
.area_contact{margin:30px auto 0 auto; float:inherit; width:100%; padding:40px 190px 40px 58px; box-shadow:3px 3px 50px rgba(0,0,0,0);}
.area_contact ul{margin-top:20px;}
.area_input li{width:calc(100% / 2 - 15px); margin-right:15px;}
.area_contact .agree{padding-top:20px;}
.area_map{width:100%; float:inherit;}
.map_txt{position:relative; bottom:inherit; float:left; padding:25px 10px;}

@media all and (max-width:1500px){
	#content .inr{width:96%; padding-bottom:40px;}
	#content h2{font-size:35px;}
	#content h2 > span{font-size:15px;}
	#content h3{font-size:20px;}
	#content h3 > span{font-size:14px;}
	#content h5{font-size:14px;}
	#content h5 > span{font-size:18px;}
	
	.area_lnb{margin:-120px 0 0 6%;}
	
	.greeting_con .greeting_con_l > img{width:200px;}
	.greeting_con .greeting_con_l > ul{background:#f2f2f2; margin:30px auto; text-align:center; padding:30px 0;}
	
	.area_history .detail{padding-left:42%}
	.area_history .detail li .desc{padding-left:0px; display:block; clear:both;}
	
	.area_list01 li{font-size:14px;}
	
	.area_img.w01 li,
	.area_img li > img,
	.box_img .w{max-width:100% !important;}
	
	.area_img.w01 li{width:calc(100% / 3 - 0.1px);}
	.area_img li{width:calc(100% / 5 - 0.1px);}
	.area_img li:nth-child(6),
	.area_img li:nth-child(7),
	.area_img li:nth-child(8),
	.area_img li:nth-child(9),
	.area_img li:nth-child(10){border-top:0;}
	.area_img li:nth-child(5){border-right:1px solid #d0d0d0;}
	
	.area_top{height:380px;}
	.area_link{margin:150px 0 0 0; padding:40px 20% 40px 3%;}
}

@media all and (max-width:1199px){
	.area_list01.half,
	.area_list01:last-child.half{width:100%; min-height:inherit; float:inherit;}
	.area_list01:last-child.half{margin-top:20px;}
}

@media all and (max-width:1024px){
	#content h2{padding:40px 0; font-size:25px;}
	.area_lnb{margin:-90px 0 0 6%;}
	
	.area_history .sort{float:none; width:100%; height:150px; line-height:150px; background-position:0% 50%; background-size:100% auto;}
	.area_history .sort span{font-size:25px;}
	.area_history .sort:after{display:none;}
	.area_history .detail{width:100%; margin:15px auto 0; padding-left:0;}
	.area_history .detail li,
	.area_history .detail li .date span{font-size:14px;}
	.area_history .detail li .date span.month{margin-left:5px;}
	.area_history .detail li .date{width:inherit;}
	
	.area_link{background:rgba(255,255,255,0.95);}
	.map_txt{height:auto; padding:15px 2%;}
}
@media all and (max-width:768px){
	#content h2 > span{font-size:14px;}
	#content h3{font-size:18px;}
	#content h3 > span{font-size:13px;}
	#content h5{font-size:13px;}
	#content h5 > span{font-size:16px;}
	
	.area_util_mo{background:url(../images/common/img_gnbbg.jpg) no-repeat 0 0;}
	
	.area_contact{width:100%; padding:40px 5% 90px 5%; margin:30px auto 15px auto;}
	.area_input li{width:100%; margin-right:0px;}
	
	.greeting{height:350px; font-size:20px;}
	.greeting_img{margin:25px auto 0 auto;}
	.greeting_con{font-size:13px;}
	.greeting_con .greeting_con_l {width:100%; float:inherit;}
	.greeting_con .greeting_con_r {width:100%; float:inherit; padding-bottom:40px;}
	
	.area_list01 li{font-size:13px;}
	
	.box_img{margin:0 auto 30px auto;}
	.box_img .w{display:none;}
	.box_img .m{display:block; max-width:100% !important;}

	.area_img.w01 li{height:80px;}
	.area_img.w01 li > img{margin:5px auto 0 auto; width:90%;}
	
	.area_top{height:250px;}
	.area_link{margin:30px 0 0 0; padding:30px 5%; height:170px;}
	.button02{width:120px; height:40px; line-height:40px; font-size:13px;}
	.button02:before{right:10px;}
	.button03{position:relative; float:right; margin:10px; overflow:hidden; display:block; padding:0 18px 0 0; width:180px; height:40px; line-height:40px; font-size:12px;}
	
	#content .inr.mg01{margin:130px auto 0 auto;}
}
@media all and (max-width:540px){
	.btn_map{bottom:0px;}
}

@media all and (max-width:480px){
	#content h2{font-size:20px;}
	#content h3 > span{display:block; margin:5px 0 0 0;}

	.greeting{height:300px; font-size:15px;}
	.greeting_top p{font-size:22px !important;}
	.greeting_img{margin:20px auto 0 auto !important;}
	.greeting_con span{font-size:25px;}
	
	.area_history .detail{width:100%;}
	.area_history .sort{height:200px; line-height:200px;}
	.area_history .sort span{font-size:20px;}
	
	.area_img li{height:80px;}
	.area_img li > img{margin:5px auto 0 auto; width:90%;}
	.area_img.w01 li{height:60px;}

}

@media all and (max-width:375px){
	#content h2 > span{font-size:13px;}
	
	.area_img li{height:65px;}
	.area_img.w01 li > img{margin:10px auto 0 auto;}
}