/* ≤ 1440px (Desktop) */
@media (max-width: 1440px) {
  .fs-77{font-size: 68px; line-height: 115px;}
  .fs-48{font-size: 42px; line-height: 80px;}
  .fs-36{font-size: 32px; line-height: 60px;}
  .fs-30{font-size: 26px; line-height: 50px;}
  .fs-24{font-size: 21px; line-height: 40px;}
  .fs-24-p{font-size: 21px; line-height: 26px;}

  .slide-count{font-size: 125px; line-height: 166px;}
  .brand-name{font-size: 150px; line-height: 340px;}
  .number{font-size: 128px;}

  .banner{height: 400px;}
  .banner .site-margin{margin-top: 5%;}
}

/* ≤ 1366px (Laptop) */
@media (max-width: 1366px) {
  .fs-77{font-size: 62px; line-height: 105px;}
  .fs-48{font-size: 38px; line-height: 72px;}
  .fs-36{font-size: 30px; line-height: 56px;}
  .fs-30{font-size: 24px; line-height: 46px;}
  .fs-24{font-size: 20px; line-height: 38px;}

  .slide-count{font-size: 115px; line-height: 152px;}
  .brand-name{font-size: 135px; line-height: 312px;}
  .number{font-size: 118px;}

  .banner{height: 400px;}
  .banner .site-margin{margin-top: 5%;}
}

/* ≤ 1024px (Tablet Landscape) */
@media (max-width: 1024px) {
  .fs-77{font-size: 52px; line-height: 88px;}
  .fs-48{font-size: 34px; line-height: 64px;}
  .fs-36{font-size: 26px; line-height: 48px;}
  .fs-30{font-size: 22px; line-height: 42px;}
  .fs-24{font-size: 18px; line-height: 34px;}
  .fs-title{font-size: 14px; letter-spacing: 2.8px;}

  .main-slider, .slider-item, .slider-item img, .slider-item video{position: relative; height: 670px; overflow: hidden; border-radius: 10px;}

  .slide-count{font-size: 96px; line-height: 128px;}
  .brand-name{font-size: 105px; line-height: 262px;}
  .number{font-size: 98px;}

  .contact-banner .fs-48{line-height: 40px;}
  .banner{height: 400px;}
  .banner .site-margin{margin-top: 10%;}
}

/* ≤ 768px (Tablet Portrait) */
@media (max-width: 768px) {
  .fs-77{font-size: 42px; line-height: 70px;}
  .fs-48{font-size: 30px; line-height: 56px;}
  .fs-36{font-size: 24px; line-height: 44px;}
  .fs-30{font-size: 20px; line-height: 38px;}
  .fs-24{font-size: 17px; line-height: 32px;}

  .main-slider, .slider-item, .slider-item img, .slider-item video{position: relative; height: 470px; overflow: hidden; border-radius: 10px;}

  .slide-count{font-size: 60px; line-height: 65px;}
  .brand-name{font-size: 78px; line-height: 215px;}
  .number{font-size: 80px;}

  .slider-text-box{ top: 35%; transform: translateY(-50%); }

  .promotion-film{top: 5%;transform: translate(-30%);}
  .play-btn{width: 60px; height: 60px;}
  .promotion-film p{font-size: 12px; line-height: 12px;}
  .main-title{width: 75%;}

  .rounded-path, .rounded-path-invert {height: 50px;}
  .category-card{height: 350px;}
  .category-card img{height: 250px;}

  .parallax-container {height: 600px;}
  .contact-banner .fs-48{line-height: 30px;}
  footer .logo{width: 200px;}
  
  .banner{height: 400px;}
  .banner .site-margin{margin-top: 25%;}
  .corporate-img{ margin-top: auto; }

  .news-card img{height: 220px;}

  .banner{height: 350px;}
  .banner .site-margin{margin-top: 15%;}
}

/* ≤ 576px (Mobile) */
@media (max-width: 576px) {
  .fs-77{font-size: 34px; line-height: 54px;}
  .fs-48{font-size: 26px; line-height: 44px;}
  .fs-36{font-size: 22px; line-height: 40px;}
  .fs-30{font-size: 18px; line-height: 34px;}
  .fs-24{font-size: 16px; line-height: 30px;}
  .fs-title{font-size: 13px; letter-spacing: 2px;}

  .main-slider, .slider-item, .slider-item img, .slider-item video{position: relative; height: 470px; overflow: hidden; border-radius: 10px;}

  .slide-count{font-size: 62px; line-height: 82px;}
  .brand-name{font-size: 44px; line-height: 170px;}
  .number{font-size: 64px;}

  .slider-text-box{ top: 35%; transform: translateY(-50%); }

  .promotion-film{top: 5%;transform: translate(-30%);}
  .play-btn{width: 60px; height: 60px;}
  .promotion-film p{font-size: 12px; line-height: 12px;}
  .main-title{width: 75%;}

  .button-one{ padding: 7px 18px; border-radius: 12px; }
  .gradient-btn{padding: 7px 18px !important;}
  .slider-btn, .go-btn, .search-btn{ width: 40px; height: 40px;}
  .category-prev, .category-next{padding: 7px 10px;}

  .wp-button{padding: 10px 20px; min-width: 340px;}
  .wp-chat{width: 340px; padding-bottom: 20px; bottom: 35px;}
  .wp{width: 310px;}

  .slider-social-media{ bottom: calc(15%); right: 15px; }

  .rounded-path, .rounded-path-invert {height: 30px;}
  .category-card{height: 400px;}
  .categories .brand-name {margin-top: -25%;}

  .parallax-container {height: 450px;}
  .contact-banner .fs-48{line-height: 30px;}
  footer .logo{width: 200px;}
  
  .banner{height: 400px;}
  .banner .site-margin{margin-top: 25%;}
  .corporate-img{ margin-top: auto; }

  .files-prev, .files-next{border: 1px solid var(--primary-color);color: var(--primary-color); padding: 7px 10px;}
  .document-height .fs-24.text-white{color: var(--primary-color) !important;}
  .document-height .divider.bg-white{background-color: var(--primary-color) !important;}

  .sub-category {position: static;display: none;min-width: 100%;}
  .has-sub:hover > .sub-category {display: none;}
  .has-sub.active > .sub-category {display: block;}

  .has-sub > a::after { font-family: "Font Awesome 6 Free"; content: "\f078"; float: right; margin-left: 10px; }

  .filter .fs-16{ font-size: 12px;}

  .media-film-banner{height: 200px;}
  .media-film-banner img{height: 200px;}
}

/* ≤ 375px (Small Mobile) */
@media (max-width: 375px) {
  .fs-77{font-size: 30px; line-height: 48px;}
  .fs-48{font-size: 22px; line-height: 38px;}
  .fs-36{font-size: 20px; line-height: 36px;}
  .fs-30{font-size: 17px; line-height: 32px;}

  .slide-count{font-size: 54px; line-height: 72px;}
  .brand-name{font-size: 76px; line-height: 148px;}
  .number{font-size: 56px;}

  .button-one{ padding: 12px 22px; gap: 8px; }

  .slider-btn, .go-btn{ width: 44px; height: 44px; }
}