  /* 태블릿 사이즈 (768px 이하) */  
  @media (max-width: 768px) {
    
    .header_nav_body {
      position: relative;
    }
    
    /* 토글 버튼 표시 */
    .navbar-toggler {
      display: block;
      position: relative;
      z-index: 1001;
    }
    
    /* 네비게이션 메뉴 */
    #navbar {
      position: fixed;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100vh;
      background: #fff;
      box-shadow: -2px 0 10px rgba(0,0,0,0.1);
      transition: right 0.3s ease-in-out;
      z-index: 1000;
      overflow-y: auto;
      padding-top: 80px;
    }
    
    /* 네비게이션 활성화 시 슬라이드 인 */
    #navbar.show {
      right: 0;
    }
    
    /* 모바일 메뉴 리스트 */
    .topmenu {
      flex-direction: column;
      gap: 0;
      padding: 20px;
    }
    
    .topmenu li {
      width: 100%;
      border-bottom: 1px solid #eee;
    }
    
    .topmenu li:last-child {
      border-bottom: none;
    }
    

    .topmenu a:hover {
      color: #007bff;
      background-color: #f8f9fa;
      padding-left: 10px;
    }
    
    /* 서브메뉴 숨김 */
    .submenu {
      display: none !important;
    }
    
    /* 오버레이 */
    #navbar::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,0.5);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      z-index: -1;
    }
    
    #navbar.show::before {
      opacity: 1;
      visibility: visible;
      left: -280px;
    }
  }
  






  /* 모바일 사이즈 (480px 이하) */
  @media (max-width: 480px) {
    body{
        font-size: 14px;
    }
    .kontainer {
      padding: 0 10px;
    }
    
    .header_nav_body {
      padding: 10px 0;
    }
    #header #logo{z-index:900;}
    #header #logo img {
      height: 25px;
    }
    
    #navbar {
      width: 250px;
    }
    
    #navbar.show::before {
      left: -250px;
    }
    
    .topmenu {
      padding: 15px;
    }
    .topmenu a {
        display: block;
        font-size:1rem !important;
      }
    
   .navbar ul.topmenu {
        border-bottom: 1px solid #eee;
    }

    ul.botbtn{margin:0px; position: absolute; bottom: 0; margin-bottom:20vh;width: 100%; padding: 0 10%;}
    ul.botbtn li{list-style: none; padding:10px 20px; margin:15px 0; border:1px solid #000; border-radius: 10px;}
    ul.botbtn li a{font-size: 0.9rem;  color: #000;   font-weight: 600;}

    .login-info-area h7.login-name {
      font-size: 1rem;
     }
     .login-info-area .login-card .login-card-left ul li {
      font-size: 0.9rem;
    }

    .login-info-area .onebbs-area {
      font-size: 0.9rem;
      padding: 6px 5px;
    }
    .login-info-area h7.login-card-tit {
      font-size: 0.95rem;
  }





    #header {
        height: 82px;
    }
    #header .toplogin{display: none;}

    .navbar ul.topmenu li:nth-child(1) {border-top:1px solid #eee;}
    .navbar ul.topmenu li{width: 100%; height: 50px; justify-content: flex-start; }
    .swiper-area{display: none;}
    .picarea { margin-top: 100px; }
    .picarea .pic-pop-area {
        width: 100%;
        height: 500px;
    }
    .section {
        margin-top: 50px;
    }
    .section h5 {
        font-size: 1.6rem;
    }
    .section h5 em {
        font-size: 1.2rem;
        letter-spacing: 0px;
    }
    .busline_area .busline-box {
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        align-items: center;
    }

    .busline_area .busline-box .linebox {
      width:auto;
    }
    .customer_area .customer_title {
        flex-direction: column;
    }
    .customer_area .customer_title ul {
        width: 100%;
        padding-left: 0px;
    }
    .customer_area .customer_title ul li a.act {
        border-radius: 10px;
    }
    .customer_area .customer_box .customer_list ul {  
        flex-direction: column;
    }
    .customer_area .customer_box .customer_list ul li {
        width: 100%;
        min-height: 100px;
        list-style: none;
    }
    .customer_area .customer_box .customer_list ul li a span.customer_title {  
        padding: 15px 20px; background-color: #fff; border-radius: 10px;
    }
    .customer_area .customer_box .customer_list ul li a {margin-bottom:5px;}
    .call_area .call_box {
        flex-direction: column;
    }
    .call_area .call_box .call_box1 {
        display: none;
    }
    .call_area .call_box .call_box2 {
        width: 100%;
        height: auto;
        padding: 20px 10px;
        margin-bottom: 20px;
    }
    .call_area .call_box .call_box2 .call_body p { 
        padding: 5px 10px;
    }
    .call_area .call_box .call_box2 .call_body p span.call_num {
        font-size: 1.2rem;
    }
    footer {
        margin-top: 20px;
    }
    footer .copy_menu ul{flex-wrap: wrap;}
    footer .copy_menu ul.copy_main-menu {
        padding: 0;
    }
    footer .copy_menu ul li:nth-child(1) {
        width: 50%;
        border-bottom:1px solid #ddd;
    }
    footer .copy_menu ul li:nth-child(2) {
        width: 50%;
        border-bottom:1px solid #ddd;
    }
    footer .copy_menu ul li:nth-child(3) {
        width: 40%;
    }
    footer .copy_menu ul li:nth-child(4) {
        width: 20%;
    }
    footer .copy_menu ul li:nth-child(5) {
        width: 40%;
    }

    footer .copy_menu ul li {
        list-style: none;
        text-align: center;
        font-size: 0.85rem;
        width: 20%;
        
    }
    footer .copy_menu ul li a{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 10px 7px;
    }
    footer .copyright_area .copy-text {
        padding: 20px 10px;
    }
    footer .copyright_area .copy-text ul li {
        font-size:0.9rem;
    }
    footer .copyright_area .copy-text ul li span{display: block; padding:1px 0 !important;}

/* 서브페이지 */
#head {
    height: 180px;
}
#head h1.menu_title {  
    font-size: 1.8rem;
}
#head h3 {
    font-size: 1.1rem;
    line-height: 1.8rem;
}
#submenu {
    width: 100%; padding: 0px;
}
#submenu ul {
    width: 100%;
}
#submenu ul li {
    min-width: 33.3%;
    padding: 10px 10px;
    font-size: 0.9rem;
}
#content-15 {
    padding: 0 3%;
    margin-top: 30px;
}
.section1 h2 {
    font-size: 2.0rem;
    margin-bottom: 10px;
}
.bigbox_area h6.bigbox_txt1 {
    top: 80px;
    font-size: 1.2rem;
    left: 5%;
}
.bigbox_area h6.bigbox_txt2 { 
    top: 110px;
    font-size: 1.2rem;
    left: 5%;
}
.bigbox_area bold {
    font-size: 3.5rem;   
    bottom: -180px;
}
.hello_area .hello_contents {
    padding: 30px 3%;
    text-align: justify;
}
p {
    font-size: 1.0rem;
}

