@media (max-width:1196px){

  #sub0102 .direction ul { flex-wrap: wrap; }

}

@media (max-width:1180px){

  #header::after { display: none; }
  #h_gnb { display: none; }
  #nav_btn { display: block; }
  #m_slider .info { width: 100%; }
  #my_wrapper .area ul li a { height: 300px; }
  #my_wrapper .recruit { background-position: 30% 50%; }
  #my_wrapper .recruit .info { width: 400px; height: 400px; padding: 100px 65px 0 0; }

  #sub0101 .inner_wrap > img { width: 45%; }
  #sub0101 .inner_wrap > .info { width: 55%; }
  #sub0101 .m { display: block; }
  #sub0101 .m .style_01 { font-size: 16px; }
  #sub0101 .d { display: none; }

}





@media (min-width:768px) and (max-width:1023px){

  #my_wrapper .area ul { flex-wrap: wrap; }
  #my_wrapper .area ul li { width: 49%; }

  #sub0101 .inner_wrap { flex-wrap: wrap; gap: 10vw; }
  #sub0101 .inner_wrap > img { width: 100%; }
  #sub0101 .inner_wrap > .info { width: 100%; }
  #sub0101 .m .style_01 { font-size: 18px; }


  #sub0102 table { width: 100%; }
  #sub0103 .flex_box { flex-direction: column-reverse; gap: 30px; }
  #sub0103 .inner_wrap > div { margin-bottom: 100px; }
  #sub0103 .box_01 li > div { margin-bottom: 30px; }
  #sub0103 .box_03 ul li { width: 100%; }
  #sub0103 .box_04 .flex_box { flex-direction: column; }

  #style_h3 { font-size: 26px; margin-bottom: 50px; }
  #sub04 ul { flex-wrap: wrap; }
  #sub04 ul li { width: 48%; padding: 35px 18px; }





}





@media (max-width:767px){

  .inner_wrap { padding: 0 20px; }

  #header { height: 60px; padding: 0 20px; }
  #h_logo a img { height: 20px; }
  #notice { display: none; }
  #sitemap { width: 100%; }

  #m_slider { background-position: 85% 50%; }
  #m_slider .info { padding: 0 20px; background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); }
  #m_slider .info .title { margin-bottom: 10px; font-size: 40px; color: #fff; }
  #m_slider .info .sub { font-size: 20px; color: #00b2ed; }
  #m_slider .info .desc { font-size: 14px; color: #fff; }

  #my_wrapper h2 { font-size: 40px; }
  #my_wrapper .area { padding: 100px 20px; }
  #my_wrapper .area h2 { margin-bottom: 50px; }
  #my_wrapper .area ul { flex-wrap: wrap; }
  #my_wrapper .area ul li { width: 100%; }

  #my_wrapper .recruit h2 { margin-bottom: 10px; }
  #my_wrapper .recruit .info { left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 80px 24px; text-align: center; }
  #my_wrapper .recruit .info { width: 300px; height: 300px; }
  #my_wrapper .recruit p { margin-bottom: 20px; font-size: 16px; line-height: 1.5; }
  #my_wrapper .recruit a { font-size: 16px; }


  #s_top { display: none; }
  #sub .inner_wrap { padding: 100px 20px; }
  #sub h2 { margin-bottom: 50px; padding-left: 80px; font-size: 30px; }

  #sub0101 .inner_wrap { flex-wrap: wrap; gap: 100px; }
  #sub0101 .inner_wrap > img { width: 100%; border-radius: 10px; }
  #sub0101 .inner_wrap > .info { width: 100%; }
  #sub0101 .m .style_01 { font-size: 16px; }

  #sub0103 h3 { padding-left: 15px; margin-bottom: 50px; font-size: 20px; }
  #sub0103 h3::after { width: 5px; height: 18px; }
  #sub0102 .table { overflow-x: scroll; }
  #sub0102 .table::after { content:"옆으로 넘겨보세요!"; display: block; text-align: center; padding-top: 20px; font-size: 16px; }
  /***** scrollbar*****/
  ::-webkit-scrollbar { height: 5px; width: 5px; }
  ::-webkit-scrollbar-thumb { border-radius: 30px; background-color: #1a1a1a; }
  ::-webkit-scrollbar-track { background-color: #ddd; }
  #sub0102 table { width: 212%; }
  #sub0102 table tr th { font-size: 14px; }
  #sub0102 table tr > * { font-size: 14px; line-height: 30px; }
  #sub0102 table tr div { max-width: 100px; }
  #sub0103 .flex_box { flex-direction: column-reverse; gap: 30px; }
  #sub0103 .desc { width: 100%; font-size: 14px; }
  #sub0103 .title { font-size: 18px; margin-bottom: 10px; }
  #sub0103 .inner_wrap > div { margin-bottom: 100px; }
  #sub0103 .box_01 li > div { margin-bottom: 30px; }
  #sub0103 .box_03 ul li { width: 100%; }
  #sub0103 .box_04 .flex_box { flex-direction: column; }

  #sub0102 .direction ul li { width: 100%; }
  #sub0102 .direction .zoom { display: none; }

  #style_h3 { font-size: 20px; margin-bottom: 50px; }
  #sub04 ul { flex-wrap: wrap; }
  #sub04 ul li { width: 100%; }

  #sub0303 .box_01 h3 { padding-left: 15px; margin-bottom: 50px; font-size: 20px; }
  #sub0303 .box_01 h3::after { width: 5px; height: 18px; }
  #sub0303 .flex_box { flex-wrap: wrap; justify-content: center; }
  #sub0303 .flex_box .info { width: 100%; text-align: center; }

  #footer .inner_wrap { flex-wrap: wrap; }
  #footer .flex_box { gap: 15px;  }





}