@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

div#content.sub{min-height:300px; font-family: 'NanumSquare';}
.sub_title, .PRODUCT_tit{margin: 80px 0 40px 0; }
.sub_title h2{text-align:center; color:#111; font-size:35px;}

p.mob_info{margin-top:10px; padding:5px; background:#f6f6f6;}
/* 서브비쥬얼 */
.area_subVisual{position:relative; height:430px; padding:0 15px; background-size:cover; background-position:80% 50%;}
.area_subVisual h2{ color:#fff; text-align:center; font-size:45px;}
.area_subVisual p{padding-top: 185px; color: #fff; text-align: center; font-size: 20px;}

/* lnb */
.lnb {padding: 0 15px; box-sizing: border-box;font-family:'NanumSquare', serif; z-index:11;left:0;bottom:0;width:100%;height: 65px; border-bottom:1px solid #ddd;text-align:center;}
.lnb ul {margin: 0 auto;width:100%;height: 65px;}  
.lnb ul li {display:inline-block;padding: 20px 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:17px;color: #000;transition: 0.2s;}
.lnb ul li:hover a {color: #2f8ba2; font-weight: 600;} 
.lnb ul li a.on {color: #2f8ba2; font-weight: 600;}

/* 회사개요 */
.summary {width: 100%; margin: 0 auto; background:url(/images/content/about_bg.jpg)no-repeat center; height: 963px; color: #fff; overflow: hidden; padding-top: 150px; box-sizing: border-box}
.summary_inr {float: left; width: 50%; padding-left: 15%; box-sizing: border-box;}
.summary_inrig {float: right; width: 50%;}
.summary_inr h5 {font-size: 35px; font-weight: 600; line-height: 1.4;}
.summary_inr ul {margin-top: 55px}
.summary_inr ul li {padding-bottom: 30px;}
.summary_inr ul li b {font-size: 21px; display: block; color: #f0fafd;}
.summary_inr ul li span {font-size: 18px}
.summary_inrig h5 {font-size: 35px; font-weight: 600; color: #f0fafd;}
.summary_inrig h5 b {font-size: 20px; font-weight: 400; display: block}
.history {margin-top: 85px; position: relative;}
.history:before {left: -10px; content: ""; width: 1px;  height: 100%;  position: absolute; top: 0; bottom: 0;  left: 0; background-color: #eee;}
.history .part .year:before {left: -29px; transform: translateX(-50%); content: '';  position: absolute;  top: 0; z-index: 1;  width: 8px;  height: 8px;  background-color: #2f8ba2;  border-radius: 50%;}
.history .part {line-height: 18px; position: relative; margin-bottom: 80px; margin-left: 30px;}
.year {font-size: 20px; margin-bottom: 10px; font-weight: 500}
.txt {font-size: 16px; font-weight: 300; font-family: Noto Sans KR}
.location_inr h3{text-align: center; color: #111; font-size: 35px; margin: 80px 60px;}
.wrap_controllers {display:none;}
form {max-width: 1200px; width: 100%; margin: 0 auto; font-family: Noto Sans KR}
.pagination {max-width: 1200px; width: 100%; margin: 0 auto; font-family: Noto Sans KR; margin-bottom: 60px;}
.photoList {max-width: 1200px; width: 100%; margin: 0 auto; font-family: Noto Sans KR}

/* 사업분야 */
.business_areas {margin-top: 60px; margin-bottom: 120px}
.business_areas ul {max-width: 1400px; margin: 0 auto; width: 100%; overflow: hidden}
.business_areas ul li {float: left; width: 33.3%;}
.business_areas ul li:nth-child(odd) {margin-top: 50px}
.business_areas ul li a {display: block; position: relative}
.business_areas ul li a img {width: 100%}
.business_areas ul li a img {width: 100%;
    height: auto;
    transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;}
.business_areas ul li a:hover img {transform: scale(1.05,1.05);
    -o-transform: scale(1.05,1.05);
    -moz-transform: scale(1.05,1.05);
    -webkit-transform: scale(1.05,1.05);}
.top_textBox {text-align: center; position: absolute; top:18%; left: 50%; transform:translateX(-50%);}
.top_textBox i {color: #fff; display: block; text-align: center; font-size: 35px}
.top_textBox span {font-size: 25px; color: #fff; font-weight: 600; display: block; margin-top: 10px;}
.bot_textBox {width:100%; position: absolute; bottom:7%; left: 50%; transform:translateX(-50%); box-sizing: border-box; padding: 0 40px;}
.bot_textBox b {padding-bottom: 7px; font-weight: 800; font-size: 20px; display: block; color: #fff; border-bottom:1px solid#fff;}
.bot_textBox span {color: #fff; font-size: 17px; display: block; padding-top: 8px;}
.business_areas li:last-child {display: none;}

/* R&D센터 */
.r_d {text-align: center}
.r_d h5 {font-size: 23px; color: #2f8ba2}
.r_d span {font-size: 19px; display: block; margin-top: 10px; padding: 0 15px;}
.r_d .r_dbg {display:none; background: url(/images/content/r_d_bg.jpg)no-repeat center; height: 460px; position: relative; margin: 50px 0}
.r_d .r_dbg p {width: 100%; position: absolute; top:15%; left: 50%; transform: translateX(-50%);}
.r_d .r_dbg p b {color: #fff; font-size: 17px; font-weight: 500; display: block}
.r_d .r_dbg p span {margin-top: 0px; text-transform:uppercase; font-weight: 800; color: #fff; font-size: 23px; display: block}
.r_d .r_dbg p strong{line-height: 1.1; font-weight:700; color: #dff7ff; font-size:20px; border:1px solid#fff; width: 220px; height: 135px; border-radius: 50%; display: inline-block; margin: 0 -9px; margin-top: 30px; padding-top: 85px}
.area_portfolio {width: 100%; margin: 0 auto; max-width: 1200px; margin-top: 100px}
.area_portfolio h5 {margin:30px 0;}
.area_portfolio ul {overflow: hidden}
.area_portfolio > ul > li {float: left;  margin-right: 34px; width: 274px; margin-bottom: 40px; height: 250px;}
.area_portfolio > ul > li a {display: block;}
.area_portfolio > ul > li .img_portfolio {position: relative; overflow: hidden; height: 0;  padding-top: 205px; text-align: center; border:4px solid #2f8ba2; box-sizing:border-box; }
.area_portfolio > ul > li .img_portfolio img {width: 100%; position: absolute; top: 0; left: 0;  transition: all 0.8s ease-out;  -webkit-transition: all 0.8s ease-out; max-width: 100%;  height: auto; transform: scale(1.01);}
.area_portfolio h6 {margin-top:15px; line-height: 1.2; font-weight: 500;  font-size: 17px; color: #222;}
.area_portfolio > ul > li:nth-child(4n) {margin-right: 0}
.area_portfolio > ul > li:hover .img_portfolio img {transform: scale(1.05);}
.r_d .chart {width: 100%; margin: 100px 0}
.r_d .chart img {width: 100%}
.r_d .chart .mo {display: none}





/* 제조 사업부 */
.Produce {text-align: center; width: 100%; margin: 0 auto;}
.Produce h5 {font-size: 23px; color: #2f8ba2}
.Produce span {font-size: 19px; display: block; margin-top: 10px; padding: 0 15px;}
.Produce_bg {background: url(/images/content/Produce_bg.jpg)no-repeat center; height: 460px; margin-top: 50px;}

/* 국내/외 영업부 */
.sales {text-align: center; width: 100%; margin: 0 auto;}
.sales h5 {font-size: 23px; color: #2f8ba2}
.sales span {font-size: 19px; display: block; margin-top: 10px; padding: 0 15px;}
.sales_bg {background: url(/images/content/sales_bg.jpg)no-repeat center; height: 460px; margin-top: 50px;}


/* 제품소개 */
.PRODUCT {width: 100%; margin: 0 auto; max-width: 1200px; margin-top: 150px; margin-bottom: 80px; padding: 0 15px; box-sizing: border-box}
.PRODUCT div {overflow: hidden; margin-bottom: 70px; padding-bottom: 70px; border-bottom:2px dashed #bdbdbd}
.PRODUCT div:last-child {border-bottom: none}
.PRODUCT div h4 {float: left; width: 50%; font-size: 23px; color: #19495f;}
.PRODUCT h4 {font-size: 23px; color: #19495f;}
.PRODUCT div ul {float: right; width: 50%;}
.PRODUCT div ul li img {width: 100%}
.PRODUCT div ul li dl {margin-top: 65px;}
.PRODUCT div ul li dl dt {padding-bottom: 8px; color: #666; font-size: 19px; font-weight: 600;}
.PRODUCT div ul li dl dd {font-weight: 400; font-size: 17px; line-height: 1.5}
.scrollTable {font-family: Noto Sans KR; font-weight: 400}
.PRODUCT_tit {text-align: center; padding: 0 15px; box-sizing: border-box}
.PRODUCT_tit h6 {font-size: 23px; color: #2f8ba2;}
.PRODUCT_tit span {font-size: 19px; display: block; margin-top: 15px; line-height: 1.6}





@media (max-width: 1380px){
	.area_portfolio {max-width: 1000px; padding: 0 4%; box-sizing: border-box}
	.area_portfolio > ul > li { margin-right: 20px; width: calc(25% - 15px); height: 185px;}
	.area_portfolio > ul > li .img_portfolio {overflow: hidden; padding-top: 140px;}
}

@media all and (max-width:1313px){
	.summary_inr {padding-left: 3%;}
}

@media all and (max-width:1015px){
	.summary_inr h5 {font-size: 28px}
	.summary_inrig h5 {font-size: 25px}
	.summary_inrig h5 b {font-size: 18px}
}
@media all and (max-width:900px){
.r_d .chart .mo {display: block; width: 100%; padding: 0 20px; box-sizing: border-box; color: #fff;}
.r_d .chart .mo h5 {font-size: 28px; margin-bottom: 35px;}
.r_d .chart .mo li {background-color: #157289; border-radius: 50%; height: 315px; width: 315px; margin: 0 auto; margin-bottom: 20px}
.r_d .chart .mo li:nth-child(odd){background-color: #0fa8ce}
.r_d .chart .pc {display: none}
.r_d .chart .mo li b {display: block; padding-top: 50px; font-weight: 600; font-size: 25px}
.r_d .chart .mo li strong {display: block; padding-top: 30px; font-size: 16px; font-weight: 500}
}
@media all and (max-width:820px){
	.summary {background:url(/images/content/aboutmo_bg.jpg)no-repeat center; height: 1831px}
	.summary_inr {float: none; width: 100%; padding-left: 0;}
	.summary_inrig	{float: none; width: 100%; margin-top: 80px}
	.summary_inr h5 {text-align: center}
	.summary_inr ul {text-align: center}
	.summary_inrig h5 {text-align: center; padding: 0 15px;}
	.history:before {left: 31%}
	.history .part {margin-left: 35%}
	.history .part .year:before {left: -6%;}
	.business_areas .mo {display: block}
	.business_areas .pc {display: none}
	.business_areas ul li:nth-child(odd) {margin-top: 0}
	.business_areas ul li {width: 47.7%; padding-left: 20px;  box-sizing: border-box;}
	.business_areas li:last-child {display: block; width: 100%; margin-top: 20px; padding-right: 20px}
	.business_areas li:nth-child(3) {display: none;}
	.area_portfolio > ul > li {margin-right: 11px; width: calc(33% - 6px);}
	.area_portfolio > ul > li:nth-child(3n) {margin-right: 0;}
	.area_portfolio > ul > li:nth-child(4n){margin-right: 11px;}
	.area_portfolio > ul > li:nth-child(12) {margin-right: 0;}
	.area_portfolio h6 {font-size: 15px;}
	.area_portfolio > ul > li .img_portfolio {padding-top: 129px;}
	.area_portfolio > ul > li {height: 165px}	
}

@media all and (max-width:780px){
	.lnb {overflow-x: auto; white-space: nowrap;  margin: 0 auto;  overflow-y: hidden;}
}

@media all and (max-width:660px){
	.top_textBox span {font-size: 22px}
	.bot_textBox b {font-size: 18px}
	.bot_textBox span {font-size: 15px;}
	.r_d .r_dbg p strong {display: none;}
	.r_d .r_dbg {height: 200px}
	.r_d .r_dbg p {top:35%}
	.area_portfolio {margin-top: 0}
	.r_d .r_dbg {background: url(/images/content/r_d_bg.jpg)75% 0%}
	.area_subVisual {background-position: 70% 50%;}
}

@media all and (max-width:608px){
	.bot_textBox {display: none;}
	.top_textBox {width: 100%; background:#1a444e; position:inherit; padding: 15px 0;}
	.business_areas ul li:first-child a .top_textBox {background:#31a979}
	.business_areas ul li:nth-child(2) a .top_textBox {background:#2f8ba2}
	.business_areas ul li a:hover img {transform:none}
	.top_textBox i {font-size: 24px}
	.top_textBox span {font-size: 15px}
	

}


@media all and (max-width:560px){
	.area_portfolio > ul > li:nth-child(2n) {margin-right: 0 !important;}
	.area_portfolio > ul > li:nth-child(3n) {margin-right: 11px;}
	.area_portfolio > ul > li {margin-bottom: 30px; width: -webkit-calc(50% - 6px);}
	.Produce_bg {background: url(/images/content/Producemo_bg.jpg)no-repeat center 100%;}
	.sales_bg {background: url(/images/content/salesmo_bg.jpg)no-repeat center;}
	.PRODUCT {margin-top: 75px}
	.PRODUCT div h4 {width: 100%; text-align: center; float: none; margin-bottom: 25px;}
	.PRODUCT div ul {width: 100%; margin: 0 auto; float: none;}
	.PRODUCT div ul li dl {text-align: center}
	.PRODUCT h4 {text-align: center}
	#content .mob_info {text-align: center}
	
}



@media all and (max-width:472px){
	.PRODUCT div h4 {font-size: 20px; line-height: 1.2;}
	.scrollTable {font-size: 15px}
	.summary {height: 1700px}
	.summary_inr h5 {font-size: 23px}
	.summary_inr ul li b {font-size: 19px}
	.summary_inrig h5 {font-size: 23px}
	.summary_inrig h5 b {font-size: 16px}
	.history .part {margin-left: 20%;}
	.history:before {left: 15%;}
	.year {font-size: 18px}
	.txt {font-size: 15px}
	.sub_title h2 {font-size: 25px}
	.location_inr h3 {font-size: 25px; margin: 60px 0 40px 0}
	.sub_title {margin: 60px 0 40px 0}
	.r_d h5 {font-size: 21px}
	.r_d span {font-size: 16px}
	.r_d .r_dbg p span {font-size: 17px}
	.r_d .r_dbg {height: 145px}
	.area_subVisual p {font-size: 16px}
	.area_subVisual h2 {font-size: 35px}
	.Produce h5 {font-size: 21px}
	.Produce span {font-size: 16px}
	.sales h5 {font-size: 21px}
	.sales span {font-size: 16px}
	.PRODUCT div ul li dl dt {font-size: 17px}
	.PRODUCT div ul li dl dd {font-size: 15px}
	.top_textBox span {margin-top: 3px}
	.PRODUCT_tit h6 {font-size: 18px;}
	.PRODUCT_tit span {font-size: 16px}
}
@media all and (max-width:365px){
	.lnb ul {padding: 0 15px; box-sizing: border-box;}
	.lnb ul li {padding: 20px 15px}
	.lnb ul li a {font-size: 15px}
	.area_subVisual {background-position: 65% 50%;}
}
@media all and (max-width:360px){
	.area_portfolio > ul > li {float: none; width: 100%; margin-bottom: 50px}
	.area_portfolio ul {margin: 0 auto;}
}