/* Trend05 Layout Style - Playful & Vibrant */ /* ๐Ÿ’ก [์ถ”๊ฐ€] ๊ณ ์ • ํ—ค๋”๋กœ ์ธํ•œ ๊ฒน์นจ ๋ฐฉ์ง€ */ body { padding-top: 80px; background-color: #fff; color: #333; /* font-family: 'Poppins', sans-serif; */ /* ๐Ÿ’ก [์ˆ˜์ •] ๊ด€๋ฆฌ์ž ์„ค์ • ํฐํŠธ ์‚ฌ์šฉ์„ ์œ„ํ•ด ์ฃผ์„ ์ฒ˜๋ฆฌ */ } /* 1. ๋ฉ”์ธ ๋น„์ฃผ์–ผ ์„น์…˜ */ .main-visual-section-trend05 { position: relative; width: 100%; height: 600px; background-color: #f0f4f8; /* ๋ฐ์€ ๋ฐฐ๊ฒฝ์ƒ‰ */ display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; margin-bottom: 80px; } /* ๋ฐฐ๊ฒฝ ์žฅ์‹ ์š”์†Œ (์›ํ˜•) */ .visual-bg-shape { position: absolute; border-radius: 50%; z-index: 1; } .shape-1 { width: 300px; height: 300px; background-color: #ff6b6b; /* ์ฝ”๋ž„ ๋ ˆ๋“œ */ top: -50px; left: -50px; opacity: 0.2; } .shape-2 { width: 400px; height: 400px; background-color: #4ecdc4; /* ๋ฏผํŠธ */ bottom: -100px; right: -100px; opacity: 0.2; } .visual-content { position: relative; z-index: 2; } .visual-title { font-size: 4rem; font-weight: 900; line-height: 1.1; margin: 0 0 20px; color: #333; text-transform: uppercase; } .visual-subtitle { font-size: 1.3rem; margin: 0 0 40px; color: #555; } .visual-button { display: inline-block; padding: 15px 50px; background-color: #333; color: #fff; text-decoration: none; font-weight: 700; border-radius: 50px; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .visual-button:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.2); background-color: #000; } /* 2. ๋ฉ”์ธ ์ฝ˜ํ…์ธ  ์˜์—ญ */ .main-content-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .product-section { margin-bottom: 100px; } .section-header { display: flex; align-items: center; margin-bottom: 40px; gap: 15px; } .section-title { font-size: 2rem; font-weight: 800; margin: 0; color: #333; } .section-badge { background-color: #4ecdc4; color: #fff; padding: 5px 12px; border-radius: 20px; font-size: 0.9rem; font-weight: 700; } .guide-box { padding: 40px; background-color: #fff; border: 2px dashed #4ecdc4; color: #4ecdc4; text-align: center; border-radius: 10px; font-weight: 600; } /* ๋ชจ๋ฐ”์ผ ๋ฐ˜์‘ํ˜• */ @media (max-width: 768px) { .main-visual-section-trend05 { height: 450px; } .visual-title { font-size: 2.8rem; } }