@charset "utf-8";
/* CSS Document */
.PHONE{display:none!important;}

/**************************************************/

.l-nav{display:none;}

@media screen and (max-width:1919px){	
.box1{max-width:95%;}
.box2{max-width:95%}

.main_shop_slides_btn > div.btn_prev{left:35%;}
.main_shop_slides_btn > div.btn_next{right:35%;}
.sub_process_wrap{padding-right:0;}


}


@media screen and (max-width:1680px){	
.box1L{margin-left:0; padding-left:1em;}

.customer_link .service_wrap{width:49%;}

.brand_img_wrap .brand_img{width:auto;}
}

@media screen and (max-width:1440px){
.visualSlider_wrap .slogan .t1{font-size:3.75em;}
.visualSlider_wrap .slogan .t3{font-size:2em;}
.product_wrap .product_tit.t7{font-size:2em;}

.main_shop_slides_wrap{min-height:40em}

.main_shop_slides_btn{display:none;}

.brand_img_wrap .brand_img_flex{width:50%;}
.resize.s15{padding-bottom:34%;}
}

@media screen and (max-width:1280px){	
body{ font-size:14px;}

#contents .sub_tab > .gnb{max-width:100%;}
#contents .sub_tab .gnb > li .dp2{flex-wrap:wrap}
.dp1_company #contents .sub_tab .gnb > li .dp2 > li:nth-of-type(4) > a:before{display:none;}
.dp1_company #contents .sub_tab .gnb > li .dp2 > li{flex:1 1 33.33%; max-width:33.33%}
}

@media screen and (max-width:1200px){	
/*businessway*/
.visualSlider_wrap .slogan .t1{font-size:3em;}
.product_wrap .product_tit.t5{font-size:2em;}
}