.section1 h4 {
  font-size: 1.2rem;
}

/*삼신소개*/
.intro_area .intro_box{flex-direction: column; margin-top: 10px;}
.intro_area .intro_box .intro_card {width: 100%; margin-bottom: 20px;}
.intro_contents {margin-top: 50px;}
.intro_contents .intro_contents_box{flex-direction: column ;}
.intro_contents .intro_contents_box .intro_contents_left {width: 100%;padding: 20px 20px;}
.intro_contents .intro_contents_box .intro_contents_left p{margin-bottom: 0px;}
.intro_contents .intro_contents_box .intro_contents_right {width: 100%;padding: 0px 20px 10px 20px;}
.intro_contents .intro_contents_box .intro_contents_right img{width: 100%; object-fit: cover;}


.timeline-item-2004, .timeline-item-1968, .timeline-item-2024{display: none;}
.timeline .timeline-label { text-align: left;}
.timeline:before { width: 12%;}
.timeline .timeline-item {width: 92%;}


/*반응형게시판*/
.bbs_list_top{display: none !important;}


ul.grid-col-nobbs {
  display: grid !important;
  grid-template-columns: 1fr 1fr 40%; /* 세 번째 행: 3개 컬럼 균등 분할 */
  grid-template-rows: auto auto; /* 3개 행 */
  gap: 10px; /* 필요에 따라 간격 조정 */
}

