@font-face {
    font-family: 'noto-sans';
    src: url('font/NOTOSANSKR-REGULAR.TTF') format('truetype');
    font-weight: 400;
}

/* 공통 */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'noto-sans';
}
.logo img {
   width: 160px;
}
.logo-white img  {
   width: 140px;
}

.width-1300 {
    width: 1300px;
    margin: 0 auto;
}
a {
    text-decoration: none;
    color: #333;
}
h1,h2,h3,h4 {
    margin-top: 0;
}
p {
    margin: 0;
}
ul li {
   list-style: none;
}

* {
    box-sizing: border-box;
    letter-spacing: -1px;
}
.text-left {
    text-align: left;
 }
 .text-right {
    text-align: right;
 }
 .text-center {
    text-align: center;
 }

 /* 메인화면 */
 main {
    background: url(img_pc/main-bg.png) center center /cover;
    width: 100%;
    padding: 400px 0;
 }
 main h1 {
    font-size: 60px;
    font-weight: 500;
    margin-top: 0;
    animation: slideUp 0.8s;
    
 }
 main h1 strong {
    font-weight: 700;
 }
 .go-ask {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    padding: 15px 30px;
    border-radius: 40px;
    border: 3px solid #fff;
    display: inline-block;
    transition: .3s;
    cursor: pointer;
    animation: slideUp 0.8s;
 }
 .go-ask:hover {
    background-color: #fff;
    color: #333;
    
 }
 .go-ask span {
    margin-right: 10px;
 }
 .title {
    margin-bottom: 60px;
 }
 .title h2 {
    color: #003270;
    font-weight: 600;
    font-size: 36px;
 }
 .title p {
    font-size: 20px;
 }

 /* 링크 이동 */
 .link-go {
    padding: 80px 0;
 }
 .link-inner {
    margin: 60px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
 }
 .link-inner a {
    display: inline-block;
    border: 1px solid #5E84E6;
    padding: 30px;
    width: 640px;
    border-radius: 30px;
    position: relative;
    transition: .3s;
 }
 .link-inner a h3 {
    font-size: 20px;
    font-weight: 600;
    color: #445C99;
    transition: .3s;
 }
 .link-inner a img {
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 50px;
    height: 50px;
    transition: .3s;
 }
 .link-inner a img.hover {
   opacity: 0;
 }
 .link-inner a:hover {
    color: #fff;
    background-color: #93ADEE;
 }
 .link-inner a:hover h3 {
    color: #fff;
 }

 /* 소개 */
 .introduce {
    background-color: #F6F6F6;
    padding: 60px;
 }
 .introduce-desc {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 30px;
 }
 .introduce-desc h3 {
    font-size: 28px;
    margin-bottom: 0;

 }

 /* 고객사 */
 .client {
    background-color: #EFF9FF;
    padding: 60px;
 }
 .client-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
 }
 .mo-updown {
    display: none;
 }

 /* 스크롤라 애니메이션 */
 
 /* animation */
 @keyframes slideUp {
   0% {
       opacity: 0;
     }
     40% {
       opacity: 0;
       transform: translateY(40px);
     }
     100% {
       opacity: 1;
       transform: translateY(0);
     }
}

   .link-go.motion .title,
   .link-go.motion .link-inner,
   .introduce.motion .title,
   .introduce.motion .intoduc-img,
   .introduce.motion .introduce-desc,
   .client.motion .title,
   .client.motion .mo-updown,
   .client.motion .client-inner {
      animation: slideUp 0.8s;
   }

   
   /* nav */
   nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      padding: 0;
      z-index: 300;
   }
   nav .width-1300{
      display: flex;
      justify-content: space-between;
      align-items: center;
   }
   nav .logo {
      margin-bottom: -10px;
   }
   nav ul {
      display: flex;
      padding: 0;
   }
   nav ul li {
      font-size: 18px;
      margin-left: 40px;
      font-weight: 600;
      padding: 40px 0;
      cursor: pointer;
   }
   nav ul .nav-li-hover {
      position: relative;
   }
   
   
   nav ul li .sub-nav-hover {
      padding: 15px;
      border-radius: 20px;
      background-color: #003270;
   
      color: #fff;
      display: flex;
      flex-direction: column;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 140%;
      top: 60%;
      display: none;
      transform: .3s;
   }
   nav ul li .sub-nav-hover.active {
      display: block;
   }
   
  
   nav ul li .sub-nav-hover li {
      padding: 0;
      margin: 0;
      margin-bottom: 10px;
   }
   nav ul li .sub-nav-hover li a {
      color: #fff;
      font-weight: 400;
      font-size: 16px;
   }
   nav ul li .sub-nav-hover li a:hover {
      color: #5E84E6;
   }
   nav.on {
      background-color: #fff;
   }
  

   /* footer */
   footer {
      padding: 30px 0;
      background-color: #07203E;
   }
   footer ul {
      margin: 0;
      padding: 0;
      display: flex;
      margin-bottom: 20px;
   }
   footer ul li {
      margin-right: 20px;
     
   }
   footer ul li a,
   .footer-inner p {
      color: #fff;
   }
   footer ul li a:hover {
      text-decoration: underline;
   }
   footer ul li:after {
      content: '|';
      color: #fff;
      padding-left: 20px;
   }
   .footer-inner {
      display: flex;
      align-items: center;
   }
   .footer-inner .logo-white {
      margin-right: 20px;
   }
   .footer-inner p {
      font-size: 13px;
   }

   /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
      회사소개 */

      .depth {
         margin-top: 138px;
         background-color: #F6F6F6;
         padding: 15px 0;
      }
      
      /* 기업소개 */
      .corp {
         padding: 60px 0;
         background: url(img_pc/corp-bg.png) center center /cover;

      }
      .corp-img {
         display: flex;
         position: relative;
         justify-content: center;
         align-items: center;
         width: 848px;
         margin: 30px auto;
         
      }
     
      .corp-img-item {
      position: relative;
         width: 323px;
         height: 336px;
      }
      .corp-img-item:nth-of-type(2) {
         margin: 0 -40px;
      }
     
      .corp-img-item span {
         font-weight: 600;
         font-size: 24px;
         position: absolute;
         top: 50%;
         left: 50%;
         color: #fff;
         transform: translate(-50%, -50%);
      }

      /* 경영이념 */
      .management {
         padding: 60px 0;
         background-color: #F6F6F6;
      }
      .manage-inner {
         display: flex;
         gap: 50px;
      }
      .manage-inner .top p {
         font-size: 24px;
         color: #445C99;
         font-weight: 600;

      }
      .manage-inner .top .sub-title-after {
         font-size: 18px;
         position: relative;
      }
      .manage-inner .top .sub-title-after:after {
         content: '';
         width: 30px;
         height: 3px;
         background-color: #F19D00;
         position: absolute;
         left: 0;
         top: 40px;
      }
      .manage-inner .bottom {
         margin-top: 40px;
      }
      .manage-item {
         padding: 40px;
         border-radius: 20px;
         width: 50%;
         box-shadow: 0 0 20px #33333347;
      }
      .manage-inner .bottom p strong {
         height: 48px;
         display: block;
      }

      /* 오시는길 */
      .street {
         padding: 60px 0;
      }

      /* @@@@@@@@@@@@@@@@@@@@@ 검색광고 */

      .search-inner {
         padding: 60px 0;
      }
    
      .search-inner .search-desc h3 {
         font-size: 24px;
         font-weight: 700;
         color: #445C99;
      }
      .search-inner.two,
      .search-inner.four {

         background-color: #EFF9FF;
      }
      .search-inner .search-desc {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 60px 0;
      }
      .search-inner.two .search-desc,
      .search-inner.four .search-desc {

         flex-direction: row-reverse;
         background: url(img_pc/search-desc-bg.png) center center /cover;
         height: 392px;
      }
      .search-inner .search-desc .desc {
         width: 800px;
      }
      .search-inner .search-desc  {
         padding: 40px;
         margin-top: 30px;
        
      }
      .search-after {
         position: relative;
      }
      .search-after:after {
         content: '';
         width: 100%;
         height: 8px;
         background-color:#F19D00;
         position: absolute;
         bottom: 2px;
         left: -10px;
         z-index: -3;
      }
      .search-after.two:after {
         content: '';
         background-color: #93ADEE;
      }

      /* 데코 */
      .search-inner.two,
      .search-inner.four {
         position: relative;
         z-index: 10;
        
      }
      .search-inner.two .search-desc,
      .search-inner.four .search-desc{
         backdrop-filter: blur(5px);
         -webkit-backdrop-filter: blur(5px);
      }
      .search-inner.two .search-deco {
         position: absolute;
         right: 0;
         top: 200px;
      }
      .search-inner.four .search-deco {
         position: absolute;
         left: 0;
         z-index: -3;
         bottom: 20px;
      }


      /* 애니메이션 */
      
   .corp.motion .width-1300,
   .management.motion .width-1300,
   .street.motion .width-1300,
   .search-inner.motion  .width-1300 {
      animation: slideUp 0.8s;
   }

   /* @@@@@@@@@@@@@@@@@@@@@@@@@
   배너광고 */
   .banner {
      padding: 60px 0;
   }

   /* 포털배너 */
   .potal {
      padding: 60px 0;
      background: url(img_pc/banner-bg.png) center center /cover;
      
   }
   .potal .title,
   .potal .title h2 {
      color: #fff;
   }

   /* 종류 */
   .banner-type {
      padding: 60px 0;
   }
   .banner-items {
      display: flex;
      gap: 40px;
   }
   
   .banner-item {
      border-radius: 30px 30px 120px 30px;
      background-color: #D2DFFF;
      padding: 40px;
      margin-bottom: 40px;
      width: 50%;
      position: relative;
      box-shadow: 0 0 20px #33333347;
      transition: .3s;
   }
   .banner-item:hover {
      transform: translate(-10px, -10px);
   }
   .banner-item.bg-white {
      background-color: #f6f6f6;
   }
   .banner-item  h3 {
      font-size: 34px;
      margin-top: 20px;
   }
  .banner-item .banner-type-deco {
   position: absolute;
   top: 30px;
   right: 30px;
  }
  /* 배너 예시 */
  .banner-ex {
   padding: 60px 0;
   background-color:#EFF9FF;
   position: relative;
   z-index: 10;
  }
  .banner-ex-item {
   margin: 120px 0;
  }
  .banner-desc {
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   background: url(img_pc/search-desc-bg.png) center center /cover no-repeat;
   padding: 30px;
   height: 392px;
   text-align: center;
   align-content: center;
   margin-top: 30px;
   }
   .banner-desc h3 {
      font-size: 34px;
      color: #003270;
   }
   /* 데코 */
   .banner-deco {
      position: absolute;
      z-index: -3;
   }
   .banner-deco.one {
      left: 0;
      top: 500px;
   }
   .banner-deco.two {
      right: 0;
      top: 50%;
   }
   .banner-deco.three {
      left: 0;
      bottom: 100px;
   }

   /* @@@@@@@@@@@@@@@@@@@@@@@@
     바이럴광고 */
     .viral {
      padding: 60px 0;
      background: url(img_pc/viral-bg.png) center center /cover;
      
     }
     .viral .title {
      margin-bottom: 0;
     }
     .viral-type {
      padding: 80px 0;
     }
     .viral-item {
      width: 100%;
      border-radius: 30px 0 30px 0;
      box-shadow: 0 0 20px #33333347;
      display: flex;
      background-color: #f6f6f6;
      margin-bottom: 60px;
     }
     .viral-item:nth-of-type(2),
     .viral-item:nth-of-type(4) {
      background-color: #EFF9FF;
      flex-direction: row-reverse;
     }
     .viral-item .desc {
      padding: 30px;
      align-content: center;
     }
     .viral-item .desc h3 {
      font-size: 34px;
      color: #07203E;
      position: relative;
     }
     .viral-item .desc h3::after {
      content: '';
      width: 50px;
      height: 4px;
      background-color:#F19D00;
      position: absolute;
      top: 60px;
      left: 0;
     }
     .viral-item img {
      height: 100%;
     }
     /* @@@@@@@@@@@@@@@@@@@@@@@@
     SNS광고 */

     .sns {
      padding: 60px 0;
     }
     .title-font-big {
      font-size: 34px;
     }
     /* 페이스북 */
     .facebook {
      margin-top: 240px;
      background: url(img_pc/facebook-bg.png) left top no-repeat;
      position: relative;
     }
     .facebook .desc {
      width: 740px;
      padding: 60px 0 240px;
     }
     .facebook-deco {
      position: absolute;
      right: 250px;
      bottom: 150px;
     }

     /* 장점 */
     .sns-benefit {
      padding: 240px 0;
     }
     .sns-benefit .sns-benefit-inner {
      display: flex;
      gap: 30px;
     }
     .sns-benefit .item {
      width: 33.333%;
     }
     .sns-benefit .item p {
      height: 90px;
     }
     .sns-benefit .item h3 {
      margin-top: 20px;
     }

     /* 인스타 */
     .insta {
      background: linear-gradient(#FFD7E3, #F7AFC5);
      width: 100%;
      height: 100%;
      padding: 500px 0 60px;
      position: relative;
      margin-top: 240px;
     }
     .insta-deco {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -180px;
     }
     .h3-after {
      position: relative;
     }
     .h3-after::after {
      content: '';
      width: 50px;
      height: 5px;
      background-color:#07203E;
      position: absolute;
      top: 50px;
      left: 0;
     }
     .insta-h3-after {
      position: relative;
     }
     .insta-h3-after::after {
      content: ''; 
      width: 50px;
      height: 5px;
      top: 50px;
      left: 50% !important;
      background-color:#07203E;
      position: absolute;
      transform: translateX(-50%);
     } 

     /* @@@@@@@@@@@@@@@@@@@@ 
        영상제작 */
        .video {
         padding: 60px 0;
        

        }
        .video-benefit  {
         padding: 60px 0 240px;
         background: url(img_pc/video-bg-img.png) center bottom /cover no-repeat;
        }
        .video-benefit .items-inner {
         display: flex;
         flex-wrap: wrap;
         gap: 30px;
         position: relative;
        }
        .video-benefit .items {
         width: 393px
        }
        .video-benefit .items:nth-of-type(1) .desc {
         background: url(img_pc/video-img01.png) center center /cover no-repeat;
        }
        .video-benefit .items:nth-of-type(2) .desc {
         background: url(img_pc/video-img02.png) center center /cover no-repeat;
        }
        .video-benefit .items:nth-of-type(3) .desc {
         background: url(img_pc/video-img03.png) center center /cover no-repeat;
        }
        .video-benefit .items:nth-of-type(4) .desc  {
         background: url(img_pc/video-img04.png) center center /cover no-repeat;
        }
        .video-benefit .items:nth-of-type(5) .desc {
         background: url(img_pc/video-img05.png) center center /cover no-repeat;
        }
        .video-benefit .items .desc {
         
    
         color: #fff;
         margin-top: 20px;
         position: relative;
         height: 552px;
        }
        .video-benefit .items .desc-inner {
         position: absolute;
         height: 50%;
         z-index: 10;
         padding: 30px;
         left: 0;
         bottom: 0;
      }

        .video-benefit .items .desc-inner::before {
         content: '';
         background-color:  #3333335e;
         left: 0;
         position: absolute;
         bottom: 0;
         width: 100%;
         height: 100%;
         z-index: -3;
        }
      .video-deco {
         position: absolute;
         right: -160px;
         bottom: 10px;
      }

      /* 순서 */
      .order {
         padding: 120px 0 60px;

      }
      .order h3 em {
         font-style: normal;
         color: #003270;
      }
      .order-inner .order-items p {
         font-size: 20px;
      }
      .order-inner .order-items p:first-of-type {
         font-weight: 600;
         margin-bottom: 70px;
      }
      .order-inner .order-items .ico-deco-one {
        
         position: relative;
      }
      .order-inner .order-items .ico-deco-one::before {
         content: '';
         background: url(img_pc/icon/ico-video01.png) left top no-repeat;
         width: 70px;
         height: 64px;
         position: absolute;
         left: -125px;
         top: -50%;
      }
      .order-inner .order-items .ico-deco-two {
         position: relative;
      }
      .order-inner .order-items .ico-deco-two::before {
         content: '';
         background: url(img_pc/icon/ico-video-02.png) left top no-repeat;
         width: 70px;
         height: 64px;
         position: absolute;
         left: -120px;
         top: -50%;
      }
      
      .order-inner .order-items {
         padding-left: 200px;
         margin-bottom: 70px;
         margin-top: 60px;
      }
      .order-inner {
         position: relative;
      }
      .order-inner::before {
         content: '';
         background: url(img_pc/icon/video-line.png) left top no-repeat;
         width: 3px;
         height: 100%;
         position: absolute;
         left: 106px;
         top: 0;
         background-size: 100%;
         
      }
      .order-items .underline {
         display: inline-block;
         position: relative;
      }
      .order-items .underline::after {
         content: '';
         width: 100%;
         height: 10px;
         left: 0;
         bottom: -1px;
         background-color:#f19d007f;
         position: absolute;
         z-index: -2;
      }

      /* @@@@@@@@@@@@@@@@@@@@@@@@
         홈페이지 */
      .homepage {
         padding: 60px 0;
      }
      .hp-inner {
         padding: 400px 0;
         background-color:#EFF9FF;
      }
      .benefit-inner.one {
         background: url(img_pc/homepage-bg01.png) left top no-repeat;
        position: relative; 
        height: 100%;
        padding: 220px 0 300px;
      }
      .benefit-inner.one .hp-img.one {
         position: absolute;
         top: -100px;
         right: 100px;
      }
      .benefit-inner.two {
         background: url(img_pc/homepage-bg02.png) right top no-repeat;
         position: relative; 
         height: 100%;
         padding: 220px 0 500px;
         margin-top: 100px;
      }
      .benefit-inner.two .hp-img.two {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         left: 200px;
      }
      .benefit-inner.two .desc {
         position: absolute;
         right: 100px;
         top: 50%;
         transform: translateY(-50%);
      }
      .benefit-inner.three{
         background: url(img_pc/homepage-bg03.png) left  bottom no-repeat;
         position: relative; 
         height: 100%;
         padding: 500px 0 500px;
         margin-top: 100px;
      }
      .benefit-inner.three .hp-img.three {
         position: absolute;
         top: 100px;
         left: 50%;
         transform: translateX(-50%);
      }
      .benefit-inner.three .desc {
         position: absolute;
         top: 80%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 600px;
      }

   .hp-icon {
      padding: 60px 0;

   }
   .hp-icon .items {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      position: relative;
   }
   .hp-icon .items::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 1px;
      background-color: #ddd;
      top: 50%;
      left: 0;
   }
   .hp-icon .items::after {
      content: '';
      position: absolute;
      width: 1px;
      height: 100%;
      background-color: #ddd;
      top:0;
      left: 50%;


   }
   .hp-icon .items .item {
      text-align: center;
      padding: 60px 0;
      height: 516px;
   }
   .hp-icon .items .item h3 {
      margin-top: 40px;
   }



   /* @@@@@@@@@@@@@@@@@@
   문의하기 */
   .ask {
      background: url(img_pc/ask-bg.png) center center /cover no-repeat;
      padding: 60px 0;
   }
   .ask-inner {
      margin: 60px 0;
   }
   .ask-item {
      margin-bottom: 30px;
   }
   .ask-inner h3.title-font-big {
      font-size: 28px;
      margin-bottom: 10px;
   }
   .ask-item input,
   .ask-item textarea,
   .ask-item .personal {
      width: 100%;
      padding: 15px;
      border-radius: 15px;
      border: 1px solid #ddd;
      font-size: 17px;
   }
