feat : 반응형 수정

src/css/common.css

@@ -130,11 +130,18 @@ body{overflow-x:hidden;}
 .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;}
 
+.cta-box { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding: 48px 56px; border-radius: 24px; overflow: hidden; background: var(--color-primary); }
+.cta-bg { position: absolute; inset: 0; background-size: 75%; background-position: right 100%; background-repeat: no-repeat; opacity: 0.28; mask-image: linear-gradient(to right, transparent 20%, black 70%); -webkit-mask-image: linear-gradient(to right, transparent 20%, black 70%); }
+.cta-content { position: relative; z-index: 1; }
+.cta-eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); }
+.cta-title { margin: 0; font-size: clamp(22px,2.2vw,30px); font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1.25; }
+.cta-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 52px; padding: 0 28px; background: #fff; border-radius: 999px; font-size: 15px; font-weight: 700; color: var(--color-primary); text-decoration: none; white-space: nowrap; letter-spacing: -.01em; flex-shrink: 0; }
+
 @media (max-width: 768px) {
 .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-sidebar { position: static; flex-direction: column; align-items: flex-start; gap: 4px; }
 .partners-heading { font-size:24px; }
 .partners-heading br { display: none; }
 .partners-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@@ -147,6 +154,8 @@ body{overflow-x:hidden;}
 .partners-grid--5 .partners-logo-cell:nth-last-child(-n+5) { border-bottom: 1px solid #e8e8e8; }
 .partners-grid--5 .partners-logo-cell:nth-child(3n) { border-right: none; }
 .partners-grid--5 .partners-logo-cell:nth-last-child(-n+3) { border-bottom: none; }
+.cta-box { padding: 32px 28px; }
+.cta-bg { background-size: cover; background-position: center; mask-image: linear-gradient(to bottom, transparent 0%, black 40%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%); }
 }
 
 

src/pages/company/PartnersPage.jsx

@@ -27,12 +27,32 @@ const CLIENTS = [
   { id: "molit", logo: "24" },
 ];
 
-const PARTNERS = ["02", "03", "04", "05", "06", "07", "08", "10", "11", "12", "13", "14", "18", "19", "22"];
+const PARTNERS = [
+  "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 src={`${basePath}images/partner/banner${logo}.png`} alt="" loading="lazy" />
+      <img
+        src={`${basePath}images/partner/banner${logo}.png`}
+        alt=""
+        loading="lazy"
+      />
     </div>
   );
 }