ul.grid-col-nobbs > :nth-child(1){display: none;}

/* 첫 번째 요소: 10% -> 첫 번째 행 첫 번째 컬럼 */
ul.grid-col-nobbs > :nth-child(2) {
  grid-column: 1 / 3;
  grid-row: 1;
}


/* 나머지 3개 요소: 세 번째 행에 균등하게 배치 */
ul.grid-col-nobbs > :nth-child(3),
ul.grid-col-nobbs > :nth-child(4),
ul.grid-col-nobbs > :nth-child(5) {
  grid-row: 3;
}

ul.grid-col-nobbs > :nth-child(3) {
  grid-column: 1 / 2;
}

ul.grid-col-nobbs > :nth-child(4) {
  grid-column: 2 / 3;
}

ul.grid-col-nobbs > :nth-child(5) {
  grid-column: 3 / 4;
}
.bbs_area .ik-card .card-body-twocell {
  padding: 0; font-size:1rem;
}
.bbs_area .ik-card .card-body-twocell dl{margin-bottom:0px;}
/* .bbs_area .ik-card .card-body-twocell dl.tb-top dt{width:20%; border-bottom:0px; min-height: auto;}
.bbs_area .ik-card .card-body-twocell dl.tb-top dd{width:30%; border-bottom:0px; min-height: auto;} */
.bbs_area .ik-card .card-body-twocell dl:nth-child(1) dt{display: none;}
.bbs_area .ik-card .card-body-twocell dl:nth-child(1) dd{ height: 26px;min-height: auto; border-bottom: 0px;}
.bbs_area .ik-card .card-body-twocell dl:nth-child(1) dd:nth-child(1){width:25%; border-bottom:0px;}
.bbs_area .ik-card .card-body-twocell dl:nth-child(1) dd:nth-child(2){width:25%; border-bottom:0px;}

.bbs_area .ik-card .card-body-twocell dl:nth-child(2) dt {display: none;}
.bbs_area .ik-card .card-body-twocell dl:nth-child(2) dd {width:25%; border-bottom:0; min-height: auto;}

/* .bbs_area .ik-card .card-body-twocell dl:nth-child(2) dt {width:20%; border-bottom:0; min-height: auto;}
.bbs_area .ik-card .card-body-twocell dl:nth-child(2) dd {width:30%; border-bottom:0; min-height: auto;} */
.bbs_area .ik-card .card-body-twocell dl:nth-child(3) dt {width:20%; border-bottom:0; min-height: auto;}
.bbs_area .ik-card .card-body-twocell dl:nth-child(3) dd {width:80%; border-bottom:0; min-height: auto;}

.bbs_area .ik-card .card-body-twocell dl dd.memo-view img{width:100% !important; height:auto !important;}

.bbs_area .list-search-area{flex-direction: column;}
.bbs_area .list-search-area form input {
    width: 72%;
}

.bbs_area ul.grid-col-bbs {
  display: inline-block !important;
  width:100%;
      /* grid-auto-flow: row;
      grid-template-columns: 100% 33% 33% 33%;  */
}
.bbs_area ul.table-res li.cel1{display: none;}
.bbs_area ul.table-res li.cel2{clear: both; float:left; width:100%;}
.bbs_area ul.table-res li.cel3{clear: both; float:left; width:25%;}
.bbs_area ul.table-res li.cel4{float:left; width:25%;}
.bbs_area ul.table-res li.cel5{float:left; width:15%;}
.bbs_area ul.table-res li.cel6{float:left; width:35%;}
.bbs_area .bot_btn{margin:0px;}
.bbs_area ul.table-res li.cell-last {
    border-right: 0px solid #ddd;
}
.customer_area h3 {
    font-size: 1.6rem;
    margin-bottom: 25px;
}
.sort-destination {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 3%;
  row-gap: 0px;
}
.isotope-item {
  margin-bottom: 30px;
}
.item-box figure {
  border: 1px solid #ddd;
}
.item-box figure img {
  height: 230px;
  object-fit: cover;
}


