@charset "utf-8";
/* CSS Document */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
body{font-family: 'Noto Sans KR', sans-serif;}

.no-gutter {margin-left: auto;margin-right: auto;}
.no-gutter [class*='col-']:not(:first-child),
.no-gutter [class*='col-']:not(:last-child) {padding-right: 0;padding-left: 0;}

.top-logo{ display:block; margin:20px 0 0 0;}

/* NAV */
.navbar-default{ background:none; border:0 none; }
.navbar-nav{ padding-top:30px;}
.navbar-default .navbar-nav > li { min-width:160px;}
.nav-technology{ width:202px;}
.navbar-default .navbar-nav > li > a{font-family: 'Cabin', sans-serif; font-size:1.429em; font-weight:bold; text-transform: uppercase; color:#7f7f7f; border-bottom:2px solid #fff;}

.navbar-default .navbar-nav > li > a:hover{ color:#0970b5;}
.dropdown-menu > li > a{ color:#999; padding:6px 10px;}

.navbar-default .navbar-nav > li:hover > a, 
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .dropdown > a:hover, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus{ color:#000; background:#fff; color:#0566A9; border-bottom:2px solid #0566A9;}

#gnb{ border-bottom:2px solid #116FB4; padding-bottom:10px; margin-bottom:0; border-radius:0; position:relative; z-index:999;}
#gnb .dropdown-menu{ border:0;box-shadow:0 0 0;}
#gnb .dropdown-menu-box{ position:absolute; top:82px; left:0; width:100%; height:180px; display:none; background:#fff;border-bottom:2px solid #116FB4;}

/* SPLASH */
#splash{ position:relative;overflow:hidden;}
.slides{ padding:0!important; margin:0!important;}
.slides li{display:none; list-style:none; }
.slides li img{width:100%;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}



.flex-direction-nav li{ list-style:none;}
.flex-direction-nav .flex-prev,
.flex-direction-nav .flex-next{ position:absolute; top:50%;transform: translateY(-80px); z-index:900;transition:all .4s ease}
#splash:hover .flex-direction-nav .flex-prev{ left:20px;}
#splash:hover .flex-direction-nav .flex-next{ right:20px;}
.flex-direction-nav .flex-prev{ left:-50px;}
.flex-direction-nav .flex-next{ right:-50px;}

/*◀▶*/
.flex-prev,
.flex-next {display: block;width: 32px; font-size:8em;overflow: hidden;cursor:pointer; font-family:FontAwesome; color:#2974ad; opacity:.4; text-indent:300% }
.flex-prev:hover,
.flex-next:hover{ opacity:1;}
.flex-prev::before,
.flex-next::after {position:absolute; top:0; text-indent:0;}
.flex-prev::before {content: "\f104"; left:0}
.flex-next::after {content: "\f105"; right:0;}

/* ●○ */
.flex-control-paging{ position:absolute; width:100%; text-align:center; bottom:1em; z-index:900; margin:0; padding:0;}
.flex-control-paging li{ display:inline-block; width:16px; height:16px; margin:0 4px;}
.flex-control-paging li a{ display:block; width:100%; height:100%; text-indent:-300%; overflow:hidden; background:#e5e5e5;background:rgba(0,0,0,.25); border-radius:50%; cursor:pointer}
.flex-control-paging a.flex-active{ background-color:#00528F;cursor:default}


#service{ background-image: url(../img/bg-service.jpg); background-repeat: no-repeat; background-color:#60A2D2; background-size:100%; color:#fff; text-align:center; padding-bottom:60px}
#service h2{ font-size:2em; margin:50px auto 60px}
#service h2 small{ font-size:.6em; color:#fff;; display:block; line-height:2;}
#service .fa{ font-size:2.5em; border:2px solid #fff; border-radius:50%; padding:1.1em;}
#service h3{ font-size:1.2em; font-weight:700; margin-top:10px;}
#content #service h3{ color:#fff; font-size:1.2em;}
#service ul{margin-left:33%}
#service ul,#service li{ padding:0; list-style:none; text-align:justify; }
#service li:before {content: "\f05d";font-family: FontAwesome; margin-right:.5em;}
#service [class^='col-']::after { content:''; width:1px; height:70%; position:absolute; left:0; top:15%; border-left:1px solid #84b0d2;} 
#service [class^='col-']:first-child::after{ border-left:0 none;}

/*#content #service{ padding-top:40px; margin-top:60px;}
#content #service ul{margin-left:5%; margin-right:5%; height:64px}
#content #service li{  text-align:center;}*/
/*#content #service li:before{ content:''; display:none;}*/

#service a,
#products a{ color:#f2f2f2; text-decoration:none;transition: all .8s}
#service a:hover .fa{ color:#fff; border-color:transparent;}

/*#service #prdt-s-security a:hover{ color:#0D3551;}*/
#service #prdt-s-security a:hover .fa{background:#0D3551;}
/*#service #prdt-s-iot a:hover a{ color:#fff;}*/
#service #prdt-s-iot a:hover .fa{ color:#4181B1; background:#fff;}
/*#service #prdt-s-smart-factory a:hover{color:#9FC552;}*/
#service #prdt-s-smart-factory a:hover .fa{ background:#9FC552; }
/*#service #prdt-s-platform a:hover{ color:#eecc00;}*/
#service #prdt-s-platform a:hover .fa{ background:#eecc00;}

#products .row{display: flex;flex-wrap: wrap;}
#products [class^='col-'] {background-repeat: no-repeat; background-position:center; background-size:100% auto; color:#fff;}
#product-bx01{ background-image: url(../img/bg-p1.jpg); }
#product-bx02{ background-image: url(../img/bg-p2.jpg); }
#product-bx03{ background-image: url(../img/bg-p3.jpg); }
#products .bx{ height:100%; padding:40px; border:5px solid transparent; background-color:rgba(33,72,105,.6);transition: all .8s ease;}
#products .bx:hover{background-color:rgba(0,0,0,.70); border-color:#fff; }
#products h3{ font-weight:800; font-size:1.429em;}
#content #products h3{color:#fff;}
#products ul{ margin-top:50px; text-align:right; list-style:none; font-size:1.5em; font-weight:bold; line-height:2.2; color:#b9c6d0;}
#products .bx:hover ul{ color:#fff;}
#products ul .fa{ margin-left:10px; width:1.5em; text-align:center;}

#demo{ padding:36px 0; text-align:center; color:#fff; font-size:1.3em; background-color: #ffa500; background-image: url(../img/bg-demo.jpg); background-repeat: no-repeat; background-position: center; background-size:100%;}
#demo h2{ font-size:2.6em;}
#demo p{ font-size:1.2em;}
#demo a{ background:#fff; color:#ef6e17; display:block; width:20%; margin:20px auto; padding:12px 20px; text-decoration:none; transition: background-color .9s ease}
#demo a:hover{background:#ef6e17; color:#fff;}
#demo a .fa{ margin-right:.4em;}

#copyright{ background:#222; padding:40px;}
#content~#copyright{margin-top:60px;}
#copyright .contact-info{ margin-right:10px; display:inline-block;}
#copyright,#copyright a{ color:#8c8c8c;}
#copyright address,#copyright p{ margin-bottom:8px;}

/* content base ###################################### */
#content h2{}
#content h3{ font-size:1.8em; color:#116fb4; font-weight:bold; font-weight:700;}
.container h3{ position:relative; margin-bottom:48px;}
.container h3::after{ content:''; position:absolute; left:0; bottom:-20px; width:80px; height:5px; background:#116fb4;}
#content h4{ font-size:1.1em;}
h2:nth-of-type(1),
h3:nth-of-type(1),
h4:nth-of-type(1){ margin-top:0;}


.page-title{ background-image: url(../img/bg-page-title1.jpg); background-repeat: no-repeat; background-size:cover; color:#fff;text-shadow: 0 1px 4px rgba(0, 0, 0, 0.68); text-align:center; font-size:2.4em; font-weight:bold; padding:50px 10%; margin-bottom:80px}
.page-title .slogan{ font-size:.5em; color:#e5e5e5; margin-top:15px}

.img-full{ width:100%;}

.gr-about .page-title{background-image: url(../img/bg-page-title1.jpg); }
.gr-tech .page-title{background-image: url(../img/bg-page-title4.jpg); }
.gr-demo .page-title{background-image: url(../img/bg-page-title3.jpg); }
.gr-support .page-title{background-image: url(../img/bg-page-title4.jpg); }


.detail-list{ margin:0; padding:0; list-style:none;counter-reset: LIST-ITEMS;}
.detail-list li{ position:relative; background:#f1f1f1; margin-bottom:20px; padding:15px 0; }
.detail-list li:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.detail-list li img{ float:left; margin:15px; }
.detail-list li:before{ position:absolute; padding:2px 6px; left:-5px; top:-5px; background:#6688cc; color:#fff;
  content: counter(LIST-ITEMS) "";
  counter-increment: LIST-ITEMS;
}

.detail-list li:first-child:before{ background:#ff6347;}
.detail-list li:last-child:before{ background:#aacc66;}



.detail-list li p{ padding:15px;}

.detail-result ol{ margin:0; padding:0; list-style:none; font-size:1.7em; }
.detail-result li::first-letter { color:tomato; font-size:1.8em; font-weight:bold;}

.process{ margin-bottom:60px;}

.process ul{ margin:0; padding:0 0 0 10px; list-style:none;}
.process li:before{content: "\f00c";font-family: FontAwesome;margin-right:.4em; color:#ddd}
.process .box{position:relative; height:100%; padding:20px; margin-left:10px; margin-right:20px; border:1px solid #ededed;}
.process .box:after{ content:' '; position:absolute; top:25%; right:110%;width: 0;height: 0;border-top: 60px solid transparent;border-bottom: 60px solid transparent;border-left: 20px solid #8fbbdb;}
.process [class^='col-']:first-child .box{ margin-left:0;}
.process [class^='col-']:first-child .box:after{ border:0 none;}
.process h4{ background:#116fb4; color:#fff; padding:6px 15px;}

.arrow-up{width: 0; height: 0; border-left: 150px solid transparent;border-right: 150px solid transparent;border-bottom: 60px solid #F2F2F2; margin:20px auto; width:25%}

p.features{ padding:15px; border:1px solid #ededed; border-radius:6px;}
p.features strong{ color:#e95200;}

#content figure{ margin:15px 0;}
figure.border img{ border:1px solid #ededed;}

.table caption{ display:none;}
.innerHeading th,
.table > thead > tr > th{ text-align:center; background:#116fb4; color:#fff;white-space: nowrap; border-bottom-width:1px}
.table > tbody > tr > th{ text-align:center; vertical-align:middle; white-space:nowrap;}

.table .specific{ background:#4488AA; color:#fff;}
.center td{ text-align:center;}

form label{ color:#888;}
form .btn{ margin:15px 0;}


/* content ################################################# */

.about-logo{ margin-bottom:20px;}
.about-slogan{ font-size:1.5em; color:#0061A4; text-align:center; margin:30px 0 60px;}
.about-article [class^='col-'] {padding:15px; }
.about-article .box{ border:1px solid #ededed; position:relative; padding:45px 20px 30px; text-align:center;}
.about-article h4{ position:absolute; left:50%; top:-10px; margin-left:-95px; background:#116FB4; color:#fff;padding:8px; font-size:.9em; text-align:center; width:190px;}

#organization .department [class^='col-']{ text-align:center; padding-top:20px; padding-bottom:20px; margin-bottom:20px; background:#0566A9; color:#fff; font-weight:bold; font-size:1.1em;}
#organization .part{ margin-top:40px;}
#organization .part [class^='col-md-']{ padding-left:5%; padding-right:5%; }
#organization .part figure{ position:relative;}
#organization .part figcaption{ position:absolute; width:100%; left:0; bottom:0; font-size:1.1em;color:#fff; padding:15px; background-color:rgba(5, 102, 169, .8)}
#organization .part figcaption span{ display:block; font-size:.8em; position:relative; padding:15px 0 0 0;}
#organization .part figcaption span::before{ content:''; position:absolute; left:0; top:5px; background:#fff; width:40px; height:2px;}

.business-field .title{ height:6.4em; background:#0566A9; color:#fff;display: flex; justify-content: center; align-items: center;  }
#content .business-field h3{ font-size:1.5em; margin:0; color:#fff;}
#content .business-field h3:after{ display:none;}
.business-field h3 small{ display:block; padding-top:10px; text-align:center; color:#fff}
.business-field ul{ list-style:none; margin:10px 0 0 0; padding:0; line-height:2}
.business-field li{ padding:0 0 0 1.5em; position:relative;}
.business-field li:before {content: "\f00c"; color:#0566A9;font-family: FontAwesome; position:absolute; top:0; left:0}

.title-box{ background-position:15px 0; background-size:cover;  background-image: url(/img/bg-applay-demo.jpg); background-repeat: no-repeat; color:#fff; padding:40px; text-shadow:1px 4px 3px rgba(0, 0, 0, 0.68); text-align:center; margin-top:-30px; margin-bottom:40px;}
.title-box h2{ font-size:2.2em; position:relative; margin-bottom:30px;  font-weight:600;}
.title-box h2::after{ content:''; position:absolute; left:50%; bottom:-20px; width:90px; margin-left:-45px; height:2px; background:#fff;}

#content #products{ margin-top:80px;}

#location .fa{ color:#0566A9;}
#copyright .fa{ color:#8c8c8c; margin-left:15px;}
#copyright .fa:first-child{ margin-left:0;}
/*#location #content h3{ font-size:1.4em; display:inline-block; background:#116FB4; color:#fff; padding:8px 25px; margin-bottom:15px;}*/
#location address p{ margin-bottom:15px;}
.office1{ font-weight:bold; color:#222;}
.office2{ color:#999;}


#copyright div.pull_right{ float:right;}
#copyright .related_site{ margin-top:10px; }
#copyright .related_site select{width:204px; max-width:100%; }

#privacy dt{ margin:40px 0 10px;}
#privacy dt:first-child{ margin-top:0;}
#privacy .title{ margin:10px 0 5px;}

#privacy p.title:before {
 content: "\25CF";
 font-family: FontAwesome;
 margin-right:5px; font-size:.6em; vertical-align:middle;
}
#privacy .table th{ background-color:#e6e6e6; width:20%;}
#privacy .table th,
#privacy .table td{ border-left:1px solid #ddd; border-right:1px solid #ddd; border-bottom:1px solid #ddd}
#privacy ol{ margin-top:20px;}

#demo-message{ background-image: url(/img/bg-demo-comingsoon.jpg); background-repeat: no-repeat; background-size:40%; background-position: right bottom; padding-bottom:260px; }
#demo-message p { font-size:1.1em; font-weight:bold; color:#e36646;}

@media (min-width: 768px) {
#gnb{min-width:1200px}
.process>div{ display:flex;}
}
@media (max-width: 767px) {
.navbar-header{ float:none;}
.navbar-toggle{ position:absolute; right:5px; top:5px;}
.top-logo{ float:none;text-align:center; padding-bottom:10px;}
.top-logo img{ display:block;  margin-left:auto; margin-right:auto;}
#gnb .dropdown-menu-box{ display:none;}
.navbar-nav{ padding-top:5px;}
#demo h2{ font-size:1.2em;}
#demo p{ font-size:.8em;}
#demo a{ width:80%;}
#service ul{width:100%; margin-left:0; }
.about-logo{ width:70%;}
.about-slogan{ padding-left:18px; padding-right:18px; font-size:1.1em; text-align:justify;}
.about-slogan br{ display:none;}
.page-title{ margin-bottom:20px;}
.page-title .slogan br{ display:none;}
#content #products{ margin-top:20px;}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .dropdown > a:hover, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus{ border-bottom:2px #FFF;}
.title-box{ background-position:0 0;}
.page-title{ font-size:2em;}
.business-field [class^='col-']{ margin-bottom:50px;}
#service{ padding-bottom:25px; background-size:cover;}
#service [class^='col-']{ margin-bottom:30px;}
#copyright{ padding:10px;}
#copyright .contact-info{ margin-bottom:5px; display:block;}
#copyright .pull-right{ float:none!important; display:block; margin:10px auto;}
#content #service{ padding-top:10px; margin-top:10px;}
#demo-message{ background-size:80%; padding-bottom:50%;}
}