@charset="utf-8";
 


header { background-color: rgba(000, 000, 000, .6); width:100%; height:80px; position: fixed; top:0; z-index: 9;}
header section { padding:0!important; position: relative; overflow: visible!important;}
header a {  color:#fff;  }
header .logo { width:110px; position: absolute; left:0; top:5px; }
header .logo a { background-image: url('../../images/logo.png'); background-size: 90%; display: block; padding:40px; } 
header .btn_open { position:absolute; right:0; top:43px;}
header .btn_open a {  display: block; position: relative; width:17px; height:17px; cursor: pointer;}
header .btn_open span { width:5px; height:5px; border-radius: 50px;; display: block; background-color: #fff;  position:absolute; }
header .btn_open span:nth-child(1) { top:0; left:0; background-color: #0068dd;}
header .btn_open span:nth-child(2) { top:0; right:0;}
header .btn_open span:nth-child(3) { bottom:0; left:0;}
header .btn_open span:nth-child(4) { bottom:0; right:0;}

.dropper_wrap { position: absolute; top:79px; width:100%;  background-color: #000; padding:15px 0 0; height:420px; display: none; }
.dropper_wrap section { position:relative; }
.dropper  {  position: absolute; right:270px;  display: flex; width:50%;  font-size:.95em; }
.dropper  div { flex:1; margin:2% 5%; flex:1;   transition: all .3s;}
.dropper  div > a { font-size:.9em;  float:none; display: block; margin-bottom:10px;  transition: all .1s; }
.dropper  div > a:hover { color:#0068dd; transition: all .1s;}
.dropper  div div { font-size:.85em; opacity: .7; text-indent:10px; margin-bottom:30px;  }
.dropper  div div a { transition: all .3s;}
.dropper  div div a::before { content:'-'; margin-right:5px;  }
.dropper  div div a:hover { text-indent:15px; transition:all .3s; }

.lnb { position: absolute; right:270px; top:40px; display: flex; width:50%;  font-size:.95em; }
.lnb a { margin:0 5%; flex:1;   transition: all .3s; cursor: pointer;}
.lnb a:hover { color:#ddd; transition: all .3s;}
.lnb:hover .dropper_wrap { height:500px; }
.gnb { position:absolute; right:50px; top:34px;  }
.gnb a { font-size:.75rem; font-weight:300; position: relative; margin:0 7px ; padding-bottom:5px; color:#ddd; }
.gnb a:hover span { display: block; transition: all .3s; }
.gnb a span { width:100%; height:1px;  background-color:#ddd; display: block; position:absolute; bottom:0; left:0; display: none; transition: all .3s; }

a.ko { color:#0068dd!important; font-weight:800!important;  }
a.ko span { display: block; height:2px!important;  background-color:#0068dd!important; }

.store { font-size:0.9em;  position: absolute; right:170px; top:40px; }



/* soft ware */
#soft_wrapper { position: relative;}
#soft_wrapper  header  { background-color: rgba(255, 255, 255, .6);  }
#soft_wrapper  header section .lnb > a  { color: #111; font-weight:400;} 
#soft_wrapper  header .logo a { background-image: url('../../images/logo_b.png');   }   
#soft_wrapper  header .btn_open span { width:5px; height:5px; border-radius: 50px; display: block; background-color: rgb(37, 37, 37);  position:absolute; }
#soft_wrapper  header .btn_open span:nth-child(1) {  background-color: #0068dd;}


@media only screen  and (max-width:980px){   
    .btn_open { display: none;}
    header .logo { width:70px; position: absolute; left:10px;  }
    header .logo a {   background-size: 100%; display: block; padding:35px; } 
    .lnb { top:36px; right:170px; }
    .gnb {  right:20px; top:34px; } 
    .store { font-size:0.9em;  position: absolute; right:100px; top:36px; }
    .dropper_wrap { top:100px; }
    .dropper  {  position: absolute; right:0px; left:0px; width:100%; }
}

@media only screen  and (max-width:640px){     
}


@media only screen  and (max-width:480px){  
    header { background-color: rgba(000, 000, 000, .8); width:100%; height:100px; }
    header .logo { width:65px; position: absolute; left:43%;  }
    header .logo a {   background-size: 100%; display: block; padding:27px; } 
    .lnb { top:70px; right:0px; width:100%; }
    .gnb {  right:20px; top:30px; }
    .lnb a  { flex-basis:25%; max-width:25%;}
    .store {   position: absolute; right:0px; left:20px; top:30px; }

}




.slider_main { height:900px!important;}
.slider_main .slick-arrow { height: 50px!important; width:50px;}
main  { width:100%; text-align: center;   background-size: cover; height: 900px !important; position: relative;}
main section { padding:0; margin:0 auto 0;  position: relative; height: 900px !important; }
main p  { position: absolute; top:35%; text-align: center; width:100%; font-size:1.4em; color:#fff;  text-shadow: 1px 1px 5px #000;   z-index: 1;}
main p  span { display: block;}
main p  span:first-child { font-size:.8em; }
main p  span:nth-child(2) { font-size:1.8em; line-height:2em;  font-weight:500; }
.dot { display: inline-block; width:10px; height:10px; border-radius: 50px; background-color: #1d449a;}
.main-a {  background-image: url('../../images/main.gif'); }
.main-b {  background-image: url('../../images/main-b.gif'); }
.main-c {  background-image: url('../../images/main-c.gif'); }
.main-d {  background-image: url('../../images/main-d.gif'); }
.main-a1 { position:absolute; background-image: url('../../images/main-a1.png'); width:22%; padding-bottom:38%; background-size: 100%; right:10%;  animation: maina1 2s infinite ease-in-out   alternate; animation-fill-mode: both ; }
.main-a2 { position:absolute; background-image: url('../../images/main-a2.png');  width:16%; padding-bottom:40%; background-size: 100%; right:30%; animation:  maina2 .8s infinite ease-in-out   alternate; animation-fill-mode: both ; }

.main-b1 { position:absolute; background-image: url('../../images/wearable.png'); width:32%; padding-bottom:30%; background-size: 100%; right:3%; top:40%;  animation: maina1 2s ease-in-out  alternate; animation-fill-mode: both ;}

.main-c1 { position:absolute; background-image: url('../../images/main-c1.png'); width:11%; padding-bottom:45%; background-size: 100%; left:13%; top:150px; }
.main-c2 { position:absolute; background-image: url('../../images/main-c2.png');  width:13%; padding-bottom:45%; background-size: 100%; right:13%; top:150px; }

.main-d1 { position:absolute; background-image: url('../../images/main-d1.png'); width:18%; padding-bottom:50%; background-size: 100%; right:3%; bottom:5%; min-width:180px;}  

.main-d span:nth-child(2) { line-height:1.2em; margin:.5em auto;}
#main_wrapper section { overflow: hidden; padding:7% 0;  }
#main_wrapper .txt-box h3 { font-size:2.5em; font-weight:600; text-transform: uppercase; margin-bottom:20px;}

@media only screen  and (max-width:980px){  
    .slider_main { height:800px!important;}
    main  {  height:800px!important; background-position: 70% center;}
    main section { height: 800px !important; }   
    main p  { position: absolute; top:30%; }

    .main-a1 { width:27%; padding-bottom:60%;  }
    .main-a2 { width:20%; padding-bottom:50%;  left:1%; }

    .main-b1 { width:40%;  right:13%; top:55%; }
    
    .main-c1 { width:18%; padding-bottom:50%; left:3%; top:250px; }
    .main-c2 { width:20%; padding-bottom:50%; right:5%; top:250px; }
    
    .main-d1 { width:18%; padding-bottom:50%; right:10%; bottom:5%; }
    
}


@media only screen  and (max-width:640px){   
    #main_wrapper section { overflow: hidden; padding:10% 0;  }  
    main p  { position: absolute; top:25%; }

    .main-a1 { width:40%; padding-bottom:78%;  }
    .main-a2 { width:20%; padding-bottom:50%;  left:15%; }
    
    .main-b1 { width:60%;  right:13%; top:55%; }
    
    .main-c1 { width:20%; padding-bottom:75%; left:13%; top:40%; }
    .main-c2 { width:25%; padding-bottom:75%; right:13%; top:40%; }
    
    .main-d1 { width:18%; padding-bottom:60%; right:10%; bottom:10%; }
    
}


@media only screen  and (max-width:480px){  
    #main_wrapper section { overflow: hidden; padding:12% 0;  } 
    .slick-slider { height:400px;} 
    
    main p  { position: absolute; top:25%; }
    main p  span:first-child { font-size:.95em; font-weight:300; }
    main p  span:nth-child(2) { font-size:1.5em; line-height:1.2em; padding:15px 0;   }

    .main-a1 { width:45%; padding-bottom:98%; background-size: 100%; right:5%; }
    .main-a2 { width:30%; padding-bottom:150%; background-size: 100%; left:13%;  animation:  maina2 .9s}

    .main-b1 { width:65%;  right:15%; top:45%; }

    .main-c1 { width:28%; padding-bottom:75%; left:13%; top:50%; }
    .main-c2 { width:32%; padding-bottom:75%; right:13%; top:50%; }
    
    .main-d1 { width:18%; padding-bottom:75%; right:28%; bottom:8%; }
}



.product-area .slick-arrow { display: none!important;}



.product-area { padding-bottom:550px; position: relative;  }
.product-area section { position: relative!important; overflow:visible!important; width:100%; }
.product-area section .txt-box {  width:30%; float:left; }
.product-area section .img-box {   left:30%; top:42%;  width:70%; float:left;   }

.product-area .txt-box > p { font-size:1.1em; font-weight:400; letter-spacing: -1px; }
.product-area .txt-box h3 {  line-height:1.1em;} 
.product-area .btn_wrap { margin-top:80px; }
.product-area .btn_wrap a { display:block; width:100%; margin-bottom:30px; position: relative; cursor: pointer;  transition: 0.3s;}
.product-area .btn_wrap button { display: inline; width:40px; height:40px;   border:1px solid  #aeaeae;  font-weight:400; }
.product-area .btn_wrap p { font-weight:400; display: inline; margin-left:20px;   }
.product-area .btn_wrap span { position: absolute; bottom:0; left:60px; width:150px;  height:1px; background-color: #aeaeae; display: block;}

.product-area .btn_wrap a.active button { background-color: #1d449a; color:#fff; border-color:#1d449a;   }
.product-area .btn_wrap a.active p { color: #1d449a;  }
.product-area .btn_wrap a.active span { background-color: #1d449a;  }

.product-area .img-box > div { position: absolute; z-index: -1;} 
.product-area .img-box > span { display: block; margin:3% 0; font-size:1.05em; line-height:1.6em; }

.product-area .img-box .slider-visual a { display: block; float:left;   cursor: pointer;  position: relative; margin:0 1% 0 .1%; } 
.product-area .img-box .slider-visual a div:first-child { width:100%;background-size: 80%;  padding:5% 0;  border:1px solid #aeaeae; }
.product-area .img-box .slider-visual a div img { width:100%;  max-width:285px; margin:0 auto; display: block; }
.product-area .img-box .slider-visual a p  {  font-size:.9em;  margin:10px; }
.product-area .img-box .slider-visual a p span { font-weight:700; font-size:1.3em; margin-bottom:5px;  display: block; }


.product-area .img-box #page04 .slider-visual a div img { width:80%;  }

.product-area .img-box #page04 .slider-visual a div:first-child {  padding:15% 0;  }

.product-area .img-box #page03 .slider-visual a div:first-child {  padding:14% 0;  }


.sh320 { background-image: url('../../images/sh320.png');}
.sh350g { background-image: url('../../images/sh350g.png');}
.sh350m { background-image: url('../../images/sh350m.png');}
.sh380 { background-image: url('../../images/sh380.png');}



.tabcontent { width:70%; height:450px;  overflow: hidden; background-color: #fff;}







@media only screen  and (max-width:980px){    
    .product-area { padding-bottom:700px!important;  }
    .product-area .btn_wrap { margin-top:0px; }
    .product-area .img-box .slider-visual a {  margin-right:1%; }   
    .product-area section .txt-box { width: 100%; float:left; }
    .product-area section .img-box { position:relative; left:0%; top:0%;  width:100%;  }
    
    .product-area .btn_wrap a { width:50%;  margin-bottom:10px; display: block; float:left; }
    .product-area .btn_wrap button { display: inline; width:30px; height:30px;  }
    .product-area .btn_wrap p { font-weight:400; display: inline-block; margin-left:5px;   }
    .product-area .btn_wrap span { position: absolute; bottom:0; left:30px; width:150px;   background-color: #aeaeae; display: block;}
    .product-area .img-box > span { margin:5% 0; font-size:1.05em; line-height:1.6em; }

    .tabcontent { width:100%; height:400px; }


}


@media only screen  and (max-width:480px){    
    .product-area { padding-bottom:650px!important; }
}





.industry-area { background-color: #f8f8f8; text-align: center;} 
.industry-area .img-box { width:100%; display: flex; margin:50px auto; }
.industry-area .img-box ul { flex:1; margin:1%; border-radius: 50px; border:1px solid #aeaeae; padding: 2% 2% 5%; transition: all 1s; background: #1d449a;   }
.industry-area .img-box .industry1 { background-image: url('../../images/industry-01.png'); transition: all 1s;}
.industry-area .img-box .industry2 { background-image: url('../../images/industry-02.png'); transition: all 1s;}
.industry-area .img-box .industry3 { background-image: url('../../images/industry-03.png'); transition: all 1s;}
.industry-area .img-box .industry4 { background-image: url('../../images/industry-04.png'); transition: all 1s;}
.industry-area .img-box .industry5 { background-image: url('../../images/industry-05.png'); transition: all 1s;}


.industry-area .img-box ul:hover { background: #1d449a; transition: all 1s;  }
.industry-area .img-box ul:hover li:first-child { opacity: 1; transition: all 1s;}
.industry-area .img-box ul:hover li:nth-child(3) { opacity: 1; transition: all 1s;}


.industry-area .img-box ul li{ float:none;   text-align: center; color:#fff;   }
.industry-area .img-box ul li:first-child { background-image: url('../../images/industry-mark.png');  padding:10px; margin:50px 10px 10px;  background-size: contain; opacity: 0;}
.industry-area .img-box ul li:nth-child(2) { font-size:1.1em; margin-bottom:30px; font-weight:400;  }
.industry-area .img-box ul li:nth-child(3) { font-size:.85em; opacity: 0;}
.industry-area  a { display: block;}



@media only screen  and (max-width:980px){   
}

@media only screen  and (max-width:640px){    
    .industry-area .img-box { flex-wrap:wrap; justify-content: center;  }
    .industry-area .img-box ul { flex-basis:46%; max-width:46%; margin:2%; border-radius: 50px; border:1px solid #aeaeae; padding: 2% 2% 5%; transition: all 1s; background: #1d449a;   }
    
    .industry-area  a { display: none;}
}


@media only screen  and (max-width:480px){   

}















.client-area { }

.client-area .txt-box { width:40%; float:left; }
.client-area .txt-box > span { width:100%; max-width:400px; display: block;}
.client-area .txt-box > div { width:100%; max-width:400px; display: flex; flex-wrap:wrap; margin-top:50px; } 
.client-area .txt-box > div a { flex-basis:45%; padding:2% 5%; margin: 0 2.5% 2.5% 0; border:1px solid #aeaeae;  transition: all .2s;}

.client-area .txt-box a:hover { background-color: #1d449a; color:#fff; transition: all .2s; }
.client-area .txt-box > div a p { display: inline-block; font-size:.9em;}

.client-area .img-box { width:60%; margin-top:20px;  display: flex; flex-wrap:wrap;  }
.client-area .img-box a { flex:1; flex-basis:25%; padding:6%; border:1px solid #aeaeae; border-right:0px; border-bottom:0px; background-size: 70%;}
.client-area .img-box a:nth-child(n+5) { border-bottom:1px solid #aeaeae; }
.client-area .img-box a:nth-child(4n) { border-right:1px solid #aeaeae; }
.client-area .img-box .client1 { background-image: url('../../images/client-01.png');}
.client-area .img-box .client2 { background-image: url('../../images/client-02.png');}
.client-area .img-box .client3 { background-image: url('../../images/client-03.png');}
.client-area .img-box .client4 { background-image: url('../../images/client-04.png');}
.client-area .img-box .client5 { background-image: url('../../images/client-05.png');}
.client-area .img-box .client6 { background-image: url('../../images/client-06.png');}
.client-area .img-box .client7 { background-image: url('../../images/client-07.png');}
.client-area .img-box .client8 { background-image: url('../../images/client-08.png');}

.btnRight { position:relative; width:30px; height:30px; float:right;}
.btnRight span:first-child { width:10px; height:10px; border:solid; border-width:1px 1px 0 0;  display: block; border-color:#aeaeae; position: absolute; right:0; top:35.5%; transform: rotate(45deg);  }
.btnRight span:last-child { width:30px; height:1px; background-color: #aeaeae; position: absolute; top:50%; }
 


@media only screen  and (max-width:980px){  
    
}

@media only screen  and (max-width:640px){    
    .client-area .img-box { width:100%;   }
    .client-area .txt-box { width:100%; margin-bottom:50px;  }
    .client-area .txt-box > div { width:100%;  }
    .client-area .txt-box > div a { flex-basis:45%; padding:2% 5%; margin: 0 2.5% 2.5% 0; line-height: 3em;  }
} 

@media only screen  and (max-width:480px){  

}










footer { background-color: #111; color:#fff; font-size:.85em; }
footer section { padding:2% 0!important; display: flex;}
footer section div { flex:1; }
footer section .ci-box { width:10%; min-width:130px; max-width:180px;  }
footer section .ci-box a {background-image: url('../../images/ci.png'); background-size:100%; padding-bottom:50px; display: block; }
footer section .ad-box { padding:0 5%; font-size:.9em; line-height:1.8em;}
footer section .sn-box { flex-basis:230px; max-width:230px; width:100%; }
footer section .sn-box a { width:22%; display: block; float:left;  padding-bottom:15%; background-size: contain;}
footer section .sn-box .facebook { background-image: url('../../images/facebook.png'); }
footer section .sn-box .linkedin { background-image: url('../../images/linkedin.png'); }
footer section .sn-box .instagram { background-image: url('../../images/instagram.png'); }
footer section .sn-box .youtube { background-image: url('../../images/youtube.png'); }


@media only screen  and (max-width:980px){  
    
}

@media only screen  and (max-width:640px){   
    footer section .ci-box { min-width:150px;  }
    footer section { flex-direction: column;}
    footer section div { padding:3% 5%; }
    footer section .sn-box { flex-basis:100%; margin-top:10px;  }
}


@media only screen  and (max-width:480px){  

}




.overlay { height: 0%; width: 100%; position: fixed; z-index: 999999;
top: 0; left: 0; background:linear-gradient( to bottom,#111 60%, rgba(000,000,000,.9));  overflow-y: hidden; transition: 0.5s; }

.overlay-content {position: relative; width: 100%; height:100%;}
 

.overlay a:hover, .overlay a:focus {color: #f1f1f1;}
 

.overlay .logo { width:110px; position: absolute; left:0; top:5px; }
.overlay .logo a { background-image: url('../../images/logo_act.gif'); background-size: 84%; display: block; padding:34px; margin-top:4px; } 

.overlay_lnb { display: flex; height:100%; }
.overlay_lnb ul { flex:1; border-right:1px solid rgba(255, 255, 255, .1);  color: #fff; margin-top:10%; padding:3% 3% 3% 6%;  }
.overlay_lnb ul a { font-size:.9rem;  display: block; padding-top:15px; }
.overlay_lnb ul a::before { content: '-'; margin:0 5px;}
.overlay_lnb ul li:first-child { font-size:1.6em;   }
.overlay_lnb ul li div { margin-top:10px;}
.overlay_lnb ul li div > a:hover { color:#0068dd; transition:all .2s; }
.overlay_lnb ul li span { display: inline-block; width:5px;height:5px; background-color: #fff; border-radius: 50%; margin-left:6px;}
.overlay_lnb ul:last-child { border-right:0px; }
.overlay_lnb .overlay_lnb_box { margin-bottom:10px; }
.overlay_lnb .overlay_lnb_box a { margin:0; padding:5px; font-size:.48em; text-indent:5px;  transition:all .2s; opacity: .8; }
.overlay_lnb .overlay_lnb_box a:hover { color:#0068dd; text-indent:10px; transition:all .2s; }
.overlay_lnb .overlay_lnb_box a::before { content: '';   margin:0 5px;}

.overlay  section { position: relative;}
.overlay .btn_open { position:absolute; right:0; top:43px;}
.overlay .btn_open a {  display: block; position: relative; width:17px; height:17px; cursor: pointer;}
.overlay .btn_open span { width:5px; height:5px; border-radius: 50px;; display: block; background-color: #fff;  position:absolute; }
.overlay .btn_open span:nth-child(1) { top:0; left:0; background-color: #0068dd;}
.overlay .btn_open span:nth-child(2) { top:0; right:0;}
.overlay .btn_open span:nth-child(3) { bottom:0; left:0;}
.overlay .btn_open span:nth-child(4) { bottom:0; right:0;}



@media screen and (max-height: 450px) {
    .overlay {overflow-y: auto;} 
}