.jangbi .jangbi-title h7 {
  color: #fff;
  background-color: var(--color-bad);
  padding: 10px 15px;
  border-radius: 30px;
  font-size: 1.0rem;
  font-weight: 400;
  margin-bottom: 5px;
  display: inline-block;
  width: 100%;
}

.jangbi .row {
  flex-direction: column;
  margin:0;
}
.jangbi .container{padding:0px;}
.jangbi-pic {
  width: 100%;
  height: auto;
  padding:0px;
}
.jangbi-pic img {
  border-radius: 10px;
}
.jangbi-text {
  width: 100%;
  padding: 10px 0;
}
.jangbi .jangbi-title {
  margin-bottom: 20px;
}
.jangbi h5 {
  color: #000;
  font-size: 1.1rem;
  font-weight: 500;
}
.jangbide {
  margin: 30px 0;
}

.jangbi .btn-bot{padding:0px;}

    
     /*습득물*/

 ul.bbstb-list2 {
      display: block !important; padding: 10px; min-height: 130px;
   }
 ul.bbstb-list2 li:nth-child(1){display: none;}
 ul.bbstb-list2 li:nth-child(2){font-size:1rem; min-height: 80px;}
 ul.bbstb-list2 li:nth-child(3){clear: both; float:left; width:25%; font-size: 0.75rem;}
 ul.bbstb-list2 li:nth-child(4){float:left; width:20%; font-size: 0.75rem;}
 ul.bbstb-list2 li:nth-child(5){float:left; width:25%; font-size: 0.75rem;}
 ul.bbstb-list2 li:nth-child(5) span{font-size: 0.65rem; padding: 3px 5px; min-width: 0px;}
 ul.bbstb-list2 li:nth-child(6){float:left; width:30%; font-size: 0.75rem; border-right: 0px;}


 /*로그인*/
 .login_section {
  margin-top: 50px;
}
 .login_section .card .card-body {
  flex-direction: column;
}
 .login_section .card .card-body .login_left{width:100%;}
 .login_section .card .card-body .login-form {
  text-align: center;
  padding: 0;
}
.login_section .card .card-body .login_left form .row .text-center{display: flex; flex-direction: row; justify-content: space-between;;}
.login_section .alink-btn {
  padding: 10px 0px;
}
.login_section .card .card-body .login_right{display: none;}

/*회원가입*/
#joinagree {
  padding: 0 5%;
}
#joinagree .col-md-12{width:100%;}
.join_section {
  margin-top: 50px;
}
.join_section .card .card-body {
  max-height: 300px;
}

.join_section .txt-center a {
  margin: 0;
  width: 100%;
  margin-bottom: 10px;
}

.m-btn-dd1, .m-btn-dd2{display: flex; flex-direction: row; justify-content: flex-start;}
.m-btn-dd1 input{width:65%;}
.m-btn-dd2 .col-md-8 {width:65%;padding-right: 0;}
.m-phone-dd{display: flex; flex-direction: row; justify-content: flex-start;}
.col-xs-3{width:30%;}
.m-zip-dd{display: flex; flex-direction: column;}
.m-zip-dd input{margin-bottom:10px;}
.bot-btn-area input.btns-big{width:100%;}

#checkIdModal .modal-body .row .col-8{width:50%; padding:0px;}
#checkIdModal .modal-body .row input{padding:0;}



/*습득물*/

