@charset "utf-8";
html, body {word-break: keep-all;font-size:17px;}

/* 공용 */
.fc-1{color:#00b9c6;}
#svb {position: relative;}
div.sub-rect {overflow: hidden; }
.pages, .proPages{padding-bottom:110px; }

#page-12.proPages,#page-13.proPages, #page-15.proPages,#page-16.proPages {padding-bottom:0;}

h2.title {text-align: center; font-size:45px; font-weight: bold; display: table; position: relative; margin: 85px auto 70px auto; }
h2.title:after {width: 12px; height: 12px; border-radius: 12px; content: ''; position: absolute; right: -25px; top: 7px; background: rgb(104,192,148);background: linear-gradient(90deg, rgba(104,192,148,1) 0%, rgba(20,186,188,1) 100%);}

h3.title{font-size:24px; font-weight:bold; position: relative; margin:60px 0 50px;}
h3.title:after {width:5px; height:5px; border-radius:5px; content: ''; position: absolute; left:144px; top:5px; background: rgb(104,192,148);background: linear-gradient(90deg, rgba(104,192,148,1) 0%, rgba(20,186,188,1) 100%);}

img.auto {max-width:100%; max-height: 100%; width: auto; height: auto;}

.overflow-table {overflow-x:auto;width:100%;}
table{border-spacing:1px; text-align:center; line-height:1.5; margin:20px 0; border-top:2px solid #293273;;}
table caption{display:none;}
table tr{}
table tr:last-child {border-bottom:1px solid #ddd;}
table tr th{vertical-align:middle;}
table thead tr th {font-weight:700; border-bottom:1px solid #ddd; background:#f9f9f9;}
table thead tr th, #page-8 table tbody td{padding:0.5rem 0; border-right:1px solid #ddd;}
table thead tr th:last-child, #page-8 table tbody td:last-child{border-right:none;}
table tbody td{border-bottom:1px solid #ddd; vertical-align: middle;}
table .slash { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="gray" /></svg>') #e8e8e8;}
table .backslash { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="100%" x2="100%" y2="0" stroke="gray" /></svg>');}
table .slash, .backslash { text-align: right; }
table .slash div, .backslash div {text-align: left;  }



@media (max-width:1400px) {
    .wrap{width:94%;}
}

@media (max-width:1100px) {

    h2.title {font-size: 38px;}
    h2.title:after {right: -15px;top: 5px;}
   .pages{padding-bottom:80px;}
}

@media (max-width:800px) {
    h2.title {font-size: 32px;}
    h2.title:after {right: -15px;top: 5px; width:7px; height:7px;}
   .pages{padding-bottom:60px;}
}

@media (max-width:650px) {
    .pages, .proPages{padding-bottom:80px;}
    h2.title{margin:60px auto 30px auto;}
    h3{font-size:30px !important;}
}



/* COMPANY - 인사말 */
#page-5 h3 {font-size:48px;}
#page-5 div.msgWrap {margin-top:70px; position: relative;}
#page-5 div.msgWrap p { margin-top:70px; width:550px; font-size:19px;}
#page-5 div.msgWrap p:first-child {margin-top:0;}
#page-5 div.msgWrap p.last {margin-top:80px;}
#page-5 div.msgWrap p:nth-child(5) {font-size: 15px;}
#page-5 div.msgWrap p span {font-size:25px; margin-left:0;}
#page-5 div.msgWrap p span:first-child{margin-left:8px;}
#page-5 div.msgWrap div.imgWrap {position: absolute;right:0; top:0;}

@media (max-width:1150px) {
    #page-5 div.msgWrap div.imgWrap {width:35%;}
    #page-5 div.msgWrap div.imgWrap img {max-width: 100%;}

    /*#page-5 div.msgWrap div.imgWrap {width:100%; height:300px; position: relative; overflow: hidden;}*/
    /*#page-5 div.msgWrap div.imgWrap img {width: 100%;}*/

}

@media (max-width:960px) {
    #page-5 div.msgWrap{margin-top:55px;}
    #page-5 div.msgWrap p {width:100%;}
    #page-5 div.msgWrap p br {display: none;}
    #page-5 div.msgWrap div.imgWrap{position: relative; width:100%; margin-top:40px;}

}

@media (max-width:650px) {
    #page-5 div.msgWrap{}
    #page-5 div.msgWrap p{margin-top:50px;}
}



/* COMPANY - 연혁 */
#page-6 {position: relative;}
#page-6 ul li {padding:20px 0 20px 20px; border-left:1px solid #ddd; position: relative;}
#page-6 ul li.year {font-size:42px; font-weight: bold; line-height: 0.7; padding-top:0; padding-bottom:40px;  }
#page-6 ul li.year:before {content: ''; width:4px; height: 35px; position: absolute; left:-2px; top:0; border-left:3px solid #5bcad3;}
#page-6 ul li span {display: block; padding-left:40px; position:relative; top:-25px;}
#page-6 ul li span:before { content: ''; position: absolute; top: 12px; left: 33px; width: 3px; height: 3px;  background: #5bcad3; border-radius: 2px;}
#page-6 ul li:last-child {padding-bottom:70px;}
#page-6 img {position: absolute; top:60px; right:0; }
#page-6 img.fix {position: fixed; top:170px;}
#page-6 img.bottomFix {position: absolute; top:1895px;}

@media (max-width:1550px) {
    #page-6 img {width:40%;}
}

@media (max-width:1150px) {
    #page-6 img {position: static; width:100%; margin-bottom:50px;}
}


/* COMPANY - 사업분야 */
#page-7 {background:#f3f4f6; padding-top:105px;}

#page-7 h2.title {margin-top:0;}
#page-7 div.circleZone {position: relative; height: 92px;}
#page-7 div.circleZone div {float:left; text-align: center; padding:20px 0; height: 90px; box-sizing: border-box; display: table; border-radius: 45px; color:#fff; position: absolute;}
#page-7 div.circleZone div span {display: table-cell; vertical-align: middle;}
#page-7 div.circleZone div.leftCircle {width:360px; background:rgba(64,189,167,0.8);}
#page-7 div.circleZone div.centerCircle {width:620px; background:rgba(15,116,117,0.8); left:50%; margin-left:-310px;}
#page-7 div.circleZone div.rightCircle {width:360px; background:rgba(136,209,216,0.8); right:0;}
#page-7 .arrow {margin:60px auto; display: block; }
#page-7 .middleCircle {text-align: center; margin-bottom:120px; }
#page-7 .middleCircle img {max-width: 100%;}

#page-7 .createCts {padding:90px 0 170px 0; background:url('/images/content/p7_black_bg.jpg') center center no-repeat; background-size:cover; }
#page-7 .createCts h2 {color:#fff;}
#page-7 .createCts ul {border:1px solid #fff;  border-radius: 200px; padding:10px;}
#page-7 .createCts ul li {width:360px; height:360px; float:left;  background:#fff; border-radius: 180px; margin-right:48px; box-sizing: border-box; text-align: center; padding-top:85px;}
#page-7 .createCts ul li:last-child {margin-right:0;}
#page-7 .createCts ul li img {margin-bottom: 15px;}
#page-7 .createCts ul li h3 {font-weight: bold; font-size:22px; margin-bottom: 15px;}
#page-7 .createCts ul li h4 {font-weight: bold; font-size:22px; color:#cdcdcd; margin-bottom: 7px; }
#page-7 .createCts ul li span {display: inline-block; width: 230px; line-height: 1.3; font-weight: 300; font-size:17px;}


@media (max-width:1300px) {
    #page-7 .createCts ul {width:auto; display: table; margin:0 auto;}
    #page-7 .createCts ul li {width:300px; height: 300px; padding-top:45px; margin-right:15px;}
}

@media (max-width:1160px) {
    #page-7 div.circleZone div.centerCircle {width:500px; margin-left:-250px; }
}

@media (max-width:1070px) {
    #page-7 {padding-top:60px;}
    #page-7 h2.title {font-size:28px;}
    #page-7 div.circleZone {height:auto;}
    #page-7 div.circleZone div {margin:20px auto !important; position: static; float:none; width:75% !important;}
    #page-7 .arrow {width:70%; max-width:330px;}

    #page-7 .createCts ul li {width:300px; height: 300px; padding-top:45px; margin-right:0; float:none; margin-bottom: 30px;}
    #page-7 .createCts ul li:last-child {margin-bottom:0;}
}



/* COMPANY - 특허및인증 */
#page-8 {padding-bottom:50px;}
#page-8 h2.title{margin:0 auto 10px auto;}

#page-8 div.boxList{}
#page-8 div.boxList ul{}
#page-8 div.boxList ul li{float:left; width:23.2%; margin-right:2.4%; position:relative; margin-bottom:5%; }
#page-8 div.boxList ul li:nth-child(4n){margin-right:0;}
#page-8 div.boxList ul li:last-child{margin-right:0; margin-bottom:0 !important;}
#page-8 div.boxList ul li .certi-img{border:1px solid #ddd; height:340px; background:#f4f4f4; position:relative; }
#page-8 div.boxList ul li img{width:100%; height:338px;}
#page-8 div.boxList ul li p{width:260px; position:relative; color:#555; font-size:16px; margin:10px auto 0;}

@media screen and (max-width:1024px) {
    #page-8 div.boxList ul li{width:48%; margin-right:4%; margin-bottom:4%; }
    #page-8 div.boxList ul li:nth-child(even){margin-right:0;}
	#page-8 div.boxList ul li .certi-img {height:480px;}
    #page-8 div.boxList ul li img {height: -webkit-fill-available;}
	#page-8 div.boxList ul li p {width:100%;}
}

@media screen and (max-width:930px) {
    #page-8 table tbody td{font-size:16px; padding:1rem 10px;}
    #page-8 div.boxList ul li .certi-img{height:388px;}
    #page-8 div.boxList ul li .certi-img img{height:385px;}
}

@media screen and (max-width:650px) {
    #page-8.pages{margin-top:-18px;}
    #page-8 h2.title{display:none;}
    #page-8 div.boxList ul{margin-top:60px;}
    #page-8 div.boxList ul li{width:100%; margin-right:0; float: none; margin-bottom:13%;}
}


/* PRODUCT - 공통 */
.proPages .top h3{font-size:56px; font-weight: 300; padding-left:20px; padding-bottom: 200px; position: relative;}
.proPages .top h3:before {content: ''; width:3px; height: 90px; position: absolute; top:10px; left:0; background:#00b9c6; }
.proPages .top h3:after {content: ''; width:3px; height: 90px; position: absolute; top:100px; left:0; background:#82c286; }
.proPages .top { padding-top:90px; position: relative;}
.proPages .top .wrap {height: 100%; position: relative; z-index: 2;}
.proPages .top .black {background:#000; padding:55px 150px 55px 75px; color:#fff; position: absolute; bottom:-82px; left:0;  z-index: 2; font-size:19px;}
.proPages .top div.rightImg {width:50% ;height:100%; position: absolute; right:0; top:0;}
.proPages .top div.rightImg:before {content: ''; display: block;padding-top: 73.784%;}
.proPages .top div.rightImg div.img{position: absolute; top: 0; left: 0; right: 0; bottom: 0;width: 100%; height: 100%; background-position: 20% center; background-size: cover; transform-origin: 100% 100%;}
.proPages .productDetail {background:#f3f4f6; padding:100px 0 120px 0;}
.proPages .productDetail ul li {width:340px; margin-right:80px; float:left; position: relative;}
.proPages .productDetail ul li img {max-width: 100%;}
.proPages .productDetail ul li:last-child {margin-right:0;}
.proPages .productDetail ul li:before {content:''; border:3px solid #5fc098; width:100%; height:100%;position: absolute; left:-15px; bottom:-15px; border-top-right-radius: 55px; }
.proPages .productDetail ul li p {}

#page-10 .top div.rightImg div.img {background:url('/images/content/top_img_p10.jpg') right top no-repeat; }
#page-11 .top div.rightImg div.img {background:url('/images/content/top_img_p11.jpg') right top no-repeat; }
#page-12 .top div.rightImg div.img {background:url('/images/content/top_img_p12.jpg') right top no-repeat; }
#page-13 .top div.rightImg div.img {background:url('/images/content/top_img_p13.jpg') right top no-repeat; }
#page-14 .top div.rightImg div.img {background:url('/images/content/top_img_p14.jpg') right top no-repeat; }
#page-19 .top div.rightImg div.img {background:url('/images/content/top_img_p19.jpg') right top no-repeat; }
#page-15 .top div.rightImg div.img {background:url('/images/content/top_img_p15.jpg') right top no-repeat; }
#page-16 .top div.rightImg div.img {background:url('/images/content/top_img_p16.jpg') right top no-repeat; }


/* PRODUCT - 자가발전용 관개장비 */
#page-10 .productList { /*padding:100px 0;*/}
#page-10 .productList h2.title{}
#page-10 .productList ul.productUl > li {float:left; width: 100%; margin:20px 0; }
#page-10 .productList ul.productUl > li img {float:left; width:324px; max-width: 100%; border:1px solid #e3e3e3;}
#page-10 .productList ul.productUl > li div.msg {width:calc(100% - 400px); float:right; margin-top:-10px; }
#page-10 .productList ul.productUl > li p {font-size:24px; color:#00b9c6; border-bottom:1px solid #dddddd; padding-bottom:10px;}
#page-10 .productList ul.productUl > li ul.detail li {float:left; padding:10px 30px 10px 15px; font-size:17px; color:#5d5d5d; position: relative;}
#page-10 .productList ul.productUl > li ul.detail li:before {content:''; position: absolute; left:0; top:17px; width:2px; height:15px; background:#00b9c6;}
#page-10 .whBox{background:#fff; margin:40px 0 90px; padding:50px; }
#page-10 .whBox:last-child{margin:40px 0 0 0;}


/* PRODUCT - 스마트밸브 */
#page-11.proPages .productDetail ul li{width:254px; margin-right:46px;}

#page-11 .productAdd{}
#page-11 .productAdd ul li{width:238px; margin-right:82px; float:left;}
#page-11 .productAdd ul li img{max-width:100%;}
#page-11 .productAdd ul li:last-child{margin-right:0;}
#page-11 .productAdd ul li p{position:relative; padding-left:8px; margin-bottom:30px; text-align:left;}
#page-11 .productAdd ul li p:before{content:''; position:absolute; top:9px; left:0; width:3px; height:11px; border-left:3px solid #37bdab;}
#page-11 .productAdd ul li.detail {text-align:center; background:#E1F4FC; border-radius:20px; padding:20px; box-sizing:border-box; margin-top:20px;}
#page-11 .productAdd ul li.detail p {text-align:left;}
#page-11 .productAdd ul li.detail div {text-align:right;}
#page-11 .productAdd ul li.detail img {max-width:85%;}
#page-11 .productAdd:last-child ul{display:table; margin:0 auto;}

#page-11 table thead tr th {font-weight:700;}
#page-11 table.table-color thead tr th {background:#e8e8e8;}
#page-11 table.table-color01 thead tr th {background:#e4fdaf;}
#page-11 table.table-color02 thead tr th {background:#8dcc85;}
#page-11 table.table-color03 thead tr th {background:#61c097;}
#page-11 table.table-color04 thead tr th {background:#11babe;}
#page-11 table tr th, #page-11 table tr td{border:1px solid #ddd; font-weight:300; font-size:14px;}
#page-11 table.insideTable tbody tr td {height:25px;}
#page-11 table.table-color{border-top:2px solid #2ab9c5;}
#page-11 table.table-color tr th, #page-11 table.table-color tr td{border:1px solid #999;}
#page-11 .productAdd div > span{display:block;}
#page-11 li.detail p:before{display:none;}
#page-11 li.detail div.mg0auto{padding:24px 0;}


/* PRODUCT - 축전모듈 & ESS  / PRODUCT - 기타 전자부품 */
#page-13.proPages .top .black, #page-16.proPages .top .black{background:#fff; color:#3d3d3d; box-shadow:2px 0 8px rgba(0,0,0,0.2);}
#page-13.proPages .productDetail, #page-16.proPages .productDetail{background:url(/images/content/pattern_black.jpg);}
#page-13 h2.title, #page-16 h2.title{color:#fff;}

#page-16.proPages .productDetail ul li{width:524px;}

/* PRODUCT - 원격제어 시스템 */
#page-14{}
.proCts{position:relative; display:table; width:100%; z-index:2; margin-top:100px;}
.proCts .imgArea{display:table-cell; position:relative; width:50%; vertical-align:middle;}
.proCts .imgArea .img{position: relative;}
.proCts .imgArea img{display:block; position:absolute; position:relative; width:100%; max-width:610px; z-index:2;}
.proCts .imgArea .img:before{content:''; position:absolute; width:484px; height:258px; z-index:1; display: block; background: linear-gradient(45deg, #82c287, #2ab9c5); }
.pro-left .imgArea .img:before{left:-20px; top:-20px;}

.proCts.pro-right .imgArea { left:50%;}
.proCts.pro-right .txArea { left:-50%;}

.proCts .txArea{display: table-cell; position:relative; width:50%; vertical-align:middle;}
.proCts .txArea{padding-left:60px;}
.proCts .txArea h4{margin:8px 0 18px;}
.proCts .txArea p{color:#5d5d5d; padding-left:8px; position:relative; line-height:1.2; margin-bottom:20px;}
.proCts .txArea p:before{content:''; width:3px; height:12px; border-left:3px solid #00b9c6; position:absolute; top:5px; left:0;}
.proCts:nth-child(odd) .txArea {padding-left:0}
.pro-right .txArea{padding-right:60px;}
.pro-right .imgArea .img:before{right:-20px; top:-20px;}

#page-14.proPages .productDetail:last-child{background:#fff; padding:0 0;}


/* PRODUCT - AI 머신러닝 알고리즘 시스템 */
#page-19 .boxIcons{padding:80px 200px 20px; background:#f3f4f5; text-align:center;}
#page-19 .boxIcons .col-3{width:50%; flex: 0 0 50%; max-width:50%; margin-bottom:70px;}
#page-19 .boxIcons h4{margin:20px 0 10px;}
#page-19 .boxIcons p{margin:8px 0; color:#1d1d1d;}
#page-19 .boxIcons img{filter:drop-shadow(2px 0 8px rgba(0,0,0,0.3));}


/* PRODUCT - 기타 전자부품 */

@media (max-width:1300px) {
    #page-11 .productAdd ul li{width:23%; margin-right:2.5%;}
    #page-11 .productAdd ul li.detail{width:48%;}
}


@media (max-width:1260px) {    
    .proPages .top h3 {font-size:35px; padding-bottom:160px;}
    .proPages .top div.rightImg {/*height:auto;*/}
    .proPages .productDetail ul li {float:none;  margin:70px auto 80px!important; width:632px; max-width:100%; padding:0 10px;}
    .proPages .productDetail ul li:before{left:-22px; bottom:-18px;}
   
    
}

@media (max-width:1100px) {
    .proPages .productDetail{padding:80px 0 80px 0;}
    .proPages h2 {font-size:38px;}
    .proPages h2:after {right:-15px; top:5px;}
    .proPages.top div.rightImg {height:415px;}
    .proPages .productDetail ul li:before {left:-7px;}
    .proPages .top .black{padding:50px 75px;}
    .proPages .top .black > br{display:none;}
    
    #page-10  .top div.rightImg div.img {background:url('/images/content/top_img_p10_m.jpg') right top no-repeat; background-size: cover;}
    #page-11  .top div.rightImg div.img {background:url('/images/content/top_img_p11_m.jpg') right top no-repeat; background-size: cover;}
    #page-12  .top div.rightImg div.img {background:url('/images/content/top_img_p12_m.jpg') right top no-repeat; background-size: cover;}
    #page-13  .top div.rightImg div.img {background:url('/images/content/top_img_p13_m.jpg') right top no-repeat; background-size: cover;}
    #page-14  .top div.rightImg div.img {background:url('/images/content/top_img_p14_m.jpg') right top no-repeat; background-size: cover;}
    #page-19  .top div.rightImg div.img {background:url('/images/content/top_img_p19_m.jpg') right top no-repeat; background-size: cover;}
    #page-15  .top div.rightImg div.img {background:url('/images/content/top_img_p15_m.jpg') right top no-repeat; background-size: cover;}
    #page-16  .top div.rightImg div.img {background:url('/images/content/top_img_p16_m.jpg') right top no-repeat; background-size: cover;}
    
    #page-10 .productList ul.productUl > li div.msg { width:calc(100% - 350px); }
    #page-19 .boxIcons{padding:80px 20px 20px;}
}

@media (max-width:980px) {  
    #page-14{}
    .proCts .imgArea{position:absolute; display:block; top:0; left:0 !important; width:280px;}
    .proCts .imgArea .img{position:relative;}
    .proCts .imgArea .img:before{width:210px; height:145px; top:-10px; left:-10px;}
    .proCts .txArea{display: block; width:100%; padding-left:310px; padding-top:0; left:0 !important;}
    .proCts:nth-child(odd) .txArea {padding-left:310px;;}
    .pro-right .imgArea .img:before{right:inherit; top:-10px; left:-10px;}
    .proCts .txArea p{padding-left:0;}
    .proCts .txArea p:before{display:none;}
}



@media (max-width:830px) {
    .proPages .top .black {width:100%; padding:50px 25px; font-size:14px;}
    .proPages .top h3 {text-shadow:-1px 0 #FFF, 0 1px #FFF, 1px 0 #FFF, 0 -1px #FFF; font-size:28px; }
    .proPages .top h3:before {height: 40px;  top:10px;}
    .proPages .top h3:after {height: 40px;  top:50px;}
    
    .proPages .productDetail{padding:80px 0;}
    
    #page-10 .productList{}
    #page-10 .productList ul.productUl > li img {width:100%; margin-bottom: 30px;}
    #page-10 .productList ul.productUl > li div.msg {width:100%;}
    #page-10 .productList ul.productUl > li ul.detail li{font-size:16px;}
    #page-10 .whBox{margin:-20px 0 60px 0; padding:25px;}
    #page-10 .whBox:last-child{margin:-20px 0 0 0;}
    #page-10 .whBox.fs-21{font-size:16px;}
    
    #page-11 .productAdd ul li{width:48%; margin-right:2%;}
    #page-11 .productAdd ul li p {margin-top:40px;}
    #page-11 .productAdd ul li.detail{width:100%;}
    
    #page-14{}
    .proCts .imgArea{width:240px;}
    .proCts .txArea{padding-left:270px;}
    .proCts:nth-child(odd) .txArea {padding-left:270px;;}
    .proCts .txArea p.fs-18{font-size:15px;}
    
}


@media (max-width:650px) {
    .proPages .top .black br {display: none;}
    .proPages h2.title{font-size:25px; margin: 85px auto -45px auto;}
    .proPages .productDetail{padding:60px 0;}
    .overflow-table::-webkit-scrollbar {width:5px;height:5px;background:#ddd;}
    .overflow-table::-webkit-scrollbar-thumb {background:#12a7a0;}
    
    #page-10 .productList ul.productUl > li{margin:65px 0;}
    
    #page-11 .productAdd ul li{width:100%; margin-right:0;}
    #page-11 table.table-color thead tr th {padding:0.3rem 0.3rem;}
    #page-11 .productAdd ul li img {max-width:80%; display:block; margin:0 auto;}
    #page-14{}
    .proCts .imgArea{width:100%; position:relative;}
    .proCts .txArea{padding:0 0 0 0; text-align:center;}
    .proCts:nth-child(odd) .txArea {padding:0 0 0 0; }
    .proCts .txArea span{display:inline-block;  margin-bottom:11px; }
    .proCts .txArea h4.fs-24{display: inline-block; font-size:24px; margin-left:10px;  margin-bottom:11px; }
        
    #page-19 .proCts .txArea{padding:20px 0 0 0;}
    #page-19.proPages h2.title{margin:85px auto 35px auto;}
    #page-19 .boxIcons .col-3{width:100%; flex: 0 0 100%; max-width:100%; }
    
}


/* COMMUNITY - 홍보영상 */
#page-21 .video2{background: linear-gradient( to top, #fff, #f3f4f5 ); padding-top:1vh; margin-top:11vh;}


@media (max-width:650px) {
    #page-21 .video2{ margin-top:7vh;}
    #page-21 h2.title:after{right:23px;}
}