@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap');

/*
*****************************************
* CSS Variables
* ***************************************
* Site : kixxcn
* File : custom.css
* DATE : 2026.07.27
*
* SUMMARY :
* 1) Jupiter X Reset 
* 2) HEADER
* 3) MAIN
* 4) FOOTER
* 5) SUB
* 6) RESPONSIBILITY
*/

/* ==========================================================================
   1. Base & Reset
   ========================================================================== */
html { scrollbar-gutter: stable !important; text-size-adjust: 100% !important; font-size: 10px !important; }
html, body { overflow-x: hidden !important; }

.jupiterx-main-content { padding: 0 !important; }
.jupiterx-main-content > .container > .row { margin-left: 0 !important; margin-right: 0 !important; }
.container, .jupiterx-main-content > .container > .row > [class*=col-] { padding-left: 0 !important; padding-right: 0 !important; }
.jupiterx-post-header, .jupiterx-scrolled { display: none !important; }

p { margin-bottom: 0 !important; }
a, a:hover { text-decoration: none !important; }
svg { margin: 0 !important; height: auto !important; }
.elementor-icon-list-text { padding-inline-start: 0 !important; }

.font, .font div, .font a, .font p, .font span, 
.font h1, .font h2, .font h3, .font h4, .font h5, .font h6, 
.font input, .font textarea, .font button, .font label {
  font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #d9d9d9; }
::-webkit-scrollbar-thumb { background-color: #777; border: none; border-radius: 0; }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }

@media (max-width: 720px) {
  html { font-size: calc(10px + 10 * ((100vw - 720px) / 720)) !important; }
  body.mobile.touch { height: 100dvh !important; }
  ::-webkit-scrollbar { width: 6px; height: 6px; }
}

@media all and (min-width: 721px) and (max-width: 1280px) {
  html { font-size: calc(8px + 2 * ((100vw - 720px) / 560)) !important; }
}

/* ==========================================================================
   2. Header & Top Button
   ========================================================================== */
.gnb-item .elementor-item:hover,
.gnb-item .elementor-item.elementor-item-active,
.gnb-item .elementor-item.highlighted,
.gnb-item .elementor-item:focus { font-weight: 700 !important; }
.gnb-item .elementor-item { justify-content: center !important; }
.gnb-item li.menu-item { width: 18rem; }

.sub-arrow { display: flex !important; align-items: center; justify-content: center; margin-left: .4rem; }
.menu-item:hover svg { fill: var(--menu-icon-color-hover) !important; }

.h-lang .submenu { width: 100% !important; border-radius: 8px !important; background-color: #fff !important; border: 1px solid #d9d9d9; margin-top: 8px !important; }
.h-lang .menu-item > a .sub-arrow,
.h-lang .menu-item > a .raven-submenu-icon,
.h-lang .menu-item > a i,
.h-lang .menu-item > a svg { display: inline-block; transition: transform .3s ease !important; }
.h-lang .menu-item > a.submenu-opened .sub-arrow,
.h-lang .menu-item-submenu-opened > a .sub-arrow { transform: rotate(180deg) !important; }
.h-lang .raven-adnav-menu ul.submenu { transform-origin: top center; }
.h-lang ul.submenu svg{width: 1.6rem !important;}
.h-lang ul.submenu a.raven-submenu-item span.link-text{gap:0.5rem !important;}

/* Top Button */
.my-top-container {
  position: fixed !important;
  right: 3rem !important;
  bottom: 5rem !important;
  width: 6rem !important;
  height: 6rem !important;
  min-width: 6rem !important;
  min-height: 6rem !important;
  background-color: #000 !important;
  border-radius: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  cursor: pointer !important;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease !important;
}
.my-top-container.is-visible { opacity: 1 !important; visibility: visible !important; }
.my-top-container.at-footer { bottom: 25rem !important; }
.my-top-container svg { width: 2.4rem !important; transform: rotate(-90deg); }

/* ==========================================================================
   3. Typography System
   ========================================================================== */
.t-h1 { --fs: 6rem !important; --lh: 7.2rem !important; --ls: -.1rem !important; }
.t-h2 { --fs: 4.8rem !important; --lh: 5.8rem !important; --ls: -.05rem !important; }
.t-h3 { --fs: 4rem !important; --lh: 5rem !important; --ls: -.05rem !important; }
.t-h4 { --fs: 3.6rem !important; --lh: 4.6rem !important; --ls: -.05rem !important; }
.t-h5 { --fs: 3.2rem !important; --lh: 4.2rem !important; --ls: -.05rem !important; }
.t-h6 { --fs: 3rem !important; --lh: 4rem !important; --ls: -.05rem !important; }
.t-h7 { --fs: 2.8rem !important; --lh: 3.8rem !important; --ls: -.05rem !important; }

.t-b1 { --fs: 2.4rem !important; --lh: 3.4rem !important; --ls: -.05rem !important; }
.t-b2 { --fs: 2.2rem !important; --lh: 3.2rem !important; --ls: -.05rem !important; }
.t-b3 { --fs: 2rem !important; --lh: 3rem !important; --ls: -.05rem !important; }
.t-b4 { --fs: 1.8rem !important; --lh: 2.8rem !important; --ls: -.05rem !important; }
.t-b5 { --fs: 1.6rem !important; --lh: 2.6rem !important; --ls: -.05rem !important; }

.t-d1 { --fs: 1.4rem !important; --lh: 2.2rem !important; --ls: -.05rem !important; }
.t-d2 { --fs: 1.2rem !important; --lh: 2rem !important; --ls: -.05rem !important; }

@media (max-width: 720px) {
  .t-h1 { --fs: 7.2rem !important; --lh: 8.6rem !important; --ls: -.2rem !important; }
  .t-h2 { --fs: 6rem !important; --lh: 7.2rem !important; --ls: -.2rem !important; }
  .t-h3 { --fs: 5.2rem !important; --lh: 7.2rem !important; --ls: -.1rem !important; }
  .t-h4 { --fs: 4.8rem !important; --lh: 6.8rem !important; --ls: -.1rem !important; }
  .t-h5 { --fs: 4.4rem !important; --lh: 6.4rem !important; --ls: -.1rem !important; }
  .t-h6 { --fs: 4rem !important; --lh: 6rem !important; --ls: -.1rem !important; }
  .t-h7 { --fs: 3.6rem !important; --lh: 5.6rem !important; --ls: -.1rem !important; }
  .t-b1 { --fs: 3.6rem !important; --lh: 5.6rem !important; --ls: -.1rem !important; }
  .t-b2 { --fs: 3.2rem !important; --lh: 5.2rem !important; --ls: -.1rem !important; }
  .t-b3 { --fs: 2.8rem !important; --lh: 4.4rem !important; --ls: -.1rem !important; }
  .t-b4, .t-b5 { --fs: 2.4rem !important; --lh: 4rem !important; --ls: -.1rem !important; }
  .t-d1 { --fs: 2.2rem !important; --lh: 4rem !important; --ls: -.1rem !important; }
  .t-d2 { --fs: 2rem !important; --lh: 3.6rem !important; --ls: -.1rem !important; }
}

:is(.t-h1, .t-h2, .t-h3, .t-h4, .t-h5, .t-h6, .t-h7, .t-b1, .t-b2, .t-b3, .t-b4, .t-b5, .t-d1, .t-d2),
:is(.t-h1, .t-h2, .t-h3, .t-h4, .t-h5, .t-h6, .t-h7, .t-b1, .t-b2, .t-b3, .t-b4, .t-b5, .t-d1, .t-d2) :is(h1, h2, h3, h4, h5, h6, p, span, a, li, strong, em, small, .elementor-heading-title, .elementor-widget-container, .jet-headline__first, .jet-headline__second) {
  font-size: var(--fs) !important;
  line-height: var(--lh) !important;
  letter-spacing: var(--ls) !important;
}

:is(.t-h1, .t-h2, .t-h3, .t-h4, .t-h5, .t-h6, .t-h7, .t-b1, .t-b2, .t-b3, .t-b4, .t-b5, .t-d1, .t-d2) :is(i, svg, img, .elementor-icon, .elementor-icon-wrapper, [class^="jupiterx-icon"], [class^="fa-"], [class*=" fa-"], [class^="eicon-"], [class*=" eicon-"]) {
  font-size: revert !important;
  line-height: revert !important;
  letter-spacing: revert !important;
}

.t-bd { --fw: 700 !important; }
.t-md { --fw: 500 !important; }
.t-rg { --fw: 400 !important; }

:is(.t-bd, .t-md, .t-rg),
:is(.t-bd, .t-md, .t-rg) :is(h1, h2, h3, h4, h5, h6, p, span, a, li, strong, em, b, small, .elementor-heading-title, .jet-headline__first, .jet-headline__second) {
  font-weight: var(--fw) !important;
}

/* ==========================================================================
   4. Main Section
   ========================================================================== */
.main-btn .elementor-button-content-wrapper { align-items: center; }
.main-btn .elementor-button-icon { width: 2.4rem; height: 2.4rem; justify-content: center; }
.main-btn .elementor-button-icon svg { width: 2.4rem; }

.txtstrong { font-weight: 600 !important; }
.br04 { display: none !important; }
.main-box-height { aspect-ratio: 60 / 50.8 !important; }

.main-box-bg { filter: blur(20px) !important; transition: opacity .5s !important; opacity: 0 !important; z-index: 1 !important; }
.main-box:hover .main-box-bg { opacity: 1 !important; }

.main-box .box-visual:before {
  content: ""; position: absolute; bottom: 0; left: -1.6rem; width: 100%; height: 100%;
  background: url(/wp-content/uploads/2026/07/boxFrame_1.svg) no-repeat left bottom / 100% auto;
  z-index: 1;
}
.main-box .box-visual:after {
  content: ""; position: absolute; bottom: 0; left: -1.6rem; width: 100%; height: 100%;
  background: url(/wp-content/uploads/2026/07/boxFrame_2.svg) no-repeat left bottom / 100% auto;
  z-index: 2; clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%); transition: clip-path .5s ease-in-out;
}
.main-box:hover .box-visual:after { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

/* ==========================================================================
   5. Sub - Timeline & Product Components
   ========================================================================== */
/* Timeline Rail */
.about_history {
  position: relative !important;
  overflow: visible !important;
  --line-w: 0.1rem;
}
.about_history::before,
.about_history::after { content: none !important; display: none !important; }

.about_history.tl-measuring .sticky-box,
.about_history.tl-measuring .elementor-sticky--active {
  position: static !important;
  top: auto !important;
}

.about_history > .tl-rail {
  position: absolute !important;
  left: var(--line-x, 47.22%);
  top: var(--line-top, 0px);
  height: var(--line-height, 0px);
  width: var(--line-w);
  transform: translateX(-50%);
  background-color: #E5E7EB;
  border-radius: 999px;
  z-index: 1;
  pointer-events: none;
}
.about_history > .tl-rail > .tl-rail__fill {
  display: block; position: absolute; left: 0; top: 0;
  width: 100%; height: var(--scroll-line-h, 0px);
  background-color: #FF641E; border-radius: inherit;
}

/* Timeline Dots */
.timeline-item {
  position: relative;
  --dot-x: -4.75rem;
  --dot-y: 0.3rem;
  --dot-size: 0.8rem;
  --halo-size: 4rem;
}
.timeline-item * { transition: color .3s ease; }

.timeline-item::before {
  content: '' !important; display: block !important; position: absolute; z-index: 4;
  left: var(--dot-x); top: var(--dot-y);
  width: var(--dot-size); height: var(--dot-size);
  border-radius: 50% !important; background-color: #D9D9D9;
  transition: background-color .3s ease;
}
.timeline-item::after {
  content: '' !important; display: block !important; position: absolute; z-index: 3;
  left: calc(var(--dot-x) + var(--dot-size) / 2);
  top: calc(var(--dot-y) + var(--dot-size) / 2);
  width: var(--halo-size); height: var(--halo-size);
  margin: calc(var(--halo-size) / -2) 0 0 calc(var(--halo-size) / -2);
  border-radius: 50%; background-color: rgba(255,100,30,.20);
  opacity: 0; transform: scale(.3);
  transition: opacity .3s ease, transform .3s ease;
}
.timeline-item.active::before { background-color: #FF641E !important; }
.timeline-item.active .jet-headline__first span { color: #FF641E !important; }
.timeline-item.active .jet-headline__second span { color: #000 !important; }
.timeline-item.current::after { opacity: 1 !important; transform: scale(1) !important; }

/* Product Grid & Swiper */
.category-section {
  scroll-margin-top: 10rem !important; /* 헤더 높이(90px) + 여유 공간 */
}
.p_hover { opacity: 0 !important; transition: all .4s ease-in-out !important; }
.prd-item:hover .p_hover { opacity: 1 !important; }

.prd_a_menu .raven-nav-menu::after,
.prd_a_menu .raven-nav-menu::before { display: none !important; }
.prd_a_menu .raven-nav-menu {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.prd_a_menu .raven-nav-menu > li { width: 100% !important; margin: 0 !important; }
.prd_a_menu .raven-nav-menu > li > a {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; height: 100% !important; min-height: 17rem !important;
  box-sizing: border-box !important; text-align: center !important;
}

.prd_d_img_c { max-width: 418px !important; width: 100% !important; margin: 0 auto !important; }
.prd_d_img_c .raven-main-swiper,
.prd_d_img_c .swiper-wrapper,
.prd_d_img_c .swiper-slide { aspect-ratio: 1 / 1 !important; height: auto !important; }
.prd_d_img_c .raven-carousel-image {
  width: 100% !important; height: 100% !important;
  background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important;
}
.prd_d_img_c .swiper-pagination-bullet { width: 1.2rem !important; height: 1.2rem !important; }
.prd_d_img_c .raven-main-swiper { padding-bottom: 5.2rem !important; }
.prd_d_img_c .swiper-pagination { bottom: 2rem !important; }

/* Product Text & Lists */
.prdtxt-container { background-color: #f7f7f7; border-radius: 16px; width: 100%; box-sizing: border-box; }
.prdtxt-item { padding: 2.4rem 3rem; border-bottom: 1px solid #FFF; }
.prdtxt-item:last-child { border-bottom: none !important; }
.prdtxt-title { font-weight: 700; font-size: 1.8rem !important; line-height: 2.8rem !important; letter-spacing: -0.05rem !important; color: #000; margin-bottom: 4px; }
.prdtxt-desc { font-size: 1.6rem !important; line-height: 2.6rem !important; letter-spacing: -0.05rem !important; color: #333; }

.acf-bullet-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.acf-bullet-list li { position: relative !important; padding-left: 2.6rem !important; }
.acf-bullet-list li::before { content: "•" !important; position: absolute !important; left: 0 !important; top: -1px !important; }

/* Quality Section */
.quality-container { display: flex; flex-direction: column; gap: 2.4rem; }
.quality-title {
  color: #FF641E; font-weight: 700; font-size: 2rem !important; line-height: 3rem !important;
  letter-spacing: -0.05rem !important; margin-bottom: .8rem !important; display: flex; align-items: center; gap: 0.4rem;
}
.quality-title::before {
  content: ''; display: inline-block; width: 1.6rem; height: 1.6rem;
  background: url('/wp-content/uploads/2026/08/bullet_medium.svg') no-repeat center / contain; flex-shrink: 0;
}
.quality-desc { font-size: 1.8rem !important; line-height: 2.8rem !important; letter-spacing: -.1rem !important; color: #333; }

/* Scroll Table */
.scroll_table_box { width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.scroll_table_box img,
.scroll_table_box table { width: 60.8rem !important; max-width: none !important; height: auto !important; display: block; }
.scroll_table_box::-webkit-scrollbar { height: 4px; }

/* ==========================================================================
   6. Media Queries
   ========================================================================== */
@media (max-width: 1280px) {
  .br1250 { display: none; }
}

@media (max-width: 1024px) {
  .br1024 { display: none; }
  .header-utils { position: relative !important; right: 0; top: 0; }
  .hang-menu .elementor-icon { font-size: 3.7rem !important; }
  .h-logo { position: absolute !important; top: 50%; left: 50%; }
}

@media (max-width: 720px) {
  .br767 { display: none; }
  .br04 { display: block !important; }
  .main-btn .elementor-button-text,
  .h-lang .raven-link-item.raven-menu-item .link-text .link-label,
  .h-lang .sub-arrow { display: none !important; }
  
  .h-lang { --menu-icon-size: 4.8rem !important; }
  .h-lang .raven-adnav-menu ul.submenu { width: 17.2rem !important; left: 50% !important; transform: translateX(-50%) !important; }
  .h-lang ul.submenu svg{width: 4.8rem !important;}
  .h-lang ul.submenu a.raven-submenu-item span.link-text{gap:1.5rem !important;}


  /* Typography Mobile Overrides */
  .t-h1.t-bd.mo-t-h2 { --fs: 6rem !important; --lh: 7.2rem !important; --ls: -.2rem !important; }
  .t-h3.t-bd.mo-t-h5 { --fs: 4.4rem !important; --lh: 6.4rem !important; --ls: -.1rem !important; }
  .t-b4.t-rg.mo-t-b3 { --fs: 2.8rem !important; --lh: 4.4rem !important; --ls: -.1rem !important; }
  .t-b3.mo-t-b2 { --fs: 3.2rem !important; --lh: 5.2rem !important; --ls: -.1rem !important; }
  .t-b3.mo-t-b4 { --fs: 2.4rem !important; --lh: 4rem !important; --ls: -.1rem !important; }
  .t-h7.mo-t-h6 { --fs: 4rem !important; --lh: 6rem !important; --ls: -.1rem !important; }
  .t-h2.mo-t-h4, .t-h3.mo-t-h4 { --fs: 4.8rem !important; --lh: 6.8rem !important; --ls: -.1rem !important; }

  /* History Mobile */
  .about_history { --line-w: 0.4rem !important; }
  .timeline-item::before { width: 2rem !important; height: 2rem !important; left: -8.2rem !important; top: 1.9rem !important; }
  .timeline-item::after { width: 6.4rem !important; height: 6.4rem !important; left: -8.5rem !important; top: 1.6rem !important; }
  .timeline-right::before, .timeline-right::after { width: 0.4rem !important; left: 3rem !important; }

  /* Product & Sub Mobile */
  .prd_a_menu .raven-nav-menu { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .prd_a_menu .raven-nav-menu > li > a { min-height: 12rem !important; padding: 1.2rem !important; }
  
  .prdtxt-item { padding: 2.8rem 4.4rem !important; }
  .prdtxt-title { font-size: 2.8rem !important; line-height: 4.4rem !important; letter-spacing: -.1rem !important; margin: 0 !important; }
  .prdtxt-desc { font-size: 2.4rem !important; line-height: 4rem !important; letter-spacing: -.1rem !important; }
  .acf-bullet-list li { padding-left: 3.8rem !important; }
  
  .quality-title, .quality-desc { font-size: 2.8rem !important; line-height: 4.4rem !important; letter-spacing: -.1rem !important; }

  /* Top Button Mobile */
  .my-top-container {
    width: 8rem !important; height: 8rem !important;
    min-width: 8rem !important; min-height: 8rem !important;
  }
  .my-top-container.at-footer { bottom: 70rem !important; }

  .scroll_table_box img { width: 120rem !important;}
}