@charset="utf-8";

/* 
transform: translate(-50%, -50%);  
971420
*/ 

#sub_wrap .footer { position: fixed; bottom:0; }
#sub { margin-top:80px; }
#sub .contents>div { overflow: hidden;}
/************ visual */
.visual { position: relative; padding:8% 2%; letter-spacing: -.5px;  color:#fff; background-size: cover;} 
.visual h2 { font-size:2.5em;   font-weight:500; text-align: center; }
.visual p {  text-align: center; }
.visual span {  display: block; width:1px; height:30px; margin:15px auto; background-color: #fff;}

 
.contents { margin-top:100px; margin-bottom:150px; overflow: hidden;} 

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

    #sub { margin-top:70px; }
    .contents { margin-top:40px;  margin-bottom:30px; }
    .visual p { font-size:1.3em;   }

}

@media only screen  and (max-width:480px){   
    .visual h2 { font-size:1.8em;  }
    .visual p { font-size:1em; }
    .visual span {   height:15px; }

}



/* 서브 비주얼 */
.sub_visual_wrap { overflow: hidden; position: relative;  }
.sub_visual {  animation: scalemove 2s ease-in-out forwards;  padding:25% 0% 0;  } 
.sub_visual_wrap  p { position:absolute; top:60%;  display: inline; font-size:2.5em; z-index: 9; color:#fff; }
.sub_visual_wrap  p::before {font-weight:500; text-transform: uppercase; }

#about .sub_visual { background-image: url('../../images/about-visual.jpg');  }
#product .sub_visual { background-image: url('../../images/product-visual.jpg');  }
#contact .sub_visual { background-image: url('../../images/contact-visual.jpg');  }
#contact .contents { margin-bottom:0px; }

  @keyframes scalemove {
    0%   { transform: scale(1); }
    100% { transform: scale(1.05); } 
  }
   


#about .sub_visual_wrap p::before { content: "关于我们"; }  
#product .sub_visual_wrap p::before { content: "产品"; } 
#contact .sub_visual_wrap p::before { content: "联系人"; } 




@media only screen  and (max-width:1280px){   
  .sub_visual_wrap  p {  font-size:1.8em; }
  .sub_visual {  padding:160px 0% ;  }

}

@media only screen  and (max-width:800px){   
  .sub_visual {  padding:130px 0% ;  } 

}






.title { padding:8%; background-color: #0a4194;   }
.title section  {  font-size:2.2em; font-weight:600; color:#fff; text-transform: uppercase;  }

.tit { font-weight:700; color:#0a4194; font-size:2.2em; max-width:1300px; margin:20px auto; width:100%; text-align: center; } 
.tit span { width:50px; height:1px; background-color: #0a4194; display: block; margin:20px auto;}


#tab { width:100%; border-bottom:1px solid #ddd;  border-top:1px solid #ddd; background-color: #fff; z-index: 2; font-size:.95em; border-top:0px; }
#tab section  { display: flex; padding: 0 !important; align-items: center;}
#tab section a { flex:1; text-align: center; padding:1.5%; border-left:1px solid #ddd; transition: all .2s; }
#tab section a:last-child { border-right:1px solid #ddd;  }
#tab section a:hover { background-color: #e7e7e7; transition: all .2s; }

@media only screen  and (max-width:800px){   
  .tit  {  font-size:1.8em;}
  #tab { display: none;}

}



/* about */
.a01_wrap .contents h3 { text-align: center; font-weight:500; font-size:1.8em; margin-bottom:30px;  }
/* greeting-a01 */
.a01 div { width:50%; float:left; padding:2%;   }
.a01 div.tx b { color:#0a4194; }
.a01 div.im { background-image: url('../../images/a01.jpg'); background-size: cover; padding:13%; background-position: center;}

@media only screen  and (max-width:800px){    
  .a01_wrap .contents h3 { font-size:1.3em; }
  .a01 div { width:100%; }
  .a01 div.im {  padding:20%; }


}



/* vsion-a02 */
.a02_wrap .contents { margin-bottom:0; }
.a02 div { margin-bottom:50px; }
.a02 .box1 { width:80%; max-width:800px; margin:0 auto; text-align: center;}
.a02 .box2 { width:80%; max-width:1000px; margin:50px auto 0 ; border:1px solid #ddd;   display: flex; flex-direction: row; flex-wrap:wrap;}
.a02 .box2 ul { flex-basis:100%; padding:5% 2%;  border-bottom:1px solid #ddd;   }
.a02 .box2 ul:nth-child(3) { border-bottom:0px;}
.a02 .box2 ul li p { display: block; margin-top:15px;}
.a02 .box2 ul li b { display: inline-block; font-weight:500; font-size:1.2em; text-transform: uppercase; position: relative; } 
.a02 .box2 ul li b span { width:100%; height:15px; position:absolute; bottom:0px; left:0;  background-color: #0a41941e; display: inline-block; z-index:-1; }
.a02 .box2 ul li { padding:2%; }
.a02 .box2 ul li:first-child { width:30%; padding-bottom:10%; margin-top:3%; background-size: contain; background-position: center center; }
.a02 .box2 ul li:last-child { width:70%; }
.a02 .box2 ul:first-child li.im { background-image: url('../../images/a02-1.png'); }
.a02 .box2 ul:nth-child(2) li.im { background-image: url('../../images/a02-2.png'); }
.a02 .box2 ul:nth-child(3) li.im { background-image: url('../../images/a02-3.png'); }
.a02-link { text-align: center; background-image: url('../../images/a02-4.jpg'); background-size: cover; padding:7% 1%; color:#fff; margin-top:120px;}
.a02-link a { border-radius: 25px; border:1px solid #fff; background-color: rgba(255, 255, 255, .3); display: inline-block; color:#fff; margin:20px auto; padding:10px 40px; }

@media only screen  and (max-width:800px){    
  .a02 .box1 { width:100%; }
  .a02 .box2 { width:100%; }
  .a02 .box2 ul { padding:10% 2%;}
  .a02 .box2 ul li {  text-align: center;  } 
  .a02 .box2 ul li:first-child { width:100%; padding:10%; }
  .a02 .box2 ul li:last-child { width:100%; }

  .a02-link h3 { font-size:1.5em; }
  .a02-link a {  margin:15px auto; padding:8px 30px; }
}




/* History */
.a03 img { width:100%;  }
.his_wrap  { position: relative; width:100%; } 
.his_wrap .his_bar { width:100%; display: block; position: absolute; top:80px; left:0; height:1px; background-color: #0a4194; z-index: -1;}
.his_wrap ul { display: flex; flex-wrap: wrap;}
.his_wrap ul li { flex:1; padding:2%;  }
.his_wrap ul li div { background-color: #0a4194; color:#fff; padding:3%; font-weight:500; display: block;  font-size:1.2em; text-align: center; width:100px; height:100px; line-height:80px; margin:0 auto; border-radius: 50%;}
.his_wrap ul li span { display: block; width:1px; height:30px; background-color: #0a4194; margin:0 auto;}
.his_wrap ul li p { text-indent: -10px; padding-left:10px; padding-bottom:10px;}
.his_wrap ul li p::before { content: '·'; margin-right:5px; }

@media only screen  and (max-width:800px){    
  .a03 img { width:100%; margin-bottom:20px;  }
  .his_wrap ul li { flex:1; flex-basis:100%; margin-bottom:20px;  }
  .his_wrap .his_bar { top:60px; }
  .his_wrap ul li p { border-radius: 25px; border:1px solid #ddd; margin-bottom:5px; padding:10px 10px 10px 20px;  text-indent: 0px;}
  .his_wrap ul li p:nth-child(even) { background-color: #f9f9f9;}
  .his_wrap ul li p::before { content: ''; }
}





/* CI cuide */
.a04 { }
.a04 .box1 { text-align: center; overflow: hidden;}
.a04 .box1 img { width:100%; max-width:1300px; border:1px solid #ddd; display: block; margin:0 0 30px; }
.a04 .box1 b { font-weight:400; color: #333; display: block; margin:0 auto 10px;}

.a04 .box2 { margin-top:100px; overflow: hidden; }
.a04 .box2 li:first-child { margin-right:6%; }
.a04 .box2 li { width:47%; }
.a04 .box2 li b { display: block; border-left:5px solid #00b3f0; padding-left:10px; font-size:1.1em; } 
.a04 .box2 li img { width:100%; border:1px solid #ddd; display: block; margin:30px 0 30px; } 
.a04 .box2 li p { } 


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

}





/* Process */
.a05_wrap .contents { margin-bottom:0!important; }
.a05 .box1 { display: flex; flex-wrap:wrap; justify-content: center; align-items:center; } 
.a05 .box1 ul { flex:1; flex-basis:27%; max-width:27%;  text-align: center; padding:2%; text-align: center;}  
.a05 .box1 ul:nth-child(even) {  flex:.5; flex-basis:5%; max-width:5%; margin-left:2%; } 
.a05 .box1 ul:nth-child(even) li { width:100%; height:2px; background-color: #0a4194;} 
.a05 .box1 ul:nth-child(odd)  li:first-child {   margin:10px auto; }
.a05 .box1 ul li { text-align: center; float:none;  font-weight:400;}
.a05 .box1 ul li span { font-size:.85em; }
.a05 .box1 ul li img { margin:0 auto; display: block; width:50%; padding:10%;  border:1px solid #ddd; border-radius: 50%;}

.a05-a  { max-width:100%!important;   }
.a05-a img { display: block; float:left; width:33.3333%;}


@media only screen  and (max-width:800px){     
  .a05 .box1 ul li span { font-size:.75em; }

}







/* High Technology */
.a06_wrap .contents { margin-bottom:0!important; }
.a06 .box1 { text-align: center; max-width:800px; margin:0 auto; width:100%; }

.a06 .box2 {  overflow: hidden;  margin-top:50px; }
.a06 .box2 >ul { padding:2%; margin-bottom:50px; overflow: hidden;}
.a06 .box2 >ul:first-child { border-bottom:1px solid #ddd; overflow: hidden; }
.a06 .box2 >ul li { width:60%; float:left;  }
.a06 .box2 >ul li:first-child { width:40%;   }
.a06 .box2 >ul li:first-child img { width:100%;  }
.a06 .box2 >ul .type_abc { padding:2% 0 0;  margin-bottom:30px; }
.a06 .box2 >ul .type_abc > p { font-size:1.5em; font-weight:500; text-transform: uppercase; position:relative; display: inline; color:#0a4194;} 
.a06 .box2 >ul .type_abc > p span { position:absolute; left:0; background-color: #0a41941e; width:100%; height:15px; bottom:0; z-index:-1; }
.a06 .box2 >ul .type_abc ul li img { width:80%; display: block; margin:10% auto 0; }
.a06 .box2 >ul .type_abc ul li p { overflow: hidden; border-bottom:1px solid #ddd;}
.a06 .box2 >ul .type_abc ul li p:first-child { background-color: #0a4194; color:#fff; }
.a06 .box2 >ul .type_abc ul li p span { width:50%;display: block; float:left; padding:5px; font-size:.9em; }
.a06 .box2 >ul .type_abc ul li p span:first-child { border-right:1px solid #ddd; }

.a06-a  { max-width:100%!important; background-image:url('../../images/a06-bg.jpg'); background-size: cover; padding:5% 0; color:#fff;  }
.a06-a .tit { color:#fff; }
.a06-a .tit span { background-color:#fff; }
.a06-a .box3 { max-width:1000px; margin:0 auto;} 
.a06-a .box3 > p { font-size:1.5em; color:#fff; font-weight:500; text-align: center;}
.a06-a .box3 > ul { overflow: hidden; margin-top:30px;  } 
.a06-a .box3 > ul li { } 
.a06-a .box3 > ul li:first-child { width:15%; float:left; min-width:100px; margin-right:20px;  }
.a06-a .box3 > ul li img { width:80%; display: block; margin:0 auto;  border:2px solid #fff;  border-radius:50%; padding:10%; }  
.a06-a .box3 > ul li span { display: block; margin:3% 0 5px 0; font-weight:500; font-size:1.1em; } 


@media only screen  and (max-width:800px){    
  .a06 .box2 >ul {margin-bottom:80px; }
  .a06 .box2 >ul li { width:100%; float:none;  }
  .a06 .box2 >ul li:first-child { width:100%;   }
  .a06 .box2 >ul li:first-child img { width:90%; max-width: 600px;  display: block; margin:0 auto;  }

  .a06-a  { padding:8% 0 15%; }
  .a06-a .box3 > ul li { width:65%; } 
  .a06-a .box3 > ul li:first-child { width:15%; float:left; min-width:90px; margin-right:20px;  }
  .a06-a .box3 > ul li span { margin:0% 0 5px 0; }
}







.sticky {  position:fixed; top:81px; width:100%; }
@media only screen  and (max-width:1280px) { 
    .sticky {  position:fixed; top:70px; width:100%; }
}





 /* TABLE */
.table_wrap { padding:50px 0; }
table { margin:0; width:80%; border-collapse: collapse; text-align: center;  font-size:.9em; background-color: #fff;  border-top:2px solid #333; border-bottom:2px solid #333;  }
table td { border:1px solid #333; padding:1%;  }  
table tr:first-child td {font-weight:300; background-color: #333; color:#fff; border-right:1px solid #fff; }
table td:first-child { border-left:0px;  }  
table td:last-child { border-right:0px;  }  
table thead {  }


@media only screen  and (max-width:1280px) { 
    
} 
@media only screen  and (max-width:800px) { 
  table { margin:0; width:100%; } 
  table td { border:1px solid #333; padding:2% 1%;  } 
}



/* Product */
.products_list { max-width:1200px; margin:0 auto; display: flex;  flex-wrap:wrap;  justify-content: center; align-items: center;  }
.products_list > a { flex:1; flex-basis:30%; max-width:30%;  margin:1% 1% 5%;  border:1px solid #333; cursor: pointer;  }
.products_list > a img { width:100%; margin:50px auto; }

@media only screen  and (max-width:800px) {  
  .products_list > a {  flex-basis:48%; max-width:48%; margin:1% 1% 5%; } 
  .products_list > a img {  margin:15px auto; }
}


@media only screen  and (max-width:480px) {  
  .products_list > a { flex-basis:100%; max-width:100%; margin:0 0 30px; } 
  .products_list > a img {  margin:5px auto; }
}







.pl_tit { margin:10px; text-align: center;}
.pl_tit span {  }
.pl_tit p { font-size:2em; font-weight:600; text-transform: uppercase; }





.hilt_red { width: 15px; height:15px; display:block; margin:0 auto; background-color: #c8254a; border-radius: 50%; }
.hilt_red2 { width: 15px; height:15px; display:block; margin:0 auto; background-color: #e8340c; border-radius: 50%; }
.hilt_orange { width: 15px; height:15px; display:block; margin:0 auto; background-color: #ea5406; border-radius: 50%; }
.hilt_blue { width: 15px; height:15px; display:block; margin:0 auto; background-color: #0080cc; border-radius: 50%; }

.p_wrap .contents { margin:0;  }
.summ { background-color: #f9f9f9; overflow: hidden; padding:5% 0;  background-size: 40%; background-position-x: 80%; }
.summ section { display: flex; flex-wrap:wrap; }
.summ section div { flex:1; }
.summ section div.tx > span { display:block; width:80%; margin-bottom:20px;}

.summ section div.tx > span:nth-child(2) { font-weight:500; font-size:1.5em; }
.summ section div.tx > p { font-size:5em; font-weight:600; text-transform: uppercase;}
.summ section div.tx ul { display: flex; width:90%; max-width:360px; text-transform: capitalize; font-size:.8em; margin-top:50px; }
.summ section div.tx ul li { flex:1; margin-right:10px; }
.summ section div.tx ul li img { width:100%;  border:1px solid #333; background-color: #fff; box-shadow: 2px 2px 8px rgb(156, 156, 156); }

.summ section div.im { }
.summ section div.im img { width:100%;  }


@media only screen  and (max-width:800px) {
  .summ section div.im { padding:50px 0;}   
  .summ section div.im img { width:90%; margin:0 auto;}   
  .summ section div.tx > p { font-size:4em;}
  .summ section div.tx > span { width:100%; }
  .summ section div { flex-basis:100%; }
}




.caut { background-color: #12141a; color:#fff; overflow: hidden; padding:5% 0;}
.caut section > p { font-weight:500; font-size:2em; color:#00b3f0; text-transform: uppercase; margin-bottom:10px; }
.caut section > p span { width:30px;  }
.caut section > p span img { width:30px; margin-right:10px; }
.caut section ul li { float:none; padding:3px 0; }
.caut section ul li span {  width:10px; height:10px; margin-right:5px;  display: inline-block; background-color: #12141a; border:2px solid #ddd; }


/* Contact */
.c01_wrap .box1 { text-align: center; margin:
  30px 0;  } 
.c01_wrap .box2 { display: flex; flex-wrap:wrap; border:1px solid #ddd; margin-top:10px;   }
.c01_wrap .box2 li { flex:1; text-align: center; padding:3%;  border-right:1px solid #ddd; }
.c01_wrap .box2 li:nth-child(even) { background-color: #f9f9f9;}
.c01_wrap .box2 li:last-child { border-right:0px; }
.c01_wrap .box2 li img { display: block; width:30%; max-width:100px;  margin:0 auto; }
.c01_wrap .box2 li b { display: block; width:100%; margin-bottom:5px;}
.c01_wrap .map { width:100%; }  
.c01_wrap .map iframe { width:100%; height:700px; text-align: center;} 


@media only screen  and (max-width:480px) { 
  .c01_wrap .box2 li { padding:30px 3%;}
  .c01_wrap .box2 li b { display: inline; padding-right:10px; padding-top:30px; }
  .c01_wrap .box2 li img { width:15%; max-width:100px;  margin:0 5%; float:left; }
  .c01_wrap .box2 li { flex-basis:100%;  border-right:0px; text-align: left;   }
  .c01_wrap  .map { width:100%; } 
  .c01_wrap .map iframe { width:100%; height:500px;  text-align: center;} 
     
}