.ask-inner input[type=checkbox] {
   display: none;
}
.ask-inner input + em {
   background: url(img_pc/icon/btn-checkbox.png) left top no-repeat;
   width: 20px;
   height: 20px;
   margin-right: 10px;
   vertical-align: middle;
   display: inline-block;
   background-position: left;
   background-size: 40px;
}
.ask-inner input:checked + em {
   background-position: right;
} 
.btn-ask {
   width: 100%;
   background-color: #445C99;
   padding: 15px;
   border-radius: 15px;
   font-size: 20px;
   font-weight: 600;
   color: #fff;
   display: block;
   margin-top: 30px;
   cursor: pointer;
   border: none;
}

/* 포털배너 디자인 */
/* .potal-slide-inner {
   display: flex;
   gap: 20px;
} */

.potal-slide {
   
   background: #ffffff71;
   backdrop-filter: blur(5px);
   border: 3px solid #ffffff6e;
   /* width: 33.333% !important; */
   border-radius: 30px;
   /* width: calc(100% * (1/4)); */
   overflow: hidden;
}
.potal-slide img {
   width: 100%;
   
}
.potal-slide .desc {
   padding: 30px;
}
.potal-slide .desc h3.title {
   font-size: 28px;
   margin-bottom: 20px;
}

.potal-slide .desc p {
   color: #fff;
}
@media (min-width: 991px) {
   .swiper-wrapper {
      display: flex;
      gap: 20px;
   }
   .swiper-slide {
      width: calc(100% * (1/4)) !important;
      flex-grow: 1 !important;
   }
}


   /* 애니메이션 */
   .video.motion,
   .video-benefit.motion .items-inner,
   .order.motion,
   .homepage.motion,
   .hp-inner.motion .benefit-inner.one img,
   .hp-inner.motion .benefit-inner.one .desc,
   .hp-inner.motion .benefit-inner.two img,
   .hp-inner.motion .benefit-inner.two .desc,
   .hp-inner.motion .benefit-inner.three img,
   .hp-inner.motion .benefit-inner.three .desc,
   .hp-icon.motion,
   .banner.motion,
   .banner-type.motion,
   .banner-ex.motion .banner-ex-items,
   .sns.motion,
   .facebook.motion .desc-top,
   .facebook.motion .facebook-deco,
   .sns-benefit.motion,
   .insta.motion .desc-insta,
   .insta.motion .insta-deco,
   .viral.motion .title,
   .viral-type.motion .viral-items
    {
      animation: slideUp 0.8s;
   }

   .facebook-mo,
   .insta-mo {
      display: none;
   }

   /* 반응형 1830 
      검색광고 데코 반응형시 없어지게 */
      @media (max-width: 1830px) { 
         .search-inner.two .search-deco,
         .search-inner.four .search-deco {
            display: none;
         }
         .facebook {
            width: 100%;
            background-size: 100%;
         }
         .facebook-deco {
            right: 150px;
         }
         .benefit {
            width: 100%;
            padding: 60px;
         }
         .benefit-inner.one,
         .benefit-inner.two,
         .benefit-inner.three {
            background: none;
            padding: 0;
         }
         .benefit-inner {
            padding: 0;
            display: flex;
            align-items: center;
            gap: 30px;
         }
         .benefit-inner.one .hp-img.one,
         .benefit-inner.two .hp-img.two,
         .benefit-inner.three .hp-img.three,
         .benefit-inner.two .desc,
         .benefit-inner.three .desc {
            position: static;
         }
         .hp-inner {
            padding: 0;
         }
         .benefit-inner.three .hp-img.three,
         .benefit-inner.three .desc {
            transform: translateX(0);
         }
         .benefit-inner.two .hp-img.two,
         .benefit-inner.two .desc {
            transform: translateY(0);
         }
         .title-font-big {
            font-size: 28px;
         }
         .benefit-inner .desc{
            width: 100%;
         }
         .benefit-inner {
            justify-content: center;
         }
         .video-deco {
            display: none;
         }
      }
      /* 반응형 1397 */
      @media (max-width: 1397px) {
         main,
         .link-go,
         .introduce,
         .client,
         footer,
         .introduce-desc
          {
            width: 100%;
           
         }
         main {
            padding: 300px 100px;
         }
         footer {
            padding: 60px ;
         }
         nav {
            padding: 20px 60px;
         }
         .intoduc-img,
         .intoduc-img img {
          
            width: 100%;
            max-width: 100%;
         }
         .width-1300 {
            width: 100%;
         }
         .link-go {
            padding: 60px;
         }
         .link-inner a {
            width: calc(100% * (1/3));
            flex-grow: 1;
         }
         /* 배너 */
         .banner-type, .banner-ex {
            padding: 60px;

         }
         .banner-desc,
         .banner-img img {
            width: 100%;
         }
         .banner-desc {
            background-size: 100%;
            min-height: 280px;
         }
         .depth {
            width: 100%;
            padding: 20px 60px;
         }
         .banner-ex-item {
            margin: 0;
            margin-bottom: 30px;
         }
         .banner-desc h3 {
            font-size: 28px;
         }
         .search-inner {
            width: 100%;
            padding: 60px;
         }
         .search-img,
         .search-img img {
            width: 100%;
         }
         .search-inner.two .search-desc, .search-inner.four .search-desc {
            border-radius: 30px;
         }
         .search-inner.two .search-desc, .search-inner.four .search-desc,
         .search-inner .search-desc {
            flex-direction: column;
            justify-content: flex-start;
            height: auto;
         }
         .search-inner .search-desc .desc {
            margin-top: 30px;
         }
         .search-inner .search-desc h3 {
            font-size: 28px;
         }
         .facebook {
            margin-top: 100px;
         }
         .facebook-deco {
            display: none;
         }
         .facebook .desc {
            width: 100%;
            padding: 60px 30px;
            text-align: center;
            background-color: #b0c5ef;
         }
         
        
         .h3-after::after {
            left: 50%;
            transform: translateX(-50%);
            top: 50px;
         }
         .facebook .desc p {
            margin-top: 30px;
         }
         .title h2 {
            font-size: 28px;
         }
         .title p {
            font-size: 18px;
         }
         .facebook {
            position: relative;
         }
         .facebook-mo, .insta-mo {
            display: block;
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            top: -15%;
         }
         .insta-deco {
            display: none;
         }
         .insta {
            padding-top: 100px;

         }
        
         .sns-benefit {
            width: 100%;
            padding: 60px;
         }
         .sns-benefit .item img,
         .sns-benefit .item, .sns-benefit .sns-benefit-inner {
            width: 100%;
         }
         .sns-benefit .sns-benefit-inner {
            flex-wrap: wrap;
         }
         .sns-benefit .sns-benefit-inner > * {
            flex-grow: 1;
            width: calc(100% * (1/4));
         }
         .sns-benefit .item img:first-of-type {
            width: 50px;
         }
         .title-font-big {
            font-size: 28px;
         }
         .sns-benefit .item p {
            margin-bottom: 30px;
         }
         .viral, .viral-type {
            width: 100%;
            padding: 60px;
         }
         .viral-item,
         .viral-item:nth-of-type(2), .viral-item:nth-of-type(4) {
            flex-direction: column;
            border-radius: 50px;
         }
         .viral-item img {width: 100%;
            border-radius: 50px 50px 0 0;
         }
         .viral-item .desc h3 {
            font-size: 28px;
            text-align: center;
         }
         .viral-item .desc h3::after {
            left: 50%;
            transform: translateX(-50%);
            top: 50px;
         }
         .viral-item:nth-of-type(2) img,
         .viral-item:nth-of-type(4) img {
            width: 110%;
         }
         .viral-item {
            overflow: hidden;
         }
         .benefit-inner {
            flex-direction: column;
            overflow: hidden;
            border-radius: 50px;
            gap: 0;
         }
         .benefit-inner:nth-of-type(1) {
            background-color: #839FE6 !important;
         }
         .benefit-inner:nth-of-type(2) {
            background-color: #FFAF1A !important;
         }
         .benefit-inner:nth-of-type(3) {
            background-color: #FF8686 !important;
         }
         .benefit-inner img {
            width: 110%;
         }
         .benefit-inner .desc {
            padding: 40px;
            
         }
         .benefit-inner.three .desc {
            width: 100%;
         }
         .benefit-inner.three .desc > * {
            text-align: left !important;
         }
         .management, .street {
            width: 100%;
            padding: 60px;
         }
         .root_daum_roughmap {
            width: 100% !important;
         }
         .video-benefit {
            padding: 60px;
            background: #f6f6f6;
         }
         .video-benefit .items-inner {
            justify-content: center;
         }
         .order {
            width: 100%;
            padding: 60px;
         }
         .potal {
            padding: 60px;
         }
         .potal-slide-inner {
            flex-wrap: wrap;
         }
      }

      /* 스와이퍼 넓이 */
      @media (max-width: 1000px) {
 /* 스와이퍼 */
 .swiper-wrapper {
   width: 3000px !important;
 }
      }
      
   /* 반응형 991 */
   @media (max-width: 991px) {
     
      
      main {
         width: 100%;
         padding: 300px 20px;
      }
      main h1 {
         font-size: 32px;
      }
      .go-ask {
         font-size: 18px;
         padding: 10px 15px;
      }
      .link-go {
         padding: 40px 20px;
      }
      .width-1300 {
         width: 100%;
      }
      .title h2 {
         font-size: 28px;
      }
      .title p {
         font-size: 18px;
      }
      .link-inner a {
         width: 100%;
      }
      .intoduc-img,
      .intoduc-img img {
         width: 100%;
      }
      footer {
         width: 100%;
         padding: 20px;
      }
      footer ul li a {
         font-size: 14px;
      }
      .banner-item h3 {
         font-size: 28px;
      }
      .banner-item > img {
         width: 50px;
      }
      br.mo {
         display: none;
      }
      .banner-item .banner-type-deco {
         width: 70px;
      }

      .banner-deco {
         display: none;
      }
      .search-inner .search-desc .desc {
         width: 100%;
      }
      .sns-benefit .sns-benefit-inner > * {
         width: 100%;
      }
      .homepage {
         padding: 60px;
      }
      .corp-img {
         flex-direction: column;
         align-items: center;
         justify-content: center;
         width: 100%;
      }
      .corp-img-item:nth-of-type(2) {
         margin: -60px 0;
         padding-top: 20px;
      }
      .potal-slide {
         width: 100%;
      }
      .potal-slide img {
         width: 110%;
         margin-left: -30px;
      }

     
       
    

   }

   /* 반응형 767 */
   @media (max-width: 767px) {
      .banner-items {
         flex-direction: column;
      }
      .banner-item {
         width: 100%;
      }
      .introduce-desc {
         flex-direction: column;
         align-items: flex-start;
      }
      .introduce-desc h3 {
         margin-bottom: 20px;
      }
      .client-inner {
         flex-wrap: wrap;
      }
      .client-inner img {
         width: calc(100% * (1/3));
         flex-grow: 2;
      }
      .introduce, .client {
         padding: 40px 20px;
      }
      footer ul,
      .footer-inner {
         flex-direction: column;
      }
      .footer-inner {
         align-items: flex-start;
      }
      .logo-white {
         margin-bottom: 20px;
      }
      footer ul li a {
         font-size: 16px;
         margin-bottom: 15px;
         display: block;
      }
      footer ul li:after {
         display: none;
      }
      .banner-desc {
         min-height: auto;
         height: auto;
         background-size: auto;
         border-radius: 30px;
      }
      .hp-icon .items {
         flex-direction: column;
      }
      .hp-icon .items::after, .hp-icon .items::before {
         display: none;
      }
      .hp-icon .items .item {
         height: auto;
         position: relative;
      }
     .hp-icon .items .item::after {
      content: '';
      margin-bottom: 30px;
      width: 100% ;
      height: 1px;
      background-color: #ddd;
      position: absolute;
      top: 0;
      left: 0;
     }
     .hp-icon .items .item.after-none::after {
      display: none;
     }
     .hp-icon .items-inner {
      padding: 0 60px;
     }
     .manage-inner {
      flex-direction: column;
     }
     .manage-item {
      width: 100%;
     } 
   }

    /* 반응형 500 */
    @media (max-width: 500px) {
      br.mo-block {
         display: block;
      }
      br.mo {
         display: none;
      }
      nav {
         padding: 20px;
      }
      .banner,
      .potal,
      .banner-type,
      .banner-ex  {
         padding: 40px 20px;
      }
     
      .banner-items:last-of-type {
         margin-top: 40px;
      }
      .banner-item {
         width: 100%;
         margin-bottom: 0px;
      }
      .search-inner {
         width: 100%;
         padding: 40px 20px;
      }
      .search-img,
      .search-img img {
         width: 100%;
      }
      .search-inner .search-desc {
         flex-direction: column;
      }
      .search-inner .search-desc .desc {
         width: 100%;
      }
      .search-inner.two .search-desc, .search-inner.four .search-desc {
         flex-direction: column;
         border-radius: 30px;
      }
      .search-inner .search-desc h3 {
         font-size: 28px;
      }
      .search-inner.two .search-deco,
      .search-inner.four .search-deco {
         display: none;
      }
      .sns-benefit, .sns {
         padding: 20px 40px;
      }
      .viral, .viral-type {
         padding: 40px 20px;
      }
      .benefit,
      .hp-icon .items-inner {
         padding: 40px 20px;
      }
      .corp, .management, .street {
         padding: 40px 20px;
      }
      .depth {
         padding: 20px ;
      }
      .video, .video-benefit, .order {
         padding: 40px 20px;
      }
      .order-inner .order-items {
         padding-left: 100px;
      }
      .order-inner .order-items .ico-deco-one::before,
      .order-inner .order-items .ico-deco-two::before {
         left: -88px;
      }
      .order-inner::before {
         left: 40px;
         height: 100%;
         background-size: cover;
      }
      .video-benefit .items img {
         width: 50px;
      }
      .viral-item:last-of-type .desc h3::after {
         top: 90px;
      }
      .insta-h3-after::after {
         top: 55px;
      }
      .insta {
         padding: 300px 0 60px;
         padding-top: 100px;

      }
      .insta .desc {
         padding: 30px;
      }
      .facebook .desc {
         padding-top: 100px;
      }
      .order-inner .order-items p {
         font-size: 16px;
      }
      .order-inner .order-items p:first-of-type {
         margin-bottom: 30px;
      }
      .ask {
         padding: 30px 0;
      }
      .ask .title {
         margin-bottom: 0;
      }
      .ask-inner {
         padding: 20px;
      }
      .ask-inner h3.title-font-big {
         font-size: 20px;
      }
    }

    nav .close,
    nav .open  {
      display: none;
    }
   
    nav .bg {
      display: none;
    }

    @media (max-width: 1300px) {

    
    /* 헤더 햄버거메뉴 */
   
    nav .bg {
      width: 100%;
      height: 100vh;
      background: #0000007a;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 200;
      /* display: block; */
    }
   
    .depth {
      margin-top: 70px;
    }
nav ul {
   background-color: #fff;
   height: 100vh;
   position: absolute;
   right: 0;
   top: 0;
   overflow: hidden;
   transition: .3s;
   z-index: 400;
   display: flex;
   flex-direction: column;
   width: 0;
   margin: 0;
   padding-top: 60px;
}
nav ul.on {
   width: 60%;
}

nav ul li {
   padding: 15px;
}

    
   
    nav .open {
      display: block;
      float: right;
      height: 30px;
      padding-top: 5px;
      cursor: pointer;
    }

 nav .close {
      display: block;
      position: absolute;
      right: 20px;
      top: 20px;
      font-size: 35px;
      z-index: 410;
      cursor: pointer;
    }

  
  
   }

@media (max-width: 350px) {
   .viral-item:nth-of-type(3) .desc h3::after {
      top: 87px;
   }
}