@charset "utf-8";
/* CSS Document */
.PHONE{display:none;}
.pc_hide{display:none;}
/*nav*/
.l-nav .gnb{ display:block;}
.l-nav .gnb > li:first-child .dp1.va_wrap{border-top:1px solid #ddd;}
.l-nav .gnb > li .va_wrap{ display:block; text-align:left;}

.l-nav .gnb > li .dp1.va_wrap{padding:1.5em 0;  position:relative; border-bottom: 1px solid #ddd; padding-left:1em;}
.l-nav .gnb > li .dp1.va_wrap:hover{ border-bottom:1px solid #111; border-top:1px solid #111;}
.l-nav .gnb > li .dp1 .va{padding:2em 0; display:inline;}
.l-nav .gnb > li .dp1 .va:after{ content:'+'; color:#111; position:absolute; top:16px; right:20px; font-size:1.5em; font-weight: bold;}

.l-nav .gnb .dp1.on{ background-color:#111;}
.l-nav .gnb .dp1.on .va{color:#fff;}
.l-nav .gnb .dp1.on .va:after{ content:'-'; color:#fff; font-size:2em; top:9px;}

.l-nav .gnb > li .dp2 {display: none;}
.l-nav .gnb > li .dp2 .flex{ border-bottom: 1px solid #ddd; background: #fbfbfb; justify-content:flex-start}
.l-nav .gnb > li .dp2 .tt{padding:1em 0; padding-left:1em; font-size:.9rem;}
.l-nav .gnb > li .dp2 .tt:after{content:''; color:#333; position:absolute; top:13px; left:10px;}

.l-nav .gnb > li .dp3{ display:none;}

.l-nav .nav_logo{ margin:1em 0.5em; position:relative;}
.l-nav .nav_logo img{ width:75%; margin:.5em 0;}
.I-nav .nav_close { position:absolute; top:0; right:0;}
.l-nav .xi-close{color:#aaa; font-size:2.5em; margin-top:-7px;}

.l-nav .nav_top{ background:#f5f5f5; padding:.5em; margin-bottom:.5em;}
.l-nav .nav_top li a{ background:#fff; border:1px solid #ddd; font-size:.875em; margin-right:5px; padding:.5em 1.5em;}

.l-wrapper{ overflow:hidden}
.l-main {
  -webkit-transition: -webkit-transform 500ms ease;
  -moz-transition: -moz-transform 500ms ease;
  -o-transition: -o-transform 500ms ease;
  transition: transform 500ms ease;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
  z-index: inherit;
  overflow: hidden;  
}

.l-nav {
  -webkit-transition: opacity 700ms ease;
  -moz-transition: opacity 700ms ease;
  -o-transition: opacity 700ms ease;
  transition: opacity 700ms ease;
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index:1
}
.l-nav::-webkit-scrollbar {width: 0;}

html.l-nav-open .l-nav{width: 80%;}

html.l-nav-open,
html.l-nav-open body {
  height: 100%;
  overflow: hidden
}
html.l-nav-closing body {
  background: none;
}
html.l-nav-open .l-main {
  -webkit-transform: translate3d(-80%, 0, 0);
  -moz-transform: translate3d(-80%, 0, 0);
  -o-transform: translate3d(-80%, 0, 0);
  transform: translate3d(-80%, 0, 0);
}
html.l-nav-open .l-nav {
  -webkit-overflow-scrolling: touch;
  -moz-overflow-scrolling: touch;
  -ms-overflow-scrolling: touch;
  -o-overflow-scrolling: touch;
  overflow-scrolling: touch;
  opacity: 1;
  -webkit-box-shadow: 0 0 0.5625rem #666;
  box-shadow: 0 0 0.5625rem #666;
}
.l-nav-open .l-nav,
.l-nav-closing .l-nav {
  display: block;
}

@media screen and (max-width:1919px){	
.box1{max-width:95%;}
.box2{max-width:95%}
}


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

}

@media screen and (max-width:1440px){
.board_photo.product > li{width:25%;}
}

@media screen and (max-width:1280px){	
body{ font-size:14px;}
.sub_history_wrap .wrap_img{width:23em;}
}

@media screen and (max-width:1200px){	
.dn1200{display:none;}
/*service css h*/
.sub_services_business > li .wrap_in .tit_wrap .t2{font-size:1.5em;}
.sub_services_business > li .wrap_in .con_wrap .con{padding:3em 1.5em;}
.sub_services_business > li .wrap_in .tit_wrap .ico{width:3.5em;}

.sub_services_process{flex-wrap:wrap; margin:-2em 0 0 -2em;}
.sub_services_process > li .wrap_in{margin:2em 0 0 2em;}
.sub_services_process > li .wrap_in .arrow{transform:translate(-1em,-50%);}
}

@media screen and (max-width:1024px){
/*resopnse*/
.all_btn.PHONE{font-size:2em;}
.PHONE{display:block;}
/*header*/
#header .top_wrap .gnb_wrap{display:none;}
#header .top_wrap .logo{padding-bottom:0;}
#header .top_wrap .wrapH{align-items:center;}

#contents .sub_tab .gnb > li .dp2{flex-wrap:wrap;}
.dp1_product #contents .sub_tab .gnb > li .dp2 > li{flex:1 1 25%; max-width:unset;}

#contents .sub_tab .gnb > li .dp2 > li{flex:1 1 33.33%; max-width:unset;}

/*main css h*/
.visualSlider_wrap .slogan .t1{font-size:2.5em;}
.main_business > li{width:100%; }
.main_product{flex-direction:column;}
.main_product .wrap_tit{width:100%; margin-right:0; margin-bottom:2em;}
.main_product .wrap_con{margin-left:-1.5em;}

/*history*/
.sub_history_wrap{flex-direction:column;}
.sub_history_wrap .wrap_img{width:100%; height:10em; background-size:cover; background-position:center left; margin-right:0;}

/*sub*/
.sub_equip{flex-direction:column;}
.sub_equip .tit_wrap{width:100%; margin-right:0; padding:1.25em 0; box-sizing:border-box;}
.sub_equip .list{margin:1em 0; margin-left:-1em; flex-wrap:wrap;}
.sub_equip .list > li{width:50%;}
.sub_equip_wrap > li:not(:first-child){margin-top:5em;}
.sub_equip_wrap > li:not(:first-child) .tit_wrap:before{display:none;}
.sub_equip_wrap > li:not(:first-child) .tit_wrap:after{display:none;}
.sub_equip .list > li .wrap_in .img_wrap .resize{padding-bottom:0; height:20em;}

.sub_services_business{flex-wrap:wrap;}
.sub_services_business > li{width:100%; margin-bottom:3em;}
.sub_services_business > li:last-of-type{margin-bottom:0;}
.sub_services_business > li .wrap_in .tit_wrap{width:17.75em;}

.sub_services_solution > li{width:48%; margin:1%;}
.sub_services_solution > li:nth-child(2n-1) .wrap_in{background:none;}
.sub_services_solution > li:first-of-type .wrap_in{background:#f5f5f5;}
.sub_services_solution > li:last-of-type .wrap_in{background:#f5f5f5;}

.sub_services_process > li{width:33.33%;}
.sub_services_process > li:nth-of-type(3) .wrap_in .arrow{display:none;}
/*footer css h*/
#footer .info_wrap .box0{flex-direction:column-reverse;}
#footer .info_wrap .menu{text-align:left; display:flex;}
#footer .info_wrap .menu > li.point{margin-right:1.5em;}
#footer .info_wrap .menu > li > a{padding:.75em 0;}
#footer .info_wrap .info{display:flex; flex-direction:column;}
#footer .info_wrap .info > li{margin-right:0;}


#footer .info_wrap{padding-bottom:8em;}
#footerBar{ display:block !important; position:fixed; z-index:109; left:0; right:0; bottom:0; transform:translateY(100%); transition:.4s;}
.scroll #footerBar{ transform:translateY(0);}
#footerBar .inner{ background:#222222; box-shadow:0 2px .5em rgba(0,0,0,1);}
#footerBar .list > li{ flex:1;}
#footerBar .list > li .in{ height:5em; border-left:1px solid rgba(255,255,255,.15); color:#fff;}
#footerBar .list > li:first-child .in{ border-left-width:0;}
#footerBar .list > li .in .icon{ height:2.375em;}
#footerBar .list > li .in .xi{ font-size:1.625em;}
#footerBar .list > li .in .tt{ font-size:.875em;}

.main_business > li .in .img_wrap .bg.resize{ padding-bottom: 90%;}
#quick{ right: 2.5vw;}

}

@media screen and (max-width:900px){
.main_portfolio > li{width:25%;}
.board_photo.partner > li{width:25%;}
.sub_project_view .top_wrap .img_list2 > li{width:25%;}
.hover_st:hover .hoverBg{transform:scale(1)}
.board_photo.partner > li .wrap_in .img_wrap .bgfix.auto{background-size:contain;}

.twrap_info > li{width:100%; margin-right:0; padding-right:0;}
.twrap_info > li:not(:last-child):after{display:none;}

.pc_hide{display:block;}
.mo_hide{display:none;}

.sub_company_overview .w1{width:30em; margin:0 auto; order:-1; margin-bottom:2em;}
.sub_company_overview .w2{width:100%; margin-left:0;}
.sub_company_overview .moveL{transform:none;}

}

@media screen and (max-width:768px){
body{ font-size:13px;}
.main_portfolio > li{width:33.33%;}
.board_photo.product > li{width:33.33%;}
.board_photo.cert > li{width:33.33%;}
.sub_project_view .top_wrap .img_list2 > li{width:33.33%;}
.visualSlider .el.swiper-slide-active .slogan .t2 br{display:none;}
.more_st{padding:.5em .75em;}
.page_tt1 br{display:none;}
.tt2 br{display:none;}

.sub_history:before{left:7em; height:94%;}
.sub_history .wrap_year{width:14em;}
.sub_history .wrap_con .list > li{flex-direction:column;}
.sub_history .wrap_con .list:before{right: calc(100% + 3em);}
.sub_history .wrap_con .list .month{width:4em;}

}

@media screen and (max-width:660px){
.board_photo.partner > li{width:50%;}
.board_photo > li{width:50%;}
.board_photo.product > li{width:50%;}
.board_photo.cert > li{width:50%;}
.sub_project_view .top_wrap .img_list2 > li{width:50%;}
}

@media screen and (max-width:600px){
.sub_company_overview .w1{width:25em;}
}

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

.main_business > li .in .ico_wrap .ico{max-width:3.5em}

.sub_company_overview .w1{width:18em;}


.sub_services_process > li{width:50%;}
.sub_services_process > li:nth-of-type(3) .wrap_in .arrow{display:block;}
.sub_services_process > li:nth-of-type(2n) .wrap_in .arrow{display:none;}

.tit1{font-size:1.5em;}
.tit2{font-size:1.55em;}
.visualSlider_wrap .slogan .t2{font-size:1.3em;}
.prodSlider-pagination{width:calc(92vw - 10em);}

}

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


}

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


}

@media screen and (max-width:383px){
.main_portfolio > li{width:50%;}

}

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

.sub_project_view .top_wrap .img_list2 > li{width:100%;}
.board_photo.partner > li{width:100%;}
.board_photo > li{width:100%;}
.board_photo.product > li{width:100%;}
.board_photo.cert > li{width:100%;}
}

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


}