@media (max-width:1460px) {
  .container{padding: 0 40px}
  .about-section h2,
  .service-section h2,
  .work-section h2,
  .blog-section h2,
  .review-section h2{font-size: 40px; line-height: 50px; letter-spacing: -1px; margin: 0 0 20px 0;}
}

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

  .cursor{display: none}
  .o-scroll{overflow: scroll;}


}

@media (max-width: 767px) {
  .cursor{display: none}
  .o-scroll{overflow: scroll;}
  .container{padding: 0 15px}
  section{overflow: hidden;}
  header .logo{display: none}
  header .btn-touch{display: none}
  .menu-bottom-fixed{bottom: -180px; display: block; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
  .menu-bottom-fixed.active{bottom: 0px; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
  .menu-bottom-fixed ul.nav-menu{display: flex; border-radius: 0px; flex-wrap: wrap;}
  .menu-bottom-fixed ul.nav-menu li{margin: 0 0 5px 0; width: 50%; padding: 0 5px;}
  .menu-bottom-fixed ul.nav-menu li a{min-width: 100%; font-size: 14px; line-height: 34px}
  .menu-bottom-fixed ul.nav-menu li:last-child{width: 100%; margin: 0px}
  .mobile-menu{border-radius: 18px 18px 0 0; align-items: center; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(10px); width: 100%; display: flex !important; padding: 10px 20px; justify-content: space-between;}
  .mobile-menu .logo {width: 200px;}
  .mobile-menu .btn-menu {width: 22px; height: 22px; border: none; background: transparent; position: relative; padding: 0px; transition: all .5s ease; }
  .mobile-menu .btn-menu span{width: 100%; height: 2px; background: #E6FF29; display: block;  transition: all .5s ease;}
  .mobile-menu .btn-menu span:nth-of-type(3n+1){position: absolute; top: 0px; left: 0px; transition: all .5s ease;}
  .mobile-menu .btn-menu span:nth-of-type(3n+2){position: absolute; top: 10px; width:70%; left: 0px; transition: all .5s ease;}
  .mobile-menu .btn-menu span:nth-of-type(3n+3){position: absolute; bottom: 0px; left:0px; transition: all .5s ease;}
  .mobile-menu .btn-menu.active span:nth-of-type(3n+1){  transform: rotate(-45deg); left: 0px; top:10px; transition: all .5s ease;}
  .mobile-menu .btn-menu.active span:nth-of-type(3n+2){display: none;}
  .mobile-menu .btn-menu.active span:nth-of-type(3n+3){ transform: rotate(45deg);left: 0px; transition: all .5s ease; bottom: 10px;}
  .home-section .content-area h1{font-size: 28px; line-height: 40px; letter-spacing: 0px}

  .scroll-text {height: 40px; margin-bottom: 30px; overflow: hidden;}
  .scroll-text .hightlighted{-webkit-text-stroke: 1px #E6FF29; font-size: 40px; line-height: 40px;}

  .about-section h2,
  .service-section h2,
  .work-section h2,
  .blog-section h2,
  .review-section h2,
  .about-area h2,
  .creative-area h2,
  .team-section h2,
  .service-page h2,
  .blog-list-page h2,
  .contact-page h2,
  .contact-info h2{font-size: 25px; line-height: 28px; letter-spacing: -1px; margin: 0 0 20px 0;}

  .about-section .content-area,
  .blog-section .content-area,
  .service-section .content-area,
  .work-section .content-area,
  .about-area .content-area,
  .team-section .content-area,
  .service-page .content-area,
  .blog-list-page .content-area,
  .contact-page .content-area,
  .contact-info .content-area{width: 90%; margin-left: 10%; margin-bottom: 30px;}

  .about-section .content-area p,
  .service-section .content-area p,
  .blog-section .content-area p,
  .work-section .content-area p,
  .about-area .content-area p,
  .team-section .content-area p,
  .service-page .content-area p,
  .blog-list-page .content-area p,
  .contact-info .content-area p{font-size: 14px; line-height: 20px; margin: 0 0 15px 0}

  .about-section .content-area a,
  .work-section .content-area a,
  .blog-section .content-area a{font-size: 14px}

  .service-section .subtitle,
  .work-section .subtitle,
  .blog-section .subtitle,
  .review-section .subtitle,
  .about-area .subtitle,
  .creative-area .subtitle,
  .team-section .subtitle,
  .service-page .subtitle,
  .blog-list-page .subtitle,
  .contact-page .subtitle,
  .contact-info .subtitle{font-size: 14px; line-height: 20px; letter-spacing: 2px; margin: 0 0 15px 0}

  .about-section{padding: 30px 0 60px 0}
  .about-section::before {width: 600px; height: 600px; top: 210px; right: -464px;}
  .about-section .video-area {width: 100%; height: 240px; border-radius: 0px; margin-top: 60px;}

  .service-section{padding-bottom: 30px}
  .service-section .service-block .service-detail{padding: 30px 0px}
  .service-section .service-block .service-detail .container{height: 100%;}
  .service-section .service-block .service-detail h3{font-size: 20px; line-height: 30px; letter-spacing: 0; margin: 0 0 20px 0;}
  .service-section .service-block .service-detail ul.link li {margin: 0 10px 10px 0;}
  .service-section .service-block .service-detail ul.link li a{padding: 8px 12px; font-size: 12px; line-height: 16px;}
  .service-section .service-block .service-detail .link-main {position: absolute; top: auto; bottom: 70px; right: auto; left:15px;  z-index: 9999; margin-top: 15px;}

  .work-section{padding: 30px 0}
  .work-section ul.work-list{margin: 0px;}
  .work-section ul.work-list li{width: 100%; padding: 0px; margin-bottom: 30px;}
  .work-section ul.work-list li:nth-of-type(2),
  .work-section ul.work-list li:nth-of-type(4){margin-top: 0px}
  .work-section ul.work-list li .project-block{height: 500px}
  .work-section ul.work-list li .project-block .project-name{display: none}
  .work-section ul.work-list li .project-block .name-area .top{font-size: 30px; line-height: 36px}
  .work-section ul.work-list li .project-block .name-area .bottom{font-size: 20px}
  .work-section ul.work-list li .project-block .link{top: 20px; right: 20px}

  .blog-section{padding: 0 0 60px 0}
  ul.blog-list li{padding: 120px 0 30px 0}
  ul.blog-list li .name{font-size: 22px; line-height: 28px; letter-spacing: 0px}
  ul.blog-list li .date{font-size: 45px; line-height: 22px; width: 90px;left: 0px;top: 20px; margin-top: 0;}
  ul.blog-list li .date span{font-size: 70px; line-height: 40px;}
  ul.blog-list li .link{top: 40px; right: 0px; margin-top: 0;}
  ul.blog-list li p{font-size: 14px; line-height: 20px}

  .review-section{padding: 0 0 60px 0}
  .review-section::before{content: none}
  .review-section .review-block{padding: 50px 25px 120px 25px; margin-top: 25px; min-height: auto;}
  .review-section .review-block::before {width: 80px; height: 66px; top: -30px; left: 25px; background-size: cover;}
  .review-section .review-block .message{font-size: 15px; line-height: 22px}
  .review-section .review-block .name::before {width: 50px}
  .review-section .review-block .name::after {right: 50px}
  .review-section .review-block .name{font-size: 22px; line-height: 22px; padding: 12px 18px}
  .review-section .review-block .name span{font-size: 15px; line-height: 15px}

  .footer-main{padding: 0px 0px 80px 0px}
  .footer-main .d-flex{display: block !important;}
  .footer-main .leftside{width: 100%}
  .footer-main .rightside{width: 100%; padding-top: 50px;}
  .footer-main .leftside .logo{width: 260px; position: relative;}
  .footer-main h2{font-size: 40px; line-height: 40px; letter-spacing: -2px; margin: 0 0 25px 0}
  .footer-main h2 span{font-size: 30px}
  .footer-main p{font-size: 16px; line-height: 24px; margin-bottom: 10px;}

  .inner-section{padding: 40px 0px 80px 0px; position: relative; height: auto;}
  .inner-section svg{height: auto;}
  .inner-section .subtitle{font-size: 14px; line-height: 20px; letter-spacing: 2px}
  .inner-section h1{font-size: 34px; line-height: 40px; letter-spacing: -2px; margin: 10px 0 0 0;}
  .inner-section svg .draw{stroke-width: 4;}

  .about-area{padding: 40px 0 0 0}
  .about-area .three-box-content{height: auto; margin-top: 70px}
  .about-area .three-box-content .green-block.one,
  .about-area .three-box-content .green-block.two,
  .about-area .three-box-content .green-block.three{position: relative; top: 0px; left: 0;}
  .about-area .three-box-content .green-block{margin-bottom: 60px; padding: 20px}
  .about-area .three-box-content .green-block h3{font-size: 26px; line-height: 30px; margin: 0 0 5px 0;}
  .about-area .three-box-content .green-block h3 span{top: -58px; font-size: 70px; line-height: 70px;}
  .about-area .three-box-content .green-block p{font-size: 14px; line-height: 20px; margin: 0px}
  .about-area .photo-area{height: 100% !important; margin: 0 0 40px 0}
  .about-area .photo-area video{position: relative;}

  .creative-area{padding: 0 0 40px 0}
  .creative-area .flex-area {display: block; flex-wrap: wrap; width: 100%; margin-left: 0;}
  .creative-area .content-area{width: 100%; margin: 0 0 30px 0; padding: 25px}
  .creative-area .content-area h3{font-size: 26px; line-height: 30px; margin: 0 0 5px 0;}
  .creative-area .content-area p{font-size: 14px; line-height: 20px; margin: 0px}

  .team-section{padding: 0 0 40px 0}
  .team-section .team-block{display: block; padding: 20px}
  .team-section .team-block .number{position: relative; top: 0; left: 0; font-size: 20px; line-height: 20px; margin-bottom: 15px;}
  .team-section .team-block .detail{position: relative; bottom: 0; left: 0;}
  .team-section .team-block .detail .name {font-size: 30px; font-weight: 700; line-height: 30px;}
  .team-section .team-block .detail .position {font-size: 18px; margin-bottom: 20px}
  .team-section .team-block .photo{width: 100%; height: 300px;}

  .service-page{padding: 40px 0 80px 0}
  .service-page .service-block .link-main {position: relative; top: 0;}
  .service-page .service-block{padding: 100px 0px 120px 0px}
  .service-page .service-block .title{font-size: 24px; line-height: 30px; margin-bottom: 10px;}
  .service-page .service-block .content-block{width: 100%;}
  .service-page .service-block .content-block p{font-size: 14px; line-height: 20px; }
  .service-page .service-block .content-block ul.sublist{margin: 0 0 20px 0}
  .service-page .service-block .content-block ul.sublist li {margin: 0 10px 10px 0;}
  .service-page .service-block .content-block ul.sublist li a{padding: 8px 12px; font-size: 12px; line-height: 16px;}
  .service-page .service-block svg.icon-svg path{stroke: #e6ff29; stroke-width: 3; stroke-dasharray: 0; stroke-dashoffset: 0;}
  .service-page .service-block svg.icon-svg{bottom: 10px; right: 0px; width: 100%; height: auto;}

  .blog-list-page{padding: 40px 0 60px 0}
  .contact-page{padding: 40px 0}
  .contact-page::before {content: none}
  .contact-page .content-area ul.radio-area li{width: 50%; margin-bottom: 10px}
  .contact-page input[type="radio"].css-radio + label.css-radiolabel{padding: 10px 0;
  font-size: 10px;}

  .contact-info{padding: 40px 0}
  .contact-info .content-area .info{font-size: 20px; line-height: 24px; margin: 20px 0 0 0}
  .contact-info .content-area .info strong{line-height: 30px; font-size: 30px;}
}