@charset "utf-8";
/*
* content CSS Document
* KOWEB
*/
#container{margin:0 auto; width:100%; overflow:hidden;}
#container:after{content:''; display:block; clear:both;}
#content{min-height:650px; padding-bottom:100px;}
#content{opacity:0; transition:all 0.6s ease-out 0s;}
#content.active{opacity:1;}
#content.bg01{padding-bottom:170px; background:url(/images/content/img_companybg01.jpg) no-repeat 50% 100%;}
#content .inr{max-width:1200px; margin:0 auto; overflow:hidden; position:relative;}
#content h2{position:relative; width:100%; margin:0 auto 80px auto; overflow:hidden; display:block; text-align:center; font-size:40px; font-weight:400; color:#262626; letter-spacing:2.5px;}
body[class*="ie"] #content h2{margin:0 auto 90px auto;}
#content h2 > i{display:block;}
#content h2 > i + span{margin-top:30px;}
#content h2 > em{display:inline-block; padding-left:18px; height:18px; line-height: 18px; font-size:17px; font-weight:500; vertical-align: middle; color:#055fb5; border-left:2px solid #e1e6e9; letter-spacing:0;}
#content h2 > span{display:block; font-weight:300; font-size:14px; color:rgba(0,0,0,0.55); letter-spacing:0; line-height:1.8em;}
#content h2 > span> br{display:none;}
#content h2 > span > i{display:block;}
#content h2 > span > u{display:block; margin-bottom:5px; text-decoration:none; color:#222; font-weight:400;}
#container h3{position:relative; width:100%; padding-left:28px; margin:10px 0; overflow:hidden; text-align:left; line-height:1.6em; font-size:22px; font-weight:500; color:#121212;}
#container h3:before{content:''; display:block; z-index:99; position:absolute; top:10px; left:0px; width:17px; height:17px; background:url(/images/content/img_tit01.png) no-repeat 50% 50%; background-size: 100%;}
#container h3:after{content:''; display:block; clear:both;}
#content h4{position:relative; margin-bottom:30px; text-align:center; display:block; font-size:25px; color:#262626; font-weight:300; letter-spacing:1px;}
#content h5{position:relative; margin-left:-80px; width:calc(100% + 80px); height:53px; line-height:53px; margin-bottom:30px; display:block; text-align:left; font-size:20px; font-weight:400; color:#373737;}
#content h5:before{content:''; vertical-align:middle; margin-right:50px; display:inline-block; width:70px; height:2px;}
#content h5.icon01:before{background:#3e92eb;}
#content h5.icon01{background:url(/images/content/img_icon01.png) no-repeat 72px 50%;}
#content h5.icon02{background:url(/images/content/img_icon02.png) no-repeat 72px 50%;}
#content h5 > em{font-weight:200;}
#content h6{position:relative; font-size:16px; display:inline-block; margin:25px auto; padding:8px 25px; border:1px solid #3e92eb; border-radius:30px; color:#3e92eb; font-weight:400; letter-spacing:0.5px;}
p{position: relative; margin:15px 0; font-size:15px;}
p.tit01{padding-left:12px;}
p.tit01:before{position:absolute; top:10px; left:0px; content:""; width:3px; height:3px; background-color:#333; border-radius: 50%;}
.txt_point01{color:#004ea2 !important; font-weight: 700;}
.txt_point02{color:#003286 !important; font-weight: 700;}
#container h3.txt_point02:before{background-image:url(/images/content/img_tit02.png);}
.border01{border:1px solid #f0f0f0; box-sizing:border-box; text-align:center;}
.border02{position: relative; float: left; width:100%; height:1px; background-color: #eaeaea;}
.mgt{margin-top:20px;}
/* 기존스타일변경 */
.btn_area .button.white{height:56px; line-height:54px; border-color:rgba(0,0,0,0.2); color:#242323 !important; font-size:14px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase;}
.btn_area .button.white:hover,
.btn_area .button.white:focus{box-shadow:10px 10px 40px rgba(0,0,0,0.1);}
/* 리스트 */
.area_list{position: relative; font-size:15px;}
.area_list:after{content:''; display:block; clear:both;}
.area_list li{position: relative; display:inline-block; padding:25px; margin-bottom:15px; width:100%; border:1px solid #e9e9e9; border-left:0; background-color: #fafafa;}
.area_list li:nth-child(even){margin-right:0;}
.area_list li:before{position:absolute; top:0px; left:0px; content:""; width:3px; height:100%; background-color:#3e92eb;}
.area_list02{position:relative; font-size:15px;}
.area_list02 li{position:relative; display:block; margin-bottom:5px; padding-left:12px; font-weight:300; color:#555; text-align:left; word-break:keep-all; line-height:1.8em;}
.area_list02 li:before{position:absolute; top:10px; left:0px; content:""; width:3px; height:3px; background-color:#333; border-radius: 50%;}
.area_list02 li.img{padding-left:0;}
.area_list02 li.img img{width:80%;}
.area_list02 li.img:before{display: none;}
.area_list02 + h3{margin-top:25px !important;}
/* 박스 */
.box_img{margin:0 auto 40px auto; text-align:center; 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{position:relative; width:100%; margin:0 auto 25px auto; height:390px; overflow:hidden; padding:20px; box-sizing:border-box; font-weight:300; color:#545454; font-size:16px; line-height:2em; text-align:left; background:url(/images/content/img_business01.jpg) no-repeat 50% 50%; background-size:cover; box-sizing:border-box;}
.area_box:after{z-index:-1; position:absolute; top:0px; left:0px; content:""; width:100%; height:100%; border:1px solid #e4e5e9; background:#f8f9fb; box-sizing:border-box;}
.area_box .inr{padding:150px 0 0 50px; width:100% !important; height:100%; background:url(/images/content/img_business03.png) no-repeat 0 50%; font-size:30px; font-weight:300; color:#353535; letter-spacing:1.6px; box-sizing:border-box; text-transform:uppercase;}
.area_box .inr > em{display:block; margin-top:5px; font-size:18px; font-weight:200;}
.area_box.box02{background-image:url(/images/content/img_business02.jpg);}
.area_box02{position:relative; width:50%; height:auto; float:left; padding:30px 0px 30px 30px; color:#555; font-size:15px; line-height:1.8em;}
.area_box02:after{content:''; display:block; clear:both;}
.area_box02 .box_left{float:left; width:250px;}
.area_box02 .box_left > img{width:230px;}
.area_box02 .box_right{float:right; width:calc(100% - 250px);}
.area_box02.w01{margin-bottom:40px; width:100%; border:1px solid #dbdbdb;}
.area_box02.w01 .box_left{float:left; width:440px;}
.area_box02.w01 .box_left > img{width:400px;}
.area_list02.list_right,
.area_box02.w01 .box_right{float:right; width:calc(100% - 440px);}
.area_box02.w01 > p{padding:40px;}
.area_box02 .box_right > em{position:relative; display: inline-block; margin-bottom:10px; color:#222; font-size:18px; font-weight:700;}
.area_box03{position:relative; width:100%; margin:0 auto 15px auto; padding:30px; font-size:15px; line-height:2em; text-align:left; border:1px solid #dbdbdb;}
.area_box03:after{content:''; display:block; clear:both;}
.area_box03 > .area_list,
.area_box03 > p{margin:0;}
/* 이미지 리스트 */
.area_img{position: relative;}
.area_img:after{content:''; display:block; clear:both;}
.area_img li{display:block; float:left; margin:0 1em 1em 0; width:calc(100% / 4 - 0.8em); font-size: 15px; font-weight: 600; border:1px solid #ddd; background-color: #fff;}
.area_img.img02 li{width:calc(100% / 2 - 0.5em);}
.area_img.img03 li{width:calc(100% / 3 - 0.7em);}
.area_img li:nth-child(4n){margin-right:0;}
.area_img.img03 li:nth-child(4n){margin-right:1em;}
.area_img.img02 li:nth-child(even),
.area_img.img03 li:nth-child(3n){margin-right:0;}
.area_img li > span{display:block; padding:20px 15px 10px 15px; min-height:110px; text-align: center;}
.area_img li > span > br{display: block;}
.area_img.img02 li > img{padding:10px; display:block; margin:0 auto; width: 60%;}
.area_img li > img{width: 100%;}
.area_img li > .btn_area{padding:0 0 20px 0;}
/* 제품목록 */
.area_product{position:relative; width:100%; margin:0 auto; overflow:hidden; box-sizing:border-box;}
.area_product li a{display:block; float:left; width:calc(100% / 2 - 13px); margin:0 25px 25px 0; border:1px solid #f0f0f0;}
.area_product li:nth-child(even) a{margin-right:0;}
.area_product li a:hover{background:#fafafa;}
.area_product li a > span{background:#3e92eb; color:#fff; display:block; padding:0 20px; width:100%; height:50px; line-height:50px; font-size:16px; box-sizing:border-box;}
.area_product li a > span > em{display:inline-block; margin-left:20px; color:rgba(255,255,255,0.7); font-size:14px; font-weight:400; letter-spacing:0.5px;}
/* 반절영역 */
.area_half{position:relative; padding:30px; overflow:hidden; width:100%; box-sizing:border-box;}
.area_half.pd_none{padding:0;}
.area_half .half_l{float:left; width:50%; text-align:center;}
.area_half .half_r{float:left; width:50%;}
.area_half img{display:block; width:187px; height:162px;}
.area_half li{font-weight:300; font-size:15px; color:#666; line-height:1.8em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.area_half .half_l.w02{width:36%;}
.area_half .half_r.w02{width:64%;}
.area_half .half_r.w02 li{margin-bottom:5px; padding-left:20px; font-size:15px; font-weight:300; color:#626262;}
.area_half .half_r.w02 li > i{display:inline-block; margin-right:20px; color:#222; font-weight:400;}
.area_half .half_r.w02 li > i:after{content:''; margin-left:15px; display:inline-block; width:1px; height:10px; background:#e7e7e7;}
.area_half .half_r.w02 li:before{content:''; display:block; position:absolute; margin:12px 0 0 -20px; width:4px; height:2px; background:#ea681a;}
.area_half .half_l.w02 img{width:376px; height:418px;}
.area_half .half_l.w03{width:calc(60% - 30px); margin-right:30px; border:1px solid #f0f0f0; box-sizing:border-box;}
.area_half .half_r.w03{width:40%; border:1px solid #cbcbcb; box-sizing:border-box;}
.area_half .half_l.w03 img{width:590px; height:333px; display:block; margin:0 auto; text-align:center;}
.area_half .half_r.w03 > span{display:block; margin:10px 10px 50px 10px; height:56px; line-height:54px; border:2px solid #3e92eb; border-top:0; font-size:20px; color:#3e92eb; font-weight:500; text-align:center; letter-spacing:1.2px;}
.area_half .half_r.w03 div{float:left; width:50%; padding:0 30px 0 20px; margin-bottom:60px; box-sizing:border-box;}
.area_half .half_r.w03 div:first-child{border-right:2px solid #f1f3f5;}
.area_half .half_r.w03 div > u{display:inline-block; margin-bottom:20px; text-decoration:none; padding:3px 10px; border-radius:30px; border:1px solid rgba(23,31,45,0.3); color:#a3a3a3; font-size:14px; font-weight:400; letter-spacing:0.5px;}
.area_half .half_r.w03 li{width:100%; margin-bottom:5px; line-height:1.8em; color:#626262; font-weight:300; font-size:13px; display:block; float:left;}
.area_half .half_r.w03 li > em{display:inline-block; vertical-align:middle; margin-right:10px; width:20px; height:20px; line-height:20px; font-size:13px; font-weight:400; border-radius:50%; text-align:center; background:#171f2d; color:#fff;}
.area_half .half_r.w03 div:first-child li:nth-child(2) > em{background:#3e92eb;}
/* 인사말 */
.area_company{width:100%; max-width:1200px; height:auto; overflow:hidden; margin:0 auto;}
.area_company .inr02{display:block; position:relative; margin:0 auto 20px auto; overflow:hidden; width:100%; height:auto;}
.area_company:after{content:''; display:block; clear:both;}
.area_company .img{float:left; width:49%;}
.area_company .img.img_r{float:right !important; margin-top:30px; width:35%;}
.area_company .txt{float:right; width:51%; margin:0 0 100px 0;}
.area_company .txt.txt_l{float:left !important; width:65%;}
.area_company .txt p{font-size:15px; font-weight:300; color:#787878; word-break:keep-all; line-height:2em;}
.area_company .txt em{font-size:28px; display:block; margin-bottom:30px; font-weight:200; color:#454545; word-break:keep-all; line-height:1.6em;}
.area_company .txt em > u{text-decoration:none; color:#3e92eb;}
.area_company .txt em i{font-weight:700; color:#004ea2;}
.area_company .txt br{display:block;}
.area_company .txt span{display:block; margin-bottom:30px;}
.area_company .sign{display:block; margin-top:30px; font-size:16px; font-weight:300; color:#454545;}
.area_company .sign > i{font-size:24px; font-weight:400;}
/* 연혁 */
.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:332px; height:390px; line-height:390px; 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:35%}
.area_history .detail li{overflow:hidden; line-height:2em; padding:10px 15px; font-size:15px; font-weight:200; color:#787878; border-bottom:1px solid #f0f0f0; margin-bottom:10px;}
.area_history .detail li .date{float:left; width:140px;}
.area_history .detail li .date span{display:inline-block; font-weight:500; font-size:15px; 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_history .detail li .desc em{color:#2e2e2e; font-weight:400;}
.area_history .detail li p{margin:0;}
/* 오시는길 */
.txt_map{margin:0 auto; width:100%; padding:40px 80px; border:1px solid #f0f0f0; border-top:0; color:#0e141d; box-sizing:border-box;}
.txt_map span{display:inline-block; margin-right:10px; height:20px; line-height:20px; font-size:15px; color:#2f2f2f; font-weight:500; text-transform:uppercase;}
.txt_map a{color:#515151 !important;}
.txt_map a + a{margin-left:10px;}
.txt_map li{margin-bottom:10px; display:inline-block; margin-left:50px; color:#515151; font-weight:300;}
.txt_map li:first-child{margin-left:0;}
.txt_map .map01{background:url(/images/content/img_map01.png) no-repeat 0 50%; background-size:auto 100%; padding-left:30px;}
.txt_map .map02{background:url(/images/content/img_map02.png) no-repeat 0 50%; background-size:auto 100%; padding-left:30px;}
.txt_map .map03{background:url(/images/content/img_map03.png) no-repeat 0 50%; background-size:auto 100%; padding-left:30px;}
.txt_map + .txt_map{margin-top:10px;}
/* 사업소개 */
.txt_map.business{border-top:1px solid #f0f0f0;}
@media all and (max-width:1250px){
#content{padding-bottom:60px;}
#content .inr{width:92%;}
#content h2{margin:0 auto 30px auto; font-size:30px;}
#content h2 > em{padding-left:15px; height:16px; line-height: 16px; font-size:14px;}
#content h2 > span{font-size:14px; line-height:1.6em;}
#content h4{font-size:20px;}
#content h5{font-size:18px;}
.area_box .inr > em{font-size:15px; margin-top:0px;}
.area_company{width:90%; max-width:inherit; height:auto; margin:0 auto;}
.area_company .inr02{float:inherit;}
.area_company .img,
.area_company .txt{float:none; width:auto; margin:50px 0 0 0;}
.area_company .img{text-align:center; margin:0;}
.area_company .img img{max-width:100%;}
.area_company .txt p{font-size:14px;}
.area_company .txt em{font-size:25px;}
.area_company .img.img_r,
.area_company .txt.txt_l{float:inherit !important; width:auto;}
.area_company .img.img_r{margin-top:30px;}
.area_company .img02 img{width:108px; height:auto; margin-top:20px;}
.area_history .sort{float:none; width:100%; height:300px; line-height:150px; background:url(/images/content/img_history01_mo.jpg) no-repeat 50% 50%; background-size:auto 100%;}
.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;}
.txt_map{padding:30px 3%; font-size:14px;}
.txt_map li{margin-left:30px;}
.box_img .w{max-width:100% !important;}
.area_half .half_l.w03 img{width:100%; height:auto; display:block; margin:0 auto;}
.area_half .half_l.w02 img{width:85%; height:auto; display:block;}
.btn_area{margin-bottom:20px;}
.area_half li{font-size:14px;}
.area_product li a{width:calc(100% / 2 - 5px); margin:0 10px 10px 0;}
.area_box{height:250px; padding:15px;}
.area_box .inr{padding:90px 0 0 4%; background-position:0 100%; background-size:auto 100%; font-size:25px;}
.area_box02.w01,
.area_box02{padding:30px 20px;}
.area_box02.w01 .box_left,
.area_box02 .box_left{float:none; width:100%;}
.area_box02.w01 .box_left > img,
.area_box02 .box_left > img{margin:0 auto 20px auto; display:block; float:none; width:230px;}
.area_box02.w01 .box_right,
.area_list02.list_right,
.area_box02 .box_right{float:none; width:100%;}
.area_box02.w01 > p{padding:0; text-align: center;}
.area_list02 li.img img{display:block; margin:0 auto; text-align: center; width:100%; max-width:460px;}
}
@media all and (max-width:1024px){
#content h3{margin:10px 0; font-size:20px;}
#container h3:before{top:6px;}
#content h5.icon01,
#content h5.icon02{background-size:auto 70%;}
#content h5:before{margin-right:35px;}
#content h6{padding:6px 15px; font-size:15px;}
.txt_map{padding:30px 5%;}
.txt_map li{margin-left:0; display:block;}
.txt_map span{margin-top:15px; display:block; margin-bottom:10px;}
.txt_map li{padding-bottom:10px; margin-bottom:20px; border-bottom:1px dotted #e0e0e0;}
.txt_map li:last-child{margin-bottom:0; border:0;}
.border01 img{width:100%; height:auto; display:block; margin:0 auto;}
.border01{width:60%; margin:0 auto 20px auto;}
.area_img.img03 li,
.area_img li{width:calc(100% / 2 - 11.1px);}
.area_img.img03 li:nth-child(3n){margin-right:21px;}
.area_img.img03 li:nth-child(4n),
.area_img li:nth-child(even){margin-right:0 !important;}
.area_img li > span{padding:20px 0 10px 0;}
.area_half.pd_none{width:60%; margin:0 auto;}
.area_half{width:100%; margin:0 auto;}
.area_half .half_r.w02 li{font-size:13px;}
.area_half .half_l.w02 img{display:block; margin:0 auto; width:70%;}
.area_half .half_l.w02{margin:5px auto 20px auto; width:100%;}
.area_half .half_r.w02,
.area_half .half_l.w03,
.area_half .half_r.w03{margin:0 auto 20px auto; width:100%;}
.area_half .half_r.w03{padding-bottom:30px; overflow:hidden;}
.area_half .half_r.w03 div{width:100%; margin:0 auto; padding:0 20px 0 35%;}
.area_half .half_r.w03 div:first-child{margin-bottom:20px;}
.area_half .half_r.w03 > span{margin:10px 10px 30px 10px; font-size:16px; letter-spacing:0.2px;}
.area_half .half_r.w03 div:first-child{border-right:0;}
.btn_area{padding:5px 0 20px 0;}
.area_half{padding:30px 5%;}
.area_half img{display:block; margin:0 auto; text-align:center;}
.area_half .half_l,
.area_half .half_r{width:100%; float:inherit; margin:0 auto;}
.area_half .half_r{margin-top:20px;}
.area_product li a > span{height:auto; padding:10px 5%; line-height:1.5em;}
.area_product li a > span > em{display:block; margin:2px 0 0 0; font-size:13px;}
.area_product li a > span{min-height:67px;}
.area_half{min-height:396px;}
.box_img{margin:0 auto 30px auto;}
.box_img .w{display:none;}
.box_img .m{display:block; max-width:100% !important;}
.area_box02{float:none; width:100%; border-bottom:1px solid #eaeaea;}
.area_box02:first-child{padding-top:10px;}
.area_box02.bd_none{border-bottom:0;}
.border02{display:none;}
}
@media all and (max-width:768px){
#content h2{font-size:25px;}
#content h2 > em,
#content h2 > span{font-size:13px;}
#content h2 > span> br{display:block;}
#content h3{font-size:18px;}
.area_list,
.area_list02,
.area_box,
.area_box02,
.area_img,
.area_img li,
#content h6{font-size:14px;}
.area_box02 .box_right > em{font-size: 16px;}
.area_box02.w01 > p > br{display: none;}
#content h2 > em{padding-left:10px; height:15px; line-height: 15px; font-size:13px;}
.area_company{background:none;}
.area_company .txt em{font-size:22px;}
.area_company .txt p{font-size:14px;}
.area_company .sign > i{font-size:18px;}
.area_company .sign{font-size:15px;}
.area_history .detail li .date{float:none;}
.area_history .detail li .desc{padding-left:0;}
.txt_map{font-size:13px; padding:20px 7%;}
.area_box .inr > em{font-size:14px; margin-top:-5px;}
.area_box{height:200px;}
.area_box .inr{padding:60px 0 0 6%; font-size:20px;}
.border01,
.area_half.pd_none{width:100%;}
.area_half .half_r.w02 li:before{margin:12px 0 0 -15px;}
.area_half .half_r.w02 li > i{margin-right:10px;}
.area_half .half_r.w02 li > i:after{margin-left:10px;}
body[class*="ie"] .area_half .half_r.w02 li > i:after{margin-left:8px;}
.btn_area .button.white{height:45px; line-height:43px; font-size:13px;}
.area_half li{font-size:13px;}
.area_half .half_r.w03 > span{height:45px; line-height:43px; font-size:15px;}
.area_half{min-height:382px;}
.area_product li a > span{font-size:14px;}
.area_img li > img{width:100%;}
.area_img li > span{min-height:95px; padding:20px 10px 0 10px;}
.area_img li > span > br{display: none;}
.area_history .sort{background-image:url(/images/content/img_history01.jpg);}
}
@media all and (max-width:480px){
#content h2{font-size:20px;}
#content h4,
#content h5{font-size:16px;}
.area_box .inr > em{font-size:13px; margin-top:-10px;}
.area_company .txt em{font-size:18px;}
.area_company .txt br{display:none;}
.area_box .inr{padding:65px 0 0 6%; font-size:18px;}
.area_half .half_r.w03 div{padding:0 20px 0 20%;}
.area_half .half_l.w02 img{width:100%;}
.area_half img{width:100px; height:87px;}
.area_product li a > span > em{font-size:12px; line-height:1.4em;}
.area_half li{font-size:12px;}
.area_half{min-height:300px;}
}