@charset="utf-8";


/* 서브 비주얼 */
.wrapper .sub_visual section {  padding:15% 2% 10% 2%; text-align: center; }
.wrapper .sub_visual section p:first-child { font-size:2.2em; font-weight:500; color: #fff; text-shadow: 1px 1px 10px #111; }
.wrapper .sub_visual section span { width:50px; height:2px; background-color: #fff; display: block; margin:15px auto; }
.wrapper .sub_visual section p:last-child {  font-size:1em; font-weight:400; color: #fff; text-shadow: 1px 1px 10px #111; }

.about_wrapper .sub_visual div { background-image: url('../../images/a-sub-visual.jpg'); }
.products_wrapper .sub_visual div { background-image: url('../../images/b-sub-visual.jpg'); }
.customer_wrapper .sub_visual div { background-image: url('../../images/c-sub-visual.jpg'); }
.sub_visual div { width:100%; position: absolute; top:0; background-size: auto; z-index: -1; height:600px;

animation-name: scalein;
animation-duration: 3s; 
animation-timing-function: ease;
}

@keyframes scalein {
0% {  transform:scale(1.1, 1.1); }
100% { transform:scale(1,1); }
}




/* 서브 메뉴 */
.sub_menu { border-bottom:1px solid #ddd; }
.sub_menu section { padding:0; display: flex; flex-wrap:wrap; justify-content: center; align-items: center; }
.sub_menu section a { flex:1;  text-align: center; padding:1.5%; font-weight:400; font-size:1.1em; transition: all .3s; } 
.sub_menu section a:hover { background-color: #eaeff1; transition: all .3s;}

 


@media only screen  and (max-width:1400px){    
    section { padding-left:2%!important; padding-right:2%!important;}
}

@media only screen  and (max-width:680px){    
    .wrapper .sub_visual section {  padding:130px 2% 70px 2%;   } 
    .wrapper .sub_visual section p:last-child {  font-size:1em; font-weight:400; }
    .a03 span.ver_bar { left:30px;  }
    .sub_banner p:first-child { font-size:1.5em;   }
    .sub_banner p:nth-child(2) { font-size:1.1em; }
    .sub_banner section { padding:16% 2% 6%; }

    .sub_menu {   }
    .sub_menu section a {  padding:2.5%;  }  
 
}

@media only screen  and (max-width:480px){   
    .sub_menu section a span {display: block; font-weight:400; }
    
}



/********* 회사소개 *********/
/* about_wrapper */
.about_wrapper .contents section { padding: 8em 0;}
.about_wrapper .contents section:first-child { text-align: center; }
.about_wrapper .contents section:first-child p { max-width:800px; margin:0 auto; margin-top:20px; line-height:1.8em; }
@media only screen and (max-width:480px){  
    .about_wrapper .contents section:first-child { padding:4em 0 8em 0;} 
}

/* about > greeting */
/* area01 */
.greeting { text-align: center;}
.greeting > div { position:relative;  }
.greeting .bg-box { width:100%; height:30%; position:absolute; bottom:5%; background-color: #efefef; z-index:-1;}
.greeting .bg-typ { background-image: url('../../images/typo-ol.png'); position:absolute; top:0%; width:100%; padding-bottom:10%; background-repeat: no-repeat; background-size: 80%;  }

.a01-area01 h4 { margin-top:50px; color:#2855a5;} 
.a01-area01 p {  display: block; margin:15px auto 0;}
.a01-network { margin-top:50px; background-image: url('../../images/a01-network.jpg'); background-size: 100%; padding-bottom:40%; }
.a01-area02 ul { margin-bottom:3%; overflow: hidden; }
.a01-area02 span { max-width:1000px; margin:0 auto; display: block;}
.a01-area02 ul li { width:31%; margin:1%; padding-bottom:20%;  }
.a01-area02 ul li:first-child { background-image: url('../../images/a01-1.jpg');}
.a01-area02 ul li:nth-child(2) { background-image: url('../../images/a01-2.jpg');}
.a01-area02 ul li:nth-child(3) { background-image: url('../../images/a01-3.jpg');}

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

}

@media only screen and (max-width:680px){  
    .greeting .bg-box { height:20%; }
}

@media only screen and (max-width:480px){   
    .a01-area01 { padding-top:4em!important; padding-bottom:8em!important;} 
}

 


/* about > history */
.a03-area01 { position: relative; }
.box-wrap { overflow: hidden; margin:2% auto 8%; } 
.box-wrap > div {  float:left; width:49.2%; }
.box-wrap > div ul li { float:none; text-align: left; }
.box-wrap .img-box { padding-right:70px; }
.box-wrap .img-box div { max-width:100%;  margin:10px 0 0; padding-bottom:60%; }
.box-wrap .txt-box { }
.box-wrap .txt-box ul li { margin:2% 0 6%; background-image: url('../../images/dot.png'); background-position: left 5px; background-size:80px; padding-left:90px; font-weight:400; font-size:1.1em; }
.box-wrap .txt-box ul li span { margin-top:8px;   display: block; font-size:.9em;}


.box-wrap1 .img-box div { background-image: url('../../images/a03-01.jpg');}
.box-wrap2 .img-box div:first-child { background-image: url('../../images/a03-02.jpg');}
.box-wrap2 .img-box div:last-child { background-image: url('../../images/a03-03.jpg');}

@media only screen and (max-width:680px){  
    .box-wrap > div {  float:left; width:100%; padding-left:12px; }
    .box-wrap .txt-box { padding-top:0px; }
    .box-wrap .txt-box ul li { background-size: 60px;  padding-left:70px;}
    .box-wrap .txt-box ul li span {  background-size:12px;   }
    .box-wrap .img-box { padding:0 10px;  }
    .box-wrap .img-box p { text-align: left; }
}


 

/* about > direction */
.direction iframe { width:100%; height:500px; display: block; margin:0 auto;} 
.a05-area01 { padding-bottom:5%!important;}

.a05-area02 { border:1px solid #ddd; overflow: hidden; padding:0!important; margin-bottom:70px; }

.a05-area02 ul {display: flex; flex-wrap:wrap; text-align: center;}
.a05-area02 ul li { flex:1;  padding:8% 3% 3%; background-size:30px; background-position: center 35%;   flex-basis:33%; } 
.a05-area02 ul li:first-child { background-image: url('../../images/i-add.png'); flex-basis:100%; border-bottom:1px solid #ddd;   }
.a05-area02 ul li:nth-child(2) { background-image: url('../../images/i-tel.png'); }
.a05-area02 ul li:nth-child(3) { background-image: url('../../images/i-fax.png'); border-left:1px solid #ddd; border-right:1px solid #ddd;     }
.a05-area02 ul li:nth-child(4) { background-image: url('../../images/i-www2.png');  }
.a05-area02 ul li span { display: block; font-weight:400; color:#6988c0; }

@media only screen and (max-width:680px){    
    .direction iframe { height:300px; }
    .a05-area02 ul li { padding:10% 3% 3%;  background-position: center 25%; background-size:20px;  } 
    
}
@media only screen and (max-width:430px){    
    .a05-area02 ul li:nth-child(4) { border-top:1px solid #ddd;  }
    
}






/***********************  products ***********************/
.products_wrapper h2 { font-weight:700; font-size:3.8em; font-family: 'Titillium Web'; }
.products_wrapper h3 { font-weight:600; font-size:2.1em; text-transform: uppercase; font-family: 'Titillium Web';}
.products_wrapper h4 { text-transform: uppercase; margin-bottom:20px; font-weight:500; }
.products_wrapper .contents section { padding:5em 0; }

.list_wrapper .area-summ .txt-box h3 { text-align: center;}
.list_wrapper .area-summ .txt-box span { width:50px; height:2px; background-color:#2855a5; display: block; margin:10px auto 20px; }

@media only screen  and (max-width:480px){  
    .products_wrapper h2 {  font-size:3.5em; }  
}


/* 리스트 */


.list-box { display: flex; flex-wrap:wrap; justify-content: center;  }
.list-box a {flex:1; flex-basis:46%; max-width:46%; margin:2% 2% 5%;  text-align: center; transition: all .3s;  }
.list-box a p { font-weight:600; font-size:1.1em;  font-family: 'Titillium Web'; } 
.list-box a span { font-weight:400; font-size:.9em; color:#2855a5; opacity: .7; }
.list-box a div { border:1px solid #ddd; margin-bottom:20px;}
.list-box a div img { width:80%; margin:0 auto; display: block;}

.list-box a:hover div { border:1px solid #2855a5; background-color: #fcfcfc; transition: all .3s; }




/* 개요 */
.area-summ-wrap { position: relative; overflow: hidden;}
.text-cir { background-image: url('../../images/text-circle.png'); width:30%; max-width:200px; height:200px; background-size: 100%;  position:absolute; right:5%; bottom:3%; z-index: 99; 

    animation-name: rollin;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
 }
 
@keyframes rollin {
	0% {  transform:rotate(0deg); }
	100% { transform:rotate(360deg); }
}


.back-bar { width:100%; height:30%; background-color: #eee; position: absolute; bottom:15%; }
.area-summ {  margin-bottom:30px; padding-bottom:0px!important; }
.area-summ > div { }
.area-summ .img-box { padding:0 0 20px 0;  } 
.area-summ .img-box div { background-size: contain; height:600px; background-position: center top;}


.p0101 .area-summ .p-a { background-image: url('../../images/p0101a.png'); }
.p0101 .area-summ .p-b { background-image: url('../../images/p0101b.png'); }
.p0102 .area-summ .p-a { background-image: url('../../images/p0102a.png'); }
.p0102 .area-summ .p-b { background-image: url('../../images/p0102b.png'); }
.p0103 .area-summ .p-a { background-image: url('../../images/p0103a.png'); }
.p0103 .area-summ .p-b { background-image: url('../../images/p0103b.png'); }
.p0104 .area-summ .p-a { background-image: url('../../images/p0104a.png'); }
.p0104 .area-summ .p-b { background-image: url('../../images/p0104b.png'); }
.p0105 .area-summ .p-a { background-image: url('../../images/p0105a.png'); }
.p0106 .area-summ .p-a { background-image: url('../../images/p0106a.png'); }

.p0201 .area-summ .p-a { background-image: url('../../images/p0201a.png'); }
.p0201 .area-summ .p-b { background-image: url('../../images/p0201b.png'); }

.p0301 .area-summ .p-a { background-image: url('../../images/p0301a.png'); }
.p0301 .area-summ .p-b { background-image: url('../../images/p0301b.png'); }
 
/*.area-summ .txt-box span { width:30px; height:4px; background-color: #dad9d9; display: block;}
*/ 

.area-summ .txt-box p {  }
.area-summ .txt-box p span { line-height:1.6em; display: block; margin-bottom:10px;  }
 

/* 슬라이드 버튼 */
.area-summ .slick-dots { position: absolute; bottom:0%; left:50%; transform: translate(-50%,-50%); z-index: 99; }
.area-summ .slick-dots li { margin:5px; }
.area-summ .slick-dots li button { font-size:0em; width:13px; height:13px; border: 3px solid #ddd; background-color: #ddd; border-radius: 50%;  }
.area-summ .slick-dots li.slick-active button {font-size:0em; width:13px; height:13px;  border: 1px solid #2855a5; background-color: #2855a5; border-radius: 50%;}



@media only screen  and (max-width:690px){   
    .area-summ div { width:100%;}
    .area-summ .img-box { height:300px; width:100%; } 
    .area-summ .txt-box { padding:5% 0%; width:100%;}  
}
@media only screen  and (max-width:480px){  
    .area-summ .slick-dots { bottom:10%; }   
}


/* 특성 */
.area-feat { overflow: hidden;}
.area-feat ul li { float:none; line-height:2em; margin-bottom:10px;  background-image: url('../../images/check.png'); background-size: 20px; background-position: 5px 5px; padding-left:35px; } 
.area-feat ul li b { display: block; font-weight:500; }


/* 사양표 */
.area-spec { background-color: #f8f8f8;}
.area-spec span { margin:20px auto 0; display: block; font-size:.85em; font-weight:400; color:#2855a5; }
table { border-collapse: collapse; width:100%; border-spacing: 0;  font-size:.9em; }
th, td { text-align: left; padding: 10px 3px;   }
th { font-weight:500;}
thead {  background-color: #2855a5; color:#fff; border: 1px solid #cdcdcd; }
thead th { text-align: center; border: 1px solid #cdcdcd;} 
tbody th, td { background-color: #fff; border: 1px solid #494949;  }
tbody th { border-left:0px;  } 
tbody td  {  padding-left: 3%; }
tbody td:first-child { background-color: #f1f1f1; font-weight:400; }

@media only screen  and (max-width:480px){    
    table { font-size:.95em; } 
}


.area-half { overflow: hidden;  display: flex; flex-wrap:wrap; border-top:1px solid #ddd; border-bottom:1px solid #ddd; }
.area-half section { max-width:50%;}
.area-half section > div { max-width:600px; padding:2% 2% 2% 0; }
.area-half section  div b { font-weight:400; }
.area-half section:first-child { border-right:1px solid #ddd;}
.area-half section:first-child > div { float:right;}
.area-half section:last-child  > div { padding:2% 2% 0 2%;}
.area-half section h4 { color:#2855a5; }
.area-half section h4 span { font-size:.6em; text-transform: capitalize; }
.area-half section ul { margin-top:20px; display: flex;  }
.area-half section ul li { flex:1; max-width:24%; margin-right:1%; border:1px solid #ddd;  }
.area-half section ul li img {width:100%; }


@media only screen  and (max-width:680px){    
    .area-half section { max-width:100%;}
    .area-half section > div { padding:2% ; }
    .area-half section:first-child { border-right:0px solid #ddd; border-bottom:1px solid #ddd;  }
    .area-half section:last-child  > div { padding:2%;}
}









/* 적용분야 */ 
.area-appl ul { display: flex; flex-wrap:wrap; }
.area-appl ul li { flex:1; border:1px solid #ddd; flex-basis:14%; max-width:32%; margin:.5%; }
.area-appl ul li img { width:100%; margin:0 auto; display: block; }
.area-appl div { margin-top:20px; }
.area-appl div p { display: block; margin-bottom:15px;  background-image: url('../../images/check.png'); background-size: 20px; background-position: 5px 5px; padding-left:30px; } 

@media only screen  and (max-width:480px){   
    .area-appl ul li {  flex-basis:32%;}
}
 



/* 레이아웃 */ 
.area-rayo { border-top:1px solid #ddd; background-color: #111; } 
.area-rayo h4 { color:#fff; }
.area-rayo ul { display: flex;  justify-content: space-between; }
.area-rayo ul li { flex:1; max-width:48%; }
.area-rayo ul li img { width:90%; margin:30px auto 0; display: block;  }

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

 







.customer_wrapper .area-summ h2 { text-align: center; font-size:2.3em; }

/* 
.notice_wrap { padding-top:1%!important; }
.notice_wrap a { display: flex; text-align: center;  padding:12px 0;  font-size:.9em; transition: all .3s; }
.notice_wrap a span { min-width:110px; }
.notice_wrap a span:first-child { flex:1; }
.notice_wrap a span:nth-child(2) { flex:6;  text-align: left;}
.notice_wrap a span:nth-child(3) { flex:1; }
.notice_wrap a span:nth-child(4) { flex:1; } 
.notice_wrap a span:nth-child(5) { flex:1;background-image: url('../../images/pdf.png'); background-size: 20px 20px;  }

.notice_wrap a:nth-child(odd) {background-color: #f7f7f7; }
.notice_wrap a:first-child { border-top:1px solid rgb(46, 46, 46);  border-bottom:1px solid rgb(46, 46, 46);   padding:15px 0; background-color: #fff;  }

.notice_wrap a:first-child span { font-weight:400; }
.notice_wrap a:first-child span:nth-child(5) { background-image: none;}
.notice_wrap a:first-child span:nth-child(2) { text-align: center; } 

.notice_wrap a.anser { border-top: 1px dashed #00224b; border-bottom: 1px dashed #00224b;  }
.notice_wrap a.anser span:first-child  { opacity: 0;  }
.notice_wrap a.anser span:nth-child(2) { text-align: left; background-image: url('../../images/check3.png'); background-size: 15px;   margin:0 auto; background-position: 30px center; padding-left:55px;  }

@media only screen  and (max-width:890px){   
    .notice_wrap a span { min-width:75px; }
}
 
@media only screen  and (max-width:480px){   
    .notice_wrap a span { min-width:50px; }
}
 


.notice_in { padding-top:3%!important; padding-bottom:0%!important;  ; }
.notice_in a { background-color: #f7f7f7!important;}
.notice_in a span:first-child { flex:8 ; text-indent: 15%; }
.notice_in a span:last-child { flex:1 ;}

.notice_in div {  font-size:.9em; line-height:2em;   }
.notice_in div.write_in {  padding:5% 2%;  }
.notice_in div.anser_in {  padding:3% 2%; background-color: #f7f7f7; border-top:1px dashed #ddd;  }

a.notice_btn { text-align: center; width:8%; margin:40px  auto!important; display: block ; border:none; background-color: #00224b!important; color:#fff;  min-width:100px!important; padding:.5%!important; transition: all .3s;  }
a.notice_btn:hover {  background-color: #333!important;  transition: all .3s;  }

 */