@charset "utf-8";

.hamburger-btn {
    display: none;
    cursor: pointer;
  }
.hamburger-btn .material-icons{font-size: 36px;}
  .hamburger-icon-show {
    display: inline-block !important;
  }
  
  .hamburger-hide {
    display: none;
  }
  
  .hamburger-toggle-show {
    animation: hamburger-toggle-show 0.1s ease 0s 1 forwards;
  }
  .collapsed-nav-container {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease-out;
    overflow: hidden;
    text-align: center;
    height: calc(100vh - 60px);
    transform: translateY(-100%);
  }
  .close-icons{display: none;}


@media screen and (max-width: 1200px){
    .sec-title{font-size: 26px !important}

    .hamburger-btn {display: block;}
    header nav .nav-menu-container {display: none !important}
    .show-collapsed-nav-container {animation: slideNav 0.4s ease-out 0s 1 forwards;background-color: #fff;}
    .nav-menu-item {margin: 15px 0;font-size: 2rem; list-style: none;}
    header .logo a img{width: 125px;}
    .hamburger-menu .material-icons{font-size: 40px;}
    header .badges .badge img{width: 50px;}

    .main_visual{padding: 55px 0;}
    .main_visual .main-swiper .swiper-slide{flex-direction: column;}
    .main_visual .main-swiper .swiper-slide .txt-box{width: 100%;}
    .main_visual .txt-box > h3{font-size: 2.5rem;}
    .main_section2 .flex{flex-direction: column;}
    .main_section2 .flex-item:nth-child(2){margin: 50px 0;}
    main.solutions_process .wide .left-box,
    main.solutions_process .wide .right-box{width: 100%;}
    main.solutions_process .wide .left-box img,
    main.solutions_process .wide .right-box img{width: 100%;}
}
@media screen and (max-width: 800px){
    .main_section4 .flex-container span{font-size: 24px;}
    .main_section4 .flex-container h4{font-size: 20px;}
    .main_visual .main_visual_title{font-size: 26px;}
    .main_section4 .flex-container p{font-size: 14px;}
    main.service_infomation .section2 #videoWrapper{height: 100%;}
    main.service_infomation .section2 #videoWrapper .caption{padding: 20px 0;}
    main.service_infomation .section2 h2{font-size: 20px;}
    main.service_infomation .section2 p{font-size: 14px;}
    main.noticeList .notice_header h2{font-size: 34px;}
    main.noticeList .notice_header p{font-size: 19px;}
    main.noticeList .notice_middle{padding: 20px 0; height: 100%;}
    main.noticeList .notice_middle .tab{flex-direction: column; gap: 20px;}
    main.noticeList .notice_contents .content_box button{flex-wrap: wrap;}
    main.noticeList .notice_contents .content_box button > p,
    main.noticeList .notice_contents .content_box button > div,
    main.noticeList .notice_contents .content_box button > span{flex: none;}
    main.noticeList .notice_contents .content_box button > p{margin-bottom: 20px;}
    main.noticeList .notice_contents .content_box button .content_wrp{width: 90%;}
    main.noticeList .notice_contents .content_box button span.material-icons{width: calc(10% - 20px) !important; margin-left: 20px !important;}
    main.solutions_process .section1{padding: 0;}
    main.solutions_process .section1 .section_wrapper .title-box .txt-ani{font-size: 42px;}
    main.solutions_process .section1 .section_wrapper .title-box p{font-size: 23px;}
    main.solutions_process .section1 .section_wrapper .wide ul li{margin-bottom: 20px;}
    main.solutions_process .section2 .section_wrapper > h2{font-size: 26px;}
    main.solutions_process .section2 .section_wrapper .img-box{flex-direction: column;}
    main.solutions_process .section2 .section_wrapper .img-box .img-card{width: 100%;}
    main.solutions_process .section1 .section_wrapper .wide ul li .wide-tit{font-size: 16px;}
    main.solutions_process .section1 .section_wrapper .wide ul li .wide-txt{font-size: 22px;}
    main.solutions_process .section1 .section_wrapper .wide ul li .wide-sub{font-size: 15px;}
    main.sample_introduction .section1 .section_wrapper > h2{font-size: 40px;}
    main.sample_introduction .section1 .section_wrapper > p{font-size: 16px;}
    main.sample_introduction .section1 .section_wrapper .card_wrapper .sample_card{margin: 15px;flex-direction: column;}
    main.sample_introduction .section1 .section_wrapper .card_wrapper .sample_card h3{font-size: 20px;}
    main.sample_introduction .section1 .section_wrapper .card_wrapper .sample_card p{font-size: 14px;}
    main.blogList .section_wrapper > h2{font-size: 40px;}
    main.blogList .section_wrapper > p{font-size: 16px;}
    main.blogList .section_wrapper #dataList ul li{width: calc(50% - 20px);}
    main.blogList .section_wrapper #dataList ul li a .card .card-img-container .card-img h1{font-size: 28px;}
    main.blogView .section_wrapper .blog-detail h2{font-size: 42px;}
    main.blogView .section_wrapper .blog-detail p{font-size: 16px;}
    main.blogView .section_wrapper .blog-detail .list-box h3{font-size: 24px;}
    main.blogView .section_wrapper .blog-detail .list-box h3{font-size: 20px;}
    main.blogView .section_wrapper .blog-detail .list-box ul li{font-size: 16px;}
    main.blogView .section_wrapper .blog-detail .comments-area .comments-body .right-body .contents{text-align: left;}
    main.blogView .section_wrapper .blog-detail .comments-area .comments-foot{padding: 35px 0;}
    main.blogView .section_wrapper .blog-detail .comments-area .comments-body .left-body{min-width: 50px;}
    footer .flex{flex-direction: column}
    footer .flex .flex-item:nth-child(2){margin: 20px 0;}
    footer .flex .flex-item h3{font-size: 16px;}
    footer .flex .flex-item div p{font-size: 14px;}
    footer .copylight{font-size: 12px;}
}
@media screen and (max-width: 480px) {
    .main_visual .txt-box {
      left: 46%;
    }
    .main_visual .txt-box > h3 {
        font-size: 1.2rem;
    }
    .main_visual .txt-box > p {
      font-size: 0.8rem
    }
    .main_visual .all-box {
      bottom: 0;
      height: 30px;
    }
    .main_section4 .bg-img{display: none;}
  }


@keyframes hamburger-toggle-show {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
  }
  
  @keyframes slideNav {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(45px); 
    }
  }