@font-face {
  font-family: 'A2z';
  font-weight: 100;
  font-display: swap;
  src: url('../font/에이투지체-1Thin.otf') format('truetype');
}
@font-face {
  font-family: 'A2z';
  font-weight: 200;
  font-display: swap;
  src: url('../font/에이투지체-2ExtraLight.otf') format('truetype');
}
@font-face {
  font-family: 'A2z';
  font-weight: 300;
  font-display: swap;
  src: url('../font/에이투지체-3Light.otf') format('truetype');
}
@font-face {
  font-family: 'A2z';
  font-weight: 400;
  font-display: swap;
  src: url('../font/에이투지체-4Regular.otf') format('truetype');
}
@font-face {
  font-family: 'A2z';
  font-weight: 500;
  font-display: swap;
  src: url('../font/에이투지체-5Medium.otf') format('truetype');
}
@font-face {
  font-family: 'A2z';
  font-weight: 600;
  font-display: swap;
  src: url('../font/에이투지체-6SemiBold.otf') format('truetype');
}
@font-face {
  font-family: 'A2z';
  font-weight: 700;
  font-display: swap;
  src: url('../font/에이투지체-7Bold.otf') format('truetype');
}
@font-face {
  font-family: 'A2z';
  font-weight: 800;
  font-display: swap;
  src: url('../font/에이투지체-8ExtraBold.otf') format('truetype');
}
@font-face {
  font-family: 'A2z';
  font-weight: 900;
  font-display: swap;
  src: url('../font/에이투지체-9Black.otf') format('truetype');
}

