@media screen and (max-width: 1800px) {
  .container {max-width: 100%; padding: 0 20px;}
  .works-gallery li.on a {width: 686px;}
}

@media screen and (max-width: 1380px) {
  .works-gallery li.on a .link-box {left: 0;}

  .contact-area p {font-size: 14px;}
}

@media screen and (max-width: 1147px) {
  .contact-area {max-width: 380px; margin: 0 56.344vw;}
}

@media screen and (max-width: 1046px) {
  .works-gallery li.on a {width: 462px;}
}

@media screen and (max-width: 800px){
  .main-logo {width: 195px; top: 20px; left: 20px;}
  .bottom-box {left: 20px; bottom: 20px;}
  body .main-hd .container {padding: 0 20px; height: 75px;}
  .swiper-pagination {gap: 0px !important; right: 20px !important;}
  .swiper-pagination-bullet {width: 10px;}
  .swiper-pagination-bullet-active {width: 20px;}
  .page-number {bottom: 180px; right: 20px;}
  .page-number .on-number {font-size: 18px;}
  .page-number .all-number {font-size: 14px; margin-left: 10px; padding-left: 5px;}

  .main-sec .left-content .top-box nav ul li a {font-size: var(--size16);}
  .main-sec .left-content .top-box .introduction .works {padding-bottom: 25px; margin-bottom: 25px; font-size: var(--size30);}
  .main-sec .left-content .top-box .introduction .works::before {height: 2px;}
  .main-sec .left-content .top-box .introduction .works-sub {margin-bottom: 30px; font-size: var(--size16);}
  .main-sec .left-content .top-box .more {width: 35px;}

  .main-sec .left-content {width: 335px; padding: 30px 20px;}

  /* tab */
  .tab-menu {display: none;}
  .works-gallery li.on {margin-bottom: 100px !important;}
  .works-gallery li.on a .link-box {position: initial; transform: initial; width: 100%; align-items: flex-start;}
  .works-gallery li.on a {flex-flow: column; width: 100%;}

  header .page-tit {top: 100px;}
  /* section:not(.main-sec) {margin-top: 236px;} */
  section:not(.main-sec) {padding-top: 100px !important;}
  .img-list-area {margin-top: 30px;}

  header {height: 75px;}
  header .logo {width: 150px;}
  header .menu-btn {width: 35px;}
  header .container {padding-top: 30px;}
  header.active {background: transparent; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); height: 100vh;}
  header.active nav {top: 95px; padding: 0 20px; background: transparent; z-index: 11;}
  header.active:before {background: transparent;}


  .l-y-c-wrapper {width: 100%;}

  .content-img .img-box {width: 467px;}
  .content-img .arrow-box a {font-size: var(--size16);}

  .contact_us {padding-top: 0;}
  .contact_us .d-flex {flex-flow: column; margin-top: 50px;}
  .contact_us .txt-box {width: 100%; margin-right: 0; padding: 20px; font-size: var(--size15);}
  .contact_us .tell-email {font-size: var(--size14);}
  .contact_us .contact-txt {width: 100%; margin-top: 30px;}
  .contact_us .send-btn {width: 160px; height: 45px; font-size: var(--size14);}
  .popup-area {width: 350px; padding: 20px;}
  .popup-area .popup-header .popup-tit {font-size: var(--size20);}
  .popup-area .popup-header .close-btn {width: 15px;}
  .popup-area .popup-body .input-box input {font-size: var(--size14);}
  .popup-area .popup-body .help-btn {padding-bottom: 50px; margin-bottom: 20px; margin-top: 40px; font-size: var(--size14);}
  .popup-area .popup-body .send-btn {height: 40px; font-size: var(--size14);}


  footer .container {flex-flow: column; text-align: center;}
  footer .sns-area {gap: 5px; margin-top: 20px;}

  .works-gallery {height: auto !important; overflow: hidden !important;}

  .content-img .arrow-box:first-of-type {left: -64px;}
  .content-img .arrow-box:last-of-type {right: -46px;}

  .id_sns-area {flex-flow: column; right: 20px; bottom: 20px;}

  .contact-area {max-width: 306px; margin: 0px 45.344vw;}
}

@media screen and (max-width: 579px) {
  .contact-area {max-width: 100%; margin: 0; padding: 0 20px; box-sizing: border-box;}
  .contact-area p {font-size: 14px;}
  #main-sec3 .left-content {display: none;}


  .contact-pop {min-width: 320px; padding: 20px;}
  .contact-pop .popup-hd .popup-tit {font-size: 18px;}
  .contact-pop .popup-hd .close-pop {top: 20px; right: 20px; width: 15px;}
  .contact-pop .popup-hd {margin-bottom: 35px;}
  .contact-pop .popup-body .input-box input,.contact-pop .popup-body .input-box textarea {margin-bottom: 20px; font-size: 14px;}
  .contact-pop .popup-body .input-box textarea {height: 80px;}
  .contact-pop .popup-body .popup-btn {height: 45px; font-size: 14px;}
}

@media screen and (max-width: 425px) {
  .popup-area {width: 320px;}
  .content-img .img-box {width: 100%;}
}