@import url("font.css");
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {margin: 0;color: #222;background: #fff;}
a { text-decoration: none; color: inherit; }

/* 공용사용 */
.width {max-width: 1280px; width: 90%; margin: 0 auto;}

/* 애니메이션 정의 */
@keyframes slideDown {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Top bar */
.top-bar {position: relative;background: #f8f8f8;border-bottom: 1px solid #e3e3e3;z-index: 999;}
.top-inner {display: flex;justify-content: flex-end;align-items: center; gap: 12px; height: 34px; font-size: 13px;}
.top-inner a {display: flex;align-items: center; gap: 5px;color: #333;text-decoration: none;font-weight: 500;position: relative;padding: 0 6px;}
.top-inner a:not(:last-child)::after {content: "";position: absolute;right: -6px;top: 50%;transform: translateY(-50%);width: 1px;height: 14px;background: #cfcfcf;}
.top-inner a:hover {color: #000;}
.top-inner img {width: 10px;height: 10px;object-fit: contain;}

/* pc HEADER */
.main-header {background: #fff;border-bottom: 1px solid #e4e4e4;position: relative;z-index: 100;transition: border-bottom 0.3s ease;}
.main-header.menu-open {border-bottom: none;}
.header-inner {display: flex;align-items: center;justify-content: space-between;height: 80px;}
.logo img {height: 46px;max-width: 100%;object-fit: contain;}
.nav-wrapper {  display: flex;flex-direction: column;align-items: center;width: 100%;}
.nav-menu {display: flex;gap: 32px;justify-content: center;width: 100%;}
.nav-item { position: relative; }
.nav-link {cursor: pointer;font-size: 15px;font-weight: 500;padding: 15px;position: relative;}
.nav-link::after {content: "";position: absolute;left: 0; right: 0; bottom: -4px;height: 2px;background: #222;transform: scaleX(0);transform-origin: center;transition: transform 0.2s ease-out;}
.nav-link:hover::after { transform: scaleX(1); }
.mega-menus-container {position: absolute;top: 80%;left: 0;width: 100%;}
.mega-menu {display: none;width: 100vw;background: #fff; overflow: hidden;z-index: 50;}
.mega-menu.open {max-height: 600px;display: block;border-bottom: 1px solid #e4e4e4;animation: slideDown 0.4s ease forwards;} 
.mega-inner {display: flex;gap: 40px;padding: 20px;}
.mega-inner.single-column { flex-direction: column; }
.mega-col {flex: 1;}
.mega-col h3 { margin-bottom: 10px; font-size: 14px; font-weight: 700; text-transform: uppercase; color: #111; }
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col li { margin: 4px 0; }
.mega-col a { font-size: 14px; color: #555; }
.mega-col a:hover { color: #000; }

/* mob HEADER */
.main-header.mobile {display: flex !important;justify-content: center;align-items: center;position: relative;background: #fff;border-bottom: 1px solid #eee;z-index: 100;padding: 16px;}
.mobile-nav-toggle {position: absolute; left: 30px;top: 50%;transform: translateY(-50%);width: 26px;height: 20px;display: flex;flex-direction: column;justify-content: space-between;background: none;border: none;cursor: pointer;z-index: 999;padding: 0;}
.mobile-nav-toggle span {display: block;height: 3px;width: 100%;background: #000;border-radius: 2px;transition: .3s;}
.mobile-nav-toggle.active span:nth-child(1) {transform: translateY(9px) rotate(45deg);}
.mobile-nav-toggle.active span:nth-child(2) {opacity: 0;}
.mobile-nav-toggle.active span:nth-child(3) {transform: translateY(-9px) rotate(-45deg);}
.logo img {position: relative;height: 42px;object-fit: contain;z-index: 9999;}
.mobile-nav {position: fixed;left: -100%;top: 0;width: 100%;background: #fff;overflow-y: auto;padding: 115px 0;transition: left .35s ease;box-shadow: 8px 0 20px rgba(0,0,0,.1);z-index: 900;}
.mobile-nav.open {left: 0;}
.mobile-menu {list-style: none;margin: 0;padding: 0;}
.mobile-accordion {width: 100%;padding: 18px 20px;font-size: 16px;font-weight: 700;background: #fff;border: none;border-bottom: 1px solid #eee;text-align: left;cursor: pointer;}
.mobile-accordion .arrow {float: right;transition: .25s;}
.mobile-accordion.active .arrow {transform: rotate(180deg);}
.mobile-accordion-lv2 {width: 100%;padding: 15px 26px;font-size: 14px;font-weight: 600;background: #f7f7f7;border: none;border-bottom: 1px solid #e1e1e1;text-align: left;cursor: pointer;}
.mobile-accordion-lv2 .arrow {float: right;transition: .25s;}
.mobile-accordion-lv2.active .arrow {transform: rotate(180deg);}
.mobile-sub,.mobile-sub-lv2 {max-height: 0;overflow: hidden;opacity: 0;transform: translateY(-6px);transition:max-height 0.9s cubic-bezier(.32, .90, .35, 1),opacity 0.7s ease,transform 0.7s ease;}
.mobile-sub.open,.mobile-sub-lv2.open {max-height: 800px;opacity: 1;transform: translateY(0);}
.mobile-sub-lv2 {background: #f7f7f7;}
.mobile-sub-lv2 a {display: block;padding: 13px 38px;font-size: 14px;color: #333;border-bottom: 1px solid #f1f1f1;}
.mobile-sub-lv2 a:hover {background: #fafafa;}

/* Footer */
.main-footer {width: 100vw;background: #000;color: #fff;padding: 40px 0;}
.footer-inner {max-width: 1280px;margin: 0 auto;padding: 0 20px;display: flex;flex-direction: column;align-items: center;gap: 14px;text-align: center;}
.main-footer p {margin: 0;font-size: 14px;font-weight: 400;opacity: 0.85;letter-spacing: 0.3px;}
.main-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.main-footer nav a { font-size: 14px; text-decoration: none; color: #fff; opacity: 0.85; transition: 0.25s; }
.main-footer nav a:hover { opacity: 1; }

/* 메인배너 */
.main-banner { width: 100%; height: 820px; overflow: hidden; }
.main-banner .swiper, .main-banner .swiper-wrapper, .main-banner .swiper-slide { width: 100%; height: 100%; }
.main-banner .swiper-slide .main_text { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.main-banner .swiper-slide { display: flex; justify-content: center; align-items: center; color: #fff; font-size: 32px; background-size: cover; background-position: center; background-repeat: no-repeat; }
.main-banner .swiper-slide h2 { font-size: 42px; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.slide1 { background-image: url("../img/banner1.jpg"); }
.slide2 { background-image: url("../img/banner2.jpg"); }
.swiper-pagination-bullet { width: 18px !important; height: 18px !important; margin: 0 8px !important; background: #ffd9e6 !important; opacity: 1 !important; border-radius: 50% !important; transition: transform .4s ease, background .4s ease !important; }
.swiper-pagination-bullet-active { background: #ff9fc2 !important; transform: scale(1.45) !important; }
.swiper-pagination { bottom: 28px !important; }

/* 메인 Shopping 섹션 */
.shopping-event { width: 100%; text-align: center; padding: 90px 20px 70px; background: #fff; }
.shopping-event h2 { font-family: "Merriweather", serif; font-size: 52px; font-weight: 600; color: #111; margin-bottom: 50px; }
.shopping-event .notice { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 18px; color: #666; line-height: 1.6; }
.shopping-event .notice strong { color: #d98100; }

/* 메인 하단 카테고리 */
.main-categories { width: 100%; display: flex; justify-content: center; align-items: center; gap: 1vw; flex-wrap: wrap; margin-bottom: 60px; }
.main-categories .cat-item a { display: flex; flex-direction: column; justify-content: center; align-items: center; text-decoration: none; }
.main-categories .cat-item img { width: 18vw; height: 18vw; max-width: 230px; max-height: 230px; min-width: 110px; min-height: 110px; object-fit: cover; border-radius: 50%; transition: 0.35s ease; box-shadow: 0 7px 20px rgba(0,0,0,.08); }
.main-categories .cat-item span { margin-top: 1.2vw; font-size: clamp(11px, 1.4vw, 22px); font-weight: 700; color: #222; transition: 0.35s ease; }
.main-categories .cat-item:hover img { transform: scale(1.1); filter: brightness(75%); }
.main-categories .cat-item:hover span { color: #B20038; transform: scale(1.06); }


/* 서브페이지 공용 */
.subpage { background-color: #f7f8fa; min-height: 60vh; padding-bottom: 80px; }
.sub-hero { position: relative; padding: 80px 20px 60px; text-align: left; background: linear-gradient(135deg,#3A3A3A 0%, #8A2E2B 100%); color: #ffffff; }
.sub-hero--company { background-image: url("/assets/img/sub-hero-company.png"); background-size: cover; background-position: center; } /* 예: 회사 소개 전용 배경 이미지 */
.sub-hero__label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; margin-bottom: 12px; }
.sub-hero__title { font-size: 32px; font-weight: 700; margin-bottom: 12px; }
.sub-hero__desc { max-width: 650px; font-size: 14px; line-height: 1.6; opacity: 0.9; }
.sub-nav { background-color: #ffffff; border-bottom: 1px solid #e1e4ea; }
.sub-nav__inner { margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.sub-nav__item { position: relative; display: inline-flex; align-items: center; padding: 12px 4px; font-size: 14px; color: #596173; text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.sub-nav__item:hover { color: #8A2E2B; }
.sub-nav__item.is-active { color: #001b3f; font-weight: 600; border-bottom-color: #8A2E2B; }

/* 어바웃 서브페이지 컨텐츠 변경 가능성 있음 */
.sub-content { padding: 40px 20px 0; }
.sub-content__inner { margin: 0 auto; background-color: #ffffff; padding: 32px 28px 40px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04); }
.sub-content__inner h2 { font-size: 22px; margin-bottom: 16px; color: #222533; }
.sub-content__inner p { font-size: 14px; color: #555b6b; line-height: 1.7; margin-bottom: 24px; }
.sub-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.sub-card { background-color: #f9fafc; border-radius: 10px; padding: 18px 16px; border: 1px solid #e3e6f0; }
.sub-card h3 { font-size: 15px; margin-bottom: 8px; color: #1f2533; }
.sub-card p { font-size: 13px; margin: 0; color: #656d7f; }
.overview-section { margin-top: 32px; }
.overview-grid { display: grid; grid-template-columns: 2fr 1.2fr; gap: 32px; margin-bottom: 8px; }
.overview-text h2 { font-size: 22px; margin-bottom: 12px; color: #222533; }
.overview-text p { font-size: 14px; line-height: 1.7; color: #565d6f; }
.overview-facts { background: #f9f7f6; border-radius: 12px; padding: 18px 20px; border: 1px solid #e4dedb; }
.overview-facts h3 { font-size: 15px; margin-bottom: 10px; color: #3A3A3A; }
.overview-facts ul { list-style: none; margin: 0; padding: 0; }
.overview-facts li { display: flex; flex-direction: column; padding: 6px 0; border-top: 1px dashed #d5cfc9; }
.overview-facts li:first-child { border-top: none; }
.overview-facts li span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: #8a8a8a; }
.overview-facts li strong { font-size: 13px; color: #3A3A3A; }
.section-lead { font-size: 14px; color: #555b6b; margin-bottom: 18px; }
.core-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.core-item { background: #f9fafc; border-radius: 10px; padding: 18px 16px; border: 1px solid #e3e6f0; }
.core-item h3 { font-size: 15px; margin-bottom: 8px; color: #1f2533; }
.core-item p { font-size: 13px; margin: 0; color: #656d7f; }
.structure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 12px; }
.structure-col h3 { font-size: 15px; margin-bottom: 8px; color: #1f2533; }
.bullet-list { margin: 0; padding-left: 18px; }
.bullet-list li { font-size: 13px; color: #565d6f; margin-bottom: 6px; }


.pc {display: block !important;}
.mob {display: none !important;}

/* 모바일  */
@media (max-width:1024px) {
.pc {display: none !important;}
.mob {display: block !important;}
}

@media (max-width: 900px) {
  .main-banner { height: 480px; }
  .slide1 { background-image: url("../img/banner1.jpg"); }
  .slide2 { background-image: url("../img/banner2.jpg"); }
  .shopping-event { padding: 60px 16px 55px;}
  .shopping-event h2 {font-size: 34px;margin-bottom: 35px;}
  .shopping-event .notice {flex-direction: column;gap: 8px;font-size: 15px;}
}

@media (max-width: 768px) {
  .sub-nav__inner {flex-direction: column;align-items: flex-start; width: 100% !important;}
  .sub-nav__item {display: block; width: 100%; padding: 12px 0;text-align: center;border-bottom: 1px solid #8f8f8f14;}
  .sub-nav__item.is-active {border-bottom: none;background-color: #8A2E2B;color: #fff;}
}

@media (max-width: 640px) {
  .sub-hero {padding: 60px 16px 40px;}
  .sub-hero__title {font-size: 24px;}
  .sub-hero__desc {font-size: 13px;}
  .sub-content__inner {padding: 24px 18px 28px;}
  .sub-grid,.core-grid {grid-template-columns: 1fr;}
}

@media (max-width: 500px) {
  .main-categories {gap: 24px;}
  .main-categories .cat-item span {font-size: 15px; margin-top: 10px;
  }
}

/* 모바일 최적화 */
@media (max-width: 480px) {
  .main-footer {padding: 32px 0;}
  .main-footer p {font-size: 13px;}
  .main-footer nav {gap: 12px;}
  .main-footer nav a {font-size: 13px;}
}