파트너사

src/css/common.css

@@ -108,7 +108,7 @@ body{overflow-x:hidden;}
 
 
 /* ── Partners Page ── */
-.partners-wrap { max-width: 1200px; margin: 0 auto; padding: 0 2.5rem 6rem; }
+.partners-wrap {margin-top:-5rem;padding: 0 0 6rem 0; }
 .partners-title-block { padding: 5rem 0 3.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
 .partners-title-main { font-size: clamp(18px, 2vw, 24px); font-weight: 700; color: #333; letter-spacing: -0.01em; line-height: 1.5; }
 .partners-title-main em { font-style: normal; font-weight: 700; color: #333; background: none; }
@@ -117,7 +117,7 @@ body{overflow-x:hidden;}
 .partners-section-row:first-of-type { border-top: none; }
 .partners-sidebar { display: flex; flex-direction: column; gap: 6px; padding-top: 4px;}
 .partners-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #888; }
-.partners-heading { font-size: 32px; font-weight: 700; color: #111; letter-spacing: -0.04em; line-height: 1.15; margin-top: 6px; }
+.partners-heading { font-size: 32px; font-weight: 800; color: #111; letter-spacing: -0.04em; line-height: 1.15; margin-top: 6px; }
 .partners-count { font-size: 13px; font-weight: 500; color: #999; margin-top: 8px; }
 .partners-grid { display: grid; border: 1px solid #e8e8e8; border-radius: 16px; overflow: hidden; }
 .partners-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@@ -127,13 +127,15 @@ body{overflow-x:hidden;}
 .partners-grid--4 .partners-logo-cell:nth-last-child(-n+4) { border-bottom: none; }
 .partners-grid--5 .partners-logo-cell:nth-child(5n) { border-right: none; }
 .partners-grid--5 .partners-logo-cell:nth-last-child(-n+5) { border-bottom: none; }
-.partners-logo-cell img { max-width: 75%; max-height: 28px; width: auto; height: auto; object-fit: contain; }
+.partners-logo-cell img { max-width: 75%; max-height: 28px; width: auto; height: auto; object-fit: contain;transition:0.3s all;}
+.partners-logo-cell img:hover{transform: scale(1.1);transition:0.3s all;}
+
 @media (max-width: 768px) {
-.partners-wrap { padding: 0 1.25rem 4rem; }
+.partners-wrap {margin-top:-2rem; padding: 0 0 4rem 0; }
 .partners-title-block { padding: 3rem 0 2rem; text-align: left; align-items: flex-start; }
 .partners-section-row { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 0; }
 .partners-sidebar { position: static; flex-direction: row; align-items: baseline; gap: 12px; }
-.partners-heading { font-size: 18px; }
+.partners-heading { font-size:24px; }
 .partners-heading br { display: none; }
 .partners-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .partners-grid--4 .partners-logo-cell:nth-child(4n) { border-right: 1px solid #e8e8e8; }
@@ -153,7 +155,6 @@ body{overflow-x:hidden;}
 /* ── Inner Wrap (공통 max-width) ── */
 .inner-wrap {max-width:1440px; margin:0 auto; padding:0 60px;}
  
-
 /* ── 상단 타이틀 ── 공통 */
 .ht-header {text-align:center; padding:80px 0;}
 .ht-header-title {font-size:48px; font-weight:500; letter-spacing:-.04em; color:#000; line-height:1.3; margin-bottom:0;}

src/pages/company/PartnersPage.jsx

@@ -27,32 +27,12 @@ const CLIENTS = [
   { id: "molit", logo: "24" },
 ];
 
-const PARTNERS = [
+const PARTNERS = ["02", "03", "04", "05", "06", "07", "08", "10", "11", "12", "13", "14", "18", "19", "22"];
-  "02",
-  "03",
-  "04",
-  "05",
-  "06",
-  "07",
-  "08",
-  "10",
-  "11",
-  "12",
-  "13",
-  "14",
-  "18",
-  "19",
-  "22",
-];
 
 function LogoCard({ logo, basePath }) {
   return (
     <div className="partners-logo-cell">
-      <img
+      <img src={`${basePath}images/partner/banner${logo}.png`} alt="" loading="lazy" />
-        src={`${basePath}images/partner/banner${logo}.png`}
-        alt=""
-        loading="lazy"
-      />
     </div>
   );
 }
@@ -65,29 +45,22 @@ export default function PartnersPage() {
   useEffect(() => {
     const ctx = gsap.context(() => {
       // 모든 섹션 요소 — 아래에서 위로
-      gsap.utils
+      gsap.utils.toArray([".partners-section-row", ".partners-sidebar", ".partners-grid", ".sub-fade-in"]).forEach((el) => {
-        .toArray([
+        gsap.fromTo(
-          ".partners-section-row",
+          el,
-          ".partners-sidebar",
+          { opacity: 0, y: 48 },
-          ".partners-grid",
+          {
-          ".sub-fade-in",
+            opacity: 1,
-        ])
+            y: 0,
-        .forEach((el) => {
+            duration: 0.7,
-          gsap.fromTo(
+            ease: "power3.out",
-            el,
+            scrollTrigger: {
-            { opacity: 0, y: 48 },
+              trigger: el,
-            {
+              start: "top 88%",
-              opacity: 1,
-              y: 0,
-              duration: 0.7,
-              ease: "power3.out",
-              scrollTrigger: {
-                trigger: el,
-                start: "top 88%",
-              },
             },
-          );
+          },
-        });
+        );
+      });
 
       // 로고 셀 stagger (기존 유지)
       gsap.fromTo(
@@ -127,13 +100,7 @@ export default function PartnersPage() {
       <div className="sub-content">
         <div className="inner-wrap">
           {/* 상단 타이틀 */}
-          <motion.div
+          <motion.div className="ht-header" initial={{ opacity: 0, y: 32 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-80px" }} transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}>
-            className="ht-header"
-            initial={{ opacity: 0, y: 32 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true, margin: "-80px" }}
-            transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
-          >
             <p className="ht-header-title">
               Trusted by Many,
               <br />
@@ -141,11 +108,9 @@ export default function PartnersPage() {
                 <span>Built</span> <b>for the Future</b>
               </em>
             </p>
-            <em className="ht-header-sub">
+            <em className="ht-header-sub">오랜 신뢰, 깊은 협력 함께하는 기관과 파트너</em>
-              오랜 신뢰, 깊은 협력 함께하는 기관과 파트너
-            </em>
           </motion.div>
-          <motion.div
+          {/* <motion.div
             initial={{ scaleY: 0, opacity: 0 }}
             whileInView={{ scaleY: 1, opacity: 1 }}
             viewport={{ once: true }}
@@ -157,7 +122,7 @@ export default function PartnersPage() {
               margin: "1rem auto 1rem",
               transformOrigin: "top",
             }}
-          />
+          /> */}
 
           <div className="partners-wrap" ref={wrapRef}>
             {/* 주요 고객사 */}
@@ -221,10 +186,8 @@ export default function PartnersPage() {
                     backgroundSize: "75%",
                     backgroundPosition: "right 100%",
                     opacity: 0.28,
-                    maskImage:
+                    maskImage: "linear-gradient(to right, transparent 20%, black 70%)",
-                      "linear-gradient(to right, transparent 20%, black 70%)",
+                    WebkitMaskImage: "linear-gradient(to right, transparent 20%, black 70%)",
-                    WebkitMaskImage:
-                      "linear-gradient(to right, transparent 20%, black 70%)",
                   }}
                 />