@charset "utf-8";

/* reset.css와 style.css를 기준으로 desktop(index.css) 스타일의 반응형 선택자 스캐폴드만 정의 */

/* =========================================================================
   Tablet : 800px ~ 1200px
   ========================================================================= */
@media screen and (max-width: 1200px) {
   :root {
      --jang-service-sub-max-width: 600px;
      --jang-anywhere-banner-min-height: 400px;
      --jang-anywhere-main-image-width: 600px;
   }
   main.hero2 {}
   section.service {}
   section.service .sub-content {}
   section.service .sub-content .placeholder {}
   section.service .main-content {
      flex-direction: column;
   }
   section.service .main-content .title-area {}
   section.service .main-content .img-wrapper {}
   section.service .sub-content2 {}
   section.anywhere {}
   section.anywhere > .placeholder {}
   section.anywhere > .placeholder p.slogan {}
   section.anywhere .wrapper {}
   section.anywhere .main-content {}
   section.anywhere .main-content .title-area .title-box {}
   section.anywhere .main-content > .placeholder {}
   section.anywhere .main-content > .placeholder img {}
   section.anywhere .sub-content h3.title {}
   section.anywhere .sub-content .img-wrapper {}
}

/* =========================================================================
   mobile : ~ 799px
   ========================================================================= */
@media screen and (max-width: 799px) {
   :root {
      --jang-anywhere-banner-min-height: 300px;
      --jang-anywhere-main-image-width: 100%;
   }
   main.hero2 {}
   section.service {}
   section.service .sub-content {}
   section.service .sub-content .placeholder {}
   section.service .main-content {}
   section.service .main-content .title-area {}
   section.service .main-content .img-wrapper {}
   section.service .sub-content2 {}
   section.anywhere {}
   section.anywhere > .placeholder {}
   section.anywhere > .placeholder p.slogan {}
   section.anywhere .wrapper {}
   section.anywhere .main-content {}
   section.anywhere .main-content .title-area .title-box {}
   section.anywhere .main-content > .placeholder {}
   section.anywhere .main-content > .placeholder img {}
   section.anywhere .sub-content h3.title {}
   section.anywhere .sub-content .img-wrapper {
      flex-direction: column;
   }
}