@charset "utf-8";

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

  #hd_pop, #hd_wrapper, #tnb .inner, #gnb .gnb_wrap, #container_wr, #ft_wr{width: 100%;}
  #hd, #wrapper, #ft{min-width: 100%;}

  #hd .headerin{min-width: 100%; text-align: center;}
  #hd .headerin > div{margin: 0 auto; display: inline-block; float: initial; }
  #hd .headerin > nav{width: 100%; margin-left: 0; overflow: hidden; overflow-x: scroll; dis}
  #hd .headerin > nav .gnb_wrap ul#gnb_1dul li.gnb_1dli{margin-left: 10px; margin-right: 20px;}
  #hd .headerin .gnb_mnal{float: initial; position: absolute; top:0; right: 0;}
  #hd .headerin .gnb_mnal button{font-size: 32px;}

  #container_wr.main{min-width: 100%;}

  #gnb_all{width: 100%; height: auto; overflow: hidden; overflow-y: scroll;}
  #gnb_all h2{display: none;}
  #gnb .gnb_close_btn{position: fixed; top:5%; right: 5%; display: none;}
  #gnb_all .gnb_al_li{width: 100%; margin: 0; text-align: center; min-height: 0;}
  #gnb_all .gnb_al_li:nth-child(n + 2){margin-top: 20px;}
  #gnb_all .gnb_al_li .gnb_al_a{display: inline-block;}
  #gnb_all .gnb_al_li li a{padding-left: 0;}
  #gnb_all .gnb_al_li li a:after{display: none;}

  .main_img{height: auto;}
  .main_img .main_cont{position: static; transform: translate(0, 0); padding: 30px 10px 45px 10px;}
  .main_img .main_cont .text_box p{font-size: 15vw;}
  .main_img .main_cont .text_box span{font-size:4.5vw;}
  .main_img .main_cont .img_box ul{min-width: 100%; text-align: center; margin:30px auto;}
  .main_img .main_cont .img_box ul li{width: 80%; margin: 0; float: initial; display: inline-block; margin-bottom: 10px;}
  .main_img .main_cont .img_box ul li:last-child{margin-bottom: 0;}

  #ft .footerin{min-width: 100%;}
  #ft .footerin #ft_wr #ft_company > div{width: 100%; text-align: center;}
  #ft .footerin #ft_wr #ft_company div span{ width: 100%;}
  #ft .footerin #ft_wr #ft_company div span:after{display: none;}

  #ft_copy{width: 100%;}

  .sub_top .map_wrap .maps{min-width: 100%;}
  .sub_top .map_wrap .maps .cates.home{width: 50px;}
  .sub_top .map_wrap .maps .cates.home img{left:50%; transform: translate(-50%, -50%);}
  .sub_top .map_wrap .maps .cates.cate01,
  .sub_top .map_wrap .maps .cates.cate02{width: calc((100% - 50px) / 2); text-align: center;}
  .sub_top .map_wrap .maps .cates.cate01 span,
  .sub_top .map_wrap .maps .cates.cate02 ul li{background: url(/theme/safety-way/img/down_icon.png) no-repeat 90% center ;  white-space:nowrap; }

  .sub_top{padding-bottom: 0;}
  .sub_top .sub_top_img{height:35vw; background-color: #000;}
  .sub_top .sub_top_img:before{opacity: 0.7;}
  .sub_top > P{font-size: 35px; line-height:35vw; bottom: initial; top:51px; background: none; color:#fff; width: 100%; left: 0;}

  .cates01_popup{display: none; width: 100%; height: 100%; position: fixed; background: rgba(0,0,0,0.3); position: fixed; top:0; left:0; z-index: 2;}
  .cates01_popup ul{background: #fff; padding: 20px; width:90%; max-width: 500px; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%);  border-radius: 30px;}
  .cates01_popup .bg{display: none;}
  .cates01_popup ul li{display: block;}
  .cates01_popup ul li a{font-size:16px; font-weight: 500; text-align: center; display: block; line-height: 3; border-bottom: 1px solid #e7e7e7;}
  .cates01_popup ul li:last-child a{border-bottom: 0;}

  .hover_menu{display: none; width: 100%; height: 100%; position: fixed; background: rgba(0,0,0,0.3); position: fixed; top:0; left:0; z-index: 2;}
  .hover_menu ul{display: none; background: #fff; padding: 20px; width:90%; max-width: 500px; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%);  border-radius: 30px;}
  .hover_menu ul li a{font-size: 16px; font-weight: 500; text-align: center; display: block; line-height: 3; border-bottom: 1px solid #e7e7e7;}
  .hover_menu ul li:last-child a{border-bottom: 0;}

  .sub .cont{min-width: 100%; padding: 0 5%;margin:30px 0 0 0;}

  .sub.precision .cont .box ul{background: none; height: auto;}
  .sub.precision .cont .box ul li{flex-basis:100%; max-width:100%; top:0;}
  .sub.precision .cont .box ul li:nth-child(2){left:0;}
  .sub.precision .cont .box ul li:nth-child(3){left:0;}

  .sub.careers .cont > div ul{margin-top: 40px;}
  .sub.careers .cont > div ul li:nth-child(n + 2){margin-top: 40px;}
  .sub.careers .cont > div ul li img{width: 100%;}
  .sub.careers .cont > div ul li div{width: 100%; text-align: left; position: static; transform: translate(0, 0); float: left;}
  .sub.careers .cont > div ul li div b{margin-top:20px; font-size: 10vw; line-height: 1; display: block;}
  .sub.careers .cont > div ul li div span{padding-top: 10px; }

  .sub.contact .cont .info ul li{width: 100%;}

  .sub.quality .cont > div .row img{width: 100%;}

  .sub.environment .cont > div .row img{width: 100%;}

  .sub.system .cont .row .promotion li{width: 100%; margin-right: 0;}
  .sub.system .cont .row .promotion li:nth-child(n + 2){margin-top:20px;}
  .sub.system .cont .row .reward{gap:30px;}
  .sub.system .cont .row .reward li{width: 100%; overflow: hidden;}
  .sub.system .cont .row .reward li span br{display: none;}

  .sub.group .cont ul li a{width:60%; margin-bottom: 30px;}
  .sub.group .cont > ul > li > ul > li{width: 100%;}
  .sub.group .cont > ul > li > ul > li{padding:20px; border: 1px solid #e8e8e8; background: #fff; position: relative; z-index: 2;}
  .sub.group .cont > ul > li > ul > li a{width: 100%; margin-bottom: 20px;}
  .sub.group .cont > ul > li > ul > li:nth-child(1) > ul > li > ul{left: 0; padding:20px; border: 1px solid #e8e8e8; background: #fff; position: relative; z-index: 2; margin-top: 30px;}
  .sub.group .cont > ul > li > ul > li:nth-child(1) > ul > li > ul li:last-child a{margin-bottom: 0;}
  .sub.group .cont > ul > li > ul > li > ul > li:last-child > a{margin-bottom: 0;}

  .sub.group .cont > ul:after{height: 100%;}
  .sub.group .cont > ul:before{display: none;}
  .sub.group .cont > ul > li > ul > li:nth-child(1):after{display: none;}
  .sub.group .cont > ul > li > ul > li:nth-child(1) > ul > li > ul > li a:after{display: none;}
  .sub.group .cont > ul > li > ul > li:nth-child(1) > ul > li > ul:after{display: none;}
  .sub.group .cont > ul > li > ul > li:nth-child(1) > ul > li:last-child:before{display: none;}
  .sub.group .cont > ul > li > ul > li:nth-child(1) > ul > li:last-child:after{left: 50%; }
  .sub.group .cont > ul > li > ul > li:after{display: none;}

  .sub .cont .vision01 .box{padding-top: 0; }
  .sub .cont .vision01 .box .visions{text-align: center; width: 100%;}
  .sub .cont .vision01 .box .visions > div{float: initial; display: inline-block;}
  .sub .cont .vision01 .box .visions > div:nth-child(2){margin-left: 0; margin-top: -40px;}
  .sub .cont .vision01 .box .textbox{width: 100%; margin-left: 0; text-align: center;}

  .sub .cont .vision02{margin-top: 30px;}
  .sub .cont .vision02 .box{padding:20px; text-align: center;}
  .sub .cont .vision02 .box .visions > div:nth-child(2){margin: 10px 0;}
  .sub .cont .vision02 .box .visions > div:nth-child(3){margin-left: 0;}

  .sub.system .cont .row .position li span:last-child{left: -10px;}
  
  .sub.product .cont div video{height:51vw;}
  .sub.product .cont div > img{width:100%;}
  .sub.product .cont div .row .list{padding-bottom:0; margin-bottom:0; border-bottom:0;}
  .sub.product .cont div .row .list ul li{width:100%; padding:0 10px 20px 10px; margin-bottom:25px; border-bottom:1px solid #bbb;}
  .sub.product .cont div .row .list ul li:after{display:none;}
  .sub.product .cont div .row .spec-table dl{padding:0px; }
  .sub.product .cont div .row .spec-table dl.title{display:none;}
  .sub.product .cont div .row .spec-table dl dt{width:100%; max-width:100%; margin-bottom:15px; line-height:40ppx; background:#e7e7e7;}
  .sub.product .cont div .row .spec-table dl dd{width:100%;}
  .sub.product .cont div .row .spec-table dl dd ol {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column; /* 세로로 나열 */
  gap: 20px; /* 각 항목 간 간격 */
}

.sub.product .cont div .row .spec-table dl dd ol li {
  display: flex;
  align-items: center; /* 자식 요소들 상하 가운데 정렬 */
  width: 100%;
  padding: 0 20px;
  gap: 5%; /* .spec-title와 .spec-desc 간의 간격 */
  margin:0;
}

.sub.product .cont div .row .spec-table dl dd ol li .spec-title {
  flex: 0 0 20%; /* 고정 너비: 20% */
}

.sub.product .cont div .row .spec-table dl dd ol li .spec-desc {
  flex: 1; /* 나머지 공간 차지 */
  align-self: center; /* 필요 시 개별적으로 상하 가운데 정렬 */
}

.sub.product .cont div .row .spec-table dl dd ol li .spec-desc.solo {
  flex: 1 1 100%; /* 너비 100% */
  padding-left: 0;
}

  .sub.product .cont div .row .spec-table dl dd ol li .spec-desc br{display:block;}

  #bo_list{padding:20px; padding-bottom: 0 !important;}
  #bo_list_total{width:70% !important; line-height: 30px !important;}
  .tbl_head01 thead th:nth-child(3){display: none;}
  #bo_list .td_name{display: none;}
  .bo_sch_bg{background: rgba(0, 0, 0, 0.6) !important; }
  .bo_sch{margin:0 !important; transform: translate(-50%, -50%);}

  #bo_v{padding:20px; padding-bottom: 0 !important;}

}