.ik-card2 .card-header {padding: 10px; flex-direction: column; border: 0px solid #ddd;}  
.ik-card2 .card-header h5{font-size: 1rem; margin-bottom: 10px;}
.ik-card2 .card-header span{font-size: 0.85rem;}
.ik-card2 .card-header span bold:nth-child(1){padding:0 5px 0 0;}
.ik-card2 .card-header span bold:nth-child(2){padding:0 5px 0 20px;}
.ik-card2 .card-body {
  padding: 0;
}
.ik-card2 .card-body ul {
  font-size: 0.9rem !important;
  padding: 10px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-left:0px solid #ddd;
  border-right:0px solid #ddd;
  border-radius: 0px;
  margin-bottom: 0px;
  flex-wrap: wrap;
}
.ik-card2 .card-body ul li {
  font-size: 0.9rem; width: 50%; padding:5px 0;
}
.ik-card2 .card-body .card-text {
  font-size: 0.9rem;
  color: #2c2c2c;
  padding: 10px;
  margin: 0px;
  width: 100%;
  line-height: 1.5rem;
  border: 0px solid #ddd;
  border-radius: 0px;
  background-color: rgba(238, 238, 238, 0.5);
}

h5.re_subtit {font-size: 1rem;}
.reply-card .card-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px;
}
.reply-card .card-header h6 {
  font-size: 0.9rem;line-height: 1.5rem;
}
.reply-card .card-body .card-text {
  font-size: 0.9rem;
  padding: 0px;
}


.findid_area .form-group label{text-align: left;}
.findid_area .findid_btn{padding: 20px 10px;}

.pwchange_area .card-body{padding:20px !important; }
.pwchange_area .form-group label {width:40%;}
.pwchange_area .form-group input {
  width: 60%;
}

/*운행일지*/
.driving_section{margin:0px; padding:0px;}
.driving_section h3 { font-size: 1.4rem !important;}
.driving_section .ik-card-white {border: 0; padding: 0px;}

.driving_section .driving-route-area{display: flex;  flex-direction: column;}
.driving_section .driving-route-area label{display: inline-block; width:100%; text-align: left;}
.driving_section .driving-route-area input[name=date]{width:100%; clear:both; float:left;}
.driving_section .driving-route-area select[name=day_of_week]{width:100%; float:left;}
.driving_section .driving-route-area em{display: none;}


.bustime-group ul.bustime-list-inline {
    grid-template-columns: repeat(5, 1fr) !important;
}

.busline_area .busline-box .linebox .linebox_mid {
    font-size: 0.8rem;
    font-weight: 500;
    color: #353535;
}

h5.modal-title{font-size: 1.4rem; margin-bottom: 0px;}
.bustime-group h4 {
    font-size: 1.1rem;
}

.bustime-group h6{font-size: 1.0rem;}
.bustime-group ul li {
    border: 1px solid rgba(222, 222, 222, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 1px;
    font-size: 0.85rem;
    font-weight: 500;
}
.form-control {
    display: block;
    width: 100%;
    min-height: calc(1.8em + 0.75rem + 2px);
    padding: 0.65rem 0.75rem;
    font-size: var(--input-size);
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 1px solid #c7cbce;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}





































  }










  @media only screen and (min-width : 768px) {
    ul.botbtn{display: none;}
  }
  



























  
  /* JavaScript를 위한 유틸리티 클래스 */
  .navbar-collapse {
    display: none;
  }
  
  .navbar-collapse.show {
    display: block;
  }
  
  /* 바디 스크롤 방지 (메뉴 열렸을 때) */
  body.navbar-open {
    overflow: hidden;
  }


/* @media only screen and (man-width : 361px) {


    h2 {  font-size: 2.2rem; }
    h5 {  font-size: 1.2rem; }
    p { font-size: 1rem; text-align: justify;}
    .btn {
        font-size: 0.9rem !important;
        padding: 9px 26px !important;
    }



   .header_nav .kontainer .header_nav_body{display: flex; flex-direction: row; justify-content: space-between; align-items: center; width:100%;}
   #navbar{display: none;} 

}*/