@@ -45,22 +65,29 @@ export default function PartnersPage() {
   useEffect(() => {
     const ctx = gsap.context(() => {
       // 모든 섹션 요소 — 아래에서 위로
-      gsap.utils.toArray([".partners-section-row", ".partners-sidebar", ".partners-grid", ".sub-fade-in"]).forEach((el) => {
-        gsap.fromTo(
-          el,
-          { opacity: 0, y: 48 },
-          {
-            opacity: 1,
-            y: 0,
-            duration: 0.7,
-            ease: "power3.out",
-            scrollTrigger: {
-              trigger: el,
-              start: "top 88%",
+      gsap.utils
+        .toArray([
+          ".partners-section-row",
+          ".partners-sidebar",
+          ".partners-grid",
+          ".sub-fade-in",
+        ])
+        .forEach((el) => {
+          gsap.fromTo(
+            el,
+            { opacity: 0, y: 48 },
+            {
+              opacity: 1,
+              y: 0,
+              duration: 0.7,
+              ease: "power3.out",
+              scrollTrigger: {
+                trigger: el,
+                start: "top 88%",
+              },
             },
-          },
-        );
-      });
+          );
+        });
 
       // 로고 셀 stagger (기존 유지)
       gsap.fromTo(
@@ -100,7 +127,13 @@ export default function PartnersPage() {
       <div className="sub-content">
         <div className="inner-wrap">
           {/* 상단 타이틀 */}
-          <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] }}>
+          <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] }}
+          >
             <p className="ht-header-title">
               Trusted by Many,
               <br />
@@ -108,7 +141,9 @@ export default function PartnersPage() {
                 <span>Built</span> <b>for the Future</b>
               </em>
             </p>
-            <em className="ht-header-sub">오랜 신뢰, 깊은 협력 함께하는 기관과 파트너</em>
+            <em className="ht-header-sub">
+              오랜 신뢰, 깊은 협력 함께하는 기관과 파트너
+            </em>
           </motion.div>
           {/* <motion.div
             initial={{ scaleY: 0, opacity: 0 }}
@@ -130,7 +165,7 @@ export default function PartnersPage() {
               <div className="partners-sidebar">
                 <p className="partners-eyebrow">Clients</p>
                 <h2 className="partners-heading">
-                  주요
+                  주요 {""}
                   <br />
                   고객사
                 </h2>
@@ -148,7 +183,7 @@ export default function PartnersPage() {
               <div className="partners-sidebar">
                 <p className="partners-eyebrow">Partners</p>
                 <h2 className="partners-heading">
-                  기술
+                  기술 {""}
                   <br />
                   협력사
                 </h2>
@@ -163,84 +198,22 @@ export default function PartnersPage() {
 
             {/* CTA */}
             <section className="sub-section sub-fade-in">
-              <div
-                style={{
-                  position: "relative",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  flexWrap: "wrap",
-                  gap: "24px",
-                  padding: "48px 56px",
-                  borderRadius: "24px",
-                  overflow: "hidden",
-                  background: "var(--color-primary)",
-                }}
-              >
-                {/* 배경 이미지 — 오른쪽에만 페이드인 */}
+              <div className="cta-box">
                 <div
+                  className="cta-bg"
                   style={{
-                    position: "absolute",
-                    inset: 0,
                     backgroundImage: `url(${basePath}images/ctabackground.png)`,
-                    backgroundSize: "75%",
-                    backgroundPosition: "right 100%",
-                    opacity: 0.28,
-                    maskImage: "linear-gradient(to right, transparent 20%, black 70%)",
-                    WebkitMaskImage: "linear-gradient(to right, transparent 20%, black 70%)",
                   }}
                 />
-
-                {/* 콘텐츠 */}
-                <div style={{ position: "relative", zIndex: 1 }}>
-                  <p
-                    style={{
-                      margin: "0 0 8px",
-                      fontSize: "13px",
-                      fontWeight: 700,
-                      letterSpacing: ".12em",
-                      textTransform: "uppercase",
-                      color: "rgba(255,255,255,.65)",
-                    }}
-                  >
-                    Become a Partner
-                  </p>
-                  <h3
-                    style={{
-                      margin: 0,
-                      fontSize: "clamp(22px,2.2vw,30px)",
-                      fontWeight: 800,
-                      color: "#fff",
-                      letterSpacing: "-.03em",
-                      lineHeight: 1.25,
-                    }}
-                  >
+                <div className="cta-content">
+                  <p className="cta-eyebrow">Become a Partner</p>
+                  <h3 className="cta-title">
                     팔네트웍스와 함께 성장할
                     <br />
                     파트너를 찾습니다
                   </h3>
                 </div>
-
-                <Link
-                  to="/contact/inquiry"
-                  style={{
-                    position: "relative",
-                    zIndex: 1,
-                    display: "inline-flex",
-                    alignItems: "center",
-                    height: "52px",
-                    padding: "0 28px",
-                    background: "#fff",
-                    borderRadius: "999px",
-                    fontSize: "15px",
-                    fontWeight: 700,
-                    color: "var(--color-primary)",
-                    textDecoration: "none",
-                    whiteSpace: "nowrap",
-                    letterSpacing: "-.01em",
-                    flexShrink: 0,
-                  }}
-                >
+                <Link to="/contact/inquiry" className="cta-btn">
                   협력 문의하기
                 </Link>
               </div>