/* 기본 설정 */
html, 
body {font-family: 'A2z', sans-serif; font-weight: 400; color: var(--color-gray-900); word-break: keep-all; scroll-behavior: smooth; scroll-behavior: auto !important; overscroll-behavior-y: none; letter-spacing: 1.8px; background-color: var(--color-white); scroll-behavior: smooth;}
body {opacity: 0; animation: setup 0.8s linear both; animation-delay: 0.4s;}
@keyframes setup {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
#wrap {width: 100%; overflow: hidden;}

.split-lines {will-change: transform; display: block; visibility: hidden; white-space: pre-wrap;}

/* 언어팩 ui */
body.lang-ko #header .nav .language-wrap ul .language-link.lang-ko,
body.lang-en #header .nav .language-wrap ul .language-link.lang-en,
body.lang-zh #header .nav .language-wrap ul .language-link.lang-zh,
body.lang-vi #header .nav .language-wrap ul .language-link.lang-vi {display: none !important;}

button {border-radius: 0.875rem;}
button span {display: block; width: 24px; height: 24px; background-image: url(../img/icon-google-dark.svg); background-size: contain; background-repeat: no-repeat;}
button span.apple {background-image: url(../img/icon-apple-dark.svg);}
button span.windows {background-image: url(../img/icon-windows-dark.svg);}
button.btn-nav span.windows {background-image: url(../img/icon-windows-light.svg);}
button:has(.reverse) {flex-direction: row-reverse;}

button:hover span {background-image: url(../img/icon-google-light.svg);}
button:hover span.apple {background-image: url(../img/icon-apple-light.svg);}
button.bg-gray-200:hover span.windows,
button:hover span.windows {background-image: url(../img/icon-windows-light.svg);}
button.btn-nav:hover span.windows,
button.hover-orange:hover span.windows {background-image: url(../img/icon-windows-dark.svg);}

button.bg-white:hover,
button.bg-gray-200:hover,
button.bg-sky-800:hover {background-color: var(--color-sky-750); color: var(--color-white);}
button.hover-orange:hover {background-color: var(--color-orange-600); color: var(--color-gray-900);}

.btn-sm {padding: 16px 32px; min-width: 240px;}
.btn-fit {padding: 16px 24px; min-width: fit-content;}
.btn-nav {padding: 12px 22px;}
button.btn-nav:hover {background-color: var(--color-orange-600); color: var(--color-gray-950);}

.color-theme {border: 1px solid #f1f1f1; padding: 4px; border-radius: 1.5rem; width: fit-content; position: relative;}
.color-theme button {padding: 4px; border: 1px solid #e6e6e600; border-radius: 50%;}
.color-theme button.active {border: 1px solid #e2e2e2;}
.color-theme button img {width: 24px; height: 24px; display: block;}
.color-theme-btn.active {z-index: 1;}
.color-theme::before {content: ""; position: absolute; left: 5px; z-index: -1; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background-color: #e6e6e6; transition: all 0.28s ease-in-out; transition-duration: 0.2s;}
.color-theme:has(button:not(.active):hover)::before {left: calc(50% + 4px);}

.bg-pattern {background-image: url('../img/bg-pattern.png'); background-size: auto; background-position: center;}
.bg-pattern-stripe {position: relative; overflow: hidden; width: 100%; height: 48px;}
.bg-pattern-stripe::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: repeating-linear-gradient(315deg, var(--pattern-fg) 0, var(--pattern-fg) 1px, transparent 0, transparent 50%); background-size: 10px 10px; background-attachment: fixed; opacity: 0.7;}

.icon {background-color: var(--color-sky-800); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.28s ease-in-out;}
.icon-box:hover .icon {background-color: var(--color-orange-600);}
.icon-img {width: 36px;}

#header {border-bottom: 1px solid var(--color-gray-300); background-color: var(--color-white);}
#header .nav > div > a:has(.logo) {display: flex; align-items: center; gap: 0.75rem;}
#header .nav > div > a:has(.logo)::after {content: "PRIRO Solutions"; display: inline-block; font-weight: 600; font-size: 1.125rem; white-space: nowrap;}
#header .nav > div > a:has(.logo) img {width: auto; height: 28px;}
#header .nav .nav-wrap .nav-link {display: flex; align-items: center; gap: 12px; color: var(--color-gray-500); transition: all 0.28s ease-in-out;}
#header .nav .nav-wrap .nav-link.active {color: var(--color-gray-900); font-weight: 600; transition: all 0.28s ease-in-out;}
#header .nav .nav-wrap .nav-link::after {content: ""; display: block; width: 12px; height: 12px; transform: rotate(90deg); background-image: url(../img/icon-arrow-01.svg); background-size: cover; opacity: 0; transition: color 0.28s ease-in-out;}
#header .nav .nav-wrap .nav-link.active::after {opacity: 1; transition: color 0.28s ease-in-out;}
#header .nav .nav-wrap .nav-link:not(.active):hover::after {opacity: 0.35; transition: color 0.28s ease-in-out;}
#header .nav .language-but {padding: 8px 16px; border-radius: 10px; white-space: nowrap; position: relative;}
#header .nav .language-but::before {content: ""; position: absolute; bottom: 4px; left: 12px; width: 0; height: 2px; background-color: var(--color-sky-800); transition: all 0.28s ease-in-out;}
#header .nav .language-but:hover::before {width: calc(100% - 24px);}
#header .nav .language-wrap {position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 70;}
#header .nav .language-wrap.active {display: flex;}
#header .nav .language-wrap > div {transition: all 0.6s ease-in;}
#header .nav .language-wrap ul {position: absolute; z-index: 80; top: calc(50% - 8rem); left: 50%; overflow: hidden; transform: translate(-50%, -50%); background-color: var(--color-white); width: 100%; max-width: 18rem; height: fit-content; padding-bottom: 16px;}
#header .nav .language-wrap ul .title {display: flex; justify-content: space-between; padding: 16px 0;} 
#header .nav .language-wrap ul .title p,
#header .nav .language-wrap ul .title button {padding: 0 24px;}
#header .nav .language-wrap ul .title button img {filter: brightness(10);}
#header .nav .language-wrap ul .language-link {padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;}
#header .nav .language-wrap ul .language-link:nth-child(2) {margin: 8px; padding: 0 16px; border-radius: 14px; background-color: var(--color-gray-200); cursor: auto;}
#header .nav .language-wrap ul .language-link:nth-child(2)::after {display: none;}
#header .nav .language-wrap ul .language-link:nth-child(n+3) {margin: 8px; padding: 0 16px; border-radius: 14px; background-color: var(--color-white);}
#header .nav .language-wrap ul .language-link:nth-child(n+3):hover {background-color: var(--color-orange-600);}

.menu-bg {transition: all 0.6s ease-in;}
.menu-bg.active {display: block;}

.mobile-menu-but {width: 24px; height: 24px;}
.mobile-menu-but span {background-color: var(--color-gray-950); width: 100%; height: 2px; border-radius: 5px;}

.mobile-menu-wrap {position: absolute; top: 0; right: -100%; max-width: 320px; width: 100%; height: 100dvh; padding: 0 0 16px; display: flex; flex-direction: column; background-color: var(--color-white); z-index: 40; transition: all 0.4s ease;}
.mobile-menu-wrap.active {right: 0;}
.mobile-menu-wrap .menu-title {padding: 22px 24px;}
.mobile-menu-wrap .menu-title a:has(.logo) {width: 10rem; margin: auto;}
.mobile-menu-wrap .btn-set:last-child {padding: 0 16px;}
.mobile-menu-wrap .nav-link {display: flex; align-items: center; justify-content: space-between; background-color: #f9f9f900; padding: 15px 30px; border-bottom: 1px solid #f3f3f3; color: var(--color-gray-400);;}
.mobile-menu-wrap .nav-link:hover {background-color: var(--color-gray-200); color: var(--color-gray-500);}
.mobile-menu-wrap .nav-link.active {background-color:var(--color-sky-800); color: var(--color-white);}
.mobile-menu-wrap .nav-link::before {content: ""; display: block; width: 17px; height: 17px; background-image: url(../img/icon-arrow-01.svg); background-size: cover; opacity: 0.08;}
.mobile-menu-wrap .nav-link:hover::before {opacity: 0.4;}
.mobile-menu-wrap .nav-link.active::before {opacity: 1; filter: brightness(10);}
.mobile-menu-wrap .btn-set {padding: 0 16px;}
.mobile-menu-wrap .btn-set button {overflow: hidden; padding-right: 30px; max-width: 160px; width: 100%;}

#sec2 .service-img {aspect-ratio: 1 / 1; overflow: hidden; background-color: var(--color-sky-50);}
#sec2 .service-img img {margin-top: -5vh; margin-left: 50%; transform: translateX(calc(-50% - 3.25rem));}
#sec3 .tech-wrap .icon-box {padding-inline: 1rem;}

.banner {display: flex; justify-content: center; position: relative; width: 100%;}
.item:has(.item-03)::before,
.item.item-08::before {content: ""; position: absolute; z-index: 1; width: inherit; height: 100%; top: 0; left: 0; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0; transition: all 0.28s ease-in-out;}
.item:has(.item-03)::before {background-image: url(../img/item-img04.png);}
.item.item-08::before {background-image: url(../img/item-img09.png); background-size: cover; background-position: top 80% center; right: 0; top: 0; width: 100%;}
.item img {width: 100%;}
.item .item-02 {min-width: 48rem;}
.item:has(.item-07) {aspect-ratio: 1 / 0.78;}

#footer .container > div:has(.item):hover .item.item-08::before,
#sec5 .container > div > div:last-child:hover .item:has(.item-img)::before {opacity: 1;}
#footer .container > div:first-child:hover > div.item-08 img {transition-duration: 0.6s; transform: all 0.28s ease-in-out; opacity: 0.4 !important;}

#brands .container {position: relative;}
#brands .container::before {content: ''; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: #FFFFFF; background: radial-gradient(circle at 30% 20%,#ffffff 0%, #434343 180%); mix-blend-mode: color-burn;}

#brands .pc-wrap {position: absolute; max-width: clamp(calc(50% - 4rem), calc(50% - 4rem), calc(50% - 2rem)); right: clamp(4rem, 4rem - calc(50% - 540px), 2rem); transform: rotateX(-50%);}
#brands .pcSwiper {height: 100dvh; overflow: hidden;}
#brands .pcSwiper .swiper-wrapper {transition-timing-function: linear !important;}
#brands .pcSwiper .swiper-slide {height: auto;}
#brands .pcSwiper .pc-logo-slide {height: auto !important; display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); padding-bottom: 24px;}

#brands .swiper-slide {display: flex; flex-direction: column; gap: 24px; justify-content: center;}
#brands .swiper-slide .logo-box-item {width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; gap: 24px; justify-content: center; position: relative;}
#brands .swiper-slide .logo-box-item::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../img/bg-logo.png'); background-size: contain; background-position: center; mix-blend-mode: plus-lighter; z-index: -1; transition: all 0.4s ease-in-out;}
#brands .swiper-slide .logo-box-item:hover::before {background-image: url('../img/bg-logo-hover.png');}
#brands .swiper-slide .logo-box-item img {filter: grayscale(1); opacity: 0.45; transition: filter 0.4s ease-in-out, opacity 0.3s ease-in-out;}
#brands .swiper-slide .logo-box-item:hover img {filter: grayscale(0); opacity: 1;}

#footer {font-size: 12px;}
#footer .logo {max-width: 120px; filter: grayscale(1); opacity: 0.45;}
#footer .container > div:first-child {position: relative;}
#footer .container > div:first-child > div:first-child {z-index: 1; width: 100%; background-color:#edededb6; aspect-ratio: 1 / 1;}
#footer .container > div:first-child > div.item-08 {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 100%; max-width: unset; overflow: hidden; background-image: url(../img/item-img08.png); background-size: cover; background-position: top 80% center; transition: all 0.28s ease-in-out;}
#footer .container > div:first-child > div:first-child h3 {color: var(--color-black); font-weight: 600;}
#footer .container > div:first-child > div:first-child p {text-shadow: 0px 0px 1px #ededed, 0px 0px 2px #ededed, 0px 0px 3px #ededed; font-weight: 400;}

.mobile-wrap { display: block;}
.pc-wrap { display: none;} 

/* theme-dark 다크 테마 */
.theme-dark .bg-black\/50 {background-color: #0000007d;}
.theme-dark #header .nav .nav-wrap .nav-link::after {filter: brightness(10);}
.theme-dark #header .nav .language-wrap ul .title button img {filter: brightness(1.5);}
.theme-dark #header .nav .language-wrap ul .language-link:not(.active):hover {color: var(--color-white);}
.theme-dark #header .nav .language-wrap ul .language-link:nth-child(2) {background-color: var(--color-gray-700);}
.theme-dark .mobile-menu-but img {filter: brightness(10);}
.theme-dark .mobile-menu-wrap .nav-link {border-color: var(--color-gray-700);}
.theme-dark .mobile-menu-wrap .nav-link.active {background-color: var(--color-sky-500); color: var(--color-grya-950);}
.theme-dark .mobile-menu-wrap .nav-link:hover {background-color: var(--color-gray-700);}
.theme-dark .mobile-menu-wrap .nav-link:hover::before {filter: brightness(10);}

.theme-dark .btn-sm,
.theme-dark .btn-nav,
.theme-dark .btn-nav:hover {color: var(--color-white);}
.theme-dark button span {background-image: url(../img/icon-google-dark.svg);}
.theme-dark button span.apple {background-image: url(../img/icon-apple-dark.svg);}
.theme-dark button.bg-gray-200:hover span.windows,
.theme-dark button span.windows {background-image: url(../img/icon-windows-dark.svg);}

.theme-dark button.bg-white:hover,
.theme-dark button.bg-gray-200:hover,
.theme-dark button.bg-sky-800:hover {background-color: var(--color-sky-800);}
.theme-dark button.hover-orange:hover {background-color: var(--color-orange-600); color: var(--color-gray-900);}

.theme-dark #sec2 .service-img {background-color: #162033;}
.theme-dark .bg-pattern {background: none;}
.theme-dark .service-content .bg-white {background-color: var(--color-gray-200); color: var(--color-white);}
.theme-dark .service-content .hover-orange {background-color: unset; border: 1px solid var(--color-sky-800); color: var(--color-sky-800); position: relative; overflow: hidden;}
.theme-dark .service-content .hover-orange::before {content: ""; position: absolute; width: 100%; height: 0; background-color: var(--color-sky-800); left: 0; bottom: 0; z-index: -1; transition: all 0.28s ease-in-out;}
.theme-dark .service-content .hover-orange:hover {color: var(--color-white) !important; background-color: unset;}
.theme-dark .service-content .hover-orange:hover::before {height: 100%;}
.theme-dark .service-content .hover-orange span.windows {background-image: url(../img/icon-windows-sky.svg);}
.theme-dark .service-content .hover-orange:hover span.windows {background-image: url(../img/icon-windows-dark.svg);}

.theme-dark #sec5 .banner {background-color: #010101;}

.theme-dark section:has(.item-02) {background-color: #121212; overflow: hidden;}
.theme-dark section:has(.item-02) .banner {margin-top: -6rem;}
.theme-dark .item:has(.item-03)::before {background-image: url(../img/item-img04-dark.png); filter: brightness(0.85);}
.theme-dark .item.item-08::before {background-image: url(../img/item-img09-dark.png);}
.theme-dark .item:has(.item-07) {background-color: var(--color-gray-700);}

.theme-dark #brands {position: relative; background-color: #09090A;}
.theme-dark #brands::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-image: url(../img/bg-gradient.png); background-size: cover; mix-blend-mode: plus-lighter; opacity: 0.35;}
.theme-dark #brands .swiper-slide .logo-box-item::before {background-image: url('../img/bg-logo-dark.png'); filter: grayscale(1);}
.theme-dark #brands .swiper-slide .logo-box-item:hover::before {background-image: url('../img/bg-logo-hover-dakr.png'); filter: grayscale(0);}
.theme-dark #brands .swiper-slide .logo-box-item img {opacity: 0.3;}
.theme-dark #brands .swiper-slide .logo-box-item:hover img {opacity: 1;}

.theme-dark #footer .container > div:first-child > div:first-child {background-color: #0000009e;}
.theme-dark #footer .container > div:first-child > div:first-child p {text-shadow: unset; font-weight: 200;}
.theme-dark #footer .container > div:first-child > div.item-08 {background-image: url(../img/item-img08-dark.png);}


/* icon 다크테마 */
.theme-dark .icon-box:hover .icon {background-color: unset;}
.theme-dark .icon {background-color: unset; position: relative;}

.theme-dark .icon::before {content: ""; position: absolute; top: 0; background-image: url(../img/icon-wallet-orange.svg); background-size: cover; width: 100%; height: 100%; transition: all 0.28s ease-in-out; opacity: 0;}
.theme-dark .icon:has(img.icon-02)::before {background-image: url(../img/icon-copyright-orange.svg);}
.theme-dark .icon:has(img.icon-03)::before {background-image: url(../img/icon-shield-orange.svg);}
.theme-dark .icon:has(img.icon-04)::before {background-image: url(../img/icon-download-orange.svg);}
.theme-dark .icon:has(img.icon-05)::before {background-image: url(../img/icon-user-plus-orange.svg);}
.theme-dark .icon:has(img.icon-06)::before {background-image: url(../img/icon-bolt-orange.svg);}
.theme-dark .icon:has(img.icon-07)::before {background-image: url(../img/icon-dollar-orange.svg);}

.theme-dark .icon-box:hover .icon::before {opacity: 1;}

.theme-dark .color-theme {border-color: var(--color-gray-800); background-color: var(--color-gray-700);}
.theme-dark .color-theme button {border-color: var(--color-gray-800);}
.theme-dark .color-theme::before {background-color: #494949;}
.theme-dark .color-theme:has(.active)::before {left: calc(50% + 4px); z-index: 1;}
.theme-dark .color-theme:has(button:not(.active):hover)::before {left: 5px; z-index: 0;}
.theme-dark .color-theme button:not(.active):hover img {filter: brightness(10);}

/* 번역 수정 */
.lang-vi #header .nav .nav-wrap.lg\:flex {display: none;}

.lang-en .max-w-\[1080px\],
.lang-vi .max-w-\[1080px\] {max-width: 1280px;}

/* 반응형 */
@media (min-width: 420px) {
  .item:has(.item-07) {/*max-height: calc(50vh - 8rem);*/}
}

@media (min-width: 560px) {
  #sec2 .service-img img {margin-top: -12vh;}
  .item:has(.item-07) {/*max-height: calc(50vh - 1.5rem);*/ aspect-ratio: 1 / 0.85;}

  /* 번역 */
  .lang-vi #sec6 .grid {grid-template-columns: 1fr 0.5fr; grid-template-rows: unset; grid-auto-flow: row;}
  .lang-vi #sec6 .grid > *:nth-child(n+3) {grid-column: span 2 / span 2;}
  .lang-vi #sec6 .grid > div:nth-child(2) {border-block: none; border-left: 1px solid var(--color-gray-300);}
  .lang-vi #sec6 .grid > div:nth-child(3) {border-top: 1px solid var(--color-gray-300);}
}

@media (min-width: 640px) {
  .container {max-width: unset;}

  #footer .container > div:first-child > div:first-child {aspect-ratio: 1 / 0.78;}
}

@media (min-width: 768px) {
  #sec2 .service-img {aspect-ratio: 1 / 0.72;}
  #sec2 .service-img img {margin-top: -5vh;}

  #sec3 .tech-wrap .icon-box:nth-child(2) {border-inline: 1px var(--tw-border-style) var(--color-gray-300) ;}

  #sec5:has(.item-03) div div div:last-child div:not(.banner) {display: flex; flex-direction: row-reverse;}
  #sec5:has(.item-03) div div div:last-child div:not(.banner) p {writing-mode: vertical-rl; text-align: left; display: inline-flex !important;}

  .item .item-02 {min-width: 58rem; margin-top: -5rem;}
  .item:has(.item-07) {/*max-height: 22.5rem;*/aspect-ratio: 1 / 0.65;}

  #footer {font-size: 13px;}
  #footer .container > div:first-child > div:first-child {aspect-ratio: 16 / 9;}

  /* 번역 */
  .lang-en #sec6 h3 {font-size: 2.75rem;}

  .lang-vi .tech-wrap {flex-direction: column;}
  .lang-vi .tech-wrap .icon-box:nth-child(2) {border-top: 1px solid var(--color-gray-300); border-bottom: 1px solid var(--color-gray-300);}
  .lang-en .item:has(.item-07),
  .lang-vi .item:has(.item-07) {max-height: unset;}
}

@media (min-width: 992px) {
  /* 번역 */
  .lang-en #sec6 h3 {font-size: var(--text-5xl);}
  
  .lang-vi .tech-wrap {flex-direction: row;}
  .lang-vi .tech-wrap .icon-box:nth-child(2) {border-top: none; border-bottom: none;}
}

@media (min-width: 1024px) {
  .bg-line-left-start,
  .bg-line-left-end,
  .bg-line-right-start,
  .bg-line-right-end,
  .bg-line-y-start,
  .bg-line-y-end,
  .bg-line-y-fill-end,
  .bg-line-y-fill-start {position: relative;}

  .bg-line-left-start::before,
  .bg-line-left-end::before,
  .bg-line-right-start::before,
  .bg-line-right-end::before,
  .bg-line-y-start::before,
  .bg-line-y-end::before,
  .bg-line-y-fill-end::before,
  .bg-line-y-fill-start::before {content: ""; position: absolute; width: 100%; border-top: 1px solid var(--color-gray-300);}
  
  .bg-line-y-start::before,
  .bg-line-y-end::before,
  .bg-line-y-fill-end::before,
  .bg-line-y-fill-start::before {border-bottom: 1px solid var(--color-gray-300); bottom: -1px;}

  .bg-line-y-start::before,
  .bg-line-y-end::before {height: 49px;}

  .bg-line-y-fill-end::before,
  .bg-line-y-fill-start::before {height: calc(100% + 2px);}


  .bg-line-left-start::before,
  .bg-line-left-end::before,
  .bg-line-y-start::before,
  .bg-line-y-fill-start::before {right: 100%;}

  .bg-line-right-start::before,
  .bg-line-right-end::before,
  .bg-line-y-end::before,
  .bg-line-y-fill-end::before {left: 100%;}

  .bg-line-left-end::before,
  .bg-line-right-end::before {bottom: -1px;}
  .bg-line-left-start::before,
  .bg-line-right-start::before {top: -1px;}

  #brands .mobile-wrap {display: none;}
  #brands .pc-wrap {display: block;}

  #sec2 .service-img {max-height: calc(100vh - 22vw);}
  #sec2 .service-img img {margin-top: -10vh; max-width: calc(100% + 12.5rem); transform: translateX(calc(-50% - 1.25rem));}
  #sec5:has(.item-03) div div div:last-child div:not(.banner) {display: flex; flex-direction: column;}
  #sec5:has(.item-03) div div div:last-child div:not(.banner) p {writing-mode: unset; text-align: right;}

  #sec6 .grid p {width: calc(100% - 0.25px);} 

  .item:has(.item-02) {position: absolute; height: 100%; width: 50%; left: 0;}
  .item .item-02 {position:absolute; bottom: 0; min-width: calc(100dvh + 20.5rem);}
  .item.item-08::before {background-size: cover;}

  #footer .container > div:first-child {height: auto;}
  #footer .container > div:first-child > div:first-child {background-color:unset; background: linear-gradient(#f5f5f5 16%, #f5f5f500 100%); aspect-ratio: unset;}
  #footer .container > div:first-child > div:first-child p {text-shadow: none;}
  #footer .container > div:first-child > div.item-08 {top: unset; bottom: 0; left: 0; transform: translate(0); justify-content: center;}

  /* theme-dark 다크 테마 */
  .theme-dark #footer .container > div:first-child > div:first-child {background: none;}
  .theme-dark .item .item-02 {bottom: -4rem;}

  /* 번역 */
  .lang-en h3,
  .lang-vi h3 {font-size: 2.5rem;}
  .lang-en #footer h3,
  .lang-vi #footer h3 {font-size: 1.75rem;}
  .lang-en #footer .text-xl,
  .lang-vi #footer .text-xl {font-size: 1rem;}

  .lang-en #sec4 .container > div > div:has(h3),
  .lang-vi #sec4 .container > div > div:has(h3) {width: calc(1 / 2.5 * 100%); padding-left: 0;}
  
  .lang-en #sec6 .grid {grid-template-columns: auto 1fr 1fr;}

  .lang-vi #header .nav .mobile-menu-but.lg\:hidden {display: flex;}

  .lang-vi #sec2 .service-img {max-height: calc(100vh - 26.5vw);}

  .lang-vi #sec6 .grid {grid-template-columns: auto 1fr 1fr;}
  .lang-vi #sec6 .grid > div:nth-child(3) {border-top: none;}
  .lang-vi #sec6 .grid > div:nth-child(n+3) {grid-column: unset;}
  .lang-vi #sec6 .grid > div:nth-child(2) {border-left: 1px solid var(--color-gray-300);}
  .lang-vi #sec6 .grid > p {grid-column: span 2 / span 2; font-size: 1.15rem;}

  .lang-vi #sec7 .container .item.item .item-07 {max-width: unset; margin-inline: auto;}
  .lang-en #sec7 .md\:w-2\/5,
  .lang-vi #sec7 .md\:w-2\/5,
  .lang-en #sec7 .md\:w-3\/5,
  .lang-vi #sec7 .md\:w-3\/5 {width: 50%;}
  .lang-vi .item:has(.item-07) {/*max-height: calc(50vh - 2.5rem);*/}
  .lang-en #brands.pc-wrap,
  .lang-vi #brands.pc-wrap {max-width: clamp(calc(50% - 4rem), calc(50% - 4rem), calc(50% - 2rem)); right: clamp(4rem, 4rem - calc(50% - 640px), 2rem);}
}

@media (min-width: 1080px) {
  #sec2 .service-img {max-height: calc(100vh - 25.5vw); min-height: 39.85rem;}
  .pc-logo-slide {grid-template-columns: repeat(3, 1fr);}
  .color-theme {position: absolute; top: 4rem; right: 4rem;}

  /* 번역 */
  .lang-vi #header .nav .nav-wrap.lg\:flex {display: flex;}
  .lang-vi #header .nav .mobile-menu-but.lg\:hidden {display: none;}

  .lang-en #sec2 .service-img,
  .lang-vi #sec2 .service-img {min-height: 42rem;}
  .lang-vi #sec7 .container > div.flex > div.flex {flex-direction: row;}
  .lang-vi #sec7 .container > div.flex > div.flex:nth-child(3) {flex-direction: row-reverse;}
  .lang-vi #sec7 .container > div.flex > div.flex > div:nth-child(odd) {width: calc(3 / 5 * 100%);}
  .lang-vi #sec7 .container > div.flex > div.flex:last-child > div {width: 100%;}
  .lang-vi #sec7 .container > div.flex > div.flex > div.icon-box {border-bottom: none;}
}

@media (min-width: 1152px) {
  #brands .pcSwiper .pc-logo-slide {grid-template-columns: repeat(3, 1fr);}
}

@media (min-width: 1344px) {
  .nav {padding-inline: 0;}
}

/* 구형(작은) 모바일 */
@media (max-width: 360px) {
  .mb-6 {margin-bottom: calc(var(--spacing) * 4.5);}
  .mb-4 {margin-bottom: calc(var(--spacing) * 1.5);}
  .gap-6 {gap: calc(var(--spacing) * 4.5);}

  button {font-size: 0.85rem;}
  button span {width: 18px; height: 18px;}
  .btn-sm {min-width: 185px; padding: 12px 28px;}
  
  p {font-size: 0.85rem;}
  #footer div > div:nth-child(2) p {font-size: 11px;}
  .text-lg {font-size: 0.875rem;}
  .text-2xl {font-size: 1.15rem;}
  .text-3xl {font-size: 1.5rem;}
  .text-4xl {font-size: 1.75rem;}
  .text-xl {font-size: 1rem;}

  .icon-img {width: 28px; height: auto;}
  .item:has(.item-07) {aspect-ratio: 1 / 0.74;}

  #header .nav > div > a:has(.logo) {gap: 0.25rem;}
  #header .nav > div > a:has(.logo) img {height: 22px;}
  #header .nav > div > a:has(.logo)::after {font-size: 1rem;}
  #header .nav > div .nav-wrap + div.flex {gap: calc(var(--spacing) * 1);}

  /* 번역 */
  .lang-vi .text-5xl,
  .lang-en .text-5xl {font-size: 2.25rem;}

  .lang-zh #footer .container > div:first-child > div:first-child p {font-weight: 400;}
}