@charset="utf-8";

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

.about_wrapper .sub_visual { background-image: url('../image/sub/a-sub-visual.jpg'); }
.business_wrapper .sub_visual { background-image: url('../image/sub/b-sub-visual.jpg'); }
.rnd_wrapper .sub_visual { background-image: url('../image/sub/r-sub-visual.jpg'); }
.customer_wrapper .sub_visual { background-image: url('../image/sub/c-sub-visual.jpg'); }


/* 서브 메뉴 */
.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; flex-basis:20%; max-width:20%; text-align: center; padding:1.5%; font-weight:400; font-size:1.1em; } 


/* 서브 배너 */
.sub_banner { text-align: center; color:#fff;  }
.sub_banner section { padding:6% 2%; }
.sub_banner p:first-child { font-weight:500; font-size:2em;   }
.sub_banner p:nth-child(2) { font-weight:400; font-size:1.2em; margin:20px auto; line-height:1.5em;   }
.sub_banner a { display: block; background-color: rgba(000, 000, 000, .35); width:150px;  padding:10px 20px; margin:50px auto; color:#fff; font-size:.88em; letter-spacing: -1px;}

.about_wrapper .sub_banner { background-image: url('../image/sub_banner1.jpg'); }
.rnd_wrapper .sub_banner { background-image: url('../image/sub_banner2.jpg'); }


/* 콘텐츠 메뉴 */
.con_menu { display: flex; flex-wrap:wrap; align-items: center; justify-content: center; border-bottom:1px solid #ddd;}
section.con_menu { padding:13px 0;  }
.con_menu a { flex:1; max-width:20%;  text-align: center; letter-spacing: -1px; font-size:1em; } 



/* 콘텐츠 비주얼 */
.con_visual { padding:5%; margin-top:30px; }
.con_visual h1 { background-image: url('../image/logo-w.png'); padding:6%; margin-left:15px;}
.con_visual p { text-align: center; color:#fff; font-size:1.2em;  font-weight:400; margin-top:30px; }
.business_wrapper .con_visual h1, .business_wrapper .con_visual p { opacity:0; }
.b0301 .con_visual h1, .b0301 .con_visual p { opacity:1; }

.b0101 .con_visual { background-image: url('../image/sub/b0101-visual.jpg');}
.b0102 .con_visual { background-image: url('../image/sub/b0102-visual.jpg');}
.b0103 .con_visual { background-image: url('../image/sub/b0103-visual.jpg');}
.b0104 .con_visual { background-image: url('../image/sub/b0104-visual.jpg');}
.b0105 .con_visual { background-image: url('../image/sub/b0105-visual.jpg');}
.b0201 .con_visual { background-image: url('../image/sub/b0201-visual.jpg');}
.b0202 .con_visual { background-image: url('../image/sub/b0202-visual.jpg');}
.b0301 .con_visual { background-image: url('../image/sub/b0301-visual.jpg');}

/* 비주얼하단 도형 */
.figure_box { max-width:1200px; margin:0 auto; overflow: hidden; }
.figure_box span { float:right; width: 0; height: 0;  border-top: 25px solid #2054c8;  border-left: 400px solid transparent;
  }

/* 수직바 */
span.ver_bar { height:60px; width:1px; display: block;  position:absolute; left:50%;   }
span.anup { top:0; }
span.andw { bottom:0;  }
span.anwh { background-color: #fff; }
span.anbl { background-color: #000; }
.a03 span.ver_bar { height:100%; width:1px; display: block;  position:absolute; left:50%; top:0;  background-color: #ddd; z-index: -1; }


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

@media only screen  and (max-width:980px){   
    
}
@media only screen  and (max-width:680px){    
    .wrapper .sub_visual section {  padding:150px 2% 70px 2%;   } 
    .wrapper .sub_visual section p:last-child {  font-size:1.8em; font-weight:500; }
    .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 {  border-bottom:0px; }
    .sub_menu section a { flex-basis:100%; max-width:100%; padding:2.5%;  border-top:1px solid #ddd; transition: all .3s;} 
    .sub_menu section a:hover { background-color: #eaeff1; transition: all .3s;}
    .sub_menu section a:first-child { border-top:0px; } 

    .con_visual { margin-top:10px; }
    .con_menu { border-bottom:0px;}
    .con_menu a {   max-width:50%; flex-basis:50%; padding:2% 0; border:1px solid #ddd; box-sizing: border-box; } 
}




/********* 회사소개 *********/
/* 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 */
.a01-area01 h4 { margin-top:50px;} 
/* area02 */
.a01-area02 { text-align: center; background-image: url('../image/sub/a01-area02.jpg');}
.a01-area02 section { padding:8em 2em 12em!important;}
.a01-area02 span { color:#2858c2; font-size:2.2em; font-weight:500;}
.a01-area02 p { font-size:1.1em;  max-width:470px!important; line-height:1.6em!important; margin:20px auto;   color:#fff;}
/* area03 */
.a01-area03 ul {display: flex; justify-content: center; align-items: center; margin:50px auto; flex-wrap:wrap; }
.a01-area03 ul li { position: relative; flex:1; }
.a01-area03 ul li div { width:50%; padding-bottom:55%; margin:0 auto; background-size: 100%;}
.a01-area03 ul li p {text-align: center; width:70%; margin:0 auto; color:#2858c2; font-weight:500; }
.a01-area03 ul li:first-child div { background-image: url('../image/sub/a01-area03-01.png');  }
.a01-area03 ul li:nth-child(3), 
.a01-area03 ul li:nth-child(7) { background-color: #2858c2;  }
.a01-area03 ul li:nth-child(3) p, 
.a01-area03 ul li:nth-child(7) p { color:#fff; }
.a01-area03 ul li:nth-child(3) div { background-image: url('../image/sub/a01-area03-02.png');}
.a01-area03 ul li:nth-child(5) div { background-image: url('../image/sub/a01-area03-03.png');} 
.a01-area03 ul li:nth-child(7) div { background-image: url('../image/sub/a01-area03-04.png');}
.a01-area03 ul li:nth-child(odd) { flex:2; padding:20px 0; height:100%; border-radius: 50%; border:2px solid #2858c2}
.a01-area03 ul li:nth-child(even) { flex:1;}
.a01-area03 ul li:nth-child(even) span:first-child { width:7px; height:7px; background-color: #2858c2; display: block; border-radius: 50%; position: absolute; left:0px; top:-3px; ; }
.a01-area03 ul li:nth-child(even) span:nth-child(2) { display: block; background-color: #2858c2; width:100%; height:1px; }

/* area04 */
.a01-area04 { padding-top: 4em !important; }
.a01-area04 p { max-width:850px; text-align: center; font-weight:400;  margin:40px auto; line-height:1.8em; }
.a01-area04 ul { display: flex; flex-wrap: wrap;}
.a01-area04 ul li { flex:1;  justify-content: space-between; margin:.5%; }
.a01-area04 ul li span { font-weight:500; padding:10px 20px; border:2px solid #2858c2; color:#2858c2; border-radius: 25px; text-align: center; display: block; width:60%; margin:20px auto;}
.a01-area04 ul li div { padding:30%; }
.a01-area04 ul li:first-child div { background-image: url('../image/sub/a01-area04-01.jpg');}
.a01-area04 ul li:nth-child(2) div { background-image: url('../image/sub/a01-area04-02.jpg');}
.a01-area04 ul li:nth-child(3) div { background-image: url('../image/sub/a01-area04-03.jpg');}
.a01-area04 ul li:nth-child(4) div { background-image: url('../image/sub/a01-area04-04.jpg');}


@media only screen and (max-width:980px){ 
    .a01-area03 ul li div { width:50%; padding-bottom:45%; margin:0 auto; background-size: 100%;} 
}

@media only screen and (max-width:680px){ 
    .a01-area03 ul li { flex-basis:30%; max-width:30%;}   
    .a01-area03 ul li:nth-child(even) { flex:0.3;}
    .a01-area04 ul li { flex-basis:49%; }   
    
}

@media only screen and (max-width:480px){   
    .a01-area03 ul { margin:0 auto; }  
    .a01-area03 ul li p { width:60%; }
    .a01-area03 ul li:nth-child(odd) { flex-basis:33%; max-width:33%; margin:1%; }
    .a01-area03 ul li:nth-child(even) { display: none; }
    .a01-area04 ul li span { width:90%; border:1px solid #2858c2; padding:5px 10px; margin:10px auto;}
}
/* about > vision */
.a02-area-wrap {  background-image: url('../image/sub/a02-area02.jpg'); background-position: right bottom; background-size:80%; }
/* area01 */
.a02-area01 { background-color: #fff; overflow: hidden;  margin-bottom:7%;}
/* area02 */
.a02-area02 {  position:relative; }
.a02-area02 .txt-wrap {  color:#fff; width:50%; position:relative; padding:20px 20px 0 0; z-index: 1; }
.a02-area02 .txt-wrap > div { background-color: #2d3f5f; overflow: hidden;    }
.a02-area02 .txt-box { width:50%; float:right; padding:50px 20px;  }
.a02-area02 .txt-box > span { background-color:rgba(122, 137, 164, .6); display: block; width:40%; max-width:400px; height:250px; position:absolute; right:0%; top:0px; z-index: -1; }
.a02-area02 .txt-box p:first-child { font-size:1.6em; margin-bottom:30px;   }
.a02-area02 .txt-box p:last-child { line-height:1.8em; font-size:.95em; width:90%;}

@media only screen and (max-width:1200px){   
    .a02-area-wrap { background-size:100%;   }
    .a02-area02 .txt-wrap { width:60%; }
    .a02-area02 .txt-box { width:100%; }
    
}
@media only screen and (max-width:680px){  
    .a02-area-wrap { background-size:cover;  }
    .a02-area02 .txt-wrap {width:70%; background-position: center center;  }
    
    .a02-area02 .txt-box > span { height:250px; width:70%; }
    
}

/* area03 */
.a02-area03 { }
.a02-area03 .dig_wrap { overflow: hidden;  margin:5% auto 0; padding-top:5%; background-image: url('../image/sub/a02-area03-02.png'); background-position: center bottom; background-size: 50%; }
.a02-area03 .dig_wrap .img-box { margin-top:80px; position:relative; background-image: url('../image/sub/a02-area03-01.png'); padding-bottom:50%;  width:60%; background-size: contain; float:left }
.a02-area03 .dig_wrap .img-box span { font-size:1.2em;  position:absolute;  transform: translate(-50%, -50%); width:23%; text-align: center; font-weight:500; color:#fff; } 
.a02-area03 .dig_wrap .img-box span:first-child { top:25%; left:50.5%; }
.a02-area03 .dig_wrap .img-box span:nth-child(2) {top:57%; left:17%; color:#2054c8;}
.a02-area03 .dig_wrap .img-box span:nth-child(3) {top:57%;  left:83.5%; color:#2054c8;}
.a02-area03 .dig_wrap .img-box span:nth-child(4) { top:93%; left:50%;}

.a02-area03 .dig_wrap .txt-box { display: flex; flex-wrap:wrap; flex-direction: column; width:25%; float:right;}
.a02-area03 .dig_wrap .txt-box div { position: relative; margin-bottom:50px;}
.a02-area03 .dig_wrap .txt-box div  p { font-size:1.15em; font-weight:500; text-align: center; padding:5px; border:2px solid #2054c8;   border-radius: 25px; width:70%; position: absolute; top:1px; left:50%; transform: translate(-50%, -50%);  background-color: #fff;  }
.a02-area03 .dig_wrap .txt-box span { overflow: hidden; width:73%; height:50px; position: absolute; top:0; left:50%; transform: translate(-50%, -50%);  border-radius: 25px; text-align: center;  background-color: #aabde6; z-index: -1; } 
.a02-area03 .dig_wrap .txt-box ul { overflow: hidden; border-radius:25px; padding:40px 15px 10px; ; color:#fff; letter-spacing: -1px;}
.a02-area03 .dig_wrap .txt-box ul li { background-image: url('../image/check-w.png'); background-size: 15px; background-position: left 5px; padding-left:23px; margin:5px;  font-size:.95em; font-weight:500;}
.a02-area03 .dig_wrap .txt-box ul li:last-child { padding-bottom:30px; }
.a02-area03 .dig_wrap .txt-box div:nth-child(even) ul { background-color: #2054c8;}
.a02-area03 .dig_wrap .txt-box div:nth-child(odd) ul { background-color: #5b5b5b;}

@media only screen  and (max-width:1200px){   
    .a02-area03 .dig_wrap {  background-position: center 40%; background-size: 50%; } 
}
@media only screen  and (max-width:980px){   
    .a02-area03 .dig_wrap {margin:5% auto 0; padding-top:5%; background-image: url('../image/sub/a02-area03-02.png'); background-position: center 30%; background-size: 50%; }
    .a02-area03 .dig_wrap .img-box { width:50%; }
    .a02-area03 .dig_wrap .txt-box { width:30%;}
    
    .a02-area03 .dig_wrap .img-box span:first-child { top:27%; left:50.5%; }
    .a02-area03 .dig_wrap .img-box span:nth-child(2) {top:57%; left:14%; }
    .a02-area03 .dig_wrap .img-box span:nth-child(3) {top:57%;  left:86%; }
    .a02-area03 .dig_wrap .img-box span:nth-child(4) { top:89%; left:50%;}
}
@media only screen  and (max-width:680px){  
    .a02-area03 .dig_wrap { background-image: url('../image/sub/a02-area03-02-2.png'); background-position: center 20%; background-size: 80%; }
    .a02-area03 .dig_wrap .img-box  { width:90%; padding-bottom:80%; float:none;  margin:0px auto 50px;}
    .a02-area03 .dig_wrap .txt-box {  width:100%;  flex-direction: row; flex-wrap:wrap; justify-content: space-between; }
    .a02-area03 .dig_wrap .txt-box div { flex:1; flex-basis:45%; margin:1%; margin-bottom:50px; }
    .a02-area03 .dig_wrap .txt-box div ul { height:150px;}

    .a02-area03 .dig_wrap .img-box span { font-size:1em; }
    .a02-area03 .dig_wrap .img-box span:first-child { top:25%; left:50.5%; }
    .a02-area03 .dig_wrap .img-box span:nth-child(2) {top:58%; left:14%; }
    .a02-area03 .dig_wrap .img-box span:nth-child(3) {top:58%;  left:86%; }
    .a02-area03 .dig_wrap .img-box span:nth-child(4) { top:94%; left:50%;}

}





/* about > history */
.a03-area01 { position: relative; }
.box-wrap { overflow: hidden; margin-top:10%;}
.box-wrap1 {  margin-top:0%;}
.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 p { text-align: right; font-size:1.5em; font-weight:500; }
.box-wrap .img-box div { max-width:100%;  margin:10px 0 0; padding-bottom:60%; }
.box-wrap .txt-box { padding-top:40px; }
.box-wrap .txt-box ul li { margin-top:8%; background-image: url('../image/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:10px; background-image: url('../image/check-b.png'); background-position: left 5px; background-size:15px; padding-left:20px; display: block; font-size:.9em;}


.box-wrap1 .img-box div { background-image: url('../image/sub/a03-01.jpg');}
.box-wrap2 .img-box div { background-image: url('../image/sub/a03-02.jpg');}
.box-wrap3 .img-box div { background-image: url('../image/sub/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; padding-left:17px; }
    .box-wrap .img-box { padding:0 40px;  }
    .box-wrap .img-box p { text-align: left; }
}




/* about > certifi */ 
.a04-area02 { padding-top:0%!important;}
.a04-area02 > div > div { display: flex; align-items: center; overflow: hidden; margin:7% 0 1%;}
.a04-area02 > div > div p { flex:1; background-color: #9e9e9e; color:#fff; border-radius: 25px; text-align:center; padding:10px; margin-right:10px; font-size:1.2em; font-weight:400;}
.a04-area02 > div > div span { flex:5; background-color: #9e9e9e; height:1px; width:100%; }
.a04-area02 ul { display: flex; flex-wrap:wrap; }
.a04-area02 ul li { flex:1; margin:1%; }
.a04-area02 ul li div { max-width:100%; padding-bottom:150%; border:1px solid #2054c8;} 
.a04-area02 ul li p { margin:15px auto 0; font-weight:400; }
.a04-area02 .certifi_box { border-bottom:2px solid #eee;  padding-bottom:6%;}
.a04-area02 .certifi_box ul li p { width:85%;  text-align: center; border:2px solid #2054c8; border-radius: 25px; padding:5px; color:#2054c8; font-weight:400;}
.a04-area02 .certifi_box ul li:first-child div { background-image: url('../image/sub/a04-area01-01.jpg'); }
.a04-area02 .certifi_box ul li:nth-child(2) div { background-image: url('../image/sub/a04-area01-02.jpg'); } 
.a04-area02 .certifi_box ul li:nth-child(3) div { background-image: url('../image/sub/a04-area01-03.jpg'); } 
.a04-area02 .certifi_box ul li:nth-child(4) div { background-image: url('../image/sub/a04-area01-04.jpg'); }
.a04-area02 .patent_box ul li p { padding-left:25px; background-image: url('../image/check-b.png'); background-size: 15px; background-position: left 5px; letter-spacing: -1px;;}
.a04-area02 .patent_box ul li:first-child div { background-image: url('../image/sub/a04-area02-01.jpg'); }
.a04-area02 .patent_box ul li:nth-child(2) div { background-image: url('../image/sub/a04-area02-02.jpg'); } 
.a04-area02 .patent_box ul li:nth-child(3) div { background-image: url('../image/sub/a04-area02-03.jpg'); } 
.a04-area02 .patent_box ul li:nth-child(4) div { background-image: url('../image/sub/a04-area02-04.jpg'); } 

@media only screen and (max-width:680px){    
    .a04-area02 > div > div p { flex-basis:100px; padding:5px;}
    .a04-area02 ul li { flex-basis:48%; margin-top:20px; }
    .a04-area02 .certifi_box ul li p { width:100%; }
}


/* about > direction */
.direction iframe { max-width:1200px; width:100%; height:500px; display: block; margin:0 auto 20px;} 
.a05-area01 { padding-bottom:5%!important;}
.a05-area02 { border-bottom:1px solid #2855a5; overflow: hidden; padding: 2% 0!important; margin-bottom:70px;}
.a05-area02 h1 { width:20%; float:left; margin:0; background-image: url('../image/logo-g.png'); padding:50px;}
.a05-area02 .area_add { width:80%; float:right; }
.a05-area02 .area_add div { display: flex; justify-content: center; align-items: center; }
.a05-area02 .area_add div span:first-child { flex:1; margin-right:10px; border-radius: 25px; border:2px solid #2855a5; text-align: center; padding:5px; color:#2855a5; font-weight:500; font-size:1.1em;  }
.a05-area02 .area_add div span:nth-child(2) { flex:5; width:100%; height:1px; background-color: #2855a5; }
.a05-area02 .area_add ul {display: flex; flex-wrap:wrap; }
.a05-area02 .area_add ul li { flex:1; margin:18px 0 2px; padding-left:20px; background-image: url('../image/check-b.png'); background-size:10px; background-position: left 10px; font-weight:400; } 
.a05-area02 .area_add ul li:first-child { flex-basis:100%;  }
.a05-area02 .area_add ul li span { margin-right:10px; font-weight:400; }

@media only screen and (max-width:680px){   
    .a05-area02 h1 { display: none;}
    .a05-area02 .area_add { width:100%; }
    .a05-area02 { width:96%;}
    .direction iframe { height:300px; }
    
}


/* 사업영역 */
.business_wrapper h4 { color:#000; }
.business_wrapper .contents section { padding:5em 0; }



/* 개요 */
.area-summ { border-bottom:2px solid #f1f1f1; margin-bottom:30px; }
.area-summ > div { }
.area-summ .img-box { padding:0 0 20px 0; width:45%; float:left; } 
.area-summ .img-box div { background-size: contain; height:350px; background-position: center top;}


.b0101 .area-summ .ib01 { background-image: url('../image/sub/b0101-summ-01.jpg'); }
.b0101 .area-summ .ib02 { background-image: url('../image/sub/b0101-summ-02.jpg'); }
.b0102 .area-summ .ib01 { background-image: url('../image/sub/b0102-summ-01.jpg'); }
.b0102 .area-summ .ib02 { background-image: url('../image/sub/b0102-summ-02.jpg'); }
.b0103 .area-summ .ib01 { background-image: url('../image/sub/b0103-summ-01.jpg'); }
.b0103 .area-summ .ib02 { background-image: url('../image/sub/b0103-summ-02.jpg'); }
.b0104 .area-summ .ib01 { background-image: url('../image/sub/b0104-summ-01.jpg'); }
.b0104 .area-summ .ib02 { background-image: url('../image/sub/b0104-summ-02.jpg'); }
.b0105 .area-summ .ib01 { background-image: url('../image/sub/b0105-summ-01.jpg'); }
.b0105 .area-summ .ib02 { background-image: url('../image/sub/b0105-summ-02.jpg'); }


.area-summ .txt-box { padding:0 2%;  width:50%; float:right;}
.area-summ .txt-box span { width:30px; height:4px; background-color: #dad9d9; display: block;}
.area-summ .txt-box h2 { font-weight:500;}
.area-summ .txt-box p { margin-top:20px; line-height:1.8em; max-width:500px; }

.b0301 .area-summ .txt-box, 
.r01 .area-summ .txt-box,
.r02 .area-summ .txt-box,
.customer_wrapper .area-summ .txt-box { width:100%; float:none;}
.customer_wrapper .area-summ  { margin-bottom:0px !important; border-bottom:0px!important;}




/* 슬라이드 버튼 */
.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:10px; height:10px; border: 3px solid #ddd; background-color: #ddd; border-radius: 50%;  }
.area-summ .slick-dots li.slick-active button {font-size:0em; width:10px; height:10px;  border: 1px solid #ddd; background-color: rgba(0,0,0, 0); border-radius: 50%;}



.b0301 .area-summ .txt-box { padding:0; }
.b0301 .area-summ .txt-box p { max-width:1000px; }


@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-char { background-image: url('../image/sub/b-char.png'); background-position: right top; background-size: 40%; padding:2em 2% 5em!important;}
.area-char ul { display: flex;  flex-wrap:wrap; margin-top:100px; }
.area-char ul li { flex:1; text-align: center; }
.area-char ul li p { margin-top:10px;}
.area-char ul li p span { display: block; font-weight:500; margin-bottom:10px; }
.area-char ul li div { padding:30%; width:50%; margin:0 auto;  background-size: contain; border:1px solid #767676; border-radius: 50%; }

.b0301 .area-char { background-image: none;}
.b0301 .area-char ul li { border-radius: 25px; border:1px solid #8e8f90; margin:1%;}
.b0301 .area-char ul li div { padding:30%; width:50%; margin:0 auto;  background-size: contain; border:0; border-bottom:2px solid #167a87; border-radius: 0; }

@media only screen  and (max-width:690px){   
    .area-char { background-position: right 0px; background-size: 50%; } 
    .area-char ul { margin-top:30px; }  
    .area-char ul li { flex-basis:33%; padding:1%; margin-top:30px; }
}
@media only screen  and (max-width:480px){   
    .area-char ul { margin-top:0px; }  
    .area-char ul li { flex-basis:48%; max-width:48%; padding:1%; margin-top:30px; }
}

.b-i-eco {background-image: url('../image/sub/b-i-eco.png'); }
.b-i-insulation {background-image: url('../image/sub/b-i-insulation.png'); }
.b-i-insulation2 {background-image: url('../image/sub/b-i-insulation2.png'); }
.b-i-durability {background-image: url('../image/sub/b-i-durability.png'); }
.b-i-safety {background-image: url('../image/sub/b-i-safety.png'); }
.b-i-flame {background-image: url('../image/sub/b-i-flame.png'); }
.b-i-work {background-image: url('../image/sub/b-i-work.png'); }
.b-i-waterproof {background-image: url('../image/sub/b-i-waterproof.png'); }
.b-i-adhesion {background-image: url('../image/sub/b-i-adhesion.png'); }
.b-i-sound {background-image: url('../image/sub/b-i-sound.png'); }


/* 사양표 */
.area-spec { background-color: #ececec;}
.area-spec div { }
table { border-collapse: collapse; width:100%; border-spacing: 0;  }
th, td { text-align: left; padding: 15px 3px; }
th { font-weight:500;}
thead { text-align: center; background-color: #2855a5; color:#fff; border: 1px solid #cdcdcd; }
thead tr:first-child th:nth-child(2) { min-width:100px; }
thead th { text-align: center; border: 1px solid #cdcdcd;}
tbody {  }  
tbody th, td { background-color: #fff; border: 1px solid #494949; }
tbody th { background-color: #d0d3da; letter-spacing: -.5px; border-left:0px; text-indent: 1.5%; min-width:180px;}
tbody td { text-align: center; } 
tbody td:last-child { border-right:0px; text-align: left; text-indent: 1%;}
tbody .clc::before { content: '○'; font-size:1.1em; } 
tbody .str::before {  content: '★'; font-size:1.2em;}

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

/* 적용분야 */
.area-appl p span { color:#2855a5; font-weight:400;}
.area-appl ul { display: flex; flex-wrap:wrap; justify-content: space-between;  margin-top:20px;}
.area-appl ul li { flex:1; max-width:33%; flex-basis:33%; margin-top:40px; }
.area-appl ul li p { text-align: center; margin-top:10px; }
.area-appl ul li div { padding:30%; margin:0 auto; background-size: cover;  }

@media only screen  and (max-width:480px){  
    .area-appl ul { margin-top:0; } 
    .area-appl ul li { flex:1; max-width:49%; flex-basis:49%; margin-top:20px; }  
}

/* 01 */
.b0101 .area-appl li:first-child div {background-image: url('../image/sub/b0101-appl-01.jpg'); }
.b0101 .area-appl li:nth-child(2) div {background-image: url('../image/sub/b0101-appl-02.jpg'); }
.b0101 .area-appl li:nth-child(3) div {background-image: url('../image/sub/b0101-appl-03.jpg'); }
.b0101 .area-appl li:nth-child(4) div {background-image: url('../image/sub/b0101-appl-04.jpg'); }
.b0101 .area-appl li:nth-child(5) div {background-image: url('../image/sub/b0101-appl-05.jpg'); }
.b0101 .area-appl li:nth-child(6) div {background-image: url('../image/sub/b0101-appl-06.jpg'); }
/* 02 */
.b0102 .area-appl li:first-child div {background-image: url('../image/sub/b0102-appl-01.jpg'); }
.b0102 .area-appl li:nth-child(2) div {background-image: url('../image/sub/b0102-appl-02.jpg'); }
.b0102 .area-appl li:nth-child(3) div {background-image: url('../image/sub/b0102-appl-03.jpg'); }
.b0102 .area-appl li:nth-child(4) div {background-image: url('../image/sub/b0102-appl-04.jpg'); }
.b0102 .area-appl li:nth-child(5) div {background-image: url('../image/sub/b0102-appl-05.jpg'); }
.b0102 .area-appl li:nth-child(6) div {background-image: url('../image/sub/b0102-appl-06.jpg'); }
/* 03 */
.b0103 .area-appl li:first-child div {background-image: url('../image/sub/b0103-appl-01.jpg'); }
.b0103 .area-appl li:nth-child(2) div {background-image: url('../image/sub/b0103-appl-02.jpg'); }
.b0103 .area-appl li:nth-child(3) div {background-image: url('../image/sub/b0103-appl-03.jpg'); }
.b0103 .area-appl li:nth-child(4) div {background-image: url('../image/sub/b0103-appl-04.jpg'); }
.b0103 .area-appl li:nth-child(5) div {background-image: url('../image/sub/b0103-appl-05.jpg'); }
.b0103 .area-appl li:nth-child(6) div {background-image: url('../image/sub/b0103-appl-06.jpg'); }
/* 04 */
.b0104 .area-appl li:first-child div {background-image: url('../image/sub/b0104-appl-01.jpg'); }
.b0104 .area-appl li:nth-child(2) div {background-image: url('../image/sub/b0104-appl-02.jpg'); }
.b0104 .area-appl li:nth-child(3) div {background-image: url('../image/sub/b0104-appl-03.jpg'); }
.b0104 .area-appl li:nth-child(4) div {background-image: url('../image/sub/b0104-appl-04.jpg'); }
.b0104 .area-appl li:nth-child(5) div {background-image: url('../image/sub/b0104-appl-05.jpg'); }
.b0104 .area-appl li:nth-child(6) div {background-image: url('../image/sub/b0104-appl-06.jpg'); }
/* 05 */
.b0105 .area-appl li:first-child div {background-image: url('../image/sub/b0105-appl-01.jpg'); }
.b0105 .area-appl li:nth-child(2) div {background-image: url('../image/sub/b0105-appl-02.jpg'); }
.b0105 .area-appl li:nth-child(3) div {background-image: url('../image/sub/b0105-appl-03.jpg'); }
.b0105 .area-appl li:nth-child(4) div {background-image: url('../image/sub/b0105-appl-04.jpg'); }
.b0105 .area-appl li:nth-child(5) div {background-image: url('../image/sub/b0105-appl-05.jpg'); }
.b0105 .area-appl li:nth-child(6) div {background-image: url('../image/sub/b0105-appl-06.jpg'); }

/* b0201 */
.area_wrap .area01 {  background-color: #fff; max-width:1400px; margin:0 auto; text-align: center; } 

.b0201 .area_wrap {  background-image: url('../image/sub/b0201-bg.jpg'); background-position: top;  height:1000px; margin-bottom:50%; text-align: center;}
.b0201 section.area02 { padding:8em 2% 0!important;} 
.b0201 .area02 h4 { margin:40px 0 5px; }
.b0201 .area02 p { font-size:1.2em; font-weight:400; max-width:600px; margin: 0 auto; }
.b0201 .area03 ul { display: flex; flex-wrap:wrap;  justify-content: center;}
.b0201 .area03 ul li { flex:1; margin:1% 3%; max-width:25%; flex-basis:25%;}
.b0201 .area03 ul li p { width:90%; border-radius: 25px; border:2px solid #2858c2; background-color: #fff; color:#2858c2; font-size:1.1em; font-weight:400; text-align: center; margin:30px auto;}
.b0201 .area03 ul li div { width:100%; padding-bottom:150%; background-size:cover; background-position: top; border:1px solid #2858c2; }
.b0201 .area03 ul li:first-child div { background-image: url('../image/sub/b0201-area03-01.jpg');}
.b0201 .area03 ul li:nth-child(2) div { background-image: url('../image/sub/b0201-area03-02.jpg');}
.b0201 .area03 ul li:nth-child(3) div { background-image: url('../image/sub/b0201-area03-03.jpg');}

@media only screen  and (max-width:480px) {
    .b0201 section.area02 { padding:4em 2% 0!important;} 
    .b0201 .area03 ul li { max-width:30%; flex-basis:30%;}
}



.b0202 section.area02 { padding: 0em !important; }
.b0202 .area01 { border-bottom:3px solid #f1f1f1; max-width:1200px; margin-bottom:6%; }
.b0202 .area02 { border:6px solid #cfcfcf; display: flex; flex-wrap:wrap; padding:0;}
.b0202 .area02 .img-box { flex:1;  background-image: url('../image/sub/b0202-area02-01.jpg');   width:100%; padding-bottom:20%;}
.b0202 .area02 .txt-box { flex:1.5; margin: 5%; } 
.b0202 .area02 .txt-box p:first-child { font-size:2em; font-weight:500; }
.b0202 .area02 .txt-box p:first-child span { font-size:1.2em; color:#2858c2; font-weight:500; display: block; }
.b0202 .area02 .txt-box p:nth-child(2) { line-height:1.5em; margin-top:20px;  font-size:1.2em;  } 
.b0202 .area02 .txt-box div { background-image: url('../image/sub/b0202-area02-02.jpg'); padding:10% 0; background-size: contain; background-position: left; margin-top:30px;  }
.b0202 .area02 .txt-box div span { text-align: center; width:25%; font-weight:500; font-size:1.1em; display: inline-block;  }

.b0202 .area02 .txt-box div span:first-child { margin:12% 5% 0 3%; }
.b0202 .area02 .txt-box div span:nth-child(2) { margin:12% 5% 0 4%; }
.b0202 .area02 .txt-box div span:nth-child(3) { margin:12% 0 0 4.5%; }

@media only screen  and (max-width:480px) {
    .b0202 .area02 .txt-box p:first-child { font-size:1.8em; }
    .b0202 .area02 .img-box { flex:1; flex-basis:100%; padding-bottom:130%; order:2;}
    .b0202 .area02 .txt-box { flex:1.5; flex-basis:100%; margin: 5%; order:1;} 
}



/* 연구개발 */
.rnd_wrapper .area-summ .txt-box { padding:0;}
.rnd_wrapper .area-summ .txt-box p { max-width:1000px;  }
.r01 .con_visual, 
.r02 .con_visual { background-image: url('../image/sub/r-visual.jpg'); }
.r01 .area01 ul { display: flex;  flex-wrap:wrap; }
.r01 .area01 ul li { flex:1; flex-basis:32%; padding:5% 2%; margin:.5%; }
.r01 .area01 ul li span { display:block; margin:20px auto 0;}
.r01 .area01 ul li div { margin:0 auto; max-width:30%; background-size: contain; padding:60px;}
.r01 .area01 ul li:nth-child(even) { background-color: #2855a5; color:#fff; text-align: center;}
.r01 .area01 ul li:first-child { background-image: url('../image/sub/r01-area01-01.jpg');}
.r01 .area01 ul li:nth-child(2) div { background-image: url('../image/sub/r01-area01-02.png');}
.r01 .area01 ul li:nth-child(3) { background-image: url('../image/sub/r01-area01-03.jpg');}
.r01 .area01 ul li:nth-child(4) div { background-image: url('../image/sub/r01-area01-04.png');}
.r01 .area01 ul li:nth-child(5) { background-image: url('../image/sub/r01-area01-05.jpg');}
.r01 .area01 ul li:nth-child(6) div { background-image: url('../image/sub/r01-area01-06.png');}


@media only screen  and (max-width:690px) {
    .r01 .area01 ul li { flex:1; flex-basis:49%; padding:5% 2%; margin:.5%; }
    .r01 .area01 ul li div { padding:40px; }
}



.r02 .area01 > div {  margin-top:30px; display: flex; flex-wrap:wrap; }
.r02 .area01 > div:first-child { margin-top:0; }
.r02 .area01 > div div { flex:1; border:1px solid #ddd; }
.r02 .area01 > div:nth-child(even) .txt-box { background-color: #2858c2; color:#fff;  order:1;}
.r02 .area01 > div:nth-child(even) .img-box { order:2;}
.r02 .area01 > div:nth-child(odd) .txt-box { background-color: #ddd;}
.r02 .area01 > div:nth-child(odd) .txt-box p { color:#2855a5;}
.r02 .area01 > div div.img-box { max-width:50%; padding:110px; }
.r02 .area01 > div div.txt-box { padding:2%;}
.r02 .area01 > div div.txt-box p { font-size:1.2em; border-bottom:1px solid #fff; padding-bottom:10px; font-weight:400; line-height:1.6em;  }
.r02 .area01 > div div.txt-box ul { margin-top:20px; }
.r02 .area01 > div div.txt-box ul li { margin-top:5px; float:none; background-image: url('../image/check-b.png'); padding-left:20px; background-size: contain; background-size: 13px; background-position: left 7px;}
.r02 .area01 > div:nth-child(even) div.txt-box ul li  { background-image: url('../image/check-w.png'); }


.r02 .area01 > div:first-child .img-box { background-image: url('../image/sub/r02-area01-01.jpg');}
.r02 .area01 > div:nth-child(2) .img-box { background-image: url('../image/sub/r02-area01-02.jpg');}
.r02 .area01 > div:nth-child(3) .img-box { background-image: url('../image/sub/r02-area01-03.jpg');}
.r02 .area01 > div:nth-child(4) .img-box { background-image: url('../image/sub/r02-area01-04.jpg');}


@media only screen  and (max-width:480px) {
    .r02 .area01 > div div { flex-basis:100%;}
    .r02 .area01 > div div.img-box { max-width:100%; padding:100px; background-size: ;}
    
    .r02 .area01 > div:nth-child(even) .txt-box { order:2;}
    .r02 .area01 > div:nth-child(even) .img-box { order:1;}
}