@media screen and (max-width:1024px){
#footer .logo_wrap .top_btn{ display:none;}
.PHONE{display:block!important;}
.mo_hide{display:none!important;}
/*header*/
#header .gnb_wrap{display:none;}

/*main*/
.main_wrap .main_tit.ml50{margin:0 !important; padding:0 2em;}
.main_wrap .main_tit .tt.t2{font-size:2em;}
.main_product_wrap{flex-wrap:wrap;}
.main_product_wrap .tit_wrap .bg{height:18em;}
.main_product_wrap .tit_wrap{position:static; width:100%; height:auto;}
.main_product_wrap .con_wrap{width:100%; padding-top:3em;}
.brand_img_wrap .brand_img_flex{width:50%;}
/*about*/
.greetings_wrap{flex-wrap:wrap;}
.greetings_wrap .greetings_img{width:30em; margin:0 auto; margin-bottom:1em;}
.greetings_wrap .greetings_text{width:100%; padding-left:0; text-align:center;}

/*product*/
.career_list{flex-wrap:wrap;}
.career_list > li{flex:1 1 50%; max-width:50%; margin-bottom:2em;}
.career_list > li .in{padding:1em;}

/*footer css h*/
#footer .logo_wrap{padding:2em 0;}
#footer .logo_wrap .wrapH{flex-direction:column; align-items:flex-start; align-content:flex-start;}


#quick{bottom:6em;}

#footer .info_wrap{padding-bottom:8em;}
#footerBar{ display:block !important; position:fixed; z-index:109; left:0; right:0; bottom:0; transition:.4s;}
#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; padding:0 .5em;}
#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;}

.l-nav{display:block;}
.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 #ce271e; border-top:1px solid #ce271e;}
.l-nav .gnb > li .dp1 .va{padding:2em 0; display:inline;}
.l-nav .gnb > li .dp1 .va:after{ content:'+'; color:#ddd; position:absolute; top:16px; right:20px; font-size:1.5em; font-weight: bold; color:#ce271e;}

.l-nav .gnb .dp1.on{ background-color:#ce271e;}
.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 .va_wrap{ border-bottom: 1px solid #ddd; background: #fbfbfb;}
.l-nav .gnb > li .dp2 .va{padding:1em 0; padding-left: 1.8em; position:relative; font-size:.9rem;}
.l-nav .gnb > li .dp2 .va: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:50%;*/ 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{}
.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:900px){
.product_wrap .product_tit.t1{font-size:2em;}

.place_wrap{flex-direction:column-reverse;}
.place_wrap .place_text{width:100%; margin-left:0; margin-bottom:2em;}
}

@media screen and (max-width:768px){

body{ font-size:13px;}

.visualSlider_wrap .slogan .t1{font-size:2.5em;}
.customer_link{flex-wrap:wrap;}
.customer_link .service_wrap{width:100%; margin-bottom:2em;}
.customer_link .service_wrap:last-of-type{margin-bottom:0;}


#contents .sub_visual_wrap .wrap_in .twrap .t2{font-size:2.25em;}
#contents .sub_tit_wrap .tit{font-size:2em;}

/*history_res*/
.history_wrap{margin-top:0 !important;}
.history_wrap:before,
.history_wrap .lineAni{left: .5em; top:0; width:2px; height:100%; background:#ddd}
.history_wrap .lineAni{background:#c82e27;}
.history_wrap .lineAni:before,
.history_wrap:after{left: 3px; top:0; transform:translateX(-50%); width:1em; height:1em; background:#fff; border-radius:100%; box-sizing:border-box}
.history_wrap .lineAni:before{left:8px}
.history_wrap:after{ top:auto; bottom:0;margin-left: 4px;}
.history_wrap .history > li{ margin-top:4em;text-align: left;}
.history_wrap .history > li:first-child{ margin-top:0}
.history_wrap .history > li .year{width: 100%; overflow:hidden;justify-content: flex-start;}
.history_wrap .history > li .year .wrap_in{ position:relative; overflow:hidden;width: 100%;}
.history_wrap .history > li .year .tt{padding-left:1em;}
.history_wrap .history > li .year .tt:before{ content:""; position:absolute; left:100%; top:50%; margin-top:-1px; width:310%; border-top:2px dotted #aaa; display:none;}
.history_wrap .history > li .year .tt:after{ content:"'"; font-weight:400; font-style:italic}
.history_wrap .history > li .list{width: 100%; margin-top:1em}
.history_wrap .history > li .list .detail > li:first-child{ margin-top:0}
.history_wrap .history > li .list .detail .tt{ position:relative; padding:0 1.5em; margin-top:.125em; color:#333; font-size:1.125em;}
.history_wrap .history > li .list .detail .tt:before{ content:""; position:absolute; left:0; top:.5em; width:.75em; border-top:2px solid #ddd}
.history_wrap .history > li:nth-child(2n) .year{ justify-content:flex-start;text-align: left;}
.history_wrap .history > li:nth-child(2n) .year .tt:before{ left:auto; right:100%}
.history_wrap .history > li:nth-child(2n) .list{ order:0; }
.history_wrap .history > li:nth-child(2n) .list > li > .flex{justify-content: flex-start;}
.history_wrap .history > li:nth-child(2n) .list .month{ text-align:right}
.history_wrap .history > li:nth-child(2n) .list .detail{order: 0;}
.history_wrap .history > li:nth-child(2n) .list .detail .tt{text-align: left;}
.history_wrap .history > li:nth-child(2n) .list .detail .tt:before{left: 0; right:0}

/*product*/
.product_con_wrap{flex-wrap:wrap;}
.product_con_wrap .product_con{flex:1 1 100%; padding-bottom:1em; border-right:none;}
.product_con_wrap .product_con:last-of-type{padding-bottom:0; padding-top:1em; border-top:1px dotted #ddd;}
.product_wrap .product_tit.t2{font-size:1.5em;}
.product_wrap .product_txt{padding:0;}
.thefirst_img img{width:95%;}

/*csr*/
.board_photo.d1 > li{width:50%;}

.page_ttbg_wrap > li .page_ttbg{flex-direction:column;}
.page_ttbg.s1 .wrap_tt{width:100%; margin-top:1em;}
.page_ttbg.s1 .wrap_img{width:100%; order:-1;}
.page_ttbg_wrap > li:nth-child(2n-1) .wrap_img{order:-1;}
.page_ttbg_wrap > li:nth-child(2n) .wrap_tt{text-align:left;}
.page_line.st1{margin-top:2em;}


.main_wrap .main_circle{flex-direction:column; }
.main_wrap .main_circle .circle_wrap{max-width:12em; max-height:12em; margin:0 auto; margin-right:auto; margin-bottom:2em;}
.main_wrap .main_circle .circle_wrap:last-of-type{margin-right:auto;}
.main_wrap .main_circle .circle_wrap .circle_text{margin-top:1em;}
.main_wrap .main_tit .tt.t2{font-size:1.5em;}

.customer_link .service_wrap{height:195px;}

.product_wrap .product_tit.t3{font-size:1.5em;}

.brand_title{width:100%;}
}

@media screen and (max-width:660px){
#footer .info_wrap .info{width:100%;}
#footer .info_wrap .menu{display:none;}

.product_wrap .product_tit.t3:before{display:none;}

.brand_img_wrap .brand_border{height:100px;}
.brand_img_wrap .brand_border:before{top:3.5em;}
}

@media screen and (max-width:600px){
.dp1_company #contents .sub_tab .gnb > li .dp2 > li:nth-of-type(3) > a:before{display:none;}
.dp1_company #contents .sub_tab .gnb > li .dp2 > li:nth-of-type(4) > a:before{display:block;}
.dp1_company #contents .sub_tab .gnb > li .dp2 > li:nth-of-type(5) > a:before{display:none;}
.dp1_company #contents .sub_tab .gnb > li .dp2 > li{flex:1 1 50%; max-width:50%}

.sub_process > li{width:50%;}
.sub_process_wrap .line1{display:none;}
.sub_process{margin:0 0 -3em -3em;}
.sub_process > li .in{margin:0 0 3em 3em;}

.page_ttbg_wrap.st1 > li{width:100%; margin-bottom:2em;}
.page_ttbg_wrap.st1 > li:nth-child(2n){margin-top:0; margin-bottom:0;}

.page_wrap{flex-wrap:wrap;}
.page_wrap .page_con{flex:1 1 50%;}
.page_wrap .page_con:nth-of-type(2){border-right:none;}
.page_tab .tab > li{width:30%;}
}

@media screen and (max-width:500px){
.customer_link .service_wrap{padding:2em;}

#footer .logo_wrap .wrapH{height:auto;}
#footer .logo_wrap .sns_wrap{margin-top:2em;}
#footer .logo_wrap .sns_wrap ul{flex-direction:column}
#footer .logo_wrap .sns_wrap ul li{margin-bottom:.75em; margin-left:0;}

}

@media screen and (max-width:420px){
/*product*/
.career_list > li{flex:1 1 100%; max-width:100%; margin-bottom:2em;}
.product_wrap .product_tit.t7{font-size:1.5em;}
.product_wrap .product_tit.t2{font-size:1.3em;}

.visualSlider_wrap .swiper_control{display:none;}

.visualSlider_wrap .slogan .t3{font-size:1.25em;}

#header .etc_wrap .lang .lang_btn{padding:.35em;}
#header .top_wrap .etc_wrap .all_wrap{margin-left:.75em;}
#header .top_wrap .logo > a{height:2em;}
}

@media screen and (max-width:384px){
.board_photo.d1 > li{width:100%;}

}

@media screen and (max-width:360px){


}

@media screen and (max-width:320px){


}

@media screen and (max-width:280px){


}
