@media (max-width: 480px) {
  .inner {width: 100%; padding:0 20px;}  
  .popup .close {top:3%; right: 3%;}
  .popup .close img{width: 80%;display: block; }


  .mob-side-menu {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 999;
  }

  .mob-side-menu .side-close{
    position: absolute;
    right: 15px;
    top: 5px;
    z-index: 1;
  }

  .mob-side-menu .search-box{
    padding: 50px 0;
    background-color: #00a0e9;
    position: relative;
  }

  .mob-side-menu .search-box::after{
/*    content: '\f002'; */
    font-family: 'fontawesome';
    position: absolute;
    top:50%;
    right:20%;
    transform: translateY(-50%);
    font-size: 25px;
  }

  .mob-side-menu .search-box .search {
    text-align: center;
  }
  .mob-side-menu .search-box .search input[type=text]{
    height: 40px;
    width: 70%;
    outline: none;
    border:none;
    background-color: #80d0f4;
    padding: 0 20px;
    font-size: 16px;
    border-radius: 20px;
  }

  .mob-side-menu .accordion_wrap{
  }

  .mob-side-menu .accordion_wrap .que{
    padding: 15px 20px;
    font-size: 18px;
    border-bottom: 1px solid #eee;
    position: relative;
  }

  .mob-side-menu .accordion_wrap .que.on::after{
    transform: rotate(180deg);
    top:15%;
  }

  .mob-side-menu .accordion_wrap .que::after{
   content: '\f107'; 
   font-family: 'fontawesome';
   position: absolute;
   font-size: 30px;
   right:10px;
   top:50%;
   transform: translateY(-50%);
  }

  .mob-side-menu .accordion_wrap .que.on{
    background-color: #e4e5e7;
  }
  .mob-side-menu .accordion_wrap .anw{
    padding: 5px 30px;
    display: none;
  }
  .mob-side-menu .accordion_wrap .anw a{
    display: block;
    font-size: 15px;
    margin-bottom: 5px;
    position: relative;
  }
  .mob-side-menu .accordion_wrap .anw a::after{
    content: '\f105';
    font-family: 'fontawesome';
    position: absolute;
    color: #47cdbb;
    font-size: 15px;
    right:10px;
    top:50%;
    transform: translateY(-50%);
  }

  .header {display: none;}
  .header {display: none;}
  .header-mob {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: absolute;
    z-index: 998;
  }
  .header-mob .text {
    position: absolute;
    top:100%;
    left:20px;
  }

  .header-mob .text .text1 {width: 250px; margin-bottom: 10px;}
  .header-mob .text .text2 {width: 300px;}
  .header-mob .text .text1 img{width: 100%; display: block;}
  .header-mob .text .text2 img{width: 100%; display: block;}

  .header-mob .mob-logo{margin-left: auto; margin-right: auto;}
  .banner-text {height: 450px; width: 100%;}
  .banner-text .best-text {display: none;}
  .banner-text .service-group {left: 20px; top:45%;}
  .banner-text .service-group a {margin-bottom: 10px;}
  .banner-text .service-group a img{width: 200px;}
  #banner-video {height: 450px;}
  .header .menu .gnb{display: none;}
  #m2 {padding: 25px 0;}
  .m2 .main-tit {font-size: 23px; margin-bottom: 20px;}
  .m2 .sub-tit span {font-size: 16px;}
  .m2 .sub-tit span em {font-size: 16px;}
  .m2 .right-img {display: none;}
  .m2 .box {
    width: 100%;
    height: 220px;
    position: relative;
    left:50%;
    transform: translateX(-50%);
    display: flex;
  }
  .m2 .box a {width: 49%; height: 48%;}
  .m2 .box a img{width: 110px;}
  .m2 .box .company {left:0;}
  .m2 .box .service {top:0; left: 51%;}
  .m2 .box .business {top:50%; left:0;}
  .m2 .box .partner {top:50%; left:51%;}
  #m3 {display: none;}
  .m4 {display: none;}
  .m4-mob {display: block; width: 100%; padding-bottom: 50px;}
  .m4-mob .tit {margin-bottom: 30px; font-size: 27px; text-align: center;}
  .m4-mob .tit span{font-weight: 700;}
  .m4-mob .m4-img{width: 100%;}
  .m4-mob .m4-img img{width: 100%; display: block;}
  .m4 {position: relative; height: 150px; z-index: -1;}
  .m4 .m4-img {position: absolute; left: -130px; top: -40px;}
  #m5 {padding-top: 20px; display: none;}
  .m5 {height: 140px;}
  .m5-img {position: absolute; left: 0px; width: 100%;}
  .m5-img img {width: 100%;}
  .m7 {flex-direction: column;}   
  .m6 {display: none;}


  .m7 {height: 450px;}
  .m7 .left{width: 100%;}
  .m7 .left .tit .left-icon img {width: 100px;}
  .m7 .left .form .line label {font-size: 16px;} 
  .m7 .left .tit .left-text div{font-size: 18px; font-weight: 300;}
  .m7 .left .form .line2 label {font-size: 14px;}
  .m7 .left .form .line input[type=text] {height: 25px; width: 200px; font-size: 16px;}
  .m7 .left .form .line2 input[type=checkbox] { width: 20px; height: 20px;}
  .m7 .left .form .line3{text-align: right; margin-right: 0; margin-top: 10px;}
  .m7 .left .form .line3 .appli {
    padding: 5px 10px;
    background-color: #fff;
    font-size: 15px;
    border-radius: 20px;
  }

  .m7 .right {width: 100%; display: none;}
  .m7 .right .tit .right-icon img {width: 100px;}
  .m7 .right .form .line label {font-size: 16px;} 
  .m7 .right .tit .right-text div{font-size: 18px; font-weight: 300;}
  .m7 .right .right-img {width: 100%;}
  .m7 .right .right-img img {width: 100%;}
  .m7 .right .right-img .the-more { padding: 5px 10px; font-size: 15px;} 
  .m7 .right .right-img .the-more::after {display: none;} 

  .m8 {padding-top: 50px;}
  .m8 .main-tit{font-size: 27px; margin-bottom: 15px}
  .m8 .m8-menu {margin-bottom: 30px;}
  .m8 .m8-menu a {font-size: 16px; margin-right: 5px; padding-right: 0;}
  .m8 .biz-plus-box {display: flex; justify-content: center; top:42%; } 
  .m8 .biz-plus-box .biz-plus:nth-child(n+2){display: none;}
  .m8 .more {
    top: 12%;
    padding: 3px 10px;
    font-size: 12px;
    background-color: #ff0000;
  }


  .m9 {padding-top: 370px; height: 980px;}
  .m9 .tit {font-size: 27px;}
  .m9 .tit-sub {font-size: 16px; margin-bottom: 20px; color: #fff;}
  .m9 .box .item {width: 100%;}
  .m9 .box .item:nth-child(n+2) {display: none;}
  .m9 .more {
    top:38.5%;
    padding: 3px 10px;
    font-size: 12px;
    background-color: #1886ca;
  }


  .m10 {padding: 35px 0;}
  .m10 .tit {font-size: 27px; margin-bottom: 20px;}
  .m10 .customer-box {display: flex; flex-wrap: wrap; gap:10px;}
  .m10 .customer-box .a1{width: 100%;}
  .m10 .customer-box .a1 img{display: block; width: 100%;}
  .m10 .customer-box .linebox {display: flex; justify-content: center; align-items: center; gap:10px}
  .m10 .customer-box .linebox a img{width: 100%;}

  .footer {padding-top: 50px; padding-bottom: 120px; display: flex; flex-direction: column;}
  .footer .ft-logo img{width: 100%;}
  .footer .ft-desc .line span{font-size: 16px; margin-bottom: 5px;}
  .footer .ft-desc .line1 span{display: block; margin-right: 10px;}
  .footer .ft-desc .line3 span{display: block; margin-right: 10px;}
}