@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

div#content.sub{min-height:300px;padding:80px 0;}
.sub_title{margin-bottom:60px;}
.sub_title h2{text-align:center; color:#111; font-size:35px;}

.sub.product .sub_title,
.sub.product2 .sub_title {display:none}

p.mob_info{margin-top:10px; padding:5px; background:#f6f6f6;}
/* 서브비쥬얼 */
.area_subVisual{position:relative; display:table; width:100%; height:350px; padding:0 15px; background-size:cover; background-position:80% 50%;}
.area_subVisual .wrapper {display:table-cell; vertical-align:middle; padding-left: 18%;}
.area_subVisual p{padding-top:140px; color:#fff;}
.area_subVisual h2{ color:#fff;  font-size:40px;}
.area_subVisual span.sub_text{color:#fff;  font-size:12pt; font-weight:200; display:inline-block; width:28%; word-break:keep-all;}

.area_subVisual.about {background:url(../images/content/sub_visual10.jpg) no-repeat center; background-size:cover;}
.area_subVisual.producteng1,
.area_subVisual.product {background:url(../images/content/sub_visual12.jpg) no-repeat center; background-size:cover;}
.area_subVisual.producteng2,
.area_subVisual.product2 {background:url(../images/content/sub_visual09.jpg) no-repeat center; background-size:cover;}
.area_subVisual.service {background:url(../images/content/sub_visual11.jpg) no-repeat center; background-size:cover;}


/* lnb */
.lnb {z-index:11;left:0;bottom:0;width:100%;height: 65px;background:#fff;border-bottom:1px solid #ddd;text-align:center;}
.lnb ul {margin: 0 auto;width:100%;height: 65px;}  
.lnb ul li {display:inline-block;padding: 19px 28px;}
.lnb ul li:first-child {padding-left:0 ;background :none} 
.lnb ul li:last-child{padding-right:0;}
.lnb ul li a {font-weight: 500;font-size:18px;color:#8a8a8a;transition: 0.2s;}
.lnb ul li:hover a, 
.lnb ul li a.on {color:#103178;}
.lnb.product,
.lnb.product2,
.lnb.service {display:none}

/* 경영이념 */
.ceo_area {width: 100%; margin: 0 auto; overflow: hidden; padding-top: 30px;}
.ceo_area li {width: 22.5%; float: left; margin-right: 40px}
.ceo_area li img {width:100%;}
.ceo_area li:last-child {margin-right: 0}
.ceo_area li:nth-child(even) {margin-top: -30px}
.ceo_area li p {text-align: center; margin-top: 20px;}
.ceo_area li p b {font-size: 20px; font-weight: 500; color: #0186cc; display: block;}
.ceo_area li p small {display: block; color: #222; font-size: 17px; line-height: 1.3; font-weight: 500}
.ceo_area li:nth-child(2) p b {color: #005d89}
.ceo_area li:last-child p b {color: #00324e}
.ceo_bg p {text-align: center; margin-top: 60px; color: #222; font-size: 17px; line-height: 1.5; font-weight: 500;}
.ceo_bg p img {width:100%;}
.ceo_bg p span {display:block; margin-top: 20px; font-size: 30px; font-weight: 600; color: #005d89;}

 /* 회사개요 */
.outline_area {width:100%; margin: 0 auto;}
.outline_area .area1 {margin-bottom:150px;}
.outline_area .area1 p {max-width: 926px; width: 100%; margin: 0 auto; margin-top: 50px; text-transform:uppercase}
.outline_area .area1 p img {width:100%}
.outline_area .area2  {width:100%; margin: 0 auto; overflow: hidden; margin-top: 50px;}
.outline_area .area2 p {float: left; width: 25%;}
.outline_area .area2 ul {float: left; width: 75%;}
.outline_area .area2 ul li p {font-size: 18px; font-weight: 500;}
.outline_area .area2 ul li {border-bottom: 1px solid #ddd; padding: 10px;}
.outline_area .area2 ul li b {font-weight: 400;}
html[lang="en"] .about .outline_area .area2 ul{padding-left:15px; box-sizing:border-box;}
html[lang="en"] .about .outline_area .area2 ul li{display:flex;}
html[lang="en"] .about .outline_area .area2 ul li p{float:none; padding-right:15px; box-sizing:border-box; width:28%;}


/* 조직도 */
.chart_area {width:100%; margin: 0 auto;}
.chart_area img {width:100%;}
.chart_area h3 {font-size: 30px; color: #0a3671; position: relative; margin-left: 15px;}
.chart_area h3:before {left: -15px; content: ''; position:absolute; background-color:#0a3671; width: 8px; height: 30px; margin-top: 6px;}
.chart_area2 { margin-top: 100px;}

/* 오시는길 */
.wrap_controllers {display:none;}
.map_txt {width: 90%; margin: 0 auto; background: #103178; margin-top: -85px; position: relative; z-index: 99; box-shadow: 0px 10px 26px rgba(0,0,0,0.3);}
.map_txt{ display: grid; grid-template-columns: 25% 75%; }
.map_txt > div.map_logo { background: url(/images/main/f_logo.png) no-repeat #052e70 center center;}
.map_txt > div.map_list {padding: 50px 3%; box-sizing: border-box;}
.map_txt > div.map_list ul{ display: flex; gap: 20px 70px; }
.map_txt > div.map_list ul li:not(:first-child){ white-space: nowrap; }
.map_txt > div.map_list ul li strong {font-size: 15px; font-weight: 400; color: #ffffff; letter-spacing: -0.5px;}
.map_txt > div.map_list ul li strong:before {content: '';  display: inline-block;  width: 4px; height: 4px; background: #ffffff; border-radius: 50%; vertical-align: top; margin-top: 9px; margin-right: 12px;}
.map_txt > div.map_list ul li p {color: #ffffff; font-size: 18px; font-weight: 300; letter-spacing: -0.5px; line-height: 40px;}

/* product */
ul.productList li {width:calc((100% / 3) - (4%/3)); width: -webkit-calc((100% / 3) - (4%/3));}
ul.productList > li div {padding: 12px;}
ul.productList > li .img + em {font-size: 19px;}
ul.productList > li div > em {margin-top: 20px; padding-bottom: 20px;}
ul.productList > li div .btn {border-top: 0;}
ul.productList > li div .btn{width: 100%;  color: #fff; position: relative; border: none; height: 49px; line-height: 49px; font-size: 16px; border-radius: 3px; background: #666; z-index: 0; transition: 0.3s; text-align: center;}
ul.productList > li div .btn:hover {background: transparent;}
ul.productList > li div .btn::after {content: ''; display:block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:-webkit-linear-gradient(145deg, #499ec5 0%, #9ce1b3 80%); transition: 0.3s; z-index: -1; opacity: 0; border-radius: 3px;}
ul.productList > li div .btn:hover::after {opacity: 1;}
ul.productList > li:nth-child(4n+1){margin-left:2%; margin-top: 30px;}
ul.productList > li:nth-child(3n+1){margin-left:0px;}

.productView .img {margin-bottom: 60px;}
.productView .img span img {height: 100%;}
.productView .title h3 {margin-bottom: 40px; padding: 0 0 15px;}
.productView .title .file_btn { margin-top: 35px;}
.productView .title .file_btn a {display: block; float: left; width: calc((100% / 2) - 3px);width: -webkit-calc((100% / 2) - 3px); padding: 12px 10px; box-sizing: border-box; border-radius: 3px;text-align: center; color: #fff;}
.productView .title .file_btn a:first-child {background: #32a6b7; margin-right: 6px; border: 1px solid #fff;}
.productView .title .file_btn a:first-child:hover {color: #32a6b7;border:1px solid #32a6b7; box-sizing: border-box; background:#fff;}
.productView .title .file_btn a:last-child {background: #32b799; margin-bottom: 60px;border: 1px solid #fff;}
.productView .title .file_btn a:last-child:hover {color: #32b799;border:1px solid #32a6b7; box-sizing: border-box; background:#fff;}

@media all and (max-width:1267px){
	.ceo_area li {width: 21%;}

	.productView .title .file_btn a {width: 100%;}
	.productView .title .file_btn a:first-child {margin-bottom: 10px;}
	.productView .title .file_btn a:last-child {margin-bottom: 40px;}
}

@media all and (max-width:1180px){
	.map_txt{ display: grid; grid-template-columns: 35% 65%; }
	.map_txt > div.map_list { padding-block: 25px; }
	.map_txt > div.map_list ul{ flex-direction: column; }
}

@media all and (max-width:1024px){
	.productView {width: 80%; margin: auto;}
}

@media all and (max-width:900px){
	.outline_area .area2 p {float: none; width: 22%;}
	.outline_area .area2 p img {width: 100%;}
	.outline_area .area2 ul {float: none; width: 100%; margin-top: 20px;}
	html[lang="en"] .about .outline_area .area2 ul{padding-left:0;}
	html[lang="en"] .about .outline_area .area2 ul li{display:flex;}
	html[lang="en"] .about .outline_area .area2 ul li p{float:none; padding-right:15px; box-sizing:border-box; width:150px;}
	html[lang="en"] .about .outline_area .area2 ul li b{width:calc(100% - 150px);}
}
@media all and (max-width:785px){
	.area_subVisual span.sub_text{color:#fff;  font-size:12pt; font-weight:200; display:inline-block; width:90%; word-break:keep-all;}
	.ceo_area li {width: 45%; margin-bottom:30px;}
	.ceo_area li:nth-child(even) {margin:0;}
	.ceo_area li p b {font-size:18px;}
	.ceo_bg p span {font-size:23px;}
}
@media all and (max-width:767px){
	div#content.sub{padding:50px 0;}	
	.area_subVisual{height:200px;}
	.area_subVisual .wrapper {padding-left:20px}
	.area_subVisual h2{font-size:25px;}
	.area_subVisual p{padding-top:130px;}

	[lang="en"] .lnb{overflow-x:auto; width:100%;overflow-y: hidden;}
	[lang="en"] .lnb ul{display:table; margin:0 auto; table-layout:fixed;    overflow-y: hidden;}
	[lang="en"] .lnb ul{table-layout: auto;}
	[lang="en"] .lnb ul li{display:table-cell; padding:0 15px; vertical-align:middle;}
	[lang="en"] .lnb ul li a{display:block; padding:0; font-size:15px; white-space:nowrap;}
	[lang="en"] .lnb ul li:first-child{padding-left:15px;}
	[lang="en"] .lnb ul li:last-child{padding-right:15px;}

	.sub_title{margin-bottom:30px;}
	.sub_title h2{font-size:22px;}
	.map_txt{ display: grid; grid-template-columns: 1fr; }
	.map_txt > div.map_logo { height: 125px;}
	.chart_area h3 {font-size: 23px;}
	.outline_area .area1 h5 {width: 30%;}
	.outline_area .area1 h5 img {width: 100%;}
	#header h1 a {width: 185px;}

	ul.productList li {width:calc((100% / 2) - 2%); width: -webkit-calc((100% / 2) - 2%);}
	ul.productList > li:nth-child(3n+1){margin-left:2%; margin-top: 30px;}
	ul.productList > li:nth-child(2n-1){margin-left:0; }
}

@media all and (max-width:600px){
	.lnb{overflow-x:auto; width:100%;overflow-y: hidden;}
	.lnb ul{display:table; margin:0 auto; table-layout:fixed;    overflow-y: hidden;}
	.lnb ul{table-layout: auto;}
	.lnb ul li{display:table-cell; padding:0 15px; vertical-align:middle;}
	.lnb ul li a{display:block; padding:0; font-size:15px; white-space:nowrap;}
	.lnb ul li:first-child{padding-left:15px;}
	.lnb ul li:last-child{padding-right:15px;}
	.outline_area .area2 ul li p {font-size: 17px;}
}


@media all and (max-width:500px){
	.chart_area h3 {font-size: 20px;}
	.chart_area h3:before {height: 18px;}
	
	ul.productList li {width:100%}
	ul.productList > li:nth-child(2n-1){margin-left:0 }
	ul.productList > li{margin-left:0 }

	.productView .title .file_btn a:last-child {margin-bottom: 40px;}
}

@media all and (max-width:450px){
	.ceo_area li {float: none; width: 70%; margin:0 auto; padding-bottom:30px}
	.ceo_area li:nth-child(even) {padding-bottom:30px; margin:0 auto}
	.ceo_bg p {margin-top:0}
	.ceo_bg p span {font-size: 18px;}
}

@media all and (max-width:360px){
	.productView {width: 90